/* Reset and Base Styles */
:root {
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-serif: 'Noto Serif JP', serif;
    --font-display: 'Futura', sans-serif;

    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-gray: #D9D9D9;
    --color-dark-gray: #505050;
    --color-primary-yellow: #E5F46E;
    --color-secondary-green: #CAD576;
    --color-dark-green: #858E40;
    --color-dark-slate: #787A66;
    --color-light-gray: #B6B6B6;
    --color-medium-gray: #868686;

    --text-color: var(--color-black);
    --text-color-light: var(--color-dark-gray);
    --background-color: var(--color-white);
    --accent-color-primary: var(--color-primary-yellow);
    --accent-color-secondary: var(--color-secondary-green);

    --safe-btm: calc(24px + env(safe-area-inset-bottom));
}

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.6;
}

h1,
h2 {
    /* margin: 1.0rem; */
    font-weight: 900;
}

h2 {
    font-family: var(--font-display);
    font-size: 2.25rem;
    text-align: left;
    margin-top: 3.25rem;
    margin-left: 2rem;
    margin-bottom: 2rem;
    color: var(--text-color);
}

p {
    margin: 0;
    color: var(--text-color);
    /* Apply text-color to p */
}


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

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

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

section {
    /* padding: 4rem 1.5rem; */
    overflow: hidden;
    position: relative;
}

#philosophy,
#contact,
#bio {
    min-height: 100vh;
}

.pencilling-corner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.pencilling-corner img {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 200vh;
    width: auto;
    max-width: none;
    max-height: none;
}

/* opendoors.svg のスタイル */
#main-visual .main-text .logo-main {
    width: 150px;
    margin: 1rem auto;
}

@media (width >=768px) {
    #main-visual .main-text .logo-main {
        width: 250px;
        margin: 2rem 0;
    }
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
}

header .logo img {
    width: 80px;
}

header nav {
    display: none;
    /* Hidden on mobile */
}

/* =========================
   ハンバーガー本体
   ========================= */

.menu-toggle {
  appearance: none;
  border: 0;
  background: transparent;

  width: 40px;
  height: 40px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;

  cursor: pointer;
  z-index: 30;
  position: relative;}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin-left: auto;
  background: #000;
  transition: 0.25s;
}

/* ×になるアニメ */
header.is-menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

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

header.is-menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* =========================
   SPナビ
   ========================= */

@media (max-width: 767px) {

  header nav {
    display: block;
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.9);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: 0.25s;
  }

  header.is-menu-open nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  header nav ul {
    height: 100svh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;

    font-size: 20px;
  }

  header nav a {
    color: #fff;
  }
}


/* =========================
   PCでは普通表示
   ========================= */

@media (min-width: 768px) {

  .menu-toggle {
    display: none;
  }

  header nav {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
  }

}

/* Main Visual */
#main-visual {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0;
    /* background-color: var(--color-dark-green); Removed to allow image to show */
}

#main-visual .main-text .main-visual-heading-1 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 23px;
    /* SP Figma font-size */
    line-height: 0em;
    text-align: center;
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

#main-visual .main-text .logo-main {
    width: 250px;
    margin: 2rem auto;
}

#main-visual .main-text .main-visual-heading-2 {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 45px;
    /* SP Figma font-size */
    line-height: 0.1em;
    letter-spacing: 0.2em;
    /* 20% letterSpacing */
    text-align: center;
    color: var(--color-white);
    margin-bottom: 2rem;
}


#main-visual .main-text .main-visual-tagline {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 21px;
    /* SP Figma font-size */
    line-height: 3em;
    letter-spacing: 0.25em;
    text-align: center;
    color: var(--color-white);
    transform: translateX(0.25em);
    /* ← 少し右へ */

}

/* 背景コンテナ */
#main-visual .main-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* 動画 */
#main-visual .top-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 乗算レイヤー */
#main-visual .video-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-dark-slate);
    mix-blend-mode: multiply;
    pointer-events: none;
}


#main-visual .scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    text-align: center;
}

#main-visual .scroll-indicator p {
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1em;
    color: var(--color-white);
}

#main-visual .scroll-indicator img {
    width: 60px;
    height: 60px;
    margin-top: 0.5rem;
}

/* Philosophy */
#philosophy {
    background-color: var(--color-dark-gray);
    text-align: center;
}

#philosophy h2 {
    color: var(--color-white);
}

#philosophy .philosophy-content .sub-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 36px;
    color: var(--color-dark-green);
    padding-bottom: 2rem;
    line-height: 1.3em;
    text-align: center;
}

#philosophy .philosophy-content .main-text {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 16px;
    color: var(--color-white);
    line-height: 2.1em;
    text-align: center;
}

/* 段落間の余白 */
#philosophy .philosophy-content .main-text+.main-text {
    margin-top: 1.0em;
}

#philosophy .philosophy-illustration {
    transform: translateX(10px);
    bottom: 0;
    margin-inline: auto;
    margin-top: 1.25rem;
    margin-bottom: calc(2.5rem + var(--safe-btm));
    width: 180px;
    height: auto;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}

#philosophy.section-animate .main-text {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

/* 最後の一文だけ：位置は動かさない */
#philosophy.section-animate .main-text:nth-of-type(4) {
    transform: none;
}

#philosophy.section-animate.is-visible .main-text {
    opacity: 1;
    transform: translateY(0);
}

/* visible 時も最後の一文だけ：位置は動かさない */
#philosophy.section-animate.is-visible .main-text:nth-of-type(4) {
    transform: none;
    transition-timing-function: ease-out;
}

#philosophy.section-animate.is-visible .main-text:nth-of-type(1) {
    transition-delay: 0.6s;
}

#philosophy.section-animate.is-visible .main-text:nth-of-type(2) {
    transition-delay: 1.0s;
}

#philosophy.section-animate.is-visible .main-text:nth-of-type(3) {
    transition-delay: 1.4s;
}

#philosophy.section-animate.is-visible .main-text:nth-of-type(4) {
    transition-delay: 2.2s;
}

/* PHILO：イラストも最初は隠し */
#philosophy.section-animate .philosophy-illustration {
    opacity: 0;
    transform: none;
    transition:
        opacity 2.0s ease,
        transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

/* 表示時 */
#philosophy.section-animate.is-visible .philosophy-illustration {
    opacity: 1;
    transform: none;
    transition-delay: 2.2s;
}


/* Works */

.work-tags {
    display: flex;
    flex-wrap: wrap;
    /* ← ここが2行対応の要 */
    gap: 10px;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 16px;
    /* カードとの余白 */
}

.work-tags .tag {
    font-size: 14px;
    line-height: 1;
    /* 文字にピッタリ寄せる */
    padding: 4px 8px;
    border: 1px solid #000;
    border-radius: 2px;
    white-space: nowrap;
    /* 1タグ内で改行させない */
    border-color: #505050;
    color: #505050;
}


.works-thumbs {
    display: flex;
    gap: 4px;
    margin-top: auto;
    margin-bottom: 10px;
}

.works-thumbs img {
    width: 49%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* =========================
   WORKS — SP: carousel / PC: stacked
   ========================= */

/* セクション自体の余白などは今のままでもOK。
   ただし overflow は SPカルーセルのために visible 推奨 */
#works {
    background: #fff;
    position: relative;
    overflow: visible;
    isolation: isolate;
    padding-top: 3.25rem;
}

#works>h2 {
    margin-top: 0;
    margin-bottom: 0;
}

#works>*:not(.pencilling-corner) {
    position: relative;
    z-index: 1;
}

#works .pencilling-corner {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.pencilling-corner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 8px;
    background-image: url("img/pencilling-line.png");
    background-repeat: repeat-y;
    background-position: right top;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 0;
}

#works .pencilling-corner img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 200vh;
    width: auto;
    max-width: none;
    max-height: none;
}

#works .works-grid {
    overflow: hidden;
}

#works h2 {
    color: var(--color-black);
    margin-bottom: 0;
}

/* work-item の幅は SPで固定気味でもOK */
.work-item {
    position: relative;
    margin-left: 1.5rem;
}

/* 作品番号など（今のまま踏襲） */
.work-number {
    position: relative;
    font-family: var(--font-sans);
    margin-top: 90px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 900;
    color: var(--color-black);
    z-index: 1;
}

.card-stack {
    /* カルーセルの土台 */
    display: flex;
    gap: 0px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    /* iOS慣性 */
    -webkit-overflow-scrolling: touch;
    /* ここは「途中停止OK」なので snap は付けない */
    scroll-snap-type: none;
    /* 見た目 */
    padding: 8px 0px 32px;
    margin-left: 8px;
    margin-right: 16px;
    /* カードの高さを揃える（画像があるので） */
    align-items: stretch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}

.card-stack::-webkit-scrollbar {
    display: none;
}

/* Safari/Chrome */

.card {
    position: relative;
    inset: auto;
    flex: 0 0 95%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: none;
    will-change: auto;
    transition: none;
}

/* cover */
.card-cover {
    background: #fff;
    border: 4px solid #000;
    /* min-height: 0; */
}

.card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* notes */
.notes-copy {
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

.card-notes {
    background: #505050;
    color: #fff;
    padding: 16px;
    padding-bottom: 20px;
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.6;
    display: flex;
  flex-direction: column;
  height: 100%;
  /* min-height: 0; */
}

.card-notes .card-title {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 0.75rem;
}

.card-notes .card-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-white);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .card-stack {
        min-height: 86vw;
    }

    .card {
        flex: 0 0 86vw;
        width: 86vw;
        min-width: 86vw;
        height: 86vw;
        aspect-ratio: auto;
    }

    .card-cover {
        height: 86vw;
    }

    .card-notes {
        height: 86vw;
    }

    .card-staff {
        height: 86vw;
    }
}

/* =========================
   WORKS movie trigger
   ========================= */

.work-movie-actions {
    width: 100%;
    min-height: 55px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    white-space: normal;
}

.movie-trigger {
    appearance: none;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.08em;
    line-height: 1;
    margin-right: 4px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.movie-trigger-icon {
    font-size: 11px;
    line-height: 1;
}

.movie-trigger:active {
    transform: translateY(1px);
}

.movie-trigger:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

/* =========================
   Video modal
   ========================= */

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.video-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

.video-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(92vw, 960px);
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    padding: 20px 20px 16px;
    box-sizing: border-box;
}

.video-modal-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    position: absolute;
    top: -6px;
    right: 4px;
    cursor: pointer;
    padding: 0;
}

.video-modal-header {
    margin-bottom: 12px;
    padding-right: 40px;
}

.video-modal-title {
    color: #fff;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.08em;
}

.video-modal-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.video-modal-player video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    object-fit: contain;
}

.external-link-text {
    display: block;
    width: 100%;
    margin: 0 0 4px 0;
    text-align: right;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.08em;
    color: #b6b6b6;
}

.external-link-text a {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.external-link-text a:hover {
    transform: translateX(4px);
    opacity: 0.7;
}

.external-link-text a:active {
    transform: translateX(6px);
    opacity: 0.6;
}

/* staff */
.card-staff {
    background: #fff;
    border: 2px solid #000;
    color: #000;
    padding: 16px;
    font-size: clamp(14px, 3.5vw, 16px);
    line-height: 1.6;
}

.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 16px;
}

.work-tags .tag {
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    border: 1px solid #505050;
    border-radius: 2px;
    white-space: nowrap;
    color: #505050;
}

/* -------------------------
   PC：重なりカード（既存JS想定）
   - absolute + transform で制御
   ------------------------- */
@media (min-width: 768px) {

    /* PCでは横スクロールをやめて “重なりエリア” に戻す */
    .card-stack {
        display: block;
        overflow: visible;
        padding: 0;
        margin: 0;
        touch-action: auto;
        position: relative;
        width: min(80vw, 360px);
        aspect-ratio: 1 / 1;
        box-sizing: border-box;
        z-index: 10;
    }

    .card {
        position: absolute;
        inset: 0;
        width: auto;
        min-width: 0;
        height: auto;
        aspect-ratio: 1 / 1;

        /* PCはあなたのJSが transform を入れるので復活 */
        will-change: transform;

        transition:
            transform 0.45s cubic-bezier(.4, 0, .2, 1),
            z-index 0s linear;
    }

    /* 重なり順（今まで通り） */
    .card-cover {
        z-index: 3;
        height: auto;
    }

    .notes-1 {
        z-index: 2;
        height: auto;
    }

    .notes-2 {
        z-index: 1;
        height: auto;
    }

    .card-staff {
        z-index: 0;
        height: auto;
    }

    /* coverだけのSafari対策は残すならここへ */
    .card-cover {
        transition-timing-function: cubic-bezier(0.15, 0.85, 0.25, 1.25);
        touch-action: pan-y;
    }

    .work-item.is-open .card-stack-wrap {
        width: min(80vw, 360px);
        height: min(80vw, 360px);
        position: relative;
        overflow: visible;
        margin: -8px 0 24px 24px;
    }

    /* ✅ 全開時：PCも横スクロールに切り替え */
    .work-item.is-open .card-stack {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: nowrap;
        aspect-ratio: auto !important;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0 24px 24px 0;
        box-sizing: border-box;
        align-items: stretch;
    }

    .work-item.is-open .card-stack::-webkit-scrollbar {
        display: none;
    }

    /* ✅ 全開時は absolute をやめて横並び */
    .work-item.is-open .card {
        position: relative;
        inset: auto;
        flex: 0 0 360px;
        width: 360px;
        min-width: 360px;
        height: min(80vw, 360px);
        aspect-ratio: 1 / 1;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }

    .work-item.is-open .card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .work-item.is-open .work-tags {
        margin-top: calc(16px - 24px);
    }

    /* ✅ “潜る”は z-index で維持 */
    .work-item.is-open .card-cover {
        z-index: 3;
    }

    .work-item.is-open .notes-1 {
        z-index: 2;
    }

    .work-item.is-open .notes-2 {
        z-index: 1;
    }

    .work-item.is-open .card-staff {
        z-index: 0;
    }

}

.more-link {
    position: relative;
    right: auto;
    left: auto;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
    /* カード/タグとの距離 */
    /* margin-bottom: 100px; */
    /* 下の余白（広げたいならここ） */
    z-index: 20;
    /* 前面に */
    pointer-events: auto;
    gap: 8px;
    padding: 14px 0 100px;
    /* text-decoration: none; */
}

.more-text {
    font-family: var(--font-display);
    font-size: 16x;
    margin-top: 20px;
    line-height: 1em;
    color: var(--color-black);
}

.more-arrow {
    width: 60px;
    height: auto;
}


.more-arrow {
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
}

/* hover：ふつうにスッ */
.more-link:hover .more-arrow {
    transform: translateX(6px);
}

/* click中（押してる間）：さらに強く、速く */
.more-link:active .more-arrow {
    transform: translateX(12px);
    transition-duration: 0.12s;
    /* 速く */
    transition-timing-function: cubic-bezier(.2, 1.2, .2, 1);
    /* 加速っぽく */
}




/* Contact */
#contact {
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-bottom: var(--safe-btm);
}

#contact h2 {
    color: var(--color-black);
}

#contact .contact-form {
    flex: 1;
    min-height: 0;
    padding-bottom: calc(var(--safe-btm) + 24px);
}

#contact iframe {
    width: 100%;
    height: calc(100svh - 140px);
    border: 0;
    display: block;
    touch-action: pan-y;
    margin-bottom: calc(var(--safe-btm) + 24px);
}

#contact .pencilling-corner {
    display: block;
    /* PC版では表示 */
}

/* CONTACTはスナップさせない（操作優先） */
.snap-container .no-snap {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
}


/* Bio */
#bio {
    background-color: var(--color-secondary-green);
    text-align: center;
    /* overflow: visible; */
}

#bio h2 {
    color: var(--color-black);
    margin-top: 2.25rem;
    margin-bottom: 1.25rem;
}

#bio .bio-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

#bio .bio-card {
    position: relative;
    top: 0;
    left: 0;
    margin: 28px;
    padding: 16px;
    padding-bottom: calc(20px + var(--safe-btm));
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transition: transform 0.45s ease, z-index 0s linear;
    background: #fff;
    border: 4px solid #000;
}

#bio .bio-image {
    position: relative;
    width: 127px;
    height: 127px;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    overflow: visible;
    margin: 0 auto;
}

#bio .bio-image img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

/* 黒丸（真裏） */
#bio .bio-image::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #000;
    z-index: 1;
    transform: translateX(0);
    opacity: 1;
    transition:
        transform 520ms cubic-bezier(.22, 1, .36, 1) 180ms;
    pointer-events: none;
}

/* 出現時：黒丸だけスッと右へ */
#bio.section-animate.is-visible .bio-image::before {
    transform: translateX(50px);
}

/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
    #bio .bio-image::before {
        transition: none;
        transform: none;
    }
}

#bio .bio-image {
    cursor: default;
}

#bio .bio-image * {
    cursor: default;
}

#bio .bio-text .bio-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 1rem;
    text-align: left;
    color: var(--color-black);
}

#bio .bio-text p {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 100;
    font-size: 12px;
    line-height: 1.75;
    text-align: left;
    letter-spacing: 0.02em;
    color: var(--color-black);
}

#bio .bio-text .p2 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 100;
    color: var(--color-black);
    line-height: 1.45;
    margin-top: 0.75rem;
}

#bio .bio-text p+p {
    margin-top: 0.7em;
}


/* Footer */
#footer.footer-section {
    background: #fff;
    min-height: 30svh;
    /* 好みで 30〜60svh */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

#footer .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#footer .footer-logo {
    width: 100px;
    height: auto;
}

#footer .footer-copy {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #505050;
    margin: 0;
}

/* =================================
   Section fade-in (initial state)
================================= */

.section-animate h2,
.section-animate .animate-item {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

/* タイトルは少しだけ強く */
.section-animate h2 {
    transform: translateY(32px);
}

/* 表示されたら */
.section-animate.is-visible h2,
.section-animate.is-visible .animate-item {
    opacity: 1;
    transform: translateY(0);
}

/* タイトル → 本文で少しディレイ */
.section-animate.is-visible h2 {
    transition-delay: 0s;
}

.section-animate.is-visible .animate-item {
    transition-delay: 0.12s;
}

#philosophy .main-text,
#works .work-item,
#contact .contact-form,
#bio .bio-card {
    will-change: opacity, transform;
}

.section-animate .animate-item {
    transform: translateY(24px);
}

html {
  scroll-behavior: smooth;
}

/* SP：snap-container をスクロールさせる */
html,
body {
    height: 100%;
    overflow: hidden;
    /* bodyはスクロール禁止 */
}

.snap-container {
    position: fixed;
    inset: 0;
    height: 100svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
}

.snap-container section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.snap-container footer {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

/* PC：snapは無効（今のwheel制御のまま） */
@media (min-width: 768px) {

    html,
    body {
        height: auto;
        overflow: auto;
    }

    .snap-container {
        position: relative;
        inset: auto;
        height: auto;
        overflow: visible;
        scroll-snap-type: none;
    }

    .snap-container section {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
}

/* Desktop Styles */
@media (width >=768px) {
    section {
        padding: 0rem 3.25rem;
    }

    h2 {
        font-size: 2.5rem;
        margin-top: 3.25rem;
    }

    .pencilling-corner img {
        width: 200vh;
        height: auto;
    }

    #works {
        position: relative;
        isolation: isolate;
    }

    #works>*:not(.pencilling-corner) {
        position: relative;
        z-index: 1;
    }

    #works .pencilling-corner {
        /* width: 200vh;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        overflow: hidden; */
        position: absolute;
        inset: 0;
        /* ←右下固定の基本に戻す */
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }

    #works .pencilling-corner img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: none;
    }

    /* 縦線も画面右端へ */
    #works .pencilling-corner::before {
        right: 0;
    }

    /* Header */
    header {
        padding: 2rem 4rem;
    }

    header .logo img {
        width: 130px;
    }

    header nav {
        display: block;
    }

    header nav ul {
        display: flex;
        gap: 2rem;
        font-family: var(--font-display);
        font-weight: 800;
    }

    /* Main Visual */
    #main-visual {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 4rem;
        align-items: center;
    }

    #main-visual .pencilling-corner {
        display: block;
        /* PC版では表示 */
    }


    #main-visual .main-text {
        text-align: left;
        margin-top: 0;
        z-index: 1;
    }

    #main-visual .main-text h1 {
        font-size: 2.25rem;
    }

    #main-visual .main-text .logo-main {
        /* margin: 2rem 0; */
        width: 250px;
    }

    #main-visual .main-text p {
        font-size: 1.75rem;
    }


    /* Philosophy */
    #philosophy .philosophy-content .sub-text {
        font-size: 2.5rem;
        text-align: left;
        margin-bottom: 0;
    }

    #philosophy .philosophy-content .main-text {
        text-align: center;
    }


    /* Bio */
    #bio .bio-content {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 4rem;
        max-width: 900px;
        margin: 0 auto;
        text-align: left;
    }

    #bio .pencilling-corner {
        display: block;
        /* PC版では表示 */
    }

    #bio .bio-image {
        width: 160px;
        height: 160px;
    }

    #bio .bio-image img {
        width: 100%;
        height: 100%;
    }

    #bio .bio-text {
        max-width: 500px;
    }


    /* PC：Scroll Snapを解除（PCは今のwheel制御を使う） */
    body {
        scroll-snap-type: none;
    }

    section {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
}

/* End of @media (width >= 768px) */

/* =========
  共通（初期状態）
========= */

/* アクセシビリティ：動きを減らす設定の人 */
@media (prefers-reduced-motion: reduce) {
    .more-arrow {
        transition: none;
    }
}

/* =========================
   Loading screen
   ========================= */

#loading-screen {
    position: fixed;
    inset: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loading-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-inner {
    width: min(42vw, 220px);
}

.loading-mark {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.loading-dot {
    fill: #231815;
    opacity: 0;
    transform-origin: 292.89px 405.83px;
    animation: loadingDotBreath 1.05s cubic-bezier(.22, 1, .36, 1) forwards;
}

.loading-path {
    fill: none;
    stroke: #231815;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.8;
    opacity: 0;
}

.loading-path.is-ready {
    opacity: 1;
    animation: loadingDraw 2.1s cubic-bezier(.18, .11, .6, 1) forwards 0.72s;
}

@keyframes loadingDotBreath {
    0% {
        opacity: 0;
        transform: scale(0.55);
    }

    40% {
        opacity: 1;
        transform: scale(1.00);
    }

    50% {
        opacity: 1;
        transform: scale(2.20);
    }

    95% {
        opacity: 1;
        transform: scale(0.80);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes loadingDraw {
    to {
        stroke-dashoffset: 0;
    }
}

body.is-loading #main-visual .main-text,
body.is-loading #main-visual .scroll-indicator {
    opacity: 0;
}

body.is-loaded #main-visual .main-text,
body.is-loaded #main-visual .scroll-indicator {
    opacity: 1;
    transition: opacity 0.8s ease;
}

body.is-loading header,
body.is-loading .snap-container {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.is-loaded header,
body.is-loaded .snap-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.8s ease;
}

#works .work-item {
    opacity: 1 !important;
    transform: none !important;
}