/* リセットCSS的なもの（余白削除など） */
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: #594A3D; /* 茶色 */
    overflow-x: hidden;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* --- ヘッダー（左上ロゴ） --- */
.page-header {
    position: absolute; /* ★ここを変更：ページの上にふわっと浮かせます */
    top: 0;
    left: 0;
    width: 100%; /* 横幅いっぱいに広げる */
    z-index: 10; /* お花より手前に表示させる */
    padding: 20px 0;
    /* background-color: #fff; ← ★削除（背景を透明にしてお花が見えるように） */
}
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}
.header-logo img {
    width: 200px; /* ロゴの大きさ調整（お好みで） */
}

/* --- メインビジュアル（重ね合わせ） --- */
.main-visual {
    /* padding: 40px 0; ← これだと隙間が空きすぎるので調整 */
    padding-top: 80px;  /* ★ここを調整：数字を小さくするとお花がもっと上に行きます */
    padding-bottom: 40px;
    text-align: center;
}

.mv-inner {
    position: relative; /* ★ここが基準点になります */
    max-width: 800px;   /* お花全体の最大幅 */
    margin: 0 auto;     /* 中央寄せ */
}

/* お花（背景役） */
.mv-flower {
    width: 100%;
}

/* キャッチコピー（手前に浮く役） */
.mv-catch {
    position: absolute; /* ★絶対配置（浮遊させる） */
    top: 50%;           /* 上から50%の位置 */
    left: 50%;          /* 左から50%の位置 */
    transform: translate(-50%, -50%); /* 真ん中に補正する呪文 */
    width: 52%;         /* お花に対しての文字の大きさ（調整してください） */
}

/* --- コンセプト（挨拶）エリア --- */
.concept-area {
    background-color: #decdaf;
    color: #000000;
    font-family: "M PLUS Rounded 1c", sans-serif;
    text-align: center;
    
    /* 余白調整 */
    padding: 60px 0 0; 
    margin-top: 0;
    
    position: relative;
    z-index: 5;
    /* background-image は削除して ::before に移動させます */
}

/* ★新設：ハート画像専用のレイヤー */
.concept-area::before {
    content: "";
    display: block;
    position: absolute;
    top: 30px; /* ハートの縦位置 */
    left: 50%;
    transform: translateX(-50%); /* ど真ん中に配置 */
    
    width: 140px; /* ハートの幅 */
    height: 200px; /* ハートの高さエリア（十分な高さを確保） */
    
    background-image: url('../images/bg-heart.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 140px auto;
    
    z-index: 1; /* ★重要：アーチ(0)より手前、文字(2)より奥 */
}

/* ★調整：下のアーチ（楕円） */
.concept-area::after {
    content: "";
    display: block;
    position: absolute;
    
    /* ▼ カーブを深くする設定 ▼ */
    width: 110%;        /* 幅は画面よりちょい広め */
    height: 300px;      /* ★ここを大きくすると「深いU字」になります！ */
    bottom: -100px;     /* 大きくした分、もっと下にずらす */
    
    left: 50%;
    transform: translateX(-50%); /* ど真ん中に配置 */
    
    background-color: #decdaf;
    border-radius: 50%; /* まん丸 */
    z-index: 0;         /* ハートより奥 */
}

/* ★追加：文字がハートの下に潜り込まないようにする */
.concept-area .container {
    position: relative;
    z-index: 2; /* 一番手前 */
}

/* タイトル */
.concept-title {
    color: #805915; /* 指定の茶色 */
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* 本文 */
.concept-text {
    max-width: 100%; /* 横に広がりすぎないように制限 */
    margin: 0 auto;   /* 中央寄せ */
    font-size: 16px;
    line-height: 2;   /* 行間ゆったり */
}

/* スマホ用改行クラス（必要なら使う） */
.sp-only {
    display: none;
}
@media (max-width: 768px) {
    .sp-only {
        display: block;
    }
    .concept-area {
        /* スマホではカーブを少し緩やかに */
        border-radius: 0 0 50% 50% / 0 0 30px 30px;
        padding: 50px 0 70px;
    }
    .concept-title {
        font-size: 18px;
    }
    .concept-text {
        font-size: 14px;
        text-align: left; /* スマホでは左揃えの方が読みやすい場合も */
    }
}

/* --- イラストと説明エリア --- */
.about-area {
    background-color: #f5f1dc;
    padding-top: 240px;
    margin-top: -100px;
    padding-bottom: 40px;
    position: relative;
    z-index: 1;
}

/* レイアウト（PC） */
.about-inner {
    display: flex;
    justify-content: center; /* 全体を中央に寄せる */
    align-items: center;
    
    /* ★修正1：この gap の数字が「イラスト」と「文字」の距離になります */
    gap: 30px; /* 狭めに設定（お好みで 0px 〜 30px で調整してください） */
    
    width: fit-content; /* ★重要：中身のコンテンツ幅に合わせる（画面いっぱい使わない） */
    max-width: 90%;     /* スマホなどで飛び出さないように念のため */
    margin: 0 auto;
}

/* --- 画像エリア（左・右） --- */
.about-img-left,
.about-img-right {
    width: 200px; /* ★固定幅にしてサイズを確定させます */
    /* max-width, width:20% は削除してOKです */
    flex-shrink: 0; /* 縮まないように固定 */
}

.about-img-left img,
.about-img-right img {
    width: 100%;
    height: auto;
}

/* --- 真ん中のテキストエリア --- */
.about-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #37b002;
    text-align: left;
    
    /* ★修正2：flex: 1 を削除して、中身の文字量に合わせます */
    width: auto; 
    flex: 0 0 auto; /* 伸び縮みさせない */
}

.about-text h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap; /* ★文字が勝手に改行されないようにする（1行をキープ） */
}

/* 矢印画像 */
.about-arrow img {
    width: 30px;
    height: auto;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .about-area {
        padding-top: 180px;
    }
    .about-inner {
        flex-direction: column;
        gap: 30px;
        width: 100%; /* スマホでは幅いっぱいに */
    }
    .about-img-left,
    .about-img-right {
        width: 180px; /* スマホでのサイズ */
        max-width: 60%;
    }
    .about-text {
        flex-direction: column;
        text-align: center;
    }
    .about-text h3 {
        white-space: normal; /* スマホでは改行してOK */
        font-size: 20px;
    }
    .about-arrow img {
        transform: rotate(90deg);
        margin-bottom: 10px;
    }
}

/* --- スタッフ紹介エリア --- */
.staff-area {
    padding: 0px 0;
    background-color: #f5f1dc;
}

/* 2人のスタッフを横並びにする（PC） */
.staff-list {
    display: flex;
    justify-content: center;
    gap: 40px; /* 2人の間の隙間 */
    flex-wrap: wrap;
}

/* --- スタッフカード単体 --- */
.staff-card {
    display: flex;
    
    /* ★修正1：横並び計算式に変更 */
    /* 「50%から、隙間の半分(20px)を引いた幅」にすることで確実に横に並びます */
    width: calc(50% - 20px); 
    max-width: 520px; /* PCで見やすいくらいの最大幅 */
    
    align-items: stretch; /* 高さを揃える */
    background-color: #fff; /* 画像部分の背景漏れ防止のため一応白に */
}

/* 写真部分 */
.staff-img {
    width: 40%;
    flex-shrink: 0;
}
.staff-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

/* テキスト部分（背景ベージュ） */
.staff-info {
    width: 60%;
    background-color: #decdaf;
    padding: 20px; /* 内側の余白 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 名前エリア */
.staff-name-area {
    margin-bottom: 15px;
}
.staff-name {
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #805915;
    
    /* ★修正2：大きく、細く */
    font-size: 26px; /* 20px → 26px にアップ */
    font-weight: 400; /* 太字解除 */
    
    margin: 0;
    line-height: 1.2;
}
.staff-en {
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #000000;
    font-size: 10px;
    letter-spacing: 0.05em;
    display: block;
    margin-top: 5px;
}

/* 一言メッセージエリア */
.staff-message {
    margin-bottom: 15px;
    border-top: 1px solid #805915;
    border-bottom: 1px solid #805915;
    padding: 15px 0;
}
.staff-message p {
    font-family: "Noto Sans JP", sans-serif;
    color: #805915;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* 肩書 */
.staff-role {
    font-family: "Noto Sans JP", sans-serif;
    color: #000000;
    font-size: 11px;
    margin: 0;
    text-align: right;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .staff-list {
        flex-direction: column; /* 縦積み */
        gap: 30px;
    }
    .staff-card {
        width: 100%; /* 幅いっぱい */
        max-width: 100%;
    }
}

/* --- 3つのポイントエリア --- */
.point-area {
    background-color: #f5f1dc;
    padding: 120px 0 0;
    position: relative;
}

/* 各ポイントの行 */
.point-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px; /* ★調整：画像が大きくなる分、少しだけ隙間を詰めました（お好みで60pxのままでもOK） */
    margin-bottom: 80px;
    position: relative;
}

/* 偶数番目（POINT 02）だけ左右逆にする */
.point-reverse {
    flex-direction: row-reverse;
}

/* --- 画像エリア --- */
.point-img {
    position: relative;
    
    /* ★修正1：画像の幅を広くしました */
    width: 340px; /* 280px → 340px にアップ */
    
    flex-shrink: 0;
}
.point-img img {
    width: 100%;
    height: auto;
}

/* 緑のバッジ（位置調整） */
.point-badge {
    position: absolute;
    top: -30px;
    
    /* ★修正3（POINT 01, 03）：もう少し右へずらす */
    right: -50px; /* -30px → -50px に変更（外側へ出す） */
    
    width: 90px;
}
.point-badge img {
    width: 100%;
}

/* POINT 02（逆向き）の時のバッジ位置 */
.point-reverse .point-badge {
    right: auto;
    
    /* ★修正3（POINT 02）：左へずらす */
    left: -50px; /* -30px → -50px に変更（外側へ出す） */
}

/* --- テキストエリア --- */
.point-text {
    /* ★修正1：画像が大きくなった分、少し狭くしました */
    width: 410px; /* 450px → 400px に変更 */
}

.point-text h3 {
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #805915;
    
    /* ★修正2：大きく、細く */
    font-size: 32px;  /* 24px → 28px にアップ */
    font-weight: 400; /* 細く（標準）にする */
    
    margin-bottom: 20px;
    line-height: 1.4; /* 行間も少し調整 */
}

.point-text p {
    font-family: "Noto Sans JP", sans-serif;
    color: #594A3D;
    font-size: 15px;
    line-height: 1.8;
}

/* --- 下部の草 --- */
.point-grass img {
    width: 100%;
    vertical-align: bottom;
    display: block;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .point-row {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }
    .point-reverse {
        flex-direction: column;
    }
    
    .point-img {
        /* スマホでは大きすぎるとはみ出すので調整 */
        width: 240px; 
    }
    
    /* スマホでのバッジ位置（PCほど外に出すと切れるため少し控えめに） */
    .point-badge {
        width: 70px;
        top: -20px;
        right: -30px;
    }
    .point-reverse .point-badge {
        left: auto;
        right: -30px; /* スマホなら統一して右上で良いかも？ */
    }
    
    .point-text {
        width: 100%;
        text-align: center;
        padding: 0 20px; /* 左右に少し余白 */
    }
    .point-text p {
        text-align: left;
    }
}

/* --- 求人導入・基本方針・FAQエリア --- */
.recruit-area {
    background-color: #ffffff;
    padding: 40px 0;
    text-align: center;
}

/* リード文 */
.recruit-intro h3 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.1rem;
}
.recruit-line img {
    width: 300px; /* 緑のV字ラインの幅 */
    margin-bottom: 30px;
}
.recruit-desc {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 60px;
}

/* 3つの基本方針 */
.policy-area h3 {
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #805915;
    font-size: 22px;
    margin-bottom: 20px;
}
.text-green {
    color: #6BCB2D;
    font-size: 1.6em;
    vertical-align: -2px;
}

.policy-list {
    display: flex;
    justify-content: center;
    gap: 30px; /* 丸と丸の間隔 */
    margin-bottom: 80px;
}

/* ★ここが修正ポイント：丸い背景＋文字配置 */
.policy-item {
    width: 160px;  /* 画像の大きさに合わせる */
    height: 160px; /* 正方形にする */
    
    background-image: url('../images/policy_bg.png'); /* 共通の背景画像 */
    background-size: contain; /* 枠内に画像を収める */
    background-repeat: no-repeat;
    background-position: center;
    
    /* 文字を真ん中に持ってくる設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* ハートが上にあるので、文字を少し下にずらすための余白 */
    padding-top: 30px; 
    box-sizing: border-box; /* paddingを含めたサイズ計算にする */
}

.policy-item p {
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #805915;
    font-size: 18px; /* 文字サイズ調整 */
    line-height: 1.4;
    font-weight: 700; /* ちょっと太くして読みやすく */
    margin: 0;
}

/* よくあるご質問 */
.faq-area {
    max-width: 700px;
    margin: 0 auto;
}
.faq-group {
    display: inline-block; /* 中身の幅に合わせる */
    text-align: left;      /* 中身を左揃えにする（これで端が揃います！） */
}
.faq-header {
    background-color: #48b800;
    color: #fff;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 20px;
    font-weight: 400; /* ★太字解除 */
    padding: 12px 100px; /* ★60px → 100px にして左右に伸ばす */
    display: block; /* inline-blockから変更 */
    border-radius: 5px;
    margin-bottom: 30px;
    text-align: center; /* ボタン内の文字は中央 */
}

.faq-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}
.faq-list li {
    font-family: "M PLUS Rounded 1c", sans-serif; 
    color: #805915;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center; /* アイコンを上揃えに */
    gap: 15px;
}
.faq-list li img {
    width: 24px;
}

.answer-big {
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #48b800;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
}
.answer-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 20px;
}
.answer-note {
    font-family: "Noto Sans JP", sans-serif;
    color: #ff4444;
    font-size: 13px;
    text-align: left;
    line-height: 1.6;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .policy-list {
        gap: 10px;
    }
    .policy-item {
        /* スマホでは少し小さく */
        width: 110px;
        height: 110px;
        padding-top: 20px;
    }
    .policy-item p {
        font-size: 13px;
    }
    .recruit-line img {
        width: 200px;
    }
}

/* --- 募集要項エリア --- */
.recruit-info-area {
    background-color: #ffffff;
    padding: 0px 0 0px;
}

.recruit-block {
    max-width: 900px;
    margin: 0 auto 80px;
    text-align: center; /* タイトルを中央に寄せるため */
}

/* タイトル（青帯） */
.recruit-title {
    display: inline-block; /* ★修正：幅を文字数＋余白分だけにする */
    background-color: #6186fa;
    color: #fff;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 20px;
    font-weight: 400; /* 細身に */
    padding: 8px 80px; /* ★修正：左右の長さをここで調整（数字を変えれば伸縮します） */
    margin-bottom: 40px;
    border-radius: 4px;
    letter-spacing: 0.05em; /* 気持ち広げる */
}
/* --- リスト部分 --- */
.recruit-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left; /* 中身の文字は左揃えに戻す */
}

/* 1行のスタイル */
.recruit-row {
    display: flex;
    align-items: stretch;
    border: 1px solid #b69864; /* 枠線 */
    background-color: #f5f1dc;
    border-radius: 4px;
    overflow: hidden;
}

/* 左側：ラベル（職種など） */
.recruit-label {
    width: 25%; /* 必要に応じて 20%〜30% で調整 */
    background-color: #f5f1dc;
    color: #805915;
    font-family: "Noto Sans JP", sans-serif;
    /* ★修正：小さく、細く、間隔あける */
    font-size: 14px; 
    font-weight: 500; /* 700から落とす（400でもOK） */
    letter-spacing: 0.05em;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    /* ★修正：右側の罫線を削除 */
    border-right: none; 
}

/* 緑の縦線 */
.green-bar {
    display: inline-block;
    /* ★修正：細くする */
    width: 2px; 
    height: 1.2em;
    background-color: #37b002;
    margin-right: 12px; /* 少し離す */
}

/* 右側：中身（サービス提供責任者など） */
.recruit-value {
    width: 75%;
    padding: 15px 20px;
    background-color: #f5f1dc;
    color: #000000;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* スマホなどで折り返せるように */
}

/* 赤文字用クラス */
.text-red {
    color: #ff0000;
    display: inline-block; /* 改行後にきれいに収まるように */
}

/* --- ボタンエリア（二重線デザイン） --- */
.recruit-btns {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px; /* 少し広めに */
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 60px;
    text-decoration: none;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    
    /* ★修正：文字を細く、間隔をあける */
    font-weight: 500; 
    letter-spacing: 0.1em;
    font-size: 18px;
    
    border-radius: 5px;
    position: relative;
    
    /* ★修正：影を消して、白い枠線(border)を追加 */
    box-shadow: none; 
    border: 2px solid #fff; 
    
    transition: opacity 0.3s;
    margin: 5px; /* 外側の線が見切れないように少し余白確保 */
}
.btn:hover {
    opacity: 0.8;
}

/* お問合せボタン（茶色） */
.btn-contact {
    background-color: #b69864; /* 内側の色 */
    
    /* ★重要テクニック：box-shadowで「外側の線」を作ります */
    /* 0 0 0 2px [色] = 外側に2pxの線を描く、という意味です */
    box-shadow: 0 0 0 2px #b69864; 
}

/* 応募するボタン（緑） */
.btn-apply {
    background-color: #37b002; /* 内側の色 */
    
    /* 外側の線 */
    box-shadow: 0 0 0 2px #37b002; 
}

/* ボタン内の矢印アイコン */
.btn-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px; /* 少し小さめに調整 */
    height: auto;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .recruit-row {
        flex-direction: column;
    }
    .recruit-label {
        width: 100%;
        padding: 10px 15px;
        border-bottom: none; /* スマホ時の区切り線はお好みで */
    }
    .recruit-value {
        width: 100%;
        padding: 5px 15px 15px; /* 上を詰める */
    }
    .recruit-btns {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .btn {
        width: 100%;
        max-width: 320px;
    }
}

/* --- フッター --- */
.footer {
    position: relative;
    width: 100%;
    background-color: #f5f1dc; /* ★修正：フッター全体の背景をベージュにする */
}

/* 草の装飾 */
.footer-grass {
    width: 100%;
    line-height: 0;
    margin-bottom:40px;
    /* background-color: #fff; ← ★削除：ここを透明にすることで、画像の下（透過部分）からベージュが見えるようになります */
}
.footer-grass img {
    width: 100%;
    vertical-align: bottom;
}

/* メインエリア */
.footer-content {
    /* background-color: #f5f1dc; ← ★削除：親要素(.footer)で指定したので不要 */
    padding: 0 0 20px; /* ★修正：上の余白は削除（草とくっつける）、下の余白を詰める(60px→40px) */
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px; /* ★修正：リンクボタンとの間隔を詰める(40px→20px) */
}

/* --- 左側（ロゴ・会社情報） --- */
.footer-left {
    width: 65%; /* ★修正：幅を広げて「徒歩6分」などの改行を防ぐ(60%→65%) */
}

.footer-logo {
    margin-bottom: 20px; /* ★修正：少し詰める */
}
.footer-logo img {
    width: 240px; /* ★修正：ロゴを大きく(200px→240px) */
}

/* 会社概要と事業所を横並びにする */
.company-info-row {
    display: flex;
    gap: 20px; /* ★修正：間隔を少し詰める(30px→20px) */
}

.info-unit {
    width: 50%; /* ★修正：gapを詰めた分、幅を確保 */
}

/* 茶色の帯見出し */
.footer-heading {
    background-color: #b69864;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding: 5px 10px;
    border-radius: 4px;
    /* ★修正：下のマージンを完全に0にする */
    margin: 0 0 0 0; 
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}
.company-name {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #000;
    /* ★修正：上下のマージンを明示的にゼロにする */
    margin-top: 0;
    margin-bottom: 0;
    /* 帯とくっつきすぎないように、少しだけ上を開けるならここを調整 */
    padding-top: 5px; 
}
.company-desc {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: #000;
    /* ★修正：会社名との距離 */
    margin-top: 5px; 
    margin-bottom: 0;
}

/* --- 右側（電話番号） --- */
.footer-right {
    width: 30%; /* ★修正：左側を広げた分、少し狭くする(35%→30%) */
    text-align: right;
    padding-top: 0;
}

.tel-area {
    display: inline-block; /* 枠のサイズを中身に合わせる */
    text-align: right; /* 中身は右寄せ */
}

.tel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #37b002;
    color: #fff;
    text-decoration: none;
    
    /* ★修正：フォント変更、細く、文字間隔 */
    font-family: "Noto Sans JP", sans-serif;
    font-size: 24px; /* 級数を下げる(28px→24px) */
    font-weight: 500; /* 細く */
    letter-spacing: 0.05em;
    
    padding: 8px 25px; /* ★修正：枠を小さく（パディング減らす） */
    border-radius: 4px;
    width: auto; /* ★修正：横幅いっぱいにしない */
    min-width: 260px; /* 最低限の幅は確保 */
    box-sizing: border-box;
    margin-bottom: 5px; /* ★修正：下の注釈との隙間を詰める(10px→5px) */
}

.tel-icon {
    width: 20px; /* アイコンも少し小さく */
    margin-right: 10px;
}

.tel-note {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #000;
    text-align: right;
    margin: 0;
}

/* --- 下部のリンクボタン --- */
.footer-links {
    display: flex;
    gap: 10px; /* ★修正：ボタン間の隙間を詰める(20px→10px) */
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-links li a {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    
    /* ★修正：縦幅を狭くする */
    padding: 5px 15px; /* 上下8px→5px */
    
    text-decoration: none;
    color: #594A3D;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    border-radius: 4px;
}

.footer-links li a::before {
    content: "";
    display: inline-block;
    width: 6px; /* 丸も少し小さく */
    height: 6px;
    background-color: #ff4444;
    border-radius: 50%;
    margin-right: 8px;
}

/* --- コピーライト --- */
.copyright {
    background-color: #8c7349;
    color: #fff;
    text-align: center;
    font-size: 11px;
    padding: 15px 0;
    margin: 0;
    font-family: sans-serif;
    
    /* 画面幅いっぱいに広げるおまじない（もし.containerの外なら不要ですが念のため） */
    position: relative;
    z-index: 1;
}

/* =========================================
   SP（スマホ）表示の修正スタイル【完全修復版】
   ========================================= */
@media (max-width: 768px) {
    
    /* 横揺れ防止 */
    body, html {
        overflow-x: hidden;
        width: 100%;
    }

    /* --- 1. ヘッダー・メインビジュアル --- */
    .page-header {
        padding-top: 10px;
        padding-bottom: 0;
        position: relative;
    }
    .main-visual {
        /* ロゴとお花の間を限界まで詰める */
        padding-top: 0; 
        margin-top: -20px; /* もう少し食い込ませて隙間を消す */
        padding-bottom: 20px;
    }
    .mv-catch {
        width: 48%;
    }

    /* --- 2. 楕円エリア（カーブをハッキリさせる！） --- */
    .concept-area {
        padding: 20px 0 0;
        position: relative;
        z-index: 10;
        background: none !important;
        width: 100%;
        margin: 0 auto;
    }

    /* 四角い背景 + ハート画像 */
    .concept-area::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw; /* 画面幅いっぱい */
        height: 100%;
        
        background-color: #decdaf;
        background-image: url('../assets/images/bg_concept.png'); 
        /* background-image: url('assets/images/bg_concept.png'); */
        
        background-repeat: no-repeat;
        background-position: center top 20px;
        background-size: 80px auto;
        
        z-index: -1;
    }
    
    /* ★修正：楕円パーツ（ここを変えました！） */
    .concept-area::after {
        content: "";
        position: absolute;
        
        /* ★300%だと平べったくなるので、120%まで縮めます */
        width: 120vw; 
        left: 50%;
        transform: translateX(-50%);
        
        height: 60px;  /* 高さ */
        bottom: -30px; /* 半分（30px）だけ下に突き出す */
        
        background-color: #decdaf;
        border-radius: 50%; /* 綺麗な丸 */
        
        z-index: -1;
    }

    .concept-title {
        font-size: 18px;
        padding: 0 0px 0px;
        line-height: 1.6;
        position: relative;
        z-index: 5;
        text-align: center;
        width: 100%;
    }

    /* --- 3. イラストエリア --- */
    .about-area {
        background-color: #f5f1dc;
        position: relative;
        z-index: 1; /* 楕円より奥へ */
        
        /* ★修正：楕円が被さってくるので、マイナスマージンは不要（または隙間隠しの-1px） */
        margin-top: -1px; 
        padding-top: 60px; /* 突き出した楕円を避けるための余白 */
    }

    /* --- 3. イラストエリア（位置修正） --- */
    .about-area {
        background-color: #f5f1dc;
        position: relative;
        z-index: 1; /* 楕円より奥へ */
        
        /* 楕円の下に潜り込ませる */
        margin-top: -40px; 
        padding-top: 100px; /* 食い込んだ分＋余白 */
    }
    
    .about-inner {
        flex-direction: row;
        align-items: center;
        gap: 0; 
        padding: 0;
    }
    .about-img-left,
    .about-img-right {
        width: 18%; 
    }
    
    .about-text {
        width: 72%;
        padding: 0 5px;
        box-sizing: border-box;
        justify-content: center;
        text-align: center;
    }
    
    /* 矢印非表示 */
    .about-arrow {
        display: none;
    }

    /* 文字サイズ・太さ（太くしない） */
    .about-text h3 {
        font-size: 16px;
        line-height: 1.6;
        font-weight: 400; /* 太字にしない */
        white-space: normal;
        margin-top: 0;
    }

    /* --- 4. ポイントエリア --- */
    .point-area {
        padding-top: 60px;
    }
    .point-row {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 50px;
    }
    .point-img {
        width: 200px;
    }
    .point-badge {
        width: 60px;
        top: -10px;
        right: -10px;
    }
    .point-reverse .point-badge {
        left: auto;
        right: -10px;
    }
    .point-text {
        width: 100%;
        padding: 0;
    }
    .point-text h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }
    .point-text p {
        text-align: justify;
        letter-spacing: -0.05em;
    }

    /* --- 5. 求人導入・FAQ --- */
    .recruit-intro h3 {
        font-size: 18px;
        padding: 0 10px;
        line-height: 1.6;
    }
    .faq-header {
        padding: 10px 20px;
        width: auto;
        display: inline-block;
        font-size: 16px;
    }

    /* --- 6. 募集要項 --- */
    .recruit-row {
        flex-direction: column;
    }
    .recruit-label {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #b69864;
        padding: 10px 15px;
    }
    .recruit-value {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }
    .recruit-btns {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .btn {
        width: 100%;
        max-width: 320px;
    }

    /* --- 7. フッター --- */
    .footer-content {
        padding-bottom: 20px;
    }
    .footer-inner {
        flex-direction: column;
        gap: 40px;
    }
    .footer-left {
        width: 100%;
        text-align: center;
    }
    .footer-logo img {
        margin: 0 auto 20px;
    }
    .company-info-row {
        flex-direction: column;
        gap: 30px;
    }
    .info-unit {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: left;
    }
    .footer-heading {
        width: 100%;
        text-align: center;
    }
    .footer-right {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        text-align: center;
    }
    .tel-area {
        display: block;
        width: 100%;
    }
    .tel-btn {
        width: 100%;
        max-width: 320px;
        margin: 0 auto 10px;
        font-size: 20px;
    }
    .tel-note {
        text-align: center;
    }
    .footer-links {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .footer-links li {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .footer-links li a {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        padding: 10px;
    }
}
    .sp-only { display: none; }
@media (max-width: 768px) {
    .sp-only { display: block; }
}

/* =========================================
   下層ページ・フォーム用スタイル
   ========================================= */

/* タイトルエリア（ベージュ背景） */
.sub-mv {
    background-color: #f5f1dc;
    padding: 60px 0;
    text-align: center;
    border-bottom: 5px solid #b69864; /* 茶色のライン */
}

.sub-title {
    font-family: "M PLUS Rounded 1c", sans-serif;
    color: #594A3D; /* 濃い茶色 */
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* フォームエリア */
.contact-area {
    padding: 60px 0 100px;
    background-color: #fff;
}

.contact-lead {
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 50px;
}

/* フォーム本体のデザイン */
.contact-form {
    max-width: 700px;
    margin: 0 auto;
    background-color: #f9f9f9; /* 薄いグレー（枠内） */
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.form-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
    align-items: center; /* PCでは上下中央 */
    border-bottom: 1px dashed #ddd; /* 項目ごとの区切り線 */
    padding-bottom: 25px;
}
.form-item:last-of-type {
    border-bottom: none;
}

/* ラベル（左側） */
.form-label {
    width: 30%; /* 左側3割 */
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #594A3D;
    font-size: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* 必須マーク */
.required {
    background-color: #ff4444;
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    vertical-align: middle;
}

/* 入力エリア（右側） */
.form-input {
    width: 70%; /* 右側7割 */
}

/* 入力パーツ共通 */
.form-input input[type="text"],
.form-input input[type="email"],
.form-input input[type="tel"],
.form-input textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #fff;
    transition: border-color 0.3s;
}

.form-input input:focus,
.form-input textarea:focus {
    border-color: #37b002; /* フォーカス時に緑枠に */
    outline: none;
}

.form-input textarea {
    resize: vertical; /* 縦方向のみリサイズ可 */
}

/* 送信ボタンエリア */
.form-submit {
    text-align: center;
    margin-top: 40px;
}

.btn-submit {
    background-color: #37b002; /* 緑色 */
    color: #fff;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding: 15px 80px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.1s;
    
    /* 応募ボタンと同じ二重線デザイン */
    box-shadow: 0 0 0 2px #37b002 inset, 0 0 0 4px #fff inset; 
    border: 2px solid #37b002; /* 外枠 */
}

.btn-submit:hover {
    opacity: 0.8;
}
.btn-submit:active {
    transform: translateY(2px); /* 押した感 */
}

/* --- スマホ対応 (SP) --- */
@media (max-width: 768px) {
    .sub-mv {
        padding: 40px 0;
    }
    .sub-title {
        font-size: 22px;
    }
    .contact-area {
        padding: 40px 0 80px;
    }
    .contact-form {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        border: none; /* スマホなら枠線なくてもスッキリするかも */
        background-color: transparent; /* 背景透明にしてシンプルに */
    }
    
    .form-item {
        display: block; /* 縦積みにする */
        margin-bottom: 20px;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    .form-label {
        width: 100%;
        margin-bottom: 8px;
        font-size: 14px;
    }
    
    .form-input {
        width: 100%;
    }
    
    .btn-submit {
        width: 100%;
        padding: 15px 0;
    }
}

/* =========================================
   プライバシーポリシー用スタイル
   ========================================= */

.privacy-area {
    padding: 60px 0 100px;
    background-color: #fff;
    font-family: "Noto Sans JP", sans-serif;
}

.privacy-intro {
    margin-bottom: 50px;
}
.privacy-intro p {
    font-size: 15px;
    line-height: 1.8;
}

.privacy-block {
    margin-bottom: 40px;
}

/* 見出しのデザイン */
.privacy-head {
    font-size: 18px;
    color: #37b002; /* スマイルサポートの緑 */
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f5f1dc; /* 薄いベージュの線 */
}

/* 本文のデザイン */
.privacy-text {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 15px;
}

/* リストのデザイン */
.privacy-list {
    list-style: disc; /* 黒丸 */
    padding-left: 20px;
    margin: 10px 0 20px;
}
.privacy-list li {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 5px;
}

/* お問い合わせ情報の枠 */
.privacy-contact-info {
    background-color: #f5f1dc; /* 薄いベージュ背景 */
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;
}
.privacy-contact-info p {
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

/* --- スマホ対応 (SP) --- */
@media (max-width: 768px) {
    .privacy-area {
        padding: 40px 0 80px;
    }
    .privacy-head {
        font-size: 16px;
    }
    .privacy-text, 
    .privacy-list li {
        font-size: 13px;
    }
}