/* ============================================
   しごとを知ろう_扉
   FUJITA築育サイト

   「フジタってどんな会社？_扉」(company.css)をベースに、
   カード枚数・サイズ・タイトル位置などの差分のみ調整。
   .tobira- プレフィックスのクラスは共通の考え方を流用。
   ============================================ */

.tobira-hero {
  position: relative;
  width: 100%;
  height: 832px;
  background: #DAF2FF;
  overflow: hidden;
  margin-bottom: -1px; /* フッター(#0E845C)との境目のサブピクセルの縞を防止 */
}

.is-pc-only { display: block !important; }
.is-sp-only { display: none !important; }

.tobira-hero__bg-bottom {
  position: absolute;
  left: 0;
  right: 0;
  top: 603px;
  bottom: 0;
  background: #0F825D;
  z-index: 0;
}

.tobira-frame {
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  z-index: 1; /* bg-bottomより確実に手前 */
}

.tobira-frame img,
.tobira-frame > * {
  position: absolute;
}

/* 雲（TOP流用のmv-cloud.svg） */
.tobira-cloud {
  z-index: 1;
}

/* 風船（TOPのmv-baloonと同サイズ・同アニメーション） */
.tobira-baloon {
  width: 32px;
  z-index: 1;
  animation: mv-float-y 3s ease-in-out infinite;
}

@keyframes mv-float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ページタイトル（グラデーション文字） */
.tobira-title {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 900;
  text-align: center;
  background: linear-gradient(125.5deg, #0E845C 9.5%, #0867AE 94.8%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: clamp(32px, 4.6875vw, 60px); /* .work-mv-titleと統一 */
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: 2;
}

.tobira-title.is-pc-only {
  font-size: clamp(32px, 4.6875vw, 60px); /* 60px at 1280px viewport, scales down with window width */
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.tobira-title.is-sp-only {
  font-size: clamp(24px, 10.256vw, 40px); /* 40px at 390px viewport */
  line-height: 1.25;
  letter-spacing: 0.05em;
  white-space: nowrap; /* <br>で意図した2行のみにし、各行が再度折り返さないようにする */
  background: linear-gradient(103.1deg, #0E845C 9.5%, #0867AE 94.8%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* しごとを知ろう_扉のみ：グラデーション角度が異なる（Figma確認値98.8°） */
.tobira-title.is-sp-only.tobira-title--work {
  background: linear-gradient(98.8deg, #0E845C 9.5%, #0867AE 94.8%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 説明テキスト（プレースホルダー） */
.tobira-desc {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 700;
  color: #414141;
  text-align: center;
  z-index: 2;
}

.tobira-desc.is-pc-only {
  font-size: clamp(16px, 2.03125vw, 26px); /* 26px at 1280px viewport */
  letter-spacing: 0.1em;
  line-height: 1.4;
  white-space: nowrap;
}

.tobira-desc.is-sp-only {
  font-size: clamp(14px, 5.641vw, 16px);
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* 見出し＋導入文ラッパー（共通クラス.mv-textblockはstyle.cssに定義。ここではtopのみ） */
.mv-textblock {
  top: 131px;
}

/* イラスト装飾エリアの背景楕円（top-illust__ellipseと同じ手法を流用） */
.tobira-illust-ellipse {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #0F825D; /* tobira-hero__bg-bottomと同色に統一 */
  z-index: 0;
}

.tobira-illust-ellipse.is-pc-only {
  top: 402.6px;
  width: max(1894px, calc(100vw + 200px));
  height: 352px;
}

.tobira-illust-ellipse.is-sp-only {
  top: 325.5px;
  width: max(507px, calc(100vw + 100px));
  height: 148px;
}

.tobira-illust {
  z-index: 1;
}

/* 芝（ドキュメント上は「矢印」表記。illust-grass.svg流用） */
.tobira-grass {
  z-index: 1; /* 楕円(0)より手前、カード(2)より背面 */
}

/* リンクカード：PC 3列×2行グリッド */
.tobira-cards.is-pc-only {
  left: 21.016%; /* 269/1280 */
  top: 508px;
  width: 57.969%; /* 742/1280 */
  height: 210px;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
}

/* リンクカード：SP 1列×6行縦並び */
.tobira-cards.is-sp-only {
  left: 8.718%; /* 34/390 */
  top: 387px;
  width: 320px;
  display: none !important; /* PCでは隠す。表示はSPメディアクエリ側で指定 */
  flex-direction: column;
  gap: 17px;
}

.tobira-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--color-green);
  border-radius: 20px;
  font-family: var(--font-main);
  font-weight: 700;
  color: #0E845C;
  text-align: center;
  transition: border-color var(--transition), border-width var(--transition);
}

/* ホバー時はopacityを下げず、ボーダーの変化で気付けるようにする（top-intro__cardと同じ手法） */
.tobira-card:hover {
  opacity: 1;
  border: 8px solid orange;
}

.tobira-cards.is-pc-only .tobira-card {
  min-height: 100px; /* ルビ表示で行が増えても高さが伸びるようにheight→min-height */
  font-size: 18px;
  letter-spacing: 1.8px;
  line-height: 1.3;
}

.tobira-cards.is-sp-only .tobira-card {
  min-height: 90px; /* ルビ表示で行が増えても高さが伸びるようにheight→min-height */
  font-size: 22px;
  letter-spacing: 2.2px;
  line-height: 1.3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* けんぞーくん＋戻るボタン */
.tobira-guide {
  position: fixed;
  bottom: 20%; /* フッターのロゴ・テキストと被らないよう引き上げ（PC向け。SPは下部メディアクエリで別途上書き） */
  left: var(--space-md); /* .btn-float-coinのrightをleftに反転した位置 */
  z-index: 3;
}

.tobira-guide.is-pc-only {
  width: 115px;
  height: 216px; /* 最大の立ち絵(ハク152px)が収まる高さ：64(重なり)+152 */
}

.tobira-guide.is-sp-only {
  width: 73px;
  height: 137px; /* 40(重なり)+97 */
}

/* キャラ画像：初期は非表示、is-activeが付いたものだけ表示 */
.tobira-guide__char {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.tobira-guide__char.is-active {
  display: block;
}

.tobira-guide.is-pc-only .tobira-guide__char {
  width: 115px;
  bottom: 64px; /* ボタン円(108px)に対して上側64pxの位置に足元を合わせる */
}

.tobira-guide.is-sp-only .tobira-guide__char {
  width: 73px;
  bottom: 40px;
}

/* 戻るボタン（フジタコインをチェックと同じグラデーション枠の手法） */
.tobira-guide__btn {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(95deg, #0E845C 9.49%, #0867AE 94.76%) border-box;
  color: #0E845C;
  font-family: var(--font-main);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.tobira-guide__btn-line {
  display: block;
}

.tobira-guide.is-pc-only .tobira-guide__btn {
  width: 108px;
  height: 108px;
  border: 4px solid transparent;
  font-size: 20px;
  line-height: 1.3;
}

.tobira-guide.is-sp-only .tobira-guide__btn {
  width: 68px;
  height: 68px;
  border: 3px solid transparent;
  font-size: 10px;
  line-height: 1.3;
}

/* -----------------------------------------------
   中間幅（769px〜1280px）
   リンクカードを 3列×2行 → 2列×3行 に変更。
   行が1つ増える分(+110px)、扉ヒーローの高さを延長して
   最下段カードの下に緑地の余白を確保する。
----------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1280px) {
  .tobira-hero {
    height: 942px; /* 832 + 110（3行化で増える1行分:100px+gap10px） */
  }

  .tobira-cards.is-pc-only {
    left: 18%;   /* 2列を中央寄せ（width64%を左右均等配置） */
    width: 64%;  /* 769px時でも「設計ってどんなお仕事？」等が1行に収まる幅 */
    height: 320px; /* 100px×3行 + 10px×2gap */
    grid-template-columns: repeat(2, 1fr) !important; /* 基底のrepeat(3)を確実に上書き */
    grid-template-rows: repeat(3, 100px) !important;
  }

  /* 各カードはPHPでgrid-column/grid-rowをインライン指定（3列×2行前提）しているため、
     中間幅ではnth-childごとに2列×3行へ再配置する（インラインstyleを!importantで上書き）。 */
  .tobira-cards.is-pc-only .tobira-card:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  .tobira-cards.is-pc-only .tobira-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  .tobira-cards.is-pc-only .tobira-card:nth-child(3) { grid-column: 1 !important; grid-row: 2 !important; }
  .tobira-cards.is-pc-only .tobira-card:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; }
  .tobira-cards.is-pc-only .tobira-card:nth-child(5) { grid-column: 1 !important; grid-row: 3 !important; }
  .tobira-cards.is-pc-only .tobira-card:nth-child(6) { grid-column: 2 !important; grid-row: 3 !important; }
}

/* -----------------------------------------------
   レスポンシブ（768px以下 = SP）
----------------------------------------------- */
@media screen and (max-width: 768px) {
  .is-pc-only { display: none !important; }
  .is-sp-only { display: block !important; }

  .tobira-hero {
    height: 1079px; /* 6枚目のカード分+127px */
  }

  .tobira-hero__bg-bottom {
    top: 412px;
  }

  .tobira-frame {
    max-width: 390px;
  }

  /* SPは見出し＋導入文の開始位置を調整（旧#page-mv-titleのtop:85pxをラッパーへ移設） */
  .mv-textblock {
    top: 85px;
  }

  .tobira-guide {
    bottom: var(--space-sm);
    left: var(--space-sm); /* .btn-float-coin(SP)のrightをleftに反転 */
  }

  .tobira-cards.is-pc-only {
    display: none !important;
  }

  .tobira-cards.is-sp-only {
    display: flex !important;
  }
}