@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_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);
}


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

.top-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;
  padding-top: 5vw;
  position: relative;
  z-index: 2;
}

.mv-message-box h2 {
  font-size: 2.3vw;
  align-items: center;
  font-family: Zen_Kaku_Gothic_New;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #fdfaf7;
}

.introduction {
  width: 80%;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

.introduction h2 {
  margin-bottom: 5%;
  text-align: center;
  font-size: 2.3vw;
  letter-spacing: 0.1em;
  font-family: Zen_Kaku_Gothic_New;
  color: #577082;
}

.intro-parentbox {
  display: flex;
}

.intro-leftbox {
  width: 50%;
}

.intro-leftbox p {
  line-height: 1.8;
  letter-spacing: 0.1em;
  font-size: 1.1vw;
}

.intro-rightbox {
  width: 45%;
  margin-left: 5%;
}

.intro-rightbox img {
  width: 100%;
}

.flow-section{
  width: 80%;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

.flow-section h2 {
  margin-bottom: 5%;
  text-align: center;
  font-size: 2.3vw;
  letter-spacing: 0.1em;
  font-family: Zen_Kaku_Gothic_New;
  color: #577082;
}

.flow-item {
  width: 80%;
  margin-top: 3%;
  padding: 3%;
  margin-left: auto;
  margin-right: auto;
  background-color: #fdfaf7;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
}

.flow-title {
  display: flex;
  margin-bottom: 2%;
  align-items: center; /* アイコンと数字の上下中央を合わせる */
  line-height: 2;
  border-bottom: 1px solid #8AACCB;
}

.flow-title p {
  margin-right: 1em;
  font-size: 1.3vw;
  letter-spacing: 0.1em;
  color: #8AACCB;
}

.flow-title h3 {
  font-size: 1.5vw;
  font-family: Zen_Kaku_Gothic_New;
  color: #577082;
}

.flow-content {
  display: flex;
}

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

.flow-leftbox img {
  width: 100%;
  vertical-align: bottom;
  border-radius: 10px;
}

.flow-rightbox {
  width: 50%;
}

.flow-rightbox p {
  line-height: 1.8;
  white-space: pre-wrap;
  font-size: 1.1vw;
}

.reservation-area {
  display: flex;
  margin-top: 3%;
  justify-content: space-around;
}

.reserv-tel {
  display: flex;
  align-items: center;
  font-size: 1.8vw;
  color: #577082;
}


.down-arrow {
  display: block;          /* 塊（ブロック）として扱う */
  width: 3vw;              /* 矢印のサイズ（幅） */
  height: 3vw;             /* 矢印のサイズ（高さ） */
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5%;
  border-right: 2px solid #577082; /* 線の太さ */
  border-bottom: 2px solid #577082;
  transform: rotate(45deg); /* 45度回転させて「く」の字を下にむける */
  
}


.belongings-section {
  width: 80%;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
}

.belongings-section h2 {
  margin-bottom: 5%;
  text-align: center;
  font-size: 2.3vw;
  letter-spacing: 0.1em;
  font-family: Zen_Kaku_Gothic_New;
  color: #577082;
}

.belongings-box {
  display: flex;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.belongings-leftbox {
  width: 45%;
  margin-right: 5%;
  display: flex;
}

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


.belongings-rightbox {
  width: 50%;
}

/* チェックリスト全体の枠組み */
.belongings-list {
  list-style: none;
  padding: 0;
}

/* 1つ1つの「カード」部分 */
.checklist-item {
  display: flex;
  margin-bottom: 3%;
  padding: 2% 5%;
  border-radius: 12px;
  align-items: center;
  background-color: #FFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* ほんのり影 */
  border-left: 6px solid #577082; /* アクセントの左線 */
}

.checklist-icon {
  width: 10%;
  margin-right: 5%;
  align-items: center;
}

.checklist-icon img {
  width: 100%;
}

.checklist-text {
  font-size: 1.1vw;
}

/* ここからフッター */
#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%;
}

.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;
}