@charset "utf-8";
/* 
	
CSS base.css */



/*
main #3c2717
sub #cc0001
*/



/*//////////////////


Header


//////////////////*/

#header { width: 100%;  z-index: 100; }
#header .incnt { position: relative; max-width: 1420px; width: calc(100% - 60px); margin: 0 auto; }
#header.fixed { position: fixed; top: 0; background: #fff; background: rgba(255,255,255,0.97); animation: navfit 0.5s ease-out 0s 1 normal both; }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 160px; }
#header .logo { line-height: 0; margin-bottom: -90px; margin-left: 8%; }
#header .logo img { width: 282px; }
#header.fixed .mainbox { height: 120px; }
#header.fixed .logo{ margin-bottom: -50px; }
#header.fixed .logo img { width: 230px; }
@media screen and (max-width: 1200px) {
	#header .logo{ margin-left: 4%; }
	#header .logo img { width: 230px; }
	#header.fixed .logo{ margin-bottom: -60px; }
	#header.fixed .logo img { width: 200px; }
}
@media screen and (max-width: 1040px) {
	#header .incnt{ width: 88%; }
	#header .logo { margin-bottom: 0; margin-top: 0; margin-left: 0; }
	#header, #header .mainbox { height: 120px; }
	#header .logo img { width: 200px; }
}

/* スライド画像のエフェクト */
@keyframes navfit {
  0% { transform: translate(0px, -50px); }
  100% { transform: translate(0px, 0px);  }
}









/*//////////////////


Nav


//////////////////*/

#gnav { }
#gnav:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#gnav .bg { opacity: 0; }
#gnav ul.main { text-align: right; margin-top: 80px; }
#gnav ul.main>li { display: inline-block; float: left; position: relative; padding-right: 15px;  }
#gnav ul.main>li[data-cat="index"] { display: none; }
#gnav ul.main>li:last-child { padding-right: 0; }
#gnav ul.main>li a { text-decoration: none; position: relative; vertical-align: middle; }
#gnav ul.main>li a:hover { color: #B09C85; opacity: 1;}
#gnav ul.main>li.current a,
#gnav ul.main>li.current p span { color: #B09C85; }
#gnav ul.main>li.hassub{ cursor: pointer; padding-top: 2px; }
#gnav ul.main>li.hassub>ul{ background-color: #d6c3a9; padding: 32px 20px; color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 650px; position: absolute; left: -240px; top: 40px; text-align: center; display: none; }
#gnav ul.main>li.hassub>ul>li{ display: inline-block; margin-left: 15px; }
#gnav ul.main>li.hassub>ul>li a{ color: #fff; }
#gnav ul.main>li.hassub>ul>li:before{ content:"/"; margin-right: 15px; vertical-align: middle; }
#gnav ul.main>li.hassub>ul>li:first-child{ margin-left: 0; }
#gnav ul.main>li.hassub>ul>li:first-child:before{ content:none; }
#gnav ul.main>li.hassub>ul>li a:hover{ color: #3c2717; opacity: 1; }
#gnav ul.main>li[data-cat="contact"] a{ display: inline-block; }
#gnav ul.main>li[data-cat="contact"] a span{ background-color: #d6c3a9; width: 44px; height: 44px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; border-radius: 50%;transition: 0.6s; margin-top: -6px; }
#gnav ul.main>li[data-cat="contact"] a:hover span{ opacity: 0.7; }
#gnav ul.main>li[data-cat="contact"] svg{ width: 26px; height: 18px; }

/* スクロールfixed */
#header.fixed #gnav ul.main { text-align: right; margin-top: 40px; }
@media screen and (max-width: 1280px) {
	#gnav ul.main { right: -40px; }
	#gnav ul.main>li.hassub>ul{ left: -120px; }
}
@media screen and (max-width: 1180px) {
	#gnav ul.main>li { padding-right: 12px; font-size: 15px; }
}
@media screen and (max-width: 1040px){
	#gnav { z-index: 1000; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; }
	#gnav .navbox { position: absolute; top: 50%; left: 0; text-align: center; width: 88%; padding: 0px 6%; /* Safari用 */ transform: translate(0, -50%); }
	#gnav ul.main { position: static; display: block; text-align: center; margin-top:0; }
	#gnav ul.main>li,
	#gnav ul.main>li.hassub>ul>li,
	#gnav ul.main>li.hassub>ul>li:first-child,
	#gnav ul.main>li[data-cat="contact"]{ display: block!important; margin: 2px 10px; float: none; opacity: 0; padding-right: 0; font-size: 18px; }
	#gnav ul.main>li a,
	#gnav ul.main>li p,
	#gnav ul.main>li.hassub>ul>li a { color: #fff; }
	#gnav ul.main>li a:hover,
	#gnav ul.main>li.hassub>ul>li a:hover{ color: #fff;}
	#gnav ul.main li.current>a,
	#gnav ul.main>li.current p span { color: #fff; }
	#gnav ul.main li:not([data-cat="contact"])>a span{ position: relative; display: inline-block; overflow: hidden; line-height: 1.4 }
	#gnav ul.main>li:not([data-cat="contact"]) a span:after{  content:""; background-color: #fff; position: absolute; bottom: 0; left: 0; height: 1px;-webkit-transition: .5s all; transition: .5s all; -moz-transition : .5s all; width: 0;; }
	#gnav ul.main>li:not([data-cat="contact"]) a:hover span:after,
	#gnav ul.main li:not([data-cat="contact"]).current>a span:after{ width: 100%; }
	#gnav ul.main>li.hassub>ul{ background-color: transparent; padding: 0; display: block; width: auto; position: static; }
	#gnav ul.main>li.hassub>ul>li:before{ content:none }
	#gnav ul.main>li[data-cat="contact"]{ margin-top: 20px; }
	#gnav ul.main>li.hassub{ padding-top: 0; }
	
	#gnav.is-open { pointer-events: auto; opacity: 1; }
	#gnav .bg {
		background: #3c2717; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; z-index: -1; opacity: 0;
		-webkit-transform:scale(0.9,0.9); transform:scale(0.9,0.9);
		-webkit-transition: all 0.6s cubic-bezier(0,.53,.41,1); transition: all 0.6s cubic-bezier(0,.53,.41,1);
 	}
	#gnav.is-open .bg { opacity: 1; -webkit-transform:scale(1,1); transform:scale(1,1); }
	
	/* telbox */	
/*	#gnav .pnavbox {display: block;position: static; }
	#gnav .pnavbox ul { text-align: center; }
	#gnav .pnavbox li { display: block; float:none; margin:0; opacity: 0;  font-size: 18px; }
	#gnav .pnavbox li a { color: #fff; font-family: yu-mincho-pr6n,"游明朝体",YuMincho,"Yu Mincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif; }
	#gnav .pnavbox li a:hover { text-decoration: line-through; color: #fff;}*/
	
	#gnav.is-open ul.main>li,
	#gnav.is-open ul.main>li.hassub>ul>li,
	/*#gnav.is-open ul.main>li.hassub>ul>li:first-child,*/
	#gnav.is-open .pnavbox>ul>li { opacity:1; transition: 3s; }
	#gnav.is-open ul.main>li:nth-child(1) { -webkit-transition-delay: .24s; transition-delay: .24s; }
	#gnav.is-open ul.main>li:nth-child(2) { -webkit-transition-delay: .32s; transition-delay: .32s; }
	#gnav ul.main>li.hassub>ul>li:nth-child(1) { -webkit-transition-delay: .40s; transition-delay: .40s; }
	#gnav ul.main>li.hassub>ul>li:nth-child(2) { -webkit-transition-delay: .48s; transition-delay: .48s; }
	#gnav ul.main>li.hassub>ul>li:nth-child(3) { -webkit-transition-delay: .56s; transition-delay: .56s; }
	#gnav ul.main>li.hassub>ul>li:nth-child(4) { -webkit-transition-delay: .64s; transition-delay: .64s; }
	#gnav.is-open ul.main>li:nth-child(3) { -webkit-transition-delay: .72s; transition-delay: .72s; }
	#gnav.is-open ul.main>li:nth-child(4) { -webkit-transition-delay: .80s; transition-delay: .80s; }
	#gnav.is-open ul.main>li:nth-child(5) { -webkit-transition-delay: .88s; transition-delay: .88s; }
	#gnav.is-open ul.main>li:nth-child(6) { -webkit-transition-delay: .96s; transition-delay: .96s; }
	#gnav.is-open ul.main>li:nth-child(7) { -webkit-transition-delay: 1.04s; transition-delay: 1.04s; }
	#gnav.is-open ul.main>li[data-cat="contact"] { -webkit-transition-delay: 1.12s; transition-delay: 1.12s; }
	/*#gnav.is-open .pnavbox>ul>li:nth-child(1) { -webkit-transition-delay: .96s; transition-delay: .96s; }
	#gnav.is-open .pnavbox>ul>li:nth-child(2) { -webkit-transition-delay: .104s; transition-delay: .104s; }*/
}
@media screen and (max-width: 767px){
	#gnav ul.main>li a,
	#gnav .pnavbox li a { font-size: 16px; }
}









/*//////////////////


Menubtn


//////////////////*/

#menubtn {display: none; z-index: 1001; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 30px; right: 30px; display: block; background: transparent; width: 50px; height: 50px; transition : 0.3s; cursor: pointer; }
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; border: 2px solid #3c2717; }
	#menubtn a .line {
		width: 20px; height: 2px; background: #3c2717; position: absolute; left: 50%; margin-left: -11px;transition: all 0.6s;
	}
	#menubtn a #line1 { top: 17px; }
	#menubtn a #line2 { top: 25px; }
	#menubtn a #line3 { top: 33px; }
/*	#menubtn a:hover #line1 { top: 19px; }
	#menubtn a:hover #line2 { top: 25px; }
	#menubtn a:hover #line3 { top: 31px; }*/
	#menubtn.active a .txt { display: none; }
	#menubtn.active a span { width: 19px; background: #fff; }
	#menubtn.active a #line1 {
		top: 18px;
		-webkit-transform:translateY(10px) translateX(0) rotate(45deg);
		transform:translateY(10px) translateX(0) rotate(45deg);
	}
	#menubtn.active a #line2 { display: none; }
	#menubtn.active a #line3 { 
		top: 38px;
		-webkit-transform:translateY(-10px) translateX(0) rotate(-45deg); 
		transform:translateY(-10px) translateX(0) rotate(-45deg);
	}
}
@media screen and (max-width: 767px){
}









/*//////////////////


Mainv_index


//////////////////*/

#mainv_index { position: relative; height: 824px; border-radius: 40px 0 40px 0; max-width: 1420px; width: calc(100% - 60px); margin-left: auto; margin-right: auto; overflow: hidden; z-index: -1; margin-bottom: 10px; }
#mainv_index .bg{ width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ object-position: 50% 50% }
#mainv_index .box { position: absolute; top: 50%; left: 0; text-align: center; width: 100%; -webkit-transform: translate(0, -50%); /* Safari用 */ transform: translate(0, -50%); }
#mainv_index .box .tategaki {border-left: 3px solid #fff; border-right: 3px solid #fff; padding: 60px 90px 17px; position: relative; }
#mainv_index .box .tategaki:before{ content:""; width: 30px; height: 3px; display: inline-block; background-color: #fff; position: absolute; top: 0; left: 0; }
#mainv_index .box .tategaki:after{ content:""; width: 280px; height: 3px; display: inline-block; background-color: #fff; position: absolute; top: 0; right: 0; }
#mainv_index .box .tategaki .copy { font-size: 1.63em; padding: 0; color: #fff; font-weight: bold; }
#mainv_index .box .tategaki .copy:before{ content:""; width: 30px; height: 3px; display: inline-block; background-color: #fff; position: absolute; bottom: 0; right: 0; }
#mainv_index .box .tategaki .copy:after{ content:""; width: 280px; height: 3px; display: inline-block; background-color: #fff; position: absolute; bottom: 0; left: 0; }
#mainv_index .box .tategaki .copy .txt1{ margin-top: -15px; font-weight: bold; }
#mainv_index .txt2 { position: absolute; left: 70px; bottom: 85px; padding: 11px 31px; background: #fff; font-weight: bold; font-size: 1.25em; border: 1px solid #fff; border-radius: 30px; }
@media screen and (max-width: 1040px){
	#mainv_index { height: 420px; border-radius: 30px 0 30px 0; width: 88%; margin-bottom: 0; }
	#mainv_index .box .tategaki {border-left: 2px solid #fff; border-right: 2px solid #fff; padding: 30px 40px 10px; position: relative; }
	#mainv_index .box .tategaki:before,
	#mainv_index .box .tategaki .copy:before{ width: 20px; height: 2px; }
	#mainv_index .box .tategaki:after,
	#mainv_index .box .tategaki .copy:after{ width: 140px; height: 2px; }
	#mainv_index .box .tategaki .copy { font-size: 1.25em; }
	#mainv_index .box .tategaki .copy .txt1{ margin-top: -10px; }
	#mainv_index .txt2 { position: absolute; left: 6%; bottom: 15px; padding: 6px 20px; font-size: 1em; border-radius: 30px; }
}
@media screen and (max-width: 767px){
	#mainv_index{ border-radius: 0; }
}
@media screen and (max-width: 639px){
}

/* スライド画像のエフェクト */
/*
@keyframes zoomout {
	0% { transform: scale(1); filter: blur(8px);}
	20% { transform: scale(1.03); filter: blur(0);}
	100% { transform: scale(1.15); filter: blur(0); }
}
*/
@keyframes zoomout {
	0% { transform: scale(1.03); filter: blur(8px);}
	20% { transform: scale(1.07); filter: blur(0);}
	100% { transform: scale(1.23); filter: blur(0); }
}








/*//////////////////


Mainv


//////////////////*/

#mainv { position: relative; background: #f7f3ed; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 280px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; z-index: -1; }
@media screen and (max-width: 1040px){
	#mainv { align-items: center; height: 180px; }
}
@media screen and (max-width: 767px){
	#mainv{ height: 150px; }
}












/*//////////////////


Pankuzu


//////////////////*/

#pankuzu { line-height: 1.4; padding:15px 0 20px; background: #f7f7f7;}
#pankuzu ol { margin: 0 60px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 16px; }
#pankuzu ol li:before { content:"/"; display: inline-block; margin: 0 5px }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; }
@media screen and (max-width: 1180px) { 
	#pankuzu ol { display: none; }
}
@media screen and (max-width: 1040px) { 
	#pankuzu { display: none; }
}






/*//////////////////


Content


//////////////////*/

#main { margin-top: 0px; margin-bottom: 120px; }
#index #main { padding-bottom: 0px; margin-bottom: 120px; }
body:not(#index) #main .secwrap:last-child{ padding-bottom: 30px; }
@media screen and (max-width: 767px) { 
	#main { margin-top: 0px; margin-bottom: 60px; padding-bottom: 60px; }
	#index #main { margin-bottom: 60px; }
}










/*//////////////////


Cntside


//////////////////*/

#side {  }













/*//////////////////


Footer


//////////////////*/

#footer { padding-bottom: 30px; }

/* contactbox */
#footer .contactbox { position: relative; border-radius: 40px 0 40px 0; max-width: 1420px; width: calc(100% - 60px); margin-left: auto; margin-right: auto; overflow: hidden; margin-bottom: 60px; }
#footer .contactbox .bg { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; }
#footer .contactbox .inbox1 { background: rgba(0,0,0,0.4); display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height: 460px; padding: 40px 6%; }
#footer .contactbox .inbox1 .copy{ color: #fff; font-weight: bold; font-size: 1.75em; margin-bottom: 35px; text-align: center; }
#footer .contactbox .inbox1 .copy span{ font-weight: bold; }
#footer .contactbox .inbox1 .link{ display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: space-between; }
#footer .contactbox .inbox1 .link .tellink{ font-size: 1.5em; line-height: 1.6; margin-right: 60px; }
#footer .contactbox .inbox1 .link .tellink,
#footer .contactbox .inbox1 .link .tellink a{ color: #fff; text-decoration: none; font-weight: bold; }
#footer .contactbox .inbox1 .link .contact a{ width: 300px; }
#footer .contactbox._1{ width: 100%; border-radius: 0; margin-bottom: 150px; }
#footer .contactbox._1 .inbox1{ background-color: transparent; min-height: auto; padding: 0; }
#footer .contactbox._1 .bg{ display: none; }
#footer .contactbox._1 .inbox1 .copy,
#footer .contactbox._1 .inbox1 .link .tellink,
#footer .contactbox._1 .inbox1 .link .tellink a{ color: inherit; }
#footer .contactbox._1 .inbox1 .link a.maillinkbtn { background: #3c2717; border: 1px solid #3c2717; color: #fff; }
#footer .contactbox._1 .inbox1 .link a.maillinkbtn svg .fillwhite{ fill:#fff; }
#footer .contactbox._1 .inbox1 .link a.maillinkbtn:hover{ background-color: #d6c3a9; border: 1px solid #d6c3a9; color: #fff; }
#footer .contactbox._1 .inbox1 .link a.maillinkbtn:hover svg .fillwhite{ fill:#fff; }

@media screen and (max-width: 767px) {
	#footer .contactbox{ border-radius: 0; }
	#footer .contactbox .inbox1 .link{ display: block; }
	#footer .contactbox .inbox1 .copy{ font-size: 1.3em; margin-bottom: 20px; }
	#footer .contactbox .inbox1 .link .tellink{ line-height: 2; margin-right: 0; text-align: center; font-size: 1.2em; }
	#footer .contactbox .inbox1 .link .contact{ margin-top: 30px; }
	#footer .contactbox._1{ margin-bottom: 100px; }
	#footer .contactbox .inbox1 .link .contact{ max-width: 300px; width: 100%; margin-left: auto; margin-right: auto; }
	#footer .contactbox .inbox1 .link .contact a{ width: 100%; }
}


/* #pagetop */
#pagetop { position: fixed; bottom: 40px; right: 40px; }
#pagetop>a { display: inline-block; text-decoration: none; position: relative; text-align: center; }
#pagetop>a:before { content:""; background: url(../img/common/pagetop.svg) no-repeat; display: block; -webkit-background-size: contain; background-size: contain; width: 24px; height: 14px; margin-left: auto; margin-right: auto; margin-bottom: 5px; }
#pagetop>a>span{ font-size: 1.25em; color: #d6c3a9; font-style: italic; display: block; line-height: 1; padding-bottom: 5px; padding-right: 5px; }
#pagetop>a>span:after { content:""; background: #d6c3a9; position: absolute; bottom: 2px; left: 0; height: 1px; transition: .5s all; width: 0; }
#pagetop>a:hover { opacity: 1; }
#pagetop>a:hover>span:after { width: 100%; }
@media screen and (max-width: 767px) { 
}


/* footerinfo */
#footer .footerinfo { font-size: 0.94em; }
#footer .footerinfo .incnt { position: relative; padding-right: 540px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 1380px; text-align: left; }
#footer .footerinfo .incnt .logo { width: 236px; height: 113px; position: absolute; bottom: 85px; right: 0; }
#footer .footerinfo .incnt .address {  }
#footer .footerinfo .incnt .comid { margin-top: 30px; margin-left: -20px; text-align: left; }
#footer .footerinfo .incnt .comid>li{ display: inline-block; margin-left: 20px; }
#footer .footerinfo .incnt .cr { margin-top: 40px; }
@media screen and (max-width: 1200px) {
	#footer .footerinfo .incnt { padding-right: 300px; }
}
@media screen and (max-width: 1040px) {
	#footer .footerinfo { margin-bottom: 40px; }
	#footer .footerinfo .incnt { display: block; padding-right: 0; }
	#footer .footerinfo .incnt .logo{ position: static; margin-bottom: 30px; }
	#footer .footerinfo .incnt .comid{ margin-top: 15px; }
}
@media screen and (max-width: 479px) { 
	#footer .footerinfo .incnt .comid{ font-size: 0.88em; }
}