@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@300&family=Kanit:wght@300&family=Yusei+Magic&display=swap');

/*
"IBM Plex Sans JP", "Yusei Magic" and "Kanit" are licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL

https://fonts.google.com/specimen/IBM+Plex+Sans+JP
https://fonts.google.com/specimen/Yusei+Magic
https://fonts.google.com/specimen/Kanit
*/

body{
padding: 20px 5px;
font-family: 'IBM Plex Sans JP', sans-serif;
font-size: 100%;
line-height: 150%;
color:#505050;
}

/*日記のURL用*/
a{
color:#7861bb;
text-decoration: none;
}
a:hover{
color:ivory;
background-color:#857aa8;
text-decoration: none;
}

/*日記タイトル*/
h1{
font-size: 250%;
color: #303030;
line-height: 180%;
font-weight: normal;
font-family: 'Yusei Magic', sans-serif;
}
/*スマホ*/
@media screen and (max-width: 768px) {
h1 {
font-size: 200%;
}}

/*中央寄せ*/
.center {
text-align: center;
}

/*日記表示用*/
.box {
padding: 12px 12px 8px 12px;
margin: 17px auto;
background-color:#f8f6ff;
border-left: solid 10px DarkSlateBlue;
box-shadow: 2px 2px 3px 0px #979797;
width: 40%;
word-break: break-all;
}
/*スマホ*/
@media screen and (max-width: 768px) {
.box {
width :80%;
}}

/*日記の日付、番号表示用*/
.diary-date{
color:#636363;
border-top: dashed 1px #5f5580;
margin: 5px 0px 0px 0px;
padding: 5px 0px 0px 0px;
text-align: right;
line-height: 100%;
font-size: 80%;
font-family: 'Kanit', sans-serif;
}

/*ボタン*/
.btn{
transition: background-color 0.6s;
margin:3px;
padding:3px 8px 2px 8px;
background-color:#857aa8;
color:white;
border:1px solid #857aa8;
border-radius:0px;
line-height:150%;
font-size: 80%;
font-weight: normal;
cursor: pointer;
font-family: 'IBM Plex Sans JP', sans-serif;
}
.btn:hover{
background-color:ivory;
color:#857aa8;
}

/*プルダウンメニュー*/
select {
font-size: 80%;
color:#35472e;
background-color:white;
margin: 0px;
border-radius: 0px;
border: 2px solid #ccc;
font-family: 'IBM Plex Sans JP', sans-serif;
}

/*続きを読むボタン*/
#pattern {
transition: background-color 0.6s;
margin:5px 0px;
padding:2px 15px 0px 8px;
font-size:13px;
background-color:#857aa8;
color:ivory;
position: relative;
height:22px;
line-height:22px;
list-style:none;
display:inline-block; /*背景に色がつくのは文字の後ろだけ*/
cursor:pointer;
}
/*右の部分*/
#pattern:after {
content: '';
width:0px;
height:0px;
z-index:1;
position: absolute;
top:0px;
right:0px;
border-bottom: solid 12px #fcf3f9;
border-left: solid 10px transparent;
border-top: solid 12px #fcf3f9;
}
/*カーソルを当てたら色が変わる*/
#pattern:hover {
background-color:#b2a9ce;
color:ivory;
}
summary#pattern::-webkit-details-marker {
display: none;
}
/*隠れている文章*/
p.p_details{
margin: 0px;
padding: 0px;
}