@charset "UTF-8";

/* =========================================================
   CORNERSTONE LP styles (for external css)
   Source: index-yh260114-05.html inline style cleaned up
========================================================= */

/* =====================================
   Base
===================================== */
html { font-size: 100%; }

body{
  font-family: "HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","メイリオ",sans-serif;
  font-size: 1rem;
  background: #F4F7F7;
  color: #262626;
}

a{ text-decoration: none; }

a:visited {color:#ffffff;}

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

/* pc/sp switch (base) */
.pc{ display: block !important; }
.sp{ display: none !important; }

/* =====================================
   Typography
===================================== */
p{
  font-size: 0.9375rem; /* 15px */
  line-height: 1.55;
  letter-spacing: 0.02rem;
}

/* 段落間の呼吸 */
p + p{ margin-top: 0.75rem; }

/* ブロック末尾の詰まり防止 */
.chigai-block p:last-child{ margin-bottom: 1rem; }

/* 見出し直下の呼吸（全体） */
h3 + p, h3 + ul, h3 + dl,
h4 + p, h4 + ul, h4 + dl{
  margin-top: 0.75rem;
}

/* 文章量が多いブロックは少し広め */
.chigai-block h3 + p,
.chigai-block h4 + p{
  margin-top: 1rem;
}

.column-title{
  font-size: 1.000rem;
  font-weight: 700;
  margin-top: 0.5rem;
}

/* li間隔（スコープ限定） */
.chigai-block li + li{ margin-top: 0.45rem; }
.tyusyaku li + li{ margin-top: 0.2rem; }

/* headings */
h1{ text-align: center; }

h2{
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-align: center;
}

/* h3（PC基準） */
h3{
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  position: relative;
  padding-bottom: 0.5rem;
  margin-top: 3.75rem;
  margin-bottom: 1.5rem;
}

/* h3下線（基本） */
h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(38, 38, 38, 0.6);
}

/* h4（文字幅下線） */
h4{
  font-size: 0.9375rem;
  margin: 0.25rem 0 0.5rem;
  font-weight: 600;
  position: relative;
  display: inline-block;
  padding-bottom: 0.25rem;
}

h4::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(38, 38, 38, 0.3);
}

.note{
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.tyusyaku{
  font-size: 0.8125rem; /* 13px */
  line-height: 1.45;
  color: #555;
}

/* 派生モデル内のh4（●など） */
.derived-models h4{
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 600;
}

/* point-list（文章より控えめ） */
.point-list{
  font-size: 0.8125rem;
  line-height: 1.5;
  list-style: none;
  padding-left: 0;
}

.point-list li{
  position: relative;
  padding-left: 1.1rem;
}

.point-list li::before{
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.9em;
  color: #444;
}

/* =====================================
   Section title (lead header)
===================================== */
.section-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  align-self: stretch;
  max-width: 768px;
  margin: 2rem auto 0;
  padding: 0 2rem;
  text-align: center;
}

.section-title h2 + .hutoji-center{ margin-top: 0.35rem; }

.section-title .title-marker{ margin-bottom: 0.35rem; }

.section-subtitle{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9375rem;
  margin: 2.25rem 0 1rem;
}

/* 折り返しでも各行にマーカーが入る安定版 */
.title-marker{
  display: inline;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.08em 0.15em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(transparent 58%, #FEC020 58%);
}

.title-marker-wrap{ text-align: center; }

/* 視覚的に非表示（SEO用） */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ブランドリンク（通常リンク化） */
.brand-link{
  margin-top: 0.75rem;
  font-size: 0.875rem;
  text-align: center;
}

.brand-link a{
  color: #262626;
  text-decoration: underline;
}

.brand-link a:hover{
  text-decoration: none;
  opacity: 0.7;
}

/* =====================================
   Layout
===================================== */
.article{
  max-width: 768px;
  margin: auto;
  padding: 5rem 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 6.25rem;
}

.lead,
.matome{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75rem;
}

/* =====================================
   Brand / Gray Box
===================================== */
.gray-box{
  background: #FFF;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* gray-box内のh3は“非表示前提” */
.gray-box > h3{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* ロゴ */
.brand-header .logo{
  width: auto;
  max-width: 180px;
  height: auto;
  image-rendering: auto;
}

/* ロゴ下テキスト */
.brand-sub{
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.14em;
  margin-top: 0.25rem;
  color: #666;
  text-align: center;
}

/* =====================================
   Titles / Blocks
===================================== */
.chigai-title-block{
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start; /* PCは左寄せ */
}

.chigai-title-frame{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* line-2は基本不使用 */
.line-2{ display: none; }

.chigai{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6.25rem;
}

.chigai-block{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2.5rem;
}

/* 3カラム */
.frame43{
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.frame43--top{ align-items: flex-start; }

.frame76{
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 派生モデル：PCはボタン下揃え */
.frame43.derived-models{ align-items: stretch; }
.frame43.derived-models > .frame76{ align-self: stretch; }
.frame43.derived-models > .frame76 > .item-box{ margin-top: auto; }

/* lead冒頭の余白調整（※現状の見え方維持）
   - margin-bottom にマイナスを使うため、今後の構造変更時は要確認 */
.lead > .chigai-title-block{ margin-bottom: -1.25rem; }
/* lead直後の最初のh3は、上の余白が二重になりやすいので詰める */
.lead > .chigai-title-block h3{ margin-top: 0; }

/* =====================================
   Tags / Size Guide
===================================== */
.item-tag{
  display: inline-flex;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 6.25rem;
  background: #494949;
  color: #FFF;
}

.size-guide-box{
  background: #E6E9EA;
  padding: 1.5rem 1.75rem;
  border-radius: 0.5rem;
  width: 100%;
}

/* サイズガイド内：ドット無し */
.size-guide-box ul{
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.5rem;
}

/* 比較/所感などもドット無し */
.chigai-block ul{
  list-style: none;
  padding-left: 0;
}

.chigai-block dl dt{ font-weight: 700; }

/* =====================================
   CTA
===================================== */
.item-box{
  width: 100%;
  text-align: center;
}

/* a には余計なレイアウト指定をしない（中身の見た目はクラス側で） */
.item-box > a{ display: inline-block; }

.cta-button{
  display: block;
  padding: 0.4rem 1.25rem;
  min-height: 2rem;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 6.25rem;
  background: #212121;
  color: #FAFAFA;
  border: none;
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
}

.cta-button:visited{
  color: #FAFAFA !important;
}
.cta-button:hover{
  background: #787878;
  text-decoration: none;
}

/* ページ最下部CTAの余白確保 */
.article > .chigai > .item-box:last-child {
    margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
    .item-box .cta-button {
        padding: 18px 24px;
    }
}

/* =====================================
   Comparison Table
===================================== */
.hyou1{
  display: flex;
  border: 1px solid #212121;
}

.hyou1 .retsu{
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #212121;
}

.hyou1 .retsu:last-child{ border-right: none; }

.retsu1,
.retsu1-1,
.sell{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.625rem;
  font-size: 0.875rem;
  border-bottom: 1px solid #212121;
}

.hyou1 .retsu > div:last-child{ border-bottom: none; }

.retsu1{
  background: #888;
  color: #FFF;
  font-weight: 700;
}

.retsu1-1{ background: #F2F2F2; }
.sell{ background: #FAFAFA; }

/* =====================================
   Utilities
===================================== */
.hutoji{ font-weight: 700; }

.hutoji-center{
  font-weight: 700;
  text-align: center;
}

.closing{ margin-top: 0.75rem; }

/* =====================================
   Responsive (tablet)
===================================== */
@media screen and (max-width: 768px){
  h2{ font-size: 1.5rem; }
  h3{ font-size: 1rem; }

  .article{
    padding: 3rem 1.25rem 0;
    gap: 3.75rem;
  }

  .section-title{
    padding: 0 1.25rem;
    margin-top: 1.25rem;
  }
}

@media screen and (max-width: 352px){
  p{ font-size: 0.875rem; }
}

/* =====================================
   Responsive (SP)  ※max-width 750px は1つだけ
===================================== */
@media screen and (max-width: 750px){
  /* pc/sp 切替 */
  .pc{ display: none !important; }
  .sp{ display: block !important; }

  /* section subtitle spacing */
  .section-subtitle{ margin: 1.75rem 0 0.85rem; }
  .section-title .title-marker{ margin-bottom: 0.3rem; }
  .section-title h2 + .hutoji-center{ margin-top: 0.25rem; }

  /* stack subtitle */
  .section-subtitle--stack{
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }

  .title-marker--note{
    font-size: 0.85em;
    font-weight: 600;
  }

  /* title-marker（長文用：SPでは折り返さず縮小） */
  .title-marker-long{
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 見出し直下の呼吸をSPで少し詰める */
  h3 + p, h3 + ul,
  h4 + p, h4 + ul{
    margin-top: 0.6rem;
  }

  /* point-list（SP） */
  .point-list{ font-size: 0.875rem; }

  /* h3（SP：中央寄せ＋自然な折り返し） */
  h3{
    text-align: center;
    letter-spacing: 0.04em;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
    margin-top: 3.25rem;
    margin-bottom: 1.25rem;
  }

  /* 下線を“画面幅いっぱい感”（左右少し余白） */
  .chigai-title-frame{ width: 100%; }

  h3::after{
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 0.5rem);
  }

  /* lead直下：幅が縮むのを防止 */
  .lead > .chigai-title-block{ width: 100%; }
  .lead > .chigai-title-block .chigai-title-frame{ width: 100%; }

  /* SPではタイトルブロックも中央基準 */
  .chigai-title-block{ align-items: center; }

  /* ロゴSP縮小 */
  .brand-header .logo{ max-width: 150px; }

  /* 長文h2：SPは折り返しなしで縮小 */
  .h2-long{
    white-space: nowrap;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
  }

  /* 長文h3：SPは折り返しなしで縮小 */
  .h3-long{
    white-space: nowrap;
    font-size: 0.85rem;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* （任意）hutoji-centerも1行にしたい場合 */
  .hutoji-long{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 3カラム→1カラム縦積み */
  .frame43,
  .frame43.derived-models{
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
  }

  .frame76{
    flex: none;
    width: 100%;
  }

  /* 縦積み時は下揃え解除 */
  .frame43.derived-models > .frame76 > .item-box{ margin-top: 0; }

  /* カード区切り（任意） */
  .frame43--top > .frame76{
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(38, 38, 38, 0.15);
  }

  .frame43--top > .frame76:last-child{
    padding-bottom: 0;
    border-bottom: none;
  }

  /* 表ヘッダーの折り返し対策（SP） */
  .hyou1 .retsu1{
    font-size: 0.75rem;
    height: 3.2rem;
    line-height: 1.2;
    padding: 0 0.25rem;
    text-align: center;
  }

  .hyou1 .retsu1 .hutoji{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* フッター*/
.jalana-logo{
    width: 5rem;
height: auto;
}
.footer{
    display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
color: #FFF;
}
.footer1{
display: flex;
padding: 3rem 0rem 1.8rem 0rem;
flex-direction: column;
align-items: center;
gap: 1.2rem;
align-self: stretch;
background: #1D1D1D;
}
.footer2{
    display: flex;
    padding: 1rem 0rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
background: #050505;
}
.footer-social{
    display: flex;
    width: 8rem;
    justify-content: space-between;
    align-items: center;
}
.img-socialicon{
    height: 1rem;
    width: auto;
}
.copyright{
text-align: center;
font-family: "Hiragino Kaku Gothic ProN";
font-size: 0.625rem;
font-style: normal;
font-weight: 200;
line-height: normal;
}




/* =====================================
   leadのPCだけ例外（必要なら残す）
===================================== */
@media screen and (min-width: 751px){
  .lead > .chigai-title-block{
    width: 100%;
    align-items: flex-start;
  }
  .lead > .chigai-title-block h3{ text-align: left; }
}