/***********************
/***HOME
/***********************/
.home {
  padding: 0 !important;
}
.home section {
  padding: 60px 0;
}
.home .leisure {
  position: relative;
  z-index: 2;
  padding-top: 20px;
}
.home .leisure .swiper {
  opacity: 0;
  transition: 0.3s;
}
.home .leisure .swiper.swiper-initialized {
  opacity: 1;
}
.home .leisure:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  background: #FFE4E4;
  width: 100%;
  height: 70%;
  border-radius: 60px;
}
.home .leisure .catch {
  text-align: center;
  padding-bottom: 20px;
  width: 40vw;
  max-width: 500px;
  margin: auto;
}
@media (max-width: 640px) {
  .home .leisure .catch {
    width: 70vw;
  }
}
.home .leisure .leisure-item {
  display: block;
  position: relative;
  border-radius: 35px;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
}
.home .leisure .leisure-item > img {
  position: absolute;
  width: 100%;
  inset: 0;
  margin: auto;
}
.home .leisure .text {
  position: absolute;
  left: 3%;
  bottom: 3%;
  width: 70%;
}
@media (max-width: 640px) {
  .home .leisure .text {
    width: 90%;
  }
}
.home .leisure .label-wrap {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.home .leisure h3 {
  font-weight: 500;
  position: relative;
  z-index: 2;
  font-size: 36px;
  display: inline;
  background: rgba(255, 255, 255, 0.9);
  padding: 4px 12px;
  line-height: 2;
}
@media (max-width: 640px) {
  .home .leisure h3 {
    padding: 0px 2px;
    font-size: 16px;
  }
}
.home .leisure .tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 24px;
}
@media (max-width: 640px) {
  .home .leisure .tag-wrap {
    padding: 0 12px;
    gap: 2px 12px;
  }
}
.home .leisure .tag-wrap a {
  color: #F63B3E;
  font-weight: 500;
  font-size: 18px;
}
@media (max-width: 640px) {
  .home .leisure .tag-wrap a {
    font-size: 14px;
  }
}
/* お出かけ情報スライダーのページ送り（●）  2026-10-19 追加（基本の見た目は既存の赤い指定より前に置く） */
.home .leisure .swiper-pagination {
  position: relative;
  margin: 16px auto 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.home .leisure .swiper-pagination-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border-radius: 50%;
  background: #000;
  opacity: 0.2;
  vertical-align: top;
}
.home .leisure .swiper-pagination-bullet-active {
  background: #F63B3E;
}
.home .leisure .swiper-pagination-bullet-active {
  opacity: 1;
}
.home .leisure .swiper-pagination-bullets-dynamic {
  overflow: hidden;
  white-space: nowrap;
}
.home .leisure .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  position: relative;
  transform: scale(0.33);
  transition: transform 0.2s, left 0.2s;
}
.home .leisure .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.home .leisure .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.home .leisure .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,
.home .leisure .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.home .leisure .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev,
.home .leisure .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.home .banner-wrap {
  margin: 40px auto 0;
}
.home .banner-wrap a {
  display: block;
  max-width: 970px;
  margin: auto;
  text-align: center;
}
.home .school {
  background: #FFFAE7;
}
.home .school p {
  text-align: center;
}
.home .school .school-wrap {
  display: flex;
  margin-top: 24px;
  justify-content: space-between;
  gap: 40px;
}
@media (max-width: 640px) {
  .home .school .school-wrap {
    flex-direction: column;
  }
}
.home .school .school-wrap a {
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}
.home .school .nursery {
  background: #3BEA72;
}
.home .school .kinder {
  background: #61BFF2;
}
.home .school img {
  transition: 0.3s;
}
.home .school .school-wrap a:hover img {
  transform: scale(1.1);
}
.home .school .txt {
  position: absolute;
  left: 5%;
  bottom: 5%;
  color: #fff;
  font-weight: 500;
}
.home .school .english {
  font-size: 36px;
  letter-spacing: 2px;
}
.home .school h3 {
  font-size: 28px;
}
@media (max-width: 640px) {
  .home .school h3 {
    font-size: 18px;
  }
}
.home .relation-service ul {
  display: grid;
  gap: 40px;
  margin-bottom: 24px;
}
.home .relation-service ul a {
  display: flex;
  gap: 24px;
  align-items: center;
}
@media (max-width: 640px) {
  .home .relation-service ul a {
    flex-direction: column;
  }
}
.home .relation-service .thumb {
  width: 45%;
  overflow: hidden;
  border-radius: 20px;
}
@media (max-width: 640px) {
  .home .relation-service .thumb {
    width: 100%;
  }
}
.home .relation-service .thumb img {
  transition: 0.3s;
}
.home .relation-service .txt {
  width: 55%;
}
@media (max-width: 640px) {
  .home .relation-service .txt {
    width: 100%;
  }
}
.home .relation-service h3 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 16px;
  line-height: 1.25;
}
@media (max-width: 640px) {
  .home .relation-service h3 {
    font-size: 18px;
  }
}
.home .relation-service p {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.home .relation-service .label-wrap {
  margin-top: 16px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.home .news {
  background: #EFEFEF;
  padding: 40px 0;
}
.home .news ul {
  margin-bottom: 24px;
}
.home .news ul li {
  border-bottom: dashed 1px #D4D4D4;
}
.home .news ul li a {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
}
@media (max-width: 640px) {
  .home .news ul li a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
  }
}

/***********************
/*** NURSERY SCHOOL kindergarten
/***********************/
.page-nursery-school .map,
.page-kindergarten .map {
  margin-bottom: 40px;
}

/***********************
/*** SINGLE
/***********************/
.single .label-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.single h1 {
  font-size: 36px;
  line-height: 1.25;
  font-weight: 500;
  margin-bottom: 24px;
}
@media (max-width: 960px) {
  .single h1 {
    font-size: 24px;
  }
}
.single .thumbnail {
  margin-bottom: 24px;
  vertical-align: bottom;
  border-radius: 10px;
  overflow: hidden;
}
.single .img-main {
  margin-top: 24px;
}
.single .img-main li {
  display: none;
}
.single .img-main li.show {
  display: block;
}
.single .img-thumbs {
  margin: 24px 0 40px;
  display: flex;
  gap: 12px;
}
.single .img-thumbs li {
  width: 80px;
  height: 80px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
@media (max-width: 640px) {
  .single .img-thumbs li {
    width: 50px;
    height: 50px;
  }
}
.single .img-thumbs li.active {
  outline: 3px solid #F63B3E;
}
.single .img-thumbs li img {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.single .introduction {
  white-space: pre-line;
  margin-bottom: 40px;
}
.single .table-wrap {
  margin-bottom: 40px;
}
.single .table-wrap th,
.single .table-wrap td {
  padding: 12px;
  border: solid 1px #D4D4D4;
}
.single .table-wrap th {
  background: #EFEFEF;
  word-break: keep-all;
  font-weight: 500;
  vertical-align: middle;
}
.single .table-wrap td a {
  color: #61BFF2;
}
.single .sns-wrap {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
}
.single .sns-wrap a {
  width: 36px;
}
.single .sns-wrap a p {
  font-size: 9px;
  text-align: center;
}
.single .single-paging {
  clear: both;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.single .single-paging .prev,
.single .single-paging .next {
  padding: 12px;
  background: #FFFAE7;
}
.single .single-paging a {
  color: #61BFF2;
  text-decoration: underline;
}

/***********************
/*** ABOUT
/***********************/
.page-about h2 {
  font-weight: bold;
  font-size: 60px;
  color: #fdb9ba;
}
@media (max-width: 960px) {
  .page-about h2 {
    font-size: 8vw;
  }
}
.page-about p {
  line-height: 2;
  font-size: 18px;
}
@media (max-width: 960px) {
  .page-about p {
    font-size: 16px;
  }
}
.page-about .office {
  margin-top: 40px;
}
.page-about .office h3 {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 24px;
}
.page-about .office th,
.page-about .office td {
  border: solid 1px #D4D4D4;
  padding: 12px;
}
.page-about .office th {
  background: #EFEFEF;
}

/***********************
/*** PRIVACY
/***********************/
.page-privacy .grid {
  display: grid;
  gap: 1.5rem;
}
.page-privacy .block {
  padding-bottom: 1.5rem;
  border-bottom: solid 1px #D4D4D4;
}
.page-privacy h2 {
  font-weight: bold;
  font-size: 24px;
}
.page-privacy p a {
  color: #61BFF2;
}

/***********************
/*** CONTACT
/***********************/
.page-contact {
  background: #fdebeb;
}
.page-contact .form {
  padding: 40px 0;
}
.page-contact .form .form-item {
  margin-top: 10px;
}
.page-contact .form input,
.page-contact .form textarea {
  width: 100%;
  padding: 10px;
  border: solid 1px #ccc;
  border-radius: 10px;
}
.page-contact .form .submit {
  text-align: center;
}
.page-contact .form .submit input {
  width: 300px;
  margin: 10px auto;
}
.page-contact .form .submit span {
  display: none;
}
.page-contact .wpcf7-response-output {
  border-color: #F63B3E !important;
  color: #F63B3E;
  font-weight: bold;
  border-radius: 10px;
  padding: 10px;
}/*# sourceMappingURL=pageStyle.css.map */

/***********************
/*** がたベビ（新潟日報）連携ロゴ 2026-11-13 追加
/***********************/
.home .gatababy-top {
  margin: 40px auto 0;
  text-align: center;
}
.home .gatababy-top a {
  display: inline-block;
  width: 360px;
  max-width: 100%;
}
@media (max-width: 640px) {
  .home .gatababy-top a {
    width: 40vw;
    max-width: 160px;
  }
}
.home .gatababy-top img {
  display: block;
  width: 100%;
  height: auto;
}
.footer .gatababy-footer {
  margin-top: 24px;
}
.footer .gatababy-footer a {
  display: inline-block;
  width: 120px;
  margin-top: 0;
}
.footer .gatababy-footer img {
  display: block;
  width: 100%;
  height: auto;
}
.footer .gatababy-footer p {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
}

/*** がたベビ 説明文 2026-11-13 追加 ***/
.home .gatababy-text {
  margin-top: 16px;
  font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.8;
  color: #5c4a40;
  text-align: center;
}
.home .gatababy-text .gatababy-nowrap {
  white-space: nowrap;
}
.home .gatababy-text .gatababy-name {
  color: #c9501f;
}
@media (max-width: 640px) {
  .home .gatababy-text {
    font-size: 13px;
  }
}

/***********************
/*** 執筆者プロフィール 2026-11-13 追加・同日変更
/*** 記事ページ（single.php：.single）と投稿一覧ページ（author.php：body.author）の .author-wrap
/***********************/
/* プロフィール文は PC・スマホとも全文表示（common.css の行数制限を外す）。改行は <br /> で反映 */
.single .author-wrap .trim,
body.author .author-wrap .trim {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
@media (max-width: 640px) {
  .single .author-wrap,
  body.author .author-wrap {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas: "avatar name" "avatar sns" "text text" "link link";
    column-gap: 14px;
    align-items: start;
    padding: 16px;
  }
  .single .author-wrap .avatar,
  body.author .author-wrap .avatar {
    grid-area: avatar;
    align-self: center;
  }
  .single .author-wrap .info,
  body.author .author-wrap .info {
    display: contents;
  }
  .single .author-wrap h4,
  body.author .author-wrap h4 {
    grid-area: name;
    align-self: end;
    line-height: 1.4;
  }
  .single .author-wrap .author-sns-wrap,
  body.author .author-wrap .author-sns-wrap {
    grid-area: sns;
    align-self: start;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
  }
  .single .author-wrap .author-sns-wrap a,
  body.author .author-wrap .author-sns-wrap a {
    width: 42px;
  }
  .single .author-wrap .trim,
  body.author .author-wrap .trim {
    grid-area: text;
    margin-top: 16px;
  }
  .single .author-wrap .info > a {
    grid-area: link;
    margin-top: 12px;
  }
}

/***********************
/*** ブランドアニメーション 2026-11-13 追加（トップ：お出かけ情報の上の「みんなで育む、繋げてく」）
/*** SVG＋CSS だけ。JS は「画面に入ったら .is-play を付ける」だけ
/*** 何もしない状態（JS なし・視差効果を減らす設定）は、最後のロゴだけが出た状態
/***********************/
.hc-brand-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.hc-brand {
  display: block;
  width: 440px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 340 / 230; /* 先に高さを確保してページがずれないようにする */
}
@media (max-width: 640px) {
  .hc-brand {
    width: 75vw;
    max-width: 320px;
  }
}
/* お出かけ情報の枠のピンクの背景（.leisure:after は「下から70%」）を、アニメーションの下からさらに
   「スライドの高さの約4割」下から始めて、スライドの上の部分を背景からはみ出させる（2026-11-13 変更）
   ・40px＝枠の上の余白20px＋h2 の下の余白20px。アニメーションの高さは幅 × 230 / 340
   ・スライドの幅は Swiper の設定から：959px 以下は 1.3枚表示 → 幅 ≒ 100vw / 1.3、960px 以上は 1.8枚表示 → 幅 ≒ (100vw - 32px) / 1.8
   ・スライドの高さの4割：641〜959px（3:2）≒ 20.5vw、960px 以上（3:2）≒ 14.8vw - 5px、640px 以下（4:3）≒ 23vw */
.home .leisure.has-hc-brand:after {
  top: calc(40px + 440px * 230 / 340 + 20.5vw);
  height: auto;
}
@media (min-width: 960px) {
  .home .leisure.has-hc-brand:after {
    top: calc(40px + 440px * 230 / 340 + 14.8vw - 5px);
  }
}
@media (max-width: 640px) {
  .home .leisure.has-hc-brand:after {
    top: calc(40px + min(75vw, 320px) * 230 / 340 + 23vw);
  }
}
.hc-brand svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hc-brand__copy {
  font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
}
.hc-brand__ic {
  transform-box: fill-box;
  transform-origin: center;
}

/* 何もしない状態：場面は隠して、ロゴだけ出す */
.hc-brand__scene {
  opacity: 0;
}
.hc-brand__logo {
  opacity: 1;
}

/* 再生の準備（JS が付ける）：ロゴを隠し、アイコン・線・文字を始まりの形にする */
.hc-brand.is-ready .hc-brand__scene {
  opacity: 1;
}
.hc-brand.is-ready .hc-brand__logo {
  opacity: 0;
}
.hc-brand.is-ready .hc-brand__ic {
  opacity: 0;
  transform: scale(0.3);
}
.hc-brand.is-ready .hc-brand__line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.hc-brand.is-ready .hc-brand__copy {
  opacity: 0;
}

/* 再生（画面に入ったら JS が付ける。約4.5秒・1回だけ） */
.hc-brand.is-play .hc-brand__ic {
  animation: hc-brand-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) var(--d, 0s) forwards;
}
.hc-brand.is-play .hc-brand__line {
  animation: hc-brand-draw 1.5s ease-in-out 0.5s forwards;
}
.hc-brand.is-play .hc-brand__copy {
  animation: hc-brand-in 0.6s ease-out 2.1s forwards;
}
.hc-brand.is-play .hc-brand__scene {
  animation: hc-brand-out 0.6s ease-in 3.4s forwards;
}
.hc-brand.is-play .hc-brand__logo {
  animation: hc-brand-in 0.7s ease-out 3.8s forwards;
}
@keyframes hc-brand-pop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hc-brand-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes hc-brand-in {
  to {
    opacity: 1;
  }
}
@keyframes hc-brand-out {
  to {
    opacity: 0;
  }
}
/* 念のため：設定が途中で変わっても、視差効果を減らす人には最後の状態だけ */
@media (prefers-reduced-motion: reduce) {
  .hc-brand.is-ready .hc-brand__scene {
    opacity: 0;
    animation: none;
  }
  .hc-brand.is-ready .hc-brand__logo {
    opacity: 1;
    animation: none;
  }
}
/* catch の画像用の幅（common の .home .leisure .catch）をアニメーションでは使わない */
.home .leisure .catch.hc-brand-wrap {
  width: auto;
  max-width: none;
}

/***********************
/*** お出かけ情報スライダーのタイトル 2026-11-13 変更
/*** タグ＋タイトルを写真の下の1つの半透明の帯にまとめる。タイトルは最大3行で「…」。改行は言葉の区切り（functions.php の hugconne_title_phrases()）
/***********************/
/* 文字のかたまり（タグ＋タイトル）を、写真の下にまとめた1つの半透明の帯にする */
.home .leisure .text {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  padding: 14px 24px 18px;
  background: rgba(255, 255, 255, 0.88);
}
.home .leisure .label-wrap {
  margin-bottom: 8px;
  gap: 4px 6px;
}
.home .leisure h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 最大3行で「…」 */
  overflow: hidden;
  background: none;
  padding: 0;
  font-size: 21px;
  line-height: 1.5;
  word-break: keep-all; /* 言葉の途中では改行しない（区切りは <wbr> で入れる） */
  overflow-wrap: anywhere; /* 区切りのない長い言葉だけ、はみ出さないように折り返す */
  line-break: strict;
}
@media (max-width: 640px) {
  /* スマホの写真は 4:3 で用意されている（size_4_3）ので、枠も 4:3 にして写真を切らずに見せる */
  .home .leisure .leisure-item {
    padding-bottom: 75%;
    border-radius: 24px;
  }
  .home .leisure .text {
    width: auto;
    padding: 8px 12px 10px;
  }
  .home .leisure .label-wrap {
    margin-bottom: 4px;
    gap: 3px 4px;
  }
  .home .leisure .label-wrap .label {
    font-size: 10px;
    padding: 1px 7px;
    line-height: 1.6;
  }
  .home .leisure h3 {
    font-size: 16px;
    line-height: 1.45;
    padding: 0;
  }
}
@media (min-width: 375px) and (max-width: 640px) {
  .home .leisure h3 {
    font-size: 17px;
  }
}

/* お出かけ情報スライダー：PC（641px 以上）の写真の枠を 16:9 → 3:2（写真は size_3_2）。スマホは上の指定どおり 4:3（2026-11-13 変更） */
@media (min-width: 641px) {
  .home .leisure .leisure-item {
    padding-bottom: 66.6667%;
  }
}

/* お出かけ情報スライダーの1枚目（<picture class="leisure-first">）：ほかのスライドの写真と同じ置き方にする（2026-11-13 追加） */
.home .leisure .leisure-item > picture {
  display: contents;
}
.home .leisure .leisure-item > picture > img {
  position: absolute;
  width: 100%;
  inset: 0;
  margin: auto;
}

/* トップのブログ一覧の画像（functions.php の hugconne_blog_list_thumb()）：元の縦横比の画像を、今までと同じ「中央を 16:9」で見せる（2026-11-13 追加） */
#blog-list .thumb > img {
  height: 100%;
  object-fit: cover;
}

/* お出かけ情報スライダー（2026-11-13 追加）：Swiper の準備ができる前から、1枚目だけを準備後と同じ位置・大きさで見せる（LCP の「描画までの待ち」を減らすため） */
/* Swiper の計算と同じ：スライドの幅 = (枠の幅 - (表示枚数 - 1) × 間隔) / 表示枚数、1枚目を中央に置く */
/* 959px 以下：1.3枚・間隔 20px → 幅 = (100% - 6px) / 1.3。960px 以上：1.8枚・間隔 40px → 幅 = (100% - 32px) / 1.8 */
/* 2枚目以降は、準備前は透明のまま（準備で並び替わるときにずれとして数えられないように） */
.home .leisure .swiper {
  opacity: 1;
}
/* ページ送りの●（高さ 8px）は Swiper の準備で入る。準備前から高さを確保して、下のタグ一覧がずれないようにする */
.home .leisure .swiper-pagination {
  min-height: 8px;
}
.home .leisure .swiper:not(.swiper-initialized) .swiper-wrapper {
  transform: translateX(calc((100% - (100% - 6px) / 1.3) / 2));
}
.home .leisure .swiper:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 6px) / 1.3);
  margin-right: 20px;
  opacity: 0;
}
.home .leisure .swiper:not(.swiper-initialized) .swiper-slide:first-child {
  opacity: 1;
}
@media (min-width: 960px) {
  .home .leisure .swiper:not(.swiper-initialized) .swiper-wrapper {
    transform: translateX(calc((100% - (100% - 32px) / 1.8) / 2));
  }
  .home .leisure .swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 32px) / 1.8);
    margin-right: 40px;
  }
}
