valentine/assets/css/app.css

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    line-height: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
    display: block
}

html {
    -webkit-text-size-adjust: 100%
}

body {
    line-height: 1
}

ol,
ul,
li {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

img,
svg {
    vertical-align: bottom
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none;
    border-radius: 0;
    background-color: transparent;
    outline: 0;
    resize: none;
    margin: 0;
    padding: 0;
    zoom: 1;
    border: none;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    cursor: pointer
}

button::-ms-expand {
    display: none
}

i {
    font-style: normal
}

.js_winu_edge {
    position: fixed;
    display: none
}

@supports (-ms-ime-align: auto) {
    .js_winu_edge {
        display: block
    }
}

.js_winu_landscape {
    display: block
}

@media screen and (orientation: portrait) {
    .js_winu_landscape {
        display: none
    }
}

.js_winu_mq {
    display: none
}

@media screen and (min-width: 760px),
print {
    .js_winu_mq.-pc {
        display: block
    }
}

@media screen and (max-width: 759px) {
    .js_winu_mq.-sp {
        display: block
    }
}

.js_winu_outer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    visibility: hidden
}

.js_winu_inner {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden
}

.js-ScrollFocus_inner {
    position: relative;
    min-height: 100%;
    padding: 1px 0 1px
}

.js_winu_scrollChecker {
    position: fixed;
    width: 100px;
    height: 100px;
    opacity: 0;
    overflow-y: scroll;
    pointer-events: none
}

.js_winu_scrollCheckerInner {
    height: 200px
}

.js_guide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: auto;
    pointer-events: none;
    mix-blend-mode: difference;
    z-index: 9999999
}

.js_guide.is_hidden {
    display: none
}

.js_guide_img {
    position: relative;
    display: inline-block;
    opacity: 0.2
}

.js_guide_img:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #0cf
}

.js_guide_ui {
    position: fixed;
    right: 10px;
    top: 50%;
    z-index: 10000000;
    opacity: 0.6;
    text-align: right;
    line-height: 1.5;
    font-size: 10px
}

.js_guide_ui button {
    cursor: pointer;
    background: #eee;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 0 6px;
    margin-bottom: 3px;
    font-family: sans-serif !important
}

.js_guide_ui button:hover {
    background: #000;
    color: #fff
}

.js_guide_ui button.is_alert {
    font-weight: bold !important;
    color: #fff;
    background: #c80000;
    opacity: 1
}

.js_guide_ui input[type="text"] {
    background: #ccc;
    width: 105px;
    border-width: 1px;
    font-size: 10px
}

.js_guide_ui input[type="text"]:focus {
    background: #f00;
    color: #fff
}

.js_logger {
    position: fixed;
    right: 0;
    bottom: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    width: 350px
}

.js_logger_inner {
    white-space: nowrap;
    padding: 5px;
    line-height: 1.4;
    font-size: 12px
}

.js_logger_close {
    position: absolute;
    right: 0;
    top: 0
}

.js_winu_orientation {
    display: none
}

@media screen and (orientation: landscape) {
    .js_winu_orientation {
        display: block
    }
}

.js_img {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.js_img[data-bg="1"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover
}

.js_img[data-img="1"] span {
    display: block
}

@media screen and (min-width: 760px),
print {
    .js_img[data-hero="1"] {
        background-position: center 10%
    }
}

.js_modal_bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out
}

html.is_modalShow .js_modal_bg {
    opacity: 0.7;
    visibility: visible;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out
}

html[data-current-modal="detail"].is_modalShow .js_modal_bg {
    -webkit-transition: all 100ms ease-in-out 500ms;
    transition: all 100ms ease-in-out 500ms
}

[data-current-modal="detail"] .js_modal_bg {
    opacity: 0.85 !important
}

.js_modal_bgInner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000
}

.js_modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    width: 100vw;
    display: none
}

.js_modal.is_visible {
    display: block
}

.js_modal_scroller {
    position: relative;
    height: 100%;
    overflow-y: scroll;
    -ms-scroll-chaining: none;
    overscroll-behavior: none
}

.js_modal_body {
    position: relative;
    min-height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.js_modal__half .js_modal_body {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0)
}

@media screen and (orientation: landscape) {
    .js_modal__half .js_modal_body {
        padding-right: _newScale(188);
        height: 100%;
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0)
    }
}

@media screen and (orientation: portrait) {
    .js_modal__half .js_modal_body {
        padding: _newScale(24)
    }
}

html.is_modalShow .js_modal__half .js_modal_body {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1)
}

.js_modal_content {
    position: relative;
    background: #fff;
    min-height: 100%
}

.js_modal_content.js_modal_content__transparent {
    background: transparent
}

.js_modal_contentInner {
    position: relative;
    width: 100%;
    overflow: hidden
}

.js_modal_closeWrap {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
    mix-blend-mode: difference;
    -webkit-transition: opacity 100ms ease-in-out;
    transition: opacity 100ms ease-in-out
}

.html_playerUiHidden.html_noMove .js_detail .js_modal_closeWrap {
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in-out;
    transition: opacity 400ms ease-in-out
}

.is_detailMovHidden .js_detail .js_modal_closeWrap {
    opacity: 1 !important
}

html.device-desktop .js_detail .js_modal_closeWrap:hover {
    opacity: 1 !important
}

.js_modal_closeWrapInner {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    height: 0
}

.js_modal_close {
    position: absolute;
    right: _newScale(20);
    top: _newScale(20);
    display: block;
    margin-right: var(--scroll-bar-width);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    mix-blend-mode: difference;
    opacity: 0;
    -webkit-transition: opacity 100ms ease-in-out;
    transition: opacity 100ms ease-in-out
}

@media screen and (orientation: landscape) {
    .js_modal_close {
        padding: _newScale(20);
        width: _newScale(102);
        height: _newScale(102)
    }

    [data-name="detail"] .js_modal_close {
        right: _newScale(40);
        top: _newScale(40)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_close {
        width: _newScale(51);
        height: _newScale(51)
    }

    [data-name="detail"] .js_modal_close {
        right: _newScale(15);
        top: _newScale(15)
    }

    [data-name="menu"] .js_modal_close,
    [data-name="about"] .js_modal_close {
        right: _newScale(25);
        top: _newScale(25)
    }
}

@media screen and (orientation: landscape) {

    [data-name="menu"] .js_modal_close .js_img,
    [data-name="about"] .js_modal_close .js_img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        width: _newScale(62);
        height: _newScale(62);
        margin-top: _newScale(60);
        margin-left: _newScale(64)
    }
}

.js_modal_close svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    fill: #ffffff
}

@media screen and (orientation: portrait) {
    .js_modal_close svg {
        padding: _newScale(10)
    }
}

@media screen and (orientation: landscape) {
    .js_modal__half .js_modal_close {
        right: 0;
        top: 0;
        width: _newScale(190);
        height: 100%
    }
}

html.is_modalShow .js_modal_close {
    opacity: 1
}

@media screen and (orientation: landscape) {
    .js_modal_aboutInner {
        padding: 0 _newScale(100) 0 _newScale(100)
    }

    .js_modal_aboutInner.js_modal_aboutInner__rightWide {
        padding: 0 _newScale(88) 0 _newScale(100)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutInner {
        padding: 0 _newScale(24)
    }
}

.js_modal_aboutTitle {
    position: relative
}

@media screen and (orientation: landscape) {
    .js_modal_aboutTitle {
        padding-top: _newScale(100);
        padding-bottom: _newScale(126)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutTitle {
        padding-top: _newScale(87);
        padding-bottom: _newScale(45)
    }
}

.js_modal_aboutTitleInner {
    position: relative
}

.js_modal_aboutTitleInner:before {
    content: '';
    display: block
}

.js_modal_aboutTitleInner:before {
    padding-top: 23.46939%
}

.js_modal_aboutTitleInner svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    fill: #000000
}

.js_modal_aboutTitleInner .js_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

@media screen and (orientation: landscape) {
    .js_modal_aboutTitleInner {
        width: _newScale(98)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutTitleInner {
        width: _newScale(61);
        height: _newScale(15)
    }
}

@media screen and (orientation: landscape) {
    .js_modal_aboutMov {
        position: relative;
        margin: 0 _newScale(-88) 0 _newScale(-100)
    }

    .js_modal_aboutMov:before {
        content: '';
        display: block
    }

    .js_modal_aboutMov:before {
        padding-top: 56.24%
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutMov {
        position: relative;
        margin: _newScale(74) _newScale(-25) 0 _newScale(-25)
    }

    .js_modal_aboutMov:before {
        content: '';
        display: block
    }

    .js_modal_aboutMov:before {
        padding-top: 100%
    }
}

.js_modal_aboutRow {
    display: -ms-grid;
    display: grid
}

@media screen and (orientation: landscape) {
    .js_modal_aboutRow {
        grid-template-areas: "item1 item2" "item3 item2";
        -ms-grid-columns: 1fr auto;
        grid-template-columns: 1fr auto;
        -ms-grid-rows: auto auto;
        grid-template-rows: auto auto
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutRow {
        grid-template-areas: "item1 item1" "item2 item3";
        -ms-grid-columns: -webkit-min-content 1fr;
        -ms-grid-columns: min-content 1fr;
        grid-template-columns: -webkit-min-content 1fr;
        grid-template-columns: min-content 1fr;
        -ms-grid-rows: min-content min-content;
        grid-template-rows: -webkit-min-content -webkit-min-content;
        grid-template-rows: min-content min-content
    }
}

.js_modal_aboutRowText {
    grid-area: item1
}

@media screen and (orientation: landscape) {
    .js_modal_aboutRowTextLead {
        font-size: _newScale(34);
        line-height: 1.59
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutRowTextLead {
        font-size: _newScale(19);
        line-height: 1.58
    }
}

@media screen and (orientation: landscape) {
    .js_modal_aboutRowTextLeadInner {
        padding-right: _newScale(40)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutRowTextLeadInner {
        padding-bottom: _newScale(45)
    }
}

.js_modal_aboutRowCopy {
    grid-area: item3
}

@media screen and (orientation: landscape) {
    .js_modal_aboutRowCopy {
        font-size: _newScale(70);
        line-height: 1.26
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutRowCopy {
        font-size: _newScale(29);
        line-height: 1.31
    }
}

@media screen and (orientation: landscape) {
    .js_modal_aboutRowCopyInner {
        padding-top: _newScale(85);
        padding-bottom: _newScale(125)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutRowCopyInner {
        padding-left: _newScale(17)
    }

    .html_wfActive .js_modal_aboutRowCopyInner {
        letter-spacing: -0.02em
    }
}

.js_modal_aboutRowLogo {
    grid-area: item2;
    position: relative
}

@media screen and (orientation: landscape) {
    .js_modal_aboutRowText {
        -ms-grid-row: 1;
        -ms-grid-column: 1
    }

    .js_modal_aboutRowCopy {
        -ms-grid-row: 2;
        -ms-grid-column: 1
    }

    .js_modal_aboutRowLogo {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 2
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutRowText {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2
    }

    .js_modal_aboutRowCopy {
        -ms-grid-row: 2;
        -ms-grid-column: 2
    }

    .js_modal_aboutRowLogo {
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1
    }
}

@media screen and (orientation: landscape) {
    .js_modal_aboutRowLogo {
        position: relative;
        width: _newScale(342);
        -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start
    }

    .js_modal_aboutRowLogo:before {
        content: '';
        display: block
    }

    .js_modal_aboutRowLogo:before {
        padding-top: 121.63743%
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutRowLogo {
        position: relative;
        width: _newScale(54);
        height: _newScale(66)
    }

    .js_modal_aboutRowLogo:before {
        content: '';
        display: block
    }

    .js_modal_aboutRowLogo:before {
        padding-top: 122.22222%
    }
}

.js_modal_aboutRowLogoInner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_modal_aboutRowLogoInner .js_img,
.js_modal_aboutRowLogoInner svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

@media screen and (orientation: landscape) {
    .js_modal_aboutInterview {
        padding-top: _newScale(168)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_aboutInterview {
        padding-top: _newScale(74)
    }
}

.js_modal_index {
    position: relative
}

@media screen and (orientation: landscape) {
    .js_modal_indexInner {
        padding: 0 _newScale(100)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexInner {
        padding: 0 _newScale(24)
    }
}

.js_modal_indexTitle {
    position: relative
}

@media screen and (orientation: landscape) {
    .js_modal_indexTitle {
        padding-top: _newScale(100);
        padding-bottom: _newScale(124)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexTitle {
        padding-top: _newScale(87);
        padding-bottom: _newScale(38)
    }
}

.js_modal_indexTitleInner {
    position: relative;
    position: relative
}

.js_modal_indexTitleInner:before {
    content: '';
    display: block
}

.js_modal_indexTitleInner:before {
    padding-top: 24.59016%
}

.js_modal_indexTitleInner .js_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_modal_indexTitleInner svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    fill: #000000
}

@media screen and (orientation: landscape) {
    .js_modal_indexTitleInner {
        width: _newScale(88)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexTitleInner {
        width: _newScale(61);
        margin-left: _newScale(2)
    }
}

.js_modal_indexList {
    position: relative
}

@media screen and (orientation: landscape) {
    .js_modal_indexList {
        display: -ms-grid;
        display: grid;
        -webkit-column-gap: _newScale(80);
        -moz-column-gap: _newScale(80);
        column-gap: _newScale(80);
        -ms-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        -ms-grid-rows: auto;
        grid-template-rows: auto
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexList {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media screen and (orientation: landscape) {

    .js_modal_indexListItem:nth-child(1),
    .js_modal_indexListItem:nth-child(2) {
        border-top: _newScale(6) solid #000
    }
}

.js_modal_indexListItemLink {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media screen and (orientation: landscape) {
    .js_modal_indexListItemLink {
        padding: _newScale(52) 0 _newScale(56) 0;
        height: 100%
    }

    .js_modal_indexListItemLink:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: _newScale(3);
        background-color: #000000
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexListItemLink {
        padding: _newScale(21) 0
    }
}

html.device-desktop .js_modal_indexListItemLink:hover:after {
    -webkit-animation-name: sizeScale;
    animation-name: sizeScale;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-timing-function: cubic-bezier(1, 0, 0, 1)
}

.js_modal_indexListItemLinkTitle {
    position: relative;
    white-space: nowrap
}

@media screen and (orientation: landscape) {
    .js_modal_indexListItemLinkTitle {
        font-size: _newScale(38);
        line-height: 1.22
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexListItemLinkTitle {
        font-size: _newScale(19);
        line-height: 1.26
    }
}

.html_wfActive .js_modal_indexListItemLinkTitle {
    letter-spacing: -0.02em
}

.js_modal_indexMov {
    position: relative
}

@media screen and (orientation: landscape) {
    .js_modal_indexMov {
        margin-top: _newScale(167);
        position: relative
    }

    .js_modal_indexMov:before {
        content: '';
        display: block
    }

    .js_modal_indexMov:before {
        padding-top: 56.25%
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexMov {
        margin-top: _newScale(62);
        position: relative
    }

    .js_modal_indexMov:before {
        content: '';
        display: block
    }

    .js_modal_indexMov:before {
        padding-top: 100%
    }
}

@media screen and (orientation: landscape) {
    .js_modal_indexListItemLinkLeft {
        height: 100%
    }
}

@media screen and (orientation: landscape) {
    .js_modal_indexListItemLinkLeftInner {
        height: 100%
    }
}

.js_modal_indexListItemLinkRight {
    position: absolute;
    right: 0
}

@media screen and (orientation: landscape) {
    .js_modal_indexListItemLinkRight {
        width: _newScale(37)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexListItemLinkRight {
        width: _newScale(20)
    }
}

.js_modal_indexListItemLinkRightInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.js_modal_indexListItemLinkBorder {
    position: relative
}

.js_modal_indexListItemLinkLeftName {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media screen and (orientation: landscape) {
    .js_modal_indexListItemLinkLeftName {
        width: _newScale(102);
        margin-top: _newScale(32)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexListItemLinkLeftName {
        margin-top: _newScale(12)
    }
}

.js_modal_indexListItemLinkLeftName svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_modal_indexListItemLinkLeftNameText {
    position: relative
}

.js_modal_indexListItemLinkLeftNameText svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

@media screen and (orientation: landscape) {
    .js_modal_indexListItemLinkLeftNameText {
        width: 100%
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexListItemLinkLeftNameText {
        width: _newScale(65);
        height: _newScale(15)
    }
}

.js_modal_indexListItemLinkRightPlay {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #000000
}

.js_modal_indexListItemLinkRightPlay:before {
    content: '';
    display: block
}

.js_modal_indexListItemLinkRightPlay:before {
    padding-top: 100%
}

.js_modal_indexListItemLinkRightPlayInner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.js_modal_indexListItemLinkRightPlayCircle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_modal_indexListItemLinkRightPlayCircleInner {
    fill: none;
    stroke: #000000;
    stroke-width: 6px
}

@media screen and (orientation: portrait) {
    .js_modal_indexListItemLinkRightPlayCircleInner {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%
    }
}

.js_modal_indexListItemLinkRightPlayArw {
    position: relative
}

.js_modal_indexListItemLinkRightPlayArw:before {
    content: '';
    display: block
}

.js_modal_indexListItemLinkRightPlayArw:before {
    padding-top: 100%
}

.js_modal_indexListItemLinkRightPlayArw svg,
.js_modal_indexListItemLinkRightPlayArw .js_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_modal_indexListItemLinkRightPlayArw svg {
    color: #000000
}

@media screen and (orientation: landscape) {
    .js_modal_indexListItemLinkRightPlayArw {
        width: _newScale(10)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexListItemLinkRightPlayArw {
        width: _newScale(5)
    }
}

.js_modal_indexListItemLinkRightPlayText {
    position: relative
}

.js_modal_indexListItemLinkRightPlayText svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

@media screen and (orientation: landscape) {
    .js_modal_indexListItemLinkRightPlayText {
        width: _newScale(55)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_indexListItemLinkRightPlayText {
        width: _newScale(38);
        height: _newScale(11)
    }
}

.js_modal_mov {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

@media screen and (orientation: landscape) {
    .js_modal_movInner {
        position: relative
    }

    .js_modal_movInner:before {
        content: '';
        display: block
    }

    .js_modal_movInner:before {
        padding-top: 56.24%
    }
}

@media screen and (orientation: portrait) {
    .js_modal_movInner {
        position: relative
    }

    .js_modal_movInner:before {
        content: '';
        display: block
    }

    .js_modal_movInner:before {
        padding-top: 100%
    }
}

.js_modal_movInner2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.js_modal_movInner3 {
    color: #ffffff;
    position: relative;
    position: relative
}

.js_modal_movInner3:before {
    content: '';
    display: block
}

.js_modal_movInner3:before {
    padding-top: 100%
}

@media screen and (orientation: landscape) {
    .js_modal_movInner3 {
        margin-top: _newScale(-5);
        width: _newScale(252)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_movInner3 {
        margin-top: _newScale(16);
        width: _newScale(126)
    }
}

.js_modal_movText {
    position: relative
}

.js_modal_movText:before {
    content: '';
    display: block
}

.js_modal_movText:before {
    padding-top: 10.05917%
}

.js_modal_movText .js_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_modal_movText svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

@media screen and (orientation: landscape) {
    .js_modal_movText {
        margin-left: _newScale(4);
        margin-top: _newScale(14);
        width: _newScale(169)
    }
}

@media screen and (orientation: portrait) {
    .js_modal_movText {
        margin-top: _newScale(8);
        width: _newScale(85)
    }
}

@media print {
    * {
        min-width: 0 !important
    }
}

* *,
* *:before,
* *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.html_initial * *,
.html_initial * *:before,
.html_initial * *:after {
    background-image: none !important
}

html,
body {
    background: #ebebeb
}

html {
    height: 100%;
    overflow: hidden !important;
    -ms-scroll-chaining: none;
    overscroll-behavior: none
}

body {
    position: relative;
    width: auto;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    overflow: hidden !important;
    margin: 0 !important;
    font-size: 14px;
    /* font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; */
    color: #000;
    line-height: 1;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    letter-spacing: 0
}

html.device-touch body {
    -webkit-text-size-adjust: none
}

#_cmp_elm_0_0,
#_cmp_elm_0_1,
#_cmp_elm_1_0,
#_cmp_elm_1_1,
#_cmp_elm_2_0,
#_cmp_elm_2_1,
#_cmp_elm_3_0,
#_cmp_elm_3_1,
#_cmp_elm_4_0,
#_cmp_elm_4_1 {
    left: -9999px !important
}

#fontplus-trial-banner {
    bottom: auto !important;
    top: 0 !important;
    left: -999px !important
}

a {
    text-decoration: none;
    color: inherit
}

a,
button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

a *,
button * {
    pointer-events: none
}

svg {
    overflow: hidden
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none;
    border-radius: 0;
    background-color: transparent;
    outline: 0;
    resize: none;
    margin: 0;
    padding: 0;
    zoom: 1;
    border: none;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    /* font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "游ゴシック体", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif !important */
}

input[type="text"]::-ms-expand,
input[type="tel"]::-ms-expand,
input[type="email"]::-ms-expand,
input[type="password"]::-ms-expand,
input[type="number"]::-ms-expand,
textarea::-ms-expand {
    display: none
}

::-moz-selection {
    background-color: #003896;
    color: #fff
}

::selection {
    background-color: #003896;
    color: #fff
}

::-moz-selection {
    background-color: #003896;
    color: #fff
}

#__bs_notify__,
#admin-bar-iframe {
    display: none !important
}

.l_relative {
    position: relative
}

.l_wrap {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 auto
}

@media screen and (min-width: 760px),
print {
    .l_wrap {
        padding: 0 32px
    }
}

@media screen and (max-width: 759px) {
    .l_wrap {
        padding: 0 14px
    }
}

@media screen and (min-width: 760px),
print {
    .l_wrap_pcLeft {
        width: 864px;
        margin: auto auto auto 0
    }
}

.l_fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.l_fv {
    height: 100vh
}

html.device-touch .l_fv {
    height: calc(var(--vh, 1vh) * 100)
}

.l_fixed {
    position: fixed
}

.l_clip {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

@media (-ms-high-contrast: none) {
    .l_clip {
        clip: rect(0, auto, auto, 0)
    }
}

@supports (-ms-ime-align: auto) {
    .l_clip {
        clip: rect(0, auto, auto, 0)
    }
}

.l_corner {
    position: fixed
}

.l_corner.l_corner__left {
    left: 0
}

.l_corner.l_corner__right {
    right: 0
}

.l_corner.l_corner__top {
    top: 0
}

.l_corner.l_corner__middle {
    top: 50%
}

.l_corner.l_corner__bottom {
    bottom: 0
}

@media screen and (orientation: portrait) {
    .h_pc {
        display: none !important
    }
}

@media screen and (orientation: landscape) {
    .h_sp {
        display: none !important
    }
}

.h_alt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: left;
    text-indent: -99999px;
    overflow: hidden;
    display: block
}

.h_hiddenText {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden
}

.js_cover {
    z-index: 999
}

.js_modal {
    z-index: 900
}

@media screen and (orientation: landscape) {
    .js_detail_more {
        z-index: 1
    }
}

.js_stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_stage canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_content_kv {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_content_kvTitle {
    position: absolute;
    left: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media screen and (orientation: landscape) {
    .js_content_kvTitle {
        bottom: 12.23529%
    }
}

@media screen and (orientation: portrait) {
    .js_content_kvTitle {
        bottom: 15.67398%
    }
}

.js_content_kvTitleInner {
    overflow: hidden;
    text-indent: -999px
}

@media screen and (orientation: landscape) {
    .js_content_kvTitleInner {
        width: calc(var(--scale, 1px) * 450);
        height: calc(var(--scale, 1px) * 26)
    }
}

@media screen and (orientation: portrait) {
    .js_content_kvTitleInner {
        width: calc(var(--scale, 1px) * 217);
        height: calc(var(--scale, 1px) * 54)
    }
}

.js_content_kvTitleInner img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.js_content_copy {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}

.js_content_copyInner {
    position: relative;
    margin: 0 auto
}

@media screen and (orientation: landscape) {
    .js_content_copyInner {
        width: calc(var(--scale, 1px) * 900)
    }
}

@media screen and (orientation: portrait) {
    .js_content_copyInner {
        width: calc(var(--scale, 1px) * 329);
        margin-left: calc(var(--scale, 1px) * 24)
    }
}

.js_content_copyInner2 {
    position: relative
}

@media screen and (orientation: landscape) {
    .js_content_copyInner2 {
        width: calc(var(--scale, 1px) * 478)
    }
}

@media screen and (orientation: landscape) {
    .js_content_copySection:not(:last-child) {
        padding-bottom: calc(var(--scale, 1px) * 75)
    }
}

@media screen and (orientation: portrait) {
    .js_content_copySection:not(:last-child) {
        padding-bottom: calc(var(--scale, 1px) * 56)
    }
}

.js_content_copySection img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden
}

.js_content_copySectionInner {
    position: relative
}

.js_content_copySectionText {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0)
}

.html_debug .js_content_copySectionText {
    color: rgba(255, 0, 0, 0.5)
}

@media screen and (orientation: landscape) {
    .js_content_copySectionText {
        top: calc(var(--scale, 1px) * -15);
        font-size: calc(var(--scale, 1px) * 20);
        line-height: 2.7;
        letter-spacing: 0.02em
    }
}

@media screen and (orientation: portrait) {
    .js_content_copySectionText {
        top: calc(var(--scale, 1px) * -10);
        font-size: calc(var(--scale, 1px) * 15);
        line-height: 2.4;
        letter-spacing: -0.03em
    }
}

.js_content_copySectionLogo {
    position: absolute;
    left: 0;
    display: block;
    color: rgba(0, 0, 0, 0)
}

.html_debug .js_content_copySectionLogo {
    background-color: rgba(255, 0, 0, 0.3)
}

@media screen and (orientation: landscape) {
    .js_content_copySectionLogo {
        bottom: calc(var(--scale, 1px) * 130);
        width: calc(var(--scale, 1px) * 165);
        height: calc(var(--scale, 1px) * 100)
    }
}

@media screen and (orientation: portrait) {
    .js_content_copySectionLogo {
        bottom: calc(var(--scale, 1px) * 120);
        width: calc(var(--scale, 1px) * 120);
        height: calc(var(--scale, 1px) * 75)
    }
}

.js_content_copySectionLogo span,
.js_content_copySectionLogo strong {
    display: block;
    white-space: nowrap;
    line-height: 1;
    opacity: 0
}

.js_content_copySectionLinks {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%
}

@media screen and (orientation: landscape) {
    .js_content_copySectionLinks {
        height: calc(var(--scale, 1px) * 167)
    }
}

@media screen and (orientation: portrait) {
    .js_content_copySectionLinks {
        height: calc(var(--scale, 1px) * 132)
    }
}

.js_content_copySectionLinkItem {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0)
}

.html_debug .js_content_copySectionLinkItem {
    background-color: rgba(255, 0, 0, 0.3)
}

@media screen and (orientation: landscape) {
    .js_content_copySectionLinkItem {
        font-size: calc(var(--scale, 1px) * 17);
        padding-left: calc(var(--scale, 1px) * 13);
        padding-top: calc(var(--scale, 1px) * 6);
        height: calc(var(--scale, 1px) * 32)
    }

    .js_content_copySectionLinkItem:nth-child(1) {
        width: calc(var(--scale, 1px) * 132)
    }

    .js_content_copySectionLinkItem:nth-child(2) {
        left: calc(var(--scale, 1px) * 151);
        width: calc(var(--scale, 1px) * 83)
    }
}

@media screen and (orientation: portrait) {
    .js_content_copySectionLinkItem {
        font-size: calc(var(--scale, 1px) * 13);
        padding-left: calc(var(--scale, 1px) * 12);
        padding-top: calc(var(--scale, 1px) * 6);
        height: calc(var(--scale, 1px) * 27)
    }

    .js_content_copySectionLinkItem:nth-child(1) {
        bottom: calc(var(--scale, 1px) * 28);
        width: calc(var(--scale, 1px) * 102)
    }

    .js_content_copySectionLinkItem:nth-child(2) {
        bottom: 0;
        width: calc(var(--scale, 1px) * 65)
    }
}

.js_content_copySectionLinkItemLine {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10%
}

.html_debug .js_content_copySectionLinkItemLine {
    background-color: rgba(0, 255, 255, 0.3)
}