@import "contact.css";

#flow h2 {
    color: var(--color-green);
    font-size: 1.4em;
    font-family: "Shippori Mincho", serif;
    text-align: center;

}
#flow ol {
    counter-reset: item 0;
}
#flow ol li {
    padding-left: 2em;
    counter-increment: item 1;
}
#flow ol li::before {
    content: counter(item);
    display:flex;
    align-items: center;
    justify-content: center;
    color:var(--color-white);
    background:var(--color-green);
    width:1.8em;
    aspect-ratio: 1;
    overflow: hidden;
    font-family: "Shippori Mincho", serif;
    border-radius:100%;
    position:absolute;
    top:0;
    left:0;
}
#flow ol li span {
    font-family: "Shippori Mincho", serif;
    color:var(--color-green);
    font-size:1.2em;
    padding-bottom:5px;
    display:block;
}

#flow article {
    background:var(--color-lightpink);
    padding:var(--padding);
    padding-bottom:calc(var(--padding) * 2);
}
#flow article p {
    text-align:center;
    font-weight:bold;
}
#flow article .buttons {
    margin-top:40px;
}
#flow article .buttons .button {
	display:block;
	background:var(--color-white);
	color:var(--color-black);
	border:solid 3px var(--color-pink);
	box-shadow:0 6px 0 var(--color-pink);
    width:600px;
    padding:30px 0 10px 0;
}
#flow article .buttons .button img {
	max-width:70%;
}
#flow article .buttons .button small {
	font-size:1em;
	display:block;
	margin:0;
    padding-top:5px;
}

.item-image {
    border-bottom:solid 1px var(--color-black);
    padding-bottom:var(--padding);
}
.item-image h3 {
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap:var(--gap);
    font-size:1.2em;
}
.item-image h3::before {
    content:'';
    height:1px;
    flex:1;
    background:var(--color-black);
}
.item-image h3::after {
    content:'';
    height:1px;
    flex:1;
    background:var(--color-black);
}
.item-image ul {
    max-width:680px;
    margin-inline:auto;
}
.item-image ul li {
    font-size:1.4em;
    font-weight:bold;
    text-align:center;
}
.item-image ul li img {
    margin-bottom:10px;
}
.item-image ul li small {
    display:block;
    font-size:0.6em;
    font-weight:400;
    margin:0;
}
.item-image p {
    text-align:center;
}

#form dl.form > dd:first-of-type > .attention {
    display:inline;
}


@media (max-width:520px ){
    #flow ol {
        flex-direction: column;
    }
    #flow article p {
        text-align:justify;
    }
    .item-image p {
        text-align:justify;
    }
    .item-image ul {
        gap:10px;
    }
    .item-image ul li {
        font-size:1.2em;
    }
}