/* ========================================================= 隱藏版日本 / Hidden Japan — base stylesheet 繁体字メイン。簡体字は で切替。 CJK はシステムフォント（Google Fonts不要＝CSP軽く・本土でも化けない） ========================================================= */ :root { --ink: #1c2530; --ink-soft: #4a586a; --paper: #fbfaf7; --card: #ffffff; --line: #e7e2d8; --brand: #b5312e; /* 朱・和の赤 */ --brand-deep: #8f2523; --accent: #1f6f6b; /* 深緑（自然・穴場の緑） */ --gold: #c8a24b; --shadow: 0 6px 24px rgba(28,37,48,.08); --radius: 14px; --wrap: 1120px; --font: "Hiragino Sans", "PingFang TC", "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans CJK TC", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif; /* 見出し用の明朝（雑誌の品）。Latinはセリフ、CJKは各OSの明朝にフォールバック＝Google Fonts不要 */ --font-serif: Georgia, "Times New Roman", "Hiragino Mincho ProN", "Noto Serif CJK TC", "Noto Serif TC", "Source Han Serif TC", "Songti TC", "MingLiU", "SimSun", serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.75; font-size: 16px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand-deep); text-decoration: none; } a:hover { text-decoration: underline; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; } /* --- 言語切替：既定=繁体字(hant)。lang-hans=簡体字 / lang-en=英語 --- */ .hans, .en { display: none; } html.lang-hans .hant { display: none; } html.lang-hans .hans { display: inline; } html.lang-en .hant { display: none; } html.lang-en .en { display: inline; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,250,247,.92); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 20px; height: 64px; } .brand { display: flex; align-items: baseline; gap: 8px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; flex-shrink: 0; } .brand .zh { font-size: 20px; color: var(--brand-deep); } .brand .latin { font-size: 12px; color: var(--ink-soft); letter-spacing: .18em; text-transform: uppercase; } .nav { margin-left: auto; display: flex; align-items: center; gap: 22px; } .nav a { color: var(--ink); font-size: 15px; font-weight: 600; } .nav a:hover { color: var(--brand); text-decoration: none; } .lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; font-size: 13px; font-weight: 700; background: var(--card); } .lang-toggle button { border: 0; background: transparent; padding: 6px 12px; cursor: pointer; color: var(--ink-soft); font-family: inherit; } .lang-toggle button.active { background: var(--brand); color: #fff; } .nav-toggle { display: none; } /* ---------- hero ---------- */ .hero { position: relative; color: #fff; text-align: left; padding: 120px 20px 128px; background: linear-gradient(90deg, rgba(16,24,22,.72) 0%, rgba(16,24,22,.42) 55%, rgba(16,24,22,.25) 100%), radial-gradient(140% 130% at 15% 0%, #3a6a66 0%, #22423f 55%, #14302c 100%); background-size: cover; background-position: center; overflow: hidden; } /* 将来：/img/hero.webp を入れたらここで front に重ねる */ .hero .wrap { position: relative; z-index: 1; } .hero h1 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(30px, 5.4vw, 54px); margin: 0 0 18px; letter-spacing: .01em; line-height: 1.32; max-width: 15em; } .hero p { font-size: clamp(15px, 2.4vw, 19px); margin: 0; max-width: 34em; color: #eef1ec; } .hero .kicker { display:inline-block; font-size:12px; letter-spacing:.26em; color: var(--gold); margin-bottom:20px; text-transform: uppercase; } .hero-cta { margin-top: 32px; display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; } /* --- 見出しは明朝（エディトリアル） --- */ .hero h1, .section-head h2, .article h1, .article h2, .featured .ft-title { font-family: var(--font-serif); } .btn { display: inline-block; padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 15px; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-deep); text-decoration: none; } .btn-ghost { border: 1px solid rgba(255,255,255,.6); color: #fff; } .btn-ghost:hover { background: rgba(255,255,255,.12); text-decoration: none; } /* ---------- sections ---------- */ section { padding: 64px 0; } .section-head { text-align: left; margin-bottom: 32px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .section-head h2 { font-size: clamp(23px, 3.4vw, 32px); margin: 0; font-weight: 800; } .section-head h2::before { content: ""; display: inline-block; width: 26px; height: 3px; background: var(--brand); vertical-align: middle; margin-right: 12px; } .section-head p { color: var(--ink-soft); margin: 0; font-size: 15px; } /* ---------- spot cards ---------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(28,37,48,.14); } .card a { color: inherit; } .card .thumb { aspect-ratio: 3/2; background: linear-gradient(135deg,#dfe9e7,#c7d6d3); position: relative; } .card .thumb .tag { position: absolute; left: 12px; top: 12px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; letter-spacing:.04em; } .card .body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .card h3 { margin: 0; font-size: 18px; } .card .region { font-size: 13px; color: var(--accent); font-weight: 700; } .card p { margin: 0; font-size: 14px; color: var(--ink-soft); } /* ---------- featured pillar (本週特寫) ---------- */ .featured { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .featured .ft-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--card); } .featured .ft-media { min-height: 340px; background: linear-gradient(135deg, #274a46, #16302c); position: relative; } .featured .ft-media .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); font-size: 13px; letter-spacing: .1em; } .featured .ft-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .featured .ft-label { font-size: 12px; letter-spacing: .22em; color: var(--brand); font-weight: 800; text-transform: uppercase; } .featured .ft-title { font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; margin: 0; line-height: 1.4; } .featured .ft-title a { color: var(--ink); } .featured .ft-title a:hover { color: var(--brand-deep); text-decoration: none; } .featured .ft-excerpt { color: var(--ink-soft); margin: 0; font-size: 16px; } .featured .ft-more { font-weight: 700; color: var(--brand-deep); font-size: 15px; } /* ---------- RED風 秘境カード ---------- */ .spot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .spot-card { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #16302c; } .spot-card a { display: block; color: #fff; } .spot-card .ph { aspect-ratio: 3/4; position: relative; background: linear-gradient(160deg, #3a6a66, #1c3d39 70%); } .spot-card:nth-child(3n+2) .ph { background: linear-gradient(160deg, #6a4b3a, #3d271c 70%); } .spot-card:nth-child(3n) .ph { background: linear-gradient(160deg, #3a4d6a, #1c2a3d 70%); } .spot-card .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; gap: 6px; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.62) 100%); } .spot-card .region { font-size: 12px; font-weight: 700; color: #ffd9a0; letter-spacing: .04em; } .spot-card h3 { margin: 0; font-size: 19px; color: #fff; } .spot-card .tag { position: absolute; left: 14px; top: 14px; background: rgba(181,49,46,.95); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; } .spot-card:hover { transform: translateY(-3px); transition: transform .18s ease; } /* ---------- 地域から探す ---------- */ .regions { text-align: left; } .region-chips { display: flex; flex-wrap: wrap; gap: 12px; } .region-chips a { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 10px 20px; font-size: 15px; font-weight: 600; color: var(--ink); } .region-chips a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; background: #fff; } /* ---------- active nav ---------- */ .nav a.navlink.active { color: var(--brand); } /* ---------- footer tagline（CSP厳格：inline style禁止のためクラス化） ---------- */ .foot-tag { max-width: 340px; font-size: 14px; color: #9fb0a9; margin: 0; } /* ---------- section intro header（一覧ページ用） ---------- */ .page-head { background: linear-gradient(120deg, #22423f, #16302c); color: #fff; padding: 72px 20px 60px; } .page-head .kicker { display: inline-block; font-size: 12px; letter-spacing: .24em; color: var(--gold); text-transform: uppercase; margin-bottom: 14px; } .page-head h1 { font-family: var(--font-serif); font-weight: 800; font-size: clamp(26px, 4.4vw, 40px); margin: 0 0 12px; line-height: 1.35; } .page-head p { margin: 0; color: #e7ece9; max-width: 42em; font-size: 16px; } /* ---------- article back button（inline style置換） ---------- */ .article .back { margin-top: 40px; } /* ---------- culture / guide サムネのバリエーション ---------- */ .card .thumb.c-culture { background: linear-gradient(135deg, #6a4b3a, #3d271c); } .card .thumb.c-guide { background: linear-gradient(135deg, #3a4d6a, #1c2a3d); } /* ---------- contact ---------- */ .contact-links { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; } .contact-links a { font-weight: 600; } /* ---------- feature strip ---------- */ .features { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .features .grid { grid-template-columns: repeat(3, 1fr); } .feature { text-align: center; padding: 8px; } .feature .ico { font-size: 30px; margin-bottom: 10px; } .feature h3 { margin: 0 0 6px; font-size: 17px; } .feature p { margin: 0; font-size: 14px; color: var(--ink-soft); } /* ---------- footer ---------- */ .site-footer { background: #16211d; color: #cdd6d1; padding: 48px 0 34px; margin-top: 20px; } .site-footer .cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; } .site-footer h4 { color: #fff; font-size: 15px; margin: 0 0 12px; } .site-footer a { color: #cdd6d1; font-size: 14px; } .site-footer a:hover { color: #fff; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .site-footer .copy { margin-top: 32px; font-size: 12px; color: #8ea099; text-align: center; } /* ---------- article (spot page) ---------- */ .article { max-width: 780px; margin: 0 auto; padding: 40px 20px 20px; } .article .crumbs { font-size: 13px; color: var(--ink-soft); margin-bottom: 18px; } .article h1 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 8px; line-height: 1.35; } .article .meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--accent); font-weight: 700; margin-bottom: 24px; } .article .lead { font-size: 18px; color: var(--ink-soft); } .article h2 { font-size: 22px; margin: 40px 0 12px; padding-left: 12px; border-left: 4px solid var(--brand); } .article p { margin: 0 0 16px; } .infobox { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 28px 0; box-shadow: var(--shadow); } .infobox h3 { margin: 0 0 12px; font-size: 16px; } .infobox dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14px; } .infobox dt { font-weight: 700; color: var(--ink-soft); } .infobox dd { margin: 0; } .tip { background: #f4f8f7; border-left: 4px solid var(--accent); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 20px 0; font-size: 15px; } /* ---------- responsive ---------- */ @media (max-width: 860px) { .grid, .features .grid { grid-template-columns: 1fr; } .featured .ft-card { grid-template-columns: 1fr; } .featured .ft-media { min-height: 200px; } .featured .ft-body { padding: 28px 24px; } .spot-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .hero { padding: 84px 20px 88px; } .nav { gap: 14px; } .nav a.navlink { display: none; } .brand .latin { display: none; } /* 英語モードは中国語名が消えるので、英字ブランドは残す */ html.lang-en .brand .latin { display: inline; } section { padding: 48px 0; } }