@charset "UTF-8";

/*reset*/
/*-------------------------------------------------------*/
article,aside,figure,figcaption,footer,header,nav,section,main{ display: block; }
small{ font-size: inherit; line-height: inherit; }
body,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,div,figure,figcaption{ margin: 0; padding: 0; font-size: 100%; line-height: 1.5; }
ul,li,ol{ list-style: none; margin: 0; padding: 0; }
button{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; }
a img{ border: none; }
a{ transition: all 0.25s linear; color: #3388cb; }
a:hover{ opacity: 0.7; text-decoration: none; }
img{ vertical-align: bottom; max-width: 100%; height: auto; }
html,body,p,div{
	color: #888888;
	font-family: 'YakuHanJP', Lato, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
	font-size: 14px; line-height: 2; font-weight: 500;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
.mincho{ font-family: 'YakuHanMP', 'Lora', "游明朝", YuMincho, serif; }
.sp-view { display: none;}

@media screen and (max-width: 768px) {
	.sp-view { display: inline;}
}

/*header*/
/*-------------------------------------------------------*/

#header { width: 100%; height: 100px; margin: auto; position: fixed; background-color: #ffffff; z-index: 100}
#header.fixed .logo-wrap { height: 100px;}
#header .logo-wrap { position: fixed; left: 0; top: 0; width: 190px; height: 190px; background-color: #a2392e; z-index: 100; transition: all 0.15s; }
#header .logo-wrap .logo{ text-align: center; margin-top: 40px; }
#header.fixed .logo-wrap .logo{ text-align: center; margin-top: 15px; transition: all 0.15s; }
#header .logo-wrap .logo img { transition: all 0.15s;}
#header.fixed .logo-wrap .logo img { width: 40px;}
#header .logo-wrap .name{ font-size: 14px; line-height: 1.2; font-weight: bold; text-align: center; color: #FFF; margin-top: 15px; letter-spacing: -0.05em;}
#header.fixed  .logo-wrap .name{  margin-top: 10px; }
#header .menu{ display: none; }
#header .global-navi { display: -ms-flex; display: flex; justify-content: end; }
#header .global-navi .navi{ margin-right: 3em; }
#header .global-navi .navi a{ display: block; line-height: 100px; color: #1A1A1A; text-decoration: none; position: relative; }
#header .global-navi .navi a:hover{ color: #a2392e; }

@media screen and (max-width: 768px) {
	#header { height: 70px; margin: auto; position: fixed; background-color: #ffffff; z-index: 100}

	#header .logo-wrap { position: fixed; left: 0; top: 0; width: 160px; height: 70px !important; z-index: 100;  }
	#header .logo-wrap .logo{ margin-top: 12px !important;}
	#header .logo-wrap .logo img { width: 30px !important;}
	#header .logo-wrap .name{ font-size: 12px; margin-top: 5px; }
	#header.fixed  .logo-wrap .name{  margin-top: 5px; }

	#header .global-navi { display: -ms-flex; display: flex; justify-content:flex-start; padding-top: 120px;}
	#header .global-navi .navi-top { display: block; }
	#header .global-navi .navi{ width: 90%; margin: auto; border-top: solid 1px #EAEAEA; }
	#header .global-navi .navi a{ display: block; line-height: 1 ;padding: 30px 0; color: #1A1A1A; text-decoration: none; position: relative; padding-left: 20px; box-sizing: border-box; }
	#header .global-navi .navi a:hover{ color: #a2392e; }
	#header .global-navi .navi-contact a { display: block; line-height: 1 ;padding: 30px 0; color: #FFF; background: #a2392e; text-decoration: none; padding-left: 0px; box-sizing: border-box; width: 90%; margin: 20px auto 0; text-align: center;}
	#header .global-navi .navi-contact a:hover{ color: #FFFFFF; }



	/*ハンバーガーメニュー*/
	#header .global-navi{ display: none; background: rgba(255,255,255,0.95); height: 100%; position: fixed; width: 100%; z-index: 50;}
	.pagenavi-wrap{ align-items:center; display: flex; height: 100%; justify-content: center; position: absolute; width: 100%;}
	.pagenavi-wrap .title { width: 100%; margin: auto; text-align: center; padding-bottom: 30px; }
	.pagenavi-wrap .title img { width: 60%; height: auto }
	.pagenavi-wrap .navi-wrap { width: 480px; margin: 0px auto; display: -ms-block; display: block;  }
	.pagenavi-wrap .navi-wrap .instagram-icon { position: static; right: auto; bottom: auto; width: 9.5%;  padding: 20px 0px 20px 15px; }

	.menu{ height: 20px; position: fixed; right: 20px; top: 20px; width: 30px; z-index: 200;}
	.menu__line{ background: #222; display: block; height: 2px; position: absolute; transition:transform .3s; width: 100%;}
	.menu__line--center{top: 9px;}
	.menu__line--bottom{ bottom: 0;}
	.menu__line--top.active{ top: 8px; transform: rotate(45deg);}
	.menu__line--center.active{ transform:scaleX(0);}
	.menu__line--bottom.active{ bottom: 10px; transform: rotate(135deg);}

}



/*main*/
/*-------------------------------------------------------*/
#main { width: 1100px; margin: 0 auto; padding:100px 0 120px 0;}

@media screen and (max-width: 768px) {
	#main { width: 100%; margin: 0 auto; padding:70px 0 80px 0;}

}

/*footer*/
/*-------------------------------------------------------*/
#footer { }
#footer .contact { background-image: url(../image/common/bg_footer.jpg); background-size: cover; padding: 120px 0; }
#footer .contact .contact-en-title { font-size: 30px; line-height: 1; font-weight: normal; color: #FFF; letter-spacing: 0.04em; text-align: center;}
#footer .contact .contact-copy { font-size: 14px; line-height: 1; color: #FFF; margin-top: 25px; text-align: center;}
#footer .contact .contact-btn { width: 320px; margin: 25px auto 0 auto; background: #FFF; display: block; padding: 25px 0; font-size: 16px; line-height: 1; color: #473B12; text-align: center; text-decoration: none; }
#footer .at-home { background: #321F00; display: -ms-flex; display: flex; justify-content: center; padding: 25px 0;}
#footer .at-home .at-home-title { background: #5AAE07; color: #FFF; font-size: 14px; line-height: 1; padding: 14px 0; width: 200px; text-align: center;}
#footer .at-home .at-home-btn { color: #FFF; font-size: 14px; line-height: 1; padding: 14px 0; width: 170px; border: 1px solid #726550; box-sizing: border-box; text-align: center; text-decoration: none; margin-left: 1px; transition: all 0.15s; }
#footer .at-home .at-home-btn:hover { background-color: #726550; opacity: 1;} 
#footer .shop { background: #FFF ; padding: 30px 0; display: -ms-flex; display: flex; align-items: center;}
#footer .shop .logo { width: 190px; text-align: right; }
#footer .shop .address { font-size: 12px; line-height: 1.7; color: #666; padding-left: 30px;}
#footer .end { background: #EAEAEA; padding: 15px 45px; display: -ms-flex; display: flex; justify-content: space-between; }
#footer .end .copy {font-size: 10px; line-height: 1.7; color: #666; }
#footer .end .copyright {font-size: 10px; line-height: 1.7; color: #666; text-align: right; }

@media screen and (max-width: 768px) {
	#footer .contact { background-image: url(../image/common/bg_footer.jpg); background-size: cover; padding: 70px 0; }
	#footer .contact .contact-en-title { font-size: 22px; line-height: 1; font-weight: normal; color: #FFF; letter-spacing: 0.04em; text-align: center;}

	#footer .at-home { display: -ms-flex; display: flex; justify-content: center; flex-wrap: wrap; padding: 25px 0;}
	#footer .at-home .at-home-title { color: #FFF; font-size: 14px; line-height: 1; padding: 14px 0; width: 90%; text-align: center;}
	#footer .at-home .at-home-btn { color: #FFF; font-size: 14px; line-height: 1; padding: 14px 0; width: 90%; border: 1px solid #57794B; box-sizing: border-box; text-align: center; text-decoration: none; margin-left: 0px; margin-top: 2px; }

	#footer .shop { background: #FFF ; padding: 30px 0; display: -ms-flex; display: flex; align-items: center; flex-wrap: wrap;}
	#footer .shop .logo { width: 100%; text-align: center; }
	#footer .shop .address { width: 90%; font-size: 12px; line-height: 1.7; color: #666; padding-left: 0px; margin: 15px auto 0; text-align: center;}

	#footer .end { background: #EAEAEA; padding: 5%; display: -ms-flex; display: flex; align-items: center; flex-wrap: wrap; }
	#footer .end .copy { width: 90%; margin: 0 auto; font-size: 10px; line-height: 1.7; color: #666; text-align: center; }
	#footer .end .copyright { width: 90%; margin: 5px auto 0; font-size: 10px; line-height: 1.7; color: #666; text-align: center; }

}



/*page contentes*/
/*-------------------------------------------------------*/
.page-image { width: auto; margin-left: calc(50% - 550px); height: 380px; background-size: cover; border-top: solid 100px #FFF; background-position: center center;}

@media screen and (max-width: 1100px) {
	.page-image { margin-left:0; }
}
@media screen and (max-width: 768px) {
	.page-image { height: 240px; background-size: cover; border-top: solid 70px #FFF;}
}
#main .page-contentes { display: -ms-flex; display: flex; justify-content: space-between; flex-wrap: wrap; }
#main .page-contentes .page-title-wrap { width: 35%;}
#main .page-contentes .page-title-wrap .page-en-title { font-size: 38px; line-height: 1; color: #322000; margin-left: 78px; position: relative; font-weight: normal; letter-spacing: 0.1em; }
#main .page-contentes .page-title-wrap .page-jp-title { font-size: 14px; line-height: 1; color: #322000; margin-left: 78px; margin-top: 12px; }
#main .page-contentes .page-title-wrap .page-en-title::after { content: ""; width: 50px; height: 1px; position: absolute; left: -78px; top: 18px; background: #705222; }
#main .page-contentes .page-contents-wrap { width: 62%;}

@media screen and (max-width: 768px) {
	#main .page-contentes {width: 90%; margin: auto; display: -ms-flex; display: flex; justify-content: space-between; flex-wrap: wrap; }
	#main .page-contentes .page-title-wrap { width: 100%;}
	#main .page-contentes .page-title-wrap .page-en-title { font-size: 36px; line-height: 1; margin-left: 78px; position: relative; font-weight: normal; letter-spacing: 0.1em; }
	#main .page-contentes .page-title-wrap .page-jp-title { font-size: 14px; line-height: 1; margin-left: 78px; margin-top: 12px; }
	#main .page-contentes .page-title-wrap .page-en-title::after { content: ""; width: 50px; height: 1px; position: absolute; left: -78px; top: 18px; }
	#main .page-contentes .page-contents-wrap { width: 100%; margin-top: 45px;}
}