/* ============================================
   フジタってどんな会社？_扉
   FUJITA築育サイト

   この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); /* 60px at 1280px viewport, scales down with window width */
  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;
}

/* 説明テキスト（プレースホルダー） */
.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: 130px;
}

/* イラスト装飾エリアの背景楕円（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: 15.625%; /* 200/1280 */
  top: 529px;
  width: 68.828%; /* 881/1280 */
  height: 193px;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 90px);
  gap: 13px;
}

/* リンクカード：SP 1列×5行縦並び */
.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;
  height: 90px;
  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 {
  font-size: 18px;
  letter-spacing: 1.8px;
}

.tobira-cards.is-sp-only .tobira-card {
  font-size: 22px;
  letter-spacing: 2.2px;
  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;
}

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

  .tobira-hero {
    height: 952px;
  }

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

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

  /* SPは見出し＋導入文の開始位置を少し上げる（下がり過ぎ防止・イラストとの被り回避） */
  .mv-textblock {
    top: 90px;
  }

  .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;
  }
}