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

@font-face{/* 月のフォント　*/
font-family: "moonfont";
src: url("https://dl.dropboxusercontent.com/scl/fi/3ye7kjhwigvjfxtf9f9y3/Monoji-Regular.ttf?rlkey=am87et692ib0cn2bl3txamoer&st=7o3btizo")
format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face{/* 猫のシルエットフォント　*/
font-family:"cat";
src:url("https://dl.dropboxusercontent.com/scl/fi/h703d58zf0s28nkroq81x/aj-cat.ttf?rlkey=l3hl2ptf3nutelf5cleoj2lg7&st=7iqilmsy");
format("truetype");
font-weight: normal;
font-style: normal;
}

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

a{/* リンクの文字色 */
font-family: "Shippori Mincho", serif;
text-decoration: none;
color: #b9adb9 !important;
}
				
a:hover{/* リンクにカーソルを合わせたときの色 */
font-family: "Shippori Mincho", serif;
color: #253aaa !important;
}

.breadcrumb-item + .breadcrumb-item::before{
color: #f6f6f6;
}


.name{
color: #f6f6f6;
}

h1{/* 日記タイトル　*/
font-family: "Sacramento", cursive;
font-size: 35px;
font-weght: lighter;
text-align: center;
color: #f6f6f6;
}

h1 a{/* 日記タイトル内リンク　*/
font-family: "Sacramento", cursive;
color: #f6f6f6;
text-decoration: none;
}

h1 a:hover{/* 日記タイトル内リンクホバー　*/
font-family: "Sacramento", cursive;
color: #f6f6f6;
text-decoration: none;
}

h1::after{/* 日記タイトル内の月　*/
font-family: "moonfont";
font-size: 65px;
content: 'シ';
position: relative;
z-index: -1;
right: 35px;
top: 3px;
color: #000;
text-shadow: 2px 2px 0 #235aaa;
font-synthesis: none;
}

h1::before{/* 日記タイトル内の猫　*/
font-family: "cat";
font-size: 50px;
content: 'B';
position: relative;
top: 15px;
left: 20px;
z-index: -1;
color: #000;
text-shadow: 2px 2px 0 #235aaa;
}

.info{
font-family: "Sacramento", cursive;
color: #f6f6f6;
text-align: center;
font-size: 20px;
}

.info a{
font-family: "Sacramento", cursive;
color: #b9adb9;
text-align: center;
}

.box{
width: 50%;
padding: 20px;
position: relative;
margin: auto;
}

.simple h2{
font-family: "Sacramento", cursive;
font-size: 25px;
text-align: center;
text-shadow: 1px 1px 0 #f6f6f6;
}

.simple{
margin: 20px auto;
padding: 30px;
width: 90%;
background-color: transparent;
border: 2px solid  #f6f6f6;
position: relative;
color: #111;
}

.simple::after{
content: '';
background-color: rgb(255 255 255 / 0.5);
width: 100%;
height: 100%;
position: absolute;
top: -7px;
left: 7px;
z-index: -1;
}

.box textarea{
background: transparent;
color: #111;
}

h2{
font-size: 15px;
}

.diary p{
font-size: 13px;
text-align: left;
font-size-adjust: 0.5;
}

.diary::after{
content: '';
background-color: rgb(255 255 255 / 0.5);
width: 100%;
height: 100%;
position: absolute;
top: -7px;
left: 7px;
z-index: -1;
}

.np p{
font-size: 10px;
white-space: nowrap;
animation: slideword 12s linear infinite;
}

.np p::before{
content: 'Now playing：';
}

@keyframes slideword{
from{
 transform: translateX(200%);
}
to{
 transform: translateX(-200%);
}
}

.kgm{
width: 50%;
padding: 20px;
position: relative;
margin: auto;
}

.kgm::before{
font-family: cat;
content: 'h';
display: block;
text-align: right;
font-size: 40px;
color: #000;
text-shadow:1px 1px 0px #b9adb9;
position: relative;
top: 20px;
}


.kgm h2::before{
font-family: "Sacramento", cursive;
content: 'Kagami Hayato';
display: block;
text-align: right;
font-size: 25px;
color: #b9adb9;
text-shadow: 1px 1px 0 #111;
}

.kgm .diary{
margin: 20px auto;
padding: 30px;
width: 90%;
background-color: transparent;
border: 2px solid  #b9adb9;
position: relative;
color: #111;
}

.kgm .np{
background:  #b9adb9;
max-width: 30%;
margin: auto;
border-radius: 0.3em;
overflow: hidden;
height: 5%;
}

.knmc{
width: 50%;
padding: 20px;
position: relative;
margin: auto;
}

.knmc::before{
font-family: cat;
content: 'o';
display: block;
text-align: right;
font-size: 40px;
color: #000;
text-shadow:1px 1px 0px #a590af;
position: relative;
top: 20px;
}

.knmc h2::before{
font-family: "Sacramento", cursive;
content: 'Kenmochi Toya';
display: block;
text-align: right;
font-size: 25px;
color: #a590af;
text-shadow: 1px 1px 0 #111;
}

.knmc .diary{
margin: 20px auto;
padding: 30px;
width: 90%;
background-color: transparent;
border: 2px solid  #a590af;
position: relative;
color: #111;
}

.knmc .np{
background:  #a590af;
max-width: 30%;
margin: auto;
border-radius: 0.3em;
overflow: hidden;
height: 5%;
}

.fr{
width: 50%;
padding: 20px;
position: relative;
margin: auto;
}

.fr::before{
font-family: cat;
content: 'e';
display: block;
text-align: right;
font-size: 40px;
color: #000;
text-shadow:1px 1px 0px #fad246;
position: relative;
top: 20px;
}


.fr h2::before{
font-family: "Sacramento", cursive;
content: 'Fura Kanato';
display: block;
text-align: right;
font-size: 25px;
color: #fad246;
text-shadow: 1px 1px 0 #111;
}

.fr .diary{
margin: 20px auto;
padding: 30px;
width: 90%;
background-color: transparent;
border: 2px solid  #fad246;
position: relative;
color: #111;
}

.fr .np{
background:  #fad246;
max-width: 30%;
margin: auto;
border-radius: 0.3em;
overflow: hidden;
height: 5%;
}

.srp{
width: 50%;
padding: 20px;
position: relative;
margin: auto;
}

.srp::before{
font-family: cat;
content: 'I';
display: block;
text-align: right;
font-size: 40px;
color: #000;
text-shadow:1px 1px 0px #dc3c41;
position: relative;
top: 20px;
}


.srp h2::before{
font-family: "Sacramento", cursive;
content: 'Seraph Dazzlegarden';
display: block;
text-align: right;
font-size: 25px;
color: #dc3c41;
text-shadow: 1px 1px 0 #111;
}

.srp .diary{
margin: 20px auto;
padding: 30px;
width: 90%;
background-color: transparent;
border: 2px solid  #dc3c41;
position: relative;
color: #111;
}

.srp .np{
background: #dc3c41;
max-width: 30%;
margin: auto;
border-radius: 0.3em;
overflow: hidden;
height: 5%;
}

.skng{
width: 50%;
padding: 20px;
position: relative;
margin: auto;
}

.skng::before{
font-family: cat;
content: 'i';
display: block;
font-size: 40px;
color: #000;
text-shadow:1px 1px 0px #235aaa;
position: relative;
top: 20px;
left: 20px;
}

.skng h2::before{
font-family: "Sacramento", cursive;
content: 'Shikinagi Akira';
display: block;
text-align: right;
font-size: 25px;
color: #235aaa;
text-shadow: 1px 1px 0 #111;
}

.skng .diary{
margin: 20px auto;
padding: 30px;
width: 90%;
background-color: transparent;
border: 2px solid  #235aaa;
position: relative;
color: #111;
}

.skng .np{
background:  #235aaa;
max-width: 30%;
margin: auto;
border-radius: 0.3em;
overflow: hidden;
height: 5%;
}

.skng .np p{
color: #f6f6f6;
font-size: 10px;
white-space: nowrap;
animation: slideword 12s linear infinite;
}

.title{
font-weight: bold;
}

.title::before{
font-family: "Font Awesome 5 Free";
font-size: 15px;
content: '\f08d';
padding-right: 0.5em;
}

.time{
font-weight: bold;
}

.time::before{
font-family: "Font Awesome 5 Free";
font-size: 15px;
content: '\f017';
padding-right: 0.5em;
}

summary{
display: block;
font-size: 13px;
}

details[open]{
font-size: 13px;
}

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

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


.m_kgm{
background: linear-gradient(transparent 65%, #b9adb9 65%);
}

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

.m_knmc{
background: linear-gradient(transparent 65%, #a590af 65%);
}

.m_fw{
background: linear-gradient(transparent 65%, #bf69f4 65%);
}

.m_kid{
background: linear-gradient(transparent 65%, #4dd7e3 65%);
}

.m_ymo{
background: linear-gradient(transparent 65%, #ac324b 65%);
}

.m_wtri{
background: linear-gradient(transparent 65%, #cd3764 65%);
}

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

.m_srp{
background: linear-gradient(transparent 65%, #dc3c41 65%);
}