@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap');

h2.first{
  border:none !important;
  font-size: 325% !important;
}
h2.first span{
  padding:0 !important;
}
.slantBase{
  display: block;
  position: relative;
}

.slant-bg1 {
    width: 100%;
    margin: 0;
    padding: 40px 0;
    position: relative;
    z-index:1;
/*    top: 200px;*/
}

.slant-bg1 p {
    width: 100%;
    margin: 0 auto;
}

.slant-bg1::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../img/lp/iPhone2021/bg_aj.png);
    background-size: cover;
    transform: skewY(-7deg);
    z-index: -1;
}
.slant-bg2 {
    width: 100%;
    margin: 0;
    padding: 40px 0;
    position: relative;
    display: flex;
    flex-direction: row-reverse;

/*    top: 200px;*/
}

.slant-bg2 p {
    width: 100%;
    margin: 0 auto;
}

.slant-bg2::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../img/lp/iPhone2021/bg_hybrid.png);
    background-size: cover;
    transform: rotate(-14deg);
    transform: skewY(-7deg);
    z-index: -1;
}
.slant-bg3 {
    width: 100%;
    margin: 0;
    padding: 40px 0;
    position: relative;
/*    top: 200px;*/
}

.slant-bg3 p {
    width: 100%;
    margin: 0 auto;
}

.slant-bg3::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  background: url(../img/lp/iPhone2021/bg_leather.png);
     background-size: cover;

   transform: skewY(-7deg);
    z-index: -1;
}

.slant-bg4 {
    width: 100%;
    margin: 0 0 10rem 0;
    padding: 40px 0;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
/*    top: 200px;*/
}

.slant-bg4 p {
    width: 100%;
    margin: 0 auto;
}

.slant-bg4::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  background: linear-gradient(#001B4E, #005DB6, #004EAD);
     background-size: cover;
   transform: skewY(-7deg);
    z-index: -1;
}

.slant-bg5 {
    width: 100%;
    margin: 0;
    padding: 150px 0;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
/*    top: 200px;*/
}

.slant-bg4 p {
    width: 100%;
    margin: 0 auto;
}

.slant-bg5::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
     background-size: cover;
   transform: skewY(-7deg);
    z-index: -1;
}

.slant-bgIn {
    width: 92.5%;
    margin: 0;
    padding: 70px 0;
    position: relative;
/*    top: 200px;*/
}

.slant-bgIn p {
    width: 100%;
    margin: 0 auto;
}

.slant-bgIn::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  background: #fff;
    transform: skewY(-7deg);
    z-index: -1;
}
.lp_btn{
    color: #fff;
    background: #555555;
    width: 6em;
    margin: 0 0 0 0;
    padding: 10px 20px;
    text-align: center;
  }
.lp_btn a{
  display: block;
    font-weight: bold;
    margin: 0 0 0 0;
    padding: 0px;
    width: auto;
    color: #fff;
    text-decoration: none;
}
.slant_item{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
  padding:0 2%;
  flex-basis: 100%;
  width:95%;
}
.slant_item .textBlock{
  flex-basis:47%;
  text-align: right;
}
.textBlock .title , .textBlock p{
  margin-bottom:1.25em;
}
.slant_item .imgBlock{
  flex-basis:51%;
}
.slant_item .imgBlock img{
  width: 90%;
}
.slant-bg4 .slant_item .imgBlock img{
  width: 95%;
}
.slant_item.reverse{
  flex-direction: row-reverse;
}
.slant_item.reverse .textBlock{
  flex-basis:47%;
}
.slant_item.reverse .imgBlock{
  flex-basis:50%;
}
.slant_item.reverse .imgBlock img{
  width: 100%;
}
.slant_item .lp_btn{
  float:right;
}
.slant_item.reverse .lp_btn{
  float:left;
}
.slant_item.reverse p{
  text-align: left;
}
.slant_item .mt-item{
  margin-top:3em;
}
.detailArea{
  width:100%;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items:flex-start;
}
.areaMain.snsBlock .detailArea .snsList ul li{
  border-bottom: 1px dashed #b1b9cf;
}
.areaMain.snsBlock .detailArea .snsList ul li a{
  min-height: 40px;
  margin: 0;
  padding: 10px 20px;
  display: flex;
  align-items: center;
}
.areaMain.snsBlock .detailArea .snsList ul li a:hover{
  text-decoration: none;
}
.areaMain.snsBlock .detailArea .timeline{
  flex-basis:72.25%;
}
.areaMain.snsBlock .detailArea .snsList{
  flex-basis:21%;
}

@media screen and (max-width: 769px){
  h2.first{
    font-size: 26px !important;
    height: 50px !important;
  }
  h2.first span{
    line-height: 28px !important;
  }
  .slant-bgIn{
    width: 95%;
  }
  .textBlock p {
    text-align: left !important;
  }
  .slant_item .lp_btn{
    float:none;
  }
  .slant_item .textBlock {
    flex-basis: 55%;
  }
  .areaMainIn{
    max-width: 100%;
    margin: 0 auto;
  }
  .detailArea{
    padding-bottom:10px;
  }
  .pointLead{
    font-size: 140% !important; 
    font-weight:bold; 
    margin-bottom:30px;
    text-align: center;
  }
  .areaMain.snsBlock{
    width: 100%;
  }
  .areaMain.snsBlock .areaMainIn{
    display:table;
    width:90%;
    margin:0 auto;
  }
  .areaMain.snsBlock .detailArea{
    width:100%;
    display: flex;
    align-items: flex-start;
    margin:0px auto 30px auto;
  }
  .areaMain.snsBlock .detailArea .timeline{
    flex-basis:70%;
  }
  .areaMain.snsBlock .detailArea .snsList{
    flex-basis:28%;
  }
  .areaMain.snsBlock{
    display: table;
  }
  .areaMain.snsBlock .detailArea{
    width:100%;
    align-items:flex-start;
    display: flex;
    justify-content:space-between;
  }
  

}
@media screen and (max-width: 500px){
  .slant_item{
    display:block;
    padding:0 2.5%;
  }
  .slant-bgIn {
    width: 95%;
    padding: 50px 0;
  }
  .textBlock p {
    text-align: left !important;
  }
  .slant_item .lp_btn{
    float:none;
  }
  .slant-bg4{
    margin:0;
  }
.areaMain.snsBlock .pointLead{
    text-align: center;
  }
  .areaMain.snsBlock{
    display: table;
    padding: 0px 2.5%;
  }
  .areaMain.snsBlock .detailArea{
    width:100%;
    display: flex;
    align-items: flex-start;
    margin:0px auto 30px auto;
  }
  .areaMain.snsBlock .detailArea .timeline{
    flex-basis:100%;
  }
  .areaMain.snsBlock .detailArea .snsList{
    flex-basis:100%;
  }
  .areaMain.snsBlock .detailArea .snsList ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .areaMain.snsBlock .detailArea .snsList ul li{
    flex-basis:50%;
  }
}

#h_logo{
  position: relative;
}

.souryo {
  position: absolute;
  right: 18.5%;
  top: 98.5%;
  font-size: 12px;
  color: #777;
}

.souryo_kotei {
  font-size: 11px;
  color: #777;
  margin: 0px 0 0 20px;
  display: none !important;
}

header > .fixed #h_logo .souryo{
  display: none;
}

#gnavi nav > ul > li > .souryo_kotei{
  display: inline-block;
}

.h2_title{
  font-size: 35px;
  font-weight: 800;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 40px;
}

.top_key{
  color: #17A996;
  font-size: 20px;
}

.top_key_oya{
line-height: 30px;
}

@media screen and (min-width:550px) { 
  .noPC{
      display: none !important;
  }
}

#top_bnr{
  margin: 0 auto;
  text-align: center;
  line-height: 2.5vw;
}

#top_bnr p{
  line-height: 3vw;
}

#top_bnr a{
  text-decoration: none;
}

#top_bnr a:hover {
	color: #333;
}

/* .mannaka_bnr{
  margin: 0 auto;
  text-align: center;
} */

.width80{
  width: 80%;
}

.oya_bnr{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 80%;
  margin: 20px auto;
  column-gap: 20px;
}

.bnr_g{
  max-width: 100%;
}

.bnra{
  margin: 20px 0;
}

.img_wrapa{
  /* border: 1px solid #ddd; */
  width: 80%;
  margin: 5px auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrapa img{
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrapa:hover img{
  transform: scale(1.05);
  transition-duration: 0.5s;
}

.img_wrapb{
  /* border: 1px solid #ddd; */
  width: 80%;
  margin: 10px auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrapb img{
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrapb:hover img{
  transform: scale(1.05);
  transition-duration: 0.5s;
}

.img_wrapc{
  /* border: 1px solid #ddd; */
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
  background-color: #efefef;
}
.img_wrapc img{
  transform: scale(1.15) translateY(5px);
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrapc:hover img{
  transform: scale(1.15) translateY(-15px);
  transition-duration: 0.5s;
}

.img_wrapj{
  /* border: 1px solid #ddd; */
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
  background-color: #efefef;
}
.img_wrapj img{
  transform: scale(1.15) translateY(5px);
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrapj:hover img{
  transform: scale(1.15) translateY(-15px);
  transition-duration: 0.5s;
}

.img_wrapd{
  /* border: 1px solid #ddd; */
  width: 80%;
  margin: 10px auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrapd img{
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrapd:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

.img_wrapi{
  /* border: 1px solid #ddd; */
  width: 80%;
  margin: 0px auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrapi img{
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrapi:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

/* コンテナ
.oya_bnr {
  display: grid;
  grid-template-rows: 800px 500px 600px 500px;
  grid-template-columns: 350px 350px 350px 350px;
  grid-template-areas:
      "bnra bnra bnra bnra"
      "bnrb bnrb bnrb bnrb"
}

/* アイテム */
/* .bnra {
  grid-area: bnra;
}
.bnrb {
  grid-area: bnrb;
}
.bnrc {
  grid-area: bnrc;
}
.bnrd {
  grid-area: bnrd;
}
.bnre {
  grid-area: bnre;
}
.bnrf {
  grid-area: bnrf;
}
.bnrg {
  grid-area: bnrg;
} */ 

.text_container_oya{
  position: relative;
}

.text_container_air{
  width: 25vw;
  position: absolute;
  right: 58%;
  top: 70%;
  margin: 0;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_air_key{
  position: absolute;
  right: 65%;
  top: 25%;
  margin:0;
  font-size: 2.3vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_air_ku {
  color: #17A996;
  position: absolute;
  right: 54.5%;
  top: 71.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_nana_ku {
  color: #17A996;
  position: absolute;
  right: 52.5%;
  top: 74%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_gs_ku {
  color: #17A996;
  position: absolute;
  right: -2.5%;
  top: 11.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_rb_ku {
  color: #17A996;
  position: absolute;
  right: 2.5%;
  top: 11.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_ki_ku {
  color: #17A996;
  position: absolute;
  right: 15.5%;
  top: 11.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_lb_ku {
  color: #17A996;
  position: absolute;
  right: -2.5%;
  top: 11.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_hb_ku {
  color: #17A996;
  position: absolute;
  right: 61.5%;
  top: 61.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_kt_ku {
  color: #17A996;
  position: absolute;
  right: 48.5%;
  top: 69.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_ag_ku {
  color: #17A996;
  position: absolute;
  right: 34.5%;
  top: 79.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_cr_ku {
  color: #17A996;
  position: absolute;
  right: 34.5%;
  top: 79.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_ap_ku {
  color: #17A996;
  position: absolute;
  right: 32.5%;
  top: 79.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_br_ku {
  color: #17A996;
  position: absolute;
  right: 13.5%;
  top: 80.5%;
  margin: 0;
  font-size: 2vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.img_container_14_air{
  position: absolute;
  left: 81%;
  top: 79%;
  z-index: 10;
  width: 7vw;
  /* background-color: #17A996;
  vertical-align: middle;
  border-radius: 50%;
  color: #fff; */
}

.img_container_14_nana{
  position: absolute;
  left: 81%;
  top: 70%;
  z-index: 10;
  width: 7vw;
}

.img_container_14_koutoumei{
  position: absolute;
  left: 81%;
  top: 66%;
  z-index: 10;
  width: 7vw;
}

.webgentei_nana{
  position: absolute;
  left: 73%;
  top: 70%;
  z-index: 10;
  width: 7vw;
}

.webgentei_hybrid{
  position: absolute;
  left: 73%;
  top: 70%;
  z-index: 10;
  width: 7vw;
}

.img_container_14_g{
  position: absolute;
  left: 68%;
  top: 82%;
  z-index: 10;
  width: 5.5vw;
}

.img_container_14_agcr {
  position: absolute;
  left: 77%;
  top: 69%;
  z-index: 10;
  width: 7vw;
}

.webgentei_g{
  position: absolute;
  left: 36%;
  top: 82%;
  z-index: 10;
  width: 5.5vw;
}

.img_container_14_hybrid{
  position: absolute;
  left: 81%;
  top: 70%;
  z-index: 10;
  width: 7vw;
}

.oya_bnr_f{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0px auto;
  width: 80%;
  column-gap: 20px;
}

.img_wrape{
  overflow: hidden;
  cursor: pointer;
  background-color: #efefef;
}
.img_wrape img{
  width: 100%;
  transition-duration: 0.5s;
  transform: translateY(-20px)
}
.img_wrape:hover img{
  transform: scale(1.1) translateY(-20px);
}

.oya_bnr_o1{
  display: grid;
  grid-template-columns:1fr 1fr;
  margin: 10px auto 10px;
  width: 80%;
  column-gap: 20px;
}

.oya_bnr_o2{
  display: grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  margin: 20px auto 200px;
  width: 80%;
  column-gap: 20px;
}

.img_wraph{
  overflow: hidden;
  cursor: pointer;
  background-color: #efefef;
}
.img_wraph img{
  width: 100%;
  transition-duration: 0.5s;
}
.img_wraph:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

.img_wrapf{
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  border-radius: 20px;
}
.img_wrapf img{
  width: 100%;
  transition-duration: 0.5s;
}

.img_wrapg{
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  border-radius: 20px;
}
.img_wrapg img{
  width: 100%;
  transition-duration: 0.5s;
}

.text_container_nana{
  position: absolute;
  right: 55.5%;
  top: 75%;
  margin: 0;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  width: 30vw;
}

.text_container_nana_air {
  position: absolute;
  right: 75.5%;
  top: 65%;
  margin: 0;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  width: 10vw;
}

.text_container_gs_air {
  position: absolute;
  right: 31%;
  top: 7.5%;
  margin: 0;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  width: 7.5vw;
}

.text_container_hb_air {
  position: absolute;
  right: 72.5%;
  top: 50%;
  margin: 0;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  width: 9vw;
}

.text_container_nana_key {
  position: absolute;
  right: 73%;
  top: 25%;
  margin: 0;
  font-size: 2.1vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_g {
  position: absolute;
  top: 13%;
  left: 12%;
  margin: 0;
  font-size: 2.3vw;
  width: 14vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_r {
  position: absolute;
  top: 13%;
  left: 17.5%;
  margin: 0;
  font-size: 2.3vw;
  width: 12vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_k {
  position: absolute;
  top: 12.6%;
  left: 33%;
  margin: 0;
  font-size: 2.3vw;
  width: 6.3vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_l {
  position: absolute;
  top: 13.2%;
  left: 7%;
  margin: 0;
  font-size: 2.3vw;
  width: 15vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
}

/* .h3_font{
  font-weight: 100;
} */

.text_container_hybrid {
  position: absolute;
  right: 65%;
  top: 73%;
  margin: 0;
  font-size: 4vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: left;
  line-height: 2.5vw;
}

.text_container_hybrid_logo {
  position: absolute;
  right: 68.5%;
  top: 59%;
  margin: 0;
  font-size: 4vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: left;
  line-height: 2.5vw;
  width: 13vw;
}

.text_container_hybrid_key {
  position: absolute;
  right: 63%;
  top: 14%;
  margin: 0;
  font-size: 2.1vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.magsafetaio{
  font-size: 2.5vw;
  font-weight: 100;
}

.text_container_koutoumei {
  position: absolute;
  right: 54.5%;
  top: 59%;
  margin: 0;
  font-size: 3vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 3vw;
  text-align: left;
}

.text_container_tegrass {
  position: absolute;
  right: 64%;
  top: 43%;
  margin: 0;
  width: 18vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 3vw;
  text-align: left;
}

.koutoumei_span{
  font-size: 2.5vw;
}

.text_container_koutoumei_key {
  position: absolute;
  right: 65%;
  top: 12%;
  margin: 0;
  font-size: 2.1vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_cr {
  position: absolute;
  right: 42.5%;
  top: 81.5%;
  margin: 0;
  font-size: 2.3vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  width: 20vw;
}

.text_container_cr_key {
  position: absolute;
  right: 61%;
  top: 70%;
  margin: 0;
  font-size: 1.4vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_ag {
  position: absolute;
  right: 42%;
  top: 81%;
  margin: 0;
  font-size: 2.3vw;
  width: 20vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_ag_key {
  position: absolute;
  right: 64%;
  top: 70%;
  margin: 0;
  font-size: 1.4vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_airpadpro {
  position: absolute;
  right: 41%;
  top: 80%;
  margin: 0;
  font-size: 2.3vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
}

.text_container_batteryrefresher {
  position: absolute;
  right: 24%;
  top: 79%;
  margin: 0;
  font-size: 2.3vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: left;
  line-height: 1.7vw;
}

.text_container_airpadpro_key {
  position: absolute;
  right: 54%;
  top: 61%;
  margin: 0;
  font-size: 1.4vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 2vw !important;
}

.text_container_batteryrefresher_key {
  position: absolute;
  right: 47%;
  top: 50.5%;
  margin: 0;
  font-size: 1.4vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 2vw !important;
}

.cloudfund{
  font-size: 1.5vw;
}

@media screen and (max-width:770px) { 
  .lp_pc{
      display: none;
  }

  .h2_title {
    font-size: 25px;
}

  .img_wrapa {
    width: 100%;
    margin: 10px 0;
  }

  #top_bnr p {
    line-height: 6.5vw;
  }

  .text_container_air {
    width: 55vw;
    position: absolute;
    right: 40%;
    top: 75%;
  }

  .text_container_air_key {
    right: 64%;
    top: 25%;
    font-size: 5vw;
    text-align: left;
  }

  .img_container_14_air {
    left: 77%;
    top: 65%;
    z-index: 10;
    width: 20vw;
  }

  .img_wrapb{
    width: 100%;
    margin: 0px auto
  }

  .text_container_nana {
    right: 9%;
    top: 15%;
    width: 80vw;
}

  .img_container_14_nana {
    left: 77%;
    top: 70%;
    width: 20vw;
  }

  .webgentei_nana {
    left: 55%;
    top: 70%;
    width: 20vw;
  }

  .webgentei_hybrid {
    left: 67.5%;
    top: 65%;
    width: 15vw;
}

  .text_container_nana_key {
    right: 52%;
    top: 75%;
    font-size: 6vw;
    line-height: 7vw !important;
  }

  .oya_bnr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 0px auto;
    column-gap: 20px;
    padding: 20px 0;
  }


  .oya_bnr_o1 {
      display: block;
      margin: 10px auto 10px;
      width: 100%;
      column-gap: 20px;
  }

.oya_bnr_o2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 10px auto 200px;
  width: 98%;
  column-gap: 20px;
}

  .img_container_14_g {
    left: 66%;
    top: 80%;
    width: 15vw;
  }

  .webgentei_g {
    left: 32%;
    top: 80%;
    width: 15vw;
  }

  .text_container_r {
    left: 18.5%;
    font-size: 5.5vw;
    width: 28vw;
    top: 14%;
}

.text_container_g {
  left: 13%;
  font-size: 5.5vw;
  width: 33vw;
  top: 14%;
}

.text_container_k {
  left: 36%;
  font-size: 5.5vw;
  width: 14vw;
  top: 14%;
}

  .text_container_l {
    left: 14%;
    font-size: 5.5vw;
    width: 33vw;
    top: 14.5%;
}

  .img_wrapc {
    margin: 0px auto;
  }

  .img_wrapj {
    margin: 10px auto;
  }

  .img_wrapd {
    width: 100%;
    margin: 10px auto;
}

  .img_wrapi {
    width: 100%;
    margin: 0px auto;
  }

  .text_container_hybrid {
    right: 65%;
    top: 79%;
    margin: 0;
    font-size: 7vw;
    line-height: 4vw;
}

  .img_container_14_hybrid {
    position: absolute;
    left: 83.5%;
    top: 65%;
    width: 15vw;
}

  .magsafetaio {
    font-size: 4vw;
  }

  .text_container_hybrid_key {
    right: 52%;
    top: 13%;
    font-size: 4.5vw;
  }

  .oya_bnr_o {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "areaA areaA"
    "areaB areaC";
    margin: 20px auto 100px;
  }

  /* .oya_bnr_o_pc {
    display: none
  } */

  .img_wrapg{
    height: 100%;
    margin: 0px 0;
  }

  .img_wrapf {
    height: 100%;
    margin: 0px 0;
}

  .chosei {
    margin-top: 50px;
}

  .text_container_airpadpro_key {
    right: 52%;
    top: 59%;
    font-size: 4vw;
    line-height: 5.5vw !important;
  }

.text_container_airpadpro {
  right: 38%;
  top: 85%;
  font-size: 6.5vw;
  }

  .oya_bnr_f {
    width: 100%;
  }

  .img_wrape {
    margin: 10px 0 0;
}

  .img_wrape img{
    width: 100%;
    transition-duration: 0.5s;
    transform: translateY(-10px)
  }
  .img_wrape:hover img{
    transform: scale(1.1) translateY(-10px);
  }

  .text_container_ag_key {
    right: 34%;
    top: 67%;
    font-size: 3.5vw;
  }

  .text_container_ag {
    right: 16%;
    top: 82.5%;
    font-size: 4.5vw;
    width: 37vw;
}

  .text_container_cr_key {
    right: 28%;
    top: 67%;
    font-size: 3.5vw;
  }

  .text_container_cr {
    right: 17%;
    top: 82.5%;
    font-size: 4.5vw;
    width: 37vw;
}

.img_container_14_koutoumei {
  left: 83%;
  top: 66%;
  width: 15vw;
}

    .text_container_air_ku {
      right: 32.5%;
      top: 76.5%;
      font-size: 5vw;
  }

  .text_container_nana_ku {
    right: 1.5%;
    top: 15%;
    font-size: 5vw;
}

.text_container_gs_ku {
  right: 2.5%;
  top: 13%;
  font-size: 4vw;
}

.text_container_rb_ku {
  right: 5.5%;
  top: 13%;
  font-size: 4vw;
}

.text_container_ki_ku {
  right: 15.5%;
  top: 13%;
  font-size: 4vw;
}

.text_container_lb_ku {
  right: 1%;
  top: 13%;
  font-size: 4vw;
}


.text_container_hb_ku {
  right: 58.5%;
  top: 64.5%;
  font-size: 4vw;
}

.text_container_kt_ku {
  right: 41.5%;
  top: 64.5%;
  font-size: 3.5vw;
}

.text_container_ag_ku {
  right: 6%;
  top: 80.5%;
  font-size: 3vw;
}

.text_container_cr_ku {
  right: 7%;
  top: 80.5%;
  font-size: 3vw;
}

.text_container_ap_ku {
  right: 31.5%;
  top: 82.5%;
  font-size: 4vw;
}

.text_container_br_ku {
  right: 11.5%;
  top: 80.5%;
  font-size: 4vw;
}

.oya_bnr_spp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin: 10px auto;
  column-gap: 20px;
  /* padding: 20px 0; */
}

.text_container_hybrid_logo {
  right: 68.5%;
  top: 65%;
  font-size: 4vw;
  width: 23vw;
}

.text_container_koutoumei {
  right: 49%;
  top: 66%;
  font-size: 6vw;
  line-height: 4.5vw;
}

.koutoumei_span {
  font-size: 4vw;
}

.text_container_nana_air {
  position: absolute;
  right: 69%;
  top: 8%;
  margin: 0;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  width: 20vw;
}

.text_container_gs_air {
  position: absolute;
  right: 31.5%;
  top: 8.5%;
  margin: 0;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  width: 19vw;
}

.text_container_hb_air {
  position: absolute;
  right: 71.5%;
  top: 55%;
  margin: 0;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  width: 20vw;
}

.text_container_tegrass {
  right: 63%;
  top: 52%;
  width: 30vw;
  line-height: 3vw;
  text-align: left;
}

.text_container_koutoumei_key {
  position: absolute;
  right: 65%;
  top: 18%;
  margin: 0;
  font-size: 3.5vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 5vw !important;
}

.souryo {
  position: absolute;
  right: 11%;
  top: 1%;
  font-size: 12px;
  color: #777;
}

#header_sp .h_logo img {
  margin: 0 100px 0 0;
}

.img_container_14_agcr {
  position: absolute;
  left: 2%;
  top: 6%;
  z-index: 10;
  width: 12vw;
}

.img_wraph {
  overflow: hidden;
  cursor: pointer;
  background-color: #efefef;
  margin: 20px 0;
}

.text_container_batteryrefresher_key {
  position: absolute;
  right: 44%;
  top: 43.5%;
  margin: 0;
  font-size: 4vw;
  z-index: 10;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 5vw !important;
}

.text_container_batteryrefresher {
  position: absolute;
  right: 19%;
  top: 75%;
  margin: 0;
  font-size: 6.5vw;
  z-index: 10;
  font-family: 'Noto Sans JP', sans-serif;
  text-align: left;
  line-height: 4.5vw;
}

.cloudfund {
  font-size: 4vw;
}


}

@media screen and (min-width:770px) { 
  .lp_sp{
      display: none;
  }

  .top_key_oya {
    line-height: 40px;
}

.img_wrapf:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

.img_wrapg:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}
}

.gnav3 {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  background: #9fb7d4;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.gnav3 .nav {
  width: 750px;
  height: 40px;
  margin: 0 auto 2px auto;
  padding: 0;
  display: flex;
}
.gnav3 .nav li {
  position: relative;
  list-style: none;
  box-sizing: border-box;
  border-left: 1px solid #eee;
}
.gnav3 .nav li a {
  display: block;
  width: 150px;
  height: 40px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 2.8;
  background: #9fb7d4;
  box-sizing: border-box;
  text-decoration: none;
}
.gnav3 .nav li:first-child {
  border-left: 0;
}
.gnav3 .nav > li:hover > a {/*layer-1*/
  color: orange;
  background: #afc6e2;
}
.gnav3 .nav > li li:hover > a {/*layer-2*/
  color: olive;
  background: #afc6e2;
}
.gnav3 .nav li ul {
  top: 40px;
  left: -40px;
  position: absolute;
}
.gnav3 .nav li ul li {
  overflow: hidden;
  height: 0;
}
.gnav3 .nav li ul li a {
  border-top: 1px solid #eee;
}
.gnav3 .nav li:hover > ul > li {
  overflow: visible;
  height: 40px;
}
  .gnav3 .nav li ul li ul {
    top: 0;
    left: 110px;
  }
  .gnav3 .nav li ul li ul:before {/*layer-2▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 30px;
    border: 5px solid transparent;
    border-left: 5px solid #fff;
  }
  .gnav3 .nav li ul li ul li:hover > a {/*layer-3*/
    color: pink;
    background: #afc6e2;
  }
  .gnav3 .nav li ul li ul.left {
    top: 0;
    left: -190px;
  }
  .gnav3 .nav li ul li ul.left:before,/*layer-2-left▷*/
  .gnav3 .nav li ul li ul li ul.left:before {/*layer-3-left▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 190px;
    border: 5px solid transparent;
    border-right: 5px solid #fff;
  }
  .gnav3 .nav li ul li ul.left li:hover > a {/*layer-2-left*/
    color: pink;
    background: #afc6e2;
  }
  .gnav3 .nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/
    color: purple;
    background: #afc6e2;
  }
.content3 {
  width: 100%;
  min-height: 200px;
  background: #eee;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  box-sizing: border-box;
}
@media (min-width: 769px) {
.gnav3 {
  overflow: visible;
}
.gnav3 .nav {
  width: 755px;
}
.gnav3 .nav li {
  box-sizing: border-box;
}
.gnav3 .nav li:first-child {
  border-left: 1px solid #eee;
}
.gnav3 .nav li:last-child {
  border-right: 1px solid #eee;
}
.content3 {
  width: 755px;
}
/* ** */}

.tabmenu{
  width: 60%;}

.tab{
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;}

.tab li{
  background: #eee;
  cursor: pointer;
  display: inline-block;
  width: 20%;
  padding: .6em;}

  .tab li.select{
      background: #fd9;}

.content div{
  background: #fd9;
  height: 200px;
  padding: .6em;}

.hide{
  display:none;
}