@charset "UTF-8";
/* CSS Document */

.column-box .col-33.pdx {
  padding-right: 1%;
  padding-left: 1%;
}
.contents-block h5 {
  font-size: inheirt;
  margin-bottom: 0.7em;
}

/* Mainvisual
**************************************************************/
.mainvisual-space {
  width: 100vw;
  height: 45vw;
  position: relative;
  margin-top: 90px;
}
.mainvisual-space .wonder-title {
  display: inline-block;
  padding: 0.75em 1.2em;
  border: 1px solid #fff;
  background: rgba(255,255,255,0.7);
  position: absolute;
  left: 1.2em;
  top: 40%;
  z-index: 2;
}
.mainvisual-space .wonder-title h2 {
  font-size: 2.0em;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
.mainvisual-space .wonder-title p {
  font-size: 1.15em;
  font-weight: 500;
}
.mainvisual-space .main-image img {
  width: 100vw;
  height: auto;
}
.mainvisual-space .main-image {
  width: 100%;
  height: 45vw;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: absolute;
  right: 0;
}
  
/*　Section
**************************************************************/
h2.section-title {
  font-size: 1.8em;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  padding: 0;
  margin: 0 auto 1.5em auto;
  position: relative;
}

/*　About
**************************************************************/
#about_wonder {
  padding-bottom: 30px;
  margin-bottom: 50px;
  position: relative;
}
#about_wonder::after {
  width: 100%;
  padding: 90px 30px 15px 30px;
  content: "rem Wonder BV";
  font-size:70px;
  color: #fff;
  font-weight: 900;
  line-height: 1.0;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url("../img/bg_orange.png") no-repeat;
  background-size: 100%;
  z-index: -1;
}
p.maincopy {
  font-size: 1.2em;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 1.5em 0;
  padding: 0 2.5%;
}

#trailer {
  padding-bottom: 0;
  margin-bottom: 30px;
  background: linear-gradient(to bottom, #fff 0%, #fff 70%, #33cccc 70%, #33cccc 100%);
  position: relative;
}

/*　Wonder 特別仕様
**************************************************************/
#wonder-sp {
  background: url("../img/bg_concept.png") no-repeat;
  background-size: 100%;
  background-position: bottom;
  margin-bottom: 30px;
}
dl.concept {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1.0em 0;
}
dl.concept dt {
  display: inline-block;
  width: 9.0em;
  height: 3.5em;
  font-size: 1.0em;
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  border-radius: 8px;
  background: #000;
  padding: 1.0em 0.5em;
  margin-right: 1.0em;
}
dl.concept dd {
  display: inline-block;
  width: calc(100% - 10em);
  padding-bottom: 1.5em;
}
dl.concept dt:nth-of-type(1) {
  background: #33ccff;
}
dl.concept dt:nth-of-type(2) {
  background: #ff6600;
}
dl.concept dt:nth-of-type(3) {
  background: #ff3399;
}

/*　特別装備一覧
**************************************************************/
#sp-list {
  padding-bottom: 0;
  background: url("../img/bg_yellow.png") no-repeat;
  background-position: bottom;
}

/*　レイアウト
**************************************************************/
#layout {
  background: linear-gradient(to bottom, #fff 0%, #fff 65%, #f5f5f5 65%, #f5f5f5 100%);
  margin-bottom: 30px;
}


/*　スペック
**************************************************************/
#spec {
  margin-bottom: 30px;
  background: url("../img/bg_pink.png") no-repeat;
  background-position: bottom;
  padding-bottom: 30px;
}

table.campingcar_spec {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  font-size: 14px;
}
table.campingcar_spec th, table.campingcar_spec td {
  border-top: 1px solid #ccc;
  padding: 8px;
}
table.campingcar_spec th {
  background: #f5f5f5;
  width: 30%;
}

/*　汎用クラス
**************************************************************/
/*シンプルリスト*/
ul.simple-list {
  list-style-type:none;
  margin:0.25em 0;
}
ul.simple-list li {
  line-height:1.5;
  list-style-type:none;
  padding:5px 2px 5px 1.0em;
  position:relative;
}
ul.simple-list li:before {
  position:absolute;
  display:inline-block;
  content:"●";
  left:0;
}
/*リストインライン化*/
ul.inline {
}
ul.inline li {
display:inline-block;
}
ul.inline::after {
display:block;
width:1px;
height:1px;
content:"";
clear:both;
}

/*　デバイス別調整
**************************************************************/
@media screen and (max-width: 1024px) {
  .contents-block {
    padding-bottom: 30px;
  }
  #about_wonder {
    padding-bottom: 90px;
  }
  #about_wonder::after {
    font-size:50px;
    padding:50px 30px 30px 30px;
  }
}

@media screen and (max-width: 600px) {
  .column-box .col-33 {
    width: 50%;
  }
  .column-box .col-33.col-sp-100 {
    width: 100%;
  }
  .column-box .col-33.col-sp-50 {
    width: 50%;
  }
  #about_wonder::after {
    font-size:40px;
  }
}