@charset "UTF-8";


/* base */
*,
html {
  margin: 0px;
  padding: 0px;
}

html {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: hidden;
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  line-height: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", "メイリオ", Meiryo, sans-serif;
  -webkit-text-size-adjust: none;
  position: relative;
  background: none;
  color: #4C4C4D;
  min-height: 100vh;
}

/*
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: url("../img/back.jpg") center / cover no-repeat;
  z-index: -2;
}
*/

.page-bg{
  position: fixed;
  inset: 0;
  background: url("../img/back.jpg") center / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}

.page-wrap{
  position: relative;
}

[id]{
  scroll-margin-top: 80px;
}



/* ======================================================================================
  ベース
====================================================================================== */
:root{
  --text:#4C4C4D;
  --muted:#6b6b6b;

  --yellow:#D1BB19;      /* 黄 */
  --cream:#FFFDED;       /* うす黄 */

  --green:#5DAD75;      /* 緑 */
  --palegreen:#F2FFF6;       /* うす緑 */

  --blue:#5EA3C3;      /* 青 */
  --paleblue:#EFFAFF;       /* うす青 */

  --card:#ffffff;

  --radiusLg:30px;

  --container: 1000px;

  /* hover animation */
  --hover-dur: 180ms;
  --hover-ease: cubic-bezier(.2,.8,.2,1);
  --hover-move: 3px;
  --hover-scale: 1.02;
}
@media screen and (max-width:757px){
:root{
      --radiusLg:20px;
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  line-height:1.9;
  letter-spacing: .02em;
  background:#fff;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

.container{
  width:min(var(--container), calc(100% - 48px));
  margin:0 auto;
}
@media screen and (max-width:757px){
  .container{
    width:min(var(--container), calc(100% - 30px));
  }
}


/* hoverさせたい要素に付ける共通クラス */
.is-hover{
  transition:
    transform var(--hover-dur) var(--hover-ease),
    opacity var(--hover-dur) var(--hover-ease),
    background-color var(--hover-dur) var(--hover-ease),
    color var(--hover-dur) var(--hover-ease),
    border-color var(--hover-dur) var(--hover-ease);
  will-change: transform;
}
.is-hover:hover{
  transform: translateY(calc(-1 * var(--hover-move)));
  opacity: .8;
}

.is-hover-2:hover{
  opacity: .7;
}



/* たんぽぽ会 */
body.site--tanpopokai{
  --main: var(--yellow);
  --pale: var(--cream);
}


/* たんぽぽ保育園 */
body.site--tanpopo{
  --main: var(--yellow);
  --pale: var(--cream);
}

/* たつのこ保育園 */
body.site--tatsunoko{
  --main: var(--green);
  --pale: var(--palegreen);
}

/* とちのみ保育園 */
body.site--tochinomi{
  --main: var(--blue);
  --pale: var(--paleblue);
}


/* =====================================================================================
  ヘッダー
====================================================================================== */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
}
.header__inner{
  width:100%;
  margin:0 auto;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
@media screen and (max-width:757px){
  .header__inner{
    height:60px;
  }
}

.header__logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  margin-left:30px;
}
@media screen and (max-width:757px){
 .header__logo{
     margin-left:20px;
  }
}
@media screen and (max-width:757px){
.site--tanpopokai .header__logo{
    gap:5px;
    margin-left:10px;
  }
}

.header__logoMark{
  width:auto;
  height:auto;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:var(--main);
  display: flex;
  align-items: center;
  gap:10px;
}

@media screen and (max-width:757px){
.site--tanpopokai .header__logoMark{
    gap:3px;
  }
}

.header__logoMark img{
  width:50px;
}
@media screen and (max-width:757px){
.header__logoMark img{
     width:40px;
  }
}

@media screen and (max-width:757px){
.site--tanpopokai .header__logoMark img{
     width:20px;
  }
}

.header__logoText{ 
  font-size:25px; 
  color:var(--main);
  letter-spacing:2px;
}
@media screen and (max-width:757px){
.header__logoText{
     font-size:20px; 
     letter-spacing:1px;
  }
}
@media screen and (max-width:757px){
.site--tanpopokai .header__logoText{
     font-size:17px; 
     letter-spacing:0px;
  }
}

.header__logoText.title--gray{ 
  color:#4C4C4D;
}



/* =========================
  header menu button (menu/close + 2lines)
========================= */
.header__menuBtn{
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;

  display: grid;
  justify-items: end;

  color: #4C4C4D;
  font-weight: 700;

  line-height: 1;
  padding: 6px 0;
  margin-right:30px;
  z-index: 100;
}

.header__menuLabel{
  position: relative;
  width: 52px;   /* 文字の箱。menu/closeが同じ位置に揃う */
  height: 16px;
}

.header__menuWord{
  position: absolute;
  right: 0;
  top: 0;

  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1;

  transition: opacity 220ms ease, transform 420ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

.header__menuWord--menu{
  opacity: 1;
  transform: translateY(0);
}

.header__menuWord--close{
  opacity: 0;
  transform: translateY(-6px);
}

/* 2本線 */
.header__menuLines{
  width: 44px;
  height: 26px;
  position: relative;
}

.header__menuLines::before,
.header__menuLines::after{
  content:"";
  position:absolute;
  left:0;

  width:44px;
  height:2px;
  background:#4C4C4D;

  transition:
    transform 520ms cubic-bezier(.2,.9,.2,1),
    top 520ms cubic-bezier(.2,.9,.2,1),
    width 520ms cubic-bezier(.2,.9,.2,1),
    opacity 220ms ease;
  transform-origin: center;
}

/* 初期：二本線 */
.header__menuLines::before{ top:8px; }
.header__menuLines::after{ top:16px; }

/* 開いてる時：くるん → 斜めクロス（2本線が動いて回る） */
body.is-menu-open .header__menuWord--menu{
  opacity: 0;
  transform: translateY(6px);
}
body.is-menu-open .header__menuWord--close{
  opacity: 1;
  transform: translateY(0);
}

body.is-menu-open .header__menuLines::before{
  top:12px;
  width:44px;
  transform: rotate(18deg);
}
body.is-menu-open .header__menuLines::after{
  top:12px;
  width:44px;
  transform: rotate(-18deg);
}

/* SP（必要なら） */
@media screen and (max-width:757px){
  .header__menuLines{
    width: 40px;
  }
  .header__menuLines::before,
  .header__menuLines::after{
    width:40px;
  }
}





/* =========================
  メニュー中身
========================= */
.menuOverlay{
  position: fixed;
  inset: 0;
  z-index: 30;
  padding-left:30%;

  display: none;
}
@media screen and (max-width:1200px){
  .menuOverlay{
    padding-left: 30px;
  }
}

@media screen and (max-width:757px){
  .menuOverlay{
    padding-left: 30px;
  }
}

.menuOverlay.is-open{
  display: block;
}

.menuOverlay__panel{
  position: relative;
  max-height: 100vh;   /* ←画面高さを超えない */
  overflow-y: auto;    /* ←足りない時スクロール */
  overflow-x: hidden;

  background: #fff;
  border-radius: 0px 0px 0px 50px;
  padding:50px 70px 50px 70px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
@media screen and (max-width:757px){
  .menuOverlay__panel{
    height: calc(100vh - 28px);
    padding: 20px 30px 50px 30px;
    border-radius: 0px 0px 0px 30px;
  }
}

/* close */
.menuOverlay__close{
  position: absolute;
  right: 26px;
  top: 22px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  justify-items: end;
  gap: 6px;
  color: #4C4C4D;
  font-weight: 700;
}
@media screen and (max-width:757px){
  .menuOverlay__close{
    right: 14px;
    top: 12px;
  }
}

.menuOverlay__closeText{
  font-size: 14px;
  letter-spacing: .08em;
}

.menuOverlay__closeIcon{
  width: 44px;
  height: 26px;
  position: relative;
}
.menuOverlay__closeIcon::before,
.menuOverlay__closeIcon::after{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:44px;
  height:2px;
  background:#4C4C4D;
  transform-origin:center;
}
.menuOverlay__closeIcon::before{ transform: translateY(-50%) rotate(18deg); }
.menuOverlay__closeIcon::after{ transform: translateY(-50%) rotate(-18deg); }

.menuOverlay__inner{
  display: grid;

  gap: 30px;
  align-items: start;
  margin-top: 40px;
}
@media screen and (max-width:757px){
  .menuOverlay__inner{
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 60px;
  }
}

/* 左のリンク */
.menuNav{
  position: relative;
  display: grid;
  gap: 28px;
  padding-top: 6px;
  margin-bottom:10px;
}

.site--tanpopo .menuNav,
.site--tatsunoko .menuNav,
.site--tochinomi .menuNav {
  display:grid;
  grid-template-columns: max-content max-content;
  row-gap: 28px;
  column-gap: 100px;
  justify-content:start;
}
@media screen and (max-width:757px){
.site--tanpopo .menuNav,
.site--tatsunoko .menuNav,
.site--tochinomi .menuNav {
    grid-template-columns:1fr;
    grid-auto-flow:row;
  }
}

.menuNav__item{
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 900;
  color: #4C4C4D;
  font-size: 20px;
  line-height: 1.2;
}
@media screen and (max-width:757px){
  .menuNav__item{
    font-size: 16px;
    gap: 10px;
    line-height: 1;
  }
}

.icon-narabi {
  position: absolute;
  right:0px;
  top:70px;

  display: flex;
  align-items: center;
  gap:20px;
}
@media screen and (max-width:757px){
  .icon-narabi {
    display:none;
  }
}

.site--tanpopo .icon-narabi,
.site--tatsunoko .icon-narabi,
.site--tochinomi .icon-narabi {
  right:40px;
  top:50px;
}

.icon-narabi-icon {
  display: inline-block;
  width:110px;
}

.site--tanpopo .icon-narabi-icon,
.site--tatsunoko .icon-narabi-icon,
.site--tochinomi .icon-narabi-icon {
  display: inline-block;
  width:200px;
}

.menuNav__item--plain{
  gap: 0;
}
@media screen and (max-width:757px){
  .menuNav__item--plain{  }
}

.menuDot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.menuDot--yellow{ background: #D1BB19; }
.menuDot--green{ background: #5DAD75; }
.menuDot--blue{ background: #5EA3C3; }

/* 右のイラスト */
.menuIllust{
  display: grid;
  place-items: center;
}
.menuIllust img{
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
}

/* 3つの丸ボタン */
.menuPills{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 30px;
}
@media screen and (max-width:757px){
  .menuPills{
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 30px;
  }
}

.menuPill{
  display: grid;
  place-items: center;
  height: 62px;
  width:auto;
  border-radius: 999px;
  color: #fff;
  font-size: 20px;
  letter-spacing: .06em;
}
@media screen and (max-width:757px){
  .menuPill{
    height: 60px;
    font-size: 16px;
  }
}

.menuPill--yellow{ background: #D1BB19; }
.menuPill--green{ background: #5DAD75; }
.menuPill--blue{ background: #5EA3C3; }
.menuPill--gray{ background: #4C4C4D; }

/* 下の法人情報 */
.menuFooter{
  margin-top: 40px;
}
@media screen and (max-width:757px){
  .menuFooter{
    margin-top: 34px;
  }
}

.menuFooter__corp{
  margin: 0;
  font-size: 23px;
  letter-spacing: 2px;
  font-weight:bold;
  color: #4C4C4D;
}
@media screen and (max-width:757px){
  .menuFooter__corp{ font-size:18px; letter-spacing: 1px; }
}

.menuFooter__addr{
  margin: 0;
  font-size: 16px;
  color: #4C4C4D;
}
@media screen and (max-width:757px){
  .menuFooter__addr{ font-size: 14px; line-height: 1.5; }
}

.menuFooter__telRow{
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--main);
  font-weight: 900;
}
@media screen and (max-width:757px){
  .menuFooter__telRow{ gap: 5px; }
}


.menuFooter__telLabel{
  font-size: 21px;
  font-weight: normal;
}
@media screen and (max-width:757px){
  .menuFooter__telLabel{ font-size: 14px; }
}

.menuFooter__tel{
  font-size: 40px;
  letter-spacing: .05em;
}
@media screen and (max-width:757px){
  .menuFooter__tel{ font-size: 18px; }
}

.menuFooter__time{
  font-size: 21px;
  letter-spacing: .06em;
    font-weight: normal;
}
@media screen and (max-width:757px){
  .menuFooter__time{ font-size: 14px; line-height: 1; }
}

/* メニュー表示中は背景スクロール止める */
body.is-menu-open{
  overflow: hidden;
}





/* ======================================================================================
  Hero（スライド）
====================================================================================== */
.hero{
  position:relative;
  height: 100vh;
  overflow:hidden;
}
@media screen and (max-width:757px){
  .hero{
    height: 60vh;
  }
}

.hero__slides{
  position:absolute;
  inset:0;
}
.hero__slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity 900ms ease;
  transform: scale(1.02);
}
.hero__slide.is-active{ opacity:1; }

.hero__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.25);
}

.hero__content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  font-weight:700;
  gap: 30px;     
}
@media screen and (max-width:757px){
  .hero__content{
    gap: 20px;    
  }
}

.hero__line{
  margin: 0;
  font-size: 35px; 
  letter-spacing:5px;
}
@media screen and (max-width:757px){
  .hero__line{
    font-size: 20px; 
    letter-spacing:2px;
  }
}


.hero__sideBtns{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:14px;
}
@media screen and (max-width:757px){
  .hero__sideBtns{
    right:0;
    top:85%;
  }
}

.sideBtn{
  width: 85px;
  height:85px;
  align-items:center;
  text-align: center;
  gap:10px;
  padding:13px 10px 10px 13px;
  border-radius:15px 0 0 15px;
  background:#fff;
  color:#4C4C4D;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
@media screen and (max-width:757px){
  .sideBtn{
  width: 70px;
  height:70px;
  padding:10px 8px 8px 10px;
  }
}

.sideBtn__icon{
  place-items:center;
  text-align: center;
}

.sideBtn__icon img{
  width: 45px;
  height:45px;
    margin: 0 auto;
}
@media screen and (max-width:757px){
 .sideBtn__icon img{
    width: 35px;
    height: 35px;
  }
}

.sideBtn__text{
  font-size: 10px;
  color:var(--main);
  display:block;
}
@media screen and (max-width:757px){
 .sideBtn__text{
    font-size: 8px;
  }
}




/* ======================================================================================
  セクション共通
====================================================================================== */
.section{
  padding-top: 120px;
  padding-bottom: 150px;
}
@media screen and (max-width:757px){
  .section{
    padding: 72px 0;
  }
}

.section.kai{
  padding-top: 120px;
  padding-bottom: 100px;
}
@media screen and (max-width:757px){
.section.kai{
    padding-top: 72px;
    padding-bottom: 0px;
  }
}

.secHead{
  margin:0 auto 46px;
  text-align:center;
}
@media screen and (max-width:757px){
  .secHead{
    margin:0 auto 0px;
  }
}
.secHead--center{ text-align:center; }

.secHead__mark{
  width:400px;
  display: flex;
  align-items: center;
  gap:10px;
    margin:0 auto;
}
@media screen and (max-width:757px){
.secHead__mark{
    width:auto;
  }
}
@media screen and (max-width:757px){
  .site--tanpopokai .secHead__mark{
    gap:5px;
    width: 230px;
  }
}

.secHead__mark img{
  width:105px;
  height:auto;
  position:relative;
  margin:0 auto 10px;
}
@media screen and (max-width:757px){
  .secHead__mark img{
    width:80px;
  }
}
@media screen and (max-width:757px){
  .site--tanpopokai .secHead__mark img{
    width:60px;
  }
}


.secHead__mark.mark-multiply {
mix-blend-mode: multiply !important;
}
@media screen and (max-width:757px){
.secHead__mark.mark-multiply {
    opacity: 0.8;
  }
}

.secHead__sub{
  display: inline-block;
  color:var(--main);
  font-weight:700;
  font-size:16px;
  letter-spacing:.08em;
  border-bottom: solid 2px var(--main);
  padding-bottom: 4px; /* 下線との距離 */
  margin-top:10px;
}
@media screen and (max-width:757px){
  .secHead__sub{
    letter-spacing:0;
  }
}

.secHead__sub.green{
  color:var(--green);
  border-bottom: solid 2px var(--green);
}
.secHead__sub.yellow{
  color:var(--yellow);
  border-bottom: solid 2px var(--yellow);
}
.secHead__sub.blue{
  color:var(--blue);
  border-bottom: solid 2px var(--blue);
}


.secHead__sub.moji-white {
    color:#fff;
    border-bottom: #fff solid 2px;
}

.secHead--center .secHead__sub::after{ margin-left:auto; margin-right:auto; }

.secHead__title img{
  text-align:center;
  margin: 0 auto;
  margin-top:20px;
  margin-bottom:100px;
  height:88px;
  width:auto;
}
@media screen and (max-width:757px){
  .secHead__title img{
     height:60px;
     margin-bottom:50px;
  }
}


/* 透ける色背景（乗算っぽい） */
.section--blend{
  position: relative;
  background: transparent;
}

.section--blend::before{
  content:"";
  position:absolute;
  inset:0;
  /*background: var(--blendColor, rgba(255,255,255,.85)); */
  mix-blend-mode: multiply !important;
  z-index: 0;
  pointer-events:none;
}


/* ======================================================================================
  たんぽぽ会の3つの保育園
====================================================================================== */
.campusCard{
  width: 100%;
  margin: 0 auto 80px;
}
@media screen and (max-width:757px){
.campusCard{
      margin: 0 auto 50px;
  }
}

.campusCard:last-child{
  width: 100%;
  margin: 0 auto 0px;
}

/* カード本体 */
.campusCard__inner{
  width: 100%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.6fr 1fr !important;
  gap: 40px;
  align-items: center;
}
@media screen and (max-width:1030px){
  .campusCard__inner{
    display: flex;              /* ← gridやめる */
    flex-direction: column;     /* ← 縦並び */
    gap: 16px;
    width: 100%;
    align-items: stretch;
  }
}

@media screen and (max-width:1030px){
  .campusCard__body{
    display: contents;
  }
  /* 並び順（文章 → 画像 → ボタン） */
  .campusCard__head{ order: 1; }
  .campusCard__copy{ order: 2; }
  .campusCard__img{  order: 3; }
  .pillBtn-2{        order: 4; }
}

/* 左：画像 */
.campusCard__img{
  border-radius: var(--radiusLg);
  overflow: hidden;
}
.campusCard__img img{
  width: 100%;
  height: 400px;   
  object-fit: cover;
  display:block;
}
@media screen and (max-width:757px){
  .campusCard__img img{
    height: 210px;
  }
}

/* 右：テキスト */
.campusCard__body{
  color: var(--text);
}

.campusCard__name{
  margin: 0 0 6px;
  display:flex;
  align-items:center;
  gap: 10px;

  font-weight: 900;
  font-size: 30px;
  letter-spacing: .06em;
}
@media screen and (max-width:757px){
.campusCard__name{
    font-size: 25px;
  }
}

.campusCard__mark{
  width: 52px;
  height: auto;
}

.campusCard__addr{
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .04em;
}
@media screen and (max-width:757px){
.campusCard__addr{
    font-size: 16px;
    margin: 0 0 5px;
  }
}

.campusCard__name.moji-yellow,
.campusCard__addr.moji-yellow{
  color:var(--yellow);
}
.campusCard__name.moji-green,
.campusCard__addr.moji-green{
  color:var(--green);
}
.campusCard__name.moji-blue,
.campusCard__addr.moji-blue{
  color:var(--blue);
}


.campusCard__copy{
  margin: 30px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
}
@media screen and (max-width:1030px){
.campusCard__copy{
  margin:0 0 10px;
    font-size: 18px;
  }
}




/* ======================================================================================
  園の方針
====================================================================================== */
.section--policy{
  position:relative;
}
.policyText{
  margin:0 auto;
  margin-top:100px;
  margin-bottom:120px;
  text-align:center;
  color:#4C4C4D;
  font-size:20px;
  font-weight: bold;
  line-height: 2.6;
}
@media screen and (max-width:757px){
  .policyText{
     margin-top:50px;
     margin-bottom:20px;
     font-size:16px;
     line-height: 2.5;
     text-align:justify;
  }
}

.policyText.tanpopokai{
  margin-bottom:0px;
}
@media screen and (max-width:757px){
  .policyText.tanpopokai{
       margin-bottom:0px;
  }
}

.policyText p{ margin:0 0 18px; }
@media screen and (max-width:757px){
.policyText p{
       display: inline;
  }
}

@media screen and (min-width:756px){
.policyText br{
    display: none;
  }
}

.illust-1 {
  position: absolute;
  bottom:-50px;
  right:30px;
  width:50%;
    mix-blend-mode:multiply !important;
}
@media screen and (max-width:1030px){
  .illust-1{
    bottom: 0px;
    right: 0px;
    width: 60%;
  }
}
@media screen and (max-width:757px){
  .illust-1{
    bottom: -20px;
    right: 10px;
    width: 80%;
    opacity: 0.8;
  }
}

.illust-1 img{
  display: block;
  width: 100%;
  height: auto;
}

/* 斜めの写真つなぎ */
.tiltPhoto{
  position:relative;
  overflow:hidden;
}
.tiltPhoto::before{
  content:"";
  position:absolute;
  top:-140px;
  left:0;
  right:0;
  height:240px;

}
.tiltPhoto img{
  width:100%;
  height:auto;
  object-fit:cover;
}
@media screen and (max-width:757px){
  .tiltPhoto img{
    height: 260px;
  }
}



/* ======================================================================================
  入園情報
====================================================================================== */
.section--nyuen{ 

}

.infoCard{
    background:#fff;
  mix-blend-mode:normal;
  border:2px solid var(--main);
  border-radius:  var(--radiusLg);
  padding: 60px 50px 80px 50px;
  max-width: 1000px;
  margin:0 auto 34px;
}
@media screen and (max-width:757px){
  .infoCard{
    padding: 20px 10px 50px 10px;
  }
}

.infoCard.kai{
  border:2px solid var(--blue);
}

.infoCard__titleRow{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:16px;
  border-bottom:2px dotted var(--main);
  margin-bottom:8px;
    padding-left:30px;
}
@media screen and (max-width:757px){
  .infoCard__titleRow{
     padding-left:10px;
     gap:10px;
  }
}

.infoCard__flower{
  width:52px;
  height:auto;
}
@media screen and (max-width:757px){
.infoCard__flower{
    width:40px;
  }
}

.infoCard__name{
  color:var(--main);
  font-size:32px;
  letter-spacing: 2px;
  font-weight: bold;
}
@media screen and (max-width:757px){
  .infoCard__name{
    font-size:17px;
    letter-spacing: 0px;
  }
}

.infoTable{
  margin:0;
  font-size: 20px;
}
@media screen and (max-width:757px){
  .infoTable{
    font-size: 15px;
  }
}

.infoTable.kai{
  margin:0;
  font-size: 16px;
}

.infoTable__row{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap:22px;
  padding:16px 0;
  padding-left:30px;
  border-bottom:2px dotted var(--main);
}
@media screen and (max-width:757px){
  .infoTable__row{
    grid-template-columns: 1fr;
    gap:3px;
    padding: 10px 0;
    padding-left:10px;
  }
}

.infoTable__row.kai{
  border-bottom:2px dotted var(--blue);
  grid-template-columns: 90px 1fr;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width:757px){
.infoTable__row.kai{
    grid-template-columns: 1fr;
    gap:3px;
    padding: 10px 0;
    padding-left:10px;
  }
}

.infoTable__row.kai-2{
  border-bottom:2px dotted var(--blue);
  display:block;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width:757px){
.infoTable__row.kai-2{
    font-weight: normal;
  }
}

.infoTable dt{
  margin:0;
  color:var(--main);
  font-weight:800;
}

.infoTable__row.kai dt{
  color:var(--blue);
}

.infoTable dd{
  margin:0;
  color:#4C4C4D;
  font-weight:600;
}
@media screen and (max-width:757px){
.infoTable dd{
      font-weight:normal;
  }
}

.contactBlock{
  max-width: 1000px;
  margin:0 auto;
}
.contactBlock__head{
  margin: 40px 0 15px;
  font-size:30px;
  font-weight:800;
  color:#4C4C4D;
  display:flex;
  align-items:center;
  gap:10px;
}
@media screen and (max-width:757px){
 .contactBlock__head{
    font-size:20px;
  }
}

.dot{
  width:20px;
  height:20px;
  border-radius:999px;
  background: var(--main);
  display:inline-block;
}
@media screen and (max-width:757px){
 .dot{
    width: 15px;
    height: 15px;
  }
}
.dot--yellow{ background: var(--main); }
.dot--white{ background:#fff; }

.contactBox{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:18px;
  align-items:center;
  border:2px solid var(--main);
  border-radius: var(--radiusLg);
  padding: 30px 40px 30px 40px;
  background:#fff;
}
@media screen and (max-width:1030px){
  .contactBox{
    grid-template-columns: 1fr;
     gap:0px;
  }
}
@media screen and (max-width:757px){
  .contactBox{
    grid-template-columns: 1fr;
     padding: 20px 10px 20px 10px;
     gap:0px;
  }
}

.contactBox:last-child{
  margin-top:30px;
}

.contactBox__left{
  display:flex;
  align-items:center;
  color:#4C4C4D;
  font-weight:800;
  border-right:2px dotted var(--main);
  margin-right: 18px;
  padding-right:18px;
  height: 175px
}
@media screen and (max-width:1030px){
  .contactBox__left{
    border-right:none;
    border-bottom:none;
    margin-right: 0px;
    padding-right:0;
    padding-bottom: 0px;
    margin-bottom: 10px;
    height: auto;
  }
}
@media screen and (max-width:757px){
  .contactBox__left{
    border-right:none;
    border-bottom:none;
    margin-right: 0px;
    padding-right:0;
    padding-bottom: 0px;
    margin-bottom: 10px;
    height: auto;
  }
}

.contactBox__leftText {
  font-size:23px;
}
@media screen and (max-width:757px){
  .contactBox__leftText{
     font-size:18px;
  }
}

.contactBox__phoneIcon{
  width:auto;
  display:grid;
  place-items:center;
  color:var(--main);
  font-weight:900;
  margin-right:10px;
}

.contactBox__phoneIcon img{
  width:53px;
  height:auto;
}
@media screen and (max-width:757px){
  .contactBox__phoneIcon img{
     width:35px;
  }
}

@media screen and (max-width:px){
  .contactBox__right{
     margin-left:10px;
     margin-right:10px;
  }
}

.contactBox__tel{
  margin:0;
  font-size:44px;
  font-weight:900;
  color:var(--main);
  letter-spacing:.03em;
  margin-top: -20px;
}
@media screen and (max-width:757px){
  .contactBox__tel{
     font-size:18px;
     margin-top: 0px;
  }
}

.contactBox__mail{
  margin:0;
  font-size:33px;
  font-weight:900;
  color:var(--main);
  letter-spacing:.03em;
  margin-top: -20px;
  margin-bottom:10px;
}
@media screen and (max-width:757px){
  .contactBox__mail{
     font-size:18px;
     margin-top: 0px;
  }
}

.contactBox__meta{
  font-size:16px;
  margin-top:0px;
  margin-bottom:8px;
  color:#4C4C4D;
}
@media screen and (max-width:757px){
 .contactBox__meta{
    margin-top:10px;
  }
}

.contactBox__note{
  font-size:16px;
  margin:0;
  color:#4C4C4D;
  line-height: 1.5;
}
@media screen and (max-width:757px){
.contactBox__note{
      font-size:15px;
  }
}


.widePhoto{
  margin: 0 auto;
  margin-top: 120px;
  max-width: 1000px;
}
@media screen and (max-width:757px){
 .widePhoto{
    margin-top: 50px;
  }
}

.widePhoto img{
  border-radius: var(--radiusLg);
  width: 100%;
  height: 500px;
  object-fit:cover;
}
@media screen and (max-width:757px){
  .widePhoto img{
    height: 200px;
  }
}




/* ======================================================================================
  Instagram（黄色背景）
====================================================================================== */
.section--instagram{
  position: relative;
  background: transparent;
}
.section--instagram::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--main);
  mix-blend-mode: multiply !important;
  pointer-events:none;
  z-index: 0;
}

.section--instagram > *{
  position: relative;
  z-index: 1;
}

.instaHead{
  text-align:center;
  margin-bottom:46px;
}
.instaHead__mark{
  width:44px;
  height:44px;
  margin:0 auto 10px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.45);
}
.instaHead__sub{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.08em;
}
.instaHead__sub::after{
  content:"";
  display:block;
  width:240px;
  height:2px;
  margin:10px auto 0;
  background: rgba(255,255,255,.35);
}
.instaHead__title{
  margin:0;
  font-size: clamp(38px, 4.4vw, 64px);
}

.instaGrid{
  margin: 0 auto 30px;
}
@media screen and (max-width:757px){
  .instaGrid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

.instaCell{
  background: rgba(255,255,255,.18);
  border-radius: 0;
  overflow:hidden;
  aspect-ratio: 1/1;
}
.instaCell img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.0; /* 画像差し替え前の見た目を近づける */
}

.centerBtn{
  display:flex;
  justify-content:flex-end;
  margin-bottom: 34px;
}
@media screen and (max-width:757px){
  .centerBtn{
    justify-content:center;
  }
}

.pillBtn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 15px 40px;
  border-radius:999px;
  font-size:21px;
  font-weight:900;
  min-width: 410px;
  margin-top:50px;
}
@media screen and (max-width:757px){
  .pillBtn{
    width: 100%;
    min-width: auto;
    font-size: 16px;
    padding: 15px 30px;
    margin-top:30px;
  }
}

.pillBtn::after{
  content:"";
  width: 13px;
  height: 13px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  margin-left: auto;
  opacity: .8;
}
@media screen and (max-width:757px){
.pillBtn::after{
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  }
}

.pillBtn--light{
  background:var(--pale);
  color:var(--main);
  border:none;
}
.pillBtn--dark{
  background: var(--main);
  color:#fff;
  border:none;
}
.pillBtn--yellow{ background: #D1BB19; color:#fff; border:none; }
.pillBtn--green{ background: #5DAD75; color:#fff; border:none; }
.pillBtn--blue{ background: #5EA3C3; color:#fff; border:none; }

.blogCard{
  background: var(--pale);
  border-radius:  var(--radiusLg);
  padding: 70px 50px 70px 50px;
  color:#4C4C4D;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  max-width: 1000px;
  margin:0 auto;
  margin-top:100px;
}
@media screen and (max-width:757px){
  .blogCard{
    padding: 30px 20px 40px 20px;
     margin-top:50px;
  }
}

.blogCard__title{
  margin:0 0 18px;
  text-align:center;
  font-size:40px;
  letter-spacing: 3px;
  color: var(--main);
  text-decoration: underline;
  text-underline-offset: 10px;
}
@media screen and (max-width:1030px){
 .blogCard__title{
    font-size: 30px;
    letter-spacing: 0px;
  }
}
@media screen and (max-width:757px){
 .blogCard__title{
    font-size: 19px;
    letter-spacing: 0px;
  }
}

.blogCard__text{
  margin:0;
  font-size: 20px;
  text-align:center;
  font-weight:700;
  color:#3a3a3a;
  margin-top:40px;
}
@media screen and (max-width:1030px){
.blogCard__text{
    font-size: 18px;
  }
}
@media screen and (max-width:757px){
.blogCard__text{
    font-size: 16px;
    font-weight:normal;
    text-align: left;
    margin-top: 20px;
  }
}


.blogCard__btnRow{
  display:flex;
  justify-content:flex-end;
}
@media screen and (max-width:757px){
  .blogCard__btnRow{
    justify-content:center;
    margin-top: 20px;
  }
}




/* ======================================================================================
  園の特色
====================================================================================== */
.section--features{ 

}

.feature{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  margin: 0 auto 50px;
}
@media screen and (max-width:660px){
  .feature{
    display: flex !important;
    flex-direction: column-reverse; /* ←これで「文章→画像」になる */
    gap: 18px;
  }
}

.feature:last-child{ margin-bottom:0; }

.feature__img{
  overflow: visible;
}

.feature__img img{
  border-radius:  var(--radiusLg);
  width: 100%;
  height: 400px;
  object-fit: cover;
  transform: none;
}

.feature__body p{
  margin:0 0 14px;
  font-weight:600;
  color:#3b3b3b;
  font-size: 16px;
  line-height: 2;
  text-align: justify;
}
@media screen and (max-width:660px){
.feature__body p{
    font-weight: normal;
    line-height: 1.8;
      font-size: 15px;
  }
}

.feature__title{
  margin:0 0 16px;
  color: var(--main);
  font-size:35px;
  font-weight:900;
  line-height: 1.6;
  letter-spacing:.08em;
}
@media screen and (max-width:1030px){
  .feature__title{
    font-size:20px;
  }
}
@media screen and (max-width:660px){
  .feature__title{
    font-size:20px;
      line-height: 1.6;
  }
}

/* gridのはみ出し防止（文章が原因で崩れるのも防ぐ） */
.feature__img,
.feature__body{
  min-width: 0;
}

.feature__img img{
  max-width: none;
}

/* 右画像：画像と文章を必ず同じ行に固定 */
.feature--imgRight .feature__img{
  grid-column: 2;
  grid-row: 1;
}
.feature--imgRight .feature__body{
  grid-column: 1;
  grid-row: 1;
}

/* 左画像（念のため揃えておく） */
.feature--imgLeft .feature__img{
  grid-column: 1;
  grid-row: 1;
}
.feature--imgLeft .feature__body{
  grid-column: 2;
  grid-row: 1;
}

@media screen and (max-width:660px){
  .feature--imgRight .feature__img,
  .feature--imgRight .feature__body{
    grid-column:auto;
    grid-row:auto;
  }
}


/* 画像はみ出し */
.feature--imgLeft .feature__img img{
    width: calc(100% + 100px);
    margin-left: -125px;
}
@media screen and (max-width:1030px){
.feature--imgLeft .feature__img img{
    margin-left: -105px;
  }
}

.feature--imgRight .feature__img img{
    width: calc(100% + 100px);
    margin-left: 25px;
}

.feature--imgLeft .feature__body {
  margin-left: 25px;
}
@media screen and (max-width:1030px){
.feature--imgLeft .feature__body {
  margin-left: 0px;
  }
}

.feature--imgRight .feature__body {
  margin-right: 25px;
}
@media screen and (max-width:1030px){
.feature--imgRight .feature__body {
  margin-right: 0px;
  }
}



/* 画面幅が広い時は、はみ出し無し＝場所固定（4辺丸角のまま） */
@media screen and  (max-width:757px){
  .feature--imgLeft .feature__img img,
  .feature--imgRight .feature__img img{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width:660px){
  .feature__img img{
    height: 230px;
    width: 100%;
    margin-left: 0;
  }
}



/* ======================================================================================
  1日の流れ
====================================================================================== */
.section--day{
  padding: 90px 0;
}
.section--day{
  position: relative;
  background: transparent;
}
.section--day::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--pale);
  mix-blend-mode: multiply !important;
  pointer-events:none;
  z-index: 0;
}

.dayBlock{
  margin-top: 34px;
}

.dayBlock__age{
  margin: 0 0 18px;
  font-size:30px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
  color:#4C4C4D;
}
@media screen and (max-width:900px){
  .dayBlock__age{
    font-size:20px;
  }
}

.dayGrid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 50px;
  align-items:start;
  margin-bottom: 100px;
}
@media screen and (max-width:900px){
  .dayGrid{
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 50px;
  }
}

.timeline{
  list-style:none;
  padding:0;
  margin:0;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left: 70px;
  top: 18px;
  bottom: 100px;
  width:2px;
  background: var(--main);
  border-radius:999px;
}
@media screen and (max-width:900px){
  .timeline::before{
    left: 50px;
    bottom: 120px
  }
}
.timelineItem{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  padding: 10px 0;
  position:relative;
}
@media screen and (max-width:900px){
 .timelineItem{
    grid-template-columns: 95px 1fr;
  }
}

.timelineItem__time{
  width:140px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:2px solid var(--main);
  color:var(--main);
  font-weight:900;
  background: #fff;
  position:relative;
  z-index:1;
  font-size: 20px;
  font-weight: bold;
}
@media screen and (max-width:900px){
 .timelineItem__time{
    font-size: 15px;
    width: 100px;
    height: 50px;
  }
}

.timelineItem__body{
  padding-top: 4px;
}
@media screen and (max-width:900px){
  .timelineItem__body{
    padding-top: 0px;
  }
}

.timelineItem__title{
  margin:10px 0 6px;
  color: var(--main);
  font-weight:900;
  font-size:23px;
}
@media screen and (max-width:900px){
 .timelineItem__title{
        margin: 6px 0 3px;
        font-size: 18px;
  }
}

.timelineItem__text{
  margin:0;
  color:#4C4C4D;
    font-size:16px;
  font-weight:600;
  line-height:1.85;
  text-align: justify;
}
@media screen and (max-width:900px){
.timelineItem__text{
    font-size:15px;
     line-height:1.65;
     font-weight: normal;
  }
}

.dayPhotos{
  display:flex;
  flex-direction:column;
  gap: 40px;
}
@media screen and (max-width:900px){
  .dayPhotos{
    display:flex;
    flex-direction: row;
    gap: 15px;

    overflow-x: auto;          /* 横スクロール */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iPhone ぬるっと */
    padding-bottom: 8px;       /* スクロールバーの逃げ */
    scroll-snap-type: x mandatory;     /* 1枚ずつ止まる（いらなければ消してOK） */
  }

  .dayPhotos__img{
    flex: 0 0 auto;            /* 縮まない */
    width: 75vw;               /* 好みで 70〜85vw */
    height: 200px;
    scroll-snap-align: start;  /* 1枚ずつ止まる用 */
  }
}


.dayPhotos__img{
  border-radius: var(--radiusLg);
  height: 260px;
  object-fit:cover;
}
@media screen and (max-width:900px){
  .dayPhotos__img{
    width: 40vw;
    height: 200px;
  }
}
@media screen and (max-width:757px){
  .dayPhotos__img{
    width: 75vw; 
    height: 200px;
  }
}




/* ======================================================================================
  年間行事
====================================================================================== */
.section--annual{ 

}

.annualGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 34px;
}
@media screen and (max-width:757px){
  .annualGrid{
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.annualItem {
  margin-bottom:30px;
}
@media screen and (max-width:757px){
 .annualItem {
     margin-bottom:10px;
  }
}

.annualItem img{
  border-radius: var(--radiusLg);
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit:cover;
}

.annualItem__cap{
  margin:10px 0 0;
  font-size:20px;
  color:#4C4C4D;
}
@media screen and (max-width:757px){
 .annualItem__cap{
   font-size:15px;
  }
}

.season{
  display:inline-block;
  margin-right:8px;
    font-weight:bold;
}
@media screen and (max-width:757px){
 .season{
  margin-right:4px;
  }
}
.season--spring{ color:var(--main); }
.season--summer{ color:var(--main); }
.season--autumn{ color:var(--main); }
.season--winter{ color:var(--main); }

.subHead{
  margin: 24px 0 18px;
  font-size:30px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
}
@media screen and (max-width:757px){
 .subHead{
  font-size:18px;
  }
}

.alsoGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 18px;
}
@media screen and (max-width:757px){
  .alsoGrid{
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.alsoItem img{
  border-radius: var(--radiusLg);
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit:cover;
}

.alsoItem__cap{
  margin:10px 0 0;
  font-size:20px;
  color:#4C4C4D;
}
@media screen and (max-width:757px){
  .alsoItem__cap{
    margin: 10px 0 10px;
    font-size: 16px;
  }
}

.noteList{
  margin: 80px 0 0;
  padding-left: 1.2em;
  color:#4C4C4D;
  font-size: 16px;
  line-height: 2;
}
@media screen and (max-width:757px){
  .noteList{
   margin: 50px 0 0;
   font-size: 15px;
  }
}

.noteList li::marker{
  color: var(--main);
}

.miniDeco{
  margin: 100px auto 0;
  width:70%;
  height: auto;
    mix-blend-mode:multiply !important;
}
@media screen and (max-width:757px){
  .miniDeco{
   margin: 30px auto 0;
   width:90%;
   opacity: 0.8;
  }
}




/* ======================================================================================
  施設紹介（黄色）
====================================================================================== */
.section--facility{
  padding: 92px 0;
}
@media screen and (max-width:757px){
.section--facility{
    padding-bottom: 20px;
  }
}

.section--facility{
  position: relative;
  background: transparent;
}
.section--facility::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--main);
  mix-blend-mode: multiply;
  pointer-events:none;
  z-index: 0;
}
.section--facility > *{
  position: relative;
  z-index: 1;
}


.secHead--onYellow .secHead__title{ color:#4C4C4D; }
.secHead__sub--onYellow{ color:#fff; }
.secHead__sub--onYellow::after{ background: rgba(255,255,255,.35); }
.secHead__mark--onYellow{
  border-color: rgba(255,255,255,.45);
}
.secHead__mark--onYellow::after{ border-color: rgba(255,255,255,.45); }

.facilityItem{
  max-width: 1000px;
  margin: 0 auto ;
  margin-bottom:100px;
}
@media screen and (max-width:757px){
 .facilityItem{
    margin-bottom:50px;
  }
}

.facilityItem__title{
  text-align:center;
  margin: 0 0 16px;
  font-size: 30px;
  font-weight:900;
  letter-spacing:.2em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color: #fff;
}
@media screen and (max-width:757px){
.facilityItem__title{
   margin: 0 0 10px;
   font-size: 20px;
   letter-spacing:0;
     gap:10px;
  }
}

.facilityItem__photo img{
  border-radius: var(--radiusLg);
    width: 100%;
    height: 480px;
  object-fit:cover;
}
@media screen and (max-width:757px){
  .facilityItem__photo img{
    height: 200px;
  }
}

.facilityItem__text{
  margin:0 auto;
  color:#fff;
  font-size: 18px;
  font-weight:normal;
  opacity:.95;
  margin-top:20px;
  width:95%;
  text-align: justify;
}
@media screen and (max-width:757px){
 .facilityItem__text{
    font-size: 15px;
    font-weight: normal;
    line-height: 1.8;
  }
}

/* ======================================================================================
  園名
====================================================================================== */
.footer {
  isolation: isolate;
}

.footer__top{
  background: var(--pale);
  text-align:center;
  padding: 56px 0 46px;
  mix-blend-mode: multiply !important;
}
@media screen and (max-width:1000px){
.footer__top{
  padding: 40px 0 32px;
  }
}

.footer__mark{
  width:44px;
  height:44px;
  margin:0 auto 10px;
  border-radius:999px;
}
.footer__brand{
  margin:0;
  color: var(--main);
  font-weight:900;
  font-size: 25px;
}
@media screen and (max-width:1000px){
.footer__brand{
    font-size: 20px;
  }
}



/* ======================================================================================
  フッター
====================================================================================== */
.footer{ 
  background:#fff; 
  color:#4C4C4D; 
}

.footer_narabi{ 
  width:90%; 
  max-width:1200px;
  margin:0 auto;
  padding-top:100px;
}
@media screen and (max-width:1000px){
.footer_narabi{ 
  padding-top:50px;
  }
}

.footer__main {
  margin-bottom:50px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom:50px;
}
@media screen and (max-width:1000px){
.footer__main{
    gap: 10px;
    margin-bottom:30px;
  }
}

.icon-narabi-2{
  display: flex;
  align-items: center;
  gap: 14px;
}
@media screen and (max-width:1000px){
.icon-narabi-2{
    gap: 5px;
  }
}

.icon-narabi-2 img{
  width: 41px;
  height: auto;
  display: block;
}
@media screen and (max-width:1000px){
.icon-narabi-2 img{
   width: 30px;
  }
}

.footer__corp{
  font-size: 35px;
  font-weight:900;
}
@media screen and (max-width:1000px){
.footer__corp{
   font-size:20px;
  }
}

.footerCols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 100px;
}
@media screen and (max-width:1000px){
  .footerCols{
    grid-template-columns: 1fr;
    gap: 10px;
     padding-bottom: 50px;
  }
}

@media screen and (max-width:1000px){
.footerCol{
    margin-top: 10px;
  }
}

.footerCol__title{
  margin: 0 0 10px;
  font-size: 30px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
}
@media screen and (max-width:1000px){
.footerCol__title{
    font-size: 20px;
  }
}

.footerCol__title img{
  width:50px;
}
@media screen and (max-width:1000px){
.footerCol__title img{
  width:40px;
  }
}

.footerCol__links-1{
  margin:0 0 12px;
  padding-left: 1.2em;
  color:#4C4C4D;
  font-size:16px;
  font-weight:700;
  line-height: 2.3;
}
.footerCol__links-1 li::marker{
  color: var(--yellow);
}

.footerCol__links-2{
  margin:0 0 12px;
  padding-left: 1.2em;
  color:#4C4C4D;
  font-size:16px;
  font-weight:700;
  line-height: 2.3;
}
.footerCol__links-2 li::marker{
  color: var(--green);
}

.footerCol__links-3{
  margin:0 0 12px;
  padding-left: 1.2em;
  color:#4C4C4D;
  font-size:16px;
  font-weight:700;
  line-height: 2.3;
}
.footerCol__links-3 li::marker{
  color: var(--blue); 
}

.footerCol__links a{ text-decoration:none; }

.mapBox{
  border-radius:  var(--radiusLg);
  overflow:hidden;
  height: 220px;
  margin: 20px 0;
}
@media screen and (max-width:1000px){
.mapBox{
  height: 200px;
  margin: 10px 0;
  }
}

.mapBox iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.footerCol__addr{
  margin: 0 0 12px;
  font-size:16px;
  font-weight:bold;
  color:#4C4C4D;
}
@media screen and (max-width:1000px){
.footerCol__addr{
   margin: 0;
  }
}

.pillBtn-2{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 15px 40px;
  border-radius:999px;
  font-size:21px;
  font-weight:900;
  width: 100%;
  margin-top:30px;
}
@media screen and (max-width:1000px){
.pillBtn-2{
  font-size:16px;
    position: relative;
     margin-bottom:40px;
  }
}

.pillBtn-2::after{
  content:"";
  width: 13px;
  height: 13px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  margin-left: auto;
  opacity: .8;
}
@media screen and (max-width:1000px){
.pillBtn-2::after{
  content:"";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: .8;
  }
}

.footerCol--yellow .footerCol__title{ color: #D1BB19; }
.footerCol--green .footerCol__title{ color:#5DAD75; }
.footerCol--blue .footerCol__title{ color:#5EA3C3; }


  /*------------------------- スマホでアコーディオン -------------------------*/
@media screen and (max-width:1000px){

  /* タイトルをクリックできるように */
  .footerCol__title{
    cursor: pointer;
    position: relative;
    padding-right: 30px; /* 右の＋のスペース */
  }

  /* 右に＋を表示 */
  .footerCol__title::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:14px;
    height:14px;
    transform: translateY(-50%);
    background:
      linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,
      linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;
    opacity:.8;
  }

  /* 閉じる対象（タイトル以外を全部消す） */
  .footerCol__links-1,
  .footerCol__links-2,
  .footerCol__links-3,
  .footerCol .mapBox,
  .footerCol__addr,
  .footerCol .pillBtn-2{
    display:none;
  }

  /* open状態だけ表示 */
  .footerCol.is-open .footerCol__links-1,
  .footerCol.is-open .footerCol__links-2,
  .footerCol.is-open .footerCol__links-3,
  .footerCol.is-open .mapBox,
  .footerCol.is-open .footerCol__addr,
  .footerCol.is-open .pillBtn-2{
    display:block;
  }

  /* open時は＋を−に */
  .footerCol.is-open .footerCol__title::after{
    background:
      linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;
  }
}




.footerBottom{
  background:#4C4C4D;
  color:#fff;
  width:100%;
}
.footerBottom__inner{
  width:90%;
  margin:0 auto;
  padding: 16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
@media screen and (max-width:1100px){
  .footerBottom__inner{
    flex-direction:column;
    align-items: flex-start;
    padding: 25px 0;
  }
}

.footerBottom__nav{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size:16px;
}
@media screen and (max-width:1100px){
.footerBottom__nav{
    font-size:15px;
    gap: 10px;
    display: block; 
    text-align: left;
  }
}

.footerBottom__nav a{
  position: relative;
  padding-left: 30px;
}
@media screen and (max-width:1100px){
  .footerBottom__nav a{
    display: block;
    padding-left: 0;
    margin-bottom: 10px;
  }
}

/* 2個目以降のリンクの前に区切り線を出す */
.footerBottom__nav a + a::before{
  content: "｜";
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .6;
}
@media screen and (max-width:1100px){
.footerBottom__nav a + a::before{
    content: none;
  }
}

.footerBottom__copy{
  font-size:16px;
}
@media screen and (max-width:1100px){
.footerBottom__copy{
    font-size: 13px;
    margin-top: 10px;
    width: 100%;
    font-weight:normal;
    align-self: center; 
    text-align: center;
  }
}




/* ======================================================================================
  資料文書
====================================================================================== */
/* 全体 */
.section--material{
  padding: 100px 0;
}

.policy{
  max-width: 1100px;
  margin: 0 auto;
}

/* タイトル */
.policy__head{
  margin-bottom: 50px;
}

.policy__title{
  font-size: 35px;
  font-weight: 900;
  margin: 0 0 20px;
  color: var(--main);
  letter-spacing: .06em;
}

.policy__lead{
  font-size: 16px;
  line-height: 1.9;
  color: #4C4C4D;
  text-align: justify;
}

/* ページ内リンク */
.policyNav{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
  margin-bottom:100px;
}
@media screen and (max-width:757px){
  .policyNav{
    grid-template-columns: 1fr;
  }
}

.pillBtn-3{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 15px 40px;
  border-radius:999px;
  font-size:21px;
  font-weight:900;
  width: 100%;
}
@media screen and (max-width:1000px){
.pillBtn-3{
  font-size:18px;
    position: relative;
  }
}

.pillBtn-3::after{
  content:"";
  width: 13px;
  height: 13px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  margin-left: auto;
  opacity: .8;
}
@media screen and (max-width:1000px){
.pillBtn-3::after{
  content:"";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: .8;
  }
}


.pillBtn-4{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding: 15px 40px;
  border-radius:999px;
  font-size:21px;
  font-weight:900;
  min-width: 410px;
  margin-top:20px;
}
@media screen and (max-width:757px){
  .pillBtn-4{
    width: 100%;
    min-width: auto;
    font-size: 18px;
    padding: 15px 30px;
    margin-top:20px;
  }
}

.pillBtn-4::after{
  content:"";
  width: 13px;
  height: 13px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  margin-left: auto;
  opacity: .8;
}

.pillBtn-4.yohaku{
  margin-bottom:20px;
}


/* 各ブロック */
.policyBlock{
  margin-bottom: 70px;
  scroll-margin-top: 100px;
}

.policyBlock:last-child{
  margin-bottom: 0;
}

.policyBlock__title{
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 22px;
  padding-left: 18px;
  border-left: 6px solid var(--main);
}

/* 中身の箱 */
.policyDoc,
.policyCard{
  background: #fff;
  border-radius: var(--radiusLg);
  padding: 35px 35px 40px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.policyDoc__subTitle{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: var(--main);
  border-top: 1px solid #E5E5E5;
  padding-top: 40px;
}

.policyDoc__subTitle:first-child{
    border-top: none;
    padding-top: 10px;
}

.policyArticle{
  padding-bottom: 40px;
}

.policyArticle__title{
  margin: 0 0 px;
  font-size: 16px;
  font-weight: 900;
  color: #4C4C4D;
  margin-top: 30px;
}

.policyArticle p,
.policyCard p{
  font-size: 16px;
  line-height: 2;
  color: #4C4C4D;
  text-align: justify;
}

.policyArticle__label{
  margin:  0 8px;
  color: var(--main);
}

.policyArticle__label{
  line-height: 2;
}

.policyArticle__label br + span{
  display:block;
  padding-left:2em;
}

.policyDotList{
  list-style:none;
  margin:6px 0 18px;
  padding-left:3em; /* ←ここでさらに右へ */
}
@media screen and (max-width:1000px){
.policyDotList{
  padding-left:1em;
  }
}

.policyDotList li{
  position:relative;
  line-height:2;
  padding-left:1.4em;
}

.policyDotList li::before{
  content:"〇";
  position:absolute;
  left:0;
}



/* リスト */
.policyList{
  font-size: 16px;
  margin: 0;
  padding-left: 1.2em;
  line-height: 2;
}

.policyList li::marker{
  color: var(--main);
}

.policyList--kana{
  list-style:none;
  counter-reset:kana;
  padding-left:0;
}

.policyList--kana li{
  counter-increment:kana;
  padding-left:4em;   /* ←ここで右に動かす */
  text-indent:-2.6em;
}

.policyList--kana li::before{
  content:"（" counter(kana, katakana-iroha) "）";
  margin-right:.4em;
}


/* スマホ */
@media screen and (max-width:757px){

  .section--material{
    padding: 60px 0;
  }

  .policy{
    width: calc(100% - 28px);
  }

  .policy__head{
    margin-bottom: 36px;
  }

  .policy__title{
    font-size: 28px;
  }

  .policy__lead{
    font-size: 15px;
  }

  .policyNav__link{
    min-height: 54px;
    font-size: 16px;
  }

  .policyBlock{
    margin-bottom: 50px;
    scroll-margin-top: 80px;
  }

  .policyBlock__title{
    font-size: 18px;
    margin-bottom: 16px;
  }

  .policyDoc,
  .policyCard{
    padding: 24px 18px 28px;
    border-radius: 20px;
  }

  .policyDoc__subTitle{
    font-size: 20px;
    margin-bottom: 18px;
  }

  .policyArticle__title{
    font-size: 16px;
  }

  .policyArticle p,
  .policyCard p,
  .policyList{
    font-size: 15px;
  }

}