@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;
} */

header {
  display: none;
}

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 {
  margin-right: 1%;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: 50px;
  transition: all 0.3s ease; /* 変化をじわっとさせる魔法 */
  color: #577082;
  background-color: #F8F8F8;
}

.contact-tel a {
  display: block;
  /* padding: 0.5em 1.5em; aタグの内側に余白を作る */
  text-decoration: none;
  color: inherit;
}

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

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

.num {
  font-size: 1.3vw;
  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;
  padding-bottom: 0.3em;
  padding-left: 2%;
  padding-right: 2%;
  gap: 0.5em;
  position: relative; /* 光の通り道を作るための基準 */
  overflow: hidden;    /* ボタンからはみ出した光を隠す */
  transition: all 0.3s;
  border-radius: 50px;
  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: 95vw;
  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: 6vw;
  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: 3vw;
  font-family: Zen_Kaku_Gothic_New;
  letter-spacing: 0.1em;
  color: #fdfaf7;
}

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

.policy-parentbox {
  display: block; /* 横並び解除 */
  width: 90%;    /* スマホは画面いっぱいに近く */
  margin-left: auto;
  margin-right: auto;
}

.policy-leftbox {
  display: none;
}

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

.policy-rightbox {
  width: 100%;    /* 横幅をフルに使う */
  text-align: center; /* 中身のテキストを中央寄せ */
}

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

.policy-rightbox p {
  font-size: 3vw; /* スマホで見やすい大きさ */
  text-align: justify;
  color: #474747;
  line-height: 1.7;
  letter-spacing: 0.1em;
}

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

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

.obsession-parentbox {
  display: flex;
  flex-direction: column; /* これだけで縦に並びます！ */
  width: 80%;
  align-items: center;    /* カードを中央に寄せる */
  gap: 20px;              /* カード同士の隙間を作る */
  margin-left: auto;
  margin-right: auto;

}

.obsession-flexbox {
  
  margin-bottom: 20px;   /* 下に余白を作る */
  padding: 5%;
  border-radius: 5%;
  background-color: #fdfaf7;
}

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

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

.obsession-explanation {
  line-height: 1.7;
  font-weight: 200;
  font-size: 3vw;
  letter-spacing: 0.08em;
}

/* スペースセクションここから */
.equipment-section {
  margin-left: auto;
  margin-right: auto;
  padding-top: 6%;
  padding-bottom: 6%;
  background-color: #fdfaf7;
}

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

.equipment-parentbox {
  display: flex;
  width: 80%;
  margin-top: 8%;
  margin-left: auto;
  margin-right: auto;

}

.equipment-leftbox {
  display: none;
}

.equipment-rightbox {
  width: 100%;

}

.equipment-rightbox h3 {
  margin-bottom: 6%;
  text-align: center;
  font-size: 4vw;
  color: #474747;
  font-family: Zen_Kaku_Gothic_New;
}

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

.subimage-box {
  display: flex;

}

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

.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: 5vw;
  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:  48%;
  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: 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: 5vw;
  font-family: Zen_Kaku_Gothic_New;
  color: #577082;
}

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

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

.access-leftbox {
  width: 100%;
}

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

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

address {
  font-style: normal;
}

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

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

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

.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.4em 0.6em;    /* ここでボタンの大きさを決める！ */
  text-decoration: none;
  font-size: 2.5vw;
  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: 3vw;
  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: 2.3vw;
  color: #577082;
}

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


.access-rightbox {
 display: none;
}


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

.footer-flexbox {
  width: 70%;
  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: 3vw;
  font-weight: Thin;
  color: #fdfaf7;

}

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