:root{
  --color-bg:#f1f7fb;
  --color-primary:#1667b2;
  --color-primary-dark:#013f8c;
  --color-text:#454545;
  --color-border:#d6e5e8;
  --color-orange:#ef7f43;
  --color-coral:#eb6e4f;
  /* 使い方セクションの紙地パターン背景 */
  --pattern-bg:url("../images/playkit/cart-bg.jpg") repeat top center;
  --pattern-bg-size:auto 300px;
  /* 購入セクションの背景に使うクリーム色 */
  --color-cream:#ffebcb;
  --color-yellow:#fed24f;
  --font-jp:kozuka-gothic-pro,sans-serif;
  --font-heading:"Jun 201",kozuka-gothic-pro,sans-serif;
  --space-1:13px;
  --space-2:26px;
  --space-3:39px;
  --space-4:52px;
  --space-5:90px;
  --radius-s:13px;
  --radius-m:20px;
  --radius-pill:50px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
.site-main.playkit-lp{margin:0;}
body{
  margin:0;
  font-family:var(--font-jp);
  -webkit-font-feature-settings:"palt";
  font-feature-settings:"palt";
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.8;
  letter-spacing:0.05em;
  word-break:normal;
  overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;transition:opacity .2s;}
a:hover{opacity:0.7;}
button{font-family:inherit;}
h2{font-family:var(--font-heading);}
.container{max-width:1200px;margin:0 auto;padding:0 var(--space-2);}

/* ============ FIXED CART BUTTON ============ */
.btn-cart-fix{position:fixed;bottom:var(--space-2);right:var(--space-2);z-index:100;transition:opacity .3s,visibility .3s;}
/* スクロール中は背景がうっすら透ける。購入セクションに到達したら役目を終えて消える */
.btn-cart-fix.is-scrolled{opacity:0.8;}
.btn-cart-fix.is-hidden{opacity:0;visibility:hidden;}
.btn-cart-fix a{display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.2));}
.btn-cart-fix a img{width:150px;height:auto;display:block;}
@media (max-width:640px){
  /* スマホでは本文を邪魔しないサイズに縮める */
  .btn-cart-fix{bottom:var(--space-1);right:var(--space-1);}
  .btn-cart-fix a img{width:100px;}
}

/* ============ HERO ============ */
.hero{position:relative;background:#fff;}
.hero-photo{
  position:relative;width:100%;overflow:hidden;
  height:100vh;
  height:100dvh; /* スマホのアドレスバー分を除いた実際の表示領域に合わせる */
  min-height:280px;
  background:url("../images/playkit/hero-photo-sp.jpg") center/cover no-repeat;
}
@media screen and (min-width:769px){
  .hero-photo{min-height:600px;background-image:url("../images/playkit/hero-photo.jpg");}
}
/* ============ LEAD ============ */
/* z-index:0 は必須。背景アイコンの z-index:-1 が白背景の下に沈まないよう、
   ここでスタッキングコンテキストを作っている。消すとアイコンが見えなくなる。 */
.sec-lead{position:relative;z-index:0;overflow:hidden;padding:100px var(--space-2) 100px;text-align:center;background:#fff;}
.sec-lead-bg-icon{position:absolute;z-index:-1;width:340px;max-width:40vw;height:auto;opacity:0.5;pointer-events:none;}
.sec-lead-bg-icon--reading{top:30px;left:40px;}
.sec-lead-bg-icon--discussion{bottom:30px;right:40px;}
@media (max-width:640px){
  .sec-lead-bg-icon{display:none;}
}
.hero-kicker{color:var(--color-primary-dark);font-family:var(--font-heading);font-weight:700;font-size:18px;letter-spacing:0.15em;margin:0 0 var(--space-1);}
.hero-title{color:var(--color-primary-dark);font-weight:700;font-size:clamp(26px,4.2vw,40px);letter-spacing:0.06em;margin:0 0 var(--space-2);line-height:1.5;}
.hero-desc{max-width:760px;margin:0 auto;font-size:21px;line-height:2;letter-spacing:0.06em;}

/* ============ CTA / CART ============ */
.btn-cart{width:260px;max-width:100%;}
.btn-cart a{
  display:flex;align-items:center;justify-content:center;gap:12px;background:var(--color-coral);border-radius:var(--radius-pill);
  padding:17px 30px;color:#fff;font-size:18px;letter-spacing:0.08em;white-space:nowrap;
}
.btn-cart.white a{background:#fff;color:var(--color-coral);border:1px solid var(--color-coral);}
.btn-cart a i{width:26px;height:26px;border-radius:50%;border:1.5px solid #fff;position:relative;flex-shrink:0;}
.btn-cart.white a i{border-color:var(--color-coral);}
.btn-cart a i::after{content:"";position:absolute;left:6px;top:8px;width:7px;height:7px;border-top:1.5px solid #fff;border-right:1.5px solid #fff;transform:rotate(45deg);}
.btn-cart.white a i::after{border-color:var(--color-coral);}

/* ============ CART v2 (Figma) ============ */
.sec-cart2{position:relative;padding:var(--space-5) var(--space-2);background:var(--color-cream);}
.sec-cart2 .sec-inner{max-width:1140px;margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;}
.sec-cart2 figure{margin:0;flex:1 1 400px;max-width:100%;}
.sec-cart2 figure img{width:100%;display:block;border-radius:var(--radius-s);}
.sec-cart2 .txt{flex:1 1 440px;max-width:100%;text-align:left;}
.sec-cart2 .txt h2{margin:0 0 var(--space-1);font-weight:700;color:#000;font-size:36px;letter-spacing:0.06em;}
.sec-cart2 .txt .price{margin:0 0 4px;color:#000;font-size:23px;letter-spacing:0.04em;}
.sec-cart2 .txt .price i{padding:0 2px;font-size:17px;font-style:normal;}
.sec-cart2 .txt .price em{font-size:16px;letter-spacing:0.04em;font-style:normal;color:#000;}
.sec-cart2 .cart-note{margin:0 0 var(--space-2);font-size:12px;color:var(--color-text);opacity:0.8;}
.sec-cart2 dl{color:#403927;margin:0 0 var(--space-3);display:grid;grid-template-columns:1fr 1fr;gap:6px var(--space-2);}
.sec-cart2 dl div{display:flex;gap:8px;border-bottom:1px solid #b3d3ce;padding:0 0 6px;font-size:14px;}
.sec-cart2 dl dt{margin:0;white-space:nowrap;}
.sec-cart2 dl dd{margin:0 0 0 auto;letter-spacing:0.04em;}
.sec-cart2 .btn-wrap{display:flex;gap:var(--space-1);flex-wrap:wrap;}
.sec-cart2 .btn-wrap-note{width:100%;margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--color-text);opacity:0.8;}

/* ============ CONCEPT ============ */
.sec-concept-wrap{padding:var(--space-5) var(--space-2);}
.sec-concept{
  max-width:890px;margin:0 auto;background:#fff;
  border:1px solid #eef1f3;border-radius:var(--radius-m);
  padding:var(--space-4) var(--space-3);
}
.concept-title{text-align:center;color:var(--color-primary);font-size:clamp(22px,3.4vw,32px);letter-spacing:0.08em;margin:0 0 var(--space-3);}
.note-text{
  margin:0 30px;text-align:left;
  font-size:21px;line-height:51px;
  padding:1px 10px 0;
  border-top:1px solid var(--color-border);
  background-image:linear-gradient(to bottom, transparent calc(100% - 1px), var(--color-border) 0);
  background-size:100% 51px;
  background-repeat:repeat;
}
.note-text p{margin:0;}

/* ============ KIT CONTENTS ============ */
.sec-set{padding:var(--space-5) var(--space-2);background:#fff;}
.sec-head{text-align:center;max-width:900px;margin:0 auto var(--space-3);}
.sec-head h2{color:var(--color-primary-dark);font-size:clamp(22px,3.6vw,32px);letter-spacing:0.08em;margin:0 0 var(--space-1);}
.sec-head p{font-size:21px;line-height:1.9;margin:0;}
.set-items{max-width:1050px;margin:0 auto;}
.set-item{display:flex;gap:var(--space-3);align-items:flex-start;flex-wrap:wrap;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);}
.set-item:last-child{border-bottom:none;}
.set-item .thumb{flex:0 0 auto;width:486px;max-width:100%;border-radius:var(--radius-s);overflow:hidden;}
.set-item .body{width:520px;max-width:100%;}
.set-item h3{color:var(--color-yellow);font-size:24px;letter-spacing:0.06em;margin:0 0 var(--space-1);}
.set-item h3 .count{color:var(--color-yellow);font-size:16px;margin-left:8px;}
.set-item p{font-size:18px;line-height:1.9;margin:0;opacity:0.8;}
.set-item ul{margin:0 0 var(--space-2);padding-left:1.4em;}
.set-item ul li{font-size:18px;line-height:1.9;opacity:0.8;margin-bottom:4px;}
.set-item ul li:last-child{margin-bottom:0;}

/* ============ HOWTO ============ */
.sec-howto{background:var(--pattern-bg);background-size:var(--pattern-bg-size);padding:var(--space-5) var(--space-2);}
.howto-photos{max-width:1200px;margin:0 auto var(--space-2);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
.howto-photo{border-radius:var(--radius-s);overflow:hidden;aspect-ratio:200/296;}
.howto-photo-placeholder{background:var(--color-border);display:flex;align-items:center;justify-content:center;}
.howto-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.howto-line{max-width:1200px;margin:0 auto var(--space-2);width:100%;height:auto;display:block;}
.howto-steps{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);}
.howto-num{display:block;color:var(--color-primary);font-weight:700;font-size:28px;letter-spacing:0.02em;margin-bottom:4px;}
.howto-step h3{color:var(--color-primary);font-size:24px;letter-spacing:0.06em;margin:0 0 var(--space-1);}
.howto-step p{font-size:18px;line-height:1.8;color:var(--color-text);margin:0;opacity:0.85;}
.howto-photo-mobile{display:none;}

/* ============ PHOTO STRIP ============ */
.sec-scroll{overflow:hidden;}
.sec-scroll-inner{display:flex;width:max-content;animation:sec-scroll-marquee 64s linear infinite;}
.sec-scroll-inner div{flex:0 0 auto;margin-right:1px;}
.sec-scroll-inner img{display:block;width:auto;height:210px;object-fit:cover;}
@keyframes sec-scroll-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .sec-scroll-inner{animation:none;}
}

/* ============ REPORT ============ */
.sec-report{
  padding:var(--space-5) var(--space-2);
  background-color:#fff;
  background-image:linear-gradient(to right, #eef1f3 1px, transparent 1px),linear-gradient(to bottom, #eef1f3 1px, transparent 1px);
  background-size:68px 68px;
}
.report-head{max-width:900px;margin:0 auto var(--space-3);}
.report-head .kicker{color:var(--color-primary);font-weight:700;font-size:clamp(34px,6vw,60px);letter-spacing:0.05em;margin:0 0 4px;}
.report-head h2{color:var(--color-text);font-size:clamp(19px,2.6vw,22px);margin:0 0 var(--space-2);font-weight:400;letter-spacing:0.06em;}
.report-head p{font-size:21px;line-height:1.9;margin:0;}

.report-tabs{max-width:1000px;margin:0 auto;display:flex;gap:2px;flex-wrap:wrap;}
.report-tabs button{
  min-width:112px;
  background:#f1f1f1;border:none;cursor:pointer;color:var(--color-primary-dark);
  font-size:16px;font-weight:700;letter-spacing:0.05em;
  padding:14px 20px;border-radius:14px 14px 0 0;
  text-align:center;
  transition:opacity .2s;
}
.report-tabs button:hover{opacity:0.7;}
.report-tabs button.active{background:var(--color-orange);color:#fff;}

.report-card{
  max-width:1000px;margin:0 auto var(--space-4);background:#eef1f3;
  border-radius:0 var(--radius-s) var(--radius-s) var(--radius-s);
  padding:var(--space-3);display:flex;gap:var(--space-3);flex-wrap:wrap;
}
.report-card[hidden]{display:none;}
.report-card .photos{display:flex;flex-direction:column;gap:var(--space-1);flex:1 1 280px;}
.report-card .photos img{border-radius:8px;width:100%;display:block;}
.report-card .text{flex:1.3 1 360px;}
.report-card h3{color:var(--color-orange);font-size:28px;margin:0 0 var(--space-2);border-bottom:2px solid var(--color-orange);display:inline-block;padding-bottom:4px;}
.report-card .body-txt{font-size:18px;line-height:1.85;margin:0 0 var(--space-2);}
.report-card .voice{color:var(--color-orange);font-size:18px;font-weight:700;letter-spacing:0.05em;margin:0 0 6px;display:flex;align-items:center;gap:8px;}
.report-card .voice::before{
  content:"";display:inline-block;flex-shrink:0;width:20px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef7f43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.report-card .voice ~ .body-txt{font-style:italic;}
.report-card .voice ~ .body-txt::before{content:"「";}
.report-card .voice ~ .body-txt::after{content:"」";}

.prog-detail{margin:var(--space-2) 0 0;}
.prog-detail div{display:flex;gap:var(--space-2);border-top:1px dotted #ccc;padding:8px 0;font-size:12px;}
.prog-detail dt{color:var(--color-orange);flex:0 0 130px;margin:0;}
.prog-detail dd{margin:0;flex:1;}
.prog-detail dd a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;}

/* ============ BACKGROUND (製作背景) ============ */
.sec-report2{
  padding:var(--space-5) var(--space-2);
  background:#fff url("../images/playkit/report2-bg.gif") no-repeat center/cover;
}
.report2-head{max-width:900px;margin:0 auto var(--space-4);text-align:center;}
.report2-head h2{color:var(--color-text);font-size:clamp(22px,3vw,28px);letter-spacing:0.08em;margin:0;}
.report2-block{max-width:820px;margin:0 auto var(--space-4);}
.report2-block:last-child{margin-bottom:0;}
.report2-block h3{color:var(--color-orange);font-size:clamp(19px,2.6vw,24px);letter-spacing:0.06em;margin:0 0 var(--space-2);}
.report2-block p{font-size:18px;line-height:1.9;margin:0 0 var(--space-2);}
.report2-block p:last-child{margin-bottom:0;}
.report2-block ul{margin:0 0 var(--space-2);padding-left:1.4em;}
.report2-block ul li{font-size:18px;line-height:1.9;margin-bottom:8px;}
.report2-block ul li:last-child{margin-bottom:0;}

/* ============ FAQ ============ */
.faq{margin:72px auto 72px;padding:var(--space-5) calc(var(--space-2) + var(--space-1)) var(--space-4);max-width:980px;background:#fff;}
.faq .section-title{text-align:center;margin:0 0 var(--space-3);color:var(--color-primary-dark);font-size:clamp(22px,3.6vw,32px);letter-spacing:0.08em;}
.faq .unit{
  margin:0 0 var(--space-3);padding:0 0 9px;
  background:url("../images/playkit/faq-divider.gif") repeat-x bottom left;
  background-size:auto 1px;
}
.faq .unit .question,.faq .unit .answer{display:flex;margin:0 0 var(--space-2);padding:0 5px;}
.faq .unit .icon{flex:0 0 auto;}
.faq .unit .icon img{width:25px;height:auto;display:block;}
.faq .unit .text{margin:0;padding:3px 0 0 10px;line-height:1.6;font-size:16px;color:var(--color-text);}
.faq .unit .text a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;}
@media (min-width:769px){
  .faq{padding-bottom:var(--space-5);}
  .faq .unit{margin:0 var(--space-2) var(--space-4);}
  .faq .unit .question,.faq .unit .answer{margin:0 0 var(--space-3);padding:0 var(--space-2);}
  .faq .unit .icon img{width:30px;}
  .faq .unit .text{padding:6px 0 0 20px;font-size:18px;}
}
@media (min-width:1023px){
  .faq .unit{background-size:auto 2px;}
  .faq .unit .question,.faq .unit .answer{margin-bottom:var(--space-4);}
  .faq .unit .icon img{width:33px;}
  .faq .unit .text{padding:6px 0 0 25px;font-size:21px;}
}

section[id]{scroll-margin-top:20px;}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .howto-photos{grid-template-columns:repeat(2,1fr);}
  .howto-steps{grid-template-columns:repeat(2,1fr);gap:var(--space-4);}
  .howto-line{display:none;}
}
@media (max-width:768px){
  .note-text{font-size:18px;line-height:45px;background-size:100% 45px;}
  /* 他の本文要素はベース値がすでに18pxのため、ここでは21pxの2つだけを揃える */
  .sec-head p,.report-head p{font-size:18px;}
}
@media (max-width:640px){
  .hero-desc{font-size:18px;}
  .hero-desc br{display:none;}
  .container{padding:0 var(--space-1);}
  .sec-concept{padding:var(--space-3) var(--space-2);}
  .set-item{flex-direction:column;}
  .set-item .thumb{width:100%;}
  .howto-photos{display:none;}
  .howto-steps{grid-template-columns:1fr;}
  .howto-photo-mobile{display:block;margin:0 auto var(--space-1);aspect-ratio:200/296;max-width:200px;}
  .howto-num,.howto-step h3{text-align:center;}
  .report-card{flex-direction:column;}
  .note-text{margin:0;font-size:16px;line-height:34px;background-size:100% 34px;}
  .sec-head p,.set-item p,.set-item ul li,.howto-step p,.report-head p,.report-card .body-txt,.report2-block p,.report2-block ul li{font-size:16px;}
  .report-card h3{font-size:22px;}
  .howto-num{font-size:22px;}
  .howto-step h3{font-size:20px;}
  .set-item h3{font-size:20px;}
  .report-tabs button{min-width:0;flex:1 1 auto;padding:12px 10px;font-size:14px;}
  .prog-detail div{flex-direction:column;gap:2px;}
  .prog-detail dt{flex:none;}
  .sec-cart2 .txt h2{font-size:28px;}
  .sec-cart2 .txt .price{font-size:19px;}
  .sec-cart2 dl{grid-template-columns:1fr;}
  .btn-wrap{flex-direction:column;}
  .btn-cart{width:100%;}
}

/* ============ FOOTER ============ */
.playkit-footer{background:#fff;border-top:1px solid var(--color-border);}
.playkit-footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding-top:var(--space-2);padding-bottom:var(--space-2);}
.playkit-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-2);}
.playkit-footer__links a{display:inline-flex;align-items:center;gap:8px;font-size:13.9px;line-height:15px;letter-spacing:0.05em;color:var(--color-text);}
.playkit-footer__arrow{width:18px;height:18px;flex:0 0 auto;}
.playkit-footer__brand{text-align:center;}
.playkit-footer__logo{width:110px;height:auto;margin:0 auto;}
.playkit-footer__copyright{margin:8px 0 0;font-size:13.9px;line-height:15px;letter-spacing:0.05em;color:#000;}
@media (max-width:640px){
  .playkit-footer__inner{flex-direction:column;align-items:flex-start;gap:var(--space-3);padding-top:var(--space-3);padding-bottom:var(--space-3);}
  /* align-selfだけだと自身の内容幅で中央寄せになり見た目上ズレるため、幅いっぱいに広げてから中央寄せする */
  .playkit-footer__brand{align-self:stretch;}
  .playkit-footer__links{align-self:stretch;flex-direction:column;align-items:center;gap:var(--space-1);}
}