@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;

}

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

.logo-icon a {
    line-height: 1; /* 親要素の行間を詰めて余白を最小限にする */
}

.logo-hos {
    display: block; /* ブロック要素にしてレイアウトしやすくする */
    margin-top: 5px; /* ★マイナスの数値を指定して上に引っ張る（お好みで数値を調整してください） */
    font-size: 0.8rem; 
    margin-left: 18px;
    padding-top: 0px;
    line-height: 1;
}

.allforone {
	width: 50px;
	height: auto;
	margin-left: 5px;
}

/* --- 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%; }

.top-text {
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
}


/* ====================================
   ハンバーガーメニュー (スマホ用)
   ==================================== */
.hamburger {
    display: block;
    position: relative;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 1500;
    margin-top: 41px;
}
.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: flex-start !important;
	padding-top: 140px;
    color: #333;
}
.sp-nav.panelactive { right: 0; }
.sp-nav ul li { margin: 10px 0; text-align: center; font-size: 1.2rem; line-height: 2.0em; 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;
}

.repair-btn-wrapper {
  text-align: center;
  margin: 30px 0;
}

.btn-repair-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 32px;
  background-color: transparent;
  color: #333333; /* 文字色 */
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border: 2px solid #333333; /* 枠線 */
  border-radius: 8px; /* 少しだけ角を丸く */
  transition: all 0.3s ease;
  width: 90%;
  max-width: 320px;
}

/* マウスホバー時の動き */
.btn-repair-outline:hover {
  background-color: #333333; /* 背景を塗りつぶす */
  color: #ffffff; /* 文字を白に */
}

/* 右側の矢印アイコン */
.btn-repair-outline::after {
  content: '→';
  margin-left: 12px;
  transition: transform 0.3s ease;
}

/* ホバー時に矢印だけ右にスッと動かす */
.btn-repair-outline:hover::after {
  transform: translateX(5px);
}

/* ====================================
   コンテンツ共通
   ==================================== */
.section { padding: 80px 0; }
.section-title-top { font-size: 1.6rem; text-align: center; margin-bottom: 5px; }
.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: 70%; margin-left: 15%; margin-right: auto; }
.name-tag {
    position: absolute; bottom: 10px; left: 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; }

.about-echigoya { margin-bottom: 50px;}

/* --- PC表示 (768px以上) --- */
@media screen and (min-width: 768px) {
.about-echigoya { margin-bottom: 80px;}
}
.about-echigoya-txt { font-size: 1.6rem; font-weight: bold; color: #fff; }



/* ====================================
   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-btn-area {
    width: 100%;
    text-align: right;
}

.map-size {
	width: 87%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.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: 1.1rem; 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 { 
        padding-bottom: 0 !important; /* 強制的に余白をゼロに */
    } 

    .pc-footer { 
        padding-bottom: 140px; /* 固定フッターに隠れないための余白 */
        background-color: #f5f5f5; /* 背景色を確実に指定 */
    }

    .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: 15px !important;
    left: 25px;       /* ★左側に移動 */
    right: auto;      /* 右寄せを解除 */
    margin-top: 10px !important; 
    /* ボタンサイズを大きくして押しやすく */
    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; }
}

.insta-icon {
	width: 30px;
	height: auto;
	text-align: center;
}

.insta-menu-iconmini {
	width: 31px;
	height: auto;
}
/* ====================================
   トップへ戻るボタン
   ==================================== */
.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;            /* すっと消えるように */
}

.instagram-container {
display: flex;
flex-wrap: wrap; /* 横並びがきつい場合は次の行に移る */
justify-content: center; /* 中央揃え */
gap: 10px; /* 埋め込み間のスペース */
}
.instagram-media {
flex: 1 1 350px; /* 幅350pxに制限しつつレスポンシブ対応 */
}


/* ====================================
   serviceページ
   ==================================== */

/* --- メインビジュアル（ヒーロー） --- */
.hero-content-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 10;
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);
    text-align: center;
    width: 100%;
}
.hero-title-large {
    font-size: 2.5rem;
    font-weight: normal;
    letter-spacing: 0.2em;
}
.hero-note-text {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #fff;
    font-size: 1rem;
    z-index: 10;
}

.hero-service {
    position: relative; /* ★必須：中の画像をこの枠内に基準付けする */
    width: 100%;        /* ★必須：横幅を画面いっぱいに */
    overflow: hidden;   /* ★必須：はみ出た画像を隠す */
    background-color: #333;
    
    height: 50vh; /* 画面の半分の高さ */
    min-height: 300px; /* 最小の高さ */
    margin-bottom: 60px; /* ★下のセクション（Instagram）との余白 */
}

.hero-service-p {
    position: relative; /* ★必須：中の画像をこの枠内に基準付けする */
    width: 100%;        /* ★必須：横幅を画面いっぱいに */
    overflow: hidden;   /* ★必須：はみ出た画像を隠す */
    background-color: #333;
    
    height: 50vh; /* 画面の半分の高さ */
    min-height: 300px; /* 最小の高さ */
    margin-bottom: 30px; /* ★下のセクション（Instagram）との余白 */
}

/* --- Instagram セクション --- */
.sns-flex-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
}
.insta-btn-black {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 1.2rem;
    text-decoration: none;
    margin-bottom: 15px;
}
.insta-icon-mark {
    font-size: 1.5rem;
    margin-right: 15px;
}
.sns-btn-area {
    text-align: center;
    font-size: 0.9rem;
}
.sns-preview-area {
    width: 100%;
    max-width: 300px;
}
.insta-placeholder-box {
    background-color: #e6e6e6;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #555;
    padding: 20px;
}
.insta-date-text {
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* =========================================
   コース案内（百合・牡丹・芍薬）
========================================= */
.course-section {
    max-width: 900px;
    margin: 60px auto 40px;
    padding: 40px;
    background-color: #fdfdfd; /* 少しだけ背景色をつけて区別 */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 柔らかい影 */
    text-align: center;
}

.course-intro {
    margin-bottom: 40px;
}

.course-intro h3 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 20px;
    display: inline-block;
    position: relative;
}

/* タイトルの下にアクセントの線 */
.course-intro h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background-color: #8B7D6B; /* 和風で落ち着いた色合い */
}

.course-intro p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
}

.course-list {
    display: flex;
    justify-content: center;
    gap: 60px; /* アイコン同士の間隔 */
    flex-wrap: wrap;
}

.course-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
}

.course-icon {
    width: 71px;
    height: auto;
	margin-bottom: 10px;
}


.course-item h4 {
    font-size: 1.1rem;
    color: #333;
    letter-spacing: 0.1em;
	display: inline-block;
    background: linear-gradient(transparent 60%, rgba(179, 229, 252, 0.5) 40%);
    padding: 0 10px;
	margin-bottom: 10px;
}

/* スマホ閲覧時の調整 */
@media screen and (max-width: 768px) {
    .course-section {
        padding: 30px 20px;
    }
    
    .course-intro p {
        font-size: 0.95rem;
        text-align: left;
    }

    .course-list {
        flex-direction: column; /* ここで縦1列に変更します */
        align-items: center;    /* 中央揃えにします */
        gap: 40px;              /* 縦に並んだ時の、上下の隙間を調整します */
    }

    .course-item {
        width: 100%; /* 横幅の制限を解除して、見やすくします */
    }

    .course-icon {
        width: 71px; /* スマホでも少し存在感が出るようにサイズを微調整 */
        height: auto;
        margin-bottom: 15px;
    }
    
    .course-item h4 {
        font-size: 1.2rem;
    }
}


/* ========================================
   料金セクション（モノトーン・黒基調デザイン）
======================================== */
.price-section { padding: 20px 0 0 0; }
.price-section * { box-sizing: border-box; }

/* 共通パーツ */
.sec-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 20px; border-bottom: 2px solid #222; padding-bottom: 10px; color: #222; }
.img-wrap img { width: 10%; border-radius: 4px; margin-bottom: 3px; padding-right: 5px; }
.desc { font-size: 0.95rem; line-height: 1.6; color: #333; }

/* --- 1. 車検ブロック --- */
.syaken-block { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 50px; }
.syaken-left { width: 45%; }
.syaken-right { width: 50%; }

/* プランリスト */
.plan-list { list-style: none; padding: 0; margin: 0 0 25px 0; display: flex; flex-direction: column; gap: 10px; }
.plan-list li { display: flex; align-items: center; border: 1px solid #ccc; background: #fafafa; padding: 15px; border-radius: 4px; }
.plan-name { width: 130px; font-weight: bold; color: #222; font-size: 1.1rem; flex-shrink: 0; display: flex; flex-direction: column; line-height: 1.2; }
.plan-name span { font-size: 0.75rem; color: #666; font-weight: normal; margin-top: 4px; }
.plan-desc { font-size: 0.95rem; color: #333; text-align: center; margin: 5px auto 5px auto;}

/* 費用相場 */
.stat-box { border: 1px solid #222; padding: 15px 20px; border-radius: 4px; background: #fff; margin-bottom: 20px; }
.stat-row { display: flex; justify-content: space-between; font-size: 1.1rem; font-weight: bold; margin-bottom: 10px; color: #222; }
.stat-row:last-child { margin-bottom: 0; }

/* 法定費用エリア */
.legal-box p { text-align: center; font-weight: bold; margin-bottom: 10px; color: #222; }
.formula { background: #f5f5f5; border: 1px solid #ddd; padding: 15px; border-radius: 4px; text-align: center; font-weight: bold; font-size: 0.95rem; color: #333; }
.formula span { color: #000; text-decoration: underline; margin-left: 5px; }

/* --- 2. タイルブロック --- */
.grid-block { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.grid-item { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 25px; display: flex; flex-direction: column; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.grid-item .sec-title { font-size: 1.3rem; }

.item-content { display: flex; gap: 20px; flex-grow: 1;}
.item-left { width: 50%; display: flex; }
.item-right { width: 50%; display: flex; justify-content: flex-end; }

/* 鈑金の黒いタグ */
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.tag { background: #333; color: #fff; padding: 3px 8px; font-size: 0.8rem; border-radius: 2px; }

/* 各タイルの料金枠 */
.price-box { border: 1px solid #222; padding: 15px; border-radius: 4px; background: #fff; }
.price-row { display: flex; justify-content: space-between; font-weight: bold; font-size: 0.95rem; color: #222; }
.price-row-b { display: flex; justify-content: space-between; font-weight: bold; font-size: 0.95rem; color: #222; }

/* --- 3. スマホ表示 --- */
@media screen and (max-width: 767px) {
    /* 車検 */
    .syaken-block { flex-direction: column; gap: 30px; }
    .syaken-left, .syaken-right { width: 100%; }
    .plan-list li { flex-direction: column; align-items: flex-start; gap: 8px; }
    .plan-name { width: 100%; flex-direction: row; align-items: baseline; gap: 5px; }
    .plan-name span { margin-top: 0; }

    /* タイル */
    .grid-block { grid-template-columns: 1fr; gap: 20px; }
    .grid-item { padding: 20px; }
    .item-content {
        display: flex;
        flex-direction: column; /* 横並びを解除して縦並びに変更 */
        gap: 15px; /* 説明文と料金表の間の隙間 */
    }

    .item-left, 
    .item-right {
        width: 100%; /* スマホ画面の横幅いっぱいに広げる */
    }

    .price-box {
        width: 100%;
        box-sizing: border-box; /* 画面枠からはみ出さないようにする設定 */
    }
}

/* 板金・塗装のリスト */
.price-section {
    padding-top: 40px;
}
.price-main-title {
    font-size: 1.8rem;
    margin-bottom: 50px;
    font-weight: normal;
}
.price-category {
    margin-bottom: 50px;
}
.price-sub-title {
    font-size: 2.0rem;
    font-weight: normal;
    margin-bottom: 0;
    display: inline-block;
    background: linear-gradient(transparent 60%, rgba(179, 229, 252, 0.5) 40%);
    padding: 0 10px;
}
.price-note {
    font-size: 1.2rem;
}


/* --- 板金・塗装の事例リスト --- */
.paint-desc {
    margin-bottom: 30px;
}

.catch-quote-box {
  position: relative;
  background-color: #f9f9f9; /* 薄いグレーの背景 */
  padding: 30px 40px;
  border-radius: 8px;
  margin: 20px 0;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.quote-icon {
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 60px;
  color: #e0e0e0;
  font-family: serif;
  line-height: 1;
}

.quote-text {
  margin: 0;
  line-height: 1.8;
  color: #333;
}

.quote-main {
  font-size: 1.3em;
  font-weight: bold;
  color: #1a1a1a;
  display: inline-block;
  margin-bottom: 10px;
  border-bottom: 2px solid #db5199; 
}

.quote-sub {
  font-size: 1em;
}

.case-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* 画像と画像の間の隙間 */
}

/* 1つ1つの事例ブロック */
.case-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%; /* 基本はスマホ向けで100% */
}

/* 画像が入る枠 */
.case-img-placeholder {
    width: 100%;
    height: auto; 
    background-color: #eee;
    overflow: hidden;
}

.interview-img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3; /* 写真の縦横比（必要に応じて変更） */
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 4px;
	overflow: hidden; /* 角丸からはみ出る画像を綺麗に隠すため */
}

.interview-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の縦横比を崩さず、枠いっぱいにトリミングして表示 */
    display: block;
}

.case-img-placeholder img {
    width: 100%;
    height: auto;
    display: block;
}

.case-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.case-name {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.case-price {
    font-size: 1.2rem;
    font-weight: bold;
}

/* --- PC用表示 (768px以上) --- */
@media screen and (min-width: 768px) {
    .case-item {
        /* 横幅を約半分にして2つ横に並べる */
        width: calc(50% - 15px); 
    }
}


.yoshida-note {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 20px;
    text-align: right;
}
.case-list {
    display: flex;

}
.case-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.case-img-placeholder {
    width: 100%;
    max-width: 300px;
    height: 200px;
    background-color: #a0a0a0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.case-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.case-name {
    font-size: 1.2rem; 
    margin-bottom: 5px;
}
.case-price {
    font-size: 0.9rem;
}

/* --- レスポンシブ (スマホ用) --- */
@media screen and (max-width: 767px) {
    .p-item, .p-price, .p-desc {
        width: 100%;
        padding: 5px 0;
    }
    .price-row {
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
	.price-row-b {
        border-bottom:none;
        padding-bottom: 5px;
    }
    .price-row.price-header {
        display: none; /* スマホでは見出し行を非表示 */
    }
	.price-row-b.price-header {
        display: none; /* スマホでは見出し行を非表示 */
    }
}

/* --- レスポンシブ (PC用) --- */
@media screen and (min-width: 768px) {
    .hero-title-large {
        font-size: 4rem;
    }
    .sns-flex-wrapper {
        flex-direction: row;
        justify-content: center;
        gap: 80px;
    }
    /* 料金表の区切り線デザイン */
    .price-row {
        margin-bottom: 10px;
    }
	.price-row-b {
        margin-bottom: 5px;
    }
    .price-row:not(.price-header) .p-price,
    .price-row:not(.price-header) .p-desc {
        border-left: 1px solid #333;
    }
    .price-row.price-header .p-col {
        font-weight: normal;
        border-bottom: 1px solid transparent;
    }
	
	.price-row-b:not(.price-header) .p-price,
    .price-row-b:not(.price-header) .p-desc {
        border-left: 1px solid #333;
    }
    .price-row-b.price-header .p-col {
        font-weight: normal;
        border-bottom: 1px solid transparent;
    }
    
    .yoshida-note {
        position: absolute;
        right: 10%;
        top: 50%;
        transform: translateY(-50%);
        margin-bottom: 0;
    }
    .case-item {
        flex-direction: row;
        align-items: center;
    }
}


/* ====================================
   パートナー募集ページ用スタイル
   ==================================== */

/* --- メインビジュアル --- */
.hero-partner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #333;
    height: 50vh; 
    min-height: 300px;
    margin-bottom: 40px;
}

/* --- メッセージセクション --- */
.partner-intro {
    padding-top: 40px;
    padding-bottom: 40px;
}
.partner-main-title {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 30px;
    font-weight: normal;
    line-height: 1.6;
}
.partner-lead-text {
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
    line-height: 2;
}

/* --- 特徴セクション（薄緑のボックス） --- */
.partner-features {
    padding-top: 20px;
}
.features-box {
    background-color: #F0F8F7; /* 画像に近い薄い緑色 */
    border-radius: 15px;
    padding: 40px 20px;
    max-width: 800px;
    margin: 0 auto;
}
.features-box-title {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 40px;
    font-weight: normal;
}
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.check-icon {
    font-size: 2rem;
    line-height: 1;
    color: #333; /* チェックマークの色 */
    font-weight: bold;
}
.feature-content h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: normal;
	color: #db5199;
}
.feature-content p {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- ターゲットセクション --- */
.partner-target {
    text-align: center;
}
.target-title {
    font-size: 1.7rem;
    margin-bottom: 30px;
    font-weight: normal;
}
.target-list {
    display: inline-block;
    text-align: center;
    line-height: 1.8;
	font-size: 1.3rem;
}
.target-list li {margin-bottom: 40px;}

.marker-target {
  /* [修正] 色をrgba()に変更し、透明度を0.4（40%）に指定 */
  background-image: linear-gradient(to right, rgba(204, 255, 51, 0.4) 0%, rgba(255, 247, 0, 0.4) 100%);
  
  /* [元の指定] */
  background-size: 100% 40%;
  background-repeat: no-repeat;
  background-position: bottom;
}

/* --- インタビューセクション --- */
.interview-section-title {
    font-size: 1.4rem;
    margin-bottom: 40px !important;
    font-weight: normal;
}
.interview-flex {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.img-placeholder-square {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1; /* 正方形にする */
    background-color: #a0a0a0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 20px auto;
}
.interview-title {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 15px;
    font-weight: normal;
}
.interview-sub {
    font-size: 1rem;
    margin-bottom: 30px;
}
.qa-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.qa-item {
    font-size: 1rem;
	color: #db5199;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* --- 和気あいあい画像セクション --- */
.partner-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
    font-weight: normal;
	text-align: center;
}

.partner-atmosphere {
    padding-top: 20px;
    padding-bottom: 80px;
}
.atmosphere-img-placeholder {
    width: 100%;
    height: auto;
    color: #fff; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.center {
	margin-left: auto;
	margin-right: auto;
	text-align:center; 
}

.p70p {
	width: 100%;
}

/* --- レスポンシブ (PC用) --- */
@media screen and (min-width: 768px) {
    .partner-main-title {
        font-size: 2.2rem;
    }
    .features-box {
        padding: 60px;
    }
    .interview-flex {
        flex-direction: row;
        align-items: flex-start;
    }
    .interview-img-box {
        flex: 1;
        max-width: 300px;
        margin: 0;
    }
    .interview-text-box {
        flex: 2;
    }
    .atmosphere-img-placeholder {
        height: 400px;
    }
	
	.p70p {
	width: 70%;
}
}

/* --- 見学案内ボックス --- */
.visit-box {
    border: 2px solid #4BABA0; 
    background-color: #F0F8F7; 
    border-radius: 8px; 
    padding: 40px 20px;
    text-align: center;
    margin: 60px auto; 
    max-width: 800px; 
    box-shadow: 0 4px 10px rgba(0, 185, 0, 0.1); /* ふんわりとした影 */
}

/* メインの文字（大きい文字） */
.visit-main-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* サブの文字（小さい文字） */
.visit-sub-text {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
}

/* スマホ向けのサイズ調整 */
@media screen and (max-width: 767px) {
    .visit-box {
        padding: 30px 15px;
        margin: 40px auto;
        width: calc(100% - 40px); /* スマホ画面で左右に余白を確保 */
    }
    .visit-main-text {
        font-size: 1.2rem; /* スマホでは少し小さく */
    }
    .visit-sub-text {
        font-size: 0.85rem;
    }
}



.text-spage {
	font-size: 1.1rem;
	text-align: left;
}
.text-90 {
	font-size: 0.9rem;
}

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

.mgT20 {margin-top: 20px;}
.mgT40 {margin-top: 40px;}
.mgT60 {margin-top: 60px;}
.mgT80 {margin-top: 80px;}
.mgT100 {margin-top: 100px;}

.mgR10 {margin-right: 10px;}
.mgB20 {margin-bottom: 20px;}
.mgB30 {margin-bottom: 30px;}
.mgB40 {margin-bottom: 40px;}
.mgB60 {margin-bottom: 60px;}
.mgB80 {margin-bottom: 80px;}
.mgB100 {margin-bottom: 100px;}