/** Auto generated at 2025-10-06 18:26:59 by less compiler. Don't edit this file. **/

@charset "utf-8";
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.image-hover {
  -webkit-filter: brightness(130%);
  filter: brightness(130%);
}
.fa-amazon {
  content: "\f270";
  font-family: FontAwesome;
}
.fa-quote-left {
  content: "\f10d";
  font-family: FontAwesome;
}
.fa-quote-right {
  content: "\f10e";
  font-family: FontAwesome;
}
.fa-envelope {
  content: "\f0e0";
  font-family: FontAwesome;
}
.fa-bars {
  content: "\f0c9";
  font-family: FontAwesome;
}
.fa-lock {
  content: "\f023";
  font-family: FontAwesome;
}
.fa-circle {
  content: "\f111";
  font-family: FontAwesome;
}
.fa-caret-right {
  content: "\f0da";
  font-family: FontAwesome;
}
.fa-chevron-right {
  content: "\f054";
  font-family: FontAwesome;
}
.fa-chevron-circle-left {
  content: "\f137";
  font-family: FontAwesome;
}
.fa-chevron-circle-right {
  content: "\f138";
  font-family: FontAwesome;
}
.fa-chevron-down {
  content: "\f078";
  font-family: FontAwesome;
}
.fa-chevron-left {
  content: "\f053";
  font-family: FontAwesome;
}
.fa-angle-right {
  content: "\f105";
  font-family: FontAwesome;
}
.fa-angle-double-right {
  content: "\f101";
  font-family: FontAwesome;
}
.fa-search-plus {
  content: "\f00e";
  font-family: FontAwesome;
}
.fa-search-minus {
  content: "\f010";
  font-family: FontAwesome;
}
.fa-trash {
  content: "\f1f8";
  font-family: FontAwesome;
}
.fa-plus-circle {
  content: "\f055";
  font-family: FontAwesome;
}
.fa-plus-square-o {
  content: "\f196";
  font-family: FontAwesome;
}
.fa-minus-square-o {
  content: "\f147";
  font-family: FontAwesome;
}
.fa-paperclip {
  content: "\f0c6";
  font-family: FontAwesome;
}
.fa-file-text-o {
  content: "\f0f6";
  font-family: FontAwesome;
}
.fa-rss {
  content: "\f09e";
  font-family: FontAwesome;
}
.fa-check-circle {
  content: "\f058";
  font-family: FontAwesome;
}
.fa-battery {
  content: "\f240";
  font-family: FontAwesome;
}
.fa-yen {
  content: "\f157";
  font-family: FontAwesome;
}
.fa-heart {
  content: "\f004";
  font-family: FontAwesome;
}
.fa-female {
  content: "\f182";
  font-family: FontAwesome;
}
.fa-diamond {
  content: "\f219";
  font-family: FontAwesome;
}
.fa-mobile {
  content: "\f10b";
  font-family: FontAwesome;
}
.fa-bolt {
  content: "\f0e7";
  font-family: FontAwesome;
}
.fa-bell {
  content: "\f0f3";
  font-family: FontAwesome;
}
.fa-clone {
  content: "\f24d";
  font-family: FontAwesome;
}
.fa-cloud {
  content: "\f0c2";
  font-family: FontAwesome;
}
.fa-money {
  content: "\f0d6";
  font-family: FontAwesome;
}
.fa-shopping-bag {
  content: "\f290";
  font-family: FontAwesome;
}
.fa-line-chart {
  content: "\f201";
  font-family: FontAwesome;
}
.fa-comments {
  content: "\f086";
  font-family: FontAwesome;
}
.fa-smile {
  content: "\f118";
  font-family: FontAwesome;
}
.fa-meh {
  content: "\f11a";
  font-family: FontAwesome;
}
.fa-frown {
  content: "\f119";
  font-family: FontAwesome;
}
.fa-info-circle {
  content: "\f05a";
  font-family: FontAwesome;
}
.fa-info {
  content: "\f129";
  font-family: FontAwesome;
}
.fa-tablet {
  content: "\f10a";
  font-family: FontAwesome;
}
.fa-star {
  content: "\f005";
  font-family: FontAwesome;
}
.fa-star-o {
  content: "\f006";
  font-family: FontAwesome;
}
.fa-times {
  content: "\f00d";
  font-family: FontAwesome;
}
.fa-times-circle {
  content: "\f057";
  font-family: FontAwesome;
}
.fa-paperclip {
  content: "\f0c6";
  font-family: FontAwesome;
}
.fa-question {
  content: "\f128";
  font-family: FontAwesome;
}
.fa-question-circle {
  content: "\f059";
  font-family: FontAwesome;
}
.fa-question-circle-o {
  content: "\f29c";
  font-family: FontAwesome;
}
.fa-check {
  content: "\f00c";
  font-family: FontAwesome;
}
.fa-fire {
  content: "\f06d";
  font-family: FontAwesome;
}
.fa-trophy {
  content: "\f091";
  font-family: FontAwesome;
}
.fa-arrow-up {
  content: "\f062";
  font-family: FontAwesome;
}
.fa-arrow-down {
  content: "\f063";
  font-family: FontAwesome;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;
  font-size: 1.5rem;
  color: #333;
}
a {
  color: #333;
  text-decoration: none;
}
#alert-adblocker,
noscript {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  color: #fff;
  text-align: center;
  padding-top: 20%;
  z-index: 9999;
}
#alert-adblocker p,
noscript p {
  font-size: 1.5em;
  margin: 0;
  padding: 0;
}
.content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 10px;
}
table.about {
  width: 100%;
}
table.about th {
  padding: 15px;
  font-weight: bold;
  width: 20%;
  text-align: right;
  vertical-align: top;
}
table.about td {
  padding: 15px;
  vertical-align: top;
}
.title-whitepaper {
  display: block;
  width: 100%;
}
.important-notice {
  margin: 10px;
  text-align: center;
}
.important-notice a {
  text-decoration: underline;
}
.x-box {
  margin: 10px auto;
}
.whitepaper-banner-top {
  text-align: center;
  margin: 10px auto 0;
  padding: 0 10px;
}
.whitepaper-banner-top img {
  width: 100%;
  max-width: 1080px;
}
.sns-box .inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.sns-box .button {
  display: flex;
  justify-content: center;
}
.sns-box .button a {
  display: block;
}
.sns-box .button a.twitter,
.sns-box .button a.facebook {
  margin-right: 20px;
}
.sns-box .button a.twitter {
  position: relative;
  top: 2px;
}
.sns-box .button a.twitter:before {
  content: '';
  width: 28px;
  height: 28px;
  background-image: url('/assets/img/icon_x.png');
  background-size: contain;
  display: block;
}
.sns-box .button a.facebook:before {
  font-family: 'FontAwesome';
  content: "\f230";
  display: block;
  font-size: 30px;
  color: #4267b2;
}
.sns-box .button a.line {
  position: relative;
  top: 1px;
}
.sns-box .button a.line:before {
  content: '';
  width: 28px;
  height: 28px;
  background-image: url('/assets/img/icon_line.png');
  background-size: contain;
  display: block;
}
.sns-box .user-info {
  padding: 10px;
  background-color: #FF9800;
  color: #fff;
  font-size: 1.4rem;
  display: inline-block;
}
.sns-box .user-info .name {
  font-weight: bold;
  font-size: 1.6rem;
  color: #FFF;
}
.sns-box .user-info .polite {
  font-size: 1.2rem;
  color: #FFF;
}
.sns-box .logout,
.sns-box .login {
  text-decoration: underline;
  font-size: 1.3rem;
}
.sns-box .login {
  display: flex;
  align-items: center;
}
.sns-box .login img {
  width: 150px;
  margin-right: 10px;
}
.lang-change {
  background-color: #1f1f1f;
  z-index: 10000;
}
.lang-change .btn-close {
  position: absolute;
  top: -5px;
  right: 0;
  width: 30px;
  height: 30px;
}
.lang-change .btn-close:before {
  color: #fff;
  content: "\f057";
  font-family: FontAwesome;
  font-size: 30px;
}
.lang-change .inner {
  max-width: 600px;
  padding: 10px 15px;
  margin: 0 auto;
}
.lang-change .inner .message-box {
  position: relative;
  padding: 0 30px;
}
.lang-change .inner .message {
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.lang-change .inner .buttons {
  display: flex;
  justify-content: center;
}
.lang-change .inner .buttons a {
  color: #fff;
  font-size: 1.6rem;
  border-radius: 5px;
  padding: 5px;
}
.lang-change .inner .buttons a.change-lang {
  background-color: #FF9800;
  margin-right: 10px;
}
.lang-change .inner .buttons a.force-current-lang {
  background-color: #fff;
  color: #FF9800;
}
hr.top-line {
  margin: 0;
  height: 10px;
  background-color: #060606;
}
.header-area {
  position: relative;
}
.mobile-menu {
  position: fixed;
  bottom: 0;
  top: 0;
  right: -300px;
  width: 300px;
  background-color: #fff;
  z-index: 1000;
  overflow: scroll;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.mobile-menu .header {
  height: 50px;
}
.mobile-menu .header a {
  height: 50px;
  width: 50px;
  position: absolute;
  right: 10px;
}
.mobile-menu .header a:before,
.mobile-menu .header a:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 2px;
  border-top: 2px solid #202020;
  transition: transform .5s linear;
  backface-visibility: hidden;
}
.mobile-menu .header a:before {
  transform: rotate(45deg);
}
.mobile-menu .header a:after {
  transform: rotate(-45deg);
}
.mobile-menu .header a.off:before,
.mobile-menu .header a.off:after {
  transform: rotate(0);
}
.mobile-menu ul {
  list-style: none;
}
.mobile-menu ul li {
  border-top: 1px solid #ddd;
  position: relative;
}
.mobile-menu ul li a {
  display: block;
  padding: 20px 20px 20px 30px;
  position: relative;
  line-height: 1.3em;
}
.mobile-menu ul li a:before {
  content: "\f0da";
  font-family: FontAwesome;
  font-size: 20px;
  position: absolute;
  top: calc(50% - 10px);
  left: 20px;
  color: #FF9800;
}
body.lang-en nav.pc li {
  width: 25%;
}
body.lang-en .columns .sidebox h3.selected:after {
  content: 'My';
}
body.lang-en .columns .sidebox h3.interests:after {
  content: 'Everyone\'s';
}
body.lang-en .detail-view .add-selected-area .add-selected:before {
  content: 'My favorite!';
}
nav.pc {
  zoom: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 10px;
}
nav.pc:before,
nav.pc:after {
  content: "";
  display: table;
}
nav.pc:after {
  clear: both;
}
nav.pc h1 {
  font-size: 2.5rem;
  font-weight: normal;
  letter-spacing: 0.2em;
  text-align: center;
  background-color: #FF9800;
  height: 60px;
  float: left;
}
nav.pc h1 a {
  display: block;
  padding-top: 20px;
  padding-bottom: 18px;
  width: 200px;
  color: #fff;
  position: relative;
  z-index: 0;
}
nav.pc h1 a .title {
  z-index: 10;
}
nav.pc ul {
  float: left;
  display: table;
  width: calc(100% - 200px);
}
nav.pc li {
  display: table-cell;
}
nav.pc li a {
  display: block;
  background-color: #464646;
  color: #fff;
  height: 60px;
  text-align: center;
}
nav.pc li a .main {
  display: block;
  font-weight: bold;
  padding-top: 8px;
  font-size: 2.0rem;
  letter-spacing: 0.2em;
}
nav.pc li a .sub {
  display: block;
  padding-top: 10px;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
}
nav.pc li a:hover,
nav.pc li a:active,
nav.pc li a.active {
  background-color: #060606;
}
nav.mobile {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
}
nav.mobile h1 {
  position: absolute;
  width: 200px;
  left: calc(50% - 100px);
  font-size: 2.5rem;
  font-weight: normal;
  letter-spacing: 0.2em;
  text-align: center;
  background-color: #FF9800;
}
nav.mobile h1 a {
  display: block;
  color: #fff;
  padding: 13px 0;
}
nav.mobile a.menu {
  position: absolute;
  width: 50px;
  height: 50px;
  right: 0;
  top: 0;
  font-size: 40px;
  top: 6px;
  color: #202020;
}
nav.pc h1 a .number,
nav.mobile h1 a .number {
  position: absolute;
  top: 2px;
  right: -10px;
  background-color: #CA1515;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.1px;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 13px;
  transform: skewX(-10deg);
  display: inline-block;
}
nav.pc h1 a .number .value,
nav.mobile h1 a .number .value {
  font-size: 16px;
  display: inline-block;
  margin: 0 2px;
}
nav.pc h1 a .number .unit,
nav.mobile h1 a .number .unit {
  font-size: 12px;
}
nav.pc h1 a .number:before,
nav.mobile h1 a .number:before {
  position: absolute;
  content: '';
  display: block;
  bottom: -8px;
  right: 10px;
  border-top: 4px #CA1515 solid;
  border-left: 4px #CA1515 solid;
  border-right: 4px transparent solid;
  border-bottom: 4px transparent solid;
}
nav.pc h1 a .number:after,
nav.mobile h1 a .number:after {
  font-family: 'FontAwesome';
  content: "\f12a";
  font-size: 16px;
  display: inline-block;
  font-weight: normal;
  margin-left: 3px;
}
nav.mobile h1 a .number {
  font-size: 10px;
}
nav.mobile h1 a .number .value {
  font-size: 11px;
}
nav.mobile h1 a .number .unit {
  font-size: 10px;
}
nav.mobile h1 a .number:after {
  font-size: 10px;
}
.top-search-box {
  max-width: 700px;
  margin: 10px auto;
}
.top-search-box input {
  width: calc(100% - 150px);
  padding: 10px;
  height: 26px;
  display: inline-block;
  margin-left: 10px;
  font-size: 20px;
  color: #333;
}
.top-search-box input:focus {
  box-shadow: none;
  outline: none;
}
.top-search-box a {
  display: inline-block;
  padding: 10px;
  background-color: #FF9800;
  color: #fff;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  position: relative;
  left: -1px;
}
h1.catch {
  font-size: 3.0rem;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin: 30px 0;
  position: relative;
  text-align: center;
  background-color: #464646;
  color: #fff;
  padding: 10px;
  line-height: 1.6em;
  border-left: 1px solid #060606;
}
h1.catch:before {
  content: '';
  display: block;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #464646;
  border-bottom: 15px solid transparent;
  position: absolute;
  left: calc(50% - 20px);
  bottom: -29px;
}
.select-yourfones {
  font-size: 3.5rem;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin: 90px 0;
  line-height: 1.3em;
}
.select-yourfones .number {
  display: inline-block;
  transform: skewX(-10deg);
  background-color: #CA1515;
  color: #fff;
  font-size: 4.0rem;
  padding: 10px 10px 0;
  line-height: 1em;
  font-weight: bold;
  margin: 0 5px;
}
.select-yourfones .unit {
  font-size: 3.0rem;
  font-weight: normal;
}
ul.select-types {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
ul.select-types a {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  color: #fff;
  display: block;
  background-color: #464646;
  margin: 10px;
  position: relative;
}
ul.select-types a .icon {
  position: absolute;
  left: 80px;
  top: 30px;
}
ul.select-types a .desc {
  position: absolute;
  text-align: center;
  top: 90px;
  left: 10px;
  right: 10px;
  font-size: 2.6rem;
  line-height: 1.2em;
  letter-spacing: 0.1em;
}
ul.select-types li.inch a {
  background-color: #983857;
}
ul.select-types li.inch .icon {
  top: 20px;
  left: 75px;
  font-size: 55px;
}
ul.select-types li.inch .icon:before {
  content: "\f24d";
  font-family: FontAwesome;
}
ul.select-types li.new a {
  background-color: #4C6FAF;
}
ul.select-types li.new .icon {
  top: 20px;
  left: 75px;
  font-size: 60px;
}
ul.select-types li.new .icon:before {
  content: "\f06d";
  font-family: FontAwesome;
}
ul.select-types li.high a {
  background-color: #333296;
}
ul.select-types li.high .icon {
  top: 20px;
  left: 85px;
  font-size: 60px;
}
ul.select-types li.high .icon:before {
  content: "\f0e7";
  font-family: FontAwesome;
}
ul.select-types li.battery a {
  background-color: #D07E29;
}
ul.select-types li.battery .icon {
  top: 20px;
  left: 65px;
  font-size: 60px;
}
ul.select-types li.battery .icon:before {
  content: "\f240";
  font-family: FontAwesome;
}
ul.select-types li.female a {
  background-color: #3C6F22;
}
ul.select-types li.female .icon {
  top: 20px;
  left: 77px;
  font-size: 60px;
}
ul.select-types li.female .icon:before {
  content: "\f182";
  font-family: FontAwesome;
}
ul.select-types li.light a {
  background-color: #AF4C9E;
}
ul.select-types li.light .icon {
  top: 20px;
  left: 69px;
  font-size: 60px;
}
ul.select-types li.light .icon:before {
  content: "\f0c2";
  font-family: FontAwesome;
}
ul.select-types li.lowprice a {
  background-color: #ADAF4C;
}
ul.select-types li.lowprice .icon {
  top: 20px;
  left: 75px;
  font-size: 50px;
}
ul.select-types li.lowprice .icon:before {
  content: "\f290";
  font-family: FontAwesome;
}
ul.select-types li.zenfone a {
  background-color: #4E4CAF;
}
ul.select-types li.zenfone .icon {
  top: 25px;
  left: 85px;
  font-size: 50px;
}
ul.select-types li.zenfone .icon:before {
  content: 'Z';
  color: #fff;
  font-weight: bold;
}
ul.select-types li.premium a {
  background-color: #AF7A4C;
}
ul.select-types li.premium .icon {
  top: 20px;
  left: 70px;
  font-size: 50px;
}
ul.select-types li.premium .icon:before {
  content: "\f219";
  font-family: FontAwesome;
}
ul.select-types li.budget:nth-of-type(1) a {
  background-color: #949625;
}
ul.select-types li.budget:nth-of-type(2) a {
  background-color: #3FAF90;
}
ul.select-types li.budget:nth-of-type(3) a {
  background-color: #43AB36;
}
ul.select-types li.budget:nth-of-type(4) a {
  background-color: #16501B;
}
ul.select-types li.budget a {
  border-radius: 0;
}
ul.select-types li.budget .icon {
  top: 25px;
  left: 85px;
  font-size: 50px;
}
ul.select-types li.budget .icon:before {
  content: "\f157";
  font-family: FontAwesome;
}
ul.select-types li.series a {
  background-color: #386798;
  border-radius: 0;
  font-size: 2.6rem;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.2em;
  position: relative;
}
ul.select-types li.series a span {
  position: absolute;
  top: 50px;
  left: 5px;
  right: 5px;
  bottom: 50px;
  display: block;
  text-align: center;
}
ul.select-types li.series a:before {
  content: '';
  display: block;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #386798;
  border-bottom: 15px solid transparent;
  position: absolute;
  left: calc(50% - 20px);
  bottom: -30px;
}
ul.select-types li.carrier a {
  font-size: 4.0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
}
ul.select-types li.carrier.docomo a {
  background-color: #fff;
  font-weight: bold;
  color: #cc3341;
  border: 3px solid #cc3341;
  background-image: url('/assets/img/docomo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 173.6px 42px;
}
ul.select-types li.carrier.au a {
  font-size: 5.0rem;
  border: 3px solid #eb5504;
  background-image: url('/assets/img/au.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 127.2px 48px;
  background-color: #fff;
}
ul.select-types li.carrier.softbank a {
  background-color: #fff;
  border: 3px solid #b7bbbe;
  color: #000;
  background-image: url('/assets/img/softbank.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 183.6px 30.6px;
}
ul.select-types li.carrier.rakuten a {
  background-color: white;
  border: 3px solid #FF008C;
  background-image: url('/assets/img/rakuten.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
ul.select-types li.carrier.simfree a {
  text-align: center;
  background-color: #212121;
  color: #fff;
}
ul.select-diffs {
  list-style: none;
}
ul.select-diffs li {
  margin-bottom: 20px;
  font-size: 2.0rem;
}
ul.select-diffs a {
  font-weight: bold;
  display: inline-block;
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}
ul.select-diffs a:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: -2px;
  left: 0;
}
ul.select-diffs a:hover {
  text-decoration: underline;
}
ul.select-diffs p {
  font-size: 1.8rem;
  margin-left: 30px;
}
.select-diffs-goto-list {
  text-align: right;
  margin-bottom: 10px;
}
.select-diffs-goto-list a {
  background-color: #464646;
  color: #fff;
  padding: 10px;
  display: inline-block;
  padding-left: 30px;
  position: relative;
}
.select-diffs-goto-list a:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: 8px;
  left: 10px;
}
.slider {
  background-color: #F1F1F1;
}
.slider ul.slick-slider li.slide {
  display: block;
}
.slider li.slide {
  position: relative;
  display: none;
  height: 400px;
  width: 1000px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  potision: relative;
}
.slider li.slide.slide1 {
  background-image: url('/assets/img/slide1.jpg');
  background-position: center -120px;
}
.slider li.slide.slide2 {
  background-image: url('/assets/img/slide2.jpg');
  background-position: center -120px;
}
.slider li.slide.slide3 {
  background-image: url('/assets/img/slide3.jpg');
  background-position: center -120px;
}
.slider li.slide.slide4 {
  background-image: url('/assets/img/slide4.jpg');
  background-position: center -120px;
}
.slider li.slide.slide5 {
  background-image: url('/assets/img/slide5.jpg');
  background-position: center 0px;
}
.slider li.slide.slide6 {
  background-image: url('/assets/img/slide6.jpg');
  background-position: center -120px;
}
.slider li.slide.slide7 {
  background-image: url('/assets/img/slide7.jpg');
  background-position: center -400px;
}
.slider li.slide.slide8 {
  background-image: url('/assets/img/slide8.jpg');
  background-position: center -120px;
}
.slider li.slide.slide9 {
  background-image: url('/assets/img/slide9.jpg');
  background-position: center -120px;
}
.slider li.slide.slide10 {
  background-image: url('/assets/img/slide10.jpg');
  background-position: center -120px;
}
.slider li.slide.slide11 {
  background-image: url('/assets/img/slide11.jpg');
  background-position: center -120px;
}
.slider li.slide.slide12 {
  background-image: url('/assets/img/slide12.jpg');
  background-position: center -120px;
}
.slider li.slide.slide13 {
  background-image: url('/assets/img/slide13.jpg');
  background-position: center 0px;
}
.slider li.slide.slide14 {
  background-image: url('/assets/img/slide14.jpg');
  background-position: center -250px;
}
.slider li.slide.slide15 {
  background-image: url('/assets/img/slide15.jpg');
  background-position: center -350px;
}
.slider li.slide.en-slide1 {
  background-image: url('/assets/img/en/slide1.jpg');
}
.slider li.slide.en-slide2 {
  background-image: url('/assets/img/en/slide2.jpg');
}
.slider li.slide.en-slide3 {
  background-image: url('/assets/img/en/slide3.jpg');
}
.slider li.slide .box {
  position: absolute;
  top: 100px;
  left: calc(50% - 300px);
  color: #fff;
  text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
}
.slider li.slide .box .main {
  font-size: 3.6rem;
  letter-spacing: 0.2em;
  line-height: 1.5em;
}
.slider li.slide .box .sub {
  margin: 60px 0 0 100px;
  font-size: 3.6rem;
  letter-spacing: 0.2em;
  line-height: 1.5em;
}
.slider li.slide .box .main span,
.slider li.slide .box .sub span {
  font-size: 4.3rem;
}
.slider li.slide .button {
  position: absolute;
  bottom: 30px;
  left: calc(50% + 50px);
  display: block;
  background-color: #464646;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 10px 50px;
}
.slider ul.slick-dots {
  bottom: 5px;
}
.slider ul.slick-dots li.slick-active button:before {
  background-olor: #464646;
  opacity: 1;
}
.slider ul.slick-dots button:before {
  background-color: #464646;
  opacity: 0.8;
  content: '';
  width: 15px;
  height: 15px;
}
.breadcrumbs {
  max-width: 1280px;
  margin: 2px auto 0px;
  padding: 0 10px;
}
.breadcrumbs ul {
  list-style: none;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.breadcrumbs ul li {
  color: #fff;
  background-color: #464646;
  margin-bottom: 1px;
}
.breadcrumbs ul li a:hover {
  background-color: #060606;
}
.breadcrumbs ul li a,
.breadcrumbs ul li span {
  color: #fff;
  display: inline-block;
  padding: 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  position: relative;
}
.breadcrumbs ul li a,
.breadcrumbs ul li span {
  padding-left: 25px;
}
.breadcrumbs ul li a:before,
.breadcrumbs ul li span:before {
  content: '';
  border-left: 15px solid #fff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid transparent;
  position: absolute;
  right: -31px;
  top: 0;
}
.breadcrumbs ul li a:after,
.breadcrumbs ul li span:after {
  content: '';
  border-left: 15px solid #464646;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid transparent;
  position: absolute;
  right: -30px;
  top: 0;
  z-index: 1;
}
.breadcrumbs ul li a:hover:after {
  border-left: 16px solid #060606;
}
body.hakusyo .columns .corner {
  width: 100%;
}
.columns {
  display: flex;
}
.columns .corner {
  width: calc(100% - 320px);
  margin-right: 20px;
}
.columns .sidebox {
  width: 300px;
}
.columns .sidebox .side-banner {
  margin-bottom: 20px;
}
.columns .sidebox .side-banner a {
  display: block;
}
.columns .sidebox .side-banner img {
  width: 100%;
}
.columns .sidebox h3 {
  font-size: 20px;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #464646;
  font-weight: normal;
  padding: 20px 20px 20px 40px;
  position: relative;
  line-height: 1em;
}
.columns .sidebox h3:before {
  content: '';
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 0;
  border-left: 30px solid #fff;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.columns .sidebox h3.selected {
  background-color: #FF9800;
}
.columns .sidebox h3.selected:after {
  content: 'わたしの';
  border: 1px solid #FF9800;
  background-color: #fff;
  color: #FF9800;
  display: block;
  position: absolute;
  top: -15px;
  left: 35px;
  font-size: 14px;
  padding: 2px;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.columns .sidebox h3.sales {
  margin-top: 20px;
  background-color: #983857;
}
.columns .sidebox h3.sales:after {
  content: '毎日更新!';
  border: 1px solid #983857;
  background-color: #fff;
  color: #983857;
  display: block;
  position: absolute;
  top: -15px;
  left: 35px;
  font-size: 14px;
  padding: 2px;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.columns .sidebox h3.interests {
  background-color: #3C6F22;
}
.columns .sidebox h3.interests:after {
  content: 'みんなの!';
  border: 1px solid #3C6F22;
  background-color: #fff;
  color: #3C6F22;
  display: block;
  position: absolute;
  top: -15px;
  left: 35px;
  font-size: 14px;
  padding: 2px;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.columns .sidebox .notice {
  display: block;
  letter-spacing: 0.1em;
  font-size: 15px;
  padding: 10px 10px 10px 10px;
  position: relative;
  text-align: left;
  border: 1px dashed #ccc;
  line-height: 1.7em;
}
.columns .sidebox .notice .star:before {
  content: "\f005";
  font-family: FontAwesome;
  color: #FF9800;
  font-size: 35px;
}
.columns .sidebox .notice .yourfones-check {
  color: #fff;
  background-color: #CA1515;
  content: 'yourfones check!';
  border: 2px solid #CA1515;
  display: inline-block;
  padding: 5px;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.columns .sidebox .head,
.columns .sidebox .head-sales,
.columns .sidebox .head-interests {
  text-align: right;
  padding: 10px 0 10px 10px;
}
.columns .sidebox .go-diff,
.columns .sidebox .view-list {
  display: inline-block;
  background-color: #464646;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.1em;
  padding: 10px;
}
.columns .sidebox .go-diff:after,
.columns .sidebox .view-list:after {
  content: "\f138";
  font-family: FontAwesome;
  color: #fff;
  display: inline-block;
  margin-left: 5px;
}
.columns .sidebox ul {
  list-style: none;
  padding: 10px;
  margin-bottom: 30px;
}
.columns .sidebox ul li {
  margin-bottom: 10px;
  display: flex;
}
.columns .sidebox ul li:hover {
  outline: 2px solid #ccc;
}
.columns .sidebox ul.selected a.spec {
  width: calc(100% - 50px);
  display: flex;
}
.columns .sidebox ul.selected a.delete {
  width: 50px;
  position: relative;
}
.columns .sidebox ul.selected a.delete:before {
  content: "\f057";
  font-family: FontAwesome;
  font-size: 20px;
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
}
.columns .sidebox ul.selected img {
  max-height: 80px;
  height: 100%;
}
.columns .sidebox ul.selected .text {
  width: calc(100% - 50px);
  font-size: 1.5rem;
  display: block;
  padding: 5px;
  position: relative;
}
.columns .sidebox ul.selected .name {
  font-size: 1.5rem;
  display: block;
}
.columns .sidebox ul.selected .price {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1.3rem;
  display: inline-block;
  color: #fff;
  background-color: #FF9800;
  padding: 5px;
}
.columns .sidebox ul.sales li,
.columns .sidebox ul.interests li {
  position: relative;
}
.columns .sidebox ul.sales li a,
.columns .sidebox ul.interests li a {
  width: 100%;
  display: flex;
}
.columns .sidebox ul.sales li img,
.columns .sidebox ul.interests li img {
  max-height: 80px;
  height: 100%;
}
.columns .sidebox ul.sales li .icon,
.columns .sidebox ul.interests li .icon {
  position: absolute;
  left: -5px;
}
.columns .sidebox ul.sales li .icon:before,
.columns .sidebox ul.interests li .icon:before {
  font-size: 40px;
  color: #983857;
  content: "\f111";
  font-family: FontAwesome;
  position: absolute;
}
.columns .sidebox ul.sales li .icon:after,
.columns .sidebox ul.interests li .icon:after {
  content: '1';
  position: absolute;
  color: #fff;
  top: 10px;
  left: 10px;
  font-size: 20px;
}
.columns .sidebox ul.sales li .text,
.columns .sidebox ul.interests li .text {
  width: calc(100% - 50px);
  position: relative;
  padding: 5px;
}
.columns .sidebox ul.sales li .name,
.columns .sidebox ul.interests li .name {
  font-size: 1.5rem;
  display: block;
}
.columns .sidebox ul.sales li .price,
.columns .sidebox ul.interests li .price {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1.3rem;
  display: inline-block;
  color: #fff;
  background-color: #FF9800;
  padding: 5px;
}
.columns .sidebox ul.sales li:nth-child(1) .icon:before,
.columns .sidebox ul.interests li:nth-child(1) .icon:before {
  color: #887200;
}
.columns .sidebox ul.sales li:nth-child(1) .icon:after,
.columns .sidebox ul.interests li:nth-child(1) .icon:after {
  content: '1';
}
.columns .sidebox ul.sales li:nth-child(2) .icon:before,
.columns .sidebox ul.interests li:nth-child(2) .icon:before {
  color: #777;
}
.columns .sidebox ul.sales li:nth-child(2) .icon:after,
.columns .sidebox ul.interests li:nth-child(2) .icon:after {
  content: '2';
}
.columns .sidebox ul.sales li:nth-child(3) .icon:before,
.columns .sidebox ul.interests li:nth-child(3) .icon:before {
  color: #442e18;
}
.columns .sidebox ul.sales li:nth-child(3) .icon:after,
.columns .sidebox ul.interests li:nth-child(3) .icon:after {
  content: '3';
}
.columns .sidebox ul.sales li:nth-child(4) .icon:after,
.columns .sidebox ul.interests li:nth-child(4) .icon:after {
  content: '4';
}
.columns .sidebox ul.sales li:nth-child(5) .icon:after,
.columns .sidebox ul.interests li:nth-child(5) .icon:after {
  content: '5';
}
h1.corner-title {
  font-size: 3.0rem;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin: 30px 0;
  position: relative;
  text-align: center;
  background-color: #464646;
  color: #fff;
  padding: 10px;
  line-height: 50px;
  border-left: 1px solid #060606;
}
h1.corner-title:before {
  content: '';
  display: block;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #464646;
  border-bottom: 15px solid transparent;
  position: absolute;
  left: calc(50% - 20px);
  bottom: -29px;
}
article.corner .description {
  margin: 10px 20px;
}
article.corner .description a {
  text-decoration: underline;
}
article.corner p {
  margin-bottom: 10px;
  letter-spacing: 0.1em;
  font-size: 1.8rem;
  line-height: 1.7em;
}
article.corner .inches {
  list-style: none;
}
article.privacy h2 {
  font-size: 2.4rem;
  font-weight: normal;
  letter-spacing: 0.2em;
  margin: 30px 0;
  position: relative;
  padding: 10px 20px 10px 20px;
  line-height: 1.2em;
  border-left: 1px solid #060606;
}
article.privacy h3 {
  font-size: 2.0rem;
  font-weight: bold;
  padding: 0;
  margin: 30px 0 15px 10px;
}
article.privacy p {
  font-size: 1.8rem;
  line-height: 1.9em;
  padding: 10px;
}
article.privacy a {
  text-decoration: underline;
}
article.user-register .lead-body {
  margin-bottom: 10px;
  letter-spacing: 0.1em;
  font-size: 1.8rem;
  line-height: 1.2em;
}
article.user-register .error {
  color: #CA1515;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid #CA1515;
  padding: 10px;
}
article.user-register table {
  width: 100%;
}
article.user-register form {
  margin: 100px auto;
  max-width: 600px;
}
article.user-register form label {
  font-size: 20px;
}
article.user-register form input[type=text] {
  padding: 10px;
  display: inline-block;
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}
article.user-register form input[type=submit] {
  padding: 10px;
  display: inline-block;
  font-size: 20px;
  color: #333;
}
.inch-diff-box {
  overflow-x: auto;
}
.bg-grid {
  background-color: #FFF;
  padding: 30px 30px 50px 30px;
  background-image: -webkit-linear-gradient(transparent 95%,#BFE2B0 50%,#BFE2B0), -webkit-linear-gradient(0deg,transparent 95%,#BFE2B0 50%,#BFE2B0);
  background-size: 1cm 1cm;
  background-repeat: repeat;
}
.foneboard[data-fonesize='small'] {
  width: calc(200% - 40px);
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
.foneboard[data-fonesize='xsmall'] {
  width: calc(500% - 40px);
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
.target-button {
  text-align: center;
  margin-bottom: 5px;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}
.target-button button {
  padding: 5px 10px;
  font-size: 1.5rem;
  border: 1px solid #464646;
  background-color: #fff;
  margin-right: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.target-button button:focus {
  outline: none;
}
.target-button button:active,
.target-button button:focus,
.target-button button.active {
  color: #fff;
  background-color: #464646;
}
.target-button button.sp:before {
  content: "\f10b";
  font-family: FontAwesome;
  display: inline-block;
  font-size: 4.0rem;
  margin-right: 5px;
}
.target-button button.tb {
  margin-right: 0;
}
.target-button button.tb:before {
  content: "\f10a";
  font-family: FontAwesome;
  display: inline-block;
  font-size: 4.0rem;
  margin-right: 5px;
}
.fonesize-button {
  margin: 0px 0px 20px;
  text-align: center;
}
.fonesize-button a {
  display: inline-block;
  padding: 10px 10px 10px 40px;
  border: 1px solid #464646;
  position: relative;
}
.fonesize-button a[data-mode='large']:before {
  top: 5px;
  left: 10px;
  position: absolute;
  font-size: 25px;
  content: "\f00e";
  font-family: FontAwesome;
  padding-right: 10px;
}
.fonesize-button a[data-mode='small']:before {
  top: 5px;
  left: 10px;
  position: absolute;
  font-size: 25px;
  content: "\f010";
  font-family: FontAwesome;
  padding-right: 10px;
}
.fonesize-button a[data-mode='xsmall'] {
  letter-spacing: 0.2em;
}
.fonesize-button a[data-mode='xsmall']:before {
  top: 8px;
  left: 7px;
  position: absolute;
  font-size: 13px;
  content: "\f010";
  font-family: FontAwesome;
  padding-right: 5px;
}
.fonesize-button a[data-mode='xsmall']:after {
  top: 14px;
  left: 20px;
  position: absolute;
  font-size: 13px;
  content: "\f010";
  font-family: FontAwesome;
  padding-right: 5px;
}
.fonesize-button a.active,
.fonesize-button a:hover {
  background-color: #464646;
  color: #fff;
}
.preparation .circle {
  width: 2cm;
  height: 2cm;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  background-color: #464646;
  margin: 0 auto;
  position: relative;
}
.preparation .circle .desc {
  position: absolute;
  top: 17px;
  left: 0;
  right: 0;
  letter-spacing: 0.1em;
  line-height: 1.3em;
}
.preparation .guide {
  margin-top: 20px;
  font-size: 1.3rem;
  text-align: center;
}
.button-area {
  margin: 80px 0;
}
.button-area .button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  text-align: center;
  color: #fff;
  width: 300px;
  background-color: #464646;
  font-size: 2.0rem;
  letter-spacing: 0.1em;
}
.button-area .button:hover {
  background-color: #060606;
}
ul.select-inches {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
}
ul.select-inches li {
  margin: 30px 5px 5px;
}
.select-inches .fone.selectable {
  cursor: pointer;
}
.select-inches .fone.selectable[data-selected=true]:before {
  content: "\f058";
  font-family: FontAwesome;
  position: absolute;
  top: calc(50% - 150px);
  right: calc(50% - 50px);
  color: #CA1515;
  z-index: 100;
  font-size: 10.0rem;
}
.specs-list .fone.selectable {
  cursor: move;
}
.specs-list .fone.selectable .footer {
  position: absolute;
  bottom: 10px;
  right: 10px;
  left: 10px;
}
.specs-list .fone.selectable .footer .icon {
  cursor: pointer;
  float: left;
  font-size: 60px;
}
.specs-list .fone.selectable .footer .icon:before {
  content: "\f006";
  font-family: FontAwesome;
  color: #FF9800;
}
.specs-list .fone.selectable .footer .detail-button {
  position: relative;
  top: 20px;
  padding: 10px;
  background-color: #CA1515;
  color: #fff;
  display: block;
  float: right;
}
.specs-list .fone.selectable .footer .detail-button:hover {
  background-color: #790E0E;
}
.specs-list .fone.selectable[data-selected=true] .footer .icon:before {
  content: "\f005";
  font-family: FontAwesome;
  color: #FF9800;
}
.control-message {
  text-align: center;
  margin: 5px;
}
ul.specs-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
  position: relative;
}
ul.specs-list .placeholder {
  box-sizing: border-box;
  border: 10px dashed #bbb;
}
ul.specs-list.battery .fone > .icon,
ul.specs-list.light .fone > .icon {
  position: absolute;
  display: inline-block;
  background-color: #983857;
  font-size: 20px;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  top: -50px;
  left: calc(50% - 80px);
  font-weight: bold;
}
ul.specs-list.battery .fone > .icon:before,
ul.specs-list.light .fone > .icon:before {
  position: absolute;
  content: '';
  border-top: 5px solid #983857;
  border-left: 5px solid #983857;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  left: calc(50% - 10px);
  bottom: -10px;
}
ul.specs-list.ranking .fone[data-ranking='1'] > .icon,
ul.specs-list.ranking .fone[data-ranking='2'] > .icon,
ul.specs-list.ranking .fone[data-ranking='3'] > .icon,
ul.specs-list.ranking .fone[data-ranking='4'] > .icon,
ul.specs-list.ranking .fone[data-ranking='5'] > .icon,
ul.specs-list.ranking .fone[data-ranking='6'] > .icon,
ul.specs-list.ranking .fone[data-ranking='7'] > .icon,
ul.specs-list.ranking .fone[data-ranking='8'] > .icon,
ul.specs-list.ranking .fone[data-ranking='9'] > .icon,
ul.specs-list.ranking .fone[data-ranking='10'] > .icon {
  position: absolute;
  display: block;
  top: -80px;
  left: calc(50% - 35px);
}
ul.specs-list.ranking .fone[data-ranking='1'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='2'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='3'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='4'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='5'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='6'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='7'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='8'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='9'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='10'] > .icon:before {
  position: absolute;
  content: "\f091";
  font-family: FontAwesome;
  font-size: 80px;
  z-index: 1;
  color: #887200;
}
ul.specs-list.ranking .fone[data-ranking='1'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='2'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='3'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='4'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='5'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='6'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='7'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='8'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='9'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='10'] > .icon:after {
  position: absolute;
  content: '1';
  display: block;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  z-index: 2;
  top: 14px;
  left: 27px;
}
ul.specs-list.ranking .fone[data-ranking='2'] > .icon:before {
  color: #777;
}
ul.specs-list.ranking .fone[data-ranking='2'] > .icon:after {
  content: '2';
}
ul.specs-list.ranking .fone[data-ranking='3'] > .icon:before {
  color: #442e18;
}
ul.specs-list.ranking .fone[data-ranking='3'] > .icon:after {
  content: '3';
}
ul.specs-list.ranking .fone[data-ranking='4'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='5'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='6'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='7'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='8'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='9'] > .icon:before,
ul.specs-list.ranking .fone[data-ranking='10'] > .icon:before {
  content: "\f111";
  font-family: FontAwesome;
  color: #983857;
}
ul.specs-list.ranking .fone[data-ranking='4'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='5'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='6'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='7'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='8'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='9'] > .icon:after,
ul.specs-list.ranking .fone[data-ranking='10'] > .icon:after {
  content: '4';
  top: 25px;
  left: 24px;
}
ul.specs-list.ranking .fone[data-ranking='5'] > .icon:after {
  content: '5';
}
ul.specs-list.ranking .fone[data-ranking='6'] > .icon:after {
  content: '6';
}
ul.specs-list.ranking .fone[data-ranking='7'] > .icon:after {
  content: '7';
}
ul.specs-list.ranking .fone[data-ranking='8'] > .icon:after {
  content: '8';
}
ul.specs-list.ranking .fone[data-ranking='9'] > .icon:after {
  content: '9';
}
ul.specs-list.ranking .fone[data-ranking='10'] > .icon:after {
  content: '10';
  left: 12px;
}
ul.specs-list > li {
  margin: 30px 10px;
}
table.detail {
  margin-top: 10px;
  width: 100%;
}
table.detail th {
  padding: 10px 10px 10px 10px;
  text-align: left;
  font-weight: normal;
  width: 100px;
  letter-spacing: 0.1em;
}
table.detail tr {
  border-bottom: 1px solid #ccc;
}
table.detail tr:nth-child(2n) {
  background-color: #EFEFEF;
}
table.detail td {
  word-break: break-all;
  letter-spacing: 0.1em;
  line-height: 1.5em;
}
.pagination-area {
  text-align: center;
}
.pagination-area .pagination {
  margin-bottom: 5px;
}
.pagination-area span {
  display: inline-block;
  background-color: #464646;
  color: #fff;
  width: 50px;
  height: 50px;
}
.pagination-area span.active {
  background-color: #060606;
}
.pagination-area span.next-inactive,
.pagination-area span.previous-inactive {
  opacity: 0.5;
}
.pagination-area span:not(.active):not(.next-inactive):not(.previous-inactive):hover {
  background-color: #060606;
}
.pagination-area a {
  display: inline-block;
  color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.fone {
  position: relative;
}
.fone .fold-handle {
  cursor: pointer;
  position: absolute;
  z-index: 10;
  top: -40px;
  left: 0;
}
.fone .fold-handle .icon:before {
  content: "\f146";
  font-family: FontAwesome;
  display: inline-block;
  font-size: 3.0rem;
  position: relative;
  top: 3px;
  margin-right: 5px;
}
.fone .fold-handle .text:before {
  content: attr(data-fold);
  display: inline-block;
  font-size: 2.0rem;
}
.fone.is-cover {
  display: none;
}
.fone.is-cover .fold-handle .icon:before {
  content: "\f0fe";
}
.fone.is-cover .fold-handle .text:before {
  content: attr(data-unfold);
}
.fone.is-cover .hinge {
  position: absolute;
  background-color: black;
}
.fone.is-cover[data-hinge-position='top'] .upper-label {
  top: -30px;
}
.fone .upper-label {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.8rem;
  color: #8d8d8d;
}
.fone >  svg {
  position: absolute;
}
.fone[data-screen-key="false"] .screen-key {
  display: none !important;
}
.fone[data-animate="antutu"] .display .logo,
.fone[data-animate="antutu"] .display .apps,
.fone[data-animate="antutu"] .display .browser {
  display: none;
}
.fone[data-animate="antutu"] .display .antutu-demo {
  display: flex;
}
.fone .display {
  overflow: hidden;
}
.fone .display .display-dent-top {
  position: absolute;
  z-index: 10;
  text-align: center;
  left: 0;
  right: 0;
}
.fone .display .display-dent-top > svg {
  position: static;
  display: inline-block;
}
.fone .display .display-dent-right {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  top: 0;
  right: 0;
  bottom: 0;
}
.fone .display .display-dent-right > svg {
  position: static;
  display: inline-block;
}
.fone .display .display-punchhole-top,
.fone .display .display-punchhole2-top {
  position: absolute;
  z-index: 10;
  text-align: center;
  left: 0;
  right: 0;
}
.fone .display .display-punchhole-top > svg,
.fone .display .display-punchhole2-top > svg {
  position: absolute;
  display: inline-block;
}
.fone .display .display-dent-bottom {
  position: absolute;
  z-index: 10;
  text-align: center;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.fone .display .display-cutout-bottom {
  position: absolute;
  z-index: 10;
}
.fone .display .display-cutout-bottom svg {
  display: block;
}
.fone .display .spec {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
.fone .display .spec h2 {
  margin-top: 7mm;
  padding: 10px;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.1em;
  font-size: 2.0rem;
}
.fone .display .spec .box-main {
  zoom: 1;
}
.fone .display .spec .box-main:before,
.fone .display .spec .box-main:after {
  content: "";
  display: table;
}
.fone .display .spec .box-main:after {
  clear: both;
}
.fone .display .spec .image {
  width: 50%;
  float: left;
  text-align: center;
}
.fone .display .spec .image img {
  width: 100px;
}
.fone .display .spec .tags {
  width: 50%;
  float: left;
}
.fone .display .spec .career-docomo,
.fone .display .spec .career-sim-free,
.fone .display .spec .career-au,
.fone .display .spec .career-softbank,
.fone .display .spec .career-rakuten,
.fone .display .spec .career-uq-mobile,
.fone .display .spec .career-y-mobile,
.fone .display .spec .price,
.fone .display .spec .model-year,
.fone .display .spec .antutu {
  margin: 5px;
  padding: 5px;
  color: #fff;
  background-color: #FF9800;
  display: block;
  font-size: 12px;
}
.fone .display .spec .career-docomo {
  background: #fff;
  color: #c03;
  border: 1px solid #5d5d5d;
  font-weight: bold;
}
.fone .display .spec .career-sim-free {
  background-color: #27282c;
  color: #fff;
}
.fone .display .spec .career-au {
  background-color: #ea5505;
  color: #fff;
}
.fone .display .spec .career-rakuten {
  background-color: #ff008c;
  color: #fff;
}
.fone .display .spec .career-uq-mobile {
  color: #0091d7;
  background-color: #fff;
  border: 1px solid #5d5d5d;
  font-weight: bold;
}
.fone .display .spec .career-y-mobile {
  color: #FC0F3A;
  background-color: #fff;
  border: 1px solid #5d5d5d;
  font-weight: bold;
}
.fone .display .spec .career-softbank {
  background-color: #fff;
  color: #000;
  border: 1px solid #5d5d5d;
}
.fone .display .spec .model-year {
  background-color: #3C6F22;
}
.fone .display .spec .antutu {
  background-color: #983857;
}
.fone .display .spec ul {
  list-style: none;
}
.fone .display .spec ul li {
  margin: 5px;
  letter-spacing: 0.1em;
  font-size: 13px;
  line-height: 1.5em;
}
.fone .display .logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fone .display .logo .label {
  position: relative;
  color: #fff;
  padding-top: 25px;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 2.0rem;
  display: block;
  width: 150px;
  height: 50px;
  background-color: #FF9800;
  overflow: hidden;
}
.fone .display .logo .label:before {
  content: 'yourfones';
}
.fone .display .logo .shadow {
  position: absolute;
  left: -75px;
  top: 0;
  height: 75px;
  width: 50px;
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
  background-color: #fff;
  opacity: 0.5;
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
}
.fone .display .logo.shine .shadow {
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}
.fone .display .apps {
  display: none;
  background-color: #121212;
  background-image: url(/bgimage/image4.png);
  background-position: -100px -100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.fone .display .apps .status {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  color: #fff;
  font-size: 2mm;
  padding: 2mm;
}
.fone .display .apps .status .left {
  text-align: left;
}
.fone .display .apps .status .right {
  text-align: right;
}
.fone .display .apps .app-main {
  padding: 5mm 0;
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.fone .display .apps .app-list {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.fone .display .apps .app-list li {
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.fone .display .apps .app-icon {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex-direction: column;
  flex-direction: column;
  align-items: center;
}
.fone .display .apps .icon {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center;
}
.fone .display .apps .icon i {
  font-size: 6mm;
  position: relative;
  top: 2px;
}
.fone .display .apps .name {
  margin-top: 1mm;
  margin-bottom: 1mm;
  color: #fff;
  font-size: 2mm;
  text-align: center;
}
.fone .display .apps .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.fone .display .apps .app-home {
  padding-bottom: 3mm;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  list-style: none;
}
.fone .display .apps .screen-key {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  justify-content: center;
  color: #fff;
  font-size: 5mm;
  padding-bottom: 2mm;
}
.fone .display .apps .screen-key span {
  display: block;
  margin: 0 5mm;
  position: relative;
}
.fone .display .apps .screen-key span.triangle {
  -webkit-transform: rotate(-180deg);
  -webkit-transform-origin: center;
  transform: rotate(-180deg);
  transform-origin: center;
  position: relative;
}
.fone .display .browser {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transition-property: all;
}
.fone .display .antutu-demo {
  display: none;
  background-color: #256ce0;
  color: #FFF;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
}
.fone .display .antutu-demo .ver {
  padding: 5mm;
  font-size: 3mm;
}
.fone .display .antutu-demo .head {
  padding: 5mm;
  background-color: #fff;
}
.fone .display .antutu-demo .head .icon {
  margin: 0 auto;
  max-width: 20mm;
}
.fone .display .antutu-demo .head .icon img {
  width: 100%;
}
.fone .display .antutu-demo .center {
  padding: 5mm;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fone .display .antutu-demo .name {
  font-size: 3mm;
  margin-bottom: 5mm;
}
.fone .display .antutu-demo .value {
  font-size: 8mm;
  font-weight: bold;
  min-height: 1em;
}
.fone .display .antutu-demo .bottom {
  flex-grow: 1;
}
.fone .display .photo-demo {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: #000;
  align-items: center;
}
.fone .display .photo-demo .photos {
  display: flex;
  position: relative;
  transition: .5s ease left;
  left: 0;
}
.fone .display .photo-demo .photos img {
  width: 100%;
  transition: 1s ease transform;
}
.fone .desc {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 35px;
}
.fone .size {
  position: absolute;
  bottom: -20px;
  text-align: center;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
}
.fone[data-slug='iphone-x'] .status {
  padding-top: 1mm;
}
.fone[data-slug='iphone-x'] .status .left {
  margin-left: 4mm;
}
.fone[data-slug='iphone-x'] .status .right {
  margin-right: 4mm;
}
.detail-view .fone {
  margin: 50px auto;
}
.detail-view .review-footer {
  text-align: right;
}
.detail-view .review-footer a {
  position: relative;
  text-decoration: underline;
  padding-left: 20px;
}
.detail-view .review-footer a:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: 2px;
  left: 0;
}
.detail-view .goto-diff-maker {
  margin-top: 10px;
  text-align: right;
}
.detail-view .goto-diff-maker a {
  display: inline-block;
  text-decoration: underline;
  position: relative;
  padding-left: 20px;
}
.detail-view .goto-diff-maker a:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: -2px;
  left: 0;
}
.detail-view .tags {
  margin-bottom: 10px;
}
.detail-view .tags .career-docomo,
.detail-view .tags .career-sim-free,
.detail-view .tags .career-au,
.detail-view .tags .career-softbank,
.detail-view .tags .career-rakuten,
.detail-view .tags .career-uq-mobile,
.detail-view .tags .career-y-mobile,
.detail-view .tags .price,
.detail-view .tags .model-year,
.detail-view .tags .antutu,
.detail-view .tags .memory,
.detail-view .tags .soc {
  margin: 5px;
  padding: 5px;
  color: #fff;
  background-color: #FF9800;
  display: inline-block;
  font-size: 15px;
  letter-spacing: 0.1em;
}
.detail-view .tags .career-docomo {
  background: #fff;
  color: #c03;
  border: 1px solid #5d5d5d;
}
.detail-view .tags .career-sim-free {
  background-color: #27282c;
  color: #fff;
}
.detail-view .tags .career-au {
  background-color: #ea5505;
  color: #fff;
}
.detail-view .tags .career-rakuten {
  background-color: #ff008c;
  color: #fff;
}
.detail-view .tags .career-uq-mobile {
  color: #0091d7;
  background-color: #fff;
  border: 1px solid #5d5d5d;
  font-weight: bold;
}
.detail-view .tags .career-y-mobile {
  color: #FC0F3A;
  background-color: #fff;
  border: 1px solid #5d5d5d;
  font-weight: bold;
}
.detail-view .tags .career-softbank {
  background-color: #fff;
  color: #000;
  border: 1px solid #5d5d5d;
}
.detail-view .tags .model-year {
  background-color: #3C6F22;
}
.detail-view .tags .antutu {
  background-color: #983857;
}
.detail-view .tags .memory {
  background-color: #4E4CAF;
}
.detail-view .tags .soc {
  background-color: #4C6FAF;
}
.detail-view .add-selected-area {
  text-align: right;
}
.detail-view .add-selected-area .add-selected {
  display: inline-block;
  color: #fff;
  background-color: #FF9800;
  border: 1px solid #FF9800;
  padding: 5px 10px;
}
.detail-view .add-selected-area .add-selected:before {
  content: 'お気に入りに追加';
  display: inline-block;
}
.detail-view .add-selected-area .add-selected:after {
  content: "\f005";
  font-family: FontAwesome;
  display: inline-block;
  color: #fff;
  margin-left: 5px;
}
.detail-view .add-selected-area .add-selected[data-selected="true"] {
  background-color: transparent;
  color: #FF9800;
}
.detail-view .add-selected-area .add-selected[data-selected="true"]:before {
  content: 'わたしのお気に入りっ！';
}
.detail-view .add-selected-area .add-selected[data-selected="true"]:after {
  content: "\f005";
  font-family: FontAwesome;
  color: #FF9800;
}
.detail-view .main-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.detail-view .image {
  margin-bottom: 20px;
}
.detail-view .image img {
  width: 200px;
}
.detail-view .spec-detail {
  max-width: 500px;
}
.detail-view .af-buttons {
  margin-top: 30px;
}
.detail-view .af-buttons .amazon-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.detail-view .af-buttons .amazon-buttons[data-cols='1'] .amazon-button.item {
  width: 100%;
}
.detail-view .af-buttons a.amazon-button,
.detail-view .af-buttons a.rakuten-button {
  border: 2px solid #ccc;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 10px 10px 20px;
  font-size: 1.6rem;
  position: relative;
  line-height: 1.3em;
  letter-spacing: 0.1em;
}
.detail-view .af-buttons a.amazon-button img,
.detail-view .af-buttons a.rakuten-button img {
  flex-shrink: 0;
  margin-right: 20px;
}
.detail-view .af-buttons a.amazon-button .main,
.detail-view .af-buttons a.rakuten-button .main {
  flex-grow: 1;
}
.detail-view .af-buttons a.simple {
  text-decoration: underline;
}
.detail-view .af-buttons a.amazon-button.item {
  width: calc(50% - 50px);
  margin: 0 0 10px;
  align-items: flex-start;
}
.detail-view .af-buttons a.amazon-button.item .main {
  height: 100%;
  position: relative;
}
.detail-view .af-buttons a.amazon-button.item .amazon-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.detail-view .af-buttons a.amazon-button:hover .amazon-title {
  color: #D57F00;
}
.detail-view .af-buttons a.amazon-button .amazon-title {
  font-size: 1.6rem;
  color: #0066c0;
  word-break: break-all;
}
.detail-view .af-buttons a.amazon-button .amazon-detail {
  font-size: 1.4rem;
  color: #2f2f2f;
}
.detail-view .af-buttons a.amazon-button .price {
  font-weight: bold;
  color: #CA1515;
}
.detail-view .af-buttons a.amazon-button .amazon-footer {
  font-size: 1.8rem;
  color: #7d7d7d;
  text-align: right;
}
.detail-view .af-buttons a.amazon-button .amazon-footer:before {
  content: "\f270";
  font-family: FontAwesome;
}
.detail-view .other-message {
  text-align: right;
  margin-bottom: 10px;
}
.detail-view .goto-list {
  text-align: right;
  margin-bottom: 10px;
}
.detail-view .goto-list a {
  background-color: #464646;
  color: #fff;
  padding: 10px;
  display: inline-block;
  padding-left: 30px;
  position: relative;
}
.detail-view .goto-list a:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: 8px;
  left: 10px;
}
.detail-view ul.diff-specs {
  list-style: none;
}
.detail-view ul.diff-specs > li {
  border: 4px solid #464646;
  padding: 10px 20px;
  position: relative;
  margin-bottom: 30px;
}
.detail-view ul.diff-specs > li:before {
  content: '';
  display: block;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid ;
  border-bottom: 15px solid transparent;
  position: absolute;
  left: calc(50% - 20px);
  bottom: -30px;
}
.detail-view ul.diff-specs > li:after {
  content: '';
  display: block;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #fff;
  border-bottom: 15px solid transparent;
  position: absolute;
  left: calc(50% - 20px);
  bottom: -24px;
}
.detail-view ul.diff-specs > li h3 {
  font-weight: normal;
  font-weight: bold;
  font-size: 2.0rem;
  letter-spacing: 0.1em;
  margin: 10px 0;
}
.detail-view ul.diff-specs > li .box,
.detail-view ul.diff-specs > li .fone-box {
  display: -webkit-flex;
  display: flex;
}
.detail-view ul.diff-specs > li .main {
  width: 50%;
  position: relative;
}
.detail-view ul.diff-specs > li .evaluation {
  width: 50%;
  padding-left: 20px;
  padding-top: 40px;
  position: relative;
}
.detail-view ul.diff-specs > li .evaluation:before {
  color: #fff;
  background-color: #CA1515;
  content: 'yourfones check!';
  border: 2px solid #CA1515;
  display: inline-block;
  padding: 5px;
  position: absolute;
  top: 0px;
  left: 40px;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.detail-view ul.diff-specs > li .evaluation h3 {
  font-size: 1.8rem;
  line-height: 1.3em;
  margin: 0 0 20px 0;
  padding-left: 20px;
  position: relative;
  font-weight: bold;
}
.detail-view ul.diff-specs > li .evaluation h3:before {
  position: absolute;
  content: "\f10b";
  font-family: FontAwesome;
  top: -7px;
  left: 0;
  font-size: 2.8rem;
}
.detail-view ul.diff-specs > li .evaluation ul {
  list-style: none;
  margin-left: 10px;
}
.detail-view ul.diff-specs > li .evaluation ul li {
  margin-bottom: 15px;
  font-size: 1.7rem;
  letter-spacing: 0.1em;
  padding-left: 30px;
  position: relative;
  line-height: 1.3em;
}
.detail-view ul.diff-specs > li .evaluation ul li:before {
  font-size: 2.5rem;
  position: absolute;
  top: -2px;
  left: 0;
}
.detail-view ul.diff-specs > li .evaluation ul li.good:before {
  color: #FF9800;
  content: "\f118";
  font-family: FontAwesome;
}
.detail-view ul.diff-specs > li .evaluation ul li.bad:before {
  color: #4C6FAF;
  content: "\f119";
  font-family: FontAwesome;
}
.detail-view ul.diff-specs > li .more {
  margin: 5px 0;
  text-align: right;
}
.detail-view ul.diff-specs > li .more a {
  padding: 10px;
  background-color: #CA1515;
  color: #fff;
  display: inline-block;
}
.detail-view ul.diff-specs > li .more a:hover {
  background-color: #790E0E;
}
.detail-view ul.diff-specs > li .image {
  width: 120px;
}
.detail-view ul.diff-specs > li .tags {
  width: calc(100% - 120px);
}
.detail-view ul.diff-specs > li .tags div {
  max-width: 150px;
  font-size: 12px;
  margin: 0 0 5px 0;
}
.detail-view ul.diff-specs > li .description {
  margin: 0 0 10px 0;
  letter-spacing: 0.1em;
  font-size: 1.6rem;
  line-height: 1.4em;
}
.detail-view ul.diff-specs > li img {
  max-height: 100px;
  width: auto;
}
.detail-view ul.diff-specs .foneboard-wrap {
  margin: 0 auto 10px;
}
.detail-view ul.diff-specs .foneboard {
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
  -webkit-transform-origin: top left;
  transform-origin: top left;
  width: 330%;
}
.detail-view ul.diff-specs .foneboard .name {
  margin: 30px 10px 0px 10px;
  font-size: 2.0rem;
  line-height: 1.3em;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.detail-view ul.diff-specs .goto-diff-spec-rival {
  margin-top: 10px;
  text-align: left;
}
.detail-view ul.diff-specs .goto-diff-spec-rival a {
  display: inline-block;
  text-decoration: underline;
  position: relative;
  padding-left: 20px;
}
.detail-view ul.diff-specs .goto-diff-spec-rival a:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: -2px;
  left: 0;
}
.diff-view .desc {
  line-height: 1.5em;
}
.diff-view .goto-diff {
  margin-top: 10px;
  text-align: right;
}
.diff-view .goto-diff a {
  display: inline-block;
  text-decoration: underline;
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
}
.diff-view .goto-diff a:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: -2px;
  left: 0;
}
.diff-view ul.diff-list > li {
  border-top: 1px solid #ccc;
  list-style: none;
}
.diff-view ul.diff-list h2 {
  margin: 30px 0 15px;
  font-size: 2.0rem;
}
.diff-view ul .diff-images {
  max-width: 400px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.diff-view ul .diff-images .image {
  text-align: center;
}
.diff-view ul .diff-images img {
  max-height: 150px;
}
.diff-view ul .diff-images .vs {
  padding-bottom: 30px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
.diff-view ul .diff-images .spec-name {
  font-size: 20px;
  font-weight: bold;
  border: 0;
  padding: 0;
  margin: 10px 0;
}
.diff-view ul.diff-specs {
  list-style: none;
}
.diff-view ul.diff-specs > li {
  padding: 10px 20px;
  position: relative;
  margin-bottom: 30px;
}
.diff-view ul.diff-specs > li h3 {
  font-weight: normal;
  font-weight: bold;
  font-size: 2.0rem;
  letter-spacing: 0.1em;
  margin: 10px 0;
}
.diff-view ul.diff-specs > li .box,
.diff-view ul.diff-specs > li .fone-box {
  display: -webkit-flex;
  display: flex;
}
.diff-view ul.diff-specs > li .main {
  position: relative;
  margin: 0 auto;
}
.diff-view ul.diff-specs > li .more {
  margin: 5px 0;
  text-align: right;
}
.diff-view ul.diff-specs > li .more a {
  padding: 10px;
  background-color: #CA1515;
  color: #fff;
  display: inline-block;
}
.diff-view ul.diff-specs > li .more a:hover {
  background-color: #790E0E;
}
.diff-view ul.diff-specs > li .image {
  text-align: center;
  float: none !important;
  width: 100% !important;
}
.diff-view ul.diff-specs > li .image img {
  width: auto !important;
}
.diff-view ul.diff-specs > li .tags {
  width: calc(100% - 120px);
}
.diff-view ul.diff-specs > li .tags div {
  max-width: 150px;
  font-size: 12px;
  margin: 0 0 5px 0;
}
.diff-view ul.diff-specs > li .description {
  margin: 0 0 10px 0;
  letter-spacing: 0.1em;
  font-size: 1.6rem;
  line-height: 1.4em;
}
.diff-view ul.diff-specs > li img {
  max-height: 100px;
  width: auto;
}
.diff-view ul.diff-specs .foneboard-wrap {
  margin: 0 auto 10px;
}
.diff-view ul.diff-specs .foneboard {
  -webkit-transform: scale(0.3);
  transform: scale(0.3);
  -webkit-transform-origin: top left;
  transform-origin: top left;
  width: 330%;
}
.diff-view ul.diff-specs .foneboard .name {
  margin: 30px 10px 10px 10px;
  font-size: 2.0rem;
  line-height: 1.3em;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
}
.diff-view ul.diff-specs .goto-diff-spec-rival {
  margin-top: 10px;
  text-align: left;
}
.diff-view ul.diff-specs .goto-diff-spec-rival a {
  display: inline-block;
  text-decoration: underline;
  position: relative;
  padding-left: 20px;
}
.diff-view ul.diff-specs .goto-diff-spec-rival a:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: -2px;
  left: 0;
}
.compare-view h2 {
  margin: 60px 0px;
  font-weight: normal;
  font-size: 2.8rem;
  letter-spacing: 0.1em;
  padding-left: 60px;
  position: relative;
}
.compare-view h2:before {
  content: "\f157";
  font-family: FontAwesome;
  color: #fff;
  position: absolute;
  top: -5px;
  left: 17px;
  z-index: 1;
}
.compare-view h2:after {
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #060606;
  position: absolute;
  top: -15px;
  left: 0px;
}
.compare-view h2 span {
  font-size: 1.2rem;
  display: block;
  margin-top: 10px;
}
.compare-view h2.inch:before {
  content: "\f10a";
  font-family: FontAwesome;
  top: -3px;
  left: 16px;
}
.compare-view h2.diff:before {
  content: "\f128";
  font-family: FontAwesome;
  left: 16px;
}
.compare-view .diff-images {
  max-width: 600px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-around;
}
.compare-view .diff-images .image {
  text-align: center;
}
.compare-view .diff-images img {
  max-height: 200px;
}
.compare-view .diff-images .spec-name {
  font-size: 20px;
  font-weight: bold;
  border: 0;
  padding: 0;
  margin: 10px 0;
}
.compare-view .goto-list {
  margin-top: 10px;
  text-align: right;
}
.compare-view .goto-list a {
  font-size: 1.8rem;
  display: inline-block;
  text-decoration: underline;
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}
.compare-view .goto-list a:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: -2px;
  left: 0;
}
.spec-description ul {
  list-style: none;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  line-height: 1.4em;
}
.spec-description ul li {
  position: relative;
  padding-left: 45px;
  margin-bottom: 20px;
}
.spec-description ul li:before {
  content: "\f00c";
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  top: -5px;
  font-size: 3.8rem;
  color: #CA1515;
}
.detail-view {
  margin: 10px 30px;
}
.detail-view h2 {
  margin: 60px 0px;
  font-weight: normal;
  font-size: 2.8rem;
  letter-spacing: 0.1em;
  padding-left: 60px;
  position: relative;
}
.detail-view h2:before {
  content: "\f157";
  font-family: FontAwesome;
  color: #fff;
  position: absolute;
  top: -5px;
  left: 17px;
  z-index: 1;
}
.detail-view h2:after {
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #060606;
  position: absolute;
  top: -15px;
  left: 0px;
}
.detail-view h2 span {
  font-size: 1.2rem;
  display: block;
  margin-top: 10px;
}
.detail-view h2.voice:before {
  content: "\f086";
  font-family: FontAwesome;
  left: 12px;
}
.detail-view h2.inch:before {
  content: "\f10a";
  font-family: FontAwesome;
  top: -3px;
  left: 16px;
}
.detail-view h2.spec:before {
  content: "\f129";
  font-family: FontAwesome;
  left: 20px;
}
.detail-view h2.review-title:before {
  content: "\f075";
  left: 11px;
}
.detail-view h2.link:before {
  content: "\f0c6";
  font-family: FontAwesome;
  left: 13px;
}
.detail-view h2.quote:before {
  content: "\f086";
  font-family: FontAwesome;
  left: 12px;
}
.detail-view h2.diff:before {
  content: "\f128";
  font-family: FontAwesome;
  left: 16px;
}
.detail-view ul.links {
  margin: 0 30px;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
}
.detail-view ul.links li {
  margin: 0 10px 10px 10px;
}
.detail-view ul.links li a {
  display: block;
  background-color: #FF9800;
  color: #fff;
  width: 150px;
  height: 150px;
  padding: 30px 10px 10px 10px;
  letter-spacing: 0.1em;
  position: relative;
}
.detail-view ul.links li a:before {
  content: "\f0c6";
  font-family: FontAwesome;
  color: #404040;
  position: absolute;
  top: -16px;
  left: calc(50% - 20px);
  font-size: 40px;
}
.detail-view ul.links li .title {
  display: block;
  word-break: break-all;
  line-height: 1.5em;
}
.detail-view ul.links li .name {
  display: block;
  word-break: break-all;
  font-size: 13px;
  position: absolute;
  bottom: 10px;
}
.detail-view ul.diff {
  margin: 0 30px;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
}
.detail-view ul.diff li {
  margin: 0 10px 10px 10px;
}
.detail-view ul.diff li a {
  display: block;
  background-color: #FF9800;
  color: #fff;
  width: 150px;
  height: 100px;
  padding: 70px 10px 10px 10px;
  letter-spacing: 0.1em;
  position: relative;
  font-size: 17px;
  line-height: 1.5em;
}
.detail-view ul.diff li a:before {
  content: "\f059";
  font-family: FontAwesome;
  color: #fff;
  position: absolute;
  top: 25px;
  left: calc(50% - 20px);
  font-size: 54px;
}
.detail-view ul.diff li a.inch {
  background-color: #983857;
}
.detail-view ul.diff li a.sameprice {
  background-color: #4C6FAF;
}
.detail-view ul.diff li a.samesize {
  background-color: #D07E29;
}
.detail-view ul.diff li a.samespec {
  background-color: #4E4CAF;
}
.detail-view ul.diff li a.all-rival {
  background-color: #3C6F22;
}
.detail-view ul.rival-check {
  margin: 0 30px;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
}
.detail-view ul.rival-check li {
  margin: 0 10px 10px 10px;
}
.detail-view ul.rival-check li a {
  display: block;
  color: #464646;
  border: 5px solid #464646;
  width: 150px;
  height: 150px;
  padding: 10px 10px 10px 10px;
  letter-spacing: 0.1em;
  position: relative;
  font-size: 17px;
  line-height: 1.5em;
}
.detail-view ul.rival-check li a h3 {
  font-weight: normal;
  font-size: 1.5rem;
  word-break: break-all;
  height: 75px;
  overflow: hidden;
}
.detail-view ul.rival-check li a .rival-image {
  text-align: center;
}
.detail-view ul.rival-check li a .rival-image img {
  max-width: 100px;
  max-height: 80px;
}
.detail-view ul.rival-check li a.rival:before {
  content: '';
  display: block;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #464646;
  border-bottom: 15px solid transparent;
  position: absolute;
  left: calc(50% - 20px);
  bottom: -30px;
}
.detail-view ul.rival-check li a.rival:after {
  content: '';
  display: block;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #fff;
  border-bottom: 15px solid transparent;
  position: absolute;
  left: calc(50% - 20px);
  bottom: -24px;
}
.detail-view ul.rival-check li a.all-rival {
  background-color: #464646;
  color: #fff;
}
.detail-view ul.quotes {
  margin: 0 30px;
  list-style: none;
}
.detail-view ul.quotes li {
  margin-bottom: 10px;
  position: relative;
}
.detail-view ul.quotes li:after {
  content: '';
  display: block;
  border-top: 17px solid transparent;
  border-bottom: 17px solid #FF9800;
  border-left: 17px solid transparent;
  border-right: 17px solid #FF9800;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.detail-view ul.quotes li blockquote {
  padding: 15px 15px 15px 50px;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  line-height: 1.3em;
  position: relative;
  background-color: #f3f3f3;
  border-left: 3px solid #FF9800;
}
.detail-view ul.quotes li blockquote:before {
  color: #848484;
  content: "\f10d";
  font-family: FontAwesome;
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 3.0rem;
}
.detail-view ul.quotes li .title {
  margin: 20px;
  word-break: break-all;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.3em;
  display: block;
}
.detail-view ul.quotes li .title cite {
  padding-left: 20px;
  position: relative;
  display: block;
}
.detail-view ul.quotes li .title cite:before {
  content: "\f138";
  font-family: FontAwesome;
  position: absolute;
  top: 0px;
  left: 0;
}
.detail-view ul.quotes li .title a:hover {
  text-decoration: underline;
}
.detail-view ul.quotes li .by {
  padding: 0px 20px 20px 50px;
  word-break: break-all;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  line-height: 1.3em;
  text-align: right;
}
.detail-view ul.relateds {
  display: flex;
  align-items: stretch;
  list-style: none;
  flex-wrap: wrap;
}
.detail-view ul.relateds li {
  margin-right: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  position: relative;
}
.detail-view ul.relateds a.add-selected {
  position: absolute;
  top: 10px;
  right: 5px;
  font-size: 30px;
}
.detail-view ul.relateds a.add-selected:before {
  color: #FF9800;
  content: "\f006";
  font-family: FontAwesome;
}
.detail-view ul.relateds a.add-selected[data-selected=true]:before {
  content: "\f005";
  font-family: FontAwesome;
}
.detail-view ul.relateds a.link {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  border: 2px solid #060606;
  text-align: center;
  padding: 10px;
  width: 150px;
  height: 100%;
  box-sizing: border-box;
}
.detail-view ul.relateds .related-image {
  margin-bottom: 10px;
}
.detail-view ul.relateds .title {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.detail-view ul.relateds .price,
.detail-view ul.relateds .antutu,
.detail-view ul.relateds .no-price {
  font-size: 1.3rem;
  display: inline-block;
  color: #fff;
  background-color: #FF9800;
  padding: 5px;
}
.detail-view ul.relateds .no-price {
  background-color: #FFF;
  min-height: 1em;
}
.detail-view ul.relateds .antutu {
  background-color: #983857;
}
.detail-view .notice {
  margin-bottom: 10px;
}
.not-found .text {
  display: block;
  text-align: center;
  font-size: 2.0rem;
  letter-spacing: 0.2em;
  line-height: 1.4em;
}
.not-found .icon {
  text-align: center;
  display: block;
  margin-bottom: 10px;
}
.not-found .icon:before {
  content: "\f118";
  font-family: FontAwesome;
  color: #FF9800;
  font-size: 5.0rem;
  position: relative;
}
ul.voices {
  margin: 20px 0px;
  padding-left: 10px;
  list-style: none;
}
ul.voices li {
  border-radius: 25px;
  margin-left: 20px;
  margin-bottom: 20px;
  padding: 20px 20px 20px 60px;
  letter-spacing: 0.1em;
  border: 2px solid #464646;
  background-color: #464646;
  color: #fff;
  position: relative;
  display: inline-block;
  line-height: 1.3em;
}
ul.voices li.meh {
  border: 2px solid #464646;
  background-color: #464646;
  color: #fff;
}
ul.voices li.meh:before {
  border-right: 15px solid #464646;
}
ul.voices li.meh:after {
  border-right: 15px solid #464646;
}
ul.voices li.meh .icon:before {
  color: #FF9800;
}
ul.voices li.frown {
  border: 2px solid #464646;
  background-color: #464646;
  color: #fff;
}
ul.voices li.frown:before {
  border-right: 15px solid #464646;
}
ul.voices li.frown:after {
  border-right: 15px solid #464646;
}
ul.voices li.frown .icon:before {
  color: #FF9800;
}
ul.voices li:before {
  content: '';
  position: absolute;
  border-right: 15px solid #464646;
  border-left: 15px solid transparent;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  top: 15px;
  left: -30px;
}
ul.voices li.arrow2:before {
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 15px solid #464646;
  border-bottom: 15px solid transparent;
  top: auto;
  bottom: -30px;
  left: 20%;
}
ul.voices li.arrow3:before {
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 15px solid #464646;
  border-bottom: 15px solid transparent;
  top: auto;
  bottom: -30px;
  left: 50%;
}
ul.voices li.arrow4:before {
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 15px solid #464646;
  border-bottom: 15px solid transparent;
  top: auto;
  bottom: -30px;
  left: 70%;
}
ul.voices li.arrow5:before {
  border-right: 15px solid transparent;
  border-left: 15px solid #464646;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  top: 15px;
  left: auto;
  right: -30px;
}
ul.voices li .icon {
  position: absolute;
  top: 8px;
  left: 0;
}
ul.voices li .icon:before {
  content: "\f118";
  font-family: FontAwesome;
  color: #FF9800;
  font-size: 30px;
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 1;
}
ul.voices li .icon.meh:before {
  content: "\f11a";
  font-family: FontAwesome;
}
ul.voices li .icon.frown:before {
  content: "\f119";
  font-family: FontAwesome;
}
.spec-table-scrollable {
  overflow-x: auto;
}
.spec-table {
  position: relative;
}
.spec-table table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  table-layout: fixed;
}
.spec-table table tr:first-child td {
  border-bottom: 0px;
}
.spec-table table td {
  width: 150px;
  padding: 5px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  font-size: 1.2rem;
}
.spec-table table td:first-child {
  width: 80px;
}
.spec-table table td.center {
  text-align: center;
}
.spec-table table td.right {
  text-align: right;
}
.spec-table table td.bold {
  font-weight: bold;
}
.vtype-button {
  text-align: left;
  padding-left: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
  position: relative;
}
.vtype-button:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #ccc;
}
.vtype-button a {
  box-sizing: border-box;
  display: inline-block;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #fff;
  position: relative;
  color: #fff;
  background-color: #808080;
  padding: 10px 10px 10px 10px;
  letter-spacing: 1px;
  transition-duration: .2s;
}
.vtype-button a:hover,
.vtype-button a:focus,
.vtype-button a.active {
  background-color: #fff;
  color: #333;
  font-weight: bold;
  padding: 15px 10px 15px 10px;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  border-left: 2px solid #ccc;
}
.spec-table-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 92px;
  overflow: hidden;
}
.photos .main-image {
  display: flex;
  flex-wrap: nowrap;
}
.photos .main-image .nav {
  display: flex;
  align-items: center;
  background-color: #464646;
  padding: 10px;
}
.photos .main-image .nav.prev:before {
  color: #fff;
  content: "\f053";
  font-family: FontAwesome;
  font-size: 3.0rem;
}
.photos .main-image .nav.next:before {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 3.0rem;
  color: #fff;
}
.photos .main-image span.nav {
  background-color: #ddd;
}
.photos .main-image figure {
  margin: 0 5px;
}
.photos .main-image img {
  width: 100%;
}
.photos .caption {
  margin: 10px 45px;
}
.photos .thumbnail a {
  display: inline-block;
}
.photos .thumbnail a img {
  border: 3px solid #fff;
}
.photos .thumbnail .active img {
  border: 3px solid #FF9800;
}
.photo-view .ads {
  text-align: center;
  margin-bottom: 10px;
}
.photo-view figure {
  margin-bottom: 20px;
}
.photo-view figure img {
  margin-bottom: 10px;
  max-width: 1000px;
  width: 100%;
}
.photo-view .return-to-detail {
  margin: 10px 0;
  text-align: right;
}
.photo-view .return-to-detail:before {
  content: "\f138";
  font-family: FontAwesome;
  margin-right: 5px;
}
.photo-view .return-to-detail a {
  text-decoration: underline;
}
article.contact form {
  max-width: 400px;
  margin: 20px auto;
}
article.contact form input,
article.contact form label,
article.contact form textarea {
  display: block;
  margin-bottom: 10px;
}
article.contact form input,
article.contact form textarea {
  width: 100%;
  max-width: 400px;
  padding: 10px;
}
article.contact .button-area .button {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  text-align: center;
  color: #fff;
  background-color: #464646;
  font-size: 2.0rem;
  letter-spacing: 0.1em;
  cursor: pointer;
  font-family: inherit;
  border: 0;
}
.foot-menu {
  margin-top: 50px;
  background-color: #464646;
}
.foot-menu .inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 50px 10px;
}
.foot-menu ul {
  width: 250px;
  padding: 10px 10px;
  list-style: none;
}
.foot-menu li {
  padding: 10px;
  position: relative;
}
.foot-menu li:before {
  content: "\f0da";
  font-family: FontAwesome;
  color: #fff;
  position: absolute;
  top: 9px;
  left: 0;
}
.foot-menu a {
  color: #fff;
  line-height: 1.3em;
}
ins.adsbygoogle {
  text-align: center;
  background-color: transparent;
}
.header-ads {
  margin: 50px auto;
  text-align: center;
}
.line-ads {
  margin: 50px auto;
  text-align: center;
}
.detail-ads {
  margin: 50px auto;
  text-align: center;
}
.footer-ads {
  zoom: 1;
}
.footer-ads:before,
.footer-ads:after {
  content: "";
  display: table;
}
.footer-ads:after {
  clear: both;
}
.footer-ads .ads-left {
  float: left;
  width: 50%;
  text-align: right;
}
.footer-ads .ads-right {
  float: left;
  width: 50%;
  text-align: left;
}
.footer-ads-label {
  margin: 50px 0 0;
  text-align: center;
}
#plot_rank,
#plot_price {
  margin: 10px 30px;
}
footer {
  padding: 5px;
  color: #FFF;
  background-color: #060606;
}
footer .notice {
  text-align: center;
  font-size: 1.0rem;
  margin-bottom: 5px;
}
.copyright {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3px 10px;
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}
.entry-review {
  margin-bottom: 20px;
}
.entry-review .info-box {
  line-height: 1.4em;
}
.entry-review .recommend {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.8rem;
}
.entry-review .entry-button {
  text-align: right;
}
.entry-review .entry-button a {
  display: inline-block;
  font-size: 2.0rem;
  font-weight: bold;
  text-decoration: underline;
}
.entry-review .entry-button a i {
  margin-right: 10px;
}
.entry-review .info-box .login {
  margin-top: 10px;
  display: flex;
  align-items: center;
  text-decoration: underline;
}
.entry-review .info-box .login img {
  width: 150px;
  margin-right: 10px;
}
.review-list {
  margin-bottom: 50px;
}
.review-list .message {
  border: 2px solid #060606;
  padding: 10px;
  text-align: center;
  font-size: 2.0rem;
  margin-bottom: 20px;
  line-height: 1.4em;
}
.review-list .review .title,
.detail-view .review .title {
  font-size: 2.0rem;
  margin-bottom: 10px;
}
.review-list .review .rate,
.detail-view .review .rate {
  margin-bottom: 10px;
}
.review-list .review .body,
.detail-view .review .body {
  margin-bottom: 10px;
}
.review-list .review .image-list,
.detail-view .review .image-list {
  margin: 0 -10px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.review-list .review .image-list li,
.detail-view .review .image-list li {
  margin: 0 10px 10px;
}
.review-list .review .footer,
.detail-view .review .footer {
  margin-bottom: 10px;
  text-align: right;
}
.review-list .review .footer i,
.detail-view .review .footer i {
  margin-right: 10px;
}
.review-list .review .edit,
.detail-view .review .edit {
  text-align: right;
  font-size: 1.4rem;
}
.review-list .review .edit i,
.detail-view .review .edit i {
  margin-right: 10px;
}
form.review .error {
  color: #CA1515;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid #CA1515;
  padding: 10px;
  margin-bottom: 20px;
}
form.review table {
  width: 100%;
  margin-bottom: 10px;
}
form.review table th {
  width: 100px;
  padding: 10px;
}
form.review table td {
  padding: 10px;
  vertical-align: top;
}
form.review input[name=title],
form.review textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}
form.review .drop-area {
  border: 3px dashed #C8C8C8 !important;
  background-color: #F0F0F0 !important;
  border-radius: 5px;
  padding: 30px;
  text-align: center;
  margin-bottom: 10px;
}
form.review .drop-area.drag-enter {
  border-color: #FF9800 !important;
  background-color: #ffeccd !important;
}
form.review .drop-area label {
  width: 100%;
  display: inline-block;
}
form.review .drop-area label:hover {
  cursor: pointer;
}
form.review .file-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -10px 10px;
}
form.review .file-list li {
  position: relative;
  padding: 10px 20px 10px 10px;
  margin-right: 10px;
}
form.review .file-list .btn-delete {
  font-size: 2.0rem;
  position: absolute;
  top: 0;
  right: 0;
}
form.review .file-list input {
  display: none;
}
form.review .drop-area label svg {
  width: 50px;
  fill: currentColor;
  color: #909090;
}
form.review .file-list .preview-area {
  text-align: center;
}
form.review .file-list .preview-area img {
  max-width: 200px;
}
form.review .agree li {
  font-size: 12px;
  line-height: 1.6em;
  margin-bottom: 5px;
}
form.review .footer {
  text-align: center;
  margin-bottom: 100px;
}
.star-rate {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 125px;
  height: 25px;
  overflow: hidden;
  position: relative;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rate:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 1;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rate[data-rate='1']:before {
  width: 20%;
}
.star-rate[data-rate='2']:before {
  width: 40%;
}
.star-rate[data-rate='3']:before {
  width: 60%;
}
.star-rate[data-rate='4']:before {
  width: 80%;
}
.star-rate[data-rate='5']:before {
  width: 100%;
}
.star-rating {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 125px;
  height: 25px;
  overflow: hidden;
  position: relative;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
  opacity: 1;
}
.star-rating i ~ i {
  width: 40%;
}
.star-rating i ~ i ~ i {
  width: 60%;
}
.star-rating i ~ i ~ i ~ i {
  width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}
.mypage-menu {
  margin: 50px auto 100px;
}
.mypage-menu h2 {
  font-size: 2.6rem;
  padding: 0;
  margin: 0 0 30px 0;
}
.mypage-menu ul {
  margin-left: 20px;
  list-style: none;
}
.mypage-menu ul a {
  font-size: 2.0rem;
  text-decoration: underline;
}
.mypage-login {
  margin: 100px 0;
}
.mypage-login img {
  width: 150px;
  margin-right: 10px;
}
.mypage-login a {
  display: flex;
  align-items: center;
  text-decoration: underline;
}
.mypage-review-list {
  margin: 50px 0;
}
.mypage-review-list table {
  margin: 50px 0;
  width: 100%;
}
.mypage-review-list table tr {
  border-bottom: 1px solid #DDD;
}
.mypage-review-list table td,
.mypage-review-list table th {
  padding: 20px;
  text-align: left;
}
@media screen and (max-width: 1600px) {
  .slider li.slide.slide7 {
    background-position: center -200px;
  }
  .slider li.slide.slide15 {
    background-position: center -200px;
  }
}
@media screen and (max-width: 1300px) {
  .slider li.slide.slide14 {
    background-position: center -150px;
  }
  .slider li.slide.slide7 {
    background-position: center -100px;
  }
  .slider li.slide.slide15 {
    background-position: center -100px;
  }
}
@media screen and (max-width: 980px) {
  nav.pc li a .main {
    padding-top: 13px;
  }
  nav.pc li a .main,
  nav.pc li a .sub {
    font-weight: normal;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 800px) {
  .slider li.slide {
    height: 300px;
    background-size: cover;
    background-position: initial;
  }
  .slider li.slide.slide1,
  .slider li.slide.slide2,
  .slider li.slide.slide3,
  .slider li.slide.slide4 {
    background-size: cover;
    background-position: initial;
  }
  .slider li.slide .box .sub {
    margin-top: 30px;
  }
}
@media screen and (max-width: 768px) {
  nav.pc li a .main,
  nav.pc li a .sub {
    font-size: 1.1rem;
  }
  .select-yourfones {
    font-size: 3.0rem;
  }
  .select-yourfones .number {
    font-size: 3.5rem;
  }
  .select-yourfones .number .unit {
    font-size: 2.6rem;
  }
  .slider li.slide.slide11 {
    background-position: center -130px;
  }
  .slider li.slide.slide12 {
    background-position: center -130px;
  }
  .slider li.slide.slide14 {
    background-position: center -100px;
  }
  h1.catch {
    font-size: 2.6rem;
    letter-spacing: 1px;
  }
  .vtype-button a {
    font-size: 1.1rem;
  }
  .columns {
    display: block;
  }
  .columns .corner {
    width: 100%;
    margin: 0;
  }
  .columns .sidebox {
    width: 100%;
    max-width: 500px;
    margin: 50px auto 0;
  }
}
@media screen and (max-width: 600px) {
  table.about {
    display: block;
  }
  table.about tbody,
  table.about tr,
  table.about th,
  table.about td {
    display: block;
  }
  table.about th {
    width: 100%;
    text-align: left;
  }
  .lang-change {
    margin-top: 60px;
  }
  nav.pc {
    display: none;
  }
  nav.mobile {
    display: block;
  }
  .breadcrumbs {
    padding: 0;
  }
  .select-yourfones {
    font-size: 2.0rem;
  }
  .select-yourfones .number {
    font-size: 2.3rem;
  }
  .select-yourfones .number .unit {
    font-size: 1.4rem;
  }
  h1.catch {
    font-size: 1.4rem;
  }
  .slider li.slide {
    height: 200px;
  }
  .slider li.slide.slide6 {
    background-position: center 0px;
  }
  .slider li.slide.slide7,
  .slider li.slide.slide10 {
    background-position: center -100px;
  }
  .slider li.slide.slide7 {
    background-position: center -50px;
  }
  .slider li.slide.slide8 {
    background-position: center 0px;
  }
  .slider li.slide.slide9 {
    background-position: center 0px;
  }
  .slider li.slide.slide11 {
    background-position: center -50px;
  }
  .slider li.slide.slide12 {
    background-position: center 0px;
  }
  .slider li.slide.slide14 {
    background-position: center 0px;
  }
  .slider li.slide.slide15 {
    background-position: center 0px;
  }
  .slider li.slide .box {
    left: 30px;
  }
  .slider li.slide .box .main {
    font-size: 1.8rem;
  }
  .slider li.slide .box .sub {
    font-size: 1.8rem;
    margin: 30px 0 0 40px;
  }
  .slider li.slide .box .main span,
  .slider li.slide .box .sub span {
    font-size: 2.1rem;
  }
  .slider li.slide .button {
    display: none;
  }
  .select-yourfones {
    margin: 40px 0;
  }
  ul.select-types li.inch .icon {
    left: 55px;
    font-size: 40px;
  }
  ul.select-types li.new .icon {
    left: 55px;
    font-size: 40px;
  }
  ul.select-types li.high .icon {
    left: 55px;
    font-size: 50px;
  }
  ul.select-types li.battery .icon {
    left: 45px;
    font-size: 40px;
  }
  ul.select-types li.female .icon {
    left: 55px;
    font-size: 40px;
  }
  ul.select-types li.light .icon {
    left: 50px;
    font-size: 40px;
  }
  ul.select-types li.lowprice .icon {
    left: 50px;
    font-size: 40px;
  }
  ul.select-types li.zenfone .icon {
    left: 55px;
    font-size: 40px;
  }
  ul.select-types li.premium .icon {
    left: 45px;
    font-size: 40px;
  }
  ul.select-types li.budget .icon {
    left: 60px;
    font-size: 40px;
  }
  ul.select-types a {
    width: 140px;
    height: 140px;
    margin: 5px;
  }
  ul.select-types a .desc {
    top: 70px;
    left: 5px;
    right: 5px;
    font-size: 1.8rem;
  }
  ul.select-types li.series a span {
    top: 20px;
    font-size: 1.8rem;
  }
  ul.select-types li.series a:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 5px solid #386798;
    border-bottom: 5px solid transparent;
    position: absolute;
    left: calc(40%);
    bottom: -10px;
  }
  ul.select-types li.carrier a {
    font-size: 1.8rem;
  }
  ul.select-types li.carrier.docomo a {
    background-size: 124px 30px;
  }
  ul.select-types li.carrier.au a {
    background-size: 63.6px 24px;
  }
  ul.select-types li.carrier.softbank a {
    background-size: 129.6px 21.6px;
  }
  .top-search-box input {
    font-size: 12px;
  }
  .head-image {
    height: 60px;
  }
  .button-area {
    margin: 20px 0;
  }
  .button-area .button {
    width: 250px;
    font-size: 1.8rem;
  }
  .detail-view {
    margin: 10px 10px;
  }
  .detail-view h2 {
    margin: 40px 0px;
  }
  .detail-view ul.quotes,
  .detail-view ul.diff,
  .detail-view ul.rival-check {
    margin: 0;
  }
  .detail-view ul.diff,
  .detail-view ul.rival-check {
    justify-content: space-around;
  }
  .detail-view ul.quotes li blockquote {
    font-size: 1.4rem;
  }
  .detail-view #plot_price,
  .detail-view #plot_rank {
    margin: 0px 10px;
  }
  .detail-view ul.diff-specs > li .box {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .detail-view ul.diff-specs > li .box .main {
    width: 100%;
    margin-bottom: 20px;
  }
  .detail-view ul.diff-specs > li .box .evaluation {
    width: 100%;
    padding-left: 0;
  }
  .detail-view ul.diff-specs > li .box .evaluation:before {
    left: 0;
  }
  .header-ads {
    margin: 10px 0 0;
  }
  .line-ads {
    margin: 10px 0 10px;
  }
  .footer-ads .ads-left,
  .footer-ads .ads-right {
    float: none;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  .slider li.en-slide .box {
    top: 50px;
  }
}
@media screen and (max-width: 400px) {
  .slider li.slide.slide7,
  .slider li.slide.slide11,
  .slider li.slide.slide10 {
    background-position: center 0;
  }
}