/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.5.1783173465
Updated: 2026-07-04 22:57:45

*/

/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.5.1783173465
Updated: 2026-07-04 22:57:45

/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.5.1783173465
Updated: 2026-07-04 22:57:45

*/

/* ==========================================================================
   石川博己 ブランドサイト - style.css
   WordPress Twenty Twenty-Five Child Theme

   役割：
   theme.json = ブランドトークン（色・タイポグラフィ・余白・角丸・動き）
   style.css  = UIコンポーネント（theme.jsonで実現できない項目のみ）
   Block Pattern = 誌面レイアウト（Hero, Magazine Layout等）

   実装ルール：
   - theme.jsonで実現できる内容はここに書かない
   - BEM命名規則を使用する
   - !important は使用しない
   - CSS Variables（--wp--preset--*, --wp--custom--*）を積極的に利用する
   - セクション単位で追記していく（一括生成しない）

   目次：
   1. Base / Foundation ... theme.json非対応のサイト全体ルール
   2. Components (BEM)  ... コンポーネント単位で追加
   ========================================================================== */


/* ==========================================================================
   1. Base / Foundation
   ========================================================================== */

/* --------------------------------------------------------------------------
   1-1. 本文の両端揃え + 禁則処理

   理由：theme.jsonにはtext-align / 禁則処理に相当する設定項目が存在しないため。
   フォントサイズ・行送り・字間はtheme.json側で管理済みなので、
   ここでは「揃え方」と「改行ルール」のみを補う。
   -------------------------------------------------------------------------- */
body {
  text-align: justify;
  text-justify: inter-ideograph; /* 日本語の均等揃えを自然にする */
  overflow-wrap: break-word;
  word-break: normal; /* 単語の途中で不自然に折り返さない */
  line-break: strict; /* 禁則処理（行頭禁則・行末禁則）を有効化 */
}

/* --------------------------------------------------------------------------
   1-1b. 見出し / Quote / Caption の両端揃え解除（例外）

   理由：text-alignは継承されるプロパティのため、bodyのjustifyが
   見出し（h1〜h6）にもそのまま適用されてしまう。
   見出しは1行あたりの文字数が少なく、特に英数字混在部分で禁則処理により
   折り返された際、justifyが短い行を無理に引き伸ばして文字間が
   不自然に開いてしまう。見出しは元々justifyの対象として想定していないため、
   左揃えを明示する。
   （Quote・Captionも同じ理由で幅が狭く、justifyだと不自然になるため対象）
   -------------------------------------------------------------------------- */
.wp-block-heading,
h1, h2, h3, h4, h5, h6,
.wp-block-quote,
.wp-element-caption {
  text-align: left;
}

/* --------------------------------------------------------------------------
   1-1c. スマホのみ本文の字間を詰める

   理由：本文サイズ・行間・左右パディングを固定値に統一した結果、
   スマホ幅では文字同士の間隔が広く感じ、単語がパラパラして見える。
   theme.jsonのletter-spacing(-0.1px)はPC/スマホ共通の値のため、
   スマホでだけさらに詰めたい場合はメディアクエリで上書きする。
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  body {
    letter-spacing: -0.3px;
  }
}

/* --------------------------------------------------------------------------
   1-2. リンクのホバー：Opacityのみ変化させる（ブランドルール）

   理由：theme.jsonのelements.link.:hoverは「色」までしか制御できないため、
   実際のopacity変化とトランジションはここで補う。
   （ボタンは黒背景/白文字への切り替えという別ルールのため対象外。2-1参照）
   -------------------------------------------------------------------------- */
a {
  transition: opacity var(--wp--custom--transition--fast);
}

a:hover {
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   1-3. FOT-TsukuGo Pro のフォント読み込み

   理由：theme.jsonのfontFamiliesは「参照名」を定義するのみで、
   実際のフォントファイルの読み込みは別途必要。
   子テーマ直下の`font`フォルダにアップロードされたファイルを直接読み込む。
   （サイトエディターの「スタイル」画面のフォント管理は使わない。
   　リセット時に消えてしまうリスクがあるため、ファイルベースで管理する）
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'FOT-TsukuGo Pro';
  src: url('font/FOT-TsukuGoPro-R.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FOT-TsukuGo Pro';
  src: url('font/FOT-TsukuGoPro-B.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1-3b. Quote / Pullquote 用の明朝体フォント読み込み

   理由：Quote・Pullquoteのみゴシック体(FOT-TsukuGo Pro)ではなく
   明朝体(FOT-TsukuAOldMinPr6)を使うブランド判断のため、専用に読み込む。
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'FOT-TsukuAOldMinPr6';
  src: url('font/FOT-TsukuAOldMinPr6-R.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FOT-TsukuAOldMinPr6';
  src: url('font/FOT-TsukuAOldMinPr6-B.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   2. Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   2-1. Button

   色（背景/文字/枠）・角丸・paddingはtheme.json（styles.elements.button）で管理済み。
   ここではtheme.jsonで表現できない「状態変化の滑らかさ」のみを補う。

   ブランドルール：
   ボタン背景は#ebeadf、ホバー時は同系色をやや濃くした#d4d3c9 に変化する
   （文字色・枠線は変化しない）。
   -------------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
  transition: background-color var(--wp--custom--transition--fast);
}

/* --------------------------------------------------------------------------
   2-2. Hero Slider

   7trailsのヒーローエリア（横スクロールスライダー）を参考に、
   本ブランドのトークン（色・フォント・トランジション）で再設計したもの。
   WordPressのクエリーループブロックと組み合わせて使い、
   最新記事を自動表示する想定（Block Patternとして運用）。

   使い方：
   基本の仕組みは1つのまま、画像比率・カード幅・間隔・見出しの有無を
   CSSカスタムプロパティで切り替えられるようにしてある。
   場所ごとに合わせて、ブロックエディターの「追加CSSクラス」欄に
   以下のいずれかを足すだけで見た目を変えられる（コード変更は不要）。

     （クラス指定なし）      … 標準：お知らせ・告知を複数並べるカード形式
     .hero-slider--visual   … トップページ用：画像を画面いっぱいに使う
                               イメージエリア型（タグのみ画像に重ねて表示）
     .hero-slider--compact  … 記事本文中などに埋め込む、小さめのミニ版

   新しいバリエーションが必要になった場合も、この3つと同じ要領で
   カスタムプロパティを上書きするクラスを追加すれば良い。
   -------------------------------------------------------------------------- */

/* Hero全体・デフォルト値（標準：お知らせ・告知カード形式） */
.hero-slider {
  --hero-gap: 24px;
  --hero-gap-sp: 18px;
  --hero-slide-basis: min(72vw, 760px);
  --hero-slide-basis-pc: min(58vw, 860px);
  --hero-slide-basis-sp: 86vw;
  --hero-image-ratio: 4 / 5;
  --hero-image-ratio-pc: 16 / 10;
  --hero-title-size: clamp(26px, 4vw, 42px);
  --hero-title-size-sp: 26px;
  --hero-body-display: block;
  --hero-category-position: static;

  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--wp--preset--color--background);
}

/* スライダー外枠（クエリーループの「投稿テンプレート」ブロックに割り当てる）
   左右の余白は、サイト全体の余白設定(--wp--style--root--padding-left)を
   そのまま参照する。個別の数値を持たせると、サイト全体の余白を
   変更した際にHeroだけ揃わなくなるため。 */
.hero-slider__track {
  display: flex;
  gap: var(--hero-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 var(--wp--style--root--padding-left) 40px;
}

/* スクロールバー非表示 */
.hero-slider__track::-webkit-scrollbar {
  display: none;
}
.hero-slider__track {
  scrollbar-width: none;
}

/* スライドカード（クエリーループの各投稿に割り当てる）
   注：サイト全体のリンクホバー規則(a:hover{opacity:0.6})が
   このカード全体にも適用されてしまい、画像専用のホバーと二重にかかって
   しまうため、カード自体のopacityは変化させないよう明示的に打ち消す。
   画像だけが暗くなるようにするのはこの下のルールで対応する。 */
.hero-slide {
  position: relative;
  flex: 0 0 var(--hero-slide-basis);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}
.hero-slide:hover {
  opacity: 1;
}

/* 画像
   注：ブランドルール「写真は角丸を使用しない」に準拠し、border-radiusは付けない */
.hero-slide__image {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hero-image-ratio);
  overflow: hidden;
  background: var(--wp--preset--color--border);
}
.hero-slide__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストエリア（--visualでは非表示にする） */
.hero-slide__body {
  display: var(--hero-body-display);
  padding-top: 18px;
}

/* カテゴリー（タグ）
   標準では本文エリアの中の通常のテキストだが、
   --visualでは画像の上に重ねて表示する（position: static → absolute）。 */
.hero-slide__category {
  position: var(--hero-category-position);
  top: 20px;
  left: 20px;
  z-index: 1;
  margin: 0 0 8px;
  font-family: var(--wp--preset--font-family--en);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--link);
}

/* 日付 */
.hero-slide__date {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1;
  color: var(--wp--preset--color--text-secondary);
}

/* タイトル */
.hero-slide__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--base);
  font-size: var(--hero-title-size);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--wp--preset--color--text);
}

/* ホバー：画像のみOpacity変化させる（ブランドルール） */
.hero-slide:hover .hero-slide__image img {
  opacity: 0.86;
  transition: opacity var(--wp--custom--transition--base);
}

/* PC：大きく見せる */
@media (min-width: 900px) {
  .hero-slide {
    flex-basis: var(--hero-slide-basis-pc);
  }
  .hero-slide__image {
    aspect-ratio: var(--hero-image-ratio-pc);
  }
}

/* SP */
@media (max-width: 767px) {
  .hero-slider__track {
    gap: var(--hero-gap-sp);
    padding-bottom: 32px;
  }
  .hero-slide {
    flex-basis: var(--hero-slide-basis-sp);
  }
  .hero-slide__title {
    font-size: var(--hero-title-size-sp);
  }
}

/* --------------------------------------------------------------------------
   2-2a. Hero Slider --visual（トップページ用：画像フルサイズのイメージエリア型）

   カテゴリー・日付は表示しない（タグは投稿の絞り込み用途のみ）。
   タイトルだけを、白背景のラベル（テプラ風）にして画像の左下に重ねる。
   画像1枚1枚が画面幅いっぱいに近い大きさになるよう、
   カード幅・比率・間隔を調整している。
   -------------------------------------------------------------------------- */
.hero-slider--visual {
  --hero-gap: 8px;
  --hero-gap-sp: 4px;
  --hero-slide-basis: 92vw;
  --hero-slide-basis-pc: 100%;
  --hero-slide-basis-sp: 92vw;
  --hero-image-ratio: 4 / 5;
  --hero-image-ratio-pc: 21 / 9;
  --hero-title-size: 14px;
  --hero-title-size-sp: 13px;
}
/* タグ・日付は投稿の絞り込み用途のみなので、画面上には表示しない */
.hero-slider--visual .hero-slide__category,
.hero-slider--visual .hero-slide__date {
  display: none;
}
/* タイトルを、画像の左下に重ねるテプラ風ラベルにする
   （bodyごと絶対配置にし、タイトル自体に白背景を付けてラベル化） */
.hero-slider--visual .hero-slide__body {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1;
  padding-top: 0;
}
.hero-slider--visual .hero-slide__title {
  display: inline-block;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--text);
  padding: 4px 10px;
  line-height: 1.4;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   2-2b. Hero Slider --compact（記事本文中などに埋め込むミニ版）

   カード幅・間隔・見出しサイズを小さくし、記事一覧の途中や
   サイドコンテンツとして差し込んでも圧迫感が出ないようにする。
   -------------------------------------------------------------------------- */
.hero-slider--compact {
  --hero-gap: 16px;
  --hero-gap-sp: 12px;
  --hero-slide-basis: min(50vw, 420px);
  --hero-slide-basis-pc: min(28vw, 360px);
  --hero-slide-basis-sp: 62vw;
  --hero-image-ratio: 1 / 1;
  --hero-image-ratio-pc: 1 / 1;
  --hero-title-size: 20px;
  --hero-title-size-sp: 18px;
}
.hero-slider--compact .hero-slide__category,
.hero-slider--compact .hero-slide__date {
  font-size: 12px;
}

/* ========================================
   7trails 連載記事タイトル
======================================== */

/* タイトルまわり全体 */
.column-header {
  width: 100%;
  margin-block: 0 3rem;
}

/* ------------------------------
   連載名＋連載サブタイトル
------------------------------ */

.column-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin: 0 0 2rem;
}

/* 連載のタイトル */
.column-title {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
}

/* 連載のサブタイトル */
.column-sub-title {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
}

/* ------------------------------
   連載回数＋記事タイトル
------------------------------ */

.column-article-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.5em;
  row-gap: 0.15em;
  margin: 0;
}

/* 連載回数 */
.column-number {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* 「第一回」の後ろに縦線を追加 */
.column-number::after {
  content: "｜";
  display: inline-block;
  margin-left: 0.4em;
  font-weight: 400;
}

/* 記事タイトル */
.column-article-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
  text-wrap: balance;
}

/* ------------------------------
   スマートフォン
------------------------------ */

@media screen and (max-width: 600px) {
  .column-header {
    margin-bottom: 2rem;
  }

  .column-heading {
    gap: 0.1rem;
    margin-bottom: 1.5rem;
  }

  .column-article-heading {
    column-gap: 0.3em;
  }

  .column-number::after {
    margin-left: 0.25em;
  }
}

/* ========================================
   7trails 連載記事タイトル
   暫定上書き
======================================== */

/* 連載タイトルとサブタイトルの縦積み */
body .wp-site-blocks .column-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
  margin: 0 0 2rem !important;
  padding: 0 !important;
  --wp--style--block-gap: 0.25rem !important;
}

/* グループ内にWordPressが付ける余白を解除 */
body .wp-site-blocks .column-heading > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* 連載タイトル */
body .wp-site-blocks .column-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(2rem, 4.4vw, 3.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  font-feature-settings: "palt" !important;
}

/* 連載サブタイトル */
body .wp-site-blocks .column-sub-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1rem, 2vw, 1.35rem) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.02em !important;
  font-feature-settings: "palt" !important;
}

/* 回数と記事タイトルの横積み */
body .wp-site-blocks .column-article-heading {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 0.15em 0.35em !important;
  margin: 0 !important;
  padding: 0 !important;
  --wp--style--block-gap: 0 !important;
}

/* 横積みグループ内の余白を解除 */
body .wp-site-blocks .column-article-heading > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* 連載回数 */
body .wp-site-blocks .column-number {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(1rem, 2vw, 1.4rem) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* 第一回の後ろに縦線を追加 */
body .wp-site-blocks .column-number::after {
  content: "｜" !important;
  display: inline !important;
  margin-left: 0.25em !important;
  font-size: 0.9em !important;
  font-weight: 400 !important;
}

/* 記事タイトル */
body .wp-site-blocks .column-article-title {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  font-feature-settings: "palt" !important;
}

/* スマートフォン */
@media screen and (max-width: 600px) {
  body .wp-site-blocks .column-heading {
    gap: 0.15rem !important;
    margin-bottom: 1.5rem !important;
  }

  body .wp-site-blocks .column-article-heading {
    gap: 0.1em 0.25em !important;
  }

  body .wp-site-blocks .column-number {
    font-size: 1rem !important;
  }

  body .wp-site-blocks .column-article-title {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
}