/****************************************************************************************/
h1,
h2,
h3,
[grad-font],
#top .texts h1,
#top .button:not(:last-child) {
	font-family: var(--f_normal);
}
/****************************************************************************************/
h3 {
	font-weight: normal;
	line-height: 4.4rem;
}

h1 {
	margin-top: 20px;
	margin-bottom: 60px;
	font-family: var(--f_shippori);
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	letter-spacing: 0.05em;
}
/****************************************************************************************/
#top .texts h1 {
	text-align: left;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	display: inline-block;
}

#top .texts h2 {
	text-align: left;
}
/*******************************************/
#top .button {
	display: inline-block;
}
#top .button:not(:last-child) {
	margin-right: 18px;
}
#top .button a {
	padding-top: 0;
}
#top .button a:not(:hover) {
	background-color: white;
}
/****************************************************************************************/
#grad-menu {
	text-align: center;
	background-color: white;
	opacity: 0;
}
#grad-menu[fixed="true"] {
	left: 0;
	right: 0;
	position: fixed;
	z-index: 1;
	transition:
		background-color 600ms cubic-bezier(0.19, 1, 0.22, 1),
		margin-top 600ms cubic-bezier(0.19, 1, 0.22, 1);
}
#grad-menu[fixed-top="true"] {
	background-color: #eebbcb;
}
#grad-menu[fixed-top="false"] {
	position: absolute;
}
#grad-menu[fixed-top="false"],
#grad-menu[scroll="up"] {
	margin-top: 0 !important;
}

#grad-menu li {
	display: inline-block;
}

#grad-menu li a {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	text-decoration: none;
	display: block;
	transition: border-color 600ms cubic-bezier(0.19, 1, 0.22, 1);
}
#grad-menu li:not([selected]) a {
	border-color: transparent;
}
#grad-menu li:not([selected]) a:hover {
	border-color: #dfdfdf;
}
/****************************************************************************************/
#form {
	padding-top: 73px; /* 226 */
}

#form form ::placeholder {
	color: #bbb;
}
/*******************************************/
#form .required,
#form .required-desc {
	color: #aa0000;
}

#form .required-desc {
	padding-right: 8px;
	text-align: right;
}

#form .required {
	font-size: 2.1rem;
	font-weight: bold;
	display: inline-block;
}
/*******************************************/
#form form .table {
	width: 100%;
}

#form form .table > * > * {
	border: 1px solid #afb0b1;
}

#form form .table > * > *:first-child {
	padding-right: 15px !important;
}

#form form .table > * > *:first-child > div {
	display: inline;
}
/*******************************************/
#form form .group > .table {
	border: 1px solid #afb0b1;
	border-width: 1px 0 0 1px;
}

#form form .group > .table > * > :first-child {
	line-height: 2.9rem;
}
/*******************************************/
#form form .table .table > * > * {
	border: none;
}
#form form .table .table > * > *:first-child {
	width: 188px;
}
/*
#form form .table .table > * > *:first-child {
	width: 267px;
	background-color: #f7f7f7;
	border-right-width: 0;
}
#form form .table .table > :last-child > * {
	border-bottom-width: 0;
}
#form form .table .table > * > :last-child {
	border-right-width: 0;
}
*/
/*******************************************/
#form form .item > :last-child {
	padding-left: 0 !important;
}
/*
#form form .item li {
	margin-left: 25px;
}

#form form .item label {
	cursor: pointer;
}

#form form .item input {
	margin-right: 6px;
}
*/
#form form .item > :last-child > * > * {
	min-width: 80px;
}

#form form .item > :last-child > * > :last-child {
	display: flex;
	align-items: center;
}

#form form .item label {
	cursor: pointer;
}

#form form .item input {
	margin-right: 6px;
}
#form form .item input[type="text"] {
	margin-left: 10px;
}
/*******************************************/
#form form .date > :last-child > * {
	display: inline-flex;
	align-items: center;
}

#form form .date > :last-child > * > :nth-child(n + 2) {
	margin-left: 10px;
}

#form form .date select {
	width: 97px;
}
#form form .date .year_month select {
	width: 159px;
}

#form form .date .error {
	display: inline-block;
}
/*******************************************/
/*
#form form .table li {
	display: inline-block;
}
#form form .table li > div {
	display: inline-block;
}
*/
/*******************************************/
#form form input[type="text"],
#form form input[type="number"],
#form form select,
#form form textarea {
	padding: 3px 3px 2px 5px;
	line-height: 2.3rem;
	border: 1px solid #c2c2c2;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
#form form input[type="text"],
#form form input[type="number"],
#form form textarea {
	width: 100%;
}
#form form input:focus,
#form form select:focus,
#form form textarea:focus {
	border-color: dodgerblue;
	outline: none;
}
/*******************************************/
#form form .select {
	display: inline-block;
	position: relative;
}
#form form .select:after {
	content: "";
	top: 38%;
	right: 11px;
	border-top: 10px solid #333;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	position: absolute;
}
#form form select {
	padding-right: 35px;
	background-color: transparent;
	position: relative;
	z-index: 1;
}
/*******************************************/
#form form textarea {
	max-width: 874px;
}
/*******************************************/
#form form input[type="radio"],
#form form input[type="checkbox"] {
	cursor: pointer;
}
/*******************************************/
#form form .error {
	color: red;
}
#form form [error="false"] .error {
	display: none !important;
}

#form form [error="true"] input,
#form form [error="true"] select {
	border-color: #ff8c8c;
	background-color: #fff9fa;
}
/*******************************************/
#form form .submit {
	margin-top: 80px;
}

#form form .submit .button {
	font-style: normal;
	cursor: pointer;
}
/*******************************************/
#form-hiddens {
	display: none;
}
/****************************************************************************************/
:not(.link-buttons) + .link-buttons {
	margin-top: 103px;
}

.link-buttons .content-area {
	border-top-style: solid;
	border-top-width: 1px;
}

.link-buttons .layout {
	text-align: center;
}

.link-buttons .layout > * {
	width: 100%;
	max-width: 1007px;
	display: inline-block;
}

.link-buttons .layout > * > * {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.link-buttons .layout > * > * > * {
	width: 50%;
}
/*******************************************/
.grad-link-button + .grad-link-button {
	margin-left: 20px;
}

.grad-link-button [nh-button] {
	max-width: 453px;
}
/*
.grad-link-button [nh-button] {
	font-family: hannari-mincho, "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 2.7rem;
}
*/
/****************************************************************************************/
#instagram p {
	text-align: center;
}

#instagram .button .id {
	margin-left: 15px;
	letter-spacing: 0.1rem;
}
/****************************************************************************************/
#form-links .title span {
	font-family:
		hannari-mincho, "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
		"Hiragino Mincho ProN", "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝",
		"ＭＳ 明朝", serif;
	font-size: 3.7rem;
}
/****************************************************************************************/
#faq-link .content-area {
	border-top-style: solid;
	border-top-width: 1px;
}
/****************************************************************************************/
#form-complete h1 {
	margin-bottom: 48px;
	line-height: 2.5rem;
}

#form-complete .texts {
	text-align: center;
}

#form-complete .texts .container {
	text-align: left;
	display: inline-block;
}

#form-complete .texts h2 {
	text-align: center;
}

#form-complete .texts p {
	margin-top: 35px;
}

#form-complete .link {
	margin-top: 50px;
	text-align: center;
}
/****************************************************************************************/
#grad-form-error .content-area-container {
	text-align: center;
}

#grad-form-error .content-area {
	display: inline-block;
}

#grad-form-error .header {
	font-size: 1.7rem;
	color: red;
}

#grad-form-error .text {
	margin-top: 40px;
	line-height: 3.1rem;
	text-align: left;
}

#grad-form-error .contact {
	margin-top: 40px;
}

#grad-form-error .contact .tel {
	margin-top: 40px;
	line-height: 3.4rem;
}
#grad-form-error .contact .tel .time {
	margin-top: 6px;
	line-height: 2.3rem;
}
/****************************************************************************************/
.grad-accordion {
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
}

.grad-accordion .accordion {
	border: 1px solid #7f7f7f;
	overflow: hidden;
}
.grad-accordion .accordion:last-child {
	border-bottom: 1px solid #7f7f7f;
}

.grad-accordion .accordion .header {
	display: flex;
	align-items: center;
	cursor: pointer;
}
.grad-accordion .accordion .header > :first-child {
	flex-grow: 1;
}
.grad-accordion .accordion .header .plus-minus {
	padding-left: 0;
}

.grad-accordion .accordion .body {
	overflow: hidden;
	transition: height 600ms cubic-bezier(0.19, 1, 0.22, 1);
}
.grad-accordion [opened="false"] .body {
	height: 0;
}
.grad-accordion .accordion .body > * {
	border-top-style: solid;
	border-top-width: 1px;
}

.grad-accordion .accordion .body ul {
	margin-left: 24px;
	list-style: disc;
}
/****************************************************************************************/
/*
#top .buttons .button:last-child {
	display: none;
}
*/
#top .texts {
	text-shadow: 3px 2px 3px #333;
	color: white;
}

/* 以下追加 */
/* ======================================================================== */
/* 0. CSS変数 (Variables) */
/* ======================================================================== */
:root {
	/* フォント関連 */
	--f_normal: "Noto Sans JP", sans-serif;
	--f_shippori: "Shippori Mincho B1", serif;
	--f_zenkaku: "Zen Kaku Gothic New", sans-serif;
	--f_en: "Roboto Condensed", sans-serif;

	/* カラーパレット */
	--c_black: #333;
	--c_pink: rgb(215, 123, 150);	/* rgb(215, 123, 150) #ba2279 */
	--c_deeppink: rgb(198, 47, 124);
	--c_lightpink: #edcfdf;
	--c_cream: #fcfae2;
	--c_mint: #e9f0e2;
	--c_lightgreen: #c6d8b7;
	--c_green: #88b371;
	--c_blue: #6085bc;
	--c_orange: #f59423;
	--c_red: #aa0000;

	/* レイアウト関連変数 (PCデフォルト値) */
	--header-margin: 148px; /* #main > * の margin-top と .jump-point の padding-top/margin-top に使用 */
	--h_header: 198px; /* .jump-point の padding-top/margin-top に使用 */
	--w_max: 1200px; /* サイトの最大幅 */
	--section_margin: 3rem; /* セクション間のマージン */
	--section_padding: 145px 0 134px; /* セクションの上下パディング */

	/* その他デザイン変数 */
	--box-shadow:
		0.8rem 0.8rem 1.2rem rgba(0, 0, 0, 0.05), -0.8rem -0.8rem 1.2rem #fff;
	--swiper-navigation-size: 40px;
	--swiper-theme-color: var(--c_black);
	--card_radius: 4px;
}
/* -------------------------------------------------------------------------- */
/* 0-1. レスポンシブ用CSS変数 (Variables for Responsive) */
/* -------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	:root {
		--header-margin: 48px;
		--h_header: 108px;
		--w_max: 768px; /* モバイルでの最大幅 */
		--swiper-navigation-size: 20px;
		--section_padding: 60px 0 48px;
	}
}

/* ======================================================================== */
/* 1. 全体共通・基本スタイル (General / Base Styles) */
/* ======================================================================== */
html,
body {
	scroll-behavior: smooth;
}

footer {
	margin-top: 0;
}

#main {
	overflow: hidden;
	font-family: var(--f_normal);
	line-height: 1.85;
	letter-spacing: 0.05em;
}

/* mainの子要素のみに上部マージン */
#main > *:first-child {
	margin-top: var(--header-margin);
}

#main img {
	width: 100%;
	height: auto;
}

#main a:hover {
	text-decoration: none;
}

#main .container {
	margin-inline: auto;
	width: 100%;
	max-width: var(--w_max);
}

#main h2.section_title {
	margin-bottom: 1.5em;
	font-family: var(--f_shippori);
	font-weight: 600;
}

.jump-point {
	padding-top: var(--h_header);
	margin-top: calc(-1 * var(--h_header));
}

/* ======================================================================== */
/* 2. 汎用ユーティリティクラス (Utility Classes) */
/* ======================================================================== */
/* 二重打ち消し線 */
.double-strikethrough {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.double-strikethrough::before,
.double-strikethrough::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--c_red);
	z-index: 1;
	margin-left: 0.5em;
}

.double-strikethrough::before {
	top: 60%;
}

.double-strikethrough::after {
	top: calc(60% + 3px);
}

/* 二重打ち消し線 */
.strike-through {
	text-decoration: line-through;
	text-decoration-color: var(--c_red);
	text-decoration-style: double;
	text-decoration-thickness: 1px;
}

.color-red {
	color: var(--c_red);
}

.nowrap span {
	white-space: nowrap;
}

/* 右寄せ */
#main .align-right {
	text-align: right;
}

.price-regular {
	grid-area: price-regular;
}
.price-earlybird {
	color: var(--c_pink);
	grid-area: price-earlybird;
}
.price-superearlybird {
	padding-top: 1.5em;
	color: var(--c_deeppink);
	grid-area: price-superearlybird;
}

.price-regular::before {
	content: "通常価格";
}
.price-earlybird::before {
	content: "早割価格";
}
.price-superearlybird::before {
	content: "超早割価格";
}

.price {
	font-family: var(--f_en);
	font-weight: 300;
	font-size: 18px;
}

.price::before {
	margin-right: 0.85em;
	font-size: 12px;
	font-weight: 400;
}

.price::after {
	content: " 税込";
	font-size: 10px;
	font-weight: 400;
	opacity: 0.65;
}
.product-name {
	font-family: var(--f_en);
	font-weight: 500;
	margin-bottom: 0;
	font-size: 2.25em;
}

.product-name span {
	font-family: var(--f_normal);
	font-size: max(10px, 0.65em);
}

/* ======================================================================== */
/* 3. ボタン・UI要素 (Buttons / UI Elements) */
/* ======================================================================== */
/* ======================================================================== */
/* CTAボタン (Call to Action Button) */
/* ======================================================================== */
.cta-button {
	display: inline-flex; /* 内部要素をFlexboxで配置 */
	flex-direction: column; /* 縦並びにする */
	align-items: center; /* 水平方向の中央寄せ */
	justify-content: center; /* 垂直方向の中央寄せ (もしボタンの高さがコンテンツより高い場合) */
	background-color: var(--c_pink); /* 背景色 */
	color: #fff; /* 文字色 */
	padding: 25px 50px; /* 内側の余白 */
	border-radius: 100vh; /* 非常に大きな値で角丸（カプセル型） */
	text-decoration: none; /* 下線をなくす */
	font-weight: bold; /* 太字 */
	margin-top: 15px; /* 上部のマージン */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 影 */
	transition: all 0.3s ease; /* ホバーアニメーション */
	line-height: 1.2; /* 行の高さを調整（元が1.85と大きめだったので見直し） */
	white-space: nowrap; /* ボタン内のテキストが改行しないように（もし必要なら） */
}

.cta-button:hover {
	background-color: #d13a91; /* ホバー色 */
	transform: translateY(-2px); /* 少し上に浮き上がる */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 影を強調 */
}

.cta-button__sub-text {
	font-size: max(1rem, 0.7em);
	color: rgba(255, 255, 255, 0.8);
	display: block;
	margin-bottom: 0.85em;
	line-height: 1;
}

.cta-button__main-text {
	font-size: 1.2em; /* サブテキストより大きく、目立つように */
	line-height: 1; /* メインテキストの行高を密にする */
}

#g-footer-estimate .cta-button {
	width: 100%;
	aspect-ratio: 9/1;
	font-size: 28px;
}

@media (max-width: 768px) {
	/* .general-button {
		margin-inline: auto;
		margin-top: 4rem;
	} */

	#g-footer-estimate .cta-button {
		font-size: 18px;
		aspect-ratio: auto;
	}
}

.general-button {
	display: inline-block;
	padding: 12px 25px;
	border: 1px solid var(--c_pink);
	color: var(--c_pink);
	background-color: white;
	border-radius: 50px;
	text-decoration: none;
	font-size: 16px;
	transition: all 0.3s ease;
}

.general-button:hover {
	color: #fff;
	background-color: var(--c_pink);
}

/* ======================================================================== */
/* 4. 画像・表紙関連 (Image / Cover Styles) */
/* ======================================================================== */
/* カタログの表紙 */
.book-cover {
	aspect-ratio: 50/71; /* 縦横比固定 */
	position: relative;
	box-shadow:
		10px 15px 22px -5px rgba(0, 0, 0, 0.2),
		0 0 2px rgba(0, 0, 0, 0.15);
	border-radius: var(--card_radius);
	overflow: hidden;
	transform: rotate(-5deg); /* 画像を傾ける */
}

.book-cover:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* 光沢感を出すグラデーション */
	background: linear-gradient(
		-90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.1) 80%,
		rgba(255, 255, 255, 0.4) 94%,
		rgba(255, 255, 255, 0.5) 96%,
		rgba(255, 255, 255, 0) 100%
	);
}

.book-cover-image {
	display: block;
	width: 100%;
	border-radius: var(--card_radius);
	transform-origin: center;
}

/* ======================================================================== */
/* 5. レイアウト・構造要素 (Layout / Structural Elements) */
/* ======================================================================== */
.text-link {
	position: relative;
	display: inline-block;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	color: var(--c_blue);
	margin-top: 0.25em;
	font-size: 1.1em;
}

.text-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px; /* 下線の太さ */
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.text-link:hover::after {
	transform: scaleX(1);
}

.marker {
	background-image: linear-gradient(
		transparent 60%,
		/* 上60%は透明 */ #ffde54 60% /* 下40%は黄色 */
	);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#deco {
	z-index: 2; /* 通常のコンテンツより前面に */
}

.del {
	position: relative;
}

.del:after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	margin-top: -0.25em;
	border-bottom: double 5px rgba(0, 0, 0, 0.25);
	position: absolute;
	left: 0;
	top: 50%;
}

/* 親要素に対する子要素の絶対配置 (右上角) */
.mark-parent {
	position: relative;
}

.mark-child {
	position: absolute;
	top: 0;
	right: 0;
	width: 30% !important;
	height: auto;
}

/* パンくずリスト */
.breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb li {
	display: inline;
	list-style: none;
	font-weight: bold;
}

.breadcrumb li:after {
	content: ">";
	padding: 0 0.2em;
	color: #555;
}

.breadcrumb li:last-child:after {
	content: ""; /* 最後の要素のセパレータを非表示 */
}

.breadcrumb li a {
	text-decoration: none;
	color: #52b5ee; /* リンク色 */
}

.breadcrumb li a:hover {
	text-decoration: underline;
}

.main-menu button span.subtext {
	font-size: 1rem;
}

#g-footer .button,
#main .button {
	max-width: var(--w_max);
	margin-right: 3%;
	text-align: right;
}

#main .button {
	margin-top: 4rem;
}

.flow-container {
	margin-inline: auto;
	max-width: 768px;
}
.step {
	margin-top: 10rem;
	border: 1px solid var(--c_green);
}
/* ======================================================================== */
/* 6. アコーディオン・FAQ (Accordion / FAQ) */
/* ======================================================================== */
.accordion {
	margin-inline: auto;
	max-width: var(--w_max);
}

.details,
.summary {
	margin-top: 5rem;
	margin-inline: auto;
	border: 1px solid var(--c_green);
}

.details-summary {
	padding: 1em;
	background-color: var(--c_mint);
	color: var(--c_green);
	display: flex;
	align-items: center;
	position: relative;
}

.details-summary:hover {
	cursor: pointer;
	opacity: 0.65; /* ホバー時の透明度 */
}

#flow .summary-header {
	font-size: 20px;
}

#flow .summary-header-text {
	margin-left: 2em;
	padding-left: 8rem;
	position: relative;
}

#flow .summary-header-text::before {
	content: attr(data-number);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	color: var(--c_lightgreen);
	font-size: 3rem;
	font-weight: 900;
}

.details-summary .mark {
	position: absolute;
	top: 37%;
	right: 5%;
	width: 18px;
	height: 18px;
	transform-origin: center center;
	transition-duration: 0.2s;
}

.details-summary .mark:before,
.details-summary .mark:after {
	content: "";
	background-color: var(--c_green);
	border-radius: 10px;
	width: 18px;
	height: 4px;
	position: absolute;
	top: 7px;
	left: 0;
	transform-origin: center center;
}

.details-summary .mark:before {
	width: 4px;
	height: 18px;
	top: 0;
	left: 7px;
}

.details-summary.is-active .mark {
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.details-summary.is-active .mark:before {
	content: none;
}

.details-summary::-webkit-details-marker {
	display: none; /* デフォルトのマーカーを非表示 */
}

.details-content {
	display: none;
	padding-block: 1%;
	line-height: 1.85;
	letter-spacing: 0.05em;
}

.step-contents,
.details[open] .details-content {
	padding: 2.5em 3em;
	display: block;
}

:is(.step-contents, .details[open] .details-content) div {
	margin-bottom: 3em;
}

:is(.step-contents, .details[open] .details-content) p {
	margin-bottom: 0.85em;
}

/* ======================================================================== */
/* 7. フッター関連 (Footer Specific Styles) */
/* ======================================================================== */
#g-footer {
	max-width: var(--w_max);
	margin: 60px auto;
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2列 */
	grid-template-areas:
		"estimate estimate" /* 1行目全体 */
		"catalog sample" /* 2行目 */
		"sr sr" /* 3行目全体 (instaは現在のgrid-template-areasにない) */
		"insta insta"; /* インスタグラムセクション (HTMLにはあるがgrid-template-areasに定義なし) */
	row-gap: 160px;
	justify-content: flex-start; /* グリッドアイテムを左寄せ */
	letter-spacing: 0.05em;
}

/* フッター内の画像 */
#g-footer img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* フッター内のh2 */
#g-footer h2 {
	font-family: var(--f_shippori);
	margin-bottom: 0.5em;
	font-weight: 600;
	font-size: 24px; /* モバイルのメディアクエリ外で定義 */
	text-align: center; /* モバイルのメディアクエリ外で定義 */
}

/* フッター内のリンクホバー */
#g-footer a:hover {
	text-decoration: none;
}

/* フッター内のFlexbox要素 */
#g-footer .flex {
	margin-top: 2em;
	display: flex;
	align-items: flex-end;
	gap: 50px;
}

/* フッター内のテキスト */
#g-footer .text p {
	margin-bottom: 0.85em;
}

/* フッター内の電話番号 */
#g-footer .tel-number a {
	font-size: 1.25em;
	font-weight: 600;
	color: var(--c_pink);
}

/* フッターのお見積りセクション */
#g-footer-estimate {
	grid-area: estimate;
	background-color: #faf3f7;
	padding-block: 6rem;
	line-height: 1.85;
	text-align: justify;
	padding-inline: 5%;
}

#g-footer-estimate h2 {
	margin-bottom: 0.85em;
	font-size: 4rem;
	font-weight: 600;
}

#g-footer-estimate .contents {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

#g-footer-estimate .contents .img {
	flex-basis: 15%;
	width: 15%;
}

#g-footer-estimate .contents .text {
	flex-basis: auto;
	font-size: 20px;
}

#g-footer-estimate .estimate-btn {
	width: 100%;
	aspect-ratio: 9/1;
	font-size: 28px;
}

#g-footer-catalog {
	grid-area: catalog;
	padding-inline: 8%;
}

#g-footer-catalog .paper {
	margin-top: 24px;
}

#g-footer-sample {
	grid-area: sample;
	padding-inline: 8%;
}

#g-footer-sample .text {
	text-align: center;
	margin-bottom: 20px;
}

#g-footer-sr {
	grid-area: sr;
}

#g-footer-sr .contents {
	margin-top: 2em;
	display: grid;
	grid-template-rows: repeat(2, 200px);
	grid-template-areas:
		"building text map"
		"building store map";
	column-gap: 16px;
}

#g-footer-sr .text {
	grid-area: text;
}

#g-footer-sr .map {
	grid-area: map;
	margin-top: 16px;
}

#g-footer-sr .img-building {
	grid-area: building;
}

#g-footer-sr .img-store {
	grid-area: store;
}

#g-footer-sr .map iframe {
	width: 600px;
	height: 400px;
}

#g-footer-insta {
	grid-area: insta;
	padding: 5%;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
}

#g-footer-insta a {
	transition: all 0.5s;
}

#g-footer-insta a:hover {
	opacity: 0.5;
}

#g-footer-insta h2 {
	line-height: 1.25;
}

#g-footer-insta img {
	max-width: 200px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

#g-footer-insta .insta-logo {
	margin-top: 16px;
}

#g-footer .book-cover {
	width: 65%;
}

#g-footer .general-button {
	margin-top: 0;
}

.mailaddress-img {
	display: inline-block;
	width: auto !important;
}

/* ======================================================================== */
/* 8. レスポンシブスタイル (Responsive Styles) */
/* ======================================================================== */
@media only screen and (max-width: 768px) {
	.main-item img {
		width: 100%;
	}

	#g-footer {
		column-gap: 0;
		row-gap: 120px;
		padding-inline: 3%;
		grid-template-columns: 1fr;
		grid-template-areas:
			"estimate"
			"catalog"
			"sample"
			"sr"
			"insta";
	}

	#g-footer-estimate h2 {
		font-size: 2.5rem;
	}

	#g-footer-estimate .contents {
		flex-direction: column;
		gap: 20px;
	}

	#g-footer-estimate .contents .img {
		width: 30%;
		flex-basis: auto;
	}

	#g-footer-estimate .contents .text {
		font-size: 16px;
	}

	#g-footer-estimate .estimate-btn {
		font-size: 18px;
	}

	#g-footer-catalog .flex {
		flex-direction: column;
		align-items: center;
	}

	#g-footer .book-cover {
		width: 65%;
	}

	#g-footer-sr .contents {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"building text"
			"building store"
			"map map";
	}

	#g-footer-sr .map iframe {
		width: 100%;
		height: 200px;
	}

	#g-footer-insta {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0;
	}

	#g-footer-insta .insta-logo {
		margin-top: 16px;
	}

	#g-footer .general-button {
		margin-top: 1rem;
	}

	.details[open] .details-content {
		padding: 1.5em 2em;
		display: lock;
	}

	.cta-button {
		width: 100%;
	}

	#faq .summary-header-text {
		margin-left: 0.85em;
		margin-right: 2.25em;
	}

	.step-contents,
	.details[open] .details-content {
		padding: 1.5em 1em;
	}

	#flow .summary-header-text {
		margin-left: 1em;
	}
}

@media only screen and (min-width: 769px) {
	#main > * {
		margin-bottom: 120px;
	}
}