@charset "UTF-8";

:root{
  --affiliate-navy:#171717;
  --affiliate-blue:#e60012;
  --affiliate-line:#ececec;
  --affiliate-soft:#fff7f7;
  --affiliate-serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --affiliate-sans:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  --affiliate-mobile-header-space:72px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  color:var(--affiliate-navy);
  background:#fff;
  font-family:var(--affiliate-sans);
}

img{display:block;max-width:100%;}

.affiliate-page{
  width:100%;
  overflow:hidden;
  background:#fff;
}

.affiliate-inner{
  width:min(calc(100% - 24px),1512px);
  margin-inline:auto;
}

.affiliate-section{
  padding:8px 0;
}

.affiliate-panel{
  border:1px solid var(--affiliate-line);
  border-radius:16px;
  background:rgba(255,255,255,.98);
}

.affiliate-section-title,
.affiliate-panel-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0;
  color:var(--affiliate-navy);
  font-family:var(--affiliate-serif);
  font-weight:600;
  letter-spacing:.08em;
  text-align:center;
}

.affiliate-section-title{
  font-size:clamp(25px,2.1vw,34px);
}
.affiliate-panel-title{
  font-size:clamp(22px,1.75vw,30px);
}

.affiliate-section-title::before,
.affiliate-section-title::after,
.affiliate-panel-title::before,
.affiliate-panel-title::after{
  content:"";
  width:40px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--affiliate-blue));
}

.affiliate-section-title::after,
.affiliate-panel-title::after{
  background:linear-gradient(90deg,var(--affiliate-blue),transparent);
}
.affiliate-hero{
  position:relative;
  min-height:650px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 34%,rgba(255,255,255,.65) 52%,rgba(255,255,255,0) 70%),
    radial-gradient(circle at 78% 54%,rgba(230,0,18,.10),transparent 36%),
    #fff;
}

.affiliate-hero__inner{
  position:relative;
  width:min(calc(100% - 104px),1420px);
  min-height:650px;
  margin-inline:auto;
  display:flex;
  align-items:center;
}

.affiliate-hero__content{
  position:relative;
  z-index:3;
  width:49%;
  padding-bottom:8px;
}

.affiliate-brand-logo{
  display:block;
  width:min(360px,72%);
  height:auto;
  margin:0 0 58px;
  object-fit:contain;
  object-position:left center;
  mix-blend-mode:normal;
}

.affiliate-kicker{
  margin:0 0 12px;
  color:#d60012;
  font-family:var(--affiliate-serif);
  font-size:clamp(16px,1.25vw,22px);
  letter-spacing:.13em;
}

.affiliate-hero h1{
  margin:0;
  font-family:var(--affiliate-serif);
  font-size:clamp(58px,5vw,78px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:.04em;
  white-space:nowrap;
}

.affiliate-hero__lead{
  margin:34px 0 0;
  font-family:var(--affiliate-serif);
  font-size:clamp(25px,2vw,34px);
  line-height:1.65;
  letter-spacing:.04em;
  white-space:nowrap;
}

.affiliate-hero__text{
  margin:30px 0 0;
  font-family:var(--affiliate-serif);
  font-size:clamp(15px,1.2vw,20px);
  line-height:2;
  letter-spacing:.04em;
}

.affiliate-hero__cta{
  width:min(100%,360px);
  min-height:58px;
  margin-top:24px;
  padding:12px 24px 12px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(100deg,#b8000f 0%,#ef1b2d 100%);
  box-shadow:0 10px 22px rgba(184,0,15,.20);
  font-family:var(--affiliate-sans);
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}

.affiliate-hero__cta:hover,
.affiliate-hero__cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(184,0,15,.27);
}

.affiliate-hero__cta-arrow{
  flex:0 0 auto;
  font-size:22px;
  line-height:1;
}

.affiliate-mid-cta{
  padding:22px 0 26px;
  text-align:center;
}

.affiliate-mid-cta a{
  width:min(100%,520px);
  min-height:62px;
  margin:0 auto;
  padding:12px 26px 12px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(100deg,#b8000f 0%,#ef1b2d 100%);
  box-shadow:0 12px 26px rgba(184,0,15,.20);
  font-size:17px;
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
}

.affiliate-mid-cta strong{
  font-size:23px;
  line-height:1;
}

@media screen and (max-width:767px){
  .affiliate-mid-cta{
    padding:16px 12px 20px;
  }

  .affiliate-mid-cta a{
    min-height:54px;
    padding:11px 20px 11px 24px;
    font-size:14px;
  }
}

.affiliate-hero__visual{
  position:absolute;
  top:8px;
  right:-80px;
  bottom:0;
  z-index:1;
  width:min(56vw,820px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  pointer-events:none;
  -webkit-mask-image:none;
  mask-image:none;
  background:transparent;
}

.affiliate-hero__visual img{
  width:100%;
  max-height:640px;
  object-fit:contain;
  object-position:right center;
  background:transparent;
}

.affiliate-hero-benefits{display:none;}
.affiliate-problems{
  padding-top:34px;padding-bottom:48px;
}

.affiliate-problems .affiliate-section-title{
  margin-bottom:38px;
}

.affiliate-problem-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
}

.affiliate-problem-grid article{
  min-width:0;
  padding:4px 22px 12px;
  text-align:center;
  border-right:1px solid var(--affiliate-line);
}

.affiliate-problem-grid article:last-child{
  border-right:none;
}

.affiliate-problem-grid img{
  width:120px;
  margin:0 auto 18px;
}

.affiliate-problem-grid h3{
  margin:0;
  font-family:var(--affiliate-serif);
  font-size:clamp(16px,1.25vw,21px);
  line-height:1.7;
  font-weight:600;
}

.affiliate-problem-grid p{
  display:none;
}
.affiliate-overview__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.affiliate-comparison{
  padding:14px 18px 18px;
}

.affiliate-comparison .affiliate-panel-title{
  margin-bottom:20px;
}

.affiliate-comparison__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
  align-items:center;
  gap:14px;
}

.affiliate-compare-card{
  min-width:0;
}

.affiliate-compare-card img{
  width:100%;
  aspect-ratio:1.55/1;
  object-fit:cover;
  border-radius:10px;
}

.affiliate-compare-card ul{
  margin:10px 0 0;
  padding:0;
  list-style:none;
}

.affiliate-compare-card li{
  position:relative;
  margin-top:6px;
  padding-left:25px;
  font-family:var(--affiliate-serif);
  font-size:clamp(13px,1vw,17px);
  line-height:1.55;
}

.affiliate-compare-card li::before{
  position:absolute;
  top:0;
  left:2px;
  color:var(--affiliate-blue);
  font-family:var(--affiliate-sans);
  font-weight:700;
}

.affiliate-compare-card--before li::before{
  content:"×";
}

.affiliate-compare-card--after li::before{
  content:"✓";
}

.affiliate-comparison__arrow{
  color:var(--affiliate-blue);
  font-size:58px;
  line-height:1;
  text-align:center;
}
.affiliate-flow__panel{
  padding:8px 28px 14px;
}

.affiliate-flow__panel .affiliate-panel-title{
  margin-bottom:8px;
}

.affiliate-flow__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr);
  align-items:end;
  gap:8px;
}

.affiliate-flow-step{
  min-width:0;text-align:center;
}

.affiliate-flow-step h3{
  margin:0 0 8px;
  font-family:var(--affiliate-serif);
  font-size:clamp(15px,1.15vw,20px);
  font-weight:600;
}

.affiliate-flow-step img{
  width:100%;
  aspect-ratio:1.72/1;
  object-fit:cover;
  border-radius:9px;
  border:1px solid var(--affiliate-line);
}

.affiliate-flow-arrow{
  align-self:center;
  color: #000;
  font-size:46px;
  text-align:center;
  line-height:1;
}
.affiliate-strengths__panel{
  padding:8px 20px 14px;
}

.affiliate-strengths__panel .affiliate-panel-title{
  margin-bottom:8px;
}

.affiliate-strength-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
}

.affiliate-strength-grid article{
  min-width:0;
  padding:6px 18px 12px;
  text-align:center;
  border-right:1px solid var(--affiliate-line);
}

.affiliate-strength-grid article:last-child{
  border-right:none;
}

.affiliate-strength-grid img{
  width:120px;
  margin:0 auto 6px;
}

.affiliate-strength-grid h3{
  margin:0;
  font-family:var(--affiliate-serif);
  font-size:clamp(14px,1.05vw,18px);
  line-height:1.55;
  font-weight:600;
}
.affiliate-cta{
  padding-bottom:14px;
}

.affiliate-cta__box{
  padding:10px 24px 12px;
  border:1px solid var(--affiliate-line);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,241,243,.96)),
    radial-gradient(circle at 50% 110%,rgba(230,0,18,.11),transparent 54%);
  text-align:center;
}

.affiliate-cta h2{
  margin:0 0 10px;
  font-family:var(--affiliate-serif);
  font-size:clamp(24px,1.9vw,34px);
  font-weight:500;
  line-height:1.55;
  letter-spacing:.05em;
}

.affiliate-cta a{
  width:min(100%,820px);
  min-height:68px;
  margin:0 auto;
  padding:10px 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(100deg,#b8000f 0%,#ef1b2d 100%);
  box-shadow:0 12px 26px rgba(184,0,15,.20);
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}

.affiliate-cta a:hover,
.affiliate-cta a:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(184,0,15,.26);
}

.affiliate-cta a img{
  width:40px;flex:0 0 40px;
}

.affiliate-cta a span{
  font-family:var(--affiliate-serif);
  font-size:clamp(20px,1.65vw,29px);
  letter-spacing:.05em;
}


.affiliate-mobile-break{
  display:none;
}
@media screen and (min-width:768px) and (max-width:1100px){
  .affiliate-hero{
    min-height:560px;
  }

  .affiliate-hero__inner{
    min-height:560px;width:min(calc(100% - 60px),1020px);
  }

  .affiliate-hero__content{
    width:52%;
  }

  .affiliate-kicker{
    margin-bottom:36px;
  }
  .affiliate-hero__visual{
    width:57vw;
    right:-40px;
  }

  .affiliate-problem-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px;
  }

  .affiliate-problem-grid article:nth-child(3n){
    border-right:none;
  }

  .affiliate-problem-grid article:nth-child(4){
    border-left:0;
  }

  .affiliate-overview__grid{
    grid-template-columns:1fr;
  }

  .affiliate-strength-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px;
  }

  .affiliate-strength-grid article:nth-child(3n){
    border-right:none;
  }
}
@media screen and (max-width:767px){
  .affiliate-hero__lead{
    white-space:normal;
  }
  .affiliate-brand-logo{
    width:min(280px,78vw);
    margin:0 auto 28px;
  }
  .affiliate-page{
    padding-top:var(--affiliate-mobile-header-space);
  }

  .affiliate-inner{
    width:min(calc(100% - 24px),720px);
  }

  .affiliate-section{
    padding:6px 0;
  }

  .affiliate-panel{
    border-radius:13px;
  }

  .affiliate-section-title,
  .affiliate-panel-title{
    gap:12px;letter-spacing:.05em;
  }

  .affiliate-section-title{
    font-size:20px;
  }

  .affiliate-panel-title{
    font-size:20px;
  }

  .affiliate-section-title::before,
  .affiliate-section-title::after,
  .affiliate-panel-title::before,
  .affiliate-panel-title::after{
    width:24px;
  }

  .affiliate-hero{
    min-height:460px;
    background:
      linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 46%,rgba(255,255,255,.22) 72%,rgba(255,255,255,0) 100%),
      radial-gradient(circle at 74% 56%,rgba(230,0,18,.10),transparent 39%),
      #fff;
  }

  .affiliate-hero__inner{
    width:100%;
    min-height:460px;
    padding:25px 18px 8px;
    display:block;
  }

  .affiliate-hero__content{
    width:100%;padding:0;
  }

  .affiliate-kicker{
    margin:0 0 24px;
    padding-left:12px;
    border-left:4px solid var(--affiliate-blue);
    font-size:12px;letter-spacing:.08em;
  }

  .affiliate-hero h1{
    font-size:clamp(39px,11.5vw,52px);
    line-height:1.15;
    letter-spacing:.025em;
    white-space:nowrap;
  }

  .affiliate-hero__lead{
    width:56%;
    margin-top:24px;
    font-size:clamp(20px,5.6vw,26px);
    line-height:1.7;
  }

  .affiliate-hero__text{
    width:59%;
    margin-top:22px;
    font-size:clamp(12px,3.2vw,14px);
    line-height:1.95;
  }

  .affiliate-hero__text br{
    display:block;
  }

  .affiliate-hero__visual{
    top:calc(
      25px +
      clamp(10px,2.8vw,12px) +
      14px
    );
    right:clamp(-105px,-5vw,-23px);
    bottom:auto;
    width:clamp(240px, 8vw, 380px);
    height:clamp(260px,78vw,340px);
    margin:0;
    overflow:hidden;
    align-items:center;
    -webkit-mask-image:none;
    mask-image:none;
  }

  .affiliate-hero__visual img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:contain;
    object-position:74% center;
  }
  .affiliate-hero__visual::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(
      90deg,
      #fff 0%,
      rgba(255,255,255,.92) 12%,
      rgba(255,255,255,.38) 28%,
      rgba(255,255,255,0) 48%
    );
    pointer-events:none;
  }

  .affiliate-hero-benefits{
    display:block;
    padding:14px 20px 24px;
  }

  .affiliate-hero-benefits__grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .affiliate-hero-benefits__grid article{
    min-height:122px;
    padding:14px 8px;
    text-align:center;
    border-right:1px solid var(--affiliate-line);
    border-bottom:1px solid var(--affiliate-line);
  }

  .affiliate-hero-benefits__grid article:nth-child(2n){
    border-right:none;
  }
  .affiliate-hero-benefits__grid article:nth-last-child(-n/**/+2){
    border-bottom:none;
  }

  .affiliate-hero-benefits__grid img{
    width:66px;
    margin:0 auto 8px;
  }

  .affiliate-hero-benefits__grid h2{
    margin:0;
    font-family:var(--affiliate-serif);
    font-size:15px;
    line-height:1.55;
    font-weight:600;
  }

  .affiliate-problems .affiliate-section-title{
    margin-bottom:16px;
  }

  .affiliate-problem-grid{
    grid-template-columns:1fr;
  }

  .affiliate-problem-grid article{
    min-height:110px;
    padding:13px 4px;
    display:grid;
    grid-template-columns:88px 1fr;
    align-items:center;
    gap:15px;
    text-align:left;
    border-right:none;
    border-bottom:1px solid var(--affiliate-line);
  }

  .affiliate-problem-grid article:last-child{
    border-bottom:none;
  }

  .affiliate-problem-grid img{
    width:80px;
    margin:0;
  }

  .affiliate-problem-grid h3{
    font-size:19px;
    line-height:1.5;
  }

  .affiliate-problem-grid p{
    display:block;
    margin:6px 0 0;
    color:#111;
    font-family:var(--affiliate-serif);
    font-size:13.5px;
    line-height:1.7;
  }

  .affiliate-overview__grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .affiliate-comparison{
    padding:12px 14px 16px;
  }

  .affiliate-comparison .affiliate-panel-title{
    margin-bottom:16px;
  }

  .affiliate-comparison__grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .affiliate-compare-card img{
    aspect-ratio:2.72/1;
    border-radius:8px;
  }

  .affiliate-compare-card ul{
    margin:7px 0 0;
  }

  .affiliate-compare-card li{
    margin-top:4px;
    padding-left:22px;
    font-size:13px;
  }

  .affiliate-comparison__arrow{
    font-size:43px;
    transform:rotate(90deg);
  }


  .affiliate-flow__panel{
    padding:8px 12px 14px;
  }

  .affiliate-flow__panel .affiliate-panel-title{
    margin-bottom:10px;
  }

  .affiliate-flow__grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"content audience" "lp contract";
    gap:52px 34px;
    padding:0 10px 4px;
  }

  .affiliate-flow-step--content{
    grid-area:content;
  }

  .affiliate-flow-step--audience{
    grid-area:audience;
  }

  .affiliate-flow-step--lp{
    grid-area:lp;
  }

  .affiliate-flow-step--contract{
    grid-area:contract;
  }

  .affiliate-flow-step h3{
    font-size:14px;
    line-height:1.4;
  }

  .affiliate-flow-step img{
    aspect-ratio:1.52/1;
    border-radius:7px;
  }

  .affiliate-flow-arrow{
    position:absolute;
    font-size:35px;
  }

  .affiliate-flow-arrow--one{
    top:26%;
    left:50%;
    transform:translate(-50%,-50%);
  }

  .affiliate-flow-arrow--two{
    top:50%;
    right:23%;
    transform:translate(50%,-50%) rotate(90deg);
  }

  .affiliate-flow-arrow--three{
    bottom:22%;
    left:50%;
    transform:translate(-50%,50%) rotate(180deg);
  }

  .affiliate-strengths__panel{
    padding:8px 12px 12px;
  }

  .affiliate-strengths__panel .affiliate-panel-title{
    margin-bottom:6px;
  }

  .affiliate-strength-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .affiliate-strength-grid article{
    min-height:102px;
    padding:10px 8px;
    display:grid;
    grid-template-columns:67px 1fr;
    align-items:center;
    gap:6px;
    text-align:left;
    border-right:1px solid var(--affiliate-line);
    border-bottom:1px solid var(--affiliate-line);
  }

  .affiliate-strength-grid article:nth-child(2n){
    border-right:none;
  }

  .affiliate-strength-grid article:nth-last-child(-n/**/+2){
    border-bottom:none;
  }

  .affiliate-strength-grid img{
    width:64px;
    margin:0;
  }

  .affiliate-strength-grid h3{
    font-size:14px;
    line-height:1.45;
  }

  .affiliate-cta{
    padding-top:8px;
    padding-bottom:8px;
  }

  .affiliate-cta__box{
    padding:16px 12px 12px;
    border-radius:12px;
  }

  .affiliate-cta h2{
    margin-bottom:14px;
    font-size:21px;
    line-height:1.55;
  }

  .affiliate-mobile-break{
    display:block;
  }

  .affiliate-cta a{
    min-height:62px;
    padding:8px 14px;
    gap:10px;
    border-radius:10px;
  }

  .affiliate-cta a img{
    width:32px;
    flex-basis:32px;
  }

  .affiliate-cta a span{
    font-size:17px;
    line-height:1.4;
  }


}

@media screen and (max-width:390px){
  .affiliate-hero{
    min-height:430px;
  }

  .affiliate-hero__inner{
    min-height:430px;
    padding-inline:14px;
  }

  .affiliate-hero__content{
    width:100%;
  }

  .affiliate-hero h1{
    font-size:38px;
  }

  .affiliate-hero__lead{
    font-size:20px;
  }

  .affiliate-hero__text{
    font-size:12px;
  }

  .affiliate-section-title{
    font-size:21px;
  }

  .affiliate-panel-title{
    font-size:20px;
  }
}
html,
body{
  min-height:100%;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body > #header{
  flex:0 0 auto;
}

body > main{
  width:100%;
  flex:1 0 auto;
}

body > #footer{
  position:relative;
  z-index:10;
  width:100%;
  max-width:none!important;
  margin-top:auto;
  margin-right:0!important;
  margin-left:0!important;
  align-self:stretch;
  flex:0 0 auto;
  box-sizing:border-box;
}
body > #footer > *,
body > #footer > footer,
body > #footer > .footer{
  width:100%!important;
  max-width:none!important;
  margin-right:0!important;
  margin-left:0!important;
  box-sizing:border-box;
}
body > #footer .footer-inner,
body > #footer .footer__inner,
body > #footer .footer-container,
body > #footer .footer__container{
  margin-right:auto!important;
  margin-left:auto!important;
}
body > #footer,
body > #footer > *{
  min-width:0;
}
html,
body{
  width:100%;
  min-width:320px;
}

body{
  align-items:stretch;
}
.affiliate-page,
.article-page,
.formx-page,
.other-page,
.dr-growth-page,
.business-ai-page,
.strategy-page,
.page-image-wrap,
.page-image-cta-wrap{
  width:min(100%,1620px);
  max-width:1620px;
  margin-right:auto!important;
  margin-left:0!important;
}
.affiliate-inner,
.article-inner,
.formx-inner,
.formx-container,
.other-inner,
.dr-wide,
.business-ai-container,
.strategy-inner,
.privacy-inner{
  margin-right:auto!important;
  margin-left:0!important;
}
body > main{
  max-width:1620px;
  margin-right:auto;
  margin-left:0;
}
.diagnosis{
  margin-right:auto!important;
  margin-left:0!important;
}
body > #footer{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

body > #footer .footer{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

body > #footer .footer-info{
  margin-right:auto!important;
  margin-left:40px!important;
}
@media(max-width:1036px){
  .affiliate-page,
  .article-page,
  .formx-page,
  .other-page,
  .dr-growth-page,
  .business-ai-page,
  .strategy-page,
  .page-image-wrap,
  .page-image-cta-wrap,
  body > main{
    width:100%;
    max-width:none;
    margin-right:0!important;
    margin-left:0!important;
  }

  .affiliate-inner,
  .article-inner,
  .formx-inner,
  .formx-container,
  .other-inner,
  .dr-wide,
  .business-ai-container,
  .strategy-inner,
  .privacy-inner{
    margin-right:auto!important;
    margin-left:auto!important;
  }

  body > #footer .footer-info{
    margin-left:0!important;
  }
}
@media screen and (min-width:1101px){
  .affiliate-page{
    width:100%!important;
    max-width:none!important;
  }
  .affiliate-hero,
  .affiliate-hero__inner{
    min-height:520px;
  }

  .affiliate-hero__visual{
    top:50%;
    right:-40px!important;
    bottom:auto;
    width:min(54vw,780px);
    transform:translateY(-50%);
  }

  .affiliate-hero__visual img{
    max-height:480px;
  }

  .affiliate-problems{
    padding-top:16px;
  }
}
img[src$=".svg"]{
  image-rendering:auto;
}
@media screen and (max-width:767px){
  .affiliate-hero,.affiliate-hero__inner{min-height:clamp(325px,98vw,380px)}
  .affiliate-hero__inner{padding-bottom:0}
  .affiliate-problems{padding-top:8px}
}
@media screen and (max-width:767px){
  .affiliate-kicker{font-size:12px;line-height:1.4;font-weight:600}
  .affiliate-hero h1{font-size:clamp(40px,11vw,52px);line-height:1.08;font-weight:500}
  .affiliate-hero__lead{font-size:clamp(20px,5vw,20px);line-height:1.65;font-weight:500}
  .affiliate-hero__text{font-size:13px;line-height:1.9;font-weight:500}
}


.affiliate-overview__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  align-items:stretch;
}

.affiliate-comparison{
  width:100%;
  padding:28px 28px 32px;
}

.affiliate-comparison .affiliate-panel-title{
  margin-bottom:30px;
}
.affiliate-comparison__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  gap:24px;
  align-items:stretch;
  width:100%;
  max-width:1220px;
  margin-inline:auto;
}

.affiliate-compare-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--affiliate-line);
  border-radius:16px;
  background:rgba(255,255,255,.92);
}

.affiliate-compare-card__image{
  position:relative;
  min-width:0;
  margin:28px 28px 0;
  overflow:hidden;
  border:1px solid rgba(230,0,18,.10);
  border-radius:12px;
  background:#fff7f7;
}

.affiliate-compare-card__image img{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  border-radius:0;
}

.affiliate-compare-card--before .affiliate-compare-card__image img{
  filter:grayscale(.88);
}

.affiliate-compare-card__label{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  min-width:88px;
  padding:9px 18px;
  border-radius:12px;
  color:#fff;
  background:#111;
  box-shadow:0 6px 15px rgba(0,0,0,.16);
  font-family:var(--affiliate-sans);
  font-size:17px;
  font-weight:700;
  line-height:1;
  text-align:center;
}

.affiliate-compare-card--after .affiliate-compare-card__label{
  background:linear-gradient(135deg,#b8000f,var(--affiliate-blue));
  box-shadow:0 6px 15px rgba(184,0,15,.20);
}

.affiliate-compare-card__body{
  min-width:0;
  flex:1;
  padding:24px 30px 30px;
}

.affiliate-compare-card__body h3{
  margin:0 0 16px;
  color:var(--affiliate-navy);
  font-family:var(--affiliate-serif);
  font-size:21px;
  font-weight:600;
  line-height:1.55;
  letter-spacing:.04em;
}

.affiliate-compare-card--after .affiliate-compare-card__body h3{
  color:#c90010;
}

.affiliate-compare-card ul{
  margin:0;
  padding:0;
  list-style:none;
}

.affiliate-compare-card li{
  position:relative;
  margin-top:12px;
  padding-left:42px;
  font-family:var(--affiliate-serif);
  font-size:15px;
  line-height:1.7;
}

.affiliate-compare-card li:first-child{
  margin-top:0;
}

.affiliate-compare-card li::before{
  content:"×";
  position:absolute;
  top:.08em;
  left:0;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:#777;
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1;
}

.affiliate-compare-card--after li::before{
  content:"✓";
  background:var(--affiliate-blue);
  font-size:18px;
}
.affiliate-comparison__arrow{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent;
  font-size:0;
  line-height:1;
}

.affiliate-comparison__arrow::before{
  content:"";
  width:44px;
  height:6px;
  border-radius:999px;
  background:#111;
}

.affiliate-comparison__arrow::after{
  content:"";
  width:17px;
  height:17px;
  margin-left:-18px;
  border-top:6px solid #111;
  border-right:6px solid #111;
  transform:rotate(45deg);
}


@media screen and (max-width:1100px){
  .affiliate-comparison{
    padding:24px 20px 28px;
  }

  .affiliate-comparison__grid{
    grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr);
    gap:16px;
  }

  .affiliate-compare-card__image{
    margin:20px 20px 0;
  }

  .affiliate-compare-card__body{
    padding:20px 22px 24px;
  }

  .affiliate-compare-card__body h3{
    font-size:18px;
  }

  .affiliate-compare-card li{
    padding-left:36px;
    font-size:13px;
  }

  .affiliate-compare-card li::before{
    width:25px;
    height:25px;
    font-size:18px;
  }

  .affiliate-compare-card--after li::before{
    font-size:16px;
  }


}

@media screen and (max-width:767px){
  .affiliate-overview__grid{
    gap:14px;
  }

  .affiliate-comparison{
    padding:18px 10px 20px;
  }

  .affiliate-comparison .affiliate-panel-title{
    margin-bottom:22px;
  }

  .affiliate-comparison__grid{
    grid-template-columns:1fr;
    gap:12px;
    max-width:620px;
  }

  .affiliate-compare-card{
    border-radius:14px;
  }

  .affiliate-compare-card__image{
    margin:12px 12px 0;
  }

  .affiliate-compare-card__label{
    top:9px;
    left:9px;
    min-width:72px;
    padding:8px 13px;
    border-radius:10px;
    font-size:14px;
  }

  .affiliate-compare-card__body{
    padding:17px 16px 20px;
  }

  .affiliate-compare-card__body h3{
    margin-bottom:13px;
    font-size:16px;
  }

  .affiliate-compare-card li{
    margin-top:9px;
    padding-left:33px;
    font-size:12px;
    line-height:1.65;
  }

  .affiliate-compare-card li::before{
    width:23px;
    height:23px;
    font-size:16px;
  }

  .affiliate-compare-card--after li::before{
    font-size:15px;
  }

  .affiliate-comparison__arrow{
    min-height:42px;
    flex-direction:column;
    transform:none;
  }

  .affiliate-comparison__arrow::before{
    width:6px;
    height:30px;
  }

  .affiliate-comparison__arrow::after{
    width:15px;
    height:15px;
    margin-top:-17px;
    margin-left:0;
    border-top:0;
    border-right:6px solid #111;
    border-bottom:6px solid #111;
    transform:rotate(45deg);
  }


}
.affiliate-hero__text{
  max-width:760px;
}
.affiliate-problems{
  padding-bottom:20px;
}

.affiliate-problem-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--affiliate-line);
  border-radius:14px;
}

.affiliate-problem-grid article{
  min-width:0;
  min-height:182px;
  padding:20px 24px;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  align-items:center;
  gap:18px;
  text-align:left;
  border-right:1px solid var(--affiliate-line);
  border-bottom:1px solid var(--affiliate-line);
}

.affiliate-problem-grid article:nth-child(3n){
  border-right:none;
}

.affiliate-problem-grid article:nth-last-child(-n+3){
  border-bottom:none;
}

.affiliate-problem-grid img{
  width:90px;
  margin:0;
}

.affiliate-problem-grid h3{
  margin:0;
  font-size:clamp(17px,1.12vw,20px);
  line-height:1.55;
}

.affiliate-problem-grid p{
  display:block;
  margin:8px 0 0;
  color:#111;
  font-family:var(--affiliate-serif);
  font-size:clamp(13px,.95vw,15px);
  line-height:1.75;
}
.affiliate-overview__grid{
  grid-template-columns:minmax(0,1fr);
  gap:0;
}

.affiliate-comparison{
  width:100%;
  max-width:1320px;
  margin-inline:auto;
  padding:28px 28px 32px;
}

.affiliate-comparison .affiliate-panel-title{
  margin-bottom:30px;
}
.affiliate-flow__panel{
  padding:24px 22px 28px;
}

.affiliate-flow__panel .affiliate-panel-title{
  margin-bottom:24px;
}

.affiliate-flow__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr) 42px minmax(0,1fr);
  align-items:stretch;
  gap:10px;
}

.affiliate-flow-step{
  position:relative;
  min-width:0;
  height:100%;
  padding:18px;
  display:flex;
  flex-direction:column;
  text-align:left;
  border:1px solid var(--affiliate-line);
  border-radius:12px;
  overflow:visible;
}

.affiliate-flow-step__number{
  width:max-content;
  margin:0 0 12px;
  padding:6px 12px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(100deg,#b8000f 0%,#ef1b2d 100%);
  font-family:var(--affiliate-sans);
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
}

.affiliate-flow-step h3{
  margin:0 0 10px;
  font-family:var(--affiliate-serif);
  font-size:clamp(17px,1.18vw,20px);
  font-weight:600;
  line-height:1.5;
  text-align:left;
}

.affiliate-flow-step p{
  flex:1;
  margin:0;
  color:#111;
  font-family:var(--affiliate-serif);
  font-size:clamp(13px,.9vw,15px);
  line-height:1.75;
}

.affiliate-flow-step img{
  width:100%;
  margin-top:18px;
  aspect-ratio:16/9;
  object-fit:cover;
  border:1px solid var(--affiliate-line);
  border-radius:9px;
}

.affiliate-flow-arrow{
  align-self:center;
  color:#111;
  font-size:40px;
  font-weight:700;
  line-height:1;
  text-align:center;
}
.affiliate-strengths__panel{
  padding:24px 20px 28px;
}

.affiliate-strengths__panel .affiliate-panel-title{
  margin-bottom:24px;
}

.affiliate-strength-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--affiliate-line);
  border-radius:14px;
}

.affiliate-strength-grid article{
  min-width:0;
  min-height:210px;
  padding:24px 22px;
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  align-items:center;
  gap:18px;
  text-align:left;
  border-right:1px solid var(--affiliate-line);
  border-bottom:1px solid var(--affiliate-line);
}

.affiliate-strength-grid article:nth-child(3n){
  border-right:none;
}

.affiliate-strength-grid article:nth-last-child(-n+3){
  border-bottom:none;
}

.affiliate-strength-grid img{
  width:100px;
  margin:0;
}

.affiliate-strength-card__body{
  min-width:0;
}

.affiliate-strength-grid h3{
  margin:0;
  font-family:var(--affiliate-serif);
  font-size:clamp(17px,1.12vw,20px);
  font-weight:600;
  line-height:1.55;
}

.affiliate-strength-grid p{
  margin:9px 0 0;
  color:#111;
  font-family:var(--affiliate-serif);
  font-size:clamp(13px,.95vw,15px);
  line-height:1.75;
}
.affiliate-cta__box{
  padding-top:18px;
  padding-bottom:18px;
}

.affiliate-cta h2{
  margin-bottom:14px;
}
@media screen and (min-width:768px) and (max-width:1100px){
  .affiliate-problem-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .affiliate-problem-grid article,
  .affiliate-problem-grid article:nth-child(3n),
  .affiliate-problem-grid article:nth-last-child(-n+3){
    border-right:1px solid var(--affiliate-line);
    border-bottom:1px solid var(--affiliate-line);
  }

  .affiliate-problem-grid article:nth-child(2n){
    border-right:none;
  }

  .affiliate-problem-grid article:nth-last-child(-n+2){
    border-bottom:none;
  }

  .affiliate-flow__grid{
    width:min(100%,760px);
    margin-inline:auto;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:none;
    gap:52px;
    padding:0;
  }

  .affiliate-flow-step--content,
  .affiliate-flow-step--audience,
  .affiliate-flow-step--lp,
  .affiliate-flow-step--contract{
    grid-area:auto;
  }

  .affiliate-flow-arrow{
    display:none;
  }

  .affiliate-flow-step:not(:last-of-type)::after{
    content:"↓";
    position:absolute;
    left:50%;
    bottom:-44px;
    color:#111;
    font-family:var(--affiliate-sans);
    font-size:34px;
    font-weight:700;
    line-height:1;
    transform:translateX(-50%);
  }

  .affiliate-strength-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .affiliate-strength-grid article,
  .affiliate-strength-grid article:nth-child(3n),
  .affiliate-strength-grid article:nth-last-child(-n+3){
    border-right:1px solid var(--affiliate-line);
    border-bottom:1px solid var(--affiliate-line);
  }

  .affiliate-strength-grid article:nth-child(2n){
    border-right:none;
  }

  .affiliate-strength-grid article:nth-last-child(-n+2){
    border-bottom:none;
  }
}
@media screen and (max-width:767px){
  .affiliate-hero__lead{
    width:60%;
  }

  .affiliate-hero__text{
    width:63%;
    margin-top:18px;
    font-size:clamp(11.5px,3.05vw,13px);
    line-height:1.85;
  }

  .affiliate-hero-benefits__grid h2{
    font-size:14px;
  }

  .affiliate-problem-grid{
    grid-template-columns:minmax(0,1fr);
    border-radius:12px;
  }

  .affiliate-problem-grid article,
  .affiliate-problem-grid article:nth-child(2n),
  .affiliate-problem-grid article:nth-child(3n),
  .affiliate-problem-grid article:nth-last-child(-n+2),
  .affiliate-problem-grid article:nth-last-child(-n+3){
    min-height:0;
    padding:16px 12px;
    grid-template-columns:78px minmax(0,1fr);
    gap:12px;
    border-right:none;
    border-bottom:1px solid var(--affiliate-line);
  }

  .affiliate-problem-grid article:last-child{
    border-bottom:none;
  }

  .affiliate-problem-grid img{
    width:72px;
  }

  .affiliate-problem-grid h3{
    font-size:16px;
    line-height:1.5;
  }

  .affiliate-problem-grid p{
    margin-top:6px;
    font-size:12.5px;
    line-height:1.7;
  }

  .affiliate-comparison{
    padding:18px 10px 20px;
  }

  .affiliate-flow__panel{
    padding:18px 10px 22px;
  }

  .affiliate-flow__panel .affiliate-panel-title{
    margin-bottom:20px;
  }

  .affiliate-flow__grid{
    width:100%;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:none;
    gap:48px;
    padding:0;
  }

  .affiliate-flow-step--content,
  .affiliate-flow-step--audience,
  .affiliate-flow-step--lp,
  .affiliate-flow-step--contract{
    grid-area:auto;
  }

  .affiliate-flow-step{
    padding:16px;
    border-radius:11px;
  }

  .affiliate-flow-step__number{
    margin-bottom:10px;
    font-size:11px;
  }

  .affiliate-flow-step h3{
    font-size:17px;
  }

  .affiliate-flow-step p{
    font-size:12.5px;
    line-height:1.7;
  }

  .affiliate-flow-step img{
    margin-top:14px;
    aspect-ratio:16/9;
  }

  .affiliate-flow-arrow{
    display:none;
  }

  .affiliate-flow-step:not(:last-of-type)::after{
    content:"↓";
    position:absolute;
    left:50%;
    bottom:-40px;
    color:#111;
    font-family:var(--affiliate-sans);
    font-size:31px;
    font-weight:700;
    line-height:1;
    transform:translateX(-50%);
  }

  .affiliate-strengths__panel{
    padding:18px 10px 20px;
  }

  .affiliate-strengths__panel .affiliate-panel-title{
    margin-bottom:20px;
  }

  .affiliate-strength-grid{
    grid-template-columns:minmax(0,1fr);
    border-radius:12px;
  }

  .affiliate-strength-grid article,
  .affiliate-strength-grid article:nth-child(2n),
  .affiliate-strength-grid article:nth-child(3n),
  .affiliate-strength-grid article:nth-last-child(-n+2),
  .affiliate-strength-grid article:nth-last-child(-n+3){
    min-height:0;
    padding:16px 13px;
    grid-template-columns:76px minmax(0,1fr);
    gap:12px;
    border-right:none;
    border-bottom:1px solid var(--affiliate-line);
  }

  .affiliate-strength-grid article:last-child{
    border-bottom:none;
  }

  .affiliate-strength-grid img{
    width:70px;
  }

  .affiliate-strength-grid h3{
    font-size:16px;
    line-height:1.5;
  }

  .affiliate-strength-grid p{
    margin-top:6px;
    font-size:12.5px;
    line-height:1.7;
  }

  .affiliate-cta__box{
    padding-top:16px;
    padding-bottom:16px;
  }
}
@media screen and (min-width:768px){
  .affiliate-hero,
  .affiliate-hero__inner{
    min-height:620px;
  }

  .affiliate-hero__inner{
    display:grid;
    grid-template-columns:minmax(0,56%) minmax(0,44%);
    gap:38px;
    align-items:center;
  }

  .affiliate-hero__content{
    width:100%;
    min-width:0;
  }

  .affiliate-brand-logo{
    width:min(420px,78%);
    margin-bottom:18px;
  }

  .affiliate-hero h1{
    font-size:clamp(44px,4.1vw,62px);
  }

  .affiliate-hero__lead{
    font-size:clamp(20px,1.65vw,27px);
  }

  .affiliate-hero__visual{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    transform:none!important;
    overflow:visible;
    justify-content:center;
  }

  .affiliate-hero__visual img{
    width:100%;
    max-width:620px;
    max-height:480px;
    object-fit:contain;
  }
}

@media screen and (max-width:767px){
  .affiliate-hero,
  .affiliate-hero__inner{
    min-height:0;
  }

  .affiliate-hero__inner{
    display:flex;
    flex-direction:column;
    padding:24px 18px 28px;
  }

  .affiliate-hero__content{
    width:100%;
  }

  .affiliate-kicker{
    margin-bottom:10px;
    padding-left:0;
    border-left:0;
  }

  .affiliate-brand-logo{
    width:min(310px,82vw);
    margin:0 0 14px;
  }

  .affiliate-hero h1{
    font-size:clamp(30px,4.6vw,36px);
    white-space:normal;
  }

  .affiliate-hero__lead,
  .affiliate-hero__text{
    width:100%;
  }

  .affiliate-hero__cta{
    width:min(100%,330px);
    min-height:54px;
    margin-top:20px;
    padding:11px 20px 11px 24px;
    font-size:14px;
  }

  .affiliate-hero__visual{
    display:none!important;
  }

  .affiliate-hero__visual img{
    display:none!important;
  }
}
.affiliate-compare-card__image{
  background:#fff;
}

.affiliate-compare-card__image img{
  object-fit:contain;
  object-position:center;
  background:#fff;
}

.affiliate-flow-step img{
  aspect-ratio:12/7;
  object-fit:contain;
  object-position:center;
  background:#fff;
}

/* =========================================================
   2026-08-31 | SERVICE HERO HEADING SIZE UNIFICATION
   ========================================================= */
.affiliate-hero h1{
  font-size:clamp(30px,5.6vw,40px)!important;
}

/* =========================================================
   2026-09-01 | L.EVER FIXED BACKGROUND UNIFICATION
   TOP / SERVICES / FORMLINK compatible fixed backdrop
   ========================================================= */
html{
  background:#f7fbff;
}
body{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  background:transparent!important;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}
body::before{
  z-index:-2;
  background-image:url("../img/top/top-page-background-v1.png");
  background-image:image-set(
    url("../img/top/top-page-background-v1.webp") type("image/webp"),
    url("../img/top/top-page-background-v1.png") type("image/png")
  );
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.78;
}
body::after{
  z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(248,252,255,.34) 52%,rgba(255,255,255,.46) 100%);
}
.affiliate-page{
  background:transparent!important;
}
.affiliate-hero{
  background:
    linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.78) 34%,rgba(255,255,255,.48) 52%,rgba(255,255,255,.10) 70%),
    radial-gradient(circle at 78% 54%,rgba(230,0,18,.09),transparent 36%)!important;
}
.affiliate-problems,
.affiliate-overview,
.affiliate-flow,
.affiliate-strengths{
  background:transparent!important;
}
@media(max-width:900px){
  body::before{background-position:72% center;opacity:.73;}
  body::after{background:linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(248,252,255,.42) 52%,rgba(255,255,255,.54) 100%);}
}
@media(max-width:640px){
  body::before{background-position:84% center;opacity:.69;}
  .affiliate-hero{background:rgba(255,255,255,.66)!important;}
}

/* =========================================================
   2026-09-02 | TREMO MOBILE TALL HERO
   - HERO occupies at least one mobile viewport below the fixed header
   - The same visual used on PC is placed in normal flow directly above CTA
   - The separate mobile benefit-icon block is hidden so the article follows next
   - Desktop / tablet layout is unchanged
   ========================================================= */
.affiliate-hero__visual-mobile,
.affiliate-hero__scroll{
  display:none;
}

@media screen and (max-width:767px){
  .affiliate-hero{
    min-height:calc(100vh - var(--affiliate-mobile-header-space))!important;
    min-height:calc(100svh - var(--affiliate-mobile-header-space))!important;
    overflow:hidden;
    background:
      radial-gradient(circle at 86% 70%,rgba(230,0,18,.10),transparent 28%),
      linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 48%,rgba(255,241,243,.88) 100%)!important;
  }

  .affiliate-hero__inner{
    position:relative;
    width:min(calc(100% - 36px),560px);
    min-height:inherit!important;
    margin-inline:auto;
    padding:22px 0 0!important;
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
  }

  .affiliate-hero__content{
    width:100%!important;
    min-width:0;
    min-height:0;
    height:100%;
    padding:0 0 calc(36px + env(safe-area-inset-bottom,0px))!important;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    align-items:stretch;
  }

  .affiliate-kicker{
    margin:0 0 10px!important;
    padding:0!important;
    border:0!important;
    font-size:12px!important;
    line-height:1.45!important;
    letter-spacing:.08em!important;
  }

  .affiliate-brand-logo{
    width:min(292px,78vw)!important;
    max-height:82px;
    margin:0 0 14px!important;
    object-fit:contain;
    object-position:left center;
  }

  .affiliate-hero h1{
    margin:0!important;
    font-size:clamp(25px,7vw,31px)!important;
    line-height:1.28!important;
    letter-spacing:0!important;
    white-space:normal!important;
  }

  .affiliate-hero__lead{
    width:100%!important;
    margin:18px 0 0!important;
    font-size:clamp(17px,4.7vw,21px)!important;
    line-height:1.65!important;
    letter-spacing:.02em!important;
  }

  .affiliate-hero__text{
    width:100%!important;
    max-width:none!important;
    margin:12px 0 0!important;
    font-size:13px!important;
    line-height:1.8!important;
  }

  .affiliate-hero__visual-mobile{
    position:relative;
    z-index:1;
    width:100%;
    height:clamp(180px,26svh,250px);
    margin:10px auto 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    pointer-events:none;
  }

  .affiliate-hero__visual-mobile::before{
    content:"";
    position:absolute;
    right:8%;
    bottom:8%;
    left:8%;
    height:42%;
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(230,0,18,.12),rgba(230,0,18,0) 70%);
    filter:blur(22px);
    pointer-events:none;
  }

  .affiliate-hero__visual-mobile img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    max-width:470px;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 18px 22px rgba(92,0,8,.12));
  }

  .affiliate-hero__cta{
    align-self:center;
    width:min(100%,360px)!important;
    min-height:54px!important;
    margin:6px auto 0!important;
    padding:11px 20px 11px 24px!important;
    font-size:14px!important;
    flex:0 0 auto;
  }

  /* CTAとSCROLLの間隔を保ちつつ、矢印の下に端末用の安全余白を残す */

  .affiliate-hero__visual,
  .affiliate-hero__visual img{
    display:none!important;
  }

  .affiliate-hero-benefits{
    display:none!important;
  }

  .affiliate-hero__scroll{
    position:relative;
    right:auto;
    bottom:auto;
    left:auto;
    z-index:4;
    width:max-content;
    min-height:0;
    margin:auto auto 0;
    padding:18px 0 0;
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    overflow:visible;
    color:rgba(23,23,23,.62);
    font-family:var(--affiliate-sans);
    font-size:10px;
    font-weight:700;
    line-height:1;
    letter-spacing:.18em;
    pointer-events:none;
  }

  /*
     矢印はviewBoxの中央に収めた短いインラインSVGに変更。
     縦線を廃止した下向きシェブロンにし、矢印全体を安全余白より上に置く。
  */
  .affiliate-hero__scroll-arrow{
    width:20px;
    height:14px;
    display:block;
    flex:0 0 14px;
    overflow:visible;
    color:#e60012;
  }

  .affiliate-hero__scroll-arrow path{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
  }

  .affiliate-problems{
    padding-top:28px!important;
  }
}

@media screen and (max-width:390px){
  .affiliate-hero__inner{
    padding-top:18px!important;
  }

  .affiliate-brand-logo{
    width:min(270px,76vw)!important;
    max-height:72px;
  }

  .affiliate-hero__lead{
    font-size:17px!important;
  }

  .affiliate-hero__visual-mobile{
    height:clamp(165px,24svh,215px);
    margin-top:8px;
  }
}



/* =========================================================
   2026-09-02 | TREMO MOBILE HERO → AUTO-SNAP FULL OVERLAY (JS) v8
   ------------------------------------------------------------------
   JS有効時のみ、スマホ版HEROを固定ヘッダー直下で一時的に
   sticky表示します。最初の下方向スクロールを検知すると、直下の
   記事をHEROの前面へ自動で重ね、固定ヘッダー直下まで移動します。

   ・HEROの上に白い記事面が重なるシート表現
   ・記事上端は固定ヘッダー直下まで到達
   ・最初のホイール／スワイプ1回で記事上端まで自動移動
   ・移動完了後は通常スクロールへ復帰
   ・CSS scroll-snapは使用せず、JSで位置を正確に制御
   ・演出用の高さは記事側の負の余白で相殺
   ・PC／タブレット版への影響なし
   ========================================================= */
.affiliate-hero-scroll-stage{
  display:contents;
}

/* JSのフレーム制御中は、CSS側のsmoothを無効化して二重補間を防止 */
html.tremo-mobile-auto-snap-running{
  scroll-behavior:auto!important;
}

@media screen and (max-width:767px){
  html.tremo-mobile-scroll-reveal-ready{
    --tremo-mobile-header-offset:var(--affiliate-mobile-header-space,72px);
    --tremo-mobile-hero-height:calc(100svh - var(--tremo-mobile-header-offset));
    --tremo-mobile-panel-top-gap:0px;
    --tremo-mobile-reveal-distance:calc(
      var(--tremo-mobile-hero-height) - var(--tremo-mobile-panel-top-gap)
    );
  }

  html.tremo-mobile-scroll-reveal-ready,
  html.tremo-mobile-scroll-reveal-ready body{
    overflow-x:hidden;
    overflow-x:clip;
  }

  /* stickyが祖先のoverflowで無効化されないよう、JS起動時のみ解除 */
  html.tremo-mobile-scroll-reveal-ready .affiliate-page{
    overflow:visible!important;
    overflow-x:clip!important;
  }

  html.tremo-mobile-scroll-reveal-ready .affiliate-hero-scroll-stage{
    position:relative;
    z-index:1;
    display:block;
    height:calc(
      var(--tremo-mobile-hero-height) +
      var(--tremo-mobile-reveal-distance)
    );
    isolation:isolate;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-hero-scroll-stage > .affiliate-hero{
    position:sticky!important;
    top:var(--tremo-mobile-header-offset);
    z-index:1;
    width:100%;
    height:var(--tremo-mobile-hero-height);
    min-height:var(--tremo-mobile-hero-height)!important;
    margin:0;
    transform:translateZ(0);
    backface-visibility:hidden;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-hero-scroll-stage > .affiliate-hero .affiliate-hero__inner{
    height:100%;
    min-height:100%!important;
    /* SCROLLの下端余白は .affiliate-hero__content 内で確保 */
    opacity:var(--tremo-hero-opacity,1);
    transform:
      translate3d(0,var(--tremo-hero-shift,0px),0)
      scale(var(--tremo-hero-scale,1));
    transform-origin:50% 12%;
    will-change:transform,opacity;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-hero-scroll-stage > .affiliate-hero .affiliate-hero__visual-mobile{
    transform:
      translate3d(0,var(--tremo-visual-shift,0px),0)
      scale(var(--tremo-visual-scale,1));
    transform-origin:50% 58%;
    will-change:transform;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-hero-scroll-stage > .affiliate-hero .affiliate-hero__scroll{
    opacity:var(--tremo-scroll-cue-opacity,1);
    will-change:opacity;
  }

  /* 演出分の高さを相殺し、ページ全体のスクロール量を増やさない */
  html.tremo-mobile-scroll-reveal-ready
  .affiliate-problems[data-tremo-reveal-panel]{
    position:relative;
    z-index:8!important;
    margin-top:calc(0px - var(--tremo-mobile-reveal-distance))!important;
    min-height:calc(var(--tremo-mobile-hero-height) + 96px);
    padding-top:38px!important;
    overflow:hidden;
    border:1px solid rgba(230,0,18,.075);
    border-bottom:0;
    border-radius:30px 30px 0 0;
    background:#fff!important;
    box-shadow:
      0 -30px 78px rgba(74,0,7,var(--tremo-panel-shadow-alpha,0)),
      0 -1px 0 rgba(230,0,18,.08);
    opacity:var(--tremo-panel-opacity,1);
    transform:translate3d(0,var(--tremo-panel-offset,18px),0);
    will-change:transform,opacity,box-shadow;
    isolation:isolate;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-problems[data-tremo-reveal-panel]::before{
    content:"";
    position:absolute;
    top:12px;
    left:50%;
    z-index:2;
    width:52px;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(230,0,18,.18),rgba(230,0,18,.72),rgba(230,0,18,.18));
    opacity:var(--tremo-panel-line-opacity,0);
    transform:translateX(-50%);
    pointer-events:none;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-problems[data-tremo-reveal-panel] > .affiliate-inner{
    position:relative;
    z-index:1;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-page > section:not(.affiliate-hero-benefits){
    position:relative;
    z-index:6;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-hero-benefits{
    display:none!important;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-problems[data-tremo-reveal-panel].is-tremo-revealed{
    box-shadow:
      0 -34px 86px rgba(74,0,7,var(--tremo-panel-shadow-alpha,.14)),
      0 -1px 0 rgba(230,0,18,.10);
  }
}

@media screen and (max-width:767px) and (prefers-reduced-motion:reduce){
  html.tremo-mobile-scroll-reveal-ready
  .affiliate-hero-scroll-stage > .affiliate-hero .affiliate-hero__inner,
  html.tremo-mobile-scroll-reveal-ready
  .affiliate-hero-scroll-stage > .affiliate-hero .affiliate-hero__visual-mobile,
  html.tremo-mobile-scroll-reveal-ready
  .affiliate-problems[data-tremo-reveal-panel]{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  html.tremo-mobile-scroll-reveal-ready
  .affiliate-hero__scroll{
    display:none!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO BACKGROUND — CSS ONLY
   Reference direction:
   white -> pale pink environment light / red speed lines /
   soft concentric rings / glassy glow.
   No generated background image is used.
   ========================================================= */

.affiliate-hero{
  isolation:isolate;
  background:
    radial-gradient(circle at 86% 48%, rgba(255,82,103,.20) 0%, rgba(255,82,103,.09) 26%, rgba(255,82,103,0) 54%),
    radial-gradient(ellipse at 78% 52%, rgba(255,255,255,.98) 0 16%, rgba(255,241,244,.90) 36%, rgba(255,224,230,.55) 61%, rgba(255,255,255,0) 78%),
    linear-gradient(90deg,#fff 0%,#fff 43%,#fffafb 57%,#fff0f3 75%,#ffdfe5 100%)!important;
}

/* left readability veil + subtle warm transition */
.affiliate-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.995) 34%,
      rgba(255,255,255,.92) 47%,
      rgba(255,255,255,.52) 59%,
      rgba(255,255,255,.05) 78%,
      rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 28%,rgba(255,255,255,.16) 100%);
}

/* red/pink digital speed-line field on the right */
.affiliate-hero::after{
  content:"";
  position:absolute;
  top:-28%;
  right:-14%;
  z-index:0;
  width:78%;
  height:156%;
  pointer-events:none;
  opacity:.95;
  background:
    repeating-conic-gradient(
      from 267deg at 58% 50%,
      rgba(255,255,255,0) 0deg 1.1deg,
      rgba(255,35,63,.54) 1.1deg 1.23deg,
      rgba(255,255,255,0) 1.23deg 2.35deg,
      rgba(255,95,116,.34) 2.35deg 2.48deg,
      rgba(255,255,255,0) 2.48deg 4.3deg
    );
  -webkit-mask-image:radial-gradient(ellipse at 58% 50%, transparent 0 16%, #000 28%, #000 72%, transparent 96%);
  mask-image:radial-gradient(ellipse at 58% 50%, transparent 0 16%, #000 28%, #000 72%, transparent 96%);
  filter:drop-shadow(0 0 7px rgba(255,22,49,.18));
  transform:rotate(-1.5deg);
  transform-origin:58% 50%;
}

.affiliate-hero__inner{
  position:relative;
  z-index:1;
}

/* soft circular tunnel/rings behind the visual */
.affiliate-hero__inner::before{
  content:"";
  position:absolute;
  top:50%;
  left:72.5%;
  z-index:-1;
  width:clamp(520px,44vw,780px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.96) 0 15%,
      rgba(255,245,247,.76) 15% 27%,
      rgba(255,255,255,0) 27.5% 34%,
      rgba(255,85,105,.10) 34.5% 35%,
      rgba(255,255,255,0) 35.5% 45%,
      rgba(255,93,112,.14) 45.5% 46%,
      rgba(255,255,255,0) 46.5% 58%,
      rgba(255,108,124,.10) 58.5% 59%,
      rgba(255,255,255,0) 59.5% 100%);
  box-shadow:
    0 0 90px rgba(255,71,94,.18),
    inset 0 0 90px rgba(255,255,255,.85);
  transform:translate(-50%,-50%);
}

/* flowing luminous ribbons / floor-like sweep */
.affiliate-hero__inner::after{
  content:"";
  position:absolute;
  left:43%;
  right:-12%;
  bottom:-17%;
  z-index:-1;
  height:54%;
  pointer-events:none;
  border-radius:50% 16% 0 0 / 34% 22% 0 0;
  background:
    linear-gradient(174deg,
      rgba(255,255,255,0) 0 28%,
      rgba(255,255,255,.78) 29% 33%,
      rgba(255,101,119,.20) 34% 36%,
      rgba(255,255,255,.66) 37% 41%,
      rgba(255,31,59,.18) 42% 43%,
      rgba(255,255,255,.44) 44% 49%,
      rgba(255,88,107,.14) 50% 52%,
      rgba(255,255,255,0) 58% 100%);
  filter:blur(.2px) drop-shadow(0 -8px 18px rgba(255,69,92,.08));
  transform:skewX(-9deg) rotate(-2deg);
}

/* keep the product visual above all background FX */
.affiliate-hero__visual{
  z-index:2!important;
}
.affiliate-hero__content{
  z-index:4!important;
}

/* mild glass reflection around the object */
@media screen and (min-width:768px){
  .affiliate-hero__visual::before{
    content:"";
    position:absolute;
    inset:6% -4% 2% -8%;
    z-index:0;
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(255,255,255,.62),rgba(255,229,234,.18) 48%,rgba(255,255,255,0) 72%);
    filter:blur(18px);
    pointer-events:none;
  }
  .affiliate-hero__visual img{
    position:relative;
    z-index:1;
    filter:drop-shadow(0 24px 34px rgba(145,0,15,.13));
  }
}

/* Tablet: preserve effect, slightly quieter */
@media screen and (min-width:768px) and (max-width:1100px){
  .affiliate-hero::after{
    right:-24%;
    width:90%;
    opacity:.74;
  }
  .affiliate-hero__inner::before{
    left:77%;
    width:clamp(430px,58vw,610px);
  }
}

/* Mobile: same palette in a lighter CSS-only version */
@media screen and (max-width:767px){
  .affiliate-hero{
    background:
      radial-gradient(circle at 84% 72%,rgba(255,65,87,.17),transparent 35%),
      linear-gradient(160deg,#fff 0%,#fff 53%,#fff3f5 77%,#ffe2e7 100%)!important;
  }
  .affiliate-hero::before{
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.20) 58%,rgba(255,255,255,0));
  }
  .affiliate-hero::after{
    top:41%;
    right:-42%;
    width:118%;
    height:72%;
    opacity:.48;
    -webkit-mask-image:radial-gradient(ellipse at 56% 50%,transparent 0 14%,#000 30%,#000 72%,transparent 96%);
    mask-image:radial-gradient(ellipse at 56% 50%,transparent 0 14%,#000 30%,#000 72%,transparent 96%);
  }
  .affiliate-hero__inner::before{
    top:auto;
    bottom:8%;
    left:72%;
    width:min(94vw,430px);
    opacity:.68;
    transform:translate(-50%,0);
  }
  .affiliate-hero__inner::after{
    left:18%;
    right:-32%;
    bottom:-5%;
    height:32%;
    opacity:.48;
  }
  .affiliate-hero__visual-mobile{
    position:relative;
    z-index:2;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO BACKGROUND FLOWLINES v2
   - 放射状の集中線を廃止
   - 右側だけに横方向へ流れる赤〜ピンクの光跡
   - 左側の文字エリアは白〜極薄ピンクで完全保護
   - 画像背景は使用せず CSS のみ
   ========================================================= */

.affiliate-hero{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 78% 50%, rgba(255,70,94,.14) 0%, rgba(255,113,130,.08) 27%, rgba(255,255,255,0) 58%),
    linear-gradient(90deg,
      #ffffff 0%,
      #ffffff 42%,
      #fffdfd 49%,
      #fff8f9 60%,
      #fff1f3 76%,
      #ffe9ed 100%)!important;
}

/* 左側の文字可読性を守る白い環境光。境界はぼかして自然につなぐ */
.affiliate-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  display:block!important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 35%,
      rgba(255,255,255,.99) 43%,
      rgba(255,255,255,.92) 50%,
      rgba(255,255,255,.50) 58%,
      rgba(255,255,255,.10) 67%,
      rgba(255,255,255,0) 76%)!important;
  opacity:1!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* 右側にだけ流れる細いライトストリーム。放射させない */
.affiliate-hero::after{
  content:""!important;
  position:absolute!important;
  top:-8%!important;
  right:-6%!important;
  bottom:-8%!important;
  left:48%!important;
  z-index:1!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  pointer-events:none!important;
  opacity:.92!important;
  transform:none!important;
  background:
    /* 強い主線：右上へ抜ける */
    linear-gradient(168deg,
      transparent 0 14%,
      rgba(255,42,67,0) 14.2%,
      rgba(255,42,67,.18) 14.45%,
      rgba(255,255,255,.95) 14.62%,
      rgba(255,42,67,.34) 14.82%,
      rgba(255,42,67,0) 15.08%,
      transparent 15.4% 100%),
    linear-gradient(173deg,
      transparent 0 27%,
      rgba(230,0,18,0) 27.1%,
      rgba(230,0,18,.26) 27.38%,
      rgba(255,255,255,.86) 27.56%,
      rgba(255,57,82,.30) 27.78%,
      rgba(230,0,18,0) 28.04%,
      transparent 28.4% 100%),
    linear-gradient(177deg,
      transparent 0 39%,
      rgba(255,70,94,0) 39.1%,
      rgba(255,70,94,.22) 39.36%,
      rgba(255,255,255,.78) 39.53%,
      rgba(255,70,94,.26) 39.73%,
      rgba(255,70,94,0) 40.0%,
      transparent 40.3% 100%),
    linear-gradient(183deg,
      transparent 0 55%,
      rgba(230,0,18,0) 55.1%,
      rgba(230,0,18,.24) 55.38%,
      rgba(255,255,255,.82) 55.56%,
      rgba(255,55,78,.29) 55.80%,
      rgba(230,0,18,0) 56.08%,
      transparent 56.4% 100%),
    linear-gradient(188deg,
      transparent 0 70%,
      rgba(255,74,97,0) 70.1%,
      rgba(255,74,97,.18) 70.38%,
      rgba(255,255,255,.70) 70.56%,
      rgba(255,74,97,.22) 70.78%,
      rgba(255,74,97,0) 71.04%,
      transparent 71.4% 100%),
    /* 細いスピードライン群 */
    repeating-linear-gradient(176deg,
      rgba(255,255,255,0) 0 19px,
      rgba(255,45,70,.09) 19px 20px,
      rgba(255,255,255,.20) 20px 21px,
      rgba(255,255,255,0) 21px 43px)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 7%,#000 22%,#000 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 7%,#000 22%,#000 100%)!important;
  filter:drop-shadow(0 0 10px rgba(255,35,62,.16))!important;
}

/* オブジェクト背後の柔らかい赤い光環境。輪郭線ではなく光量中心 */
.affiliate-hero__inner::before{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  left:79%!important;
  z-index:0!important;
  width:clamp(560px,46vw,820px)!important;
  aspect-ratio:1.25 / 1!important;
  border:0!important;
  border-radius:50%!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.96) 0%,
      rgba(255,245,247,.88) 28%,
      rgba(255,196,205,.28) 52%,
      rgba(255,95,115,.10) 68%,
      rgba(255,255,255,0) 78%)!important;
  box-shadow:none!important;
  filter:blur(2px)!important;
  transform:translate(-50%,-50%)!important;
}

/* 下部の光の流れ。白主体で赤は縁だけ */
.affiliate-hero__inner::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  right:-18%!important;
  bottom:-9%!important;
  z-index:0!important;
  height:36%!important;
  pointer-events:none!important;
  border-radius:50% 0 0 0 / 28% 0 0 0!important;
  opacity:.90!important;
  background:
    linear-gradient(174deg,
      rgba(255,255,255,0) 0 26%,
      rgba(255,255,255,.92) 27% 31%,
      rgba(255,73,95,.16) 31.5% 32.2%,
      rgba(255,255,255,.72) 33% 38%,
      rgba(230,0,18,.12) 38.5% 39.2%,
      rgba(255,255,255,.48) 40% 45%,
      rgba(255,255,255,0) 50% 100%)!important;
  filter:blur(.4px)!important;
  transform:skewX(-10deg) rotate(-1deg)!important;
}

.affiliate-hero__content{
  position:relative!important;
  z-index:5!important;
}
.affiliate-hero__visual{
  position:relative!important;
  z-index:4!important;
}

/* visual の背後の補助光だけ残す */
@media screen and (min-width:768px){
  .affiliate-hero__visual::before{
    content:""!important;
    position:absolute!important;
    inset:12% -3% 5% -8%!important;
    z-index:0!important;
    border-radius:50%!important;
    background:radial-gradient(ellipse at center,rgba(255,255,255,.66),rgba(255,213,220,.15) 50%,rgba(255,255,255,0) 74%)!important;
    filter:blur(22px)!important;
    pointer-events:none!important;
  }
  .affiliate-hero__visual img{
    position:relative!important;
    z-index:1!important;
    filter:drop-shadow(0 24px 34px rgba(145,0,15,.12))!important;
  }
}

/* Tablet */
@media screen and (min-width:768px) and (max-width:1100px){
  .affiliate-hero::after{
    left:46%!important;
    right:-12%!important;
    opacity:.78!important;
  }
  .affiliate-hero__inner::before{
    left:78%!important;
    width:clamp(470px,60vw,650px)!important;
  }
}

/* Mobile: テキスト面を優先し、線はビジュアル周辺だけ */
@media screen and (max-width:767px){
  .affiliate-hero{
    background:
      radial-gradient(ellipse at 72% 72%,rgba(255,72,95,.12),transparent 36%),
      linear-gradient(180deg,#fff 0%,#fff 54%,#fff7f8 78%,#ffecef 100%)!important;
  }
  .affiliate-hero::before{
    background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 52%,rgba(255,255,255,.72) 68%,rgba(255,255,255,0) 82%)!important;
  }
  .affiliate-hero::after{
    top:55%!important;
    right:-20%!important;
    bottom:-6%!important;
    left:20%!important;
    opacity:.58!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%)!important;
  }
  .affiliate-hero__inner::before{
    top:auto!important;
    bottom:3%!important;
    left:70%!important;
    width:min(112vw,470px)!important;
    transform:translate(-50%,0)!important;
    opacity:.72!important;
  }
  .affiliate-hero__inner::after{
    left:18%!important;
    right:-28%!important;
    bottom:-2%!important;
    height:23%!important;
    opacity:.50!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO — RISING VIEWER MOMENTUM v3
   CSS only / no generated background image
   Concept: 動画視聴 → 興味上昇 → 導線が右上へ加速
   ========================================================= */
@media screen and (min-width:768px){
  .affiliate-hero{
    isolation:isolate!important;
    background:
      radial-gradient(ellipse at 79% 50%,rgba(255,255,255,.98) 0%,rgba(255,244,246,.86) 27%,rgba(255,205,213,.34) 50%,rgba(255,99,119,.10) 66%,transparent 78%),
      linear-gradient(90deg,#fff 0%,#fff 43%,#fffafb 58%,#ffeef1 79%,#ffdfe4 100%)!important;
  }

  /* 左側コピーを完全に保護。光線は文字面に侵入させない */
  .affiliate-hero::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,
      #fff 0%,
      rgba(255,255,255,1) 36%,
      rgba(255,255,255,.99) 44%,
      rgba(255,255,255,.91) 49%,
      rgba(255,255,255,.55) 55%,
      rgba(255,255,255,0) 64%)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }

  /* 主役：右下から右上へ伸びる上昇ライン */
  .affiliate-hero::after{
    content:""!important;
    position:absolute!important;
    top:-8%!important;
    right:-5%!important;
    bottom:-12%!important;
    left:43%!important;
    z-index:2!important;
    pointer-events:none!important;
    opacity:1!important;
    border-radius:0!important;
    background:
      /* 太い主軌道 */
      linear-gradient(153deg,
        transparent 0 45%,
        rgba(255,255,255,0) 45.2%,
        rgba(255,154,168,.24) 45.7%,
        rgba(232,0,22,.74) 46.15%,
        rgba(255,70,92,.96) 46.42%,
        rgba(255,255,255,.96) 46.72%,
        rgba(255,77,98,.70) 47.02%,
        rgba(230,0,18,.30) 47.38%,
        transparent 47.9% 100%),
      /* 第二軌道 */
      linear-gradient(158deg,
        transparent 0 56.5%,
        rgba(255,108,126,.16) 56.8%,
        rgba(220,0,20,.56) 57.15%,
        rgba(255,83,103,.88) 57.42%,
        rgba(255,255,255,.88) 57.68%,
        rgba(255,70,92,.50) 57.95%,
        transparent 58.35% 100%),
      /* 細い補助軌道 */
      linear-gradient(148deg,
        transparent 0 67%,
        rgba(255,118,136,.12) 67.2%,
        rgba(228,0,20,.52) 67.42%,
        rgba(255,255,255,.72) 67.62%,
        rgba(255,57,80,.34) 67.82%,
        transparent 68.08% 100%),
      /* 右上へ向かう発光粒子 */
      radial-gradient(circle at 82% 23%,rgba(255,255,255,.96) 0 2px,rgba(255,57,80,.72) 3px 5px,transparent 7px),
      radial-gradient(circle at 72% 36%,rgba(255,255,255,.92) 0 2px,rgba(230,0,18,.60) 3px 4px,transparent 7px),
      radial-gradient(circle at 61% 52%,rgba(255,255,255,.88) 0 1.5px,rgba(255,68,89,.52) 3px 4px,transparent 6px),
      radial-gradient(circle at 91% 14%,rgba(255,255,255,.98) 0 2px,rgba(255,51,75,.74) 3px 5px,transparent 8px)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 5%,rgba(0,0,0,.72) 18%,#000 31%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 5%,rgba(0,0,0,.72) 18%,#000 31%,#000 100%)!important;
    filter:drop-shadow(0 0 9px rgba(232,0,24,.22)) drop-shadow(0 0 22px rgba(255,68,91,.12))!important;
    transform:none!important;
  }

  /* オブジェクト背後：上昇方向を補強する楕円光 */
  .affiliate-hero__inner::before{
    content:""!important;
    position:absolute!important;
    top:49%!important;
    left:80%!important;
    z-index:0!important;
    width:clamp(560px,46vw,820px)!important;
    aspect-ratio:1.28/1!important;
    border:0!important;
    border-radius:50%!important;
    pointer-events:none!important;
    background:
      radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.92) 0%,rgba(255,239,242,.78) 28%,rgba(255,178,189,.25) 51%,rgba(255,78,101,.08) 69%,transparent 78%)!important;
    filter:blur(1px)!important;
    transform:translate(-50%,-50%) rotate(-9deg)!important;
  }

  /* 上昇曲線の薄い軌跡：グラフ的に見えすぎない程度 */
  .affiliate-hero__inner::after{
    content:""!important;
    position:absolute!important;
    right:-8%!important;
    bottom:-14%!important;
    left:49%!important;
    z-index:1!important;
    height:68%!important;
    pointer-events:none!important;
    opacity:.92!important;
    border-radius:58% 42% 0 0 / 88% 82% 0 0!important;
    background:
      radial-gradient(130% 110% at 96% 98%,transparent 0 58%,rgba(255,255,255,.88) 58.4% 59.2%,rgba(255,80,100,.26) 59.5% 60.0%,transparent 60.4%),
      radial-gradient(125% 105% at 96% 100%,transparent 0 67%,rgba(229,0,20,.20) 67.2% 67.7%,rgba(255,255,255,.72) 68% 68.8%,transparent 69.2%)!important;
    filter:blur(.2px)!important;
    transform:rotate(-5deg)!important;
  }

  .affiliate-hero__content{z-index:6!important;}
  .affiliate-hero__visual{z-index:5!important;}
  .affiliate-hero__visual img{
    filter:drop-shadow(0 24px 34px rgba(145,0,15,.14)) drop-shadow(0 0 20px rgba(255,50,75,.08))!important;
  }
}

@media screen and (min-width:768px) and (max-width:1100px){
  .affiliate-hero::after{left:47%!important;right:-16%!important;opacity:.88!important;}
  .affiliate-hero::before{background:linear-gradient(90deg,#fff 0%,#fff 38%,rgba(255,255,255,.96) 47%,rgba(255,255,255,.55) 56%,transparent 66%)!important;}
}

/* Mobile: 文字面は白、上昇ラインはビジュアル下〜右側だけ */
@media screen and (max-width:767px){
  .affiliate-hero{
    isolation:isolate!important;
    background:
      radial-gradient(ellipse at 76% 76%,rgba(255,92,112,.13),transparent 34%),
      linear-gradient(180deg,#fff 0%,#fff 55%,#fff8f9 73%,#ffecef 100%)!important;
  }
  .affiliate-hero::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,.92) 60%,rgba(255,255,255,.18) 78%,transparent 100%)!important;
  }
  .affiliate-hero::after{
    content:""!important;
    position:absolute!important;
    top:55%!important;
    right:-24%!important;
    bottom:-10%!important;
    left:18%!important;
    z-index:2!important;
    opacity:.76!important;
    background:
      linear-gradient(151deg,transparent 0 48%,rgba(230,0,18,.52) 48.4%,rgba(255,255,255,.86) 48.8%,rgba(255,66,88,.58) 49.2%,transparent 49.7% 100%),
      linear-gradient(157deg,transparent 0 61%,rgba(255,67,88,.40) 61.35%,rgba(255,255,255,.70) 61.7%,transparent 62.15% 100%),
      radial-gradient(circle at 80% 20%,rgba(255,255,255,.92) 0 2px,rgba(230,0,18,.58) 3px 5px,transparent 7px)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 42%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 42%,#000 100%)!important;
    filter:drop-shadow(0 0 8px rgba(230,0,18,.16))!important;
  }
  .affiliate-hero__inner::before{
    top:auto!important;
    bottom:2%!important;
    left:72%!important;
    width:min(112vw,470px)!important;
    opacity:.70!important;
    transform:translate(-50%,0) rotate(-8deg)!important;
  }
  .affiliate-hero__inner::after{
    left:20%!important;
    right:-25%!important;
    bottom:-5%!important;
    height:29%!important;
    opacity:.54!important;
  }
  .affiliate-hero__content{z-index:6!important;}
}

/* =========================================================
   2026-09-10 | TREMO HERO — RED FLOW-LINE TINT v4
   Existing soft wind/flow lines are retained and recolored red.
   No background image is added.
   ========================================================= */
@media screen and (min-width:768px){
  /* keep copy side clean */
  .affiliate-hero::before{
    background:linear-gradient(90deg,
      #fff 0%,
      rgba(255,255,255,1) 37%,
      rgba(255,255,255,.995) 45%,
      rgba(255,255,255,.94) 50%,
      rgba(255,255,255,.58) 56%,
      rgba(255,255,255,0) 65%)!important;
  }

  /* recolor the thin flowing 'wind' lines into TREMO red/pink */
  .affiliate-hero__inner::after{
    opacity:1!important;
    background:
      radial-gradient(130% 110% at 96% 98%,
        transparent 0 57.7%,
        rgba(255,255,255,.92) 58.1% 58.7%,
        rgba(255,38,61,.70) 59.0% 59.45%,
        rgba(197,0,18,.56) 59.7% 60.0%,
        transparent 60.45%),
      radial-gradient(125% 105% at 96% 100%,
        transparent 0 66.5%,
        rgba(202,0,19,.48) 66.9% 67.3%,
        rgba(255,78,98,.64) 67.55% 67.9%,
        rgba(255,255,255,.82) 68.15% 68.65%,
        rgba(225,0,21,.30) 68.9% 69.1%,
        transparent 69.45%),
      radial-gradient(118% 102% at 98% 101%,
        transparent 0 74.6%,
        rgba(230,0,18,.30) 74.85% 75.1%,
        rgba(255,97,113,.44) 75.28% 75.5%,
        transparent 75.85%)!important;
    filter:
      drop-shadow(0 0 5px rgba(230,0,18,.24))
      drop-shadow(0 0 12px rgba(255,62,84,.12))!important;
  }

  /* make the main rising accents red, but not like speed-lines */
  .affiliate-hero::after{
    opacity:.88!important;
    filter:
      drop-shadow(0 0 8px rgba(220,0,20,.28))
      drop-shadow(0 0 18px rgba(255,63,84,.12))!important;
  }

  .affiliate-hero__visual::before{
    background:radial-gradient(ellipse at center,
      rgba(255,255,255,.70),
      rgba(255,210,217,.22) 47%,
      rgba(230,0,18,.07) 62%,
      rgba(255,255,255,0) 76%)!important;
  }
}

@media screen and (max-width:767px){
  .affiliate-hero::after{
    opacity:.68!important;
    filter:drop-shadow(0 0 7px rgba(225,0,20,.22))!important;
  }
  .affiliate-hero__inner::after{
    opacity:.66!important;
    background:
      radial-gradient(128% 108% at 96% 100%,
        transparent 0 58%,
        rgba(255,255,255,.86) 58.3% 58.8%,
        rgba(232,0,22,.48) 59.0% 59.5%,
        transparent 59.9%),
      radial-gradient(124% 104% at 96% 100%,
        transparent 0 67%,
        rgba(255,66,86,.38) 67.25% 67.65%,
        rgba(255,255,255,.68) 67.9% 68.4%,
        transparent 68.8%)!important;
    filter:drop-shadow(0 0 5px rgba(230,0,18,.16))!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO — REMOVE PINK CIRCLE v5
   HERO画像の真後ろにある大きな丸いピンク背景のみ削除。
   赤い流線・上昇ライン・背景グラデーションは維持。
   ========================================================= */
@media screen and (min-width:768px){
  .affiliate-hero__inner::before{
    content:none!important;
    display:none!important;
    background:none!important;
    filter:none!important;
  }
}

@media screen and (max-width:767px){
  .affiliate-hero__inner::before{
    content:none!important;
    display:none!important;
    background:none!important;
    filter:none!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO — SPIRAL ENERGY FIELD v6
   - 画像に被る直線的な上昇ラインを撤去
   - HEROの背面に渦状の赤いエネルギーラインを配置
   - 左側コピー面は白〜薄桃で保護
   - 背景画像は使用しない（HTML + CSSのみ）
   ========================================================= */
.tremo-energy-field{display:none;}

@media screen and (min-width:768px){
  .affiliate-hero{
    isolation:isolate!important;
    background:
      radial-gradient(ellipse at 79% 51%,rgba(255,113,130,.15) 0%,rgba(255,181,191,.08) 30%,rgba(255,255,255,0) 59%),
      linear-gradient(90deg,#fff 0%,#fff 43%,#fffafa 56%,#fff3f5 78%,#ffe9ed 100%)!important;
  }

  /* 左側の文字を完全に守る白いフェード */
  .affiliate-hero::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:3!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,
      #fff 0%,
      rgba(255,255,255,1) 39%,
      rgba(255,255,255,.99) 47%,
      rgba(255,255,255,.88) 53%,
      rgba(255,255,255,.36) 60%,
      rgba(255,255,255,0) 67%)!important;
  }

  /* 旧・画像を横切る直線系ラインを無効化 */
  .affiliate-hero::after,
  .affiliate-hero__inner::after{
    content:none!important;
    display:none!important;
    background:none!important;
    filter:none!important;
  }

  .tremo-energy-field{
    position:absolute;
    top:50%;
    right:-4%;
    z-index:2;
    width:min(61vw,920px);
    height:min(94%,620px);
    display:block;
    pointer-events:none;
    transform:translateY(-50%) rotate(-7deg);
    transform-origin:55% 52%;
    filter:drop-shadow(0 0 10px rgba(220,0,22,.12));
  }

  .tremo-energy-ring{
    position:absolute;
    left:50%;
    top:50%;
    border-style:solid;
    border-radius:50%;
    transform-origin:center;
    box-shadow:
      0 0 7px rgba(255,32,58,.20),
      inset 0 0 8px rgba(255,255,255,.42);
  }

  /* 連続した円ではなく、曲線がうねるように見える楕円リング */
  .tremo-energy-ring--1{
    width:94%;
    height:68%;
    border-width:3px 7px 2px 4px;
    border-color:rgba(255,92,112,.22) rgba(214,0,20,.68) rgba(255,161,173,.20) rgba(255,39,64,.48);
    transform:translate(-50%,-50%) rotate(12deg) skewX(-5deg);
  }
  .tremo-energy-ring--2{
    width:82%;
    height:57%;
    border-width:6px 2px 4px 7px;
    border-color:rgba(230,0,22,.56) rgba(255,135,149,.24) rgba(199,0,18,.62) rgba(255,255,255,.58);
    transform:translate(-50%,-50%) rotate(-17deg) skewX(7deg);
    opacity:.88;
  }
  .tremo-energy-ring--3{
    width:70%;
    height:48%;
    border-width:2px 6px 7px 3px;
    border-color:rgba(255,255,255,.64) rgba(226,0,22,.72) rgba(255,73,95,.58) rgba(255,162,174,.20);
    transform:translate(-50%,-50%) rotate(28deg) skewX(-8deg);
    opacity:.86;
  }
  .tremo-energy-ring--4{
    width:58%;
    height:39%;
    border-width:5px 3px 2px 6px;
    border-color:rgba(215,0,20,.70) rgba(255,255,255,.52) rgba(255,120,136,.32) rgba(255,42,67,.56);
    transform:translate(-50%,-50%) rotate(-36deg) skewX(6deg);
    opacity:.80;
  }

  /* 中心の発光はオブジェクトの後ろだけ。丸いピンク板にはしない */
  .tremo-energy-core{
    position:absolute;
    left:52%;
    top:52%;
    width:48%;
    aspect-ratio:1.15/1;
    border-radius:50%;
    background:radial-gradient(ellipse at center,
      rgba(255,255,255,.52) 0%,
      rgba(255,145,158,.14) 28%,
      rgba(230,0,20,.07) 48%,
      rgba(255,255,255,0) 72%);
    filter:blur(8px);
    transform:translate(-50%,-50%) rotate(8deg);
  }

  /* HERO画像は渦の前面 */
  .affiliate-hero__visual{z-index:5!important;}
  .affiliate-hero__content{z-index:6!important;}
  .affiliate-hero__visual img{
    filter:drop-shadow(0 26px 34px rgba(120,0,12,.16)) drop-shadow(0 0 16px rgba(255,36,62,.08))!important;
  }
}

@media screen and (min-width:768px) and (max-width:1100px){
  .tremo-energy-field{
    right:-11%;
    width:66vw;
    height:78%;
  }
}

@media screen and (max-width:767px){
  /* スマホでは本文を邪魔しないよう、ビジュアルの後ろだけに小さく渦を表示 */
  .affiliate-hero{
    background:
      radial-gradient(ellipse at 74% 74%,rgba(255,102,119,.10),rgba(255,255,255,0) 31%),
      linear-gradient(180deg,#fff 0%,#fff 54%,#fff8f9 74%,#ffedf0 100%)!important;
  }
  .affiliate-hero::after,
  .affiliate-hero__inner::after{
    content:none!important;
    display:none!important;
  }
  .tremo-energy-field{display:none!important;}
  .affiliate-hero__visual-mobile::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    z-index:0;
    width:108%;
    height:72%;
    border:4px solid rgba(224,0,22,.30);
    border-radius:50%;
    box-shadow:
      0 0 0 8px rgba(255,88,107,.08),
      0 0 18px rgba(225,0,22,.12);
    transform:translate(-50%,-50%) rotate(-13deg);
    pointer-events:none;
  }
  .affiliate-hero__visual-mobile img{z-index:1!important;}
}

/* =========================================================
   2026-09-10 | TREMO HERO — LAYER FIX v7
   左側コンテンツ消失修正
   ・背景フェードは最背面
   ・渦はHERO画像の背面
   ・ロゴ / 見出し / 本文 / CTA は常に最前面
   ========================================================= */
@media screen and (min-width:768px){
  .affiliate-hero{
    position:relative!important;
    isolation:isolate!important;
  }

  /* 左側保護用フェードは背景レイヤーに下げる */
  .affiliate-hero::before{
    z-index:0!important;
  }

  .affiliate-hero__inner{
    position:relative!important;
    z-index:1!important;
    isolation:isolate!important;
  }

  /* 渦はビジュアルより後ろ */
  .tremo-energy-field{
    z-index:1!important;
  }

  /* HERO画像 */
  .affiliate-hero__visual{
    position:relative!important;
    z-index:2!important;
  }

  /* 左側コンテンツを最前面に固定 */
  .affiliate-hero__content{
    position:relative!important;
    z-index:10!important;
    opacity:1!important;
    visibility:visible!important;
  }

  .affiliate-kicker,
  .affiliate-brand-logo,
  .affiliate-hero h1,
  .affiliate-hero__lead,
  .affiliate-hero__text,
  .affiliate-hero__cta{
    position:relative;
    z-index:11!important;
    opacity:1!important;
    visibility:visible!important;
  }
}

@media screen and (max-width:767px){
  .affiliate-hero,
  .affiliate-hero__inner{
    isolation:isolate!important;
  }

  .affiliate-hero__content{
    position:relative!important;
    z-index:10!important;
    opacity:1!important;
    visibility:visible!important;
  }

  .affiliate-kicker,
  .affiliate-brand-logo,
  .affiliate-hero h1,
  .affiliate-hero__lead,
  .affiliate-hero__text,
  .affiliate-hero__visual-mobile,
  .affiliate-hero__cta,
  .affiliate-hero__scroll{
    position:relative;
    z-index:11!important;
    opacity:1!important;
    visibility:visible!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO — THICK SPIRAL + COPY SAFE v8
   - 参考画像に合わせて渦線を太く、光の帯として見せる
   - 左側コピー領域には侵入させない
   - HERO画像の背面〜外周だけで旋回
   ========================================================= */
@media screen and (min-width:768px){
  .affiliate-hero{
    background:
      radial-gradient(ellipse at 80% 52%,rgba(255,104,123,.12) 0%,rgba(255,182,192,.07) 31%,rgba(255,255,255,0) 60%),
      linear-gradient(90deg,#fff 0%,#fff 46%,#fffafa 58%,#fff2f4 80%,#ffe9ed 100%)!important;
  }

  /* 左の文章面を明確に保護。最適化の文字まで線を入れない */
  .affiliate-hero::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,
      #fff 0%,
      #fff 46%,
      rgba(255,255,255,1) 50%,
      rgba(255,255,255,.98) 54%,
      rgba(255,255,255,.82) 59%,
      rgba(255,255,255,.34) 64%,
      rgba(255,255,255,0) 70%)!important;
  }

  /* 渦全体を右へ寄せ、テキスト領域から切り離す */
  .tremo-energy-field{
    top:51%!important;
    right:-5%!important;
    width:min(55vw,860px)!important;
    height:min(92%,600px)!important;
    overflow:visible!important;
    transform:translateY(-50%) rotate(-6deg)!important;
    filter:drop-shadow(0 0 12px rgba(221,0,22,.16))!important;
  }

  /* 「細線」ではなく、透明感のある太いエネルギーバンド */
  .tremo-energy-ring{
    box-shadow:
      0 0 10px rgba(255,28,56,.30),
      0 0 24px rgba(255,79,101,.12),
      inset 0 0 6px rgba(255,255,255,.58)!important;
  }

  .tremo-energy-ring--1{
    width:98%!important;
    height:72%!important;
    border-width:10px 16px 7px 12px!important;
    border-color:rgba(255,108,124,.30) rgba(211,0,18,.88) rgba(255,180,189,.22) rgba(255,47,70,.72)!important;
    transform:translate(-50%,-50%) rotate(10deg) skewX(-5deg)!important;
    opacity:.92!important;
  }
  .tremo-energy-ring--2{
    width:84%!important;
    height:60%!important;
    border-width:15px 7px 10px 17px!important;
    border-color:rgba(229,0,20,.80) rgba(255,146,158,.28) rgba(196,0,16,.86) rgba(255,255,255,.72)!important;
    transform:translate(-50%,-50%) rotate(-18deg) skewX(7deg)!important;
    opacity:.90!important;
  }
  .tremo-energy-ring--3{
    width:70%!important;
    height:49%!important;
    border-width:7px 14px 16px 8px!important;
    border-color:rgba(255,255,255,.76) rgba(222,0,20,.90) rgba(255,62,86,.78) rgba(255,172,182,.24)!important;
    transform:translate(-50%,-50%) rotate(29deg) skewX(-8deg)!important;
    opacity:.88!important;
  }
  .tremo-energy-ring--4{
    width:57%!important;
    height:39%!important;
    border-width:13px 8px 6px 14px!important;
    border-color:rgba(210,0,18,.88) rgba(255,255,255,.68) rgba(255,124,139,.38) rgba(255,35,61,.76)!important;
    transform:translate(-50%,-50%) rotate(-35deg) skewX(6deg)!important;
    opacity:.84!important;
  }

  /* オブジェクト背面の中心は光だけ。丸い板にはしない */
  .tremo-energy-core{
    left:54%!important;
    top:52%!important;
    width:54%!important;
    background:radial-gradient(ellipse at center,
      rgba(255,255,255,.62) 0%,
      rgba(255,125,142,.12) 30%,
      rgba(230,0,20,.045) 50%,
      rgba(255,255,255,0) 74%)!important;
    filter:blur(13px)!important;
  }

  /* 背景線は常にビジュアルの背面、テキストは最前面 */
  .tremo-energy-field{z-index:1!important;}
  .affiliate-hero__visual{z-index:2!important;}
  .affiliate-hero__content{z-index:10!important;}
}

@media screen and (min-width:768px) and (max-width:1100px){
  .affiliate-hero::before{
    background:linear-gradient(90deg,#fff 0%,#fff 49%,rgba(255,255,255,.98) 57%,rgba(255,255,255,.35) 70%,rgba(255,255,255,0) 78%)!important;
  }
  .tremo-energy-field{
    right:-10%!important;
    width:58vw!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO — REFERENCE SPIRAL RESTORE v9
   - 最初の確認画像の「太い半透明ライトリボン」へ戻す
   - HERO画像を包む複数の赤い光帯
   - 左側コピー（「最適化。」含む）には侵入させない
   - 背景画像は使用せず CSS のみ
   ========================================================= */
@media screen and (min-width:768px){
  .affiliate-hero{
    background:
      radial-gradient(ellipse at 82% 49%,rgba(255,111,128,.13) 0%,rgba(255,176,186,.07) 30%,rgba(255,255,255,0) 58%),
      linear-gradient(90deg,#fff 0%,#fff 48%,#fffdfd 57%,#fff5f6 77%,#ffecef 100%)!important;
  }

  /* 左側コピー面は完全にクリーンな白で保持 */
  .affiliate-hero::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,
      #fff 0%,
      #fff 50%,
      rgba(255,255,255,.995) 54%,
      rgba(255,255,255,.93) 58%,
      rgba(255,255,255,.50) 63%,
      rgba(255,255,255,.12) 68%,
      rgba(255,255,255,0) 73%)!important;
  }

  /* 渦全体を右側だけに配置し、文字領域へ物理的に出さない */
  .tremo-energy-field{
    position:absolute!important;
    top:50%!important;
    right:-7%!important;
    left:auto!important;
    z-index:1!important;
    width:min(58vw,930px)!important;
    height:min(96%,620px)!important;
    overflow:hidden!important;
    pointer-events:none!important;
    transform:translateY(-50%) rotate(-3deg)!important;
    filter:none!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 7%,#000 18%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 7%,#000 18%,#000 100%)!important;
  }

  .tremo-energy-ring{
    position:absolute!important;
    top:50%!important;
    left:54%!important;
    border-style:solid!important;
    border-radius:50%!important;
    background:transparent!important;
    transform-origin:center!important;
    opacity:1!important;
    filter:drop-shadow(0 0 5px rgba(236,0,28,.18)) drop-shadow(0 0 14px rgba(255,66,88,.10))!important;
    box-shadow:none!important;
  }

  /* 上から大きく回り込むメインのライトリボン */
  .tremo-energy-ring--1{
    width:118%!important;
    height:84%!important;
    border-width:22px 31px 12px 21px!important;
    border-color:
      rgba(255,255,255,.78)
      rgba(218,0,21,.78)
      rgba(255,112,129,.23)
      rgba(255,157,169,.42)!important;
    transform:translate(-50%,-50%) rotate(-11deg) skewX(-6deg)!important;
  }

  /* 中央を巻く赤の主帯 */
  .tremo-energy-ring--2{
    width:95%!important;
    height:65%!important;
    border-width:27px 15px 21px 30px!important;
    border-color:
      rgba(255,89,109,.22)
      rgba(255,255,255,.72)
      rgba(198,0,18,.82)
      rgba(236,0,29,.72)!important;
    transform:translate(-50%,-50%) rotate(18deg) skewX(7deg)!important;
  }

  /* HERO下側から手前へ流れる太い光帯 */
  .tremo-energy-ring--3{
    width:86%!important;
    height:54%!important;
    border-width:15px 28px 32px 13px!important;
    border-color:
      rgba(255,255,255,.80)
      rgba(232,0,25,.66)
      rgba(218,0,22,.88)
      rgba(255,165,176,.20)!important;
    transform:translate(-50%,-50%) rotate(-24deg) skewX(-9deg)!important;
  }

  /* 内側のハイライト。細線にはせず半透明の帯として残す */
  .tremo-energy-ring--4{
    width:69%!important;
    height:43%!important;
    border-width:18px 10px 14px 23px!important;
    border-color:
      rgba(231,0,25,.52)
      rgba(255,255,255,.84)
      rgba(255,112,128,.30)
      rgba(204,0,18,.72)!important;
    transform:translate(-50%,-50%) rotate(35deg) skewX(6deg)!important;
    opacity:.92!important;
  }

  /* リボンの中央は白い光。丸いピンク板は作らない */
  .tremo-energy-core{
    position:absolute!important;
    left:55%!important;
    top:51%!important;
    width:62%!important;
    height:62%!important;
    aspect-ratio:auto!important;
    border-radius:50%!important;
    background:radial-gradient(ellipse at center,
      rgba(255,255,255,.70) 0%,
      rgba(255,244,246,.38) 27%,
      rgba(255,133,149,.10) 48%,
      rgba(255,255,255,0) 72%)!important;
    filter:blur(15px)!important;
    transform:translate(-50%,-50%) rotate(4deg)!important;
  }

  /* ビジュアル / テキストの前後関係 */
  .affiliate-hero__visual{z-index:3!important;}
  .affiliate-hero__content{z-index:10!important;}
  .affiliate-kicker,
  .affiliate-brand-logo,
  .affiliate-hero h1,
  .affiliate-hero__lead,
  .affiliate-hero__text,
  .affiliate-hero__cta{
    position:relative!important;
    z-index:11!important;
  }
}

@media screen and (min-width:768px) and (max-width:1100px){
  .affiliate-hero::before{
    background:linear-gradient(90deg,#fff 0%,#fff 52%,rgba(255,255,255,.98) 59%,rgba(255,255,255,.56) 67%,rgba(255,255,255,0) 76%)!important;
  }
  .tremo-energy-field{
    right:-13%!important;
    width:62vw!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO — ENERGY GATHER v10
   - 「線が回る」ではなく、光・粒子・エネルギー帯が中心へ凝縮
   - 太い半透明のエネルギー層を conic-gradient + mask で形成
   - HERO画像中心ほど白〜赤に強く発光
   - 左側コピー領域には侵入させない
   ========================================================= */
@media screen and (min-width:768px){
  .affiliate-hero{
    background:
      radial-gradient(ellipse at 79% 51%,rgba(255,70,92,.13) 0%,rgba(255,145,157,.075) 28%,rgba(255,255,255,0) 57%),
      linear-gradient(90deg,#fff 0%,#fff 49%,#fffdfd 58%,#fff7f8 78%,#ffeff1 100%)!important;
  }

  .affiliate-hero::before{
    background:linear-gradient(90deg,
      #fff 0%,#fff 51%,
      rgba(255,255,255,.995) 55%,
      rgba(255,255,255,.92) 59%,
      rgba(255,255,255,.48) 64%,
      rgba(255,255,255,.10) 69%,
      rgba(255,255,255,0) 74%)!important;
  }

  .tremo-energy-field{
    right:-4%!important;
    width:min(56vw,900px)!important;
    height:min(94%,610px)!important;
    overflow:hidden!important;
    transform:translateY(-50%) rotate(-2deg)!important;
    filter:saturate(1.12)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 8%,#000 22%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 8%,#000 22%,#000 100%)!important;
  }

  /* エネルギー粒子。中心に近いほど密度と輝度が高く見える */
  .tremo-energy-field::before,
  .tremo-energy-field::after{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    border-radius:50%;
  }

  .tremo-energy-field::before{
    left:19%;
    top:13%;
    width:76%;
    height:74%;
    background:
      radial-gradient(circle at 22% 68%,rgba(255,53,78,.72) 0 2px,transparent 3px),
      radial-gradient(circle at 31% 26%,rgba(255,115,131,.62) 0 2px,transparent 3px),
      radial-gradient(circle at 48% 19%,rgba(255,255,255,.92) 0 2px,transparent 3px),
      radial-gradient(circle at 72% 28%,rgba(225,0,24,.75) 0 2.5px,transparent 4px),
      radial-gradient(circle at 83% 51%,rgba(255,72,94,.78) 0 2px,transparent 3px),
      radial-gradient(circle at 68% 77%,rgba(255,255,255,.90) 0 2px,transparent 3px),
      radial-gradient(circle at 42% 82%,rgba(235,0,27,.68) 0 2.5px,transparent 4px),
      radial-gradient(circle at 56% 52%,rgba(255,255,255,.75) 0 1.5px,transparent 3px);
    filter:drop-shadow(0 0 8px rgba(235,0,27,.28));
    opacity:.88;
  }

  .tremo-energy-field::after{
    left:30%;
    top:24%;
    width:55%;
    height:54%;
    background:radial-gradient(ellipse at center,
      rgba(255,255,255,.88) 0%,
      rgba(255,224,229,.64) 17%,
      rgba(255,79,101,.26) 35%,
      rgba(221,0,24,.08) 53%,
      rgba(255,255,255,0) 72%);
    filter:blur(17px);
    opacity:.95;
  }

  /* 4枚の“線”を、厚みのあるエネルギー層へ置換 */
  .tremo-energy-ring{
    z-index:1!important;
    border:0!important;
    border-radius:50%!important;
    opacity:1!important;
    box-shadow:none!important;
    filter:blur(.35px) drop-shadow(0 0 12px rgba(225,0,25,.14))!important;
    -webkit-mask:radial-gradient(ellipse at center,transparent 52%,#000 57%,#000 72%,transparent 77%)!important;
    mask:radial-gradient(ellipse at center,transparent 52%,#000 57%,#000 72%,transparent 77%)!important;
  }

  .tremo-energy-ring--1{
    width:116%!important;
    height:86%!important;
    background:conic-gradient(from 200deg,
      transparent 0 7%,
      rgba(255,160,171,.18) 11%,
      rgba(255,255,255,.82) 16%,
      rgba(240,0,29,.66) 24%,
      rgba(255,82,105,.46) 31%,
      transparent 39%,
      rgba(255,255,255,.72) 49%,
      rgba(206,0,21,.73) 58%,
      rgba(255,126,143,.32) 66%,
      transparent 77% 100%)!important;
    transform:translate(-50%,-50%) rotate(-8deg) skewX(-5deg)!important;
    filter:blur(2.2px) drop-shadow(0 0 16px rgba(225,0,25,.18))!important;
  }

  .tremo-energy-ring--2{
    width:96%!important;
    height:68%!important;
    background:conic-gradient(from 22deg,
      rgba(255,255,255,.76) 0 9%,
      rgba(255,112,128,.34) 14%,
      transparent 22%,
      rgba(223,0,24,.72) 31%,
      rgba(255,65,88,.50) 40%,
      rgba(255,255,255,.84) 48%,
      transparent 59%,
      rgba(207,0,21,.72) 70%,
      rgba(255,139,153,.26) 80%,
      transparent 90% 100%)!important;
    transform:translate(-50%,-50%) rotate(16deg) skewX(6deg)!important;
    filter:blur(1.4px) drop-shadow(0 0 14px rgba(225,0,25,.20))!important;
  }

  .tremo-energy-ring--3{
    width:82%!important;
    height:56%!important;
    background:conic-gradient(from 145deg,
      transparent 0 12%,
      rgba(255,255,255,.90) 19%,
      rgba(255,92,113,.46) 28%,
      rgba(211,0,22,.78) 37%,
      transparent 47%,
      rgba(255,166,176,.30) 57%,
      rgba(235,0,27,.73) 68%,
      rgba(255,255,255,.82) 76%,
      transparent 88% 100%)!important;
    transform:translate(-50%,-50%) rotate(-21deg) skewX(-7deg)!important;
    filter:blur(.8px) drop-shadow(0 0 13px rgba(225,0,25,.22))!important;
  }

  .tremo-energy-ring--4{
    width:66%!important;
    height:45%!important;
    background:conic-gradient(from 300deg,
      rgba(255,255,255,.94) 0 8%,
      rgba(255,93,111,.54) 17%,
      rgba(202,0,20,.80) 28%,
      transparent 39%,
      rgba(255,255,255,.86) 52%,
      rgba(242,0,31,.68) 64%,
      rgba(255,130,145,.30) 74%,
      transparent 86% 100%)!important;
    transform:translate(-50%,-50%) rotate(31deg) skewX(5deg)!important;
    filter:blur(.35px) drop-shadow(0 0 12px rgba(225,0,25,.25))!important;
  }

  /* 中心へ“集まる”核。白熱した中心＋赤い外周グロー */
  .tremo-energy-core{
    z-index:2!important;
    left:55%!important;
    top:51%!important;
    width:50%!important;
    height:50%!important;
    background:
      radial-gradient(circle at 50% 50%,
        rgba(255,255,255,.98) 0%,
        rgba(255,247,248,.92) 12%,
        rgba(255,173,184,.55) 25%,
        rgba(255,53,79,.25) 41%,
        rgba(215,0,22,.08) 56%,
        rgba(255,255,255,0) 74%)!important;
    filter:blur(12px) drop-shadow(0 0 26px rgba(230,0,25,.16))!important;
    transform:translate(-50%,-50%)!important;
  }

  .affiliate-hero__visual{z-index:3!important;}
  .affiliate-hero__content{z-index:10!important;}
}

@media screen and (min-width:768px) and (max-width:1100px){
  .tremo-energy-field{
    right:-11%!important;
    width:61vw!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO — ENERGY GATHER v11 / TAPERED BANDS
   - HERO近傍は細く、外側へ離れるほど太くなる光帯
   - 半透明の赤い帯を複数層で前後に回り込ませる
   - 中心は白く発光、外周ほど赤を強くする
   - 左コピー領域には侵入しない
   ========================================================= */
@media screen and (min-width:768px){
  .tremo-energy-field{
    right:-3.5%!important;
    width:min(55vw,890px)!important;
    height:min(94%,610px)!important;
    overflow:visible!important;
    transform:translateY(-50%) rotate(-2deg)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 9%,rgba(0,0,0,.72) 19%,#000 27%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 9%,rgba(0,0,0,.72) 19%,#000 27%,#000 100%)!important;
  }

  .tremo-energy-ring{
    left:55%!important;
    top:51%!important;
    border:0!important;
    border-radius:50%!important;
    opacity:.97!important;
    mix-blend-mode:normal!important;
    background-color:transparent!important;
    box-shadow:none!important;
    transform-origin:center!important;
  }

  /* 最外周：最も太い。外周側ほど赤が濃い */
  .tremo-energy-ring--1{
    width:118%!important;
    height:90%!important;
    -webkit-mask:radial-gradient(ellipse at center,
      transparent 0 45%,
      rgba(0,0,0,.18) 48%,
      #000 53%,
      #000 73%,
      rgba(0,0,0,.36) 78%,
      transparent 82%)!important;
    mask:radial-gradient(ellipse at center,
      transparent 0 45%,
      rgba(0,0,0,.18) 48%,
      #000 53%,
      #000 73%,
      rgba(0,0,0,.36) 78%,
      transparent 82%)!important;
    background:
      radial-gradient(ellipse at center,transparent 0 48%,rgba(255,255,255,.45) 54%,rgba(255,112,129,.48) 63%,rgba(220,0,27,.80) 74%,rgba(184,0,22,.88) 82%,transparent 86%),
      conic-gradient(from 206deg,
        transparent 0 7%,rgba(255,255,255,.62) 13%,rgba(255,137,151,.60) 20%,rgba(211,0,25,.80) 28%,
        transparent 38%,rgba(255,236,239,.68) 48%,rgba(241,41,67,.64) 57%,rgba(185,0,21,.82) 66%,
        rgba(255,127,143,.44) 74%,transparent 84% 100%)!important;
    filter:blur(3.6px) drop-shadow(0 0 18px rgba(224,0,27,.16))!important;
    transform:translate(-50%,-50%) rotate(-8deg) skewX(-4deg)!important;
  }

  /* 外側2層目：中太 */
  .tremo-energy-ring--2{
    width:101%!important;
    height:73%!important;
    -webkit-mask:radial-gradient(ellipse at center,
      transparent 0 49%,rgba(0,0,0,.20) 52%,#000 56%,#000 70%,rgba(0,0,0,.32) 74%,transparent 78%)!important;
    mask:radial-gradient(ellipse at center,
      transparent 0 49%,rgba(0,0,0,.20) 52%,#000 56%,#000 70%,rgba(0,0,0,.32) 74%,transparent 78%)!important;
    background:
      radial-gradient(ellipse at center,transparent 0 51%,rgba(255,255,255,.60) 57%,rgba(255,128,143,.48) 64%,rgba(221,0,27,.72) 73%,transparent 80%),
      conic-gradient(from 24deg,
        rgba(255,255,255,.74) 0 8%,rgba(255,113,130,.44) 15%,transparent 24%,rgba(219,0,25,.75) 33%,
        rgba(255,75,96,.52) 42%,rgba(255,255,255,.78) 50%,transparent 61%,rgba(201,0,23,.76) 72%,transparent 88% 100%)!important;
    filter:blur(2.4px) drop-shadow(0 0 15px rgba(224,0,27,.18))!important;
    transform:translate(-50%,-50%) rotate(15deg) skewX(5deg)!important;
  }

  /* HEROに近い層：細め。白い発光を強める */
  .tremo-energy-ring--3{
    width:84%!important;
    height:59%!important;
    -webkit-mask:radial-gradient(ellipse at center,
      transparent 0 54%,rgba(0,0,0,.22) 56%,#000 59%,#000 67%,rgba(0,0,0,.28) 70%,transparent 73%)!important;
    mask:radial-gradient(ellipse at center,
      transparent 0 54%,rgba(0,0,0,.22) 56%,#000 59%,#000 67%,rgba(0,0,0,.28) 70%,transparent 73%)!important;
    background:
      radial-gradient(ellipse at center,transparent 0 55%,rgba(255,255,255,.90) 60%,rgba(255,178,188,.58) 64%,rgba(235,24,51,.64) 69%,transparent 75%),
      conic-gradient(from 146deg,
        transparent 0 12%,rgba(255,255,255,.92) 18%,rgba(255,109,126,.50) 25%,rgba(211,0,23,.72) 32%,
        transparent 44%,rgba(255,255,255,.84) 55%,rgba(231,0,26,.68) 65%,transparent 83% 100%)!important;
    filter:blur(1.35px) drop-shadow(0 0 13px rgba(224,0,27,.20))!important;
    transform:translate(-50%,-50%) rotate(-20deg) skewX(-5deg)!important;
  }

  /* 最内周：一番細い。HERO画像の直近だけを白赤く包む */
  .tremo-energy-ring--4{
    width:68%!important;
    height:47%!important;
    -webkit-mask:radial-gradient(ellipse at center,
      transparent 0 58%,rgba(0,0,0,.30) 60%,#000 62%,#000 67%,rgba(0,0,0,.22) 69%,transparent 71%)!important;
    mask:radial-gradient(ellipse at center,
      transparent 0 58%,rgba(0,0,0,.30) 60%,#000 62%,#000 67%,rgba(0,0,0,.22) 69%,transparent 71%)!important;
    background:
      radial-gradient(ellipse at center,transparent 0 59%,rgba(255,255,255,.98) 62%,rgba(255,207,214,.76) 64%,rgba(245,45,69,.64) 67%,transparent 72%),
      conic-gradient(from 300deg,
        rgba(255,255,255,.96) 0 8%,rgba(255,122,137,.54) 15%,rgba(207,0,22,.72) 23%,transparent 34%,
        rgba(255,255,255,.94) 49%,rgba(235,0,29,.62) 59%,transparent 78% 100%)!important;
    filter:blur(.55px) drop-shadow(0 0 12px rgba(224,0,27,.24))!important;
    transform:translate(-50%,-50%) rotate(30deg) skewX(4deg)!important;
  }

  /* 中心核は大きな赤丸にせず、HERO直近だけ白く発光 */
  .tremo-energy-core{
    left:55%!important;
    top:51%!important;
    width:42%!important;
    height:42%!important;
    opacity:.92!important;
    background:radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.98) 0%,rgba(255,248,249,.91) 15%,rgba(255,214,220,.52) 28%,
      rgba(255,76,96,.18) 43%,rgba(210,0,23,.05) 58%,transparent 73%)!important;
    filter:blur(13px) drop-shadow(0 0 22px rgba(226,0,27,.13))!important;
  }

  /* 粒子は線より控えめにし、帯の存在感を優先 */
  .tremo-energy-field::before{opacity:.52!important;filter:drop-shadow(0 0 7px rgba(235,0,27,.22))!important;}
  .tremo-energy-field::after{opacity:.68!important;filter:blur(19px)!important;}

  .affiliate-hero__visual{z-index:4!important;}
  .affiliate-hero__content{z-index:10!important;}
}

@media screen and (min-width:768px) and (max-width:1100px){
  .tremo-energy-field{
    right:-10%!important;
    width:61vw!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO — ENERGY GATHER v13 / BALANCED EXTRA BANDS
   - v12の内側2本を維持
   - 最外周には戻さず、中間距離に2本だけ追加
   - HERO近傍は細く白寄り、離れるほど少し太く赤寄り
   ========================================================= */
@media screen and (min-width:768px){
  .tremo-energy-ring--mid-a,
  .tremo-energy-ring--mid-b{
    position:absolute!important;
    left:55%!important;
    top:51%!important;
    z-index:2!important;
    border:0!important;
    border-radius:50%!important;
    background-color:transparent!important;
    box-shadow:none!important;
    pointer-events:none!important;
    transform-origin:center!important;
  }

  /* 既存ring--3より少し外側。ただし外周背景にはしない */
  .tremo-energy-ring--mid-a{
    width:92%!important;
    height:64%!important;
    -webkit-mask:radial-gradient(ellipse at center,
      transparent 0 51%,rgba(0,0,0,.18) 53%,#000 56%,#000 66%,rgba(0,0,0,.26) 69%,transparent 72%)!important;
    mask:radial-gradient(ellipse at center,
      transparent 0 51%,rgba(0,0,0,.18) 53%,#000 56%,#000 66%,rgba(0,0,0,.26) 69%,transparent 72%)!important;
    background:
      radial-gradient(ellipse at center,
        transparent 0 53%,rgba(255,255,255,.72) 57%,rgba(255,160,172,.50) 62%,rgba(226,8,36,.70) 68%,transparent 74%),
      conic-gradient(from 72deg,
        transparent 0 9%,rgba(255,255,255,.82) 16%,rgba(255,122,139,.48) 23%,rgba(218,0,28,.72) 31%,
        transparent 42%,rgba(255,245,247,.76) 52%,rgba(240,25,54,.62) 61%,transparent 76% 100%)!important;
    filter:blur(1.8px) drop-shadow(0 0 14px rgba(224,0,27,.18))!important;
    opacity:.88!important;
    transform:translate(-50%,-50%) rotate(9deg) skewX(4deg)!important;
  }

  /* ring--3とring--4の間にもう1本。中心側なのでより細く白熱 */
  .tremo-energy-ring--mid-b{
    width:76%!important;
    height:53%!important;
    -webkit-mask:radial-gradient(ellipse at center,
      transparent 0 56%,rgba(0,0,0,.24) 58%,#000 60%,#000 67%,rgba(0,0,0,.22) 69%,transparent 71%)!important;
    mask:radial-gradient(ellipse at center,
      transparent 0 56%,rgba(0,0,0,.24) 58%,#000 60%,#000 67%,rgba(0,0,0,.22) 69%,transparent 71%)!important;
    background:
      radial-gradient(ellipse at center,
        transparent 0 57%,rgba(255,255,255,.94) 60%,rgba(255,196,204,.66) 63%,rgba(240,40,66,.62) 67%,transparent 72%),
      conic-gradient(from 232deg,
        rgba(255,255,255,.92) 0 7%,rgba(255,137,151,.50) 14%,transparent 24%,rgba(214,0,25,.68) 34%,
        rgba(255,255,255,.86) 47%,rgba(237,17,47,.60) 58%,transparent 73% 100%)!important;
    filter:blur(.9px) drop-shadow(0 0 12px rgba(224,0,27,.21))!important;
    opacity:.92!important;
    transform:translate(-50%,-50%) rotate(-11deg) skewX(-4deg)!important;
  }
}

/* =========================================================
   2026-09-10 | TREMO HERO — HERO-CENTERED ORBITS v17
   優先順位：HERO画像を共通中心 / 背面 / 広範囲・二段濃色 / 5px線
   ========================================================= */
@media screen and (min-width:768px){
  .affiliate-hero{
    isolation:isolate!important;
    background:
      radial-gradient(ellipse at 80% 53%,rgba(247,65,88,.15) 0%,rgba(255,132,148,.09) 50%,rgba(255,212,219,.025) 85%,rgba(255,255,255,0) 100%),
      linear-gradient(90deg,#fff 0%,#fff 18%,#fffafb 34%,#ffedf1 100%)!important;
  }

  .affiliate-hero::before{
    z-index:0!important;
    background:linear-gradient(90deg,
      #fff 0%,#fff 25%,rgba(255,255,255,.99) 27%,
      rgba(255,255,255,.80) 30%,rgba(255,255,255,.34) 33%,
      rgba(255,255,255,.06) 36%,rgba(255,255,255,0) 39%)!important;
  }

  .affiliate-hero__inner{
    position:relative!important;
    z-index:1!important;
    isolation:isolate!important;
  }

  .tremo-energy-field{
    position:absolute!important;
    top:50%!important;
    right:auto!important;
    left:50%!important;
    z-index:1!important;
    width:100vw!important;
    height:min(100%,660px)!important;
    display:block!important;
    overflow:visible!important;
    opacity:1!important;
    filter:none!important;
    transform:translate(-50%,-50%) rotate(-2deg)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.24) 2%,rgba(0,0,0,.78) 6%,#000 11%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.24) 2%,rgba(0,0,0,.78) 6%,#000 11%,#000 100%)!important;
    pointer-events:none!important;
  }

  .tremo-energy-field::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
    border-radius:50%!important;
    background:radial-gradient(ellipse at 80% 53%,
      rgba(255,255,255,.72) 0%,rgba(255,226,232,.44) 31%,
      rgba(236,39,64,.11) 54%,rgba(255,255,255,0) 82%)!important;
    filter:blur(14px)!important;
    opacity:.72!important;
  }

  .tremo-energy-field::after{
    content:none!important;
    display:none!important;
  }

  .tremo-energy-ring{
    position:absolute!important;
    left:80%!important;
    top:53%!important;
    z-index:1!important;
    border-style:solid!important;
    border-width:5px!important;
    border-radius:50%!important;
    background:none!important;
    background-color:transparent!important;
    box-shadow:none!important;
    filter:none!important;
    opacity:.80!important;
    -webkit-mask:none!important;
    mask:none!important;
    mix-blend-mode:multiply!important;
    transform-origin:center!important;
    pointer-events:none!important;
  }

  .tremo-energy-ring--1{width:160%!important;height:112%!important;border-color:rgba(226,20,43,.18)!important;transform:translate(-50%,-50%) rotate(-10deg) skewX(-3deg)!important;}
  .tremo-energy-ring--2{width:148%!important;height:103%!important;border-color:rgba(231,38,58,.21)!important;transform:translate(-50%,-50%) rotate(7deg) skewX(2deg)!important;}
  .tremo-energy-ring--3{width:136%!important;height:94%!important;border-color:rgba(224,14,38,.23)!important;transform:translate(-50%,-50%) rotate(-17deg) skewX(-2deg)!important;}
  .tremo-energy-ring--4{width:124%!important;height:86%!important;border-color:rgba(238,62,80,.22)!important;transform:translate(-50%,-50%) rotate(15deg) skewX(3deg)!important;}
  .tremo-energy-ring--5{width:112%!important;height:78%!important;border-color:rgba(218,0,26,.25)!important;transform:translate(-50%,-50%) rotate(-6deg) skewX(-2deg)!important;}
  .tremo-energy-ring--6{width:101%!important;height:70%!important;border-color:rgba(242,80,96,.23)!important;transform:translate(-50%,-50%) rotate(21deg) skewX(2deg)!important;}
  .tremo-energy-ring--7{width:90%!important;height:63%!important;border-color:rgba(220,5,31,.26)!important;transform:translate(-50%,-50%) rotate(-23deg) skewX(-3deg)!important;}
  .tremo-energy-ring--8{width:80%!important;height:57%!important;border-color:rgba(240,74,92,.24)!important;transform:translate(-50%,-50%) rotate(11deg) skewX(2deg)!important;}
  .tremo-energy-ring--9{width:71%!important;height:51%!important;border-color:rgba(215,0,25,.27)!important;transform:translate(-50%,-50%) rotate(-12deg) skewX(-2deg)!important;}
  .tremo-energy-ring--10{width:63%!important;height:46%!important;border-color:rgba(239,61,79,.25)!important;transform:translate(-50%,-50%) rotate(27deg) skewX(2deg)!important;}
  .tremo-energy-ring--11{width:56%!important;height:41%!important;border-color:rgba(212,0,24,.28)!important;transform:translate(-50%,-50%) rotate(-28deg) skewX(-2deg)!important;}
  .tremo-energy-ring--12{width:50%!important;height:36%!important;border-color:rgba(235,48,68,.26)!important;transform:translate(-50%,-50%) rotate(5deg) skewX(1deg)!important;}

  .tremo-energy-core{
    position:absolute!important;
    left:80%!important;
    top:53%!important;
    z-index:0!important;
    width:43%!important;
    height:43%!important;
    border:0!important;
    border-radius:50%!important;
    background:radial-gradient(ellipse at center,
      rgba(255,255,255,.92) 0%,rgba(255,246,248,.56) 25%,
      rgba(239,75,94,.075) 49%,rgba(255,255,255,0) 74%)!important;
    filter:blur(15px)!important;
    opacity:.74!important;
    transform:translate(-50%,-50%)!important;
  }

  .affiliate-hero__visual{z-index:4!important;}
  .affiliate-hero__visual img{position:relative!important;z-index:4!important;}
  .affiliate-hero__content{z-index:10!important;}
}

@media screen and (min-width:768px) and (max-width:1100px){
  .tremo-energy-field{
    right:auto!important;
    left:50%!important;
    width:100vw!important;
  }
}

@media screen and (max-width:767px){
  .affiliate-hero{
    background:linear-gradient(180deg,#fff 0%,#fff 45%,#fff7f8 68%,#ffedf0 100%)!important;
  }

  .affiliate-hero__visual-mobile.service-reveal-mobile-visual{
    position:relative!important;
    isolation:isolate!important;
    overflow:visible!important;
  }

  .affiliate-hero__visual-mobile.service-reveal-mobile-visual::before{
    content:""!important;
    position:absolute!important;
    inset:-5% -26% -3%!important;
    z-index:0!important;
    display:block!important;
    border-radius:50%!important;
    background:
      repeating-radial-gradient(ellipse at 54% 50%,
        transparent 0 9px,rgba(224,18,43,.18) 9.5px 14.5px,
        transparent 15px 20px),
      radial-gradient(ellipse at 54% 50%,rgba(242,72,91,.14) 0%,rgba(250,141,154,.075) 48%,rgba(255,255,255,0) 100%)!important;
    opacity:.88!important;
    transform:rotate(-5deg)!important;
    pointer-events:none!important;
  }

  .affiliate-hero__visual-mobile.service-reveal-mobile-visual::after{
    content:none!important;
    display:none!important;
  }

  .affiliate-hero__visual-mobile.service-reveal-mobile-visual img{
    position:relative!important;
    z-index:1!important;
  }
}

/* =========================================================
   2026-09-11 | TREMO HERO — APPROVED BACKGROUND IMAGE
   完成見本から抽出した背景をPC版HEROの最背面へ配置。
   旧CSS軌道は重複描画を避けるためPC版のみ停止する。
   ========================================================= */
@media screen and (min-width:768px){
  .affiliate-hero{
    isolation:isolate!important;
    background-color:#fff!important;
    background-image:url("../img/vector/tremo-hero-background.png")!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:cover!important;
  }

  .affiliate-hero::before,
  .affiliate-hero::after,
  .affiliate-hero__inner::before,
  .affiliate-hero__inner::after,
  .affiliate-hero__visual::before{
    content:none!important;
    display:none!important;
    background:none!important;
  }

  .tremo-energy-field{
    display:none!important;
  }

  .affiliate-hero__inner{
    position:relative!important;
    z-index:1!important;
  }

  .affiliate-hero__content{
    position:relative!important;
    z-index:3!important;
  }

  .affiliate-hero__visual,
  .affiliate-hero__visual img{
    z-index:2!important;
  }
}

/* =========================================================
   2026-09-11 | TREMO HERO — REFERENCE-EXACT DESKTOP ALIGNMENT
   Reference canvas: 1536 × 620 (supplied image: 1974 × 797)
   The background focal point and the transparent HERO image share
   one percentage-based center so they cannot drift apart.
   ========================================================= */
@media screen and (min-width:1101px){
  .affiliate-hero{
    height:clamp(620px,40.375vw,797px)!important;
    min-height:0!important;
    background-position:0 0!important;
    background-size:100% 100%!important;
  }

  .affiliate-hero__inner{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0 52px!important;
    display:grid!important;
    grid-template-columns:minmax(0,56%) minmax(0,44%)!important;
    gap:38px!important;
    align-items:center!important;
  }

  .affiliate-hero__content{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    align-self:center!important;
  }

  .affiliate-hero__visual{
    position:absolute!important;
    left:75.10%!important;
    top:49.00%!important;
    right:auto!important;
    bottom:auto!important;
    width:min(40.274vw,795px)!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    display:block!important;
    overflow:visible!important;
    transform:translate(-50%,-50%)!important;
    pointer-events:none!important;
  }

  .affiliate-hero__visual img{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }
}

/* =========================================================
   2026-09-12 | TREMO SP HERO — PC BACKGROUND UNIFICATION
   - SP版HEROセクション全体にPC版と同じ背景画像を使用
   - 現在のSPレイアウト（ロゴ / 見出し / 本文 / HERO画像 / CTA / SCROLL）は維持
   - 旧SP用の疑似要素背景・リング背景は停止
   - HERO画像 tremo-hero-final.png は現状のまま前面に残す
   ========================================================= */
@media screen and (max-width:767px){
  .affiliate-hero{
    position:relative!important;
    isolation:isolate!important;
    background-color:#fff!important;
    background-image:url("../img/vector/tremo-hero-background.png")!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:72% center!important;
  }

  .affiliate-hero::before,
  .affiliate-hero::after,
  .affiliate-hero__inner::before,
  .affiliate-hero__inner::after,
  .affiliate-hero__visual-mobile.service-reveal-mobile-visual::before,
  .affiliate-hero__visual-mobile.service-reveal-mobile-visual::after{
    content:none!important;
    display:none!important;
    background:none!important;
    filter:none!important;
    box-shadow:none!important;
  }

  .tremo-energy-field{
    display:none!important;
  }

  .affiliate-hero__inner{
    position:relative!important;
    z-index:1!important;
    background:transparent!important;
  }

  .affiliate-hero__content{
    position:relative!important;
    z-index:2!important;
    background:transparent!important;
  }

  .affiliate-kicker,
  .affiliate-brand-logo,
  .affiliate-hero h1,
  .affiliate-hero__lead,
  .affiliate-hero__text,
  .affiliate-hero__visual-mobile,
  .affiliate-hero__cta,
  .affiliate-hero__scroll{
    position:relative!important;
    z-index:3!important;
  }

  .affiliate-hero__visual-mobile.service-reveal-mobile-visual{
    background:transparent!important;
  }

  .affiliate-hero__visual-mobile.service-reveal-mobile-visual img{
    position:relative!important;
    z-index:1!important;
  }
}

@media screen and (max-width:390px){
  .affiliate-hero{
    background-position:76% center!important;
  }
}