@charset "UTF-8";

/* ===============================================
   スマホ用スタイル（幅600px以下で適用）
   =============================================== */

/* --- ヘッダー調整 --- */
.header-logo-sns {
    flex-direction: row; /* 縦並びを解除して正常な配置に戻す */
    margin: 15px 0;      /* PCの上下30pxの余白を15pxに縮めて上に詰める */
    padding-right: 60px; /* 右のハンバーガーボタンと被らないようにスペースを空ける */
    align-items: center; /* 縦方向の中央揃え */
}

/* ▼ スマホではロゴ横のSNSを隠す ▼ */
.header-snsbar {
    display: none;
}

/* スマホ用ロゴのサイズと配置調整 */
.header-logobutton {
    display: block;
    height: auto; /* 誤って入っていた10%の指定をリセット */
}

.header-logobutton img {
    height: 30px; /* ロゴのサイズを小さくする（PCは50px） */
    width: auto;
}

/* ▼▼▼ 追加・変更：ハンバーガーメニュー ▼▼▼ */
/* ハンバーガーボタン（三本線） */
.hamburger-btn {
    display: block;
    position: absolute;
    top: -5px;
    right: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1000;
}

.hamburger-btn span {
    display: block;
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #333;
    border-radius: 3px;
    left: 5px;
    transition: all 0.3s;
}

/* 3本線の位置 */
.hamburger-btn span:nth-child(1) { top: 10px; }
.hamburger-btn span:nth-child(2) { top: 20px; }
.hamburger-btn span:nth-child(3) { top: 30px; }

/* メニューを開いた時 */
.hamburger-btn.is-active span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.hamburger-btn.is-active span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-active span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* スライドしてくるメニュー画面 */
.header-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 60px; /* 上部の余白を少し縮めました */
    transition: all 0.3s ease-in-out;
    z-index: 999;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    flex-wrap: nowrap;
    overflow-y: auto; /* 画面が小さいスマホでもスクロールできるように追加 */
}

/* メニューが開いた時 */
.header-menu.is-active {
    right: 0;
}

/* メニュー内のリンクボタン調整 */
.header-menubutton {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
    padding: 12px 0; /* ▼上下の余白（間隔）を20pxから12pxに縮めました */
}

.header-menubutton p {
    font-size: 15px; /* ▼文字サイズも少し小さくしてバランスを取りました */
    font-weight: bold;
    text-align: center; /* 中央寄せ */
    margin: 0;
}

/* ▼ 追加：スマホメニュー内のSNSバー ▼ */
.header-snsbar-sp {
    display: flex;
    gap: 30px; /* アイコン同士の間隔 */
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    margin-top: 10px;
}
/* ▲▲▲ ここまで ▲▲▲ */

/* --- ヒーローセクション調整 --- */
.hero-contents {
    height: 400px;
    /* PC(600px)より高さを抑える */
}

.hero-text-title {
    top: 40px;
    left: 20px;
}

.hero-text-title h1 {
    font-size: 20px;
    /* 文字サイズを小さく */
}

.hero-text-copy p {
    font-size: 24px;
    /* 文字サイズを小さく */
    line-height: 1.5;
}

/* --- サブメニュー調整 --- */
.hero-submenu {
    flex-wrap: wrap;
    /* 折り返し */
    gap: 20px 10px;
    /* 上下20px、左右10px */
    padding: 0 20px;
    margin-top: 40px;
    box-sizing: border-box;
}

.hero-submenu-contents {
    width: calc(50% - 5px);
    /* 2列配置 */
}

/* ボタンの調整 */
.link-button {
    padding: 12px 15px;
    /* スマホでは少しパディングを小さく */
}

.link-button p {
    font-size: 13px;
    /* 文字サイズ調整 */
}

.link-button i {
    font-size: 12px;
}

/* 英語テキストの調整 */
.hero-submenu-contents>p {
    font-size: 11px;
    margin-top: 8px;
}

/* --- About・Newsセクション共通調整 --- */
.about-section,
.news-section {
    padding: 60px 0;
}

/* .section-title を正しく指定 */
.section-title {
    font-size: 24px;
    margin-bottom: 20px;
}

/* 本文テキスト（タイトル以外） */
.about-text p:not(.section-title) {
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

/* --- お知らせリスト（スマホ用） --- */
.news-list a {
    flex-direction: column;
    /* 縦並びにする */
    align-items: flex-start;
    /* 左寄せ */
    padding: 20px 0;
    /* 左右の余白をなくす */
}

.news-date {
    width: auto;
    /* 幅制限を解除 */
    margin-bottom: 10px;
    /* タイトルとの間隔 */
    color: #666;
}

.news-title {
    font-size: 14px;
}

.news-section {
    padding: 60px 0;
}

.news-header {
    margin-bottom: 40px;
}

.news-footer {
    margin-top: 40px;
}

/* --- Coworkingセクション（スマホ用） --- */
.coworking-wrapper {
    flex-direction: column;
    /* 縦並び */
}

.coworking-text-area {
    width: 100%;
    padding: 60px 20px 40px;
    padding-right: 20px;
    /* 右にも余白を入れる */
}

/* 画像エリアのリセット処理（重要） */
.coworking-image-area {
    position: relative;
    /* 絶対配置を解除 */
    width: 100%;
    /* 幅を画面いっぱいに */
    height: 300px;
    /* 高さを指定（必要に応じて調整） */
    right: auto;
    /* 位置指定を解除 */
    top: auto;
    bottom: auto;
}

/* 文字サイズ等の調整 */
.sub-catch {
    font-size: 15px;
}

.main-catch {
    font-size: 28px;
}

.coworking-buttons {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.coworking-buttons .hero-submenu-contents {
    width: 100%;
    max-width: 300px;
    margin-bottom: 15px;
}

/* --- Stayセクション（スマホ用） --- */
.stay-catch {
    font-size: 22px;
    /* キャッチコピーを小さく */
    margin-bottom: 30px;
}

.stay-links-wrapper {
    flex-direction: column;
    /* 縦並び */
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
}

/* ボタンを折り返して表示 */
.stay-buttons {
    flex-wrap: wrap;
    justify-content: center;
}

.stay-buttons .hero-submenu-contents {
    width: 100%;
    max-width: 280px;
    margin-bottom: 10px;
}

/* ギャラリーを2列にする */
.stay-gallery {
    flex-wrap: wrap;
    gap: 10px;
}

.stay-gallery-item {
    width: calc(50% - 5px);
    /* 2列配置 */
}

/* --- Share farmセクション（スマホ用） --- */
.sharefarm-wrapper {
    flex-direction: column;
}

.sharefarm-text-area {
    width: 100%;
    padding: 60px 20px 40px;
    padding-right: 20px;
}

/* 説明文の文字サイズ調整 */
.sharefarm-desc p {
    font-size: 14px;
    line-height: 1.8;
}

/* 画像エリアのリセット */
.sharefarm-image-area {
    position: relative;
    width: 100%;
    height: 300px;
    right: auto;
    top: auto;
    bottom: auto;
}

/* --- Recruitingセクション（スマホ用） --- */
.recruiting-item {
    flex-direction: column;
    /* 縦並び */
    gap: 30px;
}

.recruiting-image {
    width: 200px;
    /* スマホでは画像を少し小さめに */
    margin: 0 auto;
    /* 中央配置 */
}

.recruiting-desc {
    font-size: 14px;
    margin-bottom: 30px;
    text-align: left;
}

.recruiting-button-wrapper {
    width: 100%;
    /* ボタン幅いっぱい */
    max-width: 300px;
}

.recruiting-list {
    gap: 60px;
    /* スマホでは間隔を少し詰める */
}

/* --- Sitemapセクション & フッター（スマホ用） --- */
.sitemap-section {
    padding: 60px 0;
}

/* メインリスト */
.sitemap-main-list {
    margin-bottom: 60px;
}

/* ポリシー系リンクを縦並びにする */
.sitemap-sub-list {
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* フッター調整 */
footer {
    padding: 40px 0 20px;
}

.footer-logo {
    text-align: center;
    /* スマホではロゴも中央寄せ */
    padding-left: 0;
    margin-bottom: 30px;
}

.footer-logo img {
    height: 50px;
}

.footer-info {
    display: flex;
    flex-direction: column;
    /* 会社名と住所を縦並び */
    gap: 10px;
    margin-bottom: 30px;
    font-size: 13px;
}

.company-name {
    margin-right: 0;
}

/* --- コワーキングページ（スマホ用） --- */

/* ヒーローエリア */
.coworking-hero-wrapper {
    flex-direction: column;
    /* 縦並び */
    padding: 40px 20px;
}

.coworking-hero-image {
    width: 100%;
    margin-bottom: 30px;
}

.coworking-hero-text {
    width: 100%;
    padding-left: 0;
    text-align: center;
    /* スマホでは中央揃えの方が見やすい */
}

.coworking-hero-text h2 {
    font-size: 24px;
}

/* メニューグリッド */
.coworking-menu-section {
    padding: 60px 0;
}

.coworking-menu-grid {
    flex-direction: column;
    /* 1列にする */
    gap: 20px;
}

.coworking-menu-item {
    width: 100%;
    /* 幅いっぱい */
    padding: 40px 20px;
}

/* --- オプションセクション（スマホ用） --- */
.option-section {
    padding: 0 0 60px 0;
}

.option-lists-wrapper {
    flex-direction: column;
    /* 縦並びにする */
    align-items: center;
    /* 中央配置 */
    gap: 50px;
    /* 無料と有料の間隔を狭める */
}

.option-column {
    width: 100%;
    max-width: 300px;
    /* 広がりすぎないように制限 */
}

.option-column h3 {
    text-align: center;
    /* スマホでは見出しも中央が見やすい */
    padding-left: 0;
}

.option-column ul {
    /* リスト全体を中央寄せに見せるための調整 */
    display: table;
    margin: 0 auto;
    text-align: left;
}

/* --- HACORI works 詳細セクション（スマホ用） --- */
.hacori-works-section {
    padding: 0 0 60px 0;
}

.works-header {
    flex-direction: column;
    /* 縦並び */
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

.works-logo {
    width: 250px;
}

.works-title h3 {
    font-size: 16px;
}

.works-map-area {
    display: block;
}

/* ボタンの絶対配置を解除して画像の下に配置 */
.works-action {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 30px;
    text-align: center;
    /* 中央寄せ */
}

.action-text {
    font-size: 14px;
}

.works-action .link-button {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

/* --- 利用料金セクション（スマホ用） --- */
.price-section {
    padding: 60px 0;
}

.price-grid {
    flex-direction: column;
    /* 縦並び */
    gap: 40px;
}

.price-card {
    width: 100%;
    /* 幅いっぱい */
    max-width: 400px;
    margin: 0 auto;
    /* 中央寄せ */
}

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

.card-table th,
.card-table td {
    font-size: 14px;
    padding: 10px;
}

/* --- HACORI marble 用の追加スタイル（スマホ用） --- */
.marble-description p {
    font-size: 14px;
    text-align: center;
    /* ▼左(left)から中央(center)に修正 */
}

/* --- HACORI 豊前田 サービスパック（スマホ用） --- */
.buzenda-pack-section {
    padding: 40px 0 60px 0;
}

.buzenda-logo {
    width: 250px;
}

.package-card h3 {
    font-size: 18px;
    margin: 30px 0 15px;
}

.pack-table {
    width: 90%;
    /* スマホではテーブルの幅を少し広げる */
}

.pack-table th,
.pack-table td {
    font-size: 14px;
    padding: 10px 5px;
}

.package-desc {
    padding: 0 20px 20px;
}

.package-desc p {
    font-size: 14px;
}

/* ▼▼▼ 追加：パッケージカード内のボタン調整（スマホ用） ▼▼▼ */
.package-card .card-button {
    width: 90%;
    /* スマホ側のテーブル幅に合わせる */
    margin-bottom: 30px;
    /* 下部の余白を少し狭める */
}

/* --- HACORI 茶山 レンタルスペース（スマホ用） --- */
.chayama-section {
    padding: 40px 0 60px 0;
}

.chayama-logo {
    width: 250px;
}

.chayama-intro {
    text-align: left;
    /* スマホでは長文は左寄せが読みやすい */
}

.chayama-intro h4 {
    font-size: 18px;
    text-align: center;
    /* タイトルは中央のまま */
    margin-bottom: 30px;
}

.chayama-intro p {
    font-size: 14px;
    line-height: 1.8;
}

/* スマホでは改行(<br>)を無効化して自然に折り返させる */
.chayama-intro p br {
    display: none;
}

.chayama-image {
    margin-bottom: 60px;
}

/* --- HACORI ご利用の流れ セクション（スマホ用） --- */
.how-to-use-section {
    padding: 60px 0;
}

.how-to-use-header h2 {
    font-size: 24px;
}

.how-to-use-header h3 {
    font-size: 22px;
}

.flow-step-box {
    padding: 30px 15px;
}

.flow-step-box h4 {
    font-size: 16px;
    margin-bottom: 15px;
}

.flow-step-box p {
    font-size: 13px;
    /* スマホでは改行(<br>)を無効化して自然に折り返させる */
}

.flow-step-box p br {
    display: none;
}

.flow-triangle {
    /* 三角も少し小さくする */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid #000;
}

/* --- ご利用予約ページ (スマホ用) --- */
.reserve-section {
    padding: 40px 0 80px 0;
}

.reserve-contents {
    padding: 30px 20px;
    border-radius: 0;
}

.form-row {
    flex-direction: column;
    /* スマホでは2列を縦に並べる */
    gap: 0;
}

.form-row .half {
    width: 100%;
}

.form-total-area h3 {
    font-size: 28px;
}

/* --- Stay ページ専用スタイル（スマホ用） --- */
.stay-concept-section {
    padding: 40px 0 60px;
}

.stay-kurashi-logo img {
    height: 40px;
    /* スマホではロゴを少し小さく */
}

.stay-facility-links {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 50px;
}

.stay-facility-box {
    width: 100%;
    padding: 30px 10px;
}

.stay-facility-name {
    font-size: 24px;
}

.stay-concept-text h3 {
    font-size: 20px;
    margin-bottom: 30px;
}

.stay-concept-text p {
    font-size: 14px;
}

.stay-crowdfunding p {
    font-size: 13px;
    padding: 0 10px;
}

.facility-block {
    flex-direction: column;
    gap: 20px;
}

/* --- 宿（Stay）ページ：プラン一覧セクション（スマホ用） --- */
.stay-plan-grid {
    flex-direction: column;
    gap: 30px;
}

.stay-plan-card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.stay-plan-header h2 {
    font-size: 22px;
}

/* --- ページトップへ戻るボタン（スマホ用） --- */
.page-top-btn {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 20px;
}

/* --- クラウドファンディング支援者様ページ（スマホ用） --- */
.crowdfunding-section {
    padding: 50px 0 60px;
}

.cf-intro .cf-main-logo {
    height: 40px;
}

.cf-intro .cf-kurashi-logo {
    height: 25px;
    margin-bottom: 30px;
}

.cf-intro h2 {
    font-size: 16px;
}

.cf-intro p {
    font-size: 14px;
    text-align: left;
}

.cf-section-title {
    font-size: 20px;
}

.cf-message-box {
    padding: 30px 20px;
}

.cf-message-lead {
    font-size: 18px !important;
}

.cf-results {
    font-size: 16px;
}

.cf-message-box p {
    font-size: 14px;
}

.cf-supporters-area {
    padding: 60px 20px;
}

.cf-supporters-title-wrap {
    padding: 30px 10px;
    margin-bottom: 40px;
}

.cf-section-title {
    font-size: 18px;
}

.rank-label {
    font-size: 15px;
    margin-bottom: 20px;
}

/* スマホでは読みやすさを考慮して18pxに調整 */
.supporter-name-text.is-rank5 {
    font-size: 26px;
}
.supporter-name-text.is-rank3 {
    font-size: 20px;
}
.supporter-name-text.is-rank2 {
    font-size: 18px;
}
.supporter-name-text.is-rank1 {
    font-size: 14px;
    line-height: 2.0; /* スマホでも1口支援を読みやすく */
}

.cf-separator {
    margin: 40px 0;
}

.cf-closing-msg {
    font-size: 16px;
}