@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 { padding: 1rem; max-width: 1024px; margin: 0 auto; } body section .sec_body.white_area { background: rgba(255, 255, 255, 0.6); } * { 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 #e8ca84; } 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; 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: rgb(235, 224, 197); } /*** 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 { 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 { appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::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; 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 { margin: auto; display: flex; justify-content: center; width: 100%; } .lp_header_wrapper .lp_header { display: flex; flex-direction: row; justify-content: space-between; position: fixed; z-index: 1100; width: 100%; align-items: center; padding: 1rem; gap: 2rem; } .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 { 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: #000; 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_menu .hb_menu img { width: 44px; height: 44px; } @media screen and (min-width: 1024px) { .lp_header_wrapper .lp_header { background: rgba(133, 117, 80, 0.9); animation: SlideIn 1.6s; } } .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; } .gnavi li a:hover { color: rgb(131, 15, 5); } .gnavi li a:hover::after { transform: scale(1); } .gnavi li a::after { content: ""; position: absolute; bottom: 0; left: 5%; width: 90%; height: 2px; background: rgb(131, 15, 5); transition: all 0.3s; transform: scaleX(0); transform-origin: center top; } nav.menu .header_sns_x, nav.menu .header_sns_weibo, nav.menu .header_sns_line { width: fit-content; font-size: 1.8rem; line-height: 1; margin: auto; } nav.menu .header_sns_x a, nav.menu .header_sns_weibo a, nav.menu .header_sns_line a { display: flex; align-items: center; justify-content: space-between; background-color: #000; border-radius: 100px; color: #fff; padding: 8px 22px; 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 { opacity: 0.5; } nav.menu .header_sns_x a img, nav.menu .header_sns_weibo a img, nav.menu .header_sns_line 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 { line-height: 1; margin-left: 1rem; } nav.menu .header_sns_weibo a { background: #fff; color: #000; 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; } .header_logo .sp_logo a { position: absolute; left: 0; top: 0; background: rgba(133, 117, 80, 0.9); border-radius: 0px 0px 3rem 0px; padding: 1rem 2.5rem; } /* ================================================== 全体レイアウト ================================================== */ .lp_wrap { position: relative; overflow: hidden; } .lp_container { position: relative; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } /* ================================================== 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: url(../img/common/bg_main_sp.webp) no-repeat center center; background-size: cover; height: 100vh; width: 100vw; position: fixed; z-index: -10; } @media screen and (min-width: 768px) { .overlay_bg { background: url(../img/common/bg_main_pc.webp) no-repeat center center; background-size: cover; } } .lp_main .sec_heading { margin-bottom: min(5.333vw, 5rem); font-size: clamp(1.5rem, 5.8vw + -2.9486rem, 3rem); max-width: 640px; margin: 0 auto 40px; position: relative; padding: 0 1rem; text-align: center; } .lp_main .sec_heading img { width: 100%; } .lp_main .sec_subheading { margin: 0 auto min(2.667vw, 2rem); font-size: clamp(1.4rem, 3.1vw + -0.9777rem, 2.2rem); } .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.2rem, 7vw + -3.169rem, 4rem); line-height: 1; padding: 0 0 4rem; margin: 0 auto 4rem; font-weight: 800; display: block; color: rgb(133, 117, 80); border-bottom: rgb(133, 117, 80) 1px dashed; } p.subheading { color: rgb(131, 15, 5); font-weight: 800; font-size: clamp(1.8rem, 5.4vw + -2.3418rem, 3.2rem); margin-bottom: 2rem; text-align: center; } .wrap_genre { display: flex; flex-direction: row; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; max-width: 792px; } .wrap_genre a { width: 48%; min-height: 16vw; max-width: 400px; color: #FFf; font-weight: bold; background: linear-gradient(90deg, #D8D083 0%, #B99A59 16%, #836119 50%, #8F6F2C 90%); text-align: center; border: 1px #fff solid; display: flex; justify-content: center; align-items: center; position: relative; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); line-height: 1.4em; transition: 0.3s; padding: 1rem 3rem; } .wrap_genre a:hover { opacity: 0.5; } .wrap_genre a::after { content: ""; position: absolute; background: url(../img/common/parts_arrow.svg) no-repeat center center/contain; width: 2vw; height: 4vw; display: block; right: 8px; animation: btn_arrow 0.3s ease infinite alternate; } @media screen and (min-width: 768px) { .wrap_genre { margin: 0 auto; gap: 1.5rem; } .wrap_genre a { width: 48.8%; height: 8vw; 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: 330px; } .wrap_genre.long a { width: 100%; } .wrap_genre.long a.cta { background: linear-gradient(90deg, #AC1515 0%, #6F1D1D 100%); } @media screen and (min-width: 768px) { .wrap_genre.long a { width: 100%; font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); } } .wrap_dual_genre_box_top_text { text-align: center; font-size: clamp(1.8rem, 3.9vw + -1.1913rem, 2.8rem); color: rgb(133, 117, 80); font-weight: bold; margin-bottom: 4rem; } @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: 1.2rem; } .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.6rem, 3.1vw + -0.7777rem, 2.4rem); font-weight: bold; color: rgb(133, 117, 80); margin-bottom: 1rem; } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual { display: flex; flex-direction: row; justify-content: center; gap: 1.2rem; flex-wrap: wrap; } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a { width: 46vw; margin: auto; min-height: 14vw; max-width: 400px; max-height: none; padding: 4rem 4rem; color: #FFF; font-weight: bold; background: linear-gradient(90deg, #D8D083 0%, #B99A59 16%, #836119 50%, #8F6F2C 90%); text-align: center; border: 1px #fff solid; display: flex; justify-content: center; align-items: center; position: relative; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); line-height: 1.4em; transition: 0.3s; } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a:hover { opacity: 0.5; } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a::after { content: ""; position: absolute; background: url(../img/common/parts_arrow.svg) no-repeat center center/contain; width: 2vw; height: 4vw; display: block; right: 8px; animation: btn_arrow 0.3s ease infinite alternate; } @media screen and (min-width: 768px) { .wrap_dual_genre_box .wrap_dual_genre .wrap_dual { margin: 0 auto; gap: 1.5rem; } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a { width: 100vw; min-height: 6vw; padding: 4rem 4rem; } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual a::after { width: 1vw; height: 2vw; right: 16px; } } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_origin { background: rgb(235, 224, 197); border: 1px solid rgb(133, 117, 80); padding: 2rem 1.5rem; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; 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: 0.5rem; } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_origin ul li { font-weight: 700; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); } .wrap_dual_genre_box .wrap_dual_genre .wrap_dual_origin ul li span.small { font-size: clamp(1.6rem, 1.6vw + 0.3728rem, 2rem); } .note { text-align: left; margin: 2rem auto; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } .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; } } @media screen and (min-width: 768px) { .notes .note { padding-left: 2rem; } } .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_btn { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; flex-wrap: wrap; max-width: 640px; margin: 0 auto; } .wrap_btn a { width: 70vw; height: 17.5vw; max-width: 640px; max-height: 160px; background: url(../img/common/btn_cta.webp) no-repeat center; background-size: cover; color: #fff; text-align: center; border: 1px #fff solid; display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; position: relative; font-size: clamp(1.6rem, 6.2vw + -3.1554rem, 3.2rem); font-weight: bold; transition: 0.1s; } .wrap_btn a:hover { opacity: 0.5; } .wrap_btn a::after { content: ""; position: absolute; background: url(../img/common/parts_arrow.svg) no-repeat center center/contain; width: 2vw; height: 4vw; max-width: 16px; display: block; right: 2vw; animation: btn_arrow 0.3s ease infinite alternate; } .wrap_btn .form_text { font-size: clamp(1.4rem, 2.3vw + -0.3641rem, 2rem); font-weight: bold; display: none; margin-bottom: 1rem; } .wrap_btn.greyout a { filter: grayscale(100%); pointer-events: none; } .wrap_btn.greyout a::after { animation: none; display: 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: 10rem 4rem; } nav.menu .menu_container .close { width: 44px; height: 44px; color: #c28484; text-align: center; font-size: clamp(1.8rem, 0.8vw + 1.1864rem, 2rem); border-radius: 120px; position: absolute; right: 2rem; top: 2.5rem; } nav.menu .menu_container ul { max-width: 640px; margin: 0 auto; } nav.menu .menu_container ul li { text-align: left; max-width: 640px; color: #fff; font-weight: 800; letter-spacing: 0.1em; font-size: clamp(1.8rem, 0.8vw + 1.1864rem, 2rem); border-top: dashed #Fff; } nav.menu .menu_container ul li:first-child { border-top: none; } nav.menu .menu_container ul li a.menu_link { position: relative; display: block; color: #fff; padding: 3rem 5px; } nav.menu .menu_container ul li a.menu_link::after { content: ""; position: absolute; background: url(../img/common/parts_arrow.svg) no-repeat center center/contain; width: 2vw; height: 4vw; display: block; right: 4px; top: 0; bottom: 0; margin: auto; animation: btn_arrow 0.3s ease infinite alternate; } nav.menu .menu_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 70; background-color: rgba(133, 117, 80, 0.9); } nav.menu .hb_hidden { display: none; } @keyframes btn_arrow { 0% { transform: translateX(0px); } 100% { transform: translateX(-2px); } } .fadein_up { opacity: 0; visibility: hidden; } .fadein_up.is-show { opacity: 1; visibility: visible; animation: fadeInUp 1s ease forwards; } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(-20px); visibility: hidden; } 100% { opacity: 1; transform: translateY(0); visibility: visible; } } .wrap_btn.timer_20240220 { display: none; } .wrap_btn.timer_20240220 .to_form { filter: grayscale(100%); pointer-events: none; } .wrap_btn.timer_20240220 .to_form:hover { opacity: 1; } .wrap_btn.timer_20240220 .to_form::before { animation: none; } .red { color: rgb(131, 15, 5); } .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: rgb(133, 117, 80); color: #fff; display: flex; justify-content: center; align-items: center; height: min(10.667vw, 6rem); } .lp_footer .footer_inner small { font-size: clamp(1.2rem, 0vw + 1.2rem, 1.2rem); } .sns_area { padding-bottom: min(13.333vw, 10rem); background-color: rgb(202, 184, 142); } .sns_area.jp { background: none; } .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: #000; } .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: #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(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%; transform: translate(-50%, -20%) rotate(-45deg); } .lp_pagetop.is_show { animation: fadein 0.3s forwards; } .lp_pagetop.is_hide { animation: fadeout 0.3s forwards; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } .pre_area { background: #777777; } /* ================================================== 基本要素/韓国語の常時表示ポップアップ ================================================== */ /* 韓国語の常時表示ポップアップ -------------------------------------------------- */ .fixed-attention { 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%; 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; 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%; 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: 8vh 0 1vh; background: url(../img/common/bg_fv_sp.webp) no-repeat center center; background-size: cover; width: 100%; box-sizing: border-box; } @media screen and (min-width: 768px) { .fv { background: url(../img/common/bg_fv_pc.webp) no-repeat center center; background-size: cover; } } .fv .frame { position: relative; z-index: 10; width: calc(98svw - 3.333vw); border: 10px solid #422100; background-size: cover; border-image-source: url("../img/common/frame.png"); border-image-slice: 110; border-image-width: 80px; border-image-outset: 0; border-image-repeat: round; 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); border-image-width: 145px; justify-content: space-between; align-items: flex-start; overflow: auto; } } .fv .fv_inner { padding: 5rem 1rem; transform: translate(100%, -100%); /* 初期位置と角度を設定 */ opacity: 0; animation: fadeInFromTopRight 1s ease forwards; display: flex; flex-direction: column; } @keyframes fadeInFromTopRight { from { transform: translate(2%, -2%); /* 初期位置と角度を設定 */ opacity: 0; } to { transform: translate(0, 0); /* 最終的な位置と角度を設定 */ opacity: 1; } } .fv .fv_inner .fv_title { max-width: 570px; width: 100%; margin-bottom: 8vw; padding: 2rem; text-align: center; margin: auto; order: 1; } .fv .fv_inner .fv_title.jp { width: 80vw; padding: 10rem 2rem 2rem 2rem; } .fv .fv_inner .wrap_result { position: relative; order: 3; display: flex; justify-content: center; gap: 2rem; } .fv .fv_inner .wrap_result.greyout a.touhyou { filter: grayscale(100%); pointer-events: none; } .fv .fv_inner .wrap_result.greyout a.touhyou::after { display: 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.touhyou::after { content: ""; position: absolute; background: url(../img/common/parts_arrow.svg) no-repeat center center/contain; width: 16px; height: 22px; display: block; top: 0; bottom: 0; right: 4%; margin: auto; animation: btn_arrow 0.3s ease infinite alternate; } .fv .fv_inner .wrap_result a.result { max-width: 300px; } .fv .fv_inner .wrap_result a img { width: auto; height: 100%; object-fit: cover; } .fv .fv_inner .flex { height: fit-content; display: flex; justify-content: center; flex-direction: column; gap: 12px; margin-bottom: 20px; } .fv .fv_inner .wrap_time { margin: 1rem auto; max-width: 768px; width: 100%; order: 4; display: flex; flex-direction: column; gap: 2rem; } @media screen and (min-width: 768px) { .fv .fv_inner .wrap_time { width: 94%; } } .fv .fv_inner .wrap_time .flex_long { 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_long.icon_on:before, .fv .fv_inner .wrap_time .flex_long.icon_on:after { content: ""; /* 疑似要素の中身（空白） */ position: absolute; width: 76px; height: 134px; background-image: url(../img/common/parts_flame.svg); background-size: cover; top: 50%; } .fv .fv_inner .wrap_time .flex_long.icon_on:before { transform: translateY(-50%); left: -23px; /* 左側に配置 */ } .fv .fv_inner .wrap_time .flex_long.icon_on:after { right: -23px; transform: translateY(-50%) scaleX(-1); /* 右側に配置 */ } } .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: #fff; display: flex; flex-direction: column; text-align: center; margin: 1rem 0; max-width: 768px; width: 100%; } .fv .fv_inner .wrap_time .time_start dt, .fv .fv_inner .wrap_time .time_announcement dt { font-size: clamp(1.8rem, 2.3vw + 0.0359rem, 2.4rem); background: linear-gradient(90deg, #D8D083 0%, #B99A59 16%, #836119 50%, #8F6F2C 90%); color: #fff; padding: 0 1rem; white-space: nowrap; width: 100%; } .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 { content: ""; /* 疑似要素の中身（空白） */ position: absolute; width: 20px; height: 34px; background-image: url(../img/common/parts_flame.svg); background-size: cover; top: 50%; } .fv .fv_inner .wrap_time .time_start dt span.icon_on:before, .fv .fv_inner .wrap_time .time_announcement dt span.icon_on:before { transform: translateY(-50%); left: -26px; /* 左側に配置 */ } .fv .fv_inner .wrap_time .time_start dt span.icon_on:after, .fv .fv_inner .wrap_time .time_announcement dt span.icon_on:after { right: -26px; transform: translateY(-50%) scaleX(-1); /* 右側に配置 */ } @media screen and (min-width: 768px) { .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 1rem; color: #0b0b0b; margin: 0 auto; } .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.8rem, 2.3vw + 0.0359rem, 2.4rem); } .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.8rem, -0.8vw + 2.4136rem, 1.6rem); } .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; } .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%; } } @keyframes glow { 0% { filter: drop-shadow(0 0 2px rgba(202, 184, 142, 0.3)); } 50% { filter: drop-shadow(0 0 10px rgb(202, 184, 142)); } 100% { filter: drop-shadow(0 0 2px rgba(202, 184, 142, 0.3)); } } .fv .wrap_benefit_jp { position: absolute; top: 15vh; left: -0.5rem; right: auto; z-index: 10; text-align: center; margin: auto; animation: fadeInFromTopRight 1s ease forwards; } .fv .wrap_benefit_jp .benefit_award_jp { transform: rotateZ(-4deg); } .fv .wrap_benefit_jp .benefit_award_jp img { max-width: 310px; animation: glow 6s infinite ease-in-out; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); } @media screen and (min-width: 1024px) { .fv .wrap_benefit_jp { position: absolute; top: 20vh; left: -56rem; right: 0; z-index: 10; text-align: center; margin: auto; } .fv .wrap_benefit_jp .benefit_award_jp { transform: rotateZ(-4deg); } .fv .wrap_benefit_jp .benefit_award_jp img { max-width: 340px; } } @media screen and (min-width: 1024px) { .fv { padding: 8vh 0 1vh; } } @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; max-width: 570px; width: 50vw; } .fv .fv_inner .fv_title img { width: auto; height: 100%; object-fit: cover; } .fv .fv_inner .fv_title.jp { width: 50vw; 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: 768px; width: 100%; } .fv .fv_inner .wrap_time .time_start dd, .fv .fv_inner .wrap_time .time_announcement dd { display: flex; 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; } @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; } } /* ================================================== info ================================================== */ .info { position: relative; background: url(../img/common/bg_lead.webp) repeat-y center center; background-size: 100%; padding: 15rem 1rem; } .info:after { content: ""; position: absolute; left: 0; bottom: -8vw; width: 100%; height: 10vw; background: url(../img/common/bg_lead_section.webp) no-repeat center center; background-size: 100%; z-index: 1; } @media screen and (min-width: 768px) { .info:after { bottom: -140px; width: 100%; height: 100%; max-height: 200px; } } .info .sec_body { text-align: center; font-weight: bold; position: relative; } .info .sec_body::before { content: ""; position: absolute; left: 0; right: 0; top: -7rem; bottom: auto; margin: auto; width: 100%; min-height: 41px; height: 7vw; background: url(../img/common/parts_clown.svg) no-repeat center center; background-size: 54px 41px; z-index: 1; } @media screen and (min-width: 768px) { .info .sec_body::before { top: -7rem; width: 100%; height: 7vw; max-height: 41px; } } .info .sec_body p { font-size: clamp(1.8rem, 0.8vw + 1.1864rem, 2rem); white-space: normal; line-height: 1.8; } .info .sec_body .gold { font-size: clamp(2.4rem, 3.1vw + 0.0223rem, 3.2rem); color: rgb(133, 117, 80); } .info .sec_body .gold.small { font-size: clamp(1.8rem, 0.8vw + 1.1864rem, 2rem); } .info .sec_body .red { font-size: clamp(2.4rem, 3.1vw + 0.0223rem, 3.2rem); color: rgb(131, 15, 5); } .info .sec_body .red.small { font-size: clamp(1.8rem, 0.8vw + 1.1864rem, 2rem); } .info .sec_body strong { font-size: clamp(2.4rem, 3.1vw + 0.0223rem, 3.2rem); color: #fff; background: rgb(131, 15, 5); padding: 0 1rem 0.1rem 1rem; } .info .sec_body br { line-height: 0; font-size: 0; visibility: hidden; display: block; } .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: 768px) { .info { padding: 17rem 1rem; } .info .sec_body { max-width: 1100px; } .info .sec_body.en { max-width: 1100px; } } /* ================================================== info ================================================== */ .subject { padding: 16rem 0 0; } .subject.jp { padding: 8rem 0 8rem; } .participation { padding: 8rem 0 8rem; } .participation.jp { padding: 16rem 0 8rem; } .participation .sec_heading img { width: 100%; } @media screen and (min-width: 768px) { .participation .sec_heading img { width: 100%; } } .participation .sec_body .arrow { margin: 2rem auto; transform: rotate(90deg); } .participation .sec_body .step1 { margin: 4rem auto 10rem; } .participation .sec_body .step1, .participation .sec_body .step2 { border: 2px rgb(133, 117, 80) solid; background: rgb(235, 224, 197); padding: 6rem 2rem 1rem; position: relative; max-width: 1024px; text-align: center; } .participation .sec_body .step1 p.title, .participation .sec_body .step2 p.title { font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); font-weight: bold; margin: 3rem 0 2rem 0; } @media screen and (min-width: 768px) { .participation .sec_body .step1 p.title, .participation .sec_body .step2 p.title { margin: 0 0 2rem 0; } } .participation .sec_body .step1 .wrap_step, .participation .sec_body .step2 .wrap_step { display: flex; flex-direction: column; gap: 10px; } .participation .sec_body .step1 .wrap_step img, .participation .sec_body .step2 .wrap_step img { margin: 0 auto; padding: 0 0 4rem; } @media screen and (min-width: 768px) { .participation .sec_body .step1 .wrap_step img, .participation .sec_body .step2 .wrap_step img { padding: 0 0 2rem; } } .participation .sec_body .caption_area { position: relative; } .participation .sec_body .caption_box { position: absolute; top: -5rem; left: 0; right: 0; bottom: auto; margin: auto; z-index: 5; } .participation .sec_body .caption { position: relative; top: 0; width: fit-content; margin: 0 auto 5px; font-size: clamp(2rem, 1.6vw + 0.7728rem, 2.4rem); line-height: 1.5; font-weight: bold; text-align: center; padding: 2rem 3rem; color: #fff; background: rgb(128, 5, 5); box-shadow: inset 0 1px 0 0 rgb(242, 223, 158), inset 0 -1px 0 0 rgb(242, 223, 158); border-top: 2px solid rgb(128, 5, 5); border-bottom: 2px solid rgb(128, 5, 5); /* 左下の擬似要素 */ /* 右下の擬似要素（画像を反転） */ } .participation .sec_body .caption::before { content: ""; position: absolute; bottom: -21px; left: -19px; width: 53px; height: 60px; background-image: url(../img/common/parts_ribbon.svg); background-size: cover; z-index: -1; } .participation .sec_body .caption::after { content: ""; position: absolute; bottom: -21px; right: -19px; width: 53px; height: 60px; background-image: url(../img/common/parts_ribbon.svg); background-size: cover; z-index: -1; transform: scaleX(-1); } .participation .sec_body .step2 { margin: 6rem auto 0; } @media screen and (min-width: 1024px) { .participation .sec_body .step1 .wrap_step, .participation .sec_body .step2 .wrap_step { flex-direction: row; justify-content: center; align-items: center; } } @media screen and (min-width: 768px) { .participation .sec_body .step1, .participation .sec_body .step2 { margin: 10rem auto; padding: 8rem 4rem 4rem; } .participation .sec_body .step1 { padding: 8rem 4rem 4rem; } .participation .sec_body .step1 .wrap_step { width: 90%; margin: 0 auto; display: flex; justify-content: space-evenly; align-items: center; } .participation .sec_body .step1 .wrap_step .wrap_btn { width: 40%; } .participation .sec_body .step1 .wrap_step .wrap_btn a { height: 5vw; } .participation .sec_body .step1 .wrap_step.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 { padding: 0 2rem 3rem 2rem; } } .time_container { max-width: 960px; text-align: center; padding: 0 0 5rem 0; } .time_container.participation_sanka { padding: 5rem 0 0 0; } .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.4rem, 0.8vw + 0.7864rem, 1.6rem); } @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 .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: rgb(133, 117, 80); color: #fff; font-weight: bold; padding: 5px 30px; margin-bottom: 10px; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); } .time_container .data { position: relative; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); font-weight: bold; } .time_container .data .hanten { transform: rotate(90deg); 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-top: 3rem; } @media screen and (min-width: 768px) { .time_container .note { text-align: center; } } /* ================================================== info ================================================== */ .campaign { position: relative; background: url(../img/common/bg_lead.webp) repeat-y center center; background-size: 100%; } .campaign::before { content: ""; position: absolute; top: 0; background: linear-gradient(270deg, #F3F2E6 0%, #B49D6D 50%, #F3F2E6 100%); height: 8px; width: 100%; } .campaign:after { content: ""; position: absolute; left: 0; bottom: -8vw; width: 100%; height: 10vw; background: url(../img/common/bg_lead_section.webp) no-repeat center center; background-size: 100%; z-index: 1; } @media screen and (min-width: 768px) { .campaign:after { bottom: -140px; width: 100%; height: 100%; max-height: 200px; } } .campaign .sec_heading img { width: 80%; } @media screen and (min-width: 768px) { .campaign .sec_heading img { width: 100%; } } .campaign .sec_body { max-width: 1024px; /*海外*/ } .campaign .sec_body .campaign_info_box { display: flex; justify-content: center; flex-direction: column; text-align: center; gap: 40px; } .campaign .sec_body .campaign_info_box .fukidashi { position: relative; background-color: rgb(131, 15, 5); /* 深い赤色 */ color: white; font-size: 18px; font-weight: bold; line-height: 1.5; padding: 16px 24px; border-radius: 20px; text-align: center; display: inline-block; max-width: 790px; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); } .campaign .sec_body .campaign_info_box .fukidashi.jp { max-width: 496px; } .campaign .sec_body .campaign_info_box .fukidashi.en { max-width: 790px; } .campaign .sec_body .campaign_info_box .fukidashi.cn { max-width: 700px; } .campaign .sec_body .campaign_info_box .fukidashi.tw { max-width: 512px; } .campaign .sec_body .campaign_info_box .fukidashi.kr { max-width: 616px; } .campaign .sec_body .campaign_info_box .fukidashi span { font-size: clamp(2rem, 4.7vw + -1.6049rem, 3.2rem); } .campaign .sec_body .campaign_info_box .fukidashi::after { content: ""; position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); border-width: 32px 16px 0 16px; border-style: solid; border-color: rgb(131, 15, 5) transparent transparent transparent; } .campaign .sec_body .baloon { background: rgba(235, 224, 197, 0.7); padding: 5rem 2rem; color: #0b0b0b; position: relative; margin: 5rem auto 0; font-weight: 700; width: 100%; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); display: flex; flex-direction: column; align-items: center; } @media screen and (min-width: 768px) { .campaign .sec_body .baloon { padding: 10rem 6rem; } } .campaign .sec_body .baloon .text_info { text-align: center; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); font-weight: bold; margin-top: 40px; line-height: 1.5; } .campaign .sec_body .baloon .text_info .big { font-size: clamp(1.8rem, 5.4vw + -2.3418rem, 3.2rem); } .campaign .sec_body .baloon .text_note { font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); font-weight: normal; margin-top: 1rem; line-height: 1.5; } .campaign .sec_body .baloon .text_note a { color: rgb(131, 15, 5); } @media screen and (min-width: 768px) { .campaign .sec_body .baloon .text_note { text-align: center; } } .campaign .sec_body .baloon .cp_share_img { padding: 2rem 0 4rem; } .campaign .sec_body .baloon .campaign_share { text-align: center; font-size: 1.8rem; line-height: 1; max-width: 360px; width: 100%; } .campaign .sec_body .baloon .campaign_share a { display: flex; gap: 1rem; align-items: center; justify-content: center; background-color: #000; border-radius: 100px; color: #fff; padding: 1.5rem 3rem; transition: opacity 0.3s; max-width: 360px; width: 100%; } .campaign .sec_body .baloon .campaign_share a:hover { opacity: 0.5; } .campaign .sec_body .baloon .campaign_share a img { width: 30px; height: 30px; } @media screen and (min-width: 768px) { .campaign .sec_body .baloon .campaign_share a img { width: 40px; height: 40px; } } .campaign .sec_body .baloon .campaign_share a p { line-height: 1; font-size: clamp(2.4rem, 3.1vw + 0.0223rem, 3.2rem); } .campaign .sec_body .baloon .time_container .data { position: relative; } .campaign .sec_body .baloon .time_container .data:before, .campaign .sec_body .baloon .time_container .data:after { content: ""; /* 疑似要素の中身（空白） */ position: absolute; width: 16px; height: 22px; background-image: url(../img/common/parts_arrow_gold.svg); background-size: cover; /* 赤色の背景（視覚確認用） */ top: 50%; /* コンテナ中央に揃える */ transform: translateY(-50%) rotate(90deg); } .campaign .sec_body .baloon .time_container .data:before { left: -4rem; /* 左側に配置 */ } .campaign .sec_body .baloon .time_container .data:after { right: -4rem; /* 右側に配置 */ } .campaign .sec_body .voting_prizes_box .voting_prizes { margin-bottom: 1rem; } .campaign .sec_body .voting_prizes_box .voting_prizes .label { display: inline-block; background-color: rgb(133, 117, 80); color: #fff; font-weight: bold; padding: 5px 30px; margin: 3rem 0 3rem; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); } .campaign .sec_body .prizes_list { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem 0; background: #fff; border: 1px solid rgb(133, 117, 80); padding: 2rem; max-width: 85vw; margin: auto; } .campaign .sec_body .prizes_list li { max-width: 50vw; width: 100%; } @media screen and (min-width: 768px) { .campaign .sec_body .prizes_list { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; padding: 4rem; border: 2px solid rgb(133, 117, 80); max-width: 860px; margin: auto; } .campaign .sec_body .prizes_list li { max-width: 250px; } .campaign .sec_body .prizes_list li:first-child { max-width: 320px; margin: 0 30%; } } .campaign .overview_kaigai { padding: 8rem 1rem 1rem 1rem; } .campaign .award_attention { text-align: center; } .campaign .wrap_award_kaigai { padding: 0 0 8rem; } .campaign .award_attention { max-width: 800px; margin: 0 auto 3rem; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } .campaign .kaigai_text01 { text-align: center; max-width: 950px; font-weight: bold; font-size: clamp(2rem, 0vw + 2rem, 2rem); margin: 4rem auto 2rem; } .campaign .kaigai_text02 { text-align: center; max-width: 800px; margin: auto; font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); } .campaign .prizes_bottom_box .label_bottom01 { font-size: clamp(2rem, 4.7vw + -1.6049rem, 3.2rem); text-align: center; font-weight: bold; } .campaign .prizes_bottom_box .label_bottom02 { margin-top: 2rem; font-size: clamp(2rem, 4.7vw + -1.6049rem, 3.2rem); text-align: center; font-weight: bold; line-height: 1.5; } .campaign .prizes_bottom_box .label_bottom03 { font-size: clamp(1.4rem, 0.8vw + 0.7864rem, 1.6rem); text-align: center; } /* ================================================== info ================================================== */ .overview { padding: 16rem 0 8rem; } .overview section { max-width: 800px; margin: auto; padding: 3rem 0.6rem; } .overview .sec_heading img { width: 80%; } @media screen and (min-width: 768px) { .overview .sec_heading img { width: 100%; } } .overview .sec_body { text-align: center; } .wrap_award .award_area .award_box { display: flex; align-items: center; flex-direction: column; gap: 0; } @media screen and (min-width: 768px) { .wrap_award .award_area .award_box { gap: 2rem; } } .wrap_award .award_area .award_box .award_list { display: flex; justify-content: center; align-items: center; gap: 2rem; } .wrap_award .award_area .award_box .award_list img { max-width: 40vw; width: 100%; } @media screen and (min-width: 768px) { .wrap_award .award_area .award_box .award_list img { max-width: 240px; } .wrap_award .award_area .award_box .award_list.top { margin-bottom: -8rem; } .wrap_award .award_area .award_box .award_list.mid { justify-content: space-between; width: 660px; margin: auto; } .wrap_award .award_area .award_box .award_list.bottom { margin-top: -8rem; } } .wrap_award .award_area .text { text-align: center; margin-top: 1rem; } .award_info_box { margin-top: 4rem; } .award_info_box ul { display: flex; flex-direction: column; gap: 24px; } .award_info_box ul li { display: flex; flex-direction: column; text-align: left; gap: 10px; } .award_info_box ul li .award_info_title { text-align: left; font-size: clamp(1.6rem, 1.6vw + 0.3728rem, 2rem); display: inline-block; background-color: rgb(133, 117, 80); color: #fff; font-weight: bold; padding: 5px 16px; width: fit-content; } .award_info_box ul li .award_info_text { text-align: left; font-weight: bold; font-size: clamp(1.6rem, 0vw + 1.6rem, 1.6rem); } .award_info_box .text_info { text-align: center; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); font-weight: bold; margin-top: 40px; line-height: 1.5; } .wrap_benefits .text { text-align: center; font-size: clamp(1.6rem, 3.1vw + -0.7777rem, 2.4rem); font-weight: bold; line-height: 1.8; }/*# sourceMappingURL=lp.css.map */