@charset "UTF-8";

html {
    font-size: 100%;
}

html.open {
    overflow: hidden;
    height: 100%;
}

.font_text {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font_en {
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.top_fontbig {
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 68px;
}

.wrapper {
    width: 90%;
    margin: 0 auto;
}

img {
    max-width: 100%;
}

:root {
    --main_color: #93DDF6;
    --text_color: #454545;
    --accent_color: #FFFEE1;
    --suv_color: #7F7F7F;
}

ul {
    list-style: none;
}

.pc_header a,
.main_nav a,
.shop_nav a {
    color: var(--main_color);
    text-decoration: none;
}

.main_nav,
.name_nav {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.main_nav {
    display: none;
    gap: 30px;
}

.name_nav {
    font-size: 32px;
    padding: 1.5% 0 1.5% 3%;
    position: sticky;
}

.header_shop_icon {
    width: 26px;
    height: 26px;
}

.sp_header {
    display: flex;
    flex-direction: row-reverse;
}

.footer_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
}

.footer_sns_icon img {
    width: clamp(1.563rem, 1.335rem + 0.971vw, 2.5rem);
}

.footer_sns_icon a {
    display: block;
}

.default_footer {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 130px;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: hard-light;
    background-image: url(../img/footer_1_2-kiiroihana.webp);
    background-position: center;
    background-size: cover;
    margin-top: 200px;
}

.default_footer.jan {
    background-image: url(../img/footer_1_2-kiiroihana.webp);
}

.default_footer.mar {
    background-image: url(../img/footer_3_4_yurippu.webp);
}

.default_footer.may {
    background-image: url(../img/footer_5_6_azisai.webp);
}

.default_footer.jul {
    background-image: url(../img/footer_7_8_himawari.webp);
}

.default_footer.sep {
    background-image: url(../img/footer_9_10_nanohana.webp);
}

.default_footer.nov {
    background-image: url(../img/footer_11_12_otiba.webp);
}

.footer_nav {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    font-size: clamp(0.813rem, 0.524rem + 1.23vw, 2rem);
    gap: 16px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 999;
    width: fit-content;
    margin-left: auto;
}

.footer_wrapper {
    width: 90%;
    margin: 14px auto 0 auto
}

.footer_nav a {
    text-decoration: none;
    color: #FFFFFF;
}

.footer_sns_icon img {
    width: 25px;
}

.footer_sns_icon a {
    display: block;
}

.footer_note {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;

}

.copy_right {
    width: 90%;
    margin: auto auto 0;
    font-size: clamp(0.5rem, 0.318rem + 0.777vw, 1.25rem);
    text-align: right;
    color: #FFFFFF;
}

/* ハンバーガーメニュー */
.ham_menu {
    background-image: url(../img/ham_bg.webp);
    background-position: center;
    background-size: cover;
    border-top-left-radius: 150px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 100;
    transform: translateX(100%);
    transition: all 0.5s ease-in-out;
    background-color: #312d2d80;
    opacity: 1;
}


.ham_button {
    position: fixed;
    top: 2%;
    right: 5%;
    z-index: 10;
    width: 25px;
}

.ham_button img {
    width: 25px;
}

.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    border: 0;
}

.ham_sns_icon img {
    width: 40px;
}

.ham_sns_icon a {
    display: block;
}

.ham_nav a,
.ham_close p {
    text-decoration: none;
    color: #ffffff;
    font-family: "Urbanist", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: clamp(1.25rem, 0.772rem + 2.041vw, 1.75rem);
    letter-spacing: 0.11rem;
}

.ham_nav a span {
    font-size: clamp(0.813rem, 0.633rem + 0.765vw, 1rem);
    letter-spacing: 0.14rem;
}

.ham_menu,
.ham_nav,
.ham_sns_link,
.ham_close {
    display: flex;
}

.ham_nav,
.ham_sns_link,
.ham_close {
    flex-direction: column;
}

.ham_menu {
    align-items: flex-end;
    justify-content: flex-end;
    gap: 5vh 30vw;
    padding: 10vh 5vw 10vh 5vw;
}

.ham_nav {
    gap: 35px;
}

.ham_sns_link,
.ham_close {
    align-items: center;
}

.ham_sns_link {
    gap: 10px;
}

.ham_close {
    position: absolute;
    right: 0;
    top: 0;
    margin: 15px;
}

.ham_close p {
    font-size: 13px;
}

html.open .ham_menu {
    transform: translateX(0);
}

/* ここまでハンバーガーメニュー */

/* トップページ */

h1 {
    font-size: 28px;
    color: #454545;
    text-align: center;
}

.main_visual {
    width: 100%;
}

/* 謎のぼう */

.top_line {
    width: 1px;
    height: 65px;
    background-color: #696969;
    margin: 42px auto;

}

.top_contents img {
    width: 230px;
    display: block;
    margin: 0 auto;
}


#top {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

.top_fontsmall {
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;
}


.top_tittle {
    font-size: 35px;
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    text-align: center;
    color: var(--suv_color);
}

.top_topname {
    font-size: clamp(1.25rem, -0.583rem + 3.819vw, 4rem);
}

.top_number {
    display: block;
    font-family: "Tangerine", cursive;
    font-size: 40px;
    color: #7f7f7f;
    border-bottom: 1px solid #696969;
    width: 200px;
    position: relative;
    top: 20px;
}

.top_text {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 12px;
    margin-top: 30px;
}

.more-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 右寄せ */
    text-decoration: none;
    color: #555;
    font-family: "Times New Roman", serif;
    font-size: 14px;
    margin: 20px 0;
    width: fit-content;
    margin-left: auto;
}

/* ○ */
.more-btn .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px dashed #aaa;
    border-radius: 50%;
    background: #FFFEE1;
    margin-right: 10px;
}

.more-btn2 .circle {
    background: #93DDF6;
}

.more-btn3 .circle {
    background: #E1E7FF;
}

.more-btn4 .circle {
    background: #FDD6FF;
}

.pc {
    display: none;
}

/* 線 */
.more-btn .line {
    width: 40px;
    border-bottom: 1px dashed #7F7F7F;
    margin-right: 8px;
    position: relative;
}

/* 音符 */
.more-btn .note {
    font-size: 18px;
    --suv_color: #7F7F7F;
    position: absolute;
    right: 8px;
    top: -10px;
    background: #fff;
    padding: 0 2px;
}


.top_fontsmall {
    padding: 5px;
}

.top_item1 .top_secttl .top_fontsmall {
    letter-spacing: 0.3em;
}

.top_item1,
.top_item2,
.top_item3,
.top_item4 {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.5s ease;
}

.top_item1.active_sride,
.top_item2.active_sride,
.top_item3.active_sride,
.top_item4.active_sride {
    opacity: 1;
    transform: translateX(0);
}

/* ここまでトップページ */

/* プロフィール */
#profile {
    font-size: 100%;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #696969;
    margin-top: 10px;
}

.profile_text {
    max-width: 100%;
}

#profile p {
    font-size: clamp(0.75rem, 0.704rem + 0.194vw, 0.938rem);
}

#profile .profile_name h2 {
    font-size: clamp(2.5rem, 2.197rem + 1.294vw, 3.75rem);
    text-align: center;
    margin-top: 22px;
    font-family: "Urbanist", sans-serif;
    font-style: normal;
    font-weight: 300;
    color: #696969;
    letter-spacing: 0.06em;
}

.profile_name {
    background-image: linear-gradient(90deg, #d9fffe 14%, #f9ffdb 45%, #d9fffe 87%, #f9ffdb);
    margin-bottom: 30px;
    border-radius: 20px;
}

.profile_name h2,
.profile_name p {
    position: relative;
    top: -30px;
}


#profile img {
    max-width: 100%;
}


#profile a {
    text-decoration: none;
    color: #696969;
}


.backcolor_icon1 {
    background-color: #C4F3F1;
}

.backcolor_icon1:hover {
    background: #95f8f3;
    transform: scale(1.1);
}

.backcolor_icon2 {
    background-color: #D5F3DD;
}

.backcolor_icon2:hover {
    background: #99f9b3;
    transform: scale(1.1);
}

.backcolor_icon1,
.backcolor_icon2 {
    width: 50%;
    border-radius: 10px;
}

.icon_flex {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
}

.icon_flex a {
    width: 100%;
    padding: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.icon_flex a img:first-child {
    width: 40px;
}

.icon_flex a img:last-child {
    width: 10px;
}

#profile section {
    max-width: 90%;
    margin: 0 auto;
}

#profile h2,
h3 {
    color: #454545;
}

#profile .scroll h2 {
    font-size: clamp(1.25rem, 1.068rem + 0.777vw, 2rem);
    margin-bottom: 50px;
    margin-top: 100px;
}

#profile h3 {
    font-size: clamp(1rem, 0.939rem + 0.259vw, 1.25rem);
    flex-shrink: 0;
}

.scroll {
    height: auto;
    overflow: auto;
    background-color: #FFFEE1;
    padding: 0 10%;
    width: 100%;
    border-radius: 20px;
    /* height: 50vw; */
    margin-top: 35px;
    padding-top: 30px;
    scrollbar-color: #fff #C4F3F1;
    scrollbar-width: thin;
}

#profile ul {
    border-left: 0.5px #454545 solid;
    /* margin-left: 30px; */
    margin-left: 10%;
    margin-bottom: 76px;
    /* list-style: disc; */
    padding: 40px 0 0px 40px;

}

.scroll div {
    display: flex;
    align-items: flex-start;
    gap: 10%;
    /* flex-wrap: wrap; */
}

.profile_text ul:first-of-type div {
    align-items: center;
}

.profile_text ul div::before {
    display: inline-block;
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.2em;
}

.profile_text ul:first-of-type div::before {
    margin-top: 0.2em;
}

.profile_text ul:first-of-type div:first-child::before,
.profile_text ul:first-of-type div:nth-child(2)::before,
.profile_text ul:first-of-type div:nth-child(3)::before,
.profile_text ul:first-of-type div:nth-child(4)::before {
    background-color: #93DDF6;
}

.profile_text ul:first-of-type li:nth-child(5) div::before,
.profile_text ul:first-of-type li:nth-child(6) div::before {
    background-color: #E5D6FF;
}

.profile_text ul:nth-of-type(2) div:first-child::before,
.profile_text ul:nth-of-type(2) div:nth-child(2)::before {
    background-color: #7F7F7F;
}

.profile_text ul:last-of-type div:first-child::before,
.profile_text ul:last-of-type div:nth-child(2)::before {
    background-color: #A0B98E;
}



.profile_img {
    position: relative;
    text-align: center;
}

.main_1 {
    width: 90%;
    height: auto;
    filter: drop-shadow(30px 17px 3px #E2F1F2);
    margin-bottom: 30px;
}

.main_2 {
    width: 30%;
    max-width: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

.flute_text {
    text-align: center;
}

.self-introduction {
    line-height: 2.0;
}

.scroll div {
    margin-bottom: 70px;
}


/* scrollアニメーション */
.scroll_motion {
    display: inline-block;
    padding-top: 70px;
    position: relative;
}

.scroll_motion::before {
    animation: scroll 3.5s infinite;
    border: solid #000;
    border-width: 0 0 1px 1px;
    content: "";
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: rotate(-45deg);
    width: 20px;
    height: 20px;
}

.txt {
    margin: 0 auto;
}

@keyframes scroll {
    0% {
        transform: rotate(-45deg) translate(0, 0);
    }

    80% {
        transform: rotate(-45deg) translate(-30px, 30px);
    }

    0%,
    80%,
    100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

.profile_performance {
    width: 80%;
    padding-bottom: 30px;
}

.profile_title {
    color: #93DDF6;
    font-size: 36px;
    font-family: "Urbanist", sans-serif;
    letter-spacing: 2px;
    padding-left: 4.5px;
    padding: 13.6px;
    position: relative;
    text-align: left;
    margin-top: 80px;
}

/* ここまでプロフィール */

/* ギャラリーページ */
.Gallery_tittle {
    color: var(--main_color);
    font-size: 35px;
    padding: 15px;
    letter-spacing: 0.5rem;
    position: relative;
    text-align: left;
}

.Gallery_fontbig {
    font-size: 74px;
}

.gallery {
    display: flex;
    gap: 3rem;
    margin-top: 1rem;
}

.gallery_left,
.gallery_center {
    width: 50vw;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    justify-content: space-between;
}

.gallery_right {
    display: none;
}

.name {
    writing-mode: vertical-rl;
    width: fit-content;
    line-height: 1;
    font-size: clamp(9.375rem, 7.100rem + 9.709vw, 18.75rem);
    color: #B6EDFF;
    opacity: .85;
    white-space: nowrap;
    z-index: -1;
    pointer-events: none;
}

.grallery_vspace {
    height: 13.5rem;
}

.gallery_right .grallery_wspace {
    height: 36.5rem;
}

.gallery img {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.5s ease;
}

.gallery img.active {
    opacity: 1;
    transform: translateX(0);
}

/* ここまでギャラリーページ */

/* コンタクトページ */
.contact_form {
    background-image: url(../img/contact_backgroubd.webp);
    background-position: bottom;
    background-size: cover;
    padding-top: clamp(4.75rem, 1.959rem + 11.909vw, 16.25rem);
    padding-bottom: clamp(6.25rem, 3.883rem + 10.097vw, 16rem);
}

.contact_title {
    width: clamp(18.75rem, 11.924rem + 29.126vw, 46.875rem);
    margin: 0 auto;
}

.contact_title h2 {
    text-align: center;
    letter-spacing: 0.1rem;
    font-size: clamp(2.063rem, 1.425rem + 2.718vw, 4.688rem);
}

.contact_title nav {
    margin-top: 10px;
}

form {
    width: clamp(18.75rem, 11.924rem + 29.126vw, 46.875rem);
    margin: 100px auto 0 auto;
}

.form_shadow {
    border: solid rgba(0, 0, 0, 0.7) 0.5px;
    border-radius: clamp(0.188rem, 0.157rem + 0.129vw, 0.313rem);
    width: clamp(11.75rem, 7.017rem + 20.194vw, 31.25rem);
    background-color: rgba(240, 240, 240, 0.5);
    box-shadow: 4px 4px 4px 0 rgba(217, 255, 254, 0.5);
}

.form_name,
.form_mail,
.form_message {
    display: flex;
    justify-content: space-between;
    color: var(--text_color);
    font-size: clamp(1rem, 0.757rem + 1.036vw, 2rem);
    letter-spacing: 0.1rem;
}

.form_name,
.form_mail {
    align-items: flex-end;
}

.form_name span,
.form_mail span,
.form_message span {
    font-size: clamp(0.375rem, 0.223rem + 0.647vw, 1rem);
    letter-spacing: 0.1rem;
}

.form_mail,
.form_message {
    margin-top: clamp(1.25rem, 0.340rem + 3.883vw, 5rem);
}

.form_message {
    height: clamp(9.375rem, 8.617rem + 3.236vw, 12.5rem);
}

.send_button {
    display: block;
    margin: 0 auto;
    height: 40px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    font-size: 14px;
}

input,
textarea {
    width: 100%;
    height: 100%;
}

.form_font {
    font-size: 1rem;
}

.form_send {
    display: block;
    position: relative;
    margin: clamp(3.125rem, 2.367rem + 3.236vw, 6.25rem) auto 0 auto;
}

.form_send img {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.contact_footer {
    background-color: var(--main_color);
}

.contact_copy {
    text-align: center;
    color: #FFFFFF;
    padding: 3px 0;
}

@media(min-width:768px) {
    body {
        width: 100%;
    }

    .wrapper {
        max-width: 1100px;
        margin: 0 auto;
    }

    .ham_button {
        display: none;
    }

    .pc_header a {
        display: inline-block;
        transition: all 0.3s ease;
    }

    .pc_header,
    .main_nav,
    .shop_nav a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pc_header {
        width: 100%;
        height: 80px;
        gap: clamp(1.563rem, -5.896rem + 15.538vw, 12.75rem);
        position: fixed;
        top: 0;
        z-index: 100;
        background-color: rgba(255, 255, 255, 0.8);
    }

    .sp_header {
        display: none;
    }

    .name_nav,
    .main_nav {
        font-size: 24px;
        padding: 0;
    }

    .footer_wrapper {
        width: 60%;
        max-width: 1100px;
        margin-top: auto;
    }


    .pc_header a:hover {
        transform: scale(1.2);
    }

    .default_footer {
        height: clamp(15.625rem, 8.042rem + 15.799vw, 27rem);
    }

    .footer_nav {
        flex-direction: column;
        gap: 5px;
    }

    .footer_nav li {
        text-align: right;
    }

    .footer_icon {
        margin-top: clamp(2.5rem, -0.833rem + 6.944vw, 7.5rem);
    }

    .footer_sns_icon img {
        width: 50px;
    }

    .copy_right {
        text-align: center;
        margin: initial;
    }

    .footer_shop_icon {
        display: none;
    }

    .footer_nav li:hover,
    .footer_icon li:hover {
        transform: scale(1.2);
    }

    .footer_icon li,
    .footer_nav li {
        transition: 0.3s;
    }

    /* トップページ */
    .pc {
        display: block;
        flex-shrink: 0;
    }

    .sp {
        display: none;
    }

    .wrapper {
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
    }

    .main_visual {
        margin-top: 80px;
    }

    h1 {
        color: #93DDF6;
        font-size: clamp(1.75rem, -1.083rem + 5.903vw, 6rem);
    }
    

    /* ライン */
    .top_line {
        width: 1px;
        height: 300px;

    }

    /* 大きい左のname */
    .top_back_name {
        writing-mode: vertical-rl;
        position: absolute;
        left: 0px;
        top: -350px;
        translate: -50%;
        line-height: 1;
        font-size: 300px;
        color: #FFFDC8;
        opacity: .85;
        white-space: nowrap;
        z-index: -1;
        pointer-events: none;
    }

    .top_item1,
    .top_item2,
    .top_item3,
    .top_item4 {
        display: flex;
    }

    .top_secttl {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        position: relative;
        right: 20px;
    }

    .top_tittle {
        grid-area: title;
        font-size: clamp(2.063rem, 1.425rem + 2.718vw, 4.688rem);
        white-space: nowrap;
    }

    .top_fontbig {
        font-size: clamp(4.25rem, 3.006rem + 5.307vw, 9.375rem);
    }


    .top_number {
        font-size: 50px;
        color: #7F7F7F;
        border-bottom: none;
        font-family: "Tangerine", cursive;
        font-weight: 400;
    }

    /* .more-btn {
        grid-area: more;
        width: auto;
        margin-left: auto;
    } */

    .note,
    .circle {
        transition: all 0.5s ease;
    }

    .more-btn:hover .note {
        transform: rotate(25deg);
        scale: 1.3;
        top: -20px;

    }

    .more-btn:hover .circle {
        background-color: #fffc4a;
    }

    .more-btn2:hover .circle {
        background-color: #2ecbff;
    }

    .more-btn3:hover .circle {
        background-color: #9aaeff;
    }

    .more-btn4:hover .circle {
        background-color: #fa92ff;
    }



    /* 斜めにする */
    .top_item1 {
        margin-top: 100px;
    }

    .top_item2 {
        margin-left: 10%;
    }

    .top_item3 {
        margin-left: 20%;
    }

    .top_item4 {
        margin-left: 30%;
    }

    .top_item2,
    .top_item3,
    .top_item4 {
        margin-top: clamp(6.25rem, 2.917rem + 6.944vw, 11.25rem);
    }

    .top_text {
        margin-top: 10px;
        font-size: 15px;
        margin-left: 30px;
    }

    .top_contents img {
        /* width: 250px; */
        width: clamp(12.5rem, 10.417rem + 4.34vw, 15.625rem);
    }

    .top_box {
        width: calc(100% - clamp(12.5rem, 10.417rem + 4.34vw, 15.625rem));
    }

    /* ここまでトップページ */

    /* プロフィール */
    #profile section {
        display: flex;
        max-width: 80%;
        margin: 0 auto;
    }

    #profile p {
        font-size: 15px;
    }

    .ul_flex {
        display: flex;
    }

    .profile_text {
        max-width: 50%;
        margin-left: 10%;
    }

    .scroll div {
        flex-wrap: nowrap;
    }

    .scroll div p {
        width: auto;
        margin-top: auto;
    }

    .scroll {
        height: 50vw;
    }

    /* ここまでプロフィール */

    /* ギャラリーページ */
    .Gallery_tittle {
        margin-top: 100px;
        font-size: clamp(2.063rem, 1.425rem + 2.718vw, 4.688rem);
    }

    .gallery_left,
    .gallery_center,
    .gallery_right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 3rem;
        width: 33vw;
        max-width: 550px;
    }

    .gallery {
        justify-content: center;
    }

    .grallery_vspace {
        height: 54.5rem;
    }

    .grallery_wspace {
        height: 30rem;
    }

    .gallery-pc {
        display: none;
    }

    /* ここまでギャラリーページ */

    /* コンタクトページ */
    .form_send {
        width: 165px;
    }

    .contact_fontsmall {
        letter-spacing: 0.5rem;
    }

    .send_button {
        border: solid rgba(0, 0, 0, 0.7) 0.5px;
        box-shadow: 4px 4px 4px 0 rgba(217, 255, 254, 0.5);
        border-radius: 5px;
    }

    .send_button:hover {
        background-color: rgba(255, 255, 255, 0.8);
    }

    .form_send img {
        right: 15%;
    }

}


@media (min-width:1024px) {

    .name_nav,
    .main_nav {
        font-size: 32px;
    }
}