@charset "utf-8";
/* =========================================================
共通
========================================================= */
html {
  scroll-behavior: smooth;
}
.l-container {
  width: 100%;
  background-color: #FFF;
}
#feature {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #000000;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 1;
}
#feature img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#feature .pc_only {
  display: block;
}
#feature .sp_only {
  display: none;
}
#content {
  width: 100%;
}
/* =========================================================
common
========================================================= */
/* =========================================================
block
========================================================= */
#content .b_inner {
  width: 1300px;
  margin: 0 auto;
}
#content .b_flex {
  display: flex;
}
/* =========================================================
アニメーション
========================================================= */
#content .intro_txt::before {
  opacity: 0;
}
#content .intro_flex01 .intro_txt::before {
  animation: ani01_model 2s steps(2, jump-none) infinite;
}
#content .intro_flex02 .intro_txt::before {
  animation: ani02_model 2s steps(2, jump-none) infinite;
}
#content .intro_flex03 .intro_txt::before {
  animation: ani03_model 2s steps(2, jump-none) infinite;
}
#content .intro_flex03 .intro_illust {
  animation: ani05_umbrella01 2s steps(2, jump-none) infinite;
}
#content .intro_flex04 .intro_txt::before {
  animation: ani04_model 2s steps(2, jump-none) infinite;
}
#content .intro_flex04 .intro_illust {
  animation: ani06_umbrella01 2s steps(2, jump-none) infinite;
}
@keyframes ani01_model {
  0% {
    background-image: url("../img/ani01_model01.png");
    opacity: 1;
  }
  100% {
    background-image: url("../img/ani01_model02.png");
    opacity: 1;
  }
}
@keyframes ani02_model {
  0% {
    background-image: url("../img/ani02_model01.png");
    opacity: 1;
  }
  100% {
    background-image: url("../img/ani02_model02.png");
    opacity: 1;
  }
}
@keyframes ani03_model {
  0% {
    background-image: url("../img/ani03_model01.png");
    opacity: 1;
  }
  100% {
    background-image: url("../img/ani03_model02.png");
    opacity: 1;
  }
}
@keyframes ani05_umbrella01 {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
@keyframes ani04_model {
  0% {
    background-image: url("../img/ani04_model01.png");
    opacity: 1;
  }
  100% {
    background-image: url("../img/ani04_model02.png");
    opacity: 1;
  }
}
@keyframes ani06_umbrella01 {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}
/* =========================================================
sec01
========================================================= */
#content .sec01 {
  background: linear-gradient(to bottom, #77C9F0 0%, #77C9F0 33.333%, #F7B35B 33.333%, #F7B35B 66.666%, #B3D141 66.666%, #B3D141 100%);
  overflow: hidden;
}
#content .sec01_inner {
  background: url("../img/sec_bg.png");
  background-size: cover;
}
/*sec01_column01========================================================= */
#content .sec01_column01 {
  position: relative;
  padding-top: 91px;
}
#content .sec01_lead {
  margin: 0 auto;
  font: 500 20px/50px "Noto Sans JP", sans-serif;
  text-align: center;
  color: #FFF;
}
#content .sec01_movie {
  position: relative;
  margin-top: 101px;
}
#content .sec01_movie_dummy {
  width: 589px;
  margin: 0 auto;
}
#content .sec01_movie {
  width: 720px;
  margin: 88px auto 0;
  position: relative;
}
#content .sec01_movie video {
  width: 720px;
  height: auto;
  aspect-ratio: 16/9;
  z-index: 0;
  position: relative;
}
#content .sec01_movie .youtube-video {
  width: 720px;
  height: 405px;
  aspect-ratio: 16/9;
  z-index: 0;
  position: relative;
}
#content .sec01_movie #movie-button {
  width: 160px;
  height: 160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer; /*カーソルを指に変更*/
  z-index: 1;
}
#content .sec01_movie .movie-button {
  display: flex;
  justify-content: center;
  align-items: center; /*#video-buttonの中央に配置*/
}
#content .sec01_movie .movie-button span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #CF000F;
  font-size: 1.2rem;
}
/*sec01_column02========================================================= */
#content .sec01_column02 {
  position: relative;
  padding-top: 58px;
}
#content .intro_flex01 {
  position: relative;
  column-gap: 30px;
}
#content .intro_flex01 .intro_txt {
  margin: 430px 0 0 103px;
  position: relative;
  font: 500 20px/50px "Noto Sans JP", sans-serif;
  color: #FFF;
}
#content .intro_flex01 .intro_txt::before {
  content: '';
  background-size: contain;
  width: 400px;
  height: 400px;
  position: absolute;
  top: -433px;
  left: -74px;
}
#content .intro_flex01 .intro_illust {
  margin: 149px 0 0 -15px;
  width: 716px;
}
#content .intro_flex02 {
  margin-top: 42px;
  flex-flow: row-reverse;
}
#content .intro_flex02 .intro_txt {
  margin: 344px 116px 0 0;
  position: relative;
  font: 500 20px/50px "Noto Sans JP", sans-serif;
  color: #FFF;
}
#content .intro_flex02 .intro_txt::before {
  content: '';
  background-size: contain;
  width: 400px;
  height: 400px;
  position: absolute;
  top: -416px;
  left: 60px;
}
#content .intro_flex02 .intro_illust {
  margin: 0;
  width: 713px;
}
#content .intro_flex02 .intro_illust img {
  transform: translateX(19px);
}
#content .intro_flex03 {
  margin-top: 9px;
}
#content .intro_flex03 .intro_txt {
  margin: 464px 0 0 165px;
  position: relative;
  font: 500 20px/50px "Noto Sans JP", sans-serif;
  color: #FFF;
}
#content .intro_flex03 .intro_txt::before {
  content: '';
  background-size: contain;
  width: 400px;
  height: 400px;
  position: absolute;
  top: -465px;
  left: -29px;
}
#content .intro_flex03 .intro_illust {
  margin: 73px 0 0 9px;
  width: 555px;
  height: 555px;
  background-image: url("../img/ani05_umbrella01.png");
  background-position: left;
}
#content .intro_flex04 {
  margin-top: 123px;
  padding-bottom: 133px;
  flex-flow: row-reverse;
  justify-content: space-between;
}
#content .intro_flex04 .intro_txt {
  margin: 20px 139px 0 0;
  position: relative;
  font: 500 20px/50px "Noto Sans JP", sans-serif;
  color: #FFF;
}
#content .intro_flex04 .intro_txt::before {
  content: '';
  background-size: contain;
  width: 400px;
  height: 400px;
  position: absolute;
  top: 265px;
  left: -33px;
}
#content .intro_flex04 .intro_illust {
  margin: 0 0 0 181px;
  width: 480px;
  height: 600px;
  background-image: url("../img/ani06_umbrella01.png");
  background-position: left;
}
/* =========================================================
sec09
========================================================= */
#content .sec02 {
  background: #FFED5F;
  padding: 127px 0 142px;
}
#content .sec02_title {
  width: 225px;
  margin: 0 0 0 110px;
}
#content .sec02_flex {
  display: flex;
  justify-content: space-between;
  margin-top: 78px;
  column-gap: 0;
  padding: 0 104px;
}
#content .sec02_flex:nth-child(n+2) {
  margin-top: 123px;
}
#content .sec02_flex:nth-child(even) {
  flex-flow: row-reverse;
}
#content .lineup_column {
  flex-basis: 540px;
}
#content .lineup_column_txt {
  position: relative;
  margin: 3px 0 0 107px;
  color: #707070;
}
#content .lineup_column_name {
  font: 600 26px/1 "IBM Plex Sans", serif;
}
#content .lineup_column_catch {
  font: 400 18px/30px "Noto Sans JP", serif;
  margin-top: 19px;
}
#content .lineup_column_detail {
  font: 600 14px/30px "IBM Plex Sans", serif;
  margin-top: 12px;
  letter-spacing: 0.01em;
}
#content .sec02_flex:nth-child(even) .lineup_column_txt {
  margin: 1px 0 0 0;
}
#content .lineup01_column_txt {
  width: 375px;
}
#content .lineup01_column_txt::before {
  content: '';
  background-image: url("../img/sec09_icon_new.png");
  position: absolute;
  top: -26px;
  left: 107px;
  width: 65px;
  height: 65px;
}
#content .lineup02_column_txt {
  width: 376px;
}
#content .lineup02_column_txt::before {
  content: '';
  background-image: url("../img/sec09_icon_new.png");
  position: absolute;
  top: -26px;
  left: 262px;
  width: 65px;
  height: 65px;
}
#content .lineup03_column_txt {
  width: 365px;
  margin: 2px 0 0 105px;
}
#content .lineup_column_btn {
  width: 300px;
  margin: 43px 0 0 107px;
}
#content .lineup_column_btn a {
  width: 300px;
  height: 50px;
  background: #FFF;
  font: 500 16px/30px "Noto Sans JP", serif;
  color: #4D4D4D;
  display: flex;
  align-items: center;
  justify-content: center;
}
#content .sec02_flex:nth-child(even) .lineup_column_btn {
  width: 300px;
  margin: 43px 0 0 0;
}
/* =========================================================
sec10
========================================================= */
#content .sec03 {
  padding: 96px 0 72px;
}
#content .sec03_btn_title {
  width: 100%;
  margin: 0 auto;
  font: 400 20px/1 "Noto Sans JP", serif;
  text-align: center;
}
#content .sec03_btn_list {
  width: 1040px;
  justify-content: space-between;
  margin: 51px auto 0;
}
#content .sec03_btn_list a {
  width: 300px;
  height: 50px;
  border: 1px solid #707070;
  box-sizing: border-box;
  color: #707070;
  font: 600 17px/1 "Noto Sans JP", serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
#content .sec03_bnr_list {
  width: 1040px;
  justify-content: space-between;
  margin:0 auto;
}