@charset "UTF-8";

.intro{margin-bottom: 10vw;position: relative;}
.intro img{width: 100%;margin-bottom: 12vw;}
.intro .en{font-family: "Jost", sans-serif;text-align: right;position: absolute;top: 67vw;right: 0;color: #f3f3f3;font-size: 13vw;line-height: 1;letter-spacing: 0.1em;}
.intro .text{position: relative;z-index: 2;width: 88%;margin: 0 auto;}
.intro .ttl{font-size: 6vw;font-weight: bold;}
.intro .ttl span{font-size: 4vw;display: table;font-weight: bold;color: var(--gold);}

.flow{position: relative;z-index: 1;margin-bottom: 10vw;}
.flow li{padding: 5%;margin-bottom: 5vw;background: #fff;position: relative;border: 1px solid #ddd;}
.flow li:after{content: "";width: 10px;height: 10vw;position: absolute;bottom: -9vw;left: 50%;-ms-transform: translate(-50%, 0);-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);background: #ccd5dc;z-index: -1;}
.flow li:last-child{margin-bottom: 0;}
.flow li:last-of-type:after{content: none;}
.flow li img{width: 100%;margin-bottom: 4vw;}
.flow li .read{font-weight: bold;font-size: 4.4vw;margin-bottom: 2vw;line-height: 1.6;}
.flow li .read span{background: var(--gold);font-size: 70%;padding: 2% 5%;border-radius: 30px;margin-right: 2%;vertical-align: text-top;line-height: 1.4;font-family: "Jost", sans-serif;font-weight: 600;color: #fff;}
.flow li p:last-child{margin-bottom: 0;}


.reason li{margin-bottom: 0;position: relative;}
.reason li img{width: 100%;}

.reason li .text{background: #111111e8;width: 80vw;padding: 4vw;position: relative;margin: 0 0 0 auto;top: -10vw;right: -4vw;border-left: 4px solid var(--gold);}
.reason li:nth-child(even) .text {margin: 0 auto 0 0;top: -10vw;left: -4vw;border-left:none; border-right: 4px solid var(--gold);}
.reason li .en {font-size: 5.8vw;line-height: 1.4;text-align: justify;text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.4;letter-spacing: 0.04em;margin-bottom: 1vw;font-family: "Jost", sans-serif;}
.reason li .en span{position: relative;margin-right: 6vw;}
.reason li .en span:after{content: "";width: 14px;height: 1px;margin-right: 10px;background: #fff;position: absolute;bottom: 4px;right: -7vw;}
.reason li p{color: #fff;margin-bottom: 0;}

/* =============================================
pc
================================================*/
@media screen and (min-width: 736px) {

.intro{margin-bottom: 80px;}
.intro img{margin-bottom: 40px;}
.intro .en{top: 390px;font-size: 60px;}
.intro .text{position: relative;z-index: 2;width: 88%;margin: 0 auto;}
.intro .ttl{font-size: 30px;}
.intro .ttl span{font-size: 20px;}

.flow{position: relative;z-index: 1;margin-bottom: 80px;}
.flow li{padding: 30px;margin-bottom: 40px;}
.flow li img{margin-bottom: 20px;}
.flow li .read{font-size: 22px;margin-bottom: 10px;}
.flow li .read span{font-size: 60%;padding: 4px 14px;margin-right: 10px;}
.flow li p:last-child{margin-bottom: 0;}

.reason li .text{width: 84%;padding: 30px;top: -70px;right: -40px;}
.reason li:nth-child(even) .text {top: -70px;left: -40px;}
.reason li .en {font-size: 30px;margin-bottom: 8px;}
.reason li .en span{margin-right: 20px;}
.reason li .en span:after{right: -27px;}

}