/*
 * フロントページ専用CSS (モバイルファースト対応版)
 */

/* -------------------------------------------
   ヒーローセクション
 --------------------------------------------- */
.hero-section {
    position: relative;
    margin-top: 1rem;
    padding: 0  ;
    width: 100%;
    background-color: #fff;
    overflow: visible;
}

.hero-container {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 92%;
    max-width: 1000px;
    background-color: #fff;
    overflow: visible;
}

.hero-content {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 3/2;
}

/* スライドショー */
.hero-slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

/* 画像コンテナ */
.hero-image-container {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.hero-image-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* ヒーローセクション */
.overlay-content {
    padding: 1.2rem 1.8rem;
    border-radius: 0.8rem;
     white-space: normal; 
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* 位置指定クラス */
.hero-overlay-text.position-bl { position: absolute; top: auto; right: auto; bottom: 22%; left: 12%; }
.hero-overlay-text.position-br { position: absolute; top: auto; right: 13%; bottom: 22%; left: auto; }
.hero-overlay-text.position-tl { position: absolute; top: 8%; right: auto; bottom: auto; left: 17%; }
.hero-overlay-text.position-tr { position: absolute; top: 8%; right: 16%; bottom: auto; left: auto; }


.overlay-content:hover {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.2);
}

.hero-overlay-title {
    margin: 0;
    color: #1a1a1a;
    font-size: clamp(1.35rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.hero-overlay-description {
	display: none;
	margin: 0.4rem 0 0 0;
	color: #4a4a4a;
	font-size: clamp(1.2rem, 2.5vw, 1.6rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.4;
}

/* 装飾アイコン */
.hero-decorations {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.decorations-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
}

/* 画像全体をクリック可能にするリンク領域 */
.hero-image-container .hero-slide-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
}

/* 視認性向上（軽量ホバー演出） */
.hero-image-container .hero-slide-link { cursor: pointer; }

.hero-image-container img { transition: transform .2s ease, filter .2s ease; }
.hero-image-container:hover img { transform: scale(1.03); filter: brightness(1.08) contrast(1.06); }

/* 暗幕は使用しない（視認性要件より削除） */

.hero-image-container:hover .overlay-content {
    transform: translateY(-2px);
    transition: transform .2s ease;
}

.hero-image-container .hero-slide-link:focus-visible {
    outline: 0.2rem solid var(--koenowa-primary);
    outline-offset: 0.4rem;
}

/* ===========================================
   ファーストビュー 高さ制御
   =========================================== */
.first-view-container {
  display: flex;
  flex-direction: column;
  max-height: 100vh; /* ビューポートの高さを最大値に設定 */
}

.first-view-container > .site-header {
  flex-shrink: 0; /* ヘッダーは縮まない */
}

.hero-section {
  flex-grow: 1; /* 残りのスペースを埋める */
  min-height: 0; /* flexアイテムの縮小時のオーバーフローを防ぐ */
}


/* -------------------------------------------
   各セクション共通設定
   ------------------------------------------- */
.section-header {
    margin-bottom: 60px;
    text-align: center;
}
.section-title {
    margin-bottom: 20px;
    color: #333;
    font-size: 1.8rem; /* スマホ用のフォントサイズ */
    font-weight: bold;
    line-height: 1.3;
}
.section-subtitle {
    margin: 0 auto;
    color: #666;
    font-size: 1.45rem;
    line-height: 1.6;
    max-width: 600px;
}


/* -------------------------------------------
   各セクション（ベース：スマホ表示）
   ------------------------------------------- */
section { padding: 3em 0;} /* スマホ用のpadding */

/* -------------------------------------------
   「こえのわとは」エリア
   ------------------------------------------- */
.about-section {padding: 0 0 3em; }
.about-section .container { padding: 0 1rem;}
.about-section p {
	color: #454545;
	font-size: 1.6rem;
	font-family: var(--noto-heading-font);
}
.about-section p {}

/* -------------------------------------------
   ピックアップ記事エリア
   ------------------------------------------- */
.pickup-section .container { max-width: 900px;}
.pickup-articles {/* ピックアップ記事コンテナ（リスト型） */
    display: flex; /* レイアウト */
    flex-direction: column; /* レイアウト */
    gap: 2rem; /* ボックスモデル */
    width: 100%; /* ボックスモデル */
}

/* 個別記事の基本スタイル（リスト型） */
.pickup-article {
	position: relative;
	background-color: #fff; /* 背景 */
	border-radius: 2rem; /* 装飾 */
	box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.08); /* 装飾 */
	overflow: hidden; /* その他 */
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* アニメーション */
}

/* 記事リンク（flexコンテナ） */
.pickup-article-link {
    display: flex; /* レイアウト */
    flex-direction: column; /* レイアウト（スマホでは縦並び） */
    align-items: stretch; /* レイアウト */
    width: 100%; /* ボックスモデル */
    height: 100%; /* ボックスモデル */
    min-height: 400px;
    font-size: 0.00001em;
    text-decoration: none; /* タイポグラフィ */
    color: inherit; /* タイポグラフィ */
	background-color: #f7f7f7;
}

.pickup-article:hover {
	box-shadow: none;
  transform: translateY(-5px);
	filter:
		drop-shadow(0 3px 3px rgba(0,0,0,0))
		drop-shadow(0 6px 6px rgba(0,0,0,0.01))
		drop-shadow(0 9px 9px rgba(0,0,0,0.02))
		drop-shadow(0 12px 12px rgba(0,0,0,0.03));

}


/* ピックアップ記事の画像エリア（新着記事と同じ構造） */
.pickup-article .post-thumbnail {
    flex: 0 0 auto; /* レイアウト */
    width: 100%; /* ボックスモデル（スマホでは全幅） */
    overflow: hidden; /* その他 */
}

.pickup-article .post-image {
    display: block; /* レイアウト */
    width: 100%; /* ボックスモデル */
    height: auto; /* ボックスモデル（アスペクト比を維持） */
    object-fit: cover; /* その他 */
    object-position: center center; /* その他 */
}

.pickup-article .post-image-placeholder {
    display: flex; /* レイアウト */
    align-items: center; /* レイアウト */
    justify-content: center; /* レイアウト */
    width: 100%; /* ボックスモデル */
    aspect-ratio: 3 / 2; /* 3:2比率（1200x800px対応） */
    color: #999; /* タイポグラフィ */
    font-size: 1rem; /* タイポグラフィ */
    background-color: #f0f0f0; /* 背景 */
}

/* 記事コンテンツエリア（リスト型・スマホでは下側） */
.pickup-article .article-content {
    flex: 1; /* レイアウト（残りの幅を占有） */
    display: flex; /* レイアウト */
    flex-direction: column; /* レイアウト */
    padding: 1.5rem; /* ボックスモデル（スマホ用） */
/*     justify-content: space-between; */
}

.pickup-article .article-title {
    margin-bottom: .4rem; /* ボックスモデル */
    color: #333; /* タイポグラフィ */
    font-size: 2.2rem; /* タイポグラフィ */
    font-weight: 600; /* タイポグラフィ */
    line-height: 1.3; /* タイポグラフィ */
}
.important-article.pickup-article .article-title { font-size: 2.5rem;} /* タイポグラフィ */
.important-article.pickup-article .post-subtitle { font-size: 1.8rem;}


.pickup-article .article-excerpt {
    flex: 1; /* レイアウト */
    margin-bottom: 1.5rem; /* ボックスモデル */
    color: #666; /* タイポグラフィ */
    font-size: 1.6rem; /* タイポグラフィ */
    line-height: 1.5; /* タイポグラフィ */
}

/* 編集者紹介文のスタイル */
.pickup-article .pickup-intro {
	margin-top: 1rem; /* ボックスモデル */
	padding: 1rem; /* ボックスモデル */
	color: #555; /* タイポグラフィ */
	font-size: 1.4rem; /* タイポグラフィ */
	line-height: 1.6; /* タイポグラフィ */
	font-weight: 500; /* タイポグラフィ */
	background: rgba(248, 249, 250,.75);
	border-radius: 0.8rem; /* 背景・装飾関連 */
/*
	border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  border-radius: 0 0 2.7rem 0;
*/
}

.pickup-article .article-meta {
    margin-top: auto; /* レイアウト */
    color: #999; /* タイポグラフィ */
    font-size: 0.9rem; /* タイポグラフィ */
    text-align: right; /* タイポグラフィ */
}

/* ===========================================
   レイアウトパターン別スタイル（リスト型）
   =========================================== */

/* リスト型ではすべて縦並びで統一 */
.pickup-layout-single,
.pickup-layout-dual,
.pickup-layout-triple,
.pickup-layout-important,
.pickup-layout-mixed {
    display: flex; /* レイアウト */
    flex-direction: column; /* レイアウト */
    gap: 3.4rem; /* ボックスモデル */
}

/* ===========================================
  新しいレイアウトパターン（重要記事 + 通常記事）
  =========================================== */

/* 重要記事 + 通常記事2つ（50%ずつ） */
.pickup-layout-important-dual {
    display: flex; /* レイアウト */
    flex-direction: column; /* レイアウト */
    gap: 4rem; /* ボックスモデル */
}

.pickup-layout-important-dual .normal-posts {
    display: flex; /* レイアウト */
    flex-direction: column; /* レイアウト（スマホ・タブレットでは1カラム） */
    gap: 4rem; /* ボックスモデル */
}

.pickup-layout-important-dual .normal-posts .pickup-article {
    width: 100%; /* ボックスモデル（スマホ・タブレットでは100%） */
}

/* 重要記事 + 通常記事3つ（最新100% + 残り50%ずつ） */
.pickup-layout-important-triple {
    display: flex; /* レイアウト */
    flex-direction: column; /* レイアウト */
    gap: 2rem; /* ボックスモデル */
}

.pickup-layout-important-triple .normal-posts {
    display: flex; /* レイアウト */
    flex-direction: column; /* レイアウト（スマホ・タブレットでは1カラム） */
    gap: 2rem; /* ボックスモデル */
}

.pickup-layout-important-triple .normal-posts .latest-normal {
    width: 100%; /* ボックスモデル（最新記事は100%） */
}

.pickup-layout-important-triple .normal-posts .other-posts {
    display: flex; /* レイアウト */
    flex-direction: column; /* レイアウト（スマホ・タブレットでは1カラム） */
    gap: 2rem; /* ボックスモデル */
}

.pickup-layout-important-triple .normal-posts .other-posts .pickup-article {
    width: 100%; /* ボックスモデル（スマホ・タブレットでは100%） */
}


/* -------------------------------------------
   新着記事一覧エリア
   基本的にcategory.cssで記載
   ------------------------------------------- */

.more-posts { text-align: center;} /* そのほかの記事ボタン */



/* 481px以上のタブレットサイズからテキストを表示 */
@media (min-width: 481px) {

/* -------------------------------------------
   ヒーローセクション
 --------------------------------------------- */
	.hero-overlay-description { display: block;} /* サブタイトル */
}


@media (min-width: 768px) {

	.pickup-article-link {/* ピックアップ記事のリスト型レイアウト（新着記事と同期） */
		flex-direction: row; /* レイアウト（横並び） */
		align-items: center; /* レイアウト（縦方向中央揃え） */
	}
	.pickup-article-link .post-thumbnail {
		flex: 0 0 24rem; /* レイアウト（固定幅240px） */
		width: 24rem; /* ボックスモデル */
		height: 18rem; /* ボックスモデル（3:2比率） */
	}

    /* セクション共通 */
    .section-title {
        font-size: 2.5rem; /* PC用のフォントサイズ */
    }

/* -------------------------------------------
   各セクション（ベース：スマホ表示）
   ------------------------------------------- */
section { padding:0 0 5em ;} /* スマホ用のpadding */


/* -------------------------------------------
   「こえのわとは」エリア
   ------------------------------------------- */
.about-section { padding: 0 0 5em;}


/* -------------------------------------------
   ピックアップ記事エリア
   ------------------------------------------- */
.pickup-article { box-shadow: none; }


    .pickup-article-link .post-thumbnail {
        flex: 1 1 20rem; /* レイアウト（固定幅280px） */
        width: 100%; /* ボックスモデル */
        height: auto;
        aspect-ratio: 3 / 2; /* 3:2比率を強制 */
    }
    .pickup-article-link .post-thumbnail .post-image {
	    width: 100%;
	    height: 100%; /* 親要素の高さに合わせる */
    object-fit: cover; /* 比率を保ってフィット */
	  }
	.pickup-article-link .article-content { padding: 2rem 2.5rem; }

    /* 新しいレイアウトパターン（PCサイズでのみ50%ずつ） */
    .pickup-layout-important-dual .normal-posts {
        flex-direction: row; /* レイアウト（PCでは横並び） */
    }

    .pickup-layout-important-dual .normal-posts .pickup-article {
        flex: 1; /* レイアウト（50%ずつ） */
    }

    /* 通常記事2つはカード型のまま（リスト型にしない） */
    .pickup-layout-important-dual .normal-posts .pickup-article-link {
        flex-direction: column; /* レイアウト（カード型を維持） */
        align-items: stretch; /* レイアウト */
    }

    .pickup-layout-important-dual .normal-posts .pickup-article .post-thumbnail {
        flex: 0 0 auto; /* レイアウト */
        width: 100%; /* ボックスモデル */
        height: auto; /* ボックスモデル */
    }


    .pickup-layout-important-triple .normal-posts .other-posts {
        flex-direction: row; /* レイアウト（PCでは横並び） */
    }

    .pickup-layout-important-triple .normal-posts .other-posts .pickup-article {
        flex: 1; /* レイアウト（50%ずつ） */
    }

    /* 通常記事2つ（残り）もカード型のまま */
    .pickup-layout-important-triple .normal-posts .other-posts .pickup-article-link {
        flex-direction: column; /* レイアウト（カード型を維持） */
        align-items: stretch; /* レイアウト */
    }

    .pickup-layout-important-triple .normal-posts .other-posts .pickup-article .post-thumbnail {
        flex: 0 0 auto; /* レイアウト */
        width: 100%; /* ボックスモデル */
        height: auto; /* ボックスモデル */
    }

    .pickup-layout-important-triple .normal-posts .other-posts .pickup-article .article-content {
        padding: 1.5rem; /* ボックスモデル（カード型用） */
    }
}