@charset "UTF-8";

/* ============================================
    - Main Stylesheet
   ============================================ */

/* --------------------------------------------
   CSS Variables (カスタムプロパティ)
   -------------------------------------------- */
:root {
  /* Colors */
  --color-primary: #0058a2;
  --color-primary-dark: #004a8a;
  --color-primary-deep: #2e315a;
  --color-primary-light: #f0f8ff;
  --color-secondary: #f0f8ff;
  --color-accent: #e85a5a;
  --color-accent-hover: #d64545;
  
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-white: #ffffff;
  
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f5f5;
  --color-bg-blue: #0058a2;
  --color-bg-blue-light: #f0f8ff;
  
  --color-border: #dddddd;
  --color-border-light: #eeeeee;
  
  /* Menu overlay background */
  --color-menu-overlay: rgba(211, 232, 248, 0.85);
  
  /* Typography */
  --font-ja: helvetica, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-en: "JetBrains Mono", monospace;
  
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  --line-height-base: 1.8;
  --line-height-heading: 1.4;
  
  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;
  --spacing-xxl: 80px;
  
  /* Layout */
  --container-max-width: 1300px;
  --header-height-pc: 120px;
  --header-height-mobile: 70px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  
  /* Shadows */
  --shadow-sm: 2px 2px 0px rgba(0, 0, 0, 0.25);
  --shadow-md: 3px 3px 7px rgba(0, 0, 0, 0.2);
  --shadow-lg: 2px 2px 0px rgba(0, 0, 0, 0.25);
  --shadow-40: 4px 4px 0px rgba(0, 0, 0, 0.40);
}

/* --------------------------------------------
   Base Styles
   -------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ja);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
	font-feature-settings: "palt";
    letter-spacing: 0.05em;
}
.page-content{
  overflow: hidden;
}
.blue_color{
  color: #004a8a;
}.cir_bluer{
	color: #0058a2;
}
/* --------------------------------------------
性スクロール
   -------------------------------------------- */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}


/* --------------------------------------------
   Typography
   -------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--spacing-sm);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

p {
  margin-bottom: var(--spacing-sm);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* English headings font */
.en-heading {
  font-family: var(--font-en);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
}

.content-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-deep);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-h3);
}

.content-cta-btn .cta-text {
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
}

.content-cta-btn:hover {
  text-decoration: none;
  color: var(--color-primary);
}

.content-cta-btn:hover .cta-icon {
  transform: translateX(3px) translateY(-3px);
}

.content-cta-btn .cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform var(--transition-base); /* アニメーション用のトランジション追加 */
}

.pc {
	display: block;
}
.sp {
	display: none;
}


/* --------------------------------------------
   Layout Utilities
   -------------------------------------------- */
.container-custom {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.taxsec-inner{
  padding: 0 20px;
}

@media (min-width: 768px) {
  .container-custom {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
}

/* --------------------------------------------
   Button Customizations
   -------------------------------------------- */

/* Primary Button (青背景・白?�??�?) */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    padding: var(--spacing-xs) var(--spacing-lg);
}

.btn-primary:hover {
  background-color: var(--color-text-white);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
}

/* Primary Outline Button (白背景・青文字�?青枠) */
.btn-outline-primary {
  background-color: var(--color-bg-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  padding: var(--spacing-xs) var(--spacing-lg);
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

/* ============================================
   HEADER STYLES
   ============================================ */
.site-header {
  position: relative;
  z-index: 1000;
}

/* --- Header Upper (PC) --- */
.header-upper {
  background-color: var(--color-bg-white);
  width: 100%;
}

.header-upper-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: var(--spacing-md);
}

.header-logo img {
  height: 50px;
  width: auto;
}

.header-upper-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

/* Sub Navigation (2?�?2 Grid) */
.header-sub-nav ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2px var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-sub-nav a {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  white-space: nowrap;
  font-weight: 500;
}

.header-sub-nav a:hover {
  color: var(--color-primary);
}

.header-sub-nav i {
  font-size: 10px;
  margin-right: 2px;
}

/* CTA Buttons in Header */
.header-cta {
  display: flex;
  gap: 0;
}

.btn-duty,
.btn-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
  min-width: 100px;
  min-height: 70px;
  transition: all var(--transition-fast);
}

.btn-duty {
  background-color: var(--color-accent);
  color: var(--color-text-white);
}

.btn-duty:hover {
  background-color: var(--color-bg-white);
  color: var(--color-accent);
}

.btn-member {
  background-color: var(--color-bg-white);
  color: var(--color-primary);
}

.btn-member:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.btn-icon {
  font-size: 24px;
  margin-bottom: 2px;
}

/* --- Header Navigation (PC) --- */
.header-nav {
  background-color: var(--color-bg-blue);
}

.main-nav {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav li {
  position: relative;
}

.main-nav a {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-white);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast);
  font-size: var(--font-size-xl);
}

.main-nav a:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-white);
}

.main-nav .has-submenu > a::after {
/*	content: "\25BC";*/
	font-size: 10px;
	margin-left: 6px;
}

.main-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: #fff;
	padding: 10px 0;
	list-style: none;
	box-shadow: 0 8px 20px rgba(0,0,0,.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: .3s ease;
	z-index: 1000;
}

.main-nav .sub-menu li a {
	display: block;
	padding: 8px 20px;
	white-space: nowrap;
    color: #0058a2;
	line-height: normal;
}

.main-nav .sub-menu li a:hover {
    color: #ffffff;
}

.main-nav .has-submenu:hover .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}








/* --- Mobile Header --- */
.header-mobile {
  background-color: var(--color-bg-white);
  padding: var(--spacing-sm);
  box-shadow: var(--shadow-sm);
}

.header-mobile-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-mobile .header-logo img {
  height: 40px;
}

/* Hamburger Button */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  gap: 6px;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  transition: all var(--transition-fast);
}

/* --- Mobile Menu (Offcanvas) --- */
.mobile-menu {
  width: 100% !important;
  max-width: 100%;
  background-color: transparent;
  border: none !important;
}

/* Tablet size: narrower menu */
@media (min-width: 768px) {
  .mobile-menu {
    width: 450px !important;
    max-width: 45%;
  }
}

.mobile-menu .offcanvas-header {
  background-color: var(--color-bg-white);
  padding: var(--spacing-sm) var(--spacing-md);
  justify-content: space-between;
}

.mobile-menu .offcanvas-body {
  background: linear-gradient(135deg, rgba(200, 230, 255, 0.9), rgba(220, 240, 255, 0.95));
  padding: 0;
}

.btn-close-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--color-text);
  cursor: pointer;
}

/* Mobile CTA */
.mobile-cta {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.mobile-cta .btn-duty,
.mobile-cta .btn-member {
  flex: 1;
  flex-direction: row;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  border-radius: var(--radius-pill);
  min-height: auto;
  line-height: 1;
}

.mobile-cta .btn-member {
  border: 2px solid var(--color-primary);
}

.mobile-cta .btn-icon {
  font-size: 18px;
  margin-bottom: 0;
}

/* Mobile Navigation */
.mobile-nav {
  padding: var(--spacing-sm) var(--spacing-md);
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav li {
  border-bottom: 1px solid rgba(0, 88, 162, 0.2);
}

.mobile-nav a {
  display: block;
  padding: var(--spacing-sm) 0;
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

/* Mobile Sub Navigation */
.mobile-sub-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  margin: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-white);
  border-radius: var(--radius-md);
}

.mobile-sub-nav a {
  display: block;
  padding: var(--spacing-xs);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
}

/* ============================================
   FOOTER STYLES
   ============================================ */
.site-footer {
  margin-top: auto;
}

.footer-main {
  background: linear-gradient(to right, rgba(40,185,235,0.4) 0%, var(--color-secondary) 50%);
  padding: var(--spacing-xl) 0 var(--spacing-lg);
  position: relative;
  overflow: hidden;
  min-height: 350px;
}

/* イラス?�? */
.footer-illustration {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 1;
}

.footer-illustration img {
  height: 89%;
  width: auto;
  display: block;
  opacity: 0.3;
}

.footer-content {
  position: relative;
  z-index: 2;
}

/* Logo */
.footer-brand-col {
  display: flex;
  align-items: flex-start;
}

.footer-logo img {
  height: 55px;
  width: auto;
}

/* Navigation Area */
.footer-nav-area {
  margin: 0;
}

.footer-nav-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-deep);
  margin: 0 0 var(--spacing-sm) 0;
}

.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav-list li {
  margin-bottom: 6px;
	line-height: normal;
}

.footer-nav-list a {
  color: var(--color-deep);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.footer-nav-list a:hover {
  color: var(--color-primary);
}

.footer-nav-simple {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav-simple li {
  margin-bottom: var(--spacing-sm);
}

.footer-nav-simple a {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.footer-nav-simple a:hover {
  text-decoration: underline;
}

/* CTA Buttons */
.footer-cta-col {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.footer-cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-deep);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.footer-cta-btn:hover {
  text-decoration: none;
  color: var(--color-primary);
}

.footer-cta-btn:hover .cta-icon {
  transform: translateX(3px) translateY(-3px);
}

.footer-cta-btn .cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform var(--transition-base); /* アニメーション用のトランジション追加 */
}

/* Footer Copyright */
.footer-copyright {
  background-color: var(--color-bg-blue);
  padding: var(--spacing-sm) 0;
  text-align: center;
}

.footer-copyright p {
  margin: 0;
  color: var(--color-text-white);
  font-family: var(--font-en);
  font-size: var(--font-size-sm);
}

/* ============================================
   RESPONSIVE STYLES - Bootstrap 5準拠
   ============================================ */

/* ブレークポイント対応表 - Bootstrap 5標�?
 * XL: 1200px以?�?
 * LG: 992px以?�?
 * MD: 768px以?�?
 * SM: 576px以?�?
 * XS: 576px未?�?
 */

/* ----------------------------------------
   XL以?�? (1199px以?�?) - 大型タブレ?�??�?�/小型PC
   ---------------------------------------- */
@media (max-width: 1366px) {
  .main-nav a {
	  font-size: var(--font-size-lg);
	}
}

/* ----------------------------------------
   LG以?�? (991px以?�?) - タブレ?�??�?�横向き
   ---------------------------------------- */
@media (max-width: 991px) {
  /* フッター - ロゴ左?�??�?�調整 */
  .footer-brand-col {
    padding-left: 30px;
  }
  
  /* フッター - CTA下部
置 */
置 */
  .footer-cta-col {
    margin-top: var(--spacing-lg);
    justify-content: center;
  }
  
  .footer-cta {
    flex-direction: row;
    gap: var(--spacing-lg);
  }
}

/* ----------------------------------------
   MD以?�? (767px以?�?) - タブレ?�??�?�縦/スマ�?
   ---------------------------------------- */
@media (max-width: 767px) {
  /* フォントサイズ調整 */
  :root {
    --font-size-h1: 24px;
    --font-size-h2: 20px;
    --font-size-h3: 18px;
    --spacing-xl: 40px;
    --spacing-xxl: 60px;
  }
  
  /* フッター */
  .footer-main {
    padding-top: var(--spacing-lg);
    min-height: auto;
  }
  
  .footer-illustration img {
    height: 180px;
  }
  
  .footer-brand-col {
    padding-left: 0;
    padding-top: 100px;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
  }
  
  .footer-nav-area {
    text-align: left;
  }
  
  .footer-cta-col {
    justify-content: flex-start;
  }
  
  .footer-cta {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}

/* ----------------------------------------
   SM以?�? (575px以?�?) - 小型スマ�?
   ---------------------------------------- */
@media (max-width: 575px) {
  /* モバイルCTA縦並び */
  .mobile-cta {
    flex-direction: column;
  }
  
  .mobile-cta .btn-duty,
  .mobile-cta .btn-member {
    justify-content: center;
  }
  
  /* フッターナビ縦並び */
  .footer-nav-area .col-lg-4 {
    margin-bottom: var(--spacing-md);
  }
  
  /* フッターCTA縦並び */
  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ============================================
   HERO SLIDER SECTION
   ============================================ */

   .hero-slider {
    position: relative;
    width: 100%;
    min-height: 850px; /* ?�?小高さを確?�? */
    padding: 60px 80px; /* 上下余白 */
    background-image: url('../images/check_bg.png');
    background-repeat: repeat;
    background-size: auto;
    overflow: visible;
  }
  
  /* 右上�?
飾イラス?�? */
  .hero-slider::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 550px;
    height: 550px;
    background-image: url(../images/hero_orn.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    pointer-events: none;
    z-index: 1;
  }
  
  /* Swiper Container */
  .hero-swiper {
    position: absolute;
    left: 5%;
    bottom: 5%;
    width: 80%;
    max-width: 1080px;
    aspect-ratio: 3 / 2;
    z-index: 2;
  }
  
  .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  /* Slider Image */
  .slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
  }
  
  /* 見�?しテキスト�?ース */
  .hero-text-box {
    position: absolute;
    top: 37%;
    right: 10%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 15px 35px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: left;
    z-index: 10;
    max-width: 600px;
  }
  
  .hero-title {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--color-primary);
    margin: 0;
  }
  
  .hero-title-highlight {
    font-size: 32px;
    display: block;
    margin-top: 8px;
  }
  
  /* 3人のイラス?�? */
  .hero-illustration {
    position: absolute;
    bottom: 30px;
    right: 4%;
    width: 100%;
    max-width: 400px;
    height: auto;
    z-index: 5;
  }
  
  /* Navigation Buttons (矢印) */
  .swiper-button-prev,
  .swiper-button-next {
    color: var(--color-primary);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: all var(--transition-base);
  }
  
  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
  }
  
  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
  }
  
  /* Pagination Dots */
  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ffffff;
    opacity: 0.5;
  }
  
  .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-primary);
  }
  
  /* ========================================
     Responsive Styles
     ======================================== */
  
  /* タブレ?�??�?� (991px以?�?) */
  @media (max-width: 991px) {
    .hero-slider {
      min-height: 500px;
      padding: 50px 40px;
    }
    
    .hero-slider::before {
      width: 200px;
      height: 200px;
    }
    
    .hero-swiper {
      width: 75%;
    }
    
    .hero-text-box {
      right: 8%;
      padding: 30px 40px;
      max-width: 400px;
    }
    
    .hero-title {
      font-size: 24px;
    }
    
    .hero-title-highlight {
      font-size: 28px;
    }
    
    .hero-illustration {
      bottom: 40px;
      right: 3%;
      max-width: 300px;
    }
  }
  
  /* スマ�? (767px以?�?) */
  @media (max-width: 767px) {
    .hero-slider {
      min-height: auto; /* スマ�?は縦積みなので自?�? */
      padding: 30px 20px;
    }
    
    .hero-slider::before {
      width: 150px;
      height: 150px;
    }
    
    .hero-swiper {
      width: 100%;
    }
    
    .hero-text-box {
      position: relative;
      top: auto;
      right: auto;
      transform: none;
      margin: 30px auto 0;
      background: rgba(255, 255, 255, 0.98);
      padding: 24px 30px;
      max-width: 90%;
    }
    
    .hero-title {
      font-size: 20px;
    }
    
    .hero-title-highlight {
      font-size: 24px;
    }
    
    .hero-illustration {
      position: absolute;
      bottom: auto;
      right: auto;
      margin: 20px auto 0;
      display: block;
      max-width: 200px;
    }
    
    .swiper-button-prev,
    .swiper-button-next {
      width: 40px;
      height: 40px;
    }
    
    .swiper-button-prev::after,
    .swiper-button-next::after {
      font-size: 16px;
    }
  }
  
  /* 小型スマ�? (430px以?�?) */
  @media (max-width: 430px) {
    .hero-slider {
      min-height: auto;
      padding: 20px 16px;
    }
    
    .hero-slider::before {
      width: 100px;
      height: 100px;
    }
    
    .hero-text-box {
      padding: 20px 24px;
    }
    
    .hero-title {
      font-size: 18px;
    }
    
    .hero-title-highlight {
      font-size: 20px;
    }
    
    .hero-illustration {
      max-width: 180px;
    }
  }

/* ============================================
   NEWS SECTION (?新?)
   ============================================ */

   .news-section {
    padding: 0 0 var(--spacing-xl) 0;
    background-color: white;
  }

  .rblue-bg{
    background-color: #f0f8ff;
    padding: 40px 0;
    margin-bottom: 100px;
  }
  
  /* Section Header */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-xl);
  }
  
  .section-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
  }
  
  .section-title-en {
    font-size: var(--font-size-h1);
    font-weight: 300;
    color: var(--color-primary);
    margin: 0;
    letter-spacing: 0.1em;
  }
  
  /* ============================================
     PICK UP Card (左側)
     ============================================ */
  
  .pickupbox:has(.pickup-card) {
    position: relative;
  }

  .pickup-card {
    background-color: var(--color-bg-white);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
  }
  
  /* 縦書きラベル */
  .pickup-labels {
    position: absolute;
    top: 0;
    left: -30px;
    z-index: 10;
    display: flex;
    flex-direction: column;
  }
  
  .pickup-label-main,
  .pickup-label-sub {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-en);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-sm) var(--spacing-xs);
    color: var(--color-text-white);
    letter-spacing: 0.1em;
  }
  
  .pickup-label-main {
    background-color: var(--color-primary);
    font-size: 18px;
    border-radius: 15px 0 0 0;
  }
  
  .pickup-label-sub {
    background-color: white;
    font-size: 18px;
    color: #005aa7;
    height: 100%;
  }
  
  /* イベント画?�? */
  .pickup-image {
    width: 100%;
    aspect-ratio: 1058 / 1497;
    overflow: hidden;
  }
  
  .pickup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
  }
  
  .pickup-card:hover .pickup-image img {
    transform: scale(1.05);
  }

  pickup-card.pickup-image-wrapper {
  position: relative;
}

.pickup-image {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  aspect-ratio: 1058 / 1497;
}

.pickup-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* チケ?�??�?�残数表示 */
.ticket-remaining {
  position: absolute;
  bottom: 0px;
  right: 0;
  background: linear-gradient(135deg, #FFD700 0%, #FFC700 100%);
  padding: 2px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-weight: 700;
  color: var(--accent-color);
  z-index: 10;
  border-radius: 10px 0 0 0;
}

.ticket-label {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0.05em;
  font-weight: bold;
}

.ticket-count {
  font-size: 28px;
/*  font-family: 'JetBrains Mono', monospace;*/
  font-weight: 700;
  margin: 0 2px;
}

.ticket-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--bs-black);
}
  
  /* イベン?�?
報 */
  .pickup-content {
    padding: 10px 25px;
    background-color: #edf7ff;
    z-index: 100;
    position: relative;
  }
  
  .pickup-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 0 5px 0;
    line-height: 1.5;
  }
  
  .pickup-meta {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    font-weight: bold;
  }
  
  .pickup-date,
  .pickup-time {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .pickup-meta i {
    font-size: 16px;
  }
  
  /* チケ?�??�?�残数 */
  .pickup-ticket {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: #fffa64;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    border-radius: 10px;
  }
  
  .ticket-label {
    color: var(--color-text);
    line-height: 1.8;
  }
  
  .ticket-count {
    color: var(--color-text);
  }
  .ticket-label-sub{
    background-color: #d64545;
    color: white;
    padding: 2px 5px;
    border-radius: 5px;
  }
  
  .ticket-count strong {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    margin: 0 15px 0 0px;
  }
  
  /* 詳しくみる�?タン */
  .pickup-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
    background-color: var(--color-primary);
    color: var(--color-text-white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-fast);
  }
  
  .pickup-detail-btn:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-white);
  }
  
  .pickup-detail-btn i {
    font-size: 14px;
  }
  
  /* ============================================
     News Archive Page - PICK UP Section
     ============================================ */
  
  .pickup-sec {
    margin-bottom: var(--spacing-xxl);
    background: linear-gradient(180deg, #0058a2 0%, #0058a2 15%, #ffffff 15%, #ffffff 100%);
    border: 3px solid #0058a2;
    border-radius: 30px;
    padding: var(--spacing-sm);
    position: relative;
  }
    
  .pickup-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .pickup-info-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-text-white);
    position: relative;
  }
  
  .pickup-info-card .pickup-labels {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
  }
  
  .pickup-info-card .pickup-title {
    color: var(--color-text-white);
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-md);
  }
  
  .pickup-info-card .pickup-meta {
    color: var(--color-text-white);
  }
  
  .pickup-info-card .pickup-meta i {
    color: var(--color-primary);
  }
  
  .pickup-info-card .pickup-date,
  .pickup-info-card .pickup-time {
    color: var(--color-text);
    font-size: var(--font-size-lg);
  }
  
  .pickup-info-card .pickup-ticket {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
  }
  
  .pickup-info-card .pickup-detail-btn {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    padding: var(--spacing-sm) var(--spacing-xl);
  }
  
  .news-list-sec {
    margin-top: var(--spacing-xxl);
  }
  
  /* ============================================
     News Single Page (投稿詳細ペ�?ジ?ジ)
     ============================================ */
  
  /* 投稿メタ?�?
報 */
  .post-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
  }
  
  .post-date {
    font-size: var(--font-size-sm);
    color: var(--color-text);
  }
  
  .post-category {
    font-size: var(--font-size-xs);
    color: #999999;
    background-color: #f2f2f2;
    padding: 2px 15px;
    border-radius: 90px;
    font-weight: var(--font-weight-medium);
    border-radius: 10px;
  }
  
  /* 投稿タイトル */
  .post-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
  }
  
  /* アイキャ?�??�?�画?�? */
  .post-thumbnail {
    margin-bottom: var(--spacing-lg);
  }
  
  .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* 投稿本?�? */
  .post-content {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text);
  }
  
  .post-content p {
    margin-bottom: var(--spacing-md);
  }
  
  .post-content h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    border-left: 6px solid var(--color-primary);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
    background-color: #f0f8ff;
    padding: var(--spacing-sm);
  }
  
  .post-content h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
    border-bottom: 3px solid #2c64e3;
  }
  
  .post-content h4 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    background-color: #e8f4ff;
    padding: var(--spacing-xs) var(--spacing-md);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
  }
  
  /* ?�?覧へ戻る�?タン */
  .post-back-btn-wrap {
    margin-top: var(--spacing-xxl);
    text-align: center;
  }
  
  .post-back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-xl);
    background-color: white;
    color: #4d4d4d;
    border: 2px solid var(--color-primary);
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-xl);
    transition: all var(--transition-fast);
  }
  
  .post-back-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
  }
  
  .post-back-btn i {
    font-size: 14px;
  }
  
  /* ============================================
     Member Page - Calendar Section
     ============================================ */
  
  .member-calendar-section {
    padding: var(--spacing-xxl) 0 0;
  }
  
  .member-calendar-info {
    padding-right: var(--spacing-sm);
  }
  
  .member-calendar-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: #4d4d4d;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-left: 4px solid var(--color-primary);
    background-color: #f0f8ff;
  }
  
  .member-calendar-text {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: var(--spacing-xxl);
  }
  
  .member-calendar-illustration {
    width: 80%;
  }
  
  .member-calendar-illustration img {
    width: 100%;
    max-width: 400px;
    height: auto;
  }
  
  .member-calendar-embed {
    background-color: white;
    border-radius: 8px;
  }
  
  .member-calendar-embed img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* ============================================
     Content Width Utilities
     ============================================ */
  
  /* 1000px
に制限する汎用クラス */
  .content-narrow {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* ============================================
     Contact Form Page
     ============================================ */
    form input,form textarea {
	    width: 100%;
	}
    .mwform-radio-field input,.mwform-checkbox-field input{
	    width: auto;
	}
  
  .contact-form-section {
    padding: var(--spacing-xxl) 0;
  }
  
  .contact-form-header {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
  }
  
  .contact-form-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
  }
  
  .contact-form-intro {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: var(--spacing-sm);
  }
  
  .contact-form-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
  }
  
  .contact-form-note a {
    color: var(--color-primary);
    text-decoration: underline;
  }
  
  /* Form Styles */
  .contact-form {
    padding: 0 var(--spacing-xxl);
  }
  
  .form-group {
    margin-bottom: var(--spacing-lg);
  }
  
  .form-label {
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
  }
  
  .form-required {
    display: inline-block;
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    background-color: #ffe5e5;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: var(--spacing-xs);
  }
  
  .form-control {
    width: 100%;
    padding: var(--spacing-sm);
    font-size: var(--font-size-base);
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: border-color var(--transition-fast);
  }
  
  .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
  }
  
  textarea.form-control {
    resize: vertical;
    min-height: 150px;
  }
  
  /* Radio Buttons */
  .form-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }
  
  .form-check {
    display: flex;
    align-items: center;
  }
  
  .form-check-input {
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-xs);
    cursor: pointer;
  }
  
  .form-check-label {
    font-size: var(--font-size-base);
    color: var(--color-text);
    cursor: pointer;
  }
  
  /* Privacy Checkbox */
  .form-check-privacy {
    justify-content: center;
    padding: var(--spacing-md);
  }
  
  .form-check-privacy .form-check-label a {
    color: var(--color-primary);
  }
  
  /* Submit Button */
  .form-submit {
    text-align: center;
    margin-top: var(--spacing-xxl);
  }
  
  .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xxl);
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: 50px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    box-shadow: var(--shadow-md);
}
  
  .btn-submit:hover {
    background-color: var(--color-primary-dark);
  }
  
  .btn-submit i {
    font-size: 20px;
  }
  
  .ar-pickup-labels {
    position: absolute;
    top: 3%;
    right: 4%;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--font-size-xl);
  }
  .ar-pickup-label-main{
    background-color: white;
    padding: 5px 15px;
    border-radius: 30px;
    margin-right: 10px;
    color: var(--color-primary);
  }
  .ar-pickup-label-sub{
    color: white;
    background-color: var(--color-primary);
    padding: 5px 15px;
    border-radius: 30px;
  }
  .pickup-sec .pickup-title {
      color: var(--color-primary);
      font-size: var(--font-size-h2);
  }
  .picup-btn{
    position: absolute;
    bottom: 8%;
    right: 0%;
    transform: translateX(-50%);
    width: auto;
  }
  
  /* ============================================
     News Lists (右側)
     ============================================ */
  
  .newslistbox{
    padding-left: 90px;
  }
  .news-list-block {
    margin-bottom: var(--spacing-lg);
  }
  
  /* リスト�??�??�?�ー */
  .news-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: var(--spacing-md);
  }
  
  .news-list-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: #2e315a;
    margin: 0;
  }
  
  .news-list-title i {
    font-size: 24px;
  }
  
  .news-list-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-lg);
    color: #4d4d4d;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
  }
  .news-list-link i {
	  color: var(--color-primary);
}
  
  .news-list-link:hover {
    color: var(--color-primary-dark);
  }
  
  .news-list-link i {
    font-size: 14px;
  }
  
  /* ニュースリス?�? */
  .news-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .news-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
    align-items: center;
  }
  
  .news-item:last-child {
    border-bottom: none;
  }
  
  .news-date {
    width: 61px;
    min-width: fit-content;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .news-category {
    width: 100px;
    min-width: content;
    flex-shrink: 0;
  }
  .news-category span{
    display: block;
    width: fit-content;
    font-size: var(--font-size-xs);
    border: 1px solid #999999;
    background-color: #f2f2f2;
    padding: 1px 8px;
    border-radius: 90px;
    white-space: nowrap;
	  width: 100%;
	  text-align: center;
    font-weight: bold;
  } 
  
  .news-title {
    width: calc(100% - 209px);
    min-width: content;
    font-size: var(--font-size-h3);
    color: var(--color-primary);
    text-decoration: none;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-fast);
    line-height: 1.5;
    font-weight: 500;
  }
  
  .news-title:hover {
    color: var(--color-primary-deep);
    text-decoration: none;
  }
  
  /* ============================================
     Responsive Styles
     ============================================ */
	@media (max-width: 1720px) {
		.rblue-bg{
			margin-bottom: 80px;
			padding: 20px 0
		}
		.news-section {
			padding: 0 0 var(--spacing-lg) 0;
		}
	}

	@media (max-width: 1024px) {
		.rblue-bg{
			margin-bottom: 60px;
		}
		.news-title{
			font-size: var(--font-size-lg);
		}
	}

       
  /* タブレ?�??�?� (991px以?�?) */
  @media (max-width: 991px) {
    .news-section {
      padding: var(--spacing-xl) 0;
    }
    
    .section-header {
      margin-bottom: var(--spacing-lg);
    }
    
    .pickup-card {
      margin-bottom: var(--spacing-xl);
    }
    
    .pickup-sec {
      margin-bottom: var(--spacing-xl);
      padding: var(--spacing-lg);
    }
    
    .pickup-info-card {
      margin-top: var(--spacing-md);
      padding-bottom: 100px;
    }
    .member-calendar-info {
	    padding-right: var(--spacing-md);
	  }
  }
  
  /* スマ�? (767px以?�?) */
  @media (max-width: 767px) {
    .news-section {
      padding: var(--spacing-lg) 0;
    }
    
    .section-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-xs);
      margin-bottom: var(--spacing-md);
    }
    
    .section-title,
    .section-title-en {
      font-size: 24px;
    }
    
    .pickup-content {
      padding: var(--spacing-sm);
    }
    
    .pickup-title {
      font-size: var(--font-size-base);
    }
    
    .pickup-sec {
      padding: var(--spacing-md);
    }
    
    .pickup-info-card {
      padding: var(--spacing-md);
      padding-bottom: 100px;
    }
    
    .pickup-info-card .pickup-title {
      font-size: var(--font-size-lg);
    }
    
    .pickup-info-card .pickup-detail-btn {
      bottom: var(--spacing-md);
      padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .news-list-title {
      font-size: var(--font-size-lg);
    }
    
    .news-list-title i {
      font-size: 20px;
    }
    
    .news-item {
      flex-wrap: wrap;
    }
    
    .news-date {
      min-width: 60px;
    }
    
    .news-title {
      flex-basis: 100%;
      white-space: normal;
      margin-top: 4px;
    }
  }
  
  /* 小型スマ�? (430px以?�?) */
  @media (max-width: 430px) {
    .news-list-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }
    
    .news-list-link {
      align-self: flex-end;
    }
    
    .pickup-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
  }

/* ============================================
   SEARCH SECTION (知?�??調べ?)
   ============================================ */

   .search-section {
    padding: var(--spacing-lg) 0;
    background-image: url('../images/check_bg.png');
    background-repeat: repeat;
    background-size: auto;
  }
  
  /* Section Title */
  .search-section-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    text-align: right;
    margin-bottom: var(--spacing-md);
  }
  
  /* Search Card */
  .search-card {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .search-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
  }
  
  /* Card Image */
  .search-card-image {
    width: 50%;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
  }
  
  .search-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
  }
  
  .search-card:hover .search-card-image img {
    transform: scale(1.05);
  }
  
  /* Card Content */
  .search-card-content {
    width: 50%;
    padding: var(--spacing-lg);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .search-card-title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
  }
  
  .search-card-text {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-md);
    flex: 1;
  }
  
  /* Card Button */
  .search-card-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    align-self: flex-start;
  }
  
  .search-card-btn:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-text-white);
    transform: translateX(4px);
  }
  
  .search-card-btn i {
    font-size: 20px;
  }
  
  /* ============================================
     Responsive Styles
     ============================================ */
  
  /* タブレ?�??�?� (991px以?�?) */
  @media (max-width: 991px) {
    .search-section {
      padding: var(--spacing-xl) 0;
    }
    
    .search-section-title {
      text-align: center;
      margin-bottom: var(--spacing-lg);
    }
    
    .search-card-content {
      width: 50%;
      padding: var(--spacing-md);
    }
    
    .search-card-image {
      width: 50%;
      height: 250px;
    }
  }
  
  /* スマ�? (767px以?�?) */
  @media (max-width: 767px) {
    .search-section {
      padding: var(--spacing-lg) 0;
    }
    
    .search-section-title {
      font-size: 24px;
      margin-bottom: var(--spacing-md);
    }
    
    .search-card {
      flex-direction: column;
    }
    
    .search-card-image {
      width: 100%;
      height: 180px;
    }
    
    .search-card-content {
      padding: var(--spacing-sm);
    }
    
    .search-card-title {
      font-size: var(--font-size-xl);
    }
    
    .search-card-text {
      font-size: var(--font-size-sm);
    }
  }
  
  /* 小型スマ�? (430px以?�?) */
  @media (max-width: 430px) {
    .search-card-image {
      height: 160px;
    }
    
    .search-card-btn {
      width: 100%;
      justify-content: center;
    }
    .search-card-content {
      width: 100%;
    }

  }

  /* ============================================
   ABOUT SECTION (上伊那薬剤師会につ?)
   ============================================ */

.about-section {
  position: relative;
  width: 100%;
  min-height: 600px;
  background-color: var(--color-bg-white);
  overflow: hidden;
}

.about-inner {
  position: relative;
  width: 100%;
  min-height: 800px;
  display: flex;
  align-items: center;
}

/* Left Content (Text) */
.about-content {
  position: relative;
  width: 60%; /* 画?�?40%なので、テキスト�?65%確?�? */
  padding: var(--spacing-xxl) 0;
  z-index: 2;
}

.about-title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--spacing-xs) 0;
}

.about-title-en {
  font-size: var(--font-size-h2);
  font-weight: 300;
  color: var(--color-primary);
  margin: 0 0 var(--spacing-lg) 0;
  letter-spacing: 0.1em;
}

.about-text {
  margin-bottom: var(--spacing-xl);
}

.about-text p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.about-text p:last-child {
  margin-bottom: 0;
}

/* Buttons */
.about-buttons {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}

.about-btn:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-white);
  transform: translateX(4px);
}

.about-btn i {
  font-size: 20px;
}

/* Right Image */
.about-image {
  position: absolute;
  top: 50%;
  right: 0;
  width: 40%;
  height: 85%;
  z-index: 1;
  transform: translateY(-50%);
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border-radius: 30px 0 0 30px;
}

/* ============================================
   Responsive Styles
   ============================================ */

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 991px) {
  .about-section {
    min-height: 500px;
  }
  
  .about-inner {
    min-height: 500px;
  }
  
  .about-content {
    width: 60%;
    padding: var(--spacing-xl) 0;
  }
  
  .about-image {
    width: 45%;
  }
  
  .about-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .about-btn {
    width: auto;
  }
}

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .about-section {
    min-height: auto;
  }
  
  .about-inner {
    min-height: auto;
    flex-direction: column;
  }
  
  .about-content {
    width: 100%;
    padding: var(--spacing-lg) 0;
  }
  
  .about-title {
    font-size: 24px;
  }
  
  .about-title-en {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }
  
  .about-text {
    margin-bottom: var(--spacing-lg);
  }
  
  .about-text p {
    font-size: var(--font-size-sm);
  }
  
  .about-image {
    position: relative;
    width: 100%;
    height: 300px;
    order: -1; /* 画像を上に
置 */
  }
  
  .about-image img {
    object-position: center center;
  }
  
  .about-buttons {
    gap: var(--spacing-sm);
  }
}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .about-image {
    height: 250px;
  }
  
  .about-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   RECRUIT & CONTACT SECTION (採用?・お問?わせ)
   ============================================ */

   .recruit-contact-section {
    display: flex;
    width: 100%;
  }
  
  /* 左側の採用
報エリア */
  .recruit-side {
    flex: 1;
    background-image: url('../images/rec_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
  }
  
  /* 右側のお問?�??�?�わせエリア */
  .contact-side {
    flex: 1;
    background-image: url('../images/info_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
  }
  
  /* ============================================
     採用?コン?�??�?�?? (左側)
     ============================================ */
  
  .recruit-content {
      max-width: 80%;
      width: 100%;
      text-align: center;
  }
  
  .recruit-content .section-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    line-height: 1.4;
  }
  
  .recruit-content .section-title-en {
    display: block;
    font-family: var(--font-en);
    font-size: var(--font-size-h2);
    font-weight: 300;
    color: var(--color-primary);
    letter-spacing: 0.1em;
    margin-top: var(--spacing-xs);
  }
  
  .recruit-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  
  .recruit-image img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* オーバ�?レイ - caption + ボタンのコン?�??�?� */
  .recruit-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
  }
  
  .recruit-caption span {
    background-color: white;
    padding: 5px 15px;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    line-height: 1.6;
    text-align: center;
    font-weight: 600;
  }
  
  /* ============================================
     お問?わせコン?�??�?�?? (右側)
     ============================================ */
  
  .contact-content {
    max-width: 80%;
    width: 100%;
    text-align: center;
  }
  
  .contact-content .section-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-white);
    margin-bottom: var(--spacing-lg);
    line-height: 1.4;
  }
  
  .contact-content .section-title-en {
    display: block;
    font-family: var(--font-en);
    font-size: var(--font-size-h2);
    font-weight: 300;
    color: var(--color-text-white);
    letter-spacing: 0.1em;
    margin-top: var(--spacing-xs);
  }
  
  .contact-box {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
  }
  
  .contact-tel-label {
    display: inline-block;
/*    background-color: #ffeb3b;*/
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
	line-height: 1.3;
    margin-bottom: 10px;
/*
    padding: 0px 13px;
    border: 2px solid var(--color-text);
*/
  }
  
  .contact-office {
    font-size: 1.5rem;
    color: var(--color-text);
    margin: 0;
    font-weight: var(--font-weight-bold);
  }
  
  .contact-tel {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
  }
  
  .contact-tel i {
    font-size: 1.75rem;
  }
  
  .contact-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-xl);
    background-color: var(--color-bg-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    margin: 0 auto;
  }
  
  .contact-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    transform: translateY(-2px);
  }
  
  .contact-btn i {
    font-size: 16px;
  }
  
  /* ============================================
     Responsive Styles
     ============================================ */
  
  /* タブレ?�??�?� (991px以?�?) */
  @media (max-width: 991px) {
    .recruit-contact-section {
      flex-direction: column;
      min-height: auto;
    }
    
    .recruit-side,
    .contact-side {
      padding: var(--spacing-xl) var(--spacing-md);
    }
  }
  
  /* スマ�? (767px以?�?) */
  @media (max-width: 767px) {
    .recruit-side,
    .contact-side {
      padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .recruit-content .section-title,
    .contact-content .section-title {
      font-size: 24px;
      margin-bottom: var(--spacing-md);
    }
    
    .recruit-content .section-title-en,
    .contact-content .section-title-en {
      font-size: var(--font-size-lg);
    }
    
    .recruit-overlay {
      gap: var(--spacing-sm);
      padding: var(--spacing-md);
    }
    
    .recruit-caption {
      font-size: var(--font-size-sm);
      padding: 8px 16px;
    }
    
    .contact-box {
      padding: var(--spacing-lg);
    }
    
    .contact-tel {
      font-size: 2rem;
      gap: var(--spacing-xs);
    }
    
    .contact-tel i {
      font-size: 1.5rem;
    }
  }
  
  /* 小型スマ�? (430px以?�?) */
  @media (max-width: 430px) {
    
    .btn-primary,
    .btn-outline-primary,
    .btn-outline-light {
      width: 100%;
      justify-content: center;
    }
    
    .contact-tel {
      font-size: 1.75rem;
    }
  }

  /* ============================================
   ABOUT PAGE STYLES
   ============================================ */

   .bc_sec{
    position: relative;
   }
   .page-title-illustration{
    position: absolute;
    bottom: 0;
    right: 20%;
   }
   .bc-section{
    padding: 5px 0 20px;
   }

/* ============================================
   Page Title Section (下層ペ�?ジ?ジ
?)
   ============================================ */
.page-title-section {
  position: relative;
  padding: 80px 19% 70px;
  overflow: hidden;
  background-image: linear-gradient(270deg, rgba(40, 185, 235, 0.4), rgba(245, 249, 255, 0.4));
}

.breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
}

.breadcrumb-item {
  color: var(--color-text-light);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: var(--color-text-light);
  padding: 0 2px;
}

.breadcrumb-item a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item a:hover {
  color: var(--color-primary);
}

.breadcrumb-item.active {
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.page-title-content {
  position: relative;
  z-index: 2;
}

.page-title {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-deep);
    margin: 0 0 var(--spacing-xs) 0;
}
.page-title .sub-title {
	font-size: var(--font-size-base);
}

.page-title-en {
  font-size: var(--font-size-h2);
  color: var(--color-primary);
  margin: 0;
	line-height: normal;
}

/* Page Title Illustration */
.page-title-illustration {
  position: absolute;
  right: 15%;
  bottom: -10%;
  width: 320px;
  height: auto;
  z-index: 1;
}

.page-title-illustration img {
  width: 86%;
  height: auto;
  display: block;
}

/* ============================================
   Content with Sidebar Layout
   ============================================ */
.content-with-sidebar {
  padding: var(--spacing-xl) 0;
}

/* Sidebar Navigation */
.sidebar-nav {
  position: sticky;
  top: var(--spacing-md);
  background-color: var(--color-bg-white);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg) 0;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin-bottom: var(--spacing-xs);
}

.sidebar-menu li:last-child {
  margin-bottom: 0;
}

.sidebar-link {
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--color-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
    font-weight: var(--font-weight-medium);
    border-radius: 130px;
    line-height: 1.3;
    font-size: 1.2rem;
}

.sidebar-link:hover {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.sidebar-link.active {
  background-color: var(--color-primary-light);
  border-left-color: transparent;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Main Content Article */
.content-article {
  padding: var(--spacing-lg);
}

.content-section {
  margin-bottom: var(--spacing-xl);
}

.content-section:last-child {
  margin-bottom: 0;
}

/* Content Headings */
.content-h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-deep);
    margin: 0 0 var(--spacing-md) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-primary-light);
    border-left: 7px solid var(--color-primary);
}

.content-h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-primary-deep);
}

/* Content Lists */
.content-list {
  margin: var(--spacing-md) 0 var(--spacing-lg) 0;
  padding-left: var(--spacing-lg);
}

.content-list li {
    line-height: var(--line-height-base);
    color: var(--color-text);
}

/* Organization Items */
.organization-item {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid #e6e6e6;
}

.organization-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.organization-title i {
  font-size: 15px;
  color: #0058a2;
}

.organization-item p {
  margin: 0;
}

.organization-note {
  font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--spacing-md);
}

/* Officer List Image */
.officer-list-image {
  margin: 0 0 0 50px;
  text-align: center;
}

/* Overview Table */
.overview-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0;
}

.overview-table th,
.overview-table td {
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--color-border);
  text-align: left;
}

.overview-table th {
  background-color: var(--color-bg-light);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  width: 200px;
}

.overview-table td {
  background-color: var(--color-bg-white);
  color: var(--color-text);
}

/* ============================================
   Responsive Styles
   ============================================ */

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 1100px) {
	.search-card-content {
	    padding: var(--spacing-md);
	}
}
@media (max-width: 991px) {
  .page-title-illustration {
    width: 250px;
    right: 30px;
  }
  
  .content-with-sidebar {
    padding: var(--spacing-xl) 0;
  }
  
  .sidebar-nav {
    position: static;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md) 0;
  }
  
  /* タブレ?�??�?�以下でボタンを横並びに */
  .sidebar-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 15px 10px;
    }
  
  .sidebar-menu li {
    margin-bottom: 0;
  }
  
  .sidebar-link {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid var(--color-primary);
    border-left: 2px solid var(--color-primary);
    border-radius: 50px;
    background-color: var(--color-bg-white);
    white-space: nowrap;
  }
  
  .sidebar-link:hover,
  .sidebar-link.active {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border-color: var(--color-primary);
  }
}


/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .page-title-section {
    padding: var(--spacing-md) 0 var(--spacing-sm);
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .page-title-en {
    font-size: var(--font-size-xl);
  }
  
  .page-title-illustration {
    width: 180px;
    right: 10px;
  }
  
  .content-with-sidebar {
    padding: var(--spacing-lg) 0;
  }
  
  .content-article {
    padding: var(--spacing-md);
  }
  
  .content-section {
    margin-bottom: var(--spacing-xl);
  }
  
  .content-h2 {
    font-size: var(--font-size-xl);
  }
  
  .content-h3 {
    font-size: var(--font-size-lg);
  }
  
  .overview-table th {
    width: 100px;
  }
  
  .overview-table th,
  .overview-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .page-title-illustration {
    width: 150px;
  }
  
  .sidebar-nav {
    padding: var(--spacing-sm) 0;
  }
  
  .sidebar-menu {
    gap: 13px 10px;
  }
  
  .sidebar-link {
    padding: 8px 16px;
    font-size: var(--font-size-sm);
  }
  
  .overview-table {
    font-size: var(--font-size-xs);
  }
  
  .overview-table th {
    width: 80px;
  }
  .content-h2 {
	    font-size: var(--font-size-lg);
	}
	.officer-list-image {
	  margin: 0px 50px 20px;
	}

}

/* ============================================
   Active State for Navigation
   ============================================ */
.main-nav a.active {
  background-color: var(--color-primary-dark);
}

.mobile-nav a.active {
  background-color: rgba(0, 88, 162, 0.1);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}
/* ============================================
   OFFICERS TABLE (役員表)
   ============================================ */
.officers-table-wrapper {
  margin: var(--spacing-lg) 0;
  overflow-x: auto;
}

.officers-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-bg-white);
  box-shadow: var(--shadow-md);
}

.officers-table thead {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.officers-table th {
  padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-bold);
    border: 1px solid var(--color-border);
    background-color: var(--color-primary-light);
}

.officers-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast);
}

.officers-table tbody tr:hover {
  background-color: var(--color-primary-light);
}

.officers-table td {
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--color-border);
  text-align: left;
}

.officers-table-position {
  background-color: var(--color-bg-light);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  width: 150px;
  vertical-align: middle;
}

.officers-table-name {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* Responsive Styles */
@media (max-width: 767px) {
  .officers-table th,
  .officers-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
  
  .officers-table-position {
    width: 100px;
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 430px) {
  .officers-table th,
  .officers-table td {
    padding: 6px 8px;
    font-size: var(--font-size-xs);
  }
  
  .officers-table-position {
    width: 80px;
  }
}
/* ============================================
   ENROLLMENT PAGE (
?�??ご�??ペ�?ジ?ジ)
   ============================================ */

/* 注釈テキス?�? */
.text-note {
    font-size: var(--font-size-md);
    color: var(--bs-black);
    margin-top: var(--spacing-xs);
}

.page-title-decoration {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.page-title-decoration img {
  width: 260px;
  height: auto;
  display: block;
}

/* ============================================
   
会手続きフロー
   ============================================ */
.procedure-flow {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
    border-radius: var(--radius-lg);
    justify-content: center;
}

.procedure-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: var(--spacing-xs);
  background-color: var(--color-bg-white);
  border: 1px solid #ccc;
  border-radius: var(--radius-md);
  min-width: 180px;
  text-align: center;
}

.procedure-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  color: var(--color-primary);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-en);
  border-bottom: 1px solid #ccc;
  width: 100%;
}

.procedure-content {
  flex: 1;
}

.procedure-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
}

.procedure-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  margin: 0;
}

.procedure-arrow {
  font-size: 32px;
  color: var(--color-primary);
}

/* ============================================
   会員種類リス?�??
   ============================================ */
.membership-types-list {
  margin: var(--spacing-md);
}

.membership-type-item {
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid #ccc;
}

.mti-last{
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: none;
}

.membership-type-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: #4d4d4d;
  margin: 0 0 var(--spacing-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.membership-type-title i {
  font-size: 15px;
  color: var(--color-primary);
}

.membership-type-item p {
  margin: 0;
  color: var(--color-text);
}

/* ============================================
   
会特
リス?�??
   ============================================ */
.benefits-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.benefits-list li {
  position: relative;
  padding-left: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.benefits-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #4d4d4d;
  font-weight: var(--font-weight-bold);
}

/* ============================================
   ?ウンロー?�??タン
   ============================================ */
.download-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0;
}

.download-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-primary-light);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.download-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.download-btn-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    font-size: var(--font-size-xl);
    color: #4d4d4d;
}

.download-btn-text i {
  font-size: 24px;
}

.download-btn:hover .download-btn-text{
	color: white;
}

.download-btn-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.download-btn-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: 16px;
  transition: background-color var(--transition-fast);
}

.download-btn:hover .download-btn-icon i {
  background-color: var(--color-text-white);
  color: var(--color-primary);
}

/* ============================================
   Responsive Styles
   ============================================ */

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 991px) {
  .procedure-flow {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .procedure-arrow {
    transform: rotate(90deg);
  }
  
  .procedure-step {
    width: 100%;
    min-width: auto;
  }
  .procedure-arrow {
	    position: relative;
	    top: 335px;
	}
}

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .procedure-flow {
    padding: var(--spacing-md);
  }
  
  .procedure-step {
    padding: var(--spacing-sm);
    min-width: auto;
  }
  
  .procedure-number {
    width: 100??;
    height: 32px;
    font-size: var(--font-size-lg);
  }
  
  .procedure-title {
    font-size: var(--font-size-sm);
  }
  
  .procedure-subtitle {
    font-size: var(--font-size-xs);
  }
  
  .download-btn {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    text-align: center;
  }
  
  .download-btn-text,
  .download-btn-icon {
    width: 100%;
    justify-content: center;
  }
  .procedure-arrow {
        top: 310px;
    }
}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .membership-type-item {
    padding: var(--spacing-sm);
  }
  
  .membership-type-title {
    font-size: var(--font-size-base);
  }
  
  .benefits-list li {
    font-size: var(--font-size-sm);
  }
  
  .download-btn-text {
    font-size: var(--font-size-sm);
  }
  
  .download-btn-text i {
    font-size: 20px;
  }
  .procedure-arrow {
        top: 120px;
    }
}
/* ============================================
   DISASTER PAGE (災害対?�??ージ)
   ============================================ */

/* 災害対策�?ージ専用?�?ウンロード�?タン */
.disaster-download-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: var(--spacing-xl) 0;
}

.disaster-download-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-primary-light);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.disaster-download-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.disaster-download-text {
  font-weight: 600;
  font-size: var(--font-size-xl);
  color: #4d4d4d;
}

.disaster-download-btn:hover .disaster-download-text {
  color: white;
}


.disaster-download-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: 20px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
	margin-left: var(--spacing-xs);
}

.disaster-download-btn:hover .disaster-download-icon {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary);
    background-color: white;
    border: 1px solid var(--color-primary);
}

/* サイドバー
改行対?�? */
.sidebar-link br {
  display: inline;
}

/* ============================================
   Responsive Styles
   ============================================ */

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .disaster-download-btn {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    text-align: center;
  }
  
  .disaster-download-text {
    font-size: var(--font-size-sm);
  }
  
  .disaster-download-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .disaster-download-btn {
    padding: var(--spacing-sm);
  }
  
  .disaster-download-text {
    font-size: var(--font-size-xs);
  }
  
  .disaster-download-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}
/* ============================================
   INSPECTION CENTER PAGE (検査センターペ�?ジ?ジ)
   ============================================ */

/* イメージヒ�?ローセクション - PC */
.inspection-hero-section {
  width: 100%;
}

.inspection-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 100px;
  background-image: url(../images/kensa01.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: right;
  padding-top: 31%;
	margin-bottom: var(--spacing-lg);
	border-radius: 20px;
}

.inspection-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.inspection-hero-text {
  position: absolute;
  top: 70%;
  left: 1%;
  transform: translateY(-50%);
  color: var(--color-text-white);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  max-width: 600px;
}

.inspection-hero-text p {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
  color: var(--color-primary-deep);
}

/* イメージヒ�?ローセクション - スマ�? */
.inspection-hero-mobile {
  position: relative;
  width: 100%;
  margin-bottom: var(--spacing-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.inspection-hero-mobile img {
  width: 100%;
  height: auto;
  display: block;
}



/* 業務�?
リス?�? */
.inspection-service-list {
  margin: var(--spacing-sm) 0 var(--spacing-lg);
  padding-left: var(--spacing-sm);
}

.inspection-service-list li {
    margin-bottom: 0;
    line-height: var(--line-height-base);
    color: var(--color-text);
}

/* 事業
容リス?�? */
.inspection-qualification-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-md) 0;
}

.inspection-qualification-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.inspection-qualification-list li:last-child {
  border-bottom: none;
}

.inspection-qualification-list i {
  color: var(--color-primary);
  font-size: 12px;
  margin-top: 6px;
  flex-shrink: 0;
}

/* 有�??�?�
リス?�? */
.inspection-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-xs);
  margin: var(--spacing-md) 0;
}

.staff-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.staff-badge i {
  color: var(--color-primary);
  font-size: 12px;
  flex-shrink: 0;
}

/* 検査
目カー?�? */
.inspection-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-md) 0;
}

.inspection-card {
  background-color: var(--color-bg-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.inspection-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: var(--color-primary);
}

.inspection-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.inspection-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inspection-card-content {
  padding: var(--spacing-sm);
}

.inspection-card-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
  padding: 7px 20px;
}

.inspection-card-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.inspection-card-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  margin: 0;
	line-height: 1.5;
}

.inspection-card-btn i {
  font-size: 24px;
  flex-shrink: 0;
}

.contact-tel {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

/* 検査依頼の連絡方?�? */
.inspection-contact-methods {
  display: flex;
  gap: var(--spacing-sm);
  margin: 0;
}

.inspection-contact-phone,
.inspection-contact-web {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
  border-left: 10px solid var(--color-primary);
  box-shadow: var(--shadow-md);
	flex: 0 0 auto;
}

.inspection-contact-phone {
  color: var(--color-text);
}

.inspection-contact-phone i {
  font-size: 32px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.inspection-contact-phone div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.inspection-contact-phone .contact-label {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.inspection-contact-phone .contact-hours {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
	line-height: normal;
}

.inspection-contact-web {
    justify-content: space-between;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-h2);
    box-shadow: var(--shadow-md);
}

.inspection-contact-web span{
  color: #333333;
  font-weight: 600;
}

.inspection-contact-web i {
  flex-shrink: 0;
  color: white;
}

.inspection-contact-phone:hover,
.inspection-contact-web:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* フォームスタイル */
.inspection-form {
  margin: var(--spacing-xl) 0 0;
}

.form-group {
  margin-bottom: var(--spacing-sm);
}

.form-group label {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

.required {
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  margin-left: var(--spacing-xs);
}

.form-control {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
    background-color: var(--bs-gray-100);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
}

textarea.form-control {
  resize: vertical;
}

/* ラジオボタングルー?�? */
.inspection-radio-group {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}

.inspection-radio {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}

.inspection-radio input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* チェ?�??�?�ボックス */
.inspection-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}

.inspection-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* フォーム送信ボタン */
.form-submit {
    text-align: center;
    margin-top: var(--spacing-md);
    width: 50%;
    margin: 50px auto 0;
}

.inspection-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-xxl);
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.inspection-submit-btn i {
  font-size: 24px;
}

.inspection-submit-btn:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 検査センター?�?在地セクション */
.inspection-info-section {
  display: flex;
  width: 100%;
  min-height: 500px;
}

/* 左側の画像エリア */
.inspection-info-left {
    flex: 1;
    min-height: 560px;
/*
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-image: url(../images/inayak03.png);
    background-position: center center;
*/
}

/* iframe表示用??�検査センター用?? */
.flame-control .inspection-info-left {
  background-image: none;
  padding: 0;
}

.flame-control .inspection-info-left iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.inspection-info-right {
  flex: 1;
  background-image: url('../images/check_bg.png');
  background-size: auto;
  background-repeat: repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxl) 0;
}

.inspection-info-content {
  max-width: 500px;
  width: 100%;
  padding: 0 30px;
}

.inspection-info-title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-md) 0;
}

.inspection-info-details {
  color: var(--color-text);
}

.inspection-address,
.inspection-tel,
.inspection-fax {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
	line-height: 1.6;
}

.inspection-hours,
.inspection-closed {
  margin-top: var(--spacing-sm);
}

.inspection-hours p,
.inspection-closed p {
  margin: 0 0 0 0;
  font-size: var(--font-size-lg);
	line-height: 1.6;
}
.inspection-contact-methods .contact-tel {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: 0;
}
/* 画像コン?�??�?� */
.inspection-image-container {
  max-width: 500px;
  width: 100%;
}

.ina-building-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Google Map */
.inspection-map {
  width: 100%;
  height: 450px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.inspection-map iframe {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================
   Responsive Styles
   ============================================ */

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 991px) {
  .inspection-info-section {
    flex-direction: column;
    min-height: auto;
  }
  
  .inspection-info-left,
  .inspection-info-right {
    min-height: 450px;
    padding: var(--spacing-xl) var(--spacing-md);
  }
  
  /* iframe表示用??�タブレ?�??�?�?? */
  .flame-control .inspection-info-left {
    padding: 0;
  }
  
  .flame-control .inspection-info-left iframe {
    min-height: 450px;
  }
  
  .inspection-contact-methods {
    flex-direction: column;
  }
  
  .inspection-staff-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .inspection-info-bg-left,
  .inspection-info-bg-right {
    width: 100%;
  }
  
  .inspection-info-bg-right {
    top: 50%;
  }
}

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .inspection-info-left,
  .inspection-info-right {
    min-height: 400px;
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  /* iframe表示用??�スマ�??? */
  .flame-control .inspection-info-left {
    padding: 0;
  }
  
  .flame-control .inspection-info-left iframe {
    min-height: 400px;
  }
  
  .inspection-info-title {
    font-size: 24px;
    margin-bottom: var(--spacing-md);
  }
  
  .inspection-map {
    height: 350px;
  }
  
  .inspection-hero-text p {
    font-size: var(--font-size-base);
  }
  
  .inspection-hero-mobile .inspection-hero-text {
    padding: var(--spacing-sm);
  }
  
  .inspection-hero-mobile .inspection-hero-text p {
    font-size: var(--font-size-sm);
  }
  
  .inspection-contact-phone,
  .inspection-contact-web {
    flex-direction: row;
    text-align: center;
  }
  
  .inspection-radio-group {
    flex-direction: column;
  }
  
  .inspection-submit-btn {
    width: 100%;
    font-size: var(--font-size-base);
  }
  
  .inspection-staff-grid {
    grid-template-columns: 1fr;
  }
  
  .inspection-info-content {
    padding: var(--spacing-md);
  }
  
  .inspection-map {
    min-height: 300px;
  }
  
  .inspection-map iframe {
    min-height: 300px;
  }
  .inspection-cards {
    grid-template-columns: 1fr;
  }
  .inspection-form {
	  margin: var(--spacing-lg) 0 0;
	}


}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .inspection-hero-text {
    left: 20px;
    padding: var(--spacing-md);
    max-width: calc(100% - 40px);
  }
  
  .inspection-hero-text p {
    font-size: var(--font-size-sm);
  }
  
  .inspection-card-content {
    padding: var(--spacing-sm);
  }
  
  .inspection-info-content {
    padding: var(--spacing-sm);
  }
  
  .inspection-info-title {
    font-size: var(--font-size-h3);
  }
  .inspection-staff-grid {
    gap: var(--spacing-xs);
  }
  .form-submit {
	    width: 100%;
	}
}

/* ============================================
   WATER PAGE (飲料水ペ�?ジ?ジ) STYLES
   ============================================ */

.reception-hours .content-h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-primary);
}

/* --------------------------------------------
   検査?カー?�?? (disaster-download-btnスタイル準拠)
   -------------------------------------------- */

.water-test-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* リンク付きカー?�? */
.water-test-card-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-primary-light);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.water-test-card-text {
  font-weight: 600;
  font-size: var(--font-size-xl);
  color: var(--color-primary-deep);
}

.water-test-card-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.water-test-card-btn:hover .water-test-card-text{
	color: white;
}


.water-test-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: 20px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.water-test-card-btn:hover .water-test-card-icon {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    color: var(--color-primary);
    background-color: white;
    border: 1px solid var(--color-primary);
}

/* 静的カード（リンクなし�? */
.water-test-card-static {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-primary-light);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary-deep);
}


/* --------------------------------------------
   受付時? (Reception Hours)
   -------------------------------------------- */
.reception-hours {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  background-color: var(--color-bg-light);
  border-radius: var(--radius-md);
}

.hours-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.hours-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.hours-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  min-width: 200px;
}

.hours-time {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.hours-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  flex-basis: 100%;
  padding-left: calc(200px + var(--spacing-md));
}

/* --------------------------------------------
   ご依頼の流れ (Request Flow)
   -------------------------------------------- */
.request-flow {
  margin: var(--spacing-xl) 0;
}

.flow-steps {
  margin-top: var(--spacing-lg);
}

.flow-step {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  position: relative;
  padding-left: var(--spacing-md);
}

/* ス?�??�?�プ間の接続�? */
.flow-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--spacing-md) + 20px); /* 番号の中?�??�?�置 */
  top: 50px;
  width: 2px;
  height: calc(100% - 20px);
  background: linear-gradient(to bottom, 
    var(--color-primary) 0%, 
    var(--color-primary) 50%, 
    transparent 100%);
}

.step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-md);
  z-index: 1;
}

.step-content {
  flex: 1;
  padding-top: 4px;
}

.step-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
}

.step-description {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.8;
  margin: 0;
}

/* ============================================
   Responsive Styles
   ============================================ */

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 991px) {
  .hours-label {
    min-width: 150px;
  }
  
  .hours-note {
    padding-left: calc(150px + var(--spacing-md));
  }
}

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .water-test-card-btn {
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    text-align: center;
  }
  
  .water-test-card-text {
    font-size: var(--font-size-base);
  }
  
  .water-test-card-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .water-test-card-static {
    padding: var(--spacing-md);
    text-align: center;
  }
  
  .water-test-card-static .water-test-card-text {
    font-size: var(--font-size-base);
  }
  
  .reception-hours {
    padding: var(--spacing-md);
  }
  
  .hours-item {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .hours-label {
    min-width: auto;
  }
  
  .hours-note {
    padding-left: 0;
  }
  
  .flow-step {
    padding-left: 0;
  }
  
  .flow-step:not(:last-child)::before {
    left: 20px;
  }
  
  .step-number {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-lg);
  }
  
  .step-title {
    font-size: var(--font-size-base);
  }
  
  .step-description {
    font-size: var(--font-size-sm);
  }
}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .water-test-card-btn {
    padding: var(--spacing-sm);
  }
  
  .water-test-card-text {
    font-size: var(--font-size-sm);
  }
  
  .water-test-card-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .water-test-card-static {
    padding: var(--spacing-sm);
  }
  
  .water-test-card-static .water-test-card-text {
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   LINKS PAGE (関連リンクペ�?ジ?ジ) STYLES
   ============================================ */

/* リンクリス?�? */
.links-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* 個別リンク
目 */
.link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--color-bg-white);
    color: var(--color-text);
    text-decoration: none;
    transition: all var(--transition-fast);
    border-bottom: 2px solid var(--bs-border-color);
}

.link-item:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateX(4px);
}

.link-text {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xl);
}

.link-item i {
  font-size: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.link-item:hover i {
  transform: translateX(4px);
}

/* ============================================
   Responsive Styles
   ============================================ */

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .link-item {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .link-text {
    font-size: var(--font-size-sm);
  }
  
  .link-item i {
    font-size: 18px;
  }
}

/* ============================================
   PHARMACY PAGE (保険薬?ペ�?ジ?ジ) STYLES
   ============================================ */

/* --------------------------------------------
   フィルターボタン
通スタイル
   -------------------------------------------- */
.pharmacy-name-filter,
.pharmacy-city-filter,
.pharmacy-homecare-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-lg);
}

.filter-btn {
  padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--color-bg-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    min-width: 60px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-h3)
}
.filter-btn:hover {
  background-color: #f0f8ff;
    color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.filter-btn.active {
	background: #edf7ff;
	box-shadow: none;
    color: #0058a2;
}


/* --------------------------------------------
   地図表示
   -------------------------------------------- */
.pharmacy-map {
	margin: var(--spacing-md) 0 var(--spacing-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.pharmacy-map iframe {
  display: block;
  width: 100%;
  height: 450px;
}

/* --------------------------------------------
   薬?カー?�??覧
   -------------------------------------------- */
.pharmacy-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* 薬?�?カー?�? */
.pharmacy-card {
    position: relative;
    background-color: var(--color-bg-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.pharmacy-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* カード�??�??�?�ー */
.pharmacy-card-header {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
}

.pharmacy-name {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
  padding-right: 15px;
  border-left: 6px solid var(--color-primary);
  padding-left: 15px;
}

.pharmacy-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.pharmacy-badge,.pharmacy-badge-kit {
  display: inline-block;
    padding: 1px 8px;
/*    background-color: var(--color-primary-light);*/
    color: var(--color-TEXT);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border: 1px solid #212529;
}


/* カード�??�??�?� */
.pharmacy-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.pharmacy-info-row {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
}

.pharmacy-info-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-xs);
  width: 50%;
}

.info-label {
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    flex-shrink: 0;
    background-color: #edf7ff;
    padding: 0px 15px;
    border-radius: 5px;
	width: 96px;
	text-align: center;
}

.info-value {
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    text-align: left;
    flex: 1;
}

/* 詳細ボタン??�右?�?
置?? */
.pharmacy-detail-btn {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 50%;
  font-size: 20px;
  text-decoration: none;
  transition: all var(--transition-fast);
  z-index: 1;
}

.pharmacy-detail-btn:hover {
    background-color: white;
    transform: scale(1.1);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-primary);
}

/* --------------------------------------------
   ペ�?ジ?ジ?�??ション
   -------------------------------------------- */
.pharmacy-pagination {
  margin-top: var(--spacing-xxl);
}

.pharmacy-pagination .pagination {
  gap: var(--spacing-xs);
}

.pharmacy-pagination .page-item .page-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}

.pharmacy-pagination .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
}

.pharmacy-pagination .page-item .page-link:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.pharmacy-pagination .page-item .page-link.active {
	background: #0058a2;
	color: #fff;
}



/* ============================================
   Responsive Styles
   ============================================ */

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 991px) {
  .pharmacy-info-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .pharmacy-map iframe {
    height: 350px;
  }
}

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .filter-btn {
    min-width: 50px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
  
  .pharmacy-map iframe {
    height: 300px;
  }
  
  .pharmacy-card {
    padding: var(--spacing-md);
  }
  
  .pharmacy-name {
    font-size: var(--font-size-xl);
  }
  
  .pharmacy-info-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
  
  .pharmacy-card-body {
    gap: var(--spacing-sm);
  }
  
  .info-label {
    font-size: var(--font-size-sm);
  }
  
  .info-value {
    font-size: var(--font-size-sm);
  }
  
  .pharmacy-detail-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    top: var(--spacing-md);
    right: var(--spacing-md);
  }
  
  .pharmacy-pagination .page-item .page-link {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }
  .pharmacy-card-header {
	    margin-bottom: var(--spacing-sm);
	    padding-bottom: var(--spacing-sm);
	}
}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .pharmacy-name-filter,
  .pharmacy-city-filter {
    gap: 10px;
  }
  
  .filter-btn {
        min-width: 75px;
        font-size: var(--font-size-lg);
        font-weight: 500;
    }
  
  .pharmacy-card {
    padding: var(--spacing-sm);
  }
  
  .pharmacy-name {
    font-size: var(--font-size-base);
  }
  
  .pharmacy-badge {
    font-size: 10px;
    padding: 2px 8px;
  }
  .pharmacy-info-item {
	  width: 100%;
	}
	.info-label{
		min-width: 90px;
		text-align: center;
	}
	.pharmacy-card-body{
		gap:4px;
	}
}

/* ============================================
   PHARMACY DETAIL PAGE (薬?詳細ペ�?ジ?ジ) STYLES
   ============================================ */

   .listwrap{
    padding: var(--spacing-xl);
    border-radius: 30px;
    background-color: #f0f8ff;
   }

   .listwrap .news-list-block {
      margin-bottom: 0;
  }

/* --------------------------------------------
   薬?詳細ヘッ?�?ー?ー
   -------------------------------------------- */
.pharmacy-detail-header {
  margin-bottom: var(--spacing-xl);
}

.pharmacy-title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.pharmacy-detail-title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 7px solid var(--color-primary);
}

.pharmacy-detail-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.pharmacy-detail-header .pharmacy-badge,
.pharmacy-detail-header .pharmacy-badge-kit {
	background-color: #edf7ff;
	border: none;
}

.pharmacy-detail-header .pharmacy-detail-date {
	margin-left: auto;
    line-height: 1.2;
	text-align: right;
}
.pharmacy-detail-header .pharmacy-date {
    font-size: var(--font-size-sm);
	opacity: 0.8;
}

.pharmacy-detail-tags {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.pharmacy-tags-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.pharmacy-tag {
    display: inline-block;
    padding: 2px 6px;
    color: var(--color-text);
    border: 1px solid var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
	line-height: 1.5;
    border-radius: var(--radius-sm);
}

.pharmacy-tag-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pharmacy-tag-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.bi-capsule{
	color: var(--color-primary);
}

/* --------------------------------------------
   セクションタイトル?シンプルスタイル??
   -------------------------------------------- */
.pharmacy-section-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0 0 var(--spacing-md) 0;
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-primary);
}

/* --------------------------------------------
   基本???ブル
   -------------------------------------------- */
.pharmacy-info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pharmacy-info-table th, .pharmacy-info-table td {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
	line-height: 1.5;
}

.pharmacy-info-table th {
  background-color: var(--color-bg-light);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  width: 200px;
}

.pharmacy-info-table td {
  background-color: var(--color-bg-white);
  color: var(--color-text);
  line-height: 1.8;
  font-weight: var(--font-weight-medium);
}

/* --------------------------------------------
   アコー?�??�?�オン?オン
   -------------------------------------------- */
.pharmacy-accordion {
  margin-bottom: var(--spacing-md);
}

.pharmacy-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-primary-light);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.pharmacy-accordion-btn:hover {
  background-color: var(--color-primary);
}

.pharmacy-accordion-btn:hover .pharmacy-accordion-title {
  color: var(--color-text-white);
}

.pharmacy-accordion-btn:hover .pharmacy-accordion-icon {
  color: var(--color-text-white);
}

.pharmacy-accordion-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
  transition: color var(--transition-fast);
}

.pharmacy-accordion-icon {
  font-size: 24px;
  color: var(--color-primary);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.pharmacy-accordion-btn[aria-expanded="true"] .pharmacy-accordion-icon {
  transform: rotate(180deg);
}

.pharmacy-accordion-content {
  padding: var(--spacing-lg);
  background-color: var(--color-bg-white);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.pharmacy-accordion-content .pharmacy-table-notes {
	background: rgba(232, 90, 90, 0.1);
	padding: var(--spacing-sm) var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	border-radius: 6px;
}



/* --------------------------------------------
   ??ブルキャプション
   -------------------------------------------- */
.pharmacy-table-caption {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--spacing-sm) 0;
}

/* --------------------------------------------
   スケジュール??ブル?訪問時間帯??
   -------------------------------------------- */
.pharmacy-schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-width: 600px;
}

/* ?�??ブル横スクロール対?�? */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--spacing-md);
}

.pharmacy-schedule-table th, .pharmacy-schedule-table td {
    padding: var(--spacing-xs);
    border: 1px solid var(--color-border);
    text-align: center;
    font-size: var(--font-size-sm);
}

.pharmacy-schedule-table thead th {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  font-weight: var(--font-weight-bold);
}

.pharmacy-schedule-table tbody th {
  background-color: var(--color-bg-light);
  font-weight: var(--font-weight-medium);
  text-align: left;
}

.pharmacy-schedule-table tbody td {
    background-color: var(--color-bg-white);
    color: var(--color-text);
    font-size: 1.2rem;
}

/* --------------------------------------------
   サポ�??�??トテーブル?取扱??対?�??可否??
   -------------------------------------------- */
.pharmacy-support-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pharmacy-support-table th,
.pharmacy-support-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  text-align: left;
}

.pharmacy-support-table th {
  background-color: var(--color-bg-light);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  width: 70%;
}

.pharmacy-support-table td {
  background-color: var(--color-bg-white);
  color: var(--color-text);
  text-align: center;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  width: 30%;
}

/* ============================================
   Responsive Styles
   ============================================ */

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 991px) {
  .pharmacy-info-table th {
    width: 120px;
  }
  
  .pharmacy-detail-title {
    font-size: var(--font-size-h2);
  }
  
  .pharmacy-section-title {
    font-size: var(--font-size-xl);
  }
}

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .pharmacy-detail-header {
    margin-bottom: var(--spacing-lg);
  }
  
  .pharmacy-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .pharmacy-detail-title {
    font-size: var(--font-size-xl);
  }
  
  .pharmacy-section-title {
    font-size: var(--font-size-lg);
  }
  
  .pharmacy-tag-img {
    width: 14px;
    height: 14px;
  }
  
  .pharmacy-info-table,
  .pharmacy-schedule-table,
  .pharmacy-support-table {
    font-size: var(--font-size-sm);
  }
  
  .pharmacy-info-table th {
    width: 100px;
  }
  
  .pharmacy-info-table th,
  .pharmacy-info-table td {
    padding: var(--spacing-sm);
  }
  
  .pharmacy-accordion-btn {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .pharmacy-accordion-title {
    font-size: var(--font-size-lg);
  }
  
  .pharmacy-accordion-icon {
    font-size: 20px;
  }
  
  .pharmacy-accordion-content {
    padding: var(--spacing-md);
  }
  
  .pharmacy-schedule-table th,
  .pharmacy-schedule-table td {
    padding: var(--spacing-xs);
    font-size: var(--font-size-xs);
  }
  
  .pharmacy-support-table th {
    width: 60%;
  }
  
  .pharmacy-support-table td {
    width: 40%;
  }
}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .pharmacy-detail-title {
    font-size: var(--font-size-lg);
  }
  
  .pharmacy-section-title {
    font-size: var(--font-size-base);
  }
  
  .pharmacy-tag {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
  }
  
  .pharmacy-tag-img {
    width: 12px;
    height: 12px;
  }
  
  .pharmacy-info-table th {
    width: 80px;
    font-size: var(--font-size-xs);
  }
  
  .pharmacy-info-table th,
  .pharmacy-info-table td {
    padding: var(--spacing-xs);
  }
  
  .pharmacy-table-caption {
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   INA PHARMACY PAGE (会営?薬?ペ�?ジ?ジ) STYLES
   ============================================ */

/* --------------------------------------------
   メイン画?
   -------------------------------------------- */
.ina-main-image {
  margin: var(--spacing-lg) 0 var(--spacing-xxl) 0;
}

.ina-pharmacy-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------
   薬?からのお知らせ
   -------------------------------------------- */
.ina-news-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0;
}

.ina-news-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.ina-news-item:last-child {
  border-bottom: none;
}

.ina-news-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: var(--font-weight-medium);
  min-width: 70px;
}

.ina-news-cat {
  font-size: var(--font-size-xs);
  color: var(--color-text-white);
  background-color: var(--color-primary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  min-width: 80px;
  text-align: center;
}

.ina-news-link {
  font-size: var(--font-size-base);
  color: var(--color-text);
  text-decoration: none;
  flex: 1;
  transition: color var(--transition-fast);
}

.ina-news-link:hover {
  color: var(--color-primary);
}

.ina-news-more-wrap {
  margin-top: var(--spacing-md);
  text-align: right;
}

.ina-news-more {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: gap var(--transition-fast);
}

.ina-news-more:hover {
  gap: var(--spacing-sm);
}

/* --------------------------------------------
   マイナンバ�?カー?�??カードセクション
   -------------------------------------------- */
.ina-mynumber-content {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--spacing-xl);
  align-items: start;
  margin: var(--spacing-lg) 0 var(--spacing-xl) 0;
}

.ina-mynumber-text p {
  margin-bottom: var(--spacing-md);
}

.ina-mynumber-image {
  width: 300px;
}

.ina-mynumber-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------
   認定バ?
   -------------------------------------------- */
.ina-certification-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-top: var(--spacing-xl);
}

.ina-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.ina-cert-badge i {
  font-size: 20px;
}

.ina-cert-badge-primary {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border: 2px solid var(--color-primary);
}

.ina-cert-badge-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.ina-cert-badge-secondary {
  background-color: var(--color-bg-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.ina-cert-badge-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------
   薬??セクション??nspection.html?�??ス??
   -------------------------------------------- */
.ina-info-bg-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.ina-building-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   Responsive Styles
   ============================================ */

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 991px) {
  .ina-mynumber-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .ina-mynumber-image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .ina-main-image {
    margin: var(--spacing-md) 0 var(--spacing-lg) 0;
  }
  
  .ina-news-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
  
  .ina-news-date {
    font-size: var(--font-size-xs);
  }
  
  .ina-news-link {
    font-size: var(--font-size-sm);
  }
  
  .ina-certification-badges {
    flex-direction: column;
    width: 100%;
  }
  
  .ina-cert-badge {
    width: 100%;
    justify-content: center;
  }
}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .ina-cert-badge {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);
  }
  
  .ina-cert-badge i {
    font-size: 18px;
  }
}
/* ============================================
   ASSOCIATION PAGE (会営?薬?ペ�?ジ?ジ) STYLES
   ============================================ */
.associetion-hero-section {
    width: 100%;
}


/* 会営薬?�?ペ�?ジ用ヒ�?ロー */
.associetion-hero-section .associetion-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 100px;
    background-image: url(../images/recruit01.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: right;
    padding-top: 31%;
	border-radius: 20px;
}

/* 会員ペ�?ジ用ヒ�?ロー */
.associetion-hero.member-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 100px;
    background-image: url(../images/menber01.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: right;
    padding-top: 31%;
	border-radius: 20px;
}




/* --------------------------------------------
   メインビジュアル
   -------------------------------------------- */
.association-main-visual {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-bg-white);
}

.association-main-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------
   当薬?につ?セクション
   -------------------------------------------- */
.association-about-section {
  padding: var(--spacing-xxl) var(--spacing-xxl);
}

.association-section-header {
  text-align: left;
  margin-bottom: var(--spacing-md);
}

.association-section-title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--spacing-xs) 0;
}

.association-section-title-en {
  font-size: var(--font-size-h2);
  color: var(--color-primary);
  margin: 0;
  letter-spacing: 0.1em;
}

.association-content-wrapper {
  margin: 0 auto;
  background-color: var(--color-bg-white);
}

/* 処方箋�?取り扱?�? */
.association-prescription {
  margin-bottom: var(--spacing-xxl);
}

.association-content-heading {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--spacing-sm) 0;
  color: #4d4d4d;
}

.association-content-text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.8;
  margin: 0;
}

/* オンライン服薬確?�? */
.association-online-section {
  margin-bottom: 0;
}

.association-online-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 150px;
    align-items: start;
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

.association-online-text p {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--spacing-lg);
}

.association-online-text p:last-child {
  margin-bottom: 0;
}

.association-online-image {
  width: 300px;
}

.association-mynumber-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* 認定�?タン (water.htmlの.inspection-contact-webスタイルを利用) */
.association-certification-buttons {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
/*  flex-direction: column;*/
}

.association-certification-buttons a {
	font-size: var(--font-size-lg);
}

/* ============================================
   Responsive Styles
   ============================================ */
   
   
   
@media (max-width: 1024px) {
	.association-about-section {
	    padding: var(--spacing-lg) var(--spacing-md);
	}
	.association-online-content {
	    gap: 70px;
	}

}

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 991px) {
  .association-content-wrapper {
    padding: var(--spacing-xl);
  }
  
  .association-online-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .association-online-image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .association-main-visual {
    padding: var(--spacing-lg) 0;
  }
  
  .association-about-section {
    padding: var(--spacing-lg) 0;
  }
  
  .association-section-header {
    margin-bottom: var(--spacing-lg);
  }
  
  .association-section-title {
    font-size: var(--font-size-h2);
  }
  
  .association-content-wrapper {
    padding: var(--spacing-lg);
  }
  
  .association-content-heading {
    font-size: var(--font-size-base);
  }
  
  .association-content-text {
    font-size: var(--font-size-sm);
  }
  
  .association-certification-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .association-certification-buttons .inspection-contact-web {
    width: 100%;
  }
  .association-about-section {
	    padding: var(--spacing-lg) 0;
	}
}

/* 小型スマ�? (430px以?�?) */
@media (max-width: 430px) {
  .association-content-wrapper {
    padding: var(--spacing-md);
  }
  
  .association-section-title {
    font-size: var(--font-size-xl);
  }
  
  /* 会員ペ�?ジ・採用ペ�?ジ用ヒ�?ロー */
  .associetion-hero.member-hero,
  .associetion-hero.recruit-page-hero,.associetion-hero-section .associetion-hero {
    margin-top: 70px;
    background-size: 100%;
    padding-top: 40%;
  }
}

/* ============================================
   News Single Page Responsive
   ============================================ */

/* タブレ?�??�?� (991px以?�?) */
@media (max-width: 991px) {
  .post-title {
    font-size: var(--font-size-xl);
  }
  
  .post-content h2 {
    font-size: var(--font-size-lg);
  }
}

/* スマ�? (767px以?�?) */
@media (max-width: 767px) {
  .post-meta {
    flex-wrap: wrap;
  }
  
  .post-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
  }
  
  .post-thumbnail {
    margin-bottom: var(--spacing-lg);
  }
  
  .post-content {
    font-size: var(--font-size-sm);
  }
  
  .post-content h2 {
    font-size: var(--font-size-base);
    padding-left: var(--spacing-sm);
    border-left-width: 3px;
    margin-top: var(--spacing-lg);
  }
  
  .post-content h3 {
    font-size: var(--font-size-base);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .post-content h4 {
    font-size: var(--font-size-sm);
    padding: 6px var(--spacing-sm);
  }
  
  .post-back-btn-wrap {
    margin-top: var(--spacing-lg);
  }
  
  .post-back-btn {
    padding: var(--spacing-xs) var(--spacing-lg);
    font-size: var(--font-size-sm);
  }
  
  /* Member Page Calendar Section */
  .member-calendar-section {
    padding: var(--spacing-lg) 0;
  }
  
  .member-calendar-info {
    padding-right: 0;
    margin-bottom: var(--spacing-lg);
  }
  
  .member-calendar-title {
    font-size: var(--font-size-xl);
  }
  
  .member-calendar-text {
    font-size: var(--font-size-sm);
  }
  
  .member-calendar-embed {
    padding: 0;
  }
  
  /* Contact Form */
  .contact-form-section {
    padding: var(--spacing-lg) 0;
  }
  
  .contact-form {
    padding: var(--spacing-lg);
  }
  
  .contact-form-title {
    font-size: var(--font-size-xl);
  }
  
  .contact-form-intro {
    font-size: var(--font-size-sm);
  }
  
  .form-radio-group {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .btn-submit {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   休日当番薬?・当番医ペ�?ジ?ジ??nduty.html??
   ============================================ */

/* 抗原検査キ?�??�?�注意書?�? */
.alert-info-box {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
	width: 60%;
	margin: 0 auto;
}

.alert-info-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.alert-info-icon i{
	color: white;
}

.alert-info-content {
    flex: 1;
}

.alert-info-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.alert-info-text {
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    margin: 0;
}

/* スケジュールセクション */
.schedule-section {
    padding: 48px 0;
}

/* 日付リストエリア */
.day-list {
    background-image: url('../images/check_bg.png');
    background-repeat: repeat;
    background-size: 40px 40px;
    background-position: 0 0;
    padding: 100px 0;
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    position: relative;
    padding-bottom: 16px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--accent-color);
}

/* 月間タ?�? */
.month-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 20px 0 20px;
}

.month-tab {
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
}

.month-tab:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    font-size: 1.2rem;
}

.month-tab.active {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-md);
    font-size: 1.2rem;
}

.month-tab i {
    font-size: 18px;
}

/* スケジュールコン?�??�?� */
.schedule-content {
    background: #f0f8ff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

.month-schedule {
    display: none;
}

.month-schedule.active {
    display: block;
}

.month-schedule-title {
    font-size: var(--font-size-h1);
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
}

/* 週次アンカーリンク */
.week-anchors {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px;
    border-radius: 12px;
}

.week-anchor {
    background: var(--color-primary);
    border: 2px solid var(--primary-color);
    border-radius: 78px;
    padding: 10px 20px;
    font-size: 17px;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: var(--shadow-sm);
    line-height: 1;
}

.week-anchor:hover {
    background: white;
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 88, 162, 0.2);
    border: 1px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* 日付グルー?�? */
.duty-date-group {
    margin-bottom: 48px;
    scroll-margin-top: 100px;
    padding: 25px 5rem 50px;
}

.duty-date-group:last-child {
    margin-bottom: 0;
}

.duty-date-header {
    background: var(--color-primary);
    color: white;
    font-size: 22px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 90px;
    margin: 0 auto;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 40px;
}

/* 当番薬?�?リス?�? */
.duty-pharmacies {
/*    padding: 25px 5rem 50px;*/
    border-left: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-color);
}

/* 薬?�?カー?�? - ph-archive.htmlのスタイルに統?�? */
/* 当番薬�?カー�? - pharmacy-cardのベ�?ススタイルを継承、margin-bottomのみ上書�? */
.duty-pharmacies .pharmacy-card {
    display: block;
    margin-bottom: 25px;
}

.duty-pharmacies .pharmacy-card:last-child {
    margin-bottom: 0;
}

/* 当番医セクション - 横並びレイアウ?�? */
.duty-doctors-listbox {
    margin: var(--spacing-lg) auto 0;
}

.duty-doctors {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.duty-doctors-title {
    font-size: var(--font-size-h2);
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 20px;
    margin: 0;
    flex-shrink: 0;
    writing-mode: horizontal-tb;
    text-align: center;
}

.duty-doctors-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-left: 50px;
    border-left: 1px solid var(--color-primary);
}

.duty-doctor-item {
    background: white;
    border: none;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.duty-doctor-item i {
    font-size: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* レスポンシブ対?�? */
@media (max-width: 1199px) {
    .schedule-content {
        padding: 32px;
    }
    
    .duty-date-header {
        font-size: 20px;
        padding: 14px 24px;
    }
	.duty-date-group {
		padding: 25px 0 50px;
	}
	.alert-info-box {
		width: 100%;
	}
}

@media (max-width: 991px) {
    .alert-info-box {
        flex-direction: column;
        padding: 20px;
    }
    
    .alert-info-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .month-tabs {
        gap: 8px;
    }
    
    .month-tab {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .schedule-content {
        padding: 24px;
    }
    
    .month-schedule-title {
        font-size: 20px;
    }
    
    .week-anchors {
        gap: 12px;
        padding: 16px;
    }
    
    .week-anchor {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .duty-date-header {
        font-size: 18px;
        padding: 12px 20px;
    }
    
    .duty-doctors {
        flex-direction: column;
        gap: 16px;
    }
    
    .duty-doctors-title {
        font-size: 16px;
        min-width: auto;
    }
    
    .duty-doctors-list {
        padding-left: 0;
        border-left: none;
        padding-top: 16px;
        border-top: 2px solid var(--color-border-light);
    }
}

@media (max-width: 767px) {
    .schedule-section {
        padding: 32px 0;
    }
    
    .alert-info-box {
        padding: 16px;
    }
    
    .alert-info-title {
        font-size: 16px;
    }
    
    .alert-info-text {
        font-size: 13px;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .month-tabs {
        flex-direction: column;
    }
    
    .month-tab {
        width: 100%;
        justify-content: center;
    }
    
    .schedule-content {
        padding: 20px;
    }
    
    .month-schedule-title {
        font-size: 18px;
    }
    
    .week-anchors {
        flex-direction: column;
        gap: 8px;
    }
    
    .week-anchor {
        width: 100%;
        text-align: center;
    }
    
    .duty-date-header {
        font-size: 16px;
        padding: 10px 16px;
    }

    .pharmacy-card {
        padding: 16px;
    }
    
    .pharmacy-name {
        font-size: 16px;
    }
    
    .pharmacy-info-row {
        flex-direction: column;
        gap: 4px;
    }
    
    .pharmacy-info-label {
        width: auto;
        font-size: 13px;
    }
    
    .pharmacy-info-value {
        font-size: 13px;
    }
    
    .duty-doctors {
        flex-direction: column;
        padding: 20px;
    }
    
    .duty-doctors-title {
        font-size: 16px;
        min-width: auto;
        padding: 12px;
        writing-mode: horizontal-tb;
    }
    
    .duty-doctors-list {
        padding-left: 0;
        border-left: none;
        padding-top: 20px;
        border-top: 2px solid var(--color-border-light);
        grid-template-columns: 1fr;
    }
    
    .duty-doctor-item {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 575px) {
    .schedule-section {
        padding: 24px 0;
        border-radius: 12px;
    }
    
    .schedule-content {
        padding: 16px;
        border-radius: 12px;
    }
    
    .duty-date-group {
        margin-bottom: 32px;
    }
}

/* ============================================
   ???ウンロー?�??ージ??ata.html??
   ============================================ */

/* カ?�??�?�リーボタン */
.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    padding: 24px 0;
}

.category-btn {
    display: inline-block;
    padding: 5px 24px;
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    color: #4d4d4d;
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.category-btn:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
	background: #f0f8ff;
}

.category-btn.active {
    background: #f0f8ff;
}

/* ドキュメントリス?�? */
.document-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
	margin-top: var(--spacing-sm);
}
.grandchild-category-title{
	margin: 40px 0 0 0;
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: #f0f8ff;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.document-item:hover {
    background: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 88, 162, 0.15);
}

.document-info {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.document-icon {
    font-size: 28px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.document-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: #4d4d4d;
}

.document-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 36px;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    flex-shrink: 0;
}

.document-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* レスポンシブ対?�? */
@media (max-width: 991px) {
    .category-buttons {
        gap: 10px;
    }
    
    .category-btn {
        padding: 8px 20px;
        font-size: 14px;
    }
    
    .document-item {
        padding: 16px 20px;
    }
    
    .document-icon {
        font-size: 24px;
    }
    
    .document-title {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .category-buttons {
        flex-direction: column;
        gap: 8px;
    }
    
    .category-btn {
        width: 100%;
        text-align: center;
    }
    
    .document-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px;
    }
    
    .document-info {
        width: 100%;
    }

    .document-footer {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .document-item .document-badge {
        align-self: auto;
    }
}

@media (max-width: 575px) {
    .document-icon {
        font-size: 20px;
    }
    
    .document-title {
        font-size: 14px;
    }
    
    .document-info {
        gap: 12px;
    }
}

/* ============================================
   採用?ペ�?ジ?ジ??ecruit.html??
   ============================================ */

/* ヒ�?ローセクション */
.recruit-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 100px;
    background-image: url(../images/recruit01.png);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: right;
    padding-top: 30%;
}

.recruit-hero-content {
    text-align: center;
}

.recruit-hero-text {
    font-size: 18px;
    line-height: 2;
    color: var(--color-text);
    margin: 0;
}

/* 募集職種・概要セクション */
.recruit-requirements {
    position: relative;
    padding: 80px 0;
    background-image: url(../images/check_bg.png);
    background-repeat: repeat;
    background-size: auto;
}

.recruit-requirements-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    overflow: hidden;
    z-index: 0;
}

.recruit-requirements-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
}

.recruit-requirements .container-custom {
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    margin-bottom: 0;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-deep);
    margin-bottom: 0;
    padding: 0;
}

.section-title-en {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 2px;
}

.recruit-hero-title{
  padding-top: var(--spacing-xl);
}

/* 職種タ?�? */
.job-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
}

.job-tab {
    padding: 8px var(--spacing-lg);
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.job-tab:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.job-tab.active {
    background: var(--color-primary);
    color: white;    
}

/* 職種詳細 */
.job-details {
    max-width: 900px;
    margin: 0 auto;
}

.job-detail {
    display: none;
}

.job-detail.active {
    display: block;
    animation: fadeIn 0.3s ease;
    background-color: white;
    box-shadow: var(--shadow-40);
}
.job-detail{
    padding: 50px;
    border: 2px solid var(--color-primary);
    border-radius: 15px;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.job-description {
      margin-bottom: 30px;
}

.job-description p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text);
    margin: 0;
}

.rec-content-h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 10px 30px 10px;
    padding: 5px 20px 10px;
    border-left: 10px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
}

/* 職種詳細?�??ブル */
.job-info-table {
    background: white;
    overflow: hidden;
}

.job-info-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    border-bottom: 1px solid var(--color-border-light);
}

.job-info-row:last-child {
    border-bottom: none;
}

.job-info-label {
    padding: var(--spacing-xs) var(--spacing-md);
    background: #f2f2f2;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
}

.job-info-value {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 16px;
    color: var(--color-text);
    display: flex;
    align-items: center;
}

/* 応募方法セクション */
.recruit-apply {
    padding: 80px 0;
    background: white;
}

.apply-text {
    text-align: left;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 40px;
}
.recruit-section-header {
    background-color: #f0f8ff;
    padding: 50px;
    border-radius: 30px;
}

/* 連絡方?�? */
.recruit-contact-methods {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.recruit-contact-phone {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    border-left: 10px solid var(--color-primary);
}

.recruit-contact-phone:hover {
    background: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.contact-phone-icon {
    width: 56px;
    height: 56px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-phone-icon i {
    font-size: 24px;
    color: white;
}

.contact-phone-content {
    display: flex;
    flex-direction: column;
}

.contact-phone-number {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary-deep);
    margin: 0;
}

.contact-phone-hours {
    font-size: 13px;
    color: #333;
    margin: 0;
}

.recruit-contact-form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--spacing-xs) var(--spacing-lg);
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    color: var(--color-primary-deep);
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    border-left: 10px solid var(--color-primary);
}

.recruit-contact-form:hover {
    background: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-primary);
}

.recruit-contact-form i {
    font-size: 24px;
    color: var(--color-primary);
}

.recruit-contact-form:hover i{
    color: var(--color-primary);
}

.recruit-section-header{
    text-align: left;
}

/* 採用ペ�?ジ用ヒ�?ロー */
.associetion-hero.recruit-page-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 100px;
    background-image: url(../images/recruit01.png);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position: right;
    padding-top: 30%;
}

/* レスポンシブ対?�? */
@media (max-width: 991px) {
    /* 会員ペ�?ジ・採用ペ�?ジ用ヒ�?ロー */
    .associetion-hero.member-hero,
    .associetion-hero.recruit-page-hero {
        margin-top: 70px;
        background-size: 100%;
        padding-top: 40%;
    }
    
    .recruit-hero {
        padding: 48px 0;
    }
    
    .recruit-hero-text {
        font-size: 16px;
    }
    
    .recruit-requirements {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .job-tabs {
        gap: 12px;
    }
    
    .job-tab {
        padding: 10px 32px;
        font-size: 15px;
    }
    
    .job-info-row {
        grid-template-columns: 150px 1fr;
    }
    
    .job-info-label,
    .job-info-value {
        padding: 14px 16px;
        font-size: 14px;
    }
    
    .recruit-contact-methods {
        flex-direction: column;
        align-items: center;
    }
    
    .recruit-contact-phone,
    .recruit-contact-form {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 767px) {
    .recruit-hero {
        padding: 32px 0;
    }
    
    .recruit-hero-text {
        font-size: 15px;
        line-height: 1.8;
    }
    
    .recruit-requirements {
        padding: 48px 0;
    }
    
    .section-header {
        margin-bottom: 32px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .section-title-en {
        font-size: 16px;
    }
    
    .job-tabs {
        flex-direction: column;
    }
    
    .job-tab {
        width: 100%;
        text-align: center;
    }
    
    .job-info-row {
        grid-template-columns: 1fr;
    }
    
    .job-info-label {
        background: var(--color-primary);
        color: white;
    }
    
    .recruit-apply {
        padding: 48px 0;
    }
    
    .apply-text {
        font-size: 15px;
        margin-bottom: 32px;
    }
    
    .recruit-contact-phone {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .contact-phone-number {
        font-size: 18px;
    }
    
    .recruit-contact-form {
        padding: 20px 28px;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .job-description {
        padding: 20px;
    }
    
    .job-description p {
        font-size: 14px;
    }
    
    .job-info-label,
    .job-info-value {
        padding: 12px;
        font-size: 13px;
    }
    
    .contact-phone-icon {
        width: 48px;
        height: 48px;
    }
    
    .contact-phone-icon i {
        font-size: 20px;
    }
}

/* ============================================
   採用?ペ�?ジ?ジ??ecruit.html??
   ============================================ */

/* ヒ�?ローセクション */

@media screen and (max-width: 1720px) {
}
@media screen and (max-width: 1366px) {
  .about-section, .about-inner {
      min-height: 600px;
  }
  .contact-tel {
      font-size: 2.5rem;
  }
  .contact-box {
	  gap: 4px;
  }
  .contact-office {
      font-size: 1.3rem;
      font-weight: 500;
  }
  .recruit-caption span {
      font-size: var(--font-size-h3);
      font-weight: 500;
  }
      .schedule-content {
      padding: 40px 100px;
  }
  .schedule-section {
      padding: 48px 100px;
  }
  .lead-text{
    padding: 50px 100px 0;
  }
  .inspection-hero-text p {
      font-size: var(--font-size-h3);
  }
  .inspection-hero-text {
      top: 65%;
  }

}
@media screen and (max-width: 1280px) {
  .page-title-section {
      padding: 70px 19% 60px;
  }
  .page-title-illustration {
      right: 5%;
      bottom: 0%;
  }
  .bc-section {
      padding: 15px 0 0px;
  }
  .sidebar-nav {
      padding: 0 0 var(--spacing-lg) 0;
  }
  .contact-tel {
      margin-bottom: 15px;
  }
  .content-article {
    padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
}
  .recruit-content ,.contact-content {
      max-width: 95%;
  }
  .contact-box {
      padding: var(--spacing-xl) var(--spacing-lg);
  }

}
@media screen and (max-width: 1100px) {
  .news-section {
    padding: 0 0 var(--spacing-md) 0;
  }

  /* トップ�?ージ */
  .hero-slider {
      min-height: 600px;
  }
  .hero-swiper {
      left: 2%;
      bottom: 9%;
      max-width: 700px;
  }
  .hero-text-box {
      top: 25%;
      right: 2%;
      max-width: 600px;
  }
  .hero-illustration {
      max-width: 300px;
  }
  .contact-box {
      padding: var(--spacing-lg);
  }
  .recruit-contact-section .container-custom {
      padding-top: var(--spacing-lg);
      padding-bottom: var(--spacing-lg);
  }
  .search-section {
      padding: var(--spacing-lg) 0;
  }
  .about-image img {
      height: 80%;
  }
  .hero-title,.hero-title-highlight {
      font-size: 24px;
  }
  .container-custom {
      padding-left: var(--spacing-lg);
      padding-right: var(--spacing-lg);
  }
  .search-section-title {
      margin-bottom: var(--spacing-lg);
  }
  .page-title-section {
      padding: 80px 19%;
  }
  .page-title-decoration img {
      width: 265px;
  }
  .content-with-sidebar {
      padding: 40px 0 var(--spacing-xxl);
  }
  .inspection-contact-methods {
      gap: var(--spacing-md);
      margin: var(--spacing-md) 0;
      flex-direction: column;
      justify-content: center;
  }
  .inspection-cards {
      gap: var(--spacing-sm);
  }
  .pharmacy-info-table {
      margin: 0 !important;
  }
  .pharmacy-detail-header {
      margin-bottom: var(--spacing-xl);
  }
  .pharmacy-support-table {
      margin: 0 !important;
  }
  .content-section {
      margin-bottom: var(--spacing-lg);
  }
  .pharmacy-accordion-title {
      font-size: var(--font-size-h3);
  }
}
@media screen and (max-width: 1024px) {
  .recruit-contact-section {
      min-height: 500px;
  }
  .page-title-section {
      padding: 80px 19%;
  }
  .sidebar-nav {
      padding: 20px 0px 0px;
      margin-bottom: 0;
  }
  .pickup-sec {
      background: linear-gradient(180deg, #0058a2 0%, #0058a2 18%, #ffffff 18%, #ffffff 100%);
  }
  .ar-pickup-labels {
      top: 3%;
  }
  .pickup-sec {
      margin-bottom: 0;
      padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
  }
  .news-list-sec {
      margin-top: var(--spacing-lg);
  }
  .page-title-decoration img {
      width: 220px;
  }
  .about-image {
      height: 60%;
  }
  .recruit-caption {
      font-size: var(--font-size-h3);
  }
  .recruit-overlay {
      gap: var(--spacing-xs);
  }
  .newslistbox, .pickupbox {
    position: relative;
    padding: 0 1.5rem;
  }
  .hero-slider {
      min-height: 550px;
  }
  .hero-text-box {
      top: 15%;
      padding: 15px 25px;
  }
  .hero-illustration {
      max-width: 240px;
  }
  .content-article{
      padding: 20px 0 var(--spacing-lg) var(--spacing-lg);
  }
  .page-title-illustration img {
      width: 80%;
  }
  .page-title-illustration {
      right: -3%;
      bottom: 0;
  }
  .schedule-content {
      padding: 40px 20px;
  }
  .inspection-contact-web {
      font-size: 1.2rem;
      line-height: 1;
  }
}
@media screen and (max-width: 991px) {
  .hero-slider::before {
      width: 350px;
      height: 390px;
  }
  .newslistbox, .pickupbox {
      width: 80%;
      margin: 0 auto;
  }
  .about-content .container-custom{
    padding: 0 60px 0 0;
  }
  .content-article {
        padding: var(--spacing-xl) 0 var(--spacing-md);
	}
  .sidebar-link {
      padding: 5px 15px;
  }
  .ticket-count {
      font-size: 24px;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      margin: 0 2px;
  }
  .schedule-section {
      padding: 8px 60px;
  }
  .lead-text {
      padding: 50px 0px 0;
  }
  .day-list {
      padding: 60px 0;
  }
  .duty-doctors-title {
      font-size: 20px;
      padding: 0px 20px;
  }
  .association-content-wrapper {
      padding: 0;
  }
  .association-online-content {
      margin: var(--spacing-xl) 0 0 0;
  }
  .listwrap {
      padding: var(--spacing-lg);
  }
  .inspection-info-left, .inspection-info-right {
      min-height: 350px;
  }
  .flame-control .inspection-info-left {
      min-height: 350px;
      padding: 0;
  }
  .flame-control .inspection-info-left iframe {
      height: 100%;
  }
  .inspection-hero-mobile img {
      width: 95%;
      float: right;
      margin-top: 50px;
  }
  .inspection-hero-mobile {
      margin-bottom: 0;
      border-radius: 10px 0 0 10px;
  }
  /* 会員ペ�?ジ・採用ペ�?ジ用ヒ�?ロー */
  .associetion-hero.member-hero,
  .associetion-hero.recruit-page-hero,.associetion-hero-section .associetion-hero {
      margin-top: 50px;
      background-size: 93%;
  }
}
@media screen and (max-width: 768px) {
  .page-title {
      font-size: 27px;
  }
  .page-title-en {
      font-size: 20px;
  }
  .content-articleb .pickup-info-card .pickup-title{
    margin: 0 0 10px 0;
  }
  .pickup-info-card {
      padding: 0;
      padding-bottom: 80px;
      margin-top: 10px;
  }
  .pickup-info-card .pickup-title {
      margin-bottom: var(--spacing-xs);
  }
  .picup-btn {
      transform: none;
  }
  .disaster-download-buttons {
      margin: var(--spacing-xl) 0 0;
  }
  .inspection-hero-mobile img {
      width: 100%;
      height: auto;
      display: block;
      padding-left: 5%;
      margin: 40px 0 15px;
  }
  .inspection-hero-text {
      top: 65%;
      left: 4%;
  }
  .inspection-hero-mobile {
      margin-bottom: 0;
      border-radius: var(--radius-md) 0 0 var(--radius-md);
  }
  .content-article {
      padding: var(--spacing-lg) 0;
  }
  .job-detail.active,.recruit-section-header {
      padding: 30px;
  }
  .recruit-overlay {
      gap: var(--spacing-md);
  }

}

@media screen and (max-width: 430px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.row {
		margin-top: 0;
		margin-right: 0;
		margin-left: 0;
	}
	.contact-form {
		padding: var(--spacing-xs);
	}

  /* トップ�?ージ */
  .hero-title, .hero-title-highlight {
        font-size: 25px;
    }
	.hero-slider {
		min-height: 600px;
	}
  .hero-text-box {
      top: 20px;
      right: 0px;
      max-width: 100%;
      background-color: rgba(255, 255, 255, 0);
      box-shadow: none;
      padding: 0;
      margin: 0;
  }
  .hero-swiper {
      left: 50%;
      bottom: 0;
      max-width: 90%;
      transform: translate(-50%, -70%);
  }
  .hero-illustration {
      max-width: 230px;
      bottom: 20px;
      right: 20px;
  }
  .hero-slider::before {
      width: 100%;
      height: 250px;
  }
  .newslistbox {
      padding: 0 var(--spacing-xs);
  }
  .about-image {
      height: 0;
      top: 0;
      left: 0;
  }
  .about-image img {
      height: 250px;
      width: 95%;
      float: right;
  }
  .about-section, .about-inner {
      min-height: auto;
  }
  .about-inner{
    padding-top: 280px;
  }
  .about-content {
      margin-top: 250px;
  }
  .about-inner {
      padding-top: 30px;
  }
  .about-content .container-custom{
    padding: 0 !important;
  }
  .recruit-card, .contact-card {
      margin-bottom: 0 !important;
  }
  .recruit-contact-section .container-custom {
      padding-top: 0;
      padding-bottom: 0;
  }
  .recruit-message {
      font-size: var(--font-size-base);
      padding: 0 !important;
      margin: 0 0 25px 0;
  }
  .recruit-info {
      padding: var(--spacing-md);
  }
  .contact-office {
      font-size: 1.2rem;
      color: var(--color-text);
      margin: 0;
      font-weight: bold;
  }
  .section-title {
      font-size: 26px;
      padding-bottom: 0;
      margin-bottom: 0;
  }
  .section-header {
      margin-bottom: 0;
      gap: 0;
  }
  .news-item {
      gap: 0;
      padding: 15px 0;
  }
  .recruit-header {
      gap: 0;
  }
  .footer-brand-col {
      margin-bottom: var(--spacing-xxl);
      padding: 10px 0 0 0;
  }
  .pickupbox{
    padding: 0;
  }
  .footer-cta-col {
      margin-top: var(--spacing-sm);
  }
    .news-section {
    padding: 0;
  }

  /* お知らせ */
  .rblue-bg {
    background-color: #f0f8ff;
    padding: 20px 0;
    margin-bottom: 50px;
  }
  .page-title-section {
      padding: 50px 19%;
  }
  .page-title-decoration img {
      width: 155px;
  }
  .content-with-sidebar .content-article {
      padding: var(--spacing-md) 0;
  }
  .newslistbox, .pickupbox {
      width: 100%;
      margin: 0 auto;
  }
  .ticket-label {
      line-height: 1.5;
      font-size: 13px;
  }
  .footer-cta-btn {
      font-size: 14px;
  }
  .footer-cta-btn .cta-icon {
      width: 23px;
      height: 23px;
  }
  .footer-nav-list a {
      color: var(--color-primary);
      font-size: 13px;
  }
  .footer-nav-list a {
      font-size: 13px;
  }
  .pickup-sec {
      padding: 80px var(--spacing-md) var(--spacing-md);
  }
  .ar-pickup-labels {
      top: 2%;
      font-size: 15px;
  }
  .pickup-info-card {
      padding: 0;
      padding-bottom: 80px;
  }
  .pickup-sec {
      padding: 80px var(--spacing-md) var(--spacing-md);
  }
  .picup-btn {
      bottom: 4%;
      right: 7%;
  }
  .bc-section {
      padding: 10px 0 0px;
  }
  .page-title-illustration img {
      width: 90%;
  }
  .page-title-illustration {
      right: 0;
      bottom: 26%;
  }
  .content-with-sidebar {
      padding: 40px 0 var(--spacing-xxl);
  }
  .container-custom {
      padding-left: var(--spacing-sm);
      padding-right: var(--spacing-sm);
  }
  .lead-text {
      padding: 30px 0px 0;
  }
  .schedule-section {
      padding: 0 0px;
  }
  .schedule-content {
      padding: 30px 0px;
  }
  .day-list {
      padding: 50px 0;
  }
  .pharmacy-badge-kit,.duty-pharmacies .badge-non-member {
      padding: 0px 15px;
  }
  .inspection-info-title {
      font-size: 1.3rem;
  }
  .association-content-wrapper {
      padding: 0;
  }
  /* 会員ペ�?ジ・採用ペ�?ジ用ヒ�?ロー */
  .associetion-hero.member-hero,
  .associetion-hero.recruit-page-hero,.associetion-hero-section .associetion-hero {
      margin-top: 40px;
  }
  .pharmacy-card-header {
      flex-direction: column;
  }
  .pharmacy-card-header {
      margin-bottom: var(--spacing-sm);
      padding-bottom: var(--spacing-sm);
  }
  .sidebar-nav {
      padding: 20px 0px;
      margin-bottom: 0;
  }
  .inspection-address, .inspection-tel, .inspection-fax, .inspection-hours p, .inspection-closed p {
      line-height: 1.5;
  }
  .inspection-contact-phone i {
      line-height: 1;
  }
  .inspection-hero-text {
      position: relative;
      color: var(--color-text);
      display: block;
      transform: none;
  }
  .inspection-hero-mobile .inspection-hero-text p {
      font-size: var(--font-size-md);
  }
  .job-detail.activ,.recruit-section-header {
      padding: 30px;
  }
  .contact-tel {
    font-size: 2rem;
  }
  .job-info-label, .job-info-value {
    font-size: 13px;
    border-radius: 5px;
  }
  .job-description {
    padding: 0;
  }
  
  .page-title {
      font-size: 20px;
  }
  .page-title-en {
      font-size: 14px;
  }
  	.recruit-content .section-title, .contact-content .section-title {
		margin-bottom: var(--spacing-xs);
	}
	.recruit-overlay {
        gap: var(--spacing-xs);
    }
    .contact-form-text{
	    font-size: 17px;
    }


}
@media screen and (max-width: 390px) {
    .recruit-image {
        height: 270px;
    }
    .recruit-image img {
        min-height: 100%;
        object-fit: cover;
    }
    .recruit-caption {
        padding: 0;
    }
    .recruit-caption span{
        font-size: 16px;
    }
    .contact-tel {
        font-size: 1.7rem;
    }
    .btn-primary, .btn-outline-primary, .btn-outline-light {
        font-size: 16px;
    }
    .hero-text-box {
        top: 32px;
    }
    .footer-content{
      padding-left: var(--spacing-sm);
      padding-right: var(--spacing-sm);
    }
    .footer-nav-area .col-4 {
        margin-bottom: 0;
    }
    .footer-cta-col {
        margin-top: var(--spacing-md);
    }
    .hero-title, .hero-title-highlight {
        font-size: 24px;
    }
    .hero-swiper {
        transform: translate(-50%, -84%);
    }
    .footer-brand-col {
        padding: 5px 0 0 0;
    }
    .taxsec-inner {
        padding: 0;
    }
    .inspection-contact-methods .contact-tel {
        font-size: 1.3rem;
    }
    .mw_wp_form .horizontal-item + .horizontal-item {
	    margin-left: 0;
	}
	.inspection-contact-phone .contact-hours {
	    font-size: var(--font-size-xs);
	}
	.form-radio-group {
		gap: var(--spacing-xs);
	}

}


/* ================================================
   マウスス?�??カー - シンプルリング
   ================================================ */

/* カーソル本体を非表示??�オプション?? */
/*
body {
  cursor: none;
}
*/

/* リンクボタン上では通常カーソルを表示 */
a, button, input, textarea, select {
  cursor: pointer !important;
}

/* マウストラ?�??�?�ー本?�? */
.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(0, 88, 162, 0.5); /* メインブルー */
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.15s ease-out;
  transform: translate(-50%, -50%);
}

/* ホバー時（リンクボタン上�? */
.cursor-follower.hover {
  width: 60px;
  height: 60px;
  border-color: rgba(0, 88, 162, 0.8);
  border-width: 3px;
  background-color: rgba(0, 88, 162, 0.1);
}

/* クリ?�??�?�時（波紋エフェクト�? */
.cursor-follower.click {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    width: 40px;
    height: 40px;
    opacity: 1;
  }
  100% {
    width: 80px;
    height: 80px;
    opacity: 0;
    border-width: 1px;
  }
}

/* スマ�?・タブレ?�??�?�では非表示 */
@media (max-width: 1024px) {
  .cursor-follower {
    display: none;
  }
  
  body {
    cursor: auto;
  }
}

/* ========================================
   プライバシーポリシーモー?�?ル?ル
   ======================================== */

/* モー?�?ル背景 */
.privacy-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2147483647 !important; /* ?�?大値に設?�? */
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
  pointer-events: auto !important; /* マウス操作を有効?�? */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* モー?�?ル?�?イアログ */
.privacy-modal-dialog {
  background: #fff;
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
  pointer-events: auto !important; /* マウス操作を有効?�? */
  cursor: auto !important; /* カーソルを強制表示 */
}

/* モー?�?ル?�?イアログ
の要素でカーソル表示 */
要素でカーソル表示 */
.privacy-modal-dialog * {
  cursor: auto !important;
}

@keyframes slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* モー?�?ルヘッ?�?ー */
.privacy-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 30px;
  border-bottom: 2px solid #e0e0e0;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
  border-radius: 12px 12px 0 0;
}

.privacy-modal-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-color, #0058a2);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.privacy-modal-title::before {
  content: "🔒";
  font-size: 24px;
}

.privacy-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer !important; /* ボタンはpointerカーソル */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.privacy-modal-close:hover {
  background-color: #f0f0f0;
  color: #333;
}

/* モー?�?ルボディ??�スクロール領域?? */
.privacy-modal-body {
  padding: 30px;
  overflow-y: auto;
  flex: 1;
  line-height: 1.8;
  color: #333;
  font-size: 15px;
  outline: none; /* フォーカス時�?枠線を非表示 */
}

.privacy-modal-body h2 {
  font-size: 20px;
  color: var(--primary-color, #0058a2);
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.privacy-modal-body h2:first-child {
  margin-top: 0;
}

.privacy-modal-body h3 {
  font-size: 18px;
  color: #333;
  margin-top: 20px;
  margin-bottom: 10px;
}

.privacy-modal-body p {
  margin-bottom: 15px;
}

.privacy-modal-body ul,
.privacy-modal-body ol {
  padding-left: 25px;
  margin-bottom: 15px;
}

.privacy-modal-body li {
/*  margin-bottom: 8px;*/
}

/* ロー?�??�?�ング表示 */
.privacy-loading {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 16px;
}

/* モー?�?ルフッター */
.privacy-modal-footer {
  padding: 20px 30px;
  border-top: 2px solid #e0e0e0;
  background: #f8f9fa;
  border-radius: 0 0 12px 12px;
}

.privacy-scroll-notice {
  font-size: 14px;
  color: #666;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.privacy-scroll-notice i {
  font-size: 18px;
  color: var(--primary-color, #0058a2);
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 同意ボタン */
.privacy-agree-btn {
  width: 100%;
  padding: 16px 30px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color, #0058a2);
  border: none;
  border-radius: 8px;
  cursor: pointer !important; /* ボタンはpointerカーソル */
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 88, 162, 0.3);
}

.privacy-agree-btn:hover:not(.disabled) {
  background: #004080;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 88, 162, 0.4);
}

.privacy-agree-btn:active:not(.disabled) {
  transform: translateY(0);
}

.privacy-agree-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

.privacy-agree-btn i {
  font-size: 20px;
}

/* レスポンシブ対?�? */
@media (max-width: 768px) {
  .privacy-modal {
    padding: 10px;
  }

  .privacy-modal-dialog {
    max-height: 95vh;
    border-radius: 8px;
  }

  .privacy-modal-header {
    padding: 18px 20px;
  }

  .privacy-modal-title {
    font-size: 18px;
  }

  .privacy-modal-body {
    padding: 20px;
    font-size: 14px;
  }

  .privacy-modal-footer {
    padding: 15px 20px;
  }

  .privacy-scroll-notice {
    font-size: 13px;
  }

  .privacy-agree-btn {
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* ============================================
   document-icon バリエーション
   ============================================ */

/* リンク設定�?oc_link??�使用時�?アイコン上書?�? */
/* bi-file-earmark-text (\f1c5) を使用            */
/* Bootstrap Icons の ::before より詳細度を上げて確実に上書?�? */
.bi.document-icon--link::before,
.bi-file-earmark-arrow-down.document-icon--link::before {
  content: "\f1c5" !important;
}