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