/* ==========================================================================
   1. 基本設定・リセット補助
   ========================================================================== */
html {
  scroll-behavior: smooth; /* アンカーリンクの移動を滑らかにする */
}

main {
  position: relative;
  background-image: url("https://www.min-iren.gr.jp/wp-content/uploads/2026/02/kyodo_back.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
  overflow: hidden; /* 子要素のはみ出し防止 */
}

/* メインコンテンツのコンテナ */
.main {
  position: relative;
  z-index: 2;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
}

@media (min-width: 1640px) {
  .main {
    padding: 20px 0;
  }
}

.spbr{
	display:block;
}
@media (min-width: 600px) {
.spbr{
	display:none;
}
}

@media (min-width: 960px) {
.spbr{
	display:block;
}
}


@media (min-width: 1300px) {
.spbr{
	display:none;
}
}



/* ==========================================================================
   2. ビジュアル（タイトル・写真）
   ========================================================================== */

/* メインタイトル画像（フェードインアニメーション付） */
.topttl {
  display: block;
  position: relative;
  z-index: 2;
  width: 80%;
  margin: -80px auto -20px;
  opacity: 0;
  animation: topFadeIn 1.2s ease-out forwards;
}

@media (min-width: 960px) {
  .topttl {
	  width: 100%;
    max-width: 1200px;
  }
}

@keyframes topFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 背景写真（装飾用） */
.topphoto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none; /* クリックを透過させる */
}

/* ==========================================================================
   3. ナビゲーション（固定ボタン）
   ========================================================================== */

/* 下部固定ボタン（スマホ用） */
.topbtn {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  width: 100%;
  max-width: 1200px;
  padding: 10px 20px;
  background-color: white;
  box-sizing: border-box;
  z-index: 9999;
}

/* PCでは非表示（必要に応じてコメントアウト解除で調整） */
@media (min-width: 960px) {
  .topbtn {
    display: none;
  }
}

.topbtn li {
  list-style: none;
  background-color: #ff6600;
  color: white;
  width: 33%;
  height: 40px;
  text-align: center;
  font-size: 0.8em;
  font-weight: 600;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s ease-in-out;
}

.topbtn li:hover {
  background-color: #cc3300;
}

.topbtn li a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

/* アイコン設定 */
.topbtn li i {
  display: none; /* スマホではアイコン非表示 */
}

@media (min-width: 960px) {
  .topbtn li {
    font-size: 1.2em;
    letter-spacing: 0.3em;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  .topbtn li i {
    display: block;
  }
}

/* スクロール位置の微調整（ヘッダー被り防止） */
[id] {
  scroll-margin-top: 20px;
}

/* ==========================================================================
   4. コンテンツ・カード（グラスモーフィズムデザイン）
   ========================================================================== */

/* レイアウト全体：PCで横並び */
.dl {
  display: block;
}

@media (min-width: 960px) {
  .dl {
    display: flex;
    align-items: stretch;
    gap: 20px;
  }
}

/* 共通の背景デザイン（すりガラス風） */
.dlcontent {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.55) 100%
  );
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 25px rgba(0, 0, 0, 0.18);
  width: 100%;
  margin-bottom: 20px;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

h2 {
  text-align: center;
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 20px;
}

/* ==========================================================================
   5. リスト・ボタン（各種要項）
   ========================================================================== */

.youkou {
  list-style: none;
	line-height:1.5em;
  padding: 0;
  margin: 0;
  flex: 1; /* 親の余白を埋める */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.youkou li {
  flex: 1; /* 高さを均等に配分 */
  display: flex;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.youkou li:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(0, 0, 0, 0.2);
}

.youkou li a {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  color: #333;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.05em;
}



@media (min-width: 960px) {
  .youkou li a {
	  padding: 4px 20px;
    font-size: 1.1em;
  }
}

.youkou li i {
  font-size: 1.3em;
  color: #ff6600;
}

/* ==========================================================================
   6. グリッドレイアウト（宣伝物・ニュース）
   ========================================================================== */

.senden {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

/* 宣伝物セクションは2列 */
#sendenbutsu .senden {
  grid-template-columns: repeat(2, 1fr);
}

.senden a {
  display: block;
  text-decoration: none;
  color: #333;
}

/* サムネイル画像比率の維持 (A4縦想定) */
.img-wrapper {
  width: 100%;
  height: 0;
  padding-top: 141%; 
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.senden figcaption {
  margin-top: 6px;
  font-size: 1em;
  text-align: center;
  font-weight: 600;
}

.senden a:hover .img-wrapper img {
  transform: scale(1.08);
  filter: brightness(0.75);
}


/* ==========================================================================
   7. ニュースセクション（独自レイアウト）
   ========================================================================== */

#news .newslist {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 600px) {
  #news .newslist {
    flex-direction: row; /* 横並び */
    padding-right: 20px;
  }
  #news .senden,
  #news .youkou {
    flex: 0 0 50%; /* 左右50%ずつ */
    max-width: 50%;
  }
}

/* ニュースリストは要素ごとに高さを固定しない設定 */
#news .youkou li {
  flex: 1; /* ニュースが多い場合に高さを合わせる */
}

/* ==========================================================================
   8. バナー・その他
   ========================================================================== */

.bnr {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: filter 0.3s ease-in-out;
}

.bnr:hover {
  filter: brightness(0.8);
}