/*
Theme Name: FAMLAB8 Theme (Minimal)
Theme URI: https://example.com/
Author: Bunki
Description: Minimal starter theme for WordPress.
Version: 0.1
Text Domain: famlab8
*/

/* =========================
   Variables
========================= */
:root{
  --container: 1100px;
  --gutter: clamp(16px, 4vw, 60px);

  --h1: clamp(28px, 4vw, 60px);
  --h2: clamp(18px, 2vw, 26px);
  --text: clamp(14px, 1.2vw, 16px);

  --c-green: #0A8A3A;
  --c-green-hover: #008B2C;
  --c-dark: #222222;

  --header-pad-x: 40px;
  --header-pad-x-sp: 20px;

  --btn-size: 60px;     /* ヘッダー右の丸ボタン */
  --btn-shadow: 0 10px 22px rgba(0,0,0,.18);

  --menu-width: 920px;  /* 全画面メニューの中身幅 */
}

/* =========================
   Mini reset
========================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
body{ font-size: var(--text); }

/* =========================
   Font helpers（任意）
========================= */
.ff_type_m  { font-family: "Montserrat", sans-serif; font-optical-sizing:auto; font-style:normal; }
.ff_type_m1 { font-family: "M PLUS 1", sans-serif; font-optical-sizing:auto; font-style:normal; }
.ff_type_nt { font-family: "Noto Sans JP", sans-serif; font-optical-sizing:auto; font-style:normal; }

/* =========================
   Layout: Main offset
========================= */
.l-main{ padding-top: 72px; }

/* トップだけ main の上余白なし（FVを画面いっぱいに） */
.home .l-main,
.front-page .l-main{
  padding-top: 0;
}

/* PC/SP visibility */
.pc-only{display:block}
.sp-only{display:none}
@media (max-width: 900px){
  .pc-only{display:none}
  .sp-only{display:block}
}

/* ふわっと出る基本 */
.js-fade{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

/* 表示状態 */
.js-fade.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ちょい遅らせたい時（任意） */
.js-delay-1{ transition-delay: .08s; }
.js-delay-2{ transition-delay: .16s; }
.js-delay-3{ transition-delay: .24s; }

/* 動きが苦手な人向け（OS設定に追従） */
@media (prefers-reduced-motion: reduce){
  .js-fade{
    transition: none;
    transform: none;
  }
}


.pageTop{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.75);
  color: #fff;
  cursor: pointer;

  /* ふわっと */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.pageTop.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pageTop:hover{
  transform: translateY(-2px);
}

.pageTop__icon{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  line-height: 1;
}



/* =========================
   Header (fixed)
========================= */
.l-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}

.l-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 24px;
}

/* FV上（トップ） */
.l-header.is-overlay{
  background: transparent;
}
.l-header.is-overlay .l-header__inner{
  padding: 18px var(--header-pad-x);
}

/* スクロール後（今は透明のままにする） */
.l-header.is-scrolled{
  background: transparent;
  backdrop-filter: none;
}

/* ロゴ */
.logo{
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.logo img{
  width: clamp(140px, 12vw, 212px);
  height: auto;
}

/* 右側アクション */
.l-header__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* =========================
   Global nav (PC)
========================= */
.g-nav__list{
  display:flex;
  align-items:center;
  gap: clamp(24px, 1.6vw, 38px);
  list-style:none;
  margin:0;
  padding:0;
  font-family:"Noto Sans JP",sans-serif;
}

.g-nav__link{
  text-decoration:none;
  font-family:"Noto Sans JP",sans-serif;
  font-weight: 600;
  font-size: clamp(9px, 1.2vw, 18px);
  letter-spacing: .04em;
  opacity: .9;
  color: var(--c-dark);
  transition: color .18s ease, opacity .18s ease;
}
.g-nav__link:hover{
  color: var(--c-green-hover);
  opacity: 1;
}

/* 通常ページ：グローバルメニューは黒を強制（必要なら） */
.l-header:not(.is-overlay) .g-nav__link{
  color:#111 !important;
}

/* 1024以下で非表示 */
@media (max-width: 1024px){
  .g-nav{ display:none; }
}

/* SPのヘッダー左右余白 */
@media (max-width: 767px){
  .l-header.is-overlay .l-header__inner{
    padding: 16px var(--header-pad-x-sp);
  }
  .logo img{ width: 150px; }
}


/* =========================
   ENページ：グローバルメニューだけ小さく
========================= */
html[lang^="en"] .g-nav__link{
  font-size: clamp(10px, 0.9vw, 18px); /* お好みで微調整 */
  letter-spacing: .02em;              /* ついでに詰めると改行しにくい */
}

html[lang^="en"] .g-nav__list{
  gap: clamp(14px, 1.2vw, 26px);
}

/* =========================
   Lang switcher：ENの右だけ余白を広げる
========================= */

/* パターンA：リンクのhrefに /en/ が入る場合（よくある） */
.l-header__actions a[href*="/en"]{
  margin-right: 10px;
}

/* パターンB：ENリンクに "en" クラスが付いてる場合 */
.l-header__actions .langSwitcher__link.is-en,
.l-header__actions .langSwitcher__link--en{
  margin-right: 10px;
}

/* パターンC：2つめの言語項目（JP, ENの順）を広げる */
.l-header__actions .langSwitcher__list > li:nth-child(2){
  margin-right: 10px;
}





/* =========================
   Icon buttons (Header / Menu)
========================= */
.icon-btn, .hamburger{
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 999px;
  border: 0;                 /* 今回ボーダー使わない方針 */
  display:grid;
  place-items:center;
  cursor: pointer;
  background: transparent;
}

/* Contact button */
.icon-btn--contact{
  background: var(--c-dark);
  color:#fff;
}

/* Hamburger button */
.hamburger--menu{
  background: var(--c-green);
}

/* hamburger 3 lines */
.hamburger__lines{
  width:18px;
  height:2px;
  background:#fff;
  position:relative;
  border-radius:2px;
}
.hamburger__lines::before,
.hamburger__lines::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:2px;
}
.hamburger__lines::before{ top:-6px; }
.hamburger__lines::after { top: 6px; }

/* contact SVG */
.icon-btn__svg{
  width: 26px;
  height: 26px;
  display:block;
  fill: currentColor;
}

/* Hover motion（共通） */
.hamburger--menu,
.icon-btn--contact{
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
  will-change: transform;
}
.hamburger--menu:hover,
.icon-btn--contact:hover{
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow);
}
@media (hover: none){
  .hamburger--menu:hover,
  .icon-btn--contact:hover{
    transform: none;
    box-shadow: none;
  }
}

/* Hover color */
.hamburger--menu:hover{ background: var(--c-dark); }
.icon-btn--contact:hover{ background: var(--c-green); }

/* Focus（アクセシビリティ） */
.hamburger--menu:focus-visible,
.icon-btn--contact:focus-visible{
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 3px;
}

/* =========================
   Fullscreen menu (overlay)
========================= */
.menu{
  position: fixed;
  inset: 0;
  z-index: 2000;

  background: rgba(10, 138, 58, 1); /* 透過グリーン */
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;

  overflow-y: auto;
}

/* hidden属性の時は完全に消す（安全） */
.menu[hidden]{ display:none; }

.menu.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体：幅920で中央寄せ */
.menu__inner{
  width: min(var(--menu-width), calc(100% - 120px)); /* PC左右60pxぶん引く */
  margin: 0 auto;
  min-height: 100svh;
  position: relative;
  display:flex;
  flex-direction:column;
  align-items: stretch;
}

/* 上部：左メッセージ + 右アイコン群（固定） */
.menu__top{
  position: fixed;
  top: 32px;
  left: 40px;
  right: 40px;
  z-index: 5;
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none; /* 下のリンクを邪魔しない */
}
.menu__top > *{ pointer-events: auto; }

/* 右上のアイコン群は “必ず横並び” */
.menu__top-actions{
  display:flex;
  flex-direction: row;
  align-items:center;
  gap: 16px;
}

/* 左上テキスト */
.menu__brand-title{
  color: #fff;
  font-weight: 800;
  font-family: "M PLUS 1", sans-serif;
  letter-spacing: 0.09em;
  padding-top: 5px;
}
.menu__brand-copy{
  font-size: 10px;
  color: #fff;
  padding-top: 5px;
}

/* Close（×） */
.menu__close{
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.12);
  color: #fff;
  font-size: 44px;
  line-height: 1;
  display:grid;
  place-items:center;
  cursor:pointer;

  transition: transform .22s ease, background-color .22s ease, opacity .22s ease;
  will-change: transform;
}
.menu__close:hover{ transform: translateY(-4px); }
.menu__close:active{ transform: translateY(-2px); }
.menu__close:focus-visible{
  outline: none;
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce){
  .menu__close{ transition:none; }
}

/* リストは固定ヘッダー分だけ下げる */
.menu__list{
  margin: 0;
  padding: 140px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255,255,255,.55);
}
.menu__item{
  border-bottom: 1px solid rgba(255,255,255,.55);
}

/* PC：JP / EN / → */
.menu__link{
  display:grid;
  grid-template-columns: minmax(280px, 420px) 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  text-decoration:none;
  color: #fff;

  transition: opacity .25s ease;
}

.menu__jp{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-family:"Noto Sans JP",sans-serif;
}

/* 英語（小さめ）：色指定 */
.menu__en{
  font-size: 13px;
  line-height: 1.2;
  font-family:"Montserrat",sans-serif;
  color: #1D5F32;
  opacity: 1;
}

/* 矢印：ホバーで右へ */
.menu__arrow{
  font-size: 28px;
  justify-self: end;

  transform: translateX(-10px);
  transition: transform .25s ease;
  will-change: transform;
}

.menu__link:hover .menu__arrow,
.menu__link:focus-visible .menu__arrow{
  transform: translateX(0px);
}

/* =========================
   Menu social（フッターの見た目を流用）
========================= */
.menu__social{
  margin-top: auto;
  padding-top: 24px;
	padding-bottom: 60px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 16px;

  width: 100%;
}

/* メニュー内だけサイズ大きめ */
.menu__social .footerSocial__btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
}
.menu__social .footerSocial__icon{
  width: 26px;
  height: 26px;
}

/* メニュー開いてる時はスクロール禁止 */
html.is-menu-open, body.is-menu-open{ overflow: hidden; }

/* 英語ページ：全画面メニューは英語だけ（日本語は隠す） */
html[lang^="en"] .menu__jp { display: none; }
html[lang^="en"] .menu__en { display: inline; }
/* 日本語ページ：両方表示 */
html[lang^="ja"] .menu__jp { display: inline; }
html[lang^="ja"] .menu__en { display: inline; }

/* =========================
   Menu SP（JPの下にEN）
========================= */
@media (max-width: 767px){
  .menu__inner{
    width: calc(100% - 40px);
  }
	
.menu__brand-title{
  font-weight: 600;
	line-height: 1.3
 
}	
	
  .menu__top{
    left: 20px;
    right: 20px;
    top: 16px;
  }

  .menu__list{
    padding-top: 100px;
  }

  .menu__link{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 16px;
    padding: 18px 0;
  }

  .menu__jp{ font-size: 20px; }

  .menu__en{
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
  }

  .menu__arrow{
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 28px;
  }

  .menu__social{
    gap: 18px;
    padding-top: 18px;
  }
}



/* =========================
   ENページ：メニュー英字を「メイン用」に切り替え
========================= */

/* 英語ページでは日本語を非表示（すでにあれば不要） */
html[lang^="en"] .menu__jp{
  display:none;
}

/* 英語ページでは .menu__en を大きく・白く・太く */
html[lang^="en"] .menu__en{
  display:block;          /* 念のため */
  color:#fff;
  font-size: 20px;        /* 好みで調整（例） */
  font-weight: 700;
  letter-spacing: .04em;
  opacity: 1;
  margin-top: 0;          /* 飾りのズレを消す */
  line-height: 1.1;
  font-family: "Montserrat", sans-serif; /* 任意 */
}

/* SP（スマホ）はさらに大きくして気持ちよく */
@media (max-width: 767px){
  html[lang^="en"] .menu__en{
    font-size: 22px;      /* 好みで */
  }
}


@media (max-width: 767px){
  /* 右上の問い合わせ＋ハンバーガーを小さく */
  .l-header__actions .icon-btn,
  .l-header__actions .hamburger{
    width: 52px;
    height: 52px;
  }

  /* 中のメールSVGも少し縮小（必要なら） */
  .icon-btn__svg{
    width: 22px;
    height: 22px;
  }

  /* ハンバーガー3本線も少し縮小（必要なら） */
  .hamburger__lines,
  .hamburger__lines::before,
  .hamburger__lines::after{
    width: 16px;
  }
	
/* メニュー上部（オープン時）の右上アイコン2つを小さく */
  .menu__top-actions .icon-btn--contact,
  .menu__top-actions .menu__close{
    width: 52px;
    height: 52px;
  }

  /* メールSVGもそれに合わせて */
  .menu__top-actions .icon-btn--contact .icon-btn__svg{
    width: 22px;
    height: 22px;
  }

  /* ×の文字サイズも調整（見た目次第で） */
  .menu__top-actions .menu__close{
    font-size: 34px;   /* 例：今より小さめ */
    line-height: 1;
  }	
}


/* =========================
   Hero (First View)
========================= */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 140px 40px 40px;
  color:#fff;
  overflow:hidden;
}

/*.hero__bg{
  position:absolute;
  inset:0;
  background-image: url("https://picsum.photos/1600/1200"); 
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
}*/

.hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
}


.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.60),
    rgba(0,0,0,.15) 55%,
    rgba(0,0,0,0)
  );
}

.hero__inner{
  position:relative;
  z-index:1;
  max-width: 980px;
}

.hero__title{
  margin:0 0 14px;
  font-size: clamp(90px, 2.2vw, 120px);
  line-height: 1.12;
  letter-spacing: .07em;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 700;
  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.21);
}

.hero__lead{
  margin:0;
  max-width: 60ch;
  line-height: 1.1;
  opacity:.92;
  font-size: 22px;
  font-family:"Montserrat",sans-serif;
  font-weight: 500;
  letter-spacing: .07em;
  text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.21);
}

@media (max-width: 767px){
  .hero{ padding: 110px 20px 46px; }
  .hero__title{ font-size: clamp(48px, 3vw, 52px); }
	.hero__lead{font-size: 18px;}
}

/* ヒーロースライド用（未使用でもOK） */
.hero__bgLayer{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  animation: heroFade 12s infinite;
}
@keyframes heroFade{
  0%{opacity:0}
  8%{opacity:1}
  33%{opacity:1}
  41%{opacity:0}
  100%{opacity:0}
}


/* =========================
   Hero reserve button（FV内バナー / UPDATE）
   - PC：FV内右下（スクロールで消える）
   - PC幅：だいたい400px
   - SP：中身を中央寄せ（横並び）
========================= */

/* FV内で absolute するので基準を作る */
.hero{
  position: relative;
}

/* 予約ボタン本体（PC：FV内右下） */
.hero__reserve{
  position: absolute;   /* ←fixedやめる（スクロールで消える） */
  right: 40px;
  bottom: 40px;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center; /* ←“塊として”中央寄せ */
  gap: 16px;

  width: 400px;         /* ←PCはこれくらいに固定 */
  max-width: 46vw;      /* ←狭い画面でははみ出し防止 */
  min-height: 92px;
  padding: 18px 26px;

  border-radius: 999px;
  background: var(--c-green);
  color: #fff;
  text-decoration: none;

  box-shadow: 0 16px 34px rgba(0,0,0,.24);
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;

  /* 0.3秒後にふわっと */
  opacity: 0;
  transform: translateY(10px);
  animation: heroReserveIn .7s ease forwards;
  animation-delay: .9s;
}

.hero__reserve:hover{
  background: #222222;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

@media (hover:none){
  .hero__reserve:hover{
    transform: none;
    box-shadow: 0 16px 34px rgba(0,0,0,.24);
  }
}

@keyframes heroReserveIn{
  to{ opacity: 1; transform: translateY(0); }
}

/* もし .hero__reserve が hero__inner 基準になってしまってる場合の保険 */
.hero__inner{
  position: relative;
  z-index: 1;
}

/* アイコン */
.hero__reserveIcon{
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  flex: 0 0 54px;
}
.hero__reserveIcon img{
  width: 100%;
  height: 100%;
  display: block;
}

/* 文言（PC：縦積み＋左揃え） */
.hero__reserveText{
  display: grid;
  gap: 6px;
  line-height: 1.1;
  text-align: left;
}
.hero__reserveMain{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .06em;
}
.hero__reserveSub{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .16em;
  opacity: .92;
}

/* =========================
   SP：コピーの下に回す
   - 中身（アイコン・農泊…・RESERVE）横並び
   - インナーは中央寄せ
========================= */
@media (max-width: 767px){
  .hero__reserve{
    position: static;      /* SPはフローに戻す */
    width: 100%;
    max-width: none;
    min-height: 86px;
    margin-top: 22px;
    padding: 12px 18px;

    justify-content: center; /* ←SPはインナー中央寄せ */
    gap: 14px;
  }

	/* アイコン */
.hero__reserveIcon{
  width: 45px;
  height: 45px;
	flex: 0 0 45px;
 
}
	
  .hero__reserveText{
    display: flex;          /* ←横並び */
    align-items: baseline;
    justify-content: center; /* ←テキスト塊も中央 */
    gap: 12px;
    text-align: left;        /* 文字自体は左揃えの見た目のまま */
  }

  .hero__reserveMain{ font-size: 20px; line-height: 1.1; }
  .hero__reserveSub{ font-size: 14px; letter-spacing: .14em; line-height: 1; }

  .hero__inner{
    max-width: none;
    width: 100%;
  }
}

/* 動きNGの環境ではアニメOFF */
@media (prefers-reduced-motion: reduce){
  .hero__reserve{
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================
   SP：コピーをボタンの少し上（下寄せ）に固定
========================= */
@media (max-width: 767px){

  /* SPだけ hero を “縦flex + 下寄せ” にする */
  .hero{
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* ←下に寄せる */
    align-items: stretch;
  }

  /* コピーの箱は通常フローでOK（ボタンの上にくる） */
  .hero__inner{
    width: 100%;
    max-width: none;
  }

  /* 予約ボタン：SPは通常フロー + 中身を中央寄せ */
  .hero__reserve{
    position: static;
    width: 100%;
    margin-top: 16px;          /* ←コピーの“少し下” = ボタンとの間 */
    justify-content: center;   /* ←ボタン内の塊を中央へ */
  }
}




/* =========================
   Sections (base)
========================= */
.topSection{ padding: 64px 24px; }

.topSection__title{
  margin: 0 0 18px;
  font-size: 18px;
  letter-spacing: .08em;
}

/* button（仮） */
.btn{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none;
  background: var(--c-green);
  color: #fff;
}

/* =========================
   Schedule (base)
========================= */
.scheduleList{ list-style:none; margin:0; padding:0; }
.scheduleList__item{ padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.1); }
.scheduleList__item a{ text-decoration:none; display:flex; gap: 12px; }
.scheduleList__date{ opacity:.7; white-space:nowrap; }

/* =========================
   Supporters (grid)
========================= */
.supportersGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 767px){
  .supportersGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.supporterItem__logo img{ width:100%; height:auto; }
.supporterItem__name{ font-size: 12px; margin-top: 8px; opacity:.8; }

/* =========================
   Lang switcher
========================= */
.langSwitcher__list{
  display:flex;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.langSwitcher__link{
  text-decoration:none;
  font-size:12px;
  opacity:.8;
}
.langSwitcher__item.is-current .langSwitcher__link{
  opacity:1;
  font-weight:700;
}





/* === Fullscreen menu SNS: force left === */
.menu__social.footerSocial{
  justify-content: flex-start !important;
}

/* メニュー上部に出てる白ライン消す */
.menu__list{
  border-top: none !important;
}


/* =========================
   Footer (final clean)
========================= */
.l-footer{
  background:#3a3a3a;
  color:#fff;
  padding:60px 0;
}
.l-footer a{ color:inherit; text-decoration:none; }
.l-footer a:hover{ text-decoration:underline; }

/* PC：左(ブランド) + 右(リンク3列+SNS) */
.l-footer__inner{
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(420px, 42%, 560px) 1fr;
  column-gap: clamp(22px, 3vw, 44px);
  row-gap: 28px;
  align-items: start;
}

/* 左：ブランド */
.footerBrand__logo{ display:inline-block; margin-bottom:18px; }
.footerBrand__catch{ opacity:.85; margin:0 0 0; font-size:14px; letter-spacing:.07em; color:#ccc; font-family:"Noto Sans JP",sans-serif; }
.footerBrand__org{ font-size:27px; font-weight:400; margin:0 0 4px; color:#ccc; font-family:"Noto Sans JP",sans-serif; }
.footerBrand__addr{ opacity:.8; margin:0 0 12px; font-size:14px; letter-spacing:.07em; color:#ccc; font-family:"Noto Sans JP",sans-serif; }
.footerBrand__tel{ font-size:27px; font-weight:700; letter-spacing:.02em; color:#fff; margin:0 0 35px; font-family:"Montserrat",sans-serif; }
.footerBrand__copy{ font-size:16px; opacity:.7; color:#ccc; font-family:"Montserrat",sans-serif; }

/* 右：全体 */
.footerArea{
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
	margin-top: 55px;
}

/* 右：テキストリンク3列 */
.footerCols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(18px, 3vw, 44px);
  row-gap: 18px;
  min-width: 0;
}

/* nav */
.footerNav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:4px;
	font-family:"Noto Sans JP",sans-serif;
	color: #cccccc;

}
.footerNav__list li{ opacity:.85; }
.footerNav__list a{ display:inline-block; line-height:1.8; }

/* SNS */
.footerSocial{
  display:flex;
  justify-content:flex-end;
  gap:16px;
  margin-top:16px;
}
.footerSocial__btn{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#fff;
  color:#111 !important;
}
.footerSocial__icon{
  width:22px;
  height:22px;
  display:block;
  fill:currentColor;
}
.footerSocial__btn.is-youtube{ color:#e60023 !important; }
.footerSocial__btn.is-instagram{ color:#d62976 !important; }

/* コピーライト切替 */
.footerCopy--sp{ display:none; }


/* =========================
   SP（<=900px）
========================= */
@media (max-width: 900px){
  .l-footer{ padding:48px 0; }

  /* 全体は縦積み */
  .l-footer__inner{
    grid-template-columns: 1fr;
    row-gap: 15px;
    justify-items: center;  /* ←箱自体を中央へ */
    text-align: center;     /* ロゴやSNSは中央寄せ */
  }

  /* ブランドの“箱”は中央、文字は左寄せ */
  .footerBrand{
    width: min(clamp(280px, 82vw, 300px), calc(100% - 40px));
    text-align: left;
  }

  /* ロゴだけ中央 */
  .footerBrand__logo{
    display: block;
    width: fit-content;
    margin: 10px auto 50px;
  }
	
	/* 右：全体 */
.footerArea{
  
	margin-top: 1px;
	margin-bottom: 20px;
}

  /* テキストリンクは非表示（SNSだけ残す） */
  .footerCols{ display:none; }

  /* SNS中央 */
  .footerSocial{
    justify-content: center;
    margin-top: 10px;
  }

  /* SPだけ：footerBrand内コピーライトを消してSNS下に出す */
  .footerCopy--pc{ display:none; }
  .footerCopy--sp{
    display:block;
    margin-top: 30px;
    text-align: center;
    font-size:16px;
    opacity:.7;
    color:#cccccc;
    font-family:"Montserrat", sans-serif;
  }
}



/*------メンバー紹介エリア------*/


/* =========================
   Member CTA (above footer)
========================= */
.memberCta{
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;                 /* フッターとピタ */
  border-radius: clamp(90px, 4vw, 100px) clamp(90px, 4vw, 100px) 0 0; /* 上だけ角丸 */
}

.memberCta__media{ display:block; }
.memberCta__img{
  width: 100%;
 /* height: clamp(420px, 46vw, 640px); *//* PCの見え方 */
	/* height: clamp(800px, 46vw, 980px); 
  object-fit: cover;
  display: block;*/
	width: 100%;
   height: clamp(768px, 46vw, 800px); 
  object-fit: cover;
  object-position: center; /* PCは中央 */
}

/* 読みやすさ用の薄い暗転グラデ */
.memberCta__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.18) 35%,
    rgba(0,0,0,0) 70%
  );
  pointer-events: none;
}

/* 文字＆ボタンを上に重ねる */
.memberCta__content{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /*padding: clamp(28px, 4.5vw, 64px) clamp(16px, 4vw, 40px);*/
	padding: clamp(90px, 4.5vw, 150px) clamp(16px, 4vw, 20px) 3px;
  color: #fff;
}

.memberCta__lead{
  margin: 0;
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: 600;
  letter-spacing: .1em;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
font-family: "M PLUS 1", sans-serif; 
}

.memberCta__title{
  margin: 8px 0 0;
  font-size: clamp(40px, 4.2vw, 72px);
  font-weight: 700;
  letter-spacing: .03em;
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
  font-family:"Montserrat",sans-serif; 
}

/* ボタン：下の方に配置 */
.memberCta__btn{
  margin-top: auto;
  margin-bottom: clamp(22px, 3.6vw, 54px);
  width: min(520px, calc(100% - 40px));
  padding: 22px 22px;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
font-family: "Noto Sans JP", sans-serif;
  /* PC: 緑ボタン（必要なら色は君のブランド値に合わせて変更してな） */
  background: #0a7f2e;
  color: #fff;
	transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.memberCta__btn:hover{
  background: #222222;
}

/* SPの改行用 */
.u-sp{ display:none; }

/* =========================
   SP
========================= */
@media (max-width: 900px){
	
	
.memberCta__content{
 	padding: clamp(50px, 4.5vw, 60px) clamp(16px, 4vw, 20px) 5px;
}

	
	
  .u-sp{ display:inline; }

  .memberCta{
    border-radius: 34px 34px 0 0;
  }

  .memberCta__img{
    height: clamp(580px, 46vw, 600px); 
    object-position: bottom; /* SPは下基準 */
  }

  .memberCta__btn{
    width: min(560px, calc(100% - 40px));
    padding: 16px 20px;
	  height: 65px

  }
}



/* =========================
   SUPPORTERS grid（clean）
========================= */

.supportersGrid{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 44px) clamp(16px, 2vw, 36px);

  align-items: start;
}

/* 1件（外枠） */
.supportersGrid__item{
  min-width: 0;
}

/* クリック領域（a / div 共通） */
.supportersGrid__itemLink{
  display: grid;
  justify-items: center;
  align-items: start;
  text-align: center;
  gap: 10px;
  padding: 10px 6px;

  text-decoration: none;
  color: inherit;
}

/* ロゴ枠：高さを揃える（切らずに全部見せる） */
.supportersGrid__logo{
  width: 100%;
  height: clamp(84px, 7vw, 120px); /* ←ここで高さを決める（低すぎ問題を回避） */
  display: grid;
  place-items: center;
}

/* ロゴ画像：切らない（全部見える） */
.supportersGrid__logo img{
  display: block;
  max-width: min(320px, 92%); /* 横を少し使って“大きく見せる” */
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* ←切らない */
  margin-inline: auto;
}

/* 社名 */
.supportersGrid__name{
  margin: 0;
  text-align: center;
  line-height: 1.5;
	font-family: "Noto Sans JP", sans-serif;
	color: #222222;
}

/* =========================
   Hover（リンクがある時だけ）
========================= */
a.supportersGrid__itemLink .supportersGrid__logo img,
a.supportersGrid__itemLink .supportersGrid__name{
  transition: opacity .25s ease, filter .25s ease, color .25s ease;
}

a.supportersGrid__itemLink:hover .supportersGrid__logo img{
  filter: brightness(1.08);
  opacity: .9;
}

a.supportersGrid__itemLink:hover .supportersGrid__name{
  color: #0A8A3A;
}

/* =========================
   SP：2列
========================= */
@media (max-width: 900px){
  .supportersGrid{
    width: min(1100px, calc(100% - 32px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }

  .supportersGrid__logo{
    height: 72px; /* SPで低すぎないように */
  }

  .supportersGrid__logo img{
    max-width: min(240px, 92%);
  }

  .supportersGrid__name{
    font-size: 13px;
  }
}


/* =========================
   SUPPORTERS overlap-fix（強制的に通常フローへ戻す）
   ※他のCSSで absolute が当たってる時の保険
========================= */

.supportersGrid__itemLink{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  position: static !important; /* ← absolute を殺す */
  transform: none !important;
}

.supportersGrid__logo,
.supportersGrid__name,
.supportersGrid__logo img{
  position: static !important; /* ← absolute を殺す（これが肝） */
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

/* ロゴ枠（高さはここで担保） */
.supportersGrid__logo{
  width: 100% !important;
  height: clamp(84px, 7vw, 120px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}

/* ロゴ画像：切らずに全部見せる */
.supportersGrid__logo img{
  max-width: min(320px, 92%) !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important; /* ← cover が残ってたらこれで潰す */
  display: block !important;
  margin-inline: auto !important;
}

/* テキスト */
.supportersGrid__name{
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.5 !important;
}


.supportersGrid__item{
  min-height: calc(clamp(84px, 7vw, 120px) + 40px);
}


/* =========================
   SUPPORTERS：説明＋ボタン
========================= */
.supportersLead{
  width: min(1000px, calc(100% - 40px));
  margin: clamp(110px, 4vw, 120px) auto 0;
}

.supportersLead__inner{
  /* 黄色枠は印だけって話やったけど、まとまり出したい時用に“箱感” */
  /*border: 1px solid rgba(10, 138, 58, .25);
  border-radius: 12px;
  padding: clamp(18px, 2.6vw, 32px);*/
}

.supportersLead__text{
  margin: 0;
  color: #0A8A3A;
  line-height: 1.4;
  letter-spacing: .04em;
  font-size: 16px;
	font-family: "Noto Sans JP", sans-serif;
}

/* ボタン：メンバー紹介ボタンっぽい丸ボタン */
.supportersLead__btn{
  display: grid;
  place-items: center;
  width: min(520px, 100%);
  height: 64px;
  margin: clamp(70px, 2.4vw, 80px) auto 0;

  background: #0A8A3A;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .06em;
font-family: "Noto Sans JP", sans-serif;
  transition: background .25s ease, color .25s ease, transform .25s ease, opacity .25s ease;
}

.supportersLead__btn:hover{
  background: #222222; /* ふわっと暗く */
  /*transform: translateY(-1px);*/
}

/* SP */
@media (max-width: 900px){
  .supportersLead{
    width: min(1100px, calc(100% - 32px));
    margin-top: 45px;
  }
  .supportersLead__text{
    font-size: 15px;
  }
  .supportersLead__btn{
    height: 65px;
	   margin: 45px auto 0;
  }
}

/* =========================
   SUPPORTERS title
========================= */

.topSupporters__head{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto 88px; /* 下に余白 → ロゴグリッドと間 */
  text-align: center;  /* PCは中央 */
}

.topSupporters__eyebrow{
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .08em;
  font-weight: 700;
  color: #111; /* お好みで */
font-family: "Montserrat", sans-serif;
}

.topSupporters__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #0A8A3A;
  display: inline-block;
}

.topSupporters__title{
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  font-weight: 600;
  color: #0A8A3A;
	font-family: "M PLUS 1", sans-serif;
}

/* SP：左揃え */
@media (max-width: 900px){
  .topSupporters__head{
    width: min(1100px, calc(100% - 32px));
    text-align: left;
    margin-bottom: 34px;
  }
}






/* =========================
   TOPICS + SCHEDULE（FINAL / replace all）
========================= */
.topTS{
  background:#F2FAF5;
  padding: clamp(36px, 4.5vw, 70px) 0;
  border-bottom-left-radius: clamp(44px, 6vw, 90px);
  border-bottom-right-radius: clamp(44px, 6vw, 90px);
  position: relative;
  overflow: hidden; /* ←はみ出し隠す（上にかぶせても見せない） */
}

/* インナー：幅100% ＋ 左右余白（PC=60 / SP=20） */
.topTS__inner{
  --ts-pad: 60px;         /* ←これがPCの左右余白 */
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--ts-pad);

  display: grid;
  grid-template-columns: clamp(240px, 28%, 360px) 1fr;
  grid-template-areas:
    "topicsInfo   topicsFeed"
    "topicsBtn    topicsFeed"
    "scheduleLab  scheduleList";
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: clamp(26px, 3.2vw, 46px);
  align-items: start;
}

/* エリア割り当て */
.topTS__topicsInfo{ grid-area: topicsInfo; position: relative; }
.topTS__topicsFeed{ grid-area: topicsFeed; min-width: 0; }
.topTS__topicsBtn{ grid-area: topicsBtn; }
.topTS__scheduleLabel{ grid-area: scheduleLab; }
.topTS__scheduleList{ grid-area: scheduleList; min-width: 0; }

/* =========================
   TOPICSの模様（差し替えSVG：logo_m.svg）
   ・左は画面外へ
   ・上はファーストビューにかぶる位置まで上げるが、.topTSのoverflowで隠す
========================= */
.topTS__topicsInfo > *{
  position: relative;
  z-index: 1; /* ←文字やアイコンを上に */
}



/* =========================
   見出し（kicker）
========================= */
.topTS__kicker{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.topTS__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #008B2C;
}

.topTS__en{
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 18px;
  color: #111;
}

/* リード */
.topTS__lead{
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #008B2C;
font-family: "Noto Sans JP", sans-serif; 
}





/* =========================
   Followボタン
========================= */
.topTS__btn{
  width: 100%;
  max-width: 230px;
  background: #666;
  color: #fff;
  border-radius: 999px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;
  font-size: 10px;
 font-family: "Noto Sans JP", sans-serif;
}
.topTS__btn:hover{
  background: #008B2C; /* 指定どおり */
}
.topTS__btnSub{ opacity: .7; font-weight: 300; }
.topTS__btnUser{ font-weight: 600; letter-spacing: .02em; }

/* =========================
   SCHEDULEリスト
========================= */
.topTS__list{
  list-style: none;
  margin: 0;
  padding: 0;
  /*border-top: 2px solid rgba(0,0,0,.12);*/
	font-family: "Noto Sans JP", sans-serif;
}
.topTS__item{ border-bottom: 2px solid rgba(0,0,0,.12); }
.topTS__link{
  display: block;
  padding: 22px 0;
  color: #111;
  text-decoration: none;
  font-weight: 400;
  line-height: 1.6;
}
/*.topTS__link:hover{ color: #008B2C; }*/
.topTS__empty{
  margin: 0;
  padding: 18px 0;
  color: rgba(0,0,0,.6);
}

/* SCHEDULEの上を少し広げる（約15px） */
.topTS__scheduleLabel,
.topTS__scheduleList{
  margin-top: 15px;
}

/* =========================
   TOPICSだけ：左の丸→インスタアイコン（緑）
   ※HTML側で .topTS__kicker に is-topics を付けてる前提
========================= */
.topTS__kicker.is-topics .topTS__dot{ display:none; }

.topTS__kicker.is-topics::before{
  content:"";
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display:block;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23008B2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' ry='5'/%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/g%3E%3C/svg%3E");
}


.topTS{
  position: relative;
  overflow: hidden;
}

.topTS::before{
  content:"";
  position:absolute;
  left: -80px;     /* ←右に寄せたいなら 数字を小さく（-80→-40など） */
  top: -30px;      /* ←下げたいなら 数字を大きく */
  width: 400px;
  aspect-ratio: 1 / 1;
  background: url("assets/img/logo_m.svg") no-repeat center / contain;
  opacity: .12;
  pointer-events: none;
  z-index: 0;      /* 背面 */
}





.topTS__inner{
  position: relative;
  z-index: 1;
}

.topTS__inner{
  position: relative;
  z-index: 1;
}

.topTS__more{
	font-size: 12px;
	margin: 15px 0 0 0;
	text-align: right;
}

/* =========================
   SP
========================= */
@media (max-width: 900px){
  .topTS__inner{
    --ts-pad: 20px;           /* ←SPの左右余白 */
    padding-inline: var(--ts-pad);
    grid-template-columns: 1fr;
    grid-template-areas:
      "topicsInfo"
      "topicsFeed"
      "topicsBtn"
      "scheduleLab"
      "scheduleList";
  }
	
	 .topTS::before{
    left: 50%;
    transform: translateX(-50%);
    /* top は今の感じでOKなら触らんでOK */
    /* top: -30px; */

    /* もしSPで少し小さくしたいなら */
    /* width: 320px; */
  }
	

.topTS__scheduleList{
  margin-top: 0px;
}
	
	.topTS__scheduleLabel{
  margin-top: 30px;
}	

  /* 見出しは左揃え */
  .topTS__kicker,
  .topTS__lead{ text-align: left; }

  /* インスタは2列 */
  .topTS__igEmbed #sb_instagram #sbi_images{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  /* ボタンはSPでどーん */
  .topTS__btn{
    max-width: none;
    padding: 22px 20px;
	   font-size: 14px;
  }

  /* 模様はSPで少し控えめ + 位置も少し調整 */
  .topTS__topicsInfo::before{
    opacity: .10;
    top: -140px;
    left: calc(var(--ts-pad) * -1 - 90px);
    width: clamp(280px, 72vw, 560px);
  }
}




/* --------------------固定ページのtop------------------------ */
/* =========================
   HOME ABOUT (A + MAP + Photos)
========================= */
.homeAbout{
  position: relative;
  padding: clamp(48px, 5vw, 80px) 0 0;
  background: #fff;
}

/* 1100px中央 / はみ出し許可 */
.homeAbout__inner{
  width: min(1100px, calc(100% - 64px)); /* ←両端32px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  overflow: visible;
  z-index: 2;
}

/* A */
.homeAbout__A{
  width: 680px;
  max-width: 100%;
  padding-top: 60px;
  position: relative;
  z-index: 2;
}

/* Kicker */
.homeAbout__kicker{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: .06em;
}
.homeAbout__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #0A8A3A;
}
.homeAbout__kickerText{
  font-family: "Montserrat", sans-serif;
}

/* Title */
.homeAbout__title{
  margin: 0 0 18px;
  font-size: clamp(40px, 4.2vw, 68px);
  line-height: 1.1;
  letter-spacing: .04em;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 800;
}
.homeAbout__brand{
  color: #0A8A3A;
}

/* 「FamLab8です！」改行させたくない用（SPでも効く） */
.homeAbout__title .homeAbout__brand{
  white-space: nowrap;
  display: inline-block;
}

/* Text */
.homeAbout__text{
  margin: 0;
  max-width: 44ch;
  line-height: 2.0;
  letter-spacing: .06em;
  font-family: "Noto Sans JP", sans-serif;
}

/* Button */
.homeAbout__btn{
  margin-top: 26px;
  width: min(420px, 100%);
  height: 70px;
  border-radius: 999px;
  background: #666;
  color: #fff;
  text-decoration: none;
font-family: "Noto Sans JP", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
	z-index: 100

  font-weight: 700;
  letter-spacing: .08em;
  transition: background .25s ease, transform .25s ease;
}
.homeAbout__btn:hover{ background: #0A8A3A; }

.homeAbout__btnArrow{
  font-size: 22px;
  transform: translateX(0);
  transition: transform .25s ease;
}
.homeAbout__btn:hover .homeAbout__btnArrow{
  transform: translateX(6px);
}

/* MAP */
.homeAbout__map{
  width: 672px;
  flex: 0 0 672px;
  margin-left: -160px;
  position: relative;
  z-index: 1;
}
.homeAbout__map img{
  width: 100%;
  height: auto;
  display: block;
}

/* =========
   Photos (PC)
========= */
.homeAbout__photosClip{
  margin-top: -110px;
  position: relative;
  z-index: 3;
  overflow: hidden;
  width: 100%;
  height: 520px;
}

.homeAbout__photos{
  width: 1800px;
  max-width: 1800px;
  height: 520px;

  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.homeAbout__ph{
  position: absolute;
  border-radius: 28px;
  overflow: hidden;
}
.homeAbout__ph img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PC 配置 */
.homeAbout__ph.is-1{ width: 443px; height: 302px; left: -50px;  top: 20px; }
.homeAbout__ph.is-2{ width: 332px; height: 226px; left: 460px; top: 170px; }
.homeAbout__ph.is-3{ width: 530px; height: 361px; left: 860px; top: 80px; }
.homeAbout__ph.is-4{ width: 332px; height: 226px; left: 1440px; top: 110px; }


/* =========================
   SP (<=900px)
   - BとMAPを横並びで下揃え
   - 下に本文→ボタン
   - 写真は2段＆端からはみ出し（左に消えない）
========================= */
@media (max-width: 900px){

  .homeAbout{ padding-top: 36px; }

  /* 2カラム上段：B / MAP、下段：body */
  .homeAbout__inner{
    width: calc(100% - 80px);  /* ←両端32px */
    display: grid;
    grid-template-columns: 1fr 44%;
    column-gap: 14px;
    align-items: end;
  }

  /* Aを箱として消して、Bとbodyをグリッドに乗せる */
  .homeAbout__A{ display: contents; }

  /* B（キッカー＋タイトル） */
  .homeAbout__B{
    grid-column: 1;
    grid-row: 1;
    padding-top: 22px;
    min-width: 0;
    position: relative;
    z-index: 3;
  }

  .homeAbout__title{
    font-size: clamp(42px, 9vw, 64px);
    margin: 0 0 12px;
    margin-right: -60px; /* MAPに被せたい量 */
    white-space: nowrap; /* 1行固定（<br>は消してね） */
	  line-height: 1.3;
  }

  /* MAP */
  .homeAbout__map{
    grid-column: 2;
    grid-row: 1;
    align-self: end;
	  padding-bottom: 25px;
    margin-left: -3px;
    width: 100%;
    flex: none;
    position: relative;
    z-index: 1;
  }

  /* 本文＋ボタン（2列ぶち抜きで下へ） */
  .homeAbout__body{
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 18px;
  }

  .homeAbout__text{
    max-width: none;
    line-height: 1.9;
  }

  .homeAbout__btn{
    height: 65px;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* ---- SP Photos drift fix：100vw基準で固定 ---- */
  .homeAbout__photosClip{
    margin-top: 0px;
	margin-bottom: 60px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 520px;
    overflow: hidden;
    position: relative;
  }

  .homeAbout__photos{
    width: 100vw;      /* ←1800pxをやめる */
    max-width: none;
    height: 520px;
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    margin: 0;
  }

  .homeAbout__ph{
    border-radius: 7.5px;
	
  height: auto;      /* ←これが比率維持 */
  object-fit: cover; /* これは効かなくてもOK（imgのときは基本いらん） */
  display: block;
  position: absolute;
  }

  /* SP 配置（必要に応じて調整OK） */
  .homeAbout__ph.is-1{ width: 61vw; height: 220px; left: -5vw; top: 10px; }
  .homeAbout__ph.is-2{ width: 45vw; height: 140px; left: 65vw;  top: 50px; }
  .homeAbout__ph.is-3{ width: 65vw; height:250px; left: 46vw;  top: 270px; }
  .homeAbout__ph.is-4{ width: 41vw; height: 170px; left: -5vw;  top: 295px; }
	

}
	
	
	
/* -------------------------------------------- */	


/* =========================
   RECOMMEND（整理版）
========================= */
.recommend{
  padding: 0 0 clamp(30px, 4vw, 56px);
}

/* ---- marquee ---- */
.recommendMarquee{
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 1;
  position: relative;
  z-index: 2;                 /* 緑枠より前 */
  transform: translateY(0px);/* マルキーを下げて食い込み */
	 /*transform: translateY(14px);*/
}
@media (max-width: 900px){
	.recommendMarquee{          
  transform: translateY(0px);
}
}


.recommendMarquee__track{
  display: flex;
  gap: 56px;
  width: max-content;
  animation: recommendMarquee 160s linear infinite;
  will-change: transform;
}

.recommendMarquee__text{
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
  font-size: clamp(48px, 7vw, 120px);
  color: #0A8A3A;
  white-space: nowrap;
}

@keyframes recommendMarquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* ---- green frame ---- */
.recommendFrame{
  width: 100%;
  background: #0A8A3A;
  border-radius: 100px;
  position: relative;
  z-index: 1;
  margin-top: -54px; /* 食い込み量（PC） */
}

.recommendFrame__inner{
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 80px;
}

/* PC：タイトル+文章 横並び（上揃え/余白広め/文章大きく） */
@media (min-width: 901px){
  .recommendFrame__inner{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 100px;
    row-gap: 0;

  }
	
	

	
}

.recommendHead{
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 10px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  font-family: "Montserrat", sans-serif;
  padding-top: 15px;
  white-space: nowrap;
}

.recommendHead__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  opacity: .95;
}

.recommendLead{
  margin: 0;
  color: #fff;
  line-height: 2.0;
  letter-spacing: .06em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 24px; /* PCだけ大きい。SPで下げる */
}

/* cards（PCでは横並びの下に落とす） */
.recommendCards{
  display: flex;
  flex-direction: column;
  /*gap: 24px;*/
	gap: 0px;
  margin-top: 24px;
}
@media (min-width: 901px){
  .recommendCards{ grid-column: 1 / -1; }

}

/* ---- card ---- */
.recommendCard{
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  min-height: 520px;
}

.recommendCard__bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
}

.recommendCard::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.35) 52%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.recommendCard__content{
  position: relative;
  z-index: 2;
  width: min(560px, calc(100% - 48px));
  padding: clamp(58px, 6vw, 64px);
  color: #fff;
}

.recommendCard__kicker{
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 15px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
}

.recommendCard__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0A8A3A;
}

.recommendCard__title{
  margin: 0 0 40px;
  font-size: clamp(68px, 4.2vw, 98px);
  line-height: 1.1;
  letter-spacing: .09em;
  font-family: "M PLUS 1", sans-serif;
  font-weight: 800;
}

.recommendCard__sub{
  margin: 0 0 14px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .12em;
	font-family: "Noto Sans JP", sans-serif;
}

.recommendCard__text{
  margin: 0;
  line-height: 1.7;
  letter-spacing: .06em;
  font-size: 16px;
  opacity: .95;
	font-family: "Noto Sans JP", sans-serif;
}

/* ---- actions（PC:右下 / 縦並び / gapは0運用のまま） ---- */
.recommendCard__actions{
  position: absolute;
  right: 40px;
  bottom: 42px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;              /* ←いまの運用に合わせて0 */
  padding: 0;
}
.recommendCard__actions > *{ margin: 0; }

/* ---- buttons ---- */
.recommendBtn{
  width: 300px;
  height: 65px;
  padding: 0 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .06em;
  font-family: "Noto Sans JP", sans-serif;
  white-space: nowrap;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;                 /* テキストとアイコン */
  line-height: 1;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* YouTube以外：白ボタン統一 */
.recommendBtn--ghost,
.recommendBtn--solid{
  background: #fff;
  color: #0A8A3A;
  border: 2px solid #fff;
}
.recommendBtn--ghost:hover,
.recommendBtn--solid:hover{
  background: #0A8A3A;
  color: #fff;
  border-color: #0A8A3A;
}

/* YouTube */
.recommendBtn--youtube{
  background: #2c2c2c;
  color: #fff;
}
.recommendBtn--youtube:hover{
  background: #0A8A3A;
  color: #fff;
}

/* ラベル（テキスト）を少し上げたい時のクラス */
.recommendBtn__label{
  line-height: 1;
  transform: translateY(-1px);
}

/* SVGアイコン側（img/svgどちらでもOK） */
.recommendBtn svg,
.recommendBtn img{
  display: block;
  width: 18px;
  height: 18px;
}

/* ---- bg images ---- */
.recommendCard--nouhaku .recommendCard__bg{ background-image: url("assets/img/recommend_nouhaku_pc.jpg"); }
.recommendCard--agrisports .recommendCard__bg{ background-image: url("assets/img/recommend_agrisports_pc.jpg"); }
.recommendCard--chie .recommendCard__bg{ background-image: url("assets/img/recommend_chie_pc.jpg"); }

/* =========================
   SP
========================= */
@media (max-width: 900px){

.recommendCard__title{
  margin: 0 0 20px;
 }
	
.recommendCard__sub{
  font-size: 28px;
}
	
	
  .recommendFrame{
    margin: 0;
    border-radius: 32px;
    margin-top: -38px;
  }

  .recommendFrame__inner{
    width: 100%;
    padding: 36px 24px 36px;
    display: block; /* grid解除 */
  }

  .recommendLead{
    font-size: 15px; /* SPは戻す */
    line-height: 1.9;
	  letter-spacing: 0em;
  }

  .recommendCards{
    gap: 4px;
    margin-top: 0px;
  }

  .recommendCard{
    min-height: 680px;
  }

  .recommendCard::before{
    background: linear-gradient(180deg,
      rgba(0,0,0,.70) 0%,
      rgba(0,0,0,.45) 55%,
      rgba(0,0,0,.25) 100%);
  }

  .recommendCard__content{
    width: calc(100% - 32px);
    padding: 42px 5px 140px 30px;
  }

  .recommendCard__actions{
    left: 16px;
    right: 16px;
    bottom: 32px;
    align-items: stretch;
  }

  .recommendBtn{
    width: 100%;
    height: 65px;
	  font-size: 16px;
  }

  .recommendCard--nouhaku .recommendCard__bg{ background-image: url("assets/img/recommend_nouhaku_sp.jpg"); }
  .recommendCard--agrisports .recommendCard__bg{ background-image: url("assets/img/recommend_agrisports_sp.jpg"); }
  .recommendCard--chie .recommendCard__bg{ background-image: url("assets/img/recommend_chie_sp.jpg"); }
}
/* =========================
   RECOMMEND icon（span + mask）
   ※CSSの一番下に追記
========================= */

/* アイコンは reserve / external だけ出す（他は出さないならこれでOK） */
.recommendBtn--reserve .recommendBtn__icon,
.recommendBtn--external .recommendBtn__icon{
  display: inline-block;
}

/* icon本体 */
.recommendBtn__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor; /* 文字色と同じ色で出る */
  -webkit-mask: url("assets/img/ic_b_g.svg") no-repeat center / contain;
          mask: url("assets/img/ic_b_g.svg") no-repeat center / contain;

  /* 以前 span 全体に transform かけてた影響を受けないように保険 */
  transform: none !important;
}

/* テキストだけ上に上げたい場合は「全部のspan」じゃなく label だけにする */
.recommendBtn__label{
  transform: translateY(-1px);
}


/* =========================
   RECOMMEND Icons & Buttons（最終）
   ※このブロックをCSS一番下に“1つだけ”置く
========================= */

/* ---- 共通：labelだけ微調整（YouTubeも含めてOK）---- */
.recommendBtn__label{
  line-height: 1;
  transform: translateY(-1px);
}

/* =========================
   reserve / external（mask icon）
========================= */
.recommendBtn--reserve .recommendBtn__icon,
.recommendBtn--external .recommendBtn__icon{
  display: inline-block;
}

.recommendBtn__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("assets/img/ic_b_g.svg") no-repeat center / contain;
          mask: url("assets/img/ic_b_g.svg") no-repeat center / contain;
  transform: none;
}

/* =========================
   YouTube（svg icon）
========================= */
.recommendBtn--youtube{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.recommendCard__actions .recommendBtn--youtube{
  margin-top: 16px;
}

.recommendBtn--youtube .recommendBtn__iconYt{
  width: 25px;
  height: 25px;
  display: inline-flex;
  flex: 0 0 auto;
  transform: none;
}

.recommendBtn--youtube .recommendBtn__iconYt svg{
  width: 100%;
  height: 100%;
  display: block;
}

.recommendBtn--youtube .ytBody{
  fill: #FF0000;
  opacity: 1;
}
.recommendBtn--youtube .ytPlay{
  fill: #fff;
}