@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&family=Teko:wght@300&family=Zen+Maru+Gothic&display=swap');

/*
"Zen Maru Gothic", "RocknRoll One" and "Teko" 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/Zen+Maru+Gothic
https://fonts.google.com/specimen/RocknRoll+One
https://fonts.google.com/specimen/Teko

Copyright (c) 2022 Material Symbols and Icons - Google Fonts
https://fonts.google.com/icons

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

body{
padding: 20px 0px;
font-family: 'Zen Maru Gothic', serif;
font-size: 100%;
line-height: 150%;
color:#35472e;
}

/*日記のURL用*/
a{
padding:2px;
color:#5b7551;
text-decoration: none;
}
a:hover{
border-radius: 5px;
color:ivory;
background-color:#82a179;
text-decoration: none;
}

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

/*管理画面用*/
h2 {
position: relative;
color: #303030;
margin: 0px 0px 6px 0px;
padding: 0px;
font-size: 105%;
}
h2:after {
content: "";
display: block;
height: 4px;
background: -webkit-linear-gradient(to right, #5b7551, transparent);
background: linear-gradient(to right, #5b7551, transparent);
}

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

/*フォーム記入欄*/
.waku{
font-size: 100%;
margin: 0px 0px 10px 0px;
border-radius: 5px;
border: 2px solid #ccc;
width: 40%;
font-family: 'Zen Maru Gothic', serif;
}
/*スマホ*/
@media screen and (max-width: 768px) {
.waku {
font-size: 1rem;
width:90%;
}}
/*編集用*/
.waku2{
font-size: 100%;
margin: 10px 5px;
border-radius: 5px;
border: 2px solid #ccc;
width: 285px;
font-family: 'Zen Maru Gothic', serif;
}
/*スマホ*/
@media screen and (max-width: 768px) {
.waku2 {
font-size: 1rem;
width:90%;
}}
/*設定用（一行）*/
.waku3{
font-size: 100%;
margin: 2px 5px 8px 5px;
border-radius: 5px;
border: 2px solid #ccc;
width: 285px;
font-family: 'Zen Maru Gothic', serif;
}
/*スマホ*/
@media screen and (max-width: 768px) {
.waku3 {
font-size: 1rem;
width:90%;
}}
/*パスワード用*/
.pass_waku{
margin:10px 3px;
border-radius: 5px;
border: 2px solid #ccc;
width: 120px;}
/*スマホ*/
@media screen and (max-width: 768px) {
.pass_waku {
font-size: 1rem;
}}

/*日記表示用*/
.box{
background-color:#b3dfa6;
margin:15px auto;
padding:10px;
border-radius:10px;
width:50%;
font-size: 90%;
word-break: break-all; /*URLが右端で折り返すようにする*/
}
/*スマホ*/
@media screen and (max-width: 768px) {
.box {
width:90%;
}}

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

/*続きを読むボタン*/
#pattern {
margin: 5px 0px;
padding: 3px 3px 2px 3px;
font-size: 80%;
border-radius: 8px;
border:1px solid #5b7551;
line-height: 120%;
display:inline-block;
cursor: pointer;
}
summary#pattern::-webkit-details-marker {
display: none;
}
/*隠れている文章*/
p.p_details{
border-radius: 8px;
border:1px solid #5b7551;
margin: 0px;
padding: 5px 10px;
}

/*管理画面用*/
.box2{
background-color:#b3dfa6;
border:solid 1px #303030;
margin:0px auto;
padding:10px;
border-radius:10px;
width:300px;
font-size: 90%;
word-break: break-all;
}
/*スマホ*/
@media screen and (max-width: 768px) {
.box2 {
width:90%;
}}
.box2 .setting_box{
margin: 5px 0px 15px 0px;
}

/*ボタン*/
.btn{
transition: background-color 0.6s;
margin:3px;
padding:2px 8px 3px 8px;
background-color:#82a179;
color:white;
border:1px solid #82a179;
border-radius:6px;
line-height:150%;
font-size: 80%;
font-weight: normal;
cursor: pointer;
font-family: 'Zen Maru Gothic', serif;
}
.btn:hover{
background-color:ivory;
color:#82a179;
}

/*削除ボタン*/
.btn2{
transition: background-color 0.6s;
margin:3px;
padding:2px 8px 3px 8px;
background-color:#878787;
color:white;
border:1px solid #878787;
border-radius:6px;
line-height:150%;
font-size: 80%;
font-weight: normal;
cursor: pointer;
font-family: 'Zen Maru Gothic', serif;
}
.btn2:hover{
background-color:ivory;
color:#878787;
}

/*アイコンフォントを使用したメニューボタン*/
.btn_icon{
transition: background-color 0.6s;
margin:3px;
padding:0px 8px;
background-color:#82a179;
color:white;
border:1px solid #82a179;
border-radius: 5px;
font-size: 1.5em;
font-weight: normal;
cursor: pointer;
font-family:Material Symbols Outlined;
}
.btn_icon:hover{
background-color:ivory;
color:#82a179;
}

/*アイコンフォントを使用した小さい編集ボタン*/
.btn_edit{
transition: background-color 0.6s;
margin:0px 0px 0px 2px;
padding:2px 1px 2px 1px;
background-color:#82a179;
color:white;
border:1px solid #82a179;
border-radius:5px;
line-height:100%;
font-size: 60%;
font-weight: normal;
cursor: pointer;
font-family:Material Symbols Outlined;
}
.btn_edit:hover{
background-color:ivory;
color:#82a179;
}

/*プルダウンメニュー*/
select {
font-size: 90%;
color:#35472e;
background-color:white;
margin: 0px;
padding: 1px 1px 0px 1px;
border-radius: 6px;
border: 2px solid #ccc;
font-family: 'Teko', sans-serif;
}

/*フォームボタンの上下に空白を作りたくない場合*/
form.form1{
margin: 0px;
}
/*フォームで改行させない*/
form.form2{
margin: 0px;
padding: 0px;
display:inline;
}
label{
margin:0px 3px 0px 8px;
}