@charset "utf-8";
:root {
  /* 色 */
  --main-color: #009944;
  --gray-color: #eee;

  /* 文字サイズ */
  --font-42: 4.2rem;
  --font-40: 4.0rem;
  --font-32: 3.2rem;
  --font-24: 2.4rem;
  --font-20: 2rem;
  --main-txt: 1.6rem;
  --font-14: 1.4rem;

  /* 見出しのfont family */
  --heading-ff: 'Zen Old Mincho', serif;

  /* 文字間 */
  --letter-80: 8.0px;
  --letter-40: 4.0px;
  --letter-32: 3.2px;
  --letter-12: 1.2px;
  --letter-10: 1.0px;
  --letter-08: 0.8px;

  /* コンテンツ幅 */
  --contents-w: 1240px;

  /* headerの高さ */
  --header-h: 100px;

  /* 余白 */
  --space-65: 65px;
  --space-45: 45px;
  --space-30: 30px;
  --space-20: 20px;
  @media screen and (max-width: 767px) {
    /* 文字サイズ */
    --font-42: 3.2rem;
    --font-40: 2.8rem;
    --font-32: 2.4rem;
    --font-24: 1.8rem;
    --font-20: 1.6rem;
    --main-txt: 1.5rem;
    --font-14: 1.3rem;

    /* 文字間 */
    --letter-80: 4.0px;
    --letter-40: 2.0px;
    --letter-32: 1.6px;
    --letter-12: 0.6px;
    --letter-10: 0.5px;
    --letter-08: 0.4px;

    /* 余白 */
    --space-65: 45px;
    --space-45: 35px;
    --space-30: 20px;
    --space-20: 15px;
  }
}
/* 色 */
*[data-color="white"] {--var-color: #fff;}
/* *[data-color="green"] {--var-color: var(--main-color);} */
*[data-color="gray"] {--var-color: var(--gray-color);}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  font-family: 'Noto Sans JP','Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
  font-size: var(--main-txt);
  letter-spacing: var(--letter-08);
	line-height: 1.8;
	position: relative;
  @media screen and (max-width: 1279px) {
    width: 1280px;
  }
  @media screen and (max-width: 767px) {
    width: 100%;
  }
  @media print {
    width: 1280px;
    zoom: 0.68;
    -webkit-print-color-adjust: exact;
  }
}
main {padding-top: var(--header-h);}
/* config */
:where(a){color: #000;&:hover {opacity: 0.8;}}
section {position: relative;}

/* スマホメニュー非表示 */
.spNav_btn,.spNav_panel {display: none;}

/* スマホ閲覧時のみ表示 */
.sp_block {display: none;}

@media screen and (max-width: 767px) {
  .sp_block {display: block;}
  .pc_block {display: none;}
}

/* レイアウト */
.container, [class$="container"] {
  max-width: var(--contents-w);
  width: 90%;
  margin-inline: auto;
}

/* ------------------
 各種パーツ
------------------ */
/* ボタン */
.more_btn {
  display: flex;
  justify-content: center;
  height: auto;
  a {
    width: 100%;
    max-width: 300px;
    padding: 0.5em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    background: #fff;
    border-radius: 20px;
    color: var(--var-color, #000);
    &[data-color="white"] {background: var(--main-color);}
    &::after {
      content: '';
      display: block;
      width: 9px;
      min-width: 9px;
      height: 9px;
      aspect-ratio: 1;
      border-top: var(--var-color, var(--main-color)) 2px solid;
      border-right: var(--var-color, var(--main-color)) 2px solid;
      transform: rotate(45deg);
    }
  }
  @media screen and (max-width: 767px) {
    justify-content: center;
  }
}

/* ------------------
 テキスト関連
------------------ */
.link_txt {
  text-decoration: underline;
  &:hover {
    text-decoration: none;
  }
}
.bold_txt {
  font-weight: bold;
}
.center_txt {
  text-align: center;
  img {
    margin-inline: auto;
  }
}
.right_txt {
  text-align: end;
  img {
    margin-inline: auto 0;
  }
}

/* ------------------
 見出し関連
------------------ */
/* 見出し */
.cmn_heading {
  font-size: var(--font-40);
  font-weight: 400;
  letter-spacing: var(--letter-80);
  color: var(--var-color, #000);
  padding-bottom: 0.5em;
  font-family: var(--heading-ff);
}

/* ------------------
 リスト、インデント関連
------------------ */
/* インデント */
.indent_txt,
.indent_lists li {
  text-indent: -1em;
  padding-left: 1em;
}
/* 先頭「・」のリスト */
.bullet_lists {
  li::before {
    content: '・';
  }
}

/* ------------------
 header
------------------ */
.header {
  width: 100%;
  height: var(--header-h);
  padding-inline: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  transition: all .3s;
  @media screen and (max-width: 767px) {
    padding-inline: 10px;
  }
  @media print {
    position: absolute;
  }
}
.hd_logo {
  height: 100%;
  display: flex;
  align-items: center;
  a {
    width: 175px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    font-size: var(--main-txt);
    font-weight: 400;
    & > span {
      display: block;
      width: 100%;
      font-family: var(--heading-ff);
      margin-bottom: -5px;
      white-space: nowrap;
    }
  }
  @media screen and (max-width: 767px) {
    max-width: calc(100% - 80px);
    a > span {margin-bottom: -20px;}
    a > img {
      width: auto;
      height: 40px;
      aspect-ratio: 160 / 53;
    }
  }
}
.gnav {
  height: 100%;
  display: flex;
  align-items: center;
}
.pc_nav--list {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 700;
  @media screen and (max-width: 1150px) {
    display: none;
  }
}
.pc_nav--item {
  & > a {
    position: relative;
    height: var(--header-h);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-inline: 15px;
  }
}
.hd_donation {
  & > a {
    position: relative;
    height: var(--header-h);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 0 0 0 100px;
    background: linear-gradient(90deg, #D4FFB0 0%, #B8F5CB 50%, #46CDD1 100%);
    padding-inline: 40px 15px;
  }
}
.sp_donation {display: none;}

/* ------------------
スマホメニュー
------------------ */
@media screen and (max-width: 1150px) {
  /* ボタン */
  .spNav_btn {
    display: block;position: absolute; width: 50px;height: 50px;padding-top: 25px; background: #93B324;top:0;right: 10px;bottom: 0;margin: auto;transition: all 0.5s;z-index: 1000;color: #fff;font-size: 1.2rem;font-weight: bold;border-radius: 50%;
    span {position: absolute;display: block;height: 3px;background: #fff;margin-inline: auto;}
    
    /* 閉じた状態 */
    &[aria-pressed="false"] span {width: 30px;transition: all 0.5s;margin: auto;}
    &[aria-pressed="false"] span:nth-child(1) {top: 14px;left: 0;right: 0;}
    &[aria-pressed="false"] span:nth-child(2) {top: 0;left: 0;right: 0;bottom: 0;}
    &[aria-pressed="false"] span:nth-child(3) {top: 34px;left: 0;right: 0;}
    
    /* 開いた状態 */
    &[aria-pressed="true"] span {width: 30px;transition: all 0.5s;}
    &[aria-pressed="true"] span:nth-child(1) {top: 45%;transform: translateY(-1.5px) rotate(45deg);left: 11px;}
    &[aria-pressed="true"] span:nth-child(2) {display: none;}
    &[aria-pressed="true"] span:nth-child(3) {bottom: 55%;transform: translateY(1.5px) rotate(-45deg);left: 11px;}
  }

  /* メニューパネル */
  .spNav_panel {
    display: block;
    max-width: 340px;
    width: 85%;
    height: 100vh;
    padding-top: 70px;
    position: fixed;
    top: 0;
    right: 0;
    transition: all 0.5s;
    background: #93B324;
    box-shadow: -8px 0px 8px -1px rgba(0, 0, 0, 0.2);
    overflow: auto;
    z-index: 999;
    /* パネルが閉じている状態 */
    &[aria-hidden="true"] {
      visibility: hidden;
      pointer-events: none;
      transform: translateX(100%);
    }
    /* パネルが開いている状態 */
    &[aria-hidden="false"] {
      visibility: visible;
      transform: translateX(0);
    }
  }
  /* メニューパネル内の項目 */
  .spNav_list {
    width: 100%;
    padding: 0 0 150px;
    font-size: 1.5rem;
  }
  .spNav_list--item {
    border-bottom: 1px solid #fff;
    a {
      display: block;
      padding: 12px 20px;
      color: #fff;
    }
    & > a {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  /* bodyをタッチ不可に */
  #onbody {position: absolute;height: 100%;width: 100%; top: 0;left: 0;background: rgba(0, 0, 0, 0.6);z-index: 8;overflow: hidden;pointer-events: none;}
  body:has(#onbody[aria-hidden="true"]) {height: 100%; overflow: hidden;}

  .sp_donation {
    display: block;
    position: absolute;
    right: 70px;
    a {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 4px;
      font-weight: bold;
      letter-spacing: var(--letter-08);
      border-radius: 90px;
      background: linear-gradient(90deg, #D4FFB0 0%, #B8F5CB 50%, #46CDD1 100%), #11B758;
      padding: 10px 0.75em;
    }
    img {
      width: 20px;
      aspect-ratio: 1;
      transform: translateY(-1px);
    }
  }
}

/* ------------------
 footer
------------------ */
.footer {
  background: radial-gradient(circle at 50% 45%,  #FFFFFF 0%,  #F7FBFC 55%,  #F1F7F8 100%);
}
.ft_inner {
  width: 90%;
  max-width: var(--contents-w);
  margin-inline: auto;
  padding-block: var(--space-65);
  display: flex;
  justify-content: space-between;
  gap: var(--space-30);
}
.ft_address--name {
  font-size: var(--font-20);
  letter-spacing: var(--letter-10);
  font-weight: 700;
  margin-bottom: var(--space-45);
}
.ft_right {
  padding-inline: 3em;
  border-inline: 1px solid var(--main-color);
  @media screen and (max-width: 767px) {
    display: none;
  }
}
.ft_right--item > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  &::before {
    content: '';
    display: block;
    width: 9px;
    min-width: 9px;
    height: 9px;
    aspect-ratio: 1;
    border-top: var(--main-color) 2px solid;
    border-right: var(--main-color) 2px solid;
    transform: rotate(45deg);
  }
  &:hover {text-decoration: underline;}
}
.copyright {
  width: 100%;
  padding: 0.2em 5%;
  background: var(--main-color);
  text-align: center;
  small {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    font-size: var(--font-14);
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #fff;
  }
  a {
    padding-left: 5px;
  }
  img {
    width: auto;
    height: 14px;
    transform: translateY(0.15em);
    display: inline;
  }
  @media screen and (max-width: 767px) {
    small {
      display: inline-block;
      line-height: 1.5;
    }
    a {
      padding-left: 0;
    }
  }
}

/* ------------------
  Backtop
------------------ */
#backtop {
  position: fixed;
  display: block;
  width: 50px;
  height: 50px;
  right: calc(3% + 32px);
  bottom: 50px;
  border-radius: 50%;
  background: rgba(50,50,50,0.9);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
  z-index: -10;
  &::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-25%) rotate(-45deg);
    top: 50%;
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  &.active {
    opacity: 0.6;
    visibility: visible;
    z-index: 50;
  }
  @media print {
    display: none;
  }
}

/* ------------------
下層ページ共通
------------------ */
/* パンくずリスト */
.breadcrumb {
  width: 100%;
  padding: 0.5em 0;
  margin: 0 auto var(--space-65);
  @media screen and (max-width: 767px){
    padding: 0;
  }
}
.breadcrumb_container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 15px;
  @media screen and (max-width: 767px){
    width: 100%;
    padding: 0 5%;
    flex-wrap: nowrap;
    gap: 5px 10px;
    line-height: 3;
    white-space: nowrap;
    overflow-x: auto;
  }
}
.breadcrumb_item:has(a[href]) {
  display: flex;
  align-items: center;
  gap: 0 15px;
  &::after {
    content: "";
    display: inline-block;
    height: 8px;
    width: 8px;
    border-top: 1px solid var(--main-color);
    border-right: 1px solid var(--main-color);
    transform: rotate(45deg);
  }
  @media screen and (max-width: 767px) {
    gap: 5px 10px;
  }
}
.breadcrumb_item a {
  text-decoration: underline;
  &:hover {text-decoration: none;}
}

/* ページタイトル */
.page_mv {
  position: relative;
  width: 100%;
  height: 326px;
  @media screen and (max-width: 767px) {
    height: 220px;
  }
}
.page_mv--img {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    border-radius: 0 500px 0 0;
    background: linear-gradient(90deg, rgba(184, 245, 203, 0.50) 0%, rgba(45, 199, 165, 0.50) 50.48%, rgba(70, 205, 209, 0.50) 100%), rgba(255, 255, 255, 0.75);
    width: 64%;
    max-width: 913px;
    height: 200px;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media screen and (max-width: 767px) {
    &::before {
      width: 95%;
      height: 130px;
    }
  }
}
.page_mv--title {
  position: absolute;
  inset: auto 0 70px 0;
  margin: auto;
  max-width: var(--contents-w);
  width: 90%;
  height: max-content;
  font-size: var(--font-40);
  letter-spacing: var(--letter-80);
  font-weight: 400;
  font-family: var(--heading-ff);
  z-index: 1;
  @media screen and (max-width: 767px) {
    bottom: 45px;
  }
}

/* ウェブページ専用outer */
.page_body {
  padding-bottom: calc(var(--space-65) * 1.5);
}
/* リード文 */
.lead_txt {
  margin-bottom: var(--space-45);
}
/* 3カラム（画像） */
.columnLists_three {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-20);
}
.columnLists_three--item {
  width: calc(100%/3 - 40px/3);
  img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
  }
  @media screen and (max-width: 767px) {
    width: calc(50% - 7.5px);
  }
}
/* 「思い出の写真展」非表示文 */
.schedule_txt {
  font-size: var(--font-32);
  letter-spacing: var(--letter-32);
  font-weight: bold;
  text-align: center;
}

@media screen and (min-width: 768px) {
/* PCの場合はtelリンクを無効 */
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
@page {
  size: A4;
  margin: 5px;
}