@charset "UTF-8";

/***************************************
****************************************
****************************************
PC
****************************************
****************************************
***************************************/
@media screen and (min-width:821px) {

  #topimg {
   background-image: url("../images/iphoneearphone9-top_pc.webp");
  /*
    background: url("../images/iphoneearphone8-top_pc.png") no-repeat 
    calc(50% - 24vw) calc(50% + 25px) / min(68vw, 850px) auto,
    linear-gradient(to bottom, rgba(246, 243, 247, 1), rgba(255, 255, 255, 1));
    */
  }
  html.is-ipad #topimg {
    background-size: calc(100vw + 10vmin) auto;
    background-position: calc(50% - 38vmin) calc(100% + 5vmin);
    background-repeat: no-repeat;
  }
  html.is-ipad #topimg .top-title {
    position: absolute;
    top: 48%;
    left: 70%;
    transform: translate(-50%, -50%);
    width: 43vw;
  }
  html.is-ipad #scroll-down {
    display: none;
  }
}
/***************************************
****************************************
****************************************
SP
****************************************
****************************************
***************************************/
@media screen and (max-width:820.9px) {
  #topimg {
    background-image: url("../images/iphoneEarphone10-top_sp_e.webp");
    background-position: 50% -7.5vw;
    background-size: 105vw auto;
    background-repeat: no-repeat;
  }
  #topimg .top-title {
    position: relative;
    margin-top: 80vw;
    width: 100vw;
    padding: 0;
    overflow: visible;
  }
  #topimg h1 {
    width: 48vw;
    text-align: center;
    margin: 0 auto;
  }
  #scroll-down {
    display: none;
  }
  #section4 .btn-lg {
    width: 36vw;
    height: 70px;
    line-height: 70px;
  }
}
@media screen and (max-width:768.1px) {
  #topimg {
    background-image: url("../images/iphoneEarphone10-top_sp_e.webp");
    background-position: 50% -11vw;
    background-size: 118vw auto;
    background-repeat: no-repeat;
  }
  #topimg .top-title {
    position: relative;
    margin-top: 78vw;
    width: 100vw;
    padding: 0;
    overflow: visible;
  }
  #topimg h1 {
    width: 50vw;
    text-align: center;
    margin: 0 auto;
  }
  #scroll-down {
    display: none;
  }
  #section4 .btn-lg {
      width: 36vw;
      min-width: 250px;
      height: 70px;
      line-height: 70px;
  }
}