@charset "UTF-8";

/***************************************
****************************************
****************************************
PC + タブレット判別
****************************************
****************************************
***************************************/
@media screen and (min-width:821px) {

  #topimg {
    background-image: url("../images/iphoneearphone10-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));
    */
    background-repeat: no-repeat;
  }

  /* iPad判別時のスタイル（PCサイズのiPadに適用） */
  html.is-ipad #topimg {
    background-size: calc(90vw + 10vmin) auto;
    /* 横位置は中央からvminで調整、縦位置は下寄せにしてvminで微調整 */
    background-position: calc(50% - 36vmin) calc(100% + 1vmin);
    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_j.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: 32vw;
    height: 70px;
    line-height: 70px;
  }
}
@media screen and (max-width:768.1px) {
  #topimg {
    background-image: url("../images/iphoneEarphone10-top_sp_j.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: 32vw;
    min-width: 220px;
    height: 70px;
    line-height: 70px;
  }
}

.lead {
    line-height: 1.7;
    text-align: justify;
}