@charset "UTF-8";

/* ===============================================
   基本設定
   =============================================== */
/* すべての要素に対して、paddingやborderを幅(width)の中に含める設定 */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 画面外にはみ出した要素を隠し、横スクロール（右の余白）を防止する設定 */
html, body {
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
}

/* ===============================================
   ヘッダーエリア（共通設定）
   =============================================== */
header {
    width: 100%;
    max-width: 1200px; /* サイト幅 */
    margin: 0 auto;    /* 中央寄せ */
}

/* --- 上段：ロゴとSNSアイコン --- */
.header-logo-sns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin: 30px 0;
}

/* ロゴ */
.header-logobutton img {
    height: 50px;
    width: auto;
}

/* SNSアイコン */
.header-snsbar {
    display: flex;
    gap: 20px;
    align-items: center; /* アイコンを上下中央揃え */
}

.header_snsbutton {
    text-decoration: none;
    transition: opacity 0.3s;
    display: block; /* 画像サイズに合わせるためブロック化 */
    line-height: 1; /* 余計な隙間を削除 */
}

/* SNSアイコン画像のサイズ指定（共通） */
.header_snsbutton img {
    height: 35px; /* 全体の基準サイズ */
    width: auto;
    display: block;
}

/* ▼▼▼ Facebookだけサイズを個別に調整 ▼▼▼ */
.header_snsbutton img[alt="facebook"] {
    height: 30px; /* ここだけ数値を変更できます */
}

/* ホバー時の挙動 */
.header-menubutton:hover,
.header_snsbutton:hover {
    opacity: 0.7;
}

/* --- 下段：メニューバー --- */
.header-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    padding-bottom: 10px;
}

.header-menubutton {
    text-decoration: none;
    color: #333; /* 文字色 */
    font-weight: bold;
    font-size: 14px;
    flex-grow: 1;
    text-align: center;
    border-right: 1px solid #ccc;
    transition: opacity 0.3s;
}

.header-menubutton:first-child {
    border-left: 1px solid #ccc;
}

.header-menubutton p {
    margin: 0;
    padding: 5px 0;
}

/* ===============================================
   ヒーローセクション
   =============================================== */
.hero-section {
    width: 100%;
    margin-bottom: 60px;
    position: relative;
}

/* 画像とテキストが入るエリア */
.hero-contents {
    position: relative;
    width: 100%;
    height: 700px; /* PCでの画像の高さ */
    overflow: hidden;
    background-color: #f5f5f5;
}

/* --- スライドショー画像エリア --- */
.hero-slideshow {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slideshow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    /* 8枚 × 5秒 = 40秒 */
    animation: slideAnime 40s infinite;
}

/* 各画像の遅延時間（5秒間隔） */
.hero-slideshow img:nth-of-type(1) { animation-delay: 0s; }
.hero-slideshow img:nth-of-type(2) { animation-delay: 5s; }
.hero-slideshow img:nth-of-type(3) { animation-delay: 10s; }
.hero-slideshow img:nth-of-type(4) { animation-delay: 15s; }
.hero-slideshow img:nth-of-type(5) { animation-delay: 20s; }
.hero-slideshow img:nth-of-type(6) { animation-delay: 25s; }
.hero-slideshow img:nth-of-type(7) { animation-delay: 30s; }
.hero-slideshow img:nth-of-type(8) { animation-delay: 35s; }

/* 8枚用のキーフレーム */
@keyframes slideAnime {
    0% { opacity: 0; }
    2% { opacity: 1; }   /* ふわっと現れる */
    10% { opacity: 1; }  /* 表示維持 */
    12.5% { opacity: 0; } /* 次の画像へ（100% / 8枚 = 12.5%） */
    100% { opacity: 0; }
}

/* --- スライドショーの丸ポチ --- */
.hero-pagination {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    z-index: 20;
}

.pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #666;
    background-color: transparent;
    animation: dotAnime 40s infinite;
}

.pagination-dot:nth-child(1) { animation-delay: 0s; }
.pagination-dot:nth-child(2) { animation-delay: 5s; }
.pagination-dot:nth-child(3) { animation-delay: 10s; }
.pagination-dot:nth-child(4) { animation-delay: 15s; }
.pagination-dot:nth-child(5) { animation-delay: 20s; }
.pagination-dot:nth-child(6) { animation-delay: 25s; }
.pagination-dot:nth-child(7) { animation-delay: 30s; }
.pagination-dot:nth-child(8) { animation-delay: 35s; }

@keyframes dotAnime {
    0% { background-color: #666; }
    12.5% { background-color: #666; } /* 点灯維持 */
    12.6% { background-color: transparent; } /* 消灯 */
    100% { background-color: transparent; }
}

/* ===============================================
   ヒーロー上のテキスト
   =============================================== */
.hero-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.hero-text-inner {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}

/* 左上のタイトル */
.hero-text-title {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #333; /* 文字色 */
}

.hero-text-title p {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.hero-text-title h1 {
    font-size: 38px;
    margin: 0;
    line-height: 1.4;
    font-weight: 900;
    font-family: "Noto Sans JP", sans-serif;
}

/* 中央のキャッチコピー */
.hero-text-copy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.hero-text-copy p {
    color: #fff;
    font-size: 66px;
    font-weight: bold;
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 2px 15px rgba(0,0,0,0.6);
    letter-spacing: 0.1em;
}

/* ===============================================
   ヒーロー下部サブメニュー
   =============================================== */
.hero-submenu {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 60px;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.hero-submenu-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* リンクボタンのデザイン */
.link-button {
    display: flex;
    align-items: center;
    justify-content: center; /* 中身を中央寄せ */
    position: relative;      /* 矢印配置の基準 */
    width: 90%;
    padding: 15px 20px;
    background-color: #333;  /* ボタン背景色 */
    color: #fff;
    text-decoration: none;
    border: none;
    box-sizing: border-box;
    transition: opacity 0.3s;
}

.link-button:hover {
    opacity: 0.7;
}

.link-button p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

/* 矢印アイコン */
.link-button i {
    font-size: 16px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
}

/* ホバー時に矢印が動く */
.link-button:hover i {
    transform: translateY(-50%) translateX(5px);
}

/* 英語のサブテキスト */
.hero-submenu-contents > p {
    margin: 10px 0 0 0;
    font-size: 14px;
    color: #333; /* 文字色 */
    font-weight: bold;
    letter-spacing: 0.05em;
    text-align: center;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ===============================================
   共通：セクションタイトル
   =============================================== */
.section-title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    color: #333;
    line-height: 1.4;
}

.section-subtitle {
    font-size: 14px;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #333;
    margin: 0;
}

/* ===============================================
   Aboutセクション
   =============================================== */
.about-section {
    width: 100%;
    background-color: #faf9f6; /* 薄いベージュ */
    padding: 100px 0;
}

.about-contents {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-text {
    margin-bottom: 50px;
    width: 100%;
}

/* 本文テキスト（タイトル以外） */
.about-text p:not(.section-title) {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 30px;
    text-align: justify;
}

.about-contents .hero-submenu-contents {
    width: 300px;
}

/* ===============================================
   Newsセクション
   =============================================== */
.news-section {
    width: 100%;
    padding: 100px 0;
    background-color: #fff;
}

.news-contents {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.news-header {
    text-align: center;
    margin-bottom: 60px;
}

.news-header .section-title {
    margin-bottom: 5px;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #ccc;
}

.news-list li {
    border-bottom: 1px solid #ccc;
}

.news-list a {
    display: flex;
    align-items: center;
    padding: 30px 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s, opacity 0.3s;
}

.news-list a:hover {
    background-color: #fafafa;
    opacity: 0.8;
}

.news-date {
    width: 150px;
    flex-shrink: 0;
    margin: 0;
    font-size: 14px;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

.news-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    flex-grow: 1;
}

.news-footer {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.news-footer .hero-submenu-contents {
    width: 300px;
}

/* ===============================================
   Coworkingセクション
   =============================================== */
.coworking-section {
    width: 100%;
    background-color: #FAF5EF; 
    position: relative; /* 画像配置の基準 */
}

.coworking-wrapper {
    display: flex;
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto;    
    align-items: center; 
}

/* 左側：テキストエリア */
.coworking-text-area {
    width: 50%; 
    padding: 80px 20px 80px 0; 
    box-sizing: border-box;
    position: relative; 
    z-index: 2; 
}

.coworking-header {
    text-align: left;
    margin-bottom: 40px;
}

.coworking-header .section-title {
    text-align: left;
    margin-bottom: 5px;
}

.coworking-catch {
    margin-bottom: 50px;
}

.sub-catch {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.main-catch {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.4;
    font-family: "Noto Sans JP", sans-serif;
    color: #333;
    margin: 0;
}

.coworking-buttons {
    display: flex;
    gap: 20px;
}

.coworking-buttons .hero-submenu-contents {
    width: 220px;
}

/* 右側：画像エリア（画面右端まで伸びる） */
.coworking-image-area {
    position: absolute; 
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 1; 
}

.coworking-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center left;
}

@media screen and (max-width: 1200px) {
    .coworking-text-area {
        padding-left: 20px;
    }
}

/* ===============================================
   Stayセクション
   =============================================== */
.stay-section {
    width: 100%;
    padding: 100px 0;
    background-color: #fff;
}

.stay-contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.stay-header {
    margin-bottom: 30px;
}
.stay-header .section-title {
    margin-bottom: 5px;
}

.stay-catch {
    font-size: 32px;
    font-weight: 900;
    font-family: "Noto Sans JP", sans-serif;
    margin-bottom: 40px;
    color: #333;
}

.stay-logo img {
    max-width: 300px;
    height: auto;
    margin-bottom: 60px;
}

.stay-links-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 80px;
}

.stay-buttons {
    display: flex;
    gap: 20px;
}

.stay-buttons .hero-submenu-contents {
    width: 200px;
}

.stay-text-list {
    text-align: left;
    padding-top: 10px;
}

.stay-text-list p {
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: bold;
    color: #333;
}

.stay-gallery {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.stay-gallery-item {
    width: 23%;
    aspect-ratio: 1 / 1;
    background-color: #eee;
}

.stay-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===============================================
   Share farmセクション
   =============================================== */
.sharefarm-section {
    width: 100%;
    background-color: #FAF5EF; 
    position: relative;
    padding-bottom: 0;
}

.sharefarm-wrapper {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

/* 左側：テキストエリア */
.sharefarm-text-area {
    width: 50%;
    padding: 100px 20px 100px 0;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.sharefarm-header {
    text-align: center;
    margin-bottom: 40px;
    width: fit-content; /* 幅を中身に合わせる */
}

.sharefarm-header .section-title {
    text-align: left;
    margin-bottom: 5px;
}

.sharefarm-catch {
    margin-bottom: 30px;
}

.sharefarm-desc p {
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    margin-bottom: 40px;
}

.sharefarm-buttons {
    display: flex;
    gap: 20px;
}
.sharefarm-buttons .hero-submenu-contents {
    width: 220px;
}

/* 右側：画像エリア */
.sharefarm-image-area {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 1;
}

.sharefarm-image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; 
}

@media screen and (max-width: 1200px) {
    .sharefarm-text-area {
        padding-left: 20px;
    }
}

/* ===============================================
   Recruitingセクション
   =============================================== */
.recruiting-section {
    width: 100%;
    padding: 100px 0;
    background-color: #fff;
}

.recruiting-contents {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.recruiting-header {
    text-align: center;
    margin-bottom: 80px;
}
.recruiting-header .section-title {
    margin-bottom: 5px;
}

.recruiting-list {
    display: flex;
    flex-direction: column;
    gap: 100px;
    text-align: center;
}

.recruiting-item {
    display: flex;
    align-items: center;
    gap: 50px;
}

.recruiting-image {
    width: 300px;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.recruiting-image img {
    width: 100%;
    height: auto;
    display: block;
}

.recruiting-text-area {
    flex-grow: 1;
}

.recruiting-desc {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 40px;
    text-align: justify;
}

.recruiting-button-wrapper {
    width: 280px;
    margin: 0 auto;
}

/* ===============================================
   Sitemapセクション
   =============================================== */
.sitemap-section {
    width: 100%;
    background-color: #FAF5EF; 
    padding: 80px 0;
}

.sitemap-contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.sitemap-main-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 100px;
    padding-left: 20px;
}

.sitemap-main-list a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    transition: opacity 0.3s;
}

.sitemap-main-list a:hover {
    opacity: 0.6;
}

.sitemap-main-list a::before {
    content: "▶";
    font-size: 10px;
    margin-right: 15px;
    color: #333;
}

.sitemap-sub-list {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.sitemap-sub-list a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    transition: opacity 0.3s;
}

.sitemap-sub-list a:hover {
    opacity: 0.6;
}

/* ===============================================
   フッター
   =============================================== */
footer {
    width: 100%;
    background-color: #333; /* 黒背景 */
    padding: 40px 0 20px;   /* 上に広めの余白 */
    color: #fff;
}

.footer-contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
}

/* フッターロゴ */
.footer-logo {
    width: 100%;
    margin-bottom: 40px;
    padding-left: 20px; /* サイトマップと左端を合わせる感覚で調整 */
    box-sizing: border-box;
    text-align: left; /* ロゴは左寄せ */
}

.footer-logo img {
    height: 60px; /* ロゴサイズ調整 */
    width: auto;
    /* ▼重要：黒いロゴを白く反転させるフィルター */
    filter: brightness(0) invert(1); 
}

/* 会社情報（会社名と住所） */
.footer-info {
    margin-bottom: 40px;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    text-align: center;
}

.company-name {
    margin-right: 20px;
    font-weight: bold;
}

/* 「ARCH」を大きくする */
.company-name-arch {
    font-size: 20px;
    font-weight: 900;
    margin-left: 5px;
}

.copyright {
    color: #fff;
    font-size: 11px;
    margin: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;
    opacity: 0.8;
}

/* ===============================================
   コワーキングページ（coworking.php）専用スタイル
   =============================================== */

/* ページタイトル帯（黒背景） */
.page-title-area {
    width: 100%;
    background-color: #000;
    padding: 30px 0;
    text-align: center;
}

.page-title-area h1 {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.05em;
}

/* ヒーローエリア（ベージュ背景） */
.coworking-page-hero {
    width: 100%;
    background-color: #FAF5EF;
    padding: 0; /* 画像の高さを基準にするため余白削除 */
    position: relative;
    line-height: 0; /* 画像下の隙間対策 */
}

.coworking-hero-wrapper {
    /* ▼▼▼ 修正: flexを解除し、ブロック要素にする ▼▼▼ */
    display: block; 
    width: 100%;
    height: 75vh; /* 高さは画像なりにする */
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* 下レイヤー：イラスト（画面幅100%） */
.coworking-hero-image {
    width: 50%;
    position: relative;
    z-index: 1;
}

.coworking-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin: -20% 0;
}

/* 上レイヤー：テキスト（最大幅1200px、中央配置の箱の中に右寄せ） */
.coworking-hero-text {
    /* ▼▼▼ 絶対配置で画像の上に被せる ▼▼▼ */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 画面中央に配置 */
    
    width: 100%;
    max-width: 1200px; /* テキストエリアの最大幅制限 */
    height: 100%; /* 高さは画像エリアと同じにする */
    
    z-index: 2; /* イラストより手前 */
    
    /* ボックス内のテキスト配置 */
    display: flex;
    align-items: center;   /* 垂直方向：中央 */
    justify-content: flex-end; /* 水平方向：右寄せ */
    
    padding: 0 20px; /* 画面幅が狭まった時の余白 */
    box-sizing: border-box;
    
    /* テキスト自体の設定 */
    text-align: right;
    line-height: 1.5; /* 親のline-height:0をリセット */
    margin: 6% 0 0;
}

.coworking-hero-text h2 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.5;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
}

/* メニューグリッド（白背景・4つの箱） */
.coworking-menu-section {
    width: 100%;
    background-color: #fff;
    padding: 100px 0;
}

.coworking-menu-grid {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap; /* 折り返し許可 */
    gap: 40px; /* ボックス間の隙間 */
    justify-content: center;
}

/* 各メニューボックス */
.coworking-menu-item {
    width: calc(50% - 20px); /* 2列配置（隙間分を引く） */
    border: 1px solid #333;
    padding: 20px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    transition: opacity 0.3s;
}

.coworking-menu-item:hover {
    opacity: 0.7;
}

/* ボックス内のロゴエリア */
.menu-logo {
    height: 60px; /* ロゴの高さを確保 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.menu-logo img {
    max-height: 100%;
    width: auto;
}

/* ボックス内のテキスト */
.coworking-menu-item p {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.coworking-hr {
    margin: 100px 0;
}

/* ===============================================
   オプションセクション（コワーキングページ）
   =============================================== */
.option-section {
    width: 100%;
    background-color: #fff; /* 背景白 */
}

.option-contents {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.option-header {
    text-align: center;
    margin-bottom: 60px;
}

/* ▼▼▼ 追加：タイトルとサブタイトルの間を詰める設定 ▼▼▼ */
.option-header .section-title,
.price-header .section-title {
    margin-bottom: 0; /* ここを調整（例: 40px → 5px） */
}

.option-header .section-subtitle,
.price-header .section-subtitle {
    font-size: 18px;
}

.option-lists-wrapper {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 200px; /* 列の間隔を広めに */
}

.option-column {
    width: fit-content; /* 中身に合わせて幅を決定 */
}

.option-column h3 {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 20px;
    font-family: "Noto Sans JP", sans-serif;
    text-align: left; /* 見出し左揃え */
    padding-left: 10px; /* リストの文字位置と微調整 */
}

.option-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.option-column li {
    font-size: 15px;
    font-weight: bold;
    line-height: 2;
    color: #333;
    text-align: left;
}

/* ===============================================
   HACORI works 詳細セクション
   =============================================== */
.hacori-works-section {
    width: 100%;
    background-color: #fff;
    overflow: hidden; /* ▼追加：画像を画面幅にした際の横スクロールバー防止 */
}

.hacori-works-contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- ヘッダー（ロゴとタイトル） --- */
.works-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.works-logo {
    width: 500px; /* ロゴサイズ */
}

.works-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.works-title {
    text-align: left;
}

.works-title h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    color: #333;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
}

/* --- マップとボタンのエリア --- */
.works-map-area {
    position: relative;
    width: 100%;
}

/* ▼ フロアマップ全体を画面幅いっぱいにする魔法の設定 */
.works-floor-map {
    width: 100vw;
    max-width: 1200px;
    position: relative; /* アイテム画像を重ねるための基準 */
}

/* --- アニメーションの定義 --- */
@keyframes slideFadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px); /* 50px左から */
    }
    100% {
        opacity: 1;
        transform: translateX(0);     /* 元の位置へ */
    }
}

@keyframes slideFadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);  /* 50px右から */
    }
    100% {
        opacity: 1;
        transform: translateX(0);     /* 元の位置へ */
    }
}

/* 1枚目：マップ本体（ベース） */
.works-floor-map .map-base {
    width: auto;
    height: 75vh;
    display: block;
    opacity: 0; /* 初期状態は透明にして隠す */
}

/* ▼ JavaScriptで .is-active が付与されたら発動 */
.works-floor-map.is-active .map-base {
    animation: slideFadeInLeft 1.2s ease-out forwards;
}

/* 2枚目：アイテム画像（マップの上にピッタリ重ねる） */
.works-floor-map .map-item {
    position: absolute;
    top: 60px;
    right: 200px;
    width: auto;
    height: 90px;
    object-fit: contain; 
    display: block;
    opacity: 0; /* 初期状態は透明にして隠す */
}

/* ▼ JavaScriptで .is-active が付与されたら発動（少し遅らせて表示） */
.works-floor-map.is-active .map-item {
    animation: slideFadeInRight 1.2s ease-out 0.5s forwards;
}

/* --- 左下のアクションボタン --- */
.works-action {
    position: absolute;
    bottom: 120px; /* 画像の下からの位置（マップと被りすぎる場合は数値を大きくしてください） */
    left: 0;      /* max-width1000pxの左端（タイトル等と縦が揃う） */
    z-index: 10;
}

.action-text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
}

.works-action .link-button {
    width: 240px;
    padding: 16px 20px;
}

/* ===============================================
   利用料金セクション
   =============================================== */
.price-section {
    width: 100%;
}

.price-contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.price-header {
    text-align: center;
    margin-bottom: 0;
}

.price-note {
    font-size: 12px;
    font-weight: bold;
    margin-top: 0;
}

/* グリッドレイアウト */
.price-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* カード間の余白 */
    justify-content: flex-start; /* 左寄せ（上段3つ、下段2つになるように） */
}

/* 各料金カード */
.price-card {
    width: calc((100% - 60px) / 3); /* 3列配置 (余白30px*2 を引いて3で割る) */
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.card-header {
    padding: 5px 20px;
    text-align: center;
    border-bottom: 1px solid #ccc; /* テーブル上の線 */
}

.card-header h3 {
    font-size: 24px;
    font-weight: 900;
    margin: 0 0 10px 0;
}

.card-header p {
    font-size: 18px;
    margin: 0;
    font-weight: bold;
    line-height: 1.5;
}

.card-header p.strong {
    font-size: 18px;
}

/* テーブル部分 */
.card-table {
    width: 100%;
    border-collapse: collapse;
}

.card-table th,
.card-table td {
    padding: 5px 15px;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
    font-weight: bold;
}

.card-table th {
    text-align: center;
    border-right: 1px solid #ccc;
    width: 40%;
}

.card-table td {
    text-align: right; /* 金額は右寄せ */
}

/* テーブル下のテキストエリア */
.card-text {
    padding: 5px 20px;
    text-align: center;
    flex-grow: 1; /* 高さを揃えるための魔法 */
}

.card-text p {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 5px 0;
    line-height: 1.6;
}

/* 写真部分 */
.card-image {
    width: 100%;
    aspect-ratio: 1 / 0.8;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ご利用予約ボタン（カード一番下） */
.card-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 20px 0;
    font-size: 14px;
    font-weight: bold;
    transition: opacity 0.3s;
}

.card-button:hover {
    opacity: 0.8;
}

/* ▼▼▼ 追加：ボタンの矢印ホバーアニメーション ▼▼▼ */
.card-button i {
    position: absolute;
    right: 20px;
    top: 50%;                     /* 縦中央の基準 */
    transform: translateY(-50%);  /* 縦ぴったり中央に揃える */
    transition: transform 0.3s;   /* アニメーションにかける時間 */
}

/* ホバー時に矢印を5px右へ動かす */
.card-button:hover i {
    transform: translateY(-50%) translateX(5px);
}
/* ▲▲▲ ここまで ▲▲▲ */


/* --- 特殊カード（ロッカー等）用 --- */
.price-card.special-card {
    border: 1px solid #ccc; /* 枠線だけ */
}

.price-card.special-card .card-text {
    padding: 30px 20px;
    /* ▼ 写真とボタンがない分、縦方向も中央に揃える設定 */
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

/* ▼ 文字をすべて中央揃えに変更 */
.card-text.align-left p {
    text-align: center; 
}

.card-text.align-left p.indent {
    margin-bottom: 15px;
}

/* （p.centerの指定は不要になったため削除してまとめています） */

.card-text.align-left p.small {
    font-size: 18px;
}

/* ===============================================
   HACORI marble 用の追加スタイル
   =============================================== */

.marble-floor-map .map-base {
    /* 3階は 80vh です。お好みのサイズに変更してください */
    height: 80vh;
}

.marble-floor-map .map-item {
    /* マップのサイズを変更するとアイテムの位置もズレるため、ここで微調整します */
    top: 60px;    /* 上からの位置（例） */
    right: 200px; /* 右からの位置（例） */
    height: 90px;  /* アイテムの大きさ（例） */
}

/* marbleのマップ上部にある説明文 */
.marble-description {
    text-align: center;
    margin-bottom: 40px;
}

.marble-description p {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.8;
    margin: 0;
    color: #333;
    text-align: center; /* ▼念押しで追加 */
}

/* 料金表カード内の小さめの注釈テキスト */
.price-card .card-text-note {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 5px;
}

/* ===============================================
   HACORI 豊前田 サービスパック
   =============================================== */
.buzenda-pack-section {
    width: 100%;
}

.buzenda-contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダーエリア */
.buzenda-header {
    text-align: center;
    margin-bottom: 60px;
}

.buzenda-logo {
    width: 320px;
    margin: 0 auto;
}

.buzenda-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.buzenda-title h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 5px 0;
    font-family: "Noto Sans JP", sans-serif;
}

.buzenda-title p {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}

/* パッケージリスト（縦1列） */
.package-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.package-card {
    width: 100%;
    max-width: 500px; /* カードの最大幅を制限 */
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.package-card h3 {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin: 40px 0 20px;
    font-family: "Noto Sans JP", sans-serif;
}

.pack-sub-note {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    margin: -10px 0 20px 0;
}

/* テーブルデザイン（枠線なし、上下線のみ） */
.pack-table {
    width: 80%;
    margin: 0 auto 20px;
    border-collapse: collapse;
}

.pack-table th, 
.pack-table td {
    padding: 5px 10px;
    font-size: 16px;
    font-weight: bold;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.pack-table th {
    text-align: center;
    border-right: 1px solid #ccc; /* 中央の縦線 */
    width: 40%;
}

.pack-table td {
    text-align: center;
}

.pack-table .small-text {
    font-size: 12px;
}

/* テキストエリア */
.package-desc {
    padding: 0 30px 30px;
    text-align: center;
}

.package-desc p {
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 5px 0;
    line-height: 1.6;
    color: #333;
}

.package-desc .pack-strong {
    font-size: 16px;
    font-weight: 900;
}

.package-desc .pack-note {
    font-size: 13px;
}

.pack-left-text p {
    text-align: left;
    font-size: 13px;
}

/* カード内の区切り線 */
.pack-hr {
    border: none;
    border-top: 1px solid #ccc;
    width: 80%;
    margin: 0 auto 20px;
}

/* ▼▼▼ 追加：パッケージカード内のボタン調整 ▼▼▼ */
.package-card .card-button {
    width: 60%; /* テーブルの幅に合わせる */
    margin: 0 auto 40px auto; /* 左右中央寄せ、下部に40pxの余白 */
    padding: 15px 0; /* 少しだけスリムに調整 */
}

/* ===============================================
   HACORI 茶山 レンタルスペース
   =============================================== */
.chayama-section {
    width: 100%;
    background-color: #fff; /* 背景白 */
}

.chayama-contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダーエリア */
.chayama-header {
    text-align: center;
    margin-bottom: 60px;
}

.chayama-logo {
    width: 320px;
    margin: 0 auto 15px;
}

.chayama-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.chayama-title h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 5px 0;
    font-family: "Noto Sans JP", sans-serif;
}

.chayama-title p {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}

/* イントロダクション（説明文） */
.chayama-intro {
    text-align: center;
    margin-bottom: 60px;
}

.chayama-intro h4 {
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 40px 0;
    font-family: "Noto Sans JP", sans-serif;
}

.chayama-intro p {
    font-size: 15px;
    font-weight: bold;
    line-height: 2;
    margin: 0 0 25px 0;
    color: #333;
}

.chayama-intro p:last-child {
    margin-bottom: 0; /* 最後の段落の余白を消す */
}

/* 写真エリア */
.chayama-image {
    width: auto;
    height: 550px;
    margin-bottom: 80px;
    overflow: hidden;
    align-items: center;
    display: flex;
    justify-content: center;
}

.chayama-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===============================================
   HACORI ご利用の流れ セクション
   =============================================== */
.how-to-use-section {
    width: 100%;
    padding: 0 0 300px 0;
}

.how-to-use-contents {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー */
.how-to-use-header {
    text-align: center;
    margin-bottom: 60px;
}

.how-to-use-header img {
    width: 320px;
    height: auto;
    margin: 0 auto 10px;
}

.how-to-use-header h3 {
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 5px 0;
    font-family: "Noto Sans JP", sans-serif;
}

.how-to-use-header p {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

/* ステップのコンテナ */
.flow-steps-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 各ステップの箱 */
.flow-step-box {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 40px 20px;
    text-align: center;
    box-sizing: border-box;
}

.flow-step-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px 0;
    font-family: "Noto Sans JP", sans-serif;
}

.flow-step-box p {
    font-size: 15px;
    line-height: 1.4;
    font-weight: bold;
    margin: 0;
    color: #000;
}

/* 下向きの黒い三角（CSSで作成） */
.flow-triangle {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 35px solid #000;
    margin: 0 auto; /* 箱と箱の間の余白なしでピッタリくっつける */
}

/* 一番下のQRコード */
.flow-qr-code {
    margin-top: 40px;
    text-align: center;
}

.flow-qr-code img {
    width: 200px;
    height: auto;
}

/* ===============================================
   ご利用予約ページ (reserve.php)
   =============================================== */
.reserve-section {
    width: 100%;
    background-color: #f9f9f9;
    padding: 80px 0 120px 0;
}

.reserve-contents {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 60px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.reserve-header {
    text-align: center;
    margin-bottom: 50px;
}

.reserve-header h2 {
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 10px 0;
}

.reserve-form {
    width: 100%;
}

.form-group {
    margin-bottom: 30px;
}

.form-group label {
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* 必須・任意バッジ */
.required, .optional {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 3px;
    margin-left: 10px;
    vertical-align: middle;
}
.required { background-color: #e60012; color: #fff; }
.optional { background-color: #999; color: #fff; }

/* 入力欄のデザイン */
.reserve-form input[type="text"],
.reserve-form input[type="email"],
.reserve-form input[type="tel"],
.reserve-form input[type="date"],
.reserve-form select {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: inherit;
    background-color: #fff;
    transition: border-color 0.3s;
}

.reserve-form input:focus,
.reserve-form select:focus {
    outline: none;
    border-color: #333;
}

/* 読み取り専用（自動計算）フィールド */
.readonly-input {
    background-color: #f0f0f0 !important;
    color: #666;
    cursor: not-allowed;
}

/* 2列レイアウト用 */
.form-row {
    display: flex;
    gap: 20px;
}
.form-row .half {
    width: 50%;
}

.form-hr {
    border: none;
    border-top: 1px dashed #ccc;
    margin: 40px 0;
}

/* 合計金額エリア */
.form-total-area {
    text-align: center;
    margin-bottom: 40px;
    background-color: #FAF5EF;
    padding: 30px;
    border-radius: 8px;
}
.form-total-area p {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
}
.form-total-area h3 {
    font-size: 36px;
    color: #e60012;
    margin: 0;
    font-weight: 900;
}

/* Square決済エリア */
.square-payment-area {
    margin-bottom: 40px;
}
.payment-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}
#card-container {
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fafafa;
}

/* 送信ボタン */
.submit-button {
    width: 100%;
    padding: 20px;
    background-color: #000;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.3s;
}
.submit-button:hover {
    opacity: 0.8;
}

/* ===============================================
   予約管理画面 (admin.php) 用スタイル
   =============================================== */
.admin-body {
    background-color: #f4f6f9; /* 薄いブルーグレー */
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
}

.admin-header {
    background-color: #343a40; /* ダークグレー */
    color: #fff;
    padding: 15px 20px;
}

.admin-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-header-inner h1 {
    font-size: 20px;
    margin: 0;
}

.logout-button {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border: 1px solid #fff;
    padding: 5px 15px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.logout-button:hover {
    background-color: #fff;
    color: #343a40;
}

.admin-main {
    padding: 40px 20px;
}

.admin-container {
    max-width: 1400px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.admin-container h2 {
    margin: 0 0 5px 0;
    font-size: 24px;
}

.admin-container p {
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
}

/* スマホ等で横スクロールできるようにするラッパー */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1000px; /* PC向けに見やすく幅を確保 */
}

.admin-table th, 
.admin-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
}

.admin-table th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: bold;
    white-space: nowrap;
}

.admin-table tr:hover {
    background-color: #f1f5f9;
}

.admin-table td.bold {
    font-weight: bold;
}

.admin-table td.price {
    font-weight: bold;
    color: #e60012;
}

.admin-table td.small-text {
    font-size: 12px;
    line-height: 1.5;
    color: #555;
}

/* 施設名などのバッジ */
.badge {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 5px;
}

/* 決済ステータスのバッジ */
.status-success {
    background-color: #d4edda;
    color: #155724;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.status-error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

/* ===============================================
   予約管理画面：拡張機能用スタイル (admin.php)
   =============================================== */

/* タブデザイン */
.admin-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
}

.admin-tab {
    padding: 12px 25px;
    background: #e9ecef;
    border: none;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #555;
    transition: all 0.3s;
}

.admin-tab.active {
    background: #000;
    color: #fff;
}

.admin-tab:hover:not(.active) {
    background: #d6d8db;
}

/* タブコンテンツの切り替え */
.admin-tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.admin-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 検索エリア */
.search-area {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.search-form input, 
.search-form select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* 汎用ボタン */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    transition: opacity 0.3s;
}
.btn:hover { opacity: 0.8; }
.btn-primary { background: #000; color: #fff; }
.btn-success { background: #28a745; color: #fff; }
.btn-outline { background: #fff; border: 1px solid #000; color: #000; }

/* ステータス変更フォーム */
.status-form {
    display: flex;
    gap: 5px;
    align-items: center;
}

.status-select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

/* カレンダーエリア */
#calendar {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* フルカレンダーのイベント（バー）のデザイン調整 */
.fc-event {
    cursor: pointer;
}

/* 手動予約フォーム */
.manual-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: #f8f9fa;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.manual-form-wrapper h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 22px;
}

.manual-form .form-group label {
    font-size: 14px;
    margin-bottom: 5px;
    color: #333;
}

.manual-form .form-group input,
.manual-form .form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 時・分入力用のスタイル */
.time-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.time-input-group input[type="number"] {
    width: 80px !important;
    padding: 10px !important;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

/* ===============================================
   宿（Stay）ページ専用スタイル
   =============================================== */
.stay-concept-section {
    width: 100%;
    background-color: #FAF5EF; /* 背景色ベージュ */
    padding: 60px 0 80px;
}

.stay-hero {
    background-color: #FAF5EF; /* 背景色ベージュ */
    margin-bottom: 0;          /* ▼追加：透明な隙間をなくして下のセクションと合体させる */
    padding-bottom: 40px;      /* ▼追加：丸ポチの下に適度な余白を持たせる */
}

.stay-concept-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.stay-kurashi-logo {
    text-align: center;
    margin-bottom: 60px;
}

.stay-kurashi-logo img {
    height: 50px; /* 筆文字のサイズ */
    width: auto;
}

/* 3つの施設リンクボックス */
.stay-facility-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 80px;
}

.stay-facility-box {
    flex: 1;
    background-color: #fff;
    border: 1px solid #999;
    padding: 40px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
}

.stay-facility-box:hover {
    opacity: 0.8;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.stay-facility-brand {
    font-size: 11px;
    letter-spacing: 0.4em;
    color: #666;
    margin-bottom: 15px;
    margin-right: -0.4em; /* letter-spacingによる右側のズレを補正 */
}

.stay-facility-name {
    font-size: 28px;
    font-weight: 900;
    font-family: "Noto Sans JP", sans-serif;
}

/* コンセプト文章 */
.stay-concept-text {
    max-width: 680px;
    margin: 0 auto 60px;
}

.stay-concept-text h3 {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

.stay-concept-text p {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #333;
}

.stay-concept-text p:last-child {
    margin-bottom: 0;
}

/* クラウドファンディング文章 */
.stay-crowdfunding {
    max-width: 680px;
    margin: 0 auto;
}

.stay-crowdfunding hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0;
}

.stay-crowdfunding p {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.8;
    margin: 25px 0;
}

/* 施設詳細セクション (stay.php下部) */
.facility-section { padding: 80px 20px; max-width: 1000px; margin: 0 auto; }
.facility-block { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 60px; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 60px; }
.facility-block:last-child { border-bottom: none; }
.facility-image { flex: 1; min-width: 300px; }
    /* 画像の縦横比を綺麗に揃える */
.facility-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 4px; }
.facility-info { flex: 1; min-width: 300px; }
.facility-info h3 { font-size: 22px; margin-bottom: 15px; border-left: 4px solid #000; padding-left: 10px; }
.facility-info p { font-size: 15px; line-height: 1.8; margin-bottom: 20px; }
    
.reserve-action { text-align: center; padding: 60px 20px; background-color: #FAF5EF; }

/* ===============================================
   宿（Stay）ページ：プラン一覧セクション
   =============================================== */
.stay-plan-section {
    width: 100%;
    background-color: #fff;
    padding: 80px 0;
}

.stay-plan-contents {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.stay-plan-header {
    text-align: center;
    margin-bottom: 60px;
}

.stay-plan-header img {
    height: 40px;
    width: auto;
    margin-bottom: 15px;
}

.stay-plan-brand {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.stay-plan-header h2 {
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 5px 0;
    font-family: "Noto Sans JP", sans-serif;
}

.stay-plan-subtitle {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
}

/* 3列のグリッドレイアウト */
.stay-plan-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.stay-plan-card {
    width: calc((100% - 60px) / 3); /* 3列配置 */
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* カードのヘッダー部分 */
.stay-plan-card-header {
    padding: 25px 10px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.stay-plan-card-header h3 {
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 10px 0;
}

.stay-plan-card-header p {
    font-size: 13px;
    font-weight: bold;
    margin: 0;
}

/* 客室タイプ部分 */
.stay-plan-card-info {
    padding: 20px 10px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    flex-grow: 1; /* 文字量が違っても高さを自動で揃える */
}

.stay-plan-card-info .info-title {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.stay-plan-card-info .info-large {
    font-size: 18px;
}

.stay-plan-card-info .info-desc {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    line-height: 1.5;
}

/* チェックイン時間部分 */
.stay-plan-card-time {
    padding: 20px 10px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.stay-plan-card-time p {
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    line-height: 1.8;
}

/* テーブル部分（収容人数・面積など） */
.stay-plan-table {
    width: 100%;
    border-collapse: collapse;
}

.stay-plan-table th,
.stay-plan-table td {
    padding: 12px 10px;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

.stay-plan-table th {
    border-right: 1px solid #ccc;
    width: 50%;
}

/* 画像部分 */
.stay-plan-card-image {
    width: 100%;
    aspect-ratio: 4 / 3; /* 画像の縦横比を綺麗に固定 */
}

.stay-plan-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 黒い予約ボタン */
.stay-plan-card-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 20px 0;
    font-size: 14px;
    font-weight: bold;
    transition: opacity 0.3s;
}

.stay-plan-card-button:hover {
    opacity: 0.8;
}

.stay-plan-card-button i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
}

.stay-plan-card-button:hover i {
    transform: translateY(-50%) translateX(5px);
}

/* ===============================================
   ページトップへ戻るボタン
   =============================================== */
.page-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #B4B4B4; /* 添付画像に近いグレー */
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 24px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.page-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.page-top-btn:hover {
    background-color: #999; /* ホバー時は少し濃いグレーに */
    color: #fff;
}

/* ===============================================
   クラウドファンディング支援者様ページ
   =============================================== */
.crowdfunding-section {
    width: 100%;
    background-color: #FAF5EF; /* 優しいベージュ背景 */
    padding: 80px 0 100px;
}

.crowdfunding-contents {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* イントロ部分（ロゴ＆リード文） */
.cf-intro {
    text-align: center;
    margin-bottom: 100px;
}

.cf-intro .cf-main-logo {
    height: 60px;
    width: auto;
    margin: 0 auto 15px;
    display: block;
}

.cf-intro .cf-kurashi-logo {
    height: 35px;
    width: auto;
    margin: 0 auto 50px;
    display: block;
}

.cf-intro h2 {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.8;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

.cf-intro p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    text-align: left;
    max-width: 800px;
    margin: 60px auto;
}

/* 共通：ボタンの中央配置 */
.cf-btn-wrap {
    display: flex;
    justify-content: center;
}

/* メッセージエリア */
.cf-message-area {
    margin-bottom: 100px;
    text-align: center;
}

.cf-section-title {
    display: inline-block;
    font-size: 24px;
    font-weight: 900;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
}

.cf-message-box {
    background-color: #fff;
    padding: 60px;
    border-radius: 12px;
    text-align: left;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.cf-message-lead {
    font-size: 20px !important;
    font-weight: bold;
}

.cf-results {
    list-style: none;
    padding: 0;
    margin: 60px 0;
    font-size: 18px;
    font-weight: bold;
    color: #c2410c; /* アクセントカラー（オレンジ系） */
}

.cf-results li {
    margin-bottom: 10px;
}
.cf-results li::before {
    content: '・';
    margin-right: 5px;
}

.cf-message-box p {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 25px;
    color: #333;
}

.cf-signature {
    text-align: right;
    margin-top: 50px;
}

.cf-signature p {
    margin-bottom: 0;
    line-height: 1.6;
}

/* ===============================================
   クラウドファンディング支援者様ページ：最終確定版スタイル
   =============================================== */

.cf-supporters-area {
    text-align: center;
    padding: 100px 0;
    max-width: 900px; /* PCでの表示幅を最適化 */
    margin: 0 auto;
}

/* タイトルを上下の線で挟むデザイン */
.cf-supporters-title-wrap {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 40px 0;
    margin-bottom: 80px;
}

.cf-section-title {
    font-size: 28px;
    font-weight: 900; /* 極太 */
    margin: 0;
    border-bottom: none; 
}

/* ★★★ (n口支援) の緑色ラベル */
.rank-label {
    font-size: 18px;
    font-weight: bold;
    color: #18623e; /* 画像に合わせた深い緑色 */
}

.rank-label .stars {
    letter-spacing: 0.2em;
    margin-right: 10px;
}

/* 支援者名の一覧（縦並び） */
.supporters-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* お名前同士の間隔 */
}

/* --- 口数に応じたお名前のサイズ調整（PC版） --- */

/* 5口支援：最も大きく、力強く */
.supporter-name-text.is-rank5 {
    font-size: 38px;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

/* 3口支援：2番目に大きい */
.supporter-name-text.is-rank3 {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 0;
}

/* 2口支援：標準より少し大きめ */
.supporter-name-text.is-rank2 {
    font-size: 30px;
    font-weight: 500;
}

/* 1口支援：リストとして読みやすいサイズ */
.supporter-name-text.is-rank1 {
    font-size: 20px;
    font-weight: 500;
    line-height: 0;
}

/* ランクごとの区切り線 */
.cf-separator {
    border: none;
    border-top: 1px solid #ccc;
    width: 100%;
    margin: 60px 0;
}

/* 結びの言葉 */
.cf-closing-msg {
    margin-top: 40px;
    font-size: 20px;
}

.hero-stay-crowdfunding {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 500px;
    padding: 0;
}

.neighborsstay-logo {
    height: 80%;
    width: auto;
    margin: 0;
}

.crowdfunding-buttons {
    color: #fff;
}

/* ===============================================
   ハンバーガーメニュー（PCでは非表示）
   =============================================== */
.hamburger-btn {
    display: none;
}

/* PCではスマホ用メニュー内SNSを非表示にする */
.header-snsbar-sp {
    display: none;
}