:root {
    --ink: #151617;
    --paper: #f8f7f2;
    --ochre: #e7a900;
    --line: #c9c8c0;
  --font-main: "Noto Serif JP", serif;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
  font-family: var(--font-main);
    line-height: 1.75
}

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

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

.shell {
    width: min(1180px, calc(100% - 96px));
    margin-inline: auto
}

.registration {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20
}

.registration span {
    position: absolute;
    width: 28px;
    height: 28px
}

.registration span:before,
.registration span:after {
    content: "";
    position: absolute;
    background: #747778
}

.registration span:before {
    width: 1px;
    height: 28px;
    left: 13px
}

.registration span:after {
    height: 1px;
    width: 28px;
    top: 13px
}

.registration span:nth-child(1) {
    left: 20px;
    top: 18px
}

.registration span:nth-child(2) {
    right: 20px;
    top: 18px
}

.registration span:nth-child(3) {
    left: 20px;
    bottom: 18px
}

.registration span:nth-child(4) {
    right: 20px;
    bottom: 18px
}

.site-header {
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo {
    font-weight: 800;
    letter-spacing: .12em
}

.logo b {
    color: var(--ochre);
    margin-left: 12px
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 12px;
    font-weight: 600
}

.nav-cta {
    background: var(--ochre);
    padding: 11px 22px
}

.hero {
    padding: 80px 0 150px;
    display: grid;
    grid-template-columns: minmax(420px, .82fr) 1.18fr;
    gap: 50px;
    align-items: center;
    min-height: 720px
}

.eyebrow {
    font-size: 12px;
    letter-spacing: .08em;
    margin: 0 0 22px
}

.hero h1 {
    font-size: clamp(54px, 6vw, 92px);
    letter-spacing: .035em;
    line-height: 1.12;
    margin: 0 0 42px;
    font-weight: 800;
    overflow: hidden
}

.hero h1 span {
    display: block;
    width: max-content;
    opacity: 0;
    transform: translateY(34px);
    filter: blur(7px);
    animation: print-in .72s cubic-bezier(.2, .75, .2, 1) forwards
}

.hero h1 span:nth-child(2) {
    animation-delay: .16s
}

.hero h1:after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    background: var(--ochre);
    margin-top: 20px;
    animation: rule-in .55s .58s ease-out forwards
}

.lead {
    font-size: clamp(23px, 2.5vw, 34px);
    font-weight: 700;
    line-height: 1.65;
    margin: 0 0 25px
}

.hero-note {
    font-size: 13px;
    line-height: 2;
    color: #555
}

.hero-symbol {
    margin: 0;
    position: relative
}

.hero-symbol img {
    width: 100%;
    aspect-ratio: 1.35/1;
    object-fit: contain;
    mix-blend-mode: multiply
}

.hero-symbol figcaption {
    font-size: 10px;
    letter-spacing: .1em;
    color: #777;
    text-align: right;
    margin-top: -20px
}

@keyframes print-in {
    55% {
        opacity: .72;
        filter: blur(2px)
    }

    100% {
        opacity: 1;
        transform: none;
        filter: none
    }
}

@keyframes rule-in {
    to {
        width: 160px
    }
}

.statement {
    padding: 150px 0 170px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 45px;
    border-top: 1px solid var(--line)
}

.section-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0
}

.section-label:after {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    background: var(--ochre);
    margin-top: 15px
}

.statement-copy {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: clamp(19px, 2vw, 29px);
    line-height: 2.05
}

.statement-copy p {
    margin: 0 0 1.2em
}

.artwork {
    padding: 0 0 150px
}

.artwork img {
    width: 100%;
    height: min(660px, 60vw);
    object-fit: cover
}

.ink-spacer {
    height: 110px;
    background: var(--ink)
}

.ink {
    background: var(--ink);
    color: white
}

.services {
    padding: 170px 0
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

.service-grid article {
    padding: 0 50px;
    border-left: 1px solid #676767
}

.service-grid article:first-child {
    border-left: 0;
    padding-left: 0
}

.service-grid article:last-child {
    padding-right: 0
}

.number {
    display: block;
    color: #ffc400;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 13px
}

.service-grid h2 {
    font-size: 25px;
    margin: 0 0 25px
}

.service-grid p {
    font-size: 14px;
    color: #d8d8d8;
    min-height: 125px
}

.service-grid h3 {
    font-size: 12px;
    margin: 32px 0 15px
}

.service-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #e5e5e5
}

.service-grid li {
    margin: 8px 0
}

.service-grid li:before {
    content: "—";
    color: #ffc400;
    margin-right: 9px
}

.works {
    padding: 180px 0
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 55px;
    border-bottom: 1px solid var(--line)
}

.section-head h2 {
    font-size: 30px;
    margin: 0 0 15px
}

.section-head a {
    font-size: 12px
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 62px 28px
}

.work-image {
    aspect-ratio: 1.45/1;
    background: white;
    overflow: hidden
}

.work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.work-grid article:hover img {
    transform: scale(1.025)
}

.work-grid h3 {
    font-size: 16px;
    margin: 15px 0 2px
}

.work-grid p {
    font-size: 12px;
    margin: 0;
    color: #636363
}

.approach {
    padding: 170px 0
}

.approach-title {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 60px
}

.approach-title h2 {
    font-size: 32px;
    margin: 0
}

.approach-title p {
    color: #bbb;
    font-size: 13px
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr)
}

.approach-grid article {
    padding: 0 28px;
    border-left: 1px solid #686868
}

.approach-grid article:first-child {
    padding-left: 0;
    border: 0
}

.approach-grid small {
    display: block;
    color: #cfcfcf;
    min-height: 25px
}

.approach-grid h3 {
    font-size: 20px;
    margin: 7px 0
}

.approach-grid p {
    font-size: 12px;
    color: #bbb;
    min-height: 55px
}

.mark {
    height: 165px;
    position: relative;
    margin-top: 34px
}

.mark i {
    position: absolute;
    display: block;
    width: 60px;
    height: 24px;
    background: #e7e6df;
    transform: skewY(-18deg);
    box-shadow: 7px 8px 0 #777
}

.mark i:nth-child(2) {
    background: var(--ochre)
}

.observe i:nth-child(1) {
    left: 5%;
    top: 20%
}

.observe i:nth-child(2) {
    right: 12%;
    top: 10%
}

.observe i:nth-child(3) {
    left: 35%;
    bottom: 18%
}

.observe i:nth-child(4) {
    right: 0;
    bottom: 0
}

.align i {
    width: 85%;
    left: 5%
}

.align i:nth-child(1) {
    top: 15%
}

.align i:nth-child(2) {
    top: 52%
}

.align i:nth-child(3),
.align i:nth-child(4) {
    display: none
}

.overlap i {
    width: 75%;
    left: 12%;
    border-radius: 50%
}

.overlap i:nth-child(1) {
    top: 2%;
    transform: rotate(-12deg)
}

.overlap i:nth-child(2) {
    top: 34%;
    transform: rotate(7deg)
}

.overlap i:nth-child(3) {
    top: 64%;
    transform: rotate(-5deg)
}

.overlap i:nth-child(4) {
    display: none
}

.repeat i {
    width: 65%;
    border-radius: 50% 5px
}

.repeat i:nth-child(1) {
    left: 0;
    top: 4%
}

.repeat i:nth-child(2) {
    left: 20%;
    top: 25%
}

.repeat i:nth-child(3) {
    left: 38%;
    top: 46%
}

.repeat i:nth-child(4) {
    left: 18%;
    top: 67%
}

.profile {
    padding: 170px 0
}

.profile-layout {
    display: grid;
    grid-template-columns: 150px 1.1fr 1fr;
    gap: 55px;
    align-items: start;
    margin-top: 55px
}

.profile-layout img {
    width: 150px;
    aspect-ratio: 1/1;
    object-fit: cover;
    filter: grayscale(1)
}

.profile h2 {
    font-size: 23px;
    margin: 0 0 18px
}

.profile h2 small {
    font-size: 11px;
    margin-left: 12px
}

.profile ul {
    padding: 0;
    list-style: none;
    margin: 0;
    font-size: 14px
}

.partners {
    border-left: 1px solid var(--line);
    padding-left: 45px
}

.partners h3 {
    margin: 0 0 15px
}

.partners p {
    font-size: 13px;
    max-width: 360px
}

.contact {
    padding-bottom: 170px
}

.contact>a {
    min-height: 260px;
    background: var(--ochre);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 55px 70px;
    transition: background .25s, transform .25s
}

.contact>a:hover {
    background: #f2ba00;
    transform: translateY(-3px)
}

.contact small {
    font-weight: 800
}

.contact h2 {
    font-size: 38px;
    line-height: 1.35;
    margin: 12px 0
}

.contact p {
    font-size: 13px
}

.contact strong {
    font-size: 18px;
    border: 1px solid var(--ink);
    padding: 24px 28px;
    min-width: 330px
}

.contact strong span {
    float: right;
    font-size: 25px
}

footer {
    border-top: 1px solid var(--line);
    padding: 35px 0 50px
}

footer .shell {
    display: flex;
    justify-content: space-between;
    font-size: 12px
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .hero h1 span,
    .hero h1:after {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none
    }

    .hero h1:after {
        width: 160px
    }
}

@media(max-width:800px) {
    .shell {
        width: min(100% - 40px, 600px)
    }

    .registration {
        display: none
    }

    .site-header {
        height: 82px
    }

    .site-header nav a:not(.nav-cta) {
        display: none
    }

    .nav-cta {
        padding: 9px 12px
    }

    .hero {
        padding: 55px 0 100px;
        display: flex;
        flex-direction: column;
        gap: 55px;
        align-items: stretch;
        min-height: 0
    }

    .hero h1 {
        font-size: 49px;
        margin-bottom: 35px
    }

    .hero-symbol {
        order: -1
    }

    .hero-symbol figcaption {
        margin-top: 0
    }

    .lead {
        font-size: 23px
    }

    .statement {
        padding: 100px 0 110px;
        grid-template-columns: 1fr;
        gap: 35px
    }

    .statement-copy {
        font-size: 18px
    }

    .statement-copy br {
        display: none
    }

    .artwork {
        padding-bottom: 100px
    }

    .artwork img {
        height: 62vw
    }

    .ink-spacer {
        height: 70px
    }

    .services {
        padding: 110px 0
    }

    .service-grid {
        grid-template-columns: 1fr
    }

    .service-grid article {
        padding: 55px 0;
        border-left: 0;
        border-top: 1px solid #555
    }

    .service-grid article:first-child {
        padding-top: 0;
        border: 0
    }

    .service-grid p {
        min-height: 0
    }

    .works {
        padding: 110px 0
    }

    .work-grid {
        grid-template-columns: 1fr;
        gap: 50px
    }

    .approach {
        padding: 110px 0
    }

    .approach-grid {
        grid-template-columns: 1fr
    }

    .approach-grid article {
        padding: 45px 0;
        border-left: 0;
        border-top: 1px solid #555
    }

    .approach-grid article:first-child {
        padding-top: 0;
        border-top: 0
    }

    .mark {
        height: 130px
    }

    .profile {
        padding: 110px 0
    }

    .profile-layout {
        grid-template-columns: 90px 1fr;
        gap: 25px
    }

    .profile-layout img {
        width: 90px
    }

    .partners {
        grid-column: 1/-1;
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 30px 0 0
    }

    .contact {
        padding-bottom: 100px
    }

    .contact>a {
        padding: 42px 30px;
        display: block
    }

    .contact h2 {
        font-size: 28px
    }

    .contact strong {
        display: block;
        min-width: 0;
        margin-top: 35px;
        font-size: 14px
    }

    .section-head a {
        display: none
    }
}

/* 2026-08-16 feedback */
.shell {
    width: min(var(--page-width), calc(100% - var(--page-side)*2))
}

.logo {
    font-size: var(--logo-font-size)
}

.site-header nav {
    font-size: var(--nav-font-size)
}

.registration span {
    border: 1px solid transparent;
    border-radius: 50%
}

.registration span:before {
    height: 36px;
    top: -4px
}

.registration span:after {
    width: 36px;
    left: -4px
}

.registration span:nth-child(1):after,
.registration span:nth-child(2):after,
.registration span:nth-child(3):after,
.registration span:nth-child(4):after {
    box-shadow: inset 0 0 0 8px var(--paper)
}

.hero h1 {
    font-size: clamp(54px, 6vw, var(--hero-font-size))
}

.eyebrow {
    font-weight: 800;
    letter-spacing: .2em;
    line-height: 1.45
}

.artwork {
    position: relative;
    padding: 0;
    margin-bottom: var(--section-space)
}

.artwork img {
    height: min(760px, 65vw)
}

.statement-overlay {
    position: absolute;
    left: 6%;
    bottom: 8%;
    width: min(720px, 70%);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(4px);
    padding: 42px 48px;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 30px
}

.statement-overlay .statement-copy {
    font-size: 17px;
    line-height: 1.9
}

.statement-overlay .statement-copy p {
    margin: 0 0 1em
}

.ink-spacer {
    height: 120px
}

.services,
.works,
.approach,
.profile {
padding-top: var(--section-space-top);
padding-bottom: var(--section-space-bottom);
}

.service-grid h4 {
    font-size: 14px;
    color: #fff;
    margin: -18px 0 0
}

.service-mark {
    height: 92px;
    position: relative;
    margin: 26px 0 22px
}

.service-mark i {
    position: absolute;
    display: block;
    background: #e9e7de;
    height: 15px;
    width: 68px;
    transform: skewY(-12deg);
    box-shadow: 5px 5px #606060
}

.service-mark i:nth-child(2) {
    background: var(--ochre)
}

.mark-a i:nth-child(1) {
    left: 0;
    top: 12px
}

.mark-a i:nth-child(2) {
    left: 78px;
    top: 35px
}

.mark-a i:nth-child(3) {
    left: 155px;
    top: 58px
}

.mark-b i {
    left: 55px
}

.mark-b i:nth-child(1) {
    top: 8px
}

.mark-b i:nth-child(2) {
    top: 36px;
    width: 105px
}

.mark-b i:nth-child(3) {
    top: 64px;
    width: 145px
}

.mark-c i {
    border-radius: 50%
}

.mark-c i:nth-child(1) {
    left: 10px;
    top: 12px
}

.mark-c i:nth-child(2) {
    left: 65px;
    top: 36px
}

.mark-c i:nth-child(3) {
    left: 120px;
    top: 60px
}

.work-grid {
    gap: 28px
}

.work-grid article:nth-child(n+4) {
    display: none
}

.approach-title {
    justify-content: space-between
}

.approach-title>div p {
    margin: 0
}

.approach-grid article {
    position: relative
}

.approach-grid article:not(:last-child):after {
    content: "→";
    position: absolute;
    right: -8px;
    top: 48%;
    color: var(--ochre);
    z-index: 2;
    font-size: 22px
}

.profile-layout {
    grid-template-columns: 150px 1.5fr .9fr
}

.bio p,
.bio li {
    font-size: 13px
}

.bio p {
    margin: 0 0 15px
}

.partner-icon {
    height: 105px;
    position: relative;
    margin-bottom: 28px
}

.partner-icon i {
    position: absolute;
    width: 64px;
    height: 34px;
    border: 2px solid var(--ink);
    border-radius: 50%
}

.partner-icon i:nth-child(1) {
    left: 0;
    top: 30px
}

.partner-icon i:nth-child(2) {
    left: 44px;
    top: 8px;
    border-color: var(--ochre)
}

.partner-icon i:nth-child(3) {
    left: 80px;
    top: 46px
}

@media(max-width:800px) {
    .shell {
        width: calc(100% - 40px)
    }

    .services,
    .works,
    .approach,
    .profile {
      padding-top: var(--section-space-top-mobile);
padding-bottom: var(--section-space-bottom-mobile);
    }

    .artwork {
        width: 100%;
        margin-bottom: var(--section-space-mobile)
    }

    .statement-overlay {
        position: relative;
        left: auto;
        bottom: auto;
        width: calc(100% - 40px);
        margin: -25px auto 0;
        padding: 30px 24px;
        display: block
    }

    .statement-overlay .section-label {
        margin-bottom: 25px
    }

    .statement-overlay .statement-copy {
        font-size: 16px
    }

    .statement-overlay br {
        display: none
    }

    .service-mark {
        margin-bottom: 10px
    }

    .approach-grid article:not(:last-child):after {
        content: "↓";
        right: 8px;
        bottom: -18px;
        top: auto
    }

    .profile-layout {
        grid-template-columns: 90px 1fr
    }

    .bio {
        grid-column: 2
    }

    .partners {
        grid-column: 1/-1
    }

}

/* ==================================================
   FINAL ADJUSTMENTS
   コンテンツ幅・MV・トンボの最終設定
================================================== */

/* メインコンテンツだけを少し狭くする */
main .shell {
    width: min(var(--content-width), calc(100% - var(--content-side) * 2));
}

/* ヘッダーの左右をメインコンテンツに揃える */
.site-header {
    width: min(var(--content-width), calc(100% - var(--content-side) * 2));
}

/* MV全体を一枚の四角い版面として扱う */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* 狭い画面でもコピーを画像より上に置く */
.hero-copy {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.hero-symbol {
    position: relative;
    z-index: 1;
    min-width: 0;
}

/* タイトルの基本組版 */
.hero h1 {
    position: relative;
    z-index: 4;
    width: max-content;
    max-width: none;
    margin: 0 0 42px;
    padding: .08em 0 .12em;
    overflow: visible;
    font-size: clamp(64px, 7.5vw, var(--hero-font-size));
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.07em;
    color: #d5d5cf;
}

.hero h1 span {
    position: relative;
    z-index: 4;
    display: block;
    width: max-content;
    overflow: visible;
    color: inherit;
    -webkit-text-fill-color: currentColor;
    background: none;
    filter: none;
    mix-blend-mode: normal;
    opacity: 1;
    transform: none;
    animation: none;
}

/* 古い短い線や質感用レイヤーを解除 */
.hero h1::before,
.hero h1::after {
    display: none;
}

/* 最初はタイトルと画像を完全に隠す */
.hero h1,
.hero-symbol {
    opacity: 0;
    clip-path: inset(48% 0 48% 0);
    animation: mv-content-open .65s 1.15s cubic-bezier(.7, 0, .2, 1) forwards;
}

/* タイトル：薄いグレー → 黄土色 → 黒 */
.hero h1 {
    animation:
        mv-content-open .65s 1.15s cubic-bezier(.7, 0, .2, 1) forwards,
        mv-title-plates .65s 1.15s steps(1, end) forwards;
}

/* 画像：タイトルと同じタイミングで刷る */
.hero-symbol img {
    opacity: 1;
    clip-path: none;
    filter: grayscale(1) contrast(.7) brightness(1.12);
    animation: mv-image-plates .65s 1.15s steps(1, end) forwards;
}

/* 先に黄色い線だけが左から右へ走る */
.hero::after {
    content: "";
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--ochre);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    animation: mv-line-run 1.05s cubic-bezier(.65, 0, .2, 1) forwards;
    pointer-events: none;
}

/* 上下の説明はタイトルと画像の後に表示 */
.hero .eyebrow,
.hero .lead,
.hero .hero-note {
    opacity: 0;
    transform: translateY(7px);
    animation: mv-meta-in .4s 1.9s ease-out forwards;
}

@keyframes mv-line-run {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    5% {
        opacity: 1;
        transform: scaleX(0);
    }
    76% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

@keyframes mv-content-open {
    0% {
        opacity: 0;
        clip-path: inset(48% 0 48% 0);
    }
    2% {
        opacity: 1;
        clip-path: inset(48% 0 48% 0);
    }
    100% {
        opacity: 1;
        clip-path: inset(-12% 0 -12% 0);
    }
}

@keyframes mv-title-plates {
    0% { color: #d5d5cf; }
    40% { color: #c89516; }
    72%, 100% { color: var(--ink); }
}

@keyframes mv-image-plates {
    0% {
        filter: grayscale(1) contrast(.7) brightness(1.12);
        opacity: .35;
    }
    40% {
        filter: grayscale(1) sepia(1) saturate(1.6) hue-rotate(355deg);
        opacity: .75;
    }
    72%, 100% {
        filter: none;
        opacity: 1;
    }
}

@keyframes mv-meta-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* トンボ：最初は黄色、MV完成後は背景に合わせて黒／白 */
.registration {
    color: var(--ochre);
    animation: registration-ready .01s 2.3s steps(1, end) forwards;
}

.registration span::before,
.registration span::after {
    background: currentColor;
}

@keyframes registration-ready {
    0% {
        color: var(--ochre);
        mix-blend-mode: normal;
    }
    100% {
        color: #fff;
        mix-blend-mode: difference;
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .hero-symbol {
        transform: translateX(35px);
    }
}

@media (max-width: 800px) {
    main .shell,
    .site-header {
        width: calc(100% - 40px);
    }

    .hero h1 {
        font-size: 52px;
        line-height: .9;
    }
}

/* ==================================================
   PARTIAL UPDATE 05：Statement見出しをWorksと統一
================================================== */

.statement-head {
    margin-bottom: 55px;
}

.statement-head h2 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

.statement-visual {
    position: relative;
    overflow: hidden;
}

.statement-visual > img {
    width: 100%;
}

/* 見出しは画像外へ移したため、本文だけを画像に重ねる */
.statement-visual .statement-overlay {
    position: absolute;
    inset: 0;
}

@media (max-width: 800px) {
    .statement-head {
        margin-bottom: 32px;
    }

    .statement-head h2 {
        font-size: 26px;
    }
}

/* 動きを減らす設定の端末では、完成状態を即時表示 */
@media (prefers-reduced-motion: reduce) {
    .hero h1,
    .hero-symbol,
    .hero-symbol img,
    .hero .eyebrow,
    .hero .lead,
    .hero .hero-note,
    .registration {
        opacity: 1;
        clip-path: none;
        filter: none;
        transform: none;
        animation: none;
    }

    .hero::after {
        display: none;
    }
}

/* ==================================================
   PARTIAL UPDATE：MV・4色見当・Contact
================================================== */

/* MVコピーを画像に少し重なる大きさへ */
.hero h1 {
    font-size: clamp(82px, 10.2vw, 156px);
}

/* 線を早く走らせ、消えた直後に文字と画像を表示 */
.hero::after {
    animation-duration: .48s;
}

.hero h1,
.hero-symbol {
    animation: mv-content-open .42s .64s cubic-bezier(.7, 0, .2, 1) forwards;
}

.hero h1 {
    animation:
        mv-content-open .42s .64s cubic-bezier(.7, 0, .2, 1) forwards,
        mv-title-plates .42s .64s steps(1, end) forwards;
}

.hero-symbol img {
    animation: mv-image-plates .42s .64s steps(1, end) forwards;
}

.hero .eyebrow,
.hero .lead,
.hero .hero-note {
    animation: mv-meta-in .28s 1.12s ease-out forwards;
}

/* 4色見当。ズレ量はindex.htmlの短い処理で毎回変化する */
.registration {
    --gray-x: -7px;
    --gray-y: 7px;
    --ochre-x: 1px;
    --ochre-y: -1px;
    --white-x: -3px;
    --white-y: 3px;
    color: #c4c6c5;
    animation: none;
    mix-blend-mode: normal;
}

.registration span::before,
.registration span::after {
    background: currentColor;
    transition: color .18s ease, box-shadow .25s ease;
}

.register-gray .registration {
    color: #c4c6c5;
}

.register-gray .registration span::before,
.register-gray .registration span::after {
    box-shadow: none;
}

.register-ochre .registration {
    color: var(--ochre);
}

.register-ochre .registration span::before {
    box-shadow: var(--gray-x) 0 #c4c6c5;
}

.register-ochre .registration span::after {
    box-shadow: 0 var(--gray-y) #c4c6c5;
}

.register-white .registration {
    color: #fff;
}

.register-white .registration span::before {
    box-shadow:
        var(--gray-x) 0 #c4c6c5,
        var(--ochre-x) 0 var(--ochre);
}

.register-white .registration span::after {
    box-shadow:
        0 var(--gray-y) #c4c6c5,
        0 var(--ochre-y) var(--ochre);
}

.register-black .registration {
    color: #252627;
}

.register-black .registration span::before {
    box-shadow:
        var(--gray-x) 0 #c4c6c5,
        var(--ochre-x) 0 var(--ochre),
        var(--white-x) 0 #fff;
}

.register-black .registration span::after {
    box-shadow:
        0 var(--gray-y) #c4c6c5,
        0 var(--ochre-y) var(--ochre),
        0 var(--white-y) #fff;
}

/* Contact：黄土色のエリア＋黒い角丸ボタン */
.contact > a,
.contact > a:hover {
    background: var(--ochre);
}

.contact > a:hover {
    transform: none;
}

.contact strong {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
    border-radius: 999px;
    transition: color .2s ease, background-color .2s ease;
}

.contact > a:hover strong {
    color: var(--ink);
    background: #fff;
}

@media (max-width: 800px) {
    .hero h1 {
        font-size: clamp(58px, 18vw, 92px);
    }
}

/* ==================================================
   PARTIAL UPDATE 02：レイアウトの微調整
================================================== */

/* 見当を十字からL字へ。大きさ70%、濃度50% */
.registration {
    opacity: .7;
}

.registration span {
    width: 100px;
    height: 100px;
    border: 0;
    border-radius: 0;
}

.registration span::before,
.registration span::after {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

.registration span::before {
    width: 0.5px;
    height: 28px;
}

.registration span::after {
    width: 28px;
    height: 0.5px;
}

.registration span:nth-child(1)::before,
.registration span:nth-child(1)::after {
    top: 0;
    left: 0;
}

.registration span:nth-child(2)::before,
.registration span:nth-child(2)::after {
    top: 0;
    right: 0;
}

.registration span:nth-child(3)::before,
.registration span:nth-child(3)::after {
    bottom: 0;
    left: 0;
}

.registration span:nth-child(4)::before,
.registration span:nth-child(4)::after {
    right: 0;
    bottom: 0;
}

/* MV：画像を1.5倍にし、コピー全体と下端を揃える */
.hero {
    align-items: end;
}

.hero-copy,
.hero-symbol {
    align-self: end;
}

.hero-symbol {
    z-index: 1;
    transform: scale(1.25);
    transform-origin: right bottom;
}

.hero-copy {
    z-index: 3;
}

/* 肩の英文を1.5倍、文字間を半分へ */
.hero .eyebrow {
    font-size: 15px;
    letter-spacing: .0.2em;
}

/* Works：見出しは維持し、サムネイル群を75%幅で右寄せ */
.works .work-grid {
    width: 85%;
    margin-left: auto;
}

/* Statement：高さを半分にし、文章を左側へまとめる */
.artwork img {
    height: min(380px, 32.5vw);
    object-fit: cover;
}

.statement-overlay {
    left: 3%;
    bottom: 7%;
    width: min(610px, 62%);
    padding: 24px 28px;
    display: block;
}

.statement-overlay .section-label {
    margin: 0 0 14px;
}

.statement-overlay .statement-copy {
    max-width: 520px;
    font-size: 14px;
    line-height: 1.75;
}

.statement-overlay .statement-copy p {
    margin-bottom: .65em;
}

/* Service見出し */
.service-head {
    margin-bottom: 60px;
    border-color: #686868;
}

.service-head h2 {
    color: #fff;
}

/* Contactを全幅にし、フッターと黄土色で一体化 */
.contact.shell {
    width: 100%;
    max-width: none;
    padding: 0;
    background: var(--ochre);
}

.contact > a {
    width: min(var(--content-width), calc(100% - var(--content-side) * 2));
    min-height: 260px;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 0;
}

/* ボタンを文字量に合わせる */
.contact strong {
    min-width: 0;
    width: auto;
    padding: 14px 22px;
    line-height: 1.4;
    white-space: nowrap;
}

.contact strong span {
    float: none;
    margin-left: 28px;
    font-size: 18px;
}

footer {
    border-top: 0;
    background: var(--ochre);
    padding: 0 0 36px;
}

footer .shell {
    justify-content: flex-end;
}

@media (max-width: 800px) {
    .hero-symbol {
        transform: none;
    }

    .hero .eyebrow {
        font-size: 14px;
    }

    .works .work-grid {
        width: 100%;
    }

    .artwork img {
        height: 260px;
    }

    .statement-overlay {
        width: calc(100% - 40px);
        padding: 24px 20px;
    }

    .contact > a {
        width: calc(100% - 40px);
        padding: 48px 0;
    }

    .contact strong {
        white-space: normal;
    }
}

/* ==================================================
   PARTIAL UPDATE 03：Statementの白ベタ
================================================== */

/* 白ベタを画像の左半分へ固定し、画像と同じ高さにする */
.statement-overlay {
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: clamp(24px, 3vw, 48px);
    background: rgba(255, 255, 255, .65);
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.statement-overlay .section-label,
.statement-overlay .statement-copy {
    width: 100%;
    max-width: 520px;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
}

@media (max-width: 800px) {
    .statement-overlay {
        position: absolute;
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        width: 72%;
        height: 100%;
        margin: 0;
        padding: 20px;
    }

    .statement-overlay .statement-copy {
        font-size: 12px;
        line-height: 1.65;
    }
}
.statement-overlay .statement-copy {
    max-width: 760px;
    font-size: clamp(18px, 1.55vw, 25px);
    line-height: 1.9;
    letter-spacing: .015em;
}

.statement-overlay .statement-copy p {
    margin: 0 0 1em;
}

.statement-overlay .section-label {
    font-size: 16px;
    letter-spacing: .08em;
}/* Statement：全面ベタ＋太いゴシック体 */
.statement-overlay {
    inset: 0;
    width: 100%;
    height: 100%;
    padding: clamp(32px, 5vw, 80px);
    background: rgba(255, 255, 255, .90);
    justify-content: center;
}

.statement-overlay .statement-copy {
    width: 100%;
    max-width: none;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(24px, 2.5vw, 42px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.045em;
}

.statement-overlay .statement-copy p {
    margin: 0 0 .7em;
}

.statement-overlay .section-label {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: clamp(24px, 3vw, 48px);
}
/* Statement：ポスター的な3段構成 */
.statement-overlay {
    padding: clamp(34px, 4vw, 70px);
    background: rgba(255, 255, 255, .28);
}

.statement-overlay .section-label {
    margin: 0 0 clamp(32px, 4vw, 65px);
    font-size: 14px;
    letter-spacing: .14em;
}

.statement-overlay .statement-copy {
    width: 100%;
    max-width: none;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.055em;
}

/* 1段目：入口になる言葉 */
.statement-overlay .statement-copy p:nth-child(1) {
    width: 66%;
    margin: 0 0 .8em;
    font-size: clamp(27px, 3.1vw, 52px);
}

/* 2段目：少し右へずらす */
.statement-overlay .statement-copy p:nth-child(2) {
    width: 70%;
    margin: 0 0 .9em 14%;
    font-size: clamp(23px, 2.5vw, 42px);
}

/* 3段目：結論として強く見せる */
.statement-overlay .statement-copy p:nth-child(3) {
    width: 72%;
    margin: 0 0 0 auto;
    font-size: clamp(29px, 3.4vw, 58px);
    line-height: 1.06;
}

/* 長い文章内のbrは使わず、幅で自然に改行 */
.statement-overlay .statement-copy br {
    display: none;
}

/* ==================================================
   PARTIAL UPDATE 04：Statement最終整理
================================================== */

.statement-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: clamp(28px, 3.5vw, 60px);
    background: rgba(255, 255, 255, .32);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
}

.statement-overlay .section-label {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .16em;
}

.statement-overlay .statement-copy {
    flex: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.055em;
}

.statement-overlay .statement-copy p:nth-child(1) {
    width: 62%;
    margin: 0 0 .65em;
    font-size: clamp(24px, 2.5vw, 40px);
}

.statement-overlay .statement-copy p:nth-child(2) {
    width: 62%;
    margin: 0 0 .65em 14%;
    font-size: clamp(22px, 2.25vw, 36px);
}

.statement-overlay .statement-copy p:nth-child(3) {
    width: 76%;
    margin: 0 0 0 auto;
    font-size: clamp(27px, 2.9vw, 48px);
    line-height: 1.08;
}

@media (max-width: 800px) {
    .statement-overlay {
        width: 100%;
        padding: 22px 20px;
    }

    .statement-overlay .section-label {
        font-size: 11px;
    }

    .statement-overlay .statement-copy p:nth-child(1),
    .statement-overlay .statement-copy p:nth-child(2),
    .statement-overlay .statement-copy p:nth-child(3) {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        font-size: clamp(17px, 5vw, 25px);
    }
}
/* MVとWorksの間を詰める */
.hero {
    min-height: auto;
    padding-bottom: 40px;
}

.works {
    padding-top: 40px;
}
/* Service上の余白を詰める */
.ink-spacer {
    height: 0;
}

.services {
    padding-top: 70px;
}
/* Contactエリア全体をボタンにする */
.contact > a {
    width: 100%;
    max-width: none;
    min-height: 520px;
    padding:
        90px
        max(
            var(--content-side),
            calc((100vw - var(--content-width)) / 2)
        );
    color: var(--ink);
    background: var(--ochre);
    transition:
        color .3s ease,
        background-color .3s ease;
}

/* エリア全体のホバー */
.contact > a:hover {
    color: #fff;
    background: var(--ink);
}

/* 右側のボタンは枠だけの案内表示へ */
.contact strong {
    color: #fff;
    background: var(--ink);
    border: 1px solid var(--ink);
    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}

.contact > a:hover strong {
    color: var(--ink);
    background: #fff;
    border-color: #fff;
}

/* 本文も親の色に合わせる */
.contact p,
.contact small,
.contact h2 {
    color: inherit;
}
/* Profile：経歴とプロジェクトチームの間を詰める */
.profile-layout {
    grid-template-columns: 150px 1.1fr 1fr;
    column-gap: 35px;
}

.partners {
    padding-left: 30px;
}
/* Contact：MVのように刷り上がる */
.contact {
    position: relative;
    overflow: hidden;
}

/* 最初は内容を細い横線の中へ隠す */
.contact > a {
    opacity: 0;
    clip-path: inset(49% 0 49% 0);
}

/* 先に走る黄土色の線 */
.contact::before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--ochre);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* 画面に入った時の線 */
.contact.is-visible::before {
    animation: contact-line .55s ease-out forwards;
}

/* 線が消えてからContactを表示 */
.contact.is-visible > a {
    animation: contact-open .45s .58s ease-out forwards;
}

@keyframes contact-line {
    0% {
        opacity: 1;
        transform: scaleX(0);
    }

    78% {
        opacity: 1;
        transform: scaleX(1);
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

@keyframes contact-open {
    0% {
        opacity: 0;
        clip-path: inset(49% 0 49% 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0);
    }
}

/* 最下部のクレジットを薄くコンパクトに */
footer {
    min-height: 0;
    padding: 12px 0 14px;
    background: var(--ink);
    color: rgba(255, 255, 255, .45);
    border-top: 0;
}

footer .shell {
    min-height: 0;
    justify-content: flex-end;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .06em;
}
/* Contact：最初は細い状態で非表示 */
.contact {
    position: relative;
    overflow: hidden;
}

.contact > a {
    opacity: 0;
    clip-path: inset(49% 0 49% 0);
}

/* 先に走る黄土色の線 */
.contact::before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--ochre);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

.contact.is-visible::before {
    animation: contact-line .8s ease-out forwards;
}

.contact.is-visible > a {
    animation: contact-open .55s .83s ease-out forwards;
}

@keyframes contact-line {
    0% {
        opacity: 1;
        transform: scaleX(0);
    }

    78% {
        opacity: 1;
        transform: scaleX(1);
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

@keyframes contact-open {
    0% {
        opacity: 0;
        clip-path: inset(49% 0 49% 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0);
    }
}

/* クレジット部分をコンパクトに */
footer {
    min-height: 0;
    padding: 10px 0 12px;
    background: var(--ink);
    color: rgba(255, 255, 255, .45);
    border-top: 0;
}

footer .shell {
    min-height: 0;
    justify-content: flex-end;
    font-size: 10px;
    line-height: 1;
}/* Works・Service・Profileのスクロール表示 */
.reveal-item {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(3px);
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2, .7, .2, 1),
        filter .75s ease;
    transition-delay: var(--reveal-delay, 0s);
}

.reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* 動きを減らす設定の場合は即時表示 */
@media (prefers-reduced-motion: reduce) {
    .reveal-item {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}
/* プロジェクトチーム：パートナー一覧 */
.partner-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.partner-list li {
  position: relative;
  padding: 13px 8px 13px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.partner-list li:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.partner-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 7px;
  width: 7px;
  height: 7px;
  background: var(--ochre);
  transform: translateY(-50%);
}

.partner-list li:nth-child(3n + 2)::before {
  background: var(--ink);
}

.partner-list li:nth-child(3n)::before {
  background: transparent;
  border: 1px solid var(--ink);
}

@media (max-width: 760px) {
  .partner-list {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .partner-list li:nth-child(odd) {
    border-right: 0;
  }
}
/* パートナー一覧：枠線をすべて消す */
.partner-list {
  border: 0;
  gap: 12px 36px;
}

.partner-list li,
.partner-list li:nth-child(odd) {
  border: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}/* ========================================
   PROFILE 最終調整
======================================== */

/* 3つのカラムを最下部まで揃える */
.profile-layout {
  align-items: stretch;
}

/* プロジェクトチーム左側の区切り線を最下部まで伸ばす */
.partners {
  align-self: stretch;
  height: 100%;
  border-left: 1px solid var(--line);
}

/* 資格・実績 */
.credentials {
  margin-top: 32px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--line);
}

.credentials li {
  padding: 3px 0;
  line-height: 1.6;
}

/* パートナーの左列：黄土色 */
.partner-list li:nth-child(odd)::before {
  background: var(--ochre);
  border: 0;
}

/* パートナーの右列：黒 */
.partner-list li:nth-child(even)::before {
  background: var(--ink);
  border: 0;
}
@media (max-width: 760px) {
  .partners {
    height: auto;
    border-left: 0;
  }

  .partner-list li::before {
    background: var(--ochre);
  }
}
/* ========================================
   ページトップへ：刷り直しイシトポくん
======================================== */

.back-to-top {
  position: fixed !important;
  inset: auto 26px 26px auto !important;
  z-index: 99999 !important;

  display: block;
  width: 70px;
  height: 70px;
  padding: 7px;

  background: rgba(248, 247, 242, 0.92);
  border: 1px solid rgba(21, 22, 23, 0.18);
  border-radius: 50%;

  cursor: pointer;
  appearance: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s ease,
    bottom 0.4s ease,
    background-color 0.25s ease;
}

/* 50％までスクロールすると表示 */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* お問い合わせエリアでは少し上へ避ける */
.back-to-top.is-lifted {
  bottom: 105px !important;
}

.back-to-top__character {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 吹き出し */
.back-to-top__message {
  position: absolute;
  top: 50%;
  right: calc(100% + 11px);

  width: max-content;
  padding: 8px 11px;

  color: #fff;
  background: var(--ink);
  border-radius: 3px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(8px, -50%);

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;
}

.back-to-top__message::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;

  width: 10px;
  height: 10px;
  background: var(--ink);

  transform: translateY(-50%) rotate(45deg);
}

.back-to-top:hover {
  background: var(--ochre);
  transform: translateY(-4px) rotate(-3deg);
}

.back-to-top:hover .back-to-top__message,
.back-to-top:focus-visible .back-to-top__message {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .back-to-top {
    inset: auto 14px 14px auto !important;
    width: 58px;
    height: 58px;
    padding: 6px;
  }

  .back-to-top.is-lifted {
    bottom: 82px !important;
  }
}/* ========================================
   ページトップ：刷り直しイシトポくん
======================================== */

button.back-to-top {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 99999 !important;

  display: block !important;
  width: 68px !important;
  height: 68px !important;
  min-width: 0 !important;
  max-width: 68px !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 5px !important;

  background: rgba(248, 247, 242, 0.94) !important;
  border: 1px solid rgba(21, 22, 23, 0.18) !important;
  border-radius: 50% !important;

  appearance: none;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  overflow: visible;

  transform: translateY(14px);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    bottom 0.35s ease;
}

/* ページ50％以降で表示 */
button.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* お問い合わせ付近では上へ避ける */
button.back-to-top.is-lifted {
  bottom: 104px !important;
}

/* キャラクター画像 */
button.back-to-top img.back-to-top__character {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  object-fit: contain;
  margin: 0 !important;
}

/* かわいい吹き出し */
.back-to-top__message {
  position: absolute;
  top: -35px;
  right: -4px;

  display: block;
  width: max-content;
  padding: 8px 12px;

  color: #fff;
  background: var(--ink);
  border-radius: 16px 16px 4px 16px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

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

  transform: translateY(6px) rotate(2deg);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

/* 吹き出しのしっぽ */
.back-to-top__message::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -5px;

  width: 11px;
  height: 11px;

  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ホバー中だけ吹き出しを表示 */
button.back-to-top:hover .back-to-top__message,
button.back-to-top:focus-visible .back-to-top__message {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(0);
}

/* キャラクターの小さな反応 */
button.back-to-top:hover {
  transform: translateY(-3px) rotate(-3deg);
  background: var(--ochre) !important;
}

button.back-to-top:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  button.back-to-top {
    right: 14px !important;
    bottom: 14px !important;

    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
  }

  button.back-to-top img.back-to-top__character {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
  }

  button.back-to-top.is-lifted {
    bottom: 80px !important;
  }
}
/* ========================================
   イシトポくん：画像4枚の版ズレ
======================================== */

button.back-to-top .back-to-top__character {
  position: relative;
  display: block !important;

  width: 56px !important;
  height: 56px !important;

  overflow: visible;
}

button.back-to-top img.ishitopo-plate {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;

  margin: 0 !important;

  object-fit: contain;
  pointer-events: none;

  opacity: 0;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* グレー版 */
button.back-to-top img.plate-gray {
  filter:
    grayscale(1)
    brightness(1.7);
  transform: translate(-2px, 1px);
}

/* 黄土色版 */
button.back-to-top img.plate-ochre {
  filter:
    invert(65%)
    sepia(99%)
    saturate(1440%)
    hue-rotate(4deg)
    brightness(96%)
    contrast(101%);
  transform: translate(2px, -1px);
}

/* 白版 */
button.back-to-top img.plate-white {
  filter:
    grayscale(1)
    brightness(0)
    invert(1);
  transform: translate(-1px, -2px);
}

/* 黒版 */
button.back-to-top img.plate-black {
  filter:
    grayscale(1)
    brightness(0);
  transform: translate(1px, 1px);
}

/* 上部：グレー */
body.register-gray img.plate-gray {
  opacity: 0.55;
}

/* Statement以降：グレー＋黄土色 */
body.register-ochre img.plate-gray,
body.register-ochre img.plate-ochre {
  opacity: 0.52;
}

/* 黒背景：グレー＋黄土色＋白 */
body.register-white img.plate-gray,
body.register-white img.plate-ochre,
body.register-white img.plate-white {
  opacity: 0.52;
}

/* Profile以降：4版すべて */
body.register-black img.plate-gray,
body.register-black img.plate-ochre,
body.register-black img.plate-white {
  opacity: 0.4;
}

body.register-black img.plate-black {
  opacity: 0.92;
}

/* ホバーすると見当が近づく */
button.back-to-top:hover img.plate-gray {
  transform: translate(-1px, 0);
}

button.back-to-top:hover img.plate-ochre {
  transform: translate(1px, 0);
}

button.back-to-top:hover img.plate-white {
  transform: translate(0, -1px);
}

button.back-to-top:hover img.plate-black {
  transform: translate(0, 0);
}

@media (max-width: 760px) {
  button.back-to-top .back-to-top__character,
  button.back-to-top img.ishitopo-plate {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
  }
}/* ========================================
   PROFILE：スマートフォン修正
======================================== */

@media (max-width: 760px) {
  .profile {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }

  .profile .profile-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    margin-top: 44px !important;
  }

  /* 写真 */
  .profile .profile-layout > img {
    grid-column: 1 !important;

    width: 116px !important;
    height: 116px !important;
    max-width: 116px !important;
    aspect-ratio: 1 / 1;

    margin: 0 0 28px !important;

    object-fit: cover;
    object-position: center 28%;
  }

  /* 石井誠プロフィール */
  .profile .bio {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .profile .bio h2 {
    display: block !important;
    margin: 0 0 30px !important;

    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  /* 英字名と肩書きを別行にする */
  .profile .bio h2 small {
    display: block !important;
    margin: 8px 0 0 !important;

    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .profile .bio p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 22px !important;

    font-size: 15px !important;
    line-height: 1.9 !important;

    overflow-wrap: normal;
    word-break: normal;
  }

  /* HTML内の強制改行をスマホでは無効化 */
  .profile .bio p br {
    display: none;
  }

  .profile .credentials {
    width: 100% !important;
    margin-top: 32px !important;
    padding-top: 20px !important;
  }

  .profile .credentials li {
    padding: 4px 0;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  /* プロジェクトチーム */
  .profile .partners {
    grid-column: 1 !important;

    width: 100% !important;
    height: auto !important;

    margin-top: 54px !important;
    padding: 38px 0 0 !important;

    border-left: 0 !important;
    border-top: 1px solid var(--line);
  }

  .profile .partners h3 {
    margin: 0 0 22px !important;
    font-size: 24px !important;
  }

  .profile .partners p {
    max-width: none !important;
    margin-bottom: 26px !important;

    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  .profile .partners p br {
    display: none;
  }

  .profile .partner-list {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: 24px !important;
  }

  .profile .partner-list li {
    padding: 5px 0 5px 22px !important;
    font-size: 14px !important;
  }

  /* スマホでは黄土色と黒を交互にする */
  .profile .partner-list li:nth-child(odd)::before {
    background: var(--ochre) !important;
  }

  .profile .partner-list li:nth-child(even)::before {
    background: var(--ink) !important;
  }
}
button.back-to-top {
  background: transparent !important;
  border: 0 !important;
}button.back-to-top,
button.back-to-top:hover {
  background: transparent !important;
  border: 0 !important;
}/* 通常は丸なし */
button.back-to-top,
button.back-to-top:hover {
  background: transparent !important;
  border: 0 !important;
}

/* 最後の黒版まで重なったら白い丸を表示 */
body.register-black button.back-to-top {
  background: rgba(248, 247, 242, 0.96) !important;
  border: 1px solid rgba(21, 22, 23, 0.2) !important;
  border-radius: 50% !important;
}

/* 最後の状態でホバーしたとき */
body.register-black button.back-to-top:hover {
  background: var(--ochre) !important;
  border-color: var(--ochre) !important;
}/* イシトポくんは常に右下へ固定 */
button.back-to-top.is-lifted {
  bottom: 24px !important;
}

@media (max-width: 760px) {
  button.back-to-top.is-lifted {
    bottom: 14px !important;
  }
}/* ========================================
   イシトポくん：MVを刷り直す
======================================== */

.hero {
  transition:
    background-color 0.5s ease,
    color 0.5s ease;
}

/* MV内の文字も一緒に変化 */
.hero h1,
.hero .eyebrow,
.hero .hero-note {
  transition:
    color 0.45s ease,
    opacity 0.45s ease;
}

/* コピー下の黄土色線 */
.hero h1::after {
  transition:
    background-color 0.45s ease,
    transform 0.45s ease;
}

/* MV画像 */
.hero-symbol img {
  transition:
    filter 0.55s ease,
    opacity 0.55s ease,
    transform 0.55s ease;
}

/* 1版目：黄土色 */
body.mv-reprint-ochre .hero {
  color: var(--ink);
  background-color: var(--ochre);
}

body.mv-reprint-ochre .hero h1,
body.mv-reprint-ochre .hero .eyebrow,
body.mv-reprint-ochre .hero .hero-note {
  color: var(--ink) !important;
}

body.mv-reprint-ochre .hero h1::after {
  background-color: #fff;
}

/* 黄土色の瞬間に少し版ズレ */
body.mv-reprint-ochre .hero h1 {
  transform: translateX(2px);
}

body.mv-reprint-ochre .hero-symbol img {
  transform: translateX(-2px);
  opacity: 0.88;
}

/* 2版目：黒へ刷り上がる */
body.mv-reprint-black .hero {
  color: #fff;
  background-color: var(--ink);
}

body.mv-reprint-black .hero h1,
body.mv-reprint-black .hero .eyebrow,
body.mv-reprint-black .hero .hero-note {
  color: #fff !important;
}

body.mv-reprint-black .hero h1::after {
  background-color: var(--ochre);
}

/* 白背景の画像を反転して黒いMVになじませる */
body.mv-reprint-black .hero-symbol img {
  filter:
    invert(1)
    grayscale(0.15)
    contrast(1.05);

  opacity: 0.92;
  transform: translateX(0);
}

/* 最終状態では文字と画像の見当を合わせる */
body.mv-reprint-black .hero h1 {
  transform: translateX(0);
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero h1,
  .hero .eyebrow,
  .hero .hero-note,
  .hero h1::after,
  .hero-symbol img {
    transition: none !important;
  }
}
/* ========================================
   刷り直しMV：全面表示と可読性
======================================== */

/* 色を画面の左右いっぱいまで広げる */
body.mv-reprint-ochre .hero {
  background-color: var(--ochre);

  box-shadow:
    0 0 0 100vmax var(--ochre);

  clip-path:
    inset(0 -100vmax);
}

body.mv-reprint-black .hero {
  background-color: var(--ink);

  box-shadow:
    0 0 0 100vmax var(--ink);

  clip-path:
    inset(0 -100vmax);
}

/* コピーを画像より前面へ */
body.mv-reprint-ochre .hero-copy,
body.mv-reprint-black .hero-copy {
  position: relative;
  z-index: 3;
}

/* 画像をコピーより背面へ */
body.mv-reprint-ochre .hero-symbol,
body.mv-reprint-black .hero-symbol {
  position: relative;
  z-index: 1;
}

/* 黒版ではコピーを少し小さくして読める状態へ */
body.mv-reprint-black .hero h1 {
  font-size:
    clamp(66px, 6.2vw, 96px) !important;

  line-height: 0.88 !important;
  letter-spacing: -0.07em !important;

  color: #fff !important;
}

/* span側に色指定があっても白にする */
body.mv-reprint-black .hero h1 span {
  color: #fff !important;
}

/* 上下のテキスト */
body.mv-reprint-black .hero .eyebrow,
body.mv-reprint-black .hero .hero-note {
  position: relative;
  z-index: 4;
  color: #fff !important;
}

/* 画像の白背景を黒へ反転 */
body.mv-reprint-black .hero-symbol img {
  filter:
    invert(1)
    grayscale(0.15)
    contrast(1.08) !important;

  opacity: 0.9;
}

/* 元に戻るときも滑らかに */
.hero {
  transition:
    background-color 0.55s ease,
    color 0.55s ease,
    box-shadow 0.55s ease;
}

.hero h1 {
  transition:
    color 0.5s ease,
    font-size 0.5s ease,
    transform 0.5s ease;
}

.hero h1 span,
.hero .eyebrow,
.hero .hero-note {
  transition:
    color 0.5s ease,
    opacity 0.5s ease;
}

/* ========================================
   MV：スマートフォンの余白調整
======================================== */

@media (max-width: 800px) {
  .hero {
    padding-top: 24px;
    padding-bottom: 52px;
    gap: 0;
  }

  /* 画像自体に含まれる白い余白を相殺してコピーへ近づける */
  .hero-symbol {
    margin-bottom: -46px;
  }

  .hero .eyebrow {
    margin-bottom: 14px;
  }

  .hero h1 {
    margin-bottom: 26px;
  }
}

/* ========================================
   CONTACTボタン：控えめな角丸
======================================== */

.nav-cta {
  border-radius: 6px;
}

.contact strong {
  border-radius: 8px;
}

/* ========================================
   FOOTER：ブランド署名
======================================== */

footer {
  padding: 38px 0 30px;
}

footer .footer-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  text-align: center;
}

.footer-logo {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
}

.footer-tagline {
  color: rgba(255, 255, 255, .72);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .14em;
}

.footer-credit {
  color: rgba(255, 255, 255, .48);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .16em;
}

@media (max-width: 800px) {
  footer {
    padding: 32px 0 26px;
  }

  .footer-logo {
    font-size: 12px;
  }

  /* Works：画像を控えめにし、文字を読みやすくする */
  .works .work-grid article {
    width: 88%;
    margin-left: auto;
  }

  .works .work-image {
    aspect-ratio: 1.65 / 1;
  }

  .works .work-grid h3 {
    margin-top: 16px;
    font-size: 18px;
    line-height: 1.45;
  }

  .works .work-grid p {
    margin-top: 7px;
    font-size: 14px;
    line-height: 1.8;
  }
}

/* ========================================
   CONTACT：一度だけ色を刷り、黒で固定
======================================== */

.contact.is-visible > a {
  animation:
    contact-open .55s .83s ease-out forwards,
    contact-color-settle .42s 1.38s ease-out forwards;
}

.contact.is-visible strong {
  animation: contact-button-settle .42s 1.38s ease-out forwards;
}

/* ホバーしても完成後の色を変えない */
.contact.is-visible > a:hover {
  color: #fff;
  background: var(--ink);
}

.contact.is-visible > a:hover strong {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}

@keyframes contact-color-settle {
  from {
    color: var(--ink);
    background: var(--ochre);
  }

  to {
    color: #fff;
    background: var(--ink);
  }
}

@keyframes contact-button-settle {
  from {
    color: var(--ink);
    background: transparent;
    border-color: currentColor;
  }

  to {
    color: #fff;
    background: transparent;
    border-color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact.is-visible > a,
  .contact.is-visible strong {
    animation-duration: .01ms;
    animation-delay: 0s;
  }
}

/* ========================================
   CONTACTボタン：文字・矢印・下線だけの軽い形
======================================== */

.nav-cta {
  padding: 8px 0 7px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}

.contact strong,
.contact.is-visible strong,
.contact.is-visible > a:hover strong {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 190px;
  padding: 9px 0 8px;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  box-shadow: none;
}

.contact strong span {
  margin-left: 34px;
}

.nav-cta:hover,
.contact strong:hover {
  opacity: .58;
}
/* MV：スマートフォン用のポスター構成 */
@media (max-width: 800px) {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    padding-top: clamp(64px, 16vw, 92px);
    padding-bottom: 0;
    gap: 0;
    overflow: hidden;
  }

  .hero-copy {
    order: 1;
    position: relative;
    z-index: 3;
  }

  .hero .eyebrow {
    margin: 0 0 28px;
    font-size: 10px;
    line-height: 1.8;
    letter-spacing: 0.28em;
  }

  .hero h1 {
    margin: 0;
    font-size: clamp(62px, 18vw, 84px);
    line-height: 0.86;
    letter-spacing: -0.06em;
  }

  .hero-note {
    position: relative;
    z-index: 4;
    max-width: 88%;
    margin: 22px 0 0;
    font-size: 11px;
    line-height: 1.85;
  }

  .hero-symbol {
    order: 2;
    position: relative;
    z-index: 1;
    width: 100vw;
    margin: -22px 0 0 calc(50% - 50vw);
    transform: none;
  }

  .hero-symbol img {
    display: block;
    width: 100%;
    height: clamp(300px, 82vw, 430px);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }
}

/* ========================================
   2026-08-18：スマホの左右余白とContact動作を整理
======================================== */

/* Contactは線のあと一度だけ黒く刷り上げる */
.contact.is-visible > a {
  color: #fff;
  background: var(--ink);
  animation: contact-open .55s .83s ease-out forwards;
}

.contact.is-visible strong {
  animation: none;
}

.contact.is-visible > a:hover {
  color: #fff;
  background: var(--ink);
}

@media (max-width: 800px) {
  /* 全セクションの基準となる左右余白 */
  .shell,
  main .shell {
    width: calc(100% - 64px);
    max-width: 600px;
    margin-inline: auto;
  }

  /* MV画像も共通のコンテンツ幅に収める */
  .hero-symbol {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Worksは画像・テキストを同じ幅で中央に揃える */
  .works .work-grid {
    width: 88%;
    margin-inline: auto;
  }

  .works .work-grid article {
    width: 100%;
    margin-inline: 0;
  }

  .works .work-image,
  .works .work-image img {
    width: 100%;
  }
}

/* ========================================
   MV：スマホでは画像を先に見せる
======================================== */
@media (max-width: 800px) {
  .hero {
    padding-top: 28px;
  }

  .hero-symbol {
    order: 1;
    width: 100%;
    margin: 0 0 30px;
  }

  .hero-symbol img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .hero-copy {
    order: 2;
    width: 100%;
  }
}

/* ========================================
   SNSアイコン・プロフィール写真クレジット
======================================== */
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: opacity .2s ease, transform .2s ease;
}

.social-links a:hover {
  opacity: .55;
  transform: translateY(-1px);
}

.social-links img {
  width: 12px;
  height: 12px;
}

.social-links-footer {
  margin: 4px 0 2px;
  color: #fff;
}

.social-links-footer img {
  filter: invert(1);
}

.profile-photo {
  position: relative;
  align-self: start;
  width: 100%;
  margin: 0;
}

.profile-photo img {
  width: 100%;
  height: auto;
}

.profile-photo figcaption {
  position: absolute;
  right: 7px;
  bottom: 5px;
  padding: 2px 4px;
  color: rgba(255, 255, 255, .78);
  background: rgba(21, 22, 23, .34);
  font-size: 7px;
  line-height: 1;
  letter-spacing: .03em;
}

@media (max-width: 800px) {
  .header-actions {
    gap: 12px;
  }

  .social-links-header {
    gap: 6px;
  }

  .social-links-header a {
    width: 23px;
    height: 23px;
  }

  .profile .profile-photo {
    grid-column: 1 !important;
    width: 116px !important;
    margin: 0 0 28px !important;
  }

  .profile .profile-photo img {
    width: 116px !important;
    height: 116px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 28%;
  }

  .profile-photo figcaption {
    right: 4px;
    bottom: 4px;
    font-size: 6px;
  }
}

/* ========================================
   2026-08-18：スマホMV・各エリア幅の最終調整
======================================== */
@media (max-width: 800px) {
  /* 英文 → 画像 → 日本語コピーの順に並べる */
  .hero-copy {
    display: contents;
  }

  .hero .eyebrow {
    order: 1;
    margin: 0 0 5px;
  }

  /* 画像は画面幅100%。左右へ同じ量だけ広げる */
  .hero-symbol {
    order: 2;
    width: 100vw;
    margin: 0 0 34px calc(50% - 50vw);
  }

  .hero h1 {
    order: 3;
    margin: 0 0 28px;
  }

  .hero-note {
    order: 4;
    margin-top: 0;
  }

  /* Works内側幅と同じ左右余白へそろえる */
  .services > .shell,
  .profile.shell {
    width: calc(88% - 56px);
    max-width: 528px;
    margin-inline: auto;
  }
}

/* ========================================
   2026-08-18：ヘッダー・MV・Profile最終調整
======================================== */

/* ナビを1段目、SNSを2段目に置く */
.header-actions {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
}

.social-links-header {
  margin-right: 1px;
}

@media (max-width: 800px) {
  .site-header {
    height: 108px;
  }

  .header-actions {
    gap: 6px;
  }

  /* Contactの導線をコンテンツ幅いっぱいにする */
  .contact strong,
  .contact.is-visible strong,
  .contact.is-visible > a:hover strong {
    width: 100%;
    min-width: 0;
  }

  /* 英文コピーを1行にし、画像へ半分重ねる */
  .hero .eyebrow {
    position: relative;
    z-index: 4;
    width: 100%;
    margin: 0 0 -8px;
    font-size: clamp(6px, 1.85vw, 8px);
    line-height: 1;
    letter-spacing: .13em;
    white-space: nowrap;
  }

  .hero .eyebrow br {
    display: none;
  }

  /* 画像の左右余白は共通コンテンツ幅のまま維持 */
  .hero-symbol {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
  }

  /* 日本語コピーを画像下部へ約1/3重ねる */
  .hero h1 {
    position: relative;
    z-index: 4;
    margin: -58px 0 24px;
  }

  .hero-note {
    position: relative;
    z-index: 4;
    margin-top: 0;
  }

  /* Profile見出しをWorks・Serviceと同じ表現へ */
  .profile .section-label {
    width: 100%;
    margin: 0 0 46px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: clamp(38px, 12vw, 56px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
  }

  .profile .section-label::after {
    display: none;
  }

  .profile .profile-layout {
    margin-top: 0 !important;
  }
}

/* ========================================
   2026-08-18：Service余白／Profile上下段化
======================================== */

/* 上段：写真＋プロフィール本文 */
.profile .profile-layout {
  display: grid;
  grid-template-columns: clamp(180px, 22vw, 270px) minmax(0, 1fr);
  column-gap: clamp(38px, 5vw, 76px);
  row-gap: clamp(64px, 8vw, 104px);
  align-items: start;
}

.profile .profile-photo {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
}

.profile .bio {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* 下段：プロジェクトチーム */
.profile .partners {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(48px, 8vw, 120px);
  width: 100%;
  height: auto;
  padding: clamp(42px, 5vw, 68px) 0 0;
  border-top: 1px solid var(--line);
  border-left: 0;
}

.profile .partners h3 {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
}

.profile .partners > p {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0;
}

.profile .partners .partner-list {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: 0;
}

@media (max-width: 800px) {
  /* 本文から約2行分離して「主な支援」を表示 */
  .service-grid article > p + h4 {
    margin-top: 3.2em !important;
  }

  .profile .profile-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
  }

  .profile .profile-photo,
  .profile .bio,
  .profile .partners {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .profile .partners {
    display: block;
    margin-top: 62px !important;
    padding-top: 44px !important;
    border-top: 1px solid var(--line) !important;
    border-left: 0 !important;
  }

  .profile .partners .partner-list {
    margin-top: 28px !important;
  }
}

/* ========================================
   2026-08-18：Header／スマホMV／Profile見出し
======================================== */

/* Profile見出しをPCのWorks・Serviceと統一 */
.profile .section-label {
  width: 100%;
  margin: 0 0 55px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--line);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.profile .section-label::after {
  display: none;
}

@media (min-width: 801px) {
  /* PC：SNSは丸枠を外し、Contactの幅の中へ均等配置 */
  .header-actions {
    gap: 14px;
  }

  .social-links-header {
    width: 100px;
    margin: 0;
    justify-content: space-between;
    gap: 0;
  }

  .social-links-header a {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 0;
  }

  .social-links-header img {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 800px) {
  /* MVを画像とコピーが重ならない一枚の白いエリアにする */
  .hero,
  body.mv-reprint-ochre .hero,
  body.mv-reprint-black .hero {
    display: flex;
    flex-direction: column;
    width: calc(100% - 64px);
    margin-inline: auto;
    padding: 18px 18px 44px;
    gap: 0;
    overflow: hidden;
  }

  .hero {
    color: var(--ink);
    background: #fff;
  }

  .hero-symbol,
  body.mv-reprint-ochre .hero-symbol,
  body.mv-reprint-black .hero-symbol {
    order: 1;
    width: 100%;
    margin: 0 0 28px;
  }

  .hero-symbol img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .hero-copy,
  body.mv-reprint-ochre .hero-copy,
  body.mv-reprint-black .hero-copy {
    order: 2;
    position: relative;
    z-index: 3;
    width: 100%;
  }

  .hero .eyebrow {
    margin: 0 0 24px;
    font-size: clamp(7px, 2vw, 9px);
    line-height: 1.45;
  }

  .hero h1,
  body.mv-reprint-ochre .hero h1,
  body.mv-reprint-black .hero h1 {
    margin: 0 0 26px !important;
    font-size: clamp(54px, 15vw, 74px) !important;
    line-height: .9 !important;
    letter-spacing: -.065em !important;
    transform: none;
  }

  .hero-note,
  body.mv-reprint-ochre .hero-note,
  body.mv-reprint-black .hero-note {
    max-width: 100%;
    margin: 0;
    font-size: 11px;
    line-height: 1.85;
  }

  /* 黒版でも同じ余白設計を維持 */
  body.mv-reprint-black .hero {
    color: #fff;
    background: var(--ink);
  }

  /* Profile見出しをスマホのWorks・Service相当に縮小 */
  .profile .section-label {
    margin: 0 0 42px;
    padding-bottom: 14px;
    font-size: 38px;
    line-height: 1.1;
  }
}

/* ========================================
   2026-08-18：Profile記事一覧／SPアコーディオン
======================================== */

.bio-toggle {
  display: none;
}

.bio-copy {
  display: block;
}

.interview-links {
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.interview-links h3 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}

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

.interview-links li {
  border-top: 1px solid rgba(201, 200, 192, .75);
}

.interview-links li:last-child {
  border-bottom: 1px solid rgba(201, 200, 192, .75);
}

.interview-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 14px 2px;
  color: inherit;
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
  transition: color .2s ease, padding .2s ease;
}

.interview-links a::after {
  content: "↗";
  grid-column: 3;
  font-size: 12px;
}

.interview-links a:hover {
  padding-left: 8px;
  color: var(--ochre);
}

.interview-links time {
  color: #777;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
  .bio-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 4px 0 0;
    padding: 14px 0 12px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .bio-toggle b {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  .bio-copy {
    display: none;
    padding-top: 26px;
  }

  .bio-copy.is-open {
    display: block;
    animation: bio-open .28s ease-out both;
  }

  .profile .credentials {
    margin-top: 34px !important;
  }

  .interview-links {
    margin-top: 34px;
    padding-top: 24px;
  }

  .interview-links a {
    gap: 12px;
    padding: 15px 0;
    font-size: 12px;
  }
}

@keyframes bio-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   2026-08-18：操作性とProfile最終調整
======================================== */

/* Contactは到達時には押せるよう、短い一度だけの展開にする */
.contact.is-visible > a {
  pointer-events: auto;
  animation: contact-open .7s .12s ease-out forwards;
}

@media (min-width: 801px) {
  /* Contactとその下のSNSを同じ幅に揃える */
  .site-header .nav-cta {
    display: inline-block;
    width: 120px;
    box-sizing: border-box;
    text-align: center;
  }

  .site-header .social-links-header {
    width: 120px;
    box-sizing: border-box;
    padding-inline: 8px;
  }
}

/* 記事一覧全体を一枚の細い枠でまとめる */
.interview-links {
  padding: 22px 24px;
  border: 1px solid var(--line);
}

.interview-links h3 {
  margin-bottom: 10px;
}

.interview-links li,
.interview-links li:last-child {
  border: 0;
}

.interview-links a {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: 9px 0;
}

.interview-links a::before {
  content: "—";
  color: var(--ochre);
}

.interview-links a::after {
  grid-column: 4;
}

/* 頭の形が少しずつ異なる、プロジェクトチームの線画 */
.team-figures {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin: 25px 0 23px;
}

.team-person {
  position: relative;
  display: block;
  width: 42px;
  height: 39px;
  border: 2px solid var(--ink);
  border-radius: 50% 50% 43% 43%;
  box-sizing: border-box;
}

.team-person::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 15px 0 0 var(--ink);
}

.team-person::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 23px;
  width: 13px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-radius: 50%;
}

.team-person-b {
  height: 45px;
  border-color: var(--ochre);
  border-radius: 48% 52% 38% 46%;
  transform: rotate(-3deg);
}

.team-person-c {
  width: 39px;
  border-radius: 45% 55% 50% 42%;
}

.team-person-d {
  height: 42px;
  border-color: var(--ochre);
  border-radius: 58% 42% 46% 54%;
  transform: rotate(3deg);
}

.team-person-e {
  width: 45px;
  height: 43px;
  border-radius: 52% 48% 40% 50%;
}

@media (max-width: 800px) {
  /* ブラウザ既定のボタン枠を消した小さな「もっと見る」 */
  .profile .bio .bio-toggle {
    display: inline-flex;
    width: auto;
    margin: 5px 0 18px;
    padding: 3px 0;
    gap: 9px;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
  }

  .profile .bio .bio-toggle b {
    color: var(--ochre);
    font-size: 17px;
  }

  /* 既存指定より優先し、スマホだけ確実に開閉する */
  .profile .bio .bio-copy {
    display: none !important;
    padding-top: 8px;
  }

  .profile .bio .bio-copy.is-open {
    display: block !important;
    animation: bio-open .28s ease-out both;
  }

  .interview-links {
    padding: 17px 18px;
  }

  .interview-links a {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .team-figures {
    gap: 7px;
    margin-top: 22px;
  }

  .team-person {
    width: 36px;
    height: 34px;
  }

  .team-person::before {
    left: 8px;
    top: 11px;
    box-shadow: 13px 0 0 var(--ink);
  }

  .team-person::after {
    left: 10px;
    top: 20px;
  }
}

/* ========================================
   2026-08-18：表記・Accordion・Team調整
======================================== */

/* Profile本文はPC／SPとも同じ小さな開閉ボタンで表示する */
.profile .bio .bio-toggle {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 6px 0 20px;
  padding: 3px 0;
  gap: 9px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.profile .bio .bio-toggle b {
  color: var(--ochre);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.profile .bio .bio-copy {
  display: none !important;
}

.profile .bio .bio-copy.is-open {
  display: block !important;
  animation: bio-open .28s ease-out both;
}

/* イシトポくんを基にした、少し不揃いな手描きチーム */
.team-figures {
  gap: 5px;
  flex-wrap: wrap;
  max-width: 350px;
}

.team-person,
.team-person-b,
.team-person-c,
.team-person-d,
.team-person-e,
.team-person-f,
.team-person-g {
  position: relative;
  width: 43px;
  height: 48px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  transform: rotate(-1deg);
}

.team-person::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  width: 29px;
  height: 30px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-radius: 53% 47% 44% 49%;
  background: transparent;
  box-shadow: none;
}

.team-person::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 1px;
  width: 3px;
  height: 9px;
  border: 0;
  border-radius: 70% 35% 65% 35%;
  background: currentColor;
  transform: rotate(7deg);
}

.team-person i {
  position: absolute;
  z-index: 1;
  left: 14px;
  top: 21px;
  width: 4px;
  height: 4px;
  border-radius: 45% 55% 50% 40%;
  background: var(--ink);
  box-shadow: 12px 1px 0 var(--ink);
}

.team-person i::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 9px;
  height: 4px;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0 0 55% 45%;
  transform: rotate(-3deg);
}

.team-person-b,
.team-person-d,
.team-person-f {
  color: var(--ochre);
}

.team-person-b::before {
  border-radius: 43% 57% 51% 40%;
  transform: rotate(-4deg) scaleY(.92);
}

.team-person-c::before {
  border-radius: 60% 40% 46% 54%;
  transform: rotate(3deg) scaleX(.9);
}

.team-person-d::before {
  border-radius: 46% 54% 39% 61%;
  transform: rotate(-2deg) scaleY(1.08);
}

.team-person-e::before {
  border-radius: 55% 45% 58% 42%;
  transform: rotate(5deg) scale(.94);
}

.team-person-f::before {
  border-radius: 39% 61% 49% 51%;
  transform: rotate(-5deg) scaleX(1.05);
}

.team-person-g::before {
  border-radius: 51% 49% 42% 58%;
  transform: rotate(2deg) scaleY(.9);
}

/* Profileの開閉ボタンと資格欄を近づける */
.profile .bio .bio-toggle {
  margin: 2px 0 7px;
  padding: 1px 0;
}

.profile .bio .bio-copy + .credentials {
  margin-top: 8px !important;
  padding-top: 18px;
}

.profile .bio .bio-copy.is-open + .credentials {
  margin-top: 18px !important;
}

/* Project Teamを内容の高さに合わせ、不要な上下余白をなくす */
.profile .partners {
  grid-template-rows: auto auto auto;
  align-content: start;
  row-gap: 0;
  padding-top: 28px;
  padding-bottom: 0;
}

.profile .partners h3 {
  grid-row: 1;
  margin-bottom: 22px;
}

.profile .partners > p {
  grid-row: 2;
  margin: 0;
}

.profile .partners .team-figures {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  margin: 14px 0 0;
}

.profile .partners .partner-list {
  grid-row: 1 / span 3;
}

@media (max-width: 800px) {
  /* SP：画像の次に大コピー、その直下に英字コピー */
  .hero-copy,
  body.mv-reprint-ochre .hero-copy,
  body.mv-reprint-black .hero-copy {
    display: flex;
    flex-direction: column;
  }

  .hero h1,
  body.mv-reprint-ochre .hero h1,
  body.mv-reprint-black .hero h1 {
    order: 1;
    margin-bottom: 14px !important;
  }

  .hero .eyebrow,
  body.mv-reprint-ochre .hero .eyebrow,
  body.mv-reprint-black .hero .eyebrow {
    order: 2;
    margin: 0 0 20px;
  }

  .hero-note,
  body.mv-reprint-ochre .hero-note,
  body.mv-reprint-black .hero-note {
    order: 3;
  }

  .team-figures {
    max-width: 290px;
  }

  .profile .partners {
    margin-top: 32px !important;
    padding-top: 26px !important;
    padding-bottom: 0 !important;
  }

  .profile .partners .team-figures {
    margin: 14px 0 0;
  }
}

/* ========================================
   2026-08-18：Header／Profile／線幅の微調整
======================================== */

/* チーム図は目だけの素朴な表情へ戻す */
.team-person i::after {
  display: none;
}

/* MVとContactを走る黄土色線を半分の太さへ */
.hero::after,
.contact::before {
  height: 1.5px;
}

@media (min-width: 801px) {
  /* 主要メニューだけをページ中央へ置く試案 */
  .site-header {
    position: relative;
  }

  .site-header nav .primary-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 42px;
    transform: translate(-50%, -50%);
  }

  /* 記事枠の左端をプロフィール写真の左端まで広げる */
  .profile .interview-links {
    width: calc(100% + clamp(180px, 22vw, 270px) + clamp(38px, 5vw, 76px));
    margin-left: calc(-1 * (clamp(180px, 22vw, 270px) + clamp(38px, 5vw, 76px)));
    box-sizing: border-box;
  }

  /* イシトポくんとの距離を取り、Contact導線を少し中央へ */
  .contact strong,
  .contact.is-visible strong,
  .contact.is-visible > a:hover strong {
    transform: translateX(clamp(-120px, -6vw, -72px));
  }
}

@media (max-width: 800px) {
  /* 7人を必ず一列に収める */
  .profile .partners .team-figures {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: 2px;
  }

  .profile .partners .team-person,
  .profile .partners .team-person-b,
  .profile .partners .team-person-c,
  .profile .partners .team-person-d,
  .profile .partners .team-person-e,
  .profile .partners .team-person-f,
  .profile .partners .team-person-g {
    flex: 1 1 0;
    min-width: 0;
    max-width: 38px;
  }
}