@charset "utf-8";

/* 固定ページ標準共通 */
.MvBox {
	position: relative;
    max-width: 1160px;
    margin: auto;
}
.MvBox .TitleArea {
	position: relative;
    background: #EAEC80;
    padding: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
}
.MvBox .TitleArea:after{
	border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(234, 236, 128, 0);
    border-top-width: 20px;
    border-bottom-width: 20px;
    border-left-width: 30px;
    border-right-width: 30px;
    margin-left: -30px;
    border-top-color: #EAEC80;
    top: 100%;
    right: 16%;
}
.MvBox .TitleArea h1 {
    font-size: clamp(1.4rem, 3vw, 2.6rem);
    xtext-shadow: 2px 2px #fff, 2px 2px 1px #fff, 2px 2px 1px #fff, 2px 2px 1px #fff, 2px 2px 1px #fff, 2px 2px 1px #fff, 2px 2px 1px #fff, 2px 2px 1px #fff, 2px 2px 1px #fff, 2px 2px 1px #fff, 2px 2px 1px #fff;
    margin: 0;
    letter-spacing: -.05em;
	color: #525311;
}
.RagionImg {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* 共通内部リストボタン */
.ListBtnArea {
    background: #FFF;
    padding: 40px 0;
    position: relative;
}
.ListBtnArea li {
	list-style: none;
	margin: auto;
}
.ListBtnArea .Contents ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 10px; /* ボタンの間隔 */
  padding: 0;
  margin: 0;
  list-style: none;
}

.ListBtnArea .Contents ul li {
  margin: 0;
  padding: 0;
}

.ListBtnArea .Contents ul li a {
  display: block;
  text-align: center;
  background-color: #007bff; /* ボタンの背景色 */
  color: white; /* テキストの色 */
  padding: 15px;
  text-decoration: none;
  border-radius: 5px; /* 角を丸くする */
  transition: background-color 0.3s ease; /* ホバー時のエフェクト */
}

.ListBtnArea .Contents ul li a:hover {
  background-color: #0056b3; /* ホバー時の背景色 */
}

/* レスポンシブ対応: 画面幅が768px未満の場合は2列 */
@media (max-width: 768px) {
  .ListBtnArea .Contents ul {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
  }
}

.OfficeInfo {
    background: #f1fcff;
    padding: 40px 0;
    position: relative;
}
.OfficeInfoBox {
    background-color: #fff;
    box-shadow: 0 0 9px rgba(0, 0, 0, .34);
    border-radius: 5px;
    padding: 24px;
    position: relative;
}
.OfficeInfoBox {
  display: flex;
  flex-wrap: wrap; /* フレックスボックスを使用して、アイテムを2列に配置 */
  justify-content: space-between; /* 均等に配置 */
}

.AddresList {
  width: 48%; /* 2列にするために各アイテムを48%の幅に設定 */
  margin-bottom: 20px; /* 各アイテムの間に余白を追加 */
}

.AddBox {
  background-color: #f8f8f8; /* 背景色 */
  border: 1px solid #ddd; /* 枠線 */
  border-radius: 8px; /* 角を丸く */
  padding: 15px;
}

.AddBox h3 {
  color: #333; /* 見出しの色 */
  margin: 0 0 10px;
}

.AddBox p {
  color: #666; /* テキストの色 */
  line-height: 1.6;
  margin: 0;
}

/* レスポンシブ対応: 画面幅が768px未満では1列 */
@media (max-width: 768px) {
  .AddresList {
    width: 100%; /* 1列に変更 */
  }
}

.RegionInfo {
    background: #FFF;
    padding: 40px 0;
    position: relative;
}
.RegionInfoBox {
	position: relative;
	margin-bottom: 32px;
}
.RegionInfoBox h3 {
    border-radius: 16px 16px 0 0;
    background: #2644AC;
    color: #FFF;
    padding: 16px;
    margin: 8px auto 0;
    font-size: clamp(1.0rem, 1.6vw, 1.6rem);
    position: relative;
}
.RegionInfoBox .InnerText {
	padding: 24px 16px;
    background: #f1fcff;
}
.RegionInfoBox p {
	margin: 0 auto 16px;
}

/* DT（季節の見出し）のスタイル */
dt {
    font-weight: 700;
    font-size: 1.2em;
    background-color: #e0e0e0;
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
}

/* DD（本文）のスタイル */
dd {
	padding: 16px;
    background-color: #ffffff;
    border-radius: 0 0 8px 8px;
	margin: 0 0 24px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  dt {
    font-size: 1.1em;
  }
  dd {
    font-size: 0.95em;
  }
}

.OutLinkArea {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列に配置 */
  gap: 15px; /* アイテム間の間隔 */
  padding: 0;
  list-style: none;
  margin: auto;
}

.OutLinkArea li a {
  display: block;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  color: #ffffff; /* リンクの文字色 */
  background-color: #4CAF50; /* グリーン系のリンク背景色 */
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
  position: relative;
  transition: background-color 0.3s ease; /* ホバー時のエフェクト */
}

.OutLinkArea li a:hover {
  background-color: #388E3C; /* ホバー時の背景色（濃いグリーン） */
}

.OutLinkArea li a::after {
  content: '🔗'; /* 外部リンクを示すアイコン */
  position: absolute;
  right: 10px;
  font-size: 1.2em;
  color: #ffffff; /* アイコンの色 */
}

/* レスポンシブ対応: 画面幅が768px未満では2列 */
@media (max-width: 768px) {
  .OutLinkArea {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
  }
}

/* レスポンシブ対応: 画面幅が480px未満では1列 */
@media (max-width: 480px) {
  .OutLinkArea {
    grid-template-columns: 1fr; /* 1列 */
  }
}

.category-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の背景 */
  color: #ffffff; /* テキストの色 */
  padding: 5px 10px;
  border-radius: 3px; /* 角を丸く */
  font-size: 0.9em;
  font-weight: bold;
  z-index: 10; /* 他の要素より前面に表示 */
}

/* サムネイルのラッパーを相対配置にして、絶対配置のカテゴリラベルを固定 */
.article-thumbnail {
  position: relative;
}