@charset "utf-8";

/* ==========================================================================
   common.css
   全ページ共通スタイル
   ------------------------------------------------------------------------
   1rem = 10px（reset.css の html { font-size: 62.5%; } 前提）
   ブレークポイント： PC 1024px以上 ／ タブレット 768〜1023px ／ SP 767px以下
                     共通ヘッダーのみ 1260px 以下でハンバーガーメニュー
   命名： l- レイアウト ／ c- 共通コンポーネント ／ p- ページ固有
          u- ユーティリティ ／ js- JSフック ／ is- 状態
   ========================================================================== */

/* ==========================================================================
   1. カラー変数
   ========================================================================== */
:root {
  --color-main: #002eaf;        /* メインカラー */
  --color-navy: #002488;        /* フッター・SPメニュー背景 */
  --color-bg-blue: #deeafc;     /* 背景用ブルーカラー */
  --color-bg-beige: #F9F4EB;    /* 背景用ベージュカラー */
  --color-border-blue: #D8DFEC; /* 境界線用ブルーカラー */
  --color-text: #333333;        /* 基本文字色 */
  --color-text-strong: #000000; /* 本文より強く見せたい文字（見出しのサブタイトル・ヘッダーのナビなど） */
  --header-height-pc: 11rem;    /* PCヘッダー高さ */
  --header-height-sp: 7rem;     /* タブレット・SPヘッダー高さ */
}

/* ==========================================================================
   2. base
   ========================================================================== */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--color-text);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s, opacity 0.2s;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

strong,
b {
  font-weight: 700;
}

/* メニュー展開中・モーダル表示中（ライトボックスなど）は背面をスクロールさせない */
html.is-menu-open,
html.is-menu-open body,
html.is-modal-open,
html.is-modal-open body {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  body {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   3. レイアウト
   ========================================================================== */
/* コンテンツ幅（NEWS / REASON / SERVICE） */
.l-inner {
  width: 140rem;
  max-width: 90%;   /* SPは90%（REASONセクションの指定） */
  margin-inline: auto;
}

/* コンテンツ幅970px（WORKS） */
.l-inner--works {
  width: 97rem;
  max-width: 90%;
}

/* コンテンツ幅1000px（お知らせ・事業内容など下層ページ） */
.l-inner--md {
  width: 100rem;
  max-width: 90%;
}

/* ヘッダーがfixedになる幅（1260px以下）で、隠れる分の余白を確保する */
@media screen and (max-width: 1260px) {
  .l-main {
    padding-top: var(--header-height-sp);
  }
}

/* ==========================================================================
   4. ユーティリティ
   ========================================================================== */
.u-tb,
.u-sp {
  display: none;
}

@media screen and (max-width: 1023px) {
  .u-pc { display: none; }
  .u-tb { display: revert; }
}

@media screen and (max-width: 767px) {
  .u-tb { display: none; }
  .u-sp { display: revert; }
}

/* スクリーンリーダー用（視覚的に非表示） */
.u-visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   5. 共通見出し（英字＋和文）
   ------------------------------------------------------------------------
   .c-heading          … inline-block。和文が英字の中央に揃い、
                         見出しブロック自体は親の text-align に従う
   .c-heading--center  … ブロック全体を中央寄せする場合
   ========================================================================== */
.c-heading {
  display: inline-block;
  text-align: center;
}

.c-heading--center {
  display: block;
  text-align: center;
}

.c-heading__en {
  display: block;
  font-size: 4.6rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.1em;
  color: var(--color-main);
}

.c-heading__ja {
  display: block;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-strong);
}

@media screen and (max-width: 767px) {
  .c-heading__en {
    font-size: 3.4rem;
  }

  .c-heading__ja {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   6. 共通リンクボタン
   ========================================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 26rem;
  max-width: 100%;
  height: 5.6rem;
  padding: 0 2rem;
  border: 1px solid var(--color-main);
  border-radius: 10px;
  background-color: transparent;
  color: var(--color-main);
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0.1em;
  transition: background-color 0.2s, color 0.2s;
}

/* 幅の狭いボタン（NEWSの「一覧」など） */
.c-btn--sm {
  width: 20rem;
}

.c-btn__label {
  flex: 1;
  text-align: center;
}

/* 右向き矢印 */
.c-btn__arrow {
  flex-shrink: 0;
  width: 2.4rem;
  height: 0.65rem;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/common/icon_arrow_right_blue.svg") no-repeat center center / contain;
          mask: url("/assets/img/common/icon_arrow_right_blue.svg") no-repeat center center / contain;
  transition: transform 0.2s;
}

@media (hover: hover) {
  .c-btn:hover {
    background-color: var(--color-main);
    color: #fff;
  }

  .c-btn:hover .c-btn__arrow {
    transform: translateX(10px);
  }
}

@media screen and (max-width: 1023px) {
  .c-btn,
  .c-btn--sm {
    width: 100%;
    max-width: none;
    height: 5.2rem;
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   7. 共通ヘッダー
   ========================================================================== */
.l-header {
  background-color: #fff;
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  height: var(--header-height-pc);
  padding: 0 2.4rem;
}

/* ------------------------------ ロゴ ------------------------------ */
.l-header__logo {
  flex-shrink: 0;
  width: 35rem;
  line-height: 1;
}

.l-header__logo a {
  display: block;
}

.l-header__logo img {
  width: 100%;
}

/* ------------------------ ナビ＋電話（PCは横並び） ------------------------ */
.l-header__body {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

/* ------------------------------ グローバルナビ ------------------------------ */
.l-nav__list {
  display: flex;
  align-items: center;
  gap: 2.4rem;   /* 各リストの横幅の余白 24px */
}

.l-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.2rem;   /* HOMEアイコン（2.2rem）と高さを揃え、下線の位置を統一する */
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--color-text-strong);
}

/* 下線（カレント／hoverで左から伸びる） */
.l-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.8rem;
  width: 100%;
  height: 2px;
  background-color: var(--color-main);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s;
}

/* カレント表示（文字色＋下線） */
.l-nav__link.is-current {
  color: var(--color-main);
}

.l-nav__link.is-current::after {
  transform: scaleX(1);
}

/* HOMEアイコン */
.l-nav__icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/common/icon_home_black.svg") no-repeat center center / contain;
          mask: url("/assets/img/common/icon_home_black.svg") no-repeat center center / contain;
}

/* PCでは「HOME」の文字は視覚的に非表示（読み上げ用に残す） */
.l-nav__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* プライバシーポリシーはハンバーガーメニュー内だけに表示 */
.l-nav__item--sp {
  display: none;
}

/* hoverはPC幅のみ。ドロワー展開時はアニメーションさせない */
@media (min-width: 1261px) and (hover: hover) {
  .l-nav__link:hover {
    color: var(--color-main);
  }

  .l-nav__link:hover::after {
    transform: scaleX(1);
  }
}

/* ------------------------------ 電話番号 ------------------------------ */
.l-header__tel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
}

.l-header__telnum {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-main);
}

.l-header__telicon {
  width: 2.7rem;
  height: auto;
  transform: translateY(3px) rotate(90deg);
}

.l-header__telicon--white {
  display: none;
}

/* 「受付時間 9:00～17:00（土日祝除く）」 */
.l-header__telhours {
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-align: justify;
  text-align-last: justify;
  color: var(--color-text-strong);
}

/* ------------------------ ハンバーガーボタン ------------------------ */
.l-header__btn {
  display: none;
}

/* ==========================================================================
   8. 共通ヘッダー（ハンバーガーメニュー：1260px以下）
   ========================================================================== */
@media screen and (max-width: 1260px) {

  .l-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
  }

  .l-header__inner {
    height: var(--header-height-sp);
    padding: 0 2rem;
  }

  /* タブレットはPC（35rem）の80% */
  .l-header__logo {
    width: 28rem;
  }

  /* ---------------------- ドロワーメニュー ---------------------- */
  .l-header__body {
    position: fixed;
    top: var(--header-height-sp);
    right: 0;
    z-index: 99;
    display: block;
    width: 100%;
    height: calc(100vh - var(--header-height-sp));
    height: calc(100dvh - var(--header-height-sp));
    padding-bottom: 4rem;
    overflow-y: auto;
    background-color: var(--color-navy);
    color: #fff;
    transform: translateX(100%);
    transition: transform 0.2s ease-in-out;
  }

  .l-header__body.is-open {
    transform: translateX(0);
  }

  html.is-resizing .l-header__body {
    transition: none;
  }

  /* ナビ */
  .l-nav__list {
    display: block;
    margin-top: 1.3rem;
  }

  .l-nav__item {
    border-bottom: 1px solid #fff;
  }

  .l-nav__item--sp {
    display: block;
  }

  .l-nav__link {
    justify-content: center;
    gap: 1.2rem;
    height: 7.2rem;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #fff;
  }

  /* ドロワー内はカレント表示なし（紺背景では視認性が落ちるため） */
  .l-nav__link.is-current {
    color: #fff;
  }

  .l-nav__link.is-current::after {
    display: none;
  }

  .l-nav__icon {
    width: 2.4rem;
    height: 2.4rem;
  }

  /* ドロワー内では「HOME」の文字も表示する */
  .l-nav__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }

  /* 電話番号 */
  .l-header__tel {
    padding-top: 3.6rem;
    text-align: center;
  }

  .l-header__telnum {
    justify-content: center;
    font-size: 2.8rem;
    color: #fff;
  }

  .l-header__telicon--blue {
    display: none;
  }

  .l-header__telicon--white {
    display: block;
    width: 2.4rem;
  }

  /* ドロワー内は紺背景なので、PCの黒（--color-text-strong）を白に戻す */
  .l-header__telhours {
    letter-spacing: 0.05em;
    text-align: center;
    text-align-last: center;
    color: #fff;
  }

  /* ---------------------- ハンバーガーボタン ---------------------- */
  /* 三本線の周囲の余白も含めて 70×70px 全体をタップ領域にする */
  .l-header__btn {
    position: relative;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 7rem;
    height: 7rem;
    margin-right: -2rem;   /* .l-header__inner の左右padding分を打ち消して画面右端まで広げる */
  }

  /* 三本線そのものの大きさ（見た目は従来どおり） */
  .l-header__btnlines {
    position: relative;
    display: block;
    width: 2.8rem;
    height: 2rem;
  }

  .l-header__btnline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-main);
    transition: 0.2s ease-in-out;
  }

  .l-header__btnline:nth-of-type(1) { top: 0; }
  .l-header__btnline:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
  .l-header__btnline:nth-of-type(3) { bottom: 0; }

  /* 展開時は✕マークへ */
  .l-header__btn.is-open .l-header__btnline:nth-of-type(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .l-header__btn.is-open .l-header__btnline:nth-of-type(2) {
    opacity: 0;
  }

  .l-header__btn.is-open .l-header__btnline:nth-of-type(3) {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* ------------------------ ロゴのみSPで別サイズ ------------------------ */
@media screen and (max-width: 767px) {

  /* SPは従来（18.5rem）の120% */
  .l-header__logo {
    flex-shrink: 1;   /* 360pxより狭い端末でロゴがはみ出さないようにする保険 */
    width: 22.2rem;
  }
}

/* ==========================================================================
   9. CONTACT（共通フッター上部）
   ========================================================================== */
.l-contact {
  padding: 7rem 0 8rem;   /* イラストを画面左右端に接触させるため左右paddingは持たせない */
  background-color: var(--color-bg-beige);
}

.l-contact__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.2rem;
}

.l-contact__head .c-heading {
  flex-shrink: 0;
}

/* タイトル左右のラインイラスト */
.l-contact__illust {
  flex: 1 1 0;
  min-width: 0;
  height: 4.5rem;
  object-fit: contain;
}

.l-contact__illust--left {
  object-position: left center;
}

.l-contact__illust--right {
  object-position: right center;
}

.l-contact__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
  margin-top: 3.2rem;
  padding-inline: 2.4rem;   /* .l-contact の左右paddingを撤去した分をこちらで確保 */
}

.l-contact__text {
  line-height: 2;
}

.l-contact__tel {
  flex-shrink: 0;
  text-align: center;
}

.l-contact__telnum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-main);
}

/* 回転と3px下げの考え方はヘッダーの .l-header__telicon と同じ */
.l-contact__telnum img {
  width: 3.4rem;
  height: auto;
  transform: translateY(3px) rotate(90deg);
}

.l-contact__telhours {
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 1023px) {
  .l-contact__body {
    gap: 4rem;
  }

  .l-contact__telnum {
    font-size: 3.4rem;
  }
}

@media screen and (max-width: 767px) {
  .l-contact {
    padding: 5rem 0 6rem;
  }

  /* SPではラインイラストは非表示 */
  .l-contact__illust {
    display: none;
  }

  .l-contact__body {
    display: block;
    margin-top: 2.4rem;
    padding-inline: 5%;
    text-align: center;
  }

  /* 本文は左揃えのまま、ブロックごと中央に配置する */
  .l-contact__text {
    width: fit-content;
    margin-inline: auto;
    text-align: left;
  }

  .l-contact__tel {
    margin-top: 2.4rem;
  }

  .l-contact__telnum {
    font-size: 2.8rem;
  }

  .l-contact__telnum img {
    width: 2.6rem;
  }

  .l-contact__telhours {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   10. フッター
   ========================================================================== */
.l-footer {
  padding: 5.6rem 0 2.4rem;
  background-color: var(--color-navy);
  color: #fff;
}

.l-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6rem;
  width: 140rem;
  max-width: 90%;
  margin-inline: auto;
}

/* ------------------------------ 会社情報 ------------------------------ */
.l-footer__info {
  flex-shrink: 0;
}

.l-footer__logo {
  width: 30rem;
  line-height: 1;
}

.l-footer__logo img {
  width: 100%;
}

.l-footer__address {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.8;
}

.l-footer__tel {
  margin-top: 0.4rem;
  font-size: 1.4rem;
  line-height: 1.8;
}

.l-footer__tel a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.l-footer__tel img {
  width: 1.6rem;
  height: auto;
  transform: rotate(90deg);
}

.l-footer__telhours {
  font-size: 1.4rem;
  line-height: 1.8;
}

/* ------------------------------ フッターナビ ------------------------------ */
.l-footer__nav {
  flex: 1 1 auto;
  max-width: 64rem;
}

.l-fnav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem 4rem;
}

.l-fnav__link {
  font-weight: 400;
  line-height: 1.6;
}

@media (hover: hover) {
  .l-fnav a:hover {
    opacity: 0.7;
  }

  /* ロゴタイプはhoverアニメーション無し */
  .l-footer__tel a:hover {
    opacity: 0.7;
  }
}

/* ------------------------------ コピーライト ------------------------------ */
.l-footer__copyright {
  margin-top: 8rem;   /* TOPに戻るボタンとフッターナビのリンクが重ならないよう余裕を持たせる */
  font-size: 1.3rem;
  line-height: 1.6;
  text-align: center;
}

/* ------------------------------ タブレット ------------------------------ */
@media screen and (max-width: 1023px) {
  .l-footer__inner {
    flex-direction: column;
    gap: 3.2rem;
  }

  .l-footer__nav {
    width: 100%;
    max-width: 100%;
  }
}

/* ------------------------------ SP ------------------------------ */
@media screen and (max-width: 767px) {
  .l-footer {
    padding: 4rem 0 2.4rem;
  }

  /* ナビを全幅にするため、l-footer__inner の左右余白は各ブロック側で持たせる */
  .l-footer__inner {
    width: 100%;
    max-width: 100%;
  }

  .l-footer__info {
    width: 100%;
    padding-inline: 5%;
    text-align: center;
  }

  .l-footer__logo {
    width: 24rem;
    margin-inline: auto;
  }

  .l-footer__tel a {
    justify-content: center;
  }

  /* ナビは2カラムの罫線グリッド（罫線は1px・白の50%） */
  .l-fnav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding-block: 1px;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .l-fnav__item {
    background-color: var(--color-navy);
  }

  .l-fnav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.6rem;
    font-size: 1.5rem;
  }

  .l-footer__copyright {
    margin-top: 7.2rem;
  }
}

/* ==========================================================================
   11. TOPに戻るボタン
   ========================================================================== */
.c-totop {
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 8.4rem;
  height: 8.4rem;
  border: 1px solid #fff;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.05em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

/* 下向き矢印のSVGを180deg回転して上向きにする */
.c-totop__arrow {
  width: 2.2rem;
  height: auto;
  transform: rotate(180deg);
}

/* 200pxスクロールでフェードイン */
.c-totop.is-visible {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 767px) {
  .c-totop {
    right: 1.6rem;
    bottom: 1.6rem;
    width: 7.2rem;
    height: 7.2rem;
    font-size: 1.7rem;
  }

  .c-totop__arrow {
    width: 2rem;
  }
}

/* ==========================================================================
   12. 下層ページ共通パーツ（タイトルセクション／パンくず／セクション見出し／ページ内リンク）
   ========================================================================== */
/* ------------------------------ タイトルセクション ------------------------------ */
.c-pagetitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32rem;
  margin-bottom: 0.8rem;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 写真がうっすら透ける半透明の帯（メインカラー #002eaf の不透明度80%） */
.c-pagetitle__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 39rem;
  max-width: 80%;   /* 画面幅360pxで288pxになる */
  height: 9.5rem;
  text-align: center;
  background-color: rgba(0, 46, 175, 0.8);   /* = var(--color-main) の80%。rgba()には変数を渡せないため直書き */
  border-radius: 10px;
}

.c-pagetitle__ja {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

.c-pagetitle__en {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #fff;
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .c-pagetitle {
    height: 25rem;
  }

  .c-pagetitle__inner {
    height: 7rem;
  }

  .c-pagetitle__ja {
    font-size: 2.4rem;
  }

  .c-pagetitle__en {
    font-size: 1.6rem;
  }
}

/* ------------------------------ パンくず ------------------------------ */
.c-breadcrumb {
  margin-bottom: 7.2rem;
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 1.6rem;
  line-height: 1.5;
}

.c-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 素材が下向き矢印のため、-90degで右向きにする */
.c-breadcrumb__arrow {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  transform: rotate(-90deg);
}

@media (hover: hover) {
  .c-breadcrumb__link:hover {
    color: var(--color-main);
  }
}

/* ------------------------------ タブレット ------------------------------ */
@media screen and (max-width: 1023px) {
  .c-breadcrumb {
    margin-bottom: 4rem;
  }

  .c-breadcrumb__list {
    row-gap: 0.5rem;
    font-size: 1.4rem;
  }

  .c-breadcrumb__arrow {
    width: 1.6rem;
    height: 1.6rem;
  }
}

/* ------------------------------ セクション見出し ------------------------------ */
.c-sectitle {
  display: flex;
  align-items: center;
  min-height: 8rem;
  padding: 1.6rem 2.4rem;
  border-radius: 10px;
  background-color: var(--color-bg-blue);
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .c-sectitle {
    min-height: 6rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.8rem;
  }
}

/* ------------------------------ ページ内リンク ------------------------------ */
.c-anchorlink {
  margin-bottom: 7.2rem;
}

.c-anchorlink__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
}

/* 文字・矢印ともメインカラー。hoverアニメーションは無し */
.c-anchorlink__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--color-main);
  font-size: 1.6rem;
  line-height: 1.6;
}

/* ラベル */
.c-anchorlink__label {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 下向き矢印 */
.c-anchorlink__arrow {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/common/icon_arrow_below_blue.svg") no-repeat center center / contain;
          mask: url("/assets/img/common/icon_arrow_below_blue.svg") no-repeat center center / contain;
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .c-anchorlink {
    margin-bottom: 4rem;
  }

  .c-anchorlink__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
    width: -webkit-fit-content;   /* 古いSafari向け */
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    gap: 1.6rem 2.4rem;
  }

  .c-anchorlink__link {
    justify-content: center;
    font-size: 1.5rem;
  }

  .c-anchorlink__arrow {
    width: 1.6rem;
    height: 1.6rem;
  }
}

/* ------------------------------ SP ------------------------------ */
@media screen and (max-width: 767px) {
  .c-anchorlink__list {
    column-gap: 1.6rem;   /* row-gapは1.6remのまま */
  }

  .c-anchorlink__label {
    letter-spacing: 0.05em;
  }
}

/* ==========================================================================
   13. ページャー
   ------------------------------------------------------------------------
   一覧ページ共通のページ送り。お知らせ一覧（/news/）と
   実績紹介（/works/）で使用します。
   ========================================================================== */
.c-pager {
  margin-top: 7.2rem;
}

.c-pager__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
}

.c-pager__link {
  position: relative;   /* 読み上げ用テキスト（.u-visuallyhidden）の基準 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--color-main);
  border-radius: 10px;
  background-color: #fff;
  color: var(--color-main);
  font-size: 1.6rem;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}

/* カレントページは色が反転する */
.c-pager__link.is-current {
  background-color: var(--color-main);
  color: #fff;
}

span.c-pager__link:not(.is-current) {
  opacity: 0.35;
}

/* 押せるボタンだけhoverで色が反転する（矢印はmask＋currentColorなので自動で白くなる） */
@media (hover: hover) {
  a.c-pager__link:hover {
    background-color: var(--color-main);
    color: #fff;
  }
}

/* 一覧の矢印と同じSVGを mask で描画 */
.c-pager__arrow {
  width: 1.5rem;
  height: 0.4rem;
  background-color: currentColor;
  -webkit-mask: url("/assets/img/common/icon_arrow_right_blue.svg") no-repeat center center / contain;
          mask: url("/assets/img/common/icon_arrow_right_blue.svg") no-repeat center center / contain;
}

.c-pager__link--prev .c-pager__arrow {
  transform: scaleX(-1);
}

/* 省略記号（…） */
.c-pager__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 4rem;
  color: var(--color-main);
  font-size: 1.6rem;
  line-height: 1;
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .c-pager {
    margin-top: 4rem;
  }

  .c-pager__list {
    flex-wrap: wrap;
    gap: 0.8rem;
    row-gap: 1.2rem;
  }

  .c-pager__ellipsis {
    width: 1.6rem;
  }
}

/* ==========================================================================
   14. PDFダウンロード（施工実績一覧／会社概要）
   ========================================================================== */
.c-pdfdl__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.2rem;
  padding: 4.8rem;
  border-radius: 10px;
  background-color: var(--color-bg-blue);
}

/* 文章が長くなってもボタンを押し出さず、先に折り返させる */
.c-pdfdl__head {
  min-width: 0;
}

.c-pdfdl__title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-main);
}

.c-pdfdl__text {
  margin-top: 2rem;
}

/* ダウンロードボタン */
.c-pdfdl__btn {
  position: relative;   /* アイコンと読み上げ用テキストの基準 */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rem;
  height: 8rem;
  border: 1px solid var(--color-main);
  border-radius: 10px;
  background-color: transparent;
  color: var(--color-main);
  font-size: 2.4rem;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}

.c-pdfdl__icon {
  position: absolute;
  top: 50%;
  right: 5.6rem;
  width: 3rem;
  transform: translateY(-50%);
}

/* hoverは共通リンクボタン（.c-btn）と同じく色を反転させる */
@media (hover: hover) {
  .c-pdfdl__btn:hover {
    background-color: var(--color-main);
    color: #fff;
  }
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .c-pdfdl__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2.4rem 1.6rem;
  }

  .c-pdfdl__title {
    font-size: 2rem;
  }

  .c-pdfdl__text {
    margin-top: 0.8rem;
    font-size: 1.5rem;
  }

  .c-pdfdl__btn {
    width: 100%;
    height: 6rem;
    margin-top: 2rem;
    font-size: 2rem;
  }

  .c-pdfdl__icon {
    width: 2.2rem;
  }
}