@charset "utf-8";
/* CSS Document */

/*＝＝タグリセット＝＝*/
*,
::before,
::after {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

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

body {
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  font-size: 18px;
  color: #333333;
  line-height: 1.75;
  background-color: #fff;
}

/*ヘッダー*/
.header {
  padding-top: 8px;
}

.header::before {
  content: "";
  display: block;
  width: 100%;
  /* 横幅いっぱいに広げる */
  height: 25px;
  /* 画像の高さに合わせて調整してください */
  background-image: url(img/stitch.png);
  background-repeat: repeat-x;
  /* 横方向だけに画像を繰り返す */
  background-size: contain;
  /* 画像が潰れないように収める（必要に応じて調整） */
}

.header-inner {
  max-width: 1200px;
  margin: 15px auto;
  display: flex;

  position: relative;
}


/*==================================================
  ファーストビュー（背景画像エリア）の基本設定
==================================================*/
.first-view {
  max-width: 1280px;
  height: 700px;
  background-image: url(img/bg-main.jpg);
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;

  /* ★絶対配置（absolute）を使用するため、ここを基準点に設定 */
  position: relative;
}

/*==================================================
  1. スコアボード内の白い角丸四角エリア
==================================================*/
.scoreboard-text-area {
  position: absolute;
  
  /* スコアボードの黒い四角に合わせる位置指定 */
  top: 50%;         /* 上下位置（ズレていたらここを微調整） */
  left: 50%;        /* 左右中央 */
  transform: translate(-50%, -50%); 
  
  /* スコアボードに綺麗に収まるサイズ */
  width: 460px;     /* 横幅をpxで固定（はみ出し防止） */
  height: 156px;    /* 縦幅をpxで固定 */
  
  /* 白背景・黒文字・角丸 */
  background-color: rgba(255, 255, 255, 0.95); 
  color: #111111;   
  border-radius: 8px; 
  
  padding: 15px 20px;
  box-sizing: border-box;
  overflow: hidden; 
  
  /* 枠内のテキストを上下左右中央寄せ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  /* 軽い立体感の影 */
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.15);
  z-index: 2;
}

/* 記事タイトル（企業名・団体名など） */
.scoreboard-title {
  font-size: 1.25rem; 
  font-weight: bold;
  margin: 0 0 6px 0;
  letter-spacing: 0.05em;
  color: #17317D;     /* ドラゴンズブルー風 */
}

/* 記事本文 */
.scoreboard-body {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
  font-weight: 500;
}
.scoreboard-body p {
  margin: 0;
}

/*==================================================
  2. 応援メッセージボタンの配置（下の芝生の上）
==================================================*/
.first-view-text {
  position: absolute;
  
  /* 下の青いボタン背景に重なるように配置 */
  bottom: 2%;      /* ★ボタンが上下にズレていたらここを微調整 */
  left: 50%;
  transform: translateX(-50%);
  
  margin: 0;        /* 悪さをしていた margin-top をリセット */
  text-align: center;
  z-index: 3;       /* スコアボードより手前に出す */
}

/* ボタン単体の装飾 */
.btn-submit {
  display: inline-block;
  padding: 15px 30px;
  background-color: #F58220;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, transform 0.3s;
}

/* ボタンホバー効果 */
.btn-submit:hover {
  background-color: #386389;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contents {
  display: flex;
  justify-content: space-between;
  /* 左右に綺麗に振り分け */
  align-items: center;
  /* 上揃えにする */
  flex-direction: row;
  /* 横に並べる設定に変更 */
  max-width: 1200px;
  margin: 20px auto 50px;
}

.left {
  width: 65%;
  /* 左側の幅（必要に応じて width: 60%; などにしてもOK） */
}

.right {
  width: 30%;
  /* 右側（ポスター画像側）の幅を固定したい場合など */
}

/* ★PC用：スマホ用の画像エリアを非表示にする */
.sp-character-image {
  display: none;
}

.title-stitch{
  display: block;
  width: 100%;
  height: 25px;
  background-image: url(img/stitch.png);
  background-repeat: repeat-x;
  background-size: auto 25px;
  margin-top:30px;
}

.title h2::before {
  content: "";
  display: block;
  width: 100%;
  /* 横幅いっぱいに広げる */
  height: 25px;
  /* 画像の高さに合わせて調整してください */
  background-image: url(img/stitch.png);
  background-repeat: repeat-x;
  /* 横方向だけに画像を繰り返す */
  background-size: contain;
  /* 画像が潰れないように収める（必要に応じて調整） */
}

.title h2 {
  max-width: 1200px;
  height: 100px;
  background-image: 
  linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), /* 白い半透明の膜（50%の薄さ） */
  url(img/bat.png);
  margin: 30px auto;
  background-repeat: no-repeat;

  /* 追加：画像が枠からはみ出さないように、綺麗に収まるサイズに自動調整する */
  background-size: 700px auto;
  /* 必要に応じて画像の位置を中央寄せに */
  background-position: center;
  display: flex;
  align-items: center;      /* 垂直方向（上下）の真ん中 */
  justify-content: center;  /* 水平方向（左右）の真ん中 */
  gap: 150px; /* 画像と文字の間の距離（お好みで調整） */
}

.title h2::before{
  content: ""; 
  width: 120px;  /* 画像を表示する幅 */
  height: 120px; /* 画像を表示する高さ */
  background-image: url(img/ball.png); /* 前の画像パス */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.title h2::after{
  content: ""; 
  width: 120px;  /* 画像を表示する幅 */
  height: 120px; /* 画像を表示する高さ */
  background-image: url(img/ball.png); /* 前の画像パス */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.example{
  background-color: #F9F9F9;
  margin: 30px;
  padding-bottom: 50px;
}

.example h2{
  padding: 15px;
}

.example dl{
    padding-left: 60px;
    line-height: 1.5;
}

/*フッター*/
.footer {
  position: relative;
  margin-top: 15px;
  background-color: #17317D;
  color:#ffffff;
  line-height: 1.5;
  padding: 50px 0;
}
.footer-inner {
  text-align: center;
}


.footer::before {
  content: "";
  position: absolute;
  top: -50px;
  width: 100%;
  /* 横幅いっぱいに広げる */
  height: 25px;
  /* 画像の高さに合わせて調整してください */
  background-image: url(img/stitch.png);
  background-repeat: repeat-x;
  /* 横方向だけに画像を繰り返す */
  background-size: contain;
  /* 画像が潰れないように収める（必要に応じて調整） */
}

/* 最初はすべての記事を非表示にし、絶対配置で重ねる */
.scoreboard-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15px 20px; /* 内側の余白をアイテム側に持たせる */
  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease; /* 0.8秒かけてふわっと変化 */
}

/* 「active」というクラスがついた記事だけを表示する */
.scoreboard-item.active {
  opacity: 1;
  visibility: visible;
}

/* 元々あった .scoreboard-text-area の padding は 0 にしておきます */
.scoreboard-text-area {
  padding: 0 !important; 
}

/* ==================================================
  紙吹雪のスタイル
================================================== */
#confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 下のボタンやリンクをクリックできるようにする */
  z-index: 9999;        /* 一番手前に表示 */
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px; /* 画面の外（上）から降らせる */
  width: 10px;
  height: 10px;
  opacity: 0.8;
  animation: fall linear forwards;
}

/* 降りながら回転するアニメーション */
@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(105vh) rotate(720deg); /* 画面の一番下まで落ちる */
  }
}



@media (max-width: 767px) {
/* ==================================================
    ★追加：ヘッダーのスマホ対応
  ================================================== */
  .header {
    padding-top: 5px; /* 上の余白を少し詰める */
  }

 .title-stitch,
 .header::before, 
 .footer::before {
  height: 15px; /* 縫い目画像をスマホに合わせて少し小さく */
  background-size: auto 15px;
  }

  .header-inner {
    display: block;
    margin: 10px auto; /* ヘッダー内の余白をスマホ用にコンパクトに */
    padding: 0 15px;   /* 画面端に文字がくっつかないように左右に余白 */
  }

  .header h1 {
    font-size: 1.5rem; /* 文字が長くて2行に折れ曲がらないよう、小さく調整 */
    text-align: center;
    line-height: 1.4;
    width: 100%;
  }

  /* ==================================================
    ファーストビュー（828×1192の比率に合わせる）
  ================================================== */
  .first-view {
    background-image: url(img/bg-main-sp.jpg); /* 実際のファイル名に */
    
    /* 横幅いっぱいに広げたとき、縦横比（1:1.44）を崩さない自動計算に変えます */
    width: 100%;
    height: auto;
    aspect-ratio: 828 / 1192; /* 画像の比率を完全に固定 */
  }

  /* ==================================================
    1. スコアボード（縦長画像の中央〜やや上付近）
  ================================================== */
  .scoreboard-text-area {
    /* 縦長画像に合わせた位置調整。ズレていたらここをいじります */
    top: 50%;         /* ★黒枠がもっと下なら40%や42%に増やしてください */
    left: 50%;        
    transform: translate(-50%, -50%); 
    
    /* 画面幅に合わせて白い四角も縮小するように％（またはvw）で指定 */
    width: 78%;       /* 画面横幅の75%のサイズ */
    height: 25%;      /* 画面縦幅の15%のサイズ */
    padding: 12px;
  }

  /* 文字がはみ出さないようにスマホサイズに最適化 */
  .scoreboard-title {
    font-size: 1.1rem;
    margin: 0 0 4px 0;
  }
  .scoreboard-body {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* ==================================================
    2. 応援メッセージボタン（画像の下部の芝生）
  ================================================== */
  .first-view-text {
    /* 1192pxの高さに対して、下からどのくらい浮かすか */
    bottom: 5%;      /* ★ボタンを上に上げたい場合は15%などに増やしてください */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;       /* ボタンが長くなっても折れ曲がらないように余裕を持たせる */
  }
  
  .btn-submit {
    display: inline-block;
    width: auto;
    padding: 14px 28px;
    font-size: 0.95rem;
  }
/* ★スマホの時だけ、間に入れた画像を表示する */
  .sp-character-image {
    display: block;       /* 非表示を解除して表示 */
    width: 100%;
    max-width: 450px;     /* スマホ画面で大きすぎないようにサイズ制限 */
    margin: 0 auto;       /* 左右中央寄せ */
    padding: 20px 15px 0; /* 上に20pxの余白をあけて、ファーストビューとの間を調整 */
    box-sizing: border-box;
  }

  .sp-character-image img {
    width: 100%;          /* 枠に合わせてぴったり広げる */
    height: auto;
  }
/* 画面幅が 767px 以下（スマホ）になったら縦並びにする */
  .contents {
    flex-direction: column;
    /* 縦並びにする */
  }

  .left {
    width: 99%
  }
  .about{
    margin-left:20px;
    margin-right:20px;
  }
  .example dl{
    padding-left: 30px;
  }
  .right {
    width: 97%;
  }

 .left {
    margin-bottom: 30px;
    /* 縦に並んだときの下の隙間 */
  }

.title h2 {
  max-width: 98%;
  margin: 30px auto;
  background-image:
  linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), /* 白い半透明の膜（50%の薄さ） */
  url(img/bat-1.png);
  background-size:  250px auto;

  gap: 5px; /* 画像と文字の間の距離（お好みで調整） */
}

.title h2::before{
  content: ""; 
  width: 100px;  /* 画像を表示する幅 */
  height: 100px; /* 画像を表示する高さ */
}

.title h2::after{
  content: ""; 
  width: 100px;  /* 画像を表示する幅 */
  height: 100px; /* 画像を表示する高さ */
}


.footer {
 font-size:14px;
}
}