/* =========================================
   止水板とは？ページ
   Blue / Water Design
========================================= */

.sw-guide {
	--water-blue: #1387bf;
	--water-dark: #08658f;
	--water-light: #edf8fd;
	--water-pale: #f7fcfe;

	--warning-yellow: #ffd84d;
	--warning-light: #fff8d8;

	--danger-red: #c93a30;
	--danger-light: #fff1ef;

	--cta-orange: #e96f00;
	--brand-green: #008663;

	--text: #333333;
	--sub-text: #555555;
	--border: #c9dbe3;

	max-width: 1080px;
	margin: 0 auto;
	padding: 0 15px 50px;
	box-sizing: border-box;

	color: var(--text);
	font-size: 17px;
	line-height: 1.7;
}

.sw-guide * {
	box-sizing: border-box;
}

.sw-guide img {
	max-width: 100%;
	height: auto;
}

.sw-guide a {
	color: var(--water-dark);
}

/* -----------------------------------------
   パンくず
----------------------------------------- */

.sw-breadcrumb {
	margin: 10px 0 15px;
	font-size: 14px;
	color: #666;
}

.sw-breadcrumb a {
	color: var(--water-dark);
}

/* -----------------------------------------
   H1
----------------------------------------- */

.sw-guide h1 {
	margin: 0 0 20px;
	padding: 10px 0 10px 17px;

	border-left: 7px solid var(--water-blue);

	color: #222;
	font-size: 32px;
	line-height: 1.45;
}

/* -----------------------------------------
   H2
----------------------------------------- */

.sw-guide h2 {
	position: relative;

	margin: 45px 0 20px;
	padding: 11px 15px 11px 20px;

	background: var(--water-blue);
	border-left: 8px solid var(--warning-yellow);

	color: #fff;
	font-size: 25px;
	line-height: 1.5;
}

/* -----------------------------------------
   H3
----------------------------------------- */

.sw-guide h3 {
	margin: 30px 0 15px;
	padding: 0 0 7px 10px;

	border-left: 5px solid var(--water-blue);
	border-bottom: 2px solid #b9dce9;

	color: var(--water-dark);
	font-size: 21px;
	line-height: 1.5;
}

.sw-guide p {
	margin: 0 0 16px;
}


/* =========================================
   ファーストビュー
========================================= */

.sw-hero {
	margin-bottom: 25px;
	padding: 22px;

	background:
		linear-gradient(
			135deg,
			#e6f6fd 0%,
			#f7fcfe 100%
		);

	border: 2px solid var(--water-blue);
	box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}

.sw-hero-inner {
	display: flex;
	align-items: center;
	gap: 28px;
}

.sw-hero-image {
	width: 47%;
}

.sw-hero-text {
	width: 53%;
}

.sw-hero-alert {
	display: inline-block;

	margin-bottom: 10px;
	padding: 6px 13px;

	background: var(--danger-red);
	color: #fff;

	font-size: 16px;
	font-weight: bold;
	border-radius: 3px;
}

.sw-hero-title {
	margin-bottom: 12px;

	color: #333;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5;
}

.sw-hero-title strong {
	color: var(--water-dark);
	font-size: 31px;
}

.sw-hero-point {
	margin-top: 15px;
	padding: 12px 15px;

	background: var(--warning-light);
	border-left: 6px solid var(--warning-yellow);

	color: #463b00;
	font-weight: bold;
}


/* =========================================
   画像予定枠
========================================= */

.sw-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	aspect-ratio: 3 / 2;
	padding: 20px;

	background:
		linear-gradient(
			135deg,
			#e4f4fb,
			#f4fbfe
		);

	border: 2px dashed #79b8d2;

	color: #496773;
	text-align: center;
}

.sw-image-placeholder strong {
	display: block;
	margin-bottom: 5px;

	color: var(--water-dark);
	font-size: 18px;
}


/* =========================================
   結論・定義
========================================= */

.sw-definition {
	margin: 25px 0;
	padding: 20px 22px;

	background: #fff;
	border: 3px solid var(--water-blue);
}

.sw-definition-title {
	margin-bottom: 7px;

	color: var(--water-dark);
	font-size: 21px;
	font-weight: bold;
}

.sw-definition strong {
	color: var(--water-dark);
}
/* =========================================
   目次
========================================= */

.sw-toc {
	margin: 25px 0 35px;
	padding: 18px 22px;

	background: var(--water-pale);
	border: 1px solid #a9d5e7;
}

.sw-toc-title {
	margin-bottom: 9px;

	color: var(--water-dark);
	font-size: 19px;
	font-weight: bold;
}

.sw-toc ol {
	margin: 0;
	padding-left: 25px;
}

.sw-toc li {
	margin: 4px 0;
}

.sw-toc a {
	color: var(--water-dark);
	text-decoration: underline;
}


/* =========================================
   基本説明
========================================= */

.sw-info-box {
	margin: 20px 0;
	padding: 17px 20px;

	background: var(--water-light);
	border-left: 6px solid var(--water-blue);
}

.sw-highlight {
	color: var(--water-dark);
	font-weight: bold;
}


/* =========================================
   注意ボックス
========================================= */

.sw-warning {
	margin: 22px 0;
	padding: 16px 18px;

	background: var(--warning-light);
	border: 2px solid var(--warning-yellow);
}

.sw-warning-title {
	margin-bottom: 6px;

	color: #594800;
	font-weight: bold;
	font-size: 18px;
}

.sw-danger {
	color: var(--danger-red);
	font-weight: bold;
}


/* =========================================
   使用場所
========================================= */

.sw-use-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;

	margin: 20px 0;
}

.sw-use-item {
	padding: 17px 10px;

	background: #fff;
	border: 1px solid #b9d7e3;
	border-top: 4px solid var(--water-blue);

	text-align: center;
	font-weight: bold;
}


/* =========================================
   画像＋文章
========================================= */

.sw-two-column {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 24px 0;
}

.sw-two-column-image {
	width: 56%;
}

.sw-two-column-text {
	width: 44%;
}


/* =========================================
   比較表
========================================= */
.sw-table-wrap {
	overflow-x: auto;
	margin: 22px 0;
}

.sw-compare-table {
	width: 100%;
	min-width: 650px;

	border-collapse: collapse;
}

.sw-compare-table caption {
	padding-bottom: 10px;

	font-weight: bold;
	text-align: left;
	color: var(--water-dark);
}

.sw-compare-table th,
.sw-compare-table td {
	padding: 11px 10px;

	border: 1px solid #8baeba;

	text-align: center;
	vertical-align: middle;
}

.sw-compare-table thead th {
	background: var(--water-blue);
	color: #fff;

	font-size: 18px;
}

.sw-compare-table tbody th {
	width: 20%;

	background: #eef5f8;
	color: #333;
	font-weight: bold;
}

.sw-good {
	color: var(--water-dark);
	font-weight: bold;
}


/* =========================================
   選び方
========================================= */

.sw-check-list {
	margin: 20px 0;
	padding: 0;

	list-style: none;
}

.sw-check-list li {
	position: relative;

	margin-bottom: 5px;
	padding: 11px 12px 11px 43px;

	background: #f5fbfd;
	border-bottom: 1px solid #d3e5ec;
}

.sw-check-list li:before {
	content: "✓";

	position: absolute;
	left: 15px;
	top: 9px;

	color: var(--water-blue);
	font-size: 21px;
	font-weight: bold;
}


/* =========================================
   2商品の導入
========================================= */

.sw-products-intro {
	margin: 25px 0;
	padding: 20px;

	background: var(--warning-light);
	border: 3px solid var(--warning-yellow);

	text-align: center;
}

.sw-products-intro strong {
	color: var(--danger-red);
	font-size: 23px;
}


/* =========================================
   商品カード
========================================= */

.sw-product-cards {
	display: flex;
	gap: 22px;

	margin: 25px 0;
}

.sw-product-card {
	width: 50%;
	padding: 15px;

	background: #fff;
	border: 1px solid #c7d6dc;
	box-shadow: 0 2px 7px rgba(0,0,0,0.06);
}

.sw-product-card.sonae {
	border-top: 7px solid var(--water-blue);
}

.sw-product-card.plabarrier {
	border-top: 7px solid #e5523e;
}

.sw-product-name {
	margin: 12px 0 5px;

	color: #222;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
}

.sw-product-catch {
	margin-bottom: 15px;

	color: var(--water-dark);
	font-weight: bold;
	text-align: center;
}

.sw-product-card ul {
	margin: 15px 0 18px 22px;
	padding: 0;
}

.sw-product-card li {
	margin-bottom: 6px;
}


/* =========================================
   ボタン
========================================= */

.sw-btn {
	display: block;

	margin-top: 15px;
	padding: 13px 12px;

	background: var(--cta-orange);
	color: #fff !important;

	font-size: 18px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;

	border-radius: 4px;
}

.sw-btn:hover,
.sw-btn:focus {
	opacity: 0.88;
}

.sw-btn-blue {
	background: var(--water-dark);
}


/* =========================================
   どちらを選ぶ？
========================================= */

.sw-choice {
	display: flex;
	gap: 18px;

	margin: 25px 0;
}

.sw-choice-item {
	width: 50%;
	padding: 18px;

	background: #f8fcfe;
	border: 2px solid #a9d5e7;

	text-align: center;
}

.sw-choice-arrow {
	margin: 7px 0;

	color: var(--danger-red);
	font-size: 27px;
	font-weight: bold;
}

.sw-choice-name {
	color: var(--water-dark);
	font-size: 23px;
	font-weight: bold;
}


/* =========================================
   FAQ
========================================= */

.sw-faq {
	margin: 20px 0;
}

.sw-faq-item {
	margin-bottom: 14px;

	border: 1px solid #b8d2dd;
	background: #fff;
}

.sw-faq-q {
	padding: 12px 15px;

	background: #e8f6fc;

	color: var(--water-dark);
	font-size: 18px;
	font-weight: bold;
}

.sw-faq-a {
	padding: 14px 16px;
}

/* =========================================
   最終CTA
========================================= */

.sw-final-cta {
	margin-top: 45px;
	padding: 25px;

	background:
		linear-gradient(
			135deg,
			#e7f7fd 0%,
			#f8fdff 100%
		);

	border: 3px solid var(--water-blue);

	text-align: center;
}

.sw-final-cta-title {
	margin-bottom: 10px;

	color: var(--water-dark);
	font-size: 26px;
	font-weight: bold;
}

.sw-final-buttons {
	display: flex;
	gap: 15px;

	max-width: 760px;
	margin: 20px auto 0;
}

.sw-final-buttons a {
	width: 50%;
}


/* =========================================
   スマートフォン
========================================= */

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

	.sw-guide {
		padding: 0 10px 35px;
		font-size: 16px;
	}

	.sw-guide h1 {
		font-size: 25px;
	}

	.sw-guide h2 {
		margin-top: 34px;
		font-size: 21px;
	}

	.sw-guide h3 {
		font-size: 19px;
	}

	.sw-hero {
		padding: 13px;
	}

	.sw-hero-inner,
	.sw-two-column,
	.sw-product-cards,
	.sw-choice,
	.sw-final-buttons {
		display: block;
	}

	.sw-hero-image,
	.sw-hero-text,
	.sw-two-column-image,
	.sw-two-column-text,
	.sw-product-card,
	.sw-choice-item,
	.sw-final-buttons a {
		width: 100%;
	}

	.sw-hero-text,
	.sw-two-column-text {
		margin-top: 16px;
	}

	.sw-hero-title {
		font-size: 21px;
	}

	.sw-hero-title strong {
		font-size: 26px;
	}

	.sw-use-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.sw-product-card,
	.sw-choice-item {
		margin-bottom: 18px;
	}
	.sw-final-buttons a {
		margin-top: 10px;
	}

}