@charset "UTF-8";
/* 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,hr{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul,li{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;}
*:focus {outline: none !important; }

body{margin: 0; padding: 0; color: #000;  font-size:15px; line-height:100%; text-align:center;font-family: 'Noto Sans Japanese', sans-serif; }

/*汎用設定*/
.fontLato{font-family: 'Lato', sans-serif;}
a{text-decoration:none; color: #000; transition: 0.6s;}
a:hover{color: #00572f;}
img{width:100%;}
a img{opacity:1.0; transition: 0.6s ease-in-out;}
a:hover img{opacity:0.6;}
a.telNo{ cursor:default;}
a.telNo:hover img{opacity:1;}
hr{border-bottom: #ccc 1px dashed; margin:0 auto 60px;}
.contentW1200{ max-width: 1200px; margin: 0 auto; overflow: hidden;}
.contentW1080{ max-width: 1080px; margin: 0 auto; overflow: hidden;}
.contentW1000{ max-width: 1000px; margin: 0 auto; overflow: hidden;}
.contentW980{ max-width: 980px; margin: 0 auto; overflow: hidden;}

.bgF2{background: #f2f2f2; overflow: hidden; padding: 50px 0;}
.colPk{ color: #c4162f;}
.col96{color: #969696;}
.pcOnly{ display:block;}
b{font-weight: 700;}
.bold{font-weight: 700;}
.smpOnly{ display:none;}
hr{border-bottom: #ccc 1px solid; margin:40px auto 40px; max-width: 1200px;}
@media only screen and (max-width: 768px) {
.pcOnly{ display:none;}
.smpOnly{ display:block;}
}

span.br540{ display:inline;}
span.inline540{ display:block;}
@media only screen and (max-width: 540px) {
span.br540{ display:block;}
span.inline540{ display:inline;}
}

/* 個別設定の皆さん */
/*indexPage------------------------------------------------------------*/
#mainV{position:relative; margin:120px auto 0; max-width:1200px}
#mainV .mainT{ width: 80%; margin: 20px 20% 0 0;}
#mainV #scd{position: absolute; bottom: 0; right: 0px; width: 14px; height: 130px;}
@media screen and (max-width: 904px) {
#mainV{position:relative; margin:80px auto 0;}
#mainV .mainT{ width: calc(100% - 40px); margin: 20px 20px 0 20px;}
#mainV #scd{ display: none;}
}

/*newsBox*/
.newsBox{margin: 70px auto 40px; padding: 40px 0 20px ; max-width:1200px; background: #f2f2f2; border-radius: 20px; }
.newsBox ul{ overflow: hidden; margin: 0 auto; max-width: 760px;}
.newsBox ul li.newsT{ width: 30%; float: left; max-width: 358px; margin: 0 auto;}
.newsBox ul li.newsMain{width: 70%; float: left; text-align: center;}
.newsBox ul li.newsMain div.iframe{ border: none; padding: 3px 0px 0 20px; height: 60px; overflow: auto;  max-width: 2000px;}
.newsBox ul li.newsMain div.iframe p{ margin: 8px 0; line-height: 140%; font-size: 16px; text-align: left;}
.newsBox ul li.newsMain div.iframe p span{ display: inline-block; margin: 0 10px 0 0;}
.newsBox ul li.newsMain div.iframe p a{ border-bottom: transparent 1px dashed;}
.newsBox ul li.newsMain div.iframe p a:hover{ border-bottom: transparent 1px dashed;}
@media screen and (max-width: 768px) {
.newsBox{margin: 20px 10px;}
.newsBox ul li.newsT{ width: 60%; float: none; margin: 0 auto;}
.newsBox ul li.newsMain{width: calc(100% - 20px); float: none; margin:  10px;}
.newsBox ul li.newsMain div.iframe{ padding: 0 5px; height: 80px;}
.newsBox ul li.newsMain div.iframe p span{ display: block; margin: 0 ;}
}

h2.class4{font-size: 30px; line-height: 180%; margin: 100px 0 20px; color: #000;}
p.class4{font-size: 16px; line-height: 180%; }
span.boBot {border-bottom: #c4162f 4px solid;}

.class4Bg{margin: 0px 0 40px; overflow: hidden;}
ul.class4{ width: 100%; max-width: 880px; margin: 20px auto; overflow: hidden;}
ul.class4 li{ width: calc(25% - 60px); float: left; margin: 30px;}
span.batsu {font-size: 120%;}
@media only screen and (max-width: 768px) {
.class4Bg{margin: 40px 0; padding: 0px 0 0 0;}
h2.class4{font-size: 21px; line-height: 180%; margin: 40px 0 20px;}
p.class4{font-size: 14px; line-height: 160%; }
ul.class4{ width: calc(100% - 40px); margin:20px;}
ul.class4 li{ width: calc(50% - 40px); float: left; margin: 10px 20px;}
}

div.ico388{ max-width: 388px; margin: 0 auto 10px;}
@media only screen and (max-width: 768px) {
div.ico388{width: 80%;}
}

ul.list3{ max-width: 1020px; margin: 20px auto; overflow: hidden;}
ul.list3 li{ width: calc(33.333333% - 20px); margin: 0 10px; float: left;}
ul.list3 li.col2{ width: calc(66.666666% - 20px); margin: 0 10px; float: left;}
ul.list3 li p{padding: 10px 0;}
ul.list3 li a.boPi{display: block; border: #c4162f 2px solid; padding: 15px 0 12px; background: #fff; font-size: 18px; font-weight: 700; color: #c4162f; border-radius: 30px; transition: 0.6s all;}
ul.list3 li a.boPi:hover{ background: #c4162f; color: #fff;}
@media only screen and (max-width: 768px) {
ul.list3{ margin: 20px auto 0;}
ul.list3 li{ width:calc(100% - 40px); margin: 0 20px; float: none;}
ul.list3 li.col2{ width:calc(100% - 40px); margin: 10px 20px; float: none;}
ul.list3 li a.boPi{padding: 12px 0 10px; font-size: 14px;}
}

h3.lotoPk{ font-size: 36px; margin: 100px auto 60px ;}
h3.lotoPk span{display: inline-block; padding: 20px 16px 20px 0; margin: -24px 16px 0 0; border-right:#ccc 1px solid ; color: #c4162f; font-family: 'Lato', sans-serif; font-size: 42px; letter-spacing: 0.05em;}
@media screen and (max-width: 904px) {
h3.lotoPk{ font-size: 30px; margin: 80px auto 40px ; font-weight: 700;}
h3.lotoPk span{padding: 20px 16px 20px 0; margin: -24px 16px 0 0; font-size: 36px; }
}
@media only screen and (max-width: 768px) {
h3.lotoPk{ font-size: 21px; margin: 60px auto 20px ;}
h3.lotoPk span{padding:0; margin: 0 0 20px 0; font-size: 30px; display: block; border: none;}
}

ul.merit2{ max-width: 1080px; margin: 0 auto; overflow: hidden; display: flex; flex-wrap: wrap;}
ul.merit2 li{ width: calc(50% - 80px); margin: 0 40px 40px; float: left; text-align: left; padding: 20px 0 0 0;}
ul.merit2 li a{display: block; background: #fff; transition: 0.6s all; color: #000;}
ul.merit2 li a:hover{ background: #fff1f3;}
@media only screen and (max-width: 768px) {
ul.merit2 li{ width:calc(100% - 40px); margin: 20px 20px; float: none;}
}

div.timeBg{ max-width: 1200px; margin: 20px auto; overflow: hidden; background: #f2f2f2; padding: 0px 90px 20px;}
@media only screen and (max-width: 768px) {
div.timeBg{margin: 20px ;border-radius: 20px; padding: 0px 20px 20px;}
}
p.meritTime{ text-align: left; line-height: 160%; margin: 20px 0;}

div.ico420L{text-align: left; margin: 40px 0 10px;}
div.ico420L img{max-width: 420px;}
div.ico480C{ max-width: 480px; margin: 10px auto 10px;}
@media only screen and (max-width: 768px) {
div.ico420L{text-align: left; margin: 20px 0 10px;}
div.ico480C{margin: 10px auto 10px; width: 80%;}
}

div.chiMta{ max-width: 640px; border: #c4162f 2px solid; padding: 15px 0 12px; font-size: 24px; color: #c4162f; border-radius: 30px; margin: 20px auto 40px; overflow: hidden; font-weight: 700;}
@media only screen and (max-width: 768px) {
div.chiMta{padding: 10px 0 8px; font-size: 15px; margin: 10px 20px 0px;}
}
ul.item2{ max-width: 1080px; margin: 0 auto; overflow: hidden; display: flex; flex-wrap: wrap;}
ul.item2 li{ width: calc(50% - 80px); margin: 0 40px 40px; float: left; text-align: left; padding: 20px 0 0 0;}
ul.item2 li div.dormyBox{margin: 0 0 50px 0;}
ul.item2 li div.dormyBox p.expT{margin: 10px 0 20px 0; line-height: 160%; font-size: 14px;} 
ul.item2 li div.dormyBox div.priceBg{ position: relative;}
ul.item2 li div.dormyBox div.priceBg h3{font-size: 36px;}
ul.item2 li div.dormyBox div.priceBg h3 span{font-size: 16px; display: inline-block; margin: 6px 0 0 4px;}
ul.item2 li div.dormyBox div.priceBg div.btnDet{position: absolute; bottom: 0; right: 0; width: 142px; margin: 0; transition: 0.6s all;}
ul.item2 li div.dormyBox div.priceBg div.btnDet:hover{ bottom: 0; right: -10px;}
/*accLine*/
ul.item2 li div.dormyBox p.accLine{ overflow: hidden; text-align: left; margin: 20px 0 10px; font-size: 14px; line-height: 100%;}
ul.item2 li div.dormyBox p.accLine span {display: inline-block; padding: 0 1em 0 0;position: relative;}
ul.item2 li div.dormyBox p.accLine span:after {border-top:#ccc 1px solid; content: ""; position: absolute; top: 50%; width: 99em;}
ul.item2 li div.dormyBox p.accBody{ text-align: left; font-size: 10px; margin: 0 0 6px 0; line-height: 140%;}
ul.item2 li div.dormyBox p.accBody span{ display: inline-block; padding:0 5px 0 0 ; width: 90px;}
ul.item2 li div.dormyBox p.accBody img.icoT{width: 18px; margin: 0 3px 0 0;}
ul.item2 li div.dormyBox p.accBody img.icoTB{width: 30px; margin: 0 3px 0 0;}

@media only screen and (max-width: 768px) {
ul.item2{ margin: 0 auto 40px; }
ul.item2 li{ width:calc(100% - 40px); margin: 0 20px 0; float: none;}
ul.item2 li div.dormyBox{margin: 0 0 20px 0;}
ul.item2 li div.dormyBox p.accBody span{ display: block; padding:0 0 5px 0 ; width: 100%;}
ul.item2 li div.dormyBox p.accBody{  font-size: 12px;}
}


div.cov_t{margin: 0 auto 10px; max-width: 480px;}
h4.covH4{ font-weight: 700; line-height: 140%; margin: 0 auto 60px; }
div.covDiv{ max-width: 1000px; margin: 0 auto 50px;}
div.covDiv h3{ background: #f2f2f2; padding: 12px 0 10px; font-weight: 700; margin: 0 0  0; font-size: 18px;}
ul.cov2{overflow: hidden; margin: 0 40px;}
ul.cov2 li{ width:50%; margin: 10px 0;float: left;}
@media only screen and (max-width: 540px) {
h4.covH4{margin: 0 auto 30px; }
div.covDiv{ max-width: 1000px; margin: 0 auto 50px;}
div.covDiv h3{padding: 12px 0 10px; font-size: 16px;}
ul.cov2{overflow: hidden; margin: 0 0px;}
ul.cov2 li{ width: calc(100% - 40px); margin: 20px;float: none;}
}

ul.shien3{ overflow: hidden; margin: 0 auto; max-width: 1040px;}
ul.shien3 li{ float: left; width: calc(33.333333% - 30px); margin: 15px; }
@media only screen and (max-width: 540px) {
ul.shien3 li{ float: none; width: calc(100% - 40px); margin: 0 20px; }
ul.shien3 li div{padding:40px 40px 70px; margin: 20px 40px;}
}

.progLink{ max-width: 980px; margin: 0 auto; text-align: center;}
.progLink img{ max-width: 142px;}

div.fBtn{ max-width: 1000px; margin: 100px auto;}
@media only screen and (max-width: 768px) {
div.fBtn{background: none; margin: 60px auto; padding: 0 20px;}
}
.telBtn{ max-width: 230px; margin: 30px auto;}



/*popUp*/
.sidePopUp{position: fixed; bottom: 130px; margin-right: 30px; width: 350px; height: 350px; z-index: 9999;}
.sidePopUp .btnBg{position: relative;}
.sidePopUp .btnBg .popupClose001{position: absolute; width: 30px; height: 30px; right: -10px; top: -10px; cursor: pointer;}

.bottomPopUp{position: fixed; bottom: 0; right: 0; left: 0; width: 100%; z-index: 999; margin: 0 0 10px 0;}
.bottomPopUp ul{ width: 70%; margin: 0 auto 10px; overflow: hidden; max-width: 980px; position: relative;}
.bottomPopUp ul li{ width: calc(50% - 20px); padding: 0 10px; float: left;}
.bottomPopUp ul li a{ display: block; border-radius: 40px; background: #c4162f; text-align: center; color: #fff; padding:18px 0; font-size: 21px; font-weight: 700; letter-spacing: 0.1em; transition: 0.6s; border: #c4162f 2px  solid;}
.bottomPopUp ul li a:hover{ background: #fff; color:#c4162f;}
.displayNone001{display: none;}
@media screen and (max-width: 768px) {
.sidePopUp{position: fixed; bottom: 90px; margin-right: 15px; width: 180px; height: 180px; z-index: 9999;}
.bottomPopUp{ margin: 0 0 0px 0;}
.bottomPopUp ul{ width: calc(100% - 20px); margin: 0 10px 10px;}
.bottomPopUp ul li{ width: calc(50% - 10px); padding: 0 5px;}
.bottomPopUp ul li a{padding:10px 0; font-size: 14px;letter-spacing: 0;}
}

/* アンカーズレ対応 */

#dormy_001 , #dormy_002 , #dormy_003 , #dormy_004 , #dormy_005 , #dormy_006 , #dormy_007{ padding-top:40px; margin-top:-40px;}
#sup{ padding-top:10px; margin-top:-10px;}
#chi , #mat{ padding-top:40px; margin-top:-40px;}
@media screen and (max-width: 904px) {
#dormy_002 , #dormy_003 , #dormy_004 , #dormy_005 , #dormy_006 , #dormy_007{ padding-top:10px; margin-top:-10px;}
#dormy_001 { padding-top:10px; margin-top:-10px;}
#point , #sup{ padding-top:1px; margin-top:-1px;}
#chi , #mat{ padding-top:10px; margin-top:-10px;}
}
/*footer*/
#footer{margin:80px 0 0 0; }
#footer div{margin:40px auto 20px;}
#footer span{line-height:160%; margin:10px auto 0px; font-size: 12px; display: block;}
#footer p{line-height:160%; margin:10px auto 0px; font-size: 14px;}
#fTel {max-width: 270px; margin: 0 auto;}
#fTel a:hover{cursor: default;}
#fTel a:hover img{opacity: 1 !important;}
#copyR{text-align:center; padding:40px 0 80px; margin:0; font-size:14px;line-height: 160%;}
#copyR p{ color: #666;}
@media only screen and (max-width: 768px) {
#footer{margin:60px 0 0 0; font-size:14px; padding:0 40px;}
#footer div{margin:20px auto 20px;}
#copyR{ font-size:12px; padding:20px 0 60px; }
}

/*topcontrol*/
#topcontrol{width:14px; height:100px; z-index:9999; bottom: 20px !important; right: 20px !important;}
@media screen and (max-width: 904px) {
#topcontrol{width:14px; height:100px; z-index:9999; bottom: 300px !important; right: 10px !important;}
}

/* header */
#top-head {top: -100px; position: absolute; width: 100%; margin: 100px auto 0;  z-index: 9980; background: #fff;}
#top-head a,#top-head {text-decoration: none;}
#top-head .inner { position: relative; width:100%; margin:0 auto 0; max-width:1200px;}
#top-head .logo { float: left; width:100%; max-width:230px; display:block; z-index: 9990; position:absolute; top:42px; left:0px; font-weight: 700; }
#top-head .logo a{color: #000; transition: 0.6s all;}
#top-head .logo a:hover{color: #c4162f;}
#top-head .logo a h2{margin: 0; padding: 0; font-size: 36px; letter-spacing: 0.2em; text-align: left;}
#top-head .logo a span{margin: 10px 0 0 0; display: block; font-size: 12px; letter-spacing: 0.3em; color: #c4162f; transition: 0.6s all;}
#top-head .logo a:hover span{color: #000;}
#global-nav{position:relative; height:100px;}
#global-nav ul#naviBody { list-style: none; position: absolute; right:0px; bottom:10px; height:80px; display: flex; flex-wrap: wrap;}

#global-nav ul li { float: left; position: relative; white-space: nowrap;background:none; text-align:center; height:auto; transition:all 0.5s ease-in; margin: 10px 0px; padding: 15px 20px 0px 20px; background: #fff; border-left: #ccc 1px solid;}
#global-nav ul li.sLine{ padding: 22px 20px 0px 20px;}
#global-nav ul li:first-child{border: none;}
#global-nav ul li:hover{ background:#c4162f;}
#global-nav ul li a {color:#000;transition:all 0.5s ease-in; font-size: 15px; }
#global-nav ul li:hover a {color:#fff;}
#global-nav ul li a span{display: block; margin:0 0 3px 0;}
/*お問い合わせ*/
#global-nav ul li#inq{margin: 0 0 0 5px; padding:0; border: none;}
#global-nav ul li#inq a {color:#000; transition:all 0.5s ease-in; opacity: 1; display: inline-block; position: relative;padding:0; background: #fff; width: 66px; line-height: 140%; height: 66px; padding: 12px 0 0; text-align: center;box-sizing: border-box; border: #ccc 1px solid; margin: 8px 0 0 0; border-radius: 10px;}
#global-nav ul li#inq:hover{background: none;}
#global-nav ul li#inq a:hover {background: #c4162f; color: #fff;}
#global-nav ul li#inq a span{display: block; margin: 0 0 0 0;}
/*入館お申し込み*/
#global-nav ul li#apply{margin: 0 0 0 8px; padding:0; border: none;}
#global-nav ul li#apply a {color:#fff; transition:all 0.5s ease-in; opacity: 1; display: inline-block; position: relative;padding:0; background: #313232;font-weight: 500; width: 140px; line-height: 160%; height: 66px; padding: 12px 0; text-align: center;box-sizing: border-box; font-size: 14px; border-radius: 10px; border: #313232 1px solid; margin: 8px 0 0 0;}
#global-nav ul li#apply a:hover { border: #c4162f 1px solid; background: #c4162f;  color: #fff;}
#global-nav ul li#apply a span{display: block; font-size: 18px; letter-spacing: 0.4em; text-indent: 0.4em;}
#global-nav ul li#apply:hover{background: none;}

@media screen and (max-width: 1200px) {
#global-nav ul li {padding: 15px 10px 0px 21px; background: #fff; border-left: #ccc 1px solid;}
#global-nav ul li.sLine{ padding: 22px 10px 0px 10px;}
#global-nav ul li#inq{margin: 0 0 0 4px;}
#global-nav ul li#inq a {width: 60px;}
#global-nav ul li#apply{margin: 0 0px 0 0px;}
#global-nav ul li#apply a {width: 100px; font-size: 12px;}
#global-nav ul li#apply a span{display: block; margin: 6px 0 0 0 ;}
}
/* Fixed */
#top-head.fixed { margin-top: 0; top: 0; position: fixed;  background: #fff; transition: top 1.00s ease-in;}
/* Toggle Button */
#nav-toggle { display: none; position: absolute; right: 12px; top: 14px; width: 30px; height: 38px; padding: 0 4px; cursor: pointer; z-index: 101; background: #fff;}
#nav-toggle div { position: relative;}
#nav-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #000; left: 0; transition: .35s ease-in-out;}
#nav-toggle span:nth-child(1) { top: 7px; background: #c4162f;}
#nav-toggle span:nth-child(2) { top: 17px;}
#nav-toggle span:nth-child(3) { top: 27px;}

/*ここからスマフォ設定------------------------------------------------------------*/
@media screen and (max-width: 904px) {
 /*@media screen and (max-width: 904px) Fixed reset */
#top-head.fixed {  padding-top: 0;  background: #fff; }
#mobile-head { background: rgba(255,255,255,1.0);  width: 100%;  height: 64px;  z-index: 9980;  position: relative; border-bottom: #ccc 1px solid;}
#top-head.fixed .logo, #top-head .logo {  position: absolute;  left: 10px;  top: 17px; width:274px; text-align: left;}
#top-head.fixed .logo a h2 , #top-head .logo a h2{font-size: 30px; letter-spacing: 0.2em;}
#top-head.fixed .logo a h2 span, #top-head .logo a span{margin: 10px 0 0 0; display: block; font-size: 12px; letter-spacing: 0.05em;}

#top-head .inner {  width: 100%;  padding: 0; z-index:9990; margin-top:0;}
#top-head {  top: 0;  position: fixed;  margin-top: 0;  background:none; }
#global-nav {  position: absolute;  top: -560px; width: 100%;  text-align: center;  padding:64px 0 0 0;  transition: 1.0s ease-in-out;}
#global-nav ul#naviBody {  list-style: none;  position: static;  right: 0;  bottom: 0;  font-size: 14px; }
#global-nav ul li {  float: none;  position:relative; text-align:left; border:none;  width:calc(100% - 30px); height: auto; line-height:0; padding:10px 15px; background: rgba(255,255,255,1); margin: 0 0; }
#global-nav ul li.sLine {  float: none;  position: relative; text-align:left; border:none;  width:calc(100% - 30px);  height: auto; line-height:0; padding:10px 15px; background: rgba(255,255,255,1);  margin: 0; }
#top-head #global-nav ul li a ,#top-head.fixed #global-nav ul li a{ display: block;  color: #000;  padding: 15px 0 10px 10px;  font-size:16px; font-weight:bold;margin: 0;}
#top-head #global-nav ul li:hover a ,#top-head.fixed #global-nav ul li:hover a{ color: #c4162f;}
#global-nav ul li a span{display: inline;}
#global-nav ul li#inq a span{display: inline;}
#global-nav > ul > li > a::before , #global-nav > ul > li.sLine > a::before { display: block; content: ""; position: absolute; top: 50%; left: 4px; width: 6px; height: 6px; margin:-3px 0 0  0; border-top: solid 2px #c4162f; border-right: solid 2px #c4162f; transform: rotate(45deg);}

/*お問い合わせ*/
#top-head #global-nav ul li#inq{margin:0; padding:0 15px 10px 15px; border: none;}
#top-head #global-nav ul li#inq a {color:#000; padding:5px 20px; width: calc(100% - 40px); height:auto; text-align: center; display: block; margin: 0 20px;}
#top-head #global-nav ul li#inq a span{display: inline;}
#top-head #global-nav > ul > li#inq  > a::before { display: none;}
/*入館お申し込み*/
#top-head #global-nav ul li#apply{margin:0; padding:5px 15px; border: none;}
#top-head #global-nav ul li#apply a {padding:5px 20px; width: calc(100% - 40px); height:auto; text-align: center; display: block; color: #fff; margin: 0 20px 10px;}
#top-head #global-nav ul li#apply a:hover {background: #fff;  color: #c4162f;}
#top-head #global-nav ul li#apply a span{display: inline; font-size: 16px; padding-left: 3px;}
#top-head #global-nav > ul > li#apply  > a::before { display: none;}

#nav-toggle {  display: block; }
.open #nav-toggle span:nth-child(1) {  top: 16px; transform: rotate(315deg); }
.open #nav-toggle span:nth-child(2) {  width: 0;  left: 50%; }
.open #nav-toggle span:nth-child(3) {  top: 16px; transform: rotate(-315deg); }
.open #global-nav { transform: translateY(556px); }
}
/*ここまでスマフォ設定------------------------------------------------------------*/