@charset "utf-8";

/* 後ほどstyle.cssに追加する？　*/
.fs80{ font-size:80px; }
.fwb{ font-weight: bold; }
.mrb1em{ margin-right:1em; margin-bottom: 1em; }
.mlb1em{ margin-left:1em; margin-bottom: 1em; }
@media only screen and (max-width:599px){
.mrb1em{ margin-right:0; }
.mlb1em{ margin-left:0; }
}

/* 共通スタイル */
:root {
	--color-primary-red: #C63528;
	--color-secondary-red: #fae0dd;
	--color-primary-green: #2DB395;
	--color-primary-pink: #ea6d8d;
	--border-gray: #bebebe;
}

/* 見出し */
.headline03 { padding-bottom: 15px; color: #ea6d8d; border-bottom: 2px solid #7e7677; }
.headline04 { padding: 0.5em 1em; color: #fff; font-weight: bold; background-color: var(--color-primary-green); border-radius: 5px; line-height: 1.5; }
.headline05 { font-size: 19px; color: var(--color-primary-green);  }

/* リスト */
.list01 { padding: 1em; border: 2px solid var(--color-primary-red); }
.list01-item::before { content: "\025cf"; margin-right: 5px; color: var(--color-primary-red); }

/* セクション */
.section + .section { margin-top: 100px; }
.section2 { margin-top: 30px; }
.section2 + .section2 { margin-top: 80px; }

/* 内部コンテンツレイアウト */
.inner { margin-top: 20px; }

.box { padding: 1em; background-color: var(--color-secondary-red); }
.add1 { padding: 20px 40px; border: dotted 1px #b69a88; }
@media only screen and (max-width:599px){
	.add1 { padding: 10px 20px; }
}

@media screen and (min-width: 600px) {
	.w650 { width: 650px; }
	.w550 { width: 550px; }
	.w500 { width: 500px; }
	.w450 { width: 450px; }
	.w780 { width: 780px; }
	.w400 { width: 400px; }
}


/* オルソケラトロジー治療について cont-ortho.php　*/

#ortho .t_circle{ display: grid; place-items: center; width: 200px; height: 200px; border-radius: 100%; background-color: #f4b6c6; }
#ortho .t_circle_txt{ text-align: center; color: #fff; }
#ortho .t_circle_txt span{ color:#ea6d8d; font-size: 19px; font-weight: bold; }

#ortho .head{ background-color:#fbecee; border-top:1px solid #b69a88; border-left:1px solid #b69a88; border-right:1px solid #b69a88; padding:5px 15px; }
#ortho .middle{ background-color:#fbecee; border-top:1px dotted #b69a88; border-left:1px solid #b69a88; border-right:1px solid #b69a88; padding:5px 15px; font-size:14px; line-height:160%; }
#ortho .read{ border:solid #b69a88; border-width:1px; padding:5px 15px; }
#ortho .read .fs14{ font-size:14px; line-height:160%; }

#ortho .tbl { width: 100%; border-collapse: collapse; }
#ortho .tbl th, .tbl td{ padding:10px; vertical-align:middle; border:1px solid #b69a88; }
#ortho .tbl .cell1{ background-color:#2db395; color:#fff; text-align:center; font-weight:bold; }
#ortho .tbl .cell2{ text-align:left; width: 50%; }
#ortho .tbl .cell3{ text-align:right; width: 50%; }

@media only screen and (min-width:600px), print{
	#ortho .list1 { overflow: hidden; }
	#ortho .list1 li{ float: left; margin-right: 10px; }
	#ortho .list1 li:last-child{ margin-right: 0; }
	#ortho .w500 { width: 480px; margin-right: 20px; }
	#ortho .w770 { width: 770px; }
	#ortho .w270 { width: 270px; }
}
@media only screen and (max-width:599px){
	#ortho .t_circle{ margin: 0 auto; }
}


/* 白内障手術について cont-cataract.php　*/


#cataract .ib_list div{ display: inline-block; vertical-align: top; }
#cataract .numdl { counter-reset: number; display: flex; }
#cataract .numdl dt{ text-indent: -2em; padding-left: 2em; text-align: left; }
#cataract .numdl dt::before { counter-increment: number; content: counter(number); padding: 3px 5px; border-radius: 5px; margin-right: 13px; background-color: #2db395; color: #fff; font-weight: bold;}

#cataract .sec3 .bg1col{ background-color: #fbecee; padding: 10px; border-radius: 10px; min-height: 15em; }
#cataract .sec3 .bg1col .fs16{ padding-left: 1.5em; }
#cataract .sec3 .cost{ background-color: #ea6d8d; padding: 3px 10px; border-radius: 5px; color: #fff; font-weight: bold; font-size: 19px; }

#cataract .sec4 h5{ padding: 3px 10px; border-radius: 5px; background-color: #2db395; color: #fff; font-weight: bold; font-size: 19px; }

#cataract .apply.sec5 div[class^="apply__"] { margin-top: 1.5em; padding: 1em; }
#cataract .apply.sec5 ul[class*="__list"] { margin-top: 10px; }
#cataract .apply.sec5 li[class*="__list--item"]::before { content: "●"; margin-right: 5px; }
#cataract .apply.sec5 .apply__ok { border: 1px solid var(--color-primary-green); }
#cataract .apply.sec5 .apply__ok .headline { color: var(--color-primary-green); }
#cataract .apply.sec5 .apply__ok__list--item::before { color: var(--color-primary-green); }
#cataract .apply.sec5 .apply__ng { border: 1px solid var(--color-primary-red); }
#cataract .apply.sec5 .apply__ng .headline { color: var(--color-primary-red); }
#cataract .apply.sec5 .apply__ng__list--item::before { color: var(--color-primary-red); }

#cataract .flow.sec6 .flow__list--item { margin-top: 2em; } 
#cataract .flow.sec6 .flow__list--item .headline { font-weight: bold; } 
#cataract .flow.sec6 .flow__list--item .number { display: inline-block; margin-right: 5px; padding: 0 0.5em; color: #fff; background-color: var(--color-primary-red); border-radius: 5px; } 
#cataract .flow.sec6 .flow__list--item .red-text { color: var(--color-primary-red); }
#cataract .flow.sec6 .flow__list--item__box { margin-top: 0.5em; }
#cataract .flow.sec6 .flow__list--item__box .headline { color: var(--color-primary-green); }

#cataract .sec7 dl dd{ padding-left: 1.5em; }

/* 白内障手術について cont-cataract(-demo_minor).php -2022-06-13-*/

#cataract .surgery-text { margin-top: 40px; }
#cataract .flow .surgery-text { margin-top: 20px; }
#cataract .image { margin-top: 40px; }
#cataract .cataract-surgery__list { margin-top: 50px; padding: 20px; padding-left: 50px; box-sizing: border-box; border: dashed 1px gray; }
#cataract .cataract-surgery__list ol { padding-left: 1.5em; }
#cataract .flex__area { display: flex; justify-content: space-between; }
#cataract .surgery-doctor .button { margin-top: 30px; text-align: center; }
#cataract .surgery-about__list { margin-top: 20px; }
#cataract .surgery-about__list li::before { content: "●"; color: var(--color-primary-pink); margin-right: 5px; }
#cataract .surgery-price__list { border: 1px solid var(--color-primary-red); border-collapse: collapse; width: 100%; }
#cataract .surgery-price__list tr { border: 1px dashed var(--color-primary-red); padding: 8px 0; text-align: center; }
#cataract .surgery-price__list th { border: 1px solid var(--color-primary-red); background: var(--color-primary-red); color: #fff; padding: 8px 0; text-align: center; }
#cataract .surgery-price__list td { border: 1px solid var(--color-primary-red); padding: 8px 0; }

@media only screen and (min-width:600px), print{
	#cataract .surgery-text { width: 650px; }

}
@media only screen and (max-width:599px){
	#cataract .image img { width: 100%; }
	#cataract .cataract-surgery__list { padding-left: 30px; }
	#cataract .flex__area { flex-direction: column-reverse; justify-content: center; }
}


/* お子様の抑制治療について cont-myopine.php */
#myopine .myopine-nav__list { display: flex; justify-content: space-evenly; }
#myopine .myopine-nav__list--item { flex: 0 1 300px; }
#myopine .myopine-nav__list--link { display: block; padding: 1em; border: 2px solid var(--border-gray); text-align: center; }
#myopine .eyes-progress__feature .headline { font-size: 1em; color: var(--color-primary-red); }
#myopine .eyes-progress__feature__list { margin-top: 1em; padding: 1em; border: 2px solid var(--color-primary-red); }
#myopine .eyes-progress__feature__list--item::before { content: "●"; margin-right: 5px; color: var(--color-primary-red); }
#myopine .low-atropine__list--item { margin-left: 1.5em; }
#myopine .low-atropine__list--item::marker { color: var(--color-primary-red); }
#myopine .low-atropine .box { padding: 1em; background-color: var(--color-secondary-red); }
#myopine .cost__fee { margin-top: 1.5em; padding: 1em; color: var(--color-primary-red); background-color: var(--color-secondary-red); border: 2px solid var(--color-primary-red); }
#myopine .supplement__box { padding: 1em; color: var(--color-primary-red); background-color: var(--color-secondary-red); }

@media only screen and (min-width:600px), print{
	#cataract .sec3 .bg1col{ margin-left: 10px; width: 260px; }
}
@media only screen and (max-width:599px){
	/* お子様の抑制治療について cont-myopine.php */
	/* #myopine .myopine-nav__list--item + .myopine-nav__list--item { margin-left: 1em; } */
	#myopine .myopine-nav__list--item{ flex: 0 1 80px; }
	#myopine .myopine-nav__list{ flex-direction: column; }
}
@media (hover) {
	#myopine .myopine-nav__list--link:hover { border: 2px solid var(--color-primary-green); }
}


/* サプリメント紹介 cont-supplement.php */
#supplement .sec4 .f-container01{ display: flex; flex-wrap: wrap; justify-content: center; }
#supplement .sec4 .f-container02{ padding-left:1.5em; }



/* 緑内障とは cont-glaucoma.php */
#glaucoma .numol { list-style: none; counter-reset: number; }
#glaucoma .numol li{ text-indent: -2em; padding-left: 2em; text-align: left; margin-top: 10px; }
#glaucoma .numol li::before { counter-increment: number; content: counter(number); padding: 3px 5px; border-radius: 5px; margin-right: 13px; background-color: #2db395; color: #fff; font-weight: bold;}

.test__box { display: flex; flex-wrap: wrap; justify-content: space-between; }
.test__box-card .image { text-align: center; }
.test__box-card:not(:last-child) .image { margin-top: 30px; }

.tengan__list-table { width: 100%; border-collapse: collapse; font-size: 0.75em; }
.tengan__list-table tr { border: 1px solid #C63528; }
.tengan__list-table th { padding: 10px 0; background: #fae0dd; border: 1px solid #C63528; text-align: center; font-weight: bold; }
.tengan__list-table .seizai { background: #fbecee; font-weight: normal; }
.tengan__list-table .seizai.starter { width: 50%; }
.tengan__list-table td { padding: 8px 0; border-right: 1px solid #C63528; text-align: center; }
.tengan__list-table.handling tr:nth-of-type(n+3):nth-of-type(-n+5) { border-top: 1px hidden #C63528 ; }
.tengan__list-table.handling tr:nth-child(7) { border-top: 1px hidden #C63528 ; }

.flex__box-image , .flex__box-desc { margin-top: 30px; }
.flex__box-image { text-align: center; }

#test dd, #about-treatment dd { padding-left: 0; }

@media only screen and (min-width:600px), print{
	.tengan__list-table { font-size: 1em; }
	.test__box-card .desc { height: 60px; }
	.test__box-card:nth-last-child(-n+2) .desc { height: 230px; }
	.test__box-card { width: calc(100% / 2 - 30px); }
	.test__box-card .image { margin-top: 0px; }
	/* .test__box-card:not(:last-child) .desc { height: 130px; }
	.test__box-card:not(:last-child) { width: calc(100% / 2 - 30px); }
	.test__box-card:not(:last-child) .image { margin-top: 0px; }
	.test__box-card:last-child .image { display: flex; justify-content: space-evenly; align-items: center; } */

	.flex__box { display: flex; flex-direction: row-reverse; justify-content: space-between; }
	#tengan .flex__box-desc , #surgery .flex__box-desc , #about-treatment .flex__box-desc { padding-right: 40px; }
	#test dd , #about-treatment dd { padding-left: 1.5em; }
}

/*白内障レンズ*/
.cataract__lendz-img {

	margin-top: 110px;
}
.cataract__lendz {
	height: 17em;
}

@media only screen and (max-width:599px){
	.cataract__lendz-img {
		margin-top:10px ;
	}

	.cataract__lendz {
		height: auto;
	}
	#cataract .sec3 .bg1col{
		min-height:auto;
	}
}

/*白内障手術*/
.op__box {
	display: flex;
}

@media only screen and (max-width:599px){
	.op__box{
		flex-direction: column;
	}

	.op__box img {
		margin: 0 auto;
	}

	#cataract .numdl {
		flex-direction: column;
	}
}

/* アレルギー外来（View39） cont-allergy.php */
#allergy .allergy-flex{ display: flex; }
#allergy .headline{ font-size: 1em; color: var(--color-primary-red); }
#allergy .allergy-list{ margin-top: 1em; padding: 1em; border: 2px solid var(--color-primary-red); }
#allergy .allergy-list .allergy-list--item::before{ content: "●"; margin-right: 5px; color: var(--color-primary-red); }

@media only screen and (min-width:600px), print{
	/* padding */
	.pl2epc{ padding-left: 2em; }

	#allergy .allergy-medi{ max-width: 662px; }

}

@media only screen and (max-width:599px){
	#allergy .allergy-flex{ flex-direction: column; }
}

/* 色覚異常 cont-color_blind.php */
#color_blind .headline{ font-size: 1em; color: var(--color-primary-red); }
#color_blind .color_blind-list{ margin-top: 1em; padding: 1em; border: 2px solid var(--color-primary-red); }
#color_blind .color_blind-list .color_blind-list--item::before{ content: "●"; margin-right: 5px; color: var(--color-primary-red); }
#color_blind .color_blind-flex{ display: flex;}

@media only screen and (min-width:600px), print{

	#color_blind .color_blind-list{ max-width: 500px; }
	#color_blind .color_blind-flex{ justify-content: space-between; }
}

@media only screen and (max-width:599px){

	#color_blind .color_blind-flex{ flex-direction: column; }
}

/* 小児眼科 */
#pediatric .introduction .introduction-text { margin-top: 1em; }
#pediatric .introduction .introduction-text:first-of-type { margin-top: 2em; }
#pediatric .introduction .introduction-image , .amblyopia .amblyopia__inner-image , .health-insurance .health-insurance-image { margin-top: 2em; text-align: center; }

#pediatric .amblyopia__inner { display: flex; }
#pediatric .amblyopia__inner-text { margin-top: 1.5em; }

#pediatric .myopia__inner-text { margin-top: 1.5em; }
#pediatric .myopia__inner-text a { font-weight: bold; }

#pediatric .hyperopia__inner {display: flex; }
#pediatric .hyperopia__inner-text { margin-top: 2em; }
#pediatric .hyperopia__inner-image { margin-top: 2em; text-align: center; }
#pediatric .hyperopia__inner-heading { font-size: 1em; color: var(--color-primary-red); margin-top: 2em; }

#pediatric .hyperopia__inner-menu { display: flex; flex-flow: row wrap; width: 100%; }
#pediatric .hyperopia__inner-menu dt { flex-basis: 20%; text-align: center; padding: 20px; background-color: var(--color-secondary-red); border: 1px solid var(--color-primary-red); }
#pediatric .hyperopia__inner-menu dd { flex-basis: 80%; padding: 20px; border: 1px solid var(--color-primary-red); }

#pediatric .health-insurance__inner--heading { font-size: 1em; color: var(--color-primary-red); margin-top: 2em; }

#pediatric .amblyopia__list { margin-top: 1.5em; }
#pediatric .refractive-error__list { margin-top: 1.5em; }
#pediatric .strabismus__list { margin-top: 1.5em; }
#pediatric .health-insurance__list { margin-top: 1em; }

@media only screen and (min-width:600px), print{
	#pediatric .amblyopia__inner .amblyopia__inner-image { padding-left: 2em; }
	#pediatric .hyperopia__inner .hyperopia__inner-image { padding-left: 2em; }
	#pediatric .hyperopia__inner-menu dt { display: flex; justify-content: space-around; align-items: center; border-right: none; }
	#pediatric .hyperopia__inner-menu dt:nth-child(n+2){ border-top: none; }
	#pediatric .hyperopia__inner-menu dd:last-of-type{ border-top: none; }
}

@media only screen and (max-width:599px){
	#pediatric .amblyopia__inner { flex-direction: column; }
	#pediatric .hyperopia__inner { flex-direction: column; }
	#pediatric .hyperopia__inner-menu { flex-direction: column; }
	#pediatric .hyperopia__inner-menu dt { border-bottom: none; }
	#pediatric .hyperopia__inner-menu dt:nth-child(n+2){ border-top: none; }
}

/* 北区区民健診 kita-kukenshin.php */
#kita-kukenshin .target-person { margin-top: 50px; }
#kita-kukenshin div + div { margin-top: 50px; }
#kita-kukenshin .headline03 + .text { margin-top: 20px; }
#kita-kukenshin .age-list { margin-top: 20px; border: 1px solid var(--border-gray); border-bottom: none; text-align: center; }
#kita-kukenshin .age-list .old { background: var(--color-secondary-red); padding: 20px 0; border-bottom: 1px solid var(--border-gray); font-weight: bold; }
#kita-kukenshin .age-list .day { padding: 20px 0; border-bottom: 1px solid var(--border-gray); }
#kita-kukenshin .bring-list { margin-top: 20px; }
#kita-kukenshin .bring-list .item::before { content: "\025cf"; margin-right: 0.5em; color: var(--color-primary-pink); }
#kita-kukenshin .bring-list .item .important { color: var(--color-primary-red); font-weight: bold; }
#kita-kukenshin .bring-list .item.btn .button { width: 100%; margin-top: 10px; padding: 10px 0; text-align: center; }
#kita-kukenshin .contact .text { margin-top: 20px; padding: 0 15px; }
@media only screen and (min-width:600px), print{
	#kita-kukenshin div + div { margin-top: 100px; }
	#kita-kukenshin .age-list { display: flex; flex-wrap: wrap; }
	#kita-kukenshin .age-list .old , .day { width: 50%; }
	#kita-kukenshin .bring-list .item.btn .button { width:30%; margin-left: 30px; padding: 5px 0; }
}



/*ここから下麻菜美がいじりました
*************************************************/
/* ウイルス性角結膜炎 viral_conjunctivitis */
#viral_conjunctivitis .allergy-flex{ display: flex; }
#viral_conjunctivitis .headline{ font-size: 1em; color: var(--color-primary-red); }
#viral_conjunctivitis .viral-list{ margin-top: 1em; padding: 1em; border: 2px solid var(--color-primary-red); }
#viral_conjunctivitis .viral-list .viral-list--item::before{ content: "●"; margin-right: 5px; color: var(--color-primary-red); }

/*AMD********************************************/
#amd .headline{ font-size: 1em; color: var(--color-primary-red); }
#amd .amd-list{ margin-top: 1em; padding: 1em; border: 2px solid var(--color-primary-red); }
#amd .amd-list .amd-list--item::before{ content: "●"; margin-right: 5px; color: var(--color-primary-red); }
#amd .morelink a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: auto;
margin-left: auto;
	margin-top:20px;
  padding: 1em;
  width: 300px;
  color: #333333;
  font-size: 18px;
  font-weight: 700;
  border: 3px solid #ea6d8d;
  border-radius: 10px;
}
#amd .morelink a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #ea6d8d;
  border-right: 3px solid #ea6d8d;
  transform: rotate(45deg);
}
#amd .morelink a:hover {
  color: #333333;
  text-decoration: none;
  background-color: #ea6d8d;
}
#amd .morelink a:hover::after {
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
}

/*プラケニル眼科外来
*********************************************/
#plaquenil .headline{ font-size: 1em; color: var(--color-primary-red); }
#plaquenil .plaquenil-list{ margin-top: 1em; padding: 1em; border: 2px solid var(--color-primary-red); }
#plaquenil .plaquenil-list .plaquenil-list--item::before{ content: "●"; margin-right: 5px; color: var(--color-primary-red); }

/*黄斑前膜
********************************************/
#preretinal_membrane .preretinal_membrane-flex{ display: flex;}
#preretinal_membrane .preretinal_membrane-list{ margin-top: 1em; padding: 1em; border: 2px solid var(--color-primary-red); }
#preretinal_membrane .preretinal_membrane-list .preretinal_membrane-list--item::before{ content: "●"; margin-right: 5px; color: var(--color-primary-red); }
#preretinal_membrane .morelink a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: auto;
margin-left: auto;
	margin-top:20px;
  padding: 1em;
  width: 300px;
  color: #333333;
  font-size: 18px;
  font-weight: 700;
  border: 3px solid #ea6d8d;
  border-radius: 10px;
}
#preretinal_membrane .morelink a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #ea6d8d;
  border-right: 3px solid #ea6d8d;
  transform: rotate(45deg);
}
#preretinal_membrane .morelink a:hover {
  color: #333333;
  text-decoration: none;
  background-color: #ea6d8d;
}
#preretinal_membrane .morelink a:hover::after {
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
}
#preretinal_membrane .headline{ font-size: 1em; color: var(--color-primary-red); }
@media only screen and (min-width:600px), print{
	#preretinal_membrane .preretinal_membrane-list{ max-width: 500px; }
	#preretinal_membrane .preretinal_membrane-flex{ justify-content: space-around; }
}
@media only screen and (max-width:599px){
	#preretinal_membrane .preretinal_membrane-flex{ flex-direction: column; }
}

/*中心性漿液性脈絡網膜症CSC********************************************/
#csc .morelink a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: auto;
margin-left: auto;
	margin-top:20px;
  padding: 1em;
  width: 300px;
  color: #333333;
  font-size: 18px;
  font-weight: 700;
  border: 3px solid #ea6d8d;
  border-radius: 10px;
}
#csc .morelink a::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #ea6d8d;
  border-right: 3px solid #ea6d8d;
  transform: rotate(45deg);
}
#csc .morelink a:hover {
  color: #333333;
  text-decoration: none;
  background-color: #ea6d8d;
}
#csc .morelink a:hover::after {
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
}

/*横幅追加*/
@media screen and (min-width: 600px) {
	.w650 { width: 650px; }
	.w600 { width: 600px; }
	.w550 { width: 550px; }
	.w500 { width: 500px; }
	.w450 { width: 450px; }
	.w780 { width: 780px; }
	.w400 { width: 400px; }
}
@media only screen and (min-width:600px), print{
	/* padding */
	.pl2epc{ padding-left: 2em; }
	#viral_conjunctivitis .viral-medi{ max-width: 662px; }
}
@media only screen and (max-width:599px){
	#viral_conjunctivitis .viral-flex{ flex-direction: column; }
	
	table {
    width: 100%;
    border-collapse: collapse;
}


	
/*ここまで麻菜美がいじりました
********************************************************/