@charset "utf-8";

#top #header_nav_index a {
  background-position: 0 -60px;
    pointer-events: none;
}


#top {
  margin-bottom: 10px;
}

/*ファースト・ビューの画像実装*/
.slider-container {
  position: relative;
  width: 100%;
  /*height: 1080px;*/
  /* 画面の高さ(100vh) から ヘッダーの高さ(159px) を引き算する */
  /*height:100vh;*/
  height: 80vh;
  overflow: hidden;
}

/*５枚画像すべてに共通する設定*/
.slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*横幅いっぱいに広げるために cover にする*/
  background-size: cover;
  /* 🛠️ 追加：画像が縦横にリピートして並ばないようにする */
  background-position: center;
  /*最初は全部に透明にしておく*/
  opacity: 0;
  animation: fadeLoop 20s infinite ease-in-out;
}

/*表示のタイミングを「4秒ずつ」正確にずらします */
/* ここが重要です。前の画像が消えかかるときに、次の画像が現れるようにします */
.slider-img:nth-child(1) {
  animation-delay: 0s;
}

.slider-img:nth-child(2) {
  animation-delay: 4s;
}

.slider-img:nth-child(3) {
  animation-delay: 8s;
}

.slider-img:nth-child(4) {
  animation-delay: 12s;
}

.slider-img:nth-child(5) {
  animation-delay: 16s;
}

/*【超滑らか移行】時間配分（合計20秒の割り振り）*/
/* 前後の画像が重なる時間を長くし、カクカク感を消しました */
@keyframes fadeLoop {
  0% {
    opacity: 0;
  }

  /* 枚目：じっくり時間をかけて「ほわ〜ん」と現れる（約2秒） */
  10% {
    /* 20秒の10%＝2秒地点 */
    opacity: 1;
  }

  /* 1枚目：表示を維持する（約2秒） */
  20% {
    /* 20秒の20%＝4秒地点（2枚目のdelayが始まる） */
    opacity: 1;
  }

  /*  1枚目：次の画像（2枚目）が現れながら、自分はじっくり消える */
  /* ここで「2秒間」重なり続けます */
  30% {
    /* 20秒の30%＝6秒地点 */
    opacity: 0;
  }

  100% {
    opacity: 0;
    /* 次の出番まで待機 */
  }
}

/* パンくずリストは、ここから */
#breadcrumb {
  /*ホームのブレッドクラム非表示*/
  display: none;
}

/*メインｰNEWS等は、ここから*/
.main {
  width: 1000px;
  margin: 0 auto;
}

#news {
  text-align: left;
}

.news-title {
  font-size: 60px;
  font-weight: bold;
  color: #457703;
}

#contents {
  margin-top: 30px;
}

.main ul {
  font-family: noto sans jp;
  list-style-type: none;
  margin-top: 15px;
  margin-bottom: 80px;
  padding-left: 0;
}

.main ul li:first-child {
  border-top: 1px dotted #666666;
}

.main ul li {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 0 1.5em 9.3em;
  padding-top: 1.5em;
  border-bottom: 1px dotted #666666;
  text-indent: -7.3em;
}

.main ul li time {
  margin-right: 5em;
}

/*newcリストのポップアップ実装*/
.calendar,
.calender1,
.customers,
.reserved {
  background-color: transparent;
  border: none;
  font-size: 16px;
  padding: 0;
  cursor: pointer;
}

.calendar time,
.calender1 time,
.customers time,
.reserved time {
  font-weight: bold;
}

.calendar:hover,
.calender1:hover,
.customers:hover,
.reserved:hover {
  color: green;
}

dialog {
  /*全称セレクターが掛かっているため、カレンダーを画面中央に設定*/
  margin: auto;
  height: 95vh;
  padding: 0;
  border: none;
  overflow: hidden;
  border-radius: 10px;
}

dialog img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

dialog button {
  position: absolute;
  top: 2%;
  right: 2%;
}

.batsu {
  width: 25px;
  height: 25px;
  background-color: #e1d737;
  border-radius: 3px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

/* ✕マークのデザイン（必要に応じて追加してください） */
.batsu::before,
.batsu::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  /* 線の太さ */
  height: 14px;
  /* 線の長さ */
  background-color: #000;
  /* 線の色 */
}

.batsu::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.batsu::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.batsu:hover {
  transform: scale(1.15);
  /* 1.15倍の大きさに拡大 */
}

/* ★アクティブ時：クリックした瞬間に色を変える */
.batsu:active {
  background-color: #c7bd22;
  /* クリックした瞬間の少し暗めの黄色（お好みの色に調整してください） */
  transform: scale(1.05);
  /* クリックした瞬間に少しだけ凹む演出（お好みで） */
}

::backdrop {
  background-color: rgba(69, 119, 3, 0.5);
  backdrop-filter: blur(5px);
}

/*記事の内容。写真はここから*/
#features {
  max-width: 1000px;
  /* 画面が広がりすぎないための最大幅 */
  margin: 80px auto;
  /* NEWSの箱との間にしっかり隙間をあける */
  padding: 0 20px;
  box-sizing: border-box;
}

.feature-item {
  display: flex;
  align-items: center;
  /* 文章と写真の上下真ん中を揃える */
  justify-content: space-between;
  margin-bottom: 120px;
  /* トピックごとの縦の隙間（ゆったり感を出す） */
  gap: 5%;
  /* 文章と写真の間の横の隙間 */

  /*kokokara otameis */
  background-color: #e8e6e5;
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 40px;
  box-sizing: border-box;
}

/* ★奇数番目（1つ目、3つ目）は「左文章・右写真」、
     偶数番目（2つ目）は「左写真・右文章」に自動で並び替える設定 */
.feature-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* 横幅の調整 */
.feature-text {
  width: 45%;
  box-sizing: border-box;
}

.feature-text h3 {
  font-size: 24px;
  /* 見出しの文字の大きさ */
  line-height: 1.6;
  margin-bottom: 20px;
  font-weight: bold;
  color: #111;
}

.feature-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}

.feature-image {
  flex-shrink: 0;
  width: 50%;
  /* 写真の横幅（お好みで48%などに広げてもOK） */
}

.feature-image img {
  width: 100%;
  /* 箱の横幅に画像をぴったり合わせる */
  height: auto;
  /*border-radius: 8px;*/
  /* 写真の角をほんのり丸くする */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 12);
  /* 写真の背景にうっすら上品な影をつける */
}

/* ==================================================
   スクロールで画像が「ほわーんと」出てくるアニメーション
================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    /* 最初は透明 */
    transform: translateY(50px);
    /* 最初はちょっと下に下げておく */
  }

  to {
    opacity: 1;
    /* スクロールしたらクッキリ見える */
    transform: translateY(0);
    /* 元の位置にスッと戻る */
  }
}

/* 写真（img）にスクロール連動のアニメーションを適用 */
.feature-image img {
  animation: fadeInUp linear both;
  animation-timeline: view();
  /* 画面（視界）に入ったら動かす設定 */
  animation-range: entry 10% cover 45%;
  /* 画面の下から少し見え始めたらスタートし、45%の位置で100%表示される */
}

/*第２段画像リンク飛ばすは、ここから*/
/* 全体のコンテナ設定 */
.container {
  width: 1000px;
  margin: 0 auto 70px;
  /* 画面中央に配置 */
  display: flex;
  justify-content: space-between;
  /* 3枚を均等に横並び */
  box-sizing: border-box;
  object-fit: cover;
  /* 画像が横長でも縦長でも、枠に合わせて綺麗にトリミ*/
}

/* カード全体のスタイル設定（リンクをブロック要素にする） */
.card {
  width: 310px;/* 310px × 3枚 = 930px */
  text-decoration: none;/* リンクの下線を消す */
  color: #333333;/* 文字色（黒系） */
  display: block;
  background-color: #ffffff;/* 必要に応じて背景色 */
  transition: all 0.3s ease;
  /* ホバー時の変化を滑らかに */
  border-radius: 16px;
  /*丸みを調整.数字が大きいほど丸くなります */
  /*overflow: hidden;*/
  /* 【超重要】はみ出た尖った写真を削る */
  /* 上記のコードにこれを1行追加 */
  position: relative;
}

.security-animatio{
  position: absolute;
}
.container{
align-items: flex-end;
}
.card{
  height: 405px;
}
.fire{
  margin-top: -30px;
}
.chosei{
transform: translate(0,-15px);
}


.security-animation img {
  animation: pulse-scale-giant 1.5s ease-in-out infinite;
  position: absolute;
  z-index: 999; /* カードの枠線や背景よりも「絶対に手前」に表示させる設定 */
  transform-origin: center;
}

/* 親要素（横並びにする） */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ★クラス名を使わず、タグ名（img）で直接指定する */
.icon img {
  width: 30px;
  /* ここで画像の大きさを制限 */
  height: 30px;
  object-fit: contain;
}

/* 小見出し（h5）のスタイル */
.card-title {
  font-size: 20px;
  /* 文字の大きさ */
  font-weight: bold;
  /* 太字 */
  margin: 10px 0 5px 0;
}

h5 {
  text-align: center;
}

/* 写真を包む枠（ホバー時に画像がはみ出さないようにする） */
.card-img-wrapper {
  width: 100%;
  height: 200px;
  /* 写真の高さ */
  overflow: hidden;
  /* 拡大した時、枠からはみ出た部分を隠す */
}

/* 写真自体のスタイル */
.card-img-wrapper img {
  width: 100%;/* 親要素の横幅に合わせる */
  /*height: 100%;*/
  height: 200px;
  overflow: hidden; /* この枠の中だけはみ出しを削る */
  object-fit: cover;
  /* 画像の比率を保ったまま枠に収める */
  transition: transform 0.3s ease;
  /* 拡大アニメーションを滑らかに */
  /* --- 画像の角を角丸にする設定 --- */
  border-radius: 12px;
  /* ここで丸みを調整します。数字が大きいほど丸くなります */
  object-fit: cover;
  /* 画像が横長でも縦長でも、枠に合わせて綺麗にトリミングします */
}

/* 説明文のスタイル */
.card-desc {
  font-size: 14px;
  /* 説明文は少し小さめ */
  font-family: noto sans jp;
  color: #666666;
  /* 文字色を少し薄いグレーに */
  margin: 10px 0 5px 0;
  /* 上に10px.下に5pxの余白 */
  line-height: 1.6;
  padding: 0 15px 15px; /* カード全体のoverflowを消したため、左右下に少し余白を入れると綺麗に見えます */
}

/* ★カーソルを載せた時（ホバー時）の動き */
.card:hover {
  /* 必要であれば、ここにカード全体の変化（例：少し浮き上がらせるなど）を書きます */
}

/* ホバー時に画像を少し拡大し、少し透明にする */
.card:hover .card-img-wrapper img {
  transform: scale(1.05);
  /* 1.05倍に拡大 */
  opacity: 0.85;
  /* ほんのり薄くする */
}

/*アニメーションの動きを定義/*
/* 「pulse-scale」という名前の動きのレシピを用意 */
@keyframes pulse-scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  /*１．３倍に拡大*/
  100% {
    transform: scale(1);
  }

  /*元のサイズに戻る*/
}

/* 「security-animation」の箱に「is-animated」がついたら、その中にある「img」を動かす */
.security-animation.is-animated img {
  /* 0.8秒かけて、滑らかに1回だけ実行 */
  animation: pulse-scale 0.8s ease-in-out forwards;
}


/* --- 1. アニメーションの動きを3倍（scale(3)）に設定 --- */
@keyframes pulse-scale-giant {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(3); /* 元の30pxから「90px」の大きさまで飛び出します */
  }
  100% {
    transform: scale(1);
  }
}

/* --- 2. アイコン画像にアニメーションを適用 --- */
.security-animation img {
  /* 1.5秒周期で、無限に、滑らかに往復アニメーション */
  animation: pulse-scale-giant 1.5s ease-in-out infinite;

  /* 3倍になったとき、隣の文字の下に隠れないように手前に引き上げます */
  position: relative;
  z-index: 10;

  /* 拡大する基準点を「中央」に固定します */
  transform-origin: center;
}

/* --- 3. 【超重要】カードから飛び出しても画像が消えないようにする対策 --- */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  
  /* アイコンの周りに少しだけ余白（マージン）を作り、
     3倍に拡大してもカードの端（overflow: hiddenの境界）に届かないように内側に寄せます */
  margin: 15px 0; 
}
/*第２段セクション画像とリンクここまで*/


/*カレンダー全体を包むコンテナー*/
.calendar_7_8 {
  width: 100%;
  max-width: 600px;
  /* 画像が大きくなりすぎないように制限する場合 */
  margin: 0 auto 70px;
  /* これでdiv自体が中央に寄ります */
  text-align: center;
}

.calendar_7_8 h3 {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  font-family: noto sans jp;
}

/* 画像が親要素（div）からはみ出さないように設定 */
.calendar_7_8 img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 10px;
  border-style: solid;
  border-width: 3px;
}

/* 凡例（お休みマーク）の配置 */
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 凡例を中央に寄せる */
  margin-bottom: 20px;
  /* 注意書きとの間隔 */
  font-weight: bold;
  margin: 10px auto;
}

/* 今風の「休」スクエアバッジ */
.holiday {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #fcb900;
  /* 少し彩度を落とした今風のゴールド・イエロー */
  color: #000;
  font-weight: bold;
  border-radius: 4px;
  /* 完全な真四角より、ほんの少し角を丸めるのがモダン */
  margin-right: 10px;
  /* テキストとの間の余白 */
}

/* 注意書きリスト */
.notice-list {
  display: inline-block;
  /* リスト全体を中央寄せしつつ、行頭を揃えるためのテクニック */
  margin: 0 auto;
  padding: 10px;
  /* スクエアマークの分の余白 */
  list-style-type: square;
  /* ご希望のスクエア（■）に設定 */
  color: #333;
  /* 真っ黒ではなく、少しグレー寄りの黒で洗練された印象に */
  font-size: 14px;
  text-align: left;
  /* 行間を広げて読みやすく */
}

.notice-list li {
  margin-bottom: 8px;
  position: relative;
  /* 1段目と2段目の間の余白 */
}

/*カレンダーはここまで*/