html { overflow-y: scroll; -webkit-text-size-adjust: 100%; } main { display: block; padding: 0; margin: 0 !important; } html, body { overflow-x: hidden !important; } *, :before, :after { box-sizing: inherit; border-style: solid; border-width: 0; } * { font-size: inherit; line-height: inherit; background-repeat: no-repeat; margin: 0; padding: 0; } :before, :after { text-decoration: inherit; vertical-align: inherit; } :root { background-color: #fff; box-sizing: border-box; color: #000; cursor: default; font: 100%/1.5 sans-serif; text-rendering: optimizeLegibility; } img { vertical-align: middle; } ::-moz-selection { background-color: #b3d4fc; color: #4c2b03; text-shadow: none; } ::selection { background-color: #b3d4fc; color: #4c2b03; text-shadow: none; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :root { --width-tablet: $width_tablet; --width-desktop: $width_desktop; --width-container: 1300px; --space-xxs: 0.4rem; --space-xs: 0.8rem; --space-sm: 1.2rem; --space-md: 1.6rem; --space-lg: 2.4rem; --space-lg_xl: 2.8rem; --space-xl: 3.2rem; --space-xxl: 4.8rem; --space-3l: 6.4rem; --space-4l: 9.6rem; --font-size-xs: 1.2rem; --font-size-sm: 1.4rem; --font-size-md: 1.6rem; --font-size-lg: 1.8rem; --font-size-xl: 2rem; --font-size-2_2xl: 2.2rem; --font-size-2xl: 2.6rem; --font-size-2_5xl: 2.8rem; --font-size-3xl: 3.2rem; --font-size-4xl: 5.6rem; --container-sm: 775px; --container-md: 1100px; --container-lg: 1294px; --color-primary-red: #e57e9c; --color-primary-green: #00b092; --color-primary-blue: #65b4ed; --color-text-main: #333333; --color-text-sub: #b3b3b3; --color-bg-base: #ffffff; --font-family-base: "Noto Sans JP", sans-serif; } @media (min-width: 768px) { :root { --font-size-xs: 1.4rem; --font-size-sm: 1.6rem; --font-size-md: 1.8rem; --font-size-lg: 2rem; --font-size-xl: 2.6rem; --font-size-2_2xl: 2.8rem; --font-size-2xl: 3.2rem; --font-size-2_5xl: 3.6rem; --font-size-3xl: 5.6rem; --font-size-4xl: 7.2rem; } } @media (min-width: 1024px) { :root { --space-xxs: 0.8rem; --space-xs: 1.2rem; --space-sm: 1.6rem; --space-md: 2.4rem; --space-lg: 3.2rem; --space-lg_xl: 4rem; --space-xl: 4.8rem; --space-xxl: 6.4rem; --space-3l: 9.6rem; --space-4l: 12.8rem; } } :root { font-size: 62.5%; scroll-behavior: smooth; } body { font-size: 1.6rem; line-height: 1.8; font-family: "Noto Sans JP", YuGothic, "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif; color: var(--color-font); font-feature-settings: "halt"; -webkit-font-smoothing: antialiased; letter-spacing: 0.04em; font-weight: 500; overflow: hidden; animation: fadeIn 1.5s ease 0s 1 normal; -webkit-animation: fadeIn 1.5s ease 0s 1 normal; transition: all 0.2s ease-in-out; } @media screen and (min-width: 1200px) { body { letter-spacing: 0.05em; } } [id] { scroll-margin-top: 80px; } @media screen and (min-width: 1200px) { [id] { scroll-margin-top: 100px; } } :focus:not(:focus-visible) { outline: 0; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .section { position: relative; padding-bottom: 49px; background-color: #02b13e; } @media screen and (min-width: 1024px) { .section { padding-bottom: 79px; } } @media screen and (min-width: 1200px) { .section { padding-bottom: 96px; } } .container { width: 100%; max-width: 1400px !important; } .container_area { background-image: url("../images/bg.png"); background-position: top center; background-repeat: repeat-y; background-size: 100% auto; } @media screen and (min-width: 1024px) { .container { padding-left: var(--space-lg_xl); padding-right: var(--space-lg_xl); } } @media screen and (min-width: 1200px) { .container { max-width: 1280px; } } header { width: 100%; height: auto; padding: 0 0 40px 0; background-position: top center; background-repeat: no-repeat; background-size: 100% auto; overflow: hidden !important; } @media screen and (min-width: 1024px) { header { display: flex; aspect-ratio: 2800 / 1300; background-image: url("../images/header_bg.png"); } .container { padding-left: var(--space-lg); padding-right: var(--space-lg); margin-left: auto; margin-right: auto; } } @media screen and (max-width: 1023px) { header { display: block; aspect-ratio: auto !important; background-color: #02b13e; background-image: url("../images/sp_header_bg.png"); } .container { padding-left: 10px; padding-right: 10px; margin-left: 0; margin-right: 0; } } .footer { text-align: center; padding-block: 39px 20px; } @media screen and (min-width: 1024px) { .footer { padding-block: 53px 30px; } } .footer__logo { display: block; width: 170px; margin: 0 auto; } @media screen and (min-width: 1024px) { .footer__logo { width: 200px; } } .footer__logo img { width: 100%; height: 100%; object-fit: contain; } .footer__address { font-size: 1.2rem; font-weight: normal; margin-top: 1.4rem; } .footer__copyright { font-size: 1rem; font-weight: normal; margin-top: 0.5rem; } .contents_area { display: block; width: 100%; max-width: 1280px; height: auto; min-height: 200px; margin: 0 auto; background-image: url("../images/contents_bg.png"); background-position: top center; background-repeat: repeat-y; background-size: 100% auto; border-radius: 20px; } .title_event img { display: block; width: 100%; height: auto; margin: 0 auto 0 auto !important; } .block { background-color: #fff; border-radius: 20px; box-sizing: border-box; overflow: auto; overflow-x: hidden; } @media screen and (min-width: 1024px) { .contents_area { padding: 0 40px 5px 40px; } .block_area { display: flex; justify-content: space-between; width: 100%; margin: 40px 0 15px 0; } .block { padding: 30px 30px 15px 30px; border: solid 10px #54c2f0; } .col-left, .col-right { display: flex; flex-direction: column; width: 48.75%; } .block { margin-bottom: 33px; width: 100%; } .block p { font-size: 1.9rem; letter-spacing: 1px; font-weight: 500; margin-bottom: 25px; } .caution { text-align: left; font-size: 1.2rem !important; line-height: 180% !important; padding: 10px 0 0 0; margin-bottom: 20px !important; clear: both; } .title_event { display: block; width: 56%; max-width: 345px; height: auto; margin: 0 auto -65px auto !important; } } @media screen and (max-width: 1023px) { .contents_area { padding: 0 10px 5px 10px; } .block_area { display: block; width: 100%; } .block { padding: 20px 20px 15px 20px; border: solid 8px #54c2f0; margin-bottom: 25px; } .block p { font-size: 1.6rem; letter-spacing: 0; font-weight: 500; margin-bottom: 20px; } .title_event { display: block; width: 56%; max-width: 345px; height: auto; margin: 0 auto -70px auto !important; } .caution { text-align: left; font-size: 1rem !important; line-height: 180% !important; padding: 10px 0 0 0; margin-bottom: 20px !important; clear: both; } } .block h3 { text-align: left; } .block h3 img { object-fit: contain; object-position: left; } .block dl { display: block; width: 100%; float: left; clear: both; } .block .red_frame { display: block; width: 100%; text-align: left; line-height: 150%; font-weight: 600; color: #fff; padding: 12px 20px; margin-right: 15px; margin-bottom: 15px; background-color: #e50012; border-radius: 10px; float: left; clear: left; } .sticker_img { display: block; width: 100%; height: auto; } .topimg { display: block; width: 100%; margin: 0 !important; clear: both; } header img { vertical-align: top; } @media screen and (min-width: 1024px) { .title_area { display: block; position: relative; width: 42% !important; height: auto !important; margin-top: 6.92%; margin-left: 7.57%; } .title01 { width: 84.6%; float: right !important; clear: both; } .title02 { width: 95.7%; margin-top: -15.2%; clear: both; } .period { width: 77.7%; margin-top: 12%; margin-left: 10%; clear: both; } header .character { position: relative; width: 45.5% !important; height: auto; margin-top: 4%; margin-left: -0.5% !important; float: left !important; pointer-events: none; } .character_bottom { width: 43%; max-width: 495px; margin-top: -22%; margin-right: 1%; float: right; pointer-events: none; } .sp { display: none; } .kira { display: block; position: absolute; width: 100% !important; height: auto; margin: 0 !important; contain: paint !important; } .lead_caution { text-align: right; font-size: 1.1rem !important; padding: 25px 0 0 0; } .lead_caution br { display: none; } .block h3 img { margin-left: -5px; margin-bottom: 30px; max-height: 100px; } .block .red_frame { font-size: 2.1rem; line-height: 150%; } .sticker_img { margin: -20px 0 15px 0; } .block dl dt { display: block; width: 85px; text-align: center; font-size: 2rem; line-height: 150%; font-weight: 600; color: #fff8b0; padding: 7px 0; margin-right: 15px; margin-bottom: 15px; background-color: #00993b; border-radius: 10px; float: left; clear: left; } .block dl dd { display: block; width: calc(100% - 100px); text-align: left; font-size: 2.2rem; line-height: 160%; font-weight: 600; padding-top: 4px; margin-bottom: 15px; float: left; } .block dl dd span { display: inline-block; font-size: 1.6rem !important; line-height: 160% !important; font-weight: 500 !important; letter-spacing: 0.8px; margin-top: 0; float: left; clear: both; } .block dl dd small { display: inline-block; font-size: 1.6rem !important; line-height: 160% !important; font-weight: 500 !important; letter-spacing: 0.8px; vertical-align: top !important; margin-top: 6px !important; float: none !important; clear: none !important; } } @media screen and (max-width: 1279px) { .lead_caution br { display: block; } } @media screen and (max-width: 1023px) { .title_area { display: block; position: relative; width: 100% !important; height: auto !important; margin-bottom: -19%; float: left; clear: both; } .title01 { width: 100%; margin: 0; float: none!im2portant; clear: both; } .title02 { position: relative; width: 100%; clear: both; margin-top: -16%; z-index: 2 !important; } .period { width: 72%; margin-top: 2%; margin-left: 16%; clear: both; } header .sp_character { display: block; position: relative; width: 100% !important; height: auto; clear: both; pointer-events: none; z-index: 1; } .character_bottom { width: 90%; clear: both; pointer-events: none; margin: 0 5% 10px 5%; } .pc { display: none; } .lead_caution { text-align: center; font-size: 1.3rem !important; letter-spacing: 0 !important; padding: 90px 0 20px 0; } .lead_caution br { display: none; } .block h3 img { margin-left: 0; margin-bottom: 15px; max-height: 150px; } .block .red_frame { font-size: 2.1rem; line-height: 150%; } .sticker_img { margin: 20px 0 15px 0; } .block dl dt { display: block; width: 70px; text-align: center; font-size: 1.7rem; line-height: 150%; font-weight: 600; color: #fff8b0; padding: 6px 0 7px 0; margin-right: 15px; margin-bottom: 10px; background-color: #00993b; border-radius: 7px; float: left; clear: left; } .block dl dd { display: block; width: calc(100% - 85px); text-align: left; font-size: 1.7rem; line-height: 150%; font-weight: 600; padding-top: 6px; margin-bottom: 10px; float: left; } .block dl dd span { display: inline-block; font-size: 1.4rem !important; line-height: 150% !important; font-weight: 500 !important; letter-spacing: 0.5px; margin-top: 0; float: left; clear: both; } .block dl dd small { display: inline-block; font-size: 1.2rem !important; line-height: 160% !important; font-weight: 500 !important; letter-spacing: 0.8px; vertical-align: baseline !important; float: none !important; clear: none !important; } } @media screen and (max-width: 576px) { .lead_caution { text-align: center; font-size: 1rem !important; letter-spacing: 0 !important; padding: 55px 0 20px 0; } .title_event { margin: 0 auto -40px auto !important; } .block { padding: 20px 15px 15px 15px; border: solid 5px #54c2f0; margin-bottom: 25px; } .block p { font-size: 1.2rem; letter-spacing: 0; font-weight: 500; margin-bottom: 20px; } .block dl dt { display: block; width: 55px; text-align: center; font-size: 1.3rem; line-height: 150%; font-weight: 600; color: #fff8b0; padding: 5px 0; margin-right: 15px; margin-bottom: 10px; background-color: #00993b; border-radius: 7px; float: left; clear: left; } .block dl dd { display: block; width: calc(100% - 70px); text-align: left; font-size: 1.5rem; line-height: 150%; font-weight: 600; padding-top: 4px; margin-bottom: 10px; float: left; } .block dl dd span { display: inline-block; font-size: 1rem !important; line-height: 150% !important; font-weight: 500 !important; letter-spacing: 0.5px; margin-top: 0; float: left; clear: both; } .block .red_frame { font-size: 1.3rem; line-height: 150%; } } .cloud { position: absolute; width: 100%; } header .character, header .sp_character { animation: keroCircleWipe 1s cubic-bezier(0.25, 1, 0.5, 1) 0.6s both !important; } @keyframes keroCircleWipe { 0% { opacity: 0; clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%); } 1% { opacity: 1; } 100% { opacity: 1; clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%); } } .cloud { animation: keroCloudUp 2.6s cubic-bezier(0.25, 1, 0.5, 1) 1.8s both !important; } @keyframes keroCloudUp { 0% { opacity: 0; margin-top: 100px; } 20% { opacity: 0.3; } 100% { opacity: 1; margin-top: 0; } } .title01 { animation: keroFadeIn 0.7s ease-out 1.8s both !important; } @keyframes keroFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .title02 { transform-origin: center center !important; animation: keroTitle02Bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.2s both !important; } @keyframes keroTitle02Bounce { 0% { opacity: 0; transform: scale(2); } 60% { opacity: 1; transform: scale(0.9); } 80% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } } .period { animation: keroPeriodSlideUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 3.3s both !important; } @keyframes keroPeriodSlideUp { 0% { opacity: 0; transform: translateY(40px); } 40% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } } .kira { transform-origin: center center !important; animation: keroKiraPopOut 0.55s cubic-bezier(0.175, 0.885, 0.42, 1.4) 4.1s both !important; } @keyframes keroKiraPopOut { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.2); } 75% { transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } .title_event, .lead_caution, .block, .character_bottom { opacity: 0; will-change: transform, opacity; } .title_event.is-visible, .lead_caution.is-visible, .block.is-visible, .character_bottom.is-visible { animation-fill-mode: both !important; animation-delay: calc(var(--i) * 0.18s) !important; } .title_event.is-visible, .lead_caution.is-visible { animation-name: keroScrollUpFade; animation-duration: 0.7s; } .block.is-visible { animation-name: keroScrollUpFade; animation-duration: 0.7s; } .character_bottom.is-visible { animation-name: keroScrollCharacterPop; animation-duration: 0.8s; } @keyframes keroScrollUpFade { 0% { opacity: 0; transform: translateY(35px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes keroScrollCharacterPop { 0% { opacity: 0; transform: translateY(50px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .staff { display: inline-block; color: #0080cb; font-weight: bold !important; background-color: #ffff00; padding: 3px 5px 2px 5px; margin-top: 5px !important; border-radius: 4px; float: left; clear: both; }