body{font-family:"Overpass", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; padding: 0; margin: 0;}
#wrp{max-width: 800px; margin: 0 auto; padding:0 10px 100px;}
p,span,ul{margin: 0; padding: 0;}
html { scroll-behavior: smooth;}
a img:hover{opacity: 0.5; transition:0.5s;}
a{text-decoration: none;}
a:link,a:visited{color: #000;}
.pc_on{display: block;}
.sp_on{display: none;}

/*ヘッダー*/
header{background: #fff; height: 40px; padding: 10px 0; position: fixed; width: 100%; z-index: 9999;}
header div{display: flex; align-items: center; justify-content: center;}
header div img{height: 30px;}

/*画像が流れる*/
@keyframes infinity-scroll-left {
from {transform: translateX(0);}
to {transform: translateX(-100%);}}
.scroll-infinity{padding: 50px 0;}
.scroll-infinity__wrap {display: flex; overflow: hidden;}
.scroll-infinity__list {display: flex; list-style: none; padding: 0;}
.scroll-infinity__list--left {animation: infinity-scroll-left 80s infinite linear 0.5s both;}
.scroll-infinity__item {width: calc(100vw / 6); margin-right: 20px;}
.scroll-infinity__item>img {width: 100%; border-radius: 100%; margin-right: 20px;}

/*タイトル*/
#title{max-width: 800px; margin: 0 auto; text-align: center; padding-bottom: 50px;}
#title img{height: 40px;}
#title h1{letter-spacing: 5px; font-size: 2.5em; margin:0.3em;}
#title h2{color: #d12b15;}
#title h3{font-weight: normal; line-height: 1.8em; margin-top: 3em;}

/*メイン画像*/
#main_img img{width: 100%; height: auto;}

/*アンカーリンク*/
#anchor{padding-bottom: 50px;}
#anchor ul{width:100%; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0; }
#anchor ul li{width: 15%; background: #FFF; text-align: center; padding: 20px 20px 30px; margin: 10px; position: relative; display: inline-block; box-shadow:0px 1px 8px rgba(0, 0, 0, 0.07); font-size: 0.8em;}
#anchor ul li::before{content: ''; width: 6px; height: 6px; border: 0; border-bottom: solid 1px #333; border-right: solid 1px #333; transform: rotate(45deg); position: absolute; bottom: 20px; left:calc(50% - 3px);}
#anchor ul li img{width: 100%;}
#anchor ul li a{text-decoration: none; color: #000;}
#anchor ul li a:hover{opacity: 0.5; transition:0.5s;}
#top{margin: 0 auto; text-align: center;}
#top a{color: #000; text-decoration: none; border-bottom: 1px solid #000; padding-bottom: 10px; position: relative; display: inline-block;}
#top a::before{content: ''; width: 6px; height: 6px; border: 0; border-top: solid 1px #000; border-left: solid 1px #000; transform: rotate(45deg); position: absolute; top: 33%; left: -25px;}
#top a::after{content: ''; width: 6px; height: 6px; border: 0; border-top: solid 1px #000; border-left: solid 1px #000; transform: rotate(45deg); position: absolute; top: 33%; right: -25px;}

/*フッター*/
#footer{text-align: center; padding-top: 50px;}
#logo_rakuten{padding-bottom: 20px;}
#fnavi{width: 100%; margin: 0 auto;}
#fnavi ul{list-style: none; display: flex; text-align: center; justify-content:center; padding-top: 1em;}
#fnavi li{margin-right: 1em;}
#fnavi li a{color: #000; text-decoration: none;}
#fnavi li::after{content: '/'; margin-left: 1em;}
#fnavi li:last-child{margin-right: 0;}
#fnavi li:last-child::after{content: ''; margin-left: 0;}
#page_top{padding-top: 60px;}

/*メインコンテンツ*/
.main{background: #fff; box-shadow:0px 1px 8px rgba(0, 0, 0, 0.07); padding: 20px 50px 50px; margin-bottom: 50px;}
.main img{width: 100%;}
.main h4{text-align: center; font-size: 2em;}
.main h4 p{font-size: 14px; font-weight: normal;}
.main .item_image{padding-bottom: 30px;}
.main .item_image ul li p{text-align: center; font-size: 0.8em;}
.main .main_text{margin-bottom: 40px;}
.main .main_text p{font-weight: bold; font-size: 1.2em; line-height: 1.8em; margin: 1em 0;}
.main .main_text span{line-height: 1.8em;}
.main ul{list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; margin: 0;}
.main ul li{width: 23%; margin-bottom: 15px; display: flex; flex-wrap: wrap; align-content: space-between;} 
.item_box{display: flex; padding-bottom: 20px;}
.item_box .left,.item_box .right{width: 50%;}
.item_box .right{padding-left: 30px; display: flex; flex-wrap: wrap; flex-direction:column; justify-content: space-around;}
.item_box .name{font-weight: bold; font-size: 1.2em; border-bottom: 1px #aaa solid; padding-bottom: 20px;}
.item_box .model{font-size: 0.9em; line-height: 1.5em;}
.item_box .price{font-size: 2em; font-weight: bold; color: #d12b15; text-align: right;}
.item_box .price span{font-size: 0.8em;}
h5{text-align: center; font-size: 1em; font-weight: normal; padding: 1em 0; font-weight: bold;}
.small{font-size: 0.5em!important;}
.kugiri{border-top: 1px #333 dotted; padding-bottom: 50px;}

/*cnt*/
.price{font-weight: bold; color: #d12b15; text-align: right; font-size: 1.2em;}

/*ボタン*/
.btn_box{display: flex; justify-content: space-between;}

.btn{text-align: center; font-size: 1.2em; letter-spacing: 5px; font-weight: bold;}
.btn a{text-decoration: none; display: block; padding: 20px;}
.btn a:hover{transition:0.5s;}

.main .btn{background: #d12b15; border: 1px solid #d12b15; margin-bottom: 50px; width: 48%;}
.main .btn a{color: #fff;}
.main .btn a:hover{background: #fff; color: #d12b15;}



.btn_box_buy a , .btn_box_cp a{display: block; color: #fff; letter-spacing: 1px; padding: 5px;}
.btn_box_cp{text-align: center; width: 100%!important; color: #fff; background-color: orange; border: 1px solid orange;}
.btn_box_buy{text-align: center; width: 100%!important; color: #fff; background-color: #d12b15; border: 1px solid #d12b15; margin-bottom: 5px;}
.btn_box_cp a:hover{background-color: #fff; color: orange; transition: 0.3s;}
.btn_box_buy a:hover{background-color: #fff; color: #d12b15; transition: 0.3s;}

.main_color_wrp{padding: 100px 0 50px;}
.main_color_inr{max-width: 800px; margin: 0 auto;}



.full{width: 100%!important;}

.fav{background: orange!important;  border: 1px solid orange!important;}
.fav a:hover{color: orange!important;}

#footer .btn{background: #333; border: 1px solid #333;}
#footer .btn a{color: #fff;}
#footer .btn a:hover{background: #fff; color: #333;}


/*スマホ調整*/
@media screen and (max-width: 700px) { 
.pc_on{display: none;}
.sp_on{display: block;}
#wrp{padding: 0 10px 20px;}
#page_top{padding-top: 30px;}
.scroll-infinity{padding: 50px 0 30px;}
#title h1{line-height: 1.5em;}
.scroll-infinity__item{width: calc(100vw / 3);}
#anchor ul{justify-content: center;}
#anchor ul li {width: 33%; margin: 10px;}
.main {padding: 10px 20px 50px;}
.main h4{line-height: 0.5em; margin-block-end: 0.8em; margin-bottom: 1em;}
.item_box{flex-wrap: wrap;}
.item_box .left,.item_box .right{width: 100%;}
.item_box .right{padding-left: 0;}
.item_box .price{margin: 0; padding: 0;}
#footer{padding: 20px 0 100px;}
#logo_rakuten{padding-bottom: 10px;}
#logo_rakuten img{width: 60%;}
#fnavi ul{flex-wrap: wrap; padding: 0; margin-top: 1em;}
#fnavi ul li{font-size: 0.8em;}
#anchor{position: fixed; bottom:0; left:0; padding: 0; width: 100%; z-index: 9999;}
#anchor img{display: none;}
#anchor ul{justify-content: center;}
#anchor ul li{width: 24%!important; padding: 0; margin: 1px 1px 0 0; box-shadow:none; background-color: #f1f1f1;}
/*#anchor ul li:nth-child(5),#anchor ul li:nth-child(6),#anchor ul li:nth-child(7),#anchor ul li:nth-child(8){margin-top: 2px;}*/
#anchor ul li::before{display: none;}
#anchor ul li p{padding: 1em; margin: 0; font-size: 0.8em;}
#title h1 span{display: block;}
.main h4 p{margin-top: 1em;}
.main ul li{width: 48%;}
.item_box .model{padding: 1em 0;}
.btn_box{flex-wrap: wrap;}
.main .btn{width: 100%; margin-bottom: 10px;}
header{height: 20px;}
header div img{height: 20px; width: auto;}
.kugiri{margin-top: 30px;}
.btn a{padding: 10px;}
.fav{margin-bottom: 1em!important;}
}