@charset "UTF-8";
/* foundation/_reset.scss） */
*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-size: 1rem;
  margin-top: 75px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
  word-break: normal; /* 単語の分割はデフォルトに依存 */
  line-break: strict; /* 禁則処理を厳格に適用 */
  text-autospace: normal; /* 和文中の英数字に余白 */
}
@media (max-width: 575px) {
  body {
    font-size: 0.9rem;
  }
}

section {
  margin-bottom: 5rem;
}
section:first-child {
  margin-bottom: 3rem;
}
section:last-child {
  margin-bottom: 0;
}

p {
  margin-bottom: 0.5rem;
}
p:last-child {
  margin-bottom: 0;
}

ul,
li,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

.f-theme-default {
  background-color: white;
}

/* layout/_header.scss */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  z-index: 1000;
}
@media only screen and (max-width: 768px) {
  .l-header__nav {
    position: static;
    display: block; /* スマホ時は非表示（JSで開閉） */
  }
}
.l-header__inner {
  position: relative; /* 子要素にabsoluteの効果 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  margin: 0 auto;
}
.l-header__brand-wrapper {
  flex-shrink: 0;
  margin-left: 0.9rem;
}
.l-header__brand {
  display: grid;
  align-items: baseline;
  gap: 0.25em;
  color: black;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.l-header__brand--main {
  font-size: 1.4rem;
  line-height: 1;
  font-size-adjust: from-font;
}
@media only screen and (max-width: 1200px) {
  .l-header__brand--main {
    font-size: 1.1rem;
  }
}
.l-header__brand--sub {
  font-size: 1rem;
  line-height: 1;
  font-size-adjust: from-font;
  transform: translateY(-0.1rem);
}
@media only screen and (max-width: 1200px) {
  .l-header__brand--sub {
    font-size: 0.8rem;
  }
}
.l-header__brand:hover {
  color: lightgreen;
}
.l-header__logo {
  display: block;
  width: 200px;
  height: auto;
}

.l-footer {
  background-color: #76C076;
  color: white;
  padding: 2rem 2rem 1rem;
}
@media (max-width: 768px) {
  .l-footer {
    padding: 2rem 0.5rem 0.5rem;
  }
}
.l-footer a {
  color: white;
  transition: color 0.3s ease;
}
.l-footer a:hover, .l-footer a:focus-visible {
  color: #DEC01A;
}
.l-footer__container {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 800px;
  align-items: flex-start;
  justify-content: space-between;
  justify-self: center;
  margin-bottom: 2rem;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .l-footer__container {
    display: flex;
    flex-direction: column;
    width: min(100% - 32px, 800px);
    gap: 2rem;
  }
}
.l-footer__info {
  display: flex;
  flex-direction: column;
  flex: 1 1 70%;
}
@media (max-width: 768px) {
  .l-footer__info {
    max-width: 100%;
  }
}
.l-footer__logo {
  margin-bottom: 1.2rem;
}
.l-footer__logo-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
.l-footer__brand--sub {
  display: block;
  font-size: 0.95rem;
}
.l-footer__brand--main {
  display: block;
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 400;
}
.l-footer__address {
  margin-bottom: 1.2rem;
}
.l-footer__nav {
  flex: 1 1 30%;
}
@media (max-width: 768px) {
  .l-footer__nav {
    max-width: 100%;
  }
}
.l-footer__nav span {
  margin-bottom: 6px;
}
.l-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 960px) {
  .l-footer__nav ul {
    columns: 2;
  }
}
@media (max-width: 768px) {
  .l-footer__nav ul {
    columns: 1;
  }
}
.l-footer__nav ul li {
  font-size: 0.9rem;
  padding-left: 1rem;
}
.l-footer__copyright {
  text-align: center;
  font-size: 0.9rem;
}

/* object/component/_hamburger.scss */
/* ================================
  ハンバーガーボタン全体のラッパー
  （PCでは非表示、タブレット、スマートフォンで表示）
================================ */
.c-hamburger-wrapper {
  display: none; /* PCサイズでは非表示 */
}
@media only screen and (max-width: 768px) {
  .c-hamburger-wrapper {
    display: block; /* スマホサイズで表示 */
    position: absolute; /* 固定化するポイント */
    top: 50%; /* 縦中央に配置 */
    right: 16px; /* 右端からの距離（調整OK） */
    transform: translateY(-50%); /* 完全に中央寄せ */
    z-index: 1001; /* メニューより前面に出す */
  }
}

/* ================================
  ハンバーガーボタン本体
================================ */
.c-hamburger {
  position: relative;
  width: 32px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent; /* 背景を透明にする */
  cursor: pointer; /* カーソルをポインタにする */
  transition: opacity 0.3s ease; /* ホバー時のふわっと感 */
  /* ホバー時の視覚的フィードバック */
}
.c-hamburger:hover {
  opacity: 0.7;
}
.c-hamburger {
  /* バーをまとめて包む要素 */
}
.c-hamburger__bars {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.c-hamburger {
  /* 3本のバー共通の基本スタイル */
}
.c-hamburger__bar {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px; /* 線の太さ */
  background-color: #54595f; /* バーの色 */
  border-radius: 2px; /* 少し角を丸める */
  transition: transform 0.3s ease, top 0.3s ease;
  /* 各バーの位置設定 */
}
.c-hamburger__bar--top {
  top: 0; /* 上のバー */
}
.c-hamburger__bar--middle {
  top: 50%; /* 真ん中のバー */
  transform: translateY(-50%); /* 縦中央揃え */
}
.c-hamburger__bar--bottom {
  bottom: 0; /* 下のバー */
}
.c-hamburger {
  /* ================================
    is-active時のアニメーション変化
    （メニューオープン時に×印に変化）
  ================================ */
}
.c-hamburger.is-active .c-hamburger__bar--top {
  top: 50%; /* 真ん中に移動 */
  transform: translateY(-50%) rotate(45deg); /* 右上がりに回転 */
}
.c-hamburger.is-active .c-hamburger__bar--middle {
  opacity: 0; /* 真ん中の線を消す */
}
.c-hamburger.is-active .c-hamburger__bar--bottom {
  bottom: 50%; /* 真ん中に移動 */
  transform: translateY(50%) rotate(-45deg); /* 右下がりに回転 */
}

/* object/component/_hamburger-nav.scss */
/* _variables.scss（変数）を読み込む */
.c-hamburger-nav {
  /* ============================================================
      ▼ スマホ表示（768px以下）
     ============================================================ */
}
@media only screen and (max-width: 768px) {
  .c-hamburger-nav {
    position: fixed; /* 画面右からスライドインするため固定配置 */
    top: 0;
    right: 0;
    width: 100%; /* 幅100%を基準に max-width で制限 */
    max-width: 300px; /* メニューの最大幅 */
    height: 100vh; /* 画面の高さ全体を覆う */
    background-color: white; /* 背景色 */
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1); /* 右端から出る影 */
    padding-top: 75px; /* ヘッダーの高さ分だけ上に余白を確保 */
    overflow-y: auto; /* メニュー内が長い場合スクロール可能に */
    z-index: 1000; /* ヘッダーより上に表示 */
    /* ---- 初期状態（閉） ----
        transformで右側にオフスクリーン。
        visibilityとopacityで非表示にし、クリックも無効化。
        transitionをOFFにして、読み込み時やリサイズ時の
        チラつきを防止。
    */
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: none;
    will-change: transform, opacity; /* GPUレンダリング最適化 */
    /* ---- クリック操作中だけアニメーションON ----
        JavaScriptで .is-animatable クラスを一時的に付与。
        これにより「開閉時のみ」スライドとフェードのtransitionが有効。
        通常時はOFFで安定表示。
    */
  }
  .c-hamburger-nav.is-animatable {
    transition: transform 0.4s ease, opacity 0.2s ease;
  }
  .c-hamburger-nav {
    /* ---- 閉じるときだけ visibility を遅延 ----
        メニューを閉じるとき、transformとopacityが終わる
        0.4秒後にvisibilityをhiddenに変更。
        これにより「パッと消える」問題を防ぎ、自然に消える。
    */
  }
  .c-hamburger-nav.is-animatable:not([data-open=true]) {
    transition: transform 0.4s ease, opacity 0.2s ease, visibility 0s linear 0.4s;
  }
  .c-hamburger-nav {
    /* ---- 開いた状態 ----
        data-open="true" が付いたとき、画面右からスライドイン。
        visibilityとopacityをONにしてフェード表示。
    */
  }
  .c-hamburger-nav[data-open=true] {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}
.c-hamburger-nav {
  /* ============================================================
      ▼ PC表示（768px以上）
     ============================================================ */
  /* リサイズ時の“メニューバーのちらつき”を防止するために必要な設定 */
}
@media only screen and (min-width: 768px) {
  .c-hamburger-nav {
    position: static; /* 通常フロー内配置 */
    width: auto;
    max-width: none;
    height: auto;
    box-shadow: none; /* PC時は影なし */
    padding-top: 0;
    transform: none; /* スライド解除 */
    visibility: visible; /* 常時表示 */
    opacity: 1;
    pointer-events: auto;
    transition: none !important; /* リサイズ時の“ニュッ”防止 */
  }
}
.c-hamburger-nav {
  /* ============================================================
      ▼ ナビリスト設定
     ============================================================ */
}
.c-hamburger-nav__list {
  display: flex;
  flex-direction: column; /* スマートフォンでは縦並び */
  list-style: none;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .c-hamburger-nav__list {
    flex-direction: row; /* PCでは横並び */
    gap: 1rem; /* メニュー間の余白 */
    padding: 0;
  }
}
.c-hamburger-nav {
  /* 各メニュー項目（スマートフォン/PC共通） */
}
.c-hamburger-nav__item {
  position: relative; /* プルダウンの基準にする */
  align-content: center;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .c-hamburger-nav__item {
    text-align: left;
  }
}
.c-hamburger-nav {
  /* ============================================================
      ▼ 各リンク設定
     ============================================================ */
}
.c-hamburger-nav__link {
  display: inline-block;
  color: lightslategray; /* 通常色（変数で統一管理） */
  font-size: 1rem;
  font-weight: 500;
  width: 100%; /* スマートフォン時に全幅クリック可能に */
  transition: color 0.3s ease, background-color 0.3s ease;
  white-space: nowrap;
}
@media only screen and (max-width: 1200px) {
  .c-hamburger-nav__link {
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 768px) {
  .c-hamburger-nav__link {
    padding: 1rem; /* タップしやすい余白 */
  }
}
.c-hamburger-nav__link {
  /* ホバー・フォーカス時の視覚的フィードバック */
}
.c-hamburger-nav__link:hover, .c-hamburger-nav__link:focus {
  color: lightgreen;
  /* リンク色を変更 */
}
@media only screen and (max-width: 768px) {
  .c-hamburger-nav__link:hover, .c-hamburger-nav__link:focus {
    background-color: darkgreen;
    /* 背景に薄い青系ハイライト */
  }
}
.c-hamburger-nav {
  /* ============================================================
    ▼ ドロップダウン（子メニュー）
   ============================================================ */
  /* 子メニューの UL 全体 */
}
.c-hamburger-nav__submenu {
  margin: 0;
  padding: 0;
  list-style: none;
  /* ------------------------------------------------------------
      ▼ タブレット、スマホ（〜768px）
      子メニューも親リンクの後に普通のリストとして縦並びで表示させる。
    ------------------------------------------------------------ */
  /* ------------------------------------------------------------
      ▼ PC（768px〜）
      絶対配置で「浮いたメニュー」として表示する。
      初期状態は非表示で：opacity 0 ＋ visibility hidden ＋ transform（少し下にずらす）
      → ホバー時にこれを 1 / visible / 0 に変更してフェード＆スライド表示する。
    ------------------------------------------------------------ */
}
@media (min-width: 768px) {
  .c-hamburger-nav__submenu {
    position: absolute;
    top: 100%; /* 親リンクの真下に配置 */
    left: 50%; /* 親リンクの中央に配置する */
    /* left: 0; */ /* 親リンクと左揃えで表示する場合はこちらを使います。 */
    transform: translate(-50%, 5px); /* 中央揃え＋5px下から開始 */
    min-width: 200px; /* サブメニューの幅 */
    background-color: green;
    /* border-radius: 0 0 4px 4px; */ /* サブメニューの枠に丸みを付ける */
    /* box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); */ /* サブメニューの枠にシャドウを付ける */
    /* ▼ 初期状態：非表示 */
    opacity: 0;
    visibility: hidden;
    /* transform: translateY(0); */ /* ふわっと表示させるのみの動きはこちらを使います */
    /* ▼ 非表示時のトランジション設定
        visibility はアニメーションできないので "step-end" を使用し、
        アニメーションが終わったタイミングで hidden に切り替える
      （ちらつき防止のためこの方式が一番安定）
    */
    transition: opacity 0.4s linear, transform 0.4s ease-out, visibility 0s 0.4s;
    z-index: 1001;
    /* ヘッダーより前面に出す */
  }
}
.c-hamburger-nav {
  /* ------------------------------------------------------------
      子メニューの LI
    ------------------------------------------------------------ */
}
@media (min-width: 768px) {
  .c-hamburger-nav__submenu-item {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
  }
  .c-hamburger-nav__submenu-item:first-child {
    border-top: none;
    /* 1行目のリンクはボーダー無し */
  }
}
.c-hamburger-nav {
  /* ------------------------------------------------------------
      子メニューのリンク
    ------------------------------------------------------------ */
}
.c-hamburger-nav__submenu-link {
  display: block;
  color: white;
  font-size: 0.9rem;
  white-space: nowrap;
  padding: 0.9rem 1rem;
}
@media (max-width: 768px) {
  .c-hamburger-nav__submenu-link {
    color: lightslategray;
    padding: 1rem 0.7rem 1rem 1.5rem;
  }
}
.c-hamburger-nav__submenu-link {
  /* ホバー時の背景変更（PC専用） */
}
.c-hamburger-nav__submenu-link:hover, .c-hamburger-nav__submenu-link:focus-visible {
  background-color: darkgreen;
  color: lightgreen;
}
.c-hamburger-nav {
  /* ============================================================
      ▼ PC時：ホバー・フォーカスでプルダウンを表示
        （親リンク li.c-hamburger-nav__item--has-children から操作）
    ============================================================ */
}
@media (min-width: 768px) {
  .c-hamburger-nav {
    /* --------------------------------------------------------
        親 li にホバー or フォーカスが入ったら
        → 直下の .c-hamburger-nav__submenu を表示状態にする

        【表示時の状態】
        opacity: 1 → ふわっと表示
        visibility: visible → クリック可能状態になる
        transform: translateY(0) → 上にスライドして定位置へ
    -------------------------------------------------------- */
  }
  .c-hamburger-nav__item--has-children:hover > .c-hamburger-nav__submenu, .c-hamburger-nav__item--has-children:focus-within > .c-hamburger-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 10px);
    /* transform: translateY(1); */
    /* ふわっと表示させるのみの動きはこちらを使います */
    /* 表示時は visibility の切り替え遅延をなくす（即 visible にする） */
    transition: opacity 0.3s linear, visibility 0s, transform 0.3s ease-out;
  }
}

.c-hamburger-nav__link[href^="/contact/"] {
  color: white;
  background-color: #e4be44;
  padding: 1.68rem 0.9rem;
}
@media (max-width: 768px) {
  .c-hamburger-nav__link[href^="/contact/"] {
    display: block; /* 幅いっぱいでタップしやすく */
    color: lightslategray;
    background-color: white;
  }
}

.c-hamburger-nav__link[href^="/contact/"]:hover,
.c-hamburger-nav__link[href^="/contact/"]:focus-visible {
  background-color: #c9a532; /* 濃くして状態差を確保 */
}
@media (max-width: 768px) {
  .c-hamburger-nav__link[href^="/contact/"]:hover,
  .c-hamburger-nav__link[href^="/contact/"]:focus-visible {
    color: white;
  }
}

/* header-B 専用: バーガーメニュー表示制御（SPはtransform/opacityで統一） */
/* SPでは .c-hamburger-nav の基準アニメーションを使うため display 切替は行わない */
/* モバイル: バーガー優先、従来ナビ非表示 */
/* PC: 従来ナビ表示、バーガー非表示 */
/* object/component/_page-title.scss） */
.c-page-title {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 300px;
  padding: 0 2rem;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(138, 213, 138, 0.15) 0%, rgba(138, 213, 138, 0.5) 100%), url("../images/image-page-title.webp");
  background-size: cover;
  background-position: center;
}
.c-page-title__icon {
  width: 3rem;
  height: 3rem;
}
.c-page-title__line {
  width: 100%;
  max-width: 400px;
  height: 0;
  outline: 1px solid white;
}
.c-page-title__text {
  color: white;
  text-align: center;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 0 10px rgb(0, 0, 0);
}
@media (max-width: 575px) {
  .c-page-title__text {
    font-size: 1.5rem;
  }
}

/* コンタクトフォーム上部のテキスト */
/* ----------------------------------------------------- */
.c-section-head__title {
  width: 100%;
  max-width: 1140px;
  text-align: center;
  margin: 0 auto;
}
.c-section-head__title--en {
  color: #E4A110;
  font-size: 0.8rem;
}
.c-section-head__title--jp {
  color: black;
  font-size: 2rem;
}
@media (max-width: 575px) {
  .c-section-head__title--jp {
    font-size: 1.8rem;
  }
}
.c-section-head__text {
  width: 100%;
  max-width: 1140px;
  text-align: center;
  margin: 1rem auto 0;
}
@media (max-width: 768px) {
  .c-section-head__text {
    padding: 1rem 1rem 0;
  }
}
@media (max-width: 575px) {
  .c-section-head__text {
    text-align: left;
    margin: 0 auto;
  }
}
.c-section-head__sub-title {
  position: relative;
  display: block;
  margin-bottom: 2rem;
  font-size: 1.4rem;
  justify-content: center;
  align-items: center;
  place-items: center;
  text-align: center;
}
@media (max-width: 575px) {
  .c-section-head__sub-title {
    font-size: 1.2rem;
  }
}
.c-section-head__sub-title::after {
  content: "";
  display: block;
  width: 100px;
  border-top: 2px solid #8ad58a;
  margin-top: 1rem;
}
.c-section-head__individual {
  position: relative;
  font-size: 1.5rem;
  text-align: center;
  font-weight: 400;
  padding-bottom: 12px;
  margin-bottom: 2rem;
}
.c-section-head__individual::before, .c-section-head__individual::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.c-section-head__individual::before {
  width: 100%;
  max-width: 800px;
  border-bottom: 2px solid #d9d9d9;
}
.c-section-head__individual::after {
  width: 100%;
  max-width: 100px;
  border-bottom: 2px solid #8ad58a;
}

/* コンタクトフォーム上部のテキスト
    section-head.scssに統合したので、コンタクトフォームの設定ができたら削除します。 */
/* ----------------------------------------------------- */
.c-section-text {
  width: 100%;
  max-width: 1140px;
  text-align: center;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .c-section-text {
    padding: 0 1rem;
  }
}

.c-button {
  position: relative; /* 追加：矢印の基準 */
  padding-right: 2.4rem; /* 追加：矢印分の余白 */
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 100px;
  background-color: #41C541;
  width: fit-content;
  height: auto;
  padding: 0.7rem 1.5rem;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
.c-button:hover {
  background-color: #DEC01A;
}
@media (max-width: 575px) {
  .c-button {
    padding: 0.9rem 1rem;
  }
}
.c-button__link {
  color: white;
}
.c-button__arrow-wrapper {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  align-content: center;
  width: 20px;
  height: 20px;
}
.c-button__arrow {
  position: relative;
}
.c-button__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}
.c-button--home {
  min-width: 160px;
  margin-top: 1rem;
}

/* object/component/_breadcrumb.scss */
/* _variables.scss（変数）を読み込む */
.c-breadcrumb {
  font-size: 0.8rem;
  background-color: white;
}
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 1rem;
  margin: 0 auto 1rem;
  width: 100%;
  max-width: 1000px;
}
.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: lightslategray;
}
.c-breadcrumb__item-link {
  color: lightslategray;
  transition: color 0.3s ease;
}
.c-breadcrumb__item-link:hover, .c-breadcrumb__item-link:focus-visible {
  color: lightgreen;
}
.c-breadcrumb__item::after {
  content: ">";
  margin-left: 0.5rem;
  color: #999;
}
.c-breadcrumb__item:last-child::after {
  content: "";
}
.c-breadcrumb__link {
  color: inherit;
  text-decoration: none;
}
.c-breadcrumb__link:hover, .c-breadcrumb__link:focus-visible {
  text-decoration: underline;
}
.c-breadcrumb__current {
  color: inherit;
}
.c-breadcrumb__icon {
  font-size: 1rem;
  line-height: 1;
  margin-right: 0.25rem;
  vertical-align: -0.1em;
}

/* object/component/_icon.scss */
/* _variables.scss（変数）を読み込む */
.material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* object/component/_list.scss */
.c-info-contact {
  width: 100%;
  max-width: 600px;
  justify-self: center;
  border: 1px solid #d9d9d9;
  border-radius: 20px;
  padding: 2rem;
}
@media (max-width: 575px) {
  .c-info-contact {
    padding: 1rem;
  }
}
.c-info-contact__title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  justify-items: center;
}
.c-info-contact__content {
  width: 100%;
  max-width: 382px;
  justify-self: center;
}
.c-info-contact__address {
  margin-bottom: 0.5rem;
}
.c-info-contact__contact {
  display: flex;
}
.c-info-contact__tel {
  margin-right: 1.5rem;
}
.c-info-contact--margin {
  margin: 2rem 0;
}

/* object/project/_contact.scss */
.p-contact {
  padding: 3rem 2rem;
}
@media (max-width: 768px) {
  .p-contact {
    padding: 3rem 1rem;
  }
}
@media (max-width: 576px) {
  .p-contact {
    padding: 3rem 0.8rem;
  }
}
.p-contact {
  /* コンタクトフォーム枠 */
  /* ----------------------------------------------------- */
}
.p-contact__frame {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  border-radius: 20px;
  justify-self: center;
}
@media (max-width: 768px) {
  .p-contact__frame {
    padding: 3rem 0.5rem;
  }
}
@media (max-width: 576px) {
  .p-contact__frame {
    padding: 2rem 0.5rem;
  }
}
.p-contact {
  /* フォーム本体 */
  /* ----------------------------------------------------- */
}
.p-contact__form-body {
  margin-bottom: 1rem;
}
.p-contact {
  /* 個人情報保護方針リンク */
  /* ----------------------------------------------------- */
}
.p-contact__privacy {
  text-align: right;
}
.p-contact__privacy-link {
  color: #59a959;
  transition: color 0.3s ease;
}
.p-contact__privacy-link--head {
  font-size: 0.9rem;
}
.p-contact__privacy-link:hover, .p-contact__privacy-link:focus-visible {
  color: #DEC01A; /* フッター内のリンク色（ホバー時とフォーカス時） */
}
.p-contact {
  /* 各入力項目の設定 */
  /* ----------------------------------------------------- */
}
.p-contact__select-type {
  max-width: 400px;
}
.p-contact__input-name {
  max-width: 300px;
}
.p-contact__input-email, .p-contact__input-email-confirm {
  max-width: 500px;
}
.p-contact__input-zip, .p-contact__input-pref {
  max-width: 120px;
}
@media (max-width: 576px) {
  .p-contact__input-zip, .p-contact__input-pref {
    max-width: 140px;
  }
}
.p-contact__input-address {
  max-width: 600px;
}
.p-contact__input-tel {
  max-width: 200px;
}
.p-contact__textarea-message {
  resize: vertical;
  min-height: 160px;
}
@media (max-width: 576px) {
  .p-contact__select-type, .p-contact__input-name, .p-contact__input-email, .p-contact__input-email-confirm, .p-contact__textarea-message {
    max-width: 100%;
  }
}
.p-contact__select-type, .p-contact__input-name, .p-contact__input-email, .p-contact__input-email-confirm, .p-contact__input-zip, .p-contact__input-pref, .p-contact__input-address, .p-contact__input-tel, .p-contact__textarea-message {
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem 0.6rem;
  border: 1px solid #B3B3B3; /* 入力項目の枠線色 */
  background-color: white;
  font-size: 1rem; /* 入力項目の文字サイズ */
  color: black; /* 入力項目の文字色 */
  border-radius: 2px; /* 入力項目の枠四隅の丸み */
}
.p-contact__select-type:focus-visible, .p-contact__input-name:focus-visible, .p-contact__input-email:focus-visible, .p-contact__input-email-confirm:focus-visible, .p-contact__input-zip:focus-visible, .p-contact__input-pref:focus-visible, .p-contact__input-address:focus-visible, .p-contact__input-tel:focus-visible, .p-contact__textarea-message:focus-visible {
  outline: 2px solid #11ac11;
  outline-offset: 0;
}
.p-contact {
  /* ラベル */
  /* ----------------------------------------------------- */
}
.p-contact__label {
  display: inline-flex;
  align-items: center;
  font-size: 1rem; /* ラベルの文字サイズ */
  line-height: 1.4;
  color: black; /* ラベルの文字色 */
  font-weight: 500; /* ラベルの文字の太さ */
  margin-bottom: 0.5rem;
}
.p-contact {
  /* 必須項目のラベルにバッジを付ける */
  /* ----------------------------------------------------- */
}
.p-contact__required {
  position: relative;
}
.p-contact__required::after {
  content: "必須";
  /* position: absolute; */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem; /* ラベルと「必須」バッジとの間隔 */
  padding: 0.3rem 0.6rem;
  background: #DEC01A; /* 「必須」バッジの背景色 */
  color: white;
  font-size: 0.8rem; /* 「必須」バッジ字の大きさ */
  line-height: 1;
  border-radius: 30px; /* バッジの四隅を丸くする */
  white-space: nowrap; /* 折り返しさせない */
  transform: translateY(1px); /* ラベルテキストとバッジの縦方向位置調整 */
}
.p-contact__field {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.5rem;
  /* .p-contact__field + .p-contact__field ⇒ & + & */
  /* .p-contact__field が連続して並んでいるとき、2個目以降の .p-contact__field にだけ border-top を付ける */
}
.p-contact__field + .p-contact__field {
  border-top: 1px dotted #D9D9D9;
}
.p-contact {
  /* 住所の入力項目 */
  /* ----------------------------------------------------- */
}
.p-contact__field-address {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.p-contact__field-address:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .p-contact__field-address {
    margin-bottom: 1rem;
  }
}
.p-contact__field-address .p-contact__input-address {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}
.p-contact__field-address-label {
  white-space: nowrap;
  font-weight: 400;
  width: 80px;
  flex: 0 0 80px;
  white-space: normal; /* 既存の nowrap を上書き */
  display: inline-block; /* 幅の概念を持たせる */
  text-align: justify; /* 両端揃え */
  text-align-last: justify; /* 1行でも行末を両端揃え */
  text-justify: inter-ideograph; /* 和文向けの均等割付 */
}
.p-contact__field-address-label--spaced {
  display: inline-block; /* ::first-letter を確実に効かせる */
  white-space: nowrap; /* 行内で折り返さない */
}
.p-contact {
  /* チェックボックス */
  /* ----------------------------------------------------- */
}
.p-contact__check-confirm {
  appearance: none; /* HTML側のスタイルを無効化する */
  display: inline-grid;
  place-content: center;
  inline-size: 1.5rem; /* チェックボックス枠の横幅 */
  block-size: 1.5rem; /* チェックボックス枠の縦幅 */
  margin-right: 0.6rem;
  vertical-align: middle;
  border: 2px solid gray; /* チェックボックスの枠線 */
  border-radius: 5px; /* チェックボックスの四隅を丸くする */
  background-color: white;
  transition: background-color 0.2s ease, border 0.2s ease, border-color 0.2s ease;
  transform: translateY(0.5px); /* ラベルテキストとバッジの縦方向位置調整 */
}
.p-contact__check-confirm::after {
  content: "";
  inline-size: 0.55rem; /* チェックの横幅（外接） */
  block-size: 0.95rem; /* チェックの高さ（外接） */
  /* チェックマークをボーダー2本で描く */
  border-right: 0.2rem solid #1F8D1F;
  border-bottom: 0.2rem solid #1F8D1F;
  /* 形を整える */
  transform: rotate(45deg) scale(0);
  transform-origin: 50% 60%;
  transition: transform 120ms ease-in-out;
  translate: -0.05rem -0.2rem; /* チェックボックス枠内での位置調整 */
}
.p-contact__check-confirm:checked {
  background-color: #E9F7E9; /* チェックボックスの背景色（チェック後） */
  border-color: #1F8D1F; /* チェックボックスの枠線色（チェック後） */
}
.p-contact__check-confirm:checked::after {
  transform: rotate(45deg) scale(1);
}
.p-contact {
  /* ボタン */
  /* ----------------------------------------------------- */
}
.p-contact__button-area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 500px;
  gap: 2rem;
  flex-wrap: nowrap; /* 横並び維持 */
}
@media (max-width: 768px) {
  .p-contact__button-area {
    gap: 1rem;
  }
}
.p-contact__button-area {
  /* スマホ時にボタンを縦に並べる */
  /* @media (max-width: 576px) {
    flex-direction: column;
  } */
}
@media (max-width: 375px) {
  .p-contact__button-area {
    gap: 0.5rem;
  }
}
.p-contact__button-area form {
  display: flex; /* ボタンを中央配置 */
  flex: 1 1 0; /* 2つのフォームを等幅に */
  justify-content: center;
}
.p-contact__button-area-content {
  display: flex; /* ボタンを中央配置 */
  flex: 1 1 0; /* 2つのフォームを等幅に */
  justify-content: center;
  width: 100%;
  max-width: 234px;
}
.p-contact__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 0.5rem 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
  flex: 1 1 0; /* 可変で等分 */
  width: auto;
  height: 3.5rem;
  border: none;
  justify-content: center;
  border-radius: 30px; /* ボタンの四隅を丸くする */
  transition: background-color 0.2s ease;
  cursor: pointer;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .p-contact__button {
    font-size: 1rem;
  }
}
.p-contact__button--confirm, .p-contact__button--send {
  background-color: #41C541;
  color: white;
}
.p-contact__button--confirm:hover, .p-contact__button--send:hover {
  background-color: #11ac11;
}
.p-contact__button--confirm:hover::after, .p-contact__button--confirm:focus-visible::after, .p-contact__button--send:hover::after, .p-contact__button--send:focus-visible::after {
  transform: translateY(-50%) translateX(2px) rotate(45deg);
}
.p-contact__button--reset {
  background-color: white;
  border: solid 1px lightgray;
  color: gray;
}
.p-contact__button--reset:hover {
  background-color: #e3f1e3;
}
.p-contact__button--correct {
  background-color: white;
  border: solid 1px #9fbd9f;
  color: gray;
}
.p-contact__button--correct:hover {
  background-color: #daf5da;
}
.p-contact__button--correct:hover::after, .p-contact__button--correct:focus-visible::after {
  transform: translateY(-50%) translateX(-2px) rotate(-135deg);
}
.p-contact__error-message {
  color: #c62828;
  font-size: 0.9rem;
  display: block;
  margin: 0.5rem 0 0;
}
.p-contact__error-message--address {
  margin: 0 0 0.5rem;
}
.p-contact__error-message.is-hidden {
  display: none;
}
.p-contact__confirm-content {
  color: gray;
}
.p-contact {
  /* HOMEに戻るリンク */
  /* ----------------------------------------------------- */
}
.p-contact__return-home {
  text-align: center;
}
.p-contact__return-home-link {
  color: #59a959;
  transition: color 0.3s ease;
}
.p-contact__return-home-link:hover, .p-contact__return-home-link:focus-visible {
  color: #DEC01A; /* フッター内のリンク色（ホバー時とフォーカス時） */
}

.u-frame--shadow {
  background: white;
  box-shadow: 0 0 10px #D5F4D5;
}

.u-position--center {
  align-items: center;
  align-self: center;
}

.u-margin--section-head {
  margin-bottom: 1.5rem;
}

.u-wrap--nowrap {
  white-space: nowrap;
}

.u-br--nav {
  display: none;
}
@media only screen and (max-width: 830px) {
  .u-br--nav {
    display: block;
  }
}
.u-br--process {
  display: none;
}
@media (max-width: 768px) {
  .u-br--process {
    display: block;
  }
}
.u-br--section-head-text, .u-br--buisiness-description-text {
  display: block;
}
@media (max-width: 575px) {
  .u-br--section-head-text, .u-br--buisiness-description-text {
    display: none;
  }
}

.u-text__notes {
  font-size: 0.9rem;
}

/*# sourceMappingURL=common.css.map */