@charset "UTF-8";

/* ===================================================
   基本設定
   =================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.8;
    background-color: #fcfcfc;
}
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* プレースホルダー（画像が入る部分の一時的なグレー背景） */
.hero-image-placeholder, .slider-placeholder, .event-image-placeholder, .gallery-placeholder {
    background-color: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    margin-bottom: 20px;
}
/* .hero-image-placeholder { height: 300px; }*/
.slider-placeholder { height: 250px; }
.event-image-placeholder { height: 200px; }
.gallery-placeholder { height: 180px; }

.hero-section,
.hero-image-placeholder,
.hero-image-placeholder img {
    position: static !important; /* 画面固定を解除して通常スクロールに */
    top: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: 100% !important;
    height: auto !important;
}

/* 見出し */
.recruit-badge {
    background-color: #333;
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 20px;
}
.section-title {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    color: #444;
}
.section-title-sub {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 20px;
}

/* メッセージ */
.message-section {
    text-align: center;
    margin-bottom: 60px;
}
.message-catch {
    margin-bottom: 30px;
}
.message-catch .en {
    font-size: 2rem;
    font-weight: bold;
    color: #111;
}
.message-catch .ja {
    font-size: 1.2rem;
    color: #666;
    margin-top: 5px;
}
.message-text p {
    margin-bottom: 15px;
    font-size: 0.95rem;
}

/* ===================================================
   特徴セクション（グレーの枠とカードの装飾）
   =================================================== */
.about-section {
    margin-bottom: 60px;
}

/* 「こんな会社です!」の見出し（グレー枠内に合わせて背景なしに調整） */
.company-heading {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 25px;
    background: transparent;
    padding: 0;
    font-weight: bold;
}

/* 「こんな会社です!」から「4つの特徴カード」までを綺麗に囲むグレーの枠 */
.company-intro-box {
    background-color: #f5f5f5 !important; /* 強制的に薄いグレー背景を適用 */
    border: 1px solid #e0e0e0;             /* 薄い境界線 */
    border-radius: 12px;                  /* 角の丸み */
    padding: 40px 30px;                   /* 内側の十分な余白 */
    margin-top: 30px;
    margin-bottom: 40px;                  /* 下部との余白 */
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
@media (max-width: 600px) {
    .features-grid { grid-template-columns: 1fr; }
}

/* グレー枠の中にある特徴カード（白く、影を付けて目立たせる設定） */
.company-intro-box .feature-card {
    background-color: #ffffff !important; /* カード自体は真っ白にして浮き立たせる */
    border: none;                         /* 枠線を消してスッキリさせる */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 軽い影を落とす */
    border-radius: 8px;                   /* 角の丸み */
    padding: 20px;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
    margin-bottom: 5px;
}
.badge-blue { background-color: #3498db; }
.badge-orange { background-color: #e67e22; }
.badge-green { background-color: #2ecc71; }
.badge-pink { background-color: #e91e63; }

/* ===================================================
   求人職種ボタン（仲間募集中エリア）
   =================================================== */
.jobs-section {
    background-color: #e3f2fd; /* 淡い水色の背景 */
    padding: 40px 20px;
    border-radius: 12px;
    margin-bottom: 60px;
}
.job-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 500px;
    margin: 0 auto 40px auto;
}
.job-btn {
    display: block;
    background-color: #fff;
    color: #333;
    text-decoration: none;
    text-align: center;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 30px; /* 丸みのある白いボタン */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}
.job-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* ===================================================
   EVENT & GALLERY
   =================================================== */
/* 青枠から出したEVENTセクションの余白調整 */
.event-section {
    margin: 50px 0; /* 上下にゆったりとした余白をつくる */
}
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

/* ===================================================
   採用詳細（★採用情報のH2と説明文の間のすき間を狭める調整）
   =================================================== */
.recruit-details-section {
    padding-top: 20px;
}

/* 「採用情報」タイトル（下マージンを最小限に） */
.recruit-details-section h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 8px; /* 隙間を狭めるため、10px以下（8px）に設定 */
}

/* 導入メッセージ枠（上マージンをリセットし、見出しとの間を詰める） */
.introduction_guide {
    text-align: center;
    margin-top: 0 !important; /* H2とのすき間をなくす */
    margin-bottom: 30px;      /* テーブルとの間の余白 */
}
.introduction_guide p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;                /* 余計な余白を完全にゼロにする */
}

/* ===================================================
   各職種ブロック（間隔をギュッと狭く調整）
   =================================================== */
.job-details-block {
    margin-bottom: 25px;      /* ブロック下の余白を狭く */
    padding-top: 15px;        /* ブロック上の余白を狭く */
    scroll-margin-top: 80px;  /* ページ内ジャンプ時にヘッダーと被らない設定 */
}

/* 職種ブロックの見出し（例：「【募集職種】商品企画」） */
.job-block-title {
    font-size: 1.3rem;
    color: #3498db; 
    border-bottom: 2px solid #3498db;
    padding-bottom: 8px;
    margin-bottom: 15px;      /* 見出しとテーブルの間の余白 */
    font-weight: bold;
}

/* 採用情報のテーブル装飾 */
.recruit_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}
.recruit_table th, .recruit_table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    font-size: 0.95rem;
    text-align: left;
}
.recruit_table th {
    background-color: #f9f9f9;
    width: 25%;
    font-weight: bold;
}

/* ===================================================
   応募方法 & フッター
   =================================================== */
.recruit_method {
    margin-top: 50px;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 30px;
    border-radius: 8px;
}
.recruit_method h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    border-left: 4px solid #333;
    padding-left: 10px;
}
.recruit_method p {
    margin-bottom: 25px;
    font-size: 0.95rem;
}

footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    color: #aaa;
    border-top: 1px solid #eee;
}

/* ===================================================
   Contact Form 7 レイアウト・スマホ表示ずれ防止（突き抜け修正版）
   =================================================== */

/* 1. ラジオボタンを囲む親要素の設定 */
.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

.wpcf7-radio {
    display: flex !important;
    flex-direction: column !important; /* スマホ・PCともに縦に綺麗に並べる場合 */
    align-items: flex-start !important; /* 全体を左揃えにする */
    width: 100% !important;
    margin-top: 10px !important;
}

/* PC等で横並びにしたい場合は以下（レスポンシブ切り替え） */
@media (min-width: 601px) {
    .wpcf7-radio {
        flex-direction: row !important;  /* PC時は横並び */
        flex-wrap: wrap !important;      /* 折り返し指定 */
    }
}

/* 2. 各選択肢（○と文字のセット）の共通設定 */
.wpcf7-radio .wpcf7-list-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 20px 12px 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
}

/* 3. ラジオボタン（○）自体のスタイル強制作成 */
.wpcf7-radio .wpcf7-list-item input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: radio !important;
    margin: 0 8px 0 0 !important;   /* 右に8pxの隙間 */
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    flex-shrink: 0 !important;      /* 変形防止 */
    position: static !important;    /* 位置固定の解除 */
}

/* 4. ラベル文字（商品企画、デザイナー等） */
.wpcf7-radio .wpcf7-list-item-label {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important; /* 文字の途中で改行させない */
    font-size: 0.95rem !important;
    color: #333 !important;
}

/* 5. フォーム全体のテキスト揃え */
.wpcf7-form p {
    margin-bottom: 20px !important;
    text-align: left !important;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="file"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 1rem !important;
}