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

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
background:#f5f5f5;
}

/* カタログ本体 */

.catalog{
max-width:900px;
margin:auto;
position:relative;
background:#fff;
box-shadow:0 0 10px rgba(0,0,0,0.1);
}

/* ページ */

.page{
position:relative;
}

.hidden{
display:none;
}

.page img{
width:100%;
display:block;
}

/* 商品リンク */

.imgWrap{
position:relative;
}

.link{
position:absolute;
display:block;
z-index:5;
}

/* ページ送りボタン */

button{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.65);
color:#fff;
border:none;
padding:12px 16px;
cursor:pointer;
font-size:14px;
border-radius:4px;
z-index:20;
transition:.2s;
}

button:hover{
background:rgba(0,0,0,0.85);
}

.prev{left:10px;}
.next{right:10px;}

/* ページ番号 */

.pageNumber{
position:absolute;
top:10px;
right:10px;
background:rgba(0,0,0,0.8);
color:#fff;
padding:6px 12px;
font-size:13px;
border-radius:4px;
z-index:15;
}

/* 目次ボタン */

.tocBtn{
bottom:10px;
top:auto;
right:10px;
transform:none;
background:#fff;
color:#333;
border:1px solid #ccc;
padding:8px 12px;
font-size:12px;
}

.tocBtn:hover{
background:#f0f0f0;
}

/* 目次エリア */

.toc{
padding:40px 30px;
background:#fafafa;
}

.toc h2{
margin-top:0;
margin-bottom:20px;
font-size:22px;
}

/* 目次リスト */

.toc ul{
list-style:none;
padding:0;
margin:0;
}

.toc li{
margin:10px 0;
}

/* 目次リンク */

.toc a{
display:block;
padding:14px 16px;
background:#ffffff;
border:1px solid #ddd;
border-radius:6px;
text-decoration:none;
color:#333;
font-weight:600;
transition:.2s;
}

/* 矢印 */

.toc a::after{
content:"→";
float:right;
color:#999;
}

/* ホバー */

.toc a:hover{
background:#f0f0f0;
border-color:#ccc;
}


/* スマホ最適化 */

@media screen and (max-width:768px){

.catalog{
max-width:100%;
}

button{
padding:10px 14px;
font-size:13px;
}

.prev{left:5px;}
.next{right:5px;}

.toc{
padding:25px 20px;
}

.toc a{
font-size:16px;
padding:16px;
}

}

/* =========================
商品リンクホバー表示
========================= */

.link{
position:absolute;
display:block;
z-index:5;
text-decoration:none;
}

/* ホバー時 */

.link:hover{
background:rgba(246,101,190,0.2);
outline:2px solid rgba(246,101,190,0.7);
}

/* 商品ラベル */

.link::after{
content:"ページを開く";
position:absolute;
bottom:5px;
right:5px;
background:rgba(0,0,0,0.8);
color:#fff;
font-size:12px;
padding:4px 8px;
border-radius:3px;
opacity:0;
transition:.2s;
pointer-events:none;
}

/* ホバー表示 */

.link:hover::after{
opacity:1;
}

/* スマホ用 */

@media (max-width:768px){

.link{
background:rgba(255,255,255,0.08);
}

}