@charset "utf-8";

/* Header
-------------------------*/
#header{ display:flex; align-items:center; width:100%; height:80px; background:#F2F2F2; position:fixed; top:0; left:0; box-sizing:border-box; z-index:10; }
#header #h-wrap{ display:flex; justify-content:space-between; align-items:center; width:100%; max-width:1000px; margin:auto; }
#header #logo a{ display:flex; align-items:center; }
#header #logo img{ height:auto; width:60%; max-width:500px; max-height:60px; overflow:hidden; transition-property:opacity; transition-duration:0.25s; transition-timing-function:ease; }
#menu_btn .lbl{ font-size:.875rem; position:absolute; height:35px; top:-32px; bottom:0; right:0; left:0; text-align:center; margin:auto; }
#menu_btn.active .lbl{ color:#FFF; }
#nav li a{ font-family:"Arimo",sans-serif; display:block; color:#46464F; position:relative; padding:0 20px; }
#nav li.hide a{ color:transparent; }
#nav .menu-item-has-children > a:after,
#nav .menu-item-has-children > a:before{ display:block; content:""; position:absolute; top:0; bottom:0; right:20px; margin:auto; width:10px; height:1px; background:#46464F; transition:.2s; }
#nav .menu-item-has-children > a:after{ transform:rotate(90deg); -webkit-transform:rotate(90deg); }
#nav .menu-item-has-children > a.open:before{ transform:rotate(0deg); -webkit-transform:rotate(0deg); }
#nav .menu-item-has-children > a.open:after{ background:transparent; }
#nav .menu-item-has-children .sub-menu{ display:none; }
#nav ul li a .menu-desc{ display:none; font-family:"Zen Old Mincho",serif; }
#nav ul li a strong{ font-family:"Arimo", sans-serif; }
@media only screen and (max-width:767px){
	#header{ height:60px; padding:0 20px; }
	.overlay{ width:0; height:0; position:fixed; z-index:11; top:0; left:0; opacity:0; transition:opacity .5s; background:rgba(255,255,255,.7); }
	.overlay.open{ width:100%; height:100%; opacity:1; }
	#main{ transition:all .5s; min-height:100vh; }
	#main.open{ position:fixed; width:100%; }
	#menu_btn{ top:25px; right:20px; transition:.3s; cursor:pointer; position:absolute; z-index:9999; width:40px; height:40px; display:flex; align-items:center; justify-content:center;}
	.menu-trigger{ width:40px; height:40px; position:relative; }
	.menu-trigger span{ display:inline-block; box-sizing:border-box; position:absolute; left:0; width:100%; height:1px; background-color:#46464F; transition:all .5s; }
	.menu-trigger span:nth-of-type(1){ top:14px; }
	.menu-trigger span:nth-of-type(2){ top:20px; }
	.menu-trigger span:nth-of-type(3){ top:28px; }
	#menu_btn.active .menu-trigger span{ background-color:#FFF; }
	#menu_btn.active .menu-trigger span:nth-of-type(1){ transform:translateY(7px) rotate(-25deg);}
	#menu_btn.active .menu-trigger span:nth-of-type(2){ opacity:0; }
	#menu_btn.active .menu-trigger span:nth-of-type(3){ transform:translateY(-7px) rotate(25deg); }
	#nav{ width:100%; height:100%; overflow:auto; padding:112px 20px; background-color:rgba(0,0,0,0.6); position:fixed; top:0; right:-100%; z-index:12; transform:translate(280px); transition:all .5s;}
	#nav .nav{ width:60%; margin:auto; }
	#nav.open{ transform:translateZ(0); right:0; }
	#nav li a{ position:relative; padding:10px 20px; color:#fff; box-sizing:border-box; color:#FFF; text-decoration:none; padding:5px 0; position:relative; font-size:clamp(1.375rem, 1.2884615385rem + .3846153846vw, 1.75rem); font-family:"Arimo", sans-serif; font-weight:bold; }
	#nav .menu-item-has-children .sub-menu{ padding:10px 20px; }
	#nav .menu-item-has-children > a.open:first-of-type{ color:#dad4ec; }
	#nav .menu-item-has-children .sub-menu li{ padding:0; margin-bottom:20px; }
	#nav .menu-item-has-children .sub-menu li:last-child{ margin-bottom:0; }
	#nav .menu-item-has-children .sub-menu li a{ padding:0; }
}
@media only screen and (min-width:768px){
	header{ padding:0 20px; }
	header #logo{ width:200px; }
	#menu_btn,
	.overlay{ display:none; }
	#menu_btn .lbl { display:none; }
	#nav ul{ display:flex; flex-wrap:wrap; }
	#nav li{ position:relative; display:flex; }
	#nav li::after{ content:''; position:absolute; top:0; bottom:0; right:0; margin:auto; width:1px; height:20px; background:#46464F; }
	#nav li:last-child::after,
	#nav li.pc-last::after{ display:none; }
	#nav li.sp-link{ display:none; }
	#nav ul li a{ display:inline-block; position:relative; width:100px; height:20px; perspective:500px; text-align:center; text-decoration:none; padding:0; }
	#nav ul li a strong,
	#nav ul li a .menu-desc{ position:absolute; top:0; left:0; width:100%; height:100%; backface-visibility:hidden; transition:transform 0.6s ease; display:flex; align-items:center; justify-content:center; }
	#nav ul li a strong{ transform:rotateX(0deg); }
	#nav ul li a .menu-desc{ transform:rotateX(-90deg); opacity:0; }
	#nav ul li a:hover strong{ transform:rotateX(90deg); opacity:0; }
	#nav ul li a:hover .menu-desc{ transform:rotateX(0deg); opacity:1; }
	#nav .menu-item-has-children > a{ padding-right:16px; padding:0 40px 0 20px; }
	#nav .menu-item-has-children > a.open:first-of-type,
	#nav .current-menu-item a{ color:#46464F; }
	#nav .current-menu-item li a{ color:#FFF; }
	#nav li ul.sub-menu{ flex-direction:column; background:#FFF; position:absolute; width:200px; left:50%; top:54px; -webkit-transform:translateX(-50%); transform:translateX(-50%); }
	#nav li ul.sub-menu li{ margin:0; width:100%; }
	#nav li ul.sub-menu li a{ line-height:1.6em; color:#83759a; padding:15px 20px; text-align:center; }
	#nav li ul.sub-menu li a:hover{ color:#dad4ec; }
}
@media only screen and (max-width:767px){
	#header #logo a{ margin:20px 0 0; }
	.gly-list li a span{ display:none; }
}

/* Footer
-------------------------*/
.f-menu{ display:none; text-align:left; height:auto; line-height:100%; padding:40px 20px 25px; }
.f-menu ul{ line-height:1; margin:auto; display:flex; flex-wrap:wrap; }
.f-menu li{ font-size:14px; display:block; float:left; width:50%; margin:0 0 12px 0; line-height:1.7; }
.f-menu li a{ display:block; margin:0; padding:0; border-right:none; color:#46464F; text-align:center; }
.f-menu li:last-of-type a{ border:none; }
.f-menu li a strong,
.f-menu li a .menu-desc{ position:absolute; top:0; left:0; width:100%; height:100%; backface-visibility:hidden; transition:transform 0.6s ease; display:flex; align-items:center; justify-content:center; }
.f-menu li a strong{ transform:rotateX(0deg); font-family:"Arimo",sans-serif; }
.f-menu li a .menu-desc{ transform:rotateX(-90deg); opacity:0; }
.f-menu li a:hover strong{ transform:rotateX(90deg);  opacity:0; }
.f-menu li a:hover .menu-desc{ transform:rotateX(0deg); opacity:1; }
#copyright{ background:#FFF; text-align:center; font-size:12px; line-height:30px; font-family:"Arimo",sans-serif; }
@media only screen and (min-width:768px){
	.f-menu{ display:block; text-align:center; padding:10px 0; }
	.f-menu ul{ font-size:0; line-height:1; max-width:1200px; margin:auto; justify-content:center; }
	.f-menu li{ position:relative; font-size:14px; display:inline-block; margin:0; width:auto; }
	.f-menu li::after{ content:''; position:absolute; top:0; bottom:0; right:0; margin:auto; width:1px; height:20px; background:#46464F; }
	.f-menu li:last-child::after{ display:none; }
	.f-menu li a{ display:inline-block; position:relative; width:100px; height:20px; perspective:500px; text-align:center; }
	.f-menu li:last-of-type a{ border:none; }
}