@charset "utf-8";

/* ==========================================================================
   共通変数
   ========================================================================== */
:root {
    /* カラー */
    --color-bg: #fffffc;
    --color-text: #8D8283;
    --color-primary: #8D8283;
    /* --color-accent: #8D8283; */

    /* フォント */
    --font-jp: "Noto Serif JP", serif;
    --font-en: "Judson", serif;

    /* レイアウト */
    --header-height: 88px;
    --content-width: 800px;

    --side-padding: 20px;
    /* スマホでの左右の余白量 */
}

/* ==========================================================================
   共通ベース設定
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-jp);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.7;
    font-size: 14px;
}

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1em;
    font-weight: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

img {
    height: auto;
}


main {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--side-padding);
}



/* ==========================================================================
   ヘッダー
   ========================================================================== */

.menu-btn span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
}

.menu-btn span::before,
.menu-btn span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transition: transform 0.3s ease, top 0.3s ease;
}

.menu-btn span::before {
    top: -10px;
}

.menu-btn span::after {
    top: 10px;
}

.menu-btn.is-open span {
    background-color: transparent;
}

.menu-btn.is-open span::before {
    top: 0;
    transform: rotate(45deg);
}

.menu-btn.is-open span::after {
    top: 0;
    transform: rotate(-45deg);
}

.gnav-list {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    background-color: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 60;
}

.gnav-link a {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 16px;
    width: 320px;
}

.gnav-room {
    text-align: right;
}

.gnav-name {
    text-align: left;
}

.menu-btn.is-open~.gnav-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.logo {
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    width: fit-content;
    margin-inline: auto;
    z-index: 99;
}

.logo a {
    display: inline-block;
}

.logo img {
    width: 80px;
}

.menu-btn {
    position: fixed;
    top: 30px;
    left: 30px;
    width: 40px;
    height: 30px;
    z-index: 99;
}

.header-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: rgba(255, 255, 252, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 50;
    pointer-events: none;
}



.mv {
    margin: 96px auto 48px;
}

.mv img {
    width: 216px;
    margin: 0 auto;
}

.section {
    font-size: 24px;
    padding-inline: var(--side-padding);
    margin: 48px auto;
}

.entrance p {
    text-align: center;
    line-height: 3.5em;
}


.furigana {
    display: block;
    font-size: 12px;
    text-align: center;
}

.kannji {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 24px;
}


.profile-photo {
    position: relative;
    width: 320px;
    height: 160px;
    margin: 0 auto;
}

.photo-name,
.photo-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.photo-name {
    z-index: 1;
}

.photo-portrait {
    z-index: 2;
}

.profile-data {
    padding-top: 48px;
}

.profile-data div {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 48px;
    width: 320px;
    margin-inline: auto;
    padding-top: 24px;
}

.data-title {
    text-align: right;
    font-weight: bold;
}

.data-content {
    text-align: left;
}

.profile-data div:last-of-type .data-content {
    font-size: 12px;
}


.floor-plan {
    padding-bottom: 48px;
}

.floor-plan img {
    width: 320px;
    margin: 0 auto;
}

.room-list {
    padding-top: 48px;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 16px;
}

.room-link {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px;
    width: 200px;
    text-align: center;
    margin-inline: auto;

}

.list-room {
    font-family: "Italianno", cursive;
    font-size: 16px;
}

.list-name {
    font-size: 12px;
}

.link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 16px;
}

.youtube img {
    width: 20px;
}

.youtube {
    display: flex;
    gap: 16px
}

.youtube a {
    display: flex;
    gap: 4px;
}

.youtube a p {
    font-size: 12px;
}

.sns {
    display: flex;
    gap: 16px
}

.sns img {
    width: 30px;
}


footer {
    padding-top: 16px;
    background: #8D8283;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer img {
    width: 64px;
}

footer p {
    padding-top: 4px;
    color: #fffffc;
    font-size: 10px;
}

@media (min-width: 768px) {

    .header-bg {
        right: 0;
        max-width: var(--content-width);
        margin-inline: auto;
    }

    .menu-btn {
        left: calc((100% - var(--content-width)) / 2 + 30px);
    }

    .gnav-list {
        gap: 32px;
        top: 48px;
    }

    .gnav-link {
        font-size: 16px;
    }

    .logo {
        top: 32px;
    }


    .logo img {
        width: 96px;
    }

    .mv img {
        width: 320px;
    }


    .section {
        font-size: 32px;
        margin: 64px auto;
    }

    .furigana {
        font-size: 16px;
    }

    .kannji {
        font-size: 32px;
    }


    .profile-photo {
        width: 480px;
        height: 280px;
    }

    .profile-data {
        font-size: 16px;
    }

    .profile-data div:last-of-type .data-content {
        font-size: 14px;
    }

    .floor-plan img {
        width: 440px;
    }

    .room-list {
        padding-top: 64px;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
    }

    .room-link {
        width: 320px;
        grid-template-columns: 88px 1fr;
    }


    .list-room {
        font-size: 24px;
    }

    .list-name {
        font-size: 16px;
    }


    .link {
        gap: 16px;
        margin: 32px auto;
    }

    .youtube img {
        width: 28px;
    }

    .youtube {
        gap: 32px
    }

    .youtube a {
        gap: 8px;
    }

    .youtube a p {
        font-size: 16px;
    }

    .sns {
        gap: 24px
    }

    .sns img {
        width: 40px;
    }


    footer {
        max-width: var(--content-width);
        margin-inline: auto;
    }

    footer img {
        width: 88px;
    }

    footer p {
        margin: 8px auto;
        font-size: 16px;
    }

}


/* ==========================================================================
   各部屋
   ========================================================================== */

.room-name {
    font-size: 24px;
    margin-top: 96px;
    text-align: center;
}

.kids-mv img {
    width: 216px;
    margin: 0 auto;
    transform: rotate(-3deg);
}



.room-mv img {
    width: 216px;
    margin: 24px auto;
}

.room-inside {
    position: relative;
}

.room-inside.bath {
    height: 580px;
}

.bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 110px), calc(-50% + 72px));
    /* 中心から左に120px、上に60px */
    width: 60px;
}

.bubble2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 12px), calc(-50% + 132px));
    width: 120px;
}

.washbowl img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 100px), calc(-50% + 210px));
    width: 80px;
}

.duck {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 84px), calc(-50% + 244px)) scaleX(-1);
    width: 50px;
}


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

.contact {
    padding-bottom: 48px;
}

.mini-section {
    font-size: 20px;
    text-align: center;
    margin: 32px auto 16px;
}

.contact-text {
    text-align: center;
    font-size: 14px;
    padding-bottom: 32px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 320px;
    margin-inline: auto;
}

.form-label {
    font-size: 12px;
    color: var(--color-primary);
}

.form-input {
    font-family: var(--font-jp);
    font-size: 14px;
    color: var(--color-text);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-primary);
    padding: 8px 4px;
    margin-bottom: 16px;
}

.form-textarea {
    resize: vertical;
    border: 1px solid var(--color-primary);
}

.privacy-note {
    font-size: 10px;
    line-height: 1.6;
    color: var(--color-text);
    padding-bottom: 16px;
}

.form-submit {
    font-family: var(--font-en);
    font-size: 16px;
    color: var(--color-bg);
    background-color: var(--color-primary);
    border: none;
    padding: 12px;
    margin-inline: auto;
    width: fit-content;
    min-width: 120px;
}


/* ==========================================================================
   サンクスページ
   ========================================================================== */

.thanks {
    padding-bottom: 64px;
    text-align: center;
}

.thanx {
    margin: 0 auto;
    text-align: center;
    width: 400px;
}

.thanks-text {
    font-size: 12px;
    line-height: 2;
    padding: 8px 0 32px;
}

.thanks-back {
    display: inline-block;
    font-family: var(--font-en);
    font-size: 16px;
    color: var(--color-bg);
    background-color: var(--color-primary);
    padding: 12px 24px;
}




/* ==========================================================================
   Syudyページ
   ========================================================================== */
.study-inside {
    position: relative;
}

.bookshelf {
    position: relative;
    width: 320px; /* bookshelf-bg画像の実際の表示幅に合わせる */
    margin-inline: auto;
    margin-bottom: 56px;
}

.bookshelf-bg {
    width: 100%;
}

.book {
    position: absolute;
}

.book img {
    width: 120px; /* 本の基本サイズをここで一括管理 */
    transition: transform 0.2s ease;
}

.book:hover img {
    transform: scale(1.1); /* クリックできる本だと分かりやすくするための任意の演出 */
}

.book_sanathing {
    top: 36px;
    left: 30px;
}

/* .book_bread {
    top: 40px;
    left: 90px;
} */

/* .book_knitting {
    top: 40px;
    left: 90px;
} */


/* 本を追加する時は、この形式で .book-3 { top: ...; left: ...; } を足していくだけ */


/* ==========================================================================
   SANATHINGページ
   ========================================================================== */

.sanathing {
    width: 240px;
    margin: 32px auto;
}

.sanathing-links {
    display: flex;
    justify-content: center;
    gap: 48px;
    padding-bottom: 32px;
    font-size: 12px;
}

/* ==========================================================================
   Kidsページ
   ========================================================================== */

.scrapbook {
    position: relative;
    width: 320px; /* 好きな幅に */
    height: 900px; /* 中身の散らばり具合を見ながら調整 */
    margin: 0 auto 48px;
}

.deco {
    position: absolute;
}

/* サムネイル内部の重ね合わせ(フレーム+動画)。外側(scrapbook内のどこに置くか)は .link1〜.link3、
   内側(フレームに対して動画がどうズレているか)は .thumb1〜.thumb3 で個別に調整する */
.photo-frame {
    position: relative;
    width: 100%;
    z-index: 2;
}

.youtube_thumb {
    position: absolute;
    z-index: 1;
}

/* フレームに対する動画サムネの位置調整はここで個別に。inset: 上 右 下 左 の順 */
.thumb1 {
    inset: 8%;
}

.thumb2 {
    inset: 8%;
}

.thumb3 {
    inset: 8%;
}

/* 各アイテムの位置(中心からの距離で指定) */
.soccer { top: 50%; left: 50%; transform: translate(calc(-50% + 100px), calc(-50% - 300px)); width: 50px; }
.link1 { top: 50%; left: 50%; transform: translate(calc(-50% - 100px), calc(-50% - 280px)); width: 140px; }
.paper_airplane { top: 50%; left: 50%; transform: translate(calc(-50% + 50px), calc(-50% - 180px)); width: 80px; }
.bouquet { top: 50%; left: 50%; transform: translate(calc(-50% - 120px), calc(-50% - 100px)); width: 80px; }
.link2 { top: 50%; left: 50%; transform: translate(calc(-50% + 80px), calc(-50% - 40px)); width: 150px; }
.crayon { top: 50%; left: 50%; transform: translate(calc(-50% - 100px), calc(-50% + 60px)); width: 90px; }
.link3 { top: 50%; left: 50%; transform: translate(calc(-50% + 60px), calc(-50% + 140px)); width: 140px; }
.space { top: 50%; left: 50%; transform: translate(calc(-50% - 80px), calc(-50% + 220px)); width: 100px; }
.robot { top: 50%; left: 50%; transform: translate(calc(-50% + 20px), calc(-50% + 300px)); width: 80px; }