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

body {
color: #000000;
font-size: 1rem;
text-align: left;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf  {
*zoom: 1;
}
.navbar a:link, #foot a:link {color:#000000;}
.navbar a:visited, #foot a:visited {color:#000000;}
.navbar a:hover, #foot a:hover {color:#000000;}
.navbar a:active, #foot a:active {color:#000000;}

.navbar {
padding: 0;
/* position: fixed; */
position: relative;
}
.fixed-top {
/* top:2rem; */
}
header#head p {
font-size: 0.75rem;
font-weight: bold;
text-align: center;
background-color: #f4f4f4;
line-height: 2rem;
margin: 0;
/* position: fixed; */
top: 0;
left: 0;
width: 100%;
}
.navbar-collapse,
#foot .navbar-collapse {
background: rgba(238,238,238,0.6);
}
.navbar-collapse {
padding: 0 3%;
}
#foot .navbar-collapse {
padding: 0;
margin-bottom: 1rem;
}
#navbar-wrap {
background-color: #fff;
padding: 5% 0;
width: 100%;
}

/* --------------------------- */
.navbar-dark .navbar-toggler {
color: rgba(0,0,0,1);
border: none;
}
.navbar .navbar-toggler-bar {
display: block;
position: relative;
width: 22px;
height: 1px;
border-radius: 1px;
background: #000000;
}
.navbar .navbar-toggler-bar+.navbar-toggler-bar {
margin-top: 7px;
}
.bar1 {
top: 0px;
-webkit-animation: topbar-back 500ms linear 0s;
-moz-animation: topbar-back 500ms linear 0s;
animation: topbar-back 500ms 0s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.navbar .navbar-toggler-bar.bar2 {
/* width: 17px; */
width: 22px;
transition: width .2s linear;
}
.bar3 {
bottom: 0px;
-webkit-animation: bottombar-back 500ms linear 0s;
-moz-animation: bottombar-back 500ms linear 0s;
animation: bottombar-back 500ms 0s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.sidebar-collapse .bar1, .sidebar-collapse .bar2, .sidebar-collapse .bar3 {
outline: 1px solid transparent;
}
.navbar-brand {
margin: 0;
padding: 0;
width: 37.8%;
position: absolute;
left: 30%;
}
.navbar-favorite {
display: inline-block;
padding: 0;
width: 5.5%;
position: absolute;
right: 11.3%;
}
.navbar-cart {
display: inline-block;
padding: 0;
width: 5.3%;
position: absolute;
right: 3%;
}
.navbar-brand img,
.navbar-favorite img,
.navbar-cart img {
max-width: 100%;
}
/* --------------------------- */

.navbar-nav .nav-link,
.navbar-nav .active>.nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .show>.nav-link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover,
.dropdown-item {
color: #000000;
font-size: 0.75rem;
}
.nav-link {
margin: 0.5rem 0;
position: relative;
}
.dropdown-item {
padding: 1rem 1rem 1rem 0;
position: relative;
}
.nav-link::after,
.dropdown-item::after {
content: "";
position: absolute;
display: inline-block;
right: 0;
width: 0.6rem;
height: 0.6rem;
border-top: 3px solid #aaaaaa;
border-right: 3px solid #aaaaaa;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#foot .dropdown-item::after {
right: 3%;
}
.dropdown-toggle::after {
content: "";
position: absolute;
display: inline-block;
right: 0;
width: 0.6rem;
height: 0.6rem;
border-top: 3px solid #aaaaaa;
border-right: 3px solid #aaaaaa;
border-left: none;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.dropdown-menu {
background: rgba(238,238,238,0.95);
border: none;
color: #000000;
margin: 0;
padding: 0;
}
#foot .dropdown-menu {
background: rgba(255,255,255,0.95);
}
#foot .navbar-nav .dropdown-menu {
position: static !important;
transform: translate3d(0px, 0px, 0px) !important;
top: auto !important;
left: auto !important;
}
.nav-item .icon-guide,
.nav-item .icon-login,
.nav-item .icon-entry,
.nav-item .icon-cart,
.nav-item .icon-faq {
padding-left: 2rem;
line-height: 0.75rem;
}
.nav-item .icon-guide {
background: url(../images/icon_guide2.png) left center no-repeat;
background-size: 5%;
}
.nav-item .icon-login {
background: url(../images/icon_login2.png) left center no-repeat;
background-size: 4%;
}
.nav-item .icon-entry {
background: url(../images/icon_entry2.png) left center no-repeat;
background-size: 5%;
}
.nav-item .icon-cart {
background: url(../images/icon_cart3.png) left center no-repeat;
background-size: 5%;
}
.nav-item .icon-faq {
background: url(../images/icon_faq.png) left center no-repeat;
background-size: 5%;
}
.freearea {
padding: 0 !important;
}
#foot .navbar-nav {
border-top: 1px solid #e5e5e5;
}
#foot .nav-item {
border-bottom: 1px solid #e5e5e5;
margin: 0;
}
#foot .nav-link {
margin: 0.5rem 3%;
}
#foot .dropdown-item {
padding: 1rem 0 1rem 3%;
border-bottom: 1px solid #e5e5e5;
}
#foot .dropdown-item:last-child {
border-bottom: none;
}
#service.row {
margin: 0;
}
#service .col-4 {
background-color: #0d5661;
padding: 0;
border-right: 1px solid #ffffff;
}
#service .col-4:last-child {
border-right:none;
}
#service p {
background-color: #0d5661;
color: #ffffff;
font-size: 0.75rem;
text-align: center;
margin: 0;
border-bottom: 1px solid #ffffff;
}
#service .col-4:first-child p {
padding: 0.8rem 0;
}
#service p a {
display: block;
padding: 0.5em 0;
text-decoration: none;
}
#service p a:hover {
background-color: #138090;
}

#service a:link {color:#ffffff;}
#service a:visited {color:#ffffff;}
#service a:hover {color:#ffffff;}
#service a:active {color:#ffffff;}

#sns {
margin: 2.5rem 0;
padding: 0;
text-align: center;
}

#sns li {
list-style: none;
display: inline;
padding: 0 1%;
}
#copyright {
text-align: center;
padding: 1rem 0 1rem 0;
font-size: 0.75rem;
}
#pcview a {
display: block;
margin: 2.5rem 3% 0 3%;
padding: 1rem 0;
background: #eeeeee url(../images/icon_pc.png) 35% center no-repeat;
border: 1px solid #e5e5e5;
text-align: center;
color: #000000;
font-size: 0.75rem;
font-weight: bold;
text-indent: 30px;
}
#pcview a:hover {
text-decoration: none;
}
.event {
position: fixed;
bottom: 0;
left: 0;
z-index: 1040;
margin: 0;
}
.event img {
width: 100%
}
.ch {
display: none;
}

/* ------------------------------------------------------------
  content
------------------------------------------------------------ */

#contents {
margin: 0;
}
#shownImg .bx-wrapper {
margin: 0 auto 50px;
}
#shownImg .bx-wrapper img {
max-width: 100% !important;
}
#shownImg .bx-wrapper .bx-controls-direction a {
margin-top: -10px;
}
#shownImg .bx-wrapper .bx-pager.bx-default-pager a {
text-indent: inherit;
background: #ffffff;
color: #000000;
font-weight: bold;
font-size: 1rem;
line-height: 1;
width: 20px;
height: 14px;
}
#shownImg .bx-wrapper .bx-pager.bx-default-pager a.active {
background: #ffffff;
color: #0d5661;
}
#shownImg .bx-wrapper .bx-pager .bx-pager-item {
border-right: 1px solid #000000;
padding: 0 ;
}
#shownImg .bx-wrapper .bx-pager .bx-pager-item:last-child {
border-right:none;
}
#shownImg .bx-wrapper .bx-controls-direction a.bx-next {
width: 16%;
height: auto;
}
#shownImg .bx-wrapper .bx-controls-direction a.bx-prev {
width: 17%;
height: auto;
}
#shownImg .bx-wrapper .bx-next {
background: url(../images/slide_next.png) left top no-repeat;
background-size: cover;
}
#shownImg .bx-wrapper .bx-prev {
background: url(../images/slide_back.png) left top no-repeat;
background-size: cover;
}
#shownImg .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
bottom: -32px;
}
#news {
background-color: #eeeeee;
padding: 3%;
}
.listmenu li a, .titlebar+aside a {
background-color: #eeeeee;
background-image: none;
margin: 0;
color: #000000;
}
.listmenu li, .titlebar+aside a {
-webkit-tap-highlight-color: #eeeeee;
}
#contents #news .title {
background-image: none;
margin: 0;
padding: 0;
}
#news .title h1 {
background-color: #801c1c;
color: #ffffff;
font-weight: bold;
font-size: 11px;
display: inline;
float: left;
padding: 8px;
}
section .listmenu {
margin: -1em 0 0 0;
}
.listmenu li {
font-weight: bold;
}
.listmenu a span.date {
display: none;
}
#searchbox2 .title {
display: none;
}
.search_form {
box-shadow: none;
padding: 3%;
}
.search_form p.f_l {
width: 100%;
}
.search_form .f_l select {
border: 1px solid #666666;
padding: 4px 0;
}
.search_form .input_l .keyword_search {
display: none;
}
.search_form .input_l input {
border: 1px solid #666666;
border-radius: 5px;
width: 82%;
padding: 4px 0;
}
.search_form .submit input {
width:50px;
height:28px;
background:url(/common/images/button_search.png) center center no-repeat;
background-size: 45%;
border:none;
text-shadow:none;
text-indent: -99999px;
border: 1px solid #666666;
border-radius: 5px;
margin-left: 5px;
}
.search_form .input_l {
display: inline;
}
.search_form .submit {
display: inline;
}
#ranking {
padding: 0 0 6% 0;
}
#ranking h3,
#category_search h3,
#topics h3,
#point h3,
#special h3 {
font-size: 1.25rem;
font-weight: normal;
text-align: center;
padding-bottom: 2%;
}
#ranking h3 span,
#category_search h3 span,
#topics h3 span,
#point h3 span,
#special h3 span {
font-size: 1rem;
color: #999999;
font-weight: bold;
display: block;
padding-bottom: 5px;
}

/*タブ切り替え全体のスタイル*/
#ranking .tabs {
background-color: #fff;
width: 100%;
margin: 0 auto;
}

/*タブのスタイル*/
#ranking .tab_item {
width: calc(100%/4);
height: 50px;
border-bottom: 2px solid #bfbfbf;
background-color: #d9d9d9;
line-height: 1.4;
font-size: 0.75rem;
text-align: center;
color: #000000;
float: left;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
cursor: pointer;
}
#ranking .tab_item:hover {
opacity: 0.75;
}

/*ラジオボタンを全て消す*/
#ranking input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
#ranking .tab_content {
display: none;
padding: 5% 3% 3% 3%;
clear: both;
overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#range:checked ~ #range_content,
#order:checked ~ #order_content,
#tv:checked ~ #tv_content,
#storage:checked ~ #storage_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
#ranking .tabs input:checked + .tab_item {
background-color: #ffffff;
color: #0d5661;
border-top: 2px solid #bfbfbf;
border-right: 2px solid #bfbfbf;
border-bottom:none;
}
#ranking .tabs input:checked + .bordernone {
border-right: none;
}

#ranking .ranking_title {
border-bottom: 1px solid #bfbfbf;
position: relative;
padding-bottom: 8px;
margin-bottom: 25px;
}

#ranking .ranking_title h4 {
font-size: 1rem;
font-weight: normal;
display: inline;
}
#ranking .ranking_title p {
font-size: 1rem;
display: inline;
}
#ranking .ranking_title p {
position: absolute;
right: 0;
padding-right: 10px;
}
#ranking .ranking_title p a {
color: #9f353a;
}
#ranking .ranking_title p:after {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
content: "";
vertical-align: middle;
width: 10px;
height: 10px;
border-top: 1px solid #9f353a;
border-right: 1px solid #9f353a;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#ranking .ranking_title p a:hover {
text-decoration: none;
}
#ranking .tab_content dl dt {
position: relative;
margin-bottom: 5px;
}
#ranking .tab_content dl dt img {
width: 100%;
}
#ranking .tab_content dl dt span {
position: absolute;
top: 0;
left: 0;
color: #ffffff;
width: 1.5rem;
height: 1.5rem;
font-weight: bold;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
#ranking .tab_content dl dt span.no1 {
background-color: #ffd700;
}
#ranking .tab_content dl dt span.no2 {
background-color: #c0c0c0;
}
#ranking .tab_content dl dt span.no3 {
background-color: #815a2b;
}
#ranking .tab_content dl dt span.no4 {
background-color: #0d5661;
}
#ranking .tab_content dl dd {
font-size: 0.75rem;
line-height: 1.4;
text-align: center;
color: #000000;
margin-bottom: 0;
}
#ranking .tab_content dl dd.price {
color: #9f353a;
}
#ranking .row {
margin-right:0;
margin-left:-4%;
}
#ranking .col-4 {
padding-right: 0;
padding-left: 4%;
}

#contents .title {
background-image: none;
margin: 0;
padding: 0;
}
.title h1 {
display: block;
font-size: 1rem;;
margin: 0;
padding: 0;
text-align: center;
font-weight: normal;
}
.title span#mp_icn_rec:after {
content: "Recommend";
font-size: 1rem;
color: #999999;
font-weight: bold;
display: block;
padding-bottom: 2px;
text-align: center;
}
.title h1#mp_txt_rec {
font-size: 1.25rem;
font-weight: normal;
text-align: center;
padding-bottom: 3%;
}
.cataloglist {
padding: 0 0 6% 0;
}
.cataloglist div.price {
position: absolute;
bottom: 10px;
left: 10px;
color: red;
font-weight: bold;
}

.cataloglist .box {
width: calc(50% - 2px);
height: 50vw;
border: 1px solid #666666;
display: flex;
float: left;
margin: 0;
padding: 0;
position: relative;
align-items: center;
margin: 1px;
overflow: hidden;


}

.cataloglist .catalogimg {
width: 100%;
}

.cataloglist .box img {
border: none;
}
.cataloglist .box a {
width: 100%;
margin: 3%;
}
.cataloglist .list_group_1 {

}
.cataloglist .list_group_2 {

}
.cataloglist .list_group_3 {

}
.cataloglist .list_group_4 {

}
.cataloglist .list_group_5 {

}
.cataloglist .list_group_6 {

}

#category_search {
padding-bottom: 6%;
}
#category_search ul {
margin: 0 0 6% 0;
padding: 0 3%;
}
#category_search ul li {
list-style: none;
padding: 0;
}
#category_search ul li a img {
width: 100%;
}
#topics {
padding-bottom: 6%;
}
#topics dl a {
font-size: 1rem;
line-height: 1.6;
color: #000000;
display: block;
}
#topics dl a:hover {
text-decoration: none;
}
#topics dl {
border-bottom: 1px solid #eeeeee;
padding: 3%;
margin: 0;
}
#topics dl dt {
float: left;
width: 30%;
}
#topics dl dt img {
width: 100%;
}
#topics dl dd {
float: right;
width: 67%;
padding-top: 10%;
}
#point {
padding: 0 0 6% 0;
}
#special {
padding: 3% 1.5% 6% 1.5%;
}
#point .row,
#special .row {
margin: 0;
}
#point .col-6,
#special .col-4,
#special .col-12 {
padding: 0 1.5% 1% 1.5%;
}
#point figure img,
#special figure img {
width: 100%;
}