@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: 0em;
}
#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 .b_sticky {
  position: sticky;
}
#content .b_column {
  top: 0;
  /*height: 732px;*/
}
#content .sec04_column02.b_column {
  top: 456px;
  height: 276px;
}
#content .sec05_column02.b_column {
  top: 521px;
  height: 211px;
}
/* =========================================================
アニメーション
========================================================= */
#content .sec_txt.is-fade,
#content .sec06_img.is-fade{
  opacity: 0;
}
#content .sec_txt.is-show,
#content .sec06_img.is-show{
  animation: ani_c_fadeup 1s 0.2s forwards ease;
}
@keyframes ani_c_fadeup {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#content .sec01_en.is-fade,
#content .sec03_en.is-fade{
  opacity: 0;
}
#content .sec01_en.is-show,
#content .sec03_en.is-show{
  animation: ani_sec01_en 1s 0s forwards ease;
}
@keyframes ani_sec01_en{
   0%{
      clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
      opacity: 1;
   }
   100%{
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
      opacity: 1;
   }
}

#content .sec02_en.is-fade,
#content .sec04_en.is-fade,
#content .sec05_en.is-fade{
  opacity: 0;
}
#content .sec02_en.is-show,
#content .sec04_en.is-show,
#content .sec05_en.is-show{
  animation: ani_sec02_en 1s 0s forwards ease;
}
@keyframes ani_sec02_en{
   0%{
      clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
      opacity: 1;
   }
   100%{
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
      opacity: 1;
   }
}





/* =========================================================
sec01
========================================================= */
#content .sec01 {
  background: #F9D3E4;
  height: 55.6vw;
  position: relative;
}
#content .sec01_img {
  margin: 0 0 0 calc(587 * (100vw / 1300));
  padding: calc(42 * (100vw / 1300)) 0 0;
  width: calc(551 * (100vw / 1300));
}
#content .sec01_txt {
  position: absolute;
  top: calc(152 * (100vw / 1300));
  left: calc(197 * (100vw / 1300));
  width: calc(442 * (100vw / 1300));
}
#content .sec01_en {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(208 * (100vw / 1300));
}


/* =========================================================
sec02
========================================================= */
#content .sec02 {
  background: #FCDE7F;
  position: relative;
  height: 55.6vw;
}
#content .sec02_img {
  margin: 0 0 0 auto;
  padding: calc(96 * (100vw / 1300)) 0 0;
  width: calc(989 * (100vw / 1300));
}
#content .sec02_txt {
  position: absolute;
  top: calc(201 * (100vw / 1300));
  left: calc(86 * (100vw / 1300));
  width: calc(477 * (100vw / 1300));
}
#content .sec02_en {
  position: absolute;
  top: -1px;
  left: 0;
  width: calc(1229 * (100vw / 1300));
}
/* =========================================================
sec03
========================================================= */
#content .sec03 {
  background: #B4E7E7;
  position: relative;
  height: 55.6vw;
}
#content .sec03_img {
  margin: 0 0 0 calc(220 * (100vw / 1300));
  padding: calc(42 * (100vw / 1300)) 0 0;
  width: calc(770 * (100vw / 1300));
}
#content .sec03_txt {
  position: absolute;
  top: calc(179 * (100vw / 1300));
  left: calc(816 * (100vw / 1300));
  width: calc(447 * (100vw / 1300));
}
#content .sec03_en {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(256 * (100vw / 1300));
}
/* =========================================================
sec04
========================================================= */
#content .sec04 {
  background: #E3E2FF;
  position: relative;
  height: 55.6vw;
}
#content .sec04_img {
  margin: 0 0 0 auto;
  padding: calc(139 * (100vw / 1300)) 0 0;
  width: calc(823 * (100vw / 1300));
}
#content .sec04_txt {
  position: absolute;
  top: calc(42 * (100vw / 1300));
  left: calc(84 * (100vw / 1300));
  width: calc(511 * (100vw / 1300));
}
#content .sec04_en {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(718 * (100vw / 1300));
}
/* =========================================================
sec05
========================================================= */
#content .sec05 {
  background: #D5F2FF;
  position: relative;
  height: 55.6vw;
  overflow: hidden;
}
#content .sec05_img {
  margin: 0;
  padding: 0;
  width: calc(849 * (100vw / 1300));
}
#content .sec05_txt {
  position: absolute;
  top: calc(50 * (100vw / 1300));
  right: calc(-2 * (100vw / 1300));
  width: calc(804 * (100vw / 1300));
}
#content .sec05_en {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(1241 * (100vw / 1300));
}
/* =========================================================
sec06
========================================================= */
#content .sec06 {
  background: #EEEEEE;
  padding: calc(70 * (100vw / 1300)) 0 calc(48 * (100vw / 1300));
}
#content .sec06_img {
  margin: 0 0 0 calc(28 * (100vw / 1300));
  padding: 0;
  width: calc(1240 * (100vw / 1300));
}
/* =========================================================
sec07
========================================================= */
#content .sec07 {
  background: #418BBF;
  padding: 0 0 100px;
}
#content .sec07_title {
  width: 100%;
  margin: 0 auto;
}
/*#content .sec07_movie{
	position: relative;
}

#content .sec07_movie_dummy{
	width: 800px;
	margin: -6px auto;
}*/
#content .sec07_movie {
  width: 800px;
  margin: -6px auto;
  position: relative;
}

#content .youtube-video {
  width: 800px;
  height: 450px;
  margin: 0 auto;
  position: relative;
}

#content .sec07_movie video {
  width: 800px;
  height: auto;
  aspect-ratio: 16/9;
  z-index: 0;
  position: relative;
}
#content .sec07_movie #movie-button {
  width: 160px;
  height: 160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer; /*カーソルを指に変更*/
  z-index: 1;
}
#content .sec07_movie .movie-button {
  display: flex;
  justify-content: center;
  align-items: center; /*#video-buttonの中央に配置*/
}
#content .sec07_movie .movie-button span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #CF000F;
  font-size: 1.2rem;
}
/* =========================================================
sec08
========================================================= */
#content .sec08 {
  background: #EEEEEE;
  padding-bottom: 50px;
}
#content .sec08_title {
  width: 100%;
  margin: 0 auto;
}
#content .sec08_flex {
  width: calc(100% - 160px);
  margin: 175px auto 0;
  justify-content: space-between;
  align-items: top;
  padding: 0 80px;
  column-gap: 40px;
  flex-wrap: wrap;
}
#content .sec08_flex_column {
  position: relative;
}
#content .sec08_flex_column:nth-child(n+3) {
  margin-top: 94px;
}
#content .spec01 {
  flex-basis: 350px;
}
#content .spec02 {
  flex-basis: 750px;
}
#content .spec01_img::before {
  content: '';
  background: url("../img/sec08_01.png") no-repeat;
  width: 72px;
  height: 73px;
  position: absolute;
  top: -58px;
  left: -24px;
}
#content .spec01_flex {
  flex-flow: column;
}
#content .spec01_flex_icon {
  width: 250px;
  margin: 2px 0 0 36px;
}
#content .spec01_flex_headline {
  margin: 4px 0 0 0;
  line-height: 0;
  font: 400 18px/30px "Zen Kaku Gothic New", serif;
}
#content .spec01_flex_txt {
  margin: 7px 0 0 0;
  font: 400 12px/20px "Zen Kaku Gothic New", serif;
  letter-spacing: 0.1em;
}
#content .spec02_img::before {
  content: '';
  background: url("../img/sec08_02.png") no-repeat;
  width: 90px;
  height: 73px;
  position: absolute;
  top: -64px;
  left: -22px;
}
#content .spec02_flex {
  flex-flow: nowrap;
  column-gap: 25px;
}
#content .spec02_flex_icon {
  width: 87px;
  margin: 0;
}
#content .spec02_flex_headline {
  margin: 16px 0 0 0;
  line-height: 0;
  font: 400 18px/30px "Zen Kaku Gothic New", serif;
}
#content .spec02_flex_txt {
  margin: 9px 0 0 0;
  font: 400 12px/20px "Zen Kaku Gothic New", serif;
  letter-spacing: 0.1em;
}
#content .spec03_img::before {
  content: '';
  background: url("../img/sec08_03.png") no-repeat;
  width: 92px;
  height: 73px;
  position: absolute;
  top: -59px;
  left: -24px;
}
#content .spec03_flex {
  flex-flow: nowrap;
  column-gap: 24px;
}
#content .spec03_flex_icon {
  width: 73px;
  margin: 18px 0 0 14px;
}
#content .spec03_flex_headline {
  margin: 17px 0 0 0;
  line-height: 0;
  font: 400 18px/30px "Zen Kaku Gothic New", serif;
}
#content .spec03_flex_txt {
  margin: 10px 0 0 0;
  font: 400 12px/20px "Zen Kaku Gothic New", serif;
  letter-spacing: 0.1em;
}
#content .spec04_img::before {
  content: '';
  background: url("../img/sec08_04.png") no-repeat;
  width: 97px;
  height: 73px;
  position: absolute;
  top: -58px;
  left: -21px;
}
#content .spec04_flex {
  flex-flow: nowrap;
  column-gap: 8px;
}
#content .spec04_flex_icon {
  width: 170px;
  margin: 6px 0 0 0;
}
#content .spec04_flex_headline {
  margin: 20px 0 0 0;
  line-height: 0;
  font: 400 18px/30px "Zen Kaku Gothic New", serif;
}
#content .spec04_flex_txt {
  margin: 8px 0 0 0;
  font: 400 12px/20px "Zen Kaku Gothic New", serif;
  letter-spacing: 0.1em;
}
#content .sec08_note {
  text-align: center;
  margin: 41px auto 0;
  font: 400 14px/18px "Zen Kaku Gothic New", serif;
}



#content .modal_open{
  width: 300px;
  height: 50px;
  background: #408BBF;
  font: 500 16px/30px "Zen Kaku Gothic New", serif;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 98px auto 0;
  cursor: pointer;
}
#content .modal_container{
  position: fixed;
  top: 163px;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(64, 90, 128, 0.9);
  padding: 100px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  box-sizing: border-box;
}
#content .modal_title{
  letter-spacing: 0.1em;
  color:#FFF;
  font: 500 30px/30px "Noto Sans JP", sans-serif;
}

#content .modal_container:before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
#content .modal_container.active{
  opacity: 1;
  visibility: visible;
}
#content .modal_body{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 1300px;
  width: 90%;
}
#content .modal_close{
  position: fixed;
  top: 203px;
  right: 60px;
  width: 40px;
  height: 40px;
  color: #fff;
  cursor: pointer;
}
#content .modal_close::before{
  background-color: #fff;
  content: "";
  height: 2px;
  position: absolute;
  width: 100%;
  transform: rotate(45deg);
}
#content .modal_close::after{
  background-color: #fff;
  content: "";
  height: 2px;
  position: absolute;
  width: 100%;
  transform: rotate(-45deg);
}
#content .modal_content{
  text-align: left;
  margin-top:98px;
}
#content .modaal-img:nth-child(n+2){
  margin-top:55px;
}
















/* =========================================================
sec09
========================================================= */
#content .sec09 {
  background: #50C5C7;
  padding-bottom: 146px;
}
#content .sec09_title {
  width: 550px;
  margin: 0 auto;
}
#content .sec09_flex {
  display: flex;
  justify-content: space-between;
  margin-top: 90px;
  column-gap: 59px;
  padding: 0 80px;
}
#content .sec09_flex:nth-child(n+2) {
  margin-top: 100px;
}
#content .sec09_flex:nth-child(even) {
  flex-flow: row-reverse;
}
#content .lineup_column {
  flex-basis: 540px;
}
#content .lineup_column_txt {
  position: relative;
  margin: 0px 0 0 60px;
  color: #FFF;
}
#content .lineup_column_name {
  font: 700 26px/1 "Zen Kaku Gothic New", serif;
}
#content .lineup_column_catch {
  font: 400 18px/30px "Zen Kaku Gothic New", serif;
  margin-top: 20px;
}
#content .lineup_column_detail {
  font: 400 14px/28px "Zen Kaku Gothic New", serif;
  margin-top: 17px;
  letter-spacing: 0.1em;
}
#content .sec09_flex:nth-child(even) .lineup_column_txt {
  margin: 0px 0 0 50px;
}
#content .lineup01_column_txt {
  width: 348px;
}
#content .lineup01_column_txt::before {
  content: '';
  background-image: url("../img/sec09_icon_new.png");
  position: absolute;
  top: -21px;
  left: 108px;
  width: 65px;
  height: 65px;
}
#content .lineup02_column_txt {
  width: 355px;
}
#content .lineup02_column_txt::before {
  content: '';
  background-image: url("../img/sec09_icon_new.png");
  position: absolute;
  top: -21px;
  left: 262px;
  width: 65px;
  height: 65px;
}
#content .lineup03_column_txt {
  width: 356px;
}
#content .lineup04_column_txt {
  width: 341px;
}
#content .lineup05_column_txt {
  width: 356px;
}
#content .lineup06_column_txt {
  width: 351px;
}
#content .lineup_column_btn {
  width: 300px;
  margin: 42px 0 0 60px;
}
#content .lineup_column_btn a {
  width: 300px;
  height: 50px;
  background: #FFF;
  color: #1BB3B6;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 500 16px/1 "Zen Kaku Gothic New", serif;
}
#content .sec09_flex:nth-child(even) .lineup_column_btn {
  width: 300px;
  margin: 45px 0 0 50px;
}
/* =========================================================
sec10
========================================================= */
#content .sec10 {
  padding: 74px 0 100px;
}
#content .sec10_btn_title {
  margin: 0 auto;
  font: 400 20px/50px "Zen Kaku Gothic New", serif;
  text-align: center;
  color: #707070;
}
#content .sec10_btn_list {
  width: 1040px;
  justify-content: space-between;
  margin: 39px auto 0;
}
#content .sec10_btn_list a {
  width: 300px;
  height: 50px;
  background: #50C5C7;
  color: #FFF;
  font: 400 17px/1 "Zen Kaku Gothic New", serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
#content .sec10_bnr_list {
  width: 1040px;
  justify-content: space-between;
  margin: 0 auto;
}