/* フォントの読み込み */
@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: #262626;
font-size: 1em;
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: #F8F8F8;/* ★全体の背景色 */
background-image: linear-gradient(#F2F2F2 1px, transparent 0),/* ★背景のチェック柄の色 */
linear-gradient(90deg, #F2F2F2 1px, transparent 0);/* ★背景のチェック柄の色 */
background-size: 16px 16px;/* ★チェック柄の間隔 */
overflow-x: hidden;
}

.ID{
    padding: 0 20px;
}

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

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

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

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

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

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

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

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

h1{
font-size: 1.75em;
text-align: center;
padding-bottom: 10px;
}

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

h3{
font-size: 1.25em;
font-weight: bold;
}

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

ul li{
background-color: #FFF;
width: 325px;
border-left: 3px solid #2b95b5;/* ★付箋の線の色 */
box-shadow: 10px 2px 12px 0 rgba(0, 0, 0, 0.03);
}

ul li a{
border-bottom: none;
display: block;
padding: 10px 15px 12px 15px;
}

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

.title{
font-size: 1em;
}

.outline{
font-size: 0.9em;
display: inline-block;
padding-top: 7px;
}

.genre{
font-size: 1em;
color: gray;
}

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

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


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

}

.title{
font-weight: bold;
}