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;
}

header {
    position: relative;
    width: 100%;
    height: 300px; /* 高さを調整可能 */
    background-image: url('news-image.png'); /* ヘッダー画像を指定 */
    background-size: cover; /* 画像をヘッダーいっぱいに表示 */
    background-position: center; /* 画像の中心を表示 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    font-family: 'Arial', sans-serif;
  }

  /* ヘッダー上のロゴやテキスト */
  header h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin: 0;
  }



  /* ヘッダー下にオーバーレイをつけてスタイリッシュ感アップ */
  header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 半透明の黒オーバーレイ */
    z-index: 1;
  }

  /* ヘッダー内コンテンツはオーバーレイより前面に配置 */
  header > * {
    position: relative;
    z-index: 2;
  }

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px; /* 余白を追加 */
}


h4 {
  padding-bottom: .2em;
  border-bottom: 3px double #ccc;
  color: #444;
}

@media screen and (max-width: 600px){
    
header {
    position: relative;
    width: 100%;
    height: 300px; /* 高さを調整可能 */
    background-image: url('news-image.png'); /* ヘッダー画像を指定 */
    background-size: cover; /* 画像をヘッダーいっぱいに表示 */
    background-position: center; /* 画像の中心を表示 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    font-family: 'Arial', sans-serif;
  }

  /* ヘッダー上のロゴやテキスト */
  header h1 {
    font-size: 3rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    margin: 0;
  }



  /* ヘッダー下にオーバーレイをつけてスタイリッシュ感アップ */
  header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 半透明の黒オーバーレイ */
    z-index: 1;
  }

  /* ヘッダー内コンテンツはオーバーレイより前面に配置 */
  header > * {
    position: relative;
    z-index: 2;
  }

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px; /* 余白を追加 */
}


 /* nav ul: 縦並びの親要素 */
    nav ul{
        flex-direction: column; /* リンクを縦に並べる（これが重要） */
        padding: 0; /* paddingをリセット */
        margin: 0;
    }

    /* nav li: 縦並びになったリストアイテム */
    nav li {
        width: 100%; /* 幅を画面いっぱいに広げる */
        text-align: center; /* テキストを中央寄せ */
        box-sizing: border-box; /* パディングを含めて幅100%にする */
    }

    /* nav li a: クリック可能なエリアを広げる */
    nav li a{
        display: block; /* リンクをブロック要素にして li の幅いっぱいに広げる */
        padding: 1rem 0; /* 上下のパディングを維持し、左右は0にする */
        margin-bottom: 0; /* margin-bottomをリセット */
    }


.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; 
}

/* リストアイテムのスタイル（不等号の位置を安定させる核となる修正） */
.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 の文字サイズを本文のフォントサイズと使い分けます */
}