/* トップページのスタイル */
@charset "UTF-8";

/*=========================================================================================
メインビジュアル
==========================================================================================*/


/* === 全体レイアウト ============================== */
.headline, .headlinesp {
 /* ★変更点: 無地の背景色を指定 */
 background-color: #f4f6f8; /* 明るいグレーの無地背景 */
 text-align: center;
 margin: auto;
 font-weight: bold;
 
 /* flexboxで中央に配置 */
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh; /* 高さを画面全体に */
 padding: 2em 0;
}

.headline {
 font-size: 3rem;
 animation: fadein 3s forwards;
}

.headlinesp {
 display: none; /* スマホ以外では非表示 */
 font-size: 2rem;
}

/* フェードインアニメーション */
@keyframes fadein {
 0% { opacity: 0; }
 100% { opacity: 1; }
}


/* === 案内ボックスのデザイン ===================== */
.announcement-box {
 /* ★変更点: 無地背景に合わせて調整 */
 background-color: #ffffff; /* 背景を透明ではない白に変更 */
 border-radius: 16px;
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); /* 影を少し調整 */
 
 padding: 2.5em;
 margin: 1em;
 max-width: 800px;
 width: 90%;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* === テキストのデザイン ======================== */
.announcement-title {
 font-size: 2.2rem;
 font-weight: 700;
 color: #a30000;
 margin: 0 0 0.5em 0;
}

.announcement-text {
 font-size: 1.5rem;
 line-height: 1.7;
 color: #333;
 margin: 0 0 1.5em 0; /* ボタンとの余白を確保 */
}

/* === ボタンのデザイン ========================== */
.announcement-button {
 display: inline-block;
 background: linear-gradient(45deg, #a30000, #cc0000);
 color: #fff;
 font-size: 1.6rem; 
 font-weight: bold;
 text-decoration: none;
 padding: 14px 30px;
 border-radius: 50px; 
 transition: all 0.3s ease;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.announcement-button:hover {
 background: linear-gradient(45deg, #cc0000, #a30000);
 transform: scale(1.05); 
 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}


/* === スマートフォン表示の調整 ===================== */
@media screen and (max-width: 768px) {
 .headline { display: none; }
 .headlinesp { display: flex; } 

 .announcement-box {
  padding: 2em;
  width: 90%; /* ★★★ ここを100%から90%に修正しました ★★★ */
 }

 .announcement-title {
  font-size: 1.9rem; 
 }
 
 .announcement-text {
  font-size: 1.5rem; 
 }

 .announcement-button {
  font-size: 1.1rem; 
  padding: 12px 25px;
 }
}

@media screen and (max-width: 480px) {
 .headlinesp { font-size: 1.5rem; } 
 
 .announcement-title {
  font-size: 1.6rem; 
 }
 
 .announcement-text {
  font-size: 1.2rem; 
 }
}