@charset "utf-8";

:root{
  --job-ink:#211b17;
  --job-brown:#5d493a;
  --job-muted:#756b64;
  --job-gold:#b89562;
  --job-gold-deep:#8e6d3f;
  --job-gold-soft:#f4eee4;
  --job-cream:#faf7f2;
  --job-white:#ffffff;
  --job-line:#e7ddd0;
  --job-dark:#201c19;
  --job-shadow:0 18px 50px rgba(74,54,39,.09);
}

.job_page{background:var(--job-white);color:var(--job-ink);padding:0 0 6rem}
.job_container{width:min(92%,1080px);margin:0 auto}
.job_section_block{padding:7rem 0}

/* intro */
.job_intro{padding:7rem 0 6rem;text-align:center}
.job_kicker{color:var(--job-gold-deep);font-size:1.15rem;letter-spacing:.22em;line-height:1.4}
.job_intro_title{margin-top:1.2rem;color:var(--job-ink);font-size:clamp(2.4rem,4vw,3.6rem);letter-spacing:.08em;line-height:1.45}
.job_intro_text{max-width:680px;margin:2rem auto 0;color:var(--job-muted);font-size:1.45rem;letter-spacing:.06em;line-height:2}
.job_summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:4rem auto 0}
.job_summary_item{min-width:0;border:1px solid var(--job-line);border-radius:1.2rem;background:var(--job-white);padding:2rem 1rem;box-shadow:0 12px 32px rgba(74,54,39,.06)}
.job_summary_icon{display:flex;align-items:center;justify-content:center;width:3.8rem;height:3.8rem;margin:0 auto 1.2rem;border-radius:50%;background:var(--job-gold-soft);color:var(--job-gold-deep);font-size:1.8rem;font-weight:700}
.job_summary_label{display:block;color:var(--job-muted);font-size:1.1rem;letter-spacing:.08em}
.job_summary_value{display:block;margin-top:.45rem;color:var(--job-ink);font-size:1.45rem;letter-spacing:.04em;line-height:1.45}

/* section heading */
.job_section_heading{display:flex;align-items:center;gap:1.7rem;margin-bottom:4rem}
.job_section_number{display:flex;align-items:center;justify-content:center;width:5.4rem;height:5.4rem;flex:0 0 5.4rem;border:1px solid var(--job-gold);border-radius:50%;color:var(--job-gold-deep);font-size:1.25rem;letter-spacing:.08em}
.job_section_heading_text{min-width:0}
.job_section_en{color:var(--job-gold-deep);font-size:1rem;letter-spacing:.18em;line-height:1.3}
.job_section_title{margin-top:.45rem;color:var(--job-ink);font-size:clamp(2.2rem,3.6vw,3.2rem);letter-spacing:.08em;line-height:1.4}

/* payment */
.job_pay{background:var(--job-cream)}
.job_pay_lead{display:flex;flex-direction:column;gap:2rem;margin-bottom:2rem}
.job_pay_badge{display:inline-flex;padding:.65rem 1.1rem;border-radius:999px;background:var(--job-dark);color:var(--job-white);font-size:1.05rem;font-weight:700;letter-spacing:.08em}
.job_pay_title{margin-top:1.2rem;color:var(--job-ink);font-size:2.1rem;letter-spacing:.06em}
.job_pay_text{max-width:680px;margin-top:.8rem;color:var(--job-muted);font-size:1.3rem;line-height:1.8}
.job_scroll_hint{margin:0 0 .8rem;color:var(--job-muted);font-size:1.1rem;text-align:right}
.job_scroll_icon{display:inline-block;margin-right:.4rem;color:var(--job-gold-deep)}
.job_pay_table_wrap{overflow-x:auto;border:1px solid var(--job-line);border-radius:1.2rem;background:var(--job-white);box-shadow:var(--job-shadow);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.job_pay_table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.job_pay_table th,.job_pay_table td{padding:1.35rem 1.55rem;border-bottom:1px solid var(--job-line);background:var(--job-white);color:var(--job-brown);font-size:1.18rem;text-align:right;white-space:nowrap}
.job_pay_table thead th{background:var(--job-dark);color:rgba(255,255,255,.8);font-size:1.08rem;font-weight:600;letter-spacing:.08em}
.job_pay_table thead th:first-child{border-radius:1.1rem 0 0 0}
.job_pay_table thead th:last-child{border-radius:0 1.1rem 0 0}
.job_pay_table tbody tr:last-child th,.job_pay_table tbody tr:last-child td{border-bottom:0}
.job_pay_table .job_pay_sticky{position:sticky;left:0;z-index:1;color:var(--job-ink);font-weight:700;text-align:left;box-shadow:1px 0 0 var(--job-line)}
.job_pay_table thead .job_pay_sticky{z-index:2;background:var(--job-dark);color:var(--job-white)}
.job_pay_price{color:var(--job-muted)!important}
.job_pay_amount{color:var(--job-ink);font-size:1.25rem}

/* split chart */
.job_split_card{margin-top:2rem;border-radius:1.2rem;background:var(--job-dark);padding:2.4rem 1.6rem 2rem;box-shadow:var(--job-shadow)}
.job_split_head{display:flex;flex-direction:column;gap:1.7rem}
.job_split_kicker{color:var(--job-gold);font-size:1rem;letter-spacing:.12em}
.job_split_title{margin-top:.35rem;color:var(--job-white);font-size:1.9rem;letter-spacing:.06em}
.job_tier_buttons{display:flex;flex-wrap:wrap;gap:.6rem}
.job_tier_button{appearance:none;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;color:rgba(255,255,255,.72);padding:.7rem 1.2rem;font-family:inherit;font-size:1.1rem;line-height:1;cursor:pointer}
.job_tier_button[aria-pressed="true"]{border-color:var(--job-gold);background:var(--job-gold);color:var(--job-dark);font-weight:700}
.job_tier_button:focus-visible{outline:2px solid var(--job-white);outline-offset:2px}
.job_split_legend{display:flex;gap:1.5rem;margin-top:1.8rem;color:rgba(255,255,255,.64);font-size:1.05rem}
.job_legend_item{display:inline-flex;align-items:center;gap:.6rem}
.job_legend_swatch{display:inline-block;width:.9rem;height:.9rem;border-radius:2px}
.job_legend_therapist{background:var(--job-gold)}
.job_legend_shop{background:#635c56}
.job_split_bars{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.6rem}
.job_bar_row{display:grid;grid-template-columns:4.6rem minmax(0,1fr);align-items:center;gap:.8rem}
.job_bar_course{color:rgba(255,255,255,.68);font-size:1.05rem;font-variant-numeric:tabular-nums}
.job_bar_track{display:flex;height:2.9rem;overflow:hidden;border-radius:.4rem;background:#635c56}
.job_bar_therapist,.job_bar_shop{display:flex;align-items:center;justify-content:flex-end;min-width:0;padding:0 .7rem;font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.job_bar_therapist{background:linear-gradient(90deg,#9d7948,var(--job-gold));color:var(--job-white)}
.job_bar_shop{flex:1;color:rgba(255,255,255,.78)}

/* payment notes */
.job_bonus_grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem}
.job_bonus_card{border:1px solid var(--job-line);border-radius:1.2rem;background:var(--job-white);padding:2.2rem}
.job_bonus_eyebrow{color:var(--job-gold-deep);font-size:.95rem;font-weight:700;letter-spacing:.18em}
.job_bonus_title{margin-top:.5rem;color:var(--job-ink);font-size:1.65rem}
.job_bonus_list{display:grid;gap:.6rem;margin-top:1rem}
.job_bonus_list li{position:relative;padding-left:1.5rem;color:var(--job-brown);font-size:1.22rem;line-height:1.7}
.job_bonus_list li::before{content:"";position:absolute;top:.85em;left:0;width:.5rem;height:.5rem;border-radius:50%;background:var(--job-gold)}

/* work details */
.job_details{background:var(--job-white)}
.job_guarantee{overflow:hidden;border:1px solid var(--job-line);border-radius:1.4rem;background:var(--job-white);box-shadow:var(--job-shadow)}
.job_guarantee_label{background:var(--job-dark);padding:2rem 2.2rem}
.job_guarantee_en{display:block;color:var(--job-gold);font-size:.95rem;letter-spacing:.18em}
.job_guarantee_title{margin-top:.4rem;color:var(--job-white);font-size:1.8rem;letter-spacing:.08em}
.job_guarantee_body{padding:2.4rem 2.2rem}
.job_guarantee_amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.job_guarantee_amount{border-radius:.8rem;background:var(--job-cream);padding:1.5rem;text-align:center}
.job_guarantee_caption{display:block;min-height:3.3em;color:var(--job-muted);font-size:1.05rem;line-height:1.5}
.job_guarantee_value{display:block;margin-top:.4rem;color:var(--job-gold-deep);font-size:2rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.job_guarantee_condition{margin-top:1.8rem;color:var(--job-brown);font-size:1.22rem;line-height:1.85}
.job_info_grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem}
.job_info_card{border:1px solid var(--job-line);border-radius:1.2rem;background:var(--job-white);padding:2.4rem 2.2rem}
.job_info_head{display:flex;align-items:center;gap:1.1rem;padding-bottom:1.5rem;border-bottom:1px solid var(--job-line)}
.job_info_number{color:var(--job-gold-deep);font-size:1rem;letter-spacing:.08em}
.job_info_title{color:var(--job-ink);font-size:1.65rem;letter-spacing:.05em}
.job_info_list{display:grid;gap:.8rem;margin-top:1.7rem}
.job_info_list li{position:relative;padding-left:1.7rem;color:var(--job-brown);font-size:1.2rem;line-height:1.75}
.job_info_list li::before{content:"✓";position:absolute;left:0;color:var(--job-gold-deep);font-weight:700}
.job_info_note{margin-top:1.6rem;border-radius:.7rem;background:var(--job-cream);padding:1.2rem 1.3rem;color:var(--job-muted);font-size:1.08rem;line-height:1.75}

/* mypage */
.job_mypage{background:var(--job-cream)}
.job_mypage_lead{max-width:680px;margin:-2.5rem 0 3rem;color:var(--job-muted);font-size:1.25rem;line-height:1.9}
.job_mypage_grid{display:grid;grid-template-columns:1fr;align-items:start;gap:1.4rem}
.job_mypage_item{overflow:hidden;min-width:0;border:1px solid var(--job-line);border-radius:1.2rem;background:var(--job-white);box-shadow:0 14px 38px rgba(74,54,39,.07)}
.job_mypage_image_wrap{display:flex;align-items:center;justify-content:center;overflow:hidden;height:clamp(54rem,52vw,68rem);padding:2.8rem 2rem;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.98) 0,rgba(255,255,255,.72) 31%,rgba(222,201,178,.26) 64%,rgba(187,153,120,.18) 100%);border-bottom:1px solid var(--job-line)}
.job_mypage_phone{position:relative;overflow:hidden;width:auto;max-width:90%;height:100%;aspect-ratio:59/100;border:.7rem solid #201d1b;border-radius:3.4rem;background:var(--job-white);box-shadow:0 2.6rem 4.8rem rgba(48,34,24,.2),0 .5rem 1.2rem rgba(48,34,24,.12),inset 0 0 0 1px rgba(255,255,255,.2)}
.job_mypage_phone::before{position:absolute;z-index:2;top:.8rem;left:50%;width:31%;height:1.8rem;border-radius:999px;background:#201d1b;content:"";transform:translateX(-50%);box-shadow:0 1px 1px rgba(255,255,255,.14)}
.job_mypage_phone::after{position:absolute;z-index:2;bottom:.8rem;left:50%;width:28%;height:.45rem;border-radius:999px;background:rgba(32,29,27,.72);content:"";transform:translateX(-50%)}
.job_mypage_image{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.job_mypage_body{display:flex;gap:1.2rem;padding:2rem}
.job_mypage_number{flex:0 0 auto;padding-top:.15rem;color:var(--job-gold-deep);font-size:1rem;letter-spacing:.08em}
.job_mypage_copy{min-width:0}
.job_mypage_title{color:var(--job-ink);font-size:1.55rem;line-height:1.45;letter-spacing:.04em}
.job_mypage_text{margin-top:.75rem;color:var(--job-muted);font-size:1.15rem;line-height:1.85}

@media (hover:hover) and (pointer:fine){
  .job_tier_button:hover{border-color:var(--job-gold);color:var(--job-white)}
  .job_mypage_item{transition:transform .25s ease,box-shadow .25s ease}
  .job_mypage_item:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(74,54,39,.12)}
}

@media (min-width:768px){
  .job_page{padding-bottom:9rem}
  .job_intro{padding:9rem 0 8rem}
  .job_section_block{padding:9rem 0}
  .job_summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;margin-top:5rem}
  .job_summary_item{padding:2.5rem 1.2rem}
  .job_section_heading{margin-bottom:5rem}
  .job_pay_lead{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:4rem}
  .job_split_card{padding:3rem}
  .job_split_head{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .job_bar_row{grid-template-columns:6rem minmax(0,1fr);gap:1.4rem}
  .job_guarantee{display:grid;grid-template-columns:25% 1fr}
  .job_guarantee_label{display:flex;flex-direction:column;justify-content:center;padding:3rem}
  .job_guarantee_body{padding:3rem}
  .job_guarantee_caption{min-height:0}
  .job_info_grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin-top:1.4rem}
  .job_mypage_lead{margin-left:7.1rem}
  .job_mypage_grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}
  .job_mypage_body{padding:2.3rem}
}

@media (max-width:420px){
  .job_container{width:min(94%,1080px)}
  .job_summary_item{padding:1.7rem .7rem}
  .job_summary_value{font-size:1.3rem}
  .job_tier_buttons{gap:.45rem}
  .job_tier_button{padding:.7rem .9rem;font-size:1rem}
  .job_bar_therapist,.job_bar_shop{padding:0 .45rem;font-size:.92rem}
.job_mypage_body{padding:1.7rem}
.job_mypage_image_wrap{height:54rem;padding:2.2rem 1rem}
.job_mypage_phone{max-width:92%;border-width:.6rem;border-radius:3rem}
}