/* ================================
   SmartCare styles.css  clean版
   ================================ */

/* ── Base / Tokens ───────────────── */
:root{
  --glass: rgba(255,255,255,.10);
  --glass-border: rgba(255,255,255,.18);
  --text: #fff;
  --muted: rgba(255,255,255,.88);
  --ink: #0b1b2b;
  --primary: #1a73e8;
  --radius: 24px;
  --shadow: 0 16px 40px rgba(0,0,0,.35);
  --max: 980px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  -webkit-font-smoothing:antialiased;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,Arial,sans-serif;
  color:var(--text);
  background:
    linear-gradient(to bottom, rgba(0,10,20,.55), rgba(0,10,20,.10)),
    url("/images/bg.jpg") center/cover fixed no-repeat;
  background-color:#020713;
  padding-top: calc(64px + env(safe-area-inset-top));
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

/* ===============================
   Header / Nav
   =============================== */

.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  justify-content:center;
  align-items:center;
  backdrop-filter:saturate(160%) blur(8px);
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.05));
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}

.header-inner{
  max-width:var(--max);
  width:100%;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
}

.logo{
  font-weight:800;
  font-size:20px;
  letter-spacing:.2px;
  margin-right:auto;
}

.nav{
  display:flex;
  gap:24px;
  margin-left:auto;
}
.nav a,
.header nav a{
  color:#eef5ff;
  text-decoration:none;
  font-weight:600;
  font-size:14px;   /* 18px → 14px に変更 */
  white-space:nowrap;
}



.nav a:hover,
.header nav a[aria-current="page"]{
  color:#fff;
  text-decoration:underline;
}

/* small screens */
@media (max-width:640px){
  .header{
    padding:8px 6px;
  }
  .header-inner{
    padding:0 2px;
  }
  .logo{
    font-size:18px;     /* ロゴも少し小さくして幅を節約 */
  }
  .nav{
    gap:10px;           /* メニューのすき間を詰める */
  }
  .nav a{
    font-size:12px;     /* さらに一段小さく */
  }
}


/* ===============================
   Hero area（トップページ）
   =============================== */

.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:0px 16px 40px;  /* 24px → 10px にして、見出しをヘッダー直下へ寄せる */
}


.hero-title{
  margin:4px 0 8px;
  font-weight:900;
  letter-spacing:.2px;
  font-size: clamp(30px, 7vw, 56px);
  line-height:1.12;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

.hero-sub{
  color:var(--muted);
  font-size:16px;
  margin:0 0 24px;
}

/* 2行目を少し右にずらす */
.hero-title-sub{
  display:inline-block;
  padding-left:1.6em;
}
/* ===============================
   Glass Plan Card（トップページ用）
   =============================== */

/* 2枚を縦に並べるラッパー */
.plan-list{
  max-width:min(720px, 100% - 32px);
  margin:80px auto 0;   /* 24px → 80px：ガラス枠ほぼ1個ぶん下げるイメージ */
  display:flex;
  flex-direction:column;
  gap:14px;
}


/* カード本体：横長・縦スリム・2枚とも共通 */
.plan-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 20px;
  border-radius:24px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* 左側テキストブロック */
.plan-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;  /* 左寄せ */
}

.plan-name{
  margin:0 0 4px;
  font-size:24px;
  font-weight:800;
}

.plan-price{
  margin:0;
  font-size:18px;
  font-weight:700;
}

/* ボタンは右側・3行目扱い */
.plan-card .btn-primary{
  position:static;
  padding:10px 22px;
  border-radius:999px;
  white-space:nowrap;
  font-size:14px;
}

/* モバイル調整 */
@media (max-width:480px){

  .plan-card{
    padding:12px 14px;
    gap:10px;
  }
  .plan-name{
    font-size:22px;
  }
  .plan-price{
    font-size:16px;
  }
  .plan-card .btn-primary{
    font-size:13px;
    padding:9px 18px;
  }
}
/* ▼ 共通ボタンスタイル（青い丸ボタン） */
.btn,
.btn-primary{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  padding:12px 26px;
  border-radius:999px;
  font-weight:700;
  border:0;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(26,115,232,.35);
}
.btn:hover,
.btn-primary:hover{
  filter:brightness(1.05);
}



/* ===============================
   Footer
   =============================== */

.footer{
  text-align:center;
  color:#dfe7ef;
  padding:26px 24px;
  padding-left:16px;
  padding-right:16px;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}

.footer a{
  color:#dfe7ef;
  text-decoration:none;
  margin:0 6px;
}
.footer a:hover{ text-decoration:underline; }

.footer-copy{ opacity:.95; }

.footer-links{
  max-width:960px;
  margin:0 auto;
  line-height:1.7;
  text-align:center;
  word-break:keep-all;
}
.footer,
.footer a,
.footer-copy{
  font-size:15px;
}

/* safe area 左右 */
@supports(padding: max(0px)){
  .footer{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
}

/* ===============================
   Top page 専用デザイン
   =============================== */

body.top-page{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.32),
      rgba(0,10,20,.10)
    ),
    url("/images/bg.jpg") center/cover fixed no-repeat !important;
  color:#ffffff;
}
/* ヒーロー（見出し）をヘッダーのすぐ下に寄せる */
body.top-page .hero{
  padding-top: 0px;   /* ← ここで上との余白を小さく */
  padding-bottom: 40px;
}

/* 見出し・サブテキストは白で固定 */
body.top-page .hero-title,
body.top-page .hero-sub{
  color:#ffffff;
}

/* ロゴ／ナビも白に */
body.top-page .logo,
body.top-page .nav a{
  color:#ffffff;
}

/* ガラス枠を明るい白ガラスに */
body.top-page .plan-card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}

/* トップページのフッター */
body.top-page .footer,
body.top-page .footer a,
body.top-page .footer-copy{
  background:transparent;
  color:#ffffff;
  text-shadow:0 2px 4px rgba(0,0,0,.85);
  margin-top:40px;        /* 16px → 40px：カードとの間を少し広げる */
  padding-top:24px;
  padding-bottom:64px;    /* 28px → 60px：画面の下側に寄せる */
}

/* ===============================
   サブページ共通（黒ガラスカード）
   =============================== */

.content-wrap{
  display:flex;
  justify-content:center;
  padding:140px 16px 80px;
}

/* 利用規約・特商法・プライバシーポリシーなど */
.content-box{
  width:100%;
  max-width:820px;
  padding:28px 22px 32px;
  background:linear-gradient(180deg, rgba(8,16,24,.94), rgba(8,16,24,.90));
  color:var(--text);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 46px rgba(0,0,0,.60);
  backdrop-filter:blur(10px);
}

/* お問い合わせフォーム・退会フォームなど */
.form-box{
  max-width:820px;
  margin:0 auto;
  padding:24px 20px 26px;
  background:rgba(8,16,24,.96);
  color:var(--text);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 40px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
}

.form label{
  display:block;
  margin:14px 0 6px;
  font-weight:700;
}
.form input,
.form textarea,
.form-box input,
.form-box textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #ccd5e2;
  background:#fff;
  color:var(--ink);
  font-size:16px;
  outline:none;
}
.form textarea{
  min-height:160px;
  resize:vertical;
}
.form .actions{ text-align:right; }

/* 汎用リンク色 */
a{ color:#a5c8ff; text-decoration:none; }
a:hover{ color:#fff; text-decoration:underline; }
/* ▼ 共通の青い丸ボタン（ここが決定版） */
.btn-primary{
  display:inline-block;
  background:var(--primary);
  color:#fff !important;       /* 常に白文字 */
  text-decoration:none;
  padding:10px 22px;
  border-radius:999px;
  font-weight:700;
  border:0;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(26,115,232,.35);
}

/* スパム対策用ダミーフィールド */
.hp{
  position:absolute !important;
  left:-9999px !important;
  visibility:hidden !important;
  height:0 !important;
  width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}

/* =========================
   サブページ共通：背景＆左右余白
   ========================= */

/* ※ マイページ＆商品詳細は除外して、他のサブページだけダーク背景 */
body:not(.top-page):not(.mypage-page):not(.product-page){
  background:
    linear-gradient(to bottom, rgba(0,10,20,.90), rgba(0,10,20,.90)),
    url("/images/bg.jpg") center/cover fixed no-repeat;
  color:#ffffff !important;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}




/* サブページの中身 */
body:not(.top-page):not(.mypage-page) .content-wrap{
  padding:140px 20px 80px;
}
@media (max-width:480px){
  body:not(.top-page):not(.mypage-page) .content-wrap{
    padding-left:18px;
    padding-right:18px;
  }
}
/* =========================
   マイページ用 明るめ背景
   ========================= */

body.mypage-page{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.32),
      rgba(0,10,20,.30)
    ),
    url("/images/bg.jpg") center/cover fixed no-repeat;
  color:#ffffff;
}

/* マイページも legal-page と同じカード系クラスを流用 */
body.mypage-page .sc-main{
  max-width:960px;
  margin:0 auto;
  padding:56px 16px 80px;
}
@media (max-width:480px){
  body.mypage-page .sc-main{
    padding:68px 12px 72px;
  }
}
body.mypage-page .sc-card{
  max-width:820px;
  margin:18px auto 0;
  background:rgba(5,25,45,.92);
  border-radius:26px;
  padding:24px 20px 28px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

/* =========================
   Legal pages 共通スタイル
   （利用規約 / プライバシー / 特商取引）
   ========================= */

body.legal-page{
  background:
    linear-gradient(to bottom, rgba(0,10,20,.70), rgba(0,10,20,.88)),
    url("/images/bg.jpg") center/cover fixed no-repeat;
  color:#ffffff;
}

/* メインコンテンツ */
body.legal-page .sc-main{
  max-width:960px;
  margin:0 auto;
  padding:56px 16px 80px;
}

/* 見出し（h1） */
body.legal-page .sc-hero-title{
  margin:0 0 10px;
  font-size:clamp(26px, 5.6vw, 34px);
}

/* カード（黒いガラス枠） */
body.legal-page .sc-card{
  max-width:820px;
  margin:18px auto 0;
  background:rgba(5,25,45,.95);
  border-radius:26px;
  padding:24px 20px 28px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

/* スマホ幅調整 */
@media (max-width:480px){
  body.legal-page .sc-main{
    padding:68px 12px 72px;
  }
  body.legal-page .sc-card{
    padding:20px 16px 24px;
    border-radius:22px;
  }
}

/* フッター（法務ページ用） */
.sc-footer{
  text-align:center;
  padding:20px 12px 28px;
}
.sc-footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 18px;
}
.sc-footer-links a{
  white-space:nowrap;
}

/* =========================
   MyPage 専用スタイル
   ========================= */

body.mypage-page{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.32),
      rgba(0,10,20,.20)
    ),
    url("/images/bg.jpg") center/cover fixed no-repeat !important;
  color:#ffffff;
}

/* ヘッダーの文字色をトップページと同じに */
body.mypage-page .logo,
body.mypage-page .nav a{
  color:#ffffff;
}

body.mypage-page .mypage-main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 16px 80px;  /* ヘッダー分を下げる */
}

body.mypage-page .mypage-title{
  margin: 0 0 10px;
  font-size: clamp(26px, 6vw, 32px);
  font-weight: 900;
}

body.mypage-page .mypage-lead{
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--muted);
}

body.mypage-page .mypage-grid{
  max-width: min(760px, 100% - 8px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.mypage-page .mypage-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 16px 18px 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
}

body.mypage-page .mypage-card-title{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
}

body.mypage-page .mypage-card-text{
  margin: 0 0 10px;
  font-size: 14px;
}

body.mypage-page .mypage-card ul{
  margin: 4px 0 0 18px;
  padding: 0;
  font-size: 14px;
}

body.mypage-page .mypage-card .btn-primary{
  margin-top: 6px;
  padding: 9px 20px;
  font-size: 14px;
}

/* マイページのフッターは法務ページと同じスタイルでOK */

/* ▼ トップページ：2つのガラス枠の位置（下にズラす） */
body.top-page .plan-list{
  max-width: min(680px, 100% - 32px);
   margin: 80px auto 0;   /* 60px → 80px にしてカード約1個分下へ */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ▼ プランカード内のボタンを青い丸ボタンに統一 */
body.top-page .plan-card .btn-primary{
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(26,115,232,.35);
}

/* ▼ マイページ専用：背景を明るめ＋ボカし強め */
body.mypage-page{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.45), rgba(0,10,20,.30)),
    url("/images/bg.jpg") center/cover fixed no-repeat !important;
}

/* ▼ マイページのガラス枠を少し濃くして文字を読みやすく */
body.mypage-page .sc-card{
  background: rgba(8,40,70,.88);
  backdrop-filter: blur(14px);
}
/* =========================
   MyPage 専用レイアウト
   ========================= */

/* 背景を明るめ＋ボカし強め */
body.mypage-page{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.45), rgba(0,10,20,.30)),
    url("/images/bg.jpg") center/cover fixed no-repeat !important;
}

/* 本文の横幅と余白 */
body.mypage-page .mypage-main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 16px 80px;  /* 96px → 64px：ガラス枠約1個ぶん上に詰める */
}

/* タイトル＆リード文 */
body.mypage-page .mypage-title{
  margin: 0 0 12px;
  font-size: clamp(26px, 5.5vw, 34px);
  font-weight: 800;
}
body.mypage-page .mypage-lead{
  margin: 0 0 22px;
  font-size: 15px;
}

/* カード全体の並び */
body.mypage-page .mypage-grid{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ガラス枠カード本体（濃いめ＋ボカし） */
body.mypage-page .mypage-card{
  padding: 18px 18px 20px;
  border-radius: 24px;
  background: rgba(20,80,150,.88);           /* 少し明るめの青 */
  border: 1px solid rgba(255,255,255,.25);   /* 枠も明るく */
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
}


/* カード内の見出し＆本文 */
body.mypage-page .mypage-card-title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}
body.mypage-page .mypage-card-text{
  margin: 0 0 10px;
  font-size: 14px;
}

/* カード内リンク */
body.mypage-page .mypage-card a{
  color: #cfe0ff;   /* 通常リンクは薄い水色のまま */
}
body.mypage-page .mypage-card a.btn-primary{
  color:#fff;       /* ボタンの文字は白にする */
  display:inline-block;
  margin-top:6px;
}
/* =========================
   Article（商品詳細・コラム）明るめデザイン
   ========================= */

/* 背景：トップに近い、少し明るいブルーグラデ */
body.article-page{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.28),
      rgba(0,60,120,.75)
    ),
    url("/images/bg.jpg") center/cover fixed no-repeat !important;
  color:#ffffff;
}

/* 見出しは少し太め＆大きめ */
body.article-page .sc-hero-title{
  margin: 0 0 14px;
  font-size: clamp(24px, 5.4vw, 30px);
  font-weight: 900;
}

/* カード：白寄りガラスで軽くする */
body.article-page .sc-card{
  background: rgba(255,255,255,.94);
  color: #0b1b2b;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* カード内の見出し・本文 */
body.article-page .sc-card h2,
body.article-page .sc-card h3{
  color:#0b1b2b;
}
body.article-page .sc-card p,
body.article-page .sc-card li{
  color:#1b2b3b;
}

/* ボタンはトップと同じ青い丸ボタン */
body.article-page .btn-primary{
  background: var(--primary);
  color:#fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(26,115,232,.35);
}

/* ヘッダーナビも明るいテーマに合わせる */
body.article-page .logo,
body.article-page .nav a{
  color:#ffffff;
}
/* ▼ 商品詳細ページ＆マイページ：トップと同じ明るい背景にする */
body.product-page,
body.mypage-page{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.32),
      rgba(0,10,20,.10)
    ),
    url("/images/bg.jpg") center/cover fixed no-repeat !important;
  color: #ffffff;
}
/* ▼ 商品詳細ページのカードを少し明るめのネイビーに */
body.product-page .sc-card{
  background: rgba(8,40,70,.90);          /* ほんの少し透かす */
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
}

/* ▼ マイページのカードも同じトーンにそろえる */
body.mypage-page .mypage-card{
  background: rgba(8,40,70,.88);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
}
/* =========================
   商品詳細ページ用（明るめ背景）
   ========================= */

/* 背景：トップページと同じ青空＋芝生 */
body.product-page{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.32),
      rgba(0,10,20,.30)
    ),
    url("/images/bg.jpg") center/cover fixed no-repeat !important;
  color:#ffffff;
}

/* 商品詳細のガラス枠を明るめの青ガラスに */
body.product-page .sc-card,
body.product-page .content-box{
  background: rgba(40,110,190,.80);          /* ちょっと明るい青ガラス */
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.24);   /* 枠もほんの少し明るく */
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
  backdrop-filter: blur(14px);
}
/* =========================
   Column（コラム一覧）ページ
   ========================= */

body.column-page{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.40),
      rgba(0,10,20,.30)
    ),
    url("/images/bg.jpg") center/cover fixed no-repeat !important;
  color:#ffffff;
}

/* ヘッダーロゴ＆ナビを白に */
body.column-page .logo,
body.column-page .nav a{
  color:#ffffff;
}

/* 全体レイアウト */
body.column-page .sc-main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 16px 80px;
}

/* スマホ幅調整 */
@media (max-width:480px){
  body.column-page .sc-main{
    padding: 64px 12px 76px;
  }
}

/* イントロ（「もしもの時に安心 お役立ちコラム」）の大きなガラス枠 */
body.column-page .column-hero{
  margin: 0 auto 18px;
  padding: 20px 18px 22px;
  border-radius: 24px;
  background: linear-gradient(
      135deg,
      rgba(16,80,150,.96),
      rgba(10,120,210,.92)
  );
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
}

body.column-page .column-hero-title{
  margin: 0 0 10px;
  font-size: clamp(22px, 5.4vw, 28px);
  font-weight: 900;
}

body.column-page .column-hero-lead{
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
}

body.column-page .column-hero-list-title{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
}

body.column-page .column-hero ul{
  margin: 4px 0 0 20px;
  padding: 0;
  font-size: 14px;
}

/* コラムリンクのカード一覧 */
body.column-page .column-list{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 各カード（白ガラス＋青文字） */
body.column-page .column-card{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  color: #0b1b2b;
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

body.column-page .column-card-title{
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 800;
}

body.column-page .column-card-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

/* 詳しく見るボタン */
body.column-page .column-card .btn-primary{
  margin-top: 10px;
  align-self: flex-start;
  padding: 9px 20px;
  font-size: 14px;
}

/* フッターは白文字で */
body.column-page .footer,
body.column-page .footer a,
body.column-page .footer-copy{
  color:#ffffff;
  text-shadow:0 2px 4px rgba(0,0,0,.85);
}
/* =========================
   Column page（コラム一覧）明るめデザイン
   ========================= */

/* 背景：マイページと同じ明るめブルー */
body.column-page{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.45),
      rgba(0,10,20,.30)
    ),
    url("/images/bg.jpg") center/cover fixed no-repeat !important;
  color:#ffffff;
}

/* ヘッダー文字も明るい背景用に白で固定 */
body.column-page .logo,
body.column-page .nav a{
  color:#ffffff;
}

/* コラム全体の余白 */
body.column-page .column-main{
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 16px 80px;
}

/* コラムのカード（1枚ずつ） */
body.column-page .column-card{
  background: rgba(255,255,255,.12);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.40);
  backdrop-filter: blur(14px);
  padding: 18px 18px 20px;
  margin-top: 14px;

  /* ボタンを右端に寄せるためのレイアウト */
  display: flex;
  flex-direction: column;
}

/* カードのタイトル */
body.column-page .column-card-title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}

/* カード本文テキスト */
body.column-page .column-card-text{
  margin: 0 0 10px;
  font-size: 14px;
}

/* 「詳しく見る」ボタンを右寄せ */
body.column-page .column-card .btn-primary{
  align-self: flex-end;     /* 右端に寄せる */
  margin-top: 8px;
  padding: 9px 22px;
  font-size: 14px;
}