@charset "UTF-8";

body {
    font-family: europa,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
    font-style: normal;
    background-color: #fff;
    color: #404040;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.1em;
    width: 77%;
    margin: 0px auto;
}

h1 img {
    width: 105px;
    margin-right: 720px;
}

h2 {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.18em;
    font-size: 38px;
    line-height: 60px;
    margin-bottom: 70px;
}

.flex,
.flex-position {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0px;
}

header .flex a {
    color: #999;
    font-size: 14px;
}

#forsp {
    display: none;
}

#menu ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#menu li {
    padding-right: 30px;
    color: #999;
}

header li:hover {
    color: #404040;
}

#eyecatch {
    width: 100%;
    padding: 85px 0px 25px;
}

.headerbtn {
    background-color: #ffaa33;
    border-radius: 30px;
    padding: 20px 80px;
    width: fit-content;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.2em;
    margin: 0px auto 100px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.headerbtn:hover {
    background-color: #fcc372;
}

#profession .flex,
#youtube .flex {
    justify-content: start;
    align-items: start;
}

#profession p {
    margin: 25px 25px 0px 0px;
}

/* スライダー */
.slider {
    width: 50%;
    margin: 0 auto;
}

.slider img {
    width: 25vw;
    height: auto;
}

.slider {
    transition: none;
}

.slick-next {
    cursor: pointer;
    outline: none;
    height: 100%;
    width: 100%;
    right: 0;
    z-index: 1;
}

.slick-next:before {
    position: absolute;
    right: 8px;
}

/* スライダーここまで */

#campain {
    text-align: center;
    padding-top: 200px;
}

#campain img {
    width: 100%;
}

#campain p {
    font-size: 13px;
    color: #8c8c8c;
    padding: 25px 0px;
}

#campain a {
    color: #ffba66;
}

h3 {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    padding: 150px 0px 30px;
}

.course .wrap,
#pr .wrap {
    width: 30%;
}

.course img {
    width: 100%;
    border-radius: 10px;
    min-height: 235px;
    object-fit: cover;
    box-shadow: 10px 10px 0 0 rgba(0, 0, 0, .5);
}

h4 {
    font-size: 18px;
    font-weight: bold;
    padding: 25px 0px;
}

.course p {
    color: #8c8c8c;
    margin-bottom: 15px;
}

.orenge {
    font-size: 20px;
    color: #ffba66;
}

#pr img {
    width: 100%;
    border-radius: 10px;
}

#pr h4 {
    font-weight: 400;
}

#pr .wrap p {
    color: #8c8c8c;
}

#worksheet img:first-child {
    width: 85%;
}

#worksheet img:nth-child(2) {
    width: 45%;
}

#worksheet p,
#youtube p {
    font-size: 13px;
    color: #999;
    text-align: center;
}

#worksheet p {
    padding-top: 15px;
}

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    border: #404040 1px solid;
    margin-right: 10px;
}

#media .flex {
    align-items: start;
}

#media .wrap {
    width: 45%;
}

h5 {
    font-weight: bold;
}

#media .wrap a {
    color: #ffba66;
    display: block;
    margin-bottom: 30px;
}

#media .wrap a:last-child {
    margin-bottom: 0px;
}

#teacher a {
    width: 30%;
}

#teacher img {
    width: 100%;
}

#teacher h4 {
    text-align: center;
}

#teacher .flex {
    flex-wrap: wrap;
    align-items: start;
}

.flexout {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

#aboutwebdesign,
#payment,
#study,
#content {
    width: 48%;
}

#aboutwebdesign {
    text-align: center;
}

#aboutwebdesign h4,
#aboutwebdesign p {
    text-align: left;
}

#aboutwebdesign img {
    width: 60%;
}

#payment img,
#study img,
#content img {
    width: 100%;
}

.notice {
    color: #8c8c8c;
    font-size: 13px;
}

h6 {
    padding: 25px 0px;
}

/* テーブル */
table,
td,
th {
    border: 1.5px solid #bababa;
    border-collapse: collapse;
}

td,
th {
    width: 130px;
    height: 60px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
}

th {
    background: #f0e6cc;
}

.even {
    background: #fbf8f0;
}

.odd {
    background: #fefcf9;
}

.bc_yellow img {
    width: 75%;
}

.tabletitle {
    width: 150px;
}

.bc_yellow {
    background-color: #fff0c5;
}

.bc_orenge {
    background-color: #fff7de;
    font-weight: bold;
}

/* ↑テーブル */

#compare {
    width: 45%;
}

table {
    width: 100%;
    margin-bottom: 25px;
}

#artwork {
    width: 55%;
}

#artwork img {
    width: 100%;
}

#artwork p {
    padding: 0px 0px 25px 10px;
}

#career .inner {
    width: 48%;
    text-align: center;
}

#career img {
    width: 250px;
    height: 250px;
    object-fit: cover;
}

#career h4,
#after h4 {
    padding: 0px 0px 10px;
    text-align: center;
}

#career p,
#after p,
#support p {
    color: #8c8c8c;
}

.pad {
    padding-bottom: 45px;
}

#after .flex {
    align-items: start;
}

#after .wrap {
    width: 24%;
}

#after img {
    width: 100%;
}

#support img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

#support .flex-position img {
    object-position: left;
}

#support h4,
#support p {
    padding-left: 20px;
}

#momsvoice .wrap {
    width: 48%;
}

#momsvoice .flex img {
    width: 100%;
}

#momsvoice p {
    padding: 10px 0px 50px;
}

.center {
    text-align: center;
}

#more {
    text-align: center;
    color: #ffba66;
    display: block;
    margin-bottom: 70px;
}

.center img {
    width: 70%;
}

#webinar .flex {
    align-items: start;
}

#webinar h4 {
    padding-bottom: 40px;
    font-size: 20px;
    text-align: center;
}

#webinar h6 {
    font-size: 18px;
    padding: 0px 0px 10px;
}

.changecolor,
#answer p,
#aboutfamm p {
    color: #8c8c8c;
    padding-bottom: 40px;
}

#webinar .inner {
    display: flex;
    justify-content: start;
    align-items: start;
    padding-bottom: 20px;
}

#webinar .wrap {
    width: 48%;
}

#webinar img {
    width: 13%;
}

.wrapwrap {
    padding-left: 20px;
}

#answer .center {
    padding-top: 60px;
}

#forwoman h3 {
    padding: 0px 0px 30px;
}

#forwoman img {
    width: 60%;
}

#forwoman .orenge {
    display: block;
    padding-top: 15px;
}

#aboutfamm img {
    width: 50%;
}

#aboutfamm .wrap {
    width: 48%;
}

#aboutfamm h6 {
    font-size: 18px;
}

#item .wrap {
    width: 12%;
    text-align: center;
}

#item img {
    width: 90%;
}

#item .flex {
    align-items: start;
}

#item h6 {
    padding: 0px;
}

#item p {
    color: #8c8c8c;
    font-size: 13px;
}

#item span {
    text-decoration: line-through;
}

footer {
    text-align: center;
}

footer img {
    width: 80%;
    padding: 40px 0px;
}

footer ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 0px;
}

footer li,
footer p a {
    color: #ffba66;
}

footer small {
    font-size: 13px;
    padding: 50px 0px 100px;
}

@media screen and (max-width:900px) {
    body {
        width: 90%;
        margin: 0 auto;
    }

    .spnone {
        display: none;
    }

    #forpc {
        display: none;
    }

    #forsp {
        display: block;
    }

    #global-nav li {
        display: block;
    }

    #global-nav {
        position: fixed;
        z-index: 999;
        top: 0;
        left: -120%;
        width: 85%;
        height: 100vh;
        background: rgba(240, 240, 240, 1);
        transition: all 0.6s;
    }

    #global-nav.panelactive {
        left: 0;
        z-index: 1;
    }

    #global-nav ul {
        position: absolute;
        z-index: 999;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }

    #global-nav li {
        padding: 15px;
        font-size: 26px;
        letter-spacing: 0.2em;
    }

    #global-nav li:nth-child(3) {
        padding-top: 40px;
    }

    #global-nav li:nth-child(-n+2) {
        color: #000;
    }

    .menu-trigger {
        width: 50px;
        height: 50px;
        /* 固定しなくて良いかも？実際のサイトはしてない */
        position: fixed;
        top: 10px;
        right: 5px;
        z-index: 2;
        outline: none;
    }

    .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 50%;
        width: 25px;
        height: 3px;
        background-color: #404040;
        transform: translate(-50%, -50%);
    }

    .menu-trigger span:nth-of-type(1) {
        top: 15px;
    }

    .menu-trigger span:nth-of-type(2) {
        top: 23px;
    }

    .menu-trigger span:nth-of-type(3) {
        top: 31px;
    }

/* 閉じるマーク↓ */

    /* .menu-trigger.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }

    .menu-trigger.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    } */

    .flex,
    .flexout {
        display: block;
        padding: 0px 0px;
    }

    #aboutwebdesign,
    .course .wrap,
    #payment,
    #study,
    #content,
    #pr .wrap,
    #compare,
    #media .wrap,
    #after .wrap,
    #momsvoice .wrap,
    #artwork,
    #webinar .wrap,
    #aboutfamm .wrap {
        width: 100%;
    }


    .wrap {
        width: 100%;
        padding-top: 30px;
    }

    h1 img {
        padding: 15px 0px;
        margin: 0;
    }

    #menu ul {
        justify-content: space-between;
    }

    #menu li {
        padding: 0px;
    }

    #eyecatch {
        padding: 30px 0px 70px;
    }

    .headerbtn {
        border-radius: 66px;
        padding: 15px 15px;
        width: 90%;
        letter-spacing: 0.2em;
        text-align: center;
        position: fixed;
        top: 600px;
        left: 5%;
        z-index: 999;
    }

    h2 {
        letter-spacing: 0em;
        font-size: 28px;
        line-height: 1.5;
        margin-bottom: 0px;
    }

    #profession p {
        margin: 16px 0px 0px;
    }

    .slider {
        width: 100%;
        padding-top: 30px;
    }

    .slider img {
        width: 60vw;
    }

    #campain {
        text-align: center;
        padding-top: 30px;
    }

    #campain p {
        padding: 15px 0px;
    }

    .flexforsp {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    h3 {
        font-size: 20px;
        padding: 100px 0px 30px;
        text-align: left;
    }

    h4 {
        padding: 10px 0px;
    }

    .course img {
        min-height: auto;
        object-fit: contain;
    }

    .course h3:first-child,
    #media h3:first-child {
        padding-bottom: 0px;
    }

    .course p {
        margin-bottom: 5px;
    }

    .orenge {
        font-size: 18px;
    }

    #worksheet img:first-child,
    #worksheet img:nth-child(2) {
        width: 100%;
    }

    #worksheet p,
    #youtube p {
        text-align: left;
    }

    iframe:first-child {
        margin-bottom: 30px;
    }

    #teacher .flex {
        display: flex;
        justify-content: space-around;
        align-items: start;
    }

    #teacher a {
        width: 45%;
    }

    #teacher h4 {
        font-size: 16px;
        line-height: 16px;
    }

    #teacher span {
        font-size: 10px;
        font-weight: 100;
    }

    #aboutwebdesign h4 {
        padding-bottom: 30px;
    }

    #content .notice {
        padding-top: 5px;
    }

    td,
    th {
        height: 40px;
        font-size: 16px;
    }

    #career .inner {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }

    #career img {
        width: 25%;
        height: auto;
    }

    #career .wrap {
        width: 75%;
    }

    #career h4,
    #after h4,
    #support h4,
    #support p {
        padding: 0px;
        text-align: left;
        font-weight: normal;
    }

    #after .flex {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-wrap: wrap;
    }

    #after .wrap {
        width: 48%;
    }

    #after .wrap:nth-of-type(-n+2) {
        padding: 0px;
    }

    .flex-position {
        display: block;
        padding-top: 0px;
    }

    #support h4,
    #support p {
        padding-left: 0px;
    }

    #support img {
        width: 60%;
        height: auto;
        margin-top: 50px;
    }

    #support .wrap {
        width: 100%;
    }

    #support {
        text-align: center;
    }

    #momsvoice a {
        display: flex;
        justify-content: center;
        align-items: start;
    }

    #momsvoice .flex img {
        width: 35%;
        margin: 5px 5px 0px 0px;
    }

    #momsvoice p {
        padding: 0px;
        margin-bottom: 25px;
    }

    .center img {
        width: 100%;
    }

    #webinar img {
        width: 25%;
    }

    #webinar h4 {
        padding-bottom: 20px;
        text-align: left;
    }

    .changecolor,
    #answer p,
    #aboutfamm p {
        padding-bottom: 20px;
    }

    #webinar .inner {
        align-items: center;
    }

    .spflex .flex {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-wrap: wrap;
    }

    .spflex .wrap {
        width: 45%;
    }

    #forwoman .flex {
        display: flex;
        flex-direction: column;
    }

    #forwoman .wrap {
        order: 2;
        padding-top: 0px;
    }

    #forwoman img {
        padding-top: 20px;
        order: 1;
    }

    #forwoman img {
        width: 100%;
    }

    #aboutfamm img {
        width: 100%;
    }

    #item .flex {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-wrap: wrap;
    }

    #item .wrap {
        width: 50%;
    }

    footer ul {
        display: block;
    }

    footer li {
        margin: 10px;
    }
}