@charset "utf-8";
/* ===========================================
common
============================================== */

:root {
    --white: #FFFFFF;
    --background: #FFFEF4;
    --white-back: rgba(255, 255, 255, 0.80);
    --brack-text: #3E3E3E;
    --pink-midashi: #E8918E;
    --contentWidth: 91.4%;
    --contentPadding: 4.2%;
}

html {
    font-size: 62.5%;
}

/* SP Site文字設定 */
.body {
    color: var(--brack-text, #3E3E3E);
    font-family: "Noto Sans JP";
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 1.1px;
}

.nav__topic {
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.7px;
}

.KV__text1 {
    font-family: "Shippori Mincho";
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1.6px;
}

.KV__btntext {
    white-space: nowrap;
}
        
    
.title,
.footer__contact {
    color: var(--pink-midashi, #E8918E);
    font-family: "Shippori Mincho";
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 1.6px;
    text-align: center;
}

.footer__tag {
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.7px;
}

.copy,
.copy__PC {
    color:#333A3A;
    font-size: 1rem;
    line-height: 1;
}

/* PC Site文字設定 */
@media screen and (min-width: 1024px) {
    .body {
        font-size: 1.6rem;
        line-height: 1.5;
        letter-spacing: 1.6px;
    }

    .nav__topic {
        font-size: 1.6rem;
        line-height: 1;
        letter-spacing: 0.8px;
    }

    .KV__text1 {
        font-size: 3.2rem;
        line-height: 1.5;
    }

    .KV__btntext {
        white-space: nowrap;
    }
        
    .title,
    .footer__contact {
        font-size: 3.6rem;
        line-height: 1.5;
        letter-spacing: 3.6px;
    }

    .footer__tag {
        font-size: 1.6rem;
        line-height: 1;
        letter-spacing: 0.8px;
    }

    .copy,
    .copy__PC {
        font-size: 1.2rem;
        line-height: 1;
    }
}/* pc 1024px */

/* 文字設定ここまで */

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
}

/* 下からふわっと出すJQuery用 */
.fadein {
  opacity: 0;
  transform: translateY(40px); /* 下に少しずらしておく */
  transition: all 0.8s ease;   /* 時間とイージングでふわっと感 */
}

.fadein.active {
  opacity: 1;
  transform: translateY(0);    /* 元の位置に戻る */
}

/* ===========================================
header
============================================== */
.header {
    background-color: var(--background, #FFFEF4);
    display: flex;
    height: 60px;
    justify-content: center;
    align-items: center;
    gap: 100px;
    align-self: stretch;
}

.header__logo {
    display: flex;
    width: 160px;
    height: auto;
    justify-content: center;
    align-items: center;
}

.header__btn {
    cursor:pointer;
    width: 35px;
    height: 35px;
    aspect-ratio: 1/1;
}

/* .nav初期表示 */
.nav {
    background: var(--base-beige);
    width: 375px;
    height: 100vh;
    padding-bottom: 130px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    transform: translateX(200%);
    transition: transform 0.4s;
    overflow-y: auto; /* 縦方向にスクロールを有効 */
}

.nav__header {
    background-color: var(--background, #FFFEF4);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

.nav__btn {
    cursor:pointer;
    width: 20px;
    height: 20px;
}

.nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    gap: 30px;
    background: var(--white);
}

.nav__tag {
    width: 250px;
    height: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 0.5px solid #BFBFBF;
}

.nav__tag--1 {
    display: none;
}

.nav__tag--SP {
    display: flex;
}

.nav__tag--PC {
    display: none;
}

.insta {
    display: none;
}

/* .nav.active表示 */
.nav.active {
    transform: translateX(0);
}

@media screen and (min-width: 1024px) {
    .header {
        height: 100px;
        padding: 30px 20px;
        gap: 0;
    }

    .header__logo {
        width: 252px;
        height: 55px;
    }

    .nav {
        background: transparent;
        width: auto;
        height: auto;
        padding: 0;
        position: static;
        transform: translate(0);
    }

    .nav__header,
    .header__btn {
        display: none;
    }

    .nav__list {
        margin-left: 160px;
    }

    .nav__item {
        flex-direction: row;
        gap: 20px;
        background-color: var(--background);
    }

    .nav__tag {
        width: auto;
        height: auto;
        border-bottom: none;
    }

    .nav__tag--1 {
        display: block;
    }

    .nav__tag--4 {
        display: none;
    }

    .nav__tag--SP {
        display: none;
    }

    .nav__tag--PC {
        display: flex;
    }

    .insta {
        display: block;
        width: 20px;
        height: 20px;
    }

    .syoukai {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    /* ホバーの設定 */
    .nav__tag:hover {
        color: var(--pink-midashi);
        transition: 0.3s;
    }
    /* ホバーの設定ここまで */
}/* pc 1024px */

@media screen and (min-width: 856px) {
    .header {
        padding: 30px 50px;
    }

    .nav__item {
        gap: 30px;
    }
}/* pc 856px */

@media screen and (min-width: 1002px) {
    .header {
        padding: 30px auto;
    }

    .nav__item {
        gap: 50px;
    }

    .syoukai {
        gap: 20px;
    }
}/* pc 1002px */

/* ===========================================
Key Visual
============================================== */
.keyvisual {
    background-image: url(../images/KV-SP.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 30px 0;
    display: flex;
    justify-content: flex-end;
}

.article__header {
    background-color: var(--white-back, rgba(255, 255, 255, 0.80));
    display: flex;
    width: 211px;
    padding: 10px 30px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
}

.link {
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--brack-text);
    background: var(--white);
}

.br__PC {
    display: none;
}

/* pc */
@media screen and (min-width: 1024px) {
    .keyvisual {
        height: 750px;
        max-width: 1440px;
        padding: 0;
    }

    .article__header {
        padding: 40px 35px;
        width: auto;
        margin: 232.5px 11.1% 232.5px 0;
        margin-right: 11.1%;
    }

    .br__SP {
        display: none;
    }

    .br__PC {
        display: block;
    }

    .link {
        padding: 15.5px 18.5px;
    }

    .KV__btntext--insta {
        transform: translateY(-2px);
    }

    /* ホバーの設定 */
    .KV__btntext:hover {
        color: var(--pink-midashi);
        transition: 0.3s;
    }
    /* ホバーの設定ここまで */

}/* pc 1024px */


/* ===========================================
Key Visual文章
============================================== */
.section--mainText {
    display: flex;
    padding: 30px 8% 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    position: relative;
}

/* あしらい画像 */
.KVLtop__PC {
    display: none;
}

.KVRdown__PC {
    display: none;
}
/* あしらい画像終わり */

.mainLogo__SP {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 64px;
    aspect-ratio: 75/32;
}

.about--mainText1 {
    margin-top: 15px;
} 

.about--mainText2 {
    margin-top: 10px;
}

/* pc */
@media screen and (min-width: 1024px) {
    .section--mainText {
        padding: 82.9px 15.3% 0;
    }

    /* あしらい画像 */
    .KVLtop__PC {
        display: block;
        position: absolute;
        top: 57px;
        /* left: 150px; */
        left: 10.4%;
    }

    .KVRdown__PC {
        display: block;
        position: absolute;
        bottom: -35px;
        /* right: 150px; */
        right: 10.4%;
    }
    /* あしらい画像終わり */

    .main__KV {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mainLogo__SP {
        width: 350px;
        height: auto;
    }

    .about--mainText1 {
        margin-top: 30px;
        text-align: center;
        } 

    .about--mainText2 {
        text-align: center;
    }
}/* pc 1024px */

/* ===========================================
プロフィール
============================================== */
.section--profile {
    display: flex;
    padding: 60px 8% 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

.title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 4%;
}

.title::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    height: 1px;
    background: var(--pink-midashi, #E8918E);
}

/* あしらい画像 */
.ProfLtop__SP {
    position: absolute;
    top: 8px;
    /* left: 14px; */
    left: 3.7%;
    width: 45px;
}

.ProfRtop__SP {
    position: absolute;
    /* top: 82px; */
    top: 100px;
    /* right: 48px; */
    right: 12.8%;
    width: 45px;
}

.ProfRtop__PC {
    display: none;
}
/* あしらい画像終わり */

.company {
    padding: 0 3.1%;
    margin-top: 15px;
}

.name__1 {
    display: none;
}

.name__2 {
    padding: 0 3.1%;
}

.profile__text {
    margin-top: 25px;
    padding: 0 3.1%;  
}

.profile__PC {
    width: 100%;
}

.ID__Photo {
    display: block;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 400px;
}

@media screen and (min-width: 1024px) {
    .section--profile {
        padding: 137.9px 15.3% 0;
    }

    /* あしらい画像 */
    .ProfLtop__SP {
        display: none;
    }

    .ProfRtop__SP {
        display: none;
    }

    .ProfRtop__PC {
        display: block;
        position: absolute;
        top: 125px;
        /* left: 390px; */
        left: 27.1%;
    }
    /* あしらい画像終わり */

    .title--profile {
        padding: 0 3.8%;
        display: flex;
        position: relative;
        width: 100%;
    }

    /* .title--profile::after {
        content: "";
        display: block;
        width: 64%;
        height: 1px;
        background: var(--pink-midashi, #E8918E);
        position: absolute;
        right: 3.8%;
        top: 50%;
        transform: translateY(-50%);
    } */

    .profile__PC {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 15px;
        padding: 0 5%;
        gap: 50px;
    }

    .name__1 {
        display: block;
    }

    .name__2 {
        display: none;
    }

    .company {
        padding: 0;
    }

    .profile__text {
        margin-top: 10px;
        padding: 0;  
    }

    .ID__Photo {
        margin-top: 0;
        max-width: 400px;
        max-height: 250px;
        object-fit: cover;
    }

}/* pc 1024px */

/* ===========================================
実例紹介
============================================== */
.section--jitsurei {
    display: flex;
    padding: 60px 8% 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

.insta__jitsurei {
    width: 100%;
    padding: 5px 0 0;
    align-items: center;
}

/* あしらい画像 */
.JitsuLdown__SP {
    position: absolute;
    /* bottom: -45px; */
    bottom: -55px;
    /* left: 28px; */
    left: 7.5%;
    width: 45px;
}

.JitsuRtop__SP {
    position: absolute;
    /* top: 27px; */
    top: 20px;
    /* right: 15px; */
    right: 4%;
    width: 45px;
}

.JitsuLtop__PC {
    display: none;
}

.JitsuRdown__PC {
    display: none;
}
/* あしらい画像終わり */

.jitsurei__text {
    margin-top: 15px;
}

.jitsurei__photo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.link--jitsurei {
    margin-top: 15px;
}

@media screen and (min-width: 1024px) {
    .section--jitsurei {
        padding: 110px 15.3% 0;
        align-items: center;
    }

    .insta__jitsurei {
        width: 100%;
        padding: 5px 5.5% 0;
        align-items: center;
    }

    /* あしらい画像 */
    .JitsuLdown__SP {
        display: none;
    }

    .JitsuRtop__SP {
        display: none;
    }

    .JitsuLtop__PC {
        display: block;
        position: absolute;
        /* top: 100px; */
        top: 0;
        /* left: 170px; */
        left: 11.8%;
    }

    .JitsuRdown__PC {
        display: block;
        position: absolute;
        top: 475px;
        /* right: 140px; */
        right: 9.7%;
    }
    /* あしらい画像終わり */

    .title--jitsurei {
        padding: 0 3%;
        display: flex;
        position: relative;
        width: 100%;
    }

    /* .title--jitsurei::after {
        content: "";
        display: block;
        width: 75%;
        height: 1px;
        background: var(--pink-midashi, #E8918E);
        position: absolute;
        right: 3%;
        top: 50%;
        transform: translateY(-50%);
    } */

    .jitsurei__text {
        margin-top: 20px;
        margin-left: 3%;
    }

    .link--jitsurei {
        margin-top: 30px;
        padding: 15.5px 34.5px;
    }

}/* pc 1024px */

/* ===========================================
レッスン
============================================== */
.section--lesson {
    display: flex;
    padding: 60px 8% 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

/* あしらい画像 */
.LesRtop__SP {
    position: absolute;
    top: 80px;
    /* right: 30px; */
    right: 8%;
    width: 30px;
}

.LesLtop__PC {
    display: none;
}

.LesRdown__PC {
    display: none;
}
/* あしらい画像終わり */

.lesson__text {
    margin-top: 15px;
}

.link--lesson {
    margin-top: 10px;
    display: inline-flex;
}

.lesson__block {
    width: 100%;
}

.lesson__photo {
    display: block;
    margin: 15px auto 0;
    width: 100%;
    max-width: 400px;
    height: 200px;
    object-fit: cover;
}

@media screen and (min-width: 1024px) {
    .section--lesson {
        padding: 110px 15.3% 0;
        align-items: center;
    }

    /* あしらい画像 */
    .LesRtop__SP {
        display: none;
    }

    .LesLtop__PC {
        display: block;
        position: absolute;
        /* top: 40px; */
        top: 0;
        left: 245px;
        left: 17%;
    }

    .LesRdown__PC {
        display: none;
        /* display: block; */ /* 20251108変更 */
        /* position: absolute; */ /* 20251108変更 */
        /* bottom: -23px; */ /* 20251108変更 */
        /* right: 690px; */
        /* right: 47.9%; */ /* 20251108変更 */
    }
    /* あしらい画像終わり */

    .title--lesson {
        padding: 0 3%;
        display: flex;
        position: relative;
        width: 100%;
    }

    /* .title--lesson::after {
        content: "";
        display: block;
        width: 75%;
        height: 1px;
        background: var(--pink-midashi, #E8918E);
        position: absolute;
        right: 3%;
        top: 50%;
        transform: translateY(-50%);
    } */

    .lesson__block {
        padding: 0 5%;
        display: flex;
        justify-content: center;
        gap: 50px;
    }

    .lesson__text {
        margin-top: 40px;
    }

    .link--lesson {
        margin-top: 15px;
        padding: 15.5px 55px;
    }

    .lesson__photo {
        margin-top: 40px;
        width: 400px;
        height: 250px;
        object-fit: cover;
    }
}/* pc 1024px */

/* ===========================================
お問合せ
============================================== */
.section--contact {
    display: flex;
    padding: 60px 8% 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

/* あしらい画像 */
.ContRtop__SP {
    position: absolute;
    top: 49px;
    /* right: 6px; */
    right: 1.6%;
    width: 45px;
}
/* あしらい画像終わり */

.contact__text {
    margin-top: 15px;
}

.link--mail {
    margin-top: 15px;
}

.link--map {
    margin-top: 8px
}

@media screen and (min-width: 1024px) {
    .section--contact {
        display: none;
    }

    /* あしらい画像 */
    .ContRtop__SP {
        display: none;
    }
    /* あしらい画像終わり */

}/* pc 1024px */

/* ===========================================
Footer
============================================== */
.footer {
    margin-top: 30px;
    padding: 30px 18.8% 0;
    background-color: var(--background);
}

.section--contact2 {
    display: none;
}

.footer__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__group1 {
    display: flex;
    gap: 50px;
}

.footer__group2 {
    display: flex;
    gap: 50px;
    margin-top: 50px;
}

.footer--insta {
    display: none;
}

.footer__logo {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: auto;
    margin-top: 43px;
}

.copy {
    margin: 15px 0 30px;
    text-align: center;
}

.copy__PC {
    display: none;
}

@media screen and (min-width: 1024px) {
    .footer {
        margin-top: 55px;
        padding: 50px 15.3%;
    }

    .footer__PC {
        display: flex;
        gap: 11%;
    }

    .section--contact2 {
        display: block;
        padding-left: 5%;
    }

    .footer__contact {
        text-align: left;
    }

    .footer__contactLink {
        display: flex;
        gap: 50px;
    }

    .link--map,
    .link--contactInsta {
        width: 200px;
        height: 55px;
        /* margin-top: 15px; */
        margin-top: 30px;
    }

    .footer__group1 {
        flex-direction: column;
        gap: 28px;
        margin-top: 15px;
    }

    .footer__group2 {
        flex-direction: column;
        gap: 28px;
        margin-top: 28px;
    }

    .footer--insta {
        display: block;
        transform: translateY(2px);
    }

    .footer__link--jitsurei {
        display: flex;
        gap: 5px;
    }

    .footer__logo {
        margin-top: 35px;
    }

    .copy {
        display: none;
    }

    .copy__PC {
        display: block;
        text-align: center;
    }

    /* ホバーの設定 */
    .footer__tag1:hover,
    .footer__tag2:hover,
    .footer__tag3:hover,
    .footer__tag4:hover{
        color: var(--pink-midashi);
        transition: 0.3s;
    }
    /* ホバーの設定ここまで */

}/* pc 1024px */