@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;
  overflow-x: hidden;
  display: block;
}
#main_content .fv {


}

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

/*============================
#main_content fv
============================*/
.fv_inner{

  background-image: url('../img/bg_fv_pc.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
  overflow: hidden;
  text-align: center;
}

@media screen and (min-width: 1920px) {
.fv_inner{
background-size: cover;
 background-position: center center;

}
}
@media screen and (max-width: 1000px){
.fv_inner{
background-size: cover;
background-position: center top;
  }
}
.fv_inner .fv_imgwrap{
  max-width: 1000px;
  margin: 0 auto;
  position: relative;

}
.fv_inner h1 {
 display: inline-block;
  width: 84.4%;
  text-align: center;
  margin: 4% auto 3%;
}

.fv_inner p{
  width: 67.6%;
  display: inline-block;
  text-align: center;
  padding-bottom: 30%;
}
.fv_bottom{
  position: absolute;
  width: 100%;
  max-width: 906px;
  bottom: -65px;
  left:-90px;
}

@media screen and (max-width: 1000px) {
.fv_inner .fv_imgwrap{
  height: 100%;
  }
}



/* point */

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

}

.fv .point:before,
.fv .point:after{
  content: "";
  display: block;
  background-repeat: repeat-x;
  background-image: url('../img/point_decoration_pc.png');
  background-position: center top;
  position: absolute;
  width: 4000px;
  padding-top: 108px;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.fv .point:before{
  top: -44px;
  left:50%;
}

.fv .point:after{
  bottom: -67px;
  left:50%;
}

@media screen and (max-width: 1000px) {
.fv_inner{
  height: 100%;
}
}



.fv .point p{

}

.fv .point h2 img{
  display: block;
  margin: 0 auto 0;
  width: 500px;
}

.fv .point ul li{

}
.fv .point .logo_box{
  position: relative;
  width: 490px;
  margin: 0 auto 20px;
  z-index: 10;
}


#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{
margin: 5px 0 0;
}
#main_content .fv ul li{
  width: 76.8%;
  margin: 0 auto;
}

#main_content .fv ul li:nth-of-type(1){
  margin-bottom: 1%;
}
#main_content .fv ul li:nth-of-type(2){
  margin-bottom: 1%;
}

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

#main_content .machine  {
  padding: 105px 0 50px;
  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 6%;
 }
  .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-position: center top;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-size: cover;
}

.fv_inner h1 {
  width: 95.0667%;
  margin: 4.4% auto 2.6667%;
}
.fv_inner h1 img{
  display: block;
  margin:0 auto;

}

.fv_inner p{
  width: 90.4%;
  padding-bottom: 80%;
}

.fv_bottom{
  position: absolute;
  width: 100%;
  bottom: 0;
  left:0;
}

/* point */

.fv .point{
  background-image: url('../img/bg_main_bottom_sp.png');
  background-repeat: repeat;
  background-position: center top;
  padding: 11% 0 9%;
  position: relative;
background-size: 7% 5%;
}
.fv .point:after{

}

.fv .point:before,
.fv .point:after{
  content: "";
  background-image: url('../img/bg_main_top_sp.png');
  padding-top: 32.9333%;
  background-size: contain;
  display: block;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
    left:0;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  background-image: url('../img/point_decoration_sp.png');
  width: 100%;
  padding-top: 15.7333%;

}
.fv .point:before{
  top: -4%;

}

.fv .point:after{
  bottom: -11%;
    transform: rotate(180deg);
      transform-origin: center top;
}


.fv .point p{
  display: inline-block;
  margin: 0 auto ;
  width: 76%;
}
.fv .point h2{
  width: 92%;
}
.fv .point h2 img{
  display: block;
  margin: 0 auto 0;
  width: 100%;
}

.fv .point ul li{

}

.fv .point .logo_box{
  position: relative;
  width: 76%;
  margin: 0 auto 7.7333%;
}

.fv .point .logo_box p{
  width: 100%;
}

#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:2% auto;

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


#main_content .fv ul li:nth-of-type(1){
  margin-bottom: 2%;
}
#main_content .fv ul li:nth-of-type(2){
  margin-bottom: 2%;
}



  .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 5%;
  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: 90.9333%;
  margin: 0 auto 5%;
  position: relative;
}


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

.machine .accordion_inner{

  display: none;
  background-image: url('../img/bg_acc_sp.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding:0 2%;
  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: -30px;
 }

@media screen and (max-width: 600px){
.machine .accordion_one:after{
  padding-top:10px;
  bottom: -10px;
  background-image: url('../img/acc_bottom_sp.png');
  background-size: 100% 100%;
}
 .machine .accordion_one .accordion_header .i_box {
  bottom: -10px;
 }
 .machine .accordion_one .accordion_header.open .i_box {
  bottom: -10px;
 }
}


@media screen and (max-width: 450px){
.machine .accordion_one:after{
  padding-top:8px;
  bottom: -8px;
  background-image: url('../img/acc_bottom_sp.png');
  background-size: 100% 100%;
}
 .machine .accordion_one .accordion_header .i_box {
  bottom: -8px;
 }
 .machine .accordion_one .accordion_header.open .i_box {
  bottom: -8px;
 }
}