@charset "utf-8";
html{ scroll-behavior:smooth; }

body::after{
  content:"";
  display:block;
  width:100%; height:100lvh;
  position:fixed;
  top:0; left:0;
  z-index:-1;
  background:url(../images/index_cover_01_1_sp.jpg) center top /cover no-repeat;
}

#wrapper #cover{
  width:100%; height:calc(1250 / 750 * 100vw);
  box-sizing:border-box;
  position:relative;
  padding:calc(190 / 750 * 100vw) 0 0;
}

#wrapper #cover >h2{
  width:calc(268 / 750 * 100vw);
  margin:0 auto;
  color: #fff;
  text-align: center;
  font-size: calc(51 / 750 * 100vw);
  line-height: 1.3;
  letter-spacing: calc(20 / 750 * 100vw);
  font-family: 'Outfit', sans-serif;
  -webkit-text-stroke: 1px;
}

#wrapper #cover >h2 img{ width:100%; height:auto; }

#wrapper #cover >h4 {
  width: 100%;
  margin:calc(30 / 750 * 100vw) 0 0;
  color: #fff;
  text-align: center;
  font-size: calc(30 / 750 * 100vw);
}

#wrapper #cover >p{
  width:100%;
  margin:calc(30 / 750 * 100vw) 0 0;
  font-size:calc(22 / 750 * 100vw); line-height:calc(48 / 22);
  text-align:center;
  color:rgb(255,255,255);
}

#wrapper #cover >h3{
  width:100%;
  margin:calc(80 / 750 * 100vw) 0 0;
  font-size:calc(32 / 750 * 100vw); line-height:1;
  text-align:center;
  color:rgb(255,255,255);
}

#wrapper #cover >ul{
  display:flex;
  flex-wrap:wrap;
  gap:calc(39 / 750 * 100vw);
  width:calc(680 / 750 * 100vw);
  margin:calc(60 / 750 * 100vw) auto 0;
}

#wrapper #cover >ul >li a{
  display:block;
  width:calc(320 / 750 * 100vw - 2px); height:calc(68 / 750 * 100vw - 2px);
  font-size:calc(22 / 750 * 100vw); line-height:calc(68 / 750 * 100vw - 2px);
  text-align:center;
  text-decoration:none;
  color:rgb(255,255,255);
  background:rgb(0,0,0);
  border:1px solid rgb(255,255,255);
}

#wrapper #cover >a{
  display:block;
  width:calc(58 / 750 * 100vw); height:calc(31 / 750 * 100vw);
  position:absolute;
  bottom:calc(60 / 750 * 100vw); left:50%;
  background:url(../images/index_cover_04.png) center top /contain no-repeat;
  transform:translate(-50%,0);
}

#wrapper #partner{
  width:100%;
  padding:calc(90 / 750 * 100vw) 0 calc(112 / 750 * 100vw);
  background:rgb(32,43,58);
}

#wrapper #partner >h3{
  width:100%;
  margin:0;
  font-size:calc(32 / 750 * 100vw); line-height:1;
  text-align:center;
  color:rgb(255,255,255);
}

#wrapper #partner >div{
  width:100%; height:calc(120 / 750 * 100vw);
  margin:calc(60 / 750 * 100vw) 0 0;
}

/* #wrapper #partner >div .swiper-slide{
  width:calc(384 / 750 * 100vw); height:calc(195 / 750 * 100vw);
} */

#wrapper #partner >div .swiper-slide img{ width:100%; height:auto; }

.swiper {
  z-index: 0;
}

#wrapper #history{
  width:100%;
  padding:calc(90 / 750 * 100vw) 0 calc(80 / 750 * 100vw);
  background:rgb(69,85,108);
}

#wrapper #history >h3{
  width:100%;
  margin:0;
  font-size:calc(32 / 750 * 100vw); line-height:1;
  text-align:center;
  color:rgb(255,255,255);
}

#wrapper #history >ul{
  width:calc(650 / 750 * 100vw);
  position:relative;
  margin:calc(60 / 750 * 100vw) auto 0; padding:1px 0 calc(40 / 750 * 100vw);
}

#wrapper #history >ul::before{
  content:"";
  display:block;
  width:calc(131 / 750 * 100vw); height:100%;
  position:absolute;
  top:0; left:0;
  border-right:1px solid rgb(255,255,255);
}

#wrapper #history >ul >li{
  width:100%;
  box-sizing:border-box;
  position:relative;
  margin:calc(40 / 750 * 100vw) 0 0; padding:0 0 0 calc(165 / 750 * 100vw);
  font-size:calc(22 / 750 * 100vw); line-height:calc(28 / 750 * 100vw);
  color:rgb(255,255,255);
}

#wrapper #history >ul >li >time{
  display:block;
  width:calc(165 / 750 * 100vw);
  position:absolute;
  top:0; left:0;
  font-size:calc(36 / 750 * 100vw); line-height:calc(28 / 750 * 100vw);
  color:rgb(255,255,255);
}

#wrapper #history >ul >li >time::after{
  content:"";
  display:block;
  width:calc(12 / 750 * 100vw); height:calc(12 / 750 * 100vw);
  position:absolute;
  top:calc(6 / 750 * 100vw); left:calc(125 / 750 * 100vw);
  background:rgb(255,255,255);
  border-radius:50%;
}

#wrapper #sdgs{
  width:100%;
  padding:calc(100 / 750 * 100vw) 0 calc(110 / 750 * 100vw);
  background:rgb(32,43,58);
}

#wrapper #sdgs >h3{
  width:100%;
  margin:0;
  font-size:calc(32 / 750 * 100vw); line-height:1;
  text-align:center;
  color:rgb(255,255,255);
}

#wrapper #sdgs >p{
  width:100%;
  margin:calc(70 / 750 * 100vw) 0 0;
  font-size:calc(22 / 750 * 100vw); line-height:calc(40 / 22);
  text-align:center;
  color:rgb(255,255,255);
}

#wrapper #sdgs >p br:nth-of-type(3){ display:none; }

#wrapper #sdgs >ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:calc(15 / 750 * 100vw) calc(20 / 750 * 100vw);
  width:calc(400 / 750 * 100vw);
  margin:calc(70 / 750 * 100vw) auto 0;
}

#wrapper #sdgs >ul >li{
  width:calc(167 / 750 * 100vw);
}

#wrapper #sdgs >ul >li img{ width:100%; height:auto; }



@media(min-width: 769px),print{

body::after{
  background:url(../images/index_cover_01_1_pc.jpg) center bottom /cover no-repeat;
}

#wrapper #cover{
  width:100%; height:860px;
  padding:170px 0 0;
}

#wrapper #cover >h2{
  width:268px;
  font-size: 51px;
  letter-spacing: 13px;
  -webkit-text-stroke: 2px;
}

#wrapper #cover >h4 {
  margin:0;
  font-size:24px; line-height:calc(40 / 18);
}

#wrapper #cover >p{
  margin:0;
  font-size:18px; line-height:calc(40 / 18);
}

/* #wrapper #cover >p br:nth-of-type(2){ display:none; }
#wrapper #cover >p br:nth-of-type(4){ display:none; } */

#wrapper #cover >h3{
  margin:90px 0 0;
  font-size:28px;
}

#wrapper #cover >ul{
  gap:30px;
  width:1090px;
  margin:60px auto 0;
}

/* .swiper-wrapper {
  justify-content: center;
} */


#wrapper #cover >ul >li a{
  width:calc(250px - 2px); height:calc(60px - 2px);
  font-size:16px; line-height:calc(60px - 2px);
}

#wrapper #cover >ul >li a:hover{
  color:rgb(0,0,0);
  background:rgb(255,255,255);
}

#wrapper #cover >a{
  width:58px; height:31px;
  bottom:40px;
  cursor:pointer;
}

#wrapper #partner{
  padding:76px 0 96px;
}

#wrapper #partner >h3{
  font-size:28px;
}

#wrapper #partner >div{
  width:1050px; height:100px;
  margin:70px auto 0;
}

/* #wrapper #partner >div .swiper-slide{
  width:320px; height:100px;
} */

#wrapper #history{
  padding:120px 0 110px;
}

#wrapper #history >h3{
  font-size:28px;
}

#wrapper #history >ul{
  width:1050px;
  margin:55px auto 0; padding:1px 0 50px;
}

#wrapper #history >ul::before{
  width:115px;
}

#wrapper #history >ul >li{
  margin:50px 0 0; padding:0 0 0 150px;
  font-size:18px; line-height:42px;
}

#wrapper #history >ul >li >time{
  width:150px;
  font-size:28px; line-height:42px;
}

#wrapper #history >ul >li >time::after{
  width:12px; height:12px;
  top:13px; left:110px;
}

#wrapper #sdgs{
  padding:120px 0;
}

#wrapper #sdgs >h3{
  font-size:28px;
}

#wrapper #sdgs >p{
  margin:60px 0 0;
  font-size:18px; line-height:calc(40 / 18);
}

#wrapper #sdgs >p br:nth-of-type(2){ display:none; }
#wrapper #sdgs >p br:nth-of-type(3){ display:inline; }
#wrapper #sdgs >p br:nth-of-type(4){ display:none; }
#wrapper #sdgs >p br:nth-of-type(5){ display:none; }

#wrapper #sdgs >ul{
  gap:20px;
  width:730px;
  margin:70px auto 0;
}

#wrapper #sdgs >ul >li{
  width:167px;
}

}