@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------------
***                                                                Container
----------------------------------------------------------------------------*/
.meiryo {font-family: 'メイリオ', "Hiragino kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Meiryo UI', Verdana, 'ＭＳ Ｐゴシック', sans-serif;}


/*----------------------------------------------------------------------------
***                                                             headerArea
----------------------------------------------------------------------------*/
#headerArea{position: sticky;top:0;width:100%;z-index: 99;background: rgba(0,0,0,1);}
#headerArea #headerAreaInner{position:relative;padding: 3px 0 3px;width: 50vw;}
#headerArea #headerAreaInner h1 {margin: 0;padding:0 0 2px 0;line-height: 1em;}
#headerArea .ttl{padding: 5px 0 5px;margin: 0;}
#headerArea .ttl img{}
#headerArea .logoBox{width:25%;max-width: 240px;}
#headerArea #menuBtnBox{width: 30px;height: 20px;cursor: pointer;margin: 0 1em 0 0;}
#headerArea #menuBtnBox .menuBtn{position:relative;width:100%;height:100%;display:block;}
#headerArea #menuBtnBox .line,
#headerArea #menuBtnBox .menuBtn:before,
#headerArea #menuBtnBox .menuBtn:after{content:"";display:block;width: 30px;height: 2px;background: #fff;position:absolute;right:0;border-radius: 20px;transform-origin: center;transition:all 0.5s ease;}
#headerArea #menuBtnBox .line{top: 0;}
#headerArea #menuBtnBox .menuBtn:before{top: calc(50% - 1px);}
#headerArea #menuBtnBox .menuBtn:after{bottom:0;}
#headerArea #menuBtnBox .menuBtn.open .line{top: calc(50% - 1px);transform:rotate(-45deg);}
#headerArea #menuBtnBox .menuBtn.open:before{top: calc(50% - 1px);opacity:0;}
#headerArea #menuBtnBox .menuBtn.open:after{bottom: calc(50% - 1px);transform: rotate(45deg);}


/*----------------------------------------------------------------------------
***                                                             headerAreaInner
----------------------------------------------------------------------------*/
#headerAreaInner {padding: 2em 1em 2em;max-width: 950px;margin: 0 auto;}
#headerAreaInner .navMenuTop {width: 70%;max-width:560px;}
#headerAreaInner .topicsBtnBox{margin-right: 2%; margin-top: 2px;}
#headerAreaInner .qaBtnBox{margin-right: 2%; margin-top: 2px;}
#headerAreaInner .loginBtnBox{margin-right: 2%;}
#headerAreaInner .nlsTelTop {max-width: 165px;width: 30%;margin: 2px 0.7em 0 0;}
#headerAreaInner .navBox {width: 70%;}
#headerAreaInner .shopList{max-width: 220px;width: 100%;margin-bottom: 0.5em;}
#headerAreaInner .contentsList{max-width: calc(600px + 2em);width: 100%;padding-left: 2em;}
#headerArea .icoBox{display:none;}


/*----------------------------------------------------------------------------
***                                                                  gnav
----------------------------------------------------------------------------*/
#gnav{background: #4d4d4d;box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);}
#gnav a{color: #fff;font-size: calc( 95% - ((1920px -  100vw)/300));width: 100%;height: 100%;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;text-align: center;padding: 0.5em 0.5em 0.5em;font-weight: bold;position: relative;line-height: 1.5;text-decoration: none;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
#gnav a:hover{background:#f7a94f;}
#gnav a .txt{display: inline-block;line-height: 1.5;width: 100%;}
#gnav a .txt .inTxt{display: inline-block;line-height: 1.5;}
#gnav .gnavBox{position: relative;padding: 0px 0 0px;width: 50vw;max-width: 950px;margin: 0 auto;}
#gnav .gnavBox ul{padding: 0 0;}
#gnav .gnavBox li{margin: 0 0em;padding: 0 0;border-right: 1px solid #fff;width: 20%;box-sizing: border-box;}
#gnav .gnavBox li:first-child{border-left:1px solid #fff;}
#gnav .gnavBox li.btnSampleLink a{background:#000000; color:#7caf38;}
#gnav .gnavBox li.btnFormLink a{background:#f7931e;}
#gnav .gnavBox li.btnSampleLink a:hover{background:#333333;}
#gnav .gnavBox li.btnFormLink a:hover{background:#f7a94f;}

/*----------------------------------------------------------------------------
***                                                                  gnavBottom
----------------------------------------------------------------------------*/
#gnavBottom{position: absolute;width: 100%;padding: 0;font-size: 75%;z-index: 2;background: #000;}
#gnavBottom .gnavBottomInner{position: relative; padding: 0px 0 0px; width: 50vw; max-width: 950px; margin: 0 auto;}

#breadcrumbArea{}
#breadcrumbArea a{color:#fff; text-decoration:underline;}
#breadcrumbArea li{color: #fff;}
#breadcrumbArea li:not(:last-child):after{content:"";display:inline-block;border: 0.3em solid transparent;border-left: 6px solid #fff;border-right: 0em solid transparent;width: 0;height: 0;margin: 0 0.6em;}

#snsBtnBox{width: 20%; max-width: 150px;}
#snsBtnBox li{width: 29%; margin-left:2%;}


/*----------------------------------------------------------------------------
***                                                              mainsection
----------------------------------------------------------------------------*/

/*--- セクション共通 ---*/
.secBox{width: 100%;}
.secBox > .sectionInner{max-width: 1200px;width: 59.2vw;margin: 0 auto;padding: 5em 0em 5em;}
.secBox > .sectionInner > .titleBox{margin: 0 0 2em;}
.secBox > .sectionInner > .titleBox h2{font-size:39px;}
.underPage .secBox .secBox > .sectionInner{max-width: calc(1000px + 4em);margin: 0 auto;padding: 5em 2em 5em;}
.underPage .secBox > .sectionInner > .titleBox h3{font-size:39px;}

/*--- ボタン類共通 ---*/
.btnBox {margin:0 auto;position:relative;width: 100%;}
.btnBox li.listMargin{margin: 0 auto 1.5em;width: 47%;min-width: 170px;}
.btnBox li.listMargin img{min-width: 170px;}
.btnBox li.listMargin:first-child{}
.btnBox li.listMargin:last-child{}
.dispInFlex li{margin: 0 0.5em 1.5em;}
.dispInFlex li:first-child{}
.dispInFlex li:last-child{}
.secBox{}
.btnBox{margin-top: 3em;}
.btnBox .txtBox{font-size:140%;font-weight:bold;margin-bottom: 0.27em;}
.btnComingSoon{position:relative;}
.btnComingSoon:before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index: 9;}
.btnComingSoon .imgBox {opacity:0.2;}
.btnComingSoon.txtBtn a{opacity:0.5;}

/*--- ボタン下よくあるご質問共通 ---*/
.btnBox .linkTopicsFaq {text-align: center;}
.btnBox .linkTopicsFaq img {margin-right: 0.3em;}
.btnBox .linkTopicsFaq p {width: 50%;text-align: center;margin-top: 13px;}
.btnBox .linkTopicsFaq a{font-weight:normal;text-decoration: underline;color:#000;}

/*電話*/
.nlsTel {width: auto;margin: 2em auto 0 auto;}


/*--- mainView共通（下層ページ） ---*/
.underPage #mainView{}


/*--- TOPへ戻るボタン ---*/
#backToTop {position: fixed;right: 2em;bottom: 2.7em;z-index: 999;}
#backToTop:hover {cursor: pointer;}


/*----------------------------------------------------------------------------
***                                                              footer
----------------------------------------------------------------------------*/
#footerSec{background: #000;}
#footerSec .sectionInner{max-width:1200px;margin:0 auto;padding:0.5em 2em;width: 100%;}
#footerSec .sectionInner p{color: #fff;}
#footerSec .sectionInner p a{color: #fff;}
#footerSec .sectionInner p a:link{color: #fff;}

@media screen and (min-width: 1920px){
    #gnav a{font-size:85%;}
}