.sub_heading_container{
    background-image: url(https://build.forf-homepage-samplesite.net/wp-content/themes/floor_coating/img/64000000.svg);
    background-size: cover;
}
.sub_heading_wrapper{
    display: flex;
    align-items: center;
}
.sub_heading_content{
    width: 1360px;
    margin: 0 auto;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sub_heading_content h2{
    font-size: 40px;
}
.sub_heading_content p{
    font-size: 20px;
    line-height: 40px;
    width: 60%;
    margin-top: 10px;
}

.mvv_section {
    padding: 60px 20px;
    background-color: #fff;
}
.mvv_section{
    padding-top: 80px;
    padding-bottom: 80px;
}
.mvv_flex {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.mvv_box {
    position: relative;
    flex: 1 1 30%;
    background: #f3faff;
    border: 2px solid #2996d3;
    border-radius: 10px;
    padding: 60px 25px 25px;
    box-sizing: border-box;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: left;
    min-width: 300px;
}

.mvv_title {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #3ab0ff, #0078d7);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    padding: 10px 40px;
    border-radius: 30px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.mvv_text {
    font-size: 15px;
    line-height: 1.9;
    color: #111;
}

.mvv_text p + p {
    margin-top: 10px;
}

@media (max-width: 768px) {
    .mvv_flex {
        flex-direction: column;
        gap: 25px;
    }
    .mvv_box {
        padding: 55px 20px 20px;
    }
    .mvv_title {
        font-size: 18px;
        padding: 8px 30px;
    }
}

.greeting__inner{
    display: flex;
    max-width: 1360px;
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 80px;
    gap: 40px;
    align-items: flex-start;
}
.greeting__head{
    width: 60%;
}
.greeting__head h2{
    font-size: 25px;
    margin-top: 10px;
}
.greeting__head h3{
    font-size: 20px;
}
.greeting__flex{
    width: 40%;
}
.greeting__text{
    margin-top: 20px;
}
.greeting__text p{
    line-height: 45px;
}
.greeting__flex span.role{
    font-size: 20px;
}
.greeting__flex span.name{
    font-size: 18px;
}

/* ===== base ===== */
.timeline{
    max-width:1360px;
    margin:0 auto;
    padding:24px 20px 40px;
    position:relative;
    box-sizing:border-box;
    margin-top: 60px;
    margin-bottom: 80px;
}
.timeline__title{
    font-size:30px;
    font-weight:700;
    margin:0 0 16px;
    margin-bottom: 20px;
}
/* ===== left rail (縦ライン) ===== */
.timeline::before {
    content: "";
    position: absolute;
    left: 163px;
    top: 64px;
    width: 10px;
    height: var(--line-height, 0); /* ← JSでここを更新 */
    background: #55A3CC;
    border-radius: 10px;
    margin-top: 80px;
    transition: height 0.2s ease-out;
}
/* ===== each row ===== */
.tl-row{
    position:relative;
    display:flex;
    gap:36px;
    align-items:flex-start;
    padding:24px 0;
    height: 150px;
    font-size: 22px;
}

/* 年の青ラベル（レールに跨る角丸長方形） */
.tl-year{
    position:relative;
    min-width:300px;
    max-width:300px;
    height:44px;
    line-height:44px;
    padding:0 16px;
    background:#55A3CC;
    color:#fff;
    font-weight:700;
    text-align:center;
    border-radius:8px;
    box-shadow:0 6px 16px rgba(85,163,204,.28);
    z-index:1;
    box-sizing: border-box;
    margin-top: 5px;
}

/* 月+テキストのカラム */
.tl-events{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content: center;
  padding-top:6px;
}

/* 1イベント行 */
.tl-event{
  display:flex;
  align-items:flex-start;
  gap:16px;
  position:relative;
  align-items: center;
}

/* 月（青い輪の◯月） */
.tl-month{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:64px;
  font-weight:700;
  color:#1f2937;
  position:relative;
  padding-left:32px;
}
.tl-month::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  border:3px solid #55A3CC;
  border-radius:50%;
  background:#fff;
}

/* テキスト */
.tl-text{
  line-height:1.9;
  color:#222;
}

/* イベント行の縦ガイド（薄いブルー点線に近い印象） */
/*
.tl-event::after{
  content:"";
  position:absolute;
  left:9px;
  top:26px;
  width:2px;
  height:calc(100% - 26px);
  background:#55A3CC;
  opacity:.25;
}
*/
.tl-events .tl-event:last-child::after{ display:none; }

/* ===== responsive ===== */
@media (max-width:960px){
  .timeline::before{ left:90px; }
  .tl-year{ margin-left:90px; min-width:160px; max-width:160px; }
}
@media (max-width:640px){
  .timeline{ padding:16px 16px 32px; }
  .timeline::before{ left:16px; top:56px; }
  .tl-row{ flex-direction:column; gap:14px; padding:18px 0; }
  .tl-year{
    margin-left:16px;
    transform:none;
    min-width:auto; max-width:none; width:max-content;
    height:40px; line-height:40px; padding:0 12px;
  }
  .tl-month{ padding-left:28px; min-width:56px; }
  .tl-month::before{ width:16px; height:16px; border-width:2px; }
  .tl-event::after{ left:7px; }
}


/* table.css */
:root {
  --bg-zebra: #eef3f6;
  --bg-card: #f3f8fb;
  --text: #263238;
  --muted: #546e7a;
  --line: #e2e8f0;
  --link: #0b66c3;
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  color: var(--text);
  background: #fff;
  line-height: 1.8;
}

.company-section {
  max-width: 1360px;
  width: min(95vw, 1360px);
  margin: 48px auto 96px;
}

.company-heading {
  text-align: center;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: .06em;
  padding: 18px 12px;
  margin: 0 0 20px;
  background: var(--bg-card);
  border-radius: 12px;
}

.company-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .06);
}

/* 行の上下にゆったりスペース */
.company-table th,
.company-table td {
  padding: clamp(16px, 2.2vw, 28px) clamp(14px, 2vw, 24px);
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  font-size: clamp(14px, 1.5vw, 16px);
}

/* 左列（見出し） */
.company-table th {
  width: 240px;              /* 固定幅（SPでは可変） */
  background: var(--bg-zebra);
  color: #111827;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

/* しましまの帯感を強める */
.company-table tr:nth-child(odd) th {
  background: #e9f1f6;
}

/* 右列（内容） */
.company-table td {
  color: var(--text);
}

/* 連絡先のTELとリンクを横並び → SPで縦並び */
.contact {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.link {
  color: var(--link);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.link:hover { text-decoration: underline; }

/* 対応施工の2カラムグリッド（SPは1カラム） */
.works-grid {
  --gap: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap) 48px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.works-grid li {
  position: relative;
  padding-left: 1.1em;
}
.works-grid li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--muted);
}

/* 角丸最終行のボーダー消し */
.company-table tr:last-child th,
.company-table tr:last-child td {
  border-bottom: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* レスポンシブ */
@media (max-width: 800px) {
  .company-table th { width: auto; }
  .works-grid {
    grid-template-columns: 1fr;
    gap: 10px 20px;
  }
}
.greeting{
  max-width: 1360px;
  margin: 0 auto;
}
.greeting__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px){

    /* =========================
       sub_heading（1360/500 → SP最適化）
    ========================= */
    .sub_heading_wrapper{
        padding-left: 5vw;
        padding-right: 5vw;
        box-sizing: border-box;
    }

    .sub_heading_content{
        width: 100%;
        height: auto;
        min-height: 360px;
        padding-top: 56px;
        padding-bottom: 56px;
        box-sizing: border-box;
    }

    .sub_heading_content h2{
        font-size: 24px;
        line-height: 1.35;
    }

    .sub_heading_content p{
        width: 100%;
        font-size: 14px;
        line-height: 1.9;
        margin-top: 14px;
    }


    /* =========================
       mvv（3カラム → 縦積み）
       ※あなたの既存768px指定をそのまま踏襲＋微調整
    ========================= */
    .mvv_section{
        padding-top: 56px;
        padding-bottom: 56px;
        padding-left: 5vw;
        padding-right: 5vw;
        box-sizing: border-box;
    }

    .mvv_flex{
        flex-direction: column;
        gap: 25px;
        max-width: 100%;
    }

    .mvv_box{
        min-width: 0;
        width: 100%;
        padding: 55px 20px 20px;
        box-sizing: border-box;
    }

    .mvv_title{
        font-size: 18px;
        padding: 8px 30px;
    }

    .mvv_text{
        font-size: 14px;
        line-height: 1.9;
    }


    /* =========================
       greeting（60/40 → 縦積み）
    ========================= */
    .greeting__inner{
        flex-direction: column;
        gap: 18px;
        padding-top: 56px;
        padding-bottom: 56px;
        padding-left: 5vw;
        padding-right: 5vw;
        box-sizing: border-box;
    }

    .greeting__head,
    .greeting__flex{
        width: 100%;
    }

    .greeting__head h3{
        font-size: 16px;
        line-height: 1.5;
    }

    .greeting__head h2{
        font-size: 20px;
        line-height: 1.4;
        margin-top: 8px;
    }

    .greeting__text{
        margin-top: 14px;
    }

    .greeting__text p{
        line-height: 1.9;
        font-size: 14px;
    }

    .greeting__flex span.role{
        font-size: 16px;
    }

    .greeting__flex span.name{
        font-size: 15px;
    }


    /* =========================
       timeline（960/640指定は既存）
       ※768以下での余白/文字だけ補強（HTML変更なし）
    ========================= */
    .timeline{
        padding: 16px 16px 32px;
        margin-top: 44px;
        margin-bottom: 56px;
    }

    .timeline__title{
        font-size: 22px;
        margin-bottom: 14px;
    }

    .tl-row{
        font-size: 16px;
        height: auto;
        padding: 18px 0;
    }

    .tl-text{
        line-height: 1.9;
        font-size: 14px;
    }


    /* =========================
       company table（800以下は既存）
       ※768以下での余白・見出しを最適化
    ========================= */
    .company-section{
        width: 100%;
        margin: 36px auto 72px;
        padding-left: 5vw;
        padding-right: 5vw;
        box-sizing: border-box;
    }

    .company-heading{
        font-size: 22px;
        padding: 14px 12px;
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .company-table th,
    .company-table td{
        padding: 14px 14px;
        font-size: 14px;
        line-height: 1.8;
    }

    .company-table th{
        white-space: normal;
    }

    .contact{
        flex-direction: column;
        gap: 10px;
    }


    /* =========================
       greeting photo（既存object-fit維持）
       ※高さが潰れないようにSPだけ比率指定
    ========================= */
    .greeting{
        padding-left: 5vw;
        padding-right: 5vw;
        box-sizing: border-box;
    }

    .greeting__photo img{
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

}

/*---flow---*/
.choice_page {
    width: 100%;
}

/* =========================
   上部 選択エリア
========================= */

.choice_container {
    padding: 60px 20px;
	background: #fffdf3
}

.choice_wrapper {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.choice_badge {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 30px;
    background: #ffffff;
    border: 2px solid #4cc3ff;
    color: #008acb;
    font-weight: 700;
    margin-bottom: 40px;
}

.choice_title {
    font-size: 26px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.choice_text {
    font-size: 18px;
    margin-bottom: 40px;
}

.choice_buttons {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-bottom: 20px;
}

.choice_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 360px;
    height: 90px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 6px 0 rgba(0,0,0,0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.choice_button:hover {
    transform: translateY(3px);
    box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}

.choice_button.is_glossy {
    background: #4cc3ff;
}

.choice_button.is_matte {
    background: #43e28a;
}

.choice_note {
    font-size: 14px;
    color: #555;
}

/* =========================
   下部 お問い合わせエリア
========================= */

.support_container {
    background: #fffbe6;
    padding: 60px 20px;
}

.support_wrapper {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: center;
}

.support_illustration img {
    width: 220px;
}

.support_content h2 {
    font-size: 26px;
    margin-bottom: 12px;
}

.support_content p {
    font-size: 18px;
    margin-bottom: 30px;
}

.support_buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.support_button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 28px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.support_button.is_tel {
    background: #00b0ff;
}

.support_button.is_line {
    background: #2ad36b;
}

.support_button.is_mail {
    background: #ff5a3c;
}

/* =========================
   SP対応
========================= */

@media (max-width: 768px) {

    .choice_title {
        font-size: 20px;
    }

    .choice_buttons {
        flex-direction: column;
    }

    .choice_button {
        width: 100%;
        height: 80px;
        font-size: 20px;
    }

    .support_wrapper {
        flex-direction: column;
        text-align: center;
    }

    .support_buttons {
        justify-content: center;
    }

}