/* アートメイク アーティスト診断｜アートメイクスタジオ大阪梅田院 — croissant.buzz 版（第二弾・カスタムデザイン）の見た目を再現 */
:root{
  --text:#785046;        /* 文字色 rgb(120,80,70) */
  --text-base:#3B3532;   /* 本文の既定色 rgb(59,53,50) */
  --content:#EFEAE9;     /* コンテンツ部分の背景 */
  --green:#6E9983;       /* ボタン・チェックの色 */
  --column:550px;        /* PC で表示するときのコンテンツ幅（クロワッサンの「モバイル幅」表示） */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans JP",Roboto,"Helvetica Neue",sans-serif;
  font-size:14px;line-height:28px;color:var(--text-base);
  background:#F4F1EC;
  -webkit-font-smoothing:antialiased;
}
/* 背景画像は画面に固定（iOS Safari は background-attachment:fixed が効かないため疑似要素で固定） */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url(../images/back.webp) center/cover no-repeat}
img{max-width:100%;display:block}
button{font-family:inherit}
[hidden]{display:none!important}

/* 1カラム（スマホは全幅、PC は中央に 550px） */
.page{width:100%;max-width:var(--column);margin:0 auto;min-height:100vh;background:var(--content);display:flex;flex-direction:column}
.main{flex:1;display:flex;flex-direction:column}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ===== トップ ===== */
.full{width:100%;height:auto}
.start-wrap{padding:0 20px 16px}
.img-button{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:9999px;transition:opacity .2s}
.img-button img{width:100%;height:auto}
.img-button:hover{opacity:.85}
.img-button:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ===== 設問 ===== */
.view-question{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 32px}
.q-inner{width:100%;text-align:center;font-weight:500;color:var(--text)}
.q-label{margin:0;font-size:13px;font-weight:700;line-height:19.5px}
.q-num{margin:0;font-size:39px;font-weight:700;line-height:58.5px}
.dots{display:flex;justify-content:center;padding:8px}
.dots span{width:8px;height:8px;margin:0 6px;border-radius:50%;border:1px solid var(--text);background:transparent}
.dots span.on{background:var(--text)}
.q-title{margin:16px 0 0;font-size:15px;line-height:22.5px}
.q-sub{margin:8px 0 0;font-size:13px;line-height:19.5px}
.options{display:flex;flex-direction:column;gap:24px;margin-top:32px}
.option{
  display:flex;align-items:center;gap:8px;width:100%;min-height:46px;padding:8px 24px;
  background:rgba(255,255,255,.2);border:1px solid var(--text);border-radius:100px;cursor:pointer;
  color:var(--text);font-size:14px;font-weight:500;line-height:21px;text-align:left;
  transition:background-color .15s;
}
.option:hover{background:rgba(255,255,255,.45)}
.option:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.check{
  flex:none;width:20px;height:20px;padding:1.75px;border:1px solid var(--green);border-radius:4px;
  background:rgba(110,153,131,.1);color:#fff;display:flex;align-items:center;justify-content:center;
}
.check svg{width:16px;height:16px;opacity:0}
.option.selected .check{background:var(--green);border-color:var(--green)}
.option.selected .check svg{opacity:1}
.q-error{margin:16px 0 0;font-size:13px;color:#c0392b;line-height:19.5px}
.q-nav{display:flex;justify-content:center;gap:24px;margin-top:56px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:104px;height:44px;padding:0 24px;border:0;border-radius:9999px;
  background:var(--green);color:#fff;font-size:14px;font-weight:700;line-height:14px;cursor:pointer;
  transition:opacity .2s;
}
.btn:hover{opacity:.85}
.btn:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.btn svg{width:24px;height:24px;flex:none}

/* ===== 属性（性別・年齢） ===== */
.profile-title{margin:0;font-size:18px;font-weight:600;line-height:30px}
.profile-group{margin:40px 0 0;padding:0;border:0;min-width:0}
.profile-group legend{display:block;width:100%;padding:0;margin:0}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.options-grid .option{padding:8px 16px}
.profile-group .options:not(.options-grid){gap:16px;margin-top:20px}

/* ===== 結果 ===== */
.view-result{display:flex;flex-direction:column;gap:40px;padding:40px 20px 80px}
.result-heading{margin:0;font-size:22px;font-weight:600;line-height:32px;text-align:center;color:var(--text)}
.result-card{background:rgba(255,255,255,.2);border:1px solid var(--text);border-radius:8px;overflow:hidden}
.result-header{width:100%;height:auto}
.result-body{display:flex;flex-direction:column;gap:28px;padding:32px 16px 48px}
.result-body img{width:100%;height:auto}
.result-body a{display:block;border-radius:9999px;transition:opacity .2s}
.result-body a:hover{opacity:.85}
.result-body a:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ===== フッター ===== */
.footer{display:flex;justify-content:center;gap:12px;padding:16px 20px}
.footer a{font-size:12px;line-height:12px;color:var(--text);text-decoration:none}
.footer a:hover{text-decoration:underline}