/* Modern hospital-style redesign inspired by the information architecture common to large Japanese hospital sites. */
:root{--blue:#0066a6;--blue-dark:#004b7a;--sky:#eaf6fb;--teal:#008b8b;--red:#c9362b;--ink:#17324d;--muted:#64748b;--line:#d9e5ec;--bg:#f5f8fa;--white:#fff;}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif;
  font-size:16px;
  line-height:1.8
}
  a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}iframe{max-width:100%;border:0}
#headerbg,#logo,#menubg{display:none}.site-header{background:#fff;box-shadow:0 1px 0 rgba(23,50,77,.08);position:relative;z-index:20}.header-top{background:#fff}.header-inner,.nav-inner{width:min(1180px,calc(100% - 32px));margin:auto}.header-inner{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}.brand:hover{text-decoration:none}.brand-mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px}.brand strong{display:block;font-size:25px;line-height:1.1;letter-spacing:.05em}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.header-actions{display:flex;align-items:center;gap:10px}
.header-link{
  padding:7px 10px;
  font-size:13px;
  color:var(--ink);
  
/* 重複していた指定を整理・統合しました */
  padding: 6px 6px;       /* 💡ここの上下の数値で高さを調整できます */
  font-size: 1.0rem;
  color: #fff;
  background-color: var(--green-dark);
  border-radius: 12px;
  text-decoration: none;
  transition: .3s;
}

.header-link:hover {
  transition: .3s; /* 変化時間 0.3秒 */
  background-color: #00a9de; /* 背景色 */
}

.tel{
  border-left:1px solid var(--line);
  padding-left:18px;
  display:flex;
  flex-direction:column;
  color:var(--blue-dark);
  line-height:1.2}
.tel small{
  font-size:11px;
  color:var(--muted)
}
.tel strong{
  font-size:20px;
  letter-spacing:.04em
}
.global-nav{background:var(--blue-dark)}.nav-inner{display:grid;grid-template-columns:repeat(8,1fr)}.nav-inner a{color:#fff;text-align:center;padding:13px 7px;font-weight:700;font-size:14px;border-right:1px solid rgba(255,255,255,.15)}.nav-inner a:first-child{border-left:1px solid rgba(255,255,255,.15)}.nav-inner a:hover{background:var(--blue);text-decoration:none}.emergency-bar{background:#eaf3f8;border-bottom:1px solid var(--line)}.emergency-bar .header-inner{min-height:38px;display:flex;align-items:center;gap:14px;font-size:13px}.emergency-bar span{background:var(--red);color:#fff;border-radius:4px;padding:1px 8px;font-weight:700}.emergency-bar strong{font-weight:600}.emergency-bar a{margin-left:auto;font-weight:700}
#container{width:min(1180px,calc(100% - 32px));margin:26px auto 0!important;display:block!important;float:none!important}.container,.page-main{width:100%}#leftcontent{display:none!important}#rightcontent{width:100%!important;float:none!important;margin:0!important;padding:0!important}#rightcontent>img{display:none}
.page-heading{background:#fff;border-left:5px solid var(--blue);padding:18px 22px;margin-bottom:20px;border-radius:8px;box-shadow:0 2px 10px rgba(23,50,77,.05)}
.page-heading .eyebrow{font-size:12px;color:var(--blue);font-weight:800;letter-spacing:.08em}
.page-heading h1{margin:0;font-size:28px;line-height:1.35;color:var(--ink)}
.page-heading p{margin:4px 0 0;color:var(--muted)}

#flasharea{display:none!important}#sinryo,#info,#byouintop,#sinryotop,#recruitbottom,#sitemaparea,
#footerbg{
  width:100%!important;
  max-width:none!important
}
#sinryo{background:#fff;border-radius:12px;padding:0;box-shadow:0 2px 12px rgba(23,50,77,.06);margin-bottom:20px}#sinryo>img{display:none}#sidearea{max-width:100%!important}#info{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(23,50,77,.06);padding:22px;margin-top:20px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px!important}.tabs a{background:#eef6fa;border:1px solid #cfe1eb;border-radius:7px;padding:8px 14px!important;color:var(--blue)!important;font-weight:700}.tabs a:hover{background:#dceff7}.tabtable{width:100%!important;border-collapse:collapse}.tabtable td{border-bottom:1px solid var(--line);padding:10px;vertical-align:top}.tabtable td:first-child{width:120px;white-space:nowrap}
#sitemaparea{background:#0f2f46!important;margin-top:36px!important;padding:30px 0!important;color:#dceaf2}#sitemap{width:min(1180px,calc(100% - 32px))!important;margin:auto!important;background:transparent!important}#linkarea{display:grid!important;grid-template-columns:repeat(4,1fr);gap:24px;padding:0!important}#linkarea h2{font-size:14px!important;color:#fff!important;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:7px}#linkarea a{color:#cde6f2}#linkarea ul{padding-left:18px!important}
#footerbg{
  background:#082436!important;
  color:#b8ccd7!important
}
.footer-inner{
  width:min(1180px,calc(100% - 32px));
  margin:auto
}
.footer-brand{
  font-size:20px;
  color:#fff;
  font-weight:700
}
.footer-meta{
  font-size:12px;
  margin-top:6px
}
.footer-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:12px
}
.footer-nav a{
  color:#cde6f2;
  font-size:13px
}
.footer-copy{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:20px;
  padding:12px 0;
  font-size:11px
}
#back-top{display:none}
/* Legacy content becomes modern cards/tables without changing the actual information. */
#rightcontent table{max-width:100%;border-color:var(--line)}#rightcontent td,#rightcontent th{border-color:var(--line)}#rightcontent p{max-width:100%}#rightcontent h2,#rightcontent h3{color:var(--ink)}#rightcontent input,#rightcontent select,#rightcontent textarea{border:1px solid #c9d8e2;border-radius:5px;padding:8px;background:#fff}#rightcontent button,#rightcontent input[type=submit]{background:var(--blue);color:#fff;border:0;border-radius:6px;padding:9px 18px;font-weight:700}
.home-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:0;background:linear-gradient(120deg,#eaf7fb 0%,#fff 58%);border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,70,110,.08);margin-bottom:22px}.hero-copy{padding:38px 42px}.hero-kicker{color:var(--blue);font-weight:800;letter-spacing:.08em;font-size:13px}.hero-copy h1{font-size:36px;line-height:1.35;margin:8px 0 12px;color:var(--blue-dark)}.hero-copy p{margin:0 0 20px;color:#486174}.hero-image{min-height:290px;background:url('image/doctor-sample.jpg') center/cover no-repeat}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.hero-actions a{background:var(--blue);color:#fff;padding:10px 18px;border-radius:6px;font-weight:700}.hero-actions a.alt{background:#fff;color:var(--blue);border:1px solid #bcd7e4}

.home-section,
.home-section-ryo,
.home-section-sin,
.home-section-isou,
.home-section-kanzo,
.home-section-kinen,
.home-section-tou,
.home-section-inful,
.home-section-qa,
.home-section-sougei,
.home-section-kensa,
.home-section-syokuji,
.home-section-rihabiri {
  background:#fff;
  border-radius:12px;
  padding:24px;
  margin:20px 0;
  box-shadow:0 2px 12px rgba(23,50,77,.06)
}

.section-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-bottom:2px solid var(--blue);
  padding-bottom:8px;
  margin-bottom:14px
}

.section-title-sin{
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-bottom:2px solid var(--blue);
  padding-bottom:8px;
}

.section-title h2{
  margin:0;
  font-size:23px
}
.section-title-sin h2{
  margin:0;
  font-size:23px
  
  font-size: 1.6rem;
  border-left: 8px solid #e67e22;
  padding-left: 12px;
  background: #fafafa;
  
}

.section-title small{
  color:var(--muted)
}

.section-title-sin small{
  color:var(--muted)
}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.quick-card{border:1px solid var(--line);border-radius:9px;padding:16px;background:#fff;transition:.15s}.quick-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(23,50,77,.08);text-decoration:none}.quick-card strong{display:block;color:var(--blue-dark);font-size:17px}.quick-card span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.notice-list{list-style:none;padding:0;margin:0}.notice-list li{display:grid;grid-template-columns:110px 90px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.notice-date{color:var(--muted);font-variant-numeric:tabular-nums}.notice-tag{font-size:11px;background:#eef6fa;color:var(--blue);border-radius:999px;padding:2px 7px;text-align:center;height:max-content}.home-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}.info-panel{border:1px solid var(--line);border-radius:10px;padding:18px}.info-panel h3{margin:0 0 8px;font-size:18px}.cta-panel{background:var(--blue-dark);color:#fff;border-radius:10px;padding:20px}.cta-panel h3{color:#fff;margin:0 0 6px}.cta-panel a{color:#fff;font-weight:700}
@media(max-width:900px){.nav-inner{grid-template-columns:repeat(4,1fr)}.header-actions 
.header-link{
  display:none
}
.home-hero{grid-template-columns:1fr}.hero-image{min-height:230px}.quick-grid{grid-template-columns:repeat(2,1fr)}.home-cols{grid-template-columns:1fr}#linkarea{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:600px){
body{
  font-size:15px
}.header-inner,.nav-inner,#container,#sitemap,
.footer-inner{
  width:calc(100% - 20px)
}
.header-inner{
  min-height:72px
}
.brand strong{font-size:21px}.brand-mark{width:38px;height:38px}
.tel{
  padding-left:10px
}
.tel strong{
  font-size:16px
}
.global-nav{overflow:hidden}.nav-inner{grid-template-columns:repeat(2,1fr)}.nav-inner a{font-size:13px;padding:9px 5px}.emergency-bar .header-inner{min-height:46px;gap:7px;flex-wrap:wrap;font-size:13px}.emergency-bar a{margin-left:0}.page-heading h1{font-size:23px}.page-heading{padding:14px 16px}#container{margin-top:14px!important}.home-hero{border-radius:10px}.hero-copy{padding:24px 20px}.hero-copy h1{font-size:28px}.hero-image{min-height:200px}
.home-section,
.home-section-ryo,
.home-section-sin,
.home-section-isou,
.home-section-kanzo,
.home-section-kinen,
.home-section-tou,
.home-section-inful,
.home-section-qa,
.home-section-sougei,
.home-section-kensa,
.home-section-syokuji,
.home-section-rihabiri {
  padding:16px;
  border-radius:9px
}
.quick-grid{grid-template-columns:1fr 1fr;gap:8px}.quick-card{padding:13px}.quick-card strong{font-size:15px}.notice-list li{grid-template-columns:78px 62px 1fr;gap:6px;font-size:13px}.tabtable{display:block;overflow-x:auto}.tabtable td:first-child{width:90px}.tabs a{padding:6px 9px!important;font-size:13px}#linkarea{grid-template-columns:1fr!important}.footer-nav{gap:6px 12px}}

#sitemaparea{display:none!important}

/* === Pale Green + Brown theme === */
:root{
  --green-pale:#eef7ed;
  --green-light:#d8ecd4;
  --green:#79aa72;
  --green-dark:#4f7650;
  --brown-pale:#f5eee6;
  --brown:#8a6748;
  --brown-dark:#604735;
  --ink:#39483d;
  --muted:#6d756f;
  --line:#d9e3d8;
  --bg:#f7f8f4;
  --blue:#4f7650;
  --blue-dark:#604735;
  --sky:#eef7ed;
}
body{
  background:var(--bg);
  color:var(--ink)
}
a{color:var(--green-dark)}
.site-header{border-top:5px solid var(--green);box-shadow:0 1px 0 rgba(96,71,53,.10)}
.brand{color:var(--brown-dark)}
.brand-mark{background:linear-gradient(135deg,var(--green),var(--brown));border-radius:50%;width:46px;height:46px}
.brand strong{color:var(--brown-dark)}
.brand small{color:var(--green-dark)}
.tel{
  color:var(--brown-dark);
  border-left-color:var(--line)
}
.tel-sub{
  color:var(--brown-dark);
  font-size:22px
}
.global-nav{background:var(--green-dark)}
.nav-inner a:hover{
  background:var(--brown);
}

@media (max-width: 853px) {
  .nav-inner a:hover{
    background:#c0fbc0;
  }
}


.emergency-bar{background:var(--brown-pale);border-bottom-color:#e7ddd2}
.emergency-bar span{background:var(--brown)}
.emergency-bar a{color:var(--green-dark)}
.page-heading{border-left-color:var(--green);background:#fff}
.page-heading .eyebrow{color:var(--green-dark)}


#info,#sinryo,
.home-section,
.home-section-ryo,
.home-section-sin,
.home-section-isou,
.home-section-kanzo,
.home-section-kinen,
.home-section-tou,
.home-section-inful,
.home-section-qa,
.home-section-sougei,
.home-section-kensa,
.home-section-syokuji,
.home-section-rihabiri {
  box-shadow:0 3px 14px rgba(96,71,53,.07)
}
.section-title{
  border-bottom-color:var(--green)
}

.section-title-sin{
  border-bottom-style: none;
}

.hero-actions a{background:var(--green-dark)}
.hero-actions a.alt{color:var(--green-dark);border-color:#b9d1b5;background:#fff}
.home-hero{background:linear-gradient(120deg,var(--green-pale),#fff 62%);box-shadow:0 6px 24px rgba(96,71,53,.08)}
.hero-copy h1{color:var(--brown-dark)}
.hero-kicker{color:var(--green-dark)}
.quick-card{border-color:var(--line)}
.quick-card strong{color:var(--green-dark)}
.quick-card:hover{border-color:#b7ceb3;box-shadow:0 6px 16px rgba(96,71,53,.08)}
.notice-tag{background:var(--green-pale);color:var(--green-dark)}
.css-tabs .tab-label{background:var(--green-pale);border-color:#c9ddc5;color:var(--green-dark)}
.css-tabs .tab-label:hover{background:var(--green-light)}
.css-tabs .tab-radio:nth-of-type(1):checked + .tab-label,
.css-tabs .tab-radio:nth-of-type(2):checked + .tab-label,
.css-tabs .tab-radio:nth-of-type(3):checked + .tab-label,
.css-tabs .tab-radio:nth-of-type(4):checked + .tab-label,
.css-tabs .tab-radio:nth-of-type(5):checked + .tab-label{background:var(--green-dark);border-color:var(--green-dark)}
.swiffy-link-card{border-color:var(--line);background:#fff}
.swiffy-link-card:hover{border-color:#b7ceb3}
.swiffy-link-icon{background:var(--brown-pale);color:var(--brown);}
.swiffy-link-card strong{color:var(--brown-dark)}
.swiffy-link-card b{color:var(--green-dark)}
#sitemaparea{background:var(--brown-dark)!important}
#footerbg{
  background:#49362b!important
}
#linkarea a,
.footer-nav a{
  color:#e4efe0
}
.cta-panel{background:var(--green-dark)}
#rightcontent button,#rightcontent input[type=submit]{background:var(--green-dark)}

/* Swiffyから抽出した元画像を再利用したメインビジュアル */
.hero-image{background-image:url('image/site/hero.jpg');background-position:center;background-size:cover;min-height:330px}
.swiffy-visual-grid{
	display:grid;
	grid-template-columns:1.35fr 1fr 1fr;
	gap:12px;
	margin-top:16px
}
.swiffy-visual-card{
	position:relative;
	display:block;
	overflow:hidden;
	border-radius:10px;
	background:#eee;
	border:1px solid var(--line);
	min-height:150px
}
.swiffy-visual-card img{
	width:100%;
	height:180px;
	object-fit:cover;
	display:block;
	transition:transform .2s
}
.swiffy-visual-card:first-child img{
	height:250px
}
.swiffy-visual-card:hover img{
	transform:scale(1.025)
}
.swiffy-visual-card span{
	position:absolute;
	left:10px;
	bottom:10px;
	background:rgba(96,71,53,.88);
	color:#fff;
	padding:5px 9px;
	border-radius:5px;
	font-size:12px;
	font-weight:700
}
.swiffy-source-note{font-size:12px;color:var(--muted);margin:12px 0 0}
/* iPad miniなどのタブレットサイズ（900px以下）での調整 */
@media (max-width: 900px) {
  .swiffy-visual-grid {
    /* 1つ目のカードを横いっぱいに広げるのをやめて、2列のままにする */
    grid-template-columns: 1fr 1fr !important; 
  }
  .swiffy-visual-card:first-child {
    grid-column: auto !important; /* 横幅いっぱいの指定を解除 */
  }
  .swiffy-visual-card img,
  .swiffy-visual-card:first-child img {
    height: auto !important;    /* iPad miniの画面幅に合わせた最適な画像の高さ（お好みで調整してください） */
  }
}

/* スマホサイズ（600px以下）は今まで通り1列にする */
@media (max-width: 600px) {
  .swiffy-visual-grid {
    grid-template-columns: 1fr !important;
  }
  .swiffy-visual-card img,
  .swiffy-visual-card:first-child img {
    height: auto !important;
  }
}


/* --- supplied hospital logo --- */
.brand-logo {
  width: 58px;
  height: 54px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand strong {
  color: var(--brown-dark);
}
.brand small {
  color: var(--green-dark);
}
@media (max-width: 600px) {
  .brand-logo {
    width: 48px;
    height: 46px;
    flex-basis: 48px;
  }
  .brand strong {
    font-size: 19px;
  }
}

/* Mobile overflow protection and editable homepage images */
html,body{max-width:100%;overflow-x:hidden}
#container,#rightcontent,.home-section,.home-section-ryo,.home-section-sin,.home-section-isou,home-section-kanzo,home-section-kinen,home-section-tou, home-section-inful, home-section-qa, .home-section-sougei, home-section-kensa, home-section-syokuji, .home-section-rihabiri, .home-hero,.swiffy-visual-grid,
.swiffy-visual-card{
	min-width:0;max-width:100%
}
#rightcontent{overflow-x:hidden}
#rightcontent img,#rightcontent iframe,#rightcontent video,#rightcontent canvas{max-width:100%!important;height:auto}
.swiffy-visual-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
.swiffy-visual-card{
	min-width:0;
	overflow:hidden
}
.swiffy-visual-card img{
	display:block;
	width:100%!important;
	max-width:100%!important;
	height:180px;
	object-fit:cover
}
@media(max-width:900px){.swiffy-visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 #container{width:calc(100% - 16px);max-width:100%;box-sizing:border-box}
 .home-hero,
 .home-section,
 .home-section-ryo,
 .home-section-sin,
 .home-section-isou,
 .home-section-kanzo,
 .home-section-kinen,
 .home-section-tou,
 .home-section-inful,
 .home-section-qa,
 .home-section-sougei,
 .home-section-kensa,
 .home-section-syokuji,
 .home-section-rihabiri {
   width:100%;
   box-sizing:border-box
 }
 .swiffy-visual-grid{grid-template-columns:1fr}
 .swiffy-visual-card img{
 	height:180px
 }
 .hero-copy h1{font-size:clamp(24px,7vw,30px);overflow-wrap:anywhere}
 .tabtable{width:100%!important;max-width:100%!important;table-layout:fixed}
 .tabtable td{white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}
}

.flex-container {
	display: flex;
	flex-direction: column; /* これで縦並びになります */
	align-items: center;    /* 縦並びのときの中央揃え */
	gap: 20px;              /* 文章と画像の間のすき間 */
}

/* ② 画面幅が768px以上のとき：パソコン向け（横並び） */
@media (min-width: 768px) {
	.flex-container {
		flex-direction: row; /* これで横並びに切り替わります */
		justify-content: space-between; /* 子要素の横方向の配置 */
		align-items: center; /* 子要素の縦方向の中央揃え */
		gap: 20px;
	}
	/* 追加：子要素である div の横幅を48%（半分弱）にする */
	.flex-container > div {
		width: 48%; /* 残りの4%が真ん中の程よい隙間になります */
	}	
}

/* ===================================================
   0. 前提：画面いっぱいに表示するためのリセット
   =================================================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* ===================================================
   1. 全体を包む親要素（基本構造）
   =================================================== */
.home-hero {
  display: flex;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #fff;
  
  /* スマホ（小さな画面）の時は縦並び */
  flex-direction: column;   
  height: auto;             
}

/* ===================================================
   2. 【重要】iPad（768px以上）・Surface・PC用の設定
   =================================================== */
@media (min-width: 768px) {
  .home-hero {
    flex-direction: row-reverse; /* 左にテキスト、右にスライドショー */
    
    /* 
      ★解決策①：高さを強制的にカチッと固定する
      これにより、中身の文字量や画像の有無に関わらず、このエリア全体の高さが固定されます。
      50dvh（画面の半分）が長すぎる場合は、400px などの絶対値に固定すると最も安定します。
    */
    height: 450px; 
    
    /* ★解決策②：左右の子要素の高さを強制的に引き揃える */
    align-items: stretch; 
  }

  /* [左側] テキストエリア */
  .hero-copy {
    width: 55%;
    height: 100% !important;    /* 親要素（450px）の高さを100%強制的に使う */
    padding: 40px 5% 40px 8%;    /* 上下の無駄な引き伸ばしを防ぐためpaddingを固定値に */
    display: flex;
    flex-direction: column;
    justify-content: center;     /* 文字を上下の「中央」に配置して余白を相殺 */
    align-items: flex-start;     
    text-align: left;
    box-sizing: border-box;
    background-color: #fff;      /* 背景を白にして隙間を隠す */
  }

  /* 文字サイズが溢れて高さを押し広げないようにガード */
  .hero-copy h1 {
    color: var(--blue-dark, #486174);
    font-size: clamp(22px, 3vw, 32px); 
    line-height: 1.35;
    margin: 0 0 12px 0;
  }

  .hero-copy p {
    color: #486174;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.6;
    margin: 0 0 20px 0;
  }

  /* [右側] スライドショー */
  .hero-slideshow {
    width: 45%;
    height: 100% !important;    /* 親要素（450px）の高さに100%ぴったり合わせる */
    position: relative;
    overflow: hidden;
    aspect-ratio: auto !important; /* アスペクト比の干渉を完全に削除 */
  }
  
  .home-section img{
    width: 100%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }
  .home-section-ryo img{
    width: 50%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }
  .home-section-sin img{
    width: 60%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }
  .home-section-isou img{
    width: 40%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }  
  .home-section-kanzo img{
    width: 58%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }
  .home-section-kinen img{
    width: 60%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }
  .home-section-tou img{
    width: 60%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }

  .home-section-qa img{
    width: 30px;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }

  .home-section-sougei img{
    width: 300px;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }
  
  .home-section-kensa img{
    width: 300px;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }
  .home-section-syokuji img{
    width: 40%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }

  .home-section-rihabiri img{
    width: 40%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }
  
	/* 特定の画像だけサイズ変更 */
	.large-img {
	  display: block;    /* 画像をブロック要素にする */
	  margin-left: auto; /* 左の余白を自動調整 */
	  margin-right: auto;/* 右の余白を自動調整 */
	  width: 300px; /* 1.5倍のサイズに */
	}
	.small-img {
	  display: block;    /* 画像をブロック要素にする */
	  margin-left: auto; /* 左の余白を自動調整 */
	  margin-right: auto;/* 右の余白を自動調整 */
	  width: 250px; /* 0.8倍のサイズに */
	}
}

/* ===================================================
   3. スマホ専用（767px以下）のスタイル（変更なし）
   =================================================== */
@media (max-width: 767px) {
  .hero-slideshow {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 10;     
  }
  
  .hero-copy {
    width: 100%;
    height: auto;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
  }

  .hero-copy h1 {
    color: var(--blue-dark, #486174);
    font-size: clamp(22px, 6vw, 26px);
    line-height: 1.35;
    margin: 0 0 12px 0;
  }

  .hero-copy p {
    color: #486174;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px 0;
  }
  
  .home-section, 
  .home-section-ryo,
  .home-section-sin,
  .home-section-isou, 
  .home-section-kanzo,
  .home-section-kinen,
  .home-section-tou,
  .home-section-inful,
  .home-section-qa,
  .home-section-sougei,
  .home-section-kensa,
  .home-section-syokuji,
  .home-section-rihabiri {
    position: relative;
    z-index: 1; /* 明示的に背景（0）より前に出す */
  }
  
  
  .home-section img,
  .home-section-ryo img,
  .home-section-sin img,
  .home-section-isou img,
  .home-section-kanzo img,
  .home-section-kinen img,
  .home-section-tou img,
  .home-section-inful img, 
  .home-section-kensa img,
  .home-section-syokuji img,
  .home-section-rihabiri img {
    width: 100%;
    display: block;    /* 画像をブロック要素にする */
    margin-left: auto; /* 左の余白を自動調整 */
    margin-right: auto;/* 右の余白を自動調整 */
  }
  

}

/* ===================================================
   4. 画像・アニメーションの共通設定
   =================================================== */
.hero-slideshow img {
  position: absolute;       
  inset: 0;
  width: 100% !important;
  height: 100% !important; 
  object-fit: cover;       
  opacity: 0; /* 最初は透明 */
  animation: slide 20s infinite;
}

/* 4枚の画像を5秒ずつずらして再生 */
.hero-slideshow img:nth-child(1) { animation-delay: 0s; }
.hero-slideshow img:nth-child(2) { animation-delay: 5s; }
.hero-slideshow img:nth-child(3) { animation-delay: 10s; }
.hero-slideshow img:nth-child(4) { animation-delay: 15s; }

/* 
  じわっと2秒かけて重なり合うキーフレーム
  5秒（25%）のサイクルのうち、2秒（10%）を切り替え時間に使用します
*/
@keyframes slide {
  0% { opacity: 0; }
  10% { opacity: 1; }   /* 2秒（10%）かけてじわっと表示 */
  25% { opacity: 1; }   /* 5秒時点（25%）から、スライド2が表示され始めると同時に… */
  35% { opacity: 0; }   /* …この画像は2秒（10%）かけてじわっと消える */
  100% { opacity: 0; }  /* 残りの時間は完全に非表示 */
}


/* --- 見出し全体の箱の調整 --- */
.page-heading-sub {
  background: #ccffcc;
  border-left: 5px solid #ffffff;
  
  /* ★ padding の指定を4方向それぞれに分けて、確実に左側（22px）を確保します */
  padding-top: 0px !important;     /* 上の余白：0 */
  padding-right: 22px !important;  /* 右の余白：22px */
  padding-bottom: 4px !important;   /* 下の余白：4px（文字の下が詰まるのを防ぐ） */
  padding-left: 22px !important;   /* 左の余白：22px（これで左端から離れます） */
  
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(23,50,77,.05);
  width: 75%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;   
  justify-content: center;  
  height: auto !important;
}

/* --- 小見出し（eyebrow）の調整 --- */
.page-heading-sub .eyebrow {
  font-size: 11px;
  color: #3b7a3b;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1 !important;                     
  margin: 0 !important;     /* ★すき間を完全にゼロに */
}

/* --- メインタイトル（h1）の調整 --- */
.page-heading-sub h1 {
  font-size: 23px;
  color: #1c7728;
  line-height: 1 !important;                     
  text-align: left;
  margin: 0 !important;     /* ★すき間を完全にゼロに */
}

/* --- 説明文（p）の調整 --- */
.page-heading-sub p {
  font-size: 13px;
  color: #1c7728;
  line-height: 1 !important;                     
  margin: 0 !important;     /* ★すき間を完全にゼロに */
}

/* ===================================================
   PC用の基本初期設定（ボタンやチェックボックスを隠す）
=================================================== */
.menu-checkbox,
.menu-btn {
  display: none;
}

/* ===================================================
   スマホ用の設定（画面幅768px以下）
=================================================== */
@media (max-width: 853px) {
  /* ① ヘッダーのレイアウト調整（縦に広げずコンパクトに！） */
  .header-top {
    position: relative;
    z-index: 100;
    padding: 0;
    background-color: #fff;
  }
  
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 【変更】中身をすべて「上詰め」に揃える */
    width: 100%;
    position: relative;
    /* 上の余白を15px、右側（ボタン用）を50px確保 */
    padding: 15px 50px 15px 15px; 
    box-sizing: border-box;
    height: auto;
  }

  /* ロゴエリアの最適化（1行に収まるようコンパクトに） */
  .brand {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #333;
  }
  .brand-logo img {
    height: 32px; /* ロゴ画像をスマホ用に一回り小さく */
    width: auto;
  }
  .brand small {
    display: block;
    font-size: 10px; /* 医療法人名を小さく */
    color: #666;
    line-height: 1.2;
  }
  .brand strong {
    font-size: 15px; /* 医院名を15pxにして横幅を節約 */
    line-height: 1.2;
  }

  /* 【重要】右側のアクションエリアの整理 */
  .header-actions {
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* ★変な隙間の原因！スマホではテキストリンクを非表示にしてスッキリさせる */
  .header-actions .header-link {
    display: none; 
  }

  /* 電話番号はテキストではなく「アイコン（または丸ボタン）」のように扱うと崩れない */
  .tel {
    display: inline-flex;
    flex-direction: column; /* 【新規】「代表」と「番号」を上下の縦並びにする */
    align-items: flex-start; /* 左揃えにして上端を綺麗に整列 */
    text-decoration: none;
    color: #333; /* 以前の青ボタン風から、通常の文字（またはお好みの色）に戻す場合 */
    line-height: 1.2;
    margin-top: 6px; /* 上端を揃えるため無駄な余白をカット */
  }
  .tel small {
     display: block; /* 【復活】非表示を解除 */
    font-size: 11px;
    color: #666;
    margin-bottom: 2px; /* 番号との隙間 */
  }
  .tel strong {
    font-size: 15px; /* ロゴの「医院」と同じサイズ感にして高さを美しく */
    font-weight: bold;
    white-space: nowrap; /* 途中で改行させない */
  }

  /* ② ハンバーガーボタン（label）を右端の隙間にピタッと配置 */
  .menu-btn {
    display: block;
    position: absolute; 
    /* ロゴの画像や「代表」の文字の上端とピタッと揃う位置に微調整（15px〜17px程度） */
    top: 20px; 
    right: 15px; 
    z-index: 200;
    cursor: pointer;
    width: 26px;
    height: 18px; 
    background: none;
    border: none;
    padding: 0;
    margin: 0;
  }
  
  /* 3本目の線（最後の子要素）の真下に文字を配置 */
  .menu-btn span:last-child {
    margin-bottom: 0; /* 3本目だけ下の余白を消す */
  }

  .menu-btn span:last-child::after {
    content: "MENU";
    position: absolute;
    top: 8px;          /* 3本目の線からどれくらい下に離すか */
    left: 50%;
    transform: translateX(-50%); /* 真ん中寄せ */
    font-size: 8px;
    font-weight: bold;
    color: #333;
    letter-spacing: 0.05em;
  }
  
  /* ボタンの三本線 */
  .menu-btn span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #333;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .menu-btn span:nth-child(1) { top: 0; }
  .menu-btn span:nth-child(2) { top: 8px; }
  .menu-btn span:nth-child(3) { bottom: 0; }

  /* ✕印に変形する時の動き（ここもそのまま） */
  .menu-checkbox:checked ~ .menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-checkbox:checked ~ .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-checkbox:checked ~ .menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }




  /* ③ ナビゲーション（.global-nav）の設定 */
  .global-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 150;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* フルスクリーン内のレイアウト */
  .global-nav .nav-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    gap: 20px;
  }

  .global-nav .nav-inner a {
    font-size: 18px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: center;
    padding: 8px 0;
  }

  /* ===================================================
     【重要】スイッチが入った（チェックされた）時の挙動
  =================================================== */
  .menu-checkbox:checked ~ .global-nav {
    transform: translateX(0);
  }

  /* チェックが入ったら、三本線ボタンを「✕」に変形 */
  .menu-checkbox:checked ~ .menu-btn span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .menu-checkbox:checked ~ .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-checkbox:checked ~ .menu-btn span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}


.selectbox-gakkai {
  position: relative;
  display: block;
  /* 【変更】fit-contentに加えて、最大幅を画面幅（100%）に制限する */
  width: fit-content;
  max-width: 100%; 
  margin: 0 auto 32px;
}

.selectbox-gakkai::before,
.selectbox-gakkai::after {
  position: absolute;
  content: '';
  pointer-events: none;
}

.selectbox-gakkai::before {
  display: inline-block;
  right: 0;
  width: 2.8em;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background-color: #2589d0;
}
.selectbox-gakkai::after {
  top: 50%;
  right: 1.4em;
  transform: translate(50%, -50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
}

.selectbox-gakkai select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 230px;
  /* 【追加】セレクトボックス自体の最大幅も100%にし、はみ出た長文は省略記号（…）にする */
  width: 100%;
  max-width: 100%;
  text-overflow: ellipsis; 
  
  height: 2.8em;
  padding: .4em 3.6em .4em .8em;
  border: 2px solid #2589d0;
  border-radius: 3px;
  background-color: #fff;
  color: #333333;
  font-size: 1em;
  cursor: pointer;
  box-sizing: border-box;
}

.selectbox-gakkai select:focus {
  outline: 1px solid #2589d0;
}

body {
  /* 画像のパスを指定 */
  background-image: url('image/tree-woods_00141.webp');

  /* 画像を繰り返さずに1枚だけ表示 */
  background-repeat: no-repeat;

  /* 画像を常に画面の中央に配置 */
  background-position: center;

  /* 画面全体を覆うように自動拡縮（比率を維持） */
  background-size: cover;

  /* スクロールしても背景画像を固定する（お好みで） */
  background-attachment: fixed;

  /* 背景の表示領域を画面全体の高さに合わせる */
  min-height: 100vh;
  margin: 0;
}

.table-dr-info {
  width: 50%;
  border-collapse: collapse;
}


.table-dr-info tr{
  border-bottom: solid 2px white;
}

.table-dr-info tr:last-child{
  border-bottom: none;
}

.table-dr-info th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #52c2d0;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.table-dr-info th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #52c2d0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.table-dr-info td{
  text-align: left;
  width: 100%;
  text-align: center;
  background-color: #eee;
  padding: 10px 0;
}




.table-dr-info-kenshin {
  width: 50%;
  border-collapse: collapse;
}


.table-dr-info-kenshin tr{
  border-bottom: solid 2px white;
}

.table-dr-info-kenshin tr:last-child{
  border-bottom: none;
}

.table-dr-info-kenshin th{
  position: relative;
  text-align: left;
  width: 80%;
  background-color: #008b8b;
  color: white;
  text-align: center;
  padding: 10px 0;
  font-size:16px;
}

.table-dr-info-kenshin th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #52c2d0;
}

.table-dr-info-kenshin td{
  text-align: left;
  width: 20%;
  text-align: center;
  background-color: #eee;
  padding: 10px 0;
}




.table-dr-info-kenshin-sub {
  width: 100%;
  border-collapse: collapse;
}


.table-dr-info-kenshin-sub tr{
  border-bottom: solid 2px white;
}

.table-dr-info-kenshin-sub tr:last-child{
  border-bottom: none;
}

.table-dr-info-kenshin-sub th{
  position: relative;
  text-align: left;
  width: 50%;
  background-color: #008b8b;
  color: white;
  text-align: center;
  padding: 10px 0;
  font-size:16px;
}

.table-dr-info-kenshin-sub th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #52c2d0;
}

.table-dr-info-kenshin-sub td{
  text-align: left;
  width: 50%;
  text-align: center;
  background-color: #eee;
  padding: 10px 0;
}



@media (max-width: 768px) {
  .table-dr-info {
    width: 100%;
    border-collapse: collapse;
  }
  .table-dr-info td{
    text-align: center;
    width: 70%;
    text-align: center;
    background-color: #eee;
    padding: 10px 0;
    font-size:14px;
  }
  
  .table-dr-info-kenshin {
    width: 100%;
    border-collapse: collapse;
  }
  .table-dr-info-kenshin td{
    text-align: center;
    width: 20%;
    text-align: center;
    background-color: #eee;
    padding: 10px 0;
    font-size:14px;
  }
  
  .table-dr-info-kenshin-sub {
    width: 100%;
    border-collapse: collapse;
  }
  .table-dr-info-kenshin-sub td{
    text-align: center;
    width: 60%;
    text-align: center;
    background-color: #eee;
    padding: 10px 0;
    font-size:14px;
  }


}

/* ① 画面幅が狭いとき：スマホ向け（縦並び） */
.flex-container-aisatu,
.flex-container-qa {
	display: flex;
	flex-direction: column; 
	align-items: center;
	gap: 20px;
}

/* ★ポイント1：縦並びのとき、tableとdivの両方を横幅100%（または共通の幅）にする */
.flex-container-aisatu > table,
.flex-container-aisatu > div {
	width: 100%;
	box-sizing: border-box; /* パディングによる幅のズレを防止 */
}

/* ★ポイント2：table特有の自動横幅計算を無効化し、CSSの幅(width)を絶対遵守させる */
.flex-container-aisatu > table {
	table-layout: fixed;
}

/* ② 画面幅が768px以上のとき：パソコン向け（横並び） */
@media (min-width: 768px) {
	.flex-container-aisatu {
		flex-direction: row; 
		justify-content: space-between; 
		align-items: flex-start; /* 縦方向のズレはこれで中央に揃います */
		gap: 20px;
	}
	
	/* ★ポイント3：div だけでなく table にも 48% の幅を適用する */
	.flex-container-aisatu > table,
	.flex-container-aisatu > div {
		width: 48%; 
	}

}


/* ① 画面幅が狭いとき：スマホ向け（縦並び） */
.flex-container-kenshin,
.flex-container-qa {
	display: flex;
	flex-direction: column; 
	align-items: center;
	gap: 20px;
}

/* ★ポイント1：縦並びのとき、tableとdivの両方を横幅100%（または共通の幅）にする */
.flex-container-kenshin > table,
.flex-container-kenshin > div {
	width: 100%;
	box-sizing: border-box; /* パディングによる幅のズレを防止 */
}

/* ★ポイント2：table特有の自動横幅計算を無効化し、CSSの幅(width)を絶対遵守させる */
.flex-container-kenshin > table {
	table-layout: fixed;
}

/* ② 画面幅が768px以上のとき：パソコン向け（横並び） */
@media (min-width: 768px) {
	.flex-container-kenshin {
		flex-direction: row; 
		justify-content: space-between; 
		align-items: flex-start; /* 縦方向のズレはこれで中央に揃います */
		gap: 20px;
	}
	
	/* ★ポイント3：div だけでなく table にも 48% の幅を適用する */
	.flex-container-kenshin > table,
	.flex-container-kenshin > div {
		width: 48%; 
	}

}



/* === 1. ページ全体を画面いっぱいに広げてフッターを下に押し出す設定 === */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* PCの大画面でも高さを最低100%保証 */
}

/* フッターの直上にあるメインコンテンツを自動で引き伸ばす */
main, .main-content {
  flex: 1 0 auto; 
}


/* === 2. フッターのスタイル（#footerbg から footer タグに変更） === */
footer {
  width: 100% !important;
  max-width: none !important;
  background: #49362b !important; /* シックな茶色 */
  color: #b8ccd7 !important;
  margin-top: auto; /* ★コンテンツが短くても強制的に最下部へ配置 */
}

/* === 3. フッター内部のスタイル（元の指定をそのまま維持） === */
.footer-inner {
  width: min(1180px, calc(100% - 32px));
  margin: auto;
}

.footer-brand {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}

.footer-meta {
  font-size: 12px;
  margin-top: 6px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 12px;
}

.footer-nav a {
  color: #e4efe0; /* 修正後の薄い緑色 */
  font-size: 13px;
}

.footer-copy {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 20px;
  padding: 12px 0;
  font-size: 11px;
}

/* スマホ等での横幅微調整 */
@media (max-width: 767px) {
  .footer-inner {
    width: calc(100% - 20px);
  }
}

/* 1. htmlとbodyの「両方」に高さを100%持たせる（これが抜けると浮き上がります） */
html {
  height: 100%;
  overflow: hidden;   /* 👈 外側のはみ出しを隠し、スクロールバーを消す */
  margin: 0;  
}

body {
  margin: 0;
  padding: 0;
  
  /* ▼ここが最重要！画面の縦幅を最低でも100%（100vh）確保し、縦並びにする */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* 背景画像の設定 */
  background-image: url('image/tree-woods_00141.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index:-1;
}

/* 2. フッターのスタイル */
footer {
  width: 100% !important;
  max-width: none !important;
  background: #49362b !important;
  color: #b8ccd7 !important;
  
  /* ▼ここが重要！上のコンテンツが短ければ、自動的に一番下へ押し下げられるお守り */
  margin-top: auto; 
}

.center-table {
  margin-left: auto;
  margin-right: auto;
  /* margin: 0 auto; という省略表記でもOKです */
  
  /* 必要に応じて横幅を指定（指定しない場合は中身のコンテンツ幅になります） */
  width: 70%;
  margin-bottom:20px;
}

/* スマホ等での横幅微調整 */
@media (max-width: 767px) {
	.center-table {
	  margin-left: auto;
	  margin-right: auto;
	  /* margin: 0 auto; という省略表記でもOKです */
	  
	  /* 必要に応じて横幅を指定（指定しない場合は中身のコンテンツ幅になります） */
	  width: 100%;
	  margin-bottom:20px;
	}
}

.numbered-text {
  padding-left: 1.5em;    /* 全体を右に1.5文字分ずらす */
  text-indent: -1.5em;   /* 1行目だけを左に1.5文字分戻す */
}

.flex-container-qa {
  display: flex; /* 横並びにする */
  align-items: flex-start; /* 上揃えにする（好みで center に変更可） */
  gap: 16px; /* 画像と文字の間の隙間 */
}

.flex-image-qa {
  width: 30px; /* 画像の幅を固定 */
  flex-shrink: 0; /* 【重要】画面が狭くなっても画像が縮まないようにする */
  height: auto;
}

.flex-text-qa {
  flex-grow: 1; /* 【重要】残りの横幅をすべてこの要素で埋める */
}

/* ===================================================
   1. 既存の home-section からコピーしたCSS（一例）
   =================================================== */

/* ===================================================
   2. 横並びにするための専用CSS（ここを追加！）
   =================================================== */
/* home-section-qa の中にある flex-container だけを強力に横並びにする */
.home-section-qa .flex-container {
  display: flex !important;
  flex-direction: row !important; /* 確実に横並び（ロー）にする */
  align-items: flex-start; /* 上揃え */
  gap: 20px; /* 画像と文字の間のすき間 */
  width: 100%;
}

/* 画像の幅を固定 */
.home-section-qa .flex-container .flex-image {
  width: 30px !important; /* あなたのお好みの画像幅（px）に調整してください */
  flex-shrink: 0 !important; /* 画面が狭くなっても絶対に画像を縮ませない */
  height: auto;
}

/* 文字部分を残り幅いっぱいに広げる */
.home-section-qa .flex-container .flex-text {
  flex-grow: 1 !important;
  min-width: 0; /* 文字が長すぎた時に画像が潰れるのを防ぐ魔法のコード */
}

/* ===================================================
   2. 横並びにするための専用CSS（ここを追加！）
   =================================================== */
/* home-section-sougei の中にある flex-container だけを強力に横並びにする */
.home-section-sougei .flex-container {
  display: flex !important;
  flex-direction: row !important; /* 確実に横並び（ロー）にする */
  align-items: flex-start; /* 上揃え */
  gap: 20px; /* 画像と文字の間のすき間 */
  width: 100%;
}

/* 画像の幅を固定 */
.home-section-sougei .flex-container .flex-image {
  width: 30px !important; /* あなたのお好みの画像幅（px）に調整してください */
  flex-shrink: 0 !important; /* 画面が狭くなっても絶対に画像を縮ませない */
  height: auto;
}

/* 文字部分を残り幅いっぱいに広げる */
.home-section-sougei .flex-container .flex-text {
  flex-grow: 1 !important;
  min-width: 0; /* 文字が長すぎた時に画像が潰れるのを防ぐ魔法のコード */
}

/* ===================================================
   2. 横並びにするための専用CSS（ここを追加！）
   =================================================== */
/* home-section-kensa の中にある flex-container だけを強力に横並びにする */
.home-section-kensa .flex-container {
  display: flex !important;
  flex-direction: row !important; /* 確実に横並び（ロー）にする */
  align-items: flex-start; /* 上揃え */
  gap: 20px; /* 画像と文字の間のすき間 */
  width: 100%;
}

/* 画像の幅を固定 */
.home-section-kensa .flex-container .flex-image {
  width: 30px !important; /* あなたのお好みの画像幅（px）に調整してください */
  flex-shrink: 0 !important; /* 画面が狭くなっても絶対に画像を縮ませない */
  height: auto;
}

/* 文字部分を残り幅いっぱいに広げる */
.home-section-kensa .flex-container .flex-text {
  flex-grow: 1 !important;
  min-width: 0; /* 文字が長すぎた時に画像が潰れるのを防ぐ魔法のコード */
}


/* ===================================================
   2. 横並びにするための専用CSS（ここを追加！）
   =================================================== */
/* home-section-sougei-sub の中にある flex-container だけを強力に横並びにする */
.home-section-sougei-sub .flex-container {
  display: flex !important;
  flex-direction: row !important; /* 確実に横並び（ロー）にする */
  align-items: flex-start; /* 上揃え */
  gap: 20px; /* 画像と文字の間のすき間 */
  width: 100%;
}

/* 画像の幅を固定 */
.home-section-sougei-sub .flex-container .flex-image {
  width: 30px !important; /* あなたのお好みの画像幅（px）に調整してください */
  flex-shrink: 0 !important; /* 画面が狭くなっても絶対に画像を縮ませない */
  height: auto;
}

/* 文字部分を残り幅いっぱいに広げる */
.home-section-sougei-sub .flex-container .flex-text {
  flex-grow: 1 !important;
  min-width: 0; /* 文字が長すぎた時に画像が潰れるのを防ぐ魔法のコード */
}


/* 全体を横に並べる親コンテナ */
.flex-container-qa {
  display: flex;
  flex-direction: row;
  gap: 24px; /* セットとセットの間の隙間（お好みで調整） */
  width: 100%;
  background-color: #fff; /* 背景が白なら、残りは自動で白い空白になります */
}

/* 全体を横に並べる親コンテナ */
.flex-container-sougei {
  display: flex;
  flex-direction: row;
  gap: 24px; /* セットとセットの間の隙間（お好みで調整） */
  width: 100%;
  background-color: #fff; /* 背景が白なら、残りは自動で白い空白になります */
}

/* 全体を横に並べる親コンテナ */
.flex-container-sougei img {
  display: flex;
  flex-direction: row;
  gap: 24px; /* セットとセットの間の隙間（お好みで調整） */
  width: 45%;
  background-color: #fff; /* 背景が白なら、残りは自動で白い空白になります */
}


/* 全体を横に並べる親コンテナ */
.flex-container-sougei-sub {
  display: flex;
  flex-direction: row;
  gap: 24px; /* セットとセットの間の隙間（お好みで調整） */
  width: 100%;
  background-color: #fff; /* 背景が白なら、残りは自動で白い空白になります */
}

/* 全体を横に並べる親コンテナ */
.flex-container-sougei-sub img {
  display: flex;
  flex-direction: row;
  gap: 24px; /* セットとセットの間の隙間（お好みで調整） */
  width: 70%;
  background-color: #fff; /* 背景が白なら、残りは自動で白い空白になります */
}

@media (max-width: 767px) {
  .flex-container-sougei-sub img {
    display: flex;
    flex-direction: row;
    gap: 24px; /* セットとセットの間の隙間（お好みで調整） */
    width: 100%;
    background-color: #fff; /* 背景が白なら、残りは自動で白い空白になります */
  }
}

/* 全体を横に並べる親コンテナ */
.flex-container-kensa {
  display: flex;
  flex-direction: row;
  gap: 24px; /* セットとセットの間の隙間（お好みで調整） */
  width: 100%;
  background-color: #fff; /* 背景が白なら、残りは自動で白い空白になります */
}

/* 全体を横に並べる親コンテナ */
.flex-container-kensa img {
  display: flex;
  flex-direction: row;
  gap: 24px; /* セットとセットの間の隙間（お好みで調整） */
  width: 80%;
  background-color: #fff; /* 背景が白なら、残りは自動で白い空白になります */
}

/* 👈 左側のテキストが入るdiv（幅を固定する） */
.flex-container-kensa > div:first-child {
  flex-shrink: 0;          /* 画面が狭くなっても絶対に縮まないようにする */
  width: 50%;            /* 【重要】テキストエリアの幅をここで固定（好きな数値に調整してください） */
}

@media (max-width: 767px) {
  .flex-container-kensa img {
    display: flex;
    flex-direction: row;
    gap: 24px; /* セットとセットの間の隙間（お好みで調整） */
    width: 60%;
    background-color: #fff; /* 背景が白なら、残りは自動で白い空白になります */
  }
  
  .flex-container-kensa {
    flex-direction: column; /* 縦並びにする */
    gap: 20px;              /* スマホ時のテキストと画像の間の余白 */
  }

  /* 👈 左側だったテキストのdiv（スマホ時は100%に） */
  .flex-container-kensa > div:first-child {
    width: 100%;            /* 固定を解除して横幅100%にする */
  }  
}




/* 「画像＋二文字」の塊 */
.qa-item {
  display: flex;
  align-items: center; /* 画像と文字の縦のセンターを合わせる */
  gap: 8px; /* 画像と文字の間の隙間 */
  flex-shrink: 0; /* 画面が狭くなってもこの塊ごと潰れないようにする */
}

/* 30pxの画像（アイコン） */
.qa-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* 二文字のテキスト */
.qa-text {
  font-size: 16px;
  white-space: nowrap; /* 二文字が絶対に改行されないようにする */
}

.short-row th,
.short-row td {
  height: 30px;          /* 希望の高さ */
  padding-top: 0;        /* 上下の余白を削る */
  padding-bottom: 0;
  line-height: 1.2;      /* 行間を詰める */
  white-space: nowrap;  /* 文字の改行を防ぐ */
  background-color:#8b4513;
  font-size:14px  
}

.text-bg {
  display: inline-block;
  background-color: #ffdab9; /* 背景色（黄色） */
  border-radius: 10px;        /* 角の丸み（数字を大きくするともっと丸くなります） */
  padding: 2px 3px;         /* 上下・左右の文字まわりの余白 */
  font-size:16px;
  font-weight:bold;
}

/* ==========================================
   1. すべての端末で共通のベース設定（潜り込み防止）
   ========================================== */
.css-tabs {
  display: flex;
  flex-wrap: wrap; /* ボタンが溢れたら自動で折り返す設定を標準にする */
  gap: 8px 6px;    /* ボタン同士のすき間（上下 8px / 左右 6px） */
  width: 100%;
  position: relative;
  margin-top: 15px;
  box-sizing: border-box;
}

/* ラジオボタンは常に非表示 */
.css-tabs .tab-radio {
  display: none;
}

/* --- タブボタンの基本スタイル --- */
.css-tabs .tab-label {
  flex: 0 1 auto; /* 文字量に合わせた自然な幅。勝手に潰れたり広がったりしない */
  background: var(--green-pale);
  border: 1px solid #c9ddc5;
  color: var(--green-dark);
  padding: 10px 16px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 4px; /* ボタンらしい角丸に */
  font-size: 14px;
}

.css-tabs .tab-label:hover {
  background: var(--green-light);
}

/* 選択されたタブボタンの見た目 */
.css-tabs .tab-radio:nth-of-type(1):checked + .tab-label,
.css-tabs .tab-radio:nth-of-type(2):checked + .tab-label,
.css-tabs .tab-radio:nth-of-type(3):checked + .tab-label,
.css-tabs .tab-radio:nth-of-type(4):checked + .tab-label,
.css-tabs .tab-radio:nth-of-type(5):checked + .tab-label {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
}

/* --- ★タブの中身：どんな端末でも絶対に横幅100%を維持する設定 --- */
.css-tabs .tab-panel {
  flex: 1 1 100%;    /* ★ボタンの並びに関係なく、強制的に次の行へ回り込ませて100%広げる */
  width: 100%;       /* 確実に幅100%を保証 */
  display: none;     /* 初期状態は非表示 */
  padding: 20px 0;
  border-top: 2px solid var(--green-dark);
  box-sizing: border-box;
}

/* ラジオボタンがチェックされたら、対応するパネルを表示する */
#home-tab-1:checked ~ #home-panel-1,
#home-tab-2:checked ~ #home-panel-2,
#home-tab-3:checked ~ #home-panel-3,
#home-tab-4:checked ~ #home-panel-4,
#home-tab-5:checked ~ #home-panel-5 {
  display: block;
}

/* お知らせテーブルも確実に100%に広げる */
.css-tabs .tabtable {
  width: 100% !important;
  border-collapse: collapse;
}


/* ==========================================
   2. PCなど【大きな画面（横幅 1024px 以上）】のときだけの調整
   ========================================== */
@media (min-width: 1024px) {
  .css-tabs .tab-label {
    /* PCの大画面ではボタンを均等に横1列に並べたい場合、ここを有効にします */
    /* 5つのボタンを均等幅にしたい場合は 1、文字幅に合わせるなら auto のまま */
    flex: 1; 
  }
}

.kyotaku_row {
  display: flex;
  align-items: flex-start; /* 縦方向の揃えを「上揃え」に固定 */
  text-align:right;
  justify-content: flex-end;
  width: 100%;               /* 親要素の横幅いっぱいに広げる */
}

.kyotaku_label {
  flex-basis: 120px; /* 左側の幅を固定 */
  flex-shrink: 0;    /* 画面が狭くなっても左側が潰れないようにする */
  font-weight: bold;
  text-align:right;
}

.kyotaku_value {
  flex-grow: 1;      /* 右側のスペースをいっぱいに使う */
  max-width: 280px;
}

/* 📱 画面幅が 1024px 以下のとき（スマホ・タブレット） */
@media (max-width: 1024px) {
  .kyotaku_row {
    justify-content: flex-end; /* ★右寄せをやめて「左寄せ」にする */
  }
  .kyotaku_label {
    flex-basis: 70px; /* スマホ用にラベルの固定幅を少し狭く調節する */
  }
}

/* 📱 Galaxy Z Fold5のカバー画面など、横幅が極端に狭いスマホ向け */
@media (max-width: 360px) {
  .kyotaku_label {
    flex-basis: 60px;    /* ラベル幅をさらに細くして右側を広げる */
    font-size: 0.9rem;   /* 全体的に文字をほんの少し小さくして収める */
  }
  .kyotaku_value {
    font-size: 0.9rem;
  }
}

/* 通常（PCサイズ）は非表示 */
.sp-only {
  display: none;
}

/* 画面幅が767px以下（スマホサイズ）になったら表示する */
@media screen and (max-width: 767px) {
  .sp-only {
    display: inline-block; /* もしくは、縦並びにするなら block */
  }
}


/* 親コンテナの設定 */
.flex-container-dia {
  display: flex;
  width: 100%;       /* 画面幅（または親要素）いっぱいに広げる */
  gap: 10px;         /* 画像同士の隙間（不要なら 0 にする） */
  box-sizing: border-box;
}

/* 子要素（各画像の枠）の設定 */
.flex-item {
  flex: 1;           /* 3枚の幅を完全に均等（1:1:1）にする */
  aspect-ratio: 16 / 9; /* 画像の縦横比を揃える（例: 16対9、正方形なら 1 / 1） */
  text-align:left;
}

/* 画像自体の設定 */
.flex-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を維持したまま、枠いっぱいに拡大・トリミングする */
  display: block;    /* 画像下部に生じる謎の隙間を消す */
}

/* 【ポイント3】追加：spanタグの調整 */
.flex-item span {
  display: block;       /* インラインからブロック要素にして確実に左端から始める */
  width: 100%;          /* 幅いっぱいに広げる */
  text-align: left;     /* 念押しで左寄せ */
  margin-top: 8px;      /* 画像と文字の間の隙間（お好みで調整） */
  font-size: 14px;      /* 文字の大きさ（お好みで） */
}

/* ===================================================
   2. iPad・タブレット用の設定（画面幅 1024px 以下）
=================================================== */
@media (max-width: 1024px) {
  .flex-item {
    /* 3枚横並びのまま、画像の高さを抑えて「もっと横長」にする */
    aspect-ratio: 21 / 9;  
  }
}

/* ===================================================
   3. スマホ用の設定（画面幅 599px 以下）
=================================================== */
@media (max-width: 599px) {
  .flex-container-dia {
    flex-direction: column; /* スマホだけは縦1列に並べる */
  }

  .flex-item {
    width: 100%;            
    aspect-ratio: 16 / 9;   /* スマホでは見やすい高さに戻す */
  }
}