/***************************************
 レスポンシブWEBデザイン
 PC用スタイルシート
 基本情報で設定した画面サイズ以下で適用
***************************************/

/****************************
HTMLの共通の設定
****************************/
body 	{
	background:#f4f1ea;
	font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
	font-size:16px;
	margin: 0;
	}

p { 	
	display:block;
	text-align:center;
	}
ul, ol, li {
	margin: 0;
	list-style: none;
	padding: 0;
	}
/********** 入力部品 ************/
input[type='text'],input[type='password']{
	max-width: 300px;
	padding: 5px;
	margin:2px;
	border-radius: 5px;
	font-size:16px;
	border: 1px solid #ccc;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
}
input[type="radio"],input[type="checkbox"]{
	margin:2px;
	width: 1.3em;
	height: 1.3em;
	vertical-align:middle;
}
textarea{
	width: 100%;
	max-width: 500px;
	margin:2px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid #ddd;
	padding: 10px;
	font-size: 13px;
}
select{
	padding: 5px;
	margin:2px;
	border-radius: 5px;
	font-size:16px;
	border: 1px solid #ccc;
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
}
/****************************
ボタン、リンク
****************************/
.small_link {
	display: inline-block;
	background: transparent;
	font-weight: 500;
	font-style: normal;
	font-size: 12.5px;
	letter-spacing: 0.3em;
	color: rgba(150,90,50,0.7);
	border-radius: 4px;
	padding: 2px 5px 2px 5px;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg, rgba(233,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	margin: 2px;
	border: none;
	border: 1px solid rgba(150,90,50,0.3);
}
.small_link:hover {
	color: #FFFFFF;
	background-position: 99% 50%;
}
.nextbox {
	width:100%;
	text-align:center;
	}

.BACK {
	padding:6px 12px;
	margin-top:8px;
	background:#8b2e2e;
	color:#fff;
	text-decoration:none;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.BACK:hover {
	background:#6e2424;
}

#return-top {
	height: 40px;
	line-height: 40px;
	background-color:rgba(153,51,0,0.5);
	border-radius: 30%;
	bottom: 11px;
	color: #fff;
	font-size: 14px;
	outline: 0;
	position: fixed;
	right: 20px;
	text-decoration:none;
	text-align: center;
	width: 50px;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
#return-top:hover {
	background-color: #993300;
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
/****************************
ヘッダー
****************************/
#header{
	background:#f8f6f2;
	border-bottom:2px solid #2f4f3f;
	font-family:"メイリオ", sans-serif;

	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:1000;
}
#headerlist > ul{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	max-width:1200px;
	margin:0 auto;
	padding:10px 10px 3px 10px;
	list-style:none;
	gap:20px;
}
#headerleft,
#headercargo,
#upmenu{
	display:flex;
	align-items:center;
	height:60px; 
}
/* ロゴ */
#headerleft{
	flex:0 0 250px;
}
.site-logo {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 32px;
	color: #1e3a8a;
	letter-spacing: 0.08em;
	line-height: 1.2;
padding: 20px 0;

}
.site-logo::before {
	content: "■";
	margin-right: 8px;
}

.logo {
	width: 100%;
	max-width: 250px;
	height: auto;
	display:block;
}
/* 電話 */
.headercom a {
	text-decoration:none;
}
#headercenter{
	flex:1;
	font-size:16px;
}
/* 検索 */
#headersearch{
	flex:0 0 300px;
}
#headersearch form{
	display:flex;
	max-width:420px;
}
#headersearch input{
	flex:1;
	padding:10px;
	font-size:16px;
	border:1px solid #ccc;
	border-radius:5px 0 0 5px;
}

#headersearch input[type='text']{
	max-width: 180px;
}
#headersearch button{
	padding:10px 15px;
	font-size:16px;
	border:none;
	background:#2f4f3f;
	color:#fff;
	border-radius:0 5px 5px 0;
	cursor:pointer;
}
.searchbutton {
	padding:10px 15px;
	font-size:16px;
	border:none;
	background:#2f4f3f;
	color:#fff;
	border-radius:0 5px 5px 0;
	cursor:pointer;

}
/* カゴ */
#headercargo{
	flex:0 0 auto;
}
.headercargo{
	margin-top:25px;
	padding:6px 12px;
	font-size:14px;
	border-radius:18px;
	box-shadow:none;
	background: linear-gradient(#b13a3a, #8b2e2e);
	color:#fff;
	font-weight:bold;
	display:flex;
	align-items:center;
	gap:10px;
	transition:0.2s;
	cursor:pointer;
}
/* ホバー効果 */
.headercargo:hover{
	background: linear-gradient(#c94444, #9f3434);
}
/* 数字部分（丸バッジ） */
.headercargoBTR{
	background:#fff;
	color:#8b2e2e;
	font-weight:bold;
	font-size:14px;
	min-width:28px;
	height:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	text-decoration:none;
}
.headercargoBT{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:24px;
	background:#cdcdcd;
	color:#8b2e2e !important;
	font-weight:bold;
	font-size:14px;
	border-radius:50%;
	text-decoration:none !important;
	margin-left:6px;
}
/* 押した時 */
.headercargo:active{
	transform:translateY(3px);
	box-shadow:0 1px 0 #6f2323;
}
/* =========================
	 PCナビ
========================= */
.menu{
	display:flex;
	gap:25px;
	list-style:none;
	padding:10px 0;
	margin:0;
	border-top:1px solid #ddd;
}
.menu li{
	padding:5px 0;
}
.menu li a{
	text-decoration:none;
	color:#333;
	font-size:16px;
}
.menu li a:hover{
	color:#8b2e2e;
}
#menuToggle{
	display:none;
}
.menu-close{
	display:none;
}
/* =========================
	 スマホナビ
========================= */
@media (max-width:768px){
	#headerlist > ul{
		justify-content: flex-start;
		gap:10px;
		padding:6px 3px;
	}
	#headerleft{
		order:1;
		margin-right:auto;
		margin:0;
		padding:0;
	}
	.logo{
		display:block;
		max-width:180px;
	}
	#headercargo{
		order:2;
	}
	.headercargo{
		font-size:15px;
		padding:8px 10px;
	}
	#upmenu{
		order:3;
	}
	#headersearch{
		order:4;
		width:100%;
		margin-top:10px;
		border-top:1px solid #eee;
		padding-top:8px;
	}
	#headercenter{
		display:none;
	}
	#menuToggle{
		display:block;
		font-size:28px;
		cursor:pointer;
		margin-left:10px;
	}
	#headersearch{
		margin-top:0px;
	}
	#headersearch form{
		max-width:100%;
	}
	#menuToggle{
		display:block;
		font-size:28px;
		cursor:pointer;
	}
	/* スライドメニュー */
	.menu{
		position:fixed;
		top:0;
		right:-100%;
		width:280px;
		height:100%;
		background:#ffffff;
		flex-direction:column;
		padding-top:60px;
		gap:0;
		border-left:2px solid #2f4f3f;
		transition:0.3s;
		z-index:999;
	}
	.menu li{
		border-bottom:1px solid #ddd;
		padding:15px 20px;
	}
	.menu.active{
		right:0;
	}
	.menu-close{
		display:block;
	}
}
/* ===================================
ハンバーガーメニュー表示＝背景暗転
=================================== */
.menu-overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.4);
	opacity:0;
	visibility:hidden;
	transition:0.3s;
	z-index:998;
}
.menu-overlay.active{
	opacity:1;
	visibility:visible;
}
/* ×ボタン表示 */
.menu-close{
	font-size:18px;
	text-align:right;
	padding:15px 20px;
	cursor:pointer;
	border-bottom:2px solid #2f4f3f;
}
/****************************
コンテンツ
****************************/
#contents {
	max-width:1200px;
	margin:0 auto;
	padding-top:180px;
	display:flex;
	gap:30px;
	align-items:flex-start;
}
/****************************
左メニュー
****************************/
#leftmenu {
	position:sticky;
	top:140px;
	width:200px;
	padding:0 0 0 3px;
	font-size:14px;
	flex-shrink:0;
	top:20px;
}
.menu-box {
	background:#fff;
	border:1px solid #ddd;
	margin-bottom:15px;
	border-radius:4px;
	overflow:hidden;
}
.menu-title {
	background:#f5f5f5;
	padding:8px 10px;
	font-weight:bold;
	font-size:14px;
}
.menu-content {
	padding:10px;
}

.menu-list,
.category-list {
	list-style:none;
	padding:0;
	margin:0;
}
.menu-list a{
	display:flex;
	justify-content:space-between;
	padding:8px 10px;
	text-decoration:none;
	color:#333;
	transition:0.15s;
	font-size:14px;
}
.menu-list a:hover,
.category-list a:hover {
	background:#f0f0f0;
	color:#8b2e2e;
}
.category-list span {
	font-size:12px;
	color:#777;
}
/* 共通 */
.category-list {
	list-style:none;
	padding:0;
	margin:0;
}
.category-list li {
	margin:2px 0;
}

/* 親カテゴリ */
.largecategory > a {
	display:block;
	padding:8px 10px;
	font-weight:bold;
	font-size:14px;
	color:#333;
	text-decoration:none;
	border-radius:4px;
	transition:0.2s;
}
/* 2階層 */
.smallcategory2 > a {
	display:block;
	padding:6px 10px 6px 22px;
	font-size:13px;
	color:#444;
	text-decoration:none;
	position:relative;
	transition:0.2s;
}
/* 3階層 */
.smallcategory3 > a {
	display:block;
	padding:6px 10px 6px 36px;
	font-size:13px;
	color:#555;
	text-decoration:none;
	position:relative;
	transition:0.2s;
}
/* 4階層 */
.smallcategory4 > a {
	display:block;
	padding:6px 10px 6px 50px;
	font-size:13px;
	color:#666;
	text-decoration:none;
	position:relative;
	transition:0.2s;
}
/* 5階層以上ある場合は、上記の1～4階層と同じように記述（数字を増やす） */

/* カテゴリの件数 */
.category-list span {
	color:#999;
	font-size:12px;
	margin-left:4px;
}
/* ホバー */
.category-list a:hover {
	background:#f5f5f5;
	color:#8b2e2e;
}
/* 現在地 */
.category-list a.active {
	background:#8b2e2e;
	color:#fff;
	font-weight:bold;
}
.category-list a.active span {
	color:#fff;
}
/* Mypage */
.btn-small {
	padding:6px 12px;
	margin-top:8px;
	background:#8b2e2e;
	color:#fff;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.btn-small:hover {
	background:#6e2424;
}
.link-small {
	display:block;
	margin-top:8px;
	font-size:13px;
	text-decoration:none;
	color:#666;
}
.category-list span {
	color:#999;
	font-size:12px;
}
/****************************
メインコンテンツ
****************************/
#maincontents {
	display:block;
	width:100%;
	max-width: 1200px;
	background:#fff;
	padding:10px 20px 10px 20px;
	margin: 0 0 10px 0;
	border-radius:6px;
	flex:1;
	min-width:0;
}
/* 画像が原因で広がらないように */
#maincontents img{
	max-width:100%;
	height:auto;
}
@media (max-width: 768px){
	#contents{
		padding-top:90px;
		display:block;
	}
	#leftmenu{
		display:none;
	}
	#maincontents{
		width:100%;
		padding:10px;
		box-sizing:border-box;
	}
	/* 親をflexに */
	#headerlist > ul{
		display:flex;
		align-items:center;
	}
	.site-logo{
		font-size:18px;
		text-align:center;
		width:100%;
	}
	/* 検索フォームを左に */
	#headersearch{
		flex:1;
		order:1;
		margin-right:auto;
	}
	#headersearch input{
		width:100%;
	}
	#menuToggle{
		width:44px;
		text-align:center;
	}
	/* ハンバーガーを右に */
	#menuToggle{
		order:2;
		margin-left:10px;
		margin-right:10px;
	}
}
/****************************
右メニュ－
****************************/
#rightmenu {
	display:none;
}
/****************************
フッター
****************************/
.footer {
	background:#f5f5f5;
	padding:20px 20px;
	font-size:15px;
	line-height:1.6;
	color:#222;
	border-top:2px solid #2f4f3f;
}
.footer-inner {
	max-width:1000px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:30px;
}
/* 左右カラム */
.footer-info {
	flex:1;
	min-width:280px;
}

.footer-links {
	flex:1;
	min-width:220px;
}
/* リンク装飾 */
.footer-links ul {
	list-style:none;
	padding:0;
	margin:0;
}
.footer-links li {
	margin:6px 0;
}
.footer a {
	text-decoration:none;
	color:#333;
	transition:0.2s;
}
.footer a:hover {
	color:#8b2e2e;
}
/* バー装飾 */
.footer-links a::before {
	content:"";
	display:inline-block;
	width:3px;
	height:12px;
	background:#ccc;
	margin-right:8px;
	transition:0.2s;
}
.footer-links a:hover::before {
	background:#8b2e2e;
}
.copyright {
	width:100%;
	text-align:center;
	margin-top:40px;
	font-size:13px;
	color:#666;
}
.footer p {
	margin:4px 0;
}
.tel a {
	font-size:20px;
	font-weight:bold;
	color:#b13a3a;
	text-decoration:none;
}
.hours {
	font-size:14px;
	color:#555;
}

@media (max-width:768px) {
	.footer-inner {
		flex-direction:column;
	}
}

/* ============================
関連商品
============================= */
.related-products {
	margin-top: 40px;
}
/* タイトル */
.related-title {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 25px;
	padding-left: 15px;
	border-left: 4px solid #b13a3a;
}
/* 共通：横スクロール＋スナップ */
.related-list {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.related-item {
	flex: 0 0 240px;	 /* ← PCは固定幅 */
	scroll-snap-align: start;
}
/* 画像 */
.related-item img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0;
}
/* カードデザイン */
.related-item a {
	display: block;
	background: #fff;
	padding: 10px;
	border-radius: 16px;
	text-decoration: none;
	color: #333;
	box-shadow: 0 8px 25px rgba(0,0,0,0.05);
	transition: 0.2s;
	text-align: center;
}
.related-item a:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 35px rgba(0,0,0,0.08);
}
.related-name {
	font-size: 14px;
	font-weight: 600;
	min-height: 40px;
}
.related-price {
	font-size: 16px;
	font-weight: bold;
	color: #b13a3a;
	margin-top: 10px;
}
.related-link {
	display: block;
	text-decoration: none;
	background: #fff;
	padding: 20px;
	border-radius: 16px;
	box-shadow: 0 8px 25px rgba(0,0,0,0.05);
	transition: 0.2s;
	text-align: center;
	color: #333;
}
.related-link:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 35px rgba(0,0,0,0.08);
}
/* 画像 */
.related-link img {
	width: 100%;
	max-width: 160px;
	border-radius: 0px;
	margin-bottom: 15px;
}
/* 商品名 */
.related-name {
	font-size: 14px;
	font-weight: 600;
	min-height: 40px;
}
/* 価格 */
.related-price {
	font-size: 16px;
	font-weight: bold;
	color: #b13a3a;
	margin-top: 10px;
}
@media (max-width: 768px) {
	.related-list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.related-item {
		flex: 0 0 50%;	 /* ← スマホだけ割合 */
	}
	.related-item img {
		height: 140px;	 /* 少し小さめ */
	}
}

/* ==============================
table maincontents
================================*/
#maincontents table{
	width:100% !important;
	border-collapse:separate;
	border-spacing:0;
	background:#fff !important;
	border-radius:16px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,0.05);
	margin-bottom:40px;
}
/* 外側グレー背景を消す */
#maincontents table[bgcolor]{
	background:transparent !important;
}
/* セクションタイトル専用テーブル（bgcolor付きだけ対象） */
#maincontents table[bgcolor] tr:first-child td{
	font-weight:600;
	font-size:16px;
	padding:18px 20px 18px 26px;
	border-bottom:1px solid #eee;
	position:relative;
	text-align:left;
}

table tr td {
	border-bottom: 2px solid #eee;
	}


/* 縦バー */
#maincontents table[bgcolor] tr:first-child td::before{
	content:"";
	position:absolute;
	left:14px;
	top:20px;
	width:4px;
	height:18px;
	background:#b13a3a;
	border-radius:2px;
}
/* 発送業者名セルだけ装飾 */
#maincontents td.INPOSTTDM{
	width:20%;
	font-weight:600;
	background:#fafafa;
	border-top:2px solid #eee;
	padding:18px 20px;
	vertical-align:top;
}
#maincontents td.INPOSTTDM + td{
	padding:18px 25px;
}
#maincontents table td{
	background:#fff !important;
	padding:14px 20px;
	border:none !important;
	font-size:14px;
	vertical-align:top;
}
#maincontents input[type="text"],
#maincontents input[type="password"],
#maincontents input[type="email"],
#maincontents input[type="tel"],
#maincontents input[type="number"],
#maincontents select,
#maincontents textarea{
	padding:10px 12px;
	border:1px solid #ddd;
	border-radius:8px;
	font-size:14px;
	box-sizing:border-box;
}
#maincontents input[type="radio"]{
	margin-right:6px;
}

#maincontents input[type="radio"] + *{
	display:inline-block;
	margin-bottom:8px;
}
#maincontents .postnosearch .small_bt{
	padding:10px 12px;
	border:1px solid #ddd;
	border-radius:8px;
	font-size:14px;
	box-sizing:border-box;
}
#maincontents input:focus,
#maincontents select:focus,
#maincontents textarea:focus{
	border-color:#b13a3a;
	outline:none;
	box-shadow:0 0 0 3px rgba(177,58,58,0.1);
}
@media (max-width:768px){
	#maincontents table{
		border-radius:12px;
	}
	#maincontents table td{
		padding:12px 15px;
		font-size:13px;
	}
}

/* =============================
Top Page
===============================*/
/* ヒーロー */
.hero {
	display: flex;
	gap: 30px;
	align-items: center;
	background: #ffffff;
	padding: 0 20px 20px 20px;
	border-radius: 6px;
	border: 1px solid #e1e5ea;
	margin-bottom: 30px;
}

.hero-image img {
	width: 390px;
	border-radius: 4px;
}

.hero-content h2 {
	font-size: 28px;
	color: #0f2d4a;
	margin-bottom: 20px;
	letter-spacing: 1px;
}

.lead {
	font-size: 16px;
	color: #444;
	margin-bottom: 25px;
	line-height: 1.8;
	text-align:left;
}

.feature-list {
	list-style: none;
	padding: 0;
}

.feature-list li {
	border-left: 3px solid #2f6fab;
	padding-left: 12px;
}
.feature-list li::before {
	content: none;
}

/* レスポンシブ */
@media (max-width: 768px) {
	.hero {
		display: inline-block;
		flex-direction: column;
		margin:5px 0 20px 0;
		text-align: center;
	}
	.feature-list {
		text-align:left;
		list-style: none;
		padding: 0;
	}
}

.section-title {
	font-size: 20px;
	font-weight: bold;
	color: #0f2d4a;
	border-left: 4px solid #1f4e79;
	padding-left: 12px;
	margin-bottom: 30px;
}

.topics-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-bottom: 60px;
}

.topic-card {
	background: #ffffff;
	padding: 30px;
	border: 1px solid #e1e5ea;
	border-radius: 6px;
	transition: 0.3s;
}

.topic-card:hover {
	border-color: #1f4e79;
}

.topic-card h3 {
	margin-bottom: 15px;
	color: #0f2d4a;
}

.btn-outline {
	display: inline-block;
	margin-top: 15px;
	padding: 8px 18px;
	border: 1px solid #1f4e79;
	color: #1f4e79;
	text-decoration: none;
	border-radius: 4px;
}

.btn-outline:hover {
	background: #1f4e79;
	color: #fff;
}
/*** CM ***/
.cmarea {
	background: #fff;
	border-radius: 8px;
	padding: 30px;
	text-decoration:none;
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
	margin-bottom: 40px;
}
.cmarea a {
	text-decoration:none;
	color:#555;
}

/*** HistoryArea ***/
.historyarea {
	background: #ffffff;
	border: 1px solid #e6e9ee;
	padding: 20px;
	margin:0 0 30px 0;
	border-radius: 0;
}
/* 行全体 */
.historyarea .history-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

/* 日付（固定幅） */
.historyarea .history-date {
	flex: 0 0 120px;
	font-size: 15px;				/* ← サイズUP */
	font-weight: 500;			 /* ← 少しだけ強く */
	color: #5f6b78;				 /* ← 少し濃く */
	line-height: 1.7;
	white-space: nowrap;
}
.historyarea .history-date,
.historyarea .history-body {
	line-height: 1.3;	 /* 1.7 → 1.5 */
}
/* 本文側 */
.historyarea .history-body {
	flex: 1;
	min-width: 0;
}
.historyarea .toplink {
	color: #0f2d4a;
	text-decoration: none;
	font-weight: 500;
}
/* 説明文 */
.historyarea .history-text {
	margin-left: 6px;
}
/* 共通バッジ */
.historyarea .topix {
	position: relative;
	padding: 5px 90px 5px 18px;
}
.historyarea .topix::after {
	position: absolute;
	right: 0;
	top: 5px;
	transform: none;
	font-size: 12px;
	letter-spacing: 1px;
}
/* NEW */
.historyarea .topix.new::after {
	content: "新着";
	color: #0f3d66;	 /* 少し明るめブルー */
	font-size: 12px;
	background: #f3f6f9;
	padding: 2px 8px;
	letter-spacing: 1px;
}

/* UPDATE */
.historyarea .topix.update::after {
	content: "更新";
	color: #7a8896;	 /* もっと薄く */
	font-size: 12px;
	background: #f3f6f9;
	padding: 2px 8px;
	border-radius: 2px;
}
/* IMPORTANT */
.historyarea .topix.important::after {
	content: "重要";
	color: #b00020;	 /* しっかり赤 */
	font-size: 12px;
	background: #f3f6f9;
	padding: 2px 8px;
	font-weight: 600;
}
.historyarea .topix.important::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 3px;
	background: #b00020;
}

/* ==============================
一覧画面
===============================*/

.qa-item{
  border:1px solid #e5e5e5;
  border-radius:8px;
  margin-bottom:20px;
  overflow:hidden;
  background:#fff;
  transition:all 0.2s ease;
}

/* ホバーで少し浮く */
.qa-item:hover{
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}


/* ===== 質問 ===== */

.qa-question{
  display:flex;
  align-items:center;
  padding:16px 20px;
  background:#fafafa;
  border-bottom:1px solid #eee;
}

/* Qアイコン */

.qa-q{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#c73434;
  color:#fff;
  font-weight:bold;
  width:32px;
  height:32px;
  border-radius:50%;
  margin-right:12px;
  font-size:15px;
}

/* 質問タイトル */

.qa-question h2{
  font-size:16px;
  margin:0;
  font-weight:600;
  line-height:1.5;
}

/* リンクデザイン */

.qa-question a{
  color:#333;
  text-decoration:none;
  transition:color 0.2s;
}

/* hover時 */

.qa-question a:hover{
  color:#c73434;
}


/* ===== 回答 ===== */

.qa-answer{
  display:flex;
  align-items:flex-start;
  padding:18px 20px;
  background:#fff;
}

/* Aアイコン */

.qa-a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#4a6fa5;
  color:#fff;
  font-weight:bold;
  width:32px;
  height:32px;
  border-radius:50%;
  margin-right:12px;
  font-size:15px;
}

/* 回答文 */

.qa-answer p{
  margin:0;
  color:#444;
  line-height:1.8;
  font-size:15px;
}

.qa-question a::after{
  content:"?";
  margin-left:8px;
  font-size:18px;
  color:#bbb;
}

/* rank */
.rank {
  display:inline-flex;
	margin-left:10px;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#4a6fa5;
  font-weight:bold;
  height:32px;
  font-size:20px;
}

@media (max-width:768px){

.qa-question,
.qa-answer{
  padding:14px;
}

.qa-question h2{
  font-size:15px;
}

}


/* =========================
	 Pagination
========================= */
.pagearea{
	display:flex;
	justify-content:center;
	margin:20px 0;
}
.pagination{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
.pagination a{
	box-shadow:0 3px 8px rgba(0,0,0,0.04);
}

.pagination a,
.pagination .current{
   width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    padding:0;
	text-decoration:none;
}
/* 通常ページ */
.pagination a{
	background:#fff;
	border:1px solid #ddd;
	color:#555;
}

.pagination a:hover{
	border-color:#b13a3a;
	color:#b13a3a;
}
/* 現在ページ */
.pagination .current{
	background:#b13a3a;
	color:#fff;
	font-weight:600;
	border:1px solid #b13a3a;
}

.pagination .dots{
    display:flex;
    align-items:center;
    padding:0 6px;
    color:#999;
}

/* Pagination　Mobile */
@media (max-width:768px){
	.pagearea{
		margin:35px 0;
	}
	.pagination{
		gap:8px;
	}
	.pagination a,
	.pagination .current{
		min-width:36px;
		height:36px;
		font-size:13px;
		border-radius:8px;
	}
}

/* ===========================
詳細画面
=============================*/
.qa-title{
font-size:22px;
margin-bottom:20px;
border-bottom:2px solid #b13a3a;
padding-bottom:6px;
}

.qa-answer{
display:flex;
gap:15px;
margin-bottom:30px;
}

.answer-label{
background:#b13a3a;
color:#fff;
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-weight:bold;
}

.answer-body p{
	text-align:left;
}
.answer-body img{
max-width:100%;
margin-top:15px;
}

.rating-box{
border:1px solid #ddd;
padding:20px;
margin:30px 0;
border-radius:8px;
}

.stars{
font-size:22px;
color:#f5a623;
}

.rating-detail div{
margin:5px 0 10px 0;
font-size:14px;
}

.estimateform{
margin:30px 0;
}

.estimate-radio label{
margin-right:10px;
}

.relation-box{
margin:40px 0;
}

.relation-box li{
	border-bottom:1px solid #eee;
	padding:10px 0;
}
.relation-box a{
	font-size:14px;
	text-decoration:none;
	color:#333;
}
.relation-box a:hover{
  color:#c73434;
}
.relation-box ul{
	padding-left:20px;
}
.comment-box{
margin:40px 0;
}

.comment{
border-bottom:1px solid #eee;
padding:10px 0;
}

.comment-header{
font-weight:bold;
margin-bottom:5px;
}

.comment-date{
font-size:12px;
color:#888;
margin-left:10px;
}
.comment-return{
	padding:0 0 0 20px;
	color:#b13a3a;
}
.comform textarea{
width:100%;
height:120px;
margin:10px 0;
}
.comform a {
	text-decoration:none;
}

.submitbox{
margin-top:10px;
}

.BT{
background:#b13a3a;
color:#fff;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;
text-decoration:none;
}

.SUBMITBT {
	padding:6px 12px;
	margin-top:8px;
	background:#8b2e2e;
	color:#fff;
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.SUBMITBT:hover {
	background:#6e2424;
}


.updatearea {
	width:100%;
	text-align:right;
}
/* ===================
ロボット画面
=====================*/
.robot_iframe {
	float:center;
	display:inline-block;
	margin:5px 0px 0px 0px;
	}

.robot-main {
	margin:0px;
	padding:0px;
	background:#fff;
	width:100%;
	height:100%;
}
.robotcom {
	font-size: 14.5px;
	font-weight: 600;
	color: rgba(50,90,150,0.7);
	}
.robotBT {
	display: inline-block;
	background: transparent;
	text-transform: uppercase;
	font-weight: 600;
	font-style: normal;
	font-size: 13.5px;
	letter-spacing: 0.1em;
	color: rgba(50,90,150,0.7);
	border-radius: 0;
	padding: 2px 5px 2px 5px;
	transition: all 0.7s ease-out;
	background: linear-gradient(270deg, rgba(106,190,233,0.8), rgba(52,111,146,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	margin: 2px;
	border: none;
	border: 1px solid rgba(50,90,150,0.3);
	}
.robotBT:hover {
	color: #FFFFFF;
	background-position: 99% 50%;
	}