/* ==================================================
   共通テンプレート基本スタイル
   WordPress用リセット + レイアウト + レスポンシブ対応
================================================== */

/* -----------------------------
   html の基本設定
----------------------------- */
html {
  scroll-behavior: smooth;  /* ページ内リンクのスムーズスクロール */
  color-scheme: light;      /* OSのライトモード基準で調整 */
  height: 100%;             /* ページ全体の高さを確保 */
  overflow-x: hidden;       /* 横スクロール防止 */
  box-sizing: border-box;   /* 子要素にも継承 */
}

/* -----------------------------
   body の基本設定
----------------------------- */
body {
  font-family: var(--font-main);  /* 共通フォント */
  background-color: var(--bg-main); /* 共通背景色 */
  color: var(--color-text-main);    /* 共通テキスト色 */
  line-height: 1.75;                /* 読みやすい行間 */
  letter-spacing: 0.03em;           /* 読みやすい文字間 */
  font-size: var(--font-md);        /* 基本文字サイズ */
  margin: 0;                        /* デフォルトマージンリセット */
  min-height: 100vh;                /* 画面全体の高さ */
  display: flex;                     /* ヘッダー・メイン・フッターを縦並び */
  flex-direction: column;
}

/* -----------------------------
   メインコンテンツの伸縮
   コンテンツが少なくてもフッターを下に押し出す
----------------------------- */
.site-main,
main#primary {
  flex: 1 0 auto; /* 縦方向に伸縮可能 */
}

/* -----------------------------
   フッター固定
----------------------------- */
.footer {
  margin-top: auto; /* flexの余白で下に固定 */
}

/* ==================================================
   全要素にボックスサイズを継承
   WordPressリセット + レスポンシブ用
================================================== */
*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* -----------------------------
   HTML5セマンティック要素のブロック化
----------------------------- */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

/* -----------------------------
   メディア要素のレスポンシブ対応
----------------------------- */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* -----------------------------
   リストのリセット
----------------------------- */
ul, ol {
  list-style: none;
}

/* -----------------------------
   リンクの基本スタイル
----------------------------- */
a,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
  outline: none !important;
  color: inherit; /* 親の色を継承 */
}



/* ==================================================
   メイン領域 / セクション / テキストセクション / P
================================================== */
main.site-main {
  width: 100%;
  max-width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

main.site-main > section:not(.is-fullwidth),
main.site-main > article:not(.is-fullwidth) {
  width: 100%;
  max-width: var(--section-max-width);
  margin: 1em auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
  box-sizing: border-box;
}

.is-fullwidth {
  width: 100%;
  margin: 0 0 5em 0;
  padding: 0;
}


/* ==================================================
   本文段落（p）　WordPressの自動出力のために基本んが必要
================================================== */
p {
  font-family: var(--font-family-main);
  font-size: var(--font-md);
  line-height: var(--line-height-body);
  color: var(--color-text-sub);
  margin: 0 0 var(--spacing-md) 0;
  overflow-wrap: break-word;
}

p:last-child {
  margin-bottom: 0;
}

/* ==================================================
   見出し（h1〜h6）
================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-main);
  font-weight: 600;
  line-height: var(--line-height-heading);
  color: var(--color-text-main);
  text-align: center;
  margin: 0 0 var(--spacing-md) 0;
  letter-spacing: 0.02em;
}

h2, h3 {
  padding-left: 0;
  margin-top: var(--spacing-lg);
  font-weight: 500;
}

/* ==================================================
   背景と本文色
================================================== */
body {
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: var(--font-family-main);
  line-height: var(--line-height-body);
  letter-spacing: 0.03em;
  margin: 0;
}

/* ==================================================
   リンク装飾
================================================== */
a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 0.8px solid var(--color-border);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}

a:hover {
  color: var(--color-button-hover-bg);
  border-color: var(--color-button-hover-bg);
}

/* ==================================================
   ボタン・入力
================================================== */
button,
input[type="submit"],
input[type="button"] {
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  border: 0.8px solid var(--color-button-border);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-panel);
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--color-button-hover-bg);
  color: var(--color-button-hover-text);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

/* ==================================================
   パネル
================================================== */
.panel {
  background-color: var(--color-bg-panel);
  border: 0.8px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  transition: transform 0.3s, box-shadow 0.3s;
}

.panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ==================================================
   セクション
================================================== */
.section {
  padding: var(--spacing-lg) 0;
  border-bottom: 0.8px solid var(--color-border);
}

/* ==================================================
   テーブル・フォーム
================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
}

th, td {
  padding: var(--spacing-md);
  border: 0.8px solid var(--color-border);
}

th {
  background-color: var(--color-bg-tableheader);
  color: var(--color-text-tableheader);
  font-weight: 600;
}

input,
textarea,
select {
  width: 100%;
  padding: var(--spacing-sm);
  border: 0.8px solid var(--color-border);
  border-radius: var(--radius-panel);
  font-family: var(--font-family-main);
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-button-border);
  box-shadow: 0 0 6px rgba(0,0,0,0.08);
  outline: none;
}

/* ==================================================
   レスポンシブ（カスタム変数ベース）
================================================== */
@media (max-width: 768px) {
  .content-block__title { font-size: var(--font-xl-sm); }
  .content-block__subtitle { font-size: var(--font-lg-sm); }
  .content-block__text { font-size: var(--font-md-sm); }
  p { font-size: var(--font-md-sm); line-height: var(--line-height-body); }
}

@media (max-width: 480px) {
  .content-block__title { font-size: var(--font-sm); }
  .content-block__subtitle { font-size: var(--font-sm-sm); }
  .content-block__text { font-size: var(--font-xs-sm); }
  p { font-size: var(--font-xs-sm); line-height: var(--line-height-body); }
}

@media (max-width: 320px) {
  .content-block__title { font-size: var(--font-sm); }
  .content-block__subtitle { font-size: var(--font-sm-sm); }
  .content-block__text { font-size: var(--font-xs-sm); }
  p { font-size: var(--font-xs-sm); line-height: var(--line-height-body); }
}





/* ==================================================
   ヘッダー（共通変数優先＋最小固有値）
================================================== */
.header {
  position: relative;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  color: var(--color-text-main);
  font-family: var(--font-family-main);
  background-color: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-panel);
  transition: all 0.3s ease;
}

.header:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* 固有値許容 */
  transform: translateY(-2px);            /* 固有値許容 */
}

.header a .logo {
  display: block;
  width: 50px;          /* 固有値許容 */
  height: 50px;         /* 固有値許容 */
  border-radius: var(--radius-panel);
  margin: 0 var(--spacing-sm);
  object-fit: cover;
  transition: transform 0.3s ease;
}

.header a .logo:hover {
  transform: scale(1.05); /* 固有値許容 */
}

.header__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header__catchphrase {
  flex: 1;
  text-align: left;
}

.header__catchphrase p {
  font-size: var(--font-md);   /* 共通変数使用 */
  font-weight: 700;
  margin: 0;
  color: var(--color-text-main);
  letter-spacing: 1px;        /* 固有値許容 */
}

.header__nav-top-links {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  transition: all 0.3s ease;
}

.header-links-list {
  display: flex;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-links-list li a {
  color: var(--color-text-main);
  font-size: var(--font-md);       /* 共通変数使用 */
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-panel);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.header-links-list li a:hover {
  background-color: rgba(0,0,0,0.05); /* 固有値許容 */
  transform: translateY(-2px);        /* 固有値許容 */
}

.header__hamburger-menu {
  display: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.header__hamburger-menu svg line {
  transform-origin: center;
  stroke: var(--color-text-main);
}

.header__hamburger-menu.active svg line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.header__hamburger-menu.active svg line:nth-child(2) {
  opacity: 0;
}
.header__hamburger-menu.active svg line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ==================================================
   ヘッダーレスポンシブ（ルールに沿って共通変数使用）
================================================== */

/* MDサイズ以下（タブレット向け） max-width: 768px */
@media (max-width: 768px) {
  .header__nav-top-links {
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background-color: var(--color-bg-main);
    display: none;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 固有値許容 */
  }
  .header__nav-top-links.active { display: flex; }

  .header-links-list {
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
  }

  .header-links-list li a {
    font-size: var(--font-sm-sm); /* 共通変数使用 */
    width: 100%;
  }

  .header__hamburger-menu { display: block; }

  .header__catchphrase p {
    font-size: var(--font-sm-sm);       /* 共通変数使用 */
    margin-left: var(--spacing-sm-sm);  /* 共通変数使用 */
  }
}

/* SMサイズ以下（スマホ向け） max-width: 480px */
@media (max-width: 480px) {
  .header-links-list li a { font-size: var(--font-xs-sm); }  /* 共通変数使用 */
  .header__catchphrase p { font-size: var(--font-xs-sm); }   /* 共通変数使用 */
}

/* XSサイズ以下（小型スマホ向け） max-width: 320px */
@media (max-width: 320px) {
  .header-links-list li a { font-size: var(--font-xs-sm); }  /* 共通変数使用 */
  .header__catchphrase p { font-size: var(--font-xs-sm); }   /* 共通変数使用 */
}

/* ==================================================
   フッター（共通変数優先＋最小固有値）
================================================== */
.footer {
  background-color: var(--color-bg-main);
  padding: var(--spacing-lg) 0;
  color: var(--color-text-sub);
  font-family: var(--font-family-main);
  border-top: 1px solid var(--color-border);
  text-align: center;
  box-shadow: var(--shadow-panel);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.footer:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* 固有値許容 */
  transform: translateY(-2px);            /* 固有値許容 */
}

.footer__brand p {
  font-size: var(--font-md); /* 共通変数使用 */
  font-weight: 400;
  margin: 0;
  color: var(--color-text-sub);
}

.footer__nav-top-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  padding-top: var(--spacing-md);
  flex-wrap: wrap;
}

.footer-links-list {
  display: flex;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.footer-links-list li a {
  color: var(--color-text-main);
  font-size: var(--font-md); /* 共通変数使用 */
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-panel);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.footer-links-list li a:hover {
  background-color: rgba(0,0,0,0.05); /* 固有値許容 */
  transform: translateY(-2px);        /* 固有値許容 */
}

.footer__sns {
  padding-top: var(--spacing-md);
}

.footer__copyright {
  font-size: var(--font-sm); /* 共通変数使用 */
  padding-top: var(--spacing-md);
  color: var(--color-text-sub);
}

/* ==================================================
   フッターレスポンシブ（768px以下）
================================================== */
@media (max-width: 768px) {
  .footer__brand p {
    font-size: var(--font-sm-sm); /* 共通変数使用 */
  }
  .footer__nav-top-links {
    flex-direction: column;
    padding-top: var(--spacing-sm-sm);
  }
  .footer-links-list {
    flex-direction: column;
    gap: var(--spacing-sm-sm);
    width: 100%;
    align-items: center;
  }
  .footer-links-list li a {
    font-size: var(--font-sm-sm); /* 共通変数使用 */
    padding: var(--spacing-sm-sm) var(--spacing-md-sm);
  }
  .footer__copyright {
    font-size: var(--font-sm-sm); /* 共通変数使用 */
  }
}

/* ==================================================
   フッターレスポンシブ（480px以下）
================================================== */
@media (max-width: 480px) {
  .footer-links-list li a,
  .footer__brand p,
  .footer__copyright {
    font-size: var(--font-xs-sm); /* 共通変数使用 */
    padding: var(--spacing-sm-sm) var(--spacing-sm);
  }
}

/* ==================================================
   フッターレスポンシブ（320px以下）
================================================== */
@media (max-width: 320px) {
  .footer-links-list li a,
  .footer__brand p,
  .footer__copyright {
    font-size: var(--font-xs-sm); /* 共通変数使用 */
    padding: var(--spacing-sm-sm) var(--spacing-sm);
  }
}



/* =========================================================
   フッター SNSリンク（共通変数優先＋最小固有値）
========================================================= */
.footer__sns,
.footer-sns-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);        /* 共通変数使用 */
  flex-wrap: wrap;
}

/* SNSリンク共通 */
.footer-sns-links a.sns-link,
.footer__sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;                    /* 固有値許容 */
  height: 42px;                   /* 固有値許容 */
  border-radius: 50%;
  background-color: var(--color-text-main); /* 共通変数に近似 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer-sns-links a.sns-link svg,
.footer__sns a svg {
  width: 24px;  /* 固有値許容 */
  height: 24px; /* 固有値許容 */
  fill: #fff;
}

/* ホバー効果 */
.footer-sns-links a.sns-link:hover,
.footer__sns a:hover {
  transform: scale(1.05);                              /* 固有値許容 */
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);             /* 固有値許容 */
}

/* SNS個別カラー */
.footer-sns-links a.sns-twitter,
.footer__sns a.sns-twitter { background-color: #111111; }

.footer-sns-links a.sns-facebook,
.footer__sns a.sns-facebook { background-color: #1877f2; }

.footer-sns-links a.sns-line,
.footer__sns a.sns-line { background-color: #00c300; }

.footer-sns-links a.sns-instagram,
.footer__sns a.sns-instagram { background-color: #e1306c; }

.footer-sns-links a.sns-youtube,
.footer__sns a.sns-youtube { background-color: #ff0000; }

/* =========================================================
   フッターレスポンシブ（共通変数＋ブレイクポイント）
========================================================= */
@media (max-width: 768px) {
  .footer__sns,
  .footer-sns-links {
    gap: var(--spacing-sm-sm);
    margin-top: var(--spacing-md-sm);
  }
  .footer-sns-links a.sns-link,
  .footer__sns a {
    width: 38px;
    height: 38px;
  }
  .footer-sns-links a.sns-link svg,
  .footer__sns a svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .footer__sns,
  .footer-sns-links {
    gap: var(--spacing-sm-sm);
    margin-top: var(--spacing-md-sm);
  }
  .footer-sns-links a.sns-link,
  .footer__sns a {
    width: 36px;
    height: 36px;
  }
  .footer-sns-links a.sns-link svg,
  .footer__sns a svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 320px) {
  .footer__sns,
  .footer-sns-links {
    gap: var(--spacing-sm-sm);
    margin-top: var(--spacing-md-sm);
  }
  .footer-sns-links a.sns-link,
  .footer__sns a {
    width: 34px;
    height: 34px;
  }
  .footer-sns-links a.sns-link svg,
  .footer__sns a svg {
    width: 16px;
    height: 16px;
  }
}


/* 親メニューを相対位置に */
.menu-item-has-children {
  position: relative;
}

/* 子メニューは絶対位置で親の下に表示 */
.menu-item-has-children .sub-menu {
  display: none;           /* 初期は非表示 */
  position: absolute;      /* 絶対配置 */
  top: 100%;               /* 親の下に配置 */
  left: 0;
  background: #fff;        /* 好きな背景色 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  min-width: 180px;        /* 必要に応じて幅調整 */
  z-index: 100;
}

/* 開いた状態 */
.menu-item-has-children.is-open > .sub-menu {
  display: block;
}




/* =========================================================
   左下固定ログインステータス（ボタン風リンク・小さめ版）
   共通変数のみ使用・メディアクエリルールに従う
========================================================= */
.login-status {
  position: fixed;
  bottom: var(--spacing-md); /* 少し狭め */
  left: var(--spacing-md);
  background-color: var(--color-bg-panel);
  padding: var(--spacing-sm);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  font-size: var(--font-sm-sm); /* 少し小さめ */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm-sm); /* ボタン間隔も小さめ */
  z-index: 9999;
  backdrop-filter: blur(6px);
  transition: transform 0.2s, box-shadow 0.3s;
}

.login-status:hover {
  transform: translateY(-1px); /* 少し控えめ */
  box-shadow: var(--shadow-panel);
}

.login-status-name {
  font-weight: 600;
  color: var(--color-text-main);
  font-size: var(--font-sm-sm); /* 名前も少し小さく */
}

/* ボタン風リンク共通 */
.login-status a {
  display: block;
  text-align: center;
  padding: var(--spacing-sm-sm) var(--spacing-md-sm); /* 横の余白を少し小さく */
  border-radius: var(--radius-panel);
  font-size: var(--font-sm-sm);
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

/* 管理画面ボタン */
.login-status-dashboard-link {
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
  border: 1px solid var(--color-button-border);
}

.login-status-dashboard-link:hover {
  background-color: var(--color-button-hover-bg);
  color: var(--color-button-hover-text);
}

/* ログアウトボタン */
.login-status-logout {
  background-color: var(--color-bg-main);
  color: var(--color-text-sub);
  border: 1px solid var(--color-border);
}

.login-status-logout:hover {
  color: var(--color-text-main);
  text-decoration: underline;
}

/* =========================================================
   レスポンシブ対応（共通変数のみ使用）
========================================================= */
@media (max-width: 768px) {
  .login-status {
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    font-size: var(--font-sm-sm);
  }

  .login-status a {
    font-size: var(--font-sm-sm);
    padding: var(--spacing-sm-sm) var(--spacing-md-sm);
  }
}

@media (max-width: 480px) {
  .login-status a {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 320px) {
  .login-status a {
    font-size: var(--font-sm-sm);
    padding: var(--spacing-sm-sm);
  }
}




/* =========================================================
   フロント右下に現在のテンプレートを表示
========================================================= */
.template-indicator {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9999;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    font-family: monospace;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}




/* ==================================================
   共通変数（完全統一版）
================================================== */
:root {
  /* -----------------------------
     カラー
  ----------------------------- */
  --color-text-main: #111;
  --color-text-sub: #222;
  --color-text-light: #666;
  --color-bg-main: #fff;
  --color-bg-panel: #fafafa;
  --color-border: #e5e5e5;

  --color-button-bg: #fff;
  --color-button-text: #111;
  --color-button-border: #111;
  --color-button-hover-bg: #111;
  --color-button-hover-text: #fff;

  --color-link: var(--color-text-main);
  --color-link-hover: #333;

  /* -----------------------------
     フォント
  ----------------------------- */
   --font-family-main: "Georgia", "Times New Roman", serif; /* 女性的でエレガントな印象 */


  /* タイトル・サブコピー・本文用フォントサイズ */
  --font-xl: 1.8em;        /* タイトル PC */
  --font-lg: 1.2em;        /* サブコピー PC */
  --font-md: 1em;          /* 本文 PC */

  --font-xl-sm: 1.5em;     /* タイトル MD */
  --font-lg-sm: 1.1em;     /* サブコピー MD */
  --font-md-sm: 0.95em;    /* 本文 MD */

  --font-sm: 0.85em;       /* タイトル SM */
  --font-sm-sm: 0.8em;     /* サブコピー SM */
  --font-xs-sm: 0.75em;    /* 本文 SM & XS */
  --font-xxs-sm: 0.7em; /* XSよりさらに小さいサイズ */

  /* -----------------------------
     ラインハイト
  ----------------------------- */
  --line-height-heading: 1.4;
  --line-height-subheading: 1.5;
  --line-height-body: 1.8;

  /* -----------------------------
     スペーシング
  ----------------------------- */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;

  --spacing-sm-sm: 6px;
  --spacing-md-sm: 12px;
  --spacing-lg-sm: 24px;

/* ==================================================
   共通変数にテーブル専用行カラー追加
================================================== */
  /* -----------------------------
     パネル / ボタン
  ----------------------------- */
  --radius-panel: 6px;
  --shadow-panel: none;

  /* ヘッダー用カラー */
  --color-bg-header: #333;
  --color-text-header: #fff;

  /* テーブルヘッダー用カラー */
  --color-bg-tableheader: #212121;
  --color-text-tableheader: #fff;

  /* テーブル行用カラー（奇数・偶数） */
  --color-bg-table-row-odd: var(--color-bg-panel);
  --color-bg-table-row-even: #f5f5f5;



  /* -----------------------------
     固定サイズ
  ----------------------------- */
  --table-th-width: 150px;

  --login-max-width-stage1: 380px;
  --login-max-width-stage2: 420px;
  --login-max-width-default: 420px;

  --login-padding: 2em;
  --login-padding-mobile: 1.5em;

  --login-margin: 3em auto;
  --login-margin-mobile: 2em auto;

  /* -----------------------------
     セクション最大幅
  ----------------------------- */
  --section-max-width: 900px;

  --item-max-width: 300px; /* アイテム最大幅 */

    /* -----------------------------
     ロゴサイズ
  ----------------------------- */
  --logo-height-lg: 80px;
  --logo-height-md: 70px;
  --logo-height-sm: 60px;
  --logo-height-xs: 50px;
}



/* ==================================================
   ブレイクポイント設定に関するルール
================================================== */
/* 1. ブレイクポイント（max-width）は固定値を使用 */
/* 2. max-width: 768px,480px,320pxを使用 */
/* 3. ブレイクポイント以外のプロパティはカスタム変数を使用 */

/* ----------------------------------------------
   MDサイズ以下（タブレット向け）
   max-width: 768px 以下
---------------------------------------------- */
@media (max-width: 768px) {
  .content-block__title { font-size: var(--font-xl-sm); }
  .content-block__subtitle { font-size: var(--font-lg-sm); }
  .content-block__text { font-size: var(--font-md-sm); }
}

/* ----------------------------------------------
   SMサイズ以下（一般スマホ向け）
   max-width: 480px 以下
---------------------------------------------- */
@media (max-width: 480px) {
  .content-block__title { font-size: var(--font-sm); }
  .content-block__subtitle { font-size: var(--font-sm-sm); }
  .content-block__text { font-size: var(--font-xs-sm); }
}

/* ----------------------------------------------
   XSサイズ以下（小型スマホ向け）
   max-width: 320px 以下
---------------------------------------------- */
@media (max-width: 320px) {
  .content-block__title { font-size: var(--font-sm); }
  .content-block__subtitle { font-size: var(--font-sm-sm); }
  .content-block__text { font-size: var(--font-xs-sm); }
}

/* ⤴ここまではルール */

/* ==================================================
   content-block__gallery（アイキャッチ専用グリッド）
================================================== */
.content-block__gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--item-max-width), 1fr));
  gap: var(--spacing-md);
}

/* アイキャッチカード */
.content-block__gallery-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background-color: var(--color-bg-panel);
}

.content-block__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* MD */
@media (max-width: 768px) {
  .content-block__gallery-grid {
    gap: var(--spacing-md-sm);
  }
}

/* SM */
@media (max-width: 480px) {
  .content-block__gallery-grid {
    gap: var(--spacing-sm-sm);
  }
}

/* XS */
@media (max-width: 320px) {
  .content-block__gallery-grid {
    gap: var(--spacing-sm-sm);
  }
}



/* ==================================================
   固定ページ共通ベース
================================================== */
.main-content {
  font-family: var(--font-family-main);
  color: var(--color-text-main);
  line-height: var(--line-height-body);
  background-color: var(--color-bg-main);
  padding: var(--spacing-lg) var(--spacing-md);
  max-width: var(--section-max-width); /* 最大幅固定 */
  margin: 0 auto;                     /* 中央寄せ */
  width: 100%;                         /* 横幅100%以内で固定 */
  box-sizing: border-box;              /* paddingを含めた幅計算 */
}

/* MDサイズ以下 */
@media (max-width: 768px) {
  .main-content {
    padding: var(--spacing-lg-sm) var(--spacing-md-sm);
  }
}

/* SMサイズ以下 */
@media (max-width: 480px) {
  .main-content {
    padding: var(--spacing-md-sm) var(--spacing-sm-sm);
  }
}

/* XSサイズ以下 */
@media (max-width: 320px) {
  .main-content {
    padding: var(--spacing-md-sm) var(--spacing-sm-sm);
  }
}

/* ==================================================
   メインカード
================================================== */
.content-block {
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--spacing-lg);
  margin: 0 auto var(--spacing-lg);  /* 上は0、下はマージン固定 */
  max-width: var(--section-max-width); /* 最大幅固定 */
  box-shadow: var(--shadow-panel);
  width: 100%;
  box-sizing: border-box;
}

/* MD */
@media (max-width: 768px) {
  .content-block {
    padding: var(--spacing-lg-sm);
    margin-bottom: var(--spacing-lg-sm);
  }
}

/* SM */
@media (max-width: 480px) {
  .content-block {
    padding: var(--spacing-md-sm);
    margin-bottom: var(--spacing-md-sm);
  }
}

/* XS */
@media (max-width: 320px) {
  .content-block {
    padding: var(--spacing-sm-sm);
    margin-bottom: var(--spacing-sm-sm);
  }
}


/* ==================================================
   コンテンツブロック - ヘッダー
================================================== */
.content-block--header {
  margin-bottom: calc(var(--spacing-lg) * 2.5);
}

/* MD */
@media (max-width: 768px) {
  .content-block--header {
    margin-bottom: calc(var(--spacing-lg-sm) * 2.5);
  }
}

/* SM */
@media (max-width: 480px) {
  .content-block--header {
    margin-bottom: calc(var(--spacing-lg-sm) * 2);
  }
}

/* XS */
@media (max-width: 320px) {
  .content-block--header {
    margin-bottom: calc(var(--spacing-md-sm) * 2);
  }
}


/* ==================================================
   コンテンツブロック - タイトル / サブコピー / 本文
================================================== */
.content-block__title {
  font-size: var(--font-xl);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-text-main);
  margin-bottom: calc(var(--spacing-md) * 1.2);
  text-align: left;
}

.content-block__subtitle {
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: var(--line-height-body);
  color: var(--color-text-sub);
  margin-top: calc(var(--spacing-md) * 1.2);
  margin-bottom: calc(var(--spacing-sm) / 1.5);
  text-align: left;
}

.content-block__text {
  font-size: var(--font-md);
  line-height: var(--line-height-body);
  color: var(--color-text-sub);
  margin-bottom: calc(var(--spacing-md) * 1.2);
  text-align: left;
}

.content-block__text.small-note {
  font-size: var(--font-sm);
  color: var(--color-text-light);
}

/* MD */
@media (max-width: 768px) {
  .content-block__title { font-size: var(--font-xl-sm); }
  .content-block__subtitle { font-size: var(--font-lg-sm); }
  .content-block__text { font-size: var(--font-md-sm); }
}

/* SM */
@media (max-width: 480px) {
  .content-block__title { font-size: var(--font-sm); }
  .content-block__subtitle { font-size: var(--font-sm-sm); }
  .content-block__text { font-size: var(--font-xs-sm); }
}

/* XS */
@media (max-width: 320px) {
  .content-block__title { font-size: var(--font-sm); }
  .content-block__subtitle { font-size: var(--font-sm-sm); }
  .content-block__text { font-size: var(--font-xs-sm); }
}


/* ==================================================
   テーブル専用スタイル（content-block__table専用 完全版）
================================================== */
.content-block--table {
  margin-bottom: calc(var(--spacing-lg) * 2.5);
  overflow-x: auto;
}

.content-block__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-md-sm); /* 基本文サイズに統一 */
  font-family: var(--font-family-main);
}

.content-block__table th,
.content-block__table td {
  border: 1px solid var(--color-border);
  padding: var(--spacing-sm);
  vertical-align: top;
  text-align: left;
}

.content-block__table th {
  background-color: var(--color-bg-tableheader);
  color: var(--color-text-tableheader);
  font-weight: 600;
  width: var(--table-th-width);
}

.content-block__table td {
  color: var(--color-text-sub);
}

/* 奇数・偶数行の背景色 */
.content-block__table tr:nth-child(odd) td {
  background-color: var(--color-bg-table-row-odd);
}
.content-block__table tr:nth-child(even) td {
  background-color: var(--color-bg-table-row-even);
}

/* ==================================================
   レスポンシブ対応（本文サイズと完全統一）
================================================== */
/* MD以下（タブレット） */
@media (max-width: 768px) {
  .content-block__table {
    font-size: var(--font-md-sm); /* 本文サイズに揃える */
  }
}

/* SM以下（スマホ） */
@media (max-width: 480px) {
  .content-block__table {
    font-size: var(--font-xs-sm); /* 本文サイズに揃える */
  }
}

/* XS以下（小型スマホ） */
@media (max-width: 320px) {
  .content-block__table {
    font-size: var(--font-xxs-sm); /* 本文サイズに揃える */
  }
}


/* ==================================================
   content-block__list（共通リスト）
================================================== */
.content-block__list {
  list-style-type: disc;        /* デフォルトの丸型マーカー */
  margin: var(--spacing-lg) 0;  /* 上下マージン */
  padding-left: var(--spacing-lg); /* 左側インデント */
  color: var(--color-text-main);
  font-family: var(--font-family-main);
  font-size: var(--font-md);
  line-height: var(--line-height-body);
}

/* MDサイズ以下（タブレット向け） */
@media (max-width: 768px) {
  .content-block__list {
    font-size: var(--font-md-sm);
    padding-left: var(--spacing-md-sm);
    margin: var(--spacing-md) 0;
  }
}

/* SMサイズ以下（一般スマホ向け） */
@media (max-width: 480px) {
  .content-block__list {
    font-size: var(--font-xs-sm);
    padding-left: var(--spacing-md-sm);
    margin: var(--spacing-sm) 0;
  }
}

/* XSサイズ以下（小型スマホ向け） */
@media (max-width: 320px) {
  .content-block__list {
    font-size: var(--font-xs-sm);
    padding-left: var(--spacing-sm-sm);
    margin: var(--spacing-sm-sm) 0;
  }
}

/* リストアイテム間の余白 */
.content-block__list li {
  margin-bottom: var(--spacing-sm);
}


/* ==================================================
   FAQブロック共通（共通変数準拠）
================================================== */
.content-block--faq {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

/* FAQタイトル（質問） */
.faq-question {
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding-right: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  transition: color 0.2s;
  font-size: var(--font-md);
  line-height: var(--line-height-body);
}

.faq-question::after {
  content: '+';
  position: absolute;
  right: 0;
  font-weight: bold;
  transition: transform 0.2s;
}

/* FAQが開いた時 */
.faq-item.open .faq-question::after {
  content: '-';
  transform: rotate(180deg);
}

/* FAQ回答 */
.faq-answer {
  display: none;
  font-size: var(--font-md);
  color: var(--color-text-sub);
  padding-left: var(--spacing-md);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-md);
}

/* 開いている回答 */
.faq-item.open .faq-answer {
  display: block;
}

/* -------------------------------------------------
   メディアクエリ対応
--------------------------------------------------*/
/* MD以下（タブレット向け） */
@media (max-width: 768px) {
  .faq-question {
    font-size: var(--font-md-sm);
  }
  .faq-answer {
    font-size: var(--font-md-sm);
    padding-left: var(--spacing-sm);
  }
}

/* SM以下（スマホ向け） */
@media (max-width: 480px) {
  .faq-question {
    font-size: var(--font-xs-sm);
  }
  .faq-answer {
    font-size: var(--font-xs-sm);
  }
}

/* XS以下（小型スマホ向け） */
@media (max-width: 320px) {
  .faq-question {
    font-size: var(--font-xs-sm);
  }
  .faq-answer {
    font-size: var(--font-xs-sm);
  }
}




/* ==================================================
   content-block__cta-buttons（共通ボタンブロック）
================================================== */
.content-block__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  align-items: center;
}

/* CTA用ボタン共通 */
.content-block__cta-buttons .button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-family-main);
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--color-button-text);
  background-color: var(--color-button-bg);
  border: 1px solid var(--color-button-border);
  border-radius: var(--radius-panel);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

/* ホバー時 */
.content-block__cta-buttons .button:hover {
  background-color: var(--color-button-hover-bg);
  color: var(--color-button-hover-text);
}

/* MDサイズ以下 */
@media (max-width: 768px) {
  .content-block__cta-buttons {
    gap: var(--spacing-md-sm);
  }
  .content-block__cta-buttons .button {
    font-size: var(--font-md-sm);
    padding: var(--spacing-sm) var(--spacing-md-sm);
  }
}

/* SMサイズ以下 */
@media (max-width: 480px) {
  .content-block__cta-buttons {
    gap: var(--spacing-sm-sm);
  }
  .content-block__cta-buttons .button {
    font-size: var(--font-xs-sm);
    padding: var(--spacing-sm) var(--spacing-sm-sm);
    width: 100%; /* スマホは縦並び */
  }
}

/* XSサイズ以下 */
@media (max-width: 320px) {
  .content-block__cta-buttons .button {
    font-size: var(--font-xs-sm);
    padding: var(--spacing-sm) var(--spacing-sm-sm);
  }
}




/* ==================================================
   ログインフォーム専用
================================================== */
.content-block--login {
  max-width: var(--login-max-width-default);
  margin: var(--login-margin);
  padding: var(--login-padding);
  background-color: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}

/* ステージ別最大幅 */
.content-block--login[data-stage="1"] { max-width: var(--login-max-width-stage1); }
.content-block--login[data-stage="2"] { max-width: var(--login-max-width-stage2); }

.content-block--login .content-block__wrapper { display: flex; flex-direction: column; gap: 1.2em; }
.content-block--login .content-block__title {
  font-family: var(--font-family-main);
  font-size: var(--font-xl);
  font-weight: 600;
  text-align: center;
  margin-bottom: 1em;
  line-height: var(--line-height-heading);
}
.content-block--login .content-block__form { display: flex; flex-direction: column; gap: 1em; }
.content-block--login .content-block__label { display: flex; flex-direction: column; font-size: var(--font-md); line-height: var(--line-height-body); }
.content-block--login .content-block__input {
  margin-top: 0.4em;
  padding: 0.6em 0.8em;
  font-size: var(--font-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.content-block--login .content-block__input:focus {
  border-color: var(--color-button-text);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  outline: none;
}
.content-block--login .content-block__button {
  padding: 0.7em 1em;
  font-size: var(--font-md);
  border: 1px solid var(--color-button-border);
  border-radius: var(--radius-panel);
  cursor: pointer;
}
.content-block--login .content-block__note {
  font-size: var(--font-sm);
  text-align: center;
  margin-top: 1em;
}

/* MD */
@media (max-width: 768px) {
  .content-block--login {
    padding: var(--login-padding-mobile);
    margin: var(--login-margin-mobile);
  }
  .content-block--login .content-block__title { font-size: var(--font-xl-sm); }
  .content-block--login .content-block__label,
  .content-block--login .content-block__input,
  .content-block--login .content-block__button { font-size: var(--font-md-sm); }
  .content-block--login .content-block__note { font-size: var(--font-xs-sm); }
}

/* SM */
@media (max-width: 480px) {
  .content-block--login .content-block__title { font-size: var(--font-sm); }
  .content-block--login .content-block__label,
  .content-block--login .content-block__input,
  .content-block--login .content-block__button { font-size: var(--font-sm-sm); }
  .content-block--login .content-block__note { font-size: var(--font-xs-sm); }
}

/* XS */
@media (max-width: 320px) {
  .content-block--login .content-block__title { font-size: var(--font-sm); }
  .content-block--login .content-block__label,
  .content-block--login .content-block__input,
  .content-block--login .content-block__button { font-size: var(--font-xs-sm); }
  .content-block--login .content-block__note { font-size: var(--font-xxs-sm); }
}


/* ==============================
   投稿リスト / アイテム
============================== */
.content-block--list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  max-width: var(--section-max-width);
  margin: 0 auto;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.content-block--item {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.content-block--item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.content-block__link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.content-block__figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background-color: var(--color-bg-panel);
  border-bottom: 1px solid var(--color-border);
  border-top-left-radius: var(--radius-panel);
  border-top-right-radius: var(--radius-panel);
}

.content-block__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
  border-top-left-radius: var(--radius-panel);
  border-top-right-radius: var(--radius-panel);
}

.content-block--item:hover .content-block__image {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.content-block__content {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* MD */
@media (max-width: 768px) {
  .content-block--list { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md-sm); }
}

/* SM */
@media (max-width: 480px) {
  .content-block--list { grid-template-columns: 1fr; gap: var(--spacing-sm); }
}

/* XS */
@media (max-width: 320px) {
  .content-block--list { gap: var(--spacing-sm-sm); }
}

.content-block--item {
  max-width: 280px;   /* 横幅制限 */
  margin: 0 auto;     /* 中央寄せ */
}

.content-block__figure {
  aspect-ratio: 16/9;
  width: 100%;        /* 横幅をカードに合わせる */
  height: auto;       /* 高さはアスペクト比に従う */
  max-height: 160px;  /* 高さ制限（必要に応じて調整） */
}

/* ==================================================
   カテゴリボタン | ページネーション
================================================== */
.content-block--buttons ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm); /* 横方向の隙間 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.content-block--buttons li {
  margin: 0;
}

.content-block--buttons a,
.content-block--buttons span {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-main);
  font-size: var(--font-md);
  line-height: var(--line-height-body);
  color: var(--color-button-text);
  text-decoration: none;
  border: 1px solid var(--color-button-border);
  border-radius: var(--radius-panel);
  background-color: var(--color-button-bg);
  transition: all 0.2s ease;
  margin-bottom: var(--spacing-sm); /* 縦方向の隙間 */
  white-space: nowrap;
}

.content-block--buttons a:hover {
  background-color: var(--color-button-hover-bg);
  color: var(--color-button-hover-text);
  border-color: var(--color-button-hover-bg);
}

.content-block--buttons .current {
  font-weight: bold;
  background-color: var(--color-button-hover-bg);
  color: var(--color-button-hover-text);
  border-color: var(--color-button-hover-bg);
  pointer-events: none;
}

/* ----------------------------------------------
   MDサイズ以下（タブレット向け / max-width: 768px）
---------------------------------------------- */
@media (max-width: 768px) {
  .content-block--buttons ul {
    justify-content: center;
    gap: var(--spacing-sm-sm);
  }
  .content-block--buttons a,
  .content-block--buttons span {
    padding: var(--spacing-sm-sm) var(--spacing-md-sm);
    font-size: var(--font-sm);
  }
}

/* ----------------------------------------------
   SMサイズ以下（一般スマホ向け / max-width: 480px）
---------------------------------------------- */
@media (max-width: 480px) {
  .content-block--buttons ul {
    flex-direction: column;
    align-items: stretch;
  }
  .content-block--buttons a,
  .content-block--buttons span {
    width: 100%;
    text-align: center;
  }
}

/* ----------------------------------------------
   XSサイズ以下（小型スマホ向け / max-width: 320px）
---------------------------------------------- */
@media (max-width: 320px) {
  .content-block--buttons a,
  .content-block--buttons span {
    font-size: var(--font-xs-sm);
    padding: var(--spacing-sm-sm) var(--spacing-md-sm);
  }
}



/* ==================================================
   検索フォーム / 検索結果
================================================== */
/* タイトル */
.search-form .content-block__title,
.search-results .content-block__title {
  font-size: var(--font-xl);
  line-height: var(--line-height-heading);
  margin-bottom: var(--spacing-md);
}

/* 入力フォーム */
.search-form .content-block__input-wrapper {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.search-form .content-block__input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background-color: var(--color-bg-main);
  color: var(--color-text-main);
}

/* ボタン */
.search-form .content-block__button,
.search-results .content-block__button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-md);
  color: var(--color-button-text);
  background-color: var(--color-button-bg);
  border: 1px solid var(--color-button-border);
  border-radius: var(--radius-panel);
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s;
}

.search-form .content-block__button:hover,
.search-results .content-block__button:hover {
  background-color: var(--color-button-hover-bg);
  color: var(--color-button-hover-text);
}

/* 検索結果リスト */
.search-results .content-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--spacing-md);
}

.search-results .content-block__item {
  padding: var(--spacing-md);
  background-color: var(--color-bg-panel);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}

.search-results .content-block__link {
  font-size: var(--font-lg);
  font-weight: bold;
  color: var(--color-link);
  text-decoration: none;
}

.search-results .content-block__link:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.search-results .content-block__text {
  font-size: var(--font-md);
  line-height: var(--line-height-body);
  margin-top: var(--spacing-sm);
}

/* ナビゲーションボタン */
.search-results .content-block--buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: flex-start;
  margin-top: var(--spacing-lg);
}

/* MD */
@media (max-width: 768px) {
  .search-form .content-block__input-wrapper { flex-direction: column; }
  .search-results .content-block__list { gap: var(--spacing-md-sm); }
}

/* SM */
@media (max-width: 480px) {
  .search-form .content-block__title,
  .search-results .content-block__title { font-size: var(--font-lg-sm); }

  .search-form .content-block__input,
  .search-form .content-block__button { font-size: var(--font-sm-sm); padding: var(--spacing-sm-sm) var(--spacing-md-sm); }

  .search-results .content-block__link { font-size: var(--font-md-sm); }
  .search-results .content-block__text { font-size: var(--font-sm-sm); }
}

/* XS */
@media (max-width: 320px) {
  .search-form .content-block__title,
  .search-results .content-block__title { font-size: var(--font-sm-sm); }

  .search-form .content-block__input,
  .search-form .content-block__button { padding: var(--spacing-sm-sm) var(--spacing-sm-sm); }

  .search-results .content-block__link { font-size: var(--font-sm-sm); }
}




/* 一針一歩システム */
/* ==================================================
タイトル / サブコピー / 本文（非表示）
================================================== */
/* ラッパーを中央揃え */
.text-section__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

/* タイトルをサブコピー風に */
.text-section__title {
  font-size: var(--font-lg);
  font-weight: 600;
  line-height: var(--line-height-body);
  color: var(--color-text-sub);
  margin-bottom: calc(var(--spacing-sm) / 1.5);
}

/* サブコピーを本文風に */
.text-section__subtitle {
  font-size: var(--font-md);
  line-height: var(--line-height-body);
  color: var(--color-text-sub);
  margin-top: 0;
  margin-bottom: calc(var(--spacing-md) * 1.2);
}

/* 本文は非表示 */
.text-section__text {
  display: none;
}

/* MD */
@media (max-width: 768px) {
  .text-section__title { font-size: var(--font-lg-sm); }
  .text-section__subtitle { font-size: var(--font-md-sm); }
}

/* SM */
@media (max-width: 480px) {
  .text-section__title { font-size: var(--font-sm-sm); }
  .text-section__subtitle { font-size: var(--font-xs-sm); }
}

/* XS */
@media (max-width: 320px) {
  .text-section__title { font-size: var(--font-sm-sm); }
  .text-section__subtitle { font-size: var(--font-xs-sm); }
}






.content-block__tags {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.content-block__tag {
  font-size: 0.75rem;
  padding: 3px 8px;
  background: #eee;
  border-radius: 4px;
  color: #555;
}



/* PC向け：画像左・文字右 */
.hero-landing__inner--flex {
  display: flex;
  align-items: center;
  gap: 2rem; /* 画像と文字の間隔 */
}

.hero-landing__image img {
  max-width: 300px; /* 必要に応じて調整 */
  width: 100%;
  height: auto;
}

/* スマホ向け：縦並び */
@media (max-width: 768px) {
  .hero-landing__inner--flex {
    flex-direction: column;
    text-align: center;
  }

  .hero-landing__image img {
    max-width: 200px; /* スマホで小さく調整 */
    margin-bottom: 1rem;
  }
}