/* ==========================================================================
   スマートイクス サラウェル カタログページ用 CSS (整理版)
   ==========================================================================
   各コンポーネント（セクション）ごとに共通スタイル、PC用調整、SP用調整を
   グループ化して配置し、コードの保守性と更新のしやすさを向上させています。
   ========================================================================== */

/* =========================================
   1. 基本レイアウト & グローバル
   ========================================= */

/* グリッドレイアウト構成（SP: 縦1列）*/
.tk-l-layout {
    position: relative;
    display: grid;
    grid-template-areas: "header" "navigation" "content" "footer";
    grid-template-rows: 1fr;
}

/* ヘッダーエリア */
.tk-l-layout-header {
    position: relative;
    z-index: 9999;
    grid-area: header;
}

/* ナビゲーションエリア */
.tk-l-layout-navigation {
    position: sticky;
    top: 0;
    z-index: 9999;
    grid-area: navigation;
}

/* メインコンテンツエリア */
.tk-l-layout-content {
    grid-area: content;
    min-width: 0;
}
.tk-l-layout-content,
.tk-l-layout-content h1,
.tk-l-layout-content h2,
.tk-l-layout-content h3,
.tk-l-layout-content h4,
.tk-l-layout-content h5,
.tk-l-layout-content h6,
.tk-l-layout-content p,
.tk-l-layout-content span,
.tk-l-layout-content a,
.tk-l-layout-content li,
.tk-l-layout-content dt,
.tk-l-layout-content dd,
.tk-l-layout-content th,
.tk-l-layout-content td {
    color: #000000 !important;
}

/* フッターエリア */
.tk-l-layout-footer {
    grid-area: footer;
}

/* PC固有レイアウト（768px以上） */

/* =========================================
   2. 共通画像スタイル & GSAP対応
   ========================================= */

/* 記事画像の上マージン */
.tk-c-article-image {
    margin-top: 40px !important;
}

@media screen and (max-width: 767px) {
    .tk-c-article-image {
        margin-top: 35px !important;
    }

    .point .tk-c-article-image {
        margin-top: 30pxt;
    }
}

/* GSAPフェードイン要素の強制表示（ローカルプレビュー用） */
/*
.tk-js-fade-element {
    visibility: visible !important;
    opacity: 1 !important;
}
.tk-js-fade-element picture,
.tk-js-fade-element img,
.tk-js-fade-element svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.tk-c-article-image picture {
    display: block !important;
}
*/

/* フェードイン要素の初期非表示（リロード時のチラつき防止） */
.tk-js-fade-element,
.tk-js-auto-fade {
    opacity: 0;
    transform: translateY(30px);
}

/* ローカルプレビュー用: ボタンなどの表示補正 */
.tk-c-btn {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-width: 144px !important;
    min-height: 43px !important;
    padding: 15px 5px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 180% !important;
    color: inherit !important;
    text-decoration: none !important;
    opacity: 1 !important;
    transform: translate(0) !important;
}
.tk-c-btn::after {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    content: "" !important;
    background-color: #0f172a !important;
    transform: translate(0) scale(1) !important;
}
.tk-c-btn.tk-is-l {
    width: 100% !important;
    max-width: 336px !important;
}
.tk-c-btn.tk-is-m {
    width: 100% !important;
    max-width: 216px !important;
}
.tk-c-btn.tk-is-s {
    width: 100% !important;
    max-width: 168px !important;
}
.tk-c-btn-text {
    display: inline !important;
}
.tk-c-btn-arrow {
    display: block !important;
    flex-shrink: 0 !important;
    width: 23px !important;
    height: 6px !important;
}
.tk-c-btn-arrow svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* 共通フレックスクラス */
.tk-c-flex {
    display: flex !important;
    flex-wrap: wrap;
}
.tk-c-flex.tk-is-justify-center {
    justify-content: center !important;
}

/* セクションインナー */
.tk-c-ContentSection-inner {
    box-sizing: border-box;
    max-width: 1200px;
    padding: 80px 32px;
    margin: 0 auto;
}
.tk-c-ContentSection-inner.tk-is-pt-0 {
    padding-top: 0 !important;
}
.tk-c-ContentSection-inner.tk-is-no-gutter {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.tk-c-ContentSection-inner.tk-is-pc-pb-xxxxl {
    padding-bottom: 160px;
}
.tk-c-ContentSection-inner.tk-is-sp-pb-xxxl {
    padding-bottom: 128px;
}

/* グリッドコラム */
.tk-c-columns {
    display: grid;
}
.tk-c-columns.tk-is-gap-xl {
    grid-gap: 52px;
}

/* PC用画像サイズ調整 */

/* SP用画像サイズ調整 */

/* PC用 .w1120 横幅指定 */

@media screen and (max-width: 767px) {
    .ffp_sp {
        font-feature-settings: "palt" !important;
        letter-spacing: -0.01em !important;
    }
}
/* =========================================
   3. フッター
   ========================================= */

/* .tk-l-footer {
    display: grid;
    grid-template-areas:
        "top"
        "brand"
        "content";
    grid-template-columns: 1fr;
}
.tk-l-footer-top {
    display: flex;
    grid-area: top;
    justify-content: flex-end;
    width: 100%;
    margin: 0 auto;
}
.tk-l-footer-brand {
    display: flex;
    grid-area: brand;
    align-items: center;
    justify-content: center;
    height: 140px;
    background-color: #44444d;
}
.tk-l-footer-logo {
    display: block;
    width: 85px;
}
.tk-l-footer-logo path {
    fill: #fff;
    transition: fill 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) {
    .tk-l-footer-logo:hover path {
        fill: #94a3b8;
    }
}
.tk-l-footer-content {
    display: grid;
    grid-area: content;
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 26px 20px;
    color: #99999c;
    background-color: #595965;
}
.tk-l-footer-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    align-items: center;
}
.tk-l-footer-link {
    font-size: 12px;
    color: inherit;
    text-decoration: none;
    transition: color 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) {
    .tk-l-footer-link:hover {
        color: #fff;
    }
}
.tk-l-footer-divider {
    font-size: 12px;
    color: #99999c;
}
.tk-l-footer-copyright {
    font-family: "Public Sans", sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 200%;
}
.tk-l-footer-backtop {
    z-index: 10;
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 43px;
    padding: 0;
    font-family: "Public Sans", sans-serif;
    font-size: 13px;
    line-height: 120%;
    color: #595965;
    outline: 0;
    background-color: transparent;
    border-top: 1px solid #595965;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    transition: background-color 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.tk-l-footer-backtop svg {
    transition: transform 0.3s ease;
}
@media (hover: hover) {
    .tk-l-footer-backtop:hover {
        cursor: pointer;
        background-color: #e2e8f0;
    }
    .tk-l-footer-backtop:hover svg {
        transform: translateY(-5px);
    }
} */

/* フッターPC用レイアウト */

/* =========================================
   4. メインビジュアル (KV) とアニメーション
   ========================================= */

.kv {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.kv__inner {
    position: relative;
    /* height: calc(100dvh - 170px); */
    height: 830px;
}
/* @media screen and (min-height: 1200px) {
    .kv__inner {
        height: 870px;
    }
} */
.kv__h1 {
    /* transform: translateX(-50%); */
    /* margin-left: -485px; */
    position: absolute;
    top: 73px;
    left: 126px;
    z-index: 11;
    display: block;
    width: fit-content;
    font-size: 27px;
    font-weight: bold;
}
.kv__h1 span {
    position: relative;
    display: block;
    width: fit-content;
    padding: 8px 8px;
    margin: 10px 0;
    line-height: 1;
    background-color: white;
}
.kv__logo {
    position: absolute;
    bottom: 91px;
    z-index: 10;
    width: 302px;
}

.kv__logo img {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .kv__logo-wrapper {
        top: 0;
        left: 50%;
        width: 1598px;
        /* height: 1000px; */
        /* height: 100dvh; */
        height: 830px;
        margin-left: -809px;
        position: absolute;
    }
}

.kv__image-wrapper {
    position: absolute;
}
@media screen and (min-width: 768px) {
    .kv__image-wrapper {
        top: 0;
        left: 50%;
        width: 1598px;
        /* height: 1000px; */
        /* height: 100dvh; */
        height: 830px;
        margin-left: -809px;
    }
}

@media screen and (max-width: 767px) {
    .kv__image-wrapper {
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
    }
}
.kv__image-1 {
    position: absolute;
    top: 34px;
    left: 50%;
    z-index: 1;
    width: 838px;

    height: 716px;
    /* max-width: 818px; */
    /* min-width: 718px; */
    /* height: auto; */
    /* aspect-ratio: 818 / 696; */
    overflow: hidden;
    clip-path: url(#blob-1);
    transform: translateX(-50%);
}
.kv__image-1 img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}
.kv__image-2 {
    position: absolute;
    bottom: 13px;
    left: 0px;
    z-index: 2;
    width: 347px;
    height: 305px;
    /* height: auto; */
    /* aspect-ratio: 435 / 380; */
    overflow: hidden;
    clip-path: url(#blob-2);
}
.kv__image-2 img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}
.kv__image-2 img:nth-child(2) {
    animation: fadeSlideshow 8s ease-in-out infinite;
}
.kv__image-3 {
    position: absolute;
    right: 0px;
    /* bottom: 9.8%; */
    /* right: 5.8%; */
    /* bottom: 643px; */
    top: 92px;
    z-index: 3;
    width: 343px;
    height: 308px;
    /* height: auto; */
    /* aspect-ratio: 430 / 383; */
    overflow: hidden;
    clip-path: url(#blob-3);
}
.kv__image-3 img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}
.kv__image-3 img:nth-child(2) {
    animation: fadeSlideshow 8s ease-in-out infinite;
}

@media screen and (min-width: 768px) {
    .tk-l-layout {
        grid-template-areas:
            "header navigation"
            "content content"
            "footer footer";
        grid-template-columns: auto 1fr;
    }
    .tk-l-layout-header {
        position: sticky;
        top: 0;
        display: flex;
        width: 100%;
    }
    .tk-l-layout-navigation {
        display: flex;
    }
    .size-945_pc {
        width: 100% !important;
        max-width: 945px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .size-950_pc {
        width: 100% !important;
        max-width: 950px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .size-826_pc {
        width: 100% !important;
        max-width: 826px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .size-862_pc {
        width: 100% !important;
        max-width: 862px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .size-1120_pc {
        width: 100% !important;
        max-width: 1120px !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .tk-c-article-image img {
        max-height: none !important;
    }
    figure.w1120 {
        width: 1120px !important;
        max-width: 1120px !important;
    }
    figure.w1120 img {
        width: 70vw !important;
        max-width: 1120px !important;
        height: auto !important;
    }
    .tk-l-footer {
        grid-template-areas:
            "top top"
            "brand content";
        grid-template-columns: 72% 28%;
    }
    .tk-l-footer-brand {
        justify-content: flex-start;
        height: 100%;
        min-height: 180px;
    }
    .tk-l-footer-logo {
        padding: 0 11%;
    }
    .tk-l-footer-content {
        padding: 26px 35px 21px;
    }
    .tk-l-footer-copyright {
        margin-top: auto;
    }
    .tk-l-footer-backtop {
        width: 113px;
    }
    .kv__logo {
        right: 116px;
        /* transform: translateX(-50%); */
    }
}

@media screen and (max-width: 767px) {
    .tk-c-article-image img,
    .tk-c-article-image picture,
    .w1120 img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* =========================================
   ドットの共通設定・配置・アメーバアニメーション
   ========================================= */
.kv__dots-bottom-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
@media screen and (min-width: 768px) {
    .kv__dots-bottom-wrapper {
        left: 50%;
        width: 1920px;
        height: 830px;
        margin-left: -960px;
    }
}

.kv__dots-bottom {
    position: absolute;
    overflow: hidden;
}
.kv__dots-bottom img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

/* ドット 1 (画像1の背面) */
.kv__dots-bottom-1 {
    top: -261px;
    left: -293px;
    z-index: 0;
    width: 789px;
    height: 774px;
    animation: moveDotsRightUp 6s ease-in-out infinite alternate;
}
.kv__dots-bottom-1 {
    clip-path: url(#blob-2);
}

/* ドット 2 (画像2の背面) */
.kv__dots-bottom-2 {
    top: 449px;
    left: 367px;
    z-index: 0;
    width: 264px;
    height: 225px;
    opacity: 0.5;
    animation: moveDotsRightUp 6s ease-in-out infinite alternate;
    animation-delay: -2s;
}
.kv__dots-bottom-2 {
    clip-path: url(#blob-3);
}

/* ドット 3 (画像3の背面) */
.kv__dots-bottom-3 {
    top: -180px;
    right: 85px;
    /* right: 85px; */
    /* margin-left: -485px; */
    /* max-width: 793px; */
    /* height: 708px; */
    z-index: 1;
    /* width: 41.2%; */
    width: 793px;
    /* height: 82.1%; */
    height: 708px;
    animation: moveDotsLeftUp 6s ease-in-out infinite alternate;
    animation-delay: -4s;
}
.kv__dots-bottom-3 {
    clip-path: url(#blob-1);
}

@keyframes moveDotsRightUp {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, -50px);
    }
}

@keyframes moveDotsLeftUp {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-50px, -50px);
    }
}
/* =========================================
   5. 導入文・見出し・キャプション
   ========================================= */

.intro__heading {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}
.intro__text {
    font-size: 18px;
    line-height: 2.1;
    text-align: center;
}
.tk-c-article-image-title {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
.tk-c-article-image-caption {
    display: flex !important;
    justify-content: space-between !important;
}
.caption-2col {
    flex-direction: column !important;
    gap: 0px;
    align-items: flex-start;
    text-align: left;
}
.caption-item {
    display: block;
    width: 100%;
    padding-left: 1em;
    text-align: left;
    text-indent: -1em;
}
.tk-c-article-image-caption-2 {
    display: inline-block !important;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.3;
}
.tk-c-article-image-caption-2 span {
    display: inline-block;
    padding-right: 10px;
}
.tk-c-article-image-caption-2 a {
    display: inline-block !important;
    color: #334155;
    transition: opacity 0.3s ease;
}
.tk-c-article-image-caption-2 a:hover {
    opacity: 0.6 !important;
}
.tk-c-article-image-caption-3 {
    display: flex;
    margin-bottom: 40px;
    font-size: 14px;
    line-height: 1.3;
}
.tk-c-article-image-caption-3 span {
    display: inline-block;
    padding-right: 10px;
}
.tk-c-article-image-caption-3 a {
    display: inline-block;
    color: #334155;
    transition: opacity 0.3s ease;
}
.tk-c-article-image-caption-3 a:hover {
    opacity: 0.6 !important;
}
.tk-c-article-image-data {
    display: inline-block;
    font-size: 14px;
}
.k-c-article-image-addition {
    display: inline-block;
    font-size: 12px;
}
.tk-c-article-text-notes {
    margin-top: 50px;
    margin-bottom: 60px;
    font-size: 16px;
    line-height: 1.7;
}
.tk-c-article-group {
    border-top: 1px solid #94a3b8;
}

/* 導入文・見出し SP用調整 */
@media screen and (max-width: 767px) {
    .tk-c-article-group {
        padding-top: 55px !important;
        margin-bottom: 55px !important;
    }
    .tk-c-article-image-caption-3 {
        padding-top: 10px;
        /* padding-bottom: 30px; */
        margin-bottom: 30px;
        font-size: 12px !important;
        display: block;
    }
    .about .tk-c-article-h2,
    .about__inner .tk-c-article-h2,
    .tk-c-article-group > .tk-c-article-h2 {
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: bold;
    }
    .tk-c-article-h2 + .tk-c-article-text {
        margin-top: 15px;
    }
    .intro {
        margin-top: 0px;
    }
    .intro__heading {
        margin-bottom: 30px;
        font-size: 20px;
        line-height: 1.6;
    }
    .intro__text {
        font-size: 15px;
        line-height: 2.1;
    }
    .tk-c-article-image-caption {
        display: block !important;
    }
    .tk-c-article-image-data {
        font-size: 12px;
    }
    .k-c-article-image-addition {
        margin-top: 10px;
        font-size: 12px;
    }
    .tk-c-article-image-caption-2 {
        margin-top: 10px;
        font-size: 12px;
    }
    .tk-c-article-image-title {
        font-size: 15px;
        margin-bottom: 15px;
    }
    .tk-c-article-text-notes {
        margin-top: 15px;
        margin-bottom: 35px;
        font-size: 15px;
    }
}

@media screen and (min-width: 768px) {
    .intro {
        padding-top: 10px;
        padding-bottom: 0px;
        margin-bottom: 90px;
        /* border-bottom: 1px solid #94a3b8; */
    }
    .intro__heading {
        margin-bottom: 30px;
    }
    .tk-c-article-group {
        padding-top: 90px !important;
        margin-top: 90px !important;
    }
    .about .tk-c-article-h2,
    .about__inner .tk-c-article-h2,
    .tk-c-article-group > .tk-c-article-h2 {
        font-size: 33px;
        font-weight: bold;
    }
}

@media screen and (max-width: 767px) {
    .kv__inner {
        position: relative;
        height: calc(100svh - 165px);
    }
    .kv__h1 {
        top: 10px !important;
        left: 32px !important;
        margin-left: 0 !important;
        font-size: 18px !important;
        transform: none !important;
        /* width: calc(100% - 40px) !important; */
    }
    .kv__logo {
        position: absolute;
        right: 31px;
        bottom: 10% !important;
        z-index: 10;
        width: 46.4% !important;
    }

    .kv__image-1 {
        top: 49% !important;
        width: 91.46% !important;
        height: 70.8vw !important;
        min-width: 0;
        max-width: none;
        max-height: none !important;
        margin-right: auto;
        margin-left: auto;
        transform: translate(-50%, -50%) !important;
        z-index: 1 !important;
    }
    .kv__image-2 {
        bottom: 0% !important;
        left: 1.3% !important;
        width: 42.4% !important;
        height: 37.8vw !important;
    }
    .kv__image-3 {
        top: -5px !important;
        right: -10px !important;
        left: auto !important;
        width: 43.46% !important;
        height: 37.8vw !important;
        min-width: 0;
        max-width: none !important;
        max-height: none !important;
        z-index: 3 !important;
    }

    .kv__dots-bottom-1 {
        top: -16.8% !important;
        left: -22% !important;
        width: 74.7% !important;
        height: 56.8% !important;
    }
    .kv__dots-bottom-2 {
        top: auto;
        bottom: 17.8% !important;
        left: auto !important;
        /* max-width: 150px !important; */
        /* max-height: 175px !important; */
        left: -20% !important;
        width: 36.5%;
        height: 33.7%;
        margin-left: 0 !important;
    }
    .kv__dots-bottom-3 {
        top: 18.3%;
        right: -28%;
        /* max-width: 236px !important; */
        /* max-height: 211px !important; */
        width: 63%;
        height: 42%;
        z-index: 2 !important;
    }
}

/* =========================================
   6. 比較アコーディオン（.comparison）
   ========================================= */

.comparison {
    width: 100% !important;
    max-width: 950px !important;
    margin: 0 auto !important;
    font-family: "Zen Kaku Gothic New";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
.comparison__inner {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
}
.comparison__button {
    position: relative !important;
    width: 100%;
    max-width: 950px;
    height: 96px;
    cursor: pointer;
    background-color: #f7f9fb;
    border: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}
.comparison__button-text {
    font-size: 22px !important;
    font-weight: bold;
    line-height: 1.3;
    color: #3e3a39 !important;
    letter-spacing: 0.05em;
}
.comparison__button::after {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 30px;
    height: 30px;
    content: "";
    background-color: transparent !important;
    background-image: url("/library/kodate/tech/catalog/smartecs-sarawel/assets/img/circle1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}
.comparison__button.active::after {
    transform: translateY(-50%) rotate(180deg);
}
.comparison__body {
    position: relative;
    width: 100%;
    max-width: 950px;
    max-height: 0;
    margin: 0px auto 0;
    overflow: hidden;
    background-color: #f7f9fb;
    transition: max-height 0.5s ease;
}
.comparison__body.open {
    max-height: 2000px;
}
.comparison__body::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 910px;
    content: "";
    border-top: 1px solid #94a3b8;
    transform: translateX(-50%);
}
.comparison__title {
    width: fit-content;
    padding: 10px 40px 10px;
    margin: 30px auto 10px;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.05em;
    border: 1px solid #3e3a39;
    border-radius: 10px;
}
.comparison__subtitle {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
}
.comparison__maintitle {
    display: block;
    margin-bottom: 0px;
    font-size: 18px;
    font-weight: bold;
}
.comparison__image {
    margin: 0 auto 0px;
}

.comparison__caption {
    margin-top: 20px;
    font-size: 12px !important;
    text-align: center;
    line-height: 1.3;
}
@media screen and (max-width: 767px) {
    .comparison__caption {
        text-align: left;
    }
}
/* 比較アコーディオン SP用調整 */
@media screen and (max-width: 767px) {
    .comparison {
        width: 100% !important;
    }
    .comparison img {
        width: 100%;
    }
    .comparison__inner {
        width: 100%;
    }
    .comparison__button {
        width: 100%;
    }
    .comparison__body {
        left: 0;
        width: calc(100% - 32px) !important;
        padding-right: 16px !important;
        padding-bottom: 0 !important;
        padding-left: 16px !important;
    }
    .comparison__body::before {
        width: 100%;
    }
    .comparison__button::after {
        position: absolute;
        top: 50%;
        right: 20px;
        width: 20px;
        height: 20px;
        content: "";
        background-color: transparent !important;
        background-image: url(/library/kodate/tech/catalog/smartecs-sarawel/assets/img/circle1.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: translateY(-50%);
        transition: transform 0.2s ease;
    }
    .comparison__subtitle {
        display: block;
        margin-bottom: 5px;
        font-size: 12px;
        letter-spacing: 0.05em;
    }
    .comparison__maintitle {
        display: block;
        margin-bottom: 0;
        font-size: 18px;
    }
    .comparison__button-text {
        font-size: 18px !important;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }
}

@media screen and (min-width: 768px) {
    .comparison__image {
        width: 950px;
    }
    .comparison__button:hover {
        background-color: #e2e8f0 !important;
    }
    .comparison__inner {
        /* width: 862px; */
    }
}

/* =========================================
   7. ポイント解説セクション（.points / .point）
   ========================================= */

.points {
    padding-right: calc(50vw - 50%);
    padding-bottom: 180px;
    padding-left: calc(50vw - 50%);
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    background-color: #f0f9f8;
    border-top: none !important;
}
.points .tk-c-article-group {
    padding-top: 180px !important;
    margin-top: 180px !important;
    border-top: none !important;
    /* margin-bottom: 180px!important; */
}

.points .tk-c-article-text {
    grid-gap: 0px;
    gap: 0px;
}
@media screen and (min-width: 768px) {
    .points .tk-c-article-text {
        grid-gap: 0px;
        gap: 0px;
        margin-top: 10px;
    }
}

.points .tk-c-article-h2 + .tk-c-article-text {
    margin-top: 0;
}
.point {
    max-width: 1120px;
    padding-top: 0;
    border-top: none;
    border-bottom: 1px solid #94a3b8;
    width: 100%;
}
.point__head {
    display: flex !important;
    justify-content: space-between;
    width: 70vw;
    max-width: 1120px;
    padding-top: 90px;
    margin-bottom: 90px;
}
.point__inner {
    max-width: 1120px;
}
.point__number {
    display: flex;
    align-items: flex-end;
    width: fit-content;
    padding-bottom: 7px;
    margin-bottom: 30px;
    border-bottom: 1px solid #3e3a39;
}
.point__number-sub {
    display: inline-block !important;
    padding-right: 10px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.07em;
}
.point__number-main {
    display: inline-block !important;
    font-size: 33px;
    font-weight: 500;
    line-height: 0.85;
}
.point__subtitle {
    display: block;
    font-size: clamp(16px, 2.2vw, 22px);
    font-weight: bold;
    white-space: nowrap;
}
.point__maintitle {
    display: block;
    width: fit-content;
    font-size: clamp(20px, 2.75vw, 33px);
    font-weight: bold;
    white-space: nowrap;
}
.small-title {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
}
.point__maintitle-wrap {
    display: block;
}
.point__maintitle-wrap .point__maintitle,
.point__maintitle-wrap .small-title {
    display: inline !important;
    margin: 0 !important;
    vertical-align: baseline;
}
.stripe-marker {
    display: inline;
    background-image: repeating-linear-gradient(-45deg, #a3d6f5, #a3d6f5 3px, transparent 3px, transparent 6px);
    background-repeat: repeat-x;
    background-position: 0 95%;
    background-size: 100% 35%;
}
@media screen and (max-width: 767px) {
    .stripe-marker {
        background-image: repeating-linear-gradient(-45deg, #a3d6f5, #a3d6f5 1.5px, transparent 1.5px, transparent 3px);
    }
}
.point__text {
    margin-top: 30px;
    margin-bottom: 50px;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.05em;
}
.point__button {
    position: relative;
    max-width: 398px;
    width: 100%;
    height: 60px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: #3e3a39;
    letter-spacing: 0.08em;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #3e3a39;
    border-radius: 30px;
    transition: background-color 0.3s ease;
}
.point__button::after {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 20px;
    height: 20px;
    content: "";
    background-color: transparent !important;
    background-image: url("/library/kodate/tech/catalog/smartecs-sarawel/assets/img/circle1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
}
.point__button.active::after {
    transform: translateY(-50%) rotate(180deg);
}
.point__body {
    /* border-bottom: 1px solid #94a3b8; */
    width: 950px;
    max-height: 0;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.point__body.open {
    max-height: 5000px;
    padding-bottom: 90px;
}
.point__body-title {
    margin-bottom: 40px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}
.point__column {
    box-sizing: border-box;
    max-width: 950px;
    margin: 90px auto 0;
    border: 1px solid #0f172a;
    border-radius: 10px;
}
.point__column-body {
    display: block;
    padding: 40px;
}
.point__column-body2 {
    display: flex !important;
    align-items: center !important;
    /* justify-content: space-between !important; */
    padding: 40px;
}

@media screen and (min-width: 768px) {
    .point__column-body2 {
        gap: 40px;
    }
}

.point__column-textarea {
    /* width: 610px; */
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
.point__column-textarea2 {
    width: 370px;
}
@media screen and (max-width: 767px) {
    .point__column-textarea {
        text-align: left;
    }
    .point__column-textarea2 {
        width: 100%;
    }
}
.point__column-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
}
.point__column-text {
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: 0.05em;
}
.point__column__image {
    width: 558px;
    margin: 40px auto 0;
}

.point__column__image2 {
    width: 460px;
}
@media screen and (max-width: 767px) {
    .point__column__image2 {
        width: 100%;
    }
}
.point__image-caption {
    padding-right: 0;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.4;
}

@media screen and (max-width: 767px) {
    .point__image-caption {
        padding-right: 0px;
        margin-top: 25px;
        margin-right: 0;
    }
}
.point__column__image img,
.point__column__image2 img {
    max-width: 100%;
    height: auto;
}
.point__column-caption {
    display: block;
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
/* ポイントセクション SP用調整 */
@media screen and (max-width: 767px) {
    .point__head {
        flex-direction: column !important;
        gap: 0 !important;
        width: 100%;
        padding-top: 50px !important;
        margin-bottom: 40px !important;
    }
    .point__image,
    .point__textarea {
        width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .point__image {
        margin-bottom: 40px;
    }
    .point__image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .point__maintitle {
        display: block;
        font-size: 30px !important;
    }
    .point__subtitle {
        display: block;
        font-size: 20px !important;
    }
    .small-title {
        font-size: 22px !important;
    }
    .point__button {
        display: block;
        width: 100% !important;
        height: 50px;
        margin: 0 auto;
        font-size: 15px;
        font-weight: normal;
        letter-spacing: 0;
    }
    .point__button::after {
        right: 10px;
    }
    .point__column-body {
        flex-direction: column !important;
        padding: 30px 16px !important;
    }
    .point__column-body2 {
        flex-direction: column !important;
        padding: 30px 16px !important;
    }
    .point__column-textarea,
    .point__column__image {
        width: 100% !important;
    }
    .point__column__image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    .point__column__image {
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
    }
    .point__column {
        width: 100%;
        margin-top: 55px;
    }
    .points {
        padding-bottom: 80px !important;
    }
    .point__text {
        margin-top: 17px;
        margin-bottom: 25px;
        font-size: 15px;
        line-height: 1.7;
        letter-spacing: 0;
    }
    .point__column-title {
        font-size: 20px;
        line-height: 1.6;
    }
    .point__number-sub {
        font-size: 15px;
        line-height: 1;
    }
    .point__number-main {
        font-size: 30px;
        line-height: 0.85;
    }
    .point__number {
        margin-bottom: 17px;
    }
    .point__body {
        box-sizing: border-box !important;
        width: calc(50% + 50vw) !important;
        padding-right: calc(50vw - 50%) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    .point__body-title {
        margin-bottom: 15px;
        font-size: 15px;
        font-weight: bold;
        line-height: 1.3;
        color: #242424;
        text-align: center;
        /* margin-left: -32px; */
    }
}

@media screen and (min-width: 768px) {
    .point__body {
        width: 100% !important;
        max-width: 1120px !important;
    }
    .point__column {
        max-width: 950px !important;
    }
    .point .size-950_pc {
        max-width: 950px !important;
    }
    .point__body .point__image {
        flex: none !important;
        max-width: 950px !important;
    }
    .point__column-textarea2 {
        flex: 1 !important;
        width: auto !important;
    }
    .point__column__image2 {
        width: 460px;
    }
    .point__head {
        gap: 50px;
        width: 100% !important;
    }
    .point__image {
        flex: 1 1 50%;
        min-width: 0;
        max-width: 535px;
    }
    .point__image img {
        width: 100% !important;
    }
    .point__textarea {
        flex: 1 1 50%;
        min-width: 0;
        max-width: 535px;
    }
    .point__button:hover {
        background-color: #e2e8f0 !important;
    }
    .points__inner .point:first-of-type {
        padding-top: 120px;
    }

    .points__inner > .tk-c-article-group {
        padding-top: 120px;
    }
    .point .tk-c-article-h2,
    .point .tk-c-article-h3 {
        margin-bottom: 10px;
        font-weight: bold;
    }
    .point .tk-c-article-h3 {
        display: block;
        font-size: 18px; /* h2相当のPCサイズ */
        line-height: 1.5;
    }
    .points .tk-c-article-image-caption {
        margin-top: 20px;
    }
    .point-image-caption {
        width: 460px;
        margin-left: auto;
    }
}

@media screen and (max-width: 767px) {
    .points .tk-c-article-group {
        padding-top: 75px !important;
        margin-top: 75px !important;
        /* margin-bottom: 180px!important; */
    }
    .point__body.open {
        padding-bottom: 55px;
    }
    .point__column {
        border-radius: 5px;
    }
    .point__column-text {
        font-size: 15px;
        line-height: 1.6;
        letter-spacing: 0;
    }
}

/* =========================================
   8. メリットセクション（.merits）
   ========================================= */

.merit-h2-feature {
    display: block;
    width: 146px !important;
    margin-bottom: 20px;
}
.merit-h2-feature img {
    width: 100%;
    height: auto;
}
.merit-h2-sub {
    display: block;
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.3;
}
.merit-h2-main {
    display: block;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
}
.merit-h3 {
    display: block;
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: bold;
    line-height: 1.3;
}
.merit-description {
    /* width: 950px; */
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
}
.merit__caption {
    margin-top: 20px;
    font-size: 12px;
    line-height: 1.3;
}
@media screen and (max-width: 767px) {
    .merit__caption {
        margin-top: 10px;
    }
}

@media screen and (min-width: 768px) {
    .merit__caption-wrapper1 {
        width: 470px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 767px) {
}

/* .merit__inner 直下の最初の .tk-c-article-group 専用スタイル */
.merit__inner > .tk-c-article-group:first-child {
    padding-top: 90px;
    margin-top: 90px;
    /* ここに margin や border を自由に設定できます */
    /* 例: margin-top: 0; border-top: none; */
    border-top: 1px solid #94a3b8;
}

/* =========================================
   9. 図表・テーブル・家の形アコーディオン
   ========================================= */

.fighre__boxinner {
    /* display: flex;
    justify-content: space-between; */
    width: 476px;
    margin: 24px auto 20px;
}
.fighre__boxinner2 {
    display: flex;
    /* margin: 24px auto 20px; */
    gap: 30px;
    /* justify-content: space-between; */
    max-width: 950px;
    margin-right: auto;
    margin-left: auto;
}

.point .fighre__boxinner2 {
    display: flex;
    /* margin: 24px auto 20px; */
    gap: 30px;
    /* justify-content: space-between; */
    max-width: 950px;
    margin-right: auto;
    margin-left: auto;
}
@media screen and (max-width: 767px) {
    .point .fighre__boxinner2 {
        display: block;
    }
}
.merits .fighre__boxinner {
    margin: 0 auto 20px;
}

@media screen and (max-width: 767px) {
    .merits .fighre__boxinner {
        margin: 0 auto 55px;
    }
}
@media screen and (max-width: 767px) {
    .merits .fighre__boxinner2 {
        display: block;
        width: 100%;
    }
}
.fighre__boxinner .tk-c-article-image {
    width: 476px;
    padding: 0;
    margin: 0 0 20px 0;
    border: 0;
}
.table {
    margin: 110px auto 0;
    text-align: center;
}
.table-h2-main {
    display: block;
    margin-bottom: 15px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
}
.table__caption {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.3;
}

/* =========================================
   10. 展示場セクション（.example）
   ========================================= */

.example {
    position: relative;
    left: 50%;
    width: 1120px;
    margin-top: 115px;
    margin-left: -560px;
}
.example-h2-main {
    display: block;
    margin-bottom: 60px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}
.example__box {
    display: flex;
    justify-content: space-between;
    width: 70vw;
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
}
.example__text {
    margin: 40px auto 20px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
}
.example__imagearea {
    max-width: 545px;
}
.example img {
    width: 100%;
}
.example__imagearea picture {
    width: 100%;
}
.example__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding-right: 29px;
    padding-bottom: 10px;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
    text-decoration: none;
    border-bottom: 1px solid #000;
    transition: opacity 0.3s ease;
}

.example__link.is-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.example__link:hover {
    opacity: 0.6;
}

.example__link::after {
    position: absolute;
    top: 4px;
    right: 0;
    width: 9px;
    height: 9px;
    content: "";
    background-image: url(/library/kodate/tech/catalog/smartecs-sarawel/assets/img/window.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.example__link-area {
    position: relative;
    display: flex;
    gap: 30px;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
}
@media screen and (max-width: 767px) {
    .example .tk-c-article-group {
        margin-bottom: 0 !important;
    }
}

/* =========================================
   11. スクロールタッチオーバーレイ (SP用)
   ========================================= */

.scroll-container-wrapper {
    position: relative;
    width: 100%;
}
.scroll-touch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    visibility: visible;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% - 20px); /* スクロールバー上部の隙間を確保 */
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.4);
    opacity: 1;
    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}
.scroll-touch-overlay.is-hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}
.scroll-touch-overlay img {
    width: 60px !important;
    height: auto !important;
}

/* =========================================
   12. ユーティリティ（マージン調整など）
   ========================================= */

.mt120_pc {
    margin-top: 120px;
}

/* ユーティリティ PC用 */
@media screen and (max-width: 767px) {
    .point .tk-c-article-h2,
    .point .tk-c-article-h3 {
        font-weight: bold;
    }
    .point .tk-c-article-h3 {
        display: block;
        font-size: 18px; /* h2相当のSPサイズ */
        line-height: 1.5;
    }
}
/* ユーティリティ SP用 */

.point__small-text {
    font-size: 12px;

    line-height: 1.8;
}
@media screen and (min-width: 768px) {
    .point__small-text {
        margin-top: 5px;
    }
}
@media screen and (max-width: 767px) {
    .point__small-text {
        margin-top: 5px;
    }
}

/* =========================================
   13. キーフレームアニメーション
   ========================================= */

/* エントリーフェードイン */
@keyframes entryImage {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%);
    }
}

/* 重ね合わせ画像トランジションフェード */
@keyframes fadeSlideshow {
    0%,
    12.5%,
    87.5%,
    100% {
        opacity: 0;
    }
    37.5%,
    62.5% {
        opacity: 1;
    }
}

@media screen and (min-width: 768px) {
    .merit .tk-c-article-image-caption,
    .merits .tk-c-article-image-caption {
        margin-top: 20px;
        font-size: 14px !important;
    }
    .merits .tk-c-article-image {
        margin-top: 60px;
    }
    .scroll-touch-overlay {
        display: none !important;
    }
    .p0_pc {
        grid-gap: 0px !important;
        padding: 0 !important;
    }
    .pt0_pc {
        padding-top: 0px !important;
    }
    .pt10_pc {
        padding-top: 10px !important;
    }
    .pt20_pc {
        padding-top: 20px !important;
    }
    .pt45_pc {
        padding-top: 45px !important;
    }
    .pt60_pc {
        padding-top: 60px !important;
    }
    .mt0_pc {
        margin-top: 0px !important;
    }
    .mt10_pc {
        margin-top: 10px !important;
    }
    .mt20_pc {
        margin-top: 20px !important;
    }
    .mt30_pc {
        margin-top: 30px !important;
    }
    .mt40_pc {
        margin-top: 40px !important;
    }
    .mt60_pc {
        margin-top: 60px !important;
    }
    .mt80_pc {
        margin-top: 80px !important;
    }
    .mt100_pc {
        margin-top: 100px !important;
    }
    .mt120_pc {
        margin-top: 120px !important;
    }
    .mb20_pc {
        margin-bottom: 20px !important;
    }
    .mb30_pc {
        margin-bottom: 30px !important;
    }
    .mb60_pc {
        margin-bottom: 60px !important;
    }
}

@media screen and (max-width: 767px) {
    .merit-description {
        width: 100%;
        margin-top: 15px;
        font-size: 12px;
        line-height: 1.5;
    }
    .merit-h2-sub {
        font-size: 14px !important;
    }
    .merit-h2-main {
        margin-bottom: 15px !important;
        font-size: 25px !important;
        line-height: 1.5;
    }
    .merit-h3 {
        margin-bottom: 15px !important;
        font-size: 20px !important;
    }
    .merit-h2-feature {
        width: 122px !important;
    }
    .merit__inner > .tk-c-article-group:first-child {
        padding-top: 55px !important;
        margin-top: 55px;
        margin-bottom: 55px;
    }
    .table {
        margin: 0 auto 0;
    }
    .fighre__boxinner {
        flex-direction: column !important;
        gap: 30px;
        width: 100%;
        margin-top: 30px !important;
    }
    .fighre__boxinner .tk-c-article-image {
        width: 100% !important;
        margin: 0 !important;
    }
    .table-h2-main {
        font-size: 25px !important;
    }
    .w1120 img,
    .w1120 picture {
        width: 100% !important;
    }

    /* --- 家の形のアコーディオン（SP専用） --- */
    .house {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        padding: 0 0 0px 0 !important;
        margin: 145px auto 10px !important;
        overflow: visible !important;
        background-color: #ffffff;
        border-right: 2px solid #82d0f5;
        border-bottom: 2px solid #82d0f5;
        border-left: 2px solid #82d0f5;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    .house img {
        width: 100%;
    }
    .house::before {
        position: absolute;
        top: -49px;
        left: -2px;
        z-index: 2;
        box-sizing: border-box;
        width: calc(50% + 2px);
        height: 50px;
        content: "";
        border-top: 2px solid #82d0f5;
        border-left: 2px solid #82d0f5;
        border-top-left-radius: 12px;
        transform: skewY(-16deg);
        transform-origin: left bottom;
    }
    .house::after {
        position: absolute;
        top: -49px;
        right: -2px;
        z-index: 2;
        box-sizing: border-box;
        width: calc(50% + 2px);
        height: 50px;
        content: "";
        border-top: 2px solid #82d0f5;
        border-right: 2px solid #82d0f5;
        border-top-right-radius: 12px;
        transform: skewY(16deg);
        transform-origin: right bottom;
    }
    .house__inner {
        display: flex;
        flex-direction: column;
        width: calc(100% - 40px);
        padding-right: 20px;
        padding-left: 20px;
    }
    .house__text {
        width: 100%;
        padding: 0;
        margin: 0 0 30px 0;
    }
    .house__text img {
        display: block;
        width: 100%;
        height: auto;
        margin-top: -30px;
    }
    .house__box {
        position: relative;
        padding: 0 0;
        margin-bottom: 0px;
    }
    .house__box:last-of-type {
        margin-bottom: 0;
    }
    .house__image {
        width: 100%;
        overflow: hidden;
        border-radius: 8px;
    }
    .house__image img {
        display: block;
        width: 100%;
        height: auto;
    }
    .house__caption {
        font-size: 12px;
        line-height: 1.5;
    }

    /* トグルボタン */
    .house__toggle-btn {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
        width: fit-content;
        padding: 6px 0;
        padding-bottom: 10px;
        margin: 15px auto 0;
        font-size: 12px;
        font-weight: bold;
        color: #3e3a39;
        cursor: pointer;
        outline: none;
        background: transparent;
        border: none;
        border-bottom: 1px solid #3e3a39;
    }
    .house__toggle-icon {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        background-color: #82d0f5;
        border-radius: 50%;
        transition: transform 0.2s ease;
    }
    .house__toggle-icon--green {
        background-color: #80e4d4 !important;
    }
    .house__toggle-icon::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        content: "";
        border-top: 2px solid #ffffff;
        border-left: 2px solid #ffffff;
    }
    .house__toggle-icon.open::after {
        transform: translate(-50%, -70%) rotate(-135deg);
    }
    .house__toggle-icon.close::after {
        transform: translate(-50%, -30%) rotate(45deg);
    }
    .house__box.is-open .house__toggle-btn.open-btn {
        display: none;
    }

    /* アコーディオンコンテンツ（常時表示へ変更） */
    .house__content {
        /* max-height: 0; overflow: hidden; は削除 */
    }
    .house__desc {
        padding: 0 0px;
        margin: 10px 0 20px;
        font-size: 12px;
        line-height: 1.4;
        color: #595965;
        text-align: left;
    }
    .house__desc-note {
        display: block;
        margin-top: 10px;
        font-size: 11px;
        color: #334155;
    }
    .house__toggle-btn.close-btn {
        position: relative;
        margin: 10px auto 0;
    }
    .house__toggle-btn.close-btn::after {
        position: absolute;
        bottom: -15px;
        left: 50%;
        display: block;
        width: 45px;
        height: 1px;
        content: "";
        background-color: #a3d6f5;
        transform: translateX(-50%);
    }
    .house__box:last-of-type .house__toggle-btn.close-btn::after {
        display: none;
    }

    /* figure6 & figure16 のスマホスクロール設定 */
    .tk-ovx-scroll-sp-figure6 {
        width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        overflow-x: auto;
    }
    .tk-ovx-scroll-sp-figure6 .simplebar-content-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tk-ovx-scroll-sp-figure6 img {
        display: block;
        width: auto !important;
        max-width: none !important;
        height: 392px !important;
        margin-bottom: 20px !important;
        padding-right: 32px !important;
    }
    .tk-ovx-scroll-sp-figure16 {
        width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        overflow-x: auto;
    }
    .tk-ovx-scroll-sp-figure16 .simplebar-content-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tk-ovx-scroll-sp-figure16 picture,
    .tk-ovx-scroll-sp-figure16 img {
        display: block;
        width: auto !important;
        max-width: none !important;
        height: 605px !important;
        margin-bottom: 20px !important;
        padding-right: 32px;
    }

    /* SimpleBar カスタムスクロールバーの再有効化とデザイン調整 */
    .simplebar-track.simplebar-horizontal {
        left: auto !important;
        right: auto !important;
        width: calc(100% - 32px) !important;
        bottom: 0px !important;
        visibility: visible !important;
        height: 4px !important;
        background-color: #e2e8f0 !important;
        border-radius: 2px !important;
        opacity: 1 !important;
    }
    .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
        visibility: visible !important;
        min-width: 80px !important;
        height: 4px !important;
        background-color: #3e3a39 !important;
        border-radius: 2px !important;
        opacity: 1 !important;
    }
    .simplebar-track.simplebar-horizontal .simplebar-scrollbar::before {
        display: none !important;
    }
    .example {
        left: 0 !important;
        width: 100% !important;
        margin-top: 0;
        margin-left: 0 !important;
    }
    .example img {
        width: 100%;
        height: auto;
    }
    .example__box {
        position: relative;
        left: 0;
        flex-direction: column !important;
        width: 100%;
        min-width: auto !important;
        margin: 0;
        margin-left: 0;
        transform: none;
    }
    .example__imagearea {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0px;
        margin-bottom: 40px;
    }
    .example__link-area {
        flex-direction: column !important;
        gap: 20px;
        align-items: center;
    }
    .example-h2-main {
        margin-bottom: 35px !important;
        font-size: 25px !important;
        line-height: 1.5;
    }
    .example__text {
        margin: 20px auto 20px;
        font-size: 16px;
    }
    .scroll-touch-overlay img {
        width: 150px !important;
    }
    .scroll-container-wrapper {
        width: calc(50% + 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    .mt_0_sp {
        margin-top: 0 !important;
    }
    .pt0_sp {
        padding-top: 0px !important;
    }
    .pt25_sp {
        padding-top: 25px !important;
    }
    .pt55_sp {
        padding-top: 55px !important;
    }
    .mt55_sp {
        margin-top: 55px !important;
    }
    .mt0_sp {
        margin-top: 0px !important;
    }
    .mt10_sp {
        margin-top: 10px !important;
    }
    .mt15_sp {
        margin-top: 15px !important;
    }
    .mt20_sp {
        margin-top: 20px !important;
    }
    .mt25_sp {
        margin-top: 25px !important;
    }
    .mt30_sp {
        margin-top: 30px !important;
    }
    .mt35_sp {
        margin-top: 35px !important;
    }
    .mt45_sp {
        margin-top: 45px !important;
    }
    .mb50_sp {
        margin-bottom: 50px !important;
    }
    .mb17_sp {
        margin-bottom: 17px !important;
    }
    .mb15_sp {
        margin-bottom: 15px !important;
    }
    .mb20_sp {
        margin-bottom: 20px !important;
    }
    .mb30_sp {
        margin-bottom: 30px !important;
    }
    .mb35_sp {
        margin-bottom: 35px !important;
    }
    .mb45_sp {
        margin-bottom: 45px !important;
    }
    .mb10_sp {
        margin-bottom: 10px !important;
    }
    .mb0_sp {
        margin-bottom: 0px !important;
    }
    .about {
        /* margin-top: 55px;
        padding-top: 55px;
        border-top: 1px solid #595965; */
    }
}

/* =========================================
   14. 表示制御用ヘルパークラス（PC/SP切り替え）
   ========================================= */

@media screen and (max-width: 767px) {
    .b-is-pc {
        display: none !important;
    }
    .b-is-pc-flex {
        display: none !important;
    }
    .b-is-sp {
        display: block !important;
    }
}

@media screen and (max-width: 767px) {
    .fz25_sp {
        font-size: 25px !important;
    }
}

.bdt-none {
    border-top: none !important;
}

.fwb {
    font-weight: bold !important;
}

/* SimpleBar Touch Scrollbar Drag Fix */
.simplebar-track,
.simplebar-scrollbar {
    pointer-events: auto !important;
    touch-action: none !important;
}

/* Fix mobile scroll instability caused by image dragging */
.scroll-container-wrapper .tk-c-article-image img,
.simplebar-content img {
    pointer-events: auto;
    user-select: none;
    -webkit-user-drag: none;
}
@media screen and (min-width: 768px) {
    .b-is-pc {
        display: block !important;
    }
    .b-is-pc-flex {
        display: flex !important;
    }
    .b-is-sp {
        display: none !important;
    }
    .fz39_pc {
        font-size: 28px !important;
        line-height: 1.3;
    }
    .fz28_pc {
        font-size: 28px !important;
        line-height: 1.3;
    }
    .table__inner .scroll-container {
        display: block !important;
    }
    .table__inner .tk-c-article-image {
        display: block !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .table__inner .tk-c-article-image img {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto;
    }
    .example__box {
        gap: 30px !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .example__imagearea {
        flex: 1 1 50% !important;
        min-width: 0 !important;
        max-width: 545px !important;
    }
}

/* =========================================
   relation
   ========================================= */
.relation {
    margin: 80px 0;
}
@media screen and (min-width: 768px) {
    .relation {
        margin: 180px 0 0;
    }
}

.relation__inner {
    display: flex;
    justify-content: center;
    width: 100%;
}
.relation__link {
    display: flex;
    flex-direction: column;
    width: 478px;
    max-width: 100%;
    overflow: hidden;
    color: #333;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}
.relation__link:hover {
    opacity: 0.8;
}
.relation__link picture,
.relation__link img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.relation__link-text {
    position: relative;
    flex-grow: 1;
    padding: 20px 20px 60px 20px;
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    background-color: #f8f9fa;
}

@media screen and (max-width: 767px) {
    .relation__link-text {
        padding: 15px 15px 35px 15px;
    }
}

.relation__link-text::after {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 23px;
    height: 6px;
    content: "";
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg width="23" height="6" viewBox="0 0 23 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 5H22M22 5L18 1" stroke="%23333" stroke-width="1.2"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center right;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}
.relation__link:hover .relation__link-text::after {
    opacity: 0.5;
    transform: translateX(5px);
}

@media screen and (max-width: 767px) {
    .relation {
        margin: 100px 0;
    }
    .relation__inner {
        flex-direction: column;
        gap: 35px;
        width: 100%;
        padding: 0 0%;
    }
    .relation__link {
        width: 100%;
    }
    .relation__link picture,
    .relation__link img {
        aspect-ratio: auto;
    }
}

.u-sup {
    font-size: 80%;
    vertical-align: super;
}