/*過去サイトから
---------------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
@import url(https://fonts.googleapis.com/css?family=Anton);
@import url(https://fonts.googleapis.com/css?family=Economica:700);
@import url(https://fonts.googleapis.com/css?family=M+PLUS+1p);
@import url(https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c);
@import url(https://fonts.googleapis.com/css?family=Yomogi);
@import url(https://fonts.googleapis.com/css?family=Kaisei+Opti);
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=Yomogi&family=Zen+Maru+Gothic&display=swap');


/*トップページボタン
---------------------------------------------------------------------------*/
img.news {
  margin: 5px;
  max-width: 250px;
  max-height: 140px;
}
img.charaicon {
  max-width: 65px;
}

.custom-nav-wrap {
background: #ffffff;
padding: 14px;
}

/*トップメニュー（ハンバーガーメニューではない）
---------------------------------------------------------------------------*/
.custom-menu-bar {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
margin: 30px 50px 0px 50px;
}
.custom-menu-bar a {
display: block;
flex: 1;
text-align: center;
padding: 5px 0;
background: #fff;
color: #7b8d3b;
text-decoration: none;
border-radius: 100px;
border: 1px solid #7b8d3b;
transition: background 0.3s, color 0.3s;
}

.custom-menu-bar a:hover {
background: #7b8d3b;
color: #fff;
}

/* モバイルでは縦並び */
@media (max-width: 820px) {
.custom-menu-bar {
flex-direction: column;
align-items: stretch;
}
.custom-menu-bar a {
flex: 1;
width: 100%;
}
}
/*はじめに
---------------------------------------------------------------------------*/
.intro {
  line-height: 150%;
  color: #fff;
}

/*このサイトについて
---------------------------------------------------------------------------*/
.notice {
  border-left: 0px solid #DB7093;
  text-align: left;
  color: #333;
  line-height: 160%;
  padding: 0px 10px 0px 30px;
  margin: 0.8em;
  letter-spacing: 0.1em;
  background-image: url(../other.img/checkbox.png);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 20px;
}
/*staff
---------------------------------------------------------------------------*/
.box2-7 {
   margin: 3em 2em 1em; /* 外側の余白（上下と中央配置） */
   padding: 1em; /* 内側余白 */
   border: 3px solid #eee; /* 線の太さ（3px）、種類（実線）、色（#eee） */
   position: relative; /* 配置（基準となる位置） */
   z-index: 0; /* 他の要素との重なり順（0は通常の順番） */
}
.box2-7:before {
   border-top: 3px solid #8293AA; /* 上辺の線の色（#8293AA） */
   border-left: 3px solid #8293AA; /* 左辺の線の色（#8293AA） */
   content: ''; /* 擬似要素にコンテンツなし */
   display: block; /* 擬似要素をブロック表示 */
   position: absolute; /* 配置（親要素から絶対的に位置を指定） */
   top: -3px; /* 上から-3pxずらす */
   left: -3px; /* 左から-3pxずらす */
   width: 20px; /* 幅20px */
   height: 20px; /* 高さ20px */
   z-index: 1; /* 重なり順（前面に表示） */
}
/* pタグの余白 */
.box2-7 p {
   font-size: 14px;
   margin: 0;
   line-height: 1.8;
}
/*キャラクタページコンテナ
---------------------------------------------------------------------------*/
.characont {
  display: grid;
  /*flex-direction: column;
  gap: 0px;  1〜4の間隔 */
    grid-template-areas:
    "a d"
    "b d"
    "c d"
    ". d";
  grid-template-columns: 1fr 1fr; /* S と D を同じ幅に */
}
@media screen and (max-width: 600px) {
  .characont {
  grid-template-areas:
   "a a"
   "d d"
   "b b"
   "c c";
  }
}
.charabox1 {
  grid-area:a;
}
.charabox2 {
  grid-area:b;
}
.charabox3 {
  grid-area:c;
}
.charabox4 {
  grid-area:d;
}

/*キャラクタページ
---------------------------------------------------------------------------*/
.feat {
  font-size: 1.1rem;
  line-height: 150%;
  color: #333;
}
.selfintro {
  font-family: 'Yomogi';
  font-weight: 600; 
  font-size: 1.1rem;
  line-height: 1.6;
  position: relative;
  display: inline-block;
  margin: 1.0em 15px 10px 0;
  padding: 10px 15px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  background: #f8f6ec;
  border: solid 3px #f8f6ec;
  box-sizing: border-box;
  border-radius: 40px;
}
.selfintro:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #f8f6ec;
  z-index: 2;
}
.selfintro:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #f8f6ec;
  z-index: 1;
}
.selfintro p {
  margin: 0;
  padding: 0;
}
.voice_btn {
  text-align:right;
  margin-top:10px;
}
img.toggle-btn {
  cursor: pointer;
}
.voice_btn img {
  width: 100px;   /* 好きなサイズに */
  height: auto;   /* アスペクト比を維持 */
}
/* かぎ括弧風ボックス */
.box4-1 {
   --border-color: black; /* カッコの色 */
   --border-width: 1px;
   margin: 1rem auto 0em; /* 外側の余白（上下と中央配置） */
   padding: 1em; /* 内側余白 */
   position: relative; /* 相対位置指定（擬似要素の基準） */
   color: #333;
   background-color: #fff; /*#f8f6ec;*/
}
.box4-1::before,
.box4-1::after {
   content: ''; /* 擬似要素の内容なし */
   width: 30px; /* カッコの幅 */
   height: 40px; /* カッコの高さ */
   position: absolute; /* 絶対位置指定 */
}
.box4-1::before {
   border-left: var(--border-width) solid var(--border-color); /* 左上のカッコ線 */
   border-top: var(--border-width) solid var(--border-color); /* 上部線 */
   top: 0; /* 上端に配置 */
   left: 0; /* 左端に配置 */
}
.box4-1::after {
   border-right: var(--border-width) solid var(--border-color); /* 右下のカッコ線 */
   border-bottom: var(--border-width) solid var(--border-color); /* 下部線 */
   bottom: 0; /* 下端に配置 */
   right: 0; /* 右端に配置 */
}
/* pタグの余白 */
.box4-1 p {
   margin: 0;
}

/*    .chara_prof {
  width: 450px;
  height: 420px;
  vertical-align: middle;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 40px;
  color: #333;
  padding: 60px 5px 5px 55px;
  border: 0px solid #DB7093;
  border-radius: 0px;
  background-image: url(../other.img/note.png);
  background-repeat: no-repeat;
} 
 @media screen and (max-width: 600px) {
  .chara_prof { 
   background-size: 80%; 
  }
}*/

/*プロフィール
---------------------------------------------------------------------------*/
/* 白ステッチをつける */
/* タイトル付き（ラベルボックス） */
.box5-2 {
   position: relative; /* タイトルの配置調整のために基準を設定 */
   margin: 2.5em auto 1em;
   border: 2px solid #CCA99D; /* ボックスの線 (太さ・種類・色) */
   width: fit-content;
   border-radius: 10px;
}

.box5-2 .box-title {
   position: absolute; /* タイトルをボックス内で絶対位置指定 */
   top: -0.5em; /* 上方向に少し移動 */
   left: 1em; /* 左端からの距離 */
   background-color: #fff; /* タイトル背景色 */
   color: #CCA99D; /* タイトルの文字色 */
   padding: 0 .5em; /* タイトルの内側余白 */
   font-weight: bold; /* タイトルのフォントを太字に */
   line-height: 1; /* タイトルの行の高さ */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-2 .box-content {
   padding: 1em; /* ボックス内コンテンツの余白を設定 */
   line-height: 1.7;
}

.box5-2 p {
   margin: 0; /* 段落の余白をなくして統一感を持たせる */
}

/* pタグの余白 */
.box3-4 p {
   margin: 0;
}

	/*キャラ解説
---------------------------------------------------------------------------*/
.disc {
  /* font-family: 'Noto Sans JP', sans-serif; */
  font-size: 1.1em;
  line-height: 1.6;
  color: #333;
  padding: 0px 0px 5px 0px;
  margin-bottom: 5px;
  border-bottom: 1px solid #111; 
}
.exp {
  /*amily: 'Noto Sans JP', sans-serif;*/
  font-weight: 400;
  text-align: left;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  background-color: #fbf1f0;
  padding: 8px 15px 10px 15px;
  margin-top: 20px;
  margin-bottom: 5px;
  border-radius: 10px;
}
.exp-underline {
      background: linear-gradient(transparent 80%, yellow 20%);
      display: inline;
    }



/*キャラ解説　簡単な説明
---------------------------------------------------------------------------*/
    /* 角括弧風ボックス */
.box4-2 {
   --border-color: black; /* カッコの色 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 1em; /* 内側余白 */
   position: relative; /* 相対位置指定（擬似要素の基準） */
   color: #333;
}

.box4-2::before,
.box4-2::after {
   content: ""; /* 擬似要素の内容なし */
   height: 100%; /* ボックスの高さに合わせる */
   width: 0.75em; /* カッコの幅 */
   position: absolute; /* 絶対位置指定 */
   bottom: 0; /* 下端に配置 */
   border-top: 1px solid var(--border-color); /* 上部の線 */
   border-bottom: 1px solid var(--border-color); /* 下部の線 */
}

.box4-2::before {
   border-left: 1px solid var(--border-color); /* 左の角括弧 */
   left: 0; /* 左端に配置 */
}

.box4-2::after {
   border-right: 1px solid var(--border-color); /* 右の角括弧 */
   right: 0; /* 右端に配置 */
}

/* pタグの余白 */
.box4-2 p {
   margin: 0;
}

/*キャラ解説　バッヂ
---------------------------------------------------------------------------*/
/* 吹き出しの三角部分 */
/* 赤い吹き出し */
.balloon {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-10%, -40%); /* はみ出し位置を調整 */
  background: #f1782f;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;   /* 丸みのある吹き出しに */
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 吹き出しの三角部分 */
.balloon::after {
  content: "";
  position: absolute;
  bottom: -10px;   /* 吹き出しの下にくっつける */
  left: 65px;     /* どの辺から三角を出すか調整 */
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #f1782f; /* 吹き出しと同じ赤色 */
}
/*キャラ解説　説明
---------------------------------------------------------------------------*/
.decoration {
  float: right;        /* 右に寄せる */
  max-width: 130px;
  max-height: 130px;
  margin: 10px;        /* 余白をつける */
}
	/* SWELL目次風 */
.box2-9 {
    overflow: visible; /* バッジをはみ出させるため */
   --border-color-1: #fafafa; /* 背景ストライプの色 */
   --border-color-2: #ddd;   /* 上下枠線の色 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   padding: 1.5em; /* 内側余白 */
   color: #333;
   background: linear-gradient(
   -45deg,
   transparent 25%,
   var(--border-color-1) 25%,
   var(--border-color-1) 50%,
   transparent 50%,
   transparent 75%,
   var(--border-color-1) 75%,
   var(--border-color-1)
   ); /* ストライプ模様 */
   background-size: 4px 4px; /* ストライプのサイズ */
   border-bottom: 4px double var(--border-color-2); /* 下枠線（太さ4px、色はvar(--border-color-2)） */
   border-top: 4px double var(--border-color-2); /* 上枠線（太さ4px、色はvar(--border-color-2)） */
   background-clip: padding-box; /* 背景をパディング領域まで表示 */
}

/* pタグの余白 */
.box2-9 p {
   margin: 0;
}
	/*イラスト
---------------------------------------------------------------------------*/
.illust-exp {
  font-weight: normal;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  border: 0px solid #6c7d2c;
  padding: 8px 15px 10px 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}