/*
Theme Name: saunahouse Child
Version: 1.0
Template: saunahouse
*/
/* -------------------- */
/* グローバル設定 */
/* -------------------- */
/* --- グローバル設定 --- */
/* フォントのインポート */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@200;300;400;500;600;700;900&display=swap');
html {
overflow-y: scroll;
}
}
/* 全体のフォントと背景色、水平スクロールを無効に */
body {
font-family: 'Zen Kaku Gothic New', sans-serif; /* 日本語の基本フォント */
overflow-x: hidden;
background-color: #fff;
}
/* Poppinsを適用するクラス */
/* `scroll-indicator`のテキストと`about`セクションの英語タイトルに適用 */
.scroll-indicator,
.scroll-indicator span,
.about-section__title-en,
.scroll-indicator-horizontal {
font-family: 'Poppins', sans-serif; /* 英語表記にPoppinsを適用 */
}
/* Shippori Minchoを適用するクラス */
/* 「最高のととのい体験を。サウナの本質はここに。」と「心までととのう...」のタイトルに適用 */
.main-content__title,
.main-content__subtitle,
.intro-section__title,
.intro-section__description,
.about-section__subtitle-top {
font-family: 'Zen Old Mincho', serif; /* タイトルと本文にShippori Minchoを適用 */
}
/* スマートフォン表示時の左右のパディングを定義 */
/* 今後作成するすべてのセクションに適用 */
.section-padding-sp {
padding-left: 1.5rem; /* 値を増やす */
padding-right: 1.5rem; /* 値を増やす */
}
/* フェードアウト対象となる要素の基本スタイル（既存のスタイルに加えて記述） */
.main-content__title,
.main-content__subtitle,
.ext-xs.tracking-widest.mb-2 {
/* フェードアウトを滑らかにするための設定 */
transition: opacity 0.5s ease;
opacity: 1; /* 初期状態は完全に表示 */
}
/* JavaScriptでスクロール時に追加されるクラス */
.main-content__title.is-faded-out,
.main-content__subtitle.is-faded-out,
.ext-xs.tracking-widest.mb-2.is-faded-out {
opacity: 0;
pointer-events: none; /* フェードアウト後にクリックを無効化 */
}
/* JSで動かす要素のトランジションを全て無効化（最重要） */
.parallax-element {
transition: none !important;
transform: translate3d(0, 0, 0) !important;
}
/* ホバーエフェクトとの競合回避（PC版のホバー効果を無効化） */
@media (min-width: 768px) {
.about-section__images:hover .about-section__image {
transform: none !important;
transition: none !important;
}
}
/* -------------------- */
/* 背景動画 */
/* -------------------- */
/* 画面全体に固定する動画コンテナ */
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: -1; /* 他のコンテンツの下に配置 */
opacity: 1;
transition: opacity 1s ease-in-out;
}
.video-container.hidden {
opacity: 0;
visibility: hidden;
}
/* 動画のスタイル: 画面いっぱいに表示し、中央に配置 */
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover; /* コンテナに合わせて動画をトリミング */
}
/* -------------------- */
/* ヘッダー */
/* -------------------- */
/* -------------------------------------- */
/* --- Root Variables & Base Styles --- */
/* -------------------------------------- */
:root {
--color-bg: #f0f0ed; /* 背景色 (ライトテーマに戻す) */
--color-text-main: #1f2937; /* 主要な文字色 (黒系) */
--color-text-sub: #4b5563; /* サブテキスト、リンク通常色 (グレー) */
--color-text-lighter: #6b7280; /* 薄い文字色 */
--color-border: #d1d5db; /* 区切り線の色 */
--color-accent-hover: #111827; /* ホバー時のアクセントカラー */
/* アニメーション速度を遅く調整 */
--transition-speed: 500ms;
--menu-width: 300px; /* メニューの固定幅 */
--stagger-delay: 80ms; /* スタッガー遅延を広く */
}
/* -------------------------------------- */
/* --- Hamburger Button Styles (#menu-button) --- */
/* -------------------------------------- */
/* ハンバーガーボタン: Target #menu-button */
#menu-button {
background: none;
border: none;
cursor: pointer;
padding: 0.3rem;
display: flex;
flex-direction: column; /* 縦並び */
align-items: center;
justify-content: center;
gap: 0.15rem; /* アイコンと文字の間隔 */
color: currentColor; /* 親要素の text-white に合わせる */
transition: opacity 200ms;
z-index: 99999;
/* ユーザーのヘッダーに合わせるための調整 */
margin-right: -0.5rem; /* p-6 のパディングとの視覚的な調整 */
}
/* style.css: Line 93付近 */
#menu-button .hamburger-icon-lines {
/* ... 既存のスタイル ... */
width: 2.0rem; /* 1.25rem (20px) から 1.1rem (約17.6px) に縮小 */
height: 0.6rem; /* 1.25rem (20px) から 1.1rem (約17.6px) に縮小 */
display: flex;
flex-direction: column;
justify-content: space-between; /* 均等配置で線の重なりを防ぐ */
/* ... 既存のスタイル ... */
}
/* ボタン内のアイコンの線: Target .hamburger-line */
.hamburger-line {
display: block;
width: 100%;
height: 0.8px; /* 線の太さ */
background-color: currentColor; /* 親要素の色に合わせる */
transition: transform 300ms, opacity 300ms;
}
/* メニュー開閉時のアイコンアニメーション */
/* メニューが開くとき (Xマークに) */
#menu-button[aria-expanded="true"] .hamburger-line:nth-child(1) { /* 1本目 */
/* 2本線の上下中央で交差するように移動量を調整 */
transform: translateY(50%) rotate(45deg);
}
#menu-button[aria-expanded="true"] .hamburger-line:nth-child(2) { /* 2本目（元3本目） *
/* 2本線の上下中央で交差するように移動量を調整 */
transform: translateY(-50%) rotate(-45deg);
}パクトにする */
transform: translateY(-4.5px) rotate(-45deg);
}
/* ボタン内の文字 */
.menu-label {
font-size: 0.65rem; /* さらに小さく */
font-weight: 500;
margin-top: 0.1rem;
letter-spacing: 0; /* 文字間隔を詰める */
color: currentColor; /* 親要素の色に合わせる */
}
/* -------------------------------------- */
/* --- Menu Content & Overlay --- */
/* -------------------------------------- */
/* オーバーレイ (暗転部分) */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 48; /* メニューのすぐ下 */
opacity: 0;
visibility: hidden;
/* フェードアウト時のvisibility遅延あり */
transition: opacity var(--transition-speed) ease-in-out, visibility 0s linear var(--transition-speed);
}
.mobile-menu-overlay[aria-hidden="false"] {
opacity: 1;
visibility: visible;
transition: opacity var(--transition-speed) ease-in-out;
}
/* メニューコンテンツ (非表示状態) */
.mobile-menu-content {
background-color: var(--color-bg);
position: fixed;
top: 0;
right: 0;
width: var(--menu-width);
max-width: 100vw;
height: 100%;
padding: 1.5rem 1.2rem;
padding-top: 4.5rem; /* ヘッダーの高さ分を考慮 (約 3.5rem + alpha) */
overflow-y: auto;
z-index: 49;
/* メニュー全体アニメーション (フェードインとわずかなスライド) */
opacity: 0;
visibility: hidden;
transform: translateX(10%);
transition: opacity var(--transition-speed) cubic-bezier(.4, 0, .2, 1),
transform var(--transition-speed) cubic-bezier(.4, 0, .2, 1),
visibility 0s linear var(--transition-speed);
}
/* 画面幅がメニュー幅より狭い場合の調整 */
@media (max-width: 300px) {
.mobile-menu-content {
width: 100%;
}
}
/* メニューが開いた状態 */
.mobile-menu-content[aria-hidden="false"] {
opacity: 1;
visibility: visible;
transform: translateX(0);
box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
transition: opacity var(--transition-speed) cubic-bezier(.4, 0, .2, 1),
transform var(--transition-speed) cubic-bezier(.4, 0, .2, 1),
visibility 0s linear 0s;
}
/* -------------------------------------- */
/* --- Text Animation (下から上にフェードイン) --- */
/* -------------------------------------- */
/* ナビゲーションリスト内の要素の初期設定 */
.mobile-nav-list li,
.membership-item,
.mobile-footer-info {
opacity: 0;
transform: translateY(15px);
transition: opacity var(--transition-speed) ease-out,
transform var(--transition-speed) ease-out;
transition-delay: 0s;
}
/* メニューが開いた時、アイテムを順番に表示 */
.mobile-menu-content[aria-hidden="false"] .mobile-nav-list li,
.mobile-menu-content[aria-hidden="false"] .membership-item,
.mobile-menu-content[aria-hidden="false"] .mobile-footer-info {
opacity: 1;
transform: translateY(0);
}
/* スタッガー効果 (各リンクに遅延を設定) */
.mobile-menu-content[aria-hidden="false"] .mobile-nav-list li:nth-child(1) { transition-delay: calc(var(--stagger-delay) * 1); }
.mobile-menu-content[aria-hidden="false"] .mobile-nav-list li:nth-child(2) { transition-delay: calc(var(--stagger-delay) * 2); }
.mobile-menu-content[aria-hidden="false"] .mobile-nav-list li:nth-child(3) { transition-delay: calc(var(--stagger-delay) * 3); }
.mobile-menu-content[aria-hidden="false"] .mobile-nav-list li:nth-child(4) { transition-delay: calc(var(--stagger-delay) * 4); }
.mobile-menu-content[aria-hidden="false"] .mobile-nav-list li:nth-child(5) { transition-delay: calc(var(--stagger-delay) * 5); }
.mobile-menu-content[aria-hidden="false"] .mobile-nav-list li:nth-child(6) { transition-delay: calc(var(--stagger-delay) * 6); }
.mobile-menu-content[aria-hidden="false"] .mobile-nav-list li:nth-child(7) { transition-delay: calc(var(--stagger-delay) * 7); }
/* ボタンとフッター情報はまとめて表示 */
.mobile-menu-content[aria-hidden="false"] .membership-item { transition-delay: calc(var(--stagger-delay) * 8); }
.mobile-menu-content[aria-hidden="false"] .mobile-footer-info { transition-delay: calc(var(--stagger-delay) * 9); }
/* -------------------------------------- */
/* --- Nav Link Styles & Hover Effect --- */
/* -------------------------------------- */
/* ナビゲーションリスト */
.mobile-nav-list {
list-style: none;
padding: 0;
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 0.2rem; /* リンク間のスペースを詰める */
}
/* ナビゲーションリンク */
.mobile-nav-link {
display: block;
padding: 0.6rem 0.5rem;
font-size: 0.8rem; /* 小さめ */
font-weight: 500;
color: var(--color-text-main);
text-decoration: none;
letter-spacing: -0.01em; /* 文字間隔を詰める */
/* ホバー/アクティブ時のアップアニメーション準備 */
transition: background-color 200ms, transform 200ms ease-out;
transform: scale(1);
transform-origin: left center; /* 左端を基準に拡大 */
}
/* カーソルを合わせたとき（タッチデバイスではタップ時にも動作） */
.mobile-nav-link:hover,
.mobile-nav-link:active {
background-color: rgba(0, 0, 0, 0.05);
transform: scale(1.02); /* 2% 拡大 */
}
/* -------------------------------------- */
/* --- Button & Footer Info --- */
/* -------------------------------------- */
/* 会員権ボタンのリストアイテム */
.membership-item {
margin-top: 1.5rem;
list-style: none;
text-align: center; /* ボタンを中央揃えに */
padding-top: 1.5rem;
}
/* 会員権ボタン (塗りつぶしなし、枠線のみ) */
.mobile-button-link {
display: inline-block; /* 幅をコンテンツに合わせる */
width: auto;
text-align: center;
background-color: transparent;
color: var(--color-text-main); /* 文字色を黒に */
border: 1px solid var(--color-text-main); /* 枠線のみ */
padding: 0.6rem 1.2rem; /* ボタンを小さく */
font-size: 0.75rem; /* さらに小さく */
font-weight: 600;
letter-spacing: 0.05em;
transition: background-color 300ms, color 300ms, transform 200ms;
text-decoration: none;
}
.mobile-button-link:hover {
background-color: var(--color-text-main);
color: white; /* ホバー時に反転 */
transform: scale(1.03); /* ボタンにもわずかに拡大効果 */
}
/* メニュー下部の情報エリア */
.mobile-footer-info {
margin-top: 3rem;
padding-top: 1.5rem;
text-align: center;
}
/* 所在地情報 */
.mobile-address-text {
font-size: 0.7rem;
font-style: normal;
color: var(--color-text-sub);
margin-bottom: 1rem;
}
/* SNSアイコンコンテナ */
.mobile-social-links {
display: flex;
justify-content: center;
gap: 1.25rem;
margin-bottom: 1rem;
}
/* SNSアイコン */
.mobile-social-icon {
display: flex;
flex-direction: column;
align-items: center;
color: var(--color-text-main);
text-decoration: none;
transition: color 300ms;
}
.mobile-social-icon:hover {
color: var(--color-accent-hover);
}
.mobile-social-icon svg {
width: 1rem;
height: 1rem;
}
.mobile-social-icon span {
font-size: 0.6rem;
margin-top: 0.2rem;
font-weight: 300;
}
/* -------------------- */
/* メインコンテンツ*/
/* -------------------- */
.main-content {
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 1rem;
z-index: 10;
}
.main-content__title,
.main-content__subtitle {
opacity: 0;
animation: fadeInMoveUp 1s forwards;
}
.main-content__title {
font-size: 1.3rem;
font-weight: 300;
margin-bottom: 1rem;
}
.main-content__subtitle {
font-size: 1.3rem;
font-weight: 300;
animation-delay: 0.5s;
}
@media (min-width: 768px) {
.main-content__title,
.main-content__subtitle {
font-size: 2.75rem;
}
}
/*--- アニメーション ---*/
@keyframes fadeInMoveUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* -------------------- */
/* スクロールインジケーター */
/* -------------------- */
/* スクロールインジケーター全体を画面下部に固定 */
.scroll-indicator {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
/* インジケーターの線 */
.scroll-indicator .line {
width: 2px;
height: 40px;
background-color: white;
border-radius: 9999px;
position: relative;
}
/* インジケーターの点 */
.scroll-indicator .dot {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background-color: white;
border-radius: 50%;
animation: scroll-dot 1.5s ease-in-out infinite; /* ドットのアニメーション */
}
/* -------------------- */
/* アニメーション */
/* -------------------- */
/* スクロールインジケーターのドットアニメーション */
@keyframes scroll-dot {
0% { top: 0; opacity: 0; }
30% { opacity: 1; }
70% { top: 100%; opacity: 1; }
100% { top: 100%; opacity: 0; }
}
/* テキストのフェードイン＆上方向への移動アニメーション */
@keyframes fadeInMoveUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* アニメーションを適用するクラス */
.animate-fadeInMoveUp {
animation: fadeInMoveUp 1.2s ease-out forwards;
}
/* アニメーションに遅延を追加するクラス */
.animate-delay-500 {
animation-delay: 0.5s;
}
/* -------------------- */
/* メニューとボタン */
/* -------------------- */
/* ボタンのアクティブ状態のスタイル */
/* 既存のスタイルはそのまま */
/* style.css: Line 102付近 */
.hamburger-line {
display: block;
width: 100%;
/* ★修正: 線の太さを細くする (例: 1.5px → 1.2px) */
height: 1.2px;
background-color: currentColor;
transition: transform 300ms, opacity 300ms;
}
/* 全体設定 */
body {
font-family: 'Noto Sans JP', sans-serif;
overflow-x: hidden;
background-color: #000;
}
/* --------------------
全画面メニュー
-------------------- */
/* --------------------
全画面メニューの初期状態
(メニューが閉じている状態)
-------------------- */
#sp-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.95);
color: white;
z-index: 50; /* ボタン(z-index: 50)の下、ヘッダー(z-index: 30)の上 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-y: auto;
/* ★修正ポイント 1: 画面外 (右側) に完全に隠す ★ */
transform: translateX(100%);
opacity: 0;
visibility: hidden;
/* ★修正ポイント 2: transform/opacity/visibility すべてにアニメーションを設定 ★ */
/* 閉じる時は、0.5秒かけてスライドさせ、スライド後に非表示にする (0s 0.5s) */
transition: transform 0.5s ease-in-out,
opacity 0.5s ease-in-out,
visibility 0s 0.5s;
}
/* --------------------
メニューが表示された時のスタイル
(is-open クラスが付与された状態)
-------------------- */
#sp-menu.is-open {
opacity: 1;
visibility: visible;
/* ★修正ポイント 3: 画面内 (0) に移動させる ★ */
transform: translateX(0);
/* 開く時は、0.5秒かけてスライドさせ、すぐに表示する (0s 0s) */
transition: transform 0.5s ease-in-out,
opacity 0.5s ease-in-out,
visibility 0s 0s;
}
/* --------------------
ハンバーガーボタンのアニメーション
-------------------- */
/* menuButtonにis-activeが付与された時のスタイル */
#menu-button.is-active .hamburger-line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#menu-button.is-active .hamburger-line:nth-child(2) {
opacity: 0;
}
#menu-button.is-active .hamburger-line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* --------------------
ハンバーガーボタン
-------------------- */
/* ハンバーガーボタン全体 */
.hamburger {
position: fixed;
top: 1.5rem;
right: 1.5rem;
z-index: 51; /* メニューより前面に配置 */
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-end;
transition: transform 0.3s;
}
/* ハンバーガーボタンの線 */
.hamburger-line {
width: 100%;
height: 2px;
background-color: white;
border-radius: 99px;
transition: all 0.3s ease-in-out;
}
.hamburger.is-active .hamburger-line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.is-active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger.is-active .hamburger-line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* 新しいセクションの初期状態 */
.new-section {
background-color: #000;
transition: opacity 0.5s ease-out; /* アニメーションの時間を調整 */
opacity: 0; /* 初期状態は透明 */
}
/* スクロール位置に応じて不透明度を変更する */
/* このクラスはJavaScriptで動的に付与・削除されます */
.new-section.is-fading {
opacity: 1; /* 完全に不透明 */
}
/*======================================
2. セクションコンポーネント
======================================*/
/*--- 導入セクションの基本スタイル ---*/
.intro-section {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
color: var(--color-primary);
z-index: 20;
}
/* JSでスクロール時に付与するクラス */
.intro-section.is-visible {
opacity: 1;
}
.intro-section__container {
max-width: 64rem;
margin: 0 auto;
padding-top: 4rem;
padding-bottom: 4rem;
text-align: center;
}
.intro-section__title {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
.intro-section__description {
font-size: 0.9rem;
font-weight: 300;
max-width: 42rem;
line-height: 2;
margin: 0 auto 3rem;
}
.intro-section__logo-wrapper {
margin-top: 2rem;
}
.intro-section__logo {
height: 6rem;
width: auto;
margin: 0 auto;
}
/* レスポンシブ対応 */
@media (min-width: 768px) {
.intro-section__title {
font-size: 2.5rem;
}
.intro-section__description {
font-size: 1.25rem;
}
.intro-section__logo {
height: 8rem;
}
}
/*======================================
3. Overviewセクション (モダンデザインに改修)
======================================*/
#overview {
background-color: #f7f7f7; /* bg-gray-50 */
padding-top: 4rem; /* pt-20 */
color: #1d201f; /* text-gray-800 相当で視認性を確保 */
}
#overview {
position: relative;
}
/* ------------------------------------
* 2. Layout & Responsive Spacing
* ------------------------------------ */
@media (min-width: 768px) {
#overview {
padding-top: 5.0rem; /* md:pt-30 */
color: #1d201f; /* text-gray-800 相当で視認性を確保 */
}
}
/* モバイル表示時、Overviewセクション内のテキストの色を強制的に黒にする */
@media (max-width: 768px) {
#overview,
#overview h2,
#overview p,
#overview span {
color: #1d201f !important; /* #1f2937 を使って強制的に黒に近い色に設定 */
}
}
.u-section-space-inner {
position: relative;
z-index: 1;
}
/* FLEX LAYOUT: 見出し(左)と説明文(右)の配置 */
.main-content-flex {
display: flex;
flex-wrap: wrap; /* flex-wrap */
justify-content: space-between; /* justify-between */
gap: 2.5rem; /* gap-10 */
}
@media (min-width: 768px) {
.main-content-flex {
gap: 1rem; /* md:gap-20 */
padding-left: 8rem;
padding-right: 8rem;
}
}
/* 右側の説明文エリアの最大幅 */
.content-area {
max-width: 36rem; /* max-w-xl */
}
/* ------------------------------------
* 3. Typography and Headings
* ------------------------------------ */
/* 日本語サブタイトル本体のスタイルを簡素化 */
.japanese-subtitle {
display: block; /* ブロック要素にして縦に並ぶようにする */
font-weight: 500;
font-size: 0.75rem;
line-height: 1;
font-family: 'Zen Old Mincho', serif;
}
@media (min-width: 768px) {
.japanese-subtitle {
font-size: 1rem;
color: #666666; /* 落ち着いたグレー */
}
}
/* 下線要素のラッパー */
.subtitle-line-wrapper {
display: flex;
align-items: center;
/* Overviewとの間隔を調整するためのマージンをここで設定 */
/* PC表示で間隔を詰めるため、上マージンを調整 */
margin-top: 0.7rem; /* マイナス値でOverviewに近づける調整が可能 */
}
/* 下線要素のスタイルをラッパーの ::before に移動 */
.subtitle-line-wrapper::before {
content: '';
display: block;
background-color: currentColor;
height: 1px;
/* 下線の上部のマージンを削除 */
margin-top: 0;
width: 1.2rem;
margin-right: 0.5rem;
}
/* 【重要】heading-groupのrow-gapの調整 */
/* これでOverviewとsubtitle-line-wrapperの間隔を制御します */
@media (min-width: 768px) {
.heading-group {
/* Overviewの大きなフォントサイズを考慮し、この値をさらに小さく調整します */
row-gap: 0.2rem; /* 0.875remから大幅に削減 */
}
}
.text-fluid-heading {
font-size: 3.5rem;
line-height: 1; /* leading-none */
font-family: 'Poppins', serif;
}
/* PC Overviewの文字の大きさ、パディングボトムを設定*/
@media (min-width: 768px) {
.text-fluid-heading {
font-size: 2.8rem;
padding-bottom: 1rem;
font-family: 'Poppins', serif;
}
}
@media (max-width: 768px) {
.text-fluid-heading {
font-size: 2.3rem;
font-weight: 400;
line-height: 1; /* leading-none */
}
}
/* メインコピー */
.main-copy {
display: grid; /* grid */
font-size: 1.45rem; /* text-2xl */
line-height: 1.7; /* leading-relaxed (Approx) */
font-family: 'Zen Old Mincho', serif;
font-weight: 200;
}
@media (min-width: 768px) {
.main-copy {
font-size: 1.675rem; /* md:text-3xl */
}
}
/* パラグラフ */
.paragraph {
line-height: 2.5; /* leading-loose (Approx) */
letter-spacing: 0.05em; /* tracking-wider (Approx) */
}
.mt-6 { margin-top: 1.5rem; }
.mt-3 { margin-top: 0.75rem; }
@media (min-width: 768px) {
.md-mt-5 { margin-top: 1.25rem; }
}
.text-sm { font-size: 0.65rem; }
@media (min-width: 768px) {
.md-text-base { font-size: 1rem; }
padding-bottom: 1.0rem;
}
/* ======================================== */
/* ギャラリーセクション */
/* ======================================== */
.main-wrapper {
width: 100%;
position: relative;
min-height: 380px;
padding-top: 5.0rem; /* md:pt-30 */
padding-bottom: 40px; /* 下に大きな余白を確保 */
/* ギャラリーを画面中央に配置するため、max-widthを持つ親コンテナとして機能 */
margin: 0 auto;
/* ページの背景色と合わせた設定 */
background-color: #f7f7f7;
}
@media (max-width: 768px) {
padding-top: 5.0rem; /* md:pt-30 */
}
/* ======================================== */
/* ギャラリー固有のスタイル */
/* ======================================== */
/* プレビュー用のコンテナ（横スクロール領域） */
.carousel-wrapper {
overflow: hidden;
width: 100%;
position: relative;
height: 380px;
/* ボタンの空間を確保するため、パディングを削除 */
padding-bottom: 0;
}
/* 画像を保持するストリップ（アニメーション対象） */
.image-strip {
width: 3820px;
display: flex;
min-height: 380px;
gap: 20px;
}
/* 画像個別のスタイル */
.gallery-image {
width: 535px;
height: 380px;
object-fit: cover;
flex-shrink: 0;
border-radius: 6px;
}
/* ======================================== */
/* モダンなピル型ボタンのスタイル */
/* ======================================== */
.gallery-label {
/* ★修正点1: position: absolute を削除し、通常の流れに戻す */
/* ★修正点2: left/top/transform も削除 */
margin: 40px auto 0; /* 画像の下にスペースを確保し、中央寄せ */
width: auto; /* 幅をコンテンツに合わせる */
max-width: 300px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 1rem 2.5rem;
background-color: #ffffff;
border: 1px solid #000000;
border-radius: 9999px;
box-shadow: none;
z-index: 20;
display: flex; /* Flexboxは維持 */
justify-content: center;
align-items: center;
text-align: center;
}
.gallery-label span {
font-size: 1rem;
font-weight: 600;
color: #000000;
padding: 0;
}
/* ホバーエフェクト */
.gallery-label:hover {
background-color: #000000;
border-color: #000000;
/* ホバー時の transform を削除または調整 */
transform: scale(1.05); /* 拡大のみに修正 */
}
.gallery-label:hover span {
color: #ffffff;
}
/* ======================================== */
/* スクロールアニメーションのキーフレーム定義 */
/* ======================================== */
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1920px);
}
}
/* アニメーション適用 */
.image-strip {
animation: scroll-left 60s linear infinite;
}
/* ======================================== */
/* 画面が狭い場合のモバイル対応 */
/* ======================================== */
@media (max-width: 768px) {
.main-wrapper {
padding-top: 20px;
padding-bottom: 0px;
margin-top: 0;
margin-bottom: 0;
}
.image-strip > * {
flex-shrink: 0;
}
.gallery-image {
width: 85vw;
height: calc(85vw * 380 / 535);
max-height: 380px;
}
.carousel-wrapper {
padding: 0;
height: 60vw;
/* モバイルでのボタン高さ調整を削除 */
padding-bottom: 0;
}
.gallery-label {
width: 200px;
padding: 0.75rem 2rem;
font-size: 0.9rem;
transform: none; /* モバイルでの transform を削除 */
}
.gallery-label:hover {
transform: scale(1.05);
}
}
/*======================================
4. Room Tourセクション
======================================*/
.roomtour-section {
background-color: #f7f7f7;
padding: 6rem 1.5rem;
color: #000;
position: relative;
z-index: 2;
}
.roomtour-section__container {
max-width: 1200px;
margin: 0 auto;
}
/* ヘッダー部分 */
.roomtour-section__header {
border-top: 1px solid #ccc;
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 2rem;
}
.roomtour-section__title-en {
font-family: 'Poppins', sans-serif;
font-size: 1.5rem;
font-weight: 400;
margin: 0;
}
.roomtour-section__title-ja {
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
}
/* 説明文 */
.roomtour-section__description-wrapper {
text-align: center;
margin-bottom: 4rem;
}
.roomtour-section__description {
font-family: 'Zen Old Mincho', serif;
font-size: 0.9rem;
font-weight: 300;
max-width: 600px;
margin: 0 auto;
line-height: 1.8;
}
/* 画像とテキストのレイアウト */
.roomtour-section__content {
display: flex;
flex-direction: column;
gap: 3rem;
}
.roomtour-section__row {
display: flex;
flex-direction: column;
gap: 2rem;
}
.roomtour-section__text-wrapper {
text-align: center;
}
.roomtour-section__item-text {
font-family: 'Zen Kaku Gothic New', serif;
font-size: 1.0rem;
font-weight: 700;
text-align: center;
}
.roomtour-section__images-wrapper {
display: flex;
flex-direction: column;
gap: 2rem;
}
.roomtour-section__image-container {
width: 100%;
/* 統一された高さ */
height: 300px;
overflow: hidden;
position: relative;
}
.roomtour-section__image {
width: 100%;
/* コンテナの高さに合わせる */
height: 100%;
/* 🌟 トリミングせず、縦横比を維持したまま全体を収める */
object-fit: contain;
display: block;
border-radius: 5px;
}
/* --- PC版のレイアウト調整 --- */
@media (min-width: 768px) {
.roomtour-section {
padding: 10rem 2rem;
}
.roomtour-section__header {
max-width: 1200px;
margin: 0 auto 3rem;
}
.roomtour-section__row {
flex-direction: column;
gap: 2rem;
}
.roomtour-section__text-wrapper {
text-align: left;
}
.roomtour-section__images-wrapper {
flex-direction: row;
align-items: flex-start;
gap: 2rem;
}
.roomtour-section__image-container {
flex: 1;
height: auto;
}
.roomtour-section__item-text {
font-size: 1.0rem;
text-align: left;
}
.roomtour-section__title-en {
font-size: 2rem;
}
.roomtour-section__title-ja {
font-size: 1.5rem;
}
.roomtour-section__description {
font-size: 1.25rem;
}
}
@media (max-width: 768px) {
.roomtour-section__image {
border-radius: 5px;
}
}
/* ---------------------------------- */
/* 1. 魅力 (Highlights) セクション */
/* ---------------------------------- */
.highlights-section {
background-color: #000000;
padding: 6rem 1.5rem;
color: #fff;
position: relative;
z-index: 3;
}
/* コンテナ */
.l-container {
max-width: 1200px;
margin: 0 auto;
}
.highlights-header {
border-top: 1px solid #ccc;
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 2rem;
}
.highlights-title-en {
font-family: 'Poppins', sans-serif;
font-size: 1.5rem;
font-weight: 400;
margin: 0;
}
.highlights-title-ja {
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
}
/* --- PC版のレイアウト調整 --- */
@media (min-width: 768px) {
.highlights-section {
padding: 10rem 2rem;
}
.highlights-header {
max-width: 1200px;
margin: 0 auto 3rem;
}
.highlights-title-en {
font-size: 2rem;
}
.highlights-title-ja {
font-size: 1.5rem;
}
}
/* ---------------------------------- */
/* 2. 製品一覧セクション */
/* ---------------------------------- */
.refresh-gallery {
padding-top: 0;
padding-bottom: 3rem;
}
/* グリッドコンテナ */
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap);
}
@media (min-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* カードアニメーション */
.gallery-card {
opacity: 0;
border-radius: 0.375rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
position: relative;
}
.gallery-card:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.gallery-card.animate-visible {
animation: fadeInUp 0.8s ease-out forwards;
}
.gallery-card:nth-child(2) { animation-delay: 0.1s; }
.gallery-card:nth-child(3) { animation-delay: 0.2s; }
.gallery-card:nth-child(4) { animation-delay: 0.3s; }
.gallery-card:nth-child(5) { animation-delay: 0.4s; }
.gallery-card:nth-child(6) { animation-delay: 0.5s; }
.card-link {
display: block;
text-decoration: none;
color: inherit;
}
/* メディアコンテナ: 【修正】アスペクト比を安定化 */
.media-container {
position: relative;
width: 100%;
aspect-ratio: 4 / 3; /* 4:3のアスペクト比を維持 */
background-color: #f3f4f6;
}
.media-figure {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
line-height: 0;
}
/* 画像: 【修正】コンテナを完全に覆い、途切れて見えることを防ぐ */
.media-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.gallery-card:hover .media-image {
transform: scale(1.05);
}
/* オーバーレイ: 【修正】中央にテキスト、右下にアイコンを配置 */
.cover-layer {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
padding: var(--padding-sm);
display: flex;
flex-direction: column;
justify-content: center; /* メインテキストを中央に */
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.gallery-card:hover .cover-layer {
opacity: 1;
}
/* 【追加】中央表示用テキスト */
.cover-text-main {
font-size: 1.2rem;
font-weight: 700;
margin: 0;
flex-grow: 1; /* アイコンを下に押し出す */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* cover-footer: 【修正】絶対配置で右下に固定（アイコンのみ） */
.cover-footer {
position: absolute;
bottom: 1rem;
right: 1rem;
width: auto;
display: flex;
justify-content: flex-end;
align-items: center;
padding-top: 0;
border-top: none;
}
/* プラスアイコン: スタイルの変更なし */
.detail-icon {
position: relative;
width: 1.25rem;
height: 1.25rem;
border: 1px solid #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s, border-color 0.3s;
}
.gallery-card:hover .detail-icon {
transform: rotate(90deg);
border-color: var(--accent-color);
}
.detail-icon-h,
.detail-icon-v {
position: absolute;
background-color: #fff;
transition: background-color 0.3s;
}
/* 横線 */
.detail-icon-h {
width: 0.625rem;
height: 2px;
}
/* 縦線 */
.detail-icon-v {
width: 2px;
height: 0.625rem;
}
.gallery-card:hover .detail-icon-h,
.gallery-card:hover .detail-icon-v {
background-color: var(--accent-color);
}
/* ---------------------------------- */
/* 3. モーダル (ダイアログ) */
/* ---------------------------------- */
.fullscreen-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.95);
z-index: 50;
display: none;
opacity: 0;
transition: opacity 1s ease-in-out;
align-items: center;
justify-content: center;
}
.fullscreen-dialog.is-active {
opacity: 1;
display: flex;
}
.dialog-inner {
width: 100vw;
height: 100vh;
background-color: #fff;
overflow-y: auto;
display: flex;
flex-direction: column;
position: relative;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.dialog-inner.is-ready {
opacity: 1;
}
/* 閉じるボタン */
.dialog-close-btn {
position: absolute;
top: 1rem;
right: 1rem;
color: #9ca3af;
font-size: 2.25rem;
font-weight: 300;
line-height: 1;
transition: color 0.3s;
z-index: 20;
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
}
.dialog-close-btn:hover {
color: #111827;
}
/* 画像エリア: モーダル画像が表示されない問題に対応 */
.dialog-media-area {
height: 50vh;
min-height: 250px;
width: 100%;
position: relative;
overflow: hidden;
background-color: #f3f4f6;
}
@media (min-width: 768px) {
.dialog-media-area {
height: 70vh;
}
}
.dialog-media-area .media-image {
width: 100%;
height: 100%;
object-fit: cover; /* 画像が領域を完全に埋める */
}
/* テキストエリア */
.dialog-text-area {
width: 100%;
background-color: #fff;
padding: var(--padding-lg);
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
}
.dialog-content-inner {
max-width: 48rem;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #374151;
margin-top: var(--padding-lg);
margin-bottom: var(--padding-lg);
line-height: 2.5;
}
.dialog-content-inner h4 {
font-size: var(--font-size-base);
font-weight: 700;
margin: 0;
}
.dialog-content-inner p {
font-size: var(--font-size-sm);
font-weight: 400;
margin-top: 1.5rem;
margin-bottom: 0;
}
/*======================================
4. Priceセクション
======================================*/
.price-section {
background-color: #ffffff;
padding: 6rem 1.5rem;
color: #000;
position: relative;
z-index: 2;
}
.price-section__container {
max-width: 1200px;
margin: 0 auto;
}
/* ヘッダー部分 */
.price-section__header {
border-top: 1px solid #ccc;
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 2rem;
}
.price-section__title-en {
font-family: 'Poppins', sans-serif;
font-size: 1.5rem;
font-weight: 400;
margin: 0;
color: #000000;
}
.price-section__title-ja {
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
color: #000000;
}
/* --- コンテンツエリア --- */
.container-wrapper {
padding: 1rem 1rem;
}
.pricing-content-area {
max-width: 1200px;
margin: 0 auto;
font-size: 1rem;
}
/* --- セクション見出し (都度利用料金 / サービス) --- */
.section-heading-container {
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.section-heading {
font-size: 1.1rem;
font-weight: 700;
color: #1f2937;
margin-right: 1rem;
white-space: nowrap;
}
.section-divider {
flex-grow: 1;
border-top: 1px solid #d1d5db;
}
/* --- DAY USE / NIGHT セクション見出し (黒背景) --- */
.category-heading {
font-size: 1.0rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 1rem;
background-color: #111827;
padding: 0.75rem 1rem;
border-radius: 0.375rem;
border: 1px solid #111827;
}
/* =============================== */
/* 【重要修正】カードレイアウトとグリッドの調整 */
/* =============================== */
.price-grid-3, .price-grid-2 {
display: grid;
grid-template-columns: 1fr; /* モバイル: 1列 */
gap: 1.5rem;
/* 【重要】Gridの子要素の高さを自動で揃える */
align-items: stretch;
}
/* --- 料金カード共通スタイル --- */
.price-card {
background-color: #ffffff;
padding: 1.5rem 2rem;
border-radius: 0.375rem;
border: 1px solid #e5e7eb;
transition: transform 0.3s, background-color 0.3s;
cursor: pointer;
/* 【重要】カード内のコンテンツを上揃え、価格部分を下端に固定 */
display: flex;
flex-direction: column;
height: 100%; /* 親グリッドの高さに合わせる */
}
.price-card:hover {
transform: translateY(-3px);
background-color: #f3f4f6;
}
.plan-name {
font-size: 1rem;
font-weight: 700;
color: #4b5563;
margin-bottom: 0.25rem;
}
.plan-time {
font-size: 0.8rem;
color: #6b7280;
/* 【重要】価格表示より上の部分に余白を集中させ、価格を下に押しやる */
margin-bottom: auto;
}
.plan-price {
font-size: 1.5rem;
font-weight: 500;
margin-top: 1rem; /* 価格の上にスペースを確保 */
}
.plan-unit {
font-size: 1rem;
font-weight: 500;
color: #4b5563;
margin-left: 0.25rem;
}
.plan-tax {
font-size: 0.75rem;
color: #6b7280;
margin-top: 0.5rem;
}
/* 強調表示カード (dark-mode) の配色調整 */
.price-card.dark-mode {
background-color: #111827;
color: #ffffff;
border: 1px solid #111827;
}
.price-card.dark-mode .plan-name,
.price-card.dark-mode .plan-unit {
color: #ffffff;
}
.price-card.dark-mode .plan-time,
.price-card.dark-mode .plan-tax {
color: #9ca3af; /* text-gray-400 */
}
/* --- タグ (夜間 / 終日貸切) --- */
.plan-tag {
padding: 0.25rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
border-radius: 0.375rem;
background-color: #d1d5db;
color: #374151;
}
/* =============================== */
/* サービスリスト */
/* =============================== */
.service-list-container {
padding: 1.5rem;
background-color: #ffffff; /* var(--color-card-bg) の値が #ffffff のため */
border-radius: 0.375rem;
border: 1px solid #e5e7eb;
}
.service-list-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0 2rem;
}
.service-list {
list-style: none;
padding: 0;
margin: 0;
}
.service-list-item {
display: flex;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px dashed #e5e7eb;
}
.service-list-item-first-col {
/* 最初の列のリストのみの区切り線 */
border-bottom: 1px dashed #e5e7eb;
}
.service-list-icon {
color: #1f2937; /* var(--color-text-dark) の値が #1f2937 のため */
margin-right: 0.5rem;
font-size: 1.1rem;
}
/* --- 会員権購入ボタン --- */
.membership-link-container {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
text-align: center;
}
.membership-link {
display: inline-block;
font-size: 0.875rem;
font-weight: 700;
/* var(--color-text-dark) と var(--color-accent-light) が未定義のため、一旦デフォルトの #1f2937 と #ffffff を仮定 */
border: 1px solid #1f2937;
color: #1f2937;
padding: 0.5rem 1rem;
border-radius: 9999px;
text-decoration: none;
transition: all 0.2s ease-in-out;
}
.membership-link:hover {
background-color: #1f2937;
color: #ffffff;
}
/* --- アニメーション --- */
@keyframes pulse-grow {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
}
50% {
transform: scale(1.01);
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.animate-pulse-grow {
animation: pulse-grow 2.5s infinite ease-in-out;
}
/* --- フッター --- */
.pricing-footer {
margin-top: 3rem;
text-align: center;
color: #6b7280;
font-size: 0.8rem;
padding: 1rem;
border-top: 1px solid #d1d5db;
}
/* =============================== */
/* 【重要修正】レスポンシブ (md: 768px以上) */
/* =============================== */
@media (min-width: 768px) {
/* Priceセクションのパディング */
.price-section {
padding: 10rem 2rem;
}
/* Priceセクションのヘッダー調整 */
.price-section__header {
max-width: 1200px;
margin: 0 auto 3rem;
}
/* タイトルフォントサイズ */
.price-section__title-en {
font-size: 2rem;
}
.price-section__title-ja {
font-size: 1.5rem;
}
/* コンテナラッパーのパディング */
.container-wrapper {
padding: 1rem 1rem;
}
/* 会員権購入ボタンの配置 */
.membership-link-container {
text-align: left;
}
/* グリッドレイアウトの変更 */
.price-grid-3 {
grid-template-columns: repeat(3, 1fr); /* 3列1行 */
}
.price-grid-2 {
grid-template-columns: repeat(1, 1fr); /* 1列のまま (元のCSSの意図を尊重) */
}
/* サービスリストの2列化 */
.service-list-grid {
grid-template-columns: repeat(2, 1fr);
}
/* サービスリストの区切り線調整 */
.service-list-grid .service-list:nth-child(2) {
padding-top: 0;
}
.service-list-grid .service-list:nth-child(2) .service-list-item {
border-top: none;
}
.service-list-grid .service-list:first-child .service-list-item:nth-last-child(-n+1),
.service-list-grid .service-list:nth-child(2) .service-list-item:nth-last-child(-n+1) {
border-bottom: none;
}
}
/* --- モバイル版の配色調整 (冗長な定義を削除) --- */
@media (max-width: 768px) {
.price-section {
/* 既にデフォルトで color: #000; が指定されているため、重複を避ける */
/* color: #000; */
}
}
/*======================================
4. Areaセクション
======================================*/
.area-section {
background-color: #111111;
padding: 6rem 1.5rem;
color: #fff;
position: relative;
z-index: 2;
}
.area-section__container {
max-width: 1200px;
margin: 0 auto;
}
/* ヘッダー部分 */
.area-section__header {
border-top: 1px solid #fff;
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 2rem;
}
.area-section__title-en {
font-family: 'Poppins', sans-serif;
font-size: 1.5rem;
font-weight: 400;
margin: 0;
color: #ffffff;
}
.area-section__title-ja {
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size: 1.2rem;
font-weight: 700;
margin: 0;
color: #ffffff;
}
/* --- PC版のレイアウト調整 --- */
@media (min-width: 768px) {
.area-section {
padding: 10rem 2rem;
}
.area-section__header {
max-width: 1200px;
margin: 0 auto 3rem;
}
.area-section__title-en {
font-size: 2rem;
}
.area-section__title-ja {
font-size: 1.5rem;
}
}
/* -------------------------------------- */
/* 0. Keyframes (アニメーション定義) */
/* -------------------------------------- */
/* ポインターの点滅（パルス）アニメーション */
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.4); /* 1.4倍に拡大 */
opacity: 1; /* 透明度を上げる */
}
100% {
transform: scale(1);
opacity: 0.5;
}
}
/* 新しい線の描画とフェードアウトのサイクル */
@keyframes animatedLineCycle {
0% {
stroke-dashoffset: 110; /* 完全に隠す */
opacity: 0;
}
10% { /* 描画開始 (スムーズなスタートのために不透明度を上げる) */
opacity: 1;
}
50% { /* 線の描画完了 (stroke-dashoffset: 0) */
stroke-dashoffset: 0;
opacity: 1;
}
75% { /* 描画完了状態をホールド (不透明度1を維持) */
stroke-dashoffset: 0;
opacity: 1;
}
90% { /* フェードアウト開始 */
stroke-dashoffset: 0;
opacity: 0;
}
100% { /* フェードアウト完了＆次のループのために初期状態に戻る */
stroke-dashoffset: 110; /* 初期オフセット値に戻す */
opacity: 0;
}
}
/* 全体要素のフェードイン＆スライドアップ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* -------------------------------------- */
/* 2. FLEXBOX レイアウト */
/* -------------------------------------- */
.main-layout {
display: flex;
max-width: 1200px;
width: 100%;
margin: 0 auto;
gap: 50px; /* 項目間のスペースを広めに設定 */
align-items: center; /* 上下中央揃えに設定 */
justify-content: center;
}
/* -------------------------------------- */
/* 3. 情報パネル (左側) */
/* -------------------------------------- */
.info-panel {
flex: 1;
min-width: 350px;
padding: 20px 0; /* 枠線や影がないため、シンプルなパディング */
/* 全体フェードイン */
opacity: 0;
animation: fadeInUp 1s ease-out 0.2s forwards;
}
/* ロゴのスタイル */
.area-logo-container {
text-align: center;
margin-bottom: 20px;
}
.area__logo {
width: 60px; /* ロゴのサイズ */
height: auto;
opacity: 0;
animation: fadeInUp 0.8s ease-out 0.8s forwards;
}
/* タイトルスタイル */
.area-title {
color: #ffffff; /* 白 */
margin: 0 0 25px 0;
text-align: center;
font-family: 'Shippori Mincho', sans-serif;
font-weight: 300;
font-size: 0.9rem; /* text-sm */
padding-bottom: 1rem;
}
@media (min-width: 768px) {
.area-title {
font-size: 1.25rem; /* text-sm */
}
}
/* 交通情報コンテナ */
.transport-info-block {
display: flex;
flex-direction: column;
gap: 15px;
margin: 0 auto;
width: fit-content;
}
/* 各交通情報のブロック */
.transport-info {
display: flex;
/* **修正**：アイテムが縦方向で中央に揃うように設定 */
align-items: flex-start;
padding: 10px;
/* 順次フェードインアニメーション */
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
}
/* アニメーションの開始時間をずらす (順次表示) */
/* 1番目の要素 */
.transport-info-block .transport-info:nth-child(1) {
animation-delay: 1.0s;
}
/* 2番目の要素 */
.transport-info-block .transport-info:nth-child(2) {
animation-delay: 1.2s;
}
/* 電車ロゴ画像 */
.train__logo {
width: 30px;
height: auto;
margin-right: 15px;
margin-top: 5px; /* テキストとの縦方向の調整 */
}
.train-details {
line-height: 1.5;
}
/* 路線名 */
.train-line {
font-weight: 400;
color: #ffffff;
margin: 0;
}
/* 徒歩圏内詳細 */
.station-detail {
font-size: 0.9rem;
color: #aaaaaa;
margin: 0;
}
/* -------------------------------------- */
/* 4. SVG地図ビュー (右側) */
/* -------------------------------------- */
.map-view {
flex: 2;
min-width: 450px;
/* 全体フェードイン（時間差） */
opacity: 0;
animation: fadeInUp 1s ease-out 0.5s forwards;
}
.map-container {
/* 枠や影を削除したため、シンプルにSVGを保持 */
overflow: hidden;
}
svg {
display: block;
width: 100%;
height: auto;
/* 地図の区画が見えるように、背景色を維持 */
}
/* SVG地図の区画 (ベースカラー) */
.tokyo-map path {
stroke: none;
transition: fill 0.3s;
}
/* 4. SVG地図ビュー (右側) のセクション */
.cls-3 {
fill: none;
stroke: #ffffff;
stroke-width: 0.5px;
}
/* -------------------------------------- */
/* 5. SVGポインター＆ラインアニメーション */
/* -------------------------------------- */
/* 接続線 (M 200 150 L 350 150 -> 長さ約150px) */
/* 接続線 (M 90 122 L 200 122 -> 長さ110px) */
.animated-line {
stroke-dasharray: 110;
/* stroke-dashoffset: 110; は Keyframes 内で処理 */
stroke: #ffffff;
/* 描画・フェードアウトのサイクルを適用 */
/* drawLineをanimatedLineCycleに変更。全体の実行時間を4.0秒に設定。 */
animation: animatedLineCycle 4.0s ease-in-out 1.5s infinite;
}
/* ポインターのベース円 */
.minato-marker {
fill: #ffffff;
}
/* ポインターのパルス円 */
.minato-pulse-marker {
fill: #ffffff;
/* cy=150 / viewBox Height=400 = 0.375 (37.5%) */
/* cx=350 / viewBox Width=600 = 0.5833 (58.33%) */
transform-origin: 52.92% 33.13%;
animation: pulse 1.5s infinite ease-in-out 1.5s;
/* グロー効果（影）を削除し、純粋なパルスのみ */
opacity: 0.7;
}
/* -------------------------------------- */
/* 6. レスポンシブ対応 (モバイル) */
/* -------------------------------------- */
@media (max-width: 768px) {
.main-layout {
flex-direction: column; /* 縦積み */
gap: 20px;
}
.info-panel,
.map-view {
width: 100%;
min-width: auto;
}
.area-title {
font-size: 1.3rem;
}
.transport-info {
padding: 8px;
}
}
/* -------------------------------------- */
/* フッター */
/* -------------------------------------- */
/* --- Root Variables --- */
:root {
/* 明るいテーマの配色 */
--color-bg: #f0f0ed; /* 背景色 */
--color-text-main: #1f2937; /* 主要な文字色 (黒系) */
--color-text-sub: #4b5563; /* サブテキスト、リンク通常色 (グレー) */
--color-text-lighter: #6b7280; /* 著作権など薄い文字色 */
--color-border: #d1d5db; /* 区切り線の色 */
--color-accent-hover: #111827; /* ホバー時のアクセントカラー */
}
/* --- Base Styles for PHP/HTML Structure --- */
body {
font-family: 'Inter', 'Noto Sans JP', sans-serif;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* --- Footer Container (.footer) --- */
.footer {
background-color: var(--color-bg);
color: var(--color-text-main);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
/* アニメーション */
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* 内部コンテンツコンテナ (max-w-7xl mx-auto py-40 px-4) */
.footer-container {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 5rem 5rem; /* py-40, px-4 (sm:px-6, lg:px-8は省略) */
position: relative;
}
/* --- Main Grid (.footer-content) --- */
.footer-content {
display: grid;
gap: 2rem; /* gap-8 */
}
@media (min-width: 768px) {
.footer-content {
grid-template-columns: 280px 1fr;
gap: 3rem; /* md:gap-12 */
}
}
/* --- Left Column (.footer-left) --- */
.footer-left {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-bottom: 2rem; /* pb-8 */
border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) {
.footer-left {
border-right: 1px solid var(--color-border);
border-bottom: none;
padding-right: 2.5rem; /* md:pr-10 */
}
}
/* ロゴ */
.logo-link {
display: block;
margin-bottom: 1.5rem;
width: 10rem; /* w-40 */
height: auto;
}
/* SVGロゴを黒にするフィルタ (明るい背景用) */
.logo-to-black {
filter: grayscale(100%) brightness(0);
}
/* 所在地情報 */
.address-text {
margin-top: 1rem;
font-size: 0.75rem; /* text-xs */
font-style: normal;
color: var(--color-text-sub);
line-height: 1.625;
font-weight: 300; /* font-light */
}
/* SNSアイコン */
.social-links {
display: flex;
gap: 1.25rem; /* space-x-5 */
margin-top: 1.5rem;
}
.social-icon {
width: 1.25rem; /* w-5 */
height: 1.25rem; /* h-5 */
color: var(--color-text-main);
transition: color 300ms;
}
.social-icon:hover {
color: var(--color-accent-hover);
}
/* --- Right Column (.footer-right) --- */
.footer-right {
display: flex;
flex-direction: column;
}
/* ナビゲーションタイトル */
.nav-title {
font-size: 1rem; /* text-base */
font-weight: 600;
color: var(--color-text-main);
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
}
/* ナビゲーションリンクコンテナ */
.nav-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem 2rem; /* gap-y-3 gap-x-8 */
font-size: 0.875rem; /* text-sm */
}
@media (min-width: 640px) {
.nav-links {
grid-template-columns: repeat(3, 1fr);
}
}
/* ナビゲーションリンク */
.nav-link {
color: var(--color-text-sub);
transition: color 300ms;
font-weight: 300; /* font-light */
text-decoration: none;
}
.nav-link:hover {
color: var(--color-accent-hover);
}
/* 会員権ボタン */
.button-link {
display: inline-block;
width: fit-content;
text-align: center;
margin-top: 1.5rem;
background-color: transparent;
border: 1px solid var(--color-text-main);
color: var(--color-text-main);
padding: 0.25rem 0.75rem;
font-size: 0.875rem; /* text-sm */
font-weight: 600;
letter-spacing: 0.05em;
transition: background-color 300ms, color 300ms;
text-decoration: none;
}
.button-link:hover {
background-color: var(--color-text-main);
color: white;
}
/* 著作権エリア */
.copyright-area {
padding-top: 2.5rem;
text-align: left;
margin-top: auto;
}
/* リンクを横並びにするための追加CSS */
.copyright-area {
display: flex; /* Flexboxを有効にする */
gap: 1rem; /* リンク間のスペースを1remに設定 */
flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
}
/* 個々のリンクのスタイル */
.privacy-link {
color: var(--color-text-sub);
transition: color 200ms;
font-size: 0.75rem; /* text-xs */
font-weight: 300;
/* display: block; を削除または上書きする */
margin-bottom: 0; /* display: block; の時の下マージンを解除 */
text-decoration: none;
}
.privacy-link:hover {
color: var(--color-accent-hover);
}
.copyright-text {
display: block;
opacity: 0.8;
font-weight: 500;
font-size: 0.75rem; /* text-xs */
color: var(--color-text-lighter);
}
.recaptcha-text {
font-size: 0.625rem; /* text-[10px] */
color: var(--color-text-lighter);
margin-top: 0.5rem;
}
.recaptcha-text a {
text-decoration: underline;
transition: color 200ms;
color: var(--color-text-lighter);
}
.recaptcha-text a:hover {
color: var(--color-text-main);
}
/* ナビゲーションタイトル */
@media (max-width: 768px) {
.nav-title {
text-align: center;
}
}
/* ナビゲーションタイトル */
@media (max-width: 768px) {
.nav-links {
text-align: center;
}
}
@media (max-width: 768px) {
.button-link {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 768px) {
.footer-container {
padding: 5rem 1rem;
}
}
/* 著作権エリア */
@media (max-width: 768px) {
.copyright-area {
padding-left: 2rem;
padding-right: 2rem;
}
}
/* -------------------------------------------
お問い合わせフォーム
* ------------------------------------------- */
/* -------------------------------------------
* 1. フォーム全体のコンテナスタイル
* ------------------------------------------- */
.wpcf7-wrapper { /* 修正済みカスタムクラス */
/* フォームの外側ラッパー (旧: .wpcf7-wrapper) */
max-width: 600px;
margin: 3rem auto; /* 中央揃え */
padding: 3rem;
background: #000000;
font-family: 'Shippori Mincho', serif;
color: #ffffff;
}
/* フォーム内の各要素のコンテナ (labelタグ全体) - CF7標準クラス */
.wpcf7 p { /* CF7標準クラス (変更なし) */
margin-bottom: 2rem;
}
/* -------------------------------------------
* 2. タイトルと説明文のスタイル
* ------------------------------------------- */
.membership-main-title-container { /* 修正済みカスタムクラス */
/* (旧: .main-title-container) */
max-width: 600px;
margin: 0 auto 3rem auto;
text-align: center;
}
.membership-main-title { /* 修正済みカスタムクラス */
/* (旧: .main-title) */
font-family: 'Poppins', sans-serif;
font-weight: 300; /* Poppinsの太さ300 */
font-size: 2.25rem;
line-height: 1.25;
margin-bottom: 0.25rem;
color: #ffffff;
}
.membership-jp-subtitle { /* 修正済みカスタムクラス */
/* (旧: .jp-subtitle) */
font-family: 'Shippori Mincho', serif;
font-size: 0.75rem;
font-weight: 400;
color: #aaaaaa;
display: block;
margin-bottom: 2.5rem; /* 説明文との間に余白 */
}
.membership-form-description { /* 修正済みカスタムクラス */
/* (旧: .form-description) */
font-family: 'Shippori Mincho', serif;
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2.5rem;
padding: 0 1rem;
text-align: center;
color: #ffffff;
}
/* 説明文の行間を均一に */
.membership-form-description p { /* 修正済みカスタムクラス */
/* (旧: .form-description p) */
font-size: 0.8rem;
line-height: 2.0; /* 行間を一定に */
margin-bottom: 0;
font-weight: 400; /* 強調をなくし一定に */
}
/* -------------------------------------------
* 3. ラベルのスタイル - CF7標準クラス
* ------------------------------------------- */
.wpcf7 label { /* CF7標準クラス (変更なし) */
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 0.6rem;
transition: color 0.2s ease;
}
/* -------------------------------------------
* 4. 入力フィールド（Text, Email, Tel, Select, Textarea）の共通スタイル - CF7標準クラス
* ------------------------------------------- */
.wpcf7 input[type="text"], /* CF7標準クラス (変更なし) */
.wpcf7 input[type="email"], /* CF7標準クラス (変更なし) */
.wpcf7 input[type="tel"], /* CF7標準クラス (変更なし) */
.wpcf7 select, /* CF7標準クラス (変更なし) */
.wpcf7 textarea { /* CF7標準クラス (変更なし) */
display: block;
width: 100%;
padding: 10px 0;
font-size: 0.9rem;
line-height: 1.5;
color: #ffffff;
background-color: #000000;
border: none;
/* 下線を暗いグレーにし、細く見せる */
border-bottom: 1px solid #333333;
border-radius: 0;
transition: all 0.3s ease;
box-sizing: border-box;
font-family: 'Shippori Mincho', serif;
}
/* ドロップダウンフィールド（selectタグ）のカスタムクラス */
.wpcf7 .drop-down { /* 修正済みカスタムクラス */
/* (旧: .wpcf7 .drop-down) */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 下向き矢印アイコンを白で表示 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem top 50%;
background-size: 18px;
padding-right: 2.5rem;
}
.wpcf7 textarea { /* CF7標準クラス (変更なし) */
min-height: 120px;
resize: vertical;
}
/* -------------------------------------------
* 5. フォーカス時のスタイル（入力時） - CF7標準クラス
* ------------------------------------------- */
.wpcf7 input[type="text"]:focus, /* CF7標準クラス (変更なし) */
.wpcf7 input[type="email"]:focus, /* CF7標準クラス (変更なし) */
.wpcf7 input[type="tel"]:focus, /* CF7標準クラス (変更なし) */
.wpcf7 select:focus, /* CF7標準クラス (変更なし) */
.wpcf7 textarea:focus { /* CF7標準クラス (変更なし) */
outline: none;
background-color: #000000;
/* フォーカス時の太さを1pxに保ち、色をやや明るいグレーに変更 */
border-bottom: 1px solid #777777;
box-shadow: none;
}
/* -------------------------------------------
* 6. 送信ボタン（Submit）のスタイル
* ------------------------------------------- */
.wpcf7 input[type="submit"].submit { /* 修正済みカスタムクラス */
/* (旧: .wpcf7 input[type="submit"].submit) */
display: block; /* 中央配置のためにブロック要素化 */
cursor: pointer;
font-weight: 600;
text-align: center;
padding: 10px 30px; /* パディングを小さく調整 */
font-size: 1rem;
color: #000000;
background-color: #ffffff;
border: none;
border-radius: 0;
transition: all 0.2s ease;
margin: 3rem auto 0 auto; /* 中央配置と上部余白 */
width: auto;
max-width: 100%;
letter-spacing: 0.05em;
font-family: 'Shippori Mincho', serif;
}
/* 送信ボタンのホバー時のスタイル */
.wpcf7 input[type="submit"].submit:hover { /* 修正済みカスタムクラス */
background-color: #333333;
color: #ffffff;
}
/* -------------------------------------------
* 7. レスポンスメッセージのスタイル (CF7デフォルトクラス)
* ------------------------------------------- */
div.wpcf7-response-output { /* CF7標準クラス (変更なし) */
margin: 1em 0;
padding: 1em;
border-radius: 8px;
font-weight: 600;
text-align: center;
}
div.wpcf7-mail-sent-ok { /* CF7標準クラス (変更なし) */
border: 2px solid;
border-color: #aaaaaa;
background-color: #333333;
color: #ffffff;
}
div.wpcf7-mail-sent-ng, /* CF7標準クラス (変更なし) */
div.wpcf7-validation-errors { /* CF7標準クラス (変更なし) */
border: 2px solid;
border-color: #FF6347;
background-color: #2a1111;
color: #FF6347;
}
/* ---------------------------------- */
/* ---------------------------------- */
/* ギャラリーセクション Main Content & Intro Section */
/* ---------------------------------- */
/* ---------------------------------- */
.page-id-166 {
background-color: #fff; /* bg-white */
}
/* main-content から gallery-content にクラス名を変更 */
.gallery-content {
max-width: 1200px;
margin: 0 auto;
padding: 3rem 1rem 1rem 1rem; /* px-8 */
font-family: 'Poppins', sans-serif;
color: #374151; /* text-gray-800 */
background-color: #fff; /* bg-white */
line-height: 1.5;
}
@media (min-width: 768px) {
.gallery-content {
padding: 3rem 2rem 5rem 2rem; /* px-8 */
background-color: #fff; /* bg-white */
}
}
/* クラス名を gallery-section に変更 */
.gallery-section {
margin-bottom: 4rem; /* mb-16 */
margin-top: 2rem; /* mt-8 */
text-align: center;
}
@media (min-width: 768px) {
.gallery-section {
margin-top: 4rem; /* md:mt-16 */
background-color: #fff; /* bg-white */
}
}
.gallery-title {
font-weight: 300; /* Poppins 300 (font-light) */
font-size: 2.25rem;
line-height: 1.25;
margin-bottom: 0.25rem;
color: #111827;
}
@media (min-width: 768px) {
.gallery-title {
font-size: 2.25rem; /* md:text-6xl */
}
}
.gallery-jp-subtitle { /* 修正済みカスタムクラス */
/* (旧: .jp-subtitle) */
font-family: 'Shippori Mincho', serif;
font-size: 0.75rem;
font-weight: 400;
color: #aaaaaa;
display: block;
margin-bottom: 2.5rem; /* 説明文との間に余白 */
}
.gallery-description {
font-family: 'Shippori Mincho', serif;
color: #6b7280; /* text-gray-500 */
font-size: 0.8rem; /* text-base */
max-width: 48rem;
margin: 0 auto;
line-height: 2.0; /* 行間を一定に */
font-weight: 400; /* 強調をなくし一定に */
}
@media (min-width: 768px) {
.gallery-description {
font-size: 0.8rem; /* md:text-lg */
line-height: 2.0; /* 行間を一定に */
}
}
.gallery-description br {
display: none; /* hidden md:block */
}
@media (min-width: 768px) {
.gallery-description br {
display: block;
}
}
/* ---------------------------------- */
/* 4. Gallery Grid Layout */
/* ---------------------------------- */
.gallery-grid {
display: grid;
/* 修正点: モバイル (デフォルト) を2列に変更 */
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem; /* gap-3 (12px) */
}
@media (min-width: 768px) {
.gallery-grid {
/* PC (768px以上) は3列を維持 */
grid-template-columns: repeat(3, 1fr);
gap: 1rem; /* md:gap-4 (16px) */
}
}
.gallery-item {
cursor: pointer;
/* group-hover behavior base */
transition: transform 0.3s ease;
}
.gallery-image-container {
aspect-ratio: 4 / 3; /* aspect-[4/3] */
overflow: hidden;
border-radius: 0.2rem; /* rounded-lg */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
transition: box-shadow 0.3s ease;
}
.gallery-item:hover .gallery-image-container {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* hover:shadow-xl */
}
/* imgタグのクラス名を gallery-section__image に変更 */
.gallery-section__image {
width: 100%;
height: 100%;
object-fit: cover;
/* ホバーアニメーションの定義 */
transition: transform 0.6s ease-out;
}
.gallery-item:hover .gallery-section__image {
transform: scale(1.02); /* hover:scale-[1.02] */
}
.gallery-caption {
margin-top: 0.75rem; /* mt-3 */
text-align: center;
}
.caption-text {
font-size: 0.875rem; /* text-sm */
font-weight: 500; /* font-medium */
color: #111827; /* text-gray-900 */
transition: color 0.3s ease;
}
.gallery-item:hover .caption-text {
color: #2563eb; /* group-hover:text-blue-600 */
}
/* ---------------------------------- */
/* 6. Modal / Lightbox */
/* ---------------------------------- */
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* backdrop-blur-md */
backdrop-filter: blur(8px);
z-index: 50;
display: none; /* hidden */
opacity: 0;
transition: opacity 0.5s ease;
align-items: center;
justify-content: center;
}
.modal-overlay.flex {
display: flex;
}
.modal-overlay.opacity-100 {
opacity: 1;
}
.modal-content {
position: relative;
width: 100%;
max-width: 64rem; /* max-w-4xl */
max-height: 80vh; /* max-h-[80vh] */
}
.modal-close-btn {
position: absolute;
top: 1rem; /* top-4 */
right: 1rem; /* right-4 */
color: #111827; /* text-gray-900 */
background-color: #fff; /* bg-white */
border-radius: 9999px; /* rounded-full */
padding: 0.5rem 0.8rem; /* p-2, 調整 */
font-size: 1.875rem; /* text-3xl */
opacity: 0.9;
transition: opacity 0.2s;
z-index: 50;
border: none;
cursor: pointer;
line-height: 1;
}
.modal-close-btn:hover {
opacity: 1;
}
.modal-image-wrapper {
border-radius: 0.5rem; /* rounded-lg */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
overflow: hidden;
}
.modal-image {
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
}
.modal-caption {
margin-top: 1rem; /* mt-4 */
text-align: center;
color: #111827; /* text-gray-900 */
font-size: 0.875rem; /* text-sm */
padding: 0.5rem 1rem; /* p-2 */
background-color: rgba(255, 255, 255, 0.7); /* bg-white/70 */
border-radius: 0.5rem; /* rounded-lg */
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); /* shadow-md */
}
@media (min-width: 768px) {
.modal-caption {
font-size: 1rem; /* md:text-base */
}
}
/* -------------------- */
/* ロゴカラー反転のための最も簡単なカスタムスタイル */
/* -------------------- */
/* ヘッダー全体を白（または明るい色）にして、mix-blend-modeが機能するように設定 */
.header {
color: #ffffff; /* デフォルトのロゴ色（この色に対して背景色で差分を取る） */
mix-blend-mode: difference; /* 背景との差分色で表示する */
/* ヘッダーが常に最前面に来るよう z-index: 9999; 程度にしても良いかもしれません */
}
/* ロゴリンクにブレンドモードと純粋な白黒フィルターを適用 */
.header-logo-link {
display: block;
align-items: center; /* ★修正: 垂直中央揃え */
color: #ffffff; /* ロゴの基準色を白に設定 */
/* 1. 背景色との差分を取り、色を反転させる */
mix-blend-mode: difference;
/* 2. フィルターで色相をリセットし、コントラストを極端に上げて二値化を強制する */
filter:
/* 発生している「青み」を取り除くために、hue-rotateで色相を調整・リセット */
hue-rotate(0deg)
/* グレースケールにして彩度をなくす */
grayscale(100%)
/* 明るさを最大にし（白を強調）、コントラストを極端に上げて白と黒の二色に分離 */
brightness(1000%) /* 極端に明るくして純粋な白に近づける */
contrast(1000%); /* 極端にコントラストを上げて白黒に二値化 */
}
/* -------------------- */
/* ロゴサイズのモバイル調整 (max-width: 768px 以下) */
/* -------------------- */
@media (max-width: 768px) {
/* 1. ロゴのラッパー（リンク）の幅を縮小 */
.header-logo-link {
/* 例: PC版の幅がデフォルトだと仮定し、モバイルでは幅を狭める */
width: 200px; /* 例: 200pxから120pxに縮小 */
max-width: 100%;
margin-top: 4.8px;
}
/* 2. ロゴSVGのサイズ調整（SVGは通常、親要素のサイズに合わせるため不要な場合が多いですが、念のため） */
.header-logo-link .logo-svg {
/* fill="currentColor"が使われているため、親要素の幅を基準に縮小 */
width: 100%;
height: auto;
}
}
/* ====================================
404メインコンテンツエリア (Main Content Area)
==================================== */
#primary {
max-width: 800px; /* メインコンテンツの最大幅を設定 */
margin: 40px auto; /* 中央寄せにして、上下に余白 */
padding: 7rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 軽い影を付けて浮き上がらせる */
border-radius: 8px; /* 角を少し丸く */
}
/* ====================================
ログインページ
==================================== */
/* ---------------------------------------------------- */
/* グローバル/ルート設定 */
/* ---------------------------------------------------- */
/* 汎用的なbody設定を削除し、特定のテンプレートクラスに移動します */
/* 【修正点】ページテンプレートが「Sauna Login Page - Light Theme」の場合、またはページID 181の場合にのみ背景を白に設定 */
.page-template-page-login, .page-id-181 {
background-color: #ffffff !important; /* <--- 最背面を白に設定 */
}
/* フォーム全体のコンテナの親（body直下ではない）への調整 */
.sh-login-page-content-wrapper {
/* ロゴが内側に入ったため、外側のパディングを削除 */
position: relative;
margin: 3rem auto;
max-width: 850px;
font-family: 'Shippori Mincho', serif;
}
/* 枠の上に配置するロゴのスタイル (imgタグに対応) */
.sh-login-logo-svg {
/* 【修正点】絶対配置を解除し、padding内で自然に上部に配置する */
/* position: absolute; を削除 (page-login.php側でロゴはsh-login-wrapperの先頭にある) */
display: block;
margin: 0 auto 1.5rem auto; /* 中央揃えと下部マージンを設定 */
width: 160px; /* ロゴのサイズ（幅） */
height: 60px; /* ロゴのサイズ（高さ） */
background-color: #ffffff;
border-radius: 5px;
z-index: 10;
/* 【修正点】box-shadowを削除 */
}
.sh-login-logo-svg img {
/* imgタグにwidthとheightを適用 */
width: 100%;
height: 100%;
object-fit: contain; /* 画像が歪まないように */
}
/* ---------------------------------------------------- */
/* フォーム全体のコンテナスタイル */
/* ---------------------------------------------------- */
.sh-login-wrapper {
/* フォームの外側ラッパー */
position: relative; /* ロゴが内側にあり、特殊な配置が不要になったためrelativeは残す必要なし */
max-width: 800px;
margin: 0 auto;
/* 【修正点】padding-topを通常の4remに戻す */
padding: 4rem 4rem 4rem 4rem;
background: #ffffff;
color: #000000;
/* 【修正点】box-shadowを削除 */
}
/* Simple Membership フォームのラッパー (ショートコードが出力するコンテナの親) */
.swpm-form-wrapper {
/* フォームの内容を中央に寄せるための調整 */
padding: 0 1rem;
}
/* ---------------------------------------------------- */
/* 2. タイトルと説明文のスタイル */
/* ---------------------------------------------------- */
.sh-login-main-title-container {
max-width: 600px;
margin: 0 auto 3rem auto;
text-align: center;
}
.sh-login-main-title {
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 2.25rem;
line-height: 1.25;
margin-bottom: 0.25rem;
color: #000000;
}
.sh-login-jp-subtitle {
font-family: 'Shippori Mincho', serif;
font-size: 0.75rem;
font-weight: 400;
color: #555555;
display: block;
margin-bottom: 2.5rem;
}
.sh-login-form-description {
max-width: 600px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2.5rem;
padding: 0 1rem;
text-align: center;
color: #000000;
}
/* 説明文の行間を均一に */
.sh-login-form-description p {
font-size: 0.8rem;
line-height: 2.0;
margin-bottom: 0;
font-weight: 400;
}
/* ---------------------------------------------------- */
/* Simple Membership フォーム要素へのスタイル上書き */
/* ---------------------------------------------------- */
/* Simple Membershipの標準的なフォーム要素 (pタグで囲まれることが多い) */
.swpm-login-widget-form p {
margin-bottom: 2rem;
text-align: left;
}
/* ラベルのスタイル */
.swpm-login-widget-form label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #000000;
margin-bottom: 0.6rem;
transition: color 0.2s ease;
}
/* 入力フィールド（Text, Password）の共通スタイル */
.swpm-login-widget-form input[type="text"],
.swpm-login-widget-form input[type="password"] {
display: block;
width: 100%;
padding: 10px 0;
font-size: 0.9rem;
line-height: 1.5;
color: #000000;
background-color: #ffffff;
border: none;
/* 下線を明るいグレーにし、細く見せる */
border-bottom: 1px solid #cccccc;
border-radius: 0;
transition: all 0.3s ease;
box-sizing: border-box;
font-family: inherit;
}
/* フォーカス時のスタイル（入力時） */
.swpm-login-widget-form input[type="text"]:focus,
.swpm-login-widget-form input[type="password"]:focus {
outline: none;
background-color: #ffffff;
/* フォーカス時の色を濃いグレーに変更 */
border-bottom: 1px solid #444444;
box-shadow: none;
}
/* ---------------------------------------------------- */
/* 送信ボタン（Submit）のスタイル */
/* ---------------------------------------------------- */
.swpm-login-widget-form input[type="submit"] {
display: block;
cursor: pointer;
font-weight: 600;
text-align: center;
padding: 10px 30px;
font-size: 1rem;
color: #ffffff;
background-color: #000000;
border: none;
border-radius: 0;
transition: all 0.2s ease;
margin: 3rem auto 0 auto;
width: auto;
max-width: 100%;
letter-spacing: 0.05em;
font-family: inherit;
}
/* 送信ボタンのホバー時のスタイル */
.swpm-login-widget-form input[type="submit"]:hover {
background-color: #555555;
color: #ffffff;
}
/* ---------------------------------------------------- */
/* リンクセクション（フォーム外） */
/* ---------------------------------------------------- */
.sh-login-link-section {
margin-top: 3rem;
text-align: center;
}
.sh-login-link-section a {
color: #000000;
text-decoration: none;
border-bottom: 1px solid #cccccc;
padding-bottom: 2px;
font-size: 0.85rem;
transition: border-bottom 0.2s ease, color 0.2s ease;
}
.sh-login-link-section a:hover {
color: #444444;
border-bottom: 1px solid #444444;
}
.sh-login-link-section p {
margin-bottom: 1rem;
}
/* レスポンシブ対応 */
@media (max-width: 850px) {
.sh-login-wrapper {
/* スマホ向けに左右パディングを調整 */
padding: 4rem 2rem 4rem 2rem;
}
}
/* ---------------------------------------------------- */
/* Simple Membership フォーム内のデフォルトリンクを非表示にする */
/* ---------------------------------------------------- */
.swpm-login-form-pw-reset-link,
.swpm-login-form-register-link {
display: none !important;
}
/* ---------------------------------------------------- */
/* グローバル/ルート設定 */
/* ---------------------------------------------------- */
/* 【新規追加】横スクロール（水平方向のオーバーフロー）を防止するための設定 */
html, body {
overflow-x: hidden; /* 水平方向のオーバーフローを非表示にする */
width: 100%; /* 幅を確実に100%に設定 */
margin: 0; /* bodyのマージンをリセット */
padding: 0; /* bodyのパディングをリセット */
}
/* ---------------------------------------------------- */
/* terms of service (tos) */
/* ---------------------------------------------------- */
/* -------------------------------------------
* 1. フォーム全体のコンテナスタイル
* ------------------------------------------- */
.wpcf7-wrapper {
/* フォームの外側ラッパー (全体: ダークモード) */
/* ★PC版の表示幅を拡大 (800px) ★ */
max-width: 800px;
margin: 3rem auto;
padding: 3rem;
background: #000000;
font-family: 'Shippori Mincho', serif;
color: #ffffff; /* 全体の文字色は白 */
}
/* フォーム内の各要素のコンテナ - CF7標準クラス */
.wpcf7 p {
margin-bottom: 2rem;
}
/* -------------------------------------------
* 2. タイトルと説明文のスタイル (クラス名を terms- に変更)
* ------------------------------------------- */
.terms-main-title-container {
max-width: 800px;
margin: 0 auto 3rem auto;
text-align: center;
}
.terms-main-title {
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 2.25rem;
line-height: 1.25;
margin-bottom: 0.25rem;
color: #ffffff;
}
.terms-jp-subtitle {
font-family: 'Shippori Mincho', serif;
font-size: 0.75rem;
font-weight: 400;
color: #aaaaaa;
display: block;
margin-bottom: 2.5rem;
}
.terms-form-description {
/* スクロールラッパーの外側 */
max-width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2.5rem;
text-align: center;
color: #ffffff;
}
/* ★★★ スクロールエリア本体のスタイル - 白黒反転/モダン化 ★★★ */
.terms-scroll-content {
/* 利用規約本文のスクロールエリア */
max-width: 800px;
max-height: 400px; /* 高さも少し上げて見やすくする (300px -> 400px) */
overflow-y: auto;
/* ★修正点: 白黒反転 (背景を白、文字を黒に) ★ */
background-color: #ffffff; /* 背景を白に */
color: #000000; /* 文字色を黒に */
border: 1px solid #dddddd; /* 枠線を薄いグレーに */
/* ★内側の余白: 上下に1.5rem、左右に2remの間隔を適用 ★ */
padding: 1.5rem 2rem;
/* ★外側の余白: 上下左右に1remを追加 ★ */
margin: 0 1rem;
/* ★追加: 角丸を適用 ★ */
border-radius: 8px;
text-align: left;
touch-action: pan-y;
will-change: transform;
}
/* ★★★ -------------------------- ★★★ */
/* 説明文の行間を均一に */
.terms-scroll-content p {
font-size: 0.9rem; /* フォントサイズを少し大きく */
line-height: 1.8; /* 行間も調整 */
margin-bottom: 0;
font-weight: 400;
}
/* -------------------------------------------
* 2.5. モダンなスクロールバーのカスタマイズ (WebKit/Chrome/Edge/Safari向け)
* ------------------------------------------- */
/* スクロールバー全体 */
.terms-scroll-content::-webkit-scrollbar {
width: 10px; /* ★修正: 幅を8pxから10pxに拡大 ★ */
background-color: transparent;
}
/* スクロールバーのトラック（背景） */
.terms-scroll-content::-webkit-scrollbar-track {
/* ★修正点: 明るい背景に合わせて、トラックを背景色より少し濃くする ★ */
background: #f0f0f0;
border-radius: 10px;
}
/* スクロールバーのサム（つまみ） */
.terms-scroll-content::-webkit-scrollbar-thumb {
/* ★修正点: 明るい背景に合わせて、サムを暗くする ★ */
background-color: #bbbbbb;
border-radius: 10px;
border: 3px solid #ffffff; /* ★修正: ボーダーを2pxから3pxに拡大 ★ */
}
/* ホバー時に少し明るく */
.terms-scroll-content::-webkit-scrollbar-thumb:hover {
background-color: #999999;
}
/* -------------------------------------------
* 3. ラベルのスタイル - CF7標準クラス
* ------------------------------------------- */
.wpcf7 label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 0.6rem;
transition: color 0.2s ease;
}
/* -------------------------------------------
* 4. 入力フィールド（Text, Email, Tel, Select, Textarea）の共通スタイル - CF7標準クラス
* ------------------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
display: block;
width: 100%;
padding: 10px 0;
font-size: 0.9rem;
line-height: 1.5;
color: #ffffff;
background-color: #000000;
border: none;
/* 下線を暗いグレーにし、細く見せる */
border-bottom: 1px solid #333333;
border-radius: 0;
transition: all 0.3s ease;
box-sizing: border-box;
font-family: 'Shippori Mincho', serif;
}
/* ドロップダウンフィールド（selectタグ）のカスタムクラス */
.wpcf7 .drop-down {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 下向き矢印アイコンを白で表示 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem top 50%;
background-size: 18px;
padding-right: 2.5rem;
}
.wpcf7 textarea {
min-height: 120px;
resize: vertical;
}
/* -------------------------------------------
* 5. フォーカス時のスタイル（入力時） - CF7標準クラス
* ------------------------------------------- */
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
outline: none;
background-color: #000000;
/* フォーカス時の太さを1pxに保ち、色をやや明るいグレーに変更 */
border-bottom: 1px solid #777777;
box-shadow: none;
}
/* -------------------------------------------
* 6. 送信ボタン（Submit）のスタイル
* ------------------------------------------- */
.wpcf7 input[type="submit"].submit {
display: block;
cursor: pointer;
font-weight: 600;
text-align: center;
padding: 12px 36px; /* パディングを増やしてボタンを大きく */
font-size: 1rem;
/* ★修正点: 未チェック時のデフォルトスタイル（赤/無効）を適用 ★ */
color: #ffffff;
background-color: #000000;
border: 1px solid #ff4d4f; /* デフォルトの枠線色: 赤 */
/* 初期状態でクリックを無効化し、視覚的に薄く見せる */
pointer-events: none;
opacity: 0.6;
transition: all 0.2s ease;
margin: 3rem auto 0 auto;
width: auto;
max-width: 100%;
letter-spacing: 0.05em;
font-family: 'Shippori Mincho', serif;
}
/* ★★★ チェック後に適用されるスタイル（緑色/有効化） ★★★ */
.wpcf7.agreement-checked input[type="submit"].submit {
background-color: #52c41a; /* 緑色の背景 */
border-color: #52c41a; /* 緑色の枠線 */
pointer-events: auto; /* クリック有効化 */
opacity: 1; /* 不透明度を戻す */
}
/* 送信ボタンのホバー時のスタイル (有効時のみ) */
.wpcf7.agreement-checked input[type="submit"].submit:hover {
background-color: #389e08; /* 緑色のホバー */
border-color: #389e08;
color: #ffffff;
}
/* -------------------------------------------
* 7. レスポンスメッセージのスタイル (CF7デフォルトクラス)
* ------------------------------------------- */
div.wpcf7-response-output {
margin: 1em 0;
padding: 1em;
border-radius: 8px;
font-weight: 600;
text-align: center;
}
div.wpcf7-mail-sent-ok {
border: 2px solid;
border-color: #aaaaaa;
background-color: #333333;
color: #ffffff;
}
div.wpcf7-mail-sent-ng,
div.wpcf7-validation-errors {
border: 2px solid;
border-color: #FF6347;
background-color: #2a1111;
color: #FF6347;
}
/* -------------------------------------------
特定商取引法に基づく表記 フォーム (page-id-218 限定)
* ------------------------------------------- */
/* -------------------------------------------
* 1. フォーム全体のコンテナスタイル
* ------------------------------------------- */
body.page-id-218 .wpcf7-wrapper {
/* フォームの外側ラッパー (全体: ライトモードへ反転) */
max-width: 800px;
margin: 3rem auto;
padding: 3rem;
background: #ffffff; /* 背景を白に */
font-family: 'Shippori Mincho', serif;
color: #000000; /* 全体の文字色は黒に */
}
/* フォーム内の各要素のコンテナ - CF7標準クラス */
body.page-id-218 .wpcf7 p {
margin-bottom: 2rem;
}
/* -------------------------------------------
* 2. タイトルと説明文のスタイル (クラス名を tokusyoho- に変更)
* ------------------------------------------- */
body.page-id-218 .tokusyoho-main-title-container {
max-width: 800px;
margin: 0 auto 3rem auto;
text-align: center;
}
body.page-id-218 .tokusyoho-main-title {
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 2.25rem;
line-height: 1.25;
margin-bottom: 0.25rem;
color: #000000; /* 文字色を黒に */
}
body.page-id-218 .tokusyoho-jp-subtitle {
font-family: 'Shippori Mincho', serif;
font-size: 0.75rem;
font-weight: 400;
color: #555555; /* サブタイトルを濃いグレーに */
display: block;
margin-bottom: 2.5rem;
}
/* -------------------------------------------
* 2.5. コンテンツボックスのスタイル (スクロール機能なし)
* ------------------------------------------- */
body.page-id-218 .tokusyoho-content-box {
/* 特定商取引法に基づく表記のコンテンツボックス */
max-width: 800px;
background-color: #ffffff;
color: #000000;
border: 1px solid #eeeeee; /* 非常に薄いグレーのボーダーを追加 */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* 控えめな影 */
padding: 3rem 2.5rem;
margin: 1rem auto 2.5rem auto;
border-radius: 12px; /* 角丸を少し大きくしてモダンに */
text-align: left;
}
body.page-id-218 .tokusyoho-content-box p {
/* 大項目ごとの段落（タグ）のスタイル */
font-size: 0.95rem; /* フォントサイズをわずかに大きく */
line-height: 1.6;
font-weight: 400;
padding-bottom: 0;
/* ★修正:
タグ間の余白を調整し、段落分けを明確にする ★ */
margin-top: 0;
margin-bottom: 1.5rem; /* 段落ごとに適度な余白を設定 */
}
/* 最後の段落は下に余白を持たせない */
body.page-id-218 .tokusyoho-content-box p:last-child {
margin-bottom: 0;
}
/* 項目名や見出しの強調 (ユーザーがタグで囲むことを想定) */
body.page-id-218 .tokusyoho-content-box strong {
font-weight: 700;
/* 項目名（strong）の下の余白を調整 */
display: block;
margin-bottom: 0.4rem;
}
/* -------------------------------------------
* 3. ラベルのスタイル - CF7標準クラス
* ------------------------------------------- */
body.page-id-218 .wpcf7 label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: #000000; /* ライトモードに合わせて文字色を黒に */
margin-bottom: 0.6rem;
transition: color 0.2s ease;
}
/* -------------------------------------------
* 4. 入力フィールド（Text, Email, Tel, Select, Textarea）の共通スタイル
* ------------------------------------------- */
body.page-id-218 .wpcf7 input[type="text"],
body.page-id-218 .wpcf7 input[type="email"],
body.page-id-218 .wpcf7 input[type="tel"],
body.page-id-218 .wpcf7 select,
body.page-id-218 .wpcf7 textarea {
display: block;
width: 100%;
padding: 10px 0;
font-size: 0.9rem;
line-height: 1.5;
color: #000000; /* ライトモードに合わせて文字色を黒に */
background-color: #ffffff; /* 背景色を白に */
border: none;
border-bottom: 1px solid #aaaaaa; /* 下線を薄いグレーに */
border-radius: 0;
transition: all 0.3s ease;
box-sizing: border-box;
font-family: 'Shippori Mincho', serif;
}
/* 5. フォーカス時のスタイル（入力時） */
body.page-id-218 .wpcf7 input[type="text"]:focus,
body.page-id-218 .wpcf7 input[type="email"]:focus,
body.page-id-218 .wpcf7 input[type="tel"]:focus,
body.page-id-218 .wpcf7 select:focus,
body.page-id-218 .wpcf7 textarea:focus {
outline: none;
background-color: #ffffff;
border-bottom: 1px solid #000000; /* フォーカス時の下線を黒に */
box-shadow: none;
}
/* ドロップダウンフィールド（selectタグ）のカスタムクラス */
body.page-id-218 .wpcf7 .drop-down {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 下向き矢印アイコンを黒で表示 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); /* 矢印を黒に */
background-repeat: no-repeat;
background-position: right 0.5rem top 50%;
background-size: 18px;
padding-right: 2.5rem;
}
body.page-id-218 .wpcf7 textarea {
min-height: 120px;
resize: vertical;
}
/* -------------------------------------------
* 6. 送信ボタン（Submit）のスタイル
* ------------------------------------------- */
body.page-id-218 .wpcf7 input[type="submit"].submit {
display: block;
cursor: pointer;
font-weight: 600;
text-align: center;
padding: 12px 36px;
font-size: 1rem;
/* ライトモードに合わせる (黒文字/白背景/黒枠) */
color: #000000; /* 文字色を黒に */
background-color: #ffffff; /* 背景色を白に */
border: 1px solid #000000; /* 黒い枠線に */
border-radius: 6px;
transition: all 0.2s ease;
margin: 3rem auto 0 auto;
width: auto;
max-width: 100%;
letter-spacing: 0.05em;
font-family: 'Shippori Mincho', serif;
}
/* 送信ボタンのホバー時のスタイル */
body.page-id-218 .wpcf7 input[type="submit"].submit:hover {
/* ホバー時、背景を濃いグレーにし、枠線はそのままで視認性向上 */
background-color: #eeeeee; /* 薄いグレーに */
color: #000000;
border-color: #000000;
}
/* -------------------------------------------
* 7. レスポンスメッセージのスタイル (CF7デフォルトクラス)
* ------------------------------------------- */
body.page-id-218 div.wpcf7-response-output {
margin: 1em 0;
padding: 1em;
border-radius: 8px;
font-weight: 600;
text-align: center;
}
body.page-id-218 div.wpcf7-mail-sent-ok {
/* ライトモードに合わせて色を調整 */
border: 2px solid;
border-color: #66bb66;
background-color: #e8f5e9;
color: #1b5e20;
}
body.page-id-218 div.wpcf7-mail-sent-ng,
body.page-id-218 div.wpcf7-validation-errors {
/* ライトモードに合わせて色を調整 */
border: 2px solid;
border-color: #FF6347;
background-color: #ffebee;
color: #d32f2f;
}
/* 特定ページIDの背景を強制的に白にする */
body.page-id-218 {
background-color: #ffffff !important;
}