@charset "UTF-8";

/*全体のフォント*/
@import
url('https://dl.dropboxusercontent.com/scl/fi/pie2gaon967hek9lcoslw/lemon.css?rlkey=80pxovyasnktho45qfq7z6w6d&st=nf4dwc9j');

/*英語のフォント*/
@import
url('https://dl.dropboxusercontent.com/scl/fi/64rhrmnbvpwcyfazml25c/fonteigo.css?rlkey=zorrlxgvlddsmzk0rbod3by9a&st=vu8z3340');


/*コーヒーのフォント*/
@import
url('https://dl.dropboxusercontent.com/scl/fi/ja6o9z2dgwg2lbhegpy24/coffee.css?rlkey=gbvs921d99rfkw2ia53zj4he3&st=u1bpjb4t');


/*ハートのフォント*/
@import
url('https://dl.dropboxusercontent.com/scl/fi/78wj4jxqw1xmyk5bdkgnq/heart.css?rlkey=n3hgtv6q6xf2iejhvxah93ck9&st=o2hw54w6');




/*全体*/
*{
font-family: 'lemon';
text-align: center
color: #76573c;
}

a {
  color: #bea493;        /* 押す前の色 */
}

a:visited {
  color: #6a8a93;       /* 押したあとの色 */
}

body {
min-height: 100vh;
font-size: 11.5px;
text-align: center;
  background: #ede4e1;
color: #76573c;
}

hr { border: none; }


/*ボタン*/
.c-btn.reverse {
  background: #cfa97e;        /* ミルクティー系ベージュ */
  color: #fff;

  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;

  border: 1.5px solid #cfa97e;
  border-radius: 999px;

  display: inline-block;
  text-decoration: none;

  transition: all .3s ease;
}

/* ホバーでふわっと反転 */
.c-btn.reverse:hover {
  background: #fff;
  color: #cfa97e;
}
/*タイトル絵文字1*/
.ts{ 
font-size: 40px; 
font-family: coffee;
color: #000000;
}

/*テキストエリア*/
textarea { background-color: #ffffff; color: #575757; resize: none; width:300px; height:100px; }

/*横並び*/
.field { display: flex; justify-content: center; gap: 12px; }


/*タイトル*/
.diary-header {
  height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diary-title {
  font-family: 'Sacramento', cursive;
  font-size: 34px;
  letter-spacing: 0.08em;
  color: #c58f8f;
  position: relative;
  transform: rotate(-1deg); /* ほんのり手書き感 */
}

/* やさしいドット装飾 */
.diary-title::before,
.diary-title::after {
  content: "• • • • •";
  display: block;
  font-size: 12px;
  color: #e8bcbc;
  margin: 8px 0;
  letter-spacing: 6px;
}
/*上の飾り（共通）*/
.extra::before { font-family:'coffee'; content:"z"; position: absolute; /*.khnbox1-notebook::before （これでその位置から動かなくなる） */ right: 35px; top: -48px; /* （位置） */ font-size: 50px; color: #875C44; }

.extra::after { font-family:'heart'; content:"m"; position: absolute; /*.khnbox1-notebook::before （これでその位置から動かなくなる） */ right: 2px; top: -53px; /* （位置） */ font-size: 50px; color: #f58e7d; }

/*基本のノート風ボックス（名前以外共通）*/
.khnbox1-notebook {
  margin: 20px; /* 外側余白 */
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: #ffffff; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* 上部のドット罫線（名前以外共通）*/
.khnbox1-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  left: 1em; /* 左余白 */
  right: 1em; /* 右余白 */
  border-top: dotted 10px #ede4e1; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}

/*名前（おりばー）*/
.khnbox1-notebook::after { font-family:'fonteigo'; content:"Oliver Evans"; position: absolute; /*.khnbox1-notebook::before （これでその位置から動かなくなる） */ left: 10px; bottom: 10px; /* （位置） */ font-size: 20px; color: #BCC37E;
}


/*基本のノート風ボックス（名前以外共通）*/
.khnbox2-notebook {
  margin: 20px; /* 外側余白 */
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: #ffffff; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* 上部のドット罫線（名前以外共通）*/
.khnbox2-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  left: 1em; /* 左余白 */
  right: 1em; /* 右余白 */
  border-top: dotted 10px #ede4e1; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}

/*名前（れおす）*/
.khnbox2-notebook::after { font-family:'fonteigo'; content:"Leos Vincent"; position: absolute; /*.khnbox1-notebook::before （これでその位置から動かなくなる） */ left: 10px; bottom: 10px; /* （位置） */ font-size: 20px; color: #234A87;
}


/*基本のノート風ボックス（名前以外共通）*/
.khnbox3-notebook {
  margin: 20px; /* 外側余白 */
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: #ffffff; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* 上部のドット罫線（名前以外共通）*/
.khnbox3-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  left: 1em; /* 左余白 */
  right: 1em; /* 右余白 */
  border-top: dotted 10px #ede4e1; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}

/*名前（かいせい）*/
.khnbox3-notebook::after { font-family:'fonteigo'; content:"Kaisei"; position: absolute; /*.khnbox1-notebook::before （これでその位置から動かなくなる） */ left: 10px; bottom: 10px; /* （位置） */ font-size: 20px; color: #0C6F72;
}


/*基本のノート風ボックス（名前以外共通）*/
.khnbox4-notebook {
  margin: 20px; /* 外側余白 */
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: #ffffff; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* 上部のドット罫線（名前以外共通）*/
.khnbox4-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  left: 1em; /* 左余白 */
  right: 1em; /* 右余白 */
  border-top: dotted 10px #ede4e1; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}

/*名前（むらくも）*/
.khnbox4-notebook::after { font-family:'fonteigo'; content:"Murakumo Kagetsu"; position: absolute; /*.khnbox1-notebook::before （これでその位置から動かなくなる） */ left: 10px; bottom: 10px; /* （位置） */ font-size: 20px; color: #6EB487;
}


/*基本のノート風ボックス（名前以外共通）*/
.khnbox5-notebook {
  margin: 20px; /* 外側余白 */
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: #ffffff; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* 上部のドット罫線（名前以外共通）*/
.khnbox5-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  left: 1em; /* 左余白 */
  right: 1em; /* 右余白 */
  border-top: dotted 10px #ede4e1; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}

/*名前（さかき）*/
.khnbox5-notebook::after { font-family:'fonteigo'; content:"Sakaki Ness"; position: absolute; /*.khnbox1-notebook::before （これでその位置から動かなくなる） */ left: 10px; bottom: 10px; /* （位置） */ font-size: 20px; color: #C2AAE6;
}


/*基本のノート風ボックス（名前以外共通）*/
.khnbox1-notebook {
  margin: 20px; /* 外側余白 */
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: #ffffff; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* 上部のドット罫線（名前以外共通）*/
.khnbox1-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  left: 1em; /* 左余白 */
  right: 1em; /* 右余白 */
  border-top: dotted 10px #ede4e1; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}

/*名前（予備枠）*/
.khnbox1-notebook::after { font-family:'fonteigo'; content:"Oliver Evans"; position: absolute; /*.khnbox1-notebook::before （これでその位置から動かなくなる） */ left: 10px; bottom: 10px; /* （位置） */ font-size: 20px; color: #BCC37E;
}


/*基本のノート風ボックス（その他）*/
.khn-notebook {
  margin: 20px; /* 外側余白 */
  padding: 3em 2em 2em; /* 内側余白（上・左右・下） */
  position: relative; /* 疑似要素の基準 */
  background: #ffffff; /* 背景色 */
  max-width: 800px; /* 最大幅 */
}

/* 上部のドット罫線（名前以外共通）*/
.khn-notebook::before {
  content: '';
  position: absolute;
  top: 0.5em; /* 上位置 */
  left: 1em; /* 左余白 */
  right: 1em; /* 右余白 */
  border-top: dotted 10px #ede4e1; /* ドット線 */
  pointer-events: none; /* クリック透過 */
}


/*音楽用*/
.music-box {
  margin: 16px auto;   /* 中央寄せに変更 */
  width: 280px;        /* ← 好きな幅に */
  background: #e4f2f3;
  border: 1px solid #c7e1e3;
  border-radius: 16px;
  padding: 10px 16px 10px 48px;
  position: relative;
 

  box-shadow: 0 6px 14px rgba(0,0,0,0.08); /* ← ふわっと浮かせる */
}

  .music-box::before {
  content: "♪";
  position: absolute;

  left: 16px;        /* 横位置はそのまま */
  top: 50%;          /* ← 真ん中基準にする */
  transform: translateY(-50%); /* ← 自分の高さ分戻す */

  width: 32px;
  height: 32px;
  background: #5faaaf;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.music-text {
  white-space: nowrap;
  overflow: hidden;
}

.music-text span {
padding-right: 40px;
  display: inline-block;
  animation: scrollText 13s linear infinite;
  min-width: 300px;
}

/* 画面の右外 → 左外まで移動 */
@keyframes scrollText {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}




/*折りたたみ*/
.arak summary { font-family: 'lemon', sans-serif; display: block; font-size: 11px; } .arak summary::-webkit-details-marker { display: none; } .arak details { font-family: 'lemon', sans-serif; border: none; font-size: 11px; margin: 0px; transition: all 1.0s; } .arak summary::before { font-family:"coffee"; content: "K"; font-size:25px; color: #5faaaf; padding:10px 10px 10px 10px; transition: all 0.5s; } .arak details[open] { color: #FFFFFF; background-color: rgba(95,170,175,0.5); border-radius: 10px; color: #ffffff; font-size :11px; margin:20px 0px; padding:10px; transition: all 1.0s; } .arak details[open] summary::before { font-family:"coffee"; content:"K"; color: #FFF; font-size: 25px; padding:10px; }


/*マーカー*/

.marker-olv { background-color:rgba(188,195,126,0.8);
color: #ffffff;
 }


.marker-los { background-color:rgba(35,74,134,0.8);
color: #ffffff;
 }

.marker-mrkm { background-color:rgba(110,180,135,0.8);

color: #ffffff;
 }

.marker-kisi { background-color:rgba(12,111,114,0.8);

color: #ffffff;
 }


/*話題区切る*/
.wadai{
font-size: 20px; 
font-family: heart;
color: #f58e7d;
}

/*タイトルとかの文字系*/

.tl{
font-family: 'Sacramento', cursive;
color: #c58f8f;
font-size: 25px; 
}