/*
Theme Name:GRAVITY child
Theme URI:https://tcd-theme.com/tcd111
Description:WordPressテーマ「GRAVITY」の子テーマ
Template:gravity_tcd111
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/
.tcd-author-box--in-header{
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background-color: #ffffff;
}
.tcd-author-box--in-header .tcd-author-box__avatar img{ border-radius: 999px; }
.tcd-author-box--in-header .tcd-author-box__name{ font-weight: 700; margin-bottom: 4px; }
.tcd-author-box--in-header .tcd-author-box__desc p{ margin: 0; line-height: 27px;}
.tcd-author-box__snsrow{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tcd-author-box__sns{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  font-size: 12px;
  text-decoration: none;
}
.tcd-author-box__link--tel{
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
}
.tcd-author-box__links{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; }
.tcd-author-box__link{ padding:6px 10px; border:1px solid rgba(0,0,0,.12); border-radius:999px; text-decoration:none; font-size:12px; }
.tcd-author-box__snsrow{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.tcd-author-box__sns{ padding:6px 10px; border:1px solid rgba(0,0,0,.12); border-radius:999px; text-decoration:none; font-size:12px; }
/* 行動ボタン（TEL / MAIL / LINE） */
.tcd-author-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.tcd-author-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.15);
}
.tcd-author-btn svg{
  width:16px;height:16px;fill:currentColor;
}

/* ===== SNSカラー設定 ===== */

/* ===== TEL / MAIL / LINE ボタンカラー ===== */

.tcd-author-btn{
  transition: all .2s ease;
}

/* TEL */
.tcd-author-btn--tel{
  color:#1e8e3e;
  border-color:#1e8e3e;
}
.tcd-author-btn--tel:hover{
  background:#1e8e3e;
  color:#fff;
}

/* MAIL */
.tcd-author-btn--mail{
  color:#1a73e8;
  border-color:#1a73e8;
}
.tcd-author-btn--mail:hover{
  background:#1a73e8;
  color:#fff;
}
/* SVGアイコンも色を合わせる */
.tcd-author-btn svg{
  fill:currentColor;
}
.p-single-property-profilebox{
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.10);
}
.p-single-property-profilebox .tcd-author-box{
  margin: 0;
}
.p-single-property-profilebox--before-cta{
  margin-top: 24px;
  margin-bottom: 24px;
}
/* プロフィールBOX全体 */
.tcd-author-box{
  display:block;
}

/* 見出し */
.tcd-author-box__title{
  font-size:14px;
  font-weight:700;
  margin-bottom:12px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,0,0,.15);
}

/* 中身はflex */
.tcd-author-box__inner{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
/* TEL/MAIL/LINE と SNS の間隔をあける */
.tcd-author-snsrow,
.c-sns-icons {
  margin-top: 16px;
}
.p-single-property-bottom-cta{
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.p-single-property-cta-action-button{
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
  cursor: pointer;
}
/* =========================
   物件詳細CTA ボタン配色調整
   ========================= */

/* ボタン共通 */
.p-single-property-cta-action-button{
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* hover共通 */
.p-single-property-cta-action-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
}

/* =========================
   LINE（メイン）
   ========================= */
.p-single-property-cta-action-button.c-realty-button{
  background: #06c755;
  color: #fff !important;
}

.p-single-property-cta-action-button.c-realty-button:hover{
  background: #05b24d;
  color: #fff !important;
}

/* =========================
   お問い合わせ（サブ）
   ========================= */
.p-single-property-cta-action-button.c-realty-submit{
  background: #111;
  color: #fff;
}

.p-single-property-cta-action-button.c-realty-submit:hover{
  background: #333;
}

/* =========================
   TEL（補助）
   ========================= */
.p-single-property-cta-action-button[href^="tel:"]{
  background: #f3f3f3;
  color: #111;
  box-shadow: inset 0 0 0 1px #ddd;
}

.p-single-property-cta-action-button[href^="tel:"]:hover{
  background: #e9e9e9;
}

/* =========================
   スマホ最適化
   ========================= */
@media (max-width: 520px){
  .p-single-property-cta-action{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
/* =========================
   TELボタン：文字色を確実に見える色に
   ========================= */
.p-single-property-cta-action-button[href^="tel:"]{
  color: #111 !important;   /* 黒に固定 */
}

/* hover時も黒のまま */
.p-single-property-cta-action-button[href^="tel:"]:hover{
  color: #111 !important;
}
/* プロフィールBOX内のTELが押せない保険 */
.tcd-author-actions .tcd-author-btn{
  pointer-events: auto !important;
  position: relative;
  z-index: 5;
  cursor: pointer;
}
/* ===== LP本文内のLINEボタン ===== */
.lp-line-inline-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  background:#06C755;
  color:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* ブロックで中央寄せしたい時 */
.lp-line-inline-wrap{
  text-align:center;
  margin: 18px 0;
}
/* ===== LP固定CTA（下固定） ===== */
.lp-fixed-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99999;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid #e9e9e9;
  backdrop-filter: blur(6px);
}

.lp-fixed-cta a{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.lp-fixed-cta .lp-cta-line{ background:#06C755; color:#fff; }
.lp-fixed-cta .lp-cta-mail{ background:#111; color:#fff; }

.lp-fixed-cta a:active{ transform: translateY(1px); }

@media (min-width: 1024px){
  .lp-fixed-cta{ display:none; }
}
/* LP全体：テーマ側の本文幅/余白の干渉を受けにくくする */
#rpg-lp.rpg-lp{
  width: 100%;
}

/* LPのコンテナ幅（ここが狭いと“片側だけに見える”） */
#rpg-lp .rpg-lp-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* HERO：2カラム固定（右カード幅を確保） */
#rpg-lp .rpg-lp-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: center;
}

/* 左側：文章がはみ出しやすいのでmin-width:0が重要 */
#rpg-lp .rpg-lp-hero-copy{
  min-width: 0;
}

/* 右側カード：幅100%で安定 */
#rpg-lp .rpg-lp-hero-card{
  width: 100%;
}

/* FVの上下余白（“真ん中に小さく固まる感”を減らす） */
#rpg-lp .rpg-lp-hero{
  padding: 56px 0 28px;
}

/* タブレット以下は縦積み */
@media (max-width: 960px){
  #rpg-lp .rpg-lp-hero{
    padding: 28px 0 16px;
  }
  #rpg-lp .rpg-lp-hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  /* モバイルはカードを上にしたいなら↓をON */
  /* #rpg-lp .rpg-lp-hero-card{ order: -1; } */
}
/* テーマの本文ラッパーが狭い場合にLPだけフル幅化（必要なときだけ） */
.entry-content > #rpg-lp{
  max-width: none;
}
/* =========================
   LP（page-id-375）専用：テーマの本文幅制限を解除
   ========================= */
body.page-id-375 .entry-content{
  max-width: none !important;
  width: 100% !important;
}

/* テーマ側に左右paddingが強い場合の保険（効きすぎたら削ってOK） */
body.page-id-375 .entry-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* LP全体は#rpg-lp内で管理 */
body.page-id-375 #rpg-lp{
  width: 100%;
}

/* LPの内側コンテナ */
body.page-id-375 #rpg-lp .rpg-lp-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* HERO：2カラム */
body.page-id-375 #rpg-lp .rpg-lp-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: center;
}

body.page-id-375 #rpg-lp .rpg-lp-hero-copy{
  min-width: 0; /* これ大事：文章がはみ出して崩れるのを防ぐ */
}

body.page-id-375 #rpg-lp .rpg-lp-hero{
  padding: 56px 0 28px;
}

/* タブレット以下は縦積み */
@media (max-width: 960px){
  body.page-id-375 #rpg-lp .rpg-lp-hero{
    padding: 28px 0 16px;
  }
  body.page-id-375 #rpg-lp .rpg-lp-hero-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
.ss-town-price{
  margin: 18px 0 26px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fafafa;
  border-radius: 12px;
}
.ss-town-price__list{
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.9;
}
.ss-town-price__note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.65);
}
.ss-town-intro-body{
  margin-top: 14px;
  line-height: 1.9;
}

.ss-town-intro-lead p{
  font-weight: 500;
}

.ss-town-intro-sec{
  margin-top: 18px;
}

.ss-town-intro-h{
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
}

.ss-town-intro-note{
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
}
/* ========== Town Intro (ACF) ========== */
.ss-town-intro-card{
  margin-top: 14px;
  padding: 18px 16px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  line-height: 1.95;
}

.ss-town-intro-top{
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0,0,0,.12);
  margin-bottom: 12px;
}

.ss-town-intro-badge{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(22, 163, 74, .10);
  color:#166534;
  margin-bottom:10px;
}

.ss-town-intro-lead{
  margin: 0 0 12px;
  font-weight: 600;
}

.ss-town-intro-points{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.ss-town-intro-points li{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(37, 99, 235, .06);
  border: 1px solid rgba(37, 99, 235, .12);
  font-size: 0.95rem;
}

.ss-town-intro-sec{
  margin-top: 16px;
}

.ss-town-intro-h{
  margin: 0 0 10px;
  padding: 10px 12px;
  border-left: 4px solid rgba(245, 158, 11, .95);
  background: rgba(245, 158, 11, .08);
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 800;
}

.ss-ico{
  margin-right: 6px;
}

.ss-town-intro-tip{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .16);
}

.ss-town-intro-tip-title{
  margin: 0 0 6px;
  font-weight: 800;
  color: #065f46;
}

.ss-town-intro-tip ul{
  margin: 0;
  padding-left: 1.1em;
}

.ss-town-intro-cta{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(168, 85, 247, .07);
  border: 1px solid rgba(168, 85, 247, .16);
}

.ss-town-intro-cta-title{
  margin: 0 0 6px;
  font-weight: 800;
  color: #6b21a8;
}

.ss-town-intro-cta-text{
  margin: 0;
  opacity: .95;
}

.ss-town-intro-foot{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.12);
  font-size: 0.95rem;
  opacity: .95;
}
.ss-town-index__featured{
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(245, 158, 11, .08);
}

.ss-town-index__featuredtext{
  margin: 0;
  line-height: 1.8;
  font-size: .95rem;
  font-weight: 600;
}

.ss-town-index__featuredlink{
  margin-left: 6px;
  font-weight: 800;
  text-decoration: underline;
}/* ===============================
   物件お問い合わせボックス修正
   =============================== */

/* 外枠 */
.property-contact-box,
.contact-data,
.p-property-contact,
#property_contact {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* 左のロゴ */
.property-contact-box img,
.contact-data img {
  width: 90px;
  height: auto;
}

/* 会社情報 */
.property-contact-info {
  flex: 1;
  min-width: 220px;
}

/* TEL MAIL LINE ボタン横並び */
.property-contact-buttons,
.contact-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.property-contact-buttons a,
.contact-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: 600;
  text-decoration: none;
}

/* SNSアイコン横並び */
.property-contact-sns,
.contact-sns {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.property-contact-sns img,
.contact-sns img {
  width: 26px;
  height: 26px;
}

/* モバイル調整 */
@media (max-width: 640px){
  .property-contact-box,
  .contact-data,
  .p-property-contact {
    flex-direction: column;
    align-items: flex-start;
  }

  .property-contact-buttons,
  .contact-buttons {
    width: 100%;
  }
}
/* =========================================
   物件詳細：sectionが100vw化して崩れるのを修正
   対象：.p-single-property-section 以降
   ========================================= */

body.single-contents1 .p-single-property-section{
  max-width: 1200px !important;
  box-sizing: border-box !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin: 15px auto 0 auto !important;
}

/* section内の本文も念のため */
body.single-contents1 .p-single-property-section-content{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* alignfull が section の中で暴れてる場合の保険 */
body.single-contents1 .p-single-property-section .alignfull,
body.single-contents1 .p-single-property-section [data-align="full"]{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}

/* 物件詳細ページ：本文内のGutenbergブロックが全幅(100vw)になるのを抑止 */
.p-single-property-section-content .wp-block-group,
.p-single-property-section-content .wp-block-columns,
.p-single-property-section-content .alignfull,
.p-single-property-section-content [data-align="full"]{
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* カラムの左右余白ズレ対策（テーマによってはここも必要） */
.p-single-property-section-content .wp-block-columns{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.p-single-property-section-content .wp-block-group.alignfull,
.p-single-property-section-content .wp-block-columns.alignfull{
  left: auto !important;
  right: auto !important;
}
/* 物件詳細：本文内でGutenbergブロックが100vw化するのを抑止 */
.p-single-property-section-content .wp-block-group,
.p-single-property-section-content .wp-block-columns{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* テーマ側の "全幅用" マージン計算を殺す（これが原因のことが多い） */
.p-single-property-section-content .alignfull,
.p-single-property-section-content [data-align="full"],
.p-single-property-section-content .wp-block-group.alignfull,
.p-single-property-section-content .wp-block-columns.alignfull{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}

/* columnsのガター（左右のはみ出し）対策 */
.p-single-property-section-content .wp-block-columns{
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 中の画像が原因で広がるケースも潰す */
.p-single-property-section-content img{
  max-width: 100% !important;
  height: auto !important;
}
/* PCではColumnsを横並びに戻す（はみ出しは抑止したまま） */
@media (min-width: 900px){
  .p-single-property-section-content .wp-block-columns{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px; /* 好みで調整OK */
  }

  .p-single-property-section-content .wp-block-columns > .wp-block-column{
    flex: 1 1 0 !important;
    min-width: 0 !important; /* これがないと表や長文で崩れやすい */
  }
}
/* =========================
   物件詳細ページ：ColumnsをPCで横並びに戻す（確実版）
   ※ wrapperクラスに依存しない
   ========================= */

/* 投稿タイプが contents1 の単体ページだけに限定（違うなら bodyクラスを合わせて） */
body.single-contents1 .wp-block-columns{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.single-contents1 .wp-block-columns > .wp-block-column{
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* 「flex-basis:100%」のインラインが付いててもPCでは横並び優先 */
@media (min-width: 900px){
  body.single-contents1 .wp-block-columns > .wp-block-column[style*="flex-basis: 100%"]{
    flex-basis: 0 !important;
  }
}

/* スマホは縦積み */
@media (max-width: 768px){
  body.single-contents1 .wp-block-columns{
    flex-direction: column !important;
    gap: 16px !important;
  }
}
/* ===================================
   物件本文のColumnsをPCで横並びに戻す
   =================================== */

@media (min-width: 900px){

  /* 物件本文内のcolumnsをflex化 */
  body.single-contents1 #js-single-property-content .wp-block-columns{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;
  }

  /* 子カラム幅を均等化 */
  body.single-contents1 #js-single-property-content .wp-block-column{
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  /* エディタが付ける100%幅を無効化（これが縦積みの犯人） */
  body.single-contents1 #js-single-property-content .wp-block-column[style*="flex-basis: 100%"]{
    flex-basis: 0 !important;
  }
}

/* SPでは縦並び維持 */
@media (max-width: 768px){
  body.single-contents1 #js-single-property-content .wp-block-columns{
    flex-direction: column !important;
  }
}
/* =========================================
   物件詳細：下部の物件リストをトップと同じカード並びにする
   （同一賃貸 / 条件の近い物件）
   ========================================= */

/* 物件詳細ページだけ */
body.single-contents1{
  /* まずは“はみ出し”だけ抑止 */
  overflow-x: hidden;
}

/* リストの“親”候補（テーマ差分を吸収するため複数指定） */
body.single-contents1 :is(
  .p-single-bottom-list,
  .p-single-property-bottom-list,
  .p-content-property-list,
  .p-property-list,
  .p-front-property
) :is(
  ul, ol, .list, .items, .inner, .wrap
){
  /* 何も当たらない場合があるので、安全に後段でも当てる */
}

/* 実際に“複数カードが並ぶコンテナ”にグリッドを当てる（強め・でもsingle限定） */
@media (min-width: 900px){
  body.single-contents1 :is(
    .p-single-bottom-list,
    .p-single-property-bottom-list,
    .p-content-property-list,
    .p-property-list,
    .p-front-property
  ) :is(
    ul, ol
  ){
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  body.single-contents1 :is(
    .p-single-bottom-list,
    .p-single-property-bottom-list,
    .p-content-property-list,
    .p-property-list,
    .p-front-property
  ) :is(
    ul, ol
  ) > li{
    margin: 0 !important;
    width: auto !important;
  }
}

/* タブレットは2列 */
@media (min-width: 641px) and (max-width: 899px){
  body.single-contents1 :is(
    .p-single-bottom-list,
    .p-single-property-bottom-list,
    .p-content-property-list,
    .p-property-list,
    .p-front-property
  ) :is(
    ul, ol
  ){
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
}

/* スマホは1列（今と同じ） */
@media (max-width: 640px){
  body.single-contents1 :is(
    .p-single-bottom-list,
    .p-single-property-bottom-list,
    .p-content-property-list,
    .p-property-list,
    .p-front-property
  ) :is(
    ul, ol
  ){
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
}

/* カード内の画像が引き伸ばしで崩れないように */
body.single-contents1 :is(
  .p-single-bottom-list,
  .p-single-property-bottom-list,
  .p-content-property-list,
  .p-property-list,
  .p-front-property
) img{
  max-width: 100% !important;
  height: auto !important;
  display: block;
}
/* =========================================
   物件詳細：下部の物件リストをトップ同様のカードグリッドに
   JSが .ss-related-grid を付与する前提
   ========================================= */

body.single-contents1 .ss-related-grid{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 641px){
  body.single-contents1 .ss-related-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (min-width: 900px){
  body.single-contents1 .ss-related-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
}

/* 子要素が li / article / div どれでも崩れないように */
body.single-contents1 .ss-related-grid > *{
  min-width: 0;
}

/* 画像が横に広がってレイアウトを壊すのを防止 */
body.single-contents1 .ss-related-grid img{
  max-width: 100% !important;
  height: auto !important;
  display: block;
}
/* =========================================
   物件詳細：物件概要テーブルをスマホで見やすく
   1) テーブルを横スクロール化
   2) 文字サイズ/余白を最適化
   ========================================= */

@media (max-width: 768px){

  body.single-contents1 .p-single-property-section table{
    width: 100% !important;
    border-collapse: collapse;
  }

  /* テーブルを包んで横スクロール（wrapperが無い場合でも効く） */
  body.single-contents1 .p-single-property-section table{
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; /* これで縦伸びを防ぐ */
  }

  body.single-contents1 .p-single-property-section th,
  body.single-contents1 .p-single-property-section td{
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    white-space: normal; /* セル内は折り返しOKに戻す */
    vertical-align: top;
  }

  /* 見出し(TH)を読みやすく */
  body.single-contents1 .p-single-property-section th{
    min-width: 120px; /* 項目名が潰れない */
    font-weight: 700;
  }

  /* 値(TD)側は少し広めに */
  body.single-contents1 .p-single-property-section td{
    min-width: 220px;
  }
}
@media (max-width: 768px){
  body.single-contents1 .p-single-property-section th{
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
  }
}
/* =========================================
   物件詳細：概要テーブルをスマホで読みやすく（確実版）
   テーブル自体は触らず、親を横スクロール容器にする
   ========================================= */
@media (max-width: 768px){

  /* テーブルの親（section-content）をスクロール容器に */
  body.single-contents1 .p-single-property-section-content{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* テーブルは“縮ませない”。横に広いままにしてスクロールさせる */
  body.single-contents1 .p-single-property-section-content table{
    min-width: 720px !important;  /* これが効くと縦伸びが劇的に減る */
    width: 720px !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  /* セルの行間と文字サイズを読みやすく */
  body.single-contents1 .p-single-property-section-content th,
  body.single-contents1 .p-single-property-section-content td{
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    vertical-align: top;
  }

  /* 項目名が潰れないように */
  body.single-contents1 .p-single-property-section-content th{
    white-space: nowrap !important;
    width: 140px;
  }
}
@media (max-width: 768px){
  body.single-contents1 .p-single-property-section-content td{
    white-space: nowrap !important;
  }
}
/* PCはそのまま2列（150/1fr/150/1fr） */

/* スマホだけ 1列（150/1fr）に切り替え */
@media (max-width: 768px){
  .c-property-grid-table-row-2col{
    grid-template-columns: 140px 1fr !important;
  }
}
@media (max-width: 768px){
  .c-property-grid-table-row-2col{
    grid-auto-flow: row !important;
  }
}
/* ===============================
   お問い合わせボックス：幅縮み（中央寄せ）を防ぐ
   =============================== */

/* ボックス自体を100%にする（縮まない） */
body.single-contents1 .p-single-property-profilebox,
body.single-contents1 .tcd-author-box,
body.single-contents1 .property-contact-box,
body.single-contents1 .contact-data,
body.single-contents1 .p-property-contact,
body.single-contents1 #property_contact{
  width: 100% !important;
  max-width: 100% !important;
}

/* 中身の整列：左寄せに戻す */
body.single-contents1 .tcd-author-box{
  text-align: left !important;
}

/* 中のレイアウトを崩さず、左から詰める */
body.single-contents1 .tcd-author-box__inner,
body.single-contents1 .property-contact-box,
body.single-contents1 .contact-data,
body.single-contents1 .p-property-contact,
body.single-contents1 #property_contact{
  justify-content: flex-start !important;
}

/* ボタン類の並び（念のため） */
body.single-contents1 .tcd-author-actions,
body.single-contents1 .property-contact-buttons,
body.single-contents1 .contact-buttons{
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start !important;
}

/* SNSアイコンも左寄せ */
body.single-contents1 .tcd-author-snsrow,
body.single-contents1 .c-sns-icons,
body.single-contents1 .property-contact-sns,
body.single-contents1 .contact-sns{
  justify-content: flex-start !important;
}
/* ===============================
   プロフィールBOXだけを整える（本文には影響させない）
   =============================== */

/* プロフィールBOXは幅100%でOK */
body.single-contents1 .p-single-property-profilebox{
  width: 100%;
  max-width: 100%;
  margin: 0 0 30px;
}

/* ここでプロフィールBOX内部だけ調整 */
body.single-contents1 .p-single-property-profilebox .tcd-author-box{
  width: 100%;
  max-width: 100%;
  text-align: left;
}

/* ボタン・SNSの並び（プロフィールBOX内限定） */
body.single-contents1 .p-single-property-profilebox .tcd-author-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

body.single-contents1 .p-single-property-profilebox .tcd-author-snsrow{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
/* ===============================
   本文（editor）を守る：wp-blockはテーマ標準に戻す
   =============================== */
body.single-contents1 .p-single-property-section-content .wp-block-group,
body.single-contents1 .p-single-property-section-content .wp-block-columns{
  width: auto;
  max-width: none;
  margin-left: initial;
  margin-right: initial;
}
/* ===============================
   本文だけGutenbergの標準挙動に戻す
   =============================== */

body.single-contents1 .p-single-property-editor{
  width: 100%;
  max-width: 100%;
}

/* Gutenbergのcolumns復活 */
body.single-contents1 .p-single-property-editor .wp-block-columns{
  display: flex;
  gap: 2rem;
}

body.single-contents1 .p-single-property-editor .wp-block-column{
  flex: 1;
}

/* full幅ブロック暴走防止 */
body.single-contents1 .p-single-property-editor .alignfull{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* ===============================
   物件詳細：プロフィール（お問い合わせ）BOXだけ幅を正常化
   =============================== */

body.single-contents1 .p-single-property-profilebox{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 24px !important;
}

/* ボックス本体 */
body.single-contents1 .p-single-property-profilebox .tcd-author-box{
  width: 100% !important;
  max-width: none !important;
}

/* 中身が中央寄せに引っ張られてる場合の保険 */
body.single-contents1 .p-single-property-profilebox .tcd-author-box__inner{
  width: 100% !important;
  justify-content: flex-start !important;
}

/* もし親がflexで縮める時の決定打 */
body.single-contents1 .p-single-property-profilebox{
  flex: 0 0 100% !important;
  align-self: stretch !important;
}
/* =========================================
   物件詳細：お問い合わせ（プロフィール）だけ横幅を親に合わせる
   ========================================= */

/* プロフィール枠自体は親幅に */
body.single-contents1 .p-single-property-section-content .p-single-property-profilebox{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 24px !important;
}

/* 縮ませている犯人：tcd-author-box（in-header）を全幅に */
body.single-contents1 .p-single-property-profilebox > .tcd-author-box.tcd-author-box--in-header{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;            /* auto中央寄せを殺す */
  text-align: left !important;     /* 中央寄せがあれば解除 */
  box-sizing: border-box !important;
}

/* 内側が fit-content / inline で縮む保険 */
body.single-contents1 .p-single-property-profilebox > .tcd-author-box .tcd-author-box__inner{
  width: 100% !important;
}
/* section-content の中央寄せの影響を無効化 */
body.single-contents1 .p-single-property-section-content{
  align-items: stretch;
}

/* プロフィールだけ全幅に戻す */
body.single-contents1 .p-single-property-profilebox{
  width: 100%;
  align-self: stretch;
}
body.single-contents1 .p-single-property-section-content{
  align-items: stretch !important;
}
body.single-contents1 .p-single-property-profilebox{
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
}
@media (min-width: 901px) {
    .p-single-property-bottom-list .p-property-cards-item {
        grid-template-columns: 1fr;
        border: none;
        padding: 0;
        margin: 0;
    }
}
.p-property-cards-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 30px;
  padding: 25px;
  background: #ffffff;
  border: 1px solid #dddddd;
  margin: -1px;
}
.c-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transform: scale(1);
    transition-property: var(--tcd-thumbnail-transition);
    transition-duration: 0.5s;
    transition-timing-function: ease;
    will-change: transform;
}
@media (min-width: 901px) {
    .p-single-property-bottom-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px 30px;
    }
}
.p-property-cards {
    display: grid;
    margin: 1px;
}
.p-single-property-body{

}
.p-single-property-inner{

}
.ss-chartWrap{
  max-width: 100%;
  overflow: hidden;
}

.ss-chartWrap canvas{
  max-width: 100%;
  height: auto;
  display: block;
}
.ss-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 0 16px;
}

.ss-tab{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  background:#f1f3f5;
  color:#333;
  font-weight:600;
  text-decoration:none;
  transition:.15s;
  border:1px solid transparent;
}

.ss-tab:hover{
  background:#e9ecef;
}

.ss-tab.is-active{
  background:#2b6cb0;
  color:#fff;
  border-color:#2b6cb0;
  box-shadow:0 4px 12px rgba(43,108,176,.25);
}
.ss-tabs .ss-tab{
  display:inline-block !important;
  padding:10px 14px !important;
  border-radius:999px !important;
  background:#f1f3f5 !important;
  color:#333 !important;
  font-weight:600 !important;
  text-decoration:none !important;
  border:1px solid transparent !important;
}

.ss-tabs .ss-tab:hover{
  background:#e9ecef !important;
}

.ss-tabs .ss-tab.is-active{
  background:#2b6cb0 !important;
  color:#fff !important;
  border-color:#2b6cb0 !important;
  box-shadow:0 4px 12px rgba(43,108,176,.25) !important;
}
.ss-tabs{
  display:flex;
  gap:10px;
  margin:16px 0 18px;
}

.ss-tab{
  appearance:none;
  border:none;
  padding:10px 16px;
  border-radius:999px;
  background:#e9ecef;
  color:#333;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}

.ss-tab:hover{
  background:#dde2e6;
}

.ss-tab.is-active{
  background:#2b6cb0;
  color:#fff;
  box-shadow:0 4px 12px rgba(43,108,176,.25);
}
.ss-chartWrap{
  opacity:1;
  transition:opacity .2s ease;
}
.ss-chartWrap.is-ready{
  opacity:1;
}
.ss-sim-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:18px 0;
}

.ss-sim-buttons__item{
  flex:1 1 140px;
  min-width:260px;
}

.ss-sim-buttons__btn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:16px 18px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}

.ss-sim-buttons__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}

.ss-sim-buttons__title{
  font-weight:700;
  line-height:1.35;
  font-size:16px;
}

.ss-sim-buttons__sub{
  font-size:13px;
  opacity:.75;
  line-height:1.4;
}

.ss-sim-buttons__arrow{
  margin-top:6px;
  font-size:13px;
  opacity:.9;
}

@media (max-width:768px){
  .ss-sim-buttons{
    flex-direction:column;
  }
  .ss-sim-buttons__item{
    min-width:0;
  }
}
/* =========================
   さかすむ シミュレータカード
========================= */

.ss-sim-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:20px 0;
}

@media(max-width:768px){
  .ss-sim-cards{
    grid-template-columns:1fr;
  }
}

/* カード本体 */
.ss-sim-card{
  position:relative;
  display:block;
  padding:18px 18px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  transition:.18s ease;
  overflow:hidden;
}

.ss-sim-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}

/* 上ライン */
.ss-sim-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:6px;
  background:#ccc;
}

/* ヘッダー */
.ss-sim-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.ss-sim-card__badge{
  font-size:12px;
  font-weight:700;
  padding:4px 9px;
  border-radius:20px;
  background:#eee;
  color:#333;
  letter-spacing:.04em;
}

.ss-sim-card__chev{
  font-size:18px;
  opacity:.6;
}

/* タイトル */
.ss-sim-card__title{
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  margin-bottom:6px;
  color:#222;
}

/* サブ */
.ss-sim-card__sub{
  font-size:13px;
  line-height:1.5;
  color:#666;
  margin-bottom:14px;
}

/* CTAボタン */
.ss-sim-card__cta{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  padding:8px 12px;
  border-radius:8px;
  background:#f4f4f4;
  transition:.15s;
}

.ss-sim-card:hover .ss-sim-card__cta{
  transform:translateX(3px);
}

/* =========================
   色分け
========================= */

/* 判断（緑） */
.ss-sim-card.is-judge::before{ background:#22c55e; }
.ss-sim-card.is-judge .ss-sim-card__badge{ background:#dcfce7;color:#15803d; }
.ss-sim-card.is-judge .ss-sim-card__cta{ background:#22c55e;color:#fff; }

/* 売却（赤） */
.ss-sim-card.is-sell::before{ background:#ef4444; }
.ss-sim-card.is-sell .ss-sim-card__badge{ background:#fee2e2;color:#b91c1c; }
.ss-sim-card.is-sell .ss-sim-card__cta{ background:#ef4444;color:#fff; }

/* ローン（青） */
.ss-sim-card.is-loan::before{ background:#3b82f6; }
.ss-sim-card.is-loan .ss-sim-card__badge{ background:#dbeafe;color:#1d4ed8; }
.ss-sim-card.is-loan .ss-sim-card__cta{ background:#3b82f6;color:#fff; }

.ss-nearby { margin: 24px 0; }
.ss-nearby__title { font-size: 18px; margin: 0 0 12px; }
.ss-nearby__block { margin: 16px 0; padding: 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; }
.ss-nearby__cat { margin: 0 0 10px; font-size: 15px; }
.ss-nearby__table { width: 100%; border-collapse: collapse; }
.ss-nearby__table td { padding: 8px 6px; border-top: 1px solid rgba(0,0,0,.06); vertical-align: top; }
.ss-nearby__table tr:first-child td { border-top: none; }
.ss-nearby__name { width: 64%; }
.ss-nearby__dist, .ss-nearby__walk { white-space: nowrap; width: 18%; text-align: right; }
.ss-nearby__more { margin-top: 10px; }
.ss-nearby__morebtn { cursor: pointer; font-weight: 600; }
.ss-nearby__note { margin-top: 10px; font-size: 12px; opacity: .8; }
.ss-nearby-more { margin: 8px 0 24px; }
.ss-nearby-more > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.ss-nearby-more__wrap { margin-top: 10px; }
/* ===== さかすむ：周辺生活施設（002の見た目に統一） ===== */
.ss-nearby.ss-nearby--static {
  margin: 24px 0;
}

.ss-nearby.ss-nearby--static h3 {
  margin: 18px 0 10px;
  padding-left: 12px;
  border-left: 4px solid #111;
  font-size: 18px;
  line-height: 1.4;
}

.ss-nearby.ss-nearby--static table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
}

.ss-nearby.ss-nearby--static th,
.ss-nearby.ss-nearby--static td {
  border: 1px solid rgba(0,0,0,.12);
  padding: 10px 12px;
  vertical-align: top;
  font-size: 14px;
}

.ss-nearby.ss-nearby--static thead th {
  background: rgba(0,0,0,.04);
  font-weight: 700;
  white-space: nowrap;
}

.ss-nearby.ss-nearby--static tbody tr:nth-child(even) td {
  background: rgba(0,0,0,.02);
}

.ss-nearby.ss-nearby--static .ss-nearby-more {
  margin: -8px 0 18px;
}

.ss-nearby.ss-nearby--static .ss-nearby-more > summary {
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  border-radius: 6px;
  list-style: none;
}

.ss-nearby.ss-nearby--static .ss-nearby-more[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ss-nearby.ss-nearby--static .ss-nearby-more__wrap {
  border: 1px solid rgba(0,0,0,.12);
  border-top: 0;
  padding: 10px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.ss-nearby.ss-nearby--static .ss-nearby-more__wrap table {
  margin: 0;
}
/* ===== 周辺生活施設：sakai-nishi-002 風に統一 ===== */

/* セクション全体 */
.ss-nearby.ss-nearby--static{
  margin: 18px 0 28px;
}

/* h3（🏫/🛒の見出し） */
.ss-nearby.ss-nearby--static h3{
  margin: 18px 0 10px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}

/* テーブル外枠 */
.ss-nearby.ss-nearby--static table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 18px;
  background: #fff;
}

/* 見出し行 */
.ss-nearby.ss-nearby--static thead th{
  background: #f5f5f5;
  font-weight: 700;
}

/* セル */
.ss-nearby.ss-nearby--static th,
.ss-nearby.ss-nearby--static td{
  border: 1px solid #e5e5e5;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

/* 行の交互色（002っぽい“薄い”感じ） */
.ss-nearby.ss-nearby--static tbody tr:nth-child(even) td{
  background: #fafafa;
}

/* 列幅を安定させる（002の見た目に近づける） */
.ss-nearby.ss-nearby--static th:nth-child(1),
.ss-nearby.ss-nearby--static td:nth-child(1){ width: 22%; }
.ss-nearby.ss-nearby--static th:nth-child(2),
.ss-nearby.ss-nearby--static td:nth-child(2){ width: 40%; }
.ss-nearby.ss-nearby--static th:nth-child(3),
.ss-nearby.ss-nearby--static td:nth-child(3){ width: 18%; white-space: nowrap; }
.ss-nearby.ss-nearby--static th:nth-child(4),
.ss-nearby.ss-nearby--static td:nth-child(4){ width: 20%; white-space: nowrap; }

/* “さらに見る” の見た目も002寄せ */
.ss-nearby.ss-nearby--static details.ss-nearby-more{
  margin: -8px 0 18px;
}

.ss-nearby.ss-nearby--static details.ss-nearby-more > summary{
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  background: #f7f7f7;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.ss-nearby.ss-nearby--static details.ss-nearby-more[open] > summary{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ss-nearby.ss-nearby--static .ss-nearby-more__wrap{
  border: 1px solid #e5e5e5;
  border-top: 0;
  padding: 10px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.p-single-property-section-content .l-inner{
	inline-size: 100% !important;
}
@container main (max-width: 750px) {
	.p-single-property-section-content .c-property-grid-table-row-d{
	    padding: calc(18px + var(--tcd-half-read)) 2px !important;
	}
}
/* =========================
   さかすむ：物件記事（読み物メディア風）
   対象：.ss-property 配下のみ
   ========================= */

.ss-property{
  margin: 0 auto;
  line-height: 1.85;
  font-size: 16px;
  letter-spacing: .02em;
}

/* 見出し */
.ss-property .ss-lead{
  margin: 0 0 10px;
  padding: 14px 14px;
  border-left: 6px solid currentColor;
  background: rgba(0,0,0,.04);
  font-size: 20px;
  line-height: 1.4;
}

.ss-property .ss-section{
  margin: 26px 0 10px;
  font-size: 18px;
  line-height: 1.4;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(0,0,0,.12);
}

/* 段落 */
.ss-property p{
  margin: 0 0 14px;
}

/* 写真ブロック */
.ss-property .ss-photo{
  margin: 14px 0 16px;
  padding: 0;
}

.ss-property .ss-photo img{
  display: block;
  width: 60%;
  margin: 0 auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.ss-property .ss-photo figcaption{
  margin-top: 8px;
  font-size: 13px;
  opacity: .75;
  line-height: 1.6;
  text-align: center;
}

/* 箇条書き（欠点・向き不向き） */
.ss-property ul{
  margin: 10px 0 16px;
  padding-left: 1.2em;
}

.ss-property li{
  margin: 6px 0;
}

/* 欠点：少し目立たせる */
.ss-property .ss-point{
  padding: 12px 14px;
}

/* 向いてる／向かない：カード風 */
.ss-property .ss-fit,
.ss-property .ss-unfit{
  padding: 12px 14px;

}

/* 文章の区切りを強くして読みやすく */
.ss-property .ss-section + .ss-photo{
  margin-top: 12px;
}

/* スマホ最適化 */
@media (max-width: 640px){
  .ss-property{
    font-size: 15px;
  }
  .ss-property .ss-lead{
    font-size: 18px;
    padding: 12px 12px;
  }
  .ss-property .ss-section{
    font-size: 17px;
  }
  .ss-property .ss-photo img{
    border-radius: 12px;
    width: 100%;
  }
}

/* 任意：本文内リンクを読み物っぽく */
.ss-property a{
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* --- 物件スペックの小カード（読み物を邪魔しない） --- */
.ss-property .ss-spec{
  margin: 14px 0 18px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.ss-property .ss-spec__title{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.4;
  opacity: .9;
}

.ss-property .ss-spec__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ss-property .ss-spec__item{
  margin: 0;
  border: 1px solid #707070;
  padding: 5px !important;
  background-color: #fff;
  border-radius: 8px;
}

.ss-property .ss-spec__label{
  display: block;
  font-size: 12px;
  opacity: .7;
  line-height: 1.3;
  margin-bottom: 2px;
}

.ss-property .ss-spec__value{
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* スマホで詰まりすぎないように */
@media (max-width: 420px){
  .ss-property .ss-spec__grid{
    grid-template-columns: 1fr;
  }
}
/* ===== LINE CTA ===== */

.ss-cta{
  margin: 42px 0 20px;
  padding: 22px 18px 20px;
  text-align: center;
  border-radius: 18px;
  background: rgba(0,0,0,.035);
}

.ss-cta__lead{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.ss-cta__text{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  opacity: .85;
}

.ss-line-btn{
  display: inline-block;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  background: #06C755;
  color: #fff !important;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

.ss-line-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.ss-cta__note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .6;
}

/* スマホ */
@media (max-width:640px){
  .ss-cta{
    margin-top: 32px;
    padding: 18px 14px;
  }
  .ss-line-btn{
    width: 100%;
    padding: 15px 0;
  }
}
/* 撮影メモ */
.comment_box{
  border:1px solid #e6e6e6;
  border-radius:14px;
  padding:12px 14px;
  margin:-10px 0 22px; 
  background:#fff;
}
.comment_title{
  margin:0 0 6px;
  font-weight:700;
  font-size:0.95em;
}
.comment_text{
  margin:0;
  line-height:1.9;
  opacity:.95;
}
.link_card {
  margin: 20px 0;
}

.link_card a {
  display: block;
  text-decoration: none;
}

.link_card_inner {
  border: 1px solid #e5e5e5;
  padding: 18px;
  border-radius: 6px;
  background: #fafafa;
  transition: 0.3s ease;
}

.link_card_inner:hover {
  background: #f0f4f8;
  border-color: #d0d7de;
}

.link_card_title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 6px;
  color: #222;
}

.link_card_desc {
  font-size: 14px;
  color: #555;
}
/* ==========
  sakasumu: article UI (simple & clean)
  対象：クラシックエディタ本文内
========== */

:root{
  --ss-accent: #2d6cdf;      /* アクセント（青系） */
  --ss-accent-2: #f3b34a;    /* サブアクセント（やわらかい黄） */
  --ss-text: #1f2937;
  --ss-muted: #6b7280;
  --ss-line: #e5e7eb;
  --ss-bg: #f8fafc;
}

/* 本文のリズム */
.entry-content p{
  line-height: 1.95;
  color: var(--ss-text);
  margin: 0 0 1.05em;
}

/* ===== 見出し ===== */
.custom_h2{
  position: relative;
  margin: 2.2em 0 1em;
  padding: 0.9em 1em 0.9em 1.2em;
  border: 1px solid var(--ss-line);
  border-left: 6px solid var(--ss-accent);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, var(--ss-bg));
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.04);
  letter-spacing: 0.02em;
}

.custom_h2::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.custom_h3{
  margin: 1.6em 0 0.8em;
  padding: 0.35em 0 0.35em 0.8em;
  border-left: 4px solid var(--ss-accent-2);
  font-weight: 700;
  color: var(--ss-text);
}

/* ===== 強調/マーカー ===== */
.entry-content strong{
  font-weight: 800;
}

.entry-content mark{
  background: linear-gradient(transparent 55%, rgba(243, 179, 74, 0.45) 55%);
  padding: 0 0.12em;
  border-radius: 4px;
}

/* ===== 画像（figure） ===== */
.entry-content figure{
  margin: 1.4em 0 1.8em;
  padding: 12px;
  border: 1px solid var(--ss-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.05);
}

.entry-content figure img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.entry-content figcaption{
  margin-top: 10px;
  font-size: 0.92em;
  color: var(--ss-muted);
  line-height: 1.6;
}

/* ===== テーブル（見やすく） ===== */
.entry-content table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.2em 0 1.6em;
  border: 1px solid var(--ss-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.entry-content th,
.entry-content td{
  padding: 0.85em 0.95em;
  border-bottom: 1px solid var(--ss-line);
  vertical-align: top;
  line-height: 1.65;
}

.entry-content th{
  background: var(--ss-bg);
  font-weight: 800;
  color: var(--ss-text);
}

.entry-content tr:last-child th,
.entry-content tr:last-child td{
  border-bottom: none;
}

/* スマホで横スクロールになりにくくする */
@media (max-width: 640px){
  .entry-content table{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== チェックリストUI（ul に class を付けるだけ） ===== */
.ss-checklist{
  list-style: none;
  padding: 14px 14px 14px 16px;
  margin: 1.1em 0 1.6em;
  border: 1px solid var(--ss-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, var(--ss-bg));
}

.ss-checklist li{
  position: relative;
  padding: 0.55em 0.6em 0.55em 2.1em;
  margin: 0;
  border-bottom: 1px dashed rgba(107, 114, 128, 0.25);
}

.ss-checklist li:last-child{
  border-bottom: none;
}

.ss-checklist li::before{
  content: "✓";
  position: absolute;
  left: 0.7em;
  top: 0.62em;
  width: 1.25em;
  height: 1.25em;
  border-radius: 999px;
  background: rgba(45, 108, 223, 0.12);
  color: var(--ss-accent);
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== 注意ボックス（div classで使う） ===== */
.ss-alert{
  margin: 1.1em 0 1.6em;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(243, 179, 74, 0.55);
  background: rgba(243, 179, 74, 0.12);
  color: var(--ss-text);
}

.ss-alert strong{
  color: #7a4a00;
}

.ss-alert::before{
  content: "⚠";
  margin-right: 0.35em;
}

/* ===== ひとことまとめ（軽いメモ） ===== */
.ss-note{
  margin: 1.1em 0 1.6em;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(45, 108, 223, 0.35);
  background: rgba(45, 108, 223, 0.08);
}

.ss-note strong{
  color: var(--ss-accent);
}

.school_property_box{
display:flex;
gap:20px;
margin:20px 0;
}

.school_property_item{
flex:1;
background:#f7f7f7;
border-radius:10px;
padding:15px;
text-align:center;
}

.property_label{
display:block;
font-size:13px;
color:#666;
}

.property_count{
font-size:22px;
font-weight:bold;
}

.lead_box{
  background:#f7f7f7;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:16px;
  line-height:1.8;
}
.point_list{ margin:10px 0 0; padding-left:18px; }
.note{ font-size:0.95em; opacity:.9; }
.small{ font-size:0.92em; opacity:.9; }

.marker_yellow{
  background:linear-gradient(transparent 60%, #fff2a8 60%);
  font-weight:600;
  padding:0 .1em;
}
.marker_blue{
  background:linear-gradient(transparent 60%, #bfe9ff 60%);
  padding:0 .1em;
}

.image_box{
  margin:12px 0 22px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #ededed;
}
.image_box img{ display:block; width:100%; height:auto; }

.table_wrap{ overflow:auto; margin:10px 0 18px; }
table.sakai_table{
  width:100%;
  border-collapse:collapse;
  min-width:520px;
}
table.sakai_table th,
table.sakai_table td{
  border:1px solid #e6e6e6;
  padding:10px;
  vertical-align:top;
}
table.sakai_table th{
  background:#fafafa;
  text-align:left;
  white-space:nowrap;
}

.badge{
  display:inline-block;
  border:1px solid #e6e6e6;
  border-radius:999px;
  padding:4px 10px;
  font-size:.9em;
  background:#fff;
}

.graph{ margin:10px 0 18px; }
.graph_item{ display:flex; align-items:center; gap:10px; margin:10px 0; }
.graph_label{ width:88px; font-weight:600; }
.graph_bar_wrap{
  flex:1;
  background:#f2f2f2;
  border-radius:999px;
  overflow:hidden;
  height:14px;
}
.graph_bar{ height:14px; background:#cfcfcf; }
.graph_value{ width:86px; text-align:right; font-variant-numeric:tabular-nums; }

.faq dl{
  border:1px solid #e6e6e6;
  border-radius:12px;
  overflow:hidden;
}
.faq dt{
  background:#fafafa;
  padding:12px 14px;
  font-weight:700;
  border-top:1px solid #e6e6e6;
}
.faq dt:first-child{ border-top:none; }
.faq dd{
  margin:0;
  padding:12px 14px;
  line-height:1.9;
}

.cta_box{
  border:1px solid #e6e6e6;
  border-radius:16px;
  padding:18px;
  background:#fff;
}
.cta_btns{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.cta_btn{
  display:inline-block;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #e6e6e6;
  text-decoration:none;
}
.cta_btn.primary{
  background:#111;
  color:#fff;
  border-color:#111;
}
p.check{
  border:1px solid #e9c46a;
  background:#fff7e6;
  padding:12px;
  border-radius:12px;
}
.top-sim-card-section{
  max-width:1100px;
  margin:0 auto;
  padding:60px 20px;
}

.top-sim-card-title{
  margin:0 0 12px;
  text-align:center;
  font-size:34px;
  line-height:1.4;
}

.top-sim-card-desc{
  margin:0 0 36px;
  text-align:center;
  color:#666;
  line-height:1.8;
}

.top-sim-card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
}

.top-sim-card-item{
  background:#fff;
  border:1px solid #e9e9e9;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
  padding:28px 36px;
  min-height:240px;
}

.top-sim-card-heading{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 10px;
  font-size:20px;
  line-height:1.6;
  color:#222;
}

.top-sim-card-icon{
  width:36px;
  height:36px;
  flex-shrink:0;
  object-fit:contain;
}

.top-sim-card-text{
  margin:0 0 20px;
  font-size:14px;
  line-height:1.8;
  color:#666;
}

.top-sim-card-btn{
  display:inline-block;
  padding:0 18px 10px 18px;
  border-radius:999px;
  background:#111;
  color:#fff !important;
  text-decoration:none !important;
  font-size:13px;
  font-weight:700;
  line-height:1;
}

.top-sim-card-btn:hover{
  opacity:0.9;
}

@media (max-width:768px){
  .top-sim-card-grid{
    grid-template-columns:1fr;
  }

  .top-sim-card-title{
    font-size:26px;
  }

  .top-sim-card-item{
    min-height:auto;
    padding:24px;
  }

  .top-sim-card-heading{
    font-size:18px;
  }
}
.school-price-box{
  margin: 24px 0 40px;
}

.school-price-table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
  font-size: 15px;
}

.school-price-table thead th{
  background: #f7f7f7;
  font-weight: 700;
  color: #333;
  padding: 14px 16px;
  border-bottom: 1px solid #e8e8e8;
  text-align: left;
}

.school-price-table tbody td{
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.school-price-table tbody tr:last-child td{
  border-bottom: none;
}

.school-price-type{
  font-weight: 700;
  white-space: nowrap;
}

.school-price-value{
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}

.school-price-note{
  color: #666;
  font-size: 13px;
  line-height: 1.7;
  margin-top: 10px;
}

.school-price-bar{
  width: 100%;
  max-width: 220px;
  height: 10px;
  background: #ececec;
  border-radius: 999px;
  overflow: hidden;
}

.school-price-bar span{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #d8aa00 0%, #f0c94d 100%);
  border-radius: 999px;
}

.school-price-sub{
  display: inline-block;
  font-size: 12px;
  color: #666;
  margin-left: 8px;
}

@media (max-width: 767px){
  .school-price-table{
    font-size: 14px;
  }

  .school-price-table thead th,
  .school-price-table tbody td{
    padding: 12px 10px;
  }

  .school-price-bar{
    max-width: 120px;
    height: 8px;
  }

  .school-price-sub{
    display: block;
    margin: 4px 0 0;
  }
}
.price-rent td:first-child{
background:#fff8e1;
font-weight:600;
}

.price-buy td:first-child{
background:#e8f1ff;
font-weight:600;
}
.town-link-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:18px 0 28px;
}

.town-link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  background:#fff;
  border:1px solid #d8d8d8;
  border-radius:999px;
  text-decoration:none;
  color:#222;
  font-weight:700;
  line-height:1.4;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
  transition:all .25s ease;
}

.town-link-button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,0.10);
  border-color:#bcbcbc;
}

.town-link-button-all{
  background:#111;
  color:#fff;
  border-color:#111;
}

.town-link-button-all:hover{
  opacity:0.92;
}

/* =========================================
   sakai-nishi-008 など物件ページのスマホ横スワイプ修正
   section全体ではなく、テーブルだけ横スクロールさせる
   ========================================= */
@media (max-width: 768px){

  /* ページ全体の横スワイプを止める */
  html, body{
    overflow-x: hidden;
  }

  /* 本文エリア自体は横スクロールさせない */
  body.single-contents1 .p-single-property-section-content{
    overflow-x: visible !important;
  }

  /* テーブルは親幅に収める */
  body.single-contents1 .p-single-property-section-content table{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /* セル内は折り返す */
  body.single-contents1 .p-single-property-section-content th,
  body.single-contents1 .p-single-property-section-content td{
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* 周辺施設テーブルも列幅固定を弱める */
  .ss-nearby.ss-nearby--static table{
    table-layout: auto !important;
  }

  .ss-nearby.ss-nearby--static th:nth-child(1),
  .ss-nearby.ss-nearby--static td:nth-child(1),
  .ss-nearby.ss-nearby--static th:nth-child(2),
  .ss-nearby.ss-nearby--static td:nth-child(2),
  .ss-nearby.ss-nearby--static th:nth-child(3),
  .ss-nearby.ss-nearby--static td:nth-child(3),
  .ss-nearby.ss-nearby--static th:nth-child(4),
  .ss-nearby.ss-nearby--static td:nth-child(4){
    width: auto !important;
    white-space: normal !important;
  }

  /* もしテーマ側の2カラム物件テーブルが原因ならこれも保険 */
  .c-property-grid-table-row-2col{
    min-width: 0 !important;
  }
}

.school-stock-table td:nth-child(2),
.school-stock-table td:nth-child(3){
  white-space: nowrap;
  font-weight: 700;
}

.school-stock-table td:nth-child(4){
  min-width: 220px;
}

@media (max-width: 767px){
  .school-stock-table{
    min-width: 720px;
  }
}
/* ==========================================================
   まとめ記事専用：校区カード
   ========================================================== */

.school_area_links_summary{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  margin:32px 0;
}

.school_area_links_summary .school_area_card{
  margin:0;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  transition:transform .25s ease, box-shadow .25s ease;
}

.school_area_links_summary .school_area_card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,0.10);
}

.school_area_links_summary .school_area_card a{
  display:flex;
  align-items:stretch;
  gap:14px;
  height:100%;
  color:inherit;
  text-decoration:none;
}

.school_area_links_summary .school_area_card_img{
  width:160px;
  min-width:160px;
  margin:0;
  overflow:hidden;
}

.school_area_links_summary .school_area_card_img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.school_area_links_summary .school_area_card_body{
  padding:16px 16px 16px 0;
}

.school_area_links_summary .school_area_card_title{
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  margin:0 0 8px;
}

.school_area_links_summary .school_area_card_desc{
  font-size:13px;
  line-height:1.8;
  color:#666;
  margin:0;
}

@media (max-width: 767px){
  .school_area_links_summary{
    grid-template-columns:1fr;
    gap:16px;
  }

  .school_area_links_summary .school_area_card a{
    gap:12px;
  }

  .school_area_links_summary .school_area_card_img{
    width:120px;
    min-width:120px;
  }

  .school_area_links_summary .school_area_card_body{
    padding:12px 12px 12px 0;
  }

  .school_area_links_summary .school_area_card_title{
    font-size:15px;
  }

  .school_area_links_summary .school_area_card_desc{
    font-size:12px;
    line-height:1.7;
  }
}
.school_area_card_summary{
  border: 2px solid #f0c96a;
}

.school_area_card_summary .school_area_card_title{
  color: #b8860b;
}
.reference_box{
  border:1px solid #e5e5e5;
  border-radius:12px;
  padding:20px;
  margin:24px 0;
  background:#fafafa;
}

.reference_title{
  font-weight:700;
  margin-bottom:8px;
  font-size:16px;
}

.reference_text{
  font-size:14px;
  line-height:1.7;
  margin-bottom:12px;
  color:#555;
}

.reference_btn{
  display:inline-block;
  background:#b33a16;
  color:#fff;
  padding:5px 16px;
  border-radius:6px;
  text-decoration:none;
  font-size:14px;
}

.reference_btn:hover{
  opacity:0.8;
}
.ss-school-nav{
  margin: 40px 0;
}

.ss-school-nav-head{
  margin-bottom: 18px;
}

.ss-school-nav-title{
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.5;
}

.ss-school-nav-desc{
  margin: 0;
  color: #666;
  line-height: 1.8;
}

.ss-school-nav-featured{
  display: block;
  margin: 0 0 18px;
  padding: 20px;
  border-radius: 16px;
  background:linear-gradient(135deg, #141414 0%, #9f9f9f 100%);
  color: #fff;
  text-decoration: none;
}

.ss-school-nav-featured:hover{
  opacity: 0.92;
}

.ss-school-nav-featured-label{
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #ffd966;
}

.ss-school-nav-featured h3{
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.5;
  color: #fff;
}

.ss-school-nav-featured p{
  margin: 0 0 12px;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
}

.ss-school-nav-featured span{
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.ss-school-nav-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ss-school-nav-card{
  display: block;
  padding: 16px 14px;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.ss-school-nav-card:hover{
  transform: translateY(-2px);
  transition: .2s ease;
}

.ss-school-nav-card strong{
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: #111;
}

.ss-school-nav-card span{
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: #666;
}

@media (max-width: 767px){
  .ss-school-nav{
    margin: 32px 0;
  }

  .ss-school-nav-title{
    font-size: 20px;
  }

  .ss-school-nav-featured{
    padding: 18px 16px;
    border-radius: 14px;
  }

  .ss-school-nav-featured h3{
    font-size: 18px;
  }

  .ss-school-nav-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ss-school-nav-card{
    padding: 14px 12px;
  }
}
.ss-sim-nav{
  margin:40px 0;
  padding:24px 16px;
  background:#f8fbff;
  border:1px solid #dce9f5;
  border-radius:16px;
}

.ss-sim-nav-head{
  margin-bottom:18px;
}

.ss-sim-nav-label{
  margin:0 0 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  color:#6a7f92;
}

.ss-sim-nav-title{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.6;
  font-weight:700;
  color:#1f2d3d;
}

.ss-sim-nav-desc{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:#51606f;
}

.ss-sim-nav-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.ss-sim-nav-card{
  display:block;
  padding:18px 16px;
  background:#fff;
  border:1px solid #e3edf6;
  border-radius:14px;
  text-decoration:none;
  transition:0.2s ease;
  box-shadow:0 4px 12px rgba(0,0,0,0.03);
}

.ss-sim-nav-card:hover{
  transform:translateY(-2px);
  border-color:#c9dceb;
  background:#fcfeff;
}

.ss-sim-nav-card-tag{
  display:inline-block;
  margin-bottom:10px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  color:#2f6fa5;
  background:#e8f3ff;
  border-radius:999px;
}

.ss-sim-nav-card strong{
  display:block;
  margin-bottom:8px;
  font-size:17px;
  line-height:1.6;
  color:#233445;
}

.ss-sim-nav-card p{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.8;
  color:#5a6977;
}

.ss-sim-nav-card-link{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  color:#2f6fa5;
}

.ss-sim-nav-footer{
  margin-top:14px;
}

.ss-sim-nav-note{
  margin:0 0 8px;
  font-size:12px;
  line-height:1.8;
  color:#6f7f8d;
}

.ss-sim-nav-more{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  color:#2f6fa5;
  text-decoration:none;
}

.ss-sim-nav-more:hover{
  text-decoration:underline;
}

@media (min-width: 768px){
  .ss-sim-nav{
    padding:28px 24px;
  }

  .ss-sim-nav-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .ss-sim-nav-title{
    font-size:24px;
  }
}
.lp-flow-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin:20px 0;
}

.lp-flow-box{
  padding:16px;
  border:1px solid #e8e8e8;
  border-radius:10px;
  background:#fff;
}

.lp-flow-box h3{
  margin-bottom:10px;
  font-size:16px;
}

@media (min-width:768px){
  .lp-flow-grid{
    grid-template-columns:1fr 1fr;
  }
}
.related-box{
  border:1px solid #e5e5e5;
  border-radius:12px;
  padding:20px;
  margin:24px 0;
  background:#fafafa;
}

.related-title{
  font-weight:700;
  margin-bottom:8px;
}

.related-text{
  font-size:14px;
  line-height:1.8;
  margin-bottom:12px;
  color:#555;
}

.related-btn{
  display:inline-block;
  padding:10px 16px;
  background:#111;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;
}

.ss-area-card-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-top:20px;
}

.ss-area-card{
  display:block;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:#333;
  transition:0.2s;
}

.ss-area-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.ss-area-card img{
  width:100%;
  height:110px;
  object-fit:cover;
  object-position:center center;
}

.ss-area-card-body{
  padding:10px 12px;
}

.ss-area-card-body h3{
  margin:0 0 4px;
  font-size:15px;
}

.ss-area-card-body p{
  margin:0;
  font-size:12px;
  color:#666;
}

@media screen and (min-width: 768px){
  .ss-area-card img{
    height:140px;
    object-position:center top;
  }
}