@charset "UTF-8";

/*---------------------------------------------------------
itero
---------------------------------------------------------*/
#itero .l-boxlist li .l-boxlist__txt .c-hdg--min{
	position: relative;
	z-index: 1;
}
#itero .l-boxlist li .l-boxlist__txt .c-hdg--min::before{
	position: absolute;
	content: "";
	width: 4em;
	height: 4em;
	border: 0.875em solid #ffff00;
	right: 0;
	top:-1.45em;
	border-radius: 4em;
	z-index: -1;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#itero .l-boxlist li .l-boxlist__txt .c-hdg--min::before{
	right: 10%;
}

}



/*---------------------------------------------------------
itero-orthodontics
---------------------------------------------------------*/
#itero-orthodontics .flow_list li{
	margin-top: 50px;
	display: flex;
	justify-content: space-between;
}
#itero-orthodontics .flow_list li:first-child{
	margin-top: 0;
}
#itero-orthodontics .flow_list li .arrow{
	max-width: 140px;
	width: 11.7%;
	background: linear-gradient(to bottom,  rgba(121,182,227,1) 0%,rgba(138,227,196,1) 100%);
	display: flex;
  	justify-content: center;
	padding: 0.8em 0.5em;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}
#itero-orthodontics .flow_list li .arrow::before{
	position: absolute;
	content: "";
	background: url("../../images/reason/3d-diagnosis/flow_arrow@2x.png") no-repeat center bottom;
	background-size: 100% auto;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 0;
	z-index: -1;
}
#itero-orthodontics .flow_list li .arrow p{
	color: #FFF;
	font: var(--font-min);
	writing-mode: vertical-rl;
	letter-spacing: 0.2em;
}
#itero-orthodontics .flow_list li .c-flt{
	max-width: 1010px;
	width: 84.3%;
}
#itero-orthodontics .flow_list li .c-flt .c-flt__img{
	max-width: 440px;
	width: 43.5644%;
}
#itero-orthodontics .flow_list li .c-flt .c-hdg--bld{
	color: var(--color-taq);
	font-size: min(2.8vw,205%);
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
#itero-orthodontics .flow_list li{
	margin-top: 4%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#itero-orthodontics .flow_list li{
	margin-top: 7%;
}
#itero-orthodontics .flow_list li .arrow{
	width: 14%;
}
#itero-orthodontics .flow_list li .c-flt{
	width: 82%;
}
#itero-orthodontics .flow_list li .c-flt .c-flt__img{
	width: 80%;
}
#itero-orthodontics .flow_list li .c-flt .c-hdg--bld{
	font-size: 135%;
	text-align: center;
}
}