@charset "utf-8";

/* # =================================================================
   # 共通カラー
   # ================================================================= */
:root {
  --base1: #005fa8;
  --base2: #29ABE2;
  --base3: #999;
  --pink1: #F19CA6;
  --rosered: #db535e;
  --black: #000;
  --lightgray:  #e6e6e6;
  --offwhite:  #f6f6f6;
  --white:  #ffffff;
  --lightblue: #0071bc26;  
}

/* # =================================================================
   # 見出しフォントサイズ
   # ================================================================= */
:root {
  --fs-h1: clamp(1.5rem, 1.3rem + 1vw, 2rem);    /* 24px → 32px */
  --fs-h2: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem); /* 22px → 26px */
  --fs-h3: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);   /* 18px → 22px */
  --fs-h4: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);     /* 16px → 20px */
  --fs-h5: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);    /* 16px → 18px */
  --fs-h6: 1rem;                                      /* 16px固定 */
}
/* # =================================================================
   # 文章フォントサイズ
   # ================================================================= */
:root {
  --fs-lead: clamp(1rem, 0.875rem + 1vw, 1.375rem); /* 16px → 22px */
  --fs-body: clamp(0.875rem, 0.75rem + 0.8vw, 1.125rem);  /* 14px → 18px */
  --fs-note: clamp(0.875rem, 0.85rem + 0.3vw, 1rem);  /* 14px → 16px */
}


/*--------------------------------------------------------
  ヘッダー画像エリア画像＋見出しエリア（ご来院の皆さまへ）
--------------------------------------------------------*/

/* 親要素（画像と見出しを含む全体のセクション） */
.sub-fv {
  position: relative;
  width: 100%;
  height: 320px;
  background: url(/grandfamilia/img/bg_ttl_common.jpg) no-repeat center center;
  background-size: cover;
  overflow: hidden;
}

/* 背景画像 */
.sub-fv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right;
  display: block;
}

/* 左端揃え用の共通コンテナ */
.sub-fv-container {
  width: 92%;
  max-width: 1585px; /* visit-info と同じ */
  margin: 0 auto;
  padding-left: 1em;  /* visit-info と同じ */
  padding-right: 1em; /* センタリング用 */
  box-sizing: border-box;
}

/* テキストを配置するためのラッパー */
.sub-fv__inner {
  position: absolute;
  bottom: 15%;
  z-index: 2;
}

/* 見出しテキスト */
.sub-fv__title {
   color: var(--white);
   font-size: var(--fs-h1);
   font-weight: 700;
}
.sub-fv__title span {
    font-size: var(--fs-note);
    display: block;
    margin-bottom: .5rem;
    padding-left: .1rem;
}


/* パンくずリスト */
.breadcrumb {
  width: 92%;
  max-width: 1585px; 
  margin-top: 20px;
  font-size: 14px;
  font-weight: normal;
  color: var(--black);
}
.breadcrumb :hover{
  color: var(--base1);
  font-weight:700;
}
/*--------------------------------------------------------
  メインコンテンツ
--------------------------------------------------------*/
/* ご来院の皆さまへ（全体） */
.visit-info {
  width: 92%;
  max-width: 1585px;
  margin: 0 auto;
  padding: 2em 1em;
}

/* ナビゲーションボタンコンテナ */
.visit-info-nav {
  display: flex;
  gap: 1em;
  margin-bottom: 2em;
}

/* 各ボタン */
.visit-info-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  background-color: var(--base1);
  color: var(--white);
  padding: 0.8em 1.2em;
  border-radius: 5px;
  text-decoration: none;
  min-width: 180px;
  transition: background 0.3s ease;
}

/* hover */
.visit-info-nav-btn:hover {
  background-color: #005a94; /* 変数未定義のため、必要なら別途 var(--base1-dark) を定義 */
}

/* アイコン部分（白丸＋赤い下矢印） */
.visit-info-nav-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  font-size: 0.6rem;
  color: var(--rosered);
  position: relative;
}

.visit-info-nav-btn .icon::before {
  content: "▼";
  font-size: 0.7rem;
  line-height: 1;
}



/* 各カテゴリブロック */
.visit-info-section {
  margin-bottom: 3em;
}

/* 見出し */
.visit-info-title {
  background-color: var(--lightblue); /* 元の #e6f0fa を薄青とみなして置換 */
  color: var(--base1);
  font-size: var(--fs-h2);
  padding: 0.5em 1em;
  border-radius: 4px;
  margin-bottom: 1.5em;
}

/* リンクリスト（Gridで整列） */
.visit-info-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1em;
}

/* 各リンクボタン */
.visit-info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8em 1em;
  border: 1px solid var(--lightgray);
  border-radius: 6px;
  background-color: var(--white);
  text-decoration: none;
  transition: transform 0.3s ease-in-out; /* hover時の変形アニメーションの速さ */
}

/* 疑似アイコン（赤丸っぽく） */
.visit-info-item::after {
  content: "▶";
  font-size: 0.9rem;
  color: var(--rosered);
  margin-left: 0.5em;
}


























/*--------------------------------------------------------
  新着情報
--------------------------------------------------------*/
.news-sec {
  position: relative;
}
.news-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;             
  height: 100%;
  background-color: #fff9ed;
  border-radius: 0 30px 30px 0; /* 角丸（上左, 上右, 下右, 下左） */
  z-index: -1;              /* コンテンツの後ろへ */
}

.news-content{
  width: 86%;
  max-width: 1600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 60px auto;
  padding-top: 20px;
  padding-bottom: 60px;
}
.news-3colm{
  width: 32%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* x方向, y方向, ぼかし, 色 */
  padding: 20px;
}

.news-headline-text{
  width: 75%;  
  font-weight: 700;
  font-size: clamp(1rem, 0.94rem + 0.82vw, 1.375rem);/* w768=16px → w1500=22px */
  margin-left: 5%;
}
.news-arrow{
  width: 10%;  
  height: auto;
}
.news-inner{
  width: 100%;
  display: block;
  padding: 20px 10px;
  position: relative;
  overflow: hidden; /* 疑似要素がはみ出さないように */
  transition: all 0.3s ease;
  border-bottom: solid 1px #d4d4d4;
}
/* hover時のシャドウ拡大 */
.news-inner:hover {
    color: var(--base1);
}
/* 画像を暗くする用のオーバーレイ */
.news-inner::before {
  content: "";
  position: absolute;
  inset: 0; /* top,right,bottom,left全部0 */
  background: rgba(0,0,0,0); /* 通常は透明 */
  transition: background 1s ease;
}
.news-date{
  background-color: var(--lightgray);  
  padding: 8px 12px;
  display: inline-block;
  margin-bottom: 10px;
  font-size: 14px;
  margin-left: 10px;
}
.news-date-large{
    font-size: 18px;
}
.news-item{
  font-weight: 500;
  font-size: clamp(0.875rem, 0.746rem + 0.27vw, 1rem); /* w768=14px -> w1500=16px */
   padding-left: 14px;
   line-height: 1.6em;
}
/*--------------------------------------------------------
  活動
--------------------------------------------------------*/
.activity-sec {
  position: relative;
  margin-top: 100px;
}
.activity-background {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;             
  height: 100%;
  background-image: url("/grandfamilia/upload/activity-background-1.jpg");
  border-radius: 30px 0 0 30px; /* 角丸（上左, 上右, 下右, 下左） */
  z-index: -1;              /* コンテンツの後ろへ */
}
.activity-content{
  width: 86%;
  max-width: 1600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 40px auto;
  padding-top: 20px;
  padding-bottom: 60px;
}

/*--------------------------------------------------------
  ピックアップ
--------------------------------------------------------*/
.pickup-sec {
  width: 100%;
  margin-top: 100px;
  background-color: #fff9ed;
  margin-bottom: 100px;
}
.pickup { padding: 40px 0; background:#fff9ed; }
.pickup-title { width:86%; max-width:1600px; margin:0 auto 16px; font-size:24px; font-weight:700; }

.swiper-pickup { width:86%; max-width:1600px; margin:0 auto; }
.swiper-pickup img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}
/* 画像 hover */
.swiper-pickup img {
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* スムーズなアニメーション */
}
.swiper-pickup img:hover {
  opacity: 0.5;
}

/* ナビゲーション矢印 */

/* デフォルト矢印を消す */
.pickup-prev::after, .pickup-next::after {
  display: none;
}
/* 自作のSVGを背景に */
.pickup-prev {
  background: url('/grandfamilia/upload/icon-arrow-left.svg') no-repeat center/contain;
}
.pickup-next {
  background: url('/grandfamilia/upload/icon-arrow-right.svg') no-repeat center/contain;
}
/* 通常のドット */
.pickup-pagination .swiper-pagination-bullet {
  background: #ccc;   /* ←グレーに変更 */
  opacity: 1;         /* Swiperデフォは0.2。しっかり色を出すなら1に */
}
/* アクティブ（現在のスライド） */
.pickup-pagination .swiper-pagination-bullet-active {
  background: #db535e; /* ←ブランドカラーなど好きな色 */
}