@charset "UTF-8";

#Work_title {
    background-image: url(../../img/Work_title.jpg);
}

body {
    background-image: url(../../img/Background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}



/* インストラクター */
#Instructor ul {
    grid-auto-flow: row;
}

#Instructor ul p {
    font-size: var(--size-md);
}

#Instructor ul img {
    transform: scale(-1, 1);
}

/* ＝＝＝＝＝min-width:960px＝＝＝＝＝＝＝＝＝＝ */
@media screen and (min-width:960px) {


    #Instructor ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(150px, 1fr));
        row-gap: 20px;
        justify-content: space-evenly;
        align-items: center;
    }

    #Instructor ul li:first-child {
        order: 1;
    }

    #Instructor ul p {
        text-align: left;
        font-size: min(1.2vw, 1.6rem)
    }


    #Instructor ul li {
        margin-bottom: calc(var(--contents-gutter)*2);
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    #Instructor ul li img {
        box-sizing: border-box;
        margin: 0 auto;
    }
}



/* 見出し */

.heading {
    align-items: center;
    /* 線を上下中央 */
    display: flex;
    /* 文字と横線を横並び */
    justify-content: center;
    /* 文字を中央寄せ */
}

.heading::before,
.heading::after {
    background-color: var(--text-color);
    border-radius: 5px;
    content: "";
    height: 2px;
    width: 40px;
    /* 線の長さ */
}

.heading::before {
    margin-right: 10px;
    /* 文字との余白 */
    transform: rotate(60deg);
    /* 傾ける */
}

.heading::after {
    margin-left: 10px;
    /* 文字との余白 */
    transform: rotate(-60deg);
    /* 傾ける */
}

/* レイアウトのためのcss */

.heading h2 {
    color: var(--text-color);
    margin-bottom: 60px;
    margin-top: 60px;
    /* font-size: 20px;
    font-weight: 700;
    margin-bottom: 60px;
    margin-top: 60px; */
}



/* アコーディオンボタン部分 */
#work_acc dt {
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
    line-height: 25px;
    background-color: var(--main-color);
    border-radius: 50px;
    cursor: pointer;
    color: #fff;
    cursor: pointer;
}

#work_acc dt {
    margin-bottom: 30px;
    margin-top: 80px;
    padding: calc(var(--gutter-base)*2);
    font-size: var(--size-md);
    text-align: center;
}



#work_acc dt:hover {
    opacity: 0.5;
}

#open_btn {
    font-size: var(--size-sm);
}


/* ＝＝＝＝＝min-width:960px＝＝＝＝＝ */
@media screen and (min-width:960px) {
    #work_acc dt {
        line-height: 50px;
        max-width: 600px;
        font-size: 20px;
    }


}





/* オープン++ボタン???? */
.open_btn {
    content: "";
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
    border: solid 1px #ccc;
    padding: 1em;
    display: block;
    color: #333;
    position: relative;
}


/* ＋の部分 */
.open_btn::after,
.open_btn::before {
    content: "";
    position: absolute;
    right: 1.5em;
    top: 1.5em;
    width: 2px;
    height: 0.75em;
    background-color: #fff;
    transition: all 0.3s;
}

/* 閉じてるとき */
.open_btn::after {
    transform: rotate(-90deg);
    transition: transform 0.3s;
}


/* 開いたとき */
.open_btn.open::before {
    transform: rotate(90deg);
    max-height: 500px;
    transition: all 0.5s;
}

/* ＝＝＝＝＝min-width:960px＝＝＝＝＝ */
@media screen and (min-width:960px) {

    .open_btn::after,
    .open_btn::before {
        top: 1.7em;
        right: 2em;
    }
}

/* アコーディオン中身 */
#work_acc dt,
#work_acc dl dd {
    margin-top: 30px;
}

#work_acc dl {
    margin-top: 80px;
}


#work_acc ul li p {
    font-size: 25px;
    text-align: center;
    margin-bottom: 30px;
    text-decoration: underline;
    text-decoration-thickness: 10px;
    text-decoration-color: #e0c68d;
    text-underline-offset: -5px;
    text-decoration-skip-ink: none;
}


/* 画像の真ん中揃え */
#work_acc ul li img {
    box-sizing: border-box;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}


#work_acc dl dd span {
    display: block;
    text-align: center;
}


#work_acc ul li {
    margin-bottom: calc(var(--gutter-base)*3);
}

#work_acc ul {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--background-color);
    border-radius: 10px;
    margin-bottom: calc(var(--gutter-base)*3);
}



/* ＝＝＝＝＝min-width:960px＝＝＝＝＝＝＝＝＝＝ */
@media screen and (min-width:960px) {
    #work_acc ul {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        gap: 30px;
        padding-bottom: 30px;
        align-items: center;
    }

    #work_acc ul li:nth-child(3) {
        order: 3;

    }
}





/* 予約案内 */
#Reservation .box {
    padding: 2em;
    margin: 2em 0;
    font-weight: bold;
    color: var(--text-color);
    /*文字色*/
    background: #FFF;
    border-radius: 20px;
    display: inline-block;
}

#Reservation h3 {
    padding-bottom: 1em;
}

#Reservation p {
    padding-top: 1em;
    padding-bottom: 1rem;
    word-break: keep-all;
}

#Reservation .cancel {
    font-size: var(--size-sm);

}

.box dl {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
}

.box dt {
    width: 30%;
    box-sizing: border-box;
    color: var(--main-color);
    padding: 10px;
    text-align: left;
}

.box dd {
    width: 70%;
    box-sizing: border-box;
    color: var(--text-color);
    padding: 10px;
    text-align: left;
    word-break: keep-all;
}




.box ul {
    display: grid;
    grid-auto-flow: row;
    gap: 15px;
    padding-top: 3rem;
}


.box a {
    background-color: var(--sub-color1);
    width: 200px;
    border: 1px solid var(--main-color);
    color: var(--text-color);
    text-decoration: none;
    display: block;
    text-align: center;
    line-height: var(--size-md);
    padding-top: 15px;
    padding-bottom: 15px;
    transition: 0.1s;
    border-radius: 100vh;
    margin-left: auto;
    margin-right: auto;
}

.box a:hover {
    opacity: 0.5;
}

#Reservation img {
    padding-top: 15px;
    box-sizing: border-box;
    margin: 0 auto;
}


/* ＝＝＝＝＝min-width:768px＝＝＝＝＝ */
@media(min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

/* ＝＝＝＝＝min-width:960px＝＝＝＝＝ */
@media screen and (min-width:960px) {

    .box dl {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #ccc;
        width: 600px;
    }

    .box ul {
        display: grid;
        grid-template-columns: repeat(2, auto);
        padding-top: 3rem;
    }


}