/*! sanitize.css v3.0.0 | CC0 1.0 Public Domain | ://github.com */
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);
}

/* --- カスタムプロパティ (Variables) --- */
: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;
  }
}

/* アンカーリンクのスクロール位置調整（HTML内の footer#footer 用） */
[id] {
  scroll-margin-top: 80px;
}
@media screen and (min-width: 1200px) {
  [id] {
    scroll-margin-top: 100px;
  }
}

:focus:not(:focus-visible) {
  outline: 0;
}

/* --- アニメーション (Animation Keyframes) --- */
@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;
	}
  .caution-title {
	  text-align: left;
    color: #0080cb;
	  font-size: 1.3rem !important;
	  line-height: 180% !important;
	  margin-bottom: -10px !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: 1.0rem !important;
	  line-height: 180% !important;
	  padding: 10px 0 0 0;
	  margin-bottom: 10px !important;
	  clear: both;
	}
  .caution-title {
	  text-align: left;
    color: #0080cb;
	  font-size: 1.1rem !important;
	  line-height: 180% !important;
	  margin-bottom: -10px !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: 2.0rem;
		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: 1.0rem !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: 1.0rem !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 1.0s 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.0);
  }
  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;
}