/* =========================
   リセット
========================= */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

  color: #263238;

  background:
    #f7f8f5;
}


img {
  max-width: 100%;
  display: block;
}


a {
  text-decoration: none;
  color: inherit;
}



/* =========================
   共通
========================= */

.container {
  width: min(1180px, 92%);
  margin: 0 auto;
}


.section-title {
  text-align: center;

  font-size: 32px;

  margin: 0 auto 40px;

  color: #174f37;
}


.section-title span {
  color: #174f37;
}


.section-title.big {
  font-size: 42px;
}


.number-highlight {
  color: #f4bd27 !important;

  font-size: 58px;

  margin: 0 0 0 5px;

  text-shadow:
    2px 2px 0 #174f37;
}

.header-row {
  display: flex;
}

  .logo {
  padding: 0.6em 1.2em;
  color: #ffffff;
  background: #247a4f;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.1em;
  line-height: 1.4em;
}

.header-row img{
  max-width: 140px;
  margin: 0 10px 0 0;
  align-self: center;
}

.only-pc {
  display: none;
}

.section-title .title-icon {
  display: inline-block;   /* ← 共通の img { display: block; } を打ち消す（必須） */
  height: 1em;             /* 文字サイズ＝「動」と同じ高さ */
  width: auto;
  vertical-align: -0.13em; /* 「動」の中心と高さを合わせる */
  margin: 0 0.3em 0 0;     /* 文字との間隔 */
}



/* 動画セクションの締め（チラシへの受け渡し） */
.flow-next {
  max-width: 780px;
  margin: 45px auto 0;
  text-align: center;
}
.flow-next-text {
  font-size: 15px;
  line-height: 2;
  color: #45544b;
  margin: 0 0 18px;
}
.flow-next-arrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: #174f37;
  background: #eaf3ec;       /* 既存の緑系に合わせる */
  border: 2px solid #cfe3d6;
  border-radius: 50px;
  padding: 12px 28px;
  margin: 0;
}


/* =========================
   ヘッダー
========================= */

/* =========================
   ヘッダー
========================= */

.header {
  background: #ffffff;

  border-bottom: 1px solid #d9e2dd;

  position: sticky;

  top: 0;

  z-index: 1000;
}


.header-inner {
  width: min(1280px, 92%);

  margin: 0 auto;

  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  position: relative;
}


/* PCではハンバーガーを非表示 */

.hamburger {
  display: none;

  border: none;

  background: transparent;

  cursor: pointer;

  width: 48px;

  height: 48px;

  padding: 10px;

  flex-direction: column;

  justify-content: center;

  gap: 6px;
}


/* ハンバーガーの線 */

.hamburger span {
  display: block;

  width: 100%;

  height: 2px;

  background: #174f37;

  transition: 0.3s;
}


/* PCメニュー */

.nav {
  display: flex;

  gap: 30px;

  font-size: 14px;

  font-weight: 700;
}


.nav a {
  position: relative;

  padding: 26px 0;
}


.nav a:hover {
  color: #1d7a50;
}


.nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 3px;

  background: #1d7a50;

  transition: 0.3s;
}


.nav a:hover::after {
  width: 100%;
}



.logo-icon {
  font-size: 26px;

  margin-right: 8px;
}







/* =========================
   メインビジュアル
========================= */

.hero {
  padding:
    50px 0 50px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f4f8f2
    );
}


.hero-container {
  display: grid;

  grid-template-columns:
    1.1fr 0.9fr;

  align-items: center;

  gap: 40px;
}


.label {
  display: inline-block;

  padding:
    10px 18px;

  background: #1d7048;

  color: white;

  border-radius: 8px;

  font-weight: 700;

  font-size: 15px;

  margin-bottom: 22px;
}


.hero h1 {
  font-size: clamp(
    15px,
    3vw,
    40px
  );

  line-height: 1.25;

  margin:
    0 0 10px;

  color: #202d31;
}


.hero h2 {
  font-size: clamp(
    28px,
    4vw,
    44px
  );

  margin:
    60px 0 30px;
  border-bottom: 4px solid #1d7a50;
  max-width: 430px;
}


.hero h2 span {
  color: #1d7a50;
}


.hero p {
  font-size: 17px;

  line-height: 2;

  margin-bottom: 12px;
}


.hero-image {
  border-radius: 30px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #edf5e9,
      #cfe8d8
    );

  padding: 10px;
}



/* =========================
   現状
========================= */

.current-status {
  margin-top: 40px;

  padding: 25px;

  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      #f3f8f0,
      #e5f0e5
    );

  border:
    1px solid #d4e4d6;
}


.current-status h3 {
  margin-top: 0;

  color: #1c6b46;

  font-size: 20px;
}


.status-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  background: white;

  border-radius: 15px;

  overflow: hidden;
}


.status-item {
  display: flex;

  align-items: center;

  gap: 20px;

  padding: 22px;

  border-right:
    1px solid #dce4df;
}


.status-item:last-child {
  border-right: none;
}


.status-icon {
  max-width: 35px;
}


.status-item p {
  margin: 0;

  font-size: 15px;

  line-height: 1.7;
}



/* =========================
   動画
========================= */

.movie-section {
  background: #f8faf7;
  margin: 80px 0 0;
}


.movie-section .container {
  background: #f8faf7;
}

.movie-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;
}


.movie-card {
  background: white;

  border:
    2px solid #3f6d98;

  border-radius: 18px;

  padding: 24px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.05);

  position: relative;
}


.movie-card.danger {
  border-color: #d84a4a;
}

.movie-card.recycle-card {
  border-color: #4e876b;
}


.movie-card.disposal {
  border-color: #3f6d98;
}

.flex-title{
  display: flex;
}


.movie-number {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;
  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #3f6d98;

  color: white;

  font-weight: 700;

  margin: 0 0 15px 0;
}


.danger .movie-number {
  background: #d84a4a;
}


.recycle-card .movie-number {
  background: #3f8b61;
}


.movie-card h3 {
  font-size: 21px;

  margin:
    0 0 0 12px;
}


.movie-card p {
  font-size: 14px;

  line-height: 1.7;

  min-height: 48px;
}


.video-wrapper {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 10px;

  background: #222;
}


.video-wrapper iframe {
  width: 100%;
  height: 100%;

  border: none;
}



/* =========================
   正しい出し方
========================= */

.howto-section {
  padding:
    90px 0;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f5f8f3
    );
}


.step-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;

  position: relative;
}


.step-card {
  background: white;

  border:
    2px solid #d6e1d9;

  border-radius: 20px;

  padding: 30px;

  min-height: 500px;

  display: flex;

  flex-direction: column;
}


.step-title {
  display: flex;

  align-items: center;

  gap: 15px;
}


.step-number {
  width: 58px;
  height: 58px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  background: #3f6d98;

  color: white;

  font-size: 28px;

  font-weight: 700;
}


.step-card h3 {
  font-size: 24px;

  color: #3f6d98;
}


.step-image {
  height: 160px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 15px 0 20px;
}


.step-image img {
  max-height: 160px;

  object-fit: contain;
}

.step-card p {
  font-size: 15px;

  line-height: 1.8;
}


.warning-box {
  margin-top: 35px;

  background:
    linear-gradient(
      90deg,
      #fff8e5,
      #fffdf5
    );

  border:
    2px solid #e5bd59;

  border-radius: 18px;

  padding:20px 6vw;
  display: flex;

  align-items: center;

  gap: 20px;
}


.warning-icon {
  font-size: 55px;

  color: #e4a921;
  margin-right:20px;
}


.warning-box h3 {
  margin: 0 0 8px;

  color: #303030;

  font-size: 22px;
}


.warning-box p {
  margin: 0;

  line-height: 1.8;
}


.warning-box img {
  width: 170px;

  margin-left: auto;
}



/* =========================
   アンケート（ボタン）
========================= */

.survey-cta-section {
  padding:
    90px 0;

  background:
    linear-gradient(
      180deg,
      #eef5ee,
      #ffffff
    );
}


.survey-cta-box {
  max-width: 640px;

  margin: 0 auto;

  padding: 50px 40px;

  text-align: center;

  background: white;

  border:
    2px solid #d6e1d9;

  border-radius: 24px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.05);
}


.survey-cta-icon img {
  max-width: 36px;
  text-align: center;
  margin: 0 auto;
}


.survey-cta-box h2 {
  color: #1c6844;

  font-size: 30px;

  margin:
    10px 0 15px;
}


.survey-cta-box p {
  line-height: 1.8;

  margin: 0 0 30px;
}


.survey-cta-button {
  display: inline-block;

  background:
    linear-gradient(
      90deg,
      #1d7048,
      #2d915d
    );

  color: white;

  font-size: 18px;

  font-weight: 700;

  padding:
    16px 60px;

  border-radius: 50px;

  box-shadow:
    0 8px 20px
    rgba(29, 112, 72, 0.3);

  transition: 0.3s;
}


.survey-cta-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 12px 24px
    rgba(29, 112, 72, 0.4);
}


/* =========================
   チャットボット（画面右下固定）
========================= */

.chatbot-button {
  position: fixed;

  right: 24px;

  bottom: 24px;

  z-index: 1200;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    12px 20px 12px 12px;

  border: none;

  border-radius: 50px;

  background:
    linear-gradient(
      90deg,
      #1d7048,
      #2d915d
    );

  color: white;

  font-family: inherit;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 8px 24px
    rgba(23, 79, 55, 0.35);

  transition: 0.3s;
}


.chatbot-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 28px
    rgba(23, 79, 55, 0.45);
}


.chatbot-icon {
  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: #ffffff;

  color: #1d7048;

  animation: chatbot-pulse 2.2s infinite;
}


.chatbot-icon svg {
  width: 25px;

  height: 25px;
}


.chatbot-label {
  line-height: 1.4;
  text-align: left;
}



/* TOPへ戻るボタン(画面右下固定) */
button.page-top {
  position: fixed;

  left: 24px;

  bottom: 24px;

  z-index: 1200;

  width: 60px;
  height: 60px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  border: 2px solid #ffffff;
  border-radius: 50%;

  background: #006e9f;
  color: #ffffff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 110, 159, 0.35);

  /* スクロールするまで隠す(JSの is-active で表示) */
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}


button.page-top.is-active {
  opacity: 1;
  visibility: visible;
}


button.page-top:hover {
  transform: translateY(-3px);
}


/* 上向き矢印(空のspanを矢印の形にする) */
button.page-top span {
  width: 10px;
  height: 10px;

  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;

  transform: rotate(-45deg);
}

@keyframes chatbot-pulse {
  0% {
    box-shadow:
      0 0 0 0
      rgba(255, 255, 255, 0.6);
  }

  100% {
    box-shadow:
      0 0 0 10px
      rgba(255, 255, 255, 0);
  }
}

/* =========================
   フッター
========================= */

.footer {
  background: #16442f;

  color: white;

  text-align: center;

  padding: 35px 0 25px;
}


.footer p {
  margin: 5px 0;
}


.copyright {
  font-size: 12px;

  opacity: 0.7;
}

  .br-sp {
    display: none;
  }





/* =========================
   レスポンシブ
========================= */

/* =========================
   タブレット〜PC中間サイズ
   （画面幅1300px以下でハンバーガーメニューに切替）
========================= */

@media (max-width: 1300px) {

  /* ハンバーガーを表示 */

  .hamburger {
    display: flex;

    flex-shrink: 0;
  }


  /* メニューは最初は非表示（ハンバーガーの下にドロップダウン） */

  .nav {
    display: none;

    position: absolute;

    top: 100%;

    right: 0;

    width: 90%;

    background: #ffffff;

    flex-direction: column;

    gap: 0;

    border-top: 1px solid #d9e2dd;

    box-shadow:
      0 10px 20px
      rgba(0, 0, 0, 0.08);
  }


  /* JSでis-openが付いたら表示 */

  .nav.is-open {
    display: flex;
  }


  .nav a {
    padding: 30px 20px;

    border-bottom: 1px solid #e4e9e5;

    font-size: 16px;
  }


  .nav a:last-child {
    border-bottom: none;
  }


  /* PC用の下線は不要 */

  .nav a::after {
    display: none;
  }


  /* ハンバーガーを×に変える */

  .hamburger.is-open span:nth-child(1) {
    transform:
      translateY(8px)
      rotate(45deg);
  }


  .hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }


  .hamburger.is-open span:nth-child(3) {
    transform:
      translateY(-8px)
      rotate(-45deg);
  }

}

@media (max-width: 768px) {

  .br-sp {
    display: block;
  }

 .header {
    position: sticky;

    top: 0;

    width: 100%;

    z-index: 1000;
  }


  .header-inner {
    width: 100%;

    min-height: 64px;

    padding: 0 20px;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
  }


  /* サイト名を左寄せ */

  .logo {
    font-size: 11px;

    white-space: normal;

    line-height: 1.4;

    flex: 1;

    padding: 0.5em 1em;
  }


  .logo-icon {
    font-size: 20px;

    margin-right: 4px;
  }



  .header-row img{
  max-width: 110px;
}


  /* =========================
     以下、既存のスマホCSS
  ========================= */

  .br-sp {
    display: block;
  }

/*
  .hero-container {
    grid-template-columns: 1fr;
  }
*/

  .hero-image {
    order: -1;
  }


  .status-grid {
    grid-template-columns: 1fr;
  }


  .status-item {
    border-right: none;

    border-bottom:
      1px solid #dce4df;
  }


  .status-item:last-child {
    border-bottom: none;
  }


  .movie-grid {
    grid-template-columns: 1fr;
  }


  .step-grid {
    grid-template-columns: 1fr;
  }


  .step-card {
    min-height: auto;
  }


  .warning-box {
    flex-wrap: wrap;
  }


  .warning-box img {
    margin: 0 auto;
  }


  .hero-container {
    grid-template-columns: 1fr;
  }


  .hero-image {
    order: -1;
  }


  .status-grid {
    grid-template-columns: 1fr;
  }


  .status-item {
    border-right: none;

    border-bottom:
      1px solid #dce4df;
  }


  .status-item:last-child {
    border-bottom: none;
  }


  .movie-grid {
    grid-template-columns: 1fr;
  }


  .step-grid {
    grid-template-columns: 1fr;
  }


  .step-card {
    min-height: auto;
  }


  .warning-box {
    flex-wrap: wrap;
    padding: 20px 15px;
  }


  .warning-box img {
    margin: 0 auto;
  }

  button.page-top {
  left: 12px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  font-size: 11px;
}

}




@media (max-width: 600px) {


  .hero {
    padding-top: 40px;
  }


  .hero h1 {
    font-size: 30px;
  }

  .hero h2 {
  margin:60px 0 30px;
  border-bottom: 4px solid #1d7a50;
  max-width: 280px;
}


  .section-title.big {
    font-size: 32px;
  }


  .number-highlight {
    font-size: 45px;
  }


  .label {
    font-size: 12px;
  }


  .hero p {
    font-size: 15px;
  }


  .warning-box h3 {
    font-size: 18px;
  }


  .survey-cta-button {
    width: 100%;

    padding: 16px 20px;
  }


  .survey-cta-box {
    padding: 35px 22px;
  }


  .chatbot-icon {
    width: 32px;

    height: 32px;
  }


  .chatbot-icon svg {
    width: 20px;

    height: 20px;
  }

  button.page-top {
  bottom: 24px;
}


}


/* =========================
   メインビジュアル装飾
========================= */

/* 見出しに緑のマーカー風下線 */

.hero h1 {
  display: inline-block;
}

.hero-title-deco {
  background: linear-gradient(
    transparent 65%,
    #bfe3cd 65%
  );

  padding: 0 4px;
}


/* 導入文をカード風に装飾 */

.hero-lead {
  position: relative;

  margin-top: 25px;

  padding: 30px 35px;

  background: #ffffff;

  border: 2px solid #cfe4d6;

  border-left: 8px solid #247a4f;

  border-radius: 16px;

  box-shadow:
    0 8px 24px
    rgba(23, 79, 55, 0.08);
}


.hero-lead p {
  margin: 0;

  color: #2c3a36;
}


/* =========================
   電池を捨てる時のおねがい
   （3つのポイントの下）
========================= */

.disposal-notes {
  margin-top: 70px;

  display: flex;

  flex-direction: column;

  gap: 40px;
}


.notes-title {
  margin: 0 0 15px;

  text-align: center;

  color: #174f37;

  font-size: 24px;
}


.notes-lead {
  margin: 0 0 20px;

  text-align: center;

  color: #d84a4a;

  font-weight: 700;

  font-size: 17px;
}


/* --- OK / NG --- */

.okng-grid {
  display: grid;

  grid-template-columns:
    1.2fr 0.8fr;

  gap: 20px;
}


.ok-box,
.ng-box {
  border-radius: 14px;

  padding: 20px 25px;
}


.ok-box {
  background: #eef7f0;

  border: 2px solid #7cc39a;
}


.ng-box {
  background: #fdeeee;

  border: 2px solid #e39a9a;
}


.okng-label {
  display: inline-block;

  font-weight: 700;

  font-size: 18px;

  margin-bottom: 12px;

  padding: 4px 14px;

  border-radius: 50px;
}


.okng-label.ok {
  background: #247a4f;

  color: white;
}


.okng-label.ng {
  background: #d84a4a;

  color: white;
}


.ok-box ul,
.ng-box ul {
  margin: 0;

  padding-left: 20px;
}


.ok-box li,
.ng-box li {
  font-size: 15px;

  line-height: 1.8;

  margin-bottom: 6px;
}


.note-small {
  display: block;

  font-size: 13px;

  color: #1c6b46;
}


/* --- 電池本体・モバイルバッテリー以外 --- */

.other-methods {
  padding: 30px 25px;

  background: #ffffff;

  border: 2px solid #d6e1d9;

  border-radius: 18px;
}


.method-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 20px;

  margin-top: 20px;
}


.method-card {
  border-radius: 14px;

  padding: 22px 25px;
}


.method-card.small-appliance {
  background: #eef7f0;

  border: 2px solid #2e7d4f;
}


.method-card.rechargeable {
  background: #fdeeee;

  border: 2px solid #c94f4f;
}


.method-card h4 {
  margin: 0 0 12px;

  text-align: center;

  font-size: 20px;
}


.small-appliance h4 {
  color: #1c6b46;
}


.rechargeable h4 {
  color: #b04040;
}


.method-size {
  text-align: center;

  font-weight: 700;

  font-size: 15px;

  margin: 0 0 12px;
}


.method-card ul {
  margin: 0 0 14px;

  padding-left: 22px;
}


.method-card li {
  font-size: 15px;

  line-height: 1.8;
}


.method-note {
  text-align: center;

  font-size: 15px;

  margin: 0;

  padding: 10px;

  background: rgba(255, 255, 255, 0.7);

  border-radius: 8px;
}


/* --- 電子タバコ・加熱式たばこ --- */

.ecig-warning {
  display: flex;

  align-items: center;

  gap: 20px;

  padding: 22px 30px;

  background: #fff8e5;

  border: 2px dashed #e5bd59;

  border-radius: 14px;
}


.ecig-icon {
  font-size: 40px;

  flex-shrink: 0;
}


.ecig-text h3 {
  margin: 0 0 6px;

  font-size: 19px;

  color: #6b4c00;
}


.ecig-text p {
  margin: 0;

  font-size: 15px;

  line-height: 1.8;
}


/* --- スマホ対応（追加セクション） --- */

@media (max-width: 768px) {

  .okng-grid,
  .method-grid {
    grid-template-columns: 1fr;
  }


  .ok-box,
  .ng-box,
  .method-card {
    padding: 18px;
  }


  .hero-lead {
    padding: 20px;
  }


  .ecig-warning {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    padding: 18px;
  }


  .notes-title {
    font-size: 20px;
  }

}

/* =========================
   チラシギャラリー
========================= */

.flyer-section {
  padding:
    30px 0 60px;

  background:
    linear-gradient(
      180deg,
      #f8faf7,
      #ffffff
    );
}


.flyer-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 30px;
}


.flyer-item {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 15px;
}


.flyer-label {
  display: inline-block;

  color: white;

  font-weight: 700;

  font-size: 16px;

  padding: 8px 36px;

  border-radius: 50px;
}


.flyer-label.danger {
  background: #d84a4a;
}


.flyer-label.howto {
  background: #3f6d98;
}


.flyer-label.recycle {
  background: #3f8b61;
}


.flyer-thumb {
  width: 100%;

  padding: 0;

  border: 2px solid #d6e1d9;

  background: white;

  border-radius: 12px;

  overflow: hidden;

  cursor: pointer;

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.06);

  transition: 0.3s;
}


.flyer-thumb:hover {
  transform: translateY(-4px);

  box-shadow:
    0 14px 30px
    rgba(0, 0, 0, 0.12);
}


.flyer-thumb img {
  width: 100%;

  display: block;
}


.flyer-hint {
  font-size: 13px;

  color: #5a6b60;
}


/* =========================
   チラシ拡大表示（ライトボックス）
========================= */

.lightbox {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  z-index: 2000;

  display: none;
}


.lightbox.is-open {
  display: block;
}


.lightbox-backdrop {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background:
    rgba(20, 30, 25, 0.85);
}


.lightbox-inner {
  position: relative;

  width: min(1100px, 94%);

  max-height: 90vh;

  margin: 4vh auto 0;

  background: #ffffff;

  border-radius: 16px;

  padding: 40px 30px 30px;

  overflow: auto;
}


.lightbox-title {
  margin: 0 0 20px;

  text-align: center;

  color: #174f37;

  font-size: 20px;
}


.lightbox-images {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 20px;
}


.lightbox-images img {
  width: 100%;

  height: auto;

  border: 1px solid #e0e6e2;

  border-radius: 8px;
}


.lightbox-close {
  position: absolute;

  top: 10px;

  right: 12px;

  width: 40px;

  height: 40px;

  border: none;

  border-radius: 50%;

  background: #174f37;

  color: white;

  font-size: 22px;

  line-height: 1;

  cursor: pointer;
}


/* --- スマホ対応 --- */

@media (max-width: 768px) {

  .flyer-grid {
    grid-template-columns: 1fr;

    max-width: 420px;

    margin: 0 auto;
  }


  .lightbox-images {
    grid-template-columns: 1fr;
  }


  .lightbox-inner {
    padding: 46px 14px 20px;

    margin-top: 2vh;
  }

}


/* =========================
   アンケート追従バナー
   （右下固定・チャットボットの上）
========================= */

.survey-banner {
  position: fixed;

  right: 24px;

  bottom: 100px;

  z-index: 1200;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    12px 46px 12px 12px;

  border: 2px solid #ffffff;

  border-radius: 50px;

  background:
    linear-gradient(
      90deg,
      #fd4f0a,
      #f46127
    );

  color: #ffffff;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 8px 24px
    rgba(228, 169, 33, 0.4);

  transition: 0.3s;
}


.survey-banner:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 28px
    rgba(228, 169, 33, 0.5);
}

.survey-banner-icon img {
  width: 20px;
}

.survey-banner-icon {
  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: #ffffff;

  font-size: 22px;
}


.survey-banner-label {
  line-height: 1.4;
}


/* =========================
   フッター（実施主体表記）
========================= */




.footer-inner {
  width: min(1180px, 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 30px 45px;
}


.footer-company {
  flex-shrink: 0;
}


/* 白地の会社ロゴボックス */

.footer-logo-box {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  width: 160px;

  padding: 5px 5px 8px 6px;

  background: #ffffff;

  border-radius: 3px;
}


.footer-logo-name {
  color: #1a3a8f;

  font-size: 14px;

  font-weight: 700;
}


.footer-logo-tel {
  color: #263238;

  font-size: 12px;

  font-weight: 700;
}


/* 名古屋市ブロック */

.footer-city-badge {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  max-width: 130px;

  border-radius: 8px;
}


.footer-city-name {
  color: #263238;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 0.1em;
}


.footer-city-sub {
  color: #263238;

  font-size: 9px;
}


/* 説明文 */

.footer-desc {
  margin: 0;

  font-size: 14px;

  line-height: 1.9;

  text-align: left;
}


.footer .copyright {
  margin-top: 25px;
}

@media (max-width: 1300px) {

  .footer {
    padding: 35px 0 130px;
  }

}


/* --- スマホ対応 --- */

@media (max-width: 768px) {

  .footer {
    padding: 35px 0 140px;
  }

  .footer-inner {

    gap: 25px;

    text-align: center;
  }


  .footer-desc {
    text-align: center;

    font-size: 12px;
  }

  .survey-banner {
    right: 12px;

    bottom: 84px;

    padding: 10px 36px 10px 10px;

    font-size: 12px;
  }

  .survey-banner-icon img{
    width: 20px;
  }

  .survey-banner-icon {
    width: 40px;

    height: 40px;

    font-size: 18px;
  }

    .chatbot-button {
    right: 12px;

    bottom: 12px;

    padding: 10px 14px 10px 10px;

    font-size: 12px;
  }

  .footer-city-badge {
    display: flex;
    max-width: 120px;
  }

  .footer-logo-box {
  padding: 5px 5px 10px 5px;
  width: 130px;
}

}

@media (max-width: 600px) {

    .survey-banner-icon {
    width: 32px;

    height: 32px;
  }

  .survey-banner-icon img {
    width: 15px;
  }

.survey-banner {
  position: fixed;

  bottom: 75px;
  }


}



/* =========================
   全画面ズーム表示
========================= */

/* ライトボックス内の画像はタップ可能に見せる */

.lightbox-images img {
  cursor: zoom-in;
}


.lightbox-hint {
  margin: 15px 0 0;

  text-align: center;

  font-size: 13px;

  color: #5a6b60;
}


/* 全画面ズーム本体 */

.lightbox-zoom {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  z-index: 2100;

  background: rgba(15, 22, 18, 0.96);

  display: none;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 20px;
}


.lightbox-zoom.is-open {
  display: flex;
}


.lightbox-zoom img {
  max-width: 100%;

  max-height: calc(100vh - 120px);

  height: auto;

  object-fit: contain;

  cursor: zoom-out;

  border-radius: 6px;
}


/* 閉じるボタン（右上） */

.lightbox-zoom-close {
  position: absolute;

  top: 14px;

  right: 14px;

  width: 44px;

  height: 44px;

  border: none;

  border-radius: 50%;

  background: #ffffff;

  color: #174f37;

  font-size: 24px;

  line-height: 1;

  cursor: pointer;
}


/* 1枚目 / 2枚目 切替ボタン（下部） */

.lightbox-zoom-nav {
  display: flex;

  gap: 16px;

  margin-top: 18px;
}


.lightbox-zoom-btn {
  padding: 12px 30px;

  border: none;

  border-radius: 50px;

  background: #ffffff;

  color: #174f37;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;
}


/* --- スマホ対応 --- */

@media (max-width: 768px) {

  .lightbox-zoom {
    padding: 12px;
  }


  .lightbox-zoom img {
    max-height: calc(100vh - 150px);
  }


  .lightbox-zoom-btn {
    padding: 14px 34px;

    font-size: 16px;
  }

}


/* ページ内リンクのスクロール位置調整 */
#movie,
#flyer,
#top,
#survey {
  scroll-margin-top: 100px;
}



/* ▼ ナビの「アンケートに回答する」を目立たせる（細枠ボタン） ▼ */
.nav a:last-child {
  align-self: center;      /* flexのstretchで背景が縦に伸びるのを防ぐ */
  padding: 8px 16px;       /* 他項目の26pxを上書きしてボタンらしく */
  margin-left: 8px;
  background: #fff8e5;
  border: 2px solid #e5bd59;
  border-radius: 999px;
  color: #8f5a00;
}

.nav a:last-child::after {  /* PC用の下線バーは不要 */
  display: none;
}

.nav a:last-child:hover {   /* ホバーでわずかに濃く */
  color: #6e4600;
  background: #f7ecd2;
}

@media (max-width: 1300px) {
  .nav a:last-child {
    align-self: center;        /* 縦列内で左右中央（stretch解除） */
    width: fit-content;
    margin: 14px auto 18px;
    padding: 12px 30px;        /* PCの8px 16pxから拡大して押しやすく */
    text-align: center;
    border: 2px solid #e5bd59; /* 通常行の区切り線(border-bottom)を上書き */
    border-radius: 999px;
    background: #fff8e5;
    color: #8f5a00;
  }

    .nav a:last-child::after {
    display: none;
  }

}


/* =========================
   フッター：サイト正式名称
========================= */

.footer-official-name {
  width: min(1180px, 92%);
  margin: 30px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  text-align: left;
}

.footer-official-label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

.footer-official-name p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  font-weight: 600;
  color: #ffffff;
}

.footer .copyright {
  width: min(1180px, 92%);
  margin: 18px auto 0;
  text-align: left;
}

/* スマートフォン */
@media (max-width: 768px) {
  .footer-official-name {
    margin-top: 25px;
    padding-top: 15px;
  }

  .footer-official-name p {
    font-size: 12px;
  }

  .footer .copyright {
    font-size: 11px;
  }
}

/* =========================
   フッター：PCレイアウト調整
========================= */

@media (min-width: 769px) {
    .footer-inner {
    box-sizing: border-box;
    justify-content: flex-start;
    padding-right: 300px;
    gap: 25px 30px;
  }

  .footer-desc {
    max-width: 100%;
  }

  .footer-inner{
  margin: 0 90px;

  }
}


@media (min-width: 769px) {
  .footer-official-name {
    width: auto;
    margin: 30px 90px 0;   /* 左右に同じ90px → 区切り線が中央に来る */
  }

  .footer .copyright {
    width: auto;
    margin: 18px 90px 0;
  }
}