/*
Theme Name: SHI:Design
Theme URI: https://kaitorikuranomiya.com/
Author: Naoyuki Miyasaka
Author URI: https://kaitorikuranomiya.com/
Description: 宮坂直志（SHI:Design）のポートフォリオ用オリジナルテーマ。制作物・FAQ・お客様の声を ACF とカスタム投稿タイプで管理する。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shi-design
*/

/* -------------------------------- template */


/* -------------------------------- design tokens */
:root {
    --color-ink: #14171c;
    --color-paper: #fff;
    --color-surface: #f1f2f4;
    --color-line: #e3e5e9;
    --color-accent: #c8402f;
    --color-muted: #6c727c;

    /* 見出しは字を詰めた大文字、日付やスタックは等幅。本文だけが日本語向け */
    --font-display: "IBM Plex Sans Condensed", "IBM Plex Sans JP", sans-serif;
    --font-body: "IBM Plex Sans JP", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    --card-radius: 4px;
}


/* -------------------------------- common */
body {
    font-family: var(--font-body);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--color-ink);
    background-color: var(--color-paper);
}

img {
    max-width: 100%;
}

button {
    letter-spacing: inherit;
}

a:hover,
button:hover {
    opacity: 0.7;
}

/* キーボード操作でどこにいるか分かるように、朱の枠を出す */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        /* 回数も止める。infinite のまま 1ms にすると、猛烈な速さで回り続けてしまう */
        animation-iteration-count: 1 !important;
    }
}

/*
  各セクションの見出し。頭の朱の四角が、このサイト共通の印になる。
  彩色はこの印とリンクだけに絞り、他は無彩色で通す。
*/
.section-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 21px;
    text-align: center;
    letter-spacing: 0.2rem;
    word-spacing: 0.6rem;
}

.section-title::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 14px;
    background-color: var(--color-accent);
    vertical-align: 1px;
}


/* -------------------------------- site-header */
/*
  ドロワーは main の画像より手前に出す必要がある。
  ヘッダーに重ね順を作り、その中で ドロワー > オーバーレイ の順に重ねる。
*/
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    background-color: var(--color-paper);
}

/* ロゴは画像ではなく文字 */
.site-logo a {
    display: flex;
    align-items: center;
}

.site-logo-name {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.08em;
}

@media (max-width: 1024px){
    .site-header {
        align-items: center;
        justify-content: space-between;
        height: 64px;
        padding: 0 16px;
        box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 2px 2px rgb(0 0 0 / 0.06), 0 0 2px rgb(0 0 0 / 0.07);
    }
}
@media (min-width: 1025px){
    .site-logo {
        margin: 24px 40px;
    }
    .site-logo-name {
        font-size: 14px;
    }
}


/* -------------------------------- mobile-nav / hamburger */
@media (max-width: 1024px){
    .mobile-nav-list {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .hamburger {
        position: relative;
        display: block;
        width: 40px;
        height: 40px;
    }

    .hamburger-line {
        position: absolute;
        left: 10px;
        width: 20px;
        height: 2px;
        background-color: var(--color-ink);
        transition: 300ms ease-in-out;
    }
    .hamburger-line:nth-child(1) {
        top: 12.5px;
    }
    .hamburger-line:nth-child(2) {
        top: 19px;
    }
    .hamburger-line:nth-child(3) {
        top: 25.5px;
    }

    /* 開いたら2本目と3本目を重ねて × にする */
    .hamburger.--toggled .hamburger-line:nth-child(1) {
        top: 20px;
        left: 12px;
        transform: rotate(-45deg);
    }
    .hamburger.--toggled .hamburger-line:nth-child(2),
    .hamburger.--toggled .hamburger-line:nth-child(3) {
        top: 20px;
        left: 12px;
        transform: rotate(45deg);
    }
}


/* -------------------------------- nav-panel (ME / SKILL / WORK) */
.nav-panel {
    background-color: var(--color-paper);
}

.nav-category-head {
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-category-head img {
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--card-radius);
}

.nav-account-link {
    display: block;
}

/* パネル下部の「仕事のご相談はこちら」。ME の CTA と揃えて朱色にする */
.nav-howto-faq a {
    color: var(--color-accent);
}


@media (max-width: 1024px){
    /* グローバルナビと同じ位置に、上から重ねて出す */
    .nav-panel {
        position: fixed;
        top: 64px;
        right: 0;
        z-index: 21;
        width: 80vw;
        height: calc(100dvh - 64px);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 600ms;
    }

    .nav-panel.--open {
        transform: translateX(0);
    }

    /* 戻る行。左のシェブロンと空の ::after で見出しを中央に置く */
    .nav-panel-back {
        background-color: var(--color-surface);
        box-shadow: inset 0 4px 5px -3px rgb(0 0 0 / 0.2);
    }

    .nav-panel-back-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 16px 32px;
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.1em;
    }

    .nav-panel-back-button::before {
        content: "";
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--color-ink);
        border-bottom: 2px solid var(--color-ink);
        transform: rotate(135deg);
    }

    .nav-panel-back-button::after {
        content: "";
    }

    .nav-panel-inner {
        padding: 32px 24px;
    }

    .nav-category {
        padding-top: 16px;
    }

    .nav-category-head img {
        width: 64px;
        height: 64px;
    }

    .nav-category-name {
        margin-right: auto;
        padding: 0 16px;
        font-size: 15px;
        text-align: left;
    }

    /* サブメニューはアコーディオン */
    button.nav-category-head::after {
        content: "";
        flex-shrink: 0;
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--color-ink);
        border-bottom: 2px solid var(--color-ink);
        transform: translateY(-25%) rotate(45deg);
        transition: transform 200ms;
    }

    .nav-category.--open > .nav-category-head::after {
        transform: translateY(25%) rotate(-135deg);
    }

    .nav-subnav {
        display: none;
        padding-left: 80px;
    }

    .nav-category.--open > .nav-subnav {
        display: block;
    }

    .nav-subnav-list {
        padding: 5px 0;
    }

    .nav-subnav-list li {
        padding-bottom: 16px;
        font-size: 13px;
    }

    /* 「得意なこと」「制作物一覧」。下に区切り線 */
    .nav-account {
        position: relative;
        padding-bottom: 16px;
    }

    .nav-account::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        border-bottom: 1px solid var(--color-line);
    }

    .nav-account-link {
        display: flex;
        align-items: center;
    }

    .nav-account-name {
        padding: 0 16px;
        font-size: 15px;
    }

    .nav-howto {
        padding: 32px 24px;
        background-color: var(--color-surface);
    }

    .nav-howto-col {
        margin-bottom: 32px;
    }

    .nav-howto-title {
        color: var(--color-muted);
        font-size: 13px;
        font-weight: 700;
    }

    .nav-howto-list {
        padding-top: 12px;
    }

    .nav-howto-list li {
        padding-bottom: 12px;
        font-size: 13px;
    }

    .nav-howto-faq {
        font-size: 13px;
    }

    .nav-howto-contact {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px 24px;
    }

    .nav-howto-note {
        font-size: 13px;
        color: var(--color-muted);
    }


}
@media (min-width: 1025px){
    /*
      ヘッダー直下に開くメガメニュー。
      高さを 0 から開くので、実際の高さは main.js が入れる。
      閉じている間はキーボードで中に入れないよう visibility も落とす（閉じるアニメの間だけ遅延させる）。
    */
    .nav-panel {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 20;
        width: 100%;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        border-bottom: 1px solid var(--color-line);
        transition: height 300ms ease, visibility 0s 300ms;
    }

    .nav-panel.--open {
        visibility: visible;
        transition: height 300ms ease, visibility 0s;
    }

    .nav-panel-inner {
        max-width: 1248px;
        margin: 56px auto;
        padding: 0 40px;
    }

    .nav-category-list {
        display: flex;
        justify-content: space-between;
    }

    .nav-category {
        position: relative;
        width: 104px;
        text-align: center;
    }

    /* SKILL / WORK: 左に見出し、右にカテゴリの列 */
    .nav-panel.--service .nav-panel-inner {
        display: flex;
        justify-content: space-between;
        max-width: 1064px;
    }

    .nav-panel.--service .nav-category-list {
        flex: 1;
        max-width: 864px;
    }

    .nav-panel.--reward .nav-panel-inner {
        max-width: 1216px;
    }

    .nav-panel.--reward .nav-category-list {
        max-width: 1016px;
    }

    .nav-account {
        padding-top: 6px;
        padding-right: 48px;
        text-align: center;
    }

    /* アイコンのない見出し(できること一覧)も、アイコンのある列と天地の中心が揃うようにする */
    .nav-account-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        min-height: 140px;
    }

    .nav-account-name {
        display: block;
        font-size: 13px;
        font-weight: 700;
    }

    .nav-howto {
        padding: 32px 40px;
        background-color: var(--color-surface);
    }

    .nav-howto-inner {
        display: flex;
        justify-content: space-between;
        max-width: 1005px;
        margin-inline: auto;
    }

    .nav-panel.--reward .nav-howto-inner {
        justify-content: center;
    }

    .nav-howto-col {
        display: flex;
    }

    .nav-howto-title {
        flex-shrink: 0;
        color: var(--color-muted);
        font-size: 13px;
        font-weight: 700;
    }

    .nav-howto-list {
        padding-left: 20px;
    }

    .nav-panel.--reward .nav-howto-col {
        gap: 32px;
    }

    .nav-panel.--reward .nav-howto-list {
        display: flex;
        gap: 24px;
        padding-left: 0;
    }

    .nav-howto-list li {
        padding-bottom: 12px;
        font-size: 13px;
    }

    .nav-howto-faq {
        font-size: 13px;
    }

    .nav-howto-contact {
        align-items: baseline;
        gap: 40px;
    }

    .nav-howto-note {
        font-size: 13px;
        color: var(--color-muted);
    }

    .nav-category-head {
        flex-direction: column;
    }

    .nav-category-head img {
        width: 104px;
        height: 104px;
    }

    .nav-category-name {
        margin-top: 18px;
        font-size: 13px;
        font-weight: 700;
    }

    /* サブメニューはカテゴリの下に出るカード */
    .nav-subnav {
        display: none;
        position: absolute;
        top: 140px;
        left: 0;
        padding: 8px 16px;
        border: 1px solid var(--color-line);
        border-radius: var(--card-radius);
        background-color: var(--color-paper);
        transform: translateX(-11%);
    }

    .nav-category.--open > .nav-subnav {
        display: block;
    }

    .nav-subnav-list li {
        padding: 8px 0;
        font-size: 12px;
        text-align: left;
        white-space: nowrap;
    }


}


/* -------------------------------- nav-overlay */
/*
  ヘッダー(z:30)より下、本文より上。header の外に置いてあるので、
  ロゴやハンバーガーは暗幕に覆われない。
*/
.nav-overlay {
    position: fixed;
    left: 0;
    z-index: 10;
    width: 100%;
    background-color: #000;
    /* 非表示中は display:none にする。fixed 要素に幅を持たせると、Safari は
       width:100%/100vw をスクロールバー込みで解釈し、横スクロール（ロゴ・CONTACT の
       見切れ）が出る。fixed 要素は祖先の overflow を抜けるので、幅を 0 にできる
       display:none がいちばん確実。display もトランジション対象にして、対応ブラウザ
       （Chrome 116+ / Safari 17.4+）ではこれまで通りフェードする。非対応は瞬時表示 */
    display: none;
    opacity: 0;
    transition: opacity 600ms, display 600ms allow-discrete;
}

.nav-overlay.--toggled,
.nav-overlay.--toggled:hover {
    display: block;
    opacity: 0.38;
}

@starting-style {
    .nav-overlay.--toggled,
    .nav-overlay.--toggled:hover {
        opacity: 0;
    }
}

@media (max-width: 1024px){
    /* ドロワーはヘッダーの下に出るので、暗幕もヘッダーの下から */
    .nav-overlay {
        top: 64px;
        height: calc(100dvh - 64px);
    }
}
@media (min-width: 1025px){
    .nav-overlay {
        top: 0;
        height: 100dvh;
    }
}


/* -------------------------------- global-nav */
@media (max-width: 1024px){
    /* 画面外(右)に逃がしておき、開いたら translateX(0) で引き出す */
    .global-nav {
        position: fixed;
        top: 64px;
        right: 0;
        z-index: 20;
        width: 80vw;
        height: calc(100dvh - 64px);
        padding: 42px 24px 0;
        overflow-y: auto;
        background-color: var(--color-paper);
        transform: translateX(100%);
        transition: transform 600ms;
    }

    .global-nav.--toggled {
        transform: translateX(0);
    }

    .global-nav-item1,
    .global-nav-list.__other a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 24px;
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.1em;
        line-height: 21px;
    }

    .global-nav-item1 {
        margin-bottom: 32px;
    }

    .global-nav-list.__other {
        margin-top: 8px;
        padding-top: 32px;
        border-top: 1px solid var(--color-line);
    }

    /* 外部サイトのバナー。ドロワーでは CONTACT の上に積む */
    .nav-banner {
        margin-bottom: 32px;
    }

    .nav-banner img {
        width: 96px;
    }

    .arrow {
        flex-shrink: 0;
        width: 9px;
        height: 9px;
        border-top: 2px solid var(--color-ink);
        border-right: 2px solid var(--color-ink);
        transform: rotate(45deg);
    }
}
@media (min-width: 1025px){
    .global-nav,
    .global-nav-list,
    .global-nav-list li {
        display: flex;
    }

    .global-nav {
        flex: 1;
    }

    .global-nav-list.__main {
        margin-right: auto;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.1em;
        gap: 30px;
    }

    /* バナーと CONTACT は縦罫で仕切った箱にして、ナビの中でここだけ形を変える。
       幅は flex-basis でなく width で指定する。WebKit(Safari)は孫要素の flex-basis を
       ul の内在幅に反映せず、ul が中身の実寸(96+61=157px)まで縮んで 150px×2 の箱が
       右へ 90px はみ出し、ページ全体に横スクロールが出るため(Chrome は 300px と解釈) */
    .global-nav-list.__other a {
        width: 150px;
        flex-shrink: 0;
        justify-content: center;
        border-left: 1px solid var(--color-line);
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.1em;
    }

    .nav-banner img {
        width: 96px;
    }

    .global-nav-list a {
        display: flex;
        align-items: center;
    }

    .global-nav-item {
        color: var(--color-muted);
    }
}


/* -------------------------------- creed (ファーストビュー / 理念) */
.creed {
    position: relative;
    background-color: var(--color-paper);
}

/*
  全画面ヒーロー。開幕の一文と Design for Japan だけで1画面を使い切る。
  sticky で画面に留まり、続きの理念文(creed-body)が上に被さってくる(BlueBank と同じ)。
  ※ 祖先に overflow: hidden があると sticky が効かなくなるので .creed には置かない。
     はみ出しのクリップはこの要素自身の overflow: hidden が受け持つ。
*/
.creed-hero {
    position: sticky;
    top: 0;
    z-index: 0;
    display: flex;
    align-items: flex-start;  /* コピーは左上へ */
    justify-content: flex-start;
    min-height: calc(100svh - 64px);  /* ヘッダー(モバイル 64px)を除く */
    padding: 56px 24px;
    overflow: hidden;
    text-align: left;
}

/*
  理念文の面。ヒーローの上に滑り込む。
  本家(bluebank.co.jp)と同じく、先端は透けて曇りガラス越しに FV が見え、
  進むほど紙に近づいて FV が隠れる(グラデーション + backdrop-filter)。
*/
.creed-body {
    position: relative;
    z-index: 1;
    background-image: linear-gradient(rgb(255 255 255 / 0), var(--color-paper) 70vh);
}

/* 曇りガラス。面の全体に敷き、透けている間だけ効いて見える */
.creed-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

/*
  太陽(球体)。日の丸=日本の活気。彩色はここと文字だけに絞る。
  本家 bluebank.co.jp の青い球(不透明・光源は上・上リムが明るく下へ沈む)を、
  色相をオレンジ寄りにして再現。縁ははっきりした円(border-radius)。
*/
.creed-sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45vw;  /* モバイル・PC 共通の比率 */
    aspect-ratio: 1;
    z-index: 0;
    border-radius: 50%;
    /* 静止位置。中央のコピーと円の中心を揃える。日の出アニメの終点と一致させる */
    transform: translate(-50%, -50%);
    /*
      上を光源にした球体の陰影。上リム=明るい朱、中心から右下=深い朱へ沈む。
      焦点を上(y=8%)に置き、外周へ向かうほど濃くする(本家の球と同じ明暗配分)。
    */
    background: radial-gradient(115% 115% at 42% 8%,
        #ffd8c7 0%,
        #f59d7e 14%,
        #dc5e45 30%,
        #c8402f 44%,
        #99271a 64%,
        #5c150c 84%,
        #3a0c06 100%);
    /* 縁の外に朱のにじみ(本家の球のふちの淡い発光) */
    box-shadow: 0 0 110px rgb(200 64 47 / 0.22);
    /* 縁をやわらかく。外周 6% を透明へフェードして硬い円縁をぼかす */
    -webkit-mask: radial-gradient(circle closest-side, #000 94%, transparent 100%);
    mask: radial-gradient(circle closest-side, #000 94%, transparent 100%);
    pointer-events: none;
    /*
      読み込み時に左下から昇り(1回)、昇り切ったあとは本家のように大きく漂い続ける。
      本家 circle は横に大きくスイープする(x で 36.5vw ほど)。中央を基準に左右へ大きく振る。
    */
    animation:
        creed-sunrise 4000ms cubic-bezier(0.16, 1, 0.3, 1) both,
        creed-sun-float 28s ease-in-out 4000ms infinite;
}

/* 中央(-50% -50%)を基準に、左右へ大きくスイープしつつ上下に揺れ・傾く(本家の大きな動き) */
@keyframes creed-sun-float {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(calc(-50% + 12vw), calc(-50% - 4vw)) rotate(2.5deg); }
    50% { transform: translate(-50%, -50%) rotate(0deg); }
    75% { transform: translate(calc(-50% - 12vw), calc(-50% + 4vw)) rotate(-2.5deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/*
  曇りガラスの分身(本家 .circle02.u-glass)。背景は透明で、backdrop-filter の
  ぼかしだけで見える円。太陽から少しずらして重ね、同じ circle-anim で回す。
*/
.creed-glass {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45vw;
    aspect-ratio: 1;
    z-index: 0;  /* 太陽と同層。DOM で後に置き、太陽の上に重ねてぼかす */
    border-radius: 50%;
    background: rgb(255 255 255 / 0.05);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    pointer-events: none;
    opacity: 0;
    /* 太陽より左上へずらす。rise / float の終点・起点と同じ位置 */
    transform: translate(-58%, -44%);
    /* 太陽と一緒に左下から昇り、そのあと別位相・逆向きで大きく漂う */
    animation:
        creed-glass-rise 4000ms cubic-bezier(0.16, 1, 0.3, 1) both,
        creed-glass-float 34s ease-in-out 4000ms infinite;
}

/*
  縁は本家 .circle02::before と同じ内側ハイライト。上リムは太く、下は細い
  —— 場所によって太さの変わるガラスの面取り。値は本家そのまま。
*/
.creed-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
        rgba(255, 255, 255, 0.8) 2px 3.5px 2px -2px inset,
        rgba(255, 255, 255, 0.8) -1px -5.5px 0px -3px inset;
    pointer-events: none;
}

/* 太陽と平行に左下から昇る(太陽の起点・終点をずらし幅ぶん平行移動) */
@keyframes creed-glass-rise {
    from { transform: translate(-106%, 42%) scale(0.72); opacity: 0; }
    to { transform: translate(-58%, -44%) scale(1); opacity: 1; }
}

/*
  太陽とは逆向き・別周期で大きくスイープ(本家 circle02 のように、太陽と反対へ流れる)。
  二つの円がすれ違うように動いて、ずれが生きる。
*/
@keyframes creed-glass-float {
    0% { transform: translate(-58%, -44%) rotate(0deg); }
    25% { transform: translate(calc(-58% - 14vw), calc(-44% + 3vw)) rotate(-3deg); }
    50% { transform: translate(-58%, -44%) rotate(0deg); }
    75% { transform: translate(calc(-58% + 14vw), calc(-44% - 3vw)) rotate(3deg); }
    100% { transform: translate(-58%, -44%) rotate(0deg); }
}

/* giftee のようなフィルムグレイン。太陽の上・文字の下に敷く */
.creed-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.36;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* 左下(画面外)から右上へ、大きくなりながら昇る */
@keyframes creed-sunrise {
    from {
        transform: translate(-98%, 36%) scale(0.72);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.creed-opening {
    position: relative;  /* 太陽・グレインの上に載せる */
    z-index: 2;
    /* 一行分下げる */
    margin-top: 1.45em;
    /* 左端は下部 Design for Japan の先頭文字に合わせる。JS が実測して上書きするが、
       JS 無効時のフォールバックとして中央ワードマークの始点(約 9.7vw)に寄せておく */
    margin-left: 9.7vw;
    font-family: var(--font-mono);  /* ロゴ MIYASAKA NAOYUKI と同じ */
    font-size: clamp(22px, 6vw, 74px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.03em;
}

/* giftee 風: 1文字ずつ、ぼかし+フェード+わずかに上へ。ゆっくり順に立ち上げる */
.creed-char {
    display: inline-block;
    animation: creed-char 2400ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(200ms + var(--i, 0) * 90ms);
}

/*
  「可視化」は強調語。周りと同じ大きさ・書体のまま、最初は黒で現れ、
  立ち上がったあとに色が変わる(PC は太陽の上で白へ抜け、モバイルは紙の上で朱へ)。
  base の色は最終色/reduced-motion 時の色。
*/
.creed-char-accent {
    --accent-final: #fff;
    color: var(--accent-final);
    animation:
        creed-char 2400ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(200ms + var(--i, 0) * 90ms) both,
        creed-char-color 1200ms ease calc(200ms + var(--i, 0) * 90ms + 1200ms) both;
}

@media (max-width: 1024px){
    /* モバイルでは太陽をふた回り大きく。分身のガラスも同率で拡大して比率を保つ */
    .creed-sun,
    .creed-glass {
        width: 60vw;
    }
    /*
      日の出は元の位置(中央)で止まる。そのあとの漂いだけを大きくして、上昇 phase で
      「可視化」に被るところまで昇らせる。上昇量 --sun-float-rise は main.js が実測。
    */
    .creed-sun {
        animation:
            creed-sunrise 4000ms cubic-bezier(0.16, 1, 0.3, 1) both,
            creed-sun-float-up 28s ease-in-out 4000ms infinite;
    }
}

/* モバイル用の漂い。25% で真上へ大きく昇って「可視化」に重なり、また中央へ戻る */
@keyframes creed-sun-float-up {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(calc(-50% + 12vw), calc(-50% - var(--sun-float-rise, 20vw))) rotate(2.5deg); }
    50% { transform: translate(-50%, -50%) rotate(0deg); }
    75% { transform: translate(calc(-50% - 12vw), calc(-50% + 4vw)) rotate(-2.5deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* 動きを止める設定では太陽が昇らず「可視化」が紙の上で白では沈むため、朱で読ませる */
@media (prefers-reduced-motion: reduce) and (max-width: 1024px){
    .creed-char-accent {
        --accent-final: var(--color-accent);
    }
}

/*
  モバイルのみ、開幕コピーを縦書きにする。
  改行は横書きと同じ(デザインで / 価値を可視化する の2列)。
  起点は「下部ワードマーク Japan の J の縦軸 × 2行目の横軸」の交点。
  交点は幅で変わるので、実際の top / right は main.js が実測して指定する。
*/
.creed-opening.is-vertical {
    position: absolute;
    margin: 0;
    writing-mode: vertical-rl;
}

@keyframes creed-char {
    from {
        opacity: 0;
        filter: blur(14px);
        transform: translateY(0.35em);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

/* 黒 → 最終色(PC=白 / モバイル=朱)。遅延中は backwards fill で黒を保つ */
@keyframes creed-char-color {
    from {
        color: var(--color-ink);
    }
    to {
        color: var(--accent-final);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* 動きを嫌う設定では即表示(グローバルの 1ms 上書きだと delay が残るため個別に無効化) */
    .creed-char {
        animation: none;
        opacity: 1;
        filter: none;
        transform: none;
    }
    /* 日の出も浮遊も止め、静止した球体として置く */
    .creed-sun {
        animation: none;
        transform: translate(-50%, -50%);
    }
    .creed-glass {
        animation: none;
        opacity: 1;
        transform: translate(-58%, -44%);
    }
}

/* BlueBank のワードマークに倣い、下部に巨大なゴースト状の Design for Japan(中央) */
.creed-wordmark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3%;
    z-index: 2;
    font-family: var(--font-mono);
    /* 「Design for Japan」全文が画面幅に収まる大きさ(以前の SHI:Design より字数が多い) */
    font-size: clamp(24px, 8.4vw, 124px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
    color: rgb(200 64 47 / 0.14);
}

.creed-inner {
    position: relative;  /* 太陽の上に載せる */
    max-width: 680px;
    margin-inline: auto;
    padding: 88px 24px 104px;
    text-align: center;
}

/*
  スクロールで下からフェードイン。js-reveal は JS が付ける。
  JS 無効時・prefers-reduced-motion 時はクラスが付かず、最初から全部表示される。
*/
.creed.js-reveal .creed-line {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms ease, transform 800ms ease;
}

.creed.js-reveal .creed-line.is-revealed {
    opacity: 1;
    transform: none;
}

.creed-manifesto p {
    /* 18px: モバイル幅でいちばん長い行が折り返さない上限 */
    font-size: 18px;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.04em;
}

.creed-manifesto p + p {
    margin-top: 28px;
}

/*
  BlueBank 流の読み進めリビール。JS が行ごとに span 化し、スクロールに応じて
  background-position を 100%(全グレー)→0%(全墨)へ動かす。
  背景は左半分が墨・右半分がグレーの固い境界で、行の中を左から右へ墨が塗り進む。
  JS 無効・reduced-motion では span 化されず、通常の墨色で表示される。
*/
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .creed-read-line {
        background-image: linear-gradient(90deg, var(--color-ink) 50%, #a5a5a5 50.1%);
        background-size: 300% 100%;
        background-repeat: no-repeat;
        background-position: 100% 0%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

/* 思・志・視。3つの「シ」が SHI に結ばれる、このサイト固有の署名 */
.creed-shi-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
}

/* JS 有効時: 尺を確保して pin を画面に留め、3つが出そろうまでスクロールを使う */
.creed-shi-stage.js-shi {
    height: 240svh;
}

.creed-shi-stage.js-shi .creed-shi-pin {
    position: sticky;
    top: 0;
    min-height: 100svh;
    padding: 0 24px;
}

.creed-shi {
    /* モバイルは 1 行ずつ縦に。ブロックは中央、行は左揃えで思志視の頭を合わせる */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
    gap: 24px;
    font-size: 14px;
    line-height: 1.5;
}

@media (min-width: 1025px){
    .creed-shi {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: auto;
        gap: 40px;
    }
}

.creed-shi-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* 順に現れる。js-shi が付いているときだけ隠す(JS 無効・reduced-motion では常時表示) */
.creed-shi-stage.js-shi .creed-shi-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms ease, transform 700ms ease;
}

.creed-shi-stage.js-shi .creed-shi-item.is-shown {
    opacity: 1;
    transform: none;
}

/* 「力」と同じ大きさ(開幕コピーの 2 倍角 = clamp(22,6vw,74) × 2) */
.creed-shi-char {
    margin-right: 10px;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: clamp(44px, 12vw, 148px);
    font-weight: 700;
    line-height: 1;
}

.creed-lockup {
    margin-top: 72px;
}

.creed-en {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.32em;
    color: var(--color-muted);
    /* 末尾のレタースペーシングとピリオドの余白ぶん、中央揃えが光学的に左へ寄る。
       中央寄せブロックは padding-left の半分だけ文字が右へ動くので、寄りを打ち消す */
    padding-left: 0.63em;
}

/*
  締めのタグライン + 署名画像。
  モバイルは署名をタグラインの下に中央で置く。
  PC はタグラインを中央に保ったまま、署名だけを右へ(左右 1fr で挟んで中央固定し、署名を右列に)。
*/
.creed-signoff {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
}

.creed-by {
    width: clamp(150px, 20vw, 250px);
    height: auto;
}

@media (min-width: 1025px){
    .creed-signoff {
        display: grid;
        /* minmax(0,1fr) で左右列を完全に等幅にし、タグラインを厳密に中央へ。
           署名は列幅を超えても右パディング内に収まる */
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;                  /* 署名をタグラインの天地中央に合わせる */
        gap: clamp(24px, 3vw, 48px);
    }
    .creed-tagline {
        grid-column: 2;
    }
    .creed-by {
        grid-column: 3;
        justify-self: start;  /* タグラインのすぐ右に置く */
    }
}

.creed-tagline {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
    /* 各行末の句読点(、。)の全角送り余白で、中央揃えが光学的に左へ寄る。
       padding-left の半分ぶん文字が右へ動くので、その寄りを打ち消して光学中央にする */
    padding-left: 0.55em;
}

@media (min-width: 1025px){
    .creed-hero {
        min-height: calc(100svh - 84px);  /* ヘッダー(PC 84px)を除く */
        padding: 64px 40px;
    }
    .creed-inner {
        /* 思志視の 3 つが 1 行に収まる幅 */
        max-width: 1080px;
        padding: 128px 40px 144px;
    }
    /* 本家に合わせて大きく太く */
    .creed-manifesto p {
        font-size: 34px;
    }
    .creed-shi {
        font-size: 22px;
    }
    .creed-tagline {
        font-size: 56px;
    }
}


/* -------------------------------- carousel (works / notes 共通) */
.carousel {
    position: relative;
}

/*
  overflow-x を指定すると overflow-y も visible ではなくなる。
  カードの枠線とフォーカスリングが上下で切られないよう、そのぶん内側に余白を取る。
*/
.carousel-list {
    display: flex;
    padding-block: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.carousel-list::-webkit-scrollbar {
    display: none;
}

.carousel-list > * {
    flex: 0 0 auto;
}

/* 端に達したら消える。表示切り替えは main.js */
.carousel-arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background-color: var(--color-paper);
    opacity: 0;
    transform: translateY(-50%) scale(0);
    transition: all 200ms;
    pointer-events: none;
}

.carousel-arrow.--show {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

.carousel-arrow-icon {
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-ink);
    border-right: 2px solid var(--color-ink);
}

.carousel-arrow.--prev .carousel-arrow-icon {
    transform: translateX(2px) rotate(-135deg);
}

.carousel-arrow.--next .carousel-arrow-icon {
    transform: translateX(-2px) rotate(45deg);
}

@media (max-width: 1024px){
    .carousel-arrow.--prev {
        left: 16px;
    }
    .carousel-arrow.--next {
        right: 16px;
    }
}
@media (min-width: 1025px){
    .carousel-arrow.--prev {
        left: 40px;
    }
    .carousel-arrow.--next {
        right: 40px;
    }
}


/*
  マーキー(WORKS)。カードが左へ自動で流れ、末尾の次に先頭が来て無限にループする。
  ネイティブの横スクロールを土台にして、main.js が毎フレーム scrollLeft を進める。
  こうすると自動送りと、指でのスワイプ・トラックパッド・マウスドラッグが両立する。
  JS 無効・動きを嫌う設定では、基底の .carousel(overflow-x:auto)のまま指でスクロールできる。
  main.js がカード列を複製して 2 セットにしたときだけ is-looping を付け、マーキーに切り替える。
  ホバー・フォーカス・操作中は自動送りを止める(制御は main.js)。
*/
.carousel--marquee.is-looping .carousel-list {
    padding-left: 0;  /* 左端の余白があると 1 セットぶんとずれて継ぎ目が出る */
    gap: 0;  /* 継ぎ目を均一にするため、間隔はカードの margin で持つ */
    scroll-behavior: auto;  /* 毎フレームの scrollLeft 加算を滑らかにしない(カクつき防止) */
    cursor: grab;  /* マウスでも掴んで動かせることを示す */
}

.carousel--marquee.is-looping .carousel-list.is-grabbing {
    cursor: grabbing;
}

.carousel--marquee.is-looping .carousel-list > * {
    margin-right: 4px;
}


/* -------------------------------- 制作物カード / 学習ログカード 共通 */
.works-card,
.note-card {
    display: flex;
    width: 224px;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--card-radius);
    background-color: var(--color-paper);
    transition: border-color 200ms ease;
}

.works-card:hover,
.note-card:hover {
    border-color: var(--color-ink);
}

.works-card-link,
.note-card-link {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.works-card-link img,
.note-card-link img {
    width: 100%;
    height: 224px;
    object-fit: cover;
}

.works-card-desc,
.note-card-desc {
    display: -webkit-box;
    flex: 1;
    overflow: hidden;
    padding: 12px 14px 8px;
    font-size: 13px;
    line-height: 20px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}


/* -------------------------------- works (制作物) */
.works {
    padding: 56px 0;
}

/* トップの WORKS。frame-d 風に、正方形サムネのグリッドで並べる(一覧ページと同じ .works-grid) */
.works .works-grid {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 16px;
}

.works-link {
    max-width: 1080px;
    margin: 32px auto 0;
    padding-inline: 16px;
    text-align: right;
}

.works-link a {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
}

/*
  日付ではなく、何で作ったかを置く。
  作り手のポートフォリオでは、いつより「何で」が情報になる。
*/
.works-card-type {
    padding: 0 14px 16px;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 18px;
}

@media (max-width: 1024px){
    .section-title {
        margin-bottom: 40px;
    }
}
@media (min-width: 1025px){
    .works {
        padding: 78px 0 80px;
    }
    .section-title {
        margin-bottom: 56px;
        font-size: 20px;
    }
    .works .works-grid,
    .works-link {
        padding-inline: 40px;
    }
}


/* -------------------------------- notes (学習ログ) */
.notes {
    position: relative;
    background-color: var(--color-paper);
}

/* カテゴリ(等幅)を左、日付を右に振り分ける */
.note-card-meta {
    display: flex;
    gap: 10px;
    padding: 0 14px 16px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 18px;
}

.note-card-category {
    overflow: hidden;
    color: var(--color-accent);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.note-card-date {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-muted);
}

@media (max-width: 1024px){
    .notes {
        padding: 56px 0;
    }
    .notes-list {
        gap: 8px;
        padding-left: 16px;
    }
}
@media (min-width: 1025px){
    .notes {
        padding: 80px 0;
    }
    .notes-list {
        gap: 9px;
        padding-left: 40px;
    }
}


/* -------------------------------- works-index (制作物一覧ページ) */
.works-index-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
}

.works-index-lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 2;
}

.works-group {
    margin-top: 56px;
}

.works-group-title {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

/* 一覧ページのカードは枠幅に合わせて伸縮させる（カルーセルの固定幅を上書き） */
.works-grid .works-card {
    width: auto;
    min-height: 0;
}

/* 種類ごとに縦横比をそろえ、正方形のサムネイルで並べる */
.works-grid .works-card-link img {
    height: auto;
    aspect-ratio: 1 / 1;
}

@media (max-width: 1024px){
    .works-index {
        padding: 48px 16px 64px;
    }
    .works-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
}
@media (min-width: 1025px){
    .works-index {
        max-width: 1080px;
        margin-inline: auto;
        padding: 80px 40px 104px;
    }
}


/* -------------------------------- work (制作物の詳細ページ) */
.work-eyebrow {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.work-eyebrow::before {
    content: "#";
    margin-right: 2px;
}

.work-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
}

.work-lead {
    font-size: 15px;
    line-height: 2;
}

.work-site {
    margin-top: 24px;
}

.work-site a {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
}

.work-site a::after {
    content: " ↗";
}

/* 左に項目名、右に中身。参考にした構成をそのまま定義リストで組む */
.work-spec {
    margin-top: 56px;
    border-top: 1px solid var(--color-line);
}

.work-spec-row {
    padding: 24px 0;
    border-bottom: 1px solid var(--color-line);
}

.work-spec dt {
    flex-shrink: 0;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.work-spec dd {
    font-size: 14px;
    line-height: 2;
}

/* ターゲットのように複数ある項目は箇条書きにする */
.work-spec-list li {
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.work-spec-list li::before {
    content: "—";
    margin-right: 0.5em;
    color: var(--color-muted);
}

.work-figure {
    margin-top: 56px;
}

.work-figure img {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: var(--card-radius);
}

/* 追加写真。ふだんはメインの1枚だけ見せ、「すべて見る」で残りを開く */
.work-gallery {
    margin-top: 16px;
}

.work-gallery-toggle {
    display: block;
    width: fit-content;
    margin-inline: auto;
    padding: 12px 40px;
    border: 1px solid var(--color-line);
    border-radius: var(--card-radius);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

/* Safari の三角マーカーは list-style では消えない */
.work-gallery-toggle::-webkit-details-marker {
    display: none;
}

.work-gallery-toggle:hover {
    opacity: 0.7;
}

/* 開閉状態に合わせてラベルを差し替える */
.work-gallery:not([open]) .work-gallery-label.--close,
.work-gallery[open] .work-gallery-label.--open {
    display: none;
}

.work-gallery-list {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

.work-gallery-list img {
    width: 100%;
    border: 1px solid var(--color-line);
    border-radius: var(--card-radius);
}

/* 前後の制作物へ。真ん中は一覧へ戻る */
.work-pager {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--color-line);
    font-size: 13px;
}

.work-pager-item {
    max-width: 40%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.work-pager-item.--prev::before {
    content: "← ";
}

.work-pager-item.--next {
    margin-left: auto;
    text-align: right;
}

.work-pager-item.--next::after {
    content: " →";
}

/* 前の作品が無いときも「一覧へ」は中央に置く */
.work-pager-index {
    margin-inline: auto;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-weight: 500;
}

@media (max-width: 1024px){
    .work {
        padding: 48px 16px 64px;
    }
    .work-title {
        margin-top: 8px;
        font-size: 22px;
    }
    .work-body {
        margin-top: 32px;
    }
    .work-spec-row dt {
        margin-bottom: 8px;
    }
    .work-pager {
        margin-top: 56px;
        padding-top: 24px;
    }
}
@media (min-width: 1025px){
    .work {
        max-width: 880px;
        margin-inline: auto;
        padding: 80px 40px 104px;
    }
    .work-title {
        margin-top: 12px;
    }
    .work-body {
        margin-top: 48px;
    }
    .work-spec-row {
        display: flex;
        gap: 40px;
    }
    .work-spec dt {
        width: 160px;
        padding-top: 4px;
    }
    .work-spec dd {
        flex: 1;
    }
    .work-pager {
        margin-top: 80px;
        padding-top: 32px;
    }
}


/* -------------------------------- contact (お問い合わせページ) */
/*
  WordPress ではフォームがプラグインの出力に差し替わる。
  クラスではなく要素セレクタで書いてあるので、向こうのマークアップにもそのまま当たる。
*/
.contact {
    background-color: var(--color-surface);
}

.contact-lead {
    font-size: 14px;
    line-height: 2;
    text-align: center;
}

.contact-form {
    max-width: 560px;
    margin: 40px auto 0;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.contact-form input:not([type="radio"]):not([type="checkbox"]),
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--card-radius);
    background-color: var(--color-paper);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
}

.contact-field + .contact-field {
    margin-top: 24px;
}

.contact-submit {
    margin-top: 32px;
    text-align: center;
}

/* このページで唯一の主行動。ホバーで印の朱に変わる */
.contact-form button {
    padding: 14px 56px;
    border-radius: var(--card-radius);
    background-color: var(--color-ink);
    color: var(--color-paper);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    transition: background-color 200ms ease;
}

.contact-form button:hover {
    background-color: var(--color-accent);
    opacity: 1;
}

/* ---- WPForms（CONTACT）。プラグイン側 CSS は「なし」設定にし、テーマ側で全て当てる。
   静的サイト由来の label / input / textarea / button のスタイルはそのまま効くので、
   ここでは WPForms 固有の構造（field の余白・名/姓の横並び・ラジオ・送信の中央寄せ）だけ足す */
.contact-form .wpforms-field + .wpforms-field {
    margin-top: 24px;
}

/* 見出しは label のときも legend のとき（名前・ラジオ）もある */
.contact-form .wpforms-field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.contact-form .wpforms-required-label {
    color: var(--color-accent);
}

/* 名（名前）フィールドの 名 / 姓 を横並びに */
.contact-form .wpforms-field-row {
    display: flex;
    gap: 12px;
}

.contact-form .wpforms-field-row-block {
    flex: 1;
}

.contact-form .wpforms-field-sublabel {
    display: block;
    margin: 6px 0 0;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
}

/* ラジオ／チェックボックス（お問い合わせ内容）。選択肢は本文の書体で縦に並べる */
.contact-form .wpforms-field-radio ul,
.contact-form .wpforms-field-checkbox ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-form .wpforms-field-radio li,
.contact-form .wpforms-field-checkbox li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-form .wpforms-field-label-inline {
    display: inline;
    margin: 0;
    color: var(--color-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
}

/* destyle が appearance: none にするため 0×0 に潰れる。ネイティブ描画に戻して大きさを持たせる */
.contact-form .wpforms-field-radio input[type="radio"],
.contact-form .wpforms-field-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    appearance: auto;
    accent-color: var(--color-accent);
}

.contact-form .wpforms-field-radio input[type="radio"] {
    -webkit-appearance: radio;
}

.contact-form .wpforms-field-checkbox input[type="checkbox"] {
    -webkit-appearance: checkbox;
}

.contact-form .wpforms-submit-container {
    margin-top: 32px;
    text-align: center;
}

/* 検証エラーと送信完了メッセージ */
.contact-form em.wpforms-error {
    display: block;
    margin-top: 6px;
    color: var(--color-accent);
    font-size: 12px;
    font-style: normal;
}

.contact-form .wpforms-confirmation-container-full {
    padding: 24px;
    border: 1px solid var(--color-line);
    border-radius: var(--card-radius);
    background-color: var(--color-paper);
    font-size: 14px;
    line-height: 2;
    text-align: center;
}

@media (max-width: 1024px){
    .contact {
        padding: 56px 16px 72px;
    }
}
@media (min-width: 1025px){
    .contact {
        padding: 80px 40px 104px;
    }
}


/* -------------------------------- notice (UPDATES / WRITING) */
.notice-wrap {
    background-color: var(--color-surface);
}

/* hidden 属性で隠す。PC の .notice-wrap{display:grid} が [hidden] の display:none を
   上書きしてしまうため、属性セレクタ（高詳細度）で確実に消す。出す時は hidden を外すだけ */
.notice-wrap[hidden] {
    display: none;
}

.notice-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.notice-list {
    margin-top: 16px;
    border-top: 1px solid var(--color-line);
}

.notice-list a {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-line);
    font-size: 14px;
    line-height: 1.6;
}

.notice-list time {
    display: block;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 11px;
}

.notice-more {
    margin-top: 20px;
    text-align: right;
}

.notice-more a {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
}

@media (max-width: 1024px){
    .notice-wrap {
        padding: 48px 16px;
    }
    .notice + .notice {
        margin-top: 40px;
    }
}
@media (min-width: 1025px){
    .notice-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 64px;
        max-width: 1200px;
        margin-inline: auto;
        padding: 80px 40px;
    }
}


/* -------------------------------- site-footer */
.site-footer {
    background-color: var(--color-ink);
    color: var(--color-paper);
}

/* ME と制作物一覧を1列に縦積みするグループ */
.footer-nav-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-nav-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.footer-bottom {
    border-top: 1px solid rgb(255 255 255 / 0.2);
}

.footer-copyright {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 1024px){
    .footer-inner {
        padding: 40px 24px;
    }
    .footer-inner > * + * {
        margin-top: 32px;
    }
    .footer-bottom {
        margin-top: 8px;
        padding: 32px 24px;
    }
}
@media (min-width: 1025px){
    .footer-inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        max-width: 1200px;
        margin-inline: auto;
        padding: 64px 40px;
    }
    /* PC のみ、CONTACT を中央列・買取 蔵の宮 を右列へ入れ替える(DOM 順は変えず order で)。
       モバイルは DOM 順のまま(ME/制作物一覧/FAQ → 蔵の宮 → CONTACT)。 */
    .footer-nav.--contact {
        order: 1;
    }
    .footer-inner > .footer-nav:not(.--contact) {
        order: 2;
    }
    /* 左の ME 群を列の右端へ寄せ、中央 CONTACT との余白を右側(蔵の宮)と同じにする */
    .footer-nav-group {
        align-items: flex-end;
        text-align: right;
    }
    .footer-bottom {
        padding: 32px 40px;
    }
}


/* -------------------------------- utils */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 1025px){
    .hidden-on-pc {
        display: none;
    }
}


/* -------------------------------- me (自己紹介ページ) */
.me-lead {
    margin-top: 24px;
    font-size: 15px;
    line-height: 2;
}

.me-section {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--color-line);
}

/* トップの見出しは中央寄せだが、読ませる本文が続くこのページでは左に揃える */
.me-section .section-title {
    margin-bottom: 24px;
    text-align: left;
}

.me-section p {
    font-size: 15px;
    line-height: 2;
}

.me-section p + p,
.me-intro-text p + p {
    margin-top: 16px;
}

/* 経歴。年が確定していないので、順序ではなく事実の並びとして持つ */
.me-career li {
    padding-left: 1.2em;
    font-size: 15px;
    line-height: 2;
    text-indent: -1.2em;
}

.me-career li::before {
    content: "—";
    margin-right: 0.5em;
    color: var(--color-muted);
}

.me-group + .me-group {
    margin-top: 32px;
}

.me-group-title,
.me-card-title {
    font-size: 15px;
    font-weight: 700;
}

.me-group-title {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-line);
}

/* できること。項目名だけの短い語が並ぶので、行ではなく粒で見せる */
.me-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.me-tags li {
    padding: 6px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--card-radius);
    background-color: var(--color-surface);
    font-size: 13px;
    line-height: 1.6;
}

.me-portrait img,
.me-photo img {
    width: 100%;
    height: auto;
    border-radius: var(--card-radius);
}

/* 趣味のあとに置く写真。仕事の顔から素の顔へ、下に向かって崩す */
.me-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.me-photo figcaption {
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.7;
}

.me-card {
    padding-left: 16px;
    border-left: 3px solid var(--color-accent);
}

.me-card + .me-card {
    margin-top: 24px;
}

.me-card p {
    margin-top: 8px;
}

.me-contact {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--color-line);
}

.me-contact a {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
}

.me-contact a::after {
    content: " →";
}


/* -------------------------------- faq(よくあるご質問) */
/* 質問=dt、回答=dd。頭に Q / A の等幅マーカーを付けて対にする */
.faq-q,
.faq-a {
    display: flex;
    gap: 14px;
    font-size: 15px;
    line-height: 2;
}

.faq-q::before,
.faq-a::before {
    flex-shrink: 0;
    width: 1em;
    font-family: var(--font-mono);
    font-weight: 500;
    line-height: 2;
}

.faq-q {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--color-line);
    font-weight: 700;
}

/* 各カテゴリの最初の質問は、見出し下なので上罫線を出さない */
.faq-list > .faq-q:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.faq-q::before {
    content: "Q";
    color: var(--color-accent);
}

.faq-a {
    margin-top: 10px;
    color: var(--color-muted);
}

.faq-a::before {
    content: "A";
    color: var(--color-muted);
}

@media (max-width: 1024px){
    .me {
        padding: 48px 16px 64px;
    }
    .me-section {
        margin-top: 48px;
    }
    /* 狭い画面では文章が先。写真はそのあとに回す */
    .me-portrait {
        max-width: 240px;
        margin: 24px auto 0;
    }
}
@media (min-width: 1025px){
    .me {
        max-width: 880px;
        margin-inline: auto;
        padding: 80px 40px 104px;
    }
    .me-intro {
        display: flex;
        align-items: flex-start;
        gap: 40px;
    }
    .me-intro-text {
        flex: 1;
    }
    .me-portrait {
        flex-shrink: 0;
        width: 240px;
    }
}


/* -------------------------------- footer stamp (Contact の円形スタンプ) */
/* Contact は見出しとスタンプだけ。列の中で天地左右の中心に置く */
.footer-nav.--contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-stamp {
    position: relative;
    display: block;
    width: 180px;
    margin-top: 32px;
}

/* 文字だけが回る。中の査定士は止めたまま */
.footer-stamp-ring {
    display: block;
    width: 100%;
    height: auto;
    animation: 50s linear infinite load;
}

@keyframes load {
    to {
        transform: rotate(360deg);
    }
}

.footer-stamp-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52%;
    height: auto;
    transform: translate(-50%, -50%);
}