/* 基本設定 */
:root {
    --pink: #e94d8b;
    --purple: #9b87b5;
    --yellow: #c6cc1e;
    --gold: #b29b53;
    --grad01: linear-gradient(135deg, #e7d8f0 0%, #f6dae4 100%);
    --border-color: #ff0000;
	--right-width: 180px;
	--left-width: 260px;
	--font-sans: 'Noto Sans JP', sans-serif;
	--font-yumincho:"Yu Mincho", "YuMincho", "MS Mincho", serif;
    --font-serif: "source-han-serif-japanese", serif;
    --font-en: "cinzel", sans-serif;
    --font-optima:"Optima", "Candara", serif;
}

html {
  scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    overflow-x: hidden;
    background-color: #fff;
}



.pc{
	display: block;
}

.sp{
	display: none;
}

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

.sp{
	display:block;
}
}

/* 画像プレースホルダーの共通スタイル（枠線あり） */
.img-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px dashed var(--border-color);
    background-color: rgba(255, 0, 0, 0.05); /* 薄い赤の背景 */
    color: var(--border-color);
    font-size: 14px;
    font-weight: normal;
    box-sizing: border-box; /* 枠線を含めたサイズ指定 */
    overflow: hidden;
}

.header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    padding-left: 40px;
    height: 80px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ロゴのサイズ指定 */
#logo_placeholder {
    width: 150px;
    height: auto;
}

.logo-area span {
    display: block;
    font-size: 10px;
    color: var(--gold);
    text-align: center;
}

.btn-sub {
    border: 1px solid #ccc;
    padding: 4px 12px;
    font-size: 12px;
    text-decoration: none;
    color: #666;
    border-radius: 4px;
}

.btn-join {
    background-color: var(--pink);
    color: #fff;
    height: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: normal;
    font-size: 20px;
}


/* --- ヘッダーの調整 --- */
.header {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* ボタンを右端に */
    padding: 0 0 0 40px;
    height: 80px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

#logo_placeholder {
    width: 150px;
    height: auto;
}

.logo-area span {
    display: block;
    font-size: 10px;
    color: var(--gold);
    text-align: center;
}

.btn-sub {
    border: 1px solid #ccc;
    padding: 4px 12px;
    font-size: 12px;
    text-decoration: none;
    color: #666;
    border-radius: 4px;
}

.nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0 40px;
}

.nav a {
    text-decoration: none;
    font-size: 13px;
	font-family: var(--font-serif);
    color: #333;
}

.btn-join.pc {
    background-color: var(--pink);
    color: #fff;
    height: 100%;
	width: var(--right-width);
    display: flex;
    align-items: center;
    justify-content: center; /* テキストを中央に */
    text-decoration: none;
	font-family: var(--font-en);
    font-size: 20px;
	padding: 0;
}

.hero-main {
    position: relative;
    width: 100%;
    height: 850px;
    margin: 0 auto;
}

/* --- 背景画像エリア --- */
.main-visual-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 横幅いっぱい広げる */
    height: 750px;
    z-index: 1;
    overflow: hidden;

    /* 下部の丸みを帯びたトリミング */
    clip-path: ellipse(120% 100% at 50% 0%);
}

#main_staff_placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 下からの黒グラデーション */
.main-visual-area::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* グラデーションの範囲を広めに */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    pointer-events: none;
}

/* --- サブ画像の配置 --- */
.sub-img {
    position: absolute;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

#sub1_placeholder {
    width: 240px;
    height: auto;
    position: absolute;
    top: 20px;
    left:100px;
    border-radius: 20px;
}

#sub2_placeholder { 
    width: 270px;
    height: auto;
    position: absolute;
    top: 100px;
    right: calc(var(--right-width) + -120px);
    border-radius: 20px;
    z-index: 11; /* Ensure it is above mask */
}

#sub3_placeholder {
    width: 260px;
    height: auto;
    position: absolute;
    bottom: 70px;
    left: 40px;
    border-radius: 20px;
    z-index: 10;
}

#sub4_placeholder {
    width: 370px;
    height: auto;
    position: absolute;
    bottom: 100px;
    right: 20px;
    border-radius: 20px;
}

.main-copy {
    font-family: var(--font-serif);
    font-size: 64px;
    line-height: 1.2;
    margin-bottom: 20px;
	font-weight: normal;
}

.sub-copy {
    font-size: 48px;
}

.catch-phrase {
    font-size: 20px;
    font-weight: normal;
    line-height: 1.1;
}

.catch-phrase .en {
    font-size: 16px;
    font-weight: normal;
	line-height: 1.1;
	font-family: var(--font-optima);
	color:var(--pink);
}
/* ステータス円コンテナ */
.stats-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -20px; /* 重なりを調整 */
    margin-top: 50px;
    font-family: var(--font-yumincho);
}

.stat-circle {
    width: 170px; /* 画像の比率に合わせて少し大きく */
    height: 170px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 0 -5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: relative;
}

/* 背景色 */
.stat-circle.pink { background: #e94d8b; }
.stat-circle.purple { background: #a391c4; }
.stat-circle.yellow { background: #b4c400; }

.stat-inner {
    text-align: center;
    line-height: 1.1;
}

/* --- 共通パーツ --- */

/* 上部のラベル（年間休日など） */
.label-top {
    display: block;
    font-size: 14px;
    margin-bottom: 0px;
    letter-spacing: 0.05em;
}

/* 縦書きの「平均」 */
.prefix-v {
    writing-mode: vertical-rl;
    font-size: 14px;
    line-height: 1;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
}

.value-huge {
    font-size: 60px;
    font-weight: 500;
    letter-spacing: -0.02em;
    vertical-align: middle;
}

/* 数字横の大きな単位（日, %, 時間） */
.unit-large {
    font-size: 24px;
    margin-left: 2px;
    vertical-align: bottom;
}

/* --- ピンク円専用（週休 2.5日 / 週40時間） --- */

.row-top, .row-middle {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.row-top { margin-bottom: -5px; }

.label-inline {
    font-size: 12px;
    margin-right: 4px;
}

.value-large {
    font-size: 48px;
    font-weight: 500;
}

.unit {
    font-size: 16px;
    margin-left: 2px;
}

.detail {
    display: block;
    font-size: 14px;
    margin-top: 6px;
    letter-spacing: 0.1em;
    opacity: 0.9;
}

/* 数値グループの配置調整 */
.value-group {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

/* --- メインエリアの根本解決（左右マスク） --- */
main {
    position: relative;
    width: 100%;
    overflow: visible;
}

/* 左側の白ボックス（新設） */
main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--left-width);
    height: 700px; /* 画像の高さに合わせる */
    background: #fff;
    z-index: 5;
}

/* 右側の白ボックス（JOIN USの下） */
main::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width:259px;
    height: 700px;
    background: #fff;
    z-index: 5;
}

/* --- 背景画像エリア --- */
.main-visual-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 750px;
    z-index: 1;
    overflow: hidden;
    clip-path: ellipse(120% 100% at calc(50% + (var(--left-width) - var(--right-width)) / 2) 0%);
}

#main_staff_placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 下からの黒グラデーション（画像エリア内に配置） */
.main-visual-area::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* --- テキストコンテンツの配置調整 --- */
.hero-content {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1000px;
    color: #fff;
    z-index: 10;
    text-align: center;
}

/* サブ画像などの z-index 調整（マスクより上に） */
#sub1_placeholder, #sub2_placeholder, #sub3_placeholder, #sub4_placeholder {
    z-index: 11;
}

.foreground-staff {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--left-width) - var(--right-width)); /* 見える範囲に合わせる */
    max-width: 1000px;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}


.hero-bg-layer {
    position: absolute;
    bottom: -600px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, 
        #ffffff 0%, 
        #fff5f8 50%,
        #f7cbd8 100%
    );
}

.bg-large-text {
    position: absolute;
    bottom: 650px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(100px, 9.5vw, 220px);
	font-family: var(--font-en);
    font-weight: normal;
	color: #fff;
    white-space: nowrap;
    letter-spacing: 0.05em;
}

/* アニメーションを適用するコンテナ */
.bg-large-text-scroll {
    display: flex;
    width: max-content;
    animation: bg-infinite-scroll 60s linear infinite;
	margin-top: 200px;
}

/* テキスト本体のスタイル */
.bg-large-text-scroll span {
    display: inline-block;
    font-size: clamp(100px, 9.5vw, 220px);
    font-family: var(--font-en);
    font-weight: normal;
    color: #fff;
    letter-spacing: 0.05em;
    padding-right: 0.3em; /* テキスト同士の間隔を少し空ける */
}

/* 無限スクロールのアニメーション定義 */
@keyframes bg-infinite-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* スマホ表示の際の調整（必要に応じて） */
@media (max-width: 767px) {
    .hero-bg-layer {
        bottom: 320px; /* スマホで見えやすい位置に微調整 */
    }
    .bg-large-text-scroll {
        animation-duration: 40s; /* スマホは画面幅が狭いので少し早めに動かすとスムーズです */
    }
}

/* --- キャリアセクション修正版 --- */

.section-career {
    padding: 120px 0 0px;
	margin-top: 100px;
    position: relative;
    background: linear-gradient(to bottom, #ffffff 70%, #f7cbd8 100%);
}

.career-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 450px;
}

/* キャリアヒーロー（画像散布） */
.career-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.career-main-text {
    text-align: center;
    flex: 1;
}

.career-main-text h2 {
    font-size: 32px;
    font-family:var(--font-serif);
    margin: 15px 0;
    line-height: 1.4;
}

.career-images-left, .career-images-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.career-hero img { border-radius: 15px; object-fit: cover; }
.img-s1 { width: 120px; height: 120px; }
.img-s2 { width: 140px; height: 100px; }
.img-s3 { width: 150px; height: 110px; }
.img-s4 { width: 180px; height: 200px; }
.img-s5 { width: 120px; height: 100px; }

/* テキストボックスを前面へ */
.career-text-box {
    position: relative;
    z-index: 2; /* 画像より上にする */
    width: 650px; /* テキストの幅を制限して画像と被るようにする */
    pointer-events: none; /* 下の画像をクリック可能にする場合は追加 */
}

/* フォントサイズの細かな調整 */
.career-heading {
    font-family: var(--font-serif);
    font-size: 48px;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #333;
	font-weight: normal;
	align-items: baseline;
}

.num-pink {
    font-size: 110px;
    color: var(--pink);
    font-family: var(--font-yumincho);
    margin-right: 5px;
    line-height: 1;
	align-items: baseline;
}

.txt-main {
    font-size: 48px; /* 漢字などの基本サイズ */
}

.txt-small {
    font-size: 0.8em; /* ひらがな・助詞を少し小さく */
    letter-spacing: -0.05em;
}

.career-description {
    font-size: 15px;
    line-height: 2.2;
    color: #555;
    font-weight: 500;
}


#career_main_placeholder {
    position: absolute;
    top: -20px;
    right: -90px;
    width: 720px;
    height: 480px;
    border-radius: 20px;
    z-index: 1; 
    background-color: rgba(255, 0, 0, 0.03);
    /* 重なりをわかりやすくするための不透明度調整（本番では不要） */
}

.career-gallery {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 基本は上揃え */
    gap: 15px; /* 画像間の隙間 */
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    width: calc(25% - 12px); /* 4枚等幅 */
    height: auto;
    border-radius: 25px; /* 角丸 */
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 1枚目：最上部 */
#gallery_1 {
    margin-top: 0;
}

/* 2枚目：少し下げる */
#gallery_2 {
    margin-top: 50px;
}

/* 3枚目：1枚目と同じ高さ（またはごくわずかに下げる） */
#gallery_3 {
    margin-top: 10px;
}

/* 4枚目：最も深く下げる */
#gallery_4 {
    margin-top: 80px;
}

/* セクション全体：はみ出た部分を隠す */
.career-gallery-section {
    padding: 100px 0 50px; /* 左右パディングを0にすると端まで綺麗に流れます */
    width: 100%;
    overflow: visible;
}

.career-gallery {
    display: flex;
    width: max-content; /* 中身の幅に合わせる */
    gap: 20px; /* 画像間の隙間 */
    /* アニメーション：30秒かけて左へ。linearで一定速度に。 */
    animation: infinity-scroll 10s linear infinite;
}

.gallery-item {
    /* 無限スクロールの場合、calc(25%)ではなく固定幅（vwなど）にすると安定します */
    width: 280px; 
    height: auto;
    border-radius: 25px;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    flex-shrink: 0; /* 画像が潰れないように固定 */
}

/* --- 上下のリズム調整（クラス指定に変更） --- */
.item-1 { margin-top: 0; }
.item-2 { margin-top: 50px; }
.item-3 { margin-top: 10px; }
.item-4 { margin-top: 80px; }

/* --- アニメーションの定義 --- */
@keyframes infinity-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* 画像セットの半分（1セット分）移動したらループ */
        transform: translateX(calc(-50% - 10px)); /* 10pxはgapの半分 */
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    
    @keyframes infinity-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-50% - 5px)); }
    }
}

/* --- スマホ表示（768px以下）の調整 --- */
@media (max-width: 768px) {
    .career-gallery-section {
        padding: 20px 0;
    }

    .career-gallery {
        gap: 10px; /* 画像の間隔を狭める */
        flex-wrap: nowrap; /* 絶対に折り返さない */
        width: max-content; /* 中身の幅を自動で広げる */
        animation: infinity-scroll 25s linear infinite; /* スマホは少し早めに設定 */
    }

    .gallery-item {
        width: 180px; /* スマホでの画像サイズ */
        border-radius: 15px;
        flex-shrink: 0; /* 画像が潰れるのを防ぐ */
        /* スマホでは上下のリズムを解除しない */
        /* margin-top: 0 !important; */ /* <- コメントアウトまたは削除 */
    }

    .item-1 { margin-top: 0; }
    .item-2 { margin-top: 25px; } /* PC版50px -> スマホ版25pxに調整 */
    .item-3 { margin-top: 5px; }  /* PC版10px -> スマホ版5pxに調整 */
    .item-4 { margin-top: 40px; } /* PC版80px -> スマホ版40pxに調整 */
}


/* --- 水平スクロール全体の構造 --- */
.horizontal-scroll-wrapper {
    position: relative;
    width: 100%;
    height: 700vh; /* 7個のカード分、スクロール量を多めに確保 */
    background-color: #f7cbd8;
}

.sticky-content {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.section-charm {
    display: flex;
    padding: 0 100px;
    height: 100%;
    align-items: center;
    will-change: transform;
}

/* --- タイトル画像と吹き出し --- */
.charm-intro {
    flex-shrink: 0;
    width: 600px;
    margin-right: 120px;
}

#bubble_image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #fff;
    margin-left: 280px;
    margin-bottom: -30px;
    position: relative;
    z-index: 5;
    font-size: 14px;
}

#charm_title_img {
    width: 550px;
    height: auto;
    border-radius: 0;
    border-color: #ff0000;
    margin-bottom: 30px;
}

/* --- カードエリアとジグザグ --- */
.charm-cards-area {
    display: flex;
    gap: 120px; /* カード同士の間隔 */
    padding-right: 300px;
}

.charm-card {
    flex-shrink: 0;
    width: 420px;
}

.type-high { transform: translateY(-10px); }
.type-low { transform: translateY(100px); }

.card-inner {
    position: relative;
}

.card-img-shifted {
    width: 380px;
    height: auto;
    border-radius: 20px;
    position: relative;
    left: -40px;
    z-index: -1;
}

.card-content-box {
    width: 380px;
    background: #fff;
    padding: 50px 30px 45px;
	border: 1px solid var(--pink);
    border-radius: 20px;
    margin-top: -50px;
    z-index: 1;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.charm-badge {
	font-family: var(--font-optima);
    position: absolute;
    top: -45px;
    left: -20px;
    width: 95px;
    height: 95px;
    background: #fff;
	border: 1px solid var(--pink);
    border-radius: 50%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--pink);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.charm-badge span { font-size: 28px; font-family: 'Times New Roman', serif; }

.card-h3 {
	font-size: 24px;
	text-align: center;
	color: var(--pink);
	font-family: var(--font-serif);
	font-weight: normal;
    line-height: 1.4;
	margin-top: 0;
}

.block-ga { display: block; font-size: 16px; margin: 5px 0 5px 5px; }
.card-text { font-size: 14px; line-height: 1.8; color: #555; margin-top: 20px; }



.points-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.points-card {
    background: #fff;
    border-radius: 20px;
    padding: 80px 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
	border:1px solid var(--pink);
}

/* ヘッダー */
.points-header {
    text-align: center;
    margin-bottom: 50px;
}

.point-sub-title {
    font-size: 14px;
    color: var(--pink);
    letter-spacing: 0.1em;
    margin-bottom: 10px;
	font-family: var(--font-optima);
}

.point-main-title {
    font-size: 32px;
    color: #333;
    font-family: var(--font-serif);
	font-weight: normal;
	margin-top: 0;
}
/* --- 画像エリアのリズムとオーバーフロー --- */
.points-image-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 0px; /* ここで白ボックスからはみ出させる */
    margin-bottom: 80px;
    padding: 0 20px;
}

.point-img {
    width: 500px;
    height: 320px; /* 高さを揃えて、位置をずらすことでリズムを作る */
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

/* 交互に上下のリズムをつける */
#point_img_1, #point_img_3 {
    transform: translateY(0); /* 通常位置 */
}

#point_img_2, #point_img_4 {
    transform: translateY(60px); /* 下にずらす */
}

/* --- 無限スクロールのための親コンテナ --- */
.points-image-wrapper {
    width: 100%;
    overflow: visible; /* はみ出した画像を隠す */
    padding-bottom: 80px; /* ジグザグの下側が切れないように余白を確保 */
}

/* --- 画像エリア：ここを動かす --- */
.points-image-row {
    display: flex;
    gap: 20px;
    width: max-content; /* 中身の幅に合わせる */
    margin-top: 0px;
    padding: 0;
    animation: points-scroll 10s linear infinite;
}

.point-img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* 画像が潰れないように固定 */
}

/* --- 交互に上下のリズムをつける（nth-childで指定することで複製分にも適用） --- */

/* 1枚目、3枚目（奇数番目）のリズム */
.point-img:nth-child(4n+1),
.point-img:nth-child(4n+3) {
    transform: translateY(0);
}

/* 2枚目、4枚目（偶数番目）のリズム */
.point-img:nth-child(4n+2),
.point-img:nth-child(4n+0) {
    transform: translateY(60px);
}

/* --- 無限スクロールアニメーション --- */
@keyframes points-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 画像4枚 + gap(20px)×4個分 = ちょうど半分の地点でリセット */
        transform: translateX(calc(-50% - 10px)); 
    }
}

/* マウスホバーで止めたくない場合は以下を削除、止めたい場合は残す */
.points-image-row:hover {
    animation-play-state: running; /* 強制的に動かし続ける */
}

/* --- スマホ表示（767px以下）の調整 --- */
@media (max-width: 767px) {
    .points-image-wrapper {
        padding-bottom: 0px; /* スマホ用に余白を少し縮小 */
    }

    .points-image-row {
        gap: 15px; /* 画像の間隔を少し詰める */
        animation-duration: 25s; /* 画面幅が狭いので少し速く回すとスムーズ */
    }

    .point-img {
        width: 150px; /* スマホで見やすいサイズに調整 */
        height: 150px;
        border-radius: 15px;
    }

    /* スマホ版のジグザグ調整（移動量を少し控えめに） */
    .point-img:nth-child(even) {
        transform: translateY(30px);
    }
    
    @keyframes points-scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 7.5px)); } /* gap 15pxの半分 */
    }
}

/* ポイント各アイテムのレイアウト */
.point-content-item {
    margin-bottom: 60px;
}

.point-badge-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

/* 丸いPOINTバッジ */
.point-circle {
    width: 65px;
    height: 65px;
    border: 1px solid var(--pink);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--pink);
    font-size: 14px;
    flex-shrink: 0;
    font-family: var(--font-optima);
	font-weight: normal;
}

.point-circle span {
    font-size: 22px;
    line-height: 1;
}

.point-item-title {
    font-size: 24px;
    color: var(--pink);
    font-family: var(--font-serif);
	font-weight: normal;
}

.point-text-block p {
    font-size: 14px;
    line-height: 2;
    color: #555;
    margin-bottom: 10px;
    margin-left: 85px; /* バッジの横幅分ずらす */
}

/* 区切り線 */
.point-separator {
    border: none;
    border-top: 1px solid #f9dae5;
    margin-top: 40px;
}

/* 福利厚生グリッド（3カラム） */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 40px;
    list-style: none;
    padding: 0;
    margin-left: 85px;
}

.benefits-grid li {
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    font-weight: 500;
    color: #444;
    line-height: 1.5;
}

/* ピンクの四角いバレット */
.benefits-grid li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 10px;
    height: 10px;
    background-color: var(--pink);
}

.small-note {
    font-size: 12px;
    color: #888;
    font-weight: normal;
}

/* --- ポイントセクション：シームレス化修正版 --- */

.section-points {
    position: relative;
    padding: 160px 0 0px;
    background: linear-gradient(
        to bottom, 
        #f7cbd8 0%,
        #fcecf2 100%);
    margin-top: -1px;
    overflow: hidden;
}

/* 背面のアウトライン文字の位置調整 */
.bg-outline-points {
    position: absolute;
    top: 43px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 120px;
    font-family: var(--font-en);
	color: #fff;
    -webkit-text-stroke: 4px var(--pink);
    paint-order: stroke fill;
}

.points-card {
    background: #fff;
    border-radius: 40px;
    padding: 80px 60px;
    box-shadow: 0 20px 60px rgba(233, 77, 139, 0.1); 
    position: relative;
    z-index: 2;
}


/* --- 成長・キャリアセクション --- */


.grow-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダーエリアと浮遊画像 */
.grow-header {
    position: relative;
    text-align: center;
    margin-bottom: -50px; /* 下のカードと重ねる */
    z-index: 10;
}

.float-img {
    position: absolute;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 5;
}

/* 画像個別の配置 */
#grow_l1 { width: 140px; height: 180px; top: -50px; left: -100px; }
#grow_l2 { width: 160px; height: 160px; top: 100px; left: -120px; }
#grow_l3 { width: 180px; height: 120px; top: 250px; left: -80px; }
#grow_r1 { width: 220px; height: 140px; top: 30px; right: -120px; }
#grow_r2 { width: 180px; height: 220px; top: 180px; right: -100px; }

.grow-sub-title {
    font-size: 14px;
    color: var(--pink);
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 20px;
}

.grow-main-title {
    font-family: var(--font-serif);
    font-size: 42px;
    line-height: 1.4;
    margin-bottom: 30px;
}

.grow-desc {
    font-size: 14px;
    line-height: 2;
    color: #666;
    margin-bottom: 60px;
}

/* メインカード */
.career-main-card {
    background: #fff;
    border-radius: 40px;
    padding: 100px 60px 60px;
    position: relative;
    z-index: 1;
}

.career-block {
    margin-bottom: 80px;
}

.career-badge-title {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.career-circle {
    width: 60px;
    height: 60px;
    border: 1px solid var(--pink);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--pink);
    font-size: 10px;
    font-weight: normal;
    flex-shrink: 0;
    font-family: var(--font-optima);
}
.career-circle span { font-size: 20px; line-height: 1; }

.career-badge-title h3 {
    font-size: 22px;
    color: var(--pink);
    font-weight: normal;
}


/* キャリアヒーローエリア */
.career-hero {
    position: relative;
    min-height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* --- テキストスタイル --- */
.career-main-text {
    text-align: center;
    max-width: 700px;
}

.en-sub {
    font-family:var(--font-optima);
    color: #e94d8b;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 0.15em;
    line-height: 1.3;
    margin-bottom: 25px;
}

.career-main-text h2 {
    font-family: var(--font-serif);
    font-size: 52px;
    font-weight: normal;
    line-height: 1.4;
    color: #333;
    margin-bottom: 40px;
}

.career-main-text h2 span.kana{
	font-size: 36px;
}

.career-desc {
/*    font-family: var(--font-serif);*/
    font-size: 14px;
    line-height: 2.2;
    color: #666;
    letter-spacing: 0.05em;
}

.career-desc p {
    margin-bottom: 5px;
}

/* --- 画像の配置（絶対配置で散らす） --- */
.career-images-left img,
.career-images-right img {
    position: absolute;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 左上：はみ出している緑の服の女性 */
.img-s1 {
    width: 140px;
    height: 180px;
    top: -40px;
    left: -20px;
    border-radius: 0 0 50px 0; /* 右下だけ丸める */
}

/* 左中央：横長の施術風景 */
.img-s2 {
    width: 260px;
    height: 180px;
    top: 180px;
    left: 20px;
    border-radius: 50px;
}

/* 左下：ピンクの服の女性（横顔） */
.img-s3 {
    width: 180px;
    height: 220px;
    bottom: -60px;
    left: -10px;
    border-radius: 50px 50px 0 0;
}

/* 右上：黒い服の女性（笑顔） */
.img-s4 {
    width: 220px;
    height: 260px;
    top: 50px;
    right: 20px;
    border-radius: 30px;
}

/* 右下：ベージュの服の女性（施術） */
.img-s5 {
    width: 240px;
    height: 180px;
    bottom: 20px;
    right: -10px;
    border-radius: 30px;
}


/* --- キャリアプランテーブル --- */
.career-plan-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-row {
    display: flex;
    gap: 10px;
}

.plan-row.header .col-skill {
    color: var(--pink);
    font-weight: normal;
    border: 1px solid #fde7f0;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.col-year { width: 100px; display: flex; align-items: center; justify-content: center; font-weight: normal; color: #fff; border-radius: 10px; }
.year-1 { background-color: #fcecf2; color: var(--pink); }
.year-2 { background-color: #f9dae5; color: var(--pink); }
.year-3 { background-color: #f7bbd0; color: var(--pink); }

.col-skill {
    flex: 1;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    position: relative;
}

/* テーブルの吹き出しのような飾り（任意） */
.col-skill::before {
    content: "";
    position: absolute;
    left: -6px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: #fff;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* --- スケジュール（横スクロール） --- */
.schedule-scroll-container {
    overflow-x: auto; /* ここで横スクロールを有効に */
    padding-bottom: 20px;
    margin: 0 -20px;
    padding: 0 20px 20px;
}

/* スクロールバーのカスタマイズ（任意） */
.schedule-scroll-container::-webkit-scrollbar { height: 8px; }
.schedule-scroll-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.schedule-scroll-container::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 10px; }

.schedule-flex {
    display: flex;
    gap: 20px;
    width: max-content; /* 中身の幅に合わせる */
}

.schedule-card {
    width: 320px;
    background-color: #fdf2f6;
    border-radius: 15px;
    padding: 20px;
}

.day-label {
    text-align: center;
    font-size: 14px;
    color: var(--pink);
    margin-bottom: 15px;
    border-bottom: 1px solid #f9dae5;
    padding-bottom: 10px;
}

.work-time {
    font-weight: normal;
    color: var(--pink);
    font-size: 18px;
    margin-bottom: 10px;
}

.work-detail {
    font-size: 13px;
    line-height: 1.7;
    color: #666;
}

.card-flex-content {
    display: flex;
    gap: 10px;
}

.schedule-mini-img {
    width: 100px;
    height: 80px;
    border-radius: 10px;
    flex-shrink: 0;
}

.career-sep {
    border: none;
    border-top: 1px solid #fde7f0;
    margin: 60px 0;
}

/* --- セクションベース --- */
.section-grow-career {
    padding: 60px 0 120px;
    background-color: #fef1f6;
    background: linear-gradient(to bottom, #fcecf2 0%, #ffffff 100%);
    position: relative;
}


.grow-career-white-card {
    position: relative;
    background: #fff;
    border-radius: 40px;
    padding: 100px 40px;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 15px 50px rgba(0,0,0,0.05);
	border: 1px solid var(--pink);
}


/* --- テキストコンテンツ (z-index: 2) --- */
.career-main-text {
    position: relative;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    z-index: 2; /* 枠線の上、画像の下 */
}

.en-sub {
    font-family:var(--font-optima);
    color: #e94d8b;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.15em;
    margin-bottom: -10px;
    text-align: center;
}

.career-main-text h2 {
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 56px; /* 画像の迫力に合わせて調整 */
    line-height: 1.4;
    color: #333;
    margin-bottom: 40px;
}

.career-desc {
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 15px;
    line-height: 2.4;
    color: #666;
}

/* --- 画像の配置調整 (z-index: 10) --- */
.career-hero {
    position: relative;
}

.career-images-left img,
.career-images-right img {
    position: absolute;
    object-fit: cover;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15); /* 浮遊感を出すシャドウ */
    z-index: 10; /* テキストよりも「一番上」に表示 */
}


/* 左上：緑の服の女性 */
.img-s1 {
    width: 250px;
    height: 250px;
    top: -160px;
    left: -240px;
    border-radius: 40px;
}

/* 左中央：横長の施術 */
.img-s2 {
    width: 250px;
    height: 250px;
    top: 50px;
    left: -120px;
    border-radius: 60px;
}

/* 左下：ピンクの服の女性 */
.img-s3 {
    width: 250px;
    height: 250px;
    top: 260px;
    left: -180px;
    border-radius: 40px;
	z-index: 2!important;
}


/* 右上：黒い服の女性2名（笑顔） */
.img-s4 {
    width: 400px;
    height: 400px;
    top: -60px;
    right: -240px;
    border-radius: 40px;
}

/* 右下：ベージュの服の女性（施術） */
.img-s5 {
    width: 280px;
    height: 280px;
    top: 260px;
    right: -80px;
    border-radius: 40px;
}

/* --- 共通：白いカード --- */
.grow-career-white-card {
    background: #fff;
    border-radius: 40px;
    padding: 80px 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.career-block { margin-bottom: 80px; }
.career-title-area { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.career-h3 { font-size: 24px; color: var(--pink); font-weight: normal; font-family: var(--font-serif);}

/* --- 1. キャリアプラン矢印テーブル --- */
.career-plan-table { display: flex; flex-direction: column; }

.plan-header { display: flex; margin-bottom: -10px; }
.empty-cell { width: 150px; }
.header-cell {
    flex: 1;
    margin: 0 10px;
    position: relative;
    border: 1px solid #9b87b5;
    border-radius:10px;
	background: #fff;
    color: #9b87b5;
    font-weight: 700;
    text-align: center;
    padding: 15px 0;
    font-size: 15px;
    letter-spacing: 0.1em;
}
/* ヘッダーの小さな矢印 */
.header-cell::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background-color: #fff;
    border-right: 1px solid #9b87b5;
    border-bottom: 1px solid #9b87b5;
}

.plan-body { display: flex; }

/* 矢印カラム（clip-pathで再現） */
.year-arrows { width: 150px; display: flex; flex-direction: column; }
.arrow-item {
    height: 143px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pink);
    font-size: 26px;
    font-weight: normal;
    margin-bottom: -26px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
    z-index: 1;
}
.arrow-item span { font-size: 14px; margin-left: 2px; }
.arrow-item.v1 { background-color: #fdf2f6; z-index: 3; }
.arrow-item.v2 { background-color: #f9dae5; z-index: 2; }
.arrow-item.v3 { background-color: #f7bbd0; z-index: 1; }

.plan-rows { flex: 1; display: flex; flex-direction: column; }
.plan-row {
    display: flex;
    height: 120px;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.cell { flex: 1; padding: 0 20px; font-size: 14px; color: #333; line-height: 1.6; }
.sq-bullet {
    display: inline-block;
    width: 10px; height: 10px;
    background-color: var(--pink);
    margin-right: 10px;
}

/* --- 2. 1週間のスケジュール --- */
.schedule-lead { font-size: 14px; color: #666; margin-bottom: 30px; text-align: center; }

.schedule-horizontal-area {
    position: relative;
    padding: 60px 0;
    overflow-x: auto; /* 任意スクロール */
}

/* 背景を貫く線 */
.schedule-bg-line {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #bfaabf; /* くすみピンク */
    z-index: 0;
}

.schedule-list {
    display: flex;
    gap: 30px;
    width: max-content;
    position: relative;
    z-index: 1;
}

.schedule-card {
    width: 300px;
    background-color: #fdf2f6;
    padding: 20px;
    border-radius: 0;
}

.day-label-bubble {
    width: 160px;
    margin: -40px auto 20px;
    border: 1px solid #9b87b5;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
    text-align: center;
    color: #9b87b5;
    font-weight: normal;
    position: relative;
}
.day-label-bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: #fff;
    border-right: 1px solid #9b87b5;
    border-bottom: 1px solid #9b87b5;
}

.work-time { color: var(--pink); font-size: 20px; font-weight: normal; margin-bottom: 10px; }
.off-color { font-size: 24px; }
.work-text { font-size: 13px; line-height: 1.8; color: #444; flex: 1; }

.flex-body { display: flex; gap: 10px; }

/* スケジュール内画像 */
.schedule-thumb {
    width: 100px;
    height: 100px;
    border-radius: 15px;
    flex-shrink: 0;
}

.card-sep { border: none; border-top: 1px solid #fde7f0; margin: 60px 0; }

.container{
	width: 1200px;
	margin: 0 auto;
}
/* --- インタビューセクション --- */
.section-grow-career {
    position: relative;
    z-index: 10; /* 写真より数字を大きくして前面へ */
}

/* 白いカードに背景色があることを確認 */
.grow-career-white-card {
    background-color: #fff;
    position: relative;
	margin-bottom: -200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 2. 写真セクションの調整 */
.section-staff-interview {
    padding-bottom: 100px;
    background-color: #fff;
    position: relative;
    z-index: 1; /* 背面に配置 */
}

.interview-top-visual {
    width: 100%;
    max-width: 2000px;
    margin-top: -150px; 
    margin-bottom: 80px;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 250px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 250px);
}

#interview_group_img {
    width: 100%;
    height: auto;
    display: block;
	margin-top: 150px;
    box-shadow: none; 
}

/* タイトルエリア */
.section-title-area {
    text-align: center;
    margin-bottom: 100px;
}

.section-title-area .sub-title {
    font-size: 14px;
    color: var(--pink);
    font-weight: normal;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
	font-family: var(--font-optima);
}

.section-title-area .main-title {
    font-size: 36px;
    font-family: var(--font-serif);
    color: #333;
	margin-top: 0;
	font-weight: normal;
}

/* インタビュー行の共通設定 */
.interview-row {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto 120px;
}

/* 偶数番目（日永田さん・藤原さんなど）を右側に反転 */
.item-right {
    flex-direction: row-reverse;
}

/* プロフィール側 */
.staff-profile-side {
    flex-shrink: 0;
    width: 300px;
    text-align: center;
}

.staff-img {
    width: 280px;
    height: 380px;
    border-radius: 20px;
    margin-bottom: 20px;
/*    box-shadow: 0 5px 20px rgba(0,0,0,0.05);*/
}

.staff-school {
    font-size: 20px;
    color: #333;
    margin-top: 0px;
    margin-bottom: 5px;
    font-family: var(--font-serif);
	font-weight: normal;
}

.staff-name {
    font-size: 28px;
    font-family: var(--font-serif);
    color: #333;
    line-height: 1.2;
}

/* Q&A側 */
.qa-side {
    flex: 1;
}

.qa-item {
    margin-bottom: 40px;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 25px;
}

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

.q-header {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--pink);
    font-weight: normal;
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.q-icon {
    width: 32px;
    height: 32px;
    background-color: var(--pink);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    flex-shrink: 0;
}

.a-text {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    padding-left: 47px; /* Qアイコン+gapの分だけインデント */
}




/* --- レイアウト共通設定 --- */
.interview-row {
    display: flex;
    align-items: flex-end; /* 人物とボックスの下端を揃える */
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto 100px;
}

.item-right {
    flex-direction: row-reverse;
}

/* --- Q&Aボックス（ここが重要） --- */
.qa-side {
    flex: 1;
    background: #fff;
    border-radius: 35px;
    padding: 60px 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06); /* 柔らかい影 */
    position: relative;
}

.qa-item {
    margin-bottom: 35px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 25px;
}

.qa-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

/* Qアイコンの吹き出し化 */
.q-icon {
    width: 36px;
    height: 36px;
    background-color: var(--pink);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    flex-shrink: 0;
    position: relative;
}

/* Qアイコンの尻尾（吹き出し） */
.q-icon::after {
	content: "";
    position: absolute;
    bottom: 3px;
    right: -7px;
    width: 8px;
    height: 6px;
    background-color: var(--pink);
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transform: translateX(-50%) rotate(20deg);
}

.q-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: var(--pink);
    font-weight: normal;
    font-size: 20px;
    font-family: var(--font-serif);
    margin-bottom: 15px;
}

.a-text {
    font-size: 14px;
    line-height: 2;
    color: #555;
    padding-left: 51px; /* アイコン+gap分 */
}

/* --- 人物プロフィールエリア --- */
.staff-profile-side {
    width: 320px;
    flex-shrink: 0;
    text-align: center;
    position: relative;
}

.staff-img-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.staff-img {
    width: 280px;
    height: auto;
    display: block;
}

.staff-name {
    font-size: 34px;
    font-family: var(--font-serif);
	font-weight: normal;
    letter-spacing: 0.1em;
	margin-top: 0;
}

.staff-name .en {
    color: var(--pink);
    font-size: 12px;
	font-family: var(--font-optima);
    display: block;
    margin-top: 5px;
}


.staff-img-wrapper .header-cell {
    margin: 0px;
	margin-top: -60px;
	border-radius: 10px;
	padding: 5px 0;
}

.staff-img-wrapper .header-cell strong{
	font-size: 30px;
    font-family: var(--font-yumincho);
}


/* --- 募集要項セクション --- */

.section-recruit {
    padding: 0 0 100px;
    background: linear-gradient(to bottom, #ffffff 0%, #fdf2f6 100%);
}

/* 上部画像グリッド */
.recruit-visual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 250px;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto 60px;
}

.recruit-img-top {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 2px dashed var(--border-color);
}

.recruit-main-container {
    margin: 0 auto;
    background-color: #b33e6c;
	padding: 80px 0 120px;
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
    margin-bottom: -40px;
}

.recruit-title {
    text-align: center;
    font-size: 32px;
    font-family: var(--font-serif);
    margin-bottom: 40px;
    letter-spacing: 0.2em;
}

/* タブボタンのデザイン */
.recruit-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.tab-btn {
    padding: 12px 40px;
    border-radius: 30px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: #fff;
    color: #b33e6c;
}

/* テーブルのスタイル */
.recruit-table-wrapper {
    display: none; /* 基本は非表示 */
	max-width: 900px;
    margin: 0 auto;
}

.recruit-table-wrapper.active {
    display: block; /* activeクラスがついた方だけ表示 */
	max-width: 900px;
    margin: 0 auto;
}

.recruit-table {
    width: 100%;
    background: #fff;
    color: #333;
    border-collapse: collapse;
    border-radius: 0;
    overflow: hidden; /* 角丸を適用するため */
}

.recruit-table th, .recruit-table td {
    padding: 25px;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 14px;
    line-height: 1.8;
}

.recruit-table th {
    width: 180px;
    background-color: #fdf2f6;
    color: #b33e6c;
    font-weight: normal;
    vertical-align: top;
}

/* 交互の色（ピンクの行） */
.recruit-table tr.bg-pink td {
    background-color: #fdf2f6;
}

.recruit-table tr:last-child th,
.recruit-table tr:last-child td {
    border-bottom: none;
}

/* --- フォームセクション --- */

.section-form {
    padding: 100px 0;
    background-color: #fdf2f6; /* フォーム背景の淡いピンク */
}

.form-container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fdf2f6;
    padding: 0 20px;
}

.form-title {
    text-align: center;
    font-size: 32px;
    font-family: var(--font-serif);
    color: #333;
	font-weight: normal;
    margin-bottom: 30px;
}

.form-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}

.badge {
    background-color: #ce6a8d; /* バッジのピンク */
    color: #fff;
    padding: 8px 25px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
}

/* フォームレイアウト */
.recruit-form {
    border-top: 1px solid #ccc;
}

.form-item {
    display: flex;
    padding: 25px 0;
    border-bottom: 1px solid #ccc;
    align-items: center;
}

.form-item label {
    width: 250px;
    font-size: 14px;
    color: #666;
}

.input-area {
    flex: 1;
}

.input-area input[type="text"],
.input-area input[type="tel"],
.input-area input[type="email"],
.input-area input[type="number"],
.input-area textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #eee;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 入力エリアの中身を横並びにする */
.input-area {
    flex: 1;
    display: flex; /* 追加：中身を横並びにする */
    align-items: center; /* 追加：垂直方向の中央揃え */
}

/* 年齢用の短い入力欄の制御 */
.input-area .input-short {
    width: 80px !important; /* width: 100% を強制的に上書き */
    flex: 0 0 80px; /* 伸び縮みしないように固定 */
    margin-right: 10px; /* 単位との間に余白 */
}

.unit {
    margin-left: 0; /* 上記の margin-right で調整するためリセット */
    font-size: 14px;
    white-space: nowrap; /* 単位が改行されないように固定 */
}

/* スマホ表示（767px以下）の微調整 */
@media (max-width: 767px) {
    .form-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0;
    }

    .form-item label {
        width: 100%;
        margin-bottom: 10px;
        font-weight: bold;
    }

    /* スマホでも横並びを維持する */
    .input-area {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .input-area .input-short {
        width: 80px !important; /* スマホでも幅を固定 */
    }
}

/* ラジオボタン */
.radio-group {
    display: flex;
    gap: 30px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

/* テキストエリアは上揃え */
.item-textarea {
    align-items: flex-start;
}

/* --- 個人情報保護方針（スクロール） --- */
.privacy-policy-section {
    margin-top: 50px;
    background-color: #fff;
    border: 1px solid #f9dae5;
    border-radius: 8px;
    overflow: hidden;
}

.policy-title {
    background-color: #f9ecef;
    padding: 15px;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.plus-icon {
    background-color: #ce6a8d;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.policy-scroll-box {
    height: 150px; /* スクロールさせる高さ */
    overflow-y: scroll;
    padding: 20px;
    font-size: 12px;
    line-height: 1.8;
    color: #666;
}

/* 注意書き */
.form-disclaimer {
    margin-top: 40px;
    text-align: center;
    font-size: 13px;
    line-height: 1.8;
    color: #444;
}

.caution {
    color: #e94d8b;
    font-weight: normal;
}

/* ボタン */
.form-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.btn-submit {
    background-color: #bc3e6c;
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 4px;
    font-weight: normal;
    cursor: pointer;
    font-size: 16px;
}

.btn-clear {
    background-color: #f6d8e2;
    color: #333;
    border: none;
    padding: 15px 40px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}