@charset "UTF-8";

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

@font-face {
  font-family: "mainfont";
  src: url("https://dl.dropboxusercontent.com/scl/fi/45krwk5061w3yhi6lez20/MPLUSRounded1c-Medium.ttf?rlkey=lgbm3rqhu9d33r9u7u2fvvlrh&st=od6wyexr&") format("truetype");
}

@font-face {
  font-family: "main_kid";
  src: url("https://dl.dropboxusercontent.com/scl/fi/j5ems2sscqvxwkx1zmt9x/KiwiMaru-Medium.ttf?rlkey=7x9huks4klq654026q7wuwz2l&st=iizudo8b&") format("truetype");
}

@font-face {
  font-family: "main_kgm";
  src: url("https://dl.dropboxusercontent.com/scl/fi/j5ems2sscqvxwkx1zmt9x/KiwiMaru-Medium.ttf?rlkey=7x9huks4klq654026q7wuwz2l&st=iizudo8b&") format("truetype");
}

@font-face {
  font-family: "name_kid";
  src: url("https://dl.dropboxusercontent.com/scl/fi/dlh4fkfen8enww11qpyg2/ShadowsIntoLight-Regular.ttf?rlkey=km33ekfs2piy8w6z2lseuyw9j&st=r6tv9yyo&") format("truetype");
}

@font-face {
  font-family: "name_kgm";
  src: url("https://dl.dropboxusercontent.com/scl/fi/dlh4fkfen8enww11qpyg2/ShadowsIntoLight-Regular.ttf?rlkey=km33ekfs2piy8w6z2lseuyw9j&st=r6tv9yyo&") format("truetype");
}

@font-face {
  font-family: "h2";
  src: url("https://dl.dropboxusercontent.com/scl/fi/dlh4fkfen8enww11qpyg2/ShadowsIntoLight-Regular.ttf?rlkey=km33ekfs2piy8w6z2lseuyw9j&st=r6tv9yyo&") format("truetype");
}

@font-face {
  font-family: "Moon";
  src: url("https://dl.dropboxusercontent.com/scl/fi/vb009vz3z8iae0mx330cp/LithunoaDingbats.ttf?rlkey=ierwq4gmfuqktvoph4x86bq6q&st=wd6k46f6&") format('truetype');
}

@font-face {
  font-family: "frame";
  src: url("https://dl.dropboxusercontent.com/scl/fi/qfzv3uhf9fltmzyraljhi/Ornaments-Salad.otf?rlkey=1bo9rj4rn229g2s3u1953p2lo&st=7t5hjdxl&") format("opentype");
}

*:not(.title) {
  font-family: 'mainfont', serif !important;
}

body {
  width: 400px;
  margin: 50px auto;
  background: linear-gradient(180deg, #131b2e 0%, #3d4a7c 100%) fixed; 
  font-family: 'mainfont', serif;
  color: #ffffff;
}

.main_title {
  font-family: "Moon", sans-serif !important;
  display: inline-block;
  font-size: 8.0em;
  color: transparent;
  background: linear-gradient(to bottom, #153dff, #bcf3ff);
  -webkit-background-clip: text;
  background-clip: text;
}

.tittle_km {
  position: relative;
  display: block; 
  text-align: center;
  margin: -20px auto 20px; 
  padding: 0;
}

.tittle_km .cloud-bg {
  font-family: "Moon" !important;
  font-size: 15em;
  color: #f0f8ff;
  opacity: 0.2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.tittle_km .cloud-text {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-family: 'mainfont', sans-serif !important;
  font-size: 1.8em;
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  white-space: nowrap;
  transform: rotate(-5deg); 
  padding: 10px 0; 
}

.h1 {
  display: inline-block;
  font-family: "h2", sans-serif !important;
  font-size: 10px; 
  color: transparent; 
  position: relative;
  margin: -5px 10px;
  width: 1.5em; 
  text-align: center;
  vertical-align: middle;
}

.h1::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #f0f8ff; 
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: visible; 
}

/* info (https://starry04.nieru.net/131/2) */
a[href*="/131/2"] .h1::before {
  content: "\f2bb"; 
}

/* template (https://starry04.nieru.net/131/3,4) */
a[href*="/131/3,4"] .h1::before {
  content: "\f02d"; 
}

/* bookshelf (https://starry04.nieru.net/131/5) */
a[href*="/131/5"] .h1::before {
  content: "\e0bb"; 
}

/* mail (https://mbbs.tv/u/read.php?id=starry0eyed&tid=415) */
a[href*="starry0eyed"] .h1::before {
  content: "\f0e0"; 
}


/* 右から左に流れるテキスト */

.music p::before {
  content: '\f7a6';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; 
  margin-right: 8px;   
  color: #708090;       
  display: inline-block;    
}

.music {
  margin: 0 1em 3em;
  border-radius: 2.0em;
  background: #3e5485;
  overflow: hidden;
  white-space: nowrap;
  border: 1.5px solid #33466c;
  height: 2.5em;
  display: flex;
  align-items: center;
}

.music p {
  display: inline-block;
  padding-left: 100%;
  margin: 0;
  font-size: 1em;
  color: #808080;
  animation: flowing 10s linear infinite; 
}

@keyframes flowing {
  0% { transform: translateX(0); }
  100% { transform: translateX(-200%); }
}

/* リンクの下線消す */
a {
  text-decoration: none;
}

.bokasi {
  color: #708090;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
  filter: blur(5px);
}

/* テキストエリア */

textarea {
   width:80%;
   height:50px;
   border-radius: 10px;
   border: 0.7px solid #000000;
   display: block; 
   margin: 0 auto;
   color: #708090; 
   background-color: #ffffff;
}

form textarea {
  width: auto;
  height: auto;
  min-height: initial;
}

/* マーカー */

.kid_mk {
  background-image: linear-gradient(0deg, #4dd7e380 0.5em, transparent 0.5em);
}

.kgm_mk {
  background-image: linear-gradient(0deg, #B9ADB980 0.5em, transparent 0.5em);
}

.skng_mk {
  background-image: linear-gradient(0deg, #235aaa 0.5em, transparent 0.5em);
}

.ky_mk {
  background-image: linear-gradient(0deg, #5a5faa 0.5em, transparent 0.5em);
}

/* シンプル */

.box3 {
    width: 80%; 
    padding: 0.5em 1em;
    margin: 2em auto;
    color: #f0f8ff; 
    background: -webkit-repeating-linear-gradient(-45deg, #33466C, #33466C 3px, #2a3a5a 3px, #2a3a5a 7px);
    background: repeating-linear-gradient(-45deg, #33466C, #33466C 3px, #2a3a5a 3px, #2a3a5a 7px);
    border-radius: 15px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.box3 p {
    margin: 0; 
    padding: 0;
}

/* メイン */
.main_kid, .main_kgm {
  position: relative;
  width: 80%; 
  margin: 40px auto; 
  padding: 40px 20px 30px;  
  border-radius: 10px;
  background-color: #33466C;
  box-shadow: 0 0 0 10px #33466C, 0 10px 20px rgba(0,0,0,0.7);
  box-sizing: border-box;
  z-index: 1;
}

/* 個別 */
.main_kid { border: 5px solid #70bcff; }
.main_kgm { border: 5px solid #a9a5b1; }


.main_kid::before, .main_kgm::before {
  content: "l";
  font-family: "frame" !important; /* Ornaments Salad */
  font-size: 4.0em;
  position: absolute;
  top: 5px; 
  left: 5px; 
  z-index: 5;
  pointer-events: none;
  line-height: 1;
}
.main_kid::before { color: #70bcff; }
.main_kgm::before { color: #a9a5b1; }


.bottom-deco {
  position: absolute;
  bottom: 5px; 
  right: 5px;  
  font-family: "frame" !important;
  font-size: 4.0em;
  z-index: 5;
  pointer-events: none;
  line-height: 1;
}
.main_kid .bottom-deco { color: #70bcff !important; }
.main_kgm .bottom-deco { color: #a9a5b1 !important; }



.main_kid::after, .main_kgm::after {
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 10;
  line-height: 1;
  font-size: 3.0em;
}

.main_kid::after {
  content: "Kaida Haru";
  font-family: 'name_kid', sans-serif !important;
  color: #70bcff;
}

.main_kgm::after {
  content: "Kagami Hayato";
  font-family: 'name_kgm', sans-serif !important;
  color: #a9a5b1;
}

.main_kid p, .main_kgm p {
  position: relative;
  z-index: 2;
  margin: 0;
}

/* タイムライン */

.tl, .tlkgm {
  margin: 1.5em auto; 
  position: relative;
  padding: 1em; 
  background: #33466c; 
  color: #ffffff;      
  font-weight: bold;
  text-align: center;
  border: none; 
  border-radius: 40px; 
  width: 78%; 
  height: 110px;  
  overflow-y: auto;    
  display: block;      
  line-height: 1.4;  
}


.tl [class*='twitter']::before, .tl [class*='comm']::before, 
.tl [class*='rtp']::before, .tl [class*='lov']::before, .tl [class*='share']::before,
.tlkgm [class*='twitter']::before, .tlkgm [class*='comm']::before, 
.tlkgm [class*='rtp']::before, .tlkgm [class*='lov']::before, .tlkgm [class*='share']::before {
  display: inline-block; 
  margin: 2px 5px;  
  font-size: 12px;  
  vertical-align: middle;
}


.twitterhr::before, .twitterk::before {
  font-size: 26px !important; 
  margin-bottom: 5px;    
}


.twitterhr::before, .comm::before, .rtp::before, .lov::before, .share::before {
  color: #4dd7e3;
}
.twitterk::before, .commk::before, .rtpk::before, .lovk::before, .sharek::before {
  color: #b9adb9;
}


.twitterhr::before, .twitterk::before { content: '\f081'; font-family: 'Font Awesome 6 Brands'; }
.comm::before, .commk::before { content: '\f075'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.rtp::before, .rtpk::before { content: '\f363'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.lov::before, .lovk::before { content: '\f004'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.share::before, .sharek::before { content: '\e09a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }


/* アコーディオン */

details summary.kid::-webkit-details-marker {
    display: none;
}

summary.kid {
    display: block;
    cursor: pointer;
    outline: none;
    list-style: none;
    background-color: #33466C; 
    transition: background-color 1.2s ease, color 0.6s ease; 
}

details.kid[open] {
    background-color: #b0daff; 
    color: #605e60;
    display: block;
    margin: 6px;
    border-radius: 6px;
    padding: 1rem;
    opacity: 1;
    transition: background-color 1.2s ease;
}

summary.kid::before {
    content: '\f131';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin: 0.8em 0 0;
    color: #70bcff; 
    transition: color 0.6s ease; 
}

details.kid[open] summary.kid::before {
    content: '\f130';
    color: #70bcff; 
}

details.kid[open] > summary.kid {
    color: #605e60;
    background-color: #b0daff; 
}


details summary.kgm::-webkit-details-marker {
    display: none;
}

summary.kgm {
    display: block;
    cursor: pointer;
    outline: none;
    list-style: none;
    background-color: #33466C; 
    transition: background-color 1.2s ease, color 0.6s ease; 
}

details.kgm[open] {
    background-color: #a9a5b1; 
    color: #605e60;
    display: block;
    margin: 6px;
    border-radius: 6px;
    padding: 1rem;
    opacity: 1;
    transition: background-color 1.2s ease;
}

summary.kgm::before {
    content: '\f131';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin: 0.8em 0 0;
    color: #5e5e6b; 
    transition: color 0.6s ease;
}

details.kgm[open] summary.kgm::before {
    content: '\f130';
    color: #5e5e6b; 
}

details.kgm[open] > summary.kgm {
    color: #605e60;
    background-color: #a9a5b1; 
}

/* 吹き出し */
.fkds {
  background: #ffffff;
  line-height: 1.4;
  resize: vertical;
  width: 80%;
  height: 70px;  
  margin: auto;
  padding: 0 1px 15px 1px;
  overflow-y: auto;  
  border-radius: 10px;
  max-height: 100px; /* 必要に応じて最大高さを設定 */
  position: relative;
  box-sizing: border-box;
}

/* 吹き出し共通 */
.fkds .sph {
  position: relative;
  display: inline-block;
  max-width: 80%;
  max-height: 100%;
  margin: 5px 10px 6px;
  padding: 9px 14px;
  border-radius: 19px;
  overflow-wrap: break-word;
  clear: both;
  box-sizing: border-box; 
}

/* しっぽあり */
.fkds .sph::after {
  position: absolute;
  content: "";
  width: 17px;
  height: 17px;
  bottom: 0;
}

/*ふきだし左*/
.fkds .sph.kidL {
    float: left;
    background: #4dd7e3;
}

.fkds .sph.kgmL {
    float: left;
    background: #b9adb9;
}

/* しっぽ左 */
.fkds .sph.kidL::after {
    left: -5px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #4dd7e3 inset; 
}

.fkds .sph.kgmL::after {
    left: -5px;
    border-radius: 0px 0  17px 0px/ 0px 0 13px 0; 
    box-shadow: -14px 2px 0 -3px #b9adb9 inset; 
}

/* ふきだし右 */

.fkds .sph.kidR {
    float: right;
    background: #4dd7e3;
}

.fkds .sph.kgmR {
    float: right;
    background: #b9adb9;
}


/* ふきだし右 */
.fkds .sph.kidR::after {
    right: -5px;
    border-radius: 0px 0 0 17px / 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #4dd7e3 inset;
    color: #fff;
}

.fkds .sph.kgmR::after {
    right: -5px;
    border-radius: 0px 0 0 17px/ 0px 0 0 13px; 
    box-shadow: 14px 2px 0 -3px #b9adb9 inset; 
    color: #fff;
}


body, a, p, span, div {
    color: #e0e6ed !important; 
}


a {
    color: #b0c4de !important; 
    text-decoration: none;
}

a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}