@charset "utf-8";

/* --- ヒーローエリア全画面・レスポンシブ設定 --- */
.mv-fullscreen {
  position: relative;
  width: 100%;
  /* PC設定：画面の高さからヘッダー(115px)を引く */
  height: calc(100vh - 115px);
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--color-border-gy);
  /* 画像読み込み前の背景色 */
}

/* picture・imgを枠いっぱいに広げる */
.mv-fullscreen picture,
.mv-fullscreen img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 比率を保ってカバー */
  z-index: 1;
}

/* 画像のアニメーション（浮かび上がる） */
.mv-fullscreen img {
  opacity: 0;
  animation: fade-in-mv 1.2s ease-out forwards;
}

/* 黒い透過オーバーレイ（文字の視認性向上） */
.mv-fullscreen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  /* 好みに応じて0.2〜0.4で調整 */
  z-index: 2;
}

/* テキストコンテンツのアニメーション */
.mv__content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--color-white);
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* キャッチコピー（メイン） */
.mv__title {
  font-size: clamp(2rem, 0.125rem + 6.25vw, 3.125rem);
  letter-spacing: 0.1em;
  margin-bottom: clamp(1rem, 0.167rem + 2.78vw, 1.5rem);

  opacity: 0;
  animation: fade-in-up 1s ease-out 0.8s forwards;
}

/* サブテキスト（追加調整：少し線間を広げると読みやすく） */
.mv__sub {
  font-size: clamp(1.25rem, 0.625rem + 2.08vw, 1.625rem);
  letter-spacing: 0.05em;
  font-weight: 500;
  line-height: 1.8;
  /* 行間を少し広げてゆとりを出す */

  opacity: 0;
  animation: fade-in-up 1.2s ease-out 1.3s forwards;
}

@keyframes fade-in-mv {
  0% {
    opacity: 0;
    transform: scale(1.1);
    /* 少し大きく表示 */
  }

  100% {
    opacity: 1;
    transform: scale(1);
    /* 定位置にズームアウト */
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
    /* 下から */
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    /* 定位置へ */
  }
}

/* キャッチコピー改行PCでは隠す */
.sp-only {
  display: none;
}

.company-intro {
  background: var(--gradient-light);
  text-align: center;
}

.intro-headline {
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 25px;
}

.intro-description {
  text-align: left;
  /* 中身の文字は左揃えにする */
  width: fit-content;
  /* 箱の幅を文字に合わせる、文字量による310行目参照 */
  margin-inline: auto;
  /* 縮まった箱自体を中央に置く */
  max-width: 100%;
}

.features__title {
  text-align: center;
  margin-bottom: clamp(1.875rem, -0.208rem + 6.94vw, 3.125rem);
  position: relative;
}

/* ★Flexboxで3つ並べる設定 */
.features__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 30px;
  /* カード同士の間隔*/
  align-items: stretch;
  /* ★超重要：ボタンがある時これがあるとお互いのカードの高さが揃う */
}

/* カード1つずつの設定 */
.features__item {
  max-width: 400px;
  margin-inline: auto;
  background: var(--color-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  /* ボタン位置を一定にする為の記述、中身を縦に並べる */
}

.features__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 20px;
}

.features__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

/* 少しおしゃれに：マウスを載せると画像が拡大 */
@media(any-hover: hover) {
  .features__item:hover .features__img img {
    transform: scale(1.1);
  }
}

.features__item-title {
  margin: 0 20px 15px;
}

.features__item-text {
  margin: 0 15px;
  color: var(--color-font-bk);
}

/* ボタンを包むエリア（余白の調整） */
.features__btn-wrapper {
  margin-top: auto;
  /* ★重要：上の要素との間を自動で埋めて、ボタンを一番下に押し下げる */
  padding: 20px;
}

/* ボタンの基本デザイン */
.features__btn {
  display: inline-block;
  width: 100%;
  /* カードの幅いっぱいに広げる（押しやすさ重視） */
  padding: 15px 0;
  background: var(--gradient-dark);
  border: 1px solid var(--color-main);
  color: var(--color-white);
  font-weight: bold;
  letter-spacing: 0.1em;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  /* 後の演出用 */
  border-radius: 4px;
}

.features__btn::after {
  content: "→";
  margin-left: 0.5rem;
  transition: transform 0.3s;
  display: inline-block;
}

@media (any-hover: hover) {
  .features__btn:hover {
    background: var(--color-white);
    color: var(--color-main);
  }

  .features__btn:hover::after {
    transform: translateX(0.5rem);
  }
}

.features__btn:active {
  opacity: 0.7;
  transform: scale(0.97);
  transition: none;
  /* 指を離した瞬間にパッと戻すのがコツ */
}

.faq__item {
  background: var(--color-white);
  margin-bottom: 15px;
  border: 1px solid var(--color-border-gy);
  border-radius: 4px;
}

.faq__title {
  text-align: center;
  font-size: clamp(1.25rem, 1.6rem + 0.8vw, 1.5rem);
  margin-bottom: 20px;
  /* 下のリストとの間隔 */
}

/* 質問部分 */
.faq__question {
  padding: clamp(0.938rem, 0.417rem + 1.74vw, 1.25rem);
  cursor: pointer;
  font-weight: bold;
  list-style: none;
  /* デフォルトの三角形（▶）を消す */
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* デフォルトの三角形を消す（Safari対策） */
.faq__question::-webkit-details-marker {
  display: none;
}

/* プラスアイコン（疑似要素で作る） */
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 12px;
  height: 2px;
  background: var(--color-main);
  /* 企業カラー */
  transition: transform 0.3s;
}

.faq__icon::after {
  transform: rotate(90deg);
  /* 縦棒にして「＋」にする */
}

/* 開いている時のアイコンの変化（－にする） */
.faq__item[open] .faq__icon::after {
  transform: rotate(0deg);
  /* 縦棒を倒して「－」にする */
}

/* 回答部分 */
.faq__answer {
  padding: clamp(0.938rem, 0.417rem + 1.74vw, 1.25rem);
  color: var(--color-font-bk);
  line-height: 1.8;
  border-top: 1px solid var(--color-border-gy);
  /* 開いた時に質問と区切る線 */
}


/* ★★★ここから事業内容★★★ */
/* --- 下層ページ専用：見出しエリア (Page Header) --- */
/* 親要素：背景画像とサイズを管理 */
section.page-header.is-overlay {
  width: 100%;
  max-width: 1080px;
  height: clamp(10rem, 5.833rem + 13.89vw, 12.5rem);
  margin-inline: auto;
  position: relative;
  /* 子要素の基準点になる */

  background-image: url('../images/image-bg2_1296x400.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  /* はみ出し防止 */
}

/* 白い半透明レイヤー：親のサイズいっぱいに広げる */
.page-header__overlay {
  position: absolute;
  /* 絶対配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(242, 236, 232, 0.8);
  /* ここで背景色を変える、やる事１ */

  /* 中の文字を上下左右中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 文字部分（変更なし） */
.page-header__content {
  text-align: center;
  z-index: 1;
  /* 重なり順を念のため上に */
}


.page-header.is-overlay .page-header__subtitle {
  display: block;
  font-size: clamp(0.625rem, 0.417rem + 0.69vw, 0.75rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-main);
  /* 文字色変える、やる事２ */
}

.page-header.is-overlay .page-header__title {
  display: block;
  font-size: clamp(1.75rem, 1.125rem + 2.08vw, 2.125rem);
  font-weight: bold;
  color: var(--color-main);
  /* 文字色変える、やる事3 */
  line-height: 1.2;
}






/* イントロダクション */
.business-intro {
  text-align: center;
}

.intro-box {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.intro-box h2 {
  margin-bottom: 30px;
}

/* サービスリスト（グリッド） */
.section-title {
  text-align: center;
  margin-bottom: clamp(1.875rem, -1.25rem + 10.42vw, 3.75rem);
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 100px;
  height: 2px;
  background: var(--color-main);
  margin: 20px auto 0;
}

/* 注釈部分 */
.other-services {
  margin-top: clamp(1.875rem, -0.208rem + 6.94vw, 3.125rem);
  text-align: center;
}

/* --- 強みセクション --- */
.strengths-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.strength-item {
  background: var(--color-white);
  padding: 20px;
  border: 1px solid var(--color-main);
  border-radius: 4px;
}

.check-icon {
  margin-right: 15px;
  font-weight: bold;
}

.strength-item p {
  font-size: 1.125rem;
  font-weight: bold;
  margin: 0;
}

.strengths-note {
  margin-top: 50px;
  text-align: center;
  padding: 25px;
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  border-radius: 4px;
}


/* 対応エリア*/
.area-section {
  background: var(--gradient-light);
}

.area-box {
  background: var(--color-white);
  padding: clamp(1.563rem, 5.21vw, 2.5rem);
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.area-main {
  margin-bottom: 20px;
}

.map-icon {
  font-size: 1.75rem;
  margin-right: 15px;
}

.area-sub {
  border-top: 1px solid var(--color-border-gy);
  padding-top: 20px;
}

.area-sub p {
  color: var(--color-font-bk);
}

[id] {
  /* サイト内のあらゆる「ジャンプ先」を、ヘッダーの高さ分だけ下にずらす */
  /* scroll-margin-top: var(--header-height); */
  /* 固定ヘッダーの高さ分だけ、着地位置を上にずらす */
  scroll-margin-top: 70px;
}

/* ★★★施工事例★★★ */
/* スペックリスト (dl) */
.works-spec {
  margin-bottom: 20px;
}

.spec-item {
  display: flex;
  border-bottom: 1px dotted var(--color-border-gy);
  padding: 8px 0;
}

.spec-item:last-child {
  border-bottom: none;
}

.spec-item dt {
  width: 6em;
  font-weight: bold;
  flex-shrink: 0;
}

.spec-item dd {
  margin: 0;
  /* color: var(--color-font-bk); */
}

/* 解説テキスト */
.works-text {
  margin-top: auto;
  text-align: left;
  /* テキスト部分を常に下側に寄せる */
}

.works-text p {
  line-height: 1.8;
  background: var(--color-bg-light);
  /* わずかに背景色をつけて「解説」感を出す */
  padding: 15px;
  border-radius: 4px;
}

/* ★★★会社概要★★★ */
.table-row {
  display: flex;
  border-top: 1px solid var(--color-border-gy);
  padding: 25px 15px;
}

.table-row:last-child {
  border-bottom: 1px solid var(--color-border-gy);
}

.table-row dt {
  width: 200px;
  /* 項目名の幅 */
  font-weight: bold;
  flex-shrink: 0;
  /* 「縮ませない」という意思表示 */
}

.table-row dd {
  margin: 0;
  line-height: 1.8;
  flex-grow: 1;
}

.tel-link {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/* ★★★アクセス★★★ */
/* 1. グーグルマップのレスポンシブ設定 */
.map-wrapper {
  max-width: 1080px;
  margin: 0 auto 20px;
}

.map-container {
  width: 100%;
  /* 2. 比率を16:9に固定 */
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border-gy);
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 3. 拡大ボタン */
.map-btn-area {
  margin-top: 15px;
  text-align: right;
}

.map-btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--gradient-dark);
  border: 1px solid var(--color-main);
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: bold;
  transition: all 0.3s ease;
  border-radius: 4px;
}

@media (any-hover: hover) {
  .map-btn:hover {
    background: var(--color-white);
    color: var(--color-main);
  }
}

.map-btn:active {
  opacity: 0.7;
  transition: none;
}

/* 案内テキストエリア */
.info-main {
  display: flex;
  flex-wrap: wrap;
  /* スマホで入り切らない場合に折り返す */
  gap: 1em;
  /* 横の隙間 */
}

.map-address,
.map-tel {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* --- 交通案内の縦配置（中身は横並び） --- */
.transportation {
  display: flex;
  flex-direction: column;
  /* 🚗と🚃を縦に並べる */
  gap: 10px;
}

.transport-row {
  display: flex;
  /* 「🚗車で〜」と「国道〜」を横に並べる */
  margin: 0;
}

.transport-row dt {
  flex-basis: 180px;
  /* 項目名の幅を固定して揃える */
  flex-shrink: 0;
  /* 項目名が潰れないようにする */
  display: flex;
}

.transport-row dd {
  margin: 0;
  flex-grow: 1;
  /* 説明文を広げる */
  line-height: 1.7;
}

/* ★★★プライバシーポリシーページ専用スタイル★★★ */
.policy-content {
  line-height: 1.8;
}

.policy-content h2 {
  font-size: 1.25rem;
  border-left: 4px solid var(--color-main);
  padding-left: 15px;
  margin: 40px 0 20px;
}

.policy-content p {
  margin-bottom: 20px;
}

.policy-content ul {
  margin-bottom: 20px;
  padding-left: 1.5em;
}

.policy-content li {
  list-style: disc;
  margin-bottom: 10px;
}

/* お問い合わせ窓口のボックス */
.contact-box {
  background-color: var(--color-bg-light);
  padding: 25px;
  border-radius: 4px;
  margin-top: 20px;
  border: 1px solid var(--color-border-gy);
}

.contact-box p {
  margin-bottom: 5px;
  font-weight: bold;
}

.contact-box a {
  text-decoration: underline;
  transition: color 0.3s;
}

/* ★★★お問い合わせ★★★ */
.contact-message {
  text-align: center;
  line-height: 2;
}

.contact-message p {
  margin-bottom: 0.5em;
}

/* 縦並びのリスト構造 */
.contact-list {
  display: flex;
  flex-direction: column;
}

.contact-item {
  padding-top: clamp(3.75rem, 2.75rem + 3.33vw, 5rem);
  text-align: center;
}

.item-title {
  margin-bottom: 4px;
}

.tel-number {
  font-size: 1.625rem;
  font-weight: bold;
  margin-bottom: 4px;
}

/* お問い合わせボタン */
.btn-wrapper {
  margin-top: 20px;
}

.btn-form-link {
  display: inline-block;
  background: var(--gradient-dark);
  border: 1px solid var(--color-main);
  color: var(--color-white);
  padding: 18px 50px;
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.3s;
}

@media (any-hover: hover) {
  .btn-form-link:hover {
    background: var(--color-white);
    color: var(--color-main);
    transform: translateY(2px);
    box-shadow: 2px 2px 0 var(--color-main); 
  }
}

.btn-form-link:active {
  opacity: 0.8;
  transform: scale(0.98); 
  transition: none; 
}

/* ===== SP表示 =====ヘッダー70px、パディング同値で */
@media screen and (max-width: 768px) {
  .mv-fullscreen {
    /* 画面の高さの70%に変更 */
    height: 70vh;
  }

  /*  キャッチコピー改行スマホの時だけ改行を有効にする */
  .sp-only {
    display: block;
  }

  .intro-box p {
    text-align: left;
  }

  .features__item-text {
    text-align: left;
  }

  /* ★★★ここから事業内容★★★ */
  .other-services p {
    text-align: left;
  }

  .strengths-list {
    grid-template-columns: 1fr;
    /* スマホでは1列に */
  }

  .strength-item {
    justify-content: flex-start;
    /* スマホでは左寄せ */
  }

  .strengths-note p {
    text-align: left;
  }

  .table-row dt {
    width: 140px;
    /* 項目名の幅を少し狭くして調整 */
  }

  .map-container iframe {
    /* スマホでは地図の操作を完全に無効化して、スクロールを優先する テストする！*/
    pointer-events: none;
  }

  .info-main {
    flex-direction: column;
    /* 住所と電話を縦に */
    gap: 0;
  }

  .tel-link {
    pointer-events: auto;
    color: var(--color-accent);
  }
}

@media screen and (max-width: 480px) {
  .area-main {
    flex-direction: column;
    text-align: left;
  }

  .map-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .table-row {
    flex-direction: column;
    /* 縦並びに変更 */
    padding: 15px 10px;
  }

  .map-container {
    /* 2. スマホでは比率を1:1に変更 */
    aspect-ratio: 1 / 1;
  }

  .map-btn {
    display: block;
    /* 横幅いっぱいに */
    text-align: center;
    padding: 15px;
    margin-top: 10px;
    /* 地図との隙間 */
  }

  .transport-row {
    flex-direction: column;
    /* 交通案内もスマホでは縦の方が読みやすい */
  }

  .transport-row dt {
    flex-basis: auto;
    margin-bottom: 5px;
  }

  .contact-message {
    text-align: left;
  }
}