:root{ --footer-h: 56px; }           /* フッター高さは好みで */

html,body{ height:100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ここがポイント：ヒーローは100vhではなく「100vh - フッター高」 */
.hero{
  min-height: calc(100vh - var(--footer-h));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.mainhero {
  position: relative;
  width: 100%;
  height: 100vh;             /* スマホ全画面 */
  overflow: hidden;
}



.mainhero-scroll {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow-x: auto;          /* ← 横スクロールできる領域にする */
  overflow-y: hidden;
  white-space: nowrap;
}



.mainhero-scroll img {
  height: 100%;
  width: auto;               /* 横は画像のまま → パノラマ横長を保持 */
  display: inline-block;
}

.mainhero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* ←どの端末でも中央化 */
  color: white;
  text-align: center;
  z-index: 2;               /* 画像より手前 */
  text-shadow: 0 0 6px rgba(0,0,0,0.8);
}



main{ flex:1; }                       /* これも必須 */

footer.site{
  position: fixed; left:0; right:10px; bottom:0;
  height:56px; display:flex; align-items:center; justify-content:right;
  /* 背景が明るい写真用に薄いオーバーレイを入れるなら */
  /* background: rgba(0,0,0,.18); */
  color:#cccccc
}

a {
    color: #ffffff; /* 今回は#000000を指定していますが、好きな色を指定できます */
}


footer.site2{
  position: fixed; left:10px; right:0; bottom:20px;
  height:56px; display:flex; align-items:center; justify-content:left;
  /* 背景が明るい写真用に薄いオーバーレイを入れるなら */
  /* background: rgba(0,0,0,.18); */
  color:#cccccc
}



h1{font-size:clamp(26px,5.2vw,44px); line-height:1.25; margin:.2em 0 .4em; color:#eeffff}
h2{font-size:clamp(18px,3.2vw,26px); line-height:1.35; margin:1.6em 0 .6em; color:#eeffff}
h3{font-size:clamp(16px,2.6vw,22px); margin:1em 0 .4em}
p{margin:.9em 0}
ul{margin:.6em 0 .6em 1.2em}


.hero .content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;   /* 横中央 */
  justify-content: center; /* 縦中央 */
  height: 100%;
  text-align: center;
  padding: 0 24px;
}

/* PCでは横並び、スマホで縦積み */
.two-col{ gap: 32px; max-width: 1100px; margin: 0 auto; }
.col{ color:#fff; text-align: left; }

/* 本の画像（サイズは画面に応じて） */
.book{
  width: clamp(100px, 22vw, 200px);
  height: auto;
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}


/* スマホ：縦積み＆中央寄せ */
@media (max-width: 900px){
  .two-col{ flex-direction: column; text-align:center; }
  .col{ text-align: center; }
}


/* 文字背景用 ---------------------------------------------------------- */

/* ▼ タイル背景の読みやすさを整える（B：中間トーン） */
body.pattern {
  background: url('../img/bg-tile.png') repeat;
  background-size: 220px auto;
  position: relative;
}

body.fpattern::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.55); /* ← Bの濃さで固定 */
  pointer-events: none;
}

/* ▼ h1 だけ黒系に変更（patternページ専用） */
body.pattern h1,
body.pattern h2,
body.pattern h3 {
  color: #1a1a1a; /* 黒より少し柔らかい色にしました */
}

/* ▼ 読み物パネル（白背景）のベーシック */
.panel {
  max-width: 960px;
  margin: 40px auto;
  padding: 32px;
  background: rgba(255,255,255,0.76);
  border-radius: 12px;
  box-shadow: 0 6px 26px rgba(0,0,0,0.08);
}

/* ▼ ダーク版パネル（今回の「要約」用） */
.panel.is-dark {
  background: rgba(15,23,42,0.76);
  color: #e2e8f0;
}

p.tight {
  line-height: 1.3;
  margin: 0.4em 0;
}



/* 空白設定 ---------------------------------------------------------- */

.spacer {
  height: var(--h, 60px);  /* ← 未指定時のデフォルト60px */
}
	
/* ボタン設定 ---------------------------------------------------------- */

/* 共通 */
.btn-row {
  display: flex;
  gap: 16px;         /* ボタン間の余白 */
  justify-content: center;
}

.btn{
 padding:12px 18px; border-radius:9999px; border:1px solid var(--line);
  font-weight:700; background:#f8fafc; color:#0f172a;
}


.btn-primary{ background:#22ff33; border-color:#0f172a }
.btn-sub{ background:#fff233  }
.btn-ghost{ background:#fffff  }



/* トップ専用（余白大） */
.hero-content .btn-row {
  margin-top: 50px;
}

/* 山・3Dプリンターページ（余白小） */
.page-content .btn-row {
  margin-top: 12px;
}

/* スマホ ------------------------------------------------------------ */


/* スマホ（≤600px）：固定サイズで少しだけ縮める */
@media screen and (max-width: 600px) {
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
  h4 { font-size: 13px; }
  p  { font-size: 15px; }
}

/* 複数併記ユーティリティー ------------------------------------------------------------ */

/* 文字寄せ */
.left   { text-align: left  !important; }
.center { text-align: center!important; }
.right  { text-align: right !important; }




/* 余白（必要なものだけ使用） */
.mt-0{margin-top:0!important;} .mb-0{margin-bottom:0!important;}
.mt-8{margin-top:8px!important;} .mb-8{margin-bottom:8px!important;}
.mt-16{margin-top:16px!important;} .mb-16{margin-bottom:16px!important;}

/* 幅と表示 */
.block{display:block!important;} .inline{display:inline!important;} .ib{display:inline-block!important;}
.w-100{width:100%!important;}

/* 強調（色・背景） */
.highlight{color:#e53935!important;}
.muted{color:#666!important;}
.badge{display:inline-block;background:#111;color:#fff;border-radius:999px;padding:.2em .6em;font-size:.875em;}
.glass{background:rgba(255,255,255,.55);border-radius:8px;padding:12px 14px;box-shadow:0 2px 6px rgba(0,0,0,.12);}


.shadow {
  text-shadow:
    0 2px 4px rgba(0,0,0,0.5),
    0 6px 12px rgba(0,0,0,0.3);
}

.shadow-red {
  text-shadow:
    0 2px 4px rgba(255,0,0,0.5),
    0 6px 12px rgba(255,0,0,0.3);
}


.shadow-brown {
  text-shadow:
    0 2px 4px rgba(77,40,37,0.5),
    0 6px 12px rgba(77,40,37,0.5);
}


/* レスポンシブ補助 */
@media (max-width:600px){
  .sp-center{ text-align:center!important; }
  .sp-w100{ width:100%!important; }
}

@media (max-width: 600px) {
  .cta-row {
    position: relative;
    z-index: 10;
  }

  .footer-toplink {
    bottom: 20px;
  }
}