@charset "UTF-8";

/* -------------------------------------------------------
    common.html タブレット版（768px〜1439px）
    css/common.css（PC版）の px 指定を 1440px 基準で vw に変換
    計算式：px ÷ 1440 × 100 = vw（小数点4桁まで）
    セレクタ・レイアウト構成はPC版から変更していません
------------------------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1439px) {
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
        box-sizing: border-box;
    }
    html { line-height: 1;
        font-size: 62.5%;
        scroll-padding-top: 11.1806vw;
    }
    ol, ul { list-style: none; }
    table { border-collapse: collapse; border-spacing: 0; }
    caption, th, td {
        text-align: left;
        font-weight: normal;
        vertical-align: middle;
    }
    q, blockquote { quotes: none; }
    q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }
    a { text-decoration: none; color: inherit; }
    a img { border: none; vertical-align: bottom; }
    a:focus { outline: none; }
    a:hover { text-decoration: underline; }
    article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
        display: block;
    }
    input, textarea, select, button {
        font-size: 1.5rem;
        font-family: inherit;
    }

    h1, h2, h3, h4, h5, h6, strong{
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        font-size: 1rem;
        vertical-align: baseline;
    }
    .sp{ display: none !important; }
    .pc{ display: block !important; }

    img{ max-width: 100%; vertical-align: bottom;}
    img {width: 100%; height: auto;}

    ruby rt{ font-size: 1.4rem;}

    .clearfix{display:inline-block;min-height:1%;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;line-height:0;}
    * html .clearfix{height:1%;}
    .clearfix{display:block;}

    /*
    ===================*/
    html { overflow-y: scroll; overflow-x: hidden; height: 100%; }
    body {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        font-weight: normal;
        text-align: left;
        line-height: 1.6;
        word-break: normal;
        word-wrap: break-word;
        -webkit-text-size-adjust: 100%;
        font-feature-settings: 'palt' ;
        letter-spacing: 1px;
    }

    .l-main {
        flex: 1 0 auto;
    }

    .footer {
        flex-shrink: 0;
    }


    a:hover {
        text-decoration:none;
    }




    body{
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 400;
        font-style: normal;
    }




    :root {
        --color-beige: #D5CA87;
        --color-cream: #FFFFBC;
        --color-yellow: #FFEA63;
        --color-yellow-pale: #FFF8AA;
        --color-orange: #FF6D33;
        --color-green: #22A773;
        --color-brown: #E5771E;
    }

    /* -------------------------
        共通ボタン（「ひだまりについて知る」等、各所で使い回す）
    ------------------------- */

    .c-btn-more {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 27.7778vw;
        height: 6.25vw;
        padding: 0 4.8611vw 0 2.0833vw;
        background: var(--color-orange);
        border: 0.2vw solid #fff;
        border-radius: 69.375vw;
        color: #fff;
        font-size: 1.5972vw;
        font-weight: 700;
        letter-spacing: 2.3px;
        text-decoration: none;
        white-space: nowrap;
    }

    .c-btn-more::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 2.3611vw;
        width: 2.3611vw;
        height: 2.3611vw;
        background-image: url("../images/common/icon_arrow_right.svg");
        background-size: contain;
        background-repeat: no-repeat;
        transform: translateY(-50%);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .c-btn-more:hover::after {
        transform: translateY(-50%) translateX(6px);
    }


    .c-btn-more--sm {
        width: 27.0139vw;
        height: 4.1667vw;
        padding: 0 1.3889vw 0 1.1111vw;
        border-width: 3px;
        font-size: 1.4583vw;
        letter-spacing: normal;
    }

    .c-btn-more--sm::after {
        right: 1.1111vw;
        width: 1.8056vw;
        height: 1.8056vw;
    }


    /* -------------------------
        共通テキストリンク（文中リンク：オレンジ＋下線）
        複数ページで共通使用
    ------------------------- */

    .c-link {
        color: var(--color-brown);
        text-decoration: underline;
    }


    /* -------------------------
        共通見出し（丸見出し3：オレンジの罫線＋テキスト）
        複数の下層ページで共通使用
    ------------------------- */

    .c-heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.9722vw;
        width: fit-content;
        min-width: 25.8333vw;
        margin: 0 auto 5.5556vw;
    }

    .c-heading::before,
    .c-heading::after {
        content: "";
        display: block;
        width: 100%;
        height: 0.2083vw;
        border-radius: 0.1389vw;
        background: var(--color-orange);
    }

    .c-heading__text {
        font-size: 2.0833vw;
        font-weight: 900;
        color: var(--color-orange);
        letter-spacing: 1.5px;
        line-height: 2.7778vw;
        white-space: nowrap;
    }


    /* -------------------------
        共通絞り込みパネル（05_施設を探すのデザイン）
        facilities / services / news / location-blog で共通使用
    ------------------------- */

    .c-search-panel {
        position: relative;
        display: flex;
        gap: 4.1667vw;
        max-width: 78.4028vw;
        margin: 0 auto;
        padding: 3.125vw 3.5vw;
        background: var(--color-yellow-pale);
        border-radius: 1.3889vw;
    }

    .c-search-panel__label-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        gap: 1.1111vw;
        padding-top: 0.2778vw;
    }

    .c-search-panel__label {
        margin: 0;
        color: var(--color-tag);
        font-size: 1.25vw;
        font-weight: 500;
        letter-spacing: 1.8px;
    }

    .c-search-panel__clear {
        display: inline-flex;
        align-items: center;
        gap: 0.2778vw;
        padding: 0.3472vw 1.3889vw;
        background: var(--color-tag);
        border: none;
        border-radius: 4.1667vw;
        color: #fff;
        font-size: 0.8333vw;
        font-weight: 500;
        letter-spacing: 0.825px;
        cursor: pointer;
        transition: opacity 0.3s;
    }

    .c-search-panel__clear:hover {
        opacity: 0.8;
    }

    .c-search-panel__clear-icon {
        width: 1.3889vw;
        height: 1.3889vw;
    }

    .c-search-panel__rows {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
        justify-content: center;
        gap: 0.8333vw;
    }

    .c-search-panel__row {
        display: flex;
        align-items: center;
        gap: 1.6667vw;
    }

    .c-search-panel__row + .c-search-panel__row {
        padding-top: 0.8333vw;
        border-top: 1px solid #ECE3AF;
    }

    .c-search-panel__row-label {
        flex-shrink: 0;
        width: 5.5556vw;
        color: #000;
        font-size: 1.25vw;
        font-weight: 500;
        letter-spacing: 1.8px;
    }

    .c-search-panel__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4167vw;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .c-search-panel__tags + .c-search-panel__tags {
        padding-top: 0.8333vw;
        border-top: 1px solid #ECE3AF;
    }

    .c-search-panel__tag {
        padding: 0.7639vw 1.5278vw;
        background: #fff;
        border: none;
        border-radius: 4.1667vw;
        color: #333;
        font-size: 0.9722vw;
        font-weight: 500;
        letter-spacing: 0.825px;
        cursor: pointer;
        transition: opacity 0.3s;
    }

    .c-search-panel__tag:hover {
        opacity: 0.7;
    }

    .c-search-panel__tag.is-active {
        background: var(--color-orange);
        color: #fff;
    }

    .c-search-panel__tags--radio {
        gap: 0.6944vw 1.6667vw;
    }

    .c-search-panel__tag--radio {
        gap: 0.6944vw;
        padding: 0;
        background: transparent;
        border-radius: 0;
    }

    .c-search-panel__tag--radio.is-active {
        background: transparent;
        color: #333;
    }

    .c-search-panel__tag-input {
        width: 1.3889vw;
        height: 1.3889vw;
    }


    .header__menu-item:not(:last-child)::after {
        background: var(--color-brown);
    }

    .header__contact {
        background: var(--color-orange);
        color: #fff;
    }




    .header {
        position: fixed;
        z-index: 50;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100vw;
        height: 11.1806vw;
        margin: 0 auto;
    }

    .header__logo {
        position: absolute;
        top: 0.9722vw;
        left: 3.6806vw;
        width: 11.3889vw;
        height: 11.3889vw;
        border-radius: 50%;
        overflow: hidden;
        transition: top 0.3s ease, width 0.3s ease, height 0.3s ease;
    }

    .header.is-scrolled .header__logo {
        top: 3.0556vw;
        width: 6.9444vw;
        height: 6.9444vw;
    }

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

    .header__nav {
        position: absolute;
        top: 3.8194vw;
        left: 23.1944vw;
        width: 73.4028vw;
        height: 4.8611vw;
        display: flex;
        align-items: center;
        padding: 0 9.0278vw 0 2.2222vw;
        background: #fff;
        border-radius: 6.9444vw;
    }

    .header__menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .header__menu-item {
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    .header__menu-item:not(:last-child)::after {
        content: "";
        flex-shrink: 0;
        width: 0.0694vw;
        height: 1.5625vw;
        margin: 0 1.1111vw;
        background: #ff985d;
    }

    .header__menu-link {
        color: #000;
        font-size: 1.0417vw;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0.75px;
        text-decoration: none;
        transition: color 0.3s;
    }

    .header__contact {
        position: absolute;
        top: -0.1389vw;
        right: -0.0694vw;
        width: 5.2778vw;
        height: 5.2778vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2778vw;
        color: #fff;
        background: var(--color-orange);
        border-radius: 50%;
        text-decoration: none;
    }

    .header__contact-icon {
        display: block;
        width: 1.9444vw;
        height: 1.5278vw;
        transition: transform 0.3s;
    }

    .header__contact:hover .header__contact-icon {
        transform: scale(1.25);
    }

    .header__contact-text {
        font-size: 0.7639vw;
        font-weight: 700;
        line-height: 1;
    }


    .footer {
        position: relative;
        width: 100%;
        min-width: 69.4444vw;
        overflow: visible;
        background: var(--color-yellow);
        color: #000;
    }


    /* -------------------------
        背景装飾
    ------------------------- */

    .footer__bg-top {
        position: absolute;
        z-index: 1;
        top: -12vw;
        left: -2vw;
        width: 120vw;
        height: 20.9vw;
        background-image: url(../images/common/footer/bg_top.webp);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100%;
        pointer-events: none;
    }

    .footer__bg-bottom {
        position: absolute;
        z-index: 1;
        bottom: -15vw;
        left: -25%;
        width: 120%;
        aspect-ratio: 3649 / 846;
        background-image: url(../images/common/footer/bg_bottom.webp);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 100%;
        pointer-events: none;
    }


    /* -------------------------
        コンテンツ
    ------------------------- */

    .footer__inner {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        padding: 0 7.4306vw 20vw 8.5417vw;
    }


    /* -------------------------
        ロゴ
    ------------------------- */

    .footer__logo {
        margin-bottom: 4.5139vw;
        text-align: center;
    }

    .footer__logo img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        margin: 0 auto;
    }

    .footer__friends {
        position: absolute;
        top: -10.4167vw;
        left: calc(50% - 35.2778vw);
        width: 19.8611vw;
        height: 14.7917vw;
        pointer-events: none;
    }

    .footer__person {
        position: absolute;
        top: 0;
        right: 0;
        width: 9.3056vw;
        height: auto;
    }

    .footer__dog {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 9.1667vw;
        height: auto;
    }


    /* -------------------------
        メイン
    ------------------------- */

    .footer__contents {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .footer__left {
        width: 52.7778vw;
    }


    /* -------------------------
        メニュー
    ------------------------- */

    .footer__menus {
        display: grid;
        grid-template-columns: 15.2778vw 17.3611vw 17.3611vw;
        column-gap: 3.125vw;
    }

    .footer__menu-title {
        display: block;
        margin: 0 0 1.0417vw;
        color: var(--color-green);
        font-size: 1.6667vw;
        font-weight: 700;
        line-height: 3.3333vw;
        letter-spacing: 1.2px;
        text-decoration: none;
    }

    .footer__menu-title--orange {
        color: var(--color-orange);
    }

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

    .footer__menu li {
        margin-bottom: 0.625vw;
    }

    .footer__menu li a {
        position: relative;
        display: inline-block;
        padding-left: 0.6944vw;
        color: #000;
        font-size: 1.25vw;
        font-weight: 500;
        line-height: 2.5vw;
        letter-spacing: 0.9px;
        text-decoration: none;
    }

    .footer__menu li a::before {
        content: "-";
        position: absolute;
        top: 0;
        left: 0;
    }

    .footer__menu a {
        transition: opacity 0.3s;
    }

    .footer__menu a:hover {
        opacity: 0.65;
    }

    .footer__menu--single {
        display: flex;
        flex-direction: column;
        gap: 1.8056vw;
    }

    .footer__menu--single .footer__menu-title {
        margin: 0;
    }

    .footer__menu-sub {
        margin-top: 2.3611vw !important;
    }


    /* -------------------------
        法人情報
    ------------------------- */

    .footer__company {
        margin-top: 4.5139vw;
    }

    .footer__company-name {
        margin: 0 0 0.5556vw;
        font-size: 1.1806vw;
        font-weight: 700;
        line-height: 2.0833vw;
    }

    .footer__address {
        margin: 0;
        font-size: 1.1806vw;
        font-weight: 500;
        line-height: 2.0833vw;
    }


    /* -------------------------
        SNS
    ------------------------- */

    .footer__sns {
        display: flex;
        align-items: center;
        gap: 1.0417vw;
        margin-top: 1.6667vw;
    }

    .footer__sns-link {
        display: block;
        width: 2.1528vw;
        height: 2.1528vw;
    }

    .footer__sns-link img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


    /* -------------------------
        右カラム
    ------------------------- */

    .footer__right {
        width: 19.8611vw;
    }


    /* -------------------------
        見学申し込み
    ------------------------- */

    .footer__visit {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 12.3611vw;
        padding: 1.3889vw;
        color: #fff;
        background: var(--color-green);
        border-radius: 0.6944vw;
        text-align: center;
        text-decoration: none;
        transition: opacity 0.3s;
    }

    .footer__visit-title {
        margin-bottom: 0.6944vw;
        font-size: 1.6667vw;
        font-weight: 700;
        letter-spacing: 1.2px;
    }

    .footer__visit-time {
        margin-bottom: 0.9722vw;
        font-size: 1.25vw;
        font-weight: 700;
        letter-spacing: -0.9px;
    }

    .footer__visit-tel {
        font-family: Arial, sans-serif;
        font-size: 2.1528vw;
        font-weight: 700;
        line-height: 3.3333vw;
        white-space: nowrap;
    }

    .footer__visit-tel small {
        margin-right: 0.2778vw;
        font-size: 1.0417vw;
    }


    /* -------------------------
        ボタン
    ------------------------- */

    .footer__button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 5.5556vw;
        margin-top: 2.2222vw;
        padding: 0 1.1111vw 0 1.7361vw;
        color: #fff;
        background: var(--color-orange);
        border-radius: 0.6944vw;
        font-size: 1.5278vw;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-decoration: none;
        transition: opacity 0.3s;
    }
    .footer__button{
        position: relative;
    }
    .footer__button::after{
        content: "";
        position: absolute;
        top: 50%;
        right: 2.3611vw;
        width: 2.3611vw;
        height: 2.3611vw;
        background-image: url("../images/common/icon_arrow_right.svg");
        background-size: contain;
        background-repeat: no-repeat;
        transform: translateY(-50%);
    }

    .footer__button + .footer__button {
        margin-top: 1.5278vw;
    }

    .footer__visit:hover,
    .footer__button:hover {
        opacity: 0.8;
    }


    /* -------------------------
        下層ページ見出し部の波形背景（黄）
        複数の下層ページ（施設を探す 等）のヒーローで共通使用。
        ページ側は幅・高さ(Figma実測)のみ指定し、このクラスを併用する。
    ------------------------- */

    .c-wave-hero--yellow {
        background-image: url("../images/common/deco_hero_wave.svg");
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: 100% 32.8472vw;
        background-color: var(--color-cream);
    }


    /* -------------------------
        写真の下端を波形にトリミングする共通マスク
        （ひだまりについて 等のヒーロー写真で共通使用。
        今後、施設を探す_下層／研修のご案内／よくあるご質問／採用情報 等でも同じ形状を使う想定）
        ヒーロー側は矩形の写真をそのまま用意し、このクラスを併用するだけでよい。
        波の形状自体はコンテナ高さによらず一定（下端からの絶対距離で決まる）ため、
        mask-sizeの高さは固定値(4000px、どのページのヒーロー高さより十分大きい値)のまま、
        幅だけ100%でコンテナに追従させる。
        ※ヒーロー高さが4000pxを超える場合はSVGの高さとこの値を大きくすること。
    ------------------------- */

    .c-photo-wave-mask {
        -webkit-clip-path: url(#wave-clip);
        clip-path: url(#wave-clip);
    }


    /* -------------------------
        Copyright
    ------------------------- */

    .footer__copyright {
        position: absolute;
        right: 7.4306vw;
        bottom: 10.7639vw;
        margin: 0;
        font-size: 0.9722vw;
        font-weight: 600;
        letter-spacing: 2.1px;
    }


    /* -------------------------
        右上サイドナビ（全ページ共通）
    ------------------------- */

    .hero__side-nav {
        position: fixed;
        top: 18.0556vw;
        right: 0;
        z-index: 40;
        width: 6.25vw;
        height: 18.2639vw;
        background-image: url("../images/top/side_nav_bg.svg");
        background-size: 100% 100%;
        display: flex !important;
        flex-direction: column;
        gap: 0.9028vw;
    }

    .hero__side-nav-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3472vw;
        padding: 0.2083vw;
        color: #fff;
        font-size: 0.9028vw;
        font-weight: 700;
        line-height: 1.125;
        text-align: center;
        text-decoration: none;
    }

    .hero__side-nav-item:first-child {
        padding-top: 1.1806vw;
    }

    .hero__side-nav-item:last-child {
        padding-bottom: 1.0417vw;
    }

    .hero__side-nav-icon {
        width: auto;
        height: 2.0833vw;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .hero__side-nav-item:last-child .hero__side-nav-icon {
        height: 2.6389vw;
    }

    .hero__side-nav-text {
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .hero__side-nav-item:hover .hero__side-nav-text {
        transform: scale(1.1);
    }

    .hero__side-nav-item:hover .hero__side-nav-icon {
        transform: scale(1.1) translateY(2px);
    }


    /* -------------------------
        共通モーダル
    ------------------------- */

    .c-modal {
        display: flex;
        position: fixed;
        z-index: 100;
        inset: 0;
        align-items: center;
        justify-content: center;
        padding: 2.7778vw;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .c-modal.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.3s ease;
    }

    .c-modal__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .c-modal__panel {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 48.6111vw;
        max-height: 90vh;
        overflow-y: auto;
        background: #fff;
        border-radius: 1.7361vw;
        padding: 3.4722vw;
        text-align: center;
        transform: translateY(16px) scale(0.96);
        transition: transform 0.3s ease;
    }

    .c-modal.is-open .c-modal__panel {
        transform: translateY(0) scale(1);
    }

    .c-modal__close {
        position: absolute;
        top: 1.3889vw;
        right: 1.3889vw;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        transition: opacity 0.3s;
    }

    .c-modal__close:hover {
        opacity: 0.8;
    }

    .c-modal__close img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .c-modal__title {
        margin: 0 0 2.0833vw;
        color: var(--color-green);
        font-size: 1.6667vw;
        font-weight: 700;
    }
}