body{
font-family: Arial,sans-serif;
magin: 0;
padding: 0;
background-color: #f5f5f5;
}

header, nav ,main, footer{
padding: 1rem;
}


header{
background-color: #333;
color: #fff;
}

nav{
background-color: #333;
color: #fff;
}

nav ul{
list-style: none;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
}

nav li a{
color: #fff;
text-decoration:none;
padding: 1rem;
display: block;
}

nav li a:hover{
background-color #999;
}

main{
padding: 1rem
}

article{
background-color: #fff;
padding: 1rem;
margin-bottom: 1rem;
border-radius: 5px;
box-shadow: 2px; @2px; 5px;
rgba(0,0,0,0,3);
}

article h2{
margin-top: 0;
}

footer{
background-color: #666;
color: #fff
margin-top: @1rem;
text-align: center;
}


.card-wrapper {

  display: flex;

  margin-bottom: 24px;


}

img {
width: 200px;
height: 150px;
}

.card {
  display: flex;
  background-color: #e0e0e0;
  flex-direction: column;
  width: 200px;
}

.card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.card-text {
  flex-grow: 1;
}

.card-gap{
  width: 50px;
}

@media screen and (max-width: 480px){

header h1{
font-size: 1.5rem;
}

nav ul{
flex-direction: column;
}

nav li a{
margin-bottom: 0.5rem;
}


.card-wrapper {
  display: block;
  margin-bottom: 24px;

}

.card {
  display: block;
  background-color: #e0e0e0;
  margin:auto;
}

.card-content {

  flex-direction: column;

}

.card-text {
  flex-grow: 2;
}

.card-gap{
  height:  50px;
}

img {
max-width: 100%;
height: auto;
}

}


/* -------------------------------------- */
/* nav要素全体のスタイル（黒い帯を消す） */
/* -------------------------------------- */
nav[aria-label="パンくずリスト"] {
    /* 背景色を透明にする */
    background-color: transparent !important; 
    /* 黒い帯の高さだったパディングは維持 */
    padding: 10px 20px;
    /* 親要素が黒いままなら、この設定だけでは黒帯は消えません */
}


/* -------------------------------------- */
/* 順序付きリストの設定（親要素） */
/* -------------------------------------- */
.breadcrumb {
    display: flex;       
    list-style: none;    
    padding: 0;
    margin: 0;
    font-size: 0.9em;
    /* この line-height を基準にする */
    line-height: 1.2; 
    flex-wrap: wrap;
}

/* リストアイテムのスタイル（不等号の位置を安定させる核となる修正） */
.breadcrumb li {
    display: inline-flex;  /* リンクと ::after を横に並べ、位置を揃える */
    align-items: center;   /* 垂直方向の中央揃え */
    height: 100%; 
}

/* リンクテキストのスタイル */
.breadcrumb a {
    color: #0B0B0B;      
    text-decoration: none;
    white-space: nowrap; 
    /* リスト全体の line-height を a にも継承させる */
    line-height: 1.2;
}

/* -------------------------------------- */
/* ★重要★ 現在のページ（最後の要素）の調整 */
/* -------------------------------------- */
.breadcrumb li[aria-current="page"] {
    color: #0B0B0B;        
    font-weight: bold;
    /* 現在地テキストにも行の高さを設定し、垂直方向のズレを解消する */
    line-height: 1.2; 


/* 最後の手段：位置を強制的に微調整 */
    position: relative;
    top: 15px; /* 1pxだけ下にずらして他のテキストのベースラインに揃える */
}

/* 区切り記号（ > ）の表示と位置調整は変更なし */
.breadcrumb li:not(:last-child)::after {
    content: ' > '; 
    padding: 0 8px; 
    color: #aaa; 
    /* li:inline-flexとalign-items:centerで中央に揃う */
}


/* 記事本文の標準の文字サイズを設定 */
.novel-text {
    font-size: 1.2em; /* 標準より1.2倍大きくする */
    /* あるいは具体的なピクセル値で大きく設定 */
    /* font-size: 18px; */
    
    line-height: 1.8; /* 行間を広げて読みやすくする */
    margin-bottom: 1.5em; /* 段落ごとの下側の余白を広げる */
}

/* 読者が見出しと間違えないよう、h3のサイズは逆に本文より小さく/標準に戻すことも検討 */
h3 {
    font-size: 1.1em; /* あるいは font-size: 16px; */
    /* h3 の文字サイズを本文のフォントサイズと使い分けます */
}