/* Official One Step Studio logo — shared across the product site. */
body:not(.sanctuary-page) .brand{
  position:relative;
  display:block;
  box-sizing:border-box;
  width:238px;
  height:45px;
  min-width:238px;
  flex:none;
  border:1px solid rgba(255,255,255,.88);
  border-radius:13px;
  background-color:#fff;
  background-image:url("../assets/onestep-logo-horizontal.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:calc(100% - 16px) auto;
  box-shadow:0 9px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.96);
}

body:not(.sanctuary-page) .brand .brand-mark{
  display:none!important;
}

body:not(.sanctuary-page) .brand .brand-name{
  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;
}

body:not(.sanctuary-page) .footer-brand .brand{
  width:270px;
  height:52px;
  min-width:270px;
}

@media(max-width:1180px){
  body:not(.sanctuary-page) .site-header .brand,
  body:not(.sanctuary-page)>header .brand{
    width:210px;
    height:40px;
    min-width:210px;
  }
}

@media(max-width:620px){
  body:not(.sanctuary-page) .site-header .brand,
  body:not(.sanctuary-page)>header .brand{
    width:186px;
    height:36px;
    min-width:0;
    max-width:186px;
    flex:0 1 186px;
  }
  body:not(.sanctuary-page) .footer-brand .brand{
    width:230px;
    height:45px;
    min-width:230px;
  }
}

/* Shared CTA design system -------------------------------------------------
   Keep every conversion action visually consistent across the LP suite. */
:root{
  --onestep-cta-gradient:linear-gradient(135deg,#5a70f4 0%,#795be7 52%,#3f8cf7 100%);
  --onestep-cta-gradient-hover:linear-gradient(135deg,#687dff 0%,#8a64f2 52%,#4b98ff 100%);
  --onestep-cta-shadow:0 16px 36px rgba(57,76,190,.30),inset 0 1px 0 rgba(255,255,255,.30);
  --onestep-cta-shadow-hover:0 21px 46px rgba(57,76,190,.40),inset 0 1px 0 rgba(255,255,255,.36);
}

/* Hero CTA motion — a calm, continuous color sweep inspired by the
   reference CTA, translated into One Step Studio's blue/violet palette. */
@keyframes onestepHeroCtaFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

.btn,
#hero.hero-10min .hero-app-cta,
#hero.hero-10min .hero-document-cta{
  box-sizing:border-box;
  min-height:56px;
  padding:13px 22px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:16px;
  font-family:'Noto Sans JP','Outfit',sans-serif;
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.35;
  text-align:center;
  box-shadow:var(--onestep-cta-shadow);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,border-color .22s ease,background .22s ease;
}

.btn-line,
.btn-primary,
html.liquid-glass .btn-line,
html.liquid-glass .btn-primary,
#hero.hero-10min .hero-app-cta,
#hero.hero-10min .hero-document-cta{
  color:#fff;
  border-color:rgba(255,255,255,.44);
  background:var(--onestep-cta-gradient);
  background-size:180% 180%;
  box-shadow:var(--onestep-cta-shadow);
}

.btn-line:hover,
.btn-primary:hover,
html.liquid-glass .btn-line:hover,
html.liquid-glass .btn-primary:hover,
#hero.hero-10min .hero-app-cta:hover,
#hero.hero-10min .hero-document-cta:hover{
  color:#fff;
  border-color:rgba(255,255,255,.64);
  background:var(--onestep-cta-gradient-hover);
  background-size:180% 180%;
  box-shadow:var(--onestep-cta-shadow-hover);
  filter:saturate(1.06) brightness(1.04);
  transform:translateY(-3px);
}

.btn-ghost,
html.liquid-glass .btn-ghost{
  color:#edf2ff;
  border-color:rgba(143,163,224,.34);
  background:linear-gradient(145deg,rgba(21,33,68,.94),rgba(10,18,43,.96));
  box-shadow:0 13px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
}

.btn-ghost:hover,
html.liquid-glass .btn-ghost:hover{
  color:#fff;
  border-color:rgba(132,155,255,.72);
  background:linear-gradient(145deg,rgba(34,50,96,.97),rgba(17,27,61,.98));
  box-shadow:0 18px 38px rgba(0,0,0,.30),0 0 0 1px rgba(105,128,255,.14);
  transform:translateY(-3px);
}

.btn-lg{
  min-height:64px;
  padding:16px 28px;
  font-size:16px;
}

.btn-sm,
.header-cta{
  min-height:46px;
  padding:10px 17px;
  border-radius:14px;
  font-size:13px;
}

.btn-block{width:100%}
.btn svg{flex:none;width:22px;height:22px}
.btn:hover svg{transform:translateX(2px)}
.btn:focus-visible,
#hero.hero-10min .hero-app-cta:focus-visible,
#hero.hero-10min .hero-document-cta:focus-visible{
  outline:3px solid rgba(132,166,255,.72);
  outline-offset:4px;
}

#hero.hero-10min .hero-app-cta,
#hero.hero-10min .hero-document-cta{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:13px;
  min-height:76px;
  padding:13px 16px;
  border-radius:18px;
  overflow:hidden;
  background-size:280% 280%;
  animation:onestepHeroCtaFlow 7s ease-in-out infinite;
  will-change:background-position;
}

#hero.hero-10min .hero-app-cta,
#hero.hero-10min .hero-app-cta:hover{
  background-image:linear-gradient(115deg,#6557f5 0%,#a24fe7 26%,#3f91ff 54%,#35d1f2 76%,#6557f5 100%);
  background-size:280% 280%;
}

#hero.hero-10min .hero-document-cta,
#hero.hero-10min .hero-document-cta:hover{
  background-image:linear-gradient(115deg,#2573f4 0%,#3dc9f2 27%,#6970f5 55%,#9859ea 78%,#2573f4 100%);
  background-size:280% 280%;
}

#hero.hero-10min .hero-document-cta{
  animation-delay:-2.1s;
}

#hero.hero-10min .hero-app-cta:hover,
#hero.hero-10min .hero-document-cta:hover{
  animation-duration:3.2s;
}

#hero.hero-10min .hero-app-cta:hover>i,
#hero.hero-10min .hero-document-cta:hover>i{
  transform:translateX(4px);
}

#hero.hero-10min .hero-cta-icon{
  display:grid;
  flex:none;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:13px;
  color:#fff;
  background:rgba(8,17,45,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}

#hero.hero-10min .hero-app-cta i,
#hero.hero-10min .hero-document-cta i{
  font-family:'Outfit',sans-serif;
  font-size:28px;
  font-style:normal;
  line-height:1;
  transition:transform .22s ease;
}

@media(prefers-reduced-motion:reduce){
  #hero.hero-10min .hero-app-cta,
  #hero.hero-10min .hero-document-cta{
    animation:none;
    background-position:50% 50%;
  }
}

@media(max-width:620px){
  .btn{
    min-height:52px;
    padding:12px 17px;
    border-radius:15px;
    font-size:13px;
  }
  .btn-lg{min-height:58px;padding:14px 19px;font-size:14px}
  .btn-sm,.header-cta{min-height:44px;padding:9px 14px;border-radius:13px;font-size:12px}
  #hero.hero-10min .hero-app-cta,
  #hero.hero-10min .hero-document-cta{min-height:68px;border-radius:16px}
  #hero.hero-10min .hero-cta-icon{width:40px;height:40px;border-radius:12px}
}

/* 狭い画面ではロゴを縮めて、SNSアイコンとメニューボタンの居場所を確保する */
@media(max-width:430px){
  body:not(.sanctuary-page) .site-header .brand,
  body:not(.sanctuary-page)>header .brand{width:152px;max-width:152px;height:32px;flex:0 1 152px}
}
@media(max-width:360px){
  body:not(.sanctuary-page) .site-header .brand,
  body:not(.sanctuary-page)>header .brand{width:132px;max-width:132px;height:30px;flex:0 1 132px}
}