/* Tomarigi LP — Claude Design 準拠の本実装スタイル
   デザイン: Noto Sans JP / brand orange #ee5705 / green #22a033・#3f9b4a
   PCはデザイン固定幅(max 1160px)をピクセル準拠、<=960pxでスマホ最適化 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #ffffff;
  color: #23282b;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #2f7a3a; text-decoration: none; }
a:hover { color: #ee5705; }
img { display: block; max-width: 100%; }
.page { background: #ffffff; color: #23282b; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); border-bottom: 1px solid #f2ece1; }
.hdr__in { max-width: 1160px; margin: 0 auto; padding: 0 20px; height: 84px; display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 34px; height: auto; }
.brand__name { display: block; font-size: 28px; font-weight: 900; color: #ee5705; letter-spacing: 0.02em; line-height: 1.1; }
.brand__tag { display: block; font-size: 11px; font-weight: 500; color: #8b8579; margin-top: 3px; letter-spacing: 0.02em; }
.gnav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.gnav a { font-size: 13.5px; font-weight: 700; color: #3d4247; text-align: center; line-height: 1.5; }
.gnav a:hover { color: #ee5705; }
.hdr__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.btn-line-sm, .btn-shindan-sm { display: flex; align-items: center; gap: 8px; color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.btn-line-sm { background: #22a033; box-shadow: 0 2px 6px rgba(34,160,51,0.28); }
.btn-line-sm:hover { background: #1d8c2c; color: #fff; }
.btn-shindan-sm { background: #ee5705; box-shadow: 0 2px 6px rgba(238,87,5,0.28); }
.btn-shindan-sm:hover { background: #d94d02; color: #fff; }
.line-badge { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #22a033; font-size: 8px; font-weight: 900; display: flex; align-items: center; justify-content: center; letter-spacing: -0.02em; }
.clock-badge { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #fff; display: block; }
.clock-badge::before { content: ""; position: absolute; left: 10px; top: 5px; width: 2px; height: 7px; background: #ee5705; border-radius: 1px; }
.clock-badge::after { content: ""; position: absolute; left: 10px; top: 10px; width: 6px; height: 2px; background: #ee5705; border-radius: 1px; }
.hdr__menu-btn { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; height: 560px; overflow: hidden; background: #f4f6ee url('../img/hero.png') center right / cover no-repeat; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(96deg, #ffffff 4%, rgba(255,255,255,0.94) 30%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0) 62%); }
.hero__in { position: relative; max-width: 1160px; margin: 0 auto; padding: 62px 20px 0; height: 100%; box-sizing: border-box; }
.hero__kicker { margin: 0; font-size: 22px; font-weight: 700; color: #23282b; letter-spacing: 0.01em; }
.hero h1 { margin: 14px 0 0; font-size: 62px; font-weight: 900; line-height: 1.18; letter-spacing: 0.01em; color: #23282b; }
.hero h1 .accent { color: #ee5705; }
.hero__robin { position: absolute; left: 432px; top: 118px; width: 96px; height: auto; }
.hero__lead { margin: 26px 0 0; font-size: 15px; font-weight: 500; line-height: 2; color: #4a4f53; }
.hero__lead-strong { margin: 12px 0 0; font-size: 15px; font-weight: 700; color: #ee5705; }
.hero__btns { display: flex; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.btn-line-lg { display: flex; align-items: center; gap: 14px; background: #22a033; color: #fff; padding: 16px 26px; border-radius: 12px; box-shadow: 0 6px 16px rgba(34,160,51,0.3); }
.btn-line-lg:hover { background: #1d8c2c; color: #fff; }
.btn-line-lg .line-badge { width: 40px; height: 40px; font-size: 13px; flex: none; }
.btn-shindan-lg { display: flex; align-items: center; gap: 26px; background: #ee5705; color: #fff; padding: 16px 24px 16px 28px; border-radius: 12px; box-shadow: 0 6px 16px rgba(238,87,5,0.3); }
.btn-shindan-lg:hover { background: #d94d02; color: #fff; }
.btn__title { display: block; font-size: 19px; font-weight: 700; line-height: 1.3; }
.btn__sub { display: block; font-size: 12.5px; font-weight: 500; opacity: 0.92; margin-top: 3px; }
.btn__arrow { font-size: 20px; font-weight: 500; line-height: 1; }

/* ---------- trust bar ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; background: #fff; border: 1px solid #f0e7d8; border-radius: 14px; box-shadow: 0 2px 10px rgba(120,100,70,0.05); margin-top: 26px; padding: 16px 0; }
.trust__item { display: flex; align-items: center; justify-content: center; gap: 14px; }
.trust__item + .trust__item { border-left: 1px solid #f0e7d8; }
.trust__item img { width: 54px; height: auto; }
.trust__item span.label { font-size: 15.5px; font-weight: 700; color: #23282b; }
.ring { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #22a033; display: flex; align-items: center; justify-content: center; flex: none; }
.ring--clock { position: relative; display: block; }
.ring--clock::before { content: ""; position: absolute; left: 13px; top: 6px; width: 2px; height: 9px; background: #22a033; border-radius: 1px; }
.ring--clock::after { content: ""; position: absolute; left: 13px; top: 13px; width: 8px; height: 2px; background: #22a033; border-radius: 1px; }
.ring--check { color: #ee5705; font-size: 15px; font-weight: 900; }
.ring--cross { color: #ee5705; font-size: 16px; font-weight: 700; }

/* ---------- section head ---------- */
.sec { max-width: 1160px; margin: 0 auto; padding: 44px 20px 0; }
.sec--tight { padding-top: 40px; }
.sec__head { display: flex; align-items: center; gap: 14px; }
.sec__num { width: 30px; height: 30px; border-radius: 50%; background: #3f9b4a; color: #fff; font-size: 16px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; }
.sec__title { margin: 0; font-size: 23px; font-weight: 900; color: #23282b; letter-spacing: 0.01em; }
.sec__rule { flex: 1; border-top: 2px dotted #dcd8ce; margin-top: 6px; }
.link-pill { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #cfd6cb; border-radius: 999px; padding: 11px 22px; font-size: 13.5px; font-weight: 700; color: #3d4247; flex: none; }
.link-pill:hover { border-color: #3f9b4a; color: #2f7a3a; }
.link-pill img { width: 22px; height: auto; }

/* ---------- cards grid ---------- */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 20px; }
.qcard { position: relative; display: flex; gap: 14px; background: #fff; border: 1px solid #f0e7d8; border-radius: 14px; box-shadow: 0 2px 10px rgba(120,100,70,0.05); padding: 20px 20px 40px; }
.qcard:hover { box-shadow: 0 6px 18px rgba(120,100,70,0.12); border-color: #e3d7c2; }
.qcard > img.ic { width: 48px; height: auto; flex: none; margin-top: 2px; }
.qcard__t { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.5; color: #23282b; }
.qcard__d { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.85; color: #6f6f6b; margin-top: 8px; }
.qcard__arrow { position: absolute; right: 18px; bottom: 16px; width: 24px; height: auto; }

/* jobs cards */
.jobcard { display: block; background: #fff; border: 1px solid #f0e7d8; border-radius: 14px; box-shadow: 0 2px 10px rgba(120,100,70,0.05); overflow: hidden; padding-bottom: 20px; }
.jobcard:hover { box-shadow: 0 6px 18px rgba(120,100,70,0.12); }
.jobcard img { width: 100%; height: 168px; object-fit: cover; object-position: center; border-radius: 14px 14px 0 0; }
.jobcard__t { display: block; text-align: center; font-size: 21px; font-weight: 900; color: #23282b; margin-top: 16px; }
.jobcard__d { display: block; text-align: center; font-size: 13px; font-weight: 500; color: #6f6f6b; margin-top: 8px; }
.jobcheck { background: #fdfaf4; border: 1px solid #f0e7d8; border-radius: 14px; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.jobcheck__list { display: flex; flex-direction: column; gap: 13px; }
.jobcheck__row { display: flex; align-items: center; gap: 12px; }
.jobcheck__row .ck { color: #ee5705; font-size: 15px; font-weight: 900; }
.jobcheck__row span.txt { font-size: 13.5px; font-weight: 500; color: #3d4247; }
.jobcheck__btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 14px; background: #fff; border: 1px solid #cfd6cb; border-radius: 999px; padding: 13px 18px; font-size: 14px; font-weight: 700; color: #3d4247; }
.jobcheck__btn:hover { border-color: #3f9b4a; color: #2f7a3a; }
.jobcheck__btn img { width: 22px; height: auto; }

/* ---------- diagnosis banner ---------- */
.shindan { position: relative; overflow: hidden; background: linear-gradient(90deg, #ef6206 0%, #ee5705 55%, #e85102 100%); border-radius: 16px; padding: 22px 40px; display: flex; align-items: center; gap: 44px; box-shadow: 0 6px 18px rgba(238,87,5,0.22); }
.shindan__spray { position: absolute; left: -8px; top: -4px; width: 120px; height: auto; opacity: 0.55; }
.shindan__spray2 { position: absolute; right: -14px; top: -12px; width: 84px; height: auto; opacity: 0.5; transform: scaleX(-1); }
.shindan__spacer { width: 100px; flex: none; }
.shindan__q { margin: 0; font-size: 15.5px; font-weight: 700; color: #fff; line-height: 1.85; flex: none; }
.shindan__big { margin: 0; font-size: 44px; font-weight: 900; color: #fff; letter-spacing: 0.02em; flex: none; }
.shindan__btn { display: flex; align-items: center; gap: 16px; background: #fff; color: #ee5705; border-radius: 999px; padding: 14px 26px; font-size: 15.5px; font-weight: 700; flex: none; }
.shindan__btn:hover { background: #fff4ec; color: #ee5705; }
.shindan__btn img { width: 22px; height: auto; }
.shindan__bird { position: absolute; right: 26px; bottom: 6px; width: 96px; height: auto; }

/* ---------- stories carousel ---------- */
.carousel { overflow: hidden; margin-top: 20px; padding: 4px 0; }
.carousel__track { display: flex; gap: 18px; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.story { flex: 0 0 calc((100% - 36px) / 3); display: flex; background: #fff; border: 1px solid #f0e7d8; border-radius: 14px; box-shadow: 0 2px 10px rgba(120,100,70,0.05); overflow: hidden; }
.story:hover { box-shadow: 0 6px 18px rgba(120,100,70,0.12); }
.story img { width: 166px; height: 206px; object-fit: cover; flex: none; }
.story__body { display: block; padding: 24px 22px 18px; flex: 1; }
.story__t { display: block; font-size: 18px; font-weight: 700; line-height: 1.6; color: #23282b; }
.story__meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 10px; margin-top: 18px; }
.tag-new { display: inline-block; background: #ee5705; color: #fff; border-radius: 999px; padding: 4px 9px; font-size: 10px; font-weight: 900; letter-spacing: 0.04em; white-space: nowrap; }
.tag-cat { display: inline-block; border: 1px solid #7db088; color: #3f8c4c; border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.story__date { font-size: 12.5px; font-weight: 500; color: #9b9b96; white-space: nowrap; }
.carousel__nav { display: flex; gap: 8px; flex: none; }
.cnav-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #cfd6cb; background: #fff; color: #3f9b4a; font-size: 21px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; font-family: "Noto Sans JP", sans-serif; }
.cnav-btn:hover { border-color: #3f9b4a; background: #f3f8f2; }
.dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; }
.dot { width: 9px; height: 9px; border-radius: 999px; border: none; padding: 0; cursor: pointer; background: #e0dcd2; transition: width 0.3s, background 0.3s; }
.dot.is-active { width: 26px; background: #3f9b4a; }

/* ---------- flow ---------- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; margin-top: 20px; }
.flow__step { display: flex; align-items: center; gap: 14px; background: #fdfaf4; border: 1px solid #f0e7d8; border-radius: 14px; padding: 20px 18px; }
.flow__step img { width: 46px; height: auto; flex: none; }
.flow__num { font-size: 26px; font-weight: 900; color: #3f9b4a; line-height: 1; }
.flow__meta { display: flex; align-items: baseline; gap: 10px; }
.flow__t { display: block; font-size: 15px; font-weight: 700; color: #23282b; }
.flow__d { display: block; font-size: 12px; font-weight: 500; color: #6f6f6b; margin-top: 6px; }
.flow__arrow { font-size: 24px; color: #3f9b4a; line-height: 1; text-align: center; }
.flow__note { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 26px 0 44px; }
.flow__note img { width: 46px; height: auto; }
.flow__note img:last-child { width: 44px; }
.flow__note p { margin: 0; font-size: 15.5px; font-weight: 500; color: #3d4247; letter-spacing: 0.01em; }

/* ---------- bottom CTA ---------- */
.cta { position: relative; overflow: hidden; background: #fbf5e9; border-top: 1px solid #f2e9d8; }
.cta__leaf { position: absolute; left: -30px; bottom: -20px; width: 190px; height: auto; opacity: 0.75; transform: scaleX(-1); }
.cta__in { position: relative; max-width: 1160px; margin: 0 auto; padding: 40px 200px 40px 20px; display: flex; align-items: center; gap: 24px; }
.cta__h { margin: 0; font-size: 34px; font-weight: 900; color: #2f7a3a; letter-spacing: 0.02em; }
.cta__p { margin: 16px 0 0; font-size: 19px; font-weight: 500; line-height: 1.85; color: #3d4247; }
.cta__line { display: flex; align-items: center; gap: 14px; background: #22a033; color: #fff; padding: 20px 30px; border-radius: 10px; box-shadow: 0 6px 16px rgba(34,160,51,0.28); flex: none; }
.cta__line:hover { background: #1d8c2c; color: #fff; }
.cta__line .line-badge { width: 40px; height: 40px; font-size: 13px; flex: none; }
.cta__shindan { display: block; background: #ee5705; color: #fff; padding: 20px 28px; border-radius: 10px; box-shadow: 0 6px 16px rgba(238,87,5,0.28); flex: none; }
.cta__shindan:hover { background: #d94d02; color: #fff; }
.cta__img { position: absolute; right: 4px; bottom: 0; width: 176px; height: auto; }

/* ---------- footer ---------- */
.ft { position: relative; background: #fff; border-top: 1px solid #f2ece1; padding: 42px 0 24px; }
.ft__grid { max-width: 1160px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 290px 1fr 1.2fr 1fr 1.25fr 0.95fr; gap: 28px; }
.ft__brand-row { display: flex; align-items: center; gap: 8px; }
.ft__brand-row img { width: 28px; height: auto; }
.ft__brand-name { display: block; font-size: 24px; font-weight: 900; color: #ee5705; line-height: 1.1; }
.ft__brand-tag { display: block; font-size: 10.5px; font-weight: 500; color: #8b8579; margin-top: 3px; }
.ft__about { margin: 20px 0 0; font-size: 12.5px; font-weight: 500; line-height: 2; color: #6f6f6b; }
.ft__deco { display: flex; align-items: flex-end; gap: 0; margin-top: 18px; }
.ft__deco img:first-child { width: 92px; height: auto; margin-bottom: 14px; }
.ft__deco img:last-child { width: 104px; height: auto; margin-left: -14px; }
.ft h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #e9e3d6; font-size: 13.5px; font-weight: 700; color: #23282b; white-space: nowrap; }
.ft__col-links { display: flex; flex-direction: column; gap: 12px; }
.ft__col-links a { font-size: 12.5px; font-weight: 500; color: #6f6f6b; }
.ft__col-links a:hover { color: #ee5705; }
.ft__copy { margin: 34px 0 0; text-align: center; font-size: 12.5px; font-weight: 500; color: #9b9b96; }

/* ---------- back to top ---------- */
.totop { position: fixed; right: 26px; bottom: 26px; z-index: 50; width: 62px; height: 62px; border-radius: 50%; background: #0ca33f; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 6px 16px rgba(12,163,63,0.35); }
.totop:hover { background: #0a8c35; color: #fff; }
.totop span:first-child { font-size: 15px; line-height: 1; }
.totop span:last-child { font-size: 9.5px; font-weight: 700; }

/* mobile sticky CTA bar (plus-alpha, hidden on desktop) */
.mbar { display: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hero h1 { font-size: 52px; }
  .hero__robin { left: auto; right: 24px; top: 90px; }
  .ft__grid { grid-template-columns: 1fr 1fr 1fr; }
  .ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hdr__in { height: 64px; gap: 16px; }
  .brand__name { font-size: 22px; }
  .gnav { display: none; }
  .hdr__cta .btn-shindan-sm { display: none; }
  .hdr__cta .btn-line-sm { padding: 9px 14px; font-size: 13px; }

  .hero { height: auto; background-position: center top; background-size: 150% auto; padding-top: 200px; }
  .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 42%, #fff 70%); }
  .hero__scrim { display: none; }
  .hero__in { padding: 0 18px 30px; }
  .hero__kicker { font-size: 17px; }
  .hero h1 { font-size: 40px; }
  .hero__robin { width: 68px; top: 150px; right: 14px; }
  .hero__lead { font-size: 14px; line-height: 1.9; }
  .hero__btns { gap: 12px; }
  .btn-line-lg, .btn-shindan-lg { flex: 1 1 100%; justify-content: center; }
  .btn-shindan-lg { gap: 16px; }

  .trust { grid-template-columns: 1fr 1fr; gap: 1px 0; padding: 0; overflow: hidden; }
  .trust__item { padding: 14px 8px; gap: 10px; }
  .trust__item + .trust__item { border-left: none; }
  .trust__item:nth-child(even) { border-left: 1px solid #f0e7d8; }
  .trust__item:nth-child(n+3) { border-top: 1px solid #f0e7d8; }
  .trust__item img { width: 40px; }
  .trust__item span.label { font-size: 14px; }

  .sec { padding: 34px 18px 0; }
  .sec__title { font-size: 20px; }
  .sec__head .link-pill, .sec__head .carousel__nav { display: none; }
  .grid4 { grid-template-columns: 1fr 1fr; gap: 12px; }

  .shindan { flex-wrap: wrap; gap: 14px 20px; padding: 22px 22px; justify-content: center; text-align: center; }
  .shindan__spacer, .shindan__bird, .shindan__spray, .shindan__spray2 { display: none; }
  .shindan__big { font-size: 34px; }
  .shindan__q { flex: 1 1 100%; text-align: center; }

  .carousel__track { gap: 12px; }
  .story { flex: 0 0 88%; }
  .story img { width: 128px; height: auto; }
  .story__body { padding: 16px 16px 14px; }
  .story__t { font-size: 15px; }

  .flow { grid-template-columns: 1fr; gap: 8px; }
  .flow__arrow { transform: rotate(90deg); padding: 2px 0; }
  .flow__note { flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
  .flow__note p { flex: 1 1 100%; text-align: center; font-size: 14px; order: -1; }

  .cta__in { flex-wrap: wrap; padding: 34px 18px; gap: 16px; }
  .cta__h { font-size: 26px; }
  .cta__p { font-size: 16px; }
  .cta__line, .cta__shindan { flex: 1 1 100%; text-align: center; }
  .cta__line { justify-content: center; }
  .cta__img, .cta__leaf { display: none; }

  .ft { padding: 34px 0 90px; }
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .ft__brand { grid-column: 1 / -1; }

  .totop { display: none; }

  /* mobile sticky CTA */
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: 10px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid #f0e7d8; box-shadow: 0 -6px 20px rgba(0,0,0,0.06); }
  .mbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 8px; border-radius: 10px; font-size: 14.5px; font-weight: 700; color: #fff; }
  .mbar .m-line { background: #22a033; }
  .mbar .m-shindan { background: #ee5705; }
  .mbar .line-badge { width: 22px; height: 22px; font-size: 8px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 33px; }
  .grid4 { grid-template-columns: 1fr; }
  .ft__grid { grid-template-columns: 1fr; }
}