@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  line-height: 1.7;
  letter-spacing: 0.06em;
  font-family: "Zen Maru Gothic", sans-serif;
}
:root {
  --green: #33513e;
  --white: #fff;
  --gray: #f7f7f7;
  --black: #333;
  --brown: #913c0e;
}
h1,
h2,
h3 {
  line-height: 1;
}
img {
  width: 100%;
  vertical-align: bottom;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
  font-family: "Zen Maru Gothic", sans-serif;
}
p {
  text-align: justify;
}
/* ************* 初期設定リセット *********************************************** */
/* ***** 共通部分 ******************************** */
.SP {
  display: block;
}
.PC {
  display: none;
}
.noto-sans-uniquifier {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.yomogi-regular {
  font-family: "Yomogi", cursive;
  font-weight: 600;
  font-style: normal;
}
section {
  width: 85vw;
  margin: 0 auto 100px;
}
.title_deco_green {
  width: 80px;
  margin: 0 auto 10px;
}
.title_text {
  text-align: center;
  font-size: 36px;
  color: var(--green);
  margin-bottom: 20px;
}
.btn,
.btn_back,
.btn_vanilla {
  display: block;
  width: 300px;
  height: 40px;
  background-color: var(--green);
  color: var(--white);
  text-align: center;
  align-content: center;
  font-weight: 600;
  border-radius: 20px;
  margin: 0 auto;
  position: relative;
}
.btn:hover,
.btn_back:hover,
.btn_vanilla:hover {
  background-color: var(--black);
}
.btn::after {
  content: "➝";
  color: var(--white);
  position: absolute;
  right: 10px;
}
.btn_back::before {
  content: "←";
  color: var(--white);
  position: absolute;
  left: 10px;
}
.naminami_section {
  margin-bottom: 0;
}
.naminami_reverse {
  transform: scaleY(-1);
  margin-bottom: 100px;
}
.naminami_inner {
  width: 85vw;
  margin: 0 auto;
  padding: 70px 0;
}
.nami_green {
  margin-bottom: -1px;
}
.thumbnail {
  width: 100%;
  margin: 0 auto 20px;
  padding-bottom: 20px;
}
.thumbnail p {
  margin-bottom: 80px;
  padding-top: 10px;
}
.thumbnail img {
  width: 100%;
  height: 35vh;
  object-fit: cover;
  border-radius: 20px;
}
.material-symbols-outlined.add_bg {
  display: grid;
  place-content: center;
  font-size: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--green);
  z-index: 50;
  border: 1px solid var(--gray);
}
.underline {
  border-bottom: 1px solid var(--black);
}
.underline.white {
  border-bottom: 1px solid var(--white);
}
.bold {
  font-weight: 600;
}

@media (width>767px) {
  .SP {
    display: none;
  }
  .PC {
    display: block;
  }
  section {
    margin: 0 auto 200px;
  }
  .material-symbols-outlined.add_bg.mail_icon {
    display: none;
  }
  .material-symbols-outlined.add_bg {
    font-size: 28px;
    width: 30px;
    height: 30px;
  }
  .thumbnail {
    position: relative;
    margin-bottom: 80px;
  }
  .thumbnail img {
    height: 60vh;
  }
  .thumbnail p:first-child {
    position: absolute;
    top: 50px;
    left: 0;
    background-color: var(--white);
    padding: 5px 20px;
  }
  .thumbnail p:nth-child(2) {
    position: absolute;
    top: 100px;
    left: 0;
    background-color: var(--white);
    padding: 5px 20px;
  }
  .thumbnail p:nth-child(3) {
    position: absolute;
    top: 150px;
    left: 0;
    background-color: var(--white);
    padding: 5px 20px;
  }
  .flex_wrap {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  .direction_wrap {
    display: flex;
    flex-direction: column-reverse;
  }
  .title_text {
    margin-bottom: 40px;
  }
}
/* section[id] {
  scroll-margin-top: 90px; 
} */
/* ***** header ********************************* */
header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: var(--white);
  box-shadow: rgba(51, 51, 51, 0.1) 0 0 5px;
  position: fixed;
  z-index: 9999;
}
.logo {
  width: 150px;
}
/*=============================
.btn_trigger  ハンバーガー
=============================*/
.btn_trigger {
  position: relative;
  width: 30px;
  height: 24px;
  cursor: pointer;
}
.btn_trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgb(171 171 171);
  border-radius: 4px;
}
.btn_trigger,
.btn_trigger span {
  display: inline-block;
  transition: all 0.5s;
  box-sizing: border-box;
}
.btn_trigger span:nth-of-type(1) {
  top: 0;
}
.btn_trigger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}
.btn_trigger span:nth-of-type(3) {
  bottom: 0;
}
#btn17::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  width: 84px;
  height: 84px;
  margin: -45px 0 0 -45px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0);
  transition: all 0.75s;
}
#btn17.active span:nth-of-type(1) {
  -webkit-transform: translateY(0px) rotate(45deg);
  transform: translateY(0px) rotate(45deg);
}
#btn17.active span:nth-of-type(2) {
  left: 60%;
  opacity: 0;
  -webkit-animation: active-btn17-bar02 0.8s forwards;
  animation: active-btn17-bar02 0.8s forwards;
}
@-webkit-keyframes active-btn17-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-btn17-bar02 {
  100% {
    height: 0;
  }
}
#btn17.active span:nth-of-type(3) {
  -webkit-transform: translateY(-22px) rotate(-45deg);
  transform: translateY(-22px) rotate(-45deg);
}
#btn17.active::after {
  border: 4px solid #fff;
}

/* ナビゲーションの初期状態（隠しておく） */
.g_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 1);
  z-index: 99; /* ふわっとさせるための設定 */
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}
/* ボタンが active になった時のナビゲーションの状態 */
.g_nav.active {
  opacity: 1;
  visibility: visible;
}
/* メニュー内のレイアウト（中央寄せなどはお好みで） */
.g_nav ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0;
}
.g_nav li {
  margin: 10px 0;
  width: 100%;
  text-align: center;
}
.g_nav li a {
  font-size: 18px;
  font-weight: 500;
}
/* ボタンをメニューより手前に出す */
.btn_trigger {
  z-index: 100;
}
/* +- btn */
.has_child a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.icon_plus_minus {
  position: relative;
  width: 10px;
  height: 10px;
}
/* プラスの縦線・横線共通 */
.icon_plus_minus::before,
.icon_plus_minus::after {
  content: "";
  position: absolute;
  background-color: #000;
  transition: 0.3s ease;
}
/* 横線 */
.icon_plus_minus::before {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
/* 縦線 */
.icon_plus_minus::after {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
/* マイナスに変わるクラス */
.icon_plus_minus.active::after {
  transform: translateX(-50%) rotate(90deg); /* 90度回転して重なる */
  opacity: 0; /* 非表示にしてマイナスに */
}
.g_nav li a span.material-symbols-outlined {
  margin-left: 4px;
  display: inline-grid;
  place-content: center;
  width: 1.2em;
  height: 1.2em;
  font-size: 16px;
  font-variation-settings:
    "wght" 300,
    "opsz" 20;
}
/* サブメニュー自体の設定 */
.sub_menu {
  display: none;
  width: 100%;
}
.sub_menu li {
  margin: 0;
}
.sub_menu li:nth-child(odd) {
  background-color: rgba(57, 83, 13, 0.1);
}
.sub_menu li a {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 0.9em;
  padding: 10px 0;
  display: block;
}
/* --- 6. PCサイズのスタイル --- */
@media (width>1350px) {
  /* ハンバーガーボタンを隠す */
  .btn_trigger {
    display: none;
  }
  /* ナビゲーションを横並びにする */
  .g_nav {
    position: static;
    width: auto;
    height: auto;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
    display: block;
  }
  .g_nav ul {
    flex-direction: row;
    justify-content: flex-end;
    height: auto;
    gap: 30px;
  }
  .g_nav li {
    width: auto;
    margin: 0;
    position: relative;
  }
  .g_nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    transition: color 0.3s ease;
  }
  .g_nav li a.material-symbols-outlined {
    margin: 0;
    display: block;
    font-size: 18px;
    transform: translateY(1px);
  }
  .add_border {
    border: 1px solid #333;
    padding: 10px;
  }
  .g_nav li a:hover,
  .has_child:hover > a {
    color: var(--green);
    font-weight: 900;
  }
  /* --- ホバーで「だららっ」と出す設定 --- */
  .has_child:hover .sub_menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .sub_menu {
    display: none;
    position: absolute;
    top: 150%;
    left: 0%;
    transform: translateX(-50%) translateY(20px);
    width: 170px;
    background-color: var(--white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 0;
    z-index: 1000;
    transition: all 0.1s ease;
  }
  .sub_menu li {
    text-align: left;
  }
  .sub_menu li:nth-child(odd) {
    background-color: transparent;
  }
  .sub_menu li a {
    padding: 10px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--gray);
    transition: background 0.2s;
    color: var(--black);
  }
  .sub_menu li:last-of-type a {
    border-bottom: none;
  }
  .sub_menu li a:hover {
    background-color: var(--gray);
    color: var(--green);
    padding-left: 25px;
  }
}
.pc_fixed_btns {
  display: none;
}
@media (width>767px) {
  .pc_fixed_btns {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
    pointer-events: none;
  }
  /* --- 右側固定ボタンの親コンテナ --- */
  .pc_fixed_btns.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: fixed;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
  }
  /* --- ボタン共通スタイル（縦書き） --- */
  .fixed_btn {
    writing-mode: vertical-rl;
    padding: 50px 10px;
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-align: center;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
    border: 1px solid var(--white);
  }
  /* お問い合わせボタン：個別設定 */
  .btn_contact,
  .btn_emi {
    background-color: var(--green);
  }
  .btn_contact:hover,
  .btn_emi:hover {
    background-color: var(--black);
  }
}

/* ***** footer ******************************* */
footer {
  background-color: var(--green);
  color: var(--white);
}
.footer_wrap {
  width: 85vw;
  margin: 0 auto;
}
.footer_wrap .title_wrap h2 {
  color: var(--white);
}
.footer_logo {
  width: 40vw;
  padding: 40px 0;
}
.footer_nav {
  padding-bottom: 40px;
}
/* 余計な隙間をリセット */
.footer_nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer_nav li {
  margin-bottom: 0; /* 10pxの隙間をリセット */
}
.footer_nav a {
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 0; /* クリックしやすくするための余白 */
}
.footer_nav a span {
  transform: scale(0.8);
}
/* TO TOPとお問合せボタンの追従 ************************* */
.index_footer {
  position: relative;
  padding-top: 70px;
}
.icon_footer {
  position: fixed;
  bottom: 10px;
  right: 10px;
  gap: 5px;
  z-index: 100;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
.material-symbols-outlined.add_bg {
  font-size: 40px;
  width: 50px;
  height: 50px;
}
.icon_footer.is-show {
  opacity: 1;
  visibility: visible;
  position: fixed;
  right: 15px;
  bottom: 20px;
}
.icon_footer.is-stopped {
  position: absolute;
  bottom: calc(10vh + 20px);
}
.copy {
  display: flex;
  width: 100%;
  height: 10vh;
  background-color: var(--black);
  color: var(--white);
  justify-content: center;
  align-items: center;
  position: relative;
}
@media (width>1350px) {
  .icon_footer {
    bottom: 20px;
    right: 20px;
  }
  .material-symbols-outlined.add_bg {
    font-size: 49px;
    width: 49px;
    height: 49px;
  }
  .index_footer_container {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
  .thumbnail.town_map {
    background-color: var(--white);
    border-radius: 20px;
    padding: 0;
  }
  .thumbnail.town_map img {
    object-fit: contain;
    height: 80vh;
    max-height: 640px;
  }
}
@media (width>767px) {
  .footer_logo {
    width: 15vw;
    padding: 5vh 0 0;
  }
  .footer_nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* カラム間の横の隙間 */
    align-items: start;
    padding: 5vh 0;
  }
  .footer_nav ul {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 縦の項目間の隙間をここでコントロール */
    margin: 0;
    padding: 0;
  }
  .footer_nav ul li ul {
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    padding-left: 0; /* 子要素のulのインデントをリセット */
  }
}

/* ***** main ********************************* */
main {
  padding-top: 82.8px;
}
/* fv *******************************************/
.fv {
  position: relative;
  width: 100%;
  height: calc(100vh - 82.8px);
  overflow: hidden;
  background-color: #eee;
  margin-bottom: 40px;
}
.fv_copy {
  width: 70vw;
  max-width: 450px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fv_inner {
  width: 100%;
  height: 100%;
  filter: brightness(0.85);
}
.fv_inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: 3s ease-in-out;
}
.fv_inner img.active {
  opacity: 1;
}
@media (width>767px) {
  .fv {
    margin-bottom: 100px;
  }
}

/* news *****************************************/
.news {
  width: 90vw;
}
.news01 {
  background: url(../img/news/news1.webp) no-repeat center/cover;
}
.news02 {
  background: url(../img/news/news2.webp) no-repeat center/cover;
}
.news03 {
  background: url(../img/news/news3.webp) no-repeat center/cover;
}
.splide__slide {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 20px;
  margin-right: 10px;
  padding: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.splide {
  background: var(--white);
  padding: 0 0 40px;
}
.splide__pagination__page.is-active {
  background: var(--green);
}
.splide__arrow {
  height: 4em;
  width: 4em;
  border: 1px solid var(--gray);
  background: var(--white);
  opacity: 1;
}
.splide.is-initialized,
.splide.is-rendered {
  margin-bottom: 20px;
}
.splide__arrow svg {
  fill: var(--black);
}
/* 独自の矢印アイコンの設定 */
.splide__arrow {
  display: none;
}
/* ホバー時の効果（必要であれば） */
/* .splide__arrow:hover {
  opacity: 0.7;
} */
.card {
  width: 95%;
  height: 45%;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}
.card p {
  font-weight: 600;
  line-height: 1em;
  margin-bottom: 5px;
}
.card_title {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 2行で「...」が出る */
  overflow: hidden;
}
/* スライダー全体の横幅制限を解除（必要に応じて調整してください） */
@media (width > 767px) {
  .news {
    width: 100%;
  }
  .news .splide {
    max-width: 100%; /* 40%から100%に変更して横いっぱいに表示 */
    margin: 0 auto;
  }
}

/* where ******************************************/
#where {
  padding-bottom: 53px;
}
.where_container {
  width: 80vw;
  margin: 0 auto;
  padding: 0 5vw;
  position: relative;
  z-index: 0;
}
.where_container::before {
  content: "";
  width: 110%;
  height: 110%;
  border: 1px solid rgba(51, 51, 51, 0.25);
  position: absolute;
  top: -30px;
  left: -16px;
  z-index: -1;
}
#where .title_wrap {
  text-align: center;
  position: relative;
  z-index: 2;
}
.title_text.need_border {
  display: inline-block;
  background-color: #fff;
  position: relative;
  z-index: 1;
  padding: 0 5px;
}
.hokkaido_box {
  position: relative;
  margin-bottom: 20px;
  padding-top: 10px;
}
.hokkaido_text {
  position: absolute;
  top: 25px;
  right: -20px;
  font-size: clamp(15px, 0.94vw + 11.48px, 25px);
  font-weight: 600;
  color: var(--brown);
  background-color: var(--white);
}
.where_text_box p {
  margin-bottom: 20px;
}
.where_text_box p:last-child {
  margin-bottom: 0;
}
.where_text_box p:first-child {
  padding-top: 10px;
}
@media (width>767px) {
  .where_container {
    display: flex;
    align-items: center;
    gap: 50px;
  }
  .where_container::before {
    content: "";
    width: 100%;
    height: 130%;
    top: -60px;
    left: 0px;
  }
  .hokkaido_box {
    width: 50%;
  }
  .hokkaido_text {
    top: 40px;
    right: -20px;
    /* font-size: 25px; */
  }
  .where_text_box {
    width: 50%;
  }
}
/* recommend *****************************************/
.rec_img_container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

/* 画像を囲む枠（box）の設定 */
.rec_img_box {
  flex: 1; /* 3つを均等な幅にする */
  height: 230px; /* 高さを固定 */
  border-radius: 20px;
  overflow: hidden; /* 画像が角丸からはみ出るのを防ぐ */
}

/* 中の画像（img）を枠いっぱいに広げる設定 */
.rec_img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 縦横比を維持したまま枠を埋める */
  display: block;
}
.rec_sub_title {
  border: 1px solid var(--black);
  border-left: none;
  border-right: none;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 20px;
}
.rec_text_box {
  margin-bottom: 15px;
}
.rec_text_title {
  background-color: var(--green);
  color: var(--white);
  text-align: center;
  font-weight: 500;
  margin-bottom: 5px;
  padding: 5px 0;
}
@media (width>767px) {
  #recommend {
    width: 65vw;
  }
  .rec_img_container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }
  .rec_img_box {
    flex: 1;
    height: 60vh;
  }
  .rec_img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
  }
  #recommend .flex_wrap {
    gap: 30px;
  }
  .rec_text_box {
    flex: 1;
  }
  .rec_sub_title {
    padding: 15px 0;
  }
}
/* sightseeing */
#sightseeing,
#emigration {
  width: 100%;
  background-color: var(--gray);
}
.biseki_container {
  margin-bottom: 40px;
  padding-top: 10px;
  position: relative;
}
.biseki_icon {
  width: clamp(48.75px, 0.83vw + 45.63px, 57.6px);
  opacity: 0.5;
  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.1));
  position: absolute;
  top: -15px;
  left: 0;
}
.biseki_box {
  margin: 0 auto;
  position: relative;
}
.biseki_box img {
  width: 100%;
  height: 230px;
  border-radius: 120px;
  margin-bottom: 20px;
  object-fit: cover;
}
.biseki_link_box:hover {
  filter: saturate(0.5);
}
.biseki_box h3 {
  text-align: center;
  margin-bottom: 20px;
}
.biseki_box p {
  padding-bottom: 20px;
}
@media (width>767px) {
  .biseki_wrap {
    display: flex;
    gap: 40px;
  }
  .biseki_container {
    flex: 1;
  }
  .biseki_icon {
    opacity: 0.5;
    filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.1));
    position: absolute;
    top: -30px;
    left: 0;
  }
}
/* products */
.banner_box a {
  display: grid;
  text-align: center;
  text-decoration: underline 1px solid;
  padding: 40px 0 0;
}
.banner_box a:first-of-type {
  padding: 80px 0 0;
}
.links_banner_box a:first-of-type {
  padding: 20px 0 0;
}
.banner_box img {
  width: 100%;
  height: 25vh;
  border-radius: 20px;
  object-fit: cover;
}
@media (width>767px) {
  .banner_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 60vw;
    margin: 0 auto;
  }
  .banner_box a {
    display: grid;
    text-align: center;
    text-decoration: underline 1px solid;
    padding: 0;
  }
  .banner_box a:first-of-type {
    padding: 0;
  }
  .links_banner_box a:first-of-type {
    padding: 0;
  }
  .banner_box img {
    width: 100%;
    height: 180px;
    border-radius: 20px;
    object-fit: cover;
  }
  .btn.products {
    margin-bottom: 100px;
  }
}
/* emigration */
.emi_container {
  margin-bottom: 60px;
}
.emigration_item {
  display: flex;
  flex-direction: column;
}
.emigration_item span {
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
}
.read_more_btn {
  width: 23vw;
  position: absolute;
  bottom: 7px;
  right: 0;
}
.read_more_btn img {
  width: 100%;
  height: auto;
  filter: drop-shadow(-1px 0px 0px rgba(255, 255, 255, 1));
}
.emi_btn {
  margin-bottom: 20px;
}
@media (width>767px) {
  .read_more_btn {
    width: 5vw;
  }
  .flex_wrap .btn,
  .flex_wrap .emi_btn {
    width: 250px;
    margin: 0;
  }
}

/* access */
.access_address h3 {
  display: flex;
  background-color: var(--green);
  position: relative;
  z-index: 5;
  padding: 0 5px;
  position: relative;
}
.side_line {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 20px;
}
/* 左右の線を共通設定 */
.side_line::after {
  content: "";
  flex-grow: 1; /* 残り幅いっぱいに広がる */
  height: 1px;
  background-color: var(--white);
}
/* 右側の線と文字の余白 */
.side_line::after {
  margin-left: 15px;
}
.access_address,
.access {
  padding-bottom: 40px;
}
.access {
  border-bottom: var(--white) 1px solid;
}
.adress_text:not(:last-of-type),
.access_text:not(:last-of-type) {
  margin-bottom: 40px;
}
.access_text h4 {
  margin-bottom: 10px;
  font-weight: 500;
}
.access_car {
  margin-bottom: 5px;
}
.access_car p:first-child {
  display: inline-block;
  border-bottom: var(--white) 1px solid;
  margin-bottom: 5px;
}
.caution {
  color: #ffffb2;
}
.access_item.row span {
  border-bottom: var(--white) 1px solid;
}
.adress_text {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.adress_text div {
  display: flex;
  flex-direction: column;
}
.adress_text div p {
  margin-bottom: 10px;
}
@media (width>767px) {
  .access_car,
  .access_text p,
  .access_item.row p {
    margin-bottom: 10px;
  }
  .adress_text div {
    display: grid;
    grid-template-columns: 1fr 10fr;
    gap: 10px;
  }
}
/* ********************************************************************** */

/* ここから下層ページ */

/* ********************************************************************** */
.sub_fv {
  position: relative;
  width: 100%;
  height: calc(50vh - 82.8px);
  background: no-repeat center/cover;
}
.sub_fv.contact {
  background-image: url(../img/contact/contact1.webp);
}
.sub_fv.biseki_tabi {
  background-image: url(../img/biseki_tabi/biseki_tabi1.webp);
}
.sub_fv.biseki_megumi {
  background-image: url(../img/biseki_megumi/biseki_megumi1.webp);
}
.sub_fv.biseki_bito {
  background-image: url(../img/biseki_bito/biseki_bito1.webp);
}
.sub_fv.news_list,
.sub_fv.news_detail {
  background-image: url(../img/news/news_list.webp);
}
/* .sub_fv img {
  height: stretch;
  object-fit: cover;
} */
.sub_fv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 0;
}
.sub_title_wrap {
  position: absolute;
  top: 50%;
  left: 10vw;
  transform: translate(0, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.sub_title_wrap div {
  width: 50%;
}
.sub_title_wrap h1 {
  color: var(--white);
  font-weight: 500;
}
.sub_page_wrap {
  margin: 0 auto;
}
.sub_page_biseki h2 {
  font-size: 1.25em;
  margin-bottom: 40px;
  text-align: center;
  line-height: 2em;
}
.biseki_icon_sub.icon_odd {
  width: 23vw;
  opacity: 0.5;
  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.1));
  position: absolute;
  top: 0;
  left: 5%;
}
.biseki_icon_sub.icon_even {
  width: 23vw;
  opacity: 0.5;
  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.1));
  position: absolute;
  top: 0;
  right: 5%;
}
@media (width>767px) {
  .sub_title_wrap {
    left: 20%;
    transform: translate(0, -50%) scale(2);
  }
  .sub_page_wrap.contact {
    width: 55vw;
  }
  .biseki_icon_sub.icon_even {
    width: 23vw;
    opacity: 0.5;
    filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.1));
    position: absolute;
    top: 0;
    left: 5%;
  }
}
/*  **************************** パンくずリスト **************************** */
.breadcrumb {
  display: flex;
  justify-content: center;
  padding: 10px;
  border-top: var(--black) 1px solid;
  border-bottom: var(--black) 1px solid;
  margin-bottom: 40px;
}
.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin: -2px 10px 0;
}
.breadcrumb a {
  text-decoration: underline 1px var(--black);
}
/* ****************************  お問い合わせ **************************** */
.text_box.contact p {
  margin-bottom: 40px;
}
.text_box.contact p:last-of-type {
  margin-bottom: 70px;
}
.text_box.contact:first-of-type {
  margin-bottom: 40px;
  border-bottom: 1px solid var(--black);
}
.text_box.contact:last-of-type {
  margin-bottom: 80px;
  /* font-size: 0.9em; */
}
.form {
  margin-bottom: 40px;
}
.form dl dt {
  font-weight: 600;
  color: rgba(51, 51, 51, 0.85);
}
.form dl dt:not(:first-child) {
  padding-top: 30px;
}
.form dl dd select,
.form dl dd input:not([type="checkbox"]),
.form dl dd textarea {
  padding: 5px;
  width: 100%;
}
.checkbox_group {
  display: flex;
  gap: 30px;
}
.form dl dd input[type="checkbox"] {
  margin-right: 3px;
  width: auto;
}
.form dl dd textarea[name="address"] {
  height: 3.5em; /* 2行分＋少しの余裕 */
}
.form dl dd textarea[name="comment"] {
  height: 9.5em; /* 2行分＋少しの余裕 */
}
.tel {
  border-bottom: 1px solid var(--black);
}
.must::after {
  content: "*";
  color: var(--brown);
}
/* contact_confirm ***************************************************** */
.btn_wrap {
  row-gap: 20px;
  display: flex;
  flex-direction: column;
}
/* contact_thanks ***************************************************** */
.text_box.thanks {
  margin-bottom: 80px;
}
.text_box.thanks h2 {
  font-size: 1.25em;
  margin-bottom: 40px;
  text-align: center;
}
.text_box.thanks p {
  margin-bottom: 40px;
}
/* biseki ********************************************************** */
/* 共通 */
.sub_page_biseki p {
  margin-bottom: 20px;
}
.biseki_h2_img {
  margin-bottom: 40px;
}
.caption_rigth {
  text-align: end;
}
.caption_left {
  text-align: start;
}
.caption_rigth.biseki_side_line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-direction: row-reverse;
  font-size: 14px;
}
.caption_left.biseki_side_line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  font-size: 14px;
}
.caption_left.biseki_side_line::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--black);
}
.biseki_side_line::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--black);
}
.biseki_eyecatch {
  position: relative;
  overflow: clip;
  padding: 0 8%;
}
.biseki_icon.icon_odd {
  width: 20vw;
  opacity: 0.5;
  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.1));
  position: absolute;
  top: 0px;
  left: 8%;
}
.biseki_icon.icon_even {
  width: 20vw;
  opacity: 0.5;
  filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.1));
  position: absolute;
  top: 0px;
  left: 70%;
}
.biseki_section_img_odd {
  width: 85%;
  padding-right: 2%;
  margin-left: auto;
  display: block;
  filter: drop-shadow(7px 15px 0px var(--green));
  z-index: 1;
}
.biseki_section_img_even {
  width: 85%;
  margin-right: auto;
  display: block;
  filter: drop-shadow(7px 15px 0px var(--green));
  margin-bottom: 20px;
  z-index: 1;
}
.biseki_info_fullwrap {
  background-color: var(--green);
  width: 100%;
  text-align: center;
  color: var(--white);
  position: relative;
  padding: 40px 0;
}
.biseki_info_fullwrap a {
  color: var(--white);
  text-decoration: underline;
}
.naminami_reverse.nami_green {
  margin-top: -1px;
  margin-bottom: 100px;
}
.biseki_info_fullwrap::after {
  content: "";
  position: absolute;
  width: 90%;
  height: 120%;
  border: 1px solid var(--white);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.biseki_info_fullwrap h4,
.add_mb {
  margin-bottom: 30px;
  opacity: 0.8;
}
.biseki_info_list {
  position: relative;
  z-index: 20;
}
.info_wrap {
  position: relative;
  margin-bottom: 200px;
  overflow-x: clip;
}
.biseki_info_img01 {
  position: absolute;
  width: 40%;
  top: -60px;
  right: -20px;
  z-index: 2;
}
.biseki_info_img02 {
  position: absolute;
  width: 40%;
  bottom: -50px;
  left: -14px;
  z-index: 2;
}
.biseki_info_img03 {
  position: absolute;
  width: 27%;
  bottom: -80px;
  left: 100px;
  z-index: 2;
}
.kid_and_item_container {
  display: flex;
  align-items: end;
  position: relative;
  padding: 0 5% 0 0;
}
.kid img {
  filter: drop-shadow(5px 5px 0px var(--gray));
}
.kid_comment {
  width: 50%;
  position: absolute;
  top: 30px;
  right: 20px;
  transform: rotate(12deg);
}
.comment {
  position: relative;
}
.comment img {
  opacity: 0.25;
}
.comment p {
  width: 200px;
  font-size: clamp(15px, 0.85vw + 11.83px, 24px);
  letter-spacing: normal;
  text-align: center;
  position: absolute;
  top: 19%;
  left: 52%;
  transform: translate(-50%, -50%) rotate(7deg);
}
.item_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 30px;
}
.item01 {
  width: 125px;
  position: relative;
  margin-bottom: 10px;
}
.item01 p {
  width: auto;
  text-align: center;
  margin-bottom: 0;
  position: absolute;
  font-size: clamp(18px, 1.31vw + 9px, 32px);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.item02 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.biseki_kerning {
  letter-spacing: 0;
}
.biseki_img_left {
  width: 80%;
  margin-right: auto;
  margin-left: 5%;
  margin-bottom: 40px;
  display: block;
  position: relative;
  padding-top: 60px;
}
.item_box03 {
  position: absolute;
  top: 50px;
  right: -45px;
  transform: rotate(28deg);
}
.item03 {
  width: 210px;
  position: relative;
  margin-bottom: 10px;
}
.item03 p {
  width: 180px;
  text-align: center;
  font-size: clamp(18px, 0.41vw + 16.45px, 22.4px);
  margin-bottom: 0;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.biseki_img_right {
  width: 75%;
  margin-left: auto;
  margin-right: 5%;
  margin-bottom: 40px;
  display: block;
  position: relative;
}
.item04 {
  position: absolute;
  top: 16px;
  left: -40px;
  transform: rotate(-10deg);
}
.item04 p {
  position: relative;
}
.item04 p::before {
  content: url(../img/svg/kirakira.svg);
  width: 25px;
  height: 25px;
  position: absolute;
  top: -18px;
  right: -24px;
  transform: rotate(-25deg);
}
.item04 p::after {
  content: url(../img/svg/kirakira.svg);
  width: 25px;
  height: 25px;
  position: absolute;
  bottom: -20px;
  left: -14px;
  transform: scaleX(-1);
  display: block;
}
.item04 p {
  writing-mode: vertical-rl;
}
.btn_sub_page {
  padding-bottom: 100px;
}

.biseki_fullwrap_odd,
.biseki_fullwrap_even {
  overflow-x: clip;
  width: 100%;
}
.biseki_fullwrap_odd section,
.biseki_fullwrap_even section {
  width: 100%;
}
.biseki_caption_odd,
.biseki_caption_odd.last,
.biseki_caption_even,
.biseki_caption_even.last {
  font-size: clamp(18.72px, 1.06vw + 14.75px, 30px);
}
.biseki_caption_odd,
.biseki_caption_odd.last {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: start;
  line-height: 2;
  margin-bottom: 20px;
}
.biseki_caption_odd::before {
  content: "";
  background-color: var(--green);
  position: absolute;
  top: 20px;
  left: -140px;
  width: 310px;
  height: 10px;
  opacity: 0.1;
}
.biseki_caption_odd.megumi01::before {
  content: "";
  background-color: var(--green);
  position: absolute;
  top: 20px;
  left: -140px;
  width: 290px;
  height: 10px;
  opacity: 0.1;
}
.biseki_caption_odd.last::before {
  content: "";
  background-color: var(--green);
  position: absolute;
  top: 20px;
  left: -140px;
  width: 270px;
  height: 10px;
  opacity: 0.1;
}
.biseki_caption_odd.last.megumi03::before {
  width: 290px;
}
.biseki_caption_odd::after {
  content: "";
  background-color: var(--green);
  position: absolute;
  bottom: 5px;
  left: 0px;
  width: 120%;
  height: 10px;
  opacity: 0.1;
}
.biseki_caption_even,
.biseki_caption_even.last {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: end;
  text-align: end;
  line-height: 2;
  margin-bottom: 20px;
}
.biseki_caption_even::before {
  content: "";
  background-color: var(--green);
  position: absolute;
  top: 20px;
  right: -70px;
  width: 310px;
  height: 10px;
  opacity: 0.1;
}
.biseki_caption_even.megumi02::before {
  width: 235px;
}
.biseki_caption_even.megumi04::before {
  width: 195px;
}
.biseki_caption_even.bito02::before {
  content: "";
  background-color: var(--green);
  position: absolute;
  top: 20px;
  right: -70px;
  width: 215px;
  height: 10px;
  opacity: 0.1;
}
.biseki_caption_even.last:before {
  content: "";
  background-color: var(--green);
  position: absolute;
  top: 20px;
  right: -130px;
  width: 350px;
  height: 10px;
  opacity: 0.1;
}
.biseki_caption_even::after {
  content: "";
  background-color: var(--green);
  position: absolute;
  bottom: 5px;
  right: 0px;
  width: 120%;
  height: 10px;
  opacity: 0.1;
}
.section_content {
  margin: 0 8%;
}
@media (width>767px) {
  .subpage_flexwrap {
    display: flex;
    justify-content: center;
    position: relative;
  }
  .sub_page_biseki h2 {
    font-size: 1.8em;
  }
  .subpage_flexwrap div:nth-child(2) {
    width: 50%;
    position: absolute;
    top: 48%;
    right: 0%;
  }
  .biseki_h2_img {
    width: 60vw;
    margin-right: auto;
  }
  .subpage_flexwrap div p {
    background-color: var(--white);
    padding: 10px;
  }
  .subpage_flexwrap div p:not(:last-child) {
    margin-bottom: 35px;
  }
  .biseki_eyecatch {
    display: flex;
    flex-direction: row-reverse;
    align-items: end;
    justify-content: space-between;
  }
  .biseki_section_img_odd,
  .biseki_section_img_even {
    width: 50%;
    height: auto;
    margin-right: 0;
    margin-bottom: 50px;
  }
  figcaption {
    width: 45%;
    text-align: left;
  }
  .biseki_info_fullwrap::after {
    width: 60%;
    height: 150%;
  }
  .biseki_icon.icon_odd,
  .biseki_icon.icon_even {
    width: 18vw;
    bottom: 55%;
    top: auto;
    left: 8%;
  }
  .biseki_caption_odd::before {
    content: "";
    background-color: var(--green);
    position: absolute;
    top: 45px;
    left: -140px;
    width: 410px;
    height: 10px;
    opacity: 0.1;
  }
  .biseki_caption_odd::after {
    content: "";
    background-color: var(--green);
    position: absolute;
    bottom: 5px;
    left: 0px;
    width: 170%;
    height: 10px;
    opacity: 0.1;
  }
  .biseki_caption_even::before,
  .biseki_caption_even.last::before {
    content: "";
    background-color: var(--green);
    position: absolute;
    top: 37%;
    right: auto;
    left: -28%;
    width: 85%;
    height: 10px;
    opacity: 0.1;
  }
  .biseki_caption_even.tabi02::before {
    width: 95%;
  }
  .biseki_caption_even::after {
    content: "";
    background-color: var(--green);
    position: absolute;
    bottom: 5px;
    right: auto;
    left: 0;
    width: 150%;
    height: 10px;
    opacity: 0.1;
  }
  .caption_left.biseki_side_line {
    flex-direction: row-reverse;
  }
  .section_content,
  .section_content.last,
  .biseki_tabi_flex .section_content,
  .kid_and_item_container,
  .biseki_tabi_flex {
    margin: 0 0% 0 8%;
    padding-right: 18%;
    width: 100%;
  }
  .biseki_info_img01 {
    position: absolute;
    width: 20%;
    top: -60px;
    right: 70px;
    z-index: 2;
  }
  .biseki_info_img02 {
    position: absolute;
    width: 30%;
    bottom: -50px;
    left: -33px;
    z-index: 2;
  }
  .biseki_info_img03 {
    position: absolute;
    width: 17%;
    bottom: -180px;
    left: 240px;
  }
  .biseki_info_fullwrap {
    position: relative;
    padding: 40px 0;
    font-size: 1.25em;
  }
  .biseki_info_fullwrap h4 {
    font-size: 1.25em;
  }
  .kid_and_item_container {
    width: 80%;
    margin-top: 0;
    padding: 0 0 0 0;
  }
  .kid {
    width: 30%;
  }
  .kid_comment {
    width: 23%;
    top: 10%;
    right: 0;
    left: 18%;
  }
  .item01 {
    width: 30%;
    position: relative;
    margin-bottom: 30px;
  }
  .item02 {
    display: flex;
  }
  .biseki_tabi_flex {
    display: flex;
    align-items: center;
  }
  .biseki_img_left {
    width: 80%;
    margin-left: 0%;
    padding-top: 0px;
  }
  .item_box03 {
    position: absolute;
    width: 50%;
    top: 50px;
    right: -45px;
    transform: rotate(33deg);
  }
  .item03 {
    width: 100%;
  }
  .item03 p {
    width: 100%;
  }
  .biseki_img_right {
    width: 75%;
    margin-left: 5%;
    margin-right: 0%;
    margin-bottom: 0px;
    padding-top: 110px;
    display: block;
    position: relative;
  }
  .item04 {
    position: absolute;
    top: 89%;
    left: -6%;
    transform: rotate(19deg);
  }
  .item04 p {
    width: 100%;
    font-size: 1.4rem;
    padding: 10px 0px;
    writing-mode: unset;
  }
  .item04 p::before {
    width: 12%;
    top: 22%;
    right: -15%;
    transform: rotate(368deg);
    padding: 5px 2px;
  }
  .item04 p::after {
    bottom: 8%;
    left: -18%;
    transform: scaleX(-1);
    display: block;
    padding: 5px 2px;
  }
  .biseki_caption_odd.last::before {
    top: 45px;
    left: -140px;
    width: 345px;
  }
  .biseki_caption_even.last:before {
    width: 90%;
  }
}
/* megumi */
.bg_green {
  background-color: var(--green);
  padding: 80px 0;
  margin: 0 auto;
  color: var(--white);
}
.bg_green .section_content p a {
  color: var(--white);
  text-decoration: underline;
}
.caption_left.biseki_side_line.white::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--white);
}
.biseki_section_img_even.white {
  filter: drop-shadow(7px 15px 0px rgba(255, 255, 255, 0.3));
}
.biseki_caption_even.white::before,
.biseki_caption_even.white.last::before,
.biseki_caption_even.white::after {
  background-color: var(--white);
}
.megumi_box_left {
  width: 65vw;
  position: relative;
  margin: 10px auto 10px 0;
  writing-mode: vertical-rl;
}
.megumi_box_left p {
  position: absolute;
  top: 45px;
  right: -45px;
  writing-mode: vertical-rl;
  transform: rotate(4deg);
}
.megumi_box_left p::before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../img/svg/kirakira.svg);
  transform: scaleX(-1);
  position: absolute;
  top: -30px;
  right: -15px;
}
.megumi_box_left p::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../img/svg/kirakira.svg);
  transform: scaleX(-1);
  position: absolute;
  bottom: -30px;
  left: -15px;
}
.megumi_box_right {
  width: 65vw;
  position: relative;
  margin: 10px 0 10px auto;
}
.megumi_box_right p {
  position: absolute;
  top: 45px;
  left: -45px;
  writing-mode: vertical-rl;
  transform: rotate(350deg);
}
.megumi_box_right p::before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../img/svg/kirakira.svg);
  background-repeat: no-repeat;
  transform: scaleX(-1);
  position: absolute;
  top: -30%;
  right: -63%;
}
.megumi_box_right p::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../img/svg/kirakira.svg);
  background-repeat: no-repeat;
  transform: scaleX(-1);
  position: absolute;
  bottom: -38%;
  left: -50%;
}
.megumi_box_left.white p::before,
.megumi_box_left.white p::after,
.megumi_box_right.white p::before,
.megumi_box_right.white p::after {
  filter: invert(1);
}
.sub_banner_box {
  width: 85vw;
  margin: 0 auto 100px;
}
@media (width>767px) {
  .megumi01_pc_content {
    display: flex;
    flex-direction: row-reverse;
    gap: 50px;
  }
  .megumi02_pc_content {
    display: flex;
    flex-direction: row;
    gap: 50px;
  }
  .megumi01_pc {
    display: grid;
    gap: 10px;
    flex: 1;
  }
  .megumi_box_left,
  .megumi_box_right {
    width: 100%;
  }
  .megumi_box_right p {
    width: 25%;
    font-size: 1.4rem;
    position: absolute;
    top: 12%;
    left: 74%;
    writing-mode: unset;
    transform: rotate(23deg);
  }
  .megumi_box_right p::before {
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/svg/kirakira.svg);
    background-repeat: no-repeat;
    transform: scaleX(-1);
    position: absolute;
    top: -30%;
    right: -5%;
  }
  .megumi_box_right p::after {
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/svg/kirakira.svg);
    background-repeat: no-repeat;
    transform: scaleX(-1);
    position: absolute;
    bottom: -20%;
    left: -22%;
  }
  .megumi_box_left p {
    width: 25%;
    font-size: 1.4rem;
    position: absolute;
    top: 88%;
    right: 73%;
    writing-mode: horizontal-tb;
    transform: rotate(4deg);
  }
  .megumi_box_left p::before {
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/svg/kirakira.svg);
    background-repeat: no-repeat;
    transform: scaleX(-1);
    position: absolute;
    top: 0%;
    right: -20%;
  }
  .megumi_box_left p::after {
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/svg/kirakira.svg);
    background-repeat: no-repeat;
    transform: scaleX(-1);
    position: absolute;
    bottom: -30%;
    left: -20%;
  }
  .megumi_box_right.megumi02 p {
    width: 30%;
  }
  .megumi_box_right.megumi02 p::before {
    right: -13%;
  }
  .megumi_box_left.megumi02 p {
    width: 29%;
  }
}

/* bito */
.voice {
  font-weight: 500;
}
.biseki_bito_img01 {
  position: absolute;
  top: 3%;
  right: 4%;
  z-index: 10;
}
.biseki_bito_img02 {
  position: absolute;
  bottom: 4%;
  left: 4%;
  z-index: 10;
  transform: scaleX(-1);
}
.bito_tips {
  width: 70%;
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px dotted var(--white);
  border-bottom: 1px dotted var(--white);
}
.info_wrap.bito {
  margin-bottom: 100px;
}
.section_content.last.bito4 {
  margin-bottom: 60px;
}
.biseki_caption_odd.bito01 {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: start;
  line-height: 2;
  margin-bottom: 20px;
}
.biseki_caption_odd.bito01::before {
  content: "";
  background-color: var(--green);
  position: absolute;
  top: 20px;
  left: -180px;
  width: 310px;
  height: 10px;
  opacity: 0.1;
}
@media (width>767px) {
  .sub_fv.biseki_bito {
    background-image: url(../img/biseki_bito/biseki_bito1_pc.webp);
  }
  .biseki_caption_odd.bito01::before {
    width: 71%;
    top: 40px;
  }
  .bito_tips {
    width: 35%;
  }
  .biseki_bito_img01 {
    width: 10%;
    top: 10%;
    right: 18%;
  }
  .biseki_bito_img02 {
    width: 10%;
    bottom: 10%;
    left: 18%;
  }
  .biseki_caption_odd .section_content.last.bito4 {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto 60px;
  }
  .biseki_caption_even,
  .biseki_caption_even.last {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: start;
    text-align: start;
    line-height: 2;
    margin-bottom: 20px;
  }
  .section_content.last.bito4 {
    width: 100%;
    margin-bottom: 60px;
    justify-content: center;
    display: flex;
    margin: 0 0% 60px 0;
    padding-right: 0;
  }
  .biseki_caption_even.bito02::before {
    width: 455px;
    top: 35%;
    left: -47%;
  }
}
/* nes_list ******************************************************************* */
/* ======================================================
   おしらせ一覧ページ (news_list)
   ====================================================== */

/* --- 全体コンテナ --- */
.sub_page_news_wrap {
  padding: 40px 0 80px;
  max-width: 1100px; /* PCでの見栄えを考慮し少し広めに設定 */
  margin: 0 auto;
}

/* --- 記事一覧レイアウト (モバイル) --- */
.news_container {
  display: flex;
  flex-direction: column;
}

.news_card {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #dcdcdc; /* スマホ版の区切り線 */
}

.news_card:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.news_card a {
  display: block;
  text-decoration: none;
  color: var(--black); /* 既存の変数を使用 */
}

/* --- 画像部分 --- */
.news_img {
  width: 100%;
  aspect-ratio: 16 / 9; /* 画像サイズを統一 */
  overflow: hidden;
  border-radius: 15px; /* PDF通りの角丸 */
  margin-bottom: 15px;
  background-color: #f0f0f0;
}

.news_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* --- テキスト部分 --- */
.news_content time {
  display: block;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 8px;
  font-family: "Noto Sans", sans-serif;
}

.news_content h2 {
  font-size: 1.15rem;
  line-height: 1.5;
  margin-bottom: 12px;
  font-weight: 700;
  text-align: justify;
  text-justify: inter-ideograph;
}

.news_content p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;
  /* 3行以上は省略（必要に応じて調整してください） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* --- ページネーション --- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 60px;
}

.pagination a,
.pagination .num,
.pagination .dots {
  min-width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: var(--green); /* 弥石町カラー */
  font-weight: 500;
}

.pagination .num {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.pagination .num.current {
  background-color: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.pagination .prev,
.pagination .next {
  font-weight: bold;
  padding: 0 10px;
}

/* --- PC版レイアウト (768px以上) --- */
@media (min-width: 768px) {
  .sub_page_news_wrap {
    padding: 60px 20px 100px;
  }

  .news_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 横3列 */
    gap: 60px 30px; /* 線を消す代わりに余白を広めに */
  }

  .news_card {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none; /* PC版では線を消す */
  }

  .news_content h2 {
    font-size: 1.2rem;
    height: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* ホバー時の画像演出 */
  .news_card a:hover .news_img img {
    transform: scale(1.05);
  }
}
/* ======================================================
   おしらせ詳細ページ (news_detail)
   ====================================================== */
.news_detail_wrap {
  padding: 40px 20px 100px;
  max-width: 900px; /* 読みやすさを考慮して少し絞る */
  margin: 0 auto;
}

/* ヘッダー部分 */
.entry_header {
  margin-bottom: 30px;
}
.entry_header time {
  color: #888;
  font-size: 0.9rem;
}
.entry_header h2 {
  /* font-size: 1.3rem; */
  text-align: justify;
  line-height: 1.4;
  margin-top: 10px;
  color: var(--black);
}

/* メイン画像 */
.entry_img {
  margin-bottom: 40px;
}
.entry_img img {
  border-radius: 15px;
}

/* 本文テキスト */
.entry_content p {
  margin-bottom: 25px;
  line-height: 1.8;
}
.entry_content .lead {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--green);
}

/* 見出し */
.entry_content h3 {
  /* font-size: 1.4rem; */
  margin: 60px 0 30px;
  padding-left: 15px;
  border-left: 5px solid var(--green);
}
.entry_content h4 {
  /* font-size: 1.1rem; */
  margin: 30px 0 15px;
  color: var(--green);
}

/* 開催概要（枠線エリア） */
.event_outline {
  background-color: #f9fbf8; /* 薄い緑背景 */
  border: 2px solid var(--green);
  border-radius: 15px;
  padding: 30px;
  margin-top: 60px;
}
.event_outline h3 {
  margin-top: 0;
  border-left: none;
  padding-left: 0;
  text-align: center;
  /* font-size: 1.3rem; */
}
.event_outline dl {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}
.event_outline dt {
  width: 30%;
  font-weight: 700;
  margin-bottom: 15px;
}
.event_outline dd {
  width: 70%;
  margin-bottom: 15px;
}

/* ======================================================
   詳細ページ下部ナビゲーション
   ====================================================== */
.entry_footer {
  margin-top: 80px;
  border-top: 1px solid #dcdcdc;
  padding-top: 40px;
}

.post_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* ボタン共通設定 */
.post_nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border: 1px solid var(--green);
  color: var(--green);
  border-radius: 50px;
  height: 44px;
  padding: 0 15px;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.3s;
  text-decoration: none;
}

.post_nav a:hover {
  background-color: var(--green);
  color: var(--white);
}

/* テキストの出し分け（SP版） */
.nav_text {
  display: none; /* スマホでは「前の記事へ」などを隠す */
}
.nav_text_sp {
  display: block; /* スマホでは「一覧」を表示 */
}
.nav_arrow {
  font-family: serif; /* 矢印を少し綺麗に */
  font-weight: bold;
}

/* 中央の「一覧へ戻る」ボタンを目立たせる */
.back_to_list {
  flex: 1;
  max-width: 120px;
}

/* 前後のボタン（スマホでは丸いアイコン風に） */
.prev_post,
.next_post {
  width: 44px;
  padding: 0;
}

/* --- PC版（768px以上） --- */
@media (min-width: 768px) {
  .post_nav {
    gap: 30px;
  }

  .post_nav a {
    width: auto;
    height: 50px;
    padding: 0 30px;
    flex: none;
  }

  /* テキストの出し分け（PC版） */
  .nav_text {
    display: block;
  }
  .nav_text_sp {
    display: none;
  }

  /* ボタンごとの個別調整 */
  .prev_post .nav_arrow {
    margin-right: 8px;
  }
  .next_post .nav_arrow {
    margin-left: 8px;
  }

  .back_to_list {
    max-width: none;
    min-width: 180px;
  }
}
/* PC調整 */
@media (min-width: 768px) {
  .entry_header h2 {
    font-size: 1.1rem;
  }
}

/* --- style.css 修正案 --- */

/* 1. PC固定ボタンの出現をふわっとさせる */
@media (width > 767px) {
  .pc_fixed_btns {
    opacity: 0;
    visibility: hidden;
    /* transitionを整理（transformは含めないのが無難） */
    transition:
      opacity 0.5s ease,
      visibility 0.5s ease;
    pointer-events: none;
    position: fixed;
    top: 50%;
    right: 15px; /* 最初から表示位置に固定 */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
  }

  .pc_fixed_btns.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* 2. フッターアイコンの修正 */
.icon_footer {
  position: fixed;
  right: 15px; /* 10pxから15pxに変更して is-show と合わせる */
  bottom: 20px; /* 初期位置を合わせておく */
  gap: 5px;
  z-index: 100;
  display: flex;
  opacity: 0;
  visibility: hidden;
  /* 重要：all をやめて opacity と visibility のみに限定する */
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

.icon_footer.is-show {
  opacity: 1;
  visibility: visible;
  /* right: 15px; bottom: 20px; は .icon_footer で定義済みなので不要 */
}