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

h1 {
  margin-bottom: 2.25em;
  font-family: var(--f_shippori);
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 600;
  line-height: 1.25;
}
/****************************************************************************************/
#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;
  /*	font-family: hannari-mincho, "EB Garamond", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
}
#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; /* afb0b1 */
  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: #ba2279;
  --c_lightpink: #edcfdf;
  --c_cream: #fcfae2;
  --c_mint: #e9f0e2;
  --c_lightgreen: #c6d8b7;
  --c_green: #88b371;
  --c_blue: #6085bc;
  --c_orange: #f59423; /* #f59423, --orange, --c-btn-inquiry と統合 */
  --c_red: #aa0000; /* #aa0000, red と統合 */

  /* レイアウト関連変数 (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 {
  /* ここに基本的なhtml, bodyのスタイルがあれば追加 */
}

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;
}

/* 赤色テキスト */
.color-red {
  color: var(--c_red);
}

/* 改行を許可しない */
.nowrap span {
  white-space: nowrap;
}

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

.price-regular {
  grid-area: price-regular;
  padding-top: 1.5em;
}

.price-earlybird {
  grid-area: price-earlybird;
  color: var(--c_pink);
}

.price-regular::before {
  content: "通常価格";
}

.price-earlybird::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: 15px 40px; /* 内側の余白 */
  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: 0.7em; /* 親要素のフォントサイズに対する相対的なサイズ */
  color: rgba(255, 255, 255, 0.8); /* 白より少し薄い色で、目立ちすぎないように */
  display: block; /* 常にブロック要素として新しい行に表示 */
  margin-bottom: 2px; /* メインテキストとの間の余白 */
  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; /* PCでのフォントサイズ */
}

@media (max-width: 768px) {
  #g-footer-estimate .cta-button {
    font-size: 18px; /* スマホでのフォントサイズ */
  }

  .general-button {
    margin-inline: auto;
    margin-top: 4rem;
  }
}

.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) */
/* ======================================================================== */
.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%;
  margin-top: 4rem;
  text-align: right;
}

/* ======================================================================== */
/* 6. アコーディオン・FAQ (Accordion / FAQ) */
/* ======================================================================== */
.details-summary {
  padding-right: 3em;
  padding-bottom: 1em;
  position: relative;
  display: block;
  border-bottom: 2px solid var(--c_mint);
  font-weight: 600;
}

.details-summary p {
  display: inline;
}

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

.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_black);
  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;
}

.details[open] .details-content {
  display: block;
  color: #555;
}

/* Accordion */
.accordion {
  margin-inline: auto;
  max-width: var(--w_max);
}

/* ======================================================================== */
/* 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にない) */
  column-gap: 80px;
  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;
  text-align: center; /* 中央寄せ */
  background-color: #faf3f7;
  padding-block: 6rem;
  line-height: 1.85; /* 短縮化されたline-heightを維持 */
  text-align: justify; /* 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%; /* flex-basisと重複するが、元のコードに合わせる */
}

#g-footer-estimate .contents .text {
  flex-basis: auto;
  font-size: 20px; /* PCでのフォントサイズ */
}

#g-footer-estimate .estimate-btn {
  width: 100%;
  aspect-ratio: 9/1;
  font-size: 28px; /* PCでのフォントサイズ */
}

/* フッターのカタログセクション */
#g-footer-catalog {
  grid-area: catalog;
  padding-inline: 8%; /* メディアクエリから移動 */
}

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

/* フッターのサンプルセクション */
#g-footer-sample {
  grid-area: sample;
}

#g-footer-sample .text {
  text-align: center; /* メディアクエリから移動 */
  margin-bottom: 20px; /* メディアクエリから移動 */
}

/* フッターのSRセクション */
#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; /* PCでの幅 */
  height: 400px; /* PCでの高さ */
}

/* フッターのInstaセクション (HTMLにはあるがgrid-template-areasに定義なし) */
#g-footer-insta {
  grid-area: insta; /* このエリアは現在の#g-footerのgrid-template-areasに存在しません */
}

/* フッター内のbook-cover */
#g-footer .book-cover {
  width: 65%; /* メディアクエリから移動 */
}

/* フッター内のgeneral-button */
#g-footer .general-button {
  margin-top: 0; /* メディアクエリから移動 */
}

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

  /* Footer */
  #g-footer {
    column-gap: 0; /* カラムギャップをリセット */
    row-gap: 120px; /* 行ギャップを調整 */
    padding-inline: 3%; /* 左右のパディング */
    grid-template-columns: 1fr; /* 1列にする */
    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; /* flex-basisを自動調整に戻す */
  }

  #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%; /* モバイルでも同じ値なので、PCのセレクタにまとめた方が良い */
  }

  #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%; /* スマホで100%幅 */
    height: 200px; /* スマホでの高さ（適宜調整） */
  }
}

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