/* ============================================
   作って遊ぼう
   FUJITA築育サイト

   既存の扉ページ（company.css/work.css）と背景・タイトル・説明文・
   戻るボタン・コインボタンの仕組みは共通（.tobira- プレフィックス）。
   コンテンツ部分（ダウンロード画像カード×2セクション）はこのページ専用（.craft- プレフィックス）。
   ============================================ */

.tobira-hero {
  position: relative;
  width: 100%;
  height: 832px;
  background: #DAF2FF;
  overflow: hidden;
  z-index: 0; /* スタッキングコンテキストを確立し、内部のframe(z:1)等がcraft-content側と比較されて漏れないようにする */
}

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

/* 雲 */
.tobira-cloud {
  z-index: 1;
}

/* 町並みイラスト */
.tobira-illust {
  position: absolute;
  z-index: 1;
}

/* 芝（ドキュメント上は「矢印」表記。illust-grass.svg流用） */
.tobira-grass {
  position: absolute;
  z-index: 1;
}

/* 風船（Figma上は「art」という汎用名。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); }
}

/* ページタイトル（グラデーション文字）。MV部分は絶対配置 */
.craft-title {
  position: absolute;
  margin: 0;
  font-family: var(--font-main);
  font-weight: 900;
  text-align: center;
  background: linear-gradient(114.4deg, #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);
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: 2;
}

.craft-title.is-pc-only {
  font-size: clamp(32px, 4.6875vw, 60px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.craft-title.is-sp-only {
  font-size: clamp(24px, 10.256vw, 40px);
  line-height: 1.25;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: linear-gradient(118.5deg, #0E845C 9.5%, #0867AE 94.8%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 説明テキスト。MV部分は絶対配置 */
.craft-desc {
  position: absolute;
  margin: 0;
  font-family: var(--font-main);
  font-weight: 700;
  color: #414141;
  text-align: center;
  z-index: 2;
}

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

.craft-desc.is-sp-only {
  font-size: clamp(14px, 5.641vw, 22px);
  letter-spacing: 0.1em;
  line-height: 1.4;
  white-space: nowrap;
}

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

/* ============ メインコンテンツセクション（MVとは別の独立したセクション） ============ */
.craft-content {
  position: relative;
  z-index: 1; /* heroより確実に手前。スタッキングコンテキストを確立し、内部要素の漏れも防ぐ */
  background: #0F825D;
  padding-bottom: 111px; /* フッターとの間の余白（Figma確認値） */
  margin-bottom: -1px; /* フッターとの境目のサブピクセルの縞を防止 */
  /* overflowは指定しない（visible）。hidden系を使うと楕円の上方向のはみ出しが
     スクロール開始位置より手前として扱われ、見えなくなってしまうため */
}

.tobira-sections.is-pc-only {
  margin: -325px auto 0; /* 楕円の縁を見せるため重なりを少し減らす */
  width: min(998px, calc(100% - 40px));
  padding: 0; /* 3列グリッドが崩れるためPCのみ0に */
  box-sizing: border-box;
  position: relative;
  z-index: 2; /* 楕円・イラスト・芝より手前 */
}

.tobira-sections.is-sp-only {
  margin-top: -460px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.tobira-section {
  text-align: center;
}

.tobira-section--origami {
  margin-top: 0;
}

.tobira-section--paper {
  margin-top: 89px;
}

@media screen and (max-width: 768px) {
  .tobira-section--paper {
    margin-top: 60px;
  }
}

/* セクション見出し直下のリード文（折り紙・ペーパークラフト共通） */
.tobira-section__lead {
  margin: 20px auto 0;
  max-width: 690px;
  font-family: var(--font-main);
  font-weight: 500;
  color: #fff;
  text-align: center;
  line-height: 1.8;
}

.tobira-section__lead.is-pc-only { font-size: 16px; }
.tobira-section__lead.is-sp-only { font-size: 13px; max-width: 90%; margin-top: 14px; line-height: 1.7; }

/* イラスト装飾エリアの背景楕円（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-section__en {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.15em;
  line-height: 1.2;
}

.tobira-section__en.is-pc-only { font-size: 12px; }
.tobira-section__en.is-sp-only { font-size: 18px; }

.tobira-section__ja {
  margin: 36px 0 0;
  font-family: var(--font-main);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .tobira-section__ja {
    margin-top: 18px;
  }
}

.tobira-section__ja.is-pc-only { font-size: 46px; letter-spacing: 0.05em; }
.tobira-section__ja.is-sp-only { font-size: 26px; letter-spacing: 0.05em; }

/* ダウンロード画像カード（カード＋その下の説明/ボタンを1グループとして扱い、
   タブレット幅などでグリッドが2列などに折り返しても対応がズレないようにする） */
.tobira-sections.is-pc-only .craft-cards {
  margin: 40px auto 0;
  width: 100%;
  max-width: 998px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  align-items: start;
  gap: 18px;
}

.tobira-sections.is-sp-only .craft-cards {
  margin: 32px auto 0;
  width: 327px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.craft-card-group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.craft-more-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  background: var(--color-white);
  color: var(--color-blue);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  border: 1px solid #D9D9D9;
  border-radius: 40px;
  padding: 10px 12px 10px 22px;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  transition: border-color var(--transition), border-width var(--transition);
}

.craft-more-btn span:not(.arrow) {
  flex: 1;
}

.craft-more-btn:hover {
  border: 2px solid var(--color-blue);
}

.craft-more-btn .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-blue);
  color: var(--color-white);
  border-radius: var(--radius-circle);
  font-size: var(--fs-base);
  flex-shrink: 0;
}

.craft-note {
  text-align: left;
}

.craft-note__difficulty {
  margin: 0 0 6px;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.05em;
}

.craft-note__difficulty--origami {
  margin-top: 18px;
  text-align: center;
}

.craft-note__star-filled { color: #FFD81B; }
.craft-note__star-empty { color: #195E47; }

.craft-note__text {
  margin: 0;
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  color: #fff;
}

.craft-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  transition: border-color var(--transition), border-width var(--transition);
  border: 2px solid transparent;
  padding-bottom: 56px; /* ラベル分のスペースを確保し、画像はその上の領域で中央寄せ */
  box-sizing: border-box;
}

.craft-card:hover {
  opacity: 1;
  border-color: orange;
  border-width: 4px;
}

.craft-card img {
  max-width: 85%;
  max-height: 100%;
  object-fit: contain;
}

.craft-card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  font-family: var(--font-main);
  font-weight: 700;
  color: #414141;
  text-align: center;
}

.tobira-sections.is-pc-only .craft-card {
  width: 100%;
  height: 320px;
  font-size: 18px;
}

.tobira-sections.is-sp-only .craft-card {
  width: 327px;
  height: 327px;
  font-size: 22px;
}

/* けんぞー/ハク/ほりぞー＋戻るボタン */
.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;
}

.tobira-guide.is-sp-only {
  width: 73px;
  height: 137px;
}

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

.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__bg-bottom {
    top: 412px;
  }

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

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

  .tobira-guide {
    bottom: var(--space-sm);
    left: var(--space-sm);
  }
}