@charset "utf-8";

.outer h2 {
	display:block;
	border-bottom:1px solid #ddd;
	font-size:120%;
}

.sec1,
.sec2 {
	opacity:var(--opp);
}

.flowList {
	display:block;
	counter-reset:step;
}

.flowList .item {
	display:flex;
	padding:.5em 1em;
}
.flowList .item:nth-child(even) {
	background-color:#eee;
}
.flowList .item .title {
	width:10em;
}
.flowList .item .bloc {
	width:100%;
}
.flowList .item .title > * {
	margin:auto;
}
.flowList .item .title b {
	display:flex;
	width:2.2em;
	height:2.2em;
	border-radius:1.1em;
	justify-content:center;
	place-items:center;
	background-color:var(--color2);
	color:#fff;
	font-size:200%;
}
.flowList .item .title b:after {
	counter-increment:step;
	content:counter(step);
	width:fit-content;
	height:fit-content;
	display:block;
}
.flowList .item .title h3 {
	display:block;
	width:fit-content;
}

.flowList .item .bloc {
	display:flex;
	flex-flow:column;
	justify-content:center;
	padding:0 1em;
}
.flowList .item ul {
	list-style:unset;
	padding-left:1em;
}
.flowList .item a {
	cursor:pointer;
}
.flowList strong {
	position:relative;
	display:inline-block;
	font-weight:normal;
}
.flowList strong:before {
	position:absolute;
	display:block;
	content:'';
	inset:.5em -.6em .1em;
	transform: skewY(.3deg);
	background-color:#ff0;
	mix-blend-mode:multiply;
}
.flowList .addr {
	position:relative;
	padding:1em 2em;
	width:fit-content;
}
.flowList .addr h4 {
	font-weight:bold;
}
.flowList .addr:before {
	content:'';
	position:absolute;
	inset:.3em;
	background-color:#f2f2f9;
	border-radius:1em;
}
.flowList .addr > * {
	position:relative;
	display:block;
}

.sec2 a {
	display:block;
	padding:1em 2em;
	background-color:var(--color2);
	color:#fff;
	font-size:110%;
	width:fit-content;
	text-decoration-line:none;
	border-radius:.5em;
}
.sec2 .sarea {
	display:flex;
	height:10em;
	justify-content:center;
	place-items:center;
}
.sec2 .sarea li {
	display:block;
	width:fit-content;
	height:fit-content;

}