/* ============================================
 * Infection TOP 専用 CSS
 * /medicine/infection/index.php 以外では読まない
 * ============================================ */
@charset "UTF-8";

/* --- Base / Utility --- */
html { scroll-padding-top: 80px; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 20px; }
a { text-decoration: none; color: inherit; }

/* 表示切替（既存互換） */
.sp1 { display: block; }              /* PC表示 */
.sp2 { display: block; }              /* タブレット以上 */
@media (max-width:1104px){ .sp1{ display:none; } }
@media (max-width: 767px){ .sp2{ display:none; } }

/* 見出しフォント（既存互換） */
.l-inner-main.main_font_adj { font-family: "Noto Sans JP","メイリオ",Meiryo,"Yu Gothic",YuGothic,"Hiragino Kaku Gothic Pro",Osaka,"MS PGothic",sans-serif !important; }

/* 余白 */
.Link-list { margin-bottom: 30px; padding: 30px 0; }
.content_bottom { margin-bottom: 50px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.bottom_space { margin-bottom: 50px !important; }
.bot_m20 { margin-bottom: 20px; }
.bot_m60 { margin-bottom: 60px; }

/* テキストユーティリティ */
.text_indent_1 { text-indent: -1em; padding-left: 1em; }
.text_display p { text-indent: -3em; padding-left: 3em; }
.font_size_18 { font-size: 18px !important; }
.font_b { font-weight: bold; }
.itl { font-style: italic !important; }
.header_color_adj { color: #fff !important; }
.word_break { overflow-wrap: anywhere; word-break: normal; }

/* 見出し2～3行構成（既存互換） */
.heading-2lines {
  max-width: 100%;
  line-height: 1.4;
  line-break: strict;
  overflow-wrap: anywhere;
  word-break: normal;
}
.text_display { min-width: 0; }
@media (max-width: 1023.98px) {
  .heading-2lines .line-1,
  .heading-2lines .line-2,
  .heading-2lines .line-3{
    display: inline;
    white-space: normal;
  }
}
@media (min-width: 1024px) {
  .heading-2lines .line-1,
  .heading-2lines .line-2,
  .heading-2lines .line-3 {
    display: block;
    white-space: nowrap;
  }
  .heading-2lines .line-1 { font-size: clamp(16px, 1.2vw, 24px); }
  .heading-2lines .line-2 { font-size: clamp(16px, 1.1vw, 22px); }
  .heading-2lines .line-3 { font-size: clamp(16px, 1.1vw, 22px); }
}
.left_m8{ margin-left: 8px; }

.left_mm1{ margin-left: -1em !important; }
.mmb0{ margin-bottom: 0 !important; }

/* --- Page Title / Header --- */
.header_align { display: flex; align-items: center; }
.Page_title.bg-infection {
  background-image: url(../images/bg-title-picture.jpg);
  background-size: cover;
}
.infection_ttl { margin-top: 20px; margin-bottom: 0 !important; }

/* --- Link List（カード群） --- */
.infection_banner_display { display: flex; flex-wrap: wrap; gap: 8px; }

/* 2列カード */
.wrap_display_two { display: flex; position: relative; width: calc((100% - 8px) / 2); }
.l-inner-main.sp_display{gap:8px;}

/* 3列カード */
.wrap_display_three { display: flex; position: relative; width: calc((100% - 16px) / 3); }
@media (max-width: 1023.98px){ .wrap_display_three { width: calc((100% - 8px) / 2); } }
@media (max-width: 768px){
  .infection_banner_display { display: block; }
  .wrap_display_two, .wrap_display_three { width: 100%; margin: 5px 0 !important; }
}

/* クリック領域（カード全体） */
.wrap_display_two a, .wrap_display_three a {
  position: absolute; inset: 0; display: block; z-index: 1;
}
/* キーボード操作のフォーカス可視化 */
.wrap_display_two a:focus-visible,
.wrap_display_three a:focus-visible {
  outline: 3px solid #0057ff; outline-offset: 3px; border-radius: 6px;
}

/* 図形（四角・円） */
.circle_area, .square_area, .square_display, .square { display: flex; }
.square_display, .square { width: 150px; }
.square {
  text-align: center; justify-content: center; align-items: center;
  background-color: #ED7D31; border-right: 5px solid #ED7D31; border-bottom: 5px solid #ED7D31;
}
.circle_display { display: flex; width: 100px; justify-content: center; align-items: center; }
.circle {
  width: 50px; height: 50px; border-radius: 50%; margin: 0 auto; text-align: center; line-height: 50px;
  filter: drop-shadow(5px 5px 5px #4e4e4e);
}

/* 円の色バリエーション */
.circle_color_green  { background-color: #169C38; }
.circle_color_purple { background-color: #BA208E; }
.circle_color_blue   { background-color: #2c2a7c; }
.circle_color_orange { background-color: #ED7D31; }
.circle_color_pink   { background-color: #f070aa; }
.circle_color_purple2{ background-color: #9933FF; }
.circle_color_light_green{ background-color: #00CC00; }
.circle_color_orange_gold{ background-color: #F6B80D; }
.circle_color_light_purple{ background-color:#a688bd; }

/* テキスト色 */
.shapes_text_color { color: #fff; font-weight: bold; }

/* ボーダーと基本背景 */
.border_orange { background-color: #fff; border: 5px solid #ED7D31; }
.border_blue   { background-color: #fff; border: 5px solid #0c489b; }
.min_height    { min-height: 115px; }

/* Hover（色反転系） */
.border_orange:hover { background-color: #ED7D31; }
.border_orange:hover .text_area { color: #fff; }

/* Hover（バリエーション） */
.border_blue.active:hover { background-color: #169C38; }
.border_blue.active.bg_purple:hover  { background-color: #BA208E; }
.border_blue.active.bg_orange:hover  { background-color: #ED7D31; }
.border_blue.active.bg_pink:hover    { background-color: #f070aa; }
.border_blue.active.bg_purple2:hover { background-color: #9933FF; }
.border_blue.active.bg_light_green:hover { background-color: #00CC00; }
.border_blue.active.bg_orange_gold:hover { background-color: #F6B80D; }
.border_blue.active.bg_light_purple:hover { background-color: #a688bd; }
/* Hover時の文字色（コントラスト確保） */
.border_blue.active:hover .text_area,
.border_blue.active:hover h5,
.border_blue.active:hover p { color: #fff; }

/* タイポ（TOPで使う範囲のみ） */
.special h5 { font-size: 19px; font-weight: bold; }
.ict div, .ict h5, .infec_cont h5 { font-size: 20px; font-weight: bold; }
.infec_cont div { font-size: 16px; font-weight: bold; }
.infec_cont div p, .special div p { font-size: 16px; font-weight: normal; }

/* テキストブロック */
.text_area { padding: 0 10px 0 0; display: flex; align-items: center; }
.text_area_left_m { margin-left: 10px; }

/* --- Special（特別号）必要最小限 --- */
.icon_wrapping { width: 100px; }
.icon_area {
  background-image: url(../images/icon_special_blue_back.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 0;
  padding-top: 100%; /* 正方形 */
}
.sp_display { display: flex; }
.special_text_area { display: flex; align-items: center; }

@media (max-width: 767px) {
  .sp_display { display: block; }
  .icon_wrapping { display: none; }
}

/* --- アクセシビリティ補助（動き低減） --- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

* 特別号（special）補完 */
.special { margin-bottom: 30px; padding: 30px 0; }

/* 特別号カード hover */
.special.border_blue:hover { background-color: #0c489b; }
.special.border_blue:hover h5,
.special.border_blue:hover p { color: #fff; }

/* 特別号カラムの間隔（2カラム） */
.special .wrap_display_two { margin-bottom: 20px; }