@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url('https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url('slide.css');
@import url('inview.css');

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
    --primary-color: #b9cd34; /*テンプレートのメインまたはアクセントとなる色*/
    --primary-inverse-color: #fff; /*primary-colorの対として使う色*/

    --secondary-color: #f1782f; /*テンプレートのサブまたはアクセントとなる色*/
    --secondary-inverse-color: #fff; /*secondary-colorの対として使う色*/

    --global-space: 5vw; /*サイト内の左右へとる余白を一括管理しています。画面幅100%＝100vwです。*/
}

/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
    0% {
        left: -200px;
    }
    100% {
        left: 0px;
    }
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*updownのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes updown {
    0%,
    100% {
        top: -5vw;
    }
    50% {
        top: -8vw;
    }
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'M PLUS Rounded 1c', 'ヒラギノ丸ゴ Pro',
        'Hiragino Maru Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック',
        'MS PGothic', sans-serif; /*フォント種類*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    -webkit-text-size-adjust: none;
    background: #fff; /*背景色*/
    color: #777; /*文字色*/
    line-height: 2; /*行間*/
}

/*リセット*/
figure {
    margin: 0;
}
dd {
    margin: 0;
}
nav,
ul,
li,
ol {
    margin: 0;
    padding: 0;
}
nav ul {
    list-style: none;
}
section li {
    margin-left: 1rem;
}
input {
    font-size: 1rem;
}

/*table全般の設定*/
table {
    border-collapse: collapse;
}

/*画像全般の設定*/
img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/*videoタグ
video {max-width: 100%;}*/

/*iframeタグ*/
iframe {
    width: 100%;
}

/*sectionが続く場合*/
section + section {
    margin-top: 5vw;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
    color: #777; /*リンクテキストの色*/
    transition: 0.3s; /*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
a:hover {
    filter: brightness(1.1); /*少し明るくする*/
}

/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*ブロック全体*/
.fade-in-text {
    visibility: hidden; /*初期状態で非表示*/
}

/*動画（_movie）タイプで使う場合（※変更不要）*/
.fade-in-text-box {
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/*１文字単位の設定。
以下のanimationの行の「0.05s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.fade-in-char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.05s forwards;
}

/*トップページのメイン画像上で使う場合*/
#mainimg .fade-in-char {
    background: var(
        --primary-color
    ); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(
        --primary-inverse-color
    ); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    text-align: center;
    font-size: 6vw; /*文字サイズ。100vw=画面幅100%の事です。*/
    width: 12vw; /*幅。下の高さに揃えておきます。*/
    line-height: 12vw; /*高さ。上の幅に揃えておきます。*/
    border-radius: 50%; /*丸くする指定。この行を削除すれば枠が正方形になります。*/
}
#mainimg .fade-in-char:nth-of-type(even) {
    background: var(
        --secondary-color
    ); /*背景色。css冒頭で指定しているsecondary-colorを読み込みます*/
    color: var(
        --secondary-inverse-color
    ); /*文字色。css冒頭で指定しているsecondary-inverse-colorを読み込みます*/
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width: 600px) {
    #mainimg .fade-in-char {
        font-size: 3vw;
        width: 6vw;
        line-height: 6vw;
    }
} /*追加指定ここまで*/

/*container（サイト全般を囲むブロック）
---------------------------------------------------------------------------*/
#container {
    position: relative;
    z-index: 1;
    overflow-x: hidden;
}

/*トップページのcontainer*/
.home #container {
    margin-top: 200vh; /*スライドショー分の余白プラスアルファ。大きくすればするほどスライドショーが見え続けます。*/
}

/*トップページ以外のcontainerに背景画像を配置*/
body:not(.home) #container {
    background: url('../images/bg3.png') no-repeat center top / 100%; /*背景画像。お好みで入れ替えて下さい。*/
}

/*header（ロゴが入ったサイト上部のブロック）
---------------------------------------------------------------------------*/
header {
    padding-left: var(
        --global-space
    ); /*header内の左側に空けるスペース。css冒頭で指定しているglobal-spaceを読み込みます*/
    padding-right: var(
        --global-space
    ); /*header内の右側に空けるスペース。css冒頭で指定しているglobal-spaceを読み込みます*/
    padding-top: 2rem; /*header内の上左側に空けるスペース*/
    padding-bottom: 2rem; /*header内の下左側に空けるスペース*/
}

/* ===== Hero common ===== */
:root {
    --header-h: 7rem;
} /* 固定ヘッダーの高さを使うなら調整 */

.feature-hero {
    position: relative;
    min-height: clamp(48vh, 60vh, 72vh); /* 画面高さに応じて可変 */
    color: #fff;
    overflow: hidden;
    /* もしサイト全体で fixed ヘッダーを使い、body に padding-top を入れていないなら:
     padding-top: var(--header-h); */
}

.feature-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1; /* 背景層に退避 */
    will-change: transform;
    border-radius: 15px;
}

.feature-hero__inner {
    min-height: inherit;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直中央 */
    align-items: flex-start; /* 左寄せ。中央にしたければ center に */
    gap: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.feature-hero__title {
    margin: 0;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.2;
}

.feature-hero__subtitle {
    margin: 0;
    max-width: 60ch;
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    line-height: 1.7;
    opacity: 0.95;
}

/* 軽いホバー演出（PCのみ・任意） */
@media (hover: hover) and (pointer: fine) {
    .feature-hero:hover .feature-hero__bg {
        transform: scale(1.04);
        transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
    }
}

/* 動きを抑えたいユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
    .feature-hero__bg {
        transition: none !important;
        transform: none !important;
    }
}

/*トップページのヘッダー*/
.home header {
    height: 21vw; /*高さ。下の行の飾り分の高さを適当にとって下さい。*/
    background: url('../images/header_kazari.png') no-repeat center bottom /
        100%; /*背景画像*/
}

/*ロゴ画像*/
#logo img {
    display: block;
}
#logo {
    margin: 0;
    padding: 0;
    width: 200px; /*幅*/
}

/*トップページのロゴ画像は非表示に*/
.home #logo {
    display: none;
}

/*contents（header以下をまとめたブロック）
---------------------------------------------------------------------------*/
#contents {
    padding-left: var(
        --global-space
    ); /*contents内の左側に空けるスペース。css冒頭で指定しているglobal-spaceを読み込みます*/
    padding-right: var(
        --global-space
    ); /*contents内の右側に空けるスペース。css冒頭で指定しているglobal-spaceを読み込みます*/
}

/*トップページのcontents*/
.home #contents {
    background: #fff; /*背景色*/
}

/*ポイントお知らせ（トップページのコンテンツ最上部にある目立つお知らせコーナー）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.oshirase {
    position: relative;
    margin-right: calc(
        -1 * var(--global-space)
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。マイナスをつけてネガティブマージンに。*/
    margin-left: calc(
        -1 * var(--global-space)
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。マイナスをつけてネガティブマージンに。*/
}

.oshirase a {
    color: inherit;
}

/*文字をのせるバーの部分*/
.oshirase div {
    background: #f1462f; /*背景色*/
    color: #fff; /*文字色*/
    padding: 1rem 70px 1rem 2rem; /*バー内の余白。上、右、下、左へ。ここの70pxの数値は下の装飾用のアイコン(.img1)のサイズに合わせて調整して下さい。*/
}

/*飾り用の画像設定*/
.oshirase .img1 {
    display: block;
    position: absolute;
    right: 0px; /*右からの配置場所指定。上からの配置設定はcss冒頭の「@keyframes updown」のキーフレーム設定で行います。*/
    width: 100px; /*幅*/
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width: 700px) {
    /*文字をのせるバーの部分*/
    .oshirase div {
        margin-left: auto; /*右によせる*/
        width: 50vw; /*幅。100vw=画面幅100%の事*/
        border-radius: 100px 0 0 100px; /*角を丸くする指定。左上、右上、右下、左下への順番*/
    }
} /*追加指定ここまで*/

/*updownアニメーションを5s(秒)実行する事を繰り返す*/
.updown {
    animation: updown 5s linear infinite;
}

/*pop1
---------------------------------------------------------------------------*/
.pop1 {
    position: absolute;
    top: -2.5em;
    width: 120px;
    right: -5vw;
}
.pop1.left {
    right: auto;
    left: -5vw;
}

/*list-half（左右にわかれたボックス）
---------------------------------------------------------------------------*/
/*画像ブロック*/
.list-half .image {
    width: 60vw; /*幅。60%。*/
    margin: 0 auto; /*画像を中央に配置*/
    padding: 5vw 0; /*上下、左右への余白。画像の上下に隙間をあけます。*/
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width: 600px) {
    /*ボックス全体*/
    .list-half {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6vw; /*左右の間に空けるマージン的な要素*/
        position: relative;
    }

    /*テキストブロック*/
    .list-half .text {
        flex: 1;
    }

    /*画像ブロック*/
    .list-half .image {
        padding: 0; /*余白をリセット*/
        width: 40vw; /*幅。40%。*/
    }

    /*左右を入れ替える場合用*/
    .list-half.reverse {
        flex-direction: row-reverse;
    }
} /*追加指定ここまで*/

/*画像の影のスタイル*/
.shadow1 {
    box-shadow: -5vw -5vw 0 rgba(0, 0, 0, 0.1);
}

/*mask（ラフな円形のマスク＆アニメーション）
---------------------------------------------------------------------------*/
@keyframes mask {
    0%,
    100% {
        border-radius: 64% 36% 54% 46% / 49% 41% 59% 51%;
        transform: scale(1);
    }
    50% {
        border-radius: 39% 61% 48% 52% / 43% 55% 45% 57%;
        transform: scale(1.02);
    }
}

/*mask1の設定*/
.mask1 {
    animation: mask 10s linear infinite; /*10s(秒)がアニメーションにかける秒数です*/
    box-shadow: 2vw 2vw 0px 1vw #e2ddc0; /*ボックスの影。右へ、下へ、ぼかし幅、距離、色。*/
}

/*btn1（ボタン１）
---------------------------------------------------------------------------*/
.btn1 {
    text-align: center;
    font-size: 1.2rem; /*文字サイズを120%に*/
    margin-top: 1rem; /*上に１文字分のスペースを空ける*/
}
.btn1 a {
    display: inline-block;
    text-decoration: none;
    background: var(
        --primary-color
    ); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(
        --primary-inverse-color
    ); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    border-radius: 100px; /*角を丸くする指定*/
    padding: 0.3em 3em; /*上下、左右へのボタン内の余白*/
}
.bg1 .btn1 a {
    background: var(
        --primary-inverse-color
    ); /*背景色。css冒頭で指定しているprimary_text-colorを読み込みます*/
    color: var(
        --primary-color
    ); /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*矢印アイコン*/
.arrow1::after {
    display: inline-block;
    font-family: 'Font Awesome 6 Free'; /*Font Awesomeを使う指定*/
    font-weight: bold;
    content: '\f061'; /*アイコンのコード*/
    padding-left: 0.5em; /*アイコンとテキストとの間のスペース*/
    transition: 0.3s;
}
.arrow1:hover::after {
    transform: translateX(0.2em); /*マウスオン時に少しだけ移動する*/
}

/*main
---------------------------------------------------------------------------*/
/*mainブロック（横スライドslick対策）*/
main * {
    min-width: 0;
}

/*mainブロック*/
main {
    padding-bottom: var(
        --global-space
    ); /*main内の下側に空けるスペース。css冒頭で指定しているglobal-spaceを読み込みます*/
}

/*h2（見出し）*/
main h2 {
    text-align: center; /*テキストをセンタリング*/
    font-size: 2.4rem; /*文字サイズを240%に*/
    line-height: 1.5; /*行間を少しせまくする*/
    color: var(
        --primary-color
    ); /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
    position: relative;
}

/*h3（見出し）*/
main h3 {
    font-size: 1.6rem;
}

/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {
    display: none;
}
#menubar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*上で非表示にしたメニューを表示させる為の設定*/
.small-screen #menubar.display-block {
    display: block;
}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {
    display: none;
}

/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.small-screen #menubar.display-block {
    position: fixed;
    z-index: 100;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    background: url('../images/bg2.jpg') repeat center center / 500px; /*背景画像の読み込み。最後の数字は画像幅。このサイズでリピートします。*/
    animation: animation1 0.2s both; /*animation1を実行する。0.2sは0.2秒の事。*/
    display: flex;
    justify-content: center;
}

/*メニュー本体が記載されているボックス*/
.small-screen #menubar > div {
    position: relative;
    overflow: auto;
    background: #fff; /*背景色*/
    padding: 10vw; /*ボックス内の余白*/
    max-width: 70%; /*最大幅*/
}

/*nav要素*/
.small-screen #menubar nav {
    font-size: 1.3rem; /*文字サイズを130%に*/
    margin-bottom: 3vw; /*メニューブロックの下にとるスペース*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar a {
    display: block;
    text-decoration: none;
    padding: 0.5rem; /*上下、左右へのメニュー内の余白*/
}

/*メニュー横のアイコンの共通設定*/
.small-screen #menubar li a::before {
    font-family: 'Font Awesome 6 Free'; /*Font Awesomeを使う指定*/
    padding-right: 0.8em; /*アイコンとテキストの間の余白*/
    font-weight: bold; /*この設定がないとアイコンが出ない場合があります*/
    color: var(
        --primary-color
    ); /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
.small-screen #menubar li:nth-of-type(1) a::before {
    content: '\f015';
}
.small-screen #menubar li:nth-of-type(2) a::before {
    content: '\f521';
}
.small-screen #menubar li:nth-of-type(3) a::before {
    content: '\f05a';
}
.small-screen #menubar li:nth-of-type(4) a::before {
    content: '\f073';
}
.small-screen #menubar li:nth-of-type(5) a::before {
    content: '\f086';
}

.small-screen #menubar li:nth-of-type(6) a::before {
    content: '\f304';
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
    animation: opa1 0s 0.2s both;
    position: fixed;
    z-index: 101;
    cursor: pointer;
    top: -15px; /*上からの配置場所*/
    right: -15px; /*右からの配置場所*/
    width: 110px; /*幅*/
    height: 100px; /*高さ*/
    padding: 40px 40px 35px 35px; /*ブロック内の余白。上、右、下、左への順番*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s;
    background: var(
        --secondary-color
    ); /*背景色。css冒頭のsecondary-colorを読み込みます。*/
    border-radius: 58% 42% 61% 39% / 44% 55% 45% 56%; /*角丸の指定*/
    box-shadow: -2px 4px 0px 6px rgba(0, 0, 0, 0.1); /*ボックスの影。右へ、したへ、ぼかし幅、広げる距離。0,0,0は黒の事で0.1は色が10%でた状態の事。*/
}

/*以下は変更不要*/
#menubar_hdr div {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*バーの設定*/
#menubar_hdr div span {
    display: block;
    width: 100%;
    height: 3px; /*線の太さ*/
    background-color: #fff; /*線の色*/
    border-radius: 2px; /*コーナーを少しだけ丸く*/
    transition: all 0.5s ease-in-out;
    position: absolute;
}

/*以下変更不要*/
#menubar_hdr div span:nth-child(1) {
    top: 0;
}
#menubar_hdr div span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}
#menubar_hdr div span:nth-child(3) {
    bottom: 0;
}
#menubar_hdr.ham div span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
#menubar_hdr.ham div span:nth-child(2) {
    opacity: 0;
}
#menubar_hdr.ham div span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/*2カラム
---------------------------------------------------------------------------*/
.main-contents {
    margin-bottom: 5rem; /*ボックスの下に空けるスペース。subとの間の余白です。5文字分。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
    /*カラムで使う為の指定*/
    main.column {
        display: flex; /*横並びにする*/
        justify-content: space-between; /*並びかたの種類の指定*/
        gap: 2rem; /*main-contentsとsub-contentsの間のマージン的な隙間*/
    }

    /*main-contentsブロック*/
    .main-contents {
        margin-bottom: 0;
        order: 2; /*並び順。数字の小さい順番に表示されます。*/
        flex: 1;
    }

    /*sub-contentsブロック共通*/
    .sub-contents {
        width: 230px; /*幅*/
    }

    /*1つ目のsub-contents*/
    .sub-contents:nth-child(2) {
        order: 1; /*並び順。数字の小さい順番に表示されます。*/
    }

    /*2つ目のsub-contents（※３カラムで使う場合用）*/
    .sub-contents:nth-child(3) {
        order: 3; /*並び順。数字の小さい順番に表示されます。３番目という意味なので一番右側に表示されます。*/
    }
} /*追加指定ここまで*/

/*サブコンテンツ設定
---------------------------------------------------------------------------*/
/*サブコンテンツ内のh3要素(見出し)*/
.sub-contents h3 {
    display: block;
    margin: 0;
    text-align: center; /*テキストをセンタリング*/
    padding: 0.5rem 0; /*上下、左右への見出し内の余白*/
    border-radius: 5px 5px 0px 0px; /*角を丸くする指定。左上、右上、右下、左下の順番。*/
    border: 1px solid #ccc; /*下線の幅、線種、色*/
    background: linear-gradient(#fff, #eee); /*背景グラデーション*/
    color: #555; /*文字色*/
}

/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
    padding: 0;
    margin: 0 0 1rem; /*上、左右、下へのマージン*/
}

/*メニュー１個あたり*/
.submenu a {
    display: block;
    text-decoration: none;
    padding: 0.2rem 1rem; /*上下、左右へのメニュー内の余白*/
    background: #fff; /*背景色*/
}

/*メニュー１個あたり（子メニュー以外）*/
.submenu > li {
    border: 1px solid #ccc; /*枠線の幅、線種、色*/
    border-top: none; /*上の線だけなくす*/
}

/*子メニュー*/
.submenu li li a {
    padding-left: 2rem; /*左に余白を空ける*/
}

/*h3見出しの下にサブメニューが続く場合にメニューの上の線をなくす*/
.sub-contents h3 + nav .submenu {
    border-top: none;
}

/*フッターのコンテンツ（住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
#footer-contents {
    background: url(../images/bg1_top.png) repeat-x center top / 1000px; /*ブロック上部の背景画像の指定。1000pxは画像幅。*/
    padding-top: 321px; /*上部の背景画像の本体の「幅」を1000pxにした際の画像の「高さ-1」をここで設定します*/
    margin-left: calc(
        -1 * var(--global-space)
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。マイナスをつけてネガティブマージンに。*/
    margin-right: calc(
        -1 * var(--global-space)
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。マイナスをつけてネガティブマージンに。*/
}
#footer-contents > div {
    padding: 1px;
    background: var(
        --primary-color
    ); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(
        --primary-inverse-color
    ); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    padding-left: var(
        --global-space
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。*/
    padding-right: var(
        --global-space
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。*/
}
#footer-contents a,
footer a {
    color: inherit;
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width: 700px) {
    #footer-contents > div {
        display: flex;
    }

    #footer-contents .left,
    #footer-contents .right {
        flex: 1;
    }
} /*追加指定ここまで*/

/*footer-contents内のマップ。レスポンシブにする為のものなので、基本は編集不要です。
---------------------------------------------------------------------------*/
.iframe-box {
    width: 100%;
    height: 0;
    padding-top: 56.25%; /*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
    position: relative;
    overflow: hidden;
}
.iframe-box iframe,
.iframe-box img {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

/*フッター設定
---------------------------------------------------------------------------*/
small {
    font-size: 100%;
}
footer {
    font-size: 0.7rem; /*文字サイズ*/
    text-align: center; /*内容をセンタリング*/
    padding: 1rem; /*ボックス内の余白*/
    background: var(
        --primary-color
    ); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(
        --primary-inverse-color
    ); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    margin-left: calc(
        -1 * var(--global-space)
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。マイナスをつけてネガティブマージンに。*/
    margin-right: calc(
        -1 * var(--global-space)
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。マイナスをつけてネガティブマージンに。*/
}

/*リンクテキスト*/
footer a {
    color: inherit;
    text-decoration: none;
}

/*著作部分*/
footer .pr {
    display: block;
}

/*フッター内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-self: center;
    gap: 1rem; /*アイコン同士に空けるのスペース*/
}

/*Font Awesomeのアイコンサイズ*/
.icons i {
    font-size: 40px;
}

/*お知らせブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
    background: rgba(
        0,
        0,
        0,
        0.02
    ); /*背景色。0,0,0は黒のことで0.02は色が2%出た状態。*/
    border-radius: 30px; /*角を丸くする指定*/
    overflow: hidden;
    margin-bottom: 4rem; /*ブロックの下に空けるスペース。4文字分。*/
}

/*奇数行目を背景色を少し濃くする。全体同じ色がよければここの数行は削除。*/
.new dt:nth-of-type(odd),
.new dd:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.04);
}

/*日付(dt)設定*/
.new dt {
    padding: 1rem 1rem 0; /*dt内の余白。上、左右、下への順番。*/
}

/*記事(dd)設定*/
.new dd {
    padding: 1rem; /*dd内の余白*/
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
    display: inline-block;
    text-align: center;
    line-height: 1.8; /*行間（アイコンの高さ）*/
    border-radius: 3px; /*角を丸くする指定*/
    padding: 0 0.5rem; /*上下、左右へのブロック内の余白*/
    width: 8rem; /*幅。8文字分。*/
    transform: scale(0.8); /*80%のサイズに縮小*/
    background: #fff; /*背景色*/
    color: #777; /*文字色*/
    border: 1px solid #999; /*枠線の幅、線種、色*/
}

/*icon-bg1*/
.new .icon-bg1 {
    background: var(
        --primary-color
    ); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(
        --primary-inverse-color
    ); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    border-color: transparent; /*枠線を出したくないので透明にする*/
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width: 700px) {
    /*ブロック全体*/
    .new {
        display: grid; /*gridを使う指定*/
        grid-template-columns: auto 1fr; /*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
    }

    /*日付(dt)設定*/
    .new dt {
        padding: 1rem 0 1rem 2rem; /*dt内の余白。上、右、下、左への順番。*/
    }

    /*記事(dd)設定*/
    .new dd {
        padding: 1rem 2rem 1rem 0; /*dd内の余白。上、右、下、左への順番。*/
    }
} /*追加指定ここまで*/

/*list-grid1
---------------------------------------------------------------------------*/
/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1 .list * {
    margin: 0;
    padding: 0;
}

/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
    margin-bottom: 5vw;
    padding: 1.5vw; /*ボックス内の余白*/
    background: #fff; /*背景色*/
    color: #333; /*文字色*/
    grid-template-rows: auto 1fr; /*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure img {
    margin-bottom: 2vw; /*画像の下に空けるスペース*/
}
.list-grid1 .list figure {
    margin: -1.5vw;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
    font-size: 0.85rem; /*文字サイズを85%に*/
    line-height: 1.5; /*行間を少し狭く*/
}

/*画面幅500px以上の追加指定*/
@media screen and (min-width: 500px) {
    /*listブロック全体を囲むブロック*/
    .list-grid1 {
        display: grid;
        grid-template-columns: repeat(
            2,
            1fr
        ); /*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
        gap: 2vw; /*ブロックの間に空けるマージン的な指定*/
    }

    /*ボックス１個あたり*/
    .list-grid1 .list {
        margin-bottom: 0;
    }
} /*追加指定ここまで*/

/*画面幅800px以上の追加指定*/
@media screen and (min-width: 800px) {
    /*listブロック全体を囲むブロック*/
    .list-grid1 {
        grid-template-columns: repeat(
            3,
            1fr
        ); /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
        gap: 2vw; /*ブロックの間に空けるマージン的な指定*/
    }
} /*追加指定ここまで*/

/*list-grid1で使うボタン
---------------------------------------------------------------------------*/
.list-grid1 .btn a {
    display: block;
    text-decoration: none;
    font-size: 1rem;
    text-align: center; /*テキストをセンタリング*/
    background: var(
        --primary-color
    ); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(
        --primary-inverse-color
    ); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    border: 1px solid var(--primary-color); /*枠線の幅、線種、varは色の事でcss冒頭で指定しているprimary-colorを読み込みます*/
    padding: 5px 10px; /*ボタン内の余白*/
    margin-top: 1rem; /*ボタンの上に空けるスペース*/
}

/*bg1ブロック（色がついた装飾タイプのブロック）
---------------------------------------------------------------------------*/
/*bg1ブロックの設定*/
.bg1 {
    background: url(../images/bg1_top.png) repeat-x center top / 1000px,
        /*ブロック上部の背景画像の指定。1000pxは画像幅。*/
            url(../images/bg1_bottom.png) repeat-x center bottom / 1000px; /*ブロック下部の背景画像の指定。1000pxは画像幅。*/
    padding-top: 321px; /*上部の背景画像の本体の「幅」を1000pxにした際の画像の「高さ-1」をここで設定します*/
    padding-bottom: 54px; /*下部の背景画像の本体の「幅」を1000pxにした際の画像の「高さ-1」をここで設定します*/
    margin-left: calc(
        -1 * var(--global-space)
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。マイナスをつけてネガティブマージンに。*/
    margin-right: calc(
        -1 * var(--global-space)
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。マイナスをつけてネガティブマージンに。*/
}

/*backgroundには、上で読み込む背景画像のカラーを抜き出して指定して下さい。*/
.bg1 > div {
    padding: 1px;
    background: var(
        --primary-color
    ); /*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
    color: var(
        --primary-inverse-color
    ); /*文字色。css冒頭で指定しているprimary-inverse-colorを読み込みます*/
    padding-left: var(
        --global-space
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。*/
    padding-right: var(
        --global-space
    ); /*変更不要。css冒頭で指定しているglobal-spaceを読み込みます。*/
}

/*bg1ブロックのh2見出し*/
.bg1 h2 {
    color: #f5f3e5; /*文字色*/
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); /*テキストの影。右へ、下へ、距離、0,0,0は黒の事で0.3は30%色が出た状態。*/
}

/*詳細ページのサムネイル切り替えブロック
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view {
    max-width: 1000px; /*最大幅*/
    margin: 0 auto 1rem; /*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
    text-align: center; /*画像が小さい場合でもセンタリングされるように*/
}

/*サムネイル全体を囲むブロック*/
.thumbnail {
    display: flex; /*flexを使う指定*/
    justify-content: center; /*並びかたの種類の指定。これはセンタリングする指定。*/
    margin-bottom: 2rem; /*下に空けるスペース。２文字分。*/
}

/*サムネイル画像*/
.thumbnail img {
    width: 100px; /*サムネイルの幅*/
    margin: 2px; /*サムネイル間のスペース*/
    cursor: pointer; /*リンクタグではないが、クリックできる事をわかりやすくする為にリンクと同じポインターにしておきます。*/
    transition: 0.3s; /*マウスオンまでにかける時間。3秒。*/
}
.thumbnail img:hover {
    opacity: 0.8; /*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

/*詳細ページ（info_item.html）で使っている「前のページに戻る」ボタン
---------------------------------------------------------------------------*/
.btn-back {
    text-align: center;
}
.btn-back a {
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 2rem; /*ボタン内の余白。上下、左右。*/
    border-radius: 30px; /*角を丸くする指定。ある程度大きければ適当でいいです。*/
    background: #eee; /*背景色*/
}
.btn-back a::before {
    font-family: 'Font Awesome 6 Free'; /*Font Awesomeを使う指定*/
    content: '\f0d9'; /*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
    padding-right: 0.8em; /*アイコンとテキストの間の余白*/
    font-weight: bold; /*この設定がないとアイコンが出ない場合があります*/
    opacity: 0.5; /*色を50%だけ出す*/
}

/*FAQ
---------------------------------------------------------------------------*/
/*質問*/
.faq dt {
    border-radius: 3px; /*枠を角丸にする指定*/
    margin-bottom: 1rem; /*下に空けるスペース*/
    background: #fff; /*背景色*/
    border: 1px solid #ccc; /*枠線の幅、線種、色*/
    text-indent: -2rem; /*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
    padding: 5px 1em 5px 3em; /*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq dt::before {
    font-family: 'Font Awesome 6 Free'; /*Font Awesomeを使う指定*/
    content: '\f059'; /*アイコンのコード*/
    padding-right: 1rem; /*アイコンとテキストとの間のスペース*/
    color: var(
        --primary-color
    ); /*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
}

/*回答*/
.faq dd {
    padding: 5px 1rem 30px 3rem; /*ボックス内の余白**/
}

/*opencloseを適用した要素のカーソル*/
.openclose {
    cursor: pointer; /*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
    font-weight: bold; /*太字に*/
    padding: 0.5rem 1rem; /*ボックス内の余白*/
    background: #999; /*背景色*/
    color: #fff; /*文字色*/
    margin-bottom: 1rem; /*下に空けるスペース*/
    border-radius: 5px; /*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
    table-layout: fixed;
    border-top: 1px solid #999; /*テーブルの一番上の線。幅、線種、色*/
    width: 100%; /*幅*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
    border-bottom: 1px solid #999; /*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th,
.ta1 td {
    padding: 1rem; /*ボックス内の余白*/
    word-break: break-all; /*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
    width: 30%; /*幅*/
    background: rgba(0, 0, 0, 0.05); /*背景色*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
    /*th（左側）のみの設定*/
    .ta1 th {
        width: 20%; /*幅*/
    }
} /*追加指定ここまで*/

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
    display: block;
}

/*ボタンの設定*/
.pagetop a {
    display: block;
    text-decoration: none;
    text-align: center;
    z-index: 99;
    position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
    right: 20px; /*右からの配置場所指定*/
    bottom: 20px; /*下からの配置場所指定*/
    color: #fff; /*文字色*/
    font-size: 1.5rem; /*文字サイズ*/
    background: rgba(
        0,
        0,
        0,
        0.2
    ); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
    width: 60px; /*幅*/
    line-height: 60px; /*高さ*/
    border-radius: 50%; /*円形にする*/
}

/* =========================
   レイアウト：3カードを横並び＋間隔
   ========================= */
.features {
    padding: 60px 20px;
}

.features .container.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* ← 3列 */
    gap: 24px; /* ← 各カードの間隔（マージン相当） */
    max-width: 1200px;
    margin: 0 auto;
}

/* カード本体（影や角丸はお好みで） */
.feature-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* =========================
	 画像サイズを統一する
	 ========================= */
.feature-image {
    position: relative; /* ← オーバーレイの基準 */
    aspect-ratio: 16 / 9; /* ← 画像の縦横比を統一（任意で 4/3 や 3/2 に変更可） */
    overflow: hidden;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ← トリミングして全体をフィット */
    display: block;
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* =========================
	 ホバーで薄暗く＋テキスト表示
	 ========================= */
/* 薄暗くするレイヤー */
.feature-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* ← 薄暗くする色 */
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

/* 表示するテキスト（初期は非表示） */
.feature-overlay {
    position: absolute;
    inset: 0; /* 画像全体をカバー */
    display: flex;
    align-items: center; /* 垂直中央 */
    justify-content: center; /* 水平中央 */
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.4rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 2; /* 暗幕より上 */
    pointer-events: none; /* クリックは画像/リンクに通す */
}

/* ホバー時の発火（フォーカスも対応） */
.feature-card:hover .feature-image::after,
.feature-card:focus-within .feature-image::after {
    opacity: 1; /* ← 薄暗く */
}

.feature-card:hover .feature-image img,
.feature-card:focus-within .feature-image img {
    transform: scale(1.05); /* ← ほんのりズーム */
}

.feature-card:hover .feature-overlay,
.feature-card:focus-within .feature-overlay {
    opacity: 1; /* ← テキスト出現 */
    transform: translateY(0);
}

/* =========================
	 画像の下：見出し/本文/ボタンを中央に
	 ========================= */
.feature-card h3,
.feature-card p,
.feature-card .about-btn {
    text-align: center; /* ← 中央揃え */
    margin: 0;
}

.feature-card h3 {
    font-size: 1.8rem;
    color: #222;
    padding: 16px 16px 8px;
}

.feature-card p {
    font-size: 1rem;
    color: #555;
    padding: 0 20px 16px;
    line-height: 1.7;
}

/* ボタン（#b9cd34） */
.about-btn {
    padding: 0 0 24px;
}

.about-green-btn {
    display: inline-block;
    background: #b9cd34; /* ← 指定色 */
    color: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 10px rgba(184, 204, 51, 0.45);
}

.about-green-btn:hover {
    filter: brightness(0.95);
    box-shadow: 0 6px 14px rgba(184, 204, 51, 0.45);
    transform: translateY(-2px);
}

.about-green-btn:active {
    transform: translateY(1px);
}

/* ===== 保育理念ブロック 全体の中央寄せ ===== */
/* 直近のセクションに .circle-philosophy が含まれていれば、そのセクション全体を中央寄せ */
section:has(.circle-philosophy) {
    text-align: center;
    padding: 60px 30px;
}

/* 見出しと説明文も中央 */
section:has(.circle-philosophy) > h2 {
    margin-top: 80px;
    margin-bottom: 20px;
    font-size: clamp(2rem, 3.2vw, 2.6rem);
}
section:has(.circle-philosophy) > p {
    margin: 0 auto 24px;
    max-width: 48ch; /* 行幅を整えて読みやすく */
    line-height: 1.8;
    font-size: 1.6rem;
}

/* ===== 丸い理念カード（横並び＆自動折り返し） ===== */
.circle-philosophy {
    display: inline-flex; /* 横並びにしつつ、テキストを中央揃え */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(140px, 24vw, 200px);
    aspect-ratio: 1 / 1; /* きれいな正円にする */
    border-radius: 50%;
    margin: 20px; /* “3カードそれぞれにマージン” */
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

/* タイトル＆本文の余白・サイズ */
.circle-philosophy h3 {
    margin: 0 0 6px;
    font-size: clamp(1.6rem, 2.6vw, 1.9rem);
}
.circle-philosophy p {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    line-height: 1.5;
}

/* ===== 色の割り当て（右から 赤 / 緑 / 黄） =====
	 横並び時、左→中央→右 の順で 1,2,3 番目が並ぶため、
	 1番目=黄、2番目=緑、3番目=赤 を指定します。 */
.circle-philosophy:nth-of-type(1) {
    background: #f5c84c;
} /* 左=黄 */
.circle-philosophy:nth-of-type(2) {
    background: #57b557;
} /* 中=緑 */
.circle-philosophy:nth-of-type(3) {
    background: #e74c3c;
} /* 右=赤 */

/* ダーク背景のサイトでも読みやすいよう、薄い縁取り（任意） */
.circle-philosophy {
    outline: 1px solid rgba(255, 255, 255, 0.12);
    outline-offset: -1px;
}

/* ===== レスポンシブ：小画面では自然に2列→1列へ折り返し ===== */
/* inline-flex と margin のままで、画面幅が狭くなると自動的に折り返します。
	 強制的に1列にしたい閾値があればメディアクエリで調整ください。 */
@media (max-width: 520px) {
    .circle-philosophy {
        width: 72vw; /* 1列で見やすいサイズに */
        max-width: 320px;
    }
}

/* =========================
	 アクセシビリティ（フォーカスリング）
	 ========================= */
.feature-card a:focus-visible,
.about-green-btn:focus-visible {
    outline: 3px solid rgba(185, 205, 52, 0.7);
    outline-offset: 3px;
    border-radius: 10px;
}

/* =========================
	 レスポンシブ（任意）
	 ========================= */
@media (max-width: 1024px) {
    .features .container.grid-3 {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .features .container.grid-3 {
        grid-template-columns: 1fr 1fr; /* ← タブレットは2列 */
    }
}

@media (max-width: 520px) {
    .features .container.grid-3 {
        grid-template-columns: 1fr; /* ← スマホは1列 */
    }
}

/* 動きを抑えたいユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce) {
    .feature-card,
    .feature-image img,
    .feature-image::after,
    .feature-overlay {
        transition: none !important;
    }
}

/* ===== 保育目標（/feature/） ===== */
:root {
    --header-h: 7rem;
    --accent: #b9cd34;
}

.goals {
    position: relative;
    /* アンカー遷移で固定ヘッダーに隠れないように */
    scroll-margin-top: var(--header-h);
    background: radial-gradient(
            80rem 40rem at 100% -10%,
            rgba(185, 205, 52, 0.12) 0%,
            transparent 60%
        ),
        #f7f9f0; /* アクセントに馴染む薄い黄緑系 */
    color: #222;
    margin-top: 80px;
}

.goals__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(48px, 6vw, 80px) 20px;
    text-align: center;
}

.goals__title {
    margin: 0 0 10px;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    letter-spacing: 0.02em;
}

.goals__lead {
    margin: 0 auto clamp(28px, 4vw, 40px);
    max-width: 60ch;
    font-size: clamp(1.5rem, 2.2vw, 1.7rem);
    line-height: 1.9;
    color: #444;
}

/* グリッド：3→2→1 列 */
.goals__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.5vw, 24px);
}

@media (max-width: 960px) {
    .goals__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .goals__grid {
        grid-template-columns: 1fr;
    }
}

/* カード */
.goal-card {
    background: #fff;
    border-radius: 16px;
    padding: clamp(18px, 3vw, 24px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    text-align: left; /* 中の文は読みやすく左寄せ */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.goal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

/* 番号バッジ（アクセント色） */
.goal-card__badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(185, 205, 52, 0.35);
    margin-bottom: 12px;
}

/* タイトル・本文 */
.goal-card__title {
    margin: 0 0 8px;
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    line-height: 1.3;
}
.goal-card__text {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.9;
    color: #555;
}

/* 文字中心寄せにしたい場合（サイト全体のトーンに合わせて切替OK） */
/* .goal-card { text-align: center; } */

/* ===== 入園案内セクション（information） ===== */

.information {
    color: #b9cd34; /* 読みやすい濃い文字色（浮かないトーン） */
    text-align: center; /* 条件：すべて中央配置 */
    padding: 64px 20px; /* 余白（上下左右） */
}

/* タイトル（中央・少しだけ余白とサイズ） */
.information .section-title {
    margin: 0 0 12px;
    font-size: 2rem;
    line-height: 1.2;
}

/* 説明文：中央寄せ＆横幅制限で読みやすく（中央配置のまま） */
.information p {
    margin: 0 auto 20px; /* 中央寄せ＋下余白 */
    max-width: 42ch; /* 1行の長さを整えて“浮かない”印象に */
    font-size: 1.6rem;
    line-height: 1.9;
}

/* ボタン行自体も中央に */
.information .about-btn {
    display: flex; /* 中央寄せのためにflexを使用 */
    justify-content: center; /* 中央配置 */
    gap: 0; /* 余白が不要なら0のまま */
}

/* 小さめ画面での余白微調整（任意） */
@media (max-width: 480px) {
    .information {
        padding: 52px 16px;
    }
    .information .section-title {
        font-size: 2.2rem;
    }
    .information p {
        font-size: 1.5rem;
    }
}

/* 共通変数 */
:root {
    --header-h: 7rem;
    --accent: #b9cd34;
}

/* ===== Intro ===== */
.daily-intro {
    background: #f7f9f0;
    color: #222;
}
.daily-intro__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(28px, 4.5vw, 44px) 20px;
    text-align: center;
}
.daily-intro__inner p {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.9;
    color: #444;
}

/* ===== Timeline ===== */
.daily-timeline {
    background: #fff;
    color: #222;
}
.timeline {
    list-style: none;
    margin: 0;
    padding: clamp(36px, 5vw, 60px) 20px;
    max-width: 1100px;
    margin-inline: auto;
    position: relative;
}

/* 中央の縦ライン（PC表示） */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: linear-gradient(var(--accent), rgba(185, 205, 52, 0.2));
    transform: translateX(-50%);
    border-radius: 3px;
    opacity: 0.35;
}

/* 各アイテムの行 */
.timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: center;
    margin-bottom: clamp(28px, 4vw, 44px);
}

/* 時刻バッジ（センターに吸着） */
.timeline__time {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0;
    background: #fff;
    border: 2px solid var(--accent);
    color: #333;
    width: 88px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.5rem;
}

/* カード（左右に配置） */
.timeline__card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    padding: 16px;
    align-items: center;
}
.timeline__media img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.timeline__title {
    margin: 0 0 6px;
    font-size: clamp(1.5rem, 2.4vw, 1.7rem);
}
.timeline__text {
    margin: 0;
    color: #555;
    line-height: 1.8;
    font-size: clamp(1rem, 2.1vw, 1.2rem);
}

/* 交互レイアウト（偶数行は右側） */
.timeline__item:nth-child(odd) > .timeline__card {
    grid-column: 1 / 2;
}
.timeline__item:nth-child(odd) {
    padding-right: 38px;
}
.timeline__item:nth-child(even) > .timeline__card {
    grid-column: 2 / 3;
}
.timeline__item:nth-child(even) {
    padding-left: 38px;
}

/* ===== Notes / CTA ===== */
.daily-notes {
    background: #f7f9f0;
    color: #222;
}
.daily-notes__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(28px, 4.5vw, 44px) 20px;
    text-align: center;
}
.daily-notes__list {
    display: inline-block;
    text-align: left;
    margin: 0 0 16px;
    padding-left: 1.2em;
    color: #555;
    font-size: 1.5rem;
    line-height: 1.8;
}
.daily-cta {
    margin-top: 10px;
}
.daily-cta__btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(185, 205, 52, 0.35);
    transition: filter 0.2s ease, transform 0.1s ease;
}
.daily-cta__btn:hover {
    filter: brightness(0.96);
}
.daily-cta__btn:active {
    transform: translateY(1px);
}

/* ===== Intro ===== */
.schedule-intro {
    background: #f7f9f0;
    color: #222;
}
.schedule-intro__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(28px, 4.5vw, 44px) 20px;
    text-align: center;
}
.schedule-intro__inner p {
    margin: 0;
    font-size: clamp(1.5rem, 2.2vw, 1.7rem);
    line-height: 1.9;
    color: #444;
}

/* ===== Seasons Grid ===== */
.schedule-seasons {
    background: #fff;
    color: #222;
}
.seasons__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px) 20px;
    display: grid;
    gap: clamp(16px, 2.4vw, 24px);
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) {
    .seasons__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .seasons__inner {
        grid-template-columns: 1fr;
    }
}

/* カード */
.season-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto 1fr;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.season-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

/* ヘッダー */
.season-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 8px;
}
.season-card__badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.season-card__title {
    margin: 0;
    font-size: 1.8rem;
}

/* 季節ごとのアクセント */
.season--spring .season-card__badge {
    background: #ff7bb0;
} /* さくら色 */
.season--summer .season-card__badge {
    background: #35b1ff;
} /* 空色   */
.season--autumn .season-card__badge {
    background: #ff8c42;
} /* 紅葉色 */
.season--winter .season-card__badge {
    background: #8aa3c0;
} /* 冬空色 */

.season-card__media img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.season-card__list {
    list-style: none;
    margin: 0;
    padding: 14px 16px 18px;
    display: grid;
    gap: 8px;
    font-size: 1.5rem;
    line-height: 1.8;
    color: #444;
}
.season-card__list .m {
    display: inline-block;
    min-width: 3em;
    font-weight: 700;
    color: #222;
}

/* ===== 注意書き & CTA ===== */
.schedule-notes {
    background: #f7f9f0;
    color: #222;
}
.schedule-notes__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(28px, 4.5vw, 44px) 20px;
    text-align: center;
}
.schedule-notes__text {
    margin: 0 0 12px;
    color: #555;
    font-size: 1.5rem;
}
.schedule-cta__btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(185, 205, 52, 0.35);
    transition: filter 0.2s ease, transform 0.1s ease;
}
.schedule-cta__btn:hover {
    filter: brightness(0.96);
}
.schedule-cta__btn:active {
    transform: translateY(1px);
}

/* 動きを苦手とするユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce) {
    .schedule-hero__bg {
        transition: none !important;
        transform: none !important;
    }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .timeline__card {
        grid-template-columns: 180px 1fr;
    }
    .timeline__media img {
        height: 140px;
    }
}
@media (max-width: 860px) {
    .timeline::before {
        left: 24px;
        transform: none;
    } /* 中央ライン→左寄せ */
    .timeline__item {
        grid-template-columns: 1fr;
        padding: 0 0 0 40px;
    } /* 1列 */
    .timeline__item:nth-child(even) > .timeline__card,
    .timeline__item:nth-child(odd) > .timeline__card {
        grid-column: auto;
    }
    .timeline__time {
        left: 24px;
        transform: translateY(-50%);
    }
    .timeline__card {
        grid-template-columns: 1fr;
    }
    .timeline__media img {
        height: 180px;
    }
}
@media (hover: hover) and (pointer: fine) {
    .daily-hero:hover .daily-hero__bg {
        transform: scale(1.04);
        transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .daily-hero__bg {
        transition: none !important;
        transform: none !important;
    }
}

:root {
    --accent: #b9cd34;
    --ink: #222;
    --ink-2: #555;
    --paper: #fff;
    --bg: #f7f9f0;
}

.hours {
    background: var(--bg);
    color: var(--ink);
}
.hours__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px) 20px;
}
.hours__title {
    margin: 0 0 14px;
    font-size: clamp(2.2rem, 4.2vw, 3rem);
    letter-spacing: 0.02em;
}
.hours__note {
    margin: 12px 0 0;
    color: var(--ink-2);
    font-size: 1.4rem;
}

/* アクセシビリティ用の視覚非表示（スクリーンリーダ向け） */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 横スクロール保険（表が広い場合） */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 基本のテーブル */
.hours-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden; /* 角丸を有効化 */
    font-size: 1.5rem;
}
.hours-table thead th {
    background: linear-gradient(
            0deg,
            rgba(185, 205, 52, 0.1),
            rgba(185, 205, 52, 0.1)
        ),
        #fafcf4;
    color: var(--ink);
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.hours-table tbody th[scope='row'] {
    background: #fcfdf7;
    font-weight: 700;
}
.hours-table th,
.hours-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: top;
}
.hours-table tbody tr:nth-child(even) td,
.hours-table tbody tr:nth-child(even) th[scope='row'] {
    background: #fff;
}

/* 左端にアクセントのライン（見出し行を強調） */
.hours-table thead th:first-child {
    border-left: 6px solid var(--accent);
}

/* ===== スマホで“カード型”に変形 ===== */
@media (max-width: 640px) {
    .hours-table thead {
        display: none;
    }
    .hours-table,
    .hours-table tbody,
    .hours-table tr,
    .hours-table th,
    .hours-table td {
        display: block;
        width: 100%;
    }
    .hours-table tbody tr {
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 10px;
        overflow: hidden;
        margin: 0 0 12px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    }
    .hours-table tbody th[scope='row'] {
        background: var(--accent);
        color: #fff;
        border: 0;
        padding: 12px 14px;
    }
    .hours-table td {
        position: relative;
        padding: 12px 14px 12px 110px; /* 左にラベル領域 */
        border: 0;
        border-top: 1px dashed rgba(0, 0, 0, 0.08);
        background: #fff;
    }
    /* 擬似ラベルにヘッダ名を表示（data-labelを参照） */
    .hours-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 14px;
        top: 12px;
        width: 88px;
        color: #666;
        font-weight: 700;
        font-size: 1.3rem;
    }
}

/* 視覚的に非表示（スクリーンリーダー向け） */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 横スクロール保険（幅が狭い端末用） */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== テーブル ===== */
.philosophy-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    overflow: hidden;
    font-size: 1.5rem;
}

.philosophy-table thead th {
    background: linear-gradient(
            0deg,
            rgba(185, 205, 52, 0.1),
            rgba(185, 205, 52, 0.1)
        ),
        #fafcf4;
    color: var(--ink);
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.philosophy-table tbody th[scope='row'] {
    background: #fcfdf7;
    font-weight: 700;
}

.philosophy-table th,
.philosophy-table td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    vertical-align: top;
}

.philosophy-table tbody tr:nth-child(even) td,
.philosophy-table tbody tr:nth-child(even) th[scope='row'] {
    background: #fff;
}

/* 左端のアクセントライン（ブランド色） */
.philosophy-table thead th:first-child {
    border-left: 6px solid var(--accent);
}

/* 行動指針のインラインリスト体裁 */
.inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.inline-list li {
    background: rgba(185, 205, 52, 0.15);
    border: 1px solid rgba(185, 205, 52, 0.25);
    color: var(--ink);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 1.4rem;
}

/* ===== スマホで“カード型”に変形 ===== */
@media (max-width: 640px) {
    .philosophy-table thead {
        display: none;
    }
    .philosophy-table,
    .philosophy-table tbody,
    .philosophy-table tr,
    .philosophy-table th,
    .philosophy-table td {
        display: block;
        width: 100%;
    }
    .philosophy-table tbody tr {
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 10px;
        overflow: hidden;
        margin: 0 0 12px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    }
    .philosophy-table tbody th[scope='row'] {
        background: var(--accent);
        color: #fff;
        border: 0;
        padding: 12px 14px;
    }
    .philosophy-table td {
        position: relative;
        padding: 12px 14px 12px 110px; /* 左にラベル領域を確保 */
        border: 0;
        border-top: 1px dashed rgba(0, 0, 0, 0.08);
        background: #fff;
    }
    /* 擬似ラベル表示（data-label を見出し名として表示） */
    .philosophy-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 14px;
        top: 12px;
        width: 88px;
        color: #666;
        font-weight: 700;
        font-size: 1.3rem;
    }
}

:root {
    --accent: #b9cd34;
    --ink: #222;
    --ink2: #555;
    --paper: #fff;
    --bg: #f7f9f0;
}

.recruit {
    background: var(--bg);
    color: var(--ink);
}
.recruit__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) 20px;
}
.recruit__title {
    margin: 0 0 10px;
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    letter-spacing: 0.02em;
    text-align: center;
}
.recruit__lead {
    margin: 0 auto clamp(24px, 4vw, 36px);
    max-width: 62ch;
    text-align: center;
    color: var(--ink2);
    font-size: 1.6rem;
    line-height: 1.9;
}

/* カードグリッド */
.recruit__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vw, 24px);
    margin-bottom: clamp(28px, 4vw, 40px);
}
@media (max-width: 980px) {
    .recruit__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .recruit__grid {
        grid-template-columns: 1fr;
    }
}

/* 募集カード */
.job-card {
    background: var(--paper);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.job-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.job-card__badge {
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 4px 10px;
}
.job-card__title {
    margin: 0;
    font-size: 1.8rem;
}

.job-card__list {
    margin: 8px 0 0;
    padding-left: 1.2em;
    color: var(--ink2);
    line-height: 1.8;
    font-size: 1.5rem;
}
.job-card__list li {
    margin: 0.1em 0;
}

.job-card__foot {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    gap: 8px;
}

/* 福利厚生 */
.benefits {
    margin-top: clamp(20px, 3vw, 28px);
}
.benefits__title {
    text-align: center;
    margin: 0 0 8px;
    font-size: 1.9rem;
}
.benefits__list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: '• ';
}
.benefits__list li {
    padding-left: 0.25em;
    color: var(--ink2);
    font-size: 1.5rem;
    line-height: 1.8;
}
@media (max-width: 680px) {
    .benefits__list {
        grid-template-columns: 1fr;
    }
}

/* 応募フロー */
.flow {
    margin-top: clamp(24px, 4vw, 36px);
}
.flow__title {
    text-align: center;
    margin: 0 0 10px;
    font-size: 1.9rem;
}
.flow__steps {
    display: grid;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto;
    grid-template-columns: repeat(4, 1fr);
    counter-reset: step;
}
.flow__steps li {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    color: var(--ink2);
}
.flow__steps li span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
}
@media (max-width: 900px) {
    .flow__steps {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 520px) {
    .flow__steps {
        grid-template-columns: 1fr;
    }
}

/* CTA */
.recruit__cta {
    text-align: center;
    margin-top: clamp(24px, 4vw, 40px);
}
.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 999px;
    transition: filter 0.2s ease, transform 0.1s ease;
}
.btn--primary {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--ink);
}
.btn--accent {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 24px rgba(185, 205, 52, 0.35);
}
.btn--lg {
    padding: 12px 22px;
    font-size: 1.6rem;
}
.btn:hover {
    filter: brightness(0.96);
}
.btn:active {
    transform: translateY(1px);
}

/* アンカー遷移で固定ヘッダーに隠れないように（任意） */
.recruit {
    scroll-margin-top: 7rem;
}

/* 動きを控えたいユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce) {
    .job-card,
    .btn {
        transition: none !important;
    }
}

/* ===== 採用情報テキスト（.text.blur） ===== */
:root {
    --accent: #b9cd34;
    --ink: #222;
    --ink2: #555;
}

/* ラッパー */
.text.blur {
    max-width: 900px; /* 行幅を整える */
    margin: 0 auto; /* 中央寄せ */
    padding: clamp(24px, 4vw, 40px) 20px;
    text-align: center; /* 見出し・本文とも中央 */
    color: var(--ink);
}

/* H2：大きめ見出し＋下線アクセント */
.text.blur h2 {
    margin: 0 0 12px;
    font-size: clamp(2.2rem, 4.8vw, 3.2rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    position: relative;
    display: inline-block; /* 下線をテキスト幅に合わせる */
}
.text.blur h2::after {
    content: '';
    display: block;
    height: 4px;
    width: 56%;
    margin: 10px auto 0;
    border-radius: 999px;
    background: var(--accent);
}

/* H3：サブ見出し（改行 <br> を活かす） */
.text.blur h3 {
    margin: 6px 0 14px;
    font-size: clamp(1.8rem, 3.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.4;
    color: #333;
}

/* 本文：行間ゆったり・読みやすい行幅 */
.text.blur p {
    margin: 0 auto;
    max-width: 68ch; /* 1行の長さを最適化 */
    font-size: clamp(1.5rem, 2.2vw, 1.7rem);
    line-height: 1.9;
    color: var(--ink2);
    text-align: left; /* 長文は左揃えのほうが読みやすい */
}

/* 強調文字（必要なら） */
.text.blur p strong {
    color: var(--ink);
    font-weight: 700;
}

/* レイアウトの余白調整（任意） */
@media (min-width: 960px) {
    .text.blur {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
.color-check,
.color-check a {
    color: #ff0000 !important;
}
.l {
    text-align: left !important;
}
.c {
    text-align: center !important;
}
.r {
    text-align: right !important;
}
.ws {
    width: 95%;
    display: block;
}
.wl {
    width: 95%;
    display: block;
}
.mb0 {
    margin-bottom: 0px !important;
}
.mb30 {
    margin-bottom: 30px !important;
}
.mb5rem {
    margin-bottom: 5rem !important;
}
.look {
    display: inline-block;
    padding: 0px 10px;
    background: #eee;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 5px 0;
    word-break: break-all;
}
.small {
    font-size: 0.75em;
}
.large {
    font-size: 2em;
    letter-spacing: 0.1em;
}
.pc {
    display: none;
}
.dn {
    display: none !important;
}
.block {
    display: block !important;
}
.inline-block {
    display: inline-block;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
    .ws {
        width: 48%;
        display: inline;
    }
    .sh {
        display: none;
    }
    .pc {
        display: block;
    }
} /*追加指定ここまで*/