@charset "utf-8";
/* default PC */

/* animation */
.animation {
  opacity: 0;
  position: relative;
  top: 40px;
  transition: .5s;
}

.animation.active {
  opacity: 1;
  top: 0;
  transition: .5s;
}

/* main-view */

.main-view {
  background-color: #91d2df;
  height: 100%;
  margin-top: 0;
  min-height: unset;
  position: relative;
}

.main-view::before {
  background: url(../image/contents/home/catch_txt.png) no-repeat center / contain;
  content: "";
  display: block;
  height: 246px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 170px;
  max-width: 1497px;
  width: 100%;
}

.main-view img{
  width: 100%;
}


/* contents */
#contents {
  background-color: var(--main-bg-color);
}

#contents {

  .pc-none {
    display: none;
  }

  .concept-area {
    position: relative;
    margin-bottom: 80px;
    margin-top: -180px;
  }

  .concept-area::before {
    background: url(../image/contents/home/concept_img_left-1.png) no-repeat center / contain;
    content: "";
    display: block;
    height: 363px;
    width: 222px;
    position: absolute;
    left: 120px;
    top: 140px;
  }

  .concept-area::after {
    background: url(../image/contents/home/concept_img_right-1.png) no-repeat center / contain;
    content: "";
    display: block;
    height: 376px;
    width: 238px;
    position: absolute;
    right: 50px;
    top: 140px;
  }

  .concept-area h2 {
    color: var(--sub-accent-color);
    font-size: 45px;
    font-weight: 800;
    letter-spacing: 0.2em;
    line-height: 1.8em;
  }

  .concept-area h2 .look-brown {
    font-size: 54px;
    margin-right: 3px;
  }

  .concept-area p {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 2.6em;
  }

  .contents-area {
    margin-bottom: 100px;
  }

  .contents-area .inner{
    max-width: 1630px;
  }

  .contents-area .contents-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 34px;
  }

  .contents-item img {
    border-radius: 20px;
  }

  .contents-item h2 {
    background-color: var(--sub-accent-color);
    border-radius: 34px;
    color: var(--sub-text-color);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.2em;
    padding: 20px;
    margin: 0 auto;
    margin-top: -35px;
    width: 90%;
    max-width: 420px;
  }

  .contents-item h2::after {
    bottom: 0;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    content: '';
    height: 9px;
    margin: auto;
    position: absolute;
    right: 30px;
    top: 0;
    transform: rotate(45deg);
    width: 9px;
  }

  .contents-item a:hover {
    opacity: .5;
    text-decoration: none;
    transition: .3s;
  }

  .contents-item a {
    transition: .3s;
  }  

  .report-area .inner {
    max-width: 1750px;
  }

  .report-area {
    position: relative;
    margin-bottom: 120px;
  }

  .report-area::after {
    background: url(../image/contents/home/report_img_01-1.png) no-repeat center / contain;
    content: "";
    display: block;
    height: 164px;
    width: 146px;
    position: absolute;
    right: 280px;
    bottom: -70px;
  }

  .project-area {
    background-color: var(--third-bg-color);
    padding: 80px 0;
  }

  .project-area h2 {
    font-size: 48px;
    text-align: left;
    margin: 0 0 40px;
    letter-spacing: .2em;
  }

  .project-area h2.main .en-ttl {
    color: #7ec130;
    font-size: 20px;
    text-align: left;
    margin: 20px 0 0 0;
  }

  .project-area p {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 2.1em;
    margin-bottom: 60px;
  }

  .project-area .txt-2box {
    display: inline-block;
    align-content: center;
    position: relative;
  }

  .project-area .txt-2box:first-of-type::after {
    background: url(../image/contents/home/project_img_01-1.png) no-repeat center / contain;
    content: "";
    display: block;
    height: 187px;
    width: 131px;
    position: absolute;
    right: 60px;
    bottom: 0;
  }

  .project-area a {
    background-color: var(--sub-accent-color)
  }

  .project-area {
    position: relative;
    background-size: cover;
  }

  .road-area h2 {
    font-size: 48px;
    text-align: left;
    margin: 0 0 40px;
    letter-spacing: .2em;
  }

  .road-area h2.main .en-ttl {
    color: var(--main-accent-color);
    font-size: 20px;
    text-align: left;
    margin: 20px 0 0 0;
  }

  .road-area p {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 2.1em;
    margin-bottom: 60px;
  }

  .road-area {
    padding: 100px 0 240px;
    position: relative;
    margin-bottom: 60px;
  }

  .road-area::after {
    background: url(../image/contents/home/road-1.png) no-repeat center / contain;
    content: "";
    display: block;
    height: 601px;
    width: 100%;
    position: absolute;
    bottom: 0;
    /* 0にすることで画像が下に移動せず、めりこまなくなる */
    left: 0;
    z-index: 0;
  }

  .road-list {
    display: grid;
    gap: 100px;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    width: 100%;
  }

  .road-list .road-item {
    align-items: center;
    aspect-ratio: 1 / 1;
    /* アスペクト比を1:1にする */
    background-color: var(--sub-accent-color);
    border-radius: 50%;
    /* 正円にする */
    color: var(--sub-text-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    text-align: center;
    width: 100%;
  }


  .road-item.orange {
    background-color: #f08638;
    position: relative;
    bottom: 130px;
  }

  .road-item.blue {
    background-color: #4ea5e9;
    position: relative;
    bottom: 265px;
  }

  .road-item h3 {
    border-left: 0;
    color: var(--sub-text-color);
    font-size: clamp(18px, 2.5vw, 34px);
    /* 文字サイズは画面幅に合わせて変化させる。ただし18pxより小さくせず、34pxより大きくもしない 基準値が2.5vw */
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1.38em;
    padding: 0;
    margin: 0 0 20px;
  }

  .road-item.orange h3 {
    letter-spacing: 0.1em;
  }

  .road-area .road-item p {
    font-size: clamp(13px, 1.2vw, 18px);
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.8em;
    margin-bottom: 0;
  }

  .road-item p.number {
    font-size: clamp(16px, 1.5vw, 28px);
    letter-spacing: 0.2em;
    margin-bottom: 9px;
  }

  .road-item span.num {
    font-family: "Playwrite NZ", sans-serif;
    font-size: 125%;
    font-weight: 500;
    letter-spacing: 0.2em;
    margin-right: 6px;
  }

  .link-btn{
    max-width: 450px;
    padding: 20px;
  }

  .road-area .link-btn {
    margin: 0 auto;
    position: relative;
    bottom: -206px;
    z-index: 1;
  }

  .banner-area {
    background-color: var(--third-bg-color);
    padding: 80px 0;
  }

  .banner-area .inner {
    max-width: 1330px;
  }

  .banner-list {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .banner-item {
    width: calc((100% / 2) - 90px);
    margin-right: 90px;
  }

  .banner-item:nth-child(2) {
    margin-right: 0px;
  }

  .banner-item .link-btn {
    align-items: center;
    background-color: var(--sub-accent-color);
    border-radius: 20px;
    /* display: flex; */
    font-size: 26px;
    max-width: 620px;
    padding: 75px 25px 75px 95px;
    height: 180px;
    /* justify-content: center; */
  }

  .banner-item .link-btn::after {
    right: 50px;
    height: 10px;
    width: 10px;
  }


  .banner-item:first-child .link-btn::before {
    bottom: 0;
    background: url(../image/contents/home/guidance_bnr-1.png)no-repeat center / contain;
    content: '';
    height: 139px;
    margin: auto;
    position: absolute;
    left: 55px;
    top: 0;
    width: 104px;
  }

  .banner-item:nth-child(2) .link-btn::before {
    bottom: 0;
    background: url(../image/contents/home/contact_bnr-1.png) no-repeat center / contain;
    content: '';
    height: 122px;
    margin: auto;
    position: absolute;
    left: 30px;
    top: 0;
    width: 97px;
  }

}

@media screen and (min-width: 960px) {
  .mobile-view main {
    background-color: #37c2df;
    padding-top: 60px;
  }
}

@media screen and (max-width: 1560px) {

  .main-view::before {
    top: 130px;
  }

  #contents {

      .concept-area {
    margin-top: -110px;
  }

    .concept-area::before {
      left: 40px;
    }

    .concept-area::after {
      right: 10px;
    }

    .concept-area p {
      font-size: 20px;
      line-height: 2.4em;
    }
  }

}

@media screen and (max-width: 1400px) {
  .mobile-view main {
    background-color: #37c2df;
    padding-top: 60px;
  }


  #contents {

    .project-area .txt-2box:first-of-type::after {
      height: 140px;
      right: -30px;
      width: 100px;
    }

    .concept-area h2 {
      font-size: 42px;
      line-height: 1.75em;
    }

  .concept-area h2 .look-brown {
    font-size: 48px;
    margin-right: 3px;
  }      

    .concept-area::before {
      left: 30px;
      top: 103px;
      /* width: 90%; */
      max-width: 184px;
    }

    .concept-area::after {
      right: 10px;
      top: 70px;
      max-width: 180px;
    }

    .contents-item h2 {
      font-size: 23px;
      padding: 17px;
      margin-top: -28px;
    }

    .report-area::after {
      right: 120px;
    }

    .road-list {
      gap: 60px;
    }

    .banner-item:first-child .link-btn::before {
      height: 139px;
      left: 41px;
      top: 0;
      width: 94px;
    }

    .banner-item:nth-child(2) .link-btn::before {
      height: 112px;
      left: 23px;
      top: 0;
      width: 84px;
    }

    .banner-item .link-btn {
      font-size: 23px;
      padding: 75px 25px 75px 95px;
    }


  }

}

/* view-1140 notePC,Tablet */
@media screen and (max-width: 1140px) {

  .mobile-view main {
    padding-top: 100px;
  }

  .main-view::before {
    top: 40px;
  }

  #contents {

    .project-area .txt-2box:first-of-type::after {
      height: 110px;
      right: -35px;
      width: 75px;
    }

  .link-btn{
    padding: 15px;
  }
    
    .concept-area::before,
    .concept-area::after {
      display: none;
    }

    .concept-area h2 {
      font-size: 38px;
      line-height: 1.75em;
    }

  .concept-area h2 .look-brown {
    font-size: 43px;
    margin-right: 3px;
  }    

    .contents-area .contents-list {
      gap: 20px;
    }

    .contents-item h2 {
      font-size: 21px;
      padding: 15px;
      margin-top: -25px;
    }

    .project-area h2,
    .road-area h2 {
      font-size: 39px;
      margin: 0 0 30px;
    }

      .project-area h2.main .en-ttl,
    .road-area h2.main .en-ttl{
    font-size: 17px;
    margin: 8px 0 0 0;
  }

    .project-area p,
    .road-area p {
      font-size: 17px;
      line-height: 2.0em;
      margin-bottom: 60px;
    }

      .project-area .link-btn {
    max-width: 400px;
  }

    .road-list {
      gap: 20px;
    }

    .road-area p {
      margin-bottom: 110px;
    }

    .banner-item {
      width: calc((100% / 2) - 40px);
      margin-right: 40px;
    }

    .banner-item:nth-child(2) {
      margin-right: 0px;
    }

    .banner-item .link-btn::after {
      right: 35px;
    }

  }

}

/* view-959 Mobile,Tablet */
@media screen and (max-width: 959px) {

  .mobile-view main {
    padding-top: 40px;
  }

   main {
    background-color: #37c2df;
    padding-top: 40px;
  }

  .main-view::before {
    top: 25px;
  }
  
  #contents {

    .pc-none {
      display: block;
    }

      .concept-area {
    margin-top: -60px;
  }    

    .contents-area .contents-list {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }

    .contents-item:nth-child(1) {
      grid-column: span 2 / span 2;
    }

    .contents-item:nth-child(2) {
      grid-column: span 2 / span 2;
      grid-column-start: 3;
    }

    .contents-item:nth-child(3) {
      grid-column: span 2 / span 2;
      grid-column-start: 2;
      grid-row-start: 2;
    }

    .concept-area p {
      font-size: 18px;
      line-height: 2.2em;
      text-align: left;
    }

    .concept-area h2 {
      font-size: 27px;
    }

        .concept-area h2 .look-brown {
            font-size: 32px;
            margin-right: 1px;
        }    

    .contents-item h2 {
      font-size: 17px;
      padding: 13px;
      margin-top: -22px;
    }

    .contents-item h2::after {
      height: 7px;
      width: 7px;
      top: 4px;
    }

    .report-area::after {
      right: 60px;
      bottom: -105px;
      width: 121px;
    }

    .project-area h2,
    .project-area h2.main .en-ttl,
    .road-area h2,
    .road-area h2.main .en-ttl {
      text-align: center;
    }

    .project-area p {
      margin-bottom: 10px;
    }

    .project-area .txt-2box:first-of-type::after {
      display: none;
    }

    .project-area .txt-2box.end{
      text-align: center;
    }

    .project-area a{
      margin: 0 auto;
    }

    .project-area img {
      margin-bottom: 50px;
    }

    .road-area {
      padding: 80px 0 100px;
      margin-bottom: 0;
    }

    .road-list {
      gap: 20px;
      grid-template-columns: 1fr;
      margin-bottom: 60px;
    }

    .road-list .road-item {
      aspect-ratio: auto;
      border-radius: 20px;
      height: auto;
      min-height: unset;
      padding: 30px 25px;
      width: 100%;
      display: block;
    }

    .road-item .flex {
      margin-bottom: 15px;
    }

    .road-item img {
      width: 45px;
      height: 45px;
    }

    .road-item .img-2box {
      width: 55px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .road-item .img-2box-txt {
      margin-left: 20px;
      width: calc((100% - 55px) - 20px);
      text-align: left;
    }

    .road-item h3 {
      font-size: 23px;
      margin: 0;
    }

    .road-item.orange,
    .road-item.blue {
      bottom: 0;
    }

    .road-area .road-item p {
      font-size: 15px;      
      text-align: left;
      margin-bottom: 4px;
    }

    .road-area p {
      margin-bottom: 40px;
    }

    .road-area .link-btn {
      bottom: 0;
    }

    .road-area::after {
      display: none;
    }

    .banner-item:first-child .link-btn::before {
      height: 139px;
      left: 30px;
      top: 0;
      width: 74px;
    }

    .banner-item:nth-child(2) .link-btn::before {
      height: 112px;
      left: 30px;
      top: 0;
      width: 64px;
    }

    .banner-item .link-btn {
      font-size: 22px;
      padding: 45px 35px 45px 95px;
      height: auto;
      margin: 0 auto;
    }


    .banner-item .link-btn::after {
      right: 25px;
    }


    .banner-item {
      width: 100%;
      margin: 0 auto 20px;
    }

  }
}

/* view-768 */
@media screen and (max-width: 768px) {

  .main-view::before {
    top: 15px;
  }

}

/* view-559 Mobile */
@media screen and (max-width: 559px) {

  .main-view {
    min-height: unset;
  }

  .mobile-view main {
    padding-top: 65px;
  }

   main {
    padding-top: 65px;
  }

  .main-view::before {
    top: -50px;
  }

  #contents {

  .link-btn{
    padding: 10px;
  }    

    .concept-area {
      margin-bottom: 60px;
    }

          .concept-area {
    margin-top: -20px;
  }

    .contents-area .contents-list {
      grid-template-columns: 1fr;
    }

    .contents-item:nth-child(1),
    .contents-item:nth-child(2),
    .contents-item:nth-child(3) {
      grid-column: auto;
      grid-row: auto;
    }

    .concept-area h2 {
      font-size: 23px;
    }

  .concept-area h2 .look-brown {
    font-size: 25px;
    margin-right: 3px;
  }    

    .concept-area p {
      font-size: 16px;
      line-height: 2.0em;
      text-align: left;
    }

    .project-area h2,
    .road-area h2 {
      font-size: 24px;
      margin: 0 0 30px;
    }

      .project-area h2.main .en-ttl,
    .road-area h2.main .en-ttl{
    font-size: 13px;
    margin: 4px 0 0 0;
  }    

    .project-area p,
    .road-area p {
      font-size: 16px;
    }

    .road-item h3 {
      font-size: 20px;
      letter-spacing: 0.18em;
      margin: 0;
    }      

    .road-list .road-item {
      padding: 20px 15px;
    }    

    .banner-item .link-btn {
      font-size: 17px;
      padding: 45px 35px 45px 95px;
      height: auto;
      margin: 0 auto;
    }

  }
}