@charset "utf-8";
/*------------------------------------------------------------------------------------------
*
*
    home_sp.css
*
*
------------------------------------------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------
*
    max-width: 640px
*
-------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {


 #page_howto {
  width: 100%;
  /* padding: 0 0 80px 0; */
  background-color: #000125;
  overflow: hidden;
  text-align: center;
  position: relative;
 }
 
 #contents {
  background-size: contain;
 }
 
 #page_howto h1{
  padding-top: 20px;
  line-height: 0;
  text-align: center;
 }
 
 #page_howto h1 img{
  width: 130px;
  height: auto;
 }
 
 #page_howto .title {
  text-align: center;
  padding-top: 15px;
  color: #ffffff;
  font-size: 12px;
 }

 
 #page_howto .movieArea--hasMovie {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
 } 

 #page_howto .movieArea--hasMovie .movieArea--hasMovie__ul  {
  width:100%;
}
 
 
 #page_howto .movieArea--hasMovie .movieArea--hasMovie__ul .movieArea--hasMovie__li .movieArea--hasMovie__elem {
    padding-bottom: 56.25%;
    height: 0px;
    position: relative;
 }

#page_howto .movieArea--hasMovie .movieArea--hasMovie__ul .movieArea--hasMovie__li  {
  width:calc(100% - 36px);
  padding-left: 18px;
}
 
 #page_howto .movieArea--hasMovie .movieArea--hasMovie__ul .movieArea--hasMovie__li .movieArea--hasMovie__elem iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 } 

 #page_howto .movieArea--hasMovie .movieArea--hasMovie__ul .movieArea--hasMovie__li .movieArea--hasMovie__elem img {
  display: none;
} 
 
 #page_howto .movieArea--hasMovie .movieArea--hasMovie__ul .movieArea--hasMovie__li .movieArea--hasMovie__elem {
  display: block;
  margin-top: 11%;
 } 

 #page_howto .movieArea--hasMovie .movieArea--hasMovie__ul .movieArea--hasMovie__li .movieArea--hasMovie__name {
  display:none;
}
 
 #page_howto .movieArea--hasMovie .movieArea--hasMovie__ul .movieArea--hasMovie__li .movieArea--hasMovie__name_sp {
  font-size: 12px;
  line-height: 2;
  text-align: center;
  color: #ffffff;
  line-height: 1.5;
  padding-top: 2%;
  padding-left: 19%;
  padding-right: 19%;
 }
 
 .to_product {
  padding-bottom: 60px;
  text-align: center;
 }
 
 .to_product img {
  height: 13px;
  width: auto;
 }
 
 .bg-image {
  position: absolute;
  top: 50%;
  z-index: 1;
 }

 br {
  display: block;
 }

 .remodal {
  display: none;
 }

}