@charset "utf-8";


/*
 * Styles
 */

/* reset */
#contents {
  padding: 0;
  padding-bottom: calc((180 / 1920 * 100%) + 100px);

}
/* tool */
.bgt {
  height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

/* base */
.contents {
  --base-color-1: rgb(0,160,31);
  --base-color-2: rgb(255,255,255);
  --ttl-color: rgb(0,148,66);
  --font-size: (0.7813vw + 7px);
  --min-font-size: 13px;
  --max-font-size: 1.1458vw;

  
  position: relative;
  width: 100% !important;
  background-color: var(--base-color-1) !important;
  color: var(--base-color-2);
  font-size: clamp(
    var(--min-font-size),
    calc(var(--font-size)),
    var(--max-font-size)
  );
  line-height: 1.94;
  overflow: hidden;
}

/* head_logo */
.head_logo {
  position: absolute;
  top: 0;
  left: 0;
  width: max(calc(264 / 1920 * 100%), 132px);
  margin-right: auto;
}
.head_logo > span {
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(90 / 264 * 100%);
  background-image: url(../images/logo.svg);
}

/* main visual */
.mv_container {
  width: clamp(768px, calc(1920 / 1280 * 100vh), 100%);
  /* min-height: 100vh; */
  margin: 0 auto;
}

.mv_outer {
  position: relative;
  width: 100%;
  margin-bottom: calc((53 / 1920 * 100%) + 55px);
  padding-top: calc(1280 / 1920 * 100%);
}
@media screen and (max-width:767px) {
  .mv_container {
    width: 100%;
    /* min-height: 0; */
  }
  .mv_outer {
    margin-top: calc(64 / 750 * 100%);
    margin-bottom: calc(32 / 750 * 100%);
  }
}
.mv_outer > .mv_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mv_box > div {
  position: absolute;
}
.mv_box .mv_bg {
  top: calc(205 / 1280 * 100%);
  left: 0;
  width: 100%;
  height: calc(917 / 1280 * 100%);
}
.mv_box .mv_bg::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 0);
  width: calc(333 / 1920 * 100%);
  height: calc(85 / 917 * 100%);
  background-color: var(--base-color-2);
  border-radius: 2.2135vw;
}
.mv_box .mv_bg > span {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(1805 / 1920 * 100%);
  height: 100%;
  background-color: var(--base-color-2);
  border-radius: 7.8125vw;
  overflow: hidden;
}
.mv_box .mv_bg > span > span {
  display: block;
  position: relative;
  width: 100%;
  padding-top: calc(917 / 1805 * 100%);
}
.mv_box .mv_bg > span > span::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 41.8%;
  transform: translate3d(-50%, -50%, 0);
  width: calc(2351 / 1805 * 100%);
  height: calc(1321 / 917 * 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/mv_bg01.svg);
}
.mv_box .mv_text_box span,
.mv_box .mv_entext_box span,
.mv_box .mv_title_box span {
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.mv_box .mv_text_box {
  top: calc(163 / 1280 * 100%);
  left: calc(174 / 1920 * 100%);
  width: calc(1280 / 1920 * 100%);
  height: calc(86 / 1280 * 100%);
}
.mv_box .mv_text_box > span {
  top: 0;
  height: 100%;
}
.mv_box .mv_text_box > .mv_txt101 {
  left: 0;
  width: calc(480 / 1280 * 100%);
  background-image: url(../images/mv_txt101.svg);
}
.mv_box .mv_text_box > .mv_txt102 {
  left: calc(480 / 1280 * 100%);
  width: calc(800 / 1280 * 100%);
  background-image: url(../images/mv_txt102.svg);
}
.mv_box .mv_title_box {
  top: calc((163 + 86) / 1280 * 100%);
  left: calc(174 / 1920 * 100%);
  width: calc(1340 / 1920 * 100%);
  height: calc(984 / 1280 * 100%);
}
.mv_box .mv_title_box > span {
  left: 0;
  width: 100%;
  height: calc(100% / 3);
}
.mv_box .mv_title_box > .mv_title_01 {
  top: 0;
}
.mv_box .mv_title_box > .mv_title_02 {
  top: calc(100% / 3);
}
.mv_box .mv_title_box > .mv_title_03 {
  top: calc(100% / 3 * 2);
}
.mv_box .mv_title_box > span > span {
  top: 0;
  height: 100%;
}
.mv_box .mv_title_box .mv_txt211 {
  left: 0;
  width: calc(276 / 1340 * 100%);
  background-image: url(../images/mv_txt211.svg);
}
.mv_box .mv_title_box .mv_txt212 {
  left: calc(276 / 1340 * 100%);
  width: calc(240 / 1340 * 100%);
  background-image: url(../images/mv_txt212.svg);
}
.mv_box .mv_title_box .mv_txt213 {
  left: calc((276 + 240) / 1340 * 100%);
  width: calc(240 / 1340 * 100%);
  background-image: url(../images/mv_txt213.svg);
}
.mv_box .mv_title_box .mv_txt214 {
  left: calc((276 + 240 + 240) / 1340 * 100%);
  width: calc(240 / 1340 * 100%);
  background-image: url(../images/mv_txt214.svg);
}
.mv_box .mv_title_box .mv_txt221 {
  left: 0;
  width: calc(240 / 1340 * 100%);
  background-image: url(../images/mv_txt221.svg);
}
.mv_box .mv_title_box .mv_txt222 {
  left: calc(240 / 1340 * 100%);
  width: calc(280 / 1340 * 100%);
  background-image: url(../images/mv_txt222.svg);
}
.mv_box .mv_title_box .mv_txt223 {
  left: calc((240 + 280) / 1340 * 100%);
  width: calc(320 / 1340 * 100%);
  background-image: url(../images/mv_txt223.svg);
}
.mv_box .mv_title_box .mv_txt224 {
  left: calc((240 + 280 + 320) / 1340 * 100%);
  width: calc(280 / 1340 * 100%);
  background-image: url(../images/mv_txt224.svg);
}
.mv_box .mv_title_box .mv_txt225 {
  left: calc((240 + 280 + 320 + 280) / 1340 * 100%);
  width: calc(220 / 1340 * 100%);
  background-image: url(../images/mv_txt225.svg);
}
.mv_box .mv_title_box .mv_txt231 {
  left: 0;
  width: calc(280 / 1340 * 100%);
  background-image: url(../images/mv_txt231.svg);
}
.mv_box .mv_title_box .mv_txt232 {
  left: calc(280 / 1340 * 100%);
  width: calc(310 / 1340 * 100%);
  background-image: url(../images/mv_txt232.svg);
}
.mv_box .mv_title_box .mv_txt233 {
  left: calc((280 + 310) / 1340 * 100%);
  width: calc(240 / 1340 * 100%);
  background-image: url(../images/mv_txt233.svg);
}
.mv_box .mv_title_box .mv_txt234 {
  left: calc((280 + 310 + 240) / 1340 * 100%);
  width: calc(220 / 1340 * 100%);
  background-image: url(../images/mv_txt234.svg);
}
.mv_box .mv_entext_box {
  top: calc(-14 / 1280 *100%);
  right: calc(-27 /1920 * 100%);
  width: calc(420 / 1920 * 100%);
  height: 100%;
}
.mv_box .mv_entext_box > span {
  top: 0;
  width: calc(100% / 3);
  height: 100%;
  background-position: center top;
}
.mv_box .mv_entext_box > .mv_entxt101 {
  right: 0;
  background-image: url(../images/mv_entxt101.svg);
}
.mv_box .mv_entext_box > .mv_entxt102 {
  right: calc(100% / 3);
  background-image: url(../images/mv_entxt102.svg);
}
.mv_box .mv_entext_box > .mv_entxt103 {
  right: calc(100% / 3 * 2);
  background-image: url(../images/mv_entxt103.svg);
}

/* lead */
.lead_txt {
  margin-bottom: calc((120 / 1920* 100%) + 40px);
}
.lead_txt > p {
  font-size: 125.72%;
  text-align: center;
  font-weight: 700;
  line-height: 2.85;
}
@media screen and (max-width:767px) {
  .lead_txt {
    padding: 0 16px;
  }
  .lead_txt > p {
    text-align: left;
    line-height: 2;
    font-size: 107.7%;
  }
}

/* ttl */
h2.ttl {
  width: calc(1594 / 1920 * 100%);
  margin: calc(315 / 1920 * 100%) auto calc(165 / 1920 * 100%);
}
h2.ttl101 {
  margin-top: 0;
}
h2.ttl > span {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: calc(100 / 1594 * 100%);
  background-position: left center;
  background-size: contain;
}
h2.ttl101 > span {
  background-image: url(../images/ttl101.svg);
}
h2.ttl201 > span {
  background-image: url(../images/ttl201.svg);
}
h2.ttl301 > span {
  background-image: url(../images/ttl301.svg);
}
h2.ttl > span::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(5 / 100 * 100%);
  left: 0;
  width: 100%;
  height: calc(89 /100 * 100%);
  background-color: rgb(255,255,0);
}

@media screen and (max-width:767px) {
  h2.ttl {
    width: calc(686 / 750 * 100%);
    margin-bottom: calc(64 / 750 * 100%);
  }
}


/* contents */
.contents_box {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  margin-top: calc(144 / 1920 * 100%);
  padding: 0 calc(164 / 1920 * 100%);
}
.contents_box.box_rr {
  flex-direction: row-reverse;
}
@media screen and (max-width:767px) {
  .contents_box {
    /* flex-wrap: wrap; */
    display: block;
    padding: 0 calc(32 / 750 * 100%);
    margin-top: 0;
  }
  .contents_box.box_rr {
    flex-direction: row;
  }
}

/* text_box */
.text_box_outer {
  display: flex;
  align-items: center;
  width: calc(832 / 1592 * 100%);
}
.text_box_outer .ttl {
  margin-bottom: calc(30 / 832 * 100%);
  font-size: 177.77%;
  line-height: 1.74;
  font-weight: 700;
}
.text_box_outer .note_txt {
  margin-top: 1em;
  font-size: 80%;
  text-indent: -3em;
  padding-left: 3em;
  line-height: 1.5;
}
@media screen and (max-width:767px) {
  .text_box_outer {
    width: 100%;
    margin-bottom: calc(64 / 750 * 100%);
  }
  .text_box_outer .ttl {
    font-size: 130%;
  }
}

/* pict_box */
.pict_box_outer {
  position: relative;
  
  width: calc(674 / 1592 * 100%);
}
@media screen and (max-width:767px) {
  .pict_box_outer {
    width: 100%;
    margin-bottom: calc(64 / 750 * 100%);
  }
}
.pict_box {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background-color: var(--base-color-2);
  border-radius: calc(82 / 674 * 100%);
}
.pict_box > .ttl {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: calc(150 / 600 * 100%);
  transform: translate3d(-50%, 0, 0);
}
.pict_box .pict_area {
  --pict_w: 600;
  --pict_h: 486;
  
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: calc(var(--pict_h) / var(--pict_w) * 100%);
  transform: translate3d(-50%, 0, 0);
}
.pict_box .pict_area > div,
.pict_box .pict_area > ul {
  position: absolute;
}
.pict_box .img {
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.pict_box .pict_area ._ab {
  display: block;
  position: absolute;
}
.pict_box .pict_area ._ab100 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pict_box .pict_area .pict_ch {
  width: calc(60 / var(--pict_w) * 100%);
  height: calc(120 / var(--pict_h) * 100%);
}

.pict_box .pict_area .logo {
  bottom: calc(15 / var(--pict_h) * 100%);
  right: calc(42 / var(--pict_w) * 100%);
  width: calc(86 / var(--pict_w) * 100%);
  height: calc(20 / var(--pict_h) * 100%);
  background-image: url(../images/logo_g.svg);
}

/* pict01 */
.pict01 .ttl111 {
  background-image: url(../images/ttl111.svg);
}
.pict01 .pict_area {
}
.pict01 .pict.txt01 {
  top: calc(391 / var(--pict_h) * 100%);
  left: calc(34 / var(--pict_w) * 100%);
  width: calc(300 / var(--pict_w) * 100%);
  height: calc(60 / var(--pict_h) * 100%);
  background-image: url(../images/pict01_txt01.svg);
}
.pict01 .pict.img01 {
  top: calc(91 / var(--pict_h) * 100%);
  left: calc(34 / var(--pict_w) * 100%);
  width: calc(300 / var(--pict_w) * 100%);
  height: calc(300 / var(--pict_h) * 100%);
  background-image: url(../images/pict01_img01.svg);
}
.pict01 .pict.img01::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 1) 100%
  );
}

.pict01 .pict.img01 > .txt {
  position: absolute;
  width: calc(120 / 300 * 100%);
  height: calc(120 / 300 * 100%);
}
.pict01 .pict.img01 > .txt01 {
  top: calc(81 / 300 * 100%);
  left: calc(151 / 300 * 100%);
}
.pict01 .pict.img01 > .txt02 {
  top: calc(163 / 300 * 100%);
  left: calc(71 / 300 * 100%);
}
.pict01 .pict.img01 > .txt03 {
  top: calc(104 / 300 * 100%);
  left: calc(12 / 300 * 100%);
}
.pict01 .pict.img01 > .txt04 {
  top: calc(21 / 300 * 100%);
  left: calc(-19 / 300 * 100%);
}
.pict01 .pict.img01 > .txt05 {
  top: calc(-15 / 300 * 100%);
  left: calc(-8 / 300 * 100%);
}
.pict01 .pict.img01 > .txt06 {
  top: calc(-39 / 300 * 100%);
  left: calc(34 / 300 * 100%);
}
.pict01 .pict.img01 > .txt > span {
}
.pict01 .pict.img01 > .txt01 > span {
  background-image: url(../images/pict01_img01_txt01.svg);
}
.pict01 .pict.img01 > .txt02 > span {
  background-image: url(../images/pict01_img01_txt02.svg);
}
.pict01 .pict.img01 > .txt03 > span {
  background-image: url(../images/pict01_img01_txt03.svg);
}
.pict01 .pict.img01 > .txt04 > span {
  background-image: url(../images/pict01_img01_txt04.svg);
}
.pict01 .pict.img01 > .txt05 > span {
  background-image: url(../images/pict01_img01_txt05.svg);
}
.pict01 .pict.img01 > .txt06 > span {
  background-image: url(../images/pict01_img01_txt06.svg);
}
.pict01 .pict.img02 {
  top: calc(46 / var(--pict_h) * 100%);
  left: calc(186 / var(--pict_w) * 100%);
  width: calc(150 / var(--pict_w) * 100%);
  height: calc(360 / var(--pict_h) * 100%);
}
.pict01 .pict.img02 > span {
  background-image: url(../images/pict01_img02.svg);
  background-size: cover;
  background-position: left center;
}
.pict01 .pict.txt02 {
  top: calc(406 / var(--pict_h) * 100%);
  left: calc(325 / var(--pict_w) * 100%);
  width: calc(200 / var(--pict_w) * 100%);
  height: calc(30 / var(--pict_h) * 100%);
  background-image: url(../images/pict01_txt02.svg);
}
.pict01 .pict.img03 {
  top: calc(46 / var(--pict_h) * 100%);
  left: calc(325 / var(--pict_w) * 100%);
  width: calc(200 / var(--pict_w) * 100%);
  height: calc(360 / var(--pict_h) * 100%);
  background-image: url(../images/pict01_img03.svg);
}
.pict01 .pict.img03 > li {
  display: block;
  position: absolute;
}
.pict01 .pict.img03 > .txt01 {
  top: calc(218 / 360 * 100%);
  left: calc(20 / 200 * 100%);
  width: calc(160 / 200 * 100%);
  height: calc(130 / 360 * 100%);
}
.pict01 .pict.img03 > .img04 {
  top: calc(38 / 360 * 100%);
  left: calc(20 / 200 * 100%);
  width: calc(160 / 200 * 100%);
  height: calc(310 / 360 * 100%);
}
.pict01 .pict.img03 > li > span {
  display: block;
}
.pict01 .pict.img03 > .txt01 > span {
  z-index: 100;
  background-image: url(../images/pict01_img04_txt01.svg);
}
.pict01 .pict.img03 > .img04 > span {
  z-index: 99;
  top: auto;
  bottom: 0;
  height: 100%;
  background-image: url(../images/pict01_img04.svg);
  background-size: cover;
  background-position: center bottom;
}
.pict01 .pict_ch.img101 {
  top: calc(36 / var(--pict_h) * 100%);
  left: calc(165 / var(--pict_w) * 100%);
}
.pict01 .pict_ch.img101 .img101 > span {
  background-image: url(../images/pict01_img101.svg);
}
.pict01 .pict_ch.img101 .img102 {
  top: calc(8 / 120 * 100%);
  left: 0;
  width: calc(60 / 60 * 100%);
  height: calc(60 / 120 * 100%);
}
.pict01 .pict_ch.img101 .img102 > span {
  background-image: url(../images/pict01_img102.svg);
}
.pict01 .pict_ch.img101 .img103 {
  top: 0;
  left: 0;
  width: calc(22 / 60 * 100%);
  height: calc(22 / 120 * 100%);
}
.pict01 .pict_ch.img101 .img103 > span {
  background-image: url(../images/pict01_img103.svg);
}
.pict01 .pict_ch.img111 {
  top: calc(322 / var(--pict_h) * 100%);
  left: calc(506 / var(--pict_w) * 100%);
  background-image: url(../images/pict01_img111.svg);
}



/* pict02 */
.pict02 .ttl121 {
  background-image: url(../images/ttl121.svg);
}
.pict02 .pict.txt01 {
  top: calc(78 / var(--pict_h) * 100%);
  left: calc(48 / var(--pict_w) * 100%);
  width: calc(200 / var(--pict_w) * 100%);
  height: calc(80 / var(--pict_h) * 100%);
  background-image: url(../images/pict02_txt01.svg);
}
.pict02 .pict.img01 {
  top: calc(158 / var(--pict_h) * 100%);
  left: calc(38 / var(--pict_w) * 100%);
  width: calc(210 / var(--pict_w) * 100%);
  height: calc(140 / var(--pict_h) * 100%);
  background-image: url(../images/pict02_img01.svg);
}
.pict02 .pict.img01 > .img02 {
  background-image: url(../images/pict02_img02.svg);
  background-size: cover;
}
.pict02 .pict.img_g1 {
  left: calc(273 / var(--pict_w) * 100%);
  width: calc(260 / var(--pict_w) * 100%);
  height: calc(60 / var(--pict_h) * 100%);
}
.pict02 .pict.img_g1 > span {
  top: auto;
  bottom: 0;
  height: 100%;
  background-size: cover;
  background-position: left bottom;
}
.pict02 .pict.img03 > span,
.pict02 .pict.img05 > span,
.pict02 .pict.img07 > span {
  background-image: url(../images/pict02_img03.svg);
}
.pict02 .pict.img04 > span,
.pict02 .pict.img06 > span,
.pict02 .pict.img08 > span {
  background-image: url(../images/pict02_img04.svg);
}
.pict02 .pict.img03 {
  top: calc(368 / var(--pict_h) * 100%);
  z-index: 100;
}
.pict02 .pict.img04 {
  top: calc(341 / var(--pict_h) * 100%);
  z-index: 99;
}
.pict02 .pict.img05 {
  top: calc(304.3563 / var(--pict_h) * 100%);
  z-index: 98;
}
.pict02 .pict.img06 {
  top: calc(263.5188 / var(--pict_h) * 100%);
  z-index: 97;
}
.pict02 .pict.img07 {
  top: calc(228.3381 / var(--pict_h) * 100%);
  z-index: 96;
}
.pict02 .pict.img08 {
  top: calc(195.3345 / var(--pict_h) * 100%);
  z-index: 95;
}
.pict02 .pict.img09 {
  top: calc(29 / var(--pict_h) * 100%);
  left: calc(279 / var(--pict_w) * 100%);
  width: calc(230 / var(--pict_w) * 100%);
  height: calc(160 / var(--pict_h) * 100%);
  background-image: url(../images/pict02_img09.svg);
}
.pict02 .pict.img09 > .txt02 {
  background-image: url(../images/pict02_txt02.svg);
}
.pict02 .pict_ch.img121 {
  top: calc(316 / var(--pict_h) * 100%);
  left: calc(162 / var(--pict_w) * 100%);
  width: calc(110 / var(--pict_w) * 100%);
  height: calc(130 / var(--pict_h) * 100%);
  background-image: url(../images/pict02_img121.svg);
}
.pict02 .pict_ch.img121 > div {
  width: calc(36 / 110 * 100%);
  height: calc(36 / 130 * 100%);
}
.pict02 .pict_ch.img121 .img122 {
  top: calc(1 / 130 * 100%);
  left: calc(26 / 110 * 100%);
}
.pict02 .pict_ch.img121 .img122 > span {
  background-image: url(../images/pict02_img122.svg);
}
.pict02 .pict_ch.img121 .img123 {
  top: calc(-11 / 130 * 100%);
  left: calc(24 / 110 * 100%);
}
.pict02 .pict_ch.img121 .img123 > span {
  background-image: url(../images/pict02_img123.svg);
}


/* pict03 */
.pict03 .ttl131 {
  background-image: url(../images/ttl131.svg);
}
.pict03 .pict.img01 {
  top: 0;
  left: calc(40 / var(--pict_w) * 100%);
  width: calc(360 / var(--pict_w) * 100%);
  height: calc(300 / var(--pict_h) * 100%);
  background-image: url(../images/pict03_img01.svg);
}
.pict03 .pict.img01 > .img02 {
  top: calc(-16 / 300 * 100%);
  left: calc(115 / 360 * 100%);
  width: calc(120 / 360 * 100%);
  height: calc(120 / 300 * 100%);
}
.pict03 .pict.img01 > .img02 > span {
  background-image: url(../images/pict03_img02.svg);
}
.pict03 .pict.img01 > .txt01 {
  top: calc(13 / 300 * 100%);
  left: calc(234 / 360 * 100%);
  width: calc(120 / 360 * 100%);
  height: calc(140 / 300 * 100%);
  background-image: url(../images/pict03_txt01.svg);
}
.pict03 .pict.img01 > .txt02 {
  top: calc(144 / 300 * 100%);
  left: calc(105 / 360 * 100%);
  width: calc(120 / 360 * 100%);
  height: calc(140 / 300 * 100%);
  background-image: url(../images/pict03_txt02.svg);
}
.pict03 .pict.img01 > .img03 {
  top: calc(196 / 300 * 100%);
  left: calc(244 / 360 * 100%);
  width: calc(120 / 360 * 100%);
  height: calc(50 / 300 * 100%);
}
.pict03 .pict.img01 > .img03 > span {
  background-image: url(../images/pict03_img03.svg);
}
.pict03 .pict.img04 {
  top: calc(217 / var(--pict_h) * 100%);
  left: calc(262 / var(--pict_w) * 100%);
  width: calc(300 / var(--pict_w) * 100%);
  height: calc(220 / var(--pict_h) * 100%);
  background-image: url(../images/pict03_img04.svg);
}
.pict03 .pict.img04 > .img05 {
  top: calc(21 / 220 * 100%);
  left: calc(118 / 300 * 100%);
  width: calc(160 / 300 * 100%);
  height: calc(160 / 220 * 100%);
  background-image: url(../images/pict03_img05.svg);
}
.pict03 .pict.img04 > .img05 > .img06 {
  top: auto;
  bottom: 0;
  height: 100%;
  background-image: url(../images/pict03_img06.svg);
  background-size: cover;
  background-position: left bottom;
}
.pict03 .pict.img04 > .img05 > .txt03 {
  background-image: url(../images/pict03_txt03.svg);
}
.pict03 .pict.img04 > .txt04 {
  top: calc(188 / 220 * 100%);
  left: calc(115 / 300 * 100%);
  width: calc(170 / 300 * 100%);
  height: calc(30 / 220 * 100%);
  background-image: url(../images/pict03_txt04.svg);
}
.pict03 .pict_ch.img131 {
  top: calc(312 / var(--pict_h) * 100%);
  left: calc(180 / var(--pict_w) * 100%);
  background-image: url(../images/pict03_img131.svg);
}
.pict03 .pict_ch.img141 {
  top: calc(302 / var(--pict_h) * 100%);
  left: calc(233 / var(--pict_w) * 100%);
  background-image: url(../images/pict03_img141.svg);
}
.pict03 .pict_ch.img151 {
  top: calc(107 / var(--pict_h) * 100%);
  left: calc(444 / var(--pict_w) * 100%);
  background-image: url(../images/pict03_img151.svg);
}



/* pict04 */
.pict04 .ttl211 {
  background-image: url(../images/ttl211.svg);
}
.pict04 .pict_area {
  opacity: 0;
}
.pict04 .pict.img01 {
  top: calc(38 / var(--pict_h) * 100%);
  left: calc(152 / var(--pict_w) * 100%);
  width: calc(240 / var(--pict_w) * 100%);
  height: calc(340 / var(--pict_h) * 100%);
  background-image: url(../images/pict04_img01.svg);
}
.pict04 .pict.img01 > div {
  opacity: 0;
}
.pict04 .pict.img01 > .img11 {
  top: calc(119 / 340 * 100%);
  left: calc(129 / 240 * 100%);
  width: calc(60 / 240 * 100%);
  height: calc(40 / 340 * 100%);
  background-image: url(../images/pict04_img11.svg);
}
.pict04 .pict.img01 > .img12 {
  top: calc(4 / 340 * 100%);
  left: calc(90 / 240 * 100%);
  width: calc(110 / 240 * 100%);
  height: calc(270 / 340 * 100%);
  background-image: url(../images/pict04_img12.svg);
}
.pict04 .pict.img01 > .img13 {
  top: calc(30 / 340 * 100%);
  left: calc(63 / 240 * 100%);
  width: calc(170 / 240 * 100%);
  height: calc(230 / 340 * 100%);
  background-image: url(../images/pict04_img13.svg);
}
.pict04 .pict.img02 {
  top: calc(201 / var(--pict_h) * 100%);
  left: calc(291 / var(--pict_w) * 100%);
  width: calc(200 / var(--pict_w) * 100%);
  height: calc(250 / var(--pict_h) * 100%);
  background-image: url(../images/pict04_img02.svg);
  transform: translate(2%, 8%);
}



/* pict05 */
.pict05 .ttl221 {
  background-image: url(../images/ttl221.svg);
}
.pict05 .pict.graph1 {
  top: calc(44 / var(--pict_h) * 100%);
  left: 0;
  width: calc(600 / var(--pict_w) * 100%);
  height: calc(360 / var(--pict_h) * 100%);
  background-image: url(../images/pict05_img01.svg);
}
.pict05 .pict.graph1 > .img02 {
  background-image: url(../images/pict05_img02.svg);
}
.pict05 .pict.graph1 > .txt {
  top: 0;
  width: 10%;
  height: 100%;
}
.pict05 .pict.graph1 > .txt01 {
  left: calc(10 / 600 * 100%);
  background-image: url(../images/pict05_txt01.svg);
}
.pict05 .pict.graph1 > .txt02 {
  left: calc(70 / 600 * 100%);
  background-image: url(../images/pict05_txt02.svg);
}
.pict05 .pict.graph1 > .txt03 {
  left: calc(480 / 600 * 100%);
  background-image: url(../images/pict05_txt03.svg);
}
.pict05 .pict.graph1 > .txt04 {
  left: calc(540 / 600 * 100%);
  background-image: url(../images/pict05_txt04.svg);
}
.pict05 .pict.graph1 > .txt2 {
  top: calc(360 / 360 * 100%);
  width: calc(150 / 600 * 100%);
  height: calc(40 / 360 * 100%);
}
.pict05 .pict.graph1 > .txt08 {
  left: calc(124 / 600 * 100%);
  background-image: url(../images/pict05_txt08.svg);
}
.pict05 .pict.graph1 > .txt09 {
  left: calc(343 / 600 * 100%);
  background-image: url(../images/pict05_txt09.svg);
}
.pict05 .pict.graph1 > .notes_txt {
  top: calc(-41 / 360 * 100%);
  left: calc(441 / 600 * 100%);
  width: calc(110 / 600 * 100%);
  height: calc(40 / 360 * 100%);
}
.pict05 .pict.graph1 > .notes_txt > .txt06 {
  background-image: url(../images/pict05_txt06.svg);
}
.pict05 .pict.graph1 > .notes_txt > .txt07 {
  background-image: url(../images/pict05_txt07.svg);
}
.pict05 .pict.graph1 > .img03 {
  top: calc(55 / 360 * 100%);
  left: calc(159 / 600 * 100%);
  width: calc(80 / 600 * 100%);
  height: calc(303 / 360 * 100%);
}
.pict05 .pict.graph1 > .img03 > .img03 {
  top: auto;
  bottom: 0;
  height: 0%;
  background-image: url(../images/pict05_img03.svg);
  background-size: cover;
}
.pict05 .pict.graph1 > .img03._for_img07 > .img03 {
  background-image: none;
}
.pict05 .pict.graph1 > .img03 > .img03 > .img07 {
  top: 0;
  left: calc(-59 / 80 * 100%);
  width: calc(130 / 80 * 100%);
  padding-top: calc(100 / 80 * 100%);
  height: auto;
  background-image: url(../images/pict05_img07.svg);
  transform: translate3d(0, -92%, 0);
}
.pict05 .pict.graph1 > .img04 {
  top: calc(184 / 360 * 100%);
  left: calc(375 / 600 * 100%);
  width: calc(80 / 600 * 100%);
  height: calc(174 / 360 * 100%);
}
.pict05 .pict.graph1 > .img04 > .img04 {
  top: auto;
  bottom: 0;
  height: 0%;
  background-image: url(../images/pict05_img04.svg);
  background-size: cover;
}
.pict05 .pict.graph1 > .img05 {
  top: 0;
  left: calc(195 / 600 * 100%);
  width: calc(230 / 600 * 100%);
  height: calc(360 / 360 * 100%);
}
.pict05 .pict.graph1 > .img05 > span {
  background-image: url(../images/pict05_img05.svg);
  background-size: cover;
  background-position: left top;
}
.pict05 .pict.graph1 > .img06 {
  top: 0;
  left: calc(327 / 600 * 100%);
  width: calc(170 / 600 * 100%);
  height: calc(150 / 360 * 100%);
  background-image: url(../images/pict05_img06.svg);
}
.pict05 .pict.graph1 > .img06 > .txt05 {
  background-image: url(../images/pict05_txt05.svg);
}
.pict05 .pict.graph1 > .img08 {
  top: calc(220 / 360 * 100%);
  left: calc(404 / 600 * 100%);
  width: calc(120 / 600 * 100%);
  height: calc(140 / 360 * 100%);
}
.pict05 .pict.graph1 > .img08 > span {
  background-image: url(../images/pict05_img08.svg);
}
.pict05 .pict_ch.img161 {
  top: calc(284 / var(--pict_h) * 100%);
  left: calc(92 / var(--pict_w) * 100%);
  width: calc(80 / var(--pict_w) * 100%);
  background-image: url(../images/pict05_img161.svg);
}
.pict05 .pict_ch.img171 {
  top: calc(178 / var(--pict_h) * 100%);
  left: calc(388 / var(--pict_w) * 100%);
  width: calc(70 / var(--pict_w) * 100%);
  height: calc(60 / var(--pict_h) * 100%);
  background-image: url(../images/pict05_img171.svg);
}



/* pict06 */
.pict06 .ttl231 {
  background-image: url(../images/ttl231.svg);
}
.pict06 .pict.img01 {
  top: calc(153 / var(--pict_h) * 100%);
  left: calc(97 / var(--pict_w) * 100%);
  width: calc(260 / var(--pict_w) * 100%);
  height: calc(300 / var(--pict_h) * 100%);
  background-image: url(../images/pict06_img01.svg);
}
.pict06 .pict.img02 {
  top: calc(101 / var(--pict_h) * 100%);
  left: calc(97 / var(--pict_w) * 100%);
  width: calc(260 / var(--pict_w) * 100%);
  height: calc(100 / var(--pict_h) * 100%);
  background-image: url(../images/pict06_img02.svg);
}
.pict06 .pict.img03 {
  top: calc(46 / var(--pict_h) * 100%);
  left: calc(92 / var(--pict_w) * 100%);
  width: calc(90 / var(--pict_w) * 100%);
  height: calc(90 / var(--pict_h) * 100%);
}
.pict06 .pict.img03 > div {
  opacity: 0;
}
.pict06 .pict.img03 > .img03 {
  background-image: url(../images/pict06_img03.svg);
}
.pict06 .pict.img03 > .img04 {
  background-image: url(../images/pict06_img04.svg);
}
.pict06 .pict.img03 > .img05 {
  background-image: url(../images/pict06_img05.svg);
}
.pict06 .pict.img06 {
  top: calc(39 / var(--pict_h) * 100%);
  left: calc(362 / var(--pict_w) * 100%);
  width: calc(200 / var(--pict_w) * 100%);
  height: calc(200 / var(--pict_h) * 100%);
  background-image: url(../images/pict06_img06.svg);
}
.pict06 .pict.img06 > .txt01 {
  background-image: url(../images/pict06_txt01.svg);
}


/* pict07 */
.pict07 .ttl311 {
  background-image: url(../images/ttl311.svg);
}
.pict07 .pict.graph2 {
  top: calc(24 / var(--pict_h) * 100%);
  left: calc(90 / var(--pict_w) * 100%);
  width: calc(440 / var(--pict_w) * 100%);
  height: calc(310 / var(--pict_h) * 100%);
}
.pict07 .pict.graph2 > .img01 {
  background-image: url(../images/pict07_img01.svg);
}
.pict07 .pict.graph2 > .img02 {
  background-image: url(../images/pict07_img02.svg);
}
.pict07 .pict.graph2 > .img03 {
  width: 100%;
  background-image: url(../images/pict07_img03.svg);
  background-size: cover;
}
.pict07 .pict.graph2 > .txt01 {
  top: 0;
  left: calc(-60 / 440 * 100%);
  width: calc(60 / 440 * 100%);
  height: calc(310 / 310 * 100%);
  background-image: url(../images/pict07_txt01.svg);
}
.pict07 .pict.graph2 > .graph_g {
}
.pict07 .pict.graph2 > .graph_g > li > .img {
  top: auto;
  bottom: 0;
  background-size: cover;
  background-position: left bottom;
}
.pict07 .pict.graph2 > .graph_g > .graph_2019 > .img {
  background-image: url(../images/pict07_g1_img1.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2020 > .img {
  background-image: url(../images/pict07_g1_img2.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2021 > .img {
  background-image: url(../images/pict07_g1_img3.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2022 > .img {
  background-image: url(../images/pict07_g1_img4.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2023 > .img {
  background-image: url(../images/pict07_g1_img5.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2024 > .img {
  background-image: url(../images/pict07_g1_img6.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2025 > .img {
  background-image: url(../images/pict07_g1_img7.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2026 > .img {
  background-image: url(../images/pict07_g1_img8.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2019 > .year {
  background-image: url(../images/pict07_g1_y2019.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2020 > .year {
  background-image: url(../images/pict07_g1_y2020.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2021 > .year {
  background-image: url(../images/pict07_g1_y2021.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2022 > .year {
  background-image: url(../images/pict07_g1_y2022.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2023 > .year {
  background-image: url(../images/pict07_g1_y2023.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2024 > .year {
  background-image: url(../images/pict07_g1_y2024.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2025 > .year {
  background-image: url(../images/pict07_g1_y2025.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2026 > .year {
  background-image: url(../images/pict07_g1_y2026.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2019 > .txt {
  background-image: url(../images/pict07_g1_txt1.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2020 > .txt {
  background-image: url(../images/pict07_g1_txt2.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2021 > .txt {
  background-image: url(../images/pict07_g1_txt3.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2022 > .txt {
  background-image: url(../images/pict07_g1_txt4.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2023 > .txt {
  background-image: url(../images/pict07_g1_txt5.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2024 > .txt {
  background-image: url(../images/pict07_g1_txt6.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2025 > .txt {
  background-image: url(../images/pict07_g1_txt7.svg);
}
.pict07 .pict.graph2 > .graph_g > .graph_2026 > .txt {
  top: calc(63 / 310 * 100%);
  left: calc(321 / 440 * 100%);
  width: calc(170 / 440 * 100%);
  height: calc(110 / 310 * 100%);
  background-image: url(../images/pict07_g1_txt8.svg);
}
.pict07 .pict_ch.img181 {
  top: calc(212 / var(--pict_h) * 100%);
  left: calc(30 / var(--pict_w) * 100%);
  width: calc(100 / var(--pict_w) * 100%);
  height: calc(210 / var(--pict_h) * 100%);
  background-image: url(../images/pict07_img181.svg);
}
.pict07 .pict_ch.img181 .img182 {
  top: calc(-30 / 210 * 100%);
  left: calc(-80 / 100 * 100%);
  width: calc(180 / 100 * 100%);
  height: calc(180 / 210 * 100%);
}
.pict07 .pict_ch.img181 .img182 > span {
  background-image: url(../images/pict07_img182.svg);
}
.pict07 .pict_ch.img191 {
  top: calc(333 / var(--pict_h) * 100%);
  left: calc(122 / var(--pict_w) * 100%);
  background-image: url(../images/pict07_img191.svg);
}
.pict07 .pict_ch.img201 {
  top: calc(311 / var(--pict_h) * 100%);
  left: calc(490 / var(--pict_w) * 100%);
  width: calc(70 / var(--pict_w) * 100%);
  background-image: url(../images/pict07_img201.svg);
}



/* pict08 */
.pict08 .ttl321 {
  background-image: url(../images/ttl321.svg);
}
.pict08 .pict.img01 {
  background-image: url(../images/pict08_img01.svg);
}
.pict08 .pict.img02 {
  top: calc(26 / var(--pict_h) * 100%);
  left: 0;
  width: 100%;
  height: calc(150 / var(--pict_h) * 100%);
}
.pict08 .pict.img02 > span {
  background-image: url(../images/pict08_img02.svg);
}
.pict08 .pict.img03 {
  top: calc(104 / var(--pict_h) * 100%);
  left: calc(242 / var(--pict_w) * 100%);
  width: calc(320 / var(--pict_w) * 100%);
  height: calc(320 / var(--pict_h) * 100%);
  background-image: url(../images/pict08_img03.svg);
}
.pict08 .pict.img03 .img04 {
  background-image: url(../images/pict08_img04.svg);
}
.pict08 .pict.img03 .img05 {
  background-image: url(../images/pict08_img05.svg);
}
.pict08 .pict.img03 .img06 {
  top: calc(160 / 320 * 100%);
  left: calc(72 / 320 * 100%);
  width: calc(120 / 320 * 100%);
  height: calc(80 / 320 * 100%);
}
.pict08 .pict.img03 .img06 > span {
  left: auto;
  right: 0;
  background-image: url(../images/pict08_img06.svg);
  background-size: cover;
  background-position: right top;
}
.pict08 .pict.txt01 {
  top: calc(294 / var(--pict_h) * 100%);
  left: calc(35 / var(--pict_w) * 100%);
  width: calc(210 / var(--pict_w) * 100%);
  height: calc(130 / var(--pict_h) * 100%);
  background-image: url(../images/pict08_txt01.svg);
}


/* pict09 */
.pict09 .ttl331 {
  background-image: url(../images/ttl331.svg);
}
.pict09 .pict.img01 {
  top: calc(22 / var(--pict_h) * 100%);
  left: calc(44 / var(--pict_w) * 100%);
  width: calc(510 / var(--pict_w) * 100%);
  height: calc(410 / var(--pict_h) * 100%);
}
.pict09 .pict.img01 > .img01 {
  background-image: url(../images/pict09_img01.svg);
}
.pict09 .pict.img01 > .img02 {
  background-image: url(../images/pict09_img02.svg);
}
.pict09 .pict.img01 > .img04 {
  background-image: url(../images/pict09_img04.svg);
}
.pict09 .pict.img01 > .img05 {
  background-image: url(../images/pict09_img05.svg);
}
.pict09 .pict.img01 > .txt02 {
  background-image: url(../images/pict09_txt02.svg);
}
.pict09 .pict.img01 > .txt04 {
  background-image: url(../images/pict09_txt04.svg);
}
.pict09 .pict.img01 > .txt01 {
  top: calc(165 / 410 * 100%);
  left: 0;
  width: calc(100 / 510 * 100%);
  height: calc(170 / 410 * 100%);
}
.pict09 .pict.img01 > .txt03 {
  top: 0;
  left: calc(135 / 510 * 100%);
  width: calc(170 / 510 * 100%);
  height: calc(334 / 410 * 100%);
}
.pict09 .pict.img01 > .txt01 > span,
.pict09 .pict.img01 > .txt03 > span {
  top: auto;
  bottom: 0;
  height: 100%;
  background-size: cover;
  background-position: left bottom;
}
.pict09 .pict.img01 > .txt01 > span {
  background-image: url(../images/pict09_txt01.svg);
}
.pict09 .pict.img01 > .txt03 > span {
  background-image: url(../images/pict09_txt03.svg);
}
.pict09 .pict.img01 > .img03 {
  top: calc(275 / 410 * 100%);
  left: calc(46 / 510 * 100%);
  width: calc(172 / 510 * 100%);
  height: calc(60 / 410 * 100%);
}
.pict09 .pict.img01 > .img06 {
  top: calc(218 / 410 * 100%);
  left: calc(212 / 510 * 100%);
  width: calc(296 / 510 * 100%);
  height: calc(116 / 410 * 100%);
}
.pict09 .pict.img01 > .img03 > span,
.pict09 .pict.img01 > .img06 > span {
  height: 100%;
  background-size: cover;
  background-position: left top;
  overflow: hidden;
}
.pict09 .pict.img01 > .img03 > span {
  background-image: url(../images/pict09_img03.svg);
}
.pict09 .pict.img01 > .img06 > span {
  background-image: url(../images/pict09_img06.svg);
}

.pict09 .pict.img01 > .img03 > span > span {
  opacity: 0;
  background-color: rgba(255,255,255,0.5);
}
.pict09 .pict.img01 > .img06 > span > span {
  opacity: 0;
  background-color: rgba(255,255,255,0.4);
  /*
  background: radial-gradient(
    circle at 56.6% 0%,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.2) 32%,
    rgba(255,255,255,0.2) 33%,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,0) 65%,
    rgba(255,255,255,0.2) 67%,
    rgba(255,255,255,0.2) 68%,
    rgba(255,255,255,0) 70%
  );*/
}








.movie_box_outer {
  margin-top: calc(80 / 1920 * 100%);
  padding-top: 1px;
}

.movie_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(1755 / 1920 * 100%);
  margin-top: calc(100 / 1920 * 100%);
  margin-right: 0;
  margin-bottom: calc(136 / 1920 * 100%);
  margin-left: auto;
}
.movie_box.movie_box2 {
  flex-direction: row-reverse;
  margin-right: auto;
  margin-left: 0;
}

.movie_box.movie05 {
  margin-bottom: 0;
}
.movie_box > .image {
  position: relative;
  width: calc(670 / 1755 * 100%);
  height: 0;
  padding-top: calc(557 / 1755 * 100%);
  border-radius: 3.125vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;

  
  background-image: url(../images/dummy_img01.png);
}
.movie_box > .image::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: calc(139 / 670 * 100%);
  height: calc(139 / 557 * 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/btn_movie.svg);
}

.movie01 > .image {
  background-image: url(../images/movie01_img01.jpg);
}
.movie02 > .image {
  background-image: url(../images/movie02_img01.jpg);
}
.movie03 > .image {
  background-image: url(../images/movie03_img01.jpg);
}
.movie04 > .image {
  background-image: url(../images/movie04_img01.jpg);
}
.movie05 > .image {
  background-image: url(../images/movie05_img01.jpg);
}



.movie_box > .text_box {
  width: calc(983 / 1755 * 100%);
  border-radius: 3.125vw 0 0 3.125vw;
  background-color: var(--base-color-2);
}
.movie_box.movie_box2 > .text_box {
  border-radius: 0 3.125vw 3.125vw 0;
}
.movie_box > .text_box > div {
  width: 100%;
  background-size: cover;
}
.movie_box > .text_box > .text {
  padding-top: calc(380 / 983 * 100%);
}
.movie_box > .text_box > .title {
  padding-top: calc(70 / 983 * 100%);
}
.movie_box > .text_box > .name {
  padding-top: calc(70 / 983 * 100%);
}

.movie01 > .text_box > .text {
  background-image: url(../images/movie01_txt01.svg);
}
.movie01 > .text_box > .title {
  background-image: url(../images/movie01_txt02.svg);
}
.movie01 > .text_box > .name {
  background-image: url(../images/movie01_txt03.svg);
}
.movie02 > .text_box > .text {
  background-image: url(../images/movie02_txt01.svg);
}
.movie02 > .text_box > .title {
  background-image: url(../images/movie02_txt02.svg);
}
.movie02 > .text_box > .name {
  background-image: url(../images/movie02_txt03.svg);
}
.movie03 > .text_box > .text {
  background-image: url(../images/movie03_txt01.svg);
}
.movie03 > .text_box > .title {
  background-image: url(../images/movie03_txt02.svg);
}
.movie03 > .text_box > .name {
  background-image: url(../images/movie03_txt03.svg);
}
.movie04 > .text_box > .text {
  background-image: url(../images/movie04_txt01.svg);
}
.movie04 > .text_box > .title {
  background-image: url(../images/movie04_txt02.svg);
}
.movie04 > .text_box > .name {
  background-image: url(../images/movie04_txt03.svg);
}
.movie05 > .text_box > .text {
  background-image: url(../images/movie05_txt01.svg);
}
.movie05 > .text_box > .title {
  background-image: url(../images/movie05_txt02.svg);
}
.movie05 > .text_box > .name {
  background-image: url(../images/movie05_txt03.svg);
}

/* for_sq_img */
.movie_box > .image {
  width: calc(557 / 1755 * 100%);
  cursor: pointer;
}
.movie_box > .image::after {
  width: calc(139 / 557 * 100%);
}
.movie_box > .text_box {
  width: calc((983 + 113) / 1755 * 100%);
}
.movie_box > .text_box > .text {
  padding-top: calc(380 / (983 + 113) * 100%);
  background-position: left top;
  background-size: contain;
}
.movie_box > .text_box > .title {
  padding-top: calc(70 / (983 + 113) * 100%);
  background-position: left top;
  background-size: contain;
}
.movie_box > .text_box > .name {
  padding-top: calc(70 / (983 + 113) * 100%);
  background-position: left top;
  background-size: contain;
}

@media screen and (max-width:767px) {
  .movie_box,
  .movie_box.movie_box2 {
    display: block;
    width: calc(686 / 750 * 100%);
    margin-top: calc(96 / 750 * 100%);
    margin-right: auto;
    margin-left: auto;
  }
  .movie_box > .image {
    width: 100%;
    padding-top: 100%;
    border-radius: 3.125vw 3.125vw 0 0;
  }
  .movie_box > .text_box {
    width: 100%;
    padding-bottom: calc(32 / 686 * 100%);
    border-radius: 0 0 3.125vw 3.125vw;
    overflow: hidden;
  }
  .movie_box.movie_box2 > .text_box {
    border-radius: 0 0 3.125vw 3.125vw;
  }
  .movie_box.movie_box2 > .text_box > .text,
  .movie_box.movie_box2 > .text_box > .title,
  .movie_box.movie_box2 > .text_box > .name {
    margin-left: -8.5%;
  }
}


/* movie_modal_box */
.movie_modal_box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  z-index: 4000;
}
.movie_modal_box > .movie_modal {
  position: absolute;
}
.movie_modal_box > .btn_close {
  position: absolute;
}
.movie_modal_box > .btn_close::before,
.movie_modal_box > .btn_close::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: -16%;
  width: 130%;
  height: 2px;
  background-color: rgb(255,255,255);
}
.movie_modal_box > .btn_close::before {
  transform: rotate(45deg);
}
.movie_modal_box > .btn_close::after {
  transform: rotate(-45deg);
}


/* recruit banner */
#motor_impact .banner_recruit {
  width: 50%;
  margin-top: calc(150 / 1920 * 100%);
  margin-right: auto;
  margin-left: auto;
}
#motor_impact .banner_recruit img {
  width: 100%;
  height: auto;
}
@media screen and (max-width:767px) {
  #motor_impact .banner_recruit {
    width: calc(690 / 750 * 100%);
    margin-top: calc(128 / 750 * 100%);
  }
}


/* sns_area */
.sns_area {
  position: fixed;
  display: flex;
  top: 140px;
  left: 20px;
  z-index: 900;
}
.sns_area dl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sns_area dl dt {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #fff;
  font-weight: 700;
}
.sns_area dl dd ul li {
  width: 30px;
  margin: 15px 0;
}
.sns_area dl dd ul li a {
  display: block;
  transform: scale(1);
  transition: 0.2s ease;
}
.sns_area dl dd ul li a:hover {
  transform: scale(1.3);
}

.sns_area img {
    line-height: 1;
    vertical-align: bottom;
    height: auto;
    width: 100%;
}
@media screen and (max-width:767px) {
  .sns_area {
    display: none;
  }
}




/*
 * animation
 */

/* mv animation */
._mva {
  opacity: 0;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-fill-mode:forwards;
}
._start ._mva {
  animation-play-state: running;
}
.mv_box .mv_title_box > span {
  animation-name: drop;
  animation-timing-function: cubic-bezier(0.72, 0, 0.97, 0.3);
  animation-duration: 0.5s;
}
.mv_box .mv_title_03 { animation-delay: 0.5s; }
.mv_box .mv_title_02 { animation-delay: 0.9s; }
.mv_box .mv_title_01 { animation-delay: 1.3s; }
.mv_box .mv_bg > span > span {
  animation-name: grow1;
  animation-timing-function: cubic-bezier(0.72, 0, 0.97, 0.3);
  animation-duration: 0.3s;
  animation-delay: 1.9s;
}
.mv_box .mv_text_box > span {
  animation-name: fade-in-top-to-bottom;
  animation-duration: 0.8s;
}
.mv_box .mv_txt101 { animation-delay: 2.6s; }
.mv_box .mv_txt102 { animation-delay: 2.8s; }
.mv_box .mv_entext_box > span {
  animation-name: fade-in-bottom-to-top-mv;
  animation-duration: 0.8s;
}
.mv_box .mv_entxt101 { animation-delay: 3.4s; }
.mv_box .mv_entxt102 { animation-delay: 3.6s; }
.mv_box .mv_entxt103 { animation-delay: 3.8s; }

.mv_box .mv_title_box > span > span {
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-fill-mode:forwards;
  animation-duration: 0.3s;
}
._start .mv_box .mv_title_box > span > span {
  animation-play-state: running;
}
.mv_box .mv_txt211 {
  animation-name: bound2;
  animation-delay: 1.8s;
}
.mv_box .mv_txt212 {
  animation-name: bound2;
  animation-delay: 1.85s;
}
.mv_box .mv_txt213 {
  animation-name: bound2;
  animation-delay: 1.87s;
}
.mv_box .mv_txt214 {
  animation-name: bound2;
  animation-delay: 1.8s;
}
.mv_box .mv_txt221 {
  animation-name: bound2;
  animation-delay: 1.45s;
}
.mv_box .mv_txt222 {
  animation-name: bound2;
  animation-delay: 1.47s;
}
.mv_box .mv_txt223 {
  animation-name: bound2;
  animation-delay: 1.45s;
}
.mv_box .mv_txt224 {
  animation-name: bound2;
  animation-delay: 1.4s;
}
.mv_box .mv_txt225 {
  animation-name: stumble2;
  animation-delay: 1.45s;
  animation-duration: 0.6s !important;
}
.mv_box .mv_txt231 {
  animation-name: bound2;
  animation-delay: 1.07s;
}
.mv_box .mv_txt232 {
  animation-name: bound2;
  animation-delay: 1.0s;
}
.mv_box .mv_txt233 {
  animation-name: bound2;
  animation-delay: 1.05s;
}
.mv_box .mv_txt234 {
  animation-name: stumble1;
  animation-delay: 1.1s;
  animation-duration: 0.6s !important;
}

/* ttl animation */
h2.ttl > span,
h2.ttl > span::after {
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-fill-mode:forwards;
  animation-duration: 0.8s;
}
h2.ttl > span {
  opacity: 0;
  animation-name: h2-ttl;
  animation-delay: 0s;
}
h2.ttl > span::after {
  animation-name: h2-ttl-a;
  animation-delay: 0.82s;
}
h2.ttl._start > span,
h2.ttl._start > span::after {
  animation-play-state: running;
}

/* scroll animation */
.movie_box,
.text_box_outer,
.pict_box_outer {
  opacity: 0;
  animation-name: scroll-fade-in;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-fill-mode:forwards;
  animation-duration: 0.8s;
}
.movie_box {
  animation-name: scroll-fade-in2;
}
.movie_box,
.text_box_outer,
.pict_box_outer {
  animation-delay: 0s;
}
._start.movie_box,
._start .text_box_outer,
._start .pict_box_outer {
  animation-play-state: running;
}

/* pict_box animation */
._afi {
  opacity: 0;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-fill-mode:forwards;
}
._start ._afi {
  animation-play-state: running;
}
.pict_box ._afi {
  animation-name: fade-in-top-to-bottom;
  animation-duration: 0.8s;
}


/* pict01 animation */
.pict01 .pict.txt01 {
  animation-name: fade-in;
  animation-delay: 1s;
}
.pict01 .pict.img01::after {
  animation-name: circle-graph;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-fill-mode:forwards;
  animation-duration: 1s;
  animation-delay: 2s;
}
._start .pict01 .pict.img01::after {
  animation-play-state: running;
}
.pict01 .pict.img01 > .txt {}
.pict01 .pict.img01 > .txt06 { animation-delay: 3.4s; }
.pict01 .pict.img01 > .txt05 { animation-delay: 3.5s; }
.pict01 .pict.img01 > .txt04 { animation-delay: 3.6s; }
.pict01 .pict.img01 > .txt03 { animation-delay: 3.7s; }
.pict01 .pict.img01 > .txt02 { animation-delay: 3.8s; }
.pict01 .pict.img01 > .txt01 {
  animation-name: fade-in-top-to-bottom-strong1;
  animation-duration: 1.28s;
  animation-delay: 3.9s;
}
.pict01 .pict_ch.img101 { animation-delay: 5.7s; }
.pict01 .pict.img02 > span {
  animation-name: grow-hl;
  animation-duration: 1s;
  animation-delay: 7.5s;
}
.pict01 .pict.txt02 {
  animation-name: fade-in;
  animation-delay: 8.4s;
}
.pict01 .pict.img03 {
  animation-name: fade-in;
  animation-delay: 8.8s;
}
.pict01 .pict.img03 > .txt01 > span {
  animation-name: strong1;
  animation-delay: 10.5s;
  animation-duration: 2s;
}
.pict01 .pict.img03 > .img04 > span {
  animation-name: grow-vt;
  animation-duration: 1s;
  animation-delay: 10.5s;
}
.pict01 .pict_ch.img111 {
  animation-name: fade-in;
  animation-delay: 8.8s;
}

/* pict02 animation */
.pict02 .pict.img01 { animation-delay: 1s; }
.pict02 .pict.img01 > .img02 {
  animation-name: grow-hl;
  animation-delay: 1.9s;
  animation-duration: 4s;
}
.pict02 .pict.txt01 {
  animation-name: fade-in;
  animation-delay: 2.7s;
  animation-duration: 0.2s;
}
.pict02 .pict.img_g1 > span {
  animation-name: grow-vt2;
  animation-duration: 0.5s;
}
.pict02 .pict.img03 > span { animation-delay: 4s; }
.pict02 .pict.img04 > span { animation-delay: 4.3s; }
.pict02 .pict.img05 > span { animation-delay: 4.6s; }
.pict02 .pict.img06 > span { animation-delay: 4.9s; }
.pict02 .pict.img07 > span { animation-delay: 5.2s; }
.pict02 .pict.img08 > span { animation-delay: 5.5s; }
.pict02 .pict.img09 { animation-delay: 6.0s; }
.pict02 .pict_ch.img121 {
  animation-name: fade-in-left-to-right;
  animation-delay: 5s; 
}


/* pict03 animation */
.pict03 .pict.img01 {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-delay: 2s;
}
.pict03 .pict.img01 > .txt01 { animation-delay: 7.75s; }
.pict03 .pict.img01 > .txt02 { animation-delay: 8.25s; }
.pict03 .pict.img01 > .txt01 { animation-delay: 7.75s; }
.pict03 .pict.img01 > .txt02 { animation-delay: 8.25s; }
.pict03 .pict.img04 {
  animation-name: grow1;
  animation-duration: 0.2s;
  animation-delay: 11.5s;
}
.pict03 .pict.img04 > .img05 {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-delay: 12.5s;
}
.pict03 .pict.img04 > .img05 > .img06 {
  animation-name: grow-vt;
  animation-duration: 1.5s;
  animation-delay: 13.7s;
}
.pict03 .pict.img04 > .img05 > .txt03 {
  animation-delay: 15.2s;
  animation-name: fade-in;
}
.pict03 .pict.img04 > .txt04 {
  animation-delay: 15.7s;
  animation-name: fade-in;
}
.pict03 .pict_ch.img131 { animation-delay: 10s; }
.pict03 .pict_ch.img141 { animation-delay: 10.5s; }
.pict03 .pict_ch.img151 { animation-delay: 13.5s; }


/* pict04 animation */
.pict04 .pict_area {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-delay: 2s;
}

/* pict05 animation */
.pict05 .pict.graph1 {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-delay: 1s;
}
.pict05 .pict.graph1 > .txt01 { animation-delay: 1.6s; }
.pict05 .pict.graph1 > .txt02 { animation-delay: 1.8s; }
.pict05 .pict.graph1 > .txt03 { animation-delay: 2.0s; }
.pict05 .pict.graph1 > .txt04 { animation-delay: 2.2s; }
.pict05 .pict.graph1 > .txt08 {
  animation-name: fade-in;
  animation-delay: 2.5s;
}
.pict05 .pict.graph1 > .txt09 {
  animation-name: fade-in;
  animation-delay: 2.7s;
}
.pict05 .pict.graph1 > .notes_txt > .txt06 {
  animation-name: fade-in;
  animation-delay: 2.9s;
}
.pict05 .pict.graph1 .img07 {
  animation-name: fade-in;
  animation-delay: 3.1s;
}
.pict05 .pict.graph1 > .img03 > .img03 {
  animation-name: grow-vt3;
  animation-delay: 3.1s;
  animation-duration: 2.2s;
}
.pict05 .pict.graph1 > .img08 {
  animation-name: fade-in;
  animation-delay: 5.5s;
}
.pict05 .pict.graph1 > .img04 > .img04 {
  animation-name: grow-vt;
  animation-delay: 5.7s;
  animation-duration: 1.0s;
}
.pict05 .pict_ch.img161 {
  animation-name: fade-in;
  animation-delay: 7.0s;
}
.pict05 .pict.graph1 > .notes_txt > .txt07 {
  animation-name: fade-in;
  animation-delay: 7.5s;
}
.pict05 .pict.graph1 > .img05 > span {
  animation-name: grow-hl;
  animation-delay: 7.7s;
  animation-duration: 1.5s;
}
.pict05 .pict_ch.img171 {
  animation-name: fade-in;
  animation-delay: 9.2s;
}
.pict05 .pict.graph1 > .img06 {
  animation-delay: 9.4s;
}


/* pict06 animation */
.pict06 .pict.img01 {
  animation-delay: 1.0s;
}
.pict06 .pict.img02 {
  animation-name: fade-in;
  animation-delay: 2.0s;
  animation-duration: 0.4s;
}
.pict06 .pict.img03 {
  animation-name: fade-in;
  animation-delay: 2.0s;
}
.pict06 .pict.img06 {
  animation-delay: 3.0s;
}

/* pict07 animation */
.pict07 .pict_ch.img201 {
  animation-delay: 1.0s;
}
.pict07 .pict.graph2 {
  animation-name: fade-in;
  animation-delay: 1.4s;
}
.pict07 .pict_ch.img181 {
  animation-delay: 1.6s;
}
.pict07 .pict_ch.img191 {
  animation-delay: 1.8s;
}
.pict07 .pict.graph2 > .graph_g > li {
  animation-name: fade-in;;
  animation-duration: 0.2s;
}
.pict07 .pict.graph2 > .graph_g > .graph_2019 { animation-delay: 2.2s; }
.pict07 .pict.graph2 > .graph_g > .graph_2020 { animation-delay: 2.4s; }
.pict07 .pict.graph2 > .graph_g > .graph_2021 { animation-delay: 2.6s; }
.pict07 .pict.graph2 > .graph_g > .graph_2022 { animation-delay: 2.8s; }
.pict07 .pict.graph2 > .graph_g > .graph_2023 { animation-delay: 3.0s; }
.pict07 .pict.graph2 > .graph_g > .graph_2024 { animation-delay: 3.2s; }
.pict07 .pict.graph2 > .graph_g > .graph_2025 { animation-delay: 3.4s; }
.pict07 .pict.graph2 > .graph_g > .graph_2026 { animation-delay: 3.6s; }

.pict07 .pict.graph2 > .graph_g > li > .img {
  animation-name: grow-vt;
  animation-duration: 4.0s;
}
.pict07 .pict.graph2 > .graph_g > .graph_2019 > .img { animation-delay: 2.2s; }
.pict07 .pict.graph2 > .graph_g > .graph_2020 > .img { animation-delay: 2.4s; }
.pict07 .pict.graph2 > .graph_g > .graph_2021 > .img { animation-delay: 2.6s; }
.pict07 .pict.graph2 > .graph_g > .graph_2022 > .img { animation-delay: 2.8s; }
.pict07 .pict.graph2 > .graph_g > .graph_2023 > .img { animation-delay: 3.0s; }
.pict07 .pict.graph2 > .graph_g > .graph_2024 > .img { animation-delay: 3.2s; }
.pict07 .pict.graph2 > .graph_g > .graph_2025 > .img { animation-delay: 3.4s; }
.pict07 .pict.graph2 > .graph_g > .graph_2026 > .img { animation-delay: 3.6s; }

.pict07 .pict.graph2 > .graph_g > li > span {
  animation-name: fade-in;
  animation-duration: 0.2s;
}
.pict07 .pict.graph2 > .graph_g > .graph_2019 > .txt { animation-delay: 3.4s; }
.pict07 .pict.graph2 > .graph_g > .graph_2020 > .txt { animation-delay: 3.6s; }
.pict07 .pict.graph2 > .graph_g > .graph_2021 > .txt { animation-delay: 3.8s; }
.pict07 .pict.graph2 > .graph_g > .graph_2022 > .txt { animation-delay: 4.0s; }
.pict07 .pict.graph2 > .graph_g > .graph_2023 > .txt { animation-delay: 4.2s; }
.pict07 .pict.graph2 > .graph_g > .graph_2024 > .txt { animation-delay: 4.4s; }
.pict07 .pict.graph2 > .graph_g > .graph_2025 > .txt { animation-delay: 4.6s; }
.pict07 .pict.graph2 > .graph_g > .graph_2026 > .txt {
  animation-name: grow1;
  animation-delay: 5.0s;
  animation-duration: 0.4s;
}
.pict07 .pict.graph2 > .img03 {
  animation-name: grow-hl;
  animation-delay: 3.2s;
  animation-duration: 3.0s;
}

/* pict08 animation */
.pict08 .pict.img01 {
  animation-name: fade-in;
  animation-delay: 1.0s;
}
.pict08 .pict.img02 {
  animation-delay: 1.4s;
}
.pict08 .pict.img03 {
  animation-name: grow1;
  animation-delay: 2.4s;
  animation-duration: 0.4s;
}
.pict08 .pict.img03 .img04 {
  animation-name: fade-in;
  animation-delay: 3.2s;
  animation-duration: 0.8s;
}
.pict08 .pict.img03 .img05 {
  animation-name: fade-in;
  animation-delay: 3.8s;
  animation-duration: 0.8s;
}
.pict08 .pict.img03 .img06 > span {
  animation-name: grow-hl;
  animation-delay: 4.6s;
  animation-duration: 1.2s;
}
.pict08 .pict.txt01 {
  animation-name: fade-in;
  animation-delay: 6.0s;
  animation-duration: 0.4s;
}

/* pict09 animation */
.pict09 .pict.img01 {
  animation-name: fade-in;
  animation-delay: 1.0s;
  animation-duration: 0.4s;
}
.pict09 .pict.img01 > .img02 {
  animation-name: fade-in;
  animation-delay: 1.6s;
  animation-duration: 0.2s;
}
.pict09 .pict.img01 > .txt01 > span {
  animation-name: grow-vt;
  animation-delay: 2.2s;
  animation-duration: 1.0s;
}
.pict09 .pict.img01 > .img03 > span {
  animation-name: grow-vt;
  animation-delay: 3.4s;
  animation-duration: 1.0s;
}
.pict09 .pict.img01 > .txt02 {
  animation-name: fade-in;
  animation-delay: 4.6s;
  animation-duration: 0.4s;
}
.pict09 .pict.img01 > .img04 {
  animation-name: fade-in;
  animation-delay: 5.6s;
  animation-duration: 0.4s;
}
.pict09 .pict.img01 > .img05 {
  animation-name: fade-in;
  animation-delay: 6.6s;
  animation-duration: 0.4s;
}
.pict09 .pict.img01 > .txt03 > span {
  animation-name: grow-vt;
  animation-delay: 7.0s;
  animation-duration: 2.0s;
}
.pict09 .pict.img01 > .img06 > span {
  animation-name: grow-vt;
  animation-delay: 9.0s;
  animation-duration: 1.6s;
}
.pict09 .pict.img01 > .txt04 {
  animation-name: fade-in;
  animation-delay: 10.6s;
  animation-duration: 0.4s;
}



/* ======= loop animation ======= */

.pict01 .pict_ch.img101 .img102 > span,
.pict01 .pict_ch.img101 .img103 > span {
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-delay: 6s;
  animation-duration: 8s;
}
.pict01 .pict_ch.img101 .img102 > span {
  animation-name: img102;
}
.pict01 .pict_ch.img101 .img103 > span {
  animation-name: img103;
}
._start .pict01 .pict_ch.img101 .img102 > span,
._start .pict01 .pict_ch.img101 .img103 > span {
  animation-play-state: running;
}

.pict02 .pict_ch.img121 .img122 > span,
.pict02 .pict_ch.img121 .img123 > span {
  opacity: 0;
  transform: rotate(30deg);
  animation-name: img121;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-duration: 2s;
}
.pict02 .pict_ch.img121 .img122 > span {
  animation-delay: 5.8s;
}
.pict02 .pict_ch.img121 .img123 > span {
  animation-delay: 6.1s;
}
._start .pict02 .pict_ch.img121 .img122 > span,
._start .pict02 .pict_ch.img121 .img123 > span {
  animation-play-state: running;
}

.pict03 .pict.img01 > .img02 > span,
.pict03 .pict.img01 > .img03 > span {
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-duration: 6s;
}
.pict03 .pict.img01 > .img02 > span {
  animation-name: img312;
  animation-delay: 3s;
}
.pict03 .pict.img01 > .img03 > span {
  animation-name: img313;
  animation-delay: 9s;
}
._start .pict03 .pict.img01 > .img02 > span,
._start .pict03 .pict.img01 > .img03 > span {
  animation-play-state: running;
}

.pict04 .pict.img01 > div,
.pict04 .pict.img02 {
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-duration: 6s;
}
.pict04 .pict.img01 > div {
  animation-delay: 3.1s;
}
.pict04 .pict.img01 > .img11 {
  animation-name: img411;
}
.pict04 .pict.img01 > .img12 {
  animation-name: img412;
}
.pict04 .pict.img01 > .img13 {
  animation-name: img413;
}
.pict04 .pict.img02 {
  animation-name: img402;
  animation-delay: 2.5s;
}
._start .pict04 .pict.img01 > div,
._start .pict04 .pict.img02 {
  animation-play-state: running;
}

.pict05 .pict.graph1 > .img08 span {
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-duration: 6s;
}
.pict05 .pict.graph1 > .img08 span {
  animation-name: img518;
  animation-delay: 10.0s;
}
._start .pict05 .pict.graph1 > .img08 span {
  animation-play-state: running;
}

.pict06 .pict.img03 > div {
  animation-name: img603;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-duration: 6s;
}
.pict06 .pict.img03 > .img03 {
  animation-delay: 2.0s;
}
.pict06 .pict.img03 > .img04 {
  animation-delay: 2.2s;
}
.pict06 .pict.img03 > .img05 {
  animation-delay: 2.4s;
}
._start .pict06 .pict.img03 > div {
  animation-play-state: running;
}

.pict07 .pict_ch.img181 .img182 > span {
  animation-name: img718;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-duration: 10s;
  animation-delay: 6.0s;
}
._start .pict07 .pict_ch.img181 .img182 > span {
  animation-play-state: running;
}

.pict08 .pict.img02 > span {
  animation-name: img802;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-duration: 10s;
  animation-delay: 6.8s;
}
._start .pict08 .pict.img02 > span {
  animation-play-state: running;
}

.pict09 .pict.img01 > .img03 > span > span,
.pict09 .pict.img01 > .img06 > span > span {
  animation-name: img913;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-duration: 6s;
}
.pict09 .pict.img01 > .img03 > span > span {
  animation-delay: 9s;
}
.pict09 .pict.img01 > .img06 > span > span {
  animation-delay: 12s;
}
._start .pict09 .pict.img01 > .img03 > span > span,
._start .pict09 .pict.img01 > .img06 > span > span {
  animation-play-state: running;
}





/*
 * animation keyframes
 */
@keyframes drop {
  0%   { margin-top: -50%; opacity: 0; }
  100% { margin-top: 0; opacity: 1; }
}
@keyframes bound1 {
  0%   { margin-top: 0; }
  50%   { margin-top: -1%; }
  100% { margin-top: 0; }
}
@keyframes bound2 {
  0%   { margin-top: 0; }
  50%   { margin-top: -2%; }
  100% { margin-top: 0; }
}
@keyframes bound3 {
  0%   { margin-top: 0; }
  50%   { margin-top: -3%; }
  100% { margin-top: 0; }
}
@keyframes stumble1 {
  0%   { transform: rotate(0deg) translate(0,0);}
  15%   { transform: rotate(9deg) translate(9%,0);}
  85%   { transform: rotate(-2deg) translate(-2%,0);}
  100%   { transform: rotate(0deg) translate(0,0);}
}
@keyframes stumble2 {
  0%   { transform: rotate(0deg) translate(0,0);}
  15%   { transform: rotate(-9deg) translate(-9%,0);}
  85%   { transform: rotate(2deg) translate(2%,0);}
  100%   { transform: rotate(0deg) translate(0,0);}
}
@keyframes h2-ttl {
  0% { opacity: 0; width: 0; }
  1% { opacity: 1; width: 0; }
  100% { opacity: 1; width: 100%; }
}
@keyframes h2-ttl-a {
  0% { width: 100%; }
  100% { width: 0; }
}
@keyframes scroll-fade-in {
  0% { opacity: 0; margin-top: 0; }
  1% { opacity: 0; margin-top: 10%; }
  100% { opacity: 1; margin-top: 0; }
}
@keyframes scroll-fade-in2 {
  0% { opacity: 0; margin-top: 0; }
  1% { opacity: 0; margin-top: calc((100 / 1920 * 100%) + 15%); }
  100% { opacity: 1; margin-top: calc(100 / 1920 * 100%); }
}
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade-in-left-to-right {
  0% { opacity: 0; transform: translate(-10%,0); }
  100% { opacity: 1; transform: translate(0,0); }
}
@keyframes fade-in-top-to-bottom {
  0% { opacity: 0; margin-top: -10%; }
  100% { opacity: 1; margin-top: 0; }
}
@keyframes fade-in-top-to-bottom2 {
  0% { opacity: 0; transform: translate(0,-20%); }
  100% { opacity: 1; transform: translate(0,0); }
}
@keyframes fade-in-bottom-to-top-mv {
  0% { opacity: 0; margin-top: 15%; }
  100% { opacity: 1; margin-top: 0; }
}
@keyframes fade-in-top-to-bottom-strong1 {
  0%     { opacity: 0; margin-top: -10%; transform: scale(0.7) translate(0%, 0%); }
  62.5%  { opacity: 1; margin-top: 0; transform: scale(0.7) translate(0%, 0%); }
  100%   { opacity: 1; margin-top: 0; transform: scale(1) translate(0%, 0%); }
}
@keyframes fade-in-top-to-bottom-strong2 {
  0%     { opacity: 0; margin-top: -5%; transform: scale(0.8) translate(5%, 0%); }
  62.5%  { opacity: 1; margin-top: 0; transform: scale(0.8) translate(5%, 0%); }
  100%   { opacity: 1; margin-top: 0; transform: scale(1) translate(0%, 0%); }
}
@keyframes grow1 {
  0%   { transform: scale(0.01); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes grow-f {
  0%   { width: 0%; height: 0%; opacity: 1; }
  100% { width: 100%; height: 100%; opacity: 1; }
}
@keyframes grow-hl {
  0%   { width: 0%; opacity: 1; }
  100% { width: 100%; opacity: 1; }
}
@keyframes grow-vt {
  0%   { height: 0%; opacity: 1; }
  100% { height: 100%; opacity: 1; }
}
@keyframes grow-vt2 {
  0%   { height: 0%; opacity: 1; }
  60%   { height: 80%; opacity: 1; }
  100% { height: 100%; opacity: 1; }
}
@keyframes grow-vt3 {
  0%   { height: 0%; opacity: 1; }
  10%  { height: 0%; opacity: 1; }
  100% { height: 100%; opacity: 1; }
}
@keyframes strong1 {
  0%   { transform: scale(0.8); opacity: 0; }
  45%   { transform: scale(0.8); opacity: 0; }
  55%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes img102 {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-30deg); }
  50%  { transform: rotate(-30deg); }
  70%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes img103 {
  0% { opacity: 0;}
  19% {opacity: 0;}
  20% {opacity: 1;}
  22% {opacity: 0;}
  24% {opacity: 1;}
  58% {opacity: 1;}
  59% {opacity: 0;}
  100% {opacity: 0;}
}
@keyframes img121 {
  0%   { transform: rotate(30deg); opacity: 0; }
  33%  { opacity: 1; }
  50%  { opacity: 1; }
  67%  { opacity: 1; }
  100% { transform: rotate(-30deg); opacity: 0; }
}
@keyframes img312 {
  0%   { transform: rotate(0deg); }
  12.5%  { transform: rotate(-30deg); }
  25%  { transform: rotate(-30deg); }
  37.5%  { transform: rotate(0deg); }
  50%  { transform: rotate(30deg); }
  62.5%  { transform: rotate(30deg); }
  75%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes img313 {
  0%   { transform: translate3d(0,0,0); }
  12.5%  { transform: translate3d(-10%,8.5%,0); }
  25%  { transform: translate3d(-10%,8.5%,0); }
  37.5%  { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(10%,-8.5%,0); }
  62.5%  { transform: translate3d(10%,-8.5%,0); }
  75%  { transform: translate3d(0,0,0); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes img402 {
  0%    { transform: translate(2%, 8%); }
  16%   { transform: translate(0%, 0%); }
  34%   { transform: translate(0%, 0%); }
  50%   { transform: translate(2%, 8%); }
  100%  { transform: translate(2%, 8%); }
}
@keyframes img411 {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  7%   { opacity: 1; }
  10%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes img412 {
  0%   { opacity: 0; transform: translate( 2%, 0%); }
  1%   { transform: translate( -2%, 0%); }
  2%   { transform: translate( 2%, 0%); }
  3%   { opacity: 1; transform: translate( -2%, 0%); }
  4%   { transform: translate( 2%, 0%); }
  5%   { transform: translate( -2%, 0%); }
  6%   { transform: translate( 2%, 0%); }
  7%   { transform: translate( -2%, 0%); }
  8%   { transform: translate( 2%, 0%); }
  9%   { opacity: 1; transform: translate( -2%, 0%); }
  10%  { transform: translate( 2%, 0%); }
  11%   { transform: translate( -2%, 0%); }
  12%  { opacity: 0; transform: translate( 2%, 0%); }
  15%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes img413 {
  0%   { opacity: 0; transform: translate(0%, 1%); }
  1%   { transform: translate(0%, -1%); }
  2%   { transform: translate(0%, 1%); }
  3%   { opacity: 1; transform: translate(0%, -1%); }
  4%   { transform: translate(0%, 1%); }
  5%   { transform: translate(0%, -1%); }
  6%   { transform: translate(0%, 1%); }
  7%   { transform: translate(0%, -1%); }
  8%   { transform: translate(0%, 1%); }
  9%   { opacity: 1; transform: translate(0%, -1%); }
  10%  { transform: translate(0%, 1%); }
  11%  { transform: translate(0%, -1%); }
  12%  { opacity: 0; transform: translate(0%, 1%); }
  15%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes img518 {
  0%   { transform: translate3d(0,0,0); }
  40%  { transform: translate3d(-20%,0,0); }
  50%  { transform: translate3d(-20%,0,0); }
  90% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes img603 {
  0%   { opacity: 0; }
  60%  { opacity: 0; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes img718 {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-15deg); }
  50%  { transform: rotate(-15deg); }
  70%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
@keyframes img802 {
  0%    { transform: translate(0%, 0%); }
  30%   { transform: translate(-6%, -12%); }
  50%   { transform: translate(-6%, -12%); }
  80%   { transform: translate(0%, 0%); }
  100%  { transform: translate(0%, 0%); }
}
@keyframes img913 {
  0%   { opacity: 0; }
  60%  { opacity: 0; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}




@keyframes circle-graph {
  0% {background: conic-gradient(transparent 0%,#fff 0%,#fff 100%);}
  1% {background: conic-gradient(transparent 1%,#fff 1%,#fff 100%);}
  2% {background: conic-gradient(transparent 2%,#fff 2%,#fff 100%);}
  3% {background: conic-gradient(transparent 3%,#fff 3%,#fff 100%);}
  4% {background: conic-gradient(transparent 4%,#fff 4%,#fff 100%);}
  5% {background: conic-gradient(transparent 5%,#fff 5%,#fff 100%);}
  6% {background: conic-gradient(transparent 6%,#fff 6%,#fff 100%);}
  7% {background: conic-gradient(transparent 7%,#fff 7%,#fff 100%);}
  8% {background: conic-gradient(transparent 8%,#fff 8%,#fff 100%);}
  9% {background: conic-gradient(transparent 9%,#fff 9%,#fff 100%);}
  10% {background: conic-gradient(transparent 10%,#fff 10%,#fff 100%);}
  11% {background: conic-gradient(transparent 11%,#fff 11%,#fff 100%);}
  12% {background: conic-gradient(transparent 12%,#fff 12%,#fff 100%);}
  13% {background: conic-gradient(transparent 13%,#fff 13%,#fff 100%);}
  14% {background: conic-gradient(transparent 14%,#fff 14%,#fff 100%);}
  15% {background: conic-gradient(transparent 15%,#fff 15%,#fff 100%);}
  16% {background: conic-gradient(transparent 16%,#fff 16%,#fff 100%);}
  17% {background: conic-gradient(transparent 17%,#fff 17%,#fff 100%);}
  18% {background: conic-gradient(transparent 18%,#fff 18%,#fff 100%);}
  19% {background: conic-gradient(transparent 19%,#fff 19%,#fff 100%);}
  20% {background: conic-gradient(transparent 20%,#fff 20%,#fff 100%);}
  21% {background: conic-gradient(transparent 21%,#fff 21%,#fff 100%);}
  22% {background: conic-gradient(transparent 22%,#fff 22%,#fff 100%);}
  23% {background: conic-gradient(transparent 23%,#fff 23%,#fff 100%);}
  24% {background: conic-gradient(transparent 24%,#fff 24%,#fff 100%);}
  25% {background: conic-gradient(transparent 25%,#fff 25%,#fff 100%);}
  26% {background: conic-gradient(transparent 26%,#fff 26%,#fff 100%);}
  27% {background: conic-gradient(transparent 27%,#fff 27%,#fff 100%);}
  28% {background: conic-gradient(transparent 28%,#fff 28%,#fff 100%);}
  29% {background: conic-gradient(transparent 29%,#fff 29%,#fff 100%);}
  30% {background: conic-gradient(transparent 30%,#fff 30%,#fff 100%);}
  31% {background: conic-gradient(transparent 31%,#fff 31%,#fff 100%);}
  32% {background: conic-gradient(transparent 32%,#fff 32%,#fff 100%);}
  33% {background: conic-gradient(transparent 33%,#fff 33%,#fff 100%);}
  34% {background: conic-gradient(transparent 34%,#fff 34%,#fff 100%);}
  35% {background: conic-gradient(transparent 35%,#fff 35%,#fff 100%);}
  36% {background: conic-gradient(transparent 36%,#fff 36%,#fff 100%);}
  37% {background: conic-gradient(transparent 37%,#fff 37%,#fff 100%);}
  38% {background: conic-gradient(transparent 38%,#fff 38%,#fff 100%);}
  39% {background: conic-gradient(transparent 39%,#fff 39%,#fff 100%);}
  40% {background: conic-gradient(transparent 40%,#fff 40%,#fff 100%);}
  41% {background: conic-gradient(transparent 41%,#fff 41%,#fff 100%);}
  42% {background: conic-gradient(transparent 42%,#fff 42%,#fff 100%);}
  43% {background: conic-gradient(transparent 43%,#fff 43%,#fff 100%);}
  44% {background: conic-gradient(transparent 44%,#fff 44%,#fff 100%);}
  45% {background: conic-gradient(transparent 45%,#fff 45%,#fff 100%);}
  46% {background: conic-gradient(transparent 46%,#fff 46%,#fff 100%);}
  47% {background: conic-gradient(transparent 47%,#fff 47%,#fff 100%);}
  48% {background: conic-gradient(transparent 48%,#fff 48%,#fff 100%);}
  49% {background: conic-gradient(transparent 49%,#fff 49%,#fff 100%);}
  50% {background: conic-gradient(transparent 50%,#fff 50%,#fff 100%);}
  51% {background: conic-gradient(transparent 51%,#fff 51%,#fff 100%);}
  52% {background: conic-gradient(transparent 52%,#fff 52%,#fff 100%);}
  53% {background: conic-gradient(transparent 53%,#fff 53%,#fff 100%);}
  54% {background: conic-gradient(transparent 54%,#fff 54%,#fff 100%);}
  55% {background: conic-gradient(transparent 55%,#fff 55%,#fff 100%);}
  56% {background: conic-gradient(transparent 56%,#fff 56%,#fff 100%);}
  57% {background: conic-gradient(transparent 57%,#fff 57%,#fff 100%);}
  58% {background: conic-gradient(transparent 58%,#fff 58%,#fff 100%);}
  59% {background: conic-gradient(transparent 59%,#fff 59%,#fff 100%);}
  60% {background: conic-gradient(transparent 60%,#fff 60%,#fff 100%);}
  61% {background: conic-gradient(transparent 61%,#fff 61%,#fff 100%);}
  62% {background: conic-gradient(transparent 62%,#fff 62%,#fff 100%);}
  63% {background: conic-gradient(transparent 63%,#fff 63%,#fff 100%);}
  64% {background: conic-gradient(transparent 64%,#fff 64%,#fff 100%);}
  65% {background: conic-gradient(transparent 65%,#fff 65%,#fff 100%);}
  66% {background: conic-gradient(transparent 66%,#fff 66%,#fff 100%);}
  67% {background: conic-gradient(transparent 67%,#fff 67%,#fff 100%);}
  68% {background: conic-gradient(transparent 68%,#fff 68%,#fff 100%);}
  69% {background: conic-gradient(transparent 69%,#fff 69%,#fff 100%);}
  70% {background: conic-gradient(transparent 70%,#fff 70%,#fff 100%);}
  71% {background: conic-gradient(transparent 71%,#fff 71%,#fff 100%);}
  72% {background: conic-gradient(transparent 72%,#fff 72%,#fff 100%);}
  73% {background: conic-gradient(transparent 73%,#fff 73%,#fff 100%);}
  74% {background: conic-gradient(transparent 74%,#fff 74%,#fff 100%);}
  75% {background: conic-gradient(transparent 75%,#fff 75%,#fff 100%);}
  76% {background: conic-gradient(transparent 76%,#fff 76%,#fff 100%);}
  77% {background: conic-gradient(transparent 77%,#fff 77%,#fff 100%);}
  78% {background: conic-gradient(transparent 78%,#fff 78%,#fff 100%);}
  79% {background: conic-gradient(transparent 79%,#fff 79%,#fff 100%);}
  80% {background: conic-gradient(transparent 80%,#fff 80%,#fff 100%);}
  81% {background: conic-gradient(transparent 81%,#fff 81%,#fff 100%);}
  82% {background: conic-gradient(transparent 82%,#fff 82%,#fff 100%);}
  83% {background: conic-gradient(transparent 83%,#fff 83%,#fff 100%);}
  84% {background: conic-gradient(transparent 84%,#fff 84%,#fff 100%);}
  85% {background: conic-gradient(transparent 85%,#fff 85%,#fff 100%);}
  86% {background: conic-gradient(transparent 86%,#fff 86%,#fff 100%);}
  87% {background: conic-gradient(transparent 87%,#fff 87%,#fff 100%);}
  88% {background: conic-gradient(transparent 88%,#fff 88%,#fff 100%);}
  89% {background: conic-gradient(transparent 89%,#fff 89%,#fff 100%);}
  90% {background: conic-gradient(transparent 90%,#fff 90%,#fff 100%);}
  91% {background: conic-gradient(transparent 91%,#fff 91%,#fff 100%);}
  92% {background: conic-gradient(transparent 92%,#fff 92%,#fff 100%);}
  93% {background: conic-gradient(transparent 93%,#fff 93%,#fff 100%);}
  94% {background: conic-gradient(transparent 94%,#fff 94%,#fff 100%);}
  95% {background: conic-gradient(transparent 95%,#fff 95%,#fff 100%);}
  96% {background: conic-gradient(transparent 96%,#fff 96%,#fff 100%);}
  97% {background: conic-gradient(transparent 97%,#fff 97%,#fff 100%);}
  98% {background: conic-gradient(transparent 98%,#fff 98%,#fff 100%);}
  99% {background: conic-gradient(transparent 99%,#fff 99%,#fff 100%); opacity: 1;}
  100% {background: conic-gradient(transparent 100%,#fff 100%,#fff 100%); opacity: 0;}
}















.test_item1 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50%;
  height: 50%;
}
.test_item1::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,1) 100%
  );
  animation-name: circle-graph;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-fill-mode:forwards;
  animation-duration: 2s;
  animation-delay:2s;
}
._start .test_item1::after {
  animation-play-state: running;
}
.test_item1 > span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgb(0,94,37);
  background: conic-gradient(
    rgb(0,94,37) 42%,
    rgb(0,127,56) 42%,rgb(0,127,56) 66%,
    rgb(0,152,68) 66%,rgb(0,152,68) 85%,
    rgb(57,173,54) 85%,rgb(57,173,54) 91%,
    rgb(113,185,43) 91%,rgb(113,185,43) 94%,
    rgb(180,208,0) 94%,rgb(180,208,0) 100%
  );
}