@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Zen+Kurenaido&family=Zen+Maru+Gothic&display=swap');


/*oppフォント*/
.zen-kurenaido-regular {
  font-family: "Zen Kurenaido", sans-serif;
  font-style: normal;
}

/*hwwフォント*/
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-style: normal;
}

/*おなまえフォント*/
.caveat {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-style: normal;
}


.note {
  font-size: 10px;
  line-height: 1.9;

  padding: 2.5em 2.5em;        /* ← 余白を約2倍 */
  background-color: rgba(255, 255, 255, 0.6);

  border-radius: 12px;     /* ← 角丸をはっきり */
}

.note p {
  font-size: 10px;
  line-height: 1.85;
  letter-spacing: 0;
}


html {
  -webkit-text-size-adjust: 100%;
}

 /*oppボックス*/ 
.oppbox {
position: relative;
  max-width: 400px;
  margin: 0 auto;
  padding: 9em 2.5em 2.5em 2.5em;
  color: #000;
  font-family: "Zen Kurenaido", sans-serif !important;
  font-size: 0.85em;
  box-sizing: border-box;
  border-radius: 5px;
  background: #d8e7ee;
  box-shadow: 5px 5px 10px #828b8f, -5px -5px 10px #ffffff;
}

/*oppの本文*/
.oppbox p {
  font-family: "Zen Kurenaido", sans-serif; /* 明示的に指定 */
 font-size: 10px;
  line-height: 24px;
  margin: 0;
  padding: 0;
}

/*opp名前*/
.oppkey {
  position: absolute;
  top: 1.3em;
  right: 20px;       /* 右寄せ */
  padding: 0.8em 0.8em 0.8em 8em; /* 今までのパディング */
  text-align: center;
  font-family: "Caveat", cursive;
  font-size: 1.5em;
  line-height: 1.2;
  font-weight: bold;
  border-radius: 20px;
  background: #d8e7ee;
  box-shadow: inset 5px 5px 10px #828b8f, inset -5px -5px 10px #ffffff;
}


 /*hwwボックス*/ 
.hwwbox {
position: relative;
  max-width: 400px;
  margin: 0 auto;
  padding: 9em 2.5em 2.5em 2.5em;
  color: #000;
  font-family: "Zen Maru Gothic", sans-serif !important;
  font-size: 0.85em;
  box-sizing: border-box;
  border-radius: 5px;
  background: #d8e7ee;
  box-shadow: 5px 5px 0px #828b8f, -5px -5px 0px #ffffff;
}

/*hwwの本文*/
.hwwbox p {
  font-family: "Zen Maru Gothic", sans-serif; /* 明示的に指定 */
  font-size: 10px;
  line-height: 24px;
  margin: 0;
  padding: 0;
}


/*hww名前*/
.hwwkey {
 position: absolute;
  top: 1.3em;
  left: 20px;            /* ← right を left に変更 */
  width: auto;
  padding: 0.8em 8em 0.8em 0.8em; /* ← パディングも左右逆に */
  text-align: center;
font-family: "Caveat", cursive;/*フォント*/
  font-size: 1.5em;
  line-height: 1.2;
  font-weight: bold;
  box-sizing: border-box;
  z-index: 1;
 border-radius: 20px;
background: #d8e7ee;
box-shadow: inset 5px 5px 0px #828b8f,
            inset -5px -5px 0px #ffffff;
}


/*表紙*/
.topkey {
  /* position はつけない、または relative にする */
  display: block;
  margin: 2em auto;         /* 中央寄せ＋上下の余白 */
  width: 120px;
  height: 120px;
  line-height: 120px;       /* テキストを縦中央に */
  text-align: center;
  color: #333;
  font-family: "Caveat", cursive;
  font-size: 2em;
  font-weight: bold;
  border-radius: 71px;
background: #d8e7ee;
box-shadow:  5px 5px 10px #828b8f,
             -5px -5px 10px #ffffff;
}

/* ボタンを横並びにするコンテナ */
.key-container {
  display: flex;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap; /* 画面幅が狭い時は折り返し */
  margin: 2em 0;
}

/*トップのURLだけフォントかえるやつ*/
a[href="https://starry03.nieru.net/19/2"],
a[href="https://starry03.nieru.net/19/3"],
a[href="https://starry03.nieru.net/19/4"] {
  font-family: "Caveat", cursive;
}


/* 罫線とリンク位置を揃える */
.note a {
  display: inline;
  line-height: inherit;
  vertical-align: baseline;
}

/* 特定リンクだけフォント変更 */
 a[href="https://starry04.nieru.net/2"],
 a[href="https://starry04.nieru.net/73"] {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 10px;
  line-height: 24px;
}

/*oppメモ*/
.oppmemo {
  position: relative;               /* 位置基準 */
  max-width: 400px;                 /* oppboxと同じ幅 */
  margin: 0 auto 2em auto;          /* 上下に余白を少し追加 */
  padding: 3.5em 3em;
  color: #000;
  font-family: 'Zen Kurenaido', sans-serif;
  font-size: 0.85em;
  box-sizing: border-box;
  background-color: #ffffff;
  background-image: linear-gradient(90deg, #0769d521 1px, transparent 1px), linear-gradient(#0769d521 1px, transparent 1px);
  background-position: 10px 10px;
  background-size: 15px 15px;
box-shadow: 0 4px 4px rgb(0 0 0 / 20%), 0 2px 3px -2px rgb(0 0 0 / 20%);
}


/* memo内のテキスト */ 
.oppmemo p {
 font-family: 'Zen Kurenaido', sans-serif;
 font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0;
 }

/*hwwメモ*/
.hwwmemo {
  position: relative;               /* 位置基準 */
  max-width: 400px;                 /* oppboxと同じ幅 */
  margin: 0 auto 2em auto;          /* 上下に余白を少し追加 */
  padding: 3.5em 3em;
  color: #000;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.85em;
  box-sizing: border-box;
  background-color: #ffffff;
  background-image: linear-gradient(90deg, #0769d521 1px, transparent 1px), linear-gradient(#0769d521 1px, transparent 1px);
  background-position: 10px 10px;
  background-size: 15px 15px;
box-shadow: 0 4px 4px rgb(0 0 0 / 20%), 0 2px 3px -2px rgb(0 0 0 / 20%);
}

/* memo内のテキスト */ 
.hwwmemo p {
 font-family: "Zen Maru Gothic", sans-serif; font-size: 1.1rem; /* 少し大きめ */
 font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0;
 }



/*佐伯マーカー*/
.sik {
background: linear-gradient(transparent 60%, #8C4664 0%);
font-size: 1em;
font-weight: bold;
  font-family: 'Zen Kurenaido', sans-serif;
}

/*三枝マーカー*/
.akn {
background: linear-gradient(transparent 60%, #F03C32 0%); 
font-size: 1em;
font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}

/*叶マーカー*/
.kne {
background: linear-gradient(transparent 60%, #ABD3D8 0%); 
font-size: 1em;
font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}

/*葛葉マーカー*/
.kz {
background: linear-gradient(transparent 60%, #ACA7BB 0%); 
font-size: 1em;
font-weight: bold;
  font-family: 'Zen Kurenaido', sans-serif;
}

/*りきちゃんマーカー*/
.joe {
background: linear-gradient(transparent 60%, #D598DD 0%); 
font-size: 1em;
font-weight: bold;
  font-family: 'Zen Kurenaido', sans-serif;
}


/*不破マーカー*/
.fw {
background: linear-gradient(transparent 60%, #BF69F4 0%); 
  font-family: "Zen Maru Gothic", sans-serif;
font-size: 1em;
font-weight: bold;
}

/*ロレマーカー*/
.lr {
background: linear-gradient(transparent 60%, #C10E49 0%); 
font-size: 1em;
font-weight: bold;
  font-family: 'Zen Kurenaido', sans-serif;
}

/*奏斗マーカー*/
.knt {
background: linear-gradient(transparent 60%, #FAD246 0%); 
font-size: 1em;
  font-family: "Zen Maru Gothic", sans-serif;
font-weight: bold;
}

/*鏑木マーカー*/
.kb {
background: linear-gradient(transparent 60%, #198CAA 0%); 
font-size: 1em;
font-weight: bold;
  font-family: "Zen Maru Gothic", sans-serif;
}


/* 新しい中央配置用 */
.centerkey {
  position: absolute;
  top: 1.3em;         /* 上からの位置は同じ */
  left: 50%;           /* 左右中央 */
  transform: translateX(-50%); /* 自分の幅の半分だけ左にずらす */
  padding: 0.8em 2em; /* 左右均等の余白 */
  text-align: center;
  font-family: "Caveat", cursive;
  font-size: 1.5em;
  line-height: 1.2;
  font-weight: bold;
  border-radius: 20px;
  background: #d8e7ee;
  box-shadow: inset 5px 5px 10px #828b8f, inset -5px -5px 10px #ffffff;
}

.centerkey a {

  font-family: "Zen Maru Gothic", sans-serif;

}


/*リンクあるやつの下線を消せる*/
a{
text-decoration: none;
}

/*折りたたみの三角けす*/
summary::-webkit-details-marker { display: none; }


details summary::before {/*閉じてる時*/
font-family: FontAwesome;
content: '\e185';
margin-right: 20px;
}

details[open] summary::before {/*開いてる時*/
content: '\f07c';
}

summary {/*青い線けす*/
outline: none;
}


/*背景*/
html, body {
  font-size: 10px;   /* ← 全体をかなり小さく */
  line-height: 1.8;  /* 通常文章用 */
  color: #333333;
  background-color: #d8e7ee;
}