@charset "UTF-8";
@import "inner.css";
/* ---------------------------------------------------------
パーツ
--------------------------------------------------------- */
.btn_iti {
    border: 1px solid;
    padding: 1em;
    width: 15em;
    display: block;
    text-align: center;
    margin: 0 auto;
}
.mb7em {
  margin-bottom: 7em;
}
.pb80px {
padding-bottom: 80px;
}

/* ---------------------------------------------------------
MV
--------------------------------------------------------- */

.mvArea {
        position: relative;
        /* height: 770px; */
}
video#video {
    width: 100%;
    /* height: 770px;
    overflow: hidden; */
}
.mvtxtArea {
  position: absolute;
      background: #ff0d0082;
      color: #fff;
      font-size: 20px;
      letter-spacing: .5em;
      line-height: 2.67;
      top: 236px;
      padding: 10px 0;
      padding-right: 1em;
      padding-left: 3em;
}
.mvtxtArea img {
      width: 30vw;
}

.mvimg1 {
  position: absolute;
      top: 4vw;
      width: 71vw;
      left: calc(50% - 27vw);
}
.mvimg2 {
  position: absolute;
      width: 140px;
      height: auto;
      right: 10px;
      top: 10px;
}
.mvimg3 {
    width: 60px;
    position: absolute;
    bottom: 40px;
    left: calc(50% - 30px);
}
/* ---------------------------------------------------------
h2
--------------------------------------------------------- */

.h2area {
  position: relative;
  background: #333333;
  border-bottom: 33px solid #F36159;
  padding: 10px 80px;
  margin-left: -20px;
  margin-right: -20px;
    margin-bottom: 54px;
}
.h2area:before {
  position: absolute;
  content: "";
  bottom: -63px;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #f36159;
  left: calc(50% - 30px);
}
.h2area_in {
    position: relative;
        background: #00ff5a96;
            padding: 10px 0;
            margin-bottom: -30px;
}
.sec01 .h2area_in {background: url(../../img/top/h2_sec01.jpg) no-repeat top center / cover;}
.sec02 .h2area_in {background: url(../../img/top/h2_sec02.jpg) no-repeat top center / cover;}

.h2img1 {
  position: absolute;
      width: auto;
      height: 80px;
      bottom: 15px;
      left: 10px;
      -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, .5))
}
.h2img2 {
  height: 182px;
  width: auto;
  display: block;
  margin: 0px 10px 0px auto;
}

.pro_list {
    max-width: 980px;
    margin: 0 auto;
}
/* ---------------------------------------------------------
h2
--------------------------------------------------------- */
.sec03 {
      padding-top: 80px;
      position: relative;
}
.sec03:before {
  position: absolute;
  content: "";
  top: -30px;
  left: 0;
  width: 370px;
  height: 240px;
  background: url(../../img/top/sec3_dou.png) no-repeat center/contain;
  z-index: -1;

}

.sec03 h2 {
    margin-bottom: 2.3em;
}
.sec03 h2 img{
  height: 70px;
width: auto;
display: block;
margin: 0 auto;
}

.sec03pro_list {
    display: flex;
    /* padding: 0 30px; */
}
.sec03pro_list .pro_item {
  width: 20%;
  position: relative;
}
.sec03pro_list p {
  padding: 0 1em;
}

.sec03pro_list .pro_item:nth-child(1):before {
position: absolute;
content: "";
top: -25px;
left: calc(50% - 25px);
width: 50px;
height: 50px;
background: url(../../img/top/crown1.png) no-repeat center/contain;
}
.sec03pro_list .pro_item:nth-child(2):before {
position: absolute;
content: "";
top: -25px;
left: calc(50% - 25px);
width: 50px;
height: 50px;
background: url(../../img/top/crown2.png) no-repeat center/contain;
}
.sec03pro_list .pro_item:nth-child(3):before {
position: absolute;
content: "";
top: -25px;
left: calc(50% - 25px);
width: 50px;
height: 50px;
background: url(../../img/top/crown3.png) no-repeat center/contain;
}



.box1 {
  position: relative;
  height: 600px;
background: url(../../img/top/sec4_01.jpg) no-repeat right / cover;
}
.box2 {
  position: relative;
  height: 300px;
  background: url(../../img/top/sec4_02.jpg) no-repeat center / cover;
}
.box3 {
  position: relative;
  height: 300px;
  background: url(../../img/top/sec4_03.jpg) no-repeat center / cover;
}
.box1 a,
.box2 a,
.box3 a {
  display: block;
  width: 100%;
  height: 100%;
}
.sec04 h3 {
  width: 130px;
      height: 130px;
      border-radius: 0 0 0 150px;
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      color: #fff;
      line-height: 2;
      letter-spacing: .3em;
      padding-left: 1em;
      padding-top: 1em;
      text-align: right;
}
.sec04 .box1 h3 {
  background: #DCB200;
}
.sec04 .box2 h3 {
  background: #3745FF;
}
.sec04 .box3 h3 {
  background: #821A16;
    border-radius: 150px 0 0 0;
    right: 0;
    top: auto;
    bottom: 0;
        padding-top: 2.5em;
}
.box3img {
    position: absolute;
    height: 60px;
    width: auto;
    right: 20px;
    top: 20px;
}

.sec05 {
  /* background: url(../../img/top/sec5_bg.jpg) no-repeat top center / cover; */
color: #fff;
    line-height: 1.7;
    padding-top: 10px;
background: #333333;
}
.sec05 .row {
  align-items: flex-start;
}
.sec05 .row .l,.sec05 .row .r {
    width: 47%;
}
.sec05 h4 {
  font-size: 1.3em;
  margin-top: 3em;
  margin-bottom: 1em;
  border-left: 6px solid;
  padding: 0 .7em;
}
.sec05 dl {
    display: flex;
}
.sec05 dt {
  width: 6em;
text-align: right;
margin-right: 1em;
}
.sec05 b {
    line-height: 2;
}
.sec05 .r>a {
  font-size: 1.5em;
text-align: center;
display: block;
border: 1px solid;
padding: 1em;
margin-top: 3em;
}

@media screen and (max-width: 750px) {
  .pro_list {
    margin-right: -3%;
}
  .mvtxtArea {
      font-size: 12px;
      top: 40px;
padding: 1em;
  }
  .mvimg2 {
      width: 59px;
      /* right: 0;
      top: -16px; */
  }
  .h2area {
      padding: 10px 20px;
  }
  .h2img1 {
      height: 50px;
  }
  .h2img2 {
    height: 100px;
}
  .sec03 h2 img {
    height: auto;
    width: 80vw;
}
  .sec03:before {
      top: 0px;
      width: 200px;
      height: 140px;
      z-index: -1;
  }
  .sec03pro_list {
    padding: 0 20px;
    margin-right: 0;
      flex-wrap: wrap;
      justify-content: space-between;
  }
  .sec03pro_list .pro_item {
    width: 47%;
}
.box1,.box2,.box3 {
    height: 240px;
}
.sec05 .row .l, .sec05 .row .r {
    width: 100%;
}
.sec05 .r>a {
    font-size: 1em;
}
.mvtxtArea img {
    width: 34vw;
}
.sec04 h3 {
    padding-top: 2em;
}
}
/* ---------------------------------------------------------
追記
--------------------------------------------------------- */
.btn_tiorikotira.mb7em {
    display: block;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.sec03pro_list .maker {
    height: 4em;
}
.sec02 .maker {
    height: 3em;
        line-height: 1.3;
}