@charset "utf-8";

/*=====================
  TOP
=====================*/
body#top {
}

/*  contentWrap
=====================*/
#top #contentWrap {
/*  background:repeating-linear-gradient(135deg, #d8effc 0, #d8effc 3px, #fff 3px, #fff 6px);*/
}
.container {

}

#mainVisual {
  /* background: url(../img/mv_bg.jpg) no-repeat bottom left;
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 150vh; */
  /* padding: 200vh 0 0; */
  position: relative;
}


#mainVisual h2 {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);

  max-width: 150px;
  width:94%;
  margin: 0 auto;
  z-index: 3;
}
#mainVisual figure {
  /* position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%); */

  width: 100%;
  margin: 0 auto;
}


.sec01 {
  padding: 150px 0;
  background: #3B564C;
}

.teiki {
  padding: 0 0 96px;
}

.access_List {
  display: flex;
  justify-content:space-between;

  max-width: 750px;
  margin:0 auto 80px;
}
.access_List li {
  width:27.41622888%;
}
.access_List li img {
  max-height: 230px;
}

.teiki02 {
  max-width: 900px;
  border-top:1px solid #B79E6C;
  border-bottom:1px solid #B79E6C;
  padding: 20px 0 40px;
  margin:0 auto 80px;
  text-align: center;
}
.teiki02 p {
  color:#B79E6C;
  font-size: clamp( 16px, calc( 8.88888888888889px + 0.9259259259259258vw ), 21px );
  line-height: 1.6;
  letter-spacing: 0.1em;
}
.teiki02 .copy {
  font-size: clamp( 30px, calc( -30.444444444444443px + 7.87037037037037vw ), 66px );
  letter-spacing: 0.12em;
}


.sec02 {
  background: url(../img/concept_bg.jpg) no-repeat center top;
  background-size: cover;
  overflow: hidden;
  padding: 0 0 200vh;
  position: relative;
}
.sec02 .txt_box {
  position: absolute;
  top: 6.42398287%;
  left: 50%;
  transform: translateX(-50%);
  width:90%;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-feature-settings: "palt";
}
.sec02 .txt_box h3 {
  font-size: 300%;
  letter-spacing: 0.1em;
  line-height: 1;
  padding: 0 0 1.79166667em;
}
.sec02 .txt_box p {
  font-size: clamp( 15px, calc( 9.666666666666668px + 0.6944444444444444vw ), 18px );
  line-height: 2.2;
  letter-spacing: 0.1em;
}
.sec02 .txt_box p + p {
  margin-top: 1em;
}

.sec02 .txt_box02 {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);

  width:50%;
  margin: 0 auto;
  text-align: center;
}
.sec02 .txt_box02 p {
  font-size: clamp( 20px, calc( -4.888888888888886px + 3.2407407407407405vw ), 34px );
  line-height: 2.5;
  letter-spacing: 0.1em;
}


.sec03 {
  padding: 50px 0 100px;
  margin: 0 auto;
}
.sec03 .merit_box {

}
.sec03 .merit_box .merit_ttl {
  background: #dadddb;
  padding: 10px 0;
  margin: 0 auto 30px;
  text-align: center;

  font-size: 30px;
  letter-spacing: 0.15em;
  position: relative;
}
.sec03 .merit_box .merit_ttl::before,
.sec03 .merit_box .merit_ttl::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.sec03 .merit_box .merit_ttl::before {
  top: 0;
  left: 0;
  border-width: 68px 68px 0 0;
  border-color: #3d5a47 transparent transparent transparent;
}
.sec03 .merit_box .merit_ttl::after {
  bottom: 0;
  right: 0;
  border-width: 0 0 68px 68px;
  border-color: transparent transparent #3d5a47 transparent;
}
.sec03 .merit_box .merit_ttl h4 {
  font-size: 30px;
  letter-spacing: 0.15em;
}
.sec03 .merit_box p {
  font-size: 16px;
  letter-spacing: 0.15em;
}
.sec03 .merit_box .lead {
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.15em;
  padding: 0 0 30px;
}
.sec03 .merit_box ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px 3%;
}
.sec03 .merit_box ul li {
  width: calc((100% - 6%) / 3);
}


.conv_entry {
  text-align: center;
  margin: 40px auto 0;
}
.conv_entry a {
  display: inline-block;
  width: 416px;
  text-align: center;
  box-sizing: border-box;
  font-size: 18px;
  letter-spacing: 0.1em;
  padding: 18px 0px 18px 25px;
  color: #fff;
  background: #0362A1;
  background: linear-gradient(90deg, rgba(3, 98, 161, 1) 0%, rgba(21, 50, 100, 1) 100%);
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transition: .3s;
}
.conv_entry a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  background: url(../../common/img/icon_mail.svg) no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
}
.conv_entry a:hover {
  opacity: .5;
  transition: .3s;
}




/*
.captionArea__text {
  color: #fff;
}
*/
/*
[id^="STYLE0"] {
padding-top: 80px;
margin-top: -80px;
} */


/*-----------------------------
調整
-----------------------------*/
@media only screen and (min-width: 1024px) and (max-width: 1200px) {



}

/*-----------------------------
tab横のみ
-----------------------------*/
@media only screen and (min-width: 1024px) and (max-width: 1200px) {

  .newstyleWrap {
    padding: 150px 0 50px;
  }

}


/*-----------------------------
tab
-----------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1023px)  {

  /* #mainVisual {
    background: url(../img/mv_bg_sp.jpg) no-repeat bottom center;
    background-size: cover;
    overflow: hidden;
    height:120vh;
    position: relative;
  } */
  #mainVisual h2 {
        position: absolute;
        top: 13%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 100%;
        width: 11%;
        margin: 0 auto;
  }

}

@media only screen and (min-width: 768px) and (max-width: 900px)  {


}


/*=============================
spから
=============================*/
@media only screen and (max-width: 767px) {

  #mainVisual {
    /* background: url(../img/mv_bg_sp.jpg) no-repeat bottom center;
    background-size: cover;
    overflow: hidden;
    height:75vh; */
    /* padding: 0 0 125%; */
    position: relative;
  }

  #mainVisual figure img {
    position: relative;
    z-index: 1;
  }
  #mainVisual h2 {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    width: calc(11% * 1.1);
    margin: 0 auto;
    z-index:3;
    filter: drop-shadow(0 0 0.2rem #000);
  }



  .sec01 {
    padding: 80px 0;
  }

  .teiki {
    padding: 0 0 40px;
    width:80%;
    margin: 0 auto;
  }

  .access_List {
    display: flex;
    justify-content:space-between;

    max-width: 100%;
    width:90%;
    margin:0 auto 40px;
  }
  .access_List li {
    width:32%;
  }
  .access_List li img {
    max-height: 200px;
    height:90%;
  }

  .teiki02 {
    max-width: 90%;
    padding: 15px 0 20px;
  }
  .teiki02 p {
    font-size: 14px;
  }
  .teiki02 .copy {
    font-size: 28px;
  }

  .sec02 {
    padding: 0 0 130vh;
    position: relative;
  }
  .sec02 .txt_box {
    position: absolute;
    width:90%;
    margin: 0 auto;
    text-align: center;
  }
  .sec02 .txt_box h3 {
    font-size: 130%;
    padding: 0 0 1.5em;
  }
  .sec02 .txt_box p {
    font-size: 12px;
    line-height: 2.0;
    letter-spacing: 0.1em;
  }
  .sec02 .txt_box p + p {
    margin-top: 0.5em;
  }

  .sec02 .txt_box02 {
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translateX(-50%);

    width:80%;
  }
  .sec02 .txt_box02 p {
    font-size: 13px;
    line-height: 1.8;
  }


  .sec03 {
    padding: 30px 0 60px;
    margin: 0 auto;
  }
  .sec03 .merit_box {

  }
  .sec03 .merit_box .merit_ttl {
    /* padding: 10px 0; */
    padding: 12px 40px;
    margin: 0 auto 20px;

    font-size: 20px;
  }
  .sec03 .merit_box .merit_ttl::before,
  .sec03 .merit_box .merit_ttl::after {
    border-width: 40px;
  }
  .sec03 .merit_box .merit_ttl::before {
    border-width: 40px 40px 0 0;
  }
  .sec03 .merit_box .merit_ttl::after {
    border-width: 0 0 40px 40px;
  }
  .sec03 .merit_box .merit_ttl h4 {
    font-size: 20px;
    letter-spacing: 0.1em;
  }
  .sec03 .merit_box p {
    font-size: 14px;
  }
  .sec03 .merit_box .lead {
    text-align: left;
    font-size: 14px;
    padding: 0 0 20px;
  }
  .sec03 .merit_box ul {
    flex-wrap: wrap;
  }
  .sec03 .merit_box ul li {
    width: 100%;
/*    margin-bottom: 20px;*/
  }



.conv_entry {
  margin: 20px auto 0;
}
  .conv_entry a {
    display: inline-block;
    width: 90%;
    font-size: 15px;
    padding: 18px 0px 18px 25px;
  }
  .conv_entry a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
  }




/* [id^="STYLE0"] {
padding-top: 80px;
margin-top: -80px;
} */

}