@charset "UTF-8";
html{
  font-size: 62.5%;
}
body{
  margin: 0;
  padding: 0;

  font-family:YakuHanJP , Noto Sans JP, "Hiragino Kaku Gothic ProN",'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.8333;
  color: #000;
  overflow-x: hidden;
}
*{
  box-sizing: border-box;
}

a {
  opacity: 1;
  transition: all .5s ease;
}

a:hover {
  opacity: .7;
}

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
figure {
  margin: 0 auto;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

ul,
ol,
dl {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

p,
li,
dt,
dd {

  margin: 0;
  padding: 0;
}

a {
  background: transparent;
  color: #000;
  text-decoration: none;
}

a img {
  display: inline-block;
}

a:active,
a:hover {
  outline: 0;
}

input[type='image']:focus {
  outline: 0;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
  display: block;
  vertical-align: bottom;
  font-size: 0;
  line-height: 0;
  margin: 0;
}

button {
  border: none;
  outline: 0;
  cursor: pointer;
}

/* clearfix */
.cf:before,
.cf:after {
  content: '';
  display: table;
}

.cf:after {
  clear: both;
}

.pce {
  display: block;
}

.spe {
  display: none;
}




/*============================
#main_content general
============================*/
#main_content {
  width:100%;
  margin: 0 auto;
  position: relative;
  padding-top: 90px;
  display: block;
}
#main_content .fv {

}

#main_content .inner{
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/*============================
#main_content fv
============================*/
.fv_inner{
  height: 676px;
  background-image: url('../img/bg_fv_pc.jpg');
  background-repeat: repeat-x;
  background-position: center top;
  position: relative;
  overflow: hidden;
}
.fv_inner h1 {
  padding-top:20px;
}
.fv_inner h1 img{
  display: block;
  margin:0 auto;

}

.fv_bottom{
  position: absolute;
  width: 821px;
  bottom: 0;
  left:50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

/* point */

.fv .point{
  background-image: url('../img/bg_main_bottom_pc.jpg');
  background-repeat: repeat;
  background-position: center top;
  padding: 80px 0 0;
  position: relative;
}

@media screen and (max-width: 1000px) {
.fv .point{
  background-size: cover;
  }
}


.fv .point:after{
  content: "";
  background-image: url('../img/bg_main_bottom_grass_pc.png');
  bottom: 0;
  padding-top: 90px;
  display: block;
  background-repeat: repeat-x;
}

.fv .point p{
  display: inline-block;
  margin: 0 auto 5%;
  width: 49%;
}

.fv .point h2 img{
  display: block;
  margin: 0 auto 2%;
  width: 23%;
}

.fv .point ul li{

}


#main_content .fixed_bg{
  position: relative;
}

#main_content .fixed_bg .fixed_bgimg{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}
#main_content .fixed_bg .fixed_bgimg.spe{
  display: none;
}

#main_content .fixed_bg .fixed_bgimg.is-fixed{
  position: fixed;
  top: 0;
  margin: auto;
  z-index: 1;
}

#main_content .fv ul{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}
#main_content .fv ul li{
  width: 50%;
}
#main_content .fv ul li:nth-of-type(3){
  display: block;
  margin: 1% auto 0;
}


/*============================
accordion
============================*/

#main_content .machine  {
  padding: 105px 0 100px;
  position: relative;
}


#main_content section{
  position: relative;
  z-index: 10;
}


/*============================
accordion
============================*/
/* point */
.point .accordion_one{
  width: 490px;
  margin: 0 auto 4.8%;
  position: relative;
  z-index: 5;
}

.point .accordion_header{
  background-color: #a0237f;
  color: #FFF;
  font-size: 2.4rem;
  font-weight: bold;
  padding: 2%;
  cursor: pointer;
  position: relative;
}

.point .accordion_header .i_box{
  position: absolute;
  content: "";
  display: block;
  width: 5.5102%;
  padding-top:5.5102%;
  position: absolute;
  background-image: url('../img/icon_acc_bar.png');
  background-size: cover;
  z-index: 10;
  right: 3%;
  top: 25%;
}

.point .accordion_header .i_box:before{
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  padding-top:100%;
  position: absolute;
  background-image: url('../img/icon_acc_bar.png');
  background-size: cover;
  z-index: 10;
  right:0;
  top: 0;
  transform: rotate(90deg);
  transition: all 0.5s ease;
}

.point .accordion_header.open .i_box:before{
    transform: rotate(180deg);
}

.point .accordion_inner{
  background-color: #FFF;
  font-size: 1.8rem;
  font-weight: normal;
  padding: 3%;
  display: none;
}

.point .accordion_inner p{
  width: 100%;
  margin: 0;
  text-align: justify;
}

/* machine */

.machine .accordion_one{
  max-width: 764px;
  width: 93.0667%;
  margin: 0 auto 50px;
  position: relative;
}
.machine .accordion_one img{
  max-width: auto;
  max-width: initial;
  width: 100%;
}


.machine .accordion_one:after{
  content: "";
  display: block;
  width: 100%;
  padding-top:15px;
  position: absolute;
  background-image: url('../img/acc_bottom_pc.png');
  background-size: cover;
}

.machine .accordion_inner{

  display: none;
  background-image: url('../img/bg_acc_pc.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding:0 1.8325%;
  overflow: hidden;
}

.machine .accordion_inner .acc_wrap{
  overflow: hidden;
}


 .machine .accordion_one .accordion_header {
  cursor: pointer;
 }

 .machine .accordion_one .accordion_header .i_box {
  position: absolute;
  display: block;
  background-image: url('../img/icon_acc_arrow.png');
    transform: rotate(180deg);
  background-size: contain;
  width: 53px;
  padding-top: 54px;
  bottom: -15px;
  right: 0;

  z-index: 10000;
  cursor: pointer;
 }
 .machine .accordion_one .accordion_header.open .i_box {
  transform: rotate(0deg);

 }
 .machine .accordion_one .yt_wrap{
  width: 62.5%;
  margin: 0 auto 3%;
 }
  .machine .accordion_one .yt_wrap.mb{
    margin-bottom: 7%;
  }

 .machine .accordion_one .ytube {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}


.machine .accordion_one .ytube  iframe {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }

.machine .accordion_one .ytube   a {
      /* lityを動かすためにiframeを覆う */
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }


/*============================
animation
============================*/

/*----- フェードイン -----*/
.inviewfadeIn {
  opacity: 0;
  transition: .8s;
}

.fadeIn {
  opacity: 1.0;
}

/*----- 左からフェードイン -----*/
.inviewfadeInLeft {
  opacity: 0;
  transition: .8s;
  transform: translate(-100px, 0);
  -webkit-transform: translate(-100px, 0);

}
.inviewfadeInLeft_d2 li{
  opacity: 0;
  transition: .8s;
  transform: translate(-100px, 0);
  -webkit-transform: translate(-100px, 0);

}

.fadeInLeft {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

li.fadeInLeft{
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/*----- 上へスライド -----*/
.inviewUp {
  transform: translate(0, 40px);
  -webkit-transform: translate(0, 40px);
  transition: .8s;
}

.Up {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/*----- ズームイン -----*/
.inviewzoomIn {
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transition: .8s;
}

.zoomIn {
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
}

/*----- フェードインしながら上へスライド -----*/
.inviewfadeInUp {
  opacity: 0;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
  transition: .8s;
}

.fadeInUp {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/*----- フェードインしながら↓へスライド -----*/
.inviewfadeInDown {
  opacity: 0;
  transform: translate(0, -100px);
  -webkit-transform: translate(0, -100px);
  transition: .8s;
}

.fadeInDown {
  opacity: 1.0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/*============================
SP
============================*/

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

  .pce {
    display: none;
  }

  .spe {
    display: block;
  }



/*============================
#main_content general
============================*/
#main_content {
  width:100%;
  margin: 0 auto;
  position: relative;
  padding-top: 65px;
}
#main_content .fv {

}

#main_content .inner{
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/*============================
#main_content fv
============================*/
.fv_inner{
  height: auto;
  background-image: url('../img/bg_fv_sp.jpg');
  background-repeat: repeat-x;
  background-position: center top;
  position: relative;
  background-size: cover;
}

.fv_inner h1 {
  padding-top:2%;
}
.fv_inner h1 img{
  display: block;
  margin:0 auto;
  padding-bottom: 12%;
}

.fv_bottom{
  position: absolute;
  width: 55.4667%;
  bottom: 0;
  left:50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

/* point */

.fv .point{
  background-image: url('../img/bg_main_bottom_sp.jpg');
  background-repeat: repeat;
  background-position: center top;
  padding: 7% 0 9%;
  position: relative;
}
.fv .point:after{
  content: "";
  background-image: url('../img/bg_main_bottom_grass_sp.png');
  bottom: 0;
  background-size: contain;
  padding-top: 17.2%;
  display: block;
  background-repeat: repeat-x;
  position: absolute;
  width: 100%;
  left: 0;
}

.fv .point .grass_left{
  position: absolute;
  left: 0;
  top:-5%;
  width: 19.0667%;
}

.fv .point .grass_right{
  position: absolute;
  right: 0;
  top:-5%;
  width: 17.4667%;
}



.fv .point p{
  display: inline-block;
  margin: 0 auto 5%;
  width: 76%;
}

.fv .point h2 img{
  display: block;
  margin: 0 auto 2%;
  width: 43.2%;
}

.fv .point ul li{

}


#main_content .fixed_bg{
  position: relative;
}

#main_content .fixed_bg .fixed_bgimg{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}
#main_content .fixed_bg .fixed_bgimg.spe{
  display: block;
}

#main_content .fixed_bg .fixed_bgimg.is-fixed{
  position: fixed;
  top: 0;
  margin: auto;
  z-index: 1;
}

#main_content .fv ul{
display: block;
margin: 0 auto

}
#main_content .fv ul li{
  width: 100%;
  display: block;
  margin: 0 auto -3%;
}
#main_content .fv ul li img{
  width: 100%;
}


  .machine .accordion_one .yt_wrap{
    width: 85.0746%;
    margin-bottom: 5%;
  }

  .machine .accordion_one .yt_wrap.mb{
    margin-bottom: 10%;
  }

 .machine .accordion_one .ytube {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

/*============================
accordion
============================*/

#main_content .machine  {
  padding: 6.6667% 0 100px;
  position: relative;
}


#main_content section{
  position: relative;
  z-index: 10;
}


/*============================
accordion
============================*/
/* point */
.point .accordion_one{
  width: 76%;
  margin: 0 auto 4.8%;
}

.point .accordion_header{
  background-color: #a0237f;
  color: #FFF;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 2%;
  cursor: pointer;
  position: relative;
}

.point .accordion_header .i_box{
  position: absolute;
  content: "";
  display: block;
  width: 5.5102%;
  padding-top:5.5102%;
  position: absolute;
  background-image: url('../img/icon_acc_bar.png');
  background-size: cover;
  z-index: 10;
  right: 3%;
  top: 32%;
}

.point .accordion_header .i_box:before{
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  padding-top:100%;
  position: absolute;
  background-image: url('../img/icon_acc_bar.png');
  background-size: cover;
  z-index: 10;
  right:0;
  top: 0;
  transform: rotate(90deg);
  transition: all 0.5s ease;
}

.point .accordion_header.open .i_box:before{
    transform: rotate(180deg);
}

.point .accordion_inner{
  background-color: #FFF;
  font-size: 1.5rem;
  font-weight: normal;
  padding: 3%;
  display: none;
}

.point .accordion_inner p{
  width: 100%;
  margin: 0;

}

/* machine */

.machine .accordion_one{
  max-width: 764px;
  width: 95.3333%;
  margin: 0 auto 10%;
  position: relative;
}


.machine .accordion_one:after{
  content: "";
  display: block;
  width: 100%;
  padding-top:16px;
  background-repeat: no-repeat;
  position: absolute;
  background-image: url('../img/acc_bottom_sp.png');
  background-size: 100% auto;
}

.machine .accordion_inner{

  display: none;
  background-image: url('../img/bg_acc_sp.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding:0 2.8667%;
  overflow: hidden;
}

.machine .accordion_inner .acc_wrap{
  overflow: hidden;
}


 .machine .accordion_one .accordion_header {
  cursor: pointer;
 }

 .machine .accordion_one .accordion_header .i_box {
  position: absolute;
  display: block;
  background-image: url('../img/icon_acc_arrow.png');
    transform: rotate(180deg);
  background-size: contain;
  background-position: center bottom;
  width: 30px;
  padding-top: 30px;
  bottom: -15px;
  right: 0;

  z-index: 100;
  cursor: pointer;
 }
 .machine .accordion_one .accordion_header.open .i_box {
  transform: rotate(0deg);
  bottom: -15px;
 }
}
@media screen and (max-width: 600px){
 .machine .accordion_one .accordion_header .i_box {
  bottom: -12px;
 }
 .machine .accordion_one .accordion_header.open .i_box {
  bottom: -12px;
 }
}


@media screen and (max-width: 450px){
 .machine .accordion_one .accordion_header .i_box {
  bottom: -9px;
 }
 .machine .accordion_one .accordion_header.open .i_box {
  bottom: -9px;
 }
}