@charset "utf-8";
:root {
    --white: #fff;
    --black: #434341;
	--gray: #cccccc;
	--pale: #edf2f3;
    --light: #ebf3ff;
	--blue:#4191d9;
	--smoke:#f5f5f5;	
	--link: #d54c4c;
	--font-jp:"BIZ UDPGothic", sans-serif;
	--font-jp-min:"BIZ UDPMincho", serif;
}

/*==========================================================================

reset

===========================================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img{
	line-height: 0;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
	vertical-align:top;
	
}




/*==========================================================================

COMMON

===========================================================================*/

body{
	color: var(--basic);
	font-family: var(--font-jp);
}

@media (min-width:600px) {
	.pcNone{
		display: none;
	}	
}
@media (max-width:599px) {
	.spNone{
		display: none;
	}	
	.pcNone{
		display: inherit;
	}	
}

.talign-r{text-align: right;}
.talign-c{text-align: center;}
.talign-l{text-align: left;}



a{	color: var(--blue);}

a.none{text-decoration: none;}
a.arrow::before{
	content: url("../images/arrow2.svg");
	display: inline-block;
	width: 10px;
	margin-right: 5px;
}


sup,sub{font-size: 75%;}
sup{vertical-align: super;}
sub{vertical-align: sub;}

/*==========================================================================

HEADER

===========================================================================*/
.header_box{
	width: 100%;
	color: var(--black);
	border-bottom: 1px solid var(--gray);
	background-color: var(--white);
	padding-top: 1em;
}
header div.block{
	border-bottom: 1px solid var(--gray);	
}
.header-menu{}
.header-menu p.logoarea span{
	padding-right: 7px;
}

.header-menu p.logoarea,
#header-sp-nav.panelactive #header-sp-nav-list .hd-logoarea{
	box-sizing: border-box;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
	padding: 10px 0 19px 15px;
}

.header-menu p.logoarea a,
#header-sp-nav.panelactive #header-sp-nav-list .hd-logoarea a{
	text-decoration: none;
	color: var(--black);
}

		@media (max-width:768px) {
			.header-menu p.logoarea,
			#header-sp-nav.panelactive #header-sp-nav-list .hd-logoarea{
				font-size: 18px;
				padding-top: 4px;
			}
			
			
			
			.header-menu p.logoarea span,
			#header-sp-nav.panelactive #header-sp-nav-list .hd-logoarea span{
				display: block;
				font-size: 65%;
				padding-right: 0;
			}
		}

/*==========================================================================

HEADER NAV_PC

===========================================================================*/

ul.header-menu-pc-nav{
	display: flex;
    padding: 1em;
	position: relative;
}
ul.header-menu-pc-nav>li{
    font-size: 15px;
    letter-spacing: 1px;
    letter-spacing: 2px;
	box-sizing: border-box;	
}

ul.header-menu-pc-nav>li a::before{
	display: inline-block;
	width: 10px;
	height: 10px;
	content: '';
	background-image: url("../images/arrow-right-white.png");
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
}

ul.header-menu-pc-nav>li:not(:first-child)::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
}

ul.header-menu-pc-nav>li a{	
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
	text-decoration: none;
    color: var(--black);
	font-weight: 700;
    line-height: 100%;
    padding: 10px 8px 8px;
    transition: all .3s ease;
	box-sizing: border-box;
}

ul.header-menu-pc-nav>li a::after {
	content: '';
    position: absolute;
    bottom: -7px;
    left: 0%;
    width: 100%;
    height: 2px;
    background: var(--pale);
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
}

ul.header-menu-pc-nav li div.js-dropdown-menu{
	position: absolute;
    top: 80px;
    left: 0;
	display: none;
	overflow: hidden;
    margin: auto;
	width: 100%;
	z-index: 1;
	background-color: var(--white);
}

ul.header-menu-pc-nav li ul.dropdown__lists{
	padding: 0 0 1em 1em;
    opacity: 1;
    width: 100%;
    height: auto;
    display: flex;
    border-bottom: 1px solid var(--gray);
}
ul.header-menu-pc-nav .dropdown__lists li {
    transition: all .3s;
    position: relative;
}

ul.header-menu-pc-nav .dropdown__lists li a::before{
	display: inline-block;
	width: 10px;
	height: 10px;
	content: '';
	background-image: url("../images/arrow-right-white.png");
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
}

ul.header-menu-pc-nav .dropdown__lists li:not(:first-child)::before{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
}
ul.header-menu-pc-nav .dropdown__lists li a {
	font-size: 14px;
	margin-right: 15px;
}

		@media (max-width:760px) {
			ul.header-menu-pc-nav{	display: none; }
			header div.block{ border-bottom: none;}
			header{
					box-shadow: rgba(0, 0, 0, 0.16) 0px 0 3px 0px;
			}
		}

/*==========================================================================

HEADER NAV_SMP___BUTTON 

===========================================================================*/

#header-sp-nav{
	position:fixed;
	z-index: -1;
	opacity: 0;
	top:0;
	width:100%;
	height: 100vh;
	transition: all 0.3s;
	background-color: var(--white);
}

#header-sp-nav.panelactive{
  opacity: 1;
  z-index:999;
}

#header-sp-nav.panelactive #header-sp-nav-list{
	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999; 
	width: 100%;
	height: 100vh;/*表示する高さ*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#header-sp-nav.panelactive #header-sp-nav-list .hd-logoarea{
	padding: 20px 0 0 15px;
}

#header-sp-nav #header-sp-nav-list>ul {
	display: none;
	position: absolute;
	z-index: 999;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

#header-sp-nav.panelactive #header-sp-nav-list>ul {
	display: block;
}

#header-sp-nav #header-sp-nav-list>ul>li a{
	list-style: none;
	font-size: 18px;
	margin-bottom: 13px;
	line-height: 1.2;
	font-weight: 400;
	text-decoration: none;
	padding:0 0 22px 0;
	display: block;
	letter-spacing: 0.1em;
	color: var(--black);
}
#header-sp-nav #header-sp-nav-list>ul>li a::before{
	content: "";
    display: inline-block;
    width: 9px;
    height: 11px;
    background-image: url('../images/bordr2.gif');
    background-position: center;
    background-size: contain;
	background-repeat: no-repeat;
	margin-right: 10px;
}

#header-sp-nav #header-sp-nav-list>ul>li div.sub-menu{
	padding-left: 1.5em;
	font-size: 13px;
}

#header-sp-nav #header-sp-nav-list>ul>li div.sub-menu ul{
	margin-bottom: 15px;
}
#header-sp-nav #header-sp-nav-list>ul>li div.sub-menu ul li a{
	margin: 0;
	
}

#header-sp-nav-list h1{}
#header-sp-nav-list h1 p{}	
#header-sp-nav-list h1 p img{}

#header-sp-nav li div.snsArea{
	display: flex;
	justify-content: center;
	margin-top:30px;
}
#header-sp-nav-list .snsArea p{
	width: 65px;
}
#header-sp-nav-list .snsArea p img{
	width: 100%;
	height: auto;
}


		@media (max-width:760px) {
						.openbtn{
							position:fixed;
							z-index: 9999;/*ボタンを最前面に*/
							top:14px;
							right: 16px;
							cursor: pointer;
							width: 50px;
							height:50px;
							}
						.openbtn span{
							display: inline-block;
							transition: all .4s;
							position: absolute;
							left: 14px;
							height: 3px;
							border-radius: 2px;
							background-color: var(--black);
							width: 55%;
						  }

						.openbtn span:nth-of-type(1) {
							top:13px;	
						}

						.openbtn span:nth-of-type(2) {
							top:22px;
						}

						.openbtn span:nth-of-type(3) {
							top:31px;
						}

						.openbtn span:nth-of-type(3)::after {
							content:"";
							position: absolute;
							top:10px;
							left:2px;
							color: var(--basic);
							font-size: 0.6rem;
							text-transform: uppercase;
						}


						.openbtn.active span:nth-of-type(1) {
							top: 18px;
							left: 18px;
							transform: translateY(6px) rotate(-45deg);
							width: 30%;
						}

						.openbtn.active span:nth-of-type(2) {
							opacity: 0;
						}

						.openbtn.active span:nth-of-type(3){
							top: 30px;
							left: 18px;
							transform: translateY(-6px) rotate(45deg);
							width: 30%;
						}

						.openbtn.active span:nth-of-type(3)::after {
							content:"Close";/*3つ目の要素のafterにClose表示を指定*/
							transform: translateY(0) rotate(-45deg);
							top:8px;
							left:4px;
						}
		}


		@media (max-width:600px) {
			#header-sp-nav-list h1 p{
				width: 46%;
				padding-left: 10px;
				box-sizing: border-box;
			}
			#header-sp-nav-list ul li a{font-size: 14px;}
		}	

		@media (max-width:500px) {
			.openbtn{ width: 40px; height: 40px; }
				.openbtn span:nth-of-type(1) {top:11px;}
				.openbtn span:nth-of-type(2) {top:20px;}
				.openbtn span:nth-of-type(3) {top:29px;}			
		}	



/*==========================================================================

CONTENTSAREA

===========================================================================*/

.cotentsArea{
	padding: 3em 0;
	font-family: var(--font-jp);
}
.firstContents{
	padding-top: 16em;
    padding-bottom: 7em;
}
.main-inner{
	width:85%;
	max-width: 1100px;
	margin: 50px auto;
}

		@media (max-width:760px) {
			.firstContents{
				padding-top: 11em;
				padding-bottom: 5em;				
			}
		}


/*==========================================================================

FOOTER

===========================================================================*/

footer{
	width:100%;
	padding: 40px 0 25px 0;
	background-color: var(--smoke);
}
footer .footerArea{
	width:90%;
	margin: 0 auto;
}
footer p{
	line-height: 1.5;
	font-size: 13px;
	color: var(--black);
}
footer a{
	color: var(--black);
	text-decoration: none;
	font-weight: 500;
}
footer a:hover{
	color: var(--link);
}

footer .footer_Map{
	display: flex;
}
footer .footer-logo h2{
	margin-right: 2em;
}
footer .footer_siteMap ul{
	display: flex;
	flex-wrap: wrap;
	border-left: 2px solid var(--gray);
	padding-left: 2em;
	margin-bottom: 1em;
}
footer .footer_siteMap ul li{
	margin-right: 1.5em;
}



.footer_copyright{
	font-size: 13px;
    border-top: 1px solid var(--gray);
    padding: 15px 0 0 0;
	line-height: 1.3;
}
footer address{
	margin-right: 33px;
}

.footer_copyright .sns_button{
	display: flex;
	
}
.footer_copyright .sns_button li{
	width: 26px;
	margin-right: 15px;
}
.footer_copyright .sns_button li a img{
	width: 100%;
	height: auto;
	margin-right: 15px;
}



		@media (max-width:1200px) {			
			footer{padding-bottom: 20px;}	
			footer .footer_Map{flex-wrap: wrap; width: 90%;}
			footer .footer-logo h2 {width: 100%;margin-right: 0; font-size: 20px; margin-bottom: 1.2em; letter-spacing: 1px;}
			footer .footer-logo{display: block;width: 100%;}
			footer p{margin-bottom: 25px;}	
			footer .footer_Map .footer_siteMap{width: 100%;}
			footer address{margin-right: 0;}
			
		}
		@media (max-width:600px) {	
			footer .footer_siteMap ul{padding-left: 1em;}
			footer .footer_siteMap ul li{margin: 0.5em 1.5em 0.5em 0;}
			footer .footer-logo h2 span{display: block;font-size: 80%; margin-bottom: 7px;}
		}






/*==========================================================================

TOP BACK

===========================================================================*/

#page_top{
    position: fixed;
    right: 10px;
    bottom: 10px;
    text-indent: -9999px;
    margin: 0;
}
#page_top a {
    position: relative;
    display: block;
    width: 65px;
    height: 65px;
    background: var(--blue);
    transition: opacity .6s ease;
	border: 0;
	border-radius: 50%;
}
#page_top a:hover {
    opacity: .3;
}
#page_top a::before {
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 14px;
    height: 14px;
    margin: auto;
    content: '';
    transform: rotate(-45deg);
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
@media screen and (max-width:767px) {
#page_top a {
    width: 45px;
    height: 45px;
}
#page_top a::before {
    top: 5px;
    width: 10px;
    height: 10px;
}
}



/*==========================================================================

XFORM

===========================================================================*/


::placeholder{	color:#ccc;}



p.front{
letter-spacing: 2px;
    padding: 7px 0 4px 0px;
    font-size: 15px;
}


p.back{
	background-color: #f2ecef;
    /* border-radius: 15px; */
    padding: 10px 16px;
    /* border: 1px solid #ffc0ac; */
    width: 93%;
    margin-top: 1em;
    box-sizing: border-box;
    font-size: 14px;
	letter-spacing: 1px;
	line-height: 1.3;
}




.short{	width: 30%;}
@media screen and (max-width:1200px) { .short{	width: 40%;} }
@media screen and (max-width:500px) { .short{	width: 55%;} }


.flexarea{
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flexarea div{
	width: 47%;
}
.flexarea div .short{
	width: 95%;
}
.short2{	width: 5em;}

.radioBoxArea{
	display: flex;
	flex-wrap: wrap;
}
.radioBoxArea .radioBox{
	width: 30%;
}

		@media (max-width:600px) {
				.radioBoxArea .radioBox{
					width: 45%;
				}
		}


table.xf_block {
	margin: 5em 0 0 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ffffff;
  border-top: 1px solid #ccc;
	background-color: #FFFFFF;
  text-align: left;
}
table.xf_block th {
  /* width: 30%; */
  box-sizing: border-box;
  font-size: 15px;
  font-weight: bold;
  padding: 0 20px;
  text-align: left;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}

table.xf_block th span.xf_essential{
border-radius: 3px;
    margin-left: 0.5em;
    background-color: #c85520;
    color: #fff;
    padding: 5px;
	font-weight: normal;
    font-size: 10px;
    letter-spacing: 2px;
}


table.xf_block th.xf_table_title{
  font-size: 18px;
  padding: 1em 0;
  border-left: none;
	background-color: #fffaf7;
}

table.xf_block td{
	box-sizing: border-box;
	width: 70%;
	  padding: 25px;
	  border-bottom: 1px solid #cccccc;
	  border-left: 1px solid #cccccc;
	  border-right: 1px solid #cccccc;
	  border-top: none;
}
input[type="text"], input[type="tel"], input[type="email"], textarea{
	width: 100%;
    padding: 11px;
    border: 1px solid #cac0c0;
    border-radius: 2px;
    background: #FFF;
    font-size: 16px;
    line-height: 1.3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    display: inline-block;
    border-radius: 6px;
    box-sizing: border-box;
}

input[type="radio"],input[type="checkbox"]{
  margin-bottom:15px;
}
input[type="radio"]{
  margin-top: 10px;
}
input[type="radio"] + label{
  font-size: 16px;
}



input[type=checkbox] :checked+label::before {
background: cornflowerblue;
}


input[type=checkbox] + label{
	font-size: 15px;
    letter-spacing: 1px;
    margin-right: 14px;
}

input[type=checkbox]:checked + label, input[type="radio"]:checked + label{
  font-weight:bold;
  border-bottom: 1px solid #000;
}

div.zip input[type="text"] {
  width: 250px;
}

select {
	  width: 100%;
	  padding: 10px 0;
	  font-size: 1em;
	border-radius: 5px;
	border: 1px solid #cac0c0;
	font-weight: bold;
}


input[type="submit"] {
	display: inline-block;
    text-decoration: none;
    background: #c85520;
    border: 1px solid #c85520;
    color: #FFF;
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
    margin: 30px auto;
    padding: 18px 0;
    transition: 0.7s;
    width: 85%;
	max-width: 600px
}



input[type="submit"]:hover{
  background: #523473;
  border: 1px solid #523473;
}

p.done{
  padding: 10px;
  background-color: #EDEDED;
  line-height: 1.7em;
}





@media screen and (min-width:769px) {
	.pc_display{
		display: block;
	}
	.sp_display{
		display: none;
	}
}

@media screen and (max-width:768px) {

	div.wrapper{
		width: 95%;
		margin: 0 auto;
	}
		
	h1{width: 100%;}
	h1 picture{
		width:60%;
	}
	h1 picture img{width: 100%; height: auto}
	
	


}
@media screen and (max-width:600px) {
  .sp_display{
    display: block;
  }
  .pc_display{
    display: none;
  }
  div.wrapper{
    width: 95%;
  }
  h1{
    font-size: 16px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.7em;
    margin: 0 auto;
    padding: 10px;
  }
  h1 img{
    width: 100%;
	  height: auto;
  }

    p.present span::before{
      content: '';
    }
    p.present span::after{
      content: '';
    }
  
  div.PhotoBox{
    padding: 10px;
    flex-wrap: wrap;
  }
  div.PhotoBox p{
  width: calc(100% / 2 - 10px);
  text-align: center;
  font-weight: normal;
    margin-top: 6px;
}
div.PhotoBox p span{
  font-size: 12px;
  padding: 3px 0 0;
  display: inline-block;
  letter-spacing: 1px;
}
	
div.PhotoBox p img{
  width: 100%;
  border: 6px solid #fff;
}
	table.xf_block{
		border: 1px solid #ccc;
		
	}
    table.xf_block tr{
      display: block;
    }
	
    table.xf_block th{
      display: block;
      width: 100%;
      padding: 15px 5px;
      text-align: left;
		background-color: #efefef;
		border-right: none;
		border-left: none;

	}
	
    table.xf_block td{
      display: block;
      width: 100%;
      padding: 20px 17px;
		border-right: none;
		border-left: none;
    }
	p.back{
		width: 100%;
	}
 
	input[type="text"], input[type="tel"], input[type="email"], textarea{
      width: 100%;

      box-sizing: border-box;
      padding: 9px 13px;
      border: 1px solid #ACACAC;
      border-radius: 4px;
      background: #FFF;
      font-size: 16px;
      line-height: 1.3;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;
      display: inline-block;
    }
	
}


p.img-full{
	margin: 2em 0
}
@media screen and (max-width:864px) {
	p.img-full{
		width: 90%;
		margin: 2em auto;
	}
	p.img-full img{
		width: 100%;
		height: auto;	}


}

.googlemapArea{
	clear:both;
	text-align:center;
	margin:50px auto;
	}
	
.googlemap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
margin:0 auto;
}
.googlemap iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
	height: 500px;
}


@media screen and (max-width: 1024px) {
.googlemap {
width: 100%;
}
.googlemap iframe {
height: 100%;
}
}