/*GENERAL STYLES*/
html {font-size: 62.5%;}
body {font-size: 1.8rem; font-family: "Noto Sans", sans-serif; color: #272626;}
.carousel-item {height: 100vh;}
.first {background: #FA820A;}
.second {background: #0609BB;}
.carousel-caption {top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; opacity: 0;}
.col {text-align: left;}
.col:last-child {text-align: center;}
.title {font-size: 3rem; margin-top: 0;}
.carousel-indicators {margin-bottom: 0;}

/*FIRST SLIDE*/
.first .title, .first .desc {padding: 15px; background: #d37c32;}
.first .title {display: inline-block;}
.first .desc {font-size: 2rem;}
.first .list {list-style: none; padding: 0; margin: 30px 0;}
.first .list li {margin-bottom: 15px; }
.first .list li::before {content: '✔'; padding-right: 10px;}
.first img {display: block; margin: 0 auto;}
.first .pc-wrapper {position: relative; width: 250px; margin: 0 auto;}
.first .price {position: absolute; top: 90px; left: 40px; padding: 5px; background: #d9534f; transform: rotate(-45deg);}
.first button {margin-top: 40px; font-size: 1.8rem;}

/*SECOND SLIDE*/
.second .title {display: block; background: transparent;}
.second span {display: inline-block; padding: 15px; background: #33b6cb;}
.second .cms {position: relative; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; padding: 5px; margin: 50px auto 10px; background: #33b6cb; border-radius: 5px; }
.second .front {font-size: 8rem; backface-visibility: hidden;}
.second .info {width: 150px; font-size: 2.2rem; text-align: center; margin: 0 auto; opacity: 0; transform: translateY(40px)}
.second .back {display: none; transform: scale(0); backface-visibility: hidden;}
.second .back img {width: 110px;}
.second .source {font-style: italic; margin-top: 40px; opacity: 0; visibility: hidden;}
.second .source a {color: #fff;}

/*MSG*/
.msg {display: none; position: fixed; top: 5px; left: 50%; transform: translateX(-50%); padding: 7px; border: 5px solid #fff000; text-align: center; color: #fff; background: rgba(0, 0, 0, .85);}

/*JS DISABLED*/
.no-js .carousel-inner > .carousel-item {display: block;}
.no-js .carousel-caption, .no-js .second .info, .no-js .second .source {opacity: 1;}
.no-js .second .info {transform: none;}
.no-js .second .source {visibility: visible;}
.no-js .carousel-indicators {display: none;}
.no-js .msg {display: block;}

/*SOME BASIC STYLES FOR SMALL SCREENS*/
@media screen and (max-width: 767px) {
  body {font-size: 1.6rem;}
  .container {width: 100%;}
  .first p {display: none;}
  .first .pc-wrapper {width: 150px;}
  .first .price {top: 45px; left: 10px;}
  .first .pc {width: 150px; height: 150px;}
  .first .keyboard {width: 50px; height: 50px;}
  .second .cms {width: 100px; height: 100px;}
  .second .info {width: 100px;}
}