@charset "UTF-8"; /* ======================================= reset ======================================= */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.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; } /* 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 */ :where(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; -webkit-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; } /*chromeの補完機能OFF*/ input:-webkit-autofill { transition: background-color 5000s ease-in-out 0s !important; } :focus { outline: 0; } h1, h2, h3, h4, h5, h6, ul, ol, li, p, dl, dt, dd { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } /* ======================================= layout ======================================= */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: rgb(17, 109, 217); color: rgb(40, 60, 120); font-family: "Noto Sans JP", sans-serif; font-weight: 400; line-height: 1; margin: auto; width: 100%; } @media only screen and (max-width: 1023px) { body { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { body { font-size: 16px; padding: 30px 30px 30px 0; } } body::before, body::after { background: rgb(17, 109, 217); content: ""; display: block; left: 0; position: fixed; width: 100%; z-index: 100; } @media only screen and (max-width: 1023px) { body::before, body::after { height: 2.667vw; } } @media only screen and (min-width: 1024px) { body::before, body::after { height: 30px; } } body::before { top: 0; } body::after { bottom: 0; } a { color: rgb(40, 60, 120); text-decoration: none; } img { vertical-align: bottom; width: 100%; } @media only screen and (max-width: 1023px) { .none-sp { display: none; } } @media only screen and (min-width: 1024px) { .none-pc { display: none; } } .en { font-family: "Outfit", sans-serif; font-weight: 400; } .loading { background: linear-gradient(135deg, rgb(40, 121, 253) 0%, rgb(0, 196, 202) 100%); left: 0; position: fixed; top: 0; z-index: 1000; } .loading-wrap { align-items: center; background: url(../img/share/loading_fv.png) 50% 50%/cover no-repeat; display: flex; justify-content: center; flex-direction: column; height: 100vh; height: 100svh; width: 100vw; } .loading-text { color: #fff; font-weight: 500; letter-spacing: 0.06em; line-height: 1.613; text-align: center; } @media only screen and (max-width: 1023px) { .loading-text { font-size: 8.267vw; } } @media only screen and (min-width: 1024px) { .loading-text { font-size: 3.1vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .loading-text { font-size: 62px; } } @media only screen and (max-width: 1023px) { .loading-img { width: 72vw; } } @media only screen and (min-width: 1024px) { .loading-img { width: 27vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .loading-img { width: 540px; } } .loading-triangle { position: absolute; animation: spin 7s linear infinite !important; } @media only screen and (max-width: 1023px) { .loading-triangle { width: 30.4vw; } } @media only screen and (min-width: 1024px) { .loading-triangle { width: 11.4vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .loading-triangle { width: 228px; } } .loading-triangle img { animation: spin linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); transform-origin: center; } 100% { transform: rotate(360deg); transform-origin: center; } } @keyframes fadeInLeftAnime { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeUpAnime { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes rotateAnime { 0% { transform: rotate(0deg); } 50% { transform: rotate(360deg); } 100% { transform: rotate(720deg); } } @keyframes swingAnime { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes textRevealer { 60% { transform: scaleX(1); } 100% { transform: scaleX(0); } } @keyframes GradietionAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes charaPurun { 0% { transform: scale(1, 1) translate(0%, 0%); } 10% { transform: scale(0.9, 0.9) translate(0%, 5%); } 20% { transform: scale(1.3, 0.8) translate(0%, 10%); } 45% { transform: scale(0.8, 1.3) translate(0%, -10%); } 55% { transform: scale(1.1, 0.9) translate(0%, 5%); } 70% { transform: scale(1, 1) translate(0%, 0%); } 100% { transform: scale(1, 1) translate(0%, 0%); } } @keyframes charaKorokoro { 0% { transform: translate(0%, 0%); } 5% { transform: translate(10%, 0%) rotate(10deg); } 25% { transform: translate(15%, 0%) rotate(15deg); } 30% { transform: translate(-10%, 0%) rotate(-10deg); } 35% { transform: translate(-15%, 0%) rotate(-15deg); } 45% { transform: translate(10%, 0%) rotate(10deg); } 50% { transform: translate(15%, 0%) rotate(15deg); } 60% { transform: translate(-5%, 0%) rotate(-5deg); } 65% { transform: translate(-7%, 0%) rotate(-7deg); } 70% { transform: translate(0%, 0%) rotate(0deg); } 100% { transform: translate(0%, 0%) rotate(0deg); } } @keyframes charaPoyooon { 0% { transform: scale(1, 1) translate(0%, 0%); } 10% { transform: scale(1.1, 0.9) translate(0%, 2.5%); } 30% { transform: scale(1.2, 0.8) translate(0%, 7.5%); } 40% { transform: scale(1, 1) translate(0%, 0%); } 50% { transform: scale(0.9, 1.2) translate(0%, -20%); } 65% { transform: scale(0.9, 1.2) translate(0%, -5%); } 75% { transform: scale(1.2, 0.8) translate(0%, 7.5%); } 80% { transform: scale(1, 1) translate(0%, 0%); } 100% { transform: scale(1, 1) translate(0%, 0%); } } .wrapper { overflow: hidden; } @media only screen and (min-width: 1024px) { .wrapper { margin-left: 21.9619326501%; } } .l-header { z-index: 120; } @media only screen and (max-width: 1023px) { .l-header { background: rgb(17, 109, 217); color: #fff; height: 100vh; height: 100 svh; overflow-y: scroll; position: fixed; right: -100%; transition: all 0.3s ease; top: 0; visibility: hidden; width: 90.667vw; } } @media only screen and (min-width: 1024px) { .l-header { left: 0; position: fixed; top: 0; width: 20.4978038067%; } } @media only screen and (max-width: 1023px) { .humburger-button { background: linear-gradient(90deg, rgb(247, 182, 241) 0%, rgb(0, 194, 235) 100%); border-radius: 5px; cursor: pointer; padding: 2px; position: fixed; right: 5px; top: 5px; z-index: 130; } .humburger-button-inner { background: rgb(17, 109, 217); border-radius: 5px; height: 42px; transition: all 0.4s; width: 42px; } .humburger-button-inner span { background: linear-gradient(90deg, rgb(247, 182, 241) 0%, rgb(0, 194, 235) 100%); border-radius: 2px; display: block; height: 3px; left: 11px; position: absolute; transition: all 0.4s; width: 25px; } .humburger-button-inner span:nth-of-type(1) { top: 12px; } .humburger-button-inner span:nth-of-type(2) { top: 21px; } .humburger-button-inner span:nth-of-type(3) { top: 30px; } .is-humburger-open .humburger-button-inner { background: #fff; transform: rotateY(-360deg); } .is-humburger-open .humburger-button-inner span:nth-of-type(1) { left: 9px; transform: translateY(8px) rotate(-135deg); } .is-humburger-open .humburger-button-inner span:nth-of-type(2) { opacity: 0; } .is-humburger-open .humburger-button-inner span:nth-of-type(3) { left: 9px; transform: translateY(-10px) rotate(135deg); } .is-humburger-open .l-header { right: 0; visibility: visible; } } @media only screen and (max-width: 1023px) { .l-header-inner { padding: 3.333vw 2.667vw 42.667vw 5.333vw; position: relative; } } @media only screen and (min-width: 1024px) { .l-header-inner { display: flex; flex-direction: column; height: 100vh; height: 100svh; padding: 30px 10px 60px; } } @media only screen and (min-width: 1024px) and (min-width: 1200px) { .l-header-inner { margin: auto; max-width: 350px; } } @media only screen and (max-width: 1023px) { .l-header-logo { padding: 3.333vw 0; width: 53.333vw; } } @media only screen and (min-width: 1024px) { .l-header-logo { margin: auto; max-width: 300px; width: 100%; } } .l-nav-link { color: #fff; } @media only screen and (max-width: 1023px) { .l-nav-link { display: block; position: relative; width: 66.667vw; } .l-nav-link b { font-size: 4.8vw; } .l-nav-link i { font-size: 3.2vw; } } @media only screen and (min-width: 1024px) { .l-nav-link { font-size: 0.8vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .l-nav-link { font-size: 14px; } } .l-nav-inner { position: relative; } @media only screen and (max-width: 1023px) { .l-nav-wrapper { line-height: 6.667vw; } } @media only screen and (min-width: 1024px) { .l-nav-wrapper { line-height: 1vw; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-nav-wrapper { line-height: 1.5vw; } } .l-nav-wrapper b { display: block; letter-spacing: 0.12em; font-weight: 900; } @media only screen and (max-width: 1023px) { .l-nav-wrapper b { font-size: 4vw; line-height: 1.389; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .l-nav-wrapper b { line-height: 1.25; text-shadow: 0 0 5px rgb(17, 109, 217); font-size: 19px; margin-bottom: 8px; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-nav-wrapper b { font-size: 15px; line-height: 1.316; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-nav-wrapper b { margin-bottom: 0; } } .l-nav-arrow::before, .l-nav-arrow::after { z-index: 16; background: linear-gradient(-135deg, rgb(247, 182, 241) 0%, rgb(0, 194, 235) 100%); border-radius: 0.4vw; content: ""; display: block; height: 0.8vw; margin-top: -0.4vw; position: absolute; right: 5.333vw; top: 3vw; transition: all 0.3s; width: 5.333vw; } .l-nav-arrow::after { transform: rotate(90deg); } .l-nav-arrow.is-active::after { transform: rotate(0deg); } @media only screen and (max-width: 1023px) { .l-nav-list { border: solid rgb(40, 60, 120); border-width: 1px 0; margin-bottom: 4.8vw; padding: 12vw 0; } } @media only screen and (min-width: 1024px) { .l-nav-list { display: flex; flex-direction: column; justify-content: space-around; height: calc(100vh - 200px - 210px); height: calc(100svh - 200px - 210px); margin: auto; max-width: 300px; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-nav-list { height: calc(100vh - 155px - 145px); height: calc(100svh - 155px - 145px); } } @media only screen and (min-width: 1024px) { .l-nav-item, .l-nav-twitter { position: relative; z-index: 10; } } @media only screen and (max-width: 1023px) { .l-nav-item { margin: auto; } .l-nav-item:not(:last-child) { margin-bottom: 9.333vw; } } .l-nav-item-main { display: block; letter-spacing: 0.12em; } @media only screen and (max-width: 1023px) { .l-nav-item-main { line-height: 1.389; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .l-nav-item-main { line-height: 1.5; text-shadow: 0 0 5px rgb(17, 109, 217); } } .l-nav-item-main.ja { font-weight: 900; } @media only screen and (max-width: 1023px) { .l-nav-item-main.ja { font-size: 4.8vw; } } @media only screen and (min-width: 1024px) { .l-nav-item-main.ja { font-size: 20px; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-nav-item-main.ja { font-size: 18px; } } .l-nav-item-main.en { font-weight: 900; } @media only screen and (max-width: 1023px) { .l-nav-item-main.en { font-size: 5.333vw; } } @media only screen and (min-width: 1024px) { .l-nav-item-main.en { font-size: 22px; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-nav-item-main.en { font-size: 20px; } } .l-nav-item-main span { display: inline-block; transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1); transform: translate(20%, 100%); position: relative; z-index: 1; } .l-nav-item-main span:before { content: ""; position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 100%; transform: translateY(-40%); transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1); } .l-nav-item-main span.row { overflow: hidden; display: block; transform: none; } .l-nav-item-main span.row:before { display: none; } .l-nav-item-main .animate { transform: translate(0, 0); } .l-nav-item-main .animate:before { transform: translateY(100%); } .l-nav-child { color: #fff; display: none; } @media only screen and (max-width: 1023px) { .l-nav-child { background: rgba(0, 194, 235, 0.5); background: linear-gradient(135deg, rgba(247, 182, 241, 0.5) 0%, rgba(0, 194, 235, 0.5) 100%); padding: 5.333vw 3.333vw 0; margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .l-nav-child { background: rgb(247, 182, 241); background: linear-gradient(135deg, rgb(247, 182, 241) 0%, rgb(0, 194, 235) 100%); opacity: 0; padding: 20px 35px; position: absolute; right: -350px; top: -30px; transition: all 0.3s ease-in; visibility: hidden; width: 345px; z-index: 110; } } .l-nav-child::before { width: 0; height: 0; border-style: solid; border-width: 8.5px 15px 8.5px 0; border-color: transparent rgb(17, 109, 217) transparent transparent; } @media only screen and (min-width: 1024px) { .l-nav-child::before { border: solid transparent; border-right-color: rgb(247, 182, 241); border-width: 8.5px 15px 8.5px 0; content: ""; height: 0; left: -15px; position: absolute; top: 36px; width: 0; } } @media only screen and (max-width: 1023px) { .l-nav-child-soon { padding-bottom: 5.333vw; } } @media only screen and (min-width: 1024px) { .l-nav-child-soon { padding-bottom: 0px !important; } } @media only screen and (min-width: 1024px) { .l-nav-item:hover .l-nav-child { display: block; opacity: 1; visibility: visible; } } .l-nav-child-term { border-bottom: 1px solid #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .l-nav-child-term { font-size: 3.733vw; line-height: 1.071; padding-bottom: 1.6vw; } } @media only screen and (min-width: 1024px) { .l-nav-child-term { font-size: 18px; line-height: 1.444; margin-bottom: 20px; padding-bottom: 10px; } } @media only screen and (max-width: 1023px) { .l-nav-child-data { padding-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .l-nav-child-data { padding-bottom: 20px; } } @media only screen and (max-width: 1023px) { .l-nav-child-list { columns: 2; padding-top: 2vw; } } @media only screen and (max-width: 1023px) { .l-nav-child-item { font-size: 3.6vw; font-weight: 500; line-height: 1.2; margin: 0 0 6.667vw; } } @media only screen and (min-width: 1024px) { .l-nav-child-item { font-size: 18px; font-weight: 900; letter-spacing: 0.12em; } .l-nav-child-item:not(:last-child) { margin-bottom: 40px; } } .l-nav-child-link { color: #fff; scroll-behavior: smooth; } .l-header-share { background: rgba(255, 255, 255, 0.8); position: relative; z-index: 5; } @media only screen and (max-width: 1023px) { .l-header-share { border-radius: 1.333vw; margin: auto; padding: 7.333vw 8vw; width: 74.667vw; } } @media only screen and (min-width: 1024px) { .l-header-share { border-radius: 10px; margin-top: 20px; padding: 20px 0; width: 100%; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-header-share { transform: scale(0.95); } } .l-header-share-title { /* background: linear-gradient(to right, rgb(40,121,253) 0%, rgb(0,196,202) 100%); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; */ display: inline-block; font-weight: 700; letter-spacing: 0.1em; color: #116dd9; } @media only screen and (max-width: 1023px) { .l-header-share-title { font-size: 5.333vw; margin-bottom: 4.667vw; } } @media only screen and (min-width: 1024px) { .l-header-share-title { font-size: 22px; margin: 0 0 10px 12.5%; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-header-share-title { font-size: 20px; } } .l-header-share-twitter { background: rgb(29, 155, 240); display: block; text-align: center; } @media only screen and (max-width: 1023px) { .l-header-share-twitter { border-radius: 5.833vw; margin: 0 auto 4.667vw; width: 58.667vw; } } @media only screen and (min-width: 1024px) { .l-header-share-twitter { border-radius: 25px; margin: 0 auto 20px; max-width: 250px; width: 78.125%; } .l-header-share-twitter:hover { opacity: 0.8; } } .l-header-share-twitter-icon { display: inline-block; fill: #fff; vertical-align: middle; } @media only screen and (max-width: 1023px) { .l-header-share-twitter-icon { margin-right: 1.333vw; width: 5.067vw; } } @media only screen and (min-width: 1024px) { .l-header-share-twitter-icon { margin-right: 10px; width: 22px; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-header-share-twitter-icon { margin-right: 6px; width: 18px; } } .l-header-share-twitter-text { color: #fff; font-weight: 900; letter-spacing: 0.1em; vertical-align: middle; } @media only screen and (max-width: 1023px) { .l-header-share-twitter-text { font-size: 4.667vw; line-height: 2.571; } } @media only screen and (min-width: 1024px) { .l-header-share-twitter-text { font-size: 17px; line-height: 3; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-header-share-twitter-text { font-size: 12px; } } .l-header-share-list { display: flex; justify-content: center; } @media only screen and (max-width: 1023px) { .l-header-share-item { margin: 0 1.333vw; width: 10.667vw; } } @media only screen and (min-width: 1024px) { .l-header-share-item { margin: 0 10px; width: 40px; } } @media only screen and (min-width: 1024px) and (max-width: 1430px) { .l-header-share-item { margin: 0 6px; width: 30px; } } .header-deco { position: absolute; } @media only screen and (max-width: 1023px) { .header-deco { bottom: 18.667vw; right: 6vw; width: 64.533vw; } } @media only screen and (min-width: 1024px) { .header-deco { animation: fadeUpAnime 0.5s forwards; bottom: 0.5%; opacity: 0; right: 0; width: 398px; } } @media only screen and (min-width: 1024px) and (max-width: 2000px) { .header-deco { width: 104.737%; } } .l-main { background: #fff; } @media only screen and (max-width: 1023px) { .l-main { margin: 2.667vw auto; width: 94.667vw; } } @media only screen and (min-width: 1024px) { .l-main { width: 100%; height: 100%; } } .l-main-content { overflow: hidden; position: relative; } .l-main-corner { fill: rgb(17, 109, 217); position: fixed; z-index: 100; } @media only screen and (max-width: 1023px) { .l-main-corner { height: auto; width: 4vw; } } @media only screen and (min-width: 1024px) { .l-main-corner { height: auto; max-width: 100px; width: 6.289%; } } .l-main-corner.corner02 { transform: rotate(90deg); } .l-main-corner.corner03 { transform: rotate(270deg); } .l-main-corner.corner04 { transform: rotate(180deg); } @media only screen and (max-width: 1023px) { .l-main-corner.corner01 { margin: -1px 0 0 -1px; top: 2.667vw; } .l-main-corner.corner02 { margin: -1px -1px 0 0; right: 2.667vw; top: 2.667vw; } .l-main-corner.corner03 { bottom: 2.667vw; margin: 0 0 -1px -1px; } .l-main-corner.corner04 { bottom: 2.667vw; margin: 0 -1px -1px 0; right: 2.667vw; } } @media only screen and (min-width: 1024px) { .l-main-corner.corner01 { margin: -1px 0 0 -1px; top: 30px; } .l-main-corner.corner02 { margin: -1px -1px 0 0; right: 30px; top: 30px; } .l-main-corner.corner03 { bottom: 30px; margin: 0 0 -1px -1px; } .l-main-corner.corner04 { bottom: 30px; margin: 0 -1px -1px 0; right: 30px; } } .l-main-inner { margin: auto; max-width: 1390px; } .l-footer { border-top: 1px solid rgb(0, 159, 238); position: relative; } @media only screen and (max-width: 1023px) { .l-footer { padding: 8.667vw 0 6vw; } } @media only screen and (min-width: 1024px) { .l-footer { padding: 70px 40px 40px; } } .l-pagetop { align-items: center; background: rgb(0, 159, 238); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; position: fixed; z-index: 90; } @media only screen and (max-width: 1023px) { .l-pagetop { bottom: 8vw; height: 15.6vw; right: 4.667vw; width: 15.6vw; } } @media only screen and (min-width: 1024px) { .l-pagetop { bottom: 40px; height: 117px; right: 5.031%; width: 117px; } .l-pagetop:hover { opacity: 0.8; } } .l-pagetop.is-scrolled { bottom: inherit; position: absolute; } @media only screen and (max-width: 1023px) { .l-pagetop.is-scrolled { top: -8vw; } } @media only screen and (min-width: 1024px) { .l-pagetop.is-scrolled { top: -60px; } } .l-pagetop-icon { fill: #fff; } @media only screen and (max-width: 1023px) { .l-pagetop-icon { margin-bottom: 1.333vw; width: 3.733vw; } } @media only screen and (min-width: 1024px) { .l-pagetop-icon { margin-bottom: 8px; width: 28px; } } .l-pagetop-text { color: #fff; letter-spacing: 0.17em; } @media only screen and (max-width: 1023px) { .l-pagetop-text { font-size: 3.733vw; transform: scale(0.5); transform-origin: center top; white-space: nowrap; } } @media only screen and (min-width: 1024px) { .l-pagetop-text { font-size: 14px; } } @media only screen and (max-width: 1023px) { .l-footer-corp { margin-bottom: 16vw; } } @media only screen and (min-width: 1024px) { .l-footer-corp { margin-bottom: 65px; } } .l-footer-corp-list { display: flex; flex-wrap: wrap; justify-content: center; } @media only screen and (max-width: 1023px) { .l-footer-corp-list { margin: 0 auto 5.333vw; width: 66.667vw; } } @media only screen and (min-width: 1024px) { .l-footer-corp-list { margin: 0 auto 40px; max-width: 1300px; width: 65vw; } } @media only screen and (max-width: 1023px) { .l-footer-corp-item { margin: 0 2.933vw 3.467vw; width: 24.8vw; } } @media only screen and (min-width: 1024px) { .l-footer-corp-item { margin: 0 20px 35px; max-width: 240px; width: 12vw; } } .l-footer-share { text-align: center; } @media only screen and (max-width: 1023px) { .l-footer-share { margin-bottom: 10vw; } } @media only screen and (min-width: 1024px) { .l-footer-share { margin-bottom: 80px; } } .l-footer-common { text-align: center; } @media only screen and (max-width: 1023px) { .l-footer-common { margin-top: 10vw; } } @media only screen and (min-width: 1024px) { .l-footer-common { margin-top: 80px; } } .l-footer-note { color: #0f5cbf; font-weight: 500; position: relative; text-align: center; } @media only screen and (max-width: 1023px) { .l-footer-note { width: 82.667vw; font-size: 2.933vw; line-height: 4vw; margin: 10vw auto 0; } } @media only screen and (min-width: 1024px) { .l-footer-note { text-align: center; font-size: 1.1vw; margin: 7.3vw auto 0; } } .l-footer-share-title { background: linear-gradient(to right, rgb(40, 121, 253) 0%, rgb(0, 196, 202) 100%); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-weight: 500; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .l-footer-share-title { font-size: 4.533vw; margin-bottom: 4vw; } } @media only screen and (min-width: 1024px) { .l-footer-share-title { font-size: 34px; margin-bottom: 30px; } } .l-footer-share-twitter { background: rgb(29, 155, 240); display: block; } @media only screen and (max-width: 1023px) { .l-footer-share-twitter { border-radius: 6vw; margin: 0 auto 7.333vw; width: 60vw; } } @media only screen and (min-width: 1024px) { .l-footer-share-twitter { border-radius: 45px; margin: 0 auto 55px; width: 450px; } .l-footer-share-twitter:hover { opacity: 0.8; } } .l-footer-share-twitter-icon { display: inline-block; fill: #fff; vertical-align: middle; } @media only screen and (max-width: 1023px) { .l-footer-share-twitter-icon { margin-right: 1.333vw; width: 4.267vw; } } @media only screen and (min-width: 1024px) { .l-footer-share-twitter-icon { margin-right: 10px; width: 32px; } } .l-footer-share-twitter-text { color: #fff; font-weight: 900; letter-spacing: 0.1em; vertical-align: middle; } @media only screen and (max-width: 1023px) { .l-footer-share-twitter-text { line-height: 3.3; font-size: 3.333vw; } } @media only screen and (min-width: 1024px) { .l-footer-share-twitter-text { line-height: 3; font-size: 30px; } } .l-footer-share-list { display: flex; justify-content: center; } @media only screen and (max-width: 1023px) { .l-footer-share-item { margin: 0 1.333vw; width: 8.533vw; } } @media only screen and (min-width: 1024px) { .l-footer-share-item { margin: 0 10px; width: 64px; } } .copyright { letter-spacing: 0.1em; text-align: center; } @media only screen and (max-width: 1023px) { .copyright { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .copyright { font-size: 18px; } } .l-main-deco { position: absolute; } @media only screen and (max-width: 1023px) { .l-main-deco.left-bottom { bottom: -13.333vw; left: -16.667vw; width: 58.133vw; } } @media only screen and (min-width: 1024px) { .l-main-deco.left-bottom { bottom: 0; left: -5.031%; margin-bottom: -8.25vw; max-width: 728px; width: 45.786%; } } @media only screen and (max-width: 1023px) { .l-main-deco.right-bottom { bottom: -20.667vw; right: -8.667vw; width: 41.067vw; } } @media only screen and (min-width: 1024px) { .l-main-deco.right-bottom { bottom: 0; margin-bottom: -14vw; max-width: 513px; right: -1.887%; width: 32.258%; } } .l-main-deco.js-inshow { opacity: 0; } .l-main-deco.is-show { animation: fadeUpAnime 0.5s forwards; } .p-kv-area { position: relative; } @media only screen and (max-width: 1023px) { .p-kv-area { padding-top: 4.667vw; } } @media only screen and (min-width: 1024px) { .p-kv-area { padding-top: 40px; } } .p-kv-area::before { background: rgb(255, 231, 17); content: ""; display: block; left: 0; position: absolute; top: 0; width: 100%; } @media only screen and (max-width: 1023px) { .p-kv-area::before { height: 120vw; } } @media only screen and (min-width: 1024px) { .p-kv-area::before { height: 19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .p-kv-area::before { height: 395px; } } .p-kv-area::after { border-color: rgb(255, 231, 17) transparent transparent; border-style: solid; content: ""; display: block; height: 0; margin-top: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .p-kv-area::after { border-right-width: 94.667vw; border-top-width: 23.333vw; top: 120vw; } } @media only screen and (min-width: 1024px) { .p-kv-area::after { border-right-width: 77vw; border-top-width: 20vw; top: 19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .p-kv-area::after { border-top-width: 400px; top: 395px; } } .p-kv-inner { position: relative; z-index: 1; } .breadcrumb-list { color: rgb(128, 128, 128); display: flex; line-height: 1.5; position: relative; z-index: 1; } @media only screen and (max-width: 1023px) { .breadcrumb-list { margin: 0 auto 1.333vw; width: 87.2vw; } } @media only screen and (min-width: 1024px) { .breadcrumb-list { letter-spacing: 0.1em; margin: 0 6.289%; } } @media only screen and (max-width: 1023px) { .breadcrumb-item { font-size: 2.667vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .breadcrumb-item { font-size: 0.9vw; margin-bottom: 0.778em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .breadcrumb-item { font-size: 18px; } } .breadcrumb-item:not(:last-child)::after { color: rgb(40, 60, 120); content: ">"; margin: 0 1em; } .breadcrumb-item .icon-home { display: inline-block; vertical-align: middle; position: relative; } @media only screen and (max-width: 1023px) { .breadcrumb-item .icon-home { top: -0.667vw; width: 3.116vw; } } @media only screen and (min-width: 1024px) { .breadcrumb-item .icon-home { top: -0.167em; width: 1.153em; } } @media only screen and (min-width: 1024px) { .breadcrumb-link:hover { text-decoration: underline; } } .breadcrumb-link .en { font-weight: 400; } .p-title-area { position: relative; z-index: 1; } @media only screen and (max-width: 1023px) { .p-title-area { margin-left: 6.667vw; } } @media only screen and (min-width: 1024px) { .p-title-area { margin: 0 6.289%; } } .p-title-shadow, .p-title { font-family: "Outfit", serif; font-style: italic; letter-spacing: 0.1em; line-height: 1.077; white-space: nowrap; } @media only screen and (max-width: 1023px) { .p-title-shadow, .p-title { font-size: 8.667vw; } } @media only screen and (min-width: 1024px) { .p-title-shadow, .p-title { font-size: 3.4vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .p-title-shadow, .p-title { font-size: 68px; } } .p-title-shadow .en, .p-title .en { font-weight: 700; } .p-title-shadow { background: linear-gradient(to right, rgb(144, 234, 135) 0%, rgb(255, 163, 184) 100%); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; bottom: -0.088em; color: rgb(255, 163, 184); display: inline-block; left: 0.147em; position: absolute; } .p-title { margin-bottom: 0.353em; position: relative; z-index: 1; } .p-sub-area { position: relative; z-index: 1; width: 100%; } .p-sub { font-style: italic; letter-spacing: 0.1em; margin-bottom: 1.8vw; background: linear-gradient(to right, rgb(144, 234, 135) 0%, rgb(255, 163, 184) 100%); clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%); display: inline-block; } @media only screen and (max-width: 1023px) { .p-sub { margin-bottom: 4vw; padding: 1.467vw 3.2vw 1.6vw 6.667vw; } } @media only screen and (min-width: 1024px) { .p-sub { padding: 0.377% 3.774% 0.629% 6.289%; } } .p-sub .en { font-weight: 700; color: #fff; } @media only screen and (max-width: 1023px) { .p-sub .en { font-size: 3.867vw; text-shadow: 0.267vw 0.267vw #283c78; letter-spacing: 0.2vw; } } @media only screen and (min-width: 1024px) { .p-sub .en { text-shadow: 0.15rem 0.15rem #283c78; font-size: 1.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .p-sub .en { font-size: 30px; } } @media only screen and (min-width: 1024px) { .p-sub-live .en { padding: 0.126% 7.547% 0.189% 6.289%; } } .p-sec-title { color: rgb(15, 92, 191); position: relative; text-align: center; z-index: 1; } @media only screen and (max-width: 1023px) { .p-sec-title { font-size: 3.2vw; margin-bottom: 13.333vw; } } @media only screen and (min-width: 1024px) { .p-sec-title { font-size: 0.9vw; margin-bottom: 5em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .p-sec-title { font-size: 18px; } } .p-sec-title .en, .p-sec-title .ja { display: block; letter-spacing: 0.1em; position: relative; z-index: 1; } .p-sec-title .en { font-weight: 700; } @media only screen and (max-width: 1023px) { .p-sec-title .en { font-size: 12vw; margin-bottom: 2.667vw; } } @media only screen and (min-width: 1024px) { .p-sec-title .en { font-size: 416.667%; margin-bottom: 0.2em; } } .p-sec-title .ja { font-weight: 700; } .p-sec-title-bg { left: 50%; position: absolute; transform: translateX(-45%); } @media only screen and (max-width: 1023px) { .p-sec-title-bg { top: -5.333vw; width: 26.493vw; } } @media only screen and (min-width: 1024px) { .p-sec-title-bg { top: -1.944em; width: 9.167em; } } .coming-soon { align-items: center; background: #fff; display: flex; justify-content: center; margin: auto; position: relative; text-align: center; z-index: 10; } @media only screen and (max-width: 1023px) { .coming-soon { border-radius: 6.667vw; font-size: 6.933vw; height: 80vw; width: 85.067vw; background: url("../img/share/coming_bg_sp.jpg") no-repeat 50% 0%; background-size: 85.067vw; } } @media only screen and (min-width: 1024px) { .coming-soon { border-radius: 0.694em; font-size: 3.6vw; height: 8.333em; width: 15.278em; background: url("../img/share/coming_bg.jpg") no-repeat 50% 0%; background-size: 15.278em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .coming-soon { font-size: 72px; } } .coming-soon-text { color: rgb(255, 255, 255); font-weight: 700; letter-spacing: 0.1em; background: rgb(185, 192, 241); background: linear-gradient(90deg, rgb(185, 192, 241) 0%, rgb(169, 244, 203) 100%); transform: rotate(349deg); } @media only screen and (max-width: 1023px) { .coming-soon-text { padding: 1.867vw 6.667vw 2.4vw 6.667vw; border-radius: 13.333vw; } } @media only screen and (min-width: 1024px) { .coming-soon-text { padding: 0.139em 1.014em 0.278em 1.014em; border-radius: 1.389em; } } .js-color-wrapper { position: absolute; } .js-color-wrapper .js-color-tic, .js-color-wrapper .js-color-eve, .js-color-wrapper .js-color-go, .js-color-wrapper .js-color-fo, .js-color-wrapper .js-color-at, .js-color-wrapper .js-color-ho, .js-color-wrapper .js-color-pl, .js-color-wrapper .js-color-hol, .js-color-wrapper .js-color-fac, .js-color-wrapper .js-color-brc { display: inline-block; vertical-align: top; margin: 0; position: relative; width: 100%; } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-tic, .js-color-wrapper .js-color-eve, .js-color-wrapper .js-color-go, .js-color-wrapper .js-color-fo, .js-color-wrapper .js-color-at, .js-color-wrapper .js-color-ho, .js-color-wrapper .js-color-pl, .js-color-wrapper .js-color-hol, .js-color-wrapper .js-color-fac, .js-color-wrapper .js-color-brc { width: 110%; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-tic { left: -26.7vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-tic { left: -7.1vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .js-color-wrapper .js-color-tic { left: -142px; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-eve { left: -22.7vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-eve { left: -5.6vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .js-color-wrapper .js-color-eve { left: -112px; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-go { left: -24.2vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-go { left: -6.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .js-color-wrapper .js-color-go { left: -130px; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-fo { left: -20.2vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-fo { left: -5.2vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .js-color-wrapper .js-color-fo { left: -104px; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-at { width: 200%; left: -84.2vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-at { left: -11.6vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .js-color-wrapper .js-color-at { left: -232px; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-ho { left: -23.2vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-ho { left: -5.65vw; width: 25.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .js-color-wrapper .js-color-ho { left: -113px; width: 510px; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-pl { left: -20.6vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-pl { left: -4.55vw; width: 25.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .js-color-wrapper .js-color-pl { left: -91px; width: 510px; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-hol { left: -26vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-hol { left: -6vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .js-color-wrapper .js-color-hol { left: -120px; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-fac { width: 200%; left: -71vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-fac { left: -8vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .js-color-wrapper .js-color-fac { left: -160px; } } @media only screen and (max-width: 1023px) { .js-color-wrapper .js-color-brc { width: 200%; left: -80vw; font-size: 8vw; } } @media only screen and (min-width: 1024px) { .js-color-wrapper .js-color-brc { left: -15vw; } } .js-color-wrapper .js-color-word-tic, .js-color-wrapper .js-color-word-eve, .js-color-wrapper .js-color-word-go, .js-color-wrapper .js-color-word-fo, .js-color-wrapper .js-color-word-hol, .js-color-wrapper .js-color-word-fac, .js-color-wrapper .js-color-word-brc { position: absolute; opacity: 0; color: #0f5cbf; } .js-color-wrapper .letter { display: inline-block; position: relative; float: left; transform: translateZ(25px); transform-origin: 50% 50% 25px; } .js-color-wrapper .letter.out { transform: rotateX(90deg); transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .js-color-wrapper .letter.behind { transform: rotateX(-90deg); } .js-color-wrapper .letter.in { transform: rotateX(0deg); transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .reveal-text, .reveal-text::after { animation-delay: var(--animation-delay, 1s); animation-iteration-count: var(--iterations, 1); animation-duration: var(--duration, 800ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } .reveal-text { --animation-delay: var(--delay, 1s); --animation-duration: var(--duration, 800ms); --animation-iterations: var(--iterations, 1); position: relative; animation-name: clip-text; white-space: nowrap; cursor: default; } .reveal-text::after { content: ""; position: absolute; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; background-color: #f2f98b; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; animation-name: text-revealer; } @keyframes clip-text { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes text-revealer { 0%, 50% { transform-origin: 0 50%; } 60%, 100% { transform-origin: 100% 50%; } 60% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .front.l-main-content { background: rgb(240, 250, 255); } .f-kv { position: relative; } @media only screen and (max-width: 1023px) { .f-kv { background: url(../img/front/front_bg_sp.png) 0 0/100% 100% no-repeat; height: 212vw; padding: 4.667vw 0 0; } } @media only screen and (min-width: 1024px) { .f-kv { background: url(../img/front/front_bg_pc.png) 50% 100%/100% 100% no-repeat; padding: 4vw 0 11.75vw; } } .f-kv-bg { position: absolute; } .f-kv-bg.bg-left-top { animation: fadeUpAnime 0.5s linear 0.3s forwards; opacity: 0; } @media only screen and (max-width: 1023px) { .f-kv-bg.bg-left-top { left: -9.333vw; top: -0.667vw; width: 30.267vw; } } @media only screen and (min-width: 1024px) { .f-kv-bg.bg-left-top { left: -1.5vw; top: -1vw; width: 18.95vw; } } .f-kv-bg.bg-center-top { animation: rotateAnime 10s linear infinite; } @media only screen and (max-width: 1023px) { .f-kv-bg.bg-center-top { left: 41.333vw; top: 0.667vw; width: 16.667vw; } } @media only screen and (min-width: 1024px) { .f-kv-bg.bg-center-top { left: 50%; margin-left: -1.25vw; top: -0.6vw; width: 10.75vw; } } .f-kv-bg.bg-right-top { animation: rotateAnime 10s linear infinite; } @media only screen and (max-width: 1023px) { .f-kv-bg.bg-right-top { right: -18vw; top: -17.333vw; width: 47.2vw; } } @media only screen and (min-width: 1024px) { .f-kv-bg.bg-right-top { right: -6vw; top: -12.5vw; width: 29.5vw; } } .f-kv-bg.bg-left-bottom { animation: rotateAnime 10s linear infinite; } @media only screen and (max-width: 1023px) { .f-kv-bg.bg-left-bottom { bottom: 53.333vw; left: -6vw; width: 24.667vw; } } @media only screen and (min-width: 1024px) { .f-kv-bg.bg-left-bottom { bottom: 18.5vw; left: 0.9vw; width: 9.25vw; } } .f-kv-bg.bg-right-bottom { animation: fadeUpAnime 0.5s linear 0.2s forwards; opacity: 0; } @media only screen and (max-width: 1023px) { .f-kv-bg.bg-right-bottom { bottom: 41.333vw; right: -8.667vw; width: 33.867vw; } } @media only screen and (min-width: 1024px) { .f-kv-bg.bg-right-bottom { bottom: 18.35vw; right: -2.5vw; width: 21.2vw; } } @media only screen and (max-width: 1023px) { .f-kv-slider { margin: 0 auto 4.667vw; padding-bottom: 6vw; width: 85.2vw; } } @media only screen and (min-width: 1024px) { .f-kv-slider { margin: 0 auto 1.5vw; padding-bottom: calc(15px + 1.25vw); width: 87.421%; } } .f-kv-slider .slick-dots { bottom: 0; display: block; list-style: none; margin: 0; padding: 0; position: absolute; text-align: center; width: 100%; } .f-kv-slider .slick-dots li { display: inline-block; cursor: pointer; height: 12px; margin: 0 10px; padding: 0; position: relative; width: 12px; } .f-kv-slider .slick-dots li button { background: transparent; border: 0; color: transparent; cursor: pointer; display: block; font-size: 0; line-height: 0; height: 12px; outline: none; padding: 0; width: 12px; } .f-kv-slider .slick-dots li button:hover, .f-kv-slider .slick-dots li button:focus { outline: none; } .f-kv-slider .slick-dots li button:hover:before, .f-kv-slider .slick-dots li button:focus:before { background: rgb(17, 140, 217); } .f-kv-slider .slick-dots li button::before { content: ""; background: #fff; border-radius: 50%; height: 12px; left: 0; position: absolute; text-align: center; top: 0; width: 12px; } .f-kv-slider .slick-dots li.slick-active button::before { background: rgb(17, 140, 217); } .f-kv-text { color: rgb(15, 92, 191); letter-spacing: 0.1em; position: relative; text-align: center; z-index: 1; } @media only screen and (max-width: 1023px) { .f-kv-text { line-height: 1.333; } } @media only screen and (min-width: 1024px) { .f-kv-text { margin-bottom: 0.9vw; } } .f-kv-text .en { font-weight: 700; } @media only screen and (max-width: 1023px) { .f-kv-text .en { font-size: 6.267vw; } } @media only screen and (min-width: 1024px) { .f-kv-text .en { font-size: 2.5vw; } } .f-kv-text .ja { font-weight: 700; } @media only screen and (max-width: 1023px) { .f-kv-text .ja { font-size: 5.6vw; } } @media only screen and (min-width: 1024px) { .f-kv-text .ja { font-size: 3vw; } } .f-news-area { position: relative; } @media only screen and (max-width: 1023px) { .f-news-area { padding: 10.667vw 0 12vw; } } @media only screen and (min-width: 1024px) { .f-news-area { padding: 40px 0; } } .f-news-bg { position: absolute; } @media only screen and (max-width: 1023px) { .f-news-bg.bg-left { left: -1.6vw; top: -6.667vw; width: 21.333vw; } } @media only screen and (min-width: 1024px) { .f-news-bg.bg-left { left: -1.258%; top: -5.25vw; max-width: 266px; width: 16.73%; } } @media only screen and (max-width: 1023px) { .f-news-bg.bg-right { right: 2.667vw; top: -7.333vw; width: 24.267vw; } } @media only screen and (min-width: 1024px) { .f-news-bg.bg-right { max-width: 303px; top: -11.25vw; right: -0.943%; width: 19.057%; } } .f-news-content { margin: auto; position: relative; } @media only screen and (max-width: 1023px) { .f-news-content { width: 85.067vw; } } @media only screen and (min-width: 1024px) { .f-news-content { max-width: 1100px; width: 69.182%; } } .f-news-content::after { background: linear-gradient(0deg, rgba(40, 121, 253, 0.6) 0%, rgba(0, 196, 202, 0.6) 100%); content: ""; display: block; height: 100%; position: absolute; width: 100%; } @media only screen and (max-width: 1023px) { .f-news-content::after { bottom: -2px; border-radius: 6.667vw; right: -2px; } } @media only screen and (min-width: 1024px) { .f-news-content::after { bottom: -4px; border-radius: 50px; right: -4px; } } .f-news-content-main { background: #fff; position: relative; z-index: 1; } @media only screen and (max-width: 1023px) { .f-news-content-main { border-radius: 6.667vw; padding: 6vw 6vw 6vw 0; } } @media only screen and (min-width: 1024px) { .f-news-content-main { border-radius: 50px; padding: 50px 4.545%; } } .f-news-title { position: absolute; z-index: 2; opacity: 0; } .f-news-title.is-show { opacity: 1; animation: fadeInLeftAnime 0.5s forwards; } @media only screen and (max-width: 1023px) { .f-news-title { left: 2.667vw; top: -10.4vw; width: 23.2vw; } } @media only screen and (min-width: 1024px) { .f-news-title { left: 2.25vw; top: -3.75vw; width: 8.7vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .f-news-title { left: 45px; top: -75px; width: 174px; } } .f-news-title.js-inshow { opacity: 0; } .f-news-title.is-show { animation: fadeInLeftAnime 0.5s forwards; } .f-news-list { overflow-y: scroll; } @media only screen and (max-width: 1023px) { .f-news-list { height: 20vw; padding-left: 15.333vw; } } @media only screen and (min-width: 1024px) { .f-news-list { height: 150px; padding-left: 10.909%; } } .f-news-list::-webkit-scrollbar { width: 6px; } .f-news-list::-webkit-scrollbar-thumb { background: rgb(15, 92, 191); border-radius: 3px; } .f-news-list::-webkit-scrollbar-track { background: #ccc; border-radius: 3px; } .f-news-item { position: relative; } @media only screen and (max-width: 1023px) { .f-news-item { margin-bottom: 3.333vw; } } @media only screen and (min-width: 1024px) { .f-news-item { margin-bottom: 25px; } } .f-news-item-tag { position: absolute; background: linear-gradient(90deg, rgb(246, 138, 250) 0%, rgb(255, 140, 140) 100%); color: rgb(255, 255, 255); display: inline-block; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 0.25em; z-index: 1; } @media only screen and (max-width: 1023px) { .f-news-item-tag { font-size: 2.667vw; border-radius: 13.333vw; padding: 0.667vw 1.333vw; left: -10.667vw; top: 0.8vw; } } @media only screen and (min-width: 1024px) { .f-news-item-tag { border-radius: 5vw; font-size: 0.95vw; left: -4vw; top: 0.2vw; padding: 0.35vw 0.6vw; } } .f-news-item-date { background: rgb(255, 231, 17); color: rgb(15, 92, 191); display: inline-block; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 0.25em; } @media only screen and (max-width: 1023px) { .f-news-item-date { font-size: 5.333vw; padding: 0.667vw 1.333vw; } } @media only screen and (min-width: 1024px) { .f-news-item-date { font-size: 2vw; padding: 0.25vw 0.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .f-news-item-date { font-size: 40px; padding: 5px 10px; } } .f-news-item-title { color: rgb(15, 92, 191); display: block; font-family: "Outfit", "Noto Sans JP", sans-serif; font-weight: 700; letter-spacing: 0.1em; line-height: 1.4; } @media only screen and (max-width: 1023px) { .f-news-item-title { font-size: 4vw; } } @media only screen and (min-width: 1024px) { .f-news-item-title { font-size: 1.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .f-news-item-title { font-size: 30px; } } .f-news-item-title strong { font-size: 1.2em; } .f-news-item-title a { color: rgb(15, 92, 191); text-decoration: underline !important; } .f-map-area { position: relative; } @media only screen and (max-width: 1023px) { .f-map-area { padding-bottom: 40vw; } } @media only screen and (min-width: 1024px) { .f-map-area { padding-bottom: 12.75vw; } } @media only screen and (max-width: 1023px) { .f-map-header { margin: 0 auto 22.667vw; width: 88vw; } } @media only screen and (min-width: 1024px) { .f-map-header { margin: 0 auto 3.5vw; max-width: 1301px; width: 81.824%; } } .f-map-header .none-sp svg > * { stroke: #95befe; stroke-width: 0.85px; } .f-map-message { align-items: center; background: url(../img/front/map_message.svg) 50%/contain no-repeat; color: rgb(15, 92, 191); display: flex; font-weight: 700; letter-spacing: 0.08em; justify-content: center; position: absolute; } @media only screen and (max-width: 1023px) { .f-map-message { font-size: 3.2vw; height: 44.267vw; line-height: 1.542; left: 2.667vw; top: 24vw; width: 44.267vw; } } @media only screen and (min-width: 1024px) { .f-map-message { font-size: 0.9vw; height: 13.1vw; line-height: 1.778; right: 5.66%; top: 12.75vw; width: 13.1vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .f-map-message { font-size: 18px; height: 262px; width: 262px; } } @media only screen and (max-width: 1023px) { .f-map-scroll { overflow-x: scroll; padding: 6.667vw 0; } .f-map-scroll::-webkit-scrollbar { height: 3px; } .f-map-scroll::-webkit-scrollbar-thumb { background: rgb(179, 179, 179); border-radius: 3px; } .f-map-scroll::-webkit-scrollbar-track { background: transparent; border-radius: 3px; } } .f-map-main { position: relative; } @media only screen and (max-width: 1023px) { .f-map { height: 132.933vw; padding-top: 5.333vw; width: 242.667vw; } } @media only screen and (min-width: 1024px) { .f-map { margin: auto; max-width: 1520px; width: 95.597%; } } .f-map-spot-chara { position: absolute; } @media only screen and (max-width: 1023px) { .f-map-spot-chara { width: 35.2vw; } } @media only screen and (min-width: 1024px) { .f-map-spot-chara { width: 14.605%; } } .f-map-spot-chara:nth-of-type(1) { animation: charaKorokoro 2.5s linear 0s infinite; } @media only screen and (max-width: 1023px) { .f-map-spot-chara:nth-of-type(1) { left: 130.667vw; top: 0; } } @media only screen and (min-width: 1024px) { .f-map-spot-chara:nth-of-type(1) { left: 52.632%; top: -7.803%; } } .f-map-spot-chara:nth-of-type(2) { animation: charaPurun 1.3s linear 0s infinite; } @media only screen and (max-width: 1023px) { .f-map-spot-chara:nth-of-type(2) { left: 77.333vw; top: 94vw; } } @media only screen and (min-width: 1024px) { .f-map-spot-chara:nth-of-type(2) { left: 83.421%; top: 32.413%; } } .f-map-spot-chara:nth-of-type(3) { animation: charaPoyooon 1s linear 0s infinite; } @media only screen and (max-width: 1023px) { .f-map-spot-chara:nth-of-type(3) { left: 140vw; top: 75.333vw; } } @media only screen and (min-width: 1024px) { .f-map-spot-chara:nth-of-type(3) { left: 55.921%; top: 48.019%; } } .f-map-spot-chara:nth-of-type(4) { animation: charaPurun 1.3s linear 0.6s infinite; } @media only screen and (max-width: 1023px) { .f-map-spot-chara:nth-of-type(4) { left: 76.8vw; top: 6vw; } } @media only screen and (min-width: 1024px) { .f-map-spot-chara:nth-of-type(4) { left: 32.632%; top: 68.667%; } } .f-map-spot-chara:nth-of-type(5) { animation: charaPoyooon 1s linear 0.5s infinite; } @media only screen and (max-width: 1023px) { .f-map-spot-chara:nth-of-type(5) { left: 8.667vw; top: 35.333vw; } } @media only screen and (min-width: 1024px) { .f-map-spot-chara:nth-of-type(5) { left: 28.947%; top: 6.242%; } } .f-map-spot-chara:nth-of-type(6) { animation: charaKorokoro 2.5s linear 1s infinite; } @media only screen and (max-width: 1023px) { .f-map-spot-chara:nth-of-type(6) { left: 208vw; top: 48.667vw; } } @media only screen and (min-width: 1024px) { .f-map-spot-chara:nth-of-type(6) { left: 3.947%; top: 23.77%; } } .f-map-link-item { display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .f-map-link-item { background: url(../img/front/icon_mouse.svg) 50%/contain no-repeat; height: 12.667vw; width: 12.933vw; } } @media only screen and (min-width: 1024px) { .f-map-link-item { cursor: url(../img/front/icon_mouse_pc.png), default; } } @media only screen and (max-width: 1023px) { .f-map-link-item.f-map-live { left: 193.333vw; top: 70.667vw; } } @media only screen and (min-width: 1024px) { .f-map-link-item.f-map-live { height: 22.089%; left: 72.105%; top: 42.497%; width: 18.947%; } } @media only screen and (max-width: 1023px) { .f-map-link-item.f-map-giants { left: 50vw; top: 45.333vw; } } @media only screen and (min-width: 1024px) { .f-map-link-item.f-map-giants { height: 30.252%; left: 9.605%; top: 25.21%; width: 25.921%; } } @media only screen and (max-width: 1023px) { .f-map-link-item.f-map-city { left: 119.6vw; top: 36.667vw; } } @media only screen and (min-width: 1024px) { .f-map-link-item.f-map-city { height: 35.414%; left: 38.421%; top: 3.842%; width: 16.447%; } } @media only screen and (max-width: 1023px) { .f-map-link-item.f-map-fair { left: 164.667vw; top: 34.133vw; } } @media only screen and (min-width: 1024px) { .f-map-link-item.f-map-fair { height: 26.17%; left: 58.421%; top: 10.804%; width: 17.632%; } } @media only screen and (max-width: 1023px) { .f-map-link-item.f-map-tour { left: 128vw; top: 70.133vw; } } @media only screen and (min-width: 1024px) { .f-map-link-item.f-map-tour { height: 31.212%; left: 44.474%; top: 40.816%; width: 21.579%; } } @media only screen and (max-width: 1023px) { .f-map-guide { bottom: 42vw; left: 3.333vw; position: absolute; width: 16vw; z-index: 5; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; gap: 0 2.667vw; } .f-map-guide #f-map-prev { background: url(../img/front/map_guide.png) no-repeat 0 0/auto 100%; width: 6.667vw; height: 6vw; } .f-map-guide #f-map-prev.is-active { opacity: 0.5; } .f-map-guide #f-map-next { background: url(../img/front/map_guide.png) no-repeat right 0/auto 100%; width: 6.667vw; height: 6vw; } .f-map-guide #f-map-next.is-active { opacity: 0.5; } } .modal { display: none; height: 100vh; height: 100 svh; left: 0; position: fixed; top: 0; width: 100%; z-index: 150; } .modal-bg { background: rgba(171, 226, 248, 0.8); cursor: pointer; display: block; height: 100%; left: 0; position: fixed; top: 0; width: 100%; } .modal-content { background: #fff; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); } @media only screen and (max-width: 1023px) { .modal-content { border-radius: 5.333vw; box-shadow: 1.333vw 1.333vw 0.8vw rgba(0, 0, 0, 0.06); height: 125.333vw; padding: 17.333vw 0 17.333vw; width: 89.067vw; } } @media only screen and (min-width: 1024px) { .modal-content { border-radius: 50px; box-shadow: 10px 10px 6px rgba(0, 0, 0, 0.06); height: 90%; max-height: 780px; padding: 95px 0 40px; width: 600px; } } @media only screen and (max-width: 1023px) { .modal-content-inner { height: 125.333vw; width: 89.067vw; } } @media only screen and (min-width: 1024px) { .modal-content-inner { overflow: auto; height: 100%; padding: 2% 0 5%; /* Set the height of the scrollbar thumb */ } .modal-content-inner::-webkit-scrollbar { width: 8px; background-color: #f2f2f2; } .modal-content-inner::-webkit-scrollbar-thumb { height: 30px; background-color: #ccc; } } .modal-header { align-items: center; display: flex; position: absolute; } @media only screen and (max-width: 1023px) { .modal-header { left: 5.867vw; top: 4.8vw; width: 80vw; } } @media only screen and (min-width: 1024px) { .modal-header { left: 50px; top: 40px; width: 500px; } } .modal-btn, .modal-btn-close { appearance: none; background: transparent; border: 0; cursor: pointer; padding: 0; position: relative; } .modal-btn::after, .modal-btn-close::after { background: 50% 50%/contain no-repeat; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } @media only screen and (max-width: 1023px) { .modal-btn { height: 8vw; margin-right: 5.333vw; width: 8.667vw; } } @media only screen and (min-width: 1024px) { .modal-btn { height: 28px; margin-right: 20px; width: 30px; } } .modal-btn::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2018.714%22%3E%20%3Cpath%20d%3D%22M18.882%207.572%202.726.173C1.456-.406%200%20.538%200%201.933v14.764c0%201.395%201.598%202.432%202.867%201.853l15.932-7.614c.402-.2.7-.47.9-.771.594-.898.301-2.083-.817-2.594Z%22%20style%3D%22fill%3A%2357c6f2%22%2F%3E%3C%2Fsvg%3E"); } .modal-btn.btn-prev::after { transform: rotate(180deg); } .modal-btn-close { margin-left: auto; } @media only screen and (max-width: 1023px) { .modal-btn-close { height: 8.667vw; width: 8.667vw; } } @media only screen and (min-width: 1024px) { .modal-btn-close { height: 32px; width: 32px; } } .modal-btn-close::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2031.692%2031.692%22%3E%20%3Cpath%20d%3D%22m4%204%2023.692%2023.692M27.692%204%204%2027.692%22%20style%3D%22fill%3Anone%3Bstroke%3A%23b3b3b3%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A8px%22%2F%3E%3C%2Fsvg%3E"); } .modal-body { margin: auto; position: relative; } @media only screen and (max-width: 1023px) { .modal-body { overflow-y: scroll; width: 80vw; } } @media only screen and (min-width: 1024px) { .modal-body { width: 500px; } } @media only screen and (max-width: 1023px) { .modal-image { margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .modal-image { margin-bottom: 20px; } } .modal-title { color: rgb(87, 198, 242); font-family: "Outfit", "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.438; } @media only screen and (max-width: 1023px) { .modal-title { font-size: 5.333vw; } } @media only screen and (min-width: 1024px) { .modal-title { font-size: 32px; } } .modal-text { color: rgb(51, 51, 51); line-height: 1.9; } @media only screen and (max-width: 1023px) { .modal-text { font-size: 3.067vw; } } @media only screen and (min-width: 1024px) { .modal-text { font-size: 19px; margin-top: 1%; } } .modal-more { border-bottom: 1px solid rgb(15, 92, 191); color: rgb(15, 92, 191); letter-spacing: 0.08em; position: absolute; } @media only screen and (max-width: 1023px) { .modal-more { bottom: 4.267vw; font-size: 4vw; padding: 0 6.667vw 2.4vw 0; right: 6.933vw; } } @media only screen and (min-width: 1024px) { .modal-more { font-size: 22px; padding: 0 32px 10px 0; right: 0px; margin: 30px 0 0; } } .modal-more::after { background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2018.714%22%3E%20%3Cpath%20d%3D%22M18.882%207.572%202.726.173C1.456-.406%200%20.538%200%201.933v14.764c0%201.395%201.598%202.432%202.867%201.853l15.932-7.614c.402-.2.7-.47.9-.771.594-.898.301-2.083-.817-2.594Z%22%20style%3D%22fill%3A%230f5cbf%22%2F%3E%3C%2Fsvg%3E") 50% 50%/contain no-repeat; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .modal-more::after { height: 3.067vw; right: 0; top: 0.8vw; width: 3.2vw; } } @media only screen and (min-width: 1024px) { .modal-more::after { height: 15px; right: 0; top: 6px; width: 16px; } } .p-live { background: rgb(240, 250, 255); } .live-kv-bg { position: absolute; } .live-kv-bg.js-inshow { opacity: 0; } .live-kv-bg.js-inshow.is-show { animation: fadeUpAnime 0.5s forwards; } @media only screen and (max-width: 1023px) { .live-kv-bg.bg-right-top { right: -10vw; top: 23.333vw; width: 55.733vw; } } @media only screen and (min-width: 1024px) { .live-kv-bg.bg-right-top { right: 1.9vw; top: 1.25vw; width: 34.85vw; } } @media only screen and (max-width: 1023px) { .live-kv-bg.bg-left-bottom { bottom: 44.667vw; left: -9.6vw; width: 50.533vw; } } @media only screen and (min-width: 1024px) { .live-kv-bg.bg-left-bottom { bottom: 6vw; left: -1.5vw; width: 18.95vw; } } .live-kv-bg.bg-right-bottom { animation: rotateAnime 10s linear infinite; } @media only screen and (max-width: 1023px) { .live-kv-bg.bg-right-bottom { bottom: 81.333vw; right: -3.467vw; width: 17.6vw; } } @media only screen and (min-width: 1024px) { .live-kv-bg.bg-right-bottom { bottom: 18.75vw; right: 0; width: 10.75vw; } } .live-kv { margin: auto; position: relative; z-index: 5; } @media only screen and (max-width: 1023px) { .live-kv { width: 85.067vw; } } @media only screen and (min-width: 1024px) { .live-kv { max-width: 1390px; width: 87.421%; } } .live-outline { position: relative; text-align: center; } @media only screen and (max-width: 1023px) { .live-outline { padding: 4vw 0 33.333vw; } } @media only screen and (min-width: 1024px) { .live-outline { padding: 1.5vw 0 16.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .live-outline { padding: 30px 0 330px; } } .live-outline-bg { position: absolute; } .live-outline-bg.bg-left { animation: rotateAnime 10s linear infinite; } @media only screen and (max-width: 1023px) { .live-outline-bg.bg-left { left: -1.6vw; top: -16.667vw; width: 19.733vw; } } @media only screen and (min-width: 1024px) { .live-outline-bg.bg-left { left: 1.258%; top: -0.4vw; max-width: 185px; width: 11.635%; } } @media only screen and (max-width: 1023px) { .live-outline-bg.bg-right { right: -30vw; top: -29.333vw; width: 44.4vw; } } @media only screen and (min-width: 1024px) { .live-outline-bg.bg-right { max-width: 455px; top: -2.75vw; right: -8.176%; width: 28.616%; } } @media only screen and (max-width: 1023px) { .live-outline-title-area { margin-bottom: 4vw; } } @media only screen and (min-width: 1024px) { .live-outline-title-area { font-size: 1.8vw; margin: 0 auto 1.528em; width: 33.333em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .live-outline-title-area { font-size: 36px; } } .live-outline-title { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.14em; } @media only screen and (max-width: 1023px) { .live-outline-title { font-size: 5.733vw; line-height: 1.581; } .live-outline-title .marker-sp { display: inline-block; position: relative; } .live-outline-title .marker-sp::before { background: linear-gradient(to right, rgba(111, 234, 160, 0.2) 0%, rgba(66, 81, 248, 0.2) 100%); bottom: 5%; content: ""; height: 35%; left: 0; position: absolute; width: 100%; } .live-outline-title .marker-sp::after { background: rgb(240, 250, 255); bottom: 0; content: ""; height: 90%; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 0; width: 100%; z-index: 10; } } @media only screen and (min-width: 1024px) { .live-outline-title { line-height: 1.3; margin-bottom: 0.333em; } .live-outline-title .marker-pc { display: inline-block; position: relative; } .live-outline-title .marker-pc::before { background: linear-gradient(to right, rgba(111, 234, 160, 0.2) 0%, rgba(66, 81, 248, 0.2) 100%); bottom: 5%; content: ""; height: 35%; left: 0; position: absolute; width: 100%; } .live-outline-title .marker-pc::after { background: rgb(240, 250, 255); bottom: 0; content: ""; height: 90%; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 0; width: 100%; z-index: 10; } } .live-outline-title .marker-text { position: relative; z-index: 1; } .live-outline-title .deco-01::before { background: url(../img/live/live_kirakira_01.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .live-outline-title .deco-01::before { height: 7.307vw; left: -10.133vw; top: -1.6vw; width: 7.84vw; } } @media only screen and (min-width: 1024px) { .live-outline-title .deco-01::before { height: 1.522em; left: -2.056em; top: 0; width: 1.633em; } } .live-outline-title .deco-02::before { background: url(../img/live/live_kirakira_02.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .live-outline-title .deco-02::before { height: 7.04vw; right: -24.8vw; top: -2vw; width: 7.973vw; } } @media only screen and (min-width: 1024px) { .live-outline-title .deco-02::before { height: 1.467em; right: -2.278em; top: 0; width: 1.661em; } } .live-outline-list { color: rgb(15, 92, 191); display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-align: left; } @media only screen and (max-width: 1023px) { .live-outline-list { font-size: 4.267vw; line-height: 1.563; } } @media only screen and (min-width: 1024px) { .live-outline-list { font-size: 1.4vw; line-height: 1.643; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .live-outline-list { font-size: 28px; } } .live-outline-list-item { display: flex; } .live-outline-list-item dt::after { content: "／"; margin: 0 0.5em; } .live-outline-banner { margin: auto; position: relative; z-index: 5; } @media only screen and (max-width: 1023px) { .live-outline-banner { width: 85.067vw; top: 6.667vw; } } @media only screen and (min-width: 1024px) { .live-outline-banner { max-width: 900px; top: 58px; width: 56.604%; } } .live-outline-banner a { color: #0f5cbf; } .live-outline-banner a:hover { opacity: 0.8; } .live-outline-banner p { font-weight: 700; margin-top: 1em; } @media only screen and (max-width: 1023px) { .live-outline-banner p { font-size: 4.267vw; } } @media only screen and (min-width: 1024px) { .live-outline-banner p { font-size: 1.4vw; } } .live-tickets { background: rgb(255, 250, 207); position: relative; } @media only screen and (max-width: 1023px) { .live-tickets { padding: 6vw 0 8vw; } } @media only screen and (min-width: 1024px) { .live-tickets { padding: 0; } } .live-tickets::before { border-color: transparent transparent rgb(255, 250, 207); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .live-tickets::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .live-tickets::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .live-tickets::before { border-bottom-width: 395px; top: -395px; } } .live-tickets::after { border-color: rgb(255, 250, 207) transparent transparent; border-style: solid; content: ""; display: block; height: 0; margin-top: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .live-tickets::after { border-right-width: 94.667vw; border-top-width: 23.467vw; bottom: -23.467vw; } } @media only screen and (min-width: 1024px) { .live-tickets::after { border-right-width: 78vw; border-top-width: 19.75vw; bottom: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .live-tickets::after { border-top-width: 395px; bottom: -395px; } } .live-tickets .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#liveTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #liveTickets-gradient-stop01 { animation: liveTicketsStop1 1s ease-in-out infinite alternate; } #liveTickets-gradient-stop02 { animation: liveTicketsStop2 1s ease-in-out infinite alternate; } @keyframes liveTicketsStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes liveTicketsStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .live-tickets-bg { position: absolute; } @media only screen and (max-width: 1023px) { .live-tickets-bg.bg-left-top { left: -12.667vw; top: 14.667vw; width: 30.933vw; } } @media only screen and (min-width: 1024px) { .live-tickets-bg.bg-left-top { left: -1.75vw; top: 0.5vw; width: 14.5vw; } } @media only screen and (max-width: 1023px) { .live-tickets-bg.bg-right-top { right: -9.333vw; top: -16.533vw; width: 34.667vw; } } @media only screen and (min-width: 1024px) { .live-tickets-bg.bg-right-top { right: 6.25vw; top: -10.75vw; width: 18vw; } } @media only screen and (max-width: 1023px) { .live-tickets-bg.bg-squera { left: 6vw; top: 59.333vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .live-tickets-bg.bg-squera { left: 7vw; top: 21.25vw; width: 2.95vw; } } @media only screen and (max-width: 1023px) { .live-tickets-bg.bg-right-bottom { bottom: 61.333vw; right: -19.733vw; width: 45.2vw; } } @media only screen and (min-width: 1024px) { .live-tickets-bg.bg-right-bottom { bottom: 19.9vw; right: -3.25vw; width: 21.2vw; } } .tickets-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .tickets-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .tickets-text { font-size: 1.5vw; line-height: 1.533; margin-bottom: 2em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tickets-text { font-size: 30px; } } .live-tickets-inner { margin: 0 auto; position: relative; z-index: 5; color: rgb(15, 92, 191); font-weight: 700; } @media only screen and (max-width: 1023px) { .live-tickets-inner { background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 0.8) 3%, rgba(255, 255, 255, 0.8) 98%, rgba(255, 255, 255, 0) 98%, rgba(255, 255, 255, 0) 100%); width: 85.067vw; height: 150.4vw; padding: 8vw 0 8vw 8vw; } } @media only screen and (min-width: 1024px) { .live-tickets-inner { background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 3%, rgb(255, 255, 255) 3%, rgb(255, 255, 255) 95%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%); width: 55vw; height: 49.15vw; padding: 4.25vw 0 0 3.25vw; } } .live-tickets-frm { position: absolute; top: 0; left: 0; width: 100%; } @media only screen and (max-width: 1023px) { .live-tickets-frm { width: 80.8vw; height: 115.733vw; } } @media only screen and (min-width: 1024px) { .live-tickets-frm { width: 53.4vw; height: 22vw; } } .live-tickets-frm-bg { position: absolute; top: 0; fill: none; opacity: 0.6; stroke-linecap: round; } @media only screen and (max-width: 1023px) { .live-tickets-frm-bg { stroke: url(#cityOv-gradient-sp); width: 80.8vw; height: 150.4vw; left: 2.267vw; stroke-width: 1.333vw; } } @media only screen and (min-width: 1024px) { .live-tickets-frm-bg { stroke: url(#cityOv-gradient); stroke-width: 8px; stroke-miterlimit: 10; left: 0.85vw; } } .live-tickets-sub { margin: 0 auto; color: #697ae0; letter-spacing: 0.1em; text-align: center; } @media only screen and (max-width: 1023px) { .live-tickets-sub { background: url(../img/live/tickets_sub_bg_sp.png) no-repeat center 0/100%; font-size: 4.533vw; width: 71.467vw; height: 8vw; padding-top: 1.333vw; margin-bottom: 5.333vw; transform: translateX(-1em); } } @media only screen and (min-width: 1024px) { .live-tickets-sub { background: url(../img/live/tickets_sub_bg.png) no-repeat center 0/100%; font-size: 1.7vw; width: 26.8vw; height: 3vw; padding: 0.5vw; margin-bottom: 2vw; } } .live-tickets-detail { letter-spacing: 0.1em; position: relative; z-index: 50; } .live-tickets-detail a { text-decoration: underline; color: #0f5cbf; white-space: nowrap; font-family: "Noto Sans JP", sans-serif; } .live-tickets-detail a:hover { text-decoration: none; opacity: 0.8; } @media only screen and (max-width: 1023px) { .live-tickets-detail a { font-size: 3.467vw; letter-spacing: 0.28vw; } } @media only screen and (max-width: 1023px) { .live-tickets-detail { font-size: 3.467vw; line-height: 6.133vw; word-break: break-all; margin-bottom: 6.133vw; } } @media only screen and (min-width: 1024px) { .live-tickets-detail { font-size: 1.3vw; line-height: 2.3vw; margin-bottom: 2vw; } } .live-goods { position: relative; } @media only screen and (max-width: 1023px) { .live-goods { padding: 28vw 0 2.667vw; } } @media only screen and (min-width: 1024px) { .live-goods { padding: 15vw 0 13.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .live-goods { padding: 300px 0 270px; } } .live-goods .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#liveTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } .live-goods-bg { position: absolute; } @media only screen and (max-width: 1023px) { .live-goods-bg.bg-left-top { left: -18.667vw; top: 34vw; width: 37.067vw; } } @media only screen and (min-width: 1024px) { .live-goods-bg.bg-left-top { left: -3.1vw; top: 19.5vw; width: 17.35vw; } } @media only screen and (max-width: 1023px) { .live-goods-bg.bg-right-top { right: -9.333vw; top: 17.333vw; width: 33.733vw; } } @media only screen and (min-width: 1024px) { .live-goods-bg.bg-right-top { right: -0.6vw; top: 4.75vw; width: 15.8vw; } } @media only screen and (max-width: 1023px) { .live-goods-bg.bg-left-bottom { bottom: 46.267vw; left: 10.4vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .live-goods-bg.bg-left-bottom { bottom: 10vw; left: 16.5vw; width: 2.95vw; } } @media only screen and (max-width: 1023px) { .live-goods-bg.bg-right-bottom { bottom: 48.933vw; right: -0.667vw; width: 30.533vw; } } @media only screen and (min-width: 1024px) { .live-goods-bg.bg-right-bottom { bottom: 10.5vw; right: 7.5vw; width: 14.3vw; } } .goods-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .goods-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 10.667vw; } } @media only screen and (min-width: 1024px) { .goods-text { font-size: 1.4vw; line-height: 1.643; margin-bottom: 2.857em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .goods-text { font-size: 28px; } } @media only screen and (max-width: 1023px) { .live-goods .l-main-deco.left-bottom { bottom: -5.333vw; } } @media only screen and (min-width: 1024px) { .live-goods .l-main-deco.left-bottom { left: -4.717%; margin-bottom: -1.5vw; } } @media only screen and (max-width: 1023px) { .live-goods .l-main-deco.right-bottom { bottom: -12.667vw; } } @media only screen and (min-width: 1024px) { .live-goods .l-main-deco.right-bottom { margin-bottom: -5vw; } } .live-goods-inner { margin: 0 auto; position: relative; z-index: 10; } @media only screen and (max-width: 1023px) { .live-goods-inner { background: url(../img/live/live-goods-bg-sp.png) no-repeat center 0/100%; width: 85.067vw; height: 253.333vw; padding: 9.867vw 0 0; } } @media only screen and (min-width: 1024px) { .live-goods-inner { background: url(../img/live/live-goods-bg.png) no-repeat center 0/100%; width: 55vw; height: 152vw; padding: 4vw 0 0; } } .live-goods-inner .live-goods-sub { text-align: center; font-weight: 700; color: #0f5cbf; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .live-goods-inner .live-goods-sub { font-size: 3.733vw; margin-bottom: 4.267vw; } } @media only screen and (min-width: 1024px) { .live-goods-inner .live-goods-sub { font-size: 1.4vw; margin-bottom: 2.25vw; } } .live-goods-inner ul { margin: 0 auto; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } @media only screen and (max-width: 1023px) { .live-goods-inner ul { width: 71.733vw; gap: 2.933vw; margin-bottom: 7.6vw; } } @media only screen and (min-width: 1024px) { .live-goods-inner ul { width: 45vw; gap: 1.85vw 0; margin-bottom: 3vw; } } .p-giants { background: rgb(240, 250, 255); } @media only screen and (max-width: 1023px) { .p-giants .breadcrumb-list { width: 78.667vw; margin-left: 4vw; } } .p-giants .breadcrumb-list li { white-space: nowrap; } .p-giants .breadcrumb-list li:last-child { overflow: hidden; text-overflow: ellipsis; } .giants-kv-bg { position: absolute; } .giants-kv-bg.js-inshow { opacity: 0; } .giants-kv-bg.js-inshow.is-show { animation: fadeUpAnime 0.5s forwards; } @media only screen and (max-width: 1023px) { .giants-kv-bg.bg-right-top { right: -10vw; top: 18vw; width: 55.733vw; } } @media only screen and (min-width: 1024px) { .giants-kv-bg.bg-right-top { right: 1.9vw; top: -0.25vw; width: 34.8vw; } } @media only screen and (max-width: 1023px) { .giants-kv-bg.bg-left-bottom { bottom: 44.667vw; left: -9.6vw; width: 50.533vw; } } @media only screen and (min-width: 1024px) { .giants-kv-bg.bg-left-bottom { bottom: 1vw; left: -1.5vw; width: 18.95vw; } } .giants-kv-bg.bg-right-bottom { animation: rotateAnime 10s linear infinite; } @media only screen and (max-width: 1023px) { .giants-kv-bg.bg-right-bottom { bottom: 81.333vw; right: -3.467vw; width: 17.6vw; } } @media only screen and (min-width: 1024px) { .giants-kv-bg.bg-right-bottom { bottom: 18.75vw; right: 0; width: 10.75vw; } } .giants-kv { margin: auto; position: relative; z-index: 5; } @media only screen and (max-width: 1023px) { .giants-kv { width: 85.067vw; } } @media only screen and (min-width: 1024px) { .giants-kv { max-width: 1390px; width: 87.421%; } } .p-title-area-giants { white-space: nowrap; } .p-title-area-giants * { font-size: 68px; } @media only screen and (max-width: 1023px) { .p-title-area-giants * { font-size: 9.067vw; } } @media only screen and (min-width: 1024px) { .p-title-area-giants * { font-size: 3.4vw; } } .giants-information { background: linear-gradient(to right, rgb(98, 225, 152) 0%, rgb(58, 72, 247) 100%); position: relative; } @media only screen and (max-width: 1023px) { .giants-information { width: 90%; margin: 5.333vw auto 0; border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .giants-information { max-width: 62.893%; width: 90%; margin: 3.145% auto 0; border-radius: 2.35vw; padding: 0.15vw; } } .giants-information-inr { background: #fff; color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .giants-information-inr { font-size: 4vw; line-height: 1.563; border-radius: 6.133vw; padding: 1em; text-align: left; } .giants-information-inr p { padding-top: 1em; } } @media only screen and (min-width: 1024px) { .giants-information-inr { font-size: 1vw; line-height: 1.643; border-radius: 2.3vw; padding: 2vw 0; text-align: center; } .giants-information-inr p { padding-top: 1em; } } .giants-information-inr a { text-decoration: underline; } .giants-information-ttl { font-size: 1.2em; font-weight: 700; margin: 0 !important; padding: 0 !important; } @media only screen and (max-width: 1023px) { .giants-information-ttl { line-height: 1.5; } } @media only screen and (min-width: 1024px) { .giants-information-ttl { line-height: 4; } } .giants-outline { position: relative; text-align: center; } @media only screen and (max-width: 1023px) { .giants-outline { margin-top: 16vw; padding: 4vw 0 4vw; } } @media only screen and (min-width: 1024px) { .giants-outline { padding: 3vw 0 3vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-outline { padding: 60px 0 60px; } } .giants-outline-bg { position: absolute; } .giants-outline-bg.bg-left { animation: rotateAnime 10s linear infinite; } @media only screen and (max-width: 1023px) { .giants-outline-bg.bg-left { left: -1.6vw; top: -11.333vw; width: 19.733vw; } } @media only screen and (min-width: 1024px) { .giants-outline-bg.bg-left { left: 1.258%; top: -3.4vw; max-width: 185px; width: 11.635%; } } @media only screen and (max-width: 1023px) { .giants-outline-bg.bg-right { right: -30vw; top: -29.333vw; width: 44.4vw; } } @media only screen and (min-width: 1024px) { .giants-outline-bg.bg-right { max-width: 455px; top: -4.75vw; right: -1.887%; width: 22.39%; } } @media only screen and (max-width: 1023px) { .giants-outline-title-area { margin-bottom: 8vw; } } @media only screen and (min-width: 1024px) { .giants-outline-title-area { font-size: 1.8vw; margin: 0 auto 1.528em; width: fit-content; width: -moz-fit-content; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-outline-title-area { font-size: 36px; } } .giants-outline-title { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.14em; } @media only screen and (max-width: 1023px) { .giants-outline-title { font-size: 5.733vw; line-height: 1.581; } .giants-outline-title .marker-sp { display: inline-block; position: relative; } .giants-outline-title .marker-sp::before { background: linear-gradient(to right, rgba(111, 234, 160, 0.2) 0%, rgba(66, 81, 248, 0.2) 100%); bottom: 5%; content: ""; height: 35%; left: 0; position: absolute; width: 100%; } .giants-outline-title .marker-sp::after { background: rgb(240, 250, 255); bottom: 0; content: ""; height: 90%; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 0; width: 100%; z-index: 10; } .giants-outline-title .deco-01::before { background: url(../img/live/live_kirakira_01.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } } @media only screen and (max-width: 1023px) and (max-width: 1023px) { .giants-outline-title .deco-01::before { height: 7.307vw; left: -18.333vw; top: -6.667vw; width: 7.84vw; } } @media only screen and (max-width: 1023px) and (min-width: 1024px) { .giants-outline-title .deco-01::before { height: 1.522em; left: 2em; top: 3em; width: 1.633em; } } @media only screen and (max-width: 1023px) { .giants-outline-title .deco-02::before { background: url(../img/live/live_kirakira_02.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } } @media only screen and (max-width: 1023px) and (max-width: 1023px) { .giants-outline-title .deco-02::before { height: 7.04vw; right: -9.333vw; top: -13vw; width: 7.973vw; } } @media only screen and (max-width: 1023px) and (min-width: 1024px) { .giants-outline-title .deco-02::before { height: 1.467em; right: -2.083em; top: 0; width: 1.661em; } } @media only screen and (min-width: 1024px) { .giants-outline-title { line-height: 1.3; margin-bottom: 0.333em; } .giants-outline-title:nth-of-type(1) { text-align: left; } .giants-outline-title:nth-of-type(2) { text-align: right; } .giants-outline-title .marker-pc { display: inline-block; position: relative; } .giants-outline-title .marker-pc::before { background: linear-gradient(to right, rgba(111, 234, 160, 0.2) 0%, rgba(66, 81, 248, 0.2) 100%); bottom: 5%; content: ""; height: 35%; left: 0; position: absolute; width: 100%; } .giants-outline-title .marker-pc::after { background: rgb(240, 250, 255); bottom: 0; content: ""; height: 90%; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 0; width: 100%; z-index: 10; } } .giants-outline-title .marker-text { position: relative; z-index: 1; } .giants-outline-title .deco-01::before { background: url(../img/giants/giants_kirakira_01.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .giants-outline-title .deco-01::before { height: 7.307vw; left: -10.133vw; top: -1.6vw; width: 7.84vw; } } @media only screen and (min-width: 1024px) { .giants-outline-title .deco-01::before { height: 1.522em; left: -2.056em; top: 0; width: 1.633em; } } .giants-outline-title .deco-02-pc::after { background: url(../img/giants/giants_kirakira_02.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 2; } @media only screen and (max-width: 1023px) { .giants-outline-title .deco-02-pc::after { height: 7.04vw; right: -24.8vw; top: -2vw; width: 7.973vw; } } @media only screen and (min-width: 1024px) { .giants-outline-title .deco-02-pc::after { height: 1.467em; right: -2.278em; top: 0; width: 1.661em; } } .giants-outline-title .deco-02::before { background: url(../img/giants/giants_kirakira_02.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .giants-outline-title .deco-02::before { height: 7.04vw; right: -24.8vw; top: -2vw; width: 7.973vw; } } @media only screen and (min-width: 1024px) { .giants-outline-title .deco-02::before { height: 1.467em; right: -2.278em; top: 0; width: 1.661em; } } .giants-outline-list { color: rgb(15, 92, 191); display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-align: left; } @media only screen and (max-width: 1023px) { .giants-outline-list { font-size: 4.267vw; line-height: 1.563; } } @media only screen and (min-width: 1024px) { .giants-outline-list { font-size: 1.4vw; line-height: 1.643; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-outline-list { font-size: 28px; } } .giants-outline-list-item { display: flex; } .giants-outline-list-item dt::after { content: "／"; margin: 0 0.5em; } @media only screen and (max-width: 1023px) { .giants-outline-list-item { display: block; } .giants-outline-list-item:nth-of-type(2) { display: -webkit-flex; display: flex; } } .giants-outline-list-item dd span { display: block; font-weight: 400; font-size: 70%; margin-top: -0.2em; } .giants-overview { position: relative; } @media only screen and (max-width: 1023px) { .giants-overview { padding: 18vw 0 37.6vw; } } @media only screen and (min-width: 1024px) { .giants-overview { padding: 0 0 16.25vw; } } .giants-overview .giants-overview-inner { margin: 0 auto; position: relative; z-index: 5; color: rgb(15, 92, 191); font-weight: 700; } .giants-overview .giants-overview-inner .giants-ov-txt { letter-spacing: 0.1em; } .giants-overview .giants-overview-inner .giants-ov-note { margin: 0 auto; color: #697AE0; text-align: center; } @media only screen and (max-width: 1023px) { .giants-overview .giants-overview-inner { background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 0.8) 3%, rgba(255, 255, 255, 0.8) 98%, rgba(255, 255, 255, 0) 98%, rgba(255, 255, 255, 0) 100%); width: 85.067vw; height: 115.733vw; padding: 11.333vw 9.333vw 0; } .giants-overview .giants-overview-inner .giants-ov-txt { font-size: 4vw; line-height: 7.333vw; margin-bottom: 2vw; } .giants-overview .giants-overview-inner .giants-ov-note { background: url(../img/giants/ov_detail_sp.png) no-repeat center 0/100%; width: 66.667vw; height: 11.6vw; font-size: 5.6vw; line-height: 5.733vw; padding-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-overview .giants-overview-inner { background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.8) 5%, rgba(255, 255, 255, 0.8) 92%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0) 100%); text-align: center; width: 55vw; height: 17.2vw; padding: 2.7vw 0 0; } .giants-overview .giants-overview-inner .giants-ov-txt { font-size: 1.1vw; line-height: 2.091; margin-bottom: 0.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-overview .giants-overview-inner .giants-ov-txt { font-size: 22px; line-height: 2.2vw; } } .giants-overview .giants-overview-frm { position: absolute; top: 0; left: 0; width: 100%; } @media only screen and (max-width: 1023px) { .giants-overview .giants-overview-frm { width: 80.8vw; height: 115.733vw; } } @media only screen and (min-width: 1024px) { .giants-overview .giants-overview-frm { width: 53.4vw; height: 20.4vw; } } .giants-overview .giants-overview-frm-bg { position: absolute; top: 0; fill: none; opacity: 0.6; stroke-linecap: round; stroke-linejoin: round; } @media only screen and (max-width: 1023px) { .giants-overview .giants-overview-frm-bg { stroke: url(#giantsOv-gradient-sp); width: 80.8vw; height: 115.733vw; left: 2.267vw; stroke-width: 1.067vw; } } @media only screen and (min-width: 1024px) { .giants-overview .giants-overview-frm-bg { stroke: url(#giantsOv-gradient); stroke-width: 10px; left: 0.85vw; } } #giantsOv-gradient-stop01 { animation: giantsOvStop1 1s ease-in-out infinite alternate; } #giantsOv-gradient-stop02 { animation: giantsOvStop2 1s ease-in-out infinite alternate; } @keyframes giantsOvStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes giantsOvStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .giants-ov-bg { position: absolute; } .giants-ov-bg.js-inshow { opacity: 0; } .giants-ov-bg.js-inshow.is-show { animation: fadeUpAnime 0.5s forwards; } @media only screen and (max-width: 1023px) { .giants-ov-bg.bg-left-top { left: -13.333vw; top: 5.333vw; width: 46.133vw; } } @media only screen and (min-width: 1024px) { .giants-ov-bg.bg-left-top { left: 1.05vw; top: -4.5vw; width: 17.3vw; } } @media only screen and (max-width: 1023px) { .giants-ov-bg.bg-right-top { display: none; } } @media only screen and (min-width: 1024px) { .giants-ov-bg.bg-right-top { right: 5.5vw; top: -2.5vw; width: 2.9vw; } } @media only screen and (max-width: 1023px) { .giants-ov-bg.bg-left-bottom { width: 6.267vw; height: 6.533vw; left: 9.333vw; top: 144vw; } } @media only screen and (min-width: 1024px) { .giants-ov-bg.bg-left-bottom { top: 20vw; left: 5vw; width: 2.9vw; } } .giants-ov-bg.bg-right-bottom { z-index: 4; } @media only screen and (max-width: 1023px) { .giants-ov-bg.bg-right-bottom { bottom: 22.667vw; right: -9.333vw; width: 34.667vw; } } @media only screen and (min-width: 1024px) { .giants-ov-bg.bg-right-bottom { bottom: 9.25vw; right: 4vw; width: 18vw; } } .giants-tickets { background: rgb(221, 244, 252); position: relative; } @media only screen and (max-width: 1023px) { .giants-tickets { padding: 6vw 0 36vw; } } @media only screen and (min-width: 1024px) { .giants-tickets { padding: 0 0 21vw; } } .giants-tickets::before { border-color: transparent transparent rgb(221, 244, 252); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .giants-tickets::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .giants-tickets::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-tickets::before { border-bottom-width: 395px; top: -395px; } } .giants-tickets .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#giantsTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #giantsTickets-gradient-stop01 { animation: giantsTicketsStop1 1s ease-in-out infinite alternate; } #giantsTickets-gradient-stop02 { animation: giantsTicketsStop2 1s ease-in-out infinite alternate; } @keyframes giantsTicketsStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes giantsTicketsStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .giants-tickets-bg { position: absolute; } @media only screen and (max-width: 1023px) { .giants-tickets-bg.bg-left-top { left: -12.667vw; top: 10.667vw; width: 30.933vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-bg.bg-left-top { left: -1.75vw; top: -3.5vw; width: 17.5vw; } } @media only screen and (max-width: 1023px) { .giants-tickets-bg.bg-right-top { right: -20vw; top: 36vw; width: 45.067vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-bg.bg-right-top { right: -3.25vw; top: -2.5vw; width: 21.15vw; } } @media only screen and (max-width: 1023px) { .giants-tickets-bg.bg-squera { left: 6vw; top: 53.333vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-bg.bg-squera { left: 5vw; top: 15vw; width: 2.75vw; } } @media only screen and (max-width: 1023px) { .giants-tickets-bg.bg-right-bottom { display: none; } } @media only screen and (min-width: 1024px) { .giants-tickets-bg.bg-right-bottom { bottom: 1.5vw; right: 6vw; width: 2.75vw; } } .tickets-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .tickets-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 12vw; } } @media only screen and (min-width: 1024px) { .tickets-text { font-size: 1.5vw; line-height: 1.533; margin-bottom: 2em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tickets-text { font-size: 30px; } } .giants-tickets-inner { margin: 0 auto; position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .giants-tickets-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; margin-bottom: 66.667vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .giants-tickets-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .giants-tickets-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .giants-tickets-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .giants-tickets-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .giants-tickets-inner .giants-tickets-sub { display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, rgb(111, 234, 160) 0%, rgb(78, 146, 197) 30%, rgb(66, 81, 248) 100%); border-top-left-radius: 1em; border-top-right-radius: 1em; font-weight: 700; color: #fff; letter-spacing: 0.1em; position: relative; } .giants-tickets-inner .giants-tickets-sub::after { content: "▼"; color: #446dde; position: absolute; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-sub::after { font-size: 2.933vw; line-height: 2.133vw; bottom: -1.867vw; left: calc(50% - (2.933vw / 2)); } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-sub::after { font-size: 22px; line-height: 15px; bottom: -14px; left: calc(50% - 11px); } } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-sub { width: 74.133vw; height: 7.467vw; font-size: 4.133vw; margin: 10.667vw auto 0; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-sub { width: 47.2vw; height: 2.8vw; margin: 3.25vw auto 0; font-size: 1.4vw; } } .giants-tickets-inner .giants-tickets-sub:first-of-type { margin-top: 0; } .giants-tickets-inner .giants-tickets-base { background: #F2F2F2; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-base { width: 74.133vw; margin: 0 auto 2.667vw; padding: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-base { width: 47.2vw; margin: 0 auto; padding: 1.5vw 1vw 2vw; } } .giants-tickets-inner .giants-tickets-caut { text-align: left; font-weight: normal; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-caut { font-size: 2.667vw; line-height: 5.067vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-caut { font-size: 0.7vw; margin: 1vw 2.5vw; } } .giants-tickets-inner .giants-tickets-caut.cnt { text-align: center; } .giants-tickets-inner .giants-tickets-caut.rgt { text-align: right; } .giants-tickets-inner .giants-tickets-pr { margin: 0 auto; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-pr { width: 63.2vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-pr { width: 42.5vw; } } .giants-tickets-inner .giants-tickets-pr li { position: relative; font-weight: 600; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-pr li { line-height: 1.3; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-pr li { display: flex; flex-wrap: wrap; justify-content: space-between; background: url("../img/giants/giants-tickets-type-dot2.png") repeat-x; background-size: auto 0.2vw; background-position: center center; } } .giants-tickets-inner .giants-tickets-pr li strong { background: #F2F2F2; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-pr li strong { display: block; padding-left: 1em; text-indent: -1em; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-pr li strong { font-size: 1.35vw; padding: 0.5vw 0.5vw 0.5vw 0; } } .giants-tickets-inner .giants-tickets-pr li strong span { font-size: 0.8em; } .giants-tickets-inner .giants-tickets-pr li p { background: #F2F2F2; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-pr li p { text-align: right; position: relative; z-index: 1; } .giants-tickets-inner .giants-tickets-pr li p::before { content: ""; width: calc(100% - 5.2em); height: 100%; background: url("../img/giants/giants-tickets-type-dot2.png") repeat-x; background-size: auto 0.533vw; background-position: left center; position: absolute; left: 1em; border: 0; z-index: -1; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-pr li p { font-size: 1.25vw; padding: 0.5vw 0 0.5vw 0.5vw; } } .giants-tickets-inner .giants-tickets-type { border-radius: 10px; background: #fff; font-weight: 500; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-type { width: 66.933vw; margin: 5.333vw auto 0; padding: 2.667vw; border: 0.667vw solid #abb4ed; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-type { display: flex; width: 43vw; margin: 2vw auto 0; padding: 1vw; border: 0.25vw solid #abb4ed; } } .giants-tickets-inner .giants-tickets-type dt { text-align: center; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-type dt { position: relative; padding-bottom: 1.333vw; margin-bottom: 1.333vw; } .giants-tickets-inner .giants-tickets-type dt::after { content: ""; width: 100%; height: 0.2vw; background: url("../img/giants/giants-tickets-type-dot2.png") repeat-x; background-size: auto 0.533vw; position: absolute; left: 0; bottom: 0; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-type dt { width: 10.65vw; margin-top: 1vw; font-size: 1.45vw; line-height: 1.6; } .giants-tickets-inner .giants-tickets-type dt span { display: block; font-size: 0.8em; } } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-type dd p { display: block; padding-left: 5em; text-indent: -5em; line-height: 1.3; margin-top: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-type dd { width: calc(100% - 10.65vw); padding: 1vw; font-size: 1.2vw; line-height: 1.6; position: relative; } .giants-tickets-inner .giants-tickets-type dd::before { content: ""; width: 0.1vw; height: 100%; background: url("../img/giants/giants-tickets-type-dot.png") repeat-y; background-size: 0.1vw auto; position: absolute; left: 0; top: 0; } } .giants-tickets-inner .giants-tickets-type-ex { letter-spacing: 0.1; color: #283C78; font-weight: 500; text-align: center; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-type-ex { font-size: 4.533vw; line-height: 5.333vw; margin-top: 5.333vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-type-ex { font-size: 1.7vw; line-height: 2vw; margin-top: 2vw; } } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-type-caut { display: block; font-size: 2.667vw; line-height: 3.2vw; margin-top: 2.667vw; text-align: center; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-type-caut { font-size: 0.7vw; line-height: 1vw; } } .giants-tickets-inner .giants-tickets-img { display: block; margin: 0 auto; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-img { width: 69.333vw; margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-img { width: 40vw; margin-top: 2vw; } } .giants-tickets-inner .giants-tickets-ex { letter-spacing: 0.1; color: #283C78; font-weight: 500; text-align: center; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-ex { font-size: 4.533vw; line-height: 5.333vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-ex { font-size: 1.7vw; line-height: 2vw; margin-top: 1vw; } } .giants-tickets-inner .giants-tickets-ex span { display: inline-block; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-ex span { padding: 0 1.333vw; margin-top: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-ex span { padding: 0 0.5vw; } } .giants-tickets-inner .giants-tickets-ex-caut { text-align: center; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-ex-caut { font-size: 4.533vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-ex-caut { font-size: 1.2vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-btn { width: 68vw; margin: 8vw auto 0; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-btn { width: 39.85vw; margin: 3.5vw auto 0; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-tickets-inner .giants-tickets-btn { font-size: 34px; } } .giants-tickets-inner .giants-tickets-btn-link { display: block; position: relative; color: #fff; background-color: #283C78; text-align: center; width: 100%; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-btn-link { height: 15.733vw; margin: 2vw auto 0; border-radius: 9.333vw; font-size: 4vw; line-height: 15.733vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-btn-link { width: 39.85vw; height: 5.5vw; font-size: 1.7vw; line-height: 5.5vw; border-radius: 2.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-tickets-inner .giants-tickets-btn-link { font-size: 30px; } } .giants-tickets-inner .giants-tickets-btn-link::before { border: solid #fff; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-btn-link::before { width: 66.4vw; height: 13.867vw; left: 0.8vw; top: 0.8vw; border-radius: 6.8vw; border: 0.133vw solid #fff; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-btn-link::before { width: 39.45vw; height: 5.1vw; left: 0.2vw; top: 0.2vw; border-radius: 1.7em; border: 0.05vw solid #fff; } } .giants-tickets-inner .giants-tickets-btn-link::after { content: ""; border: 0; border-top: solid 2px #fff; border-right: solid 2px #fff; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-btn-link::after { width: 1.867vw; height: 1.867vw; right: 5.333vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-btn-link::after { width: 0.7vw; height: 0.7vw; right: 2vw; } } .giants-tickets-inner .giants-tickets-btn-text { font-weight: 700; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-btn-text { height: 16vw; font-size: 4.533vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-btn-text { height: 3.667em; font-size: 1.7vw; } } .giants-tickets-inner .giants-tickets-chara01 { z-index: 10; position: absolute; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-chara01 { width: 46.4vw; height: 93.6vw; bottom: -80vw; right: 0vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-chara01 { width: 17.4vw; height: 35.1vw; top: -4vw; right: -10vw; } } .giants-tickets-inner .giants-tickets-chara02 { z-index: 10; position: absolute; } @media only screen and (max-width: 1023px) { .giants-tickets-inner .giants-tickets-chara02 { width: 46.4vw; height: 85.6vw; bottom: -93.333vw; left: 0vw; } } @media only screen and (min-width: 1024px) { .giants-tickets-inner .giants-tickets-chara02 { width: 17.4vw; height: 32.1vw; top: 100vw; left: -9vw; } } .giants-event { background: rgb(255, 250, 207); position: relative; } @media only screen and (max-width: 1023px) { .giants-event { padding: 6vw 0 8vw; } } @media only screen and (min-width: 1024px) { .giants-event { padding: 0; } } .giants-event::before { border-color: transparent transparent rgb(255, 250, 207); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .giants-event::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .giants-event::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-event::before { border-bottom-width: 395px; top: -395px; } } .giants-event::after { border-color: rgb(255, 250, 207) transparent transparent; border-style: solid; content: ""; display: block; height: 0; margin-top: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .giants-event::after { border-right-width: 94.667vw; border-top-width: 23.467vw; bottom: -23.467vw; } } @media only screen and (min-width: 1024px) { .giants-event::after { border-right-width: 78vw; border-top-width: 19.75vw; bottom: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-event::after { border-top-width: 395px; bottom: -395px; } } .giants-event .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#giantsEvent-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #giantsEvent-gradient-stop01 { animation: giantsEventStop1 1s ease-in-out infinite alternate; } #giantsEvent-gradient-stop02 { animation: giantsEventStop2 1s ease-in-out infinite alternate; } @keyframes giantsEventStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes giantsEventStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .giants-event-bg { position: absolute; } @media only screen and (max-width: 1023px) { .giants-event-bg.bg-left-top { left: -18.667vw; top: 13.333vw; width: 36.933vw; } } @media only screen and (min-width: 1024px) { .giants-event-bg.bg-left-top { left: -3.25vw; top: -1.5vw; width: 17.35vw; } } @media only screen and (max-width: 1023px) { .giants-event-bg.bg-right-top { right: -8.667vw; top: -4vw; width: 33.6vw; } } @media only screen and (min-width: 1024px) { .giants-event-bg.bg-right-top { right: -0.5vw; top: -14vw; width: 18.9vw; } } .giants-event-bg.bg-left-bottom { z-index: 11; } @media only screen and (max-width: 1023px) { .giants-event-bg.bg-left-bottom { left: -7.333vw; bottom: -4.667vw; width: 30.4vw; } } @media only screen and (min-width: 1024px) { .giants-event-bg.bg-left-bottom { left: 5vw; bottom: 30vw; width: 14.25vw; } } .giants-event-bg.bg-right-bottom { z-index: 2; } @media only screen and (max-width: 1023px) { .giants-event-bg.bg-right-bottom { display: none; } } @media only screen and (min-width: 1024px) { .giants-event-bg.bg-right-bottom { right: 4.5vw; bottom: 4.75vw; width: 2.8vw; } } .event-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .event-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .event-text { font-size: 1.5vw; line-height: 1.533; margin-bottom: 2em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .event-text { font-size: 30px; } } .giants-event-inner { margin: 0 auto; position: relative; z-index: 12; background: #fff; } @media only screen and (max-width: 1023px) { .giants-event-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; margin-bottom: 66.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .giants-event-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .giants-event-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .giants-event-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .giants-event-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .giants-event-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .giants-event-inner .giants-event-ttl { text-align: center; letter-spacing: 0.1; color: #697AE0; font-weight: 500; } .giants-event-inner .giants-event-ttl span { display: inline-block; position: relative; z-index: 1; } .giants-event-inner .giants-event-ttl span::before { content: ""; width: 100%; height: 35%; background: linear-gradient(to right, rgba(148, 159, 234, 0.2) 0%, rgba(239, 105, 248, 0.2) 100%); position: absolute; bottom: 5%; left: 0; z-index: -1; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-ttl span { padding: 0 1.333vw 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-ttl span { padding: 0 0.5vw; } } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-ttl { font-size: 4.533vw; line-height: 5.333vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-ttl { font-size: 1.7vw; line-height: 3vw; } } .giants-event-inner .giants-event-img { display: block; margin: 0 auto; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-img { width: 60vw; margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-img { width: 40.909%; margin-top: 1.5vw; } } .giants-event-inner .giants-event-img span { display: block; text-align: right; width: 100%; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-img span { margin: 1.333vw 0 0; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-img span { margin: 0.5vw 0 0; } } .giants-event-inner .giants-event-list { display: flex; flex-direction: column; list-style-type: none; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list { margin-top: 106.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list { margin-top: 2vw; } } .giants-event-inner .giants-event-list li { background: #F2F2F2; color: #0F5CBF; border-radius: 10px; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li { width: 75.2vw; margin: 4.667vw auto 0; padding: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li { width: 45.6vw; margin: 1.75vw auto 0; padding: 1vw; } } .giants-event-inner .giants-event-list li strong { display: block; font-weight: 500; position: relative; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li strong { font-size: 4.133vw; line-height: 5.333vw; padding-bottom: 2.667vw; margin-bottom: 2.667vw; padding-left: 8vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li strong { font-size: 1.55vw; line-height: 2.3vw; padding-bottom: 1vw; margin-bottom: 1vw; padding-left: 3vw; } } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li strong::after { content: ""; width: 67.467vw; height: 0.533vw; background: url("../img/giants/giants-event-dot_sp.png") no-repeat; background-size: contain; position: absolute; left: 0; bottom: 0; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li strong::after { content: ""; width: 42.6vw; height: 0.2vw; background: url("../img/giants/giants-event-dot.png") no-repeat; background-size: contain; position: absolute; left: 0; bottom: 0; } } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li p { font-size: 3.467vw; padding: 0 1.333vw 1.333vw; line-height: 6.133vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li p { font-size: 1.1vw; padding: 0 0.5vw 0.5vw; line-height: 1.8vw; } } .giants-event-inner .giants-event-list li:first-of-type strong::before { content: ""; background: url("../img/giants/giants-event-lst01.png") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li:first-of-type strong::before { width: 6.667vw; height: 6.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li:first-of-type strong::before { width: 2.5vw; height: 3.25vw; } } .giants-event-inner .giants-event-list li:nth-of-type(2) strong::before { content: ""; background: url("../img/giants/giants-event-lst02.png") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li:nth-of-type(2) strong::before { width: 6.667vw; height: 6.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li:nth-of-type(2) strong::before { width: 2.5vw; height: 3.25vw; } } .giants-event-inner .giants-event-list li:nth-of-type(3) strong::before { content: ""; background: url("../img/giants/giants-event-lst03.png") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li:nth-of-type(3) strong::before { width: 6.667vw; height: 6.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li:nth-of-type(3) strong::before { width: 2.5vw; height: 3.25vw; } } .giants-event-inner .giants-event-list li:nth-of-type(4) strong::before { content: ""; background: url("../img/giants/giants-event-lst04.png") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li:nth-of-type(4) strong::before { width: 6.667vw; height: 6.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li:nth-of-type(4) strong::before { width: 2.5vw; height: 3.25vw; } } .giants-event-inner .giants-event-list li:nth-of-type(5) strong::before { content: ""; background: url("../img/giants/giants-event-lst05.png") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li:nth-of-type(5) strong::before { width: 6.667vw; height: 6.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li:nth-of-type(5) strong::before { width: 2.5vw; height: 3.25vw; } } .giants-event-inner .giants-event-list li:nth-of-type(6) strong::before { content: ""; background: url("../img/giants/giants-event-lst06.png") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li:nth-of-type(6) strong::before { width: 6.667vw; height: 6.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li:nth-of-type(6) strong::before { width: 2.5vw; height: 3.25vw; } } .giants-event-inner .giants-event-list li:nth-of-type(7) strong::before { content: ""; background: url("../img/giants/giants-event-lst07.png") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li:nth-of-type(7) strong::before { width: 6.667vw; height: 6.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li:nth-of-type(7) strong::before { width: 2.5vw; height: 3.25vw; } } .giants-event-inner .giants-event-list li:last-of-type strong::before { content: ""; background: url("../img/giants/giants-event-lst08.png") no-repeat; background-size: contain; position: absolute; top: 0; left: 0; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-list li:last-of-type strong::before { width: 6.667vw; height: 6.667vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-list li:last-of-type strong::before { width: 2.5vw; height: 3.25vw; } } .giants-event-inner .giants-event-caut { text-align: left; font-weight: normal; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-caut { font-size: 2.667vw; line-height: 5.067vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-caut { font-size: 0.7vw; margin: 1vw 2.5vw; } } .giants-event-inner .giants-event-caut.cnt { text-align: center; line-height: 1.3; } .giants-event-inner .giants-event-caut.rgt { text-align: right; } .giants-event-inner .giants-event-chara01 { z-index: 90; position: absolute; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-chara01 { width: 46.4vw; height: 88.533vw; top: 133.333vw; right: -1.333vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-chara01 { width: 17.4vw; height: 33.2vw; top: -16.5vw; right: -9vw; } } .giants-event-inner .giants-event-chara02 { z-index: 10; position: absolute; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-chara02 { width: 46.933vw; height: 95.6vw; top: 144vw; left: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-chara02 { width: 17.6vw; height: 35.85vw; top: 26vw; left: -10vw; } } .giants-event-inner .giants-event-chara03 { z-index: 10; position: absolute; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-chara03 { width: 46.4vw; height: 86.667vw; bottom: -80vw; right: -1.333vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-chara03 { width: 17.4vw; height: 32.5vw; top: 60vw; right: -10vw; } } .giants-event-inner .giants-event-chara04 { z-index: 10; position: absolute; } @media only screen and (max-width: 1023px) { .giants-event-inner .giants-event-chara04 { width: 46.933vw; height: 95.733vw; bottom: -93.333vw; left: -1.333vw; } } @media only screen and (min-width: 1024px) { .giants-event-inner .giants-event-chara04 { width: 17.6vw; height: 35.9vw; top: 95vw; left: -10vw; } } .giants-goods { position: relative; } @media only screen and (max-width: 1023px) { .giants-goods { padding: 28vw 0 31.467vw; } } @media only screen and (min-width: 1024px) { .giants-goods { padding: 5vw 0 20vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-goods { padding: 300px 0 400px; } } .giants-goods .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#giantsGoods-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #giantsGoods-gradient-stop01 { animation: giantsGoodsStop1 1s ease-in-out infinite alternate; } #giantsGoods-gradient-stop02 { animation: giantsGoodsStop2 1s ease-in-out infinite alternate; } @keyframes giantsGoodsStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes giantsGoodsStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } @media only screen and (max-width: 1023px) { .goods-text.giants-goods-text { margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .goods-text.giants-goods-text { margin-bottom: 4.75vw; } } .giants-goods-bg { position: absolute; } .giants-goods-bg.bg-left-top::after { content: ""; display: block; background: url(../img/giants/dot_p.svg) no-repeat center 0/100%; position: absolute; } @media only screen and (max-width: 1023px) { .giants-goods-bg.bg-left-top { left: -13.333vw; top: 101.333vw; width: 26.133vw; } } @media only screen and (min-width: 1024px) { .giants-goods-bg.bg-left-top { left: 0.5vw; top: 31.5vw; width: 16.3vw; } .giants-goods-bg.bg-left-top::after { width: 2.95vw; height: 3vw; bottom: -6.1vw; left: 5.1vw; } } @media only screen and (max-width: 1023px) { .giants-goods-bg.bg-right-top { right: -9.333vw; top: 0vw; width: 27.067vw; } } @media only screen and (min-width: 1024px) { .giants-goods-bg.bg-right-top { right: -0.25vw; top: 4.5vw; width: 16vw; } } @media only screen and (max-width: 1023px) { .giants-goods-bg.bg-left-bottom { bottom: 18.667vw; left: 10.4vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .giants-goods-bg.bg-left-bottom { bottom: 14.5vw; left: 16.5vw; width: 2.9vw; } } .giants-goods-bg.bg-right-bottom { z-index: 2; } @media only screen and (max-width: 1023px) { .giants-goods-bg.bg-right-bottom { bottom: 22.267vw; right: -4.667vw; width: 30.533vw; } } @media only screen and (min-width: 1024px) { .giants-goods-bg.bg-right-bottom { bottom: 15vw; right: 9.5vw; width: 14.3vw; } } .goods-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .goods-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 10.667vw; } } @media only screen and (min-width: 1024px) { .goods-text { font-size: 1.4vw; line-height: 1.643; margin-bottom: 2.857em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .goods-text { font-size: 28px; } } .giants-goods-inner { margin: 0 auto; position: relative; z-index: 12; background: #fff; } @media only screen and (max-width: 1023px) { .giants-goods-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; margin-bottom: 66.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .giants-goods-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .giants-goods-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .giants-goods-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .giants-goods-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .giants-goods-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .giants-goods-inner .giants-goods-sub { text-align: center; color: #697AE0; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-sub { font-size: 5.6vw; line-height: 10.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-sub { font-size: 1.85vw; line-height: 2.3vw; } } .giants-goods-inner .giants-goods-date { border: 5px solid #abb4ed; border-radius: 10px; background: #fff; display: flex; font-weight: 500; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-date { width: 73.333vw; margin: 6.267vw auto 0; padding: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-date { width: 43vw; margin: 2vw auto 0; padding: 1vw; } } .giants-goods-inner .giants-goods-date dt { display: flex; justify-content: center; align-items: center; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-date dt { width: 17.333vw; font-size: 3.867vw; line-height: 1.6; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-date dt { width: 8.15vw; font-size: 1.45vw; line-height: 1.6; } } .giants-goods-inner .giants-goods-date dt strong { display: flex; justify-content: center; align-content: center; border-radius: 50%; background: linear-gradient(150deg, rgb(111, 234, 160) 0%, rgb(78, 146, 197) 30%, rgb(66, 81, 248) 100%); text-align: center; color: #fff; font-weight: 500; line-height: 1.3; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-date dt strong { width: 14.667vw; height: 14.667vw; padding-top: 1.067vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-date dt strong { width: 5.5vw; height: 5.5vw; padding-top: 0.7vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-date dd { width: calc(100% - 17.333vw); font-size: 3.467vw; line-height: 1.6; padding-top: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-date dd { width: calc(100% - 10.65vw); font-size: 1.2vw; line-height: 1.6; padding-top: 1vw; } } .giants-goods-inner .giants-goods-date dd span { display: inline-block; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-date dd span { border: 0.133vw solid #283C78; padding: 0.267vw 0.533vw; margin-right: 0.533vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-date dd span { border: 0.05vw solid #283C78; padding: 0.1vw 0.2vw; margin-right: 0.2vw; } } .giants-goods-inner .giants-goods-caut { text-align: left; font-weight: normal; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-caut { font-size: 3.2vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-caut { font-size: 0.7vw; margin: 1vw 2.5vw; } } .giants-goods-inner .giants-goods-caut.date-caut { line-height: 1.5; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-caut.date-caut { text-align: left; margin: 1.333vw 8vw 0; padding-right: 1em; text-indent: -1em; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-caut.date-caut { text-align: center; margin-top: 0.5vw; } } .giants-goods-inner .giants-goods-caut.item-caut { text-align: center; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-caut.item-caut { margin: 8vw 0 0; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-caut.item-caut { margin: 5vw 0 0; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-btn { width: 72.267vw; margin: 5.333vw auto 0; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-btn { width: 39.85vw; margin: 2.333em auto 0; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-goods-inner .giants-goods-btn { font-size: 34px; } } .giants-goods-inner .giants-goods-btn-link, .giants-goods-inner .giants-goods-btn-soon { display: block; position: relative; color: #fff; background-color: #283C78; text-align: center; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-btn-link, .giants-goods-inner .giants-goods-btn-soon { height: 15.733vw; margin: 2vw auto 0; border-radius: 9.333vw; font-size: 4vw; line-height: 15.733vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-btn-link, .giants-goods-inner .giants-goods-btn-soon { width: 100%; height: 5.5vw; font-size: 1.7vw; line-height: 5.5vw; border-radius: 2.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-goods-inner .giants-goods-btn-link, .giants-goods-inner .giants-goods-btn-soon { font-size: 30px; } } .giants-goods-inner .giants-goods-btn-link::before, .giants-goods-inner .giants-goods-btn-soon::before { border: solid #fff; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-btn-link::before, .giants-goods-inner .giants-goods-btn-soon::before { width: 70.667vw; height: 13.867vw; left: 0.8vw; top: 0.8vw; border-radius: 6.8vw; border: 0.133vw solid #fff; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-btn-link::before, .giants-goods-inner .giants-goods-btn-soon::before { border-radius: 2.55vw; border: 0.05vw solid #fff; height: 5.1vw; left: 0.2vw; top: 0.2vw; width: 23.2em; } } .giants-goods-inner .giants-goods-btn-link::after { content: ""; border: 0; border-top: solid 2px #fff; border-right: solid 2px #fff; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-btn-link::after { width: 1.867vw; height: 1.867vw; right: 5.333vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-btn-link::after { width: 0.7vw; height: 0.7vw; right: 2vw; } } .giants-goods-inner .giants-goods-btn-soon::after { content: "coming soon"; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-btn-soon::after { bottom: 2.667vw; right: calc(50% - 3em); font-size: 3.2vw; line-height: 1; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-btn-soon::after { top: 0; right: 5%; font-size: 1.1vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-btn-soon .giants-goods-btn-text { display: block; line-height: 2.8; } } .giants-goods-inner .giants-goods-btn-text { font-weight: 700; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-btn-text { height: 16vw; font-size: 4.533vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-btn-text { height: 3.667em; font-size: 1.7vw; } } .giants-goods-inner .giants-goods-img { display: block; margin: 0 auto; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-img { width: 74.133vw; margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-img { width: 81.636%; margin-top: 1.5vw; } } .giants-goods-inner .giants-goods-shop { background: #F2F2F2; color: #0F5CBF; border-radius: 10px; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop { width: 75.2vw; margin: 4.667vw auto 0; padding: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop { width: 47vw; margin: 3vw auto 0; padding: 1vw; } } .giants-goods-inner .giants-goods-shop h4 { color: #697AE0; font-weight: 500; text-align: center; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop h4 { font-size: 4.933vw; background: url("../img/giants/giants-goods-shop_kzr_sp.png") no-repeat; background-size: 73.867vw auto; background-position: center bottom; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop h4 { font-size: 1.4vw; background: url("../img/giants/giants-goods-shop_kzr.png") no-repeat; background-size: 37vw auto; background-position: center bottom; } } .giants-goods-inner .giants-goods-shop h4 strong { display: inline-block; position: relative; z-index: 1; color: #000; } .giants-goods-inner .giants-goods-shop h4 strong::before { content: ""; background: linear-gradient(to right, rgb(223, 226, 249) 0%, rgb(250, 210, 253) 100%); width: 100%; height: 35%; bottom: 0; left: 0; position: absolute; z-index: -1; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop h4 strong { margin: 5.333vw 0; padding: 0 1.333vw; font-size: 4.533vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop h4 strong { margin: 2vw 0; padding: 0 0.5vw; font-size: 2.15vw; } } .giants-goods-inner .giants-goods-shop-bg { margin: 0 auto; position: relative; text-align: center; font-weight: 500; background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop-bg { width: 69.6vw; border-radius: 2.133vw; padding: 0.533vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop-bg { width: 40.3vw; border-radius: 0.8vw; padding: 0.2vw; margin-top: 1vw; } } .giants-goods-inner .giants-goods-shop-bg-inr { background: #fff; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop-bg-inr { border-radius: 2vw; padding: 2.667vw 0; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop-bg-inr { border-radius: 0.75vw; padding: 2vw 0; } } .giants-goods-inner .giants-goods-shop-bg-lst { margin: 0 auto; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop-bg-lst span { display: block; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop-bg-lst { width: 32.5vw; } } .giants-goods-inner .giants-goods-shop-bg-lst .giants-goods-caut { margin-bottom: 0; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop-bg-lst .giants-goods-caut { padding: 0.5em 1em; } } .giants-goods-inner .giants-goods-shop-bg-lst .giants-goods-caut li { padding-left: 1em; text-indent: -1em; } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop-bg-lst .giants-goods-caut li { padding-bottom: 0.5em; } } .giants-goods-inner .giants-goods-shop-bg h5 { color: #283C78; text-align: center; position: relative; display: inline-block; line-height: 1.5; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop-bg h5 { font-size: 4vw; } .giants-goods-inner .giants-goods-shop-bg h5::after { content: ""; width: 100%; height: 0.533vw; border-bottom: 0.533vw solid #283C78; position: absolute; left: 0; bottom: -1.067vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop-bg h5 { font-size: 1.5vw; margin-bottom: 1vw; } .giants-goods-inner .giants-goods-shop-bg h5::after { content: ""; width: 100%; height: 0.2vw; border-bottom: 0.2vw solid #283C78; position: absolute; left: 0; bottom: -0.4vw; } } .giants-goods-inner .giants-goods-shop-bg p { color: #283C78; font-weight: 500; text-align: left; margin-top: 1em; } .giants-goods-inner .giants-goods-shop-bg p span { font-size: 0.8em; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop-bg p { display: block; font-size: 3.2vw; margin: 2.667vw 5.333vw 0; line-height: 1.5; padding-left: 1em; text-indent: -1em; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop-bg p { font-size: 1.2vw; margin: 0.6vw 2vw 0; line-height: 1.5; } } .giants-goods-inner .giants-goods-shop-bg p.giants-goods-caut { text-align: center; font-weight: normal; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-shop-bg p.giants-goods-caut { font-size: 3.2vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-shop-bg p.giants-goods-caut { font-size: 0.7vw; margin: 0.5vw 0 0; padding-top: 0; } } .giants-goods-inner .giants-goods-shop .giants-goods-caut { color: #283C78; } .giants-goods-inner .giants-goods-item:first-of-type { border-top: 1px solid #697AE0; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item:first-of-type { width: 73.333vw; margin-top: 8vw; padding-top: 8vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item:first-of-type { width: 48vw; margin-top: 3.75em; padding-top: 3.75em; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item { flex-direction: column-reverse; margin: 7.333vw auto 0; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item { justify-content: space-between; font-size: 0.8vw; width: 81.818%; margin: 3.438em auto; padding-top: 1.875em; padding-bottom: 0.625em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-goods-inner .giants-goods-item { font-size: 16px; } } .giants-goods-inner .giants-goods-item-ttl { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item-ttl { font-size: 3.733vw; width: 69.867vw; height: 8.533vw; margin-top: 4.267vw; border-radius: 8.533vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item-ttl { font-size: 1.4vw; width: 47vw; height: 3.2vw; margin-top: 0.5vw; border-radius: 3.2vw; } } .giants-goods-inner .giants-goods-item-ttl:first-of-type { margin-top: 0; } .giants-goods-inner .giants-goods-item-ex { display: flex; justify-content: center; align-items: center; margin: 0 auto; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item-ex { width: 74.133vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item-ex { width: 68.182%; margin-top: 1.5vw; } } .giants-goods-inner .giants-goods-item-limit { display: flex; justify-content: center; align-items: center; border: 1px solid #697AE0; color: #697AE0; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item-limit { font-size: 3.6vw; width: 13.733vw; height: 13.733vw; border-radius: 50%; margin-right: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item-limit { font-size: 1.35vw; width: 5.15vw; height: 5.15vw; border-radius: 50%; margin-right: 0.5vw; } } .giants-goods-inner .giants-goods-item-pr { text-align: center; font-weight: 700; color: #0f5cbf; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item-pr { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item-pr { font-size: 1.4vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item-pr strong { font-size: 5.867vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item-pr strong { font-size: 2.2vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item-pr em { font-size: 4.267vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item-pr em { font-size: 1.6vw; } } .giants-goods-inner .giants-goods-item-pr span { font-weight: normal; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item-pr span { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item-pr span { font-size: 1vw; } } .giants-goods-inner .giants-goods-item-pr span.caut { display: block; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item-pr span.caut { font-size: 2.4vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item-pr span.caut { font-size: 0.9vw; } } .giants-goods-inner .giants-goods-item-img { display: block; margin: 0 auto; } .giants-goods-inner .giants-goods-item-caut { text-align: right; color: #808080; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item-caut { font-size: 2.133vw; margin-right: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item-caut { margin-right: 2.667vw; font-size: 0.7vw; } } .giants-goods-inner .giants-goods-item .copy { position: relative; } .giants-goods-inner .giants-goods-item .copy::after { content: ""; width: 7vw; height: 1vw; background: url("../img/giants/giants-goods-item-copy.png") no-repeat; background-size: contain; position: absolute; bottom: -1.5vw; right: -1vw; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-badge { width: 72.8vw; margin-top: 2.667vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-badge { width: 44.8vw; margin-top: 1.5vw; margin-bottom: 0.5vw; } } .giants-goods-inner .giants-goods-item .giants-file-type { position: relative; } .giants-goods-inner .giants-goods-item .giants-file-type-name { display: flex; justify-content: center; font-weight: 500; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-file-type-name { width: 64vw; margin: 0 auto 1.333vw; font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-file-type-name { width: 35vw; margin: 0 auto 0.5vw; font-size: 1.3vw; } } .giants-goods-inner .giants-goods-item .giants-file-type-name span { text-align: center; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-file-type-name span { width: calc(75.2vw / 3); } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-file-type-name span { width: calc(45.5vw / 3); } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-file-type { width: 75.2vw; border: 0.4vw solid #116DD9; border-radius: 2.667vw; padding: 2.667vw; margin: 5.333vw auto 1.333vw; } .giants-goods-inner .giants-goods-item .giants-file-type img { display: block; width: 64.667vw; margin: 0 auto; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-file-type { width: 45.5vw; border: 0.15vw solid #116DD9; border-radius: 1vw; padding: 1vw; margin-top: 2vw; margin-bottom: 0.5vw; } .giants-goods-inner .giants-goods-item .giants-file-type img { display: block; width: 35.45vw; margin: 0 auto; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-file-type:first-of-type { margin-top: 5.333vw; } } .giants-goods-inner .giants-goods-item .giants-file-type:first-of-type::before { content: "A"; background: #0F5CBF; text-align: center; font-weight: 700; color: #fff; position: absolute; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-file-type:first-of-type::before { width: 6.133vw; height: 6.133vw; border-radius: calc(6.133vw / 2); top: -2.667vw; left: -2.667vw; font-size: 3.467vw; line-height: 6.133vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-file-type:first-of-type::before { width: 3.25vw; height: 3.25vw; border-radius: calc(3.25vw / 2); top: -1vw; left: -1vw; font-size: 1.9vw; line-height: 3vw; } } .giants-goods-inner .giants-goods-item .giants-file-type:nth-of-type(2)::before { content: "B"; background: #0F5CBF; text-align: center; font-weight: 700; color: #fff; position: absolute; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-file-type:nth-of-type(2)::before { width: 6.133vw; height: 6.133vw; border-radius: calc(6.133vw / 2); top: -2.667vw; left: -2.667vw; font-size: 3.467vw; line-height: 6.133vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-file-type:nth-of-type(2)::before { width: 3.25vw; height: 3.25vw; border-radius: calc(3.25vw / 2); top: -1vw; left: -1vw; font-size: 1.9vw; line-height: 3vw; } } .giants-goods-inner .giants-goods-item .giants-file-type:last-of-type::before { content: "C"; background: #0F5CBF; text-align: center; font-weight: 700; color: #fff; position: absolute; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-file-type:last-of-type::before { width: 6.133vw; height: 6.133vw; border-radius: calc(6.133vw / 2); top: -2.667vw; left: -2.667vw; font-size: 3.467vw; line-height: 6.133vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-file-type:last-of-type::before { width: 3.25vw; height: 3.25vw; border-radius: calc(3.25vw / 2); top: -1vw; left: -1vw; font-size: 1.9vw; line-height: 3vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-acrylicpanela3 { width: 59.2vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-acrylicpanela3 { width: 37.7vw; margin-top: 0vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-acrylicstand { width: 69.467vw; margin-top: 2.667vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-acrylicstand { width: 40vw; margin-top: 1.5vw; margin-bottom: 0.5vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-b2tapestry { width: 67.867vw; margin-top: 2.667vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-b2tapestry { width: 36.6vw; margin-top: 0vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-towel { width: 67.867vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-towel { width: 36.6vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-tshirt { width: 67.867vw; margin-top: 2.667vw; } .giants-goods-inner .giants-goods-item .giants-tshirt img { margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-tshirt { width: 36.6vw; margin-top: 1vw; } .giants-goods-inner .giants-goods-item .giants-tshirt img { margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-item .giants-uniform { width: 67.867vw; margin-top: 2.667vw; } .giants-goods-inner .giants-goods-item .giants-uniform img { margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-item .giants-uniform { width: 36.6vw; margin-top: 1vw; } .giants-goods-inner .giants-goods-item .giants-uniform img { margin-top: 1vw; } } .giants-goods-inner .giants-goods-chara01 { z-index: 90; position: absolute; } @media only screen and (max-width: 1023px) { .giants-goods-inner .giants-goods-chara01 { width: 41.867vw; height: 89.333vw; bottom: -77.333vw; left: -4vw; } } @media only screen and (min-width: 1024px) { .giants-goods-inner .giants-goods-chara01 { width: 16.2vw; height: 33.5vw; top: 40vw; left: -8.5vw; } } @media only screen and (max-width: 1023px) { .giants-goods .l-main-deco.left-bottom { bottom: -5.333vw; } } @media only screen and (min-width: 1024px) { .giants-goods .l-main-deco.left-bottom { left: -4.717%; margin-bottom: -1.5vw; } } @media only screen and (max-width: 1023px) { .giants-goods .l-main-deco.right-bottom { bottom: -12.667vw; } } @media only screen and (min-width: 1024px) { .giants-goods .l-main-deco.right-bottom { margin-bottom: -5vw; } } .giants-food { position: relative; background: rgb(221, 244, 252); position: relative; } @media only screen and (max-width: 1023px) { .giants-food { padding: 0 0 106.667vw; } } @media only screen and (min-width: 1024px) { .giants-food { padding: 0 0 11.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-food { padding: 0 0 230px; } } .giants-food::before { border-color: transparent transparent rgb(221, 244, 252); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .giants-food::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .giants-food::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-food::before { border-bottom-width: 395px; top: -395px; } } .giants-food .giants-food-inner { overflow-y: hidden; } .giants-food .giants-food-inner { margin: 0 auto; position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .giants-food .giants-food-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .giants-food .giants-food-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .giants-food .giants-food-inner .giants-food-sub { display: flex; justify-content: center; align-items: center; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-sub { width: 69.867vw; height: 8.533vw; font-size: 3.733vw; border-radius: 8.533vw; margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-sub { width: 35vw; height: 3.2vw; font-size: 1.4vw; border-radius: 1.6vw; margin: 4vw auto 0; } } .giants-food .giants-food-inner .giants-food-sub:first-of-type { margin-top: 0; } .giants-food .giants-food-inner .giants-food-sub.drink { position: relative; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-sub.drink { margin-top: 26.667vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-sub.drink { margin-top: 13vw; } } .giants-food .giants-food-inner .giants-food-sub.drink::after { content: ""; position: absolute; height: 1px; border-top: 1px solid #283C78; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-sub.drink::after { width: 66.667vw; top: -10.667vw; left: calc(50% - (66.667vw / 2)); } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-sub.drink::after { width: 35vw; top: -5vw; left: calc(50% - (35vw / 2)); } } .giants-food .giants-food-inner .giants-food-ex { text-align: center; font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-ex { font-size: 3.2vw; margin-top: 8vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-ex { font-size: 1.2vw; margin-top: 3vw; } } .giants-food .giants-food-inner .giants-food-head { display: flex; justify-content: center; align-items: center; margin: 0 auto; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-head { width: 74.133vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-head { width: 68.182%; margin-top: 1.5vw; } } .giants-food .giants-food-inner .giants-food-limit { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid #697AE0; color: #697AE0; line-height: 1.5; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-limit { font-size: 3.6vw; width: 14.667vw; height: 14.667vw; border-radius: 50%; margin-right: 1.333vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-limit { font-size: 1.35vw; width: 5.5vw; height: 5.5vw; border-radius: 50%; margin-right: 0.5vw; } } .giants-food .giants-food-inner .giants-food-limit span { font-size: 0.7em; } .giants-food .giants-food-inner .giants-food-ttl { font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-ttl { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-ttl { font-size: 1.4vw; } } .giants-food .giants-food-inner .giants-food-ttl span { font-weight: normal; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-ttl span { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-ttl span { font-size: 1vw; } } .giants-food .giants-food-inner .giants-food-caut { text-align: center; line-height: 1.3; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-caut { font-size: 3.2vw; margin-top: 5.333vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-caut { font-size: 0.9vw; margin-top: 2vw; } } .giants-food .giants-food-inner .giants-food-caut.lft { text-align: left; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-caut.lft { width: 69.867vw; margin: 0 auto; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-caut.lft { width: 35vw; margin: 0 auto; } } .giants-food .giants-food-inner .giants-food-caut.cnt { text-align: center; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-caut.mt { margin: 2.667vw 0 5.333vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-caut.mt { margin: 1vw 0 2vw; } } .giants-food .giants-food-inner .giants-food-caut.ex { color: #697AE0; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-caut:last-of-type { margin-top: 13.333vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-caut:last-of-type { margin-top: 6vw; } } .giants-food .giants-food-inner .giants-food-img { line-height: 0; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-img { width: 69.867vw; font-size: 3.733vw; margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-img { width: 30vw; margin: 2.25vw auto 0; } } .giants-food .giants-food-inner .giants-food-copy { text-align: right; color: #808080; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-copy { width: 75.733vw; margin-top: 1.333vw; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-copy { width: 39vw; margin-top: 0.5vw; font-size: 0.7vw; } } .giants-food .giants-food-inner .giants-food-place, .giants-food .giants-food-inner .giants-food-time, .giants-food .giants-food-inner .giants-food-url { display: flex; justify-content: flex-start; align-items: flex-start; margin: 0 auto; position: relative; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-place, .giants-food .giants-food-inner .giants-food-time, .giants-food .giants-food-inner .giants-food-url { width: 74.133vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-place, .giants-food .giants-food-inner .giants-food-time, .giants-food .giants-food-inner .giants-food-url { width: 60%; margin-top: 1vw; } } .giants-food .giants-food-inner .giants-food-place dt, .giants-food .giants-food-inner .giants-food-time dt, .giants-food .giants-food-inner .giants-food-url dt { display: flex; justify-content: center; align-items: center; border: 1px solid #697AE0; color: #697AE0; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-place dt, .giants-food .giants-food-inner .giants-food-time dt, .giants-food .giants-food-inner .giants-food-url dt { font-size: 3.2vw; width: 16vw; height: 8vw; border-radius: calc(8vw / 2); margin-right: 4vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-place dt, .giants-food .giants-food-inner .giants-food-time dt, .giants-food .giants-food-inner .giants-food-url dt { font-size: 1.2vw; width: 9vw; height: 3vw; border-radius: calc(3vw / 2); margin-right: 1.5vw; } } .giants-food .giants-food-inner .giants-food-place dd, .giants-food .giants-food-inner .giants-food-time dd, .giants-food .giants-food-inner .giants-food-url dd { font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.3; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-place dd, .giants-food .giants-food-inner .giants-food-time dd, .giants-food .giants-food-inner .giants-food-url dd { padding-top: 0.8vw; font-size: 3.2vw; width: calc(100% - 16vw); } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-place dd, .giants-food .giants-food-inner .giants-food-time dd, .giants-food .giants-food-inner .giants-food-url dd { padding-top: 0.3vw; font-size: 1.4vw; width: calc(100% - 9vw); } } .giants-food .giants-food-inner .giants-food-place dd span.caut, .giants-food .giants-food-inner .giants-food-time dd span.caut, .giants-food .giants-food-inner .giants-food-url dd span.caut { display: block; font-size: 0.85em; padding-left: 1em; text-indent: -1em; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-place { margin-top: 10.667vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-place { margin-top: 4vw; } } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-time dd, .giants-food .giants-food-inner .giants-food-url dd { padding-top: 1.6vw; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-time dd, .giants-food .giants-food-inner .giants-food-url dd { padding-top: 0.6vw; font-size: 1vw; } } .giants-food .giants-food-inner .giants-food-item { font-weight: 700; color: #fff; letter-spacing: 0.1em; text-align: center; position: relative; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item { width: 74.667vw; margin: 10.667vw auto 4vw; padding-bottom: 8vw; font-size: 4.133vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item { width: 45vw; margin: 4vw auto 1.5vw; padding-bottom: 3vw; font-size: 1.4vw; } } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item.bdr { margin: 2.667vw auto 8vw; padding-bottom: 16vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item.bdr { margin: 1vw auto 3vw; padding-bottom: 6vw; } } .giants-food .giants-food-inner .giants-food-item.bdr::after { content: ""; position: absolute; bottom: 0; border-bottom: 1px solid #283C78; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item.bdr::after { width: 66.667vw; height: 1px; left: calc(50% - (66.667vw / 2)); } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item.bdr::after { width: 35vw; height: 1px; left: calc(50% - (35vw / 2)); } } .giants-food .giants-food-inner .giants-food-item-name { font-weight: 700; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-name { margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-name { margin-top: 2vw; } } .giants-food .giants-food-inner .giants-food-item-pr { text-align: center; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-pr { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-pr { font-size: 1.4vw; } } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-pr strong { font-size: 5.867vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-pr strong { font-size: 2.2vw; } } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-pr em { font-size: 4.267vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-pr em { font-size: 1.6vw; } } .giants-food .giants-food-inner .giants-food-item-pr span { font-weight: normal; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-pr span { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-pr span { font-size: 1vw; } } .giants-food .giants-food-inner .giants-food-item-pr span.caut { display: block; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-pr span.caut { font-size: 2.4vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-pr span.caut { font-size: 0.9vw; } } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-caut { font-size: 2.667vw; margin: 2.667vw auto 0; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-caut { font-size: 1vw; margin: 1vw auto 0; } } .giants-food .giants-food-inner .giants-food-item-caut.lft { text-align: left; } .giants-food .giants-food-inner .giants-food-item-caut.cnt { text-align: center; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-img { margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-img { margin: 1.5vw auto 0; } } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-img.curry { width: 74.667vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-img.curry { width: 33.35vw; } } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-item-img.float { width: 66.667vw; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-item-img.float { width: 29.4vw; } } .giants-food .giants-food-inner .giants-food-btn { background: #1152b7 !important; font-weight: 700 !important; position: absolute !important; top: 0; right: 0; line-height: 1; } @media only screen and (max-width: 1023px) { .giants-food .giants-food-inner .giants-food-btn { width: 13.333vw !important; height: 5.333vw !important; margin: 1.333vw auto 4vw !important; padding: 0 !important; } } @media only screen and (min-width: 1024px) { .giants-food .giants-food-inner .giants-food-btn { width: 5vw !important; height: 2.5vw !important; margin: 0.5vw auto 0 !important; padding: 0 !important; } } .giants-food .giants-food-inner .giants-food-btn a { color: #fff; cursor: pointer; display: block; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .giants-food .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#giantsfood-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } .giants-food-chara01 { z-index: 90; position: absolute; } @media only screen and (max-width: 1023px) { .giants-food-chara01 { width: 46.4vw; height: 89.867vw; bottom: 24vw; right: 4vw; } } @media only screen and (min-width: 1024px) { .giants-food-chara01 { width: 17.4vw; height: 33.7vw; top: 20vw; right: 1.5vw; } } .giants-food-chara02 { z-index: 90; position: absolute; } @media only screen and (max-width: 1023px) { .giants-food-chara02 { width: 46.933vw; height: 95.6vw; bottom: 10.667vw; left: 4vw; } } @media only screen and (min-width: 1024px) { .giants-food-chara02 { width: 17.6vw; height: 35.85vw; top: 150vw; left: 1.5vw; } } @media only screen and (max-width: 1023px) { .giants-food .l-footer-share { margin-top: 80vw; } } #giantsfood-gradient-stop01 { animation: giantsfoodStop1 1s ease-in-out infinite alternate; } #giantsfood-gradient-stop02 { animation: giantsfoodStop2 1s ease-in-out infinite alternate; } @keyframes giantsfoodStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes giantsfoodStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .giants-food-bg { position: absolute; } @media only screen and (max-width: 1023px) { .giants-food-bg.bg-left-top { left: -12vw; top: 8.667vw; width: 32.933vw; } } @media only screen and (min-width: 1024px) { .giants-food-bg.bg-left-top { left: -1.5vw; top: -2.5vw; width: 18.5vw; } } @media only screen and (max-width: 1023px) { .giants-food-bg.bg-right-top { right: -12vw; top: -6.667vw; width: 33.733vw; } } @media only screen and (min-width: 1024px) { .giants-food-bg.bg-right-top { right: -0.25vw; top: -4.5vw; width: 15.9vw; } } @media only screen and (max-width: 1023px) { .giants-food-bg.bg-left-bottom { top: 130.667vw; left: -4.067vw; width: 30.4vw; } } @media only screen and (min-width: 1024px) { .giants-food-bg.bg-left-bottom { top: 43.6vw; left: 6.5vw; width: 11.4vw; } } @media only screen and (max-width: 1023px) { .giants-food-bg.bg-right-bottom { bottom: -13.333vw; right: -8vw; width: 41.067vw; } } @media only screen and (min-width: 1024px) { .giants-food-bg.bg-right-bottom { bottom: -5vw; right: -3.5vw; width: 25.65vw; } } .giants-ov-note { margin: 0 auto; color: #697AE0; text-align: center; font-weight: 700; } @media only screen and (max-width: 1023px) { .giants-ov-note { background: url(../img/giants/ov_detail_sp.png) no-repeat center 0/100%; font-size: 6.667vw; margin-top: 20.8vw; padding-top: 3.2vw; width: 78.933vw; height: 12.8vw; } } @media only screen and (min-width: 1024px) { .giants-ov-note { background: url(../img/giants/ov_detail.png) no-repeat center 0/100%; font-size: 2.1vw; margin-top: 6vw; padding-top: 0.85vw; width: 24vw; height: 4vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-ov-note { font-size: 42px; } } .giants-broadcast { background: rgb(255, 250, 207); position: relative; } @media only screen and (max-width: 1023px) { .giants-broadcast { padding: 6vw 0 8vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast { padding: 0 0 5vw; } } .giants-broadcast::before { border-color: transparent transparent rgb(255, 250, 207); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .giants-broadcast::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-broadcast::before { border-bottom-width: 395px; top: -395px; } } .giants-broadcast::after { border-color: rgb(255, 250, 207) transparent transparent; border-style: solid; content: ""; display: block; height: 0; margin-top: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .giants-broadcast::after { border-right-width: 94.667vw; border-top-width: 23.467vw; bottom: -23.467vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast::after { border-right-width: 78vw; border-top-width: 19.75vw; bottom: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .giants-broadcast::after { border-top-width: 395px; bottom: -395px; } } .giants-broadcast .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#giantsEvent-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #giantsBroadcast-gradient-stop01 { animation: giantsBroadcastStop1 1s ease-in-out infinite alternate; } #giantsBroadcast-gradient-stop02 { animation: giantsBroadcastStop2 1s ease-in-out infinite alternate; } @keyframes giantsBroadcastStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes giantsBroadcastStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .giants-broadcast-bg { position: absolute; } @media only screen and (max-width: 1023px) { .giants-broadcast-bg.bg-left-top { left: -18.667vw; top: 13.333vw; width: 36.933vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast-bg.bg-left-top { left: -3.25vw; top: -1.5vw; width: 17.35vw; } } @media only screen and (max-width: 1023px) { .giants-broadcast-bg.bg-right-top { right: -8.667vw; top: -4vw; width: 33.6vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast-bg.bg-right-top { right: -0.5vw; top: -14vw; width: 18.9vw; } } .giants-broadcast-bg.bg-left-bottom { z-index: 11; } @media only screen and (max-width: 1023px) { .giants-broadcast-bg.bg-left-bottom { left: -7.333vw; bottom: -4.667vw; width: 30.4vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast-bg.bg-left-bottom { left: 5vw; bottom: 30vw; width: 14.25vw; } } .giants-broadcast-bg.bg-right-bottom { z-index: 2; } @media only screen and (max-width: 1023px) { .giants-broadcast-bg.bg-right-bottom { display: none; } } @media only screen and (min-width: 1024px) { .giants-broadcast-bg.bg-right-bottom { right: 4.5vw; bottom: 4.75vw; width: 2.8vw; } } .broadcast-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .broadcast-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .broadcast-text { font-size: 1.5vw; line-height: 1.533; margin-bottom: 2em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .broadcast-text { font-size: 30px; } } .giants-broadcast-inner { margin: 0 auto; position: relative; z-index: 12; background: #fff; } @media only screen and (max-width: 1023px) { .giants-broadcast-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; margin-bottom: 26.667vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .giants-broadcast-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .giants-broadcast-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .giants-broadcast-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .giants-broadcast-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .giants-broadcast-inner .giants-broadcast-img { display: block; } @media only screen and (max-width: 1023px) { .giants-broadcast-inner .giants-broadcast-img { width: 74.667vw; margin: 0 auto; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner .giants-broadcast-img { width: 44vw; margin: 0 auto 0; } } .giants-broadcast-inner .giants-broadcast-ttl { background: #283c78; color: #fff; font-weight: 700; } @media only screen and (max-width: 1023px) { .giants-broadcast-inner .giants-broadcast-ttl { display: block; margin: 10.667vw 2.667vw 0; padding: 1.333vw 2.667vw; font-size: 4vw; line-height: 1.3; text-align: center; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner .giants-broadcast-ttl { display: inline-block; margin: 5.5vw 6.5vw 0; padding: 0 1vw; font-size: 1.5vw; line-height: 2; } } @media only screen and (max-width: 1023px) { .giants-broadcast-inner .giants-broadcast-list { width: 77.333vw; margin: 5.333vw auto 0; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner .giants-broadcast-list { width: 41vw; margin: 2vw auto 0; } } .giants-broadcast-inner .giants-broadcast-list dt { display: flex; justify-content: center; align-items: center; background: #697ae0; color: #fff; font-weight: 500; line-height: 1; } @media only screen and (max-width: 1023px) { .giants-broadcast-inner .giants-broadcast-list dt { width: 22.133vw; height: 6.133vw; margin-top: 6.667vw; border-radius: 3.067vw; font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner .giants-broadcast-list dt { width: 8.3vw; height: 2vw; margin-top: 4vw; border-radius: 1vw; font-size: 1.4vw; } } .giants-broadcast-inner .giants-broadcast-list dd { color: #0f5cbf; font-weight: 700; line-height: 1.5; } @media only screen and (max-width: 1023px) { .giants-broadcast-inner .giants-broadcast-list dd { margin: 3.333vw 2.667vw 0; font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner .giants-broadcast-list dd { margin-top: 1.25vw; font-size: 1.4vw; } } .giants-broadcast-inner .giants-broadcast-caut { font-weight: normal; text-align: left; line-height: 1.5; } @media only screen and (max-width: 1023px) { .giants-broadcast-inner .giants-broadcast-caut { font-size: 2.667vw; margin: 1.333vw 4vw 0; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner .giants-broadcast-caut { font-size: 1vw; margin: 1vw 6.5vw 0; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner ul.giants-broadcast-caut { margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .giants-broadcast-inner p.giants-broadcast-caut { margin-top: 2vw; } } .p-city { background: rgb(240, 250, 255); } @media only screen and (max-width: 1023px) { .p-city .breadcrumb-list { width: 78.667vw; margin-left: 4vw; } } .p-city .breadcrumb-list li { white-space: nowrap; } .p-city .breadcrumb-list li:last-child { overflow: hidden; text-overflow: ellipsis; } .city-kv-bg { position: absolute; } .city-kv-bg.js-inshow { opacity: 0; } .city-kv-bg.js-inshow.is-show { animation: fadeUpAnime 0.5s forwards; } @media only screen and (max-width: 1023px) { .city-kv-bg.bg-right-top { right: -10vw; top: 18vw; width: 55.733vw; } } @media only screen and (min-width: 1024px) { .city-kv-bg.bg-right-top { right: 1.9vw; top: -0.25vw; width: 34.8vw; } } @media only screen and (max-width: 1023px) { .city-kv-bg.bg-left-bottom { bottom: 44.667vw; left: -9.6vw; width: 50.533vw; } } @media only screen and (min-width: 1024px) { .city-kv-bg.bg-left-bottom { bottom: 1vw; left: -1.5vw; width: 18.95vw; } } .city-kv-bg.bg-right-bottom { animation: rotateAnime 10s linear infinite; } @media only screen and (max-width: 1023px) { .city-kv-bg.bg-right-bottom { bottom: 81.333vw; right: -3.467vw; width: 17.6vw; } } @media only screen and (min-width: 1024px) { .city-kv-bg.bg-right-bottom { bottom: 18.75vw; right: 0; width: 10.75vw; } } .city-kv { margin: auto; position: relative; z-index: 5; } @media only screen and (max-width: 1023px) { .city-kv { width: 85.067vw; } } @media only screen and (min-width: 1024px) { .city-kv { max-width: 1390px; width: 87.421%; } } @media only screen and (max-width: 1023px) { .p-sub-city { clip-path: polygon(0 0, 100% 0%, 97% 100%, 0% 100%); line-height: 1.2; } } .p-title-area-city { white-space: nowrap; } .p-title-area-city * { font-size: 64px; } @media only screen and (max-width: 1023px) { .p-title-area-city * { font-size: 8.533vw; } } @media only screen and (min-width: 1024px) { .p-title-area-city * { font-size: 3.05vw; } } .city-outline { position: relative; text-align: center; } @media only screen and (max-width: 1023px) { .city-outline { padding: 4vw 0 0; } } @media only screen and (min-width: 1024px) { .city-outline { padding: 2vw 0 7vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-outline { padding: 40px 0 140px; } } .city-outline-bg { position: absolute; } .city-outline-bg.bg-left { animation: rotateAnime 10s linear infinite; } @media only screen and (max-width: 1023px) { .city-outline-bg.bg-left { left: -1.6vw; top: -16.667vw; width: 19.733vw; } } @media only screen and (min-width: 1024px) { .city-outline-bg.bg-left { left: 1.258%; top: -3.4vw; max-width: 185px; width: 11.635%; } } @media only screen and (max-width: 1023px) { .city-outline-bg.bg-right { right: -30vw; top: -29.333vw; width: 44.4vw; } } @media only screen and (min-width: 1024px) { .city-outline-bg.bg-right { max-width: 425px; top: -10vw; right: -11.692%; width: 26.73%; } } @media only screen and (max-width: 1023px) { .city-outline-title-area { margin-bottom: 8vw; } } @media only screen and (min-width: 1024px) { .city-outline-title-area { font-size: 1.8vw; margin: 0 auto 0.833em; width: fit-content; width: -moz-fit-content; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-outline-title-area { font-size: 36px; } } .city-outline-title { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.14em; } @media only screen and (max-width: 1023px) { .city-outline-title { font-size: 5.733vw; line-height: 1.581; } .city-outline-title .marker-sp { display: inline-block; position: relative; } .city-outline-title .marker-sp::before { background: linear-gradient(to right, rgba(111, 234, 160, 0.2) 0%, rgba(66, 81, 248, 0.2) 100%); bottom: 5%; content: ""; height: 35%; left: 0; position: absolute; width: 100%; } .city-outline-title .marker-sp::after { background: rgb(240, 250, 255); bottom: 0; content: ""; height: 90%; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 0; width: 100%; z-index: 10; } } @media only screen and (min-width: 1024px) { .city-outline-title { line-height: 1.3; margin-bottom: 0.333em; } .city-outline-title:nth-of-type(1) { text-align: left; } .city-outline-title:nth-of-type(2) { text-align: right; } .city-outline-title .marker-pc { display: inline-block; position: relative; } .city-outline-title .marker-pc::before { background: linear-gradient(to right, rgba(111, 234, 160, 0.2) 0%, rgba(66, 81, 248, 0.2) 100%); bottom: 5%; content: ""; height: 35%; left: 0; position: absolute; width: 100%; } .city-outline-title .marker-pc::after { background: rgb(240, 250, 255); bottom: 0; content: ""; height: 90%; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 0; width: 100%; z-index: 10; } } .city-outline-title .marker-text { position: relative; z-index: 1; } .city-outline-title .deco-01::before { background: url(../img/city/city_kirakira_01.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .city-outline-title .deco-01::before { height: 7.307vw; left: -10.133vw; top: -1.6vw; width: 7.84vw; } } @media only screen and (min-width: 1024px) { .city-outline-title .deco-01::before { height: 1.522em; left: -2.056em; top: 0; width: 1.633em; } } .city-outline-title .deco-02-pc::after { background: url(../img/city/city_kirakira_02.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 2; } @media only screen and (max-width: 1023px) { .city-outline-title .deco-02-pc::after { height: 7.04vw; right: -24.8vw; top: -2vw; width: 7.973vw; } } @media only screen and (min-width: 1024px) { .city-outline-title .deco-02-pc::after { height: 1.467em; right: -2.278em; top: 0; width: 1.661em; } } .city-outline-title .deco-02::before { background: url(../img/city/city_kirakira_02.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .city-outline-title .deco-02::before { height: 7.04vw; right: -24.8vw; top: -2vw; width: 7.973vw; } } @media only screen and (min-width: 1024px) { .city-outline-title .deco-02::before { height: 1.467em; right: -2.278em; top: 0; width: 1.661em; } } .city-outline-list { color: rgb(15, 92, 191); display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-align: left; } @media only screen and (max-width: 1023px) { .city-outline-list { font-size: 4.267vw; line-height: 1.563; margin: 0 4.267vw; } } @media only screen and (min-width: 1024px) { .city-outline-list { font-size: 1.4vw; line-height: 1.643; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-outline-list { font-size: 28px; } } .city-outline-list-txt a { text-decoration: underline; } .city-outline-list-item { display: flex; } .city-outline-list-item dt::after { content: "／"; margin: 0 0.5em; } @media only screen and (max-width: 1023px) { .city-outline-list-item { display: block; } } .city-outline-caution { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .city-outline-caution { width: 86.667vw; margin: 4vw auto 0; border-radius: 6.267vw; padding: 0.8vw; } } @media only screen and (min-width: 1024px) { .city-outline-caution { width: 40vw; margin: 1.5vw auto 0; border-radius: 1.5vw; padding: 0.4vw; } } .city-outline-caution-inr { background: #fff; font-weight: 500; line-height: 2; } @media only screen and (max-width: 1023px) { .city-outline-caution-inr { border-radius: 5.333vw; padding: 4vw 0; font-size: 3.2vw; } } @media only screen and (min-width: 1024px) { .city-outline-caution-inr { border-radius: 1.2vw; padding: 1.5vw 0; font-size: 1.2vw; } } .city-nav-area { background: rgb(255, 231, 17); } @media only screen and (max-width: 1023px) { .city-nav-area { padding: 3.2vw 0 3.467vw; margin: 10.667vw 0 0; } } @media only screen and (min-width: 1024px) { .city-nav-area { width: 69.7vw; padding: 1.55vw 0 1.65vw; border-radius: 1.5vw; margin: 3vw auto 0; } } .city-nav-area ul { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-flow: row wrap; flex-flow: row wrap; color: rgb(15, 92, 191); } @media only screen and (max-width: 1023px) { .city-nav-area ul { gap: 2.667vw 1.333vw; } } @media only screen and (min-width: 1024px) { .city-nav-area ul { gap: 1.2vw 2vw; } } .city-nav-area li { background: #fff url(../img/city/arw.svg) no-repeat; border-radius: 100vh; font-weight: 700; } @media only screen and (max-width: 1023px) { .city-nav-area li { width: 26.667vw; height: 14.667vw; box-shadow: 0.533vw 0.8vw 0px rgba(4, 0, 0, 0.2); border-radius: 2.667vw; font-size: 3.733vw; line-height: 4.133vw; background-position: center 90%; background-size: 1.467vw; padding-top: 2vw; } .city-nav-area li:nth-child(2) { width: 32vw; } .city-nav-area li:nth-child(n+4) { height: 9.333vw; } } @media only screen and (min-width: 1024px) { .city-nav-area li { -webkit-align-items: center; align-items: center; width: 20vw; height: 3.3vw; box-shadow: 0.2vw 0.3vw 0px rgba(4, 0, 0, 0.2); background-size: 0.55vw; background-position: 17.9vw center; } } .city-nav-area li.disable { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; box-shadow: none; background: rgb(230, 230, 230); } @media only screen and (max-width: 1023px) { .city-nav-area li.disable { -webkit-align-items: center; align-items: center; padding: 0; } } .city-nav-area a { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: 100%; height: 100%; color: rgb(15, 92, 191); } @media only screen and (min-width: 1024px) { .city-nav-area a { -webkit-align-items: center; align-items: center; } .city-nav-area a:hover { opacity: 0.8; } } .city-overview { position: relative; } @media only screen and (max-width: 1023px) { .city-overview { padding: 18vw 0 31.2vw; } } @media only screen and (min-width: 1024px) { .city-overview { padding: 0 0 16.25vw; } } .city-overview .city-overview-inner { margin: 0 auto; position: relative; z-index: 5; color: rgb(15, 92, 191); font-weight: 700; } @media only screen and (max-width: 1023px) { .city-overview .city-overview-inner { background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 0.8) 1%, rgba(255, 255, 255, 0.8) 99%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%); width: 85.067vw; height: 533.333vw; padding: 8vw 9.333vw 0; } .city-overview .city-overview-inner .city-ov-lead { font-size: 4vw; line-height: 5.333vw; margin-bottom: 0.667vw; } .city-overview .city-overview-inner .city-ov-sub { font-size: 3.733vw; margin-bottom: 1.333vw; line-height: 1.6; } .city-overview .city-overview-inner .city-ov-sub span { display: inline-block; margin-left: 9.333vw; } .city-overview .city-overview-inner .city-ov-note { font-size: 2.933vw; line-height: 5.733vw; margin-top: 6.7vw; display: inline-block; } } @media only screen and (min-width: 1024px) { .city-overview .city-overview-inner { background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 2%, rgba(255, 255, 255, 0.8) 5%, rgba(255, 255, 255, 0.8) 95%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%); width: 55vw; height: 63vw; padding: 3vw 0 0 5vw; } .city-overview .city-overview-inner .city-ov-lead { width: 92%; font-size: 1.1vw; margin-bottom: 0.25vw; line-height: 1.4; } .city-overview .city-overview-inner .city-ov-sub { font-size: 1vw; margin-bottom: 1.75vw; } .city-overview .city-overview-inner .city-ov-note { font-size: 0.7vw; } } .city-overview .city-overview-inner .city-ov-lead { font-weight: 700; text-align: center; } .city-overview .city-overview-inner .city-ov-sub { font-weight: 700; } .city-overview .city-overview-inner .city-ov-point { display: flex; list-style-type: none; } @media only screen and (max-width: 1023px) { .city-overview .city-overview-inner .city-ov-point { width: 100%; margin-top: 6.667vw; column-gap: 4vw; flex-wrap: wrap; justify-content: center; } } @media only screen and (min-width: 1024px) { .city-overview .city-overview-inner .city-ov-point { width: 90%; margin-top: 3vw; column-gap: 0.5vw; } } .city-overview .city-overview-inner .city-ov-point li { text-align: center; } @media only screen and (max-width: 1023px) { .city-overview .city-overview-inner .city-ov-point li { width: 46%; } } @media only screen and (min-width: 1024px) { .city-overview .city-overview-inner .city-ov-point li img { width: 85%; } } .city-overview .city-overview-inner .city-ov-section { display: flex; width: 90%; justify-content: space-between; } @media only screen and (max-width: 1023px) { .city-overview .city-overview-inner .city-ov-section { margin-top: 8vw; flex-direction: column; } } @media only screen and (min-width: 1024px) { .city-overview .city-overview-inner .city-ov-section { margin-top: 3vw; column-gap: 0.25vw; } } @media only screen and (max-width: 1023px) { .city-overview .city-overview-inner .city-ov-vol { width: 66.667vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-overview .city-overview-inner .city-ov-vol { width: 15vw; } } .city-overview .city-overview-inner .city-ov-vol-ttl { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #1A2442; color: #fff; font-weight: 700; } @media only screen and (max-width: 1023px) { .city-overview .city-overview-inner .city-ov-vol-ttl { width: 24vw; height: 7.2vw; font-size: 4.8vw; border-radius: calc(7.2vw / 2); } } @media only screen and (min-width: 1024px) { .city-overview .city-overview-inner .city-ov-vol-ttl { width: 5.4vw; height: 1.6vw; font-size: 1.1vw; border-radius: calc(1.6vw / 2); } } .city-overview .city-overview-inner .city-ov-vol-date { text-align: center; line-height: 2; color: #1A2442; } .city-overview .city-overview-inner .city-ov-caut { text-align: center; } @media only screen and (max-width: 1023px) { .city-overview .city-overview-inner .city-ov-caut { margin-top: 4vw; line-height: 1.3; } } @media only screen and (min-width: 1024px) { .city-overview .city-overview-inner .city-ov-caut { font-size: 1vw; margin: 0 3vw 0 0; } } .city-overview .city-overview-inner .city-ov-caut li { padding-left: 1em; text-indent: -1em; padding-bottom: 0.4em; } .city-overview .city-overview-frm { position: absolute; top: 0; left: 0; width: 100%; } @media only screen and (max-width: 1023px) { .city-overview .city-overview-frm { width: 80.8vw; height: 533.333vw; } } @media only screen and (min-width: 1024px) { .city-overview .city-overview-frm { width: 53.4vw; height: 50vw; } } .city-overview .city-overview-frm-bg { position: absolute; top: 0; fill: none; opacity: 0.6; stroke-linecap: round; } @media only screen and (max-width: 1023px) { .city-overview .city-overview-frm-bg { stroke: url(#cityOv-gradient-sp); width: 80.8vw; height: 533.333vw; left: 2.267vw; stroke-width: 1.067vw; } } @media only screen and (min-width: 1024px) { .city-overview .city-overview-frm-bg { stroke: url(#cityOv-gradient); stroke-width: 8px; stroke-miterlimit: 10; left: 0.85vw; } } #cityOv-gradient-stop01 { animation: cityOvStop1 1s ease-in-out infinite alternate; } #cityOv-gradient-stop02 { animation: cityOvStop2 1s ease-in-out infinite alternate; } @keyframes cityOvStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes cityOvStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .city-ov-bg { position: absolute; } .city-ov-bg.js-inshow { opacity: 0; } .city-ov-bg.js-inshow.is-show { animation: fadeUpAnime 0.5s forwards; } @media only screen and (max-width: 1023px) { .city-ov-bg.bg-left-top { left: -13.333vw; top: 2.533vw; width: 46.133vw; } } @media only screen and (min-width: 1024px) { .city-ov-bg.bg-left-top { left: 1.05vw; top: -6.3vw; width: 17.3vw; } } @media only screen and (max-width: 1023px) { .city-ov-bg.bg-right-top { display: none; } } @media only screen and (min-width: 1024px) { .city-ov-bg.bg-right-top { right: 5.5vw; top: 4vw; width: 2.9vw; } } @media only screen and (max-width: 1023px) { .city-ov-bg.bg-left-bottom { width: 6.267vw; height: 6.533vw; left: 9.333vw; top: 144vw; } } @media only screen and (min-width: 1024px) { .city-ov-bg.bg-left-bottom { top: 29.65vw; left: 6.4vw; width: 2.9vw; } } .city-ov-bg.bg-right-bottom { z-index: 4; } .city-ov-bg.bg-right-bottom::after { content: ""; display: block; background: url(../img/city/dot_b.svg) no-repeat center 0/100%; position: absolute; } @media only screen and (max-width: 1023px) { .city-ov-bg.bg-right-bottom { bottom: 16vw; right: -9.333vw; width: 34.667vw; } .city-ov-bg.bg-right-bottom::after { width: 6.267vw; height: 6.533vw; bottom: -10.667vw; right: 11.333vw; } } @media only screen and (min-width: 1024px) { .city-ov-bg.bg-right-bottom { top: 30.85vw; right: 6.2vw; width: 18vw; } .city-ov-bg.bg-right-bottom::after { width: 2.95vw; height: 3vw; bottom: 0.6vw; right: 1.1vw; } } .city-tickets { background: rgb(221, 244, 252); position: relative; } @media only screen and (max-width: 1023px) { .city-tickets { padding: 6vw 0 36vw; } } @media only screen and (min-width: 1024px) { .city-tickets { padding: 0 0 21vw; } } .city-tickets::before { border-color: transparent transparent rgb(221, 244, 252); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .city-tickets::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .city-tickets::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-tickets::before { border-bottom-width: 395px; top: -395px; } } .city-tickets .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#cityTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #cityTickets-gradient-stop01 { animation: cityTicketsStop1 1s ease-in-out infinite alternate; } #cityTickets-gradient-stop02 { animation: cityTicketsStop2 1s ease-in-out infinite alternate; } @keyframes cityTicketsStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes cityTicketsStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .city-tickets-bg { position: absolute; } @media only screen and (max-width: 1023px) { .city-tickets-bg.bg-left-top { left: -12.667vw; top: 14.667vw; width: 30.933vw; } } @media only screen and (min-width: 1024px) { .city-tickets-bg.bg-left-top { left: -1.75vw; top: -3.5vw; width: 17.5vw; } } @media only screen and (max-width: 1023px) { .city-tickets-bg.bg-right-top { right: -20vw; top: 26.667vw; width: 45.067vw; } } @media only screen and (min-width: 1024px) { .city-tickets-bg.bg-right-top { right: -3.25vw; top: -5vw; width: 20vw; } } @media only screen and (max-width: 1023px) { .city-tickets-bg.bg-squera { left: 6vw; top: 59.333vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .city-tickets-bg.bg-squera { left: 5vw; top: 15vw; width: 2.75vw; } } @media only screen and (max-width: 1023px) { .city-tickets-bg.bg-right-bottom { bottom: 61.333vw; right: -19.733vw; width: 45.2vw; } } @media only screen and (min-width: 1024px) { .city-tickets-bg.bg-right-bottom { bottom: 1.5vw; right: 6vw; width: 2.75vw; } } .tickets-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .tickets-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 12vw; } } @media only screen and (min-width: 1024px) { .tickets-text { font-size: 1.5vw; line-height: 1.533; margin-bottom: 2em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tickets-text { font-size: 30px; } } .tickets-inner { margin: 0 auto; position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .tickets-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .tickets-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .tickets-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .tickets-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .tickets-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .tickets-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .tickets-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .tickets-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .tickets-inner .tickets-sub { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-sub { width: 69.867vw; height: 8.533vw; font-size: 3.733vw; border-radius: 4.267vw; margin-bottom: 6.267vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-sub { width: 29.2vw; height: 3.2vw; font-size: 1.4vw; border-radius: 1.6vw; margin-bottom: 2.25vw; } } .tickets-inner .tickets-sub.sec { margin-top: 5vw; } .tickets-inner .tickets-ex { text-align: center; color: #0f5cbf; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; } .tickets-inner .tickets-ex span { display: inline-block; position: relative; margin: 0 auto; } .tickets-inner .tickets-ex span::before { content: ""; width: 100%; height: 35%; background: linear-gradient(to right, rgb(222, 250, 233) 0%, rgb(212, 215, 254) 100%); position: absolute; bottom: 5%; left: 0; z-index: -1; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-ex { font-size: 3.467vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-ex { font-size: 1.4vw; } } .tickets-inner .tickets-caut { text-align: center; font-weight: normal; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-caut { font-size: 2.933vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-caut { font-size: 0.9vw; margin-bottom: 1vw; } } .tickets-inner .tickets-img { display: block; margin: 0 auto; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-img { width: 74.133vw; margin-top: 4vw; margin-bottom: 4vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-img { width: 50.545%; margin-bottom: 1vw; } } .tickets-inner .tickets-pr { background: linear-gradient(to right, rgb(102, 201, 175) 0%, rgb(66, 81, 245) 100%); } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr { width: 74.133vw; margin: 7.333vw auto 0; padding: 0.4vw; border-radius: 2.133vw; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr { width: 45vw; margin: 2.75vw auto 0; padding: 0.15vw; border-radius: 0.8vw; font-size: 0.8vw; } } .tickets-inner .tickets-pr-inr { background: #fff; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr-inr { border-radius: 2vw; padding: 4vw 0; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr-inr { border-radius: 0.75vw; padding: 1.5vw 0; } } .tickets-inner .tickets-pr-ttl { text-align: center; font-weight: 700; color: #0f5cbf; letter-spacing: 0.1em; position: relative; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr-ttl { font-size: 3.467vw; margin-bottom: 4.267vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr-ttl { font-size: 1.2vw; margin-bottom: 1vw; } } .tickets-inner .tickets-pr-ttl span { display: block; font-weight: normal; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr-ttl span { font-size: 2.4vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr-ttl span { font-size: 0.9vw; margin-top: 1vw; } } .tickets-inner .tickets-pr-ttl::after { content: ""; background: linear-gradient(to right, rgb(102, 201, 175) 0%, rgb(66, 81, 245) 100%); position: absolute; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr-ttl::after { width: 67.2vw; height: 0.4vw; bottom: -1.333vw; left: calc(50% - (67.2vw / 2)); } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr-ttl::after { width: 43.2vw; height: 0.15vw; bottom: -10px; left: calc(50% - (43.2vw / 2)); } } .tickets-inner .tickets-pr-lst { font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr-lst { font-size: 3.467vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr-lst { font-size: 1.2vw; } } .tickets-inner .tickets-pr-lst p { text-align: center; } .tickets-inner .tickets-pr-lst p span { font-size: 0.8em; } .tickets-inner .tickets-pr-lst span.caut { display: block; text-align: center; font-size: 0.8em; font-weight: normal; line-height: 1.3; margin-top: 1vw; } .tickets-inner .tickets-pr-lst ul { margin: 0 auto; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr-lst ul { width: 69.333vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr-lst ul { width: 31vw; } } .tickets-inner .tickets-pr-lst ul li { display: flex; justify-content: space-between; background: url("../img/city/tickets_dot.png") repeat-x; background-position: center center; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr-lst ul li { background-size: 0.933vw auto; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr-lst ul li { background-size: 0.35vw auto; } } .tickets-inner .tickets-pr-lst ul li strong { background: #fff; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr-lst ul li strong { padding: 1.867vw 1.867vw 1.867vw 0; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr-lst ul li strong { padding: 0.7vw 0.7vw 0.7vw 0; } } .tickets-inner .tickets-pr-lst ul li em { background: #fff; } @media only screen and (max-width: 1023px) { .tickets-inner .tickets-pr-lst ul li em { padding: 1.867vw 0 1.867vw 1.867vw; } } @media only screen and (min-width: 1024px) { .tickets-inner .tickets-pr-lst ul li em { padding: 0.7vw 0 0.7vw 0.7vw; } } .tickets-inner .tickets-pr-lst ul li em span { font-size: 0.8em; } .city-attraction { background: rgb(255, 250, 207); position: relative; } @media only screen and (max-width: 1023px) { .city-attraction { padding: 6vw 0 8vw; } } @media only screen and (min-width: 1024px) { .city-attraction { padding: 0; } } .city-attraction::before { border-color: transparent transparent rgb(255, 250, 207); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .city-attraction::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .city-attraction::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-attraction::before { border-bottom-width: 395px; top: -395px; } } .city-attraction::after { border-color: rgb(255, 250, 207) transparent transparent; border-style: solid; content: ""; display: block; height: 0; margin-top: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .city-attraction::after { border-right-width: 94.667vw; border-top-width: 23.467vw; bottom: -23.467vw; } } @media only screen and (min-width: 1024px) { .city-attraction::after { border-right-width: 78vw; border-top-width: 19.75vw; bottom: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-attraction::after { border-top-width: 395px; bottom: -395px; } } .city-attraction .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#cityTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #attraction-gradient-stop01 { animation: attractionStop1 5s ease-in-out infinite alternate; } #attraction-gradient-stop02 { animation: attractionStop2 5s ease-in-out infinite alternate; } @keyframes attractionStop1 { 0% { stop-color: #8996e8; } 100% { stop-color: #42b7ec; } } @keyframes attractionStop2 { 100% { stop-color: #8996e8; } 0% { stop-color: #42b7ec; } } .city-attraction-bg { position: absolute; } @media only screen and (max-width: 1023px) { .city-attraction-bg.bg-left-top { left: -18.667vw; top: 21.333vw; width: 36.933vw; } } @media only screen and (min-width: 1024px) { .city-attraction-bg.bg-left-top { left: -2.75vw; top: -0.5vw; width: 17vw; } } @media only screen and (max-width: 1023px) { .city-attraction-bg.bg-right-top { right: -19.333vw; top: -4vw; width: 40.4vw; } } @media only screen and (min-width: 1024px) { .city-attraction-bg.bg-right-top { right: -0.5vw; top: -14vw; width: 18.9vw; } } .city-attraction-bg.bg-left-square { z-index: 2; } @media only screen and (max-width: 1023px) { .city-attraction-bg.bg-left-square { left: 0.667vw; bottom: 29.333vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .city-attraction-bg.bg-left-square { left: 3vw; bottom: 3.25vw; width: 2.8vw; } } .city-attraction-bg.bg-left-bottom { z-index: 2; } @media only screen and (max-width: 1023px) { .city-attraction-bg.bg-left-bottom { left: -7.333vw; bottom: -1.333vw; width: 30.4vw; } } @media only screen and (min-width: 1024px) { .city-attraction-bg.bg-left-bottom { left: 5vw; bottom: -4.75vw; width: 14.25vw; } } .attraction-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .attraction-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .attraction-text { font-size: 1.5vw; line-height: 1.533; margin-bottom: 2em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .attraction-text { font-size: 30px; } } .attraction-inner { background: #fff; margin: 0 auto; text-align: center; position: relative; z-index: 2; } @media only screen and (max-width: 1023px) { .attraction-inner { width: 85.067vw; border-radius: 6.667vw; padding: 10.667vw 0 5.333vw; } } @media only screen and (min-width: 1024px) { .attraction-inner { width: 55vw; border-radius: 2.5vw; padding: 5vw 0 2.5vw; } } .attraction-inner .attraction-wrap { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; justify-content: center; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-wrap { gap: 4vw 0; margin-bottom: 10.667vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-wrap { gap: 3.35vw 4vw; margin-bottom: 3.5vw; } } .attraction-inner .attraction-item { position: relative; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item:not(:first-of-type) { margin-top: 2.667vw; } } .attraction-inner .attraction-item dl { text-align: center; overflow: hidden; background: #0F5CBF; } .attraction-inner .attraction-item dl dt { color: #fff; background: #0F5CBF; font-weight: 500; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item dl { border-radius: 1.333vw; width: 69.333vw; margin: auto; } .attraction-inner .attraction-item dl dt { font-size: 4vw; padding: 2.4vw 0; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item dl { width: 22vw; border-radius: 0.5vw; } .attraction-inner .attraction-item dl dt { font-size: 1.2vw; padding: 0.6vw; } } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item:first-of-type dl { width: 80vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item:first-of-type dl { width: 35vw; } } .attraction-inner .attraction-item-ex { font-weight: 900; color: #fff; line-height: 1.3; background: linear-gradient(to right, rgb(250, 178, 252) 0%, rgb(157, 167, 236) 100%); } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-ex { width: 80.667vw; margin: 2.667vw auto; padding: 2.667vw 0; font-size: 4vw; line-height: 1.5; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-ex { width: 35vw; margin: 1vw auto; padding: 1vw 0; font-size: 1.6vw; } } .attraction-inner .attraction-item-talent { position: relative; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-talent { width: 63.333vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-talent { width: 22vw; } } .attraction-inner .attraction-item-slider { box-sizing: border-box; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-slider { margin: 2.667vw 0.667vw 0; padding: 1.333vw; border: 0.8vw solid #1152b7; border-radius: 2.667vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-slider { margin: 1vw 0.25vw 0; padding: 0.5vw; border: 0.3vw solid #1152b7; border-radius: 1vw; } } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item:first-of-type .attraction-item-talent { width: 80vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item:first-of-type .attraction-item-talent { width: 35vw; } } .attraction-inner .attraction-item .marker-text { text-shadow: 1px 1px 1px rgb(40, 60, 120), -1px 1px 1px rgb(40, 60, 120), 1px -1px 1px rgb(40, 60, 120), -1px -1px 1px rgb(40, 60, 120), 1px 0px 1px rgb(40, 60, 120), 0px 1px 1px rgb(40, 60, 120), -1px 0px 1px rgb(40, 60, 120), 0px -1px 1px rgb(40, 60, 120); position: relative; z-index: 1; } .attraction-inner .attraction-item .prev-arrow, .attraction-inner .attraction-item .next-arrow { position: absolute; z-index: 10; cursor: pointer; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item .prev-arrow, .attraction-inner .attraction-item .next-arrow { width: 4vw; height: 5.333vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item .prev-arrow, .attraction-inner .attraction-item .next-arrow { width: 20px; height: 30px; } } .attraction-inner .attraction-item .prev-arrow { background: url(../img/city/arw.svg) no-repeat; background-size: contain; transform: rotate(90deg); } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item .prev-arrow { left: -5.6vw; top: 13.333vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item .prev-arrow { left: -1.5vw; top: 5vw; } } .attraction-inner .attraction-item .next-arrow { background: url(../img/city/arw.svg) no-repeat; background-size: contain; transform: rotate(-90deg); } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item .next-arrow { right: -5.6vw; top: 13.333vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item .next-arrow { right: -1.5vw; top: 5vw; } } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item:first-of-type .prev-arrow, .attraction-inner .attraction-item:first-of-type .next-arrow { top: 26.667vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item:first-of-type .prev-arrow, .attraction-inner .attraction-item:first-of-type .next-arrow { top: 13vw; } } .attraction-inner .attraction-item .slick-disabled { display: none !important; } .attraction-inner .attraction-item-caut { text-align: center; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-caut { margin-top: 1.333vw; font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-caut { margin-top: 0.5vw; font-size: 1vw; } } .attraction-inner .attraction-item-caut.lst { text-align: left; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-caut.lst { margin: 1.333vw 4vw 0; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-caut.lst { margin: 0.5vw 1.5vw 0; } } .attraction-inner .attraction-item-caut.lst li { padding-left: 1em; text-indent: -1em; margin-bottom: 0.3em; } .attraction-inner .attraction-item-caut.bold { font-weight: 700; font-size: 1.2em; } .attraction-inner .attraction-item-soon { width: 100%; text-align: center; position: relative; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-soon { margin: 4vw 0; } } .attraction-inner .attraction-item-soon span { display: inline-block; color: #697AE0; font-weight: 700; letter-spacing: 0.05em; position: relative; z-index: 1; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-soon span { font-size: 4vw; margin-bottom: 1.867vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-soon span { font-size: 1.7vw; margin-bottom: 0.7vw; } } .attraction-inner .attraction-item-soon span::before { content: ""; width: 100%; height: 35%; background: linear-gradient(to right, rgb(250, 209, 252) 0%, rgb(197, 203, 242) 100%); position: absolute; bottom: -5%; left: 0; z-index: -1; } .attraction-inner .attraction-item-soon::after { content: ""; position: absolute; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-soon::after { background: url("../img/city/goods-date-bg_sp.png") no-repeat; width: 77.867vw; height: 14.933vw; top: calc(50% - (14.933vw / 2)); left: calc(50% - (77.867vw / 2)); background-size: contain; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-soon::after { background: url("../img/city/goods-soon-bg.png") no-repeat; width: 42.5vw; height: 7.1vw; top: calc(50% - (7.1vw / 2)); left: calc(50% - (42.5vw / 2)); background-size: contain; } } .attraction-inner .attraction-item-cap { width: 100%; color: #0F5CBF; text-align: center; font-weight: 700; line-height: 1.3; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-cap { font-size: 3.467vw; margin-top: 8vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-cap { font-size: 1.5vw; margin-top: 3vw; } } .attraction-inner .attraction-item-bgm { background: #0F5CBF; font-weight: 500; color: #fff; display: flex; justify-content: center; align-items: center; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-bgm { width: 100%; margin-top: 5.333vw; height: 5.333vw; border-radius: 2.667vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-bgm { width: 100%; margin-top: 2vw; height: 2vw; border-radius: 1vw; } } .attraction-inner .attraction-item-chara { position: absolute; text-align: center; } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-chara { width: 29.333vw; right: -13.333vw; bottom: 4.8vw; } } @media only screen and (max-width: 1023px) { .attraction-inner .attraction-item-chara.sakuramiko { bottom: -5.333vw; } } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-chara { width: 10vw; right: -3vw; bottom: 2vw; } } .attraction-inner .attraction-item-chara span { display: block; text-align: center; font-weight: 500; } @media only screen and (min-width: 1024px) { .attraction-inner .attraction-item-chara span { margin-top: 0.3vw; font-size: 0.8vw; } } .attraction-inner .att-note { width: fit-content; width: -moz-fit-content; margin: 0 auto; position: relative; font-weight: 700; letter-spacing: 0.1em; z-index: 2; } @media only screen and (max-width: 1023px) { .attraction-inner .att-note { font-size: 4.533vw; line-height: 7.467vw; } .attraction-inner .att-note span { position: relative; } .attraction-inner .att-note span::after { content: ""; display: block; width: 110%; height: 30%; background: linear-gradient(90deg, rgb(250, 178, 252) 0%, rgb(157, 167, 236) 100%); opacity: 0.5; position: absolute; left: -5%; bottom: 0; z-index: -1; } } @media only screen and (min-width: 1024px) { .attraction-inner .att-note { font-size: 1.3vw; } .attraction-inner .att-note::after { content: ""; display: block; width: 100%; height: 40%; background: linear-gradient(90deg, rgb(250, 178, 252) 0%, rgb(157, 167, 236) 100%); opacity: 0.5; position: absolute; left: 0; bottom: 0; z-index: -1; } } .city-goods { position: relative; } @media only screen and (max-width: 1023px) { .city-goods { padding: 28vw 0 26.667vw; } } @media only screen and (min-width: 1024px) { .city-goods { padding: 15vw 0 20vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-goods { padding: 300px 0 200px; } } .city-goods .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#cityTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #goods-gradient-stop01 { animation: goodsStop1 5s ease-in-out infinite alternate; } #goods-gradient-stop02 { animation: goodsStop2 5s ease-in-out infinite alternate; } @keyframes goodsStop1 { 0% { stop-color: #fc84a4; } 100% { stop-color: #69b1f8; } } @keyframes goodsStop2 { 100% { stop-color: #fc84a4; } 0% { stop-color: #69b1f8; } } @media only screen and (max-width: 1023px) { .goods-text.city-goods-text { margin-bottom: 18.667vw; } } @media only screen and (min-width: 1024px) { .goods-text.city-goods-text { margin-bottom: 4.75vw; } } .city-goods-bg { position: absolute; } .city-goods-bg.bg-left-top::after { content: ""; display: block; background: url(../img/city/dot_p.svg) no-repeat center 0/100%; position: absolute; } @media only screen and (max-width: 1023px) { .city-goods-bg.bg-left-top { left: -13.333vw; top: 88vw; width: 26.133vw; } } @media only screen and (min-width: 1024px) { .city-goods-bg.bg-left-top { left: 0.5vw; top: 31.5vw; width: 16.3vw; } .city-goods-bg.bg-left-top::after { width: 2.95vw; height: 3vw; bottom: -6.1vw; left: 5.1vw; } } @media only screen and (max-width: 1023px) { .city-goods-bg.bg-right-top { right: -9.333vw; top: 0vw; width: 27.067vw; } } @media only screen and (min-width: 1024px) { .city-goods-bg.bg-right-top { right: -0.25vw; top: 4.5vw; width: 15vw; } } @media only screen and (max-width: 1023px) { .city-goods-bg.bg-left-bottom { top: 185.267vw; left: 10.4vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .city-goods-bg.bg-left-bottom { top: 69vw; left: 16.5vw; width: 2.9vw; } } .city-goods-bg.bg-right-bottom { z-index: 2; } @media only screen and (max-width: 1023px) { .city-goods-bg.bg-right-bottom { top: 176.267vw; right: -4.667vw; width: 30.533vw; } } @media only screen and (min-width: 1024px) { .city-goods-bg.bg-right-bottom { bottom: 15vw; right: 9.5vw; width: 14.3vw; } } .goods-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .goods-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 10.667vw; } } @media only screen and (min-width: 1024px) { .goods-text { font-size: 1.4vw; line-height: 1.643; margin-bottom: 2.857em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .goods-text { font-size: 28px; } } @media only screen and (max-width: 1023px) { .city-goods .l-main-deco.left-bottom { bottom: -5.333vw; } } @media only screen and (min-width: 1024px) { .city-goods .l-main-deco.left-bottom { left: -4.717%; margin-bottom: -1.5vw; } } @media only screen and (max-width: 1023px) { .city-goods .l-main-deco.right-bottom { bottom: -12.667vw; } } @media only screen and (min-width: 1024px) { .city-goods .l-main-deco.right-bottom { margin-bottom: -5vw; } } .city-goods-inner { margin: 0 auto; position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .city-goods-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .city-goods-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .city-goods-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .city-goods-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .city-goods-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .city-goods-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .city-goods-inner .city-goods-sub { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-sub { width: 69.867vw; height: 8.533vw; font-size: 3.733vw; border-radius: 4.267vw; margin-bottom: 6.267vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-sub { width: 29.2vw; height: 3.2vw; font-size: 1.4vw; border-radius: 1.6vw; margin-bottom: 2.25vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-sub:last-of-type { margin-top: 4vw; } } .city-goods-inner .city-goods-sub.sec { margin-top: 5vw; } .city-goods-inner .city-goods-date { text-align: center; } .city-goods-inner .city-goods-date span { display: inline-block; color: #697AE0; font-weight: 700; letter-spacing: 0.1em; position: relative; z-index: 1; } .city-goods-inner .city-goods-date span::before { content: ""; width: 100%; height: 35%; background: linear-gradient(to right, rgb(250, 209, 252) 0%, rgb(197, 203, 242) 100%); position: absolute; bottom: -5%; left: 0; z-index: -1; } .city-goods-inner .city-goods-date span::after { content: ""; position: absolute; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-date span::after { background: url("../img/city/goods-date-bg_sp.png") no-repeat; width: 77.867vw; height: 14.933vw; top: calc(50% - (14.933vw / 2)); left: calc(50% - (77.867vw / 2)); background-size: contain; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-date span::after { background: url("../img/city/goods-date-bg.png") no-repeat; width: 33.5vw; height: 5.6vw; top: calc(50% - (5.6vw / 2)); left: calc(50% - (33.5vw / 2)); background-size: contain; } } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-date span { font-size: 4.533vw; margin-bottom: 1.867vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-date span { font-size: 2.05vw; margin-bottom: 0.7vw; } } .city-goods-inner .city-goods-place { text-align: center; } .city-goods-inner .city-goods-place span { display: inline-block; color: #283C78; font-weight: 700; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-place span { margin-top: 4vw; margin-bottom: 4vw; padding: 1.867vw; border: 0.267vw solid #283C78; font-size: 3.467vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-place span { margin-top: 1.5vw; margin-bottom: 1.5vw; padding: 0.7vw; border: 0.1vw solid #283C78; font-size: 1.3vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-shop, .city-goods-inner .city-goods-order { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } } .city-goods-inner .city-goods-shop dt, .city-goods-inner .city-goods-order dt { color: #283C78; font-weight: 700; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-shop dt, .city-goods-inner .city-goods-order dt { margin-top: 4vw; font-size: 3.467vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-shop dt, .city-goods-inner .city-goods-order dt { margin-top: 1.5vw; font-size: 1.2vw; } } .city-goods-inner .city-goods-shop dt span, .city-goods-inner .city-goods-order dt span { display: inline-block; text-align: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-shop dt span, .city-goods-inner .city-goods-order dt span { width: 100%; padding: 1.867vw; border: 0.267vw solid #283C78; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-shop dt span, .city-goods-inner .city-goods-order dt span { width: 100%; padding: 0.7vw; border: 0.1vw solid #283C78; } } .city-goods-inner .city-goods-shop dd, .city-goods-inner .city-goods-order dd { line-height: 1.5; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-shop dd, .city-goods-inner .city-goods-order dd { margin-top: 1.333vw; font-size: 3.467vw; text-align: center; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-shop dd, .city-goods-inner .city-goods-order dd { margin-top: 1.5vw; font-size: 1.2vw; } } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-shop { width: 90%; margin: 4vw auto; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-shop { width: 60%; margin: 1.5vw auto; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-shop dd { width: 75%; } } .city-goods-inner .city-goods-order { width: 90%; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-order { padding: 0 2.667vw 4vw; margin: 4vw auto; border: 0.267vw solid #283C78; border-radius: 4vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-order { padding: 0 3vw 1.5vw; margin: 1.5vw auto; border: 0.1vw solid #283C78; border-radius: 1.5vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-order dt { width: 7em; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-order dd { width: 77%; } } .city-goods-inner .city-goods-map { width: 90%; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-map { margin: 4vw auto; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-map { margin: 1.5vw auto; } } .city-goods-inner .city-goods-ex { text-align: center; font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-ex { font-size: 3.733vw; margin-bottom: 1.867vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-ex { font-size: 1.4vw; margin-bottom: 0.7vw; } } .city-goods-inner .city-goods-ex.ind { padding-left: 5.5em; text-indent: -5.5em; } .city-goods-inner .city-goods-caut { font-weight: normal; line-height: 1.4; text-align: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-caut { font-size: 2.933vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-caut { font-size: 0.9vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-caut:last-of-type { text-align: center; } } .city-goods-inner p.city-goods-caut { margin-top: 1em; } .city-goods-inner p.city-goods-caut a { text-decoration: underline; } .city-goods-inner p.city-goods-caut a:hover { text-decoration: none; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-btn { width: 68vw; margin: 8vw auto 0; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-btn { width: 39.85vw; margin: 3.5vw auto 0; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-goods-inner .city-goods-btn { font-size: 34px; } } .city-goods-inner .city-goods-btn-lnk, .city-goods-inner .city-goods-btn-soon { display: block; position: relative; color: #fff; background-color: #283C78; text-align: center; width: 100%; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-btn-lnk, .city-goods-inner .city-goods-btn-soon { height: 15.733vw; margin: 2vw auto 0; border-radius: 9.333vw; font-size: 4vw; line-height: 15.733vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-btn-lnk, .city-goods-inner .city-goods-btn-soon { width: 39.85vw; height: 5.5vw; font-size: 1.7vw; line-height: 5.5vw; border-radius: 2.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-goods-inner .city-goods-btn-lnk, .city-goods-inner .city-goods-btn-soon { font-size: 30px; } } .city-goods-inner .city-goods-btn-lnk::before, .city-goods-inner .city-goods-btn-soon::before { border: solid #fff; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-btn-lnk::before, .city-goods-inner .city-goods-btn-soon::before { width: 66.4vw; height: 13.867vw; left: 0.8vw; top: 0.8vw; border-radius: 6.8vw; border: 0.133vw solid #fff; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-btn-lnk::before, .city-goods-inner .city-goods-btn-soon::before { width: 39.45vw; height: 5.1vw; left: 0.2vw; top: 0.2vw; border-radius: 1.7em; border: 0.05vw solid #fff; } } .city-goods-inner .city-goods-btn-lnk { background-color: #283C78; } .city-goods-inner .city-goods-btn-lnk::after { content: ""; border: 0; border-top: solid 2px #fff; border-right: solid 2px #fff; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-btn-lnk::after { width: 1.867vw; height: 1.867vw; right: 5.333vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-btn-lnk::after { width: 0.7vw; height: 0.7vw; right: 2vw; } } .city-goods-inner .city-goods-btn-soon { background-color: #666666; } .city-goods-inner .city-goods-btn-soon::after { content: "coming soon"; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-btn-soon::after { bottom: 2.667vw; right: calc(50% - 3em); font-size: 3.2vw; line-height: 1; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-btn-soon::after { top: 0; right: 5%; font-size: 1.1vw; } } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-btn-soon .btn-text { display: block; line-height: 10vw; } } .city-goods-inner .city-goods-btn-text { font-weight: 700; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-btn-text { height: 16vw; font-size: 4.533vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-btn-text { height: 3.667em; font-size: 1.7vw; } } .city-goods-inner .city-goods-emp { color: #283C78; } .city-goods-inner .city-goods-emp p { text-align: left; } .city-goods-inner .city-goods-emp .city-goods-caut { text-align: left; margin-left: 1em; text-indent: -1em; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-emp { width: 74.667vw; margin: 0 auto 1.333vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-emp { width: 42vw; margin: 0 auto; } } .city-goods-inner .city-goods-item { border-top: 1px solid #697AE0; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item:last-of-type { margin-bottom: 8vw; } } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item { font-size: 2.133vw; width: 80vw; margin: 7.333vw auto 0; padding-top: 4vw; padding-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item { font-size: 0.8vw; width: 90%; margin: 3.438em auto; padding-top: 1.875em; padding-bottom: 0.625em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-goods-inner .city-goods-item { font-size: 16px; } } .city-goods-inner .city-goods-item-ttl { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-ttl { font-size: 3.733vw; width: 69.867vw; height: 8.533vw; margin-bottom: 4.267vw; border-radius: 8.533vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-ttl { font-size: 1.4vw; width: 29.2vw; height: 3.2vw; margin-bottom: 0.5vw; border-radius: 3.2vw; } } .city-goods-inner .city-goods-item-ex { display: flex; justify-content: center; align-items: center; margin: 0 auto; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-ex { width: 74.133vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-ex { width: 68.182%; margin-bottom: 0.5vw; } } .city-goods-inner .city-goods-item-limit { display: flex; justify-content: center; align-items: center; border: 1px solid #697AE0; color: #697AE0; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-limit { font-size: 3.6vw; width: 13.733vw; height: 13.733vw; border-radius: calc(13.733vw / 2); margin-right: 1.333vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-limit { font-size: 1.35vw; width: 5.15vw; height: 5.15vw; border-radius: calc(5.15vw / 2); margin-right: 0.5vw; } } .city-goods-inner .city-goods-item-pr { text-align: center; font-weight: 700; color: #697AE0; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-pr { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-pr { font-size: 1.4vw; } } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-pr strong { font-size: 5.867vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-pr strong { font-size: 2.2vw; } } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-pr em { font-size: 4.267vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-pr em { font-size: 1.6vw; } } .city-goods-inner .city-goods-item-pr span { font-weight: normal; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-pr span { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-pr span { font-size: 1vw; } } .city-goods-inner .city-goods-item-pr span.caut { display: block; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-pr span.caut { font-size: 2.4vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-pr span.caut { font-size: 0.9vw; } } .city-goods-inner .city-goods-item-img { display: block; margin: 0 auto; text-align: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-img { width: 74.133vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-img { width: 27.8vw; margin-bottom: 1vw; } } .city-goods-inner .city-goods-item-img p span { display: inline-block; font-weight: 500; color: #697AE0; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-img p span { border: 0.267vw solid #697AE0; padding: 0.667vw 1.067vw; font-size: 2.533vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-img p span { border: 0.1vw solid #697AE0; padding: 0.25vw 0.4vw; font-size: 1.1vw; } } .city-goods-inner .city-goods-item-img a { display: block; width: 100%; height: 100%; cursor: pointer; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-badge { width: 71.2vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-badge { width: 28.8vw; margin-top: 1vw; } } .city-goods-inner .city-goods-item .goods-file5set { display: flex; flex-wrap: wrap; justify-content: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-file5set { width: 80vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-file5set { width: 47.5vw; } } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-file5set p { width: calc(80vw / 2); margin-bottom: 2.667vw; } .city-goods-inner .city-goods-item .goods-file5set p img { width: 35.2vw; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-file5set p { width: calc(47.5vw / 3); margin-bottom: 1vw; } .city-goods-inner .city-goods-item .goods-file5set p img { width: 14.45vw; margin-bottom: 0.5vw; } } .city-goods-inner .city-goods-item .goods-file4set { display: flex; flex-wrap: wrap; justify-content: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-file4set { width: 80vw; margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-file4set { width: 46vw; margin-top: 1.5vw; } } .city-goods-inner .city-goods-item .goods-file4set p { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-file4set p { width: 37.333vw; margin-bottom: 2.667vw; } .city-goods-inner .city-goods-item .goods-file4set p img { width: 31.733vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-file4set p { width: calc(46vw / 3); } .city-goods-inner .city-goods-item .goods-file4set p img { width: 12.5vw; margin-bottom: 0.5vw; } } .city-goods-inner .city-goods-item .goods-file3set { display: flex; flex-wrap: wrap; justify-content: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-file3set { width: 80vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-file3set { width: 47.5vw; margin-top: 1vw; } } .city-goods-inner .city-goods-item .goods-file3set p { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-file3set p { width: 37.333vw; margin-left: 0.533vw; margin-right: 0.533vw; margin-bottom: 2.667vw; } .city-goods-inner .city-goods-item .goods-file3set p img { width: 32vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-file3set p { width: 17vw; margin-left: 1vw; margin-right: 1vw; margin-bottom: 1vw; } .city-goods-inner .city-goods-item .goods-file3set p img { width: 14.65vw; margin-bottom: 0.5vw; } } .city-goods-inner .city-goods-item .goods-miniacrylicstand5set { display: flex; flex-wrap: wrap; justify-content: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand5set { width: 80vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand5set { width: 47.5vw; margin-top: 1vw; } } .city-goods-inner .city-goods-item .goods-miniacrylicstand5set p { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand5set p { width: 34.667vw; margin-left: 2.667vw; margin-right: 2.667vw; margin-bottom: 2.667vw; } .city-goods-inner .city-goods-item .goods-miniacrylicstand5set p img { height: 26.667vw; width: auto; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand5set p { width: 11.5vw; margin-left: 1vw; margin-right: 1vw; margin-bottom: 1vw; } .city-goods-inner .city-goods-item .goods-miniacrylicstand5set p img { height: 10vw; width: auto; margin-bottom: 0.5vw; } } .city-goods-inner .city-goods-item .goods-miniacrylicstand4set { display: flex; flex-wrap: wrap; justify-content: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand4set { width: 71.2vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand4set { width: 47.5vw; margin-top: 1vw; } } .city-goods-inner .city-goods-item .goods-miniacrylicstand4set p { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand4set p { width: 32vw; margin-bottom: 2.667vw; } .city-goods-inner .city-goods-item .goods-miniacrylicstand4set p img { height: 29.333vw; width: auto; margin-bottom: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand4set p { width: calc(40vw / 3); } .city-goods-inner .city-goods-item .goods-miniacrylicstand4set p img { height: 11vw; width: auto; margin-bottom: 0.5vw; } } .city-goods-inner .city-goods-item .goods-miniacrylicstand3set { display: flex; flex-wrap: wrap; justify-content: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand3set { width: 80vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand3set { width: 47vw; margin-top: 1vw; } } .city-goods-inner .city-goods-item .goods-miniacrylicstand3set p { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand3set p { width: 38.667vw; margin-bottom: 2.667vw; } .city-goods-inner .city-goods-item .goods-miniacrylicstand3set p img { height: 13.333vw; width: auto; margin-bottom: 1.333vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-miniacrylicstand3set p { width: 18vw; margin-left: 1vw; margin-right: 1vw; margin-bottom: 1vw; } .city-goods-inner .city-goods-item .goods-miniacrylicstand3set p img { height: 6vw; width: auto; margin-bottom: 0.5vw; } } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-acrylicpanel { width: 71.2vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-acrylicpanel { width: 25.75vw; } } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item .goods-ticketcard { width: 71.2vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item .goods-ticketcard { width: 42.05vw; } } .city-goods-inner .city-goods-item-caut { text-align: center; color: #808080; } @media only screen and (max-width: 1023px) { .city-goods-inner .city-goods-item-caut { font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .city-goods-inner .city-goods-item-caut { font-size: 0.7vw; } } .city-goods-inner .city-goods-caution { padding: 0 1em 1em; line-height: 1.5; color: #283C78; text-align: center; } .city-goods-inner .city-goods-caution p { margin-top: 1em; } .city-foods { position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .city-foods { width: 85.067vw; margin: 10.667vw auto; border-radius: 6.4vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .city-foods { width: 55vw; margin: 4vw auto; border-radius: 2.4vw; padding: 0.4vw; } } .city-foods-line { background: linear-gradient(to right, rgb(255, 231, 72) 0%, rgb(243, 161, 11) 100%); } @media only screen and (max-width: 1023px) { .city-foods-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .city-foods-line { border-radius: 2.35vw; padding: 0.15vw; } } .city-foods-wh { background: #fff; color: #997148; text-align: center; } @media only screen and (max-width: 1023px) { .city-foods-wh { border-radius: 6.133vw; padding: 9.867vw 0; font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-foods-wh { border-radius: 2.3vw; padding: 3.5vw 0; font-size: 1vw; } } .city-foods-date { text-align: center; } .city-foods-date p { display: inline-block; color: #fc7000; font-weight: 700; letter-spacing: 0.1em; position: relative; z-index: 1; } .city-foods-date p::before { content: ""; width: 100%; height: 35%; background: linear-gradient(to right, rgb(255, 242, 158) 0%, rgb(249, 207, 120) 100%); position: absolute; bottom: -5%; left: 0; z-index: -1; } @media only screen and (max-width: 1023px) { .city-foods-date p { font-size: 4.533vw; margin-bottom: 1.867vw; } } @media only screen and (min-width: 1024px) { .city-foods-date p { font-size: 1.7vw; margin-bottom: 0.7vw; } } .city-foods-date span { display: block; } @media only screen and (max-width: 1023px) { .city-foods-date span { margin-top: 1.333vw; font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-foods-date span { margin-top: 0.5vw; font-size: 1vw; } } .city-foods-more { font-weight: 700; } @media only screen and (max-width: 1023px) { .city-foods-more { font-size: 3.467vw; margin-top: 5.333vw; margin-bottom: 2.667vw; } } @media only screen and (min-width: 1024px) { .city-foods-more { font-size: 1.3vw; margin-top: 2vw; margin-bottom: 1vw; } } @media only screen and (max-width: 1023px) { .city-foods-caut { margin-top: 5.333vw; } } @media only screen and (min-width: 1024px) { .city-foods-caut { margin-top: 2vw; } } .city-foods-caut.bold { font-weight: 700; } @media only screen and (max-width: 1023px) { .city-foods-btn { width: 66.667vw; margin: 5.333vw auto 0; } } @media only screen and (min-width: 1024px) { .city-foods-btn { width: 30vw; margin: 2vw auto 0; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-foods-btn { font-size: 34px; } } .city-foods-btn-link, .city-foods-btn-soon { display: block; position: relative; color: #fff; text-align: center; width: 100%; } @media only screen and (max-width: 1023px) { .city-foods-btn-link, .city-foods-btn-soon { height: 15.733vw; margin: 2vw auto 0; border-radius: 9.333vw; font-size: 4vw; line-height: 15.733vw; } } @media only screen and (min-width: 1024px) { .city-foods-btn-link, .city-foods-btn-soon { width: 30vw; height: 5.5vw; font-size: 1.7vw; line-height: 5.5vw; border-radius: 2.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-foods-btn-link, .city-foods-btn-soon { font-size: 30px; } } .city-foods-btn-link::before, .city-foods-btn-soon::before { border: solid #fff; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .city-foods-btn-link::before, .city-foods-btn-soon::before { width: 65.067vw; height: 13.867vw; left: 0.8vw; top: 0.8vw; border-radius: 6.8vw; border: 0.133vw solid #fff; } } @media only screen and (min-width: 1024px) { .city-foods-btn-link::before, .city-foods-btn-soon::before { width: 29.6vw; height: 5.1vw; left: 0.2vw; top: 0.2vw; border-radius: 1.7em; border: 0.05vw solid #fff; } } .city-foods-btn-link { background-color: #283C78; } .city-foods-btn-link::after { content: ""; border: 0; border-top: solid 2px #fff; border-right: solid 2px #fff; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); } @media only screen and (max-width: 1023px) { .city-foods-btn-link::after { width: 1.867vw; height: 1.867vw; right: 5.333vw; } } @media only screen and (min-width: 1024px) { .city-foods-btn-link::after { width: 0.7vw; height: 0.7vw; right: 2vw; } } .city-foods-btn-soon { background-color: #666666; } .city-foods-btn-soon::after { content: "coming soon"; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .city-foods-btn-soon::after { bottom: 2.667vw; right: calc(50% - 3em); font-size: 3.2vw; line-height: 1; } } @media only screen and (min-width: 1024px) { .city-foods-btn-soon::after { top: 0; right: 5%; font-size: 1.1vw; } } @media only screen and (max-width: 1023px) { .city-foods-btn-soon .btn-text { display: block; line-height: 10vw; } } .city-foods-btn-text { font-weight: 700; } @media only screen and (max-width: 1023px) { .city-foods-btn-text { height: 16vw; font-size: 4.533vw; } } @media only screen and (min-width: 1024px) { .city-foods-btn-text { height: 3.667em; font-size: 1.7vw; } } .city-foods-item { border-bottom: 1px solid #F5AB06; margin: 0 3vw 3vw; padding-bottom: 3vw; } .city-foods-ttl { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #f3a10b; text-align: center; line-height: 1; font-weight: 700; color: #fff; } @media only screen and (max-width: 1023px) { .city-foods-ttl { width: 77.333vw; height: 8.533vw; border-radius: 8.533vw; font-size: 3.467vw; } } @media only screen and (min-width: 1024px) { .city-foods-ttl { width: 37vw; height: 3.2vw; border-radius: 3.2vw; font-size: 1.4vw; } } @media only screen and (max-width: 1023px) { .city-foods-img { width: 66.667vw; margin: 9.333vw auto 0; } } @media only screen and (min-width: 1024px) { .city-foods-img { width: 30vw; margin: 3vw auto 0; } } .city-foods-copy { text-align: right; color: #808080; } @media only screen and (max-width: 1023px) { .city-foods-copy { width: 75.733vw; margin: 1.333vw auto 0; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .city-foods-copy { width: 39vw; margin: 0.5vw auto 0; font-size: 0.7vw; } } .city-foods-tx { margin-top: 2em; line-height: 1.6; letter-spacing: 0.07em; } @media only screen and (max-width: 1023px) { .city-foods-tx { padding-left: 1em; padding-right: 1em; } } .city-foods-pr { margin-top: 2em; font-weight: 700; } .city-foods-sub { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; } @media only screen and (max-width: 1023px) { .city-foods-sub { font-size: 3.733vw; width: 69.867vw; height: 8.533vw; margin-bottom: 4.267vw; border-radius: 8.533vw; } } @media only screen and (min-width: 1024px) { .city-foods-sub { font-size: 1.4vw; width: 29.2vw; height: 3.2vw; margin-bottom: 0.5vw; border-radius: 3.2vw; } } .city-foods-caution { padding: 0 1em 1em; line-height: 1.5; color: #697AE0; } .city-foods-caution p { margin-top: 1em; } .city-hololy { background: rgb(255, 250, 207); position: relative; } @media only screen and (max-width: 1023px) { .city-hololy { padding: 6vw 0 8vw; } } @media only screen and (min-width: 1024px) { .city-hololy { padding: 0; } } .city-hololy::before { border-color: transparent transparent rgb(255, 250, 207); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .city-hololy::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .city-hololy::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-hololy::before { border-bottom-width: 395px; top: -395px; } } .city-hololy::after { border-color: rgb(255, 250, 207) transparent transparent; border-style: solid; content: ""; display: block; height: 0; margin-top: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .city-hololy::after { border-right-width: 94.667vw; border-top-width: 23.467vw; bottom: -23.467vw; } } @media only screen and (min-width: 1024px) { .city-hololy::after { border-right-width: 78vw; border-top-width: 19.75vw; bottom: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .city-hololy::after { border-top-width: 395px; bottom: -395px; } } .city-hololy .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#cityTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #hololy-gradient-stop01 { animation: hololyStop1 5s ease-in-out infinite alternate; } #hololy-gradient-stop02 { animation: hololyStop2 5s ease-in-out infinite alternate; } @keyframes hololyStop1 { 0% { stop-color: #8996e8; } 100% { stop-color: #42b7ec; } } @keyframes hololyStop2 { 100% { stop-color: #8996e8; } 0% { stop-color: #42b7ec; } } .city-hololy-bg { position: absolute; } @media only screen and (max-width: 1023px) { .city-hololy-bg.bg-left-top { left: -18.667vw; top: 21.333vw; width: 36.933vw; } } @media only screen and (min-width: 1024px) { .city-hololy-bg.bg-left-top { left: -2.75vw; top: -0.5vw; width: 17vw; } } @media only screen and (max-width: 1023px) { .city-hololy-bg.bg-right-top { right: -19.333vw; top: -4vw; width: 40.4vw; } } @media only screen and (min-width: 1024px) { .city-hololy-bg.bg-right-top { right: -0.5vw; top: -14vw; width: 18.9vw; } } .city-hololy-bg.bg-left-square { z-index: 2; } @media only screen and (max-width: 1023px) { .city-hololy-bg.bg-left-square { left: 0.667vw; bottom: 29.333vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .city-hololy-bg.bg-left-square { left: 3vw; bottom: 3.25vw; width: 2.8vw; } } .city-hololy-bg.bg-left-bottom { z-index: 2; } @media only screen and (max-width: 1023px) { .city-hololy-bg.bg-left-bottom { left: -7.333vw; bottom: -1.333vw; width: 30.4vw; } } @media only screen and (min-width: 1024px) { .city-hololy-bg.bg-left-bottom { left: 5vw; bottom: -4.75vw; width: 14.25vw; } } .hololy-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .hololy-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .hololy-text { font-size: 1.5vw; line-height: 1.533; margin-bottom: 2em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .hololy-text { font-size: 30px; } } .hololy-inner { position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .hololy-inner { width: 85.067vw; margin: 10.667vw auto 106.667vw; border-radius: 6.4vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .hololy-inner { width: 55vw; margin: 4vw auto 0; border-radius: 2.4vw; padding: 0.4vw; } } .hololy-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .hololy-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .hololy-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .hololy-inner-wh { background: #fff; color: #0F5CBF; text-align: left; } @media only screen and (max-width: 1023px) { .hololy-inner-wh { border-radius: 6.133vw; padding: 5.333vw 0; font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .hololy-inner-wh { border-radius: 2.3vw; padding: 2vw 0; font-size: 1vw; } } .hololy-inner .hololy-sub { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; } @media only screen and (max-width: 1023px) { .hololy-inner .hololy-sub { font-size: 3.733vw; width: 69.867vw; height: 8.533vw; margin-bottom: 4.267vw; border-radius: 8.533vw; } } @media only screen and (min-width: 1024px) { .hololy-inner .hololy-sub { font-size: 1.4vw; width: 29.2vw; height: 3.2vw; margin-bottom: 0.5vw; border-radius: 3.2vw; } } .hololy-inner .hololy-list { display: flex; flex-direction: column; list-style-type: none; } @media only screen and (min-width: 1024px) { .hololy-inner .hololy-list { margin-top: 2vw; } } .hololy-inner .hololy-list li { background: #F2F2F2; color: #0F5CBF; border-radius: 10px; position: relative; text-align: left; line-height: 1.3; } @media only screen and (max-width: 1023px) { .hololy-inner .hololy-list li { width: 75.2vw; margin: 4.667vw auto 0; padding: 2.667vw 2.667vw 2.667vw 10.667vw; font-size: 3.467vw; } } @media only screen and (min-width: 1024px) { .hololy-inner .hololy-list li { width: 45.6vw; margin: 1.75vw auto 0; padding: 1vw 13vw 1vw 5vw; font-size: 1.1vw; } } .hololy-inner .hololy-list li::before { content: ""; background: url("../img/city/hololy_list.png") no-repeat; background-size: contain; position: absolute; color: #fff; font-weight: 600; text-align: center; } @media only screen and (max-width: 1023px) { .hololy-inner .hololy-list li::before { width: 6.667vw; height: 6.667vw; top: calc(50% - (6.667vw / 2)); left: 1.333vw; font-size: 3.467vw; line-height: 6.667vw; } } @media only screen and (min-width: 1024px) { .hololy-inner .hololy-list li::before { width: 3vw; height: 3vw; line-height: 3vw; top: calc(50% - (3vw / 2)); left: 1vw; font-size: 1.1vw; } } .hololy-inner .hololy-list li:first-of-type::before { content: "1"; } .hololy-inner .hololy-list li:nth-of-type(2)::before { content: "2"; } .hololy-inner .hololy-list li:nth-of-type(3)::before { content: "3"; } .hololy-inner .hololy-list li:last-of-type::before { content: "4"; } .hololy-inner .hololy-tx { line-height: 1.5; } @media only screen and (max-width: 1023px) { .hololy-inner .hololy-tx { width: 75.2vw; margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .hololy-inner .hololy-tx { width: 45.6vw; margin: 2vw auto 0; } } .hololy-inner .hololy-caut { list-style-type: none; line-height: 1.3; } @media only screen and (max-width: 1023px) { .hololy-inner .hololy-caut { width: 75.2vw; margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .hololy-inner .hololy-caut { width: 45.6vw; margin: 2vw auto 0; } } .hololy-inner .hololy-caut li { padding-left: 1em; text-indent: -1em; margin-top: 0.4em; } .hololy-inner .hololy-chara01 { z-index: 90; position: absolute; } @media only screen and (max-width: 1023px) { .hololy-inner .hololy-chara01 { width: 48vw; height: 113.867vw; bottom: -110.667vw; left: calc(50% - (48vw / 2)); } } @media only screen and (min-width: 1024px) { .hololy-inner .hololy-chara01 { width: 18vw; height: 42.7vw; top: -2.5vw; right: -3.5vw; } } /* .city-food { position: relative; @include media(sp) { padding: 0 0 spVW(304); } @include media(pc) { padding: 0 0 calcSize(200, $base_width, 100vw); @include media(max-width) { padding: 0 0 200px; } } background: rgba(221, 244, 252, 1); position: relative; &::before { border-color: transparent transparent rgba(221, 244, 252, 1); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; @include media(sp) { border-bottom-width: spVW(176); border-left-width: spVW(710); top: spVW(-176); } @include media(pc) { border-bottom-width: calcSize(395, $base_width, 100vw); border-left-width: 78vw; top: calcSize(-395, $base_width, 100vw); @include media(max-width) { border-bottom-width: 395px; top: -395px; } } } .city-food-inner { overflow-y: hidden; } .p-sec-title-bg { fill: none; opacity: .6; stroke: url(#cityTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } .food-note { color: #0f5cbf; font-weight: 500; position: relative; letter-spacing: 0.1em; @include media(sp) { width: spVW(620); font-size: spVW(22); line-height: spVW(30); margin: spVW(80) auto 0; } @include media(pc) { text-align: center; font-size: calcSize(22, $base_width, 100vw); margin-top: calcSize(290, $base_width, 100vw); } } } #food-gradient-stop01 { animation: foodStop1 5s ease-in-out infinite alternate; } #food-gradient-stop02 { animation: foodStop2 5s ease-in-out infinite alternate; } @keyframes foodStop1 { 0% { stop-color: #e4b3f8; } 100% { stop-color: #1bcae4; } } @keyframes foodStop2 { 100% { stop-color: #e4b3f8; } 0% { stop-color: #1bcae4; } } .city-food-bg { position: absolute; &.bg-left-top { @include media(sp) { left: spVW(-90); top: spVW(65); width: spVW(247); } @include media(pc) { left: calcSize(-30, $base_width, 100vw); top: calcSize(-50, $base_width, 100vw); width: calcSize(370, $base_width, 100vw); } } &.bg-right-top { @include media(sp) { right: spVW(-90); top: spVW(-50); width: spVW(253); } @include media(pc) { right: calcSize(-5, $base_width, 100vw); top: calcSize(-90, $base_width, 100vw); width: calcSize(318, $base_width, 100vw); } } &.bg-left-bottom { @include media(sp) { bottom: spVW(-40); left: spVW(-128); width: spVW(437); } @include media(pc) { bottom: calcSize(-60, $base_width, 100vw); left: calcSize(-70, $base_width, 100vw); width: calcSize(728, $base_width, 100vw); } } &.bg-right-bottom { @include media(sp) { bottom: spVW(-100); right: spVW(-60); width: spVW(308); } @include media(pc) { bottom: calcSize(-100, $base_width, 100vw); right: calcSize(-70, $base_width, 100vw); width: calcSize(513, $base_width, 100vw); } } } */ @media only screen and (max-width: 1023px) { .l-footer-note-city { margin: 18.667vw auto 0; } } /* modal */ .modal-content { height: auto; } @media only screen and (min-width: 1024px) { .modal-content { max-height: 90%; } } @media only screen and (max-width: 1023px) { .modal-content-inner { height: inherit; } } @media only screen and (min-width: 1024px) { .modal-content-inner { height: auto; } } .modal-body { margin: auto; position: relative; } @media only screen and (max-width: 1023px) { .modal-body { overflow-y: scroll; width: 80vw; } } @media only screen and (min-width: 1024px) { .modal-body { width: 90%; } } @media only screen and (min-width: 1024px) { #modal-badge .modal-body { width: 70%; } } .p-fair { background: #f0faff; } @media only screen and (max-width: 1023px) { .fair-kv-area { background: url(../img/fair/fair_bg_sp.jpg) 0 0 no-repeat rgb(240, 250, 255); background-size: 100% auto; min-height: 144.267vw; padding-top: 4vw; padding-bottom: 8vw; } .fair-kv-area .p-title { margin-bottom: 4vw; } } @media only screen and (min-width: 1024px) { .fair-kv-area { background: rgb(240, 250, 255); padding-bottom: 17.5vw; } } .fair-kv { position: relative; } @media only screen and (max-width: 1023px) { .fair-kv { height: 144.267vw; } } @media only screen and (min-width: 1024px) { .fair-kv { background: url(../img/fair/fair_bg_pc.jpg) 0 0/cover no-repeat; display: block; height: 0; padding-top: 59.937%; position: relative; width: 100%; } } @media only screen and (min-width: 1024px) { .fair-kv-header { left: 0; position: absolute; top: 0; width: 100%; z-index: 5; } .fair-kv-header .breadcrumb-list { padding-top: 40px; } .fair-kv-header .breadcrumb-item { margin-bottom: 1em; } } .p-title-area-fair { white-space: nowrap; } .p-title-area-fair * { font-size: 61px; } @media only screen and (max-width: 1023px) { .p-title-area-fair * { font-size: 8.667vw; } } @media only screen and (min-width: 1024px) { .p-title-area-fair * { font-size: 3.05vw; } } .p-title-ja-fair { color: rgb(40, 60, 120); position: relative; } @media only screen and (max-width: 1023px) { .p-title-ja-fair { padding-left: 7.333vw; width: 86.933vw; } } @media only screen and (min-width: 1024px) { .p-title-ja-fair { font-size: 1.4vw; line-height: 1.643; margin-bottom: 25.179em; padding-left: 3.75em; width: 24.929em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .p-title-ja-fair { font-size: 28px; } } .p-title-ja-fair .en, .p-title-ja-fair .ja { position: relative; z-index: 1; } .p-title-ja-fair .en { letter-spacing: 0.1em; margin-right: 0.5em; } @media only screen and (max-width: 1023px) { .p-title-ja-fair .en { font-size: 4.267vw; line-height: 1.5; } } .p-title-ja-fair .ja { font-weight: 700; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .p-title-ja-fair .ja { font-size: 4vw; line-height: 1.5; } } @media only screen and (min-width: 1024px) { .p-title-ja-fair .ja { font-size: 107.143%; } } .fair-kv-bg { position: absolute; } .fair-kv-bg.js-inshow { opacity: 0; } .fair-kv-bg.js-inshow.is-show { animation: fadeUpAnime 0.5s forwards; } @media only screen and (max-width: 1023px) { .fair-kv-bg.bg-left-top { left: 11.333vw; top: 30.933vw; width: 20.8vw; } } @media only screen and (min-width: 1024px) { .fair-kv-bg.bg-left-top { left: 23.9vw; top: 6vw; width: 10.7vw; } } @media only screen and (max-width: 1023px) { .fair-kv-bg.bg-right-top { right: -7.333vw; top: 19.333vw; width: 62.8vw; } } @media only screen and (min-width: 1024px) { .fair-kv-bg.bg-right-top { right: 1.5vw; top: -1.5vw; width: 32.7vw; } } @media only screen and (max-width: 1023px) { .fair-kv-bg.bg-right-middle { top: 89.333vw; right: 2.4vw; width: 14.667vw; } } @media only screen and (min-width: 1024px) { .fair-kv-bg.bg-right-middle { top: 19.5vw; right: 4.6vw; width: 9.25vw; } } @media only screen and (max-width: 1023px) { .fair-kv-bg.bg-left-bottom { bottom: 10.667vw; left: -1.067vw; width: 19.733vw; } } @media only screen and (min-width: 1024px) { .fair-kv-bg.bg-left-bottom { bottom: -0.5vw; left: 4.6vw; width: 9.25vw; } } .fair-kv-bg.bg-right-bottom { z-index: 1; } @media only screen and (max-width: 1023px) { .fair-kv-bg.bg-right-bottom { bottom: 4.267vw; right: -1.733vw; width: 44.4vw; } } @media only screen and (min-width: 1024px) { .fair-kv-bg.bg-right-bottom { bottom: -1vw; right: -1vw; width: 19.45vw; } } .fair-outline { text-align: center; } @media only screen and (max-width: 1023px) { .fair-outline { padding: 4.667vw 0 10.667vw; } } @media only screen and (min-width: 1024px) { .fair-outline { padding: 0vw 0 2vw; position: relative; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .fair-outline { padding: 0 0 40px; } } .fair-outline-title-area { width: fit-content; width: -moz-fit-content; margin: 0 auto; } @media only screen and (max-width: 1023px) { .fair-outline-title-area { margin-bottom: 6.667vw; } } @media only screen and (min-width: 1024px) { .fair-outline-title-area { font-size: 1.75vw; left: 0; margin: auto; position: absolute; right: 0; top: -5.714em; z-index: 5; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .fair-outline-title-area { font-size: 35px; } } .fair-nav-area { background: rgb(255, 231, 17); } @media only screen and (max-width: 1023px) { .fair-nav-area { padding: 3.2vw 0 3.467vw; margin: 10.667vw 0 0; } } @media only screen and (min-width: 1024px) { .fair-nav-area { width: 69.7vw; padding: 1.55vw 0 1.65vw; border-radius: 1.5vw; margin: 3vw auto 0; } } .fair-nav-area ul { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-flow: row wrap; flex-flow: row wrap; color: rgb(15, 92, 191); } @media only screen and (max-width: 1023px) { .fair-nav-area ul { gap: 2.667vw 1.333vw; } } @media only screen and (min-width: 1024px) { .fair-nav-area ul { gap: 1.2vw 2vw; } } .fair-nav-area li { background: #fff url(../img/city/arw.svg) no-repeat; border-radius: 100vh; font-weight: 700; } @media only screen and (max-width: 1023px) { .fair-nav-area li { width: 26.667vw; height: 14.667vw; box-shadow: 0.533vw 0.8vw 0px rgba(4, 0, 0, 0.2); border-radius: 2.667vw; font-size: 3.733vw; line-height: 8vw; background-position: center 90%; background-size: 1.467vw; padding-top: 2vw; } .fair-nav-area li:nth-child(2) { width: 32vw; } .fair-nav-area li:nth-child(n+4) { height: 9.333vw; } .fair-nav-area li.lastype { width: 80vw; height: 21.333vw; line-height: 1.3; line-height: 4.133vw; } } @media only screen and (min-width: 1024px) { .fair-nav-area li { -webkit-align-items: center; align-items: center; width: 20vw; height: 3.3vw; box-shadow: 0.2vw 0.3vw 0px rgba(4, 0, 0, 0.2); background-size: 0.55vw; background-position: 17.9vw center; } .fair-nav-area li.lastype { width: 42.5vw; background-position: 40.4vw center; line-height: 1.3; } } .fair-nav-area li.disable { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; box-shadow: none; background: rgb(230, 230, 230); } @media only screen and (max-width: 1023px) { .fair-nav-area li.disable { -webkit-align-items: center; align-items: center; padding: 0; } } .fair-nav-area a { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: 100%; height: 100%; color: rgb(15, 92, 191); } @media only screen and (min-width: 1024px) { .fair-nav-area a { -webkit-align-items: center; align-items: center; } .fair-nav-area a:hover { opacity: 0.8; } } .fair-outline-title { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.14em; } @media only screen and (max-width: 1023px) { .fair-outline-title { font-size: 5.733vw; line-height: 1.581; } } @media only screen and (min-width: 1024px) { .fair-outline-title { line-height: 1.3; margin-bottom: 0.5em; } .fair-outline-title:nth-of-type(1) { text-align: left; } .fair-outline-title:nth-of-type(2) { text-align: right; } } .fair-outline-title .marker { display: inline-block; position: relative; } .fair-outline-title .marker::before { background: linear-gradient(to right, rgba(111, 234, 160, 0.2) 0%, rgba(66, 81, 248, 0.2) 100%); bottom: 5%; content: ""; height: 35%; left: 0; position: absolute; width: 100%; } .fair-outline-title .marker::after { background: rgb(240, 250, 255); bottom: 0; content: ""; height: 90%; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 0; width: 100%; z-index: 10; } .fair-outline-title .marker-text { position: relative; z-index: 1; } .fair-outline-title .deco-01::before { background: url(../img/live/live_kirakira_01.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .fair-outline-title .deco-01::before { height: 7.307vw; left: -5.333vw; top: -8vw; width: 7.84vw; } } @media only screen and (min-width: 1024px) { .fair-outline-title .deco-01::before { height: 1.522em; left: 0.77em; top: 2.3em; width: 1.633em; } } .fair-outline-title .deco-02::before { background: url(../img/live/live_kirakira_02.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .fair-outline-title .deco-02::before { height: 7.04vw; right: -6vw; top: 10vw; width: 7.973vw; } } @media only screen and (min-width: 1024px) { .fair-outline-title .deco-02::before { height: 1.467em; right: -2.083em; top: 0; width: 1.661em; } } .fair-outline-title-sub { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.14em; } @media only screen and (max-width: 1023px) { .fair-outline-title-sub { font-size: 4.267vw; line-height: 1.563; margin-top: 1.6em; } } @media only screen and (min-width: 1024px) { .fair-outline-title-sub { font-size: 0.833em; line-height: 1.3; margin-bottom: 0.4em; text-align: center; } } .fair-game { background: rgb(221, 244, 252); position: relative; } @media only screen and (max-width: 1023px) { .fair-game { padding: 6vw 0 36vw; } } @media only screen and (min-width: 1024px) { .fair-game { padding: 0 0 21vw; } } .fair-game::before { border-color: transparent transparent rgb(221, 244, 252); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .fair-game::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .fair-game::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .fair-game::before { border-bottom-width: 395px; top: -395px; } } .fair-game .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#fairTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #fairTickets-gradient-stop01 { animation: fairTicketsStop1 1s ease-in-out infinite alternate; } #fairTickets-gradient-stop02 { animation: fairTicketsStop2 1s ease-in-out infinite alternate; } @keyframes fairTicketsStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes fairTicketsStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .fair-game-bg { position: absolute; } @media only screen and (max-width: 1023px) { .fair-game-bg.bg-left-top { left: -12vw; top: 14vw; width: 32.933vw; } } @media only screen and (min-width: 1024px) { .fair-game-bg.bg-left-top { left: -1.75vw; top: -3.5vw; width: 17.5vw; } } @media only screen and (max-width: 1023px) { .fair-game-bg.bg-right-top { right: -10.667vw; top: -5.333vw; width: 33.867vw; } } @media only screen and (min-width: 1024px) { .fair-game-bg.bg-right-top { right: 0vw; top: -4.5vw; width: 16.1vw; } } @media only screen and (max-width: 1023px) { .fair-game-bg.bg-squera { left: -15vw; top: 138vw; width: 30.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-bg.bg-squera { left: 5.9vw; top: 42.85vw; width: 14.25vw; } } .tickets-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .tickets-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 12vw; } } @media only screen and (min-width: 1024px) { .tickets-text { font-size: 1.5vw; line-height: 1.533; margin-bottom: 2em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tickets-text { font-size: 30px; } } .fair-game-inner { margin: 0 auto; position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .fair-game-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .fair-game-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .fair-game-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .fair-game-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .fair-game-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .fair-game-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .fair-game-inner .fair-game-sub { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-sub { width: 26.667vw; height: 5.333vw; font-size: 3.733vw; margin-top: 5.333vw; border-radius: calc(5.333vw / 2); } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-sub { width: 46.5vw; height: 3.2vw; font-size: 1.4vw; margin-top: 2vw; border-radius: calc(3.2vw / 2); } } .fair-game-inner .fair-game-sub:first-of-type { margin-top: 0; } .fair-game-inner .fair-game-ex { text-align: center; font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ex { margin-top: 3.333vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ex { margin-top: 0.7vw; } } .fair-game-inner .fair-game-ex.exc { font-size: 1.1em; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ex.exc { width: 75.733vw; margin: 10.667vw auto; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ex.exc { width: 39vw; margin: 4vw auto 1.5vw; } } .fair-game-inner .fair-game-ex.exc span { display: block; text-align: center; margin-top: 0.5em !important; line-height: 1.3 !important; } .fair-game-inner .fair-game-ex strong { display: inline-block; background: #283C78; color: #fff; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ex strong { padding: 0 1.333vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ex strong { padding: 0 0.5vw; } } .fair-game-inner .fair-game-ex em { display: inline-block; position: relative; z-index: 1; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ex em { margin: 0 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ex em { margin: 0 1vw; } } .fair-game-inner .fair-game-ex em::before { content: ""; position: absolute; z-index: -1; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ex em::before { width: 9.333vw; height: 9.333vw; border-radius: 4.667vw; border: 0.133vw solid #283C78; top: calc(50% - 4.667vw); left: calc(50% - 4.667vw); } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ex em::before { width: 3.5vw; height: 3.5vw; border-radius: 1.75vw; border: 0.05vw solid #283C78; top: calc(50% - 1.75vw); left: calc(50% - 1.75vw); } } .fair-game-inner .fair-game-ex p { display: inline-block; position: relative; z-index: 1; color: #283C78; } .fair-game-inner .fair-game-ex p::before { content: ""; width: 100%; height: 35%; background: linear-gradient(to right, rgb(222, 250, 233) 0%, rgb(212, 215, 254) 100%); position: absolute; bottom: 5%; left: 0; z-index: -1; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ex p { font-size: 3.467vw; padding: 0 1.333vw 1.333vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ex p { font-size: 1.4vw; padding: 0 0.5vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ex.pr { margin-top: 3.333vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ex.pr { margin-top: 1vw; } } .fair-game-inner .fair-game-ex.pr p span { font-size: 0.5em; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ex.pr p { font-size: 5.867vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ex.pr p { font-size: 2.3vw; } } .fair-game-inner .fair-game-date { text-align: center; font-weight: 700; color: #697AE0; letter-spacing: 0.1em; line-height: 1.6; position: relative; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-date { font-size: 4.267vw; margin-top: 5.333vw; } .fair-game-inner .fair-game-date::before { content: ""; width: 8vw; height: 2px; background: #697AE0; position: absolute; left: 4vw; top: 6.667vw; } .fair-game-inner .fair-game-date::after { content: ""; width: 8vw; height: 2px; background: #697AE0; position: absolute; right: 4vw; top: 6.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-date { font-size: 1.6vw; margin-top: 5vw; } .fair-game-inner .fair-game-date::before { content: ""; width: 8vw; height: 2px; background: #697AE0; position: absolute; left: 3.5vw; top: 1.3vw; } .fair-game-inner .fair-game-date::after { content: ""; width: 8vw; height: 2px; background: #697AE0; position: absolute; right: 3.5vw; top: 1.3vw; } } .fair-game-inner .fair-game-name { display: flex; justify-content: center; align-items: center; margin: 5vw auto 0; background: #697AE0; text-align: center; line-height: 1.5; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-name { width: 69.867vw; border-radius: 8.533vw; font-size: 4vw; margin-top: 10.667vw; padding: 1.333vw 0; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-name { width: 31.5vw; height: 3.2vw; border-radius: 1.6vw; font-size: 1.5vw; margin-top: 2vw; } } .fair-game-inner .fair-game-ttl { text-align: center; font-weight: 700; color: #283C78; line-height: 1.6; background: linear-gradient(to right, rgb(148, 159, 234) 0%, rgb(239, 105, 248) 100%); color: #fff; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ttl { width: 75.733vw; font-size: 3.733vw; margin: 8vw auto 0; } .fair-game-inner .fair-game-ttl span { display: block; font-size: 3.067vw; font-weight: normal; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ttl { width: 39vw; font-size: 1.2vw; margin: 3vw auto 0; padding: 1vw 0; letter-spacing: 0.1em; } .fair-game-inner .fair-game-ttl span { display: block; font-size: 0.9vw; font-weight: normal; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ttl.game3-c-postcard { margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-ttl.game3-c-postcard { margin-top: 0.5vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-ttl.game3-c-cardchoco { text-align: left; padding-left: 4em; text-indent: -3em; } .fair-game-inner .fair-game-ttl.game3-c-cardchoco span { text-align: center; } } .fair-game-inner .fair-game-img { display: block; margin: 0 auto; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img { width: 74.133vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img { width: 50.545%; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game1 { width: 74.133vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game1 { width: 31.4vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game1-a-badge { width: 44.267vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game1-a-badge { width: 13.85vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game1-b-artpanel { width: 41.467vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game1-b-artpanel { width: 12.7vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game1-c-postcard { width: 53.2vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game1-c-postcard { width: 16.35vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game2 { width: 74.133vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game2 { width: 31.4vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game2-a-badge { width: 44.267vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game2-a-badge { width: 13.85vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game2-b-artpanel { width: 41.467vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game2-b-artpanel { width: 12.7vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game2-c-postcard { width: 53.2vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game2-c-postcard { width: 16.35vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game3 { width: 74.133vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game3 { width: 31.4vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game3-a-badge { width: 44.267vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game3-a-badge { width: 13.85vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game3-b-artpanel { width: 41.467vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game3-b-artpanel { width: 12.7vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game3-c-postcard { width: 53.2vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game3-c-postcard { width: 16.35vw; margin-top: 1vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-img.game3-c-cardchoco { width: 53.2vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-img.game3-c-cardchoco { width: 16.35vw; margin-top: 1vw; } } .fair-game-inner .fair-game-caut { text-align: center; } .fair-game-inner .fair-game-caut.lft { text-align: left; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-caut.lft { width: 75.733vw; margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-caut.lft { width: 39vw; margin: 1.5vw auto 0; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-caut { font-size: 3.2vw; margin-top: 13.333vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-caut { font-size: 0.9vw; margin-top: 5vw; } } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-caut.mtp { margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-caut.mtp { margin-top: 1.5vw; } } .fair-game-inner .fair-game-copy { text-align: right; color: #808080; } @media only screen and (max-width: 1023px) { .fair-game-inner .fair-game-copy { width: 75.733vw; margin-top: 1.333vw; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .fair-game-inner .fair-game-copy { width: 39vw; margin-top: 0.5vw; font-size: 0.7vw; } } @media only screen and (max-width: 1023px) { .fair-game-map { width: 90%; margin: 4vw auto; } } @media only screen and (min-width: 1024px) { .fair-game-map { width: 46.5vw; margin: 1.5vw auto 2.5vw; } } .fair-food { background: rgb(255, 250, 207); position: relative; } @media only screen and (max-width: 1023px) { .fair-food { padding: 0 0 5.333vw; } } @media only screen and (min-width: 1024px) { .fair-food { padding: 0 0 9vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .fair-food { padding: 0 0 180px; } } .fair-food::before { border-color: transparent transparent rgb(255, 250, 207); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .fair-food::before { border-bottom-width: 23.467vw; border-left-width: 94.667vw; top: -23.467vw; } } @media only screen and (min-width: 1024px) { .fair-food::before { border-bottom-width: 19.75vw; border-left-width: 78vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .fair-food::before { border-bottom-width: 395px; top: -395px; } } .fair-food::after { border-color: rgb(255, 250, 207) transparent transparent; border-style: solid; content: ""; display: block; height: 0; margin-top: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .fair-food::after { border-right-width: 94.667vw; border-top-width: 23.467vw; bottom: -23.467vw; } } @media only screen and (min-width: 1024px) { .fair-food::after { border-right-width: 78vw; border-top-width: 19.75vw; bottom: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .fair-food::after { border-top-width: 395px; bottom: -395px; } } .fair-food .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#fairEvent-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #fairEvent-gradient-stop01 { animation: fairEventStop1 1s ease-in-out infinite alternate; } #fairEvent-gradient-stop02 { animation: fairEventStop2 1s ease-in-out infinite alternate; } @keyframes fairEventStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes fairEventStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } .fair-food-bg { position: absolute; } @media only screen and (max-width: 1023px) { .fair-food-bg.bg-left-top { left: -18.667vw; top: 7.333vw; width: 36.933vw; } } @media only screen and (min-width: 1024px) { .fair-food-bg.bg-left-top { left: -3.25vw; top: -1.5vw; width: 17.35vw; } } @media only screen and (max-width: 1023px) { .fair-food-bg.bg-right-top { right: -8.667vw; top: -10vw; width: 33.6vw; } } @media only screen and (min-width: 1024px) { .fair-food-bg.bg-right-top { right: -0.5vw; top: -14vw; width: 18.9vw; } } @media only screen and (max-width: 1023px) { .fair-food-bg.bg-left-bottom { left: -7.333vw; top: 130vw; width: 30.4vw; } } @media only screen and (min-width: 1024px) { .fair-food-bg.bg-left-bottom { left: 5vw; top: 48.25vw; width: 14.25vw; } } .fair-food-bg.bg-right-bottom { z-index: 2; } @media only screen and (max-width: 1023px) { .fair-food-bg.bg-right-bottom { display: none; } } @media only screen and (min-width: 1024px) { .fair-food-bg.bg-right-bottom { right: 4.5vw; top: 39.75vw; width: 2.8vw; } } .event-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .event-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .event-text { font-size: 1.5vw; line-height: 1.533; margin-bottom: 2em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .event-text { font-size: 30px; } } .event-inner { background: #fff; margin: 0 auto; text-align: center; position: relative; z-index: 2; } @media only screen and (max-width: 1023px) { .event-inner { width: 85.067vw; border-radius: 6.667vw; padding: 10.667vw 0 5.333vw; } } @media only screen and (min-width: 1024px) { .event-inner { width: 55vw; border-radius: 2.5vw; padding: 5vw 0 7.5vw; } } .event-inner ul { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; justify-content: center; } @media only screen and (max-width: 1023px) { .event-inner ul { gap: 6.667vw 0; margin-bottom: 5.333vw; } } @media only screen and (min-width: 1024px) { .event-inner ul { gap: 3.35vw 7vw; margin-bottom: 3.5vw; } } .event-inner li { text-align: center; overflow: hidden; background: #0F5CBF; } .event-inner li .att-txt { color: #fff; background: #0F5CBF; font-weight: 500; } @media only screen and (max-width: 1023px) { .event-inner li { border-radius: 1.333vw; } .event-inner li .att-txt { font-size: 4vw; padding: 2.4vw 0; } } @media only screen and (min-width: 1024px) { .event-inner li { width: 19vw; border-radius: 0.5vw; } .event-inner li .att-txt { font-size: 1.2vw; padding: 0.6vw; } } .fair-food-inner { margin: 0 auto; position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .fair-food-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .fair-food-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .fair-food-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .fair-food-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .fair-food-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .fair-food-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .fair-food-inner .fair-food-sub { display: flex; justify-content: center; align-items: center; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-sub { width: 69.867vw; height: 8.533vw; font-size: 3.733vw; border-radius: 8.533vw; margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-sub { width: 35vw; height: 3.2vw; font-size: 1.4vw; border-radius: 1.6vw; margin: 4vw auto 0; } } .fair-food-inner .fair-food-sub:first-of-type { margin-top: 0; } .fair-food-inner .fair-food-ex { text-align: center; font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-ex { font-size: 3.467vw; margin-top: 3.333vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-ex { font-size: 1.4vw; margin-top: 1.25vw; } } .fair-food-inner .fair-food-head { display: flex; justify-content: center; align-items: center; margin: 0 auto; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-head { width: 74.133vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-head { width: 68.182%; margin-top: 1.5vw; } } .fair-food-inner .fair-food-limit { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid #697AE0; color: #697AE0; line-height: 1.5; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-limit { font-size: 3.6vw; width: 14.667vw; height: 14.667vw; border-radius: 50%; margin-right: 1.333vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-limit { font-size: 1.35vw; width: 5.5vw; height: 5.5vw; border-radius: 50%; margin-right: 0.5vw; } } .fair-food-inner .fair-food-limit span { font-size: 0.7em; } .fair-food-inner .fair-food-ttl { font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-ttl { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-ttl { font-size: 1.4vw; } } .fair-food-inner .fair-food-ttl span { font-weight: normal; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-ttl span { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-ttl span { font-size: 1vw; } } .fair-food-inner .fair-food-caut { text-align: center; line-height: 1.3; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-caut { font-size: 3.2vw; margin-top: 5.333vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-caut { font-size: 0.9vw; margin-top: 2vw; } } .fair-food-inner .fair-food-caut.lft { text-align: left; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-caut.lft { width: 69.867vw; margin: 0 auto; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-caut.lft { width: 35vw; margin: 0 auto; } } .fair-food-inner .fair-food-caut.cnt { text-align: center; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-caut.mt { margin: 2.667vw 0 5.333vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-caut.mt { margin: 1vw 0 2vw; } } .fair-food-inner .fair-food-caut.ex { color: #697AE0; } .fair-food-inner .fair-food-img { line-height: 0; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-img { width: 69.867vw; font-size: 3.733vw; margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-img { width: 30vw; margin: 2.25vw auto 0; } } .fair-food-inner .fair-food-copy { text-align: right; color: #808080; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-copy { width: 75.733vw; margin-top: 1.333vw; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-copy { width: 39vw; margin-top: 0.5vw; font-size: 0.7vw; } } .fair-food-inner .fair-food-place, .fair-food-inner .fair-food-time, .fair-food-inner .fair-food-url { display: flex; justify-content: flex-start; align-items: flex-start; margin: 0 auto; position: relative; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-place, .fair-food-inner .fair-food-time, .fair-food-inner .fair-food-url { width: 74.133vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-place, .fair-food-inner .fair-food-time, .fair-food-inner .fair-food-url { width: 60%; margin-top: 1vw; } } .fair-food-inner .fair-food-place dt, .fair-food-inner .fair-food-time dt, .fair-food-inner .fair-food-url dt { display: flex; justify-content: center; align-items: center; border: 1px solid #697AE0; color: #697AE0; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-place dt, .fair-food-inner .fair-food-time dt, .fair-food-inner .fair-food-url dt { font-size: 3.2vw; width: 16vw; height: 8vw; border-radius: calc(8vw / 2); margin-right: 4vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-place dt, .fair-food-inner .fair-food-time dt, .fair-food-inner .fair-food-url dt { font-size: 1.2vw; width: 9vw; height: 3vw; border-radius: calc(3vw / 2); margin-right: 1.5vw; } } .fair-food-inner .fair-food-place dd, .fair-food-inner .fair-food-time dd, .fair-food-inner .fair-food-url dd { font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.3; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-place dd, .fair-food-inner .fair-food-time dd, .fair-food-inner .fair-food-url dd { padding-top: 0.8vw; font-size: 3.2vw; width: calc(100% - 16vw); } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-place dd, .fair-food-inner .fair-food-time dd, .fair-food-inner .fair-food-url dd { padding-top: 0.3vw; font-size: 1.4vw; width: calc(100% - 9vw); } } .fair-food-inner .fair-food-place dd span.caut, .fair-food-inner .fair-food-time dd span.caut, .fair-food-inner .fair-food-url dd span.caut { display: block; font-size: 0.85em; padding-left: 1em; text-indent: -1em; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-time dd { font-size: 2.933vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-time dd { font-size: 1vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-url dd { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-url dd { font-size: 1vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-place:first-of-type { margin-top: 5.333vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-place:first-of-type { margin-top: 2vw; } } .fair-food-inner .fair-food-item { font-weight: 700; color: #fff; letter-spacing: 0.1em; text-align: center; position: relative; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item { width: 74.667vw; margin: 2.667vw auto 4vw; padding-bottom: 8vw; font-size: 4.133vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item { width: 45vw; margin: 1vw auto 1.5vw; padding-bottom: 3vw; font-size: 1.4vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item.bdr { margin: 2.667vw auto 8vw; padding-bottom: 16vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item.bdr { margin: 1vw auto 3vw; padding-bottom: 6vw; } } .fair-food-inner .fair-food-item.bdr::after { content: ""; position: absolute; bottom: 0; border-bottom: 1px solid #283C78; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item.bdr::after { width: 66.667vw; height: 1px; left: calc(50% - (66.667vw / 2)); } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item.bdr::after { width: 35vw; height: 1px; left: calc(50% - (35vw / 2)); } } .fair-food-inner .fair-food-item-name { font-weight: 700; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-name { margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-name { margin-top: 2vw; } } .fair-food-inner .fair-food-item-pr { text-align: center; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-pr { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-pr { font-size: 1.4vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-pr strong { font-size: 5.867vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-pr strong { font-size: 2.2vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-pr em { font-size: 4.267vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-pr em { font-size: 1.6vw; } } .fair-food-inner .fair-food-item-pr span { font-weight: normal; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-pr span { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-pr span { font-size: 1vw; } } .fair-food-inner .fair-food-item-pr span.caut { display: block; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-pr span.caut { font-size: 2.4vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-pr span.caut { font-size: 0.9vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-caut { font-size: 2.667vw; margin: 2.667vw auto 0; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-caut { font-size: 1vw; margin: 1vw auto 0; } } .fair-food-inner .fair-food-item-caut.lft { text-align: left; } .fair-food-inner .fair-food-item-caut.cnt { text-align: center; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-img { margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-img { margin: 1.5vw auto 0; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-img.mojito { width: 53.333vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-img.mojito { width: 20vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-img.float { width: 40vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-img.float { width: 15vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-img.malioncrepe { width: 53.333vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-img.malioncrepe { width: 20vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-img.lemonsquash { width: 40vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-img.lemonsquash { width: 15vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-img.lemonsour { width: 40vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-img.lemonsour { width: 15vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-img.shavedice { width: 40vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-img.shavedice { width: 15vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-img.parfait { width: 40vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-img.parfait { width: 15vw; } } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-item-img.potetochickensand { width: 66.667vw; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-item-img.potetochickensand { width: 30vw; } } .fair-food-inner .fair-food-btn { background: #1152b7 !important; font-weight: 700 !important; position: absolute !important; top: 0; right: 0; line-height: 1; } @media only screen and (max-width: 1023px) { .fair-food-inner .fair-food-btn { width: 13.333vw !important; height: 5.333vw !important; margin: 1.333vw auto 4vw !important; padding: 0 !important; } } @media only screen and (min-width: 1024px) { .fair-food-inner .fair-food-btn { width: 5vw !important; height: 2.5vw !important; margin: 0.5vw auto 0 !important; padding: 0 !important; } } .fair-food-inner .fair-food-btn a { color: #fff; cursor: pointer; display: block; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .fair-facility { position: relative; } @media only screen and (max-width: 1023px) { .fair-facility { padding: 28vw 0 5.333vw; } } @media only screen and (min-width: 1024px) { .fair-facility { padding: 15vw 0 10vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .fair-facility { padding: 300px 0 200px; } } .fair-facility .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#facility-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #facility-gradient-stop01 { animation: facilityStop1 5s ease-in-out infinite alternate; } #facility-gradient-stop02 { animation: facilityStop2 5s ease-in-out infinite alternate; } @keyframes facilityStop1 { 0% { stop-color: #fc84a4; } 100% { stop-color: #69b1f8; } } @keyframes facilityStop2 { 100% { stop-color: #fc84a4; } 0% { stop-color: #69b1f8; } } @media only screen and (max-width: 1023px) { .facility-text.city-facility-text { margin-bottom: 18.667vw; } } @media only screen and (min-width: 1024px) { .facility-text.city-facility-text { margin-bottom: 4.75vw; } } .fair-facility-bg { position: absolute; } .fair-facility-bg.bg-left-top::after { content: ""; display: block; background: url(../img/city/dot_p.svg) no-repeat center 0/100%; position: absolute; } @media only screen and (max-width: 1023px) { .fair-facility-bg.bg-left-top { left: -13.333vw; top: 88vw; width: 26.133vw; } } @media only screen and (min-width: 1024px) { .fair-facility-bg.bg-left-top { left: 0.5vw; top: 31.5vw; width: 16.3vw; } .fair-facility-bg.bg-left-top::after { width: 2.95vw; height: 3vw; bottom: -6.1vw; left: 5.1vw; } } @media only screen and (max-width: 1023px) { .fair-facility-bg.bg-right-top { right: -9.333vw; top: 0vw; width: 27.067vw; } } @media only screen and (min-width: 1024px) { .fair-facility-bg.bg-right-top { right: -0.25vw; top: 4.5vw; width: 15vw; } } @media only screen and (max-width: 1023px) { .fair-facility-bg.bg-left-bottom { top: 185.267vw; left: 10.4vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .fair-facility-bg.bg-left-bottom { top: 69vw; left: 16.5vw; width: 2.9vw; } } .fair-facility-bg.bg-right-bottom { z-index: 2; } @media only screen and (max-width: 1023px) { .fair-facility-bg.bg-right-bottom { top: 176.267vw; right: -4.667vw; width: 30.533vw; } } @media only screen and (min-width: 1024px) { .fair-facility-bg.bg-right-bottom { bottom: 15vw; right: 9.5vw; width: 14.3vw; } } .facility-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .facility-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 10.667vw; } } @media only screen and (min-width: 1024px) { .facility-text { font-size: 1.4vw; line-height: 1.643; margin-bottom: 2.857em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .facility-text { font-size: 28px; } } @media only screen and (max-width: 1023px) { .fair-facility .l-main-deco.left-bottom { bottom: -5.333vw; } } @media only screen and (min-width: 1024px) { .fair-facility .l-main-deco.left-bottom { left: -4.717%; margin-bottom: -1.5vw; } } @media only screen and (max-width: 1023px) { .fair-facility .l-main-deco.right-bottom { bottom: -12.667vw; } } @media only screen and (min-width: 1024px) { .fair-facility .l-main-deco.right-bottom { margin-bottom: -5vw; } } .facility-inner { margin: 0 auto; position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .facility-inner { width: 85.067vw; border-radius: 6.4vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .facility-inner { width: 55vw; border-radius: 2.4vw; padding: 0.4vw; } } .facility-inner-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .facility-inner-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .facility-inner-line { border-radius: 2.35vw; padding: 0.15vw; } } .facility-inner-wh { background: #fff; } @media only screen and (max-width: 1023px) { .facility-inner-wh { border-radius: 6.133vw; padding: 9.867vw 0; } } @media only screen and (min-width: 1024px) { .facility-inner-wh { border-radius: 2.3vw; padding: 3.5vw 0; } } .facility-inner .facility-sub { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .facility-inner .facility-sub { width: 69.867vw; height: 8.533vw; font-size: 3.733vw; margin-bottom: 6.267vw; border-radius: calc(8.533vw / 2); } } @media only screen and (min-width: 1024px) { .facility-inner .facility-sub { width: 29.2vw; height: 3.2vw; font-size: 1.4vw; border-radius: 1.6vw; margin-bottom: 2.25vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-sub:last-of-type { margin-top: 4vw; } } .facility-inner .facility-ex { text-align: center; font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .facility-inner .facility-ex { font-size: 3.733vw; margin-bottom: 1.867vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-ex { font-size: 1.4vw; margin-bottom: 0.7vw; } } .facility-inner .facility-item-head { display: flex; justify-content: center; align-items: center; margin: 0 auto; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-head { width: 74.133vw; margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-head { width: 68.182%; margin-top: 1.5vw; } } .facility-inner .facility-item-limit { display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px solid #697AE0; color: #697AE0; line-height: 1.5; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-limit { font-size: 3.6vw; width: 14.667vw; height: 14.667vw; border-radius: 50%; margin-right: 1.333vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-limit { font-size: 1.35vw; width: 5.5vw; height: 5.5vw; border-radius: 50%; margin-right: 0.5vw; } } .facility-inner .facility-item-limit span { font-size: 0.7em; } .facility-inner .facility-item-ttl { font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-ttl { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-ttl { font-size: 1.4vw; } } .facility-inner .facility-item-ttl span { font-weight: normal; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-ttl span { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-ttl span { font-size: 1vw; } } .facility-inner p.facility-caut { text-align: center; padding: 1em; } .facility-inner ul.facility-caut { text-align: left; padding: 1em; } @media only screen and (max-width: 1023px) { .facility-inner ul.facility-caut { margin: 1em; } } @media only screen and (min-width: 1024px) { .facility-inner ul.facility-caut { width: 43vw; margin: 1vw auto 0; } } .facility-inner ul.facility-caut li { padding-left: 1em; text-indent: -1em; padding-bottom: 0.5em; } @media only screen and (max-width: 1023px) { .facility-inner .facility-novelty .facility-img { width: 69.867vw; margin: 2.667vw auto 0; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-novelty .facility-img { width: 30vw; margin: 1vw auto 0; } } .facility-inner .facility-place { display: flex; justify-content: center; align-items: center; margin: 0 auto; } @media only screen and (max-width: 1023px) { .facility-inner .facility-place { width: 74.133vw; margin-top: 8vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-place { width: 68.182%; margin-top: 5vw; } } @media only screen and (max-width: 1023px) { .facility-inner .facility-place.arena { margin-top: 13.333vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-place.arena { margin-top: 6vw; } } .facility-inner .facility-place dt { display: flex; justify-content: center; align-items: center; border: 1px solid #697AE0; color: #697AE0; } @media only screen and (max-width: 1023px) { .facility-inner .facility-place dt { font-size: 3.2vw; width: 16vw; height: 8vw; border-radius: calc(8vw / 2); margin-right: 4vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-place dt { font-size: 1.2vw; width: 6vw; height: 3vw; border-radius: calc(3vw / 2); margin-right: 1.5vw; } } .facility-inner .facility-place dd { font-weight: 700; color: #283C78; letter-spacing: 0.1em; line-height: 1.3; } @media only screen and (max-width: 1023px) { .facility-inner .facility-place dd { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-place dd { font-size: 1.4vw; } } .facility-inner .facility-novelty-talent { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; text-align: left; } @media only screen and (max-width: 1023px) { .facility-inner .facility-novelty-talent { width: 74.133vw; margin: 10.667vw auto 0; font-size: 4vw; line-height: 1.563; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-novelty-talent { width: 47.2vw; margin: 4vw auto 0; font-size: 1.3vw; line-height: 1.643; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .facility-inner .facility-novelty-talent { font-size: 28px; } } .facility-inner .facility-novelty-talent dt { display: block; } .facility-inner .facility-novelty-talent dt::after { content: "／"; margin: 0 0.5em; } .facility-inner .facility-novelty-talent dd { display: block; margin-top: -0.2em; } .facility-inner .facility-price-head { display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, rgb(246, 168, 251) 0%, rgb(147, 157, 233) 100%); border-top-left-radius: 1em; border-top-right-radius: 1em; font-weight: 700; color: #fff; letter-spacing: 0.1em; position: relative; } @media only screen and (max-width: 1023px) { .facility-inner .facility-price-head { width: 74.133vw; height: 7.467vw; font-size: 4.133vw; margin: 5.333vw auto 0; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-price-head { width: 47.2vw; height: 2.8vw; margin: 3.25vw auto 0; font-size: 1.4vw; } } .facility-inner .facility-price-body { background: #F2F2F2; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; } @media only screen and (max-width: 1023px) { .facility-inner .facility-price-body { width: 74.133vw; margin: 0 auto 2.667vw; padding: 2.667vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-price-body { width: 47.2vw; margin: 0 auto; padding: 1.5vw 1vw 2vw; } } .facility-inner .facility-price-body ul { margin-bottom: 1em; } .facility-inner .facility-price-body ul li { line-height: 1.5; } .facility-inner .facility-price-body p.facility-caut { padding: 1em 0; font-weight: 700; line-height: 1.3; } .facility-inner .facility-price-list { position: relative; font-weight: 600; width: 100%; } @media only screen and (max-width: 1023px) { .facility-inner .facility-price-list { line-height: 1.3; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-price-list { display: flex; flex-wrap: wrap; justify-content: space-between; background: url("../img/giants/giants-tickets-type-dot2.png") repeat-x; background-size: auto 0.2vw; background-position: center center; } } .facility-inner .facility-price-list strong { background: #F2F2F2; } @media only screen and (max-width: 1023px) { .facility-inner .facility-price-list strong { display: block; padding-left: 1em; text-indent: -1em; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-price-list strong { font-size: 1.35vw; padding: 0.5vw 0.5vw 0.5vw 0; } } .facility-inner .facility-price-list p { background: #F2F2F2; } @media only screen and (max-width: 1023px) { .facility-inner .facility-price-list p { text-align: right; position: relative; z-index: 1; } .facility-inner .facility-price-list p::before { content: ""; width: calc(100% - 8.5em); height: 100%; background: url("../img/giants/giants-tickets-type-dot2.png") repeat-x; background-size: auto 0.533vw; background-position: left center; position: absolute; left: 1em; border: 0; z-index: -1; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-price-list p { font-size: 1.25vw; padding: 0.5vw 0 0.5vw 0.5vw; } } @media only screen and (max-width: 1023px) { .facility-inner .facility-price-list p.pr2::before { content: ""; width: calc(100% - 11.5em); } } @media only screen and (max-width: 1023px) { .facility-inner .facility-drink-novelty { margin-top: 13.333vw; margin-bottom: 13.333vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-drink-novelty { margin-top: 5vw; margin-bottom: 5vw; } } @media only screen and (max-width: 1023px) { .facility-inner .facility-drink-novelty .facility-img { width: 80vw; margin: 2.667vw auto 0; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-drink-novelty .facility-img { width: 30vw; margin: 1vw auto 0; } } .facility-inner .fair-drink-copy { text-align: right; color: #808080; } @media only screen and (max-width: 1023px) { .facility-inner .fair-drink-copy { width: 75.733vw; margin-top: 1.333vw; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .facility-inner .fair-drink-copy { width: 39vw; margin-top: 0.5vw; font-size: 0.7vw; } } .facility-inner .facility-caut.nov { color: #697AE0; } .facility-inner .facility-item-drink { display: flex; justify-content: center; flex-wrap: wrap; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink { flex-direction: column; margin: 10.667vw auto 0; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink { width: 50vw; margin: 3.25vw auto 0; } } .facility-inner .facility-item-drink .facility-drink { font-weight: 700; color: #fff; letter-spacing: 0.1em; text-align: center; position: relative; color: #697AE0; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-drink { margin: 2.667vw 0 8vw; font-size: 4.133vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-drink { width: 22.5vw; margin-top: 3.5vw; font-size: 1.4vw; } } .facility-inner .facility-item-drink .facility-drink-meta { height: 6em; } .facility-inner .facility-item-drink .facility-drink-name { font-weight: 700; } .facility-inner .facility-item-drink .facility-drink-sub { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-drink-sub { width: 69.867vw; height: 8.533vw; font-size: 3.733vw; margin-bottom: 6.267vw; border-radius: calc(8.533vw / 2); } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-drink-sub { width: 29.2vw; height: 3.2vw; font-size: 1.4vw; margin-top: 2vw; border-radius: calc(3.2vw / 2); } } .facility-inner .facility-item-drink .facility-drink-sub:first-of-type { margin-top: 0; } .facility-inner .facility-item-drink .facility-drink-pr { text-align: center; font-weight: 700; letter-spacing: 0.1em; line-height: 1.6; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-drink-pr { font-size: 3.733vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-drink-pr { font-size: 1.4vw; } } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-drink-pr strong { font-size: 5.867vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-drink-pr strong { font-size: 2.2vw; } } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-drink-pr em { font-size: 4.267vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-drink-pr em { font-size: 1.6vw; } } .facility-inner .facility-item-drink .facility-drink-pr span { font-weight: normal; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-drink-pr span { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-drink-pr span { font-size: 1vw; } } .facility-inner .facility-item-drink .facility-drink-pr span.caut { display: block; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-drink-pr span.caut { font-size: 2.4vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-drink-pr span.caut { font-size: 0.9vw; } } .facility-inner .facility-item-drink .facility-drink-img { margin: 0 auto; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-drink-img img { width: 53.333vw; height: 80vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-drink-img img { width: 20vw; height: 30vw; } } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-drink-caut { font-size: 2.667vw; margin: 2.667vw auto 0; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-drink-caut { font-size: 1vw; margin: 1vw auto 0; } } .facility-inner .facility-item-drink .facility-item-ex { width: 100%; text-align: center; color: #697AE0; font-weight: 500; text-align: center; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-item-ex { background: url("../img/giants/giants-goods-shop_kzr_sp.png") no-repeat; background-size: 66.667vw auto; background-position: center center; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-item-ex { background: url("../img/giants/giants-goods-shop_kzr.png") no-repeat; background-size: 25vw auto; background-position: center center; } } .facility-inner .facility-item-drink .facility-item-ex strong { display: inline-block; position: relative; z-index: 1; color: #697AE0; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .facility-item-ex strong { margin: 5.333vw 0; padding: 0 1.333vw; font-size: 4vw; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .facility-item-ex strong { margin: 2vw 0; padding: 0 0.5vw; font-size: 1.5vw; } } .facility-inner .facility-item-drink .coming-soon { align-items: center; background: #fff; display: flex; justify-content: center; margin: auto; position: relative; text-align: center; z-index: 10; } @media only screen and (max-width: 1023px) { .facility-inner .facility-item-drink .coming-soon { width: 74.667vw; height: 74.667vw; border-radius: 6.667vw; background: url("../img/share/coming_bg_sp.jpg") no-repeat 50% 50%; background-size: 110% auto; font-size: 6.933vw; border: 0.133vw solid #ccc; border-radius: 4vw; margin: 4vw auto 0; } } @media only screen and (min-width: 1024px) { .facility-inner .facility-item-drink .coming-soon { width: 50vw; height: 25vw; border-radius: 2.5vw; background: url("../img/share/coming_bg.jpg") no-repeat 50% 50%; background-size: 110% auto; font-size: 3.6vw; overflow: hidden; border: 0.05vw solid #ccc; border-radius: 1.5vw; margin-top: 1.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .facility-inner .facility-item-drink .coming-soon { font-size: 72px; } } .p-tour { background: rgb(255, 250, 207); } @media only screen and (max-width: 1023px) { .tour-kv-area { background: url(../img/tour/tour_bg_sp_230526.jpg) 0 0 no-repeat rgb(240, 250, 255); background-size: 100% auto; min-height: 182.667vw; padding-top: 4vw; } .tour-kv-area .p-title { margin-bottom: 4vw; } } @media only screen and (min-width: 1024px) { .tour-kv-area { background: rgb(240, 250, 255); } } .tour-kv { position: relative; } @media only screen and (max-width: 1023px) { .tour-kv { height: 178.667vw; } } @media only screen and (min-width: 1024px) { .tour-kv { background: url(../img/tour/tour_bg_pc_230526.jpg) 0 0/cover no-repeat; display: block; height: 0; padding-top: 81.761%; position: relative; width: 100%; } } .tour-kv-main { margin: 0 auto; position: relative; z-index: 50; } @media only screen and (max-width: 1023px) { .tour-kv-main { margin-top: 1.333vw; width: 85.067vw; } } @media only screen and (min-width: 1024px) { .tour-kv-main { width: 66vw; } } @media only screen and (min-width: 1024px) { .tour-kv-header { left: 0; position: absolute; top: 0; width: 100%; z-index: 5; } .tour-kv-header .breadcrumb-list { padding-top: 40px; } .tour-kv-header .breadcrumb-item { margin-bottom: 1em; } } .p-title-area-tour { white-space: nowrap; } .p-title-area-tour * { font-size: 68px; } @media only screen and (max-width: 1023px) { .p-title-area-tour * { font-size: 9.067vw; } } @media only screen and (min-width: 1024px) { .p-title-area-tour * { font-size: 3.2vw; } } .tour-kv-bg { position: absolute; } .tour-kv-bg.js-inshow { opacity: 0; } .tour-kv-bg.js-inshow.is-show { animation: fadeUpAnime 0.5s forwards; } @media only screen and (max-width: 1023px) { .tour-kv-bg.bg-left-top { left: -10vw; top: 47.6vw; width: 50.4vw; } } @media only screen and (min-width: 1024px) { .tour-kv-bg.bg-left-top { left: -1.5vw; top: 17.5vw; width: 18.95vw; } } @media only screen and (max-width: 1023px) { .tour-kv-bg.bg-pic-01 { left: -4vw; top: 44.267vw; width: 29.2vw; } } @media only screen and (min-width: 1024px) { .tour-kv-bg.bg-pic-01 { left: -1.6vw; top: 12.25vw; width: 15.25vw; } } @media only screen and (max-width: 1023px) { .tour-kv-bg.bg-center-top { left: 27.333vw; top: 47.6vw; width: 14.8vw; } } @media only screen and (min-width: 1024px) { .tour-kv-bg.bg-center-top { left: 50%; margin-left: -8.25vw; top: 12.75vw; width: 9.25vw; } } @media only screen and (max-width: 1023px) { .tour-kv-bg.bg-right-top { right: -9.333vw; top: 25.333vw; width: 55.733vw; } } @media only screen and (min-width: 1024px) { .tour-kv-bg.bg-right-top { right: 2vw; top: 4.75vw; width: 34.8vw; } } @media only screen and (max-width: 1023px) { .tour-kv-bg.bg-pic-02 { right: 38.667vw; top: 32.267vw; width: 23.6vw; } } @media only screen and (min-width: 1024px) { .tour-kv-bg.bg-pic-02 { right: 28vw; top: 2.5vw; width: 14.75vw; } } @media only screen and (max-width: 1023px) { .tour-kv-bg.bg-left-bottom { bottom: -5.333vw; left: -3.733vw; width: 19.733vw; } } @media only screen and (min-width: 1024px) { .tour-kv-bg.bg-left-bottom { bottom: 4vw; left: 0.5vw; width: 9.25vw; } } @media only screen and (max-width: 1023px) { .tour-kv-bg.bg-right-middle { bottom: 86.933vw; right: -3.067vw; width: 19.6vw; } } @media only screen and (min-width: 1024px) { .tour-kv-bg.bg-right-middle { top: 22vw; right: 0vw; width: 10.7vw; } } @media only screen and (max-width: 1023px) { .tour-kv-bg.bg-right-bottom { bottom: 1.6vw; right: -29.733vw; width: 44.4vw; } } @media only screen and (min-width: 1024px) { .tour-kv-bg.bg-right-bottom { bottom: -2vw; right: -8.5vw; width: 20.05vw; } } @media only screen and (max-width: 1023px) { .tour-kv-bg.bg-pic-03 { bottom: 8.667vw; right: 15.333vw; width: 34.533vw; } } @media only screen and (min-width: 1024px) { .tour-kv-bg.bg-pic-03 { bottom: 10.75vw; right: 13vw; width: 16.2vw; } } .tour-outline { text-align: center; } @media only screen and (max-width: 1023px) { .tour-outline { padding: 4.667vw 0 10.667vw; } } @media only screen and (min-width: 1024px) { .tour-outline { padding: 0vw 0 3.5vw; position: relative; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-outline { padding: 0 0 70px; } } @media only screen and (max-width: 1023px) { .tour-outline-title-area { margin-bottom: 6.667vw; } } @media only screen and (min-width: 1024px) { .tour-outline-title-area { font-size: 1.8vw; margin: auto; position: absolute; right: 0; top: -3.611em; left: 0.278em; width: 30.556em; z-index: 5; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-outline-title-area { font-size: 36px; } } .tour-outline-title { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tour-outline-title { font-size: 5.733vw; line-height: 1.581; } } @media only screen and (min-width: 1024px) { .tour-outline-title { line-height: 1.3; margin-bottom: 0.333em; } .tour-outline-title:nth-of-type(1) { text-align: left; } .tour-outline-title:nth-of-type(2) { padding-left: 7.3em; } } .tour-outline-title .marker { display: inline-block; position: relative; } .tour-outline-title .marker::before { background: linear-gradient(to right, rgba(111, 234, 160, 0.2) 0%, rgba(66, 81, 248, 0.2) 100%); bottom: 5%; content: ""; height: 35%; left: 0; position: absolute; width: 100%; } .tour-outline-title .marker::after { background: rgb(240, 250, 255); bottom: 0; content: ""; height: 90%; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 0; width: 100%; z-index: 10; } .tour-outline-title .marker-text { position: relative; z-index: 1; } .tour-outline-title .deco-01::before { background: url(../img/live/live_kirakira_01.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .tour-outline-title .deco-01::before { height: 7.307vw; left: -18.333vw; top: -6.667vw; width: 7.84vw; } } @media only screen and (min-width: 1024px) { .tour-outline-title .deco-01::before { height: 1.522em; left: 2em; top: 3em; width: 1.633em; } } .tour-outline-title .deco-02::before { background: url(../img/live/live_kirakira_02.svg) 50%/contain no-repeat; content: ""; display: block; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .tour-outline-title .deco-02::before { height: 7.04vw; right: -9.333vw; top: -13vw; width: 7.973vw; } } @media only screen and (min-width: 1024px) { .tour-outline-title .deco-02::before { height: 1.467em; right: -2.083em; top: 0; width: 1.661em; } } .tour-outline-list { color: rgb(15, 92, 191); display: inline-block; font-weight: 700; letter-spacing: 0.1em; text-align: left; } @media only screen and (max-width: 1023px) { .tour-outline-list { font-size: 4.267vw; line-height: 1.563; } } @media only screen and (min-width: 1024px) { .tour-outline-list { font-size: 1.4vw; line-height: 2; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-outline-list { font-size: 28px; } } .tour-outline-list-item { display: flex; text-align: center; } .tour-outline-list-item small { font-size: smaller; font-weight: 500; } .tour-outline-list-item dt::after { content: "／"; margin: 0 0.5em; } @media only screen and (max-width: 1023px) { .tour-outline-list-item .logo-yomiuri-ryokou { vertical-align: -webkit-baseline-middle; width: 33.6vw; } } @media only screen and (min-width: 1024px) { .tour-outline-list-item .logo-yomiuri-ryokou { width: 7.5em; } } .tour-outline-caut { color: rgb(15, 92, 191); display: inline-block; font-weight: 500; letter-spacing: 0.1em; line-height: 1.3; text-align: left; padding-left: 1em; text-indent: -1em; } @media only screen and (max-width: 1023px) { .tour-outline-caut { width: 80vw; margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .tour-outline-caut { width: 50vw; margin-top: 1.5vw; } } @media only screen and (max-width: 1023px) { .tour-outline-tw4yp { width: 86.667vw; margin: 4vw auto; } } @media only screen and (min-width: 1024px) { .tour-outline-tw4yp { width: 40vw; margin: 1.5vw auto; } } .tour-outline-tw4yp-ttl { text-align: center; } @media only screen and (max-width: 1023px) { .tour-outline-tw4yp-ttl { margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .tour-outline-tw4yp-ttl { margin-top: 1.5vw; } } .tour-outline-tw4yp-ttl span { display: inline-block; font-weight: 500; line-height: 2; letter-spacing: 0.1em; color: #697AE0; position: relative; z-index: 1; } .tour-outline-tw4yp-ttl span::before { content: ""; width: 100%; height: 40%; background: linear-gradient(to right, rgb(254, 201, 170) 0%, rgb(208, 169, 249) 100%); position: absolute; bottom: -2%; left: 0; z-index: -1; } @media only screen and (max-width: 1023px) { .tour-outline-tw4yp-ttl span { font-size: 4vw; margin: 0.4vw 0 0; } } @media only screen and (min-width: 1024px) { .tour-outline-tw4yp-ttl span { font-size: 1.5vw; margin: 0.5vw 0 0; } } .tour-outline-tw4yp-detail { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .tour-outline-tw4yp-detail { border-radius: 6.267vw; padding: 0.8vw; margin-top: 4vw; } } @media only screen and (min-width: 1024px) { .tour-outline-tw4yp-detail { border-radius: 1.5vw; padding: 0.4vw; margin-top: 1.5vw; } } .tour-outline-tw4yp-detail-inr { background: #fff; font-weight: 500; line-height: 2; } @media only screen and (max-width: 1023px) { .tour-outline-tw4yp-detail-inr { border-radius: 5.333vw; padding: 4vw 0; font-size: 3.2vw; } } @media only screen and (min-width: 1024px) { .tour-outline-tw4yp-detail-inr { border-radius: 1.2vw; padding: 1.5vw 0; font-size: 1.2vw; } } .tour-intro { background: rgba(255, 255, 255, 0.8); color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; } @media only screen and (max-width: 1023px) { .tour-intro { font-size: 4vw; line-height: 1.833; margin: 0 auto 8.667vw; padding: 8.667vw 9.333vw; width: 85.067vw; } } @media only screen and (min-width: 1024px) { .tour-intro { font-size: 1.1vw; line-height: 2.091; margin: 0 auto 1.818em; padding: 2.273em 7.273%; text-align: center; width: 50em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-intro { font-size: 22px; } } .tour-intro::before, .tour-intro::after { content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .tour-intro::before, .tour-intro::after { background: url(../img/tour/waku_sp.svg) 0 0/100% 100% no-repeat; height: 102.581%; width: 89.028%; } } @media only screen and (min-width: 1024px) { .tour-intro::before, .tour-intro::after { background: url(../img/tour/waku.svg) 0 0/100% 100% no-repeat; height: 105.556%; width: 97%; } } @media only screen and (max-width: 1023px) { .tour-intro::before { left: 2.351%; top: -3.871%; } } @media only screen and (min-width: 1024px) { .tour-intro::before { left: 1.545%; top: -9.259%; } } .tour-intro::after { transform: rotate(180deg); } @media only screen and (max-width: 1023px) { .tour-intro::after { right: 2.351%; bottom: -3.871%; } } @media only screen and (min-width: 1024px) { .tour-intro::after { bottom: -9.259%; right: 1.545%; } } .tour-overview { position: relative; } @media only screen and (max-width: 1023px) { .tour-overview { padding: 0 0 8vw; } } @media only screen and (min-width: 1024px) { .tour-overview { padding: 0 0 2vw; } } .tour-overview .tour-overview-inner { margin: 0 auto; position: relative; z-index: 5; color: rgb(15, 92, 191); font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-overview .tour-overview-inner { text-align: left; background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, 0.8) 3%, rgba(255, 255, 255, 0.8) 98%, rgba(255, 255, 255, 0) 98%, rgba(255, 255, 255, 0) 100%); width: 85.067vw; padding: 8vw 9.333vw 8vw 10.667vw; } .tour-overview .tour-overview-inner .tour-ov-lead { font-size: 4vw; line-height: 6.933vw; } } @media only screen and (min-width: 1024px) { .tour-overview .tour-overview-inner { text-align: center; background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.8) 5%, rgba(255, 255, 255, 0.8) 95%, rgba(255, 255, 255, 0) 95%, rgba(255, 255, 255, 0) 100%); width: 55vw; height: 22.25vw; padding-top: 2.75vw; } .tour-overview .tour-overview-inner .tour-ov-lead { font-size: 1.1vw; line-height: 2.4; } } .tour-overview .tour-overview-frm { position: absolute; top: 0; left: 0; width: 100%; } @media only screen and (max-width: 1023px) { .tour-overview .tour-overview-frm { width: 80.8vw; height: 115.733vw; } } @media only screen and (min-width: 1024px) { .tour-overview .tour-overview-frm { width: 53.4vw; height: 22vw; } } .tour-overview .tour-overview-frm-bg { position: absolute; top: 0; fill: none; opacity: 0.6; stroke-linecap: round; } @media only screen and (max-width: 1023px) { .tour-overview .tour-overview-frm-bg { stroke: url(#cityOv-gradient-sp); width: 80.8vw; height: 115.733vw; left: 2.267vw; stroke-width: 1.067vw; } } @media only screen and (min-width: 1024px) { .tour-overview .tour-overview-frm-bg { stroke: url(#cityOv-gradient); stroke-width: 8px; stroke-miterlimit: 10; left: 0.85vw; } } .tour-chibi { margin: auto; z-index: 5; } @media only screen and (max-width: 1023px) { .tour-chibi { width: 72.267vw; margin-bottom: 4vw; } } @media only screen and (min-width: 1024px) { .tour-chibi { max-width: 1382px; width: 86.918%; margin-bottom: 2.364em; } } @media only screen and (max-width: 1023px) { .tour-btn-area { padding: 0 0 22.667vw; } } @media only screen and (min-width: 1024px) { .tour-btn-area { padding: 0vw 0 15.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-btn-area { padding: 0 0 310px; } } .tour-btn { text-align: center; } @media only screen and (max-width: 1023px) { .tour-btn { margin: 0 auto 2vw; width: 69.333vw; } } @media only screen and (min-width: 1024px) { .tour-btn { font-size: 1.5vw; margin: 0 auto 0.833em; width: 23.333em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-btn { font-size: 30px; } } .tour-btn-link { animation: GradietionAnimation 9s ease infinite; background-size: 800% 800%; color: #fff; display: block; position: relative; } @media only screen and (max-width: 1023px) { .tour-btn-link { border-radius: 10.667vw; box-shadow: 0.533vw 0.8vw 0 rgba(0, 0, 0, 0.2); } } @media only screen and (min-width: 1024px) { .tour-btn-link { border-radius: 1.833em; box-shadow: 0.133em 0.2em 0 rgba(0, 0, 0, 0.2); } } .tour-btn-link::before { border: solid #fff; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .tour-btn-link::before { border-radius: 10.133vw; border: 0.533vw solid #fff; height: 20.267vw; left: 0.533vw; top: 0.533vw; width: 68.267vw; } } @media only screen and (min-width: 1024px) { .tour-btn-link::before { border-radius: 1.7em; border: 0.133em solid #fff; height: 3.4em; left: 0.133em; top: 0.133em; width: 23.067em; } } .tour-btn-link::after { background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2018.714%22%3E%20%3Cpath%20d%3D%22M18.882%207.572%202.726.173C1.456-.406%200%20.538%200%201.933v14.764c0%201.395%201.598%202.432%202.867%201.853l15.932-7.614c.402-.2.7-.47.9-.771.594-.898.301-2.083-.817-2.594Z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E") 50% 50%/contain no-repeat; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .tour-btn-link::after { height: 2.533vw; right: 4.667vw; top: 9.333vw; width: 2.667vw; } } @media only screen and (min-width: 1024px) { .tour-btn-link::after { height: 0.633em; right: 0.833em; top: 1.5em; width: 0.667em; } } .tour-btn-link.btn-japanese { background-image: linear-gradient(to right, rgb(148, 159, 234) 0%, rgb(239, 105, 248) 33%, rgb(72, 179, 248) 66%, rgb(46, 234, 182) 100%); } .tour-btn-link.btn-overseas { background-image: linear-gradient(to left, rgb(148, 159, 234) 0%, rgb(239, 105, 248) 33%, rgb(72, 179, 248) 66%, rgb(46, 234, 182) 100%); } .tour-btn-text { align-items: center; display: flex; justify-content: center; } @media only screen and (max-width: 1023px) { .tour-btn-text { height: 21.333vw; } } @media only screen and (min-width: 1024px) { .tour-btn-text { height: 3.667em; } } .tour-btn-text .ja { font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-btn-text .ja { font-size: 4vw; line-height: 1.133; } } @media only screen and (min-width: 1024px) { .tour-btn-text .ja { font-size: 1.5vw; } } @media only screen and (max-width: 1023px) { .tour-btn-text .ja small { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .tour-btn-text .ja small { font-size: 0.9vw; } } .tour-btn-text .en { font-weight: 500; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tour-btn-text .en { font-size: 3.467vw; line-height: 1.277; letter-spacing: 0 !important; } } @media only screen and (min-width: 1024px) { .tour-btn-text .en { font-size: 80%; } } .tour-point { background: rgb(221, 244, 252); position: relative; } @media only screen and (max-width: 1023px) { .tour-point { padding: 6vw 0 0; } } @media only screen and (min-width: 1024px) { .tour-point { padding: 10px 0 0; } } .tour-point::before { border-color: transparent transparent rgb(221, 244, 252); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .tour-point::before { border-bottom-width: 24vw; border-left-width: 94.667vw; top: -24vw; } } @media only screen and (min-width: 1024px) { .tour-point::before { border-bottom-width: 19.75vw; border-left-width: 77vw; top: -19.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point::before { border-bottom-width: 395px; top: -395px; } } .tour-point-header { position: relative; } @media only screen and (max-width: 1023px) { .tour-point-header { padding-top: 21.067vw; } } .tour-airline-contrail { background: #fff; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .tour-airline-contrail { box-shadow: 2px 3px 0 rgba(15, 92, 191, 0.2); height: 1.333vw; left: 55%; top: -4vw; transform: rotate(340deg); width: 50%; } } @media only screen and (min-width: 1024px) { .tour-airline-contrail { box-shadow: 4px 6px 0 rgba(15, 92, 191, 0.2); height: 0.629vw; left: 50%; max-height: 10px; top: -9.434vw; transform: rotate(346deg); width: 60%; } } .tour-airline { left: 50%; position: absolute; z-index: 1; } @media only screen and (max-width: 1023px) { .tour-airline { margin-left: -16.533vw; top: -4.4vw; width: 28vw; } } @media only screen and (min-width: 1024px) { .tour-airline { margin-left: -6.604%; max-width: 230px; top: -8vw; width: 14.465%; } } .tour-point-header-bg { position: absolute; } .tour-point-header-bg.bg-left-top { animation: fadeUpAnime 0.5s linear 0.3s forwards; opacity: 0; } @media only screen and (max-width: 1023px) { .tour-point-header-bg.bg-left-top { left: -11.733vw; top: -11.333vw; width: 37.067vw; } } @media only screen and (min-width: 1024px) { .tour-point-header-bg.bg-left-top { left: -1.572%; max-width: 278px; top: -3.75vw; width: 17.484%; } } .tour-point-header-bg.bg-left-bottom { animation: fadeUpAnime 0.5s linear 0.3s forwards; opacity: 0; } @media only screen and (max-width: 1023px) { .tour-point-header-bg.bg-left-bottom { left: -7.333vw; top: 54.667vw; width: 29.2vw; } } @media only screen and (min-width: 1024px) { .tour-point-header-bg.bg-left-bottom { left: -2.201%; max-width: 219px; top: 7.4vw; width: 13.774%; } } .tour-point-header-bg.bg-right-top { animation: fadeUpAnime 0.5s linear 0.3s forwards; opacity: 0; } @media only screen and (max-width: 1023px) { .tour-point-header-bg.bg-right-top { right: -19.333vw; top: 32.267vw; width: 45.2vw; } } @media only screen and (min-width: 1024px) { .tour-point-header-bg.bg-right-top { max-width: 424px; right: -4.088%; top: -7.5vw; width: 26.667%; } } .tour-point-title { color: rgb(15, 92, 191); height: 8.036em; letter-spacing: 0.1em; text-align: center; padding-top: 0.714em; position: relative; width: 21.429em; } @media only screen and (max-width: 1023px) { .tour-point-title { font-size: 3.733vw; margin: 0 auto 11.2vw; } } @media only screen and (min-width: 1024px) { .tour-point-title { font-size: 1.4vw; margin: 0 auto 3.214em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point-title { font-size: 28px; } } .tour-point-title::before, .tour-point-title::after { background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026.5%20225%22%3E%20%3Cpath%20d%3D%22M22%20225H4.5a4.5%204.5%200%200%201-4.5-4.5V4.5A4.5%204.5%200%200%201%204.5%200H22a4.5%204.5%200%201%201%200%209H9v207h13a4.5%204.5%200%201%201%200%209Z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E") 0 0/contain no-repeat; content: ""; display: block; height: 100%; position: absolute; top: 0; width: 0.946em; } .tour-point-title::before { left: 0; } .tour-point-title::after { transform: rotate(180deg); right: 0; } .tour-point-title-lead { display: inline-block; font-weight: 700; margin-bottom: 0.536em; } .tour-point-title-lead::before, .tour-point-title-lead::after { background: rgb(15, 92, 191); content: ""; display: inline-block; height: 1.429em; vertical-align: middle; width: 0.107em; } .tour-point-title-lead::before { transform: rotate(-26.5deg); margin-right: 1.429em; } .tour-point-title-lead::after { transform: rotate(26.5deg); margin-left: 1.429em; } .tour-point-title-text { font-size: 232.143%; font-weight: 700; margin-bottom: 0.308em; } .tour-point-title-text .en { font-size: 123.077%; margin-right: 0.05em; } .tour-point-title-icon { margin: auto; width: 7.714em; } .tour-point-sec-inner { position: relative; } @media only screen and (min-width: 1024px) { .tour-point-sec-inner { margin: auto; max-width: 1100px; width: 80%; } } .tour-point-section { position: relative; } .tour-point-sec-bg { position: absolute; } @media only screen and (max-width: 1023px) { .tour-point-sec-bg.bg-dot { width: 6.267vw; } } @media only screen and (min-width: 1024px) { .tour-point-sec-bg.bg-dot { max-width: 59px; width: 3.711%; } } .tour-point-sec-title { background: 0 0/contain no-repeat; color: rgb(15, 92, 191); letter-spacing: 0.1em; text-align: center; } @media only screen and (max-width: 1023px) { .tour-point-sec-title { font-size: 3.333vw; height: 24.533vw; margin: 0 auto 4vw; padding-top: 7.333vw; width: 24.533vw; } } @media only screen and (min-width: 1024px) { .tour-point-sec-title { font-size: 1.25vw; height: 7.36em; left: 6.364%; padding-top: 2.4em; position: absolute; width: 7.36em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point-sec-title { font-size: 25px; } } .tour-point-sec-title .en { display: block; font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-point-sec-title .num { font-size: 8.8vw; } } @media only screen and (min-width: 1024px) { .tour-point-sec-title .num { font-size: 264%; } } @media only screen and (max-width: 1023px) { .tour-point-sec-lead-area { white-space: nowrap; margin: 0 auto 4vw 8vw; } } @media only screen and (min-width: 1024px) { .tour-point-sec-lead-area { font-size: 2.1vw; margin-bottom: 0.5em; margin-left: 25.455%; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point-sec-lead-area { font-size: 42px; } } .tour-point-sec-lead { color: #fff; letter-spacing: 0.04em; } @media only screen and (max-width: 1023px) { .tour-point-sec-lead { font-size: 6.667vw; line-height: 1.44; margin-bottom: 1.067vw; } } @media only screen and (min-width: 1024px) { .tour-point-sec-lead { line-height: 1.3; margin-bottom: 0.19em; } } .tour-point-sec-lead.ja { font-weight: 900; } .tour-point-sec-lead.en { font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-point-sec-lead.en { font-size: 6vw; } } @media only screen and (min-width: 1024px) { .tour-point-sec-lead.en { font-size: 90.476%; } } .tour-point-sec-lead .marker { display: inline-block; padding: 0 10px; position: relative; } .tour-point-sec-lead .marker::before { bottom: 0; content: ""; height: 100%; left: 0; position: absolute; width: 100%; } .tour-point-sec-lead .marker::after { bottom: 0; content: ""; height: 100%; left: 0; position: absolute; transform: scaleX(0); transform-origin: 0 0; width: 100%; z-index: 10; } @media only screen and (max-width: 1023px) { .tour-point-sec-lead.en .marker { padding-right: 2.667vw; } } @media only screen and (min-width: 1024px) { .tour-point-sec-lead.en .marker { letter-spacing: 0.11em; padding-right: 0.526em; } } .tour-point-sec-lead .marker-text { text-shadow: 1px 1px 1px rgb(40, 60, 120), -1px 1px 1px rgb(40, 60, 120), 1px -1px 1px rgb(40, 60, 120), -1px -1px 1px rgb(40, 60, 120), 1px 0px 1px rgb(40, 60, 120), 0px 1px 1px rgb(40, 60, 120), -1px 0px 1px rgb(40, 60, 120), 0px -1px 1px rgb(40, 60, 120); position: relative; z-index: 1; } .tour-point-sec-text { color: rgb(40, 60, 120); letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tour-point-sec-text { font-size: 3.733vw; line-height: 1.786; margin: auto; width: 78.667vw; } } @media only screen and (min-width: 1024px) { .tour-point-sec-text { font-size: 0.9vw; line-height: 1.556; margin-left: 25.455%; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point-sec-text { font-size: 18px; } } .tour-point-sec-text .ja { font-weight: 400; margin-bottom: 1em; } .tour-point-sec-text small { font-size: smaller; } .tour-point-sec-image-area { position: relative; width: 100%; } .tour-point-sec-image-chara01, .tour-point-sec-image-chara02 { position: absolute; } @media only screen and (max-width: 1023px) { .tour-point01 { padding-bottom: 70.667vw; } } .tour-point01::after { border-color: transparent rgb(221, 244, 252) transparent transparent; border-style: solid; content: ""; display: block; height: 0; margin-top: -1px; position: absolute; right: 0; width: 0; z-index: 1; } @media only screen and (max-width: 1023px) { .tour-point01::after { border-bottom-width: 23.333vw; border-right-width: 94.667vw; bottom: -23.333vw; } } @media only screen and (min-width: 1024px) { .tour-point01::after { border-bottom-width: 20vw; border-right-width: 78vw; bottom: -20vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point01::after { border-bottom-width: 400px; bottom: -400px; } } .tour-point01 .tour-point-sec-bg { z-index: 2; } @media only screen and (max-width: 1023px) { .tour-point01 .tour-point-sec-bg.bg-left-top { left: 11.333vw; top: 15.733vw; } } @media only screen and (min-width: 1024px) { .tour-point01 .tour-point-sec-bg.bg-left-top { left: 8.679%; top: 0.7vw; } } @media only screen and (min-width: 1024px) { .tour-point01 .tour-point-sec-bg.bg-right-top { right: 9.119%; top: 5vw; } } @media only screen and (max-width: 1023px) { .tour-point01 .tour-point-sec-bg.bg-right-bottom01 { bottom: -47.4vw; right: -11.667vw; width: 40.4vw; } } @media only screen and (min-width: 1024px) { .tour-point01 .tour-point-sec-bg.bg-right-bottom01 { bottom: -10.75vw; max-width: 379px; right: -0.943%; width: 23.836%; } } @media only screen and (max-width: 1023px) { .tour-point01 .tour-point-sec-bg.bg-right-bottom02 { bottom: -6vw; right: 9.333vw; } } @media only screen and (min-width: 1024px) { .tour-point01 .tour-point-sec-bg.bg-right-bottom02 { bottom: -13.75vw; right: 10.692%; } } .tour-point01 .tour-point-sec-title { background-image: url(../img/tour/point01_title.svg); } @media only screen and (min-width: 1024px) { .tour-point01 .tour-point-sec-title { top: 0; } } .tour-point01 .tour-point-sec-lead .marker::before, .tour-point01 .tour-point-sec-lead .marker::after { background: linear-gradient(to right, rgb(250, 178, 252) 0%, rgb(157, 167, 236) 100%); } @media only screen and (max-width: 1023px) { .tour-point01 .tour-point-sec-image-main { margin: auto; width: 93.333vw; position: relative; top: 4vw; } } @media only screen and (min-width: 1024px) { .tour-point01 .tour-point-sec-image-main { margin-left: 12.727%; width: 72.727%; } } .tour-point01 .tour-point-sec-image-chara01 { z-index: 11; } @media only screen and (max-width: 1023px) { .tour-point01 .tour-point-sec-image-chara01 { bottom: -75.667vw; left: -11.5vw; width: 58.133vw; } } @media only screen and (min-width: 1024px) { .tour-point01 .tour-point-sec-image-chara01 { bottom: 7.273%; left: -16.364%; width: 39.636%; } } .tour-point01 .tour-point-sec-image-chara02 { z-index: 10; } @media only screen and (max-width: 1023px) { .tour-point01 .tour-point-sec-image-chara02 { bottom: -98vw; right: 5.333vw; width: 46.933vw; } } @media only screen and (min-width: 1024px) { .tour-point01 .tour-point-sec-image-chara02 { bottom: 10.909%; right: 1.818%; width: 32%; } } .tour-point02 { background: rgb(255, 250, 207); } @media only screen and (max-width: 1023px) { .tour-point02 { padding: 24vw 0 86.667vw; } } @media only screen and (min-width: 1024px) { .tour-point02 { padding: 15.75vw 0 15vw; } } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-bg.bg-left-top01 { left: -14.667vw; top: 15.733vw; width: 37.067vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-bg.bg-left-top01 { left: -3.145%; max-width: 347px; top: 11vw; width: 21.824%; } } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-bg.bg-left-top02 { left: -3.333vw; top: 32vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-bg.bg-left-top02 { left: 3.145%; top: 20vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-bg.bg-right-top { right: 9.119%; top: 5vw; } } .tour-point02 .tour-point-sec-title { background-image: url(../img/tour/point02_title.svg); } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-title { top: 0; } } .tour-point02 .tour-point-sec-lead .marker::before, .tour-point02 .tour-point-sec-lead .marker::after { background: linear-gradient(to right, rgb(111, 234, 160) 0%, rgb(102, 191, 248) 100%); } .tour-point02 .tour-point-sec-image-main { margin: 0 auto; position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-main { width: 85.067vw; border-radius: 2.667vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-main { width: 28vw; border-radius: 1vw; padding: 0.4vw; } } .tour-point02 .tour-point-sec-image-main-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-main-line { border-radius: 1.6vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-main-line { border-radius: 0.6vw; padding: 0.15vw; } } .tour-point02 .tour-point-sec-image-main-wh { background: #fff; } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-main-wh { border-radius: 1.067vw; padding: 4.533vw 0; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-main-wh { border-radius: 0.4vw; padding: 1.5vw 0; } } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-main { margin-top: 9.333vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-main { margin-top: 2vw; } } .tour-point02 .tour-point-sec-image-main-copy { text-align: right; color: #808080; } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-main-copy { margin: 1.333vw 4vw 0; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-main-copy { margin: 0.5vw 1.5vw 0; font-size: 0.7vw; } } .tour-point02 .tour-point-sec-image-main-caut { text-align: left; } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-main-caut { font-size: 3.2vw; margin: 1.333vw 4vw 0; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-main-caut { font-size: 0.9vw; margin: 0.5vw 1.5vw 0; } } .tour-point02 .tour-point-sec-image-main-caut li { margin-bottom: 0.5em; } .tour-point02 .tour-point-sec-image-main-img { margin: auto; } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-main-img { width: 62.667vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-main-img { width: 23.5vw; } } .tour-point02 .tour-point-sec-image-main-img span { display: block; width: 100%; text-align: center; overflow-x: #283c78; } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-main-img span { margin-top: -4.5em; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-main-img span { margin-top: -3em; font-size: 0.7vw; } } .tour-point02 .tour-point-sec-image-chara01 { z-index: 10; } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-chara01 { bottom: -95.867vw; left: 4vw; width: 43.467vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-chara01 { bottom: -10.25vw; left: 1.364%; width: 29.636%; } } .tour-point02 .tour-point-sec-image-chara02 { z-index: 11; } @media only screen and (max-width: 1023px) { .tour-point02 .tour-point-sec-image-chara02 { bottom: -99.5vw; right: 2vw; width: 41.067vw; } } @media only screen and (min-width: 1024px) { .tour-point02 .tour-point-sec-image-chara02 { bottom: -11vw; right: 1.364%; width: 28%; } } .tour-point03 { background: rgb(240, 250, 255); } @media only screen and (max-width: 1023px) { .tour-point03 { padding: 3.333vw 0 136.667vw; } } @media only screen and (min-width: 1024px) { .tour-point03 { padding: 8vw 0 16.5vw; } } .tour-point03::before { border-color: transparent transparent rgb(240, 250, 255); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .tour-point03::before { border-bottom-width: 24vw; border-left-width: 94.667vw; top: -24vw; } } @media only screen and (min-width: 1024px) { .tour-point03::before { border-bottom-width: 20vw; border-left-width: 77vw; top: -20vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point03::before { border-bottom-width: 400px; top: -400px; } } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-bg.bg-left-top01 { left: 19.333vw; top: -10vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-bg.bg-left-top01 { left: 15.409%; top: -6vw; } } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-bg.bg-left-top02 { left: -9.333vw; top: -15.333vw; width: 44.533vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-bg.bg-left-top02 { left: -5%; max-width: 334px; top: -7.25vw; width: 21.006%; } } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-bg.bg-right-top01 { right: 4.667vw; top: -28vw; width: 12.933vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-bg.bg-right-top01 { max-width: 112px; right: 14.78%; top: -16vw; width: 7.044%; } } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-bg.bg-right-top02 { right: 2px; top: 105.067vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-bg.bg-right-top02 { right: 12.579%; top: 0.5vw; } } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-bg.bg-right-bottom01 { bottom: 114.333vw; right: -0.93vw; width: 27.6vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-bg.bg-right-bottom01 { bottom: 36.5vw; max-width: 259px; right: -1.258%; width: 16.289%; } } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-bg.bg-right-bottom02 { bottom: 29.667vw; right: 55.333vw; width: 36vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-bg.bg-right-bottom02 { bottom: 23.25vw; max-width: 363px; right: 2.83%; width: 22.83%; } } .tour-point03 .tour-point-sec-title { background-image: url(../img/tour/point03_title.svg); } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-title { top: -8.6em; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-lead-area { position: absolute; top: -5em; } } .tour-point03 .tour-point-sec-lead .marker::before, .tour-point03 .tour-point-sec-lead .marker::after { background: linear-gradient(to right, rgb(106, 214, 238) 0%, rgb(133, 103, 228) 100%); } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-text .note { font-size: 2.8vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-text .note { font-size: 83.333%; } } .tour-point03 .tour-point-sec-image-main { margin: 0 auto; position: relative; z-index: 10; background: #fff; } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-main { width: 85.067vw; border-radius: 2.667vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-main { width: 28vw; border-radius: 1vw; padding: 0.4vw; } } .tour-point03 .tour-point-sec-image-main-line { background: linear-gradient(to right, rgb(255, 210, 181) 0%, rgb(194, 144, 245) 100%); } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-main-line { border-radius: 1.6vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-main-line { border-radius: 0.6vw; padding: 0.15vw; } } .tour-point03 .tour-point-sec-image-main-wh { background: #fff; } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-main-wh { border-radius: 1.067vw; padding: 4.533vw 0; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-main-wh { border-radius: 0.4vw; padding: 1.5vw 0; } } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-main { margin-top: 9.333vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-main { margin-top: 2vw; } } .tour-point03 .tour-point-sec-image-main-copy { text-align: right; color: #808080; } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-main-copy { margin: 1.333vw 8vw 0; font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-main-copy { margin: 0.5vw 3vw 0; font-size: 0.7vw; } } .tour-point03 .tour-point-sec-image-main-caut { text-align: left; } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-main-caut { font-size: 3.2vw; margin: 1.333vw 8vw 0; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-main-caut { font-size: 0.9vw; margin: 0.5vw 3vw 0; } } .tour-point03 .tour-point-sec-image-main-caut li { margin-bottom: 0.5em; } .tour-point03 .tour-point-sec-image-main-img { margin: auto; } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-main-img { width: 66.533vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-main-img { width: 24.95vw; } } .tour-point03 .tour-point-sec-image-main span { display: block; width: 100%; text-align: center; overflow-x: #283c78; margin-top: -3em; } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-main span { font-size: 2.133vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-main span { font-size: 0.7vw; } } .tour-point03 .tour-point-sec-image-chara01 { z-index: 10; } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-chara01 { bottom: -79vw; left: 2.667vw; width: 48.267vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-chara01 { bottom: -10vw; left: -1.364%; width: 32.909%; } } .tour-point03 .tour-point-sec-image-chara02 { z-index: 11; } @media only screen and (max-width: 1023px) { .tour-point03 .tour-point-sec-image-chara02 { bottom: -135vw; right: -2.7vw; width: 60.267vw; } } @media only screen and (min-width: 1024px) { .tour-point03 .tour-point-sec-image-chara02 { bottom: -13.25vw; right: -7.455%; width: 41.091%; } } .tour-point04 { background: rgb(255, 250, 207); } @media only screen and (max-width: 1023px) { .tour-point04 { padding: 2vw 0 61.333vw; } } @media only screen and (min-width: 1024px) { .tour-point04 { padding: 7vw 0 18.75vw; } } .tour-point04::before { border-color: transparent transparent transparent rgb(255, 250, 207); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .tour-point04::before { border-left-width: 94.667vw; border-top-width: 25.333vw; top: -25.333vw; } } @media only screen and (min-width: 1024px) { .tour-point04::before { border-left-width: 77vw; border-top-width: 20vw; top: -20vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point04::before { border-top-width: 400px; top: -400px; } } @media only screen and (max-width: 1023px) { .tour-point04 .tour-point-sec-bg.bg-left-top01 { left: -0.933vw; top: -26.4vw; width: 19.6vw; } } @media only screen and (min-width: 1024px) { .tour-point04 .tour-point-sec-bg.bg-left-top01 { left: -0.629%; max-width: 184px; top: -10vw; width: 11.572%; } } @media only screen and (max-width: 1023px) { .tour-point04 .tour-point-sec-bg.bg-left-top02 { left: 18vw; top: 15vw; } } @media only screen and (min-width: 1024px) { .tour-point04 .tour-point-sec-bg.bg-left-top02 { left: 11.95%; top: 3.75vw; } } @media only screen and (max-width: 1023px) { .tour-point04 .tour-point-sec-bg.bg-left-bottom { bottom: -18vw; left: -3.067vw; width: 30.533vw; z-index: 5; } } @media only screen and (min-width: 1024px) { .tour-point04 .tour-point-sec-bg.bg-left-bottom { bottom: 14.75vw; left: -2.767%; max-width: 286px; width: 17.987%; } } .tour-point04 .tour-point-sec-title { background-image: url(../img/tour/point04_title.svg); } @media only screen and (min-width: 1024px) { .tour-point04 .tour-point-sec-title { top: -9.52em; } } @media only screen and (min-width: 1024px) { .tour-point04 .tour-point-sec-lead-area { position: absolute; top: -6.184em; } } .tour-point04 .tour-point-sec-lead .marker::before, .tour-point04 .tour-point-sec-lead .marker::after { background: linear-gradient(to right, rgb(255, 213, 184) 0%, rgb(197, 147, 248) 100%); } .tour-point04 .tour-point-sec-image-main { margin: auto; } @media only screen and (max-width: 1023px) { .tour-point04 .tour-point-sec-image-main { margin-top: 11.333vw; width: 78.667vw; } } @media only screen and (min-width: 1024px) { .tour-point04 .tour-point-sec-image-main { margin-top: 35px; width: 50.909%; } } @media only screen and (max-width: 1023px) { .tour-point04 .tour-point-sec-image-main img { border-radius: 2.667vw; } } @media only screen and (min-width: 1024px) { .tour-point04 .tour-point-sec-image-main img { border-radius: 20px; } } .tour-point04 .tour-point-sec-image-chara01 { z-index: 10; } @media only screen and (max-width: 1023px) { .tour-point04 .tour-point-sec-image-chara01 { bottom: -95.667vw; left: -5vw; width: 58.533vw; } } @media only screen and (min-width: 1024px) { .tour-point04 .tour-point-sec-image-chara01 { bottom: -6vw; left: -8.545%; width: 39.909%; } } .tour-point04 .tour-point-sec-image-chara02 { z-index: 11; } @media only screen and (max-width: 1023px) { .tour-point04 .tour-point-sec-image-chara02 { bottom: -106.14vw; right: -2.5vw; width: 57.867vw; } } @media only screen and (min-width: 1024px) { .tour-point04 .tour-point-sec-image-chara02 { bottom: -16.5vw; right: -2.909%; width: 39.455%; } } .tour-hotel { background: rgb(240, 250, 255); position: relative; } @media only screen and (max-width: 1023px) { .tour-hotel { padding: 42.667vw 0 29.333vw; } } @media only screen and (min-width: 1024px) { .tour-hotel { padding: 6.5vw 0 20.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-hotel { padding: 130px 0 410px; } } .tour-hotel::before { border-color: transparent transparent rgb(240, 250, 255); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .tour-hotel::before { border-bottom-width: 24vw; border-left-width: 94.667vw; top: -24vw; } } @media only screen and (min-width: 1024px) { .tour-hotel::before { border-bottom-width: 20vw; border-left-width: 77vw; top: -20vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-hotel::before { border-bottom-width: 400px; top: -400px; } } @media only screen and (min-width: 1024px) { .tour-hotel .p-sec-title { left: 50%; transform: translateX(-50%); position: absolute; top: -3.333em; } } .tour-hotel .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#cityTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #cityTickets-gradient-stop01 { animation: cityTicketsStop1 1s ease-in-out infinite alternate; } #cityTickets-gradient-stop02 { animation: cityTicketsStop2 1s ease-in-out infinite alternate; } @keyframes cityTicketsStop1 { 0% { stop-color: #90ea87; } 100% { stop-color: #69b1f8; } } @keyframes cityTicketsStop2 { 100% { stop-color: #ff9999; } 0% { stop-color: #ffb732; } } @keyframes hotelStop1 { 0% { stop-color: #fc84a4; } 100% { stop-color: #69b1f8; } } @keyframes hotelStop2 { 100% { stop-color: #fc84a4; } 0% { stop-color: #69b1f8; } } .hotel-bg { position: absolute; } @media only screen and (max-width: 1023px) { .hotel-bg.bg-left-top01 { left: -12.667vw; top: 88vw; width: 26.133vw; } } @media only screen and (min-width: 1024px) { .hotel-bg.bg-left-top01 { left: 0.75vw; max-width: 326px; top: 11.25vw; width: 16.3vw; } } @media only screen and (max-width: 1023px) { .hotel-bg.bg-left-top02 { left: -2.4vw; top: 128.667vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .hotel-bg.bg-left-top02 { left: 6.75vw; top: 36.25vw; width: 2.95vw; } } @media only screen and (max-width: 1023px) { .hotel-bg.bg-right-top { right: -8vw; top: -5.333vw; width: 36vw; } } @media only screen and (min-width: 1024px) { .hotel-bg.bg-right-top { right: -0.25vw; top: -19.75vw; width: 16.9vw; } } @media only screen and (max-width: 1023px) { .hotel-bg.bg-right-bottom { bottom: 22vw; right: -4vw; width: 30.533vw; } } @media only screen and (min-width: 1024px) { .hotel-bg.bg-right-bottom { bottom: 16vw; right: 9.5vw; width: 14.3vw; } } @media only screen and (max-width: 1023px) { .hotel-bg.bg-left-bottom { bottom: 19.333vw; left: 15.333vw; width: 6.267vw; } } .hotel-text { color: rgb(15, 92, 191); font-weight: 700; letter-spacing: 0.1em; position: relative; text-align: center; z-index: 2; } @media only screen and (max-width: 1023px) { .hotel-text { font-size: 4.533vw; line-height: 1.647; margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .hotel-text { font-size: 1.3vw; line-height: 1.769; margin-bottom: 2.885em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .hotel-text { font-size: 26px; } } .hotel-box { background: #fff; margin: auto; position: relative; z-index: 5; } @media only screen and (max-width: 1023px) { .hotel-box { border-radius: 6.667vw; padding: 5.333vw 0; width: 85.067vw; } } @media only screen and (min-width: 1024px) { .hotel-box { border-radius: 50px; max-width: 1100px; padding: 30px 0; width: 80%; } } @media only screen and (max-width: 1023px) { .hotel-sec { margin: auto; padding: 4vw 0; width: 66.667vw; } } @media only screen and (min-width: 1024px) { .hotel-sec { display: flex; justify-content: space-between; font-size: 0.8vw; margin: 3.438em auto; width: 81.818%; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .hotel-sec { font-size: 16px; } } @media only screen and (min-width: 1024px) { .hotel-detail { width: 30%; } } .hotel-detail-num { border-bottom: 1px solid rgb(40, 60, 120); } @media only screen and (max-width: 1023px) { .hotel-detail-num { margin-bottom: 3.333vw; padding-bottom: 2vw; } } @media only screen and (min-width: 1024px) { .hotel-detail-num { margin-bottom: 1.25em; padding-bottom: 0.938em; } } @media only screen and (max-width: 1023px) { .hotel-detail-num img { width: 24vw; } } @media only screen and (min-width: 1024px) { .hotel-detail-num img { width: 9.375em; } } .hotel-detail-name { color: rgb(40, 60, 120); font-weight: 700; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .hotel-detail-name { font-size: 5.333vw; margin-bottom: 2vw; } } @media only screen and (min-width: 1024px) { .hotel-detail-name { font-size: 187.5%; margin-bottom: 0.25em; } } .hotel-detail-text { color: rgb(40, 60, 120); letter-spacing: 0.1em; line-height: 1.4; } @media only screen and (max-width: 1023px) { .hotel-detail-text { font-size: 3.467vw; } } @media only screen and (max-width: 1023px) { .hotel-image { margin-top: 2.667vw; } } @media only screen and (min-width: 1024px) { .hotel-image { width: 66%; } } .hotel-more { left: 50%; position: absolute; transform: translateX(-50%); z-index: 5; } @media only screen and (max-width: 1023px) { .hotel-more { bottom: 2vw; width: 1.333vw; } } @media only screen and (min-width: 1024px) { .hotel-more { bottom: 5.75vw; width: 0.5vw; } } .tour-plan { background: rgb(221, 244, 252); position: relative; } @media only screen and (max-width: 1023px) { .tour-plan { padding: 4.667vw 0 31.733vw; } } @media only screen and (min-width: 1024px) { .tour-plan { padding: 9.25vw 0 21.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-plan { padding: 185px 0 430px; } } .tour-plan::before { border-color: transparent transparent rgb(221, 244, 252); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .tour-plan::before { border-bottom-width: 24vw; border-left-width: 94.667vw; top: -24vw; } } @media only screen and (min-width: 1024px) { .tour-plan::before { border-bottom-width: 19vw; border-left-width: 77vw; top: -19vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-plan::before { border-bottom-width: 380px; top: -380px; } } @media only screen and (min-width: 1024px) { .tour-plan .p-sec-title { left: 50%; transform: translateX(-50%); position: absolute; top: -3.333em; } } .tour-plan .p-sec-title-bg { fill: none; opacity: 0.6; stroke: url(#cityTickets-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 10px; } #tour-plan-gradient-stop01 { animation: planStop1 5s ease-in-out infinite alternate; } #tour-plan-gradient-stop02 { animation: planStop2 5s ease-in-out infinite alternate; } @keyframes planStop1 { 0% { stop-color: #e4b3f8; } 100% { stop-color: #1bcae4; } } @keyframes planStop2 { 100% { stop-color: #e4b3f8; } 0% { stop-color: #1bcae4; } } .tour-plan-bg { position: absolute; } @media only screen and (max-width: 1023px) { .tour-plan-bg.bg-left-top { left: -10vw; top: 6.4vw; width: 32.933vw; } } @media only screen and (min-width: 1024px) { .tour-plan-bg.bg-left-top { left: 2.25vw; max-width: 309px; top: -8.75vw; width: 15.45vw; } } @media only screen and (max-width: 1023px) { .tour-plan-bg.bg-right-top { right: -9.067vw; top: -16.667vw; width: 44.667vw; } } @media only screen and (min-width: 1024px) { .tour-plan-bg.bg-right-top { right: -0.1vw; max-width: 418px; top: -4.75vw; width: 20.9vw; } } @media only screen and (max-width: 1023px) { .tour-plan-bg.bg-right-top02 { display: none; left: -2.4vw; top: 128.667vw; width: 6.267vw; } } @media only screen and (max-width: 1023px) { .tour-plan-bg.bg-right-bottom01 { bottom: 536.533vw; right: -1.6vw; width: 7.867vw; } } @media only screen and (min-width: 1024px) { .tour-plan-bg.bg-right-bottom01 { bottom: 62.75vw; right: 3vw; width: 2.95vw; } } @media only screen and (max-width: 1023px) { .tour-plan-bg.bg-right-bottom02 { bottom: 478.4vw; right: -10.933vw; width: 24.4vw; } } @media only screen and (min-width: 1024px) { .tour-plan-bg.bg-right-bottom02 { bottom: 35.25vw; right: -1.1vw; width: 11.45vw; } } @media only screen and (max-width: 1023px) { .tour-plan-bg.bg-right-bottom03 { bottom: 273.333vw; right: -1.333vw; width: 30.533vw; } } @media only screen and (min-width: 1024px) { .tour-plan-bg.bg-right-bottom03 { bottom: 18.25vw; right: 8vw; width: 14.3vw; } } .tour-plan-box { background: #fff; margin: auto; position: relative; z-index: 5; } @media only screen and (max-width: 1023px) { .tour-plan-box { border-radius: 6.667vw; padding: 8vw 0; width: 85.067vw; } } @media only screen and (min-width: 1024px) { .tour-plan-box { border-radius: 50px; max-width: 1100px; padding: 30px 0; width: 80%; } } .tour-plan-sec { display: flex; } @media only screen and (max-width: 1023px) { .tour-plan-sec { flex-direction: column-reverse; } .tour-plan-sec:not(:last-child) { margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .tour-plan-sec { justify-content: space-between; font-size: 0.8vw; margin: 3.438em auto; width: 81.818%; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-plan-sec { font-size: 16px; } } @media only screen and (max-width: 1023px) { .tour-note-sec { margin-bottom: 9.333vw; } } @media only screen and (min-width: 1024px) { .tour-note-sec { justify-content: space-between; margin: 0 auto 3.75em; width: 81.818%; } } .tour-note-detail { color: rgb(40, 60, 120); letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tour-note-detail { font-size: 3.467vw; line-height: 4.8vw; margin: 0 0 17.333vw 8vw; } } @media only screen and (min-width: 1024px) { .tour-note-detail { font-size: 1vw; line-height: 1.75em; } } .tour-note-detail .soon { color: rgb(40, 60, 120); font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-note-detail .soon { font-size: 4.267vw; } } @media only screen and (min-width: 1024px) { .tour-note-detail .soon { font-size: 71.429%; } } @media only screen and (max-width: 1023px) { .tour-booking-sec { margin: 0 0 4vw 8vw; } } @media only screen and (min-width: 1024px) { .tour-booking-sec { justify-content: space-between; margin: 0 auto 3.75em; width: 81.818%; } } .tour-booking-detail { color: rgb(40, 60, 120); } @media only screen and (max-width: 1023px) { .tour-booking-detail { font-size: 3.2vw; line-height: 5.333vw; } } @media only screen and (min-width: 1024px) { .tour-booking-detail { font-size: 0.9vw; line-height: 1.75em; } } .tour-booking-detail b { font-weight: 900; color: #20a6e5; } @media only screen and (min-width: 1024px) { .tour-plan-detail { width: 52.222%; } } @media only screen and (max-width: 1023px) { .tour-plan-detail-title { margin: 0 0 1.333vw 8vw; } } @media only screen and (min-width: 1024px) { .tour-plan-detail-title { margin-bottom: 1em; } } .tour-plan-detail-title .ja { color: rgb(40, 60, 120); display: block; font-weight: 700; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tour-plan-detail-title .ja { font-size: 3.2vw; margin-bottom: 2.667vw; } } @media only screen and (min-width: 1024px) { .tour-plan-detail-title .ja { font-size: 125%; margin-bottom: 0.5em; } } .tour-plan-detail-title .en { color: rgb(105, 122, 224); display: block; font-weight: 700; letter-spacing: 0.04em; } @media only screen and (max-width: 1023px) { .tour-plan-detail-title .en { font-size: 7.333vw; } } @media only screen and (min-width: 1024px) { .tour-plan-detail-title .en { font-size: 312.5%; } } .tour-plan-detail-date { color: rgb(40, 60, 120); font-weight: 700; letter-spacing: 0.1em; } .tour-plan-detail-date span.ja { font-size: 0.8em; font-weight: 600; } .tour-plan-detail-date span.sml { font-size: 0.8em; } @media only screen and (max-width: 1023px) { .tour-plan-detail-date { font-size: 4.8vw; margin: 0 0 2vw 8vw; } } @media only screen and (min-width: 1024px) { .tour-plan-detail-date { font-size: 175%; margin-bottom: 0.714em; } } .tour-plan-detail-date .soon { color: rgb(40, 60, 120); font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-plan-detail-date .soon { font-size: 4.267vw; } } @media only screen and (min-width: 1024px) { .tour-plan-detail-date .soon { font-size: 71.429%; } } .tour-plan-summary-title { background: rgb(40, 60, 120); color: #fff; font-weight: 700; letter-spacing: 0.1em; text-align: center; } @media only screen and (max-width: 1023px) { .tour-plan-summary-title { border-radius: 0.8vw; font-size: 2.933vw; line-height: 1.536; margin: 0 0 2.667vw 8vw; width: 27.733vw; } } @media only screen and (min-width: 1024px) { .tour-plan-summary-title { border-radius: 0.375em; line-height: 1.625; margin-bottom: 1.25em; width: 10em; } } .tour-plan-summary-list { color: rgb(40, 60, 120); letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tour-plan-summary-list { font-size: 3.467vw; line-height: 1.769; margin: 0 0 0 8vw; } } @media only screen and (min-width: 1024px) { .tour-plan-summary-list { font-size: 125%; line-height: 1.75; } } .tour-plan-summery-item { padding-left: 1.5em; position: relative; } .tour-plan-summery-item::before { background: rgb(40, 60, 120); border-radius: 50%; content: ""; position: absolute; left: 0; height: 1em; top: 30%; transform-origin: left center; transform: scale(0.45); width: 1em; } @media only screen and (min-width: 1024px) { .tour-plan-summery-item::before { top: 20%; } } .tour-plan-summery-item.pickup { color: rgb(105, 122, 224); } .tour-plan-summery-item.pickup::before { background: rgb(105, 122, 224); } .tour-plan-summery-item.pickup::after { border: 1px solid rgb(105, 122, 224); border-radius: 50%; content: ""; position: absolute; left: -0.25em; height: 1em; top: 30%; transform-origin: left center; width: 1em; } @media only screen and (min-width: 1024px) { .tour-plan-summery-item.pickup::after { top: 20%; } } .tour-plan-summery-item.pickup .marker { position: relative; } .tour-plan-summery-item.pickup .marker::before { background: linear-gradient(to right, rgba(148, 159, 234, 0.3) 0%, rgba(239, 105, 248, 0.3) 100%); bottom: 5%; content: ""; height: 35%; left: 0; position: absolute; width: 100%; } .tour-plan-summery-item.pickup .marker:first-child::after { background: url(../img/tour/plan_deco.svg) 0 0/contain no-repeat; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .tour-plan-summery-item.pickup .marker:first-child::after { height: 6.8vw; right: -5.067vw; top: -4.267vw; width: 5.733vw; } } @media only screen and (min-width: 1024px) { .tour-plan-summery-item.pickup .marker:first-child::after { height: 2em; right: -1.5em; top: -1.3em; width: 1.7em; } } .tour-plan-summery-item.pickup .marker-text { font-weight: 700; position: relative; z-index: 1; } @media only screen and (max-width: 1023px) { .tour-plan-summery-item.pickup .marker-text { font-size: 4.533vw; } } @media only screen and (min-width: 1024px) { .tour-plan-summery-item.pickup .marker-text { font-size: 130%; } } @media only screen and (max-width: 1023px) { .tour-plan-image { margin: 0 auto 5.333vw; width: 66.667vw; } } @media only screen and (min-width: 1024px) { .tour-plan-image { width: 44.444%; } } @media only screen and (max-width: 1023px) { .tour-plan .tour-btn-area { padding-bottom: 6.667vw; } } @media only screen and (min-width: 1024px) { .tour-plan .tour-btn-area { padding: 0vw 0 3.5vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-plan .tour-btn-area { padding: 0 0 70px; } } .tour-point05 { background: rgb(255, 250, 207); } @media only screen and (max-width: 1023px) { .tour-point05 { padding: 0 0 14vw; } } @media only screen and (min-width: 1024px) { .tour-point05 { padding: 0 0 5vw; } } .tour-point05::before { border-color: transparent transparent transparent rgb(255, 250, 207); border-style: solid; content: ""; display: block; height: 0; margin-bottom: -1px; position: absolute; right: 0; width: 0; } @media only screen and (max-width: 1023px) { .tour-point05::before { border-left-width: 94.667vw; border-top-width: 25.333vw; top: -25.333vw; } } @media only screen and (min-width: 1024px) { .tour-point05::before { border-left-width: 77vw; border-top-width: 20vw; top: -20vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point05::before { border-top-width: 400px; top: -400px; } } .tour-point05 .tour-point-sec-inner { position: relative; } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-inner { padding: 4.75vw 0 0; } } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point-sec-bg.bg-left-top01 { left: -3.6vw; top: -18.4vw; width: 19.6vw; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-bg.bg-left-top01 { left: -0.629%; max-width: 184px; top: -10vw; width: 11.572%; } } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point-sec-bg.bg-right-top01 { left: -3.6vw; top: -18.4vw; width: 19.6vw; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-bg.bg-right-top01 { left: 77%; max-width: 370px; top: 145vw; width: 23.27%; } } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point-sec-bg.bg-left-top02 { left: 18vw; top: 10.667vw; width: 6.267vw; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-bg.bg-left-top02 { left: 9.5vw; top: -2.75vw; width: 2.95vw; } } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point-sec-bg.bg-left-top03 { left: -20vw; top: 170.667vw; width: 38.133vw; opacity: 0.8; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-bg.bg-left-top03 { top: 55vw; left: 5.031%; max-width: 286px; width: 17.987%; } } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point-sec-bg.bg-left-bottom { display: none; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-bg.bg-left-bottom { bottom: 47.6vw; left: -1.887%; max-width: 286px; width: 17.987%; } } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point-sec-bg.bg-right-bottom { bottom: 68vw; right: 5.333vw; width: 36vw; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-bg.bg-right-bottom { bottom: 15vw; right: 4.403%; max-width: 286px; width: 17.987%; } } .tour-point05 .tour-point-sec-title { background-image: url(../img/tour/point05_title.svg); } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-title { top: -4em; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-lead-area { position: absolute; top: -2.368em; } } .tour-point05 .tour-point-sec-lead .marker::before, .tour-point05 .tour-point-sec-lead .marker::after { background: linear-gradient(to right, rgb(238, 183, 208) 0%, rgb(255, 185, 110) 100%); } .tour-point05 .tour-point-sec-text { white-space: nowrap; } .tour-point05 .tour-point-sec-text p { width: fit-content; width: -moz-fit-content; font-weight: 700; border-bottom: 1px solid #283c78; } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-text p { font-size: 1.2vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point05 .tour-point-sec-text p { font-size: 24px; } } .tour-point05 .tour-point05-order { font-weight: 700; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point05-order { font-size: 3.467vw; margin: 0 0 8vw 8vw; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point05-order { font-size: 1.3vw; margin-left: 25.455%; margin-bottom: 2.5em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point05 .tour-point05-order { font-size: 26px; } } .tour-point05 .tour-point05-order-title { background: rgb(40, 60, 120); color: #fff; text-align: center; } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point05-order-title { border-radius: 0.8vw; line-height: 1.385; margin: 0 0 2.667vw; width: 8em; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point05-order-title { border-radius: 0.231em; line-height: 1.385; margin-bottom: 0.577em; width: 7.769em; } } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point-sec-image-main { margin: 0 4.667vw 8.667vw auto; width: 60vw; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-image-main { margin: 0 auto 4.5vw; width: 63.636%; } } .tour-point05 .tour-point-sec-image-chara01 { z-index: 10; } @media only screen and (max-width: 1023px) { .tour-point05 .tour-point-sec-image-chara01 { bottom: 13.333vw; left: 1.333vw; width: 52.4vw; } } @media only screen and (min-width: 1024px) { .tour-point05 .tour-point-sec-image-chara01 { top: 65vw; left: -10.909%; width: 35.727%; } } .tour-point05 .tour-btn-area { padding-bottom: 0; } .tour-point05-order-btn { background: rgb(15, 92, 191); color: #fff; display: block; font-weight: 700; position: absolute; text-align: center; z-index: 10; } @media only screen and (max-width: 1023px) { .tour-point05-order-btn { border-radius: 10.667vw; font-size: 4vw; line-height: 3; right: 6.667vw; top: 12vw; width: 57.333vw; } } @media only screen and (min-width: 1024px) { .tour-point05-order-btn { border-radius: 1.731em; font-size: 1.3vw; line-height: 3.462; left: 0; margin: auto; right: 0; top: 3.462em; width: 18.462em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-point05-order-btn { font-size: 26px; } } @media only screen and (min-width: 1024px) { .tour-point05-order-btn:hover { opacity: 0.8; } } .tour-point05-order-btn::after { background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2018.714%22%3E%20%3Cpath%20d%3D%22M18.882%207.572%202.726.173C1.456-.406%200%20.538%200%201.933v14.764c0%201.395%201.598%202.432%202.867%201.853l15.932-7.614c.402-.2.7-.47.9-.771.594-.898.301-2.083-.817-2.594Z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E") 50% 50%/contain no-repeat; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .tour-point05-order-btn::after { height: 2.533vw; right: 1.333vw; top: 5.333vw; width: 2.667vw; } } @media only screen and (min-width: 1024px) { .tour-point05-order-btn::after { height: 0.731em; right: 1.538em; top: 1.385em; width: 0.769em; } } .tour-goods { position: relative; z-index: 10; background: #fff; /* .tour-btn { @include media(sp) { width: spVW(520); margin: spVW(130) auto; } @include media(pc) { width: calcSize(556, $base_width, 100vw); margin: calcSize(100, $base_width, 100vw) auto; font-size: calcSize(34, $base_width, 100vw); @include media(max-width) { font-size: 34px; } } } .tour-btn-link, .tour-btn-soon { animation: none; box-shadow: none; position: relative; &::before { @include media(sp) { border-radius: spVW(76); border: spVW(2) solid #fff; height: spVW(112); left: spVW(4); top: spVW(4); width: spVW(512); } @include media(pc) { border-radius: 100vh; border: calcSize(2, 34, 1em) solid #fff; height: calcSize(116, 34, 1em); left: calcSize(5, 34, 1em); top: calcSize(5, 34, 1em); width: calcSize(546, 34, 1em); } } } .tour-btn-link { background-color: #283C78; &::after { @include media(sp) { top: 50%; transform: translateY(-50%); } } } .tour-btn-soon { background-color: #666; &::after{ content: 'coming soon'; display: block; position: absolute; @include media(sp) { bottom: spVW(20); right: calc(50% - 3em); font-size: spVW(24); line-height: 1; } @include media(pc) { top: 0; right: 5%; font-size: calcSize(22, $base_width, 100vw); } } } */ } @media only screen and (max-width: 1023px) { .tour-goods { width: 85.067vw; margin: 10.667vw auto 66.667vw; border-radius: 6.4vw; padding: 1.067vw; } } @media only screen and (min-width: 1024px) { .tour-goods { width: 55vw; margin: 4.3vw auto 0; border-radius: 2.4vw; padding: 0.4vw; } } .tour-goods-line { background: linear-gradient(to right, rgb(255, 207, 176) 0%, rgb(190, 136, 247) 100%); } @media only screen and (max-width: 1023px) { .tour-goods-line { border-radius: 6.267vw; padding: 0.4vw; } } @media only screen and (min-width: 1024px) { .tour-goods-line { border-radius: 2.35vw; padding: 0.15vw; } } .tour-goods-wh { background: #fff; } @media only screen and (max-width: 1023px) { .tour-goods-wh { border-radius: 6.133vw; padding: 5.333vw 0 10.667vw; font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .tour-goods-wh { border-radius: 2.3vw; padding: 2vw 0; font-size: 1vw; } } .tour-goods .tour-goods-title { color: #fff; background: #697ae0; margin: 0 auto; border-radius: 100vh; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-title { font-size: 5.6vw; width: 37.333vw; height: 9.333vw; margin-bottom: 6.667vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-title { font-size: 1.2vw; width: 11vw; height: 2vw; margin-bottom: 1.25vw; } } .tour-goods .tour-goods-date { border: 5px solid #abb4ed; border-radius: 10px; background: #fff; display: flex; align-items: center; font-weight: 500; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-date { width: 73.333vw; margin: 6.267vw auto 0; padding: 2.667vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-date { width: 43vw; margin: 2vw auto 0; padding: 1vw; } } .tour-goods .tour-goods-date dt { display: flex; justify-content: center; align-items: center; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-date dt { width: 17.333vw; font-size: 3.867vw; line-height: 1.6; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-date dt { width: 8.15vw; font-size: 1.45vw; line-height: 1.6; } } .tour-goods .tour-goods-date dt strong { display: flex; justify-content: center; align-content: center; border-radius: 50%; background: linear-gradient(150deg, rgb(111, 234, 160) 0%, rgb(78, 146, 197) 30%, rgb(66, 81, 248) 100%); text-align: center; color: #fff; font-weight: 500; line-height: 1.3; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-date dt strong { width: 14.667vw; height: 14.667vw; padding-top: 1.867vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-date dt strong { width: 5.5vw; height: 5.5vw; padding-top: 0.7vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-date dd { width: calc(100% - 17.333vw); font-size: 3.467vw; line-height: 1.6; padding-top: 1.333vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-date dd { width: calc(100% - 10.65vw); font-size: 1.2vw; line-height: 1.6; } } .tour-goods .tour-goods-date dd span { display: inline-block; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-date dd span { border: 0.133vw solid #283C78; padding: 0.267vw 0.533vw; margin-right: 0.533vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-date dd span { border: 0.05vw solid #283C78; padding: 0.1vw 0.2vw; margin-right: 0.2vw; } } .tour-goods .tour-goods-date-note { text-indent: -1em; padding-left: 1em; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-date-note { font-size: 3.2vw; line-height: 5.6vw; width: 73.333vw; margin: 2.667vw auto; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-date-note { font-size: 0.9vw; line-height: 1.556; width: 42vw; margin: 1vw auto; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn { width: 72.267vw; margin: 5.333vw auto; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-btn { width: 39.85vw; margin: 2.333em auto 0; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-goods .tour-btn { font-size: 34px; } } .tour-goods .tour-btn-link, .tour-goods .tour-btn-soon { display: block; position: relative; color: #fff; text-align: center; } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn-link, .tour-goods .tour-btn-soon { height: 15.733vw; margin: 2vw auto 0; border-radius: 9.333vw; font-size: 4vw; line-height: 15.733vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-btn-link, .tour-goods .tour-btn-soon { width: 100%; height: 5.5vw; font-size: 1.7vw; line-height: 5.5vw; border-radius: 2.75vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-goods .tour-btn-link, .tour-goods .tour-btn-soon { font-size: 30px; } } .tour-goods .tour-btn-link::before, .tour-goods .tour-btn-soon::before { border: solid #fff; content: ""; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn-link::before, .tour-goods .tour-btn-soon::before { width: 70.667vw; height: 13.867vw; left: 0.8vw; top: 0.8vw; border-radius: 6.8vw; border: 0.133vw solid #fff; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-btn-link::before, .tour-goods .tour-btn-soon::before { border-radius: 2.55vw; border: 0.05vw solid #fff; height: 5.1vw; left: 0.2vw; top: 0.2vw; width: 23.2em; } } .tour-goods .tour-btn-link::after, .tour-goods .tour-btn-soon::after { background: none; } .tour-goods .tour-btn-link { background-color: #283C78; } .tour-goods .tour-btn-link::after { content: ""; border: 0; border-top: solid 2px #fff; border-right: solid 2px #fff; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn-link::after { width: 1.867vw; height: 1.867vw; right: 5.333vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-btn-link::after { width: 0.7vw; height: 0.7vw; right: 2vw; } } .tour-goods .tour-btn-soon { background-color: #666; } .tour-goods .tour-btn-soon::after { content: "coming soon"; display: block; position: absolute; } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn-soon::after { bottom: 2.667vw; right: calc(50% - 3em); font-size: 3.2vw; line-height: 1; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-btn-soon::after { top: 0; right: 5%; font-size: 1.1vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn-soon .tour-btn-text { display: block; line-height: 10vw; } } .tour-goods .tour-btn-text { font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn-text { height: auto !important; font-size: 4.533vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-btn-text { height: auto !important; font-size: 1.7vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-popup { margin-bottom: 6.667vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-popup { margin-bottom: 2.5vw; } } .tour-goods .tour-goods-popup-sub { display: flex; justify-content: center; align-items: center; margin: 0 auto; background: #697AE0; text-align: center; line-height: 1; font-weight: 700; color: #fff; letter-spacing: 0.1em; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-popup-sub { width: 69.867vw; height: 8.533vw; font-size: 3.733vw; border-radius: 8.533vw; margin-bottom: 6.267vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-popup-sub { width: 29.2vw; height: 3.2vw; font-size: 1.4vw; border-radius: 1.6vw; margin-bottom: 2.25vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-popup-sub:last-of-type { margin-top: 4vw; } } .tour-goods .tour-goods-popup-sub.sec { margin-top: 5vw; } .tour-goods .tour-goods-popup-date { text-align: center; } .tour-goods .tour-goods-popup-date span { display: inline-block; color: #697AE0; font-weight: 700; letter-spacing: 0.1em; position: relative; z-index: 1; } .tour-goods .tour-goods-popup-date span::before { content: ""; width: 100%; height: 35%; background: linear-gradient(to right, rgb(250, 209, 252) 0%, rgb(197, 203, 242) 100%); position: absolute; bottom: -5%; left: 0; z-index: -1; } .tour-goods .tour-goods-popup-date span::after { content: ""; position: absolute; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-popup-date span::after { background: url("../img/city/goods-date-bg_sp.png") no-repeat; width: 77.867vw; height: 14.933vw; top: calc(50% - (14.933vw / 2)); left: calc(50% - (77.867vw / 2)); background-size: contain; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-popup-date span::after { background: url("../img/city/goods-date-bg.png") no-repeat; width: 32.5vw; height: 5.6vw; top: calc(50% - (5.6vw / 2)); left: calc(50% - (32.5vw / 2)); background-size: contain; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-popup-date span { font-size: 4vw; margin: 5.333vw 0; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-popup-date span { font-size: 1.8vw; margin: 2vw 0; } } .tour-goods .tour-goods-popup-place { text-align: center; } .tour-goods .tour-goods-popup-place span { display: inline-block; color: #283C78; font-weight: 700; line-height: 1.3; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-popup-place span { margin-top: 4vw; margin-bottom: 4vw; padding: 1.867vw; border: 0.267vw solid #283C78; font-size: 3.467vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-popup-place span { margin-top: 1.5vw; margin-bottom: 1.5vw; padding: 0.7vw; border: 0.1vw solid #283C78; font-size: 1.3vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn-text { height: 16vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-btn-text { height: 3.667em; } } .tour-goods .tour-btn-text .ja { font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn-text .ja { font-size: 4.533vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-btn-text .ja { font-size: 1.7vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-btn-text .ja small { font-size: 2.667vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-btn-text .ja small { font-size: 0.9vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-detail { margin-bottom: 8.933vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-detail { margin-bottom: 3vw; } } .tour-goods .tour-goods-name { color: #fff; text-align: center; background: #697AE0; border-radius: 100vh; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; font-weight: 700; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-name { width: 72.4vw; height: 8vw; margin: 0 auto 2vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-name { font-size: 1.4vw; margin: 0 auto 0.536em; width: 20.857em; height: 2.286em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-goods .tour-goods-name { font-size: 28px; } } .tour-goods .tour-goods-price { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; color: #697AE0; font-weight: 700; } .tour-goods .tour-goods-price-num { border-radius: 50%; border: 1px solid #697AE0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-price-num { width: 13.733vw; height: 13.733vw; margin: 0 2.667vw 0 0; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-price-num { font-size: 1.4vw; margin: 0 0.714em 0 0; width: 3.679em; height: 3.679em; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-goods .tour-goods-price-num { font-size: 28px; } } .tour-goods .tour-goods-price-amount span { font-size: 72%; } .tour-goods .tour-goods-price-amount i { font-style: normal; font-size: 45%; } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-price-amount { font-size: 5.867vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-price-amount { font-size: 2.2vw; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-goods .tour-goods-price-amount { font-size: 44px; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-img { margin: 1.333vw auto 0; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-img { margin: 0.5vw auto; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-1 .tour-goods-img { width: 65.733vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-1 .tour-goods-img { width: 24.65vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-2 .tour-goods-img { width: 75.467vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-2 .tour-goods-img { width: 28.3vw; margin-top: 0.65vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-3 .tour-goods-img { width: 72.533vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-3 .tour-goods-img { width: 27.2vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-4 .tour-goods-img { width: 67.467vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-4 .tour-goods-img { width: 25.3vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-5 .tour-goods-img { width: 79.867vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-5 .tour-goods-img { width: 29.95vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-6 .tour-goods-img { width: 64.667vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-6 .tour-goods-img { width: 22.55vw; } } @media only screen and (max-width: 1023px) { .tour-goods .tour-goods-7 .tour-goods-img { width: 79.733vw; } } @media only screen and (min-width: 1024px) { .tour-goods .tour-goods-7 .tour-goods-img { width: 29.9vw; } } .tour-goods-end { text-align: center; color: #0F5CBF; } @media only screen and (max-width: 1023px) { .tour-goods-end { font-size: 2.933vw; margin: 93.333vw 0 13.333vw; } } @media only screen and (min-width: 1024px) { .tour-goods-end { font-size: 1.1vw; margin: 4.318em auto 0; } } @media only screen and (min-width: 1024px) and (min-width: 2000px) { .tour-goods-end { font-size: 22px; } }