@charset "UTF-8";

a {
    text-decoration: underline;
    color: #0091b9;
}

a:hover {
    opacity: 0.8;
}

html,
body {
    height: 100%;
    font-family: "M PLUS 1p", serif;
    font-weight: bold;
    color: #005254;
    font-size: min(20 / 1340 * 100vw, 20px);
}

@media screen and (max-width: 750px) {

    html,
    body {
        font-size: min(26 / 750 * 100vw, 26px);
    }
}

.nav_innner {
    max-width: 1340px;
    width: 100%;
    margin: 0 auto;
}

nav {
    width: 73%;
    margin: 0 auto;
}

@media screen and (max-width: 750px) {
    nav {
        margin: 0 0 0 min(40 / 750* 100vw, 40px);
    }
}

nav ol {
    display: flex;
}

nav ol li {
    font-size: min(18 / 1340 * 100vw, 18px);
    position: relative;
}

nav ol li:not(:first-child) {
    margin-left: 1em;
}

nav ol li:not(:first-child)::before {
    position: absolute;
    content: "/";
    top: 0;
    left: 6%;
}

@media screen and (max-width: 750px) {
    nav ol li {
        font-size: min(24 / 750 * 100vw, 24px);
    }
}

.fv,
.under__fv,
.welcome,
.topix,
.guide,
.introduction,
.course,
.parallax-img,
.footer {
    width: 100%;
    overflow: hidden;
}

li {
    list-style-type: none;
}

/*ぶらさげインデント*/
ol li {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 0.8em;
}

sup {
    line-height: 0.8em;
}

.pc {
    display: block;
}

@media screen and (max-width: 750px) {
    .pc {
        display: none;
    }
}

.sp {
    display: none;
}

@media screen and (max-width: 750px) {
    .sp {
        display: block;
    }
}

.fv {
    position: relative;
}

.ind {
    margin-left: 1.3em;
}

.link_clear {
    text-decoration: none;
}

@media screen and (max-width: 750px) {
    .ind {
        margin-left: 0;
    }
}

.to-top_wrapper {
    text-align: right;
    margin: min(50 / 1340* 100vw, 50px) 0 min(70 / 1340* 100vw, 50px);
}

.to-top_wrapper a {
    cursor: pointer;
}

@media screen and (max-width: 750px) {
    .to-top_wrapper {
        margin: min(50 / 750* 100vw, 50px) 0 min(70 / 750* 100vw, 70px);
    }
}

.to-top {
    position: relative;
    display: inline-block;
    color: #7a6b2c;
}

@media screen and (max-width: 750px) {
    .to-top {
        margin-top: min(50 / 750* 100vw, 50px) 0 0 0;
    }
}

.to-top::before {
    font-family: "Font Awesome 5 Free";
    content: '\f0aa';
    position: absolute;
    top: 18%;
    left: -15%;
}

.mgc_red {
    color: #f16c24;
}

.mgc_font_s {
    font-size: smaller;
}

.round_top_r {
    border-radius: 0 min(30 / 1340* 100vw, 30px) 0 0;
}

.round_top_l {
    border-radius: min(20 / 1340* 100vw, 20px) 0 0 0;
}

.round_bottom_l {
    border-radius: 0 0 0 min(20 / 1340* 100vw, 20px);
}

.round_bottom_r {
    border-radius: 0 0 min(20 / 1340* 100vw, 20px) 0;
}

@media screen and (max-width: 750px) {
    .round_top_r {
        border-radius: 0 min(30 / 750* 100vw, 30px) 0 0;
    }

    .round_top_l {
        border-radius: min(20 / 750* 100vw, 20px) 0 0 0;
    }

    .round_bottom_l {
        border-radius: 0 0 0 min(20 / 750* 100vw, 20px);
    }

    .round_bottom_r {
        border-radius: 0 0 min(20 / 750* 100vw, 20px) 0;
    }
}

.mbt0 {
    margin-bottom: 0 !important;
}

.mbt10 {
    margin-bottom: min(10 / 1340* 100vw, 10px) !important;
}

.mbt20 {
    margin-bottom: min(20 / 1340* 100vw, 20px) !important;
}

.mbt30 {
    margin-bottom: min(30 / 1340* 100vw, 30px) !important;
}

.mbt40 {
    margin-bottom: min(40 / 1340* 100vw, 40px) !important;
}

.mbt30-40 {
    margin-bottom: min(30 / 1340* 100vw, 30px) !important;
}

.mbt60 {
    margin-bottom: min(60 / 1340* 100vw, 60px) !important;
}

.mbt60-80 {
    margin-bottom: min(60 / 1340* 100vw, 60px) !important;
}

.mbt80-100 {
    margin-bottom: min(80 / 1340* 100vw, 80px) !important;
}

.mbt100-120 {
    margin-bottom: min(100 / 1340* 100vw, 100px) !important;
}

.mgt20 {
    margin-top: min(20 / 1340* 100vw, 20px) !important;
}

.pdb90 {
    padding-bottom: min(90 / 1340* 100vw, 90px) !important;
}

@media screen and (max-width: 750px) {
    .mbt10 {
        margin-bottom: min(10 / 750* 100vw, 10px) !important;
    }

    .mbt20 {
        margin-bottom: min(20 / 750* 100vw, 20px) !important;
    }

    .mbt30 {
        margin-bottom: min(30 / 750* 100vw, 30px) !important;
    }

    .mbt40 {
        margin-bottom: min(40 / 750* 100vw, 40px) !important;
    }

    .mbt30-40 {
        margin-bottom: min(40 / 750* 100vw, 40px) !important;
    }

    .mbt60 {
        margin-bottom: min(60 / 750* 100vw, 60px) !important;
    }

    .mbt60-80 {
        margin-bottom: min(80 / 750* 100vw, 80px) !important;
    }

    .mbt80-100 {
        margin-bottom: min(100 / 750* 100vw, 100px) !important;
    }

    .mbt100-120 {
        margin-bottom: min(120 / 750* 100vw, 120px) !important;
    }

    .mgt20 {
        margin-top: min(20 / 750* 100vw, 20px) !important;
    }

    .pdb90 {
        padding-bottom: min(90 / 750* 100vw, 90px) !important;
    }
}

/*タイトルサブのみ*/
.fv__title {
    margin: min(220 / 1340 * 100vw, 220px) 0 min(30 / 1340 * 100vw, 30px) min(100 / 1340 * 100vw, 100px);
    font-size: min(58 / 1340 * 100vw, 58px);
    font-family: "M PLUS 1p", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@media screen and (max-width: 750px) {
    .fv__title {
        margin: min(240 / 750 * 100vw, 240px) 0 0 min(40 / 750 * 100vw, 40px);
        font-size: min(58 / 750 * 100vw, 58px);
    }
}



/*モーダル共通*/
.fv .modal {
    position: fixed;
    z-index: 900;
    top: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    animation: none;
}

.fv .modal.is-active {
    opacity: 1;
    visibility: visible;
}

.fv .modal__bg {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    position: absolute;
    width: 100%;
    height: 80%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 800;
    cursor: pointer;
}

@media screen and (max-width: 750px) {
    .fv .modal__bg {
        height: 70%;
    }
}

.fv .modal__bg.is-active {
    opacity: 1;
    visibility: visible;
}

.fv .modal__content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    z-index: 999;
    width: 100%;
}

@media screen and (max-width: 750px) {
    .fv .modal__content {
        top: 45%;
    }
}

.fv .modal__content-items {
    margin: 0 auto;

    display: grid;

    justify-content: center;
    max-width: 80%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 3fr;
    gap: min(20 / 1340 * 100vw, 20px);
}

@media screen and (max-width: 750px) {
    .fv .modal__content-items {
        justify-content: flex-start;

        grid-template-columns: repeat(2, 1fr);
    }
}

.fv .modal__content-items .modal__content-item {
    position: relative;
    width: 100%;
    line-height: 1.75;
    color: #fff;
    font-size: 26px;
    margin-left: 15px;
    list-style: none;
    font-weight: bold;
    margin-top: 20px;
}

@media screen and (max-width: 750px) {
    .fv .modal__content-items .modal__content-item {
        width: min(260 / 750 * 100vw, 260px);
        font-size: min(36 / 750 * 100vw, 36px);
        margin-left: min(15 / 750 * 100vw, 15px);
        padding: min(12 / 750 * 100vw, 12px) 0 min(12 / 750 * 100vw, 12px) min(20 / 750 * 100vw, 20px);
        margin-top: min(20 / 750 * 100vw, 20px);
    }
}

.fv .modal__content-items .modal__content-item a {
    text-decoration: none;
    color: #fff;
    background-color: #006b6e;
    display: block;
    width: 100%;
    height: 100%;
    padding: 12px 0 12px 20px;
}

.fv .modal__content-items .modal__content-item::before {
    position: absolute;
    content: "";
    top: 40%;
    right: 6%;
    width: 45px;
    height: 9px;
    background-image: url("../img/modal-arrow.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media screen and (max-width: 750px) {
    .fv .modal__content-items .modal__content-item::before {
        width: min(45 / 750 * 100vw, 45px);
        height: min(9 / 750 * 100vw, 9px);
        top: 45%;
    }
}
li.menu_adjust a {
    font-size: calc(1vw + 0.35em)!important;
    padding: 20px 0 20px 20px!important;
}
@media screen and (max-width: 750px) {
    li.menu_adjust a {
    font-size: calc(1vw + 0.5em) !important;
    padding: 11px 0 11px 20px!important;
    line-height: 1.3em!important;
    }
}



/*コンテンツ枠サブのみ*/
.contents {
    background-color: #eff0df;
}

.contents__inner {
    max-width: 1340px;
    width: 100%;
    margin: 0 auto;
}

.contents__title {
    width: 73%;
    margin: 0 auto 100px;
    border-top: 9px solid #005254;
}

@media screen and (max-width: 750px) {
    .contents__title {
        width: 93%;
        margin: 0 auto min(80 / 750 * 100vw, 80px);
    }
}

.contents__title span {
    display: inline-block;
    padding: min(30 / 1340 * 100vw, 30px) 0 0 0;
    font-size: min(20 / 1340 * 100vw, 20px);
    margin: 0 auto;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.6em;
}

@media screen and (max-width: 750px) {
    .contents__title span {
        font-size: min(26 / 750 * 100vw, 26px);
        padding: min(50 / 750 * 100vw, 50px) 5px 0 5px;
    }
}

.contents__body {
    width: 73%;
    margin: 0 auto;
}

@media screen and (max-width: 750px) {
    .contents__body {
        width: 100%;
    }
}

/*スマホ時右よりのコンテンツ*/
.contents__body-flex {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    margin-top: min(30 / 1340 * 100vw, 30px);
}

@media screen and (max-width: 750px) {
    .contents__body-flex {
        display: block;
        margin-top: min(30 / 750 * 100vw, 30px);
    }
}

@media screen and (max-width: 750px) {
    #contents__body02 .contents__body-flex .contents__body-right {
        width: 86%;
        margin-right: auto;
        margin-left: 0;
        border: 2px solid #005254;
        border-left: none;
        border-top-right-radius: 20px;
        border-top-left-radius: 0;
    }
}

@media screen and (max-width: 750px) {
    #contents__body02 .contents__body-flex .contents__body-left {
        width: 86%;
        margin-left: 0;
        margin-right: auto;
    }
}

.contents__body-flex a {
    text-decoration: none;
}

.contents__body-left {
    position: relative;
    width: 37%;
}

@media screen and (max-width: 750px) {
    .contents__body-left {
        width: 86%;
        margin-top: min(20 / 750 * 100vw, 20px);
        margin-left: auto;
    }
}

.contents__body-left-text {
    position: absolute;
    bottom: 5%;
    right: 3%;
    color: #fff;
    font-size: min(16 / 1340 * 100vw, 16px);
}

@media screen and (max-width: 750px) {
    .contents__body-left-text {
        font-size: min(26 / 750 * 100vw, 26px);
    }
}

/*スクロール矢印*/
a.scroll {
    text-decoration: none;
}

.contents__body-flex .scroll {
    position: absolute;
    top: -5%;
    left: -13%;
    z-index: 11;
    cursor: pointer;
}

@media screen and (max-width: 750px) {
    .contents__body-flex .scroll {
        top: 0;
        left: 5%;
    }
}

.contents__body-flex .scroll-arrow {
    position: absolute;
    left: 0;
    z-index: 11;
    width: 2px;
    height: 180px;
    background-color: #005254;
    transition: all 4s ease;
    animation: scroll01 4s ease infinite;
}

@media screen and (max-width: 750px) {
    .contents__body-flex .scroll-arrow {
        left: -120%;
    }
}

.contents__body-flex .scroll-arrow::after {
    content: "";
    position: absolute;
    left: 250%;
    bottom: -2%;
    z-index: 11;
    width: 2px;
    height: 20px;
    background-color: #005254;
    transform: rotate(30deg);
}

.contents__body-flex .scroll-text {
    writing-mode: vertical-rl;
    letter-spacing: 5px;
    font-optical-sizing: auto;
    color: #005254;
    font-weight: bolder;
}

@media screen and (max-width: 750px) {
    .scroll-text {
        font-size: min(30 / 750* 100vw, 30px);
    }
}

.footer__inner .scroll-text {
    writing-mode: vertical-rl;
    font-size: 18px;
    letter-spacing: 0.2em;
    transform: rotate(180deg);
    font-family: "M PLUS 1p", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #fff;
    margin-right: 10px;
}

@keyframes scroll01 {
    0% {
        height: 130px;
    }

    50% {
        height: 100px;
    }

    100% {
        height: 130px;
    }
}

@keyframes scroll01_sp {
    0% {
        height: 100px;
    }

    50% {
        height: 120px;
    }

    100% {
        height: 100px;
    }
}

/*アンカーリンク*/
.ank_box {
    margin: 0 auto;
    margin-bottom: 100px;
}

@media screen and (max-width: 750px) {
    .ank_box {
        width: 91%;
        margin-bottom: min(80 / 750 * 100vw, 80px)
    }
}

.ank_box ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.ank_box ul li {
    position: relative;
    background-color: #009497;
    font-size: min(20 / 1340* 100vw, 20px);
    border-top-left-radius: 10px;
    padding-left: min(20/1340*100vw, 20px);
}

@media screen and (max-width: 750px) {
    .ank_box ul li {
        font-size: min(30 / 750* 100vw, 30px);
        padding-left: min(20/750*100vw, 20px);
    }
}

.ank_box ul li:before {
    position: absolute;
    content: "";
    position: absolute;
    top: 50%;
    /* 縦軸をセンタリングする */
    right: 3%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left: 7px solid #fff;
}

.ank_box ul li {
    width: min(230/1340*100vw, 230px);
}

.ank_box ul li.ank01,
.ank_box ul li.ank02 {
    margin-right: min(20/1340*100vw, 20px);
}

.ank_box ul li.ank03 {
    width: 100%;
    margin-top: min(20/1340*100vw, 20px);
}


@media screen and (max-width: 750px) {
    .ank_box ul li {
        width: min(330/750*100vw, 330px);
        margin-bottom: min(20/750*100vw, 20px);
        ;
    }

    .ank_box ul li.ank01 {
        margin-right: min(20/750*100vw, 20px);
    }

    .ank_box ul li.ank02 {
        margin-right: 0;
    }

    .ank_box ul li.ank03,
    .ank_box ul li.ank04 {
        margin-top: 0;
    }

}

.ank_box ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
    height: 100%;
    width: 100%;
    padding: min(25/1340*100vw, 25px) 0;
}

/*ユニット*/
.mgc_unit {
    margin: 0 auto;
}

@media screen and (max-width: 750px) {
    .mgc_unit {
        width: 91%;
    }
}

.mgc_unit h2 {
    font-size: min(30 / 1340* 100vw, 30px);
    color: #948c6c;
    background-size: 6px 2px;
    background-image: linear-gradient(to right, #ccc8af 3px, transparent 3px);
    background-repeat: repeat-x;
    background-position: left bottom;
    padding-bottom: 5px;
}

@media screen and (max-width: 750px) {
    .mgc_unit h2 {
        font-size: min(30 / 750* 100vw, 30px);
    }
}

.mgc_unit h2+p {
    font-size: min(20 / 1340 * 100vw, 20px);
    color: #948c6c;
}

@media screen and (max-width: 750px) {
    .mgc_unit h2+p {
        font-size: min(26 / 750 * 100vw, 26px);
    }
}

.mgc_unit h3 {
    position: relative;
    font-optical-sizing: auto;
    padding-left: min(28 / 1340 * 100vw, 28px);
    font-size: min(30 / 1340 * 100vw, 30px);
}

@media screen and (max-width: 750px) {
    .mgc_unit h3 {
        padding-left: 15px;
        font-size: min(40 / 750 * 100vw, 40px);
    }

    .mgc_unit h3.ex_h3 {
        font-size: min(39 / 750 * 100vw, 40px) !important;
    }
}

@media screen and (max-width: 750px) {
    .mgc_unit h3+p {
        font-size: min(26 / 750 * 100vw, 26px);
    }
}

.mgc_unit h3 span {
    font-size: min(20 / 1340 * 100vw, 20px);
}

.mgc_unit h3 span:first-child {
    margin-left: 0.8em;
}

@media screen and (max-width: 750px) {
    .mgc_unit h3 span {
        font-size: min(26 / 750 * 100vw, 26px);
    }
}

.mgc_unit h3::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    top: 40%;
    left: 0.5%;
    background-color: #005254;
}

@media screen and (max-width: 750px) {
    .mgc_unit h3::before {
        width: min(20 / 750 * 100vw, 20px);
        height: min(20 / 750 * 100vw, 20px);
        top: 34%;
        left: 0%;
    }
}

.mgc_unit h4 {
    font-size: min(30 / 1340 * 100vw, 30px);
}

@media screen and (max-width: 750px) {
    .mgc_unit h4 {
        font-size: min(36 / 750 * 100vw, 36px);
    }
}

.mgc_unit h5 {
    font-size: min(30 / 1340 * 100vw, 30px);
}

@media screen and (max-width: 750px) {
    .mgc_unit h5 {
        font-size: min(36 / 750 * 100vw, 36px);
    }
}

/*テーブルデザイン1,2*/
table.tb01,
table.tb02 {
    width: 100%;
    font-size: min(20 / 1340 * 100vw, 20px);
    text-align: center;
    border-spacing: 0;
    border-collapse: separate;
}

table.tb01 {
    border-radius: 20px 0 0 0;
    margin-bottom: min(80 / 1340 * 100vw, 80px);
}

@media screen and (max-width: 750px) {

    table.tb01,
    table.tb02 {
        font-size: min(26 / 750 * 100vw, 26px);
        margin-bottom: min(100 / 750 * 100vw, 100px);
    }

    table.tb01 {
        border-radius: 10px 0 0 0;
    }
}

table.tb01 th,
table.tb02 th {
    background: #5aa6ad;
    color: #fff;
}

table.tb01 td,
table.tb02 td {
    background: #fff;
}


table.tb01 th:first-child {
    border-radius: 18px 0 0 0;
}

@media screen and (max-width: 750px) {
    table.tb01 th:first-child {
        border-radius: 8px 0 0 0;
    }
}

/*テーブルの線デザイン*/
table.tb_solid {
    border-top: 2px solid #005254;
    border-left: 2px solid #005254;
}

table.tb_solid td,
table.tb_solid th {
    border-right: 2px solid #005254;
    border-bottom: 2px solid #005254;
}

table.tb_dotted {
    border: 2px solid #005254;
}

table.tb_dotted td {
    border-right: 1px dotted #005254;
    border-bottom: 1px dotted #005254;
}

table.tb_dotted th {
    border-right: 1px dotted #005254;
    border-bottom: 2px solid #005254;
}

table.tb_dotted td:last-child,
table.tb_dotted th:last-child {
    border-right: none;
}

tr.border_b_adjust td:nth-child(-n+2),
tr.border_b_adjust2 td {
    border-bottom: none;
}



/*テーブルデザイン3*/
table.tb03 {
    width: 100% !important;
    height: 100%;
    font-size: min(20 / 1340 * 100vw, 20px);
    text-align: center;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 0 0 0 20px;
}

@media screen and (max-width: 750px) {
    table.tb03 {
        font-size: min(26 / 750 * 100vw, 26px);
        border-radius: 0 0 0 10px;
    }
}

table.tb03 th,
table.tb03 tr:last-child td {
    border-bottom: none;
}

table.tb03 td,
table.tb03 th {
    border-right: 2px dotted #ebe6c9;
    height: auto;
}

table.tb03 td {
    background: #fff;
    opacity: 0.8;
    border-bottom: 2px dotted #ebe6c9;
    color: #6e5e1f;
}

table.tb03 th {
    background: #ab9b6f;
    color: #fff;
}

table.tb03 td:last-child,
table.tb03 th:last-child {
    border-right: none;
}



@media screen and (max-width: 750px) {

    table.tb03 td,
    table.tb03 th {
        padding: min(30/750*100vw, 30px);
    }

    table.tb03 th:last-child {
        width: min(240/750*100vw, 240px);
    }

    .tb_font_s {
        font-size: min(22 / 750 * 100vw, 22px) !important;
    }
}

/*コラム的なコンテンツ*/
.sub_contents {
    border: 2px dotted #8a793e;
    background-color: #ded8c8;
    border-radius: 20px 0 0 0;
    padding: min(20/1340*100vw, 20px);
    color: #6e5e1f;
}


/*2カラム pcのみ*/
.mgc_2col {
    display: grid;
    height: min(500/1340*100vw, 500px);
    grid-template-columns: 1fr min(30/1340*100vw, 30px) 1fr;
    grid-template-rows: 1fr;
}

.mgc_2col .item1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

.mgc_2col .item2 {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}

.mgc_2col picture img {
    height: min(500/1340*100vw, 500px);
    object-fit: cover;
}

/*dl dt dd*/
dt:not(dt.topics_dt),
dd:not(dd.topics_dd) {
    padding: min(40/1340*100vw, 40px) min(40/1340*100vw, 40px);
}

@media screen and (max-width: 750px) {

    dt:not(dt.topics_dt),
    dd:not(dd.topics_dd) {
        padding: min(40/750*100vw, 40px) min(30/750*100vw, 30px);
    }
}

dt:not(dt.topics_dt) {
    background-color: #e4e6d6;
    padding-left: 2.5em;
}

dd:not(dd.topics_dd) {
    background-color: #f4f5eb;
    margin-bottom: min(30/1340*100vw, 30px);
    padding-left: 2.5em;
}

@media screen and (max-width: 750px) {
    dd:not(dd.topics_dd) {
        margin-bottom: min(30/750*100vw, 30px);
    }
}