/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;700;900&family=Noto+Sans:wght@400;500;700;900&display=swap');

body {
  font-family: 'Lexend', 'Noto Sans', sans-serif;
  background-color: #f9fcf8;
  margin: 0;
  padding: 0;
}

/* ヘッダー全体 */
.header-wrapper {
    background-color: #fff; /* 白い背景 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 影 */
    padding: 1rem; /* 内側の余白 */
    display: flex;
    justify-content: space-between; /* 要素を左右に配置 */
    align-items: center; /* 垂直方向中央揃え */
    border-radius: 0 0 0.5rem 0.5rem; /* 下の角を丸く */
    position: sticky; /* スクロールしても固定 */
    top: 0;
    z-index: 50; /* 他の要素より手前に表示 */
}

/* ロゴ */
.header-logo img {
    height: 40px; /* ロゴの高さ */
    border-radius: 0.25rem; /* 角を丸く */
}

/* ナビゲーション（ボタンコンテナ） */
.header-nav {
    display: flex;
    align-items: center;
    gap: 1rem; /* ボタン間のスペース */
}

/* ボタン共通スタイル */
.header-nav a.button {
    padding: 0.5rem 1rem; /* ボタンの内側の余白 */
    border-radius: 0.5rem; /* ボタンの角を丸く */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* ボタンの影 */
    transition: all 0.15s ease-in-out; /* ホバー時のアニメーション */
    text-decoration: none; /* 下線を削除 */
    font-size: 0.875rem; /* フォントサイズ */
}

/* ログインボタン */
.header-nav a.button.login {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
}
.header-nav a.button.login:hover {
    background-color: #f5f5f5;
}
/* 新規登録ボタン */
.header-nav a.button.register {
    background-color: #4CAF50; /* 緑色 */
    color: #fff;
}
.header-nav a.button.register:hover {
    background-color: #45a049; /* ホバー時の暗い緑色 */
}

/* 小さいスクリーン向けの調整 */
@media (max-width: 768px) {
    .header-nav {
        gap: 0.5rem;
    }
    .header-nav a.button {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

/* フッター全体のコンテナ */
.footer-wrapper {
    background-color: #333; /* 画像のような濃い背景色 */
    color: #ccc; /* 明るいテキスト色 */
    padding: 30px; /* 必要に応じてパディングを調整 */
}

/* フッター上部セクション */
.footer-top {
    display: flex; /* Flexboxで水平に配置 */
    align-items: flex-start; /* アイテムを上揃え */
    gap: 30px; /* ロゴと住所の間のスペース */
    margin-bottom: 20px; /* 区切り線の上部のスペース */
}

.footer-logo img {
    max-width: 100px; /* ロゴのサイズを調整 */
    height: auto;
    filter: brightness(0) invert(1); /* 黒いロゴを暗い背景で白く表示する場合 */
}

.footer-address p {
    margin-bottom: 5px;
    font-size: 0.9em; /* フォントサイズを調整 */
    line-height: 1.5;
}

/* 横の区切り線 */
.footer-divider {
    border: none;
    border-top: 1px solid #555; /* 薄い灰色の線 */
    margin: 20px 0; /* 線の上下のスペース */
}

/* フッター下部のナビゲーション */
.footer-bottom {
    text-align: left; /* テキストを左揃え */
}

.footer-nav {
    list-style: none; /* リストの箇条書きを削除 */
    padding: 0;
    margin: 0;
    display: flex; /* Flexboxで水平にリンクを配置 */
    flex-wrap: wrap; /* リンクが次の行に折り返すことを許可 */
    gap: 20px; /* ナビゲーションアイテム間のスペース */
}

.footer-nav li a {
    color: #ccc; /* リンクの色 */
    text-decoration: none; /* 下線を削除 */
    font-size: 0.9em; /* フォントサイズを調整 */
    white-space: nowrap; /* リンクが単語内で改行しないようにする */
}

.footer-nav li a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}

/* アクセシビリティのための視覚的に非表示にするスタイル */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/* 共通：モバイル優先 */
.container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* 画面が広くなったら調整 */
@media (min-width: 768px) {
  .container {
    max-width: 800px;
    margin: 0 auto;
  }
}
/* カード表示用 */
.section-title {
  font-size: 1.375rem;
  font-weight: bold;
  color: #111b0e;
  padding: 1rem 1rem 0.5rem 1rem;
}

.card-group {
  padding: 1rem;
}

.card {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: stretch;
}

.card-text {
  flex: 2;
}

.card-text p {
  margin: 0.25rem 0;
}

.card-label {
  color: #5f974e;
  font-size: 0.875rem;
}

.card-title {
  font-weight: bold;
  font-size: 1rem;
  color: #111b0e;
}

.card-desc {
  font-size: 0.875rem;
  color: #5f974e;
}

/* ---------------------------------------------------- */
/* .card-image のCSS定義（既存のものをこれに差し替える）  */
/* ---------------------------------------------------- */
.card-image {
  flex: 1;               /* flexアイテムとしてのレイアウトは維持 */
  aspect-ratio: 16 / 9;  /* コンテナのアスペクト比を16:9に固定 */
  border-radius: 0.5rem; /* コンテナの角を丸くする */
  overflow: hidden;      /* **重要**: このコンテナからはみ出した内容を隠す */

  /* imgを中央揃えするためにflexboxプロパティを追加（任意） */
  display: flex;
  justify-content: center;
  align-items: center;

  /* background-image 関連のプロパティはここで削除済み */
  /* background-position: center; */
  /* background-repeat: no-repeat; */
  /* background-size: cover; */
}

/* ---------------------------------------------------- */
/* .card-image 内の a タグのCSS定義（追加）               */
/* ---------------------------------------------------- */
.card-image a {
    display: block;     /* リンクをブロック要素にする */
    width: 100%;        /* 親の.card-imageの幅いっぱいに広げる */
    height: 100%;       /* 親の.card-imageの高さに合わせる */
    line-height: 0;     /* <a>タグ内にテキストがなければ影響なし */
}

/* ---------------------------------------------------- */
/* img.actual-image のCSS定義（追加）                   */
/* ---------------------------------------------------- */
.actual-image {
    display: block;     /* imgをブロック要素にする */
    width: 100%;        /* 親の<a>タグの幅いっぱいに広げる */
    height: 100%;       /* 親の<a>タグの高さに合わせる */

    /* **重要**: 画像のトリミングとフィット、位置 */
    object-fit: cover;   /* 画像が要素全体を覆うように拡大・縮小（はみ出しはトリミング） */
    object-position: center; /* 画像の中心を要素の中央に配置 */
}


/* 画面レイアウト用 */
.layout-inner {
  display: flex;
  flex-direction: row;
}

.sidebar-first {
  width: 200px;
  flex-shrink: 0; /* ← 幅が圧縮されないように */
}

.main-content {
  width: 1024px;    /* ← ✅ 固定幅にする */
  flex-shrink: 0;   /* ← 圧縮防止 */
}


/* PC以上では横並びに */
@media (min-width: 768px) {
  .layout-inner {
    flex-direction: row;
  }
}

/* スマホではサイドバー非表示にしたい場合 */
@media (max-width: 767px) {
  .main-content {
    width: 100%;
  }
  .sidebar-first {
    display: none;
  }
}
/* ---------------------------------------------------- */
/* スマートフォンでの画像の縦横比を維持するための調整 */
/* ---------------------------------------------------- */

/* .card-image 自体のスタイルを再調整 */
.card-image {
    /* 既存の flex: 1; はそのまま残す */
    /* 既存の aspect-ratio: 16 / 9; もそのまま残す */
    /* 既存の border-radius: 0.5rem; もそのまま残す */
    /* 既存の overflow: hidden; もそのまま残す */

    /* display: flex; justify-content: center; align-items: center; もそのまま残す */

    /* 以下のプロパティを追加または調整して、アスペクト比の維持を強化 */
    width: 100%; /* 親要素（.card）の利用可能な幅を占める */
    height: auto; /* 高さを自動調整（aspect-ratioが効くように） */
    max-height: calc(100vw * 9 / 16); /* 画面幅に応じた最大高さを設定（16:9の比率） */
    /* 例えば、カードの最大幅が350px程度なら、max-height: calc(350px * 9 / 16); */
    
    /* min-height も設定するとより頑丈になるが、レイアウトに影響する可能性あり */
    /* min-height: 0; /* Flexアイテムの最小サイズをリセット */
}

/* <img> タグのスタイル（変更なしでOKなはず） */
.actual-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* <a> タグのスタイル（変更なしでOKなはず） */
.card-image a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}


/* @media (max-width: 767px) など、スマホ向けのブレイクポイント内で上記の .card-image を上書きすることも有効です */
@media (max-width: 767px) {
    .card {
        flex-direction: column; /* カードが縦並びになる場合 */
    }
    .card-image {
        /* スマホ向けに幅を100%に */
        width: 100%;
        /* max-height は画面幅に合わせる */
        max-height: calc(100vw * 9 / 16); 
        /* もしカード自体にpaddingがあるなら、それを考慮したcalc()にする */
        /* 例: max-height: calc((100vw - 2rem) * 9 / 16); */
    }
}

.page-video {
  text-align: center;
}

.page-video video {
  display: inline-block;
  max-width: 100%;
  height: auto;
}