@charset "utf-8";
:root {
	--color-blue: #0064B6;
	--color-water: #E8F3FE;
	--color-lightblue: #00AFEC;
	--color-darkblue : #5B86B9;
	--color-darkblue-light : #c3deff;
	--color-red: #ff6e66;
	--color-red02: #ff0000;
	--color-pink: #ffcfcc;
	--color-white: #ffffff;
	--color-black: #333333;
}

/* Flexbox
****************************************************/
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.flex1 { flex: 1; }
.align-items-center { align-items: center; }
@media screen and (min-width: 600px) {
	.d-md-flex { display: flex; }
	.d-md-inline-flex { display: inline-flex; }
	.flex-md-row { flex-direction: row; }
	.flex-md-row-reverse { flex-direction: row-reverse; }
	.flex-md-column { flex-direction: column; }
	.flex-md-column-reverse { flex-direction: column-reverse; }
	.justify-content-md-start { justify-content: flex-start; }
	.justify-content-md-end { justify-content: flex-end; }
	.justify-content-md-center { justify-content: center; }
	.justify-content-md-between { justify-content: space-between; }
	.justify-content-md-around { justify-content:space-around; }
	.justify-content-md-evenly { justify-content: space-evenly; }
	.align-items-md-start { align-items: flex-start; }
	.align-items-md-end { align-items: flex-end; }
	.align-items-md-center { align-items: center; }
	.align-items-md-baseline { align-items: baseline; }
	.align-items-md-stretch { align-items: stretch; }
	.align-self-md-start { align-self: flex-start; }
	.align-self-md-end { align-self: flex-end; }
	.align-self-md-center { align-self: center; }
	.align-self-md-baseline { align-self: baseline; }
	.align-self-md-stretch { align-self: stretch; }
	.flex-md-grow-0 { flex-grow: 0; }
	.flex-md-shrink-0 { flex-shrink: 0; }
	.flex-md-grow-1 { flex-grow: 1; }
	.flex-md-shrink-1 { flex-shrink: 1; }
	.flex-md-nowrap { flex-wrap: nowrap; }
	.flex-md-wrap { flex-wrap:wrap; }
	.flex-md-wrap-reverse { flex-wrap: wrap-reverse; }
	.order-md-1 { order: 1; }
	.order-md-2 { order: 2; }
	.order-md-3 { order: 3; }
	.order-md-4 { order: 4; }
	.order-md-5 { order: 5; }
	.align-content-md-start { align-content: flex-start; }
	.align-content-md-end { align-content: flex-end; }
	.align-content-md-center { align-content: center; }
	.align-content-md-around { align-content: space-around; }
	.align-content-md-stretch { align-content: stretch; }
	.flex-md-item-text { width: 65%; }
	.flex-md-item-half { width: 47%; }
	.flex-md-item-onethird { width: 33%; }
	.flex-md-item-quarter { width: 22%; }
}
/* width
****************************************************/
@media screen and (min-width: 600px) {
	.w200 { width: 200px; }
	.pc_w250px { width: 250px; }
	.pc_w275px { width: 275px; }
	.pc_w300px { width: 300px; }
	.w25per { width: 25%; }
	.pc_w60per { width: 60%; }
	.pc_w65per { width: 65%; }
}
@media screen and (max-width:599px){
	.w100 { width: 100%; }
	.sp_w100per { width: 100%; }
}
/* height
****************************************************/
@media screen and (min-width: 600px) {
	.md-min-height75 { min-height: 75px; }
}

/* margin
****************************************************/
.mg05 { margin: 05px; }
.mg10 { margin: 10px; }
.mg15 { margin: 15px; }
.mg20 { margin: 20px; }
.mg25 { margin: 25px; }
.mg30 { margin: 30px; }
.mg35 { margin: 35px; }
.mg40 { margin: 40px; }
.mg45 { margin: 45px; }
.mg50 { margin: 50px; }
.mg55 { margin: 55px; }
.mg60 { margin: 60px; }
.mg65 { margin: 65px; }
.mg70 { margin: 70px; }
.mg75 { margin: 75px; }
.mg80 { margin: 85px; }
.mg90 { margin: 90px; }
.mg95 { margin: 95px; }
.mg100 { margin: 100px; }
/* top */
.mt05 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt45 { margin-top: 45px; }
.mt50 { margin-top: 50px; }
.mt55 { margin-top: 55px; }
.mt60 { margin-top: 60px; }
.mt65 { margin-top: 65px; }
.mt70 { margin-top: 70px; }
.mt75 { margin-top: 75px; }
.mt80 { margin-top: 85px; }
.mt90 { margin-top: 90px; }
.mt95 { margin-top: 95px; }
.mt100 { margin-top: 100px; }
/* bottom */
.mb05 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
.mb55 { margin-bottom: 55px; }
.mb60 { margin-bottom: 60px; }
.mb65 { margin-bottom: 65px; }
.mb70 { margin-bottom: 70px; }
.mb75 { margin-bottom: 75px; }
.mb80 { margin-bottom: 85px; }
.mb90 { margin-bottom: 90px; }
.mb95 { margin-bottom: 95px; }
.mb100 { margin-bottom: 100px; }
/* left */
.ml05 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml25 { margin-left: 25px; }
.ml30 { margin-left: 30px; }
.ml35 { margin-left: 35px; }
.ml40 { margin-left: 40px; }
.ml45 { margin-left: 45px; }
.ml50 { margin-left: 50px; }
.ml55 { margin-left: 55px; }
.ml60 { margin-left: 60px; }
.ml65 { margin-left: 65px; }
.ml70 { margin-left: 70px; }
.ml75 { margin-left: 75px; }
.ml80 { margin-left: 85px; }
.ml90 { margin-left: 90px; }
.ml95 { margin-left: 95px; }
.ml100 { margin-left: 100px; }
@media screen and (min-width: 600px) {
	.pc_ml30 { margin-left: 30px; }
}
/* right */
.mr05 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 30px; }
.mr35 { margin-right: 35px; }
.mr40 { margin-right: 40px; }
.mr45 { margin-right: 45px; }
.mr50 { margin-right: 50px; }
.mr55 { margin-right: 55px; }
.mr60 { margin-right: 60px; }
.mr65 { margin-right: 65px; }
.mr70 { margin-right: 70px; }
.mr75 { margin-right: 75px; }
.mr80 { margin-right: 85px; }
.mr90 { margin-right: 90px; }
.mr95 { margin-right: 95px; }
.mr100 { margin-right: 100px; }

/* padding
****************************************************/
.pd05 { padding: 5px; }
.pd10 { padding: 10px; }
.pd15 { padding: 15px; }
.pd20 { padding: 20px; }
.pd25 { padding: 25px; }
.pd30 { padding: 30px; }
.pd35 { padding: 35px; }
.pd40 { padding: 40px; }
.pd45 { padding: 45px; }
.pd50 { padding: 50px; }
.pd55 { padding: 55px; }
.pd60 { padding: 60px; }
.pd65 { padding: 65px; }
.pd70 { padding: 70px; }
.pd75 { padding: 75px; }
.pd80 { padding: 85px; }
.pd90 { padding: 90px; }
.pd95 { padding: 95px; }
.pd100 { padding: 100px; }
/* top */
.pt05 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pt35 { padding-top: 35px; }
.pt40 { padding-top: 40px; }
.pt45 { padding-top: 45px; }
.pt50 { padding-top: 50px; }
.pt55 { padding-top: 55px; }
.pt60 { padding-top: 60px; }
.pt65 { padding-top: 65px; }
.pt70 { padding-top: 70px; }
.pt75 { padding-top: 75px; }
.pt80 { padding-top: 85px; }
.pt90 { padding-top: 90px; }
.pt95 { padding-top: 95px; }
.pt100 { padding-top: 100px; }
/* bottom */
.pb05 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb25 { padding-bottom: 25px; }
.pb30 { padding-bottom: 30px; }
.pb35 { padding-bottom: 35px; }
.pb40 { padding-bottom: 40px; }
.pb45 { padding-bottom: 45px; }
.pb50 { padding-bottom: 50px; }
.pb55 { padding-bottom: 55px; }
.pb60 { padding-bottom: 60px; }
.pb65 { padding-bottom: 65px; }
.pb70 { padding-bottom: 70px; }
.pb75 { padding-bottom: 75px; }
.pb80 { padding-bottom: 85px; }
.pb90 { padding-bottom: 90px; }
.pb95 { padding-bottom: 95px; }
.pb100 { padding-bottom: 100px; }
/* left */
.pl05 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl25 { padding-left: 25px; }
.pl30 { padding-left: 30px; }
.pl35 { padding-left: 35px; }
.pl40 { padding-left: 40px; }
.pl45 { padding-left: 45px; }
.pl50 { padding-left: 50px; }
.pl55 { padding-left: 55px; }
.pl60 { padding-left: 60px; }
.pl65 { padding-left: 65px; }
.pl70 { padding-left: 70px; }
.pl75 { padding-left: 75px; }
.pl80 { padding-left: 85px; }
.pl90 { padding-left: 90px; }
.pl95 { padding-left: 95px; }
.pl100 { padding-left: 100px; }
/* right */
.pr05 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr25 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr35 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr45 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pr55 { padding-right: 50px; }
.pr60 { padding-right: 60px; }
.pr65 { padding-right: 65px; }
.pr70 { padding-right: 70px; }
.pr75 { padding-right: 75px; }
.pr80 { padding-right: 85px; }
.pr90 { padding-right: 90px; }
.pr95 { padding-right: 95px; }
.pr100 { padding-right: 100px; }
.pd-box { padding: 15px; }
@media screen and (min-width:600px) {
	.pd-box { padding: 40px; }
}

/* color
****************************************************/
.col3, .col3ul li:before, .col3icon:before { color: #0064B6; }
.col-lightblue { color: var(--color-lightblue); }
.col-water { color: var(--color-water); }
.col-red { color: var(--color-red); }
.col-red02 { color: var(--color-red02); }
.col-pink { color: var(--color-pink); }
.col-darkblue { color: var(--color-darkblue); }
.col-white { color: var(--color-white); }
.col-black { color: var(--color-black); }

/* font-size
****************************************************/
.fs19{ font-size:19px; }
.fs20{ font-size:20px; }
.fs24{ font-size:24px; }

/* font-weight
****************************************************/
.fwb { font-family: "じゅん 501", "Jun 501"; }

/* background
****************************************************/
.bg_col-lightblue { background-color: var(--color-lightblue); }
.bg_col-water { background-color: var(--color-water); }
.bg_col-red { background-color: var(--color-red); }
.bg_col-pink { background-color: var(--color-pink); }
.bg_col-darkblue { background-color: var(--color-darkblue); }
.bg_col-darkblue-light { background-color: var(--color-darkblue-light); }
.bg_col-white { background-color: var(--color-white); }

/* button
****************************************************/
.btn--dark-red { display: block; width: 380px; padding: 1em; color: #FFF; background-color: #763B4D; border: 1px solid #763B4D; transition: 0.3s; }
@media (hover: hover) {
	.btn--dark-red:hover { color: #763B4D; background-color: #FFF; }
}
@media screen and (max-width: 599px) {
	.btn--dark-red { width: 100%; }
}

/* icon
****************************************************/
.icon { display: inline-flex; margin-right: 10px; padding: 5px 10px; color: #fff; border-radius: 5px; }

/* text-indent
****************************************************/
.indent-list li , .indent-item { text-indent: -1.5em; padding-left: 1.5em; }

/* headline
****************************************************/
h1, h2, h3, h4{ line-height: 1.4; }
.hl3 { padding-bottom: 5px; color: var(--color-blue); border-bottom: 3px solid var(--color-blue); font-size: 22px; }
.hl3::before { content: "◆"; margin-right: 10px; color: var(--color-blue); font-size: 30px; }

/* hakunaisho
****************************************************/
#hakunaisho .about .image .desc-box { padding: 15px; background: var(--color-water); }
#hakunaisho .about .image .title { color: var(--color-blue); font-size: 25px; }
#hakunaisho .about .image .title::before { content: ""; display: block; width: 40px; height: 40px; margin-right: 10px; background-size: cover; background-repeat: no-repeat; }
#hakunaisho .about .image:first-child .title::before { background-image: url(images/hakunaisho_normal-lens.png); }
#hakunaisho .about .image:not(:first-child) .title::before { background-image: url(images/hakunaisho_cataract-lens.png); }
#hakunaisho .kinds .title { padding-bottom: 5px; border-bottom: 3px solid var(--color-blue); color: var(--color-blue); font-size: 25px; font-family: "じゅん 501", "Jun 501"; }
#hakunaisho :is(.kinds .kinds__box__card , .surgery__note) { background: var(--color-water); padding: 15px; }
#hakunaisho :is(.treatment , .surgery , .flow) .number { display: inline-flex; background: var(--color-blue); justify-content: center; align-items: center; width: 40px; margin-right: 10px; padding: 5px; color: #fff; font-size: 25px; }
#hakunaisho :is(.treatment , .surgery , .flow) .title { font-size: 25px; color: var(--color-blue); font-family: "じゅん 501", "Jun 501"; }
#hakunaisho .surgery .surgery__list__title { background: var(--color-water); }
#hakunaisho .problems__box , .important__box__list { padding: 15px; background: var(--color-water); }
#hakunaisho :is(.problems__box__list , .important__box__list) .item::before { content: "●"; color: var(--color-blue); margin-right: 10px; }
#hakunaisho .flow__box__card { padding: 30px; border: 1px solid var(--color-blue); }
@media screen and (min-width:600px) {
	#hakunaisho .about .image .desc-box { padding: 40px; }
	#hakunaisho .problems__box , .important__box__list { padding: 40px; }
	#hakunaisho :is(.kinds .kinds__box__card , .surgery__note) { padding: 40px; }
}
/* myopine
****************************************************/
#myopine :is(.reason__area__box , .price__box__desc , .price-attention__box) { padding: 15px; background: var(--color-water); }
#myopine .price-attention__box { border: 3px solid var(--color-blue); border-radius: 10px; }
#myopine .price__box__desc .text { text-align: center; }
#myopine .price__box__desc .text:first-child { color: var(--color-blue); font-family: "じゅん 501", "Jun 501"; }
#myopine .flow__list .item { list-style: none; }
@media screen and (min-width:600px) {
	#myopine :is(.reason__area__box , .price__box__desc , .price-attention__box) { padding: 40px; }
	#myopine .price__box__desc .text:first-child { width: 26%; text-align: left; }
}
/* ortho
****************************************************/
.flow__image-list li { position: relative; background: var(--color-lightblue); padding: 10px 10px 15px; text-align: center; border-radius: 10px; color: #fff; }
.flow__image-list li:not(:last-child)::after { content: "▼"; position: absolute; top: 40px; right: 45%; font-size: 2rem; color: var(--color-lightblue); }
@media screen and (min-width:600px) {
	.flow__image-list li { padding: 10px; }
	.flow__image-list li:not(:last-child)::after { content: "▶"; top: 25px; right: -37%; }
}

/* price__table */
.tbl2 { width:100%; border-collapse: collapse; border: solid #fff; border-width: 2px 2px 0 2px; }
.tbl2 th, .tbl2 td{ border: 1px solid #BCBCBC; padding:10px; text-align: center; }
.tbl2 th{ background: var(--color-water); }
.tbl2 tr :nth-child(1){ text-align: left; }

.tbl2.price__table { border: none; border-bottom: 1px solid #BCBCBC; }
.tbl2.price__table tr .title { background: var(--color-lightblue); color: #fff; }
.tbl2.price__table tr .course { background: #25D6B4; border-bottom: none; color: #fff; }
.tbl2.price__table tr td { border-top: none; border-bottom: none; }
.tbl2.price__table tr :nth-child(1) { text-align: center; }
.tbl2.price__table tr th , .tbl2.price__table tr td { display: block; }
@media screen and (min-width: 600px) {
	.tbl2.price__table { border: solid #fff; border-bottom: 1px solid #BCBCBC; }
	.tbl2.price__table tr th , .tbl2.price__table tr td { display: table-cell;}
	.tbl2.price__table tr td { border-bottom: 1px solid #BCBCBC; }
	.tbl2.price__table tr .course { border-bottom: 1px solid #BCBCBC; }
}