/* Google Fontsの読み込み - HTMLのセクションに以下のタグも追加してください */
/*
*/
/* 基本設定 */
:root {
/* カラーパレット */
--primary-color: #5C815E; /* 落ち着いた抹茶色 */
--primary-darker: #4A6A4C; /* ホバー用 */
--accent-color: #d1a66a; /* 金色系のアクセントカラー */
--text-color: #333333; /* 基本の文字色 */
--light-bg: #F8F8F8; /* 薄い背景色 */
--white: #FFFFFF; /* 白 */
--soft-gray: #EEEEEE; /* 柔らかいグレー */
--border-color: #DDDDDD; /* ボーダー色 */
--dark-gray: #666666; /* 濃いめのグレー */
/* フォント設定 - 見出しと本文を使い分ける */
--font-family-title: 'Sawarabi Mincho', 'Zen Old Mincho', serif; /* 繊細で上品な明朝体 */
--font-family-body: 'BIZ UDPGothic', "Yu Gothic", "游ゴシック", "Meiryo", sans-serif; /* 読みやすいゴシック体 */
--font-weight-body-light: 400; /* 本文の太さを標準に */
--font-weight-body-normal: 400;
--font-weight-body-bold: 700;
}
body {
font-family: var(--font-family-body);
font-weight: var(--font-weight-body-normal);
line-height: 1.8; /* 行間を広げて読みやすく */
color: var(--text-color);
background-color: var(--white);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 1100px; /* 少し狭くしてコンテンツにまとまりを出す */
margin: 0 auto;
padding: 0 20px;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--accent-color);
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-title);
color: var(--primary-color);
margin-top: 0;
margin-bottom: 0.8em;
}
.section-padding {
padding: 80px 0;
}
.section-title {
font-size: 2.8em;
text-align: center;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background-color: var(--accent-color); /* アクセントカラーのライン */
margin: 0 auto;
margin-top: 15px;
}
.section-description {
text-align: center;
max-width: 800px;
margin: 0 auto 50px auto;
line-height: 1.8;
color: #555;
}
/* ボタンのスタイル */
.btn {
display: inline-block;
padding: 12px 28px;
border-radius: 5px;
font-weight: var(--font-weight-body-bold);
text-align: center;
transition: all 0.3s ease; /* ホバー時の変化を滑らかに */
cursor: pointer;
border: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-primary {
background-color: var(--primary-color);
color: var(--white);
}
.btn-primary:hover {
background-color: var(--primary-darker);
transform: translateY(-2px);
}
.btn-secondary {
background-color: var(--white);
color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.btn-secondary:hover {
background-color: var(--primary-color);
color: var(--white);
}
.btn-hero {
background-color: var(--primary-color);
color: var(--white);
font-size: 1.1em;
padding: 15px 40px;
border-radius: 50px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
font-weight: var(--font-weight-body-bold);
}
.btn-hero:hover {
background-color: var(--primary-darker);
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}
.btn-tertiary {
background-color: var(--white);
color: var(--primary-color);
border: 2px solid var(--primary-color);
padding: 18px 25px;
font-size: 1.1em;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
font-weight: var(--font-weight-body-bold);
}
.btn-tertiary .icon {
font-size: 2.5em;
margin-bottom: 10px;
line-height: 1;
}
.btn-tertiary .subtitle {
font-size: 0.8em;
color: #666;
margin-top: 5px;
font-weight: var(--font-weight-body-normal);
}
.btn-tertiary:hover {
background-color: var(--primary-color);
color: var(--white);
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.btn-tertiary:hover .subtitle {
color: var(--white);
}
/* ヘッダー */
.site-header {
background-color: var(--white);
padding: 15px 0;
border-bottom: 1px solid var(--soft-gray);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.site-header .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: 20px;
}
.site-logo {
margin: 0;
font-size: 1.8em;
flex-shrink: 0;
}
.site-logo a {
font-family: var(--font-family-title);
color: var(--primary-color);
font-weight: bold;
}
.main-nav {
display: flex;
justify-content: center;
}
.main-nav ul {
display: flex;
flex-wrap: nowrap;
gap: 15px;
}
.main-nav li {
flex-shrink: 0;
}
.main-nav a {
font-size: 0.9em;
color: var(--text-color);
padding: 5px 0;
position: relative;
font-family: var(--font-family-body);
white-space: nowrap;
}
.main-nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent-color); /* アクセントカラーのライン */
transition: width 0.3s ease;
}
.main-nav a:hover::after {
width: 100%;
}
.header-booking {
flex-shrink: 0;
}
.header-booking .btn {
padding: 8px 20px;
font-size: 0.9em;
}
.lang-switch {
flex-shrink: 0;
margin-left: 20px;
}
/* メインビジュアル */
.hero-section {
position: relative;
width: 100%;
height: 60vh; /* 少し高さを抑える */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.hero-images {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.hero-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.hero-image.active {
opacity: 1;
}
.hero-text {
text-align: center;
z-index: 1;
background-color: rgba(255, 255, 255, 0.2);
padding: 30px 40px;
border-radius: 10px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.hero-text h2 {
font-family: var(--font-family-title);
font-size: 3em;
margin-bottom: 15px;
line-height: 1.2;
color: var(--white);
font-weight: 400; /* 標準的な太さに戻す */
text-shadow:
0 0 15px rgba(0, 0, 0, 0.9),
0 2px 4px rgba(0, 0, 0, 0.7);
}
.hero-text p {
font-family: var(--font-family-body);
font-size: 1.1em;
margin-bottom: 30px;
font-weight: var(--font-weight-body-normal);
}
/* コンセプトセクション */
.concept-details {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.concept-item {
flex: 0 1 calc(33% - 30px);
text-align: center;
background-color: var(--white);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}
.concept-item:hover {
transform: translateY(-10px);
}
.concept-item img {
width: 100%; /* コンセプト画像も幅100%に */
height: 250px;
object-fit: cover;
margin-bottom: 20px;
}
.concept-item h3 {
font-family: var(--font-family-title);
font-size: 1.5em;
margin-bottom: 10px;
color: var(--primary-color);
}
.concept-item p {
font-family: var(--font-family-body);
font-size: 0.95em;
color: #666;
}
/* 施設一覧セクション */
.facilities-section {
background-color: var(--light-bg);
}
.facility-category {
margin-bottom: 60px;
}
.facility-category h3 {
font-family: var(--font-family-title);
font-size: 2em;
text-align: center;
margin-bottom: 40px;
color: var(--primary-color);
border-bottom: 2px solid var(--accent-color);
padding-bottom: 10px;
display: inline-block;
width: auto;
max-width: 80%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.facility-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.facility-item {
background-color: var(--white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
text-align: center;
transition: transform 0.3s ease;
}
.facility-item:hover {
transform: translateY(-10px);
}
.facility-item img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.facility-item h4 {
font-family: var(--font-family-title);
font-size: 1.3em;
margin: 15px 0 10px;
color: var(--primary-color);
}
.facility-item p {
font-family: var(--font-family-body);
font-size: 0.9em;
color: #666;
padding: 0 15px 15px;
min-height: 40px;
}
.facility-item .btn-secondary {
margin-bottom: 20px;
padding: 8px 20px;
font-size: 0.9em;
font-weight: var(--font-weight-body-bold);
}
/* 新着情報セクション */
.news-section {
background-color: var(--white);
}
.news-list {
max-width: 800px;
margin: 0 auto 40px auto;
border-top: 1px solid var(--soft-gray);
}
.news-item {
padding: 20px 0;
border-bottom: 1px solid var(--soft-gray);
display: flex;
align-items: center;
gap: 20px;
}
.news-item time {
font-family: var(--font-family-body);
font-size: 0.9em;
color: #888;
flex-shrink: 0;
width: 100px;
}
.news-item p {
font-family: var(--font-family-body);
margin: 0;
flex-grow: 1;
}
.news-item a {
color: var(--text-color);
transition: color 0.3s ease;
}
.news-item a:hover {
color: var(--primary-color);
}
.text-center {
text-align: center;
}
/* 予約セクション */
.booking-section {
background-color: var(--light-bg);
border-top: 1px solid var(--border-color);
}
.booking-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
max-width: 900px;
margin: 0 auto;
}
.booking-option-item {
text-align: center;
}
/* フッター */
.site-footer {
background-color: var(--primary-color);
color: var(--white);
padding: 40px 0;
text-align: center;
font-size: 0.9em;
}
.footer-nav ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.footer-nav li {
margin: 0 15px 10px;
}
.footer-nav a {
color: var(--white);
}
.footer-nav a:hover {
text-decoration: underline;
}
.copyright {
color: var(--soft-gray); /* コピーライトを少し薄くしてメリハリをつける */
}
/* 768px以下（モバイル）で適用 */
@media (max-width: 768px) {
/* ハンバーガーボタンを表示する */
.menu-toggle-btn {
display: block;
background: none;
border: none;
padding: 10px;
cursor: pointer;
order: 3;
z-index: 1001;
}
}
/* レスポンシブデザイン（モバイル対応） */
@media (max-width: 992px) {
.site-header .container {
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.site-header {
position: static; /* 固定を解除する */
box-shadow: none; /* スマホでは影も不要であれば消す */
}
.main-nav {
order: 2;
flex-basis: 100%;
margin-top: 10px;
}
.main-nav ul {
justify-content: center;
flex-wrap: wrap;
}
.main-nav li {
margin: 0 10px;
}
.header-booking {
order: 1;
}
.lang-switch {
order: 3;
}
}
@media (max-width: 768px) {
.site-header .container {
flex-direction: column;
align-items: center;
}
.main-nav ul {
flex-direction: column;
text-align: center;
margin-top: 15px;
}
.main-nav li {
margin: 5px 0;
}
.header-booking {
margin-top: 15px;
}
.hero-section {
height: 400px;
}
.hero-text h2 {
font-size: 2.2em;
}
.hero-text p {
font-size: 1em;
}
.section-padding {
padding: 50px 0;
}
.section-title {
font-size: 2em;
}
.section-description {
margin-bottom: 30px;
}
.concept-item {
flex: 0 1 calc(100% - 20px);
margin-bottom: 20px;
}
.facility-category h3 {
font-size: 1.8em;
}
.news-item {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.news-item time {
width: auto;
}
.booking-options {
grid-template-columns: 1fr;
}
.footer-nav ul {
flex-direction: column;
}
.footer-nav li {
margin: 5px 0;
}
}
/* さらに小さい画面（例: スマホ縦向き） */
@media (max-width: 480px) {
.hero-section {
height: 300px;
}
.hero-text h2 {
font-size: 1.8em;
}
.hero-text p {
font-size: 0.9em;
}
.btn-hero {
padding: 10px 25px;
font-size: 1em;
}
.site-logo {
font-size: 1.5em;
}
}
/* 言語切り替えボタンのスタイルをミニマルに */
.lang-switch button {
border: none;
background-color: transparent;
color: var(--dark-gray);
padding: 0 10px;
cursor: pointer;
position: relative;
font-size: 0.9em;
transition: color 0.3s ease;
}
.lang-switch button:hover {
color: var(--primary-color);
}
.lang-switch button.active {
color: var(--primary-color);
}
.lang-switch button.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 2px;
background-color: var(--accent-color);
}
/* --- FAQセクション --- */
.faq-section {
padding: 80px 0;
background-color: #f9f9f9;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-category {
margin-bottom: 40px;
}
.faq-category-title {
font-family: 'Sawarabi Mincho', serif;
font-size: 28px;
color: #333;
border-bottom: 2px solid #ccc;
padding-bottom: 15px;
margin-bottom: 25px;
text-align: center;
}
.faq-item {
background-color: #fff;
border-radius: 12px; /* 柔らかい角丸 */
box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 柔らかい影 */
margin-bottom: 20px;
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.faq-item.active {
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.faq-question {
font-weight: 700;
font-size: 18px;
padding: 20px 60px 20px 20px;
cursor: pointer;
position: relative;
color: #555;
transition: color 0.3s ease;
line-height: 1.5; /* 行間を広げて読みやすく */
}
.faq-question:hover {
color: #1e88e5; /* ホバーで色が変わる */
}
.faq-question::before {
font-family: 'M PLUS Rounded 1c', sans-serif;
font-weight: 700;
color: #ff9800;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
.faq-question::after {
content: '＋';
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #aaa;
transition: transform 0.3s ease, color 0.3s ease;
}
.faq-question.active::after {
content: '−';
transform: translateY(-50%) rotate(180deg);
color: #1e88e5;
}
.faq-answer {
background-color: #f7f9fc;
padding: 0 20px;
line-height: 1.8;
color: #666;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out; /* アニメーションの追加 */
}
.faq-answer.open {
max-height: 500px; /* 十分な高さを確保 */
padding: 20px;
}
/* --- お問い合わせフォームのスタイル --- */
.contact-form {
max-width:800px;
margin: 0 auto;
background-color: var(--white);
padding: 40px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
/* フォームのグループ間の余白を調整 */
.form-group {
margin-bottom: 15px; /* 元の25pxから15pxに減らす */
}
/* ラベルの太さを標準に戻し、行間を調整 */
.form-group label {
display: block; /* ラベルをブロック要素にする */
text-align: left; /* テキストを左寄せにする */
width: 100%; /* 親要素の幅いっぱいに広げる */
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 5px;
box-sizing: border-box; /* paddingとborderを幅に含める */
font-size: 1em;
font-family: var(--font-family-body);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 5px rgba(92, 129, 94, 0.3); /* 抹茶色系のシャドウ */
}
/* ドロップダウンリストをスタイリッシュに */
.form-group select {
display: block;
width: 100%;
padding: 10px 15px; /* 内側の余白を調整 */
font-size: 16px; /* フォントサイズを調整 */
font-family: inherit; /* 親要素のフォントを引き継ぐ */
color: #333; /* テキストの色 */
background-color: #fff; /* 背景色 */
border: 1px solid #ccc; /* ボーダーの色と太さ */
border-radius: 5px; /* 角を丸くする */
-webkit-appearance: none; /* デフォルトの矢印を非表示に */
-moz-appearance: none; /* Firefoxのデフォルトの矢印を非表示に */
appearance: none; /* 標準の矢印を非表示に */
background-image: url('data:image/svg+xml;utf8,'); /* カスタムの矢印を追加 */
background-repeat: no-repeat;
background-position: right 10px center; /* 矢印の位置を調整 */
cursor: pointer;
}
/* 選択されたときのスタイル */
.form-group select:focus {
border-color: #007bff; /* フォーカス時のボーダー色 */
outline: none; /* デフォルトのアウトラインを非表示に */
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* フォーカス時のシャドウ */
}
/* ドロップダウンの選択肢のスタイル（一部のブラウザでは限定的） */
.form-group select option {
padding: 10px;
background-color: #fff;
color: #333;
}
/* 送信ボタンのスタイル */
.contact-form .btn-primary {
width: 100%;
padding: 15px;
font-size: 1.1em;
margin-top: 15px;
}
/* ヒーローセクションの下部余白を調整 */
.page-hero {
margin-bottom: 0px; /* 余白を減らす（必要に応じて数値を調整） */
}
/* セクションのパディング（上部の余白）を調整 */
.section-padding {
padding-top: 0px; /* 上部の余白を減らす（必要に応じて数値を調整） */
}
/* チェックボックス本体を非表示にする */
#privacyConsent {
opacity: 0;
position: absolute;
}
/* カスタムチェックボックスのデザイン */
#label-privacy-consent::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px; /* 角を丸くする */
margin-right: 8px;
vertical-align: middle;
transition: all 0.2s ease-in-out;
}
/* チェックされた時のデザイン（チェックマークと背景色） */
#privacyConsent:checked + #label-privacy-consent::before {
background-color: #007bff; /* チェックされた時の色 */
border-color: #007bff;
}
/* チェックマークのデザイン */
#privacyConsent:checked + #label-privacy-consent::after {
content: '✓';
color: #fff; /* チェックマークの色 */
font-size: 16px;
position: absolute;
top: 50%;
left: 10px; /* 位置を調整 */
transform: translateY(-50%);
}
/* デフォルト（PC）ではハンバーガーボタンとスマホ用メニューは非表示 */
.menu-toggle-btn,
.mobile-nav {
display: none;
}
/* ハンバーガーアイコンのデザイン */
.hamburger {
width: 25px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
transition: transform 0.3s ease;
}
.hamburger span {
display: block;
width: 100%;
height: 3px;
background-color: var(--primary-color);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* ハンバーガーボタンのアニメーション */
.menu-toggle-btn.is-active .hamburger span:nth-child(1) {
transform: translateY(8.5px) rotate(45deg);
}
.menu-toggle-btn.is-active .hamburger span:nth-child(2) {
opacity: 0;
}
.menu-toggle-btn.is-active .hamburger span:nth-child(3) {
transform: translateY(-8.5px) rotate(-45deg);
}
/* sr-onlyクラス: スクリーンリーダーのみが読み込む要素 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* --- ハンバーガーボタンにテキストを追加 --- */
.menu-toggle-btn::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
opacity: 1;
transition: opacity 0.3s ease;
font-size: 0.9em;
font-family: var(--font-family-body);
color: var(--primary-color);
}
/* --- メニューが開いたときにテキストを非表示にする --- */
.menu-toggle-btn.is-active::before {
opacity: 0;
pointer-events: none; /* クリックイベントを無効にする */
}
/* ハンバーガーアイコンのデザインを調整 */
.menu-toggle-btn {
position: relative;
width: 60px; /* 十分な幅を確保 */
height: 40px; /* 十分な高さを確保 */
padding: 0;
border: none;
background: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.hamburger {
position: relative;
z-index: 10;
}
@media (max-width: 768px) {
/* PC用のメニューを非表示にする */
.main-nav {
display: none;
}
/* ハンバーガーボタンを表示する */
.menu-toggle-btn {
display: block;
background: none;
border: none;
padding: 10px;
cursor: pointer;
order: 3;
z-index: 1001;
}
/* スマートフォン用のメニューを表示する */
.mobile-nav {
display: block; /* デフォルトで非表示にするため、このルールを追加 */
width: 100%;
position: fixed; /* ヘッダーの下ではなく画面全体を覆うように */
top: 70px; /* ヘッダーの高さに合わせて調整 */
left: 0;
z-index: 999;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transform: translateX(-100%); /* 画面左側に非表示にする */
transition: transform 0.3s ease-in-out;
}
/* メニューが開いたときにこのクラスが適用されます */
.mobile-nav.is-open {
transform: translateX(0); /* 画面内に表示する */
}
.mobile-nav ul {
flex-direction: column;
text-align: center;
background-color: var(--white);
}
.mobile-nav li {
padding: 15px 0;
border-bottom: 1px solid var(--soft-gray);
}
.mobile-nav li:last-child {
border-bottom: none;
}
/* ヘッダーのレイアウト調整 */
.site-header .container {
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
}