/*
Theme Name:wp-auto
Version: 2.0.0
Author: GG
*/

/* @charset "utf-8"; */

/* CSS Document */

/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
全デバイス共通のスタイルとスマートフォンおよび小型タブレット向けレイアウトの指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  width: 100%;
  height: auto;
  margin: 0px;
  background-color: #fff;
  word-break: break-all;
  word-wrap: break-word;
}

div {
  max-width: 100%;
}

ul {
  width: auto;
  height: auto;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}

.m-l20 {margin-left: 20px;}

input {
  font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a{transition:0.3s;}

.small {
  font-size: .8em;
}

.marker {
  font-weight: bold;
  background: linear-gradient(transparent 50% , rgb(255, 234, 112) 50%);
}

/***********************
ヘッダーエリア
************************/

#headerArea {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
  border-top: 3px solid #636363;
}

#headerArea header {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 0 10px;
  display: block;
}


/*ロゴ*/

#headerArea .logo {
  max-width: 80%;
  max-height: 38px;
  margin-top: 4px;
  margin-left: 5px;
  padding: 0;
  display: inline-block;
  clear: both;
}

#headerArea .logo img {
  max-height: 38px;
}

#headerArea .logo img:hover {
  opacity: 0.8;
}

/* #mainArea {
  width: 96%!important;
  max-width: 760px!important;
  min-width: auto!important;
}
#sideArea {
  display: none;
}

 */
/*h1見出し*/

#headerArea h1 {
  width: auto;
  height: auto;
  margin: 0;
  padding: 5px 10px 0;
  font-size: 10px;
  font-weight: normal;
  color: #000;
  display: block;
  line-height: 1.2;
  text-align: left;
}

/***********************
グローバルメニュー
************************/

#headerArea .gMenuBtnArea {
  position: absolute;
  top: 1em;
  right:5px;
}

#headerArea .gMenuBtn {
  position: relative;
  width: 42px;
  height: 22px;
  margin-bottom: 4px;
  float: right;
  z-index: 10;
  display: inline-block;
  cursor: pointer;
}

#headerArea .gMenuBtn ,
#headerArea .gMenuBtn  span {
  display: block;
  -webkit-transition: all .4s;
  transition: all .4s;
  box-sizing: border-box;
}

#headerArea .gMenuBtn span {
  position: absolute;
  left: 0;
  width: 34px;
  height: 4px;
  background-color: #484848;
  border-radius: 4px;
  margin: 0;
}
#headerArea .gMenuBtn span:nth-of-type(1) {
  top: 0;
}
#headerArea .gMenuBtn span:nth-of-type(2) {
  top: 9px;
}
#headerArea .gMenuBtn span:nth-of-type(3) {
  top: 18px;
}

/*メニューアイコン動き*/
#headerArea .gMenuBtn.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
#headerArea .gMenuBtn.active span:nth-of-type(2) {
  opacity: 0;
}
#headerArea .gMenuBtn.active span:nth-of-type(3) {
  -webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
}

/* ボタンタイトル*/
#headerArea .gMenuBtn span:nth-of-type(4) {
  color: #484848;
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  top: 23px;
  width: 36px;
  height: auto;
  background:none;
}


/*ヘッダーメニュー*/

.gMenuInner {
  display: none;
  background-color: #fff;
  padding-bottom: 3px;
  background-color: #636363;
  border-bottom: 3px solid #FFF;
}

.gMenuInner ul:last-child li:last-child {
  border-bottom: none;
}

.gMenuInner ul li {
  border-bottom: 1px dotted #ccc;
  text-align: center;
  font-size: 15px;
  color: #fff;
}

.gMenuInner ul li a {
font-weight:bold;
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
  text-decoration: none;
  color: #fff;
}

.gMenuInner ul li:hover {
background-color:rgba(255,255,255,0.2);
transition:0.5s;
}

.gMenuInner ul li aover {
text-decoration:none;
}

/*ドロップダウンメニュー*/
@media only screen and (max-width: 767px) {
#headerArea .gMenuInner .sub-menu {
  display: none;
}
}

/***********************
メインイメージ
************************/

#mainimg {
  width: auto;
  height: auto;
  padding: 0;
  display: block;
  background-image: url(images/column_title.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  box-shadow: inset 0px 4px 5px -3px rgba(0, 0, 0, 0.15);
}

#mainimg .mainimg {
  width: 100%;
  max-width: 1100px;
  height: auto;
}


/***********************
ぱんくずリスト
************************/

#topicpath {
  width: 100%;
padding-left:0!important;
margin-bottom:15px;
  overflow: hidden;
background:#f4f4f4;
box-shadow: 2px 2px 4px #ccc;
}

#topicpath .topicpath_container{
width: 1100px;
margin-left:auto;
margin-right:auto;
}

#topicpath li {
position:relative;
  float: left;
  font-size: 11px;
font-weight:800;
  color: #000;
  line-height: 1.2;
padding:0.5rem 1em;
}

#topicpath li:not(:last-child)::after{
position:absolute;
font-family:'Font Awesome 5 Free';
content:'\f054';
top:0.5em;
right:-0.25em;
color:#aaa;
}


#topicpath li a {
  text-decoration: none;
font-weight:700;
  color: #888;
}

#topicpath li a:hover {
  text-decoration: underline;
}


/*メインエリア*/

#mainArea {
  width: 96%;
  height: auto;
  margin: 0 2%;
  padding: 0;
  display: block;
}

/*センターに移動*/

.center {
  text-align: center;
}


/*コンテンツエリア*/

#contentArea {
  width: auto;
  height: auto;
  margin-bottom: 50px;
  display: block;
  font-size: 15px;
  line-height: 1.8;
}


/***********************
トップメインコンテンツ上部
************************/

#contentArea .articleArea1 {
  width: auto;
  height: auto;
  margin-bottom: 40px;
  padding-bottom: 20px;
  margin-top: 0px;
  display: block;
}

#contentArea .articleArea1 h2:first-child {
  margin-top: 0;
}

/*記事見出し*/

h2 {
  background-image: url(images/h2.png);
  background-position: left top;
  background-repeat: repeat;
  line-height: 1.4;
  padding: 5px 10px;
  border-top: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  border-left: 5px solid #636363;
  margin-top: 20px;
  margin-bottom: 30px;
  color: #000;
  display: block;
  text-decoration: none;
  clear: both;
  font-size: 19px;
}

#contentArea h2{
margin:40px 0 15px;
}

/*トップ上部のチェックマークのテキスト*/

#contentArea .chkTitle {
  font-size: 16px;
  line-height: 1.4;
  padding-left: 5px;
  padding-left: 1%;
  padding-right: 1%;
  margin-left: 3%;
  margin-right: 3%;
  margin-bottom: 3px;
  color: #000;
}


/*トップ上部のチェックマーク*/

#contentArea .chkTitle img {
  width: 25px;
  margin-right: 8px;
}


/*トップ上部の記事のテキスト*/

#contentArea .chkText {
  font-size: 14px;
  line-height: 1.8;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 10px;
  margin-left: 3%;
  margin-right: 3%;
  margin-bottom: 10px;
  background-image: url(images/dotted.png);
  background-position: center bottom;
  background-repeat: repeat-x;
  color: #000;
}

.articleArea1 p {
  padding-left: 2%;
  padding-right: 2%;
  font-size: 15px;
}


/*トップ上部の記事の画像*/

.pic {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-bottom: 20px;
}

.pic:hover {
  opacity: 0.8;
}


/*トップ上部の記事エリア*/

#contentArea .articleArea2 {
  width: auto;
  height: auto;
  margin-bottom: 40px;
}


/*トップ上部のテキストエリア*/

#contentArea .sectionArea {
  margin-top: 10px;
  margin-bottom: 20px;
  content: '';
  display: table;
  clear: both;
  overflow: hidden;
}

.articleArea2 p {
  font-size: 15px;
  padding-left: 2%;
  padding-right: 2%;
}


/*h3見出し*/

#contentArea h3 {
  position: relative;
  border-bottom: 3px solid #cccac3;
  padding: 6px 8px 6px 8px ;
  margin: 15px 0px 10px;
  line-height: 1.6;
  font-size: 18px;
}
#contentArea h3:after {
  position: absolute;
  bottom: -3px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 3px;
  background-color: #636363;
}

/*キャラクター吹き出し部分*/

#contentArea #balloon::after {
  display: block;
  content: "";
  clear: both;
}

#contentArea #balloon p {
  padding: 0;
  margin: 0;
}

#balloon .bln {
  font-size: 13px;
  line-height: 130%;
  _zoom: 1;
  overflow: hidden;
  padding: 0;
  margin: 0;
  color: #333333;
  width: 70%;
  float: left;
}

#balloon .b_body {
  margin: 0;
  width: auto;
  padding: 10px;
  _zoom: 1;
  overflow: hidden;
}

#balloon .b_body p {
  font-size: 13px;
  line-height: 1.6;
}

#balloon .balloon1 .b_body {
  background-color:#FFF;
  border:solid 2px #FF8201;
}

#balloon .bln .img-r {
  position: relative;
  z-index: 100;
  background-image: url(images/balloon.png);
  top: 40px;
  right: 2px;
  float: right;
  width: 28px;
  height: 19px;
  margin: 0;
}

#balloon .rnd1 {
  position: relative;
  z-index: 1;
  margin: 15px auto 15px auto;
  border-radius: 10px;
}

#balloon .blnimg {
  float: right;
  width: 30%;
}

div.bln:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

.balloon1 .img-r {
  background-position: -78px -141px;
}


/***********************
メインコンテンツ中間 ランキング部分
************************/

.productArea {
  padding: 10px 10px 20px;
  margin-bottom: 25px;
  overflow: hidden;
border: 4px double #e4e4e4;
}

.productArea:last-child{
margin-bottom:50px;
}


/*比較記事タイトル*/

.productArea .productName {
  width: auto;
  height: 50px;
  line-height: 1.4;
  padding-top: 0;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 20px;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  background-image: url(images/border-Bottom.png);
  background-position: left bottom;
  background-repeat: repeat-x;
}


#contentArea .productArea .productName p {
  color: #030303;
  font-weight: bold;
  font-size: 30px;
  line-height: 1.2;
  padding-top: 0;
  padding-left: 14px;
  padding-right: 0;
  padding-bottom: 0;
  margin: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto
}

#contentArea .productArea .productName p a{
  color: #0066cc;
  text-decoration: none;
}

#contentArea .productArea .productName p a:hover {
  text-decoration: underline;
}

.productArea .productName img {
  max-width: 50px;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50px;
  flex: 0 0 50px;
}


/*比較記事冒頭テキスト*/

.productText1 {
  width: 98%;
  float: left;
  margin-right: 1%;
  margin-left: 1%;
}

.productText1 p {
  margin-top: 5px;
}


/*比較記事小見出し*/

#contentArea .productArea .productText1 p.title {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
  color: #ff712a;
  margin-left: 0;
  margin-right: 0;
  padding-left: 6px;
  padding-right: 0;
  text-indent: 0;
  font-size: 18px;
}


/*比較記事画像*/

.productArea .thumbnail1 {
  width: 80%;
  max-width: 240px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media only screen and (max-width:767px){
.productArea .thumbnail1{margin-bottom:0.5em;}
.productArea .productName{margin-bottom:0.5em;width:100%;max-width:100%;}
}


/*比較記事枠*/

.productArea table {
  border-collapse: collapse;
  width:96%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 2%;
  margin-right: 2%;
  border-left: #d4d4d4 1px dotted;
  border-right: #d4d4d4 1px dotted;
}
.productArea th.t_top {
  border-top: #be1309 3px solid;
}

.productArea tr:first-child {
  border-top: #d4d4d4 1px dotted;
}
.productArea th {
  border-right: #d4d4d4 1px dotted;
  border-bottom: #d4d4d4 1px dotted;
  text-align: center;
  padding:5px 10px;
  font-weight: bold;
  font-size: 15px;
  background-color: #f9f9f9;
}
.productArea td.t_top {
  border-top: #d4d4d4 3px solid;
}

.productArea td {
  border-bottom: #d4d4d4 1px dotted;
  text-align: center;
  padding:5px 10px;
  line-height: 50px;
}
.productArea td img{
  width: 100%;
  max-width: 192px;
}

.productText1-container{
background:#FFFFF0;
float:right;
box-shadow:0px 0px 5px #ccc;
width:62%;
}


/*公式サイトボタン*/

.officialBtn {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.officialBtn .top_official_btn {
  max-width: 310px;
  display: inline-block;
  margin: 0 0 10px 0;
filter: drop-shadow(0px 3px 5px rgba(170,170,170,1));
}

.officialBtn .top_detail_btn {
  max-width: 310px;
  display: inline-block;
filter: drop-shadow(0px 3px 5px rgba(170,170,170,1));
}

.officialBtn .top_official_btn:hover{
filter:drop-shadow(0px 0px 0px rgba(170,170,170,1));
transform: translate(0, 3px);
transition:0.3s;
}

.officialBtn .top_detail_btn:hover{
filter:drop-shadow(0px 0px 0px rgba(170,170,170,1));
transform: translate(0, 3px);
transition:0.3s;
}

.reflection{
display:inline-block;
position:relative;
overflow:hidden;
border-radius:25px;
z-index:1;
}

.reflection:after {
content:"";
height:100%;
width:30px;
position:absolute;
top:-180px;
left:0;
background-color: #fff;
opacity:0;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 3s ease-in-out infinite;
}

@keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.column_btn:hover {
  opacity: 0.8;
}

.column_btn2 {
  width: 70%;
  max-width: 300px;
  height: auto;
  display: block;
  background-color: #e80012;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

.column_btn2:hover {
  opacity: 0.8;
}

.column_btn2 img {
  max-width: 254px;
  width: 70%;
}


/*比較記事後方テキスト*/

.productText2 {
  width: 96%;
  margin-bottom: 20px;
  margin-left: 2%;
  margin-right: 2%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 2%;
  padding-right: 2%;
  border: 5px solid #e4e4e4;
}

.productText2{

}

.productText2 ul {
  font-size: 15px;
  line-height: 1.4;
  color: #000000;
  list-style: disc;
  list-style-position: outside;
  padding-left: 6%;
}

.productText2 ul li {
  margin-top: 8px;
  margin-bottom: 5px;
}

#contentArea .padding15 {
  padding: 0 0 10px;
  line-height: 1.9;
  margin-bottom: 5px;
}


/*比較記事小見出し*/

#contentArea .productArea .productText2 p.title {
  font-weight: bold;
  color: #1e698d;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding-top: 8px;
  padding-left: 50px;
  padding-right: 0;
  padding-bottom: 8px;
  text-indent: 0;
  border-bottom: 1px dotted #636363;
  font-size: 18px;
  background-image: url(images/icon1.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 40px auto;
}

.productArea .productText2 ul { padding-left: 20px;}

.productText2_data .col-1{
display:block;
min-width: 6em;
font-weight:600;
}

.productText2_data .col-2{
widows:calc(100% - 6em);
padding-left:1.5em;
position:relative;
}

.productText2_data .col-2::before{
position:absolute;
  content: "";
  display: block;
  top: 0.55em;
  left: 0.5em;
  border: 5px solid transparent;
  border-left: 5px solid #09f;
}

.productText2_data p{
display:flex;
margin:0.5em 0;
}

@media screen and (max-width: 480px) {
#search-filter-form-489 ul {
  display: none;
}
.productText2 div.sp_hidden {
  display: none;
}
.productArea .officialBtn:last-child{
  display: none
}

}

@media only screen and (max-width: 767px) {
.productArea .productText2 table {margin: 0;;}
.productArea .productText2 th,
.productArea .productText2 td {
  width: 100%;
  display: block;
  border: none;
}
.productArea .productText2 td {
  border-top: #ddd 1px dotted;
  border-bottom: #ddd 1px solid;
}
.productText1-container{
  float:none;
  width:auto;
  margin:0 0.5em 2em;
  padding:0.1em 0.5em;
}
}


/*トップ中間比較記事下コラムエリア*/

.clumnBox1 {
  box-shadow:0 0 0 1px #cfcfcf,0 0 0 6px #ddd;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 30px;
  margin-left: 2%;
  margin-right: 2%;
  padding-left: 3%;
  padding-right: 3%;
}


/*トップ中間比較記事下コラムのチェックマーク横テキスト*/

.sectionTitle03 {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 15px;
  color: #000;
}


/*トップ中間比較記事下コラムのチェックマーク画像*/

.sectionTitle03 img {
  margin-right: 8px;
}


/*公式サイトはコチラ*/

.link_btn {
position:relative;
overflow:hidden;
  max-width: 504px;
  width: 100%;
  height: auto;
  margin: 30px auto 40px;
  display: block;
filter: drop-shadow(0px 3px 5px rgba(170,170,170,1));
z-index: 1;
}

.link_btn:hover {
  opacity: 0.8;
filter:drop-shadow(0px 0px 0px rgba(170,170,170,1));
transform: translate(0, 3px);
transition:0.3s;
animation:none;
}

@keyframes click {
  0% {right: 20px;}
  20% {right: 22px;}
  30% {right: 10px;}
  40% {right: 20px;}
  50% {right: 10px;}
60% {right: 20px;}
}

.link_btn img {
  width: 100%;
}



/***********************
メインコンテンツ中間 ランキング部分
************************/

/*レビューエリア*/

.review-title {
  font-weight: 600;
  border: initial;
  border-bottom: 3px solid #0f71cf;
  padding: 30px 80px 4px 16px;
  margin-bottom: 40px;
  background-image: url(images/user-icon.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 80px;
  font-size: 25px;
}

.user3 {
  margin-bottom: 60px;
}

.user3::after {
  content: "";
  display: block;
  clear: both;
}

.user3-sub {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.user3-sub img {
  width: 84px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.user3-main {
  margin-top: 38px;
  background-color: #f3f7fb;
  border: 1px #cfe2f5 solid;
  position: relative;
  padding: 0 15px;
  font-size: 14px;
  line-height: 1.8;
  border-radius: 10px
}

#contentArea .user3-main h3 {border: initial;}
#contentArea .user3-main h3:after {content: none;}

.user3-main .review-balloon {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -20px;
}

.user3-main h4 {
  margin: 10px 0 10px;
  border: none;
  font-size: 16px;
}

.user3-main h4 span {
  margin: 0;
  padding: 0;
  background: none;
}

.user3-main p {
  margin-top: 5px;
}




@media screen and (min-width: 681px) {
  .review-title {
      padding-left: 10px;
      padding-right: 100px;
      background-size: 100px;
  }


/*         position: absolute;
      top: 78px;
      left: 0; */


   .user3-sub {
      width: 18%;
      display: block;
      margin-left: 0;
      margin-right: 0;
      padding-left: 20px;
      padding-right: 20px;
      float: left;
      box-sizing: border-box;
  }
  .user3-sub img {
      width: 68px;
      display: inline-block;
      margin-top: 50px;
      margin-left: 0;
      margin-right: 0;
  }
  .user3-main {
      width: 80%;
      box-sizing: border-box;
      float: right;
      margin-top: 0;
      margin-right: 2%;
      background-color: #f3f7fb;
      border: 1px #cfe2f5 solid;
      position: relative;
      padding: 0 15px;
      font-size: 15px;
      line-height: 1.8;
      border-radius: 10px
  }
  .user3-main .review-balloon {
      -webkit-transform: rotate(0);
      transform: rotate(0);
      position: absolute;
      top: 78px;
      left: 0;
      margin-left: -37px;
  }
  .user3-main h4 {
      border: none;
  }
  .user3-main h4 span {
      margin: 0;
      padding: 0;
      background: none;
  }
}

/***********************
サイドエリア
************************/

#sideArea {
  margin-bottom: 50px;
}


#sideArea .menu-sp .categoryLink a {
  width: auto;
  height: auto;
  background: none;
  font-size: 15px;
  line-height: 1.4;
  font-weight: bold;
  color: #4f4f4f;
  text-decoration: underline;
  text-align: center;
  padding-left: 0;
}

#sideArea .menu-sp .categoryLink a:hover {
  text-decoration: none;
  background: none;
}
#sideArea .menu-pc {
  margin-bottom: 30px;
}

#sideArea .menu-pc h4 {
  margin-top: 0;
  height: 40px;
}

#sideArea .menu-pc h4 a {
  display: inline;
  color: #fff;
  background: none;
  padding: 0;
}

#sideArea .menu-pc h4 a:hover {
  background: none;
  text-decoration: underline;
}


/*サイドエリアの商品紹介タイトル*/

.sideColumn_title {
  width: 92%;
  max-width: 580px;
  height: auto;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 8px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0 !important;
  color: #fff;
  background-color: #636363;
  font-size: 20px;
  font-weight: bold;
  border: 2px #636363 solid;
  box-sizing: border-box;
  border-radius: 6px 6px 0 0;
  background-image: url(images/column_title.png);
  background-position: center center;
  background-repeat: repeat;
  position: relative;
}

.sideColumn_title::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top:0;
  left:0;
  border-radius: 6px 6px 0 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */ /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


/*サイドエリアの商品紹介枠*/

#sideColumn {
  width: 92%;
  max-width: 580px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  border: 2px #636363 solid;
  padding-top: 20px;
  padding-left: 3%;
  padding-right: 3%;
  padding-bottom: 20px;
  box-sizing: border-box;
  border-radius: 0 0 6px 6px;
}


/*サイドエリアの商品名見出し*/

#sideArea #sideColumn .pickup {
  font-size: 20px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 1.6;
}

#sideArea #sideColumn .pickup a {
  text-decoration: none;
  color: #0066cc;
}

#sideArea #sideColumn .pickup a:hover{
  text-decoration: underline;
}

#sideArea .pickup_link img:hover{
  opacity: 0.8;
transition:0.5s;
}

/*サイドエリアの商品紹介画像*/

#sideArea #sideColumn img {
  max-width: 260px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  display: block;
}


/*サイドエリアの商品紹介テキスト*/

#sideArea #sideColumn .sideColumn_text {
  margin-left: 3%;
  margin-right: 3%;
  margin-bottom: 15px;
  font-size: 15px;
  color: #000;
  line-height: 1.6;
}


/*サイドエリアの商品紹介リンク*/

#sideArea #sideColumn .sideColumn_link {
  font-size: 15px;
  color: #000;
  margin-bottom: 8px;
  margin-left: 3%;
  margin-right: 3%;
  line-height: 1.4;
  padding-left: 15px;
  position: relative;
}

#sideArea #sideColumn .sideColumn_link:before {
  position: absolute;
  content: "";
  display: block;
  top:5px;
  left:0;
  border: 5px solid transparent;
  border-left: 5px solid #636363;
}

#sideArea #sideColumn .sideColumn_link a {
  color: #0066cc;
}

#sideArea #sideColumn .sideColumn_link a:hover {
  opacity: 0.7;
transition:0.5s;
}


/*スマホ用サイドメニュー*/

#sideArea .menu-sp {
  display: block;
}


/*スマホ用サイドメニュー見出し*/

#sideArea .menu-sp {
  margin-bottom: 10px;
}

#sideArea .menu-sp h4 {
  max-width: 580px;
  padding-top: 9px;
  padding-bottom: 9px;
  text-indent: 32px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  cursor: pointer;
  background-color: #636363;
  background-image: url(images/h4_sp.png);
  background-position: left 50%;
  background-repeat: repeat-x;
  color: #FFF;
  font-weight: bold;
  font-size: 15px;
  position: relative;
}

#sideArea .menu-sp h4::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  background-color: #fff;
  position: absolute;
  margin-top: -8px;
  top:50%;
  left:6px;
}

#sideArea .menu-sp h4::after {
  position: absolute;
  display: block;
  content: "";
  border:6px solid transparent;
  border-left:6px solid #636363;
  margin-top: -6px;
  top:50%;
  left:12px;
  transition: all 0.5s;
}

#sideArea .menu-sp h4.active::after {
  transform: rotate(90deg);
  transform-origin: 2px 6px;
}


/*スマホ用サイドメニュー枠*/
#sideArea .menu-sp .menubox {
  max-width: 580px;
  width: auto;
  display: none;
  background-color: #f5f5f5;
  padding-left: 4%;
  padding-right: 4%;
  padding-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#sideArea .menu-sp ul#menu1 li {
  width: auto;
  height: auto;
  background-image: url(images/dotted2.png);
  background-position: left bottom;
  background-repeat: repeat-x;
  font-size: 15px;
  line-height: 1.4;
}

#sideArea .menu-sp .menubox a {
  display: block;
  height: auto;
  padding-top: 16px;
  padding-bottom: 13px;
  padding-left: 20px;
  text-decoration: none;
  color: #000;
  position: relative;
}

#sideArea .menu-sp .menubox a:before {
  position: absolute;
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  background-color: #636363;
  top:50%;
  left:0;
  margin-top: -5px;
}

#sideArea .menu-sp .menubox a:after {
  width: 12px;
  height: 12px;
  position: absolute;
  display: block;
  content: "";
  background-image: url(images/arrow.png);
  background-position: left center;
  background-repeat: no-repeat;
  -webkit-background-size: 12px;
      background-size: 12px;
  top:50%;
  left:0;
  margin-top: -5px;
}

#sideArea .menu-sp .menubox a:hover {
  opacity: 0.7;
transition:0.5s;
}


/*カスタムメニュー―*/

#sideArea .menu-sp > div ,
#sideArea .menu-sp > ul{
  display: none;
}

#sideArea .menu-sp .menu ,
#sideArea .menu-sp > ul {
  max-width: 580px;
  width: auto;
  background-color: #f5f5f5;
  padding-left: 4%;
  padding-right: 4%;
  padding-bottom: 10px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  }

   #sideArea .menu-sp .menu > li > a,
   #sideArea .menu-sp > ul > li > a {
   width: auto;
  height: auto;
  background-image: url(images/dotted2.png);
  background-position: left bottom;
  background-repeat: repeat-x;
  font-size: 15px;
  line-height: 1.4;
  display: block;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  position: relative;
  color: #000;
  text-decoration: none;
   }

  #sideArea .menu-sp .menu > li > a:before,
  #sideArea .menu-sp > ul > li > a:before {
      position: absolute;
      display: block;
      content: "";
      width: 12px;
      height: 12px;
      background-color: #636363;
      top:50%;
      left:0;
      margin-top: -5px;
  }

  #sideArea .menu-sp .menu > li > a:after,
  #sideArea .menu-sp > ul > li > a:after {
      width: 12px;
      height: 12px;
      position: absolute;
      display: block;
      content: "";
      background-image: url(images/arrow.png);
      background-position: left center;
      background-repeat: no-repeat;
      -webkit-background-size: 12px;
      background-size: 12px;
      top:50%;
      left:0;
      margin-top: -5px;
  }

  #sideArea .menu-sp .menu > li > .sub-menu > li > a,
  #sideArea .menu-sp > ul > li > .children > li > a {
      width: auto;
  height: auto;
  background-image: url(images/dotted2.png);
  background-position: left bottom;
  background-repeat: repeat-x;
  font-size: 15px;
  line-height: 1.4;
  display: block;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 28px;
  position: relative;
  color: #000;
  text-decoration: none;
  }

  #sideArea .menu-sp .menu > li > .sub-menu > li > a:before,
  #sideArea .menu-sp > ul > li > .sub-menu > li > a:before,
  #sideArea .menu-sp > ul > li > .children > li > a:before {
  position: absolute;
  content: "";
  display: block;
  top:50%;
  left:10px;
  margin-top: -5px;
  border: 5px solid transparent;
  border-left: 5px solid #636363;
}

#sideArea .menu-sp > ul > li > .children > li > .children > li > a ,
#sideArea .menu-sp > ul > li > .sub-menu > li > .sub-menu > li > a ,
#sideArea .menu-sp .menu > li > .sub-menu > li > .sub-menu > li > a {
      width: auto;
  height: auto;
  background-image: url(images/dotted2.png);
  background-position: left bottom;
  background-repeat: repeat-x;
  font-size: 15px;
  line-height: 1.4;
  display: block;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 38px;
  position: relative;
  color: #000;
  text-decoration: none;
  }

#sideArea .menu-sp > ul > li > .children > li > .children > li > a:before ,
#sideArea .menu-sp > ul > li > .sub-menu > li > .sub-menu > li > a:before ,
#sideArea .menu-sp .menu > li > .sub-menu > li > .sub-menu > li > a:before {
  position: absolute;
  content: "";
  display: block;
  top:50%;
  left:20px;
  margin-top: -5px;
  border: 5px solid transparent;
  border-left: 5px solid #636363;
}

#sideArea .menu-sp > ul > li > .children > li > .children > li > .children > li > a ,
#sideArea .menu-sp > ul > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a ,
#sideArea .menu-sp .menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a {
      width: auto;
  height: auto;
  background-image: url(images/dotted2.png);
  background-position: left bottom;
  background-repeat: repeat-x;
  font-size: 15px;
  line-height: 1.4;
  display: block;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 38px;
  position: relative;
  color: #000;
  text-decoration: none;
  }

#sideArea .menu-sp > ul > li > .children > li > .children > li > .children > li > a:before ,
#sideArea .menu-sp > ul > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a:before ,
#sideArea .menu-sp .menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a:before  {
  position: absolute;
  content: "";
  display: block;
  top:50%;
  left:20px;
  margin-top: -5px;
  border: 5px solid transparent;
  border-left: 5px solid #636363;
}

  #sideArea .menu li a:hover {
      text-decoration: underline;
      opacity: 0.7;
   }

/**PC用サイドメニュー*/

#sideArea .menu-pc {
  display: none;
}


/*上部へ戻る*/

.pagetop {
position:fixed;
    width: 70px;
right:-120px;
bottom:10px;
}

.pagetop img:hover {
  opacity: 0.7;
transition:0.5s;
}



/***********************
フッターエリア
************************/

#footerArea {
  background-color: #636363;
}

#footerArea footer {
  display: block;
}


/*フッターメニュー*/

#footerArea ul {
  padding-top: 10px;
  padding-bottom: 10px;
  background-image: url(images/footer_bg.png);
  background-position: center center;
  background-repeat: repeat;
  padding-left: 4%;
  padding-right: 4%;
  text-align: center;
  display: block;
}

#footerArea li {
  margin: 0 1px;
  font-size: 11px;
  display: inline;
  color: #fff;
}

#footerArea li a {
  color: #fff;
  text-decoration: none;
}

#footerArea li a:hover {
  text-decoration: underline;
}


/*フッターテキスト*/

#footerArea .footerText {
  padding: 15px 4%;
  font-size: 11px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}

#footerArea .footerText a {
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
}

#footerArea .footerText a:hover {
  text-decoration: underline;
}

/***********************
案件紹介下層記事
************************/

/*案件紹介ページの画像*/

.sectionArea .thumbnail {
  width: 180px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  display: block;
}


/*案件紹介ページのサムネイル画像**/

.sectionArea .thumbnail_official_link {
  width: 185px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: block;
}

.sectionArea .thumbnail_official_link:hover {
  opacity: 0.7;
}


/*案件紹介ページの公式サイトはこちら**/

.sectionArea .tail_btn {
  width: 185px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: block;
}

.sectionArea .tail_btn:hover {
  opacity: 0.7;
}


/*案件紹介ページ上部の画像*/

.tailPic {
  width: 96%;
  margin-top: 10px;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 20px;
}

.tailPic a:hover {
  opacity: 0.8;
}

.tailPic img {
  width: 100%;
}

/***********************
コラム記事エリア
************************/

/*コラムページの画像*/

.subimg_left {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: block;
}

.subimg_right {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: block;
}

.subimg_center {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  display: block;
}

/*関連記事*/
#mainArea #contentArea .yarpp-related {
  margin-top: 100px;
}

#mainArea #contentArea .yarpp-related h2 {
  margin-bottom: 20px;
}

#mainArea #contentArea .yarpp-related ol {
  list-style: none;
  padding: 0 3%;
}

#mainArea #contentArea .yarpp-related li {
  padding-left: 14px;
  position: relative;
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom:1px dotted #666;
}

#mainArea #contentArea .yarpp-related li a:before {
  position: absolute;
  content: "";
  display: block;
  top: 14px;
  left: 0px;
  border: 5px solid transparent;
  border-left: 5px solid #636363;
}

#mainArea #contentArea .yarpp-related abbr {
  display: none;
}

#mainArea #contentArea .yarpp-related a {
  color: #0066c0;
}

#mainArea #contentArea .yarpp-related a:hover {
  opacity: 0.7;
}

.relpost-block-container{
display:flex;
justify-content: space-evenly;
flex-wrap: wrap;
}

/*ページング*/
.wp-pagenavi {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
}

/***********************
サイトマップ
************************/

/* PS AUTO SITEMAP */

#sitemap_list .cat-item > a,
#sitemap_list .page_item > a {
  background-image: url(images/h2.png);
  background-position: left top;
  background-repeat: repeat;
  line-height: 1.4;
  padding: 5px 5px 5px 20px;
  border-top: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  border-left: 5px solid #636363;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #000;
  display: block;
  text-decoration: none;
  position: relative;
}

#sitemap_list .cat-item > a {
  pointer-events: none;
}

#sitemap_list.cat-item > a:hover,
#sitemap_list.page_item > a:hover {
  text-decoration: underline;
}

.sitemapList,
#sitemap_list .cat-item {
  width: 86%;
  margin-left: 7%;
  margin-right: 7%;
}

.sitemapList li,
#sitemap_list .post-item {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 15px;
  padding-left: 16px;
  line-height: 1.4;
  position: relative;
}

.sitemapList li a,
#sitemap_list .post-item a {
  color: #000;
  text-decoration: none;
}

.sitemapList li a::before,
#sitemap_list .post-item a::before {
  position: absolute;
  content: "";
  display: block;
  top: 10px;
  left: 0;
  border: 5px solid transparent;
  border-left: 5px solid #636363;
}

.sitemapList li a:hover,
#sitemap_list .post-item a:hover {
  text-decoration: underline;
}


/***********************
カテゴリーページ
************************/

#categoryArea {
  width: auto;
  height: auto;
  margin-bottom: 50px;
  float: none;
}

#categoryArea .columnArea {
  width: 100%;
  height: auto;
  padding-left: 1em;
  padding-right: 1em;
}

#contentArea .list a,
#categoryArea .columnArea a {
  display: block;
  position: relative;
  background-image: url(images/dotted.png);
  background-position: center bottom;
  background-repeat: repeat-x;
  width: 100%;
  height: auto;
  padding: 1.2em 0;
  padding-left: 1em;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
  clear: both;
}

#contentArea .list .title,
#categoryArea .categoryTitle {
  font-size: 18px;
  line-height: 25px;
  color: #000;
  font-weight: bold;
  margin-bottom: 1em;
}
#contentArea .list .excerpt,
#categoryArea .excerpt {
  font-size: 16px;
  line-height: 25px;
  color: #000;
  min-height: 8em;
}
#categoryArea .columnArea .excerpt p {
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  padding-top: 10px;
}

#contentArea .list a .thumb,
#categoryArea a .thumb {
  width: 80px;
  margin-right: 1em;
  float: left;
}

#contentArea .list a:hover,
#categoryArea .columnArea a:hover{
  background-color: #f5f5f5;
}




/*投稿ページ*/

.post-content hr {
  border-bottom: 1px solid #efefef;
  margin: 20px 0;
  clear: both;
}
.post-content ul {
  list-style: disc;
  padding-left: 40px;
}
.post-content ol {
  list-style: decimal;
}
.post-content dl dt {
  font-weight: bold;
  margin-bottom: 4px;
}
.post-content dl dd {
  margin: 0 0 20px;
  border-left: 4px solid #e5e5e5;
  padding: 0 0 0 10px;
}
.post-content pre {
  padding: 20px;
  overflow: scroll;
  font-family: 'Courier', monospace;
}
.post-content h1 {
  clear: both;
}
.post-content h2 {
  clear: both;
}
.post-content h3 {
  clear: both;
}

.post-content blockquote {
  clear: both;
  margin: 0 0 28px;
  padding: 10px 20px 10px 55px;
  position: relative;
  border: 1px #eee solid;
  background: #fafafa;
}

.post-content blockquote:before {
  content: '';
  font-family: 'FontAwesome';
  font-size: 22px;
  color: #e7e7e7;
  position: absolute;
  top: 20px;
  left: 12px;
}

.post-content table {
  border: 1px #ddd solid;
  width: 80%;
}
.post-content table th,
.post-content table td {
  padding: 8px 10px;
  border: #ddd solid 1px;
}
.post-content table th {
  color: #fff;
}
.post-content table thead th {
  background: #5e6265;
}
.post-content table tbody th {
  background: #fdfdfd;
  text-align: left;
  font-weight: normal;
  color: #000000;
  width: 260px;
}
@media only screen and (max-width: 767px) {
.post-content table {width: 100%;}
.post-content table tbody th {width: 100px;}
.post-content table tbody td {width: 200px;}
}


/***********************
その他
************************/

/*引用*/
blockquote {
  clear: both;
  margin: 0 0 28px;
  padding: 10px 20px 10px 55px;
  position: relative;
  border: 1px #eee solid;
  background: #fafafa;
}

blockquote:before {
  content: '';
  font-family: 'FontAwesome';
  font-size: 22px;
  color: #e7e7e7;
  position: absolute;
  top: 20px;
  left: 12px;
}

/*画像配置*/
.alignleft {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}
.alignright {
  margin-top: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}

.aligncenter {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
}

.alignnone {
  margin-top: 10px;
  margin-bottom: 15px;
}

/*ウィジェット*/
.tagcloud {
  margin-top: 10px;
}

.tagcloud .tag-cloud-link {
  padding: 0.1em 0.5em;
  margin: 0 0.1em 0.2em 0;
  display: inline-block;
  font-size: 12px!important;
  background: #888888;
  background: rgba(35, 35, 35, 0.5);
  color: #fff;
  text-decoration: none;
  line-height: 1.6;
  }

.tagcloud .tag-cloud-link:hover {
  opacity: 0.8;
}


/*インプット装飾*/
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select, textarea, .field {
  display: block;
  padding: 10px 2%;
  margin-bottom: 14px;
  font-size: 1em;
  color: #666;
  border: 3px solid rgba(51, 51, 51, 0.1);
  border-radius: 1px;
  vertical-align: middle;
  max-width: 100%;
  background-color: #FFFFFF;
  -webkit-transition: background-color 0.24s ease-in-out;
  transition: background-color 0.24s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

/*アーカイブ*/

.menu-sp select {
      margin: 0;
  margin-top: 1em;
  width: 100%;
  max-width: 100%;
      padding: 3%;
  line-height: 1.2;
  text-transform: none;
  -webkit-appearance: none;
  background-image: url(images/select_arrow.png);
  background-repeat: no-repeat;
  background-position: 97.5% center;
  background-size: 9px;
      font-size: 1em;
  color: #666;
  vertical-align: middle;
  transition: background-color 0.24s ease-in-out;
}

.menu-sp select {
  background-color: #ffffff;
}

.menu-sp label {
  display: none!important;
}

/*サーチ*/

.menu-sp .searchform {
  margin-top: 1em;
  position: relative;
  height: 40px;
  margin-bottom: 1.5em;
  display: block!important;
}

.menu-sp input[type="text"] {
  position: absolute;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.menu-sp #searchsubmit {
  position: absolute;
  top:0;
  right:0;
  padding: 9px 0;
  border: 3px solid rgba(51, 51, 51, 0.1);
  background-color: #aaa;
  width: 50px;
  color:#FFF;
  font-weight: bold;
}


/*インライン2カラム*/
.col2 {position: relative; width: 100%;}
.col2 > div {
  display: inline-block;
  width: 350px;
  vertical-align: top;
}

/*計算デザイン*/
.interest_form input.box{
display:inline-block!important;
height: 2em;
width: 8em;
margin: 0 0.5em 0em 0.5em;
border-radius: 5px;
}

.interest_form p:nth-of-type(2){
margin-top:2em;
}

.interest_form p:nth-of-type(n+2){
margin-left:0.5em;
}

#interest{
color:red;
vertical-align:bottom;
font-size:1.5em;
text-align:right;
}

/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
メディアクエリによる切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/


/* PC向けおよび大型タブレット向けのレイアウトの指定:768~960px */

@media only screen and (min-width: 768px) {
  /*ヘッダーエリア*/
  #headerArea {
      min-width: 1110px;
  }
  /*h1見出し*/
  #headerArea h1 {
      height: 18px;
      text-align: right;
  }
  #headerArea header {
      min-width: 1100px;
      width: 1100px;
      margin-right: auto;
      margin-left: auto;
      padding-left: 5px;
      padding-right: 5px;
      content: '';
      display: table;
      clear: both;
  }
  /*ロゴ*/
  #headerArea .logo {
      max-height: 50px;
      float: left;
  }
  #headerArea .logo img {
      max-height: 50px;
  }

/*    ヘッダーメニュー*/
  #headerArea .gMenuBtn {
      display: none;
  }

  #headerArea .gMenuInner {
      display: block!important;
      clear: both;
      margin-top: 0;
      margin-bottom: 0;
      padding-bottom: 0;
      background-color: #636363;
      border-top: 3px solid rgba(255, 255, 255, 0.5);
      border-bottom: 3px solid rgba(255, 255, 255, 0.5);
      /* box-shadow */
box-shadow:0px 50px 40px -26px rgba(255, 255, 255, 0.1) inset;
-moz-box-shadow:0px 50px 40px -26px rgba(255, 255, 255, 0.1) inset;
-webkit-box-shadow:0px 50px 40px -26px rgba(255, 255, 255, 0.1) inset;

  }

  #headerArea .gMenuInner ul {
      width: 1100px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 3px;
      padding-bottom: 3px;
     display: -moz-flex;
     display: -ms-flex;
     display: -o-flex;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
  }

  #headerArea .gMenuInner ul li {
      border-top: 0;
      padding-top: 0px;
      padding-bottom: 0px;
      text-align: center;
      font-size: 15px;
      color: #fff;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      border-left: 1px solid rgba(233, 235, 236, 0.55);
      border-right: 1px solid rgba(143, 161, 177, 0.48);
      border-bottom: none;
  }

  #headerArea .gMenuInner ul li a {
      display: inline-block;
      text-decoration: none;
      color: #fff;
      padding-top: 6px;
      padding-bottom: 6px;
  }

  #headerArea .gMenuInner ul li a:hover {
      text-decoration: underline;
  }

  /*ドロップダウンメニュー*/
  .gMenuInner ul li {
      position: relative;
  }
  #headerArea .gMenuInner .menu > .menu-item > .sub-menu {
      width: 140%;
      position: absolute;
      top:38px;
      left:-20%;
      background-color: #636363;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      display: none;
  }

  #headerArea .gMenuInner .menu > .menu-item > .sub-menu .sub-menu{
      display: none!important;
  }

  #headerArea .gMenuInner .sub-menu li {
      padding-left: 0;
      padding-right: 0;
      padding-top: 5px;
      padding-bottom: 5px;
      border-left: none;
      border-right: none;
      border-bottom: 1px dotted #fff;
  }

  #headerArea .gMenuInner .sub-menu li a {
      padding-left: 0;
      padding-right: 0;
      padding-top: 0;
      padding-bottom: 0;
  }


  /*メインエリア*/
  #mainArea {
      min-width: 1100px;
      width: 1100px;
      margin-right: auto;
      margin-left: auto;
      margin-bottom: 100px;
      content: '';
      overflow: hidden;
      clear: both;
      padding-left: 5px;
      padding-right: 5px;
  }
  /*メイン画像*/
  #mainimg {
      min-width: 1110px;
  }
  #mainimg .mainimg {
      width: 1100px;
      margin-left: auto;
      margin-right: auto;
  }
  /*ぱんくずリスト*/
  #topicpath {

  }
  #topicpath li {
      font-size: 14px;
  }
  #contentArea {
      width: 760px;
      float: left;
  }

  #categoryArea {
      float: left;
      width: 760px;
  }
  #contentArea .list a .thumb,
  #categoryArea a .thumb {
      width: 150px;
  }


  #contentArea p.clumnTitle01 {
      padding-left: 35px;
  }


  h2 {
      width: auto;
      padding-top: 6px;
      padding-bottom: 6px;
      padding-left: 18px;
      display: block;
      color: #000;
      border-left: #636363 5px solid;
      line-height: 1.4;
      font-size: 20px;
      margin-bottom: 30px;
  }

  /*トップ上部の画像*/
  .pic {
      width: 400px;
  }


  /*サイドエリア*/
  #sideArea {
      width: 290px;
      float: right;
  }
  /*サイド商品紹介見出し*/
  #sideArea .sideColumn_title {
      width: auto;
      height: auto;
      padding-top: 12px;
      padding-bottom: 10px;
      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 0;
      box-sizing: content-box;
  }
  /*サイド商品紹介枠*/
  #sideArea #sideColumn {
      width: auto;
      height: auto;
      margin-left: 0;
      margin-right: 0;
      padding-top: 0;
      padding-left: 3%;
      padding-right: 3%;
      box-sizing: content-box;
  }

  /*スマホ用サイドメニュー*/
  #sideArea .menu-sp {
      display: none;
  }
  /*PC用サイドメニュー*/
  #sideArea .menu-pc {
      display: block;
  }
  /*PC用サイドメニュー見出し*/
  #sideArea .menu-pc h4 {
      width: auto;
      max-width: 290px;
      padding-top: 9px;
      padding-bottom: 9px;
      margin-top: 0;
      margin-bottom: 0;
      text-indent: 32px;
      background-color: #636363;
      background-image: url(images/h4.png);
      background-position: left top;
      background-repeat: no-repeat;
      color: #FFF;
      font-weight: bold;
      font-size: 15px;
      cursor: default;
  }

  #sideArea .menu-pc h4 a {
      text-decoration: none;
  }
  /*PC用サイドメニュー枠*/
  #sideArea .menu-pc .menubox {
      width: auto;
      padding-left: 3%;
      padding-right: 3%;
      padding-bottom: 10px;
  }

  #sideArea .menu-pc ul#menu1 li {
      width: auto;
      height: auto;
      background-image: url(images/dotted2.png);
      background-position: left bottom;
      background-repeat: repeat-x;
      font-size: 15px;
      line-height: 1.4;
  }

  #sideArea .menu-pc .menubox ul#menu1 li a {
      display: block;
      height: auto;
      padding-top: 16px;
      padding-bottom: 13px;
      padding-left: 20px;
      text-decoration: none;
      color: #000;
      position: relative;
  }

  #sideArea .menu-pc .menubox ul#menu1 li a:before {
      position: absolute;
      display: block;
      content: "";
      width: 12px;
      height: 12px;
      background-color: #636363;
      top:50%;
      left:0;
      margin-top: -5px;
  }

  #sideArea .menu-pc .menubox  ul#menu1 li a:after {
      width: 12px;
      height: 12px;
      position: absolute;
      display: block;
      content: "";
      background-image: url(images/arrow.png);
      background-position: left center;
      background-repeat: no-repeat;
      -webkit-background-size: 12px;
      background-size: 12px;
      top:50%;
      left:0;
      margin-top: -5px;
  }

  #sideArea .menu-pc .menubox ul#menu1 li a:hover {
      opacity: 0.7;
  }


  /*ウィジェット*/
  .menu-pc .menu ,
  .menu-pc > ul  {
      width: auto;
      padding-left: 3%;
      padding-right: 3%;
      padding-bottom: 10px;
  }

   .menu-pc .menu > li > a ,
   .menu-pc > ul > li > a {
      background-image: url(images/dotted2.png);
      background-position: left bottom;
      background-repeat: repeat-x;
      font-size: 15px;
      line-height: 1.4;
      display: block;
      padding-top: 16px;
      padding-bottom: 13px;
      padding-left: 20px;
      text-decoration: none;
      color: #000;
      position: relative;
   }

   .menu-pc .menu li a:hover,
   .menu-pc > ul li a:hover {
      text-decoration: underline;
      opacity: 0.8;
   }

   .menu-pc .menu > li > a:before ,
   .menu-pc > ul > li > a:before {
      position: absolute;
      display: block;
      content: "";
      width: 12px;
      height: 12px;
      background-color: #636363;
      top:50%;
      left:0;
      margin-top: -5px;
  }

  .menu-pc .menu > li > a:after ,
  .menu-pc > ul > li > a:after {
      width: 12px;
      height: 12px;
      position: absolute;
      display: block;
      content: "";
      background-image: url(images/arrow.png);
      background-position: left center;
      background-repeat: no-repeat;
      -webkit-background-size: 12px;
      background-size: 12px;
      top:50%;
      left:0;
      margin-top: -5px;
  }

  .menu-pc .menu > li > .sub-menu > li > a ,
  .menu-pc > ul > li > .sub-menu > li > a ,
  .menu-pc > ul > li > .children > li > a {
      background-image: url(images/dotted2.png);
      background-position: left bottom;
      background-repeat: repeat-x;
      font-size: 15px;
      line-height: 1.6;
      display: block;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 30px;
      padding-right: 4px;
      text-decoration: none;
      color: #000;
      position: relative;
  }

  .menu-pc .menu > li > .sub-menu > li > a:before ,
  .menu-pc > ul > li > .sub-menu > li > a:before ,
  .menu-pc > ul > li > .children > li > a:before {
      position: absolute;
      content: "";
      display: block;
      top:50%;
      left:10px;
      margin-top: -5px;
      border: 5px solid transparent;
      border-left: 5px solid #636363;
  }

  .menu-pc > ul > li > .children > li > .children > li > a ,
  .menu-pc .menu > li > .sub-menu > li > .sub-menu > li > a ,
  .menu-pc > ul > li > .sub-menu > li > .sub-menu > li > a {
          width: auto;
      height: auto;
      background-image: url(images/dotted2.png);
      background-position: left bottom;
      background-repeat: repeat-x;
      font-size: 15px;
      line-height: 1.6;
      display: block;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 38px;
      position: relative;
      color: #000;
      text-decoration: none;
      }

  .menu-pc > ul > li > .children > li > .children > li > a:before ,
  .menu-pc .menu > li > .sub-menu > li > .sub-menu > li > a:before ,
  .menu-pc > ul > li > .sub-menu > li > .sub-menu > li > a:before {
      position: absolute;
      content: "";
      display: block;
      top:50%;
      left:20px;
      margin-top: -5px;
      border: 5px solid transparent;
      border-left: 5px solid #636363;
  }

  .menu-pc > ul > li > .children > li > .children > li > .children > li > a ,
  .menu-pc .menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a ,
  .menu-pc > ul > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a {
          width: auto;
      height: auto;
      background-image: url(images/dotted2.png);
      background-position: left bottom;
      background-repeat: repeat-x;
      font-size: 15px;
      line-height: 1.6;
      display: block;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 38px;
      position: relative;
      color: #000;
      text-decoration: none;
      }

  .menu-pc > ul > li > .children > li > .children > li > .children > li > a:before ,
  .menu-pc .menu > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a:before ,
  .menu-pc > ul > li > .sub-menu > li > .sub-menu > li > .sub-menu > li > a:before {
      position: absolute;
      content: "";
      display: block;
      top:50%;
      left:20px;
      margin-top: -5px;
      border: 5px solid transparent;
      border-left: 5px solid #636363;
  }

  /*トップ下部の公式サイトはコチラ*/
  .clumnBox02 .link_btn {
      width: 400px;
      margin-left: auto;
      margin-right: auto;
      display: block;
      background-color: #e80012;
  }

  /*トップ中間のコンテンツ枠*/
  .clumnBox1 {
      width: 96%;
      margin-left: auto;
      margin-right: auto;
  }

  /*トップ中間の評価商品画像*/
  .clumnBox1 .thumbnail {
      float: left;
      width: 185px;
      height: auto;
      margin-left: 20px;
      margin-right: 20px;
  }
  /*上部へ戻るボタン*/
  #pagetopArea {
      overflow: hidden;
      width: 1100px;
      margin-left: auto;
      margin-right: auto;
      clear: both;
  }
  .pagetop {
      margin-right: 50px;
      float: right;
  }
  /*フッターエリア*/
  #footerArea {
      min-width: 1110px;
      clear: both;
  }
  #footerArea .footerText {
      text-align: center;
  }
  /*案件紹介ページ上部の画像*/
  .tailPic {
      width: 780px;
      margin-left: 0;
      margin-right: 0;
  }
  /*案件紹介ページの商品画像*/
  .sectionArea .thumbnail {
      width: 180px;
      height: auto;
      margin-bottom: 0px;
      display: block;
  }
  /*案件紹介ページの詳細はこちら*/
  .officialBtn .top_official_btn {
      margin: 10px 10px;
  }
  .officialBtn .top_detail_btn {
      margin: 10px 10px;
  }
  /*案件紹介ページのサムネイル画像*/
  .sectionArea .thumbnail_official_link {
      width: 185px;
      margin-bottom: 10px;
      display: block;
  }
  .sectionArea .thumbnail_official_link:hover {
      opacity: 0.7;
  }
  /*案件紹介ページの公式サイトはこちら*/
  .sectionArea .tail_btn {
      margin-bottom: 10px;
      display: block;
  }
  /*案件紹介ページの商品画像エリア*/
  .imageArea {
      width: 240px;
      display: block;
      float: left;
  }
  /*コラムページの画像*/
  .subimg_left {
      float: left;
      margin-left: 0;
      margin-right: 15px;
      display: inline;
  }
  .subimg_right {
      float: right;
      margin-left: 15px;
      margin-right: 0;
      display: inline;
  }
  .subimg_center {
      margin-left: auto;
      margin-right: auto;
      display: block;
  }
  /* PS AUTO SITEMAP */
  #sitemap_list .cat-item {
      margin-left: 0;
      margin-right: 0;
  }
  #sitemap_list .post-item {
      width: 86%;
      margin-left: 7%;
      margin-right: 7%;
  }
  /*比較記事*/
  .productArea {
      width: 96%;
      padding: 10px 25px 20px;
      margin-left: auto;
      margin-right: auto;
  }
  /*比較記事タイトル*/
  #contentArea .productArea .productName p {
      padding-left: 10px;
      padding-right: 10px;
      font-size: 22px;
  }
  /*比較記事テキスト*/
  .productText1 {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 20px;
  }
  /*比較記事画像*/
  .productArea .thumbnail1 {
      float: left;
      width: 36%;
      height: auto;
      min-width: 240px;
  }

  #mainArea #contentArea .productText1 p{
      padding: 0 9px;
  }

  /*比較記事枠*/
  .productArea table {
      width: 100%;
      clear: both;
      margin-left: auto;
      margin-right: auto;
  }
  .productArea th {
      width: 240px;
  }
  .productArea td {
      padding-left: 20px;
  }
  .productText2 {
      width: auto;
      margin-left: 0;
      margin-right: 0;
  }
  /*公式サイトボタン*/
  .column_btn2 {
      width: 300px;
      height: auto;
  }

/*関連記事*/
  #mainArea #contentArea .yarpp-related ol {
      padding: 0;
  }

/*画像配置*/
  .alignleft {
      float: left;
      margin-top: 10px;
      margin-right: 15px;
      margin-bottom: 15px;
      display: inline;
  }
  .alignright {
      float: right;
      margin-top: 10px;
      margin-left: 15px;
      margin-bottom: 15px;
      display: inline;
  }

  .aligncenter {
      display: block;
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 15px;
  }

  /*アーカイブ*/

  .menu-pc select {
          margin: 0;
      margin-top: 1em;
      width: 100%;
      max-width: 100%;
          padding: 3%;
      line-height: 1.2;
      text-transform: none;
      -webkit-appearance: none;
      background-image: url(images/select_arrow.png);
      background-repeat: no-repeat;
      background-position: 97.5% center;
      background-size: 9px;
          font-size: 1em;
      color: #666;
      vertical-align: middle;
      transition: background-color 0.24s ease-in-out;
  }

  .menu-pc select {
      background-color: #ffffff;
  }

  .menu-pc label {
      display: none;
  }

  /*サーチ*/

  .menu-pc .searchform {
      position: relative;
      height: 40px;
      margin-bottom: 1.5em;
  }

  .menu-pc input[type="text"] {
      position: absolute;
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
  }

  .menu-pc #searchsubmit {
      position: absolute;
      top:0;
      right:0;
      padding: 9px 0;
      border: 3px solid rgba(51, 51, 51, 0.1);
      background-color: #aaa;
      width: 50px;
      color:#FFF;
      font-weight: bold;
  }


}

#mainArea img.pic {
  margin: 20px auto;
}

/***********************
searchandfilter
************************/
form.searchandfilter {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
  margin-bottom: 50px;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 82%, #eeeeee 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 82%,#eeeeee 100%);
  background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 82%,#eeeeee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
}
form.searchandfilter > ul {padding: 10px 20px;}
form.searchandfilter ul li li{
  display: inline-block;
  margin-right: 2em;
}
form.searchandfilter ul li:first-of-type li {
  width: 22%;
  width: -webkit-calc(25% - 2em);
  width: calc(25% - 2em);
}
form.searchandfilter h4{
  border-bottom: 1px solid;
padding:0;
}

form.searchandfilter:before {
  font-size: 13px;
  line-height: 1.2;
  color: #FFF;
  padding: 10px 0;
  padding-left: 80px;
  font-weight: bold;
  letter-spacing: 0.05em;
  display: block;
  width: 100%;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background: url(images/ico_search.png) 1.5em center no-repeat;
  background-size: 1em;
}

@media only screen and (max-width: 480px) {
  form.searchandfilter:before {
      font-size: 3.8vw;
      padding-left: 40px;
      background-position-x: 20px;
  }
  form.searchandfilter > ul {padding: 0 20px;}
  form.searchandfilter ul li li {margin-right: 6px;}
  form.searchandfilter ul li:first-of-type li {
    width: 31%;
    width: -webkit-calc(33% - 6px);
    width: calc(33% - 6px);
  }
}


/* チェックボックス */
form.searchandfilter input[type="checkbox"]{
  display: none;
}
form.searchandfilter input[type="checkbox"]+label{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
form.searchandfilter input[type="checkbox"]+label::before{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
form.searchandfilter input[type="checkbox"]:checked + label::after{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid;
  border-right: 3px solid;
}

/* ボタン */
form.searchandfilter .sf-field-submit{
  text-align: right;
}
form.searchandfilter input[type="submit"]{
  cursor: pointer;
  padding: .3em 3em;
  border: 2px solid;
  border-radius: 3px;
  color: #FFF;
  -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
form.searchandfilter input[type="submit"]:hover{
  background-color: #fff;
}

select#sort-select{
  background-image: url(./images/select_arrow.png);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px;
  padding: 10px 30px;
  position: relative;
}

.productName p.iconnone {line-height: 50px !important;}

/***********************
文字装飾
************************/

.fontStyle1 {
  font-weight: bold;
  background: -webkit-linear-gradient(transparent 85%, #ffff66 85%);
  background: linear-gradient(transparent 85%, #ffff66 85%);
}

.fontStyle2 {
  background: -webkit-linear-gradient(transparent 85%, #ffff66 85%);
  background: linear-gradient(transparent 85%, #ffff66 85%);
}

.fontStyle3 {
  font-weight: bold;
  background: -webkit-linear-gradient(transparent 95%, #ff0000 100%);
  background: linear-gradient(transparent 95%, #ff0000 100%);
}

.fontStyle4 {
  background: -webkit-linear-gradient(transparent 95%, #ff0000 100%);
  background: linear-gradient(transparent 95%, #ff0000 100%);
}

.fontStyle5 {
  font-weight: bold;
  color: #ff0000;
  background: -webkit-linear-gradient(transparent 90%, #ff0000 90%);
  background: linear-gradient(transparent 90%, #ff0000 90%);
}

.fontStyle6 {
  color: #ff0000;
  background: -webkit-linear-gradient(transparent 95%, #ff0000 95%);
  background: linear-gradient(transparent 95%, #ff0000 95%);
}

.fontStyle7 {
  font-weight: bold;
  color: #ff0000;
  background: -webkit-linear-gradient(transparent 80%, #ffff66 80%);
  background: linear-gradient(transparent 80%, #ffff66 80%);
}

.fontStyle8 {
  color: #ff0000;
  background: -webkit-linear-gradient(transparent 80%, #ffff66 80%);
  background: linear-gradient(transparent 80%, #ffff66 80%);
}

.ylw{
background: linear-gradient(transparent 60%, #ffff66 60%);
font-weight: bold;
}

.red{
font-weight: bold;
color: #ff0000;
}

.alert,.accept,.attention,.thint {
  font-weight:bold;
  padding: 30px;
  margin: 30px 0;
}
.thint {
  border: 1px solid #C5D7ED;
  background-color: #EFF4FA;
  color: #2C4F7A;
}
.attention {
  border: 1px solid #FDE8A8;
  background-color: #FEF8E0;
  color: #804900;
}

.accept {
  border: 1px solid #C2E39B;
  background-color: #EFFADA;
  color: #346F15;
}
.alert {
background-color: #FFEFEF;
color: #A2462F;
border: 1px solid #FABDA7;
}
.dottbox {
  border: dotted 1px #666;
  padding: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  clear: both;
}

.flow div {
  position: relative;
  border: solid 10px #c7daeb;
  padding: 0 20px;
  margin-bottom: 60px;
}
.flow div:not(:last-child):after {
  position: absolute;
  top: 100%;
  left: 50%;
  content: '';
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 50px solid #c7daeb;
  margin-left: -50px;
}


/***********************
サイトデザイン
************************/

/* 本文フォントサイズ */
#contentArea, #contentArea p,
#contentArea a, #contentArea ul {
  font-size: 15px !important;
}

/* サイドバーフォントサイズ */
#sideArea p, #sideArea a {
  font-size: 15px !important;
}

/* タイトル */
#contentArea h3,
#contentArea .chkTitle,
#contentArea .productArea .productName p a,
#contentArea .productArea p.title,
#contentArea .user3-main h3,
#sideArea #sideColumn .pickup a {font-size: 1.2em !important;}
#contentArea h2 {font-size: 1.4em !important;}
#contentArea .review-title {font-size: 1.6em !important;}

/* スマホランキング調整 */
@media only screen and (max-width: 767px) {
.productArea td {padding:5px;}
}



/* 一言コメント追加 */

.ranking-product-title{
font-size:1.5em!important;
line-height:1.8em;
vertical-align:bottom;
}
/*
.oneWordComment {
color:#333;
position: relative;
padding: 0.5rem 1rem;
text-align: center;
border: 3px solid #1895dd;
border-radius: 10px;
clear:both;
margin-top:24px;
}

.oneWordComment:before{
position:absolute;
content:"";
background-image: url(https://xn--ickjbk8ap9d2b2evi2gne.com/wp-content/themes/wp-auto/images/point.png);
background-size:80px 52px;
background-repeat:none;
width:82px;
height:54px;
top:-40px;
left:-12px;
}

.oneWordComment span{
font-size:1.4em!important;
font-weight:600;
color:#3a3a3a;
} */

@media only screen and (min-width: 601px){
.br-sp{display:none;}
}

@media only screen and (max-width: 600px){
  .ranking-product-title{font-size:4.6vw!important;}
}

/* @media only screen and (max-width: 418px){
.oneWordComment span{font-size:4.8vw!important;}
} */


.productArea table.detailTable,.productArea table.compareRank{
margin-bottom:0;
}

/* トップページテーブル調整 */
.top_compareTable{
text-align:center;
display: block;
overflow-x: scroll;
overflow-y:hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}

.top_compareTable tr th{
background: #49b0ff;
  color: #fff;
  width: 120px;
min-width: 120px;
  border-right: #fff solid 1px;
  border-top: #49b0ff solid 1px;
  border-bottom: #49b0ff solid 1px;
  border-left: #49b0ff solid 1px;
line-height:35px;
}

.top_compareTable .compareTable_company{
width:160px;
min-width:160px;
font-weight:600;
}

.top_compareTable .compareTable_company img{
margin-top:0.3em;
margin-bottom:0;
}

.top_compareTable tbody tr{
border-bottom:solid 1px #ccc;
}

.compareTable_button:hover{
background-color:#ffaaaa;
}

.cross-highlight {
border-spacing: 0;
border-collapse: collapse;
}
.cross-highlight tr:hover {
background-color: #F0F8FF;
}
.cross-highlight td, .cross-highlight th {
position: relative;
}
.cross-highlight td:hover {
background-color: #C2EEFF;
}
.cross-highlight td:hover:after {
content: "";
background-color: #F0F8FF;
width: 100%;
height: 200vh;
position: absolute;
top: -100vh;
left: 0;
z-index: -1;
}

.tablesorter-header-inner{
display:inline;
}

table.top_compareTable th:not(:last-child):not(:first-child)::after{
content: '↑';
display: inline-block;
transition: .5s;
}
th.tablesorter-headerAsc::after,
th.tablesorter-headerDesc::after{
color: #ffbe00;
}
table th.tablesorter-headerDesc::after{
transform: rotateX(180deg);
}

/* 診断フォーム */
#search-filter-form-1690 {
  max-width: 512px;
  margin-left: auto;
  margin-right: auto;
}
#search-filter-form-1690 ul{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: linear-gradient(-45deg,#fff 25%,#fcfcfc 25%,#fcfcfc 50%,#fff 50%,#fff 75%,#fcfcfc 75%);
  background-size: 10px 10px;
  counter-reset: count 0;
  padding: 10px;
  position: relative;
}

#search-filter-form-1690 ul::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(images/form_woman.png);
  height: 7em;
  width: 25%;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
}

#search-filter-form-1690 ul li:not(:last-child):not(.form_moreBtn_li){
  width: calc((100% - 6px) / 2);
  padding: 0 10px 10px;
  background-color: #fff;
background: #edf6ff;
  border: solid 2px #9ec3e4;
}

#search-filter-form-1690 ul li h4 {
  margin-bottom: .5em;
  font-size: 12px;
  color: #333;
  line-height: 3;
}

@media screen and (max-width: 480px) {
  #search-filter-form-1690 ul li h4 {
    font-size: 3.2vw;
  }
}

#search-filter-form-1690 ul li h4::before{
  content: "Q" counter(count);
  counter-increment: count 1;
  color: #07477f;
font-weight: bold;
font-family: auto;
margin-right: .2em;
}

#search-filter-form-1690 ul li label{
  width: 100%;
}

#search-filter-form-1690 ul li label select{
  min-width: auto;
  width: 100%;
  margin: 0;
  border-radius: 5px;
border: none;
padding: 0 .5em;
}

/* #search-filter-form-1690 ul li:nth-of-type(6),
#search-filter-form-1690 ul li:nth-of-type(7),
#search-filter-form-1690 ul li:nth-of-type(8){
  display: none;
} */

#search-filter-form-1690 ul li.form_moreBtn_li{
  text-align: center;
  padding: 0;
width: 100%;
}

#search-filter-form-1690-more{
  padding: .3em 1em;
  border-radius: 999px;
  color: #777;
}

#search-filter-form-1690-more .plus {
display: inline-block;
width: 1.2em;
background: #ccc;
color: #fff;
border-radius: 50%;
line-height:1.2em;
font-size:.8em;
}

form.searchandfilter#search-filter-form-1690 .sf-field-submit{
  padding: 0;
  text-align: center;
width: 100%;
}

form.searchandfilter#search-filter-form-1690 .sf-field-submit input{
border-radius: 999px;
}

.fv_countdown__block {
width: 100%;
margin: 0 auto 1rem;
border: solid 4px #FB661B;
display: flex;
flex-wrap: wrap;
background-color: #333;
font-family: "游ゴシック体","YuGothic","ヒラギノ丸ゴ ProN","Hiragino Maru Gothic ProN", sans-serif,"Meiryo","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Osaka", sans-serif;
font-weight: bold;
}

.fv_countdown__block .countdown__text {
width: 30%;
color: #fff;
padding: .2em .5em;
text-align: center;
line-height: 1.2em;
font-weight: bold;
position: relative;
background: #FB661B;
}

.fv_countdown__block .countdown__timer {
width: 70%;
color: #fff;
text-align: center;
font-size: 1rem;
margin: auto;
}

.fv_countdown__block .countdown__timer .limitter {
font-size: 1.5em;
color: #ff0;
margin: 0 .1em;
}

.rankingUnit {
 border-style: solid;
 border-width: 2px;
 margin: 0 auto 1rem;
 padding: 0 10px 10px;
	border-radius: 8px;
}

.rankingUnit.rank1 {
  background: #fff5d8;
  border-color: #ffbe00;
}

.rankingUnit.rank2 {
  background: #f7ffff;
  border-color: #bbc8c8;
}

.rankingUnit.rank3 {
  background: #fff1e6;
  border-color: #fcb47a;
}

#contentArea .rankingUnit h2 {
  margin: 0 auto .5rem;
  background: none;
  border: none;
  border-bottom: solid 2px transparent;
  font-weight: bold;
	padding-left: 2em;
	position: relative;
}

#contentArea .rankingUnit h2::before {
	position: absolute;
	content:"";
	left: 0;
	top: 50%;
	transform: translatey(-50%);
	width: 1.8em;
	height: 1.8em;
	background-position: center;
	background-size:contain;
}

#contentArea .rankingUnit.rank1 h2 {
  border-color: #ffbe00;
}
#contentArea .rankingUnit.rank2 h2 {
  border-color: #bbc8c8;
}
#contentArea .rankingUnit.rank3 h2 {
  border-color: #fcb47a;
}

#contentArea .rankingUnit.rank1 h2::before {
  background-image: url(/wp-content/themes/wp-auto/images/table/rank01.png);
}
#contentArea .rankingUnit.rank2 h2::before {
  background-image: url(/wp-content/themes/wp-auto/images/table/rank02.png);
}
#contentArea .rankingUnit.rank3 h2::before {
  background-image: url(/wp-content/themes/wp-auto/images/table/rank03.png);
}

#contentArea .rankingUnit .rankingBlock_top {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

#contentArea .rankingUnit .rankingBlock_top .rankingBlock_top_left {
  width: 35%;
}

#contentArea .rankingUnit .rankingBlock_top .rankingBlock_top_left img {
	width: 100%;
}

#contentArea .rankingUnit .rankingBlock_top .rankingBlock_top_right {
	width: calc(65% - 4px);
}

#contentArea .rankingUnit .ranking_detailTable {
  width: 100%;
}

#contentArea .rankingUnit .ranking_detailTable td,
#contentArea .rankingUnit .ranking_detailTable th {
  width: 25%;
  border: solid 1px #07477f;
  padding: 1em 0;
  text-align: center;
}

#contentArea .rankingUnit .ranking_detailTable th {
  background: #3D709B;
	background: linear-gradient(-45deg , #3D709B 25% , #4D80AB 25% , #4D80AB 50% , #3D709B 50% , #3D709B 75% , #4D80AB 75%);
	background-size : 8px 8px;
  color: #fff;
}

#contentArea .rankingUnit .ranking_detailTable td {
  background: #fff;
	line-height:1.1em;
	background-position: center;
	background-size: 3em;
	background-repeat: no-repeat;
	font-weight:bold;
  text-shadow    :
	  1px  1px 1px #fff,
      -1px  1px 1px #fff,
       1px -1px 1px #fff,
      -1px -1px 1px #fff,
       1px  0px 1px #fff,
       0px  1px 1px #fff,
      -1px  0px 1px #fff,
       0px -1px 1px #fff;
}

#contentArea .rankingUnit .ranking_detailTable td .red{
  font-size: 1.2em;
}

#contentArea .rankingUnit .ranking_detailTable td.ranking_detailTable_1 {
  background-image: url(/wp-content/themes/wp-auto/images/table/tableLevel_1.png);
}

#contentArea .rankingUnit .ranking_detailTable td.ranking_detailTable_2 {
  background-image: url(/wp-content/themes/wp-auto/images/table/tableLevel_2.png);
}

#contentArea .rankingUnit .ranking_detailTable td.ranking_detailTable_3 {
  background-image: url(/wp-content/themes/wp-auto/images/table/tableLevel_3.png);
}

.countdown__block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 1rem auto;
  border: solid 4px #ddd;
	max-width: 480px;
	outline: solid 2px #777;
	font-weight:bold;
}

.officialBtn_block a {
  display: block;
  width: 100%;
  margin: 1rem auto;
  background: linear-gradient(#f84b20,#E72F00);
  border: solid 3px #bb2500;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 1.2em;
  padding: .3em 0;
  box-shadow: 0px 3px 0 #9b1f00;
	max-width: 580px;
	position:relative;
}

.officialBtn_block.sp {
  animation: topTable-btn 1.5s infinite;
}
@keyframes topTable-btn {
  0%, 10%, 20%, 100% { transform: translateY(0); }

  5%, 15% { transform: translateY(10px); }

  0%, 20% { background-position: 100% 50%;}

  100% { background-position: 0 50%; }
}

.officialBtn_block a::before {
	content: "";
	width: 2px;
	height:2.5em;
	position:absolute;
	right:1.5em;
	top:50%;
	transform:translatey(-50%);
	background:rgba(0,0,0,.1)
}

.officialBtn_block a::after {
	content: "\f0da";
	font-family: 'Font Awesome 5 Free';
	position:absolute;
	right:.5em;
	top:50%;
	transform:translatey(-50%);
}

.officialBtn_block a span {
  color: #ff0;
}

.countdown__block .countdown__text {
  width: 25%;
  font-size: 13px;
  line-height: 1em;
  background-color: #ddd;
  text-align: center;
	padding:.2em 0;
}

.countdown__block .countdown__timer {
  width: 75%;
  background-color: #333;
  color: #fff;
  text-align: center;
}

.countdown__block .countdown__timer .limitter {
  color: #ff0;
	font-size:1.2em!important;
}

.rankingBlock_tabs {
	display: flex;
	gap: 4px;
	margin:0 auto .5rem;
}

.rankingBlock_tabs .rankingBlock_tab {
	width: calc((100% - 4px * 2) / 3);
	text-align: center;
	background: #eee;
	color: #ccc;
	font-weight: bold;
	border: solid 2px #ccc;
	border-radius: 6px;
}

.rankingBlock_tabs .rankingBlock_tab.rankingBlock_tab_ON {
	background: linear-gradient(#EFB32C 50%,#db9e13 50%);
	border-color: #DF931C;
	color: #fff;
}

#contentArea .rankingUnit .annotation_block {
	color:#777;
}

#contentArea .rankingUnit .annotation_block p {
	margin: 0 auto;
	font-size:12px!important;
  line-height: 1.1em;
}

@media only screen and (max-width: 480px) {
  #contentArea .rankingUnit .rankingBlock_top {
    justify-content: center;
  }

  #contentArea .rankingUnit .rankingBlock_top .rankingBlock_top_left{
    width: 100%;
  }

  #contentArea .rankingUnit .rankingBlock_top .rankingBlock_top_left img {
    width: 100%;
  }

  #contentArea .rankingUnit .rankingBlock_top .rankingBlock_top_right{
    width: 100%;
  }

	.rankingBlock_tabs {
		margin-top: .5rem;
	}

	.rankingBlock_tabs .rankingBlock_tab{
		font-size: 3.2vw;
	}
}


#contentArea .secret_wrap .secret_card h3{
	margin: 0 auto 1rem;
	text-align: center;
}

#contentArea .secret_wrap .secret_card h3::after{
	content: none;
}

.secret_wrap {
	display:flex;
	flex-wrap:wrap;
	gap: 8px;
}

.secret_wrap .secret_card{
	width:100%;
	max-width:480px;
	margin:1.5rem auto 1rem;
	border:solid 2px #999;
	background:#f7f7f7;
	padding:0 8px;
	position:relative;
	width: calc((100% - 8px * 2) / 3);
}

.secret_wrap .secret_card::before {
	position:absolute;
	background: linear-gradient(-45deg,#3d709b 25%,#4d80ab 25%,#4d80ab 50%,#3d709b 50%,#3d709b 75%,#4d80ab 75%);
    background-size: 8px 8px;
    color: #fff;
	padding:.5em 2em;
	border-radius: 6px 6px 0 0;
	top: calc(-2em - 2px);
	left:-2px;
/* 	transform:translatex(-50%); */
	line-height:1em;
	font-weight:bold;
}

.secret_wrap .secret_card:nth-of-type(1)::before {
	content:"Point①";
}

.secret_wrap .secret_card:nth-of-type(2)::before {
	content:"Point②";
}

.secret_wrap .secret_card:nth-of-type(3)::before {
	content:"Point③";
}


.secret_wrap .secret_card img {
	background:#fff;
	border-radius:8px;
	border:solid 1px #ccc;
}

@media only screen and (max-width: 480px) {
	.secret_wrap .secret_card {
		width:100%;
	}
}


.mobitMerit__block {
  border: solid 2px #3d709b;
}

.mobitMerit__block .mobitMerit__title {
  background: linear-gradient(-45deg,#3d709b 25%,#4d80ab 25%,#4d80ab 50%,#3d709b 50%,#3d709b 75%,#4d80ab 75%);
  background-size: 8px 8px;
  color: #fff;
  font-weight: bold;
  margin: 0 auto;
  width: 100%;
  padding: .5em;
  font-size: 1.3rem;
}

.mobitMerit__block dl {
  padding: 8px 0;
  margin: 0 auto;
  width: 96%;
  position: relative;
}

.mobitMerit__block dl::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #3d709b;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
}

.mobitMerit__block dl dt {
  font-weight: bold;
  font-size: 1.2rem;
  color: #FF9209;
}

.mobitMerit__block dl dd {
  margin: 0 auto;
  background-blend-mode: lighten;
  background-position:center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.85);
}

.mobitMerit__block dl dd p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5em;
}

.mobitMerit__block ul li:nth-of-type(1) dl dd {
  background-image: url(images/icon_telephone.png);
}
.mobitMerit__block ul li:nth-of-type(2) dl dd {
  background-image: url(images/icon_postage.png);
}
.mobitMerit__block ul li:nth-of-type(3) dl dd {
  background-image: url(images/icon_time.png);
}

.mobitMerit__block .officialBtn_block {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.post-content ul.mobitMerit__point {
  list-style: none;
  padding-left: 0;
}

.post-content .recommends li{
  list-style: none;
}

.post-content dl dd {
  border-left: none;
}

@media only screen and (max-width: 480px) {
  .mobitMerit__block .mobitMerit__point dl dd {
    background-size: 8em 8em;
  }
}

#contentArea .summaryH2 {
  text-align:center;
  background:#FFD93D;
  color: #333;
  text-shadow: 1px 1px 0 #fff;
  border: none;
  position: relative;
  margin-bottom: 24px;
}

@media screen and (max-width: 480px) {
  #contentArea .summaryH2 {
    margin-top: 0.5em;
  }
}

#contentArea .summaryH2::after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 16px 16px 0;
  border-color: #FFD93D transparent transparent transparent;
}
.recommends > ul {
    border: 5px double #eca728;
    padding: 1em;
    box-sizing: border-box;
    margin: 1em auto;
}
.recommends > ul > li > i{
	margin-right:4px;
	color: #eca728;
	font-size:1.2em;
   font-weight: bold;
}
.sp{
	display:none;
}
@media screen and (max-width:480px){
	.sp{
		display:block;
	}
}

.pc{
	display:inherit;
}
@media screen and (max-width:480px){
	.pc{
		display:none;
	}
}