@charset "utf-8";


.con_item{
    position: absolute;
    top: 24%;
    left: 45%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 80%;
}

.intro {
    padding: 48px 0 8px;
}
.intro h2 {
    font-weight: 500;
    font-size: 2.0rem;
    line-height: 1.6;
    text-align: center;
    color: var(--dark);
}
.intro h2 span {
    font-size: 130%;
}
.intro p {
    font-size: 1.3rem;
    text-align: center;
    color: var(--dark);
    margin-top: 24px;
}
.contents_box {
    /* padding-bottom: 48px; */
}
.main_ttl2{
    margin-top: 48px;
}
.contents_box .main_ttl_wrap {
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: auto;
    z-index: 1;
    min-height: auto;
    width: 98%;
    margin-bottom: 32px;
}
/* .contents_box.equipment_wrap .main_ttl_wrap {
    background-image: url(../image/contents_ttl01.svg);
} */
 .contents_box {
    margin-top: 64px;
}
.contents_box img{
        image-rendering: auto;
}

.contents_box h3{
    text-align: center;
    color: #9f7a51;
    font-size: 3.2rem;
}
.sub_ttl{
    text-align: center;
    color: #4b2b0e;
    font-size: 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 24px auto;
}
.sub_ttl::before{
    content: '|';
    display: block;
    text-align: center;
    font-size: 100%;
    line-height: 1;
}
.sub_ttl::after{
    content: '|';
    display: block;
    text-align: center;
    font-size: 100%;
    line-height: 1;
}

.madori{
    padding: 48px 0 16px;
}
.madori_ttl{
    background: var(--green1);
    color: var(--light);
    display: flex;
    align-items: center;
    padding: 8px;
}
.madori_ttl .type{
    font-size: 1.8rem;
    text-align: center;
    flex-basis: 20%;
    border-right: 1px solid var(--light);
}
.madori_ttl .type small{
    font-size: 60%;
}
.madori_ttl .spec{
    font-size: 1.8rem;
    flex-basis: 55%;
    padding-left: 6px;
}
.madori_ttl .spec small{
    font-size: 80%;
}
.madori_ttl .modeltype{
    background: #574624;
    border-radius: 8px;
    padding: 8px 3px;
    text-align: center;
    font-size: .9rem;
    line-height: 1.2;
    flex-basis: 25%;
}
.madori_ttl .modeltype small{
    display: block;
    font-size: 100%;
}
.menseki{
    padding: 16px 0;
    border-bottom: 1px solid var(--green1);
}
.menseki .flex{
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.menseki .flex p{
    font-size: 1.6rem;
    line-height: 1;
}
.menseki .flex .num{
    font-size: 3.2rem;
    line-height: 1;
}
.menseki .flex .num small{
    font-size: 80%;
}
.menseki .other_menseki{
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.menseki .other_menseki span{
    display: flex;
    gap: 3px;
    font-size: 1.2rem;
    line-height: 1.3;
    position: relative;
}
.menseki .other_menseki span::before{
    content: '●';
}
.madori_img{
    margin: 24px auto 0;
}
.plan_cap {
        margin-top: 24px;
    }
    .plan_cap p {
        font-size: 1.2rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 8px;
    }
    .plan_cap p span:not(.img) {
        display: flex;
        padding-right: 8px;
        align-items: center;
    }
        .plan_cap p span.img {
        width: 39px;
        display: block;
        padding-left: 5px;
        padding-top: 12px;
    }


.point_box{
    margin-bottom: 40px;
}
.point_box h4{
    font-size: 1.6rem;
    line-height: 1.4;
    padding-bottom: 8px;
    border-bottom: 1px solid #4b2b0e;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.point_box h4 span{
    background: #385674;
    color: var(--light);
    text-align: center;
    font-size: 1.8rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 50px;
}
.point_box h4 small{font-size: 60%;}
.point_box h4 div small{font-size: 60%; vertical-align: 5px;}
.point_box .point_img_wrap{
    margin-top: 16px;
}
.point_box .point_flex{
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}
.point_box .point_img{
    border-radius: 4px;
    overflow: hidden;
}
.box3.point_box .point_img,
.box6.point_box .point_img{
    border-radius: 0px;
}
.point_box .point_img dl dt{
    background: #65bfa1;
    text-align: center;
    color: var(--light);
    font-size: 1.3rem;
    line-height: 1;
    padding: 4px;
}
.point_box .point_img dl dd{
    background: var(--green4);
    padding: 12px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}
.point_box .point_img dl dd .merit{
    display: block;
    flex: 1;
}
.point_box .point_img dl dd .merit_ttl{
    color: #d44e44;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: flex-end;
    font-size: 2.4rem;
    line-height: 1;
    border-bottom: 1px solid #d44e44;
    padding-bottom: 4px;
}
.point_box .point_img dl dd .merit_ttl small{
    font-size: 1.4rem;
    line-height: 1.1;
}
.point_box .point_img dl dd .txt{
    display: block;
    font-size: 1.1rem;
    line-height: 1.4;
    padding-top: 8px;
}
.point_box .point_img dl dd{}

.point_box .arrow{
    width: 30px;
    text-align: center;
}
.point_box .point_img ul{
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.point_box .point_img li{
    display: flex;
    gap: 8px;
    font-size: 1.2rem;
    line-height: 1.4;
}
.point_box .point_img li::before{
    content: '■';
    color: #385674;
}
.box6 .point_flex{}
.box6 .point_flex .point_img{}
.box6 .point_flex .point_img img{width: 100%;}


/* PC */

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

.con_item {
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 35%;
}
.intro {
    background-position: bottom;
            padding: 88px 0 24px;
}
.contents_box {
    margin-top: 128px;
}
.contents_box img{
        image-rendering: auto;
}

.contents_box h3{
    font-size: 4.8rem;
}
.sub_ttl{
    font-size: 2.4rem;
    margin: 48px auto 24px;
}

.madori{
    padding: 88px 0 32px;
    max-width: 800px;
    margin: auto;
}
.madori_ttl .type{
    font-size: 3.2rem;
}
.madori_ttl .spec{
    font-size: 3.2rem;
    padding-left: 16px;
}
.madori_ttl .modeltype{
    font-size: 1.3rem;
    line-height: 1;
}
.menseki{
    padding: 24px 0;
}
.menseki .flex{
    gap: 16px;
}
.menseki .flex p{
    font-size: 2.4rem;
}
.menseki .flex .num{
    font-size: 4.8rem;
}
.menseki .other_menseki{
    gap: 16px;
    margin-top: 16px;
}
.menseki .other_menseki span{
    font-size: 1.6rem;
}
.madori_img{
    margin: 40px auto 0;
}
.plan_cap {
        margin-top: 24px;
    }


.point_box{
    max-width: 800px;
    margin: 0 auto 80px;
}
.point_box h4{
    font-size: 2.4rem;
}
.point_box h4 span{
    font-size: 2.2rem;
    padding: 5px 10px;
}
.point_box h4 small{font-size: 1.2rem;}
.point_box h4 div small{font-size: 1.2rem; vertical-align: 8px;}
.point_box .point_img_wrap{
    margin-top: 24px;
}
.point_box .point_flex{
    gap: 12px;
}
.point_box .point_img{
    border-radius: 8px;
}
.point_box .point_img dl dt{
    font-size: 2.2rem;
    padding: 12px;
}
.point_box .point_img dl dd{
    padding: 16px 24px;
    gap: 16px;
}
.point_box .point_img dl dd .merit_ttl{
    font-size: 4.0rem;
}
.point_box .point_img dl dd .merit_ttl small{
    font-size: 2.0rem;
}
.point_box .point_img dl dd .txt{
    font-size: 1.5rem;
}

.point_box .point_img ul{
    padding-top: 16px;
    gap: 8px;
}
.point_box .point_img li{
    font-size: 1.6rem;
}
.box6 .point_flex{}
.box6 .point_flex .point_img{}
.box6 .point_flex .point_img img{width: 100%;}



}




/* スライダー */


/* 全体コンテナ（PC最大1200px / スマホ100%） */
        .slider-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            padding: 20px 0;
        }

        /* --- 1. メイン表示域 --- */
        .slider-main-wrap {
            position: relative;
            width: 100%;
        }
        .slider-main .slide-item {
            position: relative;
            width: 100%;
        }
        .slider-main img {
            width: 100%;
            height: auto;
            display: block;
        }
        /* 表示域の左下テキスト（編集可能） */
        .slide-caption {
                position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px 8px 6px;
    font-size: 1.2rem;
    line-height: 1;
    color: #FFF;
    text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 1px #000;
}

        /* --- 2. スライダー間の中央下矢印（連動なし・画像） --- */
        .arrow-divider {
            text-align: center;
            display: block;
            margin: 15px auto 0;
            width: 20px;
        }
        .arrow-divider img {
            width: 24px; /* 必要に応じて画像サイズを調整してください */
            height: auto;
            display: inline-block;
        }

        /* --- 3. サムネイル領域 --- */
        .slider-thumb-wrap {
            position: relative;
            padding: 0 50px; /* 左右の矢印画像を置くための余白 */
            width: 100%;
        }
        .slider-thumb .thumb-item {
            cursor: pointer;
            padding: 0 3px; /* サムネイル間の隙間 */
            position: relative;
            outline: none;
        }
        .slider-thumb img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        /* サムネイルの白透過オーバーレイ */
        .slider-thumb .thumb-item::after {
            content: '';
            position: absolute;
            top: 0;
            left: 3px;
            right: 3px;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.6); /* デフォルトは薄く白透過 */
            transition: background-color 0.3s ease;
            pointer-events: none;
        }
        /* 中央表示（アクティブ）になったサムネイルは透過をクリア */
        .slider-thumb .slick-current .thumb-item::after {
            background-color: rgba(255, 255, 255, 0);
        }

        /* サムネイル左右端のカスタム矢印画像用スタイル */
        .thumb-prev, .thumb-next {
               position: absolute;
                top: 45%;
                transform: translateY(-45%);
                width: 25px;
                cursor: pointer;
                z-index: 10;
        }
        .thumb-prev { left: 10px; }
        .thumb-next { right: 10px; }
        .thumb-prev img, .thumb-next img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* レスポンシブ（スマホ用）の微調整 */
        @media (max-width: 768px) {
            .slide-caption {
                left:0px;
            }
            .slider-thumb-wrap {
                padding: 0;
            }
            .thumb-prev { left: 5px; }
            .thumb-next { right: 5px; }
        }