@charset "utf8";


* {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 767px) {
  ._pc{ display: none; }
}

@media screen and (min-width: 768px) {
  ._sp{ display: none; }
}

body {
  font-family: "Zen Kaku Gothic New", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-image: url(../img/pc/bg.png);
  background-repeat: repeat-y;
  background-size: 100%;
  background-position: center;
}
@media screen and (max-width: 767px) {
  body {
    background-image: url(../img/pc/bg.png);
  }
}

main {
  overflow-x: hidden;
  overflow-y: hidden;
}

img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

section {
  width: 100%;
}

picture {
  display: block;
  height: 100%;
}

/*---------------------------
article
---------------------------*/
.article {
  width: 80%;
  height: auto;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .article {
    width: 100%;
  }
}

/*---------------------------
fv
---------------------------*/
.article-fv {
  width: 100%;
  height: auto;
  margin: auto;
}
@media screen and (max-width: 767px) {
  .article-fv {
    width: 100%;
  }
}


/*---------------------------
btn-01
---------------------------*/
.btn-01 {
  width: 40%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .btn-01 {
    width: 94%;
  }
}


/*---------------------------
schedule
---------------------------*/
.schedule {
  width: 40%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .schedule {
    width: 94%;
    margin-top: 12%;
  }
}


/*---------------------------
graph
---------------------------*/
.graph {
  width: 50%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .graph {
    width: 94%;
    margin-top: 12%;
  }
}


/*---------------------------
catch
---------------------------*/
.catch {
  width: 50%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .catch {
    width: 94%;
    margin-top: 14%;
  }
}


/*---------------------------
btn-02
---------------------------*/
.btn-02 {
  width: 40%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .btn-02 {
    width: 94%;
    margin-top: 8%;
  }
}


/*---------------------------
risk
---------------------------*/
.risk {
  width: 100%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .risk {
    margin-top: 14%;
  }
}


/*---------------------------
text-arrow
---------------------------*/
.text-arrow {
  margin-top: 6%;
  text-align: center;
  font-weight: 710;
  font-size: calc(50vw/19.2);
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .text-arrow {
    font-size: calc(20vw/3.6);
    margin-top: 12%;
  }
}

.br_sp{
  display: none;
}
@media screen and (max-width: 767px) {
  .br_sp {
    display: inline;
  }
}


/*---------------------------
arrow
---------------------------*/
.arrow{
  margin-top: 4%;
}

.arrow-swiper-container{
  display: none;
}
@media screen and (max-width: 767px) {
  .arrow-swiper-container {
    display: block;
  }
}

.pc-grid-container {
  width:100%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media screen and (max-width: 767px) {
  .pc-grid-container  {
    position: absolute;
    display: none;
  }
}


.pc-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.arrow-swiper-container {
  position: relative;
  width: 86%;
  margin: auto;
}

@media screen and (max-width: 767px) {
  .swiper-button-prev::after {
    display: block;
    content: "";
    position: absolute;
    z-index: 5;
    top: 0%;
    left: -36px;
    width: 48px;
    height: 50px;
    background-image: url(../img/sp/left_arrow.png?251104);
    background-repeat: no-repeat;
    background-size: contain;
  }
}

@media screen and (max-width: 767px) {
  .swiper-button-next::after {
    display: block;
    content: "";
    position: absolute;
    z-index: 5;
    top: 0%;
    left: 14px;
    width: 48px;
    height: 50px;
    background-image: url(../img/sp/right_arrow.png?251104);
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.swiper-wrapper .swiper-slide {
  height: unset;
}

.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide img {
  width: 100%;
  height: auto;
}



/*---------------------------
assets
---------------------------*/
.assets {
  width: 100%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .assets {
    margin-top: 14%;
  }
}


/*---------------------------
btn-03
---------------------------*/
.btn-03 {
  width: 40%;
  height: auto;
  margin: auto;
  margin-top: 8%;
}
@media screen and (max-width: 767px) {
  .btn-03 {
    width: 94%;
    margin-top: 10%;
  }
}


/*---------------------------
text-participation
---------------------------*/
.text-participation {
  margin-top: 10%;
  text-align: center;
  font-weight: 700;
  color: #0061B6 ;
  font-size: calc(56vw/19.2);
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .text-participation {
    font-size: calc(21vw/3.6);
    margin-top: 12%;
  }
}

/*---------------------------
information
---------------------------*/
.information {
  width: 60%;
  height: auto;
  margin: auto;
  margin-top: 8%;
}
@media screen and (max-width: 767px) {
  .information {
    width: 94%;
    margin-top: 16%;
  }
}


/*---------------------------
experience-story
---------------------------*/
.experience-story {
  width: 30%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .experience-story {
    width: 60%;
    margin-top: 12%;
  }
}


/*---------------------------
participants
---------------------------*/
.participants {
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .participants {
    width: 90%;
  }
}

.participants-swiper-container{
  display: none;
}
@media screen and (max-width: 767px) {
  .participants-swiper-container {
    display: block;
  }
}


.participants-pc-container {
  display: flex;
  flex-direction: column;
  width: 80%;
  gap: 26px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .participants-pc-container  {
    position: absolute;
    display: none;
  }
}



.participants-swiper-container{
  position: relative;
  width: 90%;
  margin: auto;
}


/*---------------------------
satisfaction-level
---------------------------*/
.satisfaction-level {
  width: 30%;
  height: auto;
  margin:0 auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .satisfaction-level{
    width: 70%;
    margin-top: 12%;
  }
}


/*---------------------------
btn-04
---------------------------*/
.btn-04 {
  width: 40%;
  height: auto;
  margin: auto;
  margin-top: 3%;
}
@media screen and (max-width: 767px) {
  .btn-04 {
    width: 94%;
    margin-top: 10%;
  }
}


/*---------------------------
introduction
---------------------------*/
.introduction {
  width: 80%;
  height: auto;
  margin: auto;
  margin-top: 8%;
}
@media screen and (max-width: 767px) {
  .introduction {
    width: 94%;
    margin-top: 16%;
  }
}


/*---------------------------
btn-05
---------------------------*/
.btn-05 {
  width: 40%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .btn-05 {
    width: 94%;
    margin-top: 10%;
  }
}


/*---------------------------
question
---------------------------*/
.question {
  width: 80%;
  height: auto;
  margin: auto;
  margin-top: 8%;
}
@media screen and (max-width: 767px) {
  .question {
    width: 94%;
    margin-top: 20%;
  }
}


/*---------------------------
btn-06
---------------------------*/
.btn-06 {
  width: 40%;
  height: auto;
  margin: auto;
  margin-top: 6%;
}
@media screen and (max-width: 767px) {
  .btn-06 {
    width: 94%;
  }
}


/*---------------------------
simulation
---------------------------*/
.simulation {
  width: 66%;
  height: auto;
  margin: auto;
  margin-top: 10%;
}
@media screen and (max-width: 767px) {
  .simulation {
    width: 80%;
    margin-top: 16%;
  }
}


/*---------------------------
btn-07
---------------------------*/
.btn-07 {
  width: 40%;
  height: auto;
  margin: auto;
  margin-top: 6%;
  margin-bottom: 14%;
}
@media screen and (max-width: 767px) {
  .btn-07 {
    width: 94%;
    margin-top: 18%;
    margin-bottom: 26%;
  }
}