@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*スペック表*/
.spec-table {
	font-size: 0.8em;
}
.spec-table th {
	width:20%;
	padding:6px;
	border:1px solid #dcdcdc;
	background:#f5f5f5;
}
.spec-table td {
	width:30%;
	padding:6px;
	border:1px solid #dcdcdc;
}
/*テーブルキャプション*/
.spec-table caption {
    caption-side: bottom;
}
/*レーティング表示*/
.c-reviewStars {
	display: inline-block!important;
}
/*ランキング*/
#rank01 i {
	color: #FABF13;
	font-size: 1.2em;
}
#rank02 i {
	color: #AFAFB0;
	font-size: 1.2em;
}
#rank03 i {
	color: #BC7035;
	font-size: 1.2em;
}
/*もっと見るボタン*/
.toggle-container {
	position: relative;
}
.toggle-content {
	max-height: 180px; /* 最初に表示する高さ */
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.toggle-button {
	margin: 5px auto 0;
	background: none;
	border: none;
	color: var(--color_link);
	cursor: pointer;
	font-size: 1em;
	padding: 0;
	display: block;
	text-align: center;
}
.toggle-content::after {
	content: '';
	position: absolute;
	bottom: 2em;/*位置調整*/
	left: 0;
	width: 100%;
	height: 3em;
	background: linear-gradient(to bottom, transparent, #fff);
	pointer-events: none;
	transition: opacity 0.3s;
}
.toggle-container.active .toggle-content::after {
	opacity: 0;
}
.toggle-button::after {
    font-family: 'icomoon';
    content: "\e910";
    font-size: 0.9em;
	position: relative;
	top: 0px;
	left: 5px;
}
.toggle-container.active .toggle-button::after {
	font-family: 'icomoon';
	content: "\e912";
	position: relative;
	top: 0px;
	left: 5px;
}
/*ボタン*/
.simkko-btn {
	text-align: center;
}
.simkko-btn a {
	display: inline-block;
	text-align: center;
	padding: 0.7em 3em;
	border-radius: 5px;
	background: linear-gradient(0deg, #15a33e 0%, #15a33e80 100%);
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	width: 90%;
}
.simkko-btn a::after {
	content: '\e921';
	font-family: icomoon;
	font-size: 0.7em;
	position: relative;
	top: -2px;
	left: 10px;
}
/*モーダルウィンドウ*/
.modal-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}
.modal-content {
	position: relative;
	background: #fff;
	padding: 30px;
	width: 900px;
	border-radius: 8px;
}
.modal-content > * {
    margin-bottom: 2em;
	font-size: 1em;
}
.modal-in-list {
	list-style: none!important;
}
@media screen and (max-width:782px) {
	.modal-content {
		width: 90%;
	}
}
.modal-close {
	position: absolute;
	top: -10px;
	right: -10px;
	border: none;
	background: #ddd;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
.modal-close i {
	color: #333;
}
.open-modal-icon {
	color: var(--color_link);
}
.open-modal-icon:hover {
	cursor: pointer;
}
/*SWELLの目次*/
#main_content .p-toc {
	margin: 4em 0;
	width: 100%;
}
/*記事内プロフ*/
.profile-box {
	display: flex;
	padding: 0.75rem 0;
	gap: 0.75rem;
	border: 1px solid #dcdcdc;
	padding: 5px 10px;
	border-radius: 5px;
	margin-bottom: 15px;
}
.profile-img-wrap {
	flex: none;
}
.profile-img {
	position: relative;
}
.profile-img img {
	border-radius: 100px;
	width: 80px;
	border: 1px solid #dcdcdc;
}
.profile-img::before {
	content: "書いた人";
	position: absolute;
	bottom: -5px;
	left: 0;
	right: 0;
	width: fit-content;
	margin: auto;
	padding: 5px 15px;
	border-radius: 3px;
	line-height: 1;
	font-size: 11px;
	font-weight: bold;
	background-color: var(--color_htag);
	color: #fff;
}
.profile-content {
	line-height: 1.5;
	padding: 0.75rem 0;
}
.profile-text {
	font-size: 0.9em;
}
.profile-name {
	font-weight: bold;
	margin-bottom: 0.25rem;
}
.profile-position {
	font-size: 11px;
	color: gray;
	font-weight: normal;
	margin-left: 10px;
}
/*メリデメテーブル*/
.merideme_table {
	font-size: 0.8em;
	table-layout: fixed;
}
th.meritto {
	background: #FF8F6A;
	color: #fff;
}
th.demeritto {
	background: #7EA0A5;
	color: #fff;
}
/*入れ子階層*/
li.indent-item {
	margin-left: 10px;
}
/*PR表記*/
.c-prNotation[data-style=small] {
	border: none;
}
/*ランキングまとめ*/
.summary-comp {
	overflow-y: scroll;
	height: 300px;
	margin-bottom: 4em;
}
/*口コミ注釈*/
.annotation {
	font-size: 0.8em;
	opacity: 0.8;
}
.annotation::before {
	content: "※";
}
@media screen and (min-width: 783px) {
.annotation {
	text-align: right;
}
}
/*全テーブルに適用*/
.post_content table ul {
	list-style: none;
	padding: 0;
}
.wp-block-table {
	font-size: .75em;
}
/*記号*/
.maru::before {
	content: "\ea56";
	font-family: icomoon!important;
	font-size: 1.5em;
	color: #FF8F6A;
	display: block;
}
.sankaku::before {
	content: "\e93f";
	font-family: icomoon!important;
	font-size: 1.5em;
	color: #14cd0a;
	display: block;
}
.batsu::before {
	content: "\e919";
	font-family: icomoon!important;
	font-size: 1.5em;
	color: #333;
	display: block;
}
/*横スクロールコンテンツ*/
.scroll-list {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 10px 0px 0px 10px;
}
.scroll-list ol {
  display: flex;
  gap: 1em;
  list-style: none;
  counter-reset: item;
	padding: 0;
}
.scroll-list li {
	counter-increment: item;
	position: relative;
	flex: 0 0 auto;
}
.scroll-list li::before {
	content: counter(item);
	position: absolute;
	top: -10px;
	left: -10px;
	background: var(--color_icon_check);
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	border-radius: 50%;
	border: solid 2px #fff;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.scroll-list li img {
	width: 100%;
	height: auto;
	display: block;
}
.scroll-list li p {
	font-size: 0.9em;
	max-width: 290px; 
}
/*スムーススクロール*/
.review-list {
	scroll-behavior: smooth;
}
/*セクション切替トップ用*/
.section-block {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	z-index: 0;
}
.section-block.is-active {
	position: relative;
	visibility: visible;
	opacity: 1;
	z-index: 1;
}
.section-nav-wrapper {
	position: relative;
	z-index: 10;
}
.section-nav {
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 10px;
}
.section-nav.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.section-nav button {
	flex-shrink: 0;
	background: #fff;
	border: solid 1px #FF8F6A;
	border-radius: 5px;
	padding: 0.3em 1.5em;
	cursor: pointer;
}
.section-nav button.active {
	background: #FF8F6A;/*上下連動*/
	color: #fff;
	font-weight: bold;
}
.section-nav button i {
	margin-right: 5px;
}
/*セクション切替ボトム用*/
.section-nav.section-nav-bottom {
	background: #f8f4ee;
	padding: 1em;
	border-radius: 5px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	text-align: center;
	flex-wrap: wrap;
}
.section-nav-label {
	font-size: 1.1em;
	font-weight: bold;
	color: #4a7d7e;
	margin: 0 auto;
}
.card-button-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em;
	margin: 0 auto;
}
.card-button-group button {
	background: #ffffff;
	color: #4A7D7E;
	border: 2px solid #4a7d7e;
	border-radius: 5px;
	padding: 1em 0.5em;
	min-width: 100px;
	font-size: 0.9em;
	font-weight: bold;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	transition: all 0.2s ease;
}
.card-button-group button:hover {
	background: #4A7D7E;
	color: #fff;
	transform: translateY(-2px);
}
/*並び替えボタン*/
.review-sort label {
	border: solid 1px #dcdcdc;
	border-radius: 5px;
	padding: 0.7em 1.5em 0.7em 0.5em;
	background: #f5f5f5;
}
.review-sort input {
	margin-right: 5px;
}
/*満足バー*/
.satisfaction-bars-wrapper {
	margin: 0 auto;
	padding-bottom: 2em;
	margin: 0 30px;
}
.sat-bar-container {
	margin-bottom: 0.5em;
}
.sat-bar-label {
	display: flex;
	justify-content: space-between;
}
.sat-bar-label .item-name {
	flex-grow: 1;
	font-size: 0.75em;
	color: #666;
}
.sat-bar-label .score {
	width: 30px;
	text-align: right;
	font-size: 0.75em;
	color: #666;
}
.sat-bar {
	display: flex;
	gap: 5px;
	height: 10px;/*バーの高さ*/
}
.sat-bar-block {
	flex-grow: 1;
	background: #dcdcdc;
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}
.sat-bar-block.filled {
	background: rgba(248, 198, 120);/*バーの色*/
}
.sat-bar-block.half::after {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 50%;
	height: 100%;
	background: rgba(248, 198, 120);/*バーの色*/
	border-radius: 2px;
}
/*スクロールヒント*/
.review-scroll-wrapper {
	position: relative;
	overflow-x: auto;
}
.scroll-hint-message {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(51, 51, 51, 0.8);
	color: #fff;
	height: 100px;
	padding: 0.4em 0.8em;
	border-radius: 5px;
	font-size: 0.85em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	z-index: 10;
	pointer-events: none;
	transition: opacity 0.3s ease;
	opacity: 0;
}
.scroll-hint-message.visible {
	opacity: 1;
	animation: nudgeRight 1.5s ease-in-out infinite;
}
@keyframes nudgeRight {
  0%, 100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-40%, -50%);
  }
}
/*口コミコンテンツ*/
.review-list {
	list-style: none;
	padding-left: 0 !important;
	display: flex;
	gap: 0.5em;
	scroll-snap-type: x mandatory;
	font-size: 0.95em;
	margin-bottom: 0.5em;
	overflow-x: auto;
	scroll-padding-left: 1em;
}
.review-item {
	border: 1px solid #dcdcdc;
	padding: 1em;
	flex: 0 0 auto;
	width: 300px;
	scroll-snap-align: start;
	border-radius: 5px;
}
.review-box { 
	display: flex;
	flex-direction: column;
}
.review-top {
	display: flex;
	padding-bottom: 0.5em;
	align-items: center;
}
.review-img-block {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.review-img { width: 55px;
	height: auto;
	object-fit: cover;
	border-radius: 50%;
	margin-right: 1em;
}
.review-age {
	margin: 0.5em 1.3em 0 0;
	font-size: 0.8rem;
}
.review-meta {
	flex: 1;
	display: flex;
	flex-direction: column-reverse;
}
.review-area {
	padding-bottom: 0.5em;
}
.review-model {
	padding-bottom: 0;
}
.review-star {
	margin-bottom: 1em;
}
/*レーダーチャート*/
.chart-wrap {
	width: 350px;
	margin: 0 auto;
}
/*2*2コンテンツ*/
.merit-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  list-style: none;
  padding: 0;
}
.merit-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/*アコーディオン調整*/
.info-block {
	margin-top: 4em;
}
.info-block .swell-block-accordion__title {
	font-size: 1.4em;
	font-weight: 700;
	padding: .75em 1em;
	line-height: 1.4;
	position: relative;
	z-index: 1;
}
.info-block .swell-block-accordion__title::after {
	position: absolute;
	display: block;
	pointer-events: none;
	content: "";
	top: -4px;
	left: 0;
	width: 100%;
	height: calc(100% + 4px);
	box-sizing: content-box;
	border-top: solid 2px var(--color_htag);
	border-bottom: solid 2px var(--color_htag);
}
.info-block .swell-block-accordion__body {
	padding-top: 2em;
}