@charset "UTF-8";

@media screen and (min-width: 0px) {

/* ==========================================================================
     求人ページ (page-recruit.php)
     ========================================================================== */
      div#wrap.recruit_wrap{
        background: linear-gradient(to bottom, #faf6f0 0%, #f4eae1 70%, #e2d2c2 100%);
      }
      div#wrap.recruit_wrap header .main_title{
        background-color: #A4C2A5;
      }
      div#wrap.recruit_wrap header .main_title h1{
        color: #fff;
      }
      [id] {
    scroll-margin-top: 100px; /* 👈 ここの数字でズレ（上部の余白）を自由に調整できます */
      }
      /* ヘッダー */
      .recruit_wrap .main_title{
        position: relative;
      }
      .reserve-btn.recruit{
        background:#a4c2a5 ;
      }
      .header_line{
        position: absolute;
        top:10px;
        right: 20px;
        text-align: center;
      }
      .header_line .nav-icon{
        margin: 0 auto;
        width: 30px;

      }
    .header_line span{
        display: block;
        font-size: 10px;
      }
      /* フッダー */
       footer p.left {
        padding: 0 0 0 16px;
        text-align: left;
    }
      /* スライダー */
      div#wrap.recruit_wrap .spv{
        width: 100%;
        margin: 0 auto;
        padding: 10px;
      }
      div#wrap.recruit_wrap .spv .swiper{
        width: 100%;
        padding-bottom: 25px;
        overflow: visible;
      }
      div#wrap.recruit_wrap .spv .swiper-slide{
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }
      div#wrap.recruit_wrap .spv .swiper-slide img   {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        -o-object-fit: cover;
          object-fit: cover;
      }
      div#wrap.recruit_wrap .spv .swiper-slide{
        background: transparent;
      }
      /* --- タブ・サブメニュー --- */
      .submenu {
        width: 100%;
        min-width: 80px;
        margin: 1rem auto 0 auto;
        margin-bottom: 0;
      }
      .submenu .menu {
        display: flex;
        margin-bottom: 0;
        padding: 0;
        background-color: transparent; /* "none"から適切な値に修正 */
        font-size: 1rem;
        text-align: center;
        height: 2.4rem;
      }
      .submenu .menu li:first-child {
        border-left: none;
      }
      .submenu .menu-rec_submenu-container .menu li ,.submenu .menu-recruit_flow-container .menu li{
        padding: 2px 0;
        border: solid 4px #A4C2A5;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        background-color: #fff;
        flex: 1;
      }
      .submenu .menu-rec_submenu-container .menu li a,.submenu .menu-recruit_flow-container .menu li a  {
        color: #A4C2A5;
        font-weight: 600;
        font-size: 1rem;
      }
      .submenu .menu-rec_submenu-container .menu .current_page_item, .submenu .menu-rec_submenu-container .menu .current-menu-item,.submenu .menu-recruit_flow-container .menu .current_page_item, .submenu .menu-recruit_flow-container .menu .current-menu-item {
        background-color: #A4C2A5;
        color: #ffffff;
      }
      .submenu .menu-rec_submenu-container .menu .current_page_item a, .submenu .menu-rec_submenu-container .menu .current-menu-item a ,.submenu .menu-recruit_flow-container .menu .current_page_item a, .submenu .menu-recruit_flow-container .menu .current-menu-item a {
        color: #ffffff;
        font-weight: 600;
      }
      /* 4つの働くメリット */
      /* --- メリットセクション全体 --- */
      .merit-section {
        padding: 0px;
        background-color: #FAF8F5; /* 提案した柔らかい白 */
        font-family: sans-serif;
      }
      .merit-title {
        text-align: center;
        font-size: 1.4rem;
        line-height: 1.5;
        color: #fff;
        margin-bottom: 40px;
        font-weight: 700;
        background-color: #A4C2A5;
        padding: 16px 0 0 0;
      }
      .merit-title span {
        font-size: 1.8rem;
        color: #fff;
        display: inline-block;
      }
      .merit-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 20px 16px;
      }
      .merit-card {
        position: relative;
        background: #ffffff;
        padding: 30px 20px 25px;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(164, 194, 165, 0.1);
        text-align: center;
        border: 1px solid rgba(164, 194, 165, 0.2);
      }
      .merit-badge {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #A4C2A5;
        color: #ffffff;
        font-size: 0.9rem;
        font-weight: bold;
        padding: 4px 14px;
        border-radius: 20px;
        letter-spacing: 0.05em;
      }
      .merit-icon {
        font-size: 2.2rem;
        margin-bottom: 10px;
      }
      .merit-card-title {
        font-size: 1.2rem;
        color: #1A2E22;
        margin-bottom: 12px;
        font-weight: 700;
      }
      .merit-card-text {
        font-size: 0.95rem;
        color: #333333;
        line-height: 1.6;
        text-align: left;
      }
      .merit-card-text strong {
        color: #1A2E22;
        background: linear-gradient(transparent 60%, rgba(164, 194, 165, 0.3) 60%); /* マーカー風の線 */
        font-weight: bold;
      }
      .cycle-section {
        padding: 50px 16px;
        background-color: #fff;
      }
      .cycle-inner {
        max-width: 1000px;
        margin: 0 auto;
      }
      .cycle-title {
        text-align: left;
        font-size: 1.4rem;
        line-height: 1.5;
        margin-bottom: 20px;
        font-weight: bold;
        background-color: #a4c2a5;
        color: #fff;
        padding: 20px 15px;
        border-radius: 8px;
      }
      .cycle-title span {
        display: block;
        font-size: 1.1rem;
        margin-top: 5px;
        opacity: 0.9;
        text-align: center;
      }
      .cycle-lead {
        text-align: left;
        font-size: 14px;
        margin-bottom: 40px;
        line-height: 1.6;
        color: #444;
      }
      .cycle-grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        margin: 0 auto 45px;
        width: 100%;
        max-width: 360px;
      }
      .cycle-card {
        position: relative;
        padding: 12px 10px;
        box-sizing: border-box;
        aspect-ratio: 1/1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
      .step-01 {
        grid-column: 1;
        grid-row: 1;
        background-color: #a4c2a5;
        color: #fff;
        z-index: 4;
      }
      .step-02 {
        grid-column: 2;
        grid-row: 1;
        background-color: #cda2a6;
        color: #fff;
        z-index: 3;
      }
      .step-04 {
        grid-column: 2;
        grid-row: 2;
        background-color: #bfa5c7;
        color: #fff;
        z-index: 2;
      }
      .step-03 {
        grid-column: 1;
        grid-row: 2;
        background-color: #c9bca2;
        color: #fff;
        z-index: 1;
      }
      .cycle-arrow {
        position: absolute;
        display: block;
        z-index: 10;
      }
      .arrow-right {
        top: 50%;
        right: -10px; /* 隣のマスへはみ出す距離 */
        transform: translateY(-50%);
        width: 10px; /* 三角形の高さ */
        height: 20px; /* 三角形の底辺 */
        background-color: #a4c2a5;
        clip-path: polygon(0% 0%, 100% 50%, 0% 100%); /* 右向きの三角に切り抜き */
      }
      .arrow-down {
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px; /* 三角形の底辺 */
        height: 10px; /* 三角形の高さ */
        background-color: #cda2a6;
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%); /* 下向きの三角に切り抜き */
      }
      .arrow-left {
        top: 50%;
        left: -10px;
        transform: translateY(-50%);
        width: 10px;
        height: 20px;
        background-color: #bfa5c7;
        clip-path: polygon(100% 0%, 0% 50%, 100% 100%); /* 左向きの三角に切り抜き */
      }
      .arrow-up {
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 10px;
        background-color: #c9bca2;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 上向きの三角に切り抜き */
      }
      .cycle-number {
        font-size: 14px;
        font-weight: bold;
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
        padding: 1px 8px;
        border-radius: 12px;
        margin-bottom: 4px;
        letter-spacing: 0.03em;
        display: inline-block;
      }
      .cycle-number::before {
        content: "STEP ";
        font-size: 14px;
      }
      .cycle-item-title {
        font-size: 16px;
        margin-bottom: 4px;
        font-weight: bold;
        line-height: 1.2;
      }
      .cycle-text {
        font-size: 14px;
        line-height: 1.3;
        margin: 5px;
        padding: 5px;
        width: calc(100% - 10px);
        text-align: left;
        background-color: rgba(255, 255, 255, 0.9);
        color: #333;
        border-radius: 0.4rem;
      }
      .cycle-trivia-box {
        background-color: #fcfaf7;
        border-left: 5px solid #a4c2a5;
        padding: 24px 20px;
        border-top: none;
        border-right: none;
        border-bottom: none;
        border-radius: 0 8px 8px 0;
        margin: 0 auto;
        max-width: 360px;
        box-sizing: border-box;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }
      .trivia-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
      }
      .trivia-icon {
        font-size: 18px;
        line-height: 1;
      }
      .trivia-title {
        font-size: 15px;
        font-weight: bold;
        color: #2e4430;
        margin: 0;
      }
      .trivia-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .trivia-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #e2dad0;
        padding-bottom: 6px;
      }
      .trivia-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .trivia-label {
        font-size: 14px; /* 14px以上 */
        color: #666;
        font-weight: 500;
      }
      .trivia-value {
        font-size: 14px; /* 14px以上 */
        color: #333;
      }
      .trivia-value strong {
        font-size: 18px; /* 数字を目立たせる */
        color: #a4c2a5; /* メインカラーで強調 */
        font-weight: bold;
      }


      /*  先輩セラピストの声 セクションカスタムCSS */
      .therapist-voice-section {
        padding: 60px 16px;
        background-color: #fffaf7; /* 既存のサイトに馴染む薄い暖色 */
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
      }
      .voice-container {
        max-width: 1000px;
        margin: 0 auto;
      }
      .voice-section-title {
        text-align: center;
        font-size: 24px;
        color: #e57373; /* 優しいピンク・赤系 */
        margin-bottom: 5px;
        font-weight: bold;
      }
      .voice-section-subtitle {
        text-align: center;
        font-size: 14px;
        color: #777;
        margin-bottom: 40px;
      }
      .voice-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
      }
      .voice-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 4px 15px rgba(229, 115, 115, 0.08);
        position: relative;
        border: 4px solid #fce4ec;
        box-sizing: border-box;
      }
      .voice-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
      }
      .voice-meta {
        display: flex;
        flex-direction: column;
      }
      .voice-name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
      .voice-age {
        font-size: 13px;
        color: #888;
        margin-top: 2px;
      }
      .voice-text {
        font-size: 15px;
        color: #444;
        line-height: 1.6;
        margin: 0 0 60px 0;
        position: relative;
        padding: 0 0 0 14px;
      }
      .voice-text::before {
        content: "“";
        font-size: 40px;
        color: #ffebee;
        position: absolute;
        top: -20px;
        left: -10px;
        z-index: 0;
      }
      .highlight-text {
        background: linear-gradient(transparent 60%, #fff9c4 60%);
        font-weight: bold;
        color: #222;
      }
      .voice-avatar-img {
        width: 50px;
        height: 50px;
        margin-right: 15px;
      }
      .voice-avatar-img img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 縦横比を保ったまま正方形にトリミング */
        border-radius: 50%; /* 丸型にする */
        border: 2px solid #ff8a80; /* ちゅるり風のピンク枠 */
      }
      .voice-badge-container {
        position: absolute;
        bottom: 10px;
        left: 20px;
        display: flex;
        flex-wrap: wrap; /* スマホなどで溢れたら折り返す */
        gap: 6px;       /* バッジ同士のすき間（近接の原則） */
      }
      .voice-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: bold;
        color: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        white-space: nowrap;
      }
      .bg-unexperienced { background-color: #ff8a80; } /* 優しい赤（ちゅるり基調） */
      .bg-w_work        { background-color: #f0a500; } /* ゴールド */
      .bg-short_time    { background-color: #4db6ac; } /* ミントグリーン */
      .bg-once_a_week   { background-color: #64b5f6; } /* さわやかブルー */
      .bg-married       { background-color: #ba68c8; } /* 上品なパープル */
      .bg-default       { background-color: #90a4ae; } /* 選択なし時のグレー */


      /* 募集要項（スマホ：縦並びのカード風） */
      .recruitinfo_wrap {
          width: 100%;
          max-width: 900px;
          margin: 30px auto;
          padding: 30px 15px;
          font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
          color: #333;
          box-sizing: border-box;
          background-color: #f8f7f3;
      }
      .recruitinfo {
          margin-bottom: 40px;
      }
      .recruitinfo h2 {
          position: relative;
          font-size: 20px;
          text-align: center;
          margin-bottom: 25px;
          color: #d4a373; /* 上品なゴールド・ブラウン系 */
          font-weight: bold;
      }
      .recruitinfo h2::after {
          content: '';
          position: absolute;
          bottom: -6px;
          left: 50%;
          transform: translateX(-50%);
          width: 40px;
          height: 2px;
          background-color: #d4a373;
      }
      .recruitinfo table {
          display: block;
          width: 100%;
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
          border: 4px solid #f0e6df;
          overflow: hidden;
      }
      .recruitinfo table tbody,
      .recruitinfo table tr {
          display: block;
          width: 100%;
      }
      .recruitinfo table tr {
          border-bottom: 4px solid #f0e6df;
      }
      .recruitinfo table tr:last-child {
          border-bottom: none;
      }
      .recruitinfo table th {
          display: block;
          width: 100%;
          padding: 12px 15px 4px 15px;
          background-color: #fdf8f5;
          color: #d4a373;
          font-weight: bold;
          text-align: left;
          font-size: 14px;
          box-sizing: border-box;
      }
      .recruitinfo table td {
          display: block;
          width: 100%;
          padding: 4px 15px 14px 15px;
          line-height: 1.6;
          font-size: 14px;
          box-sizing: border-box;
      }
      .recruitinfo td .recruit_b {
          display: inline-block;
          font-weight: bold;
          color: #c94a29; /* アクセントの赤・オレンジ系 */
          font-size: 16px;
          margin-bottom: 2px;
      }
      .recruit_env {
          display: block; /* スマホでは縦並び */
      }
      .recruit_env h3 {
          margin: 15px 0 0 0;
          font-size: 15px;
          color: #4a5568;
          background: #f7fafc;
          padding: 10px 12px;
          border-left: 4px solid #d4a373;
          border-radius: 0 6px 6px 0;
          font-weight: bold;
      }
      .recruit_env ul {
          margin: 0 0 15px 0;
          padding: 10px 5px;
          list-style: none;
          display: grid;
          grid-template-columns: repeat(2, 1fr); /* スマホでも2列でコンパクトに */
          gap: 8px;
      }
      .recruit_env ul li {
          font-size: 13px;
          position: relative;
          padding-left: 12px;
          color: #4a5568;
      }
      .recruit_env ul li::before {
          content: "•";
          color: #d4a373;
          font-weight: bold;
          position: absolute;
          left: 0;
          top: 0;
      }
      .recruit_flow_section {
          width: 100%;
          margin: 50px 0;
          padding: 0 0 10px 0; /* 下部に少し余白をあけてスクロールバーと被らないように */
          font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
          overflow: hidden; /* 画面外のハみ出しをカット */
      }

      /* 応募の流れ */
      .recruit_flow_section h2 {
          position: relative;
          font-size: 20px;
          text-align: center;
          margin-bottom: 30px;
          padding: 0 15px;
          color: #fff; /* 上品なゴールド・ブラウン系 */
          font-weight: bold;
            text-shadow: 
          1px 1px 3px #a47353;
      }
      .recruit_flow_section h2::after {
          content: '';
          position: absolute;
          bottom: -6px;
          left: 50%;
          transform: translateX(-50%);
          width: 40px;
          height: 2px;
          background-color: #fff;
          box-shadow: 1px 1px 3px #a47353;
      }
      .flow_container {
          display: flex;
          gap: 15px;
          overflow-x: auto; /* 横スクロールを有効化 */
          overflow-y: hidden;
          padding: 20px 15px; /* 左右にページと同じ余白を作る */
        
          -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
          background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), url(images/webp/roombk.webp);
          background-size: cover;
          background-position: center;
      }
      .flow_container::-webkit-scrollbar {
          height: 5px;
      }
      .flow_container::-webkit-scrollbar-thumb {
          background: #e2d2c2;
          border-radius: 10px;
      }
      .flow_card {
          /* 画面幅400pxの時に、2.5枚分（3枚目の半分）が見える絶妙なサイズ計算 */
          flex: 0 0 145px; 
          background: #ffffff;
          border-radius: 8px;
          padding: 20px 12px;
          box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
          border: 1px solid #f0e6df;
          text-align: center;
          box-sizing: border-box;
          scroll-snap-align: start; /* スナップ位置をカードの左端に */
          position: relative;
      }
      .flow_num {
          font-size: 24px;
          font-weight: bold;
          color: #e2d2c2; /* 薄めのゴールド・ブラウン */
          line-height: 1;
          margin-bottom: 8px;
          font-style: italic;
      }
      .flow_card h3 {
          font-size: 14px;
          color: #d4a373;
          margin: 0 0 10px 0;
          font-weight: bold;
      }
      .flow_card p {
          font-size: 12px;
          color: #555;
          line-height: 1.5;
          margin: 0;
          text-align: left; /* 説明文は左寄せが読みやすい */
      }


      /* 質問 */
     div#wrap.recruit_wrap  .qa-section{
        width: 100%;
        padding: 20px 16px;
      }
    div#wrap.recruit_wrap .qa-item {
        border: 4px solid #e5dfd5;
      }

      /* サイドバー */
      .recruit_sidebar {
          width: 100%;
          box-sizing: border-box;
          align-self: flex-start;
          display: none;
        
      }

/* ==========================================
        求人ページ (page-recruit_treatment.php)
========================================== */
      .page-id-1515 .merit-section{
        background-color:transparent;
      }
      .salary_calc_wrap {
          width: 100%;
          max-width: 600px;
          margin: 20px auto;
          padding: 30px 20px;
          background: #ffffff;
          border-radius: 12px;
          box-shadow: 0 4px 20px rgba(180, 160, 140, 0.1);
          border: 1px solid #f0e6df;
          box-sizing: border-box;
      }
      .salary_calc_wrap h3 {
          font-size: 18px;
          color: #4a5568;
          text-align: center;
          font-weight: bold;
          margin: 0 0 10px 0;
      }
      .calc_lead {
          font-size: 14px;
          color: #888;
          text-align: left;
          margin-bottom: 25px;
      }
      .calc_group {
          margin-bottom: 18px;
      }
      .calc_group label {
          display: block;
          font-size: 13px;
          font-weight: bold;
          color: #d4a373;
          margin-bottom: 6px;
      }
      .calc_group select {
          width: 100%;
          padding: 12px;
          font-size: 14px;
          color: #4a5568;
          border: 4px solid #e2d2c2;
          border-radius: 6px;
          background-color: #fdf8f5;
          box-sizing: border-box;
          cursor: pointer;
          outline: none;
      }
      .calc_result {
          margin-top: 30px;
          display: flex;
          flex-direction: column;
          gap: 12px;
      }
      .result_box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #fdf8f5;
          padding: 15px 20px;
          border-radius: 8px;
      }
      .result_box.emphasis {
          background: linear-gradient(135deg, #fff5f2 0%, #faeae4 100%);
          border: 4px solid #f0e6df;
      }
      .result_label {
          font-size: 13px;
          font-weight: bold;
          color: #555;
      }
      .result_price {
          font-size: 18px;
          font-weight: bold;
          color: #4a5568;
      }
      .result_box.emphasis .result_price {
          font-size: 24px;
          color: #c94a29; /* ちゅるりのアクセントカラー */
      }
      .calc_note {
          font-size: 11px;
          color: #999;
          text-align: center;
          margin: 15px 0 0 0;
          line-height: 1.4;
      }
      .lifestyle_section {
          width: 100%;
          margin: 50px 0;
          font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

          background-image: linear-gradient(90deg, #fdf8f5 50%, #faf5ef 50%);
          background-size: 8px 100%; /* ストライプの細さ */
          padding: 40px 10px; /* 上下に余白をつけて模様を綺麗に見せる */
      }
      .lifestyle_section h2 {
          position: relative;
          font-size: 20px;
          text-align: center;
          margin-bottom: 8px;
          color: #4a5568;
          font-weight: bold;
      }
      .lifestyle_lead {
          font-size: 12px;
          color: #888;
          text-align: center;
          margin-bottom: 25px;
          padding: 0 15px;
      }
      .lifestyle_container {
          display: flex;
          gap: 15px;
          overflow-x: auto;
          overflow-y: hidden;
          padding: 10px 15px 25px 15px; /* 下部余白はスクロールバー対策 */
          -webkit-overflow-scrolling: touch;
      }
      .lifestyle_container::-webkit-scrollbar {
          height: 5px;
      }
      .lifestyle_container::-webkit-scrollbar-thumb {
          background: #e2d2c2;
          border-radius: 10px;
      }
      .lifestyle_card {
          flex: 0 0 240px; 
          background: #ffffff;
          border-radius: 12px;
          padding: 24px 18px;
          box-shadow: 0 4px 15px rgba(180, 160, 140, 0.08);
          border: 4px solid #f0e6df;
          box-sizing: border-box;
          scroll-snap-align: start;
          position: relative;
          display: flex;
          flex-direction: column;
      }
      .lifestyle_card .badge {
          position: absolute;
          top: -12px;
          left: 18px;
          font-size: 11px;
          font-weight: bold;
          padding: 3px 12px;
          border-radius: 20px;
          color: #ffffff;
      }
      .pattern_pink .badge { background: #e5989b; }
      .pattern_pink { border-top: 4px solid #e5989b; }
      .pattern_gold .badge { background: #b58250; }
      .pattern_gold { border-top: 4px solid #b58250; }
      .pattern_orange .badge { background: #c94a29; }
      .pattern_orange { border-top: 4px solid #c94a29; }
      .lifestyle_card h3 {
          font-size: 15px;
          font-weight: bold;
          color: #4a5568;
          margin: 5px 0 2px 0;
      }
      .schedule_tag {
          font-size: 12px;
          color: #b58250;
          font-weight: bold;
          margin-bottom: 15px;
      }
      .income_box {
          background: #fdf8f5;
          padding: 12px;
          border-radius: 8px;
          text-align: center;
          margin-bottom: 15px;
      }
      .box_title {
          display: block;
          font-size: 11px;
          color: #888;
          margin-bottom: 2px;
      }
      .box_price {
          font-size: 22px;
          font-weight: bold;
          color: #c94a29;
      }
      .box_price span {
          font-size: 14px;
          margin-left: 2px;
      }
      .lifestyle_details {
          list-style: none;
          padding: 0;
          margin: 0;
      }
      .lifestyle_details li {
          font-size: 12px;
          color: #666;
          line-height: 1.5;
          position: relative;
          padding-left: 14px;
          margin-bottom: 8px;
      }
      .lifestyle_details li::before {
          content: "♥"; /* 可愛いアクセントドット */
          position: absolute;
          left: 0;
          top: 0;
          color: #e5989b;
          font-size: 10px;
      }
      /* 求人ページ用：お給料の基本システム */
      .salary_system_section {
          width: 100%;
          margin: 50px auto;
          padding: 0 15px;
          font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
          box-sizing: border-box;
      }
      .salary_system_section h2 {
          position: relative;
          font-size: 20px;
          text-align: center;
          margin-bottom: 8px;
          color: #4a5568;
          font-weight: bold;
      }
      .system_lead {
          font-size: 12px;
          color: #888;
          text-align: left;
          margin-bottom: 30px;
          line-height: 1.5;
      }
      .system_stats_grid {
          display: flex;
          flex-direction: column;
          gap: 15px;
          margin-bottom: 30px;
      }
      .stat_card {
          background: #ffffff;
          border-radius: 10px;
          padding: 20px;
          border: 1px solid #f0e6df;
          box-shadow: 0 3px 10px rgba(180, 160, 140, 0.05);
      }
      .stat_label {
          display: block;
          font-size: 13px;
          font-weight: bold;
          color: #b58250;
          margin-bottom: 8px;
          text-align: center;
      }
      .stat_num_wrap {
          display: flex;
          align-items: baseline;
          margin-bottom: 8px;
          justify-content: center;
      }
      .stat_num {
          font-size: 32px;
          font-weight: bold;
          color: #4a5568;
          line-height: 1;
      }
      .stat_num.accent {
          color: #c94a29; /* 50%〜72%を目立たせる */
      }
      .stat_unit {
          font-size: 14px;
          font-weight: bold;
          color: #4a5568;
          margin: 0 4px;
      }
      .stat_wave {
          font-size: 20px;
          color: #e2d2c2;
          margin: 0 8px;
      }
      .stat_desc {
          font-size: 12px;
          color: #666;
          margin: 0;
          line-height: 1.5;
      }

      /* 2. 集客力の裏付けボックス */
      .system_reason_box {
          background: #fdf8f5;
          border-radius: 12px;
          padding: 25px 20px;
          margin-bottom: 35px;
          border: 1px dashed #e2d2c2;
      }
      .system_reason_box h3 {
          font-size: 15px;
          font-weight: bold;
          color: #4a5568;
          text-align: center;
          margin: 0 0 20px 0;
      }
      .system_reason_box ul {
          list-style: none;
          padding: 0;
          margin: 0;
      }
      .system_reason_box ul li {
          margin-bottom: 15px;
          padding-left: 20px;
          position: relative;
      }
      .system_reason_box ul li:last-child {
          margin-bottom: 0;
      }
      .system_reason_box ul li::before {
          content: "✔";
          position: absolute;
          left: 0;
          top: 2px;
          color: #c94a29;
          font-weight: bold;
          font-size: 14px;
      }
      .system_reason_box ul li strong {
          display: block;
          font-size: 14px;
          color: #4a5568;
          margin-bottom: 4px;
      }
      .system_reason_box ul li p {
          font-size: 12px;
          color: #666;
          margin: 0;
          line-height: 1.5;
      }
      /* 3. お祝い金ボーナスカード */
      .system_bonus_card {
          background: linear-gradient(135deg, #fff5f2 0%, #faeae4 100%);
          border: 2px solid #e5989b;
          border-radius: 12px;
          padding: 25px 20px;
          text-align: center;
          box-shadow: 0 4px 15px rgba(229, 152, 155, 0.15);
      }
      .bonus_sub {
          display: inline-block;
          background: #e5989b;
          color: #ffffff;
          font-size: 11px;
          font-weight: bold;
          padding: 2px 10px;
          border-radius: 20px;
          margin-bottom: 5px;
      }
      .system_bonus_card h3 {
          font-size: 18px;
          font-weight: bold;
          color: #c94a29;
          margin: 0 0 20px 0;
      }
      .bonus_content {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          margin-bottom: 15px;
      }
      .bonus_item {
          background: #ffffff;
          border-radius: 8px;
          padding: 12px 10px;
          flex: 1;
          max-width: 140px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.03);
      }
      .bonus_badge {
          font-size: 10px;
          background: #fdf8f5;
          color: #b58250;
          border: 1px solid #e2d2c2;
          border-radius: 4px;
          padding: 1px 4px;
          display: inline-block;
          margin-bottom: 6px;
          font-weight: bold;
      }
      .bonus_item p {
          font-size: 11px;
          color: #666;
          margin: 0 0 4px 0;
      }
      .bonus_item h4 {
          font-size: 18px;
          font-weight: bold;
          color: #c94a29;
          margin: 0;
      }
      .bonus_item h4 span {
          font-size: 12px;
          margin-left: 2px;
      }
      .bonus_plus {
          font-size: 20px;
          font-weight: bold;
          color: #e5989b;
      }
      .bonus_total {
          border-top: 1px dashed #e5989b;
          padding-top: 12px;
          margin-top: 15px;
      }
      .bonus_total p {
          font-size: 13px;
          color: #4a5568;
          margin: 0;
          font-weight: bold;
      }
      .bonus_total p span {
          font-size: 18px;
          color: #c94a29;
          border-bottom: 2px solid #e5989b;
      }
      /* 求人ページ用：安心クリーン＆誠実宣言*/
      .clean_statement_section {
          width: 100%;
          margin: 50px auto;
          padding: 0 15px;
          font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
          box-sizing: border-box;
      }
      .clean_statement_section h2 {
          position: relative;
          font-size: 20px;
          text-align: center;
          margin-bottom: 8px;
          color: #4a5568;
          font-weight: bold;
      }
      .clean_lead {
          font-size: 12px;
          color: #888;
          text-align: center;
          margin-bottom: 30px;
          line-height: 1.5;
      }
      .clean_grid {
          display: flex;
          flex-direction: column;
          gap: 20px;
      }
      .clean_card {
          background: #ffffff;
          border-radius: 12px;
          padding: 24px 20px;
          border: 1px solid #f0e6df;
          box-shadow: 0 4px 15px rgba(180, 160, 140, 0.04);
      }
      .clean_icon {
          font-size: 32px;
          margin-bottom: 12px;
          line-height: 1;
      }
      .clean_card h3 {
          font-size: 15px;
          font-weight: bold;
          color: #4a5568;
          margin: 0 0 12px 0;
          border-bottom: 1px solid #fdf8f5;
          padding-bottom: 8px;
      }
      .clean_card p {
          font-size: 13px;
          color: #555;
          line-height: 1.6;
          margin: 0 0 15px 0;
      }
      .clean_card p:last-child {
          margin-bottom: 0;
      }
      .clean_highlight {
          color: #c94a29;
          font-weight: bold;
          background: linear-gradient(transparent 60%, #fff5f2 60%);
      }
      .clean_plus_box,
      .clean_rule_box {
          border-radius: 8px;
          padding: 15px;
          margin-top: 15px;
          position: relative;
      }
      .clean_plus_box {
          background: #fdf8f5;
          border-left: 4px solid #b58250;
      }
      .plus_badge {
          display: inline-block;
          font-size: 10px;
          font-weight: bold;
          background: #b58250;
          color: #ffffff;
          padding: 2px 8px;
          border-radius: 4px;
          margin-bottom: 6px;
      }
      .clean_rule_box {
          background: #f7fafc;
          border-left: 4px solid #718096;
      }
      .rule_badge {
          display: inline-block;
          font-size: 10px;
          font-weight: bold;
          background: #718096;
          color: #ffffff;
          padding: 2px 8px;
          border-radius: 4px;
          margin-bottom: 6px;
      }
      .clean_plus_box p,
      .clean_rule_box p {
          font-size: 12px;
          color: #555;
          margin: 0;
          line-height: 1.5;
      }

/* ==========================================
        求人ページ (page-recruit_contact.php)
========================================== */
 .recruit_entry_wrap {
    width: 100%;
    max-width: 600px;
    margin: 30px auto;
    padding: 0 15px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    box-sizing: border-box;
}

.entry_intro h2 {
    font-size: 20px;
    font-weight: bold;
    color: #4a5568;
    text-align: center;
    margin-bottom: 8px;
}

.intro_lead {
    font-size: 12px;
    color: #888;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* 1. 直接繋がるボタンエリア */
.direct_connect_box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

/* LINE応募（スマホで一番タップしやすい特大サイズ） */
.entry_btn_line {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #06C755;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 16px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(6, 199, 85, 0.25);
    transition: background 0.2s;
}
.entry_btn_line small {
    font-size: 11px;
    font-weight: normal;
    margin-top: 4px;
    opacity: 0.9;
}

/* 電話応募 */
.entry_tel_zone {
    text-align: center;
    background: #fdf8f5;
    border: 1px solid #e2d2c2;
    border-radius: 8px;
    padding: 20px 15px;
}
.tel_sub {
    font-size: 11px;
    color: #b58250;
    font-weight: bold;
    margin: 0 0 10px 0;
}
.entry_btn_tel {
    display: block;
    max-width: 280px;
    margin: 0 auto;
    background: #c94a29;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 16px;
    padding: 14px 20px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(201, 74, 41, 0.2);
}
.tel_note {
    font-size: 11px;
    color: #888;
    margin: 10px 0 0 0;
}

/* 2. Webフォームエリア */
.web_form_box {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 20px;
    border: 1px solid #f0e6df;
    box-shadow: 0 4px 20px rgba(180, 160, 140, 0.06);
}
.web_form_box h3 {
    font-size: 16px;
    font-weight: bold;
    color: #4a5568;
    text-align: center;
    margin: 0 0 4px 0;
}
.form_sub {
    font-size: 11px;
    color: #999;
    text-align: center;
    margin-bottom: 25px;
}

/* 各フォーム項目 */
.form_item {
    margin-bottom: 20px;
}
.form_item label {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
    color: #4a5568;
    margin-bottom: 8px;
}

/* 必須・任意バッジ */
.badge_required, .badge_optional {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    color: #ffffff;
}
.badge_required { background: #c94a29; }
.badge_optional { background: #a0aec0; }

/* 入力コントロール（スマホのタップ・入力のしやすさ重視） */
.form_item input[type="text"],
.form_item input[type="tel"],
.form_item select,
.form_item textarea {
    width: 100%;
    padding: 14px;
    font-size: 15px; /* iOSでズームバグが起きない16px前後の快適サイズ */
    border: 1px solid #e2d2c2;
    background: #fdf8f5;
    border-radius: 6px;
    box-sizing: border-box;
    color: #4a5568;
    outline: none;
    -webkit-appearance: none; /* iOSのデフォルトスタイルをリセット */
    appearance: none;
}
.form_item textarea {
    height: 100px;
    resize: vertical;
}

/* ラジオボタン */
.radio_group {
    display: flex;
    gap: 20px;
    padding: 10px 5px;
}
.radio_label {
    font-size: 14px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 送信ボタン（一番重要なゴールボタン） */
.form_submit_btn {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #e5989b 0%, #b58250 100%); /* ちゅるりの上品カラー */
    color: #ffffff;
    border: none;
    font-size: 16px;
    font-weight: bold;
    padding: 16px 20px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(181, 130, 80, 0.2);
    transition: opacity 0.2s;
    margin-top: 30px;
}
.form_submit_btn:hover {
    opacity: 0.9;
}

/* 確認画面の入力値表示スタイル */
.page-id-1545 .top_main,.page-id-1548 .top_main {
    margin: 0 auto;
  }





.confirm_form .form_item {
    border-bottom: 1px solid #fdf8f5;
    padding-bottom: 12px;
}
.confirm_value {
    padding: 8px 10px;
    font-size: 15px;
    color: #4a5568;
    background: #fdf8f5;
    border-radius: 4px;
    min-height: 24px;
}

/* ボタンまわりの横並び（スマホ時は縦並び、PC時は横並び） */
.confirm_btn_group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}
.btn_form_back {
    display: block;
    width: 100%;
    background: #a0aec0;
    color: #ffffff !important;
    border: none;
    font-size: 15px;
    font-weight: bold;
    padding: 14px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    text-decoration: none !important;
}

/* ==========================================
   応募完了画面：SMS通知アナウンス
========================================== */
.sms_announce_box {
    width: 100%;
    max-width: 550px;
    margin: 40px auto;
    padding: 35px 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(180, 160, 140, 0.1);
    border: 1px solid #f0e6df;
    text-align: center;
    box-sizing: border-box;
}

/* スマホアイコンを優しく揺らすアニメーション */
.sms_icon_animation {
    font-size: 45px;
    margin-bottom: 15px;
    animation: pulseIcon 2s infinite ease-in-out;
}
@keyframes pulseIcon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.sms_announce_box h3 {
    font-size: 18px;
    font-weight: bold;
    color: #4a5568;
    margin: 0 0 15px 0;
}

.sms_main_msg {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
}

.sms_highlight {
    color: #c94a29;
    font-size: 16px;
    background: linear-gradient(transparent 60%, #fff5f2 60%);
    padding: 0 2px;
}

/* 注意事項のグレーのカード */
.sms_attention_card {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 15px;
    text-align: left;
}

.sms_attention_card h4 {
    font-size: 13px;
    font-weight: bold;
    color: #c94a29;
    margin: 0 0 12px 0;
    text-align: center;
}

.sms_attention_card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sms_attention_card ul li {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
}

.sms_attention_card ul li:last-child {
    margin-bottom: 0;
}

/* リストのドットを可愛い丸に */
.sms_attention_card ul li::before {
    content: "•";
    position: absolute;
    left: 2px;
    top: -1px;
    color: #b58250;
    font-size: 16px;
}

/* ==========================================
        求人ページよくある質問 (page-recruit_qa.php)
========================================== */

.page-id-1623 .merit-section .merit-title{
    margin: 0;
}


/* フローティング（ヘッダー固定）検索バーのスタイル */
.faq-search-container {
    background: rgba(255, 255, 255, 0.95);
    padding:30px 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px); /* 背景を少しオシャレにぼかす */
    margin-bottom: 30px;
    text-align: center;
}
.faq-search-container span{
   margin: 10px auto;
    display: block;
    font-size: 0.9rem;
}
/* 検索窓と×ボタンを重ねるための基準になる親要素 */
.faq-search-box-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* 検索窓（右側に×ボタンが来るので、右側のpaddingを広めにあけます） */
#faq-search-input {
    width: 100%;
    padding: 12px 45px 12px 20px; /* 右側のpaddingを45pxに */
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

#faq-search-input:focus {
    border-color: #ff99cc;
    box-shadow: 0 0 8px rgba(255, 153, 204, 0.3);
}

/* ×ボタンのスタイル */
#faq-search-clear {
    position: absolute;
    top: 50%;
    right: 15px; /* 右端からの位置 */
    transform: translateY(-50%); /* 垂直中央揃え */
    background: #ccc; /* 丸い背景の色（ちゅるり様のテーマ色に合わせて薄いピンク等にしても可愛いです） */
    color: #fff;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease;
}

#faq-search-clear:hover {
    background: #999; /* ホバー時に少し暗く */
}
#faq-search-input {
    width: 100%;
    max-width: 600px;
    display: block;
    margin: 0 auto;
    padding: 12px 20px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    outline: none;
    transition: all 0.3s ease;
}

#faq-search-input:focus {
    border-color: #ff99cc; /* ちゅるり様のテーマカラーに合わせて調整してください */
    box-shadow: 0 0 8px rgba(255, 153, 204, 0.3);
}

/* Q&Aリストの装飾（アコーディオンにしない場合のフラットなデザイン） */
.faq-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.faq-question {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

.faq-answer {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    border-top: 1px dashed #eee;
    padding-top: 10px;
}

/* QとAの丸いバッジ */
.q-badge, .a-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 13px;
    margin-right: 10px;
    flex-shrink: 0;
}
.q-badge { background: #ff99cc; color: #fff; }
.a-badge { background: #f0f0f0; color: #666; }

/* 検索でヒットしなかった項目を消すためのクラス */
.faq-hidden {
    display: none !important;
}

/* ==========================================
   求人フロー
   ========================================== */

/* 応募〜面接セクション全体 */


.step-container {
    width: 100%;
    margin: 0 auto;
    padding: 20px 16px;
}

.step-section-title {
    text-align: center;
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 10px;
}

/* タイトルの下線（アクセント） */
.step-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: #e1b382; /* 上品なゴールド・ベージュ系 */
}

.step-section-lead {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* タイムラインの構造 */
.step-timeline {
    position: relative;
    padding-left: 30px; /* スマホ用に左余白を狭く */
}

/* 縦の繋ぎ線 */
.step-timeline::before {
    content: '';
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 11px; /* 数字の丸の中心に合わせる */
    width: 2px;
    background: #f0d5be;
}

/* 各ステップのアイテム */
.step-item {
    position: relative;
    margin-bottom: 30px;
}

.step-item:last-child {
    margin-bottom: 0;
}

/* ステップ数字の丸（スマホ基準で小さめ） */
.step-number {
    position: absolute;
    left: -30px;
    top: 0;
    width: 24px;
    height: 24px;
    background: #e1b382;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    z-index: 2;
}

/* コンテンツ部分 */
.step-content {
    background: #fafafa;
    padding: 15px; /* スマホ用にコンパクトに */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.step-title {
    font-size: 1.05rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
}

.step-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.step-text:last-child {
    margin-bottom: 0;
}

/* 補足情報のボックス（面接で確認すること） */
.step-info-box {
    background: #fff;
    border: 1px solid #f0d5be;
    border-left: 4px solid #e1b382;
    padding: 12px;
    border-radius: 4px;
    margin-top: 12px;
}

.step-info-box h5 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: #333;
}

.step-info-box ul {
    margin: 0;
    padding-left: 18px;
}

.step-info-box li {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 4px;
    list-style-type: square;
}
/* マーカー（蛍光ペン風）のスタイル */
.marker-highlight {
    background: linear-gradient(transparent 60%, #fff275 60%); /* 好みで#ffcfdfなどのピンク系に変えてもOKです */
    padding: 0 2px;
}

/* 太字用 */
.font-bold {
    font-weight: bold;
}

/* 見落とし防止用の注意書きボックス */
.step-alert-box {
    background: #fff9e6; /* 淡い警告イエロー */
    border: 1px dashed #ffe0b2;
    padding: 10px 12px;
    border-radius: 6px;
    margin-top: 10px;
}

.step-alert-text {
    margin: 0;
    font-size: 0.8rem;
    color: #d87a00; /* 濃いめのオレンジ・ブラウンで文字を読みやすく */
    line-height: 1.5;
}
/* アクションボタン・リンクエリア */
.step-action-area {
    margin-top: 12px;
}

/* スマホではボタンを全幅（100%）にして押しやすく */
.step-link-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #ff6b81; /* 応募を促すピンク */
    color: #fff !important;
    padding: 12px 15px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(255, 107, 129, 0.3);
}

.step-link-btn .emoji {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.step-sub-link {
    display: inline-block;
    color: #e1b382;
    text-decoration: underline;
    font-size: 0.85rem;
    font-weight: bold;
}

.step-sub-link .emoji {
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-right: 3px;
}
.page-id-1627 .qa-section{
    width: 100%;
}

/* 研修の基本概要ボックス */
.training-overview-box {
    background: #fff5f5; /* 淡いピンク・赤系の清潔感ある背景 */
    border: 1px solid #ffccd5;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.overview-item {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #444;
}

.overview-item:last-child {
    margin-bottom: 0;
}

.overview-label {
    display: block;
    font-weight: bold;
    color: #cc4155; /* ラベルの文字色 */
    margin-bottom: 2px;
}

.overview-value {
    display: block;
    padding-left: 5px;
}

/* 安心保証セクションの個別ポイント */
.training-highlight-content {
    border: 2px solid #f0d5be !important;
    background: #fffdfb !important;
}

.assurance-point {
    margin-bottom: 20px;
}

.assurance-point:last-child {
    margin-bottom: 0;
}

.assurance-point h5 {
    margin: 0 0 6px 0;
    font-size: 0.95rem;
    color: #333;
    font-weight: bold;
}

.assurance-point p {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
}

.text-muted {
    color: #888;
}

.step-sub-text {
    font-size: 0.8rem;
    margin-top: 10px;
}
/* 最終応募エリア（入店ページの最下部） */
.final-cta-area {
    background: #fafafa;
    border: 1px solid #f0d5be;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}



}
@media screen and (min-width: 768px) {
  
  .merit-container{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  
  
  .merit-card {
    width: 100%;
    flex-basis: 320px;
  }

.cycle-inner {
    display: flex;
    flex-wrap: wrap;
  }

 .cycle-title {
    flex-basis: 100%;
  }

 .cycle-grid-container {
    flex-basis: 340px;
  }

  .cycle-trivia-box {
    flex-basis: 330px;
    height: 160px;
    margin: 0 0 0 10px;
  }

  .flow_container {
    justify-content: space-evenly;
  }
/* ==========================================
   求人ページ専用サイドバー（PC 1024px以上を想定）
========================================== */

div#wrap.recruit_wrap .side_bar{
  position: relative;
  padding: 16px 0;
}
.recruit_sidebar {
    width: 100%;
    box-sizing: border-box;
    align-self: flex-start;
    display: none;
  
}

/* スクロール時にピタッと追従させる魔法の記述 */
.sidebar_sticky_wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 20px; /* 画面の一番上から20pxの位置でピタッと止まります */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 共通ウィジェットスタイル */
.sidebar_widget {
    background: #ffffff;
    border-radius: 8px;
    padding: 24px 20px;
    box-shadow: 0 4px 15px rgba(180, 160, 140, 0.08);
    border: 1px solid #f0e6df;
}

.sidebar_widget h3 {
    font-size: 15px;
    font-weight: bold;
    color: #4a5568;
    text-align: center;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #fdf8f5;
}

/* ------------------------------------------
   1. クイック応募バナー（CTA）
------------------------------------------ */
.widget_cta {
    border-top: 4px solid #a4c2a5; /* 上部にアクセントライン */
}

.cta_sub {
    font-size: 12px;
    color: #d4a373;
    text-align: center;
    margin: -10px 0 15px 0;
    font-weight: bold;
}

/* LINEボタン（ちゅるりの世界観を崩さない上品な緑） */
.btn_sidebar_line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #06C755;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    padding: 12px 10px;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 10px;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 3px 6px rgba(6, 199, 85, 0.2);
}

.btn_sidebar_line:hover {
    background: #05b34c;
    transform: translateY(-1px);
}

/* アイコン（疑似要素で丸いドットなどを置くことも可能、今回は文字のみでも綺麗です） */
.btn_sidebar_line::before {
    content: "💬";
    font-size: 14px;
}

/* 電話ボタン */
.btn_sidebar_tel {
    display: block;
    background: #c94a29; /* お給料等と同じアクセント赤・オレンジ */
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    padding: 12px 10px;
    border-radius: 6px;
    text-align: center;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 3px 6px rgba(201, 74, 41, 0.2);
}

.btn_sidebar_tel:hover {
    background: #b23e20;
    transform: translateY(-1px);
}

.cta_note {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin: 10px 0 0 0;
}

/* ------------------------------------------
   2. 求人ページ内ナビゲーション（目次）
------------------------------------------ */
.widget_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget_nav ul li {
    border-bottom: 1px solid #fdf8f5;
}

.widget_nav ul li:last-child {
    border-bottom: none;
}

.widget_nav ul li a {
    display: block;
    padding: 10px 5px;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 13px;
    transition: color 0.2s, padding-left 0.2s;
    position: relative;
}

.widget_nav ul li a::before {
    content: "›";
    color: #d4a373;
    font-weight: bold;
    margin-right: 6px;
}

/* ホバー時に優しく右に動いて色が変わる演出 */
.widget_nav ul li a:hover {
    color: #d4a373 !important;
    padding-left: 10px;
}

/* recruit_treatment.php */
.system_stats_grid{
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
  .stat_card{
    flex-basis: 320px;
  }

}
@media screen and (min-width: 1024px) {

    html, body,body.page-id-341,.div#wrap.recruit_wrap,body.page-id-1515,body.page-id-490,body.page-id-1623,body.page-id-1627{  
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
/* 1. 外枠（滑り台のレール）をメインコンテンツと同じ高さまで確実に伸ばす */
  .side_bar {
    display: block !important;
    align-self: stretch !important;
    height: auto !important;
  }

  /* 2. 【Firefox対策】この要素自体を画面にピン留め（追従）させる */
  .recruit_sidebar {
    display: block !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important; /* 画面上部から20pxでピタッと止まる */
    height: auto !important; /* 高さを中身（586pxなど）に合わせる */
    align-self: flex-start !important; /* 下に動くための隙間を作る */
  }

  /* 3. 中身の箱（デザインのバッティングを防ぐためflexを解除） */
  .sidebar_sticky_wrap {
    position: static !important; /* スティッキーを解除し、上の親要素に任せる */
    display: block !important; /* 縦並びにする */
  }
  
  /* 中のウィジェットの間に隙間をあける（以前のgapの代わり） */
  .sidebar_sticky_wrap .sidebar_widget:not(:last-child) {
    margin-bottom: 20px;
  }

 
}