@charset "UTF-8";
main.frontpage {
    font-size: 16px;
    line-height: 1.45em;
}


/* ===== フォントサイズ ===== */

.fs48 {
    font-size: 48px;
    line-height: 1.2em;
}

.fs32 {
    font-size: 32px;
    line-height: 1.2em;
}

.fs24 {
    font-size: 24px;
    line-height: 1.45em;
}

.fs21 {
    font-size: 21px;
    line-height: 1.45em;
}

.fs18 {
    font-size: 18px;
    line-height: 1.6em;
}

.fs16 {
    font-size: 16px;
    line-height: 1.6em;
}

.fs14 {
    font-size: 14px;
    line-height: 1.6em;
}


/* ====== フォントカラー ===== */

.white {
    color: #fff;
}

.green01 {
    color: #aace45;
}

.green02 {
    color: #97bc2e;
}


/* ====== 余白 ===== */

.mt80 {
    margin-top: 80px;
}

.mt60 {
    margin-top: 60px;
}

.mt40 {
    margin-top: 40px;
}

.mt30 {
    margin-top: 30px;
}

.mt20 {
    margin-top: 20px;
}

.mt10 {
    margin-top: 10px;
}

.bold {
    font-weight: bold;
}

section:not(.frontpage_mv) {
    margin-top: 130px;
}

.c_inner {
    width: 96%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.c_inner h2.blue {
    color: #97bc2e;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 40px;
}

.c_inner h3.yel {
    font-weight: 600;
    font-size: 24px;
    color: #3f507a;
    margin-bottom: 16px;
}

.c_inner h3.side_border {
    padding: 0 25px;
    font-size: 24px;
    line-height: 160%;
    font-weight: 600;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 60px;
}

.c_inner h3.side_border span {
    display: inline-block;
    padding: 0 8px;
    position: relative;
}

.c_inner h3.side_border span::before,
.c_inner h3.side_border span::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 2px;
    background: #000;
    position: absolute;
    top: 50%;
}

.c_inner h3.side_border span::before {
    left: -20px;
}

.c_inner h3.side_border span::after {
    right: -20px;
}


/* ====== 文字寄せ ===== */

.alc {
    text-align: center;
}

.alr {
    text-align: right;
}


/* ====== レイアウト ===== */

.flex {
    flex-wrap: wrap;
    align-items: stretch;
}

.flex li .linksbox a {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.flex li figure {
    overflow: hidden;
}

.flex li img {
    width: 100%;
    height: auto;
    transition: opacity 0.5s ease-in;
}

.flex li a:hover img {
    opacity: .45;
}

.flex.col02 li {
    width: calc(50% - 12px);
    margin-left: 24px;
}

.flex.col02 li:nth-child(2n + 1) {
    margin-left: 0;
}

.flex.col02 li:nth-child(n + 3) {
    margin-top: 40px;
}

.flex.col03 li {
    width: calc((100% - 16px) / 3);
    margin-left: 8px;
    display: flex;
    flex-direction: column;
}

.flex.col03 li .linksbox {
    flex-grow: 1;
}

.flex.col03 li:nth-child(3n + 1) {
    margin-left: 0;
}

.flex.col03 li:nth-child(n + 4) {
    margin-top: 40px;
}

.flex.col04 li {
    width: calc((100% - 33px) / 4);
    margin-left: 8px;
}

.flex.col04 li:nth-child(4n + 1) {
    margin-left: 0;
}

.flex.col04 li:nth-child(n + 5) {
    margin-top: 40px;
}

.flex li .linksbox p {
    margin-top: 15px;
}

.flex li .links_archive {
    margin-top: 15px;
    text-align: right;
}

.flex li .links_archive a {
    display: block;
    padding: 0 15px 0 0.05em;
    color: #0f3eba;
    text-decoration: underline;
    text-underline-offset: 3px;
    position: relative;
}

.flex li .links_archive a::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #0f3eba;
    position: absolute;
    right: 0;
    top: calc(50% - 4px);
}


/* ====== メインビジュアル ===== */

.flex.mainvisual {
    flex-wrap: wrap;
    margin-left: -1px;
    justify-content: center;
    margin-top: 2px;
}

.flex.mainvisual li {
    margin-left: 1px;
}

.flex.mainvisual .page_title {}

.flex.mainvisual .anchor_link {
    width: calc((100% - 20px)/3);
    margin-left: 10px;
    margin-top: 10px;
}

.flex.mainvisual .anchor_link:nth-child(3n+1) {
    margin-left: 0;
}

.frontpage_mv .c_inner {
    margin-top: 40px;
}

.page_title {
    line-height: 1.8;
    padding: 5px 2px;
}

.page_title .title_inner {
    position: relative;
    z-index: 0;
    /*   height: 100%; */
    padding: 3%;
}

.page_title .title_inner::before,
.page_title .title_inner::after {
    content: "";
    display: block;
    width: 15px;
    height: 100%;
    position: absolute;
    top: 0;
    border-left: solid 1px #9ca8aa;
    border-top: solid 1px #9ca8aa;
    border-bottom: solid 1px #9ca8aa;
}

.page_title .title_inner::before {
    left: 0;
}

.page_title .title_inner::after {
    transform: scale(-1, 1);
    right: 0;
}


/* ====== セクションタイトルと説明 ===== */

.detail_program {
    border-top: dotted 1px #97bc2e;
    border-bottom: dotted 1px #97bc2e;
    margin-bottom: 65px;
    padding: 35px 0 20px;
}

.detail_program dt {
    width: 360px;
    min-height: 160px;
}

.detail_program dt .title_thumnail {
    position: relative;
    z-index: 0;
}

.detail_program dt .title_thumnail figcaption {
    display: inline-block;
    width: auto;
    padding: 8px 20px;
    background: #97bc2e;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.075em;
    position: absolute;
    left: 0;
    top: -55px;
}

.detail_program dt span {
    display: block;
    text-align: center;
}

.detail_program dd {
    width: calc(100% - 360px);
    padding: 8px 0;
}


/* ====== トップバナー部分 ===== */

.frontpage_banner01 a p {
    padding-left: 25px;
    position: relative;
}

.frontpage_banner01 a p::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 8px 0 8px;
    border-color: #000000 transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
}

.frontpage_banner01 a p+figure {
    margin-top: 8px;
}


/* ====== テーブル ===== */

.pc {
    display: block;
}

.sp {
    display: none;
}

.service_table {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.price_table {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
}

.price_table td {
    text-align: center;
}

.table_content {
    width: 100%;
    border-collapse: collapse;
}

.table_content th {
    width: 120px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
}

.table_content td {
    padding: 9px;
    border-bottom: solid 1px #fff;
}

.table_content td.sub_category {
    width: 160px;
    font-weight: bold;
    font-size: 18px;
    background: #e5e5e5;
}

.table_content td.linkbox {
    width: 160px;
    font-size: 16px;
    background: #e5e5e5;
}

.table_content .min_h100 {
    min-height: 70px;
    font-size: 16px;
    line-height: 160%;
    display: flex;
    align-items: center;
}

.table_content td a {
    padding: 0 15px 0 5px;
    position: relative;
}

.table_content td a::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #000000;
    position: absolute;
    top: 1px;
    right: 0;
}

.table_content td.detailbox {
    background: #f9f9f9;
}

.table_content td.bold {
    text-align: center;
    font-weight: 600;
}

.table_content .bg_green {
    background: #97bc2e;
}

.table_content .bg_aqua {
    background: #a5d7dc;
}

.table_content .bg_silver {
    background: #99a8aa;
    border: solid 1px #99a8aa;
}

.table_content .bg_gold {
    background: #bca450;
    border: solid 1px #bca450;
}

.table_content .bg_platinum {
    background: #5f8eb5;
    border: solid 1px #5f8eb5;
}

.table_content .border_silver {
    border: solid 1px #99a8aa;
    width: 20%;
}

.table_content .border_gold {
    border: solid 1px #bca450;
    width: 20%;
    font-size: 13px;
}

.table_content .border_platinum {
    border: solid 1px #5f8eb5;
    width: 20%;
    font-size: 13px;
}


/* ===== 申込リンク ===== */

.ctabox {
    max-width: 1080px;
    margin: auto;
    position: relative;
    margin-top: 60px;
}

.signup {
    border: solid 1px #a5d7dc;
}

.ctabox dt {
    text-align: center;
    font-size: 18px;
    border-radius: 50px;
    width: 94%;
    margin: auto;
    position: relative;
    top: -20px;
    padding: 10px;
}

.signup dt {
    background: #a5d7dc;
}

.gradeup {
    border: solid 1px #97bc2e;
}

.gradeup dt {
    background: #97bc2e;
}

.ctabox dd {
    padding: 0 5px 25px;
}

.ctabox figure {
    max-width: 600px;
    margin: auto;
}

.ctabox figure a {
    display: block;
    width: 100%;
    /*   height: 100%; */
}

.ctabox figure a:hover {
    opacity: 0.75;
    transition: all .5s ease;
}

@media only screen and (max-width: 768px) {
    section:not(.frontpage_mv) {
        margin-top: 85px;
    }
    section .c_inner p br,
    section .c_inner td br {
        display: none;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    /* ====== 余白 ===== */
    .mt80 {
        margin-top: 40px;
    }
    .mt60 {
        margin-top: 30px;
    }
    .mt40 {
        margin-top: 20px;
    }
    .mt30 {
        margin-top: 15px;
    }
    .mt20 {
        margin-top: 10px;
    }
    /* ====== フォントサイズ ===== */
    .fs48 {
        font-size: 32px;
    }
    .fs32 {
        font-size: 24px;
    }
    .fs24 {
        font-size: 21px;
    }
    .fs21 {
        font-size: 18px;
    }
    .fs18 {
        font-size: 16px;
    }
    .flex.col03 li,
    .flex.col04 li {
        width: calc((100% - 8px) / 2);
        margin-left: 8px;
    }
    .flex.col03 li:nth-child(3n + 1) {
        margin-left: auto;
    }
    .flex.col03 li:nth-child(2n + 1),
    .flex.col04 li:nth-child(2n + 1) {
        margin-left: 0;
    }
    .flex.col03 li:nth-child(n + 3),
    .flex.col04 li:nth-child(n + 3) {
        margin-top: 20px;
    }
    /* ===== メインビジュアル ===== */
    .flex.mainvisual {
        justify-content: center;
    }
    .flex.mainvisual .page_title {
        width: 100%;
    }
    .flex.mainvisual .anchor_link,
    .flex.mainvisual .anchor_link:nth-child(3n+1) {
        width: calc((100% - 10px)/2);
        margin-top: 10px;
        margin-left: 10px;
    }
    .flex.mainvisual .anchor_link:nth-child(2n+1) {
        margin-left: 0;
    }
    /* ===== タイトル ===== */
    .detail_program {
        margin-bottom: 30px;
    }
    .detail_program dt {
        width: 35%;
        max-width: 240px;
    }
    .detail_program dd {
        width: 65%;
        padding: 0 10px;
    }
    /* ===== テーブル ===== */
    .sp dl.table_content {}
    .sp dl.table_content dt {
        padding: 2%;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }
    .sp dl.table_content .border_green {
        border: solid 2px #97bc2e;
    }
    .sp dl.table_content .border_aqua {
        border: solid 2px #a5d7dc;
    }
    .sp dl.table_content .border_gray {
        border: solid 2px #e5e5e5;
    }
    .table_content td.detailbox .min_h100 {
        font-size: 15px;
    }
    .table_content td.linkbox {
        width: 15%;
        min-width: 75px;
        text-align: center;
        vertical-align: middle;
        background: #fefeff;
    }
    .table_content td.linkbox a {
        padding: 0;
        font-size: 14px;
    }
    .table_content td a::after {
        position: static;
        margin: 3px auto 0;
    }
    .sp dl.table_content {}
    .sp .tab-wrap {
        display: flex;
        flex-wrap: wrap;
    }
    .sp .tab-label {
        width: calc((100% - 6px)/3);
        color: #fff;
        background: LightGray;
        margin-right: 2px;
        padding: 8px 5px;
        order: -1;
        border-radius: 3px 3px 0 0;
        text-align: center;
        font-weight: bold;
    }
    .sp .tab-content {
        width: 100%;
        display: none;
        padding: 5%;
    }
    .sp .tab-content h4 {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }
    .sp .tab-content dl {
        margin-top: 3%;
    }
    .sp .tab-content.border_silver {
        border: solid 1px #99a8aa;
    }
    .sp .tab-content.border_gold {
        border: solid 1px #bca450;
    }
    .sp .tab-content.border_platinum {
        border: solid 1px #5f8eb5;
    }
    /* アクティブなタブ */
    .sp .tab-switch:checked+.bg_silver {
        background: #99a8aa;
        border: solid 1px #99a8aa;
    }
    .sp .tab-switch:checked+.bg_gold {
        background: #bca450;
        border: solid 1px #bca450;
    }
    .sp .tab-switch:checked+.bg_platinum {
        background: #5f8eb5;
        border: solid 1px #5f8eb5;
    }
    .sp .tab-switch:checked+.tab-label+.tab-content {
        display: block;
    }
    /* ラジオボタン非表示 */
    .sp .tab-switch {
        display: none;
    }
    .tab-content .bg_green {
        background: #97bc2e;
    }
    .tab-content .bg_aqua {
        background: #a5d7dc;
    }
    .tab-content dt {
        padding: 2%;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }
    .tab-content dd {
        padding: 2%;
    }
    .tab-content dd.border_green {
        border: solid 2px #97bc2e;
    }
    .tab-content dd.border_aqua {
        border: solid 2px #a5d7dc;
    }
    .tab-content dd li {
        color: #9a9a9a;
        line-height: 200%;
        position: relative;
        padding-left: 20px;
    }
    .tab-content dd li::before {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        background: url(../../frontend/images/contents/ico_check_gray.png) no-repeat center / 18px 18px;
        position: absolute;
        top: calc(50% - 9px);
        left: 0;
    }
    .tab-content dd li.active::before {
        background: url(../../frontend/images/contents/ico_check_active_bk.png) no-repeat center / 18px 18px;
    }
    .tab-content dd.border_green li.active::before {
        background: url(../../frontend/images/contents/ico_check_active_green.png) no-repeat center / 18px 18px;
    }
    .tab-content dd.border_aqua li.active::before {
        background: url(../../frontend/images/contents/ico_check_active_aqua.png) no-repeat center / 18px 18px;
    }
    .tab-content dd li.active {
        font-weight: bold;
        color: #3a3a3a;
    }
}

@media only screen and (max-width: 480px) {
    .flex.col02 li,
    .flex.col03 li,
    .flex.col04 li {
        width: 100%;
        margin: 20px 0 0;
    }
    /* ===== メインビジュアル ===== */
    /* ===== セクションタイトル ===== */
    .detail_program {
        display: block;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .detail_program .title_thumnail img {
        width: 80%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
    }
    .detail_program dt {
        width: 100%;
        max-width: 100%;
    }
    .detail_program dd {
        width: 100%;
        margin-top: 3%;
    }
    .flex li .linksbox a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .flex li .linksbox a figure {
        width: 40%;
        aspect-ratio: 1/1;
        overflow: hidden;
    }
    .flex li .linksbox a figure img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }
    .flex li .linksbox a p {
        width: 58%;
    }
    .ctabox dt {
        font-size: 15px;
    }
}