/*.general-wrap{
  background-image: url(img/medical/pic_medical_yello.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
*/

.vaccination-wrap,.care-wrap{
margin-top: 10vw;
}

.medical-item__h4{
  word-break: break-word;
  width: 50%; /* 80%の幅で折り返す */
  max-width: 1000px; /* PCでは最大1000pxまで広がる */
  margin: 0 auto 0 10%; /* 左側の余白を増やして少し左に寄せる */
  font-weight: 500;    
  margin-bottom: 3vw;
}

.section-medical{
    background-color: var(--primary-700);
}


/********* 画像共通 *********/


.image-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: 0;
}

.fixed-image {
  position: absolute;
  top: 90px; /* PCビューでの初期位置を維持 */
  right: -5%; /* PC・スマホともに右寄せ */
  width: 100%;
  width: clamp(200px, 45vw, 600px); /* 画面サイズに応じてスムーズに縮小 */
  height: auto;
  z-index: -1; /* 他の要素の影響を受けないように */
}

.fixed-image-green {
  position: absolute;
  top: 20px; /* PCビューでの初期位置を維持 */
  right: 0; /* PC・スマホともに右寄せ */
  width: 100%;
  width: clamp(200px, 45vw, 1200px); /* 画面サイズに応じてスムーズに縮小 */
  height: auto;
  opacity: 0.8;
  z-index: -1; /* 他の要素の影響を受けないように */
}

.fixed-image-blue {
  position: absolute;
  top: 20px; /* PCビューでの初期位置を維持 */
  right: 0; /* PC・スマホともに右寄せ */
  width: 100%;
  width: clamp(200px, 45vw, 1200px); /* 画面サイズに応じてスムーズに縮小 */
  height: auto;
  opacity: 0.8;
  z-index: -1; /* 他の要素の影響を受けないように */
}

/* PCサイズ */
@media (max-width: 1700px) {
  .fixed-image,
  .fixed-image-green,
  .fixed-image-blue {
    max-width: 800px; /* 画像を縮小 */
    top: -20px; /* 少し上に移動 */
  }
}


/* スマホサイズ */
@media (max-width: 768px) {
  .image-container {
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 20px; 
  }

  /* 画像サイズを完全固定 */
  .fixed-image {
    top: 50px;
    width: 200px;  /* 幅を固定 */
    height: auto;  /* 高さはアスペクト比を維持 */
	margin-top: 10px !important; /* スマホでは余白を小さくする */
  }

  .fixed-image-green,
  .fixed-image-blue {
    width: 200px;  /* 幅を固定 */
    height: auto;  /* 高さはアスペクト比を維持 */
	margin-top: 100px !important; /* スマホでは余白を小さくする */
  }
}



/********* 一般診療 *********/
/********* テキスト *********/
.text-primary-orange{
  color: #FF754B !important;
  font-weight: 500;
  font-size: clamp(16px, 2.5vw, 25px);
  word-break: break-word;
  line-height: 1.8;
  width: 50%; 
  max-width: 1000px; /* PCでは最大1000pxまで広がる */
  margin: 0 auto 0 5%; /* 左側の余白を増やして少し左に寄せる */
}


.medical-description {
  line-height: 1.8;
  color: #333;
  max-width: 1000px;
  width: 80%; /* 80%の幅で折り返す */
  margin: 0 auto 0 5%;
  margin-bottom:50px;
}

p.medical-description {
  line-height: 1.5  !important; /* 行間を狭く */
  margin-bottom: 10px; /* 段落間の余白を減らす */
}

.medical-introduction{
  width: 80%;
  margin: 0 auto;
}


.medical-text {
  line-height: 1.8;
  color: #333;
  max-width: 900px; /* 折り返す幅を広く */
  width: clamp(70%, 85%, 900px); /* 幅を広めに確保 */
  margin: 0;
}

@media (max-width: 768px) {
  .medical-text {
    width: 90%; /* スマホでは幅を広めに */
  }
}

@media (max-width: 480px) {
  .medical-text {
    width: 95%; /* より狭い画面でも適応 */
  }
}



/* タブレットサイズ */
@media (max-width: 1300px) {
  .medical-description {
    /*margin-left: 8vw !important; 左余白を減らしてバランスを取る 
    width: 85%; */
  }
}

/* タブレットサイズ */
@media (max-width: 1300px) {
  .text-primary-orange {
     /*margin-left: 8vw !important; 左余白を減らしてバランスを取る */
    width: 50%; 
  }
}

@media (max-width: 768px) { 
  .text-primary-orange,
  .medical-description {
    /*margin-left: 0 !important;  スマホ時の余白をさらに調整 
    width: 90%;  80% → 90% に変更して可読性を確保 */
    margin: 0;
    width: 100%;
  }
  
  .medical-introduction{
    width: 100%;
  }
}


/*********　ご予約について *********/

.text-frame-medical{
  display: inline-block;
  padding: 1rem 2rem;
  border: 2px solid var(--secondary-y-500);
  border-radius: 10px;
  margin-top:50px;
}

 
 
 /*********　受診するか迷ったら *********/
 
.text-medical-orange {
  color: #FF754B !important;
}

h3.text-medical-orange {
  color: #FF754B !important;
  margin-bottom:30px;
}
 
.medical-list {
  list-style: disc !important;  /* デフォルトの黒丸リストを表示 */
  text-indent: -20px;
}
@media (max-width: 768px) { 
  .medical-list {
    padding-left:20px;
  }
}

.medical-list li {
  text-align: left; /* 左寄せ */
}


.text-medical-red {
  color: #F0191D !important;
  padding: 10px 30px 10px 30px; /* 上　右　下　左 */
}

.attention-icon:before{
  content: "";
  position: absolute;
  background: url(https://shimasaki-demo.uptv.info/wp-content/themes/cocoon-child-master/img/deco/icon_attention.png) no-repeat center / cover;
  width: 30px;
  height: 30px;
  transform: translate(-148px, 0%);
  bottom: 10px;
}

.attention-icon:after{
  content: "";
  position: absolute;
  background: url(https://shimasaki-demo.uptv.info/wp-content/themes/cocoon-child-master/img/deco/icon_attention.png) no-repeat center / cover;
  width: 30px;
  height: 30px;
  transform: translate(120px, 0%);
  bottom: 10px;
}

.text-l-medical {
  padding: 0px 30px 0px 30px; /* 上　右　下　左 */
  text-align: left;
}
/* タブレットサイズ */
@media (max-width: 768px) { 
  .attention-icon:before{
    transform: translate(-135px, 0%);
  }
  .attention-icon:after{
    transform: translate(105px, 0%);
  }
  .text-l-medical {
    padding: 0px; 
  }
}





.wrapper {
  position: relative; /* 基準となる要素 */
  min-height: 100vh; /* 最低でも画面全体の高さを確保 */
  /* padding-top: 100px;  上部の余白を適宜調整 */
  background: linear-gradient(to bottom, transparent 10%, var(--secondary-y-100) 10%);
}
/* タブレットサイズ */
@media (max-width: 768px) { 
  .wrapper {
    background: linear-gradient(to bottom, transparent 5%, var(--secondary-y-100) 5%);
  }
}

.background-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%; /* `.wrapper` の高さ全体を背景にする */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1430' height='352' viewBox='0 0 1430 352' fill='none'%3E%3Cpath d='M0 174.233C0 174.233 168.5 0.000164936 718.5 0.000164936C1250.5 0.000164936 1430 174.233 1430 174.233V351.833H0V174.233Z' fill='%23FFFBEC'/%3E%3C/svg%3E");
  background-size: cover; /* 画面幅いっぱいに背景を広げる */
  background-position: center top; /* 背景を上部に配置 */
  background-repeat: no-repeat;
  z-index: -1; /* 背景として機能させるために後ろへ */
}

/* タブレットサイズ */
@media (max-width: 768px) { 
  .background-svg {
    height: 5%; 
  }
}


.content-wrapper {
  position: relative; /* 背景と重ならないように調整 */
  z-index: 1;
  padding-bottom: 50px; /* 下部の余白を追加してレイアウト崩れを防ぐ */
}

/* メニューを横並び＆間隔をあける */
.toggle-menu {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  gap: 30px; /* ボタンの間隔 */
  justify-content: center;
}

/* スマホサイズのみ表示 */
@media screen and (min-width: 768px) {
  .toggle-menu {
    display: none;
  }
}

.toggle-text {
  display: block;
  color: #FF754B;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  transition: background 0.3s;
  
}

/* クリック後もテキストが消えないように */
.toggle-text:visited,
.toggle-text:active,
.toggle-text:focus {
  color: #FF754B;
  text-decoration: none;
}






/********* 予防接種 *******/

.bg-light-green {
    background-color: #FAFDFA;
}


/********* テキスト *********/
.text-primary-green {
  color: #91CF94 !important;
  font-weight: 500;
  font-size: clamp(16px, 2.5vw, 25px);
  word-break: break-word;
  line-height: 1.8;
  width: 50%; 
  max-width: 1000px; /* PCでは最大1000pxまで広がる */
  margin: 0 auto 0 5%; /* 左側の余白を増やして少し左に寄せる */
 
}

@media (max-width: 768px) { 
  .text-primary-green {
    /*margin-left: 5vw !important;  スマホ時の余白をさらに調整 
    width: 90%; /* 80% → 90% に変更して可読性を確保 */
    margin: 0;
    width: 100%;
  }
}


.text-frame-medical-green {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 10px;
  border: 2px solid var(--secondary-g-500)!important;
}

 
  .text-medical-green-re {
  line-height: 1.8;
  color: #333;
  max-width: 1000px;
  width: clamp(60%, 90%, 1000px); /* 最小60%、最大1000px */
  margin: 0;
  
} 

@media (max-width: 768px) {
  text-medical-green-re {
    width: 85%; /* モバイル時に調整 */
    margin-left: 12%; /* さらに左に寄せる */
	margin-top:20px !important;
  }
}

@media (max-width: 480px) {
  text-medical-green-re {
    width: 80%  !important;
    margin-left: 12%;
	margin-top:20px  !important;
  }
}
 
 
 .text-medical-green {
  line-height: 1.8;
  color: #333;
  max-width: 1000px;
  width: clamp(60%, 90%, 1000px); /* 最小60%、最大1000px */
  
}

h3.text-medical-green {
  color: #C3E8C5 !important;
  margin-bottom:30px;
}

@media (max-width: 768px) {
  text-medical-green {
    width: 85%; /* モバイル時に調整 */
  }
}

@media (max-width: 480px) {
  text-medical-green {
    width: 80%;
  }
}
 


 .text-medical-yellow {
  color: #FFD123 !important;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.8;
  color: #333;
  max-width: 1000px;
  width: clamp(60%, 90%, 1000px); /* 最小60%、最大1000px */
  margin: 0 auto 0 clamp(5%, 10%, 15%); /* 余白を可変にする */
}

h3.text-medical-yellow {
  color: #FFD123 !important;
  margin-bottom:30px;
  font-size: clamp(16px, 2vw, 20px);
}

p.medical-vaccination-text {
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.8;
  color: #333;
  max-width: 80%;
  margin: 0;
  padding-left: 2%;
}


@media (max-width: 768px) {
  p.medical-vaccination-text {
    width: 100%; /* モバイル時に調整 */
    margin-left: 3%; /* さらに左に寄せる */
  }
  .vaccination-inner{
    margin-top: 15vw;
  }
  
}

@media (max-width: 480px) {
  p.medical-vaccination-text {
    width: 100%;
    margin-left: 3%;
  }
}




/********* 枠線 *********/
.notice-box-blue {
  border: 2px solid #76C2E5 !important; /* 枠線の色を指定 */
 }
 

/********* 乳児検診 *********/

.text-primary-blue {
  color: #589BBA !important;
  font-weight:500;
  font-size: clamp(16px, 2.5vw, 25px);
  word-break: break-word;
  line-height: 1.8;
  width: 50%; /* 80%の幅で折り返す */
  max-width: 1000px; /* PCでは最大1000pxまで広がる */
  margin: 0 auto 0 5%; /* 左側の余白を増やして少し左に寄せる */
}


@media (max-width: 768px) { 
  .text-primary-blue {
    margin-left: 5vw !important; /* スマホ時の余白をさらに調整 */
    width: 90%; /* 80% → 90% に変更して可読性を確保 */
  }
}


.text-frame-medical-blue {
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 10px;
  margin-top:50px;
  border: 2px solid #589BBA !important; /* 枠線の色を指定 */
}
 
.text-medical-blue {
  color: #589BBA !important;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.8;
  color: #333;
  max-width: 1000px;
  width: clamp(60%, 90%, 1000px); /* 最小60%、最大1000px */
  margin: 0;
}


h3.text-medical-blue {
  margin-bottom:30px; 
  font-size: clamp(16px, 2vw, 20px);
}

 

 
.row {
  display: flex;
  align-items: stretch;
}

.col-md-6 {
  display: flex;
  flex-direction: column;
  margin-bottom:50px !important;
}


.notice-box {
  flex: 1;
  width: 100%; /* 横幅を崩さないように */
  max-width: 90%; /* 必要なら元の制限を復活 */
  margin: 0 auto; /* センター配置 */
}

@media (max-width: 768px) {
  .col-md-6 {
  margin-bottom:50px;
  }
}




/********* タイトルの装飾　旗 *******/
/* オレンジ */
.flag-bg__orange {
  background: url(img/deco/flag_orange.png);
  position: relative; /* absolute をやめて相対位置 */
  margin-left: clamp(100px, 16vw, 300px); /* 他のテキストと位置を統一 */
  display: inline-block; /* サイズが崩れないように */
}

/* タブレットサイズ */
@media (max-width: 1024px) {
  .flag-bg__orange {
margin-left: 10vw !important;
  }}


@media (max-width: 768px) { /* スマホ時 */
  .flag-bg__orange {
    position: relative !important;
    margin-left: clamp(-50px, -10vw, 0px) !important; /* もっと左へ */
    margin-top: 50px !important; /* スマホでは余白を小さくする */
  }
}



/* 緑 */


/* タブレットサイズ */
@media (max-width: 1024px) {
  .flag-bg__green {
   margin-left: 10vw !important;
  }}


@media (max-width: 768px) { /* スマホ時 */
  .flag-bg__green {
   margin-left: 10vw !important;
  }
}



/* 青 */
.flag-bg__blue{
  background: url(img/deco/flag_blue.png);
  position: relative; /* absolute をやめて相対位置 */
/*  margin-left: clamp(100px, 16vw, 300px);  他のテキストと位置を統一 */
/*　margin-top: clamp(150px, 14vw, 900px);  画面サイズに応じて調整 */
  display: inline-block; /* サイズが崩れないように */
  /*margin-left: 10vw !important;*/
}

/* タブレットサイズ */
@media (max-width: 1024px) {
  .flag-bg__blue {
  margin-left: 10vw !important;
  }}


@media (max-width: 768px) { /* スマホ時 */
  .flag-bg__blue {
  margin-left: 10vw !important;
  }
}


.flag-bg{
  position: relative;
  width: 120px;
  height: 90px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: clamp(0px, 5vw, 100px);
  transform: translateX(-30%); /* 左方向にさらに移動 */
}

@media (max-width: 768px) { /* スマホ時 */
  .flag-bg {
        margin-left: -10px !important; /* スマホ時は左寄せ */
		transform: none; /* 追加調整 */
  }
}


.flag-bg__inner{
   position: absolute;
   top: 25px;
   left: 25px;
}