:root{
    --cream:#FFF2BB;
    --orange:#F5901E;
    --orange-d:#E07c10;
    --red-orange:#ED541B;
    --green:#27A238;
    --maxw:1200px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
    background:var(--cream);
    color:#222;
    -webkit-font-smoothing:antialiased;
  }

  /* Header */
  .hd{ background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.06); }
  .hd__in{ max-width:1200px; margin:0 auto; height:68px; padding:0 7.8%; display:flex; align-items:center; justify-content:space-between; }
  .hd__left{ display:flex; align-items:center; gap:24px; min-width:0; }
  .hd__home{ display:inline-flex; align-items:center; flex:none; }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .hd__logo{ height:26px; width:auto; }
  .hd__tag{ font-family:"M PLUS Rounded 1c",sans-serif; font-weight:500; font-size:14px; color:#303030; white-space:nowrap; }
  .hd__back{ flex:none; display:inline-flex; align-items:center; justify-content:center; padding:11px 30px; border-radius:999px; background:linear-gradient(90deg,#DA4733,#ED541A 50%,#FE5F03); color:#fff; font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; }
  .hd__back:hover{ filter:brightness(1.05); }
  @media(max-width:760px){ .hd__tag{display:none;} .hd__in{height:56px;padding:0 14px;} .hd__logo{height:20px;} .hd__back{padding:8px 16px;font-size:12px;} }

  /* Page */
  .sc{ max-width:var(--maxw); margin:0 auto; padding:46px 28px 90px; }
  .sc__logo{ height:48px; width:auto; display:block; margin-bottom:26px; }
  @media(max-width:760px){ .sc{padding:28px 16px 60px;} .sc__logo{height:34px;} }

  .card{ background:#fff; border-radius:26px; padding:60px 64px; box-shadow:0 12px 40px rgba(0,0,0,.05); }
  @media(max-width:760px){ .card{ padding:34px 22px; border-radius:18px; } }

  /* Question */
  .q__title{ text-align:center; font-size:30px; font-weight:800; color:#222; letter-spacing:.02em; }
  .q__title .qn{ color:var(--orange); font-size:34px; margin-right:8px; }
  .opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
  .opt{
    appearance:none; cursor:pointer; text-align:center;
    background:#fff; border:2px solid var(--orange); border-radius:12px;
    padding:26px 18px; min-height:104px;
    display:flex; align-items:center; justify-content:center;
    font-size:17px; font-weight:700; color:#333; line-height:1.5;
    transition:all .12s ease;
  }
  .opt:hover{ background:#FFF7E9; }
  .opt.sel{ background:var(--green); border-color:var(--green); color:#fff; box-shadow:4px 5px 0 rgba(20,110,45,.35); }
  @media(max-width:860px){ .opts{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:520px){ .opts{ grid-template-columns:1fr; gap:14px; } .opt{ min-height:64px; padding:18px; font-size:14px; } .q__title{font-size:19px;} .q__title .qn{font-size:25px;} .prog{font-size:12px;} }

  /* Progress */
  .prog{ text-align:center; margin-top:30px; font-size:14px; color:#9a8a55; font-weight:700; letter-spacing:.08em; }

  /* Action area */
  .action{ display:flex; justify-content:center; gap:30px; margin-top:48px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:460px; max-width:100%; padding:24px 40px; border-radius:999px;
    font-size:21px; font-weight:700; text-decoration:none; cursor:pointer; border:none;
    transition:all .12s ease;
  }
  .btn--fill{ background:var(--orange); color:#fff; box-shadow:4px 6px 0 rgba(190,110,15,.4); }
  .btn--fill:hover{ filter:brightness(1.04); }
  .btn--cta{ background:linear-gradient(90deg,#DA4733,#ED541A 50%,#FE5F03); color:#fff; box-shadow:0 8px 18px rgba(230,90,30,.3); }
  .btn--outline{ background:#fff; color:#333; border:2px solid var(--orange); box-shadow:4px 6px 0 rgba(190,110,15,.18); }
  .btn[disabled]{ opacity:.4; pointer-events:none; }
  @media(max-width:760px){ .btn{ min-width:0; width:100%; padding:18px 24px; font-size:16px; } .action{gap:16px;} .res__text{font-size:14px;} .res__label{font-size:13px;} }

  /* Result */
  .res__type{ font-size:30px; font-weight:800; color:var(--orange); }
  .res__type .t{ color:var(--orange); }
  .res__head{ display:flex; align-items:baseline; gap:14px; margin-top:14px; font-size:32px; font-weight:800; color:#222; line-height:1.4; }
  .res__head .a{ color:var(--orange); font-size:40px; font-weight:800; }
  .res__body{ display:flex; gap:46px; align-items:center; margin-top:34px; }
  .res__texts{ flex:1 1 0; }
  .res__label{ font-size:17px; font-weight:800; color:var(--orange); margin:0 0 6px; }
  .res__label--step{ color:#222; }
  .res__text{ font-size:17px; line-height:2; color:#333; margin:0 0 22px; }
  .res__text:last-child{ margin-bottom:0; }
  .res__media{ flex:0 0 38%; display:flex; justify-content:center; }
  .res__media img{ max-width:100%; height:auto; border-radius:10px; }
  .res__media--photo{ flex-basis:42%; }
  .res__media--photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; box-shadow:4px 6px 0 rgba(190,110,15,.18); }
  @media(max-width:760px){ .res__head{font-size:19px;} .res__head .a{font-size:25px;} .res__body{flex-direction:column-reverse; gap:24px;} .res__media{flex-basis:auto;} .res__type{font-size:24px;} .res__label{font-size:14px;} }