@charset "UTF-8";
@import url('https://use.fontawesome.com/releases/v7.0.1/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Charmonman&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');

@font-face{
font-family: 'spring';
src: url('https://dl.dropboxusercontent.com/scl/fi/b27mvmtawl93lvu44ylsi/Spring_Romance.otf?rlkey=q2ou2s4xktl27jttt5nukktuk&st=cxhlj8xf') format('opentype');
font-weight: normal;
font-style: normal;
}

html{
font-synthesis: none;
}

h1{
font-family: 'Charmonman', cursive;
font-size: 30px;
text-align: center;
}

h1 a{
text-decoration: none;
color: #333;
}

h1 .sp::before{
font-family: 'spring';
content: 's';
font-size: 65px;
color: #821550;
position: relative;
display: inline-block;
right: 15px;
transform: rotate(10deg);
}

body{
font-family: "Hina Mincho", serif;
font-size: 10px;
color: #333;
background: #fffdfa;/* ★全体の背景色 */		
background-image: linear-gradient(#F2F2F2 1px, transparent 0),linear-gradient(90deg, #F2F2F2 1px, transparent 0);/* ★背景のチェック柄の色 */
background-size: 16px 16px; /* ★チェック柄の間隔 */
overflow-x: hidden;
}

a{
text-decoration: none;
color: #235aaa;
}

a:hover{
text-decoration: none;
color: #821550;
}

.name{
color: #333;
}

h2{
font-family: 'Charmonman', cursive;
text-align: center;
font-size: 12px;
}

.box{
width: 80%;
margin: auto;
font-size: 10px;
}

textarea{
background: #fffdfa;
color: #333;
}

.box .sp::before{
font-family: 'spring';
content: 'r';
font-size: 50px;
color: #821550;
position: relative;
display: inline-block;
left: 15px;
transform: rotate(60deg);
}

.diary{
width: 80%;
margin: auto;
font-size: 10px;
}

summary{
display: block;
}

summary::before{
font-family: "Font Awesome 5 Free";
font-size: 9px;
content: '\f023';
padding-right: 0.5em;
}

details[open] summary::before{
font-family: "Font Awesome 5 Free";
font-size: 9px;
content: '\f3c1';
padding-right: 0.5em;
}

.np{
animation: slide 5s linear infinite;
}

.np::before{
font-family: "Font Awesome 5 Free";
font-size: 9px;
content: '\f001';
padding-right: 0.5em;
display: inline-block;
animation: fuwafuwa 3s linear infinite;
}

@keyframes fuwafuwa{
0%, 100%{transform: translateY(0%);}
50%{transform: translateY(-20%);}
}


.akr .sp::before{
font-family: 'spring';
content: '1';
font-size: 50px;
color: #235AAA;
position: relative;
display: inline-block;
left: 15px;
transform: rotate(90deg);
}

.akr .btw::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 10px;
content: '\f15b  \f15b  \f15b';
color: #235aaa;
display: block;
text-align: center;
}

.akr .np::before{
color: #235aaa;
}

.akr summary::before{
color: #235aaa;
}

.akr details[open] summary::before{
color: #235aaa;
}

.akr .t_title::before{
color: #235aaa;
}

.mh_akr{
background: linear-gradient(transparent 50%, #235aaa 50%);
}

.m_akr{
background: #235aaa;
color: #f6f6f6;
}

.knt .sp::before{
font-family: 'spring';
content: '1';
font-size: 50px;
color: #fad246;
position: relative;
display: inline-block;
left: 15px;
transform: rotate(90deg);
}

.knt .btw::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 10px;
content: '\f818  \f818  \f818';
color: #fad246;
display: block;
text-align: center;
}

.knt .np::before{
color: #fad246;
}

.knt summary::before{
color: #fad246;
}

.knt details[open] summary::before{
color: #fad246;
}

.knt .t_title::before{
color: #fad246;
}

.mh_knt{
background: linear-gradient(transparent 50%, #fad246 50%);
}

.m_knt{
background: #fad246;
}


.hbr .sp::before{
font-family: 'spring';
content: '1';
font-size: 50px;
color: #CD3764;
position: relative;
display: inline-block;
left: 15px;
transform: rotate(90deg);
}

.hbr .btw::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 10px;
content: '\f3a5  \f3a5  \f3a5';
color: #CD3764;
display: block;
text-align: center;
}

.hbr .np::before{
color: #CD3764;
}

.hbr summary::before{
color: #CD3764;
}

.hbr details[open] summary::before{
color: #CD3764;
}

.hbr .t_title::before{
color: #CD3764;
}

.mh_hbr{
background: linear-gradient(transparent 50%, #CD3764 50%);
}

.m_hbr{
background: #CD3764;
color: #f6f6f6;
}

.srp .sp::before{
font-family: 'spring';
content: '1';
font-size: 50px;
color: #DC3C41;
position: relative;
display: inline-block;
left: 15px;
transform: rotate(90deg);
}

.srp .btw::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 10px;
content: '\f3dc  \f3dc  \f3dc';
color: #DC3C41;
display: block;
text-align: center;
}

.srp .np::before{
color: #DC3C41;
}

.srp summary::before{
color: #DC3C41;
}

.srp details[open] summary::before{
color: #DC3C41;
}

.srp .t_title::before{
color: #DC3C41;
}

.mh_srp{
background: linear-gradient(transparent 50%, #DC3C41 50%);
}

.m_srp{
background: #DC3C41;
color: #f6f6f6;
}

.t_title{
font-weight: bold;
}

.t_title::before{
font-family: "Font Awesome 5 Free";
font-size: 9px;
content: '\f305';
padding-right: 0.5em;
}

.em18{
font-size: 18px;
}

.sm8{
font-size: 8px;
}