@charset "utf-8";

/* ===== Base / Variables ===== */
:root{
  --bg:#fff; --fg:#f5f5f5; --muted:#bdbdbd;
  --max:1120px; --pad: min(4vw, 24px);
  --intro-delay-logo:.42s; --intro-delay-lb:.62s; --intro-delay-rb:.70s;
  --tam-color-bg:#0c0c0c; --tam-color-text:#f6f6f6; --tam-color-text_k:#292929;
  --tam-color-muted:#e9eef2; --tam-color-accent:#f19d00; --tam-color-border:rgba(255,255,255,.15);
  --tam-sp-1:4px; --tam-sp-2:8px; --tam-sp-4:16px; --tam-sp-6:24px; --tam-sp-8:32px; --tam-sp-12:48px; --tam-sp-16:64px;
  --tam-radius:16px; --tam-maxw:1200px; --tam-z-ui:950;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;
  color:var(--fg); background:var(--bg);
}
.tam-section{ padding:clamp(80px,12vh,160px) 0; }
.tam-container{ width:min(100% - 32px,var(--tam-maxw)); margin-inline:auto; }
.ff_type_m{ font-family:"Montserrat",sans-serif; font-style:normal; }
.ff_type_r{ font-family:"Red Hat Display",sans-serif; font-optical-sizing:auto; font-style:normal; }

/* PC/SP visibility */
.pc-only{display:block}
.sp-only{display:none}
@media (max-width:767px){
  .pc-only{display:none}
  .sp-only{display:block}
}

/* ===== HERO (FV/SV) ===== */
.h1{ position:relative; height:200svh; isolation:isolate; }
.h1-bgSticky{ position:sticky; top:0; height:100svh; overflow:hidden; z-index:1; opacity:1; }
.h1-bg{
  position:absolute; inset:0; display:grid; z-index:0;
  opacity:0; transform:scale(1.02);
  transition:opacity .6s ease, transform .8s ease;
  background:none;
}
.h1-pane{
  background-size:cover; background-position:center; background-repeat:no-repeat; filter:brightness(.98);
}
@media (min-width:768px){
  .h1-bg{ grid-template-columns:1fr 1fr; }
  .h1-pane--a{ background-image:url("../img/fv_bg_l.jpg"); }
  .h1-pane--b{ background-image:url("../img/fv_bg_r.jpg"); }
}
@media (max-width:767.98px){
  .h1-bg{ grid-template-rows:1fr 1fr; }
  .h1-pane--a{ background-image:url("../img/fv_bg_top.jpg"); }
  .h1-pane--b{ background-image:url("../img/fv_bg_bottom.jpg"); }
}
.h1-dim{ position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .3s ease; }

.h1-center{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,calc(-50% + var(--ty,0px)));
  width:min(88vw,960px); text-align:center; z-index:2; color:#fff; will-change:transform,opacity;
}
.h1-center--fv{ opacity:0; transition:opacity .45s ease, transform .45s ease; }
.h1.is-ready .h1-bg{ opacity:1; transform:none; }
.h1.is-ready .h1-center--fv{ opacity:1; }

.h1-kicker{ margin:0 0 .7rem; letter-spacing:.06em; font-size:clamp(20px,1.3vw,30px); }
.h1-logo{ margin:0; font-weight:400; font-size:clamp(80px,5.4vw,160px); letter-spacing:.02em; }
.h1-logo small{ font-size:.3em; vertical-align:text-top; position:relative; top:.6em; left:.1em; }
.h1-sub{ margin:.7rem 0 0; letter-spacing:.1em; font-size:clamp(16px,1vw,24px); }
.tam-hero-meta{ letter-spacing:.12em; font-size:clamp(12px,1.6vw,16px); opacity:.95; margin:.6em 0 0; }
.tam-paren--left{ margin-right:.35em; font-size:clamp(20px,1.6vw,22px); font-weight:300; }
.tam-paren--right{ margin-left:.35em; font-size:clamp(20px,1.6vw,22px); font-weight:300; }

.h1-lb,.h1-rb{ position:absolute; bottom:32px; z-index:3; opacity:0; transform:translateY(12px); transition:.5s ease; }
.h1-lb{ left:32px } .h1-rb{ right:32px }
.h1.is-ready .h1-lb,.h1.is-ready .h1-rb{ opacity:1; transform:none; }

.h1-scroll{ width:84px; height:84px; border-radius:999px; display:grid; place-items:center; color:#fff; opacity:.92; position:relative; }
.h1-scroll::before{ content:""; position:absolute; inset:0; border:1px dashed rgba(255,255,255,.65); border-radius:inherit; animation:h1-rot 20s linear infinite; }
@keyframes h1-rot{ to{ transform:rotate(360deg); } }
.h1-scroll__text{ font-size:10px; line-height:1.5; letter-spacing:.08em; font-weight:500; text-align:center; }
.h1-buybtn{ display:inline-flex; gap:.6em; align-items:center; padding:.85em 2.2em!important; border-radius:999px; background:#f6a117; color:#fff; text-decoration:none; transition:.25s; font-size:16px; }
.h1-buybtn:hover{ background:#000; }

.h1-sv{
  position:sticky; top:50svh; transform:translateY(-50%);
  z-index:2; color:#eee; text-align:center; width:min(88vw,960px); margin:0 auto;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.h1-line{ margin:0 0 45px; line-height:2.2; opacity:0; transform:translateY(28px); transition:opacity .3s ease, transform .3s ease; font-size:clamp(17px,1vw,26px); }
.h1-line:last-child{ margin-bottom:0; }
.next{ padding:900px 0; text-align:center; background:#ccc; color:#000; }

@media (max-width:767.98px){
  .h1-lb{ left:18px; bottom:20px } .h1-rb{ right:18px; bottom:20px }
  .h1-scroll{ width:70px; height:70px }
  .h1-buybtn{ transform:scale(.85); transform-origin:bottom right }
  .h1-buybtn:hover{ transform:scale(.85) translateY(-1px) }
  .h1-line{ font-size:13px; margin-bottom:18px }
  .h1--mobile-merge .h1-sv{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:min(88vw,960px); margin:0; z-index:2;
  }
}

/* HERO staged entrance */
#hero.h1 #h1-bg{ opacity:0 }
#hero.h1 #h1-fv .h1-scale{ opacity:0; transform:translateY(24px) }
#hero.h1 .h1-lb,#hero.h1 .h1-rb{ opacity:0; transform:translateY(24px) }
#hero.h1 #h1-bg.is-in{ animation:h1Fade .7s ease-out both }
#hero.h1 #h1-fv.is-in-up .h1-scale{ animation:h1FadeUp .3s ease-out both }
#hero.h1 .h1-lb.is-in-up,#hero.h1 .h1-rb.is-in-up{ animation:h1FadeUp .6s ease-out both }
@keyframes h1Fade{ from{opacity:0} to{opacity:1} }
@keyframes h1FadeUp{ from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none} }
#hero.h1{ contain:paint }
@media (prefers-reduced-motion:reduce){
  #hero.h1 #h1-bg,#hero.h1 #h1-fv .h1-scale,#hero.h1 .h1-lb,#hero.h1 .h1-rb{
    opacity:1!important; transform:none!important; animation:none!important;
  }
}

/* sp AddressBar_BG */
@media (max-width: 767.98px){:root{ --dvh: 100svh; } 
  @supports (height: 100dvh){:root{ --dvh: 100dvh; } }
  #hero.h1{ height: calc(var(--dvh) * 2); }
  #hero.h1 .h1-bgSticky{ height: var(--dvh); }
  #hero.h1 .h1-sv{ top: calc(var(--dvh) / 2); }
  #hero.h1.h1--mobile-merge .h1-sv{ top: 50%; left: 50%; transform: translate(-50%, -50%);}
}


/* ===== Materials ===== */
.tam-hero{ background:transparent }
.tam-section--materials{
  position:relative; background:none!important; background-color:#f3f3f2; overflow:hidden; color:#fff; margin-top:-1px;
  position: relative;
  z-index: 2; 
  color: #fff;
  background: url('../img/material_bg.jpg') top center / cover no-repeat; 
  padding: 670px 0 0; 
  margin-top: -1px; 
}
@media (max-width: 900px){
  .tam-section--materials{
  position: relative;  
  background-image:  url('../img/material_bg.jpg');
  background-size: 100% auto; 
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #f3f3f2;
  padding: 130px 0 0;
}
}
.tam-section--materials::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-color:#f3f3f2;
  background-image:url('../img/material_bg.jpg');
  background-repeat:no-repeat; background-position:top center; background-size:cover;
  opacity:0; transition:opacity .8s ease;
}
.tam-section--materials.is-bg-in::before{ opacity:1 }
@media (max-width:767px){
  .tam-section--materials::before{ background-size:100% auto }
}
.tam-materials-inner{ position:relative; z-index:1; max-width:1130px; padding:clamp(64px,10vh,66px) 0 165px; margin:0 auto; }
@media (max-width:767px){
  .tam-materials-inner{ width:80%; padding:clamp(64px,10vh,120px) 0 100px }
}
.tam-mat-kicker{ text-align:right; color:var(--tam-color-text_k); margin:0 0 12px; font-size:14px; letter-spacing:.08em; }
@media (max-width:767px){ .tam-mat-kicker{ text-align:left; margin:30px 0 20px } }
.tam-mat-kicker span{ color:#f19d00; font-size:7px; vertical-align:middle }
.tam-mat-heading{ color:#9e9f9f; font-weight:100; letter-spacing:.06em; font-size:clamp(46px,7vw,82px); line-height:1.09; margin:.1em 0 .6em; text-align:right; }
@media (max-width:767px){ .tam-mat-heading{ font-size:54px; text-align:left } }
.tam-mat-lead{
  max-width:630px; line-height:2.1; color:var(--tam-color-text_k);
  margin-left:auto; margin-right:0; text-align:left; font-size:clamp(14px,7vw,15px);
}
.tam-mat-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,3vw,44px); margin-top:clamp(30px,67vh,80px);
}
@media (max-width:767px){
  .tam-mat-grid{ grid-template-columns:1fr; margin-top:clamp(35px,67vh,40px) }
}
.tam-mat-card{ background:#fff; border-radius:60px; padding:32px 28px 50px; text-align:center; }
.tam-mat-eyebrow{ color:var(--tam-color-text_k); font-size:14px; letter-spacing:.06em; margin:20px 0 16px; font-weight:400; }
.tam-mat-icon{ width:120px; height:80px; margin:50px auto; display:grid; place-items:center; }
@media (max-width:767px){ .tam-mat-icon{ margin:35px auto } }
.tam-mat-icon img{ max-width:100%; height:auto }
.tam-mat-title{ font-size:28px; letter-spacing:.3em; margin:8px 0 40px; font-weight:400; }
.tam-mat-title--red{ color:#cf7060 } .tam-mat-title--blue{ color:#3e94a6 } .tam-mat-title--green{ color:#65846a }
.tam-mat-desc{ color:var(--tam-color-text_k); line-height:1.9; text-align:left; margin:0 auto; max-width:90% }

/* ===== Storage ===== */
.tam-section--storage{ position:relative; isolation:isolate; background:#e9e9e9; padding:0; overflow:hidden; display:block; }
.tam-storage-stage{
  position:relative; width:min(100%,1400px); margin:0 auto; overflow:hidden;
  --storage-aspect-pc:90%; --storage-aspect-sp:150%; --storage-aspect:var(--storage-aspect-pc);
}
.tam-storage-stage::before{ content:""; display:block; padding-top:var(--storage-aspect); }
.tam-storage-bg{ position:absolute; inset:-12% -2%; z-index:1; display:block; pointer-events:none; will-change:transform; transform:translateY(0); }
.tam-storage-bg>img{ width:100%; height:100%; object-fit:cover; display:block; }
.tam-storage-head,.tam-storage-vcopy,.tam-storage-hcopy,.tam-storage-logo{ position:absolute; z-index:2; }
.tam-storage-head{ left:clamp(100px,7vw,200px); top:clamp(100px,3vw,56px); color:#111; text-align:left; }
.tam-storage-head h2{ margin:0 0 6px; font-size:clamp(40px,3.2vw,46px); font-weight:400; letter-spacing:.02em; line-height:1; }
.tam-storage-head .tam-size{ font-size:.4em; vertical-align:top; margin-left:.25em; font-weight:500; position:relative; top:5px; }
.tam-storage-head .tam-kicker{ margin:0; font-size:clamp(15px,1.4vw,17px); color:#292929; letter-spacing:.05em; font-weight:500; }
.tam-storage-head .tam-kicker span{ color:var(--tam-color-accent); font-size:7px; vertical-align:middle; margin-right:6px; }
.tam-storage-vcopy{
  right:clamp(100px,7vw,200px); top:clamp(100px,3vw,56px); margin:0;
  font-size:clamp(16px,1.8vw,27px); line-height:2; letter-spacing:.06em;
  writing-mode:vertical-rl; text-orientation:mixed; color:#333; text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.tam-storage-logo{ right:clamp(100px,7vw,200px); bottom:clamp(16px,5vh,40px); width:clamp(80px,14vw,90px); display:block; }
.tam-storage-hcopy{ display:none; }
@media (prefers-reduced-motion:reduce){ .tam-storage-bg{ transform:none!important } }
@media (max-width:767px){
  .tam-storage-stage{ --storage-aspect:200%; width:100%; max-width:none; }
  .tam-storage-head{ left:50%; top:clamp(30px,12vh,80px); transform:translateX(-50%); text-align:center; }
  .tam-storage-vcopy{ display:none }
  .tam-storage-hcopy{
    display:block; left:50%; top:clamp(100px,35vh,180px); transform:translateX(-50%);
    margin:0; width:min(88%,520px); text-align:center; font-size:clamp(22px,4.6vw,24px); line-height:1.9; letter-spacing:.04em; color:#333;
    text-shadow:0 1px 0 rgba(255,255,255,.45);
  }
  .tam-storage-logo{ right:auto; left:50%; transform:translateX(-50%); width:clamp(60px,34vw,75px); bottom:clamp(20px,8vh,30px) }
}

/* ===== Video ===== */
.tam-section--video{ position:relative; height:750px; width:100%; overflow:hidden; isolation:isolate; }
.tam-video-canvas{ position:absolute; inset:0; z-index:0; }
.tam-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.tam-video-overlay{ position:absolute; z-index:1; top:clamp(20px,7vh,80px); left:clamp(16px,6vw,80px); display:grid; gap:clamp(13px,1vh,14px); color:#fff; }
.tam-video-copy{ margin:0; display:grid; gap:.15em; font-weight:400; letter-spacing:.08em; line-height:1.1; font-size:clamp(22px,4.2vw,30px); }
.tam-video-copy .tam-size{ font-size:.55em; font-weight:400; vertical-align:top; position:relative; margin-left:5px; top:3px; }
.tam-video-ig{ width:clamp(18px,2.4vw,26px); height:clamp(18px,2.4vw,26px); display:inline-grid; place-items:center; }
.tam-video-ig img{ width:100%; height:auto; display:block; }
@media (max-width:767px){
  .tam-section--video{ height:520px }
  .tam-video-overlay{ top:clamp(16px,8vh,40px); left:clamp(14px,6vw,40px) }
}

/* ===== Features ===== */
.tam-section--features{ position:relative; z-index:5; background:#fff; padding-top:150px; }
@media (max-width:767px){ .tam-section--features{ padding-top:70px; } }
.tam-container.feat-head{ margin-bottom:clamp(40px,3.6vw,45px); padding-left:calc(56px + clamp(14px,2.4vw,24px)); }
@media (max-width:767px){ .tam-container.feat-head{ padding-left:calc(48px + clamp(14px,2.4vw,24px)) } }
@media (max-width:767px){
  .tam-container.feat-head{ padding-left:0 }
  .feat-title{ justify-content:center; text-align:center }
  .feat-title .feat-sub{ display:block; margin:.4em auto 0; text-align:center; position:static; top:0 }
}
.frat_title_en{ font-family:"Montserrat",sans-serif; font-weight:400; font-size:clamp(48px,2.6vw,50px); }
@media (max-width:767px){ .frat_title_en{ font-size:clamp(33px,2.6vw,35px) } }

.feat-title{
  font-weight:400; font-size:clamp(40px,2.6vw,40px); color:#111; letter-spacing:.11em;
  display:flex; align-items:center; gap:.3em; flex-wrap:wrap;
}
.feat-title .tam-size{ font-size:.3em; position:relative; top:13px; vertical-align:top; margin-left:0 }
.feat-title .feat-sub{
  font-weight:500; color:#292929; font-size:.4em; letter-spacing:.05em;
  display:inline-flex; align-items:center; margin-left:.7em; position:relative; top:3px;
}
.feat-title .feat-sub i{ width:.4em; height:.4em; border-radius:50%; background:var(--tam-color-accent); margin-right:.4em; transform:translateY(-.05em) }
@media (max-width:767px){
  .feat-title{ font-size:clamp(28px,2.6vw,30px); flex-direction:column; align-items:center; gap:0; text-align:center }
  .feat-title .feat-sub{ display:flex; justify-content:center; margin:0; font-size:.5em; position:static }
  .feat-title .tam-size{ font-size:.35em; top:6px }
}

.feat-wrap{ display:grid; grid-template-columns:56px 1fr; gap:clamp(14px,2.4vw,24px); }

@media (max-width:767px){ .feat-wrap{ grid-template-columns:38px 1fr } }

.feat-nav{ position:sticky; top:clamp(60px,14vh,120px); align-self:start; width:100%; display:grid; place-items:center; }
.feat-nav ol{ margin:0; padding:90px 0 55px; list-style:none; width:60px; background:#f6f7f8; border-radius:999px; position:relative; }
.feat-nav ol::before{
  content:""; position:absolute; left:50%; top:60px; transform:translateX(-50%);
  width:16px; height:16px;
  background:
    radial-gradient(circle,#292929 1.2px,transparent 2.4px) 0 0/8px 8px,
    radial-gradient(circle,#292929 1.2px,transparent 2.4px) 8px 0/8px 8px,
    radial-gradient(circle,#292929 1.2px,transparent 2.4px) 0 8px/8px 8px,
    radial-gradient(circle,#292929 1.2px,transparent 2.4px) 8px 8px/8px 8px;
  opacity:.9; pointer-events:none;
}
@media (max-width:767px){
  .feat-nav ol::before{
    top:30px; width:12px; height:12px;
    background:
      radial-gradient(circle,#292929 2px,transparent 2px) 0 0/6px 6px,
      radial-gradient(circle,#292929 2px,transparent 2px) 6px 0/6px 6px,
      radial-gradient(circle,#292929 2px,transparent 2px) 0 6px/6px 6px,
      radial-gradient(circle,#292929 2px,transparent 2px) 6px 6px/6px 6px;
  }
}
.feat-nav li{ display:grid; place-items:center }
.feat-nav button{
  appearance:none; border:none; background:none; cursor:pointer;
  width:44px; height:38px; line-height:38px; font-weight:400; font-size:14px; letter-spacing:.08em; color:#292929;
  transition:color .2s ease, transform .2s ease;
}
.feat-nav button:hover{ color:var(--tam-color-accent); transform:translateY(-1px) }
.feat-nav button.is-active{ color:var(--tam-color-accent); font-weight:700 }
@media (max-width:767px){
  .feat-nav ol{ width:38px; padding:30px 0 25px }
  .feat-nav button{ width:34px; height:30px; line-height:30px; font-size:13px }
  .feat-nav ol li:first-child{ margin-top:22px }
}

.feat-list{ display:grid; gap:clamp(16px,3.2vw,30px) }
.feat-card{
  width:min(100%,1214px); margin-inline:auto;
  display:grid; grid-template-columns:.464fr .536fr; align-items:stretch;
  padding:0; gap:0; background:#f6f7f8; border-radius:60px; overflow:clip;
}
.feat-item.is-rev .feat-card{ grid-template-columns:.536fr .464fr }
.feat-body{ background:transparent; padding:clamp(18px,2.6vw,140px) }
@media (min-width:901px){
  .feat-body{ display:flex; flex-direction:column; justify-content:center; min-height:0 }
}
.feat-num{ margin:0 0 .6em; font-weight:400; color:#000; letter-spacing:.08em; font-size:clamp(16px,2.8vw,24px) }
.feat_ml{ margin-left:20px; margin-right:20px }
.feat-h{ margin:0; font-weight:300; line-height:1.12; font-size:clamp(50px,2.8vw,60px); color:#f4a11a }
.pc-br{ display:none } @media (min-width:901px){ .pc-br{ display:inline } }
.feat-desc{ color:#000; font-size:clamp(12px,1.45vw,14px); line-height:1.9 }
.feat-desc h4{ line-height:1; font-size:clamp(16px,2.8vw,18px); font-weight:400; margin-block-start:1em }
.feat-desc h5{ color:#f4a11a; margin-block-start:.4em }
.feat-desc p{ margin-block-start:1.4em }
.feat-note{ margin:.8em 0 0; height:1em } .feat-note span{ color:var(--tam-color-accent) }

.feat-media{ position:relative; background:#000; aspect-ratio:1/1; overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-drag:none; -webkit-tap-highlight-color:transparent; }
.feat-media.is-grabbing,.feat-media:active{ cursor:grabbing }
.feat-slides{ position:absolute; inset:0; background:#000 }
.feat-slide,.feat-slide img{ width:100%; height:100% }
.feat-slide{ position:absolute; inset:0; opacity:0; transition:opacity .35s ease; will-change:opacity; backface-visibility:hidden }
.feat-slide.is-active{ opacity:1 }
.feat-slide img{ object-fit:cover; object-position:center; display:block }
.feat-media figure,.feat-slide{ margin:0 }
.feat-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; border:0; background:transparent; cursor:pointer; padding:0; z-index:1;
}
.feat-arrow.is-prev{ left:20px } .feat-arrow.is-next{ right:20px }
.feat-arrow::after{ content:""; position:absolute; inset:0; border-radius:999px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.12); transition:transform .15s ease; transform-origin:center; z-index:0 }
.feat-arrow::before{
  content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; border-top:2px solid #f19d00; border-right:2px solid #f19d00; transform:translate(-50%,-50%) rotate(45deg); z-index:1
}
.feat-arrow.is-prev::before{ transform:translate(-50%,-50%) rotate(-135deg) }
.feat-arrow:hover::after{ transform:scale(1.26) }
.feat-dots{ display:flex; gap:8px; margin-top:37px }
.feat-dots button{ width:9px; height:9px; border-radius:50%; border:1px solid #ddd; background:#fff; padding:0; cursor:pointer }
.feat-dots button.is-active{ background:var(--tam-color-accent); border-color:var(--tam-color-accent) }
:root{ --feat-sp-gutter:20px }
@media (max-width:767px){
  .feat-card{ grid-template-columns:1fr; width:100%; border-radius:40px; max-width:calc(100vw - 32px); margin-inline:auto }
  .feat-item.is-rev .feat-card{ grid-template-columns:1fr }
  .feat-media{ order:-1; aspect-ratio:1/1; width:100% }
  .feat-body{ position:relative; padding:clamp(20px,4vw,20px); display:block; padding-bottom:40px }
  .feat-dots{ position:absolute; top:clamp(10px,2.5vw,14px); right:clamp(10px,4vw,16px); margin-top:0; gap:6px; z-index:1 }
  .feat-num{ margin-left:var(--feat-sp-gutter) }
  .feat_ml{ margin-left:var(--feat-sp-gutter); margin-right:var(--feat-sp-gutter) }
}
@media (max-width:767px){
  .feat-arrow{ transform:translateY(-50%) scale(.9); transform-origin:center; width:22px; height:22px }
  .feat-arrow.is-prev{ left:10px } .feat-arrow.is-next{ right:10px }
}
/* ----パッチ---- */

/* 親カードは確実に切り抜き */
.feat-card{
  border-radius:60px;
  overflow:hidden;          /* ←にじみ防止 */
  isolation:isolate;
}

/* 背景の黒は“にじみ要因”になるので透明に（画像はcoverで埋まる想定） */
.feat-media,
.feat-slides{ background: transparent; }

/* 画像レイヤーは角丸を継承＋はみ出し防止 */
.feat-media,
.feat-slides,
.feat-slide,
.feat-slide img{
  border-radius:inherit;
  overflow:hidden;
  display:block;            /* 余計な隙間防止 */
  backface-visibility:hidden;
  transform:translateZ(0);  /* 縁のサブピクセル対策（保険） */
}

/* —— PC：画像が右側のとき（通常）→ 右側だけ角丸 —— */
.feat-item:not(.is-rev) .feat-media{
  border-radius: 0 60px 60px 0; /* top-right / bottom-right だけ丸める */
}

/* —— PC：画像が左側のとき（.is-rev）→ 左側だけ角丸 —— */
.feat-item.is-rev .feat-media{
  border-radius: 60px 0 0 60px; /* top-left / bottom-left だけ丸める */
}

/* 内側のレイヤーも .feat-media に合わせて同じ角丸を継承 */
.feat-item:not(.is-rev) .feat-media .feat-slides,
.feat-item:not(.is-rev) .feat-media .feat-slide,
.feat-item:not(.is-rev) .feat-media .feat-slide img{
  border-radius: inherit;
}
.feat-item.is-rev .feat-media .feat-slides,
.feat-item.is-rev .feat-media .feat-slide,
.feat-item.is-rev .feat-media .feat-slide img{
  border-radius: inherit;
}

/* —— SP：画像が上に来るので「上だけ角丸」 —— */
@media (max-width:767px){
  .feat-card{ border-radius:40px; }
  .feat-media{
    order:-1;
    border-radius: 40px 40px 0 0 !important;  /* 上左右のみ角丸 */
  }
  .feat-media .feat-slides,
  .feat-media .feat-slide,
  .feat-media .feat-slide img{
    border-radius: inherit;
  }
}
/* ---ここまでパッチ---- */
/* ===== BUY / CTA ===== */
.tam-section--buy{
  background:#fff; position:relative; padding:clamp(60px,7vw,65px) 0; isolation:isolate;
  display:flex; justify-content:center;
}
.tam-section--buy::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:90%; max-width:1300px; height:1px; background:#e8e8e8;
}
.tam-buy-inner{
  width:100%; max-width:1015px; display:grid;
  grid-template-columns:minmax(140px,180px) 25px 1fr 50px auto 30px minmax(275px,1fr);
  align-items:center; column-gap:0; row-gap:18px; padding-inline:clamp(16px,4vw,24px);
}
.tam-buy-photo{ grid-column:1; margin:0; justify-self:center }
.tam-buy-title{ grid-column:3; margin:0 }
.tam-buy-btn{ grid-column:5; justify-self:center }
.tam-buy-notes{ grid-column:7; justify-self:start; max-width:100% }

.tam-buy-photo img{ width:100%; max-width:180px; height:auto; display:block }
.tam-buy-title{
  color:#111; letter-spacing:.02em; line-height:1.08; display:flex; flex-direction:column; gap:.35em;
  font-size:clamp(24px,2.8vw,40px); font-weight:400;
}
.tam-buy-kicker{ font-size:clamp(12px,1.1vw,14px); color:#f19d00; letter-spacing:.12em; white-space:nowrap }
.tam-buy-title .tam-size{ font-size:.4em; font-weight:500; line-height:1; vertical-align:top; position:relative; top:5px; margin-left:.25em }
.tam-buy-btn{
  display:inline-grid; grid-auto-flow:column; align-items:center; justify-content:center; gap:.8em;
  width:260px; height:63px; border-radius:999px; background:#f19d00; color:#fff; font-weight:400; letter-spacing:.06em; text-decoration:none;
  font-size:clamp(15px,1.1vw,16px); transition:transform .15s ease, background .2s ease; white-space:nowrap;
}
.tam-buy-btn:hover{ background:#161616 }
.tam-buy-btn__icon{ display:inline-grid; place-items:center }
.tam-buy-notes{ list-style:none; margin:0; padding:0; color:#666; font-size:clamp(12px,1.05vw,14px); line-height:1.8 }
.tam-buy-notes .dot{ color:#f2a100; margin-right:.35em }

@media (max-width:767px){
  .tam-buy-inner{ grid-template-columns:1fr; row-gap:16px; text-align:center; width:min(92%,520px) }
  .tam-buy-photo{ grid-column:1; justify-self:center }
  .tam-buy-photo img{ max-width:220px }
  .tam-buy-title{ grid-column:1; align-items:center; font-size:clamp(28px,8vw,42px) }
  .tam-buy-title .tam-size{ font-size:.4em; top:5px }
  .tam-buy-btn{ grid-column:1; justify-self:center }
  .tam-buy-notes{ grid-column:1; margin:5px auto 0; text-align:left; width:240px }
}

/* ===== Reveal ===== */
:root{ --reveal-distance:24px }
.reveal{ opacity:0; transform:translateY(var(--reveal-distance)); transition:opacity .6s ease, transform .6s ease; will-change:opacity,transform }
.reveal[data-reveal="left"]{ transform:translateX(calc(-1 * var(--reveal-distance))) }
.reveal[data-reveal="right"]{ transform:translateX(var(--reveal-distance)) }
.reveal[data-reveal="down"]{ transform:translateY(var(--reveal-distance)) }
.reveal[data-reveal="up"]{ transform:translateY(var(--reveal-distance)) }
.reveal.is-in{ opacity:1; transform:none }
.tam-section.reveal{ opacity:1!important; transform:none!important }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1!important; transform:none!important; transition:none!important }
}

/* ===== tam2-hero (sticky → unpinned) ===== */
.tam2-hero__spacer{ height:180svh; background:transparent; position:relative; z-index:0 }
.tam2-hero__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; z-index:2 }
.tam2-hero__center--sv{ will-change:transform,opacity; transition:transform .35s ease, opacity .35s ease }
.tam2-hero.is-unpinned .tam2-hero__sticky{ position:relative; min-height:100svh; height:auto; z-index:2 }
.tam2-hero.is-unpinned .tam2-hero__bg{ position:relative; inset:auto }
.tam2-hero.is-unpinned .tam2-hero__dim{ opacity:1!important }
.tam2-hero.is-unpinned .tam2-hero__center--sv{ opacity:1!important; transform:translate(-50%,-50%)!important }

/* ===== FP  ===== */
.fp_area{ background:url(../img/fp_bg.jpg) center top/cover no-repeat; height:700px; position:relative;}
@media (min-width: 769px){
  .fp_c_m{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; flex-wrap:nowrap;
  align-items:center; gap:70px; text-align:left;}
  .fp_c_m img{ flex:0 0 auto;  width:102px; margin:0; display:block;}
  .fp_c_tx_area{ flex:1 1 clamp(320px, 40vw, 460px);max-width:460px; font-size:14px; line-height:2; color:#d4d4d4;}
}
@media (max-width: 768px){
  .fp_area{ background:url(../img/fp_bg_sp.jpg) center top/cover no-repeat; height:650px; position:relative;}
  .fp_c_m{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; width:90%; padding:250px 0;}
  .fp_c_m img{ margin:0 0 35px 0 }
    .fp_c_tx_area{ width:75%; display:block; font-size:13px; line-height:2;color:#d4d4d4; text-align:left; margin:0 auto;
    }
  }
/* ===== Footer (temp) ===== */
#footer{ position:relative; z-index:10; color:#fff; text-align:center; padding:100px 20px }
#footer small{ font-size:.85em; opacity:.85 }