@charset "UTF-8";

@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
/* Google font Icon */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");


/*========================
TOPヘッダー
========================*/
.topimg {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
	transition: 0.3s;
  position: relative;
}
@media screen and (max-width: 1240px) {
.topimg {
  height: 640px;
  }
}
@media screen and (max-width: 640px) {
.topimg {
  height: 520px;
  }
}

/*ロゴ (スマホでのみ表示)*/
.topimg h1 {
  display: none;
}
@media screen and (max-width: 960px) {
.topimg h1 {
  display: block;
  }
.topimg h1 img{
  width: 100%;
  max-width: 300px;
  margin-bottom: 24px;
  }
}
@media screen and (max-width: 640px) {
.topimg h1 img{
  max-width: 240px;
  }
}
@media screen and (max-width: 480px) {
.topimg h1 img{
  max-width: 200px;
  margin-bottom: 18px;
  }
}

/*キャッチコピー*/
.topimg span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.topimg p {
  text-align: center;
  text-shadow: 0 0 8px #000;
  font-family: 'Zen Old Mincho', serif;
  font-size: 3.2em;
  font-weight: 700;
  line-height: 1.5;
  color: #FFF;
  white-space: nowrap;
  margin-bottom: 64px;
}
.topimg div{
  display: block;
  margin: 0 auto;
  text-align: center;
}
.topimg strong{
  text-align: center;
  font-size: 2em;
  line-height: 1;
  padding: 0.4em 0.6em;
  color: #FFF;
  background: #313140;
  white-space: nowrap;
  margin: 6px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
}
@media screen and (max-width: 1240px) {
.topimg strong{
  display: block;
  max-width: 15em;
  margin: 12px auto 0;
  }
}
@media screen and (max-width: 960px) {
.topimg p {
  font-size: 2.2em;
  margin-bottom: 24px;
  }
.topimg strong{
  font-size: 1.6em;
  max-width: 13em;
  }
}
@media screen and (max-width: 640px) {
.topimg p {
  font-size: 2em;
  margin-bottom: 24px;
  }
.topimg strong{
  font-size: 1.5em;
  }
}
@media screen and (max-width: 480px) {
.topimg p {
  font-size: 1.6em;
  margin-bottom: 18px;
  }
.topimg strong{
  font-size: 1.2em;
  margin: 6px auto 0;
  }
}


/*========================
お知らせ
========================*/
article {
  padding: 0.6em 0;
}
/* 日付*/
article span {
  display:flex; 
  align-items:center;
  font-size: 1em;
  font-weight: 300;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #122A87;
  margin: 0 0 0.5em;
  line-height: 1.5;
}
article span:after {
  margin-left:0.5em; 
  border-top:1px solid #999; 
  content:""; 
  flex-grow:1;
}
article .newstitle{
  font-weight: 700;
  font-size: 1.1em;
  color: #122A87;
  padding: 0 0.6em 0.5em;
  line-height: 1.65;
}
article p{
  font-weight: 400;
  font-size: 1em;
  padding: 0 0.6em 0.5em;
  line-height: 1.7;
}


/*========================
医院情報
========================*/
/*-------------------------
概要テーブル
--------------------------*/
.clinictable {
  width: 100%;
  border-collapse: collapse;
}
.clinictable tr:first-child{
  border-top: 1px solid #999;
}
.clinictable tr{
  border-bottom: 1px solid #999;
}
.clinictable th{
  width: 25%;
  font-weight: normal;
  line-height: 100%;
  text-align: center;
  padding: 0.6em 0.8em;
  line-height: 1;
  background-color: #F3F3F3;
  white-space: nowrap;
  font-size: 0.9em;
}
.clinictable td{
  font-weight: normal;
  line-height: 100%;
  text-align: left;
  padding: 0.6em 0.8em;
  line-height: 1.7;
}
@media screen and (max-width: 480px) {
.clinictable {
  font-size: 0.95em;
  }
.clinictable th{
  padding: 0.5em 0.5em;
  }
.clinictable td{
  padding: 0.5em 0.5em;
  }
}

/*-------------------------
診療日テーブル
--------------------------*/
.hourtable {
  width: 100%;
  border-collapse: collapse;
}
.hourtable th{
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  padding: 12px 5px 8px;
}
.hourtable td{
  font-size: 1em;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  padding: 18px 5px;
  width:6%;
  background: #EEE;
  color: #122A88;
  border-right: 2px solid #FFF;
  border-bottom: 2px solid #FFF;
}
.hourtable .time{
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #222;
}
@media screen and (max-width: 640px) {
.hourtable th{
  padding: 8px 5px;
  }
.hourtable td{
  padding: 12px 5px;
  }
}
@media screen and (max-width: 480px) {
.hourtable th{
  font-size: 0.8em;
  padding: 6px 2px;
  }
.hourtable th:last-child{
  padding: 6px 6px 6px 2px;
  }
.hourtable td{
  font-size: 0.8em;
  padding: 10px 2px;
  }
.hourtable .time{
  font-size: 0.9em;
  letter-spacing: 0.03em;
  }
}


/*========================
当院の特徴
========================*/
.featurepoints {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:center;
}
.featurepoints li:first-child{
  width: 360px;
}
.featurepoints li:last-child{
  flex: 1;
  padding: 0 0 0 32px;
}
.featurepoints li:last-child h4 {
  font-size: 1.3em;
  line-height: 1.6;
  margin-bottom: 6px;
  color: #122A88;
  font-family: "Kosugi Maru", sans-serif;
  letter-spacing: 0.03em;
}
.featurepoints li:last-child p{
  font-size: 0.95em;
}
@media screen and (max-width: 1240px) {
.featurepoints {
  max-width: 840px;
  display: block;
  flex-direction: column;
  }
.featurepoints li:first-child{
  width: 100%;
  }
.featurepoints li:last-child{
  padding: 18px 0 0 0;
  }
}


/*========================
院長紹介
========================*/
.incho {
  width:100%;
  margin: 0 auto 24px;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.incho li:first-child{
  flex: 1;
  text-align: center;
  padding: 0 24px 0 0;
}
.incho li:last-child{
  width: 360px;
}
.incho li:first-child .pstn {
  font-size: 1.1em;
  font-family: 'Zen Old Mincho', serif;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.incho li:first-child .name {
  font-size: 2em;
  font-family: 'Zen Old Mincho', serif;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin: 15px 0 12px;
  color: #222;
}
.incho li:first-child .nameeng {
  font-size: 1.2em;
  font-family: 'Zen Old Mincho', serif;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #5F70A9;
}
@media screen and (max-width: 1240px) {
.incho li:last-child{
  width: 260px;
  }
}
@media screen and (max-width: 960px) {
.incho li:last-child{
  width: 320px;
  }
}
@media screen and (max-width: 767px) {
.incho {
  max-width: 420px;
  flex-direction: column-reverse;
  }
.incho li:first-child{
  padding: 18px 0 0 0;
  }
.incho li:last-child{
  width: 100%;
  }
}
@media screen and (max-width: 480px) {
.incho li:first-child{
  font-size: 0.9em;
  }
.incho li:first-child .name {
  font-size: 2em;
  margin: 12px 0 8px;
  }
}

/*-------------------------
院長メッセージ
--------------------------*/
.inchomessage {
  line-height: 2;
}
.inchomessage p{
  margin-bottom: 0.8em;
}

/*-------------------------
院長経歴テーブル
--------------------------*/
.profiletable {
  width: 100%;
  border-collapse: collapse;
}
.profiletable th{
  width: 5em;
  font-weight: normal;
  line-height: 100%;
  text-align: left;
  padding: 0.3em 0.5em;
  line-height: 1.7;
  white-space: nowrap;
  vertical-align: top;
}
.profiletable td{
  font-weight: normal;
  line-height: 100%;
  text-align: left;
  padding: 0.3em 0.5em;
  line-height: 1.65;
  vertical-align: top;
}
@media screen and (max-width: 480px) {
.profiletable {
  font-size: 0.9em;
  }
}


/*========================
診療内容
========================*/
details {
  border-bottom: 1px solid #999;
}
details:first-child{
  border-top: 1px solid #999;
}
.servicedetail{
  padding: 1em 1.2em;
  background-color: #EFF2F8;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  margin-bottom: 1em;
}
summary {
  display: block;
  cursor: pointer;
  list-style: none;
  outline: none;
  position: relative;
  padding: 0.6em 0;
}
summary span{
  display: inline;
}
summary span img{
  width: 100%;
  max-width: 64px;
}
summary h4{
	position: absolute;
  top: 50%;
  left: 3.2em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  color: #122A88;
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
summary h5{
	position: absolute;
  top: 50%;
  right: 2.5em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 1em;
  line-height: 1.6;
  font-family: "Kosugi Maru", sans-serif;
  margin: 0 0 0 auto;
}
@media screen and (max-width: 1240px) {
summary span img{
  max-width: 48px;
  }
summary h4{
  font-size: 1.15em;
  }
summary h5{
  font-size: 0.9em;
  }
}
@media screen and (max-width: 767px) {
summary h4{
  font-size: 1.05em;
  }
summary h5{
  font-size: 0.85em;
  }
}
@media screen and (max-width: 640px) {
summary h4{
  font-size: 1.1em;
  }
summary h5{
  display: none;
  }
}

summary::-webkit-details-marker {
	display: none;
}
summary:after {
  position: absolute;
  top: 50%;
  right: -0.3em;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 3.6em;
  line-height: 0;
  color: #5F70A9;
  font-family:"Material Symbols Rounded";
	content: "\e5cc"; /*右向き矢じり*/
  font-variation-settings:
  'FILL' 1,
  'wght' 200
}
details[open] summary:after {
  right: -0.1em;
  font-size: 2.4em;
  font-family:"Material Symbols Rounded";
	content: "\e5cd"; /*クローズ*/
  font-variation-settings:
  'FILL' 1,
  'wght' 300
}

details[open] .servicedetail {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
0% {
  opacity: 0;
  transform: translateY(-10px);
  }
100% {
  opacity: 1;
  transform: none;
  }
}


/*========================
採用情報
========================*/
.recruitintro {
  width:100%;
  margin: 0 auto 24px;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.recruitintro li:first-child{
  flex: 1;
  padding: 0 24px 0 0;
}
.recruitintro li:last-child{
  width: 320px;
}
@media screen and (max-width: 1240px) {
.recruitintro {
  display: block;
  flex-direction: column;
  }
.recruitintro li:first-child{
  padding: 0 0 24px 0;
  }
.recruitintro li:last-child{
  width: 100%;
  text-align: center;
  }
.recruitintro li:last-child img{
  width: 100%;
  max-width: 320px;
  }
}