@charset "utf-8";

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

/* =====================================================================
*    共通・大枠
* =================================================================== */
html {
    font-size: calc(10 / 750 * 100vw);
}

@media screen and (min-width: 768px) {
    html {
        font-size: calc(10 / 1140 * 100vw);
    }
}

@media screen and (min-width: 1140px) {
    html {
        font-size: 10px;
    }
}

.gDef-top-banner {
    background-color: #f5f5f5;
}

.gDef-contents {
    color: #222;
    font-size: 2.4rem;
    font-family: "Noto Sans JP", "メイリオ", "ＭＳ Ｐゴシック", "小塚ゴシック Pro R", "ヒラギノ角ゴ Pro W3", "Meiryo", "MS PGothic", "KozGoPro-Regular", "Hiragino Kaku Gothic Pro", "MS UI Gothic", Osaka, sans-serif;
    line-height: 1.667;
    letter-spacing: 0.05em;
    background-color: #fff;
}

.set1,
.set1 * {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.set1 img,
.contents_img img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.set1 a {
    display: block;
    text-decoration: none;
    color: #131919;
}

.nav_menu  li a {
    color: #fff;
}

@media screen and (min-width: 768px) {
    .gDef-contents {
        font-size: 1.4rem;
        line-height: 1.714;
    }

    .set1 a {
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }

.nav_menu  li a {
    color: #131919;
}
}

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

@media screen and (min-width: 768px) {
    .sp {
        display: none !important;
    }
}


/* =====================================================================
*    section
* =================================================================== */
body {
    overflow-x: hidden;
}

.main {
    display: block;
    position: relative;
}

.inner {
}

.gra1 {
    background-image: -webkit-gradient(linear, left top, right top, from(rgb(3,207,187)), to(rgb(156,233,145)));
    background-image: linear-gradient(90deg, rgb(3,207,187) 0%, rgb(156,233,145) 100%);
}

.line1 {
    -o-border-image: linear-gradient(90deg, rgb(3,207,187) 0%, rgb(156,233,145) 100%);
    border-image: -webkit-gradient(linear, left top, right top, from(rgb(3,207,187)), to(rgb(3,233,145)));
    border-image: linear-gradient(90deg, rgb(3,207,187) 0%, rgb(3,233,145) 100%);
	border-image-slice: 1;
}


.sec_ttl {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: calc(670 / 750 * 100%);
    margin: -0.3em auto;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
}

.sec_ttl_w {
    color: #fff;
}

.sec_ttl::before {
    content: "";
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: calc(50 / 750 * 100vw);
    height: calc(40 / 750 * 100vw);
    margin: 0.4em 0.4em 0 0;
    background: url(../images/common/icon1.png) no-repeat center center;
    background-size: auto 100%;
}

.sec_ttl_w::before {
    background: url(../images/common/icon2.png) no-repeat center center;
    background-size: auto 100%;
}

@media screen and (min-width: 768px) {
    .inner {
        position: relative;
        width: 100%;
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 calc(58 / 1140 * 100%);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .sec_ttl {
        width: 100%;
        font-size: 3.2rem;
    }

    .sec_ttl_s {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        font-size: 2rem;
    }

    .sec_ttl::before {
        width: calc(28 / 1140 * 100vw);
        height: calc(28 / 1140 * 100vw);
        margin: 0.1em 0.1em 0 0;
        background-size: 100% auto;
    }

    .sec_ttl_w::before {
        background-size: 100% auto;
    }

    .sec_ttl_s::before {
        width: calc(20 / 1140 * 100vw);
        height: calc(20 / 1140 * 100vw);
    }
}

@media screen and (min-width: 1140px) {
    .inner {
        padding: 0 58px;
    }

    .sec_ttl::before {
        width: 52px;
        height: 42px;
    }

    .sec_ttl_s::before {
        width: 31px;
        height: 28px;
    }
}


/* =====================================================================
*    btn / arrow
* =================================================================== */
a.btn1 {
    display: inline;
    padding: 0 0 0 2em;
}

.btn1::before {
    content: "";
    display: block;
    width: calc(36 / 750 * 100vw);
    height: calc(36 / 750 * 100vw);
    background: url(../images/common/btn_arrow1.png) no-repeat center center;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.btn2 {
    width: calc(480 / 750 * 100vw);
    margin: 0 auto;
    padding: 1em 0;
    background-image: -webkit-gradient(linear, left top, right top, from(rgb(158,207,0)), to(rgb(126,242,171)));
    background-image: linear-gradient(90deg, rgb(158,207,0) 0%, rgb(126,242,171) 100%);
    border-radius: 3em;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
}

.btn2 span {
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    a.btn1 {
        padding: 0 0 0 1.7em;
    }

    .btn1::before {
        width: calc(18 / 1140 * 100vw);
        height: calc(18 / 1140 * 100vw);
        top: 0.15em;
    }

    .btn2 {
        width: calc(320 / 1140 * 100vw);
        font-size: 1.6rem;
    }

    .btn2::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: -webkit-gradient(linear, left top, right top, from(rgb(126,242,171)), to(rgb(158,207,0)));
        background-image: linear-gradient(90deg, rgb(126,242,171) 0%, rgb(158,207,0) 100%);
        border-radius: 3em;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }

    .btn2:hover::before {
        opacity: 1;
    }
}

@media screen and (min-width: 1140px) {
    .btn1::before {
        width: 18px;
        height: 18px;
    }

    .btn2 {
        width: 320px;
    }
}


/* =====================================================================
*    header
* =================================================================== */
.header_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: calc(20 / 750 * 100%) calc(40 / 750 * 100%);
    background-color: #fff;
    border-bottom: calc(4 / 750 * 100vw) solid;
}

.header_ttl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(600 / 670 * 100%);
}

.header_logo {
    width: calc(300 / 600 * 100%);
    margin: calc(-20 / 600 * 100%) 0 0;
}

.header_date {
    width: calc(220 / 600 * 100%);
    margin: 0 auto 0 calc(10 / 600 * 100%);
    padding: 0.65em 0;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;

}

.timeBase {
    background: url(../images/common/bg_time.png) no-repeat center right;
    background-size: auto 100%;
}

.header_twitter {
    width: calc(70 / 670 * 100%);
}

@media screen and (min-width: 768px) {
    .header_box {
        padding: 0 calc(10 / 1140 * 100%);
        border-width: calc(4 / 1140 * 100vw);
    }

    .header_ttl {
        width: calc(355 / 1120 * 100%);
    }

    .header_logo {
        width: calc(200 / 355 * 100%);
        margin: calc(-12 / 355 * 100%) 0 0;
    }

    .header_date {
        width: calc(148 / 355 * 100%);
        margin: 0 0 0 auto;
        font-size: 1.5rem;
    }

    .header_twitter {
        width: calc(136 / 1120 * 100%);
        margin: 0 0 0 calc(10 / 1120 * 100%);
    }

    .header_twitter a {
        width: 100%;
        height: 100%;
        font-size: 1.8rem;
    }

    .header_twitter a::before {
        content: "";
        display: block;
        width: calc(24 / 136 * 100%);
        height: 100%;
        background: url(../images/common/btn_twitter_pc.png) no-repeat center center;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
    }

    .header_twitter a span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-weight: 700;
    }
}

@media screen and (min-width: 1140px) {
    .header_box {
        border-width: 4px;
    }

    .header_ttl {
        width: 355px;
    }

    .header_twitter {
        width: 136px;
    }
}

@media screen and (min-width: 1300px) {
    .header_box {
        padding: 0 50px;
    }
}


/* =====================================================================
*    nav
* =================================================================== */
.nav {
    padding: 0 0 calc(100 / 750 * 100%);
}

.nav_menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    background-color: #1B4667;
    position: fixed;
    bottom: 0;
    left: 0;
}

.fixed .nav_menu {
    position: absolute;
}

.nav_menu li a {
    padding: 1.25em 1em;
}

.nav_menu li a span {
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .nav {
        margin: 0 0 0 auto;
        padding: 0;
    }

    .nav_menu {
        position: relative;
        background-color: #fff;
    }

    .nav_menu li a {
        padding: 1.11em 0.8em;
        font-size: 1.8rem;
    }

    .nav_menu li a span::after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background-color: #1B4667;
        position: absolute;
        bottom: -0.2em;
        left: 0;
        opacity: 0;
        -webkit-transition: 0.5s ease;
        transition: 0.5s ease;
    }

    .nav_menu li a:hover span::after {
        opacity: 1;
    }

    .nav_menu li.current a span::after {
        opacity: 1;
    }
}

@media screen and (min-width: 1140px) {

}

@media screen and (min-width: 1300px) {
    .nav_menu li a {
        padding: 1.11em 1.4em;
    }
}


/* =====================================================================
*    subpage_header
* =================================================================== */
.subpage_header {
    padding: calc(69 / 750 * 100%) 0;
}

.subpage_box {
    position: relative;
    margin: 0 0 calc(60 / 750 * 100%);
    padding: calc(80 / 750 * 100%) calc(40 / 750 * 100%) calc(120 / 750 * 100%);
    background-color: #fff;
}

@media screen and (min-width: 768px) {
    .subpage_header {
        padding: calc(63 / 1140 * 100%) 0;
    }

    .subpage_box {
        margin: 0;
        padding: calc(80 / 1140 * 100%) 0 calc(120 / 1140 * 100%);
    }
}

@media screen and (min-width: 1140px) {
    .subpage_header {
        padding: 63px 0;
    }

    .subpage_box {
        margin: 0;
        padding: 80px 0 120px;
    }
}


/* =====================================================================
*    contents
* =================================================================== */
.contents_txt1 {
    padding: 1.4em 0;
}

.contents_txt1 p:not(:last-child) {
    margin: 0 0 1em;
}

.contents_txt1 .small {
    font-size: 80%;
}

.contents_txt1 strong {
    font-weight: 700;
}

.contents_txt1 a {
    display: inline;
    border-bottom: 1px solid;
}

.contents_txt_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: calc(18 / 750 * 100vw) 0;
    border-top: 1px solid;
}

.contents_tag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 0 0.5em 0 0;
}

.contents_tag li {
    margin: 0.1em 0.5em 0 0;
    padding: 0.25em 0.94em;
    background-color: #00c7b6;
    border-radius: 1em;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.contents_txt2 {
    color: #00c7b6;
    font-size: 2rem;
}

.contents_txt2 span::after {
    content: "｜";
}

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

.movie_wrap > iframe,
.movie_wrap .bc-player-default_default {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (min-width: 768px) {
    .contents_txt1 {
        padding: 2.6em 0;
    }

    .contents_txt1 .small {
        font-size: 86%;
        line-height: 1.429;
    }

    .contents_txt_box {
        margin: auto 0 0;
        padding: calc(14 / 1140 * 100vw) 0 0;
    }

    .contents_tag li {
        padding: 0.24em 1.1em;
        font-size: 1.4rem;
    }

    .contents_txt2 {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 1140px) {
    .contents_txt_box {
        padding: 14px 0 0;
    }
}


/* =====================================================================
*    footer
* =================================================================== */
.footer {
}

.pagetop {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    margin: calc(-160 / 750 * 100%) 0 0;
}

.pagetop a {
    width: 100%;
    padding-top: calc(60 / 750 * 100%);
    background: url(../images/common/btn_pagetop_sp.png) no-repeat center center;
    background-size: calc(46 / 750 * 100%) auto;
}

.pagetop a img {
    display: none;
}

.footer small {
    display: block;
    padding: 2.31em 0;
    background-color: #222;
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .footer {
        border-top: calc(4 / 1140 * 100vw) solid;
    }

    .pagetop {
        margin: calc(-50 / 1140 * 100%) 0 0;
    }

    .pagetop a {
        width: calc(100 / 1140 * 100%);
        margin: 0 calc(40 / 1600 * 100%) 0 auto;
        padding-top: 0;
        background: none;
        top: 0;
    }

    .pagetop a:hover {
        top: -1rem;
    }

    .pagetop a img {
        display: block;
    }
}

@media screen and (min-width: 1140px) {
    .footer {
        border-width: 4px;
    }

    .pagetop {
        margin: -50px 0 0;
    }

    .pagetop a {
        width: 100px;
    }
}