@charset "utf-8";

/* 親要素には「具体的な高さ（pxなど）」overflow: hidden;を指定する。
imgタグには「width: 100%;」「height: 100%;」「object-fit: cover;」の3点セットを指定する。 */
.mv {
  position: relative;
  /* 子要素（文字）の基準にする */
  width: 100%;
  max-width: 1080px;
  height: clamp(320px, 50vh, 540px);
  height: clamp(320px, 50svh, 540px);
  /* position: relativeにする時はここに高さ指定する、親が枠を確保する */
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 1.5rem + 3.33vw, 3.75rem);
  overflow: hidden;
}

/* 画像を背景として背面に敷く設定 */
.mv img {
  position: absolute;
  /* ★ここが重要：浮かせて背面に */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 比率を保って枠いっぱいに広げる */
  z-index: 1;
  /* 重なり順：奥 */

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

@keyframes fade-in-mv {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.mv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  /* 黒の透明度20%（好みの暗さに調整） */
  z-index: 2;
  /* 画像の上、文字の下 */
}

.mv__content {
  position: relative;
  z-index: 3;
  /* 画像より前に出す */
  text-align: center;
  /* テキスト自体の中央揃え */
  color: var(--color-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  /* ★重要：文字を読みやすくする影 */

  opacity: 0;
  animation: fade-in-up 1s ease-out 0.5s forwards;
  /* 0.5秒遅れて開始 */
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.mv__title {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  letter-spacing: 0.1em;
}

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

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

.intro-inner {
  gap: clamp(1.875rem, -1.25rem + 10.42vw, 3.75rem);
}

/* 左側：テキストエリア */
.intro-content {
  flex: 1;
}

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

.intro-description {
  margin-bottom: clamp(1.875rem, 0.833rem + 3.47vw, 2.5rem);
}

/* --- 「私たちの強み」共通ボタンスタイル --- */
.btn--more {
  display: inline-block;
  width: 300px;
  padding: 15px 0;
  text-align: center;
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
  color: var(--color-white);
  font-weight: bold;
  letter-spacing: 0.1em;
  transition: all 0.4s ease;
  cursor: pointer;
}

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

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

  .btn--more:hover::after {
    transform: translateX(0.5rem);
  }
}

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

/* 右側：画像エリア */
.intro-image {
  flex-shrink: 0;
  /* 相手に押されても勝手に縮まない */
  width: 42%;
  /* PC時の理想的な幅（好みで調整） */
  max-width: 450px;
  /* 大きくなりすぎるのを防ぐ「防波堤」 */
  min-width: 350px;
  /* 768px直前でもこれよりは小さくならない */
}

.image-frame {
  position: relative;
}

/* 写真の後ろに少しアクセントの四角を入れる */
.image-frame::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  border: 2px solid #f0f0f0;
  z-index: 0;
  border-radius: 4px;
}

.intro-image img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  display: block;
}

.features__title {
  text-align: center;
  margin-bottom: clamp(1.25rem, -0.833rem + 6.94vw, 2.5rem);
  position: relative;
}

.features__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  align-items: stretch;
  /* ★超重要：これがあるとお互いのカードの高さが揃う */
}

/* カード1つずつの設定 */
.features__item {
  max-width: 500px;
  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 {
  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-color: var(--color-main);
  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);
  /* 開いた時に質問と区切る線 */
  text-align: left;
}


/* 222222ここから事業内容222222 */
.page-header {
  background: var(--gradient-dark);
  color: var(--color-white);
  padding-block: clamp(0.938rem, 0.417rem + 1.74vw, 1.25rem);
  text-align: center;
  max-width: 1080px;
  margin-inline: auto;
}

.page-header .subtitle {
  display: block;
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  letter-spacing: 0.1em;
  color: var(--color-white);
  text-transform: uppercase;
  /* htmlの小文字も自動で大文字に */
}

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

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

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

/* サービスリスト */
.section-title {
  text-align: center;
  margin-bottom: clamp(2.5rem, 0.417rem + 6.94vw, 3.75rem);
  position: relative;
}

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

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

/* サービスカードそのまま追加だけでOKレスポンシブル不要 */
.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-gy);
  transition: all 0.3s ease;
}

@media(any-hover: hover) {
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--color-main);
  }
}

.card-inner {
  padding: 20px 20px 30px;
}

.number {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 15px;
  opacity: 0.5;
}

.service-card h3 {
  font-size: 1.25rem;
  margin-bottom: 15px;
  border-left: 3px solid var(--color-main);
  padding-left: 10px;
}

.service-card p {
  color: var(--color-font-bk);
}

.other-services {
  margin-top: 50px;
  text-align: center;
  color: var(--color-font-bk);
}

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

.strength-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: 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;
  max-width: 800px;
  margin-inline: auto;
  padding: 25px;
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  border-radius: 4px;
}

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

.area-box {
  max-width: 800px;
  margin-inline: auto;
  background: var(--color-white);
  padding: clamp(20px, 5vw, 40px);
  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;
}

/* 333333施工事例333333 */
.works-card {
  max-width: 500px;
  margin-inline: auto;
  background: var(--color-white);
  border: 1px solid var(--color-border-gy);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media(any-hover: hover) {
  .works-card:hover {
    transform: translateY(-5px);
    border: 1px solid var(--color-main);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }
}

/* 画像エリア */
.works-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  /* 写真の比率を固定 */
  overflow: hidden;
}

.works-img img {
  object-fit: cover;
}

/* コンテンツエリア */
.works-content {
  display: flex;
  flex-direction: column;
  padding: 25px;
  flex-grow: 1;
  /* 内容が少なくてもカードの下端を揃える */
}

.works-title {
  font-size: 1.25rem;
  margin-bottom: 20px;
  font-weight: bold;
  border-bottom: 2px solid var(--color-main);
  display: inline-block;
  padding-bottom: 5px;
}

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

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

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

.spec-item dt {
  width: 6em;
  font-weight: bold;
  color: var(--color-main);
  flex-shrink: 0;
}

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

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

.works-text p {
  line-height: 1.8;
  color: var(--color-font-bk);
  background-color: var(--color-bg-light);
  padding: 15px;
  border-radius: 4px;
}

.works-grid {
  display: grid;
  /* 1枚あたりの最小幅を320pxに設定。入らなくなると自動で改行される */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px 20px;
  /* カード同士の隙間 */
}

/* 444444444会社概要444444444 */
.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;
  color: var(--color-font-bk);
  flex-grow: 1;
}

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

/* 5555555555アクセス555555555 */
/* 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-color: var(--color-main);
  border: 1px solid var(--color-main);
  color: var(--color-white);
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

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

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

/* 55555555案内テキストエリア5555555 */
.access-info {
  max-width: 960px;
  margin-inline: auto;
}

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

/* 7777777777プライバシーポリシーページ777777777 */
.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;
  color: var(--color-font-bk);
}

.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 {
  color: var(--color-main);
  text-decoration: underline;
}

/* 666666666お問い合わせ66666666 */
.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-color: var(--color-main);
  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-color: 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; 
}


@media screen and (max-width: 768px) {

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

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

  .intro-inner {
    flex-direction: column;
    /* 縦並びにする */
    text-align: center;
  }

  .intro-content {
    order: 1;
    /* テキストが先 */
  }

  .intro-image {
    order: 2;
    /* 画像が次 */
    width: 100%;
    max-width: 500px;
  }

  .image-frame::before {
    display: none;
    /* スマホでは装飾を消してスッキリさせる */
  }

  .btn--more {
    width: 100%;
    /* スマホでは横幅いっぱいに */
    max-width: 300px;
    /* ただし最大300pxまでに抑える */
  }

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

  /* 222222222ここから事業内容222222222 */
  .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) {
  .intro-description {
    text-align: left;
  }

  .btn--more {
    max-width: 100%;
    /* スマホでは横幅いっぱいが押しやすい */
  }

  /* 222222222ここから事業内容222222222 */
  .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;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 10px;
    /* 地図との隙間 */
  }

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

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

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