@charset "UTF-8";

/*
Theme Name: BARBER LUANES
*/

body,
html {
    margin: 0;
}

body {
    font-size: 13px;
    background: url(assets/image/bg-top.webp) top left no-repeat #000;
}

a {
    text-decoration: none;
}

/* フォント */
.playfair-display-400 {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.playfair-display-italice {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: italic;
}

.noto-serif-jp-500 {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.noto-serif-jp-600 {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.noto-serif-jp-700 {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.noto-serif-jp-900 {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

/* LINEボタン */
.line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    width: fit-content;
    padding: 0.2rem 5vw;
}

.line-btn p {
    color: #000 !important;
    font-size: 1em;
    padding: 0 1.5vw;
}

/* 矢印 */
.arrow-wrap {
    background: #D9D9D9;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.6rem;
}

/* セクションタイトル */
.section-title-en,
.section-title-ja {
    color: #fff;
    margin: 0;
}

/* アニメーション */
.fade-up-target {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.fade-up-target.fade-up-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ヘッダー */
#header {
    animation: fadeDown 0.8s ease-out forwards;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* お知らせ */
.news-post .post-detail {
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.news-section-wrap .left .contents {
    display: flex;
    color: #fff;
}

.news-section-wrap .left .contents.news-post-wrap {
    flex-direction: column;
}

.news-section-wrap .left .contents:nth-child(1) {
    justify-content: space-between;
    align-items: end;
}

.news-section-wrap .left .contents .btn-wrap a {
    color: #fff;
    font-size: 1em;
    margin: 0 1.3rem 0.6rem 0;
    display: flex;
    align-items: center;
}

/* ギャラリー */

#gallery .img-wrap {
    position: relative;
    overflow: hidden;
}

#gallery img {
    width: 100%;
    display: block;
    cursor: pointer;
}

#gallery .img-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    transition: background 0.3s;
}

#gallery .img-wrap:hover::after {
    background: rgba(255, 255, 255, 0.5);
}

#gallery .img-wrap::after {
    pointer-events: none;
}

/* モーダル */

.modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    display: flex;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    margin: auto;
    display: block;
    height: 60%;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.modal-close:hover,
.modal-close:focus {
    color: #bbb;
}

.modal-inner {
    width: 47%;
    justify-content: center;
    align-items: center;
}

.modal-inner .content {
    width: 50%;
}

.modal-inner .content .wrap {
    background: #dfdfdf;
    padding: 1rem 0 1.5rem 0;
}

.modal-inner .content img:not(a img) {
    width: 100%;
}

.modal-inner .content p {
    color: #060606;
    font-size: 1.38em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.modal-inner .content p::before,
.modal-inner .content p::after {
    content: "";
    width: 1.5rem;
    height: 0.5px;
    background: #000;
    margin: 0 0.6rem;
}

.modal-inner .content a {
    background: none;
    color: #000;
    border: 0.5px solid #000;
    padding: 0 2vw;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 1rem auto 0;
}

.modal-inner .content a .line {
    margin-right: 0.6rem;
}

.modal-inner .content a .arrow-wrap {
    background: none;
}


/* PV */
#pv .video-wrap {
    width: 65%;
    margin: 0 auto;
    padding: 3rem 0;
}

#pv .video-wrap video {
    width: 100%;
}

/* 店舗紹介 */
#aboutus {
    background: #232323;
    padding: 6.6rem 0 6rem 0;
}

#aboutus .title-wrap {
    width: 90.5%;
    margin: 0 auto;
}

#aboutus .title-wrap .flex {
    display: flex;
    align-items: center;
    margin-top: 0.3rem;
}

#aboutus .title-wrap .right .line {
    content: "";
    width: 53.5vw;
    height: 1px;
    background: #fff;
    margin-left: 7rem;
}

#aboutus .contents-wrap {
    width: 89.5%;
    margin: 5.7rem auto 0;
    justify-content: space-between;
}

#aboutus .contents-wrap .contents {
    width: 48.2%;
}

#aboutus .contents-wrap .contents p,
#aboutus .contents-wrap .contents a {
    color: #fff;
}

#aboutus .contents-wrap .contents .store-name {
    font-size: 1.54em;
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
}

#aboutus .contents-wrap .contents .store-name::before {
    content: "";
    width: 2.3vw;
    height: 1px;
    background: #fff;
    margin-right: 0.8rem;
}

#aboutus .contents-wrap .contents .img-wrap {
    overflow: hidden;
    position: relative;
    display: block;
    line-height: 0;
}

#aboutus .contents-wrap .contents img:not(.arrow-wrap img) {
    width: 100%;
}

.contents .img-wrap .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#aboutus .contents-wrap .contents .img-wrap:hover .mask {
    opacity: 1;
}

.contents .img-wrap .mask p {
    font-size: 1.15em;
    color: #fff;
    text-align: center;
    margin: 0;
}

#aboutus .contents-wrap .contents p:not(.store-name, .mask p) {
    font-size: 1.15em;
    margin: 1rem 0 1.2rem 0;
    line-height: 1.8;
}

#aboutus .contents-wrap .contents .flex {
    display: flex;
}

#aboutus .contents-wrap .contents .flex:not(.mask) {
    flex-wrap: wrap;
}

#aboutus .contents-wrap .contents .btn-wrap a {
    font-size: 1em;
    border: 0.5px solid #fff;
    display: flex;
    align-items: center;
}

#aboutus .contents-wrap .contents .btn-wrap1 {
    margin: 0 0.4rem 1rem 0;
}

#aboutus .contents-wrap .contents .btn-wrap1 a {
    padding: 0.5rem 3.5rem;
    position: relative;
    margin-right: 2vw;
}

#aboutus .contents-wrap .contents .btn-wrap2 a {
    padding: 0.5rem 1.2rem;
}

#aboutus .contents-wrap .contents .btn-wrap a .arrow-white {
    background: none;
    width: 20px;
    height: auto;
}

#aboutus .contents-wrap .contents .btn-wrap a .arrow-white img {
    width: 100%;
}

/* 達成のための店舗作り */
#philosophy {
    background: url(assets/image/bg-top.webp) top left no-repeat #000;
}

#philosophy .title-wrap {
    text-align: center;
    color: #fff;
    line-height: 1.8;
    padding: 4vw;
}

#philosophy .title-wrap .line {
    content: "";
    background: #fff;
    width: 9vw;
    height: 1px;
    margin: 0 auto;
}

#philosophy .title-wrap .text-wrap {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}

#philosophy .title-wrap .text-wrap p {
    font-size: 1.77em;
    color: #000;
    background-color: #fff;
    margin: 3.3rem auto 0;
    padding: 0 0.5vw;
}

#philosophy .image-wrap img {
    width: auto;
    height: 100%;
    object-fit: cover;
}

#philosophy .title-wrap .section-title-ja {
    margin: 0.6rem 0 2.2rem 0;
}

#philosophy .title-wrap,
#philosophy .image-wrap {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 提案 */
#proposal {
    background: #232323;
    padding: 8.7rem 0 10rem 0;
}

#proposal .title-wrap .section-title-en,
#proposal .title-wrap .section-title-ja {
    text-align: center;
}

#proposal .title-wrap .section-title-ja {
    margin: 0.6rem 0 2.2rem 0;
}

#proposal .title-wrap .line {
    content: "";
    background: #fff;
    width: 9vw;
    height: 1px;
    margin: 0 auto;
}

#proposal .line-btn {
    margin: 2.2rem auto 4.5rem;
    background: none;
    border: 1px solid #fff;
    padding: 0 7vw;
}

#proposal .line-btn p {
    color: #fff !important;
    padding: 0 1.5vw 0 0.5vw;
}

.proposal-content {
    justify-content: space-between;
    width: 84%;
    margin: 0 auto 2rem;
}

.proposal-content .left {
    width: 48%;
    margin-left: 3%;
}

.proposal-content .right {
    width: 48%;
    margin-top: 2%;
}

.proposal-content img {
    width: 100%;
}

.proposal-content .text p {
    width: 68%;
    margin: 0 auto;
}

.proposal-content p {
    color: #fff;
}

.proposal-content .num {
    font-size: 7.7em;
    text-align: center;
}

.proposal-content .title {
    font-size: 1.54em;
    margin: 0 auto 2.5rem !important;
    text-align: center;
}

.proposal-content .line {
    content: "";
    width: 8vw;
    height: 1px;
    background: #fff;
    margin: 0 auto;
}

.proposal-content p:not(.num, .title) {
    font-size: 1.15em;
    margin: 2.5rem auto 0;
}

/* ご予約の流れ */
#reservation {
    padding: 6.5rem 0 0 0;
}

#reservation .title-wrap img {
    margin: 0 auto 0.6rem;
    display: block;
    width: 3.8rem;
}

#reservation .title-wrap .section-title-en,
#reservation .title-wrap .section-title-ja {
    text-align: center;
}

#reservation .title-wrap .section-title-ja {
    margin: 0.6rem 0 2.2rem 0;
}

#reservation .title-wrap .line {
    content: "";
    background: #fff;
    width: 9vw;
    height: 1px;
    margin: 0 auto;
}

#reservation .step-wrap {
    margin: 5rem 0 0 0;
    justify-content: center;
    gap: 0 4rem;
}

#reservation .step-wrap .step {
    width: 21%;
}

#reservation .step-wrap .speech-bubble {
    position: relative;
    margin-bottom: 2.5rem;
}

#reservation .step-wrap .speech-bubble img {
    width: 100%;
}

#reservation .step-wrap .speech-bubble .num {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.5rem;
    margin: auto;
    color: #fff;
    font-size: 7.7em;
}

#reservation .step-wrap .speech-bubble .text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.6rem;
    margin: auto;
    color: #fff;
    font-size: 1.77em;
    width: fit-content;
    height: fit-content;
}

#reservation .step-wrap .step1 .line-btn {
    padding: 0.2rem 2vw;
    margin: 6.5rem auto 0;
}

#reservation .step-wrap .step1 .line-btn p {
    padding: 0 1vw;
}

#reservation .step-wrap .step2 .line-step2 {
    width: 100%;
    margin: 0 auto;
    display: block;
}

#reservation .step-wrap .step3 .line-step3 {
    width: 74%;
    margin: 0 auto;
    display: block;
}

/* 交通アクセス */

#access {
    padding: 5.5rem 0 5.5rem 0;
}

#access .title-wrap {
    margin-bottom: 40px;
}

#access .title-wrap .section-title-en,
#access .title-wrap .section-title-ja {
    text-align: center;
}

#access .title-wrap .section-title-ja {
    margin: 0.6rem 0 2.2rem 0;
}

#access .title-wrap .line {
    content: "";
    background: #fff;
    width: 9vw;
    height: 1px;
    margin: 0 auto;
}

#access .gmap-wrap {
    width: 79%;
    margin: 3rem auto 0;
}

#access .gmap-wrap iframe {
    width: 100%;
    height: 35rem;
}

#access .contents-wrap {
    width: 79.5%;
    margin: 4.5rem auto 0;
    justify-content: space-between;
}

#access .contents-wrap .contents {
    width: 48.2%;
}

#access .contents-wrap .contents .store-name {
    color: #fff;
    font-size: 1.54em;
    margin: 0 0 2rem 0;
    display: flex;
    align-items: center;
}

#access .contents-wrap .contents .store-name::before {
    content: "";
    width: 2.3vw;
    height: 1px;
    background: #fff;
    margin-right: 0.8rem;
}

#access .contents-wrap .contents .youtube-wrap iframe {
    width: 100%;
    height: 19rem;
}

#access .staff-wrap {
    align-items: center;
    background: #F1F1F1;
    width: 88%;
    margin: 6rem auto 0;
    padding: 2.5rem 1.2rem;
}

#access .staff-wrap .left {
    width: 27%;
    align-self: flex-start;
}

#access .staff-wrap .left img {
    width: 100%;
}

#access .staff-wrap .center {
    width: 30.5%;
    margin-top: 8rem;
    align-self: flex-end;
}

#access .staff-wrap .center img {
    width: 90%;
    margin: 0 auto;
    display: block;
}

#access .staff-wrap .center p {
    width: 90%;
    margin: 0 auto !important;
}

#access .staff-wrap p:not(.right p) {
    font-size: 1.15em;
    margin: 0;
    padding-top: 0.4rem;
    display: flex;
    align-items: center;
}

#access .staff-wrap p:not(.right p)::before {
    content: "";
    width: 1.6vw;
    height: 1px;
    background: #000;
    margin-right: 0.8rem;
}

#access .staff-wrap .right {
    width: 42.5%;
    align-self: center;
}

#access .staff-wrap .right img,
#access .staff-wrap .right .text {
    margin: 0 auto;
    display: block;
    width: fit-content;
}

#access .staff-wrap .right .text {
    font-size: 1.54em;
    padding: 2rem 0;
}

#access .staff-wrap .right .flex {
    align-items: center;
    justify-content: space-between;
    width: 77%;
    margin: 0 auto;
}

#access .staff-wrap .right .line-btn {
    background: none;
    padding: 0;
}

#access .staff-wrap .right .line-btn p {
    padding: 0 1.5vw 0 0.5vw;
}

#access .staff-wrap .right .reservation-btn {
    position: relative;
    font-size: 1em;
    color: #000;
    display: flex;
    align-items: center;
    box-shadow: 0 0 0 0.5px #000;
    padding: 0.5vw 4vw;
}

#access .staff-wrap .right .reservation-btn .arrow-black {
    position: absolute;
    background: none;
    right: 1vw;
    width: 20px;
}

#access .staff-wrap .right .reservation-btn .arrow-black img {
    width: 100%;
}

/* google MAP */

.map-wrap {
    width: 90vw;
    max-width: 1082px;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 1082 / 565;
    /* 比率を固定（CSS対応ブラウザ用） */
}

/* aspect-ratio に対応していないブラウザ用のフォールバック */
.map-wrapper::before {
    content: "";
    display: block;
    padding-top: calc(100% * (565 / 1082));
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.map-legend {
    position: absolute;
    bottom: 20px;
    left: 3%;
    background-color: #fff;
    color: #000;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 100;
    max-width: 200px;
    border: 5px solid #011C6D;
    border-radius: 0;
}

.map-legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.map-legend li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000;
    padding: 14px;
}

.map-legend li:last-child {
    border: none;
}

.map-legend .circle {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #011C6D;
    border-radius: 50%;
    text-align: center;
    margin-right: 8px;
}

.map-legend .circle img {
    width: auto;
    height: 16px;
    padding-top: 3px;
}

/* キャンペーン */

.campaign {
    position: relative;
}

.campaign-img-wrap {
    background: #000;
}

.campaign-img-wrap img {
    width: 100%;
    opacity: 0.2;
}

.campaign .contents {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
}

.campaign .contents p {
    color: #fff;
    text-align: center;
}

.campaign .br-sp {
    display: none;
}

.campaign .contents .line-btn {
    margin: 5rem auto 0;
}

.campaign .contents .text1 {
    font-size: 1.54em;
}

.campaign .contents .text2 {
    font-size: 1.92em;
    border-bottom: 1px solid #fff;
}

/* お問い合わせ */

#contact {
    padding: 7rem 0 3rem 0;
}

#contact .title-wrap .section-title-en,
#contact .title-wrap .section-title-ja {
    text-align: center;
}

#contact .title-wrap .section-title-ja {
    margin: 0.6rem 0 2.2rem 0;
}

#contact .title-wrap .line {
    content: "";
    background: #fff;
    width: 9vw;
    height: 1px;
    margin: 0 auto;
}

.contact-form {
    width: 59vw;
    margin: 6rem auto 0;
}

.contact-form .item_wrap {
    align-items: center;
}

.contact-form .last {
    align-items: flex-start !important;
}

.contact-form .item_title {
    width: 16.2vw;
    max-width: 16.2vw;
    min-width: 16.2vw;
    margin-left: 1.5vw;
}

.contact-form p {
    font-size: 1em;
    margin: 1.75rem 0;
}

.contact-form .last .item_text,
.contact-form .last .required {
    margin: 3rem 0;
}

.contact-form p.required,
.contact-form p.optional {
    padding: 0 0.5rem;
    margin-left: 1.4vw !important;
    border-radius: 5px;
}

.contact-form input:not(.wpcf7-submit) {
    width: 26.5vw;
    height: 3rem;
    padding: 0.1rem 1vw;
    font-size: 1em;
}

.contact-form textarea {
    width: 26.5vw;
    height: 14rem;
    padding: 1vw;
    line-height: 1.6;
    font-size: 1em;
}

.contact-form .submit-btn .wpcf7-submit {
    width: 31vw;
    padding: 1rem 0;
}

/* お問い合わせフォーム */

.contact-form p {
    color: #fff;
}

.contact-form p.required {
    background: #C30D23;
}

.contact-form p.optional {
    background: #7B7979;
}

.contact-form input:not(.wpcf7-submit),
.contact-form textarea {
    border: none;
    background: #D9D9D9;
}

.contact-form .submit-btn .wpcf7-submit {
    color: #fff;
    background: none;
    border: 1px solid #fff;
    margin: 0 auto;
    display: block;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/* 下層ページ共通 */

body.page-template-default {
    background-color: #171717;
    background-image: none;
}

/* フッター */

footer {
    background: url(assets/image/bg-page-png.webp) top left no-repeat #000;
    background-size: 100%;
}

footer p {
    color: #fff;
    text-align: center;
    margin: 0;
}

/* 店舗ページメニューアコーディオン */

.accordion-menu {
    width: 65%;
    height: auto;
    margin: 5rem auto 0;
    padding: 6rem 6.5rem;
    border: 5px solid transparent;
    border-image: linear-gradient(to right,
            #D9A040 0%,
            #C2913E 10%,
            #B3883D 20%,
            #AE853D 30%,
            #A3772E 35%,
            #FBE18A 40%,
            #E2AF61 45%,
            #B27B38 50%,
            #DAA75A 60%,
            #E2C271 65%,
            #A47830 70%,
            #AE853D 75%,
            #E0C26F 80%,
            #DAB062 90%,
            #AE853D 100%) 1 round;
    background-image: linear-gradient(to bottom,
            #3D3D3D 0%,
            #2A2A2A 25%,
            #202020 50%,
            #050505 75%,
            #030303 100%);
    border-image-slice: 1;
    border-image-repeat: stretch;
}

.accordion-item {
    margin-bottom: 2rem;
    overflow: hidden;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-item.active {
    border-bottom: none;
}

.accordion-header {
    color: #fff;
    padding: 1.3rem 0 1.3rem 4vw;
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    font-size: 1.92em;
    border-right: 1px solid #fff;
}

.accordion-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom,
            #D9A040 0%,
            #C2913E 10%,
            #B3883D 20%,
            #AE853D 30%,
            #A3772E 35%,
            #FBE18A 40%,
            #E2AF61 45%,
            #B27B38 50%,
            #DAA75A 60%,
            #E2C271 65%,
            #A47830 70%,
            #AE853D 75%,
            #E0C26F 80%,
            #DAB062 90%,
            #AE853D 100%);
}

.accordion-header::after {
    content: '+';
    position: absolute;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: #FFC46A;
    font-weight: 200;
}

.accordion-item.active .accordion-header::after {
    content: "";
    background: #FFC46A;
    width: 1.5rem;
    height: 2px;
}

.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 2s ease;
    padding: 0;
    overflow: hidden;
}

.accordion-item.active .accordion-content {
    max-height: 3000px;
    opacity: 1;
    border: 2px solid transparent;
    border-image: linear-gradient(to right,
            #D9A040 0%,
            #C2913E 10%,
            #B3883D 20%,
            #AE853D 30%,
            #A3772E 35%,
            #FBE18A 40%,
            #E2AF61 45%,
            #B27B38 50%,
            #DAA75A 60%,
            #E2C271 65%,
            #A47830 70%,
            #AE853D 75%,
            #E0C26F 80%,
            #DAB062 90%,
            #AE853D 100%) 1 round;
    border-image-slice: 1;
    border-image-repeat: stretch;
}

.accordion-item .course-container {
    margin: 0 4vw;
    padding: 2rem 0;
    border-bottom: 1px solid #7B7B7B;
}

.accordion-item .course-container .course-title {
    margin: 0;
}

.accordion-item .course-container .course-title img {
    width: 50vw;
}

.accordion-item .course-container .course-detail {
    margin: 1.3rem 0 0 0;
}

.accordion-item .course-container .course-detail .course-description {
    color: #FFC46A;
    font-size: 1.38em;
    margin: 0 0 0.3rem 0;
}

.accordion-item .course-container .course-detail .course-includes {
    color: #fff;
    font-size: 1em;
    margin: 0 0 0 0.5rem;
    line-height: 1.8;
}

.accordion-item .course-container .course-detail .course-includes span {
    color: #FFC46A;
}

.accordion-item .course-container .course-detail .course-note {
    color: #FFC46A;
    font-size: 1em;
    margin: 1.4rem 0 0 0.5rem;
}

@media screen and (min-width: 1001px) {

    .accordion-item .course-container .course-title img {
        width: 29rem;
    }

}

@media screen and (min-width: 769px) {

    .flex {
        display: flex;
    }

    .sp {
        display: none !important;
    }

    main {
        padding-top: 165px;
    }

    /* セクションタイトル */

    .section-title-en {
        font-size: 1.54em;
    }

    .section-title-ja {
        font-size: 2.7em;
    }

    /* ボタン */
    .buttons-border {
        box-shadow: 0 0 0 0.5px #fff;
        padding: 0.5vw 4vw;
    }

    .buttons-wrap a {
        position: relative;
        font-size: 1.1em;
        color: #fff;
        margin-right: 2vw;
        display: flex;
        align-items: center;
    }

    .buttons-wrap a .arrow-white {
        position: absolute;
        background: none;
        right: 1vw;
        width: 20px;
    }

    .buttons-wrap a .arrow-white img {
        width: 100%;
    }

    /* ヘッダー */
    #header {
        position: fixed;
        width: 100%;
        z-index: 200;
        transition: background-color 0.3s;
        background-color: transparent;
    }

    header .contents-wrap {
        padding: 27px 60px 27px 27px;
        height: 61px;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    }

    header .logo {
        margin: 0;
        height: 61px;
    }

    header .logo a {
        color: #fff;
        text-decoration: none;
    }

    header .logo a img {
        display: block;
        width: 100%;
    }

    header .buttons-wrap {
        display: flex;
        align-items: center;
    }

    .buttons-wrap a.header-nav_line {
        padding: 0.5vw 4vw;
    }

    .buttons-wrap a.header-nav_line img {
        margin-right: 0.3rem;
    }

    header .menu-item {
        line-height: 3;
        font-size: 17px;
    }

    header .sub-menu .menu-item li {
        line-height: 1.8;
        font-size: 14px;
        text-align: left;
        padding-left: 20px;
    }

    .arrow-menu {
        display: inline-block;
        margin-right: 5px;
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 10px solid #fff;
        vertical-align: middle;
    }

    .arrow-menu.open {
        transform: rotate(90deg);
    }

    .sub-menu {
        display: none;
        list-style: none;
        padding: 0;
        position: fixed;
        top: -200px;
        left: 0;
        width: 100%;
        background-color: #353631;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
        height: auto;
        overflow: hidden;
        z-index: 1000;
        box-shadow: 0 -0.5px 0 0 white;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    .sub-menu.open {
        opacity: 1;
        pointer-events: auto;
    }

    .sub-menu ul {
        list-style: none;
        margin-bottom: 1vw;
        padding: 0;
        display: flex;
        gap: 4vw;
    }

    .sub-menu ul a {
        color: #fff;
        text-decoration: none;
    }

    .menu-item a {
        cursor: pointer;
        color: #fff;
    }

    .menu-toggle {
        color: #fff;
        text-decoration: none;
        padding: 7px 15px;
        height: 0.7rem;
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .menu-toggle span {
        display: block;
        height: 1px;
        background-color: white;
        position: absolute;
        left: 0;
        right: 0;
        transition: background-color 0.3s ease;
    }

    .menu-toggle span:nth-child(1) {
        top: 0;
        width: 70%;
    }

    .menu-toggle span:nth-child(2) {
        top: 50%;
        width: 100%;
        left: 0;
    }

    .menu-toggle span:nth-child(3) {
        bottom: 0;
        width: 70%;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(12px) rotate(45deg);
        height: 2px;
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
        height: 2px;
    }

    /* FV */

    #fv {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #fv h2 {
        width: 45%;
        flex: 0 0 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #fv h2 img {
        width: 100%;
        height: auto;
    }

    #fv h3 {
        font-size: 2.69em;
        margin-bottom: 3vw;
    }

    #fv h4 {
        font-size: 1.53em;
    }

    #fv h4 span {
        color: #000;
        background-color: #fff;
        font-size: 1.15em;
    }

    #fv .title-wrap {
        position: relative;
        z-index: 10;
    }

    #fv .fv-h2_1 {
        margin-left: 1.3vw;
        mix-blend-mode: exclusion;
    }

    #fv .fv-h2_2 {
        margin-left: 17vw;
        width: 94% !important;
        margin-top: 0.5rem;
    }

    #fv .text-wrap {
        width: 50%;
        color: #FFF;
        text-align: center;
        font-size: 1.6vw;
        flex: 0 0 54%;
        margin-top: 0.5rem;
        transition-delay: 0.8s;
    }

    #fv .text-wrap ul {
        list-style: none;
        padding: 0;
        margin-top: 0;
    }

    #fv .text-wrap li {
        display: inline;
        margin: 0 0.5rem;
        background: #fff;
        color: #000;
        padding: 0 0.8rem;
    }

    #fv .fv-img1 {
        width: 90%;
        margin: -5rem auto 0;
        display: block;
    }

    #fv .contents-wrap {
        width: 100%;
        margin-top: -10vw;
        align-items: flex-end;
        line-height: 1.8;
    }

    #fv .contents-img img {
        width: 100%;
        height: auto;
        margin: 0;
    }

    #fv .contents-text {
        padding: 15vw 5vw 3vw;
        box-sizing: border-box;
        color: #fff;
    }

    #fv .contents-text hr {
        width: 9vw;
        border: none;
        height: 1px;
        background-color: #fff;
        margin: 0;
    }

    #fv .contents-text-p {
        font-size: 1.15em;
    }

    #fv .contents-img {
        width: 45%;
    }

    #fv .contents-text {
        width: 55%;
    }

    /* お知らせ */

    .news-section-wrap {
        align-items: center;
        padding: 4rem 0 5.7rem 0;
    }

    .news-section-wrap .left {
        width: 64%;
    }

    .news-section-wrap .left .contents {
        width: 86%;
        margin: 0 auto;
    }

    .news-section-wrap .left .contents article {
        width: 97%;
    }

    .news-section-wrap .left .news-post-wrap {
        margin-top: 4rem;
    }

    .news-post .post-detail p {
        font-size: 1.15em;
        margin: 1.5rem 0;
    }

    .news-post .post-detail .post-title {
        padding-right: 1.5rem;
    }

    .news-section-wrap .right {
        width: 36%;
    }

    .news-section-wrap .right img {
        width: 100%;
    }

    /* ギャラリー */

    #gallery .gallery-wrap {
        width: 88.06735%;
        margin: 0 auto;
        align-items: stretch;
    }

    .gallery-wrap .left {
        width: 40.149626%;
    }

    .gallery-wrap .left .flex div {
        width: 50%;
        min-width: 50%;
        max-width: 50%;
    }

    .gallery-wrap .center {
        width: 39.733998%;
    }

    .gallery-wrap .right {
        width: 20.116376%;
    }

    /* 店舗紹介 */

    #aboutus .contents-wrap .contents .btn-wrap1 a .arrow-white {
        position: absolute;
        right: 1vw;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 0.6rem;
    }

    /* 達成のための店舗作り */

    #philosophy .image-wrap {
        opacity: 1;
        transform: translateY(0);
    }

    /* 下層ページ共通 */

    .page-wrap {
        width: 80%;
        position: relative;
        margin: 0 auto;
        max-width: 1370px;
    }

    .page-wrap.title-wrap {
        padding: 5vw 0 4vw;
    }

    .page-wrap .section-title-en {
        font-size: 6.15em;
    }

    .page-wrap .section-title-ja {
        font-size: 1.92em;
    }

    /* スタッフ紹介 */

    #introduction .contents-wrap .content {
        margin-bottom: 3vw;
        padding: 3vw 15vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #introduction .contents-wrap .image-wrap {
        width: 52%;
    }

    #introduction .contents-wrap .image-wrap img {
        width: 100%;
    }

    #introduction .contents-wrap .text-wrap {
        width: 48%;
    }

    #introduction .content-left .text-wrap {
        padding-left: 6vw;
    }

    #introduction .content-right .text-wrap {
        padding-right: 4vw;
    }

    /* スタッフ紹介ページ */

    #introduction .content-left {
        background: url(assets/image/bg-page-png.webp) top left no-repeat #000;
        background-size: cover;
    }

    #introduction .content {
        align-items: center;
    }

    #introduction .content-right {
        background: url(assets/image/bg-page-reverse.webp) top right no-repeat #000;
        background-size: cover;
    }

    #introduction .text-wrap {
        color: #fff;
    }

    #introduction .text-wrap .text-wrap-store {
        font-size: 1.38em;
        margin: 0 0 1vw;
    }

    #introduction .text-wrap h3 {
        font-size: 2.3em;
        margin: 1vw 0 2vw;
    }

    #introduction .text-wrap h3 span {
        margin-left: 2vw;
        font-size: 0.5em;
    }

    #introduction .text-wrap h4 {
        font-size: 1.53em;
        display: flex;
        align-items: center;
    }

    #introduction h4 .line {
        width: 2vw;
        height: 1px;
        background-color: #fff;
        margin-right: 10px;
    }

    #introduction .text-wrap-p {
        line-height: 1.8;
        margin-bottom: 3vw;
        font-size: 1.1em;
    }

    #introduction .buttons-wrap {
        justify-content: center;
    }

    #introduction .buttons-wrap a {
        padding: 0.5vw 6vw;
    }

    /* スタッフ紹介詳細ページ */

    #detail .title-wrap {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        width: 90%;
        color: #fff;
        padding-bottom: 20.5vw;
    }

    #detail .title-wrap h2 {
        margin-bottom: 2vw;
        font-size: 3.84em;
    }

    #detail .title-wrap .line {
        width: 10vw;
        height: 1px;
        background-color: #fff;
        margin-right: 10px;
    }

    #detail .title-wrap .text-shop {
        font-size: 1.92em;
        margin-bottom: 0;
    }

    #detail .title-wrap h3 {
        font-size: 2.69em;
        margin: 0;
    }

    #detail .title-wrap h3 span {
        font-size: 0.5em;
        margin-left: 1vw;
    }

    #detail .title-wrap .text-career {
        font-size: 1.15em;
        margin-bottom: 0;
    }

    #detail .text-wrap {
        background: url(assets/image/bg-page.webp) top left no-repeat #000;
        background-size: cover;
        position: relative;
        padding: 6vw 4vw 9vw 4vw;
        top: 4vw;
        width: 80%;
    }

    #detail .inner-text-wrap {
        position: relative;
        z-index: 100;
        text-shadow: 0 0 8px #171717;
    }

    #detail .image-wrap {
        position: absolute;
        z-index: 50;
        top: 0;
        right: 0;
        max-width: 70%;
    }

    #detail .image-wrap img {
        width: 100%;
    }

    #detail-section2 {
        background-color: #000;
        padding-bottom: 4vw;
    }

    #detail-section2 .section2-wrap {
        position: relative;
    }

    #detail-section2 .image-wrap-2 {
        position: absolute;
        top: -8.5vw;
        left: 0;
        width: 61.2%;
    }

    #detail-section2 .image-wrap-2 img {
        width: 100%;
    }

    #detail-section2 .text-wrap-2 {
        position: relative;
        top: 11.3vw;
        right: 6vw;
        width: 44%;
        padding: 2.5vw 3.5vw 2vw 3.5vw;
        background: #171717;
        margin: 0 0 0 auto;
    }

    #detail-section2 .text-wrap-2 h3,
    #detail-section2 .message-newcs .right h3 {
        font-size: 2.31em;
        display: flex;
        align-items: center;
        color: #fff;
        margin: 0 0 2vw 0;
    }

    #detail-section2 .text-wrap-2 h3::before,
    #detail-section2 .message-newcs .right h3::before {
        content: "";
        width: 2vw;
        height: 1px;
        background: #fff;
        margin-right: 0.6rem;
    }

    #detail-section2 .text-wrap-2 p,
    #detail-section2 .message-newcs .right p {
        color: #fff;
        font-size: 1em;
        line-height: 1.9;
    }

    #detail-section2 .message-newcs {
        position: relative;
        top: 15vw;
        left: 0;
        right: 0;
        margin: auto;
        justify-content: space-between;
        align-items: end;
        width: 81.3%;
        padding-bottom: 19.5vw;
    }

    #detail-section2 .message-newcs .left {
        width: 45.5%;
    }

    #detail-section2 .message-newcs .left img {
        width: 100%;
    }

    #detail-section2 .message-newcs .right {
        width: 41.2%;
        margin-right: 4.5vw;
    }

    /* フッター */

    footer p {
        font-size: 1.54em;
        padding: 4.5rem 0;
    }

}

@media screen and (max-width: 769px) {

    .pc {
        display: none !important;
    }

    main {
        padding-top: 108px;
    }

    img,
    iframe {
        max-width: 100%;
    }

    /* モーダル */

    .modal-inner {
        width: 60%;
    }

    .modal-inner .content .wrap {
        background: #dfdfdf;
        padding: 1rem 0 1.5rem 0;
    }

    .modal-inner .content,
    .modal-inner .content img:not(a img) {
        width: 100%;
    }

    .modal-inner .content p {
        font-size: 1.15em;
    }

    .modal-inner .content p::before,
    .modal-inner .content p::after {
        content: "";
        width: 1.5rem;
        height: 0.5px;
        background: #000;
        margin: 0 0.6rem;
    }

    .modal-inner .content a {
        background: none;
        color: #000;
        border: 0.5px solid #000;
        padding: 0 2vw;
        display: flex;
        align-items: center;
        width: fit-content;
        margin: 1rem auto 0;
        font-size: 0.85em;
    }

    .modal-inner .content a .line {
        margin-right: 0.6rem;
    }

    .modal-inner .content a .arrow-wrap {
        background: none;
    }

    /* ヘッダー */

    #header {
        position: fixed;
        width: 100%;
        z-index: 200;
        top: 0;
        transition: background-color 0.3s;
        background-color: transparent;
    }

    header .contents-wrap {
        padding: 25px 17px 25px 14px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    }

    header .logo {
        margin: 0;
    }

    header .logo a img {
        display: block;
        width: 73%;
    }

    header .buttons-wrap {
        display: flex;
        align-items: center;
    }

    header .header-nav_language {
        margin-right: 1.6rem;
    }

    .arrow-menu {
        display: inline-block;
        margin-right: 6px;
        width: 4px;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 10px solid #fff;
        vertical-align: middle;
    }

    .arrow-menu.open {
        transform: rotate(90deg);
    }

    .sub-menu {
        display: none;
        list-style: none;
        padding: 0;
        position: fixed;
        top: -353px;
        left: 0;
        width: 100%;
        background-color: #353631;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
        height: auto;
        overflow: hidden;
        z-index: 1000;
        margin: 0;
        box-shadow: 0 -0.5px 0 0 white;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
    }

    .sub-menu.open {
        opacity: 1;
        pointer-events: auto;
    }

    .sub-menu ul {
        list-style: none;
        padding: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 2vw;
        text-align: left;
    }

    .sub-menu ul a {
        color: #fff;
        text-decoration: none;
    }

    .menu-item a {
        cursor: pointer;
        color: #fff;
    }

    .sub-menu-columns {
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        gap: 2rem;
        box-sizing: border-box;
    }

    .menu-left,
    .menu-right {
        width: calc(50% - 0.5rem);
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        font-size: 15px;
    }

    .menu-left li,
    .menu-right li {
        margin-bottom: 0.8rem;
    }

    .menu-left li a,
    .menu-right li a {
        display: block;
        width: 100%;
        white-space: nowrap;
    }

    .submenu {
        padding-left: 1rem;
        margin-top: 0.3rem;
        font-size: 11px;
    }

    .menu-toggle {
        color: #fff;
        text-decoration: none;
        padding: 7px 15px;
        height: 0.7rem;
        position: relative;
        display: inline-block;
        cursor: pointer;
        margin-left: 0.5rem;
    }

    .menu-toggle span {
        display: block;
        height: 1px;
        background-color: white;
        position: absolute;
        left: 0;
        right: 0;
        transition: background-color 0.3s ease;
    }

    .menu-toggle span:nth-child(1) {
        top: 0;
        width: 70%;
    }

    .menu-toggle span:nth-child(2) {
        top: 50%;
        width: 100%;
        left: 0;
    }

    .menu-toggle span:nth-child(3) {
        bottom: 0;
        width: 70%;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(12px) rotate(45deg);
        height: 2px;
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
        height: 2px;
    }

    .gtranslate_wrapper .glink {
        margin-right: 0.5rem;
    }

    /* FV */

    #fv {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #fv h2 {
        width: 75%;
        margin: 0 auto;
    }

    #fv h2 img {
        width: 87%;
        height: auto;
    }

    #fv h3 {
        font-size: 1.54em;
        margin-bottom: 2vw;
    }

    #fv h4 {
        font-size: 1.15em;
        margin-top: 0.6rem;
    }

    #fv h4 span {
        color: #000;
        background-color: #fff;
    }

    #fv .title-wrap {
        position: relative;
    }

    #fv .fv-h2_1 {
        mix-blend-mode: exclusion;
    }

    #fv .fv-h2_2 {
        margin-left: 13vw;
        width: 83% !important;
    }

    #fv .text-wrap {
        width: 100%;
        color: #FFF;
        text-align: center;
        font-size: 1.54em;
        transition-delay: 0.8s;
    }

    #fv .text-wrap p {
        margin: 1rem 0 0.25rem 0;
    }

    #fv .text-wrap ul {
        list-style: none;
        padding: 0;
        margin-top: 0;
    }

    #fv .text-wrap li {
        display: inline;
        margin: 0 0.5rem;
        background: #fff;
        color: #000;
        padding: 0 0.5rem;
        font-size: 0.8em;
    }

    #fv .fv-img1-sp {
        width: 100%;
        margin: 1.6rem auto 0;
        display: block;
    }

    #fv .contents-wrap {
        width: 100%;
        margin-top: -44vw;
        align-items: flex-end;
        line-height: 1.8;
    }

    #fv .contents-img {
        width: 50%;
    }

    #fv .contents-img img {
        width: 100%;
        transition-delay: 1.6s;
    }

    #fv .contents-text,
    .news-section-wrap {
        padding: 6vw 5.5vw 7vw;
        box-sizing: border-box;
        color: #fff;
    }

    #fv .contents-text hr {
        width: 41vw;
        border: none;
        height: 1px;
        background-color: #fff;
        margin: 0;
    }

    #fv .contents-text-p {
        font-size: 0.85em;
        line-height: 1.6;
    }

    /* お知らせ */

    #news .section-title-en {
        font-size: 18px;
    }

    #news h2 {
        font-size: 28px;
    }

    #news img {
        width: 100%;
        height: 52vw;
        object-fit: contain;
    }

    .news-section-wrap .left .contents .btn-wrap a {
        margin: 0;
    }

    #news .arrow-wrap img {
        height: 8px;
    }

    /* ギャラリー */

    #gallery .gallery-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    #gallery .left,
    #gallery .center {
        width: 50%;
    }

    #gallery .right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .gallery-wrap .right .img-wrap {
        width: 33.333%;
    }

    #gallery .right img {
        width: 100%;
    }

    #gallery .left div,
    #gallery .center img {
        display: flex;
        width: 100%;
    }

    .modal-content {
        margin: auto;
        display: block;
        width: 90%;
        height: auto;
    }

    .modal-close {
        top: 10px;
        right: 15px;
        font-size: 35px;
    }

    /* PV */

    #pv .video-wrap {
        width: 86%;
        padding: 3rem 0;
    }

    /* 店舗紹介 */

    #aboutus {
        padding: 30px 0 40px;
    }

    #aboutus .section-title-en {
        font-size: 18px;
    }

    #aboutus h2 {
        font-size: 28px;
    }

    #aboutus .title-wrap .right .line {
        width: 50.5vw;
    }

    #aboutus .title-wrap .right .line {
        width: 50vw;
        margin-left: 1rem;
    }

    #aboutus .contents-wrap {
        width: 89.5%;
        margin: 0 auto;
    }

    #aboutus .contents-wrap .contents {
        width: 100%;
        margin: 28px auto 0;
    }

    #aboutus .contents-wrap .contents .store-name {
        font-size: 18px;
        margin: 0 0 10px 0;
    }

    #aboutus .contents-wrap .contents .store-name::before {
        width: 4.3vw;
    }

    #aboutus .contents-wrap .contents a {
        display: inline-flex;
        align-items: center;
    }

    #aboutus .contents-wrap .contents .flex:not(.mask) {
        padding-bottom: 30px;
    }

    #aboutus .contents-wrap .contents p:not(.store-name, .mask p) {
        display: inline-block;
        font-size: 13px;
        margin: 15px 0 25px 0;
        line-height: 1.9;
    }

    #aboutus .contents-wrap .contents p:not(.store-name, .mask p) span {
        display: block;
    }

    #aboutus .contents-wrap .contents p:not(.store-name, .mask p) br {
        display: none;
    }

    #aboutus .contents-wrap .contents .btn-wrap a {
        font-size: 12px;
    }

    #aboutus .contents-wrap .contents .btn-wrap1 {
        margin: 0 0 20px 0;
    }

    #aboutus .contents-wrap .contents .btn-wrap1 a {
        padding: 5px 14px;
    }

    #aboutus .contents-wrap .contents .btn-wrap2 a {
        padding: 5px 14px;
    }

    /* 達成のための店舗作り */

    #philosophy {
        overflow: hidden;
    }

    #philosophy .contents-wrap {
        display: flex;
        flex-direction: column-reverse;
    }

    #philosophy .title-wrap,
    #philosophy .image-wrap {
        width: auto;
    }

    #philosophy .image-wrap {
        padding-bottom: 30px;
        height: 325px;
    }

    #philosophy .title-wrap {
        padding: 50px 0 60px;
    }

    #philosophy .title-wrap .section-title-en {
        font-size: 18px;
        line-height: 1.4;
    }

    #philosophy .title-wrap h2 {
        font-size: 28px;
    }

    #philosophy .title-wrap .section-title-ja {
        margin: 0 0 25px 0;
    }

    #philosophy .title-wrap .line {
        width: 130px;
    }

    #philosophy .title-wrap .text-wrap {
        width: 100%;
        padding-top: 45px;
    }

    #philosophy .title-wrap .text-wrap p {
        font-size: 1.5em;
        line-height: 1.6;
        margin: 0 auto 30px;
    }

    /* 提案 */

    #proposal {
        padding: 94px 0 60px;
    }

    #proposal .title-wrap .section-title-en {
        font-size: 18px;
    }

    #proposal .title-wrap .section-title-ja {
        font-size: 28px;
        margin: 18px 0 27px 0;
    }

    #proposal .title-wrap .line {
        width: 120px;
    }

    #proposal .line-btn {
        width: 55%;
        margin: 2.2rem auto;
    }

    .proposal-content {
        width: 100%;
    }

    .proposal-content .left {
        width: auto;
        margin-left: 0%;
    }

    .proposal-content img {
        width: 100%;
        height: 82vw;
        object-fit: contain;
    }

    .proposal-content .right {
        width: 100%;
    }

    .proposal-content p.num {
        font-size: 80px;
        line-height: 1;
        margin-bottom: 20px;
    }

    .proposal-content .title {
        margin: 0 auto 20px !important;
        font-size: 18px;
    }

    .proposal-content .line {
        width: 100px;
    }

    .proposal-content.reverse-content {
        display: flex;
        flex-direction: column-reverse;
    }

    .proposal-content .text p {
        width: 89.5%;
    }

    .proposal-content p:not(.num, .title) {
        margin: 20px auto 0;
        font-size: 13px;
        line-height: 1.8;
    }

    /* ご予約の流れ */

    #reservation {
        padding: 80px 0 0 0;
    }

    #reservation .section-title-en {
        font-size: 18px;
    }

    #reservation .title-wrap .section-title-ja {
        font-size: 28px;
        margin: 5px 0 30px 0;
    }

    #reservation .title-wrap .line {
        width: 120px;
    }

    #reservation .step-wrap {
        width: 300px;
        margin: 0 auto;
    }

    #reservation .step-wrap .step {
        width: 100%;
        margin-top: 80px;
    }

    #reservation .step-wrap .speech-bubble {
        position: relative;
        text-align: center;
        margin-bottom: 20px;
    }

    #reservation .step-wrap .speech-bubble img {
        width: 196px;
        margin-left: 5%;
    }

    #reservation .step-wrap .speech-bubble .num {
        left: 28px;
        font-size: 80px;
        position: absolute;
        top: 0px;
    }

    #reservation .step-wrap .speech-bubble .text {
        left: 81px;
        font-size: 18px;
        position: absolute;
        top: -8px;
    }

    #reservation .step-wrap .step1 .line-btn {
        margin: 0 auto;
    }

    #reservation .step-wrap .step1 .line-btn p {
        margin: 0;
    }

    #reservation .step-wrap .step2 .line-step2 {
        width: 74%;
    }

    #reservation .step-wrap .step3 .line-step3 {
        width: 43%;
        margin-bottom: 3rem;
    }

    /* 交通アクセス */

    #access {
        padding: 50px 0 0;
    }

    #access .section-title-en {
        font-size: 18px;
    }

    #access .title-wrap .section-title-ja {
        font-size: 28px;
        margin: 0 auto 33px;
    }

    #access .title-wrap .line {
        width: 120px;
    }

    #access .gmap-wrap {
        width: 100%;
    }

    #access .gmap-wrap iframe {
        height: 53vw;
    }

    #access .contents-wrap {
        width: 89.5%;
        margin: 0 auto 30px;
    }

    #access .contents-wrap .contents {
        width: 100%;
        margin-top: 30px;
    }

    #access .contents-wrap .contents .store-name {
        font-size: 18px;
    }

    #access .contents-wrap .contents .store-name::before {
        width: 20px;
        height: 2px;
    }

    #access .contents-wrap .contents .youtube-wrap iframe {
        height: 49vw;
    }

    #access .staff-wrap {
        position: relative;
        margin: 0 auto;
        padding: 2.5rem 0 0;
        width: 100%;
    }

    #access .staff-wrap .left,
    #access .staff-wrap .center {
        display: inline-block;
        box-sizing: border-box;
        width: 48%;
    }

    #access .staff-wrap .left {
        margin: 318px 0 7rem;
    }

    #access .staff-wrap .center {
        position: absolute;
        right: 0;
        bottom: 0;
        margin-bottom: 45px;
    }

    #access .staff-wrap p:not(.right p) {
        font-size: 13px;
        margin-left: 10px;
    }

    #access .staff-wrap p:not(.right p)::before {
        width: 14px;
        margin-right: 8px;
    }

    #access .staff-wrap .right {
        width: 100%;
        width: 100%;
        position: absolute;
        top: 3rem;
    }

    #access .staff-wrap .right .logo-color {
        width: 133px;
    }

    #access .staff-wrap .right .text {
        font-size: 18px;
        padding: 24px 0 10px;
    }

    #access .staff-wrap .left img,
    #access .staff-wrap .center img {
        width: auto;
        height: 80vw;
        object-fit: cover;
    }

    #access .staff-wrap .right .flex {
        width: 100%;
    }

    #access .staff-wrap .right .line-btn {
        width: 200px;
        margin: 0 auto;
    }

    #access .staff-wrap .right .line-btn p {
        padding: 0 1.5vw 0 0.5vw;
    }

    #access .staff-wrap .right .reservation-btn {
        width: 134px;
        margin: 10px auto;
        padding: 0.5rem 2rem;
    }

    /* google MAP */

    .map-wrap {
        width: 100%;
        aspect-ratio: 1082 / 565;
        /* 比率を固定（CSS対応ブラウザ用） */
    }

    /* aspect-ratio に対応していないブラウザ用のフォールバック */
    .map-wrapper::before {
        content: "";
        display: block;
        padding-top: calc(100% * (207 / 396));
    }

    .map-legend {
        bottom: 3%;
        font-size: 13px;
        padding: 0;
        border: 2px solid #011C6D;
    }

    .map-legend li {
        padding: 2px 5px;
    }

    .map-legend .circle {
        width: 20px;
        height: 20px;
    }

    .map-legend .circle img {
        height: 11px;
        padding-top: 3px;
    }

    /* キャンペーン */

    .campaign {
        position: relative;
    }

    .campaign-img-wrap {
        background: #000;
    }

    .campaign-img-wrap img {
        width: 100%;
        opacity: 0.2;
        height: 350px;
        object-fit: cover;
        object-position: 36% center;
    }

    .campaign .contents {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 3rem auto;
        width: 80%;
        height: fit-content;
    }

    .campaign .contents p {
        color: #fff;
        text-align: center;
    }

    .campaign .br-sp {
        display: inline;
    }

    .campaign .contents .line-btn {
        margin: 2.6rem auto 0;
        padding: 0 5vw;
    }

    .campaign .contents .text1 {
        font-size: 1.3em;
    }

    .campaign .contents .text2 {
        font-size: 1.4em;
        border-bottom: 1px solid #fff;
        width: fit-content;
        margin: 0 auto;
        padding-bottom: 2rem;
    }

    /* お問い合わせフォーム */

    .contact-form {
        width: 76vw;
        margin: 2.5rem auto 0;
    }

    .contact-form .item_wrap {
        display: flex;
        align-items: center;
    }

    .contact-form .last {
        align-items: flex-start !important;
    }

    .contact-form .item_title {
        display: flex;
        align-items: center;
        width: 29vw;
        max-width: 29vw;
        min-width: 29vw;
    }

    .contact-form .long .item_title {
        width: 35.5vw;
        max-width: 35.5vw;
        min-width: 35.5vw;
    }

    .contact-form p {
        font-size: 0.85em;
        margin: 0.75rem 0;
    }

    .contact-form .last .item_text,
    .contact-form .last .required {
        margin: 1rem 0;
    }

    .contact-form p.required,
    .contact-form p.optional {
        padding: 0 0.5rem;
        margin-left: 1.4vw !important;
        border-radius: 5px;
    }

    .contact-form input:not(.wpcf7-submit) {
        width: 43.5vw;
        height: 2rem;
        padding: 0.1rem 1vw;
        font-size: 1em;
    }

    .contact-form .long input {
        width: 37.5vw;
    }

    .contact-form textarea {
        width: 37.5vw;
        height: 9rem;
        padding: 1vw;
        line-height: 1.6;
        font-size: 1em;
    }

    .contact-form .submit-btn .wpcf7-submit {
        width: 61vw;
        padding: 0.5rem 0;
    }

    /* スタッフ紹介詳細ページ */

    #detail .title-wrap {
        position: relative;
        color: #fff;
        padding-bottom: 22vw;
    }

    #detail .title-wrap h2 {
        margin-bottom: 5vw;
        font-size: 1.77em;
        line-height: 1.3;
    }

    #detail .title-wrap .line {
        width: 8vw;
        height: 1px;
        background-color: #fff;
        margin-right: 10px;
    }

    #detail .title-wrap .text-shop {
        font-size: 1em;
        margin-bottom: 0;
    }

    #detail .title-wrap h3 {
        font-size: 1.38em;
        margin: 0.4rem 0 0 0;
    }

    #detail .title-wrap h3 span {
        font-size: 0.72em;
        margin-left: 4vw;
    }

    #detail .title-wrap .text-career {
        font-size: 0.85em;
        margin-bottom: 0;
    }

    #detail .text-wrap {
        background: url(assets/image/bg-page.webp) top left no-repeat #000;
        background-size: cover;
        position: relative;
        padding: 10vw 4vw 13vw 4vw;
        top: 19vw;
        width: 66%;
    }

    #detail .inner-text-wrap {
        position: relative;
        z-index: 100;
        text-shadow: 0 0 8px #171717;
    }

    #detail .image-wrap {
        position: absolute;
        z-index: 50;
        top: 0;
        right: 0;
        max-width: 61%;
    }

    #detail .image-wrap img {
        width: 100%;
    }

    #detail-section2 {
        background-color: #000;
        padding-bottom: 12vw;
    }

    #detail-section2 .section2-wrap {
        position: relative;
    }

    #detail-section2 .image-wrap-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    #detail-section2 .image-wrap-2 img {
        width: 100%;
    }

    #detail-section2 .text-wrap-2 {
        position: relative;
        top: 44.5vw;
        right: 0;
        width: 76%;
        padding: 6vw 4.5vw 4vw 4.5vw;
        background: #171717;
        margin: 0 0 0 auto;
    }

    #detail-section2 .text-wrap-2 h3,
    #detail-section2 .message-newcs .right h3 {
        font-size: 1.54em;
        display: flex;
        align-items: center;
        color: #fff;
        margin: 0 0 4vw 0;
    }

    #detail-section2 .text-wrap-2 h3::before,
    #detail-section2 .message-newcs .right h3::before {
        content: "";
        width: 4vw;
        height: 1px;
        background: #fff;
        margin-right: 0.3rem;
        margin-left: 0.4rem;
    }

    #detail-section2 .text-wrap-2 p,
    #detail-section2 .message-newcs .right p {
        color: #fff;
        font-size: 0.88em;
        line-height: 1.75;
    }

    #detail-section2 .message-newcs {
        padding: 53vw 0 0 0;
    }

    #detail-section2 .message-newcs .left,
    #detail-section2 .message-newcs .left img {
        width: 100%;
    }

    #detail-section2 .message-newcs .right {
        width: 90%;
        margin: 1.7rem auto 0;
    }

    /* フッター */

    footer p {
        font-size: 1.15em;
        padding: 2rem 0;
    }

    /* アコーディオン */

    .accordion-menu {
        margin: 4rem auto 0;
        width: 80%;
        padding: 3rem 1rem;
    }

    .accordion-header {
        font-size: 1.05em;
        padding: 1.3rem 0 1.3rem 1rem;
    }

    .accordion-header::after {
        right: 1rem;
    }

    .accordion-item.active .accordion-header::after {
        width: 0.7rem;
        height: 1px;
    }

    .accordion-item .course-container {
        margin: 0 1rem;
    }

    .accordion-item .course-container .course-title img {
        width: 20rem;
    }

    .accordion-item .course-container .course-detail .course-description {
        font-size: 1em;
        margin: 0 0 0.6rem 0;
    }

    .accordion-item .course-container .course-detail .course-includes {
        font-size: 0.75em;
        margin: 0;
    }

    .accordion-item .course-container .course-detail .course-note {
        font-size: 0.75em;
        margin: 0.7rem 0 0 0;
    }

    .course-title h4 {
        font-size: 1.1rem;
    }

    .menu-item-header::after {
        top: 15px;
        transform: none;
    }
}