@charset "UTF-8";
/* =========================================
   SP stylesheet (≤760px)
   既存 style.css を上書きする “差分” だけを記述
========================================= */

/* 基本タイポ & コンテナ */
/* ▼ ページ全体の横スクロール禁止（最優先で） */
html, body {
  overflow-x: hidden !important;
}
.pc-none{ display:block!important; }
.sp-none{ display:none!important; }
html { font-size: 58%; }
body { line-height: 1.9; }
.container{ width: min(92vw, 680px); }

/* ===== Header（余白とボタンサイズ調整） ===== */
.site-header .container{ padding-inline: 16px; }
.header-inner{ padding: 10px 0; }
.btn-icon{ width:56px; height:56px; }
.logo img{ width:100px; height:auto; }

/* ===== FV（高さ抑えめ＋テキスト読ませる） ===== */
.fv{ min-height: 66vh; }
.fv-copy h1{ font-size: clamp(22px, 7vw, 30px); }

/* ===== FV下の “ウェルカム” 帯 ===== */
.fv-bottom{ margin-top:-60px; padding: 4rem 0 7rem; }
.fv-bottom::before{
  height: 160px;
}
.fv-welcome{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 来訪者カウント（卵形＋中央寄せ） */
.welcome-count{
  margin: -2rem 0 0 -5rem;
  max-width: 300px;
  padding: 18px 24px 26px;
  border-radius: 40% 45% 42% 48% / 52% 44% 50% 46%;
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

/* コメントフォーム：縦並び100% */
.welcome-form{ order: 2; }
.wf-chip{ font-size:1.2rem; }
.wf-form{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf-input{ padding: 1rem 1.2rem; }
.wf-submit{ padding: 1rem 1.4rem; }

/* 最近のコメント：横スクロール → 3件だけ表示 */
.welcome-bubbles{ order: 3; }
.wb-list{
	display: block;
  padding: 20px 2px 2px;
	width: 90%;
	margin: 0 auto;
}
.wb-chip{
  min-width: 68vw;         /* 1枚ずつ“面”で見せる */
  padding: 12px 16px;
  border-radius: 24px;
	width: 70%;
}
.wb-chip:nth-child(1) {
	margin: 1.5rem -5rem 1.5rem 5rem;
}
.wb-chip:nth-child(2) {
	margin: 1.5rem 0;
}
.wb-chip:nth-child(3) {
	margin: 1.5rem 0 1.5rem 3rem;
}
/* 3件以降は隠す（HTMLに多く入っていてもOK） */
.wb-list .wb-chip:nth-child(n+4){ display:none; }

.wb-chip span {
	font-size: 1.4rem;
}
.wb-chip small {
	font-size: 1.3rem;
}
/* ===== サイドメニュー（SP最適化） ===== */
.side-menu__inner{
  right:0; top:-100%;
  width:100vw; height: 90svh;      /* 端末の表示高に追従 */
  border-radius: 0 0 6rem 6rem;
  padding: 13rem 2rem 5rem;
}
.side-menu.is-open .side-menu__inner{ top: 0; } /* 上から全画面 */
.smenu{ padding: 6px 6px 16px; }
.smenu-head{ font-size:1.6rem; gap:10px; }
.smenu-row{ margin: 6px 0; }
.smenu-link{
  --dot: 32px;
  font-size: 1.5rem;
  padding-left: calc(var(--dot) + 10px);
}
.smenu-link .smenu-arrow::before{
  /* “白丸＋矢印PNG” を丸ごと背景で */
  background:
    var(--arrow-img) center/contain no-repeat,
    #fff;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.smenu-sep{ margin: 14px 0; }

/* 画像割当（既存クラス名に合わせて） */
.smenu-link.clr-orange{ --arrow-img:url("../img/menu-arrow-orange.png"); }
.smenu-link.clr-rose  { --arrow-img:url("../img/menu-arrow-rose.png"); }
.smenu-link.clr-blue  { --arrow-img:url("../img/menu-arrow-blue.png"); }
.smenu-link.clr-amber { --arrow-img:url("../img/menu-arrow-amber.png"); }
.smenu-link.clr-green { --arrow-img:url("../img/menu-arrow-green.png"); }





/* ===============================
   Milk Message (SP)
   - 背景を縦長の別トリミングに差し替え
   - テキストボックスのサイズ/角丸/余白を調整
================================ */
@media (max-width: 768px){
  .milk-message{
    /* SP 側のアート比率（縦長に） */
    --art-w: 750;
    --art-h: 980;
    padding-bottom: 2.4rem;
  }
  /**.milk-message::before{
    background-image: url("../img/sv-design.png");
    background-position: center top;
    background-size: 100% 100%;
  }
  @supports not (aspect-ratio:1/1){
    .milk-message::before{
      background-image: url("../img/sv-design-sp.png");
    }
  }**/

  .milk-message-inner{
    width: min(85vw, 520px);
    padding: 4rem 2.4rem;
    border-radius: 3rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
  }
  .milk-message p{
    font-size: 1.5rem;
    line-height: 1.9;
  }
}

/* さらに小さい端末向けの微調整（任意） */
@media (max-width: 420px){
  .milk-message{
    --art-w: 640;
    --art-h: 900;
  }
  .milk-message-inner{
    width: min(85vw, 480px);
    padding: 4rem 2.4rem;
    border-radius: 3rem;
  }
  .milk-message p{
    font-size: 1.4rem;
  }
}


/* ===============================
   Marugoto Map（SP）
================================ */
@media (max-width: 768px) {
  /* 背景・ステージの比率調整（縦長想定） */
  .map-section {
    --stage-top: 20rem;            /* 画像の上から何px下にステージを置くか */
    --bg-h: clamp(360px, 90vw, 640px);
    --illus-ratio: 2.37;           /* ← SPの縦長画像の縦横比に合わせて調整 */
  }

  .map-section-text {
    top: 9rem;
	  left: 10%;
    transform: translate(0%, 0);
  }
  .map-section-text h2 { 
	  font-size: 2.4rem; 
	}
  .map-section-text p  { 
	  font-size: 1.4rem; 
	  padding: 0 1.6rem 0 3rem;
            margin: 0;
	}

  .map-stage {
    width: min(680px, 94vw);
  }

  /* 画像は横幅フィットでOK */
  .map-illust {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ピルボタンをSP向けに少し小さく＆読みやすく */
  .topic-btn{
    --circle: 46px;                /* 丸のサイズ */
    --ring:   6px;
    font-size: 1.5rem;
    padding: 14px 16px 14px calc(var(--circle) + 5px);
    gap: 10px;
  }
	
	/* スマホのピル位置（％指定に更新） */
  .map-stage .topic-life   { left: 39.238%!important; top: 8.293%!important; }
  .map-stage .topic-learn  { left: 57.143%!important; top: 29.388%!important; }
  .map-stage .topic-support{ left: 37.905%!important; top: 50.886%!important; }
  .map-stage .topic-fuji   { left: 44.190%!important; top: 69.887%!important; }
}
.map-spacer {
	min-height: 96vh;
}


.category-section::before {
	top: -30px;
    height: var(--zig-h);
    background: url(../img/zigzag-top.png) repeat-x left top / auto 60%;
}
.category-section::after {
	background: url(../img/bg-cow-yellow.png) no-repeat center cover;
}
/* ===== カテゴリカード ===== */
.category-card{
  --pad-x: 2rem; --pad-t: 2.2rem; --pad-b: 4rem;
  margin: 3.6rem auto; border-radius: 3rem;
}
.category-card .card-hero{
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0;
  text-align: center;
}
.category-card .card-title{ font-size: clamp(2.4rem, 5.2vw, 3rem); }
.category-card .card-lead{ width: 100%; font-size: 1.5rem; }
.category-card .card-actions{
  padding: 50px 0 14px;
	display: block;
}
.category-card .card-actions::before{
  left: 0; right: 0; margin: 0;  /* 吹き出しを中央寄せ */
}
.category-card .card-actions .btn.ghost{
  font-size: 1.5rem;
	margin: 1rem;
}
.category-card .card-body {
	padding: 2.2rem var(--pad-x) calc(0rem + var(--pad-b));
}
.category-section {
	padding: calc(90px + var(--zig-h)) 0 150px;
}

.card-badge {
	width: 80px;
	height: 80px;
}
.card-badge b {
	font-size: 3.6rem;
}
.category-card .card-hero .card-title {
	font-size: clamp(3.4rem, 3vw, 4.3rem);
}
.category-card .card-hero .hero-illust img {
	max-width: 60%;
}
.category-card .card-body {
	border-bottom-left-radius: 5rem;
    border-bottom-right-radius: 5rem;
}


@media (max-width: 767px){
  .scene-section{
    padding: 10rem 0 13rem;   /* 下の余白を少し減らす */
	  border-top-left-radius: 8rem;
    border-top-right-radius: 8rem;
  }
  .scene-inner{
    width: 85%;
  }
  .scene-lead h2{
    margin: 0 0 3rem;
  }
  .scene-wave{
    min-height: 90px;        /* モバイルでの見切れ対策 */
  }
}




/* ===== コラム（カルーセル） ===== */
.column-carousel{ --gap: 14px; --peek: 24px; }
.col-track{ grid-auto-columns: 84%; }

/* ===== サポーター、カレンダー、問い合わせ（余白再調整） ===== */
.supporter-section{ min-width: 0; margin: 6rem auto; }
.sup-wrap{ width: 92%; padding: 3rem; border-radius: 2.4rem; }
.sup-heroimg{ position: static; width: 100%; aspect-ratio: 16/9; border-top-right-radius: 1.6rem; margin-top: 1.6rem; }
.sup-benefits{ padding: 2rem; border-radius: 1.6rem 1.6rem 0 0; }
.sup-benefits__grid{ grid-template-columns: 1fr; }
.sup-badges{ width: 100%; margin-top: 0; }
.calendar-section{ padding: 56px 0 48px; }
.contact-section{ padding: 8rem 0 10rem; }
@media (max-width: 767px){
  .sup-wrap{
    padding: 3rem 2rem;
    border-radius: 2rem;
  }
  .sup-copy{
    padding-right: 0; /* PCの右側余白をリセット */
  }
  .sup-hero{
    display: flex;
    flex-direction: column; /* 上下積みに */
    gap: 2rem;
  }
  .sup-heroimg{
    position: static; /* 絶対配置を解除して自然な流れに */
    width: 100%;
    aspect-ratio: auto;
    border-radius: 1.5rem;
  }
  .sup-heroimg img{
    border-radius: 1.5rem;
    object-fit: cover;
  }
}
.sup-benefits__head h3 {
	margin: 0 0 3rem;
}
.sup-badges {
	grid-template-columns: auto;
    gap: 20px 22px;
}
.sup-badges li {
	width: 100%;
}
.sup-badges li:nth-child(2), .sup-badges li:nth-child(4) {
	transform: none;
}


/* ===== Footer ===== */
.footer{ padding-top: 48px; padding-bottom: 30px; }
.footer__inner{
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-right: 0;          /* 右下ヒーローの退避を解除 */
}
.footer__brand {
    display: block;
    text-align: center;
    margin: 0 auto;
}
.footer__logo {
    margin: 1rem auto 2rem;
    width: 40%;
}
.footer__logo img {
	width: 100%;
}

.footer__sns-btn {
    --s: auto;
    width: 22%;
    height: auto;
	margin: 2rem auto;
}
.footer__sns-btn img {
    width: 100%;
    height: auto;
}
.footer__hero{ position: static; width: 100%; min-width: 0; margin-top: 10px; }
.footer__hero img {
	width: 100%;
	height: auto;
}
.footer__nav{ align-self: start; }
.footer__links{ column-count: 2; column-gap: 0; }
.footer__links li{ margin-bottom: 12px; height: auto; }
.footer__copy{ margin-top: 2rem; font-size: 1.3rem; text-align: center;}

@media (max-width:680px){
  .footer__hero img{
    content: url("../img/footer-img-sp.png");
  }
}



/* ===== SP専用：投稿アーカイブは2列 ===== */
.posts-grid{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap:16px !important;
}
/* ===== SP専用：投稿アーカイブは2列 ===== */
.posts-grid{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap:16px !important;
}