/* =========================================================
   田中商店 — 共通スタイル
   シンプル・シャープ、でも気取らない
   ========================================================= */

:root {
    --ink: #231815; /* ロゴの墨色 */
    --paper: #f0f0f0; /* コンテンツ部分の背景 rgb(240,240,240) */
    --bar-bg: #ffffff; /* 上部バーは白 */
    --sub: #5f5d57;
    --line: #d6d5d1;
    --soft: #ffffff;
    --accent: #ad292d; /* ロゴの丸の赤。使うのはほんの少しだけ */
    --bar-h: 56px;
    --wrap: 884px; /* 上部バー・フッターの最大幅(中身 836px) */
    --wrap-main: 684px; /* 本文の幅(上部バー・フッターの75%) */
    /* 英字は Barlow、日本語は Zen Kaku Gothic New(Barlow にない文字は自動で日本語フォントへ) */
    --sans: "Barlow", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
    --en: "Barlow", "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-padding-top: calc(var(--bar-h) + 16px);
    scrollbar-gutter: stable; /* ページの長さが違ってもレイアウトが左右にずれない */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

    a:hover {
        color: var(--accent);
    }

h1, h2, h3 {
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
}

p {
    margin: 0 0 1em;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- 上部固定バー ---------- */

.bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10;
    height: var(--bar-h);
    background: var(--bar-bg);
    border-bottom: 1px solid var(--line);
}

    .bar .wrap {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
}

    .logo img {
        height: 30px;
        width: auto;
    }

    .logo span {
        position: relative;
        top: 2px; /* ロゴの中心より少しだけ下げる */
        margin-left: 8px; /* ロゴとの間を少し広げる */
        font-family: var(--en);
        font-size: 15px;
        letter-spacing: 0.08em;
        color: var(--sub);
    }

/* メニュー:各項目の枠幅を固定して、どのページでも・どのフォントでも
   文字の位置が変わらないようにする(幅は文字サイズ基準の em) */
.nav {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--en);
    font-size: 15px;
}

    .nav li {
        flex: none;
    }

        .nav li:nth-child(1) {
            width: 3.3em;
        }
        /* top */
        .nav li:nth-child(2) {
            width: 6.8em;
        }
        /* client work */
        .nav li:nth-child(3) {
            width: 7.7em;
        }
        /* original work */
        .nav li:nth-child(4) {
            width: 3.9em;
        }
        /* note */
        .nav li:nth-child(5) {
            width: 3.6em;
        }
    /* contact */
    .nav a {
        display: inline-block;
        color: var(--ink);
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        padding: 4px 0 3px;
        border-bottom: 3px solid transparent; /* 全項目に同じ太さの線を確保しておく */
    }

        .nav a[aria-current="page"] {
            border-bottom-color: var(--accent);
        }

        .nav a:hover {
            color: var(--accent);
        }

/* ハンバーガーボタン(広い画面では隠す) */
.menu-btn {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
}

    .menu-btn span,
    .menu-btn span::before,
    .menu-btn span::after {
        position: absolute;
        left: 10px;
        width: 20px;
        height: 2px;
        background: currentColor;
    }

    .menu-btn span {
        top: 19px;
    }

        .menu-btn span::before,
        .menu-btn span::after {
            content: "";
            left: 0;
        }

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

        .menu-btn span::after {
            top: 6px;
        }
/* 開いているときは × */
.bar.open .menu-btn span {
    background: transparent;
}

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

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

@media (max-width: 840px) {
    .menu-btn {
        display: block;
    }

    .nav {
        display: none;
        position: fixed;
        top: var(--bar-h);
        left: auto;
        right: 0; /* 右端に寄せ、幅は中身に合わせる(画面幅いっぱいにしない) */
        width: 220px;
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        text-align: right;
        padding: 0;
        background: var(--bar-bg);
        border-left: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        font-size: 16px;
    }

    .bar.open .nav {
        display: flex;
    }

    .nav li:nth-child(n) {
        width: auto;
        border-top: 1px solid var(--line);
    }

    .nav li:first-child {
        border-top: none;
    }
    /* 行(セル)全体をリンクにする。今いるページの印は文字の下線で表す */
    .nav a {
        display: block;
        padding: 15px 24px;
        border-bottom: none;
    }

        .nav a[aria-current="page"] {
            text-decoration: underline 3px var(--accent);
            text-underline-offset: 7px;
        }

        .nav a:hover {
            background: var(--paper);
        }
}

/* ---------- 本文 ---------- */

/* 本文エリアだけ幅を狭く(上部バー・フッターは --wrap のまま) */
main .wrap {
    max-width: calc(var(--wrap-main) + 48px);
}

main {
    padding-top: calc(var(--bar-h) + 32px);
    padding-bottom: 112px;
}

.page-head {
    margin-bottom: 28px;
}

    .page-head .label {
        font-family: var(--en);
        font-size: 12px;
        color: var(--sub);
        letter-spacing: 0.1em;
        line-height: 1.6;
        margin-bottom: 2px;
    }

    .page-head h1 {
        font-size: 36px;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1.3;
        color: var(--accent);
    }

    .page-head p {
        margin-top: 16px;
        margin-bottom: 0;
        color: var(--sub);
        max-width: 40em;
    }

section + section {
    margin-top: 72px;
}

.sec-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 21px;
    padding-bottom: 0;
    margin-bottom: 14px; /* 見出しの下線はなし */
    color: var(--accent); /* 見出しは日本語・英字とも差し色 */
}

    .sec-title small {
        font-family: var(--en);
        font-weight: 400;
        font-size: 13px;
        color: var(--accent);
    }

.lead {
    font-size: 33px;
    font-weight: 500; /* 地の文字はやや細め */
    line-height: 1.45;
    letter-spacing: 0.06em;
    margin-bottom: 28px;
    margin-top: 28px; /* 書き出しの位置を少し下げる */
}

    .lead span {
        display: block;
    }

        .lead span + span {
            margin-top: 0.3em;
        }
    /* 2つの文の間を少しあける */
    .lead em {
        font-style: normal;
        font-weight: 700; /* 差し色の語は太いまま */
        color: var(--accent); /* 白の座布団に茜色の文字 */
        background: #fff;
        padding: 0.02em 0.09em 0.06em 0.15em; /* 右は字間のぶん少なめにして左右を均等に */
        margin: 0 0.06em 0 0;
    }

        .lead em.wide { /* 「空間」は字間を広げて座布団を約110%に */
            letter-spacing: 0.19em;
            padding-left: 0.19em;
            padding-right: 0.02em;
        }

.text {
    max-width: 40em;
}

.symbol { /* キャッチコピー下の線画 */
    overflow: hidden; /* 幅が足りないときは縮小せず、右側を切る */
    margin: 0 0 28px;
}

    .symbol img {
        display: block;
        width: 684px; /* 常にこの大きさで表示 */
        max-width: none;
        height: auto;
    }

.intro {
    font-size: 19px;
}
/* トップの紹介文は少し大きく */

/* ---------- できること(3分割) ---------- */

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

    .grid3 > div {
        padding: 20px 18px 22px;
        border-left: 1px solid var(--line); /* 外枠はなし。列の間の縦線だけ */
    }

        .grid3 > div:first-child {
            border-left: none;
        }

    .grid3 .num {
        display: block;
        font-family: var(--en);
        font-size: 44px;
        font-weight: 300;
        line-height: 1;
        color: #bebdb9; /* 薄いグレー */
    }

    .grid3 h3 {
        font-size: 19px;
        margin: 14px 0 8px;
    }

    .grid3 p {
        font-size: 15px;
        color: var(--sub);
        margin: 0;
        line-height: 1.8;
    }

/* ---------- 定義リスト(会社概要など) ---------- */

.dl {
    display: grid;
    grid-template-columns: 9em 1fr;
    margin: 0;
}

    .dl dt,
    .dl dd {
        margin: 0;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
    }

    .dl dt {
        color: var(--sub);
        font-size: 13px;
    }

    .dl dd {
        font-size: 15px;
    }

/* ---------- リスト(client work / note) ---------- */

.list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

    .list li {
        border-bottom: 1px solid var(--line);
    }

    .list a {
        display: grid;
        grid-template-columns: 6em 1fr;
        gap: 16px;
        align-items: baseline;
        padding: 18px 4px;
        text-decoration: none;
    }

        .list a:hover .title {
            color: var(--accent);
        }

    .list .date {
        font-family: var(--en);
        font-size: 15px;
        color: var(--sub);
    }

    .list .title {
        font-weight: 700;
    }

    .list .meta {
        display: block;
        font-weight: 400;
        font-size: 14px;
        color: var(--sub);
        margin-top: 2px;
    }
/* リンクの矢印:茜色の四角に白い矢印。↗=外部サイト、→(.arrow.go)=サイト内 */
.arrow {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    vertical-align: -2px;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5.5 12.5 12 6M7.5 5.5H12.5V10.5'/%3E%3C/svg%3E") center / 100% no-repeat;
    color: transparent; /* 文字の矢印は読み上げ用に残し、見た目は絵にする */
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.dl a {
    text-decoration: none;
}
/* 表の中のリンクも下線なし+茜色の矢印でそろえる */
.arrow.go {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M4.5 9H13M9.5 5.5 13 9 9.5 12.5'/%3E%3C/svg%3E");
}

.arrow.prev {
    margin-left: 0;
    margin-right: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M13.5 9H5M8.5 5.5 5 9 8.5 12.5'/%3E%3C/svg%3E");
}

.card .more .arrow {
    width: 16px;
    height: 16px;
    margin-left: 6px;
    vertical-align: -3px;
}

.note-box {
    font-size: 15px;
    color: var(--sub);
    background: var(--soft);
    padding: 10px 20px;
    margin-bottom: 32px;
}

/* ---------- original work カード ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
}

.card a {
    text-decoration: none;
    display: block;
}

.card .thumb {
    aspect-ratio: 16 / 10;
    background: var(--soft);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--en);
    font-size: 12px;
    color: var(--sub);
    overflow: hidden;
}

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

.card h2 {
    font-size: 20px;
    margin: 16px 0 6px;
}

.card p {
    font-size: 15px;
    color: var(--sub);
    margin: 0 0 10px;
}

.card .more {
    font-family: var(--en);
    font-size: 14px;
}

.card a:hover h2,
.card a:hover .more {
    color: var(--accent);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

    .tags li {
        font-family: var(--en);
        font-size: 12px;
        border: 1px solid var(--line);
        padding: 1px 8px;
        color: var(--sub);
    }

/* ---------- 詳細ページ ---------- */

.back {
    font-family: var(--en);
    font-size: 15px;
    text-decoration: none;
    color: var(--ink);
}

.hero-img {
    aspect-ratio: 16 / 9;
    background: var(--soft);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--en);
    font-size: 12px;
    color: var(--sub);
    margin-bottom: 48px;
}

/* ---------- フォーム ---------- */

.form {
    max-width: 640px;
}
    /* 送信ボタン:茜色のベタに白文字、少し小さめ */
    .form .btn {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
        font-size: 14px;
        padding: 9px 28px;
    }

        .form .btn:hover {
            background: #8f2125;
            border-color: #8f2125;
        }

.field {
    margin-bottom: 24px;
}

    .field label {
        display: block;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 6px;
    }

    .field .req {
        font-family: var(--en);
        font-size: 12px;
        font-weight: 400;
        color: var(--accent);
        margin-left: 6px;
    }

    .field input,
    .field select,
    .field textarea {
        width: 100%;
        font: inherit;
        font-size: 16px;
        color: var(--ink);
        background: #fff;
        border: 1px solid transparent; /* 枠線はなし(入力中だけ墨色の枠) */
        border-radius: 0;
        padding: 10px 12px;
    }

    .field input,
    .field select {
        padding: 5px 12px;
        line-height: 1.5;
    }
    /* 1行の欄は上下を詰める */
    .field textarea {
        min-height: 200px;
        resize: vertical;
        line-height: 1.7;
    }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: none;
            border-color: var(--ink);
        }

.hp {
    display: none;
}
/* スパム対策の見えない欄 */

.btn {
    font: inherit;
    font-family: var(--en);
    font-size: 15px;
    letter-spacing: 0.08em;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    padding: 12px 36px;
    cursor: pointer;
}

    .btn:hover {
        background: var(--accent);
        border-color: var(--accent);
    }

.small {
    font-size: 14px;
    color: var(--sub);
}

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

/* 中身が短いページでも、フッターの帯を画面の一番下に置く */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    body > main {
        flex: 1 0 auto;
    }

.foot {
    background: #fff; /* フッターも白 */
    padding: 18px 0 20px;
    font-family: var(--en);
    font-size: 13px;
    color: var(--sub);
}

    .foot .wrap {
        display: flex;
        justify-content: flex-end;
        gap: 16px;
        flex-wrap: wrap;
    }

/* ---------- スマホ ---------- */

@media (max-width: 720px) {
    .logo img {
        height: 25px;
    }

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

    .nav a {
        padding: 15px 16px;
    }

    .wrap {
        padding: 0 16px;
    }

    main {
        padding-top: calc(var(--bar-h) + 24px);
    }

    .lead {
        font-size: 24px;
    }

    .page-head h1 {
        font-size: 28px;
    }

    .intro {
        font-size: 17px;
    }

    .grid3 {
        grid-template-columns: 1fr;
    }

        .grid3 > div {
            border-left: none;
            border-top: 1px solid var(--line);
            padding-left: 0;
            padding-right: 0;
        }

            .grid3 > div:first-child {
                border-top: none;
            }

    .cards {
        grid-template-columns: 1fr;
    }

    .dl {
        grid-template-columns: 1fr;
    }

        .dl dt {
            border-bottom: none;
            padding-bottom: 0;
        }

    .list a {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ---------- 動きを抑える ---------- */
/* アニメーション・トランジションは使わない。ホバーは文字色が変わるだけ */
*, *::before, *::after {
    transition: none !important;
    animation: none !important;
}

/* ---------- 数字の幅をそろえる ---------- */
/* 年号・日付・番号は等幅数字(Barlow の tnum)で縦に揃える */
.dl dt,
.list .date,
.grid3 .num,
.foot {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- 準備中 ---------- */
.soon {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 40px 0;
    margin: 0;
    text-align: center;
    color: var(--sub);
    letter-spacing: 0.2em;
}

/* ---------- 動画ページ ---------- */
/* 枠(16:9)を先に固定し、ポスター画像も再生中の動画もこの枠の中に収める。
   古いiPhoneのSafariでも崩れないよう、aspect-ratio ではなく padding で高さを作る */
.movie-frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 0;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
    overflow: hidden;
    margin-bottom: 40px; /* プレーヤーとボタンの間 */
}

    .movie-frame iframe, /* YouTube の埋め込みも同じ枠に収める */
    .movie-frame video {
        border: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        display: block;
    }

    .movie-frame.second,
    .movie-portrait.second {
        margin-top: 64px;
    }
/* 1ページに2本目の動画を置くときの間隔 */
/* 縦長(9:16)の動画:幅を抑えた枠に入れる(高さは幅から決まる) */
.movie-portrait {
    width: 360px;
    max-width: 100%;
}

.movie-frame.portrait {
    padding-top: 177.78%;
}
/* 16 / 9 = 177.78% */
.dl-row {
    display: flex;
    flex-wrap: wrap; /* 幅が足りないときは容量の文字をボタンの下へ回す(はみ出し防止) */
    align-items: center;
    gap: 6px 16px;
    margin: 0 0 24px; /* ボタンどうしの間 */
}

    .dl-row .btn {
        display: block;
        box-sizing: border-box;
        flex: 0 0 240px; /* 2つのボタンの幅をそろえる(横の文字に押されて縮まない) */
        width: 240px;
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
        text-align: center;
        white-space: nowrap;
        text-decoration: none;
    }

        .dl-row .btn:hover {
            color: var(--paper);
        }

    .dl-row .small {
        flex: 0 0 auto;
    }

@media (max-width: 360px) {
    .dl-row {
        flex-wrap: wrap;
        gap: 6px 12px;
    }

        .dl-row .btn {
            flex: 0 0 100%;
            width: 100%;
        }
}

/* ---------- プライバシーポリシー ---------- */
.policy section + section {
    margin-top: 44px;
}
/* 項目が多いので間隔は通常より狭め */
.policy .sec-title {
    font-size: 19px;
    color: var(--ink);
}
    /* 小見出しは茜色でなく黒 */
    .policy .sec-title small {
        color: var(--sub);
    }

.policy p,
.policy li {
    font-size: 15px;
    line-height: 1.9;
}

.policy ul {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

/* フッターのリンク */
.foot a {
    color: var(--ink);
    text-decoration: none;
}

    .foot a:hover {
        color: var(--accent);
    }