@charset "UTF-8";
/*@charset "Shift_JIS";*/
*{margin:0; padding:0; border:0; outline:none; font-size:100%; list-style-type:none; box-sizing: border-box;}
body{font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif!important; padding:0; margin:0; color:#000; animation:fadeIn 1.5s ease 0s 1 normal; -webkit-animation:fadeIn 1.5s ease 0s 1 normal;}
li{list-style:none;}
@keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1}}

#MD #KVn{
background-color: #ad1231;
background-image: url(http://www.transparenttextures.com/patterns/carbon-fibre-v2.png);
}
#FD #KVn{
background-color: #5bc2d0;
background-image: url(http://www.transparenttextures.com/patterns/black-linen.png);
}
#MD .info{background: #E92F53;}
#FD .info{background: #131c44;}

#MD .morebtn a {background:#ad1231; color:#fff; border-left:10px solid #111;}
#FD .morebtn a {background:#131c44; color:#fff; border-left:10px solid #111;}

#MD #catewrap h4{border-bottom:2px solid #ad1231;}
#FD #catewrap h4{border-bottom:2px solid #131c44;}
#catewrap .fa-search{font-size:80%; margin:0 10px;}
#MD #catewrap .fa-search{color:#E3007F!important;}
#FD #catewrap .fa-search{color:#131c44!important;}


#MD #cat a{background:#ad1231;}
#FD #cat a{background:#131c44;}
#MD #ysn a{background:#E92F53;}
#FD #ysn a{background:#5bc2d0;}

#footer .nav a{color:#fff;}
#footer .nav{background:#281e1c;}
#footer .nav a:hover{color:#FFFF00;}

#MD #pagetop a{background: #281e1c;}
#FD #pagetop a{background: #281e1c;}

#ysn li a::after{content:"円以内"; font-size:80%;}
#ysn li:last-child a::after{content:"円以上";}


/*.col2 a:hover .name,.col3 a:hover .name,.col4 a:hover .name {display: inline-block; box-sizing: border-box;}*/
#MD .col2 a:hover .name, #MD .col3 a:hover .name, #MD .col4 a:hover .name,
#FD #MD .col2 a .name, #FD #MD .col3 a .name, #FD #MD .col4 a .name{color: #ad1231;}
#FD #MD .col2 a:hover .name, #FD #MD .col3 a:hover .name, #FD #MD .col4 a:hover .name{color: #281e1c;}
#FD #MD .col4 a img { border-radius:50px 50px 0 50px; border:2px dashed #ad1231; box-sizing:border-box;}
#FD .col2 a:hover .name, #FD .col3 a:hover .name, #FD .col4 a:hover .name {color: #0e006a/*#131c44*/}
#rankN a:hover{text-align:center;}
a:link, a:visited {color: #333; text-decoration: none;}
a:hover {/*opacity:.8;*/}
.ItemBox a img{border-radius:20px; box-shadow:1px 1px 3px #aaa; transition:transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out; }
.ItemBox a:hover img{border-radius:28px; transform:translateY(-5px); box-shadow:3px 3px 10px rgba(0,0,0,0.25); }
.s0{position:relative; display:block;}

#rankN a{position:relative; margin-top:50px;}
#rankN a::after{content:""; position:absolute; top:-30px; left:0; right:0; margin:0 auto; width:100px; height:86px; background-size:contain; background-repeat:no-repeat; z-index:1;}
#rankN .best3 a:nth-of-type(1)::after
{background-image:url(../cmn/rankicon01.png);}
#rankN .best3 a:nth-of-type(2)::after
{background-image:url(../cmn/rankicon02.png);}
#rankN .best3 a:nth-of-type(3)::after
{background-image:url(../cmn/rankicon03.png);}
#rankN .best1 a:nth-of-type(1)::after
{background-image:url(../cmn/rankicon30.png);}
#rankN .best1 a:nth-of-type(2)::after
{background-image:url(../cmn/rankicon40.png);}
#rankN .best1 a:nth-of-type(3)::after
{background-image:url(../cmn/rankicon50.png);}
#rankN .best1 a:nth-of-type(4)::after
{background-image:url(../cmn/rankicon60.png);}
#rankN .best1 a:nth-of-type(5)::after
{background-image:url(../cmn/rankicon70.png);}
#rankN .best1 a:nth-of-type(6)::after
{background-image:url(../cmn/rankicon80.png);}
#rankN .best1 a::after{width:120px;}
#rankN a img {border-radius:150px; max-width:320px;}
#rankN a img:hover{border-radius:0; transition:.5s;}
#rankN .name, #rankN .price, #rankN .desc{text-align:center;}

#rankN .best3 a:nth-of-type(4)::after
{background-image:url(../cmn/rankicon04.png);}
#rankN .best3 a:nth-of-type(5)::after
{background-image:url(../cmn/rankicon05.png);}
#rankN .best3 a:nth-of-type(6)::after
{background-image:url(../cmn/rankicon06.png);}

.contentTTL,h3{font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif!important; font-weight:bold; text-align: center;}
.name, .price{display:block; font-weight:bold;}


#pagetop{z-index: 999999; margin:0 0 5em;}
#pagetop a {
position: fixed; text-align: center; box-sizing: border-box; text-decoration: none; border: 6px double #fff; color: #fff; border-radius: 50px; top:85%; right: 5px; width: 70px; height: 70px; padding: 0.75em;}

.fa-angle-up{font-size: 30px; display: block; margin: -9px;}

/********************************************************/@media screen and (min-width:768px){
/*#MD #kv {background:url(parts/kvbg.jpg) repeat-x; text-align:center;}*/
#MD #kv {background-color: #ad1231;background-image: url(http://www.transparenttextures.com/patterns/carbon-fibre-v2.png);text-align:center; padding:1.5em; box-sizing:border-box;}
/*#MD #kv {background-color: #ad1231;background-image: url(http://www.transparenttextures.com/patterns/wild-flowers.png);text-align:center; padding:1.5em; box-sizing:border-box;}*/
#FD #kv {background-color: #5bc2d0; background-image: url(http://www.transparenttextures.com/patterns/black-linen.png); text-align:center; padding:1.5em; box-sizing:border-box;}

.info{width: 980px; margin:30px auto 0px; font-size: 22px; color: #fff; line-height: 1.4em; font-weight: 500; text-align: center; padding: 1em;}
.info .ttl{font-weight:700; font-size: 26px; margin-bottom: -20px;}
.info .subtext{font-size: 80%;}

#PCmenu{width:100%; position:sticky; top:0; z-index:9999999;}
#PCmenu ul{position:absolute; top:10vh; right:0; display:flex; flex-wrap:wrap; justify-content:space-between; width:280px;}
#PCmenu ul li {width:280px; height:50px; margin:0 0 1px;} #PCmenu ul li:nth-of-type(1){height:80px;}
#PCmenu a {display:block; color:#fff; font-weight:bold; font-size:22px; padding:6px 0 6px 20px;}
#MD #PCmenu a {background: #ad1231;}
#FD #PCmenu a {background: #131c44;}
#PCmenu a:hover,
.morebtn a:hover,
#catewrap a:hover,
#pagetop a:hover
{color:#FFFF00!important; opacity:10!important;}

#fixed{position:fixed; bottom:0; left:0; width:250px; z-index:999;}
#fixed .Fkds{ position:relative; width:250px; height:55px; background:#333; padding:10px; text-align:center; color:#fff; font-size:14px; line-height:18px; /*font-weight:bold; */border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; margin:5px auto; 
font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
#fixed .Fkds:after{border: solid transparent; content:''; height:0; width:0; pointer-events:none; position:absolute; border-color: rgba(51, 51, 51, 0); border-top-width:10px; border-bottom-width:10px; border-left-width:10px; border-right-width:10px; margin-left: -10px; border-bottom-color:#333333; bottom:100%; left:15%;}

#main{width:980px; margin:0 auto 300px;}

.contentTTL{margin-top:-50px; padding:100px 0 0;}
.contentTTL,h3{font-size:140%; line-height:1.4em; margin:10vh 0 5vh;}

.rankttl{width:100%; border-bottom:60px solid #281e1c; text-align:center; max-height:100px;}

h2,h3{width:100%; text-align:center;}
h3 img{display:block; margin:0 auto;}

.desc{display:block; font-size:14px; line-height:1.2em; font-weight:500; margin:0.5em 0 3vh;}
.col2, .col3, .col3b, .col3c, .col4, .col5, #cat ul{display:flex; flex-wrap:wrap; justify-content:space-around;}
.col3b{width:980px; padding:0 40px;}
.col3 a{width:calc(100%/3.25); display:block; margin:0 0 2vh;}
.col3b a{width:280px; display:block; margin:0 0 2vh;}
.col4 a{width:245px; display:block; margin:0 0 -10px; padding:2px;}
.col2 a{width:400px; display:block; margin:0 0 -10px; padding:2px;}
.col5 a{width:calc(100%/5); display:block;}

.name,.price,.desc{text-align:left; padding:0 4px;}

#rank_main .col2 a{width:470px; margin:0 0 50px; box-sizing:border-box; position:relative;}
#rank_main .col4 a{width:235px; margin:0 0 50px; box-sizing:border-box; position:relative;}
#rank_main a::after{content:"詳細＆購入はこちら "; display:block; background:#111; color:#fff; width:100%; margin:0 auto; border-radius:2px; font-size:15px; padding:3px 30px 3px 0; box-sizing:border-box; text-align:center;}
#rank_main a::before{content:"\f138"; font-family:"Font Awesome 5 Free"; color:#fff; position:absolute; bottom:9px; right:calc(100% - 65%); font-size:15px; margin:0 0 0; font-weight:bold;}
#rank_main a img {display:block; margin:0 auto;}
#rank_main .name, #rank_main .price {font-size:18px; line-height:1.2em; font-weight:500; margin:1vh 0 0;}

#emg{max-width:980px; margin:0 auto; background:#ededed;}
#emg .col3 a {max-width:300px; display:block; margin:0 0 4%;}
#emg .col3 a::after{content:"詳細＆購入はこちら "; display:block; background:#111; color:#fff; max-width:300px; margin:0 auto; border-radius:2px; font-size:15px; padding:3px 0 3px 0; box-sizing:border-box; text-align:center;}

#FP, #FB {margin:30px auto 100px;}

#catewrap {margin:100px auto 0;}
#catewrap h4{font-size:30px; font-weight:bold; display:block; margin:50px auto 0; width:100%; text-align:center;}
#cat ul,#ysn ul{display:flex; justify-content:center; flex-wrap:wrap; position:relative; margin:20px 10px; padding:6px;}
#cat li {width: calc(100%/6);}
#ysn li{width: calc(100%/6);}
#cat a{display:block; text-align:center; padding:7% 0; margin:0; border:5px double #fff; font-size:130%; font-weight:bold; color:#fff;}
#ysn a{display:block; text-align:center; padding:7%; margin:0; border:5px double #fff; font-size:150%; font-weight:bold; color:#fff;}

.morebtn {margin: 5vh auto 0;}
.morebtn a {color:#fff; display:block; text-align:center; width:60%; margin:0 auto; padding:2vh 0; box-sizing:border-box; border-radius:2px; font-weight:bold; font-size:20px;}
#MD .morebtn a{background:#ad1231; color:#fff; border-left:10px solid #111; position:relative; overflow:hidden; display:block; text-align:center; width:60%; margin:0 auto; padding:2vh 0; box-sizing:border-box; border-radius:2px; font-weight:bold; font-size:20px;}
#MD .morebtn a span{position:relative; z-index:1; transition:color 0.3s ease-in-out;}
#MD .morebtn a::before{content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:#000; z-index:0; transition:all 0.5s ease-in-out;}
#MD .morebtn a:hover::before{left:0;}
#MD .morebtn a:hover span{color:yellow;}

/*特集ページ用PCフッター*/
.footer_PCevent {bottom:0px; width: 100%;}
.footer_PCevent .nav {display: flex; justify-content: center; align-items:center;}
.footer_PCevent .nav a{display:inline-block; width:120px; padding:10px 0; margin:0 10px; text-align:center;}
.footer_PCevent .nav .fas, .footer .nav .far{font-size:30px; padding:0 0.2em 0 0;}










}/********************************************************PC end*/
/********************************************************/@media screen and (max-width:767px){
.info{width:98%; margin:30px auto 0px; font-size:18px; color:#fff; line-height:1.4em; font-weight:500; text-align:center; padding:1em;}
.info .ttl{font-weight:700; font-size:23px; margin-bottom:-15px;}
.info .subtext{font-size:80%; line-height:1.3em; margin-top:5px}

#fixed{position:fixed; bottom:10px; left:-1vw; width:30vw; z-index:999;}
#fixed .Fkds{ position:relative; width:30vw; height:auto; background:#333; padding:10px; text-align:center; color:#fff; font-size:14px; line-height:18px; /*font-weight:bold; */border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; margin:5px auto; 
font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}
#fixed .Fkds:after{border: solid transparent; content:''; height:0; width:0; pointer-events:none; position:absolute; border-color: rgba(51, 51, 51, 0); border-top-width:10px; border-bottom-width:10px; border-left-width:10px; border-right-width:10px; margin-left: -10px; border-bottom-color:#333333; bottom:100%; left:15%;}

#PCmenu{width:100%; margin:30px auto; position:sticky; top:0; z-index:1;}
#PCmenu ul{display:flex; flex-wrap:wrap; justify-content:start;}
#PCmenu ul li {width:calc(100% /6); background:#222; border:1px solid #FFF; border-radius:10px;}
#main{margin:0 auto 30%;}

.contentTTL br{display:none;} #rank .contentTTL br{display:block;}
.contentTTL{font-size:17px; line-height:1.2em; padding:1em 0; box-sizing:border-box;}
.intro , h3{display:inline-block; padding:0 0.5em; font-size:18px; font-weight:normal; line-height:1.2em;}

.rankttl{margin-top:50px;}

h2,h3{width:100%; text-align:center; margin:20% auto 0;}
h2 img,h3 img{display:block; text-align:center; margin:0 auto;}
h2 img {max-width:370px!important;}
h3 {margin:100px auto 20px}
.name br{display:none;}
.name, .price, .desc{display:block; text-align:left; line-height:1.2em; padding:1% 2%; box-sizing:border-box;}
.desc{font-size:14px;}

#emg{max-width:980px; margin:0 auto; background:#ededed;}
#emg .col3 a {max-width:300px; display:block; margin:0 0 6%; font-size:95%;}
#emg .col3 a::after{content:"more "; display:block; background:#333; color:#fff; max-width:300px; margin:0 auto; border-radius:2px; font-size:15px; padding:3px 0 3px 0; box-sizing:border-box; text-align:center;}

#rcmd .col5:nth-of-type(1) a { margin:0 0; width:calc(100%/3); border:none;}
#rcmd .col5:nth-of-type(1) { justify-content:center; padding:0 0 10vh;}

.col5, .col4, .col3, .col3b {display:flex; flex-wrap: wrap;}
.col5 a, .col4 a, .col3 a, .col2 a {width:calc(100%/2); display:block; border:1px dotted transparent; padding-bottom:0.8em;}
#rcmd .col3b a{width:calc(100%/3); border:none; padding:0 4px 1em;}

.morebtn {margin: 5vh auto 0;}
.morebtn a {display:block; text-align:center; width:90%; margin:0 auto; padding:1vh 0; box-sizing:border-box; border-radius:2px; font-weight:bold;}

#catewrap {margin:50% auto;}
#catewrap h4{font-size:24px; font-weight:bold; display:block; margin:0 auto 5%; width:100%; text-align:center;}
#cat ul,#ysn ul{display:flex; justify-content:center; flex-wrap:wrap; position:relative; margin:0 0 10%; padding:2px;}
#cat li {width: calc(100%/3);}
#ysn li{width: calc(100%/3);}
#cat a{display:block; text-align:center; padding:7% 0; margin:0; border:5px double #fff; font-size:118%; font-weight:bold; color:#fff;}
#ysn a{display:block; text-align:center; padding:15%; margin:0; border:5px double #fff; font-size:150%; font-weight:bold; color:#fff; line-height:110%;}
#cat a img{max-width:320px!important;}

.footer_SPevent{background:#111; color:#fff; text-align:center; font-size:3vw; padding:1.5vh 0;}

div#pagetop a img {width:15vw!important;}






}/********************************************************SP end**/