.elementor-29521 .elementor-element.elementor-element-a7cdae7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:80px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-29521 .elementor-element.elementor-element-4da0308{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-29521 .elementor-element.elementor-element-9e68d3c{text-align:center;}.elementor-29521 .elementor-element.elementor-element-9e68d3c .elementor-heading-title{font-family:"Noto Sans JP", Sans-serif;font-size:30px;font-weight:600;letter-spacing:2px;color:#333333;}.elementor-29521 .elementor-element.elementor-element-a59432c .elementor-heading-title{font-family:"Afacad", Sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:1px;color:#838383;}.elementor-29521 .elementor-element.elementor-element-8e347d4{width:var( --container-widget-width, 210px );max-width:210px;--container-widget-width:210px;--container-widget-flex-grow:0;top:-60px;}body:not(.rtl) .elementor-29521 .elementor-element.elementor-element-8e347d4{left:150px;}body.rtl .elementor-29521 .elementor-element.elementor-element-8e347d4{right:150px;}.elementor-29521 .elementor-element.elementor-element-8e347d4 img{width:100%;}.elementor-29521 .elementor-element.elementor-element-66241ef{width:var( --container-widget-width, 98px );max-width:98px;--container-widget-width:98px;--container-widget-flex-grow:0;top:-116px;}body:not(.rtl) .elementor-29521 .elementor-element.elementor-element-66241ef{right:218px;}body.rtl .elementor-29521 .elementor-element.elementor-element-66241ef{left:218px;}.elementor-29521 .elementor-element.elementor-element-66241ef img{width:100%;}.elementor-29521 .elementor-element.elementor-element-8d79886{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-29521 .elementor-element.elementor-element-c96c3dd{--display:flex;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-29521 .elementor-element.elementor-element-25e08d2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-29521 .elementor-element.elementor-element-a7cdae7{--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-29521 .elementor-element.elementor-element-8e347d4{--container-widget-width:110px;--container-widget-flex-grow:0;width:var( --container-widget-width, 110px );max-width:110px;}body:not(.rtl) .elementor-29521 .elementor-element.elementor-element-8e347d4{left:20px;}body.rtl .elementor-29521 .elementor-element.elementor-element-8e347d4{right:20px;}.elementor-29521 .elementor-element.elementor-element-66241ef{--container-widget-width:60px;--container-widget-flex-grow:0;width:var( --container-widget-width, 60px );max-width:60px;top:-58px;}body:not(.rtl) .elementor-29521 .elementor-element.elementor-element-66241ef{right:20px;}body.rtl .elementor-29521 .elementor-element.elementor-element-66241ef{left:20px;}.elementor-29521 .elementor-element.elementor-element-8d79886{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-29521 .elementor-element.elementor-element-0f7b583 > .elementor-widget-container{padding:0px 20px 0px 20px;}.elementor-29521 .elementor-element.elementor-element-25e08d2{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for html, class: .elementor-element-e8d7431 *//* 共通トーン */
  .sec-wrap{ --brand:#0B3283; --accent:#16a34a; --line:#d9e6f4; }

  /* 見出し（スクショの緑四角＋タイトル） */
  .sec-title{
    display:flex; align-items:center; gap:10px;
    margin: clamp(10px,2vw,16px) 0 18px;
    font-family:"Noto Sans JP",sans-serif;
  }
  .sec-title__dot{
    width:14px; height:14px; border-radius:3px; background:var(--accent);
    flex:0 0 14px;
  }
  .sec-title h3{
    font-size: clamp(18px,2vw,22px);
    font-weight: 600; color:#111; line-height:1;
    margin:0;
  }

  /* 症状別セクション */
  .symptom-reco{ --line:#d9e6f4; }
  .symptom-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:24px;
  }
  @media (max-width:800px){ .symptom-grid{ grid-template-columns: 1fr; } }

  .symptom-card{
    background:#fff; border:2px solid var(--line); border-radius:12px;
    padding:16px 18px; box-shadow:0 6px 18px rgba(0,0,0,.05);
  }
  .symptom-card h3{
    margin:0 0 12px 0;
    font: 500 clamp(16px,1.6vw,18px)/1.4 "Noto Sans JP",sans-serif;
    color: var(--brand);
  }
  .link-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
  .link-list a{
    display:inline-flex; align-items:center; gap:8px;
    color:#164261; text-decoration:none; font-weight:600;
  }
  .link-list a::before{
    content:""; width:8px; height:8px; border-radius:2px; background:var(--brand);
  }
  .link-list a:hover{ color:var(--brand); text-decoration:underline; }/* ===== 年代×男女カード with ポップアップ（矢印はラベル横） ===== */
.age-reco{
  --brand:#408ebf;
  --line:#d9e6f4;
  --ink:#222;
  --muted:#667;
  font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  color:var(--ink);
}
.age-reco *{ box-sizing:border-box; }

/* グリッド */
/* グリッド：4カラム */
.age-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:24px;
}
/* 円マスクを強制（画像も含めて） */
.age-reco .age-illust{
  width: 140px; height: 140px;
  border-radius: 50%;
  overflow: hidden;                 /* ← これで中の画像も丸く切り抜き */
}

.age-reco .age-illust img{
  width: 100%; height: 100%;
  object-fit: cover;                /* ← 余白なく円いっぱいに */
  display: block;
  clip-path: circle(50% at 50% 50%);/* ← 万一のはみ出しにも備えてダブル保険 */
  transform: none;                  /* ← 任意：以前の縮小をリセット */
}

/* （任意）タブレットで3カラムにしたい場合は有効化 */
@media (max-width:1200px){
  .age-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width:900px){
  .age-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:520px){
  .age-grid{ grid-template-columns: 1fr; }
}

/* カード */
.age-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:22px 18px 26px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:14px;
 
  cursor:pointer; user-select:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  outline: none;                 /* フォーカス枠は独自に */
}
.age-card:hover{
  border-color:#c8dbf2; box-shadow:0 10px 26px rgba(0,0,0,.08); transform:translateY(-2px);
}
.age-card:focus-visible{
  outline:3px solid #b7d0ee; outline-offset:4px;
}

/* イラスト */
.age-illust{
  width:140px; height:140px; border-radius:50%;
  background: radial-gradient(ellipse at center, #f5fbdc 0%, #eef7ce 100%);
  display:grid; place-items:center; overflow:hidden;
  border:4px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.age-illust img{ width:88%; height:88%; object-fit:contain; display:block; }

/* ラベル＋矢印を横並びに */
.age-label{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:18px; font-weight:800; letter-spacing:.08em;
}
.age-arrow{
  width:28px; height:28px; border-radius:50%;
  border:2px solid var(--brand); color:var(--brand);
  display:inline-grid; place-items:center; line-height:1;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  pointer-events:none;   /* 装飾のみ */
}
.age-card:hover .age-arrow{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* 右下から出るフロート矢印は完全に無効化（保険） */
.age-card::after, .age-card::before{ content:none !important; }

/* ポップアップ */
.age-popup{
  position:absolute; left:12px; right:12px; bottom:12px;
  transform: translateY(8px);
  background:#fff; border:2px solid var(--line);
  border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.16);
  padding:14px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* 吹き出し三角 */
.age-popup::after{
  content:""; position:absolute; right:32px; bottom:-8px;
  border:8px solid transparent; border-top-color:var(--line);
}
.age-popup::before{
  content:""; position:absolute; right:32px; bottom:-6px; z-index:1;
  border:6px solid transparent; border-top-color:#fff;
}

/* 検査リンク（小さめ＆ホバー色変化） */
.ap-list{ display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.ap-list a{
  display:flex; align-items:center; gap:10px;
  font-size:14px; text-decoration:none; color:#164261; font-weight:600;
  transition:color .2s ease, text-decoration-color .2s ease;
}
.ap-list a::before{
  content:""; width:8px; height:8px; border-radius:2px; background:var(--brand);
}
.ap-list a:hover{ color:var(--brand); text-decoration:underline; }

/* 表示条件：ホバー or フォーカス内（スマホのタップ対応） */
.age-card:hover .age-popup,
.age-card:focus-within .age-popup{
  opacity:1; visibility:visible; transform: translateY(0); pointer-events:auto;
}
/* Elementor等で強い指定がある場合 */
section.age-reco .age-grid .age-card .age-popup::before,
section.age-reco .age-grid .age-card .age-popup::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
}
/* --- 共通設定 --- */
.sec-wrap { --brand:#0B3283; --accent:#16a34a; --line:#d9e6f4; }
.age-reco { --brand:#408ebf; --line:#d9e6f4; --ink:#222; }

/* --- 見出し --- */
.sec-title {
  display: flex; align-items: center; gap: 10px;
  margin: clamp(20px, 4vw, 40px) 0 18px;
}
.sec-title__dot {
  width: 14px; height: 14px; border-radius: 3px; background: var(--accent);
  flex: 0 0 14px;
}
.sec-title h3 {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700; color: #111; line-height: 1.4; margin: 0;
}

/* --- グリッド設定 --- */
.age-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* PCは4列 */
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- 年代別カード基本 --- */
.age-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 18px;
  background: #fff; border: 2px solid var(--line); border-radius: 14px;
  cursor: pointer; transition: all .3s ease;
}

/* イラストを円形に */
.age-illust {
  width: 140px; height: 140px; border-radius: 50%;
  overflow: hidden; border: 4px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.06);
  background: radial-gradient(ellipse at center, #f5fbdc 0%, #eef7ce 100%);
}
.age-illust img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.age-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; color: var(--ink);
}

.age-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--brand); color: var(--brand);
  display: grid; place-items: center; transition: .2s;
}

/* ポップアップ（PC） */
.age-popup {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 15px; opacity: 0; visibility: hidden;
  transform: translateY(10px); transition: .3s; z-index: 10;
}

.age-card:hover .age-popup,
.age-card:focus-within .age-popup {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.ap-list { list-style: none; padding: 0; margin: 0; }
.ap-list li { margin-bottom: 8px; }
.ap-list a {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #164261; text-decoration: none; font-weight: 600;
}
.ap-list a::before {
  content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--brand);
}

/* ======================================================
   レスポンシブ調整
======================================================= */

/* タブレット (1024px以下) */
@media (max-width: 1024px) {
  .age-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* スマホ (640px以下) */
@media (max-width: 640px) {
  .age-grid { grid-template-columns: 1fr; gap: 15px; }

  .age-card {
    flex-direction: row; /* 横並びに変更 */
    padding: 15px;
    align-items: center;
    justify-content: flex-start;
  }

  .age-illust {
    width: 70px; height: 70px; /* 小さくする */
    flex-shrink: 0;
  }

  .age-label {
    font-size: 16px;
    flex-grow: 1;
  }

  /* スマホではポップアップを「常に表示」または「下に展開」にする調整 */
  .age-popup {
    position: static; /* 浮かさない */
    opacity: 1; visibility: visible; transform: none;
    border: none; box-shadow: none; padding: 0;
    margin-top: 5px;
    display: block; /* 常にリストを見せる形式に変更 */
  }
  
  /* スマホ時は横並びにするため、ラベルとリストを包むレイアウト調整 */
  .age-card {
    display: block; /* 縦に戻す場合はここを調整 */
    text-align: left;
  }
  
  .age-label {
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
  }

  .ap-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列でリンクを表示 */
    gap: 8px;
  }
}

/* さらに小さい画面 */
@media (max-width: 480px) {
  .ap-list { grid-template-columns: 1fr; } /* リンクを1列に戻す */
}
.age-illust {
  /* --- 既存のスタイル --- */
  width: 140px; 
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  
  /* --- 中央揃えのための追加 --- */
  margin-left: auto;   /* 左側の余白を自動調整 */
  margin-right: auto;  /* 右側の余白を自動調整 */
  display: flex;       /* 中の画像を中央にするため（推奨） */
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  /* 矢印を非表示にする */
  .age-arrow {
    display: none !important;
  }

  .age-card {
    padding: 20px 15px;
  }

  /* 画像サイズをスマホ向けに少し調整（必要であれば） */
  .age-illust {
    width: 120px; height: 120px;
    margin-left: auto;
    margin-right: auto;
  }

  .age-label {
    font-size: 17px;
    justify-content: center; /* スマホでも確実に中央寄せ */
  }

  .ap-list a {
    font-size: 15px;
  }
}/* End custom CSS */