/*
Theme Name: Hadarepo original template ver. 1.1
Author: Hadarepo
Author URI: https://hadarepo.com/
Version: 1.1
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
body{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color:#002B49;
	line-height:1.7;
	font-size:16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body a{
	color:#4B7699;
	-webkit-transition: all .2s; /* Safari */
    transition: all .2s;
	opacity:1;
}
body a:hover{
	color:#1F4F70;
	text-decoration:none;
	opacity:0.7;
}
body a.btn{
	border:solid 1px #1F4F70;
	padding:10px 30px;
	border-radius:23px;
}
body a.btn:hover{
	background:#1F4F70;
	color:#fff;
}
.link-button{
	margin-top:30px;
}
.average-score {
	display: flex;
	flex-direction:column;
}
.average-score .score{
	font-weight:bold;
	font-size:24px;
}
.glsr-reviews .average-score .score{
	font-size:20px;
}
.star {
	font-size: 24px;
	color: gold; /* デフォルトは灰色 */
	position: relative;
	display: inline-block;
}
.star.full {
	color: gold;
}
.star.half::before {
	content: '★';
	color: gold;
	position: absolute;
	left: 0;
	width: 50%;
	overflow: hidden;
}
.star.empty {
	color: gold; /* 空星は灰色 */
}
.review-bar {
	display: flex;
	align-items: center;
	width:320px;
}
.review-bar .label {
	width: 100px;
	flex-shrink: 0;
	font-size: 14px;
}
.bar-container {
	flex: 1;
	height: 10px;
	background: #eee;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}
.bar-fill {
	height: 100%;
	background-color: #f6b617; /* ゴールド系 */
	transition: width 0.3s ease;
}
.review-bar .percent {
	width: 40px;
	text-align: right;
	font-size: 14px;
}
.no-reviews{
	font-size:14px;
}
.review-media{
	display:flex;
	justify-content:center;
	gap:5px;
	margin-bottom:10px;
}
.review-media .media-item img{
	width:100px;
	height:100px;
	border-radius:4px;
}
.review-media .media-item.video{
	width:100px;
	height:100px;
	border-radius:4px;
	background-size:cover;
	background-position:center;
	position:relative;
}
.review-media .media-item.video:before{
	content:"";
	display:block;
	width: 60px;
	height: 60px;
	background-image:url(/wp-content/uploads/2025/09/play-button-3-2.png);
	background-size:cover;
	background-repeat:no-repeat;
	position:absolute;
	top:20px;
	left:20px;
	opacity:0.8;
	
}
header{
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
	position:relative;
}
header .top{
	background-color:#002c48;
	padding:5px 0;
}
header .top li{
	margin-left:10px;
}
header .top a{
	color:#fff;
	text-decoration:none;
	font-size:12px;
}
header nav{
	padding:10px 0;
}
header nav .menu{
	cursor:pointer;
	-webkit-transition: all .2s; /* Safari */
    transition: all .2s;
	opacity:1;
}
header nav .menu:hover{
	opacity:0.7;
}
header nav .menu span{
	font-weight:bold;
	font-size:10px;
	letter-spacing: 1px;
}
header #menu{
	position:absolute;
	top:0;
	right:-100%;
	height:100vh;
	background:#1F4F70;
	transition: right 0.4s ease-in-out;
	padding:20px;
	visibility:hidden;
	display:none;
	z-index:1000;
}
header #menu.active{
	right:0;
	visibility:visible;
	display:block;
}
header #menu #close{
	background: none;
	color: #fff;
	border: solid 1px #fff;
	font-size: 12px;
	padding: 5px;
	cursor: pointer;
	text-align: right;
	border-radius:4px;
	opacity:0.8;
}
header #menu ul{
	margin:20px 0;
	list-style:none;
}
header #menu ul li a{
	color:#fff;
}
header #menu form{
	position:relative;
}
header #menu form input{
	padding:7px 10px;
	border-radius:22px;
	border:none;
}
header #menu form button{
	position:absolute;
	top:2px;
	right:2px;
	width:36px;
	height:36px;
	border-radius:50%;
	border:none;
	background:#759fc5;
}
header #menu ul.links{
	margin-top:30px;
}
header #menu ul.links li{
	margin-bottom:10px;
}
header #menu ul.links li a{
	text-decoration:none;
	font-size:90%;
}
.title{
	padding-top:10px;
}
.title #breadcrumbs{
	font-size:12px;
}
.title h1{
	font-size:24px;
	font-weight:600;
	overflow-wrap:break-word;
	word-break:break-word;
}
.title .subtitle{
	font-size:18px;
	opacity:0.6;
}
.title .subtitle small{
	font-size:13px;
}
.title .nav{
	margin-top:30px;
}
.title .nav li{
	margin-right:5px;
	margin-bottom:5px;
}
.title .nav a{
	display:block;
	text-decoration:none;
	font-size:12px;
	padding:5px 10px;
	border:solid 1px #1f4f70;
	border-radius:3px;
}
.title .nav a.active,.title .nav a:hover{
	background:#1f4f70;
	color:#fff;
}
.title .product-categories{
	margin-top:30px;
}
.title .product-categories li{
	margin-right:5px;
	margin-bottom:5px;
}
.title .product-categories li a{
	display:block;
	text-decoration:none;
	font-size:12px;
	padding:2px 10px;
	border:solid 1px #1f4f70;
	border-radius:3px;
}
.title .product-categories li a:hover{
	background:#1f4f70;
	color:#fff;
}
.title .product-brands{
	margin-bottom:5px;
}
.title .product-brands a{
	text-decoration:none;
	font-weight:600;
}
.title .product-brands a span{
	text-transform: uppercase;
}
@media only screen and (min-width: 768px){
	.average-score {
		flex-direction:row;
		align-items: center;
		gap: 10px;
	}
}
@media only screen and (min-width: 992px){
	.title h1{
		font-size:36px;
	}
}


footer{
	background:#002c49;
	padding:40px 0 10px;
	margin-top:60px;
	color:#fff;
}
footer img.logo{
	display:block;
	margin:0 auto 20px;
}
/* 左右均等の余白にする。片側だけだと中央寄せが少しずれるため */
footer li.menu-item{
	margin:0 10px 10px;
}
footer a.nav-link{
	color:#fff;
	font-size:14px;
	-webkit-transition: all .2s; /* Safari */
	transition: all .2s;
}
footer a.nav-link:hover{
	color:#fff;
}
footer .links li{
	margin:0 8px 5px;
}
footer .links li a{
	color:#fff;
	font-size:11px;
	-webkit-transition: all .2s; /* Safari */
	transition: all .2s;
	text-decoration:none;
	opacity:0.9;
}
footer .links li a:hover{
	color:#fff;
	opacity:0.6;
}
footer p.copyright{
	font-size:12px;
	margin-bottom:0;
	opacity:0.6;
}
#pagination {
	display:flex;
	justify-content:center;
	margin-top: 40px;
	text-align: center;
}
#pagination .page-numbers {
  display: inline-block;
  margin: 0 5px;
  padding: 5px 12px;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}
#pagination .current {
  background-color: #333;
  color: #fff;
  border-color: #333;
}
#pagination .prev,#pagination .next {
  font-weight: bold;
}
.loading-dots span {
	animation: blink 1.4s infinite both;
}
.loading-dots span:nth-child(2) {
	animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes blink {
	0% { opacity: 0.2; }
	20% { opacity: 1; }
	100% { opacity: 0.2; }
}
#home{
	overflow:hidden;
}
#home .hero{
	padding:100px 0;
	background-color:#ecf4fc;
	text-align:center;
}
#home .hero h1{
	font-weight:900;
	line-height:1.4;
}
#home .hero h1 small{
	display:block;
	font-size:60%;
	font-weight:700;
}
#home .hero form{
	margin-top:40px;
}
#home .hero form > div{
	position:relative;
}
#home .hero form input{
	padding:10px 20px;
	height:50px;
	border:none;
	border-radius:25px;
	width:320px;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
	font-size:14px;
}
#home .hero form button{
	background:#a1caf1;
	width:44px;
	height:44px;
	border:none;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	left:50%;
	top:3px;
	margin-left:113px;
}
#home section{
	padding-top:80px;
}
#home section h2{
	text-align:center;
	font-weight:700;
	margin-bottom:30px;
}
#home ul.slider{
	margin:0 -20px;
	padding:10px 20px;
	overflow-x:auto;
}
#home ul.slider li{
	margin-right:15px;
}
#home .slider a{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	text-decoration:none;
	width:140px;
	height:140px;
	border-radius:50%;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
	border:solid 1px rgba(0,0,0,0.1);
}
#home .slider a:hover{
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
	opacity:1;
}
#home .slider a span{
	margin-top:10px;
	font-size:16px;
	color:#4B7699;
}
#home .review ul{
	margin:0 -20px;
	overflow-x:auto;
	padding:10px 20px;
}
#home .review ul li{
	margin-right:15px;
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
	border-radius:10px;
	flex:0 0 200px;
	overflow:hidden;
	-webkit-transition: all .3s; /* Safari */
	transition: all .3s;
	opacity:1;
}
#home .review ul li:hover{
	opacity:0.5;
}
#home .review ul li a{
	display:block;
	height:100%;
	text-decoration:none;
}
#home .review ul li .image{
	background-size:cover;
	background-position:center;
	height:150px;
}
#home .review ul li .text{
	padding:10px;
}
#home .review ul li span{
	display:block;
}
#home .review ul li span.brand{
	font-size:14px;
}
#home .review ul li span.name{
	font-weight:700;
	margin-bottom:10px;
	color:#002B49;
	line-height:1.4;
	font-size:16px;
}
#home .review ul li span.review{
	font-size:80%;
	margin-bottom:5px;
	color:#002B49;
}
#home .review ul li div.user{
	text-align:right;
	opacity:0.7;
	font-size:70%;
}
#home .review ul li div.user span.likes{
	margin-right:5px;
	color:#ff69b4;
}
#home .ranking ul{
	margin:0 -20px;
	overflow-x:auto;
	padding:10px 20px 0;
}
#home .ranking ul li{
	margin-right:15px;
	flex:0 0 200px;
	overflow:hidden;
	-webkit-transition: all .3s; /* Safari */
	transition: all .3s;
	opacity:1;
}
#home .ranking ul li:hover{
	opacity:0.5;
}
#home .ranking ul li a{
	text-decoration:none;
}
#home .ranking ul li .image{
	background-size:cover;
	background-position:center;
	height:180px;
	border-radius:10px;
	margin-top:5px;
}
#home .ranking ul li span.category{
	font-size: 12px;
	padding: 3px 6px;
	border: solid 1px #1f4f70;
	border-radius: 3px;
	line-height: 1;
	margin-right: 5px;
	margin-bottom:5px;
	color: #002c48;
	display:inline-block;
}
#home .ranking ul li .text{
	padding:10px 10px 0;
}
#home .ranking ul li span{
	display:block;
}
#home .ranking ul li span.rank{
	font-weight:900;
	font-size:24px;
}
#home .ranking ul li span.brand{
	display:block;
	font-size:14px;
}
#home .ranking ul li span.name{
	font-weight:700;
	margin-bottom:10px;
	color:#002B49;
	font-size:16px;
	line-height:1.4;
}
#home .ranking ul li span.average{
	display:flex;
	align-items:center;
	font-weight:900;
	color:#002B49;
	font-size:20px;
}
#home .ranking ul li span.average img{
	margin-right:5px;
}
#home .news li{
	margin-bottom:30px;
}
#home .news li:last-child{
	margin-bottom:0;
}
#home .news li a{
	text-decoration:none;
	color:#002c48;
}
#home .news li img{
	border-radius:8px;
	margin-right:20px;
	flex:0 0 auto;
	width:120px;
	height:67.5px;
	object-fit:cover;
	background:rgba(0,43,73,0.05);
}
@media only screen and (min-width: 768px){
	#home .news li img{
		width:160px;
		height:90px;
	}
}
#home .news li span.date{
	display:block;
	margin-bottom:5px;
	font-size:14px;
	opacity:0.7;
}
#home .news li h3{
	margin-bottom:0;
	font-size:16px;
}
@media only screen and (min-width: 576px){
	#home .hero form input{
		width:400px;
	}
	#home .hero form button{
		margin-left:153px;
	}
}
#product-list{
	margin-top:40px;
}
#product-list li{
	border-bottom:solid 1px rgba(0,0,0,0.07);
}
#product-list li a{
	padding:25px 0;
	text-decoration:none;
	color:#002c48;
	display:flex;
	align-items:center;
}
#product-list li a span.rank{
	font-weight:800;
	width:40px;
}
#product-list li a .image{
	flex:0 0 120px;
	width:120px;
	min-height:120px;
	height:120px;
	background-size:cover;
	background-position:center;
	margin-right:30px;
}
#product-list li a span.brand{
	display:block;
	color:#4b7699;
	font-size:14px;
}
#product-list li a span.name{
	display:block;
	font-weight:800;
	margin-bottom:10px;
}
#product-list li .glsr-summary-rating{
	font-size:16px;
}
#product-list li .glsr-summary-text{
	flex:0 0 auto;
}
#product-list li .product-categories{
	margin-bottom:5px;
}
#product-list li .product-categories li{
	font-size: 12px;
	padding: 3px 6px;
	border: solid 1px #1f4f70;
	border-radius: 3px;
	line-height:1;
	margin-right:5px;
}

#product-category{
	margin-top:40px;
}
#product-category li{
	margin:0 10px 20px;
	text-align:center;
	display:flex;
	justify-content:center;
}
#product-category li a{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	text-decoration:none;
	width:140px;
	height:140px;
	border-radius:50%;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
	border:solid 1px rgba(0,0,0,0.1);
}
#product-category li a:hover{
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
	opacity:1;
}
#product-category li a span{
	margin-top:10px;
	font-size:16px;
	color:#4B7699;
}
#home .review ul{
	margin:0 -20px;
	overflow-x:auto;
	padding:10px 20px;
}
#page{
	margin-top:50px;
}
#page h2{
	font-size:20px;
	margin:40px 0 20px;
	font-weight:700;
}
#page .tml{
	max-width:700px;
	margin:0 auto;
	background:rgba(0,0,0,0.02);
	border:solid 1px rgba(0,0,0,0.1);
	padding:30px;
	border-radius:12px;
}
#page ul.tml-links{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	align-items:center;
	flex-direction:column;
}
#page ul.tml-links li{
	margin:0 10px;
	font-size:14px;
}
#page form button{
	border:solid 2px #1F4F70;
	padding:10px 30px;
	border-radius:27px;
	background:#1F4F70;
	color:#fff;
	display:block;
	margin:0 auto;
	-webkit-transition: all .2s; /* Safari */
	transition: all .2s;
}
#page form button:hover{
	background:transparent;
	color:#1F4F70
}
#page form input,#page form textarea{
	border:solid 1px rgba(0,0,0,0.1);
	padding:10px;
	border-radius:3px;
}
#page form input[disabled] {
	background-color:rgba(0,44,73,0.1);
	color: #333;
	border: 1px solid #ccc;
	cursor: not-allowed;
	opacity:0.7;
}
#page form button[disabled] {
	cursor: not-allowed;
	opacity:0.4;
}
#page form button[disabled]:hover {
	background:#1F4F70;
	color:#fff;
}
#page .tml label{
	display:block;
	width:100%;
}
#page .tml label[for="rememberme"]{
	display:inline-block;
	width:auto;
}
#page .register input,#page .contact input,#page .contact textarea{
	margin-top:0.5em;
}
#single-product .thumbnail{
	margin-bottom:20px;
}
#single-product .thumbnail img{
	max-width:300px;
	margin:0 auto;
	display:block;
}
#single-product .content{
	margin:30px 0;
}
#single-product .content h2{
	font-size:22px;
	font-weight:600;
}
#single-product .review{
	margin:40px 0;
}
#single-product .review h2{
	font-size:22px;
	font-weight:600;
	margin-bottom:30px;
}
#single-product .review h2 img{
	margin-right:5px;
}
#single-product .review h4{
	font-size:18px;
}
#single-product .glsr-reviews{
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
#single-product .glsr-reviews a{
	text-decoration:none;
	display:block;
}
#single-product .glsr-reviews a:hover{
	opacity:0.7;
}
#single-product .glsr-reviews a .more{
	font-size: 14px;
	margin: 10px 0;
	text-align: right;
	text-decoration: underline;
	color: #4a759a;
}
#single-product .glsr-reviews .glsr-review{
	flex: 1 1 100%;
	padding:10px;
	border-radius:8px;
	border:solid 1px rgba(0,0,0,0.1);		
}
/* スマホでは画面下いっぱいのバーにする。
   右下の丸ボタンだと reCAPTCHA のバッジと重なるため。 */
#single-product button#post-review{
	background:#1F4F70;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	border-radius:0;
	border:none;
	padding:16px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	z-index:1030;
	box-shadow:0 -2px 12px rgba(0,0,0,0.12);
}
#single-product button#post-review svg{
	width:24px;
	height:24px;
	flex-shrink:0;
}
#single-product button#post-review span{
	font-size:15px;
	font-weight:700;
	color:#fff;
}
/* 固定バーの下にコンテンツが隠れないようにする */
#single-product{
	padding-bottom:72px;
}
/* reCAPTCHA のバッジを投稿バーの上へ逃がす */
.grecaptcha-badge{
	bottom:68px !important;
}
#single-product .modal .glsr-login-register{
	text-align:center;
}
#single-product .modal .wp-block-button{
	display:flex
}
#single-product .modal button[type="submit"]{
	display:block;
	width:auto;
	border:solid 2px #1F4F70;
	margin:0 auto;
	text-align:center;
	background:#1F4F70;
	padding: 10px 30px;
	border-radius: 30px;
	color:#fff;
}
#single-product .modal button[type="submit"]:hover{
	background:transparent;
	color:#1F4F70;
}
#single-product .modal input,#single-product .modal textarea{
	padding:10px;
	font-size:14px;
}
#single-product .modal input::placeholder,#single-product .modal textarea::placeholder {
  color: #999; /* お好きな色に変更 */
}
#single-product .modal label{
	display:block;
	font-weight:bold;
	font-size:14px;
	margin-bottom:5px;
}
#single-product .modal .star-rating {
	direction: rtl;
	display: inline-flex;
}
#single-product .modal .star-rating input[type="radio"] {
	display: none;
}
#single-product .modal .star-rating label {
	color: #ccc;
	cursor: pointer;
	transition: color 0.2s;
	font-size:36px;
	line-height:1;
}
#single-product .modal .star-rating input:checked ~ label,
#single-product .modal .star-rating label:hover,
#single-product .modal .star-rating label:hover ~ label {
	color: #f5b301; /* 星が黄色に */
}
#single-product .glsr-default .glsr-review-avatar img{
	border-radius:50%;
}
#single-product .modal .media{
	background-color:rgba(0,0,0,0.1);
	padding:0 0 20px;
	text-align:center;
	border-radius:5px;
	margin:20px 0;
}
#single-product .modal .media button{
	font-weight:normal;
	display:block;
	background:transparent;
	width:100%;
	border:none;
	padding-top:20px;
	color:#002B49;
}
#single-product .modal .media #preview-area{
	display: flex; 
	flex-wrap: wrap; 
	gap: 10px;
}
.single-product .wp-block-button{
	display:flex;
	justify-content:center;
}
#all-reviews{
	margin-top:40px;
}
#all-reviews .reviews{
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content:center;
}
#all-reviews .reviews .site-review-item{
	flex: 1 1 100%;
	border-radius: 4px;
	border: solid 1px rgba(0,0,0,0.1);
}
#all-reviews .reviews .site-review-item a{
	padding: 10px 10px 30px;
	text-decoration:none;
	color:#002B49;
	height:100%;
	position:relative;
}
#all-reviews .reviews .site-review-item span.brand{
	color:#4b769a;
	display:block;
	font-size:12px;
}
#all-reviews .reviews .site-review-item span.product{
	color:#4b769a;
	display:block;
	font-weight:bold;
}
#all-reviews .reviews .site-review-item h2{
	font-size:18px;
}
#all-reviews .reviews .site-review-item .content{
	font-size:14px;
}
#all-reviews .reviews .site-review-item .average-score .score{
	font-size:18px;
}
#all-reviews .reviews .site-review-item .more{
	font-size:14px;
	margin:10px 0;
	text-align:right;
	text-decoration:underline;
	color:#4a759a;
}
#all-reviews .reviews .site-review-item ul.images{
	display:flex;
	flex-wrap:wrap;
	margin-bottom:10px;
}
#all-reviews .reviews .site-review-item ul.images li{
	width:100px;
	height:100px;
	background-size:cover;
	margin-right:5px;
	margin-bottom:5px;
	border-radius:3px;
}
#all-reviews .reviews .site-review-item  .author{
	font-size:12px;
	position:absolute;
	left:10px;
	bottom:10px;
	right:10px;
}
#all-reviews .reviews .site-review-item  .author img{
	width:30px;
	height:30px;
	border-radius:50%;
}
#all-reviews .reviews .site-review-item  .author .name{
	opacity:0.8;
}
#all-reviews .reviews .site-review-item  .author .likes{
	color:#ff69b4;
	margin-right:10px;
}
#all-reviews .reviews .site-review-item  .author .date{
	opacity:0.5;
}
#review h1{
	margin-bottom:20px;
}
#review .date{
	font-size:14px;
	opacity:0.6;
	text-align:right;
}
#review .rating{
	font-weight:700;
}
#review .product h2{
	margin-top:40px;
	font-size:24px;
}
#review .product .detail{
	margin:20px 0;
}
#review .product .detail img{
	margin-right:20px;
}
#review .product .detail span.category{
	font-size: 12px;
	padding: 3px 6px;
	border: solid 1px #1f4f70;
	border-radius: 3px;
	line-height: 1;
	margin-right: 5px;
	margin-bottom: 5px;
	color: #002c48;
	display: inline-block;
}
#review .product .detail span.brand{
	display:block;
	color: #4B7699;
}
#review .product .detail span.product{
	display:block;
	font-weight: 700;
	color: #002B49;
}
#review .product .detail .average-score .score,#review .product .detail .average-score .star{
	font-size:18px;
}
#review .gallery {
	max-width: 800px;
	margin: 0 auto;
}
#review .main-image #mainImage {
	position: relative;
}
#review .main-image #mainImage video{
	width:100%;
	height:auto;
}
#review .thumbnails {
	display: flex;
	justify-content: center;
	margin-top: 10px;
	gap: 10px;
	flex-wrap: wrap;
}
#review .thumbnail {
	width: 80px;
	height: 80px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border 0.3s;
}
#review .thumbnail.active {
	border: 2px solid #333;
}
#review .thumbnail.video{
	position:relative;
}
#review .thumbnail.video:before{
	content:"";
	display:block;
	width: 50px;
	height: 50px;
	background-image:url(/wp-content/uploads/2025/09/play-button-3-2.png);
	background-size:cover;
	background-repeat:no-repeat;
	position:absolute;
	top:15px;
	left:15px;
	opacity:0.8;
}
#review .author a{
	background:rgba(0,44,73,0.05);
	border-radius:4px;
	padding:10px;
	text-decoration:none;
}
#review .author a img{
	width:30px;
	height:30px;
	border-radius:50%;
	margin-right:10px;
}
#review .author .info .name{
	margin-right:20px;
	font-size:14px;
}
#review .author .info .count{
	font-size:12px;
	opacity:0.8;
}
#review #like-button{
	text-align:center;
	margin:20px 0 10px;
}
.sr-like-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: transparent;
	border: solid 2px #ff69b4;
	font-size: 14px;
	font-weight: bold;
	color: #ff69b4;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 30px;
	transition: transform 0.2s ease;
}

.sr-like-button:hover:not(:disabled) {
	transform: scale(1.05);
}

.sr-like-button:disabled {
	opacity: 0.7;
	cursor: default;
}
.like-animate {
  animation: pop 0.3s ease;
}

@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.heart-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	color: #ff69b4;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-size: 14px;
	transition: background-color 0.4s ease, transform 0.3s ease;
}

.heart-icon.liked {
	background-color: #ff69b4;
	color: #fff;
	animation: popHeart 0.5s ease;
}

@keyframes popHeart {
	0% { transform: scale(1); }
	40% { transform: scale(1.4); }
	60% { transform: scale(0.9); }
	100% { transform: scale(1); }
}

#articles{
	margin-top:50px;
}
#articles li{
	margin-bottom:30px;
}
#articles li:last-child{
	margin-bottom:0;
}
#articles li a{
	text-decoration:none;
	color:#002c48;
}
#articles li img{
	border-radius:8px;
	margin-right:20px;
	flex:0 0 auto;
	width:120px;
	height:67.5px;
	object-fit:cover;
	background:rgba(0,43,73,0.05);
}
@media only screen and (min-width: 768px){
	#articles li img{
		width:160px;
		height:90px;
	}
}
#articles li span.date{
	display:block;
	margin-bottom:5px;
	font-size:14px;
	opacity:0.7;
}
#articles li h2{
	margin-bottom:0;
	font-size:16px;
}
#articles li .more{
	margin-top:10px;
	font-size:12px;
	opacity:0.6;
}
#article p.date{
	font-size: 14px;
	opacity: 0.6;
}
#article .thumbnail img{
	display:block;
	margin:0 auto;
	max-width:600px;
	height:auto;
}
#search{
	margin-top:40px;
}
#search .nav-tabs{
	border-bottom:solid 1px rgba(0,43,73,0.4);
}
#search .nav-tabs li{
	flex:1 1 50%;
	text-align:center;
}
#search .nav-tabs .nav-link{
	border:none;
	opacity:0.6;
}
#search .nav-tabs a.nav-link{
	padding:10px;
	color:rgb(0, 43, 73);
}
#search .nav-tabs .nav-link.active{
	border-bottom:solid 3px rgba(0,43,73,1);
	opacity:1;
}
#search #product-list {
	margin-top: 20px;
}
#search #all-reviews{
	margin-top:0;
}
#search .reviews{
	margin-top:45px;
}
#author .avatar img{
	width:150px;
	height:150px;
	border-radius:50%;
}
#author button#follow-btn{
	display:block;
	width:auto;
	border:solid 2px #1F4F70;
	margin:0 auto;
	text-align:center;
	background:#1F4F70;
	padding: 10px 30px;
	border-radius: 30px;
	color:#fff;
}
#author button#follow-btn:hover{
	background:transparent;
	color:#1F4F70;
}
#mypage{
	margin-top:40px;
}
#mypage .avatar img{
	width:150px;
	height:150px;
	border-radius:50%;
	display:block;
	margin:0 auto 5px;
}
#mypage form li{
	display:flex;
	flex-direction:column;
	margin-bottom:20px;
}
#mypage form label{
	font-weight:700;
	padding:5px 10px;
	background:rgba(0,44,73,0.03);
	margin-bottom:10px;
	white-space:nowrap;
}
#mypage form input{
	border:solid 1px rgba(0,44,73,0.2);
	padding:10px;
	border-radius:3px;
}
#mypage form input[disabled] {
	background-color:rgba(0,44,73,0.1);
	color: #333;
	border: 1px solid #ccc;
	cursor: not-allowed;
	opacity:0.7;
}
#mypage form input[type="submit"]{
	background:#1F4F70;
	color:#fff;
	padding:10px;
	border:none;
	opacity:1;
	-webkit-transition: all .2s; /* Safari */
    transition: all .2s;
	border-radius:3px;
	width:60%;
	margin:10px auto 0;
}
#mypage form button{
	display:block;
	background:#1F4F70;
	color:#fff;
	padding:10px;
	border:none;
	opacity:1;
	-webkit-transition: all .2s; /* Safari */
    transition: all .2s;
	border-radius:3px;
	width:60%;
	margin:30px auto 0;
}
#mypage form button:hover{
	opacity:0.7;
}
#mypage form small{
	color:#e74c3c;
	font-size:12px;
	margin-top:5px;
}
#mypage .modal li{
	margin-bottom:30px;
}
#mypage .modal li:last-child{
	margin-bottom:0;
}
#mypage .modal li img{
	border-radius:50%;
}
#mypage .modal li small{
	font-size:70%;
}
#mypage .modal li img.icon{
	border-radius:0;
	opacity:0.6;
	margin-right:5px;
}
#mypage .modal li .follow-btn{
	white-space:nowrap;
	font-size:13px;
	border-radius:100px;
	width:auto;
	margin:0;
	padding:10px 20px;
	line-height:1;
}
@media only screen and (min-width: 768px){
	#mypage #displayname-form{
		margin-left:50px;
	}
	#single-product .glsr-reviews .glsr-review,#all-reviews .reviews .site-review-item{
		flex: 0 0 calc(50% - 10px);
	}
	/* PC・タブレットでは通常のボタンに戻す（固定バーにしない） */
	#single-product button#post-review{
		width:auto;
		height:auto;
		border:solid 2px #1F4F70;
		padding:10px 30px;
		border-radius:30px;
		background:#1F4F70;
		color:#fff;
		position:relative;
		bottom:auto;
		left:auto;
		right:auto;
		display:inline-flex;
		z-index:auto;
		box-shadow:none;
	}
	#single-product button#post-review svg{
		width:35px;
		height:35px;
	}
	#single-product{
		padding-bottom:0;
	}
	.grecaptcha-badge{
		bottom:14px !important;
	}
	#single-product button#post-review:hover{
		background:#fff;
		color:#1F4F70
	}
	#single-product button#post-review span{
		display:inline-block;
		font-size:16px;
	}
	#single-product button#post-review:hover span{
		color:#1F4F70
	}
	#single-product button#post-review:hover svg path{
		fill:#1F4F70
	}
	#page form button{
		width:40%;
	}
}
@media only screen and (min-width: 992px){
	#home section{
		padding-top:100px;
	}
	#home ul.slider{
		justify-content:center;
	}
	#home ul.slider li{
		margin:0 10px;
	}
	#page h2{
		font-size:24px;
	}
	#mypage #displayname-form{
		margin-left:100px;
	}
	#mypage form li{
		flex-direction:row;
		align-items:start;
	}
	#mypage form label{
		flex:0 0 30%;
		background:none;
	}
}
@media only screen and (min-width: 1200px){
	#single-product .glsr-reviews .glsr-review,#all-reviews .reviews .site-review-item{
		flex: 0 0 calc(33.333% - 13.333px);
	}
	#home .review ul{
		justify-content:center;
		overflow:visible;
	}
	#home .review ul li{
		margin:0 10px;
	}
	#home .ranking ul{
		justify-content:center;
		overflow:visible;
		flex-wrap:wrap;
	}
	#home .ranking ul li{
		margin:0 10px 30px;
	}
}

/* ===== 記事ページ ここから =====
   装飾を減らし、余白と文字サイズで階層を表現する方針。
   アクセント色（テラコッタ）は意味のある箇所にだけ使う：
   ・本文中のリンク＝押せる場所
   ・ランキング上位3件＝順位
   装飾目的では使わないこと。
   ================================================ */
:root{
	--hd-navy:#002B49;
	--hd-primary:#1F4F70;
	--hd-accent:#4B7699;
	--hd-terracotta:#C4694E;
	--hd-terracotta-text:#A85535;
	--hd-text:#333B42;
	--hd-muted:#5F6C75;
	--hd-line:#E5EDF3;
	--hd-tint:#F5F8FA;
	--hd-warm-tint:#FBF4F1;
}

/* ===== 記事ページ タイトル ===== */
.article-h1{
	font-size:26px;
	font-weight:700;
	line-height:1.55;
	color:var(--hd-navy);
	margin:0 0 12px;
	letter-spacing:.01em;
	overflow-wrap:break-word;
	word-break:break-word;
}
.article-meta{
	font-size:13px;
	color:var(--hd-muted);
	margin:0 0 28px;
}
/* 記事カテゴリーへのリンク（日付の横） */
.article-meta .article-category{
	display:inline-block;
	margin-left:10px;
	padding:2px 10px;
	border:1px solid var(--hd-line);
	border-radius:3px;
	color:var(--hd-primary);
	text-decoration:none;
	font-size:12px;
}
.article-meta .article-category:hover{
	background:var(--hd-tint);
}

/* ===== 記事ページ 2カラムレイアウト ===== */
.article-page-wrap{
	display:grid;
	grid-template-columns:minmax(0,1fr) 300px;
	gap:48px;
	align-items:start;
	padding-top:24px;
	padding-bottom:80px;
	max-width:1160px;
	margin-left:auto;
	margin-right:auto;
}
.article-page-main{
	min-width:0;
}
.article-page-sidebar{
	position:sticky;
	top:24px;
}

/* アイキャッチは本文幅いっぱい */
.article-page-main .thumbnail{
	margin:0 0 36px;
}
.article-page-main .thumbnail img{
	display:block;
	width:100%;
	max-width:100%;
	height:auto;
	margin:0;
}

/* ===== 目次（初期状態は閉じた状態。タップで開く） ===== */
.article-toc{
	border:1px solid var(--hd-line);
	margin:0 0 44px;
}
.article-toc-title{
	font-size:14px;
	font-weight:700;
	color:var(--hd-navy);
	letter-spacing:.04em;
	line-height:1.4;
	padding:16px 20px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:space-between;
	list-style:none;
	user-select:none;
}
.article-toc-title::-webkit-details-marker{display:none;}
.article-toc-title::after{
	content:"";
	width:8px;
	height:8px;
	border-right:2px solid var(--hd-accent);
	border-bottom:2px solid var(--hd-accent);
	transform:rotate(45deg) translateY(-2px);
	transition:transform .2s;
}
.article-toc[open] .article-toc-title::after{
	transform:rotate(-135deg) translateY(-2px);
}
.article-toc[open] .article-toc-title{
	border-bottom:1px solid var(--hd-line);
}
.article-toc ol{
	list-style:none;
	margin:0;
	padding:16px 20px;
}
.article-toc li{
	margin:0 0 8px;
	line-height:1.7;
}
.article-toc li:last-child{margin-bottom:0;}
.article-toc a{
	color:var(--hd-text);
	text-decoration:none;
	font-size:14px;
}
.article-toc a:hover{text-decoration:underline;}
.article-toc .lv3{
	padding-left:18px;
	font-size:13px;
}
.article-toc .lv3 a{color:var(--hd-muted);}
/* いま読んでいる位置は太字のみで示す（色は使わない） */
.article-toc li.current a{
	font-weight:700;
	color:var(--hd-text);
}

/* ===== 記事本文スタイル ===== */
#article{
	color:var(--hd-text);
	line-height:1.9;
	font-size:16px;
}
#article h2{
	font-size:22px;
	font-weight:700;
	color:var(--hd-navy);
	margin:56px 0 20px;
	padding:0 0 12px;
	border-bottom:1px solid var(--hd-line);
	line-height:1.5;
}
/* h3 は文字幅ぶんの下線。左バーにすると補足ボックスの縦線と並んで見えるため */
#article h3{
	font-size:19px;
	font-weight:700;
	color:var(--hd-navy);
	margin:44px 0 16px;
	line-height:1.6;
	display:inline-block;
	padding-bottom:6px;
	border-bottom:2px solid var(--hd-accent);
}
#article h4{
	font-size:16px;
	font-weight:700;
	color:var(--hd-navy);
	margin:26px 0 10px;
}
#article p{
	margin:0 0 1.6em;
	color:var(--hd-text);
}
#article strong{
	color:var(--hd-navy);
	font-weight:700;
}
/* ハイライト（マーカー）。太字とは役割を分ける。
   太字＝語を立てる、ハイライト＝その段落で一番読ませたい一文。
   下線状のグラデーションにしているのは、背景を塗りつぶすと
   本文の可読性が落ち、リンク（テラコッタ）とも紛れるため。 */
#article mark{
	background:linear-gradient(transparent 62%, rgba(196,105,78,.30) 62%);
	color:inherit;
	font-weight:inherit;
	padding:0 .08em;
}
/* 本文中のリンク＝押せる場所。本文の黒と明確に区別する */
#article a{
	color:var(--hd-terracotta-text);
	text-decoration:underline;
	text-underline-offset:.2em;
	text-decoration-thickness:1px;
}
#article a:hover{text-decoration-thickness:2px;}

#article ul,
#article ol{
	margin:0 0 1.6em;
	padding-left:1.4em;
}
#article ul li,
#article ol li{
	margin-bottom:.5em;
	padding:0;
	background:none;
	border:none;
	color:var(--hd-text);
}
#article ul{
	list-style:none;
	padding-left:1.2em;
}
#article ul li{position:relative;}
#article ul li::before{
	content:"";
	position:absolute;
	left:-1.2em;
	top:.75em;
	width:5px;
	height:5px;
	border-radius:50%;
	background:var(--hd-accent);
}
#article ol{
	list-style:decimal;
	counter-reset:none;
}
#article ol li::before{content:none;}
#article ol li::marker{
	color:var(--hd-accent);
	font-weight:700;
}

#article blockquote{
	margin:0 0 1.6em;
	padding:16px 20px;
	background:var(--hd-tint);
	border-left:3px solid var(--hd-accent);
	font-size:15px;
}
#article blockquote p:last-child{margin-bottom:0;}

#article img{
	max-width:100%;
	height:auto;
}
#article figure{margin:0 0 1.6em;}
#article figcaption{
	font-size:13px;
	color:var(--hd-muted);
	text-align:center;
	margin-top:8px;
}

/* 横に長い表はスクロールさせる（ラップは single.php 側で自動付与） */
.article-table-wrap{
	overflow-x:auto;
	margin:0 0 1.6em;
}
#article table{
	border-collapse:collapse;
	width:100%;
	font-size:14px;
	margin:0 0 1.6em;
}
.article-table-wrap table{
	margin:0;
	min-width:420px;
}
#article th,
#article td{
	border:1px solid var(--hd-line);
	padding:10px 14px;
	text-align:left;
}
#article th{
	background:var(--hd-tint);
	color:var(--hd-navy);
	font-weight:700;
}

/* ===== 補足ボックス（記事本文で使う。インラインスタイルは書かないこと） =====
   使い方：
   <div class="note"><p class="note-title">見出し</p><p>本文</p></div>
   <div class="warn"><p class="warn-title">見出し</p><p>本文</p></div>
   ================================================ */
.note,
.warn{
	margin:0 0 1.6em;
	padding:18px 22px;
	font-size:15px;
}
.note{
	background:var(--hd-tint);
	border-left:3px solid var(--hd-accent);
}
.warn{
	background:var(--hd-warm-tint);
	border-left:3px solid var(--hd-terracotta);
}
.note-title,
.warn-title{
	font-weight:700;
	font-size:14px;
	margin:0 0 8px;
	letter-spacing:.02em;
}
.note-title{color:var(--hd-navy);}
.warn-title{color:var(--hd-terracotta-text);}
.note p:last-child,
.warn p:last-child,
.note ul:last-child,
.warn ul:last-child,
.note ol:last-child,
.warn ol:last-child{margin-bottom:0;}

/* ===== 前後記事 ===== */
.article-post-links{
	display:flex;
	justify-content:space-between;
	gap:20px;
	border-top:1px solid var(--hd-line);
	margin-top:56px;
	padding-top:24px;
	font-size:14px;
}
.article-post-links a{
	color:var(--hd-terracotta-text);
	text-decoration:none;
}
.article-post-links a:hover{text-decoration:underline;}

/* ===== サイドバー ランキング ===== */
.sidebar-ranking{
	background:#fff;
	border-radius:0;
	box-shadow:none;
	margin-bottom:32px;
}
.sidebar-ranking-title{
	background:none;
	color:var(--hd-navy);
	font-size:13px;
	font-weight:700;
	padding:0 0 10px;
	letter-spacing:.06em;
	border-bottom:1px solid var(--hd-line);
}
.sidebar-ranking-list{
	padding:0;
}
.sidebar-ranking-item{
	display:flex;
	gap:12px;
	align-items:center;
	padding:14px 0;
	border-bottom:1px solid var(--hd-line);
	text-decoration:none;
	color:var(--hd-text);
}
.sidebar-ranking-item:last-child{
	border-bottom:1px solid var(--hd-line);
}
.sidebar-ranking-item:hover .sidebar-rank-title{
	color:var(--hd-primary);
}
/* 上位3件だけアクセント色。4位以下と差がつくことに意味がある */
.sidebar-rank-num{
	font-size:14px;
	font-weight:700;
	color:#A9B4BC;
	min-width:20px;
	text-align:center;
	line-height:1;
	flex-shrink:0;
}
.sidebar-rank-num.top1,
.sidebar-rank-num.top2,
.sidebar-rank-num.top3{
	color:var(--hd-terracotta-text);
}
.sidebar-rank-thumb{
	width:56px;
	height:56px;
	border-radius:0;
	overflow:hidden;
	flex-shrink:0;
	background:var(--hd-tint);
	border:1px solid var(--hd-line);
}
.sidebar-rank-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.sidebar-rank-info{
	flex:1;
	min-width:0;
}
.sidebar-rank-title{
	font-size:13px;
	font-weight:400;
	color:var(--hd-text);
	line-height:1.6;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

/* ===== 記事中CTA（サイト内へ送る導線） =====
   使い方：
   <div class="article-cta">
       <p class="article-cta-title">見出し</p>
       <p>ひとこと説明</p>
       <p class="article-cta-action"><a href="/product/">ボタンの文言</a></p>
   </div>

   記事の6〜7割地点に1つだけ置く。増やすと効かなくなる。
   本文中のリンク（テラコッタ＋下線）と紛れないよう、ボタンは面で塗る。
   ※ #article を付けているのは、#article p などのID指定に負けないため。
   ================================================ */
#article .article-cta{
	margin:44px 0;
	padding:28px 26px;
	background:var(--hd-tint);
	border:1px solid var(--hd-line);
	border-radius:6px;
	text-align:center;
}
#article .article-cta-title{
	font-size:18px;
	font-weight:700;
	color:var(--hd-navy);
	line-height:1.5;
	margin:0 0 10px;
}
#article .article-cta p{
	font-size:15px;
	color:var(--hd-text);
	margin:0 0 18px;
}
#article .article-cta .article-cta-action{
	margin:0;
}
#article .article-cta-action a{
	display:inline-block;
	background:var(--hd-terracotta);
	color:#fff;
	font-weight:700;
	font-size:16px;
	line-height:1.4;
	padding:14px 40px;
	border-radius:26px;
	text-decoration:none;
	transition:opacity .2s;
}
#article .article-cta-action a:hover{
	color:#fff;
	opacity:.85;
	text-decoration:none;
}

/* 記事末のCTA。記事中のものと同じ見た目を2回出すと「またか」と読み飛ばされるため、
   締めくくりとして面を反転させる。ボタンはテラコッタのまま変えない。
   <div class="article-cta article-cta--end"> のように併記して使う。 */
#article .article-cta--end{
	background:var(--hd-navy);
	border-color:var(--hd-navy);
	margin-bottom:8px;
}
#article .article-cta--end .article-cta-title{
	color:#fff;
}
#article .article-cta--end p{
	color:#D5E2EB;
}

/* ===== 記事ページ レスポンシブ ===== */
@media only screen and (max-width:991px){
	#article .article-cta{
		padding:24px 18px;
	}
	#article .article-cta-title{
		font-size:17px;
	}
	#article .article-cta-action a{
		display:block;
		padding:14px 20px;
	}
	.article-page-wrap{
		grid-template-columns:1fr;
		gap:56px;
		padding-bottom:60px;
	}
	.article-page-sidebar{
		position:static;
	}
	.article-h1{
		font-size:22px;
	}
	#article h2{
		font-size:20px;
		margin-top:44px;
	}
	#article h3{
		font-size:18px;
		margin-top:36px;
	}
}
/* ===== 記事ページ ここまで ===== */

/* ===== 投稿者の年齢区分・肌質 =====
   どちらもプロフィールで任意選択。未選択なら出力自体されない。 */
.age-group,
.skin-type{
	display:inline-block;
	margin-left:6px;
	padding:1px 7px;
	border:1px solid var(--hd-line);
	border-radius:3px;
	font-size:11px;
	font-weight:400;
	line-height:1.6;
	color:var(--hd-muted);
	vertical-align:middle;
	white-space:nowrap;
}

/* ===== 口コミ投稿フォームのメッセージ =====
   alert() は iOS で「ダイアログを表示しない」を選ばれると
   以降の案内が届かなくなるため、画面内に表示する。 */
.review-message{
	margin:0 0 14px;
	padding:12px 16px;
	border-radius:4px;
	font-size:14px;
	line-height:1.7;
	text-align:left;
}
.review-message.is-success{
	background:#eef5ee;
	border:1px solid #cfe3cf;
	color:#2f6b3a;
}
.review-message.is-error{
	background:#fdf1ee;
	border:1px solid #f0d2c9;
	color:#a8402a;
}

/* ===== 404ページ ===== */
.error-404{
	max-width:640px;
	margin:0 auto;
	padding:40px 0 60px;
	text-align:center;
}
/* 検索フォーム。ヘッダー用の指定が効かない場所なので個別に整える。
   #page form button の幅指定を上書きするため、セレクタに #page を含めている。 */
.error-404 .search-form{
	margin-bottom:36px;
}
#page .error-404 .search-form .d-flex{
	position:relative;
	max-width:420px;
	margin:0 auto;
}
#page .error-404 .search-form label{
	display:block;
	flex:1 1 auto;
	min-width:0;
	margin:0;
	width:100%;
}
#page .error-404 .search-field{
	width:100%;
	box-sizing:border-box;
	padding:10px 50px 10px 14px;
	border:1px solid var(--hd-line);
	border-radius:4px;
	font-size:15px;
}
#page .error-404 .search-submit{
	position:absolute;
	top:50%;
	right:6px;
	transform:translateY(-50%);
	width:36px;
	height:36px;
	min-width:0;
	padding:0;
	margin:0;
	border:none;
	border-radius:50%;
	background:var(--hd-accent);
	display:flex;
	align-items:center;
	justify-content:center;
}
#page .error-404 .search-submit img{
	width:18px;
	height:18px;
}
.error-404-lead{
	font-size:15px;
	color:var(--hd-text);
	margin:0 0 20px;
}
.error-404-links{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px 16px;
	margin:0;
	padding:0;
}
.error-404-links li{
	margin:0;
}
.error-404-links a{
	display:inline-block;
	padding:8px 18px;
	border:1px solid var(--hd-line);
	border-radius:3px;
	color:var(--hd-primary);
	text-decoration:none;
	font-size:14px;
}
.error-404-links a:hover{
	background:var(--hd-tint);
}