@charset "UTF-8";

/*----------------------------------------------------------------------------------------------------

  Loading

----------------------------------------------------------------------------------------------------*/


/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #00b2bc;
	z-index: 999;
	text-align:center;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/

#splash_logo svg {
  /*width:264px;*/
  padding: 1px;
  width: 260px;
  max-width: 260px;
  aspect-ratio: 0.17;
  opacity: 0;
  animation: LogoAnime 1.0s forwards;
}


@keyframes LogoAnime{
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
@media screen and (max-width: 1280px) {
  #splash_logo svg {
    width: 24vw;
  }
}

@media screen and (max-width: 768px) {
  #splash_logo svg {
    width: 50vw;
    max-width: inherit;
  }
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path,
#mask rect {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity 1.2s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #fff;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path,
#mask.done rect {
	  fill: #fff;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}


/*========= 画面遷移のためのCSS ===============*/

body.appear{
    background:#00b2bc;/*画面を開いた後の背景色を指定*/
}

/*画面遷移アニメーション*/
.splashbg1,
.splashbg2{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2{
	display:block;
}

/*上に消えるエリア*/
body.appear .splashbg1{
  animation-name:PageAnime;
  animation-duration:1.4s;
  animation-timing-function:ease-in-out;
  animation-fill-mode:forwards;
  content: "";
  position:fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  bottom:50%;
  left:0;
  transform: scaleY(1);
  background-color: #00b2bc;/*伸びる背景色の設定*/
}

@keyframes PageAnime{
	0% {
		transform-origin:top;
		transform:scaleY(1);
	}

	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*下に消えるエリア*/
body.appear .splashbg2{
  animation-name:PageAnime2;
  animation-duration:1.4s;
  animation-timing-function:ease-in-out;
  animation-fill-mode:forwards;
  content: "";
  position:fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 50%;
  left:0;
  transform: scaleY(1);
  background-color: #00b2bc;/*伸びる背景色の設定*/
}

@keyframes PageAnime2{
	0% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}


/*画面遷移の後現れるコンテンツ設定*/

.header,.main,.footer {
  opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/

.appear .header,.appear .main,.appear .footer{
	opacity: 1;
  transition: all 400ms 200ms ease;
}

/*----------------------------------------------------------------------------------------------------

  MV

----------------------------------------------------------------------------------------------------*/

  .top-mv {
    position: relative;
  }

    .top-mv .inner{
      margin: auto;
      padding: 0 40px;
      max-width: 1280px;
      height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 333;
    }

      .top-mv .text-area {
        margin: 50px 0 0 0;
        position: relative;
        z-index: 222;
        width: 100%;
      }

        .top-mv .mv-text01 {
          font-weight: 900;
          font-size: 140px;
          line-height: 1.2em;
        }

        .top-mv .mv-text02 {
          margin: 2.2% 0 0 1%;
          font-weight: 900;
          font-size: 36px;
          line-height: 1.2em;
        }

          .top-mv .mv-text02 .spacing01 {
            letter-spacing: -0.4em;
            font-weight: 800;
          }

      .top-mv .mv-img01 {
        width: 120%;
        position: absolute;
        top: 50%;
        left: -5.6%;
        transform: translate(0, -50%);
      }

      .top-mv .bg-text-area01 {
        position: absolute;
        display: flex;
        align-items: center;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        width: 100%;
        max-width: 1280px;
        height: 100%;
        z-index: 113;
      }

        .top-mv .bg-text01 img {
          margin: 0 0 0 -5%;
          width: 242%;
        }

      .top-mv .bg-text-area02 {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
      }


        .top-mv .marquee-block01 {
          margin: -2.0% 0 0 0;
        }

          .top-mv .marquee-text04 {
            display: none;
          }

        .top-mv .marquee-block02 {
          position: absolute;
          bottom: -2.6%;
        }

          .top-mv .marquee-text05 {
            display: none;
          }


@media screen and (max-width: 1280px) {
  
  .top-mv .inner{
    padding: 0 3.1vw;
  }

    .top-mv .text-area {
      margin: 4.20vw 0 0 0;
    }  
  
  .top-mv .mv-text01 {
    font-size: 10.92vw;
  }

  .top-mv .mv-text02 {
    font-size: 2.81vw;
  }
  
  
}



@media screen and (max-width: 768px) {
  
  .top-mv .inner{
    margin: auto;
    padding: 0 0 0 5.2vw;
    max-width: inherit;
  }

  .top-mv .mv-text01 {
    font-size: 15.86vw;
  }

  .top-mv .mv-text02 {
    margin: 3.8% 0 0 1.6%;
    font-size: 4.3vw;
  }
  
    .top-mv .bg-text-area01 {
      display: block;
      width: 100vw;
      max-width: inherit;
      height: 100vh;
    }
  
  .top-mv .bg-text01 img {
    margin: 18.00vh 0 0 -5.00vw;
    width: 226.00vw;
  }
  
  .top-mv .bg-text02 img {
    margin: 13.00vh 0 0 -115.00vw;
    width: 226.00vw;
  }

  .top-mv .marquee-block01 {
    margin: -4.00vw 0 0 0;
  }
  
  .top-mv .marquee-text04 {
    display: block;
  }

  .top-mv .marquee-block02 {
   position: absolute;
   bottom: -2.2%;
  }

  .top-mv .marquee-text05 {
    display: block;
  }

}



/*----------------------------------------------------------------------------------------------------

  section01

----------------------------------------------------------------------------------------------------*/


#top .section01 {
  padding: 140px 0 140px 0;
  position: relative;
  z-index: 222;
}

  #top .section01 .inner {
    margin: auto;
    max-width: 1280px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  #top .section01 .text-area {
    margin: -15px 0 0 0;
    position: relative;
    z-index: 333;
  }

    #top .section01 .text01 {
      font-weight: 700;
      font-size: 22px;
      line-height: 2.4em;
    }

  #top .section01 .btn-area {
    position: absolute;
    bottom: 16px;
    left: 40px;
  }


    #top .section01 .bg-text-area01 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 100vw;
      z-index: 113;
    }

      #top .section01 .vertical-text01 {
        position: absolute;
        top: 80px;
        left: -40px;
      }


    #top .section01 .bg-text-area02 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 100%;
      max-width: 1280px;
      height: 100%;
    }


      #top .section01 .bg-text01 {
        position: absolute;
        top: 50%;
        left: -68%;
        width: 102%;
      }

      #top .section01 .bg-text02 {
        position: absolute;
        top: 62%;
        right: -20%;
        width: 26%;
      }


@media screen and (max-width: 1620px) {
    #top .section01 .bg-text-area01 {
      width: 1620px;
    }
}

@media screen and (max-width: 1280px) {
  #top .section01 .inner {
    padding: 0 3.1vw;
  }
  
  #top .section01 .text01 {
    font-size: 1.72vw;
  }
  
  #top .section01 .btn-area {
    bottom: 20px;
    left: 3.1vw;
  }

}


@media screen and (max-width: 768px) {
  
#top .section01 {
  padding: 5.0vw 0 25.0vw 0;
}
  
  #top .section01 .inner {
    margin: auto;
    max-width: inherit;
    padding: 0 5.2vw;
    display: block;
  }

  #top .section01 .text-area {
    margin: 8.0% 0 0 0;
    padding: 0 0 0 18vw;
    position: relative;
    text-align: justify;
  }

    #top .section01 .text01 {
      font-size: 4.0vw;
      line-height: 1.9em;
    }

  #top .section01 .btn-area {
    position: absolute;
    bottom: 6px;
    left: 5.2vw;
    z-index: 333;
  }
  
    #top .section01 .bg-text-area01 {
      width: 100vw;
    }

      #top .section01 .vertical-text01 {
        top: 44.00vw;
        left: -5.6vw;
      }


    #top .section01 .bg-text-area02 {
      max-width: inherit;
    }


      #top .section01 .bg-text01 {
        top: 43%;
        left: -74vw;
        width: 135%;
      }

      #top .section01 .bg-text02 {
        top: 156.0vw;
        right: -10.00vw;
        width: 28.00vw;
      }
  
  #top .section01 .marquee-block01{
    display: block;
    position: absolute;
    bottom: 40.0vw;
  }
  
}


/*----------------------------------------------------------------------------------------------------

  section02

----------------------------------------------------------------------------------------------------*/


#top .section02 {
  padding: 100px 0 120px 0;
  position: relative;
  z-index: 111;
}

  #top .section02 .ttl-area {
    margin: auto;
    max-width: 1280px;
    padding: 0 40px;
  }

    #top .section02 .ttl-area .ttl-main01 {
      text-align: center;
    }


    #top .section02 .section-main {
      position: relative;
      margin: 100px auto 0;
      max-width: 1440px;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      z-index: 333;
    }

      #top .section02 .card {
        background: #000;
        color: #f1f1f1;
        padding: 65px 60px;
        width: calc(100% / 3);
      }

      #top .section02 .card:nth-child(2) {
        margin: 0 2px;
      }

        #top .section02 .card-ttl01 {
          margin: 0 0 24px 0;
          font-size: 24px;
          font-weight: 600;
          white-space: nowrap;
        }

        #top .section02 .card-text01 {
          text-align: justify;
          font-size: 15px;
          line-height: 2.0em;
        }



    #top .section02 .bg-text-area01 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 1280px;
      height: 100%;
      z-index: 222;
    }


      #top .section02 .bg-text01 {
        position: absolute;
        top: 13%;
        left: -44%;
        width: 68%;
      }

      #top .section02 .bg-text02 {
        position: absolute;
        bottom: -3.0%;
        right: -42%;
        width: 98%;
      }

    #top .section02 .bg-text-area02 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      z-index: 111;
    }

      #top .section02 .marquee-block02{
        position: absolute;
        left: 0;
        bottom: -6%;
      }

@media screen and (max-width: 1280px) {
  
    #top .section02 .section-main {
      margin: 8.0vw auto 0;
    }

      #top .section02 .card {
        padding: 5.2vw 4.8vw;
      }

        #top .section02 .card-ttl01 {
          margin: 0 0 1.80vw 0;
          font-size: 1.82vw;
        }

        #top .section02 .card-text01 {
          font-size: 1.18vw;
        }

}

@media screen and (max-width: 768px) {
  
#top .section02 {
  padding: 15vw 0 5.0vw 0;
}
  
  #top .section02 .ttl-area {
    max-width: inherit;
    padding: 0 3.1vw;
  }
  
  #top .section02 .ttl-area .ttl-main {
    margin: 0 0 0 0;
    text-align: left;
  }
  
  #top .section02 .ttl-area .ttl-main .ttl-text01{
    margin: 0 0 0 -3.6vw;
  }
  
    #top .section02 .section-main {
      margin: 8.0vw auto 0;
      padding: 0 0;
      display: block;
    }
  
    #top .section02 .card {
      padding: 5.4vw 5.2vw;
      margin: 1px 0;
      width:100%;
    }

      #top .section02 .card:nth-child(2) {
        margin: 1px 0;
      }
  
      #top .section02 .card-ttl01 {
        margin: 0 0 1.5vw 0;
        font-size: 4.2vw;
      }

      #top .section02 .card-text01 {
        font-size: 3.0vw;
        line-height: 1.8em;
      }
  
      #top .section02 .bg-text02 {
        bottom: -10.0vw;
        right: -34.0vw;
        width: 106.0vw;
      }
  
    #top .section02 .marquee-text04 {
      margin: 43.0vw 0 0 0;
    }
  
}

/*----------------------------------------------------------------------------------------------------

  section03

----------------------------------------------------------------------------------------------------*/

#top .section03 {
  padding: 200px 0 0 0;
  position: relative;
  z-index: 222;
}

  #top .section03 .inner {
    margin: auto;
    display: flex;
    justify-content: space-between;
    position: relative;
  }


    #top .section03 .block01 {
      margin: 0 0 0 auto;
      padding: 0 0 0 40px;
      width: 50%;
      max-width: 640px;
    }


    #top .section03 .text01 {
      margin: 40px 0 0 0;
      font-weight: 700;
      font-size: 20px;
      line-height: 2.2em;
    }


    #top .section03 .block02 {
      width: 50%;
    }

    #top .section03 .box {
      display: block;
      padding: 50px 40px;
      border-top: 1px solid #000;
      position: relative;
      z-index: 444;
    }

      #top .section03 .box:last-child {
        border-bottom: 1px solid #000;
      }

      #top .section03 .box:hover {
        background: #00b2bc;
        color: #f1f1f1;
      }

      #top .section03 .box-ttl01 {
        font-family: 'Jost', sans-serif;
        font-weight: 600;
        font-size: 62px;
        line-height: 1.0em;
        letter-spacing: 0.04em;
      }


      #top .section03 .box-text01 {
        margin: 10px 0 0 0;
        font-weight: 500;
        font-size: 17px;
        line-height: 1.8em;
      }


      #top .section03 .box .btn-area {
        position: absolute;
        bottom: 30px;
        right: 30px;
      }

        #top .section03 .box:hover .main-btn02 {
          background: #f1f1f1;
        }

          #top .section03 .box:hover .main-btn02::before {
            margin: -5px -5px 0 0;
            width: 6px;
            height: 6px;
            border-top: 2px solid #00b2bc;
            border-right: 2px solid #00b2bc;
          }

          #top .section03 .box:hover .main-btn02::after {
            margin: -6px -1px 0 0;
            width: 2px;
            height: 12px;
            background: #00b2bc;
          }


    #top .section03 .bg-text-area01 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100vw;
      height: 100%;
      z-index: 222;
    }

      #top .section03 .vertical-text01 {
        position: absolute;
        top: 120px;
        left: -40px;
      }


    #top .section03 .bg-text-area02 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 1280px;
      height: 100%;
    }


@media screen and (max-width: 1620px) {
    #top .section03 .bg-text-area01 {
      width: 1620px;
    }
}

@media screen and (max-width: 1280px) {
  
#top .section03 {
  padding: 15.20vw 0 0 0;
}

  #top .section03 .block01 {
    padding: 0 0 0 3.1vw;
  }
  
  #top .section03 .text01 {
    margin: 3.40vw 0 0 0;
    font-size: 1.57vw;
  }

    #top .section03 .box {
      padding: 4.20vw 3.1vw;
    }

      #top .section03 .box-ttl01 {
        font-size: 4.80vw;
      }

      #top .section03 .box-text01 {
        margin: 0.80vw 0 0 0;
        font-size: 1.32vw;
      }

      #top .section03 .box .btn-area {
        bottom: 2.40vw;
        right: 2.40vw;
      }
}


@media screen and (max-width: 768px) {
  
#top .section03 {
  padding: 30.0vw 0 0 0;
}
  
  #top .section03 .inner {
    max-width: inherit;
    padding: 0;
    display: block;
  }
  
  

    #top .section03 .block01 {
      margin: auto;
      max-width:inherit;
      padding: 0 5.2vw;
      position: relative;
      z-index: 333;
      width: inherit;
    }


      #top .section03 .text01 {
        margin: 8.0vw 0 0 0;
        padding: 0 0 0 18vw;
        font-size: 4.00vw;
        line-height: 1.9em;
        text-align: justify;
      }


    #top .section03 .block02 {
      margin: 14.00vw 0 0 0;
      width: inherit;
    }

    #top .section03 .box {
      padding: 5.20vw 5.2vw;
    }

      #top .section03 .box:last-child {
        border-bottom: 1px solid #000;
      }

      #top .section03 .box:hover {
        background: #00b2bc;
        color: #f1f1f1;
      }

      #top .section03 .box-ttl01 {
        font-size: 9.00vw;
      }

      #top .section03 .box-text01 {
        margin: 2.20vw 0 0 0;
        font-size: 3.70vw;
        line-height: 1.6em;
        text-align: justify;
      }


      #top .section03 .box .btn-area {
        bottom: inherit;
        top: 4.20vw;
        right: 5.20vw;
      }



    #top .section03 .bg-text-area01 {
      width: 100vw;
    }

      #top .section03 .vertical-text01 {
        top: 66.00vw;
        left: -4.60vw;
        font-size: 18.00vw;
      }

  
      #top .section03 .bg-text01{
        position: absolute;
        right: -4.00vw;
        top: 30.00vw;
        width: 26.00vw;
      }

      #top .section03 .marquee-block01{
        position: absolute;
        top: 124.0vw;
      }
  
}

/*----------------------------------------------------------------------------------------------------

  section04

----------------------------------------------------------------------------------------------------*/

#top .section04 {
  margin: 80px 0 0 0;
  padding: 360px 0 0 0;
  position: relative;
}

  #top .section04 .inner {
    margin: auto;
    display: flex;
    position: relative;
    z-index: 333;
  }

  #top .section04 .block01 {
    width: calc(50% - 100px);
    height: 800px;
    background: #00b2bc;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

    #top .section04 .block01 .text01 span{
      font-family: 'Jost', sans-serif;
      font-weight: 600;
      font-size: 76px;
      line-height: 1.1em;
      letter-spacing: 0.04em;
    }

    #top .section04 .block01 .text02 {
      margin: 60px 0 0 0;
      text-align: right;
    }

      #top .section04 .block01 .text02 span{
        font-size: 26px;
        font-weight: 500;
        line-height: 1.1em;
      }



  #top .section04 .block02 {
    padding: 0 40px 0 0;
    width: calc(50% + 100px);
    max-width: 740px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

    #top .section04 .block02 .block-inner{
      width: fit-content;
    }



    #top .section04 .block02 .text01 {
      margin: 40px 0 0 0;
      font-weight: 700;
      font-size: 20px;
      line-height: 2.2em;
    }


    #top .section04 .block02 .btn-area {
      position: absolute;
      bottom: 0;
      right: 40px;
      z-index: 333;
    }


    #top .section04 .bg-text-area01 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100%;
      z-index: 113;
    }

      #top .section04 .bg-text-area01 .vertical-text01{
        position: absolute;
        top: 340px;
        right: -40px;
      }

    #top .section04 .bg-text-area02 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 100%;
      max-width: 1280px;
      height: 100%;
      z-index: 112;
    }

      #top .section04 .bg-text-area02 .bg-text01 {
        position: absolute;
        top: 5.6%;
        left: -74%;
        width: 186%;
      }


    #top .section04 .bg-text-area03 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100%;
      z-index: 111;
    }


@media screen and (max-width: 1620px) {
    #top .section04 .bg-text-area01 {
      width: 1620px;
    }
}

@media screen and (max-width: 1280px) {
  
#top .section04 {
  margin: 6.00vw 0 0 0;
  padding: 26.20vw 0 0 0;
}
  
  #top .section04 .block01 {
    width: 42.50vw;
    height: 60.00vw;
  }
  
    #top .section04 .block01 .text01 span{
      font-size: 5.90vw;
    }

    #top .section04 .block01 .text02 {
      margin: 4.60vw 0 0 0;
    }

      #top .section04 .block01 .text02 span{
        font-size: 2.00vw;
      }
  

  #top .section04 .block02 {
    padding: 0 3.1vw 0 0;
    width: 57.50vw;
  }  

    #top .section04 .block02 .text01 {
      margin: 3.40vw 0 0 0;
      font-size: 1.57vw;
    }
  
    #top .section04 .block02 .btn-area {
      right: 3.1vw;
    }
  
  
}

@media screen and (max-width: 768px) {
  
#top .section04 {
  margin: 14.00vw 0 0 0;
  padding: 39.00vw 0 12.00vw 0;
}

  #top .section04 .inner {
    display: block;
  }

  #top .section04 .block01 {
    width: 90vw;
    height: inherit;
    display: flex;
    padding: 6.00vw 0;
  }

    #top .section04 .block01 .text01 span{
      font-size: 7.80vw;
      line-height: 1.1em;
    }

    #top .section04 .block01 .text02 {
      margin: 2.00vw 0 0 0;
      text-align: right;
    }

      #top .section04 .block01 .text02 span{
        margin: 0 -0.90vw 0 0;
        font-size: 3.40vw;
        line-height: 1.1em;
      }



  #top .section04 .block02 {
    padding: 12.00vw 5.2vw 0 5.2vw;
    width: inherit;
    max-width: inherit;
    display: block;
  }

    #top .section04 .block02 .text01 {
      margin: 8.0vw 0 0 0;
      padding: 0 0 0 18vw;
      font-size: 4.00vw;
      line-height: 1.9em;
      text-align: justify;
    }

  
    #top .section04 .block02 .btn-area {
      bottom: 0;
      right: inherit;
      left: 5.2vw;
    }

      #top .section04 .bg-text-area01 .vertical-text01{
        top: 127.00vw;
        right: inherit;
        left: -2.20vw;
        font-size: 16.00vw;
      }
  

    #top .section04 .bg-text-area02 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 100%;
      max-width: 1280px;
      height: 100%;
      z-index: 112;
    }

      #top .section04 .bg-text-area02 .bg-text01 {
        position: absolute;
        top: 16.00vw;
        left: -72%;
        width: 180%;
      }


    #top .section04 .bg-text-area03 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100%;
      z-index: 111;
    }
  
      #top .section04 .bg-text-area03 .marquee-text04{
        margin: 18.00vw 0 0 0;
      }
  
      #top .section04 .bg-text-area03 .marquee-block02 {
        position: absolute;
        bottom: 0;
      }

}

/*----------------------------------------------------------------------------------------------------

  section05

----------------------------------------------------------------------------------------------------*/

#top .section05 {
  margin: 140px 0 0 0;
  padding: 140px 0 0 0;
  position: relative;
}

  #top .section05 .ttl-area {
    margin: auto;
    max-width: 1280px;
    padding: 0 40px;
  }

    #top .section05 .ttl-area .ttl-main01 {
      text-align: center;
    }


    #top .section05 .section-main {
      position: relative;
      margin: 100px auto 0;
      max-width: 1280px;
      padding: 0 40px;
      z-index: 333;
    }

      #top .section05 .section-main .text01{
        font-weight: 700;
        font-size: 22px;
        line-height: 2.2em;
      }

      #top .section05 .section-main .btn-area01{
        position: absolute;
        right: 40px;
        bottom: 0;
      }

    #top .section05 .bg-text-area01 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 100%;
      max-width: 1280px;
      height: 100%;
      z-index: 113;
    }

      #top .section05 .bg-text01 {
        position: absolute;
        top: 3.0%;
        left: -28%;
        width: 230%;
      }


    #top .section05 .bg-text-area02 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      z-index: 111;
    }

      #top .section05 .marquee-block02{
        position: absolute;
        left: 0;
        bottom: -6%;
      }

@media screen and (max-width: 1280px) {
  
#top .section05 {
  margin: 10.20vw 0 0 0;
  padding: 12.00vw 0 0 0;
}

  #top .section05 .ttl-area {
    max-width: 1280px;
    padding: 0 3.1vw;
  }
  
    #top .section05 .section-main {
      margin: 8.0vw auto 0;
      padding: 0 3.1vw;
    }

      #top .section05 .section-main .text01{
        font-size: 1.80vw;
      }
  
      #top .section05 .section-main .btn-area01{
        right: 3.1vw;
      }

}

@media screen and (max-width: 768px) {
  
#top .section05 {
  margin: 16.00vw 0 0 0;
  padding: 24.00vw 0 5.0vw 0;
}
  
  #top .section05 .ttl-area {
    max-width: inherit;
    padding: 0 5.2vw;
  }
  
  #top .section05 .ttl-area .ttl-main {
    margin: 0 0 0 0;
    text-align: left;
    font-size: 7.50vw;
  }
  
  #top .section05 .ttl-area .ttl-sub02 {
    text-align: left;
    font-size: 14.20vw;
  }  

  
    #top .section05 .section-main {
      margin: 8.0vw auto 0;
      padding: 0 5.2vw;
      display: block;
    }

    #top .section05 .section-main .text01 {
      margin: 8.0vw 0 0 0;
      padding: 0 0 0 18vw;
      font-size: 4.00vw;
      line-height: 1.9em;
      text-align: justify;
    }
  
  
    #top .section05 .section-main .btn-area {
      bottom: 0;
      right: inherit;
      left: 5.2vw;
    }
  
      #top .section05 .bg-text01 {
        top: 11.0vw;
        left: -9.0vw;
        width: 240.0vw;
      }
  
  
}