@charset "UTF-8";
/* sp(320px) */

/* 外反母趾治療の流れ */
#flow {
	background-color: #e8f4fe;
}
#flow  .foot {
	inline-size: 18px;
	margin-inline: auto;
	margin-block-end: .6em;
}
#flow li {
	background-color: #fff;
	padding: 1.2em 1.2em;

	display: grid;
	grid-template-columns: 150px auto;
	grid-template-rows:  auto auto;
	column-gap: 4.4%;
	row-gap: 1.2em;

	grid-template-areas:
	"areaA areaB"
	"areaC areaC";

	position: relative;
}
#flow li:not(:last-of-type) {
	margin-block-end: 2.6em;
}
#flow li:not(:last-of-type)::after {
	content: '';
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	width: .8em;
	height: .8em;
	position: absolute;
	left: 50%;
	bottom:  -1.9em;
	transform: translateY(-50%) rotate(135deg) ;
	transition: all 300ms 0s ease;

}
#flow li figure {
	grid-area: areaA;
/*	border: 1px solid #000;*/
}
#flow li .txt {
	grid-area: areaB;
/*	border: 1px solid #000;*/
}
#flow li p {
	grid-area: areaC;
/*	border: 1px solid #000;*/
}
#flow li .txt .ttl {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	column-gap: 0;
	row-gap: .4em;
	align-items: center;

	padding-block-end: .5em;
	border-block-end: 0px dotted #777777;
}
#flow li .txt .ttl .num div {
	font-family: "Manrope", sans-serif;
	font-size: 17px;
	font-weight: bold;
	color: #000;
	background: #f9f22a;
	text-align: center;
	border-radius: 50%;
	width: 2em;
	height: 2em;
	line-height: 2em;
}
#flow li .txt .ttl .name {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	color: #4eaaf1;
}
#flow li .txt .ttl .name span {
	display: block;
	font-size: 12px;
	font-weight: normal;
	color: #000;
}
#flow li p {
	margin-block-start: 0em;
}







@media handheld, print, screen and (min-width: 375px) {
/* iphone6 */


/* end of media query(iphone6) */	
}



@media handheld, print, screen and (min-width: 414px) {
/*  iPhone6 Plus */

/* end of media query(iPhone6 Plus) */	
}



@media handheld, print, screen and (min-width: 480px) {
/* tablet */

/* 外反母趾とは */
#flow  .foot {
	inline-size: 24px;
}
#flow li .txt .ttl .num div {
	font-size: 18px;
}
#flow li .txt .ttl .name {
	font-size: 18px;
}

	@media (-webkit-min-device-pixel-ratio: 2){
		

	/* end of media query(retina) */	
	}

/* end of media query(tablet) */	
}



@media handheld, print, screen and (min-width: 620px) {
/* iPad */

/* 外反母趾とは */
#flow  .foot {
	inline-size: 28px;
}

#flow li {
	padding: 2.2em 2.2em;

	grid-template-columns: 330px auto;
	grid-template-rows:  5.5em auto;
	column-gap: 4.4%;
	row-gap: 0;

	grid-template-areas:
	"areaA areaB"
	"areaA areaC";

	margin-block-end: 2.6em;
}
#flow li .txt .ttl {
	grid-template-columns: 2em auto;
	grid-template-rows: auto;
	column-gap: 1.8em;
	row-gap: 0;
	align-items: center;

	border-block-end: 1px dotted #777777;
}
#flow li .txt .ttl .num div {
	font-size: 22px;
}
#flow li .txt .ttl .name {
	font-size: 20px;
}
#flow li .txt .ttl .name span {
	display: block;
	font-size: 14px;
}
#flow li p {
	margin-block-start: 0em;
}

#flow li.last .txt .ttl {
	padding-block-end: .9em;
}
#flow li.last .txt .ttl .name {
	position: relative;
	inset-block-start: .4em;
}

/* end of media query(iPad) */	
}



@media handheld, print, screen and (min-width: 900px) {
/* pc */

/* 外反母趾治療の流れ */
#flow  .foot {
	inline-size: 33px;
}

#flow li {
	padding: 2.8em 2.8em;

	grid-template-columns: 330px auto;
	grid-template-rows:  5.5em auto;
	column-gap: 4.4%;
	row-gap: 0;

	grid-template-areas:
	"areaA areaB"
	"areaA areaC";

	margin-block-end: 2.6em;
}
#flow li .txt .ttl {
	grid-template-columns: 2em auto;
	grid-template-rows: auto;
	column-gap: 2.2em;
	row-gap: 0;
	align-items: center;

	padding-block-end: .5em;
	border-block-end: 1px dotted #777777;
}
#flow li .txt .ttl .num div {
	font-size: 26px;
}
#flow li .txt .ttl .name {
	font-size: 22px;
}
#flow li .txt .ttl .name span {
	display: inline;
	font-size: 16px;
}
#flow li p {
	margin-block-start: 0em;
}

#flow li.last .txt .ttl {
	padding-block-end: .5em;
}
#flow li.last .txt .ttl .name {
	position: relative;
	inset-block-start: 0;
}

/* end of media query(pc) */
}