/* ==========================================================================
   iOS Reset
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    /* 方向転換時の文字サイズ自動調整を防止 */
    -webkit-tap-highlight-color: transparent;
    /* タップ時のハイライト（グレーの枠）を無効化 */
}

/* 電話番号の自動リンク化をリセット（色は継承、下線なし） */
a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

/* iOSのデフォルトスタイル（ボタンのグラデーションなど）をリセット */
button,
input,
select,
textarea {
    -webkit-appearance: none;
    appearance: none;
}

/* ==========================================================================
   書体設定
   ========================================================================== */
.font-kiwi {
    font-family: "Kiwi Maru";
}

.font-klee {
    font-family: "Klee One";
}

.font-kaisei {
    font-family: "Kaisei Decol";
}

.font-zen-maru {
    font-family: "Zen Maru Gothic";
}


.midashiH2 {
    position: relative;
    width: 780px;
    margin: 0 auto;
    z-index: 11;
}

.midashiH2 h2 {
    font-weight: normal;
    background-image: linear-gradient(#f8e9e6, #f8e9e6);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 20px;
    display: inline;
    line-height: 1.5;
    margin: 0;
    position: relative;
    font-size: 3.6rem;
}

.midashiH2 h2.font-kiwi.ageH2 {
    background-image: linear-gradient(#faf4e5, #faf4e5);
}

.midashiH2 h2.font-kiwi.newsH2 {
    background-image: linear-gradient(#d1e9f6, #d1e9f6);
}

.midashiH2 h2 span {
    font-size: 4.8rem;
}

.midashiH2 h2::before {
    content: "";
    display: block;
    position: absolute;
    width: 42px;
    height: 36px;
    background-image: url("/img/kosodate/i-h2.svg");
    background-size: contain;
    background-repeat: no-repeat;
    top: -25px;
    left: -35px;
    /* 必要に応じて重なり順を指定（文字の下に敷くなら-1） */
    /* z-index: -1; */
}


/* ==========================================================================
   全体レイアウト
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    background-color: #f6f5f2;
    border-right: solid 1px #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

/* --- 追加：ナビゲーションを中央に寄せるための設定 --- */
.navWrapper {
    flex: 1;
    /* ロゴ以外の残りの高さをすべて占める */
    display: flex;
    flex-direction: column;
    width: 100%;
}

.globalNav {
    margin: auto 0;
    /* 上下のマージンを自動計算して中央に配置 */
    font-size: 2rem;
}

#contentMain {
    margin-left: 280px;
    width: auto;
}


/* ==========================================================================
   ヘッダー
   ========================================================================== */
.header h1 {
    margin: 0;
}

.header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header ul.globalNav {
    font-size: 2rem;
    padding: 0px 20px 15px;
}

.globalNav li {
    border-bottom: solid 1px #333;
}

.globalNav li:last-child {
    border: none;
}

.globalNav li a {
    text-decoration: none;
    display: block;
    padding: 10px 0;
    color: #333;
}

.emergencyLink {
    width: 100%;
}

.emergencyLink ul li a {
    display: block;
    padding: 18px 25px;
    text-decoration: none;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.emergencyLink ul li.shouni a,
.emergencyLink ul li.kyukyu a {
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: right 25px center;
}

.emergencyLink ul li.kyukyu a {
    background-color: #E6555C;
    color: #FFF;
    background-image: url("/img/kosodate/arrow-siro.svg");
}

.emergencyLink ul li.shouni a {
    background-color: #FFDA7C;
    color: #333;
    background-image: url("/img/kosodate/arrow.svg");
}

.emergencyLink ul li a:hover {
    background-position: right 10px center;
    /* 右端からの距離を15px→10pxにして5px右へ移動 */
}



/* ==========================================================================
   目的からさがす (2行4列レイアウト)
   ========================================================================== */
.purposeSearch {
    background-color: #f1d3ce;
    padding: 105px 0px;
    position: relative;
}

.purposeSearch ul {
    position: relative;
    width: 780px;
    margin: 60px auto 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 行数はアイテム数に応じて自動で増え、高さはコンテンツに合わせる */
    grid-auto-rows: auto;
    gap: 24px;
    list-style: none;
    padding: 0;
    z-index: 11;
}

.purposeSearch ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    background-color: #FFF;
    border-radius: 15px;
    padding: 24px 16px;
    border: 3px solid transparent;
    box-sizing: border-box;
}

/* アイコン共通設定 */
.purposeSearch ul li a::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 個別アイコン画像設定 */
.purposeSearch ul li a.purpose01::before {
    background-image: url("/img/kosodate/pp01.svg");
}

.purposeSearch ul li a.purpose02::before {
    background-image: url("/img/kosodate/pp02.svg");
}

.purposeSearch ul li a.purpose03::before {
    background-image: url("/img/kosodate/pp03.svg");
}

.purposeSearch ul li a.purpose04::before {
    background-image: url("/img/kosodate/pp04.svg");
}

.purposeSearch ul li a.purpose05::before {
    background-image: url("/img/kosodate/pp05.svg");
}

.purposeSearch ul li a.purpose06::before {
    background-image: url("/img/kosodate/pp06.svg");
}

.purposeSearch ul li a.purpose07::before {
    background-image: url("/img/kosodate/pp07.svg");
}

.purposeSearch ul li a.purpose08::before {
    background-image: url("/img/kosodate/pp08.svg");
}

.purposeSearch ul li a.purpose09::before {
    background-image: url("/img/kosodate/pp09.svg");
}

.purposeSearch ul li a:hover {
    transform: translateY(-5px);
    border-color: #d4a59a;
}

/* ==========================================================================
   年齢からさがす (1行4列レイアウト)
   ========================================================================== */
.ageSearch {
    background-color: #F6EACB;
    padding: 105px 0;
    position: relative;
}

.ageSearch ul {
    position: relative;
    width: 780px;
    margin: 60px auto 0px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    z-index: 11;
}

.ageSearch ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    background-color: #FFF;
    border-radius: 15px;
    padding: 24px 16px;
    border: 3px solid transparent;
    box-sizing: border-box;
}

/* アイコン共通設定：高さ80px固定 */
.ageSearch ul li a::before {
    content: "";
    display: block;
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 個別アイコン画像設定 */
.ageSearch ul li a.age01::before {
    background-image: url("/img/kosodate/age01.svg");
}

.ageSearch ul li a.age02::before {
    background-image: url("/img/kosodate/age02.svg");
}

.ageSearch ul li a.age03::before {
    background-image: url("/img/kosodate/age03.svg");
}

.ageSearch ul li a.age04::before {
    background-image: url("/img/kosodate/age04.svg");
}

.ageSearch ul li a:hover {
    transform: translateY(-5px);
    border-color: #c7b68d;
}

/* ==========================================================================
   お知らせ
   ========================================================================== */
/* 1. お知らせエリア全体をフレックスコンテナにする */
.newsInfo {
    background-color: #f6f5f2;
    padding: 105px 0;
    position: relative;
}

/* テキストとイラストを包むコンテナを780pxで中央配置 */
.newsInfo .newsFlexContainer {
    width: 780px;
    margin: 40px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 11;
}

/* 2. newsContentの幅を調整（イラストの分を空ける） */
.newsInfo .newsContent {
    flex: 1;
    margin-right: 20px;
}

.newsContent ul {
    margin: 0;
    padding: 0;
}

.newsContent ul li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    list-style: none;
    font-size: 1.6rem;
    border-bottom: dashed 1px #333;
    padding-bottom: 10px;
}

.newsContent .article_date {
    flex: 0 0 160px;
    /* 日付の幅を固定 */
}

.newsContent .article_title {
    flex: 1;
}

/* 3. イラストの配置を絶対配置からフレックス内の通常配置に変更 */
.newsInfo .illustWrap.illust03 {
    position: static;
    /* position: absolute を解除 */
    flex: 0 0 140px;
    /* HTMLに記載のwidth 140pxに合わせる */
}

.newsInfo .illustWrap.illust03 img {
    width: 100%;
    height: auto;
}

.ichiranLink {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ichiranLink a {
    padding: 10px 60px 10px 50px;
    border: 1px solid #ccc;
    background: #c3e0ef;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 300px;
    box-sizing: border-box;
    background-image: url("/img/kosodate/arrow.svg");
    background-repeat: no-repeat;
    background-size: 25px;
    background-position: right 15px center;
}

/* 「一覧を見る」リンクのホバー設定 */
.ichiranLink a:hover {
    background-position: right 10px center;
    /* 右端からの距離を15px→10pxにして5px右へ移動 */
}


/* ==========================================================================
   関連リンク (1行4列レイアウト)
   ========================================================================== */
.relatedLinks {
    background-color: #f1d3ce;
    padding: 105px 0;
    position: relative;
}

/* バナーを囲むコンテナの調整 */
.linkBanners {
    position: relative;
    width: 780px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    z-index: 11;
}

.linkBanners p {
    margin: 0;
    padding: 0;
}

.linkBanners p img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: bottom;
}

.linkBanners p a {
    display: block;
    transition: transform 0.3s ease;
}

/* ホバー時に少し浮き上がる演出（他のボタンと統一） */
.linkBanners p a:hover {
    transform: translateY(-5px);
}


/* ==========================================================================
   フッター
   ========================================================================== */
.footer {
    width: 100%;
    background-color: #D1E9F6;
    padding: 40px 0 20px;
}

.footerInner {
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 780px;
    z-index: 11;
}

.footerInner>img {
    width: 250px;
    height: auto;
}

.footerInfo {
    flex: 1;
    padding-left: 22px;
}

.footerContact {
    display: flex;
    gap: 30px;
    margin: 20px 0;
}

.footerContact p {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.footerContact p strong {
    display: block;
    background-color: #FFF;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 300px;
    margin-bottom: 7px;
}

/* フッターリンクボタン */
.footerLink {
    display: flex;
    column-gap: 20px;
}

.footerLink>div {
    flex: auto;
}

.footerLink a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 25px;
    border: 1px solid #333;
    background: #fff;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 300px;
    box-sizing: border-box;
}

/* ボタン個別の背景色 */
.mailForm a {
    background: #444;
    color: #FFF;
}

.inawashiroHp a {
    background: #fff;
    color: #333;
}

/* フッターアイコン(::before) */
.footerLink a::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mailForm a::before {
    background-image: url("/img/kosodate/i-mail.svg");
}

.inawashiroHp a::before {
    background-image: url("/img/kosodate/chosho.svg");
}

/* フッターホバー：浮き上がりアニメーション */
.footerLink a:hover {
    transform: translateY(-5px);
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); */
}

/* ホバー時に背景色が変わるのを防ぐ（各ボタンの色を維持） */
.mailForm a:hover {
    background: #444;
}

.inawashiroHp a:hover {
    background: #fff;
}

.copyR {
    text-align: center;
    margin-top: 40px;
    font-size: 1.4rem;
}



/* ==========================================================================
   イラスト
   ========================================================================== */

.illustWrap {
    position: absolute;
    z-index: 11;
}

.illust01 {
    top: -80px;
    right: 100px;
}

.illust02 {
    top: -50px;
    right: 60px;
}

.illust03 {
    top: 0px;
    right: 60px;
}

.illust04 {
    top: -50px;
    right: 60px;
}



/* ==========================================================================
   トップスライド
   ========================================================================== */

#kosodateSlide {
    overflow: hidden;
    background-color: #f6f5f2;
    padding: 40px 0;
    background-image: url("/img/kosodate/bg-slide.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-bottom: 0px;
}

#kosodateSlide .swiper-slide {
    margin-top: 50px;
}

#kosodateSlide .swiper-slide.swiper-slide-active {
    margin-top: 0px;
}


/* --- Peekパターン：左右3/5チラ見せ用修正 --- */
.swiper-peek .swiper-container {
    width: 100%;
    /* コンテナの外側までスライドを表示させる */
    overflow: visible !important;
}

.swiper-peek .swiper-wrapper>*,
.swiper-peek .swiper-slide {
    /* 左右を約60%ずつ見せるための横幅（220%で割った値） */
    width: 60% !important;
    opacity: 0.4;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* アクティブなスライドの不透明度を1にする */
.swiper-peek .swiper-slide-active {
    opacity: 1;
}

.swiper-peek .swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    /* 子育てサイトらしい柔らかさを出す（任意） */
}


/* ページネーションのドットを元の枚数分（3つ）だけに制限する */
/* 4番目以降のドットを非表示 */
.limit-bullets-3 .swiper-pagination-bullet:nth-child(n+4) {
    display: none !important;
}

/* もし元が4枚の場合の汎用設定（必要に応じて追加） */
.limit-bullets-4 .swiper-pagination-bullet:nth-child(n+5) {
    display: none !important;
}



/* ==========================================================================
   メインエリア背景装飾（左右縦リピート・前面配置）
   ========================================================================== */

.mainInner {
    position: relative;
}

/* 左右の装飾共通設定 */
.mainInner::before,
.mainInner::after {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 0;
    width: 150px;
    z-index: 10;
    pointer-events: none;
    background-repeat: repeat-y;
    background-size: 100% auto;
}

/* 左側のパターン（bg-hidari.svg） */
.mainInner::before {
    left: 10px;
    background-image: url("/img/kosodate/bg-hidari.svg");
    background-position: left top;
}

/* 右側のパターン（bg-migi.svg） */
.mainInner::after {
    right: 10px;
    background-image: url("/img/kosodate/bg-migi.svg");
    background-position: right top;
}



/* ==========================================================================
   ナビゲーション：図形描画によるハイライト設定
   ========================================================================== */

/* 1. リンクの共通設定（図形を表示するための余白を確保） */
.globalNav li a {
    text-decoration: none;
    display: block;
    padding: 10px 0 10px 20px;
    /* 左側に図形用の余白20px */
    color: #333;
    position: relative;
    transition: all 0.3s ease;
}

/* 2. 疑似要素の基本スタイル（共通） */
.globalNav li a::before {
    content: "";
    /* テキストは空にする */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* 3. 【現在地】正円の描画（is-active） */
.globalNav li a.is-active::before {
    width: 8px;
    height: 8px;
    background-color: #e6555c;
    /* 猪苗代らしい赤 */
    border-radius: 50%;
    /* 正円にする */
    opacity: 1;
    /* 三角形の設定をリセット */
    border: none;
}

/* 4. 【ホバー時】三角形の描画 */
.globalNav li a:hover::before {
    width: 0;
    height: 0;
    /* borderで右向き三角形を作成 */
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #333;
    background-color: transparent;
    border-radius: 0;
    opacity: 1;
}

/* 5. 現在地かつホバーした時は、操作感を優先して三角形に切り替える */
.globalNav li a.is-active:hover::before {
    background-color: transparent;
    border-radius: 0;
}

/* 現在地項目のテキスト強調 */
.globalNav li a.is-active {
    color: #e6555c;
}



/* ==========================================================================
   ページトップに戻るボタン
   ========================================================================== */
#pageTopBtn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    opacity: 0;
    /* 初期状態は透明 */
    visibility: hidden;
    /* クリックできないように隠す */
    transition: all 0.3s ease;
}

#pageTopBtn.is-show {
    opacity: 1;
    visibility: visible;
}

#pageTopBtn a {
    display: block;
    width: 150px;
    /* ご指定の横幅 */
    transition: transform 0.3s ease;
}

#pageTopBtn img {
    width: 100%;
    height: auto;
}

/* ホバー時に少し浮く演出（サイト全体のトーンに合わせる） */
#pageTopBtn a:hover {
    transform: translateY(-5px);
}


/* ==========================================================================
   下層ページ
   ========================================================================== */

.sotoWaku {
    width: 100%;
    position: absolute;
    top: 0;
}

.pankuzu:first-child .icon_current,
#footstep_ttl {
    background: #f1d3ce;
    color: #333;
}

#clear_footstep {
    border: 2px solid #333;
    background: url("/img/common/icon_clear.png") no-repeat center center #333;
}

.mainBg {
    background-color: #f6f5f2;
    background-image: url("/img/kosodate/bg-lower.svg");
    overflow: hidden;
}

.pageTitleWrap {
    margin-top: 70px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F1D3CE;
}

.lowerHeading h1 {
    display: flex;
    text-align: left;
    max-width: 1080px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    justify-content: center;
}

.tpl_site_list_2 #pankuzu_wrap,
.tpl_site_list1 #pankuzu_wrap,
.tpl_site_detail #pankuzu_wrap {
    padding: 15px 0;
    background-color: transparent;
}

.tpl_site_list_2 #mymainback,
.tpl_site_list1 #mymainback,
.tpl_site_detail #mymainback {
    width: 1080px;
    margin: 0 auto 100px;
    grid-template-columns: none;
    background-color: #FFF;
    padding: 40px;
    border-radius: 15px;
    box-sizing: border-box;
}

/* サイドバー用の280pxマージンを解除 */
.tpl_site_detail #contentMain {
    margin-left: 0;
}


#main_body h2 {
    background-color: #D1E9F6;
    border-radius: 6px;
    box-shadow: none;
    background-image: url("/img/kosodate/h2-bg.svg");
    background-repeat: no-repeat;
    background-position: right -5px bottom -11px;
    background-size: 100px;
}

#main_body h3 {
    border-radius: 10px;
    border-left-width: 2px;
    background-color: #FFFBF0;
    background-image: url("/img/kosodate/h3-bg.svg"), url("/img/kosodate/h3-bg.svg");
    background-position: left -32px top -32px, right -32px bottom -32px;
    background-repeat: no-repeat;
    background-size: 90px auto;
    border-color: #EFC96A;
}

#main_body h4 {
    background-color: #F1D3CE;
    border-radius: 10px;
    background-image: url(/img/kosodate/h4-bg.svg);
    background-position: left 10px center;
    background-size: 20px;
}

#main_body h5 {
    background-size: 5px 20px, 70px;
    background-image: url(/img/kosodate/h5-bg1.svg), url(/img/kosodate/h5-bg2.svg);
    background-size: 20px 20px, 70px;
    background-position: left 10px center, left bottom;
}

#main_body h6 {
    padding: 7px 18px 6px 38px;
    font-size: 1.8rem;
    border-bottom: none;
    /* マーカー風のライン設定 */
    /* 下のpadding(6px)分を確保し、その上7pxにラインを表示してテキストと重ねる */
    background: linear-gradient(to bottom, transparent calc(100% - 13px), #D1E9F6 calc(100% - 13px), #D1E9F6 calc(100% - 6px), transparent calc(100% - 6px));
}

#main_body td,
#main_body table {
    border-color: #8F8F8F;
}

#main_body th {
    background: #F6EACB;
    border-color: #8F8F8F;
}

caption {
    caption-side: top;
    text-align: left;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 1rem 0;
}


/* ==========================================================================
   モバイル向け調整 (1080px以下)
   ========================================================================== */

@media screen and (max-width: 1080px) {

    /* --- アンカーリンクの到達位置をヘッダー分ずらす --- */
    section[id] {
        scroll-margin-top: 70px;
        /* 固定ヘッダーの高さ分 */
    }

    /* --- 全体レイアウトの解除 --- */
    /* --- ヘッダーレイアウトの調整 --- */
    .header {
        position: fixed;
        /* 上部に固定 */
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        /* ロゴエリアの高さ */
        background-color: #f6f5f2;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid #ccc;
        overflow: visible;
    }

    /* iOS Safari対策: メニュー開閉時に親要素の高さ制限を解除 */
    .header.is-menu-open {
        height: 100vh;
    }

    .headerLogoWrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        width: 100%;
        height: 70px;
        box-sizing: border-box;
        background: #f6f5f2;
        z-index: 1001;
    }

    .headerLogoWrap img {
        width: 65px;
        margin-top: 10px;
    }

    /* src属性が特定の値の場合に適用 */
    .headerLogoWrap h1 img[src="/img/kosodate/logo.png"] {
        content: url("/img/kosodate/logo2.png");
        width: 220px;
        height: auto;
    }

    /* --- ハンバーガーボタンのスタイル --- */
    .navToggle {
        display: block;
        width: 44px;
        height: 44px;
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
    }

    .navToggle span {
        display: block;
        position: absolute;
        width: 30px;
        height: 3px;
        left: 7px;
        background-color: #333;
        transition: all 0.3s ease;
    }

    .navToggle span:nth-child(1) {
        top: 13px;
    }

    .navToggle span:nth-child(2) {
        top: 22px;
    }

    .navToggle span:nth-child(3) {
        top: 31px;
    }

    /* ボタンがアクティブ（開いている）時の形状 */
    .is-menu-open .navToggle span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .is-menu-open .navToggle span:nth-child(2) {
        opacity: 0;
    }

    .is-menu-open .navToggle span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* --- 開閉するメニューの中身 --- */
    .navWrapper {
        position: fixed;
        top: 70px;
        /* ロゴの高さ分下から表示 */
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
        background-color: #f6f5f2;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        /* 初期状態は右に隠す */
        transition: transform 0.4s ease;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        visibility: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        padding-bottom: 120px;
    }

    /* メニューが開いた状態 */
    .is-menu-open .navWrapper {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        visibility: visible;
    }

    /* 内部の余白調整 */
    .globalNav {
        margin: 20px 0 0 !important;
    }

    .globalNav li a {
        padding: 20px 30px !important;
        font-size: 1.8rem;
    }

    .globalNav li a::before {
        left: 12px;
    }

    .emergencyLink {
        margin-top: auto;
        /* 緊急連絡先を下部に配置 */
        padding-bottom: 40px;
    }

    /* スライドとメインコンテンツがヘッダーに隠れないように調整 */
    #contentMain {
        margin-top: 70px;
        margin-left: 0;
    }

    #contentMain {
        margin-left: 0;
        /* 左余白を削除 */
    }

    /* --- ナビゲーション：縦一列 --- */
    .globalNav {
        margin: 20px 0;
    }

    .globalNav li {
        border-bottom: 1px solid #ccc;
        /* 区切り線 */
    }

    .globalNav li a {
        padding: 15px 0 15px 30px !important;
        /* タップ領域を確保 */
    }

    .emergencyLink ul {
        display: flex;
        flex-direction: column;
        /* 縦一列 */
        gap: 5px;
    }

    /* --- コンテンツ幅の自動調整 --- */
    .midashiH2,
    .purposeSearch ul,
    .ageSearch ul,
    .newsInfo .newsFlexContainer,
    .linkBanners,
    .footerInner {
        width: 90% !important;
        /* 780px固定を解除 */
        margin-left: auto;
        margin-right: auto;
    }

    .midashiH2 h2 {
        font-size: 2.2rem;
        /* 見出しサイズ調整 */
    }

    /* --- 2列レイアウトを適用するセクション --- */
    .purposeSearch ul,
    .ageSearch ul,
    .linkBanners {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        /* 指定通り2列 */
        gap: 12px;
        margin: 30px auto 10px;
    }

    .newsInfo .newsFlexContainer {
        margin: 30px auto 0px;
    }

    /* アイコンのサイズ調整 */
    .purposeSearch ul li a::before,
    .ageSearch ul li a::before {
        width: 60px;
        height: 60px;
    }

    /* --- お知らせ：縦一列 --- */
    .newsInfo .newsFlexContainer {
        flex-direction: column;
        align-items: center;
    }

    .newsInfo .newsContent {
        margin-right: 0;
        width: 100%;
    }

    .newsContent ul li {
        flex-direction: column;
        /* 日付とタイトルを縦に */
        margin-bottom: 15px;
    }

    .newsContent .article_date {
        flex: 0 0 auto;
        margin-bottom: 4px;
        font-size: 1.4rem;
    }

    /* --- フッター：縦一列 --- */
    .footerInner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footerInner>img {
        width: 200px;
        margin-bottom: 20px;
    }

    .footerInfo {
        padding-left: 0;
    }

    .footerContact {
        flex-direction: column;
        /* 電話番号を縦並びに */
        gap: 10px;
        margin: 20px 0;
    }

    .footerLink {
        flex-direction: column;
        /* お問い合わせ・町HPを縦並びに */
        gap: 10px;
    }

    /* --- モバイル向け：イラストの再表示と調整 --- */
    .illustWrap {
        display: block;
        /* 非表示を解除 */
        position: absolute;
        z-index: 11;
    }

    /* 目的からさがす（赤ちゃん） */
    .illust01 {
        top: -15px;
        right: 8%;
        /* 右端からの位置を％で指定 */
    }

    .illust01 img {
        width: 90px;
    }

    /* 年齢からさがす（子供・動物） */
    .illust02 {
        top: -40px;
        right: 5%;
    }

    .illust02 img {
        width: 80px;
    }

    /* お知らせ（鳥・手紙）*/
    .newsInfo .illustWrap.illust03 {
        position: relative;
        /* 絶対配置を解除して、リストの下に並べる */
        top: 0;
        right: 0;
        margin: 20px auto 0;
        /* 中央寄せ */
        text-align: center;
    }

    .newsInfo .illustWrap.illust03 img {
        width: 70px;
    }

    /* 関連リンク（家族） */
    .illust04 {
        top: -15px;
        right: 5%;
    }

    .illust04 img {
        width: 140px;
    }

    /* --- 装飾の制限 --- */
    .mainInner::before,
    .mainInner::after {
        width: 30px;
        /* 左右の飾り帯を細くして本文領域を確保 */
    }

    .midashiH2 h2 span {
        font-size: 3rem;
    }

    .midashiH2 h2::before {
        width: 22px;
        height: 18px;
        top: -14px;
        left: -11px;
    }

    .relatedLinks,
    .newsInfo,
    .ageSearch,
    .purposeSearch {
        padding: 55px 0px;
    }

    #pageTopBtn a {
        width: 60px;
    }

    .tpl_site_list_2 #mymainback,
    .tpl_site_list1 #mymainback,
    .tpl_site_detail #mymainback {
        width: calc(100% - 24px);
        padding: 20px;
        margin-bottom: 60px;
    }

    .lowerHeader .headerLogoWrap img {
        width: 230px;
        margin-top: 0;
    }

    .pageTitleWrap {
        height: auto;
    }

    .pageTitleWrap h1 {
        padding: 0 20px;
    }

    #main_body h5 {
        padding: 10px 20px 12px 38px;
    }

    #main_body h6 {
        font-size: 1.4rem;
        padding: 7px 18px 6px;
    }
}


/* デスクトップではボタンを隠す */
@media screen and (min-width: 1081px) {
    .navToggle {
        display: none;
    }
}


/* ==========================================================================
   下層ページ専用：横型ヘッダー (.lowerHeader) の調整
   ========================================================================== */

@media screen and (min-width: 1081px) {

    /* 1. ヘッダー全体を横帯に変更 */
    .header.lowerHeader {
        width: 100%;
        height: 70px;
        flex-direction: row;
        justify-content: space-around;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid #ccc;
        overflow: visible;
        background-color: #f6f5f2;
        z-index: 12;
    }

    /* 内部のレイアウトコンテナ（ロゴとナビを包む） */
    .header.lowerHeader .headerLogoWrap,
    .header.lowerHeader .navWrapper {
        flex: none;
    }

    /* 2. ロゴエリアの調整 */
    .header.lowerHeader .headerLogoWrap {
        display: flex;
        align-items: center;
        height: 70px;
    }

    /* 下層ページではデスクトップでハンバーガーボタンを隠す */
    .header.lowerHeader .navToggle {
        display: none;
    }

    /* 3. ナビゲーションを横並びにする */
    .header.lowerHeader .navWrapper {
        display: flex;
        flex-direction: row;
        /* 横並び */
        align-items: center;
        width: auto;
        height: 70px;
        position: static;
        transform: none;
    }

    .header.lowerHeader .globalNav {
        display: flex;
        font-size: 1.6rem;
        padding: 0;
    }

    .header.lowerHeader .globalNav li {
        border-bottom: none;
        margin: 0 10px;
    }

    .header.lowerHeader .globalNav li a {
        padding: 0;
        line-height: 70px;
    }

    /* 現在地マーカー（三角形など）の微調整 */
    .header.lowerHeader .globalNav li a::before {
        left: -12px;
    }

    /* 4. 緊急連絡先リンクの調整 */
    .header.lowerHeader .emergencyLink {
        width: auto;
    }

    .header.lowerHeader .emergencyLink ul {
        display: flex;
        flex-direction: row;
        /* 横に並べる */
        gap: 5px;
    }

    .header.lowerHeader .emergencyLink ul li a {
        padding: 4px 35px 4px 10px;
        font-size: 1.4rem;
        line-height: 1.2;
        border-radius: 5px;
        background-position: right 5px center;
    }

    .header.lowerHeader .emergencyLink ul li a span {
        display: block;
    }
}


/* 追記2026年1月22日　お問い合わせ枠スタイル */
#section_footer h2,
#main_body #section_footer h2 {
    background-color: #F1D3CE;
    color: #333;
}

#section_footer {
    border: solid 3px #F1D3CE;
}

.sf_email a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background-color: #F1D3CE;
    color: #333;
    padding: 11px 20px 11px 50px;
    border-radius: 3px;
    text-decoration: none;
    text-align: left;
    line-height: 1.3;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    border-radius: 150px;
    font-weight: bold;
}

.sf_email a::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 15px;
    background-image: url('/img/common/icon-mail.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.sf_email a:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

/* 追記2026年2月25日 */
.date {
    text-align: right;
}