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)
}