@charset "utf-8";
/* head */
#header .head {padding: 80px 80px 0; width: 100%; height: 630px; background: no-repeat url(../img/flow/head.jpg) center/cover;}
#header .head .box {width: 100%; height: 100%; background-color: rgba(255, 237, 201, 0.4); position: relative;}
#header .head .content {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#header .head .content h1 {writing-mode: vertical-rl; color: #fff; font-size: 50px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);}
@media screen and (max-width:1200px) {
    #header .head {padding: 70px 0 0;}
    #header .head .content h1 {font-size: 40px;}
}
@media screen and (max-width:768px) {
    #header .head {padding: 50px 0 0;}
    #header .head .content h1 {font-size: 30px;}
}
/* flow */
#flow .wrap {margin: 150px auto; width: 100%; max-width: 1000px;}
#flow .wrap h3 {text-align: center; font-size: 32px;}
#flow .wrap ul {list-style: none;}
#flow .wrap ul li {margin: 50px auto 0;}
#flow .wrap ul li .ttl {display: flex; align-items: center; width: 100%; border-bottom: 1px solid #FFCC66; padding: 0 0 20px 0;}
#flow .wrap ul li .ttl .count {display: inline-block; position: relative; background-color: #EEE; border-radius: 10px 0 0 10px; font-size: 28px; font-weight: bold; padding: 0 1rem;}
#flow .wrap ul li .ttl .count span {color: #06C755;}
#flow .wrap ul li .ttl .count::before {content: ""; position: absolute; top: 0; right: 0; transform: translateX(100%); background-color: #EEE; clip-path: polygon(0 0, 0 100%, 100% 50%); width: 30px; height: 100%;}
#flow .wrap ul li .ttl h4 {font-size: 32px; padding: 0 0 0 50px;}
#flow .wrap ul li .content {display: flex; margin: 20px auto 0;}
#flow .wrap ul li .content .img {width: 50%; padding: 0 20px 0 0;}
#flow .wrap ul li .content .img img {width: 100%;}
#flow .wrap ul li .content .text {width: 50%; padding: 0 0 0 20px;}
.link a {font-size: 32px; min-width: none; padding: 0 3rem;}
@media screen and (max-width:1200px) {
    #flow .wrap {padding: 0 10px;}
    #flow .wrap h3 {font-size: 26px;}
    #flow .wrap ul li .ttl .count {font-size: 24px;}
    #flow .wrap ul li .ttl .count::before {width: 25px;}
    #flow .wrap ul li .ttl h4 {font-size: 26px; padding: 0 0 0 40px;}
    .link a {font-size: 26px;}
}
@media screen and (max-width:768px) {
    #flow .wrap ul li .ttl h4 {font-size: 22px;}
    #flow .wrap ul li .content {display: block;}
    #flow .wrap ul li .content .img {width: 100%; padding: 0; margin: 0 auto; max-width: 480px;}
    #flow .wrap ul li .content .text {width: 100%; padding: 0; margin: 30px auto 0;}
    .link a {font-size: 22px;}
}