/* =================================================================== Refund Japan — 繁體中文（台灣）版 專用樣式 ・他言語版とは共有しない。この dist/tw だけが読む。 ・設計の根拠は docs/specs/2026-08-24_refund-japan_tw_サイト設計.md （樂吃購！日本 / MATCHA繁中 / 易遊網 / Funliday / CashFeel / 凱的日本食尚日記 の実物から採寸した値だけを使う） ・書き方の制約（scripts/verify_site.py が機械で検査する）: - メディアクエリは max-width のみ・スペースなし `@media(max-width:NNNpx){` - トップレベルで 340px 以上の width / grid-template-columns を書かない - prefers-color-scheme を書かない =================================================================== */ :root{ /* --- 文字色・罫線 ------------------------------------------------ */ --ink:#1b1e26; /* 本文 */ --ink2:#4d5464; /* 補足 */ --ink3:#767d8c; /* 更新日・出典など */ --line:#e2e5ec; --line2:#eef0f5; --bg:#ffffff; --soft:#f6f7fa; /* 面の下地 */ --soft2:#eff1f6; /* --- 朱（アクセント）------------------------------------------------ 台湾の日本旅行メディアの第一色は朱〜橙赤（樂吃購！日本 = #de481d 実測）。 公告・印章の色でもあり、翻訳臭のする青いフィンテック配色を避ける。 */ --red:#c8402a; --red2:#a8321f; --redbg:#fdf3f1; /* --- 藍（制度・官方）---------------------------------------------- */ --navy:#1b3b73; --navybg:#f1f4fa; /* --- 金（金額）---------------------------------------------------- */ --gold:#9a6a10; --goldbg:#fdf7e9; /* --- 緑（Green 判定・確定した事実）--------------------------------- */ --green:#1a7048; --greenbg:#f0f8f3; --radius:10px; --shadow:0 1px 2px rgba(27,30,38,.06),0 8px 24px rgba(27,30,38,.05); /* 台湾のメディアは PingFang TC / 微軟正黑體 / Noto Sans TC の システムフォントで本文を組む（実測: 樂吃購 kaikk とも Web フォント不使用）。 ダウンロード0バイトで最速・字形も現地の見慣れた形になる。 */ --f:"PingFang TC","PingFang SC","Microsoft JhengHei","微軟正黑體", "Noto Sans TC","Heiti TC","Apple LiGothic Medium",system-ui,sans-serif; --fnum:"Helvetica Neue",Arial,var(--f); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--f); font-size:17px;line-height:1.9; letter-spacing:0; /* 中文は字間を空けない */ word-break:normal;overflow-wrap:anywhere; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} svg{max-width:100%;height:auto} a{color:var(--navy);text-underline-offset:3px} a:hover{color:var(--red)} b,strong{font-weight:700} hr{border:0;border-top:1px solid var(--line);margin:28px 0} .wrap{max-width:1140px;margin:0 auto;padding:0 16px} .narrow{max-width:820px;margin:0 auto} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ================================================================= 1. 更新條（最上部） 台湾の記事は「最後更新」を最初に出す（易遊網・CashFeel・凱 で実測）。 ================================================================= */ .top{background:var(--navy);color:#dfe6f3;font-size:13px;line-height:1.6} .top__in{max-width:1140px;margin:0 auto;padding:7px 16px; display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center} .top__in b{color:#fff;font-weight:700;font-family:var(--fnum)} .top__x{margin-inline-start:auto} /* ================================================================= 2. ヘッダ（ロゴ＋言語） ================================================================= */ .mast{background:#fff;border-bottom:1px solid var(--line)} .mast__in{max-width:1140px;margin:0 auto;padding:12px 16px; display:flex;align-items:center;gap:16px} .logo{display:inline-flex;align-items:center;gap:0; font-size:21px;font-weight:700;color:var(--ink);text-decoration:none; letter-spacing:.01em;flex:0 0 auto} /* ロゴのキャラクターは4サイト共通（dist/_brand/logo.svg のコピー）。 ⛔ 国旗を使わない。形・色・表情は変えない。大きさと余白だけがこちらの自由。 */ .logo img{width:36px;height:36px;margin-inline-end:9px;align-self:center;flex:0 0 auto} .logo b{color:var(--red);font-weight:700} .logo span{color:var(--ink3);font-size:13px;font-weight:400;margin-inline-start:9px} nav.lang{margin-inline-start:auto;display:flex;gap:2px;flex-wrap:wrap} nav.lang a{font-size:13px;padding:4px 9px;border-radius:6px;color:var(--ink2); text-decoration:none;white-space:nowrap} nav.lang a:hover{background:var(--soft2);color:var(--ink)} nav.lang a[aria-current]{background:var(--ink);color:#fff} /* ================================================================= 3. 二段ナビ（台湾式） 1段目＝「在哪裡買」場所の軸／2段目＝「主題」 台湾の日本旅行メディアは必ず〈場所の軸〉→〈主題の軸〉の2段で並ぶ （樂吃購: 11地方×9主題 ／ MATCHA: 8県+全區域×4 ／ Funliday: 地方×5）。 ================================================================= */ .navp{background:var(--red);} .navp__in{max-width:1140px;margin:0 auto;padding:0 16px; display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none} .navp__in::-webkit-scrollbar{display:none} .navp a{color:#fff;text-decoration:none;font-size:14.5px;font-weight:600; padding:10px 15px;white-space:nowrap;border-inline-end:1px solid rgba(255,255,255,.22)} .navp a:first-child{padding-inline-start:0} .navp a:hover{background:var(--red2);color:#fff} .navp__k{color:#ffd9d1;font-size:12.5px;font-weight:400;padding:10px 12px 10px 0; white-space:nowrap;flex:0 0 auto} .navt{background:#fff;border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:30} .navt__in{max-width:1140px;margin:0 auto;padding:0 16px; display:flex;gap:0;overflow-x:auto;scrollbar-width:none;align-items:stretch} .navt__in::-webkit-scrollbar{display:none} .navt a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600; padding:11px 14px;white-space:nowrap;border-bottom:3px solid transparent; margin-bottom:-2px} .navt a:hover{color:var(--red);border-bottom-color:var(--red)} .navt a[aria-current]{color:var(--red);border-bottom-color:var(--red)} .navt__c{margin-inline-start:auto;display:flex;align-items:center;padding:6px 0 6px 12px; flex:0 0 auto} .navt__c a{background:var(--ink);color:#fff;border-radius:6px;padding:6px 14px; font-size:14px;border-bottom:0;margin:0} .navt__c a:hover{background:var(--red);color:#fff;border-bottom:0} /* ================================================================= 4. パンくず ================================================================= */ .crumb{font-size:13px;color:var(--ink3);padding:12px 0 0} .crumb a{color:var(--ink3);text-decoration:none} .crumb a:hover{color:var(--red);text-decoration:underline} .crumb span{margin:0 7px;color:#c3c8d4} /* ================================================================= 5. 見出し 台湾の記事見出しは「一、」「步驟1」と番号が本文に書いてある。 CSSカウンタではなくHTMLに文字で書く（AIが本文から抜けるように）。 ▍ は易遊網が使っている見出し記号。ここでは左の朱い縦棒で表す。 ================================================================= */ h1,h2,h3,h4{line-height:1.45;letter-spacing:0;margin:0} [id]{scroll-margin-top:64px} h1{font-size:31px;font-weight:700;margin:8px 0 0} h2{font-size:23px;font-weight:700;margin:52px 0 18px; padding:6px 0 6px 14px;border-inline-start:5px solid var(--red); background:linear-gradient(90deg,var(--redbg),rgba(255,255,255,0))} h3{font-size:19px;font-weight:700;margin:34px 0 12px;color:var(--ink); padding-bottom:7px;border-bottom:1px dashed var(--line)} h4{font-size:17px;font-weight:700;margin:22px 0 8px} h2 .n,h3 .n{color:var(--red);font-family:var(--fnum);font-weight:700} p{margin:0 0 17px} .lede{font-size:17.5px;color:var(--ink2);margin:16px 0 0;line-height:1.95} .lede b{color:var(--ink)} /* 記事・ハブ本文の共通コンテナ */ main{display:block;min-height:50vh} .page{padding:0 0 8px} .meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center; font-size:13px;color:var(--ink3);margin:14px 0 0} .meta .tag{background:var(--ink);color:#fff;border-radius:4px;padding:2px 9px; font-size:12px;font-weight:600} .meta .tag--r{background:var(--red)} .meta time{font-family:var(--fnum)} /* ================================================================= 6. 目次（台湾の記事は必ず目次ボックスがある） ================================================================= */ .toc{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius); padding:16px 18px;margin:26px 0} .toc__t{font-size:15px;font-weight:700;margin:0 0 8px;color:var(--ink)} .toc ol{margin:0;padding-inline-start:0;list-style:none;counter-reset:t} .toc li{counter-increment:t;font-size:15px;line-height:1.75;padding:3px 0} .toc li::before{content:counter(t,cjk-ideographic) "、";color:var(--red); font-weight:700;margin-inline-end:4px} .toc a{color:var(--ink);text-decoration:none} .toc a:hover{color:var(--red);text-decoration:underline} /* ================================================================= 7. 表（台湾の記事の主役） 舊制／新制の比較表は台湾メディアで最も引用される部品。 実測: 樂吃購は7列・CashFeelは3枚・易遊網/MATCHA/Funlidayも必ず持つ。 ================================================================= */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0; border:1px solid var(--line);border-radius:var(--radius)} table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.7; background:#fff;min-width:520px} caption{caption-side:top;text-align:start;font-size:13px;color:var(--ink3); padding:10px 14px 0} th,td{border-bottom:1px solid var(--line2);padding:11px 14px; text-align:start;vertical-align:top} thead th{background:var(--soft2);font-weight:700;color:var(--ink); border-bottom:2px solid var(--line);white-space:nowrap} tbody th{background:var(--soft);font-weight:700;white-space:nowrap;width:auto} tbody tr:last-child th,tbody tr:last-child td{border-bottom:0} td.old{color:var(--ink3)} td.new{background:var(--redbg);font-weight:600} thead th.new{background:var(--red);color:#fff;border-bottom-color:var(--red2)} thead th.old{color:var(--ink3)} .num{font-family:var(--fnum);font-weight:700;white-space:nowrap} /* ================================================================= 8. 注意ボックス（台湾の記事は「注意」「重點」を箱で囲む） ================================================================= */ .box{border-radius:var(--radius);padding:15px 18px;margin:22px 0;font-size:16px; line-height:1.85} .box p:last-child{margin-bottom:0} .box__t{font-weight:700;font-size:15px;margin:0 0 6px;display:block} .box--warn{background:var(--redbg);border:1px solid #f0cec6} .box--warn .box__t{color:var(--red2)} .box--na{background:var(--goldbg);border:1px solid #ecdcb4} .box--na .box__t{color:var(--gold)} .box--ok{background:var(--greenbg);border:1px solid #cbe6d8} .box--ok .box__t{color:var(--green)} .box--info{background:var(--navybg);border:1px solid #d3ddef} .box--info .box__t{color:var(--navy)} /* 「官方尚未公布」の印。捏造しないことをデザインで示す */ .na{display:inline-block;background:var(--goldbg);color:var(--gold); border:1px solid #ecdcb4;border-radius:4px;padding:0 7px;font-size:13px; font-weight:700;white-space:nowrap} /* ================================================================= 9. リスト・步驟 ================================================================= */ .ul{margin:0 0 18px;padding-inline-start:0;list-style:none} .ul li{position:relative;padding-inline-start:20px;margin:0 0 9px} .ul li::before{content:"";position:absolute;inset-inline-start:4px;top:13px; width:6px;height:6px;background:var(--red);border-radius:50%} .steps{margin:24px 0;padding:0;list-style:none;counter-reset:s} .steps li{counter-increment:s;position:relative;padding:0 0 22px 46px; border-inline-start:2px solid var(--line);margin-inline-start:15px} .steps li:last-child{border-inline-start-color:transparent;padding-bottom:0} .steps li::before{content:counter(s);position:absolute;inset-inline-start:-16px;top:0; width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff; font-family:var(--fnum);font-weight:700;font-size:15px; display:flex;align-items:center;justify-content:center} .steps b{display:block;font-size:17px;margin:2px 0 4px} .steps p{margin:0;font-size:15.5px;color:var(--ink2);line-height:1.8} /* ================================================================= 10. カード（台湾のトップは細かいカードが敷き詰められている） 実測: 樂吃購トップの画像 185枚・MATCHA 101枚 ================================================================= */ .sec{margin:56px 0 0} .sec__h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; border-bottom:2px solid var(--ink);padding-bottom:9px;margin-bottom:20px} .sec__h h2{margin:0;padding:0;border:0;background:none;font-size:22px} .sec__h .en{font-size:12px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase} .sec__h .all{margin-inline-start:auto;font-size:14px;font-weight:600; color:var(--navy);text-decoration:none;white-space:nowrap} .sec__h .all:hover{color:var(--red)} .sec__lede{margin:-6px 0 20px;color:var(--ink2);font-size:16px} .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .grid--2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .grid--4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} .card{display:block;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:15px 16px;text-decoration:none;color:var(--ink); transition:border-color .12s,box-shadow .12s} .card:hover{border-color:var(--red);box-shadow:var(--shadow);color:var(--ink)} .card__k{font-size:12px;font-weight:700;color:var(--red);display:block;margin-bottom:5px} .card__t{font-size:16.5px;font-weight:700;line-height:1.55;margin:0 0 6px;display:block} .card__p{font-size:14px;color:var(--ink2);line-height:1.75;margin:0} .card__f{font-size:12.5px;color:var(--ink3);margin:8px 0 0;font-family:var(--fnum)} /* 場所カード（藥妝店・機場）— 自作SVGアイコンつき */ .pcard{display:flex;gap:12px;align-items:flex-start;background:#fff; border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px; text-decoration:none;color:var(--ink)} .pcard:hover{border-color:var(--red);box-shadow:var(--shadow);color:var(--ink)} .pcard svg{flex:0 0 auto;width:34px;height:34px} .pcard b{display:block;font-size:16px;line-height:1.5} .pcard span{display:block;font-size:13.5px;color:var(--ink2);line-height:1.7;margin-top:2px} /* 直行入口（分類より上・3件） 分類を経由せず最も多い問いへ直接飛ばす。台湾での「最も多い問い」は PTT 日本旅遊板の実査で決めた（手續費／藥妝店／出境當天）。 */ .direct{margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line)} .direct__t{font-size:14px;font-weight:700;color:var(--ink3);margin:0 0 12px} .pcard--big{padding:18px 18px;align-items:center;gap:15px;background:var(--soft)} .pcard--big svg{width:52px;height:52px} .pcard--big b{font-size:17.5px;line-height:1.5} .pcard--big span span{font-size:14px} /* ================================================================= 11. 図解（自作SVG。写真はライセンスが明確なものが無いので使わない） ================================================================= */ .fig{margin:26px 0;border:1px solid var(--line);border-radius:var(--radius); background:#fff;overflow:hidden} .fig__b{padding:18px 16px;background:var(--soft)} .fig figcaption{font-size:13px;color:var(--ink3);padding:10px 16px; border-top:1px solid var(--line);background:#fff;line-height:1.7} .fig figcaption b{color:var(--ink2)} /* 図は横長版と縦積み版の2枚を持ち、画面幅で入れ替える。 台湾の読者の大半がスマートフォンで読むので、375px で字が読めない図は無価値。 JSは使わない（計算機以外でJSを読まない規約）。 */ .fig .v{display:none} /* ================================================================= 12. 計算機 ================================================================= */ .calc{border:2px solid var(--ink);border-radius:var(--radius);background:#fff; overflow:hidden;margin:26px 0} .calc__h{background:var(--ink);color:#fff;padding:12px 18px} .calc__t{font-size:17px;font-weight:700;margin:0} .calc__s{font-size:13.5px;color:#c9ced9;margin:2px 0 0} .calc__b{padding:18px} .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px; overflow:hidden;margin:0 0 14px} .seg button{appearance:none;border:0;background:#fff;color:var(--ink2); font-family:var(--f);font-size:14.5px;font-weight:600;padding:8px 20px;cursor:pointer} .seg button[aria-pressed="true"]{background:var(--ink);color:#fff} .lab{display:block;font-size:14px;color:var(--ink2);margin:0 0 6px} .inp{display:flex;align-items:center;border:2px solid var(--line); border-radius:8px;padding:0 14px;background:#fff} .inp:focus-within{border-color:var(--red)} .inp span{font-family:var(--fnum);font-size:19px;color:var(--ink3);margin-inline-end:6px} .inp input{border:0;outline:0;font-family:var(--fnum);font-size:24px;font-weight:700; padding:11px 0;width:100%;background:transparent;color:var(--ink)} .res{margin:18px 0 0;padding:16px 18px;background:var(--goldbg); border:1px solid #ecdcb4;border-radius:8px} .res__l{font-size:13.5px;color:var(--gold);font-weight:700;margin:0} .res__n{font-family:var(--fnum);font-size:38px;font-weight:700;color:var(--ink); margin:2px 0 4px;line-height:1.2} .res__x{font-size:13px;color:var(--ink2);margin:0;line-height:1.7} .res__w{display:none;font-size:13.5px;color:var(--red2);font-weight:700;margin:8px 0 0} .rows{margin:14px 0 0;border-top:1px solid var(--line)} .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0; border-bottom:1px solid var(--line2);font-size:14.5px} .row span{color:var(--ink2)} .row b{font-family:var(--fnum)} .row b.na{font-family:var(--f)} /* ================================================================= 13. FAQ（台湾の記事はQ1 Q2…と番号を振る） ================================================================= */ .faq{margin:24px 0;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative; font-size:16.5px;font-weight:700;line-height:1.65} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;inset-inline-end:8px;top:24px; width:9px;height:9px;border-inline-end:2px solid var(--red); border-bottom:2px solid var(--red);transform:rotate(45deg);transition:transform .15s} .faq details[open] summary::after{transform:rotate(-135deg)} .faq summary .q{color:var(--red);font-family:var(--fnum);margin-inline-end:8px} .faq .a{padding:0 0 16px;font-size:15.5px;color:var(--ink2);line-height:1.85} .faq .a p:last-child{margin-bottom:0} /* ================================================================= 14. 記事一覧（記事0本のときも「準備中」に見せない） ================================================================= */ /* 自動投稿が差し込む1行。