@charset "utf-8";

/* ========================================================
    base.css => 共通基本CSS
======================================================== */

/* fonts setting
----------------------------------------------------------------------------------------------------*/

.cf:after{
    content: "";
    display: block;
    clear: both;
}
.ofi{
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;'
}

textarea {
    height: 100%;
    min-height: 20em;
    margin: 0;
    padding: 0;    
}

/* フォント設定
============================================================================================================ */
.yugo{font-family:  "游ゴシック体", "Yu Gothic", YuGothic, Meiryo, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic",  Osaka, sans-serif;}
.yumin{	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.font-roboto{font-family: 'Roboto', sans-serif;}
.font-robotoC{font-family: 'Roboto Condensed', sans-serif;}
.font-HVM{font-family: 'Herr Von Muellerhoff', cursive;}
.libre-basker{font-family: 'Libre Baskerville', serif;}
.noto-serif{font-family: 'Noto Serif', 'Noto Serif JP', serif;}
.noto-sans{font-family: 'Noto Sans JP', sans-serif;}
.didot{font-family: 'GFS Didot', serif;}
.times{font-family: 'Times New Roman', serif;}
.Crimson{font-family: 'Crimson Text', serif;}
.Rubik{font-family: 'Rubik', sans-serif;}
.m-plus-round{font-family: 'M PLUS Rounded 1c', sans-serif;}
.lato{font-family: 'Lato', sans-serif;}

.fwl{font-weight: lighter !important;}
.fwn{font-weight: normal !important;}
.fwm{font-weight: 500 !important;}
.fwb{font-weight: bold !important;}
.fwt{font-weight: 100;}
.fwr{font-weight: 400;}
.fwbo{font-weight: 700;}

/* float
============================================================================================================ */
.fl {float: left !important;}
.fr {float: right !important;}

/* dummy
============================================================================================================ */
@media screen and (max-width: 959px) {
    .dummy {height: 0 !important;}
}

/* text-align
============================================================================================================ */
.tal {text-align: left !important;}
.tac {text-align: center !important;}
.tar {text-align: right !important;}
.taj {text-align: justify !important;}

@media screen and (max-width: 959px) {
    .sp-tal {text-align: left !important;}
    .sp-tac {text-align: center !important;}
    .sp-tar {text-align: right !important;}
    .sp-taj {text-align: justify !important;}
}

/* text-decoration
============================================================================================================ */
.tdnu {word-wrap: break-word;text-decoration: none;}
.tdnu:hover{text-decoration: underline;-webkit-transition:all .3s;transition:all .3s;-webkit-transition:all all .3s ease;-moz-transition:all all .3s ease;-ms-transition:all all .3s ease;-o-transition:all all .3s ease;transition:all all .3s ease;}
.tdun {word-wrap: break-word;text-decoration: underline;}
.tdun:hover{text-decoration: none;-webkit-transition:all .3s;transition:all .3s;-webkit-transition:all all .3s ease;-moz-transition:all all .3s ease;-ms-transition:all all .3s ease;-o-transition:all all .3s ease;transition:all all .3s ease;}


/* line-height
============================================================================================================ */
.lh05{line-height: 0.5 !important;}
.lh075{line-height: 0.75 !important;}
.lh1{line-height: 1 !important;}
.lh125{line-height: 1.25 !important;}
.lh15{line-height: 1.5 !important;}
.lh175{line-height: 1.75 !important;}
.lh2{line-height: 2 !important;}
.lh225{line-height: 2.25 !important;}

@media screen and (max-width: 959px) {
    .sp-lh05{line-height: 0.5 !important;}
    .sp-lh075{line-height: 0.75 !important;}
    .sp-lh1{line-height: 1 !important;}
    .sp-lh125{line-height: 1.25 !important;}
    .sp-lh15{line-height: 1.5 !important;}
    .sp-lh175{line-height: 1.75 !important;}
    .sp-lh2{line-height: 2 !important;}
    .sp-lh225{line-height: 2.25 !important;}
}

/* letter spacing
============================================================================================================ */
.ls00{letter-spacing: 0em !important;}
.ls001{letter-spacing: 0.01em !important;margin-right: -0.01em;}
.ls005{letter-spacing: 0.05em !important;margin-right: -0.05em;}
.ls01{letter-spacing: 0.1em !important;margin-right: -0.1em;}
.ls015{letter-spacing: 0.15em !important;margin-right: -0.15em;}
.ls02{letter-spacing: 0.2em !important;margin-right: -0.2em;}
.ls025{letter-spacing: 0.25em !important;margin-right: -0.25em;}
.ls05{letter-spacing: 0.5em !important;margin-right: -0.5em;}
.ls10{letter-spacing: 1em !important;margin-right: -1em;}
.ls20{letter-spacing: 2em !important;margin-right: -2em;}



/* margin
============================================================================================================ */
.mauto {margin-left: auto !important;margin-right: auto !important;}
.m00 {margin: 0 !important;}
.mb {margin-bottom: 1.5em !important;}
.mb00 {margin-bottom: 0 !important;}
.mb05 {margin-bottom: 5px !important;}
.mb08 {margin-bottom: 8px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb90 {margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}
.mb-70 {margin-bottom: -70px !important;}

.mt {margin-top: 1.5em !important;}
.mt00 {margin-top: 0 !important;}
.mt05 {margin-top: 5px !important;}
.mt08 {margin-top: 8px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}
.mt90 {margin-top: 90px !important;}
.mt100 {margin-top: 100px !important;}

.ml05 {margin-left: 5px !important;}
.ml08 {margin-left: 8px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml35 {margin-left: 35px !important;}
.ml40 {margin-left: 40px !important;}
.ml45 {margin-left: 45px !important;}
.ml50 {margin-left: 50px !important;}

.mr00 {margin-right: 0 !important;}
.mr01 {margin-right: 1px !important;}
.mr02 {margin-right: 2px !important;}
.mr03 {margin-right: 3px !important;}
.mr04 {margin-right: 4px !important;}
.mr05 {margin-right: 5px !important;}
.mr08 {margin-right: 8px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr35 {margin-right: 35px !important;}
.mr40 {margin-right: 40px !important;}
.mr45 {margin-right: 45px !important;}
.mr50 {margin-right: 50px !important;}


@media screen and (max-width: 767px) {
    .sp-mauto {margin-left: auto !important;margin-right: auto !important;}
    .sp-m00 {margin: 0 !important;}
    .sp-mb {margin-bottom: 1.5em !important;}
    .sp-mb00 {margin-bottom: 0 !important;}
    .sp-mb05 {margin-bottom: 5px !important;}
    .sp-mb08 {margin-bottom: 8px !important;}
    .sp-mb10 {margin-bottom: 10px !important;}
    .sp-mb15 {margin-bottom: 15px !important;}
    .sp-mb20 {margin-bottom: 20px !important;}
    .sp-mb25 {margin-bottom: 25px !important;}
    .sp-mb30 {margin-bottom: 30px !important;}
    .sp-mb35 {margin-bottom: 35px !important;}
    .sp-mb40 {margin-bottom: 40px !important;}
    .sp-mb45 {margin-bottom: 45px !important;}
    .sp-mb50 {margin-bottom: 50px !important;}
    .sp-mb60 {margin-bottom: 60px !important;}
    .sp-mb70 {margin-bottom: 70px !important;}
    .sp-mb80 {margin-bottom: 80px !important;}
    .sp-mb90 {margin-bottom: 90px !important;}
    .sp-mb100 {margin-bottom: 100px !important;}
    .sp-mt {margin-top: 1.5em !important;}
    .sp-mt00 {margin-top: 0 !important;}
    .sp-mt05 {margin-top: 5px !important;}
    .sp-mt08 {margin-top: 8px !important;}
    .sp-mt10 {margin-top: 10px !important;}
    .sp-mt15 {margin-top: 15px !important;}
    .sp-mt20 {margin-top: 20px !important;}
    .sp-mt25 {margin-top: 25px !important;}
    .sp-mt30 {margin-top: 30px !important;}
    .sp-mt35 {margin-top: 35px !important;}
    .sp-mt40 {margin-top: 40px !important;}
    .sp-mt45 {margin-top: 45px !important;}
    .sp-mt50 {margin-top: 50px !important;}
    .sp-mt60 {margin-top: 60px !important;}
    .sp-mt70 {margin-top: 70px !important;}
    .sp-mt80 {margin-top: 80px !important;}
    .sp-mt90 {margin-top: 90px !important;}
    .sp-mt100 {margin-top: 100px !important;}


    .sp-ml00 {margin-left: 0 !important;}
    .sp-ml05 {margin-left: 5px !important;}
    .sp-ml08 {margin-left: 8px !important;}
    .sp-ml10 {margin-left: 10px !important;}
    .sp-ml15 {margin-left: 15px !important;}
    .sp-ml20 {margin-left: 20px !important;}
    .sp-ml25 {margin-left: 25px !important;}
    .sp-ml30 {margin-left: 30px !important;}
    .sp-ml35 {margin-left: 35px !important;}
    .sp-ml40 {margin-left: 40px !important;}
    .sp-ml45 {margin-left: 45px !important;}
    .sp-ml50 {margin-left: 50px !important;}

    .sp-mr00 {margin-right: 0 !important;}
    .sp-mr05 {margin-right: 5px !important;}
    .sp-mr08 {margin-right: 8px !important;}
    .sp-mr10 {margin-right: 10px !important;}
    .sp-mr15 {margin-right: 15px !important;}
    .sp-mr20 {margin-right: 20px !important;}
    .sp-mr25 {margin-right: 25px !important;}
    .sp-mr30 {margin-right: 30px !important;}
    .sp-mr35 {margin-right: 35px !important;}
    .sp-mr40 {margin-right: 40px !important;}
    .sp-mr45 {margin-right: 45px !important;}
    .sp-mr50 {margin-right: 50px !important;}
}

/* padding
============================================================================================================ */
.p00 {padding: 0 !important;}
.pbt100 {padding: 100px 0;}
.pb {padding-bottom: 1.3em !important;}
.pb00 {padding-bottom: 0 !important;}
.pb05 {padding-bottom: 5px !important;}
.pb08 {padding-bottom: 8px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb35 {padding-bottom: 35px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb45 {padding-bottom: 45px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb60 {padding-bottom: 60px !important;}
.pb70 {padding-bottom: 70px !important;}
.pb80 {padding-bottom: 80px !important;}
.pb90 {padding-bottom: 90px !important;}
.pb100 {padding-bottom: 100px !important;}
.pb110 {padding-bottom: 110px !important;}
.pb120 {padding-bottom: 120px !important;}
.pb130 {padding-bottom: 130px !important;}
.pb140 {padding-bottom: 140px !important;}
.pb150 {padding-bottom: 150px !important;}
.pb160 {padding-bottom: 160px !important;}
.pb170 {padding-bottom: 170px !important;}

.pt00 {padding-top: 0 !important;}
.pt05 {padding-top: 5px !important;}
.pt08 {padding-top: 8px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}
.pt30 {padding-top: 30px !important;}
.pt35 {padding-top: 35px !important;}
.pt40 {padding-top: 40px !important;}
.pt45 {padding-top: 45px !important;}
.pt50 {padding-top: 50px !important;}
.pt60 {padding-top: 60px !important;}
.pt70 {padding-top: 70px !important;}
.pt80 {padding-top: 80px !important;}
.pt90 {padding-top: 90px !important;}
.pt100 {padding-top: 100px !important;}
.pt110 {padding-top: 110px !important;}
.pt120 {padding-top: 120px !important;}
.pt130 {padding-top: 130px !important;}
.pt140 {padding-top: 140px !important;}
.pt150 {padding-top: 150px !important;}
.pt160 {padding-top: 160px !important;}
.pt170 {padding-top: 170px !important;}

.pl00 {padding-left: 0px !important;}
.pl05 {padding-left: 5px !important;}
.pl08 {padding-left: 8px !important;}
.pl10 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}
.pl30 {padding-left: 30px !important;}
.pl40 {padding-left: 40px !important;}
.pl50 {padding-left: 50px !important;}
.pl60 {padding-left: 60px !important;}
.pl70 {padding-left: 70px !important;}
.pl80 {padding-left: 80px !important;}
.pl90 {padding-left: 90px !important;}
.pl100 {padding-left: 100px !important;}
.pl110 {padding-left: 110px !important;}
.pl120 {padding-left: 120px !important;}
.pl130 {padding-left: 130px !important;}
.pl140 {padding-left: 140px !important;}
.pl150 {padding-left: 150px !important;}
.pl160 {padding-left: 160px !important;}
.pl170 {padding-left: 170px !important;}

.pr00 {padding-right: 0px !important;}
.pr05 {padding-right: 5px !important;}
.pr08 {padding-right: 8px !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr30 {padding-right: 30px !important;}
.pr40 {padding-right: 40px !important;}
.pr50 {padding-right: 50px !important;}
.pr60 {padding-right: 60px !important;}
.pr70 {padding-right: 70px !important;}
.pr80 {padding-right: 80px !important;}
.pr90 {padding-right: 90px !important;}
.pr100 {padding-right: 100px !important;}
.pr110 {padding-right: 110px !important;}
.pr120 {padding-right: 120px !important;}
.pr130 {padding-right: 130px !important;}
.pr140 {padding-right: 140px !important;}
.pr150 {padding-right: 150px !important;}
.pr160 {padding-right: 160px !important;}
.pr170 {padding-right: 170px !important;}


.pbox {padding: 5px 10px !important;}
.pbox00 {padding: 1% 5% !important;}
.pbox01 {padding: 10px !important;}
.pbox02 {padding: 20px !important;}
.pbox03 {padding: 30px !important;}
.pbox03_02 {padding: 30px 20px !important;}
.pbox04 {padding: 40px !important;}
.pbox05 {padding: 50px !important;}
.pbox100 {padding: 100px !important;}

@media screen and (max-width: 767px) {
    .pbox {padding: 5px 10px !important;}
    .pbox00 {padding: 1% 5% !important;}
    .pbox01 {padding: 10px !important;}
    .pbox02 {padding: 20px !important;}
    .pbox03 {padding: 20px !important;}
    .pbox03_02 {padding: 20px 10px !important;}
    .pbox04 {padding: 20px !important;}
    .pbox05 {padding: 30px !important;}
    .pbox100 {padding: 50px; !important}

    .sp-p00 {padding: 0 !important;}
    .sp-pbt100 {padding: 100px 0;}
    .sp-pb {padding-bottom: 1.3em !important;}
    .sp-pb00 {padding-bottom: 0 !important;}
    .sp-pb05 {padding-bottom: 5px !important;}
    .sp-pb08 {padding-bottom: 8px !important;}
    .sp-pb10 {padding-bottom: 10px !important;}
    .sp-pb15 {padding-bottom: 15px !important;}
    .sp-pb20 {padding-bottom: 20px !important;}
    .sp-pb25 {padding-bottom: 25px !important;}
    .sp-pb30 {padding-bottom: 30px !important;}
    .sp-pb35 {padding-bottom: 35px !important;}
    .sp-pb40 {padding-bottom: 40px !important;}
    .sp-pb45 {padding-bottom: 45px !important;}
    .sp-pb50 {padding-bottom: 50px !important;}
    .sp-pb60 {padding-bottom: 60px !important;}
    .sp-pb70 {padding-bottom: 70px !important;}
    .sp-pb80 {padding-bottom: 80px !important;}
    .sp-pb90 {padding-bottom: 90px !important;}
    .sp-pb100 {padding-bottom: 100px !important;}
    .sp-pb150 {padding-bottom: 150px !important;}
    
    .sp-pt00 {padding-top: 0 !important;}
    .sp-pt05 {padding-top: 5px !important;}
    .sp-pt08 {padding-top: 8px !important;}
    .sp-pt10 {padding-top: 10px !important;}
    .sp-pt15 {padding-top: 15px !important;}
    .sp-pt20 {padding-top: 20px !important;}
    .sp-pt25 {padding-top: 25px !important;}
    .sp-pt30 {padding-top: 30px !important;}
    .sp-pt35 {padding-top: 35px !important;}
    .sp-pt40 {padding-top: 40px !important;}
    .sp-pt45 {padding-top: 45px !important;}
    .sp-pt50 {padding-top: 50px !important;}
    .sp-pt60 {padding-top: 60px !important;}
    .sp-pt70 {padding-top: 70px !important;}
    .sp-pt80 {padding-top: 80px !important;}
    .sp-pt90 {padding-top: 90px !important;}
    .sp-pt100 {padding-top: 100px !important;}
    .sp-pt150 {padding-top: 150px !important;}

    .sp-pl00 {padding-left: 0px !important;}
    .sp-pl05 {padding-left: 5px !important;}
    .sp-pl08 {padding-left: 8px !important;}
    .sp-pl10 {padding-left: 10px !important;}
    .sp-pl15 {padding-left: 15px !important;}
    .sp-pl20 {padding-left: 20px !important;}
    .sp-pl30 {padding-left: 30px !important;}
    .sp-pl40 {padding-left: 40px !important;}
    .sp-pl50 {padding-left: 50px !important;}
    .sp-pl60 {padding-left: 60px !important;}
    .sp-pl70 {padding-left: 70px !important;}
    .sp-pl80 {padding-left: 80px !important;}
    .sp-pl90 {padding-left: 90px !important;}
    .sp-pl100 {padding-left: 100px !important;}
    .sp-pl150 {padding-left: 150px !important;}

    .sp-pr00 {padding-right: 0px !important;}
    .sp-pr05 {padding-right: 5px !important;}
    .sp-pr08 {padding-right: 8px !important;}
    .sp-pr10 {padding-right: 10px !important;}
    .sp-pr15 {padding-right: 15px !important;}
    .sp-pr20 {padding-right: 20px !important;}
    .sp-pr30 {padding-right: 30px !important;}
    .sp-pr40 {padding-right: 40px !important;}
    .sp-pr50 {padding-right: 50px !important;}
    .sp-pr60 {padding-right: 60px !important;}
    .sp-pr70 {padding-right: 70px !important;}
    .sp-pr80 {padding-right: 80px !important;}
    .sp-pr90 {padding-right: 90px !important;}
    .sp-pr100 {padding-right: 100px !important;}
    .sp-pr150 {padding-right: 150px !important;}

    .sp-pbox {padding: 5px 10px !important;}
    .sp-pbox00 {padding: 1% 5% !important;}
    .sp-pbox01 {padding: 10px !important;}
    .sp-pbox02 {padding: 20px !important;}
    .sp-pbox03 {padding: 30px !important;}
    .sp-pbox03_02 {padding: 30px 20px !important;}
    .sp-pbox04 {padding: 40px !important;}
    .sp-pbox05 {padding: 50px !important;}
    .sp-pbox100 {padding: 100px; !important}

}


/* font size
============================================================================================================ */
.fz8  {font-size:  8px !important;}
.fz9  {font-size:  9px !important;}
.fz10 {font-size: 10px !important;}
.fz11 {font-size: 11px !important;}
.fz12 {font-size: 12px !important;}
.fz13 {font-size: 13px !important;}
.fz14 {font-size: 14px !important;}
.fz15 {font-size: 15px !important;}
.fz16 {font-size: 16px !important;}
.fz17 {font-size: 17px !important;}
.fz18 {font-size: 18px !important;}
.fz19 {font-size: 19px !important;}
.fz20 {font-size: 20px !important;}
.fz21 {font-size: 21px !important;}
.fz23 {font-size: 23px !important;}
.fz24 {font-size: 24px !important;}
.fz26 {font-size: 26px !important;}
.fz28 {font-size: 28px !important;}
.fz30 {font-size: 30px !important;}
.fz32 {font-size: 32px !important;}
.fz35 {font-size: 35px !important;}
.fz36 {font-size: 36px !important;}
.fz40 {font-size: 40px !important;}
.fz44 {font-size: 44px !important;}
.fz48 {font-size: 48px !important;}
.fz50 {font-size: 50px !important;}
.fz53 {font-size: 53px !important;}
.fz60 {font-size: 60px !important;}

@media screen and (max-width: 767px) {
    .sp-fz8  {font-size:  8px !important;}
    .sp-fz9  {font-size:  9px !important;}
    .sp-fz10 {font-size: 10px !important;}
    .sp-fz11 {font-size: 11px !important;}
    .sp-fz12 {font-size: 12px !important;}
    .sp-fz13 {font-size: 13px !important;}
    .sp-fz14 {font-size: 14px !important;}
    .sp-fz15 {font-size: 15px !important;}
    .sp-fz16 {font-size: 16px !important;}
    .sp-fz17 {font-size: 17px !important;}
    .sp-fz18 {font-size: 18px !important;}
    .sp-fz19 {font-size: 19px !important;}
    .sp-fz20 {font-size: 20px !important;}
    .sp-fz21 {font-size: 21px !important;}
    .sp-fz24 {font-size: 24px !important;}
    .sp-fz28 {font-size: 28px !important;}
    .sp-fz30 {font-size: 30px !important;}
    .sp-fz32 {font-size: 32px !important;}
    .sp-fz36 {font-size: 36px !important;}
    .sp-fz40 {font-size: 40px !important;}
    .sp-fz44 {font-size: 44px !important;}
    .sp-fz48 {font-size: 48px !important;}
    .sp-fz50 {font-size: 50px !important;}
    .sp-fz53 {font-size: 53px !important;}
    .sp-fz60 {font-size: 60px !important;}
}

/* font style
============================================================================================================ */
.fsi {font-style: italic !important;}
.fso {font-style: oblique !important;}

/* ruby
============================================================================================================ */
.ruby {
    position: relative;
}
.ruby:after {
    content: '・';
    position: absolute;
    top: -0.75em;
    left: 0;
    width: 1em;
    letter-spacing: 2px;
}
.ruby02:after {
    content: '・・';
    width: 2em;
}
.ruby03:after {
    content: '・・・';
    width: 3em;
}

/* text-indent
============================================================================================================ */
.ti-01{text-indent: -0.1rem;}
.ti-02{text-indent: -0.2rem;}
.ti-03{text-indent: -0.3rem;}
.ti-04{text-indent: -0.4rem;}
.ti-05{text-indent: -0.5rem;}
.ti-06{text-indent: -0.6rem;}
.ti-07{text-indent: -0.7rem;}
.ti-08{text-indent: -0.8rem;}
.ti-09{text-indent: -0.9rem;}
.ti-10{text-indent: -1rem;}

/* text-writing-mode
============================================================================================================ */

.vwm-rl{
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    letter-spacing: 0;
    font-feature-settings: normal;
    text-orientation: upright;
    -webkit-text-orientation: upright;
}
.vwm-lr{
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    letter-spacing: 0;
    font-feature-settings: normal;
    text-orientation: upright;
    -webkit-text-orientation: upright;
}

/* white-space
============================================================================================================ */
.wsn {
    white-space: nowrap;
}

/* width
============================================================================================================ */
.wauto{
    width: auto !important;
}
.w100p{
    width: 100% !important;
    max-width: 100% !important;
}
.w95p{
    width: 95% !important;
    max-width: 95% !important;
}
.w90p{
    width: 90% !important;
    max-width: 90% !important;
}
.w85p{
    width: 85% !important;
    max-width: 85% !important;
}
.w80p{
    width: 80% !important;
    max-width: 80% !important;
}
.w75p{
    width: 75% !important;
    max-width: 75% !important;
}
.w70p{
    width: 70% !important;
    max-width: 70% !important;
}
.w65p{
    width: 65% !important;
    max-width: 65% !important;
}
.w60p{
    width: 60% !important;
    max-width: 60% !important;
}
.w55p{
    width: 55% !important;
    max-width: 55% !important;
}
.w50p{
    width: 50% !important;
    max-width: 50% !important;
}
.w48p{
    width: 48% !important;
    max-width: 48% !important;
}
.w45p{
    width: 45% !important;
    max-width: 45% !important;
}
.w40p{
    width: 40% !important;
    max-width: 40% !important;
}
.w35p{
    width: 35% !important;
    max-width: 35% !important;
}
.w30p{
    width: 30% !important;
    max-width: 30% !important;
}
.w25p{
    width: 25% !important;
    max-width: 25% !important;
}
.w20p{
    width: 20% !important;
    max-width: 20% !important;
}
.w15p{
    width: 15% !important;
    max-width: 15% !important;
}
.w10p{
    width: 10% !important;
    max-width: 10% !important;
}
.w05p{
    width: 5% !important;
    max-width: 5% !important;
}
.w30{width: 30px !important;}
.w50{width: 50px !important;}
.w60{width: 60px !important;}
.w100{width: 100px !important;}
.w110{width: 110px !important;}
.w120{width: 120px !important;}
.w130{width: 130px !important;}
.w140{width: 140px !important;}
.w150{width: 150px !important;}
.w160{width: 160px !important;}
.w170{width: 170px !important;}
.w180{width: 180px !important;}
.w190{width: 190px !important;}
.w200{width: 200px !important;}
.w210{width: 210px !important;}
.w220{width: 220px !important;}
.w230{width: 230px !important;}
.w240{width: 240px !important;}
.w250{width: 250px !important;}
.w260{width: 260px !important;}
.w270{width: 270px !important;}
.w280{width: 280px !important;}
.w290{width: 290px !important;}
.w300{width: 300px !important;}

@media screen and (max-width: 767px) {
    .sp-wauto{
        width: auto !important;
    }
    .sp-w100p{
        width: 100% !important;
        max-width: 100% !important;
    }
    .sp-w95p{
        width: 95% !important;
        max-width: 95% !important;
    }
    .sp-w90p{
        width: 90% !important;
        max-width: 90% !important;
    }
    .sp-w85p{
        width: 85% !important;
        max-width: 85% !important;
    }
    .sp-w80p{
        width: 80% !important;
        max-width: 80% !important;
    }
    .sp-w75p{
        width: 75% !important;
        max-width: 75% !important;
    }
    .sp-w70p{
        width: 70% !important;
        max-width: 70% !important;
    }
    .sp-w65p{
        width: 65% !important;
        max-width: 65% !important;
    }
    .sp-w60p{
        width: 60% !important;
        max-width: 60% !important;
    }
    .sp-w55p{
        width: 55% !important;
        max-width: 55% !important;
    }
    .sp-w50p{
        width: 50% !important;
        max-width: 50% !important;
    }
    .sp-w48p{
        width: 48% !important;
        max-width: 48% !important;
    }
    .sp-w45p{
        width: 45% !important;
        max-width: 45% !important;
    }
    .sp-w40p{
        width: 40% !important;
        max-width: 40% !important;
    }
    .sp-w35p{
        width: 35% !important;
        max-width: 35% !important;
    }
    .sp-w30p{
        width: 30% !important;
        max-width: 30% !important;
    }
    .sp-w25p{
        width: 25% !important;
        max-width: 25% !important;
    }
    .sp-w20p{
        width: 20% !important;
        max-width: 20% !important;
    }
    .sp-w15p{
        width: 15% !important;
        max-width: 15% !important;
    }
    .sp-w10p{
        width: 10% !important;
        max-width: 10% !important;
    }
    .sp-w05p{
        width: 5% !important;
        max-width: 5% !important;
    }
    .sp-w30{width: 30px !important;}
    .sp-w60{width: 60px !important;}
    .sp-w100{width: 100px !important;}
    .sp-w110{width: 110px !important;}
    .sp-w120{width: 120px !important;}
    .sp-w130{width: 130px !important;}
    .sp-w140{width: 140px !important;}
    .sp-w150{width: 150px !important;}
    .sp-w160{width: 160px !important;}
    .sp-w170{width: 170px !important;}
    .sp-w180{width: 180px !important;}
    .sp-w190{width: 190px !important;}
    .sp-w200{width: 200px !important;}
    .sp-w210{width: 210px !important;}
    .sp-w220{width: 220px !important;}
    .sp-w230{width: 230px !important;}
    .sp-w240{width: 240px !important;}
    .sp-w250{width: 250px !important;}
    .sp-w260{width: 260px !important;}
    .sp-w270{width: 270px !important;}
    .sp-w280{width: 280px !important;}
    .sp-w290{width: 290px !important;}
    .sp-w300{width: 300px !important;}

}

/* max-width
============================================================================================================ */
.mw400{max-width:400px;}

/* height
============================================================================================================ */
.hauto{height: auto !important;}
.h50{height: 50px !important;}
.h60{height: 60px !important;}
.h70{height: 70px !important;}
.h80{height: 80px !important;}
.h90{height: 90px !important;}
.h100{height: 100px !important;}
.h110{height: 110px !important;}
.h120{height: 120px !important;}
.h130{height: 130px !important;}
.h140{height: 140px !important;}
.h150{height: 150px !important;}
.h160{height: 160px !important;}
.h170{height: 170px !important;}
.h180{height: 180px !important;}
.h190{height: 190px !important;}
.h200{height: 200px !important;}
.h400{height: 400px !important;}
.h100p{height: 100% !important;}
.h100vh{height: 100vh !important;}

@media screen and (max-width: 767px) {
    .sp-hauto{height: auto;}
    .sp-h50{height: 50px !important;}
    .sp-h60{height: 60px !important;}
    .sp-h70{height: 70px !important;}
    .sp-h80{height: 80px !important;}
    .sp-h90{height: 90px !important;}
    .sp-h100{height: 100px !important;}
    .sp-h110{height: 110px !important;}
    .sp-h120{height: 120px !important;}
    .sp-h130{height: 130px !important;}
    .sp-h140{height: 140px !important;}
    .sp-h150{height: 150px !important;}
    .sp-h160{height: 160px !important;}
    .sp-h170{height: 170px !important;}
    .sp-h180{height: 180px !important;}
    .sp-h190{height: 190px !important;}
    .sp-h200{height: 200px !important;}
    .sp-h400{height: 400px;}
    .sp-h100p{height: 100%;}
    .sp-h100vh{height: 100vh;}
}

/* separator
============================================================================================================ */
.separator{
    width: 20px;
    height: 1px;
    margin: 1.5em 0;
    display: block;
}

/* overflow
============================================================================================================ */
.ofv {
    overflow: visible;
}
.ofx-hidden {
    overflow-x: hidden;
}
.ofy-hidden {
    overflow-y: hidden;
}

/* round
============================================================================================================ */
.round{border-radius: 500px;}
.round01{border-radius: 30px;}
.sp-no-round{border-radius: none;}

.round05 {
    border-radius: 5px;
    overflow: hidden;
}
.round10 {
    border-radius: 10px;
    overflow: hidden;
}
.round20 {
    border-radius: 20px;
    overflow: hidden;
}
.round30 {
    border-radius: 30px;
    overflow: hidden;
}

/* under line
============================================================================================================ */
.uby {
    position: relative;
    z-index: 1;
}
.uby:before {
    content: '';
    width: 105%;
    height: 15px;
    background-color: #FABE00;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0.5em);
    position: absolute;
    z-index: 2;
}
.uby span {
    position: relative;
    z-index: 3;
}

/* color
============================================================================================================ */
.white01{color: #fff !important;}
.white01 a{color: #fff !important;}
.white01 a:hover{color: #000 !important;}
.black01{color: #000 !important;}
.black01 a{color: #000 !important;}
.black01 a:hover{color: #fff !important;}
.gray01{color: #3C3C3C !important;}
.gray02{color: #5a5a5a !important;}
.gray03{color: #828282 !important;}
.gray04{color: #969696 !important;}
.gray01 a{color: #3C3C3C !important;}
.gray02 a{color: #5a5a5a !important;}
.gray03 a{color: #828282 !important;}
.gray04 a{color: #969696 !important;}
.gray01 a::before{background-color: #3C3C3C !important;}
.gray02 a::before{background-color: #5a5a5a !important;}
.gray03 a::before{background-color: #828282 !important;}
.gray01 a::after{border-color: #3C3C3C !important;}
.gray02 a::after{border-color: #5a5a5a !important;}
.gray03 a::after{border-color: #828282 !important;}

.txt-choco{color: #534741 !important;}

.ocher01 {color: #a38c00 !important;}

.bg-transparent{background-color: transparent !important;}
.bg-white{color: #000;background-color: #fff !important;opacity:0.8;}
.bg-white01{color: #3C3C3C;background-color: #fff !important;}
.bg-white02{color: #3C3C3C;background-color: #fff !important;opacity:0.8;}
.bg-white03{color: #000;background-color: #f5f5f5 !important;}
.bg-white04{color: #646464;background-color: #f5f5f5 !important;}
.bg-white05{color: #000;background-color: #e2e2e2 !important;}
.bg-white06{color: #000;background-color: #fff !important;}
.bg-white07{background-color: #fff !important;}
.bg-white08{color: #000;background-color: #e9eaea !important;}
.bg-white09{color: #000;background-color: #eef0e5 !important;}
.bg-white10{background-color: #fefce9 !important;}
.bg-white11{background-color: #f9edd1 !important;}
.bg-black{color: #fff;background-color: #000 !important;opacity:0.8;}
.bg-black01{color: #fff;background-color: #000 !important;}
.bg-gray{background-color: #ececeb !important;}
.bg-gray01{color: #FFF;background-color: #3C3C3C !important;}
.bg-gray02{color: #FFF;background-color: #5a5a5a !important;}
.bg-gray03{color: #FFF;background-color: #828282 !important;}
.bg-gray04{background-color: #C8C8C8 !important;}
.bg-gray05{background-color: #e6e6e6 !important;}
.bg-gray06{color: #FFF;background-color: #646464 !important;}
.bg-gray07{background-color: #dcdcdc !important;}
.bg-gray08{background-color: #dfe2e9 !important;}
.bg-gray09{background-color: #f5f3f0 !important;}
.bg-gray10{background-color: #4d4d4d !important;}
.bg-choco{color: #fff;background-color: #534741 !important;}
.bg-choco a{color: #fff;}
.bg-choco02{color: #3C1000;background-color: #A59992 !important;}
.bg-choco02 a{color: #3C1000;}
.bg-blue{color: #FFF;background-color: #081e32 !important;}
.bg-gold{color: #081e32;background-color: #c2ab59 !important;}
.bg-gold01{color: #fff; background-color: #d3bc9f !important;}
.bg-yellow{color: #000; background-color: #F9BD00 !important;}
.bg-yellow01{color: #231815; background-color: #fabe00 !important;}
.txt-white{color: #fff !important;}
.txt-black{color: #000 !important;}
.txt-gold{color: #c2ab59 !important;}
.txt-gold01{color: #d3bc9f !important;}
.txt-blue{color: #081e32 !important;}
.txt-dark{color: #231815 !important;}
.indigo{color: #fff;background-color: #081e32 !important;}

section.bg-color{
    padding: 90px 0;
}
section.bg-color + section.bg-img{
    margin-top: 0 !important;
}
section.bg-img + section.bg-color{
    margin-top: 0 !important;
}

@media screen and (max-width: 767px) {
    section.bg-color{
        padding: 45px 0;
    }
}

/* opacity
============================================================================================================ */
.opacity01{opacity: 1;}
.opacity02{opacity: 0.8;}
.opacity03{opacity: 0.5;}
.opacity04{opacity: 0.2;}
.opacity05{opacity: 0;}

/* border
============================================================================================================ */
.b-none{border: none !important;}
.bbb{ /* border bottom black */
    border-bottom: solid 1px #000 !important;
    margin-bottom: 0.5em !important;
    padding-bottom: 0.5em !important;
}
.bbb00{
    border-bottom: solid 1px #000 !important;
}
.bbb01{
    border-bottom: solid 1px #000 !important;
    margin-bottom: 0.25em !important;
    padding-bottom: 5px !important;
}
.bbb02{
    border-bottom: solid 1px #000 !important;
    margin-bottom: 1em !important;
    padding-bottom: 1em !important;
}
.bbb03{
    border-bottom: solid 1px #000 !important;
}
.btb{
    border-top: solid 1px #000 !important;
}
.btb00{
    border-top: solid 1px #000 !important;
}
.btb01{
    border-top: solid 1px #000 !important;
    margin-top: 0.25em !important;
    padding-top: 5px !important;
}
.btb02{
    border-top: solid 1px #000 !important;
    margin-top: 1em !important;
    padding-top: 1em !important;
}
.blb{
    border-left: solid 1px #000 !important;
}
.brb{
    border-right: solid 1px #000 !important;
}
.bbw{
    border-bottom: solid 1px #fff !important;
    margin-bottom: 0.5em !important;
    padding-bottom: 0.5em !important;
}
.bbw00{
    border-bottom: solid 1px #fff !important;
}
.bbw01{
    border-bottom: solid 1px #fff !important;
    margin-bottom: 0.25em !important;
    padding-bottom: 5px !important;
}
.bbw02{
    border-bottom: solid 1px #fff !important;
    margin-bottom: 1em !important;
    padding-bottom: 1em !important;
}
.bbw03{
    border-bottom: solid 1px #fff !important;
}
.b-color-b{
    border-color: #000 !important;
}
.b-color-b01{
    border-color: #646464 !important;
}
.b-box-b{
    border: solid 1px #000;
}
.b-box-b01{
    border: solid 1px #646464;
}
.b-color-w{
    border-color: #fff !important;
}
.b-color-w01{
    border-color: #a0a0a0 !important;
}
.b-box-w{
    border: solid 1px #fff;
}
.b-box-w01{
    border: solid 1px #a0a0a0;
}
.b-box-b-side-only{
    padding: 0 1em;
    border-left: solid 1px;
    border-right: solid 1px;
    border-color: #000;
}
.b-box-w-side-only{
    padding: 0 1em;
    border-left: solid 1px;
    border-right: solid 1px;
    border-color: #fff;
}

.bw01{
    border-width: 1px !important;
}
.bw02{
    border-width: 2px !important;
}

.bbs-dash{
    border-bottom-style: dashed !important;
}
.bbs-dot{
    border-bottom-style: dotted !important;
}
.bbs-double{
    border-bottom-style: double !important;
}
.bbs-groove{
    border-bottom-style: groove !important;
}

@media screen and (max-width: 767px) {
    .sp-b-none{
        border: none !important;
    }
    .sp-bt-none{
        border-top: none !important;
    }
    .sp-bb-none{
        border-bottom: none !important;
    }
    .sp-bl-none{
        border-left: none !important;
    }
    .sp-br-none{
        border-right: none !important;
    }
    .sp-bbb{ /* border bottom black */
        border-bottom: solid 1px #000 !important;
        margin-bottom: 0.5em !important;
        padding-bottom: 0.5em !important;
    }
    .sp-bbb01{
        border-bottom: solid 1px #000 !important;
        margin-bottom: 0.25em !important;
        padding-bottom: 5px !important;
    }
    .sp-bbb02{
        border-bottom: solid 1px #000 !important;
        margin-bottom: 1em !important;
        padding-bottom: 1em !important;
    }
    .sp-bbb03{
        border-bottom: solid 1px #000 !important;
    }
    .sp-btb{
        border-top: solid 1px #000 !important;
    }
    .sp-blb{
        border-left: solid 1px #000 !important;
    }
    .sp-brb{
        border-right: solid 1px #000 !important;
    }
    .sp-bbw{
        border-bottom: solid 1px #fff !important;
        margin-bottom: 0.5em !important;
        padding-bottom: 0.5em !important;
    }
}

a.under-line-link{ word-wrap: break-word;text-decoration: none;}
a.under-line-link:hover{text-decoration: underline;-webkit-transition:all .3s;transition:all .3s;-webkit-transition:all all .3s ease;-moz-transition:all all .3s ease;-ms-transition:all all .3s ease;-o-transition:all all .3s ease;transition:all all .3s ease;}

a.under-line-link2{ word-wrap: break-word;text-decoration: underline;-webkit-transition:all .3s;transition:all .3s;-webkit-transition:all all .3s ease;-moz-transition:all all .3s ease;-ms-transition:all all .3s ease;-o-transition:all all .3s ease;transition:all all .3s ease;}
a.under-line-link2:hover{text-decoration: none;}

/* parts
============================================================================================================ */
/*
.btn {
    background-color: transparent;
    color: transparent;
    text-align: center;
    padding: 0;
    min-width: 130px;
    margin-bottom: 1em;
    box-shadow: none;
    text-transform: none;
    height: 32px;
    line-height: 32px;
}
.btn:hover {
    background-color: transparent;
    color: transparent;
}
.btn a {
    width: 100%;
    display: block;
    padding: 0;
    border: solid 1px;
}
.btn:hover, .btn-large:hover, .btn-small:hover, .btn-floating:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.btn a:hover {
    opacity: 1;
}
.btn.txt-black {
    color: #000 !important;
    border-color: #000;
}
.btn.txt-black a {
    color: #000 !important;
}
.btn.txt-black:hover a {
    color: #fff !important;
    background-color: #000;
    border-color: #000;
}
.btn.txt-white {
    color: #fff !important;
}
.btn.txt-white a {
    color: #fff !important;
}
.btn.txt-white:hover a {
    color: #000 !important;
    background-color: #fff;
    border-color: #fff;
}
*/

.btn01{ /* left to right moving */
    overflow: hidden;
}
.btn01::before{
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    transition: .2s;
}
.btn01.txt-black::before{
    background-color: #000;
}
.btn01.txt-white::before{
    background-color: #fff;
}
.btn01:hover::before{
    left: 0;
}

.btn02 a{
    text-align: center;
    line-height: 40px;
    background-color: #000;
    border: 1px solid #000;
    max-width: 250px;
    height: 40px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
.btn02_02 a {
    line-height: 50px;
    height: 50px;
}
.btn02 a:hover{
    color: #000;
    background: #fff;
    border: 1px solid #000;
    opacity: 1;
}
.btn02 a.next-arrow01:after{
    width: 12px;
    height: 12px;
    right: 7%;
}
.btn02.txt-black a{
    color: #000;
    background-color: #fff;
}
.btn02.txt-white a{
    color: #fff;
    background-color: #000;
}
.btn02.txt-black a:hover{
    color: #fff;
    background-color: #000;
}
.btn02.txt-white a:hover{
    color: #000;
    background-color: #fff;
}
.btn02.hnone a:hover {
    /* hnone : hover none */
    color: inherit;
    background-color: inherit;
}

.btn03 a{
    display: block;
    color: #000;
    background-color:rgba(255,255,255,0.5);
    border: 1px solid #000;
    max-width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    padding: 40px 80px 40px 40px;
}
.btn03 a:hover{
    color: #fff;
    background-color:rgba(0,0,0,1);
    border: 1px solid #000;
    opacity: 1;
}
.btn03 a.next-arrow01:after{
    width: 35px;
    height: 35px;
    right: 7%;
}
.btn03.txt-black a{
    color: #000;
    background-color: #fff;
}
.btn03.txt-white a{
    color: #fff;
    background-color: #000;
}
.btn03.txt-black a:hover{
    color: #fff;
    background-color: #000;
}
.btn03.txt-white a:hover{
    color: #000;
    background-color: #fff;
}


.round-btn a {
    border-radius: 5px;
}
.round-btn10 a {
    border-radius: 10px;
}
.round-btn20 a {
    border-radius: 20px;
}


@media screen and (max-width: 959px) {
    .btn {
        width: 100%;
        display: block;
    }
    .btn a {
        width: 60%;
        margin: 0 auto;
        display: block;
    }
    .btn.white {
        background-color: transparent !important;
    }
    .btn.white a {
        background-color: #fff;
    }
    .btn-left a {
        margin-left: 0;
    }
    .btn-center a {

    }
    .btn-right a {
        margin-right: 0;
    }
}

.small-btn-blue{
    display: inline-block;
    background-color: #081e32 !important;
    border: 1px solid #081e32 !important;
    width: 200px;
    height: 40px !important;
    line-height: 40px !important;
    color: #fff !important;
    text-align: center;
    font-size: 15px;
    transition: all  0.3s ease;
}
.small-btn-blue:hover{
    opacity: 1;
    border: 1px solid #081e32 !important;
    background-color: #fff !important;
    color: #081e32 !important;
}
.small-btn-gold{
    background: #c2ab59 !important;
    border: 1px solid #c2ab59 !important;
    color: #081e32 !important;
    font-size: 15px !important;
    width: 160px;
    height: 40px !important;
    text-align: center;
    line-height: 40px !important;
    display: block;
    transition: all  0.3s ease;
}
.small-btn-gold:hover{
    opacity: 1;
    border: 1px solid #c2ab59 !important;
    background-color: #fff !important;
    color: #c2ab59 !important;
}
.small-btn-gold02{
    border: 1px solid #c2ab59 !important;
    color: #c2ab59 !important;
    font-size: 15px !important;
    width: 160px;
    height: 40px !important;
    text-align: center;
    line-height: 40px !important;
    display: block;
    transition: all  0.3s ease;
}
.small-btn-gold02:hover{
    opacity: 1;
    border: 1px solid #c2ab59 !important;
    background-color: #c2ab59 !important;
    color: #fff !important;
}
.small-round-btn{
    border: 1px solid #000 !important;
    border-radius: 20px;
    color: #000 !important;
    font-size: 14px !important;
    width: 170px;
    height: 40px !important;
    text-align: center;
    line-height: 40px !important;
    display: block;
    transition: all 0.3s ease;
}
.small-round-btn:hover{
    opacity: 1;
    border: 1px solid #000 !important;
    background-color: #000 !important;
    color: #fff !important;
}

.linkBtn{
    top: 0px;
    right: 0px;
    width: 100px;
    height: 100px;
}
.linkBtn p{
    font-size: 12px;
}
.linkBtn + .linkBtn{
    top: 0px;
    right: -120px;
}
.linkBtn01{
    background-color: #f5f5f5;
    color: #646464;
}
.linkBtn01 a{
    color: #646464 !important;
}
.linkBtn02{
    background-color: #646464;
    color: #ffffff;
}
.linkBtn02 a{
    color: #ffffff !important;
}

.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #3C3C3C;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.next-arrow01 {
    position: relative;
    display: block;
}
.next-arrow01:after {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    border-style: solid;
    border-width: 1px 1px 0 0;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) translateX(0%) rotate(45deg);
    -webkit- transform: translateY(-50%) translateX(0%) rotate(45deg);
}
.next-arrow01.fwb:after {
    border-width: 2px 2px 0 0;
}
.next-arrow01.type02:after {
    right: 20px;
}
.next-arrow01.small:after {
    width: 21px;
    height: 21px;
}
.next-arrow01.ex-small:after {
    width: 15px;
    height: 15px;
}
.next-arrow01.border-white:after {
    border-top-color: #fff;
    border-right-color: #fff;
}
.next-arrow01.border-black:after {
    border-top-color: #000;
    border-right-color: #000;
}
.next-arrow02 {
    position: relative;
    display: block;
}
.next-arrow02:before,
.next-arrow02:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-width: 30px 0 30px 15px;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) translateX(0%);
    -webkit- transform: translateY(-50%) translateX(0%);
}
.next-arrow02.fwb:after {
    border-width: 2px 2px 0 0;
}
.next-arrow02.border-white:before {
    right: calc(5% - 2px);
    border-color: transparent transparent transparent #fff;
}
.next-arrow02.border-black:before {
    right: calc(5% - 2px);
    border-color: transparent transparent transparent #000;
}
.next-arrow02.border-white:after {
    right: 5%;
    border-color: transparent transparent transparent #000;
}
.next-arrow02.border-black:after {
    right: 5%;
    border-color: transparent transparent transparent #fff;
}

.more{
    position: relative;
    display: inline-block;
    padding: 0 0 0 65px;
    vertical-align: middle;
    text-decoration: none;
}
.more::before,
.more::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.arrow-btn a{
    position: relative;
}
.arrow-btn::before{
    left: 0;
    width: 40px;
    height: 1px;
    background: #000;
}
.arrow-btn::after{
    left: 30px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow-bottom{
    position: relative;
}
.arrow-bottom::after{
    content: '';
    position: absolute;
    bottom: -35%;
    left: 50%;
    border-bottom: solid 1px #000;
    border-right: solid 1px #000;
    width: 30px;
    height: 30px;
    transform: rotate(45deg) translateX(-50%);
    -webkit-transform: rotate(45deg) translateX(-50%);
    -ms-transform: rotate(45deg) translateX(-50%);
}
.arrow-bottom.fwb::after{
    border-width: 0 2px 2px 0;
}
.arrow-top{
    position: relative;
}
.arrow-top::before{
    content: '';
    position: absolute;
    top: -35%;
    left: 50%;
    border-bottom: solid 1px #000;
    border-right: solid 1px #000;
    width: 30px;
    height: 30px;
    transform: rotate(45deg) translateX(-50%);
    -webkit-transform: rotate(45deg) translateX(-50%);
    -ms-transform: rotate(45deg) translateX(-50%);
}
.arrow-top.fwb::after{
    border-width: 0 2px 2px 0;
}
.cross-bottom{
    position: relative;
    margin-bottom: 140px !important;
}
.cross-bottom::before,
.cross-bottom::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -60px;
    width: 100px;
    height: 1px;
    background-color: #000;
}
.cross-bottom::before {
    -webkit-transform: translate(-50%, 0) rotate(-45deg);
    transform: translate(-50%, 0) rotate(-45deg);
}
.cross-bottom::after {
    -webkit-transform: translate(-50%, 0) rotate(45deg);
    transform: translate(-50%, 0) rotate(45deg);
}

.plus-left{
    position: relative;
}
.plus-left::before,
.plus-left::after{
    position: absolute;
    top: 85px;
    left: -38px;
    content: '';
    display: inline-block;
    width: 26px;
    height: 26px;
    border-top: 2px solid #000;
}
.plus-left::after {
    top: 74px;
    left: -50px;
    transform: rotate(90deg);
}

@media screen and (max-width: 767px) {
    .sp-plus-top{
        position: relative;
        padding-top: 40px;
    }
    .sp-plus-top::before,
    .sp-plus-top::after{
        position: absolute;
        top: 12px;
        left: 50%;
        content: '';
        display: inline-block;
        width: 26px;
        height: 26px;
        border-top: 2px solid #000;
        transform: translate(-50%, 0);
    }
    .sp-plus-top::after{
        top: 0px;
        left: calc(50% - 12px);
        transform: translate(-50%, 0) rotate(90deg);
    }
}

.more-link {text-align:right;font-size:14px;}
.more-link a {margin:1.5em 0;padding-right:90px;display:inline-block;color:#fff;}
.more-link a::before{
    top: 0px;
    right: -70px;
    width: 70px;
    height: 1px;
    background: #fff;
}
.more-link a::after{
    right: -133px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
@-webkit-keyframes sdb {
    0% {
        width: 0;
        right: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 70px;
        right: -70px;
        opacity: 0;
    }
}
@keyframes sdb {
    0% {
        width: 0;
        right: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 70px;
        right: -70px;
        opacity: 0;
    }
}
@-webkit-keyframes sdb2 {
    0% {
        right: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        right: -133px;
        opacity: 0;
    }
}
@keyframes sdb2 {
    0% {
        right: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        right: -133px;
        opacity: 0;
    }
}
.more-link a:hover::before {
    -webkit-animation: sdb 1.5s infinite;
    animation: sdb 1.5s infinite;    
}
.more-link a:hover::after {
    -webkit-animation: sdb2 1.5s infinite;
    animation: sdb2 1.5s infinite;
}
.more-link.border-white a:before {
    background: #fff;
}
.more-link.border-black a:before {
    background: #000;
}
.more-link.border-white a:after {
    border-color: #fff #fff transparent transparent;
}
.more-link.border-black a:after {
    border-color: #000 #000 transparent transparent;
}
.more-link01{}
.more-link01 a{}
.more-link01::after {}
.more-link01:hover {}

.more-link02 {
    position: absolute;
    bottom: 0;
    right: 0;
}
.more-link02 + .more-link02 {
    bottom: 55px;
}
.more-link02 a {
    margin: 0.25em 0.5em;
    padding-left: 1em;
    padding-right: 135px;
    display: inline-block;
    color: #fff;
    width: 320px;
    text-align: left;
}
.more-link02 a::before{
    top: 0px;
    right: -200px;
    width: 70px;
    height: 1px;
    background: #fff;
}
.more-link02 a::after{
    right: -263px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
@-webkit-keyframes sdb02 {
    0% {
        width: 0;
        right: -133px;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 70px;
        right: -200px;
        opacity: 0;
    }
}
@keyframes sdb02 {
    0% {
        width: 0;
        right: -133px;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        width: 70px;
        right: -200px;
        opacity: 0;
    }
}
@-webkit-keyframes sdb2_02 {
    0% {
        right: -133px;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        right: -263px;
        opacity: 0;
    }
}
@keyframes sdb2_02 {
    0% {
        right: -133px;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        right: -263px;
        opacity: 0;
    }
}
.more-link02 a:hover::before {
    -webkit-animation: sdb02 1.5s infinite;
    animation: sdb02 1.5s infinite;    
}
.more-link02 a:hover::after {
    -webkit-animation: sdb2_02 1.5s infinite;
    animation: sdb2_02 1.5s infinite;
}

.more-link03 {text-align: center;}
.more-link03 a{margin: 0;}
.more-link03::after {}
.more-link03:hover {}

.more-link04 {
    text-align: right;
    margin-right: -20px;
}
.more-link04 a{
    margin: 0;
    padding-right: 120px;
}
.more-link04::after {}
.more-link04:hover {}

.more-link05 {
    bottom: 0px;
    right: -70px;
}
.more-link05 a{
    width: 420px;
    text-align: right;
    padding-right: 150px;
}
.more-link05::after {}
.more-link05:hover {}

.btn-gold,
.btn-blue{
    overflow: hidden;
}
.btn-gold::before{
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-color: #c2ab59;
    transition: .2s;
}
.btn-blue::before{
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-color: #081e32;
    transition: .2s;
}
.btn-gold:hover,
.btn-blue:hover{
    color: #fff !important;
}

.btn-gold:hover::before,
.btn-blue:hover::before{
    left: 0;
}

.side-nav p{
    text-align: center;
    font-weight: 500;
    color: #646464;
    line-height: 100px;
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(0%, -50%) rotate(-90deg);;
    -webkit-transform: translate(0%, -50%) rotate(-90deg);;
    -ms-transform: translate(0%, -50%) rotate(-90deg);;
}

.side-nav p span{
    position:relative;
}

.side-nav p span::before{
    content: "";
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #646464;
    position: absolute;
    bottom: 20%;
    left: -60px;
}

.totop {
    width: 50px;
    position: fixed;
    bottom: 50px;
    right: 50px;
}

/* icon
============================================================================================================ */
.qa-icon {
    line-height: 54px;
}
.qa-icon:before {
    content: 'Q';
    width: 54px;
    height: 54px;
    background-color: #4d4d4d;
    color: #fff;
    border-radius: 100px;
    font-size: 28px;
    display: inline-block;
    margin-right: 1em;
    margin-left: 1em;
    text-align: center;
    position: relative;
    top: 5px;
}

/* pager
============================================================================================================ */
.pager {
    position: relative;
    height: 100px;
}
.pagination {
    width: auto;
}
.pagination li a,
.pagination li span {
    color: #646464;
    display: inline-block;
    font-size: 1rem;
    padding: 0 5px;
    line-height: 30px;
}


/* scroll point
============================================================================================================ */
.scroll-point{
    position: absolute;
    bottom: 33px;
    left: calc(50% - 8px);
    width: 16px;
    height: 26px;
    border: solid 1px #FFF;
    border-radius: 8px;
    z-index: 99;
}
.scroll-point div{
    position: absolute;
    top: 4px;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    background-color: #FFF;
    border-radius: 100%;
    animation-name: point-anime;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.25);
    animation-direction: normal;
}
@keyframes point-anime{
    0%{top: 4px;}
    33%{top: 14px;}
    70%{top: 14px;}
    80%{top: 14px;opacity: 0;}
    90%{top: 4px;opacity: 0;}
    100%{top: 4px;opacity: 1;}
}

/* moving only */
.scroll-point00{
    position: absolute;
    bottom: 33px;
    left: calc(50% - 7px);
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    z-index: 99;
}
.scroll-point00 div{
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    background-color: #FFF;
    animation-name: point-anime00;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.25);
    animation-direction: normal;
}
@keyframes point-anime00{
    0%{top: 4px;}
    50%{top: 20px;}
    70%{top: 20px;}
    80%{top: 20px;opacity: 0;}
    90%{top: 4px;opacity: 0;}
    100%{top: 4px;opacity: 1;}
}
.scroll-point00 div::after{
    border-color: #fff;
    width: 50px;
    height: 50px;
}

/* updown scroll   position left */
.scroll-point01{
    position: absolute;
    bottom: 33px;
    left: 12px;
    width: 50px;
    height: 170px;
    z-index: 99;
}
.scroll-point01:before{
    content: 'Scroll';
    font-size: 10px;
    position: absolute;
    top: 0;
    left: calc(50% - 8px);
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.scroll-point01 div{
    position: absolute;
    top: 40px;
    left: calc(50% - 2px);
    width: 1px;
    height: 130px;
    background-color: #000;
    animation-name: point-anime01;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.25);
    animation-direction: normal;
}
.youtube{
    position: absolute;
    bottom: 2%;
    right: 1.25%;
    z-index: 100;
}
@keyframes point-anime01{
    0%{height: 4px;}
    70%{height: 130px;}
    80%{height: 130px;opacity: 0;}
    90%{height: 4px;opacity: 0;}
    100%{height: 4px;opacity: 1;}
}

/* updown scroll  position center */
.scroll-point02{
    position: absolute;
    bottom: 50px;
    left: calc(50% - 7px);
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    z-index: 99;
}
.scroll-point02:before{
    content: 'Scroll';
    font-size: 10px;
    position: absolute;
    top: 0;
    left: 50%;
    color: #fff;
}
.scroll-point02 div{
    position: absolute;
    top: 20px;
    left: calc(50% + 14px);
    width: 1px;
    height: 30px;
    background-color: #fff;
    animation-name: point-anime02;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.25);
    animation-direction: normal;
}
@keyframes point-anime02{
    0%{height: 4px;}
    70%{height: 30px;}
    80%{height: 30px;opacity: 0;}
    90%{height: 4px;opacity: 0;}
    100%{height: 4px;opacity: 1;}
}

/* youtube link
============================================================================================================ */
.youtube{
    position: absolute;
    bottom: 2%;
    right: 1.25%;
    z-index: 100;
}

.youtube_btn {
    cursor: pointer;
    width: 95px;
    height: 31px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: none;
    border: 1px solid;
    padding: .3em 1em;
    margin-left: 20px;
}

/* layout
============================================================================================================ */
.inner{
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}
.inner2{
    width: 100%;
    max-width: 1290px;
    margin: 0 auto;
}
.inner3{
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}
.inner-1200{max-width: 1200px;margin: 0 auto;}
.left00{
    width: 50%;
}
.left01{
    width: calc(100% - 240px);
}
.left02{
    width: calc(100% - 400px);
}
.left03{
    width: 200px;
    margin-right: 40px;
}
.fd-reverse .left03{
    margin-left: 40px;
    margin-right: 0px;
}
.left04{
    width: 140px;
    margin-right: 20px;
}
.fd-reverse .left04{
    margin-left: 20px;
    margin-right: 0px;
}
.left48p{
    width: 48%;
}
.left50p{
    width: 50%;
}
.right00{
    width: 50%;
}
.right01{
    width: 200px;
    margin-left: 40px;
}
.fd-reverse .right01{
    margin-left: 0px;
    margin-right: 40px;
}
.right02{
    width: 200px;
    margin-left: 200px;
}
.fd-reverse .right01{
    margin-left: 0px;
    margin-right: 200px;
}
.right03{
    width: calc(100% - 240px);
}
.right04{
    width: calc(100% - 160px);
}
.right05{
    width: calc(100% - 300px);
}
.right48p{
    width: 48%;
}
.right50p{
    width: 50%;
}

/*== 1200px以下用の記述
====================================================================*/
@media screen and (max-width: 1199px) {
    .inner-1200{width: 95%;}  
}

/*== 959px以下用の記述
====================================================================*/
@media screen and (max-width: 959px){
    .inner-1200{
        width: 90%;
    }
}

@media screen and (max-width: 767px) {
    .left00{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .left01{
        width: calc(100% - 240px);
    }
    .left02{
        width: calc(100% - 400px);
    }
    .left03{
        width: 200px;
        margin-right: 40px;
    }
    .left04{
        width: 140px;
        margin-right: 20px;
    }
    .right00{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .right01{
        width: 200px;
        margin-left: 40px;
    }
    .right02{
        width: 200px;
        margin-left: 200px;
    }
    .right03{
        width: calc(100% - 240px);
    }
    .right04{
        width: calc(100% - 160px);
    }
    .right05{
        width: calc(100% - 300px);
    }

}


.txt{
    font-size: 14px;
    text-align: justify;
    line-height: 1.5;
    letter-spacing: 0.05em;
    overflow-wrap: break-word;
}
.bgImg {
    position: relative;
}
.bgImg > .leftTxt {
    position: absolute;
    bottom: 1em;
    left: 1em;
}
.bgImg > .rightTxt {
    position: absolute;
    bottom: 1em;
    right: 1em;
}
a.wink:hover {opacity: 0.8;}

.line-text {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
}
.line-text:before{
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #646464;
    margin:0 45px 0 0;
}
.line-text:after{
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #646464;
    margin:0 0 0 45px;
}

/* block
============================================================================================================ */
.block {
    display: block !important;
}
.iblock {
    display: inline-block !important;
}
.flex{
    display: -webkit-box;  /* この辺が */
    display: -webkit-flex; /* Android2.3~とか */
    display: -ms-flexbox; /* IE9~用 */
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.iflex{
    display: inline-flex !important;
}
.flex-start {
    justify-content: flex-start !important;
}
.flex-end {
    justify-content: flex-end !important;
}
.space-between {
    justify-content: space-between !important;
}
.space-around {
    justify-content: space-around !important;
}
.justify-center {
    justify-content: center !important;
}
.fd-initial {
    flex-direction: initial !important;
}
.fd-reverse{
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.aif-end {
    align-items: flex-end;
}
.flex.mono .box{width: 100%;}
.flex.di .box{width: 48.083333%;}
.flex.di.narrow .box{width: calc((100% - 2px) / 2);margin-bottom:1px;}
.flex.di.narrow01 .box{width: calc((100% - 10px) / 2);margin-bottom:10px;}
.flex.di.narrow02 .box{width: calc((100% - 20px) / 2);margin-bottom:20px;}
.flex.di.wide .box{width: calc((100% - 50px) / 2);margin-bottom:30px;}
.flex.di.e-wide .box{width: calc((100% - 100px) / 2);margin-bottom:30px;}
.flex.di .box:nth-last-child(-n+2){margin-bottom:0;}
.flex.di.justify-center .box{margin-left: 50px;}
.flex.di.justify-center .box:nth-child(2n+1){margin-left: 0px;}
.flex.tri .box{width: 32.083333%;margin-bottom:20px;}
.flex.tri.narrow .box{width: calc((100% - 2px) / 3);margin-bottom:1px;}
.flex.tri.normal .box{width: calc((100% - 2px) / 3);margin-bottom:1px;padding: 0 10px;}
.flex.tri.wide .box{width: calc((100% - 100px) / 3);margin-bottom:40px;}
.flex.tri.e-wide{width: calc(100% - 100px) !important;margin:0 auto;}
.flex.tri.e-wide .box{width: calc((100% - 100px) / 3);margin-bottom:40px;}
.flex.tri .box:nth-last-child(-n+3){margin-bottom:0;}
.flex.tri.justify-center .box{margin-left: 50px;}
.flex.tri.justify-center .box:nth-child(3n+1){margin-left: 0px;}
.flex.tetra .box{width: 24.083333%;}
.flex.tetra.narrow .box{width: calc((100% - 3px) / 4);margin-bottom:1px;}
.flex.tetra.wide .box{width: calc((100% - 100px) / 4);margin-bottom:30px;}
.flex.tetra.e-wide .box{width: calc((100% - 200px) / 4);margin-bottom:30px;}
.flex.tetra .box:nth-last-child(-n+4){margin-bottom:0;}
.flex.tetra.justify-center .box{margin-left: 25px;}
.flex.tetra.justify-center .box:nth-child(4n+1){margin-left: 0px;}
.flex.penta .box{width: 19.083333%;}
.flex.penta.narrow .box{width: calc((100% - 4px) / 5);margin-bottom:1px;}
.flex.penta.wide .box{width: calc((100% - 100px) / 5);margin-bottom:20px;}
.flex.penta.e-wide .box{width: calc((100% - 200px) / 5);margin-bottom:20px;}
.flex.penta .box:nth-last-child(-n+5){margin-bottom:0;}
.flex.penta.justify-center .box{margin-left: 20px;}
.flex.penta.justify-center .box:nth-child(5n+1){margin-left: 0px;}

/* 960px以下用の記述
====================================================================================================*/
@media screen and (max-width: 959px) {
    .flex.tri.e-wide{width: 100% !important;margin:0 auto;}
}

.box-wrapper {
    position: relative;
    width: 100%;
    height: auto !important;
}
.box-wrapper:before {
    content:"";
    display: block;
    padding-top: 100%; /* 高さを幅の100%に固定 */
}
.box-wrapper50:before {
    content:"";
    display: block;
    padding-top: 50%; /* 高さを幅の100%に固定 */
}
.box-wrapper > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.nobr br{display:none;}
.center-flex{
    display: -webkit-box;  /* この辺が */
    display: -webkit-flex; /* Android2.3~とか */
    display: -ms-flexbox; /* IE9~用 */
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.vmiddle-flex{
    display: -webkit-box;  /* この辺が */
    display: -webkit-flex; /* Android2.3~とか */
    display: -ms-flexbox; /* IE9~用 */
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.bottom-flex{
    display: -webkit-box;  /* この辺が */
    display: -webkit-flex; /* Android2.3~とか */
    display: -ms-flexbox; /* IE9~用 */
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: flex-end;
    -webkit-align-items: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}
.static{position: static;}
.rel, .relative{position: relative;}
.abs, .absolute{position: absolute;}
.fixed{position: fixed !important;}
.center-abs{
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto !important;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 100;
}
.center-abs2{
    position: absolute;
    left: 50%;
    right: auto !important;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    z-index: 100;
}
.vmiddle-abs{
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    -webkit-transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
    z-index: 100;
}
.top-abs{
    position: absolute;
    top: 0;
}
.bottom-abs{
    position: absolute;
    bottom: 0;
}
.left-abs{
    position: absolute;
    left: 0;
}
.right-abs{
    position: absolute;
    right: 0;
}
.overtext {
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.03em;
}

.zi-999 {
    z-index: 999;
}

/* 見出し 強調
============================================================================================================ */

/* スラッシュで囲む */
.slash {
    position: relative;
    display: inline-block;
    padding: 0 2.5em;
}
.slash:before {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 44px;
    height: 2px;
    background-color: black;
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.slash:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 44px;
    height: 2px;
    background-color: black;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.slash:before {
    left: 10px;
}
.slash:after {
    right: 10px;
}

/* 両端に線を伸ばす (.extend-line-both) */
.e-line-b {
    position: relative;
    display: flex;
    align-items: center;
}
.e-line-b:before, .e-line-b:after {
    content: '';
    flex-grow: 1;
    height: 1px;
    display: block;
    background-color: black;
}
.e-line-b:before {
    margin-right: 1em;
}
.e-line-b:after {
    margin-left: 1em;
}

.e-line-b01 {
    position: relative;
    display: inline-block;
    padding: 0 55px;
}
.e-line-b01:before, .e-line-b01:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: black;
}
.e-line-b01:before {
    left:0;
}
.e-line-b01:after {
    right: 0;
}

/* 960px以下用の記述
====================================================================================================*/
@media screen and (max-width: 959px) {
    .e-line-b:before {
        margin-right: 0.25em;
    }
    .e-line-b:after {
        margin-left: 0.25em;
    }
}

/* fadein fadeout
============================================================================================================ */
.fadein {
    animation: fadeIn 10s ease 0s 1 normal;
    -webkit-animation: fadeIn 10s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    20% {opacity: 0}
    60% {opacity: 1}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    20% {opacity: 0}
    60% {opacity: 1}
    100% {opacity: 1}
}

.mobile .youtube.fadein {
    animation: fadeIn2 10s ease 0s 1 normal;
    -webkit-animation: fadeIn2 10s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    50% {opacity: 0}
    100% {opacity: 1}
}

.fadeout {
    animation: fadeOut 5s ease 0s 1 normal;
    -webkit-animation: fadeOut 5s ease 0s 1 normal;
}

@keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}

@-webkit-keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}

/* ホバーアクション　画像　ズームアップ
============================================================================================================ */

.zoomup{
    display: block;
    margin: 0 auto;
    overflow: hidden;
    cursor: pointer; 
}
.zoomup img{
    width: 100%;
    transition-duration: 0.5s;
    transition: unset;
}
.zoomup:hover img{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
a:hover.zoomup{
    opacity: 0.8;
}

/* ホバーアクション　文字間　広がる
============================================================================================================ */

a.hover-txt01{
    transition: .3s;
}
a:hover.hover-txt01{
    letter-spacing: .3rem;
}

/* ホバーアクション　バウンド
============================================================================================================ */

.hover-bound:hover{
    animation: hboundaction .3s ease infinite alternate;
}

@keyframes hboundaction {
    0% {transform: translateY(0px);}
    100% {transform: translateY(-10px);}
}

/* 中心から丸枠が表示
============================================================================================================ */

a.hover-roundbox {
    position: relative;
    display: block;
    padding-bottom: 20px;
}
a.hover-roundbox::after {
    content: '';
    background: transparent;
    border-radius: 100%;
    display: block;
    height: 0;
    left: 50%;
    position: absolute;
    bottom: 0px;
    -webkit-transition: width 0.5s, height 0.5s;
    transition: width 0.5s, height 0.5s;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 0;
}

a.hover-roundbox:hover::after {
    border: solid 1px #000;
    height: 100px;
    width: 100px;
    bottom: 0;
}

/* 下線・横線とくっつくように動く
例）
<p class="hover-push">
<a href="#">sample</a>
</p>
============================================================================================================ */

.hover-push a {
    position: absolute;
    z-index: 1;
    color: #000;
    box-sizing: border-box;
    border: 1px solid #000;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
    overflow: visible;
    background: none;
}

.hover-push a:before {
    content: "";
    width: 200px;
    height: 1px;
    position: absolute;
    border-bottom: 1px solid #000;
    bottom: -10px;
    left: 8px;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
}

.hover-push a:after {
    content: "";
    width: 1px;
    height: 100px;
    position: absolute;
    border-right: 1px solid #000;
    bottom: -10px;
    right: -10px;
    transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
}

.hover-push a:hover {
    margin: 6px 0 0 6px;
}

.hover-push a:hover:before {
    bottom: -1px;
    left: -1px;
}

.hover-push a:hover:after {
    bottom: -1px;
    right: -1px;
}

/* 4つ角から線が伸びる
例）
<p class="hover-lineextend">
<a href="#">sample<span class="line"></span></a>
</p>
============================================================================================================ */

.hover-lineextend a:hover:before,
.hover-lineextend a:hover:after {
    width: 100%;
}

.hover-lineextend a:hover .line:before,
.hover-lineextend a:hover .line:after {
    height: 100%;
}

.hover-lineextend a:before {
    background-color: #97ca65;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    bottom: 0;
    height: 10px;
    right: 0;
    width: 0;
}

.hover-lineextend a:after {
    background-color: #97ca65;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    height: 10px;
    left: 0;
    top: 0;
    width: 0;
}

.hover-lineextend a .line:before {
    background-color: #97ca65;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    height: 0;
    right: 0;
    top: 0;
    width: 10px;
}

.hover-lineextend a .line:after {
    background-color: #97ca65;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    bottom: 0;
    height: 0;
    left: 0;
    width: 10px;
}

/* 斜めのストライプ状の背景
============================================================================================================ */
.bg-stripe {
    background-image: linear-gradient(
        -45deg,
        #ffffff 25%,
        #f5f3f0 25%,
        #f5f3f0 50%,
        #ffffff 50%,
        #ffffff 75%,
        #f5f3f0 75%,
        #f5f3f0
    ) !important;
    background-size: 10px 10px !important;
}
.bg-stripe.pallax {
    background-attachment: fixed;
}


/* drop shadow
============================================================================================================ */
.dropshadow {
    -webkit-filter:drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
    -moz-filter:drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
    -ms-filter:drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
    filter:drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.75));
}
.dropshadow01 {
    -webkit-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
    -moz-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
    -ms-filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
    filter:drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
}


/* parallax background image
============================================================================================================ */
.parallax{
    min-height: 300px;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;    
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; /* 背景画像をフルスクリーンにフィットさせます */
}

/* mobile bugfix */
@media screen and (max-width: 575px) {
    .parallax {
        background-attachment: unset;
    }
    .parallax::before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        -webkit-transform: translate3d(0, 0, -1px);
        transform: translate3d(0, 0, -1px);
        width: 100%;
        min-height: 100%;
        -webkit-background-size: cover;
        background-size: cover;
        z-index: -1;
    }
}

/* background wave animation
============================================================================================================ */
.wave01_yellow{
    clear: both;
    background-image: url(../images/bg_wave01_yellow.png), url(../images/bg_wave02_yellow.png);
    background-position: 0 0, 0 bottom;
    background-repeat: repeat-x, repeat-x;
}

.wave01_yellow_up{
    clear: both;
    background-image: url(../images/bg_wave01_yellow.png);
    background-position: 0 0, 0 top;
    background-repeat: repeat-x, repeat-x;
}

.wave01_yellow_down{
    clear: both;
    background-image: url(../images/bg_wave02_yellow.png);
    background-position: 0 bottom, 0 0;
    background-repeat: repeat-x, repeat-x;
}

.wave01_gray{
    clear: both;
    background-image: url(../images/bg_wave01_gray.png), url(../images/bg_wave02_gray.png);
    background-position: 0 0, 0 bottom;
    background-repeat: repeat-x, repeat-x;
}

.wave01_gray_up{
    clear: both;
    background-image: url(../images/bg_wave01_gray.png);
    background-position: 0 0, 0 top;
    background-repeat: repeat-x, repeat-x;
}

.wave01_gray_down{
    clear: both;
    background-image: url(../images/bg_wave02_gray.png);
    background-position: 0 bottom, 0 0;
    background-repeat: repeat-x, repeat-x;
}

.wave01_yellow.anime,
.wave01_yellow_up.anime,
.wave01_gray.anime,
.wave01_gray_up.anime {
    -webkit-animation: anime_wave01 6.6s linear 0s infinite normal;
    animation: anime_wave01 6.6s linear 0s infinite normal;
}

.wave01_yellow_down.anime,
.wave01_gray_down.anime {
    -webkit-animation: anime_wave01_down 6.6s linear 0s infinite normal;
    animation: anime_wave01_down 6.6s linear 0s infinite normal;
}


@-webkit-keyframes anime_wave01 {
	0%   { background-position: 0 0, 0 bottom;}
	100% { background-position: 1200px 0, 1200px bottom;}
}
@keyframes anime_wave01 {
	0%   { background-position: 0 0, 0 bottom;}
	100% { background-position: 1200px 0, 1200px bottom;}
}
@-webkit-keyframes anime_wave01_down {
	0%   { background-position: 0 bottom;}
	100% { background-position: 1200px bottom;}
}
@keyframes anime_wave01_down {
	0%   { background-position: 0 bottom;}
	100% { background-position: 1200px bottom;}
}
@media (max-width: 1099px) {
	.wave01_yellow.anime,
    .wave01_yellow_up.anime,
    .wave01_gray.anime,
    .wave01_gray_up.anime {
		background-size: 768px auto, 768px auto;
	}
    .wave01_yellow_down.anime,
    .wave01_gray_down.anime {
		background-size: 768px auto;
	}
	@-webkit-keyframes anime_wave01 {
		0%   { background-position: 0 0, 0 bottom;}
		100% { background-position: 768px 0, 768px bottom;}
	}
	@keyframes anime_wave01 {
		0%   { background-position: 0 0, 0 bottom;}
		100% { background-position: 768px 0, 768px bottom;}
	}
    @-webkit-keyframes anime_wave01_down {
		0%   { background-position: 0 bottom;}
		100% { background-position: 768px bottom;}
	}
	@keyframes anime_wave01_down {
		0%   { background-position: 0 bottom;}
		100% { background-position: 768px bottom;}
	}
}
@media (max-width: 767px) {
	.wave01_yellow.anime,
    .wave01_yellow_up.anime,
    .wave01_gray.anime,
    .wave01_gray_up.anime {
		background-size: 375px auto, 375px auto;
	}
    .wave01_yellow_down.anime,
    .wave01_gray_down.anime {
		background-size: 375px auto;
	}
	@-webkit-keyframes anime_wave01 {
		0%   { background-position: 0 0, 0 bottom;}
		100% { background-position: 375px 0, 375px bottom;}
	}
	@keyframes anime_wave01 {
		0%   { background-position: 0 0, 0 bottom;}
		100% { background-position: 375px 0, 375px bottom;}
	}
    @-webkit-keyframes anime_wave01_down {
		0%   { background-position: 0 bottom;}
		100% { background-position: 375px bottom;}
	}
	@keyframes anime_wave01_down {
		0%   { background-position: 0 bottom;}
		100% { background-position: 375px bottom;}
	}
}

/* materialize reset
============================================================================================================ */
.row{
    margin-bottom: 50px;
}
.row:last-child{
    margin-bottom: 0;
}
.row .col{padding:0;}
.row .col.gap{padding:0 .5rem}
.row .col.gap:first-child{padding-left:0;padding-right:1rem;}
.row .col.gap:last-child{padding-left:1rem;padding-right:0}
.col .row {
    margin: 0;
}

.slider {
    height: auto;
}
.section {
    padding: 0;
}

pre{
    font-family: inherit;
    margin: 0;
}
pre[data-name=preCode] {
    padding: 36px;
    margin-top: 36px;
    margin-bottom: 36px;
    font-family: note monospace,SFMono-Regular,Consolas,Menlo,Courier,monospace;
    line-height: 18px;
    color: #fff;
    white-space: pre-wrap;
    background-color: #282c34;
    font-size: 12px;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }



/* トップページ
====================================================================================================*/
/* 1200px以下用の記述
====================================================================================================*/
@media screen and (max-width: 1199px) {
    .inner2{width: 95%;}
    .inner3{width: 95%;}
    .left02{
        width: calc(100% - 240px);
    }
    .right02{
        width: 200px;
        margin-left: 40px;
    }    
}/* 1200px以下用の記述 */
/* 960px以下用の記述
====================================================================================================*/
@media screen and (max-width: 959px) {
    /*-- 基本
    --------------------------------------------------------------------*/
    main{padding-bottom: 0px;}
    .inner, .inner2, .inner3{width: 85%;}
    .inner .inner{width: 100%;}
    .spbr{display: block;}
    .spbr br{
        display: none;
    }
/*
    .spbr br:after {
        margin-right: -.333em;
        content:"";
    }
*/


    .pc { display: none !important; }
    .sp { display: block !important; }
    .left01, .left02, .left03, .left04, .left05{
        width: 100%;
    }
    .right01, .right02, .right03, .right04, .right05{
        width: 100%;
        margin-left: 0;
    }

    .pbox {padding: 5px 10px;}
    .pbox00 {padding: 1% 5%;}
    .pbox01 {padding: 10px;}
    .pbox02 {padding: 20px;}
    .pbox03 {padding: 20px;}
    .pbox04 {padding: 20px;}
    .pbox05 {padding: 30px;}
    .pbox100 {padding: 100px;}
    
    .sp-no-round{border-radius: 0;}
    
    .sp-next-arrow01{
        position: relative;
        display: block;
    }
    .sp-next-arrow01:after {
        content: "";
        display: block;
        width: 35px;
        height: 35px;
        border-style: solid;
        border-width: 1px 1px 0 0;
        position: absolute;
        top: 50%;
        right: 5%;
        transform: translateY(-50%) translateX(0%) rotate(45deg);
        -webkit- transform: translateY(-50%) translateX(0%) rotate(45deg);
    }
    .flex.sp-di .box{width: 48.083333% !important;}
    .flex.sp-di.narrow .box{width: calc((100% - 2px) / 2) !important;margin-bottom:1px !important;}
    .flex.sp-di.narrow01 .box{width: calc((100% - 10px) / 2) !important;margin-bottom:10px !important;}
    .flex.sp-di.narrow02 .box{width: calc((100% - 20px) / 2) !important;margin-bottom:20px !important;}

    .qa-icon {
        line-height: 30px;
    }
    .qa-icon:before {
        width: 30px;
        height: 30px;
        font-size: 18px;
        margin: 0 0.5em;
        top: 2px;
    }

}/* 960px以下用の記述 */
/* 768px以下用の記述
====================================================================================================*/
@media screen and (max-width: 767px) {
    html{
        overflow-x: hidden;
    }
}/* 768px以下用の記述 */

/* 480px以下用の記述
====================================================================================================*/
@media screen and (max-width: 479px) {
    .flex{display: block;}
    .flex.di .box{width: 100%;margin-left: auto;margin-right: auto;}
    .flex.di.narrow .box{width: 100%;margin-left: auto;margin-right: auto;}
    .flex.di.narrow01 .box{width: 100%;margin-left: auto;margin-right: auto;}
    .flex.di.narrow02 .box{width: 100%;margin-left: auto;margin-right: auto;}
    .flex.di.wide .box{width: calc((100% - 50px) / 2);margin-bottom:10px;}
    .flex.di.justify-center .box{margin-left: 0px;}
    .flex.tri .box{width: 100%;max-width: 295px;margin-left: auto;margin-right: auto;}
    .flex.tri.narrow .box{width: 100%;max-width: 295px;margin-left: auto;margin-right: auto;}
    .flex.tri.normal .box{width: 100%;max-width: 295px;margin-left: auto;margin-right: auto;}
    .flex.tri.wide .box{width: 100%;max-width: 295px;margin-left: auto;margin-right: auto;}
    .flex.tri.justify-center .box{margin-left: 0px;}
    .flex.tetra{display: flex;}
    .flex.tetra .box{width: 47.5%;max-width: 295px;margin-right: 5%;}
    .flex.tetra .box:nth-child(even){margin-right: 0;}
    .flex.tetra.narrow .box{width: calc((100% - 5%) / 2);margin-bottom:5%;}
    .flex.tetra.wide .box{width: calc((100% - 10%) / 2);margin-bottom:5%;}
    .flex.tetra.justify-center .box{margin-left: 5%;}
    .flex.tetra.justify-center .box:nth-child(2n+1){margin-left: 0;}
    .flex.penta{display: flex;}
    .flex.penta .box{width: 32.083333%;}
    .flex.penta.narrow .box{width: calc((100% - 4px) / 3);margin-bottom:1px;}
    .flex.penta.wide .box{width: calc((100% - 50px) / 3);margin-bottom:10px;}
    .flex.penta.justify-center .box{margin-left: calc(50px / 3);}
    .flex.penta.justify-center .box:nth-child(3n+1){margin-left: 0;}

    .sp-block {
        display: block !important;
    }
    .sp-iblock {
        display: inline-block !important;
    }
    .sp-flex{display: flex !important;}
    .sp-flex.sp-reverse{flex-direction: column-reverse;}
    .sp-flex.di .box{width: 48.083333%;}
    .sp-flex.di.narrow .box{width: calc((100% - 2px) / 2);margin-bottom:1px;}
    .sp-flex.di.narrow01 .box{width: calc((100% - 10px) / 2);margin-bottom:10px;}
    .sp-flex.di.narrow02 .box{width: calc((100% - 20px) / 2);margin-bottom:20px;}
    .sp-flex.tri .box{width: 32.083333%;margin-bottom:20px;}
    .sp-flex.tri.narrow .box{width: calc((100% - 2px) / 3);margin-bottom:1px;}
    .sp-flex.tri.normal .box{width: calc((100% - 2px) / 3);margin-bottom:1px;padding:0 10px;}
    .sp-flex.tetra .box{width: 24.083333%;}
    .sp-flex.tetra .box:nth-child{margin: 0;}
    .sp-flex.tetra.narrow .box{width: calc((100% - 3px) / 4);margin-bottom:1px;}
    .sp-flex.penta .box{width: 19.083333%;}
    .sp-flex.penta.narrow .box{width: calc((100% - 4px) / 5);margin-bottom:1px;}
}/* 480px以下用の記述 */