/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif; /* シンプルで可読性の高いフォントを指定 */
    color: #333;
    line-height: 1.6;
    background-color: #d5ebea; 
    }

/* ================================================= */
/* 1. 全体設定：中央固定幅 (モバイルファースト) */
/* ================================================= */
#content-wrapper {
    /* PC表示で中央に寄せるための最大幅 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.section {
    position: relative;
    padding: 60px 0px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); 
}

.section-inner-content {
    max-width: 768px; /* 読みやすさ重視の幅 */
    margin: 0 auto;
    padding: 0 20px; /* スマホ用の左右パディング */
}

.contact-section {
    border-bottom: none; 
}

.section-title {
    font-size: 1.8em;
    font-weight: bold;
    text-align: left;
    margin-bottom: 30px;
    position: relative;
    text-transform: uppercase; /* すべて大文字に変換 */
    letter-spacing: 0.1em;     /* 少し文字間隔を空ける */
}

.section-description {
    text-align: left; /* ★★【修正】タイトルに合わせて左寄せに ★★ */
    color: #555;
    margin-bottom: 30px;
}

/* ================================================= */
/* 2. ヘッダー（ファーストビュー）- ここだけ全幅 */
/* ================================================= */
#header {
    width: 100%;
    height: auto;
}

.top-bar {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%; /* 全幅に広げる */
    z-index: 100; /* 確実に最前面 */
    height: 50px; /* ★トップバーの正確な高さを設定 (例: 50px) */
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}


/* -- HEROセクション (画像とコピー) -- */
.hero-section {
    height: 60vh; 
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    }

/* ヘッダー画像 */
.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    }

.hero-copy {
    /* 画像上のコピーを中央配置 */
    position: relative; /* z-indexを適用させるため relative に変更 */
    z-index: 2; /* 画像より前面に表示 */
    color: #fff; /* 白抜き文字 */
    text-align: center;
    padding: 20px;
}

.hero-copy h1 {
    font-size: 2em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); /* 影を濃くして可読性を高める */
}


/* -- 行動ボタン (CV) スタイル -- */
.cv-button-area {
    position: absolute;
    top: calc(60vh - 20px); /* ヒーローの高さ(60vh)から20px上に浮かす */
    left: 50%;
    transform: translateX(-50%); /* 中央寄せ */
    
    z-index: 50; /* 画像の上に表示 */
    width: 100%;
    max-width: 500px; /* ボタンが大きくなりすぎないように制限 */
    
    text-align: center;
    padding: 0; /* paddingを削除して、topの計算をシンプルに */
}
   

.cv-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: #C0A880; /* ← 【アクセントカラー】: ここを指定 */
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    font-size: 1.1em;
    transition: background-color 0.3s;
}

.cv-button:hover {
    background-color: #B09870; /* ホバー時の色 */
}

/* ================================================= */
/* 3. 共感セクション (Empathy Section) */
/* ================================================= */

.empathy-section {
    /* 背景色や線の設定は他のセクションと共通 (通常は行わない) */
}

/* 左右に分割するコンテナ */
.empathy-split-content {
    display: flex;
    flex-direction: column; /* モバイルでは縦並び（メッセージ→画像） */
    gap: 40px; /* 縦の余白 */
    align-items: center;
}

/* 1. メッセージブロック（左側に来る） */
.empathy-text-block {
    text-align: left;
    width: 100%;
}

/* タイトルは左寄せに戻します */
.empathy-text-block .section-title {
    /* 以前のabsolute配置のスタイルをリセットし、通常の流れに戻す */
    position: static; 
    transform: none;
    top: auto;
    left: auto;
    
    color: #333; /* 文字色を黒に戻す */
    text-shadow: none; /* 影を削除 */
    font-size: 1.5em; /* サイズを調整 */
    text-align: left;
    margin-bottom: 20px;
    padding: 0;
}
.empathy-text-block p {
    color: #444; 
    font-size: 1.05em;
    line-height: 1.7;
}

/* 2. 画像ブロック（右側に来る） */
.empathy-image-block {
    width: 100%;
    max-width: 500px; /* 画像の最大幅を制限 */
}

.empathy-main-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}


/* PCビュー (768px以上) で左右横並びを有効化 */
@media (min-width: 768px) {
    .empathy-split-content {
        flex-direction: row; /* PCで横並び */
        justify-content: space-between;
        align-items: center;
        gap: 80px; /* 横の余白を広めに取る */
    }

    .empathy-text-block {
        width: 45%; /* 左側のメッセージの幅 */
        order: 1; /* メッセージを左（1番目）に配置 */
    }

    .empathy-image-block {
        width: 50%; /* 右側の画像の幅 */
        order: 2; /* 画像を右（2番目）に配置 */
    }
}

/* ================================================= */
/* 5. フルワイド・ギャラリー (Full-Bleed Gallery) */
/* ================================================= */

.full-bleed-gallery {
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}

.gallery-slider {
  display: flex;
  gap: 10px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.gallery-slide {
  flex: 0 0 auto;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

.arrow.left { left: 10px; }
.arrow.right { right: 10px; }

.slide-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 7px;
  transition: transform 0.3s ease;
}

.slide-image:hover {
  transform: scale(1.05);
}

.gallery-caption {
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
  letter-spacing: 0.1em;
}


/* 2. キャプション（画像の上に重ねて高級感を出す） */
.gallery-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: #fff;
    text-align: center;
    width: 80%;
    max-width: 600px;
    
    /* テキストを読みやすくするための影 */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.gallery-caption p {
    font-size: 1.1em;
    font-weight: 500;
    margin-bottom: 5px;
    letter-spacing: 0.2em;
}



/* ================================================= */
/* 窓装飾プランナー紹介セクション (ABOUT US)
/* ================================================= */

/* モバイルファースト：モバイルでは要素を上から下に積む */
.planner-org {
    font-size: 0.8em;  /* 元のh3より少し小さめ */
    font-weight: 300;  /* 細字 */
    }


.split-section {
    background-color: #758d8b; 
    padding: 60px 20px; /* 上下のパディングを確保 */
    margin: 0 auto 60px auto; /* 上下の余白 */
    width: 100%;
    
    /* セクション全体に、モダンな上下の飾り線を追加 */
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.split-content {
    max-width: 1000px;
    margin: 40px auto 0 auto; /* タイトルとコンテンツの間の余白 */
    display: flex;
    flex-direction: column; /* モバイルでは縦並び */
    gap: 40px;
}

.side-image {
    width: auto;
    height: auto;
    margin-bottom: 20px;
}

.split-section h2, /* セクションタイトル (ABOUT US) */
.split-section h3, /* 窓装飾プランナーとは？ */
.split-section p {
    /* ★★ 文字色を白に統一 ★★ */
    color: #fff;
    }


/* 上部テキストの装飾 */
.right-side .description-text {
    font-size: 1.1em;
    margin-bottom: 30px;
    padding-bottom: 20px;
    }

/* PCビュー (768px以上) で左右分割を有効化 */
@media (min-width: 768px) {
    .split-content {
        flex-direction: row; /* PCで左右横並び */
        justify-content: space-between;
        align-items: flex-start;
        text-align: left;
    }

    .left-side {
        width: 45%;
    }

    .right-side {
        width: 50%;
        padding-top: 25px; /* タイトルとの高さを合わせるため調整 */
    }
}

/* ================================================= */
/* 5. 選ばれる理由セクション (WHY CHOOSE US?) */
/* ================================================= */

.benefits-container {
    padding-top: 20px;
}

.benefit-block {
    display: flex;
    flex-direction: column; /* モバイルは縦積み */
    gap: 20px;
    margin-bottom: 60px; /* 各ブロック間の大きな余白 */
    align-items: center;
}

/* PCビュー (768px以上) で左右横並びを有効化 */
@media (min-width: 768px) {
    .benefit-block {
        flex-direction: row; /* PCで横並び */
        justify-content: space-between;
        align-items: center; /* 垂直方向の中央揃え */
    }
    
    .benefit-image-wrapper {
        flex: 1; /* 画像が占める幅 */
        max-width: 45%;
    }
    
    .benefit-text-wrapper {
        flex: 1; /* テキストが占める幅 */
        max-width: 45%;
        padding: 0 30px; /* 中央の空間を意識した余白 */
    }
    
    /* ★★【ジグザグ配置の実現】画像とテキストの順序を反転 ★★ */
    .benefit-block.reverse {
        flex-direction: row-reverse;
    }
}


/* 3. テキストと画像のデザイン */
.benefit-image-wrapper {
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 画像に薄い影をつけて浮き立たせる */
}

.benefit-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.benefit-title {
    font-size: 1.4em;
    color: #333;
    /* ★★ 縦のラインを意識した下線を追加 ★★ */
    border-left: 5px solid #C0A880; 
    padding-left: 15px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.benefit-text-wrapper p {
    font-size: 1em;
    line-height: 1.7;
    color: #555;
}

/* ================================================= */
/* 6. 社長メッセージセクション (CEO Section) */
/* ================================================= */

.ceo-profile {
    display: flex;
    flex-direction: column; /* モバイルでは縦並び */
    align-items: flex-start;
    gap: 20px;
    margin: 40px auto 0;
    padding: 30px 0; 
    max-width: 768px;
    
    /* ★★【縦のライン】コンテンツ全体を囲む縦線 ★★ */
    border-left: 1px solid rgba(0, 0, 0, 0.15); 
    border-right: 1px solid rgba(0, 0, 0, 0.15); 
}

/* PCビュー (768px以上) で左右横並びを有効化 */
@media (min-width: 768px) {
    .ceo-profile {
        display: flex;
        gap: 40px;
        align-items: flex-start; /* 上端は揃える */
    }

    .side-image {
        width: 200px;
        height: 100%; /* ←ここで縦長に見せる */
        object-fit: cover;
    }
}

/* 1. 社長写真（左側） */
.ceo-profile .side-image {
    width: 200px;           /* 横幅固定 */
        height: auto;           /* 高さは自動 */
        object-fit: cover;      
        margin-top: auto;       /* 下端を揃えるために余白を自動調整 */
        margin-bottom: auto;
       }

.side-image  {
    width: 200px;
    height: 100%;
    object-fit: cover;
       }    
       
       

/* 2. メッセージコンテンツ（右側） */
.message-content {
    flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* テキスト上下を広げる */
}

.ceo-message {
    font-size: 0.9em;
    line-height: 1.7;
    color: #444;
}

/* 代表者名のスタイル (メッセージの直上に配置) */
.ceo-name {
    font-size: 0.9em;
    font-weight: normal;
    color: #555;
    margin-bottom: 10px; /* メッセージとの間にスペース */
   display: inline-block; 
   border-bottom: 3px solid #C0A880; /* アクセントカラーの下線 */
    padding-bottom: 5px; /* 下線と文字の間に少しスペースを空ける */
    letter-spacing: 0.1em; 
}

.ceo-name span {
    /* ★★ 氏名を大きく、太く目立たせる ★★ */
    font-size: 1.5em; /* 役職名 (0.9em) より大きくする */
    font-weight: bold; 
    color: #333; /* 濃い色に戻して強調 */
    margin-left: 5px; /* 役職名との間に少しスペース */
    line-height: 1; /* 行の高さを詰める */
    margin-top: -5px; /* 役職名に対して上に少し持ち上げる（見た目の微調整） */
    letter-spacing: 0.2em;
}

/* ================================================= */
/* 7. PCビューでの下線配置の調整 */
/* ================================================= */

/* PCビュー (768px以上) */
@media (min-width: 768px) {
    /* ... 既存のPCレイアウトの設定 ... */
    
    .ceo-name {
        text-align: left; /* 左寄せ維持 */
    }
    
    /* ★★ PCレイアウトでの下線の位置調整 ★★ */
    .ceo-name::after {
        left: 0; /* 左寄せの時は左端に合わせる */
    }
}

/* モバイルビュー (767px以下) */
/* モバイルの時は、中央寄せのメッセージに合わせて下線も中央に配置します */
.message-content {
    text-align: center; /* モバイルでは中央寄せ */
}

.ceo-name::after {
    /* モバイルの中央寄せに対応 */
    left: 50%;
    transform: translateX(-50%); /* 下線を正確に中央に配置 */
}


/* メッセージのスタイル (モバイルでは中央寄せ) */
.ceo-message {
    font-size: 1.25em; /* メッセージを大きく、読みやすく */
    color: #555;
    line-height: 1.6;
    /* text-align: center; は .message-content の設定で適用 */
}


/* ★★ PCビュー (768px以上) で左右分割を再適用 ★★ */
@media (min-width: 768px) {
    .ceo-profile {
        flex-direction: row; /* 左右に並べる */
        justify-content: space-between; /* 両端寄せ */
        align-items: stretch; 
        gap: 40px;
    }

    .ceo-profile .side-image {
        order: 2; /* ★★ 画像を右に配置 ★★ */
        width: 300px; /* PCではさらに大きく */
        object-fit: cover;   /* 枠いっぱいに収める */
        height: auto;        /* 高さは親に合わせる */
    }

    .message-content {
        order: 1; /* ★★ テキストを左に配置 ★★ */
        width: calc(100% - 200px - 40px); /* 画像とギャップの分を引いた残り */
        text-align: left; /* ★★ テキストは左寄せ ★★ */
        display: flex;
        flex-direction: column; /* メッセージ内で縦配置 */
        justify-content: space-between; /* 上下の余白を均等に */
    }

    .ceo-name {
        text-align: left; /* ★★ 代表者名も左寄せ ★★ */
    }
    
    .ceo-message {
        text-align: left; /* ★★ メッセージも左寄せ ★★ */
    }
}


/* ================================================= */
/* 7. スタッフ紹介セクション (OUR TEAM) */
/* ================================================= */

/* .team-section は共通の .section スタイルが適用されます */

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 常に2列 */
    gap: 30px;
    margin-top: 40px;
}

.team-member {
    text-align: center;
    background-color: transparent; /* 背景を透明にし、LP背景に溶け込ませる */
    padding: 10px;
}

/* 1. 写真の装飾 */
.member-photo {
    width: 100%;
    height: 300px; /* 高さを固定して揃える */
    object-fit: cover;
    display: block;
    margin-bottom: 15px;
    border-radius: 4px;
    
    /* ★★【縦のライン】写真の上下にゴールドの線を追加 ★★ */
    border-top: 2px solid #C0A880; 
    border-bottom: 2px solid #C0A880; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 薄い影で立体感を少し出す */
}

/* 2. テキスト情報 */
.member-name {
    font-size: 1.3em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #333;
    margin-bottom: 5px;
}

.member-title {
    font-size: 0.95em;
    color: #C0A880; /* アクセントカラーで肩書きを強調 */
    font-weight: 500;
    margin-bottom: 10px;
}

.member-message {
    font-size: 0.9em;
    line-height: 1.5;
    color: #555;
}




/* その他の画像設定 */
.full-width-image {
    width: 100vw; /* モバイルでは画面幅いっぱいに広がる */
    /* 中央固定コンテンツから外側に広げるトリック */
    margin-left: calc(50% - 50vw); 
    height: auto;
    margin-bottom: 30px;
}

/* 📱スマホ対応（画面幅768px以下） */
@media screen and (max-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* ← 2列維持 */
        gap: 15px; /* スマホでは少し隙間を狭める */
    }

    .member-photo {
        aspect-ratio: 3 / 4; /* ← スマホでは少し横長にして顔切れを防ぐ */
        height: auto; /* ← 固定高さ解除 */
    }
}



/* ================================================= */
/* 7. 口コミ評価セクション (Review Section) */
/* ================================================= */

.review-section {
    text-align: center; /* コンテンツを中央寄せ */
    padding: 30px 10px;
    background-color: #758d8b;
    color: #fff;
}

.review-section .section-title,
.review-section .review-count {
    color: #fff; /* 白文字に統一 */
}

.review-container {
    max-width: 400px;
    margin: 30px auto;
    padding: 20px;
    
    /* ★★【縦のライン】細い線でブロックを囲む（信頼感を強調） ★★ */
    border: 1px solid rgba(255, 253, 253, 0.2); 
    border-radius: 4px;
}

/* 1. 評価スコアの強調 */
.google-rating {
    margin-bottom: 15px;
}

.rating-score {
    font-size: 1.2em;
    color: #ffffff;
    margin-bottom: 10px;
}

.rating-score span {
    /* スコアの数字を大胆に、アクセントカラーで強調 */
    font-size: 3em; 
    font-weight: 700;
    color: #C0A880; /* ゴールドで強調 */
    display: block; /* 改行して、スコアだけを大きく見せる */
    line-height: 1;
}

/* 2. 星のデザイン */
.stars {
    display: block;
    font-size: 1.8em;
    margin-bottom: 10px;
}

.star {
    color: #ddd; /* 塗られていない星の色 */
}

.star.filled,
.star.half {
    color: #C0A880; /* ★★ 塗られた星をゴールドに統一 ★★ */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 半分だけ塗る */
.star.half {
  background: linear-gradient(90deg, #C0A880 50%, #ccc 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* 3. 口コミ件数とボタン */
.review-count {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 25px;
}

.review-link-btn {
    /* 共通の .primary-btn (背景色 #C0A880) を適用 */
    display: inline-block;
    padding: 12px 25px;
}

/* ================================================= */
/* 8. 施工事例セクション (Case Study Section) */
/* ================================================= */

.case-study-section {
    /* 他のセクションと同じ基本スタイルを使用 */
    padding: 40px 20px;
}

.section-description {
    text-align: center;
    color: #555;
    margin-bottom: 30px;
    font-size: 1.1em;
}

/* 施工事例のグリッドコンテナ */
.case-study-grid {
    display: grid;
    /* モバイルファースト: 1列に積み上げる */
    grid-template-columns: 1fr;
    gap: 30px; /* カード間のスペース */
    margin-bottom: 40px;
}



/* 事例カードのスタイル */
.case-card {
    padding: 0 30px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden; /* 画像を角丸に収める */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    /* ホバーでカードが少し浮き上がるエフェクト */
    cursor: pointer;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.case-image {
    width: 100%;
    height: auto;            /* 高さは自動 */
    aspect-ratio: 4 / 3;     /* 横:縦の比率を指定 */
    object-fit: cover;       /* 枠いっぱいに収める */
}

.case-content {
    padding: 20px 15px;
}

.case-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #C0A880; /* アクセントカラー */
    margin-bottom: 10px;
}

.case-text {
    font-size: 0.95em;
    color: #555;
    line-height: 1.5;
}

/* 全事例を見るボタン */
.primary-btn {
    display: block;
    width: 250px;
    margin: 0 auto;
    padding: 12px 20px;
    background-color: #C0A880;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.primary-btn:hover {
    background-color: #a89170;
}

/* ================================================= */
/* 9. 新築限定プランセクション (Special Plan Section) */
/* ================================================= */

.special-plan-section {
    padding: 50px 20px;
    text-align: center;
}

.plan-card-wrapper {
    /* 複数のプランカードを横並びにする場合はFlexbox/Gridの設定をここに入れる */
    /* width: 100%; max-width: 900px; margin: 0 auto; */
    text-align: center; /* カードを中央に寄せる */
}

.plan-card {
    /* 以前のカードデザインを完全にリセット */
    background-color: transparent; /* 背景を透明にする */
    box-shadow: none;
    border: none;
    padding: 0;
    margin: 0 auto;
    max-width: 400px; /* プランカードの最大幅を調整 */
}

.plan-label {
    /* プランのラベルは太字でシンプルに */
    font-size: 0.9em;
    font-weight: 700;
    color: #C0A880; /* ゴールドでアクセント */
    margin-bottom: 5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.plan-title {
    font-size: 1.8em;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.plan-image-container {
    margin: 40px auto; /* 上下左右に余白 */
    width: 90%; /* 幅を少し狭めて中央に寄せる */
    max-width: 800px; /* PCでの最大幅 */
    border-radius: 12px;
    overflow: hidden; /* 画像の角を丸めるため */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 影をつけて浮き立たせる */
}

.plan-main-image {
    width: 100%;
    height: auto;
    display: block; /* 画像の下の余白を消す */
}


.price-box {
    /* 背景色を維持し、上下の線を強調 */
    background-color: #fffefd; /* 薄いベージュ系の背景色を維持 */
    border: none;
    border-top: 3px solid #C0A880; /* ★★【アクセント線】ゴールドの上線 ★★ */
    border-bottom: 3px solid #C0A880; /* ★★【アクセント線】ゴールドの下線 ★★ */
    border-radius: 0;
    padding: 20px;
    margin-bottom: 30px;
}

.price-detail {
    font-size: 1em;
    color: #555;
    margin-bottom: 5px;
}

.tax-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

.main-price {
    font-size: 1.8em;
    font-weight: 700;
    color: #C0A880; /* 本体価格をゴールドで強調 */
}

.price-value {
    font-size: 1.5em; /* 価格の数字だけ少し小さく */
}

.benefit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: left; /* リストを左寄せにする */
}

.benefit-list li {
    font-size: 1.05em;
    color: #444;
    padding: 10px 0;
    /* ★★【縦のライン】リストの項目を細い線で区切る ★★ */
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1); 
    display: flex;
    align-items: flex-start;
}

.benefit-list li:first-child {
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

.check-icon {
    font-size: 1.2em;
    color: #C0A880; /* チェックマークをゴールドに */
    margin-right: 10px;
    line-height: 1.5; /* テキストと高さを揃える */
}

.note-text {
    font-size: 0.85em;
    color: #777;
    margin-top: 20px;
}

.action-prompt {
    margin-top: 40px;
}

.prompt-text {
    font-size: 1.3em;
    font-weight: bold;
    color: #333;
}

.smooth-text {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 20px;
}

.large-btn {
    width: 320px; /* 通常のボタンより大きくする */
    padding: 15px 30px;
    font-size: 1.2em;
}

.plan-content-wrapper {
    display: flex;
    flex-direction: column; /* モバイルは縦並び */
    gap: 40px; 
    align-items: center; 
    padding: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

@media (min-width: 992px) {
    .plan-content-wrapper {
        /* ★★ 画像（plan-image-container）を前に持ってくるために順序を反転 ★★ */
        flex-direction: row-reverse; 
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .plan-text-block {
        flex: 1; 
        max-width: 50%;
        /* 左側に画像が来たため、padding-leftは不要 */
        text-align: left; 
    }
    
    .plan-image-container {
        flex: 1; 
        max-width: 45%; 
    }
}


/* ================================================= */
/* 10. 出張見積もり・サービスフローセクション */
/* ================================================= */

.service-flow-section {
     padding: 50px 20px;
}

.flow-container {
    display: grid;
    /* モバイル: 縦に積み上げ */
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 40px auto;
}

/* PCビュー (768px以上) で3列横並びを有効化 */
@media (min-width: 768px) {
    .flow-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

.flow-step {
    text-align: center;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #fcfcfc;
    position: relative;
}

/* ステップ番号のデザイン */
.step-number {
    display: block;
    font-size: 2.5em;
    font-weight: 900;
    color: #C0A880; /* アクセントカラー */
    margin-bottom: 10px;
    line-height: 1;
    /* モバイルではここで十分ですが、PCでは矢印などで流れを表現しても良いでしょう */
}

.flow-step h3 {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.flow-step p {
    font-size: 0.95em;
    color: #555;
}

.cta-bottom {
    text-align: center;
    margin-top: 50px;
    padding-top: 30px;
    }

.cta-message {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

/* ================================================= */
/* 11. アフターフォローセクション (Support Section) */
/* ================================================= */

.support-section {
    background-color:#758d8b;
     padding: 50px 20px;
}

.support-section .section-title,
.support-section .section-description {
    color: #fff !important; 
    }

.support-grid {
    display: grid;
    /* モバイル: 2列でコンパクトに */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 40px auto;
    max-width: 1000px;
}

/* PCビュー (768px以上) で4列横並びを有効化 */
@media (min-width: 768px) {
    .support-grid {
        /* PCでは4列均等に横並び */
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}

.support-item {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.79);
    padding: 20px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.support-icon {
    /* アイコン（絵文字）のスタイル */
    display: block;
    font-size: 2.5em; 
    margin-bottom: 10px;
    line-height: 1;
    color: #C0A880; /* アクセントカラーに合わせる（絵文字なので一部反映しない可能性あり） */
}

.support-item h3 {
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    /* 1行で収まらない場合は、適宜 line-height を調整 */
}

.support-item p {
    font-size: 0.85em;
    color: #555;
    line-height: 1.4;
}

/* ================================================= */
/* 9. よくある質問 (FAQ) セクション */
/* ================================================= */

.faq-section {
    /* 他のセクションと同じ基本設定 */
    text-align: center;
    padding: 60px 0; /* 左右のパディングはコンテナで調整 */
    margin: 0 auto;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); 
}

.faq-container {
    max-width: 900px; /* 読みやすい幅に制限 */
    margin: 40px auto 0 auto;
    padding: 0 20px; /* スマホ用の左右パディング */
    text-align: left;
}

.faq-item {
    border: 1px solid #ddd; /* 外枠 */
    border-radius: 6px;
    margin-bottom: 15px;
    overflow: hidden; /* アコーディオンの動きに対応 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 控えめな影 */
}

/* 質問 (Q) スタイル */
.faq-question {
    cursor: pointer; /* クリックできることを示す */
    padding: 18px 20px;
    background-color: #fcfcfc; /* 非常に薄い背景 */
    color: #333;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #eee; /* 質問と答えの区切り線 */
}

.q-mark {
    /* Qのマークのデザイン */
    font-size: 1.2em;
    font-weight: 700;
    color: #C0A880; /* ゴールドカラー */
    margin-right: 15px;
    display: inline-block;
    min-width: 1.2em;
}

/* 答え (A) スタイル */
.faq-answer {
    padding: 20px 20px 20px 55px; /* Qのインデントに合わせて調整 */
    background-color: #fff;
    color: #555;
    line-height: 1.7;
    /* ★★ JavaScriptで開閉するため、デフォルトは隠す（JS実装時に削除） ★★ */
    /* display: none; */ 
    /* max-height: 0; 
    transition: all 0.3s ease; */
}

.a-mark {
    /* Aのマークのデザイン */
    font-size: 1.2em;
    font-weight: 700;
    color: #333; 
    position: absolute; /* Qのマーク位置に合わせるため */
    margin-left: -40px; 
    margin-top: -3px;
    min-width: 1.2em;
}

/* 答えの本文内での強調 */
.faq-answer strong {
    color: #C0A880; /* ゴールドで重要な部分を強調 */
    font-weight: 700;
}


/* ================================================= */
/* 12. 最終CTA・お問い合わせセクション (Contact Section) */
/* ================================================= */

/* 1. セクション全体のスタイル */
.contact-section {
       padding: 60px 20px;
}

.contact-methods {
    /* 画像とグリッドを縦に並べるためのコンテナ */
    align-items: center;
    gap: 30px;
    margin-top: 0;
}

/* 2. 横長メイン画像のデザイン */
.contact-main-image-container {
    margin: 30px auto 40px; /* 上下に余白 */
    width: 100%; 
    max-width: 1000px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.contact-main-image {
    width: 100%;
    min-height: 250px; /* 画像の縦長比率を固定（適宜調整） */
    max-height: 350px;
    height: auto;
    object-fit: cover;
    display: block;
}

/* 3. 3つのお問い合わせ方法（methods-grid）のスタイル */
.methods-grid {
    display: grid;
    /* モバイルでは1列（縦積み） */
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    max-width: 1000px;
}

/* PCビュー (992px以上) で3列横並びを有効化 */
@media (min-width: 992px) {
    .methods-grid {
        /* PCでは3列均等に横並び */
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* 4. 各コンタクトボックスのスタイル（高さ揃えのコア部分） */
.contact-box {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    
    /* ★★ 高さ揃えの必須設定 ★★ */
    min-height: 200px; /* 必要最低限の高さ（コンテンツ量に合わせて調整） */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* アイテムを上から配置 */
}

.contact-icon {
    display: block;
    font-size: 2em;
    margin-bottom: 5px;
}

/* 5. 連絡手段ごとの調整（ボタンを底に固定） */

/* LINE, フォームのボタン */
.line-btn, .form-btn {
    width: 100%;
    padding: 12px 0;
    margin-top: auto; /* ★★ これでボタンが底に張り付く ★★ */
}

/* LINE */
.line-box {
    background-color: #ffffff; 
}
.line-btn {
    background-color: #00b900;
}

/* 電話 */
.tel-number {
    font-size: 1.6em;
    font-weight: bold;
    color: #777; 
    margin: 10px 0 5px 0;
    margin-top: auto; /* ★★ これで電話番号が底近くに張り付く ★★ */
}

.tel-time {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 5px; /* 電話番号の直上に配置 */
}

/* フォーム */
.form-btn {
    background-color: #ffffff;
}

.event-button-container {
  text-align: center; /* ボタンを中央に配置 */
  margin: 40px 0;     /* 上下の余白 */
}

.event-button {
  display: inline-block;
  background-color: #C0A880; /* ボタン色 */
  color: #fff;
  font-weight: bold;
  padding: 12px 30px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.event-button:hover {
  background-color: #a68c68; /* ホバー時の色 */
}




.job-banner {
  text-align: center;
  margin: 40px 0;
}

.job-banner img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.job-banner img:hover {
  transform: scale(1.05);
}


/* ================================================= */
/* 4. フッター */
/* ================================================= */


/* 地図と住所を横並びにするためのスタイル */
.map {
  padding: 40px 16px;
  background-color: #f9f9f9; /* 地図セクションだけ薄いグレー背景 */
}

.map h2 {
  font-size: 1.5rem; /* 2xlに相当 */
  font-weight: 600; /* semiboldに相当 */
  text-align: center; /* centerに相当 */
  margin-bottom: 2rem; /* mb-6に相当 */
}

.map-container {
  display: flex;
  flex-wrap: wrap; /* 小さい画面では折り返す */
  gap: 20px; /* 住所と地図の間に少し間隔 */
  max-width: 1000px;
  margin: auto;
}

.contact-info {
  display: flex;
  flex: 1;
  gap: 20px;
}

.address {
  flex: 1;
  font-size: 16px;
  line-height: 1.6;
}

.map-iframe {
  flex: 2; /* 地図の方を広めに */
}

.map-iframe iframe {
  width: 100%;
  height: 250px;
  border: 0;
  border-radius: 8px;
}



footer {
  background-color: #758d8b; /* ダークカラー背景 */
  color: white; /* テキストを白く */
  text-align: center;
  padding: 40px 20px;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-logo img {
  max-width: 200px; /* ロゴのサイズ調整 */
  height: auto;
  margin-bottom: 20px; /* ロゴとSNSアイコンの間に余白 */
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px; /* アイコン間のスペース */
}

.social-icon {
  color: white;
  font-size: 24px;
  text-decoration: none;
  transition: color 0.3s ease; /* ホバー時の色変更アニメ */
}

.social-icon:hover {
  color: #ff7f50; /* ホバー時の色（オレンジ系） */
}

footer p {
  font-size: 14px;
  margin-top: 20px;
}