@charset "UTF-8";



/* ================================================
グローバルメニュー
================================================ */
.g-nav{
    display: flex;
    justify-content: flex-end;
    column-gap: 1em;
}

.g-nav li{
    font-size:clamp(1.4rem,1.6vw,1.8rem);
}

.g-nav li a{
    &::before{
        content:'\f111';
        font:var(--fa-font-solid);
        margin-right:0.5em;
        font-size: 1.4rem;
        color:var(--grey-btn);
    }
    &.current::before{
        color:var(--pink-main-70);
    }
    &:hover{
        cursor: pointer;
    }
}

/* ================================================
サブメニュー
================================================ */
.sub-nav{
    display: flex;
    justify-content: flex-end;
    column-gap: 0.5em;
    @media(min-width:900px){
        column-gap: 1em;
    }
    li{
        font-size:1.3rem;
        a{
            text-decoration: none;
        }
    }
}

.ico-news::before{
    font: var(--fa-font-solid);
    content: "\f1ea";
    margin-right:0.5em;
}
.ico-contact::before{
    font: var(--fa-font-solid);
    content: "\f0e0";
    @media(min-width:900px){
        margin-right:0.5em;
    }
}
.ico-recruit::before{
    font: var(--fa-font-solid);
    content: "\f007";
    margin-right:0.5em;
}

/* ================================================
メガメニュー
================================================ */

.hamburger {
    display: block;
    width: 88px;
    height: 90px;
    /* スマホの時は小さく */
    @media(width < 767px){
        width:66px;
        height:60px;
    }
    margin-left: auto;
    position: relative;
    z-index: 10;    
    border: none;
    background-color: transparent;
    display: block;
    position: fixed;
    top:0;
    right:0;
    background: var(--blue-dark);
    border-bottom-left-radius: 20px;
    color:#fff;
}

.hamburger.-active{
    .hamburger__line {
        background-color: transparent;
        &::before {
            top: 0;
            transform: rotate(45deg);
        }
        &::after {
            top: 0;
            transform: rotate(-45deg);
        }
    }
    @media(width > 768px){
        .hamburger__text::before {
            content: '閉じる';
        }
    }
}

.hamburger__line {
    display: block;
    height: 2px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    background-color: #fff;
    transition: 0.4s;
}
.hamburger__line{
    &::before,&::after {
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        width: 100%;
        background-color: #fff;
        transition: inherit;
    }
}
.hamburger__line{
    &::before {
        top: -10px;
    }
    &::after{
        top: 10px;
    }
}

.hamburger__text {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    @media(width > 768px){
        &::before {
            content: "MENU";
            text-align: center;
            color: #fff;
            font-size: 14px;
            font-weight: 900;
        }
    }
}

.header__nav-area {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 9;
    height: 100vh;
    width: 60%;
    @media(width < 676px){
        width: 100%;
    }
    visibility: hidden;
    padding-top: 60px;
    background-color: var(--blue-dark);
    transition: 0.4s;
    padding:2em;
    overflow-y: auto; /* 👈 ここを追加 */
    -webkit-overflow-scrolling: touch; /* iOSでスムーズに */
    li,a{
        color:#fff;
    }
}
.header__nav-area.-active {
    right: 0;
  visibility: visible;
}

/* スマホの時のナビゲーション設定 */

@media(max-width:767px){
    .global-navigation {
        padding-top: 40px;
        padding-right: 25px;
        padding-bottom: 120px;
        padding-left: 25px;
    }

    .global-navigation__list a{
        text-decoration: none;
        font-size:1.4rem;
        &:hover{
            cursor: pointer;
        }
    }
    .global-navigation__list > li {
        padding-bottom: 20px;
        border-bottom: 2px solid #e7e9ee;
    }
    .global-navigation__list > li + li {
    margin-top: 20px;
    }
    .global-navigation__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        font-weight: 900;
        transition: color 0.4s;
        font-size: 1.5rem;
    }
    .global-navigation__link.-accordion {
        position: relative;
        background: none;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        padding: 0;
    }
    .global-navigation__link.-accordion::after {
        content: '';
        display: block;
        height: 12px;
        position: absolute;
        top: 50%;
        right: 5px;
        width: 2px;
        background-color: #fff;
        transform: translateY(-50%);
        transition: transform 0.4s;
    }
    .global-navigation__link.-accordion::before {
        content: '';
        display: block;
        height: 2px;
        position: absolute;
        top: 50%;
        right: 0;
        width: 12px;
        background-color: #fff;
        transform: translateY(-50%);
        
    }
    .global-navigation__link.-active::after {
    transform: translateY(50%) rotate(-90deg);
    height:0; /*追加*/
    }
    .accordion {
        height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: 0.4s;
    }
    .accordion.-active {
        height: auto;
        padding-top: 30px;
        visibility: visible;
    }
    .accordion__list li {
        font-size: 0.75rem;
    }
    .accordion__list li + li {
        margin-top: 21px;
    }
    .accordion__link {
        color: #172e59;
    }
}
/* スマホのナビゲーション設定はここまで */

/* PCでのメガメニュー設定 */
.global-navigation__link{
    margin-bottom: 1em;;
}

@media(min-width:768px){
.global-navigation__list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    li{
        margin-bottom:1em;
        a{
            text-decoration: none;
        }        
        }
    > li::before{
        content:'\f111';
        font:var(--fa-font-solid);
        margin-right:0.5em;
        font-size:1.4rem;
        color:var(--grey-btn);
        }
    }
    .accordion__list{
        margin-left:1.5em;
    }
}

.accordion__list a{
        display: inline-block;
        width: 100%;
}

/* 右サイドの空き状況ボタン */

.side-btn-facility a{
    display: block;
    text-decoration: none;
    background: var(--pink-main);
    color:#fff;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position:fixed;
    top:200px;
    right:0;
    z-index:10;
    padding:1.5em 0.7em 1.5em 0.7em;
    border-radius: 16px 0 0 16px;
    letter-spacing: 0.3em;
    &::before{
        content:"\f52b";
        font: var(--fa-font-regular);
        margin-bottom:0.5em;
    }
}