@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
/* 画面外にいる状態 */
.effect {
	opacity : 0;
	transition : all 700ms 300ms;
}
/* 画面内に入った状態 */
.effect_on {
  opacity: 1.0;
	-webkit-transform: translate(0,0);
	transform: translate(0,0); 
}

#contents-wrapper {
	width: 100%!important;
  min-width: 1400px;
  margin-top: 0px;
  padding-top: 125px;
  padding-bottom: 0px;
  background-color: #fff;
  font-family: 'Roboto', sans-serif;
  overflow:hidden;
}
#special-header-wrapper {
  display: none;
}
#footer-wrapper {
  position: relative;
  z-index: 4;
}
#special-column {
  width: 100%;
  float: none;
  margin: 0 auto;
  overflow:hidden;
}
#special-column img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.en-header {
  width: 100%;
  padding-bottom: 84px;
  position: relative;
}
.en-header-img {
  width: calc(50% + 316px);
  height: 706px;
  margin-left: auto;
  position: relative;
  z-index: 1;
}
.en-header-img img {
  height: 100%!important;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}
.en-header-ttl {
  width: 600px;
  position: absolute;
  top: 65px;
  left: 50%;
  margin-left: -685px;
  z-index: 2;
}
.en-header-subttl {
  box-sizing: border-box;
  width: 270px;
  height: 32px;
  padding-top: 4px;
  background-color: #C30000;
  font-size: 24px;
  line-height: 1;
  color: #368CF0;
  text-align: center;
  position: absolute;
  top: 477px;
  left: 50%;
  margin-left: -494px;
  z-index: 2;
}
.en-header-logo {
  width: 220px;
  position: absolute;
  top: 583px;
  left: 50%;
  margin-left: -587px;
}

.sec {
  position: relative;
}
.sec-ttl,
.sec-img {
  position: absolute;
  left: 50%;
  z-index: 5;
}
.sec-img {
  z-index: 4;
}
.sec a {
  display: block;
  position: absolute;
  left: 50%;
  z-index: auto;
  font-size: 17px;
  line-height: 1;
  color: #368CF0;
}
.sec a::before {
  display: block;
  height: 24px;
  background-color: #C30000;
  position: absolute;
  top: -3px;
  left: 0;
  z-index: -1;
  content:"";
}
.sec a::after {
  position: absolute;
  content:"";
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.sec .bg {
  background-color: #368CF0;
  position: absolute;
  z-index: 1;
}


.sec01 {
  height: 1147px;
}
.sec01 .sec-ttl {
  width: 785px;
  top: 726px;
  margin-left: -35px;
  transition-delay:500ms;
}
.sec01 .img-1 {
  width: 500px;
  top: 0;
  margin-left: 190px;
}
.sec01 .img-2 {
  width: 750px;
  top: 485px;
  margin-left: -750px;
  transition-delay:500ms;
}
.sec01 a {
  top: 1030px;
  margin-left: 423px;
}
.sec01 a::before {
  width: calc(100% + 20px);
  left: -12px;
}
.sec01 a::after {
  width: 43px;
  height: 25px;
  background-image: url("arrow_01.svg");
  top: 2px;
  left: -66px;
}
.sec01 .bg01 {
  width: 100%;
  height: 60px;
  top: 62px;
  right: 50%;
  margin-right: 233px;
}
.sec01 .bg02 {
  width: 60px;
  height: 1155px;
  top: 62px;
  right: 50%;
  margin-right: 233px;
}

.sec02 {
  height: 1942px;
}
.sec02 .sec-ttl {
  width: 750px;
  top: 897px;
  margin-left: -750px;
}
.sec02 a {
  top: 1187px;
  margin-left: -314px;
}
.sec02 a::before {
  width: calc(100% + 7px);
  top: 0;
  left: 4px;
}
.sec02 a::after {
  width: 28px;
  height: 25px;
  background-image: url("arrow_02.svg");
  top: -8px;
  left: -38px;
}
.sec02 .img-1 {
  width: 500px;
  top: 0;
  margin-left: -598px;
}
.sec02 .img-2 {
  width: 467px;
  top: 234px;
  margin-left: 90px;
  transition-delay:500ms;
}
.sec02 .img-3 {
  width: 586px;
  top: 1336px;
  margin-left: -293px;
}
.sec02 .bg01 {
  height: 1166px;
  width: 60px;
  top: 1102px;
  left: 50%;
  margin-left: 575px;
}
.sec02 .bg02 {
  width: 237px;
  height: 108px;
  background-image: url("pc_code_01.svg");
  background-color: transparent;
  top: 1751px;
  right: 50%;
  margin-right: 533px;
}

.sec03 {
  height: 1744px;
}
.sec03 .sec-ttl {
  width: 665px;
  height: 344px;
  position: absolute;
  top: 990px;
  margin-left: 86px;
}
.sec03 a {
  top: 1382px;
  margin-left: 210px;
}
.sec03 a::before {
  width: calc(100% + 23px);
  top: -2px;
  left: -5px;
}
.sec03 a::after {
  width: 44px;
  height: 23px;
  background-image: url("arrow_03.svg");
  top: -2px;
  left: -62px;
}
.sec03 .img-1 {
  width: 467px;
  top: 0;
  margin-left: -218px;
}
.sec03 .img-2 {
  width: 634px;
  top: 892px;
  margin-left: -750px;
}
.sec03 .bg01 {
  width: 60px;
  height: 1167px;
  top: 171px;
  right: 50%;
  margin-right: 572px;
}
.sec03 .bg02 {
  width: 60px;
  height: 1017px;
  top: 433px;
  right: 50%;
  margin-right: 368px;
}
.sec04 {
  height: 1630px;
}
.sec04 .sec-ttl {
  width: 838px;
  top: 175px;
  margin-left: -605px;
  transition-delay:500ms;
}
.sec04 a {
  top: 496px;
  margin-left: -553px;
}
.sec04 a::before {
  width: calc(100% + 27px);
  left: -18px;
}
.sec04 a::after {
  width: 38px;
  height: 25px;
  background-image: url("arrow_04.svg");
  top: -2px;
  left: -78px;
}
.sec04 .img-1 {
  width: 467px;
  top: 0;
  margin-left: 115px;
  z-index: 6;
}
.sec04 .img-2 {
  width: 900px;
  top: 872px;
  margin-left: -750px;
}
.sec04 .bg01 {
  width: 100%;
  height: 60px;
  top: 840px;
  left: 50%;
  margin-left: -233px;
}
.sec04 .bg02 {
  width: 100%;
  height: 60px;
  top: 1065px;
  left: 50%;
  margin-left: 260px;
}
.sec04 .bg03 {
  width: 100%;
  height: 60px;
  top: 1290px;
  left: 50%;
  margin-left: 416px;
}

.sec05 {
  height: 3373px;
}
.sec05 .sec-ttl {
  width: 668px;
  top: 1542px;
  margin-left: 82px;
  transition-delay:500ms;
}
.sec05 .img-1 {
  width: 900px;
  top: 0;
  margin-left: -450px;
}
.sec05 .img-2 {
  width: 592px;
  top: 777px;
  margin-left: 158px;
}
.sec05 .img-3 {
  width: 691px;
  top: 1010px;
  margin-left: -750px; 
}
.sec05 .img-4 {
  width: 534px;
  top: 2196px;
  margin-left: -267px;
}
.sec05 .bg01 {
  width: 60px;
  height: 1140px;
  top: 218px;
  right: 50%;
  margin-right: 604px;
}
.sec05 .bg02 {
  width: 237px;
  height: 108px;
  background-image: url("pc_code_02.svg");
  background-color: transparent;
  top: 1896px;
  left: 50%;
  margin-left: 514px;
}

.en-footer {
padding-bottom: 210px;
}
.en-footer-ttl {
  width: 335px;
  margin: 0 auto 348px;
}
.en-footer-logo {
  width: 222px;
  margin: 0 auto 52px;
}

.en-footer .staff {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.en-footer-staff-ttl {
  padding: 5px 8px;
  background-color: #C30000;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1;
  color: #368CF0;
}
.en-footer ul {
  width: 100%;
  padding-bottom: 48px;
}
.en-footer li {
  font-size: 16px;
  line-height: 2.25;
  text-align: center;
  font-weight: 700;
  color: #368CF0;
}