/* --- 全体設計 --- */
:root {
  --main-green: #689f38;
  --soft-green: #f1f8e9;
  --accent-yellow: #fbc02d;
  --text-color: #444;
  --light-gray: #f9fbf7;
}

* { box-sizing: border-box; }

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", sans-serif;
  line-height: 1.8;
  color: var(--text-color);
  margin: 0;
  background-color: var(--light-gray);
  overflow-x: hidden;
  position: relative;
}

/* PCでは改行を隠す */
.sp-only { display: none; }

/* --- 背景イラスト --- */
body::before {
  content: ""; position: fixed; top: 0; right: 0; width: 500px; height: 600px;
  background: url('leaf-top.png') no-repeat; background-position: top right; background-size: contain;
  opacity: 0.4; z-index: -1; pointer-events: none;
}
body::after {
  content: ""; position: fixed; bottom: 0; left: 0; width: 400px; height: 400px;
  background: url('leaf-bottom.png') no-repeat; background-position: bottom left; background-size: contain;
  opacity: 0.3; z-index: -1; pointer-events: none;
}

/* --- ヘッダー（拡大調整） --- */
header { background: transparent; padding: 60px 20px; }
.header-container { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 40px; }
.logo-area { flex-shrink: 0; }
.site-logo { max-width: 260px; height: auto; display: block; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.02)); }

.outline-text {
  font-size: 2.6rem;
  color: var(--main-green);
  margin: 0;
  text-shadow: 
    2px 2px 0 #fff, -2px -2px 0 #fff,
    2px -2px 0 #fff, -2px 2px 0 #fff,
    0 4px 10px rgba(0,0,0,0.1);
}

/* --- ナビゲーション --- */
nav { 
  background: rgba(255,255,255,0.95); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #eee;
}
nav ul { list-style: none; display: flex; justify-content: center; padding: 0; margin: 0; }
nav ul li { display: flex; align-items: center; }
nav ul li:not(:last-child)::after { content: "|"; color: #ccc; margin: 0 10px; font-weight: normal; }
nav ul li a { display: block; color: var(--main-green); padding: 20px 5px; text-decoration: none; font-weight: bold; font-size: 0.95rem; transition: 0.3s; }
nav ul li a:hover { color: var(--accent-yellow); }

/* --- メインコンテンツ --- */
main { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
section { background: rgba(255, 255, 255, 0.92); padding: 60px 40px; border-radius: 30px; margin-bottom: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
h2 { color: var(--main-green); font-size: 1.8rem; margin-bottom: 40px; position: relative; display: inline-block; }
h2::after { content: ""; position: absolute; bottom: -10px; left: 0; width: 60%; height: 4px; background: var(--accent-yellow); border-radius: 2px; }

/* メインビジュアル中央寄せ */
.main-visual { max-width: 1100px; margin: 0 auto; text-align: center; }
.main-visual img { width: 100%; border-radius: 30px; }

/* 作業内容・工賃など */
.work-main-img { margin-bottom: 30px; border-radius: 20px; overflow: hidden; }
.work-main-img img { width: 100%; display: block; }

/* ★追加：作業写真3枚並べるデザイン */
.work-photo-gallery {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}
.work-photo-item { flex: 1; }
.work-photo-item img {
  width: 100%; height: 200px; object-fit: cover; border-radius: 15px; display: block;
}

.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.work-card { background: var(--light-gray); padding: 30px; border-radius: 20px; border: 1px solid #eee; overflow: hidden; }
.work-tag { background: var(--main-green); color: white; padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; }

/* 工賃の見せ方アップデート */
.wage-box { background: var(--soft-green); padding: 30px; border-radius: 20px; border-left: 8px solid var(--main-green); }
.wage-intro { margin-bottom: 20px; font-weight: bold; }
.wage-main { text-align: center; background: white; padding: 20px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.wage-label { display: block; font-size: 0.9rem; color: var(--main-green); font-weight: bold; }
.wage-price { font-size: 2.2rem; font-weight: bold; color: #e65100; }
.wage-sub-text { font-size: 0.85rem; color: #777; margin-top: 5px; }

.wage-list { list-style: none; padding: 0; margin: 20px 0; }
.wage-list li { margin-bottom: 10px; padding-left: 20px; position: relative; }
.wage-list li::before { content: "✔"; color: var(--main-green); position: absolute; left: 0; font-weight: bold; }

/* 一日の流れ */
.timeline { border-left: 2px solid var(--soft-green); margin-left: 10px; padding-left: 30px; }
.time-block { position: relative; margin-bottom: 25px; display: flex; flex-direction: column; justify-content: center; min-height: 40px; }
.time-block::before { content: ""; position: absolute; left: -41px; top: 10px; width: 20px; height: 20px; background: white; border: 4px solid var(--main-green); border-radius: 50%; z-index: 1; }
.time { font-weight: bold; color: var(--main-green); font-size: 1.1rem; }
.time-block.break-time { background: #fff8e1; padding: 5px 15px; border-radius: 10px; border: 1px dashed #ffd54f; }
.time-block.break-time .time, .time-block.break-time .event { color: #e65100 !important; }

/* 利用までの流れ（PC横並び設定） */
.step-container { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.step-item { flex: 1; background: var(--light-gray); padding: 25px 15px; border-radius: 20px; text-align: center; border: 1px solid #eee; }
.step-number { color: var(--main-green); font-weight: bold; font-size: 1.2rem; }
.step-arrow { font-size: 1.5rem; color: var(--main-green); font-weight: bold; }

/* お食事と送迎（PC横並び設定） */
.lunch-container { display: flex; gap: 40px; align-items: flex-start; }
.lunch-img, .lunch-text { flex: 1; }
.lunch-img img { width: 100%; border-radius: 20px; }
.lunch-price { font-size: 1.8rem; font-weight: bold; color: #f57f17; }

/* よくある質問（Q&A）のデザイン */
.faq-container { display: flex; flex-direction: column; gap: 20px; }
.faq-item { background: white; border-radius: 15px; padding: 20px; border: 1px solid #eee; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.faq-question { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.faq-icon { background: var(--main-green); color: white; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; flex-shrink: 0; }
.faq-question h3 { margin: 0; font-size: 1.1rem; color: var(--text-color); }
.faq-answer { padding-left: 47px; border-top: 1px dashed #eee; padding-top: 10px; font-size: 0.95rem; line-height: 1.6; }

/* 表の基本スタイル */
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
table th, table td { padding: 15px; border-bottom: 1px solid #eee; }
table th { text-align: left; background: var(--soft-green); width: 30%; }

/* お問い合わせボタン */
.contact-buttons { display: flex; gap: 20px; justify-content: center; }
.btn { flex: 1; max-width: 300px; padding: 20px; text-decoration: none; border-radius: 50px; font-weight: bold; text-align: center; color: white !important; }
.btn-tel { background: var(--accent-yellow); color: #5d4037 !important; }
.btn-mail { background: var(--main-green); }

/* --- スマホ最適化（基本） --- */
@media (max-width: 768px) {
  .sp-only { display: block; } 
  header { padding: 40px 10px; }
  .header-container { flex-direction: column; text-align: center; gap: 20px; }
  .outline-text { font-size: 1.8rem; line-height: 1.3; }
  .site-logo { max-width: 180px; }
  nav ul { flex-wrap: wrap; }
  nav ul li:not(:last-child)::after { display: none; }
  nav ul li a { padding: 12px 8px; font-size: 0.8rem; }
  #about table th, #about table td { display: block; width: 100%; }
  #about table th { border-bottom: none; padding-bottom: 5px; }
  .comparison-table th, .comparison-table td { font-size: 0.75rem; padding: 10px 5px; word-break: break-all; }
  .comparison-table th { width: 25%; }
  .step-container, .lunch-container, .contact-buttons { flex-direction: column; }
  .step-arrow { transform: rotate(90deg); margin: 10px 0; }
  section { padding: 40px 20px; }
  .btn { max-width: 100%; }
  /* 作業写真3枚をスマホで縦並びに */
  .work-photo-gallery { flex-direction: column; }
  .work-photo-item img { height: 180px; }
  /* FAQスマホ調整 */
  .faq-answer { padding-left: 0; }
  .wage-price { font-size: 1.8rem; }
}

footer { text-align: center; padding: 40px; background: white; color: #888; }

/* --- 追加：設備魅力ボタンのデザイン --- */
.btn-points {
  background: var(--accent-yellow);
  color: #5d4037 !important;
  display: block;
  margin: 0 auto;
  max-width: 500px;
  transition: 0.3s;
}
.btn-points:hover {
  background: var(--main-green);
  color: white !important;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- 再追加：キャッチコピー（個性を大切に）を目立たせる --- */
.title-area p {
  font-size: 1.25rem; font-weight: bold; color: #555; margin-top: 8px; letter-spacing: 0.05em;
}

/* --- points.html 専用デザイン --- */
.points-page main { max-width: 1100px; }
.points-page .section-title {
  text-align: center; font-size: 2.2rem; color: var(--main-green); margin-bottom: 50px; display: block; position: relative;
}
.points-page .section-title::after {
  content: ""; position: absolute; bottom: -15px; left: 20%; width: 60%; height: 4px; background: var(--accent-yellow); border-radius: 2px;
}
.points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-bottom: 60px; }
.points-card {
  background: white; border-radius: 25px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: transform 0.3s ease; display: flex; flex-direction: column;
}
.points-card:hover { transform: translateY(-10px); }

/* --- 修正：写真を切らずに全体表示するための調整 --- */
.points-img, .work-card-img {
  background: #ffffff; /* 隙間を白で埋める */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 240px; /* PCでの枠の高さを固定 */
}

.points-card .points-img img, 
.work-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ★写真を切らずに全体を収める魔法の言葉 */
  display: block;
  transition: transform 0.3s ease;
}

.points-content { padding: 25px; flex-grow: 1; }
.points-content h3 { color: var(--main-green); margin-top: 0; margin-bottom: 15px; font-size: 1.4rem; display: flex; align-items: center; gap: 8px; }
.attraction-item { border: 2px solid var(--soft-green); }

/* --- スマートフォン最終調整（仕上げ） --- */
@media (max-width: 768px) {
  .title-area p { font-size: 1.05rem; }
  .points-page .section-title { font-size: 1.6rem; }
  .points-grid { grid-template-columns: 1fr; }
  
  /* スマホでの枠の高さ調整 */
  .points-img, .work-card-img {
    height: 200px;
  }
  
  h2 { font-size: 1.5rem; margin-bottom: 30px; }
  table th, table td { padding: 12px 10px; font-size: 0.9rem; }
  .btn { padding: 18px; font-size: 1.1rem; }
  section { padding: 35px 15px; border-radius: 20px; }
}

/* --- ナビゲーション最終調整：パソコンは中央・スマホは右寄せ --- */

/* 1. パソコンとスマホ共通の基本設定 */
.nav-list {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-list li {
    margin: 5px; 
}

/* 2. スマホ表示（画面幅768px以下）の時の切り替え */
@media (max-width: 768px) {
    /* 親要素のnavを横いっぱいに広げて、中身を右寄せにする */
    nav {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center;
        min-height: 65px;
        width: 100% !important;
        background: rgba(255,255,255,0.98);
    }

    /* 三本線ボタンを右端に配置し、MENU文字を追加 */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        margin-right: 20px; /* 右端の余白 */
        margin-left: 0;
        padding: 5px;
    }

    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: var(--main-green);
        margin: 3px 0;
        transition: 0.4s;
    }

    .menu-toggle::after {
        content: "MENU";
        font-size: 10px;
        color: var(--main-green);
        font-weight: bold;
        margin-top: 2px;
    }

    /* 開いた時のメニュー（縦に並べて画面いっぱいに） */
    .nav-list {
        display: none; 
        flex-direction: column;
        position: absolute;
        top: 65px;
        left: 0;
        width: 100%;
        background: white;
        border-top: 1px solid #eee;
        z-index: 1000;
    }

    .nav-list.active {
        display: flex;
    }

    .nav-list li {
        width: 100%;
        margin: 0;
    }

    .nav-list li a {
        padding: 15px;
        border-bottom: 1px solid #f5f5f5;
        font-size: 1rem !important;
        display: block;
        text-align: center;
    }

    /* 三本線を「×」に変えるアニメーション */
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}