header.header::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
  background: #090508;
  z-index: 0;
}
#crumb,#crumb a,
header.header .title { color: #fff;}
#crumb ul li + li::before { border-color: #fff;}
.mainimg img { object-position: center top;}

main .inner.wide { width: 1160px;}
main .inner.narrow { width: 1080px;}
.mainimg figure { height: 750px;}

/*.dark {background: #090508; border-radius: 0 0 60px 60px; position: relative; z-index: 1;}*/
.dark {border-radius: 0 0 60px 60px; position: relative; z-index: 1;display: flow-root;}
.dark::before{
  content: "";
  position: absolute;
  z-index: 0;
  background: #090508;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  border-radius: 0 0 60px 60px;
}
/*body:not(.airdog-index) header.header + .dark::before{ height: calc(100% - 100px);}*/
.pink { color: #e4007f;}
sup { font-size: 45%; vertical-align: super; line-height: 1;}
.pb1 { padding-bottom: 1px;}
@media only screen and (max-width: 782px) {
  .mainimg figure { height: 95vw;}
}

ul.airdogs {
  margin-top: -100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
ul.airdogs li { 
  width: 25%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
ul.airdogs li a figcaption {
  color: #fff;
  margin: 10px 0;
  font-size: 145%;
  font-family: 'Poppins', sans-serif;
  border-radius: 50px;
  padding: 0 30px;
}
ul.airdogs li > a:hover { animation: bright 1s ease;}
ul.airdogs li > a img {
  transition: transform 0.5s ease, filter 0.5s ease;
}

@media only screen and (min-width: 783px) {
  ul.airdogs li { white-space: nowrap;}
  ul.airdogs li > a:hover img  {
    transform: translateY( -5px);
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
  }
  
}
@media only screen and (max-width: 782px) {
  ul.airdogs li { white-space: nowrap; width: 33.33%;}
  ul.airdogs li a figcaption { font-size: 12px;}
}

.pid-x8dpro ul.airdogs li.x8pro a figcaption,
.pid-x5d ul.airdogs li.x5d a figcaption,
.pid-x3d ul.airdogs li.x3d a figcaption,
.pid-others ul.airdogs li.others a figcaption {
  color: #000;
  background: #fff554;
}

.mitumori {
  display: flex;
  border: #41bdce 1px solid;
  padding: 40px 40px 20px;
  justify-content: space-between;
  font-size: 30px;
  flex-wrap: wrap;
  white-space: nowrap;
  line-height: 1.4;
  position: relative;
  color: #fff;
}
.mitumori::after {
  content: "";
  width: 340px;
  height: 70px;
  background: url("../img/airdog/jizen@2x.png") no-repeat left top / auto 100%;
  position: absolute;
  left: 40px;
  top: -28px;
}
.mitumori dt .large { margin-top: 0.5rem; font-weight: bold; display: block;}
.mitumori dt .small { font-size: 55%; display: block; margin: 1rem 0 2rem;}
.mitumori dd .tel { 
   display: block;
  font-size: 130%; 
  font-weight: 700;
  padding-left: 65px;
  background: url("../img/airdog/icon_tel@2x.png") no-repeat left 50% / 47px auto;
}
.mitumori dd .available {
   display: block;
  padding-left: 65px;
  font-size: 66%;
  font-weight: bold;
}

.bottomWhGrade {
  position: absolute;
  width: 100%;
  height: 100px;
  left: 0;
  margin-top: -100px;
  background: rgb(255,255,255);
  background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  z-index: 1;
}
.bottomWhGrade + *::before {
  content: "";
  width: 100%;
  height: 60px;
  background: #fff;
  position: absolute;
  left: 0;
  top: -1px;
  border-radius: 0 0 60px 60px;
}
@media only screen and (max-width: 782px) {
  .mitumori { white-space: normal;padding: 5vw;font-size: 20px;}
  .mitumori::after {
    width: 200px;
    height: 40px;
    left: 10px;
    top: -14px;
  }
  .mitumori dd .tel { font-size: 120%;padding-left: 35px;background-size: 30px auto;}
  .beforeBWG { padding-bottom: 50px;}
  .bottomWhGrade { height: 50px; margin-top: -50px;}
  .bottomWhGrade + *::before { border-radius: 0 0 40px 40px;}
}

.h3spec {
  font-size: 160%;
  font-weight: bold;
  color: #fff;
  margin: 30px 0 20px;
  line-height: 1.6;
}

table.spec {
  width: 100%;
  border-top: #343434 1px solid;
  border-collapse: collapse;
  color: #fff;
}
table.spec th,
table.spec td {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: #343434 1px solid;
}
table.spec th { padding-left: 40px; padding-right: 10px; text-align: left;}
table.spec td { text-align: left;}
table.spec td + td { padding-left: 10px; padding-right: 40px;}
table.spec tr:nth-child(even) th,
table.spec tr:nth-child(even) td { background-color: #191919;}
table.spec .large { font-size: 150%;}
table.spec td.img { vertical-align: bottom;}
table.spec td.img img{ padding-top: 50px; vertical-align: bottom;}

@media only screen and (max-width: 782px) {
  table.spec { width: calc(100% + 15vw); margin-left: -7.5vw;}
  table.spec th {
    display: none;
  }
  table.spec td {
    position: relative;
    padding: 50px 0 15px 5vw;
  }
  table.spec td + td { padding-right: 7px;}
  table.spec td .cloneOfTh {
    position: absolute;
    left: 5vw;
    top: 15px;
    font-weight: bold;
  }
}


.inner_1000 { width: 1000px; margin: 80px auto 0; max-width: 100%;}
.inner_1000 .priceText { text-align: center;}
.inner_1000 .mitumori { margin: 70px 0 0 0;}
.inner_1000 .small { font-size: 86%; color: #fff;}

@media only screen and (max-width: 782px) {
  .inner_1000 { margin: 40px auto 0;}
  .inner_1000 .mitumori { margin: 35px 0 0 0;}
}

.detail {
  color: #fff;
  display: flex;
  margin-top: 120px; 
  justify-content: space-between;
}
.detail figure { width: calc(100% - 540px); text-align: center;}
.detail .text { width: 500px;}
.pid-others .detail figure { width: calc(100% - 590px); text-align: center;}
.pid-others .detail .text { width: 550px;}
.detail h2 { margin-top: 0px;}
.detail h2 .small { font-size: 20px; font-weight: bold; display: block;}
.detail h2 .en { font-size: 85px; font-weight: 700; letter-spacing: 0; line-height: 1.3; display: block;}
.detail1 h2 .en { font-size: 60px; }
.detail h3 { margin-top: 10px; line-height: 1.5; font-size: 140%; font-weight: bold; letter-spacing: 0}
.pid-x8dpro .detail h3 { color:#f08300;}
.pid-x5d .detail h3 { color:#57c5f9;}
.pid-x3d .detail h3 { color:#fabf13;}
.pid-others .detail h3.green { color:#21d3ab;}
.pid-others .detail h3.pink { color:#e462dc;}
.pid-others .detail h3.orange { color:#ff6446;}
.detail ul.icons { display: flex; justify-content: space-between; margin: 40px 0;}
.pid-others .detail ul.icons { margin-right: 50px;}
.detail ul.icons li { max-width: calc(50% - 5px);}
.detail p.small { font-size: 86%; line-height: 1.6;}

@media only screen and (max-width: 782px) {
  .detail {
    display: block;
    margin-top: 60px; 
  }
  .detail > figure { display: none;}
  .detail .text { width: auto;}
  .detail h2 { margin-top: 0px;}
  .detail h2 .small { font-size: 12px;}
  .detail h2 .en { font-size: 45px; }
  .detail1 h2 .en { font-size: 60px; }
  .detail h3 { margin-top: 20px; font-size: 120%; }
  .detail ul.icons { display: flex; justify-content: space-between; margin: 20px 0;}
  .detail ul.icons li { max-width: calc(50% - 15px);}
}

.points {
  margin: 100px 0 0 -40px;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 80px);
  position: relative;
  color: #fff;
}
.points dl {
  width: calc(50% - 80px);
  box-sizing: border-box;
  margin: 0px 40px 80px;
}
.points dl.double {
  width: calc(100% - 80px);
  box-sizing: border-box;
  margin: 0px 40px 80px;
}
.points dt { text-align: center; font-size: 140%; position: relative; line-height: 1.6;}
.points dt figure { position: relative; margin-bottom: 30px;}
.points dl.double dt figure { background: #fff; border-radius: 20px; padding: 20px 0;}
.points dl.double dt figure.nopadding { padding: 0;}
.points dt figure img { position: relative; border-radius: 20px;}
.points dt figcaption {
  position: absolute;
  width: 150px;
  height: 40px;
  display: flex;
  left: calc(50% - 75px);
  bottom: -20px;
  background: #e72f7e;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  font-size: 75%;
  line-height: 1;
  color: #fff;
  letter-spacing: 0;
}
.points dt .photo {
  position: absolute;
  right: -57px;
  bottom: 0;
}
.points dd {
  margin-top: 20px;
}
.pid-others .points dd { text-align: center;margin-top: 5px;}
.xsmall { font-size: 75%;}

.bg_points {
  z-index: 1;
  position: relative;
  padding-bottom: 10vw;
}
.bg_points::before{
  content: "";
  position: absolute;
  z-index: 0;
  background: #090508 url("../img/x8dpro/bg_point@2x.jpg") no-repeat center calc(100% + 1px) / 100% auto;
  width: 100%;
  height: calc(100% - 100px);
  left: 0;
  bottom: 0;
}
.pid-others .bg_points {padding-bottom: 25vw;}
.pid-others .bg_points::before{ background-image: url("../img/others/bg_points@2x.jpg");}
.bg_points .basic { margin-bottom: 0;}
.bg_points + .bg_dark { padding-top: 80px;}
@media only screen and (max-width: 782px) {
  .points {
    margin: 10px 0px 0;
    width: auto;
  }
  .points dl,
  .points dl.double {
    width: auto;
    margin: 40px 0px 0;
  }
  .points dt figcaption {
    height: 30px;
    bottom: -15px;
  }
  .points dt .photo {
    position: absolute;
    right: -5vw;
    bottom: auto;
    width: 30vw;
    top: 50vw;
  }
  .bg_points {padding-bottom: 60vw;}
  .bg_points + .bg_dark { padding-top: 40px; padding-bottom: 50px;} 
  .bg_dark.pb1 { padding-bottom: 50px;}
}

.points dd .box {
  margin: 30px 20px 0;
  padding: 15px 20px;
  border: #fff 1px solid;
  border-radius: 20px;
  text-align: center;
}
.points dd .box.flx {
  display: flex;
  justify-content: space-around;
}
.points dd .box.flx > div {
  width: calc(50% - 50px);
  width: 40%;
}
.points dd .box h4 { font-size: 130%;}
.points dd .box p { margin-top: 5px;}

#noteSection h3 { font-size: 86%; font-weight: bold;}
#noteSection p { font-size: 75%; line-height: 1.7;}

.mb100 { margin-bottom: 100px !important;}
@media only screen and (max-width: 782px) {
  #noteSection { padding-bottom: 50px;}
  #noteSection .basic { margin-top: 40px;}
}