@charset "utf-8";

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
nav {
    color: #fff;
    text-align: center;
}

/*ナビゲーションを横並びに*/
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

/*2階層目以降は横並びにしない*/
nav ul ul {
    display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
    position: relative;
}

/*ナビゲーションのリンク設定*/
nav ul li a {
    display: block;
    text-decoration: none;
    color: #999;
    padding: 20px 35px;
    transition: all .3s;
}

nav ul li li a {
    padding: 10px 35px;
}

nav ul li a:hover {
    color: #fff;
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 25px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    transform: rotate(135deg);
}

/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 17px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul {
    /*絶対配置で位置を指定*/
    position: absolute;
    left: 0;
    top: 62px;
    z-index: 4;
    /*形状を指定*/
    background: #1c1b1a;
    ;
    width: 180px;
    /*はじめは非表示*/
    visibility: hidden;
    opacity: 0;
    /*アニメーション設定*/
    transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover>ul,
nav li.has-child ul li:hover>ul,
nav li.has-child:active>ul,
nav li.has-child ul li:active>ul {
    visibility: visible;
    opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a {
    color: #fff;
    /* border-bottom: solid 1px rgba(255, 255, 255, 0.6); */
}

nav li.has-child ul li:last-child>a {
    border-bottom: none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active {
    background: #ff6c3d;
}


/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul {
    top: 0;
    left: 182px;
    background: #66ADF5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active {
    background: #448ED3;
}

/* PC追記 */

/* nav ul li{
    position: static;
} */

nav li.has-child ul {
    /*絶対配置で位置を指定*/
    left: 50%;
    transform: translateX(-50%);
    margin-inline: auto;
    top: 5.2rem;
    /*形状を指定*/
    background: #ebe9e3;
    width: 101.6rem;
    height: auto;
    overflow: hidden;
    z-index: 50;
    /* 追記 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
}


nav ul li.has-child::before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
}

/* グリッド内部 */
.service-nav-title {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.service-nav1 {
    /* grid-column: 2 / 3;
    grid-row: 1 / 2; */
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.service-nav2 {
    /* grid-column: 3 / 4;
    grid-row: 1 / 2; */
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.service-nav3 {
    /* grid-column: 4 / 5;
    grid-row: 1 / 2; */
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.service-nav4 {
    /* grid-column: 2 / 3;
    grid-row: 2 / 3; */
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.service-nav5 {
    /* grid-column: 3 / 4;
    grid-row: 2 / 3; */
    grid-column: 5 / 6;
    grid-row: 1 / 2;
}

.service-nav6 {
    /* grid-column: 4 / 5;
    grid-row: 2 / 3; */
    grid-column: 6 / 7;
    grid-row: 1 / 2;
}

.service-nav-wrap p {
    font-size: 1.6rem;
    font-family: "Barlow", sans-serif;
    align-self: flex-end;
}

.service-nav-wrap img {
    width: auto;
    height: 4rem;
    margin-bottom: 0.8rem;
    align-self: flex-start;
}

.service-nav-title {
    color: #ebe9e3;
    ;
}

h2.service-nav-title::after {
    left: 0;
    transform: none;
}

.service-nav-wrap li a {
    width: calc(101.6rem / 6);
    height: auto;
    display: grid;
    justify-content: center;
    align-content: center;
}


/*==1279px以下の形状*/

@media screen and (max-width:1279px) {
    nav#hamburger {
        padding: 0;
    }

    nav#hamburger ul {
        display: block;
    }

    nav#hamburger li.has-child ul,
    nav#hamburger li.has-child ul ul {
        background: #fefcfa;
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        visibility: visible;
        /*JSで制御するため一旦表示*/
        opacity: 1;
        /*JSで制御するため一旦表示*/
        display: none;
        /*JSのslidetoggleで表示させるため非表示に*/
        transition: none;
        /*JSで制御するためCSSのアニメーションを切る*/
    }

    /*矢印の位置と向き*/

    nav#hamburger ul li.has-child::before {
        left: auto;
        right: 1.6rem;
        /* top: 50%;
        transform: translateY(-50%)rotate(135deg); */
        top: 2.9345rem;
        transform: rotate(135deg);
    }

    nav#hamburger ul ul li.has-child::before {
        transform: rotate(135deg);
        left: 20px;
    }

    nav#hamburger ul li.has-child.active::before {
        transform: rotate(-45deg);
    }

    /* 追記 */
    #hamburger ul.service-nav-wrap {
        /* TOPはserviceのナビサイズ分下げる */
        top: 7rem;
        left: 0;
        transform: none;
    }


    nav#hamburger ul {
        top: 12.3rem;
        transform: none;
    }

}