@charset "UTF-8";/* ==========================================================================変数設定＆ルート設定========================================================================== */:root {--bg-color: #F9F8F6;--card-bg: #ffffff;--text-main: #333333;--text-sub: #666666;--navy: #1A2F4B;--accent: #D94625;--wave-color: rgba(26, 47, 75, 0.05);}/* ==========================================================================全体背景＆波の動くアニメーション========================================================================== */body {margin: 0;padding: 0;width: 100%;min-height: 100vh;background-color: #ffffe0;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Cpath d='M0 50c10-20 30-20 40 0s30 20 40 0s30-20 40 0s30 20 40 0M-40 0c10-20 30-20 40 0s30 20 40 0s30-20 40 0s30 20 40 0M-40 100c10-20 30-20 40 0s30 20 40 0s30-20 40 0s30 20 40 0' fill='none' stroke='%2387CEEB' stroke-width='2' stroke-opacity='0.15'/%3E%3C/svg%3E");background-repeat: repeat;background-size: 240px auto;background-attachment: fixed;animation: waveFlow 60s linear infinite;}@keyframes waveFlow {from { background-position: 0 0; }to { background-position: 200px 100px; }}/* ==========================================================================レイアウトコンテナ＆ヘッダー========================================================================== */.container {max-width: 100%;margin: 0 auto;padding: 180px 0px 180px;position: relative;z-index: 2;}.page-header {text-align: center;margin: 50px auto;background: rgba(255, 255, 255, 0.65);padding: 20px 0 36px;}.main-title {font-family: "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;font-size: 2.5rem;color: var(--navy);margin: 0;}.sub-title {color: var(--text-sub);font-size: 1.0rem;letter-spacing: 0.1em;}/* ==========================================================================Bento Grid（記事一覧レイアウト）========================================================================== */.bento-grid {display: grid;grid-template-columns: repeat(3, 1fr);grid-auto-rows: 220px;gap: 24px;max-width: 1100px;margin: auto;position: relative;z-index: 5;}.column-card {background: var(--card-bg);border-radius: 20px;overflow: hidden;box-shadow: 0 15px 35px rgba(26, 47, 75, 0.05);transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.5s ease, z-index 0s;background: rgba(255, 255, 255, 0.85);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);border: 1px solid rgba(255, 255, 255, 0.3);}.column-card:hover {transform: scale(1.05) translateY(-5px);box-shadow: 0 25px 50px rgba(26, 47, 75, 0.15);z-index: 10;}.large {grid-column: span 2;grid-row: span 2;}.medium {grid-column: span 1;grid-row: span 2;}.small {grid-column: span 1;grid-row: span 1;display: flex;flex-direction: row;align-items: stretch;background: rgba(255, 255, 255, 0.9);}.small .image-wrapper {width: 180px;height: 100%;flex-shrink: 0;overflow: hidden;}.small .image-wrapper img {width: 100%;height: 100%;object-fit: cover;object-position: center;transition: transform 0.6s ease;}.small .content-body {padding: 20px;flex-grow: 1;display: flex;flex-direction: column;justify-content: center;min-width: 0;}.small .column-title {font-size: 1.1rem;line-height: 1.5;color: var(--navy);display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}.large .card-overlay::after {content: '';position: absolute;bottom: 0;right: 0;width: 100px;height: 100px;background-image: url('data:image/svg+xml;base64,...');background-repeat: no-repeat;background-size: contain;opacity: 0.3;}/* ==========================================================================下層：記事詳細用の共通パーツ========================================================================== */.article-wrapper {max-width: 1180px;margin: 0 auto;padding: 40px 20px;}.article-hero {text-align: center;margin-bottom: -60px;position: relative;z-index: 2;}.hero-illustration {width: 100%;max-width: 145px;height: auto;filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));animation: float 6s ease-in-out infinite;position: absolute;top: 310px;right: 269px;}@keyframes float {0%, 100% { transform: translateY(0); }50% { transform: translateY(-15px); }}.article-title-box {margin-top: -20px;}.article-date {font-weight: bold;color: var(--accent);letter-spacing: 0.1em;display: block;margin-bottom: 10px;font-size: 1.6rem;}.article-title {font-family: 'Shippori Mincho', serif;font-size: 2.5rem;color: var(--navy);margin: 0;line-height: 1.3;}.article-content-card {background: #fff;backdrop-filter: blur(10px);border-radius: 32px;padding: 60px 120px 60px;box-shadow: 0 30px 60px rgba(26, 47, 75, 0.1);position: relative;z-index: 1;}.article-body {font-size: 1.1rem;line-height: 2.2;color: #444;margin-top: 40px;}.article-body p {margin-bottom: 22px;}.article-body p:first-of-type::first-letter {font-family: 'Shippori Mincho', serif;font-size: 3.5rem;color: var(--accent);float: left;margin-right: 15px;margin-top: 5px;line-height: 1;}.section-title {font-family: "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;font-size: 1.8rem;color: var(--navy);border-left: 4px solid var(--accent);padding-left: 20px;margin: 35px 0 30px;font-weight: 700;}.cta-container {text-align: center;margin-top: 60px;}.btn-buy {display: inline-block;background: var(--navy);color: white;padding: 20px 40px;border-radius: 50px;text-decoration: none;font-weight: bold;transition: all 0.3s ease;box-shadow: 0 10px 20px rgba(26, 47, 75, 0.2);}.btn-buy:hover {background: var(--accent);transform: translateY(-3px);box-shadow: 0 15px 30px rgba(217, 70, 37, 0.3);}/* ==========================================================================各種装飾要素（画像切り抜き・タグなど）========================================================================== */.image-wrapper {position: relative;width: 100%;height: 100%;overflow: hidden;}.image-wrapper img {width: 100%;height: 100%;object-fit: cover;transition: 0.6s;}.column-card:hover img {transform: scale(1.08);}.article-image-wrapper img {width: 100%;height: 450px;object-fit: cover;transition: 0.6s;object-position: 0px -68px;}.article-image-wrapper_osakana img {width: 100%;height: 450px;object-fit: cover;transition: 0.6s;object-position: 0px -110px;}.card-overlay {position: absolute;bottom: 0;left: 0;width: 100%;padding: 40px 30px;background: linear-gradient(to top, rgba(26, 47, 75, 0.8), transparent);color: white;}.content-body {padding: 30px;display: flex;flex-direction: column;justify-content: center;}.tag {color: var(--accent);font-weight: bold;font-size: 1.26rem;margin-bottom: 10px;display: block;text-shadow: 1px 1px 1px #fff;}.column-title {margin: 0;color: var(--navy);line-height: 1.4;border: none;}.large .column-title {font-size: 1.8rem;color: #fff;}.excerpt {line-height: 1.8em;font-size: 1.08rem;}.read-more {color: var(--navy);text-decoration: none;font-weight: bold;margin-top: 20px;font-size: 0.9rem;}/* ==========================================================================水泡（バブル）アニメーション（画面全体を昇る演出）========================================================================== */.bubble {position: fixed;bottom: -50px;background-color: rgba(255, 255, 255, 0.4);border: 1px solid rgba(255, 255, 255, 0.6);border-radius: 50%;pointer-events: none;z-index: 9999;animation: rise linear forwards;}@keyframes rise {0% { transform: translateY(0) translateX(0); opacity: 0; }10% { opacity: 1; }50% { transform: translateY(-50vh) translateX(25px); }100% { transform: translateY(-110vh) translateX(-15px); opacity: 0; }}/* ==========================================================================左右のお魚・足元の海藻（アクアリウム全体の共通管理）========================================================================== */.aquarium-area {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1;}/* 初期状態（ヘッダー領域）：すべて非表示 */.floating-illustration, .seaweed-elements {position: fixed;transition: opacity 0.5s ease, transform 0.3s ease;opacity: 0;pointer-events: none;}/* ★メインコンテンツ内に入ったら表示（画面固定化） */.aquarium-area.is-active .floating-illustration,.aquarium-area.is-active .seaweed-elements {opacity: 1;}/* ★フッター到達時：mainの底に吸着してスクロールに置いていかれるように静止 */.aquarium-area.is-bottom .floating-illustration,.aquarium-area.is-bottom .seaweed-elements {position: absolute;opacity: 1;}/* ---- 左右・右上のお魚配置 ＆ アニメーション ---- */.floating-illustration {top: 50%;transform: translateY(-50%);}.floating-illustration img {width: 100%;height: auto;max-width: 170px;}/* フッターにぶつかった際の静止位置（お魚3枚すべて一括制御） */.aquarium-area.is-bottom .floating-illustration {top: auto;bottom: 45vh;}.illustration-left {left: 20px;animation: floatLeft 8s ease-in-out infinite;}.illustration-right {right: 20px;animation: floatRight 10s ease-in-out infinite;}/* ★ブリ用の右上クラス */.illustration-right-top {right: 140px;top: 25%;animation: floatLeft 9s ease-in-out infinite;}.aquarium-area.is-bottom .illustration-right-top {top: auto;bottom: 65vh;}@keyframes floatLeft {0%, 100% { transform: translateY(0) translateX(0); }50% { transform: translateY(-15px) translateX(10px); }}@keyframes floatRight {0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }50% { transform: translateY(-10px) translateX(-5px) rotate(2deg); }}/* ---- 足元の海藻 ＆ 金目鯛 ---- */.seaweed-elements {bottom: 0;left: 0;width: 100%;height: 180px;z-index: 6;}.aquarium-area.is-bottom .seaweed-elements {bottom: 0;}.seaweed {position: absolute;bottom: 0;transform-origin: bottom;}.seaweed img {height: auto;width: 50%;}.sw-1 {left: 4%;bottom: -15px;animation: sway 5s ease-in-out infinite;}.sw-2 {left: 8%;bottom: -15px;animation: sway 6.5s ease-in-out infinite reverse;filter: hue-rotate(25deg) brightness(0.9);}.sw-3 {right: 5%;bottom: 80px;width: 28%;animation: floatRight 7s ease-in-out infinite;}.sw-3 img {width: 46%;}.sw-4 {right: 2%;bottom: -15px;animation: sway 5.5s ease-in-out infinite;filter: hue-rotate(-15deg) contrast(1.1);}@keyframes sway {0%, 100% { transform: rotate(-3deg) skewX(2deg); }50% { transform: rotate(4deg) skewX(-2deg); }}/* ==========================================================================レスポンシブ対応（スマホ・タブレット表示）========================================================================== */@media (max-width: 850px) {.aquarium-area {display: none !important;}.container {max-width: 100%;margin: 0 auto;padding: 66px 0px;position: relative;z-index: 1;}.bento-grid {grid-template-columns: 1fr;grid-auto-rows: auto;padding: 10px;gap: 16px;}.large, .medium, .small {grid-column: span 1;grid-row: auto;}.article-content-card {padding: 30px 20px 40px;}.article-title {font-size: 1.8rem;}.article-body {font-size: 1rem;}.page-header {text-align: center;margin: 20px auto 34px;background: rgba(255, 255, 255, 0.65);padding: 20px 0 36px;}.main-title {font-family: "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;font-size: 2.2rem;color: var(--navy);margin: 0;}.sub-title {color: var(--text-sub);font-size: 1.0rem;letter-spacing: 0.1em;padding: 0 12px 0;}.hero-illustration {width: 100%;max-width: 100px;height: auto;filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));animation: float 6s ease-in-out infinite;position: absolute;top: 330px;right: 12px;}.card-overlay {position: absolute;bottom: 0;left: 0;width: 100%;padding: 18px 16px;background: linear-gradient(to top, rgba(26, 47, 75, 0.8), transparent);color: white;}.content-body {padding: 20px;}.article-wrapper {max-width: 100%;margin: 0 auto;padding: 0px 10px;}.section-title {font-family: "Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;font-size: 1.68rem;color: var(--navy);border-left: 4px solid var(--accent);padding-left: 20px;margin: 20px 0 20px;font-weight: 700;}.article-image-wrapper img {width: 100%;height: 450px;object-fit: cover;transition: 0.6s;object-position: -120px -4px;}.article-image-wrapper_osakana img {width: 137%;height: 200px;object-fit: cover;transition: 0.6s;object-position: 0px -15px;}.small {flex-direction: column;}.small .image-wrapper {width: 100%;height: 150px;}}