@charset "UTF-8";
/* ######################################################################################

　FullScreenMenu

###################################################################################### */

/* ====================================================
  設定
==================================================== */

/* スクロール時のヘッダ背景
-------------------------------------*/
.g-header.is-active {background: #F9F9F8;}


/* ヘッダサイズ
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-header {min-width: 1200px; height: 96px;}
}
@media screen and (max-width: 767px){
    .g-header {min-width: 320px; height: 55px;}
}


/* ロゴ位置
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-header__logo {top: 25px; left: 50px;}
}
@media screen and (max-width: 767px){
    .g-header__logo {top: 7px; left: 15px;}
}


/* ロゴサイズ
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-header__logo a {width:110px; height:40px;}
}
@media screen and (max-width: 767px){
    .g-header__logo a {width: 66px; height:40px;}
}


/* ヘッダナビサイズ
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-header__nav__list .item {width: auto; height:100%;}
}
@media screen and (max-width: 767px){
    .g-header__nav__list .item {width: 58px; height: 55px;}
}


/* ヘッダナビカラー
-------------------------------------*/
/*
.g-header__nav__list .item--link:nth-of-type(1) a {background: rgba(0,255,0,0.2);}
.g-header__nav__list .item--link:nth-of-type(2) a {background: rgba(0,255,0,0.3);}
.g-header__nav__list .item--link:nth-of-type(3) a {background: rgba(0,255,0,0.4);}
.g-header__nav__list .item--link:nth-of-type(4) a {background: rgba(0,255,0,0.5);}
.g-header__nav__list .item--link:nth-of-type(5) a {background: rgba(0,255,0,0.6);}
.g-header__nav__list .item--link:nth-of-type(6) a {background: rgba(0,255,0,0.7);}
.g-header__nav__list .item--link:nth-of-type(7) a {background: rgba(0,255,0,0.8);}
.g-header__nav__list .item--link:nth-of-type(8) a {background: rgba(0,255,0,0.9);}
*/

/* ≡　カラー
-------------------------------------*/
/*
.g-header__nav__list .item--menu.js-nav-trigger a {background: rgba(255,0,0,0.2);}
.g-header__nav__list .item--menu.js-nav-trigger.is-active a {background: #f2f2f0;}
*/

/* ≡　サイズ
-------------------------------------*/
@media print, screen and (min-width: 768px) {
.g-header__nav__list .item--menu .toggle {width: 27px; height: 30px;}
}
@media screen and (max-width: 767px){
.g-header__nav__list .item--menu .toggle {width: 16px; height: 16px;}
}


/* ≡　位置調整
-------------------------------------
@media print, screen and (min-width: 768px) {
    .g-header__nav__list .item--menu .toggle span:nth-child(1) {top: 5px;}
    .g-header__nav__list .item--menu .toggle span:nth-child(3) {bottom: 5px;}
}
@media screen and (max-width: 767px){
    .g-header__nav__list .item--menu .toggle span:nth-child(1) {top: 1px;}
    .g-header__nav__list .item--menu .toggle span:nth-child(3) {bottom: 1px;}
}
*/


/* overlay カラー
-------------------------------------*/
.g-nav__layer {
    background: #1f1f1f;
    opacity: 0.3;
}

/* outer：ナビ範囲カラー
-------------------------------------*/
.g-nav__outer {background: #fff;}

/* outer：ナビ範囲サイズ
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-nav__outer {
        right: -20px;
        min-width: 910px;
        width: calc(47.2% + 20px);
    }
}
@media screen and (max-width: 767px){
    .g-nav__outer {width: 100%;}
}

/* inner：ナビ範囲上下余白
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-nav__inner {padding: 100px 0 100px; max-width: 100%;}
}
@media screen and (max-width: 767px){
    .g-nav__inner {padding: 130px 0 90px; max-width: 400px;}
}


/* g-nav__list：親リストサイズ
-------------------------------------*/
@media print, screen and (min-width: 768px) {
.g-nav__list {width: 41.76%;}
}
@media screen and (max-width: 767px){
.g-nav__list {width: auto;}
}


/* item：親リスト上下余白
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-nav__list .item + .item {margin-top:0;}
}
@media screen and (max-width: 767px){
    .g-nav__list .item + .item {margin-top:30px;}
}

/* 親リストスタイル
-------------------------------------*/
.g-nav__list .item__upper a {text-align: right;}
@media print, screen and (min-width: 768px) {
    .g-nav__list .item__upper a {padding: 18px 0;}
}
@media screen and (max-width: 767px){
    .g-nav__list .item__upper a {padding: 0 40px;}
}

/* 親リストアコーディオン：＋－
-------------------------------------*/
@media screen and (max-width: 767px){
    .g-nav__list .js-nav-acdn .item__upper:before,
    .g-nav__list .js-nav-acdn .item__upper:after {
        right: 10px;
        width: 13px;
        height: 1px;
        background: #000;
    }
}
/* 子リスト引き出し線
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-nav__list .item__list:before {
        background: #1f1f1f;
        height: 1px;
    }
}

/* 子リスト上下余白
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-nav__list .item__list li + li {margin-top: 0;}
}
@media screen and (max-width: 767px){
    .g-nav__list .item__list li + li {margin-top: 20px;}
}

/* 子リストスタイル
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-nav__list .item__list a,
    .g-nav__list .item__list span {
        padding: 13px 0;
        line-height: 1;
    }
}
@media screen and (max-width: 767px){
    .g-nav__list .item__list a,
    .g-nav__list .item__list span {
        padding: 0 0;
        line-height: 1.5;
        text-align: right;
    }
}

/* 文字色
-------------------------------------*/
/* DF */
.g-nav__list .item__upper a {color: #1f1f1f;}

@media print, screen and (min-width: 768px) {
/* 親hover・子DF */
.g-nav__list .item:hover .item__upper a,
.g-nav__list .item__list a {color: #1f1f1f;}

/* 親hover以外 */
.g-nav__list:hover .item__upper a,
.g-nav__list .item__list span {color: #e5e5e5;}

/* 子hover以外 */
.g-nav__list .item__list:hover a,
.g-nav__list .item__list:hover span {color: #e5e5e5;}

/* 子hover */
.g-nav__list .item__list a:hover{color: #ccaf81;}
}

/* =====================  設定ここまで  ===================== */

body.is-scroll {position: static;}

/* ====================================================
  モード
==================================================== */
@media print, screen and (min-width: 768px) {
    head{font-family: pc;}
}
@media screen and (max-width: 767px){
    head{font-family: sp;}
}

/* ====================================================
  枠組み
==================================================== */
@media screen and (max-width: 767px){
    body {
        position: static;
        min-width: 320px;
        line-height: 1.8;
    }
    .g-scroller {display: none;}
    #Container {padding-top:90px;}
}
@media print, screen and (min-width: 768px) {
    #Container {padding-top:150px;}
}

/* ====================================================
  header
==================================================== */
.g-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 997;
    width: 100%;
    background: transparent;
    -webkit-transition: background .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background .4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ====================================================
  ロゴ
==================================================== */
.g-header__logo {position: absolute;}
.g-header__logo a {display:block;}

/* ====================================================
  ヘッダナビ
==================================================== */
.g-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
}
.g-header__nav__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.g-header__nav__list .item a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding:0;
    -webkit-transition: background .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: background .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-decoration:none;
}
.g-header__nav__list .item span {
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
    line-height: 3;
}

/* ====================================================
  トグル
==================================================== */
.g-header__nav__list .item--menu .toggle {
    overflow: hidden;
    position: relative;
}
.g-header__nav__list .item--menu .toggle span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #1f1f1f;
    -webkit-transition: -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.g-header__nav__list .item--menu .toggle span:nth-child(2) {top: 0; bottom: 0; margin: auto;}

/* ≡　hover
-------------------------------------*/
.mode-pc .g-header__nav__list .item--menu a:hover span:nth-child(1) {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}
.mode-pc .g-header__nav__list .item--menu a:hover span:nth-child(3) {
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}
         .g-header__nav__list .item--menu.is-active .toggle span:nth-child(1),
         .g-header__nav__list .item--menu.is-active .toggle span:nth-child(3),
.mode-pc .g-header__nav__list .item--menu.is-active a:hover .toggle span:nth-child(1),
.mode-pc .g-header__nav__list .item--menu.is-active a:hover .toggle span:nth-child(3) {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
@media screen and (max-width: 767px){
    .g-header__nav__list .item span {line-height: 1.5;}
}

/* ×　active
-------------------------------------*/
.g-header__nav__list .item--menu.is-active .toggle span:nth-child(1),
.mode-pc .g-header__nav__list .item--menu.is-active a:hover .toggle span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.g-header__nav__list .item--menu.is-active .toggle span:nth-child(2),
.mode-pc .g-header__nav__list .item--menu.is-active a:hover .toggle span:nth-child(2) {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.g-header__nav__list .item--menu.is-active .toggle span:nth-child(3),
.mode-pc .g-header__nav__list .item--menu.is-active a:hover .toggle span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* ====================================================
  グローバルナビ
==================================================== */
.g-nav {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    height: 0;
    -webkit-transition: height .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: height .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.g-nav.is-active {height: 100%;}

/* overlay
-------------------------------------*/
.g-nav__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1f1f1f;
    opacity: 0.3;
}

/* outer：ナビ範囲
-------------------------------------*/
.g-nav__outer {
    overflow-y: scroll;
    -webkit-overflow-scrolling : touch;
    position: absolute;
    top: 0;
    height: 100%;
}

/* inner：ナビ上下余白
-------------------------------------*/
@media screen and (max-width: 767px){
    .g-nav__inner {
        display: block;
        min-height: 0;
        margin: auto;
    }
}

/* main：ナビリスト
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-nav__main {width: 100%;}
}
@media screen and (max-width: 767px){
    .g-nav__main {width: auto; padding: 0 32px;}
}

/* 親リストサイズ
-------------------------------------*/
@media screen and (max-width: 767px){
    .g-nav__list .item__upper {position: relative;}
}

/* 親リストサイズ
-------------------------------------*/
.g-nav__list {position: relative;}

/* 親リストスタイル
-------------------------------------*/
.g-nav__list .item__upper a {
    display: block;
    line-height: 1;
    -webkit-transition: color .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: color .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 親リストアコーディオン：＋－
-------------------------------------*/
@media screen and (max-width: 767px){
    .g-nav__list .js-nav-acdn .item__upper:before,
    .g-nav__list .js-nav-acdn .item__upper:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        -webkit-transition: -webkit-transform .4s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: -webkit-transform .4s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: transform .4s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: transform .4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .g-nav__list .js-nav-acdn .item__upper:after {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    .g-nav__list .js-nav-acdn .item__upper.is-active:after {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

/* 子リスト
-------------------------------------*/
.g-nav__list .item__under {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    width: 120%;
    height: 100%;
}
@media print, screen and (min-width: 768px) {
    .g-nav__list .item:hover .item__under {visibility: visible;}
}
@media screen and (max-width: 767px){
    .g-nav__list .item__under {
        overflow: hidden;
        visibility: visible;
        position: static;
        width: auto;
        height: 0;
    }
}

/* 子リスト引き出し線
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-nav__list .item__list:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50px;
        width: 0;
        margin: auto;
        -webkit-transition: width .3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: width .3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .g-nav__list .item:hover .item__list:before {width: 70px;}
}

/* 子リスト並び位置
-------------------------------------*/
.g-nav__list .item__list {
    overflow: hidden;
    position: relative;
}
@media print, screen and (min-width: 768px) {
    .g-nav__list .item__list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 100%;
        padding-left: 160px;
    }
}
@media screen and (max-width: 767px){
    .g-nav__list .item__list {
        padding: 30px 40px 0 0;
    }
}

/* 子リストアニメーション
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .g-nav__list .item__list li {
        opacity: 0;
        -webkit-transition: opacity .4s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: opacity .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    .g-nav__list .item:hover .item__list li {opacity: 1;}
}

/* 子リストスタイル
-------------------------------------*/
.g-nav__list .item__list a,
.g-nav__list .item__list span {display: block;}
@media print, screen and (min-width: 768px) {
    .g-nav__list .item__list a,
    .g-nav__list .item__list span {
        -webkit-transition: color .4s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: color .4s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
}

