/* フォントの読み込み */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

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

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

.wrap{
max-width: 600px;
padding: 0;
overflow: hidden;
margin: 0 auto;
}

/* リンク文字 */
a:hover{
color: #cb613a;/* ★リンク文字をホバーした時の文字色 */
border-bottom: 1px solid #cb613a;/* ★リンク文字をホバーした時の下線の色 */
}

/* 強調文 */
strong{
color: #CC103B;/* ★強調文の文字色 */
border-bottom: 2px solid #CC103B;/* ★強調文の下線の色 */
}

/* サイトタイトル */
h1{
font-family: 'Dancing Script', cursive;/* ★タイトルのフォント */
font-size: 40px;/* ★見出しの文字サイズ */
margin-bottom: -20px;
}

/* メインコンテンツ */
.top,main{
width: 100%;
margin: 40px auto 0;
padding: 10px 50px 40px;
text-align: center;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
background-color: #F8F8F8;/* ★コンテンツの背景色 */
background-image : linear-gradient(to right, #f0e0d0, #f0e0d0 4px, transparent 4px, transparent 10px);/* ★点線の色と設定 */
background-size: 10px 1px;/* ★点線の長さと太さ */
background-repeat: repeat-x;
}

.top{
background-position: bottom;
}

main{
margin: 0 auto;
padding: 50px 50px 30px;
background-position: top;
}

.top p{
font-family: 'Dancing Script', cursive;
font-size: 20px;
}

.intro{
padding-bottom: 25px;
}

.intro a{
font-family: 'Dancing Script', cursive;
font-size: 19px;
}    

.ttl+.ttl{
margin-left: 15px;
}

.page,.page a{
font-family: 'Dancing Script', cursive;
font-size: 16px;
text-align: center;
padding-top: 25px;
}

/* 角を丸く切り抜いている部分のスタイリング（ここは触らない方が良いかも） */
.top:before,.top:after,main:before,main:after{
position: absolute;
display: block;
content: "";
border-radius: 100%;
background: #f0e0d0;
left: -30px;
width: 60px;
height: 60px;
}

.top:before,main:before{
top: -30px;
}

.top:after,main:after{
bottom: -30px;
}

.top-inner:before,.top-inner:after,.main-inner:before,.main-inner:after{
position: absolute;
display: block;
content: "";
border-radius: 100%;
background: #f0e0d0;
right: -30px;
width: 60px;
height: 60px;
}

.top-inner:before,.main-inner:before{
top: -30px;
}

.top-inner:after,.main-inner:after{
bottom: -30px;
}

/* カテゴリ絞り込みフォーム */
form{
display: flex;
align-items: center;
margin: 15px auto 0;
width: 250px;
gap: 15px;
vertical-align: top;
position: relative;
}

select,input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: transparent;/* ★フォームの背景色（透明） */
border-radius: 0;
color: #262626;/* ★フォームの文字色 */
border: 1px solid #262626;/* ★フォームの枠線の色 */
width: 30em;
height:30px;
padding: 0 5px;
position: relative;
margin: 0;
font-size: 12px;
}

select:focus{
outline: none;
height:30px;
background: #FFF;/* ★フォームをフォーカスした時の背景色 */
}

form:after{
content: "▼";
position: absolute;
font-size: 10px;
right: 80px;
top: 2px;
width: 10px;
height: 10px;
pointer-events: none;
}

input[type="submit"]{
width: auto;
background-color: #262626;/* ★Filterボタンの背景色 */
border: none;
color: #FFF;/* ★Filterボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
font-family: 'Dancing Script', cursive;
font-size: 13px;
letter-spacing: 0.15em;
line-height: normal;
}

input[type="submit"]:hover{
height:30px;
background-color: #f0e0d0;/* ★Filterボタンをホバーした時の背景色 */
color: #262626;/* ★Filterボタンをホバーした時の文字色 */
}

/* 記事ページ */
.title{
font-size: 16px;
}

.cate{
display: inline-block;
border: 1px solid #70A4BE;/* ★カテゴリーの囲み線の色 */
padding: 0px 4px;
color: #70A4BE;/* ★カテゴリーの文字色 */
font-size: 11px;
}

.cate:empty {
display: none;
}

.date{
padding-top: 10px;
font-size: 11px;
}

.content{
width: 100%;
margin: 40px auto 0;
line-height: 1.8em;
text-align: left
}

.content img{
max-width: 100%;
height: auto;
margin-bottom: 5px;
}

.content a{
border: none;
}

/* フッター */
footer{
text-align: center;
margin: 50px auto 30px;
font-size: 14px;
width: 100%;
font-family: 'Dancing Script', cursive;
}

.back{
font-family: 'Dancing Script', cursive;
font-size: 14px;
}

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

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

.top{
margin-top: 0;
}

main{
padding: 50px 30px 30px;
}

h1{
font-size: 40px;
margin-bottom: -20px;
}

form{
display: flex;
align-items: center;
margin: 15px auto 0;
width: 220px;
gap: 15px;
vertical-align:baseline;
position: relative;
}

select{
margin-bottom: 0;
}
}