@charset "UTF-8"; /* ================================================== 基本要素/汎用クラス ================================================== */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { font-weight: inherit; } html { font-size: 62.5%; overflow-x: hidden; overflow-y: scroll; } body { background-color: #0b0b0b; color: #0b0b0b; font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W6", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif; font-size: 1.4em; line-height: 1.7; letter-spacing: 0.01em; position: relative; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media screen and (max-width: 767px) { body::before { content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background-position: 50% 100%; } } @media screen and (min-width: 768px) { body { font-size: 1.6em; line-height: 2; } } body section { position: relative; padding: 4rem 0; } @media screen and (min-width: 768px) { body section { padding: 8rem 0; } } body section .sec_body { max-width: 1024px; margin: 0 auto; } * { min-height: 0vw; } img { max-width: 100%; height: auto; vertical-align: top; } @media screen and (min-width: 768px) { img { image-rendering: -webkit-optimize-contrast; } } a:focus-visible, button:focus-visible { outline: 0; outline-offset: 2px; box-shadow: 0 0 0 2px #f5ed69; } a { color: #0b0b0b; cursor: pointer; transition: 0.4s ease-in-out; } @media screen and (min-width: 1024px) { a:hover { opacity: 0.8; } } button { display: inline-block; line-height: 1; -webkit-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; transition: 0.4s ease-in-out; } button:hover { opacity: 0.8; } button:focus { outline: 0; } button:not(:disabled) { cursor: pointer; } .p-color-03 { color: rgba(5, 16, 36, 0.8); } /*** The new CSS reset - version 1.8.3 (last updated 21.1.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; -ms-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; line-break: after-white-space; -webkit-user-select: auto; -ms-user-select: auto; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* ================================================== 表示/非表示出し分け ================================================== */ .visible_xxs { display: none; } @media screen and (max-width: 374px) { .visible_xxs { display: inline-block !important; } } .hidden_xxs { display: inline-block; } @media screen and (max-width: 374px) { .hidden_xxs { display: none !important; } } .visible_xs { display: none; } @media screen and (max-width: 767px) { .visible_xs { display: inline-block !important; } } .hidden_xs { display: inline-block; } @media screen and (max-width: 767px) { .hidden_xs { display: none !important; } } .visible_sm { display: none; } @media screen and (min-width: 768px) { .visible_sm { display: inline-block !important; } } .hidden_sm { display: inline-block; } @media screen and (min-width: 768px) { .hidden_sm { display: none !important; } } .visible_md { display: none; } @media screen and (min-width: 1024px) { .visible_md { display: inline-block !important; } } .hidden_md { display: inline-block; } @media screen and (min-width: 1024px) { .hidden_md { display: none !important; } } .visible_lg { display: none; } @media screen and (min-width: 1366px) { .visible_lg { display: inline-block !important; } } .hidden_lg { display: inline-block; } @media screen and (min-width: 1366px) { .hidden_lg { display: none !important; } } .visible_xl { display: none; } @media screen and (min-width: 1920px) { .visible_xl { display: inline-block !important; } } .hidden_xl { display: inline-block; } @media screen and (min-width: 1920px) { .hidden_xl { display: none !important; } } .visible_all { display: inline-block !important; } .hidden_all { display: none !important; } /* ================================================== ヘッダー ================================================== */ .lp_header_wrapper { position: absolute; top: 0; left: 0; margin: auto; display: flex; justify-content: center; width: 100%; z-index: 1100; } @media screen and (min-width: 1024px) { .lp_header_wrapper { position: static; } } .lp_header_wrapper .lp_header { display: flex; flex-direction: row; justify-content: space-between; position: relative; z-index: 1100; width: 100%; align-items: center; padding: 1rem; gap: 2rem; background: transparent; } .lp_header_wrapper .lp_header::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #094b7a 0%, #00d1ff 50%, #094b7a 100%); display: none; } .lp_header_wrapper .lp_header .header_logo { display: flex; align-items: center; } .lp_header_wrapper .lp_header .header_logo a { display: flex; transition: opacity 0.3s; } .lp_header_wrapper .lp_header .header_logo a:hover { opacity: 0.5; } .lp_header_wrapper .lp_header .header_logo img { width: min(16vw, 12rem); } .lp_header_wrapper .lp_header .header_sns_box { display: flex; align-items: center; gap: 1rem; height: 36px; } .lp_header_wrapper .lp_header .header_sns { width: clamp(1.6rem, 5.333vw, 4rem); } .lp_header_wrapper .lp_header .header_sns a { display: flex; } .lp_header_wrapper .lp_header .header_sns_x { width: 12.4rem; font-size: 1.8rem; line-height: 1; } .lp_header_wrapper .lp_header .header_sns_x a { display: flex; align-items: center; justify-content: space-between; background-color: #0b0b0b; border-radius: 100px; color: #fff; padding: 8px 22px; transition: opacity 0.3s; } .lp_header_wrapper .lp_header .header_sns_x a:hover { opacity: 0.5; } .lp_header_wrapper .lp_header .header_sns_x a img { width: 20px; height: 20px; } .lp_header_wrapper .lp_header .header_sns_x a p { line-height: 1; } .lp_header_wrapper .lp_header .header_sns_plurk { width: auto; } .lp_header_wrapper .lp_header .header_sns_plurk a { display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; } .lp_header_wrapper .lp_header .header_sns_plurk a:hover { opacity: 0.5; } .lp_header_wrapper .lp_header .header_sns_plurk a img { width: 36px; height: 36px; } .lp_header_wrapper .lp_header .header_menu { position: fixed; top: 1rem; right: 1rem; z-index: 1100; } .lp_header_wrapper .lp_header .header_menu .hb_menu img { width: 44px; height: 44px; } @media screen and (min-width: 1024px) { .lp_header_wrapper .lp_header { position: fixed; background: linear-gradient(90deg, rgba(12, 62, 98, 0.9) 0%, rgba(15, 88, 132, 0.9) 100%); -webkit-animation: SlideIn 1.6s; animation: SlideIn 1.6s; } .lp_header_wrapper .lp_header::after { display: block; } .lp_header_wrapper .lp_header .header_menu { position: static; } } .gnavi { display: flex; list-style: none; left: -10px; position: relative; } .gnavi li a { position: relative; padding: 0 10px; letter-spacing: 2px; display: inline-block; color: #fff; font-weight: 800; } .gnavi li a:hover::after { -webkit-transform: scale(1); transform: scale(1); } .gnavi li a::after { content: ""; position: absolute; bottom: 0; left: 5%; width: 90%; height: 2px; background: linear-gradient(90deg, #094b7a 0%, #00d1ff 50%, #094b7a 100%); transition: all 0.3s; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: center top; transform-origin: center top; } nav.menu .sp_menu_sns { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; } nav.menu .header_sns_x, nav.menu .header_sns_weibo, nav.menu .header_sns_line, nav.menu .header_sns_plurk { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-size: 1.8rem; line-height: 1; } nav.menu .header_sns_x a, nav.menu .header_sns_weibo a, nav.menu .header_sns_line a, nav.menu .header_sns_plurk a { display: flex; align-items: center; justify-content: space-between; background-color: #0b0b0b; border-radius: 100px; border: 1px solid #fff; color: #fff; padding: 8px 22px; height: 48px; box-sizing: border-box; transition: opacity 0.3s; } nav.menu .header_sns_x a:hover, nav.menu .header_sns_weibo a:hover, nav.menu .header_sns_line a:hover, nav.menu .header_sns_plurk a:hover { opacity: 0.5; } nav.menu .header_sns_x a img, nav.menu .header_sns_weibo a img, nav.menu .header_sns_line a img, nav.menu .header_sns_plurk a img { width: 20px; height: 20px; } nav.menu .header_sns_x a p, nav.menu .header_sns_weibo a p, nav.menu .header_sns_line a p, nav.menu .header_sns_plurk a p { line-height: 1; margin-left: 1rem; } nav.menu .header_sns_weibo a { background: #fff; color: #0b0b0b; padding: 4px 22px; } nav.menu .header_sns_weibo a img { width: 40px; height: 40px; } nav.menu .header_sns_line a { background: rgb(76, 199, 100); padding: 4px 22px; } nav.menu .header_sns_line a img { width: 40px; height: 40px; } nav.menu .header_sns_plurk a { background: rgb(255, 87, 34); padding: 4px 22px; } nav.menu .header_sns_plurk a img { width: 40px; height: 40px; } .header_logo .sp_logo a { display: flex; } /* ================================================== レスポンシブ表示の修正 ※ visible_md / hidden_md が inline-block のため、ブロック要素に対して明示的にdisplayを設定 ================================================== */ .lp_header .header_logo > .visible_md { display: none; } @media screen and (min-width: 1024px) { .lp_header .header_logo > .visible_md { display: block; } } .lp_header .header_logo > .hidden_md { display: block; } @media screen and (min-width: 1024px) { .lp_header .header_logo > .hidden_md { display: none; } } .lp_header .header_menu.hidden_md { display: block; } @media screen and (min-width: 1024px) { .lp_header .header_menu.hidden_md { display: none; } } .lp_header .header_link.visible_md { display: none; } @media screen and (min-width: 1024px) { .lp_header .header_link.visible_md { display: flex; } } .lp_header .header_sns_box.visible_md { display: none; } @media screen and (min-width: 1024px) { .lp_header .header_sns_box.visible_md { display: flex !important; } } @media screen and (min-width: 1024px) { nav.menu.hidden_md { display: none !important; } } /* ================================================== 全体レイアウト ================================================== */ .lp_wrap { position: relative; overflow: hidden; } .lp_wrap::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/common/main_bg.jpg) no-repeat center center; background-size: cover; z-index: -1; transform: translateZ(0); -webkit-transform: translateZ(0); } .lp_container { position: relative; font-size: clamp(0.8rem, 3.1vw + -1.5777rem, 1.6rem); } /* ================================================== 共通ラベルリボン（.overview .overview_card_label span ベース） ================================================== */ .label_ribbon { display: inline-block; position: relative; background: #f5ed69; border: 0.573px solid #126c91; color: #101f3e; font-weight: bold; padding: 4.587px 22.933px; font-size: clamp(1.6rem, 4.7vw + -2.0049rem, 2.8rem); } @media screen and (min-width: 768px) { .label_ribbon { border: 1px solid #126c91; padding: 8px 40px; } } .label_ribbon::after { content: ""; position: absolute; bottom: 0px; right: -32.107px; width: 33.253px; height: 24.08px; background-color: #d55454; mask-image: url(../img/common/bgh_ribbon.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center center; -webkit-mask-image: url(../img/common/bgh_ribbon.svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; } @media screen and (min-width: 768px) { .label_ribbon::after { right: -56px; width: 58px; height: 42px; } } #participation .label_ribbon::after { background-color: #fff; } #campaign .label_ribbon::after, #overview .label_ribbon::after, #notes .label_ribbon::after { background-color: #126c91; } /* ================================================== 共通CTAボタン（.btn_cta）- Figmaデザイン対応使用箇所: - .fv .fv_inner .wrap_result a.touhyou - .participation .sec_body .wrap_btn--cta a - .campaign .wrap_btn a - .overview .wrap_btn a - .closing .wrap_btn a ================================================== */ .btn_cta { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; height: 80px; background-color: #f5ed69; background-image: url(../img/common/btn_cta_texture.png); background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; border: 0.859px solid #e5b523; box-shadow: 3.44px 3.44px 0 0 #101f3e; color: #fff; font-weight: bold; text-decoration: none; text-align: center; text-shadow: 0 0 2.867px rgba(109, 0, 177, 0.6); font-size: clamp(2.1rem, 5.8vw + -2.3486rem, 3.6rem); transition: all 0.3s ease; } @media screen and (min-width: 768px) { .btn_cta { max-width: 450px; height: 120px; border: 2px solid #e5b523; box-shadow: 6px 6px 0 0 #101f3e; text-shadow: 0 0 5px rgba(109, 0, 177, 0.6); } } .btn_cta:hover { opacity: 0.9; -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #101f3e; } @media screen and (min-width: 768px) { .btn_cta:hover { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px); box-shadow: 3px 3px 0 0 #101f3e; } } /* ================================================== 共通CTAボタンラッパー（.wrap_btn_cta） ================================================== */ .wrap_btn_cta { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 11.467px; } @media screen and (min-width: 768px) { .wrap_btn_cta { flex-direction: row; justify-content: center; gap: 1rem; } .wrap_btn_cta .btn_cta { max-width: 315px; height: 84px; font-size: clamp(2.1rem, 1.6vw + 0.8728rem, 2.5rem); } } .wrap_btn_cta .form_text { display: none; text-align: center; color: #101f3e; margin-top: 8px; font-size: clamp(1.3rem, 0.4vw + 0.9932rem, 1.4rem); } .wrap_btn_cta.greyout .btn_cta { -webkit-filter: grayscale(100%); filter: grayscale(100%); pointer-events: none; } .wrap_btn_cta.greyout .form_text { display: block; } /* ================================================== main内スタイル ================================================== */ body.cntw { font-family: "source-han-sans-sc-variable", "source-han-sans-tc-variable", "noto-sans", "noto-sans-semicondensed", sans-serif; } body.cn { font-family: "source-han-sans-sc-variable", "source-han-sans-tc-variable", "noto-sans", "noto-sans-semicondensed", sans-serif; font-variation-settings: "wght" 360; } body.tw { font-family: "source-han-sans-sc-variable", "source-han-sans-tc-variable", "noto-sans", "noto-sans-semicondensed", sans-serif; font-variation-settings: "wght" 360; } .overlay_bg { background: #126c91; background-size: cover; height: 100vh; width: 100vw; position: fixed; z-index: -10; } @media screen and (min-width: 768px) { .overlay_bg { background: #126c91; background-size: cover; } } .lp_main .sec_heading { margin-bottom: 22.933px; font-size: clamp(1.5rem, 5.8vw + -2.9486rem, 3rem); max-width: 398px; margin: 0 auto 22.933px; position: relative; padding: 0 16px; text-align: center; } @media screen and (min-width: 768px) { .lp_main .sec_heading { max-width: 640px; margin: 0 auto 40px; } } .lp_main .sec_heading img { width: 100%; } .lp_main .sec_subheading { margin: 0 auto 11.467px; font-size: clamp(1.6rem, 2.3vw + -0.1641rem, 2.2rem); } @media screen and (min-width: 768px) { .lp_main .sec_subheading { margin: 0 auto 2rem; } } .lp_main .sec_heading--text { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 24px; background: rgba(5, 16, 36, 0.8); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto 40px; max-width: none; } .lp_main .sec_heading__text { font-weight: 700; line-height: 1.6; color: #f5ed69; text-align: center; font-size: clamp(2.4rem, 15.6vw + -9.5652rem, 6.4rem); word-break: auto-phrase; white-space: pre-line; } .lp_main .sec_heading__leaf { display: block; width: 27px; height: 64px; background-size: contain; background-repeat: no-repeat; background-position: center; } .lp_main .sec_heading__leaf--left { -webkit-transform: scaleX(-1); transform: scaleX(-1); background-image: url(../img/common/leaf_heading_right.svg); } .lp_main .sec_heading__leaf--right { background-image: url(../img/common/leaf_heading_right.svg); } @media screen and (min-width: 768px) { .lp_main .sec_heading--text { gap: 12px; } .lp_main .sec_heading__text { font-size: clamp(3.2rem, 6.2vw + -1.5554rem, 4.8rem); } .lp_main .sec_heading__leaf { width: 27px; height: 64px; } } @media screen and (max-width: 767px) { .lp_main .sec_heading--text { gap: 8px; padding: 6px 16px; } .lp_main .sec_heading__leaf { width: 18px; height: 40px; } } .content_inner { overflow: auto; width: 96vw; height: calc(100vh - 4vw); height: calc(100svh - 4vw); margin: 0 auto; text-align: center; box-sizing: border-box; z-index: 100; -ms-overflow-style: none; scrollbar-width: none; } h3 { font-size: clamp(2.4rem, 6.2vw + -2.3554rem, 4rem); line-height: 1; padding: 0 0 22.933px; margin: 0 auto 22.933px; font-weight: 800; display: block; color: #f5ed69; border-bottom: #f5ed69 1px dashed; } @media screen and (min-width: 768px) { h3 { padding: 0 0 4rem; margin: 0 auto 4rem; } } p.subheading { color: #d55454; font-weight: 800; font-size: clamp(2.4rem, 3.1vw + 0.0223rem, 3.2rem); margin-bottom: 11.467px; text-align: center; } @media screen and (min-width: 768px) { p.subheading { margin-bottom: 2rem; } } .wrap_genre { display: flex; flex-direction: row; justify-content: space-between; gap: 13.76px; flex-wrap: wrap; max-width: 398px; } @media screen and (min-width: 768px) { .wrap_genre { max-width: 792px; gap: 32px; } } .wrap_genre a { width: 48%; min-height: 48px; max-width: 400px; color: #fff; font-weight: bold; background: linear-gradient(90deg, #f5ed69 0%, #e5d950 50%, #f5ed69 100%); text-align: center; border: 1.147px #fff solid; display: flex; justify-content: center; align-items: center; position: relative; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); line-height: 1.5; transition: 0.3s; padding: 0 20px; box-shadow: 2.293px 2.293px 0px 0px #101f3e; } @media screen and (min-width: 768px) { .wrap_genre a { min-height: 80px; border: 1px #fff solid; padding: 0 32px; box-shadow: 4px 4px 0px 0px #101f3e; } } .wrap_genre a:hover { opacity: 0.8; } .wrap_genre a::after { content: ""; position: absolute; background: url(../img/common/icon-arrow.png) no-repeat center center/contain; width: 2vw; height: 4vw; display: block; right: 8px; -webkit-animation: btn_arrow 0.3s ease infinite alternate; animation: btn_arrow 0.3s ease infinite alternate; } @media screen and (min-width: 768px) { .wrap_genre { margin: 0 auto; } .wrap_genre a { width: 48.8%; height: 80px; max-height: 96px; min-height: auto; } .wrap_genre a::after { width: 1vw; height: 2vw; right: 16px; } } .wrap_genre.long { justify-content: center; text-align: center; margin: auto; max-width: 257.893px; } @media screen and (min-width: 768px) { .wrap_genre.long { max-width: 450px; } } .wrap_genre.long a { width: 100%; } .wrap_genre.long a.cta { background: linear-gradient(90deg, #d55454 0%, #a83a3a 100%); } @media screen and (min-width: 768px) { .wrap_genre.long a { width: 100%; font-size: clamp(1rem, 3.9vw + -1.9913rem, 2rem); } } .wrap_dual_genre_box_top_text { text-align: center; font-size: clamp(2.1rem, 2.7vw + 0.0291rem, 2.8rem); color: #f5ed69; font-weight: bold; margin-bottom: 22.933px; } @media screen and (min-width: 768px) { .wrap_dual_genre_box_top_text { margin-bottom: 3rem; } } .wrap_dual_genre_box { display: flex; justify-content: center; flex-direction: row; align-items: start; width: 100%; text-align: center; gap: 13.76px; } @media screen and (min-width: 768px) { .wrap_dual_genre_box { gap: 1.5rem; } } .wrap_dual_genre_box .wrap_dual_genre { max-width: 228.827px; } @media screen and (min-width: 768px) { .wrap_dual_genre_box .wrap_dual_genre { max-width: 400px; } } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_genre_title { width: 100%; font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); font-weight: bold; color: #101f3e; margin-bottom: 5.733px; } @media screen and (min-width: 768px) { .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_genre_title { margin-bottom: 1rem; } } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual { display: flex; flex-direction: column; justify-content: center; gap: 13.76px; flex-wrap: wrap; width: 100%; } @media screen and (min-width: 768px) { .wrap_dual_genre_box .wrap_dual_genre .wrap_dual { gap: 1.5rem; } } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; min-height: auto; max-width: none; padding: 0 20px; background: linear-gradient(90deg, #f5ed69 0%, #e5d950 50%, #f5ed69 100%); background-image: url(../img/common/btn_genre_texture.png); background-size: cover; background-position: center; border: 1px solid #fff; border-radius: 0; box-shadow: 2.4px 2.4px 0px 0px #101f3e; transition: opacity 0.3s ease; text-decoration: none; color: #101f3e; } @media screen and (min-width: 768px) { .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a { height: 80px; box-shadow: 4px 4px 0px 0px #101f3e; padding: 0 32px; } } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a:hover { opacity: 0.8; } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a:hover .icon_search { -webkit-animation: icon_search_pulse 0.8s ease-in-out infinite; animation: icon_search_pulse 0.8s ease-in-out infinite; } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a .btn_text { font-weight: 700; line-height: 1.5; text-align: center; color: #101f3e; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a .icon_search { position: absolute; right: 5px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 18px; height: 18px; } @media screen and (min-width: 768px) { .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a .icon_search { right: 8px; width: 22px; height: 22px; } } @media screen and (min-width: 1024px) { .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a .icon_search { right: 10px; width: 24px; height: 24px; } } @media screen and (min-width: 768px) { .wrap_dual_genre_box .wrap_dual_genre .wrap_dual { margin: 0 auto; } } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_origin { background: rgba(5, 16, 36, 0.8); border: 1.147px solid rgba(255, 255, 255, 0.96); color: #fff; padding: 11.467px 8.6px; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; min-height: 114.667px; } @media screen and (min-width: 768px) { .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_origin { border: 1px solid rgba(255, 255, 255, 0.96); padding: 2rem 1.5rem; min-height: 200px; } } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_origin ul { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 2.867px; } @media screen and (min-width: 768px) { .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_origin ul { gap: 0.5rem; } } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_origin ul li { font-weight: 700; font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_origin ul li span.small { font-size: clamp(1.5rem, 1.9vw + 0.0427rem, 2rem); } .lottery_info .lottery_text { font-size: clamp(1.2rem, 1.6vw + -0.0272rem, 1.6rem); font-weight: 400; } .lottery_info .lottery_note { font-size: clamp(1.2rem, 1.6vw + -0.0272rem, 1.6rem); } .note { text-align: left; font-size: clamp(1.2rem, 1.6vw + -0.0272rem, 1.6rem); font-weight: 400; } .note li { padding-left: 1em; text-indent: -1em; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } @media screen and (min-width: 768px) { .note { max-width: 792px; } } .kotatu { width: 90%; max-width: 640px; margin: 0 auto 2rem; display: block; } .wrap_flex { max-width: 840px; display: flex; align-items: center; justify-content: space-evenly; margin: 0 auto; flex-direction: column; } .wrap_flex img { margin-right: 2rem; } @media screen and (min-width: 768px) { .wrap_flex { flex-direction: row; } } .wrap_flex_column { max-width: 840px; display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; margin: 0 auto; text-align: center; gap: 40px; } .wrap_flex_column .wrap_img { text-align: center; } .wrap_flex_column .wrap_diamonds { display: flex; align-items: center; justify-content: center; gap: 4px; } .wrap_flex_column .wrap_diamonds .diamond { width: 65px; height: 63px; -o-object-fit: contain; object-fit: contain; -webkit-animation: diamond_glow 5s ease-in-out infinite; animation: diamond_glow 5s ease-in-out infinite; } .wrap_flex_column .wrap_diamonds .diamond:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .wrap_flex_column .wrap_diamonds .diamond:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .wrap_flex_column .wrap_diamonds .diamond:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes diamond_glow { 0%, 100% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } 10% { -webkit-filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); } 20% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } } @keyframes diamond_glow { 0%, 100% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } 10% { -webkit-filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); } 20% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } } @media screen and (min-width: 768px) { .wrap_flex_column .wrap_diamonds { gap: 10px; } .wrap_flex_column .wrap_diamonds .diamond { width: 143px; height: 139px; } } .wrap_btn { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; flex-wrap: wrap; max-width: 398px; margin: 0 auto; } @media screen and (min-width: 768px) { .wrap_btn { max-width: 640px; } } .wrap_btn .form_text { font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); font-weight: bold; display: none; margin-bottom: 11.467px; } @media screen and (min-width: 768px) { .wrap_btn .form_text { margin-bottom: 1rem; } } .wrap_btn.greyout a { -webkit-filter: grayscale(100%); filter: grayscale(100%); pointer-events: none; } .wrap_btn.greyout .form_text { display: block; } nav.menu { position: relative; padding: 0; display: none; opacity: 0; top: 0; left: 0; transition: opacity 0.3s ease; z-index: 1200; } nav.menu .menu_wrap { height: 100vh; top: 0; left: 0; position: absolute; } nav.menu .menu_container { position: fixed; background-size: cover; background-position: bottom; background-repeat: no-repeat; z-index: 100; width: 100%; height: 100vh; top: 0; left: 0; padding: 57.333px 22.933px; } @media screen and (min-width: 768px) { nav.menu .menu_container { padding: 10rem 4rem; } } nav.menu .menu_container .close { width: 30px; height: 30px; background: #f5ed69; -webkit-transform: rotate(45deg); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; position: fixed; right: 1.7rem; top: 1.9rem; border: none; cursor: pointer; padding: 0; z-index: 1200; } nav.menu .menu_container .close img { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 24px; height: 24px; } nav.menu .menu_container ul { max-width: 640px; margin: 0 auto; } @media screen and (min-width: 768px) { nav.menu .menu_container ul { max-width: 640px; } } nav.menu .menu_container ul li { position: relative; text-align: left; max-width: 640px; color: #fff; font-weight: 800; letter-spacing: 0.1em; font-size: clamp(1.7rem, 7.4vw + -3.9758rem, 3.6rem); } nav.menu .menu_container ul li::before { content: ""; position: absolute; background: linear-gradient(90deg, #094b7a 0%, #00d1ff 50%, #094b7a 100%); width: 100%; height: 1px; left: 0; top: 0; } nav.menu .menu_container ul li:first-child::before { display: none; } nav.menu .menu_container ul li a.menu_link { position: relative; display: block; color: #fff; padding: 17.2px 5px; } @media screen and (min-width: 768px) { nav.menu .menu_container ul li a.menu_link { padding: 3rem 5px; } } nav.menu .menu_container ul li a.menu_link::after { content: ""; position: absolute; background: url(../img/common/parts_arrow_gold.svg) no-repeat center center/contain; width: 8.4vw; height: 4.2vw; max-width: 34px; max-height: 17px; display: block; right: 4px; top: 0; bottom: 0; margin: auto; -webkit-animation: arrow-flip 2s ease-in-out infinite; animation: arrow-flip 2s ease-in-out infinite; } nav.menu .menu_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 70; background-color: rgba(16, 31, 62, 0.9333333333); } nav.menu .menu_character { position: fixed; bottom: -600px; left: 50%; -webkit-transform: translateX(-50%) translateY(50px); transform: translateX(-50%) translateY(50px); width: 120%; max-width: 320px; pointer-events: none; z-index: -50; transition: -webkit-transform 0.5s ease-out; transition: transform 0.5s ease-out; transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out; } @media screen and (min-width: 768px) { nav.menu .menu_character { max-width: 560px; bottom: -100vh; } } nav.menu .menu_character.is-active { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } nav.menu .menu_character img { width: 100%; height: auto; opacity: 0.6; } nav.menu .hb_hidden { display: none; } @-webkit-keyframes btn_arrow { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @keyframes btn_arrow { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 100% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } } @-webkit-keyframes icon_search_pulse { 0%, 100% { -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); } 50% { -webkit-transform: translateY(-50%) scale(1.15); transform: translateY(-50%) scale(1.15); } } @keyframes icon_search_pulse { 0%, 100% { -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); } 50% { -webkit-transform: translateY(-50%) scale(1.15); transform: translateY(-50%) scale(1.15); } } @-webkit-keyframes icon_search_pulse_simple { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } } @keyframes icon_search_pulse_simple { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.15); transform: scale(1.15); } } @-webkit-keyframes menu_arrow { 0% { -webkit-transform: rotate(90deg) translateX(0px); transform: rotate(90deg) translateX(0px); } 100% { -webkit-transform: rotate(90deg) translateX(-2px); transform: rotate(90deg) translateX(-2px); } } @keyframes menu_arrow { 0% { -webkit-transform: rotate(90deg) translateX(0px); transform: rotate(90deg) translateX(0px); } 100% { -webkit-transform: rotate(90deg) translateX(-2px); transform: rotate(90deg) translateX(-2px); } } @-webkit-keyframes menu_arrow_flip { 0% { -webkit-transform: rotate(90deg) rotateX(0deg); transform: rotate(90deg) rotateX(0deg); } 50% { -webkit-transform: rotate(90deg) rotateX(180deg); transform: rotate(90deg) rotateX(180deg); } 100% { -webkit-transform: rotate(90deg) rotateX(0deg); transform: rotate(90deg) rotateX(0deg); } } @keyframes menu_arrow_flip { 0% { -webkit-transform: rotate(90deg) rotateX(0deg); transform: rotate(90deg) rotateX(0deg); } 50% { -webkit-transform: rotate(90deg) rotateX(180deg); transform: rotate(90deg) rotateX(180deg); } 100% { -webkit-transform: rotate(90deg) rotateX(0deg); transform: rotate(90deg) rotateX(0deg); } } .fadein_up { opacity: 1; visibility: visible; } .fadein_up.is-show { opacity: 1; visibility: visible; -webkit-animation: fadeInUp 1s ease forwards; animation: fadeInUp 1s ease forwards; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); visibility: hidden; } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); visibility: hidden; } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; } } .campaign_card, .overview_card { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); transition: opacity 0.8s ease, -webkit-transform 0.8s ease; transition: opacity 0.8s ease, transform 0.8s ease; transition: opacity 0.8s ease, transform 0.8s ease, -webkit-transform 0.8s ease; } .campaign_card.is-show, .overview_card.is-show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .wrap_btn.timer_20240220 { display: none; } .wrap_btn.timer_20240220 .to_form { -webkit-filter: grayscale(100%); filter: grayscale(100%); pointer-events: none; } .wrap_btn.timer_20240220 .to_form:hover { opacity: 1; } .wrap_btn.timer_20240220 .to_form::before { -webkit-animation: none; animation: none; } .red { color: #d55454; } .content_line { position: relative; } .content_line::after { content: ""; position: absolute; bottom: 0; background: repeating-linear-gradient(to right, rgb(169, 144, 100) 0%, rgb(169, 144, 100) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); background-size: 16px 2px; /* 点線のサイズを調整 */ display: block; height: 1px; width: 100%; } .content_line.jp::after { height: 2px; } .content_line_outer { padding: 0 0 8rem; } /* ================================================== フッター ================================================== */ .lp_footer { position: relative; } .lp_footer .footer_inner { width: 100%; background-color: #126c91; color: #fff; display: flex; justify-content: center; align-items: center; height: 34.4px; padding: 0; } @media screen and (min-width: 768px) { .lp_footer .footer_inner { height: 60px; } } .lp_footer .footer_inner small { font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem); } @media screen and (min-width: 768px) { .lp_footer .footer_inner small { font-size: 14px; } } .official_link { background: rgba(5, 16, 36, 0.8); padding: 64px 16px; color: #fff; } .official_link .sec_heading--text { margin-bottom: 40px; } .official_link .sec_body { display: flex; flex-direction: column; align-items: center; gap: 32px; } .official_link .dlsite_wrap { display: flex; justify-content: center; } .official_link .dlsite_wrap a { transition: opacity 0.3s; } .official_link .dlsite_wrap a:hover { opacity: 0.7; } .official_link .sns_wrap { display: flex; justify-content: center; align-items: center; gap: 16px; } .official_link .sns_wrap a { transition: opacity 0.3s; } .official_link .sns_wrap a:hover { opacity: 0.7; } .official_link .sns_wrap a img { height: 44px; width: auto; } .official_link .ttl { text-align: center; font-weight: bold; color: #fff; margin: 1rem; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); } .official_link .lang-cn, .official_link .lang-tw, .official_link .lang-kr { gap: 1rem; } .sns_area { padding-bottom: min(13.333vw, 10rem); background-color: rgba(245, 237, 105, 0.9); } .sns_area.jp { background: rgba(5, 16, 36, 0.8); padding: 64px 16px; } .sns_area .sns_dlsite_logo { display: flex; justify-content: center; margin-bottom: 40px; transition: 0.3s; } .sns_area .sns_dlsite_logo:hover { opacity: 0.5; } .sns_area .sns_list_area { display: flex; flex-direction: column; align-items: center; gap: 40px; } .sns_area .sns_list_text { text-align: center; margin-bottom: 0.5rem; font-weight: 800; color: #0b0b0b; } .sns_area .sns_list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; } .sns_area .sns_item { transition: 0.3s; position: relative; } .sns_area .sns_item.jp_share { margin-right: 30px; } .sns_area .sns_item a:hover { opacity: 0.5; } .sns_area .sns_item .sns_item_text { color: #0b0b0b; position: absolute; font-weight: bold; bottom: -3rem; left: 0; right: 0; margin: auto; text-align: center; } .sns_area .sns_inner { display: flex; flex-direction: column; align-items: center; gap: 40px; max-width: 900px; margin: 0 auto; padding: 0 20px; } @media screen and (min-width: 768px) { .sns_area .sns_inner { gap: 30px; } } .sns_area .sns_share_row { display: flex; align-items: center; flex-direction: column; gap: 16px; } @media screen and (min-width: 768px) { .sns_area .sns_share_row { flex-direction: row; gap: 20px; } } @media screen and (min-width: 1024px) { .sns_area .sns_share_row { gap: 24px; } } .sns_area .sns_share_img img { width: 200px; height: auto; } @media screen and (min-width: 768px) { .sns_area .sns_share_img img { width: 240px; } } @media screen and (min-width: 1024px) { .sns_area .sns_share_img img { width: 280px; } } .sns_area .sns_icons { display: flex; align-items: center; gap: 16px; } @media screen and (min-width: 768px) { .sns_area .sns_icons { gap: 18px; } } @media screen and (min-width: 1024px) { .sns_area .sns_icons { gap: 24px; } } .sns_area .sns_icons a { display: block; transition: opacity 0.3s; } .sns_area .sns_icons a:hover { opacity: 0.7; } .sns_area .sns_icons a img { width: 56px; height: 56px; border-radius: 50%; } @media screen and (min-width: 768px) { .sns_area .sns_icons a img { width: 64px; height: 64px; } } @media screen and (min-width: 1024px) { .sns_area .sns_icons a img { width: 80px; height: 80px; } } .sns_area .sns_icons .sns_icon_x img { background-color: #0b0b0b; border: 2px solid #fff; border-radius: 50%; } .sns_area .sns_icons .sns_icon_pommu .pommu_icon { display: flex; align-items: center; justify-content: center; } .sns_area .sns_icons .sns_icon_pommu .pommu_icon svg { width: 56px; height: 56px; border-radius: 50%; } @media screen and (min-width: 768px) { .sns_area .sns_icons .sns_icon_pommu .pommu_icon svg { width: 64px; height: 64px; } } @media screen and (min-width: 1024px) { .sns_area .sns_icons .sns_icon_pommu .pommu_icon svg { width: 80px; height: 80px; } } .sns_area .sns_pommu_section { display: flex; align-items: center; flex-direction: column; gap: 16px; background-color: #fff; border-radius: 6px; padding: 16px; text-decoration: none; transition: opacity 0.3s, box-shadow 0.3s; } @media screen and (min-width: 768px) { .sns_area .sns_pommu_section { flex-direction: row; gap: 20px; padding: 20px; border-radius: 8px; } } @media screen and (min-width: 1024px) { .sns_area .sns_pommu_section { gap: 24px; padding: 24px; } } .sns_area .pommu_logo { flex-shrink: 0; } .sns_area .pommu_logo img { display: flex; width: 100%; text-align: center; max-width: 160px; height: auto; } .sns_area .pommu_text { font-family: "Noto Sans", sans-serif; font-weight: 500; font-size: 12px; line-height: 1.7; color: #101f3e; text-align: center; } @media screen and (min-width: 768px) { .sns_area .pommu_text { font-size: 13px; text-align: left; line-height: 1.8; } } @media screen and (min-width: 1024px) { .sns_area .pommu_text { font-size: 15px; } } .sns_area .pommu_text p { margin: 0; } .lp_pagetop { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; transition: none; opacity: 0; } @media screen and (min-width: 1024px) { .lp_pagetop { right: 2rem; bottom: 2rem; } } .lp_pagetop a { display: block; width: min(10.667vw, 6rem); height: 0; padding-top: min(10.667vw, 6rem); border-radius: 50%; background: rgba(11, 11, 11, 0.5); overflow: hidden; position: relative; } .lp_pagetop a::before { content: ""; width: min(2.667vw, 1.5rem); height: min(2.667vw, 1.5rem); border-width: 0.2rem 0.2rem 0 0; border-color: #fff; border-style: solid; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -20%) rotate(-45deg); transform: translate(-50%, -20%) rotate(-45deg); } .lp_pagetop.is_show { -webkit-animation: fadein 0.3s forwards; animation: fadein 0.3s forwards; } .lp_pagetop.is_hide { -webkit-animation: fadeout 0.3s forwards; animation: fadeout 0.3s forwards; } @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } .pre_area { background: #777; } /* ================================================== 基本要素/韓国語の常時表示ポップアップ ================================================== */ /* 韓国語の常時表示ポップアップ -------------------------------------------------- */ .fixed-attention { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-bottom: 30px; text-align: center; font-family: adobe-song-std, sans-serif; font-size: 3.2vw; color: #fff; line-height: 1.5em; position: fixed; bottom: 40px; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); padding: 4%; width: 90vw; z-index: 99; border-radius: 12px; background-color: rgba(0, 0, 0, 0.7); border: solid #f7cc64 1px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: 0.3s all; } @media screen and (min-width: 768px) { .fixed-attention { font-size: 17px; padding: 16px; max-width: 960px; margin-bottom: 10px; } } .fixed-attention .link-text { color: #ffe65b; text-decoration: underline; display: inline; } .fixed-attention .wrap-fixed-attention-close { position: relative; cursor: pointer; margin-left: 3.2vw; position: absolute; right: 1%; top: 0; } @media screen and (min-width: 768px) { .fixed-attention .wrap-fixed-attention-close { right: 16px; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .fixed-attention .wrap-fixed-attention-close::before { display: inline; content: "×"; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 3rem; line-height: 1; } .none { opacity: 0; } /* ================================================== fv ================================================== */ .fv { position: relative; padding: 0; background: linear-gradient(to bottom, rgba(0, 70, 167, 0.8) 0%, rgba(73, 170, 255, 0.2) 50%, rgba(0, 70, 167, 0.8) 100%); background-size: cover; width: 100%; box-sizing: border-box; overflow: hidden; } @media screen and (min-width: 768px) { .fv { padding: 0 0 1vh; } } .fv .fv_bg_character { content: ""; position: absolute; bottom: calc(50% - 260px); left: 50%; -webkit-transform: translateX(-50%) translateY(50%) rotate(-5deg); transform: translateX(-50%) translateY(50%) rotate(-5deg); width: 640px; max-width: 40vh; height: 100%; background: url(../img/jp/fv_main.png) no-repeat center top; background-size: 100% auto; pointer-events: none; z-index: 0; } @media screen and (min-width: 1024px) { .fv .fv_bg_character { top: none; bottom: -100px; left: calc(50% - 640px); -webkit-transform: translateX(0) rotate(-5deg); transform: translateX(0) rotate(-5deg); width: 480px; max-width: 420px; } } @media screen and (min-width: 1600px) { .fv .fv_bg_character { left: calc(50% - 720px); -webkit-transform: translateX(0) rotate(-5deg); transform: translateX(0) rotate(-5deg); } } @-webkit-keyframes crystal_shine { 0% { background-position: -200% 0, center center; } 10% { background-position: 200% 0, center center; } 100% { background-position: 200% 0, center center; } } @keyframes crystal_shine { 0% { background-position: -200% 0, center center; } 10% { background-position: 200% 0, center center; } 100% { background-position: 200% 0, center center; } } @-webkit-keyframes crystal_fadeIn { 0% { opacity: 0; -webkit-transform: translateY(-30px) rotate(var(--crystal-rotate)); transform: translateY(-30px) rotate(var(--crystal-rotate)); } 100% { opacity: 0.85; -webkit-transform: translateY(0) rotate(var(--crystal-rotate)); transform: translateY(0) rotate(var(--crystal-rotate)); } } @keyframes crystal_fadeIn { 0% { opacity: 0; -webkit-transform: translateY(-30px) rotate(var(--crystal-rotate)); transform: translateY(-30px) rotate(var(--crystal-rotate)); } 100% { opacity: 0.85; -webkit-transform: translateY(0) rotate(var(--crystal-rotate)); transform: translateY(0) rotate(var(--crystal-rotate)); } } @-webkit-keyframes crystal_float_1 { 0% { -webkit-transform: translate(0, 0) rotate(-19deg); transform: translate(0, 0) rotate(-19deg); } 20% { -webkit-transform: translate(8px, -12px) rotate(-19deg); transform: translate(8px, -12px) rotate(-19deg); } 40% { -webkit-transform: translate(-5px, -8px) rotate(-19deg); transform: translate(-5px, -8px) rotate(-19deg); } 60% { -webkit-transform: translate(10px, 5px) rotate(-19deg); transform: translate(10px, 5px) rotate(-19deg); } 80% { -webkit-transform: translate(-8px, -5px) rotate(-19deg); transform: translate(-8px, -5px) rotate(-19deg); } 100% { -webkit-transform: translate(0, 0) rotate(-19deg); transform: translate(0, 0) rotate(-19deg); } } @keyframes crystal_float_1 { 0% { -webkit-transform: translate(0, 0) rotate(-19deg); transform: translate(0, 0) rotate(-19deg); } 20% { -webkit-transform: translate(8px, -12px) rotate(-19deg); transform: translate(8px, -12px) rotate(-19deg); } 40% { -webkit-transform: translate(-5px, -8px) rotate(-19deg); transform: translate(-5px, -8px) rotate(-19deg); } 60% { -webkit-transform: translate(10px, 5px) rotate(-19deg); transform: translate(10px, 5px) rotate(-19deg); } 80% { -webkit-transform: translate(-8px, -5px) rotate(-19deg); transform: translate(-8px, -5px) rotate(-19deg); } 100% { -webkit-transform: translate(0, 0) rotate(-19deg); transform: translate(0, 0) rotate(-19deg); } } @-webkit-keyframes crystal_float_2 { 0% { -webkit-transform: translate(0, 0) rotate(30deg); transform: translate(0, 0) rotate(30deg); } 25% { -webkit-transform: translate(-10px, 8px) rotate(30deg); transform: translate(-10px, 8px) rotate(30deg); } 50% { -webkit-transform: translate(6px, -10px) rotate(30deg); transform: translate(6px, -10px) rotate(30deg); } 75% { -webkit-transform: translate(-6px, -6px) rotate(30deg); transform: translate(-6px, -6px) rotate(30deg); } 100% { -webkit-transform: translate(0, 0) rotate(30deg); transform: translate(0, 0) rotate(30deg); } } @keyframes crystal_float_2 { 0% { -webkit-transform: translate(0, 0) rotate(30deg); transform: translate(0, 0) rotate(30deg); } 25% { -webkit-transform: translate(-10px, 8px) rotate(30deg); transform: translate(-10px, 8px) rotate(30deg); } 50% { -webkit-transform: translate(6px, -10px) rotate(30deg); transform: translate(6px, -10px) rotate(30deg); } 75% { -webkit-transform: translate(-6px, -6px) rotate(30deg); transform: translate(-6px, -6px) rotate(30deg); } 100% { -webkit-transform: translate(0, 0) rotate(30deg); transform: translate(0, 0) rotate(30deg); } } .fv::before { content: ""; position: absolute; top: auto; bottom: 36%; left: 1%; width: 100px; height: 100px; background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%, transparent 100%), url(../img/common/icon_crystal.png) no-repeat center center; background-size: 200% 100%, contain; -webkit-transform: rotate(-19deg); transform: rotate(-19deg); pointer-events: none; z-index: 1; opacity: 0; -webkit-mask-image: url(../img/common/icon_crystal.png); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; mask-image: url(../img/common/icon_crystal.png); mask-size: contain; mask-repeat: no-repeat; mask-position: center center; -webkit-animation: crystal_fadeIn 1s ease-out 0.3s forwards, crystal_float_1 12s ease-in-out 1.3s infinite, crystal_shine 5s ease-in-out 1.3s infinite; animation: crystal_fadeIn 1s ease-out 0.3s forwards, crystal_float_1 12s ease-in-out 1.3s infinite, crystal_shine 5s ease-in-out 1.3s infinite; --crystal-rotate: -19deg; } @media screen and (min-width: 768px) { .fv::before { width: 150px; height: 150px; } } @media screen and (min-width: 1024px) { .fv::before { width: 200px; height: 200px; left: auto; right: 0%; top: 20%; bottom: auto; } } @media screen and (min-width: 1600px) { .fv::before { left: 0%; right: auto; top: 12%; } } .fv::after { content: ""; position: absolute; bottom: 34%; right: 0%; width: 140px; height: 140px; background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%, transparent 100%), url(../img/common/icon_crystal.png) no-repeat center center; background-size: 200% 100%, contain; -webkit-transform: rotate(30deg); transform: rotate(30deg); pointer-events: none; z-index: 1; opacity: 0; -webkit-mask-image: url(../img/common/icon_crystal.png); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; mask-image: url(../img/common/icon_crystal.png); mask-size: contain; mask-repeat: no-repeat; mask-position: center center; -webkit-animation: crystal_fadeIn 1s ease-out 0.6s forwards, crystal_float_2 10s ease-in-out 1.6s infinite, crystal_shine 5s ease-in-out 1.6s infinite; animation: crystal_fadeIn 1s ease-out 0.6s forwards, crystal_float_2 10s ease-in-out 1.6s infinite, crystal_shine 5s ease-in-out 1.6s infinite; --crystal-rotate: 30deg; } @media screen and (min-width: 768px) { .fv::after { width: 240px; height: 240px; right: -3%; bottom: 15%; } } @media screen and (min-width: 1024px) { .fv::after { width: 320px; height: 320px; right: 0%; } } @media screen and (min-width: 1600px) { .fv::after { width: 450px; height: 450px; right: -2%; } } @-webkit-keyframes bounce_banner { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 15% { -webkit-transform: translateY(-12px); transform: translateY(-12px); } 30% { -webkit-transform: translateY(0); transform: translateY(0); } 45% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 60% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 90%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounce_banner { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 15% { -webkit-transform: translateY(-12px); transform: translateY(-12px); } 30% { -webkit-transform: translateY(0); transform: translateY(0); } 45% { -webkit-transform: translateY(-6px); transform: translateY(-6px); } 60% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 90%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .fv .fv_coupon_banner, .fv .fv_point_banner { display: flex; align-items: center; align-items: flex-start; gap: 1rem; background: linear-gradient(90deg, #f5ed69 0%, #f5ed69 100%); border: 1px solid #101f3e; padding: 8px 12px; position: relative; -webkit-animation: bounce_banner 2s ease-in-out infinite; animation: bounce_banner 2s ease-in-out infinite; align-items: center; } .fv .fv_coupon_banner .point_badge, .fv .fv_point_banner .point_badge { display: flex; flex-direction: row; align-items: center; gap: 1rem; width: 100%; } @media screen and (min-width: 768px) { .fv .fv_coupon_banner, .fv .fv_point_banner { padding: 8px 16px; margin: 0 auto 20px; max-width: 800px; } } .fv .fv_coupon_banner .coupon_icon, .fv .fv_coupon_banner .point_icon, .fv .fv_point_banner .coupon_icon, .fv .fv_point_banner .point_icon { width: 32px; height: 32px; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); flex-shrink: 0; } @media screen and (min-width: 768px) { .fv .fv_coupon_banner .coupon_icon, .fv .fv_coupon_banner .point_icon, .fv .fv_point_banner .coupon_icon, .fv .fv_point_banner .point_icon { width: 48px; height: 48px; } } .fv .fv_coupon_banner .coupon_text, .fv .fv_coupon_banner .point_text, .fv .fv_point_banner .coupon_text, .fv .fv_point_banner .point_text { font-weight: 700; font-size: clamp(1.2rem, 3.1vw + -1.1777rem, 2rem); color: #101f3e; line-height: 1.5; text-align: left; } .fv .fv_coupon_banner .coupon_text .highlight, .fv .fv_coupon_banner .point_text .highlight, .fv .fv_point_banner .coupon_text .highlight, .fv .fv_point_banner .point_text .highlight { font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); color: #d55454; } .fv .fv_coupon_banner::after, .fv .fv_point_banner::after { content: ""; position: absolute; bottom: -6px; left: 50%; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #f5ed69; border-right: 1px solid #101f3e; border-bottom: 1px solid #101f3e; } @media screen and (min-width: 768px) { .fv .fv_coupon_banner::after, .fv .fv_point_banner::after { bottom: -10px; width: 20px; height: 20px; } } .fv .fv_point_banner { flex-direction: column; gap: 0.4rem; } .fv .fv_catchcopy { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; } @media screen and (min-width: 768px) { .fv .fv_catchcopy { gap: 16px; } } .fv .fv_catchcopy .leaf_icon { width: 20px; height: 48px; flex-shrink: 0; } .fv .fv_catchcopy .leaf_icon.left { -webkit-transform: scaleX(-1); transform: scaleX(-1); } @media screen and (min-width: 768px) { .fv .fv_catchcopy .leaf_icon { width: 30px; height: 70px; } } @media screen and (min-width: 1024px) { .fv .fv_catchcopy .leaf_icon { width: 34px; height: 80px; } } .fv .fv_catchcopy .catchcopy_text { font-weight: 700; font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); color: #fff; text-align: center; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); letter-spacing: 0.12em; line-height: 1.5; } @media screen and (min-width: 768px) { .fv .fv_catchcopy .catchcopy_text { letter-spacing: 0.2em; } } .fv .frame { position: relative; z-index: 10; width: calc(98svw - 3.333vw); border: 3px solid #126c91; background: rgba(255, 255, 255, 0.1); border-radius: 8px; box-sizing: border-box; -ms-overflow-style: none; scrollbar-width: none; margin: auto; } .fv .frame::-webkit-scrollbar { display: none; } @media screen and (min-width: 768px) { .fv .frame { width: calc(100svw - 2.344vw); justify-content: space-between; align-items: flex-start; overflow: auto; } } .fv .fv_inner { padding: 6rem 1rem 4rem; -webkit-transform: translate(100%, -100%); transform: translate(100%, -100%); /* 初期位置と角度を設定 */ opacity: 0; -webkit-animation: fadeInFromTopRight 1s ease forwards; animation: fadeInFromTopRight 1s ease forwards; display: flex; flex-direction: column; align-items: center; min-height: 100vh; gap: 1rem; } @media screen and (min-width: 1024px) { .fv .fv_inner { min-height: auto; } } @-webkit-keyframes fadeInFromTopRight { from { -webkit-transform: translate(2%, -2%); transform: translate(2%, -2%); /* 初期位置と角度を設定 */ opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); /* 最終的な位置と角度を設定 */ opacity: 1; } } @keyframes fadeInFromTopRight { from { -webkit-transform: translate(2%, -2%); transform: translate(2%, -2%); /* 初期位置と角度を設定 */ opacity: 0; } to { -webkit-transform: translate(0, 0); transform: translate(0, 0); /* 最終的な位置と角度を設定 */ opacity: 1; } } .fv .fv_inner .fv_title { max-width: 700px; width: 100%; margin-bottom: 2rem; padding: 0; text-align: center; margin: 0 auto 2rem; order: 1; } .fv .fv_inner .fv_title.jp { width: 75vw; padding: 0; } .fv .fv_inner .wrap_result { position: relative; order: 3; display: flex; justify-content: center; gap: 2rem; } .fv .fv_inner .wrap_result.greyout .btn_cta { -webkit-filter: grayscale(100%); filter: grayscale(100%); pointer-events: none; } .fv .fv_inner .wrap_result a { position: relative; max-width: 400px; display: block; text-align: center; transition: 0.1s; } .fv .fv_inner .wrap_result a.result { max-width: 300px; } .fv .fv_inner .wrap_result a img { width: auto; height: 100%; -o-object-fit: cover; object-fit: cover; } .fv .fv_inner .wrap_btn_cta { order: 3; } .fv .fv_inner .flex { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; display: flex; justify-content: center; flex-direction: column; gap: 12px; margin-bottom: 20px; } .fv .fv_inner .wrap_time { position: absolute; bottom: 1rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin: 0 auto; max-width: 768px; width: 90%; display: flex; flex-direction: column; gap: 1rem; } @media screen and (min-width: 1024px) { .fv .fv_inner .wrap_time { position: static; -webkit-transform: none; transform: none; left: auto; width: 94%; margin: 1rem auto; order: 4; gap: 2rem; } } .fv .fv_inner .wrap_time .wrap_btn_cta { order: 1; } .fv .fv_inner .wrap_time .flex_long { order: 2; position: relative; display: flex; justify-content: center; align-items: center; } .fv .fv_inner .wrap_time .flex_long.jp { flex-direction: column; gap: 0; } @media screen and (min-width: 768px) { .fv .fv_inner .wrap_time .flex_long.jp { flex-direction: row; gap: 2rem; } } .fv .fv_inner .wrap_time .flex_short { display: flex; justify-content: center; align-items: center; gap: 2rem; } .fv .fv_inner .wrap_time .time_start, .fv .fv_inner .wrap_time .time_announcement { background: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; text-align: center; margin: 1rem 0; max-width: 608px; width: 100%; border: 2px solid #126c91; overflow: hidden; } .fv .fv_inner .wrap_time .time_start dt, .fv .fv_inner .wrap_time .time_announcement dt { font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); background: #126c91; color: #fff; padding: 4px; white-space: nowrap; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; } .fv .fv_inner .wrap_time .time_start dt .leaf_icon, .fv .fv_inner .wrap_time .time_announcement dt .leaf_icon { height: 1em; width: auto; -o-object-fit: contain; object-fit: contain; vertical-align: middle; flex-shrink: 0; } .fv .fv_inner .wrap_time .time_start dt .leaf_icon--left, .fv .fv_inner .wrap_time .time_announcement dt .leaf_icon--left { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .fv .fv_inner .wrap_time .time_start dt span, .fv .fv_inner .wrap_time .time_announcement dt span { font-weight: 700; } .fv .fv_inner .wrap_time .time_start dt span.icon_on, .fv .fv_inner .wrap_time .time_announcement dt span.icon_on { position: relative; } .fv .fv_inner .wrap_time .time_start dt span.icon_on:before, .fv .fv_inner .wrap_time .time_start dt span.icon_on:after, .fv .fv_inner .wrap_time .time_announcement dt span.icon_on:before, .fv .fv_inner .wrap_time .time_announcement dt span.icon_on:after { display: none; } .fv .fv_inner .wrap_time .time_start dd, .fv .fv_inner .wrap_time .time_announcement dd { padding: 0.4rem; color: #101f3e; margin: 0 auto; } @media screen and (min-width: 768px) { .fv .fv_inner .wrap_time .time_start dd, .fv .fv_inner .wrap_time .time_announcement dd { padding: 1rem; } } .fv .fv_inner .wrap_time .time_start dd .data_text, .fv .fv_inner .wrap_time .time_announcement dd .data_text { font-weight: 700; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); line-height: 1.4; } .fv .fv_inner .wrap_time .time_start dd .data_text .small, .fv .fv_inner .wrap_time .time_announcement dd .data_text .small { font-weight: 700; font-size: clamp(1.2rem, 1.6vw + -0.0272rem, 1.6rem); } .fv .fv_inner .wrap_time .time_start dd .schedule_note, .fv .fv_inner .wrap_time .time_announcement dd .schedule_note { font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem); font-weight: 400; text-align: center; } .fv .fv_inner .wrap_benefit { display: flex; justify-content: center; order: 2; margin: 1rem 0 2rem; } .fv .fv_inner .wrap_benefit img { max-width: 43vw; } .fv .fv_character { position: absolute; z-index: 5; right: 0; bottom: 0; -webkit-animation: fv_character_slideup 2s ease-out forwards; animation: fv_character_slideup 2s ease-out forwards; } .fv .fv_character .fv_character_img { max-width: 630px; width: 50vw; } .fv .fv_character .fv_character_img img { width: 100%; height: auto; } @media screen and (min-width: 1024px) { .fv .fv_character .fv_character_img { display: none; } } @media screen and (min-width: 1240px) { .fv .fv_character { right: -10vw; } .fv .fv_character .fv_character_img { display: block; width: 50vw; max-width: 670px; } } @media screen and (min-width: 1600px) { .fv .fv_character { right: 5%; } } @-webkit-keyframes glow { 0% { -webkit-filter: drop-shadow(0 0 2px rgba(245, 237, 105, 0.3)); filter: drop-shadow(0 0 2px rgba(245, 237, 105, 0.3)); } 50% { -webkit-filter: drop-shadow(0 0 10px rgb(245, 237, 105)); filter: drop-shadow(0 0 10px rgb(245, 237, 105)); } 100% { -webkit-filter: drop-shadow(0 0 2px rgba(245, 237, 105, 0.3)); filter: drop-shadow(0 0 2px rgba(245, 237, 105, 0.3)); } } @keyframes glow { 0% { -webkit-filter: drop-shadow(0 0 2px rgba(245, 237, 105, 0.3)); filter: drop-shadow(0 0 2px rgba(245, 237, 105, 0.3)); } 50% { -webkit-filter: drop-shadow(0 0 10px rgb(245, 237, 105)); filter: drop-shadow(0 0 10px rgb(245, 237, 105)); } 100% { -webkit-filter: drop-shadow(0 0 2px rgba(245, 237, 105, 0.3)); filter: drop-shadow(0 0 2px rgba(245, 237, 105, 0.3)); } } @media screen and (min-width: 1024px) { .fv { padding: 8vh 0; } } @media screen and (min-width: 768px) { .fv .fv_inner { padding: 1rem; max-width: 1024px; margin: 3vh auto 3vh; text-align: center; position: relative; } .fv .fv_inner .fv_title { margin-bottom: 0; padding: 2rem; background: none; width: 50vw; } .fv .fv_inner .fv_title img { width: auto; height: 100%; -o-object-fit: cover; object-fit: cover; } .fv .fv_inner .fv_title.jp { padding: 2rem; } .fv .fv_inner .flex { height: auto; display: block; } .fv .fv_inner .wrap_time .time_start, .fv .fv_inner .wrap_time .time_announcement { display: flex; font-size: 1.8rem; margin: 1rem 0; font-weight: 800; max-width: 600px; width: 100%; } .fv .fv_inner .wrap_time .time_start dd, .fv .fv_inner .wrap_time .time_announcement dd { display: flex; flex-direction: column; align-items: center; } .fv .fv_inner .wrap_benefit { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: absolute; top: 4vw; bottom: 0; left: 3vw; margin: auto; order: 2; } @-webkit-keyframes shine { 0% { left: -100%; } 80% { left: 150%; } 100% { left: 150%; } } @keyframes shine { 0% { left: -100%; } 80% { left: 150%; } 100% { left: 150%; } } } @media screen and (min-width: 768px) and (min-width: 1024px) { .fv .fv_inner .wrap_benefit { flex-direction: column; top: 4vw; left: 0; } } @media screen and (min-width: 768px) and (min-width: 1366px) { .fv .fv_inner .wrap_benefit { top: 4vw; left: 0; } .fv .fv_inner .wrap_benefit .benefit_award01 { position: relative; top: -1vw; left: -10.5vw; max-width: 290px; width: 20vw; } .fv .fv_inner .wrap_benefit .benefit_award01 ~ .benefit_award02 { position: relative; top: -8vw; left: -2.5vw; max-width: 290px; width: 20vw; } } @media screen and (min-width: 768px) { .fv .fv_inner .wrap_benefit img { max-width: 290px; width: 20vw; } .fv .fv_inner .wrap_benefit.solo { top: 12vw; } } @media screen and (min-width: 768px) and (min-width: 1024px) { .fv .fv_inner .wrap_benefit.solo .benefit_award01 { position: relative; left: -2vw; } } @media screen and (min-width: 768px) and (min-width: 1366px) { .fv .fv_inner .wrap_benefit.solo .benefit_award01 { position: relative; left: -5vw; } } @-webkit-keyframes fv_character_slideup { 0% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fv_character_slideup { 0% { -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } html:not([lang=ja]) .fv .catchcopy_text { font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); max-width: 600px; line-height: 1.3; } html:not([lang=ja]) .fv .award_text { font-size: clamp(1.2rem, 3.1vw + -1.1777rem, 2rem); text-align: center; } html:not([lang=ja]) .fv .fv_bg_character { bottom: calc(50% - 36vh); } @media screen and (min-width: 1024px) { html:not([lang=ja]) .fv .fv_bg_character { bottom: calc(50% - 720px); } } html:not([lang=ja]) .fv .fv_inner { min-height: 900px; } @media screen and (min-width: 768px) { html:not([lang=ja]) .fv .fv_inner { min-height: 94vh; } } html:not([lang=ja]) .fv .fv_inner .fv_title { max-width: 300px; } @media screen and (min-width: 768px) { html:not([lang=ja]) .fv .fv_inner .fv_title { max-width: 700px; } } html:not([lang=ja]) .subject { margin: 0 1rem; } @media screen and (min-width: 800px) and (max-width: 1024px) { html:not([lang=ja]) .fv .fv_inner { min-height: 900px; } html:not([lang=ja]) .fv .fv_bg_character { bottom: calc(50% - 400px); } } @media screen and (min-width: 800px) and (max-width: 1024px) and (min-width: 1024px) { html:not([lang=ja]) .fv .fv_bg_character { bottom: calc(50% - 720px); } } /* ================================================== info ================================================== */ .info { position: relative; overflow: hidden; -webkit-clip-path: inset(0); clip-path: inset(0); padding: 4rem 1.6rem; background-color: #101f3e; } @media screen and (min-width: 768px) { .info { padding: 12rem 1rem; } } .info::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/common/works-bg.jpg) repeat center center; background-size: contain; z-index: 0; -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: center center; transform-origin: center center; transition: -webkit-transform 3s ease-out; transition: transform 3s ease-out; transition: transform 3s ease-out, -webkit-transform 3s ease-out; will-change: transform; } .info.is-show::after { -webkit-transform: scale(1); transform: scale(1); } .info::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(140deg, rgba(14, 57, 114, 0.8) -0.01%, rgba(1, 28, 59, 0.8) 99.99%); z-index: 1; } .info .sec_body { text-align: center; font-weight: bold; position: relative; z-index: 2; color: #fff; } .info .sec_body p { font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); white-space: normal; line-height: 1.6; } .info .sec_body .gold { font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); color: #f5ed69; } .info .sec_body .gold.small { font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); } .info .sec_body .red { font-size: clamp(2.4rem, 3.1vw + 0.0223rem, 3.2rem); color: #d55454; } .info .sec_body .red.small { font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); } .info .sec_body strong { font-size: clamp(2.4rem, 3.1vw + 0.0223rem, 3.2rem); color: #fff; background: #d55454; padding: 0 1rem 0.1rem 1rem; } .info .sec_body br { line-height: 0; font-size: 0; visibility: hidden; display: block; } .info .sec_body .award_badges { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 2.5rem; } @media screen and (min-width: 768px) { .info .sec_body .award_badges { gap: 1.5rem; margin-bottom: 3rem; } } .info .sec_body .award_badges img { width: 80px; height: auto; } @media screen and (min-width: 768px) { .info .sec_body .award_badges img { width: 120px; } } @media screen and (min-width: 1024px) { .info .sec_body .award_badges img { width: 140px; } } .info .sec_body .coupon_info { margin-top: 3rem; } .info .sec_body .coupon_info .vote_lead { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; color: #fff; font-size: clamp(1.25rem, 2.9vw + -0.9743rem, 2rem); } .info .sec_body .coupon_info .vote_lead .highlight { color: #f5ed69; font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); } .info .sec_body .coupon_info .vote_lead .crystal_icon { width: 33px; height: 33px; -webkit-animation: crystal_glow 5s ease-in-out infinite; animation: crystal_glow 5s ease-in-out infinite; } @media screen and (min-width: 768px) { .info .sec_body .coupon_info .vote_lead .crystal_icon { width: 88px; height: 88px; } } @-webkit-keyframes crystal_glow { 0%, 100% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } 10% { -webkit-filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); } 20% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } } @keyframes crystal_glow { 0%, 100% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } 10% { -webkit-filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); } 20% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } } .info .sec_body .coupon_info .coupon_lead { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; } .info .sec_body .coupon_info .coupon_lead .coupon_icon { width: 24px; height: 24px; } .info .sec_body .coupon_info .coupon_btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 1rem 2rem; margin: 0.5rem 0; font-weight: bold; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); line-height: 1.6; position: relative; overflow: visible; } @media screen and (min-width: 768px) { .info .sec_body .coupon_info .coupon_btn { padding: 8px 20px; gap: 10px; } } @media screen and (min-width: 1024px) { .info .sec_body .coupon_info .coupon_btn { padding: 8px 24px; } } .info .sec_body .coupon_info .coupon_btn .coupon_icon { width: 32px; height: 32px; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); flex-shrink: 0; } @media screen and (min-width: 768px) { .info .sec_body .coupon_info .coupon_btn .coupon_icon { width: 40px; height: 40px; } } @media screen and (min-width: 1024px) { .info .sec_body .coupon_info .coupon_btn .coupon_icon { width: 48px; height: 48px; } } .info .sec_body .coupon_info .coupon_btn::after { content: ""; position: absolute; right: -12px; top: 0; width: 12px; height: 100%; background: url(../img/common/coupon_edge.svg) no-repeat right center; background-size: cover; } @media screen and (min-width: 768px) { .info .sec_body .coupon_info .coupon_btn::after { right: -14px; width: 14px; } } .info .sec_body .coupon_info .coupon_btn--gold { background: #f5ed69; color: #101f3e; margin-right: 14px; } .info .sec_body .coupon_info .coupon_btn--red { background: #e5b523; color: #101f3e; margin-right: 14px; } .info .sec_body .coupon_info .coupon_btn--red::after { background: #e5b523; -webkit-mask-image: url(../img/common/coupon_edge.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: right center; -webkit-mask-size: cover; mask-image: url(../img/common/coupon_edge.svg); mask-repeat: no-repeat; mask-position: right center; mask-size: cover; } .info .sec_body .coupon_info .coupon_double { font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); margin-top: 1.5rem; } .info .sec_body.en p, .info .sec_body.kr p { font-size: clamp(1.6rem, 6.2vw + -3.1554rem, 3.2rem); } .info .sec_body.en .gold, .info .sec_body.kr .gold { font-size: clamp(1.6rem, 6.2vw + -3.1554rem, 3.2rem); } .info .sec_body.en .red, .info .sec_body.kr .red { font-size: clamp(1.6rem, 6.2vw + -3.1554rem, 3.2rem); } .info .sec_body.cn p, .info .sec_body.tw p { font-size: clamp(1.6rem, 6.2vw + -3.1554rem, 3.2rem); } .info .sec_body.cn .gold, .info .sec_body.tw .gold { font-size: clamp(1.6rem, 6.2vw + -3.1554rem, 3.2rem); } .info .sec_body.cn .red, .info .sec_body.tw .red { font-size: clamp(1.6rem, 6.2vw + -3.1554rem, 3.2rem); } @media screen and (min-width: 1024px) { .info .sec_body { max-width: 1100px; } .info .sec_body.en { max-width: 1100px; } } /* ================================================== 投票方法セクション - Figmaデザイン対応版 ================================================== */ .subject.jp { padding: 2rem 0 8rem; } .participation { padding: 4rem 1.4rem; } @media screen and (min-width: 768px) { .participation { padding: 12rem 0 2rem; } } .participation.jp { padding: 4rem 1.4rem; } @media screen and (min-width: 768px) { .participation.jp { padding: 12rem 0 8rem; } } .participation .sec_heading img { width: 100%; } @media screen and (min-width: 768px) { .participation .sec_heading img { width: 100%; } } .participation .sec_body .arrow { display: block; margin: 4rem auto; width: 45px; height: 29px; -webkit-animation: arrow-flip 2s ease-in-out infinite; animation: arrow-flip 2s ease-in-out infinite; } @-webkit-keyframes arrow-flip { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes arrow-flip { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } .participation .sec_body .step1 { margin: 3rem auto 0; } .participation .sec_body .step1, .participation .sec_body .step2 { border: 2px #094b7a solid; background: rgba(5, 16, 36, 0.8); padding: 5rem 1.5rem 3rem; position: relative; max-width: 1024px; text-align: center; border-radius: 0; } @media screen and (min-width: 768px) { .participation .sec_body .step1, .participation .sec_body .step2 { padding: 5rem 3rem 4rem; } } .participation .sec_body .step1 p.title, .participation .sec_body .step2 p.title { font-size: clamp(1.8rem, 7vw + -3.569rem, 3.6rem); font-weight: bold; margin: 1.5rem 0; color: #f5ed69; line-height: 1.5; } @media screen and (min-width: 768px) { .participation .sec_body .step1 p.title, .participation .sec_body .step2 p.title { margin: 2rem 0; } } .participation .sec_body .step1 .wrap_step, .participation .sec_body .step2 .wrap_step { display: flex; flex-direction: column; gap: 16px; align-items: center; } @media screen and (min-width: 768px) { .participation .sec_body .step1 .wrap_step, .participation .sec_body .step2 .wrap_step { gap: 20px; } } .participation .sec_body .step1 .wrap_step img, .participation .sec_body .step2 .wrap_step img { margin: 0 auto; max-width: 100%; height: auto; } .participation .sec_body .step1 .wrap_step img.visible_md, .participation .sec_body .step2 .wrap_step img.visible_md { display: none; } @media screen and (min-width: 1024px) { .participation .sec_body .step1 .wrap_step img.visible_md, .participation .sec_body .step2 .wrap_step img.visible_md { display: block; } } .participation .sec_body .step1 .wrap_step img.hidden_md, .participation .sec_body .step2 .wrap_step img.hidden_md { display: block; } @media screen and (min-width: 1024px) { .participation .sec_body .step1 .wrap_step img.hidden_md, .participation .sec_body .step2 .wrap_step img.hidden_md { display: none; } } .participation .sec_body .step1 .wrap_step.rv img, .participation .sec_body .step2 .wrap_step.rv img { padding: 0; } .participation .sec_body .step1 .step_img_wrap { position: relative; display: inline-block; } .participation .sec_body .step1 .step_img_wrap img { display: block; border-radius: 0; } .participation .sec_body .step1 .step_img_wrap img.visible_md { display: none; } @media screen and (min-width: 1024px) { .participation .sec_body .step1 .step_img_wrap img.visible_md { display: block; } } .participation .sec_body .step1 .step_img_wrap img.hidden_md { display: block; } @media screen and (min-width: 1024px) { .participation .sec_body .step1 .step_img_wrap img.hidden_md { display: none; } } .participation .sec_body .step1 .step_img_wrap .date_badge { position: absolute; bottom: 8px; left: 16px; background: #f5ed69; color: #101f3e; border: 1px solid #101f3e; border-radius: 112px; padding: 8px 16px; font-weight: bold; font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); } .participation .sec_body .step1 .step_img_wrap .date_badge a { color: #4369b4; text-decoration: none; } .participation .sec_body .step1 .step_img_wrap .date_badge a:hover { text-decoration: underline; } .participation .sec_body .step1 .wrap_btn_list { display: flex; flex-direction: column; gap: 20px; } @media screen and (min-width: 1024px) { .participation .sec_body .step1 .wrap_btn_list { flex-direction: column; } } .participation .sec_body .btn_search { display: flex; align-items: center; justify-content: center; gap: 8px; width: 258px; height: 68.8px; font-weight: bold; font-size: clamp(1.8rem, 0.8vw + 1.1864rem, 2rem); text-decoration: none; border: 1px solid #fff; box-shadow: 3.44px 3.44px 0 0 #101f3e; transition: all 0.2s ease; position: relative; line-height: 1.5; padding: 1rem 2rem 1rem; } @media screen and (min-width: 768px) { .participation .sec_body .btn_search { width: 300px; height: 80px; box-shadow: 4px 4px 0 0 #101f3e; } } .participation .sec_body .btn_search .icon_search { position: absolute; right: 8px; width: 20px; height: 20px; background-image: url(../img/common/icon_search.svg); background-size: contain; background-repeat: no-repeat; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } @media screen and (min-width: 768px) { .participation .sec_body .btn_search .icon_search { width: 22px; height: 22px; } } .participation .sec_body .btn_search:hover { opacity: 0.8; -webkit-transform: translate(2px, 2px); transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #101f3e; } .participation .sec_body .btn_search:hover .icon_search { -webkit-animation: icon_search_pulse_simple 0.8s ease-in-out infinite; animation: icon_search_pulse_simple 0.8s ease-in-out infinite; } .participation .sec_body .btn_search--primary { background: linear-gradient(90deg, #f5ed69 0%, #e5d950 50%, #f5ed69 100%); background-image: url(../img/common/btn_genre_texture.png); background-size: cover; background-position: center; color: #101f3e; } .participation .sec_body .btn_search--primary .icon_search { -webkit-filter: brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(2000%) hue-rotate(190deg); filter: brightness(0) saturate(100%) invert(10%) sepia(30%) saturate(2000%) hue-rotate(190deg); } .participation .sec_body .btn_search--secondary { background: url(../img/common/btn_purple_texture.png) no-repeat center center; background-size: cover; color: #fff; } .participation .sec_body .btn_search--secondary .icon_search { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .participation .sec_body .step2 { margin: 8rem 1rem 0; } .participation .sec_body .step2 .vote_info_box { background: linear-gradient(90deg, #f2f5ff 0%, #f2f5ff 100%); border: 1px solid #101f3e; border-radius: 8px; padding: 16px 24px; margin: 0 auto 2rem; max-width: 400px; position: relative; } .participation .sec_body .step2 .vote_info_box::after { content: ""; position: absolute; left: 50%; bottom: -10px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 14px solid #f2f5ff; background: none; } .participation .sec_body .step2 .vote_info_box .crystal_icons { display: flex; justify-content: center; gap: 8px; margin-bottom: 4px; } .participation .sec_body .step2 .vote_info_box .crystal_icons img { width: 70px; height: 68px; padding: 0; -webkit-animation: crystal_glow 5s ease-in-out infinite; animation: crystal_glow 5s ease-in-out infinite; } .participation .sec_body .step2 .vote_info_box .crystal_icons img:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .participation .sec_body .step2 .vote_info_box .crystal_icons img:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .participation .sec_body .step2 .vote_info_box .crystal_icons img:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @media screen and (max-width: 767px) { .participation .sec_body .step2 .vote_info_box .crystal_icons img { width: 40px; height: 39px; } } @keyframes crystal_glow { 0%, 100% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } 10% { -webkit-filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); } 20% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } } .participation .sec_body .step2 .vote_info_box .vote_info_text { font-weight: bold; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); color: #101f3e; line-height: 1.5; } .participation .sec_body .step2 .vote_info_box .vote_info_text .red { color: #d55454; } .participation .sec_body .step2 .wrap_step img { border-radius: 0; padding: 0; } .participation .sec_body .wrap_btn_cta { margin: 3rem auto 0; } .participation .sec_body .caption_area { position: relative; } .participation .sec_body h3.caption_box { position: absolute; top: -4rem; left: -1rem; right: auto; bottom: auto; z-index: 5; padding: 0; margin: 0; border: none; font-size: inherit; line-height: inherit; color: inherit; opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out; transition: opacity 0.6s ease-out, transform 0.6s ease-out; transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out; } .participation .sec_body h3.caption_box.is-show { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } @media screen and (max-width: 767px) { .participation .sec_body h3.caption_box { left: -1rem; top: -2rem; right: auto; } } .participation .sec_body .caption::before { display: none; } @media screen and (min-width: 1024px) { .participation .sec_body .step1 .wrap_step:not(.rv) { flex-direction: row; justify-content: center; align-items: center; gap: 20px; } .participation .sec_body .step1 .wrap_btn_list { flex-direction: column; } .participation .sec_body .step2 .wrap_step { justify-content: center; align-items: center; } } @media screen and (min-width: 768px) { .participation .sec_body .step1, .participation .sec_body .step2 { margin: 8rem auto; padding: 8rem 4rem; } .participation .sec_body .step1 { padding: 6rem 4rem; } .participation .sec_body .step1 .wrap_step:not(.rv) { width: 100%; max-width: 710px; margin: 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; } .participation .sec_body .step1 .step_img_wrap img { width: 390px; height: auto; } .participation .sec_body .step1 .step_img_wrap .date_badge { font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); } .participation .sec_body .step1.rv { flex-direction: column; } .participation .sec_body .step2 { margin: 6rem auto 0; } .participation .sec_body .step2 .wrap_step { justify-content: center; align-items: center; } .participation .sec_body .step2 .wrap_step img { max-width: 458px; padding: 0; } } .time_container { max-width: 960px; text-align: center; padding: 0 0 5rem 0; } .time_container.participation_sanka { padding: 3rem 0 0 0; margin: 0 auto; max-width: 608px; } @media screen and (max-width: 767px) { .time_container.participation_sanka { max-width: 348px; } } .time_container.participation_sanka.sanka_kaigai { padding: 0 0 5rem 0; } .time_container.participation_sanka .voting_period { margin-bottom: 0; } .time_container.participation_sanka .voting_period.jyusyou { padding: 3rem 0 0 0; } .time_container.participation_sanka .note { margin-top: 1rem; font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem); color: #fff; } @media screen and (min-width: 768px) { .time_container.participation_sanka .note { text-align: center; } } .time_container.sanka { padding: 0; } .time_container.sanka .voting_period { margin-bottom: 2rem; } .time_container .voting_period { margin-bottom: 40px; } .time_container .voting_period--participation { background: rgba(255, 255, 255, 0.9); border: 2px solid #126c91; overflow: hidden; margin-bottom: 0; } .time_container .voting_period--participation .label { display: flex; align-items: center; justify-content: center; gap: 6px; background-color: #126c91; color: #fff; font-weight: bold; padding: 4.6px 3.4px; margin-bottom: 0; font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); width: 100%; line-height: 1.5; } @media screen and (min-width: 768px) { .time_container .voting_period--participation .label { padding: 8px 6px; } } .time_container .voting_period--participation .label .leaf_icon { height: 1.5em; width: auto; -o-object-fit: contain; object-fit: contain; flex-shrink: 0; } .time_container .voting_period--participation .label .leaf_icon--left { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .time_container .voting_period--participation .data { padding: 3.4px; color: #101f3e; font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); line-height: 1.5; } @media screen and (min-width: 768px) { .time_container .voting_period--participation .data { padding: 6px; } } .time_container .voting_period--participation .data .small { font-size: clamp(1.2rem, 1.6vw + -0.0272rem, 1.6rem); } .time_container .results { display: flex; justify-content: center; flex-direction: column; gap: 40px; } @media screen and (min-width: 768px) { .time_container .results { flex-direction: row; } } .time_container .label { display: inline-block; background-color: #126c91; color: #fff; font-weight: bold; padding: 8px 30px; margin-bottom: 10px; font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); } .time_container .data { position: relative; font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); font-weight: bold; } .time_container .data .hanten { -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: center; transform-origin: center; display: inline-block; } .time_container .award_list { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 2rem; } .time_container .award_list img { max-width: 40vw; width: 100%; } .time_container .award_list img.time_img { max-width: 145px; } @media screen and (min-width: 768px) { .time_container .award_list { margin-top: 1rem; } .time_container .award_list img { max-width: 240px; } .time_container .award_list.top { margin-bottom: -8rem; } .time_container .award_list.mid { justify-content: space-between; width: 660px; margin: auto; } .time_container .award_list.bottom { margin-top: -8rem; } } .time_container .note { padding-left: 1em; text-indent: -1em; max-width: 638px; text-align: center; margin: 1rem auto 0; } @media screen and (min-width: 768px) { .time_container .note { text-align: center; } } html[lang=en-US] .time_container .voting_period--participation .data { font-size: clamp(1.2rem, 4.7vw + -2.4049rem, 2.4rem); } /* ================================================== subject - 投票対象作品セクション Figmaデザイン準拠版 ================================================== */ .subject { display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 768px) { .subject { padding: 64px 0 152px; gap: 40px; } } .subject .subject_subtitle { font-weight: 700; line-height: 1.5; text-align: center; color: #101f3e; font-size: clamp(1.8rem, 7vw + -3.569rem, 3.6rem); margin: 0; width: 100%; max-width: 454px; } @media screen and (min-width: 768px) { .subject .subject_subtitle { max-width: 792px; width: auto; } } .subject .sec_body { display: flex; flex-direction: column; align-items: center; gap: 22.933px; width: 100%; } @media screen and (min-width: 768px) { .subject .sec_body { gap: 40px; } } .subject .subject_card { position: relative; background: rgba(255, 255, 255, 0.96); border-top: 1.147px solid #094b7a; border-bottom: 1.147px solid #094b7a; border-left: none; border-right: none; padding: 4rem 1rem; margin-top: 22.933px; width: 100%; max-width: 1024px; display: flex; flex-direction: column; align-items: center; gap: 2rem; } @media screen and (min-width: 768px) { .subject .subject_card { border: 1px solid #094b7a; padding: 80px 40px; margin-top: 40px; } } .subject .subject_card_label { position: absolute; top: -20.64px; left: -5.733px; z-index: 5; } @media screen and (min-width: 768px) { .subject .subject_card_label { top: -36px; left: -10px; } } .subject .subject_card_content--center { text-align: center; } .subject .wrap_genre { display: grid; grid-template-columns: repeat(2, 48%); gap: 1rem; width: 100%; max-width: 398px; justify-content: center; padding: 0; } @media screen and (min-width: 768px) { .subject .wrap_genre { grid-template-columns: repeat(2, 300px); max-width: 632px; gap: 2rem; } } .subject .wrap_genre a { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; min-height: auto; max-width: none; padding: 0 20px; background: linear-gradient(90deg, #f5ed69 0%, #e5d950 50%, #f5ed69 100%); background-image: url(../img/common/btn_genre_texture.png); background-size: cover; background-position: center; border: 1px solid #fff; border-radius: 0; box-shadow: 2.4px 2.4px 0px 0px #101f3e; transition: opacity 0.3s ease; text-decoration: none; color: #101f3e; } @media screen and (min-width: 768px) { .subject .wrap_genre a { width: 300px; height: 80px; box-shadow: 4px 4px 0px 0px #101f3e; padding: 0 32px; } } .subject .wrap_genre a:hover { opacity: 0.8; } .subject .wrap_genre a:hover .icon_search { -webkit-animation: icon_search_pulse 0.8s ease-in-out infinite; animation: icon_search_pulse 0.8s ease-in-out infinite; } .subject .wrap_genre a::after { display: none !important; content: none; -webkit-animation: none; animation: none; } .subject .wrap_genre a .btn_text { font-weight: 700; line-height: 1.5; text-align: center; color: #101f3e; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); } .subject .wrap_genre a .btn_text small { font-weight: 700; font-size: clamp(1rem, 1.6vw + -0.2272rem, 1.4rem); display: block; } .subject .wrap_genre a .icon_search { position: absolute; right: 5px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 18px; height: 18px; } @media screen and (min-width: 768px) { .subject .wrap_genre a .icon_search { right: 8px; width: 22px; height: 22px; } } @media screen and (min-width: 1024px) { .subject .wrap_genre a .icon_search { right: 10px; width: 24px; height: 24px; } } .subject .wrap_dual_genre_box { display: flex; justify-content: center; flex-direction: row; align-items: flex-start; width: 100%; max-width: 632px; text-align: center; gap: 1rem; } @media screen and (min-width: 768px) { .subject .wrap_dual_genre_box { gap: 2rem; } } .subject .wrap_dual_genre { flex: 1; max-width: 300px; } .subject .wrap_dual_genre .wrap_dual_genre_title { width: 100%; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); font-weight: 700; color: #101f3e; margin-bottom: 8px; } @media screen and (min-width: 768px) { .subject .wrap_dual_genre .wrap_dual_genre_title { margin-bottom: 1rem; } } .subject .wrap_dual_genre .wrap_dual { display: flex; flex-direction: column; gap: 1rem; width: 100%; } @media screen and (min-width: 768px) { .subject .wrap_dual_genre .wrap_dual { gap: 1.5rem; } } .subject .wrap_dual_genre .wrap_dual a { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; min-height: auto; max-width: none; padding: 0 20px; background: linear-gradient(90deg, #f5ed69 0%, #e5d950 50%, #f5ed69 100%); background-image: url(../img/common/btn_genre_texture.png); background-size: cover; background-position: center; border: 1px solid #fff; border-radius: 0; box-shadow: 2.4px 2.4px 0px 0px #101f3e; transition: opacity 0.3s ease; text-decoration: none; color: #101f3e; } @media screen and (min-width: 768px) { .subject .wrap_dual_genre .wrap_dual a { height: 80px; box-shadow: 4px 4px 0px 0px #101f3e; padding: 0 32px; } } .subject .wrap_dual_genre .wrap_dual a:hover { opacity: 0.8; } .subject .wrap_dual_genre .wrap_dual a:hover .icon_search { -webkit-animation: icon_search_pulse 0.8s ease-in-out infinite; animation: icon_search_pulse 0.8s ease-in-out infinite; } .subject .wrap_dual_genre .wrap_dual a::after { display: none !important; content: none; -webkit-animation: none; animation: none; } .subject .wrap_dual_genre .wrap_dual a .btn_text { font-weight: 700; line-height: 1.5; text-align: center; color: #101f3e; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); } .subject .wrap_dual_genre .wrap_dual a .icon_search { position: absolute; right: 5px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 18px; height: 18px; } @media screen and (min-width: 768px) { .subject .wrap_dual_genre .wrap_dual a .icon_search { right: 8px; width: 22px; height: 22px; } } @media screen and (min-width: 1024px) { .subject .wrap_dual_genre .wrap_dual a .icon_search { right: 10px; width: 24px; height: 24px; } } .subject .wrap_dual_genre .wrap_dual_origin { position: relative; background: rgba(5, 16, 36, 0.8); border: 1.147px solid rgba(255, 255, 255, 0.96); color: #fff; padding: 11.467px 8.6px; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; min-height: 104px; } .subject .wrap_dual_genre .wrap_dual_origin::after { content: ""; position: absolute; bottom: -10px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 10px solid rgba(5, 16, 36, 0.8); } @media screen and (min-width: 768px) { .subject .wrap_dual_genre .wrap_dual_origin { border: 1px solid rgba(255, 255, 255, 0.96); padding: 2rem 1.5rem; min-height: 200px; } .subject .wrap_dual_genre .wrap_dual_origin::after { bottom: -12px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid rgba(5, 16, 36, 0.8); } } .subject .wrap_dual_genre .wrap_dual_origin ul { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 2.867px; } @media screen and (min-width: 768px) { .subject .wrap_dual_genre .wrap_dual_origin ul { gap: 0.5rem; } } .subject .wrap_dual_genre .wrap_dual_origin ul li { font-weight: 700; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); } .subject .gender_section { width: 100%; max-width: 632px; margin-bottom: 1.5rem; } .subject .gender_section:last-of-type { margin-bottom: 0; } .subject .gender_section .gender_title { font-weight: 700; font-size: clamp(1.6rem, 4.7vw + -2.0049rem, 2.8rem); color: #101f3e; text-align: center; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #e5b523; } @media screen and (min-width: 768px) { .subject .gender_section .gender_title { margin-bottom: 1.5rem; } } .subject .note_box { background: rgba(16, 31, 62, 0.8); border-radius: 6px; padding: 14px 16px; margin: 0 auto; } @media screen and (min-width: 768px) { .subject .note_box { border-radius: 8px; padding: 20px 28px; max-width: 720px; width: 100%; } } @media screen and (min-width: 1024px) { .subject .note_box { padding: 24px 32px; max-width: 792px; } } .subject .note_box p { font-weight: 500; line-height: 1.8; color: #fff; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); margin: 0; text-align: left; } .subject .note_box p + p { margin-top: 2px; } .subject .note_box p a { color: #fff; text-decoration: underline; } .subject .note_box p a:hover { opacity: 0.8; } .subject ul.note { display: none; } html[lang=en-US] .subject .wrap_genre a { height: 68px; } /* ================================================== campaign - 受賞応援キャンペーン ================================================== */ .campaign { position: relative; background: linear-gradient(140deg, rgba(14, 57, 114, 0.8) -0.01%, rgba(1, 28, 59, 0.8) 99.99%); background-size: 100%; padding: 80px 16px; } .campaign::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #094b7a 0%, #00d1ff 50%, #094b7a 100%); } .campaign::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #094b7a 0%, #00d1ff 50%, #094b7a 100%); } @media screen and (min-width: 768px) { .campaign { padding: 120px 0; } } .campaign .sec_body { max-width: 1024px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 36px; } @media screen and (min-width: 768px) { .campaign .sec_body { gap: 64px; } } .campaign .campaign_balloon_card { display: flex; flex-direction: column; align-items: center; position: relative; } .campaign .fukidashi { position: relative; background-color: #fff; color: #101f3e; font-weight: bold; line-height: 1.5; padding: 12px 20px; border-radius: 10px; text-align: center; display: inline-block; font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); max-width: 600px; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); transition: opacity 0.4s ease-out, -webkit-transform 0.4s ease-out; transition: opacity 0.4s ease-out, transform 0.4s ease-out; transition: opacity 0.4s ease-out, transform 0.4s ease-out, -webkit-transform 0.4s ease-out; } .campaign .fukidashi.is-show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } @media screen and (min-width: 768px) { .campaign .fukidashi { padding: 24px 40px; border-radius: 20px; } } .campaign .fukidashi.jp { max-width: 285px; } @media screen and (min-width: 768px) { .campaign .fukidashi.jp { max-width: 640px; } } .campaign .fukidashi span { font-size: clamp(1.8rem, 5.4vw + -2.3418rem, 3.2rem); color: #101f3e; display: block; } .campaign .fukidashi span.red { color: #d55454; } .campaign .fukidashi_arrow { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #fff; margin-top: -1px; } @media screen and (min-width: 768px) { .campaign .fukidashi_arrow { border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid #fff; } } .campaign .campaign_character_img { margin-top: 16px; } .campaign .campaign_character_img img { max-width: 212px; height: auto; } @media screen and (min-width: 768px) { .campaign .campaign_character_img img { max-width: 370px; } } .campaign .campaign_card { position: relative; background: rgba(255, 255, 255, 0.96); border: 1px solid #126c91; width: 100%; padding: 40px 20px; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); transition: opacity 0.8s ease, -webkit-transform 0.8s ease; transition: opacity 0.8s ease, transform 0.8s ease; transition: opacity 0.8s ease, transform 0.8s ease, -webkit-transform 0.8s ease; } .campaign .campaign_card.is-show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } @media screen and (min-width: 768px) { .campaign .campaign_card { max-width: 860px; padding: 60px 36px; } } @media screen and (min-width: 1024px) { .campaign .campaign_card { max-width: 1024px; padding: 80px 40px; } } .campaign .campaign_card_label { position: absolute; top: -20px; left: -10px; } @media screen and (min-width: 768px) { .campaign .campaign_card_label { top: -40px; left: -10px; } } .campaign .campaign_card_content { display: flex; flex-direction: column; align-items: center; gap: 14px; } @media screen and (min-width: 768px) { .campaign .campaign_card_content { gap: 24px; } } .campaign .coupon_info_row { display: flex; align-items: center; justify-content: center; gap: 9px; } @media screen and (min-width: 768px) { .campaign .coupon_info_row { gap: 16px; } } .campaign .coupon_info_row .coupon_icon_large { width: 60px; height: auto; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } @media screen and (min-width: 768px) { .campaign .coupon_info_row .coupon_icon_large { width: 104px; } } .campaign .coupon_info_row .coupon_text_large { font-weight: bold; line-height: 1.5; color: #101f3e; font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); } .campaign .coupon_info_row .coupon_text_large .red { color: #d55454; font-size: clamp(1.6rem, 4.7vw + -2.0049rem, 2.8rem); } .campaign .campaign_card_crystal { position: absolute; bottom: -36px; right: -40px; -webkit-transform: rotate(30deg); transform: rotate(30deg); } .campaign .campaign_card_crystal img { width: 85px; height: auto; } @media screen and (min-width: 768px) { .campaign .campaign_card_crystal img { width: 140px; } } @media screen and (min-width: 1024px) { .campaign .campaign_card_crystal img { width: 180px; } } @media screen and (min-width: 768px) { .campaign .campaign_card_crystal { bottom: -40px; right: -44px; } } @media screen and (min-width: 1024px) { .campaign .campaign_card_crystal { bottom: -44px; right: -48px; } } .campaign .campaign_card_double .double_chance { display: flex; align-items: center; gap: 14px; } .campaign .campaign_card_double .double_chance_text { text-align: center; font-weight: bold; line-height: 1.5; color: #101f3e; font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); } .campaign .campaign_card_double .double_chance_text .red { color: #d55454; } .campaign .campaign_card_double .double_chance_text .big { font-size: clamp(1.8rem, 5.4vw + -2.3418rem, 3.2rem); } .campaign .cp_share_img { width: 100%; max-width: 346px; margin: 8px auto; } @media screen and (min-width: 768px) { .campaign .cp_share_img { max-width: 458px; margin: 16px auto; } } .campaign .cp_share_img img { width: 100%; height: auto; } .campaign .lottery_target_box { width: 100%; max-width: 349px; border: 2px solid #d55454; } @media screen and (min-width: 768px) { .campaign .lottery_target_box { max-width: 640px; } } .campaign .lottery_target_header { background-color: #d55454; padding: 3px 6px; text-align: center; } @media screen and (min-width: 768px) { .campaign .lottery_target_header { padding: 6px; } } .campaign .lottery_target_header span { color: #fff; font-weight: bold; font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); line-height: 1.5; } .campaign .lottery_target_content { padding: 8px 12px; background-color: #fff; } @media screen and (min-width: 768px) { .campaign .lottery_target_content { padding: 12px 16px; } } .campaign .lottery_target_content p { display: flex; align-items: flex-start; gap: 8px; color: #101f3e; font-weight: 500; line-height: 1.8; font-size: clamp(1.3rem, 1.2vw + 0.3796rem, 1.6rem); } .campaign .lottery_target_content p span { flex: 1; } .campaign .lottery_target_content p a { color: #101f3e; text-decoration: underline; } .campaign .lottery_target_content p a:hover { opacity: 0.7; } .campaign .lottery_target_content p .icon_check { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; } @media screen and (min-width: 768px) { .campaign .lottery_target_content p .icon_check { width: 18px; height: 18px; margin-top: 3px; } } .campaign .campaign_card_voting_prizes { padding: 6rem 2rem; } @media screen and (min-width: 768px) { .campaign .campaign_card_voting_prizes { padding: 80px 40px; } } .campaign .campaign_card_voting_prizes .voting_prizes_description { font-weight: bold; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); line-height: 1.5; color: #101f3e; text-align: left; margin-bottom: 16px; } @media screen and (min-width: 768px) { .campaign .campaign_card_voting_prizes .voting_prizes_description { margin-bottom: 24px; } } .campaign .campaign_card_voting_prizes .prize_cards_grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; } @media screen and (min-width: 768px) { .campaign .campaign_card_voting_prizes .prize_cards_grid { gap: 10px; } } .campaign .campaign_card_voting_prizes .prize_card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 20px 16px; min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); border: 1px solid; } @media screen and (min-width: 768px) { .campaign .campaign_card_voting_prizes .prize_card { min-width: 200px; flex: 1 1 200px; max-width: 360px; padding: 24px; } } .campaign .campaign_card_voting_prizes .prize_card_icon img { width: 20px; height: auto; } @media screen and (min-width: 768px) { .campaign .campaign_card_voting_prizes .prize_card_icon img { width: 27px; } } .campaign .campaign_card_voting_prizes .prize_card_title { font-weight: bold; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); line-height: 1.5; color: #fff; text-align: center; } .campaign .campaign_card_voting_prizes .prize_card_points { font-weight: bold; font-size: clamp(2.4rem, 0vw + 2.4rem, 2.4rem); line-height: 1.5; color: #fff; text-align: center; } .campaign .campaign_card_voting_prizes .prize_card_badge { display: inline-block; background: #fff; color: #101f3e; font-weight: bold; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); line-height: 1.5; padding: 0 16px; border-radius: 48px; margin-top: auto; } .campaign .campaign_card_voting_prizes .prize_card--gold { background: linear-gradient(147deg, rgb(216, 208, 131) 0%, rgb(185, 154, 89) 16%, rgb(131, 97, 25) 50%, rgb(143, 111, 44) 89%); border-color: #8f6f2c; } .campaign .campaign_card_voting_prizes .prize_card--silver { background: linear-gradient(148deg, rgb(172, 205, 217) 0%, rgb(109, 131, 148) 50%, rgb(87, 121, 167) 89%); border-color: #577aa7; } .campaign .campaign_card_voting_prizes .prize_card--bronze { background: linear-gradient(150deg, rgb(201, 108, 80) 0%, rgb(144, 85, 53) 99%); border-color: #925636; } .campaign .campaign_card_voting_prizes .prize_card--special { background: linear-gradient(-34deg, rgb(59, 135, 32) 0%, rgb(134, 196, 111) 100%); border-color: #3e8923; } @media screen and (min-width: 768px) { html:not([lang=ja]) .campaign .campaign_card_label { top: -25px; } } html[lang=ko-KR] .campaign .campaign_card_voting_prizes .prize_card--bronze { min-width: calc(50% - 4px); flex: 0 0 calc(50% - 4px); max-width: calc(50% - 4px); } @media screen and (min-width: 768px) { html[lang=ko-KR] .campaign .campaign_card_voting_prizes .prize_card--bronze { min-width: 180px; flex: 0 0 180px; max-width: 180px; } } /* ================================================== overview - イベント概要セクション（Figmaデザイン対応版） ================================================== */ .overview { padding: 80px 16px; } @media screen and (min-width: 768px) { .overview { padding: 120px 0; } } .overview .sec_body { max-width: 1024px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 32px; } @media screen and (min-width: 768px) { .overview .sec_body { padding: 0; gap: 64px; } } .overview .overview_card { position: relative; background: rgba(255, 255, 255, 0.96); border: 1.147px solid #094b7a; padding: 45.867px 22.933px; margin-top: 22.933px; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); transition: opacity 0.8s ease, -webkit-transform 0.8s ease; transition: opacity 0.8s ease, transform 0.8s ease; transition: opacity 0.8s ease, transform 0.8s ease, -webkit-transform 0.8s ease; gap: 2rem; display: flex; flex-direction: column; } .overview .overview_card.is-show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } @media screen and (min-width: 768px) { .overview .overview_card { border: 1px solid #094b7a; padding: 80px 40px; margin-top: 40px; } } .overview .overview_card--campaign { overflow: visible; } .overview .overview_card_label { position: absolute; top: -20.64px; left: -5.733px; z-index: 5; } @media screen and (min-width: 768px) { .overview .overview_card_label { top: -36px; left: -10px; } } .overview .overview_card_content--center { text-align: center; } .overview .type_abroad .overview_card_content { display: flex; flex-direction: column; gap: 2rem; } .overview .overview_card_txt { display: flex; flex-direction: column; gap: 1rem; } .overview .overview_card_txt .caption { font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); font-weight: bold; } .overview .overview_card_crystal { position: absolute; bottom: -60px; right: -40px; pointer-events: none; } .overview .overview_card_crystal img { width: 120px; height: auto; -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-animation: overview_crystal_glow 5s ease-in-out infinite; animation: overview_crystal_glow 5s ease-in-out infinite; } @media screen and (min-width: 768px) { .overview .overview_card_crystal img { width: 180px; } } @-webkit-keyframes overview_crystal_glow { 0%, 100% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } 10% { -webkit-filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); } 20% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } } @keyframes overview_crystal_glow { 0%, 100% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } 10% { -webkit-filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 30px rgba(0, 209, 255, 0.8)); } 20% { -webkit-filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3)); } } @media screen and (max-width: 767px) { .overview .overview_card_crystal { display: none; } } .overview .schedule_list { display: flex; flex-direction: column; gap: 22.933px; align-items: center; } @media screen and (min-width: 768px) { .overview .schedule_list { gap: 2rem; } } .overview .schedule_item { width: 100%; max-width: 360px; border: 1.147px solid; background: rgba(255, 255, 255, 0.9); overflow: hidden; } @media screen and (min-width: 768px) { .overview .schedule_item { max-width: 640px; border: 2px solid; } } .overview .schedule_item--blue { border-color: #126c91; } .overview .schedule_item--blue .schedule_label { background: #126c91; } .overview .schedule_item--orange { border-color: #e79559; } .overview .schedule_item--orange .schedule_label { background: #e79559; } .overview .schedule_label { display: flex; align-items: center; justify-content: center; gap: 3.44px; color: #fff; font-weight: bold; padding: 4.587px 3.44px; font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); } @media screen and (min-width: 768px) { .overview .schedule_label { gap: 6px; font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); } } .overview .schedule_label .schedule_label_icon { height: 1em; width: auto; -o-object-fit: contain; object-fit: contain; vertical-align: middle; } .overview .schedule_label .schedule_label_icon--left { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .overview .schedule_data { padding: 3.44px; text-align: center; color: #101f3e; } @media screen and (min-width: 768px) { .overview .schedule_data { padding: 6px; } } .overview .schedule_data p { font-weight: bold; font-size: clamp(1.4rem, 3.9vw + -1.5913rem, 2.4rem); margin: 0; } .overview .schedule_data p .small { font-size: clamp(1.2rem, 1.6vw + -0.0272rem, 1.6rem); } .overview .schedule_note { font-weight: normal; color: #101f3e; font-size: clamp(1rem, 0.8vw + 0.3864rem, 1.2rem); text-align: center; } .overview .award_badges_list { display: flex; justify-content: center; gap: 11.467px; margin-bottom: 22.933px; } @media screen and (min-width: 768px) { .overview .award_badges_list { gap: 20px; margin-bottom: 40px; } } .overview .award_badges_list img { width: 100px; height: auto; } @media screen and (min-width: 768px) { .overview .award_badges_list img { width: 140px; } } .overview .award_badges_list:has(img:nth-child(4)) { flex-wrap: wrap; margin-left: auto; margin-right: auto; } @media screen and (min-width: 768px) { .overview .award_badges_list:has(img:nth-child(4)) { max-width: none; flex-wrap: nowrap; } } .overview .award_descriptions { display: flex; flex-direction: column; gap: 22.933px; max-width: 348.587px; margin: 0 auto; } @media screen and (min-width: 768px) { .overview .award_descriptions { gap: 2rem; max-width: 640px; } } .overview .type_abroad .award_descriptions { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 8px; } @media screen and (min-width: 768px) { .overview .type_abroad .award_descriptions { gap: 8px; } } .overview .award_desc_item p:not(.award_tag) { font-weight: 500; color: #101f3e; margin: 0; margin-top: 5.733px; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); line-height: 1.8; } @media screen and (min-width: 768px) { .overview .award_desc_item p:not(.award_tag) { margin-top: 10px; line-height: 1.5; } } .overview .award_desc_item p.award_tag { display: inline-flex; align-items: center; gap: 4.587px; padding: 3.44px 6.88px; margin: 0; color: #fff; font-weight: bold; font-size: clamp(1.5rem, 1.9vw + 0.0427rem, 2rem); } @media screen and (min-width: 768px) { .overview .award_desc_item p.award_tag { padding: 6px 16px; gap: 8px; } } .overview .award_desc_item p.award_tag::before { content: ""; display: inline-block; width: 15.48px; height: 11.753px; background: url("../img/common/icon_crown.svg") no-repeat center/contain; flex-shrink: 0; } @media screen and (min-width: 768px) { .overview .award_desc_item p.award_tag::before { width: 27px; height: 20.5px; } } .overview .award_desc_item p.award_tag.award_tag--red { background-color: #a93d3c; } .overview .award_desc_item p.award_tag.award_tag--green { background-color: #69a93c; } .overview .award_desc_item p.award_tag.award_tag--purple { background-color: #863ca9; } .overview .award_desc_item p.award_tag.award_tag--gold { background: linear-gradient(147deg, rgb(216, 208, 131) 0%, rgb(185, 154, 89) 16%, rgb(131, 97, 25) 50%, rgb(143, 111, 44) 89%); border: 1px solid #8f702d; } .overview .award_desc_item p.award_tag.award_tag--silver { background: linear-gradient(148deg, rgb(172, 205, 217) 0%, rgb(109, 131, 148) 50%, rgb(87, 121, 167) 89%); border: 1px solid #5779a7; } .overview .award_desc_item p.award_tag.award_tag--bronze { background: linear-gradient(150deg, rgb(201, 108, 80) 0%, rgb(144, 85, 53) 99%); border: 1px solid #945737; } .overview .award_desc_item p.award_tag.award_tag--runnerup { background: linear-gradient(-34deg, rgb(59, 135, 32) 0%, rgb(134, 196, 111) 100%); border: 1px solid #408b24; } .overview .award_desc_item p.award_tag.award_tag--runnerup::before { content: "★"; background: none; width: auto; height: auto; color: #f5ed69; font-size: clamp(1.6rem, 1.6vw + 0.3728rem, 2rem); } .overview .award_desc_item p.award_tag .winner_count { display: inline-flex; align-items: center; justify-content: center; background-color: #fff; color: #0b0b0b; font-weight: bold; padding: 0 6px; border-radius: 48px; margin-left: 8px; font-size: clamp(1.05rem, 1.4vw + -0.0238rem, 1.4rem); } .overview .award_tag { display: inline-flex; align-items: center; gap: 4.587px; padding: 3.44px 6.88px; margin: 0; color: #fff; font-weight: bold; font-size: clamp(1.5rem, 1.9vw + 0.0427rem, 2rem); } @media screen and (min-width: 768px) { .overview .award_tag { padding: 6px 16px; gap: 8px; } } .overview .award_tag::before { content: ""; display: inline-block; width: 15.48px; height: 11.753px; background: url("../img/common/icon_crown.svg") no-repeat center/contain; flex-shrink: 0; } @media screen and (min-width: 768px) { .overview .award_tag::before { width: 27px; height: 20.5px; } } .overview .award_tag--red { background-color: #a93d3c; } .overview .award_tag--green { background-color: #69a93c; } .overview .award_tag--purple { background-color: #863ca9; } .overview .gift_list { display: flex; flex-direction: column; gap: 22.933px; } @media screen and (min-width: 768px) { .overview .gift_list { gap: 40px; } } .overview .gift_item { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } @media screen and (min-width: 768px) { .overview .gift_item { flex-direction: row; text-align: left; gap: 24px; } } .overview .gift_icon { flex-shrink: 0; -webkit-transform: rotate(-360deg); transform: rotate(-360deg); transition: -webkit-transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); max-width: 90%; display: flex; align-items: center; justify-content: center; } @media screen and (min-width: 768px) { .overview .gift_icon { width: 248px; height: 248px; } } .overview .gift_icon.is-show { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .overview .gift_icon img { width: 80%; height: 80%; aspect-ratio: 1/1; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .overview .gift_content { flex: 1; } .overview .gift_title { color: #d55454; font-weight: bold; margin: 0 0 5.733px; font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); } @media screen and (min-width: 768px) { .overview .gift_title { margin: 0 0 8px; } } .overview .gift_text { color: #101f3e; font-weight: 500; line-height: 1.8; margin: 0; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); text-align: left; } @media screen and (min-width: 768px) { .overview .gift_text { text-align: inherit; } } .overview .type_abroad.overview_card_content .gift_list { flex-direction: row; } .overview .type_abroad.overview_card_content .gift_item { flex-direction: column; width: 50%; } .overview .type_abroad.overview_card_content .gift_title { text-align: center; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } .overview .type_abroad.overview_card_content .gift_text { text-align: center; font-size: clamp(1.5rem, 3.5vw + -1.1845rem, 2.4rem); font-weight: bold; } @media screen and (min-width: 768px) { .overview .type_abroad.overview_card_content .gift_icon { width: 200px; height: 200px; } } .overview .type_abroad.overview_card_content .gift_icon img { width: 100%; height: 100%; } .overview .type_abroad.overview_card_content .gift_note { text-align: center; margin: 2rem 0; font-size: clamp(1.1rem, 1.2vw + 0.1796rem, 1.4rem); } .overview .campaign_text { font-weight: bold; color: #101f3e; margin-bottom: 22.933px; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); line-height: 1.5; } @media screen and (min-width: 768px) { .overview .campaign_text { margin-bottom: 24px; } } .overview .campaign_text .highlight_red { color: #d55454; } .overview .campaign_text .highlight_red.big { font-size: clamp(1.8rem, 5.4vw + -2.3418rem, 3.2rem); } .overview .double_chance { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14.369px; } @media screen and (min-width: 768px) { .overview .double_chance { flex-direction: row; gap: 24px; } } .overview .double_chance .campaign_text { text-align: left; } .overview .double_chance_img { position: relative; margin-bottom: 14.369px; overflow: hidden; display: inline-block; } @media screen and (min-width: 768px) { .overview .double_chance_img { margin-bottom: 24px; } } .overview .double_chance_img::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 0%, transparent 30%, rgba(255, 215, 0, 0.4) 45%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 215, 0, 0.4) 55%, transparent 70%, transparent 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); pointer-events: none; } .overview .double_chance_img.is-show::after { -webkit-animation: gold_shine 0.5s ease-out forwards; animation: gold_shine 0.5s ease-out forwards; } @-webkit-keyframes gold_shine { 0% { left: -100%; } 100% { left: 150%; } } @keyframes gold_shine { 0% { left: -100%; } 100% { left: 150%; } } .overview .double_chance_img img { width: 137.707px; height: auto; display: block; } @media screen and (min-width: 768px) { .overview .double_chance_img img { width: 180px; } } /* ================================================== notes - 注意事項セクション Figmaデザイン準拠版 ================================================== */ .notes { padding: 36px 16px; display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 768px) { .notes { padding: 80px 0; } } @media screen and (min-width: 1024px) { .notes { padding: 120px 0; } } .notes .sec_body { width: 100%; } @media screen and (min-width: 768px) { .notes .sec_body { max-width: 860px; } } @media screen and (min-width: 1024px) { .notes .sec_body { max-width: 1024px; } } .notes .white_area { position: relative; background: rgba(255, 255, 255, 0.96); border: 1.147px solid #094b7a; padding: 2rem; } @media screen and (min-width: 768px) { .notes .white_area { border: 1px solid #094b7a; padding: 80px 40px; margin-top: 40px; } } .notes .note { list-style: none; padding: 0; margin: 0; text-align: left; } .notes .note li { color: #101f3e; font-weight: 500; line-height: 1.7; margin-bottom: 0.4em; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } @media screen and (min-width: 768px) { .notes .note li { line-height: 1.8; margin-bottom: 0.3em; } } .notes .note li:last-child { margin-bottom: 0; } .notes .note li a { text-decoration: underline; } /* ================================================== closing ================================================== */ .closing { position: relative; padding: 6rem 1rem; text-align: center; background: url(../img/common/closing_bg.png) no-repeat center center; background-size: cover; } @media screen and (min-width: 768px) { .closing { padding: 8rem 2rem; } } @media screen and (min-width: 1024px) { .closing { padding: 120px 2rem; } } .closing .closing_cta { display: flex; justify-content: center; align-items: center; max-width: 520px; margin: 0 auto; } @media screen and (min-width: 1024px) { .closing .closing_cta { max-width: 600px; } }/*# sourceMappingURL=lp.css.map */