@charset "UTF-8";
/* =========================================================
   responsive.css  相楽福祉会 レスポンシブ対応（SP: max-width 943px）
   既存 style.css への上書きレイヤー。PC表示(944px以上)は変更しない。
   ========================================================= */

/* ---- SP専用要素はPCでは常に非表示 ---- */
.sp-menu-btn,
.sp-nav,
.sp-nav-overlay,
.sp-hero {
    display: none;
}

/* SP専用から共通処理へ: Updated in 20260701 */
#footer .footeraddress h3 img {
    max-width: 251px;
}

/* 一部下層ページでクラス名が変更されていてPC時レイアウトが崩れていたのを補正: Updated in 20260701 */
.wrap.wrap--page .wrap-inner {
    display: grid;
    grid-template-columns: 1fr 626px;
    width: 943px;
    margin: 10px auto 0;
}

/* h3titleで別クラス名になっているものにも対応: Updated in 20260701 */
.wrap.wrap--page main.main h3.h3title {
    color: #0784e4;
    font-size: 28px;
    font-size: 22px;
    margin-top: 20px;
    padding-top: 10px;
    border-bottom: solid 3px #2f68b2;
    font-family: "ＭＳ 明朝", serif;
}

/* 別クラス名によるPC版目次のデザイン誤差を吸収: Updated in 20260701 */
.wrap.wrap--page .aside .h2side {
    margin-top: 20px;
    font-size: 22px;
    font-family: "ＭＳ 明朝", serif;
}
.wrap.wrap--page .aside ul {
    margin: 18px 0;
}
.wrap.wrap--page .aside li {
    margin-left: 10px;
    padding: 10px 0 0 20px;
    border-bottom: dotted 1px #e4e4e4;
    background: url(/wp-content/themes/souraku/images/icon2.png) no-repeat 8px 17px;
}
.wrap.wrap--page .aside a {
    color: #000;
    font-size: 14.56px;
}

/* お問い合わせページのフォームページへのリンク方式を復元: Updated in 20260701 */
.page-access .toiawase a {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* お問い合わせページのiPhone限定位置バグ修正: Updated in 20260701 */
_::-webkit-full-page-media, _:future, :root .page-access .h5renraku {
    background-position: 0 8px;
}

/* フォームページの画像解像度を上げたので対応: Updated in 20260701 */
.contact input.img {
    border: 0;
    background-size: cover;
    cursor: pointer;
}

/* =========================================================
   SP  （max-width: 943px）
   ========================================================= */
@media screen and (max-width: 943px) {

    /* ---- 基本 ---- */
    * ,
    *:before ,
    *:after {
        box-sizing: border-box;
    }
    img {
        width: fit-content; /* Updated in 20260701 */
        max-width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    body {
        min-width: 0;
        padding-top: 58px; /* 固定ヘッダー分 */
    }
    /* Updated in 20260701 */
    picture {
        display: block;
    }
    html {
        scroll-padding-top: 60px;
    }

    /* =====================================================
       ヘッダー（固定バー：ロゴ＋ハンバーガー）
       ===================================================== */
    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 58px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
        z-index: 1000;
    }
    #header .headerinner {
        width: 100%;
        height: 58px;
        margin: 0;
        /*
        ハンバーガーメニューのボタンの位置を調整: Updated in 20260701
        display: flex;
        */
        align-items: flex-end;
        justify-content: space-between;
        padding: 0 4% 10px;
        /* ここから追加: Updated in 20260701 */
        display: grid;
        grid-template-columns: repeat(2, max-content);
    }
    #header h1 {
        float: none;
        margin: 0;
        line-height: 0;
    }
    #header h1 img {
        height: 34px;
        width: auto;
    }
    /* PCグローバルナビ（画像）は非表示 */
    #header .gnav {
        display: none;
    }

    /* ---- ハンバーガーボタン ---- */
    .sp-menu-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end; /* Updated in 20260701 */
        gap: 4px;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    /* Updated in 20260701 */
    .sp-menu-btn__bars {
        display: grid;
        row-gap: 6px;
        width: 26px;
        height: 26px;
        position: relative;
    }
    .sp-menu-btn__bars span {
        display: block;
        /*
        position: absolute;
        left: 0;
        */
        width: 100%;
        height: 3px;
        border-radius: 3px;
        background: #043991;
        transition: transform .25s, opacity .25s;
    }
    /*
    .sp-menu-btn__bars span:nth-child(1) { top: 0; }
    .sp-menu-btn__bars span:nth-child(2) { top: 7px; }
    .sp-menu-btn__bars span:nth-child(3) { top: 14px; }
    */
    .sp-menu-btn__label {
        font-size: 10px;
        line-height: 0.75;
        letter-spacing: .05em;
        /* Updated in 20260701 */
        color: #000;
        font-weight: 700;
    }

    /* =====================================================
       SPナビ（ハンバーガー展開オーバーレイ）
       ===================================================== */
    .sp-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s, visibility .3s;
        z-index: 1001;
    }
    .sp-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: rgba(255, 255, 255, .96);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity .3s, visibility .3s, transform .3s;
        z-index: 1002;
    }
    body.is_menu-open {
        overflow: hidden;
    }
    body.is_menu-open .sp-nav,
    body.is_menu-open .sp-nav-overlay {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    /* 開いている時：ハンバーガーを×に */
    body.is_menu-open .sp-menu-btn__bars span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    body.is_menu-open .sp-menu-btn__bars span:nth-child(2) {
        opacity: 0;
    }
    body.is_menu-open .sp-menu-btn__bars span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .sp-nav__inner {
        padding: 20px 6% 60px;
        max-width: 560px;
        margin: 0 auto;
    }
    .sp-nav__head {
        position: relative;
        text-align: center;
        padding-top: 6px; /* Updated in 20260701 */
    }
    .sp-nav__title {
        font-size: 17px;
        font-weight: bold;
        color: #043991;
        letter-spacing: .1em;
    }
    .sp-nav__close {
        position: absolute;
        top: -2px;
        right: 0;
        width: 34px;
        height: 34px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .sp-nav__close span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 26px;
        height: 2px;
        background: #043991; /* Updated in 20260701 */
    }
    .sp-nav__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
    .sp-nav__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

    /* Updated in 20260701 */
    .sp-nav__list {
        margin: 18px 0 25px;
        padding: 25px 0;
        border: 0 #043991 solid;
        border-width: 2px 0;
    }
    .sp-nav__list li {
        margin-bottom: 12px;
    }
    /* 最後の要素にはマージン付けない: Updated in 20260701 */
    .sp-nav__list li:last-of-type {
        margin-bottom: 0;
    }
    .sp-nav__list a {
        display: block;
        text-align: center;
        padding: 15px 10px;
        border: 1px solid #cdd7e4;
        /*border-radius: 6px;*/ /* Updated in 20260701 */
        background: #fff;
        color: #1c3f70;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    }
    .sp-nav__mail {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 15px 10px;
        margin-bottom: 20px;
        border-radius: 6px;
        background: #eaf1fb;
        border: 1px solid #cdd7e4;
        color: #1c3f70;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
    }
    .sp-nav__mail-icon {
        font-size: 18px;
    }
    .sp-nav__banners p {
        margin-bottom: 12px;
        text-align: center;
    }
    .sp-nav__banners img {
        width: 100%;
        max-width: 320px;
    }

    /* =====================================================
       TOP  #headermain  （ヒーロー＋バナー）
       ===================================================== */
    #headermain {
        /* ヒーローが埋もれていたので位置調整: Updated in 20260701 */
        margin-top: 58px;
        background: none;
    }
    #headermain .headermaininner {
        width: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    /* PCの一枚絵ヒーローはSPで非表示 */
    /*
    不要: Updated in 20260701
    #headermain .headermainimg {
        display: none;
    }
    */
    /* SPヒーロー本体 */
    .sp-hero {
        display: block;
        order: 1;
        padding: 30px 6% 34px;
        text-align: center;
        background: linear-gradient(180deg, #9ccbeb 0%, #bfe0f5 45%, #e4f3fc 100%);
    }
    .sp-hero__ttl {
        line-height: 1.2;
        color: #2b3a4d;
    }
    .sp-hero__sub {
        display: block;
        font-size: 15px;
        letter-spacing: .18em;
        margin-bottom: 6px;
    }
    .sp-hero__main {
        display: block;
        font-size: 34px;
        font-weight: bold;
        letter-spacing: .12em;
    }
    .sp-hero__lead {
        margin: 16px auto 26px;
        max-width: 30em;
        font-size: 13px;
        line-height: 1.9;
        color: #40505f;
        text-align: left;
    }
    /* 3つの丸ボタン（三角配置＋接続線） */
    .sp-hero__circles {
        position: relative;
        width: 300px;
        max-width: 86%;
        height: 250px;
        margin: 0 auto;
        letter-spacing: 0.1em; /* Updated in 20260701 */
    }
    /* 接続線 */
    /*
    Removed: Updated in 20260701
    .sp-hero__circles:before {
        content: "";
        position: absolute;
        top: 47px;
        left: 47px;
        right: 47px;
        height: 2px;
        background: rgba(255, 255, 255, .85);
    }
    */
    .sp-hero__circle {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 110px; /* Updated in 20260701 */
        height: 110px; /* Updated in 20260701 */
        border-radius: 50%;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        line-height: 1.35;
        box-shadow: 0 3px 8px rgba(0, 0, 0, .18);
        z-index: 1;
    }
    .sp-hero__circle span {
        display: block;
    }
    .sp-hero__circle--soudan {
        top: 0;
        left: 0;
        background: radial-gradient(circle at 35% 30%, #f4a944, #e5811a);
    }
    .sp-hero__circle--kyotaku {
        top: 0;
        right: 0;
        background: radial-gradient(circle at 35% 30%, #6bb0dd, #3f8fc9);
    }
    .sp-hero__circle--nicchu {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: radial-gradient(circle at 35% 30%, #58c6d8, #33a9c1);
    }
    /* 斜めの接続線（相談→日中 / 居宅→日中） */
    /*
    Removed: Updated in 20260701
    .sp-hero__circle--nicchu:before,
    .sp-hero__circle--nicchu:after {
        content: "";
        position: absolute;
        top: -60px;
        left: 50%;
        width: 2px;
        height: 120px;
        background: rgba(255, 255, 255, .85);
        transform-origin: bottom center;
        z-index: -1;
    }
    .sp-hero__circle--nicchu:before {
        transform: translateX(-50%) rotate(52deg);
    }
    .sp-hero__circle--nicchu:after {
        transform: translateX(-50%) rotate(-52deg);
    }
    */

    /* グレー背景（下罫）追加: Updated in 20260701 */
    #headermain .headermainimg {
        border-bottom: 70px #ece9e8 solid;
    }

    /* ---- TOPバナー（法人概要/施設紹介/販売商品情報） ---- */
    #headermain .headermainside {
        float: none;
        order: 2;
        /* Updated in 20260701 */
        padding: 60px 6% 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    #headermain .phoujin {
        margin: 0 !important;
        text-align: center;
    }
    #headermain .phoujin img {
        width: 100%;
        max-width: fit-content; /* Updated in 20260701 */
    }

    /* =====================================================
       TOP  #contena  （本文＋サイド → 1カラム）
       ===================================================== */
    /* 一部下層ページでクラス名が変更されていてSP時に適用されないページへも適用: Updated in 20260701 */
    .wrap.wrap--page .wrap-inner {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, max-content);
        width: 100%;
        padding: 0 6%;
    }
    .wrap.wrap--page .wrap-inner .aside {
        order: 2;
        margin-top: 34px;
        padding-top: 24px;
        border-top: 2px solid #e0e6ef;
    }

    #contena {
        /* Updated in 20260701 */
        margin-top: 40px;
    }
    #contena .contenainner {
        width: 100%;
        margin: 0;
        padding: 0 6%;
    }
    #contena .main {
        width: 100%;
        float: none;
    }
    /* 「相楽福祉会って？」ブロック（PCは背景画像固定） */
    #contena .main .souraku {
        width: 100%;
        height: auto;
        background: none;
        text-align: center;
        /* Updated in 20260701 */
        padding: 40px 0;
        position: relative;
    }
    /* 背景画像を追加: Updated in 20260701 */
    #contena .main .souraku::before {
        display: block;
        position: absolute;
        content: "";
        width: calc(100% + 100vw * 0.12);
        height: 100%;
        left: calc(100vw * -0.06);
        top: 0;
        background-image: url(/wp-content/themes/souraku/images/bg_home_what-is-sourakufukushikai.jpg);
        background-size: contain;
        background-position: right bottom;
        background-repeat: no-repeat;
    }
    #contena .main .souraku .h2whatsouraku {
        padding-top: 0;
        /* Updated in 20260701 */
        position: relative;
    }
    /* 元の画像サイズより大きくなるのを禁止: Updated in 20260701 */
    #contena .main .souraku .h2whatsouraku img {
        width: 100%;
        max-width: fit-content;
        height: auto;
    }
    #contena .main .souraku .pkyouto {
        margin: 16px 0 0;
        font-size: 14px;
        text-align: left;
        /* Updated in 20260701 */
        position: relative;
    }
    /* お知らせ見出し（横長画像を縮小して左に配置＋一覧へは右） */
    /* 横幅が足りない場合の下線を補う: Updated in 20260701 */
    #contena .main .h2osirase {
        background: revert;
        display: grid;
        align-items: center;
        position: relative;
        width: 100%;
        height: auto;
        max-height: 92px;
        aspect-ratio: 750/184;
        padding-top: 0;
        background-position: center bottom, center bottom;
        background-size: contain, contain;
        background-clip: padding-box, padding-box;
        background-repeat: no-repeat, no-repeat;
        background-image: url(/wp-content/themes/souraku/images/h2osirase_sp.png), linear-gradient(0deg, #c4d3ed00 19%, #c4d3edff 19%, #c4d3edff 24%, #c4d3ed00 24%);
    }
    #contena .main .osirasebox p {
        font-size: 14px;
        line-height: 1.7;
        padding: 12px 4px 12px 24px;
        /* SP時は2行: Updated in 20260701 */
        display: grid;
        row-gap: 10px;
    }
    /* 一覧リンクの位置修正: Updated in 20260701 */
    #contena .main .h2osirase .itiran {
        display: none;
    }
    /* 一覧リンクの位置修正: Updated in 20260701 */
    #contena .main .osirasebox .itiran_sp {
        display: grid !important;
        justify-content: center;
        align-items: center;
        padding: 50px 0 80px;
    }
    .itiran_sp a {
        display: block;
        width: max-content;
        padding: 20px 70px;
        background-color: #2f68b2;
        color: #fff;
        text-align: center;
        line-height: 1;
    }

    /* TOPサイドバナー */
    #contena .side {
        float: none;
        margin-top: 26px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    #contena .side .pside {
        margin: 0;
        text-align: center;
    }
    #contena .side .pside img {
        width: 100%;
        max-width: fit-content; /* Updated in 20260701 */
    }

    /* =====================================================
       下層ページ共通  #contenas  （サイド＋本文 → 1カラム）
       本文を上、ローカルナビ／バナーを下に
       ===================================================== */
    #contenas {
        /* ヒーローが埋もれていたので位置調整: Updated in 20260701 */
        margin-top: 58px;
    }
    #contenas .contenainner {
        width: 100%;
        margin: 0;
        padding: 0 6%;
        display: flex;
        flex-direction: column;
    }
    #contenas .maina {
        float: none;
        width: 100%;
        order: 1;
    }
    #contenas .sidea {
        float: none;
        width: 100%;
        order: 2;
        margin-top: 34px;
        padding-top: 24px;
        border-top: 2px solid #e0e6ef;
    }
    /*
    目次は削除: Updated in 20260701
    #contenas .sidea .h2side {
        margin-top: 0;
        font-size: 20px;
    }
    #contenas .sidea ul {
        margin: 14px 0;
    }
    #contenas .sidea li {
        font-size: 14px;
    }
    */
    #contenas .sidea .pside {
        text-align: center;
    }
    #contenas .sidea .pside img {
        width: 100%;
        max-width: 320px;
    }
    /* バナー群の別クラス名に対応: Updated in 20260701 */
    .wrap.wrap--page .aside .pside {
        text-align: center;
        margin-bottom: 10px;
    }
    .wrap.wrap--page .aside .pside:last-of-type {
        margin-bottom: 0;
    }
    /* 目次削除: Updated in 20260701 */
    #contenas .sidea .h2side,
    #contenas .sidea .h2side+ul:not([class]),
    .wrap.wrap--page .wrap-inner .aside .h2side,
    .wrap.wrap--page .wrap-inner .aside .h2side+ul:not([class]) {
        display: none;
    }

    /* パンくず */
    .wrap.wrap--page .main .pankuzu,
    #contenas .maina .pankuzu {
        font-size: 12px;
        word-break: break-all;
        margin-top: 12px; /* PC時と同様の上部マージン追加: Updated in 20260701 */
    }
    /* 別クラスでのブレッドクラム・h2title間のマージンを共通化: Updated in 20260701 */
    .wrap.wrap--page .main .pankuzu::after {
        display: block;
        content: "";
        height: 2.5rem;
        margin-bottom: 10px;
    }
    /* 見出し類 */
    #contenas .maina .h2title img {
        max-width: 100%;
        height: auto;
    }
    /* 別クラス名にも対応: Updated in 20260701 */
    .wrap.wrap--page .main .h3title,
    #contenas .maina .h3title {
        font-size: 22px;
    }
    #contenas .maina .ptext,
    #contenas .maina .ptext2 {
        font-size: 14px;
    }
    /* 本文内の画像・表を流動化 */
    #contenas .maina img {
        max-width: 100%;
        height: auto;
    }
    #contenas .maina table {
        width: 100% !important;
        max-width: 100%;
    }

    /* =====================================================
       各下層ページ個別
       ===================================================== */

    /* --- お知らせ news --- */
    .news .newsbox {
        margin-left: 0;
    }
    .news .osirase {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    /* clearfixがflex.space-betweenの処理を邪魔していたので削除: Updated in 20260701 */
    .news .osirase.clearfix::after {
        content: none;
    }
    .news .pnews {
        float: none;
        font-size: 14px;
        padding: 10px 0 10px 24px;
    }
    .news .kuwasiku {
        float: none;
        flex: 0 0 auto;
    }

    /* フォームページの画像解像度を上げたので対応: Updated in 20260701 */
    .news .kuwasiku a img {
        max-width: 108px;
    }

    .news .wp-pagenavi,
    .news .pagenation {
        width: 100%;
    }
    .news .h3titlen {
        margin-left: 0;
        font-size: 18px;
        /*
        post_title が複数行になった場合に対応: Updated in 20260701
        background-position: 0 30px;
        */
        background-position: left calc(100% - 10px);
    }

    /* --- お知らせ single --- */
    /* 戻るボタンの画像解像度を上げたので対応: Updated in 20260701 */
    body.single #contenas .maina .pitiran img {
        max-width: 108px;
    }

    /* --- 法人概要 outline --- */
    /* 最初の.h2title直下にマージン追加: Updated in 20260701 */
    .wrap.wrap--page.outline .main .h2title:first-of-type {
        margin-bottom: 30px;
    }
    .outline .seikatubox {
        display: block;
    }
    .outline .seikatu1,
    .outline .seikatu2 {
        float: none;
        margin: 0 0 14px;
        text-align: center;
    }
    .outline .txtBlock01 .left,
    .outline .txtBlock01 .right {
        float: none;
        width: 100%;
    }
    .outline .txtBlock01 .right {
        margin-top: 12px;
    }
    .outline table {
        width: 100% !important;
    }
    /* アンダーラインの複数行に対応: Updated in 20260701 */
    .outline .h4roudou {
        height: auto;
        background-position: 0 calc(100% - 4px);
    }

    /* --- 施設紹介 shisetsu --- */
    .page-shisetsu .gaikan {
        display: flex;
        flex-wrap: wrap;
        gap: 2%;
        /* 上部マージンが効いているのでSP版だと下部マージンは過剰: Updated in 20260701 */
        margin-bottom: 0;
    }
    /* 画像の横並びに対応: Updated in 20260701 */
    .page-shisetsu .gaikan ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        width: 100%;
    }
    .page-shisetsu .gaikan li {
        float: none;
        display: block;
        margin: 0;
    }

    .page-shisetsu .gaikanimg1,
    .page-shisetsu .gaikanimg2,
    .page-shisetsu .gaikanimg3,
    .page-shisetsu .gaikanimg4 {
        float: none;
    }
    .page-shisetsu .gaikan img {
        display: block; /* 追加: Updated in 20260701 */
        width: 100%;
    }
    .page-shisetsu .h4jigyou {
        margin-left: 0;
        font-size: 18px;
        height: auto;
        background-position: 0 34px;
    }
    .page-shisetsu .pgaikantext {
        text-align: left;
    }

    /* --- 販売商品情報 page AND single --- */
    /* 戻るボタンの画像解像度を上げたので対応: Updated in 20260701 */
    #contenas .maina .itiran a img {
        max-width: 188px;
    }

    /* --- 販売商品 products --- */
    .products .syouhinbanner {
        display: flex;
        flex-wrap: wrap;
        gap: 3%;
    }
    .products .bnleft,
    .products .bnright,
    .products .syouhinleft,
    .products .syouhinright {
        float: none;
    }
    .products .bnleft,
    .products .bnright {
        width: 48.5%;
    }
    .products .syouhin {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }
    .products .syouhinleft {
        flex: 0 0 40%;
        max-width: 40%;
    }
    .products .syouhinright {
        flex: 1 1 auto;
    }
    .products .tablehanbai {
        margin-left: 0;
    }
    .products .tablehanbai th,
    .products .tablehanbai td {
        width: auto;
    }
    .products .h4syouhin {
        margin-left: 0;
        font-size: 18px;
        background-position: 0 30px;
    }
    .products .wp-pagenavi {
        width: 100%;
    }

    /* --- アクセス access --- */
    .page-access .toiawase {
        width: 100%;
        height: auto;
        /* PCの表示方式から切替: Updated in 20260701 */
        /*
        background-size: cover;
        padding: 14px;
        */
        background: none;
    }
    /* PCの表示方式から切替: Updated in 20260701 */
    .page-access .toiawase a {
        padding: 0;
    }
    .page-access .imgleft,
    .page-access .imgright {
        float: none;
        max-height: none;
        text-align: center;
        margin-bottom: 12px;
    }
    .page-access .h4access,
    .page-access .h4accessa {
        height: auto;
        font-size: 18px;
        background-position: 0 34px;
    }

    /* --- お問い合わせ contact --- */
    .contact .tablecontact {
        width: 100%;
    }
    .contact .tablecontact th,
    .contact .tablecontact td {
        display: block;
        width: 100%;
        height: auto; /* 追加: Updated in 20260701 */
        box-sizing: border-box;
    }
    .contact input.img {
        max-width: 100%;
    }
    .contact .h4contact {
        height: auto;
        font-size: 18px;
        background-position: 0 34px;
    }

    /* =====================================================
       フッター
       ===================================================== */
    #footer {
        margin-top: 40px;
        /* Updated in 20260701 */
        padding-bottom: 0;
    }
    /* Updated in 20260701 */
    #footer .footerinner {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, max-content);
        width: 100%;
        padding: 20px 6%;
    }
    #footer .footernav {
        float: none;
        border-left: 0;
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        /* Updated in 20260701 */
        grid-row: 2/3;
    }
    #footer .footernav ul.fnav {
        float: none;
        width: 100%;
        padding-right: 0;
    }
    #footer .footernav li {
        font-size: 14px;
        padding-bottom: 10px;
        background-position: 10px 0.5em; /* Updated in 20260701 */
    }
    #footer .footeraddress {
        float: none;
        /* Updated in 20260701 */
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px #fff solid;
    }
    #footer .paddress {
        font-size: 14px;
        /* Updated in 20260701 */
        line-height: 2.12;
        margin-top: 10px;
    }
    .copy {
        font-size: 11px;
        padding: 0 4%;
        line-height: 1.6;
        /* Updated in 20260701 */
        display: flex;
        flex-flow: row wrap;
        gap: 0 0.5em;
        justify-content: center;
        align-items: center;
    }

    /* ページトップボタン */
    .pagetop {
        /* Updated in 20260701 */
        bottom: 90px;
        right: 16px;
    }
    /* Updated in 20260701 */
    .pagetop a {
        display: grid !important;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
        padding: 0 !important;
        border: 2px #fff solid;
        border-radius: 50%;
        background-color: #2f68b2;
    }
    /* Updated in 20260701 */
    .pagetop img {
        width: 20px;
        height: auto;
    }
}

/* =========================================================
   狭幅スマホ  （max-width: 480px）微調整
   ========================================================= */
@media screen and (max-width: 480px) {
    .sp-hero__main {
        font-size: 28px;
    }
    .sp-hero__circles {
        height: 230px;
    }
    .sp-hero__circle {
        width: 100px; /* Updated in 20260701 */
        height: 100px; /* Updated in 20260701 */
        font-size: 12.5px;
    }
    .products .syouhinleft {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    .page-shisetsu .gaikan li {
        width: 100%;
    }

    /* ヒーロー部分の三角形の修正: Updated in 20260701 */
    .sp-hero__circles svg {
        left: 50px;
        top: 50px;
        width: calc(100% - 100px);
        height: calc(100% - 100px);
    }
}

/* =========================================================
   下層コンテンツ
   Updated in 20260701
   ========================================================= */
/* 固定ヘッダぶんの余白追加 */
@media screen and (max-width: 943px) {
    .wrap.wrap--page {
        margin-top: 58px;
    }
}

/* 文字が横に溢れないよう改行 */
#contenas .maina {
    word-break: break-all;
}

/* ブロック要素の最大横幅を指定 */
#contenas .maina section,
#contenas .maina article,
#contenas .maina main,
#contenas .maina aside,
#contenas .maina nav,
#contenas .maina header,
#contenas .maina footer,
#contenas .maina hgroup,
#contenas .maina h1,
#contenas .maina h2,
#contenas .maina h3,
#contenas .maina h4,
#contenas .maina h5,
#contenas .maina h6,
#contenas .maina ul,
#contenas .maina dl,
#contenas .maina ol,
#contenas .maina picture,
#contenas .maina img,
#contenas .maina iframe,
#contenas .maina form,
#contenas .maina table {
    max-width: 100%;
}