@charset "shift_jis";
/*---------------------------
contents
---------------------------*/
#contents {
font-size: 1em;
}
.itempr {
color: #f00 !important;
}
.yen {
color: #f00 !important;
}
.contents_list_item {
width: 100%;
font-size: .88em;
text-align: left;
line-height: 1.4;
}
.contents_list_item, .contents_list_item *, .contents_list_item *:before, .contents_list_item *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.contents_list_item ul, .contents_list_item li {
list-style: none;
}
.contents_list_item p {
margin: 0;
padding: 0;
}
@media screen and (min-width:768px) {
.contents_list_item {
font-size: 1.2em;
text-align: left;
}
}
@media screen and (max-width:768px) {
.inSliderGoods {
margin-bottom: 40px;
}
}
/*---------------------------
header
---------------------------*/
#header-area {
position: relative;
text-align: left;
margin: 0 0 3em;
}
#header-area h1, #header-area .ttl {
margin: 0 0 .2em;
font-size: 2em;
line-height: 1;
position: absolute;
top: 10%;
left: 3%;
font-weight: bold;
}
#header-area .head-img {
width: 100%;
text-align: right;
}
#header-area .head-img-half {
width: 100%;
text-align: right;
}
#header-area .head-img img {
width: 54%;
}
#header-area .head-img-half img {
width: 38%;
}
#header-area .head-cont {
width: 52%;
line-height: 1.9;
position: absolute;
top: 27%;
left: 3%;
}
#header-area .head-cont-half {
top: 38%;
}
#header-area.header-no-img {
padding: 20px 3%;
}
#header-area.header-no-img h1, #header-area.header-no-img .ttl {
position: relative;
top: 0;
left: 0;
}
#header-area.header-no-img .head-cont {
width: 100%;
position: relative;
top: 0;
left: 0;
margin: 20px 0 0;
}
/* icon header */
#header-area.icon-head {
position: static;
text-align: left;
}
#header-area.icon-head .cate-title {
height: 60px;
line-height: 60px;
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: 10px 8%;
margin: 0 0 .2em 0;
vertical-align: middle;
padding: 0 0 0 70px;
font-size: 1.5em;
font-weight: bold;
position: static;
}
#header-area.icon-head .head-cont {
line-height: 1.9;
position: static;
display: block;
width: 100%;
padding: 0 .2em .5em;
box-sizing: border-box;
}
@media screen and (min-width:480px) {
#itemlist-area #header-area .head-cont {
font-size: 1.2em;
}
}
/* ========== for iPhone ========== */
@media screen and (max-width:480px) {
/*---------------------------
header
---------------------------*/
#header-area h1, #header-area .ttl {
margin: 10px 2.5%;
font-size: 1.6em;
position: relative;
top: 0;
left: 0;
}
#header-area .head-img {
position: relative;
text-align: center;
overflow: hidden;
text-align: left;
height: 15em;
}
#header-area .head-img img, #header-area .head-img-half img {
width: 100%;
transform: scale(1.32);
text-align: right;
position: absolute;
top: 25px;
right: 57px;
}
#header-area .head-cont {
width: 95%;
line-height: 1.9;
position: relative;
top: 0;
left: 0;
margin: 10px auto 0;
}
#header-area.header-no-img h1, #header-area.header-no-img .ttl {
margin: 0;
padding: 0;
}
#header-area.header-no-img .head-cont {
margin-top: 10px;
}
#header-area.icon-head .cate-title {
line-height: 28px;
}
}
/* icon header */
@media screen and (min-width:768px) {
#header-area.icon-head {
padding: 1em 1.5em 0;
margin: 0 0 .2em;
}
#header-area.icon-head .cate-title {
background-position: 0 8%;
padding: 0 0 0 68px;
font-size: 1.5em;
}
}
h3.cate-third-ttl {
padding: 1em;
font-size: 1.4em;
color: #333;
border-left: 10px solid #2976c6;
margin: 1em;
}
@media screen and (max-width:468px) {
h3.cate-third-ttl {
padding: 0.5em 1em;
text-align: left;
font-size: 1.2em;
}
}
/*---------------------------
banner
---------------------------*/
.howto-banner {
margin: 20px 2% 0 0;
text-align: right;
}
.howto-banner a {
margin: 0 0 0 auto;
padding: 1.8% 10%;
display: inline-block;
color: #333;
font-size: 1.3em;
text-decoration: none;
border: 1px solid #DDD;
position: relative;
max-width: 80%;
}
.howto-banner a:hover {
background-color: #FFEEDD;
}
.howto-banner a:hover * {
text-decoration: none;
}
.howto-banner a:hover img {
opacity: 1;
}
.howto-banner a:before {
content: "";
display: inline-block;
background: url("../img/howto.png") left center no-repeat;
background-size: auto 100%;
width: 22px;
height: 30px;
max-height: 68%;
position: absolute;
top: 50%;
left: 10%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.howto-banner a:after {
content: "";
display: block;
width: 16px;
height: 16px;
border-top: 4px solid #FE6604;
border-right: 4px solid #FE6604;
position: absolute;
top: 50%;
right: 10%;
margin-top: -8px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* under-ttl-banner */
.under-ttl-banner {
margin: 20px 2% 0 0;
text-align: right;
letter-spacing: -.40em;
}
.under-ttl-banner p {
display: inline-block;
width: 100%;
margin: .2em;
letter-spacing: normal;
padding: 0 1em;
box-sizing: border-box;
}
.under-ttl-banner a {
margin: 0 .5%;
padding: .5em 2em;
display: block;
color: #333;
font-size: 1.1em;
text-decoration: none;
border: 1px solid #DDD;
position: relative;
white-space: nowrap;
text-align: center;
}
.under-ttl-banner a:hover {
background-color: #FFEEDD;
}
.under-ttl-banner a:hover * {
text-decoration: none;
}
.under-ttl-banner a:hover img {
opacity: 1;
}
.under-ttl-banner .icon-greater-right-b:before, .under-ttl-banner .icon-greater-bottom-b:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
right: 10px;
color: #fe6604;
font-size: 1.2em;
}
.under-ttl-banner .under-ttl-banner-icon:before {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
left: 10px;
color: #fe6604;
font-size: 1.2em;
}
.under-ttl-banner .icon-beginner:before {
color: #009e7b;
}
.under-ttl-banner a:before {
display: none;
}
.under-ttl-banner a:after {
display: none;
}
@media screen and (min-width:768px) {
.under-ttl-banner p {
width: 32%;
margin: 0 .5%;
padding: 0;
}
.under-ttl-banner a {
padding: .8em 2em;
font-size: 1.3em;
}
}
/*---------------------------
menu
---------------------------*/
.menu-outer {
margin: 40px 0;
box-sizing: border-box;
}
.menu-outer * {
box-sizing: border-box;
}
.menu-ttl {
padding: 0.5% 1.7%;
font-size: 1.8em;
font-weight: bold;
line-height: 1.4;
border-bottom: 3px solid #2976C6;
text-align: left;
margin: 1.6em auto .5em 0;
}
#clsd_goods_info h2#cate-hikaku {
background-color: #ffffff;
color: #333;
}
.menu-container {
margin: 20px 1% 0;
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: start;
align-content: flex-start;
letter-spacing: -.40em;
}
.menu-container .menu-item {
margin: 0 1% 15px;
border-bottom: 2px solid #CCC;
list-style: none;
letter-spacing: normal;
}
.menu-container .menu-item:hover {
background-color: #FFEEDD;
}
.menu-container .menu-item a {
color: #333;
font-size: 1.1em;
line-height: 1.2;
text-decoration: none;
position: relative;
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.menu-container .menu-item a:hover * {
text-decoration: none;
}
.menu-container .menu-item a:hover img {
opacity: 1;
}
.menu-container .menu-item a img {
width: 25%;
height: 100%;
min-height: 1px;
max-width: 120px;
}
.menu-container .menu-item:hover a img[src$=".JPG"], .menu-container .menu-item:hover a img[src$=".jpg"], .menu-container .menu-item:hover a img[src$=".gif"] {
mix-blend-mode: darken;
}
.menu-container .menu-item a span {
position: relative;
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-container .menu-item a span:after {
content: "";
display: block;
width: 16px;
height: 16px;
border-top: 4px solid #FE6604;
border-right: 4px solid #FE6604;
position: absolute;
top: 50%;
right: 5%;
margin-top: -8px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-container.in-page-yes .menu-item a span:after {
transform: rotate(135deg);
top: 38%;
}
.menu-container .menu-item a span.menu-item-sentence:after {
display: none;
}
/* pc-div1-img */
.menu-container.pc-div1-img .menu-item {flex-basis: 98%;}
.menu-container.pc-div1-img .menu-item a {padding: 0;}
.menu-container.pc-div1-img .menu-item a img {width: 16.16%;}
.menu-container.pc-div1-img .menu-item a span {width: 80%;left: 5%;padding-right: 10%;}
.block-column-area .block-column-left .menu-item a img, .block-column-area .block-column-right .menu-item a img {height: 100%;}
@media screen and (min-width:768px) {
.block-column-area .block-column-left .menu-item a img, .block-column-area .block-column-right .menu-item a img {
width: 90%;
max-width: 120px;
max-height: 120px;
margin: 0 auto;
}
.block-column-area .block-column-left .menu-item a span, .block-column-area .block-column-right .menu-item a span {
width: 95%;
min-height: 70px;
line-height: 1.7em;
display: inline-block;
text-align: center;
}
}
/* pc-div2-img */
.menu-container.pc-div2-img .menu-item {
-ms-flex-preferred-size: 48%;
flex-basis: 48%;
}
.menu-container.pc-div2-img .menu-item a {
padding: 0;
}
.menu-container.pc-div2-img .menu-item a img {
width: 16.16%;
}
.menu-container.pc-div2-img .menu-item a span {
width: 80%;
left: 5%;
padding-right: 10%;
}
.menu-container.pc-div2-img .menu-item a span:after {
right: 9%;
}
/* pc-div3-img */
.menu-container.pc-div3-img .menu-item {
max-width: 48%;
-ms-flex-preferred-size: 31%;
flex-basis: 31%;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.menu-container.pc-div3-img .menu-item a {
padding: 0;
}
.menu-container.pc-div3-img .menu-item a img {
width: 25%;
}
.menu-container.pc-div3-img .menu-item a span {
width: 70%;
left: 5%;
padding-right: 10%;
}
.menu-container.pc-div3-img .menu-item a span::after {
right: 10%;
}
/* pc-div4-img */
.menu-container.pc-div4-img .menu-item {
-ms-flex-preferred-size: 23%;
flex-basis: 23%;
}
.menu-container.pc-div4-img .menu-item a {
padding: 10px 0 0;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.menu-container.pc-div4-img .menu-item a img {
width: 90%;
height: 100%;
max-width: 120px;
max-height: 120px;
margin: 0 auto;
}
.menu-container.pc-div4-img .menu-item a span {
width: 95%;
min-height: 70px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* pc-div5-img */
.menu-container.pc-div5-img .menu-item {
-ms-flex-preferred-size: 18%;
flex-basis: 18%;
}
.menu-container.pc-div5-img .menu-item a {
padding: 10px 0 0;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.menu-container.pc-div5-img .menu-item a img {
width: 90%;
height: 100%;
max-width: 120px;
max-height: 120px;
margin: 0 auto;
}
.menu-container.pc-div5-img .menu-item a span {
width: 95%;
min-height: 70px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* pc-div6-img */
.menu-container.pc-div6-img .menu-item {
-ms-flex-preferred-size: 14.6%;
flex-basis: 14.6%;
}
.menu-container.pc-div6-img .menu-item a {
padding: 10px 0 0;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.menu-container.pc-div6-img .menu-item a img {
width: 90%;
height: 100%;
margin: 0 auto;
}
.menu-container.pc-div6-img .menu-item a span {
width: 95%;
min-height: 70px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* pc-div7-img */
.menu-container.pc-div7-img .menu-item {
-ms-flex-preferred-size: 12.2%;
flex-basis: 12.2%;
}
.menu-container.pc-div7-img .menu-item a {
padding: 10px 0 0;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.menu-container.pc-div7-img .menu-item a img {
width: 85%;
height: 100%;
margin: 0 auto;
}
.menu-container.pc-div7-img .menu-item a span {
width: 95%;
min-height: 70px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/* pc-div8-img */
.menu-container.pc-div8-img .menu-item {
-ms-flex-preferred-size: 10.5%;
flex-basis: 10.5%;
}
.menu-container.pc-div8-img .menu-item a {
padding: 10px 0 0;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
}
.menu-container.pc-div8-img .menu-item a img {
width: 85%;
height: 100%;
margin: 0 auto;
}
.menu-container.pc-div8-img .menu-item a span {
width: 95%;
min-height: 70px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-container.pc-div8-img .menu-item a span:after {
display: none;
}
/* pc-div9-img */
.menu-container.pc-div9-img .menu-item {
-ms-flex-preferred-size: 9.1%;
flex-basis: 9.1%;
border-bottom: 0;
}
.menu-container.pc-div9-img .menu-item a img {
width: 90%;
height: 100%;
margin: 0 auto;
}
.menu-container.pc-div9-img .menu-item a span {
width: 100%;
justify-content: center;
align-items: flex-start;
font-size: 13px;
line-height: 1.3;
padding: .5em 3% 1em;
}
.menu-container.pc-div9-img .menu-item a span:after {display: none;}
/* pc-div1-noimg */
.menu-container.pc-div1-noimg .menu-item {-ms-flex-preferred-size: 98%;flex-basis: 98%;}
.menu-container.pc-div2-noimg .menu-item a img {display: none;}
.menu-container.pc-div2-noimg .menu-item a span {width: 88%;min-height: 70px;left: 5%;padding-right: 10%;}
/* pc-div2-noimg */
.menu-container.pc-div2-noimg .menu-item {-ms-flex-preferred-size: 48%;flex-basis: 48%;}
.menu-container.pc-div2-noimg .menu-item a img {display: none;}
.menu-container.pc-div2-noimg .menu-item a span {width: 88%;min-height: 70px;left: 5%;padding-right: 10%;}
/* pc-div3-noimg */
.menu-container.pc-div3-noimg .menu-item {-ms-flex-preferred-size: 31%;flex-basis: 31%;}
.menu-container.pc-div3-noimg .menu-item a img {display: none;}
.menu-container.pc-div3-noimg .menu-item a span {width: 96%;min-height: 70px;left: 5%;padding-right: 10%;}
/* pc-div4-noimg */
.menu-container.pc-div4-noimg .menu-item {-ms-flex-preferred-size: 23%;flex-basis: 23%;}
.menu-container.pc-div4-noimg .menu-item a img {display: none;}
.menu-container.pc-div4-noimg .menu-item a span {width: 88%;min-height: 70px;left: 5%;padding-right: 10%;}
/* pc-div5-noimg */
.menu-container.pc-div5-noimg .menu-item {-ms-flex-preferred-size: 18%;flex-basis: 18%;}
.menu-container.pc-div5-noimg .menu-item a img {display: none;}
.menu-container.pc-div5-noimg .menu-item a span {width: 88%;min-height: 70px;left: 5%;padding-right: 10%;}
/* pc-div6-noimg */
.menu-container.pc-div6-noimg .menu-item {-ms-flex-preferred-size: 14.6%;flex-basis: 14.6%;}
.menu-container.pc-div6-noimg .menu-item a img {display: none;}
.menu-container.pc-div6-noimg .menu-item a span {width: 88%;min-height: 70px;left: 5%;padding-right: 10%;}
/* pc-div7-noimg */
.menu-container.pc-div7-noimg .menu-item {-ms-flex-preferred-size: 12.2%;flex-basis: 12.2%;}
.menu-container.pc-div7-noimg .menu-item a img {display: none;}
.menu-container.pc-div7-noimg .menu-item a span {width: 88%;min-height: 70px;left: 5%;padding-right: 10%;}
/* pc-div8-noimg */
.menu-container.pc-div8-noimg .menu-item {-ms-flex-preferred-size: 10.5%;flex-basis: 10.5%;}
.menu-container.pc-div8-noimg .menu-item a img {display: none;}
.menu-container.pc-div8-noimg .menu-item a span {width: 88%;min-height: 70px;left: 5%;padding-right: 10%;}
/* pc-div9-noimg */
.menu-container.pc-div9-noimg .menu-item {-ms-flex-preferred-size: 9.1%;flex-basis: 9.1%;border-bottom: 0;}
.menu-container.pc-div9-noimg .menu-item a img {display: none;}
.menu-container.pc-div9-noimg .menu-item a span {width: 88%;min-height: 50px;left: 5%;padding-right: 10%;}
.menu-container .menu-item a span.menu-item-sentence {
width: 100%;
left: 0;
right: 0;
padding: 0.8em;
letter-spacing: .1em;
line-height: 1.5;
text-align: left;
word-break: break-all;
word-wrap: break-word;
}
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
background-color: #fff;
width: 95%;
margin: 0 auto;
}
/*タブのスタイル*/
.tab_item {
width: 50%;
height: 50px;
border-bottom: 3px solid #2976c6;
background-color: #ddd;
line-height: 50px;
font-size: 1.5em;
letter-spacing: .05em;
text-align: center;
color: #555;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
border-radius: 10px 10px 0 0;
}
/*タブの幅*/
.tabs .item3 {width: 33.3%;}
.tabs .item4 {width: 25%;}
.tabs .item5 {width: 20%;}
.tabs .item6 {width: 16.6%;}
.tabs .item7 {width: 14.2%;}
.tabs .item8 {width: 12.5%;}
.tabs .item9 {width: 11.1%;}
.tabs .item10 {width: 10%;}
@media screen and (max-width:468px) {
.tab_item {
height: auto;
font-size: 1.2em;
line-height: 1.4em;
padding: .5em 0 .3em;
}
}
.tab_item:hover {
opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
clear: both;
overflow: hidden;
margin: 0 0 3em;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #2976c6;
color: #fff;
}
/*---------------------------
類似カテゴリ
---------------------------*/
.similar-cate-area {
padding: .8em;
letter-spacing: -.40em;
margin: 0 auto;
}
.similar-cate-area * {
box-sizing: border-box;
letter-spacing: normal;
vertical-align: middle;
}
.similar-cate-ttl {
display: inline-block;
text-align: left;
vertical-align: middle;
padding: 0 .3em 0 0;
}
.similar-cate-ttl-txt {
display: inline-block;
padding: 0 0 0 .5em;
}
.similar-cate-list-area {
display: inline-block;
width: 100%;
text-align: left;
}
.similar-cate-ul {
display: inline-block;
list-style: none;
letter-spacing: -.40em;
text-align: left;
margin: 0 auto;
}
.similar-cate-li {
letter-spacing: normal;
display: inline-block;
padding: .3em .4em;
}
.similar-cate-link {
display: inline-block;
width: 100%;
letter-spacing: -.40em;
position: relative;
color: #111;
padding: .3em 1.2em .5em .8em;
border-radius: 20px;
background-color: #f6f6f6;
}
.similar-cate-link * {
letter-spacing: normal;
vertical-align: middle;
}
.similar-cate-img {
display: inline-block;
height: 1.8em;
width: auto;
}
.similar-cate-link:hover .similar-cate-img {
opacity: 1.0;
}
.similar-cate-txt {
display: inline-block;
padding: 5px 10px 0 6px;
}
.similar-cate-link:hover .similar-cate-txt {
text-decoration: none;
}
.similar-cate-link .icon-greater-right-b::before {
position: absolute;
top: 54%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
right: 3px;
color: #2976C6;
font-size: 1.2em;
}
.similar-cate-link:hover .similar-cate-txt, .similar-cate-link:hover .icon-greater-right-b::before {
color: #f60;
}
/* no-img */
.similar-cate-ul-no-img .similar-cate-link {
padding: .6em .9em;
}
.similar-cate-ul-no-img .similar-cate-txt {
padding: 0 12px 0 5px;
}
.similar-cate-area.bg-gray {
width: 95%;
background-color: #f6f6f6;
}
.similar-cate-area.bg-gray .similar-cate-link {
background-color: #fff !important;
}
/*----------------
cate-rec-ranking-no1-area
----------------*/
#itemlist-area .ranking_part2 {
margin-top: 50px;
}
.cate-rec-ranking-area * {
box-sizing: border-box;
}
.cate-rec-ranking-no1-area a {
color: #2976c6;
}
.cate-rec-ranking-no1-area {
background-color: #fff;
padding: 2em 1em 0;
}
.cate-rec-ranking-no1-area.last-box {
border-bottom: 1px solid #ccc;
}
.cate-rec-ranking-area .item-inner {
background-color: #fff;
display: block;
width: 100%;
margin: 1em auto;
}
.cate-rec-ranking-area .item-inner .item-image {
display: block;
vertical-align: top;
width: 90%;
margin: 0 auto 1em;
}
.cate-rec-ranking-area .item-inner .main-image {
padding: 0;
position: relative;
}
.cate-rec-ranking-area .item-inner .main-image img {
width: 80%;
vertical-align: top;
}
.cate-rec-ranking-area .pick-up-icon {
position: absolute;
top: -15px;
left: -15px;
display: inline-block;
color: #cda832;
font-size: 1.2em;
white-space: nowrap;
letter-spacing: 1px;
}
.cate-rec-ranking-area .pick-up-icon:before {
font-family: 'sanwasvg';
content: "\e910";
color: #cda832;
position: absolute;
top: -28px;
left: 13px;
font-size: 2.3em;
}
.cate-rec-ranking-area .pick-up-icon-in {
position: absolute;
top: -21px;
left: 56px;
text-align: center;
line-height: 1.2;
}
.pick-up-icon-in .fs-18 {
font-weight: bold;
font-family: 'Segoe UI', arial, sans-serif;
line-height: 1;
font-size: 2em;
letter-spacing: 2px;
}
.cate-rec-ranking-area .pick-up-icon-in br {
display: none;
}
.cate-rec-ranking-area .item-inner .item-info {
display: block;
width: 100%;
vertical-align: top;
padding: 0 1em;
}
.cate-rec-ranking-area .item-inner .item-series-number {
margin: 0 0 .8em 0;
line-height: 1.2em;
}
.cate-rec-ranking-area .item-inner .series-area {
display: inline-block;
background-color: #2976c6;
color: #fff;
font-size: .8em;
padding: .5em;
margin: 0 .5em 0 0;
}
.cate-rec-ranking-area .item-inner .item-review-star:empty {
display: none;
}
.cate-rec-ranking-area .item-inner .item-main-name {
margin: 0 0 .3em 0;
font-size: 1.2em;
}
.cate-rec-ranking-area .item-inner .item-name-link {
color: #2976c6;
}
.cate-rec-ranking-area .item-inner .item-main-txt {
line-height: 1.5;
padding: .3em 0 1em;
text-align: left;
}
.cate-rec-ranking-area .item-inner .item-select-image {
display: none;
margin: 0 0 1.5em 0;
}
.cate-rec-ranking-area .item-inner .select-image-list {
width: 100%;
list-style: none;
letter-spacing: -.40em;
}
.cate-rec-ranking-area .item-inner .select-image-list .change-image {
display: inline-block;
width: 16.66%;
letter-spacing: normal;
}
.cate-rec-ranking-area .item-inner .select-image-list .change-image [class^="btn-"] {
max-width: 100px;
width: 100%;
border: 3px solid #fff;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
box-sizing: border-box;
}
.cate-rec-ranking-area .item-inner .select-image-list .change-image [class^="btn-"]:hover {
border: 3px solid #ffab68;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
transition: 0.3s;
}
.cate-rec-ranking-area .item-inner .item-display {
padding: .5em 0 1.5em;
}
.cate-rec-ranking-area .item-inner .item-price-area {
display: inline-block;
color: #f00;
font-size: 1.8em;
margin: 0 .3em 0 0;
vertical-align: middle;
}
.cate-rec-ranking-area .item-inner .item-stock-area {
display: inline-block;
margin: 0;
vertical-align: middle;
color: #777;
}
.cate-rec-ranking-area .item-inner .item-link {
text-align: right;
position: relative;
}
.cate-rec-ranking-area .item-inner .item-buy-button {
display: block;
margin: 0 0 0 auto;
padding: 1em 2em 1em 1em;
text-align: center;
border: 1px solid #dddddd;
color: #333;
}
.cate-rec-ranking-area .item-inner .item-buy-button .icon-greater-right-b::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
right: 8px;
color: #fe6604;
font-size: 1.2em;
}
.cate-rec-ranking-area .item-inner .item-buy-button:hover {
background-color: #FFEEDD;
text-decoration: none;
}
/*----------------
excursion
----------------*/
.cate-rec-ranking-other-area.last-box {
border-top: 1px dashed #ccc;
padding: 3.5em 0 2em;
}
.cate-rec-ranking-other-area .excursion-item {
text-align: left;
padding: 0;
position: relative;
}
.cate-rec-ranking-other-area .excursion-img {
display: block;
width: 100%;
margin: 0 0 .5em;
}
.cate-rec-ranking-other-area .excursion-img img {
width: 100%;
}
.cate-rec-ranking-other-area .excursion-name {
display: block;
width: 100%;
font-size: 0.85em;
margin: 0 0 .5em;
color: #2976c6;
line-height: 1.3;
height: 2.6em;
overflow: hidden;
}
.cate-rec-ranking-other-area .excursion-review {
font-size: .6em;
clear: both;
display: block;
padding: .2em 0;
text-align: right;
}
.cate-rec-ranking-other-area .excursion-review a span {
color: #2976c6;
}
.cate-rec-ranking-other-area .excursion-item-price-area {
color: #f00;
display: inline-block;
float: left;
}
.cate-rec-ranking-other-area .excursion-item-stock-area {
color: #777;
display: inline-block;
float: right;
font-size: .6em !important;
}
.cate-rec-ranking-other-area .excursion-item .pick-up-icon {
position: absolute;
top: -1.7em;
left: 12px;
padding: 0 0 0 77px;
font-size: .8em;
white-space: nowrap;
color: #333;
}
.cate-rec-ranking-other-area .pick-up-icon:before {
position: absolute;
left: -6px;
top: -16px;
font-size: 2.3em;
}
.cate-rec-ranking-other-area .excursion-item:nth-child(1) .pick-up-icon, .cate-rec-ranking-other-area .excursion-item:nth-child(1) .pick-up-icon:before {
color: #999;
}
.cate-rec-ranking-other-area .excursion-item:nth-child(2) .pick-up-icon, .cate-rec-ranking-other-area .excursion-item:nth-child(2) .pick-up-icon:before {
color: #a1723b;
}
.cate-rec-ranking-other-area .excursion-item:nth-child(n + 3) .pick-up-icon {
left: -20px;
}
.cate-rec-ranking-other-area .excursion-item:nth-child(n + 3) .pick-up-icon:before {
display: none;
}
.cate-rec-ranking-other-area .excursion-item .pick-up-icon-in {
top: -11px;
left: 26px;
}
.cate-rec-ranking-other-area .grid-box.division-5 .inner.excursion-item {
width: 20%;
margin: 0;
padding: 0 .5em;
box-sizing: border-box;
}
/* ========== for iPad・PC（タブレット・PC調整用） ========== */
/* ========== contents内（タブレット・PC用） ========== */
.cate-rec-ranking-area {
padding: 0 2em;
}
/*----------------
cate-rec-ranking-no1-area
----------------*/
.cate-rec-ranking-area .item-inner {
display: table;
}
.cate-rec-ranking-area .item-inner .item-image {
display: table-cell;
width: 40%;
margin: 0 auto;
}
.cate-rec-ranking-area .item-inner .main-image img {
width: 100%;
}
.cate-rec-ranking-area .item-inner .item-info {
display: table-cell;
padding: 0 0 0 1.5em;
}
.cate-rec-ranking-area .item-inner .item-select-image {
display: block;
}
.cate-rec-ranking-area .item-inner .item-display {
display: inline-block;
width: 45%;
}
.cate-rec-ranking-area .item-inner .item-link {
display: inline-block;
width: 53%;
}
.cate-rec-ranking-area .item-inner .item-buy-button {
width: 60%;
}
/*----------------
excursion
----------------*/
.cate-rec-ranking-other-area .excursion-item {
padding: .5em;
}
}
@media screen and (max-width:480px) {
.cate-rec-ranking-area {
overflow: hidden;
}
.cate-rec-ranking-area .cate-rec-ranking-other-area {
width: 100%;
overflow-x: scroll;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-ms-scroll-chaining: chained;
-webkit-transform: translateZ(0);
}
.cate-rec-ranking-area .cate-rec-ranking-other-area .grid-box {
margin: 0 0 20px !important;
height: 230px;
overflow: hidden;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-scroll-chaining: chained;
-webkit-transform: translateZ(0);
width: 700px !important;
text-align: left;
padding: 2.5em 0 0 1em;
}
.cate-rec-ranking-other-area.last-box {
padding: 1.5em 0 1em;
}
.cate-rec-ranking-area .pick-up-icon {
left: 20%;
}
.cate-rec-ranking-area .pick-up-icon:before {
top: -22px;
}
.cate-rec-ranking-other-area .pick-up-icon:before {
top: -12px;
}
}
/*----------------
ranking_goods
----------------*/
.ranking_realprice {
color: #F00 !important;
margin: 3px 3px 3px 0 !important;
font-size: 1.5em !important;
font-weight: bold !important;
}
/*----------------
cate-suggest-area
----------------*/
.cate-suggest-area {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
text-align: center;
padding: 2em 0 1em;
}
.cate-suggest-area * {
box-sizing: border-box;
}
.cate-suggest-item-box {
padding: .8em;
box-sizing: border-box;
position: relative;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
margin: 0 0 1em;
}
.cate-suggest-image {
width: 30%;
}
.cate-suggest-dtl-area {
width: 70%;
letter-spacing: normal;
}
.cate-suggest-cap {
display: block;
margin: 0 0 .4em;
text-align: left;
letter-spacing: normal;
}
.cate-suggest-cap span {
font-size: 1.1em;
display: block;
padding: .5em 1em;
color: #fff;
background-color: #fe6604;
}
.cate-suggest-cap.bg-gy span {
background-color: #bbb;
font-size: .9em;
}
.cate-suggest-image {
display: inline-block;
vertical-align: middle;
}
.cate-suggest-image img {
width: 100%;
}
.division-3 .cate-suggest-image {
text-align: left;
}
.division-3 .cate-suggest-image img {
max-width: 300px;
}
.cate-suggest-dtl-area {
display: inline-block;
text-align: left;
padding: 0 0 0 1.5em;
vertical-align: middle;
}
.cate-suggest-ttl {
color: #2976c6;
font-size: 1.15em;
line-height: 1.4;
padding: 0 0 .5em;
display: inline-block;
text-align: left;
}
.cate-suggest-prst-area {
position: static;
}
.cate-suggest-price {
display: inline-block;
color: #F00;
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", Osaka, sans-serif, arial, verdana;
}
.cate-suggest-price span {
font-size: 1.3em;
}
.cate-suggest-stock {
display: inline-block;
color: #777;
padding: 0 .3em;
font-size: .85em;
}
.cate-suggest-review {
display: inline-block;
color: #2976C6;
font-size: .85em;
}
.cate-suggest-txt {
padding: 0 0 .5em;
line-height: 1.5;
text-align: left;
font-size: .95em;
}
.cate-suggest-link {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.cate-other {
letter-spacing: normal;
position: inherit;
text-align: center;
}
.cate-other-link {
letter-spacing: normal;
display: block;
text-align: center;
background-color: #f0f8ff;
border: 1px solid #ccc;
border-radius: 30px;
color: #2975c6;
font-size: 1em;
padding: .6em 2em;
margin: 1em auto .8em;
width: 90%;
}
.cate-other-link:after {
font-family: 'sanwasvg';
content: "\e91f";
margin: .5em auto .5em 1em;
transition: .5s;
display: inline-block;
}
/* hover */
.cate-suggest-item-box:hover .cate-suggest-image img {opacity: 0.7;}
.cate-suggest-item-box:hover .cate-suggest-ttl {color: #fe6604;}
.cate-suggest-item-box:hover {opacity: 0.8;}
/* hover */
.cate-suggest-item-box.non-link:hover .cate-suggest-image img {opacity: 1;}
.cate-suggest-item-box.non-link:hover .cate-suggest-ttl {color: #2976c6;}
.cate-suggest-item-box.non-link:hover {opacity: 1;}


/* switch-img */
.cate-suggest-area.switch-img .cate-suggest-col {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.cate-suggest-area.switch-img .cate-suggest-col .cate-suggest-icon {
width: 20%;
max-width: 80px;
}
.switch-img .cate-suggest-item-box .cate-suggest-ttl,
.switch-img .cate-suggest-item-box .cate-suggest-txt,
.switch-img .cate-suggest-item-box .cate-suggest-prst-area,
.switch-img .cate-suggest-item-box .cate-suggest-stock {
text-align: center;
display: block;
}

.switch-img .cate-suggest-item-box {
margin: 0 auto 2em;
}
.switch-img.division-4 .cate-suggest-item-box .suggest-item-link-btn {
background: #f60;
color: #fff;
width: 90%;
margin: .5em 5% 3em;
display: inline-block;
padding: .8em 0;
border-radius: 4px;
font-size: 1.2em;
}
.switch-img.division-4 .cate-suggest-item-box .cate-suggest-icon.active {
border: #f60 solid 2px;
}
.cate-suggest-item-box:hover .cate-suggest-image img
.switch-img .cate-suggest-item-box:hover {opacity: 1 !important;}
.switch-img .cate-suggest-item-box:hover .cate-suggest-image img {opacity: 1 !important;}

@media screen and (min-width: 768px) {

.cate-suggest-area {font-size: 1.1em; padding: 2em 1% 1em;}
/* 数 */
.division-1 .cate-suggest-item-box {flex-basis: 100%;border: 1px solid #ddd;}
.division-2 .cate-suggest-item-box {flex-basis: 50%;}
.division-3 .cate-suggest-item-box {flex-basis: 33%;}
.division-4 .cate-suggest-item-box {flex-basis: 25%;}
.division-5 .cate-suggest-item-box {flex-basis: 20%;}
.menu-container.pc-div5-img .menu-item a, .menu-container.pc-div6-img .menu-item a, .menu-container.pc-div7-img .menu-item a, .menu-container.pc-div8-img .menu-item a {flex-flow: column nowrap;}
.division-2 .cate-suggest-item-box, .division-3 .cate-suggest-item-box, .division-4 .cate-suggest-item-box {border: 0;}
.division-3 .cate-suggest-cap span, .division-4 .cate-suggest-cap span {
display: inline-block;
}
.division-3 .cate-suggest-prst-area, .division-4 .cate-suggest-prst-area {
text-align: right;
padding: 0 .5em 0 0;
height: 4em;
}
.cate-suggest-image {
width: 100%;
}
.division-3 .cate-suggest-dtl-area, .division-4 .cate-suggest-dtl-area {
width: 100%;
text-align: center;
padding: 0 0 .3em 0;
vertical-align: top;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
}
.division-3 .cate-suggest-ttl, .division-4 .cate-suggest-ttl {padding: .5em 0;}
.division-1 .cate-suggest-image {width: 20%;}
.division-1 .cate-suggest-dtl-area {width: 80%;}
.division-2 .cate-suggest-image {width: 40%;}
.division-2 .cate-suggest-dtl-area {width: 60%;}
.division-4 .cate-suggest-prst-area {height: 2.2em;}
.division-4 .cate-suggest-review {
display: block;
padding: .2em 0 0 0;
}
.cate-other {
position: absolute;
top: 100%;
}
.cate-other-link {
padding: .2em 2em;
margin: 0 auto .8em;
width: 100%;
}
.cate-suggest-price {
font-weight: bold;
font-size: 1.5em;
width: 100%;
}
.cate-suggest-area.switch-img {display: grid; grid-template-columns: repeat(4, 1fr);}
.switch-img.division-4 .cate-suggest-prst-area {height: 4.6em;}
.switch-img.division-4 .cate-suggest-image {position: relative;width: 240px;height: 240px;}
.switch-img .cate-suggest-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.3s ease;
}
.switch-img .cate-suggest-image .switch-img-def {opacity: 1;}
.switch-img .cate-suggest-image .switch-img-hover {opacity: 0;}
.switch-img .cate-suggest-image:hover .switch-img-def {opacity: 0;}
.switch-img .cate-suggest-image:hover .switch-img-hover {opacity: 1;}
}

@media screen and (max-width: 767px) {
.cate-suggest-area.switch-img {display: grid; grid-template-columns: repeat(2, 1fr);}
.cate-suggest-area.switch-img .cate-suggest-dtl-area {width: 100%;}
.cate-suggest-area.switch-img .cate-suggest-image {width: 90%; margin: 0 auto .5em;}
.cate-suggest-area.switch-img .cate-suggest-dtl-area {padding: 0;}
.cate-suggest-area.switch-img .cate-suggest-image .switch-img-hover {display: none;}
.cate-suggest-area.switch-img .cate-suggest-col {margin: 0 0 .5em;}
.cate-suggest-area.switch-img .cate-suggest-col .cate-suggest-icon {max-width: 60px;}
.cate-suggest-area.switch-img .cate-suggest-price {font-size: 1.2em;}
.switch-img.division-4 .cate-suggest-item-box .suggest-item-link-btn {width: 90%; margin: 0 5% 1em; text-align: center; padding: .5em 0;}
}

/*　3item　*/
.cate-suggest-3item .cate-suggest-cap span {
font-size: 1.1em;
display: block;
padding: .5em 1em;
color: #111;
background-color: #ffefe4;
display: block;
text-align: center;
}
@media screen and (min-width:768px) {
.cate-suggest-3item .cate-suggest-cap span {
max-width: 300px;
}
.cate-suggest-3item .cate-suggest-item-box {
margin: 0 0 3em;
}
}


/* switch-img */
#productGrid .cate-suggest-item-box {padding: 1.2em; margin: 0 0 3em;}
#productGrid .cate-suggest-ttl {color: #333; font-size: .9em;}
#productGrid .col-area {display: flex; flex-wrap: wrap;}
#productGrid .col-img {width: 22%; margin: .2em;}
#productGrid .cate-suggest-prst-area {text-align: center;}

@media screen and (min-width:768px) {
#productGrid .cate-suggest-price {font-size: 1.2em;}
}
/* --------------------------
matrix
-------------------------- */
.matrix-item-area * {
box-sizing: border-box;
}
.matrix-item-area {
padding: 2rem 1rem;
border-bottom: 1px solid #e7e7e7;
}
.matrix-item-head {
letter-spacing: -.40em;
padding: 0 .4rem 1rem;
display: -ms-grid;
display: grid;
-ms-grid-columns: 60px 1fr;
grid-template-columns: 60px 1fr;
-ms-grid-rows: 60px auto auto;
grid-template-rows: 60px auto auto;
width: 100%;
height: 100%;
}
.matrix-head-grid {
letter-spacing: normal;
text-align: left;
}
.matrix-item-head-img-link {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row: 1;
border: 0;
vertical-align: middle;
text-align: left;
}
.matrix-item-head-img {
width: 90%;
vertical-align: middle;
}
.matrix-item-txt {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row: 1;
position: relative;
}
.matrix-item-txt-link {
display: block;
font-size: 1.2rem;
color: #2976c6;
padding: 0 0 .5rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
.matrix-item-head-ttl {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 3;
-ms-grid-column-span: 3; /* MS対策(手動) */
-ms-grid-row: 2;
grid-row-start: 2;
grid-row-end: 3;
-ms-grid-row-span: 1; /* MS対策(手動) */
font-size: .9rem;
line-height: 1.5;
font-weight: normal;
padding: 0 0 .3rem;
}
.matrix-item-head-icon-area {
-ms-grid-column: 1;
grid-column-start: 1;
grid-column-end: 3;
-ms-grid-column-span: 3; /* MS対策(手動) */
-ms-grid-row: 3;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-row-span: 1; /* MS対策(手動) */
letter-spacing: -.40em;
}
.matrix-item-head-icon {
letter-spacing: normal;
display: inline-block;
padding: .5rem;
margin: .2rem .3rem .2rem 0;
background-color: #999;
color: #fff;
font-size: .8rem;
}
.matrix-icon-01 {
background-color: #333;
}
.matrix-icon-02 {
background-color: #336ca8;
}
.matrix-icon-03 {
background-color: #feca55;
color: #333;
}
.matrix-icon-04 {
background-color: #269e1f;
}
.matrix-icon-05 {
background-color: #cd4545;
}
.matrix-icon-06 {
background-color: #666;
}
.matrix-item-ctr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
text-align: center;
letter-spacing: -.40em;
}
.matrix-item-box {
letter-spacing: normal;
padding: 0 0 .5rem;
border: 1px solid #e7e7e7;
line-height: 1.2;
}
/* 数 */
.division-1 .matrix-item-box {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
}
.division-2 .matrix-item-box {
-ms-flex-preferred-size: 49%;
flex-basis: 49%;
margin: auto .5% 1rem;
}
.division-3 .matrix-item-box, .division-4 .matrix-item-box, .division-5 .matrix-item-box, .division-6 .matrix-item-box, .division-7 .matrix-item-box {
-ms-flex-preferred-size: 32%;
flex-basis: 32%;
margin: auto .5% 1rem;
}
.matrix-item-trigger-link {
color: #333;
font-size: 1.2rem;
display: block;
padding: .4rem 0;
margin: 0 auto .5rem;
background-color: #f7f7f7;
border-bottom: #eee;
}
.matrix-item-code-link {
color: #2976c6;
font-size: .8rem;
display: block;
padding: .3rem 0;
}
.matrix-item-box .coltip-area {
padding: .3rem 0;
}
.matrix-item-box .coltip {
margin: 0 .15rem;
}
@media screen and (min-width:768px) {
.matrix-item-area {
margin-bottom: 1.5rem;
}
.matrix-item-head {
-ms-grid-columns: 250px 1fr;
grid-template-columns: 250px 1fr;
-ms-grid-rows: 2.5rem 1fr 1fr;
grid-template-rows: 2.5rem 1fr 1fr;
}
.matrix-item-head-img-link {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row-start: 1;
grid-row-end: 4;
-ms-grid-row-span: 4; /* MS対策(手動) */
}
.matrix-item-txt {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-row-span: 1; /* MS対策(手動) */
}
.matrix-item-txt-link {
font-size: 1.4rem;
padding: 0 0 1rem;
}
.matrix-item-head-ttl {
-ms-grid-column: 2;
grid-column-start: 2;
grid-column-end: 3;
-ms-grid-column-span: 1; /* MS対策(手動) */
-ms-grid-row: 2;
grid-row-start: 2;
grid-row-end: 3;
-ms-grid-row-span: 1; /* MS対策(手動) */
font-size: 1.1rem;
padding: 0 0 1rem;
}
.matrix-item-head-icon-area {
-ms-grid-column: 2;
grid-column-start: 2;
grid-column-end: 3;
-ms-grid-column-span: 1; /* MS対策(手動) */
-ms-grid-row: 3;
grid-row-start: 3;
grid-row-end: 4;
-ms-grid-row-span: 3; /* MS対策(手動) */
}
.matrix-item-head-icon {
margin: .3rem .5rem .3rem 0;
font-size: 1rem;
}
.matrix-item-code-link {
font-size: 1rem;
}
/* 数 */
.division-3 .matrix-item-box {
-ms-flex-preferred-size: 32%;
flex-basis: 32%;
margin: auto .5% 1rem;
}
.division-4 .matrix-item-box {
-ms-flex-preferred-size: 24%;
flex-basis: 24%;
margin: auto .5% 1rem;
}
.division-5 .matrix-item-box {
-ms-flex-preferred-size: 19%;
flex-basis: 19%;
margin: auto .5% 1rem;
}
.division-6 .matrix-item-box {
-ms-flex-preferred-size: 15.666%;
flex-basis: 15.666%;
margin: auto .5% 1rem;
}
.division-7 .matrix-item-box {
-ms-flex-preferred-size: 13.285%;
flex-basis: 13.285%;
margin: auto .5% 1rem;
}
}
/* --------------------------
hikaku-table
-------------------------- */
.cate-hikaku-table-area {
padding: 0 1%;
}
.cate-hikaku-table-area .hikaku-table {
width: 100%;
able-layout: fixed;
padding: 0;
margin: 0 auto 2.5em;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 1px;
border-color: #ccc;
border-collapse: collapse;
letter-spacing: -.40em;
border-top: 1px solid #e7e7e7;
border-left: 1px solid #e7e7e7;
}
.cate-hikaku-table-area .hikaku-table tbody {
width: 100%;
display: table;
}
.cate-hikaku-table-area .hikaku-table th, .cate-hikaku-table-area .hikaku-table td, .cate-hikaku-table-area .hikaku-table .tbl-th, .cate-hikaku-table-area .hikaku-table .tbl-td {
border-right: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7;
color: #333;
line-height: 1.3;
padding: .8em;
white-space: normal;
text-align: center;
letter-spacing: normal;
box-sizing: border-box;
}
.cate-hikaku-table-area .hikaku-table th, .cate-hikaku-table-area .hikaku-table .tbl-th {
background-color: #f7f7f7;
font-weight: normal;
text-align: center;
width: 10%;
white-space: nowrap;
vertical-align: middle;
}
.cate-hikaku-table-area .hikaku-table td, .cate-hikaku-table-area .hikaku-table .tbl-td {
min-height: 27px;
vertical-align: middle;
word-break: break-all;
}
.hikaku-item-code {display: block;padding: 0.5em 0 0;}
.hikaku-table-cate-btn {text-align: center;}
.hikaku-table-cate-btn a {
display: inline-block;
background-color: #fe6604;
color: #fff !important;
padding: 1.5em 0;
text-align: center;
min-width: 60%;
margin: .5em auto 3em;
border-radius: 5px;
font-size: 1.3em;
font-weight: bold;
letter-spacing: 1px;
position: relative;
}
.hikaku-table-cate-btn a::after {
font-family: 'sanwasvg';
content: "\e91f";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
font-size: 1em;
transition-duration: 0.3s;
}
.hikaku-table-cate-btn a:hover::after {
right: 15px;
}
#itemlist-area .hikaku-table-cate-btn, #itemlist-area .hikaku-table-cate-btn * {
display: none !important;
}
#itemlist-area .compare-similar-cate-area {
display: none !important;
}
.cate-hikaku-table-area .hikaku-table.table-multi td {
vertical-align: top;
}
.table-multi-icon {
display: inline-block;
font-size: 12px;
padding: .15em .6em;
margin: 0 .2em .4em;
background-color: #fe6604;
color: #fff;
border-radius: 3px;
}
.table-multi-icon:nth-child(2) {
background-color: #009e7b;
}
.table-multi-icon:nth-child(3) {
background-color: #2976c6;
}
.table-multi-icon:empty {
font-size: 0;
padding: 0;
margin: 0;
background-color: rgba(255, 255, 255, 0);
height: 0;
width: 0;
display: none;
}
.table-multi-item-code {
color: #2976c6;
font-weight: bold;
}
.table-multi-item-box {
position: relative;
background-color: #fff9ed;
margin: 0 auto .6em;
padding: .8em .1em .5em;
border-radius: 3px;
}
.table-multi-item-area .table-multi-item-box:last-child {
margin: 0 auto;
}
.table-multi-item-box:hover {
opacity: .8;
}
.table-multi-item-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}

.cate-hikaku-table-area .hikaku-table .hikaku-img-area {
position: relative;
}
.cate-hikaku-table-area .hikaku-table-img-link {
display: block;
text-align: center;
}
.cate-hikaku-table-area .hikaku-table-img-link .hikaku-table-img-txt {
display: block;
padding: 0.5em 0 0 0;
color: #2976c6;
text-decoration: none;
}
.cate-hikaku-table-area .hikaku-table-img-link:hover, .cate-hikaku-table-area .hikaku-table-img-link:hover .hikaku-table-img-txt {
text-decoration: none;
color: #4899ec;
}
.cate-hikaku-table-area .hikaku-table-img-link .cate-hikaku-table-area .hikaku-table-txt {
color: #2975c6;
}
.cate-hikaku-table-area .hikaku-table-img {
max-width: 95%;
height: auto;
}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table-img {
max-width: 95%;
height: auto;
width: 300px;
}
.cate-hikaku-table-area .hikaku-table-img {max-width: 95%;}
.cate-hikaku-table-area .table-5-item .hikaku-table-img {max-width: 95%;}
.cate-hikaku-table-area .table-4-item .hikaku-table-img {max-width: 71.5%;}
.cate-hikaku-table-area .table-3-item .hikaku-table-img {max-width: 56%;}
.cate-hikaku-table-area .hikaku-table-txt {
display: inline-block;
text-align: left;
margin: 0 auto;
line-height: 1.6;
}
.cate-hikaku-table-area .exc .hikaku-table-txt, .cate-hikaku-table-area .hikaku-table-txt .exc-txt {
font-weight: bold;
font-size: 1.1em;
background: linear-gradient(transparent 60%, #FFFF00 30%);
}
.cate-hikaku-table-area .hikaku-table .item-link-btn {
text-align: center;
padding: .8em 0;
}
.cate-hikaku-table-area .hikaku-table .item-data-box {
text-align: center;
}
.cate-hikaku-table-area .item-link-btn .item-link-btn-in {
color: #fff;
display: inline-block;
padding: .8em 1em;
border-radius: 30px;
font-size: .85em;
line-height: 1.5;
}
.cate-hikaku-table-area .item-link-btn .item-link-btn-in {background-color: #2975c6;}
.cate-hikaku-table-area .item-link-btn .item-link-btn-in.cart-in {background-color: #FC7927;}
.cate-hikaku-table-area .item-link-btn .item-link-btn-in.cart-in:hover {background-color: #ff9900;}
.cate-hikaku-table-area .item-link-btn .item-link-btn-in .icon-greater-right-b.icon-greater-right-b:before {
display: inline-block;
line-height: 1;
padding: 0 0 0 .5em;
color: #fff;
}
.cate-hikaku-table-area .item-link-btn .item-link-btn-in:hover {
background-color: #4899ec;
color: #fff;
text-decoration: none;
}
.cate-hikaku-table-area .item-link-btn .item-link-btn-in:hove .icon-greater-right-b.icon-greater-right-b:beforer {
color: #fff;
text-decoration: none;
}
.cate-hikaku-table-area .yen {
color: #f00;
font-weight: bold;
}
.cate-hikaku-table-area .itempr {
display: inline-block;
padding: 0 .3em 0 0;
color: #f00;
font-size: 1.4em;
font-weight: bold;
}
.cate-hikaku-table-area .itemst {
padding: 0 .3em 0 0;
color: #333;
font-size: .8em;
display: inline-block;
}
.cate-hikaku-table-area .itemre {
font-size: .8em;
color: #777;
display: block;
height: 1.5em;
padding: .2em 0;
}
.cate-hikaku-table-area .itemre img {width: 5em;}
.cate-hikaku-notes-area {
padding: 0 1% 1.5em;
font-size: 1.1em;
line-height: 1.8;
color: #333;
text-align: left;
}
.cate-hikaku-notes-no {
display: inline-block;
width: 30px;
}
.cate-hikaku-table-area .hikaku-table .tbl-tr {display: flex;}
.cate-hikaku-table-area .hikaku-table .tbl-td {order: 2;}
.cate-hikaku-table-area .hikaku-table .tbl-td.now {order: 1;}

.hikaku-img-area.now::after {
content: "現在はこちらのページです";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 8em 0;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 16px;
}
.cate-hikaku-table-area .hikaku-table-txt a.text_link {
display: inline-block !important;
background-color: none !important;
}
#more_view_checkbox {display: none !important;}

#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-6-item td, #clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-6-item .tbl-td {width: 15%;}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-5-item td, #clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-5-item .tbl-td {width: 18%;}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-4-item td, #clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-4-item .tbl-td {width: 22.5%;}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-3-item td, #clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-3-item .tbl-td {width: 30%;}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-2-item td, #clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-2-item .tbl-td {width: 45%;}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-6-item .hikaku-img-area.now::after {padding: 7em 1em;}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-5-item .hikaku-img-area.now::after {padding: 4em 2em;}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-4-item .hikaku-img-area.now::after {padding: 5em 3.5em;}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-3-item .hikaku-img-area.now::after {padding: 8em 0;}
#clsd_goods_info .cate-hikaku-table-area .hikaku-table.table-2-item .hikaku-img-area.now::after {padding: 8em 0;}

.cate-hikaku-table-area .img-block {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
justify-content: center;
}
.cate-hikaku-table-area .img-block.img2 .img-box {width: 24%;}
.cate-hikaku-table-area .img-block.img3 .img-box {width: 24%;}
.cate-hikaku-table-area .img-block.img4 .img-box {width: 24%;}
.cate-hikaku-table-area .img-block.img5 .img-box {width: 24%;}

@media screen and (min-width:769px) {
.cate-hikaku-table-area .hikaku-table.table-6-item td, .cate-hikaku-table-area .hikaku-table.table-6-item .tbl-td {width: 15%;}
.cate-hikaku-table-area .hikaku-table.table-5-item td, .cate-hikaku-table-area .hikaku-table.table-5-item .tbl-td {width: 18%;}
.cate-hikaku-table-area .hikaku-table.table-4-item td, .cate-hikaku-table-area .hikaku-table.table-4-item .tbl-td {width: 22.5%;}
.cate-hikaku-table-area .hikaku-table.table-3-item td, .cate-hikaku-table-area .hikaku-table.table-3-item .tbl-td {width: 30%;}
.cate-hikaku-table-area .hikaku-table.table-2-item td, .cate-hikaku-table-area .hikaku-table.table-2-item .tbl-td {width: 45%;}
.cate-hikaku-table-area .hikaku-table.table-6-item .hikaku-img-area.now::after {padding: 7em 1em;}
.cate-hikaku-table-area .hikaku-table.table-5-item .hikaku-img-area.now::after {padding: 4em 2em;}
.cate-hikaku-table-area .hikaku-table.table-4-item .hikaku-img-area.now::after {padding: 5em 3.5em;}
.cate-hikaku-table-area .hikaku-table.table-3-item .hikaku-img-area.now::after {padding: 8em 0;}
.cate-hikaku-table-area .hikaku-table.table-2-item .hikaku-img-area.now::after {padding: 8em 0;}
.cate-hikaku-table-area .hikaku-table.table-3-item {font-size: 1.2em;}
.cate-hikaku-table-area .item-link-btn .item-link-btn-in {
padding: .7em auto;
font-size: .9em;
}
.show-more-button {display: none;}
}
@media screen and (max-width:768px) {
#cate-hikaku.menu-ttl {
font-size: 1.2em;
font-weight: bold;
margin-top: 30px;
}
.cate-hikaku-table-area {
position: relative;
width: 100%;
padding: 0;
margin: 0 0 2em;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-scroll-chaining: chained;
-webkit-transform: translateZ(0);
}

.cate-hikaku-table-area .hikaku-table table {overflow-x: scroll; display: inline-block;}
.cate-hikaku-table-area.hikaku-sp-horizontal table.table-6-item {width: 850px;}
.cate-hikaku-table-area.hikaku-sp-horizontal table.table-5-item {width: 750px;}
.cate-hikaku-table-area.hikaku-sp-horizontal table.table-4-item {width: 650px;}
.cate-hikaku-table-area.hikaku-sp-horizontal table.table-3-item {width: 550px;}
.cate-hikaku-table-area.hikaku-sp-horizontal table.table-2-item {width: 450px;}


.cate-hikaku-table-area .hikaku-table th:before, .cate-hikaku-table-area .hikaku-table .tbl-th:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border-right: none;
z-index: -1;
}

.cate-hikaku-table-area .hikaku-table .tbl-th {width: 72px; left: 0; position: absolute; z-index: 5; height: 4.4em;}
.cate-hikaku-table-area .hikaku-table .tbl-tr:nth-of-type(1) .tbl-th {height: 100%;}
.cate-hikaku-table-area .hikaku-table .tbl-td {width: 128px; background: #fff;}
.cate-hikaku-table-area .hikaku-table .tbl-tr {overflow-x: scroll; padding-left: 72px;}
#rt_item_2nd_view01 ~ .cate-hikaku-table-area .hikaku-table .tbl-tr {padding-left: 200px;}
.hikaku-table-cate-btn {display: none;}
#rt_item_2nd_view01 ~ .hikaku-table-cate-btn {display: block;}

.cate-hikaku-table-area .hikaku-table .tbl-td.now {left: 72px; min-height: 1em; position: absolute; z-index: 6; border-bottom: 1px solid #e7e7e7; height: 4.4em;}
.cate-hikaku-table-area .hikaku-table .tbl-tr:nth-of-type(1) .tbl-td.now {height: 100%;}
.cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-td {overflow: hidden;}
.cate-hikaku-table-area .hikaku-table .tbl-tr:nth-of-type(2+n) .tbl-td {height: 4.4em;}
.cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-td.tdline-2, .cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-th.tdline-2 {height: 4.4em;}
.cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-td.tdline-3, .cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-th.tdline-3 {height: 6.1em;}
.cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-td.tdline-4, .cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-th.tdline-4 {height: 7.5em;}
.cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-td.tdline-5, .cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-th.tdline-5 {height: 9em;}
.cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-td.tdline-6, .cate-hikaku-table-area .hikaku-table .tbl-tr .tbl-th.tdline-6 {height: 10.6em;}

.cate-hikaku-table-area.hikaku-sp-horizontal .table-6-item .tbl-tr, .cate-hikaku-table-area.hikaku-sp-horizontal .table-6-item tr {width: 850px;}
.cate-hikaku-table-area.hikaku-sp-horizontal .table-5-item .tbl-tr, .cate-hikaku-table-area.hikaku-sp-horizontal .table-5-item tr {width: 750px;}
.cate-hikaku-table-area.hikaku-sp-horizontal .table-4-item .tbl-tr, .cate-hikaku-table-area.hikaku-sp-horizontal .table-4-item tr {width: 650px;}
.cate-hikaku-table-area.hikaku-sp-horizontal .table-3-item .tbl-tr, .cate-hikaku-table-area.hikaku-sp-horizontal .table-3-item tr {width: 550px;}
.cate-hikaku-table-area.hikaku-sp-horizontal .table-2-item .tbl-tr, .cate-hikaku-table-area.hikaku-sp-horizontal .table-2-item tr {width: 450px;}
.cate-hikaku-table-area.hikaku-sp-vertical {
padding: 0 !important;
writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
-webkit-writing-mode: vertical-lr;
}
.cate-hikaku-table-area.hikaku-sp-vertical .hikaku-hr, .cate-hikaku-table-area.hikaku-sp-vertical .hikaku-table-txt, .cate-hikaku-table-area.hikaku-sp-vertical .hikaku-table .hikaku-item-code, .cate-hikaku-table-area.hikaku-sp-vertical .item-data-box, .cate-hikaku-table-area.hikaku-sp-vertical .item-price, .cate-hikaku-table-area.hikaku-sp-vertical .itempr {
writing-mode: horizontal-tb;
-ms-writing-mode: tb-tb;
-webkit-writing-mode: horizontal-tb;
}
.cate-hikaku-table-area .hikaku-table {font-size: 12px;}
.cate-hikaku-table-area.hikaku-sp-vertical .hikaku-table th {
min-height: 2.9em;
height: 2.9em;
width: 8%;
}
.cate-hikaku-table-area.hikaku-sp-vertical .hikaku-table td {
min-height: 9em;
height: 9em;
min-width: 12em;
}
.cate-hikaku-table-area.hikaku-sp-vertical .hikaku-img-area {min-width: 10em;}
.cate-hikaku-table-area.hikaku-sp-vertical .hikaku-table-img {
min-height: 4em;
height: 4em !important;
min-width: 4em;
width: 4em !important;
display: inline-block;
}
.cate-hikaku-table-area.hikaku-sp-vertical .item-link-btn {display: none;}
.cate-hikaku-table-area.hikaku-sp-vertical .item-price {margin-top: 2.8em;width: 7em;}
.cate-hikaku-table-area .itemre {font-size: 7.5px;}
.cate-hikaku-table-area .itemre img {width: 4.5em;}
.cate-hikaku-table-area .hikaku-table.table-6-item .hikaku-img-area.now::after {padding: 6em 1em;}
.cate-hikaku-table-area .hikaku-table.table-5-item .hikaku-img-area.now::after {padding: 6em 1em;}
.cate-hikaku-table-area .hikaku-table.table-4-item .hikaku-img-area.now::after {padding: 6em 1em;}
.cate-hikaku-table-area .hikaku-table.table-3-item .hikaku-img-area.now::after {padding: 6em 1em;}



#more_view_checkbox ~ .hikaku-table {
max-height: 350px;
overflow-y: hidden;
}
#more_view_checkbox:checked ~ .hikaku-table {
max-height: unset !important;
height: auto !important;
}
.show-more-btn {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: left;
align-items: flex-end;
cursor: pointer;
letter-spacing: normal;
z-index: 99;
height: 2.5em;
}
.show-more-btn:after {
content: 'すべて見る';
color: #3871C1;
font-size: 1.2em;
display: inline-block;
bottom: -2em;
}
.show-more-btn:before {
font-family: 'sanwasvg';
content: "\e920";
color: #666;
font-size: 1.2em;
display: inline-block;
margin: 0 .5em;
bottom: -2em;
}
#more_view_checkbox:checked ~ .show-more-btn:after {
content: '表示を減らす';
}
#more_view_checkbox:checked ~ .show-more-btn:before {
content: "\e91c";
}

.hikaku-table-cate-btn a {
font-size: 1em;
min-width: 90%;
padding: .8em 0;
margin: .5em auto 2em;
}
.matrix-table-area.cate-hikaku-table-area .hikaku-table tr th, .hikaku-sp-vertical.cate-hikaku-table-area .hikaku-table tr:nth-of-type(1) th, .hikaku-sp-vertical.cate-hikaku-table-area .hikaku-table .hikaku-img-area {
position: sticky !important;
left: 0;
background: #f7f7f7;
border-right: 1px solid #eee;
border-bottom: 1px solid #ddd;
z-index: 9999;
}
.hikaku-table-cate-btn a {width: 85%;font-size: 1.05em;}
}


/*---------------------------
正方形バナー
---------------------------*/
.sq-bnr-area {
text-align: center;
padding: 1em;
}
ul.sq-bnr-ul {
list-style: none;
text-align: left;
display: inline-block;
width: 100%;
margin: 0 auto;
padding: 0;
letter-spacing: -.40em;
}
.sq-bnr-list {
display: inline-block;
width: 50%;
padding: .5em;
box-sizing: border-box;
vertical-align: top;
text-align: center;
letter-spacing: normal;
}
.sq-bnr-link {
width: 100%;
display: inline-block;
margin: 0 auto;
}
.sq-bnr-img {
width: 100%;
}
@media screen and (min-width:768px) {
.sq-bnr-list {
width: 25%;
}
.sq-bnr-list {
padding: 1em;
}
}
/* --------------------------
横メニュー
-------------------------- */
#fix_menu.fix_menu-area {
position: fixed;
right: -4px;
top: 300px;
width: 175px;
z-index: 99;
}
#fix_menu .fix_menu-box {
background-color: #2976c6;
margin: 0 0 5px 0;
text-align: left;
display: block;
border-radius: 5px 0 0 5px;
}
#fix_menu .fix_menu-link {
text-decoration: none;
}
#fix_menu .fix_menu-item {
padding: 13px 10px 12px 10px;
border-bottom: solid 1px #fff;
}
#fix_menu .fix_menu-item:last-of-type {
border-bottom: none;
}
#fix_menu .fix_menu-text {
font-size: 1.2em;
font-weight: bold;
color: #fff;
}
#fix_menu .fix_menu-text i {
margin: 0 8px 0 2px;
font-size: 1.2em;
vertical-align: middle;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
/* --------------------------
新：正方形
-------------------------- */
#feature_container {
margin: 2em auto;
}
#feature_container .featurettl {
min-width: 980px;
text-align: center;
background-color: #2976c6;
color: #ffffff;
padding: .5em 0;
}
#feature_container .feature-area {
display: flex;
flex-wrap: wrap;
letter-spacing: -.40em;
}
#feature_container .feature-block {
display: flex;
flex-basis: 95%;
margin: 1em auto 2em;
text-align: center;
position: relative;
border: 1px solid #ddd;
padding: 1.5em;
border-radius: 10px;
letter-spacing: normal;
}
#feature_container .feature-img-area {
flex-basis: 16%;
}
#feature_container .feature-img {
width: 100%;
}
#feature_container .feature-txt-area {
display: flex;
flex-basis: 86%;
padding: 1em 2em;
letter-spacing: normal;
vertical-align: top;
flex-direction: column;
}
#feature_container .feature-txt {
font-size: 1.3em;
padding: 0 0 0.5rem 0;
text-align: left;
line-height: 1.8;
vertical-align: top;
}
#feature_container .feature-link-btn {
text-align: right;
padding: 0;
margin: auto 0 0 0;
}
#feature_container .feature-link-btn-in {
color: #FE6604;
display: inline-block;
border: 3px solid #FE6604;
padding: 0.7em 1.8em;
border-radius: 10px;
font-size: .9em;
white-space: nowrap;
font-weight: bold;
font-size: 1.2em;
}
#feature_container .feature-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
#feature_container .feature-block:hover * {
opacity: 0.9;
}
/* --------------------------
1並び 見出し
-------------------------- */
#feature_container .featurettl-1 {
display: inline-block;
position: relative;
box-sizing: border-box;
padding: 10px;
width: calc(100% + 20px);
margin: 0 0 0 -20px;
width: 18%;
text-align: center;
color: #ffffff;
background: #2976c6;
top: 30px;
left: 28px;
z-index: 50;
}
#feature_container .featurettl-1:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px #1c426c;
}
/* --------------------------
2並び
-------------------------- */
#feature_container .item-2 .feature-block, #feature_container .item-3 .feature-block, #feature_container .item-4 .feature-block, #feature_container .item-5 .feature-block {margin: 1em .5% 2em;}
#feature_container .item-2 .feature-block {flex-basis: 49%;}
#feature_container .item-2 .feature-img-area {flex-basis: 41%;}
#feature_container .item-2 .feature-txt-area {flex-basis: 57%;padding: 0 0.5em;}
#feature_container .item-2 .feature-link-btn, #feature_container .item-3 .feature-link-btn, #feature_container .item-4 .feature-link-btn, #feature_container .item-5 .feature-link-btn {
text-align: center;
padding: 0.5em 0;
}
#feature_container .item-2 .feature-img {
width: 95%;
}
/* --------------------------
3並び
-------------------------- */
#feature_container .item-3 .feature-block {flex-basis: 32.33%;}
#feature_container .item-3 .feature-block, #feature_container .item-4 .feature-block, #feature_container .item-5 .feature-block {display: inline-block;border: none;}
#feature_container .item-3 .feature-img-area, #feature_container .item-4 .feature-img-area, #feature_container .item-5 .feature-img-area {display: inline-block;width: 100%;}
#feature_container .item-3 .feature-txt-area, #feature_container .item-4 .feature-txt-area, #feature_container .item-5 .feature-txt-area {width: 100%;}
#feature_container .item-3 .feature-txt-area, #feature_container .item-4 .feature-txt-area, #feature_container .item-5 .feature-txt-area {padding: .5em 0;}
#feature_container .feature-link-btn-in {padding: 0.7em 2.8em;}
/* --------------------------
4並び
-------------------------- */
#feature_container .item-4 .feature-block {
flex-basis: 24%;
padding: .5em;
}
#feature_container .item-4 .feature-link-btn-in {
padding: 0.5em 2em;
}
/* --------------------------
5並び
-------------------------- */
#feature_container .item-5 .feature-block {
flex-basis: 19%;
padding: .5em;
}
#feature_container .item-5 .feature-link-btn-in {
padding: 0.5em;
}
/* --------------------------
スマホ用
-------------------------- */
@media screen and (max-width:480px) {
#feature_container .feature-img-area {
flex-basis: 50%;
}
#feature_container .feature-txt-area {
flex-basis: 50%;
padding: 0 1em;
}
#feature_container .feature-link-btn-in {
font-size: .9em;
padding: 0.5em 1.5em;
}
#feature_container .feature-txt {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
padding: 0.5em 0 0 0;
line-height: 1.6em;
}
/* --------------------------
2並び
-------------------------- */
#feature_container .item-2 .feature-block {
flex-flow: column;
padding: .5em;
}
#feature_container .item-2 .feature-txt {
-webkit-line-clamp: 2;
}
/* --------------------------
3〜5並び
-------------------------- */
#feature_container .item-3 .feature-block, #feature_container .item-4 .feature-block, #feature_container .item-5 .feature-block {
flex-basis: 45%;
padding: 0.5em;
margin: 0.5em;
}
#feature_container .item-3 .feature-link-btn-in, #feature_container .item-4 .feature-link-btn-in, #feature_container .item-5 .feature-link-btn-in {
padding: 0.5em;
}
}
/*特集 独自*/
#feature_container .item-3 .feature-txt, #feature_container .item-4 .feature-txt, #feature_container .item-5 .feature-txt {
display: none;
}
/* --------------------------
slider-table
-------------------------- */
.slider-table {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
border: 0;
padding: 0 0 1.5em 0;
margin: 0 0 3em;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 1px;
border-color: #ccc;
border-collapse: collapse;
background-color: #fff;
}
.slider-table tbody {
width: 100%;
display: table;
}
.slider-table th, .slider-table td {
border-right: 1px solid #e7e7e7;
color: #333;
line-height: 1.3;
padding: .8em;
white-space: normal;
text-align: center;
}
.slider-table th {
background-color: #f7f7f7;
font-weight: normal;
text-align: center;
width: 100px;
white-space: nowrap;
vertical-align: middle;
z-index: 99;
position: sticky;
top: 0;
left: 0;
}
.slider-table td {
min-height: 27px;
width: 134px;
vertical-align: middle;
}
.slider-table .all-th th {
text-align: center;
}
.slider-table td.hikaku-img-area {
position: relative;
}
.slider-table .hikaku-rank {
border-radius: 50%;
font-weight: bold;
height: 28px;
left: 5px;
padding-top: 7px;
position: absolute;
top: 5px;
width: 28px;
color: #333;
background-color: #e7e7e7;
z-index: 2;
line-height: 1;
}
.slider-table-img-link {
display: block;
text-align: center;
}
.slider-table-img-link .slider-table-txt {
color: #2976c6;
}
.slider-table-img {
max-width: 135px;
height: auto;
margin: 0 0 .5em;
}
.slider-table-txt {
display: inline-block;
text-align: left;
margin: 0 auto;
}
.slider-table .itemst {
font-size: .9em;
color: #666;
}
.slider-table .item-link-btn a {
background: #2975C6;
color: #fff;
padding: .5em 1.2em;
border-radius: 100px;
display: inline-block;
margin: .6em 0 0;
}
.slider-table .item-data-box {
text-align: center;
margin: .3em 0 0;
}
.slider-table .itempr, .slider-table .yen {
display: inline-block;
color: #f00;
font-size: 1.4em;
font-weight: bold;
}
.slider-table .yen {
font-size: 1em;
}
.slider-table .itemre {
height: 2em !important;
display: block;
}
.slider-table .itemre img {
max-width: 65%;
}
/* ＝＝＝　scrollbar ＝＝＝ */
/*---- Chrome ----*/
/*縦方向スクロールバー*/
.slider-table::-webkit-scrollbar {
width: 0;
}
/*横方向スクロールバーの高さ*/
.slider-table::-webkit-scrollbar:horizontal {
height: 10px;
}
/*スクロールバー*/
.slider-table::-webkit-scrollbar-track {
background-color: #f6f6f6;
border-radius: 100px;
}
/*つまみの部分*/
.slider-table::-webkit-scrollbar-thumb {
border-radius: 100px;
}
/*---- Firefox ----*/
.slider-table * {
scrollbar-width: thin; /*細さ*/
}
@media screen and (max-width:680px) {
.slider-table-img {
width: 134px;
height: auto;
}
}
/*---------------------------
横長バナー
---------------------------*/
.long-bnrul {
list-style: none;
display: block;
box-sizing: border-box;
padding: 2em 0;
letter-spacing: -.40em;
text-align: center;
}
.long-bnrlist {
display: inline-block;
width: 100%;
padding: .5em;
box-sizing: border-box;
letter-spacing: normal;
vertical-align: top;
}
.long-bnrimg {
max-width: 100%;
}
@media screen and (min-width:780px) {
.long-bnrlist {
padding: 1.5em;
}
.bnr2 .long-bnrul {
text-align: left;
}
.bnr2 .long-bnrlist {
width: 50%;
}
}
/* --------------------------
cate-article
-------------------------- */
.cate-article .more-button {
position: absolute;
display: block;
width: 95%;
margin: 0;
padding: .8em 0;
text-align: center;
border: 1px solid #dddddd;
color: #333;
letter-spacing: normal;
font-size: .9em;
bottom: 0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
left: 50%;
}
.cate-article .cate-suggest-dtl-area {
margin: 0 0 2em;
}
.cate-article .cate-suggest-item-box {
margin: 0 0 2em;
}
.cate-article .cate-suggest-item-box:hover .more-button {
background-color: #FFEEDD;
}
.cate-article .more-button .icon-greater-right-b::before {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
right: 8px;
color: #fe6604;
font-size: 1.2em;
}
@media screen and (max-width:480px) {
.cate-article .cate-suggest-item-box {
margin: 0;
border-bottom: 1px solid #ddd;
}
.cate-article .cate-suggest-image {
margin: 0;
}
.cate-article .more-button, .cate-suggest-cap {
display: none;
}
}
/*---------------------------
Q and A
---------------------------*/
.cate-q-a-list {
padding: 2em 1%;
text-align: left;
}
.cate-q-a-list li {
font-size: 1.15em;
border: 1px solid #ddd;
padding: 1.5em;
line-height: 1.5;
box-sizing: border-box;
margin: 0 auto 1em;
}
.cate-q-a-list .left_icon:before {
font-size: 2em;
display: inline-block;
padding: 0 .3em 0 0;
vertical-align: top;
line-height: 1;
}
.cate-q-a-list .q_text {
padding: 0 0 1.5em;
}
.cate-q-a-list .q_text, .cate-q-a-list .a_text {
letter-spacing: -.40em;
}
.q_text span, .a_text span {
letter-spacing: normal;
}
.q_text .left_icon:before {
color: #fe6604;
}
.a_text .left_icon:before {
color: #2976c6;
}
.cate-q-a-list .right_text {
display: inline-block;
vertical-align: top;
line-height: 2.1;
width: 90%;
}
.cate-q-a-list a {
color: #2976c6;
}
.cate-q-a-list .cate-suggest-area {
font-size: .9em;
}
.cate-q-a-list .cate-suggest-cap span {
font-size: 1em;
padding: .3em 1em;
background-color: #2976c6;
}
@media screen and (min-width: 768px) {
.cate-q-a-list .division-1 .cate-suggest-image {
width: 15%;
}
.cate-q-a-list .division-1 .cate-suggest-dtl-area {
width: 85%;
}
.cate-q-a-list .division-4 .cate-suggest-item-box, .cate-q-a-list .division-3 .cate-suggest-item-box, .cate-q-a-list .division-2 .cate-suggest-item-box {
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
padding: .5em;
}
.cate-q-a-list .right_text {
width: 95%;
}
}
@media screen and (max-width: 480px) {
.cate-q-a-list .right_text {
display: inline-block;
width: 90%;
}
.cate-q-a-list .left_icon {
display: inline-block;
width: 10%;
}
}
/*---------------------------
block-column
---------------------------*/
.block-column-area {
letter-spacing: -.40em;
}
.block-column-left, .block-column-right {
letter-spacing: normal;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.block-column-left {
padding: 0 0 .5em 0;
}
.block-column-right {
padding: .5em 0 0 0;
}
@media only screen and (max-width: 780px) {
.block-column-area .block-column-spno {
width: 100% !important;
}
}
/*---------------------------
coltip
---------------------------*/
.checkbox-area .coltip-area, .result-outer .coltip-area, .hikaku-table .coltip-area {
display: inline-block;
}
.result-outer .coltip-area {
margin-right: .5em;
}
.result-outer .coltip-area:last-child {
margin-right: 0;
}
.hikaku-table .coltip-area {
padding: .2em;
}
.checkbox-area .coltip, .result-outer .coltip, .matrix-item-area .coltip, .hikaku-table .coltip {
width: 15px;
height: 15px;
border-radius: 50%;
border: solid 1px #CCCCCC;
display: inline-block;
vertical-align: middle;
}
.checkbox-area .coltip {
margin: 0 0 0 .3em;
}
.colname {
display: inline-block;
vertical-align: middle;
margin-left: .3em;
}
.coltip.col_bk {background: #313131;}
.coltip.col_w {background: #ffffff;}
.coltip.col_gy {background: #808080;}
.coltip.col_lgy {background: #d3d3d3;}
.coltip.col_bl {background: #005ebf;}
.coltip.col_lbl {background: #4dbee9;}
.coltip.col_nv {background: #2e2e7b;}
.coltip.col_r {background: #ef5663;}
.coltip.col_wr {background: #c21b3c;}
.coltip.col_g {background: #008000;}
.coltip.col_y {background: #fed14c;}
.coltip.col_o {background: #f98140;}
.coltip.col_sv {background: #dcdcdc;}
.coltip.col_br {background: #81604c;}
.coltip.col_lbr {background: #e0d1ad;}
.coltip.col_dbr {background: #3d3026;}
.coltip.col_m {background: #69472b;}
.coltip.col_p {background: #f8afd7;}
.coltip.col_pu {background: #ad8eef;}
.coltip.col_cl {background: #f6ffff;}
.coltip.col_hcl {background: #ffffff;}
.coltip.col_ot {background: linear-gradient(to top left, #ef5663, #f98140, #fed14c, #4dbee9, #005ebf, #008000);}
.coltip.col_sgy {background: #96979D;}
.coltip.col_bg {background: #e0d1ad;}
.coltip.col_d {background: #f98140;}
.coltip.col_gd {background: #e3c542;}
.coltip.col_s {background: #dcdcdc;}
.coltip.col_mx {background: linear-gradient(to top left, #ef5663, #f98140, #fed14c, #4dbee9, #005ebf, #008000);
}
/*---------------------------
clearfix
---------------------------*/
/* for modern brouser */
.clfx:after {
content: ".";
display: block;
clear: both;
height: 0;
max-height: 0;
visibility: hidden;
}
/* IE7, MacIE5 */
.clfx {display: inline-block;}
/* WinIE6 below, Exclude MacIE5 */
* html .clfx {height: 1%;}
.clfx {display: block;}
.pc-none, .pcno {display: none;}
.sp-none, .spno {display: block;}


/* ========== for PC ========== */
@media screen and (max-width:1200px) {
/*---------------------------
button
---------------------------*/
.stock-disp-btn {
width: 27%;
display: inline-block;
vertical-align: middle;
margin-left: 0;
}
.search-reset {
width: 15em;
max-width: 80%;
display: block;
vertical-align: middle;
margin: 20px auto 0;
}
.search-reset a {
width: 100%;
padding: 7px 0 7px 10%;
text-align: center;
display: block;
}
.search-reset a:before {
content: "";
position: absolute;
top: calc(50% - 10px);
left: calc(10% - 5px);
width: 20px;
height: 20px;
display: block;
}
/*---------------------------
slider
---------------------------*/
.filter-price-slider {
width: 72%;
display: inline-block;
vertical-align: middle;
}
.filter-price-slider .col-title {
width: 10%;
display: inline-block;
vertical-align: middle;
}
.filter-price-slider .select-price {
width: 88%;
display: inline-block;
vertical-align: middle;
}
.filter-price-slider .select-price .filter-noUiSlider {
width: 25%;
display: inline-block;
margin: 3% 6% 3% 3%;
vertical-align: middle;
}
.filter-price-slider .slider-text-area {
width: 64%;
display: inline-block;
vertical-align: middle;
}
.select-slider-outer {
width: 72%;
display: inline-block;
vertical-align: middle;
}
.select-slider-outer .col-title {
width: 10%;
display: inline-block;
vertical-align: middle;
}
.select-slider-outer .select-slider-area {
width: 88%;
display: inline-block;
vertical-align: middle;
}
.select-slider-outer .select-slider-area .filter-noUiSlider {
width: 25%;
display: inline-block;
margin: 3% 6% 3% 3%;
vertical-align: middle;
}
.select-slider-outer .slider-text-area {
width: 64%;
display: inline-block;
vertical-align: middle;
}
.select-slider-outer.slider-custom .slider-text-area {
width: 40%;
}
.select-slider-outer .slider-search-cnt-outer {
width: 24%;
display: inline-block;
vertical-align: middle;
font-size: 0.97em;
}
}
@media screen and (max-width:800px) {
/* ========== max-width:800px ========== */
/*---------------------------
banner
---------------------------*/
.howto-banner a:after {
width: 10px;
height: 10px;
border-top-width: 2px;
border-right-width: 2px;
margin-top: -5px;
}
/*---------------------------
menu
---------------------------*/
.menu-container {
margin-top: 10px;
}
.menu-container .menu-item a span:after {
width: 10px;
height: 10px;
border-top-width: 2px;
border-right-width: 2px;
margin-top: -5px;
}
}
@media screen and (max-width:480px) {
/* ========== for iPhone ========== */
/*---------------------------
banner
---------------------------*/
.howto-banner {
margin: 20px 0 0;
text-align: center;
}
.howto-banner a {
margin: 0 auto;
padding: 2.5% 12.5%;
display: inline-block;
color: #333;
font-size: 1.1em;
max-width: 80%;
}
.howto-banner a:before {
width: 22px;
height: 30px;
max-height: 68%;
position: absolute;
top: 50%;
left: 8%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.howto-banner a:after {
top: 50%;
width: 12px;
height: 12px;
border-top-width: 3px;
border-right-width: 3px;
margin-top: -6px;
right: 8%;
}
/*---------------------------
menu
---------------------------*/
.menu-container {
margin: 10px 0 0;
font-size: 11px;
}
.menu-ttl {
padding: 1% 3%;
font-size: 1.4em;
line-height: 1.4;
}
.menu-container .menu-item {
margin: 0 0 10px;
border-bottom: none;
}
.menu-container .menu-item a {
padding: 0 3% 2%;
font-size: 1.15em;
line-height: 1.4;
}
.menu-container .menu-item a span:after {
width: 7px;
height: 7px;
border-top-width: 3px;
border-right-width: 3px;
margin-top: -6px;
}
/* sp-div★-img 汎用 */
.menu-container {
margin: 10px 2% 0;
}
.menu-container .menu-item a {
padding: 1em 1em 0;
text-align: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
}
.menu-container .menu-item a img {
width: 68px;
display: block;
margin: 0 auto;
left: 0;
}
.menu-container .menu-item a span {
width: 95%;
min-height: 55px;
padding-left: 0;
padding-right: 0;
left: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-container .menu-item a span:after {
max-width: 10%;
right: 0;
}
/* sp-div1-img */
.menu-container.sp-div1-img {
margin: 0;
}
.menu-container.sp-div1-img .menu-item {
border-bottom: 1px solid #CCC;
}
.menu-container.sp-div1-img .menu-item {
min-width: 1px;
max-width: 100%;
margin: 0;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 1;
flex-shrink: 1;
}
.menu-container.sp-div1-img .menu-item a {
padding: 1% 3%;
text-align: left;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
}
.menu-container.sp-div1-img .menu-item a img {
width: 35px;
display: block;
margin: 0;
}
.menu-container.sp-div1-img .menu-item a span {
width: calc(100% - 45px);
min-height: 1px;
left: 5%;
padding-right: 0;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-container.sp-div1-img .menu-item a span:after {
right: 2%;
}
.block-column-area .block-column-left .menu-item a span, .block-column-area .block-column-right .menu-item a span {
text-align: left;
padding: .8em 0;
}
@media screen and (min-width:768px) {}
/* sp-div1-noimg */
.menu-container.sp-div1-noimg {
margin: 0;
}
.menu-container.sp-div1-noimg .menu-item {
max-width: 100%;
font-size: 15px;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
border-bottom: 1px solid #CCC;
}
.menu-container.sp-div1-noimg .menu-item a {
padding: 0;
text-align: left;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
}
.menu-container.sp-div1-noimg .menu-item a img {
display: none;
}
.menu-container.sp-div1-noimg .menu-item a span {
width: 95%;
min-height: 50px;
left: 5%;
padding-right: 0;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-container.sp-div1-noimg .menu-item a span:after {
right: 2%;
}
/* ２〜４　＞　アイコン削除 */
.sp-div2-img.menu-container .menu-item a span:after, .sp-div3-img.menu-container .menu-item a span:after, .sp-div4-img.menu-container .menu-item a span:after .sp-div5-img.menu-container .menu-item a span:after, .sp-div6-img.menu-container .menu-item a span:after, .sp-div7-img.menu-container .menu-item a span:after, .sp-div8-img.menu-container .menu-item a span:after, .sp-div9-img.menu-container .menu-item a span:after {
display: none;
}
/* sp-div2-img */
.menu-container.sp-div2-img {
width: 95%;
margin: 0 auto;
}
.menu-container.sp-div2-img .menu-item {
flex-basis: 50%;
margin: 0;
}
.menu-container.sp-div2-img .menu-item:nth-child(odd) {
border-right: 1px solid #ccc;
}
.menu-container.sp-div2-img .menu-item a {
padding: 8px 5px;
}
.menu-container.sp-div2-img .menu-item a::after {
font-family: 'sanwasvg';
content: "\e91f";
color: #fe6604;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
font-size: 1em;
}
.menu-container.sp-div2-img .menu-item a img {
width: 35px;
vertical-align: middle;
margin: auto 0 auto auto;
}
.menu-container.sp-div2-img .menu-item a span {
width: calc(100% - 35px);
font-size: 12px;
line-height: 1.2em;
text-align: left;
display: block;
min-height: 0;
max-height: 28px;
overflow: hidden;
padding: 0 20px 0 10px;
vertical-align: middle;
margin: auto 0;
}
/* sp-div3-img */
.menu-container.sp-div3-img {width: 95%;margin: 0 auto;}
/* sp-div4-img */
.menu-container.sp-div4-img {margin-left: 1.5%;margin-right: 1.5%;}
.menu-container.sp-div3-img .menu-item {flex-basis: 31%;margin: 0 1% 1em;}
.menu-container.sp-div4-img .menu-item {flex-basis: 22%;margin: 0 1% 1em;}
.menu-container.sp-div3-img .menu-item a img {width: 75%;}
.menu-container.sp-div4-img .menu-item a img {width: 90%;}
/* sp-div★-noimg 汎用 */
.menu-container.sp-div4-noimg .menu-item {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.menu-container .menu-item a {
padding: 0;
text-align: left;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
}
.menu-container .menu-item a span {
width: 90%;
min-height: 50px;
left: 5%;
padding-right: 0;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-container .menu-item a span.menu-item-sentence {
width: 100%;
left: 0;
right: 0;
padding: 0.8em;
letter-spacing: .1em;
line-height: 1.5;
text-align: left;
word-break: break-all;
word-wrap: break-word;
}
/* sp-div★-noimg 幅 */
.menu-container.sp-div2-noimg .menu-item {
max-width: 48%;
flex-basis: 48%;
margin: 0 1%;
}
.menu-container.sp-div3-noimg .menu-item {
max-width: 31%;
flex-basis: 31%;
margin: 0 1%;
}
.menu-container.sp-div4-noimg .menu-item {
max-width: 23%;
flex-basis: 23%;
margin: 0 1%;
}
/* ３〜４　文字サイズ小さく&高さ２行・２行以上のものは左揃えに */
.menu-container.sp-div3-img .menu-item a span, .menu-container.sp-div4-img .menu-item a span {
display: inline-block;
line-height: 1.25;
text-align: center;
min-height: 1px;
max-height: 35px;
overflow: hidden;
margin: 0 auto;
width: 100%;
left: 0;
}
.menu-container.sp-div3-img .menu-item a span:after {
right: 5%;
}
.menu-container.sp-div4-img .menu-item a span:after {
right: 0;
}
/* ３〜４　下線消す */
.sp-div3-img.menu-container .menu-item, .sp-div4-img.menu-container .menu-item {
border-bottom: 0;
}
/*---------------------------
result-header
---------------------------*/
.result-outer {
margin: 50px 0 40px;
}
.result-header {
margin: 20px 0 0;
text-align: center;
}
.result-header .result-cnt {
display: block;
vertical-align: middle;
margin-right: 2%;
font-size: 1.1em;
}
.result-header .result-cnt-num {
font-size: 1.4em;
margin: 0 0 0 0.2em;
}
.result-check {
display: block;
margin: 7px 0 0;
}
.result-check label {
display: inline-block;
margin: 2px;
padding: 7px 5%;
vertical-align: middle;
font-weight: normal;
position: relative;
box-sizing: border-box;
white-space: nowrap;
cursor: pointer;
}
.result-check .checkbtn {
position: relative;
display: inline-block;
padding-left: 28px;
}
.result-check .checkbtn:after {
content: "";
position: absolute;
top: calc(50% - 10px);
left: 2px;
width: 20px;
height: 20px;
display: block;
}
/*---------------------------
filter-sort-select
---------------------------*/
.filter-sort-area {
display: inline-block;
position: relative;
margin: 0 auto 10px;
}
.filter-sort-area select.filter-sort-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 7px 34px 7px 18px;
font-size: 0.92em;
line-height: 1.2;
border-radius: 5px;
border: 1px solid #CCC;
position: relative;
}
.filter-sort-area::after {
content: "";
width: 12px;
height: 12px;
border-top: 3px solid #CCC;
border-right: 3px solid #CCC;
position: absolute;
top: calc(50% - 8px);
right: 10px;
display: block;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
pointer-events: none;
}
.filter-sort-area select.filter-sort-select::-ms-expand {
display: none;
}
/*---------------------------
comp-checkbox
---------------------------*/
.result-area-filter .result-item .comp-checkbox {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
.result-area-filter .result-item .comp-checkbox .checkbtn {
position: relative;
display: inline-block;
}hikaku-table
.result-area-filter .result-item .comp-checkbox .checkbtn:after {
content: "";
position: absolute;
top: calc(50% - 10px);
left: 2px;
width: 20px;
height: 20px;
display: block;
}
/*---------------------------
result-container
---------------------------*/
.result-area-filter {
position: relative;
}
.result-container {
margin: 0 1%;
padding: 20px 3% 0;
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.result-container .result-item {
margin: 0 1.7% 20px;
font-size: 1.1em;
line-height: 1.2;
text-decoration: none;
border-bottom: 2px solid #CCC;
position: relative;
display: block;
}
.result-container .result-item a {text-decoration: none;}
.result-container .result-item a:hover * {text-decoration: none;}
.result-container .result-item .item-image {
height: 100%;
min-height: 1px;
margin-right: 3%;
}
.result-container .result-item .item-image img {max-width: 100%;}
.result-container .result-item .item-detail {padding: 5px 0;}
.result-container .result-item .item-price {margin: 5px 0;font-size: 0.95em;}
.result-container .result-item .item-pr {font-size: 1.1em;display: inline-block;vertical-align: middle;}
.result-container .result-item .item-st {
font-size: 0.7em;
line-height: 1;
padding: 3px 0.5em;
border-bottom: 2px solid;
display: inline-block;
vertical-align: middle;
margin-left: 5%;
}
.result-container .result-item .item-info {font-size: 0.8em;margin: 5px 0 0;}
.result-container .result-item .info {display: block;line-height: 1.7;}
/* disp-div2 */
.result-container.disp-div2 .result-item {width: 46%;}
.result-container.disp-div2 .result-item .item-image {width: 90%;height: auto;margin: 0 auto 5px;}
.result-container.disp-div2 .result-item .item-detail {width: 95%;margin: 0 auto;}
/* disp-div3 */
.result-container.disp-div3 .result-item {width: 46%;}
.result-container.disp-div3 .result-item .item-image {width: 90%;height: auto;margin: 0 auto 5px;}
.result-container.disp-div3 .result-item .item-detail {width: 95%;
margin: 0 auto;
}
/* disp-div5 */
.result-container.disp-div5 .result-item {width: 46%;}
.result-container.disp-div5 .result-item .item-image {width: 90%;height: auto;margin: 0 auto 5px;}
.result-container.disp-div5 .result-item .item-detail {width: 95%;margin: 0 auto;}
/* disp-div6 */
.result-container.disp-div6 .result-item {width: 46%;}
.result-container.disp-div6 .result-item .item-image {width: 90%;height: auto;margin: 0 auto 5px;}
.result-container.disp-div6 .result-item .item-detail {width: 95%;margin: 0 auto;}
/* disp-div7 */
.result-container.disp-div7 .result-item {width: 46%;}
.result-container.disp-div7 .result-item .item-image {width: 90%;height: auto;margin: 0 auto 5px;}
.result-container.disp-div7 .result-item .item-detail {width: 95%;margin: 0 auto;}
/* disp-div8 */
.result-container.disp-div8 .result-item {width: 46%;}
.result-container.disp-div8 .result-item .item-image {width: 90%;height: auto;margin: 0 auto 5px;}
.result-container.disp-div8 .result-item .item-detail {width: 95%;margin: 0 auto;}
/* disp-div8 */
.result-container.disp-div8 .result-item {width: 46%;}
.result-container.disp-div8 .result-item .item-image {width: 90%;height: auto;margin: 0 auto 5px;}
.result-container.disp-div8 .result-item .item-detail {width: 95%;margin: 0 auto;}
/* disp-table */
.result-container.disp-table {
overflow-x: scroll;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
margin: 0;
display: block;
}
.result-container.disp-table * {
box-sizing: initial;
}
.result-container.disp-table .result-item {
width: 100%;
display: table-row;
margin: 0;
}
.result-container.disp-table .result-item .item-image {
width: 34%;
display: inline-block;
vertical-align: middle;
}
.result-container.disp-table .result-item .item-detail {
width: 60%;
display: inline-block;
vertical-align: middle;
text-align: left;
position: relative;
height: 100%;
padding: 1px 0;
}
.result-container.disp-table .result-item .item-name {
position: relative;
left: 0;
top: 0;
}
.result-container.disp-table .result-item .item-price {
position: relative;
left: 0;
bottom: 0;
width: 100%;
margin: 10px 0 0;
}
/* disp-scroll */
.result-container.disp-scroll .result-item {
margin: 0;
color: #333;
font-size: 0.9em;
line-height: inherit;
text-decoration: none;
border: 0;
position: relative;
display: block;
}
.result-container.disp-scroll .result-item .item-image {
width: auto;
max-width: 90%;
height: auto;
min-height: 1px;
margin: 0 auto;
}
.result-container.disp-scroll .result-item .hikaku-list {
margin-left: 3%;
margin-right: 3%;
border-bottom: 2px solid #CCC;
}
.result-container.disp-scroll .result-item .item-name a {
height: 1.4em;
}
/*---------------------------
table
---------------------------*/
.result-area-filter .result-container {
width: 98%;
position: relative;
}
.result-area-filter .result-container table {
display: table;
width: 160%;
border-collapse: separate;
border-spacing: 0 16px;
}
.result-area-filter .result-container td {
padding: 10px 0;
font-size: 0.9em;
line-height: 1.4;
text-align: center;
vertical-align: middle;
border-left: 1px dotted #CCC;
background-color: #FFF;
display: table-cell;
word-break: break-all;
position: relative;
}
.result-area-filter .result-container td:after {
content: "";
width: 101%;
height: 0;
display: block;
border-bottom: 2px solid #CCC;
position: absolute;
bottom: -8px;
left: 0;
}
/*---------------------------
slick
---------------------------*/
.hikaku-box .multiple-item {
height: 100%;
}
/*---------------------------
scroll
---------------------------*/
.result-container.disp-scroll .mCSB_container {
-webkit-overflow-scrolling: touch;
-ms-scroll-chaining: chained;
-webkit-transform: translateZ(0);
position: relative;
}
.result-container .mCSB_scrollTools .mCSB_draggerRail {
background-color: #FAE8DC;
}
.result-container .mCSB_scrollTools.mCSB_scrollTools_horizontal {
height: 32px;
}
.result-container .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
height: 16px;
margin: 6px 0;
}
.result-container .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
height: 16px;
background-color: #FE6604;
}
.result-container.disp-scroll .mCustomScrollbar .result-item {
display: block;
width: 170px;
float: left;
max-height: 100%;
min-height: 1px;
}
.result-container.disp-scroll .hikaku-box .multiple-item.mCustomScrollbar {
position: relative;
max-height: none;
overflow-x: auto !important;
height: 102%;
-webkit-overflow-scrolling: touch;
}
.result-container.disp-scroll .hikaku-box .mCustomScrollBox {
-webkit-overflow-scrolling: touch;
}
.result-container .scroll-area {
overflow: hidden;
width: auto;
}
/*---------------------------
grad
---------------------------*/
.result-area-filter .grad {
width: 100%;
height: 90px;
position: absolute;
bottom: -2px;
left: 0;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
display: none;
}
.result-area-filter .grad a {
margin: 30px auto 0;
font-size: 1.4em;
text-align: center;
width: 420px;
height: 44px;
line-height: 44px;
display: block;
border-radius: 22px;
text-decoration: none;
max-width: 76%;
}
.result-area-filter.over {
height: 1000px;
overflow-y: hidden;
}
.result-area-filter.over .grad {
display: block;
z-index: 100;
}
/*---------------------------
size
---------------------------*/
.large {
font-size: 1.6em;
}
/*---------------------------
mark
---------------------------*/
.search-area-filter .question {
width: 19px;
height: 19px;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 3px;
}
span[id^="modal-"].modal:hover {
cursor: pointer;
}
/*---------------------------
popup
---------------------------*/
.popup-area-outer {
width: 75%;
padding: 25px 2%;
box-sizing: border-box;
background-color: #FFF;
position: fixed;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: none;
z-index: 11;
}
.popup-area {
width: 100%;
padding: 0;
position: relative;
display: block;
}
.popup-area .ttl {
font-size: 1.5em;
line-height: 1.5;
margin: 0 0 15px;
text-align: center;
}
.popup-area .img {
float: none;
width: 50%;
margin: 0 auto;
text-align: center;
}
.popup-area .img img {
margin: 0 auto;
}
.popup-area .text {
width: 85%;
margin: 15px auto;
font-size: 1.05em;
line-height: 1.7;
float: none;
}
/*---------------------------
tooltipster
---------------------------*/
.tooltipster-sidetip .tooltipster-content {
max-width: 280px;
min-height: 133px;
}
.tooltipster-sidetip .tooltipster-box .popup-area {
display: block;
}
/*---------------------------
modal
---------------------------*/
.modal-area {
width: 75%;
padding: 25px 2%;
}
.modal-area-inner {
padding: 0;
}
.modal-area .ttl {
font-size: 1.5em;
line-height: 1.5;
margin: 0 0 15px;
text-align: center;
}
.modal-area .img {
float: none;
width: 50%;
margin: 0 auto;
}
.modal-area .text {
width: 85%;
margin: 15px auto;
font-size: 1.05em;
line-height: 1.7;
float: none;
}
.modal-area .link-banner {
position: relative;
right: 0;
bottom: 0;
text-align: center;
}
.modal-area .link-banner a {
width: 280px;
max-width: 70%;
height: 44px;
margin: 0 auto;
line-height: 44px;
font-size: 1.25em;
text-align: center;
border-radius: 22px;
}
#modal-overlay {
width: 100%;
height: 130%;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background-color: rgba(0, 0, 0, 0.6);
display: none;
}
/*---------------------------
button
---------------------------*/
.stock-disp-btn {
width: 20%;
display: inline-block;
vertical-align: middle;
margin-left: 0;
}
.search-reset {
width: 15em;
max-width: 80%;
display: block;
vertical-align: middle;
margin: 20px auto 0;
}
.search-reset a {
width: 100%;
padding: 7px 0 7px 10%;
text-align: center;
display: block;
}
.search-reset a:before {
content: "";
position: absolute;
top: calc(50% - 10px);
left: calc(10% - 5px);
width: 20px;
height: 20px;
display: block;
}
.search-reset a.non-check {
pointer-events: none;
}
/*---------------------------
slider
---------------------------*/
.filter-price-slider {
width: 78%;
display: inline-block;
vertical-align: middle;
}
.filter-price-slider .col-title {
width: 2.2em;
display: inline-block;
vertical-align: middle;
}
.filter-price-slider .select-price {
width: calc(98.5% - 2.2em);
display: inline-block;
vertical-align: middle;
}
.filter-price-slider .select-price .filter-noUiSlider {
display: none;
margin: 0;
}
.filter-price-slider .slider-text-area {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.select-slider-outer {
width: 78%;
display: inline-block;
vertical-align: middle;
}
.select-slider-outer .col-title {
width: 2.2em;
display: inline-block;
vertical-align: middle;
}
.select-slider-outer .select-slider-area {
width: calc(98.5% - 2.2em);
display: inline-block;
vertical-align: middle;
}
.select-slider-outer .select-slider-area .filter-noUiSlider {
width: 85%;
margin: 5% 5% 8% 6%;
display: block;
}
.select-slider-outer .slider-text-area {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.select-slider-outer.slider-custom .slider-text-area {
width: 100%;
}
.select-slider-outer .slider-search-cnt-outer {
width: 100%;
display: inline-block;
vertical-align: middle;
font-size: 1em;
margin-top: 5px;
}
input.filter-low-text, input.filter-hi-text {
padding: 5px 0;
min-width: 6em;
-webkit-border-radius: 0;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
span.inter {
padding: 0 2px 0 0;
}
.pc-none, .pcno {
display: block;
}
.sp-none, .spno {
display: none;
}
}
/* --------------------------
column-reverse
-------------------------- */
@media screen and (min-width: 768px) {
.block-column-area {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.block-column-area .block-column-left, .block-column-area .block-column-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: auto;
padding: 0 .5em;
}
}
/*---------------------------
matrix-table
---------------------------*/
.matrix-table-area.cate-hikaku-table-area .fs-S {
font-size: 13px !important;
}
.matrix-table-area.cate-hikaku-table-area .fs-SS {
font-size: 8px !important;
}
.matrix-table-area.cate-hikaku-table-area .hikaku-table th, .cate-hikaku-table-area .hikaku-table td {
padding: .8em .5em !important;
}
.matrix-table-area.cate-hikaku-table-area .hikaku-table td.hikaku-img-area {
vertical-align: top !important;
}
.matrix-table-area.cate-hikaku-table-area .hikaku-table-img {
max-width: 100% !important;
}
.matrix-table-area.cate-hikaku-table-area .hikaku-table th {
font-size: 1.3em !important;
font-weight: bold !important;
width: 7% !important;
line-height: 1 !important;
}
.matrix-table-area.cate-hikaku-table-area .hikaku-table td {
min-height: 1em;
height: 1em;
}
.matrix-table-area.cate-hikaku-table-area .hikaku-table td.size-ttl {
background-color: #f7f7f7 !important;
text-align: center !important;
white-space: nowrap !important;
vertical-align: middle !important;
font-size: 1.3em !important;
font-weight: bold !important;
width: 15.5% !important;
line-height: 1 !important;
}
.matrix-table-area.cate-hikaku-table-area .matrix-table-ctr {
display: flex !important;
justify-content: center;
}
.matrix-table-area.cate-hikaku-table-area .matrix-table-item-box {
position: relative !important;
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex-basis: 50%;
}
.matrix-table-area.cate-hikaku-table-area .matrix-table-item-box:hover {
opacity: 0.8;
}
.matrix-table-area.cate-hikaku-table-area .matrix-table-item-box a {
position: absolute !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.matrix-table-area.cate-hikaku-table-area .hikaku-table .item-data-box {
line-height: 1.16;
}
.matrix-table-area.cate-hikaku-table-area .itempr {
font-size: 11px !important;
color: #D80000;
}
.matrix-table-area.cate-hikaku-table-area .yen {
font-size: 9px !important;
color: #D80000;
}
.matrix-table-area.cate-hikaku-table-area .itemdlv {
color: #2976c6 !important;
font-size: 10px !important;
letter-spacing: .1em;
font-weight: bold;
}
.matrix-table-area.cate-hikaku-table-area .itemdlv.manual-dlv {
color: #000 !important;
letter-spacing: 0;
font-weight: normal;
}
.matrix-table-area.cate-hikaku-table-area .itemst {
color: #666 !important;
font-size: 10px !important;
background-color: #eee !important;
padding: .2em .5em;
font-weight: bold;
letter-spacing: .1em;
margin: 0.2em auto 0;
}
.matrix-table-more-btn a {
display: block;
background-color: #FE6604;
color: #fff;
border-radius: 15px;
padding: .3em 0;
font-size: 10px;
font-weight: bold;
margin: 0.5em auto 0;
position: relative;
}
.matrix-table-more-btn a:hover {
opacity: 0.8;
}
.matrix-table-more-btn a:after {
content: '\e91f';
font-family: sanwasvg;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
right: 10px;
color: #fff;
font-size: 1em;
font-weight: normal;
}
/* 画像ホバー */
@media screen and (min-width:769px) {
.matrix-table-area .hikaku-table-img-area {
position: relative;
display: block;
margin: 0 auto;
}
.matrix-table-area .hikaku-table-img.hikaku-table-img-disp {
display: block;
position: absolute;
top: 0;
left: 0;
}
.matrix-table-area .hikaku-table-img.hikaku-table-img-hover {
display: none;
position: absolute;
top: 0;
left: 0;
}
.matrix-table-area .matrix-table-item-box:hover .hikaku-table-img.hikaku-table-img-disp {display: none;}
.matrix-table-area .matrix-table-item-box:hover .hikaku-table-img.hikaku-table-img-hover {display: block;}
.matrix-table-area .img-wid30 .hikaku-table-img-area {width: 30px !important;height: 30px !important;}
.matrix-table-area .img-wid40 .hikaku-table-img-area {width: 40px !important;height: 40px !important;}
.matrix-table-area .img-wid50 .hikaku-table-img-area {width: 50px !important;height: 50px !important;}
.matrix-table-area .img-wid60 .hikaku-table-img-area {width: 60px !important;height: 60px !important;}
.matrix-table-area .img-wid70 .hikaku-table-img-area {width: 70px !important;height: 70px !important;}
.matrix-table-area .img-wid80 .hikaku-table-img-area {width: 80px !important;height: 80px !important;}
.matrix-table-area .img-wid90 .hikaku-table-img-area {width: 90px !important;height: 90px !important;}
.matrix-table-area .img-wid100 .hikaku-table-img-area {width: 100px !important;height: 100px !important;}
.matrix-table-area .img-wid110 .hikaku-table-img-area {width: 110px !important;height: 110px !important;}
.matrix-table-area .img-wid120 .hikaku-table-img-area {width: 120px !important;height: 120px !important;}
.matrix-table-area .img-wid130 .hikaku-table-img-area {width: 130px !important;height: 130px !important;}
.matrix-table-area .img-wid140 .hikaku-table-img-area {width: 140px !important;height: 140px !important;}
.matrix-table-area .img-wid150 .hikaku-table-img-area {width: 150px !important;height: 150px !important;}
.matrix-table-area .img-wid160 .hikaku-table-img-area {width: 160px !important;height: 160px !important;}
.matrix-table-area .img-wid170 .hikaku-table-img-area {width: 170px !important;height: 170px !important;}
.matrix-table-area .img-wid180 .hikaku-table-img-area {width: 180px !important;height: 180px !important;}
.matrix-table-area .img-wid190 .hikaku-table-img-area {width: 190px !important;height: 190px !important;}
.matrix-table-area .img-wid200 .hikaku-table-img-area {width: 200px !important;height: 200px !important;}
}
@media screen and (max-width:769px) {
.matrix-table-area .hikaku-table-img.hikaku-table-img-hover {display: none;}
}
/* 画像サイズ */
.matrix-table-area .img-wid30 .hikaku-table-img {width: 30px !important;}
.matrix-table-area .img-wid40 .hikaku-table-img {width: 40px !important;}
.matrix-table-area .img-wid50 .hikaku-table-img {width: 50px !important;}
.matrix-table-area .img-wid60 .hikaku-table-img {width: 60px !important;}
.matrix-table-area .img-wid70 .hikaku-table-img {width: 70px !important;}
.matrix-table-area .img-wid80 .hikaku-table-img {width: 80px !important;}
.matrix-table-area .img-wid90 .hikaku-table-img {width: 90px !important;}
.matrix-table-area .img-wid100 .hikaku-table-img {width: 100px !important;}
.matrix-table-area .img-wid110 .hikaku-table-img {width: 110px !important;}
.matrix-table-area .img-wid120 .hikaku-table-img {width: 120px !important;}
.matrix-table-area .img-wid130 .hikaku-table-img {width: 130px !important;}
.matrix-table-area .img-wid140 .hikaku-table-img {width: 140px !important;}
.matrix-table-area .img-wid150 .hikaku-table-img {width: 150px !important;}
.matrix-table-area .img-wid160 .hikaku-table-img {width: 160px !important;}
.matrix-table-area .img-wid170 .hikaku-table-img {width: 170px !important;}
.matrix-table-area .img-wid180 .hikaku-table-img {width: 180px !important;}
.matrix-table-area .img-wid190 .hikaku-table-img {width: 190px !important;}
.matrix-table-area .img-wid200 .hikaku-table-img {width: 200px !important;}
@media screen and (max-width:768px) {
.matrix-table-area.cate-hikaku-table-area .hikaku-table {width: 1045px !important;
}
}
/* --------------------------
filter-table-box
-------------------------- */
.filter-table-box .choice-ttl {
font-weight: bold;
margin: .5em .5em 0 0;
}
.filter-table-box .fil-in {
display: none !important;
}
.filter-table-box .btn-name {
display: inline-block;
margin: .5em .15em 0;
padding: .3em 1em;
border-radius: 30px;
border: #eee 1px solid;
}
.filter-table-box .btn-name:hover {
border-color: #2976C6;
background: #CADDF1;
}
.filter-table-box input[type="checkbox"]:checked + label .btn-name {
border-color: #2976C6;
background: #2976C6;
color: #FFF;
}
.filter-table-box .filtbl {
margin: 4em 0;
width: 100%;
}
.filter-table-box .filtbl th {background: #ccc;
padding: .5em 0;
text-align: center;
font-weight: normal;
}
.filter-table-box .filtertb-tr {
color: #333;
line-height: 1.3;
white-space: normal;
text-align: center;
box-sizing: border-box;
font-weight: normal;
vertical-align: middle;
}
.filter-table-box .filtertb-tr:hover {
background: #FFEEDD;
}
.filter-table-box .filtertb-tr > td {
border-right: 1px dotted #ddd;
border-bottom: 1px solid #eee;
vertical-align: middle;
}
.filter-table-box .filtertb-tr td:last-of-type {
border-right: none !important;
}
.filter-table-box .filtertb-td {
padding: 0 .5em;
}
.filter-table-box .item-price {
color: #D80000;
font-weight: bold;
width: 5.5em;
font-size: 1.2em;
}
.filter-table-box .item-st {
color: #2976C6;
width: 4.5em;
}
.filter-table-box .filtertb-cartin {
padding: .2em .5em;
}
.filter-table-box .filtertb-cartin .item-cartin {
background: #FE6604;
color: #fff;
border-radius: 4px;
padding: .8em 0;
display: inline-block;
width: 14em;
}
.filter-table-box .filtertb-cartin .item-cartin:before {
content: "\e901";
color: #fff;
font-family: 'sanwasvg', 'sanwasvg_head' !important;
padding: 0 .2em 0 0;
}
@media screen and (min-width:768px) {
.filter-table-box {
padding: 1em 2%;
}
.filter-table-box .choice-ttl {
font-size: 1.1em;
}
.filter-table-box .btn-name {
font-size: 1.1em;
}
.filter-table-box .filtertb-td-img {width: 80px;
padding: 1em;
}
}
@media screen and (max-width:767px) {
.filter-table-box {
text-align: left;
}
.filter-table-box .choice-ttl {
margin: .5em .5em 0 1em;
}
.filter-table-box .filtertb-td-img {
padding: .5em;
}
.filter-table-box .filtertb-td-img img {
width: 50px;
max-width: 50px;
}
.fil {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
border: 0;
padding: 0 0 1.5em 0;
}
.fil .filtbl {
width: 1000px;
}
.filter-table-box .filtertb-cartin .item-cartin {
width: 10em;
}
}
/* --------------------------
video
-------------------------- */
.lead-movie {
margin: 0;
position: relative;
width: 100%;
}
.video-container {
position: relative;height: 0;
padding: 0 0 56.25%;
overflow: hidden;
}
.square .video-container {
padding: 0 0 100%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;height: 100%;
}
.wid100 {width: 100% !important;flex-basis: 100% !important;}



@media screen and (min-width:768px) {
/*---------------------------
block-column
---------------------------*/
.block-column-left {padding: 0 .5em 0 0;}
.block-column-right {padding: 0 0 0 .5em;}
.wid10 {width: 10%;flex-basis: 20%;}
.wid20 {width: 20%;flex-basis: 20%;}
.wid30 {width: 30%;flex-basis: 30%;}
.wid40 {width: 40%;flex-basis: 40%;}
.wid50 {width: 50%;flex-basis: 50%;}
.wid60 {width: 60%;flex-basis: 60%;}
.wid70 {width: 70%;flex-basis: 70%;}
.wid80 {width: 80%;flex-basis: 80%;}
.wid90 {width: 90%;flex-basis: 90%;}
}
/*--------------------------------------------------
general class
--------------------------------------------------*/
/* margin, padding */
.m0a {margin: 0 auto !important;}
.mra {margin-right: auto !important;}
.mla {margin-left: auto !important;}
.m0 {margin: 0 !important;}
.m1 {margin: 1em !important;}
.m2 {margin: 2em !important;}
.m3 {margin: 3em !important;}
.mt0 {margin-top: 0 !important;}
.mt1 {margin-top: 1em !important;}
.mt2 {margin-top: 2em !important;}
.mt3 {margin-top: 3em !important;}
.mb0 {margin-bottom: 0 !important;}
.mb1 {margin-bottom: 1em !important;}
.mb2 {margin-bottom: 2em !important;}
.mb3 {margin-bottom: 3em !important;}
.pra {padding-right: auto !important;}
.pla {padding-left: auto !important;}
.p0 {padding: 0 !important;}
.p1 {padding: 1em !important;}
.p2 {padding: 2em !important;}
.p3 {padding: 3em !important;}
.pt0 {padding-top: 0 !important;}
.pt1 {padding-top: 1em !important;}
.pt2 {padding-top: 2em !important;}
.pt3 {padding-top: 3em !important;}
.pb0 {padding-bottom: 0 !important;}
.pb1 {padding-bottom: 1em !important;}
.pb2 {padding-bottom: 2em !important;}
.pb3 {padding-bottom: 3em !important;}
.m10 {margin: 10px !important;}
.m20 {margin: 20px !important;}
.m30 {margin: 30px !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.p10 {padding: 10px !important;}
.p20 {padding: 20px !important;}
.p30 {padding: 30px !important;}
.pt10 {padding-top: 10px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb30 {padding-bottom: 30px !important;}
.bo0 {border: none !important;}

/* text-align */
.txtAL {text-align: left !important;justify-content: left !important;}
.txtAC {text-align: center !important;justify-content: center !important;}
.txtAR {text-align: right !important;justify-content: right !important;}

/* font-size */
.fsLLL {font-size: 1.8em !important;}
.fsLL {font-size: 1.5em !important;}
.fsL {font-size: 1.2em !important;}
.fsS {font-size: 0.8em !important;}
.fsSS {font-size: 0.5em !important;}
.fsB {font-weight: bold !important;}

.wid100 {width: 100%;}
.wid95 {width: 95%;}
.wid90 {width: 90%;}
.wid85 {width: 85%;}
.wid80 {width: 80%;}
.wid75 {width: 75%;}
.wid70 {width: 70%;}
.wid65 {width: 65%;}
.wid60 {width: 60%;}
.wid55 {width: 55%;}
.wid50 {width: 50%;}
.wid45 {width: 45%;}
.wid40 {width: 40%;}
.wid35 {width: 35%;}
.wid30 {width: 30%;}
.wid25 {width: 25%;}
.wid20 {width: 20%;}
.wid15 {width: 15%;}
.wid10 {width: 10%;}
.wid5 {width: 5%;}

@media screen and (max-width: 779px) {
.spno {display: none;}
.widsp100 {width: 100%;}
.widsp95 {width: 95%;}
.widsp90 {width: 90%;}
.widsp85 {width: 85%;}
.widsp80 {width: 80%;}
.widsp75 {width: 75%;}
.widsp70 {width: 70%;}
.widsp65 {width: 65%;}
.widsp60 {width: 60%;}
.widsp55 {width: 55%;}
.widsp50 {width: 50%;}
.widsp45 {width: 45%;}
.widsp40 {width: 40%;}
.widsp35 {width: 35%;}
.widsp30 {width: 30%;}
.widsp25 {width: 25%;}
.widsp20 {width: 20%;}
.widsp15 {width: 15%;}
.widsp10 {width: 10%;}
.widsp5 {width: 5%;}
}
/*---------------------------
detail-table
---------------------------*/
.detail-table-area {
padding: 2em 1% 1em;
}
.detail-table-area .detail-table {
padding: 0;
width: 95%;
margin: 0 1.5em 0;
border-collapse: separate;
box-sizing: border-box;
border-spacing: 1px;
border-color: #ccc;
border-collapse: collapse;
letter-spacing: -.40em;
}
.detail-table-area .detail-table tbody {width: 100%;
display: table;
}
.detail-table-area .detail-table th, .detail-table-area .detail-table td {
border: 1px solid #e7e7e7;
color: #333;
line-height: 1.3;
padding: 0.8em;
white-space: normal;
text-align: left;
letter-spacing: normal;
box-sizing: border-box;
}
.detail-table-area .detail-table th {
background-color: #f7f7f7;
font-weight: normal;
text-align: center;
width: 10%;
white-space: nowrap;
vertical-align: middle;
}
.detail-table-area .detail-notes-area {
padding: 0 1% 1.5em;
font-size: 1.1em;
line-height: 1.8;
color: #333;
text-align: left;
}
.detail-table-area .detail-table-txt {
display: inline-block;
text-align: left;
margin: 0 auto;
}
/*---------------------------
cate-link-btn
---------------------------*/
.cate-link-btn {
position: relative;
text-align: center;
display: block;
width: 50%;
margin: 25px auto 15px;
background-color: #ff7200;
border-bottom: 6px solid #bf5600;
border-radius: 5px;
}
.cate-link-btn a {
padding: 1em 0;
display: block;
text-decoration: none;
color: #fff;
font-size: 1.8em;
}
.cate-link-btn:before {
color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
left: 6em;
font-size: 1.8em;
}
.cate-link-btn:hover {
background-color: #ff8726;
}
@media screen and (max-width: 781px) {
.cate-link-btn {width: 80%;
}
.cate-link-btn a {
font-size: 1.2em;
padding: 1.3em 0;
}
.cate-link-btn:before {
left: 3.5em;
}
}
@media screen and (min-width: 780px) {
.detail-table-area .detail-txt .pc-no {
display: none;
}
}
@media screen and (max-width: 781px) {
.detail-table-area .detail-txt .pc-no {
display: inline;
}
.detail-table-area .detail-table {
width: 90%;
}
}
/*---------------------------
slide-inner
---------------------------*/
/* 共通 */
.main-slide-box {
margin: 2em 0 3em;
}
.slide-inner {
text-align: center;
}
.slide-inner .slide-img {
margin: 0 auto;
}
.main-slide-box .slick-prev.slick-arrow {
left: 0;
background: #fff;
width: 15%;
opacity: .8;
}
.main-slide-box .slick-next.slick-arrow {
right: 0;
background: #fff;
width: 15%;
opacity: .8;
}
.slick-prev::before {right: 0;}
@media screen and (max-width: 781px) {
.main-slide-box .slick-prev.slick-arrow, .main-slide-box .slick-next.slick-arrow {
width: 0;
}
.main-slide-box .slick-arrow:before {
display: none;
}
}
/* スライド_横幅調整 */
.main-slide-banner, .sub-slide-item {
max-width: 1072px;
margin: 0 auto;
}
.slick-slide img {
width: 100% !important;
max-width: 750.4px !important;
}
/*---------------------------
icon color
---------------------------*/
.bg-y {background: #FFEC16 !important;color: #333 !important;}
.bg-bl {background: #2976C6 !important;color: #fff !important;}
.bg-r {background: #DC4E41 !important;color: #fff !important;}
.bg-o {background: #FF7200 !important;color: #fff !important;}
.bg-g {background: #2FB949 !important;color: #fff !important;}
.bg-p {background: #FF086E !important;color: #fff !important;}
.bg-bk {background: #111 !important;color: #fff !important;}
.bg-w {background: #eee !important;color: #333 !important;}
.bg-br {background: #442B22 !important;color: #fff !important;}
.bg-lbr {background: #CE9B6C !important;color: #fff !important;}
.bg-dbr {background: #2E1F19 !important;color: #fff !important;}
.bg-dgy {background: #888 !important;color: #fff !important;}
.bg-gy {background: #aaa !important;color: #333 !important;}
.bg-lgy {background: #ccc !important;color: #333 !important;}
.bg-wgy {background: #f7f7f7 !important;color: #333 !important;}
/*---------------------------
color
---------------------------*/
.col-r, .col-r:before {color: #d00 !important;}
.col-o, .col-o:before {color: #FE6604 !important;}
.col-bl, .col-bl:before {color: #2976C6 !important;}
/*---------------------------
authority
---------------------------*/
.trend .post-time-box {
text-align: right;
padding: 0 2em 0 0;
}
.trend .trend-comment {
font-size: 1.2em;
padding: .5em 1em 1em;
line-height: 1.5;
}
.trend .manager {
width: 95%;
border: 1px #ccc solid;
padding: 1em 0.3em;
margin: 0 1em 4em;
}
.trend .manager .item-manager {
text-align: left;
font-weight: bold;
font-size: 1.2em;
padding: .5em 0;
}
.trend .manager .manager-icon {
display: inline-block;
width: 12%;
vertical-align: middle;
text-align: center;
}
.trend .manager .manager-icon img {
width: 100px;
}
.trend .manager .comment-area {
display: inline-block;
width: 85%;
vertical-align: middle;
font-size: 1em;
line-height: 1.2;
color: #666;
}
.trend .manager .manager-comment {
line-height: 1.5;
}
.trend .ttl-icon {
color: #FF6600;
font-size: 1.5em;
padding: 0 .1em .3em .1em;
}
.ttl-icon {
display: inline-block;
vertical-align: middle;
}
@media screen and (max-width: 779px) {
.trend {
text-align: left;
}
.trend .manager .manager-icon {
vertical-align: top;
padding: 0 .2em;
}
.trend .trend-comment {
overflow: hidden;
position: relative;
max-height: 8em;
transition: max-height 0.3s ease;
}
.trend .trend-comment.expanded {
max-height: none;
}
.trend .trend-comment::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 2em;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
pointer-events: none;
}
.trend .trend-comment.expanded::before {
display: none;
}
.trend .read-more {
display: block;
text-align: center;
padding: 0.5em;
background-color: #f6f6f6;
color: #333;
text-decoration: none;
width: 95%;
margin: 0 auto 1em;
}
}