/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Philosopher&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* 全体設定 */
*{
font-family: 'Noto Sans JP', serif;
color: #454545;/* ★全体の文字色 */
font-size: 12pt;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 1.9em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

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

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

.flex-wrap{
width: 100%;
display: flex;
gap: 5%;
}

.flex-item{
width: 30%;
}

/* リンク文字 */
a{
transition: 0.2s;
text-decoration: underline;
text-decoration-color: #F08390;/* ★リンク文字の下線の色 */
display: inline-block;
text-underline-offset: 3px;
}

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

.section a+a{
margin-left: 6px;
}

/* 強調文 */
strong{
font-weight: 700;
border-bottom: 2px solid #454545;/* ★強調文の下線の色 */
}

/* ヘッダーメニュー */
header{
width: 100%;
text-align: center;
margin-bottom: 60px;
}

.nav{
width: 100%;
margin-top: 20px;
display: none;
justify-content: center;
gap: 15px;
}

.nav li a{
font-family: 'Philosopher', serif;
font-size: 14px;
transition: 0.2s;
text-decoration: none;
color: #F08390;/* ★ヘッダーメニューの文字色 */
}

.nav li a:hover{
color: #454545;/* ★ヘッダーメニューをホバーした時の文字色 */
}

/* サイトタイトル */
header img{
width: 90px;/* ★TOP画像の横幅 */
height: 90px;/* ★TOP画像の高さ */
border-radius: 99%;
border: 3px solid #FFF;/* ★TOP画像の枠線の色 */
}

h1{
font-family: 'Philosopher', '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;
font-size: 22px;
padding-top: 10px;
}

.en{
font-family: 'Philosopher', serif;
font-size: 11px;
width: 100%;
}

/* 見出し */
h2,h3,h4{
font-family: 'Philosopher', 'Noto Sans JP', sans-serif;
}

h2{
font-size: 18px;
color: #F08390;/* ★h2見出しの文字色 */
}

h3{
font-size: 14px;
background-color: #F5F5F5;/* ★h3見出しの背景色 */
width: fit-content;
line-height: 1.6em;
padding: 0 8px;
margin: 25px 0 5px;
}

h4{
font-size: 13px;
font-weight: 700;
}

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

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 60px;
}

.long{
width: 100%;
}

.long+.long{
margin-top: 20px;
}

.caption{
color: #8D8D8D;/* ★長編作品の補足説明文の文字色 */
}

.caption:before {
content: "";
display: inline-block;
width: 0;
height: 0;
margin: 0 0.4em 0 0;
border: 4px solid transparent;
border-right: 0 solid transparent;
border-left: 6px solid #8D8D8D;/* ★補足説明の横の三角の色 */
}

/* 更新履歴 */
.update{
width: fit-content;
margin: 30px auto 0;
background-color: #F5F5F5;/* ★更新履歴の背景色 */
padding: 15px 30px 20px;
text-align: left;
}

.update h2{
font-size: 14px;
text-align: center;
}

/* ランキング */
.rank{
width: 100%;
margin: 10px auto 0;
}



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

/* ブログ */
.memo-wrap{
max-width: 500px;
padding-top: 30px;
}

.memo-wrap h1{
width: 100%;
margin: 0 auto 40px;
text-align: center;
}

.memo{
width: 100%;
margin-bottom: 40px;
padding: 25px 40px;
background-color: #F5F5F5;/* ★ブログ記事の背景色 */
}

.memo img{
display: block;
width: 40px;
border-radius: 99%;
margin: 0 auto 10px;
border: 2px solid #FFF;
}

.memo .date{
font-family: 'Philosopher', serif;
font-size: 13px;
text-align: center;
}

.memo .text{
padding-top: 20px;
}

.memo .title{
font-size: 13px;
text-align: center;
}

.more{
text-align: center;
}

.more a{
font-family: 'Philosopher', serif;
font-size: 15px;
transition: 0.2s;
text-decoration: none;
color: #F08390;/* ★ブログのリンク文字色 */
}

.more a:hover{
color: #454545;/* ★ブログのリンクをホバーした時の文字色 */
}

.page{
font-family: 'Philosopher', serif;
color: rgba(0,0,0,0.5);
font-size: 14px;
text-align: center;
padding-bottom: 40px;
}

/* 768px以下のデバイスでの見え方 */
@media screen and (max-width: 768px) {
.wrap{
padding: 60px 10% 0;
}

.flex-wrap{
display: block;
}

.flex-item{
width: 100%;
}

header img{
width: 110px;
height: 110px;
}

h1{
font-size: 25px;
}

.nav{
display: flex;
}

_::-webkit-full-page-media, _:future, :root textarea{
margin-bottom: -20px;
}
}