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

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

/*----------------------------------------------------------------------------
***                                                                  wrap
----------------------------------------------------------------------------*/
#wrap{min-width:0; position:relative;}

/*----------------------------------------------------------------------------
***                                                                  Header
----------------------------------------------------------------------------*/
#headerArea { width:100%; height:3rem; z-index:100; background:rgba(255,255,255,0.95); position:fixed;}
#headerAreaInner { padding:0.5em 0 0;max-width: 1200px;margin: 0 auto;position: relative;}
#headerAreaInner .navBox {width: 100%;height: 100vh;padding: 10vh 5em;position: fixed;background: #fff;top: 0;right: -100%;transition: all .5s ease-in-out;z-index: 90;}
#headerAreaInner .navBox.open {right: 0%;}
#headerAreaInner .navBox li{ width:100%;}
#headerAreaInner .navBox li:last-child{margin-bottom:3em;}
#headerAreaInner .navBox li a{ color:#595757; font-size:100%; font-weight:bold; border-bottom:1px dashed #a1a1a1; display:block; padding:0 0 0.5em; text-align:center;}
#headerAreaInner .navBox li span{ color:#34b3cc; font-size:175%; font-weight:normal; display:block; font-family:'Bahnschrift Condensed', serif; margin:0 0 0.2em;}
#headerAreaInner .contentsList{width: 100%;height: 100%;}
#headerAreaInner .contentsList ul{height:100%;}
#headerTitle{width: 100%;padding: 0% 12% 0%;text-align: center;}
#headerTitle h1{width: 100%;max-width: 190px;display: inline-block;}

#headerAreaInner .pullBtn_hover{position:relative;z-index: 1;background: #fff;border: 1px solid #ddd;border-radius: 5px;width: 8em;line-height: 1;}
#headerAreaInner .pullBtn_hover a{display:block;cursor:pointer;color:#000;line-height: 1;padding: 0.3em 0em 0.3em;}
#headerAreaInner .pullBtn_hover .btn{padding: 0.3em 0.5em 0.3em;}
#headerAreaInner .pullBtn_hover .gnav_classList{position:absolute;top: calc(100% + 0px);left:0;width: 100%;line-height: 1;visibility:hidden;background: #fff;box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);}
#headerAreaInner .pullTgt_hover{padding: 0.3em 0.5em 0.3em;border: 1px solid #ddd;}
#headerAreaInner .pullTgt_hover li:not(:last-child){border-bottom:1px dashed #ccc;}

#headerAreaInner .btnIco {margin-left:0.7em;display: none;}
#headerAreaInner .btnMenu{}

#headerArea #menuBtnBox{display:block;width: 10vw;height: 6vw;max-width: 30px;max-height: 20px;cursor: pointer;margin: 0 1em 0 0;/*background:#ccc;*/position: absolute;top: 50%;right:  0;transform: translate(0, -50%);z-index: 99;}
#headerArea #menuBtnBox .menuBtn{position:relative;width:100%;height:100%;display:block;margin: 0;}
#headerArea #menuBtnBox .line,
#headerArea #menuBtnBox .menuBtn:before,
#headerArea #menuBtnBox .menuBtn:after{content:"";display:block;width: 10vw;height: 2px;max-width:30px;background: #000;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);}


/*----------------------------------------------------------------------------
***                                                              mainsection
----------------------------------------------------------------------------*/
#contentsArea{ padding:3rem 0 0;}

/*--- セクション共通 ---*/
.secBox{width: 100%;}
.secBox > .sectionInner{max-width: 960px;margin: 0 auto;padding: 5em 2em 5em;}
.secBox > .sectionInner > .titleBox{margin: 0 0 1.5em;}
.secBox > .sectionInner .titleBox{font-size:32px;}
.secBox > .sectionInner .titleBox h2{font-weight: normal;}

.box{width: 100%;}
.box > .boxInner{max-width:1200px;margin: 0 auto;padding: 5em 0em 5em;}

/*--- ボタン類共通 ---*/
.btnBox {margin:0 auto; position:relative;}
.btnBox a{color:#040000;}
.btnBox li.listMargin{margin: 0 auto 0em;}
.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{}

/*--- TOPへ戻るボタン ---*/
#btnTop{position:fixed;right:0;bottom:0;z-index:9;display:none;max-width: 112px;width: 20vw;}

/*--- スクロールバーの設定 ---*/
/* スクロールの幅 */
.customScrollbar::-webkit-scrollbar {
    width: 6px;
    height: 5x;
}

/* スクロールの背景 */
.customScrollbar::-webkit-scrollbar-track {
    border-radius: 0px;
    box-shadow: 0 0 4px #e3e3e3 inset;
    background: #e3e3e3;
}

/* スクロールのつまみ部分 */
.customScrollbar::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background: rgba(176, 176, 176, 0.6);
}

/* スクロールのつまみ部分 */
.customScrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(176, 176, 176, 1);
    cursor: pointer;
}

/*----------------------------------------------------------------------------
***                                                                  footer
----------------------------------------------------------------------------*/
#footerArea{ background:#a1a1a1;}
#footerAreaInner{ max-width:1200px; margin:0 auto; padding:1em 0em 1em;}
#footerAreaInner *{ color:#fff;}

#footerLink{ padding:0 3em 2em; border-bottom:1px solid #fff;}
#footerLink .linkBox{ width:100%;}
#footerLink dl{ overflow:hidden; border-top:1px dashed #fff; margin-top:1em;}
#footerLink dt,
#footerLink ul li{ font-size:125%;}
#footerLink ul li{ border-top:1px dashed #fff; padding:1em 0 0.5em;}
#footerLink dd{ margin:0.5em 0.5em 0.5em 1em;}
#footerLink dd ul li{ font-size:100%; font-weight:normal; margin:0; padding:0; border:none;}
#footerCatchcopy{ padding:2em 0em 0em;}