@charset "utf-8";
body{
  margin: 0;
  padding: 0;
  font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',"游ゴシック体","YuGothic","游ゴシック","Yu Gothic",'Meiryo','メイリオ', sans-serif;
}
.abs {
    position: absolute;
}
.rel {
    position: relative;
}
.mt10 {
    margin-top: 10px;
}
.mt30 {
    margin-top: 30px;
}
.red {
    color: rgb(255, 0, 87);
    font-weight: bold;
}
.blue {
    color: rgb(0, 102, 204);
    font-weight: bold;
}
.pblue {
    color: rgb(54, 168, 255);
    font-weight: bold;
}
.tac {
    text-align: center;
}
.tal {
    text-align: right;
}
.tar {
  text-align: right;
}
.anno {
    font-size: 12px;
}
.mark {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%,#ffff00 0%) repeat scroll 0 0;
}
.fsL {
    font-size: larger;
}
.fsLL {
    font-size: 24px;
}
#wrapper{
    margin: auto;
    padding: 15px 10px;
}
img,video {
    width: 100%;
}
img,video {
    vertical-align: middle;
}
.pc {
    display: block;
  }
   .sp {
    display: none;
  }

@media only screen and (min-width: 767px){
    body {
        background-color: #F4F4F4;
    }
    #wrapper{
        max-width: 620px;
        margin: auto;
        background: #fff;
    }
}

@media screen and (max-width:699px){
  .pc {
    display: none;
  }
   .sp {
    display: block;
  }
}

.pad {
    margin: 5% auto;
    width: 75%;
    display: block;
}

.downArrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
   .downArrow>span {
    width: 100px;
    height: 65px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
   .downArrow>span::before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 50%;
    height: 40%;
    background: #ffc8c8;
  }
   .downArrow>span::after {
    content: "";
    display: block;
    width: 100%;
    height: 60%;
    background: -webkit-gradient(linear, left bottom, right top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top left/50% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top right/50% 100% no-repeat;
    background: linear-gradient(to top right, transparent 49%, #ffc8c8 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #ffc8c8 50%) top right/50% 100% no-repeat;
  }
  .movebtn {
    -webkit-animation-name: btnAnime02;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    -moz-animation-name: btnAnime02;
    -moz-animation-duration: 1.5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease;
    align-items: flex-start;
    justify-content: center;
  }
  @-webkit-keyframes btnAnime02 {
    0% {
      -webkit-transform: translate(0, 0);
    }
    50% {
      -webkit-transform: translate(0, -8px);
    }
    100% {
      -webkit-transform: translate(0, 0);
    }
  }
  @-moz-keyframes btnAnime02 {
    0% {
      -moz-transform: translate(0, 0);
    }
    50% {
      -moz-transform: translate(0, -8px);
    }
    100% {
      -moz-transform: translate(0, 0);
    }
  }

.diffTable__area {
    margin: 0 auto;
  }
  .diffTable__area .head {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .diffTable__box {
    width: 100%;
    height: auto;
    border: 10px solid #baedff;
    box-sizing: border-box;
    margin-top: 20px;
  }
  .diffTable__area table {
    width: 100%;
    height: auto;
    border-collapse: collapse;
  }
  .diffTable__area table tr th:first-child:nth-last-child(5),
   .diffTable__area table tr th:first-child:nth-last-child(5)~th,
   .diffTable__area table tr td:first-child:nth-last-child(5),
   .diffTable__area table tr td:first-child:nth-last-child(5)~td {
    width: 20%;
    box-sizing: border-box;
  }
  .diffTable__area table tr th:first-child:nth-last-child(4),
   .diffTable__area table tr th:first-child:nth-last-child(4)~th,
   .diffTable__area table tr td:first-child:nth-last-child(4),
   .diffTable__area table tr td:first-child:nth-last-child(4)~td {
    width: 25%;
    box-sizing: border-box;
  }
  .diffTable__area table tr th:first-child:nth-last-child(3),
   .diffTable__area table tr th:first-child:nth-last-child(3)~th,
   .diffTable__area table tr td:first-child:nth-last-child(3),
   .diffTable__area table tr td:first-child:nth-last-child(3)~td {
    width: 33.33333%;
    box-sizing: border-box;
  }
  .diffTable__area table tr th,
   .diffTable__area table tr td {
    border-right: 2px dotted #c4c4c4;
    padding: 10px 5px;
  }
  .diffTable__area table tr th {
    vertical-align: bottom;
  }
  .diffTable__area table tr td {
    vertical-align: top;
  }
  .diffTable__area table tr th:last-of-type,
   .diffTable__area table tr td:last-of-type {
    border-right: none;
  }
  .diffTable__area table tr th a {
    display: block;
    width: 100%;
    height: auto;
    color: #1C7FC1;
    text-decoration: underline;
  }
  .diffTable__area table tr th a:hover,
   .diffTable__area table tr td a:hover {
    text-decoration: none;
  }
  .diffTable__area table tr th a .itemImg__box img {
    width: 100%;
    height: auto;
  }
  .diffTable__area table tr th.tableHead {
    background: #4dd1fb;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    padding: 5px;
  }
  .diffTable__area table tr th .rank {
    font-size: 3px;
    color: #dba728;
    text-align: center;
    margin-bottom: 5%;
    display: block;
  }

  .diffTable__area table tr td .evalu,
   .diffTable__area table tr td .text {
    text-align: center;
    display: block;
  }
  .diffTable__area table tr td .evalu {
    line-height: 1;
  }
  .diffTable__area table tr td .evalu.maru {
    line-height: 1.4;
  }
  .diffTable__area table tr td .text {
    font-size: 12px;
  }
   .bg-yellow {
    background: #ffffe6;
  }
   .color-red {
    color: #f8525d;
  }
   .color-blue {
    color: #7cd0dd;
  }
   .color-black {
    color: black;
  }
   .color-yellow {
    color: #ff9900;
  }
   .size-larger {
    font-size: 56px;
  }
   .size-large {
    font-size:25px;
  }
   .size-small {
    font-size: 10px;
    vertical-align: sub;
  }
   .weight-bold {
    font-weight: bold;
  }
   .weight-normal {
    font-weight: normal;
  }
   .align-top {
    vertical-align: text-top;
  }
  .star{
    color:#d4b45f;
  }
  /*-------------------------*/
  /* 比較表内のボタン */
.rankbtn {
  background: #ff9900;
  border-radius: 10px;
  box-shadow: 0px 4px 0px #a86500;
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1.2;
  padding: 5% 0 3%;
}

 .btn1gyo {
  padding: 13% 0;
}

.nom_hyo {
  font-weight: bold;
  font-size: 0.8em;
}

 .star_tr {
  text-align: center;
}

 .rankstar {
  color: #d4b45f;
}

 .yws_star {
  position: relative;
  letter-spacing: 0;
  color: #fff;
  margin: 0;
  padding: 0;
}



/* 半分欠ける星 */
.yws_star:before {
  content: "★★★★★";
  position: absolute;
  color: #d4b45f;
  width: calc(4.5em - 0 * (4.5em - .5em));
  overflow: hidden;
  white-space: nowrap;
}

 .yws_star02,
 .yws_star03 {
  position: relative;
  letter-spacing: 0;
  color: #fff;
  margin: 0;
  padding: 0;
}

 .yws_star02:before,
 .yws_star03:before {
  content: "★★★★★";
  position: absolute;
  color: #d4b45f;
  overflow: hidden;
  white-space: nowrap;
}

 .yws_star02:before {
  width: calc(3.5em - 0 * (3.5em - .5em));
}

 .yws_star03:before {
  width: calc(3.5em - 1em);
}


  @media screen and (max-width:600px) {
    .diffTable__box {
      overflow-x: scroll;
    }
    .diffTable__area table {
      width:500px;
    }
    .diffTable__area table tr th:first-child:nth-last-child(5),
     .diffTable__area table tr th:first-child:nth-last-child(5)~th,
     .diffTable__area table tr td:first-child:nth-last-child(5),
     .diffTable__area table tr td:first-child:nth-last-child(5)~td {
      min-width: 105px;
    }
    .diffTable__area table tr th:first-child:nth-last-child(4),
     .diffTable__area table tr th:first-child:nth-last-child(4)~th,
     .diffTable__area table tr td:first-child:nth-last-child(4),
     .diffTable__area table tr td:first-child:nth-last-child(4)~td {
      min-width: 105px;
    }
    .diffTable__area table tr th:first-child:nth-last-child(3),
     .diffTable__area table tr th:first-child:nth-last-child(3)~th,
     .diffTable__area table tr td:first-child:nth-last-child(3),
     .diffTable__area table tr td:first-child:nth-last-child(3)~td {
      min-width: 105px;
    }
    .diffTable__area table tr td .evalu {
      line-height: 1.4;
    }
     .size-larger {
      font-size: 40px;
    }
    .sp_th{
      height:30px;
    }
    .diffTable__area table tr th.tableHead {
      position: absolute;
      /* 高さ */
      height: 30px;
      line-height: 25px;
      left: 20px;
      right: 20px;
    }
    .diffTable__area table tr th.tableHead span {
      position: sticky;
      left: 0;
      right: 0;
      top: 0;
      display: block;
      width: calc(100vw - 70px);
    }
  }

  h5 {
    position: relative;
    background: #ffe877;
    box-shadow: 0px 0px 0px 5px #ffe877;
    border: dashed 2px white;
    padding: 0.7em 0.5em;
    color: #371509;
    text-align: center;
    margin: auto;
    font-size: 22px;
    margin-bottom: 20px;
    margin-top: 40px;
    width: 95%;
  }

   h5:after {
    position: absolute;
    content: '';
    left: -7px;
    top: -7px;
    border-width: 0 0 15px 15px;
    border-style: solid;
    border-color: #fff #fff #ffbc00;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  }

  h4 {
    position: relative;
    padding: 1rem 1rem;
    border: 2px solid #fff0ad;
    background: #ff7770;
    color: #fff;
    font-size: 1.5em;
    text-align: center;
    margin: 0 0 15px;
  }
  
   h4:before,
   h4:after {
    position: absolute;
    left: 0;
    width: 100%;
    content: '';
    border-top: 4px dotted #fff0ad;
  }
  
   h4:before {
    top: 6px;
  }
  
   h4:after {
    bottom: 6px;
  }

  .box {
    background: #e1f5fe;
    border: solid 2px #b3e5fc;
    border-radius: 5px;
    margin: 25px 0 25px 0;
    position: relative;
    padding: 0 20px;
    max-width: 100%;
  }
   .box .ttl {
    color: #03a9f4;
    font-weight: bold;
    text-shadow: #fff 3px 0px 0px, #fff 2.83487px 0.981584px 0px, #fff 2.35766px 1.85511px 0px, #fff 1.62091px 2.52441px 0px, #fff 0.705713px 2.91581px 0px,
      #fff -0.287171px 2.98622px 0px, #fff -1.24844px 2.72789px 0px, #fff -2.07227px 2.16926px 0px, #fff -2.66798px 1.37182px 0px, #fff -2.96998px 0.42336px 0px,
      #fff -2.94502px -0.571704px 0px, #fff -2.59586px -1.50383px 0px, #fff -1.96093px -2.27041px 0px, #fff -1.11013px -2.78704px 0px,
      #fff -0.137119px -2.99686px 0px, #fff 0.850987px -2.87677px 0px, #fff 1.74541px -2.43999px 0px, #fff 2.44769px -1.73459px 0px,
      #fff 2.88051px -0.838246px 0px;
    background: linear-gradient(0deg, #e1f5fe 0%, #e1f5fe 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
    position: relative;
    display: inline-block;
    top: -0.8em;
    left: -10px;
    padding: 0 10px;
    line-height: 1.5;
    margin: 0;
    z-index: 1;
    box-sizing: border-box;
  }
   .box .ttl:after {
    position: absolute;
    display: inline-block;
    top: calc(0.8em - 11px);
    left: 0;
    background: #ffffff;
    content: "";
    width: 100%;
    height: 11px;
    z-index: -1;
  }
   .box .box_cont {
    padding: 0 0 20px;
    z-index: -2;
  }
   .box .box_list {
    padding: 0;
    margin: 0;
    padding-left: 1em;
    margin-left: 1em;
    list-style-type: decimal;
    box-sizing: border-box;
  }
   .box .box_list li {
    padding: 0;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    margin: 0;
    position: relative;
    margin: 0;
    font-size: 15px;
    line-height: 22.5px;
    color: #333;
    font-weight: bold;
  }

.animate69 {
    text-align: center;
    animation: animate69 1.5s ease-in infinite;
    box-sizing: border-box;
  }
   a.a-btn {
    display: inline-block;
    text-decoration: none;
    max-width: 98% !important;
  }
   .cta {
    max-width: 500px;
    width: 100%;
    height: auto;
    margin: 6% auto 0;
  }

  @keyframes animate69 {
    0% {
      transform: skewX(9deg);
    }
    10% {
      transform: skewX(-8deg);
    }
    20% {
      transform: skewX(7deg);
    }
    30% {
      transform: skewX(-6deg);
    }
    40% {
      transform: skewX(5deg);
    }
    50% {
      transform: skewX(-4deg);
    }
    60% {
      transform: skewX(3deg);
    }
    70% {
      transform: skewX(-2deg);
    }
    80% {
      transform: skewX(1deg);
    }
    90% {
      transform: skewX(0deg);
    }
    100% {
      transform: skewX(0deg);
    }
  }

  h2 {
    position: relative;
    line-height: 1.3;
    padding: 16px 8px 13px 8px;
    background: #ffe877;
    color: #2f241d;
    font-size: 21px;
    margin: 40px 0 20px;
  }

h2.speech:before {
  border-top: 10px solid #ffe877;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  content: "";
  position: absolute;
  bottom: -10px;
  left: calc(50% - 10px);
}

  .slide {
    text-align: center;
    }
  .slide img {
    width: 80%;
    margin: 2% auto;
  }

.review_voice__wrap {
  max-width: 830px;
  width: 100%;
  margin: 0 auto 20px;
  padding: 0;
  line-height: 1.8;
  box-sizing: border-box;
}
.review_voice {
  border: 3px solid #ffe877;
  margin: 40px auto 10px;
  padding: 30px 20px;
  border-radius: 5px;
  position: relative;
  box-sizing: border-box;
}
.review_voice__ttl {
  margin: 0;
  margin-top: -50px;
  padding: 0 5px;
  display: block;
}
 .review_voice__ttl span {
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  background: #f9c1cf;
  border-radius: 5px;
  padding: 0 5px;
  display: inline-block;
  text-align: center;
  margin: 0;
}
.review_voice__lead {
  font-size: 13.33333px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.review_voice__lead .accent {
  font-size: 16px;
}
 .accent {
  color: #ff1975;
  font-weight: bold;
}
.review_voice__image {
  text-align: center;
  margin: 0;
  padding: 0;
  text-align: center;
}
 .review_voice__image img {
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.review_voice__text {
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.review_voice__caution {
  font-size: 10.66px;
  color: #999999;
  text-align: right;
}

blockquote {
  position: relative;
  margin: 1.0em auto 2.0em;
  padding: 30px 15px 25px;
  border: 2px solid #CCCCCC;
  background-color: #ffffcc;
  box-sizing: border-box;
}
 blockquote:before {
  content: "“";
  color: #CCCCCC;
  font-size: 500%;
  line-height: 0.8em;
  font-family: 'Times New Roman', sans-serif;
  position: absolute;
  left: 5px;
  top: 0;
}
 blockquote:after {
  content: "”";
  color: #CCCCCC;
  font-size: 500%;
  line-height: 0em;
  font-family: 'Times New Roman', sans-serif;
  position: absolute;
  right: 5px;
  bottom: 0;
}

 h3 {
  position: relative;
  line-height: 1.3;
  padding: 20px 8px 17px 8px;
  background: #6fc2ff;
  color: #ffffff;
  font-size: 21px;
  margin: 40px 0 30px;
}
h6 {
  padding: 10px 10px 3px;
  border-bottom: 3px solid #36a8ff;
  margin: 10px 0;
  font-size: 16px;
}

.purple>span::before {
  background: #d096bb;
}
.purple>span::after{
  background: -webkit-gradient(linear, left bottom, right top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top left/50% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top right/50% 100% no-repeat;
  background: linear-gradient(to top right, transparent 49%, #d096bb 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #d096bb 50%) top right/50% 100% no-repeat;
}




ul, ul li {
  list-style: none;
  padding: 0;
}

input:checked+.lists {
  display: block;
  padding: 25px 25px 25px;
  border: 4px solid rgb(255, 232, 119);
  z-index: 1;
  top: 60px;
}

.lists,
 .searchShop__area input[type="checkbox"] {
  display: none;
}

.searchShop__area {
  width: auto;
  max-width: auto;
  margin: auto;
  position: relative;
  top: 38px;
  background-color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.searchShop__area label {
  background-color: rgb(255, 232, 119);
  padding: 10px;
  position: absolute;
  top: -30px;
  color: black;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  font-size: 18px;
  z-index: 10;
  text-align: center;
  margin: .10rem;
  border-radius: 10px;
  border: 2px solid #e1e1e1;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.5rem;
  box-sizing: border-box;
  box-shadow: 0 4px 0px #6c6c6c75;
}

.lists {
  border: solid 2px rgb(255, 232, 119);
  padding: 0.5em;
  position: relative;
  margin-top: 0 !important;
}

.lists .list a {
  color: #007bff;
}
.lists .list a:hover {
  color: #0056b3;
}

.lists .list__inner {
  padding-left: 1.em;
}
.lists .detailList {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 0.2em;
  display: inline-block;
}
 .size-big {
  font-size: 18px;
}
 .weight-bold {
  font-weight: bold;
}
 .use h2 {
  margin-top: 0;
}
 h2 {
  position: relative;
  line-height: 1.4;
  padding: 20px 8px 17px 8px;
  background: #ffe877;
  color: #2f241d;
  font-size: 21px;
  margin: 0 0 30px;
}

 a.btn {
  font-size: 15px;
  background-color: #6fc2ff;
  border-bottom: 10px solid #1e90ff;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding: 1rem;
  border-radius: 0.5rem;
  top: 0;
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
}
 a.btn:hover {
  background: #ff8585;
  top: 3px;
  border-bottom: 2px solid #da5656;
  margin-bottom: 3px;
}