@charset "utf-8";

/*
 * webfint (Cormorant Garamond)
 **************************/
.cormorant-font, .menu h3, #footer .contact a, #footer .copy { font-family:'Cormorant Garamond', serif; font-weight:bold !important;}
.cFix:after { content:'.'; display:block; overflow:hidden; visibility:hidden; clear:both; height:0; opacity:0;}

/* http://meyerweb.com/eric/tools/css/reset/ v2.0_custom | 20160518 License: none (public domain) */
html { overflow-y:scroll; overflow-x:hidden; font-size:62.5%; margin:0; padding:0; border:0; vertical-align:top;}
body { line-height:1; color:#1c1c1c; font-family:'游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;}
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, 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%; vertical-align:top;}
* { box-sizing:border-box; font-feature-settings:'palt'; letter-spacing:0;}

/* 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;}
body { background-color:#fff;}

/*
 * root
 **************************/
:root {
	--black: #111f22;
	--gold: #eaba70;
	--gold-gradient: linear-gradient(90deg, #f3d7ad, #eaba70);
}

/*
 * 基本
 **************************/
a { text-decoration:none; -webkit-transition:all .3s; transition:all .3s;}
a:link { color:#815d3f; text-decoration:underline;}
a:visited { color:#815d3f; opacity:.6;}
a:hover { color:#815d3f; text-decoration:none;}
a:active { color:#815d3f;}
a img { -webkit-transition:opacity .3s; transition:opacity .3s;}
a.hover { opacity:.6; text-decoration:none;}
a.hover img { opacity:.5;}
img { display:block; width:100%;}
.box-shadow { -webkit-transition:all .3s; transition:all .3s; box-shadow:0 0 40px rgba(0, 0, 0, .1);}
.mincho { font-family:'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;}

/*
 * main
 **************************/
#wrap { overflow:hidden; width:100%; position:relative; min-height:calc(100vh - 200px); padding-top:90px;}
.direPath { height:40px; width:1200px; margin:0 auto;}
.direPath ul { display:table; margin:0 10px;}
.direPath ul li { display:table-cell; font-size:1.2rem; line-height:40px; color:#6f7d96;}
.direPath ul li a { color:#6f7d96;}
.direPath ul li:after { content:'>'; margin:0 5px;}
.direPath ul li:last-child:after { display:none;}

/*
 * header
 **************************/
#header { position:fixed; -webkit-transition:all .3s; transition:all .3s; width:100%; height:90px; background:var(--black); z-index:100;}
#header .header-inner-wrap { margin:0 auto;}
#header .header-inner-wrap:after { content:''; display:block; width:10px; height:90px; position:absolute; right:-10px; top:0; background:#fff;}
#header .header-inner-wrap .header-inner { z-index:10;}
#header .header-inner-wrap .header-inner #logo { width:165px; display:block; margin-top:32px; margin-left:32px;}
#header .header-inner-wrap .header-inner #logo a { display:block;}
#header .header-inner-wrap a.menuBtn { display:block; position:absolute; right:0; top:0; width:90px; height:90px; background:var(--black); text-indent:-9999px;}
#header .header-inner-wrap a.menuBtn:before { content:''; display:block; width:35px; height:2.5px; background:#fff; position:absolute; left:27.5px; top:49%; -webkit-transition:all .3s; transition:all .3s;}
#header .header-inner-wrap a.menuBtn:after { content:''; display:block; width:35px; height:2.5px; background:#fff; position:absolute; left:27.5px; top:49%; -webkit-transition:all .3s; transition:all .3s;}
#header .header-inner-wrap a.menuBtn span { display:block; width:35px; height:2.5px; background:#fff; position:absolute; left:27.5px; top:49%; -webkit-transition:all .3s; transition:all .3s;}
#header .header-inner-wrap a.menuBtn:before { margin-top:-12px;}
#header .header-inner-wrap a.menuBtn:after { margin-top:12px;}
.menu { position:absolute; overflow:hidden; top:0; right:-100vw; width:100%; height:100vh; background:rgba(0, 0, 0, .7); padding:0 100px; -webkit-transition:right 1s; transition:right 1s; -webkit-transition:all .5s; transition:all .5s;}
.menu .menu-inner { text-align:center; color:#fff; position:absolute; top:50%; left:50%; width:80vw; -webkit-transform:translateY(-50%) translateX(-50%); -ms-transform:translateY(-50%) translateX(-50%); transform:translateY(-50%) translateX(-50%);}
.menu h3 { font-size:2.6rem; line-height:1.8em; margin-bottom:10px; margin-bottom:40px;}
.menu .menuList li { max-width:80vw; margin:0 auto 10px;}
.menu .menuList li a { display:block; font-size:1.6rem; padding:5px 0; letter-spacing:.2em; color:#fff; line-height:1.4em; font-weight:normal; text-decoration:none; border-radius:10px;}
.menu .menuList li a.hover { background:rgba(0, 0, 0, .7);}
body.menuOn #header .header-inner-wrap a.menuBtn span { opacity:0;}
body.menuOn #header .header-inner-wrap a.menuBtn:before { -webkit-transform:translateY(12px) rotate(-45deg); -ms-transform:translateY(12px) rotate(-45deg); transform:translateY(12px) rotate(-45deg);}
body.menuOn #header .header-inner-wrap a.menuBtn:after { -webkit-transform:translateY(-12px) rotate(45deg); -ms-transform:translateY(-12px) rotate(45deg); transform:translateY(-12px) rotate(45deg);}
body.menuOn .menu { right:0;}
@-webkit-keyframes btn1 { 0% { -webkit-transform:rotateY(0deg); transform:rotateY(0deg); background-color:#1c1c1c;}
	50% { -webkit-transform:rotateY(-90deg); transform:rotateY(-90deg); background-color:#1c1c1c;}
	50.1% { -webkit-transform:rotateY(90deg); transform:rotateY(90deg); background-color:#73c0f1;}
	100% { -webkit-transform:rotateY(0deg); transform:rotateY(0deg); background-color:#73c0f1;}
}
@keyframes btn1 { 0% { -webkit-transform:rotateY(0deg); transform:rotateY(0deg); background-color:#1c1c1c;}
	50% { -webkit-transform:rotateY(-90deg); transform:rotateY(-90deg); background-color:#1c1c1c;}
	50.1% { -webkit-transform:rotateY(90deg); transform:rotateY(90deg); background-color:#73c0f1;}
	100% { -webkit-transform:rotateY(0deg); transform:rotateY(0deg); background-color:#73c0f1;}
}

/*
 * pageTop
 **************************/

/*
 * footer
 **************************/
#footer { z-index:5; position:relative; background:#ccc; background:#fff; padding-bottom:40px;}
#footer:after { content:''; display:block; width:100%; height:200px; position:fixed; top:100%; left:0; background:#fff;}
#footer .contact { background:var(--black); padding:25px 20px;}
#footer .contact a { display:block; letter-spacing:.3em; text-align:center; border:solid 1px #eaba70; line-height:140px; text-decoration:none; background:var(--black); color:#eaba70; font-size:2.8rem; position:relative;}
#footer .contact a:before { content:''; display:block; width:98%; height:1px; background-image:var(--gold-gradient); position:absolute; left:1%; top:-5px;}
#footer .contact a:after { content:''; display:block; width:98%; height:1px; background-image:var(--gold-gradient); position:absolute; left:1%; bottom:-5px;}
#footer .contact a.hover { background:#fff; color:#815d3f; opacity:1;}
#footer .pageTop { display:table; width:50px; height:34px; margin:45px auto 25px;}
#footer .copy { font-size:1.1rem; text-align:center; color:#706e67; font-weight:600;}

@media screen and (max-width: 750px){
	body { -webkit-text-size-adjust:100%;}
	#wrap { padding-top:50px;}

	/*
 * header
 **************************/
	#header { width:100%; height:50px;}
	#header .header-inner-wrap .header-inner #logo { width:100px; margin:20px auto;}
	#header .header-inner-wrap a.menuBtn { width:50px; height:50px;}
	#header .header-inner-wrap a.menuBtn:before { content:''; display:block; width:25px; height:2px; left:12.5px; top:49%; -webkit-transition:all .3s; transition:all .3s;}
	#header .header-inner-wrap a.menuBtn:after { content:''; display:block; width:25px; height:2px; left:12.5px; top:49%; -webkit-transition:all .3s; transition:all .3s;}
	#header .header-inner-wrap a.menuBtn span { width:25px; height:2px; left:12.5px; top:49%; -webkit-transition:all .3s; transition:all .3s;}
	#header .header-inner-wrap a.menuBtn:before { margin-top:-8px;}
	#header .header-inner-wrap a.menuBtn:after { margin-top:8px;}
	.menu h3 { font-size:2.2rem; margin-bottom:20px;}
	.menu .menuList li { margin:0 auto 3px;}
	.menu .menuList li a { display:block; font-size:1.8rem; line-height:1.2em;}
	body.menuOn #header .header-inner-wrap a.menuBtn span { opacity:0;}
	body.menuOn #header .header-inner-wrap a.menuBtn:before { -webkit-transform:translateY(8px) rotate(-45deg); -ms-transform:translateY(8px) rotate(-45deg); transform:translateY(8px) rotate(-45deg);}
	body.menuOn #header .header-inner-wrap a.menuBtn:after { -webkit-transform:translateY(-8px) rotate(45deg); -ms-transform:translateY(-8px) rotate(45deg); transform:translateY(-8px) rotate(45deg);}
	body.menuOn .menu { right:0;}

	/*
 * pageTop
 **************************/

	/*
 * footer
 **************************/
	#footer { padding-bottom:20px;}
	#footer .contact { padding:15px 10px;}
	#footer .contact a { line-height:70px; font-size:2rem;}
	#footer .pageTop { margin:25px auto 15px;}
	#footer .copy { font-size:1.2rem;}
}