main {
    overflow: hidden;
    position: relative;
}

/* 青背景を最背面レイヤー(-3)に敷く。mainからz-indexを外し中身は閉じ込めない。
   重なり順（上→下）：
     コンテンツ(.hero__box z-index:2 / 各section wrapper z-index:3)
   ＞ ヘッダー装飾(.header__bg: -1)
   ＞ ベージュ(.hero__wrapper::before: -2)
   ＞ 青(main::before: -3) */
main::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #DCF2FF;
    z-index: -3;
}



/* heroセクション */
.hero {
    width: 100%;
    position: relative;
}

/* 背景画像 */
.hero-img__bg--circle {
    width: 44.6rem;
    height: 42.8rem;
    position: absolute;
    bottom: -11rem;
    left: -20rem;

}

.hero-img__bg--socks {
    width: 50.2rem;
    height: 38.2rem;
    position: absolute;
    bottom: 10rem;
    right: -3rem;
}

/* 黄色ストライプ円：SP専用装飾のためPCでは非表示 */
.hero-img__bg--stripe {
    display: none;
}

.hero-img__bg--wave {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0rem;
    left: 0rem;
    /* 水面がゆらぐように上下にゆらゆら（控えめ・ゆっくり）※一旦停止中。戻す時は下2行を有効化 */
    /* will-change: transform; */
    /* animation: hero-wave-bob 6s ease-in-out infinite; */
}

/* 波：上下にゆっくり往復（±1rem程度） */
@keyframes hero-wave-bob {

    0%,
    100% {
        transform: translateY(1rem);
    }

    50% {
        transform: translateY(-1rem);
    }
}

.hero-img__bg--leaf1 {
    width: 17.1rem;
    height: 17.5rem;
    object-fit: contain;
    position: absolute;
    bottom: 20rem;
    left: 2rem;
    z-index: 3;
}

.hero-img__bg--leaf2 {
    width: 17.4rem;
    height: 17.2rem;
    object-fit: contain;
    position: absolute;
    bottom: 23rem;
    right: 19rem;
    z-index: 3;
}

.hero-img__bg--leaf3 {
    width: 7.3rem;
    height: 7.6rem;
    object-fit: contain;
    position: absolute;
    top: 23rem;
    left: 11rem;
    z-index: 3;
}

.hero-img__bg--leaf4 {
    width: 7.3rem;
    height: 8.2rem;
    object-fit: contain;
    position: absolute;
    top: 17rem;
    left: 94rem;
    z-index: 3;
}

.hero-img__bg--leaf5 {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
    position: absolute;
    top: 26rem;
    right: -1rem;
    z-index: 3;
}

.hero-img__bg--leaf6 {
    width: 5.2rem;
    height: 5.3rem;
    object-fit: contain;
    position: absolute;
    bottom: 43rem;
    left: 49rem;
    z-index: 3;
}

/* メイン画像（右→左に流れるので、横位置はアニメーションの位相で分散させる。
   left は起点0で統一し、top を散らして縦のバンドを変える。10枚＝5枚＋複製5枚） */
.hero-img--move1,
.hero-img--move2,
.hero-img--move3,
.hero-img--move4,
.hero-img--move5,
.hero-img--move6,
.hero-img--move7,
.hero-img--move8,
.hero-img--move9,
.hero-img--move10 {
    position: absolute;
    left: 0;
}

.hero-img--move1 {
    width: 42.3rem;
    height: 42.3rem;
    top: 16rem;
}

.hero-img--move2 {
    width: 36rem;
    height: 36rem;
    top: 6rem;
}

.hero-img--move3 {
    width: 49.1rem;
    height: 49.1rem;
    top: 20rem;
}

.hero-img--move4 {
    width: 32.2rem;
    height: 32.2rem;
    top: 34rem;
}

.hero-img--move5 {
    width: 42.3rem;
    height: 42.3rem;
    top: 30rem;
}

.hero-img--move6 {
    width: 36rem;
    height: 36rem;
    top: 42rem;
}

.hero-img--move7 {
    width: 49.1rem;
    height: 49.1rem;
    top: 3rem;
}

.hero-img--move8 {
    width: 32.2rem;
    height: 32.2rem;
    top: 46rem;
}

.hero-img--move9 {
    width: 36rem;
    height: 36rem;
    top: 10rem;
}

.hero-img--move10 {
    width: 36rem;
    height: 36rem;
    top: 38rem;
}

/* ▼ heroメイン画像アニメーション
   マスクなし写真(hero_sample*)を“でこぼこ”ブロブのSVGマスクで切り抜き、
   枠(.hero-img--move*) ＝ 右→左に流れる＋左右に傾く＋少しだけ拡大縮小 ／ 中身のimg ＝ 拡大縮小(±8%)。
   流れ=translate / 傾き=rotate / 拡縮=scale を個別プロパティに分けて重ねている。
   4つは duration / delay / 枠の形を変えて少しずつずらしている */
@keyframes hero-frame-sway {

    0%,
    100% {
        rotate: -3deg;
        scale: 0.98;
    }

    50% {
        rotate: 3deg;
        scale: 1.03;
    }
}

@keyframes hero-img-scale {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

/* 右→左へエンドレスに流す（両端が画面外なので、左へ抜けて右から再登場＝繋ぎ目なし） */
@keyframes hero-flow {
    from {
        translate: 110vw 0;
    }

    to {
        translate: -110vw 0;
    }
}

/* メイン画像用：travelを広く(±175vw=350vw)。10枚だと間隔350÷10=35vwになり、
   最大画像(49.1rem≒34vw)より広いので重ならない。花びらのhero-flowとは分離。
   ※8枚時代は±140vw/100sだったが、10枚でも間隔35vw・速度2.8vw/sを保つため
     travelとdurationを同じ比率(×1.25)で広げている */
@keyframes hero-flow-main {
    from {
        translate: 175vw 0;
    }

    to {
        translate: -175vw 0;
    }
}

/* 枠：SVGマスクで“でこぼこ”ブロブ形に切り抜く＋左右に傾く。
   ブロブは正方形viewBoxのSVGをmask-size:100% 100%で枠に伸ばして使用（枠は正方形）。
   マスクは枠と一緒に回転し、拡大縮小する中身のimgもこの形にクリップされる */
.hero-img--move1,
.hero-img--move2,
.hero-img--move3,
.hero-img--move4,
.hero-img--move5,
.hero-img--move6,
.hero-img--move7,
.hero-img--move8,
.hero-img--move9,
.hero-img--move10 {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transform-origin: center;
    will-change: translate, rotate, scale;
}

/* 5つそれぞれ違うでこぼこブロブ（SVGマスク data-URI）。複製(move5〜8・move10)は元と同じ形を共有 */
.hero-img--move1,
.hero-img--move5 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M180 79 Q188 100 178 120 Q168 139 155 157 Q143 174 122 177 Q100 180 78 179 Q55 178 45 158 Q34 138 24 119 Q14 100 22 80 Q31 60 43 42 Q56 24 78 23 Q100 22 122 24 Q143 26 157 42 Q171 59 180 79 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M180 79 Q188 100 178 120 Q168 139 155 157 Q143 174 122 177 Q100 180 78 179 Q55 178 45 158 Q34 138 24 119 Q14 100 22 80 Q31 60 43 42 Q56 24 78 23 Q100 22 122 24 Q143 26 157 42 Q171 59 180 79 Z'/%3E%3C/svg%3E");
}

.hero-img--move2,
.hero-img--move6 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M178 101 Q183 122 170 139 Q157 157 140 172 Q123 187 102 180 Q80 173 60 167 Q39 161 30 141 Q21 121 18 99 Q15 77 30 61 Q45 45 61 31 Q78 17 99 20 Q121 23 142 30 Q164 36 169 58 Q173 80 178 101 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M178 101 Q183 122 170 139 Q157 157 140 172 Q123 187 102 180 Q80 173 60 167 Q39 161 30 141 Q21 121 18 99 Q15 77 30 61 Q45 45 61 31 Q78 17 99 20 Q121 23 142 30 Q164 36 169 58 Q173 80 178 101 Z'/%3E%3C/svg%3E");
}

.hero-img--move3,
.hero-img--move7 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M183 91 Q189 113 175 130 Q160 147 146 163 Q132 180 110 180 Q89 181 67 175 Q46 169 37 149 Q28 129 21 109 Q15 88 26 69 Q37 51 52 34 Q66 17 88 21 Q111 25 132 28 Q153 32 164 51 Q176 69 183 91 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M183 91 Q189 113 175 130 Q160 147 146 163 Q132 180 110 180 Q89 181 67 175 Q46 169 37 149 Q28 129 21 109 Q15 88 26 69 Q37 51 52 34 Q66 17 88 21 Q111 25 132 28 Q153 32 164 51 Q176 69 183 91 Z'/%3E%3C/svg%3E");
}

.hero-img--move4,
.hero-img--move8 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M178 111 Q180 132 165 148 Q150 165 131 176 Q112 187 92 180 Q71 172 52 163 Q32 153 27 132 Q21 111 19 89 Q17 66 35 53 Q53 40 71 27 Q88 15 109 19 Q131 24 150 35 Q169 46 173 67 Q177 89 178 111 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M178 111 Q180 132 165 148 Q150 165 131 176 Q112 187 92 180 Q71 172 52 163 Q32 153 27 132 Q21 111 19 89 Q17 66 35 53 Q53 40 71 27 Q88 15 109 19 Q131 24 150 35 Q169 46 173 67 Q177 89 178 111 Z'/%3E%3C/svg%3E");
}

.hero-img--move9,
.hero-img--move10 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M182 100 Q181 134 154 154 Q133 179 100 180 Q67 180 48 152 Q22 132 21 100 Q21 67 49 49 Q68 23 100 19 Q134 19 153 47 Q179 68 182 100 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath fill='white' d='M182 100 Q181 134 154 154 Q133 179 100 180 Q67 180 48 152 Q22 132 21 100 Q21 67 49 49 Q68 23 100 19 Q134 19 153 47 Q179 68 182 100 Z'/%3E%3C/svg%3E");
}

/* 揺れ(rotate/scale)＝各自バラバラ ＋ 流れ(translate)＝10枚とも同一125s・linear(等速)。
   hero-flow-main(±175vw)で間隔35vw＞最大画像34vw＝重ならない。
   開始位相を 125s/10=12.5s ずつ等間隔にずらして間隔を一定に保つ。ゆっくり(125s)。
   位相の並びはDOM順(1,2,3,4,9,5,6,7,8,10)＝同じ写真とその複製が必ず半周(62.5s)離れる */
.hero-img--move1 {
    animation: hero-frame-sway 5s ease-in-out infinite, hero-flow-main 125s linear 0s infinite;
}

.hero-img--move2 {
    animation: hero-frame-sway 4.5s ease-in-out -1.2s infinite, hero-flow-main 125s linear -12.5s infinite;
}

.hero-img--move3 {
    animation: hero-frame-sway 5.5s ease-in-out -0.6s infinite, hero-flow-main 125s linear -25s infinite;
}

.hero-img--move4 {
    animation: hero-frame-sway 4.2s ease-in-out -1.8s infinite, hero-flow-main 125s linear -37.5s infinite;
}

.hero-img--move9 {
    animation: hero-frame-sway 4.9s ease-in-out -2.1s infinite, hero-flow-main 125s linear -50s infinite;
}

.hero-img--move5 {
    animation: hero-frame-sway 4.8s ease-in-out -2.4s infinite, hero-flow-main 125s linear -62.5s infinite;
}

.hero-img--move6 {
    animation: hero-frame-sway 5.2s ease-in-out -3s infinite, hero-flow-main 125s linear -75s infinite;
}

.hero-img--move7 {
    animation: hero-frame-sway 4.6s ease-in-out -0.9s infinite, hero-flow-main 125s linear -87.5s infinite;
}

.hero-img--move8 {
    animation: hero-frame-sway 5.4s ease-in-out -1.5s infinite, hero-flow-main 125s linear -100s infinite;
}

.hero-img--move10 {
    animation: hero-frame-sway 5.1s ease-in-out -2.7s infinite, hero-flow-main 125s linear -112.5s infinite;
}

/* 中身の写真：枠いっぱいに配置(cover)して拡大縮小（枠内でクリップされる） */
.hero-img--move1 img,
.hero-img--move2 img,
.hero-img--move3 img,
.hero-img--move4 img,
.hero-img--move5 img,
.hero-img--move6 img,
.hero-img--move7 img,
.hero-img--move8 img,
.hero-img--move9 img,
.hero-img--move10 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    will-change: transform;
    animation: hero-img-scale 4s ease-in-out infinite;
}

.hero-img--move2 img {
    animation-duration: 3.6s;
    animation-delay: -0.8s;
}

.hero-img--move3 img {
    animation-duration: 4.4s;
    animation-delay: -1.4s;
}

.hero-img--move4 img {
    animation-duration: 3.8s;
    animation-delay: -0.4s;
}

.hero-img--move5 img {
    animation-duration: 4.2s;
    animation-delay: -1.1s;
}

.hero-img--move6 img {
    animation-duration: 3.7s;
    animation-delay: -2.0s;
}

.hero-img--move7 img {
    animation-duration: 4.5s;
    animation-delay: -0.6s;
}

.hero-img--move8 img {
    animation-duration: 3.9s;
    animation-delay: -1.7s;
}

.hero-img--move9 img {
    animation-duration: 4.1s;
    animation-delay: -1.3s;
}

.hero-img--move10 img {
    animation-duration: 3.5s;
    animation-delay: -0.9s;
}

/* 花びら6枚：右→左にエンドレスで流す（ゆっくり・速さ/開始位相をバラす） */
.hero-img__bg--leaf1,
.hero-img__bg--leaf2,
.hero-img__bg--leaf3,
.hero-img__bg--leaf4,
.hero-img__bg--leaf5,
.hero-img__bg--leaf6 {
    will-change: translate;
}

.hero-img__bg--leaf1 {
    animation: hero-flow 48s linear -6s infinite;
}

.hero-img__bg--leaf2 {
    animation: hero-flow 55s linear -28s infinite;
}

.hero-img__bg--leaf3 {
    animation: hero-flow 42s linear -16s infinite;
}

.hero-img__bg--leaf4 {
    animation: hero-flow 52s linear -40s infinite;
}

.hero-img__bg--leaf5 {
    animation: hero-flow 46s linear -22s infinite;
}

.hero-img__bg--leaf6 {
    animation: hero-flow 58s linear -10s infinite;
}

/* 「視差効果を減らす」設定の環境ではアニメーションを止める */
@media (prefers-reduced-motion: reduce) {

    .hero-img--move1,
    .hero-img--move2,
    .hero-img--move3,
    .hero-img--move4,
    .hero-img--move5,
    .hero-img--move6,
    .hero-img--move7,
    .hero-img--move8,
    .hero-img--move9,
    .hero-img--move10,
    .hero-img--move1 img,
    .hero-img--move2 img,
    .hero-img--move3 img,
    .hero-img--move4 img,
    .hero-img--move5 img,
    .hero-img--move6 img,
    .hero-img--move7 img,
    .hero-img--move8 img,
    .hero-img--move9 img,
    .hero-img--move10 img,
    .hero-img__bg--leaf1,
    .hero-img__bg--leaf2,
    .hero-img__bg--leaf3,
    .hero-img__bg--leaf4,
    .hero-img__bg--leaf5,
    .hero-img__bg--leaf6,
    .hero-img__bg--wave {
        animation: none;
    }
}



.hero__wrapper {
    width: 100%;
    height: 100vh;
    position: relative;
    /* z-index:0 を外して重なりコンテキストを解除。
       ベージュ背景は下の ::before に分離(-2)し、
       ヘッダー装飾(.header__bg:-1)より下・青(-3)より上に配置する */
}

/* ベージュの背景画像を独立レイヤー(-2)に分離 */
.hero__wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    background-image: url("../img/frontpage/hero_img_bg2.svg");
    background-size: 100%;
    z-index: -2;
}

.hero__box {
    width: 58rem;
    height: 16.6rem;
    text-align: center;
    background-color: #fff;
    border-radius: 1.5rem;
    padding-top: 3.1rem;
    position: absolute;
    bottom: 8.7rem;
    left: 14rem;
    z-index: 2;
    opacity: 0.7;
}

.hero__title {
    color: #47351A;
    font-size: 3rem;
    font-weight: 700;
    font-family: "Shippori Mincho", serif;
    line-height: calc(45 / 30);
    padding-bottom: 1rem;
}

.hero__text {
    color: #47351A;
    font-size: 1.8rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(26 / 18);
}




/* emptyセクション */
.empty {
    width: 100%;
    padding-top: 10rem;
    background-color: #DCF2FF;
    position: relative;
    z-index: 2;
}

.empty-img__bg {
    position: absolute;
    right: 7rem;
    top: 2rem;
}

.empty__wrapper {
    width: 115rem;
    display: flex;
    margin: 0 auto;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    position: relative;
    z-index: 3;
}

.empty__box__outer {
    display: flex;
    gap: 1.5rem;
}

.empty__box {
    width: 35rem;
    height: 29.2rem;
    padding-top: 2.5rem;
    background-color: #FFF;
    border-radius: 1.5rem;
}

.empty__titlebox {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 4rem;
}

.empty__icon img {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
}

.empty__box h3 {
    color: #2E2518;
    font-size: 2.2rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(26 / 18);
}

.empty__detail--home {
    width: 20rem;
    height: 4rem;
    border: solid 0.1rem #008111;
    border-radius: 2rem;
    color: #008111;
    font-size: 2rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
    line-height: 4rem;
    margin: 0 auto;
    position: relative;
}

.empty__detail--home::after {
    content: "";
    width: 30rem;
    height: 0.1rem;
    background-color: #008111;
    position: absolute;
    top: -2rem;
    left: -5rem;
}

.empty__detail--day {
    width: 20rem;
    height: 4rem;
    border: solid 0.1rem #469ED8;
    border-radius: 2rem;
    color: #469ED8;
    font-size: 2rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
    line-height: 4rem;
    margin: 0 auto;
    position: relative;
}

.empty__detail--day::after {
    content: "";
    width: 30rem;
    height: 0.1rem;
    background-color: #469ED8;
    position: absolute;
    top: -2rem;
    left: -5rem;
}

.empty__number {
    color: #2E2518;
    font-size: 2rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(29 / 20);
    text-align: center;
}

.empty__num {
    font-size: 5rem;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(72 / 50);
    padding-right: 1rem;
}

.empty__num--home {
    color: #019A6C;
}

.empty__num--day {
    color: #469ED8;
}

.empty__time {
    text-align: center;
    color: #2E2518;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(24 / 16);
}

.empty__img img {
    width: 42rem;
    height: 29.2rem;
    object-fit: cover;
    border-radius: 1.5rem;
}

.empty-img__bg img {
    width: 21.9rem;
    height: 22.1rem;
}



/* newsセクション */
.news {
    width: 100%;
    position: relative;
    padding-bottom: 10rem;
}

.news-img__bg {
    width: 50.4rem;
    height: 38.3rem;
    position: absolute;
    bottom: -4rem;
    left: -3rem;
    z-index: -2;
}

.news__box {
    width: 115rem;
    height: auto;
    margin: 0 auto;
    padding: 3rem;
    background-color: #FFF;
    border-radius: 1.5rem;
    position: relative;
    z-index: 3;
}

.news-title__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2.1rem;
}

.news-title__wrapper h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #0069AA;
    font-size: 2.5rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(36 / 25);
}

.news-list--pc {
    width: 19.6rem;
    height: 3.6rem;
    background-color: #0069AA;
    border: 0.1rem solid #0069AA;
    border-radius: 2rem;
    color: #FFF;
    text-align: center;
    line-height: 3.6rem;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
}

.news-list--pc:hover {
    color: #0069AA;
    background-color: #FFF;
    border: solid 0.1rem #0069AA;
    transition: all 0.3s ease;
}

.news-list--pc a {
    display: block;
}

.news-list--sp {
    display: none;
}

.news-flower__icon img,
.about-flower__icon img,
.guidance-flower__icon img,
.recruit-flower__icon img {
    width: 2.5rem;
    height: auto;
    display: block;
}

.news-yazirusi__icon {
    margin-left: auto;
    /* flexの余白を全て左に寄せ、記事の長さに関係なく矢印を右端へ */
}

.news-yazirusi__icon img {
    width: 1.9rem;
    height: auto;
    display: block;
}

.news-content {
    display: flex;
    align-items: center;
    padding: 1.4rem 1rem;
    border-top: solid 0.1rem #9FC9E4;
    text-decoration: none;
}

.news-content:last-child {
    border-bottom: solid 0.1rem #9FC9E4;
}

.news-content .date,
.news-content .title {
    color: #47351A;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(24 / 16);
}

.news-content .date {
    padding-right: 5rem;
}

.news-content .title {
    padding-left: 4rem;
}

.news-content .category-col {
    width: 12rem;
    flex-shrink: 0;
    /* タイトルが長くても枠が縮まないよう固定 */
}

.news-content .category {
    width: fit-content;
    background-color: #469ED8;
    padding: 0.5rem 1rem;
    color: #FFF;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(24 / 16);
    border-radius: 0.5rem;
}

.news__subbox {
    display: flex;
    align-items: center;
}

/* aboutセクション */
.about__box {
    width: 100%;
    display: flex;
    position: relative;
    z-index: 3;
    margin-bottom: 10rem;
}

.about-title__wrapper {
    background-color: #0069AA;
    padding: 7.3rem 9.5rem 0 14.5rem;
    border-radius: 3rem 0 0 0;
}

.about-title__wrapper h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #FFFDF8;
    font-size: 2.5rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(36 / 25);
    margin-bottom: 2rem;
}

.about-title__wrapper p {
    color: #FFFDF8;
    font-size: 1.8rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(40 / 18);
    white-space: nowrap;
}

.about__img img {
    width: 84.1rem;
    height: 51.6rem;
    border-radius: 0 3rem 0 0;
    object-position: 50% 100%;
}

.about-detail {
    width: 19.6rem;
    height: 3.6rem;
    background-color: #FFFDF8;
    border: 0.1rem solid #FFFDF8;
    border-radius: 2rem;
    color: #0069AA;
    text-align: center;
    line-height: 3.6rem;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    margin-top: 4rem;
}

.about-detail:hover {
    color: #FFFDF8;
    background-color: #0069AA;
    border: 0.1rem solid #FFFDF8;
    transition: all 0.3s ease;
}

.about-detail a {
    display: block;
}



/* guidanceセクション */
.guidance__box {
    width: 109rem;
    margin: 0 auto 10.5rem;
}

.guidance-title__wrapper h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: #0069AA;
    font-size: 2.5rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(36 / 25);
    margin-bottom: 2rem;
    text-align: center;
}

.guidance__box h3 {
    color: #47351A;
    font-size: 1.8rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(40 / 18);
    text-align: center;
    margin-bottom: 2rem;
}

.guidance__subbox {
    display: flex;
    gap: 3rem;
}

.guidance__icon img {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    position: absolute;
    top: 26.6rem;
    left: 5rem;
}

.guidance__subbox--soyokaze,
.guidance__subbox--day {
    background-color: #FFF;
    border-radius: 3rem;
    padding-bottom: 2rem;
    position: relative;
}

.guidance__img--soyokaze img,
.guidance__img--day img {
    width: 53rem;
    height: 29.8rem;
    border-radius: 3rem 3rem 0 0;
}

.guidance__subbox--soyokaze h4 {
    color: #019A6C;
    font-size: 2.3rem;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(34 / 23);
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

.guidance__subbox--day h4 {
    color: #0069AA;
    font-size: 2.3rem;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(34 / 23);
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

.guidance__subbox p {
    color: #47351A;
    font-size: 1.8rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(32 / 18);
    padding-left: 6.8rem;
}

.guidance-detail--soyokaze {
    width: 19.6rem;
    height: 3.6rem;
    background-color: #019A6C;
    border: solid 0.1rem #019A6C;
    border-radius: 2rem;
    color: #fff;
    text-align: center;
    line-height: 3.6rem;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    margin: 2rem auto 0;
}

.guidance-detail--soyokaze:hover {
    color: #019A6C;
    background-color: #fff;
    border: solid 0.1rem #019A6C;
    transition: all 0.3s ease;
}

.guidance-detail--soyokaze a {
    display: block;
}

.guidance-detail--day {
    width: 19.6rem;
    height: 3.6rem;
    background-color: #469ED8;
    border: solid 0.1rem #469ED8;
    border-radius: 2rem;
    color: #fff;
    text-align: center;
    line-height: 3.6rem;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    margin: 2rem auto 0;
}

.guidance-detail--day:hover {
    color: #469ED8;
    background-color: #fff;
    border: solid 0.1rem #469ED8;
    transition: all 0.3s ease;
}

.guidance-detail--day a {
    display: block;
}




/* recruitセクション */
.recruit__box {
    width: 100%;
    display: flex;
}

.recruit-title__wrapper {
    background-color: #0069AA;
    padding: 6.4rem 29.2rem 0 7rem;
    border-radius: 0 3rem 0 0;
}

.recruit-title__wrapper h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #FFFDF8;
    font-size: 2.5rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(36 / 25);
    margin-bottom: 2rem;
}

.recruit-title__wrapper p {
    color: #FFFDF8;
    font-size: 1.8rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    line-height: calc(40 / 18);
    white-space: nowrap;
}

.recruit__img img {
    width: 72rem;
    height: 40.5rem;
    border-radius: 3rem 0 0 0;
}

.recruit-detail {
    width: 19.6rem;
    height: 3.6rem;
    background-color: #FFFDF8;
    border: solid 0.1rem #FFFDF8;
    border-radius: 2rem;
    color: #0069AA;
    text-align: center;
    line-height: 3.6rem;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    margin-top: 4rem;
}

.recruit-detail:hover {
    color: #FFFDF8;
    background-color: #0069AA;
    border: 0.1rem solid #FFFDF8;
    transition: all 0.3s ease;
}

.recruit-detail a {
    display: block;
}



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

    /* heroセクション */
    .hero {
        width: 100%;
        position: relative;
    }


    /* 背景画像 */
    .hero-img__bg--circle {
        width: 22.3rem;
        height: 21.4rem;
        position: absolute;
        bottom: -11rem;
        left: -10rem;

    }

    .hero-img__bg--socks {
        width: 26.4rem;
        height: 19.4rem;
        position: absolute;
        bottom: 17rem;
        right: -3rem;
    }

    /* 黄色ストライプ円：右上・右端で見切れる位置に配置（写真より奥の背景装飾） */
    .hero-img__bg--stripe {
        display: block;
        width: 18rem;
        height: 18rem;
        position: absolute;
        top: 7rem;
        right: -6rem;
    }

    .hero-img__bg--stripe img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .hero__wrapper {
        width: 100%;
        height: 100vh;
        position: relative;
        /* z-index:0 を外して重なりコンテキストを解除。
       ベージュ背景は下の ::before に分離(-2)し、
       ヘッダー装飾(.header__bg:-1)より下・青(-3)より上に配置する */
    }

    /* ベージュの背景画像を独立レイヤー(-2)に分離 */
    .hero__wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        background-image: url("../img/frontpage/hero_img_bg2.svg");
        background-size: 100%;
        z-index: -2;
    }

    .hero__box {
        width: 33.5rem;
        height: 13.3rem;
        padding-top: 2.6rem;
        bottom: 8.7rem;
        left: 2rem;
    }

    .hero__title {
        font-size: 1.8rem;
        line-height: calc(26 / 18);
        padding-bottom: 1rem;
    }

    .hero__text {
        font-size: 1.5rem;
        line-height: calc(21 / 15);
    }

    /* メイン画像：SPは画面が狭く写真が画面幅より大きい(約2倍)ため、同時に流すのは2枚に限定。
       大きい2枚(move1=38rem/move3=40rem)だけ表示し、move2・move4・move9と複製move5〜8・move10は非表示。
       残る2枚は 0s と -30s(=60s/2)で等間隔＝間隔110vw＞画面幅 となり重ならない */
    .hero-img--move2,
    .hero-img--move4,
    .hero-img--move5,
    .hero-img--move6,
    .hero-img--move7,
    .hero-img--move8,
    .hero-img--move9,
    .hero-img--move10 {
        display: none;
    }

    .hero-img--move1 {
        width: 38rem;
        height: 38rem;
        top: 5rem;
    }

    .hero-img--move2 {
        width: 32rem;
        height: 32rem;
        top: 18rem;
    }

    .hero-img--move3 {
        width: 40rem;
        height: 40rem;
        top: 31rem;
    }

    .hero-img--move4 {
        width: 30rem;
        height: 30rem;
        top: 44rem;
    }

    .hero-img--move1 {
        animation: hero-frame-sway 5s ease-in-out infinite, hero-flow 60s linear 0s infinite;
    }

    .hero-img--move2 {
        animation: hero-frame-sway 4.5s ease-in-out -1.2s infinite, hero-flow 60s linear -15s infinite;
    }

    .hero-img--move3 {
        animation: hero-frame-sway 5.5s ease-in-out -0.6s infinite, hero-flow 60s linear -30s infinite;
    }

    .hero-img--move4 {
        animation: hero-frame-sway 4.2s ease-in-out -1.8s infinite, hero-flow 60s linear -45s infinite;
    }



    /* emptyセクション */
    .empty {
        padding-top: 2.5rem;
    }

    .empty-img__bg {
        display: none;
    }

    .empty__wrapper {
        width: 33.5rem;
        display: flex;
        margin: 0 auto;
        gap: 1rem;
        padding-bottom: 1.5rem;
        position: relative;
        z-index: 3;
        flex-direction: column;
    }

    .empty__box__outer {
        display: flex;
        gap: 2.1rem;
    }

    .empty__box {
        width: 15.7rem;
        height: fit-content;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .empty__titlebox {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0rem;
        margin-bottom: 2rem;
        flex-direction: column;
    }

    .empty__icon img {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
    }

    .empty__box h3 {
        font-size: 1.6rem;
        line-height: calc(24 / 16);
    }

    .empty__detail--home {
        width: 14.5rem;
        height: 3.2rem;
        font-size: 1.5rem;
        line-height: 3.2rem;
    }

    .empty__detail--home::after {
        content: "";
        width: 14.7rem;
        height: 0.1rem;
        position: absolute;
        top: -1rem;
        left: -0.2rem;
    }

    .empty__detail--day {
        width: 14.5rem;
        height: 3.2rem;
        font-size: 1.5rem;
        line-height: 3.2rem;
    }

    .empty__detail--day::after {
        content: "";
        width: 14.7rem;
        height: 0.1rem;
        position: absolute;
        top: -1rem;
        left: -0.2rem;
    }

    .empty__num {
        font-size: 3.5rem;
        font-weight: 700;
        font-family: "Noto Sans JP", sans-serif;
        line-height: calc(51 / 35);
        padding-right: 0.5rem;
    }

    .empty__num--home {
        color: #019A6C;
    }

    .empty__num--day {
        color: #469ED8;
    }

    .empty__time {
        font-size: 1.4rem;
        line-height: calc(20 / 14);
    }

    .empty__img img {
        width: 33.5rem;
        height: 20rem;
        object-fit: cover;
        border-radius: 1.5rem;
    }



    /* newsセクション */
    .news {
        width: 100%;
        position: relative;
        padding-bottom: 8rem;
    }

    .news-img__bg {
        width: 18.8rem;
        height: 19.2rem;
        position: absolute;
        bottom: -5rem;
        left: 25rem;
        z-index: -2;
    }

    .news__box {
        width: 33.5rem;
        padding: 2rem;
    }

    .news__subbox {
        grid-column: 1;
        grid-row: 1;
        justify-content: space-between;
    }

    .news-title__wrapper {
        justify-content: center;
        padding-bottom: 1.5rem;
    }

    .news-title__wrapper h2 {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #0069AA;
        font-size: 2.5rem;
        font-weight: 500;
        font-family: "Noto Sans JP", sans-serif;
        line-height: calc(36 / 25);
    }

    .news-list--pc {
        display: none;
    }

    .news-list--sp {
        display: block;
        width: 19.6rem;
        height: 3.6rem;
        background-color: #0069AA;
        border: 0.1rem solid #0069AA;
        border-radius: 2rem;
        color: #FFF;
        text-align: center;
        line-height: 3.6rem;
        font-size: 1.6rem;
        font-weight: 500;
        font-family: "Noto Sans JP", sans-serif;
        margin: 2rem auto 0;
    }

    .news-list--sp:hover {
        color: #0069AA;
        background-color: #FFF;
        border: solid 0.1rem #0069AA;
        transition: all 0.3s ease;
    }

    .news-list--sp a {
        display: block;
    }

    .news-flower__icon img,
    .about-flower__icon img,
    .guidance-flower__icon img,
    .recruit-flower__icon img {
        width: 2.5rem;
        height: auto;
        display: block;
    }

    .news-yazirusi__icon {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        /* 右カラムで日付〜タイトルの2行分にまたがり、矢印を縦中央に配置 */
    }

    .news-yazirusi__icon img {
        width: 1.9rem;
        height: auto;
        display: block;
    }

    .news-content {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 3rem;
        row-gap: 1rem;
        padding: 1.4rem 1rem;
        border-top: solid 0.1rem #9FC9E4;
        text-decoration: none;
    }

    .news-content:last-child {
        border-bottom: solid 0.1rem #9FC9E4;
    }

    .news-content .date,
    .news-content .title {
        color: #47351A;
        font-size: 1.4rem;
        font-weight: 500;
        font-family: "Noto Sans JP", sans-serif;
        line-height: calc(20 / 14);
    }

    .news-content .date {
        padding-right: 0rem;
    }

    .news-content .title {
        grid-column: 1;
        grid-row: 2;
        padding-left: 0rem;
    }

    .news-content .category-col {
        width: auto;
        flex-shrink: 0;
        /* タイトルが長くても枠が縮まないよう固定 */
    }

    .news-content .category {
        width: fit-content;
        background-color: #469ED8;
        padding: 0.5rem 1rem;
        color: #FFF;
        font-size: 1.4rem;
        font-weight: 500;
        font-family: "Noto Sans JP", sans-serif;
        line-height: calc(20 / 14);
        border-radius: 0.5rem;
    }



    /* aboutセクション */
    .about__box {
        margin-bottom: 6rem;
        flex-direction: column;
        text-align: center;
    }

    .about-title__wrapper {
        padding: 3.1rem 0 0 0;
        border-radius: 3rem 3rem 0 0;
    }

    .about-title__wrapper h2 {
        justify-content: center;
    }

    .about-title__wrapper p {
        color: #FFFDF8;
        font-size: 1.6rem;
        line-height: calc(32 / 16);
    }

    .about__img img {
        width: 100%;
        height: 21.8rem;
        border-radius: 0 0rem 0 0;
        object-position: 50% 75%;
    }

    .about-detail {
        width: 19.6rem;
        height: 3.6rem;
        background-color: #FFFDF8;
        border: 0.1rem solid #FFFDF8;
        border-radius: 2rem;
        color: #0069AA;
        text-align: center;
        line-height: 3.6rem;
        font-size: 1.6rem;
        font-weight: 500;
        font-family: "Noto Sans JP", sans-serif;
        margin: 2rem auto 4rem;
    }



    /* guidanceセクション */
    .guidance__box {
        width: 33.5rem;
        margin: 0 auto 6rem;
    }

    .guidance__box h3 {
        font-size: 1.6rem;
        line-height: calc(32 / 16);
        margin-bottom: 2rem;
    }

    .guidance__subbox {
        gap: 1rem;
        flex-direction: column;
    }

    .guidance__icon img {
        width: 5.4rem;
        height: 5.4rem;
        top: 15.6rem;
        left: 14rem;
    }

    .guidance__subbox--soyokaze,
    .guidance__subbox--day {
        background-color: #FFF;
        border-radius: 3rem;
        padding-bottom: 2rem;
        position: relative;
    }

    .guidance__img--soyokaze img,
    .guidance__img--day img {
        width: 33.5rem;
        height: 18.9rem;
        border-radius: 3rem 3rem 0 0;
    }

    .guidance__subbox--soyokaze h4 {
        color: #019A6C;
        font-size: 2rem;
        font-weight: 700;
        font-family: "Noto Sans JP", sans-serif;
        line-height: calc(29 / 20);
        text-align: center;
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }

    .guidance__subbox--day h4 {
        color: #0069AA;
        font-size: 2rem;
        font-weight: 700;
        font-family: "Noto Sans JP", sans-serif;
        line-height: calc(29 / 20);
        text-align: center;
        padding-top: 2rem;
        padding-bottom: 1.5rem;
    }

    .guidance__subbox p {
        font-size: 1.6rem;
        line-height: calc(32 / 16);
        padding-left: 0rem;
        text-align: center;
    }

    .guidance-detail--soyokaze {
        width: 19.6rem;
        height: 3.6rem;
        background-color: #019A6C;
        border: solid 0.1rem #019A6C;
        border-radius: 2rem;
        color: #fff;
        text-align: center;
        line-height: 3.6rem;
        font-size: 1.6rem;
        font-weight: 500;
        font-family: "Noto Sans JP", sans-serif;
        margin: 2rem auto 0;
    }

    .guidance-detail--soyokaze:hover {
        color: #019A6C;
        background-color: #fff;
        border: solid 0.1rem #019A6C;
        transition: all 0.3s ease;
    }

    .guidance-detail--soyokaze a {
        display: block;
    }

    .guidance-detail--day {
        width: 19.6rem;
        height: 3.6rem;
        background-color: #469ED8;
        border: solid 0.1rem #469ED8;
        border-radius: 2rem;
        color: #fff;
        text-align: center;
        line-height: 3.6rem;
        font-size: 1.6rem;
        font-weight: 500;
        font-family: "Noto Sans JP", sans-serif;
        margin: 2rem auto 0;
    }

    .guidance-detail--day:hover {
        color: #469ED8;
        background-color: #fff;
        border: solid 0.1rem #469ED8;
        transition: all 0.3s ease;
    }

    .guidance-detail--day a {
        display: block;
    }



    /* recruitセクション */
    .recruit__box {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .recruit-title__wrapper {
        background-color: #0069AA;
        padding: 3rem 0 0 0;
        border-radius: 0;
    }

    .recruit-title__wrapper h2 {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #FFFDF8;
        font-size: 2.5rem;
        font-weight: 500;
        font-family: "Noto Sans JP", sans-serif;
        line-height: calc(36 / 25);
        margin-bottom: 2rem;
        justify-content: center;
    }

    .recruit-title__wrapper p {
        font-size: 1.6rem;
        line-height: calc(32 / 16);
        text-align: center;
    }

    .recruit__img img {
        width: 100%;
        height: 21.1rem;
        border-radius: 3rem 3rem 0 0;
    }

    .recruit-detail {
        width: 19.6rem;
        height: 3.6rem;
        background-color: #FFFDF8;
        border: solid 0.1rem #FFFDF8;
        border-radius: 2rem;
        color: #0069AA;
        text-align: center;
        line-height: 3.6rem;
        font-size: 1.6rem;
        font-weight: 500;
        font-family: "Noto Sans JP", sans-serif;
        margin: 2rem auto 4rem;
    }

    .recruit-detail:hover {
        color: #FFFDF8;
        background-color: #0069AA;
        border: 0.1rem solid #FFFDF8;
        transition: all 0.3s ease;
    }

    .recruit-detail a {
        display: block;
    }
}