@charset "UTF-8";
/*@charset "Shift_JIS";*/
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 .info{background: #E92F53;}
#FD .info{background: #131c44;}
#FD.FD0 .info:nth-of-type(2){background:#ad1231;}
#FD.FD3 .info:nth-of-type(2){background:#5bc2d0;}

#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; z-index:5;}
#FD #pagetop a{background: #281e1c; z-index:5;}

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

#FD a:hover .name,a[class*=" o6"]:hover .name,a[class^="o6"]:hover .name{color:#0e006a;}
#MD a:hover .name,a[class*=" o4"]:hover .name,a[class^="o4"]:hover .name,a[class*=" o5"]:hover .name,a[class^="o5"]:hover .name{color:#ad1231;}
#FD.FD0 a[class*=" o5"]:hover .name,#FD.FD0 a[class^="o5"]:hover .name{color:#ad1231;}

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); }

#rankN p{position:relative; margin-top:50px;}
#rankN p::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 p:nth-of-type(1)::after{background-image:url(../../cmn/rankicon01.png);}
#rankN .best3 p:nth-of-type(2)::after{background-image:url(../../cmn/rankicon02.png);}
#rankN .best3 p:nth-of-type(3)::after{background-image:url(../../cmn/rankicon03.png);}
#rankN .best3 p:nth-of-type(4)::after{background-image:url(../../cmn/rankicon04.png);}
#rankN .best3 p:nth-of-type(5)::after{background-image:url(../../cmn/rankicon05.png);}
#rankN .best3 p:nth-of-type(6)::after{background-image:url(../../cmn/rankicon06.png);}
#rankN .best1 p::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;}

.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{display:block; margin:0 0 5em; opacity:0; transition:opacity 0.25s ease;}
#pagetop.show{opacity:1;}
#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){
.box{width:100%; max-width:980px; margin:0 auto;}

.col3>p {width:calc(100%/3); padding:2px; box-sizing:border-box;}
.col4>p {width:calc(100%/4); padding:2px; box-sizing:border-box;}
.col3>p>a,
.col4>p>a
{display:block; width:100%;}

.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; right:0; z-index:4;}
#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;}

.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, .col3c, .col4, .col5, #cat ul{display:flex; flex-wrap:wrap; justify-content:space-around;}
.col3 a{width:calc(100%/3.25); 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;}

#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;}*/

#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);}
#catewrap li a{transition:all 0.1s ease;}
#catewrap li a:hover{transform:translateY(2px);}
#catewrap li a:active{transform:translateY(4px);}
#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;}
.morebtn a{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;}
.morebtn a span{position:relative; z-index:1; transition:color 0.3s ease-in-out;}
.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;}
.morebtn a:hover::before{left:0;}
.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%;}

#main{margin:0 auto 30%;}

.contentTTL br{display:none;}
.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}

.col3>p {width:calc(100%/2); padding:2px; box-sizing:border-box;}
.col4>p {width:calc(100%/2); padding:2px; box-sizing:border-box;}
.col3>p>a,
.col4>p>a
{display:block; width:100%;}

.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{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;}
.best3.ItemBox p:nth-of-type(1){width:70%; margin: 0 auto;}
.best3.ItemBox p:nth-of-type(2), .best3.ItemBox p:nth-of-type(3){width: calc(100% / 2);}

.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;}







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