:root{
  --brand:#235ca3; /* マンゴハウス赤 */
  --ink:#222;      /* 本文色 */
  --muted:#666;    /* 補助テキスト */
  --bg:#fff;       /* 背景 */
  --card:#f5f8fa;  /* カード背景 */
  --line:#dfebef;  /* 枠線 */
  --radius:14px;   /* 角丸 */
}

* { box-sizing:border-box }

img{
  max-width:100%;
  height:auto;
  vertical-align:middle;
}

.container{
  max-width:1160px;
  margin-inline:auto;
  padding:24px 16px;
}


/* ====== ヒーロー ====== */
.hero{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background-image:url(/asset2023/images/mens/bg01-pc.png);
}

.hero{
  background-repeat:no-repeat;
  background-position:top center;
  background-size:cover;
}

.hero__in{
  display:grid;
  gap:12px;
  grid-template-columns:1.2fr .8fr;
  align-items:center;
  padding:24px;
}

/* SPでは1カラム＋画像を下に */
@media (max-width:719px){
  .hero__in{ grid-template-columns:1fr }
  .hero__in > :first-child{ order:1 }
  .hero__img{ order:2; margin-top:12px }
}

.hero h1{
  margin:0;
  font-size:clamp(22px,3.5vw,36px);
  letter-spacing:.02em;
}

.hero p{
  margin:.6em 0 0;
  color:var(--muted);
  line-height:1.8;
}


.hero__img{
  aspect-ratio:16/10;
  border-radius:12px;
  background:#fff;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
}


/* ====== ナビ（ページ内） ====== */
.toc{
  margin:22px 0;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2,1fr);
}

@media (min-width:720px){
  .toc{ grid-template-columns:repeat(4,1fr) }
}

.toc a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--ink);
}

.toc a small{ color:var(--muted) }

.toc a:hover{ outline:2px solid #d7f0ff }


/* ====== セクション共通 ====== */
.section{ margin:38px 0 28px }

.section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.section__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:120%;
  color:var(--muted) ;
  margin:0% 0 3%;
}

/* ====== カード（素材ごとの紹介） ====== */
.grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

.card__media{ position:relative }

.label{
  position:absolute;
  left:12px;
  top:12px;
  background:#fff;
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
}

.card__media img{ display:block }

.card__body{ padding:16px }

.lead{
  margin:0 0 12px;
  font-weight:600;
  font-size:18px;
}

.desc{
  margin:0;
  color:var(--muted);
  line-height:1.9;
}


/* PCはカード内を2カラムに */
@media (min-width:960px){
  .card{
    display:grid;
    grid-template-columns:1.1fr 1fr;
  }
  .card__media{ border-right:1px solid var(--line) }
}


/* ====== カードをリンク化（2パターン対応） ====== */
/* A) カード全体をリンク： data-href を付けるだけ */
.card[data-href]{
  cursor:pointer;
  position:relative;
  -webkit-tap-highlight-color:rgba(0,0,0,.08);
}

.card[data-href]:hover{ outline:2px solid #d7ebff }
.card[data-href]:active{ outline:2px solid #b3dfff; filter:saturate(1.02) }
.card[data-href]:focus-visible{ outline:3px solid #8ad4ff }
.card[data-href]:focus-within{ outline:2px solid #d7edff }


/* B) 写真と見出し(lead)だけリンク： ブロックリンク化 */
.card__media > a,
.card__body > .lead > a{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

.card__media > a:after,
.card__body > .lead > a:after{
  content:"";
  position:absolute;
  inset:0;
}


/* ====== 厚さメーター（CSSのみ） ====== */
.meter{ margin-top:14px }

.meter__scale{
  position:relative;
  height:8px;
  background:linear-gradient(90deg,#f5f8fa,#dfebef);
  border-radius:999px;
  border:1px solid var(--line);
}

.meter__knob{
  --pos:50%;
  position:absolute;
  top:50%;
  left:var(--pos);
  transform:translate(-50%,-50%);
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--brand);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}

.meter__labels{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

/* data-thickness="30" → 30% など */
.meter[data-thickness] .meter__knob{ left:calc(attr(data-thickness percentage)) }

/* Safari/Fallback（カスタムプロパティ受け取り） */
.meter[style*="--t:"] .meter__knob{ left:var(--t) }


/* ====== 特性ドット（5段階） ====== */
.traits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

@media (min-width:640px){
  .traits{ grid-template-columns:repeat(4,1fr) }
}

.trait{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
}

.trait b{
  display:block;
  font-size:12px;
  color:var(--muted);
}

.dots{
  margin-top:4px;
  display:flex;
  gap:6px;
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ddd;
}

.dot.on{ background:var(--brand) }


/* ====== 比較表 ====== */
.table-wrap{
  margin-top:22px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
}

table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

th, td{
  padding:12px 10px;
  border-bottom:1px solid #dfebef;
  text-align:left;
  font-size:14px;
}

thead th{
  background:#f5f8fa;
  position:sticky;
  top:0;
}

tbody tr:hover{ background:#f4f6f7 }



/* ====== 注意・FAQ ====== */
details{
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  margin-top:10px;
}

summary{
  list-style:none;
  padding:12px 14px;
  font-weight:600;
  cursor:pointer;
}

summary::-webkit-details-marker{ display:none }

/* PC時は右側から、SP時は下から出すオプション（ここでは常に右から） */
@media (min-width:960px){
  .toc{ display:none }
}


.nav_title {font-size:120%; margin:5% 1% 0%;}
.pointmaterial {
  text-align:center; color:var(--muted);
}

.more-btn {
  margin:8% auto 1%;
}
.page2{
  margin-top:-110px;
}