@charset "utf-8";

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


/*変数を格納*/

:root {
    --font_en: 'Concert One', cursive, sans-serif;
    --red: #e60012;
    --red2: #fff0f1;
    --red3: #f39fa6;
    --black: #231e25;
    --yellow: #fdff5d;
}


/* ********************************************************************
		共通
******************************************************************** */

html {
    font-size: calc(10 / 750 * 100vw);
    overflow-x: hidden;
}

.gDef-top-banner {
    position: relative;
    z-index: 2;
    background-color: var(--red);
}

.gDef-contents {
    background-color: #fff;
    color: var(--black);
    font-family: BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    font-size: 2.4rem;
    line-height: 2;
}

.set1,
.set1 * {
    position: relative;
}

.set1 img {
    width: 100%;
    height: auto;
    display: block;
}

.set1 a {
    color: var(--black);
    display: block;
}

.inner {
    width: calc(690 / 750 * 100%);
    margin: 0 auto;
    z-index: 2;
}

.sec_ttl {
    margin-bottom: calc(140 / 690 * 100%);
    text-align: center;
    letter-spacing: .05em;
}

.sec_ttl::before,
.sec_ttl::after {
    content: '';
    position: absolute;
    width: calc(83 / 690 * 100%);
    padding-top: calc(51 / 690 * 100%);
}

.sec_ttl::before {
    background: url(../images/common/ttl_deco1.png) no-repeat center/contain;
    top: 0;
    left: 0;
    margin: calc(-50 / 690 * 100%) 0 0 calc(385 / 690 * 100%);
}

.sec_ttl::after {
    background: url(../images/common/ttl_deco2.png) no-repeat center/contain;
    bottom: 0;
    right: 0;
    margin: 0 calc(385 / 690 * 100%) calc(-55 / 690 * 100%) 0;
}

.sec_ttl span {
    display: block;
    font-size: 8rem;
    font-family: var(--font_en);
    line-height: 1.1;
}

.sec_ttl small {
    display: block;
    color: #6b6b70;
    font-size: 1.6rem;
}

.btn1 {
    width: calc(480 / 690 * 100%);
    margin: calc(215 / 690 * 100%) auto 0;
    text-align: center;
}

.btn1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: url(../images/harry/harry2.png) no-repeat center/contain;
    width: calc(218 / 480 * 100%);
    padding-top: calc(211 / 480 * 100%);
    margin: calc(-175 / 480 * 100%) auto 0;
    z-index: -1;
}

.btn1 a {
    background-color: #fff;
    border: 1px solid #6b6b70;
    padding: 1.5em 1em;
    line-height: 1;
    letter-spacing: .05em;
}

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

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

    .gDef-contents {
        font-size: 1.6rem;
    }

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

    .inner {
        width: 100%;
        max-width: 1400px;
        padding: 0 calc(100 / 1400 * 100%);
    }

    .sec_ttl {
        margin-bottom: calc(140 / 1200 * 100%);
    }

    .sec_ttl::before,
    .sec_ttl::after {
        width: calc(86 / 1200 * 100%);
        padding-top: calc(51 / 1200 * 100%);
    }

    .sec_ttl::before {
        margin: calc(-50 / 1200 * 100%) 0 0 calc(640 / 1200 * 100%);
    }

    .sec_ttl::after {
        margin: 0 calc(640 / 1200 * 100%) calc(-55 / 1200 * 100%) 0;
    }

    .sp {
        display: none !important;
    }

    .btn1 {
        width: calc(240 / 1200 * 100%);
        margin-top: calc(120 / 1200 * 100%);
    }

    .btn1::before {
        width: calc(105 / 240 * 100%);
        padding-top: calc(101 / 240 * 100%);
        margin: calc(-80 / 240 * 100%) auto 0;
    }

    .btn1 a {
        font-size: 1.4rem;
        padding: calc(18 / 240 * 100%) 0;
    }

    .btn1 a:hover {
        background-color: #000;
        color: #fff;
    }
}

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

    .inner {
        padding: 0 100px;
    }
}


/* ********************************************************************
	MV
******************************************************************** */

.submv {
    /* padding-top: calc(264 / 750 * 100%);
    background-color: #fff; */
    padding-top: calc(424 / 750 * 100%);
    background-color: #787c86;
    overflow: hidden;
}

.submv::before,
.submv::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, right top, from(rgb(45, 48, 55)), to(rgba(45, 48, 55, 0)));
    background-image: linear-gradient(to right, rgb(45, 48, 55), rgba(45, 48, 55, 0));
}

.submv::after {
    right: 0;
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
}


.submv .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.submv .inner::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    /* background: url(../images/common/img_submv_sp.jpg) no-repeat center/cover; */
    background: url(../images/common/img_submv.png) no-repeat center bottom/contain;
    width: 100%;
    padding-top: calc(351/750 *100%);
    z-index: 3;
    margin: 0 auto;
}

.submv .inner>* {
    z-index: 2;
}

.submv_ttl {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    /* width: calc(335 / 750 * 100%); */
    width: 100%;
    /* margin: calc(80 / 750 * 100%) calc(18 / 750 * 100%) 0 0;*/
    margin: calc(-2 / 750 * 100%) 0 0;
}


.submv_date {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(585 / 750 * 100%);
    /* margin: calc(142 / 750 * 100%) calc(18 / 750 * 100%) 0 0; */

    /* ↓バナー追加時 */
    margin: calc(257 / 750 * 100%) calc(80/750 *100%) 0;
    /* ↓バナーない時 */
    /* margin: calc(340 / 750 * 100%) calc(80/750 *100%) 0; */
    z-index: 4 !important;
}

@media screen and (min-width: 768px) {
    .submv {
        /* padding-top: calc(359 / 1400 * 100%); */
        padding-top: calc(424 / 1400 * 100%);
    }

    .submv .inner {
        max-width: 1200px;
        width: calc(1200 / 1400 * 100%);
    }

    .submv .inner::before {
        width: calc(750 / 1200 * 100%);
        padding-top: calc(351/1200 *100%);
        margin: 0 calc(225/1200 *100%);
        /* background-image: url(../images/common/img_submv.png); */
    }

    .submv_ttl {
        /* width: calc(595 / 1200 * 100%); */
        width: calc(750 / 1200 * 100%);
        /* margin: calc(81 / 1200 * 100%) calc(48 / 1200 * 100%) 0 0; */
        margin: calc(-2 / 1200 * 100%) auto 0;
    }

    .submv_date {
        /* width: calc(491 / 1200 * 100%); */
        width: calc(585 / 1200 * 100%);
        /* margin: calc(185 / 1200 * 100%) calc(86 / 1200 * 100%) 0 0; */

        /* ↓バナー追加時 */
        margin: calc(275 / 1200 * 100%) calc(307 / 1200 * 100%) 0;
        /* ↓バナーない時 */
        /* margin: calc(345 / 1200 * 100%) calc(307 / 1200 * 100%) 0; */
    }
}

@media screen and (min-width: 1400px) {
    .submv {
        /* padding-top: 359px; */
        padding-top: 424px;
    }
}


/* ********************************************************************
	header
******************************************************************** */

.header {
    background-color: var(--red);
}

.mv_banner {
    padding: calc(34 / 750 * 100%) 0;
    background-color: var(--red3);
}

.gDef-wrapper:not(#top) .mv_banner {
    padding: 0;
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    margin: calc(330 / 750 * 100%) auto 0;
    z-index: 2;
}

.mv_banner_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.mv_banner_list li {
    width: calc(240 / 750 * 100%);
    margin: 0 calc(40 / 750 * 100%);
}

.nav_menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 calc(50% - 50vw);
}

.nav_menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 1px;
    background-color: #b3000f;
}

.nav_menu li {
    text-align: center;
    width: calc(187 / 750 * 100%);
    border-right: 1px solid #b3000f;
}

.nav_menu li.nolink,
.nav_menu li.cs {
    pointer-events: none;
}

.nav_menu li.nolink a {
    opacity: 0.5;
}

.nav_menu li.cs::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: url(../images/common/img_nav_cs.png) no-repeat center/contain;
    width: calc(62 / 750 * 100vw);
}

.nav_menu li.cs a {
    visibility: hidden;
}

@media screen and (max-width: 767px) {
    .nav_cast a {
        padding: 0 !important;
    }

    .nav_menu li {
        margin: 1.3em 0;
    }

    .nav_menu li:nth-child(n+5) {
        max-width: calc(148 / 750 * 100%);
    }

    .nav_menu li:nth-child(4),
    .nav_menu li:last-child {
        border-right: 0;
    }
}

.nav_menu li a {
    padding: .5em 0;
    line-height: 1;
    height: 100%;
}

.nav_menu li a>span {
    display: block;
    color: #fff;
    font-family: var(--font_en);
    font-size: 3rem;
    letter-spacing: .1em;
    margin-bottom: .4em;
}

.nav_menu li a>small {
    color: #fff;
    font-size: 1.8rem;
    letter-spacing: -.02rem;
}

.nav_date {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: -2.2em auto 0;
    text-align: center;
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.nav_date span {
    display: inline-block;
    white-space: nowrap;
    padding: .5em 1.3em;
    background-color: var(--yellow);
    font-size: 1.8rem;
    font-family: var(--font_en);
    font-weight: 400;
    letter-spacing: -.1rem;
    line-height: 1;
}

.nav_date span::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .6em .4em 0 .4em;
    border-color: var(--yellow) transparent transparent transparent;
    margin-bottom: -.55em;
}

@media screen and (min-width: 768px) {
    .mv_banner_list li a:hover {
        -webkit-transform: scale(1.1) rotate(4deg);
        transform: scale(1.1) rotate(4deg);
    }

    .gDef-wrapper:not(#top) .mv_banner {
        padding: 0;
        background-color: transparent;
        position: absolute;
        top: 0;
        right: 0;
        width: calc(680 / 1400 * 100%);
        max-width: 680px;
        /* margin: calc(265 / 1400 * 100%) calc(100 / 1400 * 100%) 0 0; */
        margin: calc(345 / 1400 * 100%) calc(360 / 1400 * 100%) 0;
        z-index: 2;
    }

    .gDef-wrapper:not(#top) .mv_banner_list li {
        width: calc(240 / 680 * 100%);
        margin: 0 calc(40 / 680 * 100%);
    }

    .nav_menu {
        padding: calc(10 / 1200 * 100%) 0;
        margin: 0;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .nav_menu li {
        width: calc(133 / 1200 * 100%);
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

    .nav_menu li:first-child {
        border-left: 1px solid #b3000f;
    }

    .nav_menu::before {
        display: none;
    }

    .nav_menu li a {
        padding: 1.2em 0;
    }

    .nav_menu li a::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        background: url(../images/common/nav_h.png) no-repeat center/contain;
        width: calc(63 / 150 * 100%);
        padding-top: calc(63 / 150 * 100%);
        -webkit-transition: 0.3s linear;
        transition: 0.3s linear;
        opacity: 0;
    }

    .nav_menu li a:hover::before {
        opacity: 1;
    }

    .nav_menu li a>span {
        font-size: 2rem;
        margin-bottom: .2em;
    }

    .nav_menu li a>small {
        font-size: 1.2rem;
    }

    .nav_menu li a:hover::before {
        width: 100%;
    }

    .nav_menu li.cs::before {
        width: calc(45 / 1400 * 100vw);
        max-width: 45px;
    }

    .nav_date {
        margin: -.5em auto 0;
    }

    .nav_date span {
        padding: .3em .8em;
        font-size: 1.2rem;
        letter-spacing: 0rem;
        margin-top: -1em;
    }
}

@media screen and (min-width: 1400px) {
    .gDef-wrapper:not(#top) .mv_banner {
        left: 0;
        /* margin: 265px 0 0 calc(50vw - 80px); */
        margin: 345px auto 0;
    }
}


/* =====================================================================
*    banner
* =================================================================== */

.banner_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.banner_list li {
    width: calc(600 / 690 * 100%);
}

.banner_list li:not(:last-child) {
    margin-bottom: calc(20 / 690 * 100%);
}

.banner_list_2 li {
    margin-bottom: calc(20 / 690 * 100%);
}


@media screen and (min-width: 768px) {
    .banner_list li {
        width: calc(400 / 1200 * 100%);
        margin: 0 calc(35 / 1200 * 100%) !important;
    }

    .banner_list li a {
        top: 0;
    }

    .banner_list li a:hover {
        top: -5px;
    }

    .banner_list_2 li {
        width: calc(500 / 1200 * 100%);
        margin: 0 calc(35 / 1200 * 100%) calc(20 / 690 * 100%)!important;
    }

}

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


/* =====================================================================
*    bg_fadeIn
* =================================================================== */

.bg_fadeIn {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
}

.bg_fadeIn_item {
    position: absolute;
    top: 0;
    width: calc(44 / 750 * 100%);
    padding-top: calc(44 / 750 * 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-animation: a-rotateY 6s linear infinite both;
    animation: a-rotateY 6s linear infinite both;
}

.bg_fadeIn_item.gun1 {
    background-image: url(../images/common/bg_icon_gun1.png);
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.bg_fadeIn_item.gun2 {
    background-image: url(../images/common/bg_icon_gun2.png);
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.bg_fadeIn_item.aim {
    background-image: url(../images/common/bg_icon_aim.png);
}

.bg_fadeIn_item.heart1 {
    background-image: url(../images/common/bg_icon_heart1.png);
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.bg_fadeIn_item.heart2 {
    background-image: url(../images/common/bg_icon_heart2.png);
}

.item1 {
    right: 0;
    margin: calc(100 / 750 * 100%) calc(25 / 750 * 100%) 0 0;
}

.item2 {
    left: 0;
    margin: calc(180 / 750 * 100%) 0 0 calc(39 / 750 * 100%);
}

.item3 {
    right: 0;
    margin: calc(250 / 750 * 100%) calc(270 / 750 * 100%) 0 0;
}

.item4 {
    left: 0;
    margin: calc(400 / 750 * 100%) 0 0 calc(122 / 750 * 100%);
}

.item5 {
    right: 0;
    margin: calc(500 / 750 * 100%) calc(100 / 750 * 100%) 0 0;
}

.item6 {
    left: 0;
    margin: calc(700 / 750 * 100%) 0 0 calc(160 / 750 * 100%);
}

.item7 {
    right: 0;
    margin: calc(850 / 750 * 100%) calc(40 / 750 * 100%) 0 0;
}

.item8 {
    left: 0;
    margin: calc(900 / 750 * 100%) 0 0 calc(57 / 750 * 100%);
}

.item9 {
    right: 0;
    margin: calc(1100 / 750 * 100%) calc(300 / 750 * 100%) 0 0;
}

@-webkit-keyframes a-rotateY {
    0% {
        -webkit-transform: translateY(300%) rotateY(0);
        transform: translateY(300%) rotateY(0);
        opacity: 0
    }

    35% {
        opacity: 1
    }

    70% {
        -webkit-transform: translateY(-300%) rotateY(1080deg);
        transform: translateY(-300%) rotateY(1080deg);
        opacity: 0
    }

    300% {
        -webkit-transform: translateY(-300%) rotateY(1080deg);
        transform: translateY(-300%) rotateY(1080deg);
        opacity: 0;
    }
}

@keyframes a-rotateY {
    0% {
        -webkit-transform: translateY(300%) rotateY(0);
        transform: translateY(300%) rotateY(0);
        opacity: 0
    }

    35% {
        opacity: 1
    }

    70% {
        -webkit-transform: translateY(-300%) rotateY(1080deg);
        transform: translateY(-300%) rotateY(1080deg);
        opacity: 0
    }

    100% {
        -webkit-transform: translateY(-300%) rotateY(1080deg);
        transform: translateY(-300%) rotateY(1080deg);
        opacity: 0;
    }
}

@media screen and (min-width: 768px) {
    .bg_fadeIn {
        right: 0;
        max-width: 1920px;
        margin: auto;
    }

    .bg_fadeIn_item {
        width: calc(44 / 1400 * 100%);
        max-width: 44px;
        padding-top: calc(44 / 1400 * 100%);
    }

    .item1 {
        margin: calc(100 / 1920 * 100%) calc(100 / 1920 * 100%) 0 0;
    }

    .item2 {
        margin: calc(180 / 1920 * 100%) 0 0 calc(39 / 1920 * 100%);
    }

    .item3 {
        margin: calc(300 / 1920 * 100%) calc(800 / 1920 * 100%) 0 0;
    }

    .item4 {
        margin: calc(400 / 1920 * 100%) 0 0 calc(122 / 1920 * 100%);
    }

    .item5 {
        margin: calc(600 / 1920 * 100%) calc(400 / 1920 * 100%) 0 0;
    }

    .item6 {
        margin: calc(820 / 1920 * 100%) 0 0 calc(160 / 1920 * 100%);
    }

    .item7 {
        margin: calc(750 / 1920 * 100%) calc(40 / 1920 * 100%) 0 0;
    }

    .item8 {
        margin: calc(1200 / 1920 * 100%) 0 0 calc(100 / 1920 * 100%);
    }

    .item9 {
        margin: calc(1400 / 1920 * 100%) calc(700 / 1920 * 100%) 0 0;
    }
}

@media screen and (min-width: 1400px) {
    .bg_fadeIn_item {
        padding-top: 44px;
    }
}


/* =====================================================================
*    footer
* =================================================================== */

#footer {
    background-color: var(--yellow);
}

#footer .inner {
    padding-top: calc(60 / 690 * 100%);
    padding-bottom: calc(120 / 690 * 100%);
}

.footer_banner {
    margin-bottom: calc(80 / 690 * 100%);
}

.footer_sns {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.footer_sns li {
    width: calc(45 / 690 * 100%);
    margin: 0 calc(25 / 690 * 100%);
}

.pagetop {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 100;
    width: calc(100 / 750 * 100%);
    margin: 0 calc(30 / 750 * 100%) calc(130 / 750 * 100%) 0;
    -webkit-transition: 500ms;
    transition: 500ms;
}

.pagetop.fixed {
    position: fixed;
    margin-bottom: calc(30 / 750 * 100%);
}

.follow_sns {
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: calc(200 / 670 * 100vh) calc(15 / 750 * 100%) 0 0;
    -webkit-transition: 500ms;
    transition: 500ms;
}

.pagetop.show,
.follow_sns.show {
    opacity: 1;
    pointer-events: auto;
}

.follow_sns.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

.follow_sns h3 {
    font-size: 2rem;
    font-family: var(--font_en);
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.follow_sns_list {
    padding-top: calc(130 / 750 * 100vw);
    margin-top: calc(20 / 750 * 100vw);
}

.follow_sns_list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1px;
    height: calc(100 / 750 * 100vw);
    background-color: var(--black);
}

.follow_sns_list li {
    width: calc(41 / 750 * 100vw);
    margin-bottom: calc(37 / 750 * 100vw);
}

.copyright {
    padding: calc(50 / 750 * 100%) 0;
    background-color: var(--red);
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
    font-family: var(--font_en);
}


/* ページトップ　アニメーション */

@-webkit-keyframes poyon {
    0% {
        -webkit-transform: scale(0.8, 1.4) translate(0%, -50%);
        transform: scale(0.8, 1.4) translate(0%, -50%);
    }

    10% {
        -webkit-transform: scale(0.8, 1.4) translate(0%, -15%);
        transform: scale(0.8, 1.4) translate(0%, -15%);
    }

    20% {
        -webkit-transform: scale(1.4, 0.6) translate(0%, 30%);
        transform: scale(1.4, 0.6) translate(0%, 30%);
    }

    30% {
        -webkit-transform: scale(0.9, 1.1) translate(0%, -10%);
        transform: scale(0.9, 1.1) translate(0%, -10%);
    }

    40% {
        -webkit-transform: scale(0.95, 1.2) translate(0%, -30%);
        transform: scale(0.95, 1.2) translate(0%, -30%);
    }

    50% {
        -webkit-transform: scale(0.95, 1.2) translate(0%, -10%);
        transform: scale(0.95, 1.2) translate(0%, -10%);
    }

    60% {
        -webkit-transform: scale(1.1, 0.9) translate(0%, 5%);
        transform: scale(1.1, 0.9) translate(0%, 5%);
    }

    70% {
        -webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }

    100% {
        -webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }
}

@keyframes poyon {
    0% {
        -webkit-transform: scale(0.8, 1.4) translate(0%, -50%);
        transform: scale(0.8, 1.4) translate(0%, -50%);
    }

    10% {
        -webkit-transform: scale(0.8, 1.4) translate(0%, -15%);
        transform: scale(0.8, 1.4) translate(0%, -15%);
    }

    20% {
        -webkit-transform: scale(1.4, 0.6) translate(0%, 30%);
        transform: scale(1.4, 0.6) translate(0%, 30%);
    }

    30% {
        -webkit-transform: scale(0.9, 1.1) translate(0%, -10%);
        transform: scale(0.9, 1.1) translate(0%, -10%);
    }

    40% {
        -webkit-transform: scale(0.95, 1.2) translate(0%, -30%);
        transform: scale(0.95, 1.2) translate(0%, -30%);
    }

    50% {
        -webkit-transform: scale(0.95, 1.2) translate(0%, -10%);
        transform: scale(0.95, 1.2) translate(0%, -10%);
    }

    60% {
        -webkit-transform: scale(1.1, 0.9) translate(0%, 5%);
        transform: scale(1.1, 0.9) translate(0%, 5%);
    }

    70% {
        -webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }

    100% {
        -webkit-transform: scale(1.0, 1.0) translate(0%, 0%);
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }
}

@media screen and (min-width: 768px) {
    #footer .inner {
        padding-top: calc(60 / 1400 * 100%);
        padding-bottom: calc(100 / 1400 * 100%);
    }

    .pagetop {
        width: calc(100 / 1400 * 100%);
        margin: 0 calc(30 / 1400 * 100%) calc(130 / 1400 * 100%) 0;
        -webkit-transition: .3s ease;
        transition: .3s ease;
    }

    .pagetop:hover img {
        -webkit-animation: poyon 1.1s linear 0s 1;
        animation: poyon 1.1s linear 0s 1;
    }

    .pagetop.fixed {
        margin-bottom: calc(30 / 1400 * 100%);
    }

    .follow_sns {
        margin: 10vh calc(70 / 1400 * 100%) 0 0;
    }

    .follow_sns h3 {
        font-size: 1.6rem;
    }

    .follow_sns_list {
        padding-top: calc(60 / 1400 * 100vw);
        margin-top: calc(20 / 1400 * 100vw);
    }

    .follow_sns_list::before {
        height: calc(40 / 1400 * 100vw);
        max-height: 40px;
    }

    .follow_sns_list li {
        width: calc(25 / 1400 * 100vw);
        max-width: 25px;
        margin-bottom: calc(30 / 1400 * 100vw);
    }

    .follow_sns_list li a::before {
        opacity: 0;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: .3s;
        transition: .3s;
    }

    .follow_sns_list li:nth-child(1) a::before {
        background: url(../images/common/btn_sns1_h.png) no-repeat center/contain;
    }

    .follow_sns_list li:nth-child(2) a::before {
        background: url(../images/common/btn_sns2_h.png) no-repeat center/contain;
    }

    .follow_sns_list li:nth-child(3) a::before {
        background: url(../images/common/btn_sns3_h.png) no-repeat center/contain;
    }

    .follow_sns_list li:nth-child(4) a::before {
        background: url(../images/common/btn_sns5_h.png) no-repeat center/contain;
    }

    .follow_sns_list li a:hover::before {
        opacity: 1;
    }

    .follow_sns_list li a img {
        -webkit-transition: .3s;
        transition: .3s;
    }

    .follow_sns_list li a:hover img {
        opacity: 0;
    }

    .footer_banner {
        margin-bottom: calc(41 / 1200 * 100%);
    }

    .footer_sns li {
        width: calc(25 / 1200 * 100%);
        margin: 0 calc(15 / 1200 * 100%);
    }

    .footer_sns li a::before {
        opacity: 0;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-transition: .3s;
        transition: .3s;
    }

    .footer_sns li a img {
        -webkit-transition: .3s;
        transition: .3s;
    }

    .footer_sns li a:hover img {
        opacity: 0;
    }

    .footer_sns li:nth-child(1) a::before {
        background: url(../images/common/btn_sns1_h.png) no-repeat center/contain;
    }

    .footer_sns li:nth-child(2) a::before {
        background: url(../images/common/btn_sns2_h.png) no-repeat center/contain;
    }

    .footer_sns li:nth-child(3) a::before {
        background: url(../images/common/btn_sns3_h.png) no-repeat center/contain;
    }

    .footer_sns li:nth-child(4) a::before {
        background: url(../images/common/btn_sns5_h.png) no-repeat center/contain;
    }

    .footer_sns li a:hover::before {
        opacity: 1;
    }

    .copyright {
        padding: calc(50 / 1400 * 100%) 0;
    }
}

@media screen and (min-width: 1400px) {
    #footer .inner {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .copyright {
        padding: 50px 0;
    }

    .pagetop {
        width: 112px;
        margin: -340px 30px 0 0;
        width: 100px;
        margin: 0 30px 130px 0;
    }

    .pagetop.fixed {
        margin-bottom: 30px;
    }

    .follow_sns {
        margin-right: 70px;
    }

    .follow_sns_list {
        padding-top: 60px;
        margin-top: 20px;
    }

    .follow_sns_list li {
        margin-bottom: 30px;
    }
}


/* =====================================================================
*    youtube_popup
* =================================================================== */

.yt_wrapper {
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 120000;
    display: none;
    cursor: pointer;
}

.yt_wrapper .return_box {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.yt_wrapper .yt_movie_wrap {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

.yt_wrapper .yt_movie_wrap .yt_movie {
    width: 100%;
    padding-top: 56.25%;
    position: relative;
}

.yt_wrapper .yt_movie_wrap .yt_movie video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.yt_wrapper .yt_movie_wrap .yt_movie iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.vjs-icon-placeholder {
    display: block;
    margin: -1em 0 0;
    position: static;
}

.yt_wrapper .btn2 {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(55 / 750 * 100%);
    margin: calc(-60 / 750 * 100%) calc(5 / 750 * 100%) 0 0;
    z-index: 110;
}

.yt_wrapper .btn2 a::before,
.yt_wrapper .btn2 a::after {
    content: "";
    display: block;
    width: 1px;
    padding-top: 100%;
    background-color: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0 auto;
}

.yt_wrapper .btn2 a::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media screen and (min-width: 768px) {
    .yt_wrapper .yt_movie_wrap {
        width: calc(800 / 1400 * 100%);
    }

    .yt_wrapper .btn2 {
        width: calc(55 / 800 * 100%);
        margin: calc(-60 / 800 * 100%) calc(5 / 800 * 100%) 0 0;
    }

    .yt_wrapper .btn2 a::before,
    .yt_wrapper .btn2 a::after {
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .yt_wrapper .btn2 a:hover:before,
    .yt_wrapper .btn2 a:hover:after {
        background-color: var(--red);
    }
}

@media screen and (min-width: 1400px) {
    .yt_wrapper .yt_movie_wrap {
        width: 800px;
    }
}