@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=Sen:wght@400..800&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=Cardo:wght@400;700&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");


/*========================
初めてご来院の方へ
guide.html
========================*/
/*-------------------------
患者さまとのお約束
#credo
--------------------------*/
#credo h3{
  font-family: 'Zen Old Mincho', serif;
  font-size: 1.3em;
  text-align: center;
  line-height: 2;
  font-weight: 600;
  margin-bottom: 24px;
  color: #47A5D1;
}
@media screen and (max-width: 640px) {
#credo h3{
  font-size: 1.2em;
  text-align: left;
  line-height: 1.8;
  }
#credo h3 br{
  display: none;
  }
}

.credolist {
  max-width: 840px;
  margin: 0 auto;
}
.credolist p{
  position: relative;
  padding: 0 0.3em 0 2.4em;
  line-height: 1.65;
  margin-bottom: 0.8em;
}
.credolist p:before {
	position: absolute;
  top: 0.4em;
  left: 0;
  font-size: 2em;
  line-height: 0;
  color: #47A5D1;
  font-family:"Material Symbols Rounded";
	content: "\ead5"; /*ダイヤモンド*/
  font-variation-settings:
  'FILL' 0,
  'wght' 100
}

/*-------------------------
当院のキャンセルポリシー
#cancel
--------------------------*/
#cancel h4{
  font-size: 1.15em;
  font-weight: 600;
  color: #46A5D1;
  margin: 0.6em 0 0.4em;
  text-decoration: underline;
  text-underline-offset: 0.4em;
  line-height: 2;
}


/*========================
院長・スタッフ紹介
staff.html
========================*/
/*-------------------------
プロフィール
--------------------------*/
.profile {
  width:100%;
  max-width: 1000px;
  margin: auto;
  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;
}
.profile li:first-child{
  width: 40%;
}
.profile li:last-child{
  width: 60%;
  padding: 0 0 0 32px;
}
.staffphoto {
  position: relative;
  width: 100%;
  max-width: 480px;
}
.staffphoto .name{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 24px 18px;
  color: #FFF;
  text-shadow: 0 0 15px rgb(0,0,0,0.8);
  background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.4));
  width: 100%;
}
.staffphoto .name h3{
  font-family: 'Zen Old Mincho', serif;
  font-size: 2em;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 8px;
}
.staffphoto .name h4{
  font-family: "Cardo", serif;
  font-size: 1.3em;
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 12px;
}
.staffphoto .name p{
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
@media screen and (max-width: 1240px) {
.profile li:first-child{
  width: 35%;
  }
.profile li:last-child{
  width: 65%;
  padding: 18px 0 0 32px;
  }
.staffphoto .name{
  padding: 20px 18px 15px;
  }
.staffphoto .name h3{
  font-size: 1.8em;
  }
.staffphoto .name h4{
  font-size: 1.15em;
  }
.staffphoto .name p{
  font-size: 0.9em;
  }
}
@media screen and (max-width: 1000px) {
.profile {
  flex-direction: column;
  display: block;
  }
.profile li:first-child{
  width: 100%;
  }
.profile li:last-child{
  width: 100%;
  padding: 24px 0 0 0;
  }
.staffphoto {
  max-width: 360px;
  }
}
@media screen and (max-width: 640px) {
.staffphoto {
  max-width: 320px;
  }
.staffphoto .name h3{
  font-size: 1.65em;
  }
.staffphoto .name h4{
  font-size: 1.1em;
  }
.staffphoto .name p{
  font-size: 1em;
  }
}
@media screen and (max-width: 480px) {
.staffphoto {
  max-width: 100%;
  }
}

/*-------------------------
院長メッセージ
--------------------------*/
.inchomessage h3{
  font-family: 'Zen Old Mincho', serif;
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-bottom: 18px;
  color: #222;
}
.inchomessage p{
  line-height: 2;
  margin-bottom: 0.8em;
}
@media screen and (max-width: 1240px) {
.inchomessage p{
  line-height: 1.7;
  margin-bottom: 0.6em;
  }
}
@media screen and (max-width: 480px) {
.inchomessage h3{
  margin-bottom: 12px;
  }
}

/*-------------------------
院長プロフィール
--------------------------*/
.inchoprofile {
  width:100%;
  max-width: 1000px;
  margin: 42px auto 0;
  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:flex-start;
}
.inchoprofile li:first-child{
  width: 50%;
  padding: 0 24px 0 0;
  line-height: 1.65;
}
.inchoprofile li:last-child{
  width: 50%;
  font-size: 0.95em;
  line-height: 1.6;
}
.inchoprofile li h4{
  font-weight: 600;
  border-left: 5px solid #83CDC7;
  padding: 0 0 0 0.8em;
  margin-bottom: 0.5em;
  font-size: 1.05em;
}
.inchoprofile li:first-child p{
  padding: 0 0 0.5em 1em;
}
.inchoprofile li:last-child p{
  padding: 0 0 0.3em 1em;
}
@media screen and (max-width: 1000px) {
.inchoprofile {
  flex-direction: column;
  display: block;
  margin: 24px auto 0;
  }
.inchoprofile li:first-child{
  width: 100%;
  padding: 0 0 18px 0;
  line-height:1.8;
  }
.inchoprofile li:last-child{
  width: 100%;
  }
}
@media screen and (max-width: 480px) {
.inchoprofile li:first-child p{
  padding: 0 0 0.3em 0.5em;
  }
.inchoprofile li:last-child p{
  padding: 0 0 0.2em 0.5em;
  }
}

/*-------------------------
私たちになんでもご相談ください
#teamstaff
--------------------------*/
.teamphoto {
  width:100%;
  max-width: 840px;
  margin: auto;
  padding:0 24px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
  flex-wrap: wrap;
}
.teamphoto li:nth-child(1){
  width: 100%;
  padding: 0 0 18px;
}
.teamphoto li:nth-child(2){
  width: 50%;
  padding: 0 9px 0 0;
}
.teamphoto li:nth-child(3){
  width: 50%;
  padding: 0 0 0 9px;
}
.teamphoto li img{
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
}
@media screen and (max-width: 480px) {
.teamphoto li:nth-child(1){
  padding: 0 0 12px;
  }
.teamphoto li:nth-child(2){
  padding: 0 6px 0 0;
  }
.teamphoto li:nth-child(3){
  padding: 0 0 0 6px;
  }
}

/*スラッシュ吹き出し*/
.staffmessage span{
  position: relative;
  text-align: center;
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.2em 1em 0.5em;
  margin-bottom: 18px;
  color: #47A5D1;
  font-family: 'Zen Old Mincho', serif;
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1.5;
  white-space: nowrap;
}
.staffmessage span:before,
.staffmessage span:after{
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 86%;
  background: #47A5D1;
}
.staffmessage span:before {
  transform: rotate(-18deg);
  left: 0;
}
.staffmessage span:after {
  transform: rotate(18deg);
  right: 0;
}
@media screen and (max-width: 640px) {
.staffmessage span{
  font-size: 1.3em;
  }
}
@media screen and (max-width: 480px) {
.staffmessage span{
  font-size: 1.2em;
  margin-bottom: 12px;
  }
}


/*========================
クリニック案内
aboutus.html
========================*/
/*-------------------------
当クリニックは労災保険指定医療機関です
#wci
--------------------------*/
#wci h2{
  text-align: center;
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 24px;
  font-family: 'Zen Old Mincho', serif;
}
#wci h2 strong{
  font-weight: 500 !important;
  font-size: 1.15em;
  color: #46A5D1;
  font-family: "Noto Sans JP", sans-serif;
  text-decoration: underline;
  text-underline-offset: 10px;
}
#wci p{
  text-align: center;
}
@media screen and (max-width: 767px) {
#wci p{
  text-align: left;
  }
#wci p br{
  display: none;
  }
}
@media screen and (max-width: 480px) {
#wci h2{
  font-size: 1.25em;
  margin-bottom: 18px;
  }
#wci h2 strong{
  font-size: 1.1em;
  }
}

/*-------------------------
医院情報
#information
--------------------------*/
.general {
  width:100%;
  height: auto;
  margin: auto;
  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:stretch;
}
.general_koga{
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  height: auto;
  margin: 32px 18px 0 0;
}
.general_egao{
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  height: auto;
  margin: 32px 0 0 18px;
}
@media screen and (max-width: 1240px) {
.general {
  display: block;
  flex-direction: column;
  }
.general_koga{
  width: 100%;
  max-width:100%;
  margin: 24px 0 32px 0;
  padding: 0 32px 0 0;
  }
.general_egao{
  width: 100%;
  max-width:100%;
  margin: 84px 0 0 0;
  padding: 0 0 0 32px;
  }
}
@media screen and (max-width: 640px) {
.general_koga{
  padding: 0 18px 0 0;
  }
.general_egao{
  padding: 0 0 0 18px;
  }
}

/* ボックス */
.generalbox {
  width: 100%;
  height: 100%;
  padding: 0 48px 32px 24px;
  background-color: #F2F2F2;
	border-radius: 0 18px 18px 0;
  margin: 0 auto;
}
.generalbox2 {
  width: 100%;
  height: 100%;
  padding: 0 24px 32px 48px;
  background-color: #F2F2F2;
	border-radius: 18px 0px 0px 18px;
  margin: 0 auto;
}
@media screen and (max-width: 1240px) {
.generalbox {
  padding: 0 24px 32px 24px;
  }
.generalbox2 {
  padding: 0 24px 32px 24px;
  }
}

/* ボックス中身 */
.general_koga .generalinner {
  width: 100%;
  max-width: 640px;
  margin: 0 0 0 auto;
  text-align: right;
}
.general_egao .generalinner {
  width: 100%;
  max-width: 640px;
  margin: 0;
  text-align: left;
}
.generalinner img{
  width: auto;
  max-height: 124px;
  margin-top: -64px;
  margin-bottom: 24px;
}
.generalinner h2 {
  font-weight: 600;
  font-size: 1.05em;
  margin-bottom: 8px;
}
@media screen and (max-width: 1240px) {
.general_koga .generalinner {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  }
.general_egao .generalinner {
  max-width: 640px;
  margin: 0 auto;
  }
}
@media screen and (max-width: 640px) {
.general_egao .generalinner {
  margin: 0 0 0 auto;
  text-align: right;
  }
.generalinner img{
  max-height: 100px;
  margin-bottom: 18px;
  }
}
@media screen and (max-width: 480px) {
.generalinner img{
  max-height: 84px;
  }
}

/* 診療科目 */
.generalinner .medsub {
  margin: 0 0 0.8em;
}
.general_koga .generalinner .medsub span{
  display: inline;
  color: #46A5D1;
  background: #FFF;
  border: 1px solid #46A5D1;
  line-height: 1;
  padding: 0.3em 0.4em;
  font-size: 0.85em;
  font-weight: 500;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  white-space: nowrap;
}
.general_koga .generalinner .medsub span a{
  text-decoration: none;
  color: #46A5D1;
  font-weight: 500;
}
.general_egao .generalinner .medsub span{
  display: inline;
  color: #EB7AAB;
  background: #FFF;
  border: 1px solid #EB7AAB;
  line-height: 1;
  padding: 0.3em 0.4em;
  font-size: 0.85em;
  font-weight: 500;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  white-space: nowrap;
}
.general_egao .generalinner .medsub span a{
  text-decoration: none;
  color: #EB7AAB;
  font-weight: 500;
}

/*医院別ボタン*/
.btn_koga {
	display: inline-block;
	color: #FFF;
  border: 1px solid #47A5D1;
	background-color: #47A5D1;
	text-decoration: none;
	padding: 0.8em 2em 0.8em 1.2em;
	transition: 0.3s;
	position: relative;
  line-height: 1;
  white-space: nowrap;
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.btn_koga:after {
	position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 1.4em;
  font-family:"Material Symbols Rounded";
	content: "\e5e1"; /*矢じりのみ矢印*/
  font-variation-settings:
  'FILL' 0,
  'wght' 100
}
.btn_koga:hover{
	background-color: #FFF;
  color: #47A5D1;
	transition: 0.3s;
}

.btn_egao {
	display: inline-block;
	color: #FFF;
  border: 1px solid #EB7AAB;
	background-color: #EB7AAB;
	text-decoration: none;
	padding: 0.8em 2em 0.8em 1.2em;
	transition: 0.3s;
	position: relative;
  line-height: 1;
  white-space: nowrap;
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.btn_egao:after {
	position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 1.4em;
  font-family:"Material Symbols Rounded";
	content: "\e5e1"; /*矢じりのみ矢印*/
  font-variation-settings:
  'FILL' 0,
  'wght' 100
}
.btn_egao:hover{
	background-color: #FFF;
  color: #EB7AAB;
	transition: 0.3s;
}

/*-------------------------
医院情報
#photos
--------------------------*/
.clinicphoto {
  width:100%;
  max-width: 1240px;
  margin: auto;
  padding:0 12px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.clinicphoto li{
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding: 0 12px 24px;
}
.clinicphoto img {
  border: 1px solid #BBB;
}
.clinicphoto h4 {
  font-size: 0.95em;
  font-weight: 400;
  line-height: 1.6;
  padding: 0 0.6em;
  margin: 8px 0 0;
  text-align: center;
}
@media screen and (max-width: 1000px) {
.clinicphoto h4 {
  font-size: 0.9em;
  }
}
@media screen and (max-width: 767px) {
.clinicphoto {
  max-width: 640px;
  flex-direction: column;
  display: block;
  padding:0 32px;
  }
.clinicphoto li{
  width: 100%;
  max-width:100%;
  padding: 0 0 15px;
  }
}
@media screen and (max-width: 640px) {
.clinicphoto {
  padding:0 18px;
  }
}

/*-------------------------
当院の特長
#feature
--------------------------*/
.ourfeature1,
.ourfeature2,
.ourfeature3,
.ourfeature4{
  position: relative;
  z-index:1;
  text-align: center;
  font-size: 1.4em;
  font-family: 'Zen Old Mincho', serif;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin: 18px auto 32px;
  padding-top: 18px;
}
.ourfeature1::before,
.ourfeature2::before,
.ourfeature3::before,
.ourfeature4::before {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translateY(-56%) translateX(-50%);
  -webkit-transform: translateY(-56%) translateX(-50%);
  color: #D1E9F3;
  font-size: 6rem;
  z-index: -1;
  font-weight: 300;
}
.ourfeature1::before {content: '1';}
.ourfeature2::before {content: '2';}
.ourfeature3::before {content: '3';}
.ourfeature4::before {content: '4';}