@charset "utf-8";

:root {
	--color-black: #333333;
	--color-blue: #3A5DA1;
	--color-darkblue: #163269;
	--color-gray: #707070;
	--bg-color-lightgreen: #DCEAE8;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

main {
	overflow-x: hidden;
}

.sp_only {
	display: block;
}
.pc_only {
	display: none;
}
@media screen and (min-width: 600px) {
	.sp_only {
		display: none;
	}
	.pc_only {
		display: block;
	}
}

/* Flexbox
****************************************************/
[class^="flex_"] > .flex_item-half { margin-top: 1.5em; }
@media screen and (min-width: 600px) {
	.flex_space-between { display: flex; justify-content: space-between; }
	.flex_item-half { width: 48%; }
}

/* width
****************************************************/
@media screen and (min-width: 600px) {
	.pc_w70per { width: 70%; }
}

/* section
****************************************************/
.section-primary { margin-top: 3em; }

/* layout
****************************************************/
.l-inner-primary { margin-top: 1.5em; }

/* font
****************************************************/
.fs-normal { font-style: normal; }

/* table
****************************************************/
.table01 { border-collapse: collapse; width: 100%; }
.table01 th, .table01 td { padding: 1em; border: 1px solid #0C594D; }
.table01 th { background-color: var(--bg-color-lightgreen); }
.table01 .price { white-space: nowrap; text-align: center; }

/* component
****************************************************/
/*----- headline ----- */
.c-headline-4{font-size:1.2em; background-color: var(--bg-color-lightgreen); padding: .25em .8em .5em;}

/*----- symbol ----- */
.symbol-1 li:before{content: "▶";color: #EA7931;margin-right: .5em;}
ol {counter-reset:num;list-style-type: none!important;padding:0;margin:0;}
.symbol-ol li {position: relative;padding-left: 30px;line-height: 1.5em;padding: 0.5em 0.5em 0.5em 30px;}
.symbol-ol li:before {position: absolute;counter-increment: num;content: counter(num);display: inline-block;
background: #EA7931; color: #FFF;font-family: 'Arial',sans-serif;font-weight: bold;font-size: 1.2em;
border-radius: 50%;left: 0; width: 1.2em; height: 1.2em;line-height: 1.3em;text-align: center;top: 11px;}

/*----- color ----- */
	.col_green {color:#0C594D;}
	.fw {text-shadow: 0.1px 0.5px 0 #333;}
	.fw-green {text-shadow: 0.1px 0.5px 0 #0C594D;}

/*----- container ----- */
.l-container-1{display: flex;	flex-wrap: wrap; justify-content: space-between;}
@media screen and (min-width: 600px) {
	.l-container-1 .l-box-harf {width: 48%;}
	.l-container-1 .l-box-65 {width: 65%;}
	.l-container-1 .l-box-30 {width: 30%;}
}

/*----- sizing ----- */
.mt30auto {margin: 30px auto 0;}

/* contents
****************************************************/
/*----- IgG4関連眼疾患について -----*/
#igg4 ul li, #igg4 .step, #ganken-surgery .step {color:#0C594D; font-size: 1.2em; margin-bottom: .6em; padding-left: 0.3em;}
#ganken-surgery .quality:before{content: "▶";color: #EA7931;margin-right: .5em;}
#ganken-surgery .ul2col {list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;}
#ganken-surgery .ul2col li{width: 100%;}
@media screen and (min-width: 600px) {
#ganken-surgery .ul2col li{width: calc(50% - 10px);}
}

/*----- マイオピン -----*/
#myopine .about__image { margin-top: 1em; text-align: center; }
#myopine .safety__list { margin-top: 2em; }
#myopine .safety__list ul { padding: 1em 1.5em; font-size: 0.95rem; border: 2px solid #0C594D; }
#myopine .safety__list-item::before { content: "\025cf"; margin-right: 0.3em; color: #0C594D; }
#myopine .safety__list-item { color: #0C594D; }
#myopine .safety__list .text { margin-top: 2em; }
#myopine .stop__description .strong { font-weight: 700; color: #EA7931; }
#myopine .stop__image { text-align: center; }
#myopine .feature__list-item::before { content: "\025cf"; margin-right: 0.3em; }
#myopine .treatment__list { margin-top: 1.5em; }
#myopine .treatment__list-item { padding: 1em; font-size: 0.95rem; background-color: #DCEAE8; }
#myopine .treatment__list-item + .treatment__list-item { margin-top: 1em; }
#myopine .treatment__text { margin-top: 1em; }
#myopine .treatment__image { text-align: center; }
@media screen and (min-width: 600px) {
	#myopine .about__image-child { text-align: end; }
	#myopine .stop__image { text-align: end; }
	#myopine .treatment__image { text-align: end; }
}