/*トップページファーストビュー*/
.sp-br,
.sp-fv-product {
    display: none;
}

.fv-pc {
    width: 100%;
    height: 650px;
    background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/CP_firstview_pc.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.top-h1 {
    width: 100%;
    text-align: center;
    font-size: 23px;
    font-weight: 900;
    padding: 0.5em 0;
    background: linear-gradient(96deg, rgba(38, 135, 142, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(236, 227, 116, 1) 100%);
    color: #ffffff;
}

.fv-ecocute {
    position: absolute;
}

.fv-wrapper {
    min-width: 1000px;
    width: 50%;
    height: fit-content;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -8rem;
    margin: auto;
    text-align: center;
}

.fv-crowns {
    display: flex;
    width: 70%;
    justify-content: space-around;
    margin: -150px auto 0;
    position: relative;
}

.crown-saitan span,
.crown-warranty span,
.crown-90 span {
    font-size: 25px;
    color: #ffffff;
    font-weight: 900;
    display: block;
    line-height: 1.1;
}


.crown-saitan,
.crown-warranty,
.crown-90 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    min-width: 120px;
}

.crown-90 {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.crown-90 span {
    display: block;
}

.crown-90 .highlight {
    font-size: 3.2em;
    font-weight: 900;
}

.fv-oswald {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.fv-off {
    font-family: "Oswald", sans-serif;
}


.crown-saitan::before,
.crown-saitan::after,
.crown-warranty::before,
.crown-warranty::after,
.crown-90::before,
.crown-90::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 90px;
    background-size: cover;
    background-repeat: no-repeat;
}

.crown-saitan::before,
.crown-warranty::before,
.crown-90::before {
    background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/Emblem-left.svg");
    left: -3em;
}

.crown-saitan::after,
.crown-warranty::after,
.crown-90::after {
    background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/Emblem-right.svg");
    right: -3em;
}

.crown-90::after {
    right: -2.5em;
}

.char-t {
    margin-left: -0.125em;
}

.fv-yellow {
    font-size: 80px;
    color: #E3D82A;
    font-weight: 900;
}

.small-na,
.small-de {
    font-size: 50px;
}

.small-de {
    color: #ffffff;
    font-weight: 900;
}

.fv-catch-row2 {
    font-size: 80px;
    font-weight: 900;
    color: #ffffff;
}

.first-view-catch {
    width: 100%;
    text-align: center;
    margin-top: 3em;
    position: relative;
}

.first-view-catch::after {
    content: "";
    display: inline-block;
    background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/TOP-Product-image-1.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 280px;
    height: 220px;
    right: 0;
    top: -1%;
    position: absolute;
}


.first-view-catch p {
    line-height: 1.3em;
    letter-spacing: -4px;
}

.manufacturer-heading {
    margin-top: 1rem;
}

.manufacturer-heading h2 {
    color: #ffffff;
    font-size: 20px;
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.manufacturer-heading h2::before,
.manufacturer-heading h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 1px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.manufacturer-heading h2::before {
    left: -8rem;
}

.manufacturer-heading h2::after {
    right: -8rem;
}

/*ロゴのスライダー*/

.logo-track {
    background-color: rgba(255, 255, 255, 0.8);

}

/* スクロール全体の枠 */
.logo-scroller {
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 20px;
}

/* スクロールする横長の帯 */
.logo-track {
    display: flex;
    width: max-content;
    animation: scroll 40s linear infinite;
    padding: 5px 0;
}

/* ロゴ画像の基本スタイル */
.logo-track img {
    height: 50px;
    margin-right: 40px;
    object-fit: contain;
}

/* 横に流れるアニメーション */
@keyframes scroll {
    from {
        transform: translateX(0);
    }

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

/* CTA全体の配置 */
.fv-cta {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
}

/* キラキラボタン */
.fv-cta a {
    display: inline-block;
    padding: 1.2rem 2.5rem;
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    background-color: #ff0000;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ホバー時の少し大きくなる演出 */
.fv-cta a:hover {
    transform: scale(1.05);
}

/* キラキラ光が流れる疑似要素 */
.fv-cta a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.85) 50%,
            transparent 100%);
    transform: skewX(-20deg);
    animation: shine 2.5s infinite linear;
}

/* キラキラアニメーション */
@keyframes shine {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

/* タブレット */
@media screen and (max-width: 999px) {
	
	.fv-pc{
		height:100vh;
	}
	.fv-yellow{
		font-size:80px;
	}
	
	.fv-crowns{
		width:90%;
	}
	
	.first-view-catch::after{
		display:block;
		position:static;
		margin:0 auto;
		width:450px;
		height:350px;
	}
	
	.fv-wrapper{
		min-width:100%;
	}
	
	.logo-scroller{
		bottom:3rem;
	}
}

/* スマホ */
@media (max-width: 999px) {
    .fv-sp .fv-pc {
        display: block;
    }

    .fv-sp {
        background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/CP_firstview_sp-1.webp");
        background-size: cover;
        background-repeat: no-repeat;
		height:680px;
    }

    .sp-only {
        display: grid !important;
    }

    .header_content_wrapper {
        display: none;
    }

    .fv-wrapper {
        min-width: 100% !important;
        bottom: 1rem;
    }

    .top-h1 {
        font-size: 13px;
        padding: 0.3rem;
    }

    .crown-saitan span,
    .crown-warranty span,
    .crown-90 span {
        font-size: 17px;
    }

    .fv-crowns {
        margin: 0 auto;
        width: 85%;
		max-width:400px;
    }

    .crown-90 .highlight {
        font-size: 2em;
    }

    .crown-saitan::before,
    .crown-saitan::after,
    .crown-warranty::before,
    .crown-warranty::after,
    .crown-90::before,
    .crown-90::after {
        width: 35px;
        height: 60px;
    }

    .crown-saitan,
    .crown-warranty,
    .crown-90 {
        min-width: 80px;
    }

    .crown-saitan::before,
    .crown-warranty::before,
    .crown-90::before {
        left: -1.5em;
    }

    .crown-saitan::after,
    .crown-warranty::after,
    .crown-90::after {
        right: -1.3em;
    }

    .fv-crowns {
        justify-content: space-between;
    }

    .fv-yellow,
    .fv-catch-row2 {
        font-size: 60px;
    }

    .small-na,
    .small-de {
        font-size: 50px;
    }

    .fv-yellow br {
        display: inline;
    }

    .first-view-catch {
        margin-top: 0.5rem;
    }

    p.fv-catch-row1 {
        line-height: 3.7rem;
    }

    p.fv-catch-row2 {
        line-height: 1.9rem;
    }

    .first-view-catch::after {
        display: none;
    }

    .sp-fv-product {
        display: block;
        width: 220px;
        margin: 20px auto;
    }

    .fv-cta {
        margin-top: 0.5rem;
    }

    .fv-cta a {
        font-size: 1rem;
    }
	
	.logo-scroller{
		bottom:20px;
	}

    .logo-track img {
        height: 30px;
    }

    .fv-cta a {
        padding: 0.75rem 2.5rem;
    }

    .manufacturer-heading {
        margin: 0.5rem;
    }

    .manufacturer-heading h2 {
        font-size: 16px;
    }



}

/* 小さめスマホ */

@media (max-width: 400px) {
    .fv-sp {
        display: block;
		height:680px;
    }

    .fv-crowns {
        width: 85%;
    }
}


/*coolsがおすすめするエコキュートベスト3*/

.ecocute-best-3-wrapper {
    width: 70%;
    margin: 3rem auto;
    text-align: center;
	max-width:800px;
}

.ecocute-best-3-wrapper h2 {
    margin: 20px auto;
    font-size: 30px;
    font-weight: 900;
    color: #ff8c00;
}

.best3-cta a {
    font-size: 20px !important;
    background-color: #ff8c00 !important;
}

/* ▼ココが最重要：PCでは flex */
.ecocute-best-3 {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 5rem;
}

.ecocute-best-3-block {
    width: 30%;
    text-align: center;

    position: relative;
}

.ecocute-best-3-block img {
    width: 70%;
}

.no1::before,
.no2::before,
.no3::before {
    content: "";
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100px;
    height: 90px;
    position: absolute;
    top: -3rem;
    left: -1%;
}

.no1::before {
    background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/No.1-emblem.svg");
}

.no2::before {
    background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/No.2-emblem.svg");
}

.no3::before {
    background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/No.3-emblem.svg");
}

/* =====================================
    ▼ タブレット（999px 以下）
===================================== */
@media (max-width: 999px) {
	.no1::before, .no2::before, .no3::before{
		width:100px;
		height:90px;
		left:-5%;
			
}
	.ecocute-best-3-block img{
		width:100%;
	}
	
	.ecocute-best-3-wrapper{
		width:90%;
	}
	
	.best3-cta a{
		margin-top:3rem;
		width:70%;
	}
}

/* =====================================
    ▼ スマホ（743px 以下）
===================================== */
@media (max-width: 743px) {

    .ecocute-best-3-wrapper {
        width: 90%;
    }

    .ecocute-best-3-wrapper h2 {
        margin: 20px auto;
        font-size: 24px;
    }

    .ecocute-best-3 {
        display: block;
        margin-top: 1rem;
    }

    .ecocute-best-3-block {
        width: 100%;
    }

    .best3-cta a {
        font-size: 1rem !important;
        width: 100%;
        margin-top: 2rem;
    }

    .ecocute-best-3-block img {
        width: 50%;
    }

    .no1::before,
    .no2::before,
    .no3::before {
        width: 100px;
        height: 90px;
        top: 0;
        left: 10%;
    }

    .ecocute-slider img {
        width: 50%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* slick track の暴走対策 */
    .ecocute-slider .slick-track {
        display: flex !important;
        align-items: center;
		width:100%;
    }

    /* slick-list がはみ出さないように */
    .ecocute-slider .slick-list {
        overflow: hidden;
    }

    /* PC時に slick が解除された時のリセット（超重要） */
    .ecocute-slider.slick-initialized {
        display: block;
    }

}

/*エリアセクション*/


.sp-break {
    display: none;
}

.area-map-sp,
.speech-balloon-sp {
    display: none;
}

.front-area-wrapper h2 {
    margin: 0 auto;
    font-size: 30px;
    font-weight: 900;
    color: #ff8c00;
}

.front-area-wrapper {
    width: 100%;
    background-color: #D2EFF2;
    margin-top: 8rem;
    padding: 2rem 0 3rem 0;
}

.front-area-wrapper p {
    text-align: center;
    margin-top: 0.5rem;
    color: #00a6b5;
    font-weight: 900;
}

.front-area-container {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    position: relative;
}

.area-map {
    width: fit-content;
    padding-top: 7%;
    padding-left: 5%;
}

.area-map img {
    width: 400px;
    margin-left: 2rem;
}

.front-area-wrapper h2 {
    text-align: center;
}

.area-block {
    display: flex;
    margin: 0px auto;
    padding-top: 70px;
    width: 95%;
    justify-content: center;
	align-items:center;
    position: relative;
}

.area-heading {
    position: absolute !important;
    right: 0;
    left: 0;
    top: -6rem;
}

.our-area{
	padding:2rem;
	border: 2px solid #00a6b5;
	margin-bottom:3rem;
	border-radius:10px;
	position:relative;
}

.our-area h3{
	position:absolute;
	right:0;
	left:0;
	top:-1rem;
	background-color:#D2EFF2;
	width:fit-content;
	color:#00a6b5;
	font-weight:900;
	margin:auto;
	padding:0 1rem;
	font-size:20px;
}

.our-area span{
		display:block;
		width:fit-content;
		margin:0 auto;
		font-size:30px;
		font-weight:900;
		color:#dc143c;
	}

.our-area-note{
	font-size:13px!important;
	color:#333333!important;
	font-weight:normal!important;
}

.area-list {
    width:500px;
    height: fit-content;
    position: relative;
    border: 2px solid #00a6b5;
    border-radius: 10px;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1rem;
}

.area-list h3 {
    display: block;
    width: fit-content;
    margin: auto;
    position: absolute;
    background-color: #D2EFF2;
    padding: 0.5rem 1rem;
    right: 0;
    left: 0;
    top: -1.5rem;
    color: #00a6b5;
    font-weight: 900;
    font-size: 20px;
}

.area-list ul {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    height: fit-content;
    padding: 0;
	margin:0 auto;
    justify-content: space-around;
}

.area-list li {
    margin: 0.5rem;
}

span.coming-soon-area {
    padding: 0.3rem;
    border-radius: 9999px;
    width: 80px;
    display: block;
    color: #00a6b5;
    font-weight: 900;
    border: 2px solid #00a6b5;
    cursor: pointer;
    position: relative;
    font-size: 12px;
    text-align: center;
}

.coming-soon-area::after {
    content: "現在ページを\A準備中です。";
    display: block;
    width: 90px;
    text-align: center;
    height: fit-content;
    padding: 0.2rem 0.7rem;
    font-size: 10px;
    color: #808080;
    background-color: #ffffff;
    position: absolute;
    white-space: pre-wrap;
    right: 0;
    left: 0;
    margin: auto;
    top: -2.5rem;
    display: none;
}

span.coming-soon-area:hover::after {
    display: block;
}

.area-list a {
    padding: 0.3rem;
    border-radius: 9999px;
    width: 80px;
    display: block;
    color: #ffffff;
    font-weight: 900;
    background-color: #00a6b5;
    font-size: 12px;
    text-align: center;
}

.speech-balloon,
.speech-balloon-sp {
    position: absolute;
    width: 170px;
    height: 170px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 50%;
    right: 20%;
    top: 30%;
}

.speech-balloon::after,
.speech-balloon-sp::after {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 0px;
    transform: rotate(-55deg);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid #ffffff;
}

.speech-balloon p,
.speech-balloon-sp p {
    font-weight: 900;
    color: #00a6b5;
}

/* =====================================
    ▼ タブレット（999 以下）
===================================== */
@media (max-width: 999px) {
	
	.area-map-sp,
    .speech-balloon-sp {
        display: none;
    }


    .sp-break {
        display: block;
    }

    .front-area-wrapper h2 {
        font-size: 24px;
    }

    .front-area-container {
        width: 95%;
    }

    .area-list {
        width: 70%;
        height: auto;
        padding-bottom: 2rem;
        padding-right: 0.3rem;
        padding-left: 0.3rem;
        margin-bottom: 2rem;
    }

    .area-list ul {
        position: static !important;
        margin-top: 3rem;
        width: 95% !important;
        justify-content: center !important;
        gap: 0.6rem 0.6rem !important;
    }
	
	.area-list li{
		margin:0;
	}
	
	.speech-balloon{
		top:25%;
		right:10%;
	}


    
}

/* =====================================
    ▼ スマホ（743px 以下）★3列固定
===================================== */
@media (max-width: 743px) {
	
	.area-map,
    .speech-balloon {
        display: none;
    }

    .area-map-sp,
    .speech-balloon-sp {
        display: block;
    }
	
	.area-map-sp {
        margin-bottom: 2rem;
    }

    .area-block {
        width: 95%;
		display: block;
        align-items: center;
        padding-top: 50px;
        position: relative;
    }


    .area-heading {
        top: -6rem;
    }
	
	.area-list{
		width:100%;
	}

    .area-list ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem 0.5rem !important;
        width: 100% !important;
        margin: 2rem auto 0 !important;
        position: static !important;
    }

    .area-list li {
        flex: 0 0 calc(25% - 0.5rem) !important;
        display: flex !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    /* ボタン小さめ・視認性の高いサイズ */
    span.coming-soon-area,
    .area-list a {
        width: 70px !important;
        min-width: unset !important;
        padding: 0.35rem 0.2rem !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        border-radius: 9999px !important;
    }

    /* 小さな吹き出し調整 */
    .coming-soon-area::after {
        top: -1.8rem !important;
        font-size: 9.5px !important;
        padding: 0.15rem 0.4rem !important;
        width: max-content;
    }

    .speech-balloon-sp {
        width: 180px;
        height: 180px;
        margin: 2rem auto 1rem;
        top: -10px;
        left: 0;
		right:35%;
		bottom:0;
        position: absolute !important;
    }

    .speech-balloon-sp p {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        height: fit-content;
        margin: auto;
    }

    .area-map img {
        width: 90%;
        margin-top: 1.5rem;
    }
}

/* =====================================
    ▼ 小型スマホ（480px 以下）★3列のまま
===================================== */
@media (max-width: 480px) {
	 

    /* 3列を維持 */
    .area-list li {
        flex: 0 0 calc(16% - 0.4rem) !important;
        align-items: center !important;
    }

    span.coming-soon-area,
    .area-list a {
        width: 100% !important;
        min-width: unset !important;
        padding: 0.35rem 0.2rem !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .speech-balloon-sp {
        width: 160px;
        height: 160px;
    }

    .speech-balloon-sp::after {
        right: 20px;
        bottom: 5px;
    }

    .area-map img {
        width: 90%;
    }
}

/*ページスライダーセクション*/

.top-feature-slider {
    width: 100%;
}

.top-feature-slider img {
    width: 200px;
}

.feature-list {
    display: flex;
    justify-content: center;
    width: 50%;
    margin: 50px auto;
}

.feature-list li {
    margin: 0 20px;
}

/*タブレット*/

@media (max-width: 999px) {
	.top-feature-slider img {
    width: 400px;
}
	.feature-list{
		width:100%;
	}
}

/*売れ筋商品*/

.popular-products {
    display: block;
    position: relative;
    padding: 0 25px;
    /* 左右の余白で長さ調整 */
    background: #d8ae35;
    /* 黄土色っぽい色 */
    color: #fff;
    font-weight: lighter;
    font-size: 15px;
    line-height: 25px;
    height: 25px;
    margin: 30px auto;
    width: fit-content;
}

/* 左のとがった部分 */
.popular-products::before,
.popular-products::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    /* 高さの半分くらい */
    border-bottom: 13px solid transparent;
    /* 高さの半分くらい */
}

.popular-products::before {
    left: -0.8em;
    /* 左にずらす */
    border-right: 13px solid #d8ae35;
    /* 三角形（左側） */
}

.popular-products::after {
    right: -0.8em;
    /* 右にずらす */
    border-left: 13px solid #d8ae35;
    /* 三角形（右側） */
}

/* =====================================
    ▼ スマホ（743px 以下）★3列固定
===================================== */
@media (max-width: 743px) {
    .feature-list {
        display: flex;
        width: 90%;
        position: relative;
    }

    .slide-arrow {
        width: 20px;
        height: 20px;
        background-color: #00A6B4;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
        z-index: 9999;
        text-align: center;
        opacity: 0.7;
		line-height:20px;
		color:#fff;
    }

    .prev-arrow {
        left: -10px;
    }

    .next-arrow {
        right: -10px;
    }


    .top-feature-slider img {
        width: 100%;
    }
	
	.top-feature-slider .slide-arrow{
		display:none!important;
	}

}

/*10年保証*/

.ten-years-warranty{
	background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 237, 184, 1) 70%, rgba(255, 221, 120, 1) 100%);
	padding:3rem 0;
}

.warranty-image{
	width:300px;
}

.warranty-contents{
	max-width:1000px;
	width:70%;
	margin:0 auto;
	text-align:center;
}

.warranty-stickers{
	display:flex;
	font-weight: 600;
	font-style: normal;
	color:#673200;
	font-size:20px;
	margin:0 auto;
	width:400px;
	justify-content:space-between;
	margin-bottom:1.75rem;
}

.cheapest-in-industry,
.our-warranty{
	position:relative;
	z-index:999;
	width:45%;
}

.cheapest-in-industry::before,
.our-warranty::before{
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:50px;
	background-image:url(https://cools-kyutoki.com/wp-content/uploads/2025/12/W10_frame.webp);
	background-size:cover;
	background-repeat:no-repeat;
	z-index:-1;
	top:-0.75rem
}

.warranty-w10year-heading{
	font-size:4rem;
	font-weight: 900;
	font-style: normal;
	color:#673200;
	line-height:5rem;
	position:relative;
	width:fit-content;
	margin:0 auto;
	margin-bottom:0.5rem;
}

.w10-big{
	font-size:6rem;
	font-weight: 800;
}

.warranty-w10year-heading::before,
.warranty-w10year-heading::after{
	content:"";
	display:inline-block;
	width:110px;
	height:180px;
	background-size:contain;
	background-repeat:no-repeat;
	position:absolute;
	margin:auto;
}

.warranty-w10year-heading::before{
	left:-110px;
	top:0;
	bottom:0;
	background-image:url(https://cools-kyutoki.com/wp-content/uploads/2025/11/Emblem-left.svg);

}

.warranty-w10year-heading::after{
	right:-120px;
	top:0;
	bottom:0;
	background-image:url(https://cools-kyutoki.com/wp-content/uploads/2025/11/Emblem-right.svg);
}

.warranty-contents p{
	color:#673200;
	margin-top:1rem;
	font-size:16px;
}

span.warranty-note{
	font-size:13px;
}

@media (max-width: 743px) {
	.warranty-w10year-heading{
		font-size:2.5rem;
	}
	
	.w10-big{
		font-size:4rem;
	}
	
	.warranty-w10year-heading{
		line-height:3.25rem;
	}
	
	.warranty-w10year-heading::before,
	.warranty-w10year-heading::after{
		width:60px;
		height:110px;
	}
	
	.warranty-w10year-heading::before{
		left:-60px;
	}
	
	.warranty-w10year-heading::after{
		right:-60px;
	}
	
	.warranty-stickers{
		width:95%;
	}
	
	.warranty-stickers span{
		width:90%;
		font-size:16px;
	}
	
	.cheapest-in-industry::before,
	.our-warranty::before{
		background-size:contain;
		top:-6px;
	}
	
	
}


/*商品ブロック*/

.products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
	margin-bottom:20px;
}

/* 1つの商品ブロックの幅（PC） */
.product-block-wrapper {
    width: calc(50% - 10px);
}

.product-block-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.product-block {
    width: 490px;
    height: 390px;
    border: 2px solid #C2C2C2;
    padding: 0;

}

.product-link-btn a{
	display:block;
	width:90%;
	background-color:#f4a460;
	color:#ffffff;
	font-weight:900;
	margin:10px auto;
	padding:0.5rem 0;
	border-radius:99999px;
	text-align:center;
}

.product-block-label {
    height: 40px;
    background-color: #53AAC5;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 15px;
}

.product-block-label img {
    background-color: #ffffff;
    padding: 0.1rem 1.7rem;
    margin: 0.3rem 0;
}

.product-block-label h3 {
    margin: 0;
    padding-left: 0.5em;
    color: #ffffff;
    font-weight: 900;
    line-height: 40px;
	font-size:16px;
}

.product-block-content-wrpper {
    display: flex;
}

.product-content-left,
.product-content-right {
    width: 50%;
    padding: 0.5em;
}

.product-content-right {
    position: relative;
}

.product-image {
    position: absolute;
    bottom: 2%;
    right: 0;
    width: 80%;
    height: fit-content;
    text-align: center;
}

.product-content-right img {
    width: 80%;

}

.product-image span {
    display: block;
}

.warranty-fee-note {
    font-size: 8px;
}

.warranty-label {
    width: 100%;
    height: 2em;
    background-color: #D6AE3F;
    text-align: center;
    line-height: 2em;

}

.warranty-label span {
    color: #ffffff;
    font-weight: 900;
}

.feature-label {
    width: 100%;
    height: 2em;

    text-align: center;
    line-height: 2em;
    margin-bottom: 5px;
}

.feature-label span {
    font-size: 11px;
    background-color: #ECECEC;
    display: block;
}

.feature-label2 {
    border-bottom: 1px dotted #000000;
    padding-bottom: 0.8em;
    height: auto;
}

.original-price {
    position: relative;
}

.open-price{
	font-size:13px;
	margin-bottom:0.2rem;
	display:block;
}

.original-price::before {
    content: "";
    display: block;
    position: absolute;
    width: 80%;
    height: 20px;
    border-top: 2px solid #D74646;
    right: 0;
    transform: rotate(6deg);
    top: 7px;
}

.deducted-price-label {
    width: 100%;
    height: 1.5em;
    background-color: #D74646;
    text-align: center;
    line-height: 1.5em;
    display: block;
    color: #ffffff;
}

.total-price {
    display: inline-block;
    width: 100%;
	text-align:left;
    font-size: 38px;
    color: #D74646;
    font-weight: 900;
	font-family: "Oswald", sans-serif;
	
}

.including-tax{
	font-size:20px;
}

.kouji-hi-block {
    width: 100%;
    background-color: #53AAC5;
    display: flex;
    height: 45px;
    justify-content: space-between;
    position: relative;
    align-items: center;
    padding: 0 0.2rem;
}

.plus-icon {
    width: 10%;
    background-color: #ffffff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 25px;
    font-weight: 900;
    color: #53AAC5;
    font-size: 30px;
}

.koujihi-content1 {
    font-size: 12px;
    width: 50%;
    height: 45px;
    text-align: center;
    position: relative;
}

.koujihi-content2 {
    font-size: 7px;
    text-align: center;
    background-color: #ffffff;
    display: block;
    height: 25px;
    position: relative;
    width: 35%;
}

.koujihi-content2 p,
.koujihi-content1 p {
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    height: fit-content;

}

.koujihi-content2 p {
    color: #53AAC5;
}

.koujihi-content1 p {
    color: #ffffff;
    height: 35px;
}

.spec-block {
    width: 47%;
}

.spec-block ul {
    width: 80px;
    margin-bottom: 1.3rem;
}

.spec-block li {
    border: 1px solid #000000;
    font-size: 11px;
    font-family: "Oswald", sans-serif;
    font-weight: 900;
    padding: 0.2rem 0;
    text-align: center;
    margin-bottom: 0.2rem;
	letter-spacing:0.1rem;
}

.product-badge {
    display: flex;
    justify-content: space-between;
}


.hojokin-badge,
.off-badge,
.open-price-badge{
    text-align: center;
    width: fit-content;
    position: relative;
    line-height: 0.7rem;
	padding-top:0.2rem;
}

.off-badge {
    padding-top: 0.4rem;
    padding-right: 0.2rem;
}

.hojokin-badge::after,
.off-badge::after,
.open-price-badge::after{
    content: "";
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    margin: auto;
    z-index: -1;
}

.hojokin-badge::after {
    background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/Badge-blue.webp");
    top: 0;
    bottom: 0;
    left: -0.5rem;
    right: 0;
}

.off-badge::after {
    background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/Badge-red.webp");
    top: 0;
    bottom: 0;
    left: -0.8rem;
    right: 0;
}

.open-price-badge::after{
	background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/11/Badge-red.webp");
    top: 0;
    bottom: 0;
    left: -0.4rem;
    right: 0;
}

.open-price-badge span{
	display:block;
}

.open-price-badge-line1{
	font-size:8px;
	color:#fff;
}

.open-price-badge-line2{
	font-size:15px;
	color:#fff;
	font-weight:900;
}


.hojokin-badge span,
.off-badge span {
    width: fit-content;
    margin: 0 auto;
    font-size: 9px;
    color: #ffffff;
}

.off-badge span {
    padding-left: 1px;
}


span.hojokin-amount,
span.percent {
    font-size: 22px;
    font-family: "Oswald", sans-serif;
    font-weight: 900;
    letter-spacing: 0.1rem;
}

.hojokin-badge-line1,
.off-badge-line1 {
    display: block;
}

.off-badge-line2 {
    font-size: 12px;
    font-weight: 900;
}

.product-group {
    display: flex;
    justify-content: space-between;
	max-width:1000px;
	margin:0 auto;
	margin-bottom: 10px;
}

/* PC版は非表示 */
.product-block-sp {
    display: none;
}

/* タブレット */
@media screen and (max-width: 999px) {
	.product-block{
		width:100%;
	}
	
	.products-grid{
		width:95%;
		margin:1rem auto;
	}
	
	.feature-label span{
		font-size:8px;
	}
	
	.warranty-label span{
		font-size:13px;
	}
	
	.total-price{
		font-size:26px;
	}
	
	.including-tax{
		font-size:18px;
	}
	
	.plus-icon{
		font-size:15px;
		height:15px;
		width:15px;
		line-height:14px;
	}
	
	.koujihi-content1 p{
		font-size:8px;
		height:25px;
	}
	
	.koujihi-content2 p{
		font-size:5px;
	}
	
	
	
	.hojokin-badge span, .off-badge span{
		font-size:8px;
		font-weight:900;
	}
	
	span.hojokin-amount, span.percent{
		font-size:15px;
	}
	
	.open-price-badge-line2{
		font-size:11px;
	}
	
	.product-content-right img{
		width:65%;
	}
	
	.warranty-fee-note{
		font-size:6px;	
	}
	
	.product-image{
		bottom:0%;
		right:-5%;
	}
	
	.product-badge{
		flex-direction:column;
	}
	
	.hojokin-badge,
	.off-badge,
	.open-price-badge{
		margin-bottom:0.5rem;
		width:60px;
		height:60px;
		display: flex;
    	flex-direction: column;
    	justify-content: center;
   		align-items: center;
	}
	
	.hojokin-badge::after,
	.off-badge::after,
	.open-price-badge::after{
		width:100%;
		height:100%;
		background-position:center;
		left:0;
	}
	
	
	
}



@media (max-width: 743px) {
	.product-block-wrapper{
		display:none;
	}
    .product-block-sp {
        display: block;
        margin-bottom: 40px;
        border: 2px solid #C2C2C2;
		height:fit-content;
		width:95%;
		margin:0 auto;
    }

    .sp-row1 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0.5rem;
        padding-bottom: 0.2rem;
        margin: 0 auto 0 auto;
        border-bottom: 1px dotted #000000;

    }

    .sp-row1 img {
        width: 90%;
		max-width:90px;
		margin-left:1rem;
    }
	
	

    .sp-image-spec {
        position: relative;
        width: 30%;
    }

    .sp-spec {
        position: absolute;
        left: -0.7rem;
    }

    .sp-spec li {
        font-size: 9px;
        text-align: center;
        border: 1px solid #000000;
        margin-bottom: 0.2rem;
    }

    .sp-warranty-features {
        width: 65%;
    }

    .sp-warranty-features span {
        display: block;
    }

    .sp-warranty-label {
        background-color: #D6AE3F;
        color: #fff;
        font-weight: 900;
        text-align: center;
        margin-bottom: 0.4rem;
        line-height: 1.3rem;
        font-size: 23px;
        padding: 0.5rem 0;
    }

    .sp-warranty-label small {
        padding: 0;
    }

    .sp-warranty-small {
        font-size: 9px;
    }

    .sp-w10 {
        font-family: "Oswald", sans-serif;
        font-weight: 900;
        letter-spacing: 0.1rem;
    }

    .sp-feature1,
    .sp-feature2 {
        background-color: #ECECEC;
        font-size: 12px;
        margin-bottom: 0.2rem;
        text-align: center;
        padding: 0.3rem 0;
    }

    .sp-small-year {
        font-size: 18px;
		margin-right: 5px;
    }
	
	.sp-badges{
		width:fit-content;
		padding:0 1rem;
		margin-left:0.5rem;
		margin-top:0.5rem;
	}
	
	.sp-toku-badge{
		margin-left:0;
	}

    .sp-hojokin-badge,
	.sp-off-badge,
	.sp-open-price-badge{
        text-align: center;
        width: fit-content;
        position: relative;
        line-height: 1rem;
		color:#fff;
		margin:1rem 0 2.3rem 0;
		text-align:center;
    }
	
	.sp-off-badge{
		padding-left:6px;
		padding-top:7px;
	}
	
	.sp-hojokin-badge::after, 
	.sp-off-badge::after,
	.sp-open-price-badge::after{
    content: "";
    width: 70px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    margin: auto;
    z-index: -1;
}

    .sp-hojokin-badge::after {
        background-image: url(https://cools-kyutoki.com/wp-content/uploads/2025/11/Badge-blue.webp);
        top: 0;
        bottom: 0;
        left: -0.7rem;
        right: 0;
    }
	
	.sp-off-badge::after{
		background-image: url(https://cools-kyutoki.com/wp-content/uploads/2025/11/Badge-red.webp);
		top: 0;
        bottom: 0;
        left: -0.7rem;
        right: 0;
	}
	
	.sp-open-price-badge::after{
		background-image: url(https://cools-kyutoki.com/wp-content/uploads/2025/11/Badge-red.webp);
		top: 0;
        bottom: 0;
        left: -0.6rem;
        right: 0;
	}

    .sp-hojokin-amount{
        font-family: "Oswald", sans-serif;
        font-weight: 900;
        font-size: 22px;
    }
	.sp-percent{
		font-family: "Oswald", sans-serif;
        font-weight: 900;
        font-size: 25px;
	}

    .sp-hojokin-badge-line1{
        display: block;
        font-size: 12px;
    }
	.sp-off-badge-line1{
		display:block;
		font-size:16px;
	}

    .sp-hojokin-badge-line2 {
        font-size: 9px;
    }
	.sp-off-badge-line2{
		font-size:11px;
	}
	
	.sp-open-price-badge-line1{
		font-size:8px;
		display:block;
	}
	
	.sp-open-price-badge-line2{
		font-size:15px;
		font-weight:900;
	}
	
	.sp-row2{
		display:flex;
		width:95%;
		justify-content:space-between;
		margin-top:5px;
	}
	.sp-deducted-price{
		width:100%;
		text-align:center;
	}
	
	.sp-deducted-price-label{
		display:block;
	}
	
	.sp-kouji-hi-block{
		display:flex;
		align-items:center;
	}
	
	.sp-koujihi-content1 p{
		font-size:14px;
	}
	.actual-original-price{
		position:relative;
	}
	
	.actual-original-price::before{
		content: "";
        display: block;
     	position: absolute;
   		width: 100%;
    	height: 20px;
    	border-top: 2px solid #D74646;
    	right: 0;
    	transform: rotate(6deg);
    	top: 7px;
	}
	.sp-deducted-price-label{
		width:100%;
		text-align:center;
		color:#fff;
		background-color:#D74646;
		margin-top:0.2rem;
	}
	
	.sp-total-price{
		color:#D74646;
		font-family: "Oswald", sans-serif;
        font-weight: 900;
        font-size: 32px;
		letter-spacing:1px;
		text-align:left;
		display:inline-block;
		width:100%;
	}
	
	.sp-including-tax2{
		font-size:16px;
		font-weight:light;
		font-family: "Oswald", sans-serif;
	}
	
	.sp-kouji-hi-block{
		background-color:#53AAC5;
		padding:0.5rem 0.2rem;
	}
	
	.sp-plus-icon{
		background-color:#fff;
		color:#53AAC5;
		font-weight:900;
		border-radius:50%;
		width:20px;
		height:20px;
		line-height:16px;
		font-size:20px;
		text-align:center;
		margin-right:0.3em;
	}
	
	.sp-kouji-hi-block p{
		font-size:11px;
		color:#fff;
	}
	.product-group{
		display:block;
	}
	
	.product-link-btn a{
		width:100%;
	}

}

/*住宅設備*/

.product-block-sp{
	display:none;
}

.upsell-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* 商品間の余白調整 */
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
		margin-bottom:20px;
    }

    /* 以前の flex などを完全に無効化 */
    .upsell-grid > * {
        margin: 0 !important;
    }

.upsell-grid .product-block-wrapper {
    display: block;
    width: 100%;
    height: auto;
}


.top-feature-label span{
	font-size:11px;
}
.item-feature-label{
	width: 100%;
    height: 2em;
    text-align: center;
    line-height: 2em;
}
    
.item-feature-label3{
	border-bottom: 1px dotted #000000;
    padding-bottom: 0.8em;
    height: auto;
}
.item-feature-label span{
	font-size: 11px;
    background-color: #ECECEC;
    display: block;
	font-weight:700;
}

.item-block{
	height:340px;
}

span.competitor-price{
	font-size:12px;
}

span.competitor-number{
	font-size:34px;
	font-weight:900;
	font-family: "Oswald", sans-serif;
	margin-left:0.3rem;
}

span.total-price-label{
	font-size:12px;
	height:2rem;
	line-height:2rem;
}

.item-total-price{
	font-size:32px;
	font-weight:900;
	font-family: "Oswald", sans-serif;
	width:100%;
	display:inline-block;
	text-align:left;
}

.item-including-tax{
	font-size:18px;
}

.item-image{
	position:static;
	margin:0 auto;
	width:100%;
}

.item-image img{
	width:100%;
	margin-bottom:1rem;
}

.item-speech-balloon{
	position: relative;
	width:95%;
	margin:0 auto;
	height:70px;
	background-color:#D3E7ED;
	border-radius:10px;
	margin-bottom:1rem;
	text-align:center;
	display: flex;
	flex-direction: column!important;
	justify-content: center;
	align-items: center;
	line-height:1.4rem;
}

.item-speech-balloon::after {
  content: "";
  position: absolute;
  bottom: -12px;            /* 親から少し下に出す */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;

  border-left: 12px solid transparent;  /* 左斜辺 */
  border-right: 12px solid transparent; /* 右斜辺 */
  border-top: 12px solid #D3E7ED;       /* 吹き出し色に合わせる */
}

.item-speech-balloon span{
	display:block;
	font-weight:900;
	font-size:13px;
}

span.you-can-exchange{
	font-size:24px;
	color:#329EBF;
}

span.item-note{
	font-size:9px;
	text-align:left;
}

@media (max-width: 743px) {
	
	.product-block-wrapper{
		display:none;
	}
	.product-block-sp{
		display:block;
	}
	
.sp-features span{
	font-size:9px;
}

    .sp-top-feature-label {
        background-color: #D6AE3F;
        color: #fff;
        font-weight: 900;
        text-align: center;
        margin-bottom: 0.4rem;
        line-height: 1.3rem;
        font-size: 14px!important;
        padding: 0.5rem 1rem;
    }


.sp-item-feature-label{
        background-color: #ECECEC;
        font-size: 12px;
        margin-bottom: 0.2rem;
        text-align: center;
        padding: 0.3rem 0;
    }

.sp-product-block-label h3{
	font-size:10px;
	padding-left:0;
}

.sp-features{
	width:50%;
}

.sp-item-price-wrapper{
	width:70%;
}

.sp-item-row2{
	margin:0 auto;
	align-items:center;
}
	
	.sp-product-price{
		width:70%;
	}

.sp-item-image{
	width:45%;
}

.sp-item-image img{
	width:95%;
	max-width:200px;
	margin-left:0;
}

.sp-item-row1{
	width:100%;
	justify-content:space-between;
	margin:0 auto;
}

.sp-item-speech-balloon{
	position:relative;
	width:100%;
	height:50px;
	background-color:#D3E7ED;
	border-radius:10px;
	display: flex;
	flex-direction: column!important;
	justify-content: center;
	align-items: center;
	line-height:1rem;
	margin-bottom:1rem;
}

.sp-item-speech-balloon span{
	display:block;
	font-size:10px;
	font-weight:900;
}

span.sp-you-can-exchange{
	font-size:16px!important;
	color:#329EBF;
}

.sp-item-speech-balloon::after {
  content: "";
  position: absolute;
  bottom: -8px;            /* 親から少し下に出す */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;

  border-left: 9px solid transparent;  /* 左斜辺 */
  border-right: 9px solid transparent; /* 右斜辺 */
  border-top: 9px solid #D3E7ED;       /* 吹き出し色に合わせる */
}

span.sp-total-price-label{
	font-size:12px;
	padding:0.2rem 0;
}

.sp-item-row2{
	margin:0 auto;
}
.sp-total-item-price{
	font-size:38px;
	width: 100%;
    display: inline-block;
    text-align: left;
}

.sp-total-item-price-tax2{
	font-size:18px;
	margin-left:0.2rem;
}

.sp-competitor-price{
	font-size:10px;
	font-weight:900;
}

.sp-competitor-number{
	font-size:24px;
}

.toku-badge span{
	font-size:55px;
	font-weight:900;
	transform:rotate(-10deg);
	display:block;
	color:#fff;
}

.toku-badge{
	position:relative;
}
.toku-badge::before{
	content:"";
	display:block;
	position:absolute;
	width:80px;
	height:80px;
	background-image:url("https://cools-kyutoki.com/wp-content/uploads/2025/11/Badge-gold.webp");
	background-size:contain;
	background-repeat:no-repeat;
	top:0;
	right:0;
	left:-20%;
	bottom:0;
	margin:auto;
}

.sp-item-badges{
	height:fit-content;
}

.sp-item-note{
	font-size:9px;
	margin-left:5%;
	margin-top:1rem;
}
	.upsell-grid {
        grid-template-columns: 1fr !important;
		justify-items: center !important;
    }
}


@media (min-width: 769px) {
    .products-grid .product-block-wrapper {
        width: calc(50% - 10px) !important;
        display: block !important;
    }
}

/* SP：1カラム */
@media (max-width: 743px) {
    .products-grid .product-block-wrapper {
        width: 100% !important;
    }
}

/*工事の流れ*/

.top_flow{
	padding-top:0;
}

.top_flow h2{
	text-align:center;
	font-size:28px;
}

.top_flow .top_content_wapper{
	padding-top:20px!important;
}

/*施工事例引用エリア*/
.cases-area{
	width:100%;
}

.cases-wrapper{
	width:100%;
	max-width:1200px;
	margin: 0 auto;
	height:fit-content;
	padding:2rem;
}

.caases-heading{
	display:block;
	width:fit-content;
	padding:0.5rem 2rem;
	border-radius:9999px;
	background-color:#00a6b5;
	font-size:24px;
	font-weight:900;
	margin: 0 auto;
	color:#fff;
}

.swiper-pagination{
	margin-top:1rem;
}

.media-case-list{
	display:flex;
	width:100%;
	margin:0 auto;
	justify-content:space-between;
}

.media-case-item{
	height:fit-content;
	border-radius:10px;
	box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.4);
}

.case-thumb img{
	border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.swiper{
	padding:1rem!important;
}

.swiper-wrapper{
	margin-bottom:1.5rem;
}

.swiper-button-next:after, .swiper-button-prev:after{
	display:none;
}

.case-tags{
	position:relative;
}

.case-tag{
	font-size: 15px;
    display: block;
    width: 80px;
    text-align: center;
    background: #4169e1;
    border-radius: 9999px;
    color: #fff;
    font-weight: 900;
	position:absolute;
	top:-25px;
	left:0.3rem;
}

.case-btn{
	display:block;
	width:fit-content;
	padding:0.5rem 2rem;
	border-radius:9999px;
	background-color:#ff0000;
	font-size:18px;
	font-weight:900;
	margin: 0px auto;
	margin-bottom:3rem;
	color:#fff;
	text-align:center;
}

.case-static-title{
	display:block;
	width:100%;
	background:#00A6B5;
	color:#fff;
	text-align:center;
	font-weight:900;
}

.spec-text{
	width:100%;
	padding:0;
}

.spec-row{
	text-align:left!important;
	width:fit-content;
}

.case-spec-info{
	padding:1rem 0;
	display:flex;
	width:90%;
	justify-content:space-around;
	align-items:center;
	margin:0 auto;
}

.spec-arrow-wrap img{
	width:55px!important;
}

.case-spec-info .before{
	position:relative;
}

.before .model-num{
	font-size:0.8rem;
}

.after .model-num{
	font-size:0.8rem;
}

.model-num{
	width:fit-content;
}

.maker-name{
	font-size:0.8rem;
	border:1px #000 solid;
	width:fit-content;
	text-align:center;
	padding:0.2rem 0.5rem;
	font-weight:900;
	margin:0;
	display:block;
}

@media (max-width: 743px) {

.case-tag{
	font-size: 12px;
}
	
	.before .model-num{
	font-size:0.6rem;
	
}
	
	.case-spec-info{
		padding:0.75rem 0;
	}
	
	.spec-row{
		width:105px!important;
	text-align:center;
	}

.after .model-num{
	font-size:0.6rem;
	width:105px!important;
	text-align:left;
}
	
	.maker-name{
		font-size:0.5rem;
		margin:0 auto;
		padding:0.1rem 0.5rem;
	}
	
	.media-case-item{
	height:200px;
	min-height:200px!important;
		max-height:200px!important;
	}
	
	.spec-arrow-wrap img{
	width:30px!important;
}
	
}



/* ▼▼▼ スライダー読み込み前の「巨大画像チラつき」防止 ▼▼▼ */

/* 1. コンテナ：画面からはみ出た部分を隠す */
.js-media-case-slider {
    overflow: hidden;
}

/* 2. ラッパー：縦積みではなく、強制的に「横並び」にする */
.js-media-case-slider .swiper-wrapper {
    display: flex; 
}

/* 3. 各スライド：読み込み前も「だいたいの幅」を指定しておく */
.js-media-case-slider .swiper-slide {
    width: 100%; /* スマホ用（とりあえず1枚表示） */
    flex-shrink: 0; /* 縮こまらないようにする */
    margin-right: 16px; /* 余白 */
}

/* PCサイズ（1024px以上）の時は小さくしておく */
@media (min-width: 1024px) {
    .js-media-case-slider .swiper-slide {
        width: 32%; /* 3列表示設定なら、だいたい32%くらいにしておく */
    }
}

/*お客様の声エリア*/

.google-review-pc{
	max-width:1000px;
	margin:0 auto;
	margin-top:2rem;
}

/* Googleレビュー本文を3行で省略表示 */
.google-review-sp .wpsr-review-content,
.google-review-pc .wpsr-review-content {
max-height: 12em; /* 好きな高さに調整できる */
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 6px; /* スクロール時に文字が切れないように調整 */
        display: block;

        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        text-overflow: unset !important;
}


.wpsr_read_more_btn,
.wpsr_read_more,
.wpsr_read_less {
    display: none !important;
}


.google-review-sp{
		display:none;
	}

p.customer-review-content{
	display:block;
	width:fit-content;
	margin:40px auto 10px auto;
	text-align:center;
	line-height:1.7rem;
}

.wpsr_read_more{
	display:none!important;
	padding:0.5rem 1rem!important;
	font-size:9px;
	color:#ffffff!important;
	background-color:#02A6B5;
	font-weight:900!important;
}

.wpsr-review-info{
	padding-top:0px!important;
}

.wpsr-reviewer-name::after{
	content:"様";
	display:inline;
	width:fit-content;
	height:auto;
}


/* キラキラボタン */
a.google-review-link {
    display: inline-block;
    padding: 0.7rem 2.5rem;
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    background-color: #ff0000;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	margin:0 auto;
	display:block;
	width:300px;
}

/* ホバー時の少し大きくなる演出 */
a.google-review-link:hover {
    transform: scale(1.05);
}

.top_items{
	margin-top:6rem;
}

/* スライダー内のレビューカードを整える */
.sp-review-slider .slide-item {
    padding: 10px;
    box-sizing: border-box;
}

/* Social Ninja の固定レイアウトを上書きして無効化 */
.google-review-sp .wpsr-row,
.google-review-sp .wpsr-all-reviews {
    display: block !important;
}

.google-review-sp .wpsr-col-4 {
    width: 100% !important;
    max-width: 100% !important;
}


/* 4件目以降を強制的に非表示 */
.google-review-sp .wpsr-all-reviews > .wpsr-col-4:nth-of-type(n+4) {
    display: none !important;
}

/* Social Ninja の自動グリッドを無効化（複数列になるのを防ぐ） */
.google-review-sp .wpsr-all-reviews {
    display: block;
}

/* 各レビューを縦並びに強制 */
.google-review-sp .wpsr-col-4 {
    width: 80% !important;
    max-width: 100% !important;
    display: block !important;
	margin:0 auto;
	padding:0;
}

.google-review-sp .wpsr-container,
.google-review-sp .wpsr-row {
    overflow-x: hidden !important;
}

.wpsr-review-template{
	border:2px solid #02A6B5;
	min-height:320px;
	max-height:320px;
}

.wpsr-fixed-height .wpsr-review-fixed-height-wrap{
	padding-top:0!important;
	margin:0;
}

.wpsr-review-info{
	margin-left:4rem;
	position:relative;
}

.wpsr-review-info::before{
	content:"";
	display:inline-block;
	position:absolute;
	width:50px;
	height:50px;
	background-image:url(https://cools-kyutoki.com/wp-content/uploads/2025/12/customer_silhouette.webp);
	background-size:contain;
	left:-2rem;
}



@media (max-width: 999px) {
	.google-review-sp .wpsr-all-reviews{
		display:flex!important;
	}
	
	.wpsr-review-template{
	height:auto;
		width:300px;
		margin:1rem auto;
}
	
	.wpsr-review-info{
		margin-left:7rem;
	}
	.wpsr-review-info::before{
		width:70px;
		height:70px;
		left:-5rem;
	}
	
	.customer-reviews{
		height:auto;
	}
	.google-review-pc{
		display:none;
	}
	
	.google-review-sp{
		display:block;
	}
	
	.wpsr-all-reviews{
		padding-top:0!important;
	}
	
	p.customer-review-content{
		width:90%;
		margin:0 auto;
		margin-top:30px;
	}
	
}

/*ニュースエリア */

.top_news .news-link a::after{
	height:fit-content;
	top:0;
	bottom:0;
	margin:auto;
}

/*資格エリア */

.shikaku-wrapper{
	width:100%;
	background-color:e0f4f6;
	height:auto;
	padding:2rem 0;
}

.shikaku-images{
	margin:0 auto;
	width:500px;
	display:flex;
	align-items:center;
	justify-content:space-around;
}

.shikaku-images img{
	width:90px;
	height:auto;
}

.shikaku-content{
	background-color:#ffffff;
	border-radius:5px;
	margin:0 auto;
	width:fit-content;
	height:auto;
	padding:1rem 4rem;
}


.shikaku-content h2{
	margin-bottom:1rem;
	font-size:28px;
	color:#00a6b5;
	font-weight:900;
	text-align:center;
}

.shikaku-content p{
	margin-bottom:1rem;
}

.shiaku-list{
	margin:2rem 0;
}

.shiaku-list ul{
	display:grid;
	grid-template-columns: repeat(2, 1fr); 
	column-gap:20px;
}

.shikaku-content a{
	display:block;
	background-color:#00a6b5;
	color:#ffffff;
	font-weight:900;
	border-radius:10px;
	padding:1rem;
	width:50%;
	text-align:center;
	margin: 0 auto;
}

@media (max-width: 743px) {
	.shikaku-images{
		display:grid;
		grid-template-columns: repeat(2, 1fr); 
		width:50%;
		place-items: center;
		gap:15px;
	}
	
	.shikaku-content{
		padding:1rem;
		width:95%;
		margin:0 auto;
	}
	
	.shikaku-content h2{
		font-size:26px;
	}
	
	.shiaku-list ul{
		display:block;
	}
	
	.shikaku-content a{
		width:70%;
	}

	
}

/*ブログエリア*/

.media-latest-posts-thumb{
	display:grid;
	grid-template-columns: repeat(3, 1fr); 
	place-items: center;
	gap:20px;
}

.blog-sns-wrapper{
	max-width:1000px;
	width:80%;
	margin:0 auto;
	margin-top:3rem;
}

.media-text{
	margin:20px 0;
	text-align:center;
	margin-bottom:0;
}

.blog-block{
	width:100%;
}

.blog-block h3,
.sns-block h3{
	color:#00a6b5;
	font-size:18px;
	font-weight:900;
	text-align:center;
	margin:1.5rem auto;
	position:relative;
	width:170px;
	display:block;
}

.blog-block h3::before,
.blog-block h3::after,
.sns-block h3::before,
.sns-block h3::after{
	content:"";
	width:80%;
	height:1px;
	background-color:#00a6b5;
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
}
.blog-block h3::before,
.sns-block h3::before{
left:-10rem;
}

.blog-block h3::after,
.sns-block h3::after{
	right:-10rem;
}

.media-post-item .info a{
	font-size:12px;
}

.media-post-item .info span{
	display:block;
	font-size:10px;
	border-radius:9999px;
	background-color:#00a6b5;
	color:#fff;
	width:fit-content;
	padding:0.2rem 1rem;
	margin:0.5rem 0;
}

.media-post-item img{
	margin-bottom:0rem;
}

.info .title{
	min-height:60px;
	display:block;
}

.blog-link{
	padding: 0.7rem 2.5rem;
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    background-color: #ff0000;
    border-radius: 999px;
    position: relative;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    margin: 2.5rem auto;
    display: block;
    width: 300px;
	text-align:center;
}

.sns-contents{
	display:flex;
	justify-content:space-between;
}


.x-timeline{
	height:500px;
}

.insta-reel,
.tiktok{
	height:500px;
	overflow:hidden;
}

.tiktok-embed{
	margin-top:0;
}

@media (max-width: 743px) {
	.blog-block h3::after,
	.sns-block h3::after{
		right:-6rem;
		width:50%;
}
	.blog-block h3::before,
	.sns-block h3::before{
		left:-6rem;
		width:50%;
}
	.media-latest-posts-thumb{
		grid-template-columns:repeat(2, 1fr);
	}
	
	.media-case-item{
		min-height:300px;
		max-height:300px;
	}
	
	.media-post-item .title{
		display: -webkit-box;
		-webkit-line-clamp: 3; /* ここで「何行見せるか」を指定 */
		overflow: hidden;
		-webkit-box-orient: vertical;
		display:block;
		height:70px;
	}

}

/*よくある質問*/

.top-faq-area{
	max-width:1000px;
	margin: 0 auto;
}

.top-faq-area p{
	padding-bottom:1rem;;
}

.top-faq-area h3 {
    background-color: #00a6b5;
    color: #FFF;
    min-height: 56px;
    line-height: 25px;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 16px;
    padding: 1em;
}

.trivia-panel {
    border-bottom: 1px solid #00A6B5;
}

.trivia-panel:first-child {
    border-top: 1px solid #00A6B5;
}

/* 質問アイコン（Qマーク） */
.trivia-panel h3::before {
    content: url(../svg/icon-light.svg); /* デフォルトは電球アイコン */
    display: inline-block;
    position: relative;
    top: 4px;
    margin-right: 12px;
}

.trivia-panel h3.question::before {
    content: url(../svg/icon-question.svg); /* .questionクラスがつくとQマークになる */
    top: 8px;
}

/* 開閉のプラスアイコン */
.trivia-panel h3::after {
    content: url(../svg/icon-plus.svg);
    display: inline-block;
    position: absolute;
    top: 22px;
    right: 25px;
}

/* アクティブ（開いた）時のスタイル */
.trivia-panel .active {
    background: #E0F4F6!important;
}

/* 開いた時はマイナスアイコンにする */
.trivia-panel.active h3::after {
    content: url(../svg/icon-minus.svg);
}

/* コンテンツ部分（初期は非表示） */
.trivia-panel .trivia-panel-content {
    display: none;
    padding: 0 50px;
}

@media screen and (max-width: 480px) {
    .trivia-panel h3::after {
        right: -24px;
    }
    .trivia-panel h3 {
        margin-right: 50px;
        line-height: 30px !important;
        padding-left: 20px;
        text-indent: -20px;
        margin-left: 40px;
		font-size:15px;
    }
}

.trivia-panel h4 {
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
    color: #00A6B5;
    padding: 0 10px 10px 0;
}

@media screen and (max-width: 480px) {
    .trivia-panel h4 {
        padding: 0 10px 10px;
    }
}

@media screen and (max-width: 480px) {
    .trivia-panel .trivia-panel-content {
        padding: 0 10px;
    }
}
}