@charset "UTF-8";

#flow-top h1{
    position: absolute;
    padding-top: 50px;
    font-family: var(--font-family-02);
    font-size: clamp(1.125rem, 0.912rem + 1.06vw, 2.188rem);
    font-weight: var(--font-weight-7);
    color: var(--base);
    text-shadow: 1px 2px 0px #00000029;
    z-index: 1;
}
#flow {
    padding: clamp(1.563rem, 0.625rem + 4.69vw, 6.25rem) clamp(0.625rem, -1.125rem + 8.75vw, 9.375rem) 0;
    text-align: center;
    overflow: hidden;
}
#flow h2 {
    font-family: var(--font-family-02);
    font-size: clamp(1.125rem, 0.95rem + 0.88vw, 2rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
    text-shadow: 1px 1px 0px #00000029;
}
.flow .strong {
    font-family: var(--font-family-01);
    font-size: clamp(1.75rem, 1.5rem + 1.25vw, 3rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
    padding-left: clamp(0.5rem, 0.412rem + 0.44vw, 0.938rem);
    padding-right: clamp(0.5rem, 0.412rem + 0.44vw, 0.938rem);
    text-shadow: 1px 1px 0px #00000029;
}
.flow-text {
    margin: clamp(0.938rem, 0.5rem + 2.19vw, 3.125rem) auto clamp(0.625rem, -0.5rem + 5.63vw, 6.25rem);
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
    font-weight: var(--font-weight-5);
    color: var(--reg-text);
    padding: 0 clamp(0.625rem, 0.563rem + 0.31vw, 0.938rem);
}
.change-img-01 {
    width: clamp(43.75rem, 25.855rem + 35.75vw, 68.75rem);
    }
.change-img-02 {
    width: clamp(13.75rem, 8.333rem + 27.08vw, 21.875rem);
    }
.timeline{
    max-width: 990px;
    margin: clamp(0rem, -1.25rem + 6.25vw, 6.25rem) auto 30px;
    padding: clamp(2.813rem, 2.75rem + 0.31vw, 3.125rem) clamp(0rem, -0.375rem + 1.88vw, 1.875rem) 0 clamp(0.938rem, 0.75rem + 0.94vw, 1.875rem);
}
.timeline li{
    position: relative;
    list-style: none;
    padding: 0 0 20px 0;
}
.timeline dt{
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    font-weight: var(--font-weight-6);
    margin: auto 0;
}
.timeline dl{
    margin: 0 0 clamp(0rem, -0.625rem + 3.13vw, 3.125rem) clamp(0rem, -0.625rem + 3.13vw, 3.125rem);
    border: 1px solid var(--black_02);
}
.timeline .step img {
    width: clamp(5rem, 3.813rem + 5.94vw, 10.938rem);
}
.timeline .btn {
    margin: 0 auto 30px;
}
.timeline a {
    font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
    font-weight: var(--font-weight-5);
    padding: clamp(0.625rem, 0.588rem + 0.19vw, 0.813rem) clamp(1.563rem, 1.438rem + 0.63vw, 2.188rem);
    border-radius: var(--border-radius-5);
    background-color: var(--white);
}
.timeline .btn .btn-03 {
    color: var(--white);
    background: var(--main-01);
    transition: var(--transition-300e);
}
.timeline .btn .btn-03:hover {
    color: var(--main-01);
    background: var(--yellow-01);
}
.timeline dd {
    padding: 5px 0 25px;
}
.timeline dd h3 {
    display: block;
    margin-bottom: 15px;
    font-size: clamp(0.938rem, 0.85rem + 0.44vw, 1.375rem);
}
.timeline dd p{
    padding: 0 50px;
    text-align: left;
    display: inline-block;
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
}
.border-line {
    position: absolute;
    left: clamp(-1.063rem, -1.375rem + 1.56vw, 0.5rem);
    top: clamp(7.188rem, 6.75rem + 2.19vw, 9.375rem);
    width: clamp(0.188rem, 0.163rem + 0.13vw, 0.313rem);
    height: 0;
    background: var(--main-01);
    border-radius: 5px;
}
.timeline li::after{
    content:'';
    position: absolute;
    top: clamp(6.875rem, 6.438rem + 2.19vw, 9.063rem);
    left: clamp(-1.25rem, -1.5rem + 1.25vw, 0rem);
    width: clamp(0.625rem, 0.5rem + 0.63vw, 1.25rem);
    height: clamp(0.625rem, 0.5rem + 0.63vw, 1.25rem);
    background: var(--main-01);
    border-radius: 50%;
}
.to-qa .qa-info {
    font-family: var(--font-family-02);
    font-size: clamp(0.875rem, 0.75rem + 0.63vw, 1.5rem);
    font-weight: var(--font-weight-7);
    color: var(--reg-text);
    text-align: center;
    margin-bottom: 25px;
}
.to-qa-01 {
    font-family: var(--font-family-02);
    font-size: clamp(1.25rem, 1.012rem + 1.19vw, 2.438rem);
    font-weight: var(--font-weight-7);
    color: var(--main-01);
}
.to-qa-02 {
    font-family: var(--font-family-02);
    font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
    font-weight: var(--font-weight-7);
    color: var(--reg-text);
}
.to-qa p {
    font-family: var(--font-family-02);
    font-size: clamp(0.625rem, 0.525rem + 0.5vw, 1.125rem);
    font-weight: var(--font-weight-6);
    color: var(--reg-text);
    text-align: center;
}
.to-qa .to-qa-btn {
    font-family: var(--font-family-02);
    font-size: clamp(0.75rem, 0.675rem + 0.38vw, 1.125rem);
    font-weight: var(--font-weight-5);
    padding: clamp(0.625rem, 0.563rem + 0.31vw, 0.938rem) clamp(0.938rem, 0.813rem + 0.63vw, 1.563rem);
    background: var(--main-01);
    color: var(--white);
    border-radius: 5px;
    transition: var(--transition-300e);
}
.to-qa .to-qa-btn-a {
    text-align: center;
    margin-top: clamp(1.563rem, 1.25rem + 1.56vw, 3.125rem);
    margin-bottom: clamp(3.125rem, 1.875rem + 6.25vw, 9.375rem);
}
.to-qa .to-qa-btn-a a:hover {
    color: var(--main-01);
    background: var(--yellow-01);
    transition: var(--transition-300e);
}