@charset 'UTF-8';
/*************************************/
@-webkit-keyframes line_loop
{
    0%
    {
        background-position: 0 0;
    }
    to
    {
        background-position: -1600px 0;
    }
}
@keyframes line_loop
{
    0%
    {
        background-position: 0 0;
    }
    to
    {
        background-position: -1600px 0;
    }
}

@-webkit-keyframes header_bg
{
    1%
    {
        background-position: bottom right;
    }
    49%
    {
        background-position: bottom left;
    }
    51%
    {
        background-position: bottom left;
    }
    99%
    {
        background-position: bottom right;
    }
}

@keyframes header_bg
{
    1%
    {
        background-position: bottom right;
    }
    49%
    {
        background-position: bottom left;
    }
    51%
    {
        background-position: bottom left;
    }
    99%
    {
        background-position: bottom right;
    }
}

@-webkit-keyframes in_contents
{
    0%
    {
        -webkit-transform: translateY(20px);
                transform: translateY(20px);

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

        opacity: 0;
    }
    to
    {
        -webkit-transform: translateY(0);
                transform: translateY(0);

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        opacity: 1;
    }
}

@keyframes in_contents
{
    0%
    {
        -webkit-transform: translateY(20px);
                transform: translateY(20px);

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

        opacity: 0;
    }
    to
    {
        -webkit-transform: translateY(0);
                transform: translateY(0);

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

        opacity: 1;
    }
}

@-webkit-keyframes opacity
{
    0%
    {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    to
    {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

@keyframes opacity
{
    0%
    {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
    }
    to
    {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
    }
}

/*************************************/
body
{
    font-family: YakuHanJP, 'Noto Sans JP','Helvetica Neue', '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;

    letter-spacing: .1em;

    background: url(/assets/img/common/bg.jpg) top left;
}

.l-wrapper
{
    overflow: hidden;

    -webkit-animation: opacity 1s cubic-bezier(.5, 1, .89, 1) .5s forwards;

            animation: opacity 1s cubic-bezier(.5, 1, .89, 1) .5s forwards;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    opacity: 0;
}

.l-wrapper::before
{
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;

    width: 100%;
    height: 20px;

    content: '';
    -webkit-animation: line_loop 70s linear infinite;
            animation: line_loop 70s linear infinite;

    background: url(/assets/img/common/line.jpg) repeat-x;
    background-size: contain;
}

.l-header
{
    position: fixed;
    top: 20px;

    overflow: hidden;

    width: 300px;
    height: calc(100% - 20px);
}

.l-header .l-in_logo
{
    position: absolute;
    top: 25px;
    right: 30px;

    width: 240px;
}

nav
{
    position: fixed;
    z-index: 100;
}

nav .l-nav
{
    position: fixed;

    display: none;

    width: 100%;
    height: 100%;
}

nav .l-nav__bg
{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #fff;
}

nav .l-nav__flex
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

nav .l-nav__visual
{
    position: relative;

    width: 300px;
    height: 100vh;

    border-right: #ed1c24 2px solid;
    background: url(/assets/img/common/bg.jpg) top center;
}

nav .l-nav__visual img
{
    position: absolute;
    top: 50%;

    width: 82%;
    margin-left: 8%;

    -webkit-transform: translateY(-50%);

            transform: translateY(-50%);
}

nav .l-nav__content
{
    position: absolute;
    top: 49%;

    width: calc(100% - 300px);
    margin-right: 60px;
    margin-left: 300px;
    padding: 0 5% 0 6%;

    -webkit-transform: translateY(-50%);

            transform: translateY(-50%);
}

nav .l-nav__content .l-nav__list
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;

        flex-wrap: wrap;
}

nav .l-nav__content .l-nav__list .menu_item
{
    width: 30%;
    margin-top: 30px;

    -webkit-transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;

    transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;
}

nav .l-nav__content .l-nav__list .menu_item:hover
{
    -webkit-transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;
    transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

    opacity: .7;
}

nav .l-nav__content .l-nav__list a
{
    font-family: 'Roboto', sans-serif;
    font-size: 28px;
    font-weight: 700;

    text-decoration: none;

    color: #ed1c24;
}

nav .l-nav__content .l-nav__sns
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    margin-top: 60px;
}

nav .l-nav__content .l-nav__sns .share_cap
{
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    font-weight: 700;

    padding-top: 3px;

    color: #ed1c24;
}

nav .l-nav__content .l-nav__sns .share_list
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

nav .l-nav__content .l-nav__sns .share_list > li
{
    width: 30px;
    margin-left: 18px;

    -webkit-transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;

    transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;
}

nav .l-nav__content .l-nav__sns .share_list > li:first-child
{
    margin-left: 30px;
}

nav .l-nav__content .l-nav__sns .share_list > li:hover
{
    -webkit-transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;
    transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

    opacity: .7;
}

nav .l-nav_btnarea
{
    position: fixed;
    top: 0;
    right: 0;

    width: 60px;
    height: 100%;

    background: #ed1c24;
}

nav .l-nav_btn
{
    position: fixed;
    z-index: 120;
    top: 50%;
    right: 0;

    width: 60px;
    height: 60px;

    cursor: pointer;
    -webkit-transition: all .4s cubic-bezier(.25, .46, .45, .94) 0s;
    transition: all .4s cubic-bezier(.25, .46, .45, .94) 0s;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);

    border-radius: 100px;
    background-size: contain;
}

nav .l-nav_btn:hover
{
    -webkit-transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;
    transition: all .2s cubic-bezier(.25, .46, .45, .94) 0s;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

    opacity: .7;
}

nav .l-nav_btn.nav_open
{
    -webkit-transition: all .4s cubic-bezier(.25, .46, .45, .94) 0s;
    transition: all .4s cubic-bezier(.25, .46, .45, .94) 0s;

    background-color: white;
}

nav .l-nav_close_btn
{
    position: fixed;
    z-index: 120;
    top: -10px;
    left: 50%;

    width: 100px;
    height: 76px;

    -webkit-transform: translate(-50%, 0%);

            transform: translate(-50%, 0%);

    background-color: rgba(0, 0, 0, 0);
}

nav .l-nav_btn__inner
{
    position: relative;
    top: 18px;

    display: inline-block;

    -webkit-box-sizing: border-box;

            box-sizing: border-box;
    width: 24px;
    height: 20px;

    -webkit-transition: all .4s;

    transition: all .4s;
}

nav .l-nav_btn__inner span
{
    position: absolute;
    left: 17px;

    display: inline-block;

    -webkit-box-sizing: border-box;

            box-sizing: border-box;
    width: 100%;
    height: 2px;

    -webkit-transition: all .4s;

    transition: all .4s;

    border-radius: 1px;
    background-color: #fff;
}

nav .l-nav_btn__inner span:nth-of-type(1)
{
    top: 0;
}

nav .l-nav_btn__inner span:nth-of-type(2)
{
    top: 9px;
}

nav .l-nav_btn__inner span:nth-of-type(3)
{
    bottom: 0;
}

nav .l-nav_btn__inner.nav_open span:nth-of-type(1)
{
    -webkit-transform: translateY(9px) rotate(-45deg);
            transform: translateY(9px) rotate(-45deg);
}

nav .l-nav_btn__inner.nav_open span:nth-of-type(2)
{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
}

nav .l-nav_btn__inner.nav_open span:nth-of-type(3)
{
    -webkit-transform: translateY(-9px) rotate(45deg);
            transform: translateY(-9px) rotate(45deg);
}

/*****************************************/
.l-footer
{
    font-size: 12px;

    position: relative;

    width: calc(100% - 360px);
    margin: 170px 60px 0 300px;
    padding: 0 7% 0 7.5%;

    text-align: center;

    background: #fff;
}

.l-footer::before
{
    position: absolute;
    top: -20px;
    left: 0;

    width: 100%;
    height: 20px;

    content: '';
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    -webkit-animation: line_loop 70s linear infinite;
            animation: line_loop 70s linear infinite;

    background: url(/assets/img/common/line.jpg) repeat-x;
    background-size: contain;
}

.l-footer_inner
{
    padding: 50px 0;
}

.l-footer_link
{
    font-size: 0;

    text-align: center;
    letter-spacing: -.04em;
}

.l-footer_link li
{
    font-size: 12px;

    position: relative;

    display: inline-block;

    margin-right: 18px;
    padding-right: 8px;

    letter-spacing: normal;
}

.l-footer_link li a
{
    -webkit-transition: all .3s cubic-bezier(.33, 1, .68, 1) 0s;
    transition: all .3s cubic-bezier(.33, 1, .68, 1) 0s;
    text-decoration: none;

    color: #000;
}

.l-footer_link li a:hover
{
    -webkit-transition: all .3s cubic-bezier(.33, 1, .68, 1) 0s;
    transition: all .3s cubic-bezier(.33, 1, .68, 1) 0s;

    color: #ed1c24;
}

.l-footer_link li::after
{
    position: absolute;
    top: 51%;
    right: -6px;

    width: 1px;
    height: 60%;

    content: '';
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    background: #000;
}

.l-footer_link li:last-child::after
{
    content: '';

    background: transparent;
}

.l-footer_legal
{
    margin-top: 8px;
}

.l-footer_copy
{
    margin-top: 16px;
}

/*************************************/
.l-in_wrap
{
    min-height: 85vh;
    margin: 100px 60px 0 300px;
    padding: 0 7% 0 7.5%;
}

.l-in_ttl
{
    margin-bottom: 70px;

    -webkit-animation: in_contents .5s cubic-bezier(.5, 1, .89, 1) .5s forwards;

            animation: in_contents .5s cubic-bezier(.5, 1, .89, 1) .5s forwards;
    text-align: center;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    opacity: 0;
}

.l-in_ttl h2
{
    font-family: 'Roboto', sans-serif;
    font-size: 42px;
    font-weight: 700;

    position: relative;

    display: inline-block;

    padding: 12px 24px 10px 29px;

    color: #fff;
    background: #ed1c24;
}

.l-in_ttl h2::before
{
    position: absolute;
    top: 0;
    left: -50px;

    width: 50px;
    height: 100%;

    content: '';

    background: url(/assets/img/common/deco_l.png) no-repeat;
    background-size: cover;
}

.l-in_ttl h2::after
{
    position: absolute;
    top: 0;
    right: -50px;

    width: 50px;
    height: 100%;

    content: '';

    background: url(/assets/img/common/deco_r.png) no-repeat;
    background-size: cover;
}

.l-in_ttl h2 p::before
{
    position: absolute;
    z-index: 10;
    top: 15px;
    left: 3px;

    width: 16px;
    height: 16px;

    content: '';

    background: url(/assets/img/common/icon_hexa.png) no-repeat;
    background-size: contain;
}

.l-in_ttl h2 p::after
{
    position: absolute;
    z-index: 10;
    top: 15px;
    right: 0;

    width: 16px;
    height: 16px;

    content: '';

    background: url(/assets/img/common/icon_hexa.png) no-repeat;
    background-size: contain;
}

.l-in_ttl .ruby
{
    font-size: 0;

    margin-top: 10px;

    text-align: center;
    letter-spacing: -.04em;

    color: #fff;
}

.l-in_ttl .ruby li
{
    font-size: 13px;

    display: inline-block;

    width: 25px;
    height: 25px;
    margin-left: 4px;
    padding: 0 2px 3px 0;

    letter-spacing: normal;

    border-radius: 50%;
    background: #ed1c24;
}

.l-in_ttl .ruby li:first-child
{
    margin-left: 0;
}

/*************************************/
.modal
{
    position: absolute;
    z-index: 8000;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transition: opacity .4s cubic-bezier(.455, .03, .515, .955);

    transition: opacity .4s cubic-bezier(.455, .03, .515, .955);
    pointer-events: none;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    opacity: 0;
}

.modal.active
{
    pointer-events: auto;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    opacity: 1 !important;
}

.modal_bg
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

    opacity: .8;
    background: #ee1c25;
}

.modal_item
{
    position: absolute;
    left: 50%;

    width: 60%;

    -webkit-transform: translateX(-50%);

            transform: translateX(-50%);
}

.modal_item_in .player
{
    position: relative;

    width: 100%;
    padding-top: 56.25%;
}

.modal_item_in iframe
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.modal_close
{
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;

    width: 80px;
    height: 80px;

    cursor: pointer;

    background: #fff;
}

.modal_close span
{
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 50%;
    height: 1px;

    -webkit-transition: all .5s ease;

    transition: all .5s ease;

    background: #ee1c25;
}

.modal_close span:first-of-type
{
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
}

.modal_close span:nth-of-type(2)
{
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width: 767px)
{
    body
    {
        font-size: 13px;

        background-size: 20%;
    }
    .l-wrapper::before
    {
        display: none;
    }
    .l-header
    {
        position: relative;
        top: 0;

        width: 100%;
    }
    .l-header .l-in_logo
    {
        position: absolute;
        top: 52px;
        right: 12px;

        width: 32%;
    }
    nav .l-nav__flex
    {
        display: block;
    }
    nav .l-nav__visual
    {
        display: none;
    }
    nav .l-nav__content
    {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding: 0 0 0 10%;
    }
    nav .l-nav__content .l-nav__list
    {
        display: block;
    }
    nav .l-nav__content .l-nav__list .menu_item
    {
        width: 100%;
        margin-top: 15px;
        margin-left: 0;
    }
    nav .l-nav__content .l-nav__list a
    {
        font-size: 20px;
    }
    nav .l-nav__content .l-nav__sns
    {
        margin-top: 40px;
    }
    nav .l-nav__content .l-nav__sns .share_cap
    {
        font-size: 15px;

        padding-top: 3px;
    }
    nav .l-nav__content .l-nav__sns .share_list > li
    {
        width: 24px;
        margin-left: 15px;
    }
    nav .l-nav__content .l-nav__sns .share_list > li:first-child
    {
        margin-left: 20px;
    }
    nav .l-nav_btn
    {
        top: 24px;
        right: -5px;
    }
    nav .l-nav_btnarea
    {
        position: fixed;
        top: 0;
        right: 0;

        width: 52px;
        height: 50px;
    }
    .l-footer::before
    {
        top: -10px;
    }
    .l-footer
    {
        font-size: 10px;
        line-height: 1.5em;

        position: relative;

        width: 100%;
        margin: 120px 0 0 0;
        padding: 0;

        text-align: center;
    }
    .l-footer::before
    {
        height: 10px;
    }
    .l-footer_inner
    {
        padding: 25px 0 30px;
    }
    .l-footer_link li
    {
        font-size: 10px;
    }
    .l-footer_legal
    {
        margin-top: 5px;
    }
    .l-footer_copy
    {
        margin-top: 10px;
    }
    .l-in_wrap
    {
        width: 90%;
        min-height: 55vh;
        margin: 30px auto 0;
        padding: 0;
    }
    .l-in_ttl
    {
        margin-bottom: 35px;

        -webkit-animation: in_contents .5s cubic-bezier(.5, 1, .89, 1) .5s forwards;

                animation: in_contents .5s cubic-bezier(.5, 1, .89, 1) .5s forwards;
        text-align: center;

        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

        opacity: 0;
    }
    .l-in_ttl h2
    {
        font-size: 30px;

        padding: 8px 18px 7px 20px;
    }
    .l-in_ttl h2::before
    {
        left: -38px;

        width: 38px;
    }
    .l-in_ttl h2::after
    {
        right: -38px;

        width: 38px;
    }
    .l-in_ttl h2 p::before
    {
        top: 13px;
        left: 2px;

        width: 10px;
        height: 10px;
    }
    .l-in_ttl h2 p::after
    {
        top: 13px;
        right: 0;

        width: 10px;
        height: 10px;
    }
    .l-in_ttl .ruby
    {
        margin-top: 8px;
    }
    .l-in_ttl .ruby li
    {
        font-size: 12px;

        width: 23px;
        height: 23px;
        margin-left: 4px;
        padding: 1px 1px 1px 1px;

        border-radius: 50%;
    }
    .l-in_ttl .ruby li:first-child
    {
        margin-left: 0;
    }
    .modal_item
    {
        width: 100%;
    }
    .modal_close
    {
        width: 48px;
        height: 48px;
    }
}

@media screen and (min-width: 768px)
{
    .l-header_bg
    {
        position: absolute;
        z-index: -1;

        width: 300px;
        height: 100%;

        -webkit-animation: header_bg 160s linear infinite;

                animation: header_bg 160s linear infinite;

        background: url(/assets/img/common/header_pc.jpg) no-repeat top right;
        background-size: auto 100%;
    }
    nav .l-nav__content .l-nav__list .menu_item
    {
        position: relative;

        margin-left: 30px;
        padding-bottom: 8px;
    }
    nav .l-nav__content .l-nav__list .menu_item::after
    {
        position: absolute;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 3px;

        content: '';

        background: url(/assets/img/common/menu_line.jpg) repeat-x;
        background-size: contain;
    }
    nav .l-nav__content .l-nav__list .menu_item:nth-child(3n+1)
    {
        margin-left: 0;
    }
    nav .l-nav__content .l-nav__list .menu_item:nth-child(n+1):nth-child(-n+3)
    {
        margin-top: 0;
    }
    .l-in_ttl
    {
        min-width: 750px;
    }
    .l-in_content
    {
        min-width: 750px;
    }
    .modal_close
    {
        cursor: pointer;
        -webkit-transition: all .3s ease-in;
        transition: all .3s ease-in;
    }
    .modal_close:hover
    {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        opacity: .7;
    }
}

@media all and (-ms-high-contrast: none)
{
    nav .l-nav__content
    {
        margin-left: 0;
        padding: 0 7% 0 4%;
    }
}