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

/*----------------------------------------------------------------------------
***                                                                Container
----------------------------------------------------------------------------*/
.meiryo {font-family: 'メイリオ', "Hiragino kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Meiryo UI', Verdana, 'ＭＳ Ｐゴシック', sans-serif;}
/*----------------------------------------------------------------------------
***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea {position: sticky;z-index: 99;top: 0;}
#headerArea #headerAreaInner {max-width: 1600px;padding: 0.2em 0 0.2em 1em;width: 100%;margin: 0 auto;background: rgba(0,0,0,1);position: relative;z-index: 9;}
#headerArea .logoBox{width: 38%;}
#headerAreaInner .navMenuTop {width: 58%;}
#headerTitle{width: 50%;min-width: 130px;max-width: 150px;}
#headerAreaInner .navBox {width: 100%;padding:2em 0 2em;position:absolute;background: rgba(255,255,255,0.9);top: 100%;left: 0em;z-index: -1;opacity: 0;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;transition: transform 0.5s ease, opacity 0.5s ease;-webkit-transform: translate3d(0,-100%,0);transform: translate3d(0,-100%,0);}
#headerAreaInner .navBox.open{-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;}
#headerAreaInner .shopList{max-width: 100%;width: 100%;order: 2;display: none;}
#headerAreaInner .navBox ul{flex-direction: column;}
#headerAreaInner .navBox ul li{width: 100%;text-align: center; margin: 0;padding: 0;border-bottom: 1px dashed #ccc;}
#headerAreaInner .navBox ul li a{display:inline-block;padding: 1.5em 0;}
#headerAreaInner .navBox ul li a img{width:auto;height: 1.5em;}
#headerAreaInner .contentsList{max-width: 100%;width: 100%;order: 1;padding: 0;}
#headerAreaInner .contentsList .btnContact{/* display:none; */}
#headerAreaInner .topicsBtnBox{max-width: 50px;}
#headerAreaInner .qaBtnBox{max-width: 50px;}
#headerAreaInner .loginBtnBox{max-width: 50px;}
#headerAreaInner .loginBtnBox .pcNone{display:block;}
#headerAreaInner .nlsTelTop {max-width: 30px;}

#headerArea .icoBox{display:block;padding: 0 0 0 10%;}
#headerArea .btnIco{margin:0 1em 0 0;}

#headerArea #menuBtnBox{display:block;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);}

/*----------------------------------------------------------------------------
***                                                                  gnav
----------------------------------------------------------------------------*/
#gnav{background: #4d4d4d;box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);}
#gnav a{color: #fff;font-size: 100%;width: 100%;display: block;text-align: center;padding: 0.8em 0.5em 0.8em;font-weight: bold;position: relative;}
#gnav a .txt{border-bottom: none;display: inline-block;line-height: 1.5;width: 100%;}
#gnav a:before{content:"";display:block;width: 0.6em;height: 0.6em;position:absolute;top:50%;right: 5%;transform: translate(0, -50%) rotate(-45deg);border-right: 2px solid rgba(255,255,255,0.4);border-bottom: 2px solid rgba(255,255,255,0.4);}
#gnav .gnavBox{position: relative;padding: 0px 0 0px;width: 100%;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: 33.33%;box-sizing: border-box;}
#gnav .gnavBox li:nth-of-type(n+4){border-top: 1px solid #fff;}
#gnav .gnavBox li:first-child{border-left:none;}
#gnav .gnavBox li.btnSampleLink a{background:#b6499f; color:#fff;}
#gnav .gnavBox li.btnFormLink a{background:#f7931e;}


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

#breadcrumbArea{width: 70%;}
#breadcrumbArea .breadcrumbInner{}
#breadcrumbArea .breadcrumbInner ul{white-space: nowrap; overflow-x: auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
#breadcrumbArea a{color:#fff; text-decoration:underline;}
#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: 30%;max-width: 150px;}
#snsBtnBox li{width: 27%; margin-left:2%;}

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

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

/*--- ボタン類共通 ---*/
.btnBox {margin:0 auto;position:relative;width: 70%;}
.btnBox li.listMargin{margin: 0 auto 1.5em;width: auto;min-width: auto;}
.btnBox li.listMargin img{min-width:190px;}
.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{}

/*--- ボタン下よくあるご質問共通 ---*/
.btnBox {width: 100%; padding: 0 15%;}/*20201109*/
.btnBox .linkTopicsFaq p {width: 100%; text-align: center;}
.nlsTel {width: 100%;margin: 1.5em auto 2em auto;max-width: 220px;text-align: center;}

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

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


/*----------------------------------------------------------------------------
***                                                              footer
----------------------------------------------------------------------------*/
#footerSec .sectionInner{max-width:1200px;margin:0 auto;padding:0.5em 2em;width: 100%;}
#footerSec p a{ color:#f7931e; font-weight:bold;}
#footerSec #footerCopyright{ width:100%; order:4;}
#footerSec #footerCopyright p{ text-align:center;}
#footerSec #faqPage{ width:100%; order:2; margin:0.5em auto; padding:0 0 0.5em; border-bottom:1px dashed #f7931e;}
#footerSec #faqPage p{ text-align:center;}
#footerSec #policyPage{ width:100%; order:2; margin:0.5em auto; padding:0 0 0.5em; border-bottom:1px dashed #f7931e;}
#footerSec #policyPage p{ text-align:center;}
#footerSec #transactionsPage{ width:100%; order:3; margin:0.5em auto; padding:0 0 0.5em; border-bottom:1px dashed #f7931e;}
#footerSec #transactionsPage p{ text-align:center;}
#footerSec #footerLogo{ width:100%; order:3; margin:2em auto 1.5em;}