@charset "Shift_JIS";

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
#mainContents
{
    line-height: 1;
}
#mainContents div,
#mainContents span,
#mainContents object,
#mainContents iframe,
#mainContents h1,
#mainContents h2,
#mainContents h3,
#mainContents h4,
#mainContents h5,
#mainContents h6,
#mainContents p,
#mainContents blockquote,
#mainContents pre,
#mainContents abbr,
#mainContents address,
#mainContents cite,
#mainContents code,
#mainContents del,
#mainContents dfn,
#mainContents em,
#mainContents img,
#mainContents ins,
#mainContents kbd,
#mainContents q,
#mainContents samp,
#mainContents small,
#mainContents strong,
#mainContents sub,
#mainContents sup,
#mainContents var,
#mainContents b,
#mainContents i,
#mainContents dl,
#mainContents dt,
#mainContents dd,
#mainContents ol,
#mainContents ul,
#mainContents li,
#mainContents fieldset,
#mainContents form,
#mainContents label,
#mainContents legend,
#mainContents table,
#mainContents caption,
#mainContents tbody,
#mainContents tfoot,
#mainContents thead,
#mainContents tr,
#mainContents th,
#mainContents td,
#mainContents article,
#mainContents aside,
#mainContents canvas,
#mainContents details,
#mainContents figcaption,
#mainContents figure,
#mainContents footer,
#mainContents header,
#mainContents hgroup,
#mainContents menu,
#mainContents nav,
#mainContents section,
#mainContents summary,
#mainContents time,
#mainContents mark,
#mainContents audio,
#mainContents video
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    list-style: none; 

    vertical-align: baseline;

    border: 0;
    outline: 0;
    background: transparent;
}
#mainContents article,
#mainContents aside,
#mainContents details,
#mainContents figcaption,
#mainContents figure,
#mainContents footer,
#mainContents header,
#mainContents hgroup,
#mainContents menu,
#mainContents nav,
#mainContents section
{
    display: block;
}
#mainContents nav ul
{
    list-style: none;
}
#mainContents blockquote,
#mainContents q
{
    quotes: none;
}
#mainContents blockquote:before,
#mainContents blockquote:after,
#mainContents q:before,
#mainContents q:after
{
    content: '';
    content: none;
}
#mainContents a
{
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;
    text-decoration: none; 

    background: transparent;
}
#mainContents ins
{
    text-decoration: none; 

    color: #000;
    background-color: #ff9;
}
#mainContents mark
{
    font-weight: bold; 
    font-style: italic;

    color: #000;
    background-color: #ff9;
}
#mainContents del
{
    text-decoration: line-through;
}
#mainContents abbr[title],
#mainContents dfn[title]
{
    cursor: help; 

    border-bottom: 1px dotted;
}
#mainContents table
{
    border-spacing: 0; 
    border-collapse: collapse;
}
#mainContents hr
{
    display: block;

    height: 1px;
    margin: 1em 0;
    padding: 0; 

    border: 0;
    border-top: 1px solid #ccc;
}
#mainContents input,
#mainContents select
{
    vertical-align: middle;
}
#mainContents img,
#mainContents video
{
    font-size: 0; 
    line-height: 0;
}

#mainContents #MENU
{
    position: absolute;
    top: 0;
    left: 0; 

    width: 100%;

    color: #fff;
}
#mainContents #MENU.is-index
{
    z-index: 9 !important;
}
#mainContents #MENU.is-fixed
{
    position: fixed;
    top: 0;
}
#mainContents #MENU.is-fixed::before
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    content: '';

    background-color: rgba(0, 0, 0, .2);

    -webkit-backdrop-filter: blur(8px) brightness(1.1);

    backdrop-filter: blur(8px) brightness(1.1);
}

#mainContents .ie #MENU.is-fixed::before
{
    background-color: rgba(0, 0, 0, .7);
}

#mainContents .c-menu
{
    max-width: 1800px;
    margin: 0 auto; 
    padding-right: 4%;
    padding-left: 4%;
}
@media screen and (min-width: 641px) and (max-width: 849px)
{
    #mainContents .c-menu
    {
        padding-right: 2%; 
        padding-left: 2%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu
    {
        padding-right: 4vw; 
        padding-left: 4vw;
    }
}
#mainContents .c-menu .c-menu--inr
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu--inr
    {
        padding: 7px 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu--inr
    {
        padding: 13px 0;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_logo
    {
        width: 6.78571vw;
        max-width: 95px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu_logo
    {
        position: relative;
        z-index: 9; 

        width: 21.33333vw;
    }
}
#mainContents .c-menu .c-menu_logo a
{
    display: block;
}
#mainContents .c-menu .c-menu_btn .c-menu_btn--inr
{
    position: relative;
    z-index: 9;
    top: 1.86667vw; 

    width: 16vw;
    height: 5.33333vw;
}
#mainContents .c-menu .c-menu_btn span
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 1px;

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

    opacity: 1; 
    background-color: #e1c98e;
}
#mainContents .c-menu .c-menu_btn span:nth-child(2)
{
    top: 2.66667vw;
    top: 2.13333vw;
}
#mainContents .c-menu .c-menu_btn.is-open span
{
    -webkit-transition: top .3s ease, -webkit-transform .3s ease;
    transition: top .3s ease, -webkit-transform .3s ease;
    transition: top .3s ease, transform .3s ease;
    transition: top .3s ease, transform .3s ease, -webkit-transform .3s ease;
}
#mainContents .c-menu .c-menu_btn.is-open span:nth-child(1)
{
    top: 1.06667vw;

    -webkit-transform: rotate(-19deg);

    transform: rotate(-19deg);
}
#mainContents .c-menu .c-menu_btn.is-open span:nth-child(2)
{
    top: 1.06667vw;

    -webkit-transform: rotate(19deg);

    transform: rotate(19deg);
}
#mainContents .c-menu .c-menu_btn.is-open span + span
{
    margin-top: 0;
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu_list--wrp
    {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        width: 100%;
        height: 100vh;

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

        transform: translateX(-100%);

        background-image: url(../img/bg.jpg);
        background-repeat: repeat;
        background-size: auto;
    }
    #mainContents .c-menu .c-menu_list--wrp.is-open
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    #mainContents .c-menu .c-menu_list--wrp.is-open .c-menu_list--inr
    {
        opacity: 1;
    }
    #mainContents .c-menu .c-menu_list--wrp.is-open .c-menu_list__itm
    {
        -webkit-transition-delay: 0;
        transition-delay: 0; 

        opacity: 1;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list--inr
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu_list--inr
    {
        position: absolute;
        top: 50%;
        left: 0;

        width: 100%;

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

        transform: translateY(-50%); 

        opacity: 0;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-pack: end;

        -webkit-justify-content: flex-end;

        -ms-flex-pack: end;

        justify-content: flex-end;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu_list
    {
        margin-top: 12.8vw;
    }
}
#mainContents .c-menu .c-menu_list__itm
{
    position: relative;
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list__itm.is-active a::before,
    #mainContents .c-menu .c-menu_list__itm:hover a::before
    {
        opacity: 1 !important;
    }
    #mainContents .c-menu .c-menu_list__itm.is-active:hover
    {
        opacity: .4;
    }
}

@media screen and (min-width: 768px) and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list__itm.is-active.is-evt
    {
        pointer-events: none !important;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list__itm:not(.is-active)
    {
        opacity: .4;
    }
    #mainContents .c-menu .c-menu_list__itm:not(.is-active):hover
    {
        opacity: 1;
    }
}

@media screen and (min-width: 850px) and (max-width: 1000px) and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list__itm:nth-child(n+2)
    {
        margin-left: 2.14286vw !important;
    }
}

@media screen and (min-width: 641px) and (max-width: 849px) and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list__itm:nth-child(n+2)
    {
        margin-left: 1.42857vw !important;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu_list__itm
    {
        text-align: center; 

        opacity: 0;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list__itm:nth-child(n+2)
    {
        /*margin-left: 2.85714vw;*/
        margin-left: 1.66666vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu_list__itm:nth-child(n+2)
    {
        margin-top: 13px;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list__itm.is-productinfo
    {
        /*padding-right: 20px;*/
        padding-right: 18px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu_list__itm.is-productinfo a
    {
        position: relative;
    }
}
#mainContents .c-menu .c-menu_list__itm.is-productinfo a::before
{
    position: absolute;
    top: 50%;

    display: block;

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

    background-image: url(../img/icon_window_g.png);
    background-repeat: no-repeat;
    background-size: contain;
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list__itm.is-productinfo a::before
    {
        right: 0; 

        width: 11px;
        height: 9px;

        opacity: .4;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu_list__itm.is-productinfo a::before
    {
        right: -22px; 

        width: 12.1px;
        height: 9.9px;
    }
}
#mainContents .c-menu .c-menu_list__itm .is-text-trademark
{
    font-size: 8px;

    padding-left: 2px;
}
#mainContents .c-menu .c-menu_list__itm a
{
    font-family: 'Noto Serif JP', serif;

    white-space: nowrap; 

    color: #e1c98e;
}
#mainContents .c-menu .c-menu_list__itm a span.icon-new
{
	font-size: 88%;
    color: #ff0000;
    margin-right: 0.3em;
}
@media screen and (min-width: 768px)
{
    #mainContents .c-menu .c-menu_list__itm a
    {
        /*font-size: 15px;*/
        font-size: 14px;
        line-height: 44px;

        letter-spacing: .04em;
    }
}
@media screen and (min-width: 850px) and (max-width: 1000px)
{
    #mainContents .c-menu .c-menu_list__itm a
    {
        font-size: 13px;
    }
}
@media screen and (min-width: 641px) and (max-width: 849px)
{
    #mainContents .c-menu .c-menu_list__itm a
    {
        font-size: 12px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-menu .c-menu_list__itm a
    {
        font-size: 18px;
        line-height: 44px;

        letter-spacing: .04em;
    }
}

#mainContents .c-note .c-note__ttl,
#mainContents .c-note .c-note__txt
{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 11px;
    font-weight: 300;
    line-height: 22px;

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

    color: rgba(255, 255, 255, .8);
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__ttl,
    #mainContents .c-note .c-note__txt
    {
        font-size: 2.93333vw;
        line-height: 200%;
    }
}

#mainContents .c-note .c-note__ttl + .c-note__txt
{
    margin-top: .65789%;
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__ttl + .c-note__txt
    {
        margin-top: 1.86667vw;
    }
}

#mainContents .c-note .c-note__ttl span
{
    position: relative;
}
@media screen and (min-width: 768px)
{
    #mainContents .c-note .c-note__ttl span
    {
        padding: 3px 3px 0 11px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__ttl span
    {
        padding: 4px 0 2px 15px;
    }
}

#mainContents .c-note .c-note__ttl span::before
{
    position: absolute;
    top: 0;
    left: 0; 

    display: block;

    width: 100%;
    height: 100%;

    content: '';

    border: 1px solid rgba(255, 255, 255, .4);
}

#mainContents .c-note .c-note__txt
{
    margin-top: 1.12782%;
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__txt
    {
        margin-top: 4vw;
    }
}
#mainContents .c-note .c-note__txt + .c-note__ttl
{
    margin-top: 1.31579%;
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__txt + .c-note__ttl
    {
        margin-top: 5.33333vw;
    }
}
#mainContents .c-note .c-note__txt + .c-note__txt
{
    margin-top: 3.7594%;
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__txt + .c-note__txt
    {
        margin-top: 13.33333vw;
    }
}

#mainContents .c-note .c-note__logo
{
    display: block;

    width: 16.91729%;
    margin: 5.35714% auto 0;
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__logo
    {
        width: 46.37681%;
        margin-top: 16.52174%;
    }
}

#mainContents .c-anim-fadein
{
    visibility: hidden;

    -webkit-transition-timing-function: ease;

    transition-timing-function: ease; 
    -webkit-transition-duration: 1s; 
    transition-duration: 1s;
    -webkit-transition-property: opacity, visibility;
    transition-property: opacity, visibility;

    opacity: 0;
}
#mainContents .c-anim-fadein.is-show
{
    visibility: visible; 

    opacity: 1;
}
#mainContents .c-anim-fadein--l
{
    visibility: hidden;

    -webkit-transition-timing-function: ease;

    transition-timing-function: ease;
    -webkit-transition-timing-function: cubic-bezier(.1, 0, 0, 1) !important;
    transition-timing-function: cubic-bezier(.1, 0, 0, 1) !important;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-duration: .6s !important;
    transition-duration: .6s !important;
    -webkit-transition-property: opacity, visibility;
    transition-property: opacity, visibility;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); 

    opacity: 0;
}
#mainContents .c-anim-fadein--l.is-show
{
    visibility: visible; 

    opacity: 1;
}
#mainContents .c-anim-fadein--l.is-show
{
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

#mainContents .c-anim-fadein--panel
{
    visibility: hidden;

    -webkit-transition-timing-function: cubic-bezier(.1, 0, 0, 1) !important;

    transition-timing-function: cubic-bezier(.1, 0, 0, 1) !important; 
    -webkit-transition-duration: .8s; 
    transition-duration: .8s;
    -webkit-transition-property: opacity, visibility;
    transition-property: opacity, visibility;

    opacity: 0;
}
#mainContents .c-anim-fadein--panel.is-show
{
    visibility: visible; 

    opacity: 1;
}

@media screen and (min-width: 768px)
{
    #mainContents .c-anim-fadein--panel--pc
    {
        visibility: hidden;

        -webkit-transition-timing-function: cubic-bezier(.1, 0, 0, 1) !important;

        transition-timing-function: cubic-bezier(.1, 0, 0, 1) !important; 
        -webkit-transition-duration: .8s; 
        transition-duration: .8s;
        -webkit-transition-property: opacity, visibility;
        transition-property: opacity, visibility;

        opacity: 0;
    }
    #mainContents .c-anim-fadein--panel--pc.is-show
    {
        visibility: visible; 

        opacity: 1;
    }
}

@media screen and (max-width: 767px)
{
    #mainContents .c-anim-fadein--panel--sp
    {
        visibility: hidden;

        -webkit-transition-timing-function: cubic-bezier(.1, 0, 0, 1) !important;

        transition-timing-function: cubic-bezier(.1, 0, 0, 1) !important; 
        -webkit-transition-duration: .8s; 
        transition-duration: .8s;
        -webkit-transition-property: opacity, visibility;
        transition-property: opacity, visibility;

        opacity: 0;
    }
    #mainContents .c-anim-fadein--panel--sp.is-show
    {
        visibility: visible; 

        opacity: 1;
    }
}

#mainContents .c-anim-typewritter span.is-active:after
{
    display: inline-block;

    width: 10px;
    height: 10px;

    content: '_';
    -webkit-animation-name: tenmetsu;
    animation-name: tenmetsu;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

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

@keyframes tenmetsu
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

#mainContents .c-anim-typewritter--hdg.is-active:after
{
    display: inline-block;

    width: 10px;
    height: 10px;

    content: '_';
    -webkit-animation-name: tenmetsu;
    animation-name: tenmetsu;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@keyframes tenmetsu
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

.is-hidden
{
    overflow: hidden;
}

.c-beery-modal
{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex; 

    width: 100%;
    height: 100%;

    -webkit-transition: opacity .3s;

    transition: opacity .3s;

    opacity: 0;
    background: rgba(0, 0, 0, .6);
}
.c-beery-modal.is-fadeIn
{
    opacity: 1;
}
.c-beery-modal.is-fadeOut
{
    opacity: 0;
}

.c-beery-modal--inr
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;
    width: 100%;
    min-height: 100%; 
    padding: 80px 50px;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.c-beery-modal--inr--inr
{
    width: 100%;
}

.c-beery-modal--inr--inr--inr
{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.c-beery-modal_yholder
{
    position: relative;
    top: 0;
    left: 0; 

    width: 100%;
    padding-top: 56.25%;
}
.c-beery-modal_yholder iframe
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.c-beery-modal_btn-close
{
    position: absolute;
    top: -50px;
    right: -50px;

    display: block; 

    width: 30px;
    height: 30px;
}
.c-beery-modal_btn-close:before,
.c-beery-modal_btn-close:after
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 1px;
    margin: auto;

    content: '';

    background: #fff;
}
.c-beery-modal_btn-close:before
{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.c-beery-modal_btn-close:after
{
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

body
{
    width: 100%;
    height: 100vh;
    margin: 0;
}

#mainContents
{
    font-family: 'Noto Serif JP', serif;

    position: relative;

    overflow: hidden;

    color: #fff;
    background-image: url(../img/bg.jpg);
    background-repeat: repeat;
    background-position: center top;
    background-size: auto;
}
#mainContents ::-moz-selection
{
    color: #fff; 
    background-color: #e1c98e;
}
#mainContents ::selection
{
    color: #fff; 
    background-color: #e1c98e;
}
@media screen and (min-width: 768px)
{
    #mainContents
    {
        width: 100%;
        min-width: 1080px;
        margin-right: auto;
        margin-left: auto;
    }
}
#mainContents img
{
    width: 100%;
}
@media screen and (min-width: 768px)
{
    #mainContents video
    {
        width: 100%;
    }
}
#mainContents a
{
    cursor: pointer;
}
@media screen and (max-width: 767px)
{
    #mainContents
    {
        background-size: 50% auto;
    }
}
#mainContents.is-loaded
{
    padding-bottom: 4.28571vw;
}
@media screen and (max-width: 767px)
{
    #mainContents.is-loaded
    {
        padding-bottom: 16vw;
    }
}
#mainContents .l-content--inr
{
    max-width: 1800px;
    margin: 0 auto; 
    padding-right: 12vw;
    padding-left: 12vw;
}

#mainContents .l-content--inr.recycling
{
    width: 280px;
}

@media screen and (max-width: 767px)
{
    #mainContents .l-content--inr.recycling
    {
        width: 230px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .l-content--inr
    {
        padding-right: 4vw; 
        padding-left: 4vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .u-is-pc
    {
        display: none !important;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .u-is-sp
    {
        display: none !important;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .u-bnr-hover:hover
    {
        cursor: pointer; 
        -webkit-transition: opacity .7s ease; 
        transition: opacity .7s ease;

        opacity: .7;
    }
}
#mainContents .is-text-trademark
{
    font-size: 10px;
}
#mainContents #BEERY_CONTENTS
{
    margin-top: 7.14286%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_CONTENTS
    {
        margin-top: 13.33333vw;
    }
}
#mainContents #BEERY_CONTENTS.is-none
{
    display: none;
}
#mainContents #BEERY_TOP
{
    padding-top: 4.28571%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_TOP
    {
        padding-top: 14.13333vw;
    }
}
#mainContents #BEERY_STATEMENT
{
    margin-top: 10%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_STATEMENT
    {
        margin-top: 25.33333vw;
    }
}
#mainContents #BEERY_PROCESS
{
    margin-top: 10%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_PROCESS
    {
        margin-top: 21.33333vw;
    }
}
#mainContents #BEERY_EXAMPLE
{
    margin-top: 12.5%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_EXAMPLE
    {
        margin-top: 26.66667vw;
    }
}
#mainContents #BEERY_QUESTIONS
{
    margin-top: 0;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_QUESTIONS
    {
        margin-top: 22.4vw;
    }
}
#mainContents #BEERY_QA
{
    margin-top: 11.42857%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_QA
    {
        margin-top: 29.33333vw;
    }
}
#mainContents #BEERY_INFO
{
    margin-top: 9.28571%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_INFO
    {
        margin-top: 23.2vw;
    }
}
#mainContents #BEERY_POINTS
{
    margin-top: 7.14286%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_POINTS
    {
        margin-top: 15.2vw;
    }
}
#mainContents #BEERY_STEPS
{
    margin-top: 6.92857%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_STEPS
    {
        margin-top: 24.53333vw;
    }
}
#mainContents #BEERY_VOICES
{
    margin-top: 9.28571%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_VOICES
    {
        margin-top: 13.86667vw;
    }
}
#mainContents #BEERY_STORE
{
    margin-top: 10.14286%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_STORE
    {
        margin-top: 26.66667vw;
    }
}
#mainContents #BEERY_CM
{
    margin-top: 8.28571%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_CM
    {
        margin-top: 27.73333vw;
    }
}
#mainContents #BEERY_CM_ACTOR
{
    margin-top: 8.78571%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_CM_ACTOR
    {
        margin-top: 22.93333vw;
    }
}
#mainContents #BEERY_FAQ
{
    margin-top: 10.14286%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_FAQ
    {
        margin-top: 26.66667vw;
    }
}
#mainContents #BEERY_NOTE
{
    margin-top: 10.07143%;
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_NOTE
    {
        margin-top: 26.66667vw;
    }
}
#mainContents .p-loading
{
    position: fixed;
    z-index: 9;
    left: 0;

    width: 100%;
    height: 100vh;

    background-color: black;
    background-image: url(../img/bg.jpg);
    background-repeat: repeat;
    background-size: auto;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-loading
    {
        top: 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-loading
    {
        top: -12.8vw;
    }
}
#mainContents .p-loading .p-loading__txt
{
    position: absolute;
    top: 50%;
    left: 50%;

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

    transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-loading .p-loading__txt
    {
        width: 180px;
        padding-top: 8.21429%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-loading .p-loading__txt
    {
        width: 160px;
    }
}
#mainContents .p-follow
{
    position: fixed;
    z-index: 8; 
    right: 0;

    cursor: pointer;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-follow
    {
        bottom: 0;

        width: 16%;

        background-color: #000;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-follow
    {
        bottom: 0; 

        width: 100%;
    }
}
#mainContents .p-follow.is-none
{
    display: none;
}
#mainContents .p-follow .p-follow__banner
{
    display: block;

    width: 100%;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-follow .p-follow__banner
    {
        -webkit-transition: opacity .7s ease;
        transition: opacity .7s ease;
    }
}
#mainContents .p-follow .p-follow__banner img
{
    vertical-align: bottom;
}
#mainContents .p-follow .p-follow__banner__btn
{
    position: absolute;
    z-index: 12; 

    width: 26px;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-follow .p-follow__banner__btn
    {
        top: 1.33929%;
        right: 1.33929%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-follow .p-follow__banner__btn
    {
        top: 2.67857%;
        right: 2.23214%;
    }
}
#mainContents .p-follow .p-follow__banner__btn:before
{
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;

    width: 120%;
    height: 120%;

    content: '';
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    pointer-events: auto;

    background-color: transparent;
}
#mainContents .p-top .p-top_kv
{
    position: relative;

    -webkit-transition: opacity 1s ease;

    transition: opacity 1s ease; 

    opacity: 0;
}
#mainContents .p-top .p-top_kv.is-show
{
    opacity: 1;
}
#mainContents .p-top .p-top_kv__slider__parts
{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_kv__slider__parts
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;

        width: 260px;
        margin-top: 26px;
        margin-right: 0;
        margin-left: auto;
        padding-right: 55px; 

        -webkit-box-pack: start; 

        -webkit-justify-content: flex-start; 

        -ms-flex-pack: start; 

        justify-content: flex-start;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_kv__slider__parts
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;

        margin-top: 2.66667vw;
        margin-right: 0; 
        margin-left: auto;
        padding-right: 4vw;
        padding-left: 4vw;

        -webkit-box-pack: justify;

        -webkit-justify-content: space-between;

        -ms-flex-pack: justify;

        justify-content: space-between;
    }
    #mainContents .p-top .p-top_kv__slider__parts .p-top_kv__slider__parts__options
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;

        -webkit-box-align: center;

        -webkit-align-items: center;

        -ms-flex-align: center;

        align-items: center;
    }
}
#mainContents .p-top .p-top_kv__slider__parts .slide-dots
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_kv__slider__parts .slide-dots
    {
        margin-left: 11px;
    }
}
#mainContents .p-top .p-top_kv__slider__parts .slide-dots li
{
    position: relative; 

    background-color: rgba(225, 201, 142, .25);
}
#mainContents .p-top .p-top_kv__slider__parts .slide-dots li:before
{
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 30px;

    content: '';
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    pointer-events: auto;

    background-color: transparent;
}
#mainContents .p-top .p-top_kv__slider__parts .slide-dots li:after
{
    position: absolute;
    z-index: 3; 
    top: 0;
    left: 0;

    display: block;

    width: 0;
    height: 100%;

    content: '';

    opacity: 0;
    background-color: #e1c98e;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_kv__slider__parts .slide-dots li
    {
        width: 40px;
        height: 2px;
        margin-left: 35px; 

        cursor: pointer;
    }
    #mainContents .p-top .p-top_kv__slider__parts .slide-dots li + li
    {
        margin-left: 15px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_kv__slider__parts .slide-dots li
    {
        width: 30px;
        height: 2px;
    }
    #mainContents .p-top .p-top_kv__slider__parts .slide-dots li + li
    {
        margin-left: 10px;
    }
}
#mainContents .p-top .p-top_kv__slider__parts .slide-dots li button
{
    display: none;
}
#mainContents .p-top .p-top_kv__slider__parts .slide-dots.is-active li.slick-active:after
{
    width: 100%;

    -webkit-transition: width 3.6s linear, opacity 0s linear;

    transition: width 3.6s linear, opacity 0s linear; 

    opacity: 1;
}
#mainContents .p-top .p-top_kv__slider__parts .slick-counter
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    color: #e1c98e; 

    -webkit-box-align: center; 

    -webkit-align-items: center; 

    -ms-flex-align: center; 

    align-items: center;
}
#mainContents .p-top .p-top_kv__slider__parts .slick-counter .current,
#mainContents .p-top .p-top_kv__slider__parts .slick-counter .total
{
    display: block;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_kv__slider__parts .slick-counter .current,
    #mainContents .p-top .p-top_kv__slider__parts .slick-counter .total
    {
        width: 7px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_kv__slider__parts .slick-counter .current,
    #mainContents .p-top .p-top_kv__slider__parts .slick-counter .total
    {
        width: 5px;
    }
}
#mainContents .p-top .p-top_kv__slider__parts .slick-counter .current img,
#mainContents .p-top .p-top_kv__slider__parts .slick-counter .total img
{
    width: 100%;
}
#mainContents .p-top .p-top_kv__slider__parts .slick-counter .current
{
    margin-right: 9px;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_kv__slider__parts .slick-counter .current
    {
        margin-left: 6px;
    }
}
#mainContents .p-top .p-top_kv__slider__parts .slick-counter .total
{
    margin-left: 9px;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_kv__slider__parts .slick-counter .total
    {
        margin-left: 6px;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_kv__single
    {
        padding-bottom: 26px;
    }
}
#mainContents .p-top .p-top_new
{
    display: none;
}
#mainContents .p-top .p-top_new.is-show
{
    position: absolute;

    display: block;
    overflow: hidden;

    -webkit-animation-name: splite;

    animation-name: splite;
    -webkit-animation-duration: .8s;
    animation-duration: .8s; 
    -webkit-animation-timing-function: steps(24, start); 
    animation-timing-function: steps(24, start);

    background-image: url(../img/txt-s_kv_new.png);
    background-repeat: no-repeat;
    background-size: 100% auto;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_new.is-show
    {
        top: 51.86335%;
        right: 32.71429%; 

        width: 30.24691%;
        height: 21.35%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_new.is-show
    {
        right: .56657%;
        bottom: 5.09915%; 

        width: 36vw;
        height: 22.93333vw;
    }
}

@-webkit-keyframes splite
{
    0%
    {
        background-position: 0 0;
    }
    100%
    {
        background-position: 0 100%;
    }
}

@keyframes splite
{
    0%
    {
        background-position: 0 0;
    }
    100%
    {
        background-position: 0 100%;
    }
}
#mainContents .p-top .p-top_kv__slider--wrp
{
    position: relative;
}
#mainContents .p-top .p-top_kv__slider
{
    margin-top: 60px;
}
#mainContents .p-top .p-top_kv__slider .slick-list
{
    padding: 0 !important;
}
#mainContents .p-top .p-top_kv__slider.is-fade
{
    -webkit-transform: translateX(0px) translateY(0);
    transform: translateX(0px) translateY(0);

    opacity: 1;
}
#mainContents .p-top .p-top_kv__slider figure
{
    width: 245px;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_kv__slider figure
    {
        padding-top: 4.2%;
    }
}
#mainContents .p-top .p-top_kv__slider .slick-list
{
    overflow: visible;
}
#mainContents .p-top .p-top_kv__slider__slide
{
    position: relative;
}
#mainContents .p-top .p-top_kv__slider__slide__itm.is-slide-link
{
    display: block;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_kv__slider__slide__itm.is-slide-link .p-top_kv__slider__slide__itm--inr:hover img
    {
        -webkit-transition: opacity .7s ease;
        transition: opacity .7s ease; 

        opacity: .7;
    }
}
#mainContents .p-top .p-top_kv__slider__slide__itm .p-top_kv__slider__slide__itm--inr
{
    position: relative;
}
#mainContents .p-top .p-top_kv__slider__slide__itm__label
{
    position: absolute;
    z-index: 3; 
    right: 0;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_kv__slider__slide__itm__label
    {
        top: 50%;

        width: 2.42857%;
        min-width: 34px;

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

        transform: translate(100%, -50%);
    }
    #mainContents .p-top .p-top_kv__slider__slide__itm__label.is-show
    {
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
    #mainContents .p-top .p-top_kv__slider__slide__itm__label:hover img
    {
        cursor: pointer;
    }
    #mainContents .p-top .p-top_kv__slider__slide__itm__label:hover .p-top_kv__slider__slide__itm__label__arrow
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_kv__slider__slide__itm__label
    {
        top: 0;

        width: 8.26667vw;

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

        transform: translate(100%, 0);
    }
    #mainContents .p-top .p-top_kv__slider__slide__itm__label.is-show
    {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
#mainContents .p-top .p-top_kv__slider__slide__itm__label .p-top_kv__slider__slide__itm__label__arrow
{
    position: absolute; 

    display: block;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_kv__slider__slide__itm__label .p-top_kv__slider__slide__itm__label__arrow
    {
        bottom: 4.16667%;
        left: 23.52941%;

        width: 41.17647%;

        -webkit-transition: -webkit-transform .5s ease;

        transition: -webkit-transform .5s ease;

        transition: transform .5s ease;

        transition: transform .5s ease, -webkit-transform .5s ease;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_kv__slider__slide__itm__label .p-top_kv__slider__slide__itm__label__arrow
    {
        right: 35.48387%; 
        bottom: 4.66321%;

        width: 45.16129%;
    }
}
#mainContents .p-top .p-top_scroll
{
    width: 100%;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_scroll
    {
        margin-top: -6px;
    }
}
#mainContents .p-top .p-top_scroll .p-top_scroll__txt
{
    position: relative;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_scroll .p-top_scroll__txt
    {
        width: 62px;
        margin-right: auto; 
        margin-left: auto;
        padding-right: 1.42857vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_scroll .p-top_scroll__txt
    {
        width: 16vw;
        margin: 11px auto 0; 
        padding-right: 5.33333vw;
    }
}
#mainContents .p-top .p-top_scroll .p-top_scroll__txt:after
{
    position: absolute;
    right: 0;
    bottom: 0;

    display: block;

    content: '';
    -webkit-animation-name: tenmetsu;
    animation-name: tenmetsu;
    -webkit-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate; 

    border-bottom: 1px solid rgba(225, 201, 142, .5);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-top .p-top_scroll .p-top_scroll__txt:after
    {
        width: 10px;
        height: 10px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-top .p-top_scroll .p-top_scroll__txt:after
    {
        width: 2.66667vw;
        height: 10px;
    }
}

@keyframes tenmetsu
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}
#mainContents .p-top .p-top_band
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden; 

    width: 100vw;
    height: 140px;
    margin-top: 4.53333%;
}
#mainContents .p-top .p-top_band img
{
    width: auto;
    height: 100%;
}
#mainContents .p-top .p-top_band.is-show img:first-child
{
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-animation: loop 70s -35s linear infinite;
    animation: loop 70s -35s linear infinite;
}
#mainContents .p-top .p-top_band.is-show img:last-child
{
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: loop2 70s linear infinite;
    animation: loop2 70s linear infinite;
}

@-webkit-keyframes loop
{
    0%
    {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to
    {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes loop
{
    0%
    {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to
    {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-webkit-keyframes loop2
{
    0%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to
    {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}

@keyframes loop2
{
    0%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    to
    {
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}
#mainContents .p-example .p-example__hdg
{
    width: 54.35714%;
    max-width: 761px; 
    margin-right: auto;
    margin-left: auto;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example__hdg
    {
        width: 82.13333%;
    }
}
#mainContents .p-example .p-example__lead
{
    text-align: center;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__lead
    {
        font-size: 22px;
        line-height: 44px;

        margin-top: 3.64286%;

        letter-spacing: .08em;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example__lead
    {
        font-size: 4.26667vw;
        line-height: 150%;

        margin-top: 9.6%;

        letter-spacing: .1em;
    }
}
#mainContents .p-example .p-example__lead span.beery
{
    color: #e1c98e;
}
#mainContents .p-example .p-example__lead__main
{
    text-align: center;

    color: #e1c98e;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__lead__main
    {
        font-size: 32px;
        line-height: 44px;

        letter-spacing: .08em;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example__lead__main
    {
        font-size: 5.86667vw;
        line-height: 150%;

        margin-top: 2.66667%;

        letter-spacing: .1em;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list
    {
        margin-top: 4.28571%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example__list
    {
        margin-top: 11.73333%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list--inr
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-pack: justify;

        -webkit-justify-content: space-between;

        -ms-flex-pack: justify;

        justify-content: space-between;
    }
    #mainContents .p-example .p-example__list .p-example__list--inr + .p-example__list--inr
    {
        margin-top: .71429%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list__itm
    {
        position: relative;

        padding-top: 19.42857%; 

        background-repeat: no-repeat;
        background-position: center;
        background-size: auto 100%;
    }
}
#mainContents .p-example .p-example__list .p-example__list__itm.is-1,
#mainContents .p-example .p-example__list .p-example__list__itm.is-2,
#mainContents .p-example .p-example__list .p-example__list__itm.is-3,
#mainContents .p-example .p-example__list .p-example__list__itm.is-4
{
    width: 24.57143%;
}
#mainContents .p-example .p-example__list .p-example__list__itm.is-5,
#mainContents .p-example .p-example__list .p-example__list__itm.is-6,
#mainContents .p-example .p-example__list .p-example__list__itm.is-7
{
    width: 33%;
}
#mainContents .p-example .p-example__list .p-example__list__itm.is-1
{
    background-image: url(../img/img_example_1.png);
}
#mainContents .p-example .p-example__list .p-example__list__itm.is-2
{
    background-image: url(../img/img_example_2.png);
}
#mainContents .p-example .p-example__list .p-example__list__itm.is-3
{
    background-image: url(../img/img_example_3.png);
}
#mainContents .p-example .p-example__list .p-example__list__itm.is-4
{
    background-image: url(../img/img_example_4.png);
}
#mainContents .p-example .p-example__list .p-example__list__itm.is-5
{
    background-image: url(../img/img_example_5.png);
}
#mainContents .p-example .p-example__list .p-example__list__itm.is-6
{
    background-image: url(../img/img_example_6.png);
}
#mainContents .p-example .p-example__list .p-example__list__itm.is-7
{
    background-image: url(../img/img_example_7.png);
}
#mainContents .p-example .p-example__list .p-example__list__itm__ttl
{
    position: absolute;
    z-index: 4; 
    right: 0;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list__itm__ttl
    {
        bottom: 7.35294%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list__itm__ttl.is-1
    {
        width: 53.19767%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list__itm__ttl.is-2
    {
        width: 48.54651%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list__itm__ttl.is-3
    {
        width: 48.83721%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list__itm__ttl.is-4
    {
        width: 70.63953%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list__itm__ttl.is-5
    {
        width: 52.81385%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list__itm__ttl.is-6
    {
        width: 36.14719%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example__list .p-example__list__itm__ttl.is-7
    {
        width: 52.1645%;
    }
}
#mainContents .p-example .p-example--ctr--1
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example--ctr--1 .p-example--ctr--1--l
    {
        width: 33.28571%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example--ctr--1 .p-example--ctr--1--l
    {
        width: 33.33333%;
    }
}
#mainContents .p-example .p-example--ctr--1 .p-example--ctr--1--r
{
    overflow: hidden; 

    height: auto;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example--ctr--1 .p-example--ctr--1--r
    {
        width: 66.71429%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example--ctr--1 .p-example--ctr--1--r
    {
        width: 66.66667%;
    }
}
#mainContents .p-example .p-example--ctr--2
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example--ctr--3
    {
        width: 66.71429%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example--ctr--3
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
}
#mainContents .p-example .p-example--ctr--3 .p-example--ctr--3--t
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; 

    width: 100%;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example--ctr--3 .p-example--ctr--3--t
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column; 

        width: 33.33333%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example--ctr--3 .p-example--ctr--3--b
    {
        width: 66.66667%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-example .p-example--ctr--4
    {
        width: 33.28571%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-example .p-example--ctr--4
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
}
#mainContents .p-statement .p-statement--inr
{
    position: relative;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-statement .p-statement--inr
    {
        height: 57.14286vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-statement .p-statement--inr
    {
        height: 160vw;
    }
}
#mainContents .p-statement .p-statement_txt
{
    position: absolute;
    z-index: 7; 
    top: 50%;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-statement .p-statement_txt
    {
        left: 50%;

        width: 68vw; 

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

        transform: translate(-50%, -50%);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-statement .p-statement_txt
    {
        left: 4vw;

        width: 85.33333vw;

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

        transform: translateY(-50%);
    }
}
#mainContents .p-statement .js-st-anim-mov
{
    -webkit-transition: all .7s cubic-bezier(.3, 0, .2, 1);
    transition: all .7s cubic-bezier(.3, 0, .2, 1); 

    opacity: 0;
}
#mainContents .p-statement .js-st-anim-mov.is-show
{
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}
#mainContents .p-statement .p-statement_img-list
{
    position: relative;

    width: 100%;
    height: 100%;
}
#mainContents .p-statement .p-statement_img-list li
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-animation: crossfade 24s linear 0s infinite;

    animation: crossfade 24s linear 0s infinite;

    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;
}
#mainContents .p-statement .p-statement_img-list li:nth-child(1)
{
    -webkit-animation: crossfadeFirst 24s linear 0s infinite;
    animation: crossfadeFirst 24s linear 0s infinite;
    -webkit-animation-delay: 0s;
    animation-delay: 0s; 

    background-image: url(../img/bg_statement_1_pc.jpg);
}
@media screen and (max-width: 767px)
{
    #mainContents .p-statement .p-statement_img-list li:nth-child(1)
    {
        background-image: url(../img/bg_statement_1_sp.jpg);
    }
}
#mainContents .p-statement .p-statement_img-list li:nth-child(2)
{
    -webkit-animation-delay: 6s;
    animation-delay: 6s; 

    background-image: url(../img/bg_statement_2_pc.jpg);
}
@media screen and (max-width: 767px)
{
    #mainContents .p-statement .p-statement_img-list li:nth-child(2)
    {
        background-image: url(../img/bg_statement_2_sp.jpg);
    }
}
#mainContents .p-statement .p-statement_img-list li:nth-child(3)
{
    -webkit-animation-delay: 12s;
    animation-delay: 12s; 

    background-image: url(../img/bg_statement_3_pc.jpg);
}
@media screen and (max-width: 767px)
{
    #mainContents .p-statement .p-statement_img-list li:nth-child(3)
    {
        background-image: url(../img/bg_statement_3_sp.jpg);
    }
}
#mainContents .p-statement .p-statement_img-list li:nth-child(4)
{
    -webkit-animation-delay: 18s;
    animation-delay: 18s; 

    background-image: url(../img/bg_statement_4_pc.jpg);
}
@media screen and (max-width: 767px)
{
    #mainContents .p-statement .p-statement_img-list li:nth-child(4)
    {
        background-image: url(../img/bg_statement_4_sp.jpg);
    }
}

@-webkit-keyframes crossfadeFirst
{
    0%
    {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;

        opacity: 0;
    }
    5%
    {
        opacity: 1;
    }
    25%
    {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;

        opacity: 1;
    }
    30%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes crossfadeFirst
{
    0%
    {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;

        opacity: 0;
    }
    5%
    {
        opacity: 1;
    }
    25%
    {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;

        opacity: 1;
    }
    30%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 0;
    }
}

@-webkit-keyframes crossfade
{
    0%
    {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;

        opacity: 0;
    }
    4%
    {
        opacity: 1;
    }
    25%
    {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;

        opacity: 1;
    }
    30%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes crossfade
{
    0%
    {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;

        opacity: 0;
    }
    4%
    {
        opacity: 1;
    }
    25%
    {
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;

        opacity: 1;
    }
    30%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 0;
    }
}
#mainContents #BEERY_QUESTIONS
{
    position: relative;
}
@media screen and (min-width: 768px)
{
    #mainContents #BEERY_QUESTIONS
    {
        width: 100%;
        padding-top: 64.28571%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_QUESTIONS
    {
        width: 100%;
        padding-top: 154.66667%;
    }
}
#mainContents .p-questions
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;

    -webkit-transition: opacity .7s ease;

    transition: opacity .7s ease;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-questions
    {
        padding-top: 64.28571%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-questions
    {
        padding-top: 154.66667%;
    }
}
#mainContents .p-questions .p-questions_mov--ctr
{
    width: 100%;
    height: 100%;
}
#mainContents .p-questions .p-questions_mov
{
    position: absolute;
    top: 0;
    left: 0; 

    width: 100%;
}
#mainContents .p-questions .p-questions_txt-ctr
{
    position: absolute;
    z-index: 8; 
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}
#mainContents .p-questions .p-questions_txt-inr
{
    position: absolute;
    z-index: 5; 
    top: 50%;
    left: 50%;

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

    transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px)
{
    #mainContents .p-questions .p-questions_txt-inr
    {
        width: 38.93333vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-questions .p-questions_txt-inr
    {
        width: 16.42857vw;
    }
}
#mainContents .p-questions .p-questions_txt
{
    position: absolute;

    -webkit-transition: all .7s cubic-bezier(.1, 0, 0, 1);

    transition: all .7s cubic-bezier(.1, 0, 0, 1);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-questions .p-questions_txt
    {
        top: -2.35714vw;
        left: -25.71429vw; 

        width: 24.42857vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-questions .p-questions_txt
    {
        top: -32.53333vw;
        left: -26.66667vw; 

        width: 52.26667vw;
    }
}
#mainContents .p-questions .p-questions_txt__img
{
    -webkit-transition: all .7s cubic-bezier(.1, 0, 0, 1);
    transition: all .7s cubic-bezier(.1, 0, 0, 1);
}
#mainContents .p-qa p
{
    font-family: 'Noto Serif JP', serif;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa--ctr:first-child .p-qa__hdg
    {
        min-height: 92px;
    }
}
#mainContents .p-qa .p-qa--ctr:first-child .p-qa__ans span:nth-child(1),
#mainContents .p-qa .p-qa--ctr:first-child .p-qa__ans span:nth-child(2)
{
    display: block;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa--ctr:first-child .p-qa__ans
    {
        min-height: 190px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa--ctr:nth-child(2) .p-qa__hdg,
    #mainContents .p-qa .p-qa--ctr:nth-child(3) .p-qa__hdg
    {
        min-height: 127px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa--ctr:nth-child(2) .p-qa__ans,
    #mainContents .p-qa .p-qa--ctr:nth-child(3) .p-qa__ans
    {
        min-height: 155px;
    }
}
#mainContents .p-qa .p-qa--ctr:not(first-child) .p-qa__ans span:first-child
{
    display: block;
}
#mainContents .p-qa .p-qa--ctr + .p-qa--ctr
{
    margin-top: 22.93333vw;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa--ctr + .p-qa--ctr
    {
        margin-top: 10.71429vw;
    }
}
#mainContents .p-qa .p-qa__hdg,
#mainContents .p-qa .p-qa__ans
{
    font-family: 'Noto Serif JP', serif;
    font-weight: normal; 

    letter-spacing: .08em;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa__hdg,
    #mainContents .p-qa .p-qa__ans
    {
        font-size: 32px;
        line-height: 54px; 

        position: relative;

        padding-left: 7.28571vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa__hdg,
    #mainContents .p-qa .p-qa__ans
    {
        font-size: 5.33333vw;
        line-height: 180%;
    }
}
#mainContents .p-qa .p-qa__hdg span,
#mainContents .p-qa .p-qa__ans span
{
    display: block;
}
#mainContents .p-qa .p-qa__hdg:before,
#mainContents .p-qa .p-qa__ans:before
{
    display: block;

    content: '';

    background-repeat: no-repeat;
    background-size: contain;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa__hdg:before,
    #mainContents .p-qa .p-qa__ans:before
    {
        position: absolute;
        left: 0;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa__detail
    {
        font-size: 17px;
        line-height: 34px;

        min-height: 110px; 
        margin-top: 3vw;
        margin-left: 16vw;

        letter-spacing: .12em;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa__detail
    {
        font-size: 3.46667vw;
        line-height: 200%;

        margin-top: 4.5vw;
        margin-left: 8vw; 

        letter-spacing: .1em;
    }
}
#mainContents .p-qa .p-qa__ans,
#mainContents .p-qa .p-qa__detail
{
    color: #e1c98e;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa__hdg
    {
        min-height: 80px;
    }
}
#mainContents .p-qa .p-qa__hdg.is-active:before
{
    opacity: 1;
}
#mainContents .p-qa .p-qa__hdg:before
{
    -webkit-transition-duration: .8s;
    transition-duration: .8s;
    -webkit-transition-property: opacity;
    transition-property: opacity;

    opacity: 0;
    background-image: url(../img/icon_qa_q.svg);
    background-size: 100% auto;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa__hdg:before
    {
        top: -.14286vw; 

        width: 4.71429vw;
        height: 4.71429vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa__hdg:before
    {
        width: 12.53333vw;
        padding-top: 15.2vw;
    }
}
#mainContents .p-qa .p-qa__hdg.is-text-tm.is-active-tm span
{
    position: relative;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa__hdg.is-text-tm.is-active-tm span
    {
        width: 400px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa__hdg.is-text-tm.is-active-tm span
    {
        width: 100%;
    }
}
#mainContents .p-qa .p-qa__hdg.is-text-tm.is-active-tm span:before
{
    font-size: 6px; 

    position: absolute;

}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa__hdg.is-text-tm.is-active-tm span:before
    {
        bottom: -9px;
        left: 62.5%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa__hdg.is-text-tm.is-active-tm span:before
    {
        bottom: -5px;
        left: 44.5%;
    }
}
#mainContents .p-qa .p-qa__ans
{
    margin-top: 3.71429vw;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa__ans
    {
        min-height: 110px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa__ans
    {
        margin-top: 9.06667vw;
    }
}
#mainContents .p-qa .p-qa__ans.is-active:before
{
    opacity: 1;
}
#mainContents .p-qa .p-qa__ans:before
{
    -webkit-transition-duration: .8s;
    transition-duration: .8s;
    -webkit-transition-property: opacity;
    transition-property: opacity;

    opacity: 0;
    background-image: url(../img/icon_qa_a.svg);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-qa .p-qa__ans:before
    {
        top: -.42857vw; 

        width: 4.64286vw;
        height: 3.42857vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-qa .p-qa__ans:before
    {
        width: 12.8vw;
        padding-top: 13.06667vw;
    }
}
#mainContents .p-info .p-info-anim--hdg
{
    visibility: hidden;

    -webkit-transition-timing-function: cubic-bezier(.1, 0, 0, 1);

    transition-timing-function: cubic-bezier(.1, 0, 0, 1);
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    transition-property: opacity, transform;
    transition-property: opacity, transform, -webkit-transform;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); 

    opacity: 0;
}
#mainContents .p-info .p-info-anim--hdg.is-show
{
    visibility: visible;

    -webkit-transform: translateX(0);

    transform: translateX(0); 

    opacity: 1;
}
#mainContents .p-info .p-info-anim--img,
#mainContents .p-info .p-info-anim--txt
{
    visibility: hidden;

    -webkit-transition-timing-function: cubic-bezier(.1, 0, 0, 1);

    transition-timing-function: cubic-bezier(.1, 0, 0, 1); 
    -webkit-transition-property: opacity, visibility; 
    transition-property: opacity, visibility;

    opacity: 0;
}
#mainContents .p-info .p-info-anim--img.is-show,
#mainContents .p-info .p-info-anim--txt.is-show
{
    visibility: visible; 

    opacity: 1;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info--wrp
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        margin-top: 4.71429vw; 

        -webkit-box-pack: justify; 

        -webkit-justify-content: space-between; 

        -ms-flex-pack: justify; 

        justify-content: space-between;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info--wrp
    {
        margin-top: 14.66667vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info--inr
    {
        position: relative;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info--ctr
    {
        width: 44.73684%;
        display: block;
        margin: auto;
    }
    #mainContents .p-info .p-info--ctr:nth-child(n+3)
    {
        margin-top: 5.71429vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info--ctr + .p-info--ctr
    {
        margin-top: 16vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info--ctr.is-beery .p-info_img
    {
        width: 69.95798%;
        margin-top: -1.35714vw; 
        margin-left: -4.28571vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info--ctr.is-beery .p-info_img
    {
        width: 60.8vw;
        margin-top: -5.33333vw; 
        margin-left: -12.53333vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info--ctr.is-beery .p-info_hdg__label
    {
        margin-top: 2.21429vw;
        margin-left: 2.42857vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info--ctr.is-craft .p-info_img
    {
        width: 28.36134%;
        margin-top: 1.71429vw; 
        margin-left: 1.42857vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info--ctr.is-craft .p-info_img
    {
        width: 26.13333vw;
        margin-top: 1.33333vw; 
        margin-right: 7.46667vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info--ctr.is-craft .p-info_hdg__label
    {
        margin-top: 2vw;
        margin-left: 1.42857vw;
    }
}
#mainContents .p-info .p-info--ctr.is-logo
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#mainContents .p-info .p-info__logo
{
    width: 13.35714vw;
}
#mainContents .p-info .p-info_img-ctr
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_img-ctr
    {
        width: 100%;

        -webkit-box-pack: justify;

        -webkit-justify-content: space-between;

        -ms-flex-pack: justify;

        justify-content: space-between;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_img
    {
        width: 12.57143vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_img
    {
        width: 30.4vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_hdg--ctr.beery
    {
        width: 58.19328%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_hdg--ctr.beery
    {
        width: 48.8vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_hdg--ctr.craft
    {
        width: 58.61345%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_hdg--ctr.craft
    {
        width: 49.33333vw;
    }
}
#mainContents .p-info .p-info_hdg
{
    width: 100%;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_hdg
    {
        font-size: 40px !important;

        min-height: 60px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_hdg
    {
        font-size: 32px !important;

        min-height: 60px;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_hdg__label
    {
        width: 8.28571vw;
        min-width: 116px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_hdg__label
    {
        width: 24.26667vw;
        margin-top: 4vw;
        margin-left: 2.66667vw;
    }
}
#mainContents .p-info .p-info_prod__btn
{
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;
    margin-right: auto; 
    margin-left: auto;

    color: #fff;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_prod__btn
    {
        width: 12.35714vw;
        min-width: 173px;
        margin-top: 2.92857vw; 

        -webkit-box-pack: justify; 

        -webkit-justify-content: space-between; 

        -ms-flex-pack: justify; 

        justify-content: space-between;
    }
    #mainContents .p-info .p-info_prod__btn:hover .p-info_prod_btn__icon
    {
        -webkit-transform: scale(1.2);
        transform: scale(1.2); 

        background-image: url(../img/icon_info_btn-hover.png);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_prod__btn
    {
        width: 46.4vw;
        margin-top: 8.26667vw; 

        -webkit-box-pack: center; 

        -webkit-justify-content: center; 

        -ms-flex-pack: center; 

        justify-content: center;
    }
}
#mainContents .p-info .p-info_prod__btn .p-info_prod_btn__txt
{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 30.6px;

    letter-spacing: .12em;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_prod__btn .p-info_prod_btn__txt
    {
        font-size: 4.26667vw;
        line-height: 191.25%;
    }
}
#mainContents .p-info .p-info_prod__btn .p-info_prod_btn__icon
{
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease; 
    -webkit-transition-duration: .5s; 
    transition-duration: .5s;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;

    background-image: url(../img/icon_info_btn.png);
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_prod__btn .p-info_prod_btn__icon
    {
        width: 3.57143vw;
        max-width: 50px;
        height: 3.57143vw;

        background-size: 100% auto;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_prod__btn .p-info_prod_btn__icon
    {
        width: 13.33333vw;
        height: 13.33333vw;
        margin-left: 7.2vw;

        background-size: 99% auto;
    }
}
#mainContents .p-info .p-info_list__note
{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;

    letter-spacing: .06em; 

    color: rgba(255, 255, 255, .8);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_list__note
    {
        font-size: 11px;
        line-height: 19px;

        position: absolute;
        top: -56px;
        left: 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_list__note
    {
        font-size: 11px;
        line-height: 19.8px;

        padding-top: 6.93333vw;
    }
}
#mainContents .p-info .p-info_list
{
    width: 100%;
    margin-top: 6.42857vw;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_list
    {
        margin-top: 6.13333vw;
    }
}
#mainContents .p-info .p-info_list .p-info_list__itm
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    padding-top: .57143vw;
    padding-bottom: .57143vw; 

    -webkit-box-align: center; 

    -webkit-align-items: center; 

    -ms-flex-align: center; 

    align-items: center;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_list .p-info_list__itm
    {
        padding-top: .8vw;
        padding-bottom: 1.86667vw;
    }
}
#mainContents .p-info .p-info_list .p-info_list__itm.is-price
{
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
#mainContents .p-info .p-info_list .p-info_list__itm.is-price .p-info_list__itm__txt span
{
    font-size: 11px;
    line-height: 34px;

    letter-spacing: .06em; 

    color: rgba(255, 255, 255, .8);
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_list .p-info_list__itm.is-price .p-info_list__itm__txt span
    {
        line-height: 20px;
    }
}
#mainContents .p-info .p-info_list .p-info_list__itm + .p-info_list__itm
{
    border-top: 1px solid rgba(225, 201, 142, .5);
}
#mainContents .p-info .p-info_list .p-info_list__itm__ttl,
#mainContents .p-info .p-info_list .p-info_list__itm__txt
{
    font-size: 13px;
    line-height: 23.4px;

    letter-spacing: .12em;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_list .p-info_list__itm__ttl,
    #mainContents .p-info .p-info_list .p-info_list__itm__txt
    {
        font-size: 2.93333vw;
        line-height: 212.5%;
    }
}
#mainContents .p-info .p-info_list .p-info_list__itm__ttl
{
    color: #e1c98e;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_list .p-info_list__itm__ttl
    {
        width: 27.73109%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_list .p-info_list__itm__ttl
    {
        width: 29.33333vw;
    }
}
#mainContents .p-info .p-info_list .p-info_list__itm__txt
{
    color: #fff;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-info .p-info_list .p-info_list__itm__txt
    {
        width: 76.47059%;

        -webkit-flex-shrink: 0;

        -ms-flex-negative: 0;

        flex-shrink: 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-info .p-info_list .p-info_list__itm__txt
    {
        width: 62.66667vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-points
    {
        min-width: 840px;
    }
}
#mainContents .p-points .p-points_hdg span
{
    display: block;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-points .p-points_hdg
    {
        min-height: 110px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-points .p-points_hdg
    {
        min-height: 110px;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-points .p-points--inr
    {
        margin: 5.45113% auto 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-points .p-points--inr
    {
        width: calc(100% - 22px);
        margin-top: 9.6vw;
    }
}
#mainContents .p-points .p-points__note
{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;

    color: rgba(255, 255, 255, .8);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-points .p-points__note
    {
        font-size: 11px;
        line-height: 22.5px;

        margin-top: 3.21429vw; 

        text-align: center;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-points .p-points__note
    {
        font-size: 11px;
        line-height: 22.5px;

        margin-top: 4.26667vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-points .p-points--ctr--2col
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        margin-top: 3.7594%; 

        -webkit-box-pack: justify; 

        -webkit-justify-content: space-between; 

        -ms-flex-pack: justify; 

        justify-content: space-between;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-points .p-points--ctr--2col
    {
        margin-top: 4vw;
    }
}
#mainContents .p-points .p-points--ctr--1col .p-points__itm
{
    margin: 0 auto;
}
#mainContents .p-points .p-points__itm
{
    position: relative;

    text-align: center; 

    border-top: solid 1px #665b3f;
    border-bottom: solid 1px #665b3f;
    border-left: solid 1px #665b3f;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-points .p-points__itm
    {
        width: 36%;
        padding: 2.44361% 3.38346% 2.34962% 5.26316%;
    }
    #mainContents .p-points .p-points__itm + .p-points__itm
    {
        margin-right: 20px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-points .p-points__itm
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        width: 100%;
        padding: 3.46667vw 0 2.66667vw; 

        -webkit-box-align: center; 

        -webkit-align-items: center; 

        -ms-flex-align: center; 

        align-items: center;
    }
    #mainContents .p-points .p-points__itm + .p-points__itm
    {
        margin-top: 4vw;
    }
}
#mainContents .p-points .p-points__itm::before
{
    position: absolute;
    top: 0;
    right: -29px;

    width: 29px;
    height: 29px;

    content: '';
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: top left;
    transform-origin: top left; 

    border-left: solid 1px #665b3f;
}
#mainContents .p-points .p-points__itm::after
{
    position: absolute;
    right: -20px;
    bottom: -1px;

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

    content: '';

    border-right: solid 1px #665b3f;
    border-bottom: solid 1px #665b3f;
}
#mainContents .p-points .p-points__itm__ttl
{
    color: #e1c98e;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-points .p-points__itm__ttl
    {
        font-size: 26px;
        line-height: 1em;

        width: 71.42857%;
        margin: 0 auto;

        letter-spacing: .18em;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-points .p-points__itm__ttl
    {
        font-size: 4.26667vw;
        line-height: 360%;

        position: relative; 

        width: 32vw;
    }
    #mainContents .p-points .p-points__itm__ttl::after
    {
        position: absolute;
        top: 50%;
        right: 0; 

        display: inline-block;

        width: 1px;
        height: 41px;

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

        background-color: rgba(225, 201, 142, .5);
    }
}
#mainContents .p-points .p-points__itm__txt
{
    font-size: 17px;
    line-height: 25.5px;

    letter-spacing: .12em;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-points .p-points__itm__txt
    {
        margin-top: 3.57143%;
        padding-top: 3.1746%;

        border-top: 1px solid rgba(225, 201, 142, .5);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-points .p-points__itm__txt
    {
        font-size: 3.46667vw;
        line-height: 146.15385%;

        padding-left: 5.33333vw;

        text-align: left;
    }
}
#mainContents .p-steps .p-steps_note
{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;

    color: rgba(255, 255, 255, .8);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_note
    {
        font-size: 11px;
        line-height: 22.5px;

        margin-top: 2.14286vw; 

        text-align: center;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_note
    {
        font-size: 11px;
        line-height: 22.5px;

        margin-top: 4.53333vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        max-width: 1064px;
        margin-top: 5.16917%;
        margin-right: auto; 
        margin-left: auto;

        -webkit-box-pack: justify;

        -webkit-justify-content: space-between;

        -ms-flex-pack: justify;

        justify-content: space-between;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list
    {
        margin-top: 10.13333vw;
    }
}
#mainContents .p-steps .p-steps_list__itm
{
    position: relative; 

    -webkit-box-sizing: border-box; 

    box-sizing: border-box;

    border-bottom: 1px solid rgba(225, 201, 142, .5);
    border-left: 1px solid rgba(225, 201, 142, .5);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm
    {
        width: 21.05263%; 

        -webkit-flex-shrink: 0; 

        -ms-flex-negative: 0; 

        flex-shrink: 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm
    {
        width: 100%;
    }
}
#mainContents .p-steps .p-steps_list__itm .p-steps_list__itm--inr
{
    position: relative;

    -webkit-box-sizing: border-box;

    box-sizing: border-box; 
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm--inr
    {
        padding: 9.82143% 0 10.26786%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm--inr
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;

        padding: 5.33333vw 7.46667vw 3.46667vw 5.33333vw; 

        -webkit-box-pack: justify; 

        -webkit-justify-content: space-between; 

        -ms-flex-pack: justify; 

        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
#mainContents .p-steps .p-steps_list__itm .p-steps_list__itm--inr::before
{
    position: absolute;
    top: 0;
    left: 0; 

    display: block;

    height: 1px;

    content: '';

    background-color: rgba(225, 201, 142, .5);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm--inr::before
    {
        width: 91.07143%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm--inr::before
    {
        width: 95.65217%;
    }
}
#mainContents .p-steps .p-steps_list__itm .p-steps_list__itm--inr:after
{
    position: absolute;
    right: 0; 
    bottom: 0;

    display: block;

    width: 1px;

    content: '';

    background-color: rgba(225, 201, 142, .5);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm--inr:after
    {
        height: 94.1896%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm--inr:after
    {
        height: 88.18182%;
    }
}
#mainContents .p-steps .p-steps_list__itm .p-steps_list__itm__decoration
{
    position: absolute;
    top: 0;
    right: 0; 

    display: block;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm__decoration
    {
        width: 8.92857%;
        height: 6.11621%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm__decoration
    {
        width: 4.34783%;
        height: 13.63636%;
    }
}
#mainContents .p-steps .p-steps_list__itm .p-steps_list__itm__decoration:before
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 140%;
    height: 1px;

    content: '';
    -webkit-transform-origin: top left;
    transform-origin: top left; 

    background: rgba(225, 201, 142, .5);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm__decoration:before
    {
        -webkit-transform: rotate(48deg);
        transform: rotate(48deg);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm__decoration:before
    {
        -webkit-transform: rotate(46deg);
        transform: rotate(46deg);
    }
}
#mainContents .p-steps .p-steps_list__itm .p-steps_list__itm__mark
{
    position: absolute;
    z-index: 4;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm__mark
    {
        top: -24px;
        right: -25px;

        width: 37.94643%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm .p-steps_list__itm__mark
    {
        top: -15px;
        right: -11px;

        width: 17.68116%;
    }
}
#mainContents .p-steps .p-steps_list__itm + .p-steps_list__itm
{
    position: relative;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm + .p-steps_list__itm
    {
        margin-top: 8vw;
    }
}
#mainContents .p-steps .p-steps_list__itm + .p-steps_list__itm:after
{
    position: absolute;

    display: block;

    content: '';

    background-repeat: no-repeat;
    background-size: auto;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm + .p-steps_list__itm:after
    {
        top: 50%;
        left: -16.07143%;

        width: 15px;
        height: 28px;

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

        transform: translateY(-50%); 

        background-image: url(../img/img_steps_arrow.png);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm + .p-steps_list__itm:after
    {
        top: -5.33333vw;
        left: 50%;

        width: 5.33333vw;
        height: 2.66667vw;

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

        transform: translateX(-50%); 

        background-image: url(../img/img_steps_arrow_btm.png);
    }
}
#mainContents .p-steps .p-steps_list__itm__img-ctr
{
    width: 100%;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm__txt-ctr
    {
        width: 56vw;
        margin-top: -1.86667vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm__num
    {
        width: 17.85714%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm__num
    {
        width: 20.8vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm__img
    {
        width: 58.03571%;
        margin-top: 9.82143%;
        margin-right: auto; 
        margin-left: auto;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm__img
    {
        width: 26.13333vw;
    }
}
#mainContents .p-steps .p-steps_list__itm__txt
{
    letter-spacing: .12em;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-steps .p-steps_list__itm__txt
    {
        font-size: 15px;
        line-height: 25.5px;

        margin-top: 11.16071%; 

        text-align: center;
    }
}
@media screen and (max-width: 1208px)
{
    #mainContents .p-steps .p-steps_list__itm__txt
    {
        font-size: 1.21429vw;
        line-height: 1.82143vw;
    }
}
@media screen and (max-width: 1021px)
{
    #mainContents .p-steps .p-steps_list__itm__txt
    {
        font-size: 14px;
        line-height: 20px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-steps .p-steps_list__itm__txt
    {
        font-size: 3.46667vw;
        line-height: 150%;

        margin-top: 1.33333vw;
    }
}
#mainContents .p-voices .p-voices_annotation
{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 11px;
    font-weight: 300;
    line-height: 34px;

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

    color: rgba(255, 255, 255, .8);
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices_annotation
    {
        font-size: 2.93333vw;
        line-height: 200%;

        margin-top: 1.33333vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices--ctr
    {
        width: 60vw;
        min-width: 840px;
        margin: 5.6391% auto 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices--ctr
    {
        margin-top: 9.86667vw;
    }
}
#mainContents .p-voices .p-voices--ctr .p-voices_list__itm
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm
    {
        width: 52vw;
        min-width: 728px;
    }
}
#mainContents .p-voices .p-voices--ctr .p-voices_list__itm:nth-child(2n)
{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; 

    margin-left: auto;
}
#mainContents .p-voices .p-voices--ctr .p-voices_list__itm:nth-child(2n) .p-voices_list__itm__txt:after
{
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm:nth-child(2n) .p-voices_list__itm__txt:after
    {
        left: -1.42857vw !important;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm:nth-child(2n) .p-voices_list__itm__txt:after
    {
        left: -5.33333vw !important;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm + .p-voices_list__itm
    {
        margin-top: 4.7619%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm + .p-voices_list__itm
    {
        margin-top: 8vw;
    }
}
#mainContents .p-voices .p-voices--ctr .p-voices_list__itm__txt
{
    position: relative; 

    -webkit-box-sizing: border-box; 

    box-sizing: border-box;

    background-color: #191919;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm__txt
    {
        font-size: 17px;
        line-height: 30.6px;

        width: 44vw;
        min-width: 616px;
        padding: 2.43506% 0 2.27273% 2.5974%;

        letter-spacing: .12em;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm__txt
    {
        font-size: 3.46667vw;
        line-height: 180%; 

        width: 70.13333vw;
        padding: 5.33333vw 3.46667vw 4.53333vw 4vw;
    }
}
#mainContents .p-voices .p-voices--ctr .p-voices_list__itm__txt:after
{
    position: absolute;

    display: block;

    content: '';

    background-image: url(../img/img_fukidashi.svg);
    background-repeat: no-repeat;
    background-size: auto;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm__txt:after
    {
        top: 1.42857vw; 
        right: -1.42857vw;

        width: 1.42857vw;
        height: 1.42857vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm__txt:after
    {
        top: 4vw; 
        right: -5.33333vw;

        width: 5.33333vw;
        height: 5.33333vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm__speaker
    {
        width: 5vw;
        min-width: 70px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm__speaker
    {
        width: 15.46667vw;
    }
}
#mainContents .p-voices .p-voices--ctr .p-voices_list__itm__speaker__img
{
    margin: 0 auto;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm__speaker__img
    {
        width: 3.78571vw;
        min-width: 53px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm__speaker__img
    {
        width: 11.73333vw;
    }
}
#mainContents .p-voices .p-voices--ctr .p-voices_list__itm__speaker__txt
{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 26px;

    margin-top: 5px; 

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

    color: #e1c98e;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices--ctr .p-voices_list__itm__speaker__txt
    {
        font-size: 2.93333vw;
        line-height: 236.36364%;

        margin-top: 1.33333vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices_note--ctr
    {
        width: 97.83835%; 
        margin: 13.81579% auto 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices_note--ctr
    {
        margin-top: 26.66667vw;
    }
}
#mainContents .p-voices .p-voices_note--ctr .p-voices_note__ttl
{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 23.4px;

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

    color: #e1c98e;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices_note--ctr .p-voices_note__ttl
    {
        font-size: 4.26667vw;
        line-height: 150%;
    }
}
#mainContents .p-voices .p-voices_note--ctr .p-voices_note__txt
{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;

    width: 100%;

    text-align: center; 

    border: 1px solid rgba(225, 201, 142, .5);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-voices .p-voices_note--ctr .p-voices_note__txt
    {
        font-size: 17px;
        line-height: 30.6px;

        margin-top: 2.64286vw;
        padding: 4.80307% 0 4.32277%;

        letter-spacing: .12em;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-voices .p-voices_note--ctr .p-voices_note__txt
    {
        font-size: 3.46667vw;
        line-height: 180%; 

        margin-top: 5.33333vw;
        padding: 5.33333vw 0;
    }
}
#mainContents .p-voices .p-voices_note--ctr .p-voices_note__txt span
{
    color: #e1c98e;
}
#mainContents .p-campaign .p-campaign__img
{
    display: block;

    margin-right: auto; 
    margin-left: auto;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-campaign .p-campaign__img
    {
        width: 52.35714vw;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-campaign .p-campaign__img
    {
        width: 100%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents #BEERY_BANNER
    {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        max-width: 1500px;
        margin: 0 auto;
    }
    #mainContents #BEERY_BANNER .l-content--inr
    {
        width: 76%;
        padding: 0;
    }

    #mainContents .p-banner
    {
        /* display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-pack: center;

        -webkit-justify-content: center;

        -ms-flex-pack: center;

        justify-content: center; */
    }
}

#mainContents .p-banner--ctr
{
    display: inline-block;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-banner--ctr
    {
        /* width: 47.36842%;
        min-width: 504px; */

        -webkit-transition: opacity .5s;

        transition: opacity .5s; 

        opacity: 1;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-banner--ctr:hover
    {
        opacity: .7;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-banner--ctr + .p-banner--ctr
    {
        margin-left: 5.26316%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents #BEERY_BANNER
    {
        flex-wrap: wrap;
    }
    #mainContents #BEERY_BANNER .l-content--inr
    {
        max-width:100%;
        padding: 0 4vw;
    }

    #mainContents .p-banner--ctr + .p-banner--ctr
    {
        margin-top: 20px;
    }
}
#mainContents .p-process.is-show .p-process__content__2
{
    opacity: 1;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process.is-show .p-process__content__2__img
    {
        opacity: 1;
    }
}
#mainContents .p-process.is-show .p-process__content__3
{
    opacity: 1;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process--ctr
    {
        margin: 0 15.42857% 0 5.78571%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process--ctr
    {
        margin: 0 6.66667%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        margin-top: 65px; 

        -webkit-box-pack: justify; 

        -webkit-justify-content: space-between; 

        -ms-flex-pack: justify; 

        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content
    {
        position: relative;

        margin-top: 35px;
    }
}
#mainContents .p-process__content .p-process__content__2__number.is-left .p-process__content__2__number--inr
{
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
#mainContents .p-process__content.is-active .p-process__content__2__number.is-left .p-process__content__2__number--inr
{
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content.is-active .p-process__content__2__number.is-left .p-process__content__2__number--inr
    {
        -webkit-animation-name: numberAnimationLeft;
        animation-name: numberAnimationLeft;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content.is-active .p-process__content__2__number.is-left .p-process__content__2__number--inr
    {
        -webkit-animation-name: numberAnimationLeftSP;
        animation-name: numberAnimationLeftSP;
    }
}
#mainContents .p-process__content.is-active .p-process__content__2__number.is-right .p-process__content__2__number--inr
{
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content.is-active .p-process__content__2__number.is-right .p-process__content__2__number--inr
    {
        -webkit-animation-name: numberAnimationRight;
        animation-name: numberAnimationRight;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content.is-active .p-process__content__2__number.is-right .p-process__content__2__number--inr
    {
        -webkit-animation-name: numberAnimationRightSP;
        animation-name: numberAnimationRightSP;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content.is-active .p-process__content__2__arrow
    {
        width: 100%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content.is-active .p-process__content__2__arrow
    {
        height: 100%;
    }
}

@-webkit-keyframes numberAnimationLeft
{
    0%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100%
    {
        -webkit-transform: translateY(-80%);
        transform: translateY(-80%);
    }
}

@keyframes numberAnimationLeft
{
    0%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100%
    {
        -webkit-transform: translateY(-80%);
        transform: translateY(-80%);
    }
}

@-webkit-keyframes numberAnimationLeftSP
{
    0%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100%
    {
        -webkit-transform: translateY(-83%);
        transform: translateY(-83%);
    }
}

@keyframes numberAnimationLeftSP
{
    0%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100%
    {
        -webkit-transform: translateY(-83%);
        transform: translateY(-83%);
    }
}

@-webkit-keyframes numberAnimationRight
{
    0%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100%
    {
        -webkit-transform: translateY(-97.3%);
        transform: translateY(-97.3%);
    }
}

@keyframes numberAnimationRight
{
    0%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100%
    {
        -webkit-transform: translateY(-97.3%);
        transform: translateY(-97.3%);
    }
}

@-webkit-keyframes numberAnimationRightSP
{
    0%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100%
    {
        -webkit-transform: translateY(-97.7%);
        transform: translateY(-97.7%);
    }
}

@keyframes numberAnimationRightSP
{
    0%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100%
    {
        -webkit-transform: translateY(-97.7%);
        transform: translateY(-97.7%);
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__1
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        width: 34.4515%;

        -webkit-box-align: center;

        -webkit-align-items: center;

        -ms-flex-align: center;

        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__1
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;

        -webkit-box-sizing: border-box;

        box-sizing: border-box; 
        width: 100%;
        padding-right: 16.04938%;
        padding-left: 5.55556%;

        -webkit-box-pack: justify;

        -webkit-justify-content: space-between;

        -ms-flex-pack: justify;

        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__1__txt
    {
        width: 25.64103%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__1__txt
    {
        width: 28.57143%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__1__movie
    {
        width: 66.15385%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__1__movie
    {
        width: 63.49206%;
    }
}
#mainContents .p-process__content__1__movie video
{
    width: 100%;
}
#mainContents .p-process__content__2
{
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
    -webkit-transition-delay: .5s;
    transition-delay: .5s; 

    opacity: 0;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2
    {
        width: 35.35811%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        width: 100%;
        margin-top: 48px; 

        -webkit-box-pack: justify; 

        -webkit-justify-content: space-between; 

        -ms-flex-pack: justify; 

        justify-content: space-between;
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
}
#mainContents .p-process__content__2__img
{
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
    -webkit-transition-delay: 4s;
    transition-delay: 4s; 

    opacity: 0;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__img
    {
        width: 39.38462%;
        padding-left: 6.15385%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__anim--ctr
    {
        width: 45.53846%;
        margin-bottom: 30px;
    }
}
#mainContents .p-process__content__2__hdg
{
    width: 241px;
    margin: 0 auto;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__hdg
    {
        width: 241px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__hdg
    {
        width: 100%;
    }
}
#mainContents .p-process__content__2__number--wrap
{
    position: relative;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;
    overflow: hidden; 

    -webkit-box-pack: center; 

    -webkit-justify-content: center; 

    -ms-flex-pack: center; 

    justify-content: center;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__number--wrap
    {
        margin-top: 25px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__number--wrap
    {
        margin-top: 20px;

        -webkit-justify-content: space-around;

        -ms-flex-pack: distribute;

        justify-content: space-around;
    }
}
#mainContents .p-process__content__2__number--wrap:before
{
    font-size: 14px;

    position: absolute;
    top: 0;

    content: '��';

    color: #fff;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__number--wrap:before
    {
        top: 14px;
        left: calc(50% + 120px);

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

        transform: translateX(-50%);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__number--wrap:before
    {
        right: 0;
    }
}
#mainContents .p-process__content__2__number
{
    position: relative;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__number
    {
        width: 80px;
        height: 120px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__number
    {
        width: 31.08108%;
        height: 90px;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__number.is-period
    {
        width: 20px;
        height: 18px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__number.is-period
    {
        width: 11px;
        height: 13px;
        margin-bottom: 10px;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__number.is-percentage
    {
        width: 60px;
        height: 52px;
        margin-bottom: 8px; 
        margin-left: 10px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__number.is-percentage
    {
        width: 30px;
        height: 30px;
        margin-bottom: 10px; 
        margin-left: 10px;
    }
}
#mainContents .p-process__content__2__number img
{
    height: 100%;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__number.is-left img,
    #mainContents .p-process__content__2__number.is-right img
    {
        height: 100px;
    }
    #mainContents .p-process__content__2__number.is-left img + img,
    #mainContents .p-process__content__2__number.is-right img + img
    {
        margin-top: 20px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__number.is-left img,
    #mainContents .p-process__content__2__number.is-right img
    {
        height: 80px;
    }
    #mainContents .p-process__content__2__number.is-left img + img,
    #mainContents .p-process__content__2__number.is-right img + img
    {
        margin-top: 20px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__number.is-right
    {
        margin-left: 5px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__arrow--wrap
    {
        position: absolute;
        top: 50%;
        right: 14%;

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        display: flex;

        width: 30px;
        height: 120px; 

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

        transform: translateY(-50%);
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__arrow
    {
        position: relative;

        width: 20%;
        margin-top: 16.66667%; 

        -webkit-transition: width 3s; 

        transition: width 3s;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
    }
    #mainContents .p-process__content__2__arrow::before
    {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 2px;

        content: '';

        background-color: rgba(225, 201, 142, .5);
    }
    #mainContents .p-process__content__2__arrow::after
    {
        position: absolute;
        right: 0;
        bottom: -2px;

        width: 40px;
        height: 2px;

        content: '';
        -webkit-transform: rotate(22deg);
        transform: rotate(22deg);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom; 

        background-color: rgba(225, 201, 142, .5);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__arrow
    {
        position: relative; 

        width: 100%;
        height: 40%;

        -webkit-transition: height 3s;

        transition: height 3s;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
    }
    #mainContents .p-process__content__2__arrow::before
    {
        position: absolute;
        top: 0;
        left: 0;

        width: 2px;
        height: 100%;

        content: '';

        background-color: rgba(225, 201, 142, .5);
    }
    #mainContents .p-process__content__2__arrow::after
    {
        position: absolute;
        bottom: 0;
        left: 2px;

        width: 40px;
        height: 2px;

        content: '';
        -webkit-transform: rotate(-115deg);
        transform: rotate(-115deg);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom; 

        background-color: rgba(225, 201, 142, .5);
    }
}
#mainContents .p-process__content__2__arrow__txt
{
    color: #e1c98e;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__arrow__txt
    {
        font-size: 20px;
        line-height: 1em;

        padding-top: 5%;

        text-align: center;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__arrow__txt
    {
        font-size: 12px; 

        -webkit-writing-mode: vertical-rl; 

        -ms-writing-mode: tb-rl; 

        writing-mode: vertical-rl;
    }
}
#mainContents .p-process__content__2__note
{
    font-family: 'Noto Sans JP', sans-serif; 

    letter-spacing: .03em;

    color: rgba(255, 255, 255, .8);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__2__note
    {
        font-size: 11px;
        line-height: 16px;

        display: inline-block;

        margin-top: 6.66667%;

        text-align: center;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__content__2__note
    {
        font-size: 11px;
        line-height: 20px;

        display: inline-block;

        margin-top: 6.66667%;
        margin-left: 4.61538%;

        text-indent: -1em;
    }
}
#mainContents .p-process__content__3
{
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
    -webkit-transition-delay: 4s;
    transition-delay: 4s; 

    opacity: 0;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__content__3
    {
        width: 21.66818%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__description--wrap
    {
        margin-top: 56px;
    }
}
#mainContents .p-process__description
{
    padding: 18px 0 28px;

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

    background-color: #191919;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__description
    {
        font-size: 20px;
        line-height: 44px;

        min-width: 850px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__description
    {
        font-size: 13px;
        line-height: 28px; 

        margin-top: 40px;
    }
}
#mainContents .p-process__description span
{
    font-weight: 700;

    position: relative;

    padding-bottom: 3px; 

    color: #e1c98e;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-process__description span
    {
        font-size: 22px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-process__description span
    {
        font-size: 15px;
    }
}
#mainContents .p-process__description span::before
{
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 1px;

    content: '';

    background-color: rgba(225, 201, 142, .5);
}
#mainContents .p-store .p-store__btn
{
    background-color: #191919;
}
#mainContents .p-store .p-store__btn > a,
#mainContents .p-store .p-store__btn > button
{
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}
#mainContents .p-store .p-store__btn > button
{
    padding: 0;
    border: none;
    outline: none;
    font: inherit;
    color: inherit;
    background: none;
}

@media screen and (min-width: 768px)
{
    #mainContents .p-store {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    #mainContents .p-store .p-store__btn > button {
        cursor: pointer;
    }
	#mainContents .p-store .p-store__btn > a,
    #mainContents .p-store .p-store__btn > button
	{
		-webkit-transition: all .7s ease;
		transition: all .7s ease;
	}
	#mainContents .p-store .p-store__btn > a,
    #mainContents .p-store .p-store__btn > button
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding: 10.8% 10% 10.1% 2.4%;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    #mainContents .p-store .p-store__btn > a:hover .p-store_btn__icon,
    #mainContents .p-store .p-store__btn > button:hover .p-store_btn__icon,
    #mainContents .p-store .p-store__btn > a:hover .p-store_btn__icon__arrow,
    #mainContents .p-store .p-store__btn > button:hover .p-store_btn__icon__arrow {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        border-radius: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #mainContents .p-store .p-store__btn.-active > button:hover .p-store_btn__icon__arrow {
        transform: scale(1.2) rotate(180deg);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-store .p-store__btn + .p-store__btn {
        margin-top: calc(40 / 375 * 100vw);
    }
    #mainContents .p-store .p-store__btn > a,
    #mainContents .p-store .p-store__btn > button
    {
        padding: 7.46667vw 0 6.66667vw;
    }
}
#mainContents .p-store .p-store_btn__txt
{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;

    letter-spacing: .12em;

    color: #fff !important;
}
#mainContents .p-store .p-store_btn__txt .icon-new
{
	font-size: 88%;
    color: #ff0000;
    margin-right: 2.14286vw;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-store .p-store_btn__txt
    {
        font-size: 16px;
        text-align: center;
        line-height: 34px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-store .p-store_btn__txt
    {
        font-size: 4.8vw;
        line-height: 180%;

        text-align: center;
    }
	#mainContents .p-store .p-store_btn__txt .icon-new
	{
		display: block;
	}
}
#mainContents .p-store .p-store_btn__icon,
#mainContents .p-store .p-store_btn__icon__arrow
{
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    background-repeat: no-repeat;
    background-position: center;
}
#mainContents .p-store .p-store_btn__icon
{
    background-image: url(../img/icon_info_btn.png);
}
#mainContents .p-store .p-store_btn__icon__arrow
{
    background-image: url(../img/icon_info_btn_arrow.png);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-store .p-store_btn__icon,
    #mainContents .p-store .p-store_btn__icon__arrow
    {
        width: 3.57143vw;
        max-width: 50px;
        height: 3.57143vw;
        max-height: 50px;
        /* margin-left: 2.14286vw; */

        background-size: 100% auto;
        position: absolute;
        right: 5.2%;
        top: 50%;
        margin-top: max(-1.785715vw, -25px);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-store .p-store_btn__icon,
    #mainContents .p-store .p-store_btn__icon__arrow
    {
        width: 13.33333vw;
        height: 13.33333vw;
        margin: 5.33333vw auto 0;

        background-size: contain;
    }
}
#mainContents .p-store .p-store-map_btn__icon
{
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    background-image: url(../img/icon_store-map_btn.png);
    background-repeat: no-repeat;
    background-position: center;
	width: 100%;
}
@media screen and (min-width: 768px)
{
	#mainContents .p-store .p-store__btn
	{
		width: 47.368421%;
		position: relative;
	}
    #mainContents .p-store .p-store-map_btn__icon
    {
        width: 2.143vw;
        max-width: 50px;
        height: 2.143vw;
        margin-right: 7px;
        background-size: 100% auto;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-store .p-store-map_btn__icon
    {
        width: 13.33333vw;
        height: 13.33333vw;
        margin: 0 auto 0;

        background-size: contain;
    }
}
#mainContents .p-store-online {
    display: none;
    overflow: hidden;
    transition: height 0.3s ease;
}
#mainContents .p-store_btn__icon__arrow {
    transition: transform 0.3s ease;
}
#mainContents .p-store__btn.-active .p-store_btn__icon__arrow {
    transform: rotate(180deg);
}
#mainContents .p-store-online__inner {
    position: relative;
}
#mainContents .p-store-online__inner::before {
    content: "";
    display: block;
    background-color: #E1C98E;
    position: absolute;
    top: 0;
    height: 1px;
}
#mainContents .p-store-online .p-store-online__list {
    display: flex;
    align-items: flex-start;
}
#mainContents .p-store-online__item a {
    display: block;
}
@media screen and (min-width: 768px) {
    #mainContents .p-store-online__inner {
        padding: calc(40 / 504 * 100%) calc(25 / 504 * 100%);
    }
    #mainContents .p-store-online__inner::before {
        width: calc(454 / 504 * 100%);
        left: calc(25 / 504 * 100%);
    }
    #mainContents .p-store-online .p-store-online__list {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #mainContents .p-store-online__item {
        width: calc(145 / 504 * 100%);
    }
}
@media screen and (max-width: 767px) {
    #mainContents .p-store-online__inner {
        padding: calc(28 / 375 * 100vw) calc(15 / 375 * 100vw);
    }
    #mainContents .p-store-online__inner::before {
        width: calc(305 / 375 * 100vw);
        left: calc(20 / 375 * 100vw);
    }
    #mainContents .p-store-online .p-store-online__list {
        flex-wrap: wrap;
        justify-content: center;
    }
    #mainContents .p-store-online__item {
        width: calc(145 / 375 * 100vw);
    }
    #mainContents .p-store-online__item:nth-of-type(n+3) {
        margin-top: calc(15 / 375 * 100vw);
    }
    #mainContents .p-store-online__item:nth-of-type(2n) {
        margin-left: calc(15 / 375 * 100vw);
    }
}

#mainContents .p-faq .p-faq__btn
{
    display: block;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;
    width: 100%;

    background-color: #191919;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-faq .p-faq__btn
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        padding: 4.13534%; 

        -webkit-box-pack: center; 

        -webkit-justify-content: center; 

        -ms-flex-pack: center; 

        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    #mainContents .p-faq .p-faq__btn:hover .p-faq_btn__icon
    {
        -webkit-transform: scale(1.2);
        transform: scale(1.2); 

        background-image: url(../img/icon_faq_btn-hover.png);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-faq .p-faq__btn
    {
        padding: 7.46667vw 0 6.66667vw;
    }
}
#mainContents .p-faq .p-faq_btn__txt
{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;

    letter-spacing: .12em; 

    color: #fff !important;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-faq .p-faq_btn__txt
    {
        font-size: 22px;
        line-height: 34px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-faq .p-faq_btn__txt
    {
        font-size: 4.8vw;
        line-height: 180%;

        text-align: center;
    }
}
#mainContents .p-faq .p-faq_btn__icon
{
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease; 
    -webkit-transition-duration: .5s; 
    transition-duration: .5s;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;

    background-image: url(../img/icon_faq_btn.png);
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-faq .p-faq_btn__icon
    {
        width: 3.57143vw;
        max-width: 50px;
        height: 3.57143vw;
        margin-left: 2.14286vw;

        background-size: 100% auto;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-faq .p-faq_btn__icon
    {
        width: 13.33333vw;
        height: 13.33333vw;
        margin: 5.33333vw auto 0;

        background-size: contain;
    }
}
#mainContents .c-beery-hdg--lv2
{
    font-family: 'Noto Serif JP', serif;
    font-size: 42px;
    font-weight: normal; 
    line-height: 54px;

    letter-spacing: .08em;
}
@media screen and (max-width: 767px)
{
    #mainContents .c-beery-hdg--lv2
    {
        font-size: 8.53333vw;
        line-height: 180%;
    }
}
#mainContents .c-beery-hdg--lv2.is-center
{
    text-align: center;

    color: #e1c98e;
}
#mainContents .c-beery-hdg--lv3
{
    font-family: 'Noto Serif JP', serif;
    font-size: 32px;
    font-weight: normal; 
    line-height: 54px;

    letter-spacing: .08em;
}
@media screen and (max-width: 767px)
{
    #mainContents .c-beery-hdg--lv3
    {
        font-size: 5.33333vw;
        line-height: 180%;
    }
}
#mainContents .c-beery-hdg--lv3.is-center
{
    text-align: center;

    color: #e1c98e;
}
#mainContents .c-beery-movie_frm::before,
#mainContents .c-beery-movie_frm::after
{
    position: absolute;
    z-index: 7;
    left: 0;

    display: block;

    width: 100%;
    height: 7.14286vw; 

    content: '';

    background-repeat: no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 767px)
{
    #mainContents .c-beery-movie_frm::before,
    #mainContents .c-beery-movie_frm::after
    {
        height: 13.33333vw;
    }
}
#mainContents .c-beery-movie_frm::before
{
    top: -1px;
}
@media screen and (min-width: 768px)
{
    #mainContents .c-beery-movie_frm::before
    {
        background-image: url(../img/frm_mov_pc.png);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-beery-movie_frm::before
    {
        background-image: url(../img/frm_mov_sp.png);
    }
}
#mainContents .c-beery-movie_frm::after
{
    bottom: -1px;

    -webkit-transform: scale(-1, 1) rotate(180deg);

    transform: scale(-1, 1) rotate(180deg);
}
@media screen and (min-width: 768px)
{
    #mainContents .c-beery-movie_frm::after
    {
        background-image: url(../img/frm_mov_pc.png);
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-beery-movie_frm::after
    {
        background-image: url(../img/frm_mov_sp.png);
    }
}
#mainContents .p-cm .p-cm_hdg
{
    font-size: 42px !important;
    line-height: 57.6px !important;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_hdg
    {
        font-size: 8.53333vw !important;
        line-height: 112.5% !important;
    }
}
#mainContents .p-cm .p-cm_mov--wrp
{
    margin-top: 3.92857vw;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_mov--wrp
    {
        margin-top: 12.8vw;
    }
}
#mainContents .p-cm .p-cm_mov__list
{
    position: relative;
}
#mainContents .p-cm .p-cm_mov__list__itm
{
    padding: 0 50px;

    -webkit-transition: -webkit-transform .5s;

    transition: -webkit-transform .5s;

    transition: transform .5s;

    transition: transform .5s, -webkit-transform .5s; 
    -webkit-transform: scale(.82); 
    transform: scale(.82);
}
#mainContents .p-cm .p-cm_mov__list__itm + .slick-current
{
    -webkit-transform: scale(1);
    transform: scale(1);
}
#mainContents .p-cm .p-cm_mov__slider__btn
{
    position: absolute;
    z-index: 2; 

    -webkit-transition: -webkit-transform .5s; 

    transition: -webkit-transform .5s; 

    transition: transform .5s; 

    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);

    border: solid 1px rgba(225, 201, 142, .5);
    border-radius: 100px;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_mov__slider__btn
    {
        top: 39%;

        width: 50px;
        height: 50px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_mov__slider__btn
    {
        top: 34%;

        width: 50px;
        height: 50px;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_mov__slider__btn.is-prev
    {
        left: 24%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_mov__slider__btn.is-prev
    {
        left: 4%;
    }
}
#mainContents .p-cm .p-cm_mov__slider__btn.is-next
{
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_mov__slider__btn.is-next
    {
        left: 76%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_mov__slider__btn.is-next
    {
        right: -9%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_mov__slider__btn:hover
    {
        background-color: #e1c98e;
    }
    #mainContents .p-cm .p-cm_mov__slider__btn:hover.is-prev
    {
        -webkit-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }
    #mainContents .p-cm .p-cm_mov__slider__btn:hover.is-next
    {
        -webkit-transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
        transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
    }
    #mainContents .p-cm .p-cm_mov__slider__btn:hover .p-cm_mov__slider__btn__arrow:before,
    #mainContents .p-cm .p-cm_mov__slider__btn:hover .p-cm_mov__slider__btn__arrow:after
    {
        background-color: #000;
    }
}
#mainContents .p-cm .p-cm_mov__slider__btn__arrow
{
    position: relative;

    width: 100%;
    height: 100%;
}
#mainContents .p-cm .p-cm_mov__slider__btn__arrow:before,
#mainContents .p-cm .p-cm_mov__slider__btn__arrow:after
{
    position: absolute;

    width: 10px;
    height: 1px;

    content: '';

    background-color: #fff;
}
#mainContents .p-cm .p-cm_mov__slider__btn__arrow:before
{
    top: 54%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%) rotate(20deg);

    transform: translate(-50%, -50%) rotate(20deg);
}
#mainContents .p-cm .p-cm_mov__slider__btn__arrow:after
{
    top: 46%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%) rotate(-20deg);

    transform: translate(-50%, -50%) rotate(-20deg);
}
#mainContents .p-cm .p-cm_mov__slider__dots
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    margin-top: 50px; 

    -webkit-box-pack: center; 

    -webkit-justify-content: center; 

    -ms-flex-pack: center; 

    justify-content: center;
}
#mainContents .p-cm .p-cm_mov__slider__dots li
{
    line-height: 0;

    position: relative;

    height: 2px;

    cursor: pointer;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_mov__slider__dots li
    {
        width: 40px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_mov__slider__dots li
    {
        width: 30px;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_mov__slider__dots li + li
    {
        margin-left: 20px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_mov__slider__dots li + li
    {
        margin-left: 10px;
    }
}
#mainContents .p-cm .p-cm_mov__slider__dots li.slick-active button
{
    background-color: #e1c98e;
}
#mainContents .p-cm .p-cm_mov__slider__dots li:before,
#mainContents .p-cm .p-cm_mov__slider__dots li:after
{
    position: absolute;
    left: 0;

    width: 100%;
    height: 10px; 

    content: '';
}
#mainContents .p-cm .p-cm_mov__slider__dots li:before
{
    top: -10px;
}
#mainContents .p-cm .p-cm_mov__slider__dots li:after
{
    bottom: -10px;
}
#mainContents .p-cm .p-cm_mov__slider__dots button
{
    font-size: 0;

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    -webkit-transition: background-color .5s;

    transition: background-color .5s;

    border: none;
    outline: none; 
    background-color: rgba(225, 201, 142, .25);
}
#mainContents .p-cm .p-cm_mov_thumb--wrp
{
    position: relative; 

    width: 100%;
}
{
    position: relative; 

    width: 100%;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_mov_thumb--wrp:hover .p-cm_mov_thumb img
    {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
}
#mainContents .p-cm .p-cm_mov_thumb
{
    overflow: hidden; 

    width: 100%;

    cursor: pointer;
    
    display: block;
    margin: auto;
}
@media screen and (min-width: 768px)
{
#mainContents .p-cm .p-cm_mov_thumb{
    max-width: 60vw;
    }
}
#mainContents .p-cm .p-cm_mov_thumb img
{
    -webkit-transition-duration: .2s;
    transition-duration: .2s; 
    -webkit-transition-property: -webkit-transform; 
    transition-property: -webkit-transform; 
    transition-property: transform; 
    transition-property: transform, -webkit-transform;
    -webkit-transform: scale(1.001);
    transform: scale(1.001);
}
#mainContents .p-cm .p-cm_mov_thumb--btn
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 50px; 

    cursor: pointer;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_mov_thumb--btn
    {
        width: 38px;
    }
}
#mainContents .p-cm .p-cm_mov_thumb--btn .is-hover
{
    position: absolute;
    top: 0;
    left: 0;

    visibility: hidden; 

    opacity: 0;
}
#mainContents .p-cm .p-cm_mov_ttl
{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 34px;

    margin-top: 1.5873%; 

    text-align: center;
    letter-spacing: .12em;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_mov_ttl
    {
        font-size: 4.26667vw;
        line-height: 1.8em;

        margin-top: 3.73333vw;

        letter-spacing: .12em;
    }
}
#mainContents .p-cm .p-cm_mov_ttl .is-text-trademark
{
    font-size: 8px;
}
#mainContents .p-cm .p-cm_actor--wrp
{
    border-bottom: 1px solid rgba(225, 201, 142, .5);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_actor--wrp
    {
        margin-top: 7.33083%;
        padding-bottom: 5.5%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor--wrp
    {
        margin-top: 11.2%;
        padding-bottom: 10.13333%;
    }
}
#mainContents .p-cm .p-cm_actor__hdg
{
    font-size: 26px;
    line-height: 57.6px;

    position: relative; 

    display: -webkit-box; 

    display: -webkit-flex; 

    display: -ms-flexbox; 

    display: flex;

    letter-spacing: .08em;

    color: #e1c98e;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor__hdg
    {
        font-size: 5.33333vw;
        line-height: 288%;
    }
}
#mainContents .p-cm .p-cm_actor__hdg::after
{
    position: absolute;

    display: block;

    height: 1px;

    content: '';

    background-color: rgba(225, 201, 142, .5);
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_actor__hdg::after
    {
        top: 17px; 
        left: 206px;

        width: 80.6391%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor__hdg::after
    {
        top: 5.7971%;
        top: 5.6vw; 
        left: 45.33333vw;

        width: 50.72464%;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_actor
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        margin-top: 3.7594%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor
    {
        margin-top: 4.53333vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_actor.is-reverse
    {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
}
#mainContents .p-cm .p-cm_actor.is-reverse .p-cm_actor__txt-ctr
{
    padding-left: 0;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_actor.is-reverse .p-cm_actor__txt-ctr
    {
        margin-bottom: -.65789%;
        padding-right: 5.26316%;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor.is-reverse .p-cm_actor__img-ctr
    {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
    #mainContents .p-cm .p-cm_actor.is-reverse .p-cm_actor__img-ctr .p-cm_actor__name
    {
        margin-right: 8vw; 
        margin-left: 0 !important;
    }
}
#mainContents .p-cm .p-cm_actor + .p-cm_actor
{
    margin-top: 5.6391%;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor + .p-cm_actor
    {
        margin-top: 10.66667vw;
    }
}
#mainContents .p-cm .p-cm_actor__img
{
    width: 100%;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor__img
    {
        width: 74.66667vw;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_actor__img-ctr
    {
        width: 36.84211%;

        -webkit-flex-shrink: 0;

        -ms-flex-negative: 0;

        flex-shrink: 0;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor__img-ctr
    {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}
#mainContents .p-cm .p-cm_actor__txt-ctr
{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;

    width: 100%;
}
@media screen and (min-width: 768px)
{
    #mainContents .p-cm .p-cm_actor__txt-ctr
    {
        padding-left: 5.26316%;
    }
}
#mainContents .p-cm .p-cm_actor__name
{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 22px;
    font-weight: 300;
    font-weight: 400 !important;
    line-height: 34px;

    letter-spacing: .12em;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor__name
    {
        font-size: 4.8vw;
        line-height: 133.33333%;

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column; 

        margin-left: 5.86667vw;

        -ms-writing-mode: tb-rl;

            -webkit-writing-mode: tb;

            writing-mode: tb;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
#mainContents .p-cm .p-cm_actor__txt
{
    font-size: 13px;
    line-height: 26px;

    margin-top: 5.58376%; 

    letter-spacing: .12em;
}
@media screen and (max-width: 767px)
{
    #mainContents .p-cm .p-cm_actor__txt
    {
        font-size: 2.93333vw;
        line-height: 200%;

        margin-top: 4.26667vw;
    }
}
#mainContents .p-cm .p-cm-anim-fadein
{
    visibility: hidden;

    -webkit-transition-timing-function: ease;

    transition-timing-function: ease; 
    -webkit-transition-duration: 1s; 
    transition-duration: 1s;
    -webkit-transition-property: opacity, visibility;
    transition-property: opacity, visibility;

    opacity: 0;
}
#mainContents .p-cm .p-cm-anim-fadein.is-show
{
    visibility: visible; 

    opacity: 1;
}
#mainContents .p-cm .p-cm-anim-fadein--l
{
    visibility: hidden;

    -webkit-transition-timing-function: ease;

    transition-timing-function: ease;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: opacity, visibility;
    transition-property: opacity, visibility;
    -webkit-transition-property: opacity, visibility, -webkit-transform;
    transition-property: opacity, visibility, -webkit-transform;
    transition-property: opacity, visibility, transform;
    transition-property: opacity, visibility, transform, -webkit-transform;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px); 

    opacity: 0;
}
#mainContents .p-cm .p-cm-anim-fadein--l.is-show
{
    visibility: visible; 

    opacity: 1;
}
#mainContents .p-cm .p-cm-anim-fadein--l.is-show
{
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
#mainContents .p-cm .p-cm-anim-fadein--r
{
    visibility: hidden;

    -webkit-transition-timing-function: ease;

    transition-timing-function: ease;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: opacity, visibility;
    transition-property: opacity, visibility;
    -webkit-transition-property: opacity, visibility, -webkit-transform;
    transition-property: opacity, visibility, -webkit-transform;
    transition-property: opacity, visibility, transform;
    transition-property: opacity, visibility, transform, -webkit-transform;
    -webkit-transform: translateX(50px);
    transform: translateX(50px); 

    opacity: 0;
}
#mainContents .p-cm .p-cm-anim-fadein--r.is-show
{
    visibility: visible; 

    opacity: 1;
}
#mainContents .p-cm .p-cm-anim-fadein--r.is-show
{
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
#mainContents .c-note .c-note__recycle {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    text-align: center;
}
@media screen and (min-width: 768px){
#mainContents .c-note .c-note__recycle {
    margin-top: 0.71429vw;
    }
}

#mainContents .c-note .c-note__recycle
{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;

    text-align: center;
}
@media screen and (min-width: 768px)
{
    #mainContents .c-note .c-note__recycle
    {
        margin-top: .71429vw;
    }
}
@media screen and (min-width: 768px) and (max-width: 1080px)
{
    #mainContents .c-note .c-note__recycle
    {
        margin-top: 7.71429px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__recycle
    {
        margin-top: 2.66667vw;
    }
}
#mainContents .c-note .c-note__recycle .c-note__recycle-inner
{
    display: inline-block;

    background-color: #191919;
}
@media screen and (min-width: 768px)
{
    #mainContents .c-note .c-note__recycle .c-note__recycle-inner
    {
        font-size: 11px;
        font-weight: 400;
        line-height: 2;

        padding: .42857vw .71429vw; 

        letter-spacing: .12em;
    }
}
@media screen and (min-width: 768px) and (max-width: 1080px)
{
    #mainContents .c-note .c-note__recycle .c-note__recycle-inner
    {
        padding: 4.62857px 7.71429px;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__recycle .c-note__recycle-inner
    {
        font-size: 2.93333vw;
        font-weight: 400;
        line-height: 2;

        padding: 1.33333vw 2.66667vw; 

        letter-spacing: .12em;
    }
}
@media screen and (min-width: 768px)
{
    #mainContents .c-note .c-note__recycle .c-note__recycle-inner img
    {
        width: 1.71429vw;
        vertical-align: top;
    }
}
@media screen and (min-width: 768px) and (max-width: 1080px)
{
    #mainContents .c-note .c-note__recycle .c-note__recycle-inner img
    {
        width: 18.51429px;
        vertical-align: top;
    }
}
@media screen and (max-width: 767px)
{
    #mainContents .c-note .c-note__recycle .c-note__recycle-inner img
    {
        width: 6.66667vw;
        vertical-align: top;
    }
}
#mainContents h3.banner{
    text-align: center;
    margin-bottom: 3vh;
    font-size: 18px;
}
@media screen and (max-width: 767px)
{
    #mainContents h3.banner{
    margin-top: 40px;
    font-size: 4vw;
    margin-bottom: 2vh;
    }
}