/* 左右の余白部分に白背景と縦線を付ける */
main::before,
main::after {
  content: '';
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: calc((100% - 1400px) / 2);
  background-color: #ffffff;
  z-index: 0; /* 背景専用にする */
  box-sizing: border-box;
}

/* 左側の余白に縦線 */
main::before {
  left: 0px;
  outline: 1px solid #ccc; /* 左の縦線として表示 */
  outline-offset: 0px; /* 左に少しずらしてコンテナ境界に合わせる */
}

/* 右側の余白に縦線 */
main::after {
  right: 0px;
  outline: 1px solid #ccc; /* 左の縦線として表示 */
  outline-offset: 0px; /* 左に少しずらしてコンテナ境界に合わせる */
}

/* すべてのulの・を非表示にしている */
ul {
  list-style: none;
  padding-left: 0;
}

section {
  margin-bottom: 5rem !important;
}

/* top以外のsectionを横に並べる～～ */
/* section-blocks共通 */
.section-blocks {
  flex: 1;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

/* 見出し */
.section-title {
  background-color: #f8f8f8;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 10em;
  max-width: 18.75em; /* これ以上は広がらない */
  padding-top: 2em;
  width: 100%; /* 画面に応じて可変 */
  height: 20rem;
  position: relative;
  z-index: 1;
}

.section-title h2 {
  align-items: center;
  margin: 0 1.5em;
  font-size: 1.5rem;
}

/*見出しの英語部分*/
.vertical-label {
  background-color: #10627c; /* 背景色 */
  color: #ffffff; /* 文字色 */
  display: inline-block; /* 背景を文字幅に合わせる */
  font-size: 0.6rem;
  letter-spacing: 0.5em; /* ←文字間隔を調整 */
  text-orientation: sideways; /* 横文字を回転させず横向きのまま配置 */
  align-self: flex-start;
  padding: 0.5em 0;
}

/* 偶数 → 見出し左 */
.section-blocks:nth-child(even) {
  flex-direction: row;
}

/* 偶数の見出しの英文*/
.section-blocks:nth-of-type(even) .vertical-label {
  margin-right: 3em;
}

/* 偶数枠線左側はなし */
.section-blocks:nth-of-type(even) .section-title {
  border-left: none; /* 壁側ボーダー消す */
  border-right: 1px solid #ccc; /* 内側ボーダー残す */
  border-radius: 0 8px 8px 0; /* 左角なし、右角丸 */
  margin-left: calc((1400px - 100vw) / 2); /* 左側の余白分を相殺 */
  min-width: calc((100vw - 1400px) / 2 + 15rem); /* 左側の余白分を相殺 */
}

/* 奇数 → 見出し右 */
.section-blocks:nth-child(odd) {
  flex-direction: row-reverse;
}

/* 奇数の見出し*/
.section-blocks:nth-of-type(odd) .section-title {
  justify-content: left;
}

/* 奇数枠線右側はなし */
.section-blocks:nth-of-type(odd) .section-title {
  border-left: 1px solid #ccc; /* 内側ボーダー残す */
  border-right: none; /* 壁側ボーダー消す */
  border-radius: 8px 0 0 8px; /* 左角丸、右角なし */
  margin-right: calc((1400px - 100vw) / 2 + 0.5rem); /* 右側の余白分を相殺 */
  min-width: calc((100vw - 1400px) / 2 + 15rem); /* 右側の余白分を相殺 */
}

/* ～～top以外のsectionを横に並べる */
/* 見出し以外の２つのブロックを横に並べる */
.about-wrapper {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-grow: 1;
}

/*　見出しを縦に　*/
.section-title {
  writing-mode: vertical-rl; /* 右から左に縦書き */
  text-orientation: upright; /* 文字を正立させる */
  font-size: 0.9rem;
  letter-spacing: 0.2em; /* 少し間隔を空けると読みやすい */
}

/* top~~ */
.catch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(1rem, 2vw, 2.5rem);
  font-weight: 600;
  max-height: 100vh; /* 背景と同じ高さまで許容 */
  line-height: 2;
  letter-spacing: 0.2em;
  color: #fff;
  z-index: 2;
  display: inline-block;
  white-space: nowrap; /* 折り返し禁止 */
  margin: 0;
}

/* 各行に座布団をかける */
.catch-line {
  display: inline-block; /* 行幅に合わせて座布団 */
  background-color: rgba(16, 98, 124, 0.7);
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  max-width: 100%; /* はみ出し防止 */
  word-break: break-word; /* 長い文字は折り返す */
  line-height: 1.2; /* 行間調整 */
}

/* 上下のズレは transform のみで */
.line-up {
  transform: translateY(-0.8em);
}

.line-down {
  transform: translateY(0.2em);
}

#top {
  max-width: none;
}

main > #top .top-image {
  position: relative;
  z-index: 1;
}

.top-image img {
  width: 100%; /* 親幅いっぱいに広げる */
  max-width: none; /* 1400px制限を無効化 */
  height: auto;
  display: block;
}

.top-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
}

.top-text p {
  margin: 0.5rem 0; /* 段落の間隔 */
}

.top-text .copy {
  font-size: 1.8vw;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* ~~top */

/* about us~~ */
/* 施工内容img */
.about-text {
  padding-top: 1.5rem;
}

.about-text p {
  padding-top: 1rem;
  margin: 0;
}

.about-image img {
  border: 1px solid #fff; /* 内枠 */
  border-radius: 0.5rem; /* 角丸 */
  /* 外枠 */
  box-shadow: -1px 0 0 #ddd, /* 左側 */ 0 -1px 0 #ddd, /* 上側 */ 0 1px 0 #ddd; /* 下側 */
}

.map {
  border: 1px solid #fff; /* 内枠 */
  border-radius: 0.5rem; /* 角丸 */
  outline: 1px solid #ddd; /* 外枠 */
  margin-top: 2rem;
}

#about-us dl {
  margin: 0;
}

.coverage dt {
  padding-top: 1rem;
}

.coverage dd {
  padding: 0; /* デフォルトのインデントをリセット */
  margin-left: 0; /* 左の余白をなくす */
}

.inquiry {
  padding-bottom: 1.5rem !important;
}

/* ~~ about us*/

/* checkpoint~~ */
#checkpoint .about-wrapper {
  margin-top: 3rem;
}

#checkpoint .washing {
  border: 1px solid #dddddd;
  border-radius: 0.5em;
  margin: 0 4rem;
  padding: 0.5rem 1rem;
}

/* 塗り替え必要部分のimg */
.checkpoint-images {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 0.5em;
  margin-left: 8rem;
  position: relative; /* 擬似要素用 */
  padding: 2rem 0 2rem 0.25rem; /* 上下余白 */
}

/* 左側に背景色を画像の左1/3だけ被せる */
.checkpoint-images::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0; /* ← padding 部分も含めて背景を伸ばす */
  left: calc((1400px - 100vw) / 2 - 8rem); /* 8rem は親の margin-left を相殺 */
  width: calc((100vw - 1400px) / 2 + 8rem + 4.125rem); /* margin-left + 画像の1/3 */
  background-color: #f8f8f8;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  /* 枠線 */
  border-top: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  z-index: 0;
}

.checkpoint-img {
  display: flex; /* ラベルと画像を横並び */
  align-items: center; /* 上端で揃える */
  gap: 0.5rem;
  position: relative;
  z-index: 1; /* 擬似要素より上に */
}

.checkpoint-label {
  writing-mode: vertical-rl;
}

.checkpoint-img img {
  display: block;
  border-radius: 0.5rem;
  height: auto;
  border: 1px solid #fff;
  outline: 1px solid #ddd;
}

.checkpoint-text {
  padding-top: 3rem;
}

.checkpoint-text p,
h3 {
  padding-left: 0.5rem;
}

.checkpoint-text p {
  padding-bottom: 1rem;
}

.checkpoint-text h3 {
  font-weight: normal;
  margin-top: 2rem;
  background-color: #2b2b2b;
  color: #ffffff;
}

/* 料金プラン */
.plans {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 常に5列 */
  gap: 0.4rem;
  max-width: 80rem;
  margin-inline: auto;
  padding: 0 4rem;
  margin-top: 5rem;
}

.plan-Engrish {
  padding: 0.5em;
}

.name {
  font-size: 1.8rem;
  padding-bottom: 1.5rem;
  font-weight: 600;
}

.price {
  align-items: center;
  display: flex;
  justify-content: center;
}

/* 金額 */
.price strong {
  font-size: 4rem;
  letter-spacing: -0.05em;
  font-weight: normal;
}

/* 万円・税抜 */
.price-detail {
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
}

.notes {
  font-size: 1.3rem;
}

.notes li {
  padding: 0.5rem 0;
}

.plan {
  flex: 0 1 calc(20% - 0.25rem); /* 5列構成を意図的に指定 */
  border: 0.0625rem solid #ccc;
  border-radius: 1rem;
  padding: 0 1rem 1.5rem 1rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
  background-color: #f8f8f8;
  text-align: center;
}

.plan-type {
  border-top: 1px solid #ccc; /* 上線 */
  border-bottom: 1px solid #ccc; /* 下線 */
  padding: 1em 0; /* 内側の余白（線に文字がくっつかないように） */
}

.plan-type img {
  width: 1.25em;
}

.caption {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 1rem 4rem 0;
  max-width: 80rem;
  margin-inline: auto;
}

.caption-inner {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

/* ~~checkpoint */

/* company-message~~ */
/* about-wrapper 内のpタグが縦並びになるように */
#company-message .about-wrapper {
  display: block;
  flex: 1; /* 横幅を広げたい場合 */
  padding: 1rem 3rem 1rem 1rem;
}

#company-message p {
  margin-bottom: 1.5rem;
}

.signature {
  padding-top: 2rem;
  text-align: end;
}
/* ~~company-message */

/* corporate-profile~~ */
/* 空の枠線 */
#corporate-profile .about-wrapper {
  gap: 2rem !important; /* 要素間の隙間をなくす */
}

.empty {
  height: 32rem; /* 高さは親に揃える */
  border: 1px solid #ccc;
  border-left: none;
  border-radius: 0 1rem 1rem 0;
  background-color: #f8f8f8;
  box-sizing: border-box;
  z-index: 1;
  flex-grow: 1;
  margin-left: calc((1400px - 100vw) / 2); /* 左側の余白分を相殺 */
  min-width: calc((100vw - 1400px) / 2 + 15rem); /* 左側の余白分を相殺 */
}

/* 社名以下~~ */
.about-info {
  padding-top: 4rem;
  flex-grow: 0.5;
}

.about-info dl {
  display: flex;
  border-top: 1px solid #ccc; /* ← 上線を追加 */
  padding: 0.5em; /* 文字が線にくっつかないように余白 */
  margin: 0;
  justify-content: center;
}

.about-info dt {
  width: 8em;
  text-align: left;
}

.about-info dd {
  width: 15em;
  text-align: left;
}

.about-info dl:nth-of-type(6) {
  border-bottom: 1px solid #ccc; /* 下線 */
}

/* 5つ目と6つ目の dl の dd に枠線を追加 */
.about-info .qr {
  outline: 1px solid #dddddd; /* 枠線の色 */
  border-radius: 0.5rem; /* 角丸は outline では角丸対応するので必要 */
  padding: 0.25rem; /* 枠内余白 */
  display: inline-block; /* 枠サイズを内容に合わせる */
}

.about-info dl:nth-of-type(5) dd img,
.about-info dl:nth-of-type(6) dd img {
  display: block; /* 下の余白を消す */
}

/* 一般社団法人 全国優良リフォーム会員ロゴ */
.affiliation {
  display: flex;
  justify-content: center;
  padding: 1rem;
}
/* ~~corporate-profile */

/* contact~~ */
#contact .about-wrapper {
  margin-left: auto; /* 右端に寄せる */
}

.contact-description {
  flex: 1 1 25%; /* 最小30%幅、余裕あれば伸びる */
  min-width: 20rem; /* 小さすぎないように制限 */
  padding-top: 5rem;
  margin-right: 5rem;
}

.label {
  display: inline-block;
  width: 6ch; /* ラベル幅を固定 */
  margin-right: 0.5rem; /* 数字との隙間 */
}

.value {
  display: inline-block;
}

.contact-description .label.fax {
  letter-spacing: 0.1em; /* 文字間隔を少し広げる */
}

.contact-form {
  flex: 2 1 40%; /* 文章より広めに、余裕あれば伸びる */
  min-width: 20rem; /* 小さい画面でも下に回り込みすぎない */
  z-index: 1;
  margin-right: calc((1400px - 100vw) / 2 + 0.5rem); /* 右側の余白分を相殺 */
  min-width: calc((100vw - 1400px) / 2 + auto); /* 右側の余白分を相殺 */
}

.contact-form form {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  border: 1px solid #dddddd;
  border-right: none; /* 右側の線を消す */
  border-radius: 8px 0 0 8px; /* 左角丸、右角なし */
  padding: 2rem; /* 内側余白 */
  padding-right: calc((100vw - 1400px) / 2 + 2rem); /* 右側の余白分を相殺 */
  box-sizing: border-box; /* パディング込みでサイズ管理 */
}

form input,
textarea,
button {
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

textarea {
  height: 10em;
  margin-bottom: 3rem;
}

form button {
  background-color: #10627c;
  color: #ffffff;
}

/* ~~contact */

@media (max-width: 1400px) {
  .section-blocks:nth-of-type(even) .section-title {
    margin-left: auto;
    min-width: auto;
  }

  .section-blocks:nth-of-type(odd) .section-title {
    margin-right: auto;
    min-width: auto;
  }

  .empty {
    margin-left: auto;
    min-width: auto;
  }

  .checkpoint-images::before {
    left: -8rem; /* 8rem は親の margin-left を相殺 */
    width: calc(8rem + 4.125rem); /* margin-left + 画像の1/3 */
  }

  .contact-form {
    margin-right: auto;
    min-width: auto;
  }

  .contact-form form {
    padding-right: 2rem; /* 右側の余白分 */
  }
}

/* 1200px以下になったら縮小 874までなら、ウレタン塗装が改行にならずに行けた*/
@media (max-width: 1200px) {
  .name {
    font-size: 1.3rem;
  }
  .price strong {
    font-size: 3rem;
  }
  .price-detail {
    font-size: 1rem;
  }
  .notes {
    font-size: 1rem;
  }
}

/* スマホ版～～ */
@media (max-width: 1024px) {
  /* 画像調整 */
  img {
    max-width: 100%;
    height: auto;
  }

  .section-blocks,
  .about-wrapper {
    display: block;
  }

  .section-blocks {
    margin-top: 0;
  }

  .section-blocks:nth-of-type(even) .vertical-label {
    margin-right: 0;
  }

  /* 見出し全体を縦並び・横書きに */
  .section-title {
    display: flex;
    flex-direction: column; /* 上から順に */
    align-items: center; /* 中央寄せ */
    max-width: 100%;
    writing-mode: horizontal-tb; /* 横書き */
    border: none !important; /* 枠線をすべて削除 */
    border-radius: 0 !important; /* 角丸も削除 */
    background: none !important; /* 背景色なし */
    height: auto;
    padding: 0 2rem 2rem 2rem; /* 文字との余白はそのまま */
  }

  /* ラベル（横書き・中央） */
  .section-title .vertical-label {
    display: block;
    text-align: center;
    margin-bottom: 0.2rem; /* h2との間隔 */
    font-size: 0.9rem;
    padding: 0.25rem; /* ラベル上下の余白 */
    background: none; /* 背景色なし */
    color: #64914f; /* フォントカラー */
  }

  /* h2 見出し */
  .section-title h2 {
    text-align: center;
    margin: 0; /* 下余白を調整 */
    padding: 0.25rem 0; /* 下の余白を少し付ける場合 */
  }

  /* ラベルの中央寄せ補助 */
  .vertical-label {
    align-self: center;
  }

  /* top セクションだけは余白を打ち消す */
  #top .top-image {
    width: calc(100% + 1rem); /* bodyの左右余白0.5remずつを足す */
    box-sizing: border-box;
    margin: 0 -0.5rem; /* body paddingを相殺 */
    padding: 0;
  }

  #top .top-image img {
    display: block; /* 下の隙間を消す */
    width: 100%; /* 親要素に幅を合わせる */
    height: 28rem;
    object-fit: cover; /* アスペクト比を維持しつつ切り抜く */
  }

  .top-text {
    margin-bottom: 0;
  }

  .catch {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .catch-line {
    padding: 0.4rem 0.2rem;
  }

  .top-text .copy {
  font-size: 1.5rem; 
}

  /* about us~~ */
  .about-image img {
    display: none;
  }

  #about-us .about-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }

  /* 左のテキスト部分 */
  .about-text {
    position: relative;
    flex: 1 1 50%; /* 幅調整 */
    padding: 3rem 1rem;
    color: #ffffff; /* 文字を白に */
    /* 背景画像 */
    background-image: url('../img/001.jpg'); /* 画像パスは適宜調整 */
    background-size: cover; /* 画像を全体に拡大 */
    background-position: center center;
    background-repeat: no-repeat;
    /* 角丸と枠線 */
    border-radius: 12px; /* 角丸 */
    border: 2px solid #ccc; /* 枠線 */

    /* オーバーレイのための相対位置 */
    overflow: hidden; /* 角丸で背景画像やオーバーレイがはみ出さないように */
  }

  .about-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
      0,
      0,
      0,
      0.4
    ); /* 半透明の黒オーバーレイで文字を見やすく */
    z-index: 0;
  }

  .about-text p,
  .about-text dl,
  .about-text .inquiry {
    position: relative;
    z-index: 1; /* テキストを前面に出す */
  }

  /* map画像だけ白背景に */
  .about-text .map {
    display: block;
    position: relative; /* オーバーレイの影響を受けないように */
    z-index: 1;
    background-color: #ffffff; /* 白背景 */
    padding: 0.5rem; /* お好みで余白 */
    margin-left: auto; /* 左側の余白を自動にして右端に寄せる */
    max-width: 100%; /* 幅がはみ出さないように */
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }
  /* ~~about us */

  /* checkpoint~~ */
  #checkpoint .about-wrapper {
    margin-top: 0;
  }

  /* 4つの画像 */
  .checkpoint-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin: 0;
    padding: 0;
  }

  /* 各チェックポイントを縦並びに */
  .checkpoint-img {
    display: flex;
    flex-direction: column; /* ラベルを上に置く */
    align-items: center; /* 中央寄せ */
    gap: 0.25rem; /* ラベルと画像の間隔 */
    position: relative;
  }

  .checkpoint-img img {
    width: 100%;
  }

  /* ラベル横書きに変更 */
  .checkpoint-label {
    writing-mode: horizontal-tb; /* 横書き */
    text-align: center;

    color: #333;
  }

  /* 擬似要素背景は不要 */
  .checkpoint-images::before {
    display: none;
  }

  .checkpoint-text {
    padding: 1em 0;
  }

  .checkpoint-text p {
    padding-bottom: 0.5rem;
  }

  .checkpoint-text h3 {
    margin-top: 1.5em;
  }

  .checkpoint-text p,
  h3 {
    padding-left: 0;
  }

  /* プランカードを2列に */
  .plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 1rem;
    padding: 0 0.5rem;
    margin-top: 2rem;
  }

  .plan {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
  }

  .plan-Engrish {
    padding-top: 0;
    padding-bottom: 0.5rem;
    text-align: center;
  }

  .plan-type {
    padding: 0.5rem 0;
    text-align: center;
  }

  .name {
    margin-bottom: 0.25em;
    padding-bottom: 0.25em;
  }

  .notes {
    margin: 0.5em;
  }

  .plan-type img {
    width: 1em;
  }

  .caption {
    padding: 0 0.5rem;
  }
  /* ~~checkpoint */

  /* company-message~~ */
  #company-message .about-wrapper {
    padding: 0;
  }

  #company-message p {
    margin-top: 0;
    margin-bottom: 1em;
  }

  /* ~~company-message */

  /* corporate profile */
  .empty {
    display: none;
  }

  .about-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .about-info dl {
    display: flex;
    justify-content: center; /* 子要素を中央に並べる */
    width: 100%;
    border-top: 1px solid #ccc;
    padding: 0.5em 0;
    box-sizing: border-box;
  }

  .about-info dt {
    width: 10em;
  }

  .about-info dd {
    width: 14em;
  }

  /* 問い合わせフォーム */
  .contact-description {
    padding-top: 0;
    margin-right: 0;
    margin-bottom: 2rem;
  }

  .contact-form form {
    border-right: 1px solid #dddddd; /* 右の線を追加 */
    border-radius: 8px; /* 角丸をすべてに統一する場合 */
    padding: 2rem; /* 必要に応じて左右均等に */
    text-align: start;
  }

  .contact-form button {
    background: #10627c;
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 0.25rem;
    font-size: 1rem;
  }

  /* フッターの余白を打ち消す */
  footer {
    width: calc(100% + 1rem); /* bodyの左右padding0.5remを足す */
    margin: 0 -0.5rem;
    padding-bottom: 1.5rem;
    box-sizing: border-box;
  }

  main::before,
  main::after {
    display: none;
  }
}