/* TOKIO INKARAMI ブランドページ（2026-10-02）
   黒・プラチナ・銅。欧文は Cormorant Garamond、和文の見出しは Shippori Mincho、本文はサイト共通 */
.ts{--ink:#0d0d0f;--ink2:#17171a;--plat:#d6d8dc;--plat2:#9a9ea6;--copper:#b97d58;--ivory:#f4f2ee;background:var(--ink);color:var(--plat)}
.ts h1,.ts h2,.ts h3{margin:0;font-weight:400}
.ts h2{word-break:keep-all;overflow-wrap:anywhere;font-family:"Shippori Mincho",serif;font-size:clamp(24px,6vw,40px);line-height:1.45;color:#fff;letter-spacing:.04em;text-wrap:balance}
.ts p{font-size:14px;line-height:2.05;color:var(--plat)}
.ts-eyebrow{font-family:"Cormorant Garamond",serif;font-size:12px!important;letter-spacing:.32em!important;color:var(--copper)!important;margin:0 0 18px;text-transform:uppercase}
.ts-note{font-size:11.5px!important;color:var(--plat2)!important;line-height:1.9!important}
.ts section{padding:88px 24px}
.ts img{display:block;width:100%;height:auto}

/* hero */
.ts-hero{position:relative;padding:0!important;min-height:min(92svh,860px);display:flex;align-items:flex-end;overflow:hidden}
.ts-hero picture,.ts-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ts-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,15,0) 35%,rgba(13,13,15,.85) 100%)}
.ts-hero-copy{position:relative;z-index:1;padding:0 24px 64px;max-width:760px}
.ts-hero h1{display:flex;flex-direction:column;gap:14px}
.ts-word{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(40px,11vw,96px);line-height:1;letter-spacing:.06em;color:#fff}
.ts-h1-ja{font-family:"Shippori Mincho",serif;font-size:clamp(18px,4.6vw,26px);letter-spacing:.18em;color:var(--plat)}
.ts-hero-copy>p:last-child{margin:22px 0 0;font-size:13px;letter-spacing:.08em}

/* intro */
.ts-intro{display:grid;gap:28px;max-width:960px;margin:0 auto;align-items:center}
.ts-big{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(110px,30vw,220px)!important;line-height:.9!important;color:#fff!important;margin:0;letter-spacing:-.02em}
.ts-big small{font-size:.35em;color:var(--copper);margin-left:6px}
.ts-intro h2{margin-bottom:18px}

/* tech */
.ts-tech{display:grid;gap:40px;background:var(--ink2);max-width:none}
.ts-tech-img{max-width:520px}
.ts-tech h2{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(34px,9vw,64px);letter-spacing:.08em;margin-bottom:18px}
.ts-anim{width:100%;max-width:420px;margin:26px 0 18px;color:var(--plat)}
.ts-anim .ts-dots circle{fill:var(--copper);animation:tsIn 4.8s ease-in-out infinite}
.ts-anim .ts-dots circle:nth-child(2){animation-delay:.25s}.ts-anim .ts-dots circle:nth-child(3){animation-delay:.5s}.ts-anim .ts-dots circle:nth-child(4){animation-delay:.75s}
.ts-anim .ts-dots circle:nth-child(5){animation-delay:1s}.ts-anim .ts-dots circle:nth-child(6){animation-delay:1.25s}.ts-anim .ts-dots circle:nth-child(7){animation-delay:1.5s}
.ts-anim .ts-link{stroke:var(--copper);stroke-dasharray:240;stroke-dashoffset:240;animation:tsLink 4.8s ease-in-out infinite}
@keyframes tsIn{0%,10%{transform:translateY(0);opacity:.9}45%,100%{transform:translateY(40px);opacity:1}}
@keyframes tsLink{0%,45%{stroke-dashoffset:240}75%,100%{stroke-dashoffset:0}}

/* effects */
.ts-effects{max-width:1100px;margin:0 auto}
.ts-eff-grid{display:grid;gap:28px;margin-top:40px}
.ts-eff-grid figure{margin:0}
.ts-eff-img{aspect-ratio:4/3;overflow:hidden;background:#000}
.ts-eff-img img{width:100%;height:100%;object-fit:cover}
.ts-eff-grid figcaption{margin-top:14px;font-size:13px;line-height:1.9;color:var(--plat)}
.ts-eff-grid figcaption b{display:block;font-family:"Shippori Mincho",serif;font-weight:500;font-size:16px;color:#fff;margin-bottom:4px}
@media (min-width:860px){.ts-eff-grid{grid-template-columns:repeat(3,1fr)}}

/* salon steps */
.ts-salon{max-width:960px;margin:0 auto}
.ts-salon h2{margin-bottom:18px}
.ts-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(214,216,220,.25)}
.ts-steps li{padding:18px 6px 0;border-right:1px solid rgba(214,216,220,.12)}
.ts-steps li:last-child{border-right:0}
.ts-steps b{display:block;font-family:"Cormorant Garamond",serif;font-weight:300;font-size:38px;color:#fff;line-height:1}
.ts-steps span{display:block;margin-top:10px;font-size:11px;line-height:1.6;color:var(--plat2)}

/* lines */
.ts-lines{background:var(--ink2);max-width:none}
.ts-lines>h2,.ts-lines>.ts-eyebrow,.ts-lines>.ts-note{max-width:1100px;margin-left:auto;margin-right:auto}
.ts-line-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;max-width:1100px;margin:44px auto 26px}
.ts-line-img{aspect-ratio:3/4;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(70% 55% at 50% 60%,#2a2a30 0%,#121215 70%);margin-bottom:18px;overflow:hidden}
.ts-line-img{padding:10% 0 6%}
.ts-line-img img{width:auto;max-width:64%;height:100%;max-height:100%;object-fit:contain;transition:transform .6s ease}
.ts-line:hover .ts-line-img img{transform:translateY(-6px)}
.ts-line .ts-eyebrow{margin-bottom:6px}
.ts-line h3{font-family:"Shippori Mincho",serif;font-size:19px;color:#fff;display:flex;flex-direction:column;gap:4px}
.ts-line h3 span{font-size:12px;color:var(--plat2);letter-spacing:.08em}
.ts-line p{font-size:12.5px;line-height:1.95;margin:10px 0 0}
.ts-price{color:#fff!important;font-size:12px!important}

/* ritual */
.ts-ritual{display:grid;gap:40px;max-width:1100px;margin:0 auto;align-items:center}
.ts-ritual h2{margin-bottom:22px}
.ts-ritual-list{list-style:none;padding:0;margin:0;counter-reset:r}
.ts-ritual-list li{counter-increment:r;padding:18px 0;border-top:1px solid rgba(214,216,220,.2);font-size:13.5px;line-height:1.9;display:grid;grid-template-columns:44px 64px 1fr;align-items:baseline}
.ts-ritual-list li::before{content:"0" counter(r);font-family:"Cormorant Garamond",serif;color:var(--copper);font-size:15px}
.ts-ritual-list b{font-family:"Shippori Mincho",serif;font-weight:500;color:#fff}

/* story */
.ts-story{position:relative;padding:0!important;overflow:hidden}
.ts-story picture img{height:min(70svh,640px);object-fit:cover;filter:brightness(.62)}
.ts-story-copy{padding:56px 24px 88px;max-width:960px;margin:0 auto}
.ts-story h2{margin-bottom:18px}
.ts-history{list-style:none;padding:0;margin:36px 0 0}
.ts-history li{display:grid;grid-template-columns:76px 1fr;padding:14px 0;border-top:1px solid rgba(214,216,220,.18);font-size:13px}
.ts-history b{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:20px;color:var(--copper)}

/* buy */
.ts-buy{background:var(--ivory);color:#1a1a1d;text-align:center}
.ts-buy h2{color:#111;margin-bottom:18px}
.ts-buy p{color:#3d3b38;max-width:620px;margin-left:auto;margin-right:auto}
.ts-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px!important}
.ts-cta a{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border:1px solid #16171b;color:#16171b;text-decoration:none;font-size:13px;letter-spacing:.06em;touch-action:manipulation}
.ts-cta a:first-child{background:#16171b;color:#fff}
.ts-cta a:focus-visible,.ts a:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

@media (min-width:860px){
  .ts section{padding:130px 64px}
  .ts-hero-copy{padding:0 64px 96px}
  .ts-intro{grid-template-columns:auto 1fr;gap:64px}
  .ts-tech-copy{max-width:760px;margin:0 auto}
  .ts-line-grid{grid-template-columns:repeat(4,1fr)}
  .ts-ritual{grid-template-columns:1fr 1fr;gap:80px}
  .ts-steps span{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.ts-anim .ts-dots circle,.ts-anim .ts-link{animation:none}.ts-anim .ts-dots circle{transform:translateY(40px)}.ts-anim .ts-link{stroke-dashoffset:0}.ts-line-img img{transition:none}}

/* こだわり・詳しく見る・施術の説明（2026-10-02 追加） */
.ts-kod{max-width:1100px;margin:0 auto}
.ts-kod-list{list-style:none;counter-reset:k;padding:0;margin:36px 0 0;display:grid}
.ts-kod-list li{counter-increment:k;display:grid;grid-template-columns:52px 1fr;gap:4px 0;padding:20px 0;border-top:1px solid rgba(214,216,220,.18)}
.ts-kod-list li::before{content:counter(k,decimal-leading-zero);grid-row:span 2;font-family:"Cormorant Garamond",serif;font-size:22px;color:var(--copper);line-height:1.2}
.ts-kod-list b{font-family:"Shippori Mincho",serif;font-weight:500;font-size:16px;color:#fff}
.ts-kod-list span{font-size:13px;line-height:1.95;color:var(--plat)}
.ts-det{margin-top:12px;border-top:1px solid rgba(214,216,220,.18)}
.ts-det summary{cursor:pointer;list-style:none;min-height:44px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;letter-spacing:.06em;color:var(--copper)}
.ts-det summary::-webkit-details-marker{display:none}
.ts-det summary::after{content:"+";font-size:16px}
.ts-det[open] summary::after{content:"−"}
.ts-det dl{margin:0 0 6px}
.ts-det dl div{display:grid;grid-template-columns:6.5em 1fr;gap:8px;padding:6px 0;font-size:12px;line-height:1.8}
.ts-det dt{color:#fff}
.ts-det dd{margin:0;color:var(--plat)}
.ts-steps small{display:block;margin-top:8px;font-size:11px;line-height:1.7;color:var(--plat2)}
@media (min-width:860px){.ts-kod-list{grid-template-columns:1fr 1fr;column-gap:56px}}
@media (max-width:640px){.ts-steps{grid-template-columns:1fr}.ts-steps li{border-right:0;border-bottom:1px solid rgba(214,216,220,.12);padding:14px 0;display:grid;grid-template-columns:44px 1fr;column-gap:8px}.ts-steps b{grid-row:span 2}.ts-steps span{margin-top:0}}

@media (max-width:640px){.ts-det dl div{grid-template-columns:1fr;gap:0}}