@charset "utf-8";

/* 追加スタイルシート（フォールバック用） */
:root {
    --bg: #fff7e6;
    --panel: #fffdf7;
    --accent: #ffcc80;
    --accent-strong: #e6a65c;
    --text: #333;
    --link: #0057b8;
    --border: #e3c28d;
}

* {
    box-sizing: border-box;
}



/*-----------------基本スタイル----------------*/

body {
    margin: 0;
    padding: 0;
    font-family: "Yu Gothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.8;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: var(--link);
}




/* ------------------画面の大きさ------------------*/

header,
main,
article,
section,
aside,
footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px;
}

header {
    background: var(--accent);
    border-bottom: 3px solid var(--accent-strong);
    border-radius: 0 0 12px 12px;
    padding-top: 20px;
    padding-bottom: 20px;
}

header h1,
header h2 {
    margin: 0 0 10px;
}

/*---------------ナビゲーション------------*/

nav {
    margin-top: 10px;
}

nav a {
    display: inline-block;
    margin: 4px 6px 4px 0;
    padding: 8px 12px;
    background: #ffe0b2;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: bold;
}

nav a:hover {
    background: #ffb74d;
}




/*---------区画ごとの文字の大きさ--------------*/

main,
article,
section,
aside {
    background: var(--panel);
    border-radius: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

section,
aside {
    padding: 16px;
}

/*-------------文字の大きさ---------*/


p1,
p2,
p3,
blockquote {
    display: block;
    margin: 0.8em 0;
}

.page-article-uzura,
.page-aside-uzura,
.section-card,
.pet-card {
    border-radius: 16px;
    padding: 16px;
    margin: 16px auto;
}


/* ---------------ハムスターのクラス--------------*/

.page-article-hamu{
    background: #ecffdc;

}

/* ----------------ウズラのクラス------------*/

.page-article-uzura {
    background: #ecffdc;
}

.page-aside-uzura {
    background: #a4ffff;
}

.warning-text-uzura,
.warning-text,
.highlight-text {
    color: #b00020;
    font-weight: bold;
}




.social-image {
    background: #000;
    padding: 6px;
    border-radius: 8px;
}

/*----------------ページのサイズ--------------------*/


article,
main,
section,
aside,
footer {
    padding: 16px;
    margin: 16px auto;
    border-radius: 16px;
}

/* ----------------------ずんだもんの吹き出し------------------------- */

/* 全体の並び順をコントロール */
.chat-container {
  display: flex;
  align-items: center; /* 上下中央揃え */
  justify-content: flex-end; /* 右側に寄せる */
  gap: 10px; /* 吹き出しとキャラの隙間 */
  font-family: sans-serif;
}

/* 吹き出しのスタイル */
.balloon {
  position: relative;
  background-color: #d1f7c4; /* 薄い緑色 */
  color: #333333;
  padding: 15px 25px;
  border-radius: 15px; /* 角丸 */
  font-size: 16px;
}

/* 吹き出しの三角（しっぽ） */
.balloon::after {
  content: "";
  position: absolute;
  right: -10px; /* 吹き出しの右側に飛び出させる */
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 15px;
  background-color: #d1f7c4; /* 吹き出しと同じ色 */
  /* 三角形に切り抜く */
  clip-path: polygon(0 0, 100% 50%, 0 100%); 
}

/* キャラクター配置エリア */
.character-box {
  display: flex;
  flex-direction: column; /* 画像と名前を縦に並べる */
  align-items: center;
  width: 80px;
}

/* アイコン画像 */
.avatar {
  width: 60px;
  height: auto;
}

/* キャラクター名 */
.name {
  font-size: 12px;
  color: #555555;
  margin-top: 4px;
}


/*---------------ずんだもんの吹き出しは以上--------------*/




















pre {
    background: #f4f9e8;
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
}

code {
    font-family: Consolas, "Courier New", monospace;
}

h1, h2, h3, h4 {
    line-height: 1.4;
}

/* スマホ対応*/
@media (max-width: 600px) {
    header,
    main,
    article,
    section,
    aside,
    footer {
        padding: 12px;
    }

    nav a {
        display: block;
        margin: 6px 0;
    }
}