@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Fredericka+the+Great&family=Sawarabi+Gothic&display=swap');

/*
"Sawarabi Gothic", "Dela Gothic One" and "Fredericka the Great" 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/Sawarabi+Gothic
https://fonts.google.com/specimen/Dela+Gothic+One
https://fonts.google.com/specimen/Fredericka+the+Great
*/

body{
padding: 10px 5px;
font-family: 'Sawarabi Gothic', sans-serif;
font-size: 100%;
line-height: 150%;
color:#979797;
}

/*日記のURL用*/
a{
color:#575757;
text-decoration:underline 1px solid #575757;
}
a:hover{
color:ivory;
background-color:#979797;
text-decoration: none;
}

/*日記タイトル*/
h1{
font-size: 500%;
color: #979797;
padding: 50px 0px 20px 0px;
font-weight: normal;
font-family: 'Dela Gothic One', sans-serif;
}
/*スマホ時*/
@media screen and (max-width: 768px) {
h1 {
padding: 30px 0px 20px 0px;
font-size: 300%;
}}

/*右寄せ*/
.right {
text-align: right;
}

/*日記*/
.box {
position: relative;
font-size: 90%;
margin: 0px 0px 45px auto;
background: #eeeeee;
box-shadow: 1px 1px 3px #979797;
padding: 30px 30px;
width: 65%;
word-break: break-all;
}@media screen and (max-width: 768px) {
.box {
font-size:85%;
padding: 25px 20px;
width :80%;
}}
/*日付*/
.box .diary-date{
position: absolute;
font-size:280%;
top: -12px;
left: -10px;
color:#6b6b6b;
font-family: 'Fredericka the Great', serif;
}@media screen and (max-width: 768px) {
.box .diary-date{
font-size:220%;
}}
/*番号*/
.box .diary-number{
position: absolute;
font-size:110%;
bottom:-2px;
right: 5px;
color:#6b6b6b;
font-family: 'Fredericka the Great', serif;
}

/*ボタン*/
.btn{
transition: background-color 0.6s;
margin:0px 2px;
padding:3px 6px 3px 6px;
background-color:#cccccc;
color:ivory;
box-shadow: 1px 1px 2px #979797;
border: 0;
line-height: 120%;
border-radius:0px;
font-size: 80%;
font-weight: normal;
text-decoration: none;
cursor: pointer;
font-family: 'Sawarabi Gothic', sans-serif;
}
.btn:hover{
background-color:#676767;
color:ivory;
}
a.btn{
padding:2px 6px 3px 6px;
}

/*プルダウンメニュー*/
select {
font-size: 75%;
color:#979797;
background-color:white;
margin: 0px;
border-radius: 0px;
border: 2px solid #ccc;
font-family: 'Sawarabi Gothic', sans-serif;
}
/*スクロールバー*/
select::-webkit-scrollbar {
width: 8px;
}
select::-webkit-scrollbar-track {
background-color: white;
}
select::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 5px;
}

/*続きを読むボタン*/
#pattern {
transition: background-color 0.6s;
margin: 5px 0px;
padding: 4px;
font-size: 80%;
border-radius: 0px;
background-color: #979797;
box-shadow: 1px 1px 2px #6d6d6d;
color: ivory;
line-height: 120%;
list-style: none;
display:inline-block; /*背景に色がつくのは文字の後ろだけ*/
cursor: pointer;
}
/*カーソルを当てたら色が変わる*/
#pattern:hover {
background-color:#b3b3b3;
color:ivory;
}
summary#pattern::-webkit-details-marker {
display: none;
}
/*隠れている文章*/
p.p_details{
background-color: #d1d1d1;
color:#818181;
box-shadow: 1px 1px 2px #979797;
margin: 0px 0px 5px 0px;
padding: 5px 10px;
}