@charset "UTF-8";
.intro {
    padding: 48px 5% 0;
}
.intro__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.intro h2 {
    color: #024b9e;
    font-size: 30px;
    font-weight: bold;
    line-height: 1.8;
    text-align: center;
}
.intro__text {
    margin-top: 10px;
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
}
.intro__content {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 0 100px;
}
.intro__content p {
    max-width: 720px;
    margin-left: auto;
    padding: 45px 60px;
    background-color: #f2f6fd;
    font-size: 18px;
    line-height: 1.8;
    border-radius: 20px;
}
.intro__content p span {
    color: #024b9e;
}
.intro__visual {
    position: absolute;
    left: 100px;
    bottom: 0;
    max-width: 339px;
}
.intro-bar {
    padding: 38px 5% 42px;
    background-color: #2D9BE1;
    color: #fff;
}
.intro-bar__inner {
    max-width: 1178px;
    margin: 0 auto;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.8;
}
.intro-bar__inner span {
    color: #ffd500;
}
@media screen and (max-width: 767px) {
    .intro {
        padding: 50px 16px;
    }
    .intro__inner {
        max-width: 1200px;
        margin: 0 auto;
    }
    .intro h2 {
        color: #024b9e;
        font-size: 22px;
        font-weight: bold;
        line-height: 1.8;
        text-align: center;
    }
    .intro__text {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.8;
        text-align: center;
    }
    .intro__content {
        margin-top: 20px;
        padding: 0;
    }
    .intro__content p {
        margin: 0;
        padding: 20px;
        font-size: 16px;
    }
    .intro__content p span {
        color: #024b9e;
    }
    .intro__visual {
        position: relative;
        left: initial;
        bottom: initial;
        max-width: 200px;
        margin: 20px auto 0;
    }
    .intro-bar {
        padding: 40px 16px;
        background-color: #2D9BE1;
        color: #fff;
    }
    .intro-bar__inner {
        max-width: 1178px;
        margin: 0 auto;
        font-weight: bold;
        font-size: 16px;
        line-height: 1.8;
    }
    .intro-bar__inner span {
        color: #ffd500;
    }
}
/* -------------------------------- */
.for {
    padding: 78px 5% 0;
}
.for__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.for h2 {
    color: #21a5a6;
    font-size: 45px;
    font-weight: 600;
    line-height: 1.8;
    text-align: center;
}
.for__visual {
    margin: 48px auto 0;
}
.for__arrow {
    position: relative;
    max-width: 73px;
    margin: 13px auto 0;
    z-index: 3;
}
.for__cta {
    position: relative;
    margin: -20px auto 0;
    padding: 48px 20px 43px;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    z-index: 2;
}
.for__cta-text {
    font-size: 18px;
    line-height: 1.8;
}
.for__cta-text h3 {
    text-align: center;
}
.for__cta-text ul {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-top: 8px;
}
.for__cta-text ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.for__cta-text ul li span {
    width: 25px;
    min-width: 25px;
}
.for__cta-btn a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 463px;
    height: 74px;
    margin: 27px auto 0;
    background-color: #e65f27;
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
    border-radius: 10px;
}
.for__cta-btn a span {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translate(0,-50%);
    width: 16px;
}
.for__cta-btn a:hover {
    opacity: .7;
    transition: .3s;
}
@media screen and (max-width: 767px) {
    .for {
        padding: 50px 16px 0;
    }
    .for__inner {
        max-width: 1200px;
        margin: 0 auto;
    }
    .for h2 {
        color: #21a5a6;
        font-size: 22px;
        font-weight: 600;
        line-height: 1.8;
        text-align: center;
    }
    .for__visual {
        margin: 30px auto 0;
    }
    .for__arrow {
        max-width: 73px;
        margin: 13px auto 0;
    }
    .for__cta {
        margin: -20px auto 0;
        padding: 48px 20px 20px;
    }
    .for__cta-text {
        font-size: 16px;
    }
    .for__cta-text h3 {
    }
    .for__cta-text ul {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 20px;
    }
    .for__cta-btn a {
        margin: 30px auto 0;
        font-size: 16px;
    }
    .for__cta-btn a span {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translate(0,-50%);
        width: 16px;
    }
}
/* -------------------------------- */
.personal {
    margin-top: -100px;
    padding: 178px 5% 87px;
    background-color: #21a5a6;
}
.personal__inner {
    max-width: 958px;
    margin: 0 auto;
}
.personal h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    background-color: #fff;
    color: #21a5a6;
    font-size: 30px;
    font-weight: bold;
    border-radius: 200px;
}
.personal h3 span {
    width: 43px;
    min-width: 43px;
}
.personal ul {
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.personal__content {
    display: flex;
    gap: 90px;
    margin-top: 50px;
}
.personal__content p {
    width: 100%;
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
}
.personal__visual {
    width: 310px;
    min-width: 310px;
}
.personal__content-memo {
    width: 100%;
    margin-top: -30px;
    padding: 20px 47px;
    background-color: #3A9FA0;
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
}
.personal__content-memo span {
    color: #ffd500;
}
@media screen and (max-width: 767px) {
    .personal {
        margin-top: -100px;
        padding: 150px 16px 50px;
        background-color: #21a5a6;
    }
    .personal__inner {
        max-width: 958px;
        margin: 0 auto;
    }
    .personal h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 14px 30px;
        background-color: #fff;
        color: #21a5a6;
        font-size: 20px;
        font-weight: bold;
        border-radius: 200px;
    }
    .personal h3 span {
        width: 30px;
        min-width: 30px;
    }
    .personal ul {
        display: flex;
        flex-direction: column;
        gap: 60px;
    }
    .personal__content {
        flex-direction: column;
        gap: 30px;
        margin-top: 20px;
    }
    .personal__content p {
        width: 100%;
        color: #fff;
        font-size: 18px;
        line-height: 1.8;
    }
    .personal__visual {
        width: 260px;
        min-width: initial;
        margin: 0 auto;
    }
    .personal__content-memo {
        width: 100%;
        margin-top: 30px;
        padding: 20px;
        background-color: #3A9FA0;
        color: #fff;
        font-size: 16px;
        line-height: 1.8;
    }
    .personal__content-memo span {
        color: #ffd500;
    }
}
/* -------------------------------- */
.about {
    padding: 78px 5% 87px;
    background-color: #2D9Bdc;
}
.about__inner {
}
.about h2 {
    color: #fff;
    font-size: 45px;
    font-weight: 600;
    text-align: center;
}
.about__contents {
    margin-top: 107px;
    padding: 80px 30px;
    background-color: #fff;
    border-radius: 20px;
}
.about__contents ul {
    max-width: 1076px;
    margin: 0 auto;
}
.about__contents ul li {
    padding: 60px 0;
    border-bottom: 1px solid #D6D6D6;
}
.about__contents ul li:nth-child(3) .about__visual {
    max-width: 747px;
    margin: 0 auto;
}
.about__contents ul li .about__btn {
    max-width: 536px;
    margin: 60px auto 0;
}
.about__contents ul li .about__btn a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 20px;
    background-color: #e65f27;
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
    border-radius: 10px;
}
.about__contents ul li .about__btn a span {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translate(0,-50%);
    width: 16px;
}
.about__contents ul li .about__btn a:hover {
    opacity: .7;
    transition: .3s;
}
.about__contents ul li:nth-child(3) {
    padding-bottom: 0;
    border-bottom: 0;
}
@media screen and (max-width: 767px) {
    .about {
        padding: 50px 16px;
    }
    .about__inner {
    }
    .about h2 {
        color: #fff;
        font-size: 26px;
        font-weight: 600;
        text-align: center;
    }
    .about__contents {
        margin-top: 30px;
        padding: 20px 16px;
        background-color: #fff;
        border-radius: 20px;
    }
    .about__contents ul {
        max-width: 1076px;
        margin: 0 auto;
    }
    .about__contents ul li {
        padding: 20px 0;
        border-bottom: 1px solid #D6D6D6;
    }
    .about__contents ul li:nth-child(3) .about__visual {
        max-width: 747px;
        margin: 0 auto;
    }
    .about__contents ul li .about__btn {
        max-width: 536px;
        margin: 60px auto 0;
    }
    .about__contents ul li .about__btn a {
        padding: 20px;
        font-size: 16px;
    }
    .about__contents ul li .about__btn a span {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translate(0,-50%);
        width: 16px;
    }
    .about__contents ul li .about__btn a:hover {
        opacity: .7;
        transition: .3s;
    }
    .about__contents ul li:nth-child(3) {
        padding-bottom: 0;
        border-bottom: 0;
    }
}
/* -------------------------------- */
.day {
    padding: 130px 5% 80px;
}
.day__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.day h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 115px;
    background-color: #024b9e;
}
.day h2 img {
    max-width: 619px;
    margin: 0 auto;
}
.day__visual {
    max-width: 926px;
    margin: 0 auto;
}
.day__carrier {
    margin: 80px auto 0;
}
.day__atmosphere {
    margin: 40px auto 0;
}
@media screen and (max-width: 767px) {
    .day {
        padding: 50px 16px;
    }
    .day__inner {
        max-width: 1200px;
        margin: 0 auto;
    }
    .day h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80px;
        padding: 0 30px;
        background-color: #024b9e;
    }
    .day h2 img {
        max-width: 619px;
        margin: 0 auto;
    }
    .day__visual {
        max-width: 926px;
        margin: 0 auto;
    }
    .day__carrier {
        margin: 50px auto 0;
    }
    .day__atmosphere {
        margin: 30px auto 0;
    }
}
/* -------------------------------- */
.staff-cta {
    padding: 80px 5%;
    background-color: #21a5a6;
    color: #fff;
}
.staff-cta__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.staff-cta .icon {
    width: 50px;
    margin: 0 auto;
}
.staff-cta h2 {
    margin-top: 10px;
    font-size: 45px;
    font-weight: 600;
    text-align: center;
}
.staff-cta p {
    max-width: 956px;
    margin: 40px auto 0;
    font-size: 20px;
    line-height: 1.8;
    text-align: center;
}
.staff-cta__btn {
    max-width: 636px;
    margin: 40px auto 0;
}
.staff-cta__btn a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 20px;
    background-color: #e65f27;
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
    border-radius: 10px;
}
.staff-cta__btn a span {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translate(0,-50%);
    width: 16px;
}
.staff-cta__btn a:hover {
    opacity: .7;
    transition: .3s;
}
@media screen and (max-width: 767px) {
    .staff-cta {
        padding: 50px 16px;
        background-color: #21a5a6;
        color: #fff;
    }
    .staff-cta__inner {
        max-width: 1200px;
        margin: 0 auto;
    }
    .staff-cta .icon {
        width: 50px;
        margin: 0 auto;
    }
    .staff-cta h2 {
        margin-top: 10px;
        font-size: 30px;
        font-weight: 600;
        text-align: center;
    }
    .staff-cta p {
        max-width: 956px;
        margin: 30px auto 0;
        font-size: 16px;
        line-height: 1.8;
        text-align: center;
    }
    .staff-cta__btn a {
        padding: 20px;
        font-size: 16px;
    }
    .staff-cta__btn a span {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translate(0,-50%);
        width: 16px;
    }
}
/* -------------------------------- */
.company {
    padding: 80px 5% 107px;
}
.company__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.company h2 {
    margin-top: 10px;
    font-size: 45px;
    font-weight: 600;
    text-align: center;
}
.company p {
    margin-top: 30px;
    font-size: 20px;
    line-height: 1.8;
    text-align: center;
}
.company p span {
    color: #024b9e;
    font-size: 25px;
    font-weight: bold;
}
.company table {
    width: 100%;
    max-width: 1200px;
    margin: 60px auto 0;
    border-collapse: collapse;
    background-color: #fff;
}
.company table th,
.company table td {
    padding: 24px 36px;
    border: 1px solid #ddd;
    vertical-align: top;
    text-align: left;
}
.company table th {
    width: 312px;
    background-color: #f9f9f9;
    font-weight: bold;
}
.company table td {
    line-height: 1.6;
}
.company table a {
    color: #d14c4c;
    text-decoration: underline;
}
@media screen and (max-width: 767px) {
    .company {
        padding: 50px 16px;
    }
    .company__inner {
        max-width: 1200px;
        margin: 0 auto;
    }
    .company h2 {
        margin-top: 10px;
        font-size: 36px;
        font-weight: 600;
        text-align: center;
    }
    .company p {
        margin-top: 30px;
        font-size: 16px;
        line-height: 2;
        text-align: center;
    }
    .company p span {
        color: #024b9e;
        font-size: 20px;
        font-weight: bold;
        line-height: 2;
    }

    .company table,
    .company table th,
    .company table td {
        display: block;
        width: 100%;
    }
    .company table th {
        background-color: #f9f9f9;
    }
    .company table th,
    .company table td {
        padding: 10px;
    }
}