@charset "utf-8";

/* ページ（PC/スマホ）
 * **************************************************
 * vol.55
 * **************************************************
 */


.frame-container {
font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; /* align-items: stretchは各アイテムの高さを揃えるために使用 */
}

.frame-point {
  flex: 1 0 30%; /* flex-grow: 1はボックスがコンテナを埋めるために成長することを可能にし、flex-basis: 30%はボックスの基本的な幅を設定 */
  box-sizing: border-box; /* パディングとボーダーを要素の合計幅と高さに含める */
  border-radius: 10px; /* ボックスの角を丸くする */
  margin: 10px; /* ボックス間のスペースを追加、必要に応じて調整 */
  padding: 20px;
  max-width: calc(33.33% - 20px); /* これにより行ごとに3つのボックスが、ボックス間に20pxのスペースがある状態で表示されます。 */
  background-color: #fff7e7;
}

.frame-point img {
	width: 100%;
	margin-bottom: 1.5em;
}

.ttlC {
	color: #00b8c1;
}

.box-kenkou {
  background-color: #def1f9;
  border-radius: 15px;
  padding: 50px;
  display: flex;
  flex-direction: column;
  /*justify-content: space-between;*/
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 3em;
  margin-top: 3em;
}

.box-kenkou p {
	font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
	text-align: center;
	font-size: 1em;
	line-height: 20px;
}
.box-inner p {
	font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
	text-align: left;
	font-size: 1em;
	line-height: 20px;
}

.box-kenkou h4 {
  color: #00b7c4;
  font-size: 3em;
  font-weight: bold;
  font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
  text-align: center;
  margin-bottom: 0;
}

.box-inner {
  background-color: #fff;
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  width: 770px;
}



.box-inner h5 {
  color: #ec739e;
  font-size: 2.2em;
  font-weight: bold;
  font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
	text-align: center;
}

.box-inner li {
	font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
	font-size: 1.7em;
	text-align: left;
	line-height: 32px;
}

.box-inner img {
	width: 100%;
}


.pc_hid {
  white-space: nowrap;
}

.box-kansyu {
  display: flex;
  align-items: center;
  font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
}

.kansyu {
  width: 62px;
  height: 62px;
  background-color: #00b7c4;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  color: #ffffff;
  font-weight: bold;
}

.name {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  font-size: 10px;
}

.name p {
  margin: 0;
}

.yosan01 h2 img {
	width: 100%;
}

div.merit {
	font-size: 1.5em; /* =15px */
	line-height: 1.6;
	margin-left: 1em;
	padding-bottom: 3em;
    }
div.merit .bullet {
      color: #01acdc;
      margin-left: -1em;
    }
div.merit2 {
	float: left;
	width: 50%;
	font-size: 1.5em; /* =15px */
	line-height: 1.6;
	margin-left: 1em;
	padding-bottom: 3em;
    }
div.merit2 .bullet {
      color: #01acdc;
      margin-left: -1em;
    }

p.zu2307 img {
	float: right;
    width: 324px;
}





/* レスポンシブデザイン */
@media screen and (max-width: 800px) {
  .frame-point {
    flex: 1 0 45%; /* 画面が小さくなると、行ごとに2つのボックスだけ表示 */
    max-width: calc(50% - 20px);
  }
}

@media screen and (max-width: 500px) {
  .frame-point {
    flex: 1 0 90%; /* 非常に小さい画面では、行ごとに1つのボックスだけ表示 */
    max-width: 100%;
  }
}



	/* スマートフォン用のレスポンシブCSS */
    @media (max-width: 600px) {
	  .box-kenkou {
		padding: 20px;
      }
	  .box-kenkou h4 {
	  font-size: 2.5em;
      }
	  
      .box-inner {
        width: 85%;
		padding: 20px;
      }
	  
	  .pc_hid {
		white-space: normal;
      }
	  
	  .box-kenkou p {
		text-align: left;
      }
	  
	  .box-inner li {
		font-size: 1.4em;
		line-height: 25px;
      }
	  
	  .box-inner img.midashi {
	width: 75%;
}
	div.merit {
	float:none;
	width: 100%;
	padding-bottom: 0.5em;
    }
	p.zu2307{
	text-align: center;
	}
	p.zu2307 img {
	float:none;
    width: 70%;
}
div.merit2 {
	float: none;
	width: 100%;
	padding-bottom: 0;
    }

    }
	
	
  /* PC用のスタイル */
  @media screen and (min-width: 768px) {
    .box-inner {
      display: flex;
    }

    .box-inner > div {
      flex: 1;
      flex-basis: 33.33%;
    }
	.box-inner > div:not(:first-child):not(:last-child) {
      margin: 0 40px; /* 左右に10pxの余白 */
    }
	
	.pc { display: block !important;
	width: 100%;}
	.sp { display: none !important; }
  }

  /* スマートフォン用のスタイル */
  @media screen and (max-width: 767px) {
    .box-inner {
      display: block;
    }

    .box-inner > div {
      width: 100%;
      height: auto;
    }
	
	.pc { display: none !important; }
	.sp { display: block !important; }

  }
  
  /*2カラム*/
  .dangumi2 {
  display: flex;
}

.dangumi2 p {
  flex: 1;
  font-size: 1.8em !important;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 20px;
  text-align: left;
  margin: 1em;
  border: 2px solid #00b7c4; /* 罫線を設定 */
}


/* PC用のスタイル */
  @media screen and (min-width: 768px) {
    .dangumi2 p {
	width:300px;
    }

/* スマートフォン用のスタイル */
@media (max-width: 768px) {
  .dangumi2 {
    flex-direction: column;
  }

  }