:root{
  --bg-section:#d5dee4;
  --band-left:#7d899d;
  --band-right:#a1b5c5;
  --band-hd:#111;
  --accent:#d61c77;
  --max:1024px;
  --text:#222;
  --border:#e5e7eb;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Noto Sans JP',sans-serif;
  line-height:1.75;
  color:var(--text);
  background:#fff;
}
img{max-width:100%;height:auto;display:block}
.container{width:min(100%,var(--max));margin:0 auto;padding:0 20px}

.chart{margin:0 20px}

/* パンくず */
.pankuzu {
  font-size: 14px;
  margin-top: 8px;
  margin-left: 20px;
  z-index: 100;
}
.pankuzu a {
  color: #007bff;
}
.pankuzu a:link, .pankuzu a:visited, .pankuzu a:hover, .pankuzu a:active {
  color: #007bff;
}

/* KV */
.kv img{width:100%;display:block;padding:0.5em 6em;}
@media (max-width: 767px) {
  .kv img {
    width:100%;padding:0.5em 0.5em;content: url("../images/kv_main_sp.png");
  }
}

/* 帯タイトル */
.bandTitle{background:linear-gradient(to right,var(--band-left),var(--band-right));color:#111}
.bandTitle_inner{width:min(100%,var(--max));margin:0 auto;display:flex;align-items:center;gap:12px;padding:25px 20px}
.bandTitle_icon{width:50px;height:50px}
.bandTitle h1{color:#fff;font-weight:400;margin:0;font-size:clamp(18px,2.6vw,28px);letter-spacing:.04em}
.bandTitle h1 .nashi{
  position: relative;
  display: inline-block;
}
.bandTitle h1 .nashi::before,
.bandTitle h1 .nashi::after{
  content:"";
  position:absolute;
  top:0;
  width:0.2em; height:0.2em;
  border-radius:50%;
  background: var(--accent);
}
.bandTitle h1 .nashi::before{
  left:25%;
  transform:translateX(-50%);
}
.bandTitle h1 .nashi::after{
  left:70%;
  transform:translateX(-50%);
}

/* 市場背景とニーズ */
.marketWrap{background:var(--bg-section);padding:60px 0}
.market{
  position:relative;width:min(100%,var(--max));margin:0 auto;background:#fff;
  padding:60px 40px 40px;box-shadow:0 2px 8px rgba(0,0,0,.05)
}
.market::after{
  content:"";position:absolute;bottom:-27px;left:50%;transform:translateX(-50%);
  width:120px;height:28px;background:#fff;clip-path:polygon(0 0,50% 100%,100% 0);
  box-shadow:0 2px 6px rgba(0,0,0,.05)
}
.market_hd{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  background:var(--band-hd);color:#fff;font-weight:700;font-size:16px;border-radius:20px;
  padding:8px 20px;letter-spacing:.1em;min-width:280px;text-align:center;
}
.market h2{text-align:center;font-size:24px;margin-bottom:40px;line-height:1.7}
.market h2{
  font-family: 'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho','MS PMincho',serif;
  font-weight: 600;
  letter-spacing: .04em;
}
.market p.lead{max-width:860px;margin:0 auto 30px;font-size:15px;color:#333;line-height:1.9}
.grids{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chart figcaption{text-align:center;font-size:14px;margin-top:8px;color:#4b5563}
.note{text-align:right;font-size:13px;color:#555;margin-top:12px}
.market_charts{
  display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center
}
.butLabel{font-weight:700;letter-spacing:.02em}
@media (max-width:767px){
  .market_charts{grid-template-columns:1fr;gap:14px}
  .butLabel{justify-self:center}
}

/* 現状と課題 */
.issuesWrap{background:var(--bg-section);padding:60px 0 100px;position:relative}
.issues{
  position:relative;width:min(100%,var(--max));margin:0 auto;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.05);padding:60px 40px;text-align:center;
}
.issues::after{
  content:"";position:absolute;bottom:-27px;left:50%;transform:translateX(-50%);
  width:120px;height:28px;background:#fff;clip-path:polygon(0 0,50% 100%,100% 0);box-shadow:0 2px 6px rgba(0,0,0,.05)
}
.issues_hd{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  background:var(--band-hd);color:#fff;font-weight:700;font-size:16px;border-radius:20px;
  padding:8px 20px;letter-spacing:.1em;min-width:280px;text-align:center;
}
.issues h2{text-align:center;font-size:24px;margin-bottom:40px;line-height:1.7}
.issues h2{
  font-family: 'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho','MS PMincho',serif;
  font-weight: 600;
  letter-spacing: .04em;
}
.issues_grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;justify-content:center}
.issue{background:#fff;text-align:left}
.issue_header{background:#b8bcc9;color:#fff;padding:8px 16px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}
.issue_header .highlight{color:#ffea57}
.issue_body{padding:24px 20px;display:flex;gap:10px;align-items:flex-start}
.issue_mark{font-weight:900;font-size:38px;color:#a3aab8;flex-shrink:0}
.issue_txt{font-size:17px;line-height:1.8;margin:0}
.issue_txt .em{color:var(--accent);font-weight:900}
.issues_note{ text-align:center; font-size:17px; font-weight:500; line-height:1.8; }
.issues_note p{ margin:0; }
.issues_note .swirlTailImg{ display:inline; }
.issues_note .swirlTailImg::after{
  content:""; display:inline-block; width:26px; height:26px; margin-left:6px;
  background:url("../images/icon_swirl.png") no-repeat 50%/contain;
  vertical-align:baseline; transform:translateY(8px);
}

.dec_arrow{margin:40px auto 30px;width:120px}

/* ===== edol セクション（改良版） ===== */
.edolSec {
  background: var(--bg-section);
  padding: 0px 0 60px;
}
.edolHead {
  text-align: center;
  margin-bottom: 50px;
}
.edolLead {
  font-size: clamp(16px, 2vw, 24px);
  margin: 0 0 8px;
}
.edolCatch {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
}
.edolCatch em { font-style: normal; }
.edolLayout {
  display: grid;
  grid-template-columns: 5fr 5fr;
  gap: 20px;
  align-items: center;
}
.edolFeatures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
  justify-items: center;
  align-items: start;
}
.edolFeatures .feature {
  width: 100%;
  max-width: 320px;
  justify-self: center;
}
.edolFeatures .feature:nth-child(1) {
  grid-column: 1 / -1;
}
.edolFeatures .feature:nth-child(2),
.edolFeatures .feature:nth-child(3) {
  width: 100%;
  max-width: 360px;
}
.edolFeatures img {
  width: 100%;
  height: auto;
}

.edolProduct {
  text-align: center;
  margin: 0;
}
.edolProduct img {
  width: 100%;
  max-width: 500px;
  height: auto;
}

/* 区切り線 */
.edolDivider {
  border: 0;
  height: 1px;
  width: 100%;
  background: #fff;
  margin-top: 40px;
}

/* --- スマホ対応 --- */
@media (max-width: 767px) {
  .edolLayout {
    grid-template-columns: 1fr;
  }
  .edolFeatures {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .edolFeatures .feature {
    max-width: 420px;
  }
  .edolProduct {
    margin-top: 40px;
  }
  .edolFeatures .feature:nth-child(2),
  .edolFeatures .feature:nth-child(3) {
    width: 72%;
    max-width: 360px;
  }
}
/* ==========  TONES SECTION  ========== */

.tones {
  background: #d5dee4;
  padding: 0 0 80px;
}

.tones h2 {
  margin: 0;
  padding-bottom: 80px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  font-size: clamp(18px, 2.6vw, 30px);
  color: #2b211b;
  z-index: 1;
  text-align: center;
}
.panelTitle {
  position: relative;  
  background-image:url("../images/heading_brush.png");
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:60%;
  overflow: visible;
}
.panelTitle::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 40px;
  display: block;
  width: 120px;
  height: 48px;
  background: url("../images/icon_new_badge.png") no-repeat left top / contain;
  pointer-events: none;
  z-index: 0;
}
.tones__panel picture,
.tones__panel img {
  display: block;
  width: 100%;
  height: auto;
}
/* サブコピー */
.tones__lead{
  margin: 0 auto 40px;
  max-width: 880px;
  text-align: center;
  line-height: 1.9;
  color: #2b211b;
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 500;
  letter-spacing: .03em;
}

.tones__ctaWrap{
  margin: clamp(20px, 3vw, 32px) 0;
  display: flex;
  justify-content: center;
}
.btn{
  --btn-bg:#2f93c7;
  --btn-bg-h:#2686b8;
  --btn-txt:#fff;
  --btn-radius:12px;
  --btn-pad-v:14px;
  --btn-pad-h:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: var(--btn-pad-v) var(--btn-pad-h);
  color: var(--btn-txt);
  background: var(--btn-bg);
  border-radius: var(--btn-radius);
  text-decoration:none;
  font-weight:500;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height:1;
  box-shadow: 0 8px 18px rgba(22,96,139,.15);
  transition: transform .18s ease, filter .18s ease, background-color .18s ease;
}
.btn:hover{ background: var(--btn-bg-h); filter: brightness(1.03); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.tones__rule{
  border: 0;
  height: 1px;
  width: 100%;
  background: #fff;
  margin: 60px 0;
}

.tones__nextHeading {
  display: block;
  margin: 0 auto 0;
  width: 100%;
  text-align: center;
  color: #fff;
  background: #838fa1;
  padding: 5px 10px;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: .04em;
}

@media (max-width: 640px) {
  .tones {
    padding: 20px 0 60px;
  }
  .tones h2 {
    padding-bottom: 30px;
  }
  .panelTitle {
    background-size:90%;
  }
  .panelTitle::before {
    width: 90px;
    height: 36px;
    left: 0px;
  }
  .tones__panel img {
    padding: 20px 34px;
  }
  .tones__rule{ height: 4px; }
  .btn{ --btn-pad-h:28px; --btn-pad-v:12px; }
}

/* ========== REASONS（透明感・高染着・継続性） ========== */
.reasons{
  background:#d5dee4;
  padding:clamp(40px,6vw,72px) 0 80px;
}
.reasons h2{
  margin:0;
  padding-bottom:60px;
  font-family:"Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.06em;
  font-size:clamp(18px,2.6vw,30px);
  color:#2b211b;
  text-align:center;
}
.reasonsTitle{
  position:relative;
  background:url("../images/heading_brush.png") no-repeat 0 100%/80%;
  background-position: calc(50%) calc(50% + 10px);
  overflow:visible;
  z-index: 0;
}
.reasonBand{
  --band-bg:#a5aab8;
  --bar-color:#fff;
  display: grid;
  grid-template-columns: auto 1px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: clamp(10px,1.6vw,16px) clamp(14px,2vw,20px);
  background: var(--band-bg);
  color:#fff;
}
.reasonBand{
  position: relative;
  z-index: 2;
}
.reasonBand__label{
  margin:0;
  padding: clamp(4px,.8vw,8px) clamp(8px,1.2vw,12px);
  font-family:"Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  font-weight:900;
  letter-spacing:.18em;
  font-size:clamp(18px,2.2vw,28px);
  line-height:1;
}
.reasonBand__bar{
  width:1px;
  height:100%;
  background:var(--bar-color);
}
.reasonBand__lead{
  margin:0;
  line-height:1.7;
  font-size:clamp(13px,1.2vw,16px);
  min-width:0;
  max-width:none;
  font-weight:500;
}
.reason__desc{
  margin:clamp(18px,3vw,28px) 0 clamp(22px,3.2vw,32px);
  padding:0 clamp(6px,2vw,10px);
}
.reason__desc p{
  margin:0;
  font-size:clamp(14px,1.4vw,16px);
  line-height:1.8;
  color:#2b211b;
  letter-spacing:.04em;
}
.reason__desc strong{
  color:#d13b7a;
  font-weight:800;
  font-size: 1.2em;
}
.reason__desc span{
  font-weight:800;
}
.reason__row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(16px,3vw,32px);
  align-items:center;
  padding:30px;
  background:#fff;
  margin-bottom:40px;
}
.reason__fig{ margin:0; }
.reason__fig img{
  display:block;
  width:100%;
  max-width:520px;
  height:auto;
  margin-inline:auto;
}
.reason__arrow{
  width:clamp(28px,5vw,44px);
  height:120px;
  background:url("../images/reason_arrow.png") center/contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.05));
}
.reasonBlock{ margin:-20px 0 40px; }
.reasonBlock__fig{ margin:0; display:flex; justify-content:center; align-items:center; }
.reasonBlock__fig img{
  display:block; width:100%; max-width:480px; height:auto; margin:0 auto;
}
.reasonBlock__fig--chart img{ max-width:960px; width:100%; height:auto; }
.reason__row--2{
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  padding: 30px;
  background: #fff;
}
.reason__row--2 .reason__arrow{ display:none; }
.reason__row--2 .reason__desc{ margin:0; padding:0 clamp(6px,2vw,10px); }

@media (max-width: 640px){
  .reasons h2{
    padding-bottom: 40px;
  }
  .reasonsTitle{
    background:url("../images/heading_brush.png") no-repeat 0 100%/100%;
    background-position: calc(50%) calc(50% + 2px);
  }
  .reasonBand{ column-gap:10px; padding:12px 14px; }
  .reasonBand__label{ padding:4px 8px; }
  .reasonBand__bar{ height:100%; }
  .reason__row{
    grid-template-columns:1fr;
    gap:14px;
    padding:20px 16px;
  }
  .reason__arrow{
    width:36px; height:56px; margin:2px auto 0;
  }
  .reason__fig img{ max-width:680px; }
  .reason__row--2{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 16px;
  }
  .reason__row--2 .reasonBlock__fig img{
    max-width: 100%;
  }
}

.adhesionBox{
  background:#fff;
  padding:clamp(18px,2.4vw,28px);
  margin: 0 0 40px;
}

.adhesionGrid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(16px,2.4vw,28px);
  align-items:center;
}

.adhesionText p{
  margin: 0;
  font-size: clamp(14px,1.4vw,16px);
  line-height: 1.9;
  letter-spacing: .03em;
  color:#2b211b;
  font-weight:600;
}
.adhesionText strong{ color:#d13b7a; font-weight:800;font-size: 1.2em; }

.adhesionFig{ margin:0; text-align:center; }
.adhesionFig img{
  display:block;
  width:100%;
  height:auto;
  max-width:520px;
  margin:0 auto;
}

@media (max-width: 960px){
  .adhesionGrid{ grid-template-columns: 1fr; gap:18px; }
}


/* ========== TRIAL ========== */
.trial { background: #d5dee4;padding-bottom:60px; }

.trial h2{
  margin:0;
  padding-bottom:60px;
  font-family:"Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.06em;
  font-size:clamp(18px,2.6vw,30px);
  color:#2b211b;
  text-align:center;
}
.trialTitle{
  position:relative;
  background:url("../images/heading_brush.png") no-repeat 0 100%/80%;
  background-position: calc(50%) calc(50% + 10px);
  overflow:visible;
  z-index: 0;
}
.trialPanel01{
  position: relative;
  max-width: 1200px;
  margin: -50px auto 40px;
}
.trialPanel02{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.trialPanel01 picture,
.trialPanel01 img{ display:block; width:100%; height:auto; }
.trialPanel02 picture,
.trialPanel02 img{ display:block; width:100%; height:auto; }

@media (max-width: 640px){
  .trialTitle{
    background: url("../images/heading_brush.png") no-repeat 0 100%/100%;
    background-position: calc(50%) calc(50% + 2px);
  }
  .trialPanel01{
    margin: -30px auto 40px;
  }
  .trialPanel__badge{
    left: 6px;
    top: -10px;
    width: clamp(76px, 22vw, 96px);
  }
}


/* ====== 共通レイアウト ====== */
.trycaseArea{
  background: #d5dee4;
}
.trycase{
  position: relative;
  overflow: hidden;
  width:min(100%,var(--max));
  margin:0 auto;
  padding:0;
}

/* 左のカラー縦帯 */
.trycase__rail{
  position: absolute;
  inset: 0 auto 0 0;
  width: 20px;
  content: "";
  display: block;
  z-index: 2;
  background:
    linear-gradient(
      to bottom,
      var(--band-c1) 0 var(--band-stop1),
      var(--band-c2) var(--band-stop1) var(--band-stop2),
      var(--band-c3) var(--band-stop2) 100%
    );
}

/* bandのバリエーション（1/2/3色） */
.trycase.case--band-1{
  --band-c1:#c55678; --band-c2:#c55678; --band-c3:#c55678;
  --band-stop1:100%; --band-stop2:100%;
}
.trycase.case--band-2{
  --band-c1:#c55678; --band-c2:#dcc3a6; --band-c3:#dcc3a6;
  --band-stop1:50%; --band-stop2:100%;
}
.trycase.case--band-3{
  --band-c1:#c55678; /* magenta */
  --band-c2:#8e89a8; /* pearl gray */
  --band-c3:#dcc3a6; /* sand beige */
  --band-stop1:33.34%;
  --band-stop2:66.67%;
}
.trycase.case--band-4{
  --band-c1:#dcc3a6; --band-c2:#dcc3a6; --band-c3:#dcc3a6;
  --band-stop1:100%; --band-stop2:100%;
}
.trycase.case--band-5{
  --band-c1:#8e89a8; --band-c2:#8e89a8; --band-c3:#8e89a8;
  --band-stop1:100%; --band-stop2:100%;
}
.trycase.case--band-6{
  --band-c1:#1e3e6e; --band-c2:#1e3e6e; --band-c3:#1e3e6e;
  --band-stop1:100%; --band-stop2:100%;
}

/* 右カラム */
.trycase__right{ display: grid; grid-template-rows: auto auto; gap: clamp(20px,2.5vw,28px);background:#fff; }
.trycase__leadImg {
  padding: 0;
  margin: 0;
}

/* 右上：リード画像＋POINTカード（PC重ね/ SP下） */
.trycase__lead{ position: relative; }
.trycase__leadImg img{ width: 100%; display:block; object-fit: cover; }

/* POINTカード */
.trycase__point{
  position: absolute;
  right: clamp(12px,1.8vw,20px);
  top: clamp(12px,1.8vw,20px);
  width: min(44%, 360px);
  padding: 12px;
}
.trycasePoint__media{ position: relative; aspect-ratio: 16/9; overflow: hidden; }
.trycasePoint__video{ width:100%; height:100%; object-fit: cover; display:block;border:1px solid #ddd; }
.trycasePoint__play{
  position:absolute; inset:auto 50% calc(50% - 32px) auto;
  transform: translateX(50%);
  width:64px; height:64px; border-radius:50%;
  border:none; background:#ffffffcc; cursor:pointer;
}
.trycasePoint__play::before{
  content:""; width:0; height:0; display:block; margin: 0 auto;
  border-left:20px solid #333; border-top:12px solid transparent; border-bottom:12px solid transparent;
  transform: translateX(5px);
}
.trycasePoint{
  display: flex;
}
.trycasePoint__ttl{
  font-size: 13px;
  line-height: 1.5;
  margin: 10px 4px 2px;
  color:#000;
  font-weight:700;
  letter-spacing:.08em;
}
.trycasePoint__text{
  font-size: 12px;
  line-height: 1.6;
  margin: 10px 4px 2px;
  color:#000;
}

/* 右下：3×2 グリッド */
.trycase__grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(12px,1.6vw,18px);
  padding:20px 40px 0 60px;
}
.caseCard{ overflow:hidden;margin:0; }
.caseCard__img{margin:0;}
.caseCard--image img{ width:100%; display:block; object-fit:cover; }

/* --- TRY COLOR 各カード内のリンク --- */
.caseCard {
  position: relative;
}
.caseCard__link {
  position: absolute;
  background: rgba(255,0,0,0);
  z-index: 5;
  display: block;
  cursor: pointer;
}
.caseCard__link01 { bottom: 70%;right: 3%;width: 32%;height: 8%; }
.caseCard__link02 { bottom: 75%;right: 0%;width: 42%;height: 8%; }
.caseCard__link03 { bottom: 72%;right: 0%;width: 38%;height: 8%; }
.caseCard__link04 { bottom: 73%;right: 16%;width: 26%;height: 8%; }
.caseCard__link05 { bottom: 72%;right: 12%;width: 25%;height: 8%; }
.caseCard__link06 { bottom: 72%;right: 8%;width: 30%;height: 8%; }

.caseCard__link:hover,{
  cursor: pointer;
}

@media (max-width: 640px) {
  .caseCard__link01 { bottom: 71%;right: 3%;width: 32%;height: 7%; }
  .caseCard__link02 { bottom: 75%;right: 0%;width: 42%;height: 7%; }
  .caseCard__link03 { bottom: 72%;right: 0%;width: 38%;height: 7%; }
  .caseCard__link04 { bottom: 74%;right: 16%;width: 26%;height: 7%; }
  .caseCard__link05 { bottom: 72%;right: 12%;width: 25%;height: 7%; }
  .caseCard__link06 { bottom: 72%;right: 8%;width: 30%;height: 7%; }
}


.caseCard--text{ padding: 0 6px 20px; }
.caseCard__ttl{
  font-weight:600;
  margin:10px 0 5px;
  letter-spacing:.04em;
  font-size: 13px;
  font-family:"Hiragino Mincho ProN","Yu Mincho","游明朝",serif;
  line-height:1.6;
}
.caseCard__txt{
  margin:0 0 10px; line-height:1.6; font-size: 12px; color:#334;
}

.caseCard--mix{ padding:0px 0 20px; }
.caseCard--mix .caseCard__img img{ width:100%; height:100%; object-fit:cover;}
.caseCard--mix .caseCard__body{ align-self:center; }

/* ====== レスポンシブ ====== */
@media (max-width: 767px){
  .trycase{
    grid-template-columns: 1fr; 
    padding-left: 12px;
  }
  .trycase__right{ gap: 20px; }
  .trycase__point{
    position: static;
    width: 100%;
    margin-top: 10px;
  }
  .trycase__grid{ grid-template-columns: repeat(2,1fr); }
  .caseCard--mix{ grid-template-columns: 1fr; }
  .trycase__rail{ width: 12px;}
  .trycase__grid{ grid-template-columns: 1fr;padding: 20px 40px 0 40px; }
  .caseCard--text{ padding: 12px 0px; }
  .caseCard--mix{ padding:12px 0; }
}


/* =====================================================
   MESSAGES FROM HAIRSTYLISTS（スタイリストの声）
   ===================================================== */
.dcMore{
  padding: 0px 20px 80px;
}
/* ===== Voices block ===== */
.voices{
  padding: 80px 0px 0px;
  background: #e5edf3;
}
.voices__head{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 12px 20px;
  padding: clamp(10px,3vw,16px) clamp(16px,4vw,40px) clamp(14px,2vw,18px);
  background: #fff;
}
.voices__title{
  position: relative;
  margin-top: -50px;
  font-weight: 300;
  letter-spacing: .2em;
  font-size: 36px;
  z-index: 1;
  font-family: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.voices__brand{
  display: block;
  align-self: start;
  margin-top: -44px;
  height: 40px;
  width: auto;
  pointer-events: none;
}
@media (max-width: 640px){
  .voices__head{
    gap: 0px;
  }
  .voices__title{
    font-size: 30px;
    line-height: 1.4;
    margin-top: -36px;
    letter-spacing: .16em;
  }
  .voices__brand{
    margin-top: -28px;
    height: 24px;
  }
}
.voices__lead{
  font-size: 20px;
  font-weight: 700;
  margin-top: -20px;
  margin-bottom: 0px;
}

.voices__grid{
  padding: 20px 60px 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  background: #fff;
}
.voiceCard{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px,1.8vw,18px);
  padding: 10px 0;
}
.voiceCard__media{
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1.2;
}
.voiceCard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voiceCard__body{min-width: 0;}
.voiceCard__text{
  margin: 0 0 10px;
  line-height: 1.9;
  color: #24323f;
  font-size: clamp(13px,1.6vw,14px);
}

.voiceCard__media { position: relative; }
.voiceCard__link {
  position: absolute;
  display: block;
  background: rgba(255,0,0,0);
  z-index: 5;
  cursor: pointer;
}
.voiceCard__link01 { bottom: 6%; left: 4%;  width: 52%; height: 9%; }
.voiceCard__link02 { bottom: 6%; left: 4%;  width: 70%; height: 9%; }
.voiceCard__link03 { bottom: 6%; left: 4%;  width: 65%; height: 9%; }
.voiceCard__link04 { bottom: 6%; left: 4%;  width: 43%; height: 9%; }
.voiceCard__link05 { bottom: 6%; left: 4%;  width: 43%; height: 9%; }
.voiceCard__link06 { bottom: 6%; left: 4%;  width: 48%; height: 9%; }

@media (max-width: 720px){
  .voices__grid{ grid-template-columns: 1fr; }
  .voiceCard{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .voices__grid{
  padding: 20px 20px 40px;
  }
  .voices__title{
    background-size: 100%;
    background-position: 0 100%;
    padding-bottom: 14px;
  }
  .voiceCard__media img{

  }
  .voiceCard__link01 { bottom: 6%; left: 2%;  width: 54%; height: 9%; }
  .voiceCard__link02 { bottom: 6%; left: 2%;  width: 73%; height: 9%; }
  .voiceCard__link03 { bottom: 6%; left: 2%;  width: 68%; height: 9%; }
  .voiceCard__link04 { bottom: 6%; left: 2%;  width: 45%; height: 9%; }
  .voiceCard__link05 { bottom: 6%; left: 2%;  width: 45%; height: 9%; }
  .voiceCard__link06 { bottom: 6%; left: 2%;  width: 50%; height: 9%; }
}


/* ===== DC 詳細リンク帯 ===== */
.dcMore{
  background:#e5edf3;
  margin-top: 0;
}
.dcMore__inner{
  max-width: 984px;
  margin: 0 auto;
  padding: 30px 0;
  display: flex;
  background:#e9ecee;
}

.dcMore__product{
  bottom: 0;
  width: 28%;
  pointer-events: none;
  margin: 0 0 0 10%;
}
.dcMore__product img{
  display:block;
  width:100%;
  height:auto;
}

.dcMore__link{
  position: relative;
  display: inline-flex !important;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
}
.dcMore__link a{
  line-height: 1.7;
  font-size: clamp(16px,1.8vw,22px);
  font-weight: 700;
  letter-spacing: .06em;
  color: #222;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
  transition: text-decoration-color 0.25s ease, opacity 0.25s ease;
}
.dcMore__link a:hover,
.dcMore__link a:focus-visible {
  text-decoration-color: transparent;
  opacity: 0.85;
}
.dcMore__arrow{
  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;
}

/* ===== SP：縦積み（画像→リンク） ===== */
@media (max-width: 768px){
  .dcMore__link{
    left: 0;
    text-align: center;
    background-position: 50% 100%; /* 下線を中央基準に */
  }
  .dcMore__link a{
  text-decoration-thickness: 1px;
  }
}



/* --- フッター --- */
.siteFooter {
  background-color: #E1E2E9;
  margin: 0 auto;
}
.siteFooter__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.siteFooter__inner img {
  margin: 0px;
  padding: 20px 0 10px;
  max-width: 216px;
}
.siteFooter__inner p {
  font-weight: bold;
  color: #253371;
  padding-bottom: 1rem;
  margin: 0;
}




.pc {
  display: inline;
}
.sp {
  display: none;
}


/* SP */
@media (max-width:767px){
  .grids,.issues_grid{grid-template-columns:1fr}
  .issues{padding:50px 20px 60px}
  .issue_body{padding:20px 16px}
  .chart{margin:0}
  .sp {display: inline;}
  .pc {display: none;}
}

/* ===== Reveal animations (fade & move) ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.reveal.fade-up    { transform: translateY(24px); }
.reveal.fade-down  { transform: translateY(-24px); }
.reveal.fade-left  { transform: translateX(24px); }
.reveal.fade-right { transform: translateX(-24px); }

.reveal.inview { opacity: 1; transform: translate(0,0); }

.reveal.fade-in {
  transform: none;
}
.reveal.fade-in.inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}