@charset "UTF-8"; /*** 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; } a:hover { opacity: 0.7; } html { font-family: "Noto Sans JP", sans-serif; } .h_menu { width: 100%; background-color: #37A8E1; position: fixed; top: 0; left: 0; z-index: 100; } .h_menu .h_menu_band { width: 100%; background-color: #005F8E; color: #fff; padding: 5px 0; font-size: 17px; font-weight: 500; letter-spacing: 0.08em; text-align: center; } @media screen and (max-width: 1000px) { .h_menu .h_menu_band { display: none; } } .h_menu .h_menu_in { display: flex; justify-content: space-between; align-items: center; } .h_menu .h_menu_in .h_menu_logo { max-width: 320px; width: 20%; display: flex; justify-content: center; align-items: center; margin: 0 30px; } @media screen and (max-width: 1680px) { .h_menu .h_menu_in .h_menu_logo { margin: 0 15px; } } @media screen and (max-width: 1280px) { .h_menu .h_menu_in .h_menu_logo { width: 18%; } } @media screen and (max-width: 1000px) { .h_menu .h_menu_in .h_menu_logo { max-width: 177px; width: 47%; } } .h_menu .h_menu_item { display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 1000px) { .h_menu .h_menu_item { display: none; } } .h_menu .h_menu_item li { width: auto; height: 90px; border-left: solid 1px #fff; } .h_menu .h_menu_item li:last-child { border-right: solid 1px #fff; } .h_menu .h_menu_item li a { display: block; padding: 10px 27px; width: 100%; height: 100%; position: relative; } .h_menu .h_menu_item li h3 { font-size: clamp(13px, 1vw, 15px); font-weight: 500; height: 2em; color: #fff; height: 45px; display: flex; justify-content: center; align-items: center; text-align: center; } .h_menu .h_menu_item li .arrow { width: 20px; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); transition: all 0.3s; } .h_menu .h_menu_item li .arrow .st0 { fill: none; stroke: #EA5100; stroke-width: 2; stroke-linecap: round; } .h_menu .h_menu_item li:hover a { opacity: 1; } .h_menu .h_menu_item li:hover h3 { color: #05058E; transition: all 0.3s; } .h_menu .h_menu_item li:hover .arrow { bottom: 0; } .h_menu .h_menu_item li:hover .arrow .st0 { stroke: #E5FF1F; transition: all 0.3s; } .h_menu .h_menu_item li .line1300 { display: none; } @media screen and (max-width: 1680px) { .h_menu .h_menu_item li a { padding: 10px 1vw; } } @media screen and (max-width: 1280px) { .h_menu .h_menu_item li .arrow { width: 15px; } } .h_menu .h_menu_link { background-image: linear-gradient(120deg, #05058E 0%, #37A8E1 20%, #37A8E1 23%, #05058E 50%); position: relative; max-width: 470px; padding: 15px 15px 15px 90px; width: 28%; margin-left: 30px; } @media screen and (max-width: 1000px) { .h_menu .h_menu_link { display: none; } } .h_menu .h_menu_link p { color: #fff; font-size: 18px; font-size: clamp(13px, 1vw, 18px); margin-bottom: 8px; padding-left: 21px; } .h_menu .h_menu_link ul { display: flex; justify-content: space-between; width: 100%; } @media screen and (max-width: 1680px) { .h_menu .h_menu_link { padding: 15px 15px 15px 6%; margin-left: 15px; } } @media screen and (max-width: 1280px) { .h_menu .h_menu_link { width: 32%; padding: 15px 10px 15px 5.5%; } .h_menu .h_menu_link p { padding-left: 0px; } } @media screen and (max-width: 1150px) { .h_menu .h_menu_link { width: 32%; } } .h_menu .h_menu_link li { height: 80px; width: 49%; position: relative; transition: all 0.3s; } .h_menu .h_menu_link li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .h_menu .h_menu_link li h4 { font-size: clamp(20px, 1.5vw, 28px); color: #fff; text-align: center; line-height: 1.4; padding: 0 40px 0 20px; margin-bottom: 6px; } .h_menu .h_menu_link li h4 img { width: 100%; height: auto; } .h_menu .h_menu_link li .arrow { width: 20px; position: absolute; top: 50%; right: 5%; transform: translateY(-50%); transition: all 0.3s; } .h_menu .h_menu_link li .arrow .st0 { fill: #E5FF1F; } .h_menu .h_menu_link li:hover a { opacity: 1; } .h_menu .h_menu_link li:hover .arrow { right: 2%; } @media screen and (max-width: 1680px) { .h_menu .h_menu_link li .arrow { width: 15px; } .h_menu .h_menu_link li h4 { padding: 0 30px 0 20px; } } @media screen and (max-width: 1280px) { .h_menu .h_menu_link li { height: 60px; } .h_menu .h_menu_link li .arrow { width: 12px; top: 50%; right: 4%; } .h_menu .h_menu_link li h4 { letter-spacing: -0.01em; padding: 0 20px 0 10px; } } @media screen and (max-width: 1150px) { .h_menu .h_menu_link li h4 { padding: 0 8px 0 0px; } } .h_menu .h_menu_link .line { border: solid 1px #7DE800; background-image: linear-gradient(180deg, #7DE800 0, #2BAC49 50%, #00ab28 100%); background-size: 200% 200%; background-position: 0 0; border-radius: 5px; transition: all 0.3s; } .h_menu .h_menu_link .line figure { position: absolute; top: -14%; left: -41%; height: auto; width: 85px; } .h_menu .h_menu_link .line figure img { width: 100%; height: auto; } .h_menu .h_menu_link .line:hover { border: solid 1px #2BAC49; background-position: 0px 50%; } @media screen and (max-width: 1680px) { .h_menu .h_menu_link .line figure { top: -15%; left: -5.5vw; height: auto; width: 59%; max-width: 85px; } } @media screen and (max-width: 1280px) { .h_menu .h_menu_link .line figure { top: -18%; left: -5.4vw; width: 60%; } .h_menu .h_menu_link .line h4 { padding: 0 20px 0 10px; } } @media screen and (max-width: 1150px) { .h_menu .h_menu_link .line figure { top: -10%; left: -5.5vw; width: 62px; } .h_menu .h_menu_link .line h4 { padding: 0 20px 0 10px; } } .h_menu .h_menu_link .store { border: solid 1px #F5A14D; background-image: linear-gradient(180deg, #F5A14D 0, #EA5100 50%, #cd4800 100%); border-radius: 5px; background-size: 200% 200%; background-position: 0 0; border-radius: 5px; transition: all 0.3s; } .h_menu .h_menu_link .store:hover { border: solid 1px #EA5100; background-position: 0px 50%; } /*---------------------------- * メニュー開閉ボタン *----------------------------*/ .h_menu_sp { display: none; } @media screen and (max-width: 1000px) { .h_menu_sp { display: block; } } .h_menu_sp .menu-btn { position: relative; display: flex; justify-content: center; align-items: center; width: 65px; padding: 4px; } /*---------------------------- * メニュー本体 *----------------------------*/ .menu { position: fixed; top: 0; right: 0; z-index: 1; width: 100vw; height: 100vh; display: flex; justify-content: center; background: #37A8E1; z-index: 90; } .menu__item { margin-top: 110px; width: 100%; height: auto; padding: 0.5em 1em; text-align: center; color: #fff; box-sizing: border-box; } .menu__item li { padding-bottom: 30px; } .menu__item li a { font-size: 20px; font-weight: 700; } /*---------------------------- * アニメーション部分 *----------------------------*/ /* アニメーション前のメニューの状態 */ .menu { transform: translateX(100vw); transition: all 0.3s linear; } /* アニメーション後のメニューの状態 */ .menu.is-active { transform: translateX(0); } #l-article { padding-top: 170px; } @media screen and (max-width: 1680px) { #l-article { padding-top: 170px; } } @media screen and (max-width: 1280px) { #l-article { padding-top: 135px; } } @media screen and (max-width: 1000px) { #l-article { padding-top: 60px; } } .sp { display: none; } @media screen and (max-width: 600px) { .sp { display: block; } } @media screen and (max-width: 600px) { .pc { display: none; } } .tabsp { display: none; } @media screen and (max-width: 850px) { .tabsp { display: block; } } @media screen and (max-width: 850px) { .tabpc { display: none; } } footer { background-color: #37A8E1; width: 100%; } .caution figure { max-width: 720px; width: 90%; margin: 0 auto; padding: 68px 0 84px; } .caution figure img { width: 100%; height: auto; } @media screen and (max-width: 600px) { .caution figure { width: 80%; padding: 37px 0 90px; } } .footer { max-width: 650px; width: 90%; margin: 0 auto; padding-bottom: 75px; } .footer figure { margin: 0 auto 50px; } .footer .AED { width: 50%; max-width: 254px; margin: 60px auto 0px; } .footer .f-link { display: flex; justify-content: center; align-items: center; } .footer .f-link a { font-size: clamp(20px, 3.33vw, 47px); } .footer .f-link p { font-size: clamp(20px, 3.33vw, 47px); padding: 0 8px; } @media screen and (max-width: 600px) { .footer { width: 80%; margin: 0 auto; padding-bottom: 185px; } .footer figure { margin: 0 auto 28px; } .footer .AED { margin: 27px auto 0px; max-width: 110px; } } .copy { width: 100%; text-align: center; font-size: 12px; } @media screen and (max-width: 850px) { .copy { margin-bottom: 160px; } } @media screen and (max-width: 600px) { .copy { margin-bottom: 130px; } } .always { position: fixed; bottom: 0; right: 0; width: 433px; z-index: 100; } @media screen and (max-width: 850px) { .always { width: 100%; } } .always .h_menu_link { background-image: linear-gradient(120deg, #05058E 0%, #37A8E1 20%, #37A8E1 23%, #05058E 50%); position: relative; padding: 15px 15px 15px 90px; width: 100%; border-radius: 10px 0 0 0; } @media screen and (max-width: 850px) { .always .h_menu_link { border-radius: 0; padding: 27px 15px 20px 52px; } } @media screen and (max-width: 600px) { .always .h_menu_link { padding: 3px 15px 8px 49px; } } .always .h_menu_link p { color: #fff; font-size: 15px; margin-bottom: 8px; padding-left: 21px; } @media screen and (max-width: 850px) { .always .h_menu_link p { text-align: center; padding-left: 0; } } .always .h_menu_link ul { display: flex; justify-content: space-between; width: 100%; } .always .h_menu_link li { height: 80px; width: 49%; position: relative; } .always .h_menu_link li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .always .h_menu_link li h4 { font-size: clamp(20px, 2vw, 28px); color: #fff; text-align: center; line-height: 1.3; padding: 0 35px 0 10px; max-width: 160px; } .always .h_menu_link li h4 ._ib { display: block; } .always .h_menu_link li .arrow { width: 20px; position: absolute; top: 53%; right: 5%; transform: translateY(-50%); transition: all 0.3s; } .always .h_menu_link li .arrow .st0 { fill: #E5FF1F; } .always .h_menu_link li:hover a { opacity: 1; } .always .h_menu_link li:hover .arrow { right: 2%; } @media screen and (max-width: 850px) { .always .h_menu_link li { height: 70px; } } @media screen and (max-width: 600px) { .always .h_menu_link li { height: 50px; } .always .h_menu_link li h4 { font-weight: 700; padding: 0 26px 0 15px; } .always .h_menu_link li .arrow { width: 15px; top: 50%; } } .always .h_menu_link .line { border: solid 1px #7DE800; background-image: linear-gradient(180deg, #7DE800 0, #2BAC49 50%, #00ab28 100%); background-size: 200% 200%; background-position: 0 0; border-radius: 5px; transition: all 0.3s; } .always .h_menu_link .line figure { position: absolute; top: -11%; left: -49%; height: auto; width: 84px; } .always .h_menu_link .line figure img { width: 100%; height: auto; } .always .h_menu_link .line:hover { border: solid 1px #2BAC49; background-position: 0px 50%; } @media screen and (max-width: 850px) { .always .h_menu_link .line figure { left: -11%; top: -10%; width: 72px; } } @media screen and (max-width: 600px) { .always .h_menu_link .line figure { top: -35%; left: -53px; width: 63px; } } .always .h_menu_link .store { border: solid 1px #F5A14D; background-image: linear-gradient(180deg, #F5A14D 0, #EA5100 50%, #cd4800 100%); border-radius: 5px; background-size: 200% 200%; background-position: 0 0; border-radius: 5px; transition: all 0.3s; } .always .h_menu_link .store:hover { border: solid 1px #EA5100; background-position: 0px 50%; } .totop { position: fixed; bottom: 160px; right: 7px; width: 50px; height: 50px; z-index: 100; } @media screen and (max-width: 850px) { .totop { bottom: 130px; } } .scroll_up { transform: translateY(90px); opacity: 0; } .scroll_up.on { animation: in 0.3s ease forwards; } .scroll_up2 { transform: translateY(90px); } .scroll_up2.on { animation: in2 0.3s ease forwards; } @keyframes in { 0% { transform: translateY(90px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } } @keyframes in2 { 0% { transform: translateY(90px); } 100% { transform: translateY(0); } } .top { background-image: url("../img/top/top-bk2.webp"); background-size: 100%; background-position: 0% 64%; } @media screen and (max-width: 1400px) { .top { background-size: 106%; background-position: 70% 0%; } } @media screen and (max-width: 850px) { .top { background-size: 100%; background-image: url("../img/top/top-bk2_sp.webp"); background-position: 67% -14%; } } .top .name { background-color: #1642BA; padding: 45px 0 38px; } .top .name h1 { font-size: clamp(18px, 2.25vw, 59px); color: #fff; text-align: center; } @media screen and (max-width: 600px) { .top .name { padding: 21px 0 19px; } } .top_slider { width: 100%; margin: 0 auto; padding: 60px 0 110px; } @media screen and (max-width: 850px) { .top_slider { width: 100%; padding: 20px 0 30px; } } .top_slider_inner { width: 80%; margin: 0 auto; position: relative; } @media screen and (max-width: 1400px) { .top_slider_inner { width: 90%; } } @media screen and (max-width: 850px) { .top_slider_inner { width: 75%; } } .top_banner { padding: 50px 0 100px; width: 90%; margin: 0 auto; } .top_banner ul { display: flex; justify-content: center; align-items: center; } .top_banner ul li { width: 48%; max-width: 530px; margin: 0 15px; } .top_banner ul li img { width: 100%; height: auto; } @media screen and (max-width: 600px) { .top_banner { padding: 40px 0 70px; } .top_banner ul { flex-direction: column; } .top_banner ul li { width: 100%; margin: 0; } .top_banner ul li:first-child { margin-bottom: 22px; } } /* 前へ次への矢印カスタマイズ */ .swiper-button-prev, .swiper-button-next { height: 42px; width: 42px; } /* 前へ次への矢印カスタマイズ */ .swiper-button-prev::after, .swiper-button-next::after { background-repeat: no-repeat; background-size: contain; content: ""; height: 43px; margin: auto; width: 43px; } /* 前への矢印カスタマイズ */ .swiper-button-prev { left: 10px; } @media screen and (max-width: 850px) { .swiper-button-prev { left: -40px; } } /* 次への矢印カスタマイズ */ .swiper-button-next { right: 10px; } @media screen and (max-width: 850px) { .swiper-button-next { right: -40px; } } /* 前への矢印カスタマイズ */ .swiper-button-prev::after { background-image: url("../img/top/slider_l.svg"); } /* 次への矢印カスタマイズ */ .swiper-button-next::after { background-image: url("../img/top/slider_r.svg"); } /* 画像サイズ調整 */ .swiper-slide img { height: auto; width: 100%; } .about { background-color: #EFEFEF; } .about_inner { max-width: 710px; width: 90%; margin: 0 auto; padding: 110px 0 100px; } @media screen and (max-width: 600px) { .about_inner { padding: 35px 0 58px; width: 100%; } } .about_inner h2 { font-size: clamp(22px, 2.75vw, 43px); color: #05058E; text-align: center; font-weight: 600; margin-bottom: 51px; } @media screen and (max-width: 600px) { .about_inner h2 { margin-bottom: 37px; } } .about_inner figure { width: 100%; height: auto; display: flex; margin-bottom: 0; } .about_inner figure img { width: 100%; height: auto; } .about_inner .about_item { padding: 52px; background-color: #fff; } .about_inner .about_item dl { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #000000; padding: 30px 0; } .about_inner .about_item dl.last { border-bottom: 1px solid #000000; margin-bottom: 57px; } .about_inner .about_item dl dt { width: 78px; font-weight: 700; letter-spacing: 0.05em; } .about_inner .about_item dl dd { width: calc(100% - 90px); font-weight: 700; letter-spacing: 0.05em; } .about_inner .about_item iframe { width: 100%; height: 340px; } @media screen and (max-width: 600px) { .about_inner .about_item { background-color: transparent; padding: 47px 0 0; width: 80%; margin: 0 auto; } .about_inner .about_item iframe { height: 297px; } } #news { margin-top: -150px; padding-top: 150px; } @media screen and (max-width: 1000px) { #news { margin-top: -70px; padding-top: 70px; } } #news .news { width: 90%; max-width: 1066px; margin: 0 auto; padding-bottom: 110px; } #news .news img { width: 100%; height: auto; } @media screen and (max-width: 850px) { #news .news { padding-bottom: 72px; } } #lineup { margin-top: -150px; padding-top: 150px; } @media screen and (max-width: 1000px) { #lineup { margin-top: -70px; padding-top: 70px; } } .lineup { background-color: #1642BA; padding: 51px 0 98px; } @media screen and (max-width: 850px) { .lineup { padding: 19px 0 51px; } } .lineup .lineup_inner { width: 90%; max-width: 1066px; margin: 0 auto; } @media screen and (max-width: 850px) { .lineup .lineup_inner { width: 70%; } } .lineup p { font-size: clamp(25px, 4.17vw, 73px); color: #fff; text-align: center; font-weight: 600; margin-bottom: 52px; } @media screen and (max-width: 850px) { .lineup p { margin-bottom: 15px; } } .lineup ul { display: flex; justify-content: space-between; align-items: center; } .lineup ul li { width: 48%; max-width: 530px; } @media screen and (max-width: 600px) { .lineup ul { flex-direction: column; } .lineup ul li { width: 100%; } .lineup ul li:first-child { margin-bottom: 30px; } } #sns { margin-top: -150px; padding-top: 150px; } @media screen and (max-width: 1000px) { #sns { margin-top: -70px; padding-top: 70px; } } .sns { padding: 97px 0 116px; background-image: url("../img/top/sns_bk.webp"); background-size: cover; } @media screen and (max-width: 850px) { .sns { padding: 28px 0 45.6px; background-image: url("../img/top/sns2_bk.webp"); } } .sns .sns_inner { width: 90%; max-width: 1066px; margin: 0 auto; } @media screen and (max-width: 850px) { .sns .sns_inner { width: 85%; } } .sns .sns_inner .sns_x { width: 100%; max-width: 714px; margin: 0 auto; } .sns .sns_inner .sns_x .twitter-tweet { margin: 0 auto; } .sns .sns_inner .sns_x h3 { font-size: clamp(32px, 5vw, 60px); margin-bottom: 50px; font-weight: 600; text-align: center; color: #05058E; } .sns .sns_inner .sns_x .x_inter { width: 100%; margin-bottom: 50px; } .sns .sns_inner .sns_x .button { position: relative; display: block; align-items: center; width: 100%; height: 100%; border: solid 3px #EA5100; background-image: linear-gradient(180deg, #F5A14D 0, #EA5100 50%, #cd4800 100%); border-radius: 5px; background-size: 200% 200%; background-position: 0 0; max-width: 440px; margin: 0 auto; padding: 20px; transition: all 0.3s; } .sns .sns_inner .sns_x .button h4 { font-size: clamp(16px, 2.667vw, 23px); color: #fff; line-height: 1.3; } .sns .sns_inner .sns_x .button .arrow { width: 20px; position: absolute; top: 53%; right: 5%; transform: translateY(-50%); transition: all 0.3s; } .sns .sns_inner .sns_x .button .arrow .st0 { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; transition: all 0.3s; } .sns .sns_inner .sns_x .button:hover { background-position: 0px 50%; opacity: 1; } .sns .sns_inner .sns_x .button:hover h4 { font-size: clamp(16px, 2.667vw, 23px); color: #fff; line-height: 1.3; } .sns .sns_inner .sns_x .button:hover .arrow { right: 1%; } .sns .sns_inner .sns_x .button:hover .arrow .st0 { stroke: #E5FF1F; } @media screen and (max-width: 850px) { .sns .sns_inner .sns_x h3 { margin-bottom: 33px; } .sns .sns_inner .sns_x .x_inter { margin-bottom: 38px; } .sns .sns_inner .sns_x .button { width: 100%; margin: 20px auto 0; padding: 15px; letter-spacing: 0.02em; } .sns .sns_inner .sns_x .button .arrow { width: 18px; position: absolute; top: 49%; right: 2%; transform: translateY(-50%); transition: all 0.3s; } .sns .sns_inner .sns_x .button .arrow .st0 { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; } } .sns .sns_inner .sns_line { margin-top: 110px; } .sns .sns_inner .sns_line h3 { font-size: clamp(30px, 5vw, 60px); font-weight: 600; margin-bottom: 50px; text-align: center; color: #52B24D; } .sns .sns_inner .sns_line a { display: block; } .sns .sns_inner .sns_line a.first { margin-bottom: 62px; } .sns .sns_inner .sns_line a img { width: 100%; height: auto; } @media screen and (max-width: 850px) { .sns .sns_inner .sns_line { margin-top: 47px; } .sns .sns_inner .sns_line h3 { margin-bottom: 26px; } .sns .sns_inner .sns_line a { display: block; } .sns .sns_inner .sns_line a.first { margin-bottom: 24px; } } #about { margin-top: -150px; padding-top: 150px; } @media screen and (max-width: 1000px) { #about { margin-top: -70px; padding-top: 70px; } } .erea { margin-top: -250px; padding-top: 250px; } @media screen and (max-width: 1000px) { .erea { margin-top: -130px; padding-top: 130px; } } .erea_ttl { width: 100%; position: relative; z-index: 30; padding-bottom: 10px; } .erea_ttl::before { content: ""; position: absolute; bottom: 0; left: 0%; width: 100%; height: 100%; background-image: linear-gradient(110deg, #37A8E1 0%, #37A8E1 9%, #05058E 40%); z-index: -1; border-radius: 20px 20px 0 0; } .erea_ttl figure { max-width: 1240px; margin: -57px auto 0; } @media screen and (max-width: 850px) { .erea_ttl figure { width: 94%; margin: -40px auto 0; } .erea_ttl img { width: 100%; height: auto; } .erea_ttl::before { background-image: linear-gradient(130deg, #37A8E1 0%, #37A8E1 9%, #05058E 40%); } } .erea_hukushima { background-color: #E5FF1F; padding: 52px 0 66px; } @media screen and (max-width: 600px) { .erea_hukushima { padding: 30px 0; } } .erea_hukushima_in { max-width: 715px; width: 90%; margin: 0 auto; } .erea_hukushima_in h4 { font-size: 30px; font-weight: 700; padding-bottom: 15px; border-bottom: solid 1px #001E26; margin-bottom: 38px; line-height: 1; text-align: center; } .erea_hukushima_in h3 { font-size: clamp(56px, 6.588vw, 58px); font-weight: 900; margin-bottom: 38px; line-height: 1; text-align: center; } .erea_hukushima_in h3 span { color: #AD0352; } @media screen and (max-width: 600px) { .erea_hukushima_in h4 { font-size: clamp(14px, 2.333vw, 30px); padding-bottom: 8px; margin-bottom: 14px; } .erea_hukushima_in h3 { font-size: clamp(25px, 4.166vw, 58px); margin-bottom: 15px; } .erea_hukushima_in h3 span { font-size: clamp(27px, 4.5vw, 58px); } } .erea_hukushima_in ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; } .erea_hukushima_in ul li { background-image: linear-gradient(180deg, #fff 0%, #fff 70%, #E5E5E5 100%); border: solid 2px #05058E; border-radius: 5px; width: 32%; position: relative; transition: all 0.3s; margin-bottom: 20px; } .erea_hukushima_in ul li:nth-child(2) { margin: 0 2% 20px 2%; } .erea_hukushima_in ul li:nth-child(4) { margin: 0 2% 0 0; } .erea_hukushima_in ul li:nth-child(5) { margin-bottom: 0px; } .erea_hukushima_in ul li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 240px; } .erea_hukushima_in ul li p { font-size: 26px; font-weight: 700; color: #05058E; text-align: center; padding-bottom: 45px; line-height: 1.2; transition: all 0.3s; } .erea_hukushima_in ul li p span { font-size: 48px; } .erea_hukushima_in ul li .arrow { position: absolute; bottom: 15px; left: 50%; transform: translateY(-50%) translateX(-50%); width: 25px; transition: all 0.3s; } .erea_hukushima_in ul li .arrow .st0 { fill: none; stroke: #05058E; stroke-width: 2; stroke-linecap: round; transition: all 0.3s; } .erea_hukushima_in ul li:hover { background-image: linear-gradient(180deg, #E5FF1F 0%, #E5FF1F 70%, #c6dd19 100%); border: solid 2px #AD0352; } .erea_hukushima_in ul li:hover a { opacity: 1; } .erea_hukushima_in ul li:hover p { color: #AD0352; } .erea_hukushima_in ul li:hover .arrow { left: 52%; } .erea_hukushima_in ul li:hover .arrow .st0 { stroke: #AD0352; } @media screen and (max-width: 600px) { .erea_hukushima_in ul li { margin-bottom: 10px; } .erea_hukushima_in ul li:nth-child(2) { margin: 0 2% 10px 2%; } .erea_hukushima_in ul li a { height: 105px; } .erea_hukushima_in ul li p { font-size: 12px; padding-bottom: 25px; line-height: 1.2; } .erea_hukushima_in ul li p span { font-size: 22px; } .erea_hukushima_in ul li .arrow { bottom: 0px; width: 15px; } .erea_hukushima_in ul li .arrow .st0 { stroke-width: 4; } } #os { margin-top: -150px; padding-top: 150px; } @media screen and (max-width: 1000px) { #os { margin-top: -90px; padding-top: 90px; } } .erea_os { background-color: #EFEFEF; padding: 52px 0 60px; } @media screen and (max-width: 600px) { .erea_os { padding: 30px 0; } } .erea_os_in { max-width: 715px; width: 90%; margin: 0 auto; } .erea_os_in h4 { font-size: 30px; font-weight: 700; padding-bottom: 15px; border-bottom: solid 1px #001E26; margin-bottom: 38px; line-height: 1; text-align: center; } .erea_os_in h3 { font-size: clamp(56px, 6.588vw, 58px); font-weight: 900; margin-bottom: 38px; line-height: 1; text-align: center; } .erea_os_in h3 span { color: #AD0352; } @media screen and (max-width: 600px) { .erea_os_in h4 { font-size: clamp(14px, 2.333vw, 30px); padding-bottom: 8px; margin-bottom: 14px; } .erea_os_in h3 { font-size: clamp(25px, 4.166vw, 58px); margin-bottom: 15px; } .erea_os_in h3 span { font-size: clamp(27px, 4.5vw, 58px); } } .erea_os_in ul { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; } .erea_os_in ul li { width: 49%; position: relative; margin-bottom: 10px; } .erea_os_in ul li a { display: block; width: 100%; height: 100%; background-image: linear-gradient(180deg, #fff 0%, #fff 70%, #E5E5E5 100%); border: solid 2px #05058E; border-radius: 5px; transition: all 0.3s; } .erea_os_in ul li p { font-size: 33px; font-weight: 700; color: #05058E; padding: 40px 20px; line-height: 1; transition: all 0.3s; } .erea_os_in ul li .arrow { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 42px; transition: all 0.3s; } .erea_os_in ul li .arrow .st0 { fill: none; stroke: #05058E; stroke-width: 2; stroke-linecap: round; transition: all 0.3s; } .erea_os_in ul li:hover a { opacity: 1; background-image: linear-gradient(180deg, #E5FF1F 0%, #E5FF1F 70%, #c6dd19 100%); border: solid 2px #AD0352; } .erea_os_in ul li:hover p { color: #AD0352; } .erea_os_in ul li:hover .arrow { right: 12px; } .erea_os_in ul li:hover .arrow .st0 { stroke: #AD0352; } @media screen and (max-width: 600px) { .erea_os_in ul li p { font-size: 15px; padding: 17px 10px 20px; } .erea_os_in ul li .arrow { right: 8px; width: 18px; } .erea_os_in ul li .arrow .st0 { stroke-width: 4; } } .syop_x { padding: 60px 0 110px; background: #2570B1 url("../img/shop_x/bg_dotted.svg") repeat-x bottom left/contain; } .syop_x .inner { max-width: 720px; width: 90%; margin: 0 auto; } .syop_x h3 { margin-bottom: 60px; color: #fff; font-size: clamp(25px, 4.166vw, 58px); font-weight: 700; text-align: center; filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.4)); } .syop_x .x_cntn { display: grid; grid-template-rows: auto; grid-template-columns: repeat(2, 1fr); gap: 60px 8%; justify-content: center; } .syop_x .x_item { width: 100%; } .syop_x .x_item .x_ttl { padding: 0.3em 0.7em; margin: 0 auto 20px; border-radius: 3px; background-color: #E5FF1F; color: #000; font-size: clamp(16px, 1.83vw, 20px); font-weight: 700; text-align: center; } .syop_x .twitter-timeline { width: 100% !important; } @media screen and (max-width: 900px) { .syop_x { background-size: cover; } .syop_x .x_cntn { max-width: 500px; display: grid; grid-template-rows: auto; grid-template-columns: 100%; margin: 0 auto; } } @media screen and (max-width: 600px) { .syop_x { padding: 40px 0; } .syop_x h3 { margin-bottom: 30px; filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.4)); } } .enjoy { margin-top: -280px; padding-top: 280px; } @media screen and (max-width: 1000px) { .enjoy { margin-top: -70px; padding-top: 70px; } } .enjoy_ttl { position: relative; } .enjoy_ttl::before { content: ""; position: absolute; bottom: 0; left: 0%; width: 100%; height: calc(100% - 100px); background-color: #37A8E1; z-index: -1; } .enjoy_ttl figure { max-width: 1444px; width: 90%; margin: -100px auto 0; z-index: 2; position: relative; } .enjoy_ttl figure img { width: 100%; height: auto; } @media screen and (max-width: 600px) { .enjoy_ttl { padding: 15px 0 100px; } .enjoy_ttl::before { height: 100%; } .enjoy_ttl figure { margin: 0 auto 0; z-index: 20; } } .enjoy_content { background-image: url("../img/enjoy/enjoy3.webp"); background-size: 100%; margin: -187px 0 0; position: relative; z-index: 10; } .enjoy_content figure { max-width: 900px; width: 90%; margin: 0 auto 50px; } .enjoy_content figure img { width: 100%; height: auto; } @media screen and (max-width: 1680px) { .enjoy_content { margin: -11.3vw 0 0; } } @media screen and (max-width: 600px) { .enjoy_content { background-image: url("../img/enjoy/enjoy3_sp.webp"); margin: -81vw 0 0; } } .enjoy_content_in { max-width: 720px; width: 90%; margin: 0 auto; padding-bottom: 60px; } @media screen and (max-width: 600px) { .enjoy_content_in { padding-bottom: 40px; } } .enjoy_content_in h3 { font-size: clamp(48px, 5.647vw, 50px); font-weight: 700; color: #37A8E1; margin-bottom: 60px; } .enjoy_content_in figure { width: 100%; margin: 0 auto 30px; } .enjoy_content_in .button { position: relative; display: block; align-items: center; width: 100%; height: 100%; border: solid 3px #EA5100; background-image: linear-gradient(180deg, #F5A14D 0, #EA5100 50%, #cd4800 100%); border-radius: 5px; background-size: 200% 200%; background-position: 0 0; max-width: 380px; margin: 0 auto; padding: 20px; transition: all 0.3s; } .enjoy_content_in .button h4 { font-size: clamp(16px, 2.667vw, 23px); color: #fff; line-height: 1.3; } .enjoy_content_in .button .arrow { width: 20px; position: absolute; top: 53%; right: 5%; transform: translateY(-50%); transition: all 0.3s; } .enjoy_content_in .button .arrow .st0 { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; transition: all 0.3s; } .enjoy_content_in .button:hover { background-position: 0px 50%; opacity: 1; } .enjoy_content_in .button:hover h4 { font-size: clamp(16px, 2.667vw, 23px); color: #fff; line-height: 1.3; } .enjoy_content_in .button:hover .arrow { right: 1%; } .enjoy_content_in .button:hover .arrow .st0 { stroke: #E5FF1F; } @media screen and (max-width: 600px) { .enjoy_content_in h3 { font-size: 18px; margin-bottom: 50px; padding-top: 72vw; } .enjoy_content_in .movie { margin-bottom: 40px; } .enjoy_content_in figure { margin: 0 auto 20px; } .enjoy_content_in .button { width: 88%; margin: 20px auto 0; padding: 15px; letter-spacing: 0.02em; } .enjoy_content_in .button .arrow { width: 18px; position: absolute; top: 53%; right: 5%; transform: translateY(-50%); transition: all 0.3s; } .enjoy_content_in .button .arrow .st0 { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; } } #banner { margin-top: -150px; padding-top: 150px; } @media screen and (max-width: 1000px) { #banner { margin-top: -70px; padding-top: 70px; } } #banner .banner_in { padding: 150px 0; background-image: url("../img/enjoy/banner_bk.webp"); background-size: cover; background-repeat: no-repeat; } #banner .banner_in .scroll_up { width: 88%; margin: 0 auto; text-align: center; } #banner .banner_in .scroll_up .pc { display: flex; } #banner .banner_in .scroll_up .sp { display: none; } @media screen and (max-width: 600px) { #banner .banner_in { padding: 32px 0; } #banner .banner_in .scroll_up .pc { display: none; } #banner .banner_in .scroll_up .sp { display: flex; } } #banner .banner_in figure { max-width: 700px; width: 100%; margin: 0 auto; } #banner .banner_in figure img { width: 100%; height: auto; } #deposit { margin-top: -150px; padding-top: 150px; } @media screen and (max-width: 1000px) { #deposit { margin-top: -70px; padding-top: 70px; } } #deposit .movie { margin-bottom: 0px; } #deposit .movie.you { position: relative; width: 100%; padding-top: 56.25%; } #deposit .movie.you iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } #deposit .movie.item { width: 100%; } #deposit .movie.item video { width: 100%; height: auto; } @media screen and (max-width: 600px) { #deposit h3 { font-size: 18px; margin-bottom: 50px; padding-top: 72vw; } #deposit .movie { margin-bottom: 0px; } #deposit figure { margin: 0 auto; } #deposit .button { width: 88%; margin: 20px auto 0; padding: 15px; letter-spacing: 0.02em; } #deposit .button .arrow { width: 18px; position: absolute; top: 53%; right: 5%; transform: translateY(-50%); transition: all 0.3s; } #deposit .button .arrow .st0 { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; } } .enjoy_deposit { background-color: #37A8E1; padding: 120px 0; background-image: url("../img/enjoy/deposit_bk.svg"); background-size: 1700px; background-position: 50% 30%; background-repeat: no-repeat; } .enjoy_deposit figure { max-width: 898px; width: 88%; margin: 0 auto; } @media screen and (max-width: 1680px) { .enjoy_deposit { background-size: 90%; } } @media screen and (max-width: 600px) { .enjoy_deposit { background-size: 240%; padding: 30px 0 30px; } } .enjoy_facility { padding-top: 180px; margin-top: -180px; } @media screen and (max-width: 1280px) { .enjoy_facility { padding-top: 140px; margin-top: -140px; } } @media screen and (max-width: 1000px) { .enjoy_facility { padding-top: 80px; margin-top: -80px; } } .enjoy_facility_bk { padding: 60px 0; background-image: url("../img/enjoy/facility_bk.webp"); background-size: 100% 100%; } @media screen and (max-width: 600px) { .enjoy_facility_bk { padding: 40px 0; } } .enjoy_facility_in { max-width: 720px; width: 90%; margin: 0 auto; } .enjoy_facility_in figure { width: 100%; margin-bottom: 60px; } .enjoy_facility_in figure:last-child { margin-bottom: 0; } .enjoy_facility_in h3 { font-size: 45px; font-weight: 700; color: #fff; margin-bottom: 60px; text-align: center; } @media screen and (max-width: 600px) { .enjoy_facility_in h3 { font-size: 26px; margin-bottom: 35px; } .enjoy_facility_in figure { margin-bottom: 20px; } .enjoy_facility_in figure:last-child { margin-bottom: 0; } } .nirakko { padding-top: 180px; margin-top: -180px; } @media screen and (max-width: 1280px) { .nirakko { padding-top: 140px; margin-top: -140px; } } @media screen and (max-width: 1000px) { .nirakko { padding-top: 80px; margin-top: -80px; } } .nirakko_in { background-image: linear-gradient(167deg, #05058E 0%, #37A8E1 4%, #37A8E1 9%, #05058E 40%); padding: 80px 0 110px; } @media screen and (max-width: 600px) { .nirakko_in { padding: 50px 0 40px; } } .nirakko_headline { max-width: 720px; width: 90%; margin: 0 auto 60px; display: flex; justify-content: space-between; align-items: center; } .nirakko_headline li { width: 48%; } .nirakko_headline li.img { width: 53%; margin-left: -2%; } .nirakko_headline li figure { margin-bottom: 30px; } .nirakko_headline li p { font-size: clamp(11px, 1.83vw, 20px); color: #fff; line-height: 1.8; } .nirakko_profile { max-width: 720px; width: 90%; margin: 0 auto 60px; display: flex; justify-content: space-between; } .nirakko_profile li { width: 48%; } .nirakko_profile li p { font-size: clamp(12px, 2vw, 16px); font-size: 16px; color: #fff; line-height: 1.8; margin-bottom: 12px; } .nirakko_profile li dl { display: flex; justify-content: space-between; width: 100%; color: #fff; padding: 25px 7px; border-bottom: solid 1px #fff; } .nirakko_profile li dl.first { border-top: solid 1px #fff; } .nirakko_profile li dl dt { width: 28%; } .nirakko_profile li dl dd { width: 70%; } @media screen and (max-width: 600px) { .nirakko_profile { flex-direction: column; margin: 0 auto 30px; } .nirakko_profile li { width: 100%; margin-bottom: 40px; } .nirakko_profile li:last-child { margin-bottom: 0; } .nirakko_profile li p { display: none; } .nirakko_profile li dl { padding: 15px 7px; } } .nirakko_link { max-width: 720px; width: 90%; margin: 0 auto; } .nirakko_link .button { position: relative; display: block; align-items: center; width: 100%; height: 100%; border: solid 3px #EA5100; background-image: linear-gradient(180deg, #F5A14D 0, #EA5100 50%, #cd4800 100%); border-radius: 5px; background-size: 200% 200%; background-position: 0 0; max-width: 410px; margin: 30px auto 0; padding: 20px; font-weight: 700; transition: all 0.3s; } .nirakko_link .button h4 { font-size: clamp(16px, 2.667vw, 23px); color: #fff; line-height: 1.3; letter-spacing: 0.03em; transition: all 0.3s; } .nirakko_link .button .arrow { width: 25px; position: absolute; top: 53%; right: 3%; transform: translateY(-50%); transition: all 0.3s; } .nirakko_link .button .arrow .st0 { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; transition: all 0.3s; } .nirakko_link .button:hover { background-position: 0px 50%; opacity: 1; } .nirakko_link .button:hover h4 { font-size: clamp(16px, 2.667vw, 23px); color: #fff; line-height: 1.3; } .nirakko_link .button:hover .arrow { right: 1%; } .nirakko_link .button:hover .arrow .st0 { stroke: #E5FF1F; } @media screen and (max-width: 600px) { .nirakko_link img { border-radius: 10px; } .nirakko_link .button { width: 88%; margin: 20px auto 0; padding: 15px; letter-spacing: 0.02em; } .nirakko_link .button .arrow { width: 18px; position: absolute; top: 53%; right: 5%; transform: translateY(-50%); transition: all 0.3s; } .nirakko_link .button .arrow .st0 { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; } } /*# sourceMappingURL=main.css.map */