/* ==========================================================================
   株式会社アルトノーツ — 白と墨 + くすみ紅の落款(案B-2)
   詳細は docs/デザイン方針.md を参照
   ========================================================================== */

:root {
    --bg: #F5F5F3;      /* 白磁 */
    --ink: #1C1C1A;     /* 墨 */
    --mist: #77776F;    /* 鼠 */
    --beni: #C63966;    /* くすみ紅 — 落款と実績数字のみに使用 */
    --line: rgba(28, 28, 26, 0.14);

    --font-mincho: "Zen Old Mincho", serif;
    --font-latin: "EB Garamond", serif;
    --font-gothic: "Zen Kaku Gothic New", sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-gothic);
    font-weight: 400;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   ヒーロー: 縦書きステートメント + 落款
   -------------------------------------------------------------------------- */

.hero {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 3rem clamp(1.5rem, 6vw, 6rem);
}

.hero-inner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 3.5rem);
}

.statement {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.2rem;
}

.stmt {
    writing-mode: vertical-rl;
    font-family: var(--font-mincho);
    font-size: clamp(1.55rem, 3.4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: 0.28em;
    line-height: 2.6;
    /* 先頭行「最良の」(3字)を本文に対して縦センターに。
       句読点は字面が小さく本文の見た目は約7字分のため、幾何センター(2.5字)より浅い2字下げが光学的に自然 */
    text-indent: calc(2 * (1em + 0.28em));
}

.stmt-sub {
    font-family: var(--font-latin);
    font-style: italic;
    font-size: 0.9rem;
    letter-spacing: 0.4em;
    text-indent: 0.4em; /* letter-spacing末尾分の光学補正 */
    color: var(--mist);
}

.seal {
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.seal-mark {
    width: 2.8rem;
    height: 2.8rem;
    /* company_logo.png からマーク部分だけを切り出した画像(周囲2px透明余白)。
       ロゴタイプ付きの横長画像を background-size で拡大・クロップすると
       マークが要素より大きくなり上下右端が切れるため、マーク単体を contain で収める */
    background-image: url("../img/seal_mark.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* PNG暫定処理。SVG化後は #C63966 単色塗りに差し替える */
    filter: saturate(0.75) brightness(0.92);
}

.seal-name {
    writing-mode: vertical-rl;
    font-family: var(--font-mincho);
    font-size: 0.85rem;
    letter-spacing: 0.35em;
    color: var(--mist);
}

/* ヒーローのフェードイン */
@media (prefers-reduced-motion: no-preference) {
    .statement {
        animation: hero-fade 1.4s ease both;
    }
    .seal {
        animation: hero-fade 1.4s ease 0.5s both;
    }
    @keyframes hero-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* --------------------------------------------------------------------------
   セクション共通: 縦書き見出し + 本文
   -------------------------------------------------------------------------- */

main {
    width: min(56rem, 100% - clamp(3rem, 12vw, 8rem));
    margin-inline: auto;
}

.section {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    padding-block: clamp(4rem, 12vh, 7rem);
    border-top: 1px solid var(--line);
}

.v-head {
    writing-mode: vertical-rl;
    font-family: var(--font-mincho);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5em;
    line-height: 1;
    color: var(--ink);
}

/* スクロールでの控えめなフェード(JS有効時のみ) */
@media (prefers-reduced-motion: no-preference) {
    .js .section {
        opacity: 0;
        transform: translateY(0.75rem);
        transition: opacity 0.9s ease, transform 0.9s ease;
    }
    .js .section.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   事業内容
   -------------------------------------------------------------------------- */

.services {
    list-style: none;
}

.services li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-block: 1.4rem;
}

.services li + li {
    border-top: 1px solid var(--line);
}

.svc-name {
    font-family: var(--font-mincho);
    font-size: 1.15rem;
    letter-spacing: 0.12em;
}

.svc-note {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--mist);
}

/* --------------------------------------------------------------------------
   実績
   -------------------------------------------------------------------------- */

.figures {
    display: flex;
    gap: clamp(3rem, 8vw, 6rem);
    flex-wrap: wrap;
}

.fig-num {
    font-family: var(--font-latin);
    font-size: clamp(3.2rem, 8vw, 4.6rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--beni);
}

.fig-plus {
    font-size: 0.6em;
    margin-left: 0.08em;
}

.fig-label {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: var(--mist);
}

/* --------------------------------------------------------------------------
   会社情報
   -------------------------------------------------------------------------- */

.info-row {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 1rem;
    padding-block: 1.1rem;
}

.info-row + .info-row {
    border-top: 1px solid var(--line);
}

.info-row dt {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--mist);
    padding-top: 0.2em;
}

.info-row dd {
    font-size: 0.95rem;
    letter-spacing: 0.06em;
}

.info-row a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 0.3em;
    transition: text-decoration-color 0.3s ease;
}

.info-row a:hover,
.info-row a:focus-visible {
    text-decoration-color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */

.footer {
    width: min(56rem, 100% - clamp(3rem, 12vw, 8rem));
    margin-inline: auto;
    padding-block: 2.5rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}

.wordmark {
    font-family: var(--font-latin);
    font-style: italic;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    color: var(--mist);
}

.copyright {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--mist);
}

/* --------------------------------------------------------------------------
   モバイル調整
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .stmt {
        letter-spacing: 0.18em;
        text-indent: calc(2 * (1em + 0.18em));
    }

    .seal-mark {
        width: 2.2rem;
        height: 2.2rem;
    }

    .section {
        gap: 1.5rem;
    }

    .services li {
        flex-direction: column;
        gap: 0.2rem;
    }
}