/* ===== 基本設定 ===== */

/* フォント */
body,
button,
input[type="button"],
input[type="submit"],
input[type="text"],
textarea,
select {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Arial, 'BIZ UDPGothic', Meiryo, メイリオ, Osaka, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Arial, 'BIZ UDPGothic', Meiryo, メイリオ, Osaka, sans-serif;
}

em {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Arial, 'BIZ UDPGothic', Osaka, 'MS PGothic', sans-serif;
}

.mincho {
  font-family: 'Hiragino Mincho Pro', 'HiraMinProN-W3', 'ヒラギノ明朝 Pro W3', Century, 'BIZ UDPMincho', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', serif;
}

/* 文字色 */
body {
  color: #333333;
}

/* リンク */
a:link {
  color: #333;
  text-decoration: underline;
}

a:visited {
  color: #333;
  text-decoration: underline;
}

a:active {
  color: #333;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #333;
  text-decoration: none;
}



/* --- レイアウト --- */
.container {
  width: 100%;
  max-width: 1100px;
  /* コンテンツの最大幅 */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* --- Googleカスタム検索フォーム全体 --- */
#cse-search-box-floating,
#cse-search-box {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  /* align-items: flex-start; */
  margin-top: 8px;
}

/* --- 検索入力欄 --- */
#cse-search-box-floating #tmp_query_floating,
#cse-search-box #tmp_query {
  flex-grow: 1;
  border: 2px solid #404040;
  background-color: #fff;
  padding: 6px 12px;
  font-size: 1rem;
  border-radius: 500px 0 0 500px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  margin: 0;
  height: 42px;
}

/* --- 検索入力欄にフォーカスした時 --- */
#cse-search-box-floating #tmp_query_floating:focus,
#cse-search-box #tmp_query:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

/* --- 検索ボタン --- */
#cse-search-box-floating #submit,
#cse-search-box #submit {
  border: none;
  background-color: #404040;
  color: white;
  padding: 8px 18px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 0 500px 500px 0;
  transition: background-color 0.3s;
  height: 42px;
}

/* --- 検索ボタンにマウスを乗せた時 --- */
#cse-search-box-floating #submit:hover,
#cse-search-box #submit:hover {
  background-color: #404040;
}

/* --- ボタン風メニュー (searchMenu1, searchMenu2共通) --- */
.searchMenu1 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0 0 15px 0;
  list-style: none;
}

.searchMenu2 ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 0;
  margin: 0 0 15px 0;
  list-style: none;
}

/* searchMenu2が最後の場合、下の余白をなくす */
.searchContainer .searchMenu2:last-child ul {
  margin-bottom: 0;
}

.searchMenu1 li,
.searchMenu2 li {
  margin: 0;
}

.searchMenu1 li a,
.searchMenu2 li a {
  display: block;
  background-color: #FEDF8F;
  color: #333;
  padding: 6px 20px;
  /* ボタンの高さを縮小 */
  text-decoration: none;
  border-radius: 30px;
  font-size: 0.85rem;
  /* 少し小さく */
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.searchMenu2 li a {
  border: solid 2px #30818A;
  color: #30818A;
  background-color: #FFF;
  padding: 5px 10px;
  text-align: center;
}

/* --- ボタンにマウスを乗せた時 --- */
.searchMenu1 li a:hover,
.searchMenu2 li a:hover {
  background-color: #30818A;
  color: #fff;
  transform: translateY(-1px);
  /* 浮き上がりを少しに */
}

/* --- 注目キーワード (存在する場合) --- */
#search_trend_word {
  margin-bottom: 15px;
}

/* 注目ワードがsearchMenu2の後にくる場合は、searchMenu2のulのmargin-bottomを0にする */
.searchMenu1+#search_trend_word+.searchMenu2 ul {
  margin-bottom: 0;
}

#search_trend_word_ttl {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 6px;
}

#search_trend_word_ttl+p {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 5px;
}

#search_trend_word p a {
  color: #555;
  text-decoration: none;
  margin: 0 5px;
  background-color: #eee;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 500px;
}

#search_trend_word p a:hover {
  text-decoration: underline;
}

/* --- 隠し要素 --- */
.hide {
  display: none;
}

/* --- メインコンテンツ --- */
main .container {
  padding-top: 2em;
  padding-bottom: 2em;
}

/* --- 見出し (h1-h6) --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin-top: 1.5em;
  /* 上の要素との間隔 */
  margin-bottom: 0.5em;
  /* 下の要素との間隔 */
  line-height: 1.3;
}

h1 {
  font-size: 2.2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.9rem;
}

/* --- 段落 (p) --- */
p {
  margin-bottom: 1em;
  /* 段落間のスペース */
}

/* --- リスト (ul, ol) --- */
ul,
ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
  /* destyle.cssで消されたインデントを戻す */
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: 0.5em;
  /* リスト項目間のスペース */
}

/* --- テーブル (table) --- */
table {
  width: 100%;
  border-collapse: collapse;
  /* セルの境界線を重ねる */
  margin-bottom: 1em;
  border: 1px solid #ccc;
}

th,
td {
  border: 1px solid #ccc;
  padding: 0.8em;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* --- フォーム (form) --- */
label {
  display: block;
  /* ラベルをブロック要素にして改行させる */
  font-weight: bold;
  margin-bottom: 0.5em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 0.8em;
  font-size: 1rem;
  font-family: inherit;
  /* bodyのフォントを継承 */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  /* paddingを含めてwidth: 100%にする */
  margin-bottom: 1.5em;
}

/* 入力中にフォーカスが当たった時のスタイル */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

button,
input[type="submit"] {
  display: inline-block;
  padding: 0.8em 1.5em;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
  background-color: #0056b3;
}

/* --- 説明リスト (dl) --- */
dl {
  margin-bottom: 1.5em;
}

dt {
  font-weight: bold;
  margin-top: 1em;
  /* 2つ目以降のdtの上部に余白を作る */
}

dd {
  margin-left: 1.5em;
  /* 説明を字下げする */
  margin-bottom: 0.5em;
}

/* 桑折町オリジナル */

main {
  overflow: hidden;
}

.container1100 {
  width: 100%;
  max-width: 1100px;
  /* コンテンツの最大幅 */
  margin: 0 auto;
}


/* 補助メニュー */
/* ナビゲーションバー全体のスタイリング */
.supportNav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
  background-color: #ffffff;
  border-radius: 0px 0px 6px 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-right: 10px;
}

/* dl要素（文字サイズ、背景色）のスタイリング */
.supportNav dl {
  display: flex;
  /* dl内のdtとddも横並びにする */
  align-items: center;
  gap: 8px;
  /* ラベルとボタンの間のスペース */
  margin: 0;
  /* デフォルトのマージンをリセット */
}

/* dt要素（ラベル）のスタイリング */
.supportNav dt {
  font-weight: 500;
  color: #4a5568;
  font-size: 0.8125rem;
  margin: 0;
}

/* dd要素のスタイリング */
.supportNav dd {
  margin: 0;
  /* デフォルトのマージンをリセット */
}

/* リンクをボタン風にする共通スタイル */
.supportNav #haikeiColor a,
.supportNav #mojiSize a {
  display: inline-block;
  padding: 4px 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  background-color: #EBE9DE;
  border: 1px solid #e2e8f0;
  border-radius: 500px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.supportNav a#haikei_white,
.supportNav a#moji_default {
  background-color: #FFF;
  border: solid 1px #333;
}

.supportNav a#moji_large {
  background-color: #C84C54;
  color: #FFF;
}

.supportNav a#haikei_black {
  background-color: #000;
  color: #FFF;
}

.supportNav a#haikei_blue {
  background-color: #0000FF;
  color: #FFFF00;
}


/* リンクのホバー（マウスオーバー）時のスタイル */
.supportNav a:hover {
  transform: translateY(-2px);
  /* 少し浮き上がる効果 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* リンクのアクティブ（クリック中）時のスタイル */
.supportNav a:active {
  transform: translateY(0);
  box-shadow: none;
}


#supportNavMenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  column-gap: 10px;
}

#supportNavMenu li {
  position: relative;
  padding: 0px 0px 0px 15px;
  margin: 0;
  display: flex;
}

#supportNavMenu li a:hover {
  box-shadow: none;
}

#supportNavMenu li a {
  display: inline-block;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  font-weight: 500;
  color: #0D59B7;
}

#supportNavMenu li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-top: 2px solid #414141;
  border-right: 2px solid #414141;
  transform: translateY(-50%) rotate(45deg);
}


/* 重要なお知らせ */
#top_important {
  border: solid 2px #D1384C;
  margin: 40px auto;
  max-width: 900px;
  width: 90%;
}

.top_important_ttl h2 {
  margin: 0px;
  background-color: #D1384C;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 6px 0px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 12px;
}

.top_important_ttl h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-image: url(/img/top/i-megahonn.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.top_important_list {
  padding: 34px;
}

.top_important_list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top_important_list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
}

.top_important_list .article_date {
  min-width: 165px;
  flex-shrink: 0;
}

/* .top_important_list .article_title {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */


.link_box {
  display: flex;
  justify-content: flex-end;
  column-gap: 16px;
  align-items: center;
}

.link_ichiran a {
  display: block;
  position: relative;
  padding: 10px 40px 10px 20px;
  background-color: #FFF;
  border-radius: 4px;
  text-decoration: none;
  border: solid 1px #D1384C;
}

.link_ichiran a::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-sizing: border-box;
  border: solid 1px #D1384C;
  transition: right 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.link_ichiran a::after {
  content: '';
  position: absolute;
  right: 19px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #D1384C;
  border-right: 2px solid #D1384C;
  transform: translateY(-50%) rotate(45deg);
  box-sizing: border-box;
  transition: right 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.link_ichiran a:hover::before {
  right: 5px;
  background-color: #D1384C;
}

.link_ichiran.daidai a:hover::before {
  right: 5px;
  background-color: #ec9600;
}

.link_ichiran.daidai a:hover::after,
.link_ichiran a:hover::after {
  right: 14px;
  border-color: #FFF;
}

.link_ichiran.daidai a::after,
.link_ichiran.daidai a::before,
.link_ichiran.daidai a {
  border-color: #ec9600;
}


.relatedLinksSection0 {
  margin-top: 80px;
}


/* タブコンテンツ　いざというとき */
.tabIza {
  position: relative;
  background-color: #faf1ef;
}

.tabIza::before {
  content: "";
  display: block;
  width: 130px;
  height: 435px;
  background-image: url(/img/top/illust001.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0.4;
}

.tabIzaContainer {
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: 80px;
  z-index: 3;
}

/* ulをグリッドコンテナに設定 */
.iza-menu>ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  padding: 0;
  max-width: 400px;
  margin: 0 auto;
}

.iza-menu>ul li {
  margin-bottom: 0px;
}

.iza-menu>ul a {
  display: block;
  position: relative;
  padding: 6px 0px;
  padding-left: 43px;
  background-color: #FFF;
  border-radius: 500px;
  text-decoration: none;
  font-weight: 600;
  border: solid 2px #D1384C;
  /* transition: all 0.2s ease-in-out; */
  pointer-events: auto;
  transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.iza-menu>ul a::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #d1384c;
}

.iza-menu>ul a::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform: translateY(-50%) rotate(45deg);
  box-sizing: border-box;
}

.iza-menu>ul a:hover {
  background-color: #d1384c;
  color: #FFF;
}

.iza-menu>ul a:hover::before {
  background-color: #FFF;
}

.iza-menu>ul a:hover::after {
  border-top: 2px solid #d1384c;
  border-right: 2px solid #d1384c;
}



/* イベントカレンダー */
section.eventCalendarSection {
  background-color: #faf1ef;
}

.eventCalendarContainer.container1100 {
  position: relative;
}

.eventCalendarContainer h2 {
  margin: 0;
  display: flex;
  padding: 0px 0px 40px;
  align-items: flex-start;
  font-weight: 600;
  margin-left: 36px;
}

.eventCalendarContainer h2 span {
  border-bottom: solid 4px #EF8585;
  display: block;
  padding-bottom: 4px;
  letter-spacing: 1px;
}

.eventCalendarContainer h2::after {
  content: "";
  display: block;
  width: 418px;
  height: 46px;
  background-image: url(/img/top/t-event.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: 23px;
  margin-left: -8px;
}

.eventCalendarContent .top_tab_detail_box2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Optional: For responsive design on smaller screens */
@media (max-width: 768px) {
  .eventCalendarContent .top_tab_detail_box2 {
    grid-template-columns: 1fr;
  }
}

/* --- 重要なお知らせのリストスタイルを適用 --- */
.top_tab_detail_list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top_tab_detail_list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.top_tab_detail_list li:last-child {
  border-bottom: none;
}

.top_tab_detail_list .article_date {
  min-width: 165px;
  flex-shrink: 0;
}

.top_tab_detail_list .article_title {
  display: flex;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
  line-height: 1.6;
}

/* .top_tab_detail_list .article_title a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
} */

.top_tab_detail_list .article_title .icon_new {
  flex-shrink: 0;
  margin-left: 5px;
  width: 36px;
}

/* イベントカレンダー */

.eventCalendarContent {
  padding: 0 50px;
}

#top_calendar_detail {
  margin-right: 40px;
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
}

.top_calendar_box {
  width: 100%;
  display: table;
}

.top_calendar_box>div {
  display: table-cell;
  vertical-align: top;
}

.top_calendar_box>div.cal_box_left {
  padding-right: 30px;
  width: 240px;
}

.top_calendar_box .event_title {
  margin-bottom: 10px;
}

.top_calendar_box .cal_box_right ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.top_calendar_box .cal_box_right ul li {
  margin: 0px;
  padding: 5px 0px;
}

ul.calendar_index {
  margin: 0px 0px 15px;
  padding: 0px;
  list-style: none;
  width: 100%;
  display: table;
  text-align: center;
}

ul.calendar_index li {
  display: table-cell;
  vertical-align: middle;
}

ul.calendar_index li.calendar_index_last,
ul.calendar_index li.calendar_index_next {
  width: 3em;
}

ul.calendar_index li.calendar_index_now {
  padding-left: 10px;
  padding-right: 10px;
}

table#top_calendar_table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  table-layout: fixed;
}

table#top_calendar_table th {
  border: none;
  border-collapse: collapse;
  text-align: center;
  font-weight: normal;
  padding: 2px;
  background-color: transparent;
  word-break: break-all;
}

table#top_calendar_table td {
  border: none;
  border-collapse: collapse;
  text-align: center;
  padding: 2px;
}

table#top_calendar_table th span,
table#top_calendar_table td a {
  display: block;
  padding: 5px 0px;
  background: #FFF;
  color: #333333;
  text-decoration: none;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 300px;
  white-space: nowrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

table#top_calendar_table th.cal_sun span,
table#top_calendar_table td.cal_sun a {
  background: #fcd4dc;
}

table#top_calendar_table th.cal_sat span,
table#top_calendar_table td.cal_sat a {
  background: #b5e7ea;
}

table#top_calendar_table td.cal_today a {
  background: #ffc35a;
}

table#top_calendar_table td a:hover {
  text-decoration: underline;
}

/* 本日のイベント */

.topCalendar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#top_event_today {
  -ms-flex-preferred-size: 70%;
  flex-basis: 70%;
}

#top_event_today_title {
  color: #004081;
}

#top_event_today ul {
  padding: 1.5rem 0px 7px 1.5rem;
}

#top_event_today ul li {
  border-bottom: solid 1px darkgrey;
  padding: 0 6px 15px;
  margin-bottom: 18px;
}

#top_event_today .btnG.shinchakuBtn {
  margin-top: 0;
}

#top_event_today div.btnG.shinchakuBtn #top_event_today_link.newsListBtn a {
  margin-right: 0;
}

#top_event_today p.no_data {
  padding: 40px 10px;
  border-bottom: solid 1px darkgray;
  margin-bottom: 20px;
}



/* 便利サービス　目的別にさがす */
.benriServiceContainer {
  position: relative;
  background-color: #fcf6e6;
}

.benriServiceContainer::before {
  content: "";
  display: block;
  width: 130px;
  height: 302px;
  background-image: url(/img/top/illust002.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  position: absolute;
  right: 0;
  top: 30%;
  z-index: 2;
  opacity: 0.4;
}

.benriService {
  position: relative;
  display: flex;
  justify-content: center;
  column-gap: 60px;
  z-index: 3;
  padding: 80px 0px 0px;
}

.benriService h2 {
  margin: 0 0 1rem;
  border-left: solid 11px gainsboro;
  padding-left: 1rem;
  font-weight: 600;
}

.benriService h2.midoriLine {
  border-color: #48A395;
}

.benriService h2.akaLine {
  border-color: #EB6770;
}

.benriService h2.daidaiLine {
  border-color: #E89212;
}


/* ulをグリッドコンテナに設定 */

.mokutekiSection>ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

section.mokutekiSection.kurashiSection>ul {
  grid-template-columns: repeat(2, 1fr);
}

.mokutekiSection>ul:last-child {
  margin-bottom: 0px;
}

.mokutekiSection ul {
  margin-left: 15px;
}


/* リンク(aタグ)をボタン風にスタイリング */
.mokutekiSection>ul a {
  display: block;
  padding: 18px 8px 8px;
  background-color: #FFF;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s, transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid transparent;
}

/* ホバー時のスタイル */
.mokutekiSection>ul a:hover {
  border-color: #eb6770;
  box-shadow: 0 4px 12px rgba(235, 103, 112, 0.4);
}

/* 「くらし」セクションのホバー時のスタイル */
.mokutekiSection.kurashiSection>ul a:hover {
  border-color: #e89212;
  box-shadow: 0 4px 12px rgba(232, 146, 18, 0.4);
}


/* ulをグリッドコンテナに設定 */
.benriSection>ul {
  display: grid;
  /* 1つのカラムを作成 (これにより縦一列に並びます) */
  grid-template-columns: 1fr;
  /* ボタン間の縦の隙間 */
  gap: 12px;
  /* デフォルトのリストスタイルとパディングをリセット */
  list-style: none;
  padding: 0;
  /* 横幅が広くなりすぎないように最大幅を設定（お好みで調整） */
  max-width: 400px;
  margin: 0 0 0 15px;
}

/* リンク(aタグ)をボタン風にスタイリング */
.benriSection>ul a {
  display: block;
  padding: 16px;
  background-color: #FFF;
  border-radius: 4px;
  text-decoration: none;
  /* ホバー時のアニメーション効果 */
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ホバー時のスタイル */
.benriSection>ul a:hover {
  /* 少し浮き上がり、影をつける効果 */
  transform: translateY(-3px);
}


.benriSection ul li a {
  background-repeat: no-repeat;
  background-position: center left 8px;
  background-size: 32px;
  padding-left: 50px;
}

.benriSection ul li.sMap a {
  background-image: url('/img/top/bi-map.png');
}

.benriSection ul li.sInfo a {
  background-image: url('/img/top/bi-shisetsu.png');
}

.benriSection ul li.sLink a {
  background-image: url('/img/top/bi-link.png');
}

.benriSection ul li.sDownload a {
  background-image: url('/img/top/bi-dl.png');
}


.mokutekiSection ul li a {
  background-repeat: no-repeat;
  background-position: center top 6px;
  background-size: 44px;
  padding-top: 46px;
  height: 100%;
}

.mokutekiSection ul li.ninshin a {
  background-image: url('/img/top/mi-ninshin.png');
}

.mokutekiSection ul li.kosodate a {
  background-image: url('/img/top/mi-kosodate.png');
}

.mokutekiSection ul li.nyugaku a {
  background-image: url('/img/top/mi-nyugaku.png');
}

.mokutekiSection ul li.shushoku a {
  background-image: url('/img/top/mi-shushoku.png');
}

.mokutekiSection ul li.kekkon a {
  background-image: url('/img/top/mi-kekkon.png');
}

.mokutekiSection ul li.rikon a {
  background-image: url('/img/top/mi-rikon.png');
}

.mokutekiSection ul li.korei a {
  background-image: url('/img/top/mi-korei.png');
}

.mokutekiSection ul li.okuyami a {
  background-image: url('/img/top/mi-okuyami.png');
}

.mokutekiSection ul li.hikkoshi a {
  background-image: url('/img/top/mi-hikkoshi.png');
}

.mokutekiSection ul li.gomi a {
  background-image: url('/img/top/mi-gomi.png');
}

.mokutekiSection ul li.kenko a {
  background-image: url('/img/top/mi-kenko.png');
}

.mokutekiSection ul li.hoken a {
  background-image: url('/img/top/mi-hoken.png');
}

.mokutekiSection ul li.shomei a {
  background-image: url('/img/top/mi-shomei.png');
}



/* --- 桑折町について --- */
section.kooriTownSection.container1100 {
  position: relative;
  z-index: 3;
}

.kooriTownContainer {
  position: relative;
  background-color: #e2efea;
  padding-bottom: 180px;
}

section.kooriTownSection h2 {
  margin: 0;
  display: flex;
  padding: 0px 0px 40px;
  align-items: flex-start;
  font-weight: 600;
  margin-left: 36px;
}

section.kooriTownSection h2 span {
  border-bottom: solid 4px #FEC158;
  display: block;
  padding-bottom: 4px;
  letter-spacing: 1px;
}

section.kooriTownSection h2::after {
  content: "";
  display: block;
  width: 159px;
  height: 46px;
  background-image: url(/img/top/t-about.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: 23px;
  margin-left: -8px;
}

ul.kooriTownLinks {
  display: flex;
  column-gap: 15px;
  list-style: none;
  padding: 0;
  justify-content: center;
  width: 960px;
  margin: 0 auto;
}

ul.kooriTownLinks li {
  flex: 1 0 auto;
}

/* 桑折町について リンクボタン */
ul.kooriTownLinks a {
  display: block;
  position: relative;
  padding: 8px 43px 8px 23px;
  background-color: #F8A8A8;
  border-radius: 500px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  font-size: 1.375rem;
  border: 1px solid transparent;
  text-align: center;
}

ul.kooriTownLinks a:hover {
  box-shadow: 0 4px 12px rgba(235, 103, 112, 0.4);
  border-color: #eb6770;
}

/* 矢印アイコンのスタイル（変更なし） */
ul.kooriTownLinks a::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #FFF;
}

ul.kooriTownLinks a::after {
  content: '';
  position: absolute;
  right: 19px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #F8A8A8;
  border-right: 2px solid #F8A8A8;
  transform: translateY(-50%) rotate(45deg);
  box-sizing: border-box;
}


.kohoJinko {
  display: flex;
  justify-content: space-between;
  width: 960px;
  margin: 0 auto;
}

.kohoJinko h3 {
  font-weight: 600;
}

.kohoLinks {
  display: flex;
  column-gap: 20px;
  align-items: flex-start;
}

.kohoLinks>ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  padding: 0;
  max-width: 400px;
  margin: 0 auto;
}

/* 広報誌リンク */
.kohoLinks>ul a {
  display: block;
  padding: 14px;
  border-radius: 500px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  background-color: #FFF;
  border: 1px solid transparent;
}

/* 広報誌リンク ホバー時 */
.kohoLinks>ul a:hover {
  border-color: #333;
}



/* 人口・世帯数 */

.jinkoSetai h3 span {
  font-weight: normal;
  font-size: 1rem;
}

/* ulをグリッドコンテナに設定 */
.jinkoSetai ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 12px;
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}

/* リンク(aタグ)のスタイル（任意） */
.jinkoSetai ul li {
  display: flex;
  flex-direction: column;
  height: 90px;
  align-items: center;
  justify-content: flex-end;
}

/* strongタグのスタイル */
.jinkoSetai ul strong {
  display: block;
  font-weight: 600;
  font-size: 1.5rem;
}

.jinkoSetai ul li {
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 90px;
  padding-left: 80px;
  word-break: break-all;
}

.jinkoSetai ul li.jinko {
  background-image: url('/img/top/ji-jinko.png');
}

.jinkoSetai ul li.setai {
  background-image: url('/img/top/ji-setai.png');
}

.jinkoSetai ul li.dansei {
  background-image: url('/img/top/ji-otoko.png');
}

.jinkoSetai ul li.josei {
  background-image: url('/img/top/ji-onna.png');
}


.instagramLinks {
  width: 960px;
  margin: 0 auto 40px;
}

.instagramTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 30px;
}

.instagramLinks h3 {
  display: flex;
  align-items: center;
  column-gap: 13px;
  margin: 0px;
}

.instagramLinks h3::before {
  content: "";
  display: block;
  background-image: url('/img/top/sns-insta.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  height: 40px;
  width: 40px;
}

/* Instagram "もっと見る" link */
.instagramTitle a {
  display: block;
  position: relative;
  padding: 10px 45px 10px 25px;
  background-color: #FFF;
  border-radius: 500px;
  text-decoration: none;
  border: solid 1px #FFF;
  /* Default border to prevent layout shift */
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Instagram "もっと見る" link on hover */
.instagramTitle a:hover {
  border-color: #333;
}

/* Arrow icon styles (unchanged) */
.instagramTitle a::before {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: #707070;
}

.instagramTitle a::after {
  content: '';
  position: absolute;
  right: 19px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform: translateY(-50%) rotate(45deg);
  box-sizing: border-box;
}


.snsLinks {
  display: block;
  margin: 40px auto 10px;
  width: 680px;
}

/* ulをグリッドコンテナに設定 */
.snsLinks ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.snsLinks ul a {
  display: block;
  padding: 9px 4px;
  background-color: #FFF;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  border: 1px solid transparent;
}

/* SNS Links on hover */
.snsLinks ul a:hover {
  border-color: #333;
}

.snsLinks ul li a {
  background-repeat: no-repeat;
  background-position: center left 14px;
  background-size: 35px;
  padding-left: 53px;
  line-height: 1.4;
}

.snsLinks ul li.line a {
  background-image: url('/img/top/sns-line.png');
}

.snsLinks ul li.x a {
  background-image: url('/img/top/sns-x.png');
}

.snsLinks ul li.fb a {
  background-image: url('/img/top/sns-fb.png');
}

.snsLinks ul li.yt a {
  background-image: url('/img/top/sns-yt.png');
}




/* 関連リンク */
section.relatedLinksSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f6faf8;
}

section.relatedLinksSection h2 {
  margin: 0;
  display: flex;
  padding: 40px 0px;
  align-items: flex-start;
  margin-left: 119px;
  font-weight: 600;
}

section.relatedLinksSection h2 span {
  border-bottom: solid 4px #67BAA8;
  display: block;
  padding-bottom: 4px;
  letter-spacing: 1px;
}

section.relatedLinksSection h2::after {
  content: "";
  display: block;
  width: 119px;
  height: 46px;
  background-image: url(/img/top/t-links.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-top: 23px;
}


section.relatedLinksSection .slick-list {
  padding: 0px 0px 10px;
}

section.relatedLinksSection .slick-slide img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}



/* --- 広告 --- */
section.adSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #e2efea;
  padding-bottom: 60px;
}

section.adSection h2 {
  font-weight: 600;
  font-size: 1.5rem;
}

.adContainer ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  /* style.cssで設定されたリストのスタイルをリセット */
  padding: 0;
  margin: 0;
  list-style: none;
}

.adContainer ul li a img {
  border-radius: 6px;
}

.color-1 {
  position: absolute;
  width: 100%;
  height: 70%;
  background: linear-gradient(to bottom right, #fcf6e6 50%, #e2efea 50%);
}

.color-2 {
  position: absolute;
  width: 100%;
  height: 90%;
  background: linear-gradient(to bottom left, #faf1ef 50%, #fcf6e6 50%);
}

.color-3 {
  position: absolute;
  width: 100%;
  height: 80%;
  background: linear-gradient(to bottom right, #FFFFFF 50%, #faf1ef 50%);
}


.color-1::before {
  content: "";
  display: block;
  width: 260px;
  height: 357px;
  background-image: url(/img/top/illust003.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;
  position: absolute;
  left: -20px;
  top: 180px;
  z-index: 2;
  opacity: 0.2;
}

.kooriTownContainer::before {
  content: "";
  display: block;
  width: 260px;
  height: 357px;
  background-image: url(/img/top/illust004.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center left;
  position: absolute;
  right: -20px;
  bottom: 150px;
  z-index: 1;
  opacity: 0.2;
}

.layoutWrap-left,
.layoutWrap {
  /* 疑似要素を配置するための基準となります */
  position: relative;
  /* コンテンツの上下の余白 */
  padding-top: 50px;
  padding-bottom: 50px;
  z-index: 3;
}

.layoutWrap {
  top: 90px;
}


.layoutWrap::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(50% - 550px);
  background-color: #ffffffad;
  z-index: 0;
  border-radius: 40px 0px 0px 40px;
}


/* --- 左側に伸ばすパターンのスタイル --- */
.layoutWrap-left::before {
  content: '';
  /* 疑似要素には必須 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* 背景の終了位置を計算して指定します (コンテナの右端まで) */
  right: calc(50% - 550px);
  background-color: #ffffffad;
  /* 左側に伸ばす背景色 */
  z-index: 0;
  /* コンテンツの後ろに配置 */
  border-radius: 0px 40px 40px 0px;
}


/* --- フローティング検索メニュー --- */
.floating-search-container {
  position: fixed;
  top: 50%;
  right: 0;
  /* 変更: コンテナ全体を動かすため、初期位置をパネルが隠れる位置に設定 */
  transform: translate(calc(490px - 40px), -50%);
  z-index: 998;
  display: flex;
  align-items: center;

  /* 初期状態は非表示 */
  visibility: hidden;
  opacity: 0;
  /* 変更: transformのアニメーションを追加し、表示/非表示のtransitionを調整 */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

/* 表示状態のスタイル */
.floating-search-container.is-visible {
  visibility: visible;
  opacity: 1;
  /* 変更: visibilityの遅延をなくすように調整 */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* 開閉ボタン */
.floating-search-toggle {
  cursor: pointer;
  background-color: #404040;
  color: white;
  border: none;
  border-radius: 6px 0 0 6px;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);
  transition: background-color 0.3s;
  /* 変更: orderプロパティでボタンをパネルの左側に配置 */
  order: 0;
  pointer-events: all;
  width: 40px;
  height: 200px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.floating-search-toggle:hover {
  background-color: #5a5a5a;
}

/* ボタン内のテキストspanは不要になるので非表示に */
.floating-search-toggle span {
  display: none;
}

/* 開閉パネル */
.floating-search-panel {
  width: 450px;
  background-color: #fffffff5;
  border-radius: 0px 0px 0px 6px;
  box-shadow: 8px 0px 12px rgba(0, 0, 0, 0.2);
  border: 1px solid #ddd;
  border-right: none;

  /* 削除: 開閉アニメーションは親コンテナで制御するため、transform関連のプロパティを削除 */
  max-height: 90vh;
  overflow-y: auto;
  /* 追加: orderプロパティでパネルをボタンの右側に配置 */
  order: 1;
}

/* 変更: is-openクラスが付与された際、コンテナ全体を移動させてパネルを表示 */
.floating-search-container.is-open {
  transform: translate(0, -50%);
}

/* 削除: 個別の開閉スタイルは不要になったため削除 */


/* 複製した検索コンテナのスタイル調整 */
.floating-search-panel .searchContainer {
  margin: 0;
  width: 100%;
  box-shadow: none;
  padding: 16px;
  background-color: #FFF;
  border-radius: 0;
}

.floating-search-panel .searchContainer h2 {
  font-size: 1.3rem;
  color: #333;
  margin: 0;
  font-weight: 600;
}



/* --- ピックアップスライダー用のちら見せスタイル --- */
.pickup-slider.swiper-instance {
  overflow: hidden;
  /* はみ出したスライドを隠す */
  width: 70%;
  max-width: 800px;
}

.pickup-slider .swiper {
  background-color: #F7D0D4;
  padding: 10px 0;
  z-index: 2;
}

/* デスクトップ表示時のスライド幅を60%に */
.pickup-slider .swiper-slide {
  width: 60%;
}

/* モバイル表示時のスタイル */
@media (max-width: 768px) {

  /* モバイル表示時のスライド幅 (1枚＋ちら見せ) */
  .pickup-slider .swiper-slide {
    width: 75%;
  }
}

/*
  ここから下をレスポンシブ対応エリアとします
*/

/* レスポンシブ対応 (タブレット・モバイル向け) */
@media (max-width: 1100px) {

  /* 1100px以下（タブレット領域）から適用 */
  section.relatedLinksSection .swiper-instance,
  section.relatedLinksSection0 .swiper-instance {
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
  }
}

/* レスポンシブ対応 (モバイル向け) */
@media (max-width: 992px) {
  #cse-search-box #tmp_query {
    border-radius: 500px;
    margin-bottom: 10px;
  }

  #cse-search-box #submit {
    border-radius: 500px;
  }

  .searchMenu1 ul,
  .searchMenu2 ul {
    justify-content: space-around;
    gap: 5px;
  }

  .iza-menu>ul {
    max-width: none;
    padding: 0 20px;
  }

  #supportNavMenu ul {
    flex-wrap: wrap;
    row-gap: 14px;
  }

  /* 「桑折町について」セクションのレイアウト調整 */
  ul.kooriTownLinks,
  .kohoJinko,
  .instagramLinks {
    width: auto;
    /* 固定幅を解除して、はみ出しを防ぐ */
    margin-left: 20px;
    margin-right: 20px;
  }

  ul.kooriTownLinks {
    flex-wrap: wrap;
    /* リンクが画面幅に応じて折り返すようにする */
    justify-content: center;
    row-gap: 15px;
    /* 折り返した際の行間を調整 */
  }

  .kohoJinko {
    flex-wrap: wrap;
    /* コンテンツが折り返すように設定 */
    justify-content: center;
    gap: 20px;
  }

  .snsLinks {
    width: calc(100% - 30px);
    margin: 40px auto 10px;
  }

  .snsLinks ul {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ピックアップスライダーの幅を調整 */
  .pickup-slider.swiper-instance {
    width: 90%;
    max-width: none;
  }

}

/* スマホ横向き（画面の高さが低い）時の表示調整 */
@media (max-height: 500px) and (orientation: landscape) {
  .floating-search-toggle {
    height: 38px;
  }
}

/* レスポンシブ対応 (画面幅が768px以下の場合) */
@media (max-width: 830px) {
  .mokutekiSection>ul {
    /* 2列に変更 */
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .adContainer ul {
    grid-template-columns: repeat(2, 1fr);
    padding: 0px 18px;
  }

  .kooriTownLinks {
    width: 100%;
  }

  section.relatedLinksSection h2,
  .eventCalendarContainer h2,
  section.kooriTownSection h2 {
    flex-direction: column;
    margin-left: 0;
    align-items: center;
  }

  section.kooriTownSection h2::after {
    width: 86px;
    height: 25px;
    margin: 13px 0px 0px;
  }

  .eventCalendarContainer h2::after {
    width: 220px;
    height: 25px;
    margin: 13px 0px 0px;
  }

  section.relatedLinksSection h2::after {
    width: 66px;
    height: 25px;
    margin: 13px 0px 0px;
  }

  .kohoJinko {
    width: calc(100% - 30px);
    flex-direction: column;
    margin: 0 auto;
  }

  .kohoLinks {
    column-gap: 15px;
  }

  .kohoLinks>ul {
    width: 100%;
  }

  .kohoLinks img {
    width: 140px;
  }

  .jinkoSetai ul li {
    background-position: top left;
    background-size: 66px;
    padding-left: 0;
  }

  .benriService {
    flex-wrap: wrap;
  }

  section.mokutekiSection {
    width: calc(100% - 48px);
  }

  section.mokutekiSection.lifeSection {
    margin-bottom: 36px;
  }

  ul.kooriTownLinks {
    /* width: calc(100% - 96px); */
    flex-wrap: wrap;
    row-gap: 13px;
  }

  .floating-search-toggle {
    height: 38px;
  }

  .floating-search-panel {
    width: calc(100% - 40px);
  }

  .floating-search-container {
    transform: translate(calc(100% - 40px), -50%);
  }

  section.relatedLinksSection .swiper-instance {
    width: calc(100% - 40px);
  }

  /* 重要なお知らせ */
  #top_important {
    margin: 20px auto;
    width: calc(100% - 24px);
  }

  .top_important_list {
    padding: 12px;
  }

  .top_important_list li {
    flex-wrap: wrap;
    margin-bottom: 12px;
    border-bottom: solid 1px gainsboro;
    padding-bottom: 12px;
  }

  .relatedLinksSection0 {
    width: calc(100% - 24px);
    margin: 10px auto 0px;
  }

  .top_tab_detail_list li {
    flex-wrap: wrap;
  }

  .tabIzaContainer {
    padding-bottom: 35px;
  }

  .pickup-slider.swiper-instance {
    width: calc(100% - 24px);
  }

  .eventCalendarContent {
    padding: 0px;
  }

  #top_calendar_detail {
    margin-right: 0px;
  }

  .kohoJinko h3 {
    text-align: center;
    line-height: 1.7;
  }

  .jinkoSetai h3 span {
    display: block;
  }

  .instagramLinks {
    width: calc(100% - 24px);
    margin: 0 auto;
  }

  .instagramTitle {
    flex-direction: column;
    align-items: center;
    row-gap: 12px;
  }

}


span.external_link_text {
  display: none;
}