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

/* 全体設定 */
body {
    font-size: 18px;
    font-family: 'Noto Sans JP', sans-serif; /* デザインに近いフォントを指定 */
    line-height: 1.6;
    color: #333;
    background-color: #ffffff;
}

img {width: 100%;}

h2 {
    font-family: "游明朝体", "Yu Mincho", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
    font-size: 36px;
}

@media screen and (max-width: 787px) { 
    h2 {font-size: 24px;}
}

/* 共通コンテナ */
.container {
    max-width: 1200px; /* 全体の幅を調整 */
    margin: 0 auto;
    padding: 0 20px;
}

/* 共通セクション設定 */
section {
    padding: 60px 0;
    overflow: hidden; /* 子要素の float 対策 */
}

/* 共通ボタン（お問い合わせはこちら） */
.btn-red {
    display: block;
    width: 300px;
    margin: 20px auto;
    padding: 15px 30px;
    background-color: #e65243; /* 赤色 */
    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
}

.btn-red:hover {
    background-color: #d14134;
}

.btn_side {
    position: fixed;
    right: 0;
    top: 20%;
    z-index: 99;
}

@media screen and (max-width: 787px) { 
    .btn_side {display: none;}
}

/* --- 1. ヒーローセクション --- */
.section-hero {
    /* 画像を背景に設定 */
    background-image: url('img/main_back.webp'); /* 実際の画像パスに変更 */
    background-size: cover;
    background-position: center top; /* 画像上部を基準に表示 */
    min-height: 750px; /* 高さの調整 */
    padding: 30px 0;
    position: relative;
}

.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 30px;
}

.hero-text-box {
}

.hero-title {
    font-family: 'Zen Maru Gothic', serif;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 10px;
}

.hero-logo {
    width: 100%;
    max-width: 450px;
    height: auto;
    position: absolute;
    top: 130px;
}

/* 右上の赤いボタン */
.hero-contact-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 90px;
    background-color: #e65243;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 10px 0;
    /* 角を丸くする処理 */
    border-bottom-left-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
}


/* --- 2. 挨拶/メッセージセクション --- */
.section-message {
    background-color: #ffffff; /* 白い背景 */
    padding: 50px 0;
    text-align: center;
}

.message-content {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.message-photo-area {
    margin: 30px auto 30px; /* 上のセクションと被るように調整 */
}

.message-photo-area img {
    width: 100%;
    max-width: 376px;
}

.message-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.message-box {
    padding: 20px;
}

.message-box div h3 {
    font-size: 32px;
    margin-top: 90px;
    margin-bottom: 30px;
}

.message-box div p {
    font-size: 24px;
    line-height: 2;
}

.message-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.5;
}

.message-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

@media screen and (max-width: 787px) { 
    .hero-logo {max-width: 330px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .message-box div h3 {font-size: 24px; margin-top: 15px;}
    .message-box {padding: 20px 0;}
    .message-box div p {font-size: 16px;}

}

/* お問い合わせボタンは共通CSS (.btn-red, .with-arrow) を使用 */

/* --- 3. 企業実績/成長のセクション --- */
.section-achievements {
    background-color: #fff8f3; /* 薄いオレンジ色の背景 */
    padding: 50px 0;
    text-align: center;
}

/* 新しいオレンジ色のタイトルバッジ */
.section-badge-title-orange {
    display: inline-block;
    background-color: #f7962c; /* オレンジ色 */
    color: white;
    font-size: 1rem;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    margin-bottom: 30px;
}

.achievement-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 30px;
}

.achievement-photo-area {
    flex-basis: 50%;
    text-align: center;
}

.achievement-text {
    font-size: 1.1rem;
    font-weight: bold;
    color: #e65243;
    line-height: 1.5;
    margin-bottom: 10px;
}

.achievement-photo {
    width: 100%;
    height: auto;
    max-width: 350px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.achievement-stats-area {
    flex-basis: 50%;
    text-align: left;
}

.stats-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.growth-graph {
    display: flex;
    align-items: flex-end; /* 棒グラフを下揃えにする */
    height: 150px;
    padding-bottom: 5px;
    border-bottom: 2px solid #ccc;
    position: relative;
    margin-bottom: 20px;
}

.bar {
    width: 20%;
    background-color: #3b9c6a; /* 緑色 */
    margin: 0 5%;
    border-radius: 3px 3px 0 0;
}
.bar-1 { height: 40%; }
.bar-2 { height: 60%; }
.bar-3 { height: 80%; }
.bar-4 { height: 100%; }

.growth-arrow {
    position: absolute;
    bottom: 15px;
    left: 10%;
    font-size: 3rem;
    color: #3b9c6a; /* 緑色の矢印 */
    line-height: 1;
    font-weight: lighter;
    transform: rotate(-10deg);
}

.stats-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}

.highlight-number {
    display: block;
    font-size: 1.3rem;
    font-weight: bold;
    color: #e65243; /* 赤色で強調 */
    margin-bottom: 5px;
}


/* --- 4. リフォーム事例マップセクション --- */
.section-map {
    background-color: #ffffff; /* 白い背景 */
    padding: 50px 0;
    text-align: center;
}

.map-message {
    font-size: 1.1rem;
    margin-top: 15px;
    margin-bottom: 30px;
}

.map-image-area {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f7f7f7; /* マップの背景色 */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.local-map-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ボタンは共通CSS (.btn-red, .with-arrow) を使用 */


/* --- 1. 主なリフォームの流れとスケジュール (詳細版) --- */
.section-flow-detail {
    background-color: #ffffff; /* 白い背景を維持 */
    padding: 60px 0;
    text-align: center;
}

.flow-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;
}

.flow-detail-title {
    font-weight: bold;
    color: #333;
}

.schedule-icon {
    /* "schedule" 手書き風テキストとオレンジ色の円の代替 */
    width: 100px;
    height: 60px;
    background-image: url('path/to/orange_circle.png'); /* オレンジの円画像のパス */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    font-family: cursive; /* 手書き風フォントの代替 */
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 簡易テキスト表現 */
    /* text-align: center;
    padding-top: 5px; */
}
.schedule-icon::before {
}

/* フローチャート本体のレイアウト */
.flow-steps-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.flow-item-detail {
    position: relative;
    flex-shrink: 0;
    padding: 0 10px; /* アイテム間のスペース */
}

/* ステップのボックス (縦長のカプセル型) */
.step-box {
    width: 80px;
    height: 298px;
    border: 2px solid #333;
    border-radius: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.5;
    background-color: white;
    color: #333;
    z-index: 2;
    position: relative;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

/* 最終ステップ（引き渡し）の赤色装飾 */
.step-box.final-box {
    background-color: #e65243; /* 赤色 */
    border-color: #e65243;
    color: white;
}

/* 期間テキストと矢印 */
.flow-duration {
    flex-shrink: 0;
    position: relative;
    width: 60px; /* 期間と矢印の幅 */
    font-size: 0.85rem;
    color: #333;
    font-weight: bold;
    text-align: center;
    padding-bottom: 25px; /* 矢印のためのスペース */
}

/* 期間テキストの下にある点線と矢印 */
.flow-duration::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    border-top: 2px dotted #333; /* 点線 */
    transform: translateY(-50%);
}

.flow-duration::after {
    content: '→'; /* 矢印の表現 */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%) scale(1.5, 1);
    color: #333;
}

/* 最後の要素には期間と矢印を表示しない */
.flow-item-detail:last-child + .flow-duration {
    display: none;
}

/* レスポンシブ対応: 画面幅が狭い場合 */
@media (max-width: 768px) {
    .flow-steps-detail {
        flex-wrap: wrap; /* 折り返す */
        display: block;
    }
    .flow-item-detail {
        margin: 10px;
    }
    .flow-duration {
        width: 100%;
        margin: 10px 0;
        /* 縦型に変わる場合の調整が必要 */
    }
    /* ... 縦型フローチャートへの調整CSSは複雑なため省略します ... */
    .step-box {width: 100%; height: 60px; writing-mode: unset;}
    .flow-duration::before {content: unset;}
    .flow-duration::after {content: unset;}
}


/* --- 新セクション: お客さまの声 --- */
.section-voice-standalone {
    background-color: #fff8f3; /* 薄いオレンジ色の背景 */
    padding-top: 50px;
    padding-bottom: 50px;
}

.voice-content-wrapper {
    /* タイトルとリストを横並びにするためのレイアウト */
    display: flex;
    justify-content: center;
    max-width: 1200px;
    gap: 40px;
}

/* 左側のタイトルエリア */
.voice-title-col {
    flex-shrink: 0;
    width: 150px; /* タイトルバッジを配置する固定幅 */
    text-align: right;
    padding-top: 40px;
}

/* タイトルバッジのスタイル（既存の section-badge-title をベースに調整） */
.section-badge-title-voice {
    /* 画像にある「お客さまの声」の文字色とサイズ */
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    text-align: right;
}

/* 右側のリストエリア */
.voice-list-col {
    flex-grow: 1;
    max-width: 700px;
}

.voice-item {
    display: flex; /* 写真とテキストを横並びにする */
    align-items: flex-start; /* 上端を揃える */
    margin-bottom: 40px;
}

.voice-photo-area {
    flex-shrink: 0; /* 写真エリアが縮まないようにする */
    width: 120px;
    text-align: center;
    margin-right: 20px;
    padding-top: 10px;
}

.voice-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* 円形にする */
    object-fit: cover;
    border: 2px solid #e65243; /* 赤い枠線 */
}

.voice-bubble {
    position: relative;
    /* 吹き出し風ではなく、シンプルなテキスト配置に変更 */
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 10px;
    flex-grow: 1;
}

.voice-text {
    line-height: 1.7;
    color: #555;
}

/* CTAボタン */
.voice-cta-btn {
    margin-top: 20px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .voice-content-wrapper {
        flex-direction: column; /* 縦並びにする */
        align-items: center;
        gap: 20px;
    }
    
    .voice-title-col {
        width: 100%;
        text-align: center; /* タイトルを中央揃え */
        padding-top: 0;
    }
    
    .section-badge-title-voice {
        text-align: center;
    }

    .voice-list-col {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .voice-item {
        flex-direction: column; /* 写真とテキストを縦並びにする */
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }
    
    .voice-photo-area {
        margin-right: 0;
        margin-bottom: 15px;
        padding-top: 0;
    }
}


/* --- 3. コールトゥアクション（中段） --- */
.section-cta-mid {
    padding: 0; /* 背景画像全体を使うためパディングをリセット */
    /* 背景画像を画像に合わせて設定 */
    background-image: url('/img/DSC01573.png'); /* ここを実際の画像パスに変更してください */
    background-size: cover;
    background-position: center;
    min-height: 600px; /* 画像の高さに合わせて調整 */
    display: flex;
    align-items: center; /* ボックスを垂直中央に配置 */
}

.cta-background-image {
    /* 画像が全体に広がるように幅を100%に */
    width: 100%;
    /* コンテナの幅に合わせて中央配置 */
    max-width: 1200px; 
    margin: 0 auto;
    display: flex;
    justify-content: center; /* ボックスを水平中央に配置 */
    align-items: center;
    min-height: 350px;
}

.cta-overlay-box {
    background-color: rgba(255, 255, 255, 0.9); /* 白の半透明の背景 */
    padding: 30px 40px;
    border-radius: 8px;
    text-align: center;
    max-width: 600px;
    /* デザイン画像の傾きを表現するためのCSS (オプション) */
    transform: rotate(-1deg); 
    border: 1px solid #ddd;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.cta-text-main {
    font-family: 'Zen Maru Gothic', serif; /* デザイン画像に近い丸文字系フォントを使用 */
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
}

.cta-logo {
    width: 180px; /* ロゴサイズを調整 */
    height: auto;
    margin-top: 10px;
}


/* --- 4. 社長の想い --- */
.section-company {
    background-color: #ffffff; /* 白い背景 */
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* タイトルバッジ（2. お客様の声と同じCSSを使用） */
/* .section-badge-title { ... } */

.company-content {
    max-width: 1200px;
}

.company-grid {
    display: flex;
    align-items: center; /* 垂直中央揃え */
    justify-content: center;
    gap: 40px; /* 写真とテキストの間隔 */
    margin-top: 30px;
}

.company-photo-area {
    flex-basis: 50%; /* 幅の割合 */
    text-align: left;
}

.staff-photo {
    width: 100%;
    height: auto;
    max-width: 400px; /* 最大幅の指定 */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.company-text-area {
    flex-basis: 50%;
    text-align: left;
    padding-top: 20px;
}

.company-greeting {
    font-family: 'Zen Maru Gothic', serif;
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    line-height: 2; /* 行間を広げて見やすくする */
    margin-bottom: 20px;
}

.company-signature {
    font-size: 0.9rem;
    color: #777;
}

/* レスポンシブ対応: 画面幅が狭い場合 */
@media (max-width: 768px) {
    .company-grid {
        flex-direction: column; /* 縦並びにする */
    }

    .company-photo-area,
    .company-text-area {
        flex-basis: 100%;
        text-align: center; /* 写真とテキストを中央揃え */
    }

    .company-text-area {
        margin-top: 20px;
    }
}



/* --- 5. 採用情報 --- */
.section-recruit {
    background-color: #fff8f3; /* 薄いオレンジ色の背景 */
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

.recruit-message {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-top: 15px;
    margin-bottom: 30px;
}

.recruit-cards-grid {
    display: flex; /* カードを横並びにする */
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.recruit-card {
    background: white;
    border-radius: 8px;
    overflow: hidden; /* 画像がはみ出さないように */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    flex-basis: 45%; /* 各カードの幅 */
    text-align: left;
}

.card-photo {
    width: 100%;
    height: auto;
    display: block;
}

.card-text {
    padding: 15px 20px 20px;
}

.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #e65243; /* 赤色を強調 */
    margin-bottom: 5px;
}

.card-detail {
    font-size: 0.95rem;
    color: #555;
}

/* レスポンシブ対応: 画面幅が狭い場合 */
@media (max-width: 600px) {
    .recruit-cards-grid {
        flex-direction: column; /* 縦並びにする */
        gap: 20px;
    }
    .recruit-card {
        flex-basis: 100%;
    }
}


/* --- 6. 募集要項 --- */
.section-requirements {
    background-color: #ffffff;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

.section-requirements h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.requirements-table-wrapper {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden; /* ボーダーの表示をきれいに保つ */
}

/* 職種の見出し行 */
.job-titles {
    display: flex;
    background-color: #e65243; /* 赤色の背景 */
    color: white;
    font-weight: bold;
}

.job-title-item {
    flex-basis: 50%;
    padding: 10px 15px;
    text-align: center;
    border-right: 1px solid #d14134; /* 職種間の区切り線 */
    line-height: 1.3;
}
.job-title-item:last-child {
    border-right: none;
}

/* 定義リスト (dl) をテーブルのように使う */
.requirement-list {
    display: grid;
    /* 3つの列を作成: dt (項目)、dd (職種1)、dd (職種2) */
    grid-template-columns: 30% 35% 35%; 
}

.requirement-list dt,
.requirement-list dd {
    padding: 15px 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.requirement-list dt {
    font-weight: bold;
    color: #333;
}

.requirement-list dd {
    border-right: 1px solid #eee;
}
.requirement-list dd:last-of-type {
    border-right: none;
}

/* colspan属性を持つ項目 (勤務時間、休日など) の対応 */
[colspan="2"] {
    grid-column: span 2; /* 2つの列を結合する */
    border-right: none !important; 
}

.note-text {
    margin-top: 25px;
    font-size: 0.8rem;
    color: #777;
    text-align: left;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
}




*, *:before, *:after {
	box-sizing: border-box;
}
.col_5{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_5 > div{
	width: 20%;
	padding: 10px;
}
.col_5 > div > div{
	position: relative;
	overflow: hidden
}
@media screen and (max-width: 960px) {
	.col_5 > div{
		width: 25%;
	}
}
@media screen and (max-width: 480px) {
	.col_5 > div{
		width: 33.33333%;
	}
}


*, *:before, *:after {
	box-sizing: border-box;
}
.col_4{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
	width: 25%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_4 > div{
		width: 33.33333%;
	}
}
@media screen and (max-width: 480px) {
	.col_4 > div{
		width: 50%;
	}
}


*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 33.33333%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_3 > div{
		width: 50%;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}


*, *:before, *:after {
	box-sizing: border-box;
}
.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_2 > div{
	width: 50%;
	padding: 10px;
}
@media screen and (max-width: 960px) {
	.col_2 > div{
		width: 100%;
	}
}


.tar {text-align: right;}
.tac {text-align: center;}
.tal {text-align: left;}



/* --- 5. SoundsGoodのこだわり/特長 --- */
.section-commitment {
    background-color: #fff8f3; /* 薄いオレンジ色の背景 */
    padding: 60px 0;
    text-align: center;
}

.commitment-content {
    max-width: 1200px;
}

.commitment-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    text-align: left;
    padding: 0 20px;
}

.commitment-icon-area {
    flex-shrink: 0;
}

.reform-icon {
    /* オレンジ色の円をCSSで再現 */
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.commitment-text-area {
    flex-grow: 1;
    max-width: 600px;
}

.commitment-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.commitment-detail {
    line-height: 1.7;
    color: #555;
}

.commitment-photos-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.photo-item {
    flex-basis: 50%;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

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

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .commitment-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 0;
    }
    
    .commitment-photos-grid {
        flex-direction: column;
        gap: 15px;
    }

    .commitment-detail {text-align: left;}

    .reform-icon {height: auto; max-width: 180px;}
}


/* --- 新セクション: SoundsGoodができるリフォーム (サービスカテゴリ) --- */
.section-services-standalone {
    background-color: #fcfcfc; /* ほぼ白 */
    padding: 60px 0;
    text-align: center;
}

.services-content {
    max-width: 1200px;
    margin: 0 auto;
}

.service-header {
    margin-bottom: 40px;
}

.service-header img {
    max-width: 457px;
    width: 100%;
}

.service-icon {
    /* "Service" 手書き風テキストの代替 */
    font-family: cursive; /* cursiveは手書き風フォントの代替です */
    font-size: 2rem;
    font-weight: bold;
    color: #f7962c; /* オレンジ色 */
    position: relative;
    display: inline-block;
    margin-bottom: 5px;
}

.service-title {
    font-weight: bold;
    color: #333;
}

.service-cards-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.service-card {
    flex-basis: 48%;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 45px 30px;
    background-color: white;
    text-align: left;
}

.card-icon-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 20px;
}

.card-icon-title h3 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}

/* アイコンイラストの代替 (実際は背景画像で対応) */
.icon-house, .icon-office {
    width: 100px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 画像に合わせた装飾を簡易的に表現 */
.icon-house {
    border-bottom: 3px solid #f7962c;
}
.icon-office {
    border-bottom: 3px solid #f7962c;
}


.service-list {
    list-style: none;
    padding: 0;
}

.service-list li {
    line-height: 2;
    padding: 5px 0 5px 15px;
    position: relative;
    border-bottom: 1px solid #eee;
    margin: 0 25px;
}
.service-list li::before {
    content: '•'; /* リストマークとして使用 */
    color: #e65243; /* 赤丸で強調 */
    font-size: 25px;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
    .service-cards-grid {
        flex-direction: column;
    }
    .service-card {
        flex-basis: 100%;
    }
}


/* --- 新セクション: 施工可能エリア --- */
.section-area-map {
    background-color: #ffffff; /* 白い背景 */
    padding: 60px 0;
    text-align: center;
}

.area-content {
    max-width: 1200px;
    margin: 0 auto;
}

.area-logo-icon {
    width: auto;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
}

.area-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.area-subtitle {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 40px;
}

.area-map-image-wrapper {
    max-width: 650px;
    margin: 0 auto 40px;
}

.tokyo-map-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 大型お問い合わせボタン */
.btn-red.large-btn {
    width: 350px; /* 少し大きめに */
    padding: 18px 40px;
    font-size: 1.1rem;
    /* 矢印は共通CSS (.with-arrow) で対応 */
}


/* --- 新セクション: 施工実績 (シンプル版) --- */

.section-results-simple {
    background-color: #fff8f3;
}

.section-results-simple-standalone {
    background-color: #fff8f3; /* 薄いオレンジ色の背景 */
    padding: 60px 0;
    text-align: center;
}

.results-content {
    max-width: 1000px;
    margin: 0 auto;
}

.results-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.results-graph-area {
    flex-basis: 40%;
    position: relative;
    padding: 20px 0;
}

.growth-graph-simple {
    display: flex;
    align-items: flex-end; /* 棒グラフを下揃えにする */
    height: 250px; /* 高さを調整 */
    position: relative;
    justify-content: space-evenly;
    max-width: 300px;
    margin: 0 auto;
}

/* 棒グラフの棒の共通スタイル (既存CSSのものを再定義) */
.growth-graph-simple .bar {
    width: 20%;
    background-color: #3b9c6a; /* 濃い緑色 */
    border-radius: 5px 5px 0 0;
    margin: 0 5px;
    /* 棒の影を追加して立体感を出す (画像に合わせる) */
    box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.2); 
}

/* 棒の高さ (画像に合わせて調整) */
.growth-graph-simple .bar-1 { height: 40%; }
.growth-graph-simple .bar-2 { height: 60%; }
.growth-graph-simple .bar-3 { height: 85%; }
.growth-graph-simple .bar-4 { height: 100%; }

/* 成長の曲線矢印をCSSで表現 (既存CSSのものを再定義) */
.growth-arrow-curve {
    position: absolute;
    top: -20px;
    left: 20px;
    width: 280px;
    height: 280px;
    /* 画像を背景として使用することを推奨 */
    background-image: url('/img/green_growth_arrow.png'); /* 緑色の矢印の画像パス */
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10;
}


.results-text-area {
    flex-basis: 60%;
    text-align: left;
}

.results-title {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
}

.results-intro {
    line-height: 1.7;
    margin-bottom: 10px;
}

.results-intro .unit {
    font-size: 3rem;
    color: #e65243; /* 赤色で強調 */
    font-weight: bold;
    display: inline-block; /* 行内要素だが、フォントサイズを大きくする */
    margin: 0 5px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .results-grid {
        flex-direction: column;
        gap: 30px;
    }
    .results-graph-area,
    .results-text-area {
        flex-basis: 100%;
        width: 100%;
    }
    .results-text-area {
        text-align: center;
        padding: 0 20px;
    }
    .results-intro .unit {
        font-size: 2.5rem; /* スマホでは少し小さく */
    }
    .area-logo-icon {width: 100%;height: auto;}
}

/* --- 新セクション: Vision 将来の姿 --- */
.section-vision-standalone {
    background-color: #ffffff; /* 白い背景 */
    padding: 60px 0;
    text-align: center;
}

.vision-content {
    max-width: 1000px;
    margin: 0 auto;
}

.vision-icon-area {
    margin-bottom: 40px;
    padding-top: 10px;
}

.vision-badge-icon {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;    
}

.vision-badge-icon img {
    max-width: 300px;
    margin: auto;
}

.vision-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.vision-photo-area {
    flex-basis: 50%;
    text-align: left;
}

.vision-photo {
    width: 100%;
    height: auto;
    display: block;
    max-width: 450px;
    /* 写真の周りの薄いボーダー（デザイン画像参照） */
    border: 1px solid #ddd;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.vision-text-area {
    flex-basis: 50%;
    text-align: left;
    padding: 20px 0;
}

.vision-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.vision-divider {
    width: 100%;
    max-width: 300px;
    border: none;
    border-top: 1px solid #b8b8b8; /* 薄い茶色の線 */
    margin-bottom: 25px;
}

.vision-text-main {
    line-height: 2;
    color: #333;
}
.vision-text-main strong {
    font-weight: bold;
    color: #e65243; /* 強調したい場合は赤色など */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .vision-grid {
        flex-direction: column; /* 縦並びにする */
        gap: 20px;
    }
    
    .vision-photo-area,
    .vision-text-area {
        flex-basis: 100%;
        text-align: center;
        padding: 0 20px;
    }
    
    .vision-divider {
        margin: 15px auto 25px; /* 中央揃えにする */
    }
}


/* --- 新セクション: 行動指針 (Value) --- */
.section-value-standalone {
    background-color: #fff8f3; /* 薄いオレンジ色の背景 */
    padding: 60px 0;
    text-align: center;
}

.value-content {
    max-width: 1000px;
    margin: 0 auto;
}

.value-header {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 40px;
    text-align: left;
}

.value-icon-area {
    flex-shrink: 0;
    padding-top: 10px;
}

.value-badge-icon {
    /* Value 手書き風テキストとオレンジ色の円の代替 */
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;    
}
.value-badge-icon::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: #f7962c; /* オレンジ色 */
    border-radius: 50%;
    opacity: 0.6;
    z-index: -1;
}

.value-text-area {
    flex-grow: 1;
    padding-top: 20px;
}

.value-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

.value-text-main {
    line-height: 2;
    color: #333;
}
.value-text-main strong {
    font-weight: bold;
}

/* 写真グリッド */
.value-photos-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.value-photo-item {
    flex-basis: 50%;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.value-photo {
    width: 100%;
    height: 300px;
    display: block;
    object-fit: cover;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .value-header {
        flex-direction: column; /* 縦並びにする */
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .value-text-area {
        padding-top: 0;
    }
    .value-photos-grid {
        flex-direction: column;
        gap: 15px;
    }
    .value-photo-item {
        flex-basis: 100%;
    }
}


/* --- 新セクション: 会社概要 --- */
.section-company-info {
    background-color: #ffffff; /* 白い背景 */
    padding-top: 90px;
    padding-bottom: 90px;
    text-align: center;
}

.company-info-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}


/* --- 新フッターのデザイン --- */
footer {
    /* 既存のフッターCSSを上書きまたは新しいクラスで定義 */
    background-color: #0d4a36; /* 濃い緑色 */
    color: white;
    padding: 60px 0 150px;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 787px) { 
    footer {padding: 60px 0;}
}

.footer-content-new {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上端を揃える */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 左側の情報コラム */
.footer-info-col {
    flex-basis: 55%;
    text-align: left;
}

.footer-logo-area {
    margin-bottom: 25px;
}

.footer-logo-new {
    width: 250px; /* ロゴサイズを調整 */
    height: auto;
    display: block;
    /* ロゴの下に「First class professionals」テキストがある場合は、その分のCSSも追加 */
}

.company-name-new {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.greeting-new {
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.company-address-new {
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.social-links-new img {
    width: 30px;
    height: 30px;
    margin-right: 15px;
    filter: invert(100%); /* アイコンの色を白くする */
}

.copyright-new {
    font-size: 0.8rem;
    margin-top: 30px;
}


/* 右側のCTAコラム */
.footer-cta-col-new {
    flex-basis: 45%;
    text-align: right;
    position: relative;
    padding-top: 20px;
}

/* フッター用のお問い合わせボタン (共通CSSを再利用しつつ、色を反転) */
.footer-btn-new {
    width: 350px;
    background-color: #e65243; /* 赤色に戻す */
    color: white;
    margin: 0 0 20px auto; /* 右寄せ */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}
.footer-btn-new:hover {
    background-color: #d14134;
}
.footer-btn-new::after {
    color: white; /* 矢印の色も白に */
}

/* イラストの配置 (画像にあるランプと電話) */
.footer-illustration-area {
    width: 300px; /* イラストのサイズに合わせて調整 */
    height: 300px;
    position: absolute;
    top: 80px; /* フッターの下からはみ出すように調整 */
    right: 0;
    /* イラストを背景画像として設定 */
    background-image: url('/img/fotter_img_back.png'); /* 実際のイラスト画像パス */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.9;
    z-index: 1; /* CTAボタンより下に配置 */
}


/* レスポンシブ対応: 画面幅が狭い場合 */
@media (max-width: 768px) {
    .footer-content-new {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    
    .footer-info-col,
    .footer-cta-col-new {
        flex-basis: 100%;
        text-align: center;
    }
    
    .footer-logo-area {
        margin: 0 auto 20px;
    }
    
    .footer-btn-new {
        margin: 0 auto 20px; /* 中央揃え */
    }
    
    .footer-illustration-area {
        /* モバイルでは非表示にするか、サイズを小さくする */
        display: none; 
    }
    
    .social-links-new {
        text-align: center;
    }
}


@media screen and (min-width: 788px) {
    .sp_btn {display: none;}
}

@media screen and (max-width: 787px) { 
    .sp_btn {
        position: fixed;
        bottom: 0;
        width: 100% !important;
        z-index: 99;
    }
}



/* 事例セクション */
.reform-section {
    display: flex;
    max-width: 100%; /* 全体の最大幅を設定 */
    margin: 1px auto;
    font-family: 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* セクション全体に影を追加 (任意) */
}

/* --- 左パネル (赤色の部分) --- */
.left-panel {
    background-color: #e53d16; /* 画像の赤っぽい色 */
    color: white;
    flex: 0 0 35%; /* 幅を全体の約35%に固定 */
    padding: 80px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.left-panel .case-number {
    font-size: 1.2rem;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

.left-panel .title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0px;
}

.left-panel .icon-container {
    width: 100%;
    max-width: 120px;
    height: auto;
    margin-top: 20px;
}

.left-panel .sofa-icon {
    width: 100%;
    height: auto;
    transform: scale(3.5); /* アイコンを大きく表示 */
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- 右パネル (薄いベージュの部分) --- */
.right-panel {
    background-color: #FAF4EB; /* 画像の薄いベージュ色 */
    flex: 1; /* 残りのスペースを全て使用 */
    padding: 40px 50px 40px 30px;
}

.right-panel .section-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    margin-top: 0;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}

/* --- 画像比較セクション --- */
.image-comparison {
    display: flex;
    align-items: center;
    gap: 15px; /* 画像と矢印の間のスペース */
    margin-bottom: 25px;
}

.image-box {
    position: relative;
    flex: 1;
    overflow: hidden; /* 画像がはみ出さないように */
    border-radius: 5px; /* 角を丸くする (任意) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-box img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 300px;
}

.label {
    position: absolute;
    bottom: 5%;
    right: 5%;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
    border-radius: 3px;
}

.before-label {
    background-color: #E64A19;
}

.after-label {
    background-color: #E64A19;
}

.arrow-container {
    flex: 0 0 20px; /* 矢印の幅を固定 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow {
    width: 60px;
    height: 90px; /* 矢印の高さを調整 */
}

/* --- 説明文 --- */
.description {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    margin: 0;
    padding-right: 20px;
}

/* レスポンシブ対応 (モバイル向け) */
@media (max-width: 768px) {
    .reform-section {
        flex-direction: column; /* 縦並びにする */
    }

    .left-panel {
        flex: none;
        padding: 30px 20px;
    }

    .left-panel .title {
        font-size: 2rem;
    }

    .left-panel .sofa-icon {
        transform: scale(2.5);
        margin-bottom: 20px;
    }

    .right-panel {
        padding: 30px 20px;
    }

    .right-panel .section-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
        text-align: center;
    }

    .image-comparison {
        flex-direction: column; /* 画像比較も縦並びにする */
    }

    .arrow-container {
        /* 矢印を横向きにする */
        transform: rotate(90deg);
        width: 30px;
        height: 20px;
    }
}

@media screen and (min-width: 768px){	
  .sponly {display: none!important;}
}
@media screen and (max-width: 767px){	
  .pconly {display: none!important;}
}


/* --- スマホ用固定CTAボタン --- */

.fixed-cta-mobile {
    /* 初期設定: デフォルトでは非表示 */
    display: none; 
    
    /* 画面下部に固定 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* ボタンのレイアウト設定 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* 背景と影 */
    background-color: white; 
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 9999; /* 他の要素より手前に表示 */
}

.fixed-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* 2つのボタンが均等に幅を占める */
    text-decoration: none;
    padding: 20px 10px;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.2;
}

/* 電話ボタン (濃い緑色) */
.phone-btn {
    background-color: #0d4a36; /* フッターと同じ濃い緑 */
    color: white;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* お問い合わせボタン (赤色) */
.contact-btn {
    background-color: #e65243; /* メインの赤色 */
    color: white;
}

.fixed-cta-btn .icon {
    font-size: 1.2rem;
    margin-right: 5px;
    /* 電話アイコン（📞）や封筒アイコン（✉️）の色はフォントカラーに依存 */
}

/* --- レスポンシブ設定 --- */

/* 画面幅が768px以下の場合に固定CTAを表示 */
@media (max-width: 768px) {
    .fixed-cta-mobile {
        display: flex; /* モバイルでのみ表示 */
    }
    
    /* 固定ボタンがフッターコンテンツを隠さないように、bodyの下部に余白を追加 */
    body {
        padding-bottom: 50px; /* fixed-cta-mobileの高さに合わせて調整 */
    }
}

/* デスクトップ環境では非表示を維持（.fixed-cta-mobile の初期設定に依存） */
@media (min-width: 788px) {
    .fixed-cta-btn {padding: 30px 10px; font-size: 24px;}
}