@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : top.css
Description :
===================================================================== */


/* -----MVアニメーション----- */

.mv_animation {
    width: 100vw;
    height: 100vh;
    background: #a0d9f6;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 99999;
    position: fixed;
}

.mv_animation p {
    width: calc(613/750 * 100vw);
    margin: 0 auto;
    position: absolute;
    display: block;
    -webkit-animation: fade-in 1.2s ease-out 1s 1 forwards;
    animation: fade-in 1.2s ease-out 1s 1 forwards;
    opacity: 0;
}

.mv_animation p img {
    width: 100%;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.mv_animation p::after {
    content: "";
    display: block;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    width: 100%;
    opacity: 0;
    margin-top: calc(25/613 *100%);
    -webkit-animation: scale 1400ms ease-out 1.1s 1 forwards;
    animation: scale 1400ms ease-out 1.1s 1 forwards;
}

@-webkit-keyframes scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 1;
    }
}

@keyframes scale {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 1;
    }
}

@media screen and (min-width: 768px) {
    /* -----MVアニメーション----- */
    .mv_animation {}
    .mv_animation p {
        width: calc(613/1200 * 100%);
    }
    .mv_animation p::after {}
}

@media screen and (min-width: 1200px) {
    /* -----MVアニメーション----- */
    .mv_animation p {
        width: 613px;
    }
}


/* ********************************************************************
        TOP用　メインイメージ
******************************************************************** */

#mv .inner {
    max-width: 100%;
    z-index: 2;
}

#mv::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(510 / 750 * 100%);
    background: url(../images/top/img_mv_sp.jpg) no-repeat center top;
    background-size: 100% auto;
}

.mv_ttl {
    width: 100%;
    background: #ed7da3;
}

.mv_ttl .inner {
    max-width: 100%;
    padding-top: calc(80/750 *100%);
}

.mv_ttl h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(622/750 *100%);
    margin: calc(-28/750 *100%) calc(64/750 *100%) 0;
    z-index: 3;
}

.mv_date .inner {
    max-width: 100%;
}

.mv_date {
    background: #009f9a;
    padding: calc(42 / 750 * 100%) 0;
    z-index: 2;
}

.mv_date img {
    width: calc(669 / 750 * 100%);
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    #mv .inner {
        max-width: 1200px !important;
    }
    #mv::before {
        width: calc(1600 / 1200 * 100%);
        padding-top: calc(570 / 1200 * 100%);
        background: url(../images/top/img_mv_pc.jpg) no-repeat center top;
        background-size: 100% auto;
        margin-left: calc(-200/1200 *100%);
    }
    .mv_ttl {}
    .mv_ttl .inner {
        max-width: 1200px !important;
        padding-top: calc(100/1200 *100%);
    }
    .mv_ttl h1 {
        width: calc(745/1200 *100%);
        margin: calc(-30/1200 *100%) calc(228/1200 *100%) 0;
        z-index: 3;
    }
    .mv_date {
        padding: calc(21 / 1200 * 100%) 0;
        background-size: calc(500 / 1200 * 100%) auto;
    }
    .mv_date .inner {
        max-width: 1200px !important;
    }
    .mv_date img {
        width: calc(906 / 1000 * 100%);
    }
}

@media screen and (min-width: 1200px) {
    #mv {}
    #mv::before {
        width: 100%;
        padding-top: calc(570/1600 *100%);
        margin: 0;
    }
    .mv_ttl .inner {
        padding-top: 100px;
    }
    .mv_date {
        padding: 21px 0;
        background-size: 500px auto;
    }
}


/* ********************************************************************
        ニュース
******************************************************************** */

#news {
    background: #f8f8f8;
    padding: calc(70/670 *100%) 0 calc(120/670 *100%);
}

#news .inner {
    max-width: none;
}

#news h2 {
    width: 100%;
    padding-left: calc(40 / 750 * 100%);
    margin: 0 0 calc(30 / 670 * 100%) 0;
    position: relative;
}

#news h2 img {
    width: calc(200 / 670 * 100%);
}

#news ul.news_box {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#news ul.news_box::-webkit-scrollbar {
    display: none;
}

#news ul.news_box li {
    width: calc(410 / 690 * 100%);
    display: inline-block;
    margin-right: calc(30 / 690 * 100%);
}

#news ul.news_box li:first-child {
    margin-left: calc(30 / 690 * 100%);
}

#news ul.news_box li figure {
    display: block;
    width: 100%;
    margin-bottom: calc(10 / 410 * 100%);
}

#news ul.news_box li figure img {
    border-radius: 10px;
}

#news ul.news_box li .txt {
    width: 100%;
}

#news ul.news_box li p.date {
    font-size: 2rem;
    color: #a0d9f6;
    font-weight: 900;
    margin-bottom: calc(10 / 410 * 100%);
}

#news ul.news_box li p.text {
    font-size: 2.4rem;
    line-height: 1.5;
    color: #5b6969;
    white-space: normal !important;
}

@media screen and (min-width: 768px) {
    #news {
        padding: calc(30/1000 *100%) 0 calc(40/1000 *100%);
    }
    #news .inner {
        max-width: 1200px;
    }
    #news h2 {
        width: 100%;
        margin: 0 0 calc(30 / 1000 * 100%) 0;
        position: relative;
        padding-left: 0;
    }
    #news h2 img {
        width: calc(185 / 1000 * 100%);
    }
    #news h2::after {
        content: "";
        display: block;
        width: calc(700 / 1000 * 100%);
        height: 1px;
        background: #a0d9f6;
        position: absolute;
        top: 50%;
        right: 0;
    }
    #news ul.news_box {
        width: 100%;
        overflow-x: hidden;
        white-space: normal;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    #news ul.news_box li {
        width: calc((100% - 60px)/3);
        max-width: 313px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin-right: 0;
    }
    #news ul.news_box li:first-child {
        margin-left: 0;
    }
    #news ul.news_box li:not(:last-child) {
        margin-right: calc(30 / 1000 * 100%);
    }
    #news ul.news_box li figure {
        width: 45%;
        margin-right: 3%;
    }
    #news ul.news_box li .txt {
        width: 52%;
    }
    #news ul.news_box li p.date {
        font-size: 1.2rem;
        color: #a0d9f6;
        font-weight: 900;
    }
    #news ul.news_box li p.text {
        font-size: 1.4rem;
        line-height: 1.5;
        color: #5b6969;
        width: 11em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }
}


/* ********************************************************************
        NEXT
******************************************************************** */

#next {
    padding: calc(60 / 750 * 100%) 0 calc(85 / 750 * 100%);
}

#next h2 {
    width: calc(418 / 670 * 100%);
    margin: 0 0 calc(30 / 670 * 100%) 0;
    position: relative;
}

#next h2::after {
    content: "";
    display: block;
    width: calc(78/418 *100%);
    padding-top: calc(100/650 *100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: url(../images/top/img_shape3.png) no-repeat center/contain;
    margin-top: calc(0/650 *100%);
    margin-left: calc(230/200 *100%);
    z-index: 10;
    -webkit-animation: kurukuru 0.8s infinite alternate;
    animation: kurukuru 0.8s infinite alternate;
}

.next_box {
    width: calc(650 / 670 * 100%);
    margin: 0 auto;
}

.next_box::before,
.next_box::after {
    content: "";
    display: block;
    width: calc(300/650 *100%);
    padding-top: calc(271/650 *100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.next_box::before {
    background: url(../images/top/img_shape1.png) no-repeat center/contain;
    margin-top: calc(-90/650 *100%);
    margin-left: calc(446/650 *100%);
    -webkit-animation: fuwafuwa 1s infinite ease alternate;
    animation: fuwafuwa 1s infinite ease alternate;
}

.next_box::after {
    background: url(../images/top/img_shape2.png) no-repeat center/contain;
    margin-top: calc(251/650 *100%);
    margin-left: calc(-184/650 *100%);
    -webkit-animation: fuwafuwa 1.2s infinite alternate;
    animation: fuwafuwa 1.2s infinite alternate;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

@-webkit-keyframes fuwafuwa {
    0% {
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
    100% {
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
    }
}

@keyframes fuwafuwa {
    0% {
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
    100% {
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
    }
}

@-webkit-keyframes kurukuru {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
}

@keyframes kurukuru {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
}

.next_wrap {
    z-index: 3;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 30px;
    overflow: hidden;
    margin: 0 0 calc(30 / 750 * 100%) 0;
    position: relative;
    z-index: 50;
}

.next_wrap iframe,
.next_wrap img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

#next h3 {
    color: #fff100;
    background: #ed7da3;
    font-size: 4rem;
    font-weight: 700;
    -webkit-box-shadow: 0.6666vw 0.6666vw 0 #fff100;
    box-shadow: 0.6666vw 0.6666vw 0 #fff100;
    margin: 0 calc(20 / 670 * 100%) 0 0;
    padding: 0 calc(15/750 *100%);
    display: inline-block;
    position: relative;
    z-index: 50;
}

#next h4 {
    text-align: center;
    color: #ed7da3;
    font-size: 5rem;
    font-weight: 700;
    display: block;
    z-index: 50;
    padding: 1em 0;
    clear: both;
}

#next h4::before {
    content: "『 ";
}

#next h4::after {
    content: " 』";
}

#next p.next_onair {
    font-size: 3rem;
    color: #009d97;
    font-weight: 700;
    padding-top: calc(13 / 670 * 100%);
}

#next p.next_onair small {
    font-size: 2.4rem;
}

#next p.discription {
    clear: both;
    font-size: 2.4rem;
    line-height: 1.9;
}

@media screen and (min-width: 768px) {
    #next {
        padding: calc(80 / 1000 * 100%) 0 calc(80 / 1000 * 100%);
    }
    #next h2 {
        width: calc(385 / 1000 * 100%);
        margin: 0 0 calc(56/1000 *100%) 0;
    }
    #next h2::after {
        width: calc(90/385 *100%);
        padding-top: calc(100/385 *100%);
        margin-top: calc(0/385 *100%);
        margin-left: calc(730/385 *100%);
    }
    .next_box {
        width: calc(880/1000 *100%);
        margin: 0 auto calc(30/1000 *100%);
    }
    .next_box::before,
    .next_box::after {
        width: calc(366/880 *100%);
        padding-top: calc(271/880 *100%);
    }
    .next_box::before {
        margin-top: calc(-58/880 *100%);
        margin-left: calc(683/880 *100%);
    }
    .next_box::after {
        margin-top: calc(292/880 *100%);
        margin-left: calc(-216/880 *100%);
    }
    #next h3 {
        margin: 0 calc(30 / 1000 * 100%) calc(20 / 1000 * 100%) 0;
        float: left;
        font-size: 4rem;
    }
    #next h4 {
        width: 100%;
        font-size: 2em;
    }
    #next p.next_onair {
        font-size: 2.2rem;
    }
    #next p.next_onair small {
        font-size: 1.6rem;
    }
    #next p.discription {
        font-size: 1.6rem;
        line-height: 1.9;
    }
}


/* ********************************************************************
        ムービー
******************************************************************** */

#movie {
    background: #e1f2ed url(../images/top/bg_movie_02.png) no-repeat top right -50px/60%;
    padding: calc(75 / 750 * 100%) 0 calc(110 / 750 * 100%);
    position: relative;
}


/* #movie .inner {
    max-width: none;
} */

#movie:after {
    content: "";
    display: block;
    background: url(../images/top/bg_movie_01.png) no-repeat bottom left/60%;
    width: 100%;
    height: 500px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}


/* 
#movie h2 {
    width: calc(230 / 750 * 100%);
    margin: 0 0 calc(75 / 750 * 100%) 0;
    padding-left: calc(40 / 750 * 100%);
} */

.movie_box {
    width: 100%;
    position: relative;
    z-index: 5;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.movie_box::-webkit-scrollbar {
    display: none;
}

.movie_box li {
    /*width: calc((100% - 60px)/3);
    max-width: 313px;*/
    width: calc(410 / 690 * 100%);
    display: inline-block;
    margin-right: calc(30 / 690 * 100%);
    position: relative;
    vertical-align: top;
}

.movie_box li:first-child {
    margin-left: calc(30 / 690 * 100%);
}

.movie_box li a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.movie_box li figure img {
    border-radius: 10px 10px 0 0;
}

.movie_box li .txt {
    background: #fff;
    padding: calc(25 / 750 * 100%);
    border-radius: 0 0 10px 10px;
}

.movie_box li p.date {
    font-size: 2rem;
    color: #a0d9f6;
    font-weight: 900;
    margin-bottom: calc(10 / 410 * 100%);
}

.movie_box li p.text {
    font-size: 2.4rem;
    line-height: 1.5;
    color: #5b6969;
    white-space: normal !important;
}

@media screen and (min-width: 768px) {
    #movie {
        background: #e1f2ed url(../images/top/bg_movie_02.png) no-repeat top right/30%;
        padding: calc(55 / 750 * 100%) 0 calc(70 / 750 * 100%);
        position: relative;
    }
    #movie .inner {
        max-width: 1200px;
    }
    #movie:after {
        content: "";
        display: block;
        background: url(../images/top/bg_movie_01.png) no-repeat bottom left/contain;
        width: 100%;
        height: 415px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
    }
    /* #movie h2 {
        width: calc(210 / 1000 * 100%);
        margin: 0 0 calc(12 / 1000 * 100%) 0;
        padding-left: 0;
    } */
    .movie_box {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        overflow-x: hidden;
    }
    .movie_box li {
        display: inline-block;
        margin-right: calc(30 / 1000 * 100%);
        position: relative;
    }
    .movie_box li:first-child {
        margin-left: 0;
    }
    .movie_box li:last-child {
        margin-right: 0;
    }
    .movie_box li .txt {
        padding: 18px 25px;
    }
    .movie_box li p.date {
        font-size: 1.2rem;
    }
    .movie_box li p.text {
        font-size: 1.6rem;
    }
}


/* =====================================================================
    movie　→　hulu
======================================================================*/

.hulu_movie h2 {
    width: calc(280 / 630 * 100%);
    margin-bottom: calc(50 / 630 * 100%);
}

.hulu_movie h3 {
    color: #fff100;
    background: #ed7da3;
    font-size: 4rem;
    font-weight: 700;
    -webkit-box-shadow: 0.6666vw 0.6666vw 0 #fff100;
    box-shadow: 0.6666vw 0.6666vw 0 #fff100;
    margin: 0 0 calc(60 / 630 * 100%) 0;
    padding: 0 calc(15/630 *100%);
    display: inline-block;
    z-index: 4;
}

.hulu_movie .inner::after {
    content: "";
    display: block;
    width: calc(78/630 *100%);
    padding-top: calc(100/630 *100%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    background: url(../images/top/img_shape3.png) no-repeat center/contain;
    margin-top: calc(233/630 *100%);
    margin-right: calc(-20/630 *100%);
    z-index: 5;
    -webkit-animation: kurukuru 0.8s infinite alternate;
    animation: kurukuru 0.8s infinite alternate;
}

@-webkit-keyframes kurukuru {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
}

@keyframes kurukuru {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }
}

.hulu_movie_wrap {
    position: relative;
    margin-bottom: calc(50 / 630 * 100%);
}

.hulu_movie_wrap::before,
.hulu_movie_wrap::after {
    content: "";
    display: block;
    width: calc(366/630 *100%);
    padding-top: calc(272/630 *100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.hulu_movie_box {
    position: relative;
    z-index: 5;
    border-radius: 2rem;
    overflow: hidden;
}

.hulu_movie_photo {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.hulu_movie_photo img,
.hulu_movie_photo iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

@media screen and (min-width: 768px) {
    .hulu_movie {
        padding: calc(110 / 1200 * 100%) 0;
    }
    .hulu_movie h2 {
        width: calc(280 / 1000 * 100%);
        margin-bottom: calc(50 / 1000 * 100%);
    }
    .hulu_movie h3 {
        box-shadow: 5px 5px 0 #fff100;
        margin: 0 0 calc(40 / 1000 * 100%) calc(60 / 1000 * 100%);
        padding: 0 calc(15/1000 *100%);
    }
    .hulu_movie .inner::after {
        width: calc(78/1200 *100%);
        padding-top: calc(87/1200 *100%);
        margin-top: calc(225/1200 *100%);
        margin-right: calc(130/1200 *100%);
    }
    .hulu_movie_wrap {
        margin: 0 auto calc(40 / 1000 * 100%);
    }
    .hulu_movie_wrap::before,
    .hulu_movie_wrap::after {
        width: calc(364/1000 *100%);
        padding-top: calc(270/1000 *100%);
    }
    .hulu_movie_wrap::before {
        margin-top: calc(-76/1000 *100%);
        margin-left: calc(802/1000 *100%);
    }
    .hulu_movie_wrap::after {
        margin: 0;
        margin-top: calc(344/1000 *100%);
        margin-left: calc(-87/1000 *100%);
    }
    .hulu_movie_box {
        width: calc(880 / 1000 * 100%);
        margin: 0 auto;
        border-radius: 4rem;
    }
    .hulu_movie_photo {
        cursor: pointer;
    }
}


/* =====================================================================
*    trial 
* =================================================================== */

.btn_trial {
    width: calc(420 / 630 * 100%);
    margin: 0 auto;
    display: block;
    background: #fff100;
    padding: calc(30/630 *100%) 0;
    color: #009f9a;
    text-decoration: none;
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1em;
    border-radius: 4.5rem;
    box-shadow: 0 10px 20px rgb(0 0 0 / 13%);
    z-index: 3;
}

.btn_trial::after {
    content: "";
    display: inline-block;
    background: url(../images/common/mark_arrow.png) no-repeat center/contain;
    width: calc(20/420 *100%);
    padding-top: calc(21/420 *100%);
}

@media screen and (min-width: 768px) {
    .btn_trial {
        width: calc(280 / 1000 * 100%);
        padding: calc(21/1000 *100%) 0;
        font-size: 1.8rem;
        position: relative;
        top: 0;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .btn_trial:hover {
        background: #a0d9f6;
        position: relative;
        top: 10px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    }
}


/* ********************************************************************
        トピックス
******************************************************************** */

#topics {
    background: white;
    padding: calc(75 / 750 * 100%) 0 calc(110 / 750 * 100%);
    position: relative;
}

#topics h2 {
    width: calc(243 / 750 * 100%);
    margin: 0 0 calc(75 / 750 * 100%) 0;
}

.topics_box {
    width: 100%;
    position: relative;
    z-index: 5;
}

.topics_box li {
    width: 100%;
    margin-right: 30px;
    position: relative;
    padding: 15px 0 35px;
}

.topics_box li:nth-child(n + 2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-top: 1px solid #a0d9f6;
    padding: 15px 0 30px;
}

.topics_box li:nth-child(n + 2) figure {
    width: 30%;
    margin-right: 3%;
}

.topics_box li:nth-child(n + 2) .txt {
    width: 67%;
}

.topics_box li:last-child {
    margin-right: 0;
}

.topics_box li figure img {
    border-radius: 10px;
    margin-bottom: calc(17 / 750 * 100%);
}

.topics_box li p.date {
    font-size: 2rem;
    color: #a0d9f6;
    font-weight: 900;
    position: absolute;
    bottom: -1.7em;
    right: 0;
    text-align: right;
}

.topics_box li:first-child p.date {
    bottom: -1.8em;
}

.topics_box li p.text {
    font-size: 2.4rem;
    line-height: 1.5;
    color: #5b6969;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    #topics {
        padding: calc(55 / 750 * 100%) 0 calc(70 / 750 * 100%);
    }
    #topics h2 {
        width: calc(230 / 1000 * 100%);
        margin: 0 0 calc(12 / 1000 * 100%) 0;
    }
    .topics_box {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .topics_box li {
        width: calc((100% - 60px)/3);
        margin-right: 30px;
        padding: 0;
    }
    .topics_box li:last-child {
        margin-right: 0;
    }
    .topics_box li figure img {
        border-radius: 10px;
        margin-bottom: calc(17 / 750 * 100%);
    }
    .topics_box li p.date {
        font-size: 1.2rem;
        color: #a0d9f6;
        font-weight: 900;
        position: relative;
        bottom: auto !important;
        right: auto;
        text-align: left;
    }
    .topics_box li p.text {
        font-size: 1.6rem;
        line-height: 1.5;
        color: #5b6969;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
    .topics_box li:nth-child(n + 2) {
        display: block;
        border-top: none;
        padding: 0;
    }
    .topics_box li:nth-child(n + 2) figure {
        width: 100%;
        margin-right: 0;
    }
    .topics_box li:nth-child(n + 2) .txt {
        width: 100%;
    }
}


/* ********************************************************************
        sns
******************************************************************** */

#under_sns {
    position: relative;
    background: #e1f2ed;
}

#under_sns::before,
#under_sns::after {
    content: "";
    display: block;
    width: calc(1564 / 750 * 100%);
    margin: 0 0 0 calc(-782 / 750 * 100%);
    padding-top: calc(80 / 750 * 100%);
    background: url(../images/top/itaike_line.png) repeat-x center top 15px;
    background-size: 300px;
    position: relative;
    -webkit-animation: mv_anime1 10s linear forwards infinite;
    animation: mv_anime1 10s linear forwards infinite;
}

@media screen and (min-width: 768px) {
    #under_sns::before,
    #under_sns::after {
        width: calc(1564 / 750 * 100%);
        margin: 0 0 0 calc(-782 / 750 * 100%);
        padding-top: calc(30 / 750 * 100%);
    }
    #under_sns .inner {
        position: relative;
    }
    #under_sns .inner::before {
        content: "";
        display: block;
        width: calc(483/1000 *100%);
        padding-top: calc(271/1000 *100%);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    #under_sns .inner::before {
        background: url(../images/top/img_shape1.png) no-repeat center/contain;
        margin-top: calc(70/1000 *100%);
        margin-left: calc(600/1000 *100%);
        -webkit-animation: fuwafuwa 1s infinite ease alternate;
        animation: fuwafuwa 1s infinite ease alternate;
    }
}

@-webkit-keyframes mv_anime1 {
    0% {
        left: 0;
    }
    100% {
        left: calc(782 / 750 * 100%);
    }
}

@keyframes mv_anime1 {
    0% {
        left: 0;
    }
    100% {
        left: calc(782 / 750 * 100%);
    }
}

@-webkit-keyframes mv_anime2 {
    0% {
        left: 0;
    }
    100% {
        left: 146.63%;
    }
}

@keyframes mv_anime2 {
    0% {
        left: 0;
    }
    100% {
        left: 146.63%;
    }
}

#under_sns h2 {
    width: calc(149 / 750 * 100%);
    padding-top: calc(55 / 750 * 100%);
    margin: 0 0 calc(60 / 750 * 100%) 0;
}

#under_sns h2 img {
    width: 100%;
}

#under_sns .under_sns_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

#under_sns .under_sns_box .twitter_area {
    width: 100%;
    max-width: 500px;
    height: 400px;
    background: white;
    border-radius: 30px;
}

#under_sns .under_sns_box .sns_btn {
    width: 100%;
    max-width: 430px;
    margin: calc(57 / 750 * 100%) auto calc(57 / 750 * 100%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#under_sns .under_sns_box .sns_btn li {
    width: calc(135 / 750 * 100%);
    margin: 0 calc(10 / 750 * 100%) calc(10 / 750 * 100%);
}

#under_sns .under_sns_box .sns_btn li a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: calc(750 / 750 * 100%);
    border-radius: 50px;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-box-shadow: 0px 10px 21px 0px rgba(0, 0, 0, 0.13);
    box-shadow: 0px 10px 21px 0px rgba(0, 0, 0, 0.13);
}

#under_sns .under_sns_box .sns_btn li.sns_btn-twitter a {
    background: #a0d9f6 url(../images/common/icon_twitter.png) no-repeat center/contain;
}

#under_sns .under_sns_box .sns_btn li.sns_btn-insta a {
    background: #a0d9f6 url(../images/common/icon_insta.png) no-repeat center/contain;
}

#under_sns .under_sns_box .sns_btn li.sns_btn-line a {
    background: #a0d9f6 url(../images/common/icon_line.png) no-repeat center/contain;
}

#under_sns .under_sns_box .sns_btn li.sns_btn-twitter a:hover {
    background: #009f9a url(../images/common/icon_twitter.png) no-repeat center/contain;
}

#under_sns .under_sns_box .sns_btn li.sns_btn-insta a:hover {
    background: #009f9a url(../images/common/icon_insta.png) no-repeat center/contain;
}

#under_sns .under_sns_box .sns_btn li.sns_btn-line a:hover {
    background: #009f9a url(../images/common/icon_line.png) no-repeat center/contain;
}

@media screen and (min-width: 768px) {
    #under_sns h2 {
        width: calc(136 / 1000 * 100%);
        padding-top: calc(55 / 1000 * 100%);
        margin: 0 0 calc(40 / 1000 * 100%) 0;
    }
    #under_sns .under_sns_box {
        position: relative;
        z-index: 0;
    }
    #under_sns .under_sns_box .twitter_area {
        width: 50%;
        max-width: 500px;
        height: 400px;
        background: white;
        border-radius: 30px;
        position: relative;
    }
    #under_sns .under_sns_box .twitter_area::after {
        content: "";
        display: block;
        width: calc(55/500 *100%);
        padding-top: calc(55/500 *100%);
        position: absolute;
        top: 40%;
        left: -85px;
        background: url(../images/top/img_shape4.png) no-repeat center/contain;
        z-index: -1;
        -webkit-animation: fuwafuwa 0.8s infinite alternate;
        animation: fuwafuwa 0.8s infinite alternate;
    }
    #under_sns .under_sns_box .twitter_area::before {
        content: "";
        display: block;
        width: calc(90/500 *100%);
        padding-top: calc(90/500 *100%);
        position: absolute;
        top: 20%;
        left: -60px;
        background: url(../images/top/img_shape4.png) no-repeat center/contain;
        z-index: -2;
        -webkit-animation: fuwafuwa 1s infinite alternate;
        animation: fuwafuwa 1s infinite alternate;
    }
    #under_sns .under_sns_box .sns_btn {
        width: 44%;
        max-width: 430px;
        display: block;
        margin: 0 0 calc(45 / 430 * 100%);
        padding-top: calc(20 / 430 * 100%);
        position: relative;
    }
    #under_sns .under_sns_box .sns_btn::after {
        content: "";
        display: block;
        width: calc(78/418 *100%);
        padding-top: calc(100/650 *100%);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
        background: url(../images/top/img_shape3.png) no-repeat center/contain;
        z-index: 10;
        -webkit-animation: kurukuru 0.8s infinite alternate;
        animation: kurukuru 0.8s infinite alternate;
    }
    #under_sns .under_sns_box .sns_btn li {
        width: calc(430 / 430 * 100%);
        margin: 0 0 calc(30 / 430 * 100%);
        padding-top: 0;
    }
    #under_sns .under_sns_box .sns_btn li a {
        padding-top: calc(80 / 430 * 100%);
    }
    #under_sns .under_sns_box .sns_btn li.sns_btn-twitter a {
        background: #a0d9f6 url(../images/top/btn_twitter_pc.png) no-repeat center/contain;
    }
    #under_sns .under_sns_box .sns_btn li.sns_btn-insta a {
        background: #a0d9f6 url(../images/top/btn_insta_pc.png) no-repeat center/contain;
    }
    #under_sns .under_sns_box .sns_btn li.sns_btn-line a {
        background: #a0d9f6 url(../images/top/btn_line_pc.png) no-repeat center/contain;
    }
    #under_sns .under_sns_box .sns_btn li.sns_btn-twitter a:hover {
        background: #009f9a url(../images/top/btn_twitter_pc.png) no-repeat center/contain;
    }
    #under_sns .under_sns_box .sns_btn li.sns_btn-insta a:hover {
        background: #009f9a url(../images/top/btn_insta_pc.png) no-repeat center/contain;
    }
    #under_sns .under_sns_box .sns_btn li.sns_btn-line a:hover {
        background: #009f9a url(../images/top/btn_line_pc.png) no-repeat center/contain;
    }
}


/* ********************************************************************
        モクドラ
******************************************************************** */

#mokudora {
    background: #009f9a;
    padding: calc(90 / 750 * 100%) 0 calc(90 / 750 * 100%);
}

#mokudora h2 {
    width: calc(490 / 750 * 100%);
    margin: 0 auto calc(50 /750 *100%);
}

#mokudora p {
    width: calc(566 / 750 * 100%);
    margin: auto;
}

@media screen and (min-width: 768px) {
    #mokudora {
        padding: calc(80 / 1000 * 100%) 0 calc(80 / 1000 * 100%);
    }
    #mokudora h2 {
        width: calc(383 / 1000 * 100%);
        max-width: 383px;
        margin: 0 auto calc(40 /1000 *100%);
    }
    #mokudora p {
        width: calc(608 / 1000 * 100%);
        max-width: 830px;
        margin: auto;
    }
}


/* ********************************************************************
        バナー
******************************************************************** */

#sp_contents_bnr ul li {
    display: inline-block;
    padding: 5px;
}


/* =====================================================================
*    hulu_popup
* =================================================================== */

.hulu_popup {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(199, 232, 250, 0.8);
    z-index: 100000;
}

.hulu_popup_inner {
    width: calc(650 / 750 * 100%);
    max-width: 650px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.hulu_popup_area {
    overflow: hidden;
    background-color: #fff;
    border-radius: 20px;
    padding: calc(136 / 650 * 100%) 0 calc(25 / 650 * 100%);
}

.hulu_popup_area>* {
    z-index: 2;
}

.hulu_popup_area::before {
    content: "";
    display: block;
    width: calc(300 / 650 * 100%);
    padding-top: calc(223 / 650 * 100%);
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/top/img_shape1.png) no-repeat center/contain;
    margin: calc(60 / 650 * 100%) calc(-129 / 650 * 100%) 0 0;
}

.hulu_popup_area::after {
    content: "";
    display: block;
    width: calc(388 / 650 * 100%);
    padding-top: calc(288 / 650 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/top/img_shape2.png) no-repeat center/contain;
    margin: calc(258 / 650 * 100%) 0 0 calc(-160 / 650 * 100%);
    z-index: 1;
}

.hulu_popup h2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 3;
}

.hulu_popup h2 span {
    display: block;
}

.ttl_hulu_img {
    width: calc(461 / 650 * 100%);
    margin: calc(-34 / 650 * 100%) auto 0;
}

.ttl_hulu_txt {
    color: #ed7da3;
    font-size: 4rem;
    font-weight: 700;
    margin-top: 0.3em;
}

.hulu_img {
    width: calc(560 / 650 * 100%);
    margin: calc(20 / 650 * 100%) auto 0;
}

.hulu_img img {
    border-radius: 10px;
    overflow: hidden;
}

.hulu_img::after {
    content: "";
    display: block;
    width: calc(80 / 560 * 100%);
    padding-top: calc(87 / 560 * 100%);
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/top/img_shape3.png) no-repeat center/contain;
    margin: calc(-17 / 560 * 100%) calc(-31 / 560 * 100%) 0 0;
}

.hulu_popup_btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto calc(32 / 560 * 100%);
    width: calc(300 / 560 * 100%);
}

.hulu_popup_btn a {
    background-color: #a0d9f6;
    border-radius: 3em;
    color: #fff;
    font-size: 2.4rem;
    padding: 0.3em 0 .4em;
    display: block;
    text-decoration: none;
    box-shadow: 0 0.4em 0.6em rgb(0 0 0 / 13%);
}

.hulu_popup_btn a::before {
    content: "";
    display: block;
    width: .4em;
    height: .4em;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1em;
    -webkit-transform: rotate(-315deg);
    transform: rotate(-315deg);
    z-index: 2;
    margin: auto;
    border-top: .15em solid #fff;
    border-right: .15em solid #fff;
}

.hulu_popup_area2_txt {
    width: calc(271 / 650 * 100%);
    margin: calc(24 / 650 * 100%) auto 0;
}

.hulu_popup_link_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: calc(26 / 650 * 100%);
}

.hulu_popup_link_list li {
    width: calc(420 / 650 * 100%);
    margin: 0 0 0 calc(40 / 650 * 100%);
}

.hulu_popup_link_list li:first-child {
    margin-left: 0;
}

.hulu_popup_link_list li a {
    display: block;
    background: #fff100 url(../images/top/btn_txt2.png) no-repeat center;
    background-size: calc(311 / 420 * 100%) auto;
    border-radius: 60px;
    padding: calc(90 / 420 * 100%) 0 0 0;
    box-shadow: 0 1em 1.5em rgb(0 0 0 / 13%);
    transition: .3s ease;
    z-index: 100;
    top: 0;
}

.hulu_popup_check {
    font-size: 2rem;
    letter-spacing: 0.05em;
    margin-top: 1em;
}

.hulu_popup_check input {
    margin: 0 10px 0 0;
}

.hulu_popup_close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 110;
    cursor: pointer;
    width: calc(80 / 750 * 100%);
    margin: calc(-45 / 750 * 100%) calc(-5 / 750 * 100%) 0 0;
    transition: 0.2s ease;
}

.hulu_popup_close::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%;
    background: url(../images/common/btn_close.png) no-repeat center/contain;
    margin: 0 auto;
    transition: 0.2s ease;
    border-radius: 50%;
    box-shadow: 0 1em 1.5em rgb(0 0 0 / 13%);
}

@media screen and (min-width: 768px) {
    .hulu_popup_inner {
        width: calc(650 / 1000 * 100%);
    }
    .hulu_popup_area {
        padding: 9vw 0 1vw;
    }
    .hulu_popup_area::before {
        margin: calc(54 / 650 * 100%) calc(-64 / 650 * 100%) 0 0;
    }
    .hulu_popup_area::after {
        margin: calc(252 / 650 * 100%) 0 0 calc(-219 / 650 * 100%);
    }
    .hulu_img img {
        border-radius: 20px;
    }
    .hulu_popup_btn {
        width: calc(200 / 560 * 100%);
    }
    .hulu_popup_btn a {
        font-size: 1.6rem;
        transition: 0.3s ease;
    }
    .hulu_popup_btn a:hover {
        background-color: #009f9a;
    }
    .hulu_popup_link_list li {
        width: calc(280 / 650 * 100%);
    }
    .hulu_popup_link_list li a {
        background-size: calc(192 / 280 * 100%) auto;
        padding: calc(60 / 280 * 100%) 0 0 0;
    }
    .hulu_popup_link_list li a:hover {
        background: #a0d9f6 url(../images/top/btn_txt2.png) no-repeat center;
        background-size: calc(192 / 280 * 100%) auto;
        opacity: 1;
        top: 10px;
        box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
    }
    .hulu_popup_check {
        font-size: 1.6rem;
    }
    .hulu_popup_check label {
        cursor: pointer;
    }
    .hulu_popup_close:hover {
        transition: 0.3s;
        top: 10px;
    }
}

@media screen and (min-width: 1000px) {
    .hulu_popup_area {
        padding: calc(119 / 650 * 100%) 0 calc(25 / 650 * 100%);
    }
    .ttl_hulu_txt {
        font-size: 34px;
    }
    .hulu_popup_btn a {
        font-size: 13px;
    }
}

@media screen and (max-height: 900px) and (orientation: landscape) {
    .hulu_popup_inner {
        width: 100%;
        max-width: calc(520 / 750 * 100vh);
        min-width: 500px;
    }
    .hulu_popup_btn a {
        /* font-size: 0.8em; */
    }
}