@charset "UTF-8";

/**
 * テーマ「弊社サイト」のトークン。
 *
 * style.css の後に読み込まれ、:root の変数を上書きする。
 * **骨格・余白・字組みはなごみのまま**（社長の指示が「なごみをベース」のため）。
 * 変えているのは色だけで、それも 4 つ。
 *
 * **この配色は暫定です。** 弊社のブランド色が決まったら、下の 4 行を
 * 差し替えてください。ほかに触る場所はありません。
 *
 * なごみとの違い:
 *
 *   - キーカラーの藍鼠（#3c4a5a）を、一段濃く青へ寄せた（#2f4858）。
 *     和の落ち着きは残しつつ、葬儀社の 1 社目と地続きに見えないようにする
 *   - 電話ボタンの茶（#6b4a2f）をキーカラーの系統に揃えた。
 *     緊急の電話が主導線ではないので、地色から浮かせる必要が薄い
 *
 * **地色（生成り）と本文の墨は変えていない。** ここを変えると余白の見え方まで
 * 変わり、「なごみをベース」から離れる。
 */

:root {
    --color-accent:      #2f4858;
    --color-accent-deep: #22353f;

    --color-tel:         #2f4858;
    --color-tel-hover:   #22353f;
}

/**
 * ロゴの下の小さな字を、ロゴの幅にぴったり合わせる（2026-09-07・社長の指示）。
 *
 * **これは弊社のロゴにだけ起きる問題。** 「株式会社デジタルスペースワウ」は
 * 14 文字あり、style.css の既定（11px・字間 0.16em）だと実測 174.7px になる。
 * ロゴ画像は 800x194 で、高さ 40px で描くと 164.9px。**字のほうが 9.8px 長く、
 * ロゴの右端をはみ出す。**
 *
 * **字間を詰めて合わせる手は採らなかった。** ぴったりにするには 0.097em という
 * 半端な値が要るうえ、**ロゴか社名を差し替えた瞬間にまた合わなくなる**。
 * ここは「箱の幅に字を配る」形にして、ロゴが変わっても追随するようにした。
 *
 * 仕掛けは 2 つ。
 *
 *   - `width: 0` … 親 <a> の幅を決めるとき、この字を勘定に入れさせない。
 *     こうしないと「親の幅＝字の幅」になり、ロゴに合わせようがなくなる
 *     （親は shrink-to-fit なので、中で一番広いものが幅を決めてしまう）。
 *   - `min-width: 100%` … そのうえで、決まった親の幅（＝ロゴの幅）まで広げ直す。
 *
 * そこへ両端揃えを掛けると、字間が自動で計算されて左右がロゴに揃う。
 * **字間は 0 に戻すこと。** 残すと両端揃えの計算に上乗せされ、最後の 1 字が
 * はみ出す。**`white-space` も normal に戻すこと。** style.css の
 * `.header__brand` が nowrap なので、そのままだと行が箱の幅を無視する。
 *
 * `text-align-last` は Safari 16（2022年）以降。それより古い環境では
 * 両端揃えが効かず左寄せのままになるが、**字はロゴより短いので
 * はみ出しはしない** —— 直す前より悪くはならない。
 */
.header__brand small {
    width: 0;
    min-width: 100%;
    letter-spacing: 0;
    white-space: normal;
    text-align: justify;
    text-align-last: justify;
}

/**
 * 狭い画面では、字を 9px まで落とす。
 *
 * **767px 以下で style.css がロゴを height:32px / max-width:160px に縮める**
 * ため、ロゴの幅が 132px になる。11px のままだと 14 文字が収まらず
 * **2 行に折り返し、2 行目の「ワ」と「ウ」が両端に離れて割れる**（実機で確認）。
 * 132 ÷ 14 = 9.4px が上限なので 9px にした。8px も試したが小さすぎる。
 *
 * **この境目は style.css の .header__logo と同じ 767px。** あちらを動かしたら
 * こちらも動かすこと。
 */
@media (max-width: 767px) {
    .header__brand small {
        font-size: 0.5625rem;
    }
}

/**
 * 料金のカードの下段を 4 列にする（2026-09-08・社長の指示）。
 *
 * **プランが 5 つになったため。** ホームページ制作をパッケージの中身として
 * 増やした（それまでカードは 3 つしか無いのに、パッケージの概要は
 * 「四つの仕組みがこの価格で使えます」と名乗っていた）。
 *
 * style.css の .plan-grid--feature は 3 列なので、5 つ目が入ると
 * **下段が 3 枚 + 1 枚**になり、右が 2 枚ぶん空く。崩れはしないが見栄えが悪い。
 *
 * **新しく狭い形を作るのではない。** 4 列にするとカード 1 枚は
 * (1040 - 24*3) / 4 = 242px で、**これは既定の .plan-grid（4 列）が
 * 葬儀社テーマ 7 つで出している幅とまったく同じ**。サイトの中に既にある
 * 寸法へ合わせているだけなので、写真も字も潰れない。
 *
 * **style.css は触らない。** feature の型は akari（お客様向けテーマ）も
 * 使っているので、共通の CSS を動かすとよそのお客様のサイトまで変わる。
 * theme.css は oem しか読まないから、ここに閉じる。
 *
 * **1023px 以下は触らない。** style.css が feature を 2 列に落とすので、
 * 4 枚がちょうど 2 段 × 2 枚に収まる。先頭の 1 枚は grid-column: 1 / -1 の
 * ままなので、何列にしても全幅を保つ。
 */
.plan-grid--feature {
    grid-template-columns: repeat(4, 1fr);
}

/**
 * 1079px 以下は 2 列へ戻す（**上の 1 行が勝ちすぎるため**）。
 *
 * **@media は特異度を上げない。** style.css の
 * `@media (max-width:1023px) { .plan-grid--feature { repeat(2,1fr) } }` と
 * 上の規則は同じ特異度で、theme.css のほうがあとに読まれる。だから
 * **狭い画面でも 4 列のままになり、幅 700px でカードが 147px まで潰れた**
 * （2026-09-08 に headless Chrome で実測して気づいた）。
 *
 * **境目は style.css の 1023px ではなく 1079px。** 4 列が成り立つのは
 * コンテナが最大幅（--width-content: 1080px）に達しているときだけで、
 * そのとき 1 枚は (1040 - 24*3) / 4 = 242px。1024px の画面では
 * コンテナが 984px しか無く、4 列だと **228px** まで痩せる ——
 * style.css が「240px を切ると写真も文字も潰れる」と書いている線を割る。
 * **だから 1080px 未満では 4 列を諦めて 2 列にする**（2 段 × 2 枚）。
 *
 * 767px 以下に別の指定は要らない —— style.css はそこで .plan-grid だけを
 * 1 列にし、feature には触っていないので、この 2 列がそのまま続く。
 */
@media (max-width: 1079px) {
    .plan-grid--feature {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
 * **スマホで「お客様ログイン」をロゴの右に出す規則は、ここにあったが外した**
 * （2026-09-11 に入れて、同日に外した）。
 *
 * ログインのリンクを absolute にして .header__inner を基準に置き、横スクロール
 * する .nav の外（ロゴの右）へ出す作りだった。**Chrome では狙いどおりに出たが、
 * iPhone（Safari・Chrome・Firefox。どれも中身は WebKit）では、ロゴの右にも
 * メニューの右端にも出ず、ログインが消えた。** WebKit は、基準の箱が
 * スクロールする箱の外にあっても、absolute の子をスクロールする箱で
 * 切り取るらしい。**直す前（横にずらせば出る）より悪くなったので戻した。**
 *
 * > **横スクロールする箱の中身を、absolute で箱の外へ出さないこと。**
 * > 仕様の上では切り取られないが、iPhone では切り取られる。
 * > **見た目の確かめを Chrome だけで済ませないこと。**
 */

/**
 * 1024〜1079px では、メニューの左右の余白を詰める（2026-09-11）。
 *
 * **この幅では「お客様ログイン」が電話ボタンの下に潜っていた。**
 * PC の型に切り替わった直後で、メニューの 7 項目（628px）に対して
 * 置ける幅が 577px（1024px のとき）しか無く、.nav は overflow が
 * visible なので、はみ出したぶんが右の電話ボタンに重なる。
 * iPad の横向きがちょうど 1024px。
 *
 * 余白 11px → 7px で 7 項目 × 8px = 56px 縮み、1024px でも 5px 余る
 * （電話ボタンとの間は 18px）。**1080px で 628px が収まるのは、
 * コンテナが最大幅に達するため**（上の料金カードの 1079px と同じ理由）。
 */
@media (min-width: 1024px) and (max-width: 1079px) {
    .nav__link {
        padding-left: 7px;
        padding-right: 7px;
    }
}