/* フォントの読み込み */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Kaku Gothic New', sans-serif;
color: #FFF;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.0em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
width: 100vw;
background-color: #505050;/* ★全体の背景色 */
overflow-x: hidden;
}

.wrap{
max-width: 800px;
min-height: 100vh;
padding: 0 25px;
margin: 50px auto 30px;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 3px double #7eafe8;/* ★リンク文字の下線の色 */
}

a:hover{
color: #7eafe8;/* ★リンク文字をホバーした時の文字色 */
}

/* 強調文 */
strong{
font-weight: 700;
color: #7eafe8;/* ★強調文の文字色 */
}

/* タイトル部分 */
header{
width: 100%;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 80px auto 30px;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 60px;
padding-top: 50px;
border: 1px solid #FFF;/* ★セクションを囲む線 */
position: relative;
}

/* 見出し */
h1,h2,h3,h4{
font-family: 'Cedarville Cursive', 'Zen Kaku Gothic New', cursive;
}

h1{
font-size: 26px;
text-align: center;
padding-bottom: 30px;
}

h2{
font-size: 20px;
padding: 0 10px;
background-color: #505050;/* ★見出しの背景色 */
position: absolute;
top: -20px;
left: -10px;
}

/* リスト */
ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 10% 40px;
row-gap: 30px;
}

ul li{
background-color: #FFF;
width: 275px;
border-left: 5px solid #589ff1;/* ★付箋の線の色 */
box-shadow: 10px 2px 12px 0 rgba(0, 0, 0, 0.2);
}

ul li a{
border-bottom: none;
display: block;
padding: 20px 30px 25px 30px;
}

ul li a:hover{
box-shadow: 10px 16px 12px 0 rgba(0, 0, 0, 0.2);
opacity: 0.6;
}

.title{
font-size: 13px;
color: #262626;
}

.outline{
font-size: 11px;
display: inline-block;
padding-top: 7px;
color: #262626;
}

.genre{
font-size: 11px;
color: gray;
}

/* フッター */
footer{
text-align: center;
margin: 0 auto 60px;
font-size: 11px;
}

/* 740px以下のデバイスでの見え方 */
@media screen and (max-width: 740px){
ul{
margin: 0 5% 40px;
}
}

/* 668px以下のデバイスでの見え方 */
@media screen and (max-width: 663px){
ul{
display: block;
width: 275px;
margin: 0 auto 50px;
}

ul li+li{
margin-top: 30px;
}
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin-top: 0;
padding-top: 25px;
}

}