@charset "utf-8";

/****************************************************************************
　共通設定
--------------------------------------------------------
   Last up date   : 2025.08.22
****************************************************************************/
body {
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  color:#333;
}

/* # =================================================================
   # 共通カラー
   # ================================================================= */
: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 + 2vw, 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 */
}
/* # =================================================================
   # タイトル
   # ================================================================= */


/* # =================================================================
   # 見出し
   # ================================================================= */

/* 実装で使う見出し */
#contents {
    margin: 0 auto 0;
    max-width: 1100px;
    position: relative;
    z-index: 2;
}

#main {
    background-color: #FFF;
    padding: 45px 0;
    max-width: 1100px;
    min-height: 500px;
    position: relative;
}


/* h1ノーマル */
#contents .head01 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  margin-bottom: 35px;
}

/* h1（装飾あり） */
#contents .head01_deco {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  padding: 0.5rem 1rem; 
  border-bottom: solid 1px var(--base1);
  margin-bottom: 35px;
}


/* h2ノーマル */
#contents .head02 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  margin-bottom: 35px;
}

/* h2（装飾あり） */
#contents .head02_deco {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  background-color: var(--lightblue);
  padding: 0.6rem 1rem; 
  border-radius: 6px;
  margin-bottom: 35px;
  }


/* H3 */
#contents .head03 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  margin-bottom: 35px;
}

/* H4 */
#contents .head04{
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
  margin-bottom: 35px;
}

/* H5 */
#contents .head05 {
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  margin-bottom: 35px;
}
/* H6 */
#contents .head06 {
  font-size: var(--fs-h6);
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

/* # =================================================================
   # 文章
   # ================================================================= */
/* リード文 */
#contents .lead {
  font-size: var(--fs-lead);
  line-height: 1.8;
  margin-bottom: 35px;
}

/* 本文 */
#contents .main_txt {
  font-size: var(--fs-body);
  line-height: 1.8;
  margin-bottom: 35px;
}
/* 注釈 */
#contents .note {
  font-size: var(--fs-note);
  line-height: 1.6;
  margin-bottom: 35px;
}

/* # =================================================================
   # 文字装飾
   # ================================================================= */
/* 強調（太文字） */
.em{
  font-weight: 900;
}
/* 注意喚起 */
.alert{
  background-color: #fdeeed;
  color: #ed1c24;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.8;
  padding: 1rem 1.5rem;
  border-radius: 6px;
}


/* 電話番号ブロック */
.tel_num{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(520px, 100%); 
}
/* アイコン */
.tel_icon{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
.tel_icon img{
  width: clamp(30px, 3.8vw, 46px);
  height: auto;
}
/* 電話番号本体 */
.tel_link{
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.5rem + 2vw, 3.125rem); /* 28px → 50px */
  line-height: 1.2;
  color: var(--base1);
  text-decoration: none;
  white-space: nowrap;
}
/* # =================================================================
   # 番号付きリスト
   # ================================================================= */

.num-list {
  margin: 1em 0;
  font-size: var(--fs-body);
  line-height: 1.8;
}
.num-list li {
  margin-bottom: 0.5em;
}
.num-list-num{
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: var(--fs-body);
  margin-right: 0.5em;
}
/* # =================================================================
   # リスト
   # ================================================================= */

.txtlist {
  list-style: disc;              
  padding-left: 1.2em;
  margin: 1em 0;
  font-size: var(--fs-body);
  line-height: 1.8;
}
.txtlist li {
  margin-bottom: 0.5em;
}

/* # =================================================================
   # 開閉リスト 
   # ================================================================= */
/* -------------------------------
   アコーディオン全体
---------------------------------*/
.accordion__menu {
  width: 100%;                /* 横幅いっぱい */
  max-width: 1200px;          /* 最大幅を1200pxに制限 */
  margin: 0 auto;          /* 上下60px、左右中央寄せ */
  border-radius: 6px;         /* 角を丸める */
  overflow: hidden;           /* はみ出した部分を隠す */
}

/* -------------------------------
  ボタン部分
---------------------------------*/
.accordion__button {
  font-size: var(--fs-body);
  padding: 1.4em;
  position: relative;
  cursor: pointer;
  padding-left: 2em;
  padding-right: 20%;
  background-color: var(--lightblue);
  border-radius: 6px;
  line-height: 1.8;
}

/* -------------------------------
  アコーディオン アイコン共通設定
---------------------------------*/
.accordion__button::before,
.accordion__button::after {
  content: "";                     /* 疑似要素を表示 */
  width: 30px;                     /* 横幅 */
  height: 30px;                    /* 高さ */
  position: absolute;              /* ボタン内で絶対配置 */
  top: 50%;                        /* 縦中央 */
  margin-top: -15px;               /* 高さ分ずらして中央揃え */
  right: clamp(0.938rem, -2.951rem + 8.1vw, 3.125rem); /* 右端のレスポンシブ位置 */
  background-repeat: no-repeat;    /* 背景画像を繰り返さない */
  transition: opacity .5s ease;    /* フェード切替 */
}

/* -------------------------------------
  プラスアイコン（閉じているとき）
---------------------------------------*/
.accordion__button::before {
  background-image: url(/img/accordion-plus.svg);
  opacity: 1;      /* 初期表示 */
  z-index: 1;      /* 後ろに配置 → フェードで自然切替 */
}

/* -------------------------------------
  マイナスアイコン（開いているとき）
---------------------------------------*/
.accordion__button::after {
  background-image: url(/img/accordion-minus.svg);
  opacity: 0;      /* 初期非表示 */
  z-index: 2;      /* 前面に配置 → フェードで自然切替 */
}

/* -------------------------------------
  アイコン開閉時フェード切替
---------------------------------------*/
.accordion__menu.is-open .accordion__button::before {
  opacity: 0;      /* プラスをフェードアウト */
  z-index: 1;      /* 後ろに下げる */
}

.accordion__menu.is-open .accordion__button::after {
  opacity: 1;      /* マイナスをフェードイン */
  z-index: 2;      /* 前に出す */
}

/* -------------------------------
   中身（非表示時）
---------------------------------*/
.accordion__body {
  max-height: 0;                     /* 高さ0で非表示 */
  opacity: 0;                        /* 透明 */
  overflow: hidden;                  /* はみ出し非表示 */
  background-color: var(--offwhite); /* 背景色 */
  padding: 0.3em 2em;                /* パディングを常に確保 → テキストと背景一体化 */
}

/* -------------------------------
   中身（表示時）
---------------------------------*/
.accordion__menu.is-open .accordion__body {
  max-height: 1000px;                /* 高さ十分に確保 */
  opacity: 1;                         /* 不透明 */
  padding: 1em 2em;
  margin-bottom:  0.5em;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  transition: all .5s ease-out;
}
.accordion__text{
  font-size: var(--fs-body);
  text-align: justify;
  padding: 1.3em;
  transition: all .5s ease-out;
}

/* -------------------------------
   開閉時ボタン角丸調整
---------------------------------*/
.accordion__menu.is-open .accordion__button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transition: all .5s ease-out;
}

/* 視覚効果の環境設定に配慮 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* # =================================================================
   # リンクボタン 
   # ================================================================= */
.btn.btn-internal {
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--white);
  padding:0.5em 1.5em;
  background-color: var(--base1);
  display: inline-block;  /* ボタンらしい見た目にするため */
  text-decoration: none; /* ← アンダーラインを消す */
}

.btn.btn-internal:hover {
  opacity: 0.8;
}

.btn-internal{
  font-size: var(--fs-body);
  color: var(--base1); 
  text-decoration: underline;
  
}
.btn-internal:hover {
  text-decoration: none;
  opacity: 0.8;
}

/* # =================================================================
   # PDFリンク・WORDリンク・EXCELリンク・ZIPリンク 
   # ================================================================= */
.file_up {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 2em 0;
}

.icon-pdf, .icon-word, .icon-excel, .icon-zip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--base1); 
  text-decoration: underline;
}
.icon-pdf:hover ,
.icon-word:hover ,
.icon-excel:hover ,
.icon-zip:hover {
  text-decoration: none;
  opacity: 0.5;
}

.icon-pdf__badge,
.icon-word__badge,
.icon-excel__badge,
.icon-zip__badge {
  background-color: var(--base1);
  padding: 0em 0.4em;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: var(--fs-note);
  color: var(--white);
  border-radius: 4px;
}

.icon-pdf__icon img,
.icon-word__icon img,
.icon-excel__icon img,
.icon-zip__icon img {
  width: 1.8em;
  height: auto;
  display: block;
}

.btn-external{
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--base1); 
  text-decoration: underline;
}
.btn-external:hover {
  text-decoration: none;
  opacity: 0.5;
}
.btn-external__icon img{
  width: 2em;
  height: auto;
  display: block;
}


/* # =================================================================
   # 表組 
   # ================================================================= */
/* 2カラム-1 */
.l3-def { margin: 20px 0; }

.l3-def__row {
  display: flex;
  border-top: 1px solid var(--base3);
}
.l3-def__row:last-child {
  border-bottom: 1px solid var(--base3);
}
.l3-def dt,
.l3-def dd {
  margin: 0;
  padding: 0.6em 2em;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.l3-def dt {
  flex: 0 0 14em;
  background: var(--offwhite);
  font-weight: 700;
  font-size: var(--fs-lead);
}
.l3-def dd {
  flex: 1;
  padding-top: 1em;
}
/* スマホで縦積み */
@media (max-width: 768px) {
  .l3-def__row {
    flex-direction: column;
  }
  .l3-def dt {
    flex: none;
    border-bottom: 1px solid var(--base3);
  }
}

/* 2カラム-2 */
.l3-table-wrap {
  overflow-x: auto; 
  margin-top: 60px;
}
.l3-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-body);
  color: var(--black);
}
.l3-table th,
.l3-table td {
  border: 1px solid var(--base3);
  padding: 1.4em 2em;
  vertical-align: top;
  line-height: 1.8;
  background: var(--white);
}
.l3-table td {
  padding: 1.4em 2em;
}
.l3-table thead th {
  background: var(--offwhite);
  color: var(--black);
  font-weight: 700;
  font-size: var(--fs-lead);
  text-align: center;
}
/* 左端セルの左罫線を消す */
.l3-table th:first-child,
.l3-table td:first-child {
  border-left: none;
}

/* 右端セルの右罫線を消す */
.l3-table th:last-child,
.l3-table td:last-child {
  border-right: none;
}

.l3-table--2col th,
.l3-table--2col td { width: 50%; }

.nowrap { white-space: nowrap; }

/* スマホ：縦積み（見出しを上に、本文を下に） */
@media (max-width: 768px) {
  .l3-table thead { display: none; }
  .l3-table tr { display: block; border: 1px solid var(--base3); margin-bottom: 12px; }
  .l3-table td { display: block; width: 100% !important; border-width: 0 0 1px; }
  .l3-table td:last-child { border-bottom: 0; }
  /* 1列目・2列目の見出しを疑似見出しとして表示 */
  .l3-table--2col tbody tr td:nth-child(1)::before {
    content: "基本利用料";
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--black);
    font-size: var(--fs-lead);
  }
  .l3-table--2col tbody tr td:nth-child(2)::before {
    content: "その他の負担";
    display: block;
    margin: 10px 0 6px;
    font-weight: 700;
    color: var(--black);
    font-size: var(--fs-lead);
  }
}
/* # =================================================================
   # 外来担当医表 
   # ================================================================= */

/* 外枠（角丸＋罫線） */
.l3-table-frame {
  border: 1px solid var(--base3);
  border-radius: 8px;
  overflow: hidden; /* 角丸の外にはみ出させない */
}

/* テーブル本体 */
.l3-table.l3-schedule {
  width: 100%;
  border-collapse: collapse; /* ← collapse に統一 */
  table-layout: fixed;
  font-size: var(--fs-body);
  color: var(--black);
}

/* セル共通 */
.l3-table.l3-schedule th,
.l3-table.l3-schedule td {
  border: 1px solid var(--base3);
  padding: 1.2em;
  vertical-align: middle;
  line-height: 1.6;
  background: var(--white);
  text-align: center;
}

/* ヘッダー行（曜日） */
.l3-schedule thead th {
  background: var(--offwhite);
  font-weight: 700;
  font-size: var(--fs-lead);
  border-bottom: 1px solid var(--base3); /* ← 明示的に下線を入れる */
}

/* 左端（診区分 一診・二診など） */
.l3-schedule tbody th {
  background: var(--offwhite);
  font-weight: 700;
}

/* # =================================================================
   # 連携医療機関 
   # ================================================================= */
/* パートナー情報DL */
.l3-partner { 
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}
/* 施設名の帯 */
.partner-name {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  background: var(--lightblue);
  padding: 1em;
  font-weight: 700;
  font-size: var(--fs-lead);
}
.l3-partner__row {
  font-size: var(--fs-lead);
  display: flex;
  gap: 1rem;
  padding: 1em;
  border-bottom: 1px solid var(--base3);
  
}
.l3-partner__row:first-child {
  border-top: 1px solid var(--base3);
}

.l3-partner__row dt,
.l3-partner__row dd {
  margin: 0;
}
.l3-partner__row dt {
  flex: 0 0 8.5rem;   /* ラベル幅 */
  font-weight: 700;
}
.l3-partner__row dd { 
  flex: 1;
  font-size: var(--fs-body);
  padding-top: 0.2em;
 }

/* スマホ対応 */
@media (max-width: 768px){
  .l3-partner__row { flex-direction: column; }
  .l3-partner__row dt { flex: none; }
}



/* ========================================
   左テキスト・右画像（7:3）
======================================== */
.column {
  width:100%;
  max-width: 1585px;
  margin: 0 auto;
  display: flex;
  gap: 3em;
  margin-bottom: 60px;
}

.row.w10_7 {
  width: 65%;
}

.row.w10_7 h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.6em;
}

.row.w10_7 p {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.8em;
  text-align: justify;
}

.row.w10_3 {
  width: 35%;
}

.row.w10_3 img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   左テキスト・右画像（5：5）
======================================== */
.mt-be-columns {
  width: 100%;
  max-width: 1585px;
  margin: 0 auto;
  display: flex;
  gap: 3em;
  margin-bottom: 60px;
}

.mt-be-column {
  width: 47%;
}

.mt-be-column p {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.8em;
  text-align: justify;
}

figcaption {
  font-size: var(--fs-note);
  padding-top: 0.5em;
  font-weight: normal;
  text-align: left;
}

.mt-be-column img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .mt-be-columns {
    flex-direction: column; /* 縦並びにする */
  }

  .mt-be-column {
    width: 100%;
    margin-top: 0;
  }

  .mt-be-columns .mt-be-column:first-child p {
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.8em;
    padding-top: 0em;
  }
}
/* ========================================
  左テキスト・右画像カルーセル（5：5）
======================================== */
.mt-be-columns {
  width: 100%;
  max-width: 1585px;
  margin: 0 auto;
  display: flex;
  gap: 3em;
  margin-bottom: 60px;
}

.mt-be-column h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.6em;
  margin-bottom: 0.8em;

}


/* デフォルト矢印を消す */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* 自作のSVGを背景に */
.prev-right {
  background: url('/img/icon-arrow-left.svg') no-repeat center/contain;
}
.next-right {
  background: url('/img/icon-arrow-right.svg') no-repeat center/contain;
}

/* ページネーション（通常ドット） */
.pagination-right .swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}

/* アクティブのドット */
.pagination-right .swiper-pagination-bullet-active {
  background: #db535e;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .mt-be-columns {
    flex-direction: column;
  }
  .mt-be-column {
    width: 100%;
    margin-top: 0;
  }
}

/* ========================================
  mt-be3-columns（3カラムブロック専用）
======================================== */
.mt-be3-columns {
  width: 100%;
  max-width: 1585px;
  margin: 0 auto;
  display: flex;
  gap: 3em;
  margin-bottom: 60px;
}

.mt-be3-column {
  width: 33.333%;
}

.mt-be3-column img {
  width: 100%;
  display: block;
}

.mt-be3-title {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--base1);
  line-height: 1.6em;
  margin-top: 0.8em;
  padding: 0.2em;
}

.mt-be3-text {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--black);
  line-height: 1.6em;
  text-align: justify;
  padding: 0.2em;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .mt-be3-columns {
    flex-direction: column;
  }

  .mt-be3-column {
    width: 100%;
  }
}
/* ========================================
  強調:枠囲み 罫線あり・塗りは無し
======================================== */

.border {
  width: 100%;
  max-width: 1585px;
  background-color: var(--white);
  border-radius: 20px;
  padding: 4em 7em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 60px;
}

.border-headline {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--base1);
}

.border-body {
  font-size: var(--fs-body);
  line-height: 1.8em;
  margin-top: 1em;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .border {
    padding: 2em;
  }
}

/* ========================================
  強調:枠囲み 罫線無し・塗りあり
======================================== */
.border_fill {
  width: 100%;
  max-width: 1585px;
  background-color: var(--offwhite);
  border-radius: 20px;
  padding: 4em 7em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 60px;
}

.border_fill-headline {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--base1);
}

.border_fill-body {
  font-size: var(--fs-body);
  line-height: 1.8em;
  margin-top: 1em;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .border_fill {
    padding: 2em;
  }
}
/* ========================================
  画像:左右マージン無し配置
======================================== */
.mt-figure.img_nopad {
  width: 100%;
  margin-bottom: 60px;
  height: 500px;
}

.img_nopad__img {
  width: 100%;
  object-fit: cover;
  height: 500px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .img_nopad__img {
    width: 100%;
    height: auto;
  }
}
/* ========================================
  画像:レイアウト内実寸表示（センター配置）
======================================== */
.img_rounded {
  display: block;       /* ブロック要素にする */
  margin: 0 auto 35px; /* 横中央に配置 */
  width: 50%;
  max-width: 600px;
  text-align: center;   /* キャプション中央揃え */
}

.img_rounded img {
  display: block;       /* ブロック化して余白影響をなくす */
  width: 100%;
  object-fit: cover;
}