/* start-guide.css — ダッシュボードの「はじめの5ステップ」（assets/js/start-guide.js） */
#ulstaStartGuide{margin:0 0 24px;padding:24px;border:1px solid #eae2d2;border-radius:12px;background:#fbfaf5;color:#262420}
#ulstaStartGuide[hidden]{display:none}
#ulstaStartGuide .sg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
#ulstaStartGuide .sg-title{margin:0;font-size:20px;line-height:1.5;font-weight:700;color:#0f2a20}
#ulstaStartGuide .sg-lead{margin:4px 0 0;font-size:14px;line-height:1.8;color:#6f6857}
#ulstaStartGuide .sg-right{display:flex;align-items:center;gap:12px;flex:none}
#ulstaStartGuide .sg-count{font-size:13px;font-weight:700;color:#0d6b4c;white-space:nowrap}
#ulstaStartGuide .sg-close{min-height:44px;padding:8px 4px;background:none;border:0;color:#6f6857;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#ulstaStartGuide .sg-bar{height:4px;margin:16px 0 8px;background:#eae2d2;border-radius:2px;overflow:hidden}
#ulstaStartGuide .sg-bar span{display:block;height:100%;background:#0d9668;border-radius:2px;transition:width .3s}
#ulstaStartGuide .sg-steps{list-style:none;margin:0;padding:0}
#ulstaStartGuide .sg-step{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid #efe7d8}
#ulstaStartGuide .sg-step:first-child{border-top:0}
#ulstaStartGuide .sg-num{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:#fff;border:1px solid #d6cdb9;color:#6f6857}
#ulstaStartGuide .is-current .sg-num{background:#0f2a20;border-color:#0f2a20;color:#fff}
#ulstaStartGuide .is-done .sg-num{background:#0d9668;border-color:#0d9668}
#ulstaStartGuide .is-done .sg-num::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
#ulstaStartGuide .sg-body{flex:1;min-width:0}
#ulstaStartGuide .sg-step-title{font-size:15px;font-weight:700;line-height:1.6;color:#262420}
#ulstaStartGuide .is-done .sg-step-title{color:#6f6857;font-weight:400}
#ulstaStartGuide .sg-step-text{margin:4px 0 0;font-size:13px;line-height:1.8;color:#6f6857}
#ulstaStartGuide .sg-act{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#ulstaStartGuide .sg-btn{min-height:44px;padding:10px 16px;border:1px solid #d6cdb9;border-radius:8px;background:#fff;color:#262420;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
#ulstaStartGuide .sg-btn-primary{background:#0f2a20;border-color:#0f2a20;color:#fff}
/* 今やる1つだけをボタンにする。先のステップは文字のリンクにして、目が迷わないようにする */
#ulstaStartGuide .sg-step:not(.is-current) .sg-btn{background:none;border:0;padding:8px 0;color:#0d6b4c;font-weight:400;text-decoration:underline;text-underline-offset:3px}
#ulstaStartGuide .sg-step:not(.is-current) .sg-step-title{font-weight:400}
#ulstaStartGuide .sg-link{min-height:44px;padding:8px 0;background:none;border:0;color:#0d6b4c;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#ulstaStartGuide .sg-foot,#ulstaStartGuide .sg-foot-alt{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;font-size:13px;line-height:1.8;color:#6f6857}
#ulstaStartGuide .sg-foot{margin-top:8px;padding-top:12px;border-top:1px solid #efe7d8}
/* [2026-10-02] 手入力しないで始める道（反響メールの転送・見本データ）。ステップの下に、同じ重さの2枚で並べる */
#ulstaStartGuide .sg-alt{margin-top:16px;padding-top:16px;border-top:1px solid #efe7d8}
#ulstaStartGuide .sg-alt-title{font-size:13px;font-weight:700;color:#6f6857;margin:0 0 10px}
#ulstaStartGuide .sg-alt-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
#ulstaStartGuide .sg-alt-card{min-width:0;padding:14px 16px;border:1px solid #eae2d2;border-radius:10px;background:#fff}
#ulstaStartGuide .sg-alt-h{font-size:14px;font-weight:700;color:#262420;line-height:1.6}
#ulstaStartGuide .sg-alt-p{margin:4px 0 8px;font-size:12.5px;line-height:1.8;color:#6f6857}
#ulstaStartGuide .sg-addr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#ulstaStartGuide .sg-addr-v{flex:1 1 220px;min-width:0;padding:9px 10px;border:1px solid #e3dccb;border-radius:8px;background:#fbfaf5;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#262420;overflow-wrap:anywhere;word-break:break-all;line-height:1.5}
#ulstaStartGuide .sg-addr-v.is-error{font-family:inherit;color:#8a5e18;background:#fdf4e8;border-color:#f0d9ad}
#ulstaStartGuide .sg-copy{flex:none;min-width:96px;min-height:44px;padding:8px 14px;border:1px solid #d6cdb9;border-radius:8px;background:#fff;color:#262420;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
#ulstaStartGuide .sg-copy:disabled{opacity:.5;cursor:default}
#ulstaStartGuide .sg-copy[hidden]{display:none !important}
#ulstaStartGuide .sg-foot-alt{margin-top:6px}
/* [2026-10-06] 無料期間の残り・前回の続き・「何から始めますか？」の3択 */
#ulstaStartGuide .sg-trial{margin:12px 0 0;padding:10px 14px;border-radius:8px;background:#e9f6ef;border:1px solid #c3e6d4;font-size:13px;line-height:1.8;color:#57513f}
#ulstaStartGuide .sg-trial strong{color:#0f2a20}
#ulstaStartGuide .sg-return{margin:12px 0 0;font-size:14px;line-height:1.8;font-weight:700;color:#0d6b4c}
#ulstaStartGuide .sg-goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 0}
#ulstaStartGuide .sg-goal{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:112px;padding:16px;border:1px solid #d6cdb9;border-radius:10px;background:#fff;color:#262420;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
#ulstaStartGuide .sg-goal:hover{border-color:#0d9668;box-shadow:0 2px 10px rgba(15,42,32,.08)}
#ulstaStartGuide .sg-goal:disabled{opacity:.6;cursor:default}
#ulstaStartGuide .sg-goal-h{font-size:15px;font-weight:700;line-height:1.6;color:#0f2a20}
#ulstaStartGuide .sg-goal-p{font-size:13px;line-height:1.8;color:#6f6857}
#ulstaStartGuide .sg-goal-status{margin:8px 0 0;min-height:1em;font-size:13px;color:#6f6857}
#ulstaStartGuide .sg-step .sg-addr{margin-top:8px}
#ulstaStartGuide .sg-alt-card .sg-link{display:block;text-align:left}
#ulstaStartGuide .sg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#ulstaStartGuide :focus-visible{outline:3px solid #0d9668;outline-offset:2px}
/* 案内はこの1つにまとめる。募集図面（マイソク）を選んだ人の案内だけは残す */
#view-dashboard.ulsta-guide-on #dashZeroState{display:none !important}
#view-dashboard.ulsta-guide-on #registrationFirstSteps:not(:has(#registrationMysokuProperty)){display:none !important}
@media(max-width:640px){
  #ulstaStartGuide{padding:20px 16px}
  #ulstaStartGuide .sg-head{flex-direction:column;gap:4px}
  #ulstaStartGuide .sg-right{width:100%;justify-content:space-between}
  #ulstaStartGuide .sg-step{flex-wrap:wrap;gap:8px 12px;align-items:flex-start}
  #ulstaStartGuide .sg-step:not(.is-current){align-items:center}
  #ulstaStartGuide .sg-body{flex-basis:calc(100% - 40px)}
  #ulstaStartGuide .sg-act{width:100%;padding-left:40px;align-items:stretch}
  #ulstaStartGuide .is-done .sg-act,#ulstaStartGuide .sg-step:not(.is-current) .sg-act{display:none}
  #ulstaStartGuide .sg-step.is-independent-entry .sg-act{display:flex}
  #ulstaStartGuide .sg-btn{width:100%}
  #ulstaStartGuide .sg-act .sg-link{align-self:flex-start;text-align:left}
  #ulstaStartGuide .sg-alt-grid{grid-template-columns:minmax(0,1fr)}
  #ulstaStartGuide .sg-alt .sg-link{text-align:left}
  #ulstaStartGuide .sg-goals{grid-template-columns:minmax(0,1fr)}
  #ulstaStartGuide .sg-goal{min-height:0}
}
/* [2026-10-02] スマホでは、案内が出ている間はキャラクターと吹き出しを出さない。
   390px幅では見出しの下に約200pxを使い、最初のボタンが画面の下半分（620px付近）まで押し下げられていた。 */
@media(max-width:768px){
  #view-dashboard.ulsta-guide-on #dashHeroBar > div:last-child{display:none !important}
  #view-dashboard.ulsta-guide-on #dashHeroBar{margin-bottom:16px !important}
}