@charset "UTF-8";

/* @charset "UTF-8"; */
/* レスポ  基本スマホ*/
/*
    @include mq(sm) {
        color: yellow;
    }

    @include mq(lg) {
        color: red;
    }
/*

/* 基本カラー */
:root {
    --red-color: #e00000;
    --black-color: #000;
    --white-color: #fff;
    --yellow-color1: #f8e700;
    --yellow-color2: #ff9900;
    --green-color: #00b900;
    --blue-color: #0400ec;
    --gray-color: #848484;
}

/* Regular (標準) */
@font-face {
    font-family: "NotoSansJP-Medium";
    src: url("font/NotoSansJP-Medium.woff2") format("woff2");
    font-weight: Medium;
    font-style: normal;
    font-display: swap;
}

/* Bold (太字) */
@font-face {
    font-family: "NotoSansJP-Bold";
    /* ↓ 太字用WOFF2ファイルのパスを指定 */
    src: url("font/NotoSansJP-ExtraBold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* 数字 */
@font-face {
    font-family: "InterBold";
    src: url("font/Inter_Bold_full.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html {
    font-family: "NotoSansJP-Medium", sans-serif;
    letter-spacing: -0.76px;
    word-break: keep-all;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

body {
    font-size: 21px;
    line-height: 1.5;
    color: var(--black-color);
    margin: 0;
    padding: 0;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 33px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.1;
    letter-spacing: -2px;
}

.bold {
    font-family: "NotoSansJP-Bold", sans-serif;
}

.inter {
    font-family: "InterBold", "NotoSansJP-Bold", sans-serif;
    font-weight: 700;
    letter-spacing: -2px;
}

.fc_yellow1 {
    color: var(--yellow-color1);
}

.fc_yellow2 {
    color: var(--yellow-color2);
}

.fc_yellow3 {
    color: var(--yellow-color2);
}

.fc_red {
    color: var(--red-color);
}

.fc_blue {
    color: var(--blue-color);
}

.fc_gray {
    color: var(--_gray-color);
}

.fs_60per {
    font-size: 60%;
}

.fs_80per {
    font-size: 80%;
}

.fs_130per {
    font-size: 130%;
}

img {
    vertical-align: bottom;
}

.pd {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin-inline: auto;
}

.footer {
    font-size: 15px;
    margin: 0;
    padding: 0;
    text-align: center;
    text-decoration: underline;
}

.footer_bg {
    background-color: #ffffff;
}

.footer:hover {
    color: orange;
}

.ta_c {
    text-align: center;
}

.border_y {
    position: relative;
    display: inline-block;
}

.border_y::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 10px;
    background: var(--yellow-color2);
    z-index: -1;
}

@media screen and (min-width: 768px) {
    .border_y::after {
        bottom: 10px;
    }
}

.mt_s {
    margin-top: 10px;
}

.mb_m {
    margin-bottom: 20px;
}

.pc_only {
    display: none;
}

@media screen and (min-width: 1100px) {
    .pc_only {
        display: block;
    }
}

.sp_only {
    display: block;
}

@media screen and (min-width: 1100px) {
    .sp_only {
        display: none;
    }
}

/**********************基本スマホ***************************/
header {
    background-color: var(--white-color);
    display: flex;
    align-items: center;
    padding: 5px;
    justify-content: center;
    margin-inline: auto;
}

@media screen and (min-width: 1100px) {
    header {
        padding: 15px 10px;
    }
}

.top_logo {
    max-width: 387px;
    width: 120%;
    padding-right: 0px;
    margin-left: -78px;
}

.top_renraku {
    display: flex;
    justify-content: flex-end;
}

.top_line img,
.top_tel img {
    max-height: 44px;
    padding: 2px;
}

@media screen and (min-width: 768px) {

    .top_line img,
    .top_tel img {
        max-height: inherit;
        padding: 0 0 0 20px;
    }
}

.top_tel {
    line-height: 1;
}

.top_pc_time {
    display: none;
}

@media screen and (min-width: 768px) {
    .top_pc_time {
        display: block;
        text-align: center;
        font-size: 18px;
        line-height: 1;
        padding-left: 40px;
    }
}

/* まず、共通のアニメーション定義を最初に記述 */

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        opacity: 1
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* すべての画面幅に対して適用される基本スタイル */
.top_img img {
    width: 100%;
}

.overlay-images-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* アニメーション画像の基本スタイル */
.anim-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    height: auto;
    opacity: 0;
    animation: fadeInOut 18s linear infinite;
    z-index: -1;
    /*背景の要素に隠れないように調整*/
}

/* 各デバイス別スタイル */

@media screen and (min-width: 768px) {
    /* PC用の特定スタイル */

    .anim-sp {
        display: none;
    }

    .top_pc_time {
        display: block;
        text-align: center;
        font-size: 18px;
        line-height: 1;
        padding-left: 40px;
    }

    .top_img {
        position: relative;
        width: auto;
        padding: 0 0 20px 0;
        text-align: center;
    }

    /* PC用の背景画像設定 */
    .top_img picture {
        position: relative;
    }
}

@media screen and (max-width: 767px) {
    /* 携帯用の特定スタイル */

    .top_img {
        position: relative;
        width: auto;
        padding: 0 0 20px 0;
        text-align: center;
    }

    .anim-pc {
        display: none;
    }

}


.top_price_inner {
    /* 背景画像設定 */
    background-size: cover;
    /* 画像を全体にフィットさせる */
    padding: 0px 0px 30px 0px;
}

.top_price_wrap {
    background: url("../img/bg_7.webp") no-repeat center;
    background-size: cover;
    /* 画面サイズに合わせて画像を拡大・縮小 */
    background-position: center;
    /* 画像を中央に配置 */
    background-repeat: no-repeat;
    /* 画像の繰り返しを防ぐ */
}


@media screen and (min-width: 1100px) {
    .top_price_wrapin {
        display: flex;
        justify-content: flex-start;
        margin-left: -110px;
    }

    .top_price_wrapin.bg_goki::before {
        background: url("../img/top_gokiimg.webp") no-repeat center;
        background-size: cover;
        display: block;
        width: 250px;
        height: 185px;
        content: "";
        position: relative;
        top: -30px;
        left: 0;
    }

    .top_price_wrapin.bg_kobae::before {
        background: url("../img/top_kobaeimg.webp") no-repeat center;
        background-size: cover;
        display: block;
        width: 250px;
        height: 185px;
        content: "";
        position: relative;
        top: -30px;
        left: 0;
    }

    .top_price_wrapin.bg_nomi::before {
        background: url("../img/top_nomiimg.webp") no-repeat center;
        background-size: cover;
        display: block;
        width: 250px;
        height: 185px;
        content: "";
        position: relative;
        top: -30px;
        left: 0;
    }

    .top_price_wrapin.bg_toko::before {
        background: url("../img/top_tokoimg.webp") no-repeat center;
        background-size: cover;
        display: block;
        width: 250px;
        height: 185px;
        content: "";
        position: relative;
        top: -30px;
        left: 0;
    }

    .top_price_wrapin.bg_kumo::before {
        background: url("../img/top_kumoimg.webp") no-repeat center;
        background-size: cover;
        display: block;
        width: 250px;
        height: 185px;
        content: "";
        position: relative;
        top: -30px;
        left: 0;
    }

    .top_price_wrapin.bg_kame::before {
        background: url("../img/top_kameimg.webp") no-repeat center;
        background-size: cover;
        display: block;
        width: 250px;
        height: 185px;
        content: "";
        position: relative;
        top: -30px;
        left: 0;
    }
}

.top_price {
    font-size: 35px;
    white-space: nowrap;
    overflow: hidden;
    margin-top: -10px;
    margin-bottom: -10px;
    line-height: 1;
    text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.25);
}

@media screen and (min-width: 450px) and (max-width: 767px) {
    .top_price {
        font-size: 56px;
        margin-top: 0px;
    }
}

@media screen and (min-width:768px) and (max-width:1099px) {
    .top_price {
        font-size: 74px;
        margin-top: 0px;
    }
}

@media screen and (min-width: 1100px) {
    .top_price {
        font-size: 90px;
        margin-top: 0px;
    }
}

.price_m {
    font-size: 20px;
}

@media screen and (min-width: 1100px) {
    .price_m {
        font-size: 64px;
    }
}

.price_yen {
    font-size: 20px;
}

@media screen and (min-width: 1100px) {
    .price_yen {
        font-size: 48px;
    }
}

.price_tax {
    font-size: 38px;
    padding-left: 3px;
}

@media screen and (min-width: 1100px) {
    top_limited .price_tax {
        font-size: 48px;
    }
}

.top_limited {
    border: 5px solid #000;
    background: #fff;
    text-align: center;
    font-size: 22px;
    position: relative;
    padding: 20px 5px 5px;
    margin-bottom: 10px;
    max-width: 820px;
}

@media screen and (min-width: 768px) {
    .top_limited {
        margin-inline: auto;
    }

    .top_limited p {
        font-size: 65px;
        line-height: 1;
    }
}

.top_limited .top_limited_title {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 400px;
}

@media screen and (min-width: 1100px) {
    .top_limited .top_limited_title {
        max-width: 549px;
        top: -30px;
    }
}

.top_limited .top_limited_yen {
    font-size: 50px;
    line-height: 1;
}

@media screen and (min-width: 768px) {
    .top_limited .top_limited_yen {
        font-size: 93px;
    }
}

.top_area {
    display: grid;
    grid-template-columns: 100px 1fr;
    margin-bottom: 10px;
    max-width: 820px;
    margin-inline: auto;
}

@media screen and (min-width: 768px) {
    .top_area {
        grid-template-columns: 300px 1fr;
    }
}

.top_area dt {
    background: var(--black-color);
    color: var(--white-color);
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: 15px;
    justify-content: center;
}

@media screen and (min-width: 768px) {
    .top_area dt {
        font-size: 24px;
    }
}

.top_area dd {
    background: #d9d9d9;
    padding: 10px;
    font-size: 14px;
    text-align: left;
}

@media screen and (min-width: 768px) {
    .top_area dd {
        font-size: 24px;
        padding: 15px;
    }
}

.cv_btn_wrap {
    background: #fff;
}

@media screen and (min-width: 1100px) {
    .cv_btn_wrap {
        margin-top: -20px;
        margin-bottom: 0px;
    }
}

.top_cv_hukidasi {
    position: relative;
    top: 20px;
    z-index: 1;
}

@media screen and (min-width: 1100px) {
    .top_cv_hukidasi {
        top: 0;
    }
}

.cv_btn_tel a {
    background: #ff5304;
    padding: 15px 20px;
    color: #fff;
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 15px;
}

@media screen and (min-width: 1100px) {
    .cv_btn_tel a {
        width: 500px;
    }
}

.cv_btn_line a {
    background: var(--green-color);
    padding: 25px 10px;
    color: #fff;
    display: block;
    position: relative;
    text-align: center;
}

.cv_btn_line a img {
    max-width: 350px;
}

@media screen and (min-width: 768px) {
    .cv_btn_line a img {
        max-width: 768px;
    }
}

.cv_btn_tel a,
.cv_btn_line a {
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    width: 100%;
}

@media screen and (min-width: 1100px) {

    .cv_btn_tel a,
    .cv_btn_line a {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (min-width: 1100px) {
    .cv_btn_wrap2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        justify-content: center;
        margin-bottom: 20px;
        max-width: 1100px;
        width: 100%;
        margin-inline: auto;
    }
}

.top_cv_btn_teltime {
    font-size: 15px;
    letter-spacing: 0.75px;
}

@media screen and (min-width: 1100px) {
    .top_cv_btn_teltime {
        position: absolute;
        bottom: 13px;
        right: 115px;
        font-size: 18px;
    }
}

/***************こんなことありませんか****************/

.center-parent {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    .center-parent {
        min-height: 1vh;
        margin: 20px auto !important;
    }
}

.layout-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
    padding: 0 40px;
}

.text-section {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-outer {
    position: relative;
    width: 1000px;
    height: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1000px;
}

.ex_title {
    position: relative;
    width: 520px;
    background: #fff;
    text-align: center;
    font-size: 18px;
    margin: 0;
    padding: 40px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 5px dotted #dcf0ff;
    ;
    border-radius: 30px;

}

@media screen and (min-width: 768px) {
    .ex_title {
        font-size: 60px;
        width: 520px;
        padding: 40px 20px;
    }
}

.ex_list {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.ex_list li {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    text-align: center;
    animation: rotateItem 12s linear infinite;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.ex_list li img {
    width: 250px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.ex_list li:hover img {
    transform: scale(1.2);
}

.ex_list li p {
    font-size: 20px;
    margin: 0;
    transition: transform 0.3s ease;
}

.ex_list li:hover p {
    transform: scale(1.2);
}

.ex_list li:nth-child(1) {
    animation: rotate1 32s linear infinite;
}

.ex_list li:nth-child(2) {
    animation: rotate2 32s linear infinite;
}

.ex_list li:nth-child(3) {
    animation: rotate3 32s linear infinite;
}

.ex_list li:nth-child(4) {
    animation: rotate4 32s linear infinite;
}

.ex_list li:nth-child(5) {
    animation: rotate5 32s linear infinite;
}

.ex_list li:nth-child(6) {
    animation: rotate6 32s linear infinite;
}

@keyframes rotate1 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translate(300px) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) translate(300px) rotate(-360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(60deg) translate(300px) rotate(-60deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(420deg) translate(300px) rotate(-420deg);
    }
}

@keyframes rotate3 {
    0% {
        transform: translate(-50%, -50%) rotate(120deg) translate(300px) rotate(-120deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(480deg) translate(300px) rotate(-480deg);
    }
}

@keyframes rotate4 {
    0% {
        transform: translate(-50%, -50%) rotate(180deg) translate(300px) rotate(-180deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(540deg) translate(300px) rotate(-540deg);
    }
}

@keyframes rotate5 {
    0% {
        transform: translate(-50%, -50%) rotate(240deg) translate(300px) rotate(-240deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(600deg) translate(300px) rotate(-600deg);
    }
}

@keyframes rotate6 {
    0% {
        transform: translate(-50%, -50%) rotate(300deg) translate(300px) rotate(-300deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(660deg) translate(300px) rotate(-660deg);
    }
}

@media screen and (max-width: 767px) {
    .layout-container {
        flex-direction: column;
        padding: 20px;
        gap: 30px;
    }

    .circle-outer {
        width: 400px;
        height: 400px;
        flex: 0 0 400px;
    }

    .ex_title {
        font-size: 28px;
        width: 360px;
        padding: 20px 15px;
    }

    .ex_list li {
        width: 80px;
    }

    .ex_list li img {
        width: 70px;
        height: 70px;
    }

    .ex_list li p {
        font-size: 10px;
    }

    .ex_list li:nth-child(1) {
        animation: rotateMobile1 12s linear infinite;
    }

    .ex_list li:nth-child(2) {
        animation: rotateMobile2 12s linear infinite;
    }

    .ex_list li:nth-child(3) {
        animation: rotateMobile3 12s linear infinite;
    }

    .ex_list li:nth-child(4) {
        animation: rotateMobile4 12s linear infinite;
    }

    .ex_list li:nth-child(5) {
        animation: rotateMobile5 12s linear infinite;
    }

    .ex_list li:nth-child(6) {
        animation: rotateMobile6 12s linear infinite;
    }

    @keyframes rotateMobile1 {
        0% {
            transform: translate(-50%, -50%) rotate(0deg) translate(150px) rotate(0deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(360deg) translate(150px) rotate(-360deg);
        }
    }

    @keyframes rotateMobile2 {
        0% {
            transform: translate(-50%, -50%) rotate(60deg) translate(150px) rotate(-60deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(420deg) translate(150px) rotate(-420deg);
        }
    }

    @keyframes rotateMobile3 {
        0% {
            transform: translate(-50%, -50%) rotate(120deg) translate(150px) rotate(-120deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(480deg) translate(150px) rotate(-480deg);
        }
    }

    @keyframes rotateMobile4 {
        0% {
            transform: translate(-50%, -50%) rotate(180deg) translate(150px) rotate(-180deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(540deg) translate(150px) rotate(-540deg);
        }
    }

    @keyframes rotateMobile5 {
        0% {
            transform: translate(-50%, -50%) rotate(240deg) translate(150px) rotate(-240deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(600deg) translate(150px) rotate(-600deg);
        }
    }

    @keyframes rotateMobile6 {
        0% {
            transform: translate(-50%, -50%) rotate(300deg) translate(150px) rotate(-300deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(660deg) translate(150px) rotate(-660deg);
        }
    }
}

/***************難しい理由****************/
.dif_title {
    font-size: 28px;
}

.dif_title img {
    max-width: 230px;
}

@media screen and (min-width: 768px) {
    .dif_title img {
        max-width: inherit;
    }
}

@media screen and (min-width: 768px) {
    .dif_title {
        font-size: 57px;
    }
}

.dif_txt1 {
    font-size: 25px;
}

@media screen and (min-width: 768px) {
    .dif_txt1 {
        font-size: 33px;
    }
}

.dif_txt1 span {
    background-color: var(--yellow-color2);
    font-size: 47px;
}

@media screen and (min-width: 768px) {
    .dif_txt1 span {
        font-size: 73px;
    }
}

.dif_txt2 {
    font-size: 21px;
}

@media screen and (min-width: 768px) {
    .dif_txt2 {
        font-size: 46px;
    }
}

@media screen and (min-width: 768px) {
    .dif_oenai {
        background-size: cover;
        padding-bottom: 80px;
    }
}

.triangle_black {
    width: 0;
    height: 0;
    border-top: 30px solid black;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    margin-inline: auto;
}

@media screen and (min-width: 768px) {
    .triangle_black {
        border-top: 80px solid black;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }
}



.but img {
    width: 183px;
}

@media screen and (min-width: 768px) {
    .but img {
        width: inherit;
    }
}

.dif_saihatu {
    font-size: 20px;
    background: url("../img/diff_cry_woman.webp") no-repeat left bottom;
    padding-left: 30dvw;
    padding-right: 10px;
    padding-bottom: 30px;
    padding-top: 50px;
    margin-top: -40px;
    background-size: contain;
    margin-inline: auto;
    max-width: 400px;
    width: 100%;
}

@media screen and (min-width: 768px) {
    .dif_saihatu {
        font-size: 33px;
        width: inherit;
        max-width: 820px;
        background-size: contain;
        padding-left: 250px;
    }

    .dif_saihatu span {
        font-size: 36px;
    }
}

@media screen and (min-width: 768px) and (min-width: 768px) {
    .dif_saihatu span {
        font-size: 55px;
    }
}

.dif_kaiketu {
    background: var(--white-color);
    max-width: 1100px;
    border: 5px dotted #a3e3ff;
    border-radius: 30px;
}

.dif_kaiketu_txt {
    font-size: 26px;
    margin-top: 20px;
    color: var(--gray-color);
}

@media screen and (min-width: 768px) {
    .dif_kaiketu_txt {
        font-size: 57px;
    }
}

.dif_kaiketu_txt_2 {
    font-size: 26px;
    color: var(--gray-color);
}

@media screen and (min-width: 768px) {
    .dif_kaiketu_txt_2 {
        font-size: 57px;
    }
}

@media screen and (max-width: 767px) {
    .dif_kaiketu {
        padding-bottom: 20px;
    }
}

/****************リピートCV*********************/
.cv_title {
    background: var(--white-color);
    color: var(--gray-color);
    position: relative;
    padding: 30px 10px 20px 10px;
    text-align: center;
    font-size: 28px;
}

@media screen and (min-width: 768px) {
    .cv_title {
        font-size: 58px;
        margin-top: 100px;
        padding: 50px 10px 30px 10px;
    }
}

.cv_title::before {
    content: "";
    display: block;
    width: 100%;
    height: 120px;
    background: url(../img/cv_top.png) no-repeat center;
    background-size: contain;
    top: -20px;
    left: 0;
    z-index: 1;
    position: absolute;
}

@media screen and (min-width: 768px) {
    .cv_title::before {
        height: 200px;
        top: -50px;

    }
}

@media(max-width: 767px) {
    .cv_title::before {
        background-position: left 10px top;
        /* 左に10pxずらす */
    }
}

.cv_title span {
    z-index: 2;
    position: relative;
}

.cv_bg1 {
    background: var(--white-color);
}

@media screen and (min-width: 1100px) {
    .cv_bg1 {
        background: white(255, 255, 255);
        padding-top: 10px;
    }
}

.cv_bg2 {
    background: #ffffff url("../img/sp/cv_tri_bg.webp") no-repeat center bottom;
    background-size: cover;
}

@media screen and (min-width: 768px) {
    .cv_bg2 {
        background: #ffffff;
    }
}

@media screen and (min-width: 1100px) {
    .cv_bg2 {
        background: var(--white-color);
        padding-top: 40px;
    }
}

@media(max-width: 767px) {
    .cv_bg2 {
        background-size: cover;
        margin-top: 0px;
    }
}

@media screen and (min-width: 1100px) {
    .cv_bg2_wrap {
        max-width: 1100px;
        margin-inline: auto;
        display: flex;
        align-items: center;

    }
}

@media screen and (min-width: 1100px) {
    .cv_bg3 {
        background: var(--white-color);
        max-width: 1100px;
    }
}

.cv_price {
    font-size: 35px;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 0px;
    line-height: 1;
    text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.25);
    padding-bottom: -20px;
}

@media screen and (min-width: 450px) and (max-width: 767px) {
    .cv_price {
        font-size: 56px;
        margin-top: -40px;
    }
}

@media screen and (min-width:768px) and (max-width:1099px) {
    .cv_price {
        font-size: 74px;
        margin-top: -50px;
    }
}

@media screen and (min-width: 1100px) {
    .cv_price {
        font-size: 90px;
        margin-top: -20px;
        padding-bottom: 10px;
    }
}

.cv_after {
    border: 4px solid #000;
    background: #fff;
    max-width: 820px;
    margin-inline: auto;
    position: relative;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .cv_after::before {
        content: "";
        display: block;
        width: 40px;
        height: 40px;
        background: url(../img/cv_plusico.webp) no-repeat center;
        position: relative;
        z-index: 1;
        background-size: contain;
    }

    .cv_after span {
        padding-left: 5px;
    }
}

@media screen and (min-width: 1100px) {
    .cv_after {
        height: 100px;
        padding: 30px;
    }
}

.cv_limited {
    border: 5px solid #000;
    background: #fff;
    text-align: center;
    font-size: 22px;
    position: relative;
    padding: 20px 5px 5px;
    margin-bottom: 10px;

    max-width: 820px;
}

@media screen and (min-width: 768px) {
    .cv_limited {
        margin-inline: auto;
    }

    .cv_limited p {
        font-size: 44px;
        line-height: 1;
    }
}

@media screen and (min-width: 1100px) {
    .cv_limited {
        width: 550px;
    }
}

@media(max-width: 767px) {
    .cv_limited {
        margin-top: 5px;
    }
}

.cv_limited .cv_limited_title {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 400px;
}

@media screen and (min-width: 1100px) {
    .cv_limited .cv_limited_title {
        max-width: 549px;
        top: -30px;
    }
}

.cv_limited .cv_limited_yen {
    font-size: 50px;
    line-height: 1;
}

@media screen and (min-width: 768px) {
    .cv_limited .cv_limited_yen {
        font-size: 72px;
    }
}

@media screen and (min-width: 1100px) {
    .cv_btn_wrap3 {
        display: grid;
        grid-template-columns: 55% 1fr;
        grid-gap: 10px;
        justify-content: center;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 1100px) {
    .cv_wrap3in {
        width: 90%;
        margin-inline: auto;
        max-width: 1100px;
        margin-top: 30px;
        background-size: contain;
    }
}

.cv_hukidasi {
    position: relative;
    top: 20px;
    z-index: 1;
}

@media screen and (min-width: 1100px) {
    .cv_hukidasi {
        top: 0;
        margin-bottom: 10px;
    }
}

.cv_btn_teltime {
    font-size: 15px;
    letter-spacing: 0.45px;
}

@media screen and (min-width: 1100px) {
    .cv_btn_teltime {
        position: absolute;
        bottom: 13px;
        right: 150px;
        font-size: 18px;
    }
}

.triangle_red {
    width: 0;
    height: 0;
}

@media screen and (min-width: 768px) {
    .triangle_red {
        border-top: 70px solid var(--red-color);
        border-right: 80px solid transparent;
        border-left: 80px solid transparent;
        margin-inline: auto;
    }
}

/******************見分け方*****************/
.m_title {
    background: var(--whit-color);
    color: #242424;
    position: relative;
    margin-top: 90px;
    padding: 40px 10px 10px 10px;
    font-size: 30px;
    margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
    .m_title {
        font-size: 53px;
        padding: 50px 10px 10px 10px;
    }
}

.m_title::before {
    content: "";
    background: url(../img/title_img.webp) no-repeat center;
    background-size: contain;
    display: block;
    position: absolute;
    top: -70px;
    width: 80dvw;
    max-width: 363px;
    height: 100px;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width: 768px) {
    .m_title::before {
        height: 120px;
    }
}

@media screen and (min-width: 768px) {
    .miwake_list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        max-width: 1100px;
        margin-inline: auto;
    }
}


.miwake_omakase .triangle_white {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    left: 50%;
    z-index: 1;
}

.miwake_omakase2 {
    background: #ffffff;
    padding: 20px 10px 50px;
    color: var(--gray-color);
    font-size: 20px;
    line-height: 1.1;
}

@media screen and (min-width: 768px) {
    .miwake_omakase2 {
        font-size: 33px;
        padding: 30px 10px 80px;
    }
}

.miwake_omakase2 span {
    font-size: 32px;
}

@media screen and (min-width: 768px) {
    .miwake_omakase2 span {
        font-size: 64px;
    }
}

@media screen and (max-width: 767px) {
    .miwake_omakase2 span {
        font-size: 30px;
    }
}

/******************悪徳業者に気をつけて*****************/
.wa_title {
    margin-top: 30px;
    background-image: url(../img/w_line.webp), url(../img/w_line.webp);
    background-color: var(--yellow-color2);
    background-repeat: repeat-x, repeat-x;
    background-position: bottom, top;
    background-size: 200px, 200px;
    padding: 20px 10px 20px 10px;
}

@media screen and (min-width: 768px) {
    .wa_title {
        background-size: inherit;
        padding: 50px 10px 50px 10px;
    }
}

.wa_bg1 {
    background: var(--black-color);
    color: var(--white-color);
}

.wa_bg1_wrap {
    display: grid;
    grid-template-columns: 30% 1fr;
    align-items: center;
    max-width: 400px;
    margin-inline: auto;
    padding: 20px 10px 40px 10px;
    width: 100%;
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    .wa_bg1_wrap {
        font-size: 33px;
        max-width: 820px;
    }
}

.wa_bg2 {
    background-color: #353535;
    color: var(--white-color);
    padding-bottom: 20px;
}

.wa_aruaru {
    position: relative;
    top: -30px;
}

.wa_txt {
    font-size: 17px;
    margin-bottom: 30px;
    max-width: 820px;
    margin-inline: auto;
}

@media screen and (min-width: 768px) {
    .wa_txt {
        font-size: 24px;
    }
}

.wa_mame {
    background: var(--white-color) url(../img/wa_mame.webp) no-repeat right bottom;
    color: var(--black-color);
    background-size: contain;
    max-width: 710px;
    margin-inline: auto;
    padding: 15px;
    font-size: 13px;
    padding-right: 30%;
}

@media screen and (min-width: 768px) {
    .wa_mame {
        padding: 40px 250px 40px 40px;
        font-size: 20px;
    }
}

.wa_mame h4 {
    font-size: 18px;
    margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
    .wa_mame h4 {
        font-size: 30px;
    }
}

.wa_mame .wa_mame_aten {
    background-color: var(--yellow-color2);
    padding: 5px;
    margin-top: 15px;
}

.wa_mame2 {
    max-width: 710px;
    margin-inline: auto;
    background-color: var(--red-color);
    padding: 10px 10px 10px 10px;
}

@media screen and (min-width: 768px) {
    .wa_mame2 {
        padding: 10px 10px 20px 10px;
    }
}

.wa_mame2 img {
    max-width: 70dvw;
}

.mame2_nara {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 10px 0;
}

@media screen and (min-width: 768px) {
    .mame2_nara {
        margin: 10px 0 10px;
    }
}

.mame_yasu {
    background-color: var(--yellow-color2);
    padding: 10px 10px;
    color: var(--red-color);
    margin-right: 10px;
}

@media screen and (min-width: 768px) {
    .mame_yasu {
        padding: 15px 10px;
    }
}

.mame_price {
    color: var(--black-color);
    letter-spacing: inherit !important;
}

.mame_yasu_yen {
    font-size: 52px;
    line-height: 1;
}

@media screen and (min-width: 768px) {
    .mame_yasu_yen {
        font-size: 80px;
    }
}

.triangle_gray {
    width: 0;
    height: 0;
    border-top: 30px solid #353535;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    margin-inline: auto;
}

@media screen and (min-width: 768px) {
    .triangle_gray {
        border-top: 80px solid #353535;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }
}

.wa_nattoku {
    font-size: 50px;
}

@media screen and (min-width: 768px) {
    .wa_nattoku {
        font-size: 90px;
    }
}

@media screen and (min-width: 768px) {
    .wa_nayami {}
}

.wa_maeni {
    font-size: 23px;
}

@media screen and (min-width: 768px) {
    .wa_maeni {
        font-size: 55px;
    }
}

.wa_last {
    position: relative;
    margin-top: -20px;
    z-index: -1;
}


.wa_lastin {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    max-width: 1100px;
    margin-inline: auto;
    width: 100%;
    background: #ffffff;
    padding: 30px 20px 20px;
    font-size: 16px;
    align-items: center;
    margin-bottom: 50px;
    border: 5px dotted #dcf0ff;
    border-radius: 30px;
}

.wa_lastin img {
    width: 40dvw;
    margin-bottom: 10px;
}

@media screen and (min-width: 500px) and (max-width: 767px) {
    .wa_lastin {
        font-size: 25px;
    }
}

@media screen and (min-width:768px) and (max-width:1099px) {
    .wa_lastin {
        display: grid;
        font-size: 28px;
        grid-template-columns: 70% 30%;
        justify-content: center;
    }
}

@media screen and (min-width: 1100px) {
    .wa_lastin {
        display: grid;
        font-size: 30px;
        grid-template-columns: 600px 300px;
        justify-content: center;
        margin-bottom: 90px;
    }
}

/*******************流れ************************/
@media screen and (min-width: 1100px) {
    .nagare_wrap {
        background-color: var(--white-color);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        max-width: 1100px;
        margin-inline: auto;
        border: 5px dotted rgb(167, 231, 255);
        border-radius: 30px;
        padding-top: 60px;
        padding-bottom: 20px;
    }
}

.nagare_in {
    display: grid;
    grid-template-columns: 20px 1fr;
}

.nagare_in h4 {
    margin-bottom: 10px;
}

@media screen and (min-width: 1100px) {
    .nagare_in h4 {
        margin-bottom: 20px;
    }
}

.nagare_in h4 span {
    border-bottom: 5px solid var(--black-color);
    line-height: 1.6;
    letter-spacing: inherit;
    font-size: 24px;
}

@media screen and (min-width: 1100px) {
    .nagare_in {
        border: 1px solid var(--black-color);
        padding: 20px;
        display: flex;
        height: 260px;
    }
}

@media screen and (max-width: 767px) {
    .arrow {
        position: relative;
        display: inline-block;
        width: 1px;
        height: 100%;
        margin: 0 6.4px;
        border-radius: 9999px;
        background-color: #000000;
    }

    .arrow::before,
    .arrow::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: calc(50% - 0.5px);
        width: 1px;
        height: 10px;
        border-radius: 9999px;
        background-color: #000000;
        transform-origin: 50% calc(100% - 0.5px);
    }

    .arrow::before {
        transform: rotate(45deg);
    }

    .arrow::after {
        transform: rotate(-45deg);
    }
}

.nagare_txt1,
.nagare_txt2,
.nagare_txt3 {
    background: url(../img/nagare_1.webp) no-repeat top left;
    padding-left: 85px;
    background-size: 70px;
    font-size: 15px;
    min-height: 110px;
    word-break: normal;
    overflow-wrap: normal;
}

@media screen and (min-width: 1100px) {

    .nagare_txt1,
    .nagare_txt2,
    .nagare_txt3 {
        min-height: 110px;
    }
}

.nagare_txt2 {
    background: url(../img/nagare_2.webp) no-repeat top left;
    background-size: 70px;
}

.nagare_txt3 {
    background: url(../img/nagare_3.webp) no-repeat top left;
    background-size: 70px;
}

.goal {
    margin-bottom: 40px;
}

@media screen and (min-width: 768px) {
    .goal {
        display: grid;
        grid-template-columns: 230px 1fr;
        padding: 20px;
        background-color: var(--yellow-color1);
        max-width: 1100px;
    }
}

.goal_title {
    background-color: var(--yellow-color2);
    padding: 20px 10px;
}

.goal_txt {
    background-size: 100px;
    padding: 20px 10px 20px 100px;
}

@media screen and (min-width: 768px) {
    .goal_txt {
        background-size: 180px;
        padding: 20px 10px 20px 200px;
        display: flex;
        align-items: center;
    }
}

@media screen and (min-width: 1100px) {
    .goal_txt {
        background-size: 180px;
        padding: 20px 10px 20px 200px;
    }
}

.copy {
    font-size: 10px;
    padding: 10px;
    margin-bottom: 100px;
}

@media screen and (min-width: 768px) {
    .copy {
        font-size: 15px;
        margin-bottom: 100px;
    }
}

/* 半透明背景＋軽いブラーで背景を透過＆視認性確保 */
.follow {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99999;

    /* 半透明黒に変更 */
    background-color: rgba(0, 0, 0, 0.65);
    /* 透明度を 0.65 に調整（好みに応じて 0.5〜0.8 を選んでください） */
    /* optional: 背景のブラー効果（モダンブラウザ向け） */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    /* 上の白い境界線も若干透過にして違和感を減らす */
    border-top: 2px solid rgba(255, 255, 255, 0.12);
}

@media screen and (min-width: 1100px) {
    .follow {
        position: fixed;
        padding: 10px;
        bottom: 0;
    }
}

.follow_wrap {
    max-width: 1100px;
    margin-inline: auto;
}

@media screen and (min-width: 1100px) {
    .follow_wrap {
        display: grid;
        grid-template-columns: 480px 600px;
        grid-gap: 20px;
        align-items: center;
    }
}

@media screen and (min-width: 613px) and (max-width: 1099px) {
    .follow_wrap {
        display: grid;
        align-items: center;
    }
}

.follow_top {
    color: var(--white-color);
    font-size: 15px;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.1;
    padding: 5px;
}

@media screen and (min-width: 1100px) {
    .follow_top {
        font-size: 32px;
        text-align: right;
    }
}

@media screen and (min-width: 613px) and (max-width: 1099px) {
    .follow_top {
        font-size: 24px;
    }
}


.follow_btn {
    display: grid;
    grid-template-columns: 103fr 81fr;
    background: var(--yellow-color1);
    grid-gap: 10px;
    padding: 5px 5px 10px 5px;
    justify-content: center;
    max-width: 600px;
    margin-inline: auto;
}

.follow_btn li a {
    position: relative;
    display: block;
}

@media screen and (min-width: 613px) {
    .follow_btn {
        padding: 5px 10px 5px 10px;
        border-radius: 10px;
    }
}

.follow_time {
    position: absolute;
    display: block;
    top: 2px;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.2px;
    width: 100%;
    text-align: center;
}

@media screen and (min-width: 450px) and (max-width: 550px) {
    .follow_time {
        font-size: 15px;
        top: 3px;
    }
}

@media screen and (min-width: 551px) {
    .follow_time {
        font-size: 18px;
        top: 5px;
    }
}

.area {
    background-color: #e1ebf2;
    width: 100%;
    padding: 20px 15px;
    margin-top: 50px;
}

@media screen and (min-width: 1100px) {
    .area {
        padding: 50px 10px;
        margin-top: 0;
    }
}

.area dl {
    max-width: 1100px;
    margin-inline: auto;
}

.area dl dt {
    font-size: 24px;
}

.area dl dd {
    font-size: 16px;
}

/*# sourceMappingURL=style.css.map */

/* 例：goki用画像スタイル */
.cv_priceimg_goki img {
    padding-left: 15px;
    padding-right: 15px;
    margin-inline: auto;
}

/* コバエ用画像スタイル */
.cv_priceimg_kobae img {
    padding-left: 15px;
    padding-right: 15px;
    margin-inline: auto;
}

/* ノミ用画像スタイル例 */
.cv_priceimg_nomi img {
    padding-left: 15px;
    padding-right: 15px;
    margin-inline: auto;
}

/* トコジラミ用画像スタイル例 */
.cv_priceimg_toko img {
    padding-left: 15px;
    padding-right: 15px;
    margin-inline: auto;
}

/* カメムシ用画像スタイル例 */
.cv_priceimg_kame img {
    padding-left: 15px;
    padding-right: 15px;
    margin-inline: auto;
}

/* クモ用画像スタイル例 */
.cv_priceimg_kumo img {
    padding-left: 15px;
    padding-right: 15px;
    margin-inline: auto;
}

.central-text {
    font-size: 30px;
    /* 文字の大きさ調整 */
    color: #ff9900;
    /* 文字の色調整（例：赤） */
    text-align: center;
    /* テキストを中央揃え */
    margin-top: -20px;
    /* 上下の余白調整 */
    margin-bottom: 0px;
    /* 上下の余白調整 */
}

@media screen and (min-width: 768px) {
    .central-text {
        font-size: 50px;
        /* PCサイズ */
        margin-top: 10px;
        /* 上下の余白調整 */
        margin-bottom: 20px;
        /* 上下の余白調整 */
    }
}

@media screen and (min-width: 1099px) {
    .central-text {
        font-size: 70px;
        /* PCサイズ */
        margin-top: 10px;
        /* 上下の余白調整 */
        margin-bottom: 20px;
        /* 上下の余白調整 */
    }
}

.price-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2列に */
    gap: 20px;
    /* 必要に応じて間隔調整 */
    max-width: 1100px;
    margin: 0 auto;
    /* 中央寄せ */
}

@media(min-width: 768px) {
    .price-container {
        position: relative;
        left: -70px;
        /* 表示上左にずれるだけ */
        row-gap: 70px;
        /* PC用に横の幅を調整 */
        column-gap: 150px;
        margin-top: 0px;
    }
}

@media(max-width: 1100px) {
    .price-container {
        position: relative;
        left: 1px;
        /* 表示上左にずれるだけ */
        /* PC用に横の幅を調整 */
        column-gap: 1px;
        margin-top: 0px;
    }
}

.price_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.price_content img {
    height: 110px;
    object-fit: contain;
}

@media screen and (max-width: 1100px) {
    .price_content img {
        max-width: 100%;
        /* 画像の最大幅をコンテナ幅に合わせる */
        height: auto;
        /* 高さを自動調整して比率を維持 */
    }
}

.top_a {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20px;
    /* 上下の余白調整 */
    margin-bottom: 0px;
    /* 上下の余白調整 */
}

.price-row @media screen and (min-width: 768px) {
    .top_a {
        height: 25vh;
    }
}

.goki-title {
    color: #8B4513;
    /* 茶色 */
    font-size: 40px;
    /* 大きく */
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    /* アンダーラインのスペース調整 */
    margin-left: -10px;
}

@media(min-width: 768px) {
    .goki-title {
        font-size: 65px;
        /* PC用に大きく設定 */
    }
}

.goki-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #8B4513;
    /* 黄色のアンダーライン */
}

.goki-title-margin {
    margin-bottom: 10px;
    /* このクラスだけに適用して他に影響しない */
}

.goki-img {
    width: 70px;
    /* 好きな大きさに調整 */
    height: auto;
    /* 縦横比を維持 */
    margin-right: 10px;
    /* 必要なら追加 */
}

.kobae-title {
    color: #858585;
    /* 茶色 */
    font-size: 40px;
    /* 大きく */
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    /* アンダーラインのスペース調整 */
    margin-left: -10px;
}

@media(min-width: 768px) {
    .kobae-title {
        font-size: 65px;
        /* PC用に大きく設定 */
    }
}

.kobae-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #858585;
    /* 黄色のアンダーライン */
}

.kobae-title-margin {
    margin-bottom: 10px;
    /* このクラスだけに適用して他に影響しない */
}

.kobae-img {
    width: 70px;
    /* 好きな大きさに調整 */
    height: auto;
    /* 縦横比を維持 */
    margin-right: 10px;
    /* 必要なら追加 */
}

.nomi-title {
    color: #63d300;
    /* 茶色 */
    font-size: 40px;
    /* 大きく */
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    margin-left: -10px;
    /* アンダーラインのスペース調整 */
}

@media(min-width: 768px) {
    .nomi-title {
        font-size: 65px;
        /* PC用に大きく設定 */
    }
}

.nomi-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #63d300;
    /* 黄色のアンダーライン */
}

.nomi-title-margin {
    margin-bottom: 10px;
    /* このクラスだけに適用して他に影響しない */
}

.nomi-img {
    width: 70px;
    /* 好きな大きさに調整 */
    height: auto;
    /* 縦横比を維持 */
    margin-right: 10px;
    /* 必要なら追加 */
}

.toko-title {
    color: #ef0000;
    /* 茶色 */
    font-size: 40px;
    /* 大きく */
    position: relative;
    display: inline-block;
    padding-bottom: 3px;
    margin-left: -10px;
    /* アンダーラインのスペース調整 */
}

@media(min-width: 768px) {
    .toko-title {
        font-size: 65px;
        /* PC用に大きく設定 */
    }
}

.toko-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #ef0000;
    /* 黄色のアンダーライン */
}

.toko-title-margin {
    margin-bottom: 10px;
    /* このクラスだけに適用して他に影響しない */
}

.toko-img {
    width: 70px;
    /* 好きな大きさに調整 */
    height: auto;
    /* 縦横比を維持 */
    margin-right: 10px;
    /* 必要なら追加 */
}

.text-top-bg {
    background: url(../img/bg_4.webp) no-repeat center center;
    background-size: 72%;

}

@media(max-width: 767px) {
    .text-top-bg {
        background-size: 92%;
    }
}

.text-replacement span {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
    /* アンダーラインとのスペース調整 */
    font-size: 70px;
    /* 必要に応じて調整 */
}

/* 白文字 */
.white {
    color: #fff;
    /* 白色 */
}

/* グレー文字 */
.gray {
    color: #848484;
    /* グレー */
}

/* 黄色文字 */
.yellow {
    color: #f8cf00;
    /* 黄色 */
}

/* アンダーライン（黄色線）を追加 */
.text-replacement span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    /* アンダーラインの太さ */
    background-color: #f8e700;
    /* 黄色の線 */
}

@media(max-width: 767px) {
    .text-replacement span {
        font-size: 30px;
        /* 小さくしたいサイズに調整 */
        padding-bottom: 3px;
        /* アンダーラインとのスペース調整 */
        margin-bottom: 30px;
    }

    /* アンダーラインの太さも調整したい場合 */
    .text-replacement span::after {
        height: 4px;
        /* 太さを小さく */
    }
}

@media(min-width: 768px) {
    .text-replacement span {
        font-size: 45px;
        /* 小さくしたいサイズに調整 */
        padding-bottom: 3px;
        /* アンダーラインとのスペース調整 */
        margin-top: 100px;
    }

    /* アンダーラインの太さも調整したい場合 */
    .text-replacement span::after {
        height: 4px;
        /* 太さを小さく */
    }
}

@media(min-width: 1099px) {
    .text-replacement span {
        padding-bottom: 5px;
        /* アンダーラインとのスペース調整 */
        font-size: 70px;
        /* 必要に応じて調整 */
        margin-top: 70px;
        margin-bottom: 15px;
    }

    /* アンダーラインの太さも調整したい場合 */
    .text-replacement span::after {
        height: 10px;
        /* 太さを小さく */
    }
}

.additional-message {
    font-size: 20px;
    /* 文字の大きさ調整 */
    color: #ff9900;
    /* 文字の色調整（例：赤） */
    text-align: center;
    /* テキストを中央揃え */
    margin-top: 0px;
    /* 上下の余白調整 */
    margin-bottom: -20px;
    /* 上下の余白調整 */
}

@media screen and (min-width: 768px) {
    .additional-message {
        font-size: 35px;
        /* PCサイズ */
        margin-top: -10px;
        /* 上下の余白調整 */
        margin-bottom: 50px;
        /* 上下の余白調整 */
    }
}

@media screen and (min-width: 1099px) {
    .additional-message {
        font-size: 50px;
        /* PCサイズ */
        margin-top: -10px;
        /* 上下の余白調整 */
        margin-bottom: 50px;
        /* 上下の余白調整 */
    }
}

.logo_container {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 必要に応じて調整 */
}

.goki_img {
    width: 60px;
    height: auto;
}

/* ポップアップの背景を半透明に、中央に表示 */
.popBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 画面全体 */
    height: 100%;
    /* 画面全体 */
    background: rgba(30, 50, 70, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    /* これを追加（非表示） */
    opacity: 0;
    /* 透明 */
    transform: scale(0.8);
    transition: all 0.3s ease;
    z-index: 9999;
    pointer-events: none;
}

/* ゴキブリ用 */
#popupBtn_goki:checked~.popBox {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* ノミ用 */
#popupBtn_nomi:checked~.popBox {
    /* それぞれのスタイル */
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* コバエ用 */
#popupBtn_kobae:checked~.popBox {
    /* それぞれのスタイル */
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* ポップアップの内容を囲む */
.popWrap {
    /* 背景画像を追加（bg_7.png） */
    background-color: rgba(255, 255, 255, 0.96);
    /* 可読性のための半透明白フォールバック */
    background-image: url("../img/bg_7.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    padding: 20px;
    border-radius: 30px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border: 5px solid rgb(158, 203, 227);
    /* 既存のデザインに合わせて残しています */

    position: relative;
    transition: all 0.3s ease;
}

/* 閉じるボタン：角に配置し、背景の×画像 */
.closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: url("/common/img/close_img01.png") no-repeat center;
    background-size: contain;
    cursor: pointer;
    font-size: 0;
}


.buttonStyle {
    display: inline-block;
    /* インラインブロックで横幅調整可 */
    max-width: 90%;
    /* 最大幅は画面の90%まで */
    width: auto;
    /* 内容に合わせて自動調整 */
    padding: 15px 20px;
    /* 縦横の余白は固定も可 */
    background-color: #336DFF;
    color: #fff;
    border-radius: 50px;
    cursor: pointer;
    font-size: 2rem;
    /* 例：相対的なサイズに */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, opacity 0.3s;
    margin-bottom: 50px;
    /* 必要に応じて調整 */
}

@media (max-width: 767px) {
    .buttonStyle {
        font-size: 1.5rem;
        padding: 10px 75px;
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .buttonStyle {
        font-size: 2rem;
        padding: 15px 400px;
        max-width: 60%;
    }
}

.popInner,
.popInner * {
    font-weight: 700 !important;
    /* 強制適用 - inline 指定を上書きするため !important を使用 */
}

/* 既存の .popInner スタイルは残す（これと併用します） */
.popInner {
    font-family: Arial, sans-serif;
    font-size: 1.2em;
    line-height: 1.5;
    color: #222;
    overflow-y: auto;
    max-height: 80vh;
}

.popInner table {
    width: 100%;
    border-collapse: collapse;
    /* 枠線を重ねてきれいに */
    margin-bottom: 20px;

}

/* セルに枠線と余白を付ける */
.popInner table td {
    border: 3px solid #ff0000;
    padding: 8px 12px;
    vertical-align: middle;

}

/* 見出しの間隔 */
.popInner h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.4em;
    color: #333;
}

.popInner h2 {
    font-size: 1.5em;
    /* もしくは 1.5rem などに調整 */
}


.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.list {
    width: 600px;
    text-align: left;
}

.item {
    display: flex;
    line-height: 1.5;
    align-items: center;
}

.item-num {
    width: 2em;
}

.price-line {
    position: relative;
    padding-bottom: 10px;
}

.price-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: orange;
}

.option-border {
    border: 2px solid #8B4513;
    padding: 8px;
    margin-bottom: 10px;
}

.separator {
    border-top: 2px solid #8B4513;
    margin: 10px 0;
}

.btnStyle {
    display: inline-block;
    padding: 12px 24px;
    background-color: #8B4513;
    /* お好きな色に変えてください */
    color: #fff;
    font-size: 1.2em;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    margin-top: -35px;
}

.btnStyle:hover {
    background-color: #8B4513;
    /* ホバー時の色変更例 */
}

.option-border_koba {
    border: 2px solid #969595;
    padding: 8px;
    margin-bottom: 10px;
}

.separator_koba {
    border-top: 2px solid #969595;
    margin: 10px 0;
}

.custom-underline_goki {
    position: relative;
    display: inline-block;
}

.custom-underline_goki::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    /* アンダーラインの位置を調整 */
    width: 100%;
    height: 2px;
    /* アンダーラインの幅を指定 */
    background-color: #8B4513;
    /* アンダーラインの色を指定 */
}

.custom-underline_nomi {
    position: relative;
    display: inline-block;
}

.custom-underline_nomi::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    /* アンダーラインの位置を調整 */
    width: 100%;
    height: 2px;
    /* アンダーラインの幅を指定 */
    background-color: #63d300;
    /* アンダーラインの色を指定 */
}

.custom-underline_kobae {
    position: relative;
    display: inline-block;
}

.custom-underline_kobae::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    /* アンダーラインの位置を調整 */
    width: 100%;
    height: 2px;
    /* アンダーラインの幅を指定 */
    background-color: #969595;
    /* アンダーラインの色を指定 */
}

.goki-icon {
    width: 46px;
    /* 横幅を30pxに設定 */
    height: auto;
    /* 縦横比を維持して高さを自動調整 */
    vertical-align: middle;
    /* テキストと縦に揃える */
    margin-left: -20px;
    /* 右側に少し余白を追加 */
    display: inline-block;
    /* インライン表示にする */
}

.goki_mark {
    width: 18px;
    /* 横幅を30pxに設定 */
    height: auto;
    /* 縦横比を維持して高さを自動調整 */
    vertical-align: middle;
    /* テキストと縦に揃える */
    margin-left: 3px;
    /* 右側に少し余白を追加 */
    margin-bottom: 3px;
    display: inline-block;
    /* インライン表示にする */
}

.icon_goki {
    width: 18px;
    /* 横幅を30pxに設定 */
    height: auto;
    /* 縦横比を維持して高さを自動調整 */
    vertical-align: middle;
    /* テキストと縦に揃える */
    margin-left: 3px;
    /* 右側に少し余白を追加 */
    margin-bottom: 0px;
    display: inline-block;
    /* インライン表示にする */
}

@media (min-width: 768px) {
    .cv_btn_line img[src="common/img/cv_line.png"] {
        position: relative;
        top: -13px;
        /* 上に10pxずらす */
    }
}

.cv_btn_linetime {
    font-size: 15px;
    letter-spacing: 0.45px;
}

@media screen and (min-width: 1100px) {
    .cv_btn_linetime {
        position: absolute;
        bottom: 13px;
        right: 210px;
        font-size: 18px;
    }
}

.nomibtnStyle {
    display: inline-block;
    padding: 12px 24px;
    background-color: #63d300;
    /* お好きな色に変えてください */
    color: #fff;
    font-size: 1.2em;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.nomibtnStyle:hover {
    background-color: #63d300;
    /* ホバー時の色変更例 */
}

.detail-note {
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: -10px;
    margin-left: 35px;
    color: #555;
    display: inline-flex;
    align-items: center;
}

@media (min-width: 768px) {
    .detail-note {
        font-size: 22px;
        margin-top: 8px;
        margin-bottom: -50px;
    }
}

@media (min-width: 1100px) {
    .detail-note {
        font-size: 35px;
        margin-top: 5px;
        margin-bottom: -100px;
    }
}

.hand-icon {
    width: 24px;
    height: auto;
    animation: scalePulse 1.5s infinite;
    transform-origin: center;
}

@media (min-width: 768px) {
    .hand-icon {
        width: 36px;
        margin-left: 4px;
    }
}

@media (min-width: 1100px) {
    .hand-icon {
        width: 48px;
        margin-left: 8px;
    }
}

@keyframes scalePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.kobabtnStyle {
    display: inline-block;
    padding: 12px 24px;
    background-color: #969595;
    /* お好きな色に変えてください */
    color: #fff;
    font-size: 1.2em;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    margin-top: -35px;
}

.kobabtnStyle:hover {
    background-color: #969595;
    /* ホバー時の色変更例 */
}

/* 共通部分 */
.image-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* 画像間のスペース */
}

.image-row img {
    max-width: 30%;
    /* PC版は横並びの設定 */
    height: auto;
}

/* 携帯版は縦並びに変える */
@media (max-width: 767px) {
    .image-row {
        flex-direction: column;
        /* 縦並びに切り替え */
        align-items: center;
        /* 中央揃え */
    }

    .image-row img {
        max-width: 80%;
        /* 縦並びの場合は幅を大きめに調整 */
    }
}

.image-item {
    position: relative;
    display: inline-block;
    /* 画像と重ねるためにrelative */
    width: 100%;
    max-width: 300px;
    /* 必要に応じて調整 */
    margin: 10px;
}

.image-item img {
    width: 100%;
    height: auto;
    display: block;
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 半透明の背景で見やすく */
    color: #fff;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.text-overlay h3 {
    font-size: 0.85em;
    color: #ff9900;
    text-align: center;
    position: relative;
    top: -6px;
    left: 31px;
}

.equal-height {
    flex: 1;
    display: flex;
    /* flexを使って縦横中央揃え */
    align-items: center;
    justify-content: center;
    min-height: 80px;
    /* 任意の高さに調整 */
    margin: 0;
}


.text-overlay p {
    font-size: 0.45em;
    color: #848484;
    text-align: justify;
    line-height: 2;
}

.container {
    padding-top: 40px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border: 5px dotted #c3e6ff;
    max-width: 1100px;
    border-radius: 30px;
    /* 横方向で常に画面中央に配置するため */
    margin: 25px auto;
    /* 上下に余白を取りつつ左右中央 */
    width: calc(100% - 30px);
    /* スマホで左右の余白を確保 */
    box-sizing: border-box;
    /* width 計算にパディング/ボーダーを含める */
}

/* オプション：画面中央（縦 + 横）に完全に寄せたいとき */
.container--center-screen {
    width: min(1100px, 96vw);
    margin: 0 auto;
    /* 横方向中央 */
    min-height: calc(100vh - 80px);
    /* ヘッダー等に合わせ調整してください */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 縦方向中央 */
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* ラベルボタン */
.tabs {
    display: flex;
    flex-direction: column;
    gap: 80px;
    color: var(--gray-color);
}

.tabs label {
    padding: 10px 14px;
    background: #eee;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 背景色（順序が固定の場合の nth-child 指定） */
.tabs label:nth-child(1) {
    background: #fff6f0;
}

/* ゴキブリ（茶色） */
.tabs label:nth-child(2) {
    background: #eaeaea;
}

/* コバエ（グレー） - 黒文字のほうが見やすい */
.tabs label:nth-child(3) {
    background: #f3ffe8;
}

/* ノミ（緑） */
.tabs label:nth-child(4) {
    background: #ffe6e6;
}

/* トコジラミ（赤） */

.tabs label:hover {
    background: #ddd
}

.tab-icon {
    width: 56px;
    height: auto;
    display: inline-block;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width:767px) {
    .tab-icon {
        width: 44px;
    }
}

/* ラジオは視覚的に隠すが DOM 上は残す（ここでは画面外へ） */
.tabs input[type="radio"],
.radios-hidden {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.slides {
    position: relative;
    width: 600px;
    height: 500px;
    overflow: hidden;
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
}

/* チェックされたラジオのスライドを表示（重要：input と .slides が同一の親 .container の直下にあること） */
#tab-goki:checked~.slides .goki,
#tab-kobae:checked~.slides .kobae,
#tab-nomi:checked~.slides .nomi,
#tab-toko:checked~.slides .toko {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
}

/* 見た目の補助 */
.slide img {
    max-width: 100%;
    height: auto;
    display: block
}

.slide h3 {
    margin: 0 0 8px 0
}

/* gallery: デフォルトは非表示にして radio の checked で表示 */
.slides .gallery .item {
    display: none;
    width: 100%;
    height: auto;
    text-align: center;
}

.slides .gallery .item img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* goki の切替（radio に対応して各 item を表示） */
#goki-1:checked~.gallery .item-1,
#goki-2:checked~.gallery .item-2,
#goki-3:checked~.gallery .item-3 {
    display: block;
}

/* kobae */
#kobae-1:checked~.gallery .item-1,
#kobae-2:checked~.gallery .item-2,
#kobae-3:checked~.gallery .item-3 {
    display: block;
}

/* nomi */
#nomi-1:checked~.gallery .item-1,
#nomi-2:checked~.gallery .item-2,
#nomi-3:checked~.gallery .item-3 {
    display: block;
}

/* toko */
#toko-1:checked~.gallery .item-1,
#toko-2:checked~.gallery .item-2,
#toko-3:checked~.gallery .item-3 {
    display: block;
}

/* 既にあるはずですが再保証 */
.slide .arrow-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 30;
}

.slide .nav {
    display: none;
    /* :checked により表示 */
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% auto;
    border: none;
    padding: 0;
    background-color: transparent;
    cursor: pointer;
}

/* 左右位置 */
.slide .nav.prev {
    left: 8px;
}

.slide .nav.next {
    right: 8px;
}

/* 画像ファイルのパスは style.css の位置から見た相対パスに注意 */
.slide .nav.prev {
    background-image: url('../img/arrow-prev.png');
}

.slide .nav.next {
    background-image: url('../img/arrow-next.png');
}

/* goki 矢印クラス名に合わせる */
#goki-1:checked~.arrow-layer .g-for-1,
#goki-2:checked~.arrow-layer .g-for-2,
#goki-3:checked~.arrow-layer .g-for-3 {
    display: inline-flex;
}

#kobae-1:checked~.arrow-layer .k-for-1,
#kobae-2:checked~.arrow-layer .k-for-2,
#kobae-3:checked~.arrow-layer .k-for-3 {
    display: inline-flex;
}

#nomi-1:checked~.arrow-layer .n-for-1,
#nomi-2:checked~.arrow-layer .n-for-2,
#nomi-3:checked~.arrow-layer .n-for-3 {
    display: inline-flex;
}

#toko-1:checked~.arrow-layer .t-for-1,
#toko-2:checked~.arrow-layer .t-for-2,
#toko-3:checked~.arrow-layer .t-for-3 {
    display: inline-flex;
}

/* レスポンシブ微調整 */
@media (max-width: 767px) {
    .slide .nav {
        width: 40px;
        height: 40px;
        background-size: 70% auto;
    }
}

/* ドット見た目 */
.slides .dots {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 40;
}

.slides .dots label[for] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform .18s, background .18s;
}

#goki-1:checked~.dots label[for="goki-1"],
#goki-2:checked~.dots label[for="goki-2"],
#goki-3:checked~.dots label[for="goki-3"] {
    background: rgba(232, 127, 0, 0.95);
    transform: scale(1.18);
}

/* ===== kobae の選択中ドット ===== */
#kobae-1:checked~.dots label[for="kobae-1"],
#kobae-2:checked~.dots label[for="kobae-2"],
#kobae-3:checked~.dots label[for="kobae-3"] {
    background: rgba(145, 145, 145, 0.95);
    transform: scale(1.18);
}

/* ===== nomi の選択中ドット ===== */
#nomi-1:checked~.dots label[for="nomi-1"],
#nomi-2:checked~.dots label[for="nomi-2"],
#nomi-3:checked~.dots label[for="nomi-3"] {
    background: rgba(110, 255, 94, 0.95);
    transform: scale(1.18);
}

/* ===== toko の選択中ドット ===== */
#toko-1:checked~.dots label[for="toko-1"],
#toko-2:checked~.dots label[for="toko-2"],
#toko-3:checked~.dots label[for="toko-3"] {
    background: rgba(255, 27, 27, 0.95);
    transform: scale(1.18);
}

/* ===== FAQ（details/summary）スタイル ===== */
.faq-section {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 15px;
}

.faq-title {
    margin-bottom: 18px;
}

.faq-list details {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.faq-list summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    padding: 8px 6px;
    outline: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
}

/* ブラウザデフォルトのマーカーを消してカスタム矢印を表示 */
.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::marker {
    content: "";
}

/* 矢印（前） — summary の左に表示 */
.faq-list summary::before {
    content: "▸";
    display: inline-block;
    transform: rotate(0deg);
    transition: transform .18s ease;
    color: var(--black-color);
    font-size: 18px;
}

/* open（開いた状態） のとき矢印を回転 */
.faq-list details[open]>summary::before {
    transform: rotate(90deg);
}

/* 回答部分 */
.faq-answer {
    padding: 10px 12px 14px 30px;
    color: var(--gray-color);
    line-height: 1.6;
    font-size: 17px;
    border-top: 1px dashed rgba(0, 0, 0, 0.04);
    margin-top: 8px;
}

/* アクセシビリティ：キーボードで summary にフォーカスした時の表示 */
.faq-list summary:focus {
    box-shadow: 0 0 0 4px rgba(0, 128, 255, 0.12);
    border-radius: 6px;
}

/* レスポンシブ */
@media (max-width: 767px) {
    .faq-list summary {
        font-size: 16px;
    }

    .faq-answer {
        font-size: 15px;
        padding-left: 22px;
    }
}

/* ===== バックグラウンド テキストティッカー（トップ価格ブロック用） ===== */
.top_price_inner.top_a {
    position: relative;
    overflow: hidden;
}

/* ティッカー（背景レイヤ） */
.top_price_inner.top_a .bg-ticker {
    background-color: var(--white-color);
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* 内側横スクロール領域 */
.top_price_inner.top_a .bg-ticker__wrap {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: ticker-scroll 32s linear infinite;
}

/* グループ（複製されたブロック）*/
.top_price_inner.top_a .bg-ticker__group {
    display: flex;
    gap: 48px;
    margin-right: 60px;
    align-items: center;
}

/* テキストアイテム見た目（背景らしく薄め） */
.top_price_inner.top_a .bg-ticker__item {
    display: inline-block;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.06);
    /* 背景の濃さ（背景色に合わせて調整） */
    font-size: 210px;
    letter-spacing: 6px;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 既存コンテンツを前面へ（ticker は背景レイヤ） */
.top_price_inner.top_a>.top_price_wrapin_a>*:not(.bg-ticker) {
    position: relative;
    z-index: 2;
}

/* アニメーション（左へ） */
@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* スマホ向け調整 */
@media (max-width: 767px) {
    .top_price_inner.top_a .bg-ticker__item {
        font-size: 75px;
        letter-spacing: 3px;
        color: rgba(167, 167, 167, 0.06);
    }

    .top_price_inner.top_a .bg-ticker__group {
        gap: 28px;
        margin-right: 30px;
    }

    .top_price_inner.top_a .bg-ticker__wrap {
        animation-duration: 32s;
    }
}

.mainbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -9999;
}



/* stBox area */
.stBox {
    margin: 80px auto;
    max-width: 1100px;
}

.stBox__wrap {
    display: flex;
    /* フレックスボックスを使用 */
    flex-direction: row;
    /* 横並びにする */
    align-items: center;
    /* 垂直方向中央揃え */
    gap: 16px;
    /* テキストと画像間のギャップ */
    padding: 16px;
    background: #fff;
    position: relative;
    overflow: visible;
    border: 5px dotted #dcf0ff;
    ;
    border-radius: 30px;
}

.stIcon {
    position: absolute;
    top: -28px;
    /* オフセットは調整可能 */
    left: 16px;
    /* アイコンの位置 */
    width: 100px;
    height: 100px;
}

.stIcon img {
    width: 150%;
    height: 150%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
}

.stCont {
    text-align: left;
    /* テキストを左揃え */
    flex: 1;
    /* テキストが残りのスペースを占める */
}

.stTtl {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.stTxt {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}

.stTxt span {
    font-weight: 700;
    color: #000;
}

.stImg {
    flex: 0 0 auto;
    /* 画像のサイズに合わせる */
    max-width: 560px;
    /* 最大幅を設定 */
}

.stImg img {
    width: 100%;
    height: auto;
    display: block;
}

/* メディアクエリの中での調整 */
@media screen and (min-width:767px) and (max-width:1339px) {
    .stBox:first-child {
        margin-top: 6.53846vw;
    }

    .stBox__wrap {
        padding: 5.38462vw 3.84615vw;
        border-radius: 3.46154vw;
    }

    .stIcon {
        position: absolute;
        top: -6vw;
        left: 4.76923vw;
        width: 7.61538vw;
        height: 7.84615vw;
    }

    .stCont {
        text-align: left;
    }

    .stTtl {
        font-size: 4vw;
        line-height: 1.2;
    }

    .stTxt {
        font-size: 2vw;
    }

    .stImg {
        flex-shrink: 0;
        width: 31.5385vw;
        height: 22.3077vw;
    }

    .stImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media screen and (min-width:1340px) {
    .stBox__wrap {
        gap: 40px;
        padding: 40px;
        border-radius: 16px;
    }

    .stIcon {
        top: -60px;
        left: 32px;
        width: 80px;
        height: 80px;
    }

    .stCont {
        width: calc(100% - 420px);
    }

    .stTtl {
        font-size: 44px;
    }

    .stTxt {
        font-size: 20px;
    }

    .stImg {
        width: 410px;
        height: 290px;
    }

    .stImg img {
        object-fit: cover;
    }
}

/* stBox共通スタイル */
.stBox {
    margin: 80px auto;
    max-width: 1100px;
}

/* ========== セクション1: テキスト左、画像右 ========== */
.stBox01__wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    position: relative;
    overflow: visible;
    border: 5px dotted #dcf0ff;
    ;
    border-radius: 30px;
}

.stIcon01 {
    position: absolute;
    top: -28px;
    left: 16px;
    width: 100px;
    height: 100px;
}

.stIcon01 img {
    width: 150%;
    height: 150%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
}

.stCont01 {
    text-align: left;
    flex: 1;
}

.stTtl01 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.stTxt01 {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}

.stTxt01 span {
    font-weight: 700;
    color: #000;
}

.stImg01 {
    flex: 0 0 auto;
    max-width: 700px;
}

.stImg01 img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========== セクション2: テキスト右、画像左 ========== */
.stBox02__wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    position: relative;
    overflow: visible;
    border: 5px dotted #dcf0ff;
    ;
    border-radius: 30px;
}

.stIcon02 {
    position: absolute;
    top: -28px;
    right: 32px;
    width: 100px;
    height: 100px;
}

.stIcon02 img {
    width: 150%;
    height: 150%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
}

.stImg02 {
    flex: 0 0 auto;
    max-width: 560px;
    order: -1;
}

.stImg02 img {
    width: 100%;
    height: auto;
    display: block;
}

.stCont02 {
    text-align: left;
    flex: 1;
}

.stTtl02 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.stTxt02 {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}

.stTxt02 span {
    font-weight: 700;
    color: #000;
}

/* ========== セクション3: テキスト左、画像右 ========== */
.stBox03__wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    position: relative;
    overflow: visible;
    border: 5px dotted #dcf0ff;
    ;
    border-radius: 30px;
}

.stIcon03 {
    position: absolute;
    top: -28px;
    left: 16px;
    width: 100px;
    height: 100px;
}

.stIcon03 img {
    width: 150%;
    height: 150%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    display: block;
}

.stCont03 {
    text-align: left;
    flex: 1;
}

.stTtl03 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.stTxt03 {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
}

.stTxt03 span {
    font-weight: 700;
    color: #000;
}

.stImg03 {
    flex: 0 0 auto;
    max-width: 560px;
}

.stImg03 img {
    width: 100%;
    height: auto;
    display: block;
}


@media screen and (max-width:767px) {
    .stTtl01 {
        text-align: center;
    }

    .stTtl02 {
        text-align: center;
    }

    .stTtl03 {
        text-align: center;
    }
}

/* メディアクエリ: タブレット (768px - 1339px) */
@media screen and (min-width:768px) and (max-width:1339px) {
    .stBox {
        margin: 6.53846vw auto;
    }

    /* セクション1 */
    .stBox01__wrap {
        padding: 5.38462vw 3.84615vw;
        border-radius: 3.46154vw;
    }

    .stIcon01 {
        top: -3.84615vw;
        left: 4.76923vw;
        width: 7.61538vw;
        height: 7.84615vw;
    }

    .stCont01 {
        text-align: left;
    }

    .stTtl01 {
        font-size: 4vw;
        line-height: 1.2;
    }

    .stTxt01 {
        font-size: 2vw;
    }

    .stImg01 {
        flex-shrink: 0;
        width: 45vw;
        height: 45vw;
    }

    .stImg01 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* セクション2 */
    .stBox02__wrap {
        padding: 5.38462vw 3.84615vw;
        border-radius: 3.46154vw;
    }

    .stIcon02 {
        top: -3.84615vw;
        right: 4.76923vw;
        width: 7.61538vw;
        height: 7.84615vw;
    }

    .stImg02 {
        flex-shrink: 0;
        width: 45vw;
        height: 45vw;
    }

    .stImg02 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .stCont02 {
        text-align: left;
    }

    .stTtl02 {
        font-size: 4vw;
        line-height: 1.2;
    }

    .stTxt02 {
        font-size: 2vw;
    }

    /* セクション3 */
    .stBox03__wrap {
        padding: 5.38462vw 3.84615vw;
        border-radius: 3.46154vw;
    }

    .stIcon03 {
        top: -3.84615vw;
        left: 4.76923vw;
        width: 7.61538vw;
        height: 7.84615vw;
    }

    .stCont03 {
        text-align: left;
    }

    .stTtl03 {
        font-size: 4vw;
        line-height: 1.2;
    }

    .stTxt03 {
        font-size: 2vw;
    }

    .stImg03 {
        flex-shrink: 0;
        width: 45vw;
        height: 45vw;
    }

    .stImg03 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* メディアクエリ: デスクトップ (1340px以上) */
@media screen and (min-width:1340px) {

    /* セクション1 */
    .stBox01__wrap {
        gap: 40px;
        padding: 40px;
        border-radius: 16px;
    }

    .stIcon01 {
        top: -60px;
        left: 32px;
        width: 80px;
        height: 80px;
    }

    .stCont01 {
        width: calc(100% - 420px);
    }

    .stTtl01 {
        font-size: 44px;
    }

    .stTxt01 {
        font-size: 20px;
    }

    .stImg01 {
        width: 460px;
        height: 460px;
    }

    .stImg01 img {
        object-fit: cover;
    }

    /* セクション2 */
    .stBox02__wrap {
        gap: 40px;
        padding: 40px;
        border-radius: 16px;
    }

    .stIcon02 {
        top: -60px;
        right: 64px;
        width: 80px;
        height: 80px;
    }

    .stImg02 {
        width: 460px;
        height: 460px;
    }

    .stImg02 img {
        object-fit: cover;
    }

    .stCont02 {
        width: calc(100% - 420px);
    }

    .stTtl02 {
        font-size: 44px;
    }

    .stTxt02 {
        font-size: 20px;
    }

    /* セクション3 */
    .stBox03__wrap {
        gap: 40px;
        padding: 40px;
        border-radius: 16px;
    }

    .stIcon03 {
        top: -60px;
        left: 32px;
        width: 80px;
        height: 80px;
    }

    .stCont03 {
        width: calc(100% - 420px);
    }

    .stTtl03 {
        font-size: 44px;
    }

    .stTxt03 {
        font-size: 20px;
    }

    .stImg03 {
        width: 460px;
        height: 460px;
    }

    .stImg03 img {
        object-fit: cover;
    }
}

/* =========================
   pointo_ten_01 オーバーレイ配置（位置指定）
   ========================= */
.dif_points {
    display: flex;
    justify-content: center;
    margin: 18px 0 0;
    padding: 0 15px;
    box-sizing: border-box;
}

.points-bg {
    position: relative;
    width: 100%;
    max-width: 1100px;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    background: transparent;
}

/* 背景画像：100%幅で表示 */
.points-bg img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* オーバーレイ：画像全体を覆う */
.points-overlay {
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0 */
    display: block;
    pointer-events: none;
    /* 見た目だけ（内部 .point は pointer-events: auto） */
}

/* 共通のポイントボックス */
.point {
    position: absolute;
    pointer-events: auto;
    /* ボックスにアクセス可能にする（tab フォーカス等） */
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.94);
    /* 読みやすい白の半透明 */
    color: #111;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    font-weight: 800;
    line-height: 1.1;
    width: auto;
    max-width: 72%;
}

/* ① 上中央 */
.point-1 {
    top: 20%;
    left: 63%;
    transform: translateX(-50%);
    text-align: center;
    justify-content: center;
    max-width: 640px;
    font-size: 26px;
}

/* ② 中央より下にずらす（現状位置を参考に下げる） */
.point-2 {
    top: 68%;
    left: 20%;
    transform: translateX(-50%);
    max-width: 760px;
    font-size: 22px;
}

/* ③ 右側に寄せて下にずらす */
.point-3 {
    top: 68%;
    right: 6%;
    transform: none;
    max-width: 340px;
    font-size: 22px;
}

/* 丸い番号部分 */
.point-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffbd00;
    color: #111;
    font-weight: 900;
    font-size: 18px;
    flex-shrink: 0;
}

/* テキスト本文 */
.point-text {
    display: inline-block;
    font-size: 20px;
    letter-spacing: -0.4px;
}

/* =========================
   レスポンシブ（スマホ）: 縦積みで見やすく
   ========================= */
@media screen and (max-width: 767px) {
    .point {
        position: absolute;
        width: 50%;
        padding: 5px 5px;
        font-size: 10px;
    }

    .point-1 {
        top: 17%;
        left: 70%;
        font-size: 10px;
    }

    .point-2 {
        top: 70%;
        left: 25%;
        font-size: 10px;
        justify-content: center;
    }

    .point-3 {
        top: 70%;
        left: 50%;
        font-size: 10px;
        justify-content: center;
    }

    .point-index {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .point-text {
        font-size: 10px;
    }
}

/* デスクトップ微調整 */
@media screen and (min-width: 1100px) {
    .point-1 {
        top: 20%;
        font-size: 30px;
        max-width: 720px;
    }

    .point-2 {
        top: 73%;
        font-size: 26px;
    }

    .point-3 {
        top: 73%;
        font-size: 26px;
        right: 5%;
        max-width: 420px;
    }

    .point-index {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .point-text {
        font-size: 24px;
    }
}

/* アクセシビリティのフォーカス時強調（キーボード操作対応） */
.point:focus {
    outline: 3px solid rgba(255, 153, 0, 0.25);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* goal を nagare_wrap 内で扱うための調整 */
.nagare_wrap .goal_item {
    /* 小さい画面では普通に縦積み */
    padding: 18px;
    display: block;
    background: transparent;
}

/* PC 幅以上では nagare_wrap のグリッドを全幅で跨ぐ */
@media screen and (min-width: 1100px) {
    .nagare_wrap .goal_item {
        grid-column: 1 / -1;
        /* グリッド全幅を跨ぐ */
        display: grid;
        grid-template-columns: 230px 1fr;
        /* 既存の .goal と同じ内側レイアウト */
        gap: 20px;
        padding: 20px;
        align-items: center;
        background: var(--yellow-color1);
        /* 他の goal スタイルと統一 */
        border-radius: 10px;
    }

    .nagare_wrap .goal_item .goal_title {
        background-color: var(--yellow-color2);
        padding: 14px 8px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nagare_wrap .goal_item .goal_txt {
        padding-left: 12px;
        display: flex;
        align-items: center;
    }
}

@media screen and (min-width: 768px) and (max-width: 1099px) {
    .nagare_wrap .goal_item {
        grid-column: 1 / -1;
        /* グリッド全幅を跨ぐ */
        display: grid;
        grid-template-columns: 230px 1fr;
        /* 既存の .goal と同じ内側レイアウト */
        gap: 20px;
        padding: 20px;
        align-items: center;
        background: var(--yellow-color1);
        /* 他の goal スタイルと統一 */
        border-radius: 10px;
    }

    .nagare_wrap .goal_item .goal_title {
        background-color: var(--yellow-color2);
        padding: 14px 8px;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .nagare_wrap .goal_item .goal_txt {
        position: relative;
        /* 疑似要素の基準にする */
        background-color: var(--yellow-color1);
        padding: 0 0 0 0;
        overflow: visible;
        padding-left: 12px;
        display: flex;
        align-items: center;
    }

}


/* モバイルでの微調整（必要なら微調整してください） */
@media screen and (max-width: 767px) {
    .nagare_wrap .goal_item .goal_title {
        margin-bottom: 0px;
    }

    .nagare_wrap .goal_item .goal_txt {
        padding-left: 0;
        background-color: var(--yellow-color1);
    }
}

/* アクセシビリティ focus は既に .point:focus で実装済み。もし goal_item に tab 操作対応したい場合は下記を追加可能 */
.nagare_wrap .goal_item:focus-within {
    outline: 3px solid rgba(255, 153, 0, 0.15);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* 父要素がクリッピングしていないことを確認 */
.nagare_wrap {
    overflow: visible;
    background-color: var(--white-color);
    border: 5px dotted rgb(167, 231, 255);
    border-radius: 30px;
    padding-top: 60px;
    padding-bottom: 20px;
}


.nagare_wrap .goal_item {
    overflow: visible;
    /* 親が overflow:hidden の場合は画像が切れるので visible に */
}

@media screen and (min-width: 1100px) {

    /* もともとの .goal_txt の背景指定を分解 */
    .nagare_wrap .goal_item .goal_txt {
        position: relative;
        /* 疑似要素の基準にする */
        background-color: var(--yellow-color1);
        padding: 20px 10px 10px 100px;
        overflow: visible;
        /* 内部の疑似要素がはみ出すために visible に */
    }

    /* 画像を疑似要素で絶対配置し、要素外に表示させる */
    .nagare_wrap .goal_item .goal_txt::before {
        content: "";
        position: absolute;
        left: 530px;
        /* 画像を左にはみ出させる（調整可） */
        top: 50%;
        transform: translateY(-50%);
        width: 220px;
        /* 画像の見えるサイズ（調整可） */
        height: 220px;
        background-image: url("../img/nagare_4.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        /* contain/cover/指定pxを調整 */
        z-index: 0;
        /* 背景に置く */
        pointer-events: none;
        /* インタラクションを妨げない */
    }
}

/* テキストは前面に */
.nagare_wrap .goal_item .goal_txt>p,
.nagare_wrap .goal_item .goal_txt>* {
    position: relative;
    z-index: 2;
}

/* レスポンシブ調整（スマホでははみ出しを小さく） */
@media screen and (max-width: 767px) {
    .nagare_wrap .goal_item .goal_txt::before {
        left: -30px;
        width: 120px;
        height: 120px;
        background-size: contain;
    }
}

.soudan {
    padding-top: 30px;
    background: #fff;
    border: 5px dotted rgb(179, 239, 255);
    border-radius: 30px;
    max-width: 1100px;
    margin: 40px auto;
}

.deiff-bd {
    padding-top: 30px;
    background: #fff;
    border: 5px dotted rgb(179, 239, 255);
    border-radius: 30px;
    max-width: 1100px;
    margin: 20px auto;
}

.wakaru {
    padding-top: 50px;
}

/* customer-voices: お客様の声セクション用（JS不要） */
:root {
    --cv-bg: #fbfdff;
    --cv-card: #fff;
    --cv-accent: #0079ff;
    --cv-muted: #6b7280;
    --cv-radius: 12px;
    --cv-shadow: 0 10px 25px rgba(16, 24, 40, 0.08)
}

.cv-section {
    background: var(--cv-bg);
    padding: 48px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.04)
}

.cv-wrap {
    max-width: 1100px;
    margin: 0 auto
}

.cv-section .m_title {
    color: #0b2545;
    margin-bottom: 8px
}

.cv-section .lead {
    color: var(--cv-muted);
    margin-bottom: 28px
}

.cv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px
}

.cv-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--cv-card);
    border-radius: var(--cv-radius);
    overflow: hidden;
    padding: 18px 18px 64px;
    box-shadow: var(--cv-shadow);
    align-items: flex-start;
    position: relative
}

.cv-card .imgbox {
    width: 100%;
    display: flex;
    justify-content: center
}

.cv-card .imgbox figure,
.cv-card .imgbox img {
    display: block;
    border-radius: 9999px
}

.cv-card .cv-avatar {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 9999px;
    display: inline-block;
    border: 4px solid rgba(0, 0, 0, 0.06)
}

.cv-card .review {
    width: 100%;
    padding: 6px 4px 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.cv-card .review .rating {
    color: goldenrod;
    font-size: 15px;
    margin-bottom: 6px
}

.cv-card .review .text {
    margin: 0 0 10px;
    color: #111;
    font-size: 15px;
    line-height: 1.85;
    max-width: 70ch;
    white-space: pre-wrap;
    word-break: break-word;
    hyphens: auto
}

.cv-card .review .meta {
    color: var(--cv-muted);
    font-size: 13px;
    position: absolute;
    left: 18px;
    bottom: 14px;
    background: transparent
}

.cv-label {
    position: absolute;
    padding: 6px 8px;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 12px
}

.cv-before {
    background: linear-gradient(90deg, #ff8a00, #ff4d4d);
    left: 10px;
    top: 10px
}

.cv-after {
    background: linear-gradient(90deg, #0ac18d, #0079ff);
    right: 10px;
    bottom: 10px
}

.cv-note {
    margin-top: 14px;
    color: var(--cv-muted);
    font-size: 13px;
    text-align: center
}

/* 一列化（モバイル） */
@media (max-width:767px) {
    .cv-grid {
        grid-template-columns: 1fr
    }

    .cv-card {
        padding: 10px 10px 56px
    }

    .cv-card .cv-avatar {
        width: 120px;
        height: 120px
    }
}




/* 施工写真 — ビフォー/アフター ギャラリー（JS 不要）
   - 6枚セットを 2 セット連続表示して CSS アニメでシームレスループ
   - ホバー/フォーカスで拡大、アクセシビリティ配慮（tabindex・aria-hidden）
   - 複製セットは aria-hidden + tabindex=-1（スクリーンリーダ/キーボード重複を防ぐ）
*/

/* カスタムプロパティ（カード幅を 2 倍にしてあります） */
:root {
    --card-gap: 22px;
    --card-w: 640px;
    /* ← 旧 320px -> 2倍 */
    --card-img-h: 440px;
    /* ← 旧 220px -> 2倍 */
    --marquee-duration: 32s;
}

.cv-works {
    padding: 36px 16px;
    max-width: 1200px;
    margin: 36px auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 250, 250, 0.95));
    box-shadow: 0 8px 32px rgba(16, 24, 40, 0.06);
    border: 5px dotted #dcf0ff;
    border-radius: 30px;
}

/* サブタイトル */
.cv-works__sub {
    text-align: center;
    color: #6b7280;
    margin: 0 0 28px;
    font-size: 32px;
}

@media (max-width:767px) {
    .cv-works__sub {
        margin: 0 0 28px;
        font-size: 20px;
    }
}

/* マーキー領域（はみ出しを隠す） */
.cv-marquee {
    position: relative;
    overflow: hidden;
}

/* トラック（2セット並べて、-50% -> 0% 移動で1セット分動く） */
.cv-marquee__track {
    display: flex;
    gap: 0;
    align-items: stretch;
    min-width: max-content;
    animation: scroll-left var(--marquee-duration) linear infinite;
    will-change: transform;
}

/* マウス / フォーカスで一時停止（安定的に拡大できる） */
.cv-works:hover .cv-marquee__track,
.cv-marquee:focus-within .cv-marquee__track {
    animation-play-state: paused;
}

/* 内側のセット */
.cv-marquee__inner {
    display: flex;
    gap: var(--card-gap);
    align-items: stretch;
    flex: 0 0 auto;

    /* ここでセット末尾に余白を入れ、セット間の間隔を確保する。
       これにより track 全体の幅は「inner幅 × 2」になり、translateX(-50%) が正確に 1セット分を動かす。 */
    padding-right: var(--card-gap);

    /* サブピクセルの差異による描画ズレを少なくするため */
    box-sizing: content-box;
}

/* カード本体 */
.cv-gallery-card {
    width: var(--card-w);
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 300ms cubic-bezier(.2, .9, .2, 1), box-shadow 300ms ease;
    transform-origin: center center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
    flex: 0 0 var(--card-w);
    position: relative;
    /* z-index 効かせるため */
}

/* hover/focus の拡大を確実に適用（複製含め、マウス操作で拡大可能） */
.cv-gallery-card:focus,
.cv-gallery-card:hover {
    transform: scale(1.08);
    z-index: 60;
    /* 周囲より上に出るよう高めに設定 */
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.16);
}

/* メディア部（画像） */
.cv-gallery-card__media {
    background: #ddd;
}

.cv-gallery-card__media img {
    width: 100%;
    /* 2倍に拡大 */
    object-fit: cover;
    display: block;
}

/* キャプション */
.cv-gallery-card__caption {
    padding: 12px 14px 18px;
    font-size: 14px;
    color: #111;
    line-height: 1.3;
}

.cv-gallery-card__label {
    font-weight: 700;
    font-size: 13px;
    color: #374151;
    margin-bottom: 8px;
}

.cv-gallery-card__meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: #6b7280;
}

/* keyboard focus 見やすく */
.cv-gallery-card[tabindex] {
    outline: none;
}

.cv-gallery-card:focus {
    outline: 3px solid rgba(59, 130, 246, 0.16);
}

.cv-marquee__track .cv-gallery-card {
    flex-shrink: 0;
}

/* 補助バッジ */
.cv-gallery-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}

/* 画面幅が広い時はゆっくり */
@media (min-width: 1200px) {
    :root {
        --marquee-duration: 40s;
    }
}

/* レスポンシブ（元の見た目を維持しつつスマホで合理的に） */
@media (max-width: 900px) {
    :root {
        --card-w: 480px;
        --card-img-h: 360px;
    }

    /* 2倍→中程度に縮小 */
    .cv-gallery-card__media img {
        height: var(--card-img-h);
    }
}

@media (max-width: 767px) {

    /* スマホでは幅で制御 */
    .cv-gallery-card__media img {
        height: var(--card-img-h);
    }
}

/* アニメーションの方向（-50% -> 0%） */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ユーザー設定で動きを減らしたい場合に対応 */
@media (prefers-reduced-motion: reduce) {
    .cv-marquee__track {
        animation: none;
    }
}

/* 重要: 複製セットを aria-hidden にしてスクリーンリーダの重複を防ぐが
   マウスでの拡大は可能にしておく（pointer-events: auto にする） */
.cv-marquee__inner[aria-hidden="true"] {
    pointer-events: auto;
    user-select: none;
}

/* bad-vendor-section: 追加分のCSS（清潔感のあるスタイル） */
.bad-vendor-section {
    background: linear-gradient(180deg, #fafdff 80%, #eaf6ff 100%);
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(16, 24, 40, 0.06);
    padding: 48px 24px 36px;
    margin: 48px auto 0;
    max-width: 1100px;
}

.bad-vendor-title {
    font-size: 36px;
    color: #0079ff;
    text-align: center;
    margin-bottom: 32px;
    font-weight: 700;
    letter-spacing: -1px;
}

.bad-vendor-cases {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    margin-bottom: 36px;
}

.bad-vendor-case-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    padding: 24px 18px;
    font-size: 17px;
    color: #222;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 6px solid #0079ff;
}

.bad-vendor-case-card strong {
    color: #0079ff;
    font-size: 18px;
    margin-bottom: 6px;
}

@media (max-width: 900px) {
    .bad-vendor-cases {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .bad-vendor-cases {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bad-vendor-section {
        padding: 24px 8px 18px;
    }
}

.bad-vendor-problems,
.bad-vendor-advice {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    padding: 28px 22px 18px;
    margin-bottom: 28px;
}

.bad-vendor-subtitle {
    font-size: 24px;
    color: #0079ff;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.bad-vendor-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bad-vendor-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 17px;
    color: #222;
}

.bad-vendor-list .icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-block;
    background: #eaf6ff;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-size: 18px;
    color: #0079ff;
    font-weight: bold;
    margin-top: 2px;
}

.bad-vendor-list .icon-advice {
    background: #d2f7e7;
    color: #00b900;
}

.bad-vendor-list .icon-problem {
    background: #ffe6e6;
    color: #e00000;
}

.bad-vendor-list .icon-check {
    background: #fffbe6;
    color: #ff9900;
}

@media screen and (max-width: 767px) {

    /* コンテナを縦並びにし中央寄せ */
    .stBox__wrap {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    /* アイコンは小さく、wrap の外に収めない */
    .stIcon {
        position: relative !important;
        top: 0 !important;
        left: 0px !important;
        width: 0px !important;
        height: 0px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: none !important;
        margin-bottom: 6px !important;
    }

    .stIcon img {
        width: 90px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* テキストは中央揃えにして余白を調整 */
    .stCont {
        text-align: center !important;
        padding: 0 8px !important;
        order: 2 !important;
    }

    .stTtl {
        font-size: 26px !important;
        margin-top: 6px !important;
    }

    .stTxt {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* 画像は小さくして横幅に収まるように */
    .stImg {
        order: 1 !important;
        width: 86% !important;
        max-width: 360px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .stImg img {
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 10px !important;
    }

    /* .stBox__wrap のパディングをモバイル向けに圧縮 */
    .stBox {
        margin: 40px auto !important;
    }
}

@media screen and (max-width: 767px) {

    /* Ensure the stBox wrappers stack cleanly and center content */
    .stBox__wrap,
    .stBox01__wrap,
    .stBox02__wrap,
    .stBox03__wrap {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    /* Move icon into normal flow and reduce the size so it doesn't overlap */
    .stIcon,
    .stIcon01,
    .stIcon02,
    .stIcon03 {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 0 6px 0 !important;
        display: block !important;
    }

    .stIcon img,
    .stIcon01 img,
    .stIcon02 img,
    .stIcon03 img {
        width: 72px !important;
        height: auto !important;
        display: block;
        margin-inline: auto;
    }

    /* Make images smaller and centered, give rounded corners for nicer mobile look */
    .stImg01,
    .stImg02,
    .stImg03 {
        width: 70% !important;
        max-width: 360px !important;
        order: 1 !important;
        /* icon first, image next, text after */
    }

    .stImg01 img,
    .stImg02 img,
    .stImg03 img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        object-fit: contain;
        display: block;
    }

    /* Ensure content text sits below the image on mobile */
    .stCont01,
    .stCont02,
    .stCont03 {
        order: 2 !important;
        padding: 8px 6px !important;
    }

    /* Title and paragraph sizing tuned for mobile */
    .stTtl,
    .stTtl01,
    .stTtl02,
    .stTtl03 {
        font-size: 28px !important;
        margin: 6px 0 12px 0 !important;
        line-height: 1.25 !important;
    }

    .stTxt,
    .stTxt01,
    .stTxt02,
    .stTxt03 {
        font-size: 14px !important;
        line-height: 2 !important;
        color: #333 !important;
    }

    /* smaller outer wrapper for better breathing room on smartphones */
    .stBox {
        margin: 36px auto !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* --- Mobile: tabs into 2-column grid (max-width:767px) --- */
@media screen and (max-width: 767px) {

    /* Make the radio tabs area a 2x2 grid on small screens */
    .container .tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 12px;
        /* row / column gap */
        align-items: stretch;
        justify-items: stretch;
    }

    /* Make labels fill the grid cell and keep the icon + text layout */
    .container .tabs label {
        display: flex;
        align-items: center;
        gap: 1px;
        padding: 12px 5px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 12px;
        text-align: left;
    }

    /* Slightly reduce icon size for phones */
    .container .tabs .tab-icon {
        width: 44px;
        height: auto;
        flex-shrink: 0;
    }

    /* Ensure label text wraps and remains readable */
    .container .tabs label {
        font-size: 14px;
        line-height: 1.3;
    }

    /* Optional: make active label stand out when the corresponding radio is checked */
    /* This relies on the HTML order (radio inputs come before .tabs) */
    #tab-goki:checked~.tabs label[for="tab-goki"],
    #tab-kobae:checked~.tabs label[for="tab-kobae"],
    #tab-nomi:checked~.tabs label[for="tab-nomi"],
    #tab-toko:checked~.tabs label[for="tab-toko"] {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
        background-color: rgba(255, 255, 255, 0.98);
    }

}


@media screen and (min-width: 768px) and (max-width: 1100px) {

    /* Make the radio tabs area a 2x2 grid on small screens */
    .container .tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 24px;
        /* row / column gap */
        align-items: stretch;
        justify-items: stretch;
    }

    /* Make labels fill the grid cell and keep the icon + text layout */
    .container .tabs label {
        display: flex;
        align-items: center;
        gap: 1px;
        padding: 16px 20px;
        width: 100%;
        box-sizing: border-box;
        border-radius: 12px;
        text-align: left;
    }

    /* Slightly reduce icon size for phones */
    .container .tabs .tab-icon {
        width: 75px;
        height: auto;
        flex-shrink: 0;
    }

    /* Ensure label text wraps and remains readable */
    .container .tabs label {
        font-size: 20px;
        line-height: 1.3;
    }

    /* Optional: make active label stand out when the corresponding radio is checked */
    /* This relies on the HTML order (radio inputs come before .tabs) */
    #tab-goki:checked~.tabs label[for="tab-goki"],
    #tab-kobae:checked~.tabs label[for="tab-kobae"],
    #tab-nomi:checked~.tabs label[for="tab-nomi"],
    #tab-toko:checked~.tabs label[for="tab-toko"] {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
        background-color: rgba(255, 255, 255, 0.98);
    }

}

@media screen and (max-width: 767px) {

    /* move arrow buttons slightly lower and increase hit area */
    .slide .nav {
        top: 56% !important;
        /* lower than default 50% */
        transform: translateY(-50%);
        /* keep vertical centering relative to the new top */
        width: 56px !important;
        height: 56px !important;
        background-size: 70% auto !important;
        /* keep icon inside */
        opacity: 0.98;
    }

    /* nudge left/right positions a little so the controls sit just inside the image */
    .slide .nav.prev {
        left: -5px !important;
    }

    .slide .nav.next {
        right: -5px !important;
    }

    /* Only adjust the arrow buttons (position + size) for mobile.
     Removed gallery/image/height overrides to avoid layout issues.
     If you want subtle tuning, change `top`, `width`, `height`, or `background-size` values below. */
}

.slides .gallery .item img[src*="miwake_"] {
    width: 88% !important;
    max-width: 88% !important;
    height: auto !important;
    display: block;
    margin-inline: auto;
    transform: none !important;
    /* ensure no scaling is applied */
}

@media screen and (max-width: 767px) {
    .bad-vendor-cases {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        /* smaller gaps for tight screens */
    }

    /* Reduce per-card padding / font-size so three columns are usable on small phones */
    .bad-vendor-case-card {
        padding: 12px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        min-height: 72px !important;
        box-sizing: border-box !important;
    }

    /* Make sure the card label (strong) doesn't overflow */
    .bad-vendor-case-card strong {
        display: block;
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
}

/* 万一の残骸を抑える（最後の保険: 通常は個別の原因に対処するのがベスト） */
html,
body {
    /* ほんのわずかのサブピクセルずれで横スクロールが出るケースに備えます */
    overflow-x: hidden;
}

.white_bg {
    background-color: #ffffff;
    padding-top: 50px;
    padding-bottom: 20px;
}



/* ======================================================
	 Left sidebar (半透明 + 背景透過 / responsive)
	 - Adds a fixed, accessible left-hand menu.
	 - Backdrop blur + semi-transparent background so underlying
		 content is visible.
	 ====================================================== */

/* base layout */
.left-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 70vw;
    background: rgba(255, 255, 255, 0.55);
    /* 半透明 */
    backdrop-filter: blur(8px);
    /* 背後をぼかす */
    -webkit-backdrop-filter: blur(8px);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 2px 0 18px rgba(0, 0, 0, 0.12);
    padding: 20px;
    transform: translateX(-108%);
    /* デフォルトは非表示 */
    transition: transform 320ms cubic-bezier(.2, .9, .2, 1);
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* show when body has class */
.sidebar-open .left-sidebar {
    transform: translateX(0);
}

/* header inside sidebar */
.left-sidebar__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.left-sidebar__logo {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.left-sidebar__title {
    font-weight: 800;
    font-size: 20px;
    line-height: 1.05;
}

.left-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.left-sidebar a.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
    color: #111;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 180ms, transform 120ms;
}

.left-sidebar a.nav-link:hover,
.left-sidebar a.nav-link:focus {
    transform: translateX(6px);
    background: rgba(255, 255, 255, 0.7);
    outline: none;
    box-shadow: 0 6px 18px rgba(18, 24, 35, 0.08);
}

.left-sidebar .cta {
    margin-top: auto;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.left-sidebar .btn-primary {
    display: inline-block;
    background: linear-gradient(180deg, #ff7a00, #ff4d00);
    color: #fff;
    text-align: center;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
}

.left-sidebar .btn-secondary {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    color: #111;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* small-screen toggle button (fixed) */
.sidebar-toggle {
    position: fixed;
    left: 8px;
    top: 12px;
    z-index: 13000;
    width: 46px;
    height: 46px;
    margin: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 10px;
    border: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.sidebar-toggle:focus {
    outline: 3px solid rgba(255, 153, 0, 0.18);
}

/* overlay for focus/closing clicking */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 11900;
}

.sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* desktop: show sidebar always on wider screens */
@media screen and (min-width: 1100px) {

    /* always visible */
    .left-sidebar {
        transform: translateX(0);
    }

    .sidebar-toggle {
        display: none;
    }

    .sidebar-overlay {
        display: none;
    }

    /* narrow main content to avoid overlap */
    .has-left-sidebar {
        margin-left: 300px;
    }
}

@media screen and (max-width: 767px) {
    .left-sidebar {
        width: 82vw;
    }
}

/* accessibility: make left-sidebar focusable */
.left-sidebar [tabindex="0"] {
    outline: none;
}

/* === Desktop: サイドバーをデフォルトで閉じにして、toggleで開閉できるようにする === */
@media screen and (min-width: 1100px) {

    /* デフォルトは隠す（モバイルと同じ挙動に準じる） */
    .left-sidebar {
        transform: translateX(-108%);
        transition: transform 320ms cubic-bezier(.2, .9, .2, 1);
    }

    /* toggle ボタンはデスクトップでも表示させる */
    .sidebar-toggle {
        display: grid;
        /* 既にポジション固定されている想定 */
    }

    /* overlay は画面の要素として存在させる（open時のみ表示） */
    .sidebar-overlay {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
    }

    /* サイドバーが開いたとき */
    body.sidebar-open .left-sidebar {
        transform: translateX(0);
    }

    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    /* サイドバーが開いたら main/header 等を右にスライドして被らないようにする（必要に応じて微調整） */
    body.sidebar-open header,
    body.sidebar-open main,
    body.sidebar-open .follow {
        margin-left: 300px;
        transition: margin-left 320ms cubic-bezier(.2, .9, .2, 1);
    }
}

/* Hide the toggle button while the sidebar is visible (for accessibility + pointer) */
body.sidebar-open .sidebar-toggle,
.sidebar-toggle[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    /* if you prefer a smooth transition instead of immediate hide, remove !important and use opacity/transform */
}

html {
    scroll-behavior: smooth;
}

@media screen and (min-width: 1100px) {

    body.sidebar-open header,
    body.sidebar-open main,
    body.sidebar-open .follow {
        margin-left: 0 !important;
        transform: none !important;
        transition: none !important;
    }

    .left-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 70vw;
        transform: translateX(-108%);
        z-index: 13000;
        transition: transform 320ms cubic-bezier(.2, .9, .2, 1);
    }

    body.sidebar-open .left-sidebar {
        transform: translateX(0);
        pointer-events: auto;
    }

    .sidebar-overlay {
        z-index: 12990;
    }
}

@media screen and (min-width: 1100px) {

    /* Make sure content (header, main, follow) doesn't get pushed when .sidebar-open is applied */
    body.sidebar-open header,
    body.sidebar-open main,
    body.sidebar-open .follow {
        margin-left: 0 !important;
        /* override any earlier rules that move content */
        transform: none !important;
        transition: none !important;
    }

    /* Ensure sidebar overlays the page and sits above the content */
    .left-sidebar {
        position: fixed;
        /* keep fixed so it always overlays */
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        /* keep same width used elsewhere */
        max-width: 70vw;
        transform: translateX(-108%);
        /* default hidden state (matches existing behavior) */
        z-index: 13000;
        /* higher than content but below toggle if needed */
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.12);
        transition: transform 320ms cubic-bezier(.2, .9, .2, 1);
    }

    /* When open, reveal the sidebar in front — the rest of page stays put */
    body.sidebar-open .left-sidebar {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* overlay appears above page content but below the sidebar to allow clicking to close */
    .sidebar-overlay {
        z-index: 12990;
    }
}

/* Sidebar toggle (menu ☰) — center the icon inside a square clickable area and reduce label size
   - Keep consistent square hit-area across breakpoints but tweak size only if needed
*/
.sidebar-toggle {
    /* ensure square clickable area */
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    /* center the icon horizontally and vertically */
    font-size: 14px;
    /* slightly smaller text for the menu icon */
    line-height: 1;
    border-radius: 10px;
    /* keep rounded corners */
}

/* Slightly larger on desktop for better touch/visual weight */
@media screen and (min-width: 1100px) {
    .sidebar-toggle {
        width: 64px;
        height: 64px;
        font-size: 20px;
    }
}

@media screen and (min-width: 1100px) {

    /* Make sure content (header, main, follow) doesn't get pushed when .sidebar-open is applied */
    body.sidebar-open header,
    body.sidebar-open main,
    body.sidebar-open .follow {
        margin-left: 0 !important;
        /* override any earlier rules that move content */
        transform: none !important;
        transition: none !important;
    }

    /* Ensure sidebar overlays the page and sits above the content */
    .left-sidebar {
        position: fixed;
        /* keep fixed so it always overlays */
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        /* keep same width used elsewhere */
        max-width: 70vw;
        transform: translateX(-108%);
        /* default hidden state (matches existing behavior) */
        z-index: 13000;
        /* higher than content but below toggle if needed */
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.12);
        transition: transform 320ms cubic-bezier(.2, .9, .2, 1);
    }

    /* When open, reveal the sidebar in front — the rest of page stays put */
    body.sidebar-open .left-sidebar {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* overlay appears above page content but below the sidebar to allow clicking to close */
    .sidebar-overlay {
        z-index: 12990;
    }
}

/* Sidebar toggle (menu ☰) — center the icon inside a square clickable area and reduce label size
   - Keep consistent square hit-area across breakpoints but tweak size only if needed
*/
.sidebar-toggle {
    /* ensure square clickable area */
    width: 56px;
    height: 56px;
    padding: 0;
    display: grid;
    place-items: center;
    /* center the icon horizontally and vertically */
    font-size: 18px;
    /* slightly smaller text for the menu icon */
    line-height: 1;
    border-radius: 10px;
    /* keep rounded corners */
}

/* Slightly larger on desktop for better touch/visual weight */
@media screen and (min-width: 1100px) {
    .sidebar-toggle {
        width: 64px;
        height: 64px;
        font-size: 20px;
    }
}

/* Make sidebar nav-link text a little smaller for better balance
   Targets the navigation links listed in the left sidebar (トップ / 料金表 / etc.)
*/
.left-sidebar a.nav-link {
    font-size: 18px;
    /* slightly smaller than body base */
    line-height: 1.2;
    padding: 8px 10px;
    /* comfortable hit area */
}

@media screen and (min-width: 1100px) {
    .left-sidebar a.nav-link {
        font-size: 20px;
        /* slightly smaller than desktop body font */
    }
}

@media screen and (max-width: 767px) {

    /* Ensure marquee never pauses on touch/focus on mobile */
    .cv-works:hover .cv-marquee__track,
    .cv-marquee:focus-within .cv-marquee__track {
        animation-play-state: running !important;
        -webkit-animation-play-state: running !important;
    }

    /* Prevent gallery cards from scaling on touch (hover/focus) on mobile */
    .cv-gallery-card:hover,
    .cv-gallery-card:focus {
        transform: none !important;
        z-index: auto !important;
        box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06) !important;
        /* keep subtle baseline shadow */
        /* keep keyboard focus visible but avoid dramatic visual change */
    }

    /* If a duplicated / aria-hidden set was being made interactive, ensure pointer interactions remain inert
	   for the duplicated set (avoids accidental pauses via hidden set receiving focus/tap). */
    .cv-marquee__inner[aria-hidden="true"] {
        pointer-events: none !important;
    }
}

/* --- CV marquee flicker fix (mobile seam) --- */
.cv-marquee__inner {
    display: flex;
    gap: var(--card-gap);
    align-items: stretch;
    flex: 0 0 auto;

    /* Remove padding that can produce a sub-pixel seam when the animation wraps. */
    padding-right: 0;
}

.cv-marquee__inner .cv-gallery-card:last-child {
    /* Keep spacing but subtract 1px to intentionally overlap slightly with
	   the duplicated set — this prevents a 1px subpixel seam on wrap. */
    margin-right: calc(var(--card-gap) - 1px);
}

/* Force GPU compositing on the track and use translate3d in the keyframes to reduce flicker */
.cv-marquee__track {
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* animation uses a dynamic CSS var set by JS: --marquee-shift (negative px) */
    animation: scroll-left var(--marquee-duration, 32s) linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translate3d(0, 0, 0);
    }

    /* end position is controlled by --marquee-shift (negative pixel value) set by JS */
    100% {
        transform: translate3d(var(--marquee-shift, -50%), 0, 0);
    }
}

/* Pause only when explicitly asked: JS will add .is-paused to the track when
   the user hovers a specific gallery card. This keeps the header/title from
   pausing the animation when hovered. */
.cv-marquee__track.is-paused {
    animation-play-state: paused !important;
}

/* For touch devices (mobile) we want the marquee to continue running even if
   there's accidental touches - ensure .is-paused does not keep mobile paused. */
@media screen and (max-width: 767px) {
    .cv-marquee__track.is-paused {
        animation-play-state: running !important;
    }
}

/* A small safeguard for extremely narrow devices where rounding could still create a 1px seam.
   This sets a matching background to hide a possible tiny gap so users don't perceive a flash. */
.cv-marquee,
.cv-marquee__track,
.cv-gallery-card__media {
    background-color: #fff;
}

/* Additional rendering hints for mobile browsers to reduce flicker */
.cv-marquee__track,
.cv-gallery-card {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Mobile specific: keep the duplicated set non-interactive and ensure pointer-events remain inert */
@media screen and (max-width: 767px) {
    .cv-marquee__inner[aria-hidden="true"] {
        pointer-events: none !important;
    }
}

/* End: CV marquee flicker fix */

.cv-marquee__track.is-paused,
.cv-marquee:focus-within .cv-marquee__track {
    animation-play-state: paused;
}

/* mobile should keep running even if .is-paused accidentally set */
@media screen and (max-width: 767px) {
    .cv-marquee__track.is-paused {
        animation-play-state: running !important;
    }
}

/* Safety: prevent the entire cv-works container hover from pausing the
   marquee. Older/other styles could still target `.cv-works:hover` and
   pause — override that so the track only pauses when explicitly asked
   (i.e. when .is-paused is present or focus-within). */
.cv-works:hover .cv-marquee__track:not(.is-paused) {
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
}

/* ページローダー */
#page-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 14000;
    transition: opacity 420ms cubic-bezier(.2, .9, .2, 1), visibility 420ms;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 非表示クラス（フェードアウト） */
#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 内側レイアウト */
.loader-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
}

/* ロゴ */
.loader-logo {
    width: 300px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* スピナー */
.spinner {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 15px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--yellow-color2, #ff9900);
    animation: loader-spin 0.95s linear infinite;
}

/* 読み込み文言 */
.loader-text {
    font-size: 35px;
    color: #333;
    font-weight: 700;
    text-shadow:
        1px 1px 0 #fff,
        /* 右下 */
        -1px -1px 0 #fff,
        /* 左上 */
        1px -1px 0 #fff,
        /* 右上 */
        -1px 1px 0 #fff;
    /* 左下 */
}


/* スピナー回転 */
@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* レスポンシブ：小さい画面では縮小（モバイルでは約1.6倍→元より少し大きめ） */
@media screen and (max-width: 767px) {
    .loader-logo {
        width: 160px;
    }

    /* スマホでの妥当サイズ */
    .spinner {
        width: 60px;
        height: 60px;
        border-width: 6px;
    }

    .loader-text {
        font-size: 14px;
    }
}

/* タブレット向け中間調整 */
@media screen and (min-width: 768px) and (max-width: 1099px) {
    .loader-logo {
        width: 210px;
    }

    .spinner {
        width: 90px;
        height: 90px;
        border-width: 9px;
    }

    .loader-text {
        font-size: 22px;
    }
}

/* ===== 調整版: 円を狭め、モバイルでアイコン左・テキスト右 ===== */

/* デスクトップ等共通のヒーローはそのまま維持 */
.cv-works__hero {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    padding: 40px 18px;
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.9), rgba(255, 255, 255, 0.95));
    border-radius: 20px;
    border: 4px solid rgba(220, 240, 255, 0.6);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.06);
    max-width: 1100px;
    margin: 0 auto 28px;
}

/* 円形アイコンラッパー：やや狭め（例: 112px） */
.cv-works__icon {
    flex: 0 0 auto;
    width: 112px;
    /* 以前 140px -> 今回 112px に狭め */
    height: 112px;
    /* 正方形にして円に */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 244, 220, 0.95));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* 画像はラッパーに合わせて中央表示 */
.cv-works__icon-img {
    width: 78%;
    height: auto;
    display: block;
    object-fit: contain;
    max-width: 180px;
}

/* テキストブロック */
.cv-works__texts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

/* 各行のレイアウト（通常は横並び） */
.cv-works__line {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 14px;
    margin: 0;
}

/* 小さい見出し/後半部分等 */
.cv-works__lead {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    opacity: 0.95;
}

/* 強調バッジ（大きめ） */
.cv-works__em {
    display: inline-block;
    background: linear-gradient(90deg, rgba(255, 217, 120, 0.12), rgba(255, 153, 0, 0.04));
    color: var(--yellow-color2);
    font-weight: 900;
    font-size: 36px;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(255, 153, 0, 0.06), inset 0 -6px 18px rgba(255, 255, 255, 0.2);
    letter-spacing: -0.6px;
    line-height: 1;
}

/* 後半テキスト */
.cv-works__tail {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    opacity: 0.95;
}

/* 軽いフェードイン */
.cv-works__hero {
    opacity: 0;
    transform: translateY(8px);
    animation: cv-hero-in .7s ease forwards .12s;
}

@keyframes cv-hero-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== モバイル調整（max-width: 767px） =====
   - 指示に合わせ、アイコンを左、テキストを右にした横並びレイアウトに変更
   - テキストは左寄せにして読みやすさを確保
*/
/* モバイル：アイコン左 / テキスト右、かつ自然な改行 */
@media screen and (max-width: 767px) {
    .cv-works__hero {
        flex-direction: row;
        gap: 12px;
        padding: 12px;
        align-items: center;
        justify-content: flex-start;
    }

    .cv-works__icon {
        width: 76px;
        height: 76px;
        flex: 0 0 76px;
        margin-left: 6px;
        margin-right: 8px;
    }

    .cv-works__icon-img {
        width: 70%;
        max-width: 120px;
    }

    /* テキスト領域は右に寄せて左寄せで読みやすく */
    .cv-works__texts {
        text-align: left;
        align-items: flex-start;
        flex: 1 1 auto;
        gap: 6px;
    }

    /* 1行目は導入文だけにして必ず改行させる */
    .cv-works__lead {
        display: block;
        /* ブロック化して必ず単独行に */
        font-size: 15px;
        margin: 0;
        line-height: 1.2;
    }

    /* 強調語と後続は同じ行に並べる（2行目） */
    .cv-works__em,
    .cv-works__tail {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        line-height: 1.15;
    }

    /* 強調語は改行しない（全文が一体に見える） */
    .cv-works__em {
        font-size: 18px;
        padding: 6px 10px;
        white-space: nowrap;
        /* 改行を阻止 */
        box-sizing: border-box;
    }

    .cv-works__tail {
        font-size: 15px;
        margin-left: 8px;
        color: #333;
    }

    /* 行全体は折返し可能にしてはみ出しを防ぐ */
    .cv-works__line {
        display: block;
        width: 100%;
        margin: 0;
        padding: 4px 0;
    }
}

/* タブレット中間調整 */
@media screen and (min-width: 768px) and (max-width: 1099px) {
    .cv-works__icon {
        width: 96px;
        height: 96px;
    }

    .cv-works__icon-img {
        width: 78%;
    }

    .cv-works__em {
        font-size: 28px;
        padding: 8px 16px;
    }
}

/* --- 駆除後も安心サポート：テキスト表示時に引かれるアンダーラインアニメ --- */
.stTtl {
    position: relative;
    /* 擬似要素の基準 */
    overflow: visible;
}

/* 対象テキスト（黄色部分）にアンダーラインを引く */
.stTtl .fc_yellow2 {
    position: relative;
    z-index: 1;
    display: inline-block;
}

/* 擬似要素（線） - 初期は幅0 */
.stTtl .fc_yellow2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    /* 線の縦位置は調整可能 */
    height: 6px;
    /* 線の太さ（調整可） */
    width: 0%;
    background: linear-gradient(90deg, rgba(255, 153, 0, 0.95), rgba(255, 217, 120, 0.95));
    border-radius: 3px;
    transition: width 700ms cubic-bezier(.2, .9, .2, 1);
    will-change: width;
    pointer-events: none;
}

/* 表示時に幅を100%へ（アニメーション） */
.stTtl.in-view .fc_yellow2::after {
    width: 100%;
}

/* アニメーション追加オプション：ストローク的な描画感（スライド感） */
@media (prefers-reduced-motion: no-preference) {
    .stTtl.in-view .fc_yellow2::after {
        transition: width 700ms cubic-bezier(.18, .88, .32, 1), opacity 300ms ease;
        opacity: 1;
    }
}

/* アクセシビリティ配慮：動きを減らしたいユーザー向け */
@media (prefers-reduced-motion: reduce) {

    .stTtl .fc_yellow2::after,
    .stTtl.in-view .fc_yellow2::after {
        transition: none;
        width: 100%;
    }
}

/* レスポンシブ微調整（線の太さと位置を端末で調整） */
@media screen and (min-width: 768px) {
    .stTtl .fc_yellow2::after {
        bottom: -8px;
        height: 8px;
    }
}

@media screen and (min-width: 1100px) {
    .stTtl .fc_yellow2::after {
        bottom: -10px;
        height: 10px;
    }
}

/* --- 共通: アンダーラインアニメ（汎用） --- */
/* 基本：fc_yellow2（span）と cv-works__em に擬似要素を用意 */
.fc_yellow2,
.cv-works__em {
    position: relative;
    display: inline-block;
    z-index: 1;
}

/* 擬似要素（線） - 初期は幅0 */
.fc_yellow2::after,
.cv-works__em::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 6px;
    width: 0%;
    background: linear-gradient(90deg, rgba(255, 153, 0, 0.98), rgba(255, 217, 120, 0.98));
    border-radius: 4px;
    transition: width 700ms cubic-bezier(.2, .9, .2, 1), opacity 300ms ease;
    will-change: width;
    pointer-events: none;
    opacity: 0.98;
}

/* 発火トリガー：親に .in-view が付くパターン */
.stTtl.in-view .fc_yellow2::after,
.dif_kaiketu_txt.in-view .fc_yellow2::after,
.dif_kaiketu_txt_2.in-view .fc_yellow2::after {
    width: 100%;
}

/* 直接要素に .in-view を付けるパターン */
.fc_yellow2.in-view::after,
.cv-works__em.in-view::after {
    width: 100%;
}

/* 微調整（サイズ・位置） */
@media screen and (min-width: 768px) {

    .fc_yellow2::after,
    .cv-works__em::after {
        bottom: -8px;
        height: 8px;
    }
}

@media screen and (min-width: 1100px) {

    .fc_yellow2::after,
    .cv-works__em::after {
        bottom: -10px;
        height: 10px;
    }
}

/* アクセシビリティ：動きを抑えるユーザ向け */
@media (prefers-reduced-motion: reduce) {

    .fc_yellow2::after,
    .cv-works__em::after {
        transition: none;
        width: 100% !important;
    }
}

/* Loader: video を画面全体にフィットさせる */
#page-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    /* 黒背景でビデオの余白を目立たなくする */
    z-index: 14000;
    transition: opacity 420ms cubic-bezier(.2, .9, .2, 1), visibility 420ms;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ビデオを viewport 全体に拡げて cover させる */
#loader-video {
    position: fixed;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0; */
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    /* アスペクト比を保ちながら全体を覆う */
    object-position: center center;
    z-index: 14001;
    /* フォールバック要素より背面に配置（下の値に調整） */
    pointer-events: none;
    /* 動画にタッチイベントが取られないようにする */
    background: #000;
}

/* フォールバック（ロゴ・スピナー等）は動画の前面に表示する */
.loader-fallback {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 14002;
    /* 動画より前面 */
    pointer-events: none;
    /* 要素にフォーカスを奪われない（必要なら true に） */
    color: #fff;
}

/* ローダー非表示クラス */
#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* モバイル等の狭い画面で微調整 */
@media (max-width: 767px) {
    #loader-video {
        object-position: center top;
    }

    .loader-fallback .loader-logo {
        width: 160px;
    }

    .spinner {
        width: 48px;
        height: 48px;
        border-width: 6px;
    }
}

/* 動きを抑えたいユーザー向けの配慮 */
@media (prefers-reduced-motion: reduce) {
    #loader-video {
        display: none;
        /* 動画を表示せずフォールバックを優先 */
    }
}

/* page-loader 背景を透明にしてビデオ poster を活かす */
#page-loader {
    background: transparent;
    /* 黒から透明へ */
}

#loader-video {
    opacity: 0;
    /* 初期状態は透明（poster が見える） */
    transition: opacity 300ms ease-in;
    /* フェードイン */
}

/* page-loader 背景: 不透明にして下層コンテンツのフラッシュを防ぐ */
#page-loader {
    background: #ffffff;
    /* 黒背景で安全にカバー */
    color: #fff;
}


/* ========================================
   実績セクション：害虫被害現場
   ======================================== */

.pest-actual-section {
    padding: 60px 20px;

    max-width: 1100px;
    background: transparent;
    border: none;
    border-radius: 0;
}

.pest-actual-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* 警告セクション */
.pest-warning {
    background: linear-gradient(135deg, #ffe6e6 0%, #fff0e6 100%);
    border-left: 6px solid #e00000;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 40px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.pest-warning-icon {
    font-size: 28px;
    margin: 0;
    flex: 0 0 auto;
    line-height: 1;
}

.pest-warning-text {
    margin: 0;
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    font-weight: 600;
}

@media screen and (min-width: 768px) {
    .pest-warning-text {
        font-size: 18px;
    }
}

/* タイトル */
.pest-actual-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #111;
    margin-bottom: 36px;
    position: relative;
    padding-bottom: 16px;
}

.pest-actual-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #ff9900 20%, #ff9900 80%, transparent);
    border-radius: 2px;
}

@media screen and (min-width: 768px) {
    .pest-actual-title {
        font-size: 44px;
        margin-bottom: 48px;
    }
}

/* アコーディオン基本スタイル */
.pest-accordion {
    background: #fff;
    border-radius: 14px;
    margin-bottom: 16px;
    border: 2px solid #e5f0f7;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 300ms cubic-bezier(.2, .9, .2, 1);
}

.pest-accordion[open] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pest-accordion[open] .pest-summary {
    background: linear-gradient(135deg, rgba(255, 217, 120, 0.06), rgba(255, 153, 0, 0.03));
}

/* summary スタイル */
.pest-summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    user-select: none;
    transition: all 250ms ease;
    outline: none;
}

.pest-summary:hover {
    background: rgba(255, 153, 0, 0.04);
}

.pest-summary::-webkit-details-marker {
    display: none;
}

/* アイコン */
.pest-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex: 0 0 auto;
    transition: transform 300ms cubic-bezier(.2, .9, .2, 1);
}

.pest-accordion[open] .pest-icon {
    transform: scale(1.08);
}

/* テキスト */
.pest-name {
    font-weight: 700;
    font-size: 18px;
    color: #111;
    flex: 1;
    transition: color 250ms ease;
}

.pest-count {
    font-size: 14px;
    color: #6b7280;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    transition: all 250ms ease;
}

.pest-accordion[open] .pest-count {
    background: rgba(255, 153, 0, 0.12);
    color: #ff9900;
}

/* 矢印アイコン（自作） */
.pest-summary::before {
    content: "▶";
    display: inline-block;
    transition: transform 300ms cubic-bezier(.2, .9, .2, 1);
    color: #ff9900;
    font-size: 14px;
    margin-right: -12px;
}

.pest-accordion[open] .pest-summary::before {
    transform: rotate(90deg);
}

/* 害虫別の色 */
.pest-goki .pest-name {
    color: #8B4513;
}

.pest-toko .pest-name {
    color: #e00000;
}

.pest-kobae .pest-name {
    color: #858585;
}

/* コンテンツエリア */
.pest-content {
    padding: 24px;
    border-top: 2px solid #e5f0f7;
    animation: slideDown 300ms cubic-bezier(.2, .9, .2, 1);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ギャラリーグリッド */
.pest-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media screen and (min-width: 768px) {
    .pest-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media screen and (min-width: 1100px) {
    .pest-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

/* メディアアイテム */
.pest-media-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    cursor: pointer;
    transition: all 300ms cubic-bezier(.2, .9, .2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pest-media-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.pest-media-item img,
.pest-media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pest-video-item {
    grid-column: span 1;
}

@media screen and (min-width: 768px) {
    .pest-video-item {
        grid-column: span 2;
    }
}

@media screen and (min-width: 1100px) {
    .pest-video-item {
        grid-column: span 1;
    }
}

/* ビデオコントローラ */
.pest-media-item video {
    background: #1a1a1a;
}

.pest-media-item video::-webkit-media-controls {
    background: rgba(0, 0, 0, 0.7);
}

/* レスポンシブ調整 */
@media screen and (max-width: 767px) {
    .pest-actual-section {
        padding: 40px 16px;

    }

    .pest-warning {
        padding: 16px 16px;
        gap: 12px;
    }

    .pest-warning-icon {
        font-size: 24px;
    }

    .pest-summary {
        padding: 16px 16px;
        gap: 12px;
    }

    .pest-icon {
        width: 44px;
        height: 44px;
    }

    .pest-name {
        font-size: 16px;
    }

    .pest-count {
        font-size: 12px;
        padding: 3px 8px;
    }

    .pest-content {
        padding: 16px;
    }

    .pest-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* アクセシビリティ */
.pest-summary:focus {
    outline: 3px solid rgba(255, 153, 0, 0.25);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .pest-accordion,
    .pest-summary,
    .pest-icon,
    .pest-count,
    .pest-media-item,
    .pest-content {
        transition: none;
    }
}