@charset "UTF-8";

/* ====================================
   基本設定
   ==================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', "Helvetica Neue", Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
    padding-bottom: 0; 
}

a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
a:hover { opacity: 0.7; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
ul { list-style: none; }

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 30px; /* スマホ余白 */
}

/* ====================================
   ヘッダー (PC/SP共通)
   ==================================== */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    padding: 15px 0;
    color: #fff;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 30px;
}

/* --- ヘッダー左側のレイアウト調整 --- */
.header-left {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    justify-content: flex-start;
}

/* 追加したキャッチコピーのスタイル */
.header-tagline {
    color: #fff;
    font-size: 0.75rem; /* 小さめの文字 */
    margin-bottom: 5px; /* ロゴとの間隔 */
    opacity: 0.9;
    line-height: 1.2;
    font-family: sans-serif;
}

.logo-top {
	display: flex;
    align-items: center;

}

/* ロゴ */
.logo-icon {
	width: 164px;
    color: #fff;
}

.logo-hos {
	font-size: 0.8rem; 
	margin-left: 18px;
	padding-top: 16px;
	line-height: 1;}


/* --- PC用ヘッダー右側エリア --- */
/* デフォルト（スマホ）では非表示にする */
.header-pc-right {
    display: none; 
    flex-direction: column;
    align-items: flex-end;
}

/* 上段：連絡先情報 */
.header-contact-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    font-family: sans-serif;
}

.h-tel-box {
    display: flex;
    align-items: center;
    gap: 5px;
}
.h-tel-icon { width: 28px; height: auto; padding-right: 5px; }
.h-tel-number {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
}
.h-hours { font-size: 0.8rem; opacity: 0.9; }

.h-line-btn {
    background-color: #06c755;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}
.line-icon-s {
    font-size: 0.6rem;
    background: #fff;
    color: #06c755;
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}

/* 下段：ナビゲーション */
.pc-nav ul { display: flex; gap: 30px; }
.pc-nav a {
    color: #fff;
    font-weight: bold;
    font-size: 0.95rem;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 5px;
}
.pc-nav a::after {
    content: '';
    position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: #fff;
    transition: 0.3s;
}
.pc-nav a:hover::after { width: 100%; }


/* ====================================
   ハンバーガーメニュー (スマホ用)
   ==================================== */
.hamburger {
    display: block;
    position: relative;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 1500;
    margin-top: 5px;
}
.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff; /* 通常時は白（背景が暗いため） */
    transition: 0.3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* ★ここが修正ポイント！ */
/* メニューが開いた時（activeクラス）は、背景が白になるので黒色にする */
.hamburger.active span {
    background-color: #333 !important; 
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg); top: 11px; }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg); bottom: 11px; }

/* ドロワーメニュー */
.sp-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 1400;
    transition: 0.4s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
}
.sp-nav.panelactive { right: 0; }
.sp-nav ul li { margin: 25px 0; text-align: center; font-size: 1.2rem; font-weight: bold; }


/* ====================================
   TOPメインビジュアル
   ==================================== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #333;
}
.hero-slider {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}
.slide::after {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
}
.slide.active { opacity: 1; }

.hero-content {
    position: absolute;
    top: 55%;
    left: 8%; 
    transform: translateY(-50%);
    color: #fff;
    z-index: 10;
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);
    width: 84%;
}
.hero-tag {
    font-size: 0.8rem;
    background: rgba(255,255,255,0.2);
    border: 1px solid #fff;
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 15px;
}
.hero-title {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.5;
}

/* ====================================
   コンテンツ共通
   ==================================== */
.section { padding: 80px 0; }
.section-title { font-size: 1.6rem; text-align: center; margin-bottom: 20px; }
.section-desc { text-align: center; font-size: 1rem; margin-bottom: 50px; line-height: 1.8; }

.fade-up { opacity: 0; transform: translateY(40px); transition: all 1s ease; }
.fade-up.in-view { opacity: 1; transform: translateY(0); }

/* アイコン */
.service-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.icon-box { width: 80px; text-align: center; }
.icon-box img { width: 50px; margin-bottom: 10px; }
.icon-box p { font-weight: bold; }

/* About */
.about-container { display: flex; flex-direction: column; gap: 30px; background: #f5f5f5; padding: 40px; border-radius: 8px; }
.about-img { position: relative; }
.about-img img { width: 100%; border-radius: 8px; }
.name-tag {
    position: absolute; bottom: 10px; right: 10px;
    background: rgba(0,0,0,0.7); color: #fff;
    padding: 5px 15px; font-size: 0.9rem;
}
.about-head { font-size: 1.4rem; margin-bottom: 20px; }

.title-style {
    color: #fff;
    font-size: 1.3em;
    font-weight: normal;
    line-height: 1.8; 
	margin-bottom: 30px;
  }

.title-style span {
	background:linear-gradient(transparent 60%, rgba(240, 248, 255, 0.2)10%);

    /* 文字周りの余白（影の大きさに関係します） */
    padding: 2px 10px;
    
    /* 改行時の設定（必須） */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
/* Dark Section */
.dark-section { background-color: #111; color: #fff; }
.feature-row { display: flex; flex-direction: column; gap: 30px; margin-bottom: 60px; }
.feature-row:last-child { margin-bottom: 0; }
.img-placeholder { width: 100%; height: 250px; background: #333; display: flex; align-items: center; justify-content: center; color: #777; }
.btn-more { color: #fff; border-bottom: 1px solid #fff; padding-bottom: 2px; display: inline-block; margin-top: 15px; }

/* SNS Area */
.sns-wrapper { display: flex; flex-direction: column; gap: 30px; align-items: center; }
.insta-btn {
    display: inline-block; background: #000; color: #fff;
    padding: 10px 30px; border-radius: 30px; font-weight: bold;
    margin-bottom: 10px;
}
.insta-placeholder { width: 100%; max-width: 300px; height: 300px; background: #eee; display: flex; align-items: center; justify-content: center; margin: 0 auto; }

/* FAQ */
.faq-section { background: #e0f2f1; }
.faq-title { text-align: center; font-size: 2rem; margin-bottom: 40px; }
.faq-item { background: #fff; padding: 25px; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.faq-q { color: #000; font-weight: bold; font-size: 1.1rem; margin-bottom: 10px; }
.faq-q::before { content: 'Q. '; color: #ccc; }
.faq-a { color: #555; font-size: 0.95rem; }
.faq-a::before { content: 'A. '; color: #d32f2f; font-weight: bold; }

/* ====================================
   Access セクション (新デザイン対応)
   ==================================== */
.access-section {
    background-color: #f5f5f5; /* 全体の背景色（薄いグレー） */
    padding: 60px 0;
}

.access-title-main {
    font-size: 2rem;
    margin-bottom: 30px;
    font-weight: normal;
    letter-spacing: 0.05em;
}

.access-container {
    display: flex;
    flex-direction: column; /* スマホは縦並び */
    gap: 40px;
}

/* --- 左側：情報エリア --- */
.access-info {
    flex: 1;
}

.access-logo-area {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.access-logo-icon {
    font-size: 1.8rem;
    margin-right: 10px;
}

.footer-logo {
	width: 191px;
	height: auto;
}
.access-shop-name {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.a-telicon {
	width: 35px;
	height: auto;
	padding-bottom:10px; 
	padding-right: 11px;
}

.access-details p {
    font-size: 1rem;
    line-height: 2;
    margin-bottom: 5px;
    font-feature-settings: "palt";
}

/* 新しいLINEボタン（グレー） */
.access-line-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: #b3b3b3; /* 画像に合わせたグレー */
    color: #fff;
    width: 280px;
    height: 70px;
    border-radius: 35px;
    padding: 0 10px 0 30px;
    margin-top: 30px;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    transition: opacity 0.3s;
}
.access-line-btn:hover {
    opacity: 0.8;
}

.access-line-text {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    line-height: 1.2;
}
.tel-txt {
    margin-top: 10px;
    font-size: 1.5rem !important;
    font-weight: bold;
}
.access-line-icon-box {
    background-color: #06c755;
    color: #fff;
    font-weight: bold;
    font-size: 0.8rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-right: 15px;
}

/* --- 右側：地図エリア --- */
.access-map {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右寄せ */
}

.map-placeholder {
    width: 100%;
    height: 300px;
    background-color: #e0e0e0; /* 仮の地図背景 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    position: relative;
}
/* 仮のデザイン装飾（水色の川など） */
.map-placeholder::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 30%; height: 100%;
    background-color: #b3e5fc;
    z-index: 0;
}

.map-btn-area {
    width: 100%;
    text-align: right;
}

.btn-googlemap {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: 8px 25px;
    border-radius: 20px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.3s;
}
.btn-googlemap:hover {
    background-color: #333;
}

.map-note {
    margin-top: 10px;
    font-size: 2.5rem;
    font-weight: bold;
}

/* --- PC表示 (768px以上) --- */
@media screen and (min-width: 768px) {
    .access-container {
        flex-direction: row; /* 横並び */
        justify-content: space-between;
    }
    .access-details p {
        font-size: 1.1rem;
    }
    .map-placeholder {
        height: 350px;
    }
}

/* --- フッター (Copyright) --- */
.pc-footer {
    text-align: center;
    padding: 30px 0 100px; /* スマホでは固定フッターとかぶらないよう下を空ける */
    background: #f5f5f5;
    font-size: 0.85rem;
    color: #333;
}

@media screen and (min-width: 768px) {
    .pc-footer {
        padding-bottom: 30px; /* PCでは普通に戻す */
    }
}


/* ====================================
   スマホ専用：固定フッター
   ==================================== */
.sp-fixed-footer {
    position: fixed;
    bottom: 0; left: 0; width: 100%;
    background-color: #000;
    z-index: 2000;
    padding: 12px 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-btn-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0 10px; 
}
.f-btn {
    flex: 1;                 /* 余白を均等に分ける */
    flex-basis: 0;           /* 基準の幅を0にする */
    min-width: 0;            /* ★重要：中身が長くても無理やり幅を合わせる設定 */
    
    display: flex; 
    align-items: center; 
    justify-content: center;
    height: 60px; 
    border-radius: 50px; 
    text-align: center;
    white-space: nowrap;     /* 文字を折り返さない */
    overflow: hidden;        /* はみ出た分は隠す（念のため） */
}
.btn-tel { background-color: #fff; color: #000; }
.f-icon { font-size: 1.6rem; margin-right: 8px; }
.f-text-box { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.f-main { font-size: 1.3rem; font-weight: bold; font-family: sans-serif; padding-left: 4px; padding-right: 6px; }
.f-sub { font-size: 0.8rem; font-weight: normal; }
.a-telicon-sp {
	width: 23px;
	height: auto;
	padding-bottom:13px; 
}
.btn-line {
    background-color: #E9E9E9; color: #333;
    position: relative; padding-right: 25px;
}
.btn-line .f-text-box { text-align: right; margin-right: 5px; }
.f-line-icon-box {
    position: absolute; right: 20px;
    background-color: #06c755; color: #fff;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-weight: bold; font-size: 0.7rem;
}
.footer-info-text { color: #fff; font-size: 0.75rem; letter-spacing: 0.5px; font-family: sans-serif; }


/* ====================================
   レスポンシブ (PC: 768px以上)
   ==================================== */
@media screen and (min-width: 768px) {
    body { padding-bottom: 0; }
    
    /* Header (PC) */
    .header {
        background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
        padding: 20px 0;
    }
    
    /* ハンバーガーは隠す */
    .hamburger { display: none; }
    .sp-nav { display: none; }

    /* PC用右側メニューを表示する */
    .header-pc-right { display: flex; }

    /* Hero */
    .hero-content { left: 15%; width: auto; top: 50%; }
    .hero-title { font-size: 3.5rem; }

    /* Layout */
    .container { padding: 20px 20px; }
    
    .about-container { flex-direction: row; align-items: center; }
    .about-img { flex: 1; padding: 20px; }
    .about-text { flex: 1; padding-left: 30px; }
    
    .feature-row { flex-direction: row; align-items: center; }
    .feature-row.reverse { flex-direction: row-reverse; }
    .feature-text, .feature-img { flex: 1; }

    .sns-wrapper { flex-direction: row; justify-content: center; gap: 50px; }

    .access-container { flex-direction: row; }
    .access-info, .access-map { flex: 1; }

    /* Fixed Footer Hidden on PC */
    .sp-fixed-footer { display: none; }
}

/* スマホ表示時の余白調整 */
@media screen and (max-width: 767px) {
    /* bodyの余白をなくす（白い隙間を消す） */
    body { 
        padding-bottom: 0; 
    } 

    /* フッターの内側を広げて、グレーの背景を伸ばす */
    .pc-footer { 
        padding-bottom: 140px; /* 固定フッターの高さ分＋余裕 */
    }

    .hero-title { font-size: 1.8rem; }
}

/*====================================
   3. ハンバーガーメニュー (Mobile)
   ==================================== */
.hamburger {
    display: block;
    position: fixed; /* 常に画面に固定 */
    top: 15px;       /* ヘッダーの余白に合わせる */
    right: 30px;     /* 右端からの位置 */
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 9999;   /* ★最前面に表示（メニューより上） */
}

.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff; /* 通常時は白 */
    transition: all 0.4s;
    border-radius: 4px;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* ★メニューが開いた時（activeクラス）の設定 */
.hamburger.active {
    top: 25px;        /* 上からの位置 */
    left: 25px;       /* ★左側に移動 */
    right: auto;      /* 右寄せを解除 */
    
    /* ボタンサイズを大きくして押しやすく */
    width: 45px;
    height: 45px;
}

/* 開いたときの×印（線）の設定 */
.hamburger.active span {
    background-color: #333 !important; /* ★強制的に黒にする */
    height: 3px;                       /* 線を少し太く */
}

/* ×印のアニメーション */
.hamburger.active span:nth-child(1) {
    top: 20px;
    transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0; /* 真ん中の線は消す */
}

.hamburger.active span:nth-child(3) {
    top: 20px;
    transform: rotate(-45deg);
}

/* PC表示（768px以上）ではハンバーガーを隠す */
@media screen and (min-width: 768px) {
    .hamburger { display: none; }
}

/* ====================================
   トップへ戻るボタン
   ==================================== */
.page-top-btn {
    position: fixed;
    bottom: 20px; /* 下からの位置 */
    right: 20px;  /* 右からの位置 */
    width: 80px; /* サイズを80pxに設定 */
    height: auto;
    z-index: 3000; /* 他の要素より手前に */
    opacity: 0;          /* 最初は透明 */
    visibility: hidden;  /* 最初は非表示 */
    transition: all 0.3s ease; /* ふわっと表示する設定 */
    cursor: pointer;
}

/* ボタンが表示される時のスタイル */
.page-top-btn.is-show {
    opacity: 1;
    visibility: visible;
}

/* ホバー時に少し薄くするエフェクト */
.page-top-btn:hover {
    opacity: 0.8;
}

/* スマホ表示時の調整 */
@media screen and (max-width: 767px) {
    .page-top-btn {
        width: 66px; /* スマホでは少し小さめに */
        /* 固定フッター(約80px)と被らないように位置を上げる */
        bottom: 110px; 
    }
}

.page-top-btn.menu-open-hide {
    opacity: 0 !important;       /* 強制的に透明にする */
    visibility: hidden !important; /* クリック判定も消す */
    pointer-events: none;        /* 誤タップ防止 */
    transition: none;            /* すっと消えるように */
}