@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: Noto_Sans_JP;
  src: url(../font/Noto_Sans_JP/static/NotoSansJP-Medium.ttf);
}

@font-face {
  font-family: Zen_Kaku_Gothic_New;
  src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf);
}

body {
  font-family: Noto_Sans_JP;
  font-weight: 400;
  background-color: #fdfaf7;
  color: #474747;
}

header {
  position: fixed;
  top: 0;
  display: flex;
  width: 90%;
  padding: 1% 5%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
}

h1 {
  width: fit-content;
}

h1 a {
  display: block;
  line-height: 2;
  text-decoration: none;
  font-size: 1.5vw;
  color: #577082;
  transition: 0.5s;
}

nav {
  width: 30%;
  margin-left: auto;
}

nav ul {
  display: flex;
  list-style: none;
  text-align: center;
}

nav ul li {
  width: calc( 100% / 3);
}

nav ul a {
  display: block;
  line-height: 3;
  text-align: center;
  text-decoration: none;
  color: #577082;
  font-size: 1.2vw;
  transition: 0.5s;
}

nav ul a:hover {
  opacity: 0.6;
  transition: 0.5s;
}

.contact-tel {
  display: block;
  width: 18%;
  text-decoration: none;
  margin-right: 1%;
  padding: 0.5% 2%;
  border-radius: 50px;
  align-items: center;
  color: #577082;
  background-color: #F8F8F8;
}

.contact-tel:hover {
  opacity: 0.6;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}


.contact-tel_number {
  display: flex;  
  align-items: end;
}

.tell-caption {
  font-size: 0.9vw;
}

.num {
  font-size: 1.5vw;
  letter-spacing: 0.2em;
}

.num a {
  display: block;
  text-decoration: none;
  color: #577082;
}

.tel_hours {
  font-size: 1vw;
  letter-spacing: 0.02em;
}

.contact-web {
  display: flex;
  width: 12%;
  padding-bottom: 0.3em;
  padding-left: 2%;
  padding-right: 2%;
  gap: 0.5em;
  position: relative; /* 光の通り道を作るための基準 */
  overflow: hidden;    /* ボタンからはみ出した光を隠す */
  transition: all 0.3s;
  border-radius: 50px;
  font-size: 1.3vw;
  align-items: center;
  background-color: #577082;
  color: #fdfaf7;
}

.contact-web a {
  display: flex;         /* 横並びにする */
  align-items: center;   /* 上下中央 */
  justify-content: center; /* 左右中央 */
  gap: 0.5em;
  width: 100%;           /* 横幅いっぱい */
  height: 100%;          /* 縦幅いっぱい */
  padding: 0.8em 0.6em;    /* ここでボタンの大きさを決める！ */
  text-decoration: none;
  color: #fdfaf7;
}


.contact-web::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* 最初はボタンの左側に隠しておく */
  width: 50%;
  height: 100%;
  
  /* 斜めの光のグラデーション */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  
  transform: skewX(-25deg); /* 光を斜めにする */
}

/* 3. ホバーした時に光を走らせる */
.contact-web:hover::before {
  left: 150%; /* 右側まで一気に突き抜ける */
  transition: left 0.6s; /* 0.6秒かけて走る */
}

/* ついでにボタン自体も少し浮かせるとよりリッチになります */
.contact-web:hover {
  background-color: #6a889d; /* 少し明るい紺色に */
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.main-visual {
  display: flex;
  height: 54vw;
  margin-bottom: 8%;
  background-image: url(../images/main.jpg);
  background-size: cover;
  position: relative; /* 子要素の基準にする */
  z-index: 0;
}

.main-visual::before{
  width: 100%;
  height: 100%;
  /* 透過した黒を上から重ねる */
  background-color: rgba(0,0,0,0.3);
  /* 自由に位置指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  z-index: 1; /* 膜を1番にする */
}

.mv-message-box {
  display: flex;
  width: fit-content;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

.mv-message-box h2 {
  white-space: pre-wrap;
  line-height: 1.7;
  font-size: 4vw;
  font-family: Zen_Kaku_Gothic_New;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #fdfaf7;
}

.sub-copy {
  width: fit-content;
  margin-top: 3vw;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  white-space: pre-wrap;
  font-size: 1.6vw;
  font-family: Zen_Kaku_Gothic_New;
  letter-spacing: 0.1em;
  color: #fdfaf7;
}

.policy-secsion h2 {
  margin-bottom: 5%;
  text-align: center;
  font-size: 2.3vw;
  font-family: Zen_Kaku_Gothic_New;
  color: #577082;
}

.policy-parentbox {
  display: flex;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  

}

.policy-leftbox {
  width: 45%;
  margin-right: 5%;
}

.policy-imagebox img {
  width: 100%;
  border-radius: 5%;
}

.policy-rightbox {
  width: 50%;
}

.policy-rightbox h3 {
  margin-bottom: 2%;
  font-size: 1.6vw;
  font-family: Zen_Kaku_Gothic_New;
  color: #474747;
}

.policy-rightbox p {
  font-size: 1.1vw;
  color: #474747;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: justify;
}

.obsession-section {
  margin-top: 6%;
  padding-top: 6%;
  padding-bottom: 8%;
  background-color: #F3F4F5;
}

.obsession-section h2 {
  margin-bottom: 4%;
  text-align: center;
  font-size: 2.3vw;
  font-family: Zen_Kaku_Gothic_New;
  color: #577082;
}

.obsession-parentbox {
  display: flex;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
}

.obsession-flexbox {
  width: 25%;
  padding: 2%;
  border-radius: 5%;
  background-color: #fdfaf7;
}

.obsession-icon-box {
  text-align: center;
}

.obsession-title {
  text-align: center;
  line-height: 3;
  font-size: 1.4vw;
  font-family: Zen_Kaku_Gothic_New;
  font-weight: 600;
}

.obsession-explanation {
  line-height: 1.7;
  font-weight: 200;
  font-size: 1.2vw;
}

/* 設備セクション */
.equipment-section {
  margin-left: auto;
  margin-right: auto;
  padding-top: 6%;
  padding-bottom: 6%;
  background-color: #fdfaf7;
  background-image: url(../images/equipment_back.png);
  background-size: cover;
  position: relative; /* 子要素の基準にする */
  z-index: 0;
}

.equipment-section::after {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.8;
  /* 自由に位置指定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
  z-index: 1; /* 膜を1番にする */
}

.mv-message-box {
  display: flex;
  width: fit-content;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.equipment-section h2 {
  text-align: center;
  font-size: 2vw;
  color: #577082;
  font-family: Zen_Kaku_Gothic_New;
  position: relative;
  z-index: 2;
}

.equipment-parentbox {
  display: flex;
  width: 80%;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

.equipment-leftbox {
  display: flex;
  width: 47%;
  margin-right: 3%;
}

.equipment-leftbox img {
  width: 100%;
  height: 100%; /* 親の高さに合わせる */
  object-fit: cover; /* 画像を歪ませずに、足りない部分を切り取って埋める */
  border-radius: 12px; /* ついでに角も丸くすると綺麗！ */
}

.equipment-rightbox {
  width: 47%;
  margin-left: 3%;
  position: relative;
  z-index: 2;
}

.equipment-rightbox h3 {
  margin-bottom: 8%;
  font-size: 1.8vw;
  color: #474747;
  font-family: Zen_Kaku_Gothic_New;
}

.equipment-rightbox p {
  margin-bottom: 8%;
  font-size: 1.2vw;
  line-height: 1.7;
  text-align: justify;
}

.subimage-box {
  display: flex;

}

.sub-left-image {
  width: 45%;

}

.sub-right-image {
  width: 45%;
  margin-left: auto;
}

.subimage-box img {
  display: flex;
  width: 100%;
  border-radius: 12px;
}

/* 診療メニュー */
.services-section {
  padding-top: 6%;
  padding-bottom: 8%;
  background-color: #F3F4F5;
}

.services-section h2 {
  text-align: center;
  font-size: 2vw;
  color: #577082;
  font-family: Zen_Kaku_Gothic_New;
}

.services-parentbox {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
}

.services-flexbox {
  width: 23.5%;
  margin-top: 5%;
  padding-top: 2%;
  padding-bottom: 1%;
  border-radius: 5%;
  background-color: #fFF;
}

.services-icon-box {
  text-align: center;
}

.services-title {
  text-align: center;
  line-height: 3;
  font-size: 1.4vw;
  font-family: Zen_Kaku_Gothic_New;
  font-weight: 600;
  
}

/* ここからフッター */
#access-section {
  margin-top: 8%;
  padding-bottom: 8%;
}

#access-section h2 {
  margin-bottom: 5%;
  text-align: center;
  font-size: 2.3vw;
  font-family: Zen_Kaku_Gothic_New;
  color: #577082;
}

iframe {
  display: block;
  width: 80%;
  height: 20vw;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%;
  filter: grayscale(50%);
}

.access-parentbox {
  display: flex;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.access-leftbox {
  width: 48%;
  margin-right: 2%;
}

.clinic-name {
  margin-bottom: 6%;
  font-size: 2.3vw;
  font-family: Zen_Kaku_Gothic_New;
}

.contact-area {
  display: flex;
  margin-bottom: 5%;
}

address {
  font-style: normal;
}

address p {
  letter-spacing: 0.1em;
  color: #577082;
}

.access-tel {
  font-size: 2vw;
  color: #577082;
}

.access-tel span {
  font-size: 1vw;
}

.access-webbtn {
  display: flex;
  margin-left: auto;
  padding-bottom: 0.3em;
  padding-left: 5%;
  padding-right: 5%;
  gap: 1em;
  position: relative;  /* 光の通り道を作るための基準 */
  overflow: hidden;    /* ボタンからはみ出した光を隠す */
  transition: all 0.3s;
  border-radius: 50px;
  align-items: center;
  background-color: #577082;
  color: #fdfaf7;
}

.access-webbtn a {
  display: flex;         /* 横並びにする */
  align-items: center;   /* 上下中央 */
  justify-content: center; /* 左右中央 */
  gap: 0.5em;
  width: 100%;           /* 横幅いっぱい */
  height: 100%;          /* 縦幅いっぱい */
  padding: 0.8em 0.6em;    /* ここでボタンの大きさを決める！ */
  text-decoration: none;
  font-size: 1.4vw;
  letter-spacing: 0.1em;
  color: #fdfaf7;
}

.access-webbtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* 最初はボタンの左側に隠しておく */
  width: 50%;
  height: 100%;
  
  /* 斜めの光のグラデーション */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  
  transform: skewX(-25deg); /* 光を斜めにする */
}

/* 3. ホバーした時に光を走らせる */
.access-webbtn:hover::before {
  left: 150%; /* 右側まで一気に突き抜ける */
  transition: left 0.6s; /* 0.6秒かけて走る */
}

/* ついでにボタン自体も少し浮かせるとよりリッチになります */
.contact-web:hover {
  background-color: #6a889d; /* 少し明るい紺色に */
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #d6e8ed;
}
/* セルとセルの間をつめて一本線に見せる記述。セルの間はそのままだと空白がある。 */

th {
  background-color: #F3F4F5;
  font-size: 1.4vw;
  font-weight: 400;
  
}

th,td {
  padding: 0.5em 1em;
  border: 1px solid #eef6f8;
  color: #577082;
}

table th:first-child {
  text-align: left;
}

.closed-days {
  margin-top: 1%;
  text-align: right;
  font-size: 1vw;
}

.reception-end {
  display: block;
  font-size: 1vw;
}

.access-rightbox {
  width: 48%;
  margin-left: 2%;
}

.access-rightbox img {
  width: 100%;
  vertical-align: bottom;
}

footer {
  padding-top: 2%;
  padding-bottom: 1%;
  background-color: #577082;
}

.footer-flexbox {
  width: 30%;
  margin-left: auto;
  margin-right: auto;
}

.footer-flexbox ul {
  display: flex;
  list-style: none;
}

.footer-flexbox ul li {
  width: calc( 100% / 3 );
  /* border-right: 2px solid #fdfaf7;  */
}

.footer-flexbox ul li a {
  display: block;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  font-size: 1.3vw;
  font-weight: Thin;
  color: #fdfaf7;

}

.copy {
  padding-top: 1%;
  text-align: center;
  color: #fdfaf7;
}