@charset "UTF-8";

/* モバイルレイアウト : 480 px およびそれ以下. */

/* --------------------------------------------------------
共通
-------------------------------------------------------- */

span{/* スマホでは改行 */
  display: block;
}

h3.h3Ul{
  color: var(--sub-color);
}

a:link.fee,
a:link.fee:visited{
  width: 60%;
  display: block;
  background: #fff;
  padding: 3% 8%;
  margin: 7% auto 7%;
  border-radius: 50px;
  border: 1px solid;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10%;
}

a:link.fee p{
  color: var(--sub-color);
  padding: 0;
  margin: 0;
}

/* --------------------------------------------------------
診療メニュー
-------------------------------------------------------- */

#page-link a{
  text-decoration: none;
}

.content01 h3.h3Ul{
  padding-top: 10%;
  color: var(--main-color);
}

.serviceMenu{
  background: #fff;
  padding: 5% 3% 8%;
  border-radius: 20px;
  margin: 10% 0;
}

.serviceMenu p{
  text-align: center;
}

.serviceMenu h5{
  display: inline-block;
  font-size: 2.0rem;
  background: #E9F3F5;
  padding: 1.5% 3%;
  border-radius: 8px;
  margin: 8% 0;
  color: black;
}

.serviceMenu ul{
  width: 95%;
  display: flex;
  flex-wrap: wrap;          /* ← 折り返しを許可 */
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.serviceMenu a{
  display: flex;
  width: 50%;               /* 2つで1行 */
  box-sizing: border-box;
  text-align: left;
  padding: 1% 0;
}

.serviceMenu li{
  display: flex;
}

.serviceMenu li .icon{
  width: 40px;
  text-align: center;
}

.serviceMenu li p{
  color: #003645;
  padding: 0;
  margin: 0;
}

.serviceMenu img{
  padding-right: 2%;
}

/* --------------------------------------------------------
保険診療
-------------------------------------------------------- */

h5.serviceTitle{
  display: flex;
  align-items: center; /* 縦位置を揃える */
  gap: 10px;           /* アイコンと文字の間 */
  margin: 0;           /* h5自体の余白も消すなら */
  font-size: 2.4rem;
  padding: 5% 0 0;
}

h5.serviceTitle img{
  width: 32px;         /* ← 幅を固定（これが重要） */
  height: auto;        /* 比率維持 */
  flex: 0 0 32px;      /* 縮まない＆伸びない */
  display: block;
}

h5.serviceTitle p{
  margin: 0;           /* pのデフォルト余白を消す */
  line-height: 1.2;    /* 文字の上下ブレ防止（好みで調整） */
  color: var(--sub-color);
}

.serviceContent:first-of-type{
  padding: 8% 0 0;
}

.serviceContent{
  padding: 5% 0;
}

/* --------------------------------------------------------
自費診療
-------------------------------------------------------- */

section.content03{
  background: #E8E0D4;
}

/* タブレットレイアウト : 981px～。モバイルレイアウトからスタイルを継承。 */
@media print, screen and (min-width: 980px) {

/* --------------------------------------------------------
共通
-------------------------------------------------------- */

span{/* スマホでは改行 */
  display: inline-block;
}

/* --------------------------------------------------------
診療メニュー
-------------------------------------------------------- */

.content01 h3.h3Ul{
  padding-top: 20px;
}

.serviceMenu{
  max-width: 1000px;
  margin: 50px auto;
  padding: 20px 100px;
}

.serviceMenu h5{
  width: 160px;
  margin: 10px 0;
  flex-wrap: nowrap;
}

.serviceMenu ul{
  margin: 0 auto;
  flex-wrap: nowrap;
  gap: 20px;
  width: calc(100% - 160px - 30px);
}

.serviceMenu a{
  width: auto;
}

.seviceMenuWrap{
  display: flex;
  align-items: center;
  gap: 30px;
}

.seviceMenuWrap p{
  padding: 0;
  margin: 0;
}

.serviceContent{
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 50px;
  padding: 50px 0;
  align-items: flex-start;
}

.serviceContent:first-of-type{
  padding: 50px 0;
}

/* --------------------------------------------------------
保険診療
-------------------------------------------------------- */

section.content02{
  padding-top: 0;
}

/* --------------------------------------------------------
自費診療
-------------------------------------------------------- */

section.content03{
  width: 95%;
  max-width: 1600px;
  border-radius: 20px;
}

section:last-of-type{
  padding: 60px 0;
}

section.content03 h3{
  padding: 0;
}

h5.serviceTitle{
  padding: 0;
}

a:link.fee{
  float: right;
  width: 200px;
  margin: 0;
  padding: 10px 10px;
}

}