/*メインビジュアル*/

.cr-fv{
	width: 100%;
    height: 420px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
	background-image: url("https://cools-kyutoki.com/wp-content/uploads/2025/12/CP_firstview_pc.png");
    background-position: center;
	display:flex;
	justify-content:center;
	align-items:center;
	background-position: bottom;
}

.cr-fv h1{
	color:#E3D82A;
	font-size:80px;
	font-weight:900;
	text-align:center;
	line-height:4.5rem;
}

.cr-sub-title{
	font-size:32px;
	color:#fff;
	display:block;
}

.cr-top-bar{
	width: 100%;
	display:block;
    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;
}

.review-section{
	width:100%;
	max-width:1100px;
	margin:0 auto;
	margin-bottom:2rem;
}

.user-voice{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:20px;
	margin:0 auto;
	width:100%;
}

@media (max-width: 768px) {
	.user-voice{
		display:block;
	}
	
	.cr-sub-title{
		font-size:19px;
		line-height:2rem;
	}
	
	.cr-fv {
		background-image: url(https://cools-kyutoki.com/wp-content/uploads/2025/12/CP_firstview_sp-1.webp);
        height: 300px;
    }
	
	.cr-fv h1{
		font-size:50px;
	}
	
	.cr-top-bar{
		font-size:14px;
	}
	
	.page_header .title-jp{
		font-size:20px!important;
	}
	
	.review-section{
		width:95%;
		margin:0 auto;
	}
	
	.user-voice-block{
		margin-bottom:1rem;
	}
}

.icon-and-heading{
	display:flex;
	align-items:center;
	justify-content:space-around;
	margin-bottom:1rem;
}

.icon-and-heading h3{
	text-align:left;
	font-weight:900;
	color:#00A4B3;
	font-size:14px;
	margin-bottom:1rem;
	display:block;
	margin-top:0.5rem;
}

.icon-and-heading img{
	width:70px;
}

.user-voice-block{
	box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
	padding:1rem;
	border:1px solid #e0f4f6;
}

.area-and-product{
	display:flex;
	width:100%;
	justify-content:space-around;
	margin:0 auto;
	margin-bottom:1rem;
}

.review-area,
.review-product{
	width:fit-content;
	text-align:center;
}

.review-area-tag,
.review-product-tag{
	display:block;
	width:fit-content;
	padding:0.25rem 1rem;
	text-align:center;
	border-radius:9999px;
	color:#fff;
	font-size:13px;
}

.review-area-tag{
	background-color:#00008b;
}

.review-product-tag{
	background-color:#3cb371;
}

.review-wrapper{
	width:100%;
	display:flex;
	justify-content:space-between;
	margin:0 auto;
	margin-bottom:0.5rem;
}

.review-container{
	margin-bottom:1rem;
}

.review-area-sm,
.review-product-sm{
	font-size:10px;
}


.review-wrapper h4 {
  display: flex;
  align-items: center;
  flex-grow: 1;
  margin: 0;
  margin-right: 15px;
  font-size: 11px;
  white-space: nowrap;
}

.review-wrapper span{
	font-size:14px;
}

.review-wrapper h4::after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background-color: #333333;
  margin-left: 15px;
}

.review-comment h4,
.review-reason h4{
	font-size:13px;
	font-weight:900;
	color:#00A4B3;
	display:flex;
	align-items:center;
	margin:0 auto;
	justify-content:space-around;
	margin-bottom:1rem;
}

.review-comment h4::before,
.review-comment h4::after,
.review-reason h4::before,
.review-reason h4::after{
	content:"";
	width:23%;
	height:1px;
	background-color:#00A4B3;
}

.review-comment p,
.review-reason li{
	font-size:12px;
}

.review-reason{
	margin-top:1rem;
}

.filled-star,
.outline-star{
	color:#ffd700;
}

/* 各リストアイテムのスタイル */
.review-reason li {
  margin-bottom: 10px;
  line-height: 1.6;
}

/* アイコン（擬似要素）の設定 */
.review-reason li::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #27ae60;
  margin-right: 8px;
  display: inline-block;
}

 /* ヘッダー調整 */
    header { margin-bottom: 0 !important; }

    /* メーカー絞り込みフォームの簡易スタイル */
    .filter-area {
        max-width: 1000px;
        margin: 40px auto 20px;
        padding: 0 20px;
        text-align: right; /* 右寄せにする */
    }
    .filter-form {
        display: inline-block;
        background: #f4f4f4;
        padding: 15px 20px;
        border-radius: 8px;
		width:100%;
		text-align:center;
    }
    .filter-form select {
        padding: 8px;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 8px;
		text-align:center;
    }
    .filter-form button {
        padding: 8px 20px;
        background: #333;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .filter-form button:hover {
        background: #555;
    }

    /* メーカー絞り込みエリア */
    .filter-area {
        max-width: 1000px;
        margin: 40px auto 20px;
        padding: 0 20px;
        text-align: right;
    }
    .filter-form {
        display: inline-block;
        background: #f4f4f4;
        padding: 15px 20px;
        border-radius: 8px;
    }
    .filter-form select {
        padding: 8px;
        font-size: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 8px;
    }
    .filter-form button {
        padding: 8px 20px;
        background: #333;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .filter-form button:hover {
        background: #555;
    }

    /* ページネーション */
    .pagination {
        margin-top: 50px;
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .pagination a, .pagination span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid #ddd;
        text-decoration: none;
        color: #333;
        background: #fff;
        border-radius: 4px;
        transition: all 0.3s;
    }
    .pagination span.current {
        background-color: #333;
        color: #fff;
        border-color: #333;
    }
    .pagination a:hover {
        background-color: #f0f0f0;
    }

@media screen and (max-width: 1024px) {
    .user-voice {
        grid-template-columns: repeat(2, 1fr);
    }
}