body{
  font-family: Arial, Yu Gothic Medium;
  font-style: normal;
  font-weight: 400;
background-color: #faf8f5;;
margin: 0; /*bodyのマージンは0に設定　*/
letter-spacing: 0.1em;/*文字の間隔*/

}


em {/*強調する場合のデザイン　*/
  color: #6b5e4b;
  text-decoration: underline;
  text-decoration-color: #e6ddd0;
  text-underline-offset: 3px;
  font-style: normal;
}

.note {/*注釈のデザイン*/
  font-size: 0.9em;
  color: #666;
  margin-top: 0.5em;
  margin-left: 1em;
  line-height: 1.6;
}

html {
  font-size: 15px;  /* スマホやタブレット用の基本サイズ */
}

@media (min-width: 768px) {
  html {
    font-size: 16px;  /* タブレット横～PCでは少し大きめ */
  }
}





a{
  text-decoration: none; 
  color: black;
}


a:hover {
text-decoration:underline;
color: orange;
}

p {
	line-height: 2; /*行間の設定*/

 
  }
	



img{
  max-width: 100%; /*imgは親要素の中におさめる*/
}

img.icon{
  max-width: 60px;
}

img.icon2{
  max-width: 100px;

}

h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  padding: 0.8em; /*文字と下線の間の距離を設定*/
}

h2:after { /*h2の下線の設定*/
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;/*幅を設定*/
  height: 5px;
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

@media(max-width: 600px) {
  h2{
font-size: 1rem;
  }
    }



main{
  margin-bottom: 10px;
}

footer{
  margin-top: 10px;
}
/*以下ナビゲーションメニューの固定*/

.header-nav-wrapper{
  position: fixed;
  z-index: 10;
  left: 0;
  top:0;
  width: 100%;
  background-color: #faf8f5;
}

.main-wrapper{
position: absolute;
z-index: 0;
top:120px;
width: 100%;
background-color: #faf8f5;
}

@media(max-width: 600px) {
  .main-wrapper{
  top:80px; /*上からの配置を設定　ナビゲーションにかぶらないよう設定*/

  }
}



/*=おわり==========================*/


/*navigationメニュー============================-*/
.nav-inner{
  margin: 0px auto;
  max-width: 1200px;
  color: green;
  font-family: メイリオ;

}

@media(max-width: 600px) {
  .nav-inner{
  display: flex;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0;}
  .nav-inner >:first-child {
  flex-basis: 500px;
}
  }

.nav-inner img{width: 230px;}

.nav-inner a {
color: green;
text-decoration: none;

}

.nav-inner ul{
padding-top: 10px;
padding-bottom: 10px;
list-style-type: none; /*箇条書きの点を消す*/
display: flex;
align-items: center; /*中央に均配置*/
justify-content: space-around;}

@media(max-width: 600px){ /*スマホの場合は次のように表示*/
.nav-inner ul{
padding: 0;
font-size: 0.5em;
margin-left: 0;
justify-content: space-between;
}
}


@media(max-width: 600px){
.nav-inner li{
  width: 25%;
  margin: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
}

}




@media(max-width: 600px){/*スマホの場合は次のように表示*/
.main-container{
flex-direction: column;
}
}


.main-container{
  margin: 0 auto; /*親要素の中央に揃える*/
  max-width: 1200px;
display: flex;
background-color:  white;
justify-content: space-between;
}


.maincol1 {
flex: 1 1 auto;
background-color:  #faf8f5;
padding-top: 30px;
  padding-bottom: 30px;
padding-left: 10px;
padding-right: 10px;
}

.maincol p{
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}


.blog-container {
flex: 1 1 auto;
background-color: white;
padding-top: 30px;
padding-bottom: 30px;
padding-left:padding-top: 30px;
padding-left: 40px;
padding-right: 40px;
}

.blog-container p{
  padding-left: 20px;
  text-indent:1em; /*字下げの設定*/
}


/* スマホのときは揃える */
@media(max-width: 600px){
  .blog-container p{
   padding-left: 0.5em;   /* ← これ！自然な余白 */
    text-indent: 1em;      /* ← 字下げは残す */
  }
}




@media(max-width: 600px){
.blog-container {
padding: 5px 5px;
}
}

.sidebar {
background-color: white;
  flex: 0 0 300px;
  padding-top: 30px;
  padding-bottom: 30px;
padding-left:  10px;
padding-right: 10px;
}

.profile p{
  text-align: center;
}

@media(max-width: 600px){
  .new article{
    display: grid;
    width: auto;
    grid-gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  }
}

.reference {
  font-size: 0.9em;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}





.sidebar1 {
background-color: #99CC99;
  flex: 0 0 300px;
  padding-top: 30px;
  padding-bottom: 30px;
padding-left:  10px;
padding-right: 10px;
}


/*ホーム画面トップ画像の設定*/
.top-container{
  padding-top: 0px;
  position: relative;
    margin-bottom: 10px;
    width: 1000px;
max-width: 100%; /*親要素の中に入れる*/
  	height: 300px;
    margin-left: auto;/*真ん中に来るように調整*/
    margin-right: auto;

}

@media(max-width: 600px){
.top-container{
  height: 100px;
}
}



.sample-container {
  margin-left: auto;/*真ん中に来るように調整*/
  margin-right: auto;
	position: relative;
	width: 500px;
	max-width: 100%;
	height: 400px;
}



.footer-inner{
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
      max-width: 1200px;
  text-align: center;}

.grid{
  display: grid;
  width: auto;
  grid-gap: 10px;
 grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
}

@media(max-width: 600px){
  .grid{
    display: grid;
    width: auto;
    grid-gap: 10px;
   grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
   font-size: small;
  }
}



.grid h4{
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.4; /*行間の設定*/
  
}

.caption{   /*画像下の説明のために残しておく*/
  
}



.grid-img{/*文字と画像の幅を指定*/
  flex-grow: 1;　/*下の下線をそろえるための指定*/
}


.item{
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  display: flex; /*要素の位置をそろえるための指定*/
  flex-direction: column;
}

.item p{
  line-height: 1.7;
  
}

.tree p{    /*ツリー構造のcss*/
text-align: left;
background-color: white;
font-size: 0.5rem;
padding-left: 10px;
padding-bottom: 15px;
border-radius: 10px; /*角を丸める*/
}
.tree img{

position: relative;
left: 0px;
top:10px;
}

.post-title{ /*記事タイトル*/
margin-top: 0px;
margin-bottom: 0px;
font-weight: bold;
font-size:2rem;
}


@media(max-width: 600px) {
  .post-title{/*articleの設定*/
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0;}
  }

.post-day{
font-size: 0.8rem;}

.post-day img{
  position: relative;
  top: 10px;
  left: -1px;
}

.kakomi{
  margin: 10px;
  padding:5px 0;
  background-color: white;
  border: solid;
  border-color: black;
  border: bold;
  border-radius: 5px;
  font-size: small;
}

.kakomi li{
  padding: 10px 0;
}

.kakomi h3{
  margin: 0 auto;
  padding-bottom: 0;
}

.kakomi img{
  width: 250px;
}



/*以下トップページの新着記事の紹介*/
.newarticle-container{
  padding-top: 0px;
    margin-left: auto;/*真ん中に来るように調整*/
    margin-right: auto;
    margin-bottom: 10px;
    max-width: 1200px;
    text-align: center;
}
.newarticle-container ul{
  display: flex;
	overflow-x: scroll;
	margin: 0;
	padding: 0;
}

.newarticle-container li{
	min-width: 80%;
	margin: 10px;
	padding: 0;
	list-style: none;
}


/*=====================================隠された説明のcss*/

.hidden_box {
  margin: 2em 0;/*前後の余白*/
  padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
  padding: 15px;
  font-weight: bold;
  border: dotted 2px black;
  cursor :pointer;
}

/*ボタンホバー時*/
.hidden_box label:hover {
  background: #efefef;
}

/*チェックは見えなくする*/
.hidden_box input {
  display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1;
}

.line{
  border-bottom: solid 3px #87CEFA;
}

/*=============================================おわり*/

/*以下タグのボタンcss*/
.btn-flat-border {
padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #67c5ff;
  color: white;
}


/* =========================
   会話レイアウト全体の設定
   ========================= */
.chat {
  display: flex;            /* アイコンと文章を横並びに配置 */
  align-items: center;      /* アイコンと文章の高さを中央で揃える */
  margin: 10px 0;           /* 会話同士の間にすこし余白をつける */
}

/* =========================
   アイコン画像の基本設定
   ========================= */
.chat img {
  width: 60px;              /* アイコンの横幅 */
  height: 60px;             /* アイコンの高さ */
  border-radius: 50%;       /* 画像をまるく切り抜く（円形にする） */
  flex-shrink: 0;           /* 吹き出しが長くなってもアイコンがつぶれないように固定 */
}

.chat p {
  text-indent: 0; /* 字下げなし */
}




/* =========================
   左側（うさぎ塾長など）
   ========================= */
.left img {
  margin-right: 10px;       /* アイコンと吹き出しの間に少し余白を入れる（右側） */
}
.left p {
  background: #FFF5F2;      /* 吹き出しの背景色（やさしいグレー） */
  padding: 8px 12px;        /* 吹き出し内の文字まわりの余白（上下8px・左右12px） */
  border-radius: 5px;      /* 角を少し丸くして柔らかい印象に */
  margin: 0;                /* デフォルトの段落マージンを消す */
  font-size: 15px;          /* 文字サイズを少し大きめにして読みやすく */
  line-height: 1.6;         /* 行間を少し広めにして読みやすく */
  max-width: 80%;           /* 吹き出しの横幅が広がりすぎないように制限 */
}

/* =========================
   右側（大学生など）
   ========================= */
.right {
  flex-direction: row-reverse; /* アイコンと吹き出しを反転（右→左の並び） */
}
.right img {
  margin-left: 10px;        /* 吹き出しとアイコンの間に左側の余白をつける */
}
.right p {
  background:#FFEAEA;      /* 右側の吹き出しは少し青みがかった色に（違いが分かるように） */
  padding: 8px 12px;        /* 吹き出し内の文字まわりの余白 */
  border-radius: 5px;      /* 角を丸くする */
  margin: 0;                /* 段落の余白を消す */
  font-size: 15px;          /* 文字サイズ */
  line-height: 1.6;         /* 行間 */
  max-width: 80%;           /* 吹き出しの幅を制限 */
}

/* =========================
   スマホ用の見やすさ調整
   （画面幅が600px以下のとき）
   ========================= */
@media (max-width: 600px) {
  .chat img {
    width: 48px;            /* アイコンを少し小さく */
    height: 48px;
  }
  .chat p {
    font-size: 14px;        /* スマホでは文字を少し小さめに */
    max-width: 90%;         /* 横幅を少し広げて読みやすく */
  }
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  登場人物紹介ボックス（.character-box）
  ------------------------------------------------
  
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.character-box {
  background: #eaf6ff;              /* やわらかい水色の背景。白より少し青みで清潔感を演出 */
  border: 2px solid #6ad1c8;        /* 明るい水色で囲むことで爽やかな印象に */
  border-radius: 8px;               /* 角を8px丸めて、親しみやすい雰囲気に */
  padding: 15px 20px;               /* 内側の余白。文字が詰まらず読みやすい */
  margin: 25px 0;                   /* 上下の余白。前後の要素と間をとる */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* ほんのり影で立体感を出す。浮いて見える効果 */
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  見出し（h3）のデザイン
 
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.character-box h3 {
  color: #6ad1c8;                   /* タイトル文字の色。全体と調和する水色 */
  font-size: 1.2em;                 /* 少し大きめの文字サイズ */
  margin-bottom: 10px;              /* タイトル下に余白を確保 */
  position: relative;               /* 下線を重ねるために位置指定を可能にする */
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  タイトル下のストライプ下線
  ------------------------------------------------
  ・repeating-linear-gradientで、2pxずつの水色と白を斜め45°で交互に表示
  ・全体の装飾と統一感を持たせる
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.character-box h3::after {
  content: "";                      /* 疑似要素を生成するために必要 */
  position: absolute;               /* h3の中で位置を固定 */
  left: 0;                          /* 左端から配置 */
  bottom: -6px;                     /* タイトル文字の少し下に配置（3px下） */
  width: 100%;                      /* タイトルの幅全体に下線を引く */
  height: 3px;                      /* 下線の太さ */
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  リスト部分のデザイン（登場人物の本文）
  ------------------------------------------------
  ・行頭のマークを消してシンプルに
  ・文字間や行間を広くして読みやすく
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.character-box ul {
  list-style: none;                 /* 行頭の「・」を消す */
  padding-left: 0;                  /* 左側の余白をなくす（整列させる） */
  margin: 0;                        /* ulの上下余白をリセット */
}

.character-box li {
  margin-bottom: 6px;               /* 各人物の間に少し余白をとる */
  line-height: 1.6;                 /* 行間を広めにして読みやすく */
}



/* 図全体（画像＋クレジット）の枠 */
.chart-wrap {
  text-align: center;   /* 中の画像を中央寄せにする */
  margin-bottom: 12px;  /* 下に余白（任意） */
}

/* 画像（中央に配置） */
.chart-img {
  display: block;       /* ブロック化すると margin:0 auto が効く */
  margin: 0 auto;       /* 画像を真ん中に置くための中央寄せ */
}

/* 画像の外側・右下に小さく表示するクレジット */
.chart-credit {
  
  font-size: 10px;      /* 小さめで控えめな文字サイズ */
  color: #888;          /* グレーでクレジット風に */
  margin-top: 4px;      /* 画像との間に余白 */
}

.book-title {
  font-style: italic;
}