/**
* Theme Name: AIAI
* Template:   gensen_tcd050
* Theme URI: https://aiai-portal.com/
* Author: B'Me LLC
* Author URI: https://bme-official.com/
* Version: 2.1.7
* Requires at least: 6.0
* Requires PHP: 7.4
*/

/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/

@keyframes slide-in {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0%);
	}
}

@keyframes slide-out {
	from {
		transform: translateX(0%);
	}

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

@keyframes fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


@keyframes fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

#header_logo img,
#header_logo_fix img {
	max-height: 50px;
}

#breadcrumb li.home a:hover:before {
	color:#1477d6;
}

#breadcrumb li.last {
	color:#1477d6;
}

#breadcrumb li a:hover {
	color:#1477d6;
}

#main_col {
	gap: 0!important;
}

#menu_col {
	position: fixed;
	width: 240px;
	height: 90%;
	padding-bottom: 10%;
	align-content: center;
}

#main_col .inner {
	padding: 0;
}

#index_header_search .inner {
	max-width: min(90%, 1200px);
}

#menu_col li {
	position: relative;
	margin: auto 20px;
}

#menu_col li a {
	padding: 10px;
}

#menu_col li a:hover {
	color: unset;
	background: #f7fbff;
}

#menu_col li a:hover:after {
	content: '>';
	position: absolute;
	align-content: center;
	width: 20px;
	height: 20px;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

#left_col {
	width: 100%;
}

#side_col {
	display: none;
}

#side_col #nav_menu-2 ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
}

#side_col .menu-item-object-purpose a {
	padding: 10px 5px;
}

#side_col .menu-item-object-purpose a:hover {
	background: #070f3b;
	color: #fff;
}

#side_col .menu-item-object-purpose:first-child,
#side_col .menu-item-object-purpose:nth-child(2) {
	border-top: solid 1px #ddd;
}

#side_col .menu-item-object-purpose:nth-child(2n-1) {
	border-left: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
}

#side_col .menu-item-object-purpose:nth-child(2n) {
	border-left: solid 1px #ddd;
	border-right: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
}

#footer_logo img {
	max-width: 150px;
	height: auto;
}

#footer #footer_contents a:hover {
	color: #aaa;
}

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

	#header {
		position: fixed!important;
		width: 240px;
		z-index: 1;
	}

	.has_header_content #header_top {
		border-bottom: none;
	}

	#header_top .inner {
		min-height: 68px;
		max-width: 100%;
	}

	#global_menu {
		display: none!important;
	}

	#main_contents {
		width: calc(100% - 240px);
		margin-left: 240px;
	}

	#footer {
		width: calc(100% - 240px);
		margin-left: 240px;
	}
}

@media only screen and (max-width:767px) {

	#header_top .inner {
		padding: 0;
	}

	html:has(.overflow__hidden) {
		overflow: hidden;
	}

	#global_menu,
	.mobile_fix_top.header_fix #global_menu {
		background-color: transparent!important;
		z-index: 1!important;
	}

	#global_menu.active,
	.mobile_fix_top.header_fix #global_menu.active {
		display: block;
	}

	#global_menu:before,
	.mobile_fix_top.header_fix #global_menu:before {
		content: '';
		position: fixed;
		width: 100%;
		height: 100svh;
		top: 0;
		left: 0;
		background: #fffc;
		backdrop-filter: blur(10px);
		z-index: 0;
	}

	#global_menu.active:before,
	.mobile_fix_top.header_fix #global_menu.active:before {
		animation: fade-in 0.5s forwards ease-out;
	}

	#global_menu.close:before,
	.mobile_fix_top.header_fix #global_menu.close:before {
		animation: fade-out 0.5s forwards ease-out;
	}

	#global_menu .menu,
	.mobile_fix_top.header_fix #global_menu .menu {
		margin-top: 30px;
	}

	#global_menu.active .menu li,
	.mobile_fix_top.header_fix #global_menu.active .menu li {
		animation: slide-in 0.5s forwards ease-in;
	}

	#global_menu.close .menu li,
	.mobile_fix_top.header_fix #global_menu.close .menu li {
		transform: translatex(-100%);
		animation: slide-out 0.5s forwards ease-out;
	}

	#global_menu a:hover,
	#global_menu .current-menu-item > a,
	.mobile_fix_top.header_fix #global_menu a:hover,
	.mobile_fix_top.header_fix #global_menu .current-menu-item > a {
		background: #f7fbff!important;
	}

	#global_menu li a:hover:after,
	.mobile_fix_top.header_fix #global_menu li a:hover:after {
		content: '>';
		position: absolute;
		width: 30px;
		height: 30px;
		top: 50%;
		right: 0;
		align-content: center;
		transform: translateY(-50%);
	}

	#global_menu .menu li a,
	.mobile_fix_top.header_fix #global_menu .menu li a {
		color: unset!important;
		padding: 10px 20px;
	}

	#menu_col {
		display: none;
	}

}

/*--------------------------------------------------------------
# Front Page
--------------------------------------------------------------*/

.slider_video_wrapper { height: 100%; }

#header_slider.slider_video .caption > :nth-child(1) {
	-webkit-animation: sliderCaptionAnimation 1s ease forwards 0.5s;
	animation: sliderCaptionAnimation 1s ease forwards 0.5s;
}

#header_slider.slider_video .caption > :nth-child(2) {
	-webkit-animation: sliderCaptionAnimation 1s ease forwards 0.8s;
	animation: sliderCaptionAnimation 1s ease forwards 0.8s;
	text-align: center!important;
}

.has_header_content #index_header_search {
	background: transparent!important;
	opacity: 0;
	animation: sliderCaptionAnimation 1s ease forwards 1s;
}

/*#index_header_search form {
filter: drop-shadow(2px 2px 3px #3333);
}*/

.header_search_inputs input#header_search_keywords,
.chosen-container-single a.chosen-single {
	border-radius: 25px;
	border: solid 1px #ddd;
}

.header_search_inputs input#header_search_keywords {
	background: #fff;
	box-shadow: inset 0 0.5px 5px #0003;
}

.header_search_keywords ul.search_keywords_operator {
	width: 50px;
	height: 50px;
	border-radius: 0 25px 25px 0;
	box-shadow: inset 0 0.5px 5px #0003;
}

.header_search_keywords ul.search_keywords_operator li {
	padding-right: 10px;
	background: #ffffff80;
}

.header_search_keywords ul.search_keywords_operator li.active {
	background: #657f9c80;
}

.chosen-container.chosen-container-single .chosen-drop {
	background: #fff;
}

.chosen-container.chosen-container-single .chosen-drop .chosen-results:nth-child(2) {
	border-top: solid 1px #ddd;
}

.chosen-container.chosen-container-single .chosen-drop .chosen-results li[data-option-array-index="0"] {
	display: none;
}

.chosen-container.chosen-container-single .chosen-drop .chosen-results li:hover {
	box-shadow: 0 0 0 3px rgba(20,119,214,.15) inset;
	background: #f1f8ff;
}

.chosen-container.chosen-container-single .chosen-drop .chosen-results li.result-selected {
	background: linear-gradient(180deg, #e6f0fb, #d9e9fb);
	color: #0b2957;
}

.header_search_inputs select:focus {
	color:#000;
}

.header_search_inputs #header_search_submit {
	color: #0b2957;
	border: solid 1px #ddd;
	background: #fff;
	transition: 0.25s ease;
}

.header_search_inputs #header_search_submit:hover {
	box-shadow: 0 0 0 3px rgba(20,119,214,.15) inset;
	background: linear-gradient(180deg, #e6f0fb, #d9e9fb);
	transition: 0.5s ease;
}

.main_view {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	align-content: center;
	background: radial-gradient(#fffa 0%, #fff 75%);
}

#header_slider .main_view .caption {
	position: relative;
	top: 0;
	transform: none;
}

#index_header_search form {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: 30px 10px;
}

#index_header_search form .header_search_inputs {
	display: inline-block;
	width: 24%;
	margin-right: 0;
}

#index_header_search form .header_search_inputs:first-child {
	flex: 0 0 100%;
}

#index_header_search form .header_search_inputs:not(:first-child) {
	flex: 1;
	min-width: 150px;
}

#index_header_search form .header_search_button {
	flex: 0 0 auto;
}

#introduce_list ul.meta li.cat {
	margin-bottom: 4px;
}

.home ul.meta li.cat {
	width: max-content;
}

.home ul.meta li.cat>span {
	padding: 6px 8px;
	margin: 0;
	line-height: 1;
}

.cb_content-category_list .inner ul li {
	width: calc((100% - 20px)/3);
	margin: 0 10px 10px 0;
}

.cb_content-category_list .inner ul li:nth-child(3n) {
	margin: 0 0 10px 0;
}

#main_col .cb_content-category_list .inner ul li a {
	background: #fffd;
}

#main_col .cb_content-category_list .inner ul li a:hover {
	background: #0005;
}

.cb_content-category_list ul li a:before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(https://aiai-portal.com/wp-content/uploads/2025/09/category-scaled.png) no-repeat center left;
	background-size: cover;
	filter: grayscale(0.7) contrast(0.7) brightness(1.2);
	z-index: -1;
}

.cb_content-category_list ul li.has_image .image img {
	object-fit: cover;
	padding: calc(50% - 25px);
	box-sizing: border-box;
	opacity: 0.1;
}

.cb_content-category_list ul li.has_image a:hover .image img {
	filter: invert(1);
	opacity: 0.5;
}

#main_col .cb_content-category_list ul li.has_image a:hover .info {
	color: #fff;
}

@media only screen and (min-width: 1025px) {
	.has_header_content #index_header_search {
		margin-top: 0;
		background: rgba(0, 0, 0, 0.6);
		position: relative;
		z-index: 4;
	}
}

@media only screen and (max-width: 1024px) {

	.main_view .headline {
		display: none;
	}

	.main_view .catchphrase {
		margin: 0;
	}

	#header_slider .main_view .caption {
		padding: 0 20px 30px;
	}

	.main_view #index_header_search {
		padding: 0;
	}

	.main_view #index_header_search form {
		display: flex;
		gap: 0;
		margin: auto;
	}

	#index_header_search form .header_search_inputs:not(:first-child) {
		flex: 100%;
	}

	.header_search_inputs.header_search_keywords ul.search_keywords_operator {
		width: 50px;
		height: 100%;
		border-radius: 0 20px 20px 0;
		box-shadow: inset 0 0.5px 5px #0003;
	}

	#index_header_search .header_search_inputs select {
		border-radius: 25px;
		border: solid 1px #ddd;
	}

}

@media only screen and (max-width: 767px) {

	.header_search_inputs input#header_search_keywords,
	#index_header_search .header_search_inputs select {
		font-size: 12px;
	}

	.header_search_inputs #header_search_submit {
		width: 200px;
		height: 40px;
		font-size: 12px;
	}

	.slider_video_wrapper:before {
		padding-top: initial!important;
	}

	.vegas-video {
		object-fit: contain;
	}

	.main_view #index_header_search form {
		width: 300px;
		max-width: 90%;
	}

	.home .introduce_list_col .image,
	.home .introduce_list_col.show_info .image {
		width: 30%;
		padding-top: 30%;
	}

	.home .introduce_list_col .info,
	.home .introduce_list_col.show_info .info {
		width: -webkit-calc(70% - 10px);
		width: -moz-calc(70% - 10px);
		width: calc(70% - 10px);
	}

	.home .introduce_list_col .info .meta {
		margin: 0;
	}

	.home ul.meta li.cat {
		font-size: 10px;
	}

	.home .introduce_list_col .info .title {
		font-weight: 600;
	}

	.home .introduce_list_col .info .excerpt {
		display: block;
		font-size: 11px;
	}

	.home .introduce_list_col .info .more {
		display: block;
		width: calc(70% - 10px);
		font-size: 10px;
		padding: 5px 0 0;
	}

	#introduce_list ul.meta li.cat {
		margin-bottom: 0;
	}

	.cb_content-category_list .inner ul li {
		width: calc(50% - 5px);
		float: left!important;
		margin: 0 0 10px 0;
	}

	.cb_content-category_list .inner ul li:nth-child(even) {
		float: right!important;
	}

	.cb_content-category_list .inner ul li a {
		height: auto;
		aspect-ratio: 16/9;
	}

	.cb_content-category_list .inner ul li .info h3 {
		font-weight: 600;
		font-size: 12px;
	}

	#main_col .cb_content-category_list ul li.has_image .image {
		width: 100%;
		height: 60%;
		padding: 10% 0 5%;
		box-sizing: border-box;
	}

	#main_col .cb_content-category_list ul li.has_image .image img {
		padding: 0;
		object-fit: contain;
	}

	#main_col .cb_content-category_list ul li.has_image .info {
		position: relative;
		width: 100%;
		height: 40%;
		top: 0;
		left: 0;
		padding: 0;
		text-align: center;
		align-content: center;
		transform: none;
	}

	#main_col .cb_content-category_list ul li.has_image .info h3 {
		margin: 0;
	}

	.archive #main_contents #header_image img {
		height: 30px;
	}

	#main_contents #header_image:before {
		padding-top: 40px;
	}

}

/*--------------------------------------------------------------
# AI tool Archive
--------------------------------------------------------------*/
#post_list2 .article .info {
	position: relative;
}

.archive #header_image img {
	height: 50px;
	padding-top: 10px;
	object-fit: contain;
}

.introduce_list_col .info .meta {
	display: inline-block;
	margin-bottom: 5px;
}

.introduce_list_col .info .title {
	margin: 0 0 5px 0;
}

#post_list2 .article .info .title {
	color: #1477d6;
}

#post_list2 .article .info .excerpt {
	margin: 0;
	padding: 0;
	line-height: 2;
	color: #000;
}

.introduce_list_col .info .more {
	padding: 10px 0 0 0;
}

#post_list2 .article .info .more {
	margin: 10px 0 0 0;
	padding: 10px 0 0 0;
	width: 100%;
	line-height: 1;
	text-align: right;
	border-top: 1px solid #ddd;
	bottom: 0;
	right: 0;
}

.archive ul.meta li.cat {
	width: max-content;
}

#post_list2 .article .info ul.meta li.cat {
	margin-bottom: 4px;
}

.archive ul.meta li.cat>span {
	padding: 6px 8px;
	margin: 0;
	line-height: 1;
}

@media only screen and (max-width: 767px) {

	.archive .introduce_list_col .image,
	.archive .introduce_list_col.show_info .image {
		width: 30%;
		padding-top: 30%;
	}

	#post_list2 .article a .image,
	#post_list2 .article.show_info a .image {
		width: 30%;
		padding-top: 30%;
		padding-bottom: 0;
	}

	#post_list2 .article a .image img {
		height: 100%;
		width: auto;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.archive .introduce_list_col .info,
	.archive .introduce_list_col.show_info .info,
	#post_list2 .article a .info,
	#post_list2 .article.show_info a .info {
		width: -webkit-calc(70% - 10px);
		width: -moz-calc(70% - 10px);
		width: calc(70% - 10px);
	}

	.archive .introduce_list_col .info .meta,
	#post_list2 .article a .info .meta {
		margin: 0;
	}

	.archive ul.meta li.cat,
	#post_list2 .article .info ul.meta li.cat {
		font-size: 10px;
	}

	.archive .introduce_list_col .info .title,
	#post_list2 .article .info .title  {
		font-weight: 600;
	}

	.archive .introduce_list_col .info .excerpt,
	#post_list2 .article .info .excerpt {
		display: block;
		font-size: 11px;
	}

	.archive .introduce_list_col .info .more,
	#post_list2 .article .info .more {
		display: block;
		width: calc(70% - 10px);
		font-size: 10px;
		padding: 5px 0 0;
	}

	#post_list2 .article .info .more {
		width: 100%;
		margin: 0;
	}

}

/*--------------------------------------------------------------
# AI tool Page
--------------------------------------------------------------*/

.single-tools.single-introduce #article #post_title {
	font-size: 42px;
	margin: 0 0 30px 0;
}

:root {
	--container: 1080px;
	--bg: #ffffff;
	--panel: #f8fafc;
	--border: #e5e7eb;
	--text: #101828;
	--muted: #475467;
	--accent: #1477d6;
	--accent-weak: #e6f0fb;
	--good: #1477d6;
	--good-text: #0b2957;
	--good-bg: #e6f0fb;
	--great: #1477d6;
	--great-text: #0b2957;
	--great-bg: #e6f0fb;
	--weak: #77aabb;
	--weak-text: #44707e;
	--weak-bg: #f5fcfc;
	--none: #cccccc;
	--none-text: #475467;
	--none-bg: #f8fafc;
	--chip-bg: #f1f5f9;
}

/* ページ背景（白） */
body.single-tools{ background: var(--bg); color: var(--text); }

.tool__hero,
.tool__section{
	margin: 0 auto;
	padding: 28px 24px;
	border-bottom: 1px solid var(--border);
	background: transparent;
}

/* ヒーロー */
.tool__hero{
	display:block;
}
.tool__hero_top{
	display:grid;
	grid-template-columns: 72px 1fr auto;
	gap: 20px;
	align-items:center;
	margin-bottom:10px;
}
.tool__hero_bottom{
	display:block;
	margin-bottom: 10px;
}
.introduce_shoulder_copy {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 auto;
	padding: 12px 14px;
	font-size: unset;
	border: 1px solid var(--border);
	border-radius: 12px;
	color: var(--text);
	background: var(--panel);
}
.tool__icon{
	width:72px;height:72px;border-radius:16px;object-fit:contain;border:1px solid var(--border);background:#fff;padding:5px;box-sizing:border-box;
}
ul.meta li.cat {
	width: 100%;
	font-size: 11px;
}
ul.meta li.cat a {
	margin: 0 5px 5px 0;
	padding: 6px 8px;
	line-height: 1;
	border-radius: 999px;
}
.tool__name{ margin:0 0 8px; font-size:28px; letter-spacing:.02em; color: var(--text); }
.tool__meta{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
	display:inline-flex; align-items:center; gap:6px;
	padding:6px 10px; border-radius:999px; border:1px solid var(--border);
	background: var(--chip-bg); color: var(--muted); font-size:12px;
}
.chip--accent{ color:#0b2957; border-color: #cfe0f8; background: var(--accent-weak); }
.env__chips .chip{
	transition: background-color .15s ease, color .15s ease, opacity .15s ease, border-color .15s ease;
}
.env__chips .chip.is-active{
	opacity: 1;
	color:#0b2957;
	background: var(--accent-weak);
	border-color: #cfe0f8;
}
.env__chips .chip.is-inactive{
	opacity: .65;
	color: var(--muted);
	background: #f8fafc;
	border-color: var(--border);
}

.btn{
	display:inline-flex; align-items:center; gap:8px;
	padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600;
	border:1px solid var(--border);
}
.btn--primary{
	background: linear-gradient(180deg, #e6f0fb, #d9e9fb);
	color:#0b2957;
}
.btn--primary:hover{ box-shadow:0 0 0 3px rgba(20,119,214,.15) inset; }

/* 見出し */
.tool__heading{ margin:0 0 30px; font-size:18px; color:#0b2957; }
.tool__summary{ color: var(--text); line-height:2; }
.tool__description{ color: var(--text); line-height:2; }

/* 汎用テーブル */
.table-scroll{ overflow:auto; }
.table{
	width:100%;
	background:#fff;
	border-collapse: revert;
	border-spacing: revert;
}
.table thead th{
	background: var(--accent-weak);
	color:#0b2957;
	font-weight:700;
	padding:12px;
	text-align:left;
	position: sticky;
	top: 0;
}
.table tbody th,
.table tbody td{
	padding:12px;
	vertical-align: middle;
	color: var(--text);
	font-weight: normal;
	line-height: 2;
}
.table--info tbody{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.table--spec tbody{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 10px;
}
.table--info th{
	width: 100px;
	border: solid 1px #ddd;
	border-radius: 5px;
}
.table--spec th{
	width: 150px;
	border: solid 1px #ddd;
	border-radius: 5px;
}
.table--points thead th:first-child{
	width: 88px;
}
.link{
	color: var(--accent);
	text-decoration: underline;
}

/* ポイント */
.tool__highlights{
	list-style:none; margin:0; padding:0;
	display:grid; grid-template-columns: 1fr; gap:10px;
}
.gallery__link { height: 100%; }
@media (min-width: 720px){
	.tool__highlights{ grid-template-columns: repeat(, 1fr); }
}
.highlight{
	display:flex; align-items:center; gap:10px;
	padding:12px 14px; border:1px solid var(--border); border-radius:12px;
	background: var(--panel); box-shadow: 0 1px 0 rgba(16,24,40,0.04);
}
.highlight__icon{
	flex:0 0 28px; width:28px; height:28px; border-radius:999px;
	display:grid; place-items:center;
	color: var(--accent); background: var(--accent-weak); border:1px solid #cfe0f8;
}
.highlight__text{ color: var(--text); line-height:2; }

/* 料金：比較表（横スクロール対応） */
.pricing{
	display:grid; grid-template-columns: 1fr; gap:14px;
}
@media (min-width: 880px){
	.pricing{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px){
	.pricing{ grid-template-columns: repeat(4, 1fr); }
}

.plan{
	position:relative; border:1px solid var(--border); border-radius:14px; background:#fff;
	box-shadow: 0 2px 8px rgba(16,24,40,0.06); overflow:hidden;
	display:flex; flex-direction:column;
}
.plan__head{
	padding:12px 14px; border-bottom:1px solid var(--border);
	background: linear-gradient(180deg, #f8fbff, #f6f9ff);
}
.plan__title{ display:flex; align-items:center; gap:10px; justify-content: space-between; }
.plan__title h3{ margin:0; font-size:14px; color:#0b2957; }
.plan__badge{
	display:inline-flex; align-items:center; padding:4px 10px; font-size:12px;
	border-radius:999px; background: var(--accent-weak); color:#0b2957; border:1px solid #cfe0f8;
}
.plan__body{
	padding:14px; color: var(--text); line-height:2; flex:1;
}

/* 各プランのアクセント（トップボーダー） */
.plan--free{ border-top:4px solid #16a34a; }      /* 緑 */
.plan--paid{ border-top:4px solid var(--accent);} /* ブランド */
.plan--business{ border-top:4px solid #0b2957; }  /* 濃紺 */
.plan--trial{ border-top:4px solid #f59e0b; }     /* オレンジ */

/* 機能評価（ライト配色） */
.tool__features{
	display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;
}
@media (min-width: 880px){
	.tool__features{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.feature{
	display:flex; align-items:center; justify-content:space-between;
	padding:12px 14px; border:1px solid var(--border); border-radius:12px; background: var(--panel);
}
.feature__label{ color:#0b2957; }
.feature__badge{
	display:inline-flex; align-items:center; gap:8px; padding:0;
	border-radius:999px; font-size:18px;
}
.feature__badge .feature__icon{ font-weight:700; }
.feature__label.is-great{ color: var(--great-text); }
.feature__label.is-good{ color: var(--good-text); }
.feature__label.is-weak{ color: var(--weak-text); }
.feature__label.is-none{ color: var(--none-text); }
.feature__label.is-unknown{ opacity:.65; }
.feature:has(.feature__badge.is-great){ color: var(--great); background: var(--great-bg); border-color: #cfe0f8; }
.feature:has(.feature__badge.is-good){ color: var(--good); background: var(--good-bg); border-color:#cfe0f8; }
.feature:has(.feature__badge.is-weak){ color: var(--weak); background: var(--weak-bg); border-color: #e0eef0; }
.feature:has(.feature__badge.is-none){ color: var(--none); background: var(--none-bg); border-color:#e5e7eb; opacity: .65; }
.feature:has(.feature__badge.is-unknown){ opacity:.65; }

/* 利用環境 */
.tool__env .env__group{ margin-bottom:20px; }
.env__title{ color:#0b2957; margin-bottom:10px; }
.env__chips{ display:flex; flex-wrap:wrap; gap:5px; }

/* 画像ギャラリー（白背景向け）＋ ライトボックス（チェックボックス方式） */
.tool__gallery{
	display:grid; grid-template-columns: repeat(2, 1fr); gap:8px;
}
@media (min-width: 880px){
	.tool__gallery{ grid-template-columns: repeat(4, 1fr); }
}
.gallery__item{ position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#fff; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery__link{ display:block; cursor: zoom-in; }

.lb-toggle{ position:absolute; opacity:0; pointer-events:none; }
.gallery__item .lightbox{
	display:none;
	position:fixed; inset:0;
	align-items:center; justify-content:center;
	background: rgba(0,0,0,0.86); padding:24px; z-index:999;
}
.lb-toggle:checked ~ .lightbox{ display:flex; }
.lightbox img{
	max-width: min(96vw, var(--container));
	max-height: 90vh;
	height: auto;
	aspect-ratio: auto;
	border-radius: 12px; border:1px solid var(--border); background:#000;
}
.lightbox__bg{
	position:absolute; inset:0; cursor:zoom-out;
}
.lightbox__close{
	position:absolute; top:16px; right:20px; color:#fff;
	text-decoration:none; font-size:28px; line-height:1;
	padding:6px 10px; border-radius:8px; background: rgba(255,255,255,0.1);
	cursor:pointer;
}

/* 動画 */
.tool__videos{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:12px; }

@media (min-width: 880px){
	.tool__videos{ grid-template-columns: repeat(2, 1fr); }
}
.video__wrap{
	position:relative; height:auto; overflow:hidden; align-content: center; border-radius:12px; border:1px solid var(--border); background:#000;
}
.video__wrap:has(iframe){ padding-bottom: 56.25%; }
.video__wrap iframe, .video__wrap object, .video__wrap embed{
	position:absolute; top:0; left:0; width:100%; height:100%;
}
.tool__videos--row{
	display:grid; grid-template-columns: 1fr; gap:12px; margin-top:30px;
}
@media (min-width: 880px){
	.tool__videos--row{ grid-template-columns: repeat(3, 1fr); }
}
.video__wrap--featured{
	border-width: 2px;
	border-color: var(--border);
	margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {

	.single-tools.single-introduce #article #post_title {
		font-size: 24px;
		margin: 10px 0;
	}

	#main_contents #main_col {
		padding: 0 20px;
	}

	.tool__hero, .tool__section {
		padding: 20px 0;
	}

	.introduce_shoulder_copy {
		margin: 0 auto !important;
	}

	.tool__hero_top {
		grid-template-columns: 48px 1fr auto;
		gap: 10px;
	}

	.tool__icon {
		width: 48px;
		height: 48px;
		border-radius: 10px;
	}

	.tool__name {
		margin: 0 0 5px;
		font-size: 20px;
	}

	.chip {
		padding: 4px 8px;
	}

	.btn {
		padding: 10px;
	}

	ul.meta li.cat a, ul.meta li.cat span {
		padding: 4px 8px!important;
		min-width: 40px!important;
		line-height: 1!important;
		border-radius: 999px!important;
	}

	.introduce_shoulder_copy {
		padding: 10px!important;
		font-size: 12px!important;
	}

	.tool__heading {
		margin: 0 0 20px;
		font-size: 14px;
	}

	.media_main {
		padding: 20px 0;
	}

	.table--info tbody {
		grid-template-columns: repeat(1, 1fr);
		gap: 5px;
	}

	.table tbody th,
	.table tbody td {
		padding: 8px;
	}

	.highlight {
		padding: 10px;
	}

	.table--spec tbody {
		gap: 5px;
	}

	.table--spec th {
		width: 120px;
	}

	.plan__title h3{
		font-size:12px;
	}

	.plan__badge {
		padding: 4px 8px;
	}

	.plan__head {
		padding: 10px;
	}

	.plan__body {
		padding: 10px;
	}

	.post_content,
	#single_share_bottom,
	#post_meta_bottom,
	#previous_next_post_image {
		padding: 0;
	}

}

/* ----------------------------------------------------------------------
ユーザーレビュー
---------------------------------------------------------------------- */
/* アクセントとベースカラー */
:root {
	--comment-accent: #0b2957;
	--comment-accent-soft: #e5f0fb;
	--comment-text: #0f1828;
	--comment-muted: #6b7280;
	--comment-border: #e5e7eb;
	--comment-bg: #ffffff;
	--comment-bg-muted: #f9fafb;
}

#comment_user_login p {
	display: flex;
	justify-content: space-between;
}

#comment_user_login span {
	margin: 0;
}

#comment_user_login a {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid var(--comment-border);
	background: transparent;
	color: #374151;
	font-size: 11px;
	border-radius: 9999px;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

#comment_user_login a:hover {
	background: var(--comment-bg-muted);
	border-color: #d1d5db;
	color: #1e40af;
}

/* 見出し */
#comment_headline {
	color: var(--comment-accent) !important;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .2px;
}

/* レビュー・トラックバックのタブ（ミニマルなピル） */
#comment_header ul { display: none; }
#comment_header ul li a,
#comment_header ul li p {
	color: #374151;
	border: 1px solid var(--comment-border);
	background: transparent;
	border-radius: 9999px;
	padding: 8px 14px;
	line-height: 1;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#comment_header ul li a:hover {
	color: var(--comment-accent) !important;
	background: var(--comment-accent-soft);
	border-color: #d1e0f8;
}
#comment_header ul li.comment_switch_active a,
#comment_header #comment_closed p {
	color: var(--comment-accent);
	background: var(--comment-accent-soft) !important;
	border-color: #d1e0f8 !important;
}
#comment_header ul li.comment_switch_active a:after,
#comment_header #comment_closed p:after {
	border-color: var(--comment-accent-soft) transparent transparent transparent !important;
}

/* 各レビューのカード（影なし・境界線優先） */
.comment {
	border: 1px solid var(--comment-border);
	color: var(--comment-text) !important;
	background: var(--comment-bg);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: none !important;
	transition: border-color .18s ease, background-color .18s ease;
}
.comment:hover {
	border-color: #cbd5e1;
}

/* メタ行（アバター／名前／日付／アクション） */
.comment-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.comment-meta-left {
	display: flex;
	align-items: center;
	gap: 0;
}
.comment-meta-left .avatar {
	width: 40px !important;
	height: 40px !important;
	border-radius: 9999px;
}
.comment-name-date {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.comment-name a {
	font-weight: 700;
	color: var(--comment-accent);
	text-decoration: none;
	pointer-events: none;
}
.comment-name a:hover { text-decoration: underline; }
.comment-date {
	color: var(--comment-muted);
	font-size: 13px;
}

/* アクション（返信・引用・編集）：ゴーストボタン調 */
.comment-act {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.comment-act li a {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid var(--comment-border);
	background: transparent;
	color: #374151;
	border-radius: 9999px;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.comment-act li a:hover {
	background: var(--comment-bg-muted);
	border-color: #d1d5db;
}
#cancel_comment_reply { display: none; }
.comment-reply a {
	border-color: #c7d2fe;
	color: #1d4ed8;
}
.comment-reply a:hover {
	background: #eef2ff;
	border-color: #a5b4fc;
	color: #1e40af;
}
.comment-reply a, .comment-reply a:visited { border-right: none; }
.comment-edit a, .comment-edit a:visited { border-left: none; }

/* 星評価 */
.comment-content .review-rating {
	font-size: 20px;
	letter-spacing: 5px;
	margin: 0;
	color: #aa9800;
	line-height: 2;
}

/* 本文 */
.comment-content {
	font-size: 15.5px;
	line-height: 2;
	color: var(--comment-text);
	margin-top: 0;
}
.comment-content p { margin: 8px 0 0; }

/* メッセージ／警告 */
.comment-note {
	color: #0b6b7a;
	border: 1px solid #94ddd4;
	background: #d6f4f0;
	border-radius: 10px;
	padding: 10px 12px;
}
.comment_closed {
	border: 1px solid var(--comment-border);
	background: var(--comment-bg);
	border-radius: 10px;
	padding: 10px 12px;
}

/* トラックバック */
.trackback_time { color: var(--comment-muted); }
#trackback_url_area input {
	border: 1px solid var(--comment-border);
	background: var(--comment-bg-muted);
	border-radius: 10px;
	padding: 10px 12px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
#trackback_url_area input:focus {
	border-color: #93c5fd;
	box-shadow: 0 0 0 3px rgba(147,197,253,.35);
	outline: none;
}

/* レビューフォーム */
#guest_info input,
#comment_textarea textarea {
	width: 100%;
	border: 1px solid var(--comment-border);
	background: var(--comment-bg);
	color: #374151;
	border-radius: 12px;
	padding: 12px 14px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
#guest_info input:focus,
#comment_textarea textarea:focus {
	border-color: #93c5fd;
	box-shadow: 0 0 0 3px rgba(147,197,253,.35);
	outline: none;
}
#guest_info label { color: #4b5563; }
#guest_info span { color: #6b7280; }

/* 送信ボタン */
#submit_comment {
	width: auto;
	height: auto;
	background: #ffffff;
	color: #374151 !important;
	border: 1px solid var(--comment-border);
	border-radius: 12px;
	padding: 10px 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease;
}
#submit_comment:hover {
	background: linear-gradient(180deg, #e6f0fb, #d9e9fb)!important;
	border-color: #d1d5db!important;
	color: #1e40af;
	box-shadow:0 0 0 3px rgba(20,119,214,.15) inset;
}
#submit_comment:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(11,41,87,.35);
}
#submit_comment.disabled {
	color: #ccc!important;
	background: #eee !important;
	border: 1px solid #ddd;
	pointer-events: none;
	cursor: not-allowed !important;
	opacity: 0.7;
}

/* CAPTCHAや補助要素の余白 */
#submit_comment_wrapper p { margin: 8px 0; }
#submit_comment_wrapper img { display: block; margin: 8px auto; }
#submit_comment_wrapper #siteguard_captcha { margin-top: 10px; }

/* モバイル最適化 */
@media (max-width: 767px) {
	#comment_headline {
		margin: 0 0 20px 0!important;
		font-size: 14px!important;
		font-weight: bold!important;
		line-height: 1!important;
	}
	.comment_form_wrapper { padding: 10px; }
	.comment-content {
		margin-top: 0;
		padding: 0!important;
	}
	.comment-meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		margin-bottom: 0;
	}
	.comment-meta-left { gap: 0px; }
	.comment-act { flex-wrap: wrap; height: 40px; align-content: center; gap: 0px; }
	.comment { padding: 14px; }

	.comment-content .review-rating {
		font-size: 16px;
		letter-spacing: 4px;
	}

	#submit_comment_wrapper #submit_comment {
		width: auto;
		height: auto;
		font-size: 12px;
		padding: 10px 20px;
	}
}

/*--------------------------------------------------------------
# Option
--------------------------------------------------------------*/
.breadcrumb-area {
	padding: 1rem 0;
}

.grecaptcha-badge {
	z-index: 999;
	opacity: 0.3;
	visibility: hidden;
}

.grecaptcha-badge:hover {
	opacity: 1;
}

.cspm_carousel_item .details_container .details_infos p {
	margin-bottom: 0;
}

.iziModal {
	width: 90%!important;
	height: 80%!important;
	top: 50%!important;
	left: 50%!important;
	transform: translate(-50%, -50%) translateZ(0)!important;
	margin: 0!important;
}

#article_header {
	padding: 30px 40px;
}

#post_image {
	position: relative;
}

.post-banner {
	position: absolute;
	top: -15px;
	left: 10px;
	width: 140px;
	height: 210px;
	background: #c8932d;
	align-content: center;
	margin-right: 20px;
	border-radius: 5px 0 0 0;
	filter: drop-shadow(3px 5px 3px #000a);
}

.post-banner:before {
	content: '';
	position: absolute;
	top: 0;
	right: -10px;
	border: none;
	border-radius: 0 10px 0 0;
	border-bottom: solid 15px #865d0f;
	border-right: solid 10px transparent;
}

.post-banner:after {
	content: '';
	position: absolute;
	left: 0;
	top: 100%;
	height: 0;
	width: 0;
	border-left: 70px solid #c8932d;
	border-right: 70px solid #c8932d;
	border-bottom: 35px solid transparent;
}

.post-banner h2 {
	font-size: 18px;
	color: #fff;
	line-height: 2;
	text-align: center;
	margin: auto;
}

.post-banner h2 span {
	font-size: 28px;
}

.post-banner h3 {
	font-size: 12px;
	color: #fff;
	line-height: 2;
	text-align: center;
	margin: auto;
}

.post-banner h3 span {
	font-size: 18px;
}

.post-banner h4 {
	font-size: 10px;
	color: #fff;
	width: max-content;
	line-height: 2;
	text-align: center;
	margin: auto auto 10px;
	border-bottom: solid 1px #fff;
}

.post-title h3 {
	font-size: 14px;
	font-weight: normal;
	line-height: 2;
}

.post-head {
	display: flex;
	margin-bottom: 50px;
}

.post-title {
	position: relative;
	width: 100%;
}

body.page .cm-posts article {
	display: block; 
}

.cm-posts .post-title article {
	display: block;
	margin: auto;
	width: max-content;
}

.cm-posts .cm-featured-image {
	width: max-content;
	margin-bottom: 30px;
}

.cm-posts h1.cm-entry-title {
	font-size: 2.5rem!important;
}

.cm-posts h2.cm-entry-title {
	margin: 2rem 0 3rem!important;
}

.cafe {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.cafe-layout {
	width: calc(100% - 300px);
}

.cafe-layout a {
	display: block;
	width: 100%;
}

.cafe-layout a img {
	width: 100%;
}

.image-popup:hover img {
	transform: scale(1.1)!important;
}

.cafe-point {
	width: 300px;
	margin: auto;
}

ul.utility {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	margin: auto;
	width: 100%;
	padding: 1rem;
}

ul.utility h4 {
	position: absolute;
	color: #fff;
	top: 90px;
	width: 275px;
	text-align: center;
	font-size: 28px;
}

ul.utility li {
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	align-content: baseline;
}

ul.utility img {
	position: relative;
	width: 50px;
}

ul.utility li p {
	margin: 0;
	color: #3B342E;
	font-size: 12px;
	line-height: 2;
}

.access {
	display: block;
}

.access h4 {
	color: #43392F;
	font-size: 20px;
	font-weight: 700;
	margin-top: 30px;
	line-height: 3;
}

ul.cafe-info {
	display: block;
	padding: 1rem;
}

.cafe-info-child {
	display: flex;
}

.cafe-info-child01 {
	display: block;
	width: 50%;
}

.cafe-info-child02 {
	display: block;
	width: 50%;
}

ul.cafe-info li {
	display: flex;
	font-size: 12px;
	height: 100px;
}

ul.cafe-info li dt {
	width: max-content;
	min-width: 150px;
	height: fit-content;
	background: #8A837B;
	padding: 0.5rem 1rem;
	border-radius: 5px;
	color: #fff;
	margin-bottom: 1rem;
	text-align: center;
	line-height: 2;
}

ul.cafe-info li dd {
	width: auto;
	word-break: auto-phrase;
	padding: 0.5rem 1rem;
	margin-left: 0;
	margin-bottom: 1rem;
	color: #43392F;
	line-height: 2;
}

ul.cafe-info li dd a {
	text-decoration: underline 1px;
	color: #8a837b;
}

ul.cafe-info li dd a:hover {
	color: #43392F;
}

ul.cafe-info li dd.tel a:after {
	margin: 0 0 0 3px;
	font-family: "Font Awesome 5 Free";
	font-size: 0.75em;
	content: '\f095';
	font-weight: 700;
}

ul.cafe-info li dd.link a:after {
	margin: 0 0 0 3px;
	font-family: "Font Awesome 5 Free";
	font-size: 0.75em;
	content: '\f35d';
	font-weight: 700;
}

.cafe-gallery {
	width: 100%;
}

ul.my-gallery {
	display: flex;
	gap: 20px;
	max-width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

ul.my-gallery li {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 300px;
	width: 30px;
	height: 150px;
	scroll-snap-align: start;
	overflow: hidden;
}

ul.my-gallery li img {
	width: 100%;
}

.pb_googlemap_footer {
	padding: 0 1rem;
}

.pb_googlemap_footer p {
	font-size: 12px;
}

.mfp-zoom-out-cur,
.mfp-ready {
	height: 100svh!important;
}

.review {
	padding: 1rem;
}

.cafe-review {
	display: flex;
}

.review-inner {
	display: flex;
	width: 50%;
	background: #8A837B;
	padding: 10px 30px;
	margin: 10px;
}

.review-left {
	display: block;
	width: 60%;
	align-content: center;
}

.reviewer {
	display: flex;
	border-bottom: solid 1px #fff;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.reviewer img {
	position: relative;
	width: 40px;
}

.reviewer h3 {
	font-size: 14px;
	color: #fff;
	margin: 1rem;
}

.review-left p {
	font-size: 12px;
	color: #fff;
}

.review-right {
	display: block;
	width: 40%;
	margin-left: 10px;
	align-content: center;
}

.review h4 {
	color: #43392F;
	font-size: 14px;
	font-weight: 700;
}

.review-right ul {
	display: block;
}

.review-right ul li {
	display: flex;
}

.review-right ul li dt {
	color: #fff;
	text-align: left;
	font-size: 10px;
	width: 50%;
}

.review-right ul li dd {
	word-break: auto-phrase;
	color: #fff;
	font-size: 10px;
	margin: auto 0;
	width: 50%;
	text-align: left;
}

.review-right ul li dd a {
	text-decoration: underline 1px;
}

.review-right ul li dd a:hover {
	color: #de9c3b;
}

.user {
	position: relative;
	display: flex;
	margin-top: 3rem;
}

.user-icon {
	display: block;
	position: relative;
	width: max-content;
}

.user-icon img {
	width: 100px;
	border-radius: 50%;
	border: solid 5px #fff;
}

.user-icon h5 {
	font-size: 16px;
	text-align: center;
	line-height: 2;
}

.user-review {
	position: relative;
	margin: 0 3rem;
	padding: 1rem;
	background: #fff;
	border-radius: 10px;
	height: max-content;
	width: 100%;
}

.user-review:before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 15px;
	left: -15px;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	border-width: 10px 0 10px 15px;
	transform: rotate(180deg);
}

.comment {
	border: 1px solid #ccc;
	color: #fff;
	margin: 0 0 15px;
	padding: 15px 20px;
}

#comments .avatar {
	background: transparent;
}

.comment-date {
	color: #fff;
}

.comment-content p {
	font-size: 14px;
}

#block-18 {
	display: block;
	margin-top: 5rem;
}

#block-19 {
	display: none;
}

.cm-footer img {
	width: 200px;
}

.cm-footer .widget ul li {
	line-height: 50px;
}

@media screen and (max-width: 420px) {

	.cspm_carousel_item {
		transform: scale(0.8);
		transform-origin: left;
	}

	.cm-site-branding img{
		width: 200px;
		/* margin-bottom: 1rem; */
	}

	.cm-header-col-2 .advertisement_728x90 img {
		margin: auto;
	}

	.cm-container {
		width: auto;
	}

	.cm-content {
		padding-top: 0;
	}

	.cm-posts {
		gap: 0;
	}

	.cm-posts article {
		display: block; 
	}

	.cm-posts .post-title article {
		width: 100%;
	}

	.cm-posts .cm-featured-image {
		width: 100%;
		margin-bottom: 0px;
	}

	.cm-post-content, .single-title-above {
		padding: 20px 0;
	}

	.cm-posts h1.cm-entry-title {
		font-size: 16px!important;
		word-break: auto-phrase;
		margin: 0;
	}

	.cm-entry-summary p {
		font-size: 12px;
	}

	.post-head {
		display: block;
		margin-bottom: 30px;
	}

	.post-banner {
		position: absolute;
		top: -10px;
		width: 100px;
		height: 150px;
		margin-right: 10px;
		z-index: 1;
	}

	.post-banner:before {
		right: -5px;
		border-bottom: solid 10px #865d0f;
		border-right: solid 5px transparent;
	}

	.post-banner:after {
		border-left: 50px solid #c8932d;
		border-right: 50px solid #c8932d;
		border-bottom: 25px solid transparent;
	}

	.post-banner h2 {
		font-size: 12px;
	}

	.post-banner h2 span {
		font-size: 20px;
	}

	.post-banner h3 {
		font-size: 10px;
	}

	.post-banner h3 span {
		font-size: 14px;
	}

	.post-banner h4 {
		font-size: 8px;
	}

	.post-title h3 {
		font-size: 12px;
	}

	.cafe-point {
		width: auto;
	}

	ul.utility {
		width: 100%;
		margin: 30px auto;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}

	ul.utility img {
		width: 30px;
	}

	ul.utility li p {
		font-size: 10px;
	}

	.cafe {
		display: block;
	}

	.cafe-layout {
		width: 100%;
	}

	ul.cafe-point {
		width: 100%;
		margin: 2rem 0;
		font-size: 14px;
	}

	ul.cafe-point h4 {
		top: 96px;
	}

	ul.cafe-point li dt {
		width: 50%;
	}

	ul.cafe-point li dd {
		width: 50%;
	}

	ul.cafe-info {
		font-size: 14px;
	}

	.cafe-info-child01 {
		width: 47.5%;
	}

	.cafe-info-child02 {
		width: 47.5%;
		margin-left: 5%;
	}

	ul.cafe-info h4 {
		font-size: 18px;
	}

	ul.cafe-info li {
		display: block;
		height: auto;
	}

	ul.cafe-info li dt {
		font-size: 10px;
		padding: 3px 0;
		width: 100%;
		margin-bottom: 0;
	}

	.cafe-gallery {
		margin-bottom: 2rem;
	}

	ul.my-gallery {
		gap: 10px;
	}

	ul.my-gallery li {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 0 0 50%;
		width: auto;
		height: auto;
		aspect-ratio: 16 / 9;
		scroll-snap-align: start;
		overflow: hidden;
	}

	.access {
		max-width: 100%;
	}

	.review {
		margin-top: 2rem;
		max-width: 100%;
		padding: 1rem 0;
	}

	.cafe-review h4 {
		font-size: 18px;
	}

	.cafe-review ul {
		display: block;
	}

	.cafe-review ul li {
		display: flex;
	}

	.cafe-review ul li dt {
		width: 50%;
	}

	.cafe-review ul li dd {
		width: 50%;
	}

	.cafe-review {
		display: block;
	}

	ul.cafe-info li dd {
		width: auto;
		margin-left: 0rem;
	}

	.review-inner {
		padding: 10px;
		width: auto;
	}

	.review-left,
	.review-right {
		width: 50%;
	}

	.reviewer img {
		width: 30px;
	}

	.reviewer h3 {
		margin: auto;
	}

	.user {
		display: block;
	}

	.user-icon {
		display: block;
	}

	.user-icon img {
		width: 70px;
		border: solid 3px #fff;
	}

	.user-icon h5 {
		font-size: 14px;
	}

	.user-review {
		margin: 0;
		width: auto;
		font-size: 14px;
	}

	.user-review:before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: -15px;
		left: 20px;
		border-style: solid;
		border-color: transparent transparent transparent #fff;
		border-width: 10px 0 10px 15px;
		transform: rotate(270deg);
	}

	.comment {
		padding: 10px!important;
	}

	.comment-content p {
		font-size: 12px;
	}

	#block-18 {
		display: none;
	}

	#block-19 {
		display: block;
		margin-top: 3rem;
	}

	.advertisement_728x90 img {
		padding: 0;
	}

	.cm-footer .widget ul li {
		line-height: 1;
		text-align: center;
	}

}