@charset "utf-8";

/**********リセット**********/
*{margin:0; padding:0;}

/**********共通**********/
html{font-size:62.5%;}
body{font-family:'Noto Sans Japanese', sans-serif; font-size:1.8rem; color:#333; background:url("../img/back.png") #f5f5f5;}
.inner{max-width:1500px; margin:auto;}

.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.fl{float:left;}
.fr{float:right;}

a,a:hover{color:#333; text-decoration:none; cursor:pointer;}
a:hover{opacity:0.8; transition:0.2s;}
img{display:block; max-width:100%; height:auto; vertical-align:top;}

/**********ヘッダ**********/
header{position:fixed; top:0; width:100%; height:80px; display:flex; justify-content:center; align-items:center; background:#fff; box-shadow:0 10px 10px rgba(0,0,0,.1); z-index:2;}
header .menu_list{display:flex; column-gap:40px;}
header .menu_list li{list-style:none;}
header .menu_list li a:before{content:'\f107'; font-family:"Font Awesome 5 Free"; font-weight:700; margin-right:10px;}

/*レスポンシブ用*/
#menu-btn-check{display:none;}

/**********メイン**********/
main{}
section{margin:80px auto;}
article{}

h1{font-size:3.0rem; margin-bottom:20px;}
h1 span{display:block;}
h2{font-size:2.0rem; margin-bottom:10px;}
h2.outline_title{}
h2.item_title{font-size:3.0rem; display:flex; gap:20px; align-items:center; margin-bottom:40px;}
h2.item_title:before,
h2.item_title:after{content:""; height:3px; flex-grow:1; background-color:#ccc;}
h3{font-size:2.0rem; margin-bottom:10px;}
h3.category_title{font-size:2.4rem; text-align:center; color:#fff; max-width:300px; padding:40px; margin:auto; margin-bottom:40px;}
h3.category_title span{display:block; font-size:1.4rem;}
.new_title{background:#ff0000;}
.murder_title{background:#333399;}
.board_title{background:#cc9933;}
p{line-height:1.8; margin-bottom:20px;}
br.tb{display:none;}
br.sp{display:none;}

section#main_image{}
#main_image .pc{display:block;}
#main_image .tb{display:none;}

section#outline{margin-top:-80px; padding-top:80px;}
.outline_column{display:flex; gap:40px;}
.outline_column .left,
.outline_column .right{width:calc((100% - 40px)/2); padding:40px; background:#fff; border-radius:10px;}
.outline_column .left a{text-decoration:underline;}
.outline_column .left a:hover{text-decoration:none;}
.outline_attention{border-top:1px #ccc solid; padding-top:20px; font-size:1.4rem;}

section#item{margin-top:-80px; padding-top:80px;}
.item_column{display:flex; gap:30px; flex-wrap:wrap; margin-bottom:40px;}
.item_column .block{width:calc((100% - 90px)/4 - 20px); padding:10px; padding-bottom:40px; background:#ccc; border-radius:10px; box-shadow:0 0 5px rgba(0,0,0,.2); position:relative;}
.item_column .block .carousel{background:#fff;}
.item_column .block .carousel span{position:relative; padding-top:100%; display:block;}
.item_column .block .carousel img{aspect-ratio:1/1; object-fit:contain; position:absolute; left:0; top:0; width:100%; height:100%;}
.item_column .block .carousel video{aspect-ratio:1/1; object-fit:contain; position:absolute; left:0; top:0; width:100%; height:100%;}
.item_column .block .name{display:block; font-size:1.6rem; font-weight:500; text-align:center; border-bottom:1px #ccc dotted; padding-bottom:2px; margin-bottom:2px;}
.item_column .block .price{display:block; font-size:1.4rem; font-weight:500; text-align:right;}
.item_column .block .limit{display:block; font-size:1.2rem; font-weight:500; text-align:center;margin-top:1em;}
.item_column .block .maker{display:block; font-size:1.2rem; text-align:center;}
.item_column .block .url{display:block; font-size:1.2rem; text-align:center;}
.item_column .block .more{display:block; font-size:1.2rem; text-align:center; background:#fff; padding:2px; position:absolute; bottom:10px; width:calc(100% - 24px);}
.item_column .block .more:before{content:'\f105'; font-family:"Font Awesome 5 Free"; font-weight:700; margin-right:5px;}
.new_list{justify-content: center;}
.new_list .block{background:#fff9ee;}
.murder_list .block{background:#ddddff;}
.board_list .block{background:#fff9ee;}

.pop_main{display:flex; gap:40px; align-items:center; max-height:90vh; overflow-y:scroll; scrollbar-width:none; -ms-overflow-style:none;}
.pop_main::-webkit-scrollbar{display:none;}
.pop_main .left{width:500px;}
.pop_main .right{width:400px;}
.pop_main .pop_carousel{}
.pop_main .pop_carousel span{position:relative; padding-top:100%; display:block;}
.pop_main .pop_carousel img{aspect-ratio:1/1; object-fit:contain; position:absolute; left:0; top:0; width:100%; height:100%;}
.pop_main .pop_carousel video{aspect-ratio:1/1; object-fit:contain; position:absolute; left:0; top:0; width:100%; height:100%;}
.pop_main .pop_name{display:block; font-size:2.0rem; font-weight:700; border-bottom:1px #ccc solid; padding-bottom:10px; margin-bottom:20px;}
.pop_main .pop_price{display:block; font-size:2.0rem; font-weight:700; text-align:right; margin-bottom:40px;}
.pop_main .pop_price span{font-size:1.2rem;}
.pop_main .pop_maker{display:block; font-size:1.4rem; margin-bottom:20px;}
.pop_main .pop_url{display:block; font-size:1.4rem;}

.pop_show{display:block;}
.pop_close:before{content:'\f057'; font-family:"Font Awesome 5 Free"; font-weight:700; font-size:40px; color:rgba(0,0,0,.7); position:absolute; top:20px; right:20px;}

.new_ow{position:absolute; top:10px; left:-10px; z-index:1; background:#f00; color:#fff; font-weight:700; padding:2px 5px;}
.new_ico{background:#f00; color:#fff; font-weight:700; font-size:1.2rem; padding:2px 5px; margin-right:5px;}

section#qa{margin-top:-80px; padding-top:80px;}
.qa_column{display:flex; gap:20px; flex-wrap:wrap;}
.qa_column .block{width:calc((100% - 20px)/2 - 40px); padding:20px; background:#fff;}
.qa_column .block dt{background:#f5f5f5; padding:10px; display:flex; align-items:center;}
.qa_column .block dt:before{content:'\f059'; font-family:"Font Awesome 5 Free"; font-weight:700; font-size:40px; color:#ac8bdb; margin-right:5px;}
.qa_column .block dd{padding:10px;}

section#attention{margin-top:-80px; padding-top:80px;}
.attention_content{background:#fff; border-radius:20px; padding:40px;}
.attention_title{display:block; margin-bottom:20px;}
.attention_list{}
.attention_list li{margin-left:20px; margin-bottom:10px; font-size:1.4rem;}

/*ポップアップ*/
.pop{
background:rgba(0,0,0,.2);
width:100vw;
height:100vh;
position:fixed;
top:0;
left:0;
z-index:3;
display:none;
}
.pop_main{
background:#fff;
border-radius:20px;
padding:20px;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

/**********フッタ**********/
footer{}
.copyright{background:#333; color:#fff; padding:20px; font-size:1.4rem; text-align:center;}
.pagetop{position:fixed; right:40px; bottom:80px;}
.pagetop:before{content:'\f139'; font-family:"Font Awesome 5 Free"; font-weight:700; font-size:60px; color:rgba(0,0,0,.7);}

/**********レスポンシブ**********/
@media(max-width:1500px){
.inner{padding:0 20px;}
h1{font-size:2.8rem;}
}/*1500*/

@media(max-width:1024px){
.outline_column{flex-direction:column;}
.outline_column .left,
.outline_column .right{width:auto;}
.item_column{gap:20px;}
.item_column .block{width:calc((100% - 40px)/3 - 20px);}
.pop_main{flex-direction:column;}
}/*1024*/

@media(max-width:834px){
#main_image .pc{display:none;}
#main_image .tb{display:block;}
br.tb{display:block;}
h1{text-align:center;}
.item_column .block{width:calc((100% - 20px)/2 - 20px);}
.qa_column{flex-direction:column;}
.qa_column .block{width:auto;}
}/*834*/

@media(max-width:768px){}/*768*/

@media(max-width:600px){
html{font-size:50%;}
section{margin:40px auto;}
.inner{padding:0 10px;}
header{height:60px;}
header .menu_list{column-gap:20px;}
header .menu_list li a:before{margin-right:5px;}
h1 span{font-size:2.2rem;}
.outline_column .left,
.outline_column .right{padding:10px;}
.item_column{gap:10px;}
.item_column .block{padding:0; padding-bottom:40px; border-radius:0; width:calc((100% - 10px)/2);}
.item_column .block .price{text-align:center;}
.item_column .block .more{width:calc(100% - 4px);}
.qa_column .block{padding:10px;}
.qa_column .block dt:before{font-size:20px;}
.attention_content{padding:20px;}
.pop_main{border-radius:0;}
.pop_main .left,
.pop_main .right{width:90vw;}
.pagetop{right:10px; bottom:10px;}
}/*600*/

@media(max-width:428px){
br.sp{display:block;}
header .menu_list li a{font-size:1.4rem;}
}/*428*/

@media(max-width:375px){}/*375*/

@media all and (-ms-high-contrast: none) {
header .menu_list li{margin-right:40px;}
header .menu_list li:last-child{margin-right:0;}
.item_column .block{margin:10px;}
.video span{display:none !important;}
.video:before{content:'動画の閲覧には\A別のブラウザをお試しください'; white-space:pre; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.pop_main .pop_carousel img{object-fit:none; width:auto; height:auto; max-width:100%; max-height:100%; top:50%; left:50%; transform:translate(-50%,-50%);}
.pop_main .left{margin-left:20px;}
}