/* ===================================================== 04_en.css — English pages only しゅうこ音楽ぶろぐ 英語版用の上書きCSS 読み込み順：01_base → 02_layout → 03_components → 04_en （英語ページのでのみ、4枚目として読み込む） ----------------------------------------------------- 方針：ブランド（ティール×クリーム×角丸）は残し、 　　　装飾を引き算して英語圏の読者に馴染む見た目にする ===================================================== */ /* ① 英語用フォント（Lora=見出し / Source Sans 3=本文） Jost（英字ラベル）は02_layout.cssで読み込み済み */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap'); /* ===================================================== 基本タイポグラフィ ===================================================== */ body { font-family: 'Source Sans 3', 'Zen Kaku Gothic New', sans-serif; } .post-content { font-size: 17.5px; line-height: 1.65; /* 日本語の1.8 → 英語向けに詰める */ } .post-content p { margin-bottom: 1.5rem; /* 段落間もやや詰める */ } /* リンク：色＋下線（英語圏はリンクの下線が標準的で信頼感につながる） */ .post-content a { color: #00838f; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .post-content a:hover { color: #1a3c40; } /* ===================================================== 見出し：装飾の引き算 ===================================================== */ /* h1：セリフ体（Lora）で editorial に */ .page-title, .post-content h1.page-title { font-family: 'Lora', 'Shippori Mincho', serif; font-weight: 600; font-size: 2.1rem; line-height: 1.3; letter-spacing: 0; color: #1a3c40; } /* h2：水色ボックスをやめて「文字＋短いティールの線」だけに */ .section-title, .post-content h2.section-title { font-family: 'Lora', 'Shippori Mincho', serif; font-weight: 600; background: none; border-left: none; border-radius: 0; padding: 0 0 14px 0; margin: 64px 0 26px; font-size: 1.6rem; color: #1a3c40; position: relative; } .section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: #00838f; border-radius: 2px; } /* h3：下線を外し、セリフ体の太字だけで階層を伝える */ .post-content h3, .post-content h3.section-subtitle { font-family: 'Lora', 'Shippori Mincho', serif; font-weight: 600; border-bottom: none; padding-bottom: 0; margin: 44px 0 18px; font-size: 1.25rem; color: #1a3c40; display: block; } /* ===================================================== 記事メタ・ラベル類：Jostで英字の統一感を出す ===================================================== */ .post-meta { font-family: 'Jost', sans-serif; letter-spacing: .04em; color: #7a8a8c; font-size: .85rem; } /* 記事内の英字ラベル（FROM JAPAN など）に使える汎用クラス */ .eyebrow-en { font-family: 'Jost', sans-serif; font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: #00838f; font-weight: 500; display: block; margin-bottom: 12px; } /* ===================================================== マーカー（）：黄色 → 淡いアクアの下塗りに ===================================================== */ .post-content mark { background: linear-gradient(transparent 62%, #d9f1f4 62%); color: inherit; padding: 0 2px; } /* ===================================================== 目次：枠を細く・静かに ===================================================== */ .toc-container { background-color: #fbfdfd; border: 1px solid #d9e9ec; border-radius: 10px; padding: 25px 30px; } .toc-title { font-family: 'Jost', sans-serif; text-transform: uppercase; letter-spacing: .25em; font-size: .9rem; text-align: left; border-bottom: 1px solid #d9e9ec; } .toc-list a { text-decoration: none; } /* ===================================================== 補足コラム：オレンジ → ティールに寄せて色数を減らす ===================================================== */ .column-box { border-left: 4px solid #00838f; background-color: #fbfdfd; } /* ===================================================== 関連記事・商品紹介まわり ===================================================== */ .related-link-title { background: #fbfdfd; border: 1px solid #d9e9ec; border-radius: 8px; padding: 14px 18px; font-size: .95rem; } .ad-section { border: 1px solid #d9e9ec; /* 破線 → 実線の細枠に */ background-color: #fbfdfd; } .ad-label { font-family: 'Jost', sans-serif; letter-spacing: .08em; } .related-title { font-family: 'Lora', serif; font-weight: 600; } /* ===================================================== 記事末尾 ===================================================== */ .article-footer { font-style: italic; color: #5a6a6c; } /* 非公式ブログの注意書き（フッター用） */ .disclaimer-en { font-size: .8rem; color: #8a9698; text-align: center; margin-top: 20px; line-height: 1.5; } /* ===================================================== 英語版ヘッダー（common-header-en.html用） ===================================================== */ .site-title-en a { font-family: 'Lora', 'Shippori Mincho', serif; font-weight: 600; letter-spacing: .02em; font-size: 2.2rem; /* 日本語版よりわずかに小さく（英字は横に長いため） */ } /* サイト名の下の「— from Japan —」 */ .site-tagline-en { display: block; font-family: 'Jost', sans-serif; font-size: .78rem; letter-spacing: .35em; text-transform: uppercase; color: #00838f; margin-top: 8px; font-weight: 500; } /* ナビの英字をJostで統一 */ .main-nav a { font-family: 'Jost', sans-serif; letter-spacing: .06em; font-weight: 500; } /* 日本語版へ戻るリンク（日本語なのでフォントを戻す） */ .main-nav a.lang-ja { font-family: 'Zen Kaku Gothic New', sans-serif; }