/*!
Theme Name: Ultra Blog
Theme URI: https://adorethemes.com/downloads/ultra-blog/
Author: Adore Themes
Author URI: https://adorethemes.com/
Description: Ultra Blog is a minimalist and lightweight WordPress theme designed for creating professional blogging websites. The theme has a clean design and is ideal for various blog types, such as fashion, lifestyle, travel, food, and photography. Ultra Blog is mobile-friendly and cross-browser compatible, making it accessible across various devices and screen sizes. The theme is also translation-ready, allowing you to create blogs in any language. Overall, Ultra Blog offers a user-friendly interface, modern and creative design, and range of features suitable for building engaging and unique blog websites. Live preview : https://demo.adorethemes.com/ultra-blog/
Version: 1.0.0
Requires at least: 5.0
Requires PHP: 7.4
Tested up to: 6.9
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: fantastic-blog
Text Domain: ultra-blog
Tags: custom-background, custom-header, custom-logo, custom-menu, featured-images, footer-widgets, left-sidebar, right-sidebar, blog, one-column, portfolio, photography, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Ultra Blog is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

*/

/* Root
========================================================================== */
:root {
	--primary-color: #2c3e50;
}

/* -----------------------------------------
Start Banner Section
----------------------------------------- */
.banner-section.style-2 {
	overflow: hidden;
}
.banner-section.style-2 .banner-section-wrapper .slick-dots{
	margin-top: -10px;
}
.banner-section.style-2 .banner-section-wrapper .slick-slide{
	padding-inline: 5px;
	padding-bottom: 30px;
}
.banner-section.style-2 .banner-section-wrapper .slick-slide .post-item.overlay-post{
	min-height: 400px;
}
.banner-section.style-2 .banner-section-wrapper .adore-arrow{
	scale: 1;
	opacity: 1;
	visibility: visible;
}
.banner-section.style-2 .adore-navigation .adore-arrow.slide-prev{
	inset-inline-start: 5px;
	transform: translate(50%,-50%);
}
.banner-section.style-2 .adore-navigation .adore-arrow.slide-next{
	inset-inline-end: 5px;
	transform: translate(-50%,-50%);
}

/* -----------------------------------------
End Banner Section
----------------------------------------- */

/* Start categories section
--------------------------------------------- */

.categories-section .categories-wrapper {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.categories-section .category-single {
	aspect-ratio: 4/2.8;
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	transition: var(--transition);
	background-position: center;
}

.categories-section .category-single img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
	position: absolute;
	inset: 0;
	transition: var(--transition);
}
.categories-section .category-single img.blur-img {
	z-index: -1;
	filter: blur(20px);
	opacity: 0;
	transform: translateY(10px) translateZ(0);
}
.categories-section .category-single:hover .not-blur-img{
	transform: scale(1.05) translateZ(0);
}
.categories-section .category-single:hover img.blur-img {
	opacity: 0.7;
}

.categories-section .category-single>a {
	position: absolute;
	inset: 0;
	text-decoration: none;
	text-align: start;
	display: block;
	color: #fff;
	line-height: 1.2;
	font-size: var(--font-size-md);
	z-index: 3;
	font-weight: bold;
	border-radius: 15px;
	isolation: isolate;
}

.categories-section .category-single>a::before {
	position: absolute;
	content: "";
	inset: 0;
	z-index: -1;
	opacity: .2;
	border-radius: 15px;
	border: 1px solid #fff;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}

.categories-section .category-single>a>.title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 12px 20px;
	text-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}

.categories-section .category-single .count {
	position: absolute;
	inset-inline-start: 20px;
	top: 20px;
	color: var(--color-text);
	font-weight: bold;

}
.categories-section .category-single .count .number{
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 3;
	font-size: calc(var(--font-size-base) - 0.2rem);
	background: var(--post-item-background);
	
	
}
.categories-section .category-single .count .view{
	position: absolute;
	z-index: 1;
	inset-inline-start: 100%;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--font-size-sm);
	background: var(--post-item-background);
	border-radius: 25px;
	white-space: nowrap;
	padding: 0px 15px;
	height: 30px;
	line-height: 30px;
	margin-inline-start: 5px;
	opacity: 0;
	transition: all 300ms ease;
	
	
}
.categories-section .category-single:focus-within .count .view,
.categories-section .category-single:hover .count .view{
	opacity: 1;
}

/* End categories section
--------------------------------------------- */

/* --------------------------------------
=========================================
	PLUS AREA
=========================================
-----------------------------------------*/

body {
    font-family: "Noto Sans JP", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 16px !important;
}

.product-subset__table th {
    background-color: #EEE;
    border: 1px solid #AAA;
    padding: 10px;
    font-size: 16px;
    vertical-align: middle;
}

.product-subset__table td {
    border: 1px solid #AAA;
    font-size: 16px;
    padding: 10px;
    vertical-align: middle;
}

.product-subset__price br {
    display: none;
}

.product-subset__price {
    color: #d21a1a;
    font-weight: bold;
    font-size: 1.4em;
}

.product-subset__price--yen {
    font-size: 60%;
    font-weight: bold;
}

td.product-subset__td-order br {
    display: none;
}

.product-subset__submit-button {
    width: 100%;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 8px;
    padding: 10px;
}

.inyou {
    position: relative;
    padding: 0;
    border: 1px solid #AAA;
    margin-bottom: 30px;
}

.inyou p {
    margin: 0 !important;
    /* position: absolute; */
    padding: 10px;
    line-height: 2;
    top: 3px;
    left: 10px;
    background: #eeeeee;
    border-radius: 0;
    font-weight: bold;
    color: #333;
}

.inyou ul {
    padding: 20px;
    border-top: 1px solid #AAA;
    margin-bottom: 0 !important;
}

.inyou ul li {
    list-style: none;
    margin-bottom: 10px;
    font-size: 16px;
}

.inyou ul li:last-child {
    margin: 0;
}
table.about th {
    border: 1px solid #AAA;
    width: 200px;
    padding: 10px;
    font-size: 1em;
    background-color: #EEE;
}

table.about td {
    border: 1px solid #AAA;
    padding: 10px;
    font-size: 1em;
	background-color: #FFF!important;
}

.page-entry-title-box h1 {
    font-size: 30px;
}

.bs-blog-post.single img {
    margin-bottom: 10px;
    width: 100%;
}

p.tel_number:before {
    content: "\f095";
    font-family: 'FontAwesome';
    margin-right: 10px;
}

p.address:before {
    content: "\f041";
    font-family: 'FontAwesome';
    margin-right: 12px;
}

.textwidget.custom-html-widget p {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}

p.product-price {
    color: #b42122;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
    text-align: left !important;
    margin-bottom: 20px;
    margin-top: 0;
}

h2.entry-title {
    text-align: left;
}

.blog-post {
    border: 2px solid #DDD;
    border-radius: 8px;
    padding: 15px;
    box-sizing: border-box;
}

article .blog-post .image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto!important;
}

h3.widget-title {border-bottom: 3px solid #437a71;padding: 0 10px 10px;}

.single.single-left-sidebar #comments, .single.single-left-sidebar .content, .single.single-left-sidebar div.title, .single.single-right-sidebar #comments, .single.single-right-sidebar .content, .single.single-right-sidebar div.title {
    width: 100% !important;
}

h1.entry-title {
    border-bottom: 2px dotted #CCC;
    padding: 10px 0 20px;
    font-size: 30px;
}

.copyrights span {
    display: none;
}

.hd-bar .side-menu ul li a {
    font-size: 16px;
}

p.btn_detail {
    width: 100%;
    text-align: center;
}

p.btn_detail a {
    border: 1px solid #AAA;
    background-color: #fd0707;
    padding: 10px 20px;
    border-radius: 10px;
    color: #FFF;
    text-decoration: none;
    width: 100%;
    display: block;
    margin: 0 auto;
    font-size: 1.1em;
}

p.btn_detail a:hover {
    opacity: 0.8;
}

.bs-blog-post .bs-blog-thumb img {
    border-radius: 20px;
}

.reviewList ul li {
    list-style: none;
    margin-bottom: 20px;
    border: 4px solid #EEE;
    padding: 20px !important;
}

.reviewList ul li p {
    margin: 0;
}

p.review_text {
    margin-bottom: 0;
}

p.review_star i {margin-right: 2px;color: #ffa400;}

.entry-content h2 {
    font-size: 1.2em !important;
    margin-bottom: 10px;
    padding: 10px;
    border-left: 5px solid #7e1516;
    text-align: left;
}

dl.faq_area {
    border: 2px solid #DDDD;
    padding: 10px 20px 20px !important;
    margin-bottom: 20px !important;
    border-radius: 10px;
}

dl.faq_area dt:before {
    content: "Q.";
    color: #d51a1a;
    font-size: 30px;
    margin-right: 7px;
}

dl.faq_area dt {
    margin: 0 0 10px;
    border-bottom: 1px dotted #CCC;
    padding-bottom: 10px;
    line-height: 2;
}

dl.faq_area dd {
    margin: 0;
    line-height: 2;
}

dl.faq_area dd:before {
    content: "A.";
    font-weight: bold;
    font-size: 30px;
    color: #1a7dd5;
    margin-right: 7px;
}

ul.bta_area li {
    list-style: none;
    padding: 5px 0;
}

ul.bta_area {
    margin: 0 !important;
    padding: 0 !important;
}

.site-title {
    /* margin-top: 10px !important; */
}

.single-entry-summary h2 {
    font-size: 1.5em;
    border-bottom: 2px solid #fd0707;
    padding: 0 10px 10px;
    margin-bottom: 20px;
}

table.product-subset__table {
    margin: 0 0 30px;
}

table.point th {
    background-color: #eeeeee;
    border: 1px solid #AAA;
    padding: 10px;
    width: 150px;
}

table.point td {
    border: 1px solid #AAA;
    padding: 10px;
}

ul.review li {
    border: 4px solid #DDD;
    border-radius: 10px;
    margin: 0 0 20px !important;
    padding: 20px !important;
    list-style: none;
}

ul.review {
    margin: 0 !important;
    padding: 0;
}

table.point {
    margin-bottom: 30px;
}

p.review_name {
    font-weight: bold;
    font-size: 1.2em;
}

.news-thumb img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px;
    display: table;
}

table.contact th {
    background-color: #EEE;
    border: 1px solid #AAA;
    padding: 10px;
    width: 200px;
}

table.contact td {
    background-color: #FFF;
    border: 1px solid #AAA;
    padding: 10px;
}

table.contact {
    margin-bottom: 20px;
}

.entry-content dl dt {
    font-weight: bold;
    line-height: 2;
}

.entry-content dl dd {
    padding: 0;
    margin: 0;
    line-height: 1.5;
}

nav.navigation.post-navigation {
    display: none;
}

ul.review p {
    margin: 0 0 10px;
}

.box {
    border: 1px solid #AAA;
    padding: 10px;
    background-color: #f3f3f3;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.box p {
    margin: 0;
}

.box h2 {
    margin: 0 0 20px;
}

ul.kanren {
    display: flex;
    flex-flow: row wrap;
    margin: 0 !important;
    padding: 0 !important;
}

ul.kanren li {
    width: 25%!important;
    list-style: none;
    padding: 10px !important;
}

ul.kanren li a {
    border: 1px solid #AAA;
    padding: 10px;
    border-radius: 10px;
    display: block;
    text-decoration: none;
    box-shadow: 0 0 5px #CCC;
}

.kanren li p {
    text-align: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 16px;
    margin: 0 !important;
}

ul.kanren li a:hover {
    opacity: 0.8;
}

.select-wrapper-2 {
    display: flex;
    position:relative;
    width: 100%;
    max-width: 360px;
    margin: 0 0 0 auto;
    }


.select-wrapper-2 select {
    margin-right: 10px;
    font-size: 20px;
    border-radius: 4px;
    border: 1px solid #333;
    outline: none;
    font-weight: bold;
    cursor: pointer;
    appearance: none;
    padding: 10px 30px 10px 10px;
    position:relative;
    width: 80px !important;
    height: auto;
    min-width: initial;
}

.select-wrapper-2::after {
  content: "\f0d7"; /* Font Awesome 4.7 下向き矢印 */
  font-family: FontAwesome;
  position: absolute;
  left: 60px; /* ボタンの幅に合わせて調整 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #333;
  font-size: 16px;
}

.select-wrapper-2 button {
    flex: 1;
    font-weight: bold;
    font-size: 20px;
    border-radius: 4px;
    padding: 10px;
    border: 1px solid #333;
    appearance: none;
    cursor: pointer;
}

.select-wrapper-2 button:hover {
    background-color: #333;
    color: #FFF;
}

/* ラジオボタンをリセット */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #999;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  transition: border 0.2s, background 0.2s;
}

/* チェックされたとき */
input[type="radio"]:checked {
  border-color: #333;
  background-color: #333;
}

/* チェックマーク用の擬似要素 */
input[type="radio"]:checked::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ラベル全体をクリック可能に */
label {
  cursor: pointer;
  user-select: none;
}

.product-subset__form ul li {
    list-style: none;
    display: flex;
    border: 2px solid #d0d0d0;
    padding: 10px !important;
    border-radius: 10px;
    margin-bottom: 10px;
    line-height: 2;
    align-items: center;
    background-color: #EEE;
}

.product-subset__form ul {
    padding: 0 !important;
    margin: 0 !important;
}

form.product-subset__form ul li input {
    position: relative;
    border-color: #333 !important;
    background-color: #FFF !important;
}

.product-subset__form button {
    font-size: 20px;
    padding: 16px 32px;
    border-radius: 8px;
    margin: 0 0 0 auto;
    display: table;
    appearance: none;
    cursor: pointer;
    height: auto;
    background-color: #7e1516 !important;
}

.product-subset__form ul li label {
    flex: 1;
    font-weight: bold;
    font-size: 20px;
}

table.guide th {
    width: 180px;
    border: 1px solid #7e1516;
    background-color: #eeeeee;
    padding: 10px;
    text-align: left;
}

table.guide td {
    border: 1px solid #7e1516;
    background-color: #FFF;
    padding: 10px;
}

form.product-subset__form {
    margin-bottom: 30px;
}

form.product-subset__form ul li label span {
    font-size: 16px;
    font-weight: normal;
    padding-left: 10px;
}

.select-wrapper-2 p {
    margin: 0 !important;
}

body {
  counter-reset: faq-counter;
} 
/* 各 faq_area の dt が番号を増やす */
.faq_area dt {
  counter-increment: faq-counter;
}
/* dt に Q◯ を付与 */
.faq_area dt::before {
  content: "Q" counter(faq-counter) "."!important;
  font-weight: bold;
}

.socialLine.annCenter {
    display: none;
}

.top-footer-widget-area {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    background-color: #FFF;
    margin-bottom: 20px;
    padding: 1.5em;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.top-footer-widget-area .top-footer-widget {
    width: 32%;
}

.top-footer-widget-area .top-footer-widget ul {
    margin: 0;
    padding: 0 10px;
}

.top-footer-widget-area .top-footer-widget ul li {
    list-style: none;
    line-height: 2;
}

.top-footer-widget-area .top-footer-widget ul li a {
    color: #333 !important;
}

.top-footer-widget-area .top-footer-widget ul li a:before {
    content: "\f0da";
    font-family: 'FontAwesome';
    margin-right: 5px;
}

div#mainAnnina article:last-child {
    left: 0 !important;
}

h4.title {
    margin-bottom: 20px !important;
}

.list-blog.bs-blog-post .small form {
    margin: 0;
}

figure.single_img img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: table;
}

@media (max-width: 768px) {
.product-subset__submit-button {
    font-size: 16px;
}
.product-subset__table th {
    font-size: 16px;
}
.product-subset__table td {
    font-size: 16px;
}
.product-subset__unit-price {
    font-size: 12px;
}
.bs-blog-post .small {
    padding: 10px;
}
.inyou ul {
    margin: 0 !important;
    width: 100% !important;
}

.content p {
    width: 100% !important;
    margin-bottom: 30px !important;
}

div#post-wrapper {
    padding: 0;
}
h1.entry-title {
    font-size: 24px;
}
.header-navigation {
    width: 100%;
}
}

@media (max-width: 480px) {
.img-fluid {
    width: 100%;
    max-width: 270px !important;
    margin: 0 auto;
    display: table;
}
table.about tr {
    display: block;
    width: 100%;
}

table.about th {
    display: block;
    width: 100%;
    font-size: 16px;
    border: none;
    border-right: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
}

table.about td {
    display: block;
    width: 100%;
    font-size: 16px;
    border: none;
    border-right: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
}

table.about {
    border-top: 1px solid #AAA;
    border-left: 1px solid #AAA;
}
.page-area {
    padding: 20px 0;
}
#sidebar {
    display: block;
    max-width: 100%;
    clear: both;
}
article.blog-article {
    clear: none;
    padding-right: 0!important;
}
.col-md-9 {
    padding-right: 0 !important;
}
ul.kanren li {
    width: 100% !important;
}
table.point th {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #AAA;
    border-right: 1px solid #AAA;
}

table.point tr {
    display: block;
    width: 100%;
}

table.point td {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #AAA;
    border-right: 1px solid #AAA;
}

table.point {
    border-top: 1px solid #AAA;
    border-left: 1px solid #AAA;
}
.top-footer-widget-area .top-footer-widget {
    width: 100%;
    margin-bottom: 40px;
}
table.guide th {
    width: 40%!important;
}
h1, p.site-title {
    font-size: 20px;
}
header.entry-header {
    padding: 0;
}
.page-content, .entry-content, .entry-summary {
    margin: 1em 0 0;
}
form.product-subset__form ul li label span {
    font-size: 14px;
    font-weight: normal;
    padding-left: 0;
    display: block;
}
.entry-content h2 {font-size: 1.2em !important;}
.page-content, .entry-content, .entry-summary {margin: 1em 0 0;}
}

/* --------------------------------------
=========================================
	PLUS AREA
=========================================
-----------------------------------------*/

/* ==========================================================================
   監修者情報 全体のボックス
   ========================================================================== */
.super_visor {
  background-color: #ffffff; /* 白ベース */
  border: 2px solid #fbe5e6; /* アクセントカラーに合わせた優しい薄いオレンジの枠線 */
  border-radius: 16px; /* 角を丸くして親しみやすさを演出 */
  padding: 30px;
  max-width: 100%; /* 読みやすい横幅に制限 */
  margin: 30px auto 30px;
  box-shadow: 0 6px 16px #EEE; /* アクセントカラーをほんのり混ぜた影 */
  box-sizing: border-box;
}

/* ==========================================================================
   タイトル（H2）
   ========================================================================== */
.super_visor h2 {
  font-size: 1.3rem;
  color: #333333;
  margin: 0 0 25px 0;
  padding-bottom: 12px;
  position: relative;
  font-weight: 700;
  text-align: center; /* タイトルを中央寄せにして柔らかな印象に */
  border: none;
}

/* タイトルの下線（中央から広がるアクセントライン） */
.super_visor h2::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: #7e1516; /* アクセントカラー */
  border-radius: 2px;
}

/* ==========================================================================
   記事・レイアウトエリア
   ========================================================================== */
.super_visor article {
  display: flex;
  flex-direction: column;
  gap: 25px; /* 項目間のゆとり */
}

/* 定義リスト（dl） */
.super_visor dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 項目名（dt：肩書き・コメント） */
.super_visor dt {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 肩書き・コメントのラベル装飾 */
.super_visor dt span {
  display: inline-block;
  background-color: #EEE; /* アクセントカラーを10%に薄めた背景 */
  color: #7e1516; /* アクセントカラー */
  padding: 5px 14px;
  border-radius: 20px; /* カプセル型の丸み */
  margin-right: 10px;
  margin-bottom: 10px;
}

/* ==========================================================================
   各項目の内容（dd：お名前・本文）
   ========================================================================== */

/* コメント本文 */
.super_visor dl:nth-of-type(2) dd {
  font-size: 0.95rem;
  line-height: 1.8; /* 改行やセリフが多いため、行間を広げて読みやすく */
  color: #444444;
  margin: 0;
  padding: 20px;
  background-color: #fdfbf9; /* ほんのり温かみのある超極薄のベージュ/グレー */
  border-left: 4px solid #7e1516; /* 左側にアクセントカラーのアクセントライン */
  border-radius: 0 8px 8px 0;
}

/* ==========================================================================
   レスポンシブ対応（画面幅 480px 以下）
   ========================================================================== */
@media screen and (max-width: 480px) {
  .super_visor {
    padding: 20px; /* スマホ用に外側の余白をタイトに */
    border-radius: 12px;
  }
  
  .super_visor h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  
  .super_visor dl:nth-of-type(1) dd {
    font-size: 16px; /* お名前のサイズをスマホ向けに最適化 */
  }

  .super_visor dl:nth-of-type(2) dd {
    font-size: 1.2rem; /* 本文の文字をわずかに小さくして枠内に収まりやすく */
    padding: 15px; /* 内側の余白を微調整 */
  }
}

/* ==========================================================================
   全体の共通設定・見出し
   ========================================================================== */
/* 全体の大見出し（h2） */
h2 {
  font-size: 1.5rem;
  color: #333333;
  text-align: center;
  margin: 40px 0 20px 0;
  padding-bottom: 10px;
  position: relative;
}

/* 大見出しの下線装飾 */
h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  border-radius: 2px;
}

/* カテゴリの見出し（h3） */
h3 {
  font-size: 1.4rem;
  color: #7e1516; /* アクセントカラー */
  margin: 40px auto 15px auto;
  max-width: 100%; /* リストの幅と合わせる */
  padding-left: 10px;
  border-left: 4px solid #7e1516; /* 左側にアクセントライン */
}

/* ==========================================================================
   FAQリスト全体のスタイル（ul）
   ========================================================================== */
.faq_list {
  list-style: none; /* デフォルトの点を消す */
  padding: 0;
  margin: 0 auto 30px 0 !important;
  max-width: 100%; /* 読みやすい横幅に制限 */
  width: 100%;
  box-sizing: border-box;
}

/* 各FAQのボックス（li） */
.faq_list > li {
  background-color: #ffffff; /* 白ベース */
  border: 1px solid #e2e8f0; /* 薄い境界線 */
  border-radius: 8px; /* 角丸 */
  margin-bottom: 15px; /* 質問同士の余白 */
  overflow: hidden; /* 背景色のはみ出し防止 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); /* 軽い影 */
  list-style: none;
  padding: 0 !important;
}

/* ==========================================================================
   Q（質問：h4）の装飾
   ========================================================================== */
.faq_list > li > h4 {
  margin: 0;
  padding: 16px 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 600;
  color: #1a202c;
  /* アクセントカラーを極限まで薄めた背景色 */
  background-color: #EEE;
  border-bottom: 1px solid rgba(247, 126, 33, 0.1);
}

/* 「Q.」の文字だけアクセントカラーにする */
.faq_list > li > h4::first-letter {
  color: #7e1516; /* アクセントカラー */
  font-weight: 800;
  font-size: 1.1rem;
}

/* ==========================================================================
   A（回答：p）の装飾
   ========================================================================== */
.faq_list > li > p {
  margin: 0;
  padding: 16px 20px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5568;
  background-color: #ffffff; /* 回答エリアはすっきりとした白 */
}

/* 「A.」の文字を目立たせる */
.faq_list > li > p::first-letter {
  color: #7e1516; /* Qと区別しやすいように少し落ち着いたオレンジ */
  font-weight: 800;
  font-size: 1.1rem;
}

/* ==========================================================================
   レスポンシブ対応（画面幅 480px 以下）
   ========================================================================== */
@media screen and (max-width: 480px) {
  .faq_list > li > h4,
  .faq_list > li > p {
    padding: 14px 15px; /* スマホ用に内側の余白を少しタイトに */
    font-size: 1.1rem; /* 文字サイズをスマホ向けに微調整 */
  }
}

/* ==========================================================================
  良い口コミ・悪い口コミ
   ========================================================================== */
.column_review_area_outer.review_select {
  display: flex;
  gap: 24px;
  margin: 30px 0;
}

.column_review_area {
  flex: 1;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.column_review_meta {
  padding: 20px;
  text-align: center;
  background: #fff;
  border-bottom: 3px solid #7e1516;
}

.column_review_meta h2 {
  margin: 0 0 15px;
  font-size: 1rem !important;
  font-weight: 700;
  color: #7e1516;
  border: none;
  text-align: center;
}

.column_review_meta figure {
  margin: 0 0 15px;
}

.column_review_meta figure i {
  font-size: 48px;
  color: #7e1516;
}

.column_review_meta section {
  display: block;
  text-align: left;
}

.column_review_meta section p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
  text-align: center;
}

.column_review_meta .bold {
  font-weight: 700;
}

.column_review_meta .fa-star,
.column_review_meta .fa-star-o {
  color: #ffa400;
  font-size: 16px;
}

.column_review_area article {
  padding: 20px;
}

.column_review_area article p {
  margin: 0;
  color: #333;
  line-height: 1.9;
  font-size: 0.95rem;
}

/* 良い口コミ */
.column_review_meta.good {
  border-top: 5px solid #7e1516;
}

/* 悪い口コミ */
.column_review_meta.bad {
  border-top: 5px solid #555;
}

.column_review_meta.bad h2 {
  color: #555;
}

.column_review_meta.bad figure i {
  color: #555;
}

.column_review_meta section p br {
    display: none;
}

/* スマホ */
@media (max-width: 480px) {
  .column_review_area_outer.review_select {
    flex-direction: column;
    gap: 16px;
  }

  .column_review_meta {
    padding: 15px;
  }

  .column_review_meta h2 {
    font-size: 1.1rem;
  }

  .column_review_meta section {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .column_review_area article {
    padding: 15px;
  }
}