@charset "utf-8";
/* Essential Beauty Needs — スマホ優先の調整 2026.08
   既存のスタイルを上書きするため、必ず最後に読み込むこと */

html,body{max-width:100%}
*{-webkit-tap-highlight-color:rgba(200,68,106,.12)}
img,video,iframe{max-width:100%;height:auto}

/* 表は横スクロールで逃がす */
table{max-width:100%}
@media (max-width:700px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal}
  table th,table td{min-width:6.5em}
  .tbl-scroll table{display:table}
}

/* 極小文字の底上げ */
@media (max-width:700px){
  .pr,.small,.cta-note{font-size:12.5px!important;line-height:1.75}
  body{font-size:16px}
}

/* タップ領域は44px以上 */
@media (max-width:700px){
  .apply,.cta,.cta-sub,.btn,.btn-main,.btn-sub,.go,.foot-nav a,.nav-links a{
    min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center}
  .go{justify-content:flex-start}
  .foot-nav{gap:2px}
  .foot-nav a{justify-content:flex-start;padding:4px 0}
  .apply{width:100%}
}

/* ヘッダー：縦積み＋ナビは横スクロール */
@media (max-width:640px){
  .site-head-in{flex-direction:column;align-items:stretch;gap:8px;padding:10px 0 8px}
  .brand{padding:0 16px;text-align:center}
  .site-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    justify-content:flex-start;gap:2px;padding:0 12px 2px;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{flex:0 0 auto;font-size:13px;padding:7px 12px}
}

/* 余白をスマホ向けに詰める */
@media (max-width:700px){
  section{margin:40px 0}
  main{padding-bottom:48px}
  h1{font-size:24px;line-height:1.5}
  h2{font-size:18.5px}
  .phero{padding:32px 0 8px}
  .card{padding:18px}
  .thumb,.card-img{margin-left:-18px;margin-right:-18px}
  .site-foot{padding:32px 0 48px}
}

/* 3カラム以上のグリッドは1〜2列に落とす */
@media (max-width:640px){
  .grid-2,.phase,.trial{grid-template-columns:1fr!important}
  .worry{grid-template-columns:1fr 1fr!important}
}

/* 旧ページ用：中央寄せの見出しと詰まった行間を整える */
@media (max-width:700px){
  .item-card{padding:18px!important}
  .editor-comment{padding:14px!important}
  #affiliateNotice{display:none}
}

/* 横幅700px指定のテーブルを解除 */
@media (max-width:700px){
  table[style*="min-width"],table.compare{min-width:0!important}
}