/* =================================================================== 金継ぎ 追補CSS — iryouhoujin.com 全ページ共通 本体のCSSはそのまま。このファイルを site.css の後に1枚足すだけで効く。 構成: A. 地とコントラスト（ヒーローの地の明示・LINE緑の濃度・薄い補足文字） B. 似て非なる色の統合（お問い合わせ節の淡青・特典ページの淡青） C. 文字サイズを役割ごとの段に統一（自動生成・下記） 本文 13 / 16 / 20.5 ・ 補足 13 ・ ボタン 14.4 / 18.6 その他 12.5 / 13.4 / 17 ・ h3 18.6 / 24 =================================================================== */ /* =================================================================== 金継ぎ 追補CSS — iryouhoujin.com（トップページ） 本体は無改変。このファイルを の最後に1枚足すだけで効きます。 直した原因は3つ: ① 低コントラスト（地の明示・LINE緑の濃度・補足文字の濃さ） ② 文字サイズの役割内の割れ（30段 → 役割ごとに1〜3段）＋極小文字42件 ③ 段落なし（別ファイル: 本文の段落分け） =================================================================== */ /* --- ① 地の明示 ----------------------------------------------------- ヒーローの濃紺は、文字の祖先ではなく兄弟レイヤー（.hero-media）が 描いている。そのため検査器も印刷も「白い地に白い文字」と読む。 .hero 自身に同じ濃紺を敷いておくと、見た目は1pxも変わらないまま （.hero-media と .hero::after が上に重なる）、地が真になる。 */ .hero{background-color:#16283a} /* LINE の緑（#06C755）は、白文字とのコントラスト比が2.26で 機械の床（4.5）には届かない。いったん濃い緑に寄せていたが、 LINE公式のブランド色そのもの（公式ボタンも白文字×#06C755）であり、 ひと目で「LINE」と分かることを優先する本人裁定（2026-08-29）により 上書きをやめ、site.css の元の色に戻した。 ＝この1点は「見送った警告」として診断書に残る。 */ /* 補足文字 #8D867B は白地で比3.6。既存の --ink-soft(#5b5751) へ寄せる。 */ .feature-priv{color:var(--ink-soft)} .updated{color:var(--ink-soft)} /* --- ② 文字サイズ 役割内の割れ --------------------------------------- 役割ごとの許容段数（本文3／補足2／ボタン2／その他3／h3 2）に収める。 寄せ先は現行の一番使われている値。12px未満は12px以上へ。 */ /* --- ③ 似て非なる色（お問い合わせ節の淡い青を1本に） ------------------- 紺地の上の補助文字が #E4EDF4 / #C7D8E5 / #CFE0ED / #D5E2EC の4色に 割れている。役割は同じ（紺地の補助文字）なので、すでに2箇所で使われて いる #D5E2EC に寄せる。節の地の色（生成り #F6F3EE・フッター #1A1A1A）は セクションの拍なので統合しない。 */ .contact .sec-head .ja{color:#ffffff} .contact .checklist li{color:#d5e2ec} .form label{color:#d5e2ec} .contact a{color:#d5e2ec} .copy{border-top-color:var(--ink)} /* =================================================================== 金継ぎ 追補CSS（第2便）— iryouhoujin.com /tokuten-checklist このページにしか無いセレクタ（.tokuten・.sd-*・.ck*）に限定。 直した原因は2つ: ① 文字サイズの役割内の割れ（本文8段→3段・ボタン6段→2段）＋極小文字2件 ② 似て非なる色（淡青4色を#C3D0DCへ・朱の変種を--shuへ） =================================================================== */ /* --- ① 文字サイズ ---------------------------------------------------- */ /* --- ② 似て非なる色 --------------------------------------------------- */ /* 紺地の淡い青系4色（#C8D6E2/#D5E2EC/#A9C8E0/#A9BCCB）を #C3D0DC に統一 */ .tokuten header.solid .gnav a{color:#c3d0dc} .tokuten .cta-box p{color:#c3d0dc} .tokuten .list-head a{color:#c3d0dc} .tokuten .ckonly{color:#c3d0dc} /* 朱の変種 #C1512F を既存の --shu(#A8412A) へ */ .tokuten .ckcat.on{background:var(--shu);border-color:var(--shu)} .tokuten .ckbar-fill{background:var(--shu)} /* パンくず区切りの生成り #CFC7BA を既存の #BDB8B0 へ */ .tokuten .crumbs > span{color:#bdb8b0} /* 回答ボタンの文字 #E8EEF4 は白へ（コントラストも上がる） */ .tokuten .sd-opt{color:#fff} /* 淡青の残り: カテゴリボタン・進捗表示・カテゴリタグも #C3D0DC へ */ .tokuten .ckcat{color:#c3d0dc} .tokuten .sd-prog{color:#c3d0dc} .tokuten .ckcat-tag{color:#c3d0dc} /* コピーライトの上罫線: 第1便で入れた var(--ink) はこの黒地では浮くので地に合わせる */ .tokuten .copy{border-top-color:#1a1a1a} /* --- C. 文字サイズ（役割別の段・自動生成） --- */ body .sec-head .en{font-size:13.4px} /* 13.1 → etc */ body .sec-head .ja{font-size:12.5px} /* 11.8 → etc */ body .gnav a{font-size:14.4px} /* 11.8 → btn */ body .gnav .gsub a{font-size:14.4px} /* 13.8 → btn */ body .head-cta{font-size:13px} /* 12.8 → body */ body .hero-media .ph span{font-size:12.5px} /* 10.6 → etc */ body .hero-kicker{font-size:13px} /* 11.8 → body */ body .hero p{font-size:16px} /* 15.5 → body */ body .hero-note{font-size:13px} /* 12.2 → body */ body .fig .en{font-size:12.5px} /* 10.2 → etc */ body .fig span.cap{font-size:13px} /* 12.6 → sub */ body .source{font-size:13px} /* 11.7 → sub */ body .worry li{font-size:16px} /* 15.2 → body */ body .worry li .wtag{font-size:13px} /* 10.6 → body */ body .card .no{font-size:12.5px} /* 10.6 → etc */ body .card p{font-size:16px} /* 14.7 → body */ body .card .more{font-size:13px} /* 13.4 → body */ body .chip{font-size:12.5px} /* 10.9 → etc */ body .gate .who-ja{font-size:13px} /* 13.1 → body */ body .gate h3{font-size:18.6px} /* 21.1 → h3 */ body .gate p{font-size:16px} /* 14.9 → body */ body .box p{font-size:16px} /* 15 → body */ body .checklist li{font-size:16px} /* 15 → body */ body .notelist li{font-size:16px} /* 14.7 → body */ body .voice{font-size:16px} /* 18.2 → body */ body .lead{font-size:16px} /* 15.7 → body */ body .spec-title{font-size:24px} /* 23.2 → h3 */ body table.spec-table{font-size:16px} /* 14.9 → body */ body table.spec-table td b{font-size:16px} /* 16.3 → body */ body table.spec-table td .sub{font-size:13.4px} /* 13.6 → etc */ body table.spec-table tr.total td b{font-size:20.5px} /* 24 → body */ body table.spec-table th{font-size:13px} /* 13.4 → body */ body .fmap-head h3{font-size:24px} /* 23.2 → h3 */ body .fauto .tag{font-size:12.5px} /* 10.6 → etc */ body .fauto p{font-size:13px} /* 14.4 → body */ body .fstep .fday{font-size:20.5px} /* 21.1 → body */ body .fstep .fday small{font-size:13px} /* 11.5 → sub */ body .fstep .ftitle{font-size:16px} /* 16.3 → body */ body .fstep .fdesc{font-size:13px} /* 13.8 → body */ body .fstep .fwho{font-size:13px} /* 10.9 → body */ body .fgoal h4{font-size:18.6px} /* 18.4 → h3 */ body .fgoal p{font-size:16px} /* 14.9 → body */ body table.price{font-size:16px} /* 14.9 → body */ body table.price td b{font-size:20.5px} /* 19.5 → body */ body table.price td .sub{font-size:13.4px} /* 13.6 → etc */ body .flow li::before{font-size:13px} /* 11.5 → body */ body .flow h3{font-size:18.6px} /* 16.8 → h3 */ body .flow p{font-size:16px} /* 14.6 → body */ body .prof-body p{font-size:16px} /* 15.2 → body */ body .prof-name{font-size:24px} /* 23.2 → h3 */ body .thumb{font-size:13px} /* 10.6 → body */ body .media h3{font-size:18.6px} /* 15 → h3 */ body .media time{font-size:13px} /* 11.5 → sub */ body .creed p{font-size:16px} /* 15.5 → body */ body .creed .creed-hit{font-size:20.5px} /* 19.8 → body */ body .creed h3{font-size:18.6px} /* 18.9 → h3 */ body .creed .creed-hit{font-size:16px} /* 17 → body */ body .stance .stance-cut p{font-size:16px} /* 15.5 → body */ body .stance .stance-lead{font-size:16px} /* 17.3 → body */ body .feature-note{font-size:13px} /* 12.5 → body */ body .feature-title{font-size:24px} /* 28 → h3 */ body .feature-lead{font-size:16px} /* 15.2 → body */ body .feature-priv{font-size:13px} /* 12.2 → body */ body .feature-title{font-size:18.6px} /* 20.8 → h3 */ body .ytfacade .ytcap{font-size:13px} /* 12.5 → body */ body .postlist a{font-size:14.4px} /* 15.4 → btn */ body .postlist time{font-size:13px} /* 11.8 → sub */ body summary{font-size:18.6px} /* 17 → btn */ body summary::after{font-size:13px} /* 14.1 → body */ body details p{font-size:16px} /* 14.7 → body */ body .form label{font-size:13px} /* 13.4 → sub */ body .form input,body .form select,body .form textarea{font-size:16px} /* 15 → body */ body .req{font-size:13px} /* 11.2 → sub */ body .rail a{font-size:14.4px} /* 12.5 → btn */ body .bottombar a{font-size:14.4px} /* 13.4 → btn */ body footer{font-size:13px} /* 13.6 → body */ body footer h3{font-size:18.6px} /* 17 → h3 */ body .copy{font-size:13px} /* 12 → body */ body .crumbs{font-size:14.4px} /* 12.2 → btn */ body .article-meta{font-size:13px} /* 12.8 → body */ body .article-body h3{font-size:18.6px} /* 18.2 → h3 */ body .toc-title{font-size:16px} /* 16.3 → body */ body .toc li{font-size:16px} /* 14.7 → body */ body .toc ol ol li{font-size:13px} /* 13.9 → body */ body .note .note-title{font-size:18.6px} /* 16.6 → h3 */ body .article-video .vcap{font-size:13px} /* 13.4 → body */ body .article-body table{font-size:16px} /* 14.7 → body */ body .article-body th,body .article-body td{font-size:13px} /* 14.4 → body */ body .cta-box h3{font-size:18.6px} /* 20.8 → h3 */ body .cta-box p{font-size:16px} /* 15 → body */ body .author-name{font-size:20.5px} /* 18.4 → body */ body .author-name small{font-size:13px} /* 10.9 → sub */ body .author p{font-size:13px} /* 14.1 → body */ body .author .links{font-size:13px} /* 13.3 → body */ body .related a{font-size:14.4px} /* 15 → btn */ body .related time{font-size:13px} /* 11.8 → sub */ body .list-head p{font-size:16px} /* 15.5 → body */ body .posts time{font-size:13px} /* 12.2 → sub */ body .posts p{font-size:13px} /* 14.4 → body */ body .empty{font-size:16px} /* 14.9 → body */ body .fold .fold-en{font-size:13px} /* 10.6 → body */ body .fold .fold-t{font-size:20.5px} /* 18.6 → body */ body .fold .fold-s{font-size:13px} /* 13.4 → body */ body .fold.sm .fold-t{font-size:16px} /* 16.3 → body */ body .drawer a{font-size:18.6px} /* 17 → btn */ body .drawer .cta a{font-size:14.4px} /* 15.2 → btn */ body .answer-h{font-size:13px} /* 10.6 → body */ body .answer dd{font-size:16px} /* 14.9 → body */ body .pagefaq summary{font-size:18.6px} /* 16.8 → btn */ body .pagefaq summary::after{font-size:13px} /* 14.4 → body */ body .pagefaq details p{font-size:16px} /* 14.9 → body */ body .updated{font-size:13px} /* 12.5 → body */ body table.spec-table tr.cond td b{font-size:16px} /* 17 → body */ body .movie h3{font-size:18.6px} /* 15.4 → h3 */ body .movie p{font-size:13px} /* 13.6 → body */ body .reco .rtitle{font-size:16px} /* 17.6 → body */ body .reco .rdesc{font-size:13px} /* 13.8 → body */ body .reco .rmore{font-size:13px} /* 13.4 → body */ body .ytsoon span{font-size:13.4px} /* 13.1 → etc */ body .listcount{font-size:13px} /* 12.5 → body */ body .tomovie{font-size:13px} /* 14.1 → body */ body .movie .mlink{font-size:13px} /* 13.1 → body */ body .kno{font-size:13px} /* 11.5 → body */ body .ksub{font-size:13px} /* 14.4 → body */ body .kdesc{font-size:13px} /* 14.1 → body */ body .kmore{font-size:13px} /* 13.4 → body */ body .ktitle{font-size:18.6px} /* 20.8 → h3 */ body table.spec-table.cmp th,body table.spec-table.cmp td{font-size:13px} /* 13.8 → body */ body .linefoot h3{font-size:18.6px} /* 17.6 → h3 */ body .linefoot p{font-size:13px} /* 14.4 → body */ body .linefoot-note{font-size:13px} /* 12.6 → body */ body .ckbar-num{font-size:13px} /* 13.8 → body */ body .ckreset{font-size:14.4px} /* 12.2 → btn */ body .ckcat{font-size:14.4px} /* 12.8 → btn */ body .ckonly{font-size:13px} /* 12.8 → body */ body .cktitle{font-size:16px} /* 16.3 → body */ body .ckdesc{font-size:13px} /* 14.1 → body */ body .ckcare{font-size:13px} /* 13.4 → body */ body .ckcare span{font-size:12.5px} /* 10.9 → etc */ body .ckread{font-size:13px} /* 13.4 → body */ body .ckmembers{font-size:13px} /* 13.6 → body */ body .sd-lead{font-size:16px} /* 15 → body */ body .sd-prog{font-size:13px} /* 11.8 → body */ body .sd-opt{font-size:14.4px} /* 16 → btn */ body .sd-back{font-size:13px} /* 12.8 → body */ body .sd-skip{font-size:13px} /* 13.1 → body */ body .sd-note{font-size:13px} /* 14.4 → body */ body .sd-cat{font-size:13px} /* 10.6 → body */ body .sd-t{font-size:16px} /* 15.2 → body */ body .sd-rec a{font-size:14.4px} /* 13.1 → btn */ body .sd-unk-h{font-size:16px} /* 15.2 → body */ body .sd-unk li{font-size:13px} /* 14.1 → body */ body .sd-unk p{font-size:13px} /* 14.1 → body */ body .sd-more{font-size:13px} /* 13.8 → body */ body .sd-q{font-size:16px} /* 17.9 → body */ body .sd-hero-lead{font-size:16px} /* 15.2 → body */ body .sd-hero-list li{font-size:16px} /* 14.9 → body */ body .sd-btn-main{font-size:14.4px} /* 16.3 → btn */ body .sd-hero-note{font-size:13px} /* 13.1 → body */ body .relt{font-size:14.4px} /* 14.7 → btn */ body .hero-id{font-size:16px} /* 15.2 → body */ body .hero-id{font-size:13px} /* 13.8 → body */ body .sd-redo,body .sd-showall{font-size:13px} /* 14.1 → body */ body .sd-skip button{font-size:14.4px} /* 13.1 → btn */ body .sd-x{font-size:13px} /* 10.6 → body */ body .sd-gain .sd-t{font-size:16px} /* 15 → body */ body .sd-gain a{font-size:14.4px} /* 13.1 → btn */ body .kt-kicker{font-size:13px} /* 11.5 → body */ body .kt-lead{font-size:16px} /* 14.9 → body */ body .kt-item .q{font-size:16px} /* 15 → body */ body .kt-item .q .no{font-size:12.5px} /* 11.2 → etc */ body .kt-btn{font-size:14.4px} /* 14.1 → btn */ body .kt-verdict{font-size:18.6px} /* 20.8 → h3 */ body .kt-said{font-size:16px} /* 14.9 → body */ body .kt-diff .t{font-size:13px} /* 14.4 → body */ body .kt-diff .a{font-size:14.4px} /* 15 → btn */ body .kt-cta a{font-size:14.4px} /* 14.9 → btn */ body .kt-reset{font-size:13px} /* 13.4 → body */ body table.spec-table.cmp th,body table.spec-table.cmp td{font-size:16px} /* 14.7 → body */ body table.spec-table.cmp td:first-child{font-size:16px} /* 15.7 → body */ body table.spec-table.cmp td:not(:first-child)::before{font-size:13px} /* 11.5 → body */ body .scroll-hint{font-size:13px} /* 12.5 → body */ body .zukai figcaption{font-size:13px} /* 12.8 → sub */ /* --- style属性の直書き（CSSでは詳細度が届かないぶんだけ） --- */ body .list-head p[style],body .wrap p[style*="font-size"]{font-size:13px !important} /* --- D. 生成分の取りこぼし（役割の判定が機械では割れたもの） --- */ /* 役割「ボタン」→ 14.4 / 18.6 */ body .gnav a i{font-size:14.4px} body .head-cta{font-size:14.4px} body .reco .rtitle{font-size:18.6px} /* 役割「その他」→ 12.5 / 13.4 / 17 */ body .gate .who{font-size:12.5px} body .card .more{font-size:13.4px} body .fold .fold-t,body .fold.sm .fold-t{font-size:17px} body summary,body .pagefaq summary,body details.adv summary{font-size:17px} body .fstep .fday{font-size:17px} body .fmap-head .lede{font-size:13.4px} body .fstep .fwho{font-size:12.5px} body .sd-hero .k,body .k{font-size:12.5px} body #mochibunWarn{font-size:13.4px} body .sub-head{font-size:13.4px} body #y5{font-size:17px} /* 役割「本文」→ 13 / 16 / 20.5 */ body .kt-item .q .no,body .card .no{font-size:13px} body #ktRemain{font-size:13px} body table.spec-table.cmp .cnote{font-size:13px} body .box p span,body div.box > p > span{font-size:16px} body .role{font-size:13px} body .work .yr,body .yr{font-size:16px} body .qual dt,body .qual dd{font-size:16px} body .work ul li{font-size:16px} body .txt{font-size:16px} body .page-kicker{font-size:16px} body .say{font-size:20.5px} body .sec-label,body td.sec-label{font-size:13px} body #headline .cap{font-size:13px} body #hSub{font-size:13px} body #tbody tr th{font-size:16px} body tr.total th{font-size:16px} /* 役割「補足」→ 13 */ body .hint{font-size:13px} body .lbl{font-size:13px} body #hNum small{font-size:13px} /* --- E. 残りの仕上げ（komon・simulation ほか） --- */ /* 文字サイズ: 表の見出し・セルを本文の段へ */ body tr th span,body tr > th > span{font-size:13px} body .sub,body span.sub{font-size:13px} body thead tr th{font-size:13px} body #tbody tr td{font-size:16px} body tr.total td{font-size:16px} body .hint{font-size:13px} body .lbl{font-size:13px} body .sub-head{font-size:13.4px} /* 似て非なる色 表の地の白系4種（#F4F1EA / #FAF6F0 / #E8EDF2 / #F6F3EE）は役割が同じ 「表・囲みの地」。生成りの --paper に1本化する。 節の地（フッター #1A1A1A）はセクションの拍なので触らない。 */ body table.spec-table tbody tr td,body table.price tbody tr td,body tr.cond td{background-color:var(--paper)} /* 表の見出し地の生成り2種（#EEE8DE / #E7DDD0）を --line に */ body table.spec-table tbody tr th,body tr.fee th,body tr.cond th,body table.price th{background-color:var(--line)} /* 淡青3種（#D5E2EC / #DBE6EF / #CFE0ED）を #C3D0DC に */ body .cta-box p,body .cta-box p strong{color:#c3d0dc} body .fauto p{color:#c3d0dc} body #hSub{color:#c3d0dc} /* 罫線の生成り #CFC7BA を #BDB8B0 に */ body .fbar,body .pagefaq details,body #uri,body #keihi{border-color:#bdb8b0} /* 藍の変種 #1C3F5E→#132D44 は同じ「濃い藍」の役割 */ body .sub a,body span.sub > a{color:var(--ai-deep)} /* コピーライトの薄墨 #89847C を #8D867B に */ body .copy{color:#8d867b} /* --- F. 表の地の統合（正確なセレクタで） --- */ body table.spec-table tr.fee th{background:var(--line)} body table.spec-table tr.cond th{background:var(--line)} body table.spec-table tr.cond td{background:var(--paper)} body table.spec-table.cmp th:last-child{background:var(--line)} body table.spec-table.cmp td:last-child{background:var(--paper)} /* 紺地の上の淡い文字 #A9C8E0 / #E8EDF2 を #C3D0DC に寄せる（役割は同じ補助文字） */ body .kt-q .no,body .kt-said,body .kt-score span,body .kt-diff .t,body .kt-cta .s,body .kt-note{color:#c3d0dc} body .sd-note a,body .sd-cat,body .sd-rec a,body .sd-more,body .sd-gain a{color:#c3d0dc} body .hero-kicker{color:#c3d0dc} /* --- G. シミュレーター（assets/sim.css）側の段合わせ --- */ body .f > span.lbl{font-size:13px} body .f > span.hint{font-size:13px} body table.cmp thead th{font-size:13px} body .years .k{font-size:12.5px} body .years .v{font-size:17px} body .sub-head{font-size:13.4px} body .page-kicker{font-size:16px} /* --- H. komon の残り（紺地の補助文字と罫線） --- */ body .kt-item .q{color:#c3d0dc} body .kt-item .q .no{color:#c3d0dc;border-color:#c3d0dc} body .fstep .fbar{background:#bdb8b0} body .fstep .fwho{color:var(--ink-soft);border-color:#bdb8b0} /* --- I. 本文の段の詰め（.sub と表の見出し内 span を13pxの段へ） --- */ body table.spec-table td .sub,body table.price td .sub{font-size:13px} body table.spec-table th span,body table.price th span{font-size:13px} /* --- J. 罫線の生成りをもう一段そろえる --- */ body .wrap details,body details{border-color:#bdb8b0} body .form p,body .form p strong{color:#d5e2ec} /* --- K. komon の最後の詰め --- */ body #ktRemain{color:#c3d0dc} body .crumbs span{color:var(--ink-soft)} body .pagefaq details,body .pagefaq > details{border-color:#bdb8b0} body table.spec-table tbody tr td,body table.spec-table tr.cond td,body table.spec-table tr.fee td{background:var(--paper)} /* --- L. 出典・注記の薄墨を床まで（白地で比3.6→7.2） --- */ body .source,body .source strong{color:var(--ink-soft)} /* =================================================================== M. ヒーローの高さ（見立て 問い6「間は持つか」） 最初の1画面に「見出し → 名前 → 2つの入口」までを収め、 下に次の節（2つの入口）の頭が覗く高さにする。 HTMLのコメントにある作者の設計意図（説明文はスクロールしてから出す） をそのまま形にしたもの。写真は入れない。 =================================================================== */ body .hero{min-height:auto} body .hero .wrap{padding-top:104px;padding-bottom:44px} body .hero h1{font-size:2.6rem;line-height:1.45;margin:0 0 20px} body .hero-id{margin-bottom:22px} body .hero-more{margin-top:34px} @media(max-width:640px){ body .hero .wrap{padding-top:88px} body .hero h1{font-size:1.85rem} } /* --- N. 段の最後の詰め --- */ body .reco .rdesc{font-size:14.4px} body .card .no{font-size:12.5px} /* --- O. スマホのヒーロー上部の余白（本人指摘 2026-08-27／2026-09-01 に調整） 上の余白が二重（.wrap 88px ＋ .hero-first 100px ＝ 188px）だったので 一本化した。当初は96pxまで詰めたが、固定ヘッダー（71px）との隙間が 25pxしかなく、ブラウザがスクロール位置を復元して開いたときに 見出しの1〜2行目がヘッダーの裏に隠れた（本人指摘 2026-09-01）。 130pxにして隙間を59px確保し、多少ずれても隠れないようにする。 */ @media(max-width:640px){ body .hero .wrap{padding-top:0} body .hero-first{padding-top:130px} } /* --- P. スマホのヒーローを画面いっぱいの紺にする（本人指摘 2026-08-27） 次の節の生成りが下端に細く覗くと、見切れたように見えて落ち着かない。 ヒーローを表示領域いっぱいまで伸ばし、紺で一枚に見せる。 svh＝ブラウザの上下バーが出ている時の実際の高さ（iPhone Safari の実寸）。 非対応ブラウザ向けに vh を先に置いて上書きする。 */ @media(max-width:640px){ body .hero{min-height:100vh;min-height:100svh} }