:root{
  --bg:#fff7fb;
  --panel:#ffffff;
  --ink:#2f2430;
  --muted:#806d7b;
  --line:#efd6e4;
  --pink:#ff78b8;
  --purple:#8b75ff;
  --shadow:0 18px 44px rgba(55,29,54,.14);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 10%,rgba(255,120,184,.20),transparent 26%),
    radial-gradient(circle at 86% 4%,rgba(139,117,255,.16),transparent 26%),
    var(--bg);
}
button,input{font:inherit}
button{cursor:pointer}
.header{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 22px 10px;
}
.header h1{margin:0;font-size:22px}
.header h1 span{font-size:13px;color:#a37096}
.header p{margin:5px 0 0;color:var(--muted);font-size:13px}
.badge{
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;
  font-size:13px;font-weight:800;box-shadow:0 6px 16px rgba(60,35,60,.07);
}
.main{
  display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;
  padding:10px 22px 24px;align-items:start;
}
.preview-card,.panel{
  background:rgba(255,255,255,.86);border:1px solid rgba(239,214,228,.95);
  border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(12px);
}
.preview-card{padding:18px}
.preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.preview-top strong{display:block;font-size:18px}
.stage-shell{
  width:min(72vh,100%);max-width:620px;aspect-ratio:1/1;margin:0 auto;
  border-radius:24px;overflow:hidden;position:relative;background:#eee;
  box-shadow:0 22px 54px rgba(44,27,48,.2);
}
.preview-canvas{
  width:100%;height:100%;display:block;background:#fff;
}
.color-row{display:flex;justify-content:center;align-items:center;gap:12px;margin:14px 0 6px;flex-wrap:wrap}
.color-dot{
  width:34px;height:34px;border-radius:50%;border:4px solid #fff;background:var(--dot);
  box-shadow:0 4px 12px rgba(40,25,44,.18);outline:2px solid transparent;
}
.color-dot.active{outline-color:#3b2e3d;transform:scale(1.08)}
.note{font-size:12px;color:var(--muted);line-height:1.55;margin:8px 0 0}
.panel{
  padding:14px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;
}
.block{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.block:last-child{border-bottom:0}
.step{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:1000;background:linear-gradient(135deg,var(--pink),var(--purple));
  box-shadow:0 8px 18px rgba(255,120,184,.25);
}
.block h2{margin:1px 0 9px;font-size:15px}
.upload-box{
  border:1px dashed #e7b6d2;background:#fff7fb;border-radius:16px;padding:12px;
  font-size:13px;color:var(--muted);
}
label{display:grid;gap:6px;margin:10px 0;color:#5e4d5b;font-size:13px;font-weight:850}
label input[type="range"]{width:100%}
.check{display:flex;align-items:center;gap:8px;font-weight:800}
.plan-card,.set-card,.subtitle-chip{
  border:1px solid var(--line);background:#fff;border-radius:16px;padding:11px;
  box-shadow:0 6px 16px rgba(60,35,60,.05);
}
.plan-cards{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-card{text-align:left;min-height:70px}
.plan-card small,.set-card small{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.set-cards{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.set-card{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;text-align:left;min-height:72px}
.set-card.active,.plan-card.active{outline:3px solid rgba(255,120,184,.32);border-color:#ff9dca}
.set-thumb{
  width:42px;height:42px;border-radius:14px;background:var(--dot);border:3px solid #fff;
  box-shadow:0 5px 12px rgba(40,25,44,.14);
}
.subtitle-chips{display:flex;flex-wrap:wrap;gap:8px}
.subtitle-chip{padding:9px 12px;color:#5d4a58;font-weight:900}
.subtitle-chip.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--pink),var(--purple))}
.primary{
  width:100%;border:0;color:#fff;font-weight:1000;border-radius:16px;padding:13px 15px;
  background:linear-gradient(135deg,var(--pink),var(--purple));box-shadow:0 14px 28px rgba(139,117,255,.24);
}
.range-value{margin-left:6px;color:#a06c91;font-size:12px;font-weight:900}
.export-status{min-height:20px;margin:9px 0 0;font-size:12px;color:#7a5f72;line-height:1.45}
.export-status.error{color:#b43058;font-weight:800}
.export-status.ok{color:#2f8060;font-weight:800}
@media (max-width:980px){
  .header{align-items:flex-start;flex-direction:column}
  .main{grid-template-columns:1fr;padding:8px 12px 24px}
  .preview-card{padding:10px;border-radius:20px}
  .stage-shell{width:100%}
  .panel{position:static;max-height:none;border-radius:20px}
}
@media (max-width:520px){
  .set-cards,.plan-cards{grid-template-columns:1fr}
}


/* v6.4 subtitle selected-state improvement */
.subtitle-chip{
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.subtitle-chip.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(135deg,#ff5fa8,#8b75ff);
  box-shadow:0 10px 20px rgba(139,117,255,.24), 0 0 0 3px rgba(255,255,255,.95) inset;
  transform:translateY(-1px);
}
.subtitle-chip.active::before{
  content:"✓ ";
  font-weight:1000;
}


/* v7.3 final header / tool navigation */
.header{
  align-items:stretch;
  gap:18px;
}
.header-main{
  flex:1 1 auto;
  min-width:0;
  padding:22px 24px;
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(139,117,255,.16), transparent 38%),
    radial-gradient(circle at left bottom, rgba(255,120,184,.12), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(245,247,255,.88));
  border:1px solid rgba(190,176,214,.45);
  box-shadow:0 18px 40px rgba(111,86,140,.10);
}
.brand-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(228,176,203,.7);
  color:#b05c87;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
.header h1{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 14px;
  margin:0;
}
.title-main{
  font-size:clamp(28px, 3.8vw, 42px);
  line-height:1.08;
  font-weight:1000;
  letter-spacing:.01em;
  background:linear-gradient(135deg,#5e3d9c 0%, #ff5fa8 52%, #ff9d57 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 10px 26px rgba(136,108,255,.14);
}
.title-accent{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(188,175,214,.55);
  color:#7d6a90;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-subtitle{
  margin:10px 0 0;
  max-width:720px;
  color:#7b6674;
  font-size:14px;
  line-height:1.7;
}
.header-nav{
  width:min(300px, 100%);
  display:grid;
  gap:10px;
  align-content:start;
}
.nav-link{
  display:block;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(201,187,216,.58);
  box-shadow:0 12px 26px rgba(81,60,109,.08);
  text-decoration:none;
  color:#5f4d61;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.nav-link:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(81,60,109,.12);
  border-color:#d6bfd6;
}
.nav-link.current{
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(252,245,255,.92));
  border-color:#e2bfd6;
}
.nav-link-label{
  display:block;
  margin-bottom:4px;
  color:#af7f98;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
}
.nav-link strong{
  display:block;
  font-size:14px;
  line-height:1.45;
}

@media (max-width:980px){
  .header-main{padding:20px 18px;}
  .header-nav{width:100%; grid-template-columns:repeat(3,minmax(0,1fr));}
  .nav-link{padding:12px 12px;}
  .nav-link strong{font-size:13px;}
}
@media (max-width:720px){
  .header-nav{grid-template-columns:1fr;}
  .title-main{font-size:clamp(26px, 8vw, 36px);}
  .title-accent{font-size:11px;}
}


/* v7.3.1 compact nav + more vivid tool title */
.title-main{
  position:relative;
  display:inline-block;
  padding:10px 18px 12px;
  border-radius:20px;
  font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;
  font-size:clamp(30px, 4.2vw, 46px);
  font-weight:1000;
  line-height:1.06;
  letter-spacing:.02em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68)),
    linear-gradient(135deg,#ff77b7 0%, #8d7cff 42%, #58d0ff 74%, #ffc266 100%);
  -webkit-background-clip:padding-box, text;
  background-clip:padding-box, text;
  color:transparent;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 34px rgba(148,108,188,.18), inset 0 1px 0 rgba(255,255,255,.78);
  text-shadow:
    0 2px 0 rgba(255,255,255,.92),
    0 0 18px rgba(255,130,190,.18);
}
.title-main::before,
.title-main::after{
  position:absolute;
  font-size:16px;
  line-height:1;
  filter:drop-shadow(0 4px 10px rgba(255,150,195,.28));
}
.title-main::before{
  content:"✦";
  top:-8px;
  left:-6px;
  color:#ff83b8;
}
.title-main::after{
  content:"✦";
  right:-4px;
  bottom:-6px;
  color:#7fd8ff;
}
.title-accent{
  padding:6px 11px;
  font-size:11px;
  letter-spacing:.12em;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(252,244,255,.92));
  box-shadow:0 8px 20px rgba(111,86,140,.08);
}
.hero-subtitle{
  margin:12px 0 0;
}
.header-nav{
  width:auto;
  min-width:0;
  grid-template-columns:repeat(2,minmax(0,max-content));
  justify-content:end;
  gap:8px;
}
.nav-link.nav-link-compact{
  min-width:124px;
  max-width:152px;
  padding:10px 12px;
  border-radius:16px;
  box-shadow:0 8px 18px rgba(81,60,109,.07);
}
.nav-link.nav-link-compact .nav-link-label{
  margin-bottom:3px;
  font-size:10px;
}
.nav-link.nav-link-compact strong{
  font-size:12px;
  line-height:1.35;
}
@media (max-width:980px){
  .header-nav{width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch;}
  .nav-link.nav-link-compact{max-width:none; min-width:0;}
}
@media (max-width:720px){
  .header-nav{grid-template-columns:1fr 1fr;}
  .title-main{font-size:clamp(28px, 8.5vw, 38px); padding:9px 14px 11px;}
}


/* v7.3.2 FIX: title decoration must survive old JS cleanup + compact nav */
.header h1 .title-main{
  position:relative!important;
  display:inline-block!important;
  padding:10px 18px 12px!important;
  border-radius:22px!important;
  font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif!important;
  font-size:clamp(31px, 4.4vw, 48px)!important;
  font-weight:1000!important;
  line-height:1.06!important;
  letter-spacing:.02em!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.74)),
    linear-gradient(135deg,#ff5fa8 0%, #8b75ff 44%, #43cfff 76%, #ffc266 100%)!important;
  -webkit-background-clip:padding-box, text!important;
  background-clip:padding-box, text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  border:1px solid rgba(255,255,255,.92)!important;
  box-shadow:
    0 16px 36px rgba(148,108,188,.20),
    inset 0 1px 0 rgba(255,255,255,.86)!important;
  text-shadow:0 2px 0 rgba(255,255,255,.92), 0 0 20px rgba(255,130,190,.20)!important;
}
.header h1 .title-main::before,
.header h1 .title-main::after{
  position:absolute!important;
  font-size:17px!important;
  line-height:1!important;
  filter:drop-shadow(0 4px 10px rgba(255,150,195,.30))!important;
}
.header h1 .title-main::before{
  content:"✦"!important;
  top:-8px!important;
  left:-6px!important;
  color:#ff74b5!important;
  -webkit-text-fill-color:#ff74b5!important;
}
.header h1 .title-main::after{
  content:"✦"!important;
  right:-4px!important;
  bottom:-6px!important;
  color:#62d6ff!important;
  -webkit-text-fill-color:#62d6ff!important;
}
.header-nav{
  width:auto!important;
  min-width:0!important;
  grid-template-columns:repeat(2,minmax(0,max-content))!important;
  justify-content:end!important;
  gap:8px!important;
}
.nav-link.current{display:none!important;}
.nav-link.nav-link-compact{
  min-width:104px!important;
  max-width:136px!important;
  padding:9px 11px!important;
  border-radius:15px!important;
  box-shadow:0 8px 18px rgba(81,60,109,.07)!important;
}
.nav-link.nav-link-compact .nav-link-label{
  margin-bottom:2px!important;
  font-size:10px!important;
}
.nav-link.nav-link-compact strong{
  font-size:12px!important;
  line-height:1.25!important;
}
@media (max-width:980px){
  .header-nav{width:100%!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; justify-content:stretch!important;}
  .nav-link.nav-link-compact{max-width:none!important; min-width:0!important;}
}
@media (max-width:720px){
  .header-nav{grid-template-columns:1fr 1fr!important;}
  .header h1 .title-main{font-size:clamp(28px, 8.5vw, 38px)!important; padding:9px 14px 11px!important;}
}


/* v7.3.3 title visibility + actions in left card */
.header{
  display:block!important;
}
.header-main.header-main--full{
  width:100%;
  max-width:none;
}
.hero-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}
.hero-copy{
  min-width:0;
  flex:1 1 auto;
}
.header h1{
  margin:0;
}
.header h1 .title-main{
  display:inline-block!important;
  position:relative!important;
  padding:10px 18px 12px!important;
  border-radius:22px!important;
  font-family:"Arial Rounded MT Bold","Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif!important;
  font-size:clamp(31px, 4.4vw, 48px)!important;
  font-weight:1000!important;
  line-height:1.06!important;
  letter-spacing:.02em!important;
  color:#51366f!important;
  -webkit-text-fill-color:#51366f!important;
  background:linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,247,252,.93))!important;
  border:1px solid rgba(255,255,255,.96)!important;
  box-shadow:
    0 14px 28px rgba(148,108,188,.12),
    0 0 0 4px rgba(255,128,188,.10),
    inset 0 1px 0 rgba(255,255,255,.9)!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.75),
    2px 2px 0 rgba(255,160,205,.22)!important;
}
.header h1 .title-main::before,
.header h1 .title-main::after{
  position:absolute!important;
  font-size:16px!important;
  line-height:1!important;
}
.header h1 .title-main::before{
  content:"✦"!important;
  top:-9px!important;
  left:-6px!important;
  color:#ff77b7!important;
  -webkit-text-fill-color:#ff77b7!important;
  text-shadow:0 3px 10px rgba(255,119,183,.25)!important;
}
.header h1 .title-main::after{
  content:"✦"!important;
  right:-6px!important;
  bottom:-8px!important;
  color:#74d8ff!important;
  -webkit-text-fill-color:#74d8ff!important;
  text-shadow:0 3px 10px rgba(116,216,255,.25)!important;
}
.title-accent,
.header-nav,
.nav-link,
.nav-link-label{display:none!important;}
.hero-subtitle{
  margin:12px 0 0!important;
  max-width:760px;
}
.hero-actions{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  align-items:center;
}
.hero-action-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  padding:9px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,244,255,.93));
  border:1px solid rgba(207,191,222,.9);
  color:#7f6688;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(81,60,109,.07);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.hero-action-link:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(81,60,109,.11);
  border-color:#d8bfd8;
}
@media (max-width:900px){
  .hero-row{flex-direction:column; align-items:stretch;}
  .hero-actions{justify-content:flex-start;}
}
@media (max-width:560px){
  .hero-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-action-link{width:100%; min-width:0;}
  .header h1 .title-main{font-size:clamp(27px,8vw,36px)!important; padding:9px 14px 11px!important;}
}


/* v7.4.1 mobile Pro reflection FIX
   目的:
   - スマホ時、プレビューを確実に常時表示する
   - sticky が overflow 系定義に負ける問題を避けるため fixed 方式に変更
   - 横ブレ対策は要素幅の締めで行い、main/app をスクロールコンテナ化しない
*/
@media (max-width:980px){
  :root{
    --tm-mobile-stage: min(54vw, 38svh, 360px);
    --tm-mobile-preview-space: calc(var(--tm-mobile-stage) + 86px);
  }

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:clip!important;
  }

  body{
    padding-top:var(--tm-mobile-preview-space)!important;
    overscroll-behavior-x:none;
  }

  .app,
  .header,
  .header-main,
  .hero-row,
  .hero-copy,
  .main,
  .preview-card,
  .panel,
  .block,
  .block-body,
  .upload-box,
  .plan-cards,
  .set-cards,
  .subtitle-chips,
  .color-row{
    min-width:0!important;
    max-width:100%!important;
  }

  canvas,
  img,
  video,
  svg{
    max-width:100%!important;
  }

  .main{
    display:block!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    padding:8px 12px 24px!important;
    overflow:visible!important;
  }

  .preview-card{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:9999!important;
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    padding:8px 10px 9px!important;
    border-top:0!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0 0 22px 22px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 12px 28px rgba(55,29,54,.16)!important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }

  .preview-top{
    margin:0 0 7px!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .preview-top strong{
    display:block!important;
    font-size:14px!important;
    line-height:1.25!important;
  }

  .stage-shell{
    width:var(--tm-mobile-stage)!important;
    height:var(--tm-mobile-stage)!important;
    max-width:100%!important;
    max-height:360px!important;
    margin:0 auto!important;
    border-radius:18px!important;
  }

  .preview-canvas{
    width:100%!important;
    height:100%!important;
  }

  .color-row{
    gap:8px!important;
    margin:8px 0 0!important;
    flex-wrap:wrap!important;
    max-height:38px!important;
    overflow:hidden!important;
  }

  .color-dot{
    width:28px!important;
    height:28px!important;
    border-width:3px!important;
    flex:0 0 auto!important;
  }

  .preview-card .note{
    display:none!important;
  }

  .panel{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    overflow-x:clip!important;
  }

  .block{
    grid-template-columns:30px minmax(0,1fr)!important;
    width:100%!important;
  }

  .block-body,
  .block-body > *,
  .upload-box,
  .plan-card,
  .set-card,
  .subtitle-chip,
  .primary,
  input[type="range"],
  input[type="file"]{
    max-width:100%!important;
  }

  input[type="range"]{
    display:block!important;
    width:100%!important;
  }

  input[type="file"]{
    display:block!important;
    width:100%!important;
    font-size:13px!important;
  }

  .plan-cards,
  .set-cards{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .set-card{
    grid-template-columns:38px minmax(0,1fr)!important;
  }

  .set-card span,
  .plan-card,
  .set-card,
  .subtitle-chip{
    overflow-wrap:anywhere!important;
  }
}

@media (max-width:720px){
  :root{
    --tm-mobile-stage: min(60vw, 36svh, 320px);
    --tm-mobile-preview-space: calc(var(--tm-mobile-stage) + 82px);
  }

  .header{
    padding:12px 10px 8px!important;
  }

  .header-main{
    padding:16px 14px!important;
    border-radius:22px!important;
  }

  .main{
    padding:6px 10px 22px!important;
  }

  .panel{
    padding:10px!important;
    border-radius:20px!important;
  }

  .block{
    gap:8px!important;
    padding:11px 0!important;
  }

  .step{
    width:26px!important;
    height:26px!important;
    font-size:13px!important;
  }

  .block h2{
    font-size:14px!important;
    margin-bottom:8px!important;
  }

  .plan-cards,
  .set-cards{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .plan-card,
  .set-card{
    min-height:0!important;
    padding:10px!important;
    border-radius:15px!important;
  }

  .subtitle-chips{
    gap:7px!important;
  }

  .subtitle-chip{
    padding:8px 10px!important;
    border-radius:14px!important;
    font-size:13px!important;
  }
}

@media (max-width:420px){
  :root{
    --tm-mobile-stage: min(66vw, 34svh, 292px);
    --tm-mobile-preview-space: calc(var(--tm-mobile-stage) + 80px);
  }

  .main{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .color-dot{
    width:27px!important;
    height:27px!important;
  }
}


/* v7.4.2 free title logo image
   目的:
   - 無料版の見出しを生成タイトル画像に差し替え
   - 既存の .title-main 装飾定義の影響を受けない専用クラスで管理
   - スマホ固定プレビュー時もヘッダーが横ブレしないよう幅を締める
*/
.title-logo-heading{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  line-height:0!important;
}

.title-logo-image{
  display:block!important;
  width:min(100%, 900px)!important;
  max-width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 14px 26px rgba(126,86,156,.18))!important;
}

@media (min-width:981px){
  .title-logo-image{
    max-height:160px!important;
  }
}

@media (max-width:980px){
  .hero-row,
  .hero-copy,
  .title-logo-heading{
    width:100%!important;
    min-width:0!important;
  }

  .title-logo-image{
    width:min(100%, 760px)!important;
    max-height:132px!important;
  }
}

@media (max-width:720px){
  .title-logo-image{
    width:100%!important;
    max-height:96px!important;
  }

  .hero-row{
    align-items:flex-start!important;
  }
}

@media (max-width:420px){
  .title-logo-image{
    max-height:82px!important;
  }
}


/* v7.4.3 title area cleanup
   - タイトル部分のカード/枠/背景を撤去
   - 説明文を使用しない前提の余白調整
   - 透過タイトル画像を素直に見せる */
.header{
  padding:16px 22px 8px!important;
}

.header-main.header-main--plain{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.hero-row{
  align-items:center!important;
}

.hero-copy{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
}

.title-logo-heading{
  margin:0!important;
}

.title-logo-image{
  background:transparent!important;
  mix-blend-mode:normal!important;
}

.hero-subtitle{
  display:none!important;
}

@media (min-width:981px){
  .title-logo-image{
    max-height:138px!important;
  }
}

@media (max-width:980px){
  .header{
    padding:12px 12px 6px!important;
  }

  .header-main.header-main--plain{
    padding:0!important;
  }

  .hero-row{
    align-items:flex-start!important;
  }
}


/* =========================================================
   Free v7.4.4: Pro-like title-only hero
   - Pro版と同じ hero / hero-topline / hero-logo-title 構造に合わせる
   - タイトル画像をカード内ではなく、ヘッダー直下の主役ロゴとして表示
   - 背景・枠・カード感を撤去
   ========================================================= */
.app{
  max-width:1440px!important;
  margin:0 auto!important;
}

.header,
.header-main,
.header-main--full,
.header-main--plain,
.hero-row,
.hero-copy,
.title-logo-heading,
.title-logo-image,
.brand-chip,
.hero-actions,
.hero-action-link{
  /* 旧無料版ヘッダー定義が残っていても、v744の .hero 系を正本にする */
}

.hero.free-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 132px!important;
  grid-template-areas:
    "brand nav"
    "logo nav"!important;
  align-items:center!important;
  gap:10px 16px!important;
  padding:14px 22px 10px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.hero.free-hero .hero-topline{
  display:contents!important;
}

.hero.free-hero .brand{
  grid-area:brand!important;
  justify-self:start!important;
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:max-content!important;
  margin:0!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(228,176,203,.72)!important;
  color:#b05c87!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
  box-shadow:none!important;
}

.hero.free-hero .hero-nav{
  grid-area:nav!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  align-content:center!important;
  justify-self:end!important;
  width:132px!important;
  min-width:132px!important;
}

.hero.free-hero .hero-nav a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:8px 10px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(207,191,222,.86)!important;
  box-shadow:none!important;
  color:#7f6688!important;
  text-decoration:none!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.2!important;
}

.hero.free-hero .hero-logo-title{
  grid-area:logo!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:980px!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:0!important;
  line-height:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.hero.free-hero .hero-logo-title img{
  display:block!important;
  width:min(100%, 860px)!important;
  max-width:100%!important;
  max-height:132px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:scaleX(1.10)!important;
  transform-origin:center center!important;
  filter:drop-shadow(0 12px 22px rgba(139,117,255,.16))!important;
  background:transparent!important;
  mix-blend-mode:normal!important;
}

.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* 旧ヘッダー説明文は完全に使わない */
.hero-subtitle{
  display:none!important;
}

@media (max-width:980px){
  .hero.free-hero{
    grid-template-columns:minmax(0,1fr) 118px!important;
    gap:8px 12px!important;
    padding:12px 14px 8px!important;
  }

  .hero.free-hero .hero-nav{
    width:118px!important;
    min-width:118px!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:min(100%, 760px)!important;
    max-height:116px!important;
    transform:scaleX(1.06)!important;
  }
}

@media (max-width:560px){
  .hero.free-hero{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "brand"
      "logo"
      "nav"!important;
    padding:10px 10px 6px!important;
  }

  .hero.free-hero .brand{
    justify-self:start!important;
  }

  .hero.free-hero .hero-logo-title{
    max-width:100%!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:100%!important;
    max-height:92px!important;
    transform:scaleX(1.03)!important;
  }

  .hero.free-hero .hero-nav{
    justify-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
}


/* =========================================================
   Free v7.4.5: wider logo balance refinement
   - ロゴを無理に大きく引き伸ばすのではなく、ヘッダー内で使える横幅自体を広げる
   - 右ナビの下にもロゴが伸びるように、ロゴ行を全幅スパンに変更
   - その上で scaleX は軽めに上乗せし、違和感を抑えて横長感を出す
   ========================================================= */
.hero.free-hero{
  grid-template-columns:auto minmax(0,1fr) 132px!important;
  grid-template-areas:
    "brand . nav"
    "logo logo logo"!important;
  gap:10px 16px!important;
  align-items:start!important;
}

.hero.free-hero .hero-logo-title{
  max-width:1160px!important;
  justify-self:center!important;
  width:100%!important;
}

.hero.free-hero .hero-logo-title img{
  width:min(100%, 1040px)!important;
  max-height:144px!important;
  transform:scaleX(1.12)!important;
  transform-origin:center center!important;
}

@media (max-width:980px){
  .hero.free-hero{
    grid-template-columns:auto minmax(0,1fr) 118px!important;
    grid-template-areas:
      "brand . nav"
      "logo logo logo"!important;
    gap:8px 12px!important;
  }

  .hero.free-hero .hero-logo-title{
    max-width:1000px!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:min(100%, 900px)!important;
    max-height:126px!important;
    transform:scaleX(1.08)!important;
  }
}

@media (max-width:560px){
  .hero.free-hero{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "brand"
      "logo"
      "nav"!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:100%!important;
    max-height:96px!important;
    transform:scaleX(1.04)!important;
  }
}


/* =========================================================
   Free v7.4.6: logo left align + same-line balance
   - ロゴを中央配置ではなく左寄せへ変更
   - PCでは brand / logo / nav を同じライン帯に置いて、上部の空白感を解消
   - 画像の不自然な引き伸ばしは避け、配置で違和感を解消する
   ========================================================= */
@media (min-width:981px){
  .hero.free-hero{
    grid-template-columns:auto minmax(0,1fr) 132px!important;
    grid-template-areas:"brand logo nav"!important;
    align-items:start!important;
    gap:0 18px!important;
    padding:8px 22px 6px!important;
  }

  .hero.free-hero .brand{
    align-self:start!important;
    margin-top:2px!important;
  }

  .hero.free-hero .hero-logo-title{
    justify-self:start!important;
    align-self:start!important;
    display:flex!important;
    justify-content:flex-start!important;
    max-width:980px!important;
    width:100%!important;
    margin:0!important;
    padding-top:0!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:min(100%, 920px)!important;
    max-height:110px!important;
    transform:none!important;
    object-position:left center!important;
    filter:drop-shadow(0 10px 18px rgba(139,117,255,.14))!important;
  }

  .hero.free-hero .hero-nav{
    align-self:start!important;
    margin-top:0!important;
  }
}

@media (max-width:980px){
  .hero.free-hero{
    grid-template-columns:auto minmax(0,1fr) 118px!important;
    grid-template-areas:"brand logo nav"!important;
    align-items:start!important;
    gap:0 12px!important;
    padding:8px 14px 6px!important;
  }

  .hero.free-hero .hero-logo-title{
    justify-self:start!important;
    justify-content:flex-start!important;
    max-width:100%!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:min(100%, 760px)!important;
    max-height:92px!important;
    transform:none!important;
    object-position:left center!important;
  }
}

@media (max-width:680px){
  .hero.free-hero{
    grid-template-columns:minmax(0,1fr) 118px!important;
    grid-template-areas:
      "brand nav"
      "logo logo"!important;
    gap:8px 12px!important;
  }

  .hero.free-hero .hero-logo-title{
    margin-top:2px!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:min(100%, 700px)!important;
    max-height:88px!important;
  }
}

@media (max-width:560px){
  .hero.free-hero{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "brand"
      "logo"
      "nav"!important;
    gap:8px!important;
    padding:10px 10px 6px!important;
  }

  .hero.free-hero .hero-logo-title{
    justify-self:start!important;
    justify-content:flex-start!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:100%!important;
    max-height:86px!important;
  }
}


/* =========================================================
   Free v7.4.7: restore horizontal stretch + shift logo further left
   - v746でやめた軽い横伸ばしを復活
   - 中央寄りではなく、brandの少し右から始まる左寄せ感を強める
   - 右ナビとの距離を少しだけ詰めつつ、ロゴの見せ場を増やす
   ========================================================= */
@media (min-width:981px){
  .hero.free-hero{
    grid-template-columns:auto minmax(0,1fr) 124px!important;
    gap:0 14px!important;
    padding:6px 18px 5px!important;
  }

  .hero.free-hero .hero-logo-title{
    max-width:1040px!important;
    margin-left:-10px!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:min(100%, 980px)!important;
    max-height:112px!important;
    transform:scaleX(1.08)!important;
    transform-origin:left center!important;
    object-position:left center!important;
  }

  .hero.free-hero .hero-nav{
    width:124px!important;
    min-width:124px!important;
  }
}

@media (max-width:980px){
  .hero.free-hero{
    grid-template-columns:auto minmax(0,1fr) 114px!important;
    gap:0 10px!important;
    padding:7px 12px 5px!important;
  }

  .hero.free-hero .hero-logo-title{
    margin-left:-6px!important;
  }

  .hero.free-hero .hero-logo-title img{
    width:min(100%, 800px)!important;
    max-height:94px!important;
    transform:scaleX(1.05)!important;
    transform-origin:left center!important;
  }

  .hero.free-hero .hero-nav{
    width:114px!important;
    min-width:114px!important;
  }
}

@media (max-width:680px){
  .hero.free-hero .hero-logo-title{
    margin-left:0!important;
  }

  .hero.free-hero .hero-logo-title img{
    transform:scaleX(1.03)!important;
  }
}

@media (max-width:560px){
  .hero.free-hero .hero-logo-title img{
    transform:none!important;
    max-height:86px!important;
  }
}