/*
=====================================================
江差追分会 トップページ CSS【第2版】
=====================================================
【第2版のポイント】
・スマートフォン：第1版の縦長イメージを維持
・タブレット：少し横幅を広げる
・PC（1024px以上）：最大1280pxの横長レイアウトへ切り替え
・PCのメイン写真：縦に引き伸ばさず、約560px高のワイド表示
・PCの主要4ボタン：2列 → 4列
・PCのSNS/おすすめ：横幅を生かして余白を整理

※このCSSは mobile first です。
  まずスマホの見た目を書き、画面が広くなった時だけ @media で上書きします。
*/

/* ---------- 1. リセット・共通 ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #111;
  background: #ececec;
}

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

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

/*
  スマホでは画面幅いっぱい。
  PCでは @media (min-width: 1024px) で最大1280pxまで広げます。
*/
.site-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
}

/* ---------- 2. メインビジュアル：スマホ ---------- */
.hero {
  position: relative;
  min-height: 810px;
  overflow: hidden;
  background-color: #050505;

  /*
    ▼本番ではここを受賞者写真に変更します。
    例：url("assets/hero.jpg")
  */
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.12)),
    url("topassets/champ.png");
  background-size: cover;
  background-position: center top;
}

/* 左上ロゴ */
.hero__logo {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 185px;
  z-index: 3;
}

/* 右の縦書き文字 */
.hero__event-text {
  position: absolute;
  top: 42px;
  right: 18px;
  z-index: 3;
  display: flex;
  gap: 10px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(25px, 5.3vw, 38px);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,.8);
}

/* 受賞者名 */
.hero__winner {
  position: absolute;
  right: 64px;
  bottom: 30px;
  z-index: 3;
  color: #ffffff;
  text-align: right;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  text-shadow:
    1px 1px 0 #111,
    -1px -1px 0 #111,
    2px 2px 4px rgba(0,0,0,.75);
}

.hero__branch {
  margin: 0 0 8px;
  font-size: clamp(24px, 5vw, 36px);
}

.hero__name {
  margin: 0;
  font-size: clamp(46px, 10vw, 72px);
  font-weight: 500;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,.8);
}

/* ---------- 3. 共通セクション ---------- */
.section {
  padding: 28px 14px;
}

/* ---------- 4. 4つのメインボタン：スマホは2列 ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
}

.brush-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 16px;
  border: 1.5px solid #222;
  background: #fff;
  box-shadow: 0 5px 8px rgba(0,0,0,.24);
  text-align: center;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* 筆の刷毛目をCSSだけで簡易表現 */
.brush-button::before {
 content: "";

    position: absolute;

    /* ボタン中央に配置 */
    left: 50%;
    top: 50%;

    width: 85%;
    height: 70%;

    transform: translate(-50%, -50%);

    /* 本物の筆画像 */
    background-image: url("topassets/nami.png");

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    /* 透明度 */
    opacity: 0.7;
}

.brush-button span {
  position: relative;
  z-index: 1;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(30px, 7vw, 47px);
  font-weight: 700;
  line-height: 1.12;
}

.brush-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 14px rgba(0,0,0,.22);
}

.brush-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* ---------- 5. SNS ---------- */
/* ==========================================
   SNS公式ロゴ
========================================== */

.social-logo {
    width: 100px;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;
}

/* 公式ロゴ画像 */
.social-logo img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* スマートフォン */
@media (max-width: 767px) {

    .social-logo {
        width: 75px;
        height: 75px;
    }

}
.social-section {
  padding-top: 18px;
  padding-bottom: 68px;
}

.social-grid--top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.social-feature-grid {
  width: min(50%, 430px);
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  font-size: clamp(15px, 4.2vw, 24px);
}

.wide-link-card {
  min-height: 200px;
  padding: 24px 18px;
  border: 3px solid #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(27px, 6.5vw, 42px);
  font-weight: 800;
  line-height: 1.5;
  transition: transform .2s ease, box-shadow .2s ease;
}

.wide-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.14);
}

.wide-link-card strong {
  font-family: Arial, sans-serif;
}

/* YouTube・LINEの案内ボタンを、SNSリンクの上中央に配置 */
.social-sub-link {
  width: 100%;
  min-height: 82px;
  padding: 10px 5px;
  flex-direction: column;
  gap: 2px;
  font-size: clamp(13px, 3.3vw, 20px);
  line-height: 1.25;
}
/* ==========================================
   関連リンクアイコン
========================================== */

.related-link-mark {
    width: 100px;
    height: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin: 0 auto;

    /* 和紙系 */
    background: #f5efe2;

    /* 藍色 */
    color: #40596e;

    border: 2px solid #40596e;

    /* 少しだけ角を丸く */
    border-radius: 8px;

    box-shadow: 0 3px 7px rgba(0,0,0,.12);
}

.related-link-en {
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: .12em;
}

/* スマホ */
@media (max-width: 767px) {

    .related-link-mark {
        width: 75px;
        height: 75px;
    }

    .related-link-en {
        font-size: 13px;
    }

}

/* ---------- 6. フッター ---------- */
.footer {
  padding: 56px 28px 30px;
  border-top: 1px solid #ccc;
  background: #fff;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 34px;
}

.footer-nav a {
  font-size: clamp(20px, 5.2vw, 31px);
  font-weight: 800;
}

.copyright {
  margin: 40px 0 0;
  text-align: center;
  color: #777;
  font-size: 14px;
}

/* =====================================================
   8. タブレット：768px〜1023px
   スマホの雰囲気は残しつつ、少しだけ横幅を活用
===================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-wrap {
    max-width: 900px;
    box-shadow: 0 0 24px rgba(0,0,0,.15);
  }

  .hero {
    min-height: 760px;
    background-position: center 18%;
  }

  .section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .brush-button {
    min-height: 180px;
  }
}

/* =====================================================
   9. PC：1024px以上
   ここが第2版の大きな変更点です。
===================================================== */
@media (min-width: 1024px) {
  body {
    /* PCでは外側に少し余白を作ります */
    padding: 24px;
  }

  .site-wrap {
    /* PC表示を760pxから1280pxへ拡大 */
    max-width: 1280px;
    box-shadow: 0 0 28px rgba(0,0,0,.16);
  }

  /*
    PCは「縦長900px」ではなく「横長560px」。
    これでファーストビューがかなり軽く、横幅のある画面になります。
  */
  .hero {
    min-height: 0;
    height: 560px;
    background-position: center 28%;
  }

  /* PCではロゴも少し大きく */
  .hero__logo {
    top: 24px;
    left: 32px;
    width: 230px;
  }

  /*
    大会タイトルの縦書きは維持。
    ただしスマホより右端に余白を取り、文字を少し抑えます。
  */
  .hero__event-text {
    top: 34px;
    right: 36px;
    gap: 12px;
    font-size: 31px;
  }

  /* 受賞者名は右下にコンパクトに配置 */
  .hero__winner {
    right: 110px;
    bottom: 34px;
  }

  .hero__branch {
    font-size: 26px;
  }

  .hero__name {
    font-size: 58px;
  }

  /* PCは全体の左右余白を広めに */
  .section {
    padding: 42px 48px;
  }

  /* 主要メニュー4個を横一列 */
  .menu-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .brush-button {
    min-height: 155px;
    padding: 18px 12px;
  }

  .brush-button span {
    /* PCではvw依存を避けて読みやすい固定寄りの大きさ */
    font-size: clamp(28px, 2.4vw, 38px);
  }

  /* SNS4個は中央寄せでゆったり */
  .social-grid--top {
    max-width: 860px;
    margin: 0 auto;
    gap: 38px;
  }

  .social-feature-grid {
    gap: 38px;
    margin-bottom: 28px;
  }

  .social-card {
    font-size: 20px;
  }

  .social-sub-link {
    min-height: 105px;
    padding: 14px 8px;
    font-size: 20px;
  }

  .footer {
    padding: 46px 56px 28px;
  }

  .footer-nav {
    justify-content: center;
    gap: 18px 38px;
  }

  .footer-nav a {
    font-size: 20px;
  }
}

/* ---------- 10. 大きいPC：1440px以上 ---------- */
@media (min-width: 1440px) {
  .site-wrap {
    max-width: 1320px;
  }

  .hero {
    height: 590px;
  }
}

/* ---------- 11. 小さいスマホ向け ---------- */
@media (max-width: 390px) {
  .hero {
    min-height: 640px;
  }

  .hero__logo {
    width: 145px;
  }

  .hero__winner {
    right: 45px;
  }

  .menu-grid {
    gap: 14px 12px;
  }

  .brush-button {
    min-height: 140px;
    padding: 10px;
  }

  .social-grid--top {
    gap: 7px;
  }

  .social-feature-grid {
    width: 58%;
    gap: 7px;
    margin-bottom: 18px;
  }

  .social-sub-link {
    min-height: 70px;
    padding: 8px 3px;
    font-size: 12px;
  }
}


/* =========================================================
   第3版：和紙・生成り・墨・淡い藍の配色
   参考画像「大会結果.png」の色合いに合わせた調整
   ========================================================= */
:root {
  --washi-bg: #E9DFC9;     /* ページ背景：生成り */
  --washi-light: #F5EFE2;  /* カード：明るい和紙 */
  --washi-deep: #D8C9AD;   /* フッター等 */
  --sumi: #211E1A;         /* 主文字：墨色 */
  --sumi-soft: #625A4D;    /* 補助文字 */
  --line: #766B5B;         /* 罫線 */
  --ai: #40596E;           /* アクセントの藍 */
}

html, body {
  background-color: var(--washi-bg);
  color: var(--sumi);
}

main {
  background-color: var(--washi-bg);
}

h1, h2, h3, h4 {
  color: var(--sumi);
}

section {
  border-color: rgba(118,107,91,.42);
}

footer, .footer {
  background-color: var(--washi-deep);
  color: var(--sumi);
  border-top-color: var(--line);
}

footer a, .footer a {
  color: var(--sumi);
}

/*
  本物の和紙テクスチャを追加したい場合は
  images/washi-bg.jpg を置いて、以下を有効にしてください。

body {
  background:
    linear-gradient(rgba(233,223,201,.88), rgba(233,223,201,.88)),
    url("images/washi-bg.jpg") center / 600px auto repeat;
}
*/


/* =========================================================
   第4版：トピックス
   優勝者メインビジュアル直下に配置。
   和紙背景に馴染む、落ち着いたニュース一覧です。
   ========================================================= */

.topics-section {
  padding: 34px 18px 30px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.20), transparent 45%),
    var(--washi-light);
  border-bottom: 1px solid rgba(118,107,91,.55);
}

.topics-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 13px;
  border-bottom: 2px solid var(--line);
}

.topics-heading__en {
  margin: 0 0 2px;
  color: var(--ai);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
}

.topics-heading h2 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 500;
  letter-spacing: .08em;
}

.topics-more {
  flex: 0 0 auto;
  padding: 8px 2px;
  color: var(--sumi-soft);
  font-size: 14px;
  font-weight: 700;
}

.topics-more span {
  margin-left: 5px;
}

.topics-list {
  border-top: 1px solid rgba(118,107,91,.23);
}

.topics-item {
  position: relative;
  border-bottom: 1px solid rgba(118,107,91,.38);
}

.topics-link {
  position: relative;
  display: block;
  padding: 18px 34px 18px 2px;
  transition: background-color .18s ease;
}

.topics-link:hover {
  background-color: rgba(64,89,110,.07);
}

.topics-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  margin-bottom: 7px;
}

.topics-meta time {
  color: var(--sumi-soft);
  font-family: Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .04em;
}

.topics-category {
  display: inline-block;
  min-width: 72px;
  padding: 3px 8px;
  border: 1px solid rgba(64,89,110,.55);
  color: var(--ai);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.topics-new {
  color: #9b342a;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.topics-item h3 {
  margin: 0;
  color: var(--sumi);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
}

.topics-item p {
  margin: 5px 0 0;
  color: var(--sumi-soft);
  font-size: 13px;
  line-height: 1.65;
}

.topics-arrow {
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--ai);
  font-family: Arial, sans-serif;
  font-size: 29px;
  font-weight: 300;
  transform: translateY(-50%);
}

.topics-empty {
  margin: 0;
  padding: 22px 4px;
  color: var(--sumi-soft);
}

/* PC：トピックスも横幅を生かして見やすく */
@media (min-width: 1024px) {
  .topics-section {
    padding: 38px 52px 34px;
  }

  .topics-heading {
    margin-bottom: 6px;
  }

  .topics-heading h2 {
    font-size: 34px;
  }

  .topics-more {
    font-size: 15px;
  }

  .topics-link {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    column-gap: 22px;
    align-items: center;
    padding: 17px 40px 17px 4px;
  }

  .topics-meta {
    margin: 0;
  }

  .topics-item h3 {
    font-size: 17px;
  }

  .topics-item p {
    grid-column: 2;
    margin-top: 3px;
  }
}


/* トピックス一覧ページ */
.subpage-header {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 18px;
  background: var(--washi-deep);
  border-bottom: 1px solid var(--line);
}

.subpage-logo {
  width: 105px;
  flex: 0 0 auto;
}

.subpage-header p {
  margin: 0 0 3px;
  color: var(--ai);
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
}

.subpage-header h1 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(25px, 7vw, 38px);
  font-weight: 500;
}

.topics-page {
  padding: 24px 18px 60px;
  background: var(--washi-light);
}

@media (min-width: 1024px) {
  .subpage-header {
    padding: 25px 52px;
  }

  .subpage-logo {
    width: 135px;
  }

  .topics-page {
    padding: 35px 52px 80px;
  }
}
/* =====================================================
   大会期間中 LIVE特設エリア
   <section id="live-special"> 専用
===================================================== */

/* hidden が付いている時は非表示 */
#live-special[hidden] {
    display: none;
}

/* LIVE特設エリア全体 */
#live-special {
    width: 100%;
    box-sizing: border-box;

    /* 和紙系の背景色 */
    background-color: #f5efe2;

    /* 上下の赤ラインで大会中を強調 */
    border-top: 5px solid #b71919;
    border-bottom: 5px solid #b71919;

    /* 内側余白 */
    padding: 30px 20px;

    /* 文字色 */
    color: #211e1a;
}


/* ========================================
   スマートフォン
======================================== */

@media (max-width: 767px) {

    #live-special {
        padding: 25px 15px;
    }

}


/* ========================================
   タブレット
======================================== */

@media (min-width: 768px) {

    #live-special {
        padding: 35px 30px;
    }

}


/* ========================================
   PC
======================================== */

@media (min-width: 1024px) {

    #live-special {
        padding: 45px 50px;
    }

    /* 中身が横に広がりすぎないようにする */
    #live-special-content {
        max-width: 1100px;
        margin: 0 auto;
    }

}
/* ==========================================
   大会ポスターのサイズ調整
========================================== */

.live-poster {
    /* ポスターの最大横幅 */
    max-width: 350px;

    /* 中央配置 */
    margin: 0 auto 25px;
}

.live-poster img {
    width: 100%;
    height: auto;
    display: block;

    /* マウスを乗せた時にリンクだと分かる */
    cursor: pointer;

    /* 少し影を付ける */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);

    transition: transform 0.2s ease;
}

/* マウスを乗せた時 */
.live-poster a:hover img {
    transform: scale(1.02);
}
/* ==========================================
   フッターリンク：マウスオーバー
========================================== */

.footer-nav a {
    position: relative;
    transition: color 0.25s ease;
}

/* 下線を最初は隠しておく */
.footer-nav a::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0;
    height: 2px;

    background-color: #40596e;

    transition: width 0.25s ease;
}

/* マウスを置いた時 */
.footer-nav a:hover {
    color: #40596e;
}

/* 下線が左から伸びる */
.footer-nav a:hover::after {
    width: 100%;
}