@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  width: 100%;
  height: auto;
  font-family: 'Noto Sans JP','din-2014','sans-serif';
  margin: 0 auto;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%
}
h2 {
  font: normal normal 900 40px/50px 'Noto Sans JP' 'sans-serif';
  letter-spacing: 0px;
}
h3 {
  text-align: center;
  font: normal normal 700 46px/50px 'din-2014';
  letter-spacing: 2.3px;
  color: #313131;
  text-transform: uppercase;
}
h4 {
  font: normal normal 400 30px/36px 'Noto Sans JP' sans-serif;
  letter-spacing: 0.9px;
  color: #0165FF;
}
.wrapper {
  max-width: 1400px;
  margin: 0 auto;
}
/*ページトップ*/
#home {
  background-image: url(/RolandComSite/media/jp/boss/promos/waza-air_2021summer_campaign/images/home-waza_air.png);
  height: 754px;
  margin: 0 auto;
}

.home {
  width: 100%;
  height:754px;
  margin: 0 auto;
  position: absolute;
}

.home-in1 {
  position: absolute;
  margin-top: 40px;
  margin-left: 40px;
}
.home-ttl {
  width:56.78px;
  /*width: 320px;
  height: 56.78px;
  font-size: 70px;
  font-weight: black;
  text-align: left;
  transform: rotate( 90deg );
  color: #FFF;*/
}
.home-in2 {
  position: absolute;
  top: 120px;
  right: 90px;

}
.home-top {
  width: 140px;
}
.home-content {
  text-align: center;
  margin-top:  166px;
  margin-right: 220px;
  width: 450px;
  height: 429px;
  position: relative;
}
.home-txt {
  width: 420px;
  height: 144px;
  text-align: left;
  font: normal normal 900 40px/50px 'Noto Sans JP';
  letter-spacing: 0px;
  color: #fff;
}
.home-data {
  margin-top: 20px;
  display: flex;
}
.home-txt2 {
  color: #000;
  padding: 18px 16px 16px;
  margin-top: 15px;
  text-align: left;
  font: normal normal bold 14px/23px 'Noto Sans JP';
  letter-spacing: 1.4px;
  background-color: #fff;
  border-radius: 5px 0px 0px 5px;
}
.home-txt3 {
  width: 348px;
  text-align: left;
  font: normal normal bold 24px/50px 'din-2014';
  letter-spacing: 1.2px;
  color: #fff;
  margin-top: 15px;
  padding-left: 16px;
  border: 2px solid #fff;
  border-radius: 0 5px 5px 0;
}
.home-txt4 {
  text-align: left;
  font: normal normal normal 16px/30px 'Noto Sans JP';
  letter-spacing: 0.48px;
  color: #fff;
  margin-top: 30px;
}

.btn {
  padding: 12px 50px;
  display: inline-block;
  color: #fff !important;
  background: #0165ff;
  text-decoration: none;
  font: normal normal 900 16px/30px 'Noto Sans JP';
  letter-spacing: 0.48px;
  border-radius: 50px;
  text-align:center;
  text-decoration:none !important;
}
.btn:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: -3px 0 0 25px;
  background: url("/RolandComSite/media/jp/boss/promos/waza-air_2021summer_campaign/images/triangle.svg") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.btn:hover {
  content: "";
  color: #0165ff !important;
  background: #ddd;
}
.btn {
  right: 140px;
  bottom: 40px;
  position: fixed;
  z-index: 1;
}
#present {
  width: 1400px;
  height: 584px;
  margin: 0 auto;
}
.present {
  width: 100%;
  text-align: center;
}
.present-in {
  position: absolute;
  padding-top: 80px;
  left: -49px;
}
.present h3 {
  width: 100%;
  text-align: center;
  padding-top: 80px;
  line-height: 1.08;
}
.p-txt {
  font: normal normal 400 14px/14px 'Noto Sans JP';
  letter-spacing: 1.4px;
  color: #313131;
  margin-top: 0;
}
.p-txt2 h4{
  font-size: 30px;
  font-weight: 900;
  border-color: #0165FF;
  border-bottom: 3px solid;
  display: inline-block;
  margin-top: 51px;
}
.p-txt3 {
  width: 191px;
  font: normal normal bold 60px/50px 'din-2014';
  letter-spacing: 1.8px;
  color: #FF8001;
  text-transform: uppercase;
  margin-top: 29px;
  margin-left: 662px;
}
.p-txt3-1 {
  font: normal normal 900 24px/24px 'Noto Sans JP';
  letter-spacing: 1.2px;
  color: #FF8001;
}
.present-in2 {
  position: absolute;
  padding-top: 40px;
  margin-left: 540px;
}
.present-d {
  width: 106px;
}
.p-txt4 {
  font: normal normal bold 20px/36px 'Noto Sans JP';
  letter-spacing: 0.6px;
  color: #313131;
  margin-top: 20px;
}
.present-in3 {
  position: absolute;
  padding-top: 42px;
  margin-left: 485px;
}
.present-giftcard {
  width: 430px;
}

#em {
  width: 1400px;
  height: 560px;
  text-align: center;
  margin: 0 auto;
}
.em {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.em-content,.em-content2 {
  height: 560px;
  color: #fff;
  text-align: center;
}
.em-content {
  background: #0165FF 0% 0% no-repeat;
}
.em-content2 {
  background: #0F349A 0% 0% no-repeat;
}
.em-content h3,.em-content2 h3 {
  color: #fff;
  margin-top: 64px;
}
.em-content p,.em-content2 p {
  color: #fff;
}
.em-txt,.em-txt1 {
  display: inline-block;
  padding: 8px 12px;
  margin-top: 38px;
  font: normal normal 400 14px/14px 'Noto Sans JP';
  letter-spacing: 1px;
  border: 1px solid #fff;
  border-radius: 3px;
}
.em-txt2,.em-txt5 {
  font: normal normal bold 30px/50px 'din-2014';
  letter-spacing: 1.2px;
  margin-top: 10px;
}
.em-br {
  display: none;
}
.em-txt2-1 {
  display: none;
}
.em-in {
  position: absolute;
  margin-top: 24px;
  margin-left: 254px;
}
.em-headphone {
  width: 190px;
}
.em-txt3 {
  margin-top: 253px;
  font: normal normal bold 24px/50px 'din-2014';
  letter-spacing: 1.2px;
  color: #fff;
}
.em-txt4 {
  font: normal normal normal 13px/20px 'Noto Sans JP';
  letter-spacing: 0.39px;
  color: #fff;
}
.em-box {
  display: flex;
  margin-top: 17px;
  height: 40px;
  margin-left: 180px;
}
.em-btn1,.em-btn2 {
  width: 165px;
  height: 40px;
  display: inline-block;
  font: normal normal 400 14px/14px 'Noto Sans JP';
  color: #fff !important;
  letter-spacing: 1px;
  border: 2px solid #fff;
  border-radius: 5px;
}
.em-btn1 {
  margin-right: 8px;
  padding: 10px 40px;
}
.em-btn2 {
  padding: 10px 35px;
}
.em-btn1:hover,.em-btn2:hover {
  content: "";
  color: #0165ff !important;
  background: #fff;
}

#how {
  width: 100%;
  height: 716px;
  background-image: url(/RolandComSite/media/jp/boss/promos/waza-air_2021summer_campaign/images/how-bg.png);
  text-align: center;
  margin: 0 auto;
}
.big-bg {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.how {
  max-width: 1400px;
}
.how-ttl h3 {
  padding-top: 64px;
}
.how-ttl h3,.how-ttl p {
  color: #fff;
}
.how-container {
  display: inline-flex;
  margin-top: 30px;
}
.item {
  width: 320px;
  height: 450px;
  text-align: center;
  background-color: #fff;
  margin: 30px;
  border-radius: 10px;
}
.item2 {
  width: 320px;
  height: 450px;
  text-align: center;
  background-color: #fff;
  margin: 30px;
  border-radius: 10px;
}
h5 {
  font: normal normal bold 30px/50px 'din-2014';
  letter-spacing: 1.5px;
  color: #0165FF;
  text-transform: uppercase;
}
.item h5 {
  margin-top: 40px;
}
.item img {
  width: 120px;
  height: 120px;
  margin-top: 5px;
}
.item2 h5 {
  margin-top: 40px;
}
.item2 img {
  width: 120px;
  height: 120px;
  margin-top: 5px;
}
 h6 {
  font: normal normal bold 20px/30px 'Noto Sans JP';
  letter-spacing: 0.6px;
  color: #313131;
}
.item h6,.item2 h6 {
  margin-top: 25px;
}
.how-txt2 {
  font: normal normal normal 16px/30px 'Noto Sans JP';
  letter-spacing: 0.48px;
  color: #313131;
  margin-top: 4px;
}
.how-txt3 {
  font: normal normal normal 14px/24px 'Noto Sans JP';
  letter-spacing: 0.42px;
  color: #313131;
  margin-top: 22px;
  padding: 0 24px;
}
#apply {
  width: 1400px;
  height: 494px;
  margin: 0 auto;
}
.apply {
  background: #fff;
  text-align: center;
}
p {
  font: normal normal normal 14px/24px 'Noto Sans JP';
  letter-spacing: 0.42px;
  color: #313131;
}
.apply p {
  margin-top: 71px;
}
.apply-box {
  width: 480px;
  height: 190px;
  margin: 27px auto;
  border: 2px solid #E5E5E5;
  border-radius: 10px;
  text-align: left;
  padding: 22px 28px;
}
.a-li,.a-li2 {
  font: normal normal normal 14px/24px 'Noto Sans JP';
  letter-spacing: 0.42px;
  color: #313131;
}
.a-li {
  font-weight: bold;
}
.btn2 {
  width: 400px;
  height: 64px;
  margin: 56px auto;
  position: relative;
  right: 0;
  margin-bottom: 0;
  padding: 16px 50px;
  display: inline-block;
  color: #fff !important;
  background: #0165ff;
  text-decoration: none;
  font: normal normal 900 16px/30px 'Noto Sans JP';
  letter-spacing: 0.48px;
  border-radius: 50px;
  text-align:center;
  text-decoration:none !important;
}
.btn2:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: -3px 0 0 25px;
  background: url("/RolandComSite/media/jp/boss/promos/waza-air_2021summer_campaign/images/triangle.svg") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.btn2:hover {
  content: "";
  color: #0165ff !important;
  background: #ddd;
}

#end {
  width: 1400px;
  height: 1700px;
  margin: 0 auto;
}
.end {
  background-color: #F0F0F0;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 100px;
}
.end-content {
  width: 720px;
  margin: 0 auto;
  text-align: left;
  padding: 69px 0px 0px;
}
.end-giftcard {
  margin: 16px 0 24px 0;
}
.end-content p {
  margin-top: 0px;
}
.end-content h6 {
  margin-top: 30px;
  margin-bottom: 28px;
}

/*----------------------------------------------
レスポンシブ
----------------------------------------------*/
@media (max-width:640px) {

  .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  h2 {
    font: normal normal bold 32px/40px;
  }
  h3 {
    font-size:40px;
    letter-spacing: 2px;
  }
  h4 {
    text-align: center;
    font-weight: 24px;
    letter-spacing: 0.72px;
  }
  #home {
    min-width:375px;
    height: 1147px;
    background-image: url(/RolandComSite/media/jp/boss/promos/waza-air_2021summer_campaign/images/sp-top-bg2.jpg);
    overflow-x: hidden;
  }
  .home {
    width: 100%;
    height: 1147px;
    margin: 0 auto;
    text-align: center;
  }
  .home-in1 {
    margin-top: 478px;
    left: 270px;
  }
  .home-ttl {
    width:44px;
    height: 240px;
  }
  .home-in2 {
    top: 150px;
    right: 24px;
  }
  .home-content {
    width: 375px;
    height: 127px;
    margin: 0 auto;
  }
 .home-txt {
    width: 340px;
    font-size: 32px;
    line-height: 40px;
    margin-left: 24px;
    margin-top: 40px;
  }
  .home-data {
    justify-content: center;
    margin: 0 auto;
  }
  .home-txt2 {
    width: 72px;
    padding: 9px 5px 9px 5px;
    margin-top: 606px;
    text-align: left;
    font-size: 13px;
    letter-spacing: 0.65px;
  }
  .home-txt3 {
    width: 290px;
    font-size: 18px;
    line-height: 1.94;
    letter-spacing: 0.9px;
    margin-top: 606px;
    padding-left: 0;
    text-align: center;
  }
  .home-txt4 {
    width: 320px;
    margin: 20px auto;
  }
  .home-br {
    display: none;
  }
 .btn {
    width: 327px;
    padding: 12px 50px;
    text-align: center;
    bottom: 40px;
    right: 24px;
    position: fixed;
    z-index: 1;
  }
  #present {
    width: 375px;
    height: 612px;
    margin: 0 auto;
  }
  .present-in {
    display: none;
  }
  .present h3 {
    font-size: 40px;
    padding-top: 64px;
    line-height: 1.25;
    font-weight: 900;
  }
  .p-txt2 h4{
    font-size: 24px;
    letter-spacing: 0.72px;
    line-height: 1.5;
    font-weight: 900;
    border-bottom: 4px solid;
  }
  .p-txt3 {
    width: 180px;
    margin-top: 42px;
    margin-left: 136px;
  }
  .p-txt3-1 {
    width: 41px;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: black;
  }
  .present-in2 {
    padding-top: 55px;
    margin-left: 24px;
  }
  .present-d {
    width: 100px;
  }
  .p-txt4 {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.68px;
    margin-top: 23px;
    margin-left: 24px;
    text-align: left;
  }
  .present-in3 {
    padding-top: 24px;
    margin-left: 24px;
  }
  .present-giftcard {
    width: 327px;
  }
  #em {
    width: 375px;
    height: 1208px;
    margin: 0 auto;
  }
  .em {
    width: 375px;
    display: flex;
    flex-direction: column;
  }
  .em-content {
    height: 540px;
    text-align: center;
  }
  .em-content2 {
    height: 668px;
  }
  .em-txt {
    font-size: 16px;
    margin-top: 64px;
  }
  .em-txt1 {
    font-size: 16px;
    margin-top: 20px;
  }
 .em-txt2 {
    width: 230px;
    height: 81px;
    font: normal normal bold 30px/38px 'din-2014';
    letter-spacing: 0.9px;
    margin-top: 16px;
    margin-left: 75px;
  }
  .em-txt5 {
    width: 300px;
    height: 81px;
    font: normal normal bold 30px/38px 'din-2014';
    letter-spacing: 0.9px;
    margin-top: 16px;
    margin-left: 42px;
  }
 .em-in {
    position: absolute;
    margin-top: 36px;
    margin-left: 95px;
  }
  .em-br {
    display: block;
  }
  .em-content2 h3 {
    margin-top: 60px;
  }
  .em-txt3 {
    margin-top: 250px;
  }
  .em-txt4 {
    width: 216px;
    text-align: left;
    margin-left: 80px;
  }
  .em-box {
    flex-direction: column;
    text-align: center;
    margin-top: 17px;
    height: 48px;
    margin-top: 24px;
    margin-left: 24px;
}
  .em-btn1,.em-btn2 {
    width: 327px;
    height: 48px;
    font-size: 16px;
    line-height: 1.87;
    font-weight: 900;
    letter-spacing: 1.6;
  }
  .em-btn1 {
    margin-bottom: 8px;
    padding: 10px 100px;
  }
  .em-btn2 {
    padding: 8px 35px;
  }
  #how {
    width: 100%;
    height: 1509px;
    text-align: center;
    margin: 0 auto;
  }
  .how-container {
    display: inline-flex;
    flex-direction: column;
  }
  .item {
    width: 327px;
    height: 390px;
    margin: 0;
    margin-top: 30px;
    border-radius: 10px;
  }
  .item h5 {
    margin-top: 30px;
  }
  .item h6 {
    margin-top: 15px;
  }
  .item img {
    margin-top: 3px;
  }
  .item2 {
    width: 327px;
    height: 390px;
    margin: 0;
    margin-top: 30px;
    border-radius: 10px;
  }
  .item2 h5 {
    margin-top: 20px;
  }
  .item2 h6 {
    margin-top: 13px;
  }
  .item2 img {
    margin-top: 0px;
  }

  .how-txt2 {
    margin-top: 0px;
  }
  .how-txt3 {
    margin-top: 15px;
    margin-left: 3px;
    text-align: left;
  }
  #apply {
    width: 375px;
    height: 576px;
  }
  .apply p {
    width: 328px;
    margin-top: 64px;
    margin-left: 23px;
    text-align: center;
}
  .apply-box {
    width: 327px;
    height: 260px;
    margin: 24px auto;
    padding: 22px 24px;
  }
  .btn2 {
    width: 327px;
    height: 48px;
    margin-top: 0;
    padding-top: 8px;
  }
  #end {
    width: 375px;
    height: 1998px;
    margin: 0 auto;
  }
  .end-content {
    width: 326px;
  }
  .end-content h6 {
    margin-bottom: 24px;
    margin-top: 5px;
  }
  .end-giftcard {
  margin: 16px 0 24px 0;
}
}
@media (max-width:320px) {
  body {
    width: 320px;
  }
  .wrapper {
    width: 320px;
    margin: 0 auto;
    text-align: center;
  }
  #home {
    min-width:320px;
    height: 1147px;
    background-image: url(/RolandComSite/media/jp/boss/promos/waza-air_2021summer_campaign/images/sp-top-bg2.jpg);
    background-size: cover;
    overflow-x: hidden;
  }
  .p-txt2 h4{
    font-size: 20px;
    letter-spacing: 0.72px;
    line-height: 1.5;
    font-weight: 900;
    border-bottom: 4px solid;
  }
  .btn {
     width: 300px;
     padding: 12px 30px;
     bottom: 100px;
     left: 10px;
   }
  .home {
    text-align: center;
  }
  .home-in1 {
    left: 220px;
  }
  .home-in2 {
    top: 170px;
    right: 20px;
  }
  .home-content {
    width: 320px;
    margin: 0 auto;
  }
 .home-txt {
    width: 300px;
    font-size: 28px;
    margin-left: 10px;
  }
  .home-data {
    width: 310px;
    margin: 0 5px;;

  }
  .home-txt2 {
    width: 60px;
    padding: 9px 5px 9px 5px;
    font-size: 11px;
  }
  .home-txt3 {
    width: 250px;
    font-size: 15px;
    line-height: 1.94;
    letter-spacing: 0.9px;
    margin-top: 606px;
    padding-left: 0;
    text-align: center;
    padding-top: 4px;
  }
  .home-txt4 {
    width: 300px;
    font-size: 14px;
  }
 .btn {
    width: 300px;
    padding: 10px 10px;
    text-align: center;
    bottom: 40px;
    right: 10px;
  }
  #how {
    max-width: 320px;
    height: 1509px;
    background-size: cover;
    text-align: center;
    margin: 0 auto;
    right: 60px;
  }
  .how-container {
    display: inline-flex;
    flex-direction: column;
  }
  .item {
    width: 300px;
    height: 390px;
    margin: 0;
    margin-top: 30px;
    border-radius: 10px;
  }
  .item2 {
    width: 300px;
    height: 390px;
    margin: 0;
    margin-top: 30px;
    border-radius: 10px;
  }

  #present {
    width: 320px;
    height: 612px;
    margin: 0 auto;
  }
  .p_txt3 {
    font-size: 35px;
  }
  .p-txt4 {
    margin-left: 15px;
  }
  #em {
    width: 320px;
    height: 1208px;
    margin: 0 auto;
  }
  .em {
    width: 320px;
    display: flex;
    flex-direction: column;
  }
  .em-txt2 {
     width: 230px;
     height: 81px;
     font: normal normal bold 30px/38px 'din-2014';
     letter-spacing: 0.9px;
     margin-top: 16px;
     margin-left: 45px;
   }
   .em-txt5 {
     width: 300px;
     height: 81px;
     font: normal normal bold 30px/38px 'din-2014';
     letter-spacing: 0.9px;
     margin-top: 16px;
     margin-left: 10px;
   }
   .em-in {
    margin-left: 72px;
  }
  .em-txt4 {
    width: 216px;
    text-align: left;
    margin-left: 52px;
  }
   .em-box {
     margin-left: 10px;
 }
   .em-btn1,.em-btn2 {
     width: 300px;
   }
   .em-btn1 {
     margin-bottom: 8px;
     padding: 10px 100px;
   }
   .em-btn2 {
     padding: 8px 35px;
   }
  #apply {
    width: 320px;
    height: 576px;
  }
  .apply p {
    width: 300px;
    margin-left: 10px;
}
  .apply-box {
    width: 300px;
    height: 260px;
    margin: 24px auto;
    padding: 22px 24px;
  }
  .btn2 {
    width: 300px;
    height: 48px;
    margin-top: 0;
    padding-top: 8px;
  }
  #end {
    width: 320px;
    height: 1998px;
    margin: 0 auto;
  }
  .end-content {
    width: 300px;
  }
}