@charset "UTF-8";

html {
    font-size: 62.5%;
}

body {
    font-size: 1.4rem;
    background-color: #f8fafc;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    font-family: 'Noto Sans JP';
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

ul {
    list-style: none;
}

.red {
    color: #7B1E3A;
}

.blue {
    color: #2F4A73;
}

.green {
    color: #1F3D2B;
}

.gold {
    color: red;
}

a {
    text-decoration: none;
    color: #000;
}

/* header */
header {
    width: 100%;
    border-bottom: 1px solid #000;
    height: 60px;
}

header a {
    width: fit-content;
    display: block;
}

.header-left {
    display: flex;
    margin: 10px;
    width: fit-content;
}

header .logo {
    width: 50px;
    height: 50px;
    padding-right: 5px;
}

header p {
    font-size: 28px;
    display: block;
    line-height: 45px;
}

/* catch */
.catch {
    width: 100%;
    height: 300px;
    background-image: url(../img/top.png);
    background-size: cover;
    background-position: center;
    position: relative;
}

.catch h1 {
    color: #fff;
    font-size: 40px;
    text-align: center;
    padding-top: 130px;
}

/* link */
.link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: #000;
}

.link a {
    font-size: 15px;
    margin: 15px;
    color: #f8fafc;
    white-space: nowrap;
}

.link .btn {
    border-radius: 8px;
    background-color: #ff7a59;
    padding: 10px;
}

.link .btn:hover {
    opacity: .8;
}

/* top-wrapper */
.top-wrapper {
    background-image: url(../img/back.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    border: 1px solid #000;
}

.top-wrapper .container {
    padding: 20px;
}

.top-wrapper .msg {
    margin: 0 auto;
    margin-top: 10px;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: #f8fafc;
    padding: 10px;
    width: 50%;
    text-align: center;
    font-size: 30px;
}

.top-wrapper .list {
    margin: 0 auto;
    width: 50%;
    padding: 10px;
    padding-bottom: 20px;
}

.top-wrapper .list p {
    padding: 10px;
    font-size: 25px;
}

.top-wrapper a {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 20px;
    font-size: 20px;
    text-decoration: underline;
    text-underline-offset: 5px;
    color: #000;
}

.top-wrapper a:hover {
    opacity: .8;
}

/* features-wrapper */
#features-wrapper {
    width: 100%;
}

#features-wrapper h2 {
    text-align: center;
    padding: 20px;
    font-size: 20px;
}

.feature {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

.lesson-text {
    padding: 20px;
    width: 400px;
}

.feature img {
    width: 300px;
    height: 200px;
    border-radius: 30px;
}

.feature .title {
    font-size: 25px;
    text-align: center;
    white-space: nowrap;
    color: #000;
}

.feature .text {
    font-size: 16px;
}

.pr {
    font-size: 20px;
    text-align: center;
    padding-bottom: 20px;
}

.banner-wrapper {
    width: 100%;
    border-top: 1px solid #000;
    padding-bottom: 20px;
}

.banner-wrapper p {
    font-size: 18px;
    text-align: center;
}

.banner {
    margin: 0 auto;
    padding-top: 10px;
    display: block;
}

/* lesson-wrapper */
#lesson-wrapper {
    width: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-image: url(../img/back2.png);
    background-position: center;
    background-size: cover;
}

#lesson-wrapper h2 {
    text-align: center;
    margin: 10px auto;
    padding: 20px;
    font-size: 20px;
}

.lessons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.lesson {
    margin-left: 30px;
    margin-right: 30px;
}

.lesson p {
    text-align: center;
    font-size: 20px;
}

.lesson img {
    width: 200px;
    height: 200px;
    border-radius: 30px;
}

/* course-wrapper */
#course-wrapper {
    width: 100%;
    border-bottom: 1px solid #000;
    padding-bottom: 20px;
}

#course-wrapper h2 {
    text-align: center;
    margin: 10px auto;
    padding: 20px;
    font-size: 20px;
}

.courses {
    display: flex;
    justify-content: center;
}

#course-wrapper .box {
    border: 2px solid #000;
    border-radius: 30px;
    margin: 0 auto;
    width: 500px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f8fafc;
}

#course-wrapper p {
    font-size: 18px;
    padding: 10px;
    text-align: center;
}

#course-wrapper img {
    width: 300px;
    height: 300px;
    display: block;
    margin-top: 50px;
}

.price {
    font-weight: bold;
}

/* qa */
#qa {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;
}

#qa h2 {
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    font-size: 20px;
}

.q {
    padding-bottom: 20px;
}

.q,
.a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.quest {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
    padding: 30px;
    font-size: 20px;
}

/* flow-wrapper */
#flow-wrapper {
    width: 100%;
    padding-bottom: 20px;
    background-image: url(../img/back3.png);
    background-position: center;
    background-size: cover;
}

#flow-wrapper h2 {
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    font-size: 20px;
}

.flows {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.flow {
    border-radius: 30px;
    margin: 20px;
    height: 150px;
    width: 200px;
}

.flow p {
    font-size: 18px;
    text-align: center;
    color: #fff;
}

.flow-text {
    padding-top: 40px;
}

.flows .f1 {
    background-color: #7B1E3A;
}

.flows .f2 {
    background-color: #1F2A44;
}

.flows .f3 {
    background-color: #1F3D2B;
}

.sug {
    text-align: center;
    font-size: 18px;
}

.canp {
    text-align: center;
    font-size: 20px;
    padding: 20px 0 5px 0;
}

#flow-wrapper button {
    margin: 0 auto;
    padding: 10px;
    display: block;
    height: 70px;
    width: 500px;
    border: 1px solid #000;
    border-radius: 8px;
    background-color: #ff7a59;
    color: #fff;
    font-size: 20px;
}

#flow-wrapper button:hover {
    opacity: .8;
}

/* access */
#access h2 {
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    font-size: 20px;
}

#access {
    width: 100%;
    border-top: 1px solid #000;
}

#access table {
    margin: 0 auto;
    margin-bottom: 20px;
}

table,
td,
th {
    border: 1px solid #000;
    padding: 10px;
    border-collapse: collapse;
    font-size: 18px;
}

/* footer */
footer {
    height: 70px;
    border-top: 1px solid #000;
}

footer p {
    padding-top: 10px;
    font-size: 13px;
    text-align: center;
}

.fic {
    padding: 5px;
    text-align: center;
    opacity: .6;
    font-size: 12px;
}

/* media */
@media screen and (max-width: 480px) {

    /* header */
    header {
        height: 40px;
    }

    header .logo {
        width: 30px;
        height: 30px;
    }

    header p {
        font-size: 18px;
        line-height: 25px;
    }

    /* catch */
    .catch h1 {
        font-size: 22px;
    }

    /* top-wrapper */
    .top-wrapper .msg {
        padding: 10px;
        width: 80%;
        font-size: 18px;
    }

    .top-wrapper .list {
        width: 95%;
        padding: 10px;
    }

    .top-wrapper .list p {
        padding: 10px;
        font-size: 20px;
    }

    .top-wrapper a {
        padding-bottom: 20px;
        font-size: 18px;
    }

    /* features-wrapper */
    .feature .title {
        font-size: 16px;
    }

    .feature img {
        width: 200px;
        height: 100px;
    }

    .feature .text {
        font-size: 13px;
    }

    .lesson-text {
        width: 50%;
        padding: 10px;
    }

    .pr {
        font-size: 15px;
        width: 90%;
        margin: 0 auto;
    }

    /* banner */
    .banner-wrapper p {
        font-size: 15px;
    }

    .banner-wrapper img {
        width: 100%;
    }

    /* lesson-wrapper */
    #lesson-wrapper h2 {
        text-align: center;
        margin: 10px auto;
        padding: 20px;
        font-size: 18px;
    }

    .lesson {
        margin: 10px;
    }

    .lesson p {
        text-align: center;
        font-size: 18px;
    }

    .lesson img {
        width: 100px;
        height: 100px;
    }

    /* course-wrapper */
    #course-wrapper h2 {
        font-size: 18px;
    }

    #course-wrapper .box {
        padding: 10px;
        width: 90%;
    }

    #course-wrapper p {
        font-size: 14px;
        padding: 10px;
    }

    #course-wrapper img {
        width: 150px;
        height: 150px;
    }

    .nation p {
        font-size: 18px;
    }

    .nation li {
        font-size: 13px;
        padding-right: 3;
    }

    /* flow-wrapper */
    .flow-wrapper h2 {
        font-size: 18px;
    }

    .flow {
        border-radius: 30px;
        margin: 10px;
        height: 100px;
        width: 120px;
    }

    .flow p {
        font-size: 14px;
        text-align: center;
        color: #fff;
    }

    .flow-text {
        padding-top: 20px;
    }

    .flows .f1 {
        background-color: #7B1E3A;
    }

    .flows .f2 {
        background-color: #1F2A44;
    }

    .flows .f3 {
        background-color: #1F3D2B;
    }

    .sug {
        text-align: center;
        font-size: 14px;
    }

    .canp {
        text-align: center;
        font-size: 18px;
        padding: 20px 0 5px 0;
    }

    #flow-wrapper button {
        margin: 0 auto;
        padding: 10px;
        display: block;
        height: 70px;
        width: 80%;
    }

    #flow-wrapper button:hover {
        opacity: .8;
    }

    /* access */
    table iframe {
        width: 300px;
        height: 300px;
    }

    table {
        width: 90%;
    }

    /* footer */
    footer {
        height: 70px;
        border-top: 1px solid #000;
    }

    footer p {
        padding-top: 5px;
        font-size: 10px;
    }

    .fic {
        padding: 5px;
        opacity: .6;
        font-size: 10px;
    }
}