@charset "UTF-8";

:root {
    --primary-white: #FFF;
    --primary-black: #2F2F2F;
    --primary-blackLow:  rgba(47, 47, 47, 0.74);
    --primary-glay: rgba(47, 47, 47, 0.80);
    --primary-beige: #EAEAE4;
    --primary-beigeSchool: rgba(219, 216, 206, 0.70);
    --primary-beigeSalon: rgba(238, 238, 238, 0.70);
    --primary-pink: #C48277;
    --primary-green: #356568;
    --primary-greenLow: rgba(53, 101, 104, 0.20);
    --secondary-green:rgba(0, 75, 50, 0.20);
}

/* ===========================
main
============================*/
/* sectionschoolClayWs */
/* 画像ZoomInアニメ */
.mainImg__outer {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.mainImg {
    width: 100%;
}

.mainImg__outer img {
    /* img要素に以下のアニメーションプロパティが適用されます: */
    animation: zoom-in 4s linear 0s 1 normal both;
}

.mainTopic {
    color: #FFF;
    text-align: center;
    font-family: Marcellus;
    font-size: 1.6rem;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-49%);
    width: 96%;
}

.mainTopic span {
    letter-spacing: 3.2px;
}

.section--schoolClayWs p {
    width: 270px;
    color: var(--primary-green);
    font-family: "Noto Serif JP";
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    margin: 50px auto 0;
}

.section--schoolClayWs {
    position: relative;
}

.section--schoolClayWs::after {
    content: "";
    width: 90.6%;
    height: 0.6px;
    background-color: var(--primary-green);
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}

/* sectionIbtt pc*/
@media screen and (min-width:1025px) {
    .mainTopic {
        font-size: 3.7rem;
        letter-spacing: 7.4px;
        top: 50px;
        transform: translateX(-50%);
        width: 100%;
    }

    .section--schoolClayWs p {
        width: 337px;
        font-size: 2rem;
        letter-spacing: 2px;
        margin: 110px auto 0;
    }

    .section--schoolClayWs::after {
        width: 37.1%;
        bottom: -12px;
        min-width: 500px;
    }
}
/* pc 1025px */

/* sectionIbtt tb */
@media screen and (min-width: 768px) and (max-width: 1024px) {
        .mainTopic {
            font-size: 2.2rem;
            letter-spacing: 4.4px;
            top: 35px;
            width: 100%;
            transform: translateX(-50%);
        }

        .section--schoolClayWs p {
            width: 270px;
        }

        .section--schoolClayWs::after {
            width: 38.8%;
            bottom: -12px;
            max-width: 450px;
        }
}
/* tb 768px-1024px */

/* sectionCourse */
.enTxt {
    color: rgba(255, 255, 255, 0.70);
    text-align: center;
    font-family: Marcellus;
    font-size: 2.2rem;
    letter-spacing: 4.4px;
    text-transform: uppercase;
    margin-top: 70px;
}

.section--course h3 {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 2px;
    position: relative;
}

.section--course h3:after {
    content: "";
    width: 0.6px;
    height: 50px;
    background-color: var(--primary-glay);
    position: absolute;
    bottom: -74px;
    left: 50%;
    transform: translateX(-50%);
}

.course__desk span {
    margin-top: 16px;
    display: inline-block;
}

.txt,
.courseDesk__item p,
.section--clay p {
    font-size: 1.6rem;
    letter-spacing: 0.96px;
}

.course__desk {
    width: 91.4%;
    margin: 100px auto 0;
}

.courseImg--sp {
    width: 82.7%;
    margin: 40px 0 0 auto;
    display: block;
}

.courseImg--tb,
.courseImg--pc {
    display: none;
}

.courseDesk__list {
    margin: 95px auto 0;
    width: 91.4%;
} 

.courseDesk__list ul {
    padding: 16px 10px;
    margin-top: 20px;
    border-radius: 1px;
    background: var(--primary-beigeSchool);
    gap: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.courseDesk__list ul::before {
    content: "";
    width: 100%;
    height: 0.6px;
    background-color: var(--primary-glay);
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
}

h3,
.courseDesk__item h4,
.openingInfo__outer dt {
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.8; /* 30.6px */
    letter-spacing: 3.4px;
}

.courseDesk__item h4 {
    width: 100%;
}

.goal__list li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.goal__list img {
    width: 19px;
    margin-top: 3px;
}

.courseDesk__item--02,
.courseDesk__item--03 {
    margin-top: 80px;
}

.bold {
    color: var(--primary-green);
    font-weight: 700;
}

.suggest__txt--small {
    color: var(--primary-blackLow);
    font-size: 1.5rem !important;
    letter-spacing: 0.9px !important;
}

.example__list {
    margin-top: 30px;
}

.example__list img,
.example__list p {
    width: 87.6%;
    display: block;
    margin: 0 auto;
}

.example__list p {
    margin: 16px auto 0;
    color: var(--primary-blackLow);
    line-height: 1.4;
}

.indent {
    text-indent: -16px;
    padding-left: 16px;
    display: inline-block;
}

.bring__list .bold {
    color: var(--primary-black);
}

.wsImg--sp {
    width: 100%;
    margin: 10px auto 0;
}

.wsImg--pc {
    display: none;
}

/* sectionCourse pc*/
@media screen and (min-width:1025px) {
    .enTxt {
        font-size: 4.8rem;
        letter-spacing: 20.16px;
        margin-top: 190px;
    }

    .section--course h3 {
        font-size: 2.4rem;
        letter-spacing: 4.8px;
    }

    .section--course h3:after {
        height: 90px;
        bottom: -120px;
    }

    .course__desk span {
        margin-top: 10px;
    }

    .course__desk {
        width:  68%;
        margin: 196px auto 0;
    }

    .courseImg--pc {
        width: 68.8%;
        margin: 80px 0 0 auto;
        display: block;
    }

    .courseImg--sp {
        display: none;
    }

    .courseDesk__list {
        margin: 120px auto 0;
        width: 81.7%;
        max-width: 1900px;
    } 

    .courseDesk__list ul {
        gap: 10px;
    }

    h3,
    .courseDesk__item h4,
    .openingInfo__outer dt {
        font-size: 2rem;
        line-height: 1.5; /* 30.6px */
        letter-spacing: 2px;
    }

    .courseDesk__item h4 {
        width: 100%;
        margin-left: 6px; 
    }

    .example__group {
        display: flex;
        gap: 60px;
    }
        
    .example__list {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        flex: 1; 
    }

    .example__list img,
    .example__list p {
        width: 92.1%;
    }

    .example__list p {
        margin: 26px auto 0;
    }

    .wsImg--pc {
        width: 78.4%;
        margin: 50px auto 0;
        display: block;
    }

    .wsImg--sp {
        display: none;
    }

    .bring__list {
        padding-left: 34px !important;
    }

    .bring__list .bold {
        text-indent: -16px;
        display: inline-block;
    }
}
/* pc 1025px */

/* sectionCourse tb */
@media screen and (min-width: 768px) and (max-width: 1024px) {
        .enTxt {
            font-size: 2.7rem;
            letter-spacing: 11.34px;
            margin-top: 100px;
        }

        .section--course h3:after {
            height: 50px;
            bottom: -70px;
        }

        .course__desk {
            width:  76.8%;
            margin: 100px auto 0;
        }

        .courseDesk__item--02, 
        .courseDesk__item--03 {
            margin-top: 50px;
        }

        .courseImg--tb {
            display: block;
            width: 70.5%;
            margin: 50px 0 0 auto;
        }

        .courseImg--sp, 
        .courseImg--pc {
            display: none;
        }

        .courseDesk__list {
            margin: 100px auto 0;
            width: 87.5%;
        }

         .example__group {
            display: flex;
        }
   
        .example__list {
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            flex: 1; 
        }

        .example__list img,
        .example__list p {
            width: 84.8%;
        }

        .example__list p {
            margin: 10px auto 0;
        }

        .wsImg--sp {
            width: 73.9%;
            margin: 50px auto 0;
            display: block;
        }

        .wsImg--pc {
            display: none;
        }

        .bring__list {
            padding-left: 28px !important;
        }

        .bring__list .bold {
            text-indent: -16px;
            display: inline-block;
        }
}
/* tb 768px-1024px */

/* sectioncourseInfo */
.setion--courseInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.openingInfo__outer {
    display: flex;
    width: 91.4%;
    max-width: 500px;
    padding: 14px 0px;
    margin-top: 100px;
    flex-direction: column;
    align-items: center;
    border-radius: 1px;
    background: rgba(53, 101, 104, 0.10);
    box-shadow: 0px 1px 4px 0px var(--line, rgba(47, 47, 47, 0.30));
}

.openingInfo__outer dt {
    text-align: center;
    color: var(--primary-green);
    position: relative
}

.openingInfo__outer dt::after {
    content: "";
    width: 280px;
    height: 0.6px;
    background-color: var(--primary-green);
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}

.openingInfo__outer dd {
    font-family: "Noto Serif JP";
    text-align: center;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 1.02px;
    margin-top: 25px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info__outer,
.courseTable {
    display: flex;
    flex-direction: column;
    align-self: start;
    width: 343px;
    margin: 0 auto;
}

.topic--courseInfo {
    margin-top: 80px;
}

.courseTitle {
    margin-top: 16px;
    color: var(--primary-green);
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.8; /* 30.6px */
    letter-spacing: 1.7px;
}

/* table */
.courseTable {
    flex-direction: row;
    margin-top: 20px;
}

.table__class {
    display: flex;
}

.courseTable th {
    width: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--primary-glay);
    border-right: 1px solid var(--primary-glay);
    border-left: 1px solid var(--primary-glay);
}

.tableItem {
    display: flex;
}

.courseTable td {
    width: 264px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    background-color: var(--primary-beigeSalon);
    border-top: 1px solid var(--primary-glay);
    border-right: 1px solid var(--primary-glay);
}

.table__desk  {
    text-align: start !important;
    width: 210px;
}

.place span:nth-of-type(2) {
    width: auto;
}

.table__desk--place,
.table__link,
.else span {
    margin-top: 8px;
    display: inline-block;
}

.table__link {
    width: 210px !important;
    text-align: start;
}

.tableItem--else {
    border-bottom: 1px solid var(--primary-glay);
}

.place {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.capacity p {
    width: 210px;
    text-align: center;
}

/* table文字設定 */
.title__class,
.tableItem th,
.place {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4; /* 22.4px */
    letter-spacing: 0.64px;
}

.fee__outer p {
    color: var(--primary-blackLow);
    text-align: center;
    margin-top: 20px;
}

.fee {
    color: var(--primary-black) !important;
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.8px;
}

.tax,
.table__desk,
.table__link {
    color: var(--primary-black);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.56px;
}

.table__link:hover {
    color: var(--primary-glay);
    border-bottom: 0.6px solid var(--primary-glay);
}

.term,
.capacity,
.else {
    font-size: 1.6rem;
    line-height: 1.4; /* 22.4px */
    letter-spacing: 0.64px;
    padding-top: 20px;
}

.term {
    text-align: center;
}

.place span,
.capacity span,
.else span {
    color: var(--primary-blackLow);
}

.txt__black {
    color: var(--primary-black) !important;
}

/* contact */
.contact strong {
    margin-top: 60px;
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.8; /* 30.6px */
    letter-spacing: 1.7px;
    display: block;
}

.btn__inner {
    display: flex;
    width: 280px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 1px;
    background: var(--primary-green);
    box-shadow: 2px 4px 4px 0px var(--line, rgba(47, 47, 47, 0.30));
}

.btn__inner:hover {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5), 0 0 50px rgba(128, 128, 128, 0.1) ;
    border-color: transparent;
}

.btn__inner:first-of-type {
    margin-top: 20px;
}

.btn__inner:last-of-type {
    margin-top: 24px;
}

.contact p {
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.5; /* 25.5px */
    letter-spacing: 1.02px;
}

.contact {
    padding-bottom: 90px;
}

/* sectionCourseInfo pc*/
@media screen and (min-width:1025px) {
    .openingInfo__outer {
        width: 720px;
        max-width: initial;
        display: block;
        margin: 180px auto 0 0;
        padding-bottom: 30px;
    }

    .openingInfo__outer dt::after {
        width: 658px;
        bottom: -12px;
    }

    .openingInfo__outer dd {
        margin-top: 41.5px;
    }

    .info__outer,
    .courseTable {
        width: 1090px;
        justify-content: center;
    }

    .topic--courseInfo {
        margin-top: 85px;
    }

    .courseTitle {
        margin-top: 0;
        font-size: 2rem;
        line-height: 1.5; 
        letter-spacing: 2px;
    }

    /* table */
    .courseTable {
        overflow-x: hidden;
        margin-top: 15px;
    }

    .courseTable th {
        width: 250px;
    }

    .courseTable td {
        width: 840px;
        justify-content: flex-start;
        padding-left: 40px;
        align-items: flex-start;
    }
    
    .schedule,
    .term,
    .capacity {
        padding-top: 20px;
    }

    .fee__outer {
        flex-direction: row !important;
        gap: 20px;
        align-items: flex-end !important;
    }

    .table__desk  {
        width: auto;
    }

    .fee__outer .table__desk {
        font-size: 1.4rem;
        line-height: 1.4; /* 19.6px */
        letter-spacing: 0.56px;
    }

    .place {
        display: flex;
    }

    .place div {
        gap: 20px;
        display: flex;
        align-items: center;
    }

    .table__link,
    .capacity p {
        width: auto !important;
    }

    .else p {
        text-align: start;
    }

    /* table文字設定 */
    .tableItem th,
    .place {
        font-size: 1.8rem;
        letter-spacing: 0.72px;
    }

    /* contact */
    .contact strong {
        margin-top: 70px;
        font-size: 2rem;
        line-height: 1.5; /* 30.6px */
        letter-spacing: 2px;
        text-align: center;
    }

    .contactBtn__outer {
        display: flex;
        gap: 24px;
        margin-top: 20px;
    }

    .btn__inner {
        margin-top: 0 !important;
    }
}
/* pc 1025px */


/* sectionCourseInfo カスタムブレイクポイント */
@media screen and (min-width: 550px) and (max-width: 767.9px) {
    .info__outer,
    .courseTable,
    .title__class {
        width: 500px !important;
    }

    .courseTable td {
        width: 422px;
    }

    .schedule p,
    .term p,
    .table__desk {
        width: 292px;
    }

    .table__link {
        width: 292px !important;
    }

    .table__desk--place,
    .place span {
        text-align: start;
        display: inline-block;
    }
}
/* カスタム　426px-767px */


/* sectionCourseInfo tb */
@media screen and (min-width: 768px) and (max-width: 1024px) {
        .openingInfo__outer {
            width: 550px;
            max-width: initial;
            display: block;
            margin: 110px auto 0 0;
        }

        .openingInfo__outer dt::after {
            width: 502px;
            bottom: -15px;
        }

        .openingInfo__outer dd {
            margin-top: 25px;
        }

        .info__outer,
        .courseTable {
            width: 690px;
        }

        .openingInfo__outer .pcSpan {
            display: inline-block;
        }

        .topic--courseInfo {
            margin-top: 80px;
        }

        .courseTitle {
            margin-top: 4px;
        }

        /* table */
        .courseTable {
            overflow-x: hidden;
            margin-top: 15px;
        }

        .courseTable th {
            width: 135px;
        }

        .courseTable td {
            width: 553px;
        }

        .fee__outer .table__desk {
            line-height: 1.4; /* 19.6px */
            margin-top: 8px;
            display: inline-block;
        }

        .table__desk,
        .table__desk--place,
        .capacity p {
            width: auto !important;
        }

        .else .table__desk {
            width: 496px !important;
        }

        .term,
        .capacity {
            padding-top: 20px;
        }

        .place div {
            display: flex;
            flex-direction: column;
        }

        .table__link {
            width: 284px !important;
            text-align: start;
        }

        /* contact */
        .contact strong {
            margin-top: 70px;
            text-align: center;
        }

        .contactBtn__outer {
            display: flex;
            gap: 24px;
            margin-top: 20px;
        }

        .btn__inner {
            margin-top: 0 !important;
        } 
}
/* tb 768px-1024px */

/* sectionCourseInfo カスタムブレイクポイント */
@media (min-width: 900px) and (max-width: 1150px) {
    .info__outer, 
    .courseTable {
        width: 850px;
        justify-content: center;
    }

    .courseTable th {
        width: 90px;
    }

    .courseTable td {
        width: 760px;
        justify-content: center;
        padding-left: 0;
        align-items: center;
    }

    .table__desk,
    .table__desk--place {
        width: auto !important;
    }

    .fee__outer {
        flex-direction: column !important;
        gap: 8px;
        align-items: center !important;
    }
    
    .fee__outer .table__desk {
        line-height: 1.4; /* 19.6px */
        margin-top: 0;
    }

    .table__link {
        width: 284px !important;
        text-align: start;
    }
    
    .place div {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .else .table__desk {
        width: 496px !important;
    }

     .else p {
        text-align: center;
    }

    /* contact */
    .contact strong {
        margin-top: 70px;
        text-align: center;
    }

    .contactBtn__outer {
        display: flex;
        gap: 24px;
        margin-top: 20px;
    }

    .btn__inner {
        margin-top: 0 !important;
    } 

    /* clay */
    .section--clay img {
        width: 490px !important;
    }
}
/* カスタム　900px-1150px */


/* sectionCourseInfo カスタムブレイクポイント */
@media (max-width: 366px) {
    .info__outer,
    .courseTable,
    .title__class {
        width: 295px !important;
    }

    .courseTable th {
        width: 72px;
    }

    .courseTable td {
        width: 223px;
    }

    .schedule p,
    .term p,
    .table__desk  {
        width: 195px;
    }

    .table__desk--place,
    .place span:nth-of-type(2) {
        text-align: start;
        display: inline-block;
        width: 195px;
    }

    .table__link {
        width: 195px !important;
    }

    .else span {
        width: 205px;
    }
}
/* カスタム　366px */

/* sectionClay */
.section--clay {
    display: flex;
    padding: 80px 7.3% 80px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--primary-beigeSchool);
}

.section--clay h3 {
    text-align: center;
}

.section--clay div {
    margin-top: 30px;
}

.section--clay span {
    display: inline-block;
    margin-top: 16px;
}

.section--clay img {
    margin-top: 40px;
    width: 93.8%;
}

/* sectionClay pc*/
@media screen and (min-width:1025px) {
    .section--clay {
        padding: 140px 0 140px 6.4%;
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 80px;
    }

    .clay__outer {
        width: 672px;
    }

    .section--clay img {
        width: 596px;
    }
}
/* pc 1025px */

/* sectionClay tb */
@media screen and (min-width: 768px) and (max-width: 1024px) {
        .section--clay img {
            width: 83.8%;
            margin: 50px auto 0;
        }
}
/* tb 768px-1024px */

/* sectionLink */
.course__link {
    width: 90.7%;
    max-width: 350px;
    height: 88px;
    padding: 20px 0;
    margin: 70px auto 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1px;
    border: 1px solid var(--primary-blackLow);
    box-shadow: 2px 2px 4px 0px var(--line, rgba(47, 47, 47, 0.10));
    font-family: "Noto Serif JP";
    font-size: 1.5rem;
    line-height: 1.6; /* 24px */
    letter-spacing: 0.6px;
}

.course__link:hover {
    color: #FFF;
    background-color: var(--primary-green);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
    border-color: transparent;
}

.arrow {
    font-size: 1.6rem;
    letter-spacing: 1.6px;
    margin-left: 18px;
}

/* sectionLink pc*/
@media screen and (min-width:1025px) {
    .course__link {
        width: 340px;
        max-width: none;
        padding: 20px 30px;
        margin: 0 auto;
        margin: 160px auto 280px !important;
    }
}
/* pc 1025px */

/* sectionLink tb*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
       .course__link {
            margin: 120px auto 180px!important;
        }
}
/* tb 768px-1024px */

/* 各種 カスタムブレイクポイント */
@media (max-width: 340px) {
    .section--schoolClayWs p {
        width: 240px;
        font-size: 1.4rem;
    }

    .enTxt {
        font-size: 2rem
    }

    .section--course h3 {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    .courseDesk__item h4 {
        letter-spacing: 2.2px;
    } 
}

/* else カスタムブレイクポイント */
@media (min-width: 950px) and (max-width: 1200px) {
    .mainTopic {
        font-size: 3rem;
    }
    
    .enTxt {
        font-size: 3.8rem;
    }
}