/* リセット＆基本 */
* {
  margin: 0; padding: 0; box-sizing: border-box;
}
html {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  min-height: 100%;
  overflow: visible;
  scroll-behavior: smooth;
  font-family: "Noto Sans JP", sans-serif;
  color: #3a2c21;
  background: #fff;
  scroll-snap-type: y mandatory;
}

section {
  scroll-snap-align: start;
  height: auto; /* 自動高さに修正 */
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 共通レイアウト */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 2rem 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

#services h2::before,
#company h2::before,
#contact h2::before {
  content: "■";
  color: #8b5a46;   /* 薄い茶色 (#602D1Dより明るめ) */
  margin-right: 0.4em;
  font-size: 1.1em; /* 見出し文字よりほんの少し大きめでもOK */
  vertical-align: middle;
  position: relative;
  top: -0.10em; /* -0.05?-0.15em くらいで微調整 */
}

/* トップセクション */
#top {
  height: 100vh; /* 画面高さいっぱい */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #602D1D;
  color: #fff;
  text-align: center;
  position: relative;
}
#top .company-name {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  user-select: none;
}
#top img {
  max-width: 250px;
  width: 50vw;
  height: auto;
  margin-bottom: 1rem;

  /* 角をカット */
  clip-path: polygon(
    0% 0%,   /* 左上 */
    90% 0%,  /* 右上を少し内側へ */
    100% 10%,
    100% 100%, 
    10% 100%, /* 左下を少し上に */
    0% 90%
  );
}
#top .tagline {
  font-weight: 600;
  font-size: 1.5rem;
  user-select: none;
}

/* 2.社名の由来 縦三分割 */
#origin {
  display: flex;
  flex-direction: column;
  height: 100vh;  /* auto → 100vhに戻す */
  max-width: 1100px;
  margin: auto;
}

#origin-2-1 {
  flex: 0 0 44%;
  background: #fff;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 1.5rem;
  color: #3a2c21;
  align-items: center;
  justify-content: center;
}
#origin-2-1 img {
  max-width: 150px;
  height: auto;
  margin-bottom: 1rem;
}

#origin-2-2 {
  flex: 0 0 12%;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-color: #602D1D;
  color: #fff;
  font-weight: 600;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: 0;
  box-sizing: border-box;
  white-space: nowrap;
}

#origin-lower {
  flex: 0 0 44%;
  display: flex;
}

#origin-2-3, #origin-2-4 {
  flex: 1 1 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 1rem;
  color: #3a2c21;
  align-items: center;
  justify-content: center;
}
#origin-2-3 img,
#origin-2-4 img {
  max-width: 150px;
  height: auto;
  margin-bottom: 1rem;
}
#origin-2-3 .text,
#origin-2-4 .text {
  width: 100%;
  font-size: 1rem;
  line-height: 1.4;
}

/* 3.サービス全体 */
#services {
  background-color: #c8b593;
  padding: 3rem 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}
#services .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
#services h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-align: left;
  color: #fff;
  font-weight: 700;
}
#services p {
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  text-align: left;
  color: #fff;
}
.service-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 3rem;
  gap: 1.5rem;
  height: auto;
}
.service-item.left {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}
.service-item.right {
  flex-direction: row;
  justify-content: flex-end;
  max-width: 750px;
  margin-left: auto;
  text-align: left;
}
.service-item img {
  max-width: 180px;
  width: 25%;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-bottom: 0.5rem; /* 画像とタイトルの隙間詰め */
}
.service-text {
  flex: 1;
  max-width: calc(100% - 200px);
}
.service-text h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #fff;
  font-weight: 700;
}
.service-text ul {
  list-style-type: disc;
  padding-left: 1.2rem;
  color: #fff;
  word-break: break-word;
}
.service-text ul li {
  margin-bottom: 0.6rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* 4枚のサービス画像用：サイズ＆ラップの挙動を固定 */
.service-item .iigeta{
  position: relative;
  display: inline-block;   /* 画像実寸にフィット */
  line-height: 0;          /* 下の隙間対策 */
  vertical-align: top;
  flex: 0 0 auto;          /* flex で縮ませない */
  align-self: flex-start;  /* 右寄せ側でも伸長しない */
  --line:#602D1D; --thick:2px; --over:12px;
  box-shadow: inset 0 calc(-1 * var(--thick)) 0 0 var(--line);
}
.service-item .iigeta img{
  display:block;
  width: 280px;            /* ★4枚を同サイズに固定（必要なら数値調整） */
  height:auto;
  margin-bottom: 0 !important; /* 既存の .service-item img を上書き */
}

/* オーバーレイ（線用コンテナ） */
.iigeta .iigeta-v, .iigeta .iigeta-h{
  position:absolute; top:0; right:0; bottom:0; left:0;
  pointer-events:none; z-index:1;
}

/* 縦線（左右）：画像外周ぴったり＋上下にだけはみ出し */
.iigeta .iigeta-v::before, .iigeta .iigeta-v::after{
  content:""; position:absolute;
  top: calc(-1 * var(--over));
  height: calc(100% + var(--over) * 2);
  width: var(--thick); background: var(--line);
}
.iigeta .iigeta-v::before{ left:0; }
.iigeta .iigeta-v::after { right:0; }

/* 横線（上下）：画像外周ぴったり＋左右にだけはみ出し */
.iigeta .iigeta-h::before, .iigeta .iigeta-h::after{
  content:""; position:absolute;
  left: calc(-1 * var(--over));
  width: calc(100% + var(--over) * 2);
  height: var(--thick); background: var(--line);
}
.iigeta .iigeta-h::before{ top:0; }
.iigeta .iigeta-h::after{
  bottom: auto;              /* いったん無効化 */
  top: 100%;                 /* 画像ボックスの下端を基準にする */
  margin-top: calc(-1 * var(--thick));  /* 太さぶんだけ上にかぶせる（隙間ゼロ） */
  /* 既存の left / width / height / background はそのままでOK */
}

/* 右寄せ行で勝手に縮むのを更にブロック */
.service-item.right .iigeta{ margin-left:auto; }


/* 4.会社概要 */
#company {
  background-color: #fff;
  color: #3a2c21;
  padding: 3rem 1.5rem;
  font-size: 1rem;
  max-width: 1100px;
  margin: auto;
}
#company table {
  width: auto;
  max-width: 700px; /* 幅制限 */
  margin: 0 auto;   /* 中央寄せ */
  border-collapse: collapse;
}
#company th, #company td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #ccc;
  text-align: left;
}
#company th {
  width: 30%;
  font-weight: 700;
}

/* 5.お問い合わせ全体 */
#contact {
  background-color: #f2e9d9;
  color: #3a2c21;
  padding: 3rem 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
#contact .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
#contact form {
  max-width: 500px;
  margin: auto;
  display: flex;
  flex-direction: column;
  text-align: left;
}
#contact label {
  margin-bottom: 0.3rem;
  font-weight: 700;
  text-align: left;
}
#contact input, #contact textarea {
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.2rem;
  border: 1px solid #999;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  text-align: left;
}
#contact textarea {
  resize: vertical;
  min-height: 120px;
}
#contact button {
  background-color: #6c4e37;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}
#contact button:hover {
  background-color: #503822;
}
#contact h2 {
  margin-bottom: 1rem; /* サービスと同じ間隔にする */
}
#contact select {
  width: 100%;
  min-height: 44px;          /* 他入力と合わせる */
  padding: 10px 12px;
  border: 1px solid #999;
  border-radius: 4px;
  font-size: 16px;           /* iOSズーム対策 */
  background-color: #fff;
}

/* エラー枠を中央寄せ＋下に少しスペースを付けてボタンから離す */
#contact .agree-error-wrap {
  text-align: center;
  margin-top: 0.15rem;      /* チェックボックスに近づける */
  margin-bottom: 0.9rem;   /* ボタンから離す（お好みで 0.8?1.0rem） */
}

/* エラー文はインラインだと折り返し幅が不安定なので inline-block に */
#contact .agree-error-wrap .error-text[data-error-for="agree"] {
  display: inline-block;
}

/* 6.フッター */
footer {
  background-color: #6c4e37;
  color: #fff;
  font-size: 0.9rem;
  padding: 1rem 1.5rem;
  text-align: center;
  line-height: 1.5;
  scroll-snap-align: none;
}

footer > div:nth-child(4) { margin-block-start: 1em; }  /* フォールバック */
@supports (margin-block-start: 1lh) {
  footer > div:nth-child(4) { margin-block-start: 1lh; } /* 本命：正味1行 */
}

/* thanks.htmlは画面が短いのでフッターを下げる処理 */
body.page-thanks {
  min-height: 100vh;                /* フォールバック */
  display: flex;
  flex-direction: column;
}
@supports (height: 100dvh) {         /* モバイルのアドレスバー対策 */
  body { min-height: 100dvh; }
}

/* フッターを一番下へ押し下げる */
body.page-thanks footer { margin-top:auto; }

/* レスポンシブ */
@media screen and (max-width: 768px) {
  #origin {
    flex-direction: column;
    height: auto;
  }
  .origin-block {
    flex: none;
    padding: 1rem;
  }
  #origin-lower {
    max-width: 100vw;
    width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #origin-2-2 {
    padding-left: 1rem;
    font-size: 1rem;
  }
  #origin-2-1,
  #origin-2-3,
  #origin-2-4 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    box-sizing: border-box;
  }
  #top img {
    max-width: 70vw;
  }
  .full-bg, .full-bg-light {
    position: static !important;
    left: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .service-item {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .service-item img {
    width: 50%;
    margin: 0 0 0.5rem 0 !important;
  }
  .service-text {
    max-width: 100%;
  }
  .service-text ul {
    padding-left: 0;
    list-style-position: inside;
  }
  #services h2,
  #services p {
    text-align: center;
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 390px) {
  #company th,
  #company td {
    font-size: 0.85rem;
  }
}

/* === #contact 差分パッチ（既存デザイン尊重・衝突回避） === */

/* 横スクロール防止：100vw → 100% に補正（見た目はほぼそのまま） */
#contact {
  width: 100%;
  box-sizing: border-box;
}

/* container 両対応（既存 .container / 新 .contact-container） */
#contact .contact-container,
#contact .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* フォーム最大幅は既存値（500px）を尊重しつつ、モバイル最適化 */
#contact form {
  max-width: 500px;
  width: 100%;
}

/* iOSのオートズーム抑制（フォント16px相当を担保） */
#contact input,
#contact textarea {
  font-size: 16px;
}

/* フォーカス可視化（アクセシビリティ） */
#contact input:focus,
#contact textarea:focus {
  outline: none;
  border-color: #bfa58f;          /* 既存配色に馴染む薄ブラウン */
  box-shadow: 0 0 0 3px rgba(108, 78, 55, 0.18); /* ボタン色(#6c4e37)由来の淡いグロー */
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* エラーテキスト＆通知UI（contact.phpのJSON結果を表示するとき用） */
#contact .error-text {
  color: #dc2626;                 /* red-600 相当 */
  font-size: 0.9rem;
  margin-top: -0.6rem;
  margin-bottom: 0.8rem;
}

#contact .notice-success {
  background: #f0fdf4;            /* green-50 */
  border: 1px solid #bbf7d0;      /* green-200 */
  color: #15803d;                  /* green-700 */
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

#contact .notice-error {
  background: #fef2f2;            /* red-50 */
  border: 1px solid #fecaca;      /* red-200 */
  color: #b91c1c;                  /* red-700 */
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* ボタンの微調整（クリック感UP・既存色は維持） */
#contact button {
  font-weight: 700;
  line-height: 1;
  transition: background-color .25s ease, transform .02s ease, filter .15s ease;
}
#contact button:hover { filter: brightness(1.05); }
#contact button:active { transform: translateY(1px); }
#contact button[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

/* ハニーポット：視覚的に非表示だがスクリーンリーダー対象外 */
#contact .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  border: 0; white-space: nowrap;
}

/* reCAPTCHA v3 を使う場合の重なり順（必要なときだけ効く） */
#contact .grecaptcha-badge { z-index: 30; }

/* 会社名フィールドだけ短くなる問題のガード */
#contact .field input,
#contact .field select,
#contact .field textarea {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}

/* エラー表示（既に似た指定があれば不要） */
#contact .error-text {
  color: #dc2626; /* 赤 */
  font-size: .9rem;
  margin-top: .2rem;
}

/* --- お問い合わせ：最小パッチ START --- */

/* 1) 説明文と種別の間隔を広げる */
#contact .contact-intro {
  margin-bottom: 1.75rem;
}

/* --- お問い合わせ：コンパクト化＆幅修正 START --- */

/* 各フィールドを上下2行構成にする（上: ラベル+エラー、下: 入力欄） */
#contact .field {
  display: grid;
  grid-template-columns: 1fr auto; /* 左=ラベル、右=エラー */
  grid-template-rows: auto auto;   /* 上: ラベル行, 下: 入力欄行 */
  grid-column-gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

/* ラベルは左列、エラーは右列の同じ行 */
#contact .field > label {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
#contact .field > .error-text {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  color: #dc2626;
  font-size: .85rem;
  white-space: nowrap;
  align-self: center;
  margin: 0;
}

/* 入力欄は2列ぶち抜きで下段に配置 */
#contact .field > input,
#contact .field > select,
#contact .field > textarea {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  width: 100%; /* 企業・団体名欄の短縮化を防ぐ */
  box-sizing: border-box;
}

/* --- お問い合わせ：コンパクト化＆幅修正 END --- */

/* 3) プライバシーポリシー同意を中央揃え */
#contact .form_accept {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-left: 0;
  line-height: 1.2;
}

/* --- お問い合わせ：最小パッチ END --- */

/* --- お問い合わせフォーム：縦詰め＆幅の不具合修正（最小パッチ） --- */

/* 1) ラベルと入力欄の間をコンパクトに（.field ありのとき） */
#contact .field > label { margin-bottom: 0; }
#contact .field > .error-text {
  margin: 0 0 0 .5rem;           /* ラベル右に寄せるだけ */
  color: #dc2626;
  font-size: .85rem;
  white-space: nowrap;
  align-self: center;
}
/* 入力欄は下段に置くケースでも“上マージン”を小さく */
#contact .field > input,
#contact .field > select,
#contact .field > textarea {
  margin-top: .35rem;
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}
/* 各フィールド同士の間隔は少しだけ（詰めすぎ回避） */
#contact .field { margin-bottom: 1rem; }

/* 2) .field を使っていない場合のフォールバック（ラベル直後／エラー介在の両方） */
#contact label + input,
#contact label + select,
#contact label + textarea,
#contact label + .error-text + input,
#contact label + .error-text + select,
#contact label + .error-text + textarea {
  margin-top: .15rem;            /* ← ここを 0.35rem から詰めた */
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

/* 3) 企業・団体名の入力欄が短くなる不具合の強制ガード */
#contact #company {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* 4) もしフォームに grid/gap が入っていた場合の縦間伸び抑制（安全なゼロ） */
#contact form { row-gap: 0; }

/* --- お問い合わせフォーム：ラベル直下の余白を強制で詰める & 企業名幅ガード --- */

/* ラベル右横にエラーをインライン表示（空なら非表示に） */
#contact label + .error-text {
  display: inline;
  margin-left: .5rem;
  color: #dc2626;
  font-size: .85rem;
  white-space: nowrap;
  vertical-align: baseline;
}
#contact label + .error-text:empty { display: none; }

/* ラベル(+エラー)の次の入力要素との縦間をさらに詰める（勝てるように強めの指定） */
#contact label + .error-text + input,
#contact label + .error-text + select,
#contact label + .error-text + textarea,
#contact label + input,
#contact label + select,
#contact label + textarea {
  margin-top: .1rem !important;  /* ← ここでガッツリ詰める */
}

/* 企業・団体名の幅が半分になる不具合のブロック（最後の砦） */
#contact #company {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* --- ラベルと入力欄の間隔を半分に --- */
#contact label {
  margin-bottom: 0.2rem; /* デフォルトより詰める */
}

#contact .form_accept input[type="checkbox"] {
  margin: 0;
  transform: translateY(1px); /* 0?2pxで微調整可 */
}
#contact .form_accept a {
  vertical-align: middle;   /* リンク文字も中央に */
}

#contact .server-banner{
  padding:.75rem 1rem;border-radius:.5rem;margin:.75rem 0;
  border:1px solid transparent
}
#contact .server-banner.error{
  background:#ffecec;color:#900;border-color:#f5c2c2
}
#contact .server-banner.success{
  background:#e9f7ef;color:#0a6135;border-color:#bfe5cc
}

/* ========== Page Header (共通) ========== */
#page-header {
  background-color: #602D1D; /* index #top と同じ */
  color: #fff;
  position: relative;
  padding: 1.5rem;
  padding-top: 6.5rem; /* 会社名を上段に固定する分の余白 */
  height: 25vh;       /* トップより控えめ */
}
#page-header .company-name {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-weight: 700;
  font-size: 1.25rem;
  user-select: none;
}
#page-header .page-title {
  margin: 0;
  margin-left: 20rem; /* PCでは少し右へ寄せる */
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: left;
}

/* モバイル最適化 */
@media (max-width: 768px) {
  #page-header {
    padding-top: 5rem;
    height: 18vh;
  }
  #page-header .page-title {
    margin-left: 1.5rem; /* スマホは左端に合わせる */
    font-size: 1.25rem;
  }
}

/* ========== Privacy セクションの段落余白 ========== */
#privacy p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

#thanks p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

/* 簡易ボタン */
.btn {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  margin-right: 0.5rem;
}
.btn.alt {
  background: #444;
}
#thanks .actions {
  margin-top: 1rem;
}