/* メイン画像 */
.mainvisual {
    display: block;      /* 中央寄せのためにブロック化 */
    margin: 0 auto 20px auto;  /* ★ 上を0、左右をauto、下を20pxに変更 */
    max-width: 100%;
    height: auto;
    width: auto; 
    
    /* 【追加】画像本来のサイズ（100%）より大きくならないようにする */
    width: auto; 
}



/*－－－－－－－－－－ 

セクション

 －－－－－－－－－－*/


.chara {
  /* 1. 外側の横幅は index.html の section と完全に一致させる */
  margin: 30px 10px 20px !important; 
  background-color: #fff;
  border-radius: 40px;
  display: block;

  /* 2. マージンの代わりに padding（内側余白）で「見た目の40px」を作る */
  /* 上: 30px, 左右: 40px, 下: 20px */
  padding: 30px 40px 20px !important; 
  box-sizing: border-box; /* 余白を含めて幅を計算 */
}

/* PCサイズ（1181px以上）の調整 */
@media screen and (min-width: 1181px) {
  .chara {
    max-width: 1160px; /* index.htmlのsectionと同じ最大幅 */
    margin: 0 auto 60px !important;
    /* PCでは index と同じ 60px に合わせるか、お好みで 40px に固定 */
    padding: 60px 40px !important; 
  }
}

/* 3. 名前エリアの可変文字設定（前回の設定を維持） */
.character-name-area h3 {
  color: #879dca; 
  font-weight: normal; 
  letter-spacing: 8px; 
  position: relative;
  border-bottom: 2px solid #e3ebf4;
  width: 100%;
  padding-left: 30px;
  margin: 0 0 20px;
  font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.8rem);
  font-family: "Quicksand", "Noto Sans JP", sans-serif;
  line-height: 1.4;
}

/* 4. スマホ表示（520px以下）の微調整 */
@media screen and (max-width: 520px) {
  .chara {
    /* スマホでは 40px だと狭すぎるため、少しだけ内側の余白を絞る */
    padding: 30px 20px 20px !important; 
  }
  .character-name-area h3 {
    font-size: 1.8rem;
    letter-spacing: 4px;
    padding-left: 25px;
  }
}

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

名前

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
/* 名前エリア全体の調整 */
.character-name-area h3 {
    position: relative;
    padding-left: 35px;    /* アイコンとの隙間を少し広げてゆとりを */
    
    font-family: 'Quicksand', sans-serif;
    color: #a6afd3;
    font-size: 2.8rem;
    margin: 0;
    
    border-bottom: 1px solid #dbe2ed;
    
    display: block;
    width: 100%;
    
    /* --- バランス調整のポイント --- */
    line-height: 1.4;      /* 文字の上下にわずかな遊びを作る */
    padding-bottom: 4px;   /* 線と文字の間に「呼吸」できる隙間を作る */
    margin-bottom: 15px;   /* 紹介文との距離を「離れすぎず」に設定 */
}

/* キラキラアイコン */
.character-name-area h3::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    content: "";
    display: block;
    background: url(../img/sparcle.png) no-repeat;
    background-size: cover;
    width: 22px;
    height: 22px;
}

/* 日本語名 */
.sub-name {
    font-size: 1.5rem;     /* 少しだけ小さくして英語を引き立てる */
    color: #757d8b;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal;
    letter-spacing: 0.1em;
    vertical-align: baseline;
}

/* 紹介文 */
.chara-description {
    margin-top: 0;
    line-height: 1.8;
    /* --- 文字サイズの調整 --- */
    font-size: 1.4rem;     /* 1.0remより少し小さく設定 */
    color: #757d8b;        /* 文字色を少しだけ柔らかい色にするとより洗練されます */
    letter-spacing: 0.05em; /* 文字の間隔をわずかに広げて読みやすく */
}

.chara-description {
    /* 中略（既存のプロパティ） */
    margin-bottom: 0 !important; /* 下の余白を強制的にゼロにする */
    padding-bottom: 0;           /* 念のため内側の余白もゼロにする */
}




/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

枠組み

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/

/* 枠組み（背景も中身も .chara の幅に合わせる） */
.box {
  padding: 20px; 
  background-color: rgba(135, 191, 242, 0.1);
  
  /* --- .chara と同じ左右の余白を設定 --- */
  margin-left: 40px;  /* 左側の余白 */
  margin-right: 40px; /* 右側の余白 */
  margin-bottom: 60px; /* 下側の余白 */
  
  /* 幅を自動計算にして、左右 40px に収める */
  width: auto; 
}

/* ギャラリー画像自体の配置 */
.box.emg-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  /* .box の内側に収まるので、個別の margin-left/right は不要になります */
  margin-left: 0;
  margin-right: 0;
}


/* スマホサイズ（画面幅 768px 以下）の設定 */
@media only screen and (max-width: 768px) {
    :root {
        /* 1行の枚数を 4枚 に変更 */
        --emg-count-sp: 4 !important;
        /* 画像間の隙間を 8px に調整（お好みで変更してください） */
        --emg-gap-sp: 8px !important;
    }

    .box {
        /* 背景の余白設定 */
        margin-left: 15px;
        margin-right: 15px;
        width: auto;
        padding: 10px;
    }

    /* my-gallery.css の計算ロジックを強制適用 */
    .box.emg-base > * {
        width: calc((100% - (var(--emg-count-sp) - 1) * var(--emg-gap-sp)) / var(--emg-count-sp)) !important;
        padding-top: calc((100% - (var(--emg-count-sp) - 1) * var(--emg-gap-sp)) / var(--emg-count-sp)) !important;
    }

    .box.emg-center {
        gap: var(--emg-gap-sp) !important; 
        margin-left: 0;
        margin-right: 0;
    }
}



/*－－－－－－－－－－ 

キャラリスト

－－－－－－－－－－*/
 
.area.area-thumbnail {


margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;      /* これで左右の余白が均等になります */
}



.area.area-thumbnail.thumb-rounded div {
    border-radius: 8px;
}

.area.area-thumbnail.thumb-circle div {
    border-radius: 50%;
}

.area.area-thumbnail.thumb-circle div.new::after {
    width: calc(100% - 10px);
    text-align: center;
}


.area.area-thumbnail div {


    margin: 5px;
    overflow: hidden;
    object-fit: cover;
}

.area.area-thumbnail div a {
    width: 100%;
    height: 100%;
}

.area.area-thumbnail div img {
    object-fit: cover;
    min-height: 100%;
}

.area.area-thumbnail div.new {
    position: relative;
}

.area.area-thumbnail div.new::after {
    content: "new";
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    line-height: 1;
    font-weight: 600;
    background: #dfbf80;
    color: #071d43;
    font-size: 1rem;
    font-weight: 600;
}


/*－－－－－－－－－－ 

戻るボタン

－－－－－－－－－－*/


.link-center {
    display: block;      /* 念のためブロック要素に */
    text-align: center !important;  /* 強制的に中央寄せ */
    margin-top: 60px;    /* リストとの余白をしっかり取る */
    margin-bottom: 60px;
    width: 100%;         /* 横幅いっぱいを使って中央を作れるようにする */
}

/* マウスオン時の波線・下線を完全に消す */
.link-center a, 
.link-center a:hover, 
.link-center a:active, 
.link-center a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important; /* 影による線を消す */
}

/* 画像自体の調整（必要であれば） */
.link-center img {
    display: inline-block;
    border: none;
}