@font-face {
    font-family: "MyYuGothicM";
    font-weight: normal;
    src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular")
}

@font-face {
    font-family: "MyYuGothicM";
    font-weight: bold;
    src: local("YuGothic-Bold"), local("Yu Gothic Bold")
}

:root {
    --pc-width: calc(100vw - 10px);
    --color-base: #111111;
    --color-black: #111111;
    --color-white: #FFFFFF;
    --color-grey: #888888;
    --color-l_grey: #EFEFEF;
    --color-blue: #1866B2;
    --color-l_blue: #B9D1E8;
    --color-p_blue: #E8EFF7;
    --color-p_pink: #E56A6A
}

.js-fadeIn {
    opacity: 0;
    -webkit-transition: opacity .3s ease-in 0s;
    transition: opacity .3s ease-in 0s
}

.js-fadeIn.inview {
    opacity: 1
}

.js-fadeUp {
    opacity: 0;
    translate: 0 30px;
    -webkit-transition: opacity .5s ease-in 0s, translate .5s ease-in 0s;
    transition: opacity .5s ease-in 0s, translate .5s ease-in 0s
}

.js-fadeUp.inview {
    opacity: 1;
    translate: 0 0
}

.js-fadeScale {
    scale: .8;
    -webkit-transition: scale .3s ease-in 0s;
    transition: scale .3s ease-in 0s
}

.js-fadeScale.inview {
    opacity: 1;
    scale: 1
}

.js-clip {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    -webkit-transition: -webkit-clip-path .6s ease-in 0s;
    transition: -webkit-clip-path .6s ease-in 0s;
    transition: clip-path .6s ease-in 0s;
    transition: clip-path .6s ease-in 0s, -webkit-clip-path .6s ease-in 0s
}

.js-clip.inview {
    opacity: 1;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0)
}

.js-split {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    line-height: 1
}

.js-split .char {
    -webkit-transform: translateY(100px);
    transform: translateY(100px)
}

.main_other_list a {
    -webkit-transition: opacity .3s ease 0s;
    transition: opacity .3s ease 0s
}

@media(hover: hover) {
    .main_other_list a:hover {
        opacity: .6
    }
}

body {
    background-image: url(../img/common/muji_bg.jpg);
    background-size: 100% auto;
    background-repeat: repeat-y
}

.main_title {
    padding: calc(.1625*var(--pc-width)) calc(.0625*var(--pc-width)) calc(.125*var(--pc-width));
    font-family: fot-tsukuardgothic-std, "MyYuGothicM", MyYuGothicM, "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 50px;
    font-size: 3.90625vw;
    font-weight: 700
}

.main_title span {
    display: block;
    margin: 0 0 calc(.0125*var(--pc-width));
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-size: 1.25vw;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-blue)
}

@media print,
screen and (max-width: 767px) {
    .main_title {
        padding: 35.2vw 4.2666666667vw 21.3333333333vw;
        font-size: 30px;
        font-size: 8vw
    }

    .main_title span {
        margin: 0 0 4.2666666667vw;
        font-size: 12px;
        font-size: 3.2vw
    }
}

.main_content {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 calc(.0625*var(--pc-width)) calc(.125*var(--pc-width))
}

@media print,
screen and (max-width: 767px) {
    .main_content {
        display: block;
        margin: 0 4.2666666667vw 21.3333333333vw
    }
}

.main_content_left {
    width: calc(.30859375*var(--pc-width))
}

@media print,
screen and (max-width: 767px) {
    .main_content_left {
        width: auto
    }
}

.main_content_date {
    margin: 0 0 calc(.00625*var(--pc-width));
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-size: .9375vw;
    font-weight: 600;
    color: var(--color-grey)
}

@media print,
screen and (max-width: 767px) {
    .main_content_date {
        margin: 0 0 2.1333333333vw;
        font-size: 12px;
        font-size: 3.2vw
    }
}

.main_content_title {
    font-size: 24px;
    font-size: 1.875vw;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .05em
}

@media print,
screen and (max-width: 767px) {
    .main_content_title {
        font-size: 20px;
        font-size: 5.3333333333vw
    }
}

.main_content_category {
    display: inline-block;
    margin: calc(.00625*var(--pc-width)) 0 0;
    padding: calc(.00625*var(--pc-width)) calc(.0125*var(--pc-width));
    border-radius: calc(.05078125*var(--pc-width));
    background-color: var(--color-p_blue);
    font-size: 12px;
    font-size: .9375vw;
    font-weight: 600
}

@media print,
screen and (max-width: 767px) {
    .main_content_category {
        margin: 2.1333333333vw 0 0;
        padding: 2.1333333333vw 4.2666666667vw;
        border-radius: 17.3333333333vw;
        font-size: 12px;
        font-size: 3.2vw
    }
}

.main_content_right {
    width: calc(.53515625*var(--pc-width))
}

@media print,
screen and (max-width: 767px) {
    .main_content_right {
        width: auto
    }
}

.main_content_img {
    width: 100%;
    margin: 0 0 calc(.0625*var(--pc-width))
}

.main_content_img img {
    width: 100%;
    border-radius: calc(.01875*var(--pc-width))
}

@media print,
screen and (max-width: 767px) {
    .main_content_img {
        margin: 10.6666666667vw 0 21.3333333333vw
    }

    .main_content_img img {
        border-radius: 6.4vw
    }
}

.main_content_free {
    margin: 0 0 calc(.0625*var(--pc-width))
}

.main_content_free h2 {
    margin: calc(.03125*var(--pc-width)) 0;
    font-size: 20px;
    font-size: 1.5625vw;
    font-weight: 600;
    line-height: 1.5
}

.main_content_free p {
    margin: 0 0 calc(.03125*var(--pc-width));
    font-size: 16px;
    font-size: 1.25vw;
    font-weight: 500;
    line-height: 2
}

.main_content_free strong {
    color: red;
    font-weight: 500
}

.main_content_free img {
    width: 100%;
    padding: 0 calc(.03125*var(--pc-width))
}

.main_content_free a {
    display: inline-block;
    padding: 0 calc(.0171875*var(--pc-width)) 0 0;
    background-image: url(../img/common/blank_icon.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: calc(.009375*var(--pc-width)) auto;
    text-decoration: underline
}

@media(hover: hover) {
    .main_content_free a:hover {
        text-decoration: none
    }
}

@media print,
screen and (max-width: 767px) {
    .main_content_free {
        margin: 0
    }

    .main_content_free h2 {
        margin: 10.6666666667vw 0;
        font-size: 18px;
        font-size: 4.8vw
    }

    .main_content_free p {
        margin: 10.6666666667vw 0;
        font-size: 14px;
        font-size: 3.7333333333vw
    }

    .main_content_free a {
        padding: 0 5.8666666667vw 0 0;
        background-size: 3.2vw auto
    }

    .main_content_free img {
        padding: 0 4.2666666667vw
    }
}

.main_other {
    position: relative;
    padding: calc(.046875*var(--pc-width)) calc(.0625*var(--pc-width)) calc(.0625*var(--pc-width));
    margin: 0 0 calc(.125*var(--pc-width));
    background-color: var(--color-white);
    border-radius: calc(.01875*var(--pc-width))
}

@media print,
screen and (max-width: 767px) {
    .main_other {
        padding: 21.3333333333vw 4.2666666667vw;
        margin: 0 0 32vw;
        border-radius: 6.4vw
    }
}

.main_other_title {
    font-family: fot-tsukuardgothic-std, "MyYuGothicM", MyYuGothicM, "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 30px;
    font-size: 2.34375vw;
    font-weight: 700
}

.main_other_title span {
    display: block;
    margin: 0 0 calc(.00625*var(--pc-width));
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-size: 1.25vw;
    font-weight: 600;
    color: var(--color-blue)
}

@media print,
screen and (max-width: 767px) {
    .main_other_title {
        font-size: 24px;
        font-size: 6.4vw
    }

    .main_other_title span {
        margin: 0 0 2.1333333333vw;
        font-size: 14px;
        font-size: 3.7333333333vw
    }
}

.main_other_list_wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: calc(.078125*var(--pc-width)) 0 0
}

@media print,
screen and (max-width: 767px) {
    .main_other_list_wrapper {
        display: block;
        margin: 0
    }
}

.main_other_list {
    border-left: calc(.0015625*var(--pc-width)) solid var(--color-l_grey);
    border-right: calc(.0015625*var(--pc-width)) solid var(--color-l_grey)
}

.main_other_list a {
    display: block;
    padding: calc(.03125*var(--pc-width)) calc(.03046875*var(--pc-width))
}

.main_other_list:first-child {
    border: none
}

.main_other_list:first-child a {
    padding-left: 0
}

.main_other_list:last-child {
    border: none
}

.main_other_list:last-child a {
    padding-right: 0
}

@media print,
screen and (max-width: 767px) {
    .main_other_list {
        border-top: 2px solid var(--color-l_grey);
        border-left: none;
        border-right: none
    }

    .main_other_list a {
        padding: 10.6666666667vw 0
    }

    .main_other_list:first-child {
        border: none
    }

    .main_other_list:last-child {
        border-top: 2px solid var(--color-l_grey)
    }
}

.main_other_list_date {
    margin: 0 0 calc(.00625*var(--pc-width));
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-size: .9375vw;
    font-weight: 600;
    color: var(--color-grey)
}

@media print,
screen and (max-width: 767px) {
    .main_other_list_date {
        margin: 0 0 2.1333333333vw;
        font-size: 12px;
        font-size: 3.2vw
    }
}

.main_other_list_title {
    width: calc(.25*var(--pc-width));
    font-size: 20px;
    font-size: 1.5625vw;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .05em
}

@media print,
screen and (max-width: 767px) {
    .main_other_list_title {
        width: auto;
        font-size: 18px;
        font-size: 4.8vw;
        line-height: 2
    }
}

.main_other_list_category {
    display: inline-block;
    margin: calc(.0125*var(--pc-width)) 0 0;
    padding: calc(.00625*var(--pc-width)) calc(.0125*var(--pc-width));
    border-radius: calc(.05078125*var(--pc-width));
    background-color: var(--color-p_blue);
    font-size: 12px;
    font-size: .9375vw;
    font-weight: 600
}

@media print,
screen and (max-width: 767px) {
    .main_other_list_category {
        margin: 2.1333333333vw 0 0;
        padding: 2.1333333333vw 4.2666666667vw;
        border-radius: 17.3333333333vw;
        font-size: 12px;
        font-size: 3.2vw
    }
}

.main_other_btn {
    position: absolute;
    top: calc(.046875*var(--pc-width));
    right: calc(.0625*var(--pc-width))
}

@media print,
screen and (max-width: 767px) {
    .main_other_btn {
        position: relative;
        top: auto;
        right: auto
    }
}