/* =========================================================
   override.css
   並び順: 変数 → 全体 → レイアウト → ヘッダー → hero → スローガン
           → カード → 記事本文 → bottom module → EC・CTA
   ========================================================= */


/* =========================================================
   1. 変数
   ========================================================= */
:root {
  /* 文字色(RGB版は text-body などが使うので必ずセットで変える) */
  --body-color: #252525;
  --body-color-rgb: 37, 37, 37;

  /* フォント(Cassiopeia の見出し・本文が参照する変数) */
  --cassiopeia-font-family-body: "Yu Gothic", YuGothic, "Hiragino Sans", ヒラギノ角ゴシック, Meiryo, sans-serif;
  --cassiopeia-font-family-headings: var(--cassiopeia-font-family-body);
}


/* =========================================================
   2. 全体
   ========================================================= */
body.myClass {
  font-family: var(--cassiopeia-font-family-body);
  font-weight: 500;
}


/* =========================================================
   3. レイアウト(幅と左右の端をすべて Bootstrap の .container に揃える)
   ========================================================= */

/* Cassiopeia のグリッドを解除して、上から順に積むだけにする */
body.myClass .site-grid {
  display: block;
}

/* container 系のガターを Bootstrap 標準(1.5rem = 左右 0.75rem)に揃える
   ※ Cassiopeia の .container は 1em になっているため上書き */
body.myClass :is(.container, .container-fluid, .container-sm, .container-md,
                 .container-lg, .container-xl, .container-xxl,
                 .container-component) {
  --gutter-x: 1.5rem;
}

/* コンポーネント部分を Bootstrap の .container と同じ動きにする */
body.myClass .container-component {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--gutter-x) * .5);
}
@media (min-width: 576px)  { body.myClass .container-component { max-width: 540px; } }
@media (min-width: 768px)  { body.myClass .container-component { max-width: 720px; } }
@media (min-width: 992px)  { body.myClass .container-component { max-width: 960px; } }
@media (min-width: 1200px) { body.myClass .container-component { max-width: 1140px; } }
@media (min-width: 1400px) { body.myClass .container-component { max-width: 1320px; } }


/* =========================================================
   4. ヘッダー
   ========================================================= */
body.myClass .container-header {
  background-color: #fff;
  background-image: unset;
  border-bottom: 1px solid #ddd;
}

@media (width <= 991.98px) {
  body.myClass .container-header {
    position: sticky !important;
  }
}

/* ロゴとハンバーガーを左右に配置(index.php の .cx-header-inner) */
body.myClass .cx-header-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

/* ハンバーガーの親要素を、中身のサイズぴったりに */
body.myClass .cx-header-inner .cx-header-nav {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}
body.myClass .cx-header-inner .cx-header-nav .offcanvas-menu-wrapper {
  display: block;
  width: auto;
}

/* オフキャンバスのサブメニュー: 開いたら矢印を回転 */
.offcanvas-caret {
  display: inline-block;
  transition: transform 0.6s ease;
}
.offcanvas-submenu-toggle[aria-expanded="true"] .offcanvas-caret {
  transform: rotate(180deg);
}


/* =========================================================
   5. hero
   ========================================================= */
.cx-hero {
  position: relative; /* キャプションを絶対配置するための基準 */
}

.cx-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホ縦向きのみ縦長にトリミング */
@media (max-width: 767.98px) and (orientation: portrait) {
  .cx-hero img {
    aspect-ratio: 3 / 4; /* 用意する縦長画像の実際の比率に合わせて調整 */
    object-fit: cover;
  }
}

/* lg 未満で画面幅いっぱいに広げる(フルブリード) */
@media (max-width: 991.98px) {
  .cx-hero {
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

/* キャプション: 画像の上に重ねて上下左右中央 */
.cx-hero-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: #fff;
  text-align: center;
  /* 文字を読みやすくするための暗いオーバーレイ */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* 見出し・補足文の共通部分(背景に負けないよう縁取り+影) */
.cx-hero-caption h2,
.cx-hero-caption p {
  margin: 0;
  font-family: 'Shippori Mincho', serif;
  font-weight: bold;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.7),
     1px -1px 0 rgba(0, 0, 0, 0.7),
    -1px  1px 0 rgba(0, 0, 0, 0.7),
     1px  1px 0 rgba(0, 0, 0, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(0, 0, 0, 0.4);
}
.cx-hero-caption h2 {
  font-size: clamp(1.1rem, 5vw, 1.8rem);
}
.cx-hero-caption p {
  font-size: clamp(0.85rem, 3.5vw, 1.1rem);
}


/* =========================================================
   6. スローガン(blog.php の .cx-slogan)
   ========================================================= */
body.myClass .cx-slogan :is(h1, h2) {
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #1a5fb4;
  font-family: 'Shippori Mincho', serif;
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  font-weight: bold;
  text-wrap: balance;
}

/*
breadcrumbs
*/
.mod-breadcrumbs .cx-wrap-start { margin-left: auto; }
/* 2段目の先頭の「/」は見えなくする（場所は残すので、折り返しの判定が変わらない） */
.mod-breadcrumbs .cx-wrap-start::before { visibility: hidden; }

/* =========================================================
   7. カード（blog.php)とか
   ========================================================= */
body.myClass h1.my-category-title ,
body.myClass h2.my-category-title{
  font-size: clamp(1.3rem, 6.0vw, 1.8rem);
}

/* 見出しの文字サイズをカード幅基準(cqi)で決める */
body.myClass .card {
  container-type: inline-size;
}
/* カードのタイトル（ホームの注目記事・カテゴリー一覧・記事下の関連製品で共通）：カード1枚の幅に合わせる */
body.myClass :is(.cx-blog, .related-products) .card-title {
  font-size: clamp(0.8rem, 8cqi, 1.2rem);
  word-break: auto-phrase;
  text-wrap: balance;
}

/* カードとギャラリー画像のホバー演出
   ・一覧(blog.php / featured/default.php の .cx-blog)と記事下の関連製品のカード
   ・記事のギャラリー(GLightbox)のサムネイル画像
   ※ body の layout-blog は記事ページにも付くので使わない(本文のカードまで動いてしまう) */
body.myClass :is(.cx-blog, .related-products) .card,
body.myClass .article-image-gallery img {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.myClass :is(.cx-blog, .related-products) .card:hover,
body.myClass .article-image-gallery a:is(:hover, :focus-visible) img {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  body.myClass :is(.cx-blog, .related-products) .card,
  body.myClass .article-image-gallery img {
    transition: none;
    transform: none !important;
  }
}


/* =========================================================
   8. 記事本文
   ========================================================= */
body.myClass .lead {
  font-weight: normal;
}

body.myClass .com-content-article__body h1,
body.myClass .page-header h1{
  font-size: clamp(1.3rem, 7.0vw, 1.8rem);
}

/* 本文の h2 に青い下線 */
body.myClass .com-content-article__body h2 {
  padding-bottom: .2rem;
  border-bottom: 3px solid var(--cassiopeia-color-link);
  font-size: clamp(1.2rem, 6.5vw, 1.6rem);
  font-weight: 700;
  text-wrap: balance;
  word-break: auto-phrase;
}

/* 記事の本文の中のカード：h2（最大1.25rem）より小さく、画面の幅に合わせる */
body.myClass .com-content-article__body .card-title {
  font-size: clamp(1.2rem, 5.5vw, 1.3rem);
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 横スクロールする表: 1列目(行見出し)を固定 */
.table-responsive th[scope="row"],
.table-responsive thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #fff;
}
.table-responsive thead th:first-child {
  background-color: #f8f9fa;
}
.table-responsive th[scope="row"]::after,
.table-responsive thead th:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border-right: 1px solid #dfe3e7;
}


/* =========================================================
   9. bottom module
   背景は画面幅いっぱい、中身の幅は中の .container で揃える
   ========================================================= */
body.myClass .site-grid .container-bottom-a {
  margin-top: 1rem;
  background: #f2f2f0;
}


/* =========================================================
   10. EC・お問い合わせ・CTA
   ========================================================= */

/* 緑のストライプ背景(見出し・CTA で共用) */
.cx-stripe {
  color: #1C9A4B;
  background: repeating-linear-gradient(-45deg, #f0fbf3, #f0fbf3 3px, #e3f7ea 3px, #e3f7ea 7px);
}

/* お問い合わせ全幅バナー */
.cx-contact-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 1.1rem 1.5rem;
  background: #f2f2f0;
  border: 1px solid #ddd;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cx-contact-banner:hover,
.cx-contact-banner:focus {
  color: inherit;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.cx-contact-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.cx-contact-banner-icon svg {
  width: 28px;
  height: 28px;
}
.cx-contact-banner-text {
  font-weight: bold;
  font-size: 1.05rem;
}

/* 記事上部用の小さめバリエーション(.cx-contact-banner と併用) */
.cx-contact-banner-sm {
  display: inline-flex;
  margin-bottom: 1.5rem;
  padding: 0.6rem 1.2rem;
  font-weight: bold;
  font-size: 0.95rem;
}

/* フローティング CTA ボタン(スマホのみ表示) */
.cx-floating-cta {
  display: none;
}

@media (max-width: 767.98px) {
  .cx-floating-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 0.9rem;
    background: #0F89DB;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
  }
  .cx-floating-cta:hover,
  .cx-floating-cta:focus {
    background: #0c6fb0;
    color: #fff;
    text-decoration: none;
  }

  /* フローティングボタンで隠れる分、ページ下に余白を追加 */
  body.recruit-page {
    padding-bottom: 4.5rem;
  }
}