@charset 'UTF-8';

.sec-01> .flow-chart ,.sec-01> .anchor-list{ zoom: 1; }

.sec-01> .flow-chart:before ,.sec-01> .anchor-list:before ,.sec-01> .flow-chart:after ,.sec-01> .anchor-list:after{ content: ''; display: table; }

.sec-01> .flow-chart:after ,.sec-01> .anchor-list:after{ clear: both; }

/* main
---------------------------------------- */
.main-area{ background: url('../images/flow/bg_main.jpg') center center no-repeat; }

/* sec-01
---------------------------------------- */
.sec-01{ width: 100%; margin: 40px auto; }

.sec-01> .sec-title{ margin-bottom: 40px; text-align: center; }

.sec-01> .flow-chart{ position: relative; min-height: 220px; border-bottom: #231815 4px dotted; }

.sec-01> .flow-chart:before{ content: ''; display: block; position: absolute; top: 0; left: 135px; width: 44px; height: 68%; background: #231815; }

.sec-01> .flow-chart:after{ content: ''; display: block; position: absolute; bottom: 50px; left: 112px; width: 90px; height: 44px; border-top: #231815 44px solid; border-right: transparent 44px solid; border-left: transparent 44px solid; }

.sec-01> .flow-chart> .flow-title{ float: left; width: 315px; height: 100%; padding-bottom: 10px; background: #fff; -webkit-transform: translateY(-35px); transform: translateY(-35px); }

.sec-01> .flow-chart> .flow-text{ display: inline-block; width: 645px; padding: 25px 35px 80px 35px; }

.sec-01> .flow-chart> .flow-text> .text{ font-size: 19px; line-height: 1.631578947; }

.sec-01> .flow-chart> .flow-text .red{ color: #e60012; }

.sec-01> .flow01> .flow-title{ -webkit-transform: translateY(0); transform: translateY(0); }

.sec-01> .flow01> .flow-text{ padding: 25px 35px 15px 35px; text-align: center; }

.sec-01> .flow07{ border-bottom: none; }

.sec-01> .flow08{ min-height: auto; min-height: initial; border-bottom: none; }

.sec-01> .flow08:before{ content: none; }

.sec-01> .flow08:after{ content: none; }

.sec-01> .anchor-list{ width: 100%; margin-top: 110px; text-align: center; }

.sec-01> .anchor-list> li{ display: inline-block; margin: 0 26px; }

@media screen and (max-width: 640px){ .sec-01{ margin: 6.25vw auto; }
.sec-01> .sec-title{ margin-bottom: 6.25vw; }
.sec-01> .flow-chart{ position: relative; min-height: auto; min-height: initial; margin-bottom: 6.25vw; padding-bottom: 15.625vw; border-bottom: none; }
.sec-01> .flow-chart:before{ top: auto; top: initial; bottom: 6.25vw; left: 50%; width: 12.5vw; height: 9.375vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.sec-01> .flow-chart:after{ content: ''; display: block; position: absolute; bottom: 0; left: 50%; width: 18.75vw; height: 9.375vw; border-top: #231815 9.375vw solid; border-right: transparent 12.5vw solid; border-left: transparent 12.5vw solid; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.sec-01> .flow-chart> .flow-title{ float: none; width: 100%; padding-bottom: 0; text-align: center; -webkit-transform: translateY(0); transform: translateY(0); }
.sec-01> .flow-chart> .flow-text{ display: inline-block; width: 100%; padding: 3.125vw 5.46875vw; }
.sec-01> .flow-chart> .flow-text> .text{ font-size: 3.4375vw; }
.sec-01> .flow-chart> .flow-text .red{ color: #e60012; }
.sec-01> .flow01> .flow-text{ padding: 3.125vw 5.46875vw; }
.sec-01> .flow08{ padding-bottom: 0; }
.sec-01> .flow08:after{ content: none; }
.sec-01> .anchor-list{ margin-top: 9.375vw; }
.sec-01> .anchor-list> li{ width: 93.75vw; margin: 0 3.125vw 3.125vw 3.125vw; } }

/* payment-section
---------------------------------------- */
.payment-section{ margin-top: 65px; }

.payment-section .sec-title{ width: 100%; color: #fff; font-size: 28px; text-align: center; background: #231815; }

.payment-section .sec-title> span{ display: block; padding: .3em 0; letter-spacing: .46em; text-align: center; background: url('../images/flow/bg_bike.png') right -.5em no-repeat; }

.payment-section .chart-img{ width: 100%; margin: 35px auto 60px auto; }

.payment-section .chart-list> dt{ margin-top: 30px; padding: 40px 20px 20px 20px; border-top: #231815 4px dotted; }

.payment-section .chart-list> dd{ padding: 0 60px; }

.payment-section .chart-list> dd> .red{ color: #e60012; }

.sec-02{ margin-bottom: 100px; }

.sec-03{ margin-bottom: 100px; }

@media screen and (max-width: 640px){ .payment-section{ margin-top: 9.375vw; }
.payment-section .sec-title> span{ font-size: 4.6875vw; background: url('../images/flow/bg_bike.png') right -.5em no-repeat; background-size: auto 140%; }
.payment-section .chart-img{ margin: 3.125vw auto 6.25vw auto; }
.payment-section .chart-list{ width: 93.75vw; margin: 0 3.125vw; }
.payment-section .chart-list> dt{ margin-top: 3.125vw; padding: 6.25vw 3.125vw 3.125vw 3.125vw; text-align: center; }
.payment-section .chart-list> dd{ padding: 0 3.125vw; }
.sec-02{ margin-bottom: 9.375vw; }
.sec-03{ margin-bottom: 9.375vw; } }