@charset "utf-8";

/* ========================================================================== 
   Responsive Styles
   ========================================================================== */

@media screen and (max-width: 980px) {
    html, body {
        overflow-x: hidden;
    }

        /* 共通コンテナの幅調整 */
    #page,
    #page .page,
    #header .header,
    #footer .footer {
        width: 95%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    #about .inbox {
        width: 95%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        padding: 20px 15px !important; /* 内側に余白を作って背景を見せる */
    }


        /* ヘッダーの調整 */
    #header .head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

    #header #logo {
        float: none;
        margin: 0;
        width: 60%;
    }

        #header #logo img {
        max-width: 100%;
        height: auto;
    }

    /* チェックボックスを隠す */
    .nav-unshown {
        display: none;
    }

    /* ハンバーガーボタンのスタイル */
    #menu-toggle {
        display: block;
        width: 40px;
        height: 40px;
        position: relative;
        cursor: pointer;
        z-index: 1001;
    }

    #menu-toggle span {
        display: block;
        position: absolute;
        width: 30px;
        height: 3px;
        left: 5px;
        background: #FF9326;
        transition: 0.3s;
    }

    #menu-toggle span:nth-child(1) { top: 10px; }
    #menu-toggle span:nth-child(2) { top: 19px; }
    #menu-toggle span:nth-child(3) { top: 28px; }

    /* チェックが入った時のボタンのアニメーション */
    #nav-toggle:checked ~ #header #menu-toggle span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    #nav-toggle:checked ~ #header #menu-toggle span:nth-child(2) {
        opacity: 0;
    }
    #nav-toggle:checked ~ #header #menu-toggle span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* メニューの全画面表示 */
    #flip2 {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        z-index: 1000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto;
    }

    /* チェックが入った時にメニューを表示 */
    #nav-toggle:checked ~ .topimg #flip2 {
        display: flex;
    }

    #flip2 li {
        width: 100%;
        border: none;
        text-align: center;
        margin: 10px 0;
    }

        #flip2 li a {
            font-size: 20px;
            font-weight: bold;
            color: #000;
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        #flip2 li.menu-tel {
            display: none !important;
        }

        #flip2 li.sp-only {
            display: block !important;
        }

        #flip2 ul {
        display: none !important; /* 子メニューは一旦非表示（シンプルにするため） */
    }

    body.menu-open {
        overflow: hidden;
    }

    #header #tel {
        display: none; /* スマホではヘッダーの電話番号は一旦非表示（メニュー等で対応） */
    }

        /* メインレイアウトの縦並び化 */
    #sub {
        display: none;
    }

    #contents,
    #about .about_left,
    #about .about_right,
    #about .about_left2 {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
        box-sizing: border-box;
    }

        /* スマホ用電話番号バー（スライドショーの上） */
    .sp-tel {
        display: block !important;
        width: 100%;
        background: #FF9326;
        text-align: center;
        padding: 12px 0;
    }

    .sp-tel a {
        color: #fff;
        font-size: 24px;
        font-weight: bold;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sp-tel img {
        width: 22px;
        height: auto;
        margin-right: 8px;
        filter: brightness(0) invert(1); /* アイコンを白くする */
    }

    /* トップ画像スライドショーの高さ調整 */
    .photo-show {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 950 / 300;
    }

    .photo-show img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* メニューの調整 */
    #navi {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
    }

    #navi .trigger,
    .details summary {
        width: 100% !important;
        background-position: center center !important;
        background-size: contain !important;
        border-bottom: none !important;
    }

        #navi ul.naka {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* YouTube等の埋め込み */
    iframe,
    .map iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    /* 特徴セクション */
    #feature .img_left img {
        float: none;
        display: block;
        margin: 0 auto 10px;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

        /* 店舗情報セクション */
        #about .about_left table {
            width: 100% !important; /* 基本は幅いっぱい */
            max-width: 450px !important; /* PC版のサイズ(450px)を上限とする */
            margin: 15px auto !important; /* 中央寄せ */
            font-size: 12px;
            display: table !important;
            table-layout: auto;
            white-space: normal;
            border-collapse: collapse;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }



        #about .about_left table th,
        #about .about_left table td {
            padding: 4px 2px !important; /* 余白を狭くして収める */
            text-align: center;
        }

        #about .about_left table th.time {
            width: auto !important; /* common.cssの170pxを解除 */
            white-space: nowrap; /* 時間は改行させない */
            padding: 4px 5px !important;
        }



    #about .about_left table th.time {
        width: auto;
        font-size: 12px;
    }

        #about .about_left p.tel {
        font-size: 30px;
        padding-left: 1.2em;
        background-size: 1em auto;
        background-position: left center;
    }

    /* 企業の取り組み（SDGs画像）の横並び維持 */
    #feature .centerbox {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 10px;
    }

    #feature .centerbox a {
        flex: 1;
        max-width: 48%;
    }

    #feature .centerbox img {
        width: 100% !important;
        height: auto !important;
    }

        /* 院内写真スライダーの調整 */
        #office_ph,
        .container {

        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 20px auto !important;
    }

    .slider, .thumbnail {
        width: 100% !important;
    }

    .slider img,
    .thumbnail img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    .thumbnail {
        margin-top: 10px !important;
    }

    /* 全体画像の縮小 */
    img,
    table {
        max-width: 100% !important;
        height: auto !important;
    }

    /* フッター */
    #footer .footer .data,
    #footer .foot_right,
    #footer .footer ul {
        float: none;
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    #footer .footer ul li {
        float: none;
        display: inline-block;
        margin: 5px 10px;
    }

    #footer .footer ul li:after {
        content: "";
    }

    /* 文字サイズ調整 */
    .title,
    h2,
    h6,
    p {
        word-break: break-word;
    }
}

@media screen and (max-width: 480px) {
    #header #tel dl dd.tel {
        font-size: 28px;
    }

    #about .about_left .title {
        font-size: 24px;
    }

    #pr ul li {
        font-size: 14px;
        line-height: 1.7;
    }

    .title {
        font-size: 20px;
    }

    .about_left p,
    .about_right p,
    .add,
    .tel,
    .kyusin {
        font-size: 14px;
        line-height: 1.6;
    }
}