@charset "UTF-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; } /* ================================================== 基本要素/汎用クラス ================================================== */ 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%; } body { background-color: #fdfdfd; color: #333; font-family: "Noto Sans TC", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif; font-size: 1.4em; line-height: 1.7; letter-spacing: 0.05em; overflow-x: hidden; overflow-y: scroll; position: relative; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: url(../img/bg_main.webp); background-attachment: fixed; background-size: cover; } @media screen and (max-width: 767px) { body { font-size: 1.6em; line-height: 1.8; background-image: none; } } body::before { content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100vh; background: url(../img/bg_main_sp.webp) no-repeat center top/cover; background-size: cover; } @media screen and (min-width: 1024px) { body::before { background: url(../img/bg_main.webp) no-repeat center top/cover; } } * { 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 #ff487e; } a { color: #333; cursor: pointer; transition: 0.2s 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.2s ease-in-out; } button:hover { opacity: 0.8; } button:focus { outline: 0; } button:not(:disabled) { cursor: pointer; } section { position: relative; padding: 4rem 0; } @media screen and (min-width: 768px) { section { padding: 5rem 0; } } section .sec_body { padding: 6rem; border-radius: 2.5rem; max-width: 1024px; margin: 0 auto; } section .sec_body.white_area { background: rgba(255, 255, 255, 0.9); } section .sec_body .sec_heading { text-align: center; } /* ================================================== 表示/非表示出し分け ================================================== */ .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 { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1.5rem; position: absolute; z-index: 50; width: 100%; } .lp_header .header_logo a { display: flex; } .lp_header .header_sns { width: clamp(2rem, 14.667vw, 4.4rem); } .lp_header .header_sns a { display: flex; } /* ================================================== フッター ================================================== */ .lp_footer .footer_inner { width: 100%; color: #333; background-color: rgba(226, 235, 239, 0.7); display: flex; align-items: center; padding-bottom: 20px; flex-direction: column; padding: 24px; } .lp_footer .footer_inner small { font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem); } .lp_footer .footer_inner small.attention { margin-top: 20px; margin-bottom: 20px; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } @media screen and (min-width: 768px) { .lp_footer .footer_inner { background-size: contain; } } .lp_footer .footer_inner .sns_area .sns_dlsite_logo { display: flex; justify-content: center; margin-bottom: 40px; transition: 0.3s; } .lp_footer .footer_inner .sns_area .sns_dlsite_logo:hover { opacity: 0.5; } .lp_footer .footer_inner .sns_area .sns_list_area { display: flex; flex-direction: column; align-items: center; gap: 40px; } .lp_footer .footer_inner .sns_area .sns_list_text { text-align: center; margin-bottom: 0.5rem; font-weight: 800; color: #000; } .lp_footer .footer_inner .sns_area .sns_list { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 auto; width: 73%; aspect-ratio: 274/85; } .lp_footer .footer_inner .sns_area .sns_list.cn, .lp_footer .footer_inner .sns_area .sns_list.tw, .lp_footer .footer_inner .sns_area .sns_list.en, .lp_footer .footer_inner .sns_area .sns_list.kr { width: auto; aspect-ratio: initial; } .lp_footer .footer_inner .sns_area .sns_list.cn .sns_item, .lp_footer .footer_inner .sns_area .sns_list.tw .sns_item, .lp_footer .footer_inner .sns_area .sns_list.en .sns_item, .lp_footer .footer_inner .sns_area .sns_list.kr .sns_item { width: 56px; } .lp_footer .footer_inner .sns_area .sns_list.en .sns_item:last-child, .lp_footer .footer_inner .sns_area .sns_list.tw.maniax .sns_item:last-child { width: 180px; } .lp_footer .footer_inner .sns_area .sns_list.tw.maniax .sns_item { width: 36px; } @media screen and (min-width: 768px) { .lp_footer .footer_inner .sns_area .sns_list.tw.maniax .sns_item { width: 56px; } } .lp_footer .footer_inner .sns_area .sns_list.tw.maniax .sns_item:last-child { width: 116px; } @media screen and (min-width: 768px) { .lp_footer .footer_inner .sns_area .sns_list.tw.maniax .sns_item:last-child { width: 180px; } } .lp_footer .footer_inner .sns_area .sns_item { transition: 0.3s; position: relative; } .lp_footer .footer_inner .sns_area .sns_item.jp_share { margin-right: 30px; } .lp_footer .footer_inner .sns_area .sns_item a:hover { opacity: 0.5; } .lp_footer .footer_inner .sns_area .sns_item .sns_item_text { color: #000; position: absolute; font-weight: bold; bottom: -3rem; left: 0; right: 0; margin: auto; text-align: center; } .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(51, 51, 51, 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: #fdfdfd; 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; } } /* ================================================== 全体レイアウト ================================================== */ .lp_wrap { position: relative; overflow: hidden; } .lp_container { position: relative; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } /* ================================================== main内スタイル ================================================== */ .lp_main .sec_heading { margin-bottom: min(10.667vw, 8rem); font-size: clamp(1.5rem, 5.8vw + -2.9486rem, 3rem); } .lp_main .sec_subheading { margin: 0 auto min(4vw, 40rem); font-size: clamp(2.2rem, 7vw + -3.169rem, 4rem); text-align: center; color: #333; font-weight: 800; position: relative; } .lp_main .sec_subheading-qa { margin: 0 auto min(4vw, 4rem); font-size: clamp(2.2rem, 7vw + -3.169rem, 4rem); text-align: center; color: #333; font-weight: 800; position: relative; } .lp_main .notes .sec_heading { margin-bottom: 5vw; text-align: center; } .lp_main .notes .sec_body { width: 96%; } @media screen and (min-width: 768px) { .lp_main .notes .note { padding-left: 2rem; } .lp_main .notes .sec_heading { margin-bottom: min(30px, 2.9vw); } .lp_main .notes .sec_body { width: calc(100% - 30px); } } .lp_main section:not(.fv) { position: relative; padding: 8rem 0.8rem; overflow: hidden; } @media screen and (min-width: 768px) { .lp_main section:not(.fv) { padding: 12rem 0.8rem; } } .fadein_up { opacity: 0; visibility: hidden; } .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(5px); transform: translateY(5px); visibility: hidden; -webkit-filter: blur(10px); filter: blur(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; -webkit-filter: blur(0px); filter: blur(0px); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(5px); transform: translateY(5px); visibility: hidden; -webkit-filter: blur(10px); filter: blur(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; -webkit-filter: blur(0px); filter: blur(0px); } } .fade-out { opacity: 0; } .spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid #094220; border-top-color: #ff9034; -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .no-scroll { overflow: hidden; } .red { color: #db2559; } .underline { text-decoration: underline; } .txt_attention { font-size: 14px; text-align: center; } .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; overflow: hidden; height: auto; text-align: center; } @media (max-width: 400px) { .fv { max-height: min(1330px, 100vh); } } .fv .wrap_coupon { width: 80%; max-width: 473px; position: absolute; bottom: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; /* 初期状態を透明に設定 */ -webkit-animation: reveal 0.3s ease forwards; animation: reveal 0.3s ease forwards; /* アニメーションを設定 */ -webkit-animation-delay: 1s; animation-delay: 1s; z-index: 2; } .fv .wrap_copy { margin: 0 auto; margin-top: 20px; width: 90%; } @media (max-height: 850px) { .fv .wrap_copy { margin-top: 10px; } } .fv .fv_inner { position: relative; z-index: 5; /* マスクグラデーションの背景 */ } @media screen and (min-width: 768px) { .fv .fv_inner { padding-top: 4rem; } } @-webkit-keyframes reveal { 0% { opacity: 0; /* 透明 */ clip-path: inset(0 100% 0 0); /* 右側から隠す */ } 100% { opacity: 1; /* 完全に表示 */ clip-path: inset(0 0 0 0); /* 隠しをなくす */ } } @keyframes reveal { 0% { opacity: 0; /* 透明 */ clip-path: inset(0 100% 0 0); /* 右側から隠す */ } 100% { opacity: 1; /* 完全に表示 */ clip-path: inset(0 0 0 0); /* 隠しをなくす */ } } .fv .fv_inner .reveal-wrapper { background: linear-gradient(to right, #f9861b, #f72f81); width: 100%; /* 幅は100% */ height: 100%; /* 高さは100% */ clip-path: inset(0 100% 0 0); /* 初期状態で右側を隠す */ -webkit-animation: slide-in 0.5s ease forwards; animation: slide-in 0.5s ease forwards; /* アニメーションを設定 */ } @-webkit-keyframes slide-in { 0% { clip-path: inset(0 100% 0 0); /* 右側から隠す */ } 100% { clip-path: inset(0 0 0 0); /* 隠しをなくす */ } } @keyframes slide-in { 0% { clip-path: inset(0 100% 0 0); /* 右側から隠す */ } 100% { clip-path: inset(0 0 0 0); /* 隠しをなくす */ } } .fv .fv_inner .kv { position: relative; width: 85%; margin: 0 auto; } @media (min-width: 1601px) { .fv .fv_inner .kv { width: 100%; } } .fv .fv_inner .kv img { opacity: 0; /* 初期状態を透明に設定 */ -webkit-filter: blur(10px); filter: blur(10px); /* 初期状態を滲ませる */ -webkit-animation: fadeInBlur 2s ease forwards; animation: fadeInBlur 2s ease forwards; /* アニメーションを設定 */ } @-webkit-keyframes fadeInBlur { 0% { opacity: 0; /* 透明 */ -webkit-filter: blur(10px); filter: blur(10px); /* 滲み */ } 100% { opacity: 1; /* 完全に表示 */ -webkit-filter: blur(0); filter: blur(0); /* 滲みをなくす */ } } @keyframes fadeInBlur { 0% { opacity: 0; /* 透明 */ -webkit-filter: blur(10px); filter: blur(10px); /* 滲み */ } 100% { opacity: 1; /* 完全に表示 */ -webkit-filter: blur(0); filter: blur(0); /* 滲みをなくす */ } } .fv .fv_inner .kv img { width: 100%; max-width: 639px; } .fv .fv_inner .wrap_time { width: 73%; max-width: 572px; margin: 0 auto; margin-top: -40px; position: relative; } .fv .fv_character { position: relative; z-index: 1; } @media (max-height: 850px) { .fv .fv_character { width: 90%; margin: 0 auto; margin-top: -25px; } } .fv .fv_character img { width: 100%; max-width: 1085px; height: auto; } @media screen and (min-width: 500px) and (max-width: 1023px) { .fv .fv_character img { max-width: 700px; } } @media screen and (min-width: 768px) { .fv { position: relative; display: flex; flex-direction: row; align-items: center; margin: 0 auto; max-height: 1000px; } .fv .fv_contain { max-width: 1920px; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .fv .wrap_coupon { position: absolute; top: 4rem; left: 30%; width: 30%; -webkit-transform: translateX(-100%); transform: translateX(-100%); max-width: 477px; z-index: 10; } .fv .fv_inner { padding: 2rem; height: auto; order: 0; /* 左側に配置 */ margin-top: 100px; margin-bottom: 50px; -webkit-transform: translateX(0); transform: translateX(0); /* 左端に配置 */ } .fv .fv_inner .wrap_time { display: flex; align-items: center; gap: 1rem; } .fv .fv_inner .wrap_time img { width: auto; max-width: 572px; min-width: 300px; opacity: 0; /* 初期状態を透明に設定 */ -webkit-filter: blur(10px); filter: blur(10px); /* 初期状態を滲ませる */ -webkit-animation: fadeInBlur 2s ease forwards; animation: fadeInBlur 2s ease forwards; /* アニメーションを設定 */ -webkit-animation-delay: 0.5s; animation-delay: 0.5s; /* 0.5秒遅れて表示 */ } .fv .fv_inner .wrap_copy img { max-width: 100%; width: auto; height: auto; opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); -webkit-animation: fadeInBlur 2s ease forwards; animation: fadeInBlur 2s ease forwards; -webkit-animation-delay: 1s; animation-delay: 1s; } .fv .fv_character { flex: 0 0 auto; width: 55%; max-width: 1085px; margin-left: -90px; bottom: -60px; order: 1; } } @media screen and (min-width: 768px) and (min-width: 1601px) { .fv .fv_character { bottom: -100px; } } @media screen and (min-width: 768px) { .fv .fv_character img { width: 100%; height: auto; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .fv .fv_contain { gap: 1rem; width: 100%; } .fv .fv_inner { flex: 0 0 40%; max-width: 450px; -webkit-transform: translateX(0); transform: translateX(0); padding: 1rem; } .fv .fv_character { flex: 0 0 60%; max-width: 560px; left: 2rem; } .fv .fv_character img { width: 100%; height: auto; } } @media screen and (min-width: 1366px) { .fv { background: url(../img/bg_kv_pc.webp) no-repeat center top; background-size: cover; height: 1080px; position: relative; } } @media screen and (min-width: 1366px) and (max-width: 1600px) { .fv { max-height: 840px; } } @media screen and (min-width: 1366px) { .fv .wrap_coupon { left: 50%; /* ブラウザ幅の50%に配置 */ -webkit-transform: translateX(-190%); transform: translateX(-190%); } } @media screen and (min-width: 1366px) and (max-width: 1700px) { .fv .wrap_coupon { -webkit-transform: translateX(-180%); transform: translateX(-180%); width: 26%; top: 3rem; } } /* ================================================== info ================================================== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #292759; border-radius: 8px; } .info { position: relative; background-color: #ff487e; overflow: hidden; } .info .info_character_bottom { position: absolute; bottom: 0; left: 50px; z-index: 1; pointer-events: none; } .info .info_character_bottom img { width: 220px; height: auto; opacity: 1; } @media screen and (max-width: 951px) { .info .info_character_bottom { display: none; } } @media screen and (min-width: 1260px) and (max-width: 1700px) { .info .info_character_bottom { display: none; } } @media screen and (max-width: 767px) { .info .info_character_bottom img { width: 150px; } } .info .sec_switching { width: 100%; height: 16px; position: relative; top: -12px; } .info .info_inner { padding: 0.8rem; position: relative; z-index: 2; } .info .info_inner .sec_subheading { color: #fdfdfd; } .info .info_inner .news_area { width: 100%; max-height: 350px; overflow: auto; max-width: 1000px; margin: 0 auto; border-radius: 8px; margin-bottom: 8rem; background: #951d3d; } .info .info_inner .news_area ul { padding: 1rem; } .info .info_inner .news_area ul li { display: flex; padding: 16px 8px; } .info .info_inner .news_area ul li:not(:last-child) { border-bottom: 1px dotted #d1b2b2; } .info .info_inner .news_area ul li img { width: 120px; height: 63px; margin-right: 16px; } .info .info_inner .news_area ul li .data .wrap_data { display: flex; } .info .info_inner .news_area ul li .data .wrap_data .release { font-size: clamp(1rem, 1.6vw + -0.2272rem, 1.4rem); background-color: #f2eb8d; color: #fdfdfd; padding: 2px 8px; border-radius: 4px; display: inline; margin-right: 8px; margin-bottom: 4px; color: #333; } .info .info_inner .news_area ul li .data .detail { letter-spacing: 0.05em; -webkit-text-decoration: underline #f17d9c; text-decoration: underline #f17d9c; text-underline-offset: 8px; } .info .info_inner .news_area ul li .data .detail a { color: #fdfdfd; } .info .info_inner .news_area ul li:last-child .detail a::after { content: ""; position: relative; background-image: url(../img/icon_btn_pdf.svg); color: #fff; background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; background-size: contain; display: inline-block; } .info .info_inner .cam_info .cam { background-color: #fdfdfd; overflow: hidden; margin-bottom: 16px; position: relative; background-size: cover; border: 1px solid #333; box-shadow: 0px 4px #333; font-size: clamp(1.5rem, -1.2vw + 2.4204rem, 1.2rem); } .info .info_inner .cam_info .cam::after { content: "▼"; color: #db2559; font-size: 1rem; display: block; position: absolute; bottom: 8px; right: 10px; top: calc(50% - 5px); } .info .info_inner .cam_info .cam a { display: block; text-decoration: none; color: inherit; height: 100%; width: 100%; display: flex; align-items: center; } .info .info_inner .cam_info .cam a img { width: 35%; height: 35%; } @media screen and (max-width: 415px) { .info .info_inner .cam_info .cam a img { width: 33%; height: 33%; padding: 0 0 0 0.5rem; } } .info .info_inner .cam_info .cam a .cam_name { padding: 2px 20px 2px 8px; line-height: 1.4; letter-spacing: 0.01em; display: flex; align-items: center; height: 70px; width: 300px; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } @media screen and (max-width: 400px) { .info .info_inner .cam_info .cam a .cam_name { line-height: 1.2; } } @media screen and (min-width: 700px) { .info .info_inner .cam_info .cam a .cam_name { height: auto; width: auto; } } @media screen and (min-width: 768px) { .info { padding-bottom: 80px; } .info .info_inner .cam_info { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; } .info .info_inner .cam_info .cam { width: 300px; min-height: 220px; padding: 0 0 20px; padding-right: 0; cursor: pointer; } .info .info_inner .cam_info .cam::after { left: 50%; top: auto; } .info .info_inner .cam_info .cam:hover:after { -webkit-animation: key2 0.3s ease infinite alternate; animation: key2 0.3s ease infinite alternate; } @-webkit-keyframes key2 { 0% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } @keyframes key2 { 0% { -webkit-transform: translateY(2px); transform: translateY(2px); } 100% { -webkit-transform: translate(0px); transform: translate(0px); } } .info .info_inner .cam_info .cam a { flex-direction: column; align-items: flex-start; height: 100%; } .info .info_inner .cam_info .cam a img { width: 100%; height: auto; } .info .info_inner .cam_info .cam a .cam_name { padding: 12px; display: block; margin: 0 auto; } } /* ================================================== info ================================================== */ .coupon { position: relative; min-height: 100vh; } .coupon .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f3d55b; background-size: cover; background-position: top; z-index: -1; } .coupon_character_top { position: absolute; top: 0; right: 50px; z-index: 1; pointer-events: none; } .coupon_character_top img { width: 200px; height: auto; opacity: 1; } @media screen and (max-width: 1024px) { .coupon_character_top { display: none; } } .coupon_character_bottom { position: absolute; bottom: 0; left: 50px; z-index: 1; pointer-events: none; } @media screen and (max-width: 1700px) { .coupon_character_bottom { display: none; } } .coupon .inner .section_head_note { max-width: 640px; text-align: center; color: #333; background-color: #f2eb8d; padding: 2rem 2rem 2rem 6rem; margin: 0 auto 4rem; display: flex; flex-direction: row; justify-content: space-evenly; gap: 8px; border: 1px dashed #333; position: relative; } .coupon .inner .section_head_note::before { content: ""; background: url(../img/icon_hint.webp) no-repeat center; background-size: contain; width: 20px; height: 31px; position: absolute; left: 2rem; top: 0; bottom: 0; margin: auto; } .coupon .inner .section_head_note a { color: #db2559; font-weight: 800; border-bottom: 1px solid #db2559; } .coupon .inner .coupon_list { z-index: 10; } .coupon .inner .coupon_list .coupon_item { background-color: #fff; border-radius: 12px; padding: 24px; border: 1px solid #333; max-width: 90vw; margin: 0 auto 24px; position: relative; overflow: hidden; } .coupon .inner .coupon_list .coupon_item .coupon_img img { width: 100%; margin-bottom: 8px; } .coupon .inner .coupon_list .coupon_item .coupon_text .coupon_lead { font-size: clamp(1.6rem, 0.8vw + 0.9864rem, 1.8rem); font-weight: 800; padding-bottom: 4px; margin-bottom: 8px; border-bottom: dotted 1px #d1b2b2; } .coupon .inner .coupon_list .coupon_item .coupon_text .coupon_detail { font-size: clamp(1.2rem, 0.8vw + 0.5864rem, 1.4rem); letter-spacing: 0.001; } .coupon .inner .coupon_list .coupon_item .coupon_text .coupon_detail a { color: #db2559; text-decoration: underline; font-weight: 800; } .coupon .inner .coupon_list .coupon_item .coupon_text .coupon_detail dl { padding-bottom: 4px; margin-bottom: 8px; border-bottom: dotted 1px #d1b2b2; } .coupon .inner .coupon_list .coupon_item .coupon_text .coupon_detail dl dt { font-weight: 800; color: #8d39c3; padding: 0 0.6em; border-left: 4px solid #8d39c3; } .coupon .inner .coupon_list .coupon_item .coupon_text .coupon_detail dl dd { margin-bottom: 4px; } .coupon .inner .coupon_list .coupon_item .coupon_text .coupon_detail dl dd span { background-color: #fff898; padding: 0 2px; font-weight: 800; } .coupon .inner .coupon_list .coupon_item .coupon_text .coupon_detail .text_indent { padding-left: 1em; text-indent: -1em; } .coupon .coupon_recommend { text-align: center; position: relative; } .coupon .coupon_recommend .coupon_recommend_copy { font-size: clamp(1.8rem, 4.7vw + -1.8049rem, 3rem); font-weight: 800; position: relative; z-index: 100; line-height: 4.5rem; margin: 4rem 0 2rem; font-family: "Noto Sans TC"; } .coupon .coupon_recommend a { z-index: 100; width: 280px; height: 60px; max-width: 500px; background-color: #db2559; padding: 16px; display: flex; align-items: center; justify-content: center; margin: 16px auto; text-align: center; color: #fff; position: relative; font-size: clamp(1.6rem, 6.2vw - 3.1554rem, 3.2rem); box-shadow: 0px 4px #720432; font-weight: 800; } .coupon .coupon_recommend a::after { content: ""; position: absolute; background-image: url(../img/icon_btn_search.webp); background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; background-size: contain; right: 16px; } .coupon .coupon_recommend a:hover:after { -webkit-animation: key3 0.3s ease infinite alternate; animation: key3 0.3s ease infinite alternate; } @-webkit-keyframes key3 { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @keyframes key3 { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @media screen and (min-width: 768px) { .coupon { padding: 80px 20px; } .coupon .inner { max-width: 1700px; margin: 0 auto; position: relative; z-index: 0; } } @media screen and (min-width: 768px) and (max-width: 1700px) { .coupon .inner { max-width: 1280px; } } @media screen and (min-width: 768px) { .coupon .inner .coupon_list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-bottom: 3rem; } .coupon .inner .coupon_list .coupon_item { width: 44%; margin: 0; } } @media screen and (min-width: 768px) and (min-width: 1700px) { .coupon .inner .coupon_list .coupon_item { width: 24%; } } @media screen and (min-width: 768px) { .coupon .inner .coupon_list .coupon_item .coupon_text .coupon_lead { line-height: 1.6; } .coupon .coupon_recommend a { width: 640px; height: 100px; } } .coupon_list .coupon_item.is_finished { position: relative; } .coupon_list .coupon_item.is_finished::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8px; background-color: rgba(0, 0, 0, 0.5); background-repeat: no-repeat; background-position: top 42% center; background-size: 61.867vw auto; z-index: 50; } @media screen and (min-width: 1024px) { .coupon_list .coupon_item.is_finished::before { border-radius: 1rem; background-size: 32.4rem auto; } } html:lang(ja-jp) .coupon_list .coupon_item.is_finished::before { background-image: url(../img/finished_01_ja_jp.webp); background-size: 80%; } html:lang(en-us) .coupon_list .coupon_item.is_finished::before { background-image: url(../img/finished_01_en_us.webp); background-size: 80%; } html:lang(zh-cn) .coupon_list .coupon_item.is_finished::before { background-image: url(../img/finished_01_zh_cn.webp); background-size: 80%; } html:lang(zh-tw) .coupon_list .coupon_item.is_finished::before { background-image: url(../img/finished_01_zh_tw.webp); background-size: 80%; } html:lang(ko-kr) .coupon_list .coupon_item.is_finished::before { background-image: url(../img/finished_01_ko_kr.webp); background-size: 80%; } /* ================================================== info ================================================== */ .schedule { position: relative; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .schedule .inner { max-width: 1024px; margin: 0 auto; text-align: center; } .schedule .inner .sec_subheading { margin: 0 auto min(1vw, 20rem); } .schedule .inner .attention { margin-bottom: 20px; } .schedule .inner img { margin: 0 auto; margin-top: 2rem; display: block; max-width: 100%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* 光彩の設定 */ } .schedule .inner a { width: 280px; height: 60px; max-width: 500px; background-color: #ba242b; padding: 16px; display: flex; align-items: center; justify-content: center; margin: 2rem auto; text-align: center; color: #fff; position: relative; font-size: clamp(1.6rem, 6.2vw - 3.1554rem, 3.2rem); box-shadow: 0px 4px #510600; font-weight: 800; } .schedule .inner a::after { content: ""; position: absolute; background-image: url(../img/icon_btn_search.webp); background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; background-size: contain; right: 16px; } .schedule .inner a:hover:after { -webkit-animation: key3 0.3s ease infinite alternate; animation: key3 0.3s ease infinite alternate; } @keyframes key3 { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); } } @media screen and (min-width: 768px) { .schedule .inner a { width: 640px; height: 100px; } } /* ================================================== info ================================================== */ .campaign { position: relative; min-height: 100vh; } .campaign .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(141, 57, 195, 0.95); z-index: -1; } @media (min-width: 1601px) { .campaign::before { content: ""; position: absolute; background: url(../img/star.png) no-repeat center; background-size: contain; width: 60px; height: 60px; top: 22%; left: 7%; -webkit-transform: rotate(-5deg); transform: rotate(-5deg); z-index: 0; pointer-events: none; } .campaign::after { content: ""; position: absolute; background: url(../img/star.png) no-repeat center; background-size: contain; width: 40px; height: 40px; top: 28%; left: 4%; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); z-index: -1; pointer-events: none; } .campaign .star-decoration { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .campaign .star-decoration::before { content: ""; position: absolute; background: url(../img/star.png) no-repeat center; background-size: contain; width: 70px; height: 70px; top: 60%; right: 6%; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } .campaign .star-decoration::after { content: ""; position: absolute; background: url(../img/star.png) no-repeat center; background-size: contain; width: 60px; height: 60px; top: 70%; right: 3%; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } } .campaign .inner h2 { margin-bottom: 16px; color: #fdfdfd; } .campaign .inner .campaign_list { margin-top: 16px; } .campaign .inner .campaign_list .campaign_block { background-color: #fdfdfd; border-radius: 8px; overflow: hidden; max-width: 90vw; margin: 0 auto 24px; border: 1px solid #333; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner { position: relative; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_head { padding: 8px; text-align: center; line-height: 1.2; font-size: clamp(1.8rem, 5.4vw + -2.3418rem, 3.2rem); font-weight: 800; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_head .sub_ttl { font-size: clamp(1.5rem, 3.5vw + -1.1845rem, 2.4rem); } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_wrap { gap: 2rem; display: flex; flex-direction: column; } @media screen and (min-width: 768px) { .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_wrap { flex-direction: row; } } @media screen and (min-width: 768px) { .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_wrap .campaign_block_img { width: 50%; } } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_wrap .campaign_block_img img { width: 100%; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_text { font-size: clamp(1.2rem, 2.3vw + -0.5641rem, 1.8rem); } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_point { background: #f2eb8d; border: 1px solid #f2eb8d; max-width: 450px; margin: 0 auto; border-radius: 0.4rem; color: #333; font-weight: 800; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_point .point_head { text-align: center; background-color: #f2eb8d; color: #fdfdfd; padding: 4px; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_point .point_note { padding: 8px; background-color: #fdfdfd; font-size: clamp(1.1rem, 1.9vw + -0.3573rem, 1.6rem); } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_point .point_note li { list-style: disc; margin-left: 2em; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn { background-color: #db2559; padding: 16px; display: flex; align-items: center; justify-content: center; margin: 16px auto; font-weight: 800; text-align: center; color: #fdfdfd; position: relative; box-shadow: 0px 4px #510600; font-size: clamp(1.6rem, 0.8vw + 0.9864rem, 1.8rem); } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn.disabled { pointer-events: none; background-color: darkgrey; box-shadow: none; color: #333; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn.disabled::after { display: none; } @media screen and (min-width: 768px) { .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn { width: 360px; } } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn::after { content: ""; position: absolute; background-image: url(../img/icon_btn_link.webp); background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; background-size: contain; right: 16px; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn.practice { background-color: #2499ba; box-shadow: 0px 4px #002351; } @media screen and (max-width: 374px) { .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn.practice { font-size: clamp(1.2rem, 4.7vw + -2.4049rem, 2.4rem); } } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn.practice::after { content: ""; position: absolute; background-image: url(../img/icon_btn_pdf.png); color: white; background-repeat: no-repeat; background-position: center; width: 30px; height: 30px; background-size: contain; right: 8px; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn.practice:hover:after { -webkit-animation: key3 0.3s ease infinite alternate; animation: key3 0.3s ease infinite alternate; } @keyframes key3 { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); } } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_btn:hover:after { -webkit-animation: key1 0.3s ease infinite alternate; animation: key1 0.3s ease infinite alternate; } @-webkit-keyframes key1 { 0% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes key1 { 0% { -webkit-transform: translateX(2px); transform: translateX(2px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @media screen and (min-width: 1024px) { .campaign .inner { max-width: 1280px; margin: 0 auto; } .campaign .inner .campaign_list { display: flex; flex-direction: column; align-items: center; } .campaign .inner .campaign_list .campaign_block { width: 100%; margin: 32px auto; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner { padding: 4rem; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_wrap { display: flex; gap: 2rem; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_wrap .campaign_block_data { width: 50%; display: flex; flex-direction: column; justify-content: space-between; } .campaign .inner .campaign_list .campaign_block .campaign_block_inner .campaign_block_wrap .campaign_block_data .wrap_btn { gap: 1rem; } } /* ================================================== info ================================================== */ section.closing { margin-top: -4rem; } section.closing .inner { max-width: 480px; margin: 0 auto; padding: 0 4rem; } section.closing .inner img { margin: 0 auto; display: block; width: 100%; } @media screen and (min-width: 1024px) { section.closing { padding: 80px 20px; } }/*# sourceMappingURL=lp.css.map */