@charset "UTF-8";
body {
  min-width: 1260px;
  background-color: #ffffff;
  line-height: 1;
  color: #333333;
  font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "Osaka", sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

.u-fade {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
  transition-duration: 0.74s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: 0.1s;
}

.fade-in {
  opacity: 1;
  transform: translate(0);
}

.u-pc_none {
  display: none;
}

.p-mv {
  background-image: url(/pr/images/bg01_pc.webp);
  background-size: 1013px 875px;
  background-position: 280px 56px;
  background-repeat: no-repeat;
}

.p-mv_grid {
  display: grid;
  gap: 8px;
  max-width: 1040px;
  margin: 24px auto 0;
  padding: 0 20px;
}

.p-mv_logo {
  grid-column-start: 2;
  text-align: right;
}

.p-mv_copy {
  grid-row-start: 2;
  padding-top: 156px;
}

.p-mv_copy img {
  width: 490px;
  height: 161px;
}

.p-mv_txt {
  grid-row-start: 3;
  font-size: 1.5rem;
  line-height: 1.875;
  padding: 72px 0 151px;
}

.p-mv_txt-first {
  margin-bottom: 24px;
}

.p-movie {
  text-align: center;
}

.p-movie-r {
  border-radius: 35px;
}

.p-sec02_head {
  background-image: url(/pr/images/bg02_pc.webp);
  background-size: 1091px 799px;
  background-position: -40px 0;
  background-repeat: no-repeat;
  margin: 112px auto 48px;
}

.p-sec02_inner {
  max-width: 1040px;
  margin: 0 auto;
}

.p-sec02_copy {
  padding: 289px 0 50px;
}

.p-sec02_txt {
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1.777;
  padding-bottom: 209px;
}

.p-sec02_about_inner {
  display: flex;
  justify-content: space-between;
  max-width: 1040px;
  margin: 0 auto;
}

.p-sec02_about_box {
  margin: 100px 0 0 0;
  font-size: 1.125rem;
  line-height: 1.58;
}

.p-sec02_about_txt01 {
  margin-bottom: 252px;
}

.p-sec02_ex {
  width: 100%;
  margin: 50px auto 0;
  overflow: hidden;
}

.p-sec02_ex-box {
  display: flex;
  justify-content: space-between;
  max-width: 1040px;
  margin: 0 auto 80px;
}

.p-sec02_ex_txt {
  font-size: 1.125rem;
  line-height: 1.58;
  max-width: 1040px;
  margin-top: 16px;
}

.p-sec02_ex_outline {
  background-image: url(/pr/images/sec02_txt-pc.svg);
  background-size: 930px 479px;
  background-repeat: no-repeat;
  width: 930px;
  min-height: 479px;
  padding: 137px 98px 135px 156px;
  box-sizing: border-box;
  grid-column-start: 2;
  margin: 0 0 0 auto;
  font-size: 1.125rem;
  line-height: 1.6;
}

.p-sec02_ex_ttl {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 16px;
  font-weight: bold;
}

.p-sec02_ex_img {
  grid-column: span 2/span 2;
  display: block;
  margin: 0 -120px;
}

.p-timeline {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
}

.p-timeline_bg {
  position: absolute;
  top: -215px;
  left: 387px;
  z-index: 1;
  background-image: url(/pr/images/timeline-bg.webp);
  background-size: 188px 2356px;
  background-repeat: no-repeat;
  width: 188px;
  height: 2356px;
}

.p-timeline_box {
  display: grid;
  grid-template-columns: 378px 22% 43%;
}

.p-timeline_box01 {
  margin-bottom: 90px;
}

.p-timeline_box02 {
  margin-bottom: 104px;
}

.p-timeline_box03 {
  margin-bottom: 100px;
}

.p-timeline_box04 {
  margin-bottom: 150px;
}

.p-timeline_box05 {
  margin-bottom: 105px;
}

.p-timeline_img_box {
  height: 0;
}

.p-timeline_img {
  grid-row: span 3;
}

.p-timeline_movie {
  grid-row: span 3;
  border-radius: 16px;
}

.p-timeline_movie01 {
  margin-top: -85px;
}

.p-timeline_date {
  grid-column-start: 3;
  border-radius: 30px;
  background-color: #999999;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 45px;
  margin: 36px 0 8px;
}

.p-timeline_pre {
  grid-column-start: 3;
  border-radius: 30px;
  background-color: #3399CC;
  color: #ffffff;
  font-size: 1.875rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 136px;
  height: 58px;
  margin: 0 0 8px;
}

.p-timeline_ttl {
  grid-column-start: 3;
  grid-row-start: 2;
  font-size: 1.625rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.p-timeline_pre_ttl {
  grid-column-start: 3;
  grid-row-start: 2;
  font-size: 1.187rem;
  line-height: 1.578;
  color: #3499CC;
  font-weight: bold;
  margin-bottom: 56px;
}

.p-timeline_pre_head {
  grid-column-start: 3;
  grid-row-start: 1;
  color: #3399CC;
  font-size: 1.625rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.p-timeline_txt {
  grid-column-start: 3;
  grid-row-start: 3;
  font-size: 1.187rem;
  line-height: 1.57;
}

.p-timeline_pre_txt {
  grid-column-start: 3;
  grid-row-start: 2;
  font-size: 1.187rem;
  line-height: 1.57;
}

.p-sec03_head {
  background-image: url(/pr/images/bg03_pc.webp);
  background-size: 1107px 851px;
  background-position: 187px 0;
  background-repeat: no-repeat;
  margin-top: 112px;
}

.p-sec03_inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.p-sec03_copy {
  padding: 289px 0 50px;
}

.p-sec03_subttl {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 24px;
}

.p-sec03_txt {
  color: #000;
  font-size: 1.125rem;
  line-height: 1.777;
  padding-bottom: 209px;
}

.p-sec04_head {
  background-image: url(/pr/images/bg04_pc.webp);
  background-size: 1077px 876px;
  background-position: -40px 0;
  background-repeat: no-repeat;
}

.p-sec04_inner {
  max-width: 1040px;
  margin: 0 auto;
}

.p-sec04_copy {
  padding: 270px 0 48px;
}

.p-sec04_txt {
  color: #ffffff;
  font-size: 1.125rem;
  line-height: 1.777;
  padding-bottom: 209px;
}

.p-sec04_container {
  display: flex;
  justify-content: space-between;
  max-width: 1040px;
  margin: 0 auto 88px;
}

.p-sec04_box {
  text-align: center;
  line-height: 1.5;
}

.p-sec04_ttl {
  font-size: 1.625rem;
  font-weight: bold;
  margin: 16px auto 4px;
}

.p-sec04_img {
  margin: 0 auto 100px;
  display: block;
  text-align: center;
}

.p-sec04_more {
  text-align: center;
}

.p-sec04_btn {
  display: block;
  margin: 40px auto 136px;
}

.p-sec05 {
  display: flex;
  justify-content: center;
  gap: 41px;
  padding: 47px 0 46px;
  background-color: #969696;
}

@media only screen and (max-width: 768px) and (min-width: 400px){
  .p-mv {
    background-position: center 140px !important;
  }
  .p-sec02_head {
    background-position: center 0 !important;
  }
  .p-sec03_head {
    background-position: center 0 !important;
  }
  .p-sec04_head {
    background-position: center 0 !important;
  }
}

@media only screen and (max-width: 768px){
  body {
    min-width: 100%;
  }
  .u-sp_none {
    display: none;
  }
  .u-pc_none {
    display: block;
  }
  .p-mv {
    background-image: url(/pr/images/bg01_sp.webp);
    background-size: 359px 274px;
    background-position: 40px 150px;
  }
  .p-mv_logo {
    grid-column-start: 1;
    grid-row-start: 3;
    text-align: right;
  }
  .p-mv_logo img {
    width: 49px;
    height: 28px;
  }
  .p-mv_copy {
    grid-column-start: 1;
    grid-row-start: 2;
    padding-top: 16px;
    margin: 0 auto;
  }
  .p-mv_copy img {
    width: 207px;
    height: 71px;
  }
  .p-mv_txt {
    grid-column-start: 1;
    text-align: center;
    font-size: 1.2rem;
    line-height: 2;
    padding: 330px 0 56px;
  }
  .p-movie {
    width: 340px;
    margin: 0 auto;
  }
  .p-movie-r {
    border-radius: 15px;
    height: 191px;
  }
  .movie-note {
    font-size: 0.8rem;
  }
  .movie-note > .blank-link > img {
    width: 8px !important;
    height: 8px !important;
  }
  .p-sec02_head {
    background-image: url(/pr/images/bg02_sp.webp);
    background-size: 378px 288px;
    background-position: -20px 0;
    background-repeat: no-repeat;
    margin: 67px auto 59px;
    text-align: center;
  }
  .p-sec02_copy {
    padding: 312px 0 24px;
  }
  .p-sec02_copy img {
    width: 183px;
    height: 71px;
  }
  .p-sec02_txt {
    color: #000;
    font-size: 1.2rem;
    line-height: 2;
    padding-bottom: 0px;
  }
  .p-sec02_about_inner {
    padding: 0 20px;
    max-width: 375px;
  }
  .p-sec02_about_img {
    width: 150px;
    height: 287px;
  }
  .p-sec02_about_box {
    font-size: 1rem;
    line-height: 2.1;
    margin: 17px 0 0;
  }
  .p-sec02_about_txt01 {
    margin-bottom: 44px;
  }
  .p-sec02_ex {
    grid-template-columns: repeat(1, 1fr);
    margin: 0;
  }
  .p-sec02_ex_img {
    grid-row-start: 2;
    grid-column-start: 1;
    margin: 0 auto;
  }
  .p-sec02_ex_outline {
    background-image: url(/pr/images/sec02_txt-sp.svg);
    background-size: 404px 208px;
    width: 404px;
    min-height: 208px;
    padding: 30px 80px;
    box-sizing: border-box;
    grid-column-start: 2;
    margin: 48px 0 0 -60px;
    font-size: 1rem;
    line-height: 2.1;
    grid-row-start: 3;
    grid-column-start: 1;
  }
  .p-sec02_ex_txt {
    font-size: 1rem;
    text-align: center;
    margin: 0 auto 30px;
    line-height: 2.1;
    padding: 0;
  }
  .p-sec02_ex_ttl {
    font-size: 1.4rem;
    margin-bottom: 8px;
  }
  .p-sec02_ex-box {
    flex-direction: column;
  }
  .p-sec03_head {
    background-image: url(/pr/images/bg03_sp.webp);
    background-size: 368px 272px;
    background-position: 40px 0;
    background-repeat: no-repeat;
    margin-top: 67px;
    text-align: center;
  }
  .p-sec03_copy {
    padding: 312px 0 24px;
  }
  .p-sec03_copy img {
    width: 185px;
    height: 71px;
  }
  .p-sec03_txt {
    color: #000;
    font-size: 1.2rem;
    line-height: 2;
    padding-bottom: 27px;
  }
  .p-timeline {
    max-width: 375px;
  }
  .p-timeline_bg {
    top: -10px;
    left: 17px;
    background-image: url(/pr/images/timeline-bg-sp.webp);
    background-size: 103px 1732px;
    width: 103px;
    height: 1732px;
  }
  .p-timeline_box {
    box-sizing: border-box;
    grid-template-columns: 28.5% 71.5%;
  }
  .p-timeline_box01 {
    padding-top: 36px;
    margin: 0 0 15px;
  }
  .p-timeline_box02 {
    margin-bottom: 15px;
  }
  .p-timeline_box03 {
    margin-bottom: 30px;
  }
  .p-timeline_box04 {
    margin-bottom: 28px;
  }
  .p-timeline_date {
    grid-column-start: 2;
    grid-row-start: 1;
    border-radius: 30px;
    font-size: 1rem;
    width: 70px;
    height: 18px;
    margin: 0 0 8px;
  }
  .p-timeline_img_box {
    grid-column-start: 2;
    grid-row-start: 2;
    height: auto;
  }
  .p-timeline_img {
    width: 225px;
  }
  .p-timeline_movie01 {
    grid-column-start: 2;
    grid-row-start: 1;
    width: 225px;
    height: 126px;
    margin-top: -15px;
  }
  .p-timeline_ttl {
    grid-column-start: 2;
    grid-row-start: 3;
    font-size: 1.2rem;
    margin-top: 8px;
  }
  .p-timeline_pre {
    grid-column-start: 2;
    grid-row-start: 1;
    font-size: 1.4rem;
    width: 65px;
    height: 28px;
    margin: 0 0 8px;
  }
  .p-timeline_txt {
    grid-column-start: 2;
    grid-row-start: 4;
    font-size: 1.1rem;
  }
  .p-timeline_pre_ttl {
    grid-column-start: 2;
    grid-row-start: 2;
    font-size: 1.1rem;
    margin-bottom: 34px;
  }
  .p-timeline_pre_head {
    grid-column-start: 2;
    grid-row-start: 2;
    font-size: 1.2rem;
    margin: 8px 0 4px;
  }
  .p-timeline_pre_txt {
    grid-column-start: 2;
    grid-row-start: 3;
    font-size: 1.1rem;
    line-height: 1.66;
  }
  .p-sec04_head {
    background-image: url(/pr/images/bg04_sp.webp);
    background-size: 375px 291px;
    background-position: -20px 0;
    background-repeat: no-repeat;
    margin-top: -38px;
    text-align: center;
  }
  .p-sec04_copy {
    padding: 312px 0 24px;
  }
  .p-sec04_copy img {
    width: 231px;
    height: 71px;
  }
  .p-sec04_txt {
    color: #000;
    font-size: 1.2rem;
    line-height: 2;
    padding-bottom: 60px;
  }
  .p-sec04_txt {
    font-size: 1.2rem;
    padding: 0 20px;
    text-align: left;
  }
  .p-sec04_container {
    flex-direction: column;
    gap: 24px;
    margin: 0 auto 41px;
  }
  .p-sec04_box_img {
    width: 300px;
    height: 225px;
  }
  .p-sec04_ttl {
    font-size: 2rem;
  }
  .p-sec04_img {
    margin: 0 auto 45px;
  }
  .p-sec04_txt_img {
    width: 153px;
    height: 30px;
  }
  .p-sec04_btn {
    padding: 0 20px;
    margin: 16px auto 48px;
  }
  .p-sec05 {
    flex-direction: column;
    gap: 12px;
    align-items: center;
    padding: 32px 20px;
  }
}

@media only screen and (min-width: 1261px){
  .p-mv {
    background-position: 40vw 56px;
  }
  .p-sec02_head {
    background-position: 45% 0;
  }
  .p-sec03_head {
    background-position: 35vw 0;
  }
  .p-sec04_head {
    background-position: 15% 0;
  }
}

@media only screen and (min-width: 1400px){
  .p-sec04_head {
    background-position: 35% 0;
  }
}

@media only screen and (min-width: 1600px){
  .p-sec02_ex {
    max-width: 1260px;
    overflow: visible;
  }
}