@charset "utf-8"; /* ========================================================= tuku.html 専用CSS ※ 前提 ※ 共通 top-desc 系を「tukuページだけ」安全に上書き ========================================================= */ /* --------------------------------------------------------- 下層ページ用：top-desc の高さ制限解除（tuku限定） --------------------------------------------------------- */ body.tuku .top-desc-text-area{ height: auto !important; min-height: 0 !important; overflow: visible !important; display: block; } /* ========================================================= PC（750px以上）：tuku.html の説明ブロック ========================================================= */ @media screen and (min-width: 750px){ body.tuku .top-desc-text-area{ background-image: url("webp/08.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 60px 0 70px; width: 100%; clear: both; } body.tuku .top-desc-text-inner{ max-width: 1100px; margin: 0 auto; padding: 0 20px; line-height: 1.9; color: #ffffff; } body.tuku .top-desc-main-title{ text-align: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 40px; letter-spacing: 0.05em; } body.tuku .top-desc-columns{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } body.tuku .top-desc-col{ background: rgba(0, 0, 0, 0.35); padding: 24px 22px; border-radius: 8px; /* フェードイン用 */ opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; } body.tuku .top-desc-col.is-visible{ opacity: 1; transform: translateY(0); } body.tuku .top-desc-col.is-visible:hover{ transform: translateY(-4px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.45); } body.tuku .top-desc-col:nth-child(1){ transition-delay: 0.05s; } body.tuku .top-desc-col:nth-child(2){ transition-delay: 0.18s; } body.tuku .top-desc-col:nth-child(3){ transition-delay: 0.32s; } body.tuku .top-desc-col h3{ font-size: 1.2rem; margin-bottom: 12px; font-weight: 700; text-align: center; } body.tuku .top-desc-col h3::after{ content: ""; display: block; width: 40px; height: 2px; background: rgba(255,255,255,0.6); margin: 8px auto 0; } body.tuku .top-desc-col p, body.tuku .top-desc-col ul{ margin-top: 0; } body.tuku .top-desc-col ul{ padding-left: 1.2em; margin: 0; } body.tuku .top-desc-text-inner a{ color: #ffffff; text-decoration: underline; } body.tuku .top-desc-text-inner a:hover{ opacity: 0.8; } } /* ========================================================= SP（768px以下）：tuku.html の説明ブロック ========================================================= */ @media only screen and (max-width: 768px){ body.tuku .top-desc-text-area{ background-image: url("webp/08.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 40px 0 45px; } body.tuku .top-desc-text-inner{ max-width: 980px; margin: 0 auto; padding: 0 20px; line-height: 1.9; color: #ffffff; } body.tuku .top-desc-main-title{ font-size: 1.4rem; margin-bottom: 28px; line-height: 1.4; text-align: center; } body.tuku .top-desc-columns{ display: grid; grid-template-columns: 1fr; row-gap: 20px; margin-top: 24px; text-align: center; } body.tuku .top-desc-col{ background: rgba(0, 0, 0, 0.75); padding: 18px 20px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); } body.tuku .top-desc-col h3{ font-size: 1.15rem; margin-bottom: 10px; text-align: center; } body.tuku .top-desc-col p, body.tuku .top-desc-col li{ font-size: 0.95rem; line-height: 1.85; } body.tuku .top-desc-col ul{ margin-top: 4px; padding-left: 1.4em; } /* 3つ目のリストだけ左寄せ（必要な場合） */ body.tuku .top-desc-col:nth-child(3) ul{ display: inline-block; text-align: left; } }