@charset "utf-8";

/*====================================================================================================
  WHOLE
====================================================================================================*/
:root {
  --header-height: 100px;
  --content-margin: clamp(53px, 4.2vw + 37px, 80px); /* pc:80px 381px以下で約2/3 */

/* ベースカラー */
	--color-base: #fff;
	--color-font: #333;

/* テーマカラー */
  --color-heading: #4A2C17;
	--color-primary: #EFF08C;
	--color-secondary: #FAF8D7;
	--color-brown: #6C4322;
  --color-beige: #CAAC76;
  --color-orange: #EBCD42;
  --color-pink: #FBD0D8;

/* 関数*/
  --header-top: clamp(30px, calc(18.57px + 1.12vw), 40px); /* 1024px:30px, 1920px:40px */
}

* { margin: 0; padding: 0;}
html { scroll-behavior: smooth;	font-size: 16px;}
body {
	margin: 0;
	padding: 0;
	font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: clamp(1rem, 0.8rem + 0.5vw, 1.125rem); /* 最小 16px, 最大 18px */
  color: var(--color-font);
	line-height: 1.8;
	font-weight: 500; /* midium */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, th, strong { font-weight: 700;}
h2 {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-style: normal;
}
ul { list-style: none;}

img { width: 100%; height: auto; vertical-align: bottom; border: none;}

.pc {display:block;}
.tb { display: none;}
.sm {display:none;}

[id] { scroll-margin-top: var(--header-height);}

@media only screen and (min-width: 1024px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
	}
}
a { color: var(--color-font);}
a:hover { color: var(--color-brown);}

/*====================================================================================================
  #BASE
====================================================================================================*/
#base {
  width: 100%;
  position: relative;
  padding-top: var(--header-top);
  background-color: var(--color-base);
}

/*====================================================================================================
  #HEADER
====================================================================================================*/
#header {
  top: var(--header-top);
  width: 100%;
  position: absolute;
  pointer-events: none;
  z-index: 99999;
}
#header a { text-decoration: none;}
#header a:hover { color: var(--color-brown);}

/*---------------------------------------------------------------------------
  .logo
---------------------------------------------------------------------------*/
#header .logo_wrap {
  width: 96%;
  max-width: 2400px;
  margin: 0 auto;
  pointer-events: none;
}
#header .logo {
  width: clamp(320px, 106px + 20.87vw, 507px); /* 1024px:320px, 1920px:507px */
  aspect-ratio: 507 / 125;
  height: auto;
  margin: 0;
  pointer-events: auto;
  background-color: #fff;
  clip-path: url(#logo-shape);
  background-image: url(../image/logo-bg.svg);
  -webkit-clip-path: url(#logo-shape); /* Safari対応 */
  padding: clamp(10px, 1vw, 15px) clamp(16px, 2vw, 30px) clamp(12px, 1.5vw, 20px) clamp(10px, 1vw, 15px);
  transform: scale(1.01);  /* 画面幅可変時の隙間予防 */
}
#header .logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-font)
}
#header .logo img {
  width: clamp(70px, 13px + 6.5vw, 140px); /* 1024px:70px,1920px:140px */
  height: auto;
}
#header .logo_type {
  font-size: clamp(0.875rem, 0.37rem + 0.78vw, 1.3125rem); /* 1024px:14px,1920px:21px */
}

/*---------------------------------------------------------------------------
  .h_nav
---------------------------------------------------------------------------*/
#header #h_nav_sm { display: none;}
#header .h_nav {
  position: fixed;
  top: var(--header-top);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 96%;
  max-width: 2400px;
  height: 80px;
  z-index: 999;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
}
/* ---　.h_navスクロール時　--- */
#header .h_nav.is-scrolled {
  top: 0; 
}
#header .h_nav.is-scrolled #nav {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

#header:has(.h_nav.is-scrolled) .logo_wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 96%;
  max-width: 2400px;
  height: 70px;
  z-index: 999;
  pointer-events: none;
}

#header:has(.h_nav.is-scrolled) .logo_wrap .logo {
  position: absolute;
  margin-top: clamp(5px, -12.14px + 1.67vw, 20px); /* 1024px:5px, 1920px:20px */                 
  left: 2%;                   
  width: auto;                /* PC通常時の固定幅(clamp)解除 */
  height: auto;               /* PC通常時のアスペクト比解除 */
  background-image: none;
  clip-path: none;
  -webkit-clip-path: none;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  padding: 10px 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
}

#header:has(.h_nav.is-scrolled) .logo_wrap .logo img {
  width: 100px; 
}
#header:has(.h_nav.is-scrolled) .logo_wrap .logo_type {
  font-size: 0.95rem;
  font-weight: 700;
}

#header #nav {
  margin-top: clamp(5px, -12.14px + 1.67vw, 20px); /* 1024px:5px, 1920px:20px */
  margin-right: 2%;
  width: fit-content;
  height: clamp(60px, 37px + 2.23vw, 80px); /* 1024px:60px, 1920px:80px */
  border-radius: clamp(10px, -1.4px + 1.12vw, 20px);
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding-inline: clamp(1rem, -1.38rem + 3.72vw, 2.5rem); /* 1024px:16px, 1920px:40px */
  pointer-events: auto;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#header .h_nav ul {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, -1.36rem + 4.46vw, 4rem); /* 1024px時:24px 〜 1920px時:64px */
  padding: 0;
  margin: 0;
}
#header .h_nav ul li {
  line-height: clamp(60px, 37px + 2.23vw, 80px);
  font-size: clamp(1.125rem, 0.696rem + 0.67vw, 1.5rem); /* 1024px:16px、1920px:24px */
  font-weight: 700;
}

/*====================================================================================================
  #MAIN_CONTENT
====================================================================================================*/
#main_content { width: 100%; margin: 0; padding: 0;}

/* --------------------------------------------------------------------------
  .news_erea（index.html,news.html共通） 
-------------------------------------------------------------------------- */
#main_content .news_wrap {
  width: 100%;
  max-width: 1120px;
  padding-inline: 3%;
  margin: 0 auto;
  background: #fff;
  border-radius: 30px;
  border: 4px solid var(--color-beige);
  padding: 48px 20px 60px;
}
#main_content .news_wrap p {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: 24px;
}
#main_content .news_area_tab input[type="radio"] { display: none;}

/* 選択されたカテゴリーがアクティブな時
cat0:すべて
cat1:会館
cat2:福協
cat3:若葉
cat4:女性
cat5:子ども
cat6:防犯
cat7治安 */
#cat0:checked ~ label[for="cat0"],
#cat1:checked ~ label[for="cat1"],
#cat2:checked ~ label[for="cat2"],
#cat3:checked ~ label[for="cat3"],
#cat4:checked ~ label[for="cat4"],
#cat5:checked ~ label[for="cat5"],
#cat6:checked ~ label[for="cat6"],
#cat7:checked ~ label[for="cat7"] {
  background-color: var(--color-pink);
}
#main_content .news_area {
	& input:is(#cat0, #cat1, #cat2, #cat3, #cat4, #cat5, #cat6, #cat7, #cat8) { display: none;}
}
#main_content .news_area_tab:has(input#cat1:checked) ~ .news_list li:not(.cat1),
#main_content .news_area_tab:has(input#cat2:checked) ~ .news_list li:not(.cat2),
#main_content .news_area_tab:has(input#cat3:checked) ~ .news_list li:not(.cat3),
#main_content .news_area_tab:has(input#cat4:checked) ~ .news_list li:not(.cat4),
#main_content .news_area_tab:has(input#cat5:checked) ~ .news_list li:not(.cat5),
#main_content .news_area_tab:has(input#cat6:checked) ~ .news_list li:not(.cat6),
#main_content .news_area_tab:has(input#cat7:checked) ~ .news_list li:not(.cat7) {
	display:none;
}

/* カテゴリータブ */
#main_content .news_area_tab {
	display: grid; 
	grid-template-columns: repeat(8, auto);
  justify-items: center;
  margin-bottom: 40px;
}
#main_content .news_area_tab label {
  width: fit-content;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-brown);
  background-color: #ffffff;
  border: 2px solid var(--color-brown);
  border-radius: 15px;
  box-shadow: 1px 5px 0 #5b3e2b;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}
#main_content .news_area_tab label:active {
  /* 影の分（px）だけ下に移動 */
  transform: translateY(4px);
  /* 影を消して押し込んだように */
  box-shadow: 0 0 0 #5b3e2b;  
  /* 押す時はぽよんとならず沈む */
  transition: transform 0.05s, box-shadow 0.05s;
}
#main_content .news_area_tab label:hover {
  background: var(--color-pink);
}

#main_content .news_area ul {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
  margin-bottom: 40px;
  gap: 1rem;
}
#main_content .news_area ul > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#main_content ul.news_list li {
  padding: 1rem 2rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-areas:
    "day category"
    "link_file link_file"
    "txt txt";
  row-gap: 0.8rem;
  column-gap: 1.5rem;
  background: #FDF8EE;
  border-radius: 20px;
  border: 1px solid var(--color-heading);
  filter: drop-shadow(0 2px 2px rgba(142,142,142,0.25));
	}
#main_content .news_list li .day {
  grid-area: day;
  align-self: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 2em;
}
#main_content .news_list li .category {
  grid-area: category;
  width: fit-content;
  padding: 0.2rem 1.8rem;
  text-align: center;
  font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
  background: #fff;
  font-weight: 700;
  border-radius: 20px;
  border: 2px solid var(--color-heading);
  color: var(--color-heading);
}
/* リンクファイル */
#main_content .news_list li .link_file {
  grid-area: link_file;
  font-weight: 700;
  font-size: 20px;
}
#main_content .news_list li .link_file a {
  color: var(--color-font);
}
#main_content .news_list li .link_file img {
  padding-right: 10px;
}

#main_content .news_list :is(.link-file, .text):empty {	display:none;}
#main_content .news_list li .txt { grid-area: txt;}
/* トップページだけ10件表示 */
#toppage .news_list li:nth-child(n+11) {
  display: none !important;
}

/*---------------------------------------------------------------------------
  .btn_brown（index.html,news.html共通） 
---------------------------------------------------------------------------*/
#main_content ul.nendo_list li a {
  display: inline-flex; /* width: fit-content は不要なので削除 */
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  background-color: var(--color-brown);
  border: 2px solid var(--color-brown);
  border-radius: 15px;
  box-shadow: 0 5px 0 var(--color-beige); /* 押し込みを真っ直ぐにするため X軸を0に調整 */
  /* transitionのブレンド用（borderやbackgroundの変化も滑らかに） */
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              background-color 0.3s,
              border-color 0.3s,
              color 0.3s;
  gap: 12px;
}

#main_content ul.nendo_list li a::after {
  content: "";
  width: 17px;
  height: 13px;
  background-color: currentColor; 
  -webkit-mask: url(../image/link-btn-arrow.svg) no-repeat center / contain;
  mask: url(../image/link-btn-arrow.svg) no-repeat center / contain;
}

/* ホバー時は a:hover のみにまとめる */
#main_content ul.nendo_list li a:hover {
  color: var(--color-brown);
  background-color: var(--color-primary);
  border-color: var(--color-primary); /* 枠線も背景に合わせる（お好みで） */
}

#main_content ul.nendo_list li a:active {
  transform: translateY(5px); /* 影の縦幅（5px）に合わせて沈める */
  box-shadow: 0 0 0 var(--color-beige); /* 元の影の色で消すのが自然 */  
  transition: transform 0.05s, box-shadow 0.05s;
}

/*---------------------------------------------------------------------------
  .nendo_list（index.html,news.html共通） 
---------------------------------------------------------------------------*/
#main_content ul.nendo_list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
  justify-content: center;
	}
#subpage .nendo_list table[align="center"] {
  width: 100%;
  text-align: center;
}

/*====================================================================================================
  #FOOTER
====================================================================================================*/
#footer a { text-decoration: none; color: var(--color-base);}
#footer a:hover { opacity: 0.85;}
#footer {
  clear:both;
  width: 100%;
  background: var(--color-heading);
  padding-block: var(--content-margin) 30px;
}
#footer .footer_wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 1.6%;
}
#footer .footer_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: #fff;
  margin-bottom: 2rem;
}
#footer .logo {
  width: 200px;
  height: auto;
  margin-bottom: 1rem;
}
#footer .logo img {
  width: 100%;
  height: auto;
}
#footer .logo_mark {
  width: 140px;
  height: 80px;
}
#footer .logo_type {
  font-size: 1.3333rem;
  font-weight: 600;
  line-height: 2;
}
#footer .address {
  line-height: 2;
}

#footer .footer_inner_r {
  align-self: center;
}
#footer #nav ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-size: 1.3333rem;
  font-weight: 600;
  line-height: 1;
}
#footer #nav a {
  color: #fff;
}

#footer .site_concept {
  font-size: 16px;
  color: var(--color-beige);
  margin-bottom: 30px;
}

#footer .tel_no {
  display: inline-flex;
  align-items: center;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 2px; /* 少し文字間をあけて見やすく */
}
#footer a.tel_no {
  color: #fff;
}
/* --------------------------------------------------------------------------
  .copyright
-------------------------------------------------------------------------- */
#footer .copyright  {
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
  #PAGETOP
-------------------------------------------------------------------------- */
#page-top {
  position: fixed;
  right: 100px;
  bottom: 100px;
  z-index: 99;
  opacity: 0;
  transform: translateY(100px);
  pointer-events: none;
}

#page-top.LeftMove { 
  animation: UpAnime 0.5s forwards;
  pointer-events: auto;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#page-top.RightMove { 
  animation: DownAnime 0.5s forwards;
  pointer-events: none;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100px);
  }
}

#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: var(--color-brown);
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
  color: transparent;
  font-size: 0;
}

#page-top a::after {
  content: "";
  display: block;
  width: 28px;
  height: auto;
  aspect-ratio: 28 / 21;
  
  /* ↓ SVGをマスク */
  background-color: #fff;
  -webkit-mask-image: url(../image/link-btn-arrow.svg);
  mask-image: url(../image/link-btn-arrow.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transform: rotate(-90deg);
}

#page-top a:hover {
  background-color: var(--color-beige);
  transform: translateY(-5px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}