@charset "utf-8";

/*———————————
共通
———————————*/
body {

    font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    background-color: #F5F5F5;
}

/* 改行 */
.br-sp {
    display: none;

    @media (max-width:768px) {
        display: block;
    }
}

.br-pc {
    @media (max-width:768px) {
        display: none;
    }
}

.un-sans {
    font-family: "Noto Sans JP";
}

.ly-column {
    display: grid;
    grid-template-columns: 1fr minmax(0, var(--col-main)) 1fr;

    @media (max-width:768px) {
        grid-template-columns: 25px minmax(0, var(--col-main)) 25px;
    }

    /* 横いっぱい（左右余白も含めて） */
    > .col-max {
        grid-column: 1 / -1;
        padding-inline: 30px;

        @media (max-width:768px) {
            padding-inline: 25px;
        }

    }

    > .col-main {
        grid-column: 2;
    }

}

.col-max_inner {
    max-width: var(--col-main);
    margin-inline: auto;
}

/*
フォーム
———————————*/

:root {
    --cl-bg: #ffffff;
    --fs-base: clamp(14px, 3vw, 16px);

}

/* --- フォーム全体 --- */
.el-form {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    padding: 1.8rem;
    display: grid;
    gap: 1.5rem;
    /* isolation を付けない!! */
    color: #fff;

}

/* 乗算レイヤー */
.el-form::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--cl-sub3);
    mix-blend-mode: multiply;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.35);
}



.el-form_ttl {
    background-color: #fff;
    color: var(--cl-main);
    padding: 5px;
    text-align: center;
    width: 100%;
    font-size: 2.4rem;

    @media (max-width:768px) {
        font-size: 2.2rem;
    }
}

.el-form_maintxt {
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #fff;
    padding-block: 10px;

    @media (max-width:768px) {
        text-align: left;
    }
}

/* --- ラベル --- */
.txt-label,
.el-form_fieldset legend {
    font-weight: 600;
    margin-bottom: 10px;

}

/* --- ラジオボタン --- */
.el-form_fieldset {
    border: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    color: #fff;

    @media (max-width:768px) {
        gap: 15px;
        justify-content: flex-start;
    }

}


.el-form_radio {
    display: flex;
    align-items: center;
    gap: .45em;
    cursor: pointer;
}

.el-form_radio input {
    accent-color: var(--cl-main);
    width: 15px;
    aspect-ratio: 1/1
}

/* CF7に合わせて修正 */
.un-form_category {
    .wpcf7-form-control-wrap {
        width: 100%;
    }

    .el-form_radio {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
    }
}



.el-form_checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.el-form_checks .wpcf7-list-item {
    margin-left: 0;
}

.el-form_check,
.wpcf7-list-item label {
    display: flex;
    gap: .5rem;
    margin-right: 4px;
    align-items: baseline;
}



/* --- 1行テキスト & テキストエリア共通 --- */
.el-form_input,
.el-form_textarea {
    width: 100%;
    padding: 4px 4px;
    border: 1px solid #ccc;
    font: inherit;
    background: #fff;
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    color: var(--cl-bk);
}

.el-form_textarea {
    resize: vertical;
}

/* --- チェックボックス --- */
.el-form_policy-check {
    display: flex;
    align-items: baseline;
    gap: .5em;

    a {
        text-decoration: underline;
    }

    span {
        font-size: 80%;
    }

}

.el-form_check input {
    accent-color: var(--cl-sub2);
}

.el-form_policy-check_txt {

    a {
        text-decoration: underline;
    }

    span {
        font-size: 80%;
        display: block;
    }

}

/* ヘッダーのフォームでチェックリスト削除 */
.un-check_shien {
    .ly-header & {
        display: none;
    }
}


/* --- 送信ボタン --- */
.el-form_btn {
    width: 100%;
    place-self: start;
    padding: .75em 1.5em;
    background: var(--cl-sub2);
    color: #fff;
    border: none;
    border-radius: .25rem;
    cursor: pointer;
    font: inherit;
}

.el-form_btn:hover,
.el-form_btn:focus {
    background: color-mix(in lab, var(--cl-sub2) 80%, #000);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.el-form :is(input[type="radio"], input[type="checkbox"]):checked {
    accent-color: var(--cl-sub2);
}

.el-form :is(input[type="radio"], input[type="checkbox"]):checked:is(:hover, :focus, :active) {
    accent-color: var(--cl-sub2);
}

.el-form label:is(:hover, :active) :is(input[type="radio"], input[type="checkbox"]):checked {
    accent-color: var(--cl-sub2);
}


.el-form label:hover :is(input[type="radio"], input[type="checkbox"]) {
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
}

label:hover {
    opacity: 1
}

.el-form .wpcf7-spinner {
    display: none;
}

/*———————————
ヘッダー
———————————*/
.ly-header {
    position: relative;

    @media (max-width:768px) {
        & .col-max {
            padding-inline: 10px 20px;
        }
    }
}

.sec-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0px;
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    height: 60px;
}

/*
ロゴ .bl-logo
———————————*/
.bl-logo {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-column: span 2;
    align-items: center;
    gap: 10px;
    height: fit-content;
    width: 100%;
    maxw200px;

    & img {
        display: block;
        width: 100%;
        max-width: 110px;
    }

    & .bl-logo_isapo {
        font-size: 2.2rem;
        line-height: 1;
        /* notosansのズレ解消 */
        padding-bottom: 2px;
    }

    /* SP時 */
    @media (max-width:768px) {
        & img {
            max-width: 85px;
        }

        & .bl-logo_isapo {
            font-size: 1.8rem;
        }
    }
}

/*
ナビ bl-nav
———————————*/

.el-nav_menu {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    font-size: 1.5rem;
    width: fit-content;
    color: var(--cl-sub3);
    padding-left: 0;

    & a {
        padding-inline: 10px;
        padding-block: 6px;
        display: grid;
        place-content: center;
        white-space: nowrap;
        height: 100%;
        text-align: center;
        border-left: 1px solid var(--cl-bk);

        li:nth-of-type(1) & {
            border-left: none;
        }

        .bl-nav_contact & {
            padding-block: 8px;
            background-color: var(--cl-sub);
            color: #fff;
            border-left: none;
        }
    }


}

@media (max-width:768px) {
    :root {
        --cl-toggle: var(--cl-main);
    }

    /*
スマホ時ハンバーガー
基本は追従ヘッダー
———————————*/
    /* ───────── 隠しトグル ───────── */
    .el-nav_toggle {
        display: none;
    }

    /* ───────── ハンバーガー／× ボタン ───────── */
    .el-nav_btn {
        display: none;

        @media (max-width:768px) {
            width: 32px;
            height: 24px;
            /* ★ ここでアイコンを完全中央揃え！ */
            display: flex;
            align-items: center;
            /* 垂直中央 */
            justify-content: center;
            /* 水平中央 */
            cursor: pointer;
            user-select: none;
            z-index: 1100;
            position: relative;
        }
    }

    /* 3本線 */
    .el-nav_icon,
    .el-nav_icon::before,
    .el-nav_icon::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background: var(--cl-toggle);
        /* サイトの色によって変更 */
        border-radius: 2px;
        transition: transform .3s ease, opacity .3s ease;
    }

    .el-nav_icon {
        position: relative;
    }

    .el-nav_icon::before,
    .el-nav_icon::after {
        position: absolute;
        left: 0;
    }

    .el-nav_icon::before {
        top: -8px;
    }

    /* 線間隔 */
    .el-nav_icon::after {
        top: 8px;
    }

    /* ───────── フルスクリーンメニュー ───────── */
    .el-nav_menu {
        display: flex;
        gap: var(--gap-main);

        a {
            font-size: 2rem;
        }

        /* スマホ時 */
        @media (max-width:768px) {
            position: fixed;
            width: 100%;
            inset: 60px 0 0 0;
            /* 画面全面 */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgba(var(--cl-main-rgb), .95);
            list-style: none;
            padding: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity .3s ease;
            z-index: 1000;

            /* ★ 背後のボタンへクリック透過 */
            pointer-events: none;

            li {
                width: 200px;


            }

            a {
                /* ★ リンクだけは通常通り反応させる */
                pointer-events: auto;
                border: none;
                color: #fff;

                .bl-nav_contact & {
                    background-color: #fff;
                    color: var(--cl-main);
                }
            }
        }
    }

    .el-nav_menu a:hover,
    .el-nav_menu a:focus {
        opacity: .7;
    }

    /* ───────── “開いた”ときの状態 ───────── */
    .el-nav_toggle:checked + .el-nav_btn .el-nav_icon {
        background: transparent;

        /* 真ん中の線を消す */
    }

    .el-nav_toggle:checked + .el-nav_btn .el-nav_icon::before {
        transform: translateY(8px) rotate(45deg);
        background-color: var(--cl-toggle);
    }

    .el-nav_toggle:checked + .el-nav_btn .el-nav_icon::after {
        transform: translateY(-8px) rotate(-45deg);
        background-color: var(--cl-toggle);
    }

    .el-nav_toggle:checked ~ .el-nav_menu {
        opacity: 1;
        visibility: visible;
    }

    /* ───────── 背景スクロール停止 ( :has 対応ブラウザ ) ───────── */
    html:has(.el-nav_toggle:checked) {
        overflow: hidden;
    }
}

/*
メインイメージ
———————————*/
.sec-mainV {
    background-color: #ddd;
    width: 100%;
    min-height: 500px;
    background-image: url(/img/common/img-mainV_pc.jpg);
    background-size: cover;
    padding-block: 50px;
    position: relative;
    z-index: 1;
    margin-top: 60px;

    @media (max-width:768px) {
        padding-top: 0;
        min-height: auto;
        background: none;
        ;
    }
}

.sec-mainV.col-max {
    padding-left: 0;

    @media (max-width:768px) {
        padding: 0;
    }
}

.sec-mainV_inner {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    @media (max-width:768px) {

        grid-template-columns: 1fr;
        gap: 0;
    }

}

/* テキスト部分 */
.sec-mainV_txt {
    align-self: end;
}

.bl-mainV_txt.un-pc {
    height: fit-content;
    max-width: 600px;

    img {}

    > span {
        font-size: 2.7rem;
        padding-left: calc(6vw + 10px);
        padding-bottom: 5px;
        color: var(--cl-sub3);
        text-shadow:
            0px 0px 3px rgba(255, 255, 255, 1),
            0px 0px 6px rgba(255, 255, 255, 1),
            0px 0px 9px rgba(255, 255, 255, 1),
            0px 0px 12px rgba(255, 255, 255, 1);

        > span {
            font-size: 2em;
            padding-inline: 5px;
        }
    }

    h3 {
        padding: 10px 10px 10px calc(6vw + 10px);
        position: relative;

        /* 医薬品 */
        .un-pharmaceuticals & {
            width: clamp(280px, 27vw, 350px);
        }

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--cl-sub3);
            mix-blend-mode: multiply;
            border-radius: inherit;
            pointer-events: none;
            z-index: -1;

        }
    }

    p {
        padding: 10px 10px 10px 6vw;
    }

    @media (max-width:768px) {
        display: none;
    }
}

.bl-mainV_txt.un-sp {
    width: 100%;

    @media (min-width:769px) {
        display: none;
    }
}

/* フォーム */
.sec-mainV .el-form::before {
    opacity: 0.9;
}

@media (max-width:768px) {

    .sec-mainV .el-form {
        display: none;
    }
}

/*———————————
メイン
———————————*/
/*
共通
———————————*/

:root {
    /* 画像サイズ変数 */
    --img-size: 40px;
    /* 線幅 */
    --border-stroke: 2px;
    /* 色 */
    --cl-fukidashi-ttl: var(--cl-main);
    --cl-fukidashi-border: var(--cl-main);
}

/* テキスト */

.txt-a {
    font-size: 2.6rem;

    @media (max-width:768px) {
        font-size: 2.2rem;
    }
}

.txt-b {
    font-size: 2.6rem;

    @media (max-width:768px) {
        font-size: 2.2rem;
    }
}

/* 各セクション見出し */
:where(.el-section-ttl) {
    text-align: center;
    padding-block-end: 30px;
    margin-bottom: 40px;

    @media (max-width:768px) {
        padding-block-end: 15px;
        margin-bottom: 15px;
    }

    :where(h2) {
        font-size: 3.4rem;
        padding-block: 20px;
        color: var(--cl-fukidashi-ttl);
        line-height: 1.6;

        @media (max-width:768px) {
            font-size: 2.6rem;
            padding-top: 0;
        }

        .fs-big {
            font-size: 125%;
        }
    }

    .el-fukidashi {
        display: grid;
        grid-template-columns: 1fr var(--img-size) 1fr;


        & div {
            /* 横線 */
            border-top: var(--border-stroke) solid var(--cl-fukidashi-border);
        }

        & .icon-line {
            /* 吹き出し部分 */
            width: var(--img-size);
            height: auto;
            overflow: visible;
            padding-top: calc(var(--border-stroke) / 2);

            path {
                fill: none;
                stroke: var(--cl-fukidashi-border);
                stroke-width: var(--border-stroke);
                vector-effect: non-scaling-stroke;
                stroke-linecap: round;
                stroke-linejoin: round;

            }
        }
    }
}

/* グラデーションボタン */
.el-btn_grd {

    font: 600 clamp(1.9rem, 5vw, 2.6rem)/1 "Noto Sans JP", serif;
    text-align: center;
    display: block;
    margin-inline: auto;
    color: var(--cl-main);
    background: linear-gradient(180deg, #fff 13.5%, #95c0ce);
    --shadow-rest: 2px 4px 5px 3px rgba(0 0 0 / .4);
    --shadow-hover: 0 1px 10px rgba(0 0 0 / .4);
    width: min(100%, 700px);
    padding: 20px 50px;
    box-shadow: var(--shadow-rest);
    transition: transform .15s ease, box-shadow .15s ease;

    /* ホバー & キーボードフォーカス両対応 */
    &:is(:hover, :focus-visible) {
        transform: translateY(2px);
        box-shadow: var(--shadow-hover);
        text-decoration: none;
    }

    span.fs-big {
        font-size: 120%;
    }

    @media (max-width:768px) {
        padding: 20px 15px;
        line-height: 1.6;
    }
}

.el-btn_grd.un-dark {
    background: linear-gradient(180deg, #4D92BF 13.53%, #0D335E 100%);
    color: #fff;
}

/*
無料診断中
———————————*/

.sec-shindan {
    display: grid;
    place-content: center;
    grid-template-columns: 1fr;
    background-color: var(--cl-main);
    padding-block: 70px;

    @media (max-width:768px) {
        padding-block: 40px;
    }

    .txt-main {
        text-align: center;
        font-size: 3rem;
        color: #fff;
        line-height: 1.6;
        margin-bottom: 40px;

        @media (max-width:768px) {
            font-size: 2.2rem;
            flex-direction: column;
            margin-bottom: 25px;
        }

        > span {
            @media (max-width:768px) {
                font-size: 125%;
                display: block;
            }
        }
    }


}

/*
お悩み .sec-onayami
———————————*/

.sec-onayami {
    padding-block: 50px 160px;
    background-image: url(/img/img-onayami-bg.jpg);
    background-size: cover;
    background-position: right;

    @media (max-width:768px) {
        padding-block: 50px 80px;
        background-position: center;
    }
}

.sec-onayami .un-color {
    --cl-fukidashi-ttl: var(--cl-sub3);
    --cl-fukidashi-border: var(--cl-bk);
}

.bl-onayami_list {
    width: 100%;

    ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5em;

        @media (max-width:768px) {
            gap: 1.8em;
        }

    }

    & li {
        font-size: 2.2rem;
        display: flex;
        align-items: center;
        gap: 0.5em;
        color: var(--cl-sub3);


        @media (max-width:768px) {
            font-size: 2rem;
            gap:
        }

        &::before {
            content: "▶";
            font-size: 125%;
            flex-shrink: 0;
            color: var(--cl-sub);

            @media (max-width:768px) {
                font-size: 100%;
                gap: 1em;
            }
        }

        p {
            font-weight: 700;
            font-size: 2.2rem;
            letter-spacing: 1px;

            @media (max-width:768px) {
                font-size: 1.8rem;
            }
        }



        /* ハイライト */
        span {
            font-size: 120%;
            text-decoration: underline;
            text-decoration-thickness: 0.5em;
            text-decoration-color: rgba(201, 243, 255, 0.7);
            text-underline-offset: -0.2em;
            text-decoration-skip-ink: none;
            font-weight: 800;
        }
    }
}

/*
お問い合わせ
———————————*/
:root {
    --tri-size: min(50px, 3vw);
    --border-len: 50px;
    --border-thk: 1px;
    --cl-line: #fff;
}

.sec-contactLink {
    padding-block: 70px;
    margin-top: calc(var(--tri-size) * -2);
    background-color: var(--cl-main);
    /* 三角部分 */
    clip-path: polygon(0% 0%,
            45% 0%,
            50% var(--tri-size),
            55% 0%,
            100% 0%,
            100% 100%,
            0% 100%);

    @media (max-width:768px) {
        padding-block: 50px;
    }
}

.sec-contactLink .col-max_inner {
    display: grid;
    gap: 30px
}

.box {
    font-size: clamp(2.2rem, 2.5vw, 3rem);
    text-align: center;
    line-height: 2;
    width: 100%;
    max-width: var(--col-main);
    display: grid;
    place-content: center;
    margin-inline: auto;
    padding: 20px;

    color: var(--cl-line);
    background:
        /* 左上 ─ 横線 */
        linear-gradient(to right, var(--cl-line) 0 var(--border-len), transparent 0) top left,
        /* 左上 ─ 縦線 */
        linear-gradient(to bottom, var(--cl-line) 0 var(--border-len), transparent 0) top left,
        /* 右下 ─ 横線 */
        linear-gradient(to left, var(--cl-line) 0 var(--border-len), transparent 0) bottom right,
        /* 右下 ─ 縦線 */
        linear-gradient(to top, var(--cl-line) 0 var(--border-len), transparent 0) bottom right;

    background-repeat: no-repeat;
    background-size:
        var(--border-len) var(--border-thk),
        /* 左上 横 */
        var(--border-thk) var(--border-len),
        /* 左上 縦 */
        var(--border-len) var(--border-thk),
        /* 右下 横 */
        var(--border-thk) var(--border-len);
    /* 右下 縦 */

    .fs-big {
        font-size: 125%;
        font-weight: bold;

        @media (max-width:768px) {
            font-size: 115%;
        }
    }

    br.sp {
        display: none;

        @media (max-width:768px) {
            display: block;
        }
    }

    @media (max-width:768px) {
        font-size: 2rem;
        padding: 15px;
    }
}

/*
3つの理由
———————————*/

.sec-reason {
    background-color: var(--cl-sub3);
    padding-block: 90px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/img/img-reason-bg.jpg);
    background-size: cover;
    display: grid;
    place-content: center;
    grid-template-columns: 1fr;
    gap: 50px;

    @media (max-width:768px) {
        padding-block: 50px;
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/img/common/img-reason-bg_sp.jpg);
    }
}

.sec-reason .un-color {
    --cl-fukidashi-ttl: #fff;
    --cl-fukidashi-border: #fff;
}

.sec-reason .el-section-ttl {}

.sec-reason {
    .txt-a {
        color: #fff;
        margin-bottom: 50px;
    }

    .txt-b {
        color: #fff;
        margin-bottom: 50px;
    }
}

/* 電力＞サービスについてメインコピー */
.reason-txt-main_big {
    font-size: 100%;
    font-weight: bold;
    text-decoration: underline;
}


.bl-reason ul {
    display: grid;
    gap: 85px;
    margin-bottom: 50px;

    @media (max-width:768px) {
        gap: 70px;
    }
}



/* 理由アイテム */

.bl-reason_item {
    color: #fff;
    display: grid;
    grid-template-columns: minmax(60px, 60px) 1fr 330px;
    gap: 25px;

    @media (max-width:768px) {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .un-pharmaceuticals & {
        grid-template-columns: minmax(60px, 60px) 1fr 150px;

        @media (max-width:768px) {
            grid-template-columns: 1fr;
            gap: 20px;
        }
    }

    /* 0X数字部分 */
    .bl-reason_num {
        font-size: clamp(40px, 6vw, 60px);
        width: fit-content;
        font-family: "Quattrocento Sans", sans-serif;
        font-weight: 700;
        font-style: italic;
        line-height: 1;

        @media (max-width:768px) {
            font-size: 38px;
            width: 100%;
            align-self: center;
            position: relative;
            display: flex;
            align-items: center;

            &::after {
                content: "";
                display: block;
                width: 100%;
                height: 1px;
                background-color: #fff;
                margin-left: 10px;
            }
        }
    }

    /* テキスト部分 */
    .bl-reason_txt {
        display: flex;
        flex-direction: column;
        gap: 15px;

        @media (max-width:768px) {

            gap: 18px;
            margin-bottom: 8px;
        }

        h3 {
            text-indent: -0.5em;
            font-size: 2.8rem;
            font-weight: 500;
            line-height: 1.4;

            /* 医薬品インデント打ち消し */
            .un-pharmaceuticals & {
                text-indent: 0;
            }

            @media (max-width:768px) {
                width: calc(100% - 55px);
                font-size: 2.6rem;
            }
        }

        p {
            font-size: 1.6rem;
            line-height: 1.6;
            font-weight: 300;
            font-family: "Noto Sans JP", serif;
        }
    }

    .bl-reason_img {
        img {
            width: 100%;
            display: block;
        }

        @media (max-width:768px) {
            grid-column: span 1;
        }


        /* 医薬品画像 */
        .un-pharmaceuticals & {
            background-color: rgba(216, 246, 255, 0.9);
            border-radius: 20px;
            padding: 20px;

            @media (max-width:768px) {
                width: 100%;
                padding-block: 15px;

                img {
                    margin-inline: auto;
                    width: 50%;
                }
            }
        }
    }

}



.bl-reason_point {
    font-size: 1.6rem;
    grid-column: 2/-1;
    color: #fff;
    font-family: "Noto Sans JP", serif;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, 0.45);
    padding: 15px;

    h4 {
        font-size: 1.7rem;
        font-weight: bold;
        margin-bottom: 10px;
    }

    @media (max-width:768px) {
        .un-electric & {
            grid-column: auto;
        }
    }
}
}

.bl-reason_DLtxt {
    margin-bottom: 30px;
    font-weight: bold;
    /*    font-size: 2.6rem;*/
    text-align: center;
    color: #fff;
    font-family: "Noto Serif JP", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

/* 電気料金個別修正*/
.un-reason_elec {
    .txt-main {
        font-size: 2.4rem;
        @media (max-width:768px) {
            font-size: 2.2rem;
        }
    }

    .bl-reason_item {
        background-color: #fff;
        color: var(--cl-sub);
        padding: 30px;
        grid-template-columns: minmax(60px, 60px) 1fr 280px;

        @media (max-width:768px) {
            grid-template-columns: 1fr;
        }
    }

    .bl-reason_item:nth-of-type(2) {
        grid-template-columns: minmax(60px, 60px) 1fr;

        @media (max-width:768px) {
            grid-template-columns: 1fr;
        }
    }

    /* 電気料金 画像 */
    .bl-reason_serviceimg {
        grid-column: 2/-1;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding-block: 20px;

        picture {
            max-width: 250px;
            justify-self: center;
        }

        @media (max-width:768px) {
            grid-column: auto;
        }
    }


    .bl-reason_point {
        background-color: #fff;
        border: 1px solid var(--cl-sub);
        color: var(--cl-sub);
    }

    .bl-reason_DLtxt {
        text-align: center;
    }
}

/*
支援実績
———————————*/

.sec-result {
    padding-block: 70px;
    background-image: url(/img/im-result-bg.jpg);
    background-size: cover;

    @media (max-width:768px) {
        padding-block: 50px;
    }

}

.sec-result .un-color {
    --cl-fukidashi-ttl: var(--cl-sub);
    --cl-fukidashi-border: var(--cl-sub);
}

.bl-result-maintxt,
.bl-result-maintxt.txt-a,
.bl-result-maintxt.txt-b {
    margin-bottom: 50px;

    /*
    text-align: center;*/
    @media (max-width:768px) {
        margin-bottom: 30px;
    }
}

.bl-result {
    display: grid;
    gap: 50px;
    margin-bottom: 70px;
}

.bl-result_item {
    display: grid;
    gap: 30px;

    .bl-result_ttl {
        font-size: 3rem;
        color: var(--cl-sub);
        width: 100%;
        max-width: max-content;
        border-bottom: 4px solid var(--cl-sub);

        @media (max-width:768px) {
            font-size: 2.4rem;
        }

        .ttl-1st {
            font-size: 1.8em;

            @media (max-width:768px) {
                font-size: 1.4em;
            }
        }

        .ttl-notice {
            font-size: 0.8em;
        }

    }

    .bl-result_img {
        width: 80%;
        margin: auto;

        @media (max-width:768px) {
            width: 100%;
        }
    }

    .bl-result_list {
        display: flex;
        /* 横並び */
        flex-wrap: wrap;
        /* 足りなくなったら折り返す */
        gap: 1.2rem;
        font-family: "Noto Sans JP", serif;

        li {
            flex: 0 1 auto;
            background-color: var(--cl-main);
            color: #fff;
            font-weight: 600;
            font-size: 2.2rem;
            padding: 5px 16px;

            @media (max-width:768px) {
                font-size: 1.6rem;
                padding: 5px 12px;
            }
        }

        .bl-result_list-notice {
            font-size: 16px;
            letter-spacing: 1px;
            margin-top: 5px;


        }


    }
}

.bl-result_img-cost {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: center;
    gap: 30px;


    .bl-result_img {
        width: 100%;
        max-width: 230px;


        .un-electric & {
            max-width: 250px;
        }


    }

    &.un-device {
        @media (max-width:768px) {
            gap: 20px;
            grid-template-columns: 1fr 1fr;
        }


    }
}

.bl-result_img-pharm {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;

    .bl-result_img {
        width: 100%;
        border: 1px solid var(--cl-main);
    }
}

.bl-result_point {
    font-size: 1.6rem;
    grid-column: 2/-1;
    color: var(--cl-bk);
    font-family: "Noto Sans JP", serif;
    border: 1px solid var(--cl-main);
    background-color: #fff;
    padding: 15px;

    h4 {
        color: var(--cl-main);
        font-size: 1.7rem;
        font-weight: bold;
        margin-bottom: 10px;
    }
}

.bl-result_subtxt {
    /*font-size: 3rem;*/
    text-align: center;
    color: var(--cl-main);
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 30px;
}

.bl-result_subtxt.txt-b {}

.sec-result .el-btn_grd,
.el-btn_grd.un-dark {

    background: linear-gradient(180deg, #4D92BF 13.53%, #0D335E 100%);
    color: #fff;
}

/* 景品表示法 */
.bl-result_notice {
    font-size: 1.6rem;
    padding-top: 40px;
    display: grid;
    place-content: center;
}

/*
流れ
———————————*/
.sec-flow {
    padding-block: 70px;
    background-color: var(--cl-main);

    .txt-main {
        /*font-size: clamp(2.2rem, 2.6vw, 2.8rem);
        color: #fff;
        display: grid;
        place-content: center;
        margin-bottom: 50px;*/
    }

    @media (max-width:768px) {
        padding-block: 50px;
    }
}

.sec-flow .el-section-ttl {
    margin-bottom: 20px;
}

.sec-flow .un-color {
    --cl-fukidashi-ttl: #fff;
    --cl-fukidashi-border: #fff;
}

.sec-flow .txt-b {
    color: #fff;
    margin-bottom: 50px;
}

.bl-flow {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
}

.bl-flow_item {
    width: 100%;
    background: #fff;
    padding: 15px 20px;
    display: grid;
    grid-template-columns: auto minmax(11em, max-content) minmax(200px, 1fr);
    gap: 20px;
    align-items: center;
    font-size: 2rem;

    @media (max-width:768px) {
        grid-template-columns: auto 1fr;
        padding: 20px;
        gap: 16px;
    }

    span {
        color: var(--cl-main);
        font-family: "Quattrocento Sans", sans-serif;
        font-weight: 700;
        font-style: italic;
        font-size: 180%;
        margin-bottom: -0.1em;

        @media (max-width:768px) {
            font-size: 2.7rem;
        }
    }

    h3 {
        color: var(--cl-main);
        white-space: nowrap;

        @media (max-width:768px) {
            font-size: 2.4rem;
        }

    }

    p {
        font-size: 1.6rem;
        line-height: 1.6;
        font-family: "Noto Sans JP", serif;

        @media (max-width:768px) {
            grid-column: span 2;
        }
    }
}

.arrow.border {

    display: inline-block;
    width: 12px;
    /* サイズはお好みで */
    height: 12px;
    border-right: 3px solid #fff;
    /* 色は文字色と連動 */
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
    /* 「>」の向きに傾ける */
}


/*
質問
———————————*/
.sec-QA {
    padding-block: 70px;

    @media (max-width:768px) {
        padding-block: 50px;
    }
}

.sec-QA .un-color {
    --cl-fukidashi-ttl: var(--cl-main);
    --cl-fukidashi-border: var(--cl-main);
}

:root {
    --cl-accent: #95c0ce;
    /* 枠線・ベタ・Qラベルの色 */
}

.bl-QA {
    margin-bottom: 50px;

}

.bl-QA li {
    border-bottom: 1px solid var(--cl-main)
}

/* ---------- アコーディオン枠 ---------- */
.qa {
    margin-block: 20px;
    border-radius: 5px;
    overflow: hidden;

    @media (max-width:768px) {
        margin-block: 15px;
    }
}

/* ---------- summary 行 ---------- */
.bl-QA_Q {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;

    align-items: center;
    gap: 20px;
    padding: 10px 12px;
    font-weight: 600;

    @media (max-width:768px) {
        gap: 10px;
        padding-inline: 0;
    }
}

.bl-QA_Q::-webkit-details-marker {
    display: none;
}

/* Safari/Chrome 用 */

/* 「Q.」ラベル */
.bl-QA_mark {
    font-family: "Quattrocento Sans", sans-serif;
    color: var(--cl-main);
    font-size: 3.2rem;
    line-height: 1;
    font-weight: 100;

    @media (max-width:768px) {
        font-size: 2.6rem;
    }
}

.bl-QA_txt {
    font-size: 2.2rem;

    @media (max-width:768px) {
        font-size: 1.8rem;
    }

}

/* ---------- プラス／マイナスアイコン ---------- */
.bl-QA_icon {
    width: 40px;
    height: 40px;
    background: var(--cl-main);
    /* ベタ色 */
    border-radius: 3px;
    /* 角丸にしないなら削除 */
    display: grid;
    place-items: center;
    /* ＋ を中央揃え */
    position: relative;
    flex-shrink: 0;
    /* 狭くても潰れない */

    @media (max-width:768px) {
        width: 30px;
        height: 30px;
    }
}

/* 横棒・縦棒 */
.bl-QA_icon::before,
.bl-QA_icon::after {
    content: '';
    background: #fff;
    /* 棒の色（白） */
    transition: transform .15s ease;
}

.bl-QA_icon::after {
    /* 横棒 */
    width: 20px;
    height: 2px;
    position: absolute;

    @media (max-width:768px) {
        width: 15px;
    }
}

.bl-QA_icon::before {
    /* 縦棒 */
    width: 2px;
    height: 20px;
    position: absolute;

    @media (max-width:768px) {
        height: 15px;
    }
}

/* 開いたら縦棒を消して「－」に */
.bl-QA_item[open] .bl-QA_icon::before {
    transform: scale(0);
}

/* ---------- 回答エリア ---------- */
.bl-QA_A {
    padding: 10px 12px 12px;
    line-height: 1.7;

    @media (max-width:768px) {
        padding-inline: 0;
    }

    p {
        font-size: 1.8rem;
        line-height: 1.6;
        font-family: "Noto Sans JP", serif;

        @media (max-width:768px) {
            font-size: 1.6rem;
        }
    }
}

.bl-QA_subtxt {
    /*
    font-size: 3rem;*/
    text-align: center;
    margin-bottom: 30px;
    color: var(--cl-main);
    font-weight: bold;
    font-feature-settings: "palt"
}

/* タブ分け */
/* お好みで色を微調整してください */
:root {
    --qa-accent: var(--cl-main);
    --qa-border: var(--cl-main);
    --qa-bg: #fff;
    --qa-muted: var(--cl-main);
    --qa-radius: 10px;
}

.el-tabsQA {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* ラジオは“見えないけど操作できる”安全な隠し方 */
.el-tabsQA_input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* タブ（label） */
.el-tabsQA_tab {
    display: inline-block;
    width: 80%;
    max-width: 200px;
    justify-self: center;
    padding: 10px;
    border: 1px solid var(--qa-border);
    background: #f7f7f7;
    color: var(--qa-muted);
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    text-align: center;
    font-family: "Noto Sans JP", serif;
    font-size: 2rem;
}

/* 左右の角丸（2個想定） */
.el-tabsQA_tab:first-of-type {
    border-radius: var(--qa-radius);
    grid-column: 1;
}

.el-tabsQA_tab:last-of-type {
    border-radius: var(--qa-radius);
    grid-column: 2;
}

/* アクティブ強調（直後の label を太字＆下線風） */
#qaTab1:checked + .el-tabsQA_tab,
#qaTab2:checked + .el-tabsQA_tab {
    background: var(--cl-main);
    color: #fff;
}

/* パネル枠 */
.el-tabsQA_panels {
    grid-column: span 2;
    padding-block: 50px 0px;

    @media (max-width:768px) {
        padding-block: 10px 0px;
    }
}

/* 切替（中の .bl-QA を隠す/出すだけ） */
.el-tabsQA_panels > .bl-QA {
    display: none;
}

#qaTab1:checked ~ .el-tabsQA_panels > .bl-QA:nth-of-type(1) {
    display: block;
}

#qaTab2:checked ~ .el-tabsQA_panels > .bl-QA:nth-of-type(2) {
    display: block;
}

/* ふわっと表示（任意） */
.el-tabsQA_panels > .bl-QA {
    opacity: 0;
    transition: opacity .2s ease;
}

#qaTab1:checked ~ .el-tabsQA_panels > .bl-QA:nth-of-type(1),
#qaTab2:checked ~ .el-tabsQA_panels > .bl-QA:nth-of-type(2) {
    opacity: 1;
}

/*
フォーム
———————————*/

.sec-form {
    padding-block: 80px;

    position: relative;
    z-index: 1;
    background-image: url(/img/img-form-bg.jpg);
    background-size: cover;

    @media (max-width:768px) {
        background-image: url(/img/common/img-reason-bg_sp.jpg);
        padding-block: 50px;
    }

}

@media (max-width:768px) {
    .sec-form .el-section-ttl h2 {

        & span {
            font-size: 100%;
        }
    }
}

.sec-form .un-color {
    --cl-fukidashi-ttl: #fff;
    --cl-fukidashi-border: #fff;
}

.bl-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: fit-content;
    gap: 20px;

    @media (max-width:768px) {
        grid-template-columns: 1fr;

    }

    .un-pharmaceuticals & {
        grid-template-columns: 5fr 4.7fr;

        @media (max-width:768px) {
            grid-template-columns: 1fr;
        }

    }
}

.bl-form_txt {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;

    h3 {
        font-size: 3rem;
        line-height: 1.6;

        @media (max-width:768px) {
            font-size: 2.2rem;
        }
    }

    ul {
        font-family: "Noto Sans JP", serif;
        font-size: 1.8rem;
        text-indent: -1em;
        padding-left: 1em;
        display: grid;
        gap: 6px;

        @media (max-width:768px) {
            font-size: 1.6rem;
        }
    }

}

.sec-form .el-form::before {
    opacity: 0.75;
}

.bl-form_subtxt {
    grid-column: 1/-1;
    text-align: center;
    font-size: 2.2rem;
    line-height: 1.5;
    color: #fff;
    padding-block: 30px;

    @media (max-width:768px) {
        font-size: 2.1rem;
    }
}

/*
CUCについて
———————————*/

.sec-about {
    padding-block: 70px;
    gap: 60px;
    background-image: url(/img/im-result-bg.jpg);
    background-size: cover;

    .ttl-sub {
        /*
        font-size: 3rem;*/
        color: var(--cl-main);
        line-height: 1.5;
        margin-bottom: 1em;
        word-break: auto-phrase;

    }

    .txt-main {
        font-size: 1.8rem;
        margin-bottom: 2em;
        line-height: 1.5;

        @media (max-width:768px) {
            font-size: 1.6rem;
        }
    }
}

/* supportリスト */
.sec-supportlist {
    padding-block: 30px;
}

.bl-supportlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;

    @media (max-width:768px) {
        grid-template-columns: 80%;
        place-content: center;
    }
}

.bl-about {
    align-items: start;
    padding: 20px;
    color: var(--cl-sub3);
    font-size: 1.6rem;
    background-image: url(/img/img-about-map.png);
    background-position: right bottom;
    background-size: 53%;
    background-repeat: no-repeat;
    padding-bottom: 10%;

    @media (max-width:768px) {
        padding-inline: 0;
        background: none;
    }
}

.bl-about_ttl {
    margin-bottom: 15px;
    letter-spacing: 1px;

    h3 {
        font-size: 3rem;
        color: var(--cl-main);

    }

    .txt-sub {
        font-size: 3rem;
        font-weight: bold;
        margin-bottom: 4px;

        span {
            font-size: 150%;
            color: var(--cl-sub2);
        }
    }

    .txt-notice {
        font-size: 1.6rem;
    }

    @media (max-width:768px) {
        background-image: url(/img/img-about-map.png);
        background-position: right bottom;
        background-size: 100%;
        background-repeat: no-repeat;
        padding-bottom: 80%;

    }
}

.bl-about_list {
    width: 60%;
    padding-right: 40px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    row-gap: 12px;
    padding: 15px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 90%);

    @media (max-width:768px) {
        width: 100%;
        grid-template-columns: 1fr;
    }
}

.bl-about_list dt,
.bl-about_list dd {
    font-family: "Noto Sans JP", serif;
}

.bl-about_list dt {
    grid-column: 1;
    font-weight: bold;
}

.bl-about_list dd {
    grid-column: 2;
    margin: 0;

    @media (max-width:768px) {
        grid-column: 1;
        border-bottom: 1px dotted var(--cl-sub3);
        padding-bottom: 12px;
    }
}

.bl-about_list a {
    background-color: var(--cl-sub2);
    text-align: center;

    padding: 10px;
    color: #fff;
    grid-column: 1 / -1;
    max-width: 200px;
    margin-top: 10px;
}

.bl-about_img {
    grid-column: 3;
    max-width: 300px;
}

/* 追従ボタン */

.el-sticky-btn {
    display: none;
}


@media (max-width: 768px) {
    .el-sticky-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 56px;
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
        border-top: 1px solid #fff;
        background: var(--cl-sub2);
        text-decoration: none;
        position: fixed;
        left: 0;
        bottom: env(safe-area-inset-bottom, 0);
        z-index: 999;
        transition: opacity .3s;
    }

    /* 下コンテンツが隠れないよう余白確保 */
    body {
        padding-bottom: 56px;
    }
}


/*———————————
フッター
———————————*/

.sec-footnav {
    justify-content: space-between;
    align-items: center;
    padding-block: clamp(2em, 3vw, 4em);
}

.el-footer_address {
    width: fit-content;
    line-height: 1.6;
    letter-spacing: 1px;
}

.el-footer_link {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 幅を自動で 1:1 に均等化 */
    gap: 2vw;

    a {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
        text-align: center;
        background-color: var(--cl-main);
        color: #fff;
        font-weight: 600;
        transition: opacity .5s;
        padding: 10px;

        &:hover {
            text-decoration: none;
            opacity: 0.5;

        }

        .link-tel & {
            font-size: var(--fs-md);
        }

        .link-cuc & {
            font-size: var(--fs-sm);
            background-color: var(--cl-sub2);
        }
    }

}

.sec-poicy {
    text-align: center;
    padding: 1em;
    background-color: var(--cl-main);
    color: #fff;
    font-size: 1.4rem;
}


/* reCAPTCHA */
.grecaptcha-badge {
    display: none;
}