@charset "UTF-8";
/*
Theme Name: Yuru_community
Description: 静的サイトから移行したオリジナルテーマです。
Version: 1.0
Author: irodori.
*/
:root {
  /* 色管理用の変数 */
  --black-color: #333;
  --white-color: #fff;
  --text-color: #33362f;
  --base-color: #fbfbfb;
  --base-color2: #F0EEEA;
  --accent-color: rgb(98, 121, 98);
  --transparent-color: rgba(255, 255, 255, 0.6);
  --bgred-color:rgba(238, 73, 32, 0.1);
  --bggreen-color:rgba(103, 207, 74, 0.1);
  --bgyellow-color:rgba(205, 205, 55, 0.1);
  --bgwhite-color:rgba(252, 252, 252, 0.1);

}

:root {
  /* コンテンツ幅管理用の変数 */
  --content-width-sm: 500px;
  --content-width: 660px;
  --content-width-lg: 1000px;
}

:root {
  /* z-index管理用の変数 */
  --z-index-back: -1;
  --z-index-default: 1;
  --z-index-header: 100;
  --z-index-menu: 150;
  --z-index-modal: 200;
  --z-index-highest: 9999;
}

/* ---------- base ---------- */
html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 80px;
}

body {
  color: var(--text-color);
  background-color: var(--base-color);
  font-size: 16px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.8;
  letter-spacing: 0.1em;
}

a {
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 4px;
}

ul,
li {
  list-style: none;
}

@media screen and (min-width: 768px) {
  .u_br_lg {
    display: none;
  }
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* ---------- layout ---------- */
.l_container-sm,
.l_container-lg,
.l_container {
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
}

.l_container-sm {
  max-width: calc(var(--content-width-sm) + 32px);
}

.l_container {
  max-width: calc(var(--content-width) + 32px);
}

.l_container-lg {
  max-width: calc(var(--content-width-lg) + 32px);
}

/* padding-top / bottom（上下の余白） */
.l_contents {
  padding: 80px 0;
}
@media screen and (min-width: 1080px) {
  .l_contents {
    padding: 120px 0;
  }
}

section {
  text-align: center;
}

/*
* {
  outline: 1px solid red;
}

/* ---------- LINE ---------- */
/* 画面右下に固定するコンテナ */
.floating_line__btn {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: var(--z-index-highest);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  /* ふわふわ揺れるアニメーションを適用 */
  animation: floatWindow 3s ease-in-out infinite;
}

.line_icon__wrapper {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* ほんのり白緑の半透明 ＋ すりガラス効果 */
  background: rgba(210, 227, 194, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.line_img {
  width: 48px;
  height: 48px;
}

.line-text {
  margin-top: 6px;
  font-size: 11px;
  font-weight: bold;
  color: var(--text-color);
  background-color: rgba(252, 252, 252, 0.9); 
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* ふわふわ上下に動くアニメーションの定義 */
@keyframes floatWindow {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}


/* ---------- header ---------- */
.l_header {
  width: 100%;
  height: 70px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-header);
  box-sizing: border-box;
}

.l_header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--transparent-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: 0.3s;
  z-index: var(--z-index-back);
}

.l_header.is-scrolled::before {
  opacity: 1;
  background: var(--transparent-color);
  backdrop-filter: blur(8px); /*自分の背景をぼかす。filterは自身をぼかす*/
  -webkit-backdrop-filter: blur(4px); /*8pxはぼかしの強さ*/
}

.l_header-logo_link {
  width: 130px;
  height: 64px;
  object-fit: cover;
}

.l_header_nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--base-color2);
  z-index: var(--z-index-header);
}
@media screen and (min-width: 1080px) {
  .l_header_nav {
    position: static;
    display: flex;
    margin-left: auto;
    background: transparent;
  }
}

.l_header-nav_list {
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}
@media screen and (min-width: 1080px) {
  .l_header-nav_list {
    display: flex;
    align-items: center;
    gap: clamp(24px, 2vw, 40px);
    flex-direction: row;
    padding: 0;
    font-size: 14px;
    letter-spacing: 0;
  }
}

.l_nav_link {
  transition: transform 0.2s;
  position: relative;
}

.l_nav_link::after {
  background-color: var(--accent-color); /* 下線の色 */
  bottom: -4px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 1px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: center top; /* 変形の原点を中央上に指定 */
  transition: transform 0.3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
.l_nav_link:hover::after {
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

.l_nav_link__pc {
  display: none;
}
@media screen and (min-width: 1080px) {
  .l_nav_link__pc {
    display: block;
  }
}

.l_nav_item__span {
  text-align: center;
  display: block;
  width: 100%;
  cursor: pointer;/*ひろば紹介の文字にマウスを乗せた時に指マークにする*/
  border: none;
}
@media screen and (min-width: 1080px) {
  .l_nav_item__span {
    display: none;
  }
}

/* 1. 初期状態：高さを0にして、はみ出た子要素（リンク）を隠す */
.l_header-nav_wrap {
  height: 0px;
  overflow: hidden;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  font-size: 14px;
}
@media screen and (min-width: 1080px) {
  .l_header-nav_wrap {
    display: none;
  }
}

.l_header-nav_wrap li:first-child {
  margin-top: 40px;
}

.l_nav_link__row {
  display: inline-block;
  text-align: center;
  width: 150px;
  background-color: var(--base-color);
  border-radius: 20px;
  white-space: nowrap; /* 文字の折り返しを防ぐ */
}

.m_hamburger {
  width: 30px;
  height: 25px;
  position: relative;
  background-color: transparent;
  z-index: var(--z-index-menu);
}
@media screen and (min-width: 1080px) {
  .m_hamburger {
    display: none;
  }
}

.m_hamburger-bar {
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  transition: ease 0.4s;
  background-color: var(--text-color);
  display: block;
  border: none;
}

.m_hamburger-bar:nth-child(1) {
  top: 0;
}
.m_hamburger-bar:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
  left: 10%;
}
.m_hamburger-bar:nth-child(3) {
  bottom: 0;
}

/* ---------- kv ---------- */
.top_kv {
  width: 100%;
  height: 100svh;
  border-radius: 0 0 100px 100px;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  /*背景画像の変数(スマホ) */
  --bg-img-1: url('./img/top_sp.webp');
  --bg-img-2: url('./img/top_sp_2.webp');
  --bg-img-3: url('./img/top_sp_3.webp');

  /*1枚目*/
  background-image: var(--bg-img-1);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /*じわっと切り替える */
  transition: background-image 1.2s ease-in-out;
}

@media screen and (min-width: 768px) {
  .top_kv {
    height: 700px;
    border-radius: 0 0 180px 180px;
  /*背景画像の変数(pc) */
  --bg-img-1-pc: url('./img/top_pc.webp');
  --bg-img-2-pc: url('./img/top_pc_2.webp');
  --bg-img-3-pc: url('./img/top_pc_3.webp');

  /*1枚目*/
  background-image: var(--bg-img-1-pc);
  background-position: top center;
  }
}

.top_kv_container {
  position: static;
  bottom: auto;
}

.u_visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m_kv_ttl {
  font-size: clamp(20px, 4vw, 26px);
  color: var(--white-color);
  text-shadow: 2px 1px 0px var(--text-color);
}

.top_kv_ttl {
  margin-bottom: 24px;
}

.top_kv_sub {
  font-size: clamp(18px, 4vw, 22px);
  color: var(--white-color);
  text-shadow: 2px 1px 0px var(--text-color);
}

/* ---------- about ---------- */
.l_about {
  overflow-x: hidden;
  position: relative;
}

/*３色グラデ（基本）*/
.m_sec_bg {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 100vh;
  background-image: 
    radial-gradient(circle at center, var(--bgred-color)0%, var(--bgwhite-color)60%,transparent 100%);
  position: absolute;
  z-index: var(--z-index-back);
  left: 50%;
  transform: translateX(-50%);
}

.m_sec_bg::before, .m_sec_bg::after {
  content: "";
  width: 200px;
  height: 200px;
  border-radius: 100vh;
  position: absolute;
  z-index: var(--z-index-back);
}

.m_sec_bg::before {
  background-image: 
    radial-gradient(circle at center, var(--bggreen-color)0%, var(--bgwhite-color)60%,transparent 100%);
  top: 30%;
  left: 40%;
}

.m_sec_bg::after {
  background-image: 
    radial-gradient(circle at center, var(--bgyellow-color)0%, var(--bgwhite-color)60%,transparent 100%);
  top: 50%;
  right: 10%;
}

/*３色グラデ（sec上）*/
.m_sec_bg__about {
  left: 25%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1080px) {
  .m_sec_bg__about {
    width: 300px;
    height: 300px;
    left: 15%;
  }
  .m_sec_bg__about::before, .m_sec_bg__about::after {
    width: 300px;
    height: 300px;
  }
}

/*３色グラデ（sec下）*/
.m_sec_bg__under {
  left: 80%;
  transform: translateX(-50%);
}
.m_sec_bg__under::before {
  left: 5%;
  transform: translateY(-80%);
}
.m_sec_bg__under::after {
  left: -40%;
  transform: translateY(-70%);
}

@media screen and (min-width: 1080px) {
  .m_sec_bg__under, .m_sec_bg__under::before, .m_sec_bg__under::after {
    width: 300px;
    height: 300px;
  }
  .m_sec_bg__under {
    left: 85%;
  }
  .m_sec_bg__under::before {
    left: 30%;
    transform: translateY(-75%);
  }
  .m_sec_bg__under::after {
    left: -40%;
  }
}

.about_ttl {
  font-size: 22px;
  margin-bottom: 64px;
  font-weight: bold;
}

.about_message:not(:last-child) {
  margin-bottom: 32px;
}

.about_message__bold {
  font-weight: bold;
  margin: 64px 0;
}

/* ---------- hiroba ---------- */
.top_hiroba {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.4), rgba(225, 225, 225, 0.4)),
  url(img/hiroba_bg_sp.webp) center / cover;
  border-radius: 0 100px 0 100px;
}
@media screen and (min-width: 1080px) {
  .top_hiroba {
    background: 
  linear-gradient(rgba(225, 225, 225, 0.4), rgba(225, 225, 225, 0.4)),
  url(img/hiroba_bg_pc.webp) center / cover;
  }
}

.top_section_ttl {
  font-weight: bold;
  font-size: 24px;
}
@media screen and (min-width: 1080px) {
  .top_section_ttl {
    font-size: 26px;
  }
}

.top_section_desc {
  margin-bottom: 64px;
}

.cards_container {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
@media screen and (min-width: 1080px) {
  .cards_container__hiroba {
    flex-direction: row;
    gap: 40px;
    place-content: center;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

.card {
  box-shadow: -31px -31px 43px rgba(225, 225, 225, 0.3),8px 8px 10px rgba(105, 111, 98, 0.2);
  display: grid;
  grid-template-rows: subgrid;
}

.hiroba_card {
  border-radius: 64px;
  background: var(--transparent-color);
  grid-row: span 4;/*項目4つ*/
  padding: 24px 0 40px;
}
@media screen and (min-width: 1080px) {
  .hiroba_card {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.card_img {
  margin: 0 auto;
  border-radius: 56px;
  margin-bottom: 24px;
  object-fit: cover;
}

.card_subttl {
  font-size: 18px;
  margin-bottom: 16px;
}

.card_ttl {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 40px;
}

.card_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 70px;
  border-radius: 30px;
  border: 1px solid var(--accent-color);
  background-color: var(--base-color);
  color: var(--accent-color);
  font-weight: bold;
  margin: 0 auto;
}

.card_btn:hover {
  background-color: var(--accent-color);
  color: var(--white-color);
}


/* ---------- place ---------- */
@media screen and (min-width: 1080px) {
  .cards_container__place {
    flex-direction: row;
    gap: 80px;
    place-content: center;
  }
}

.place_card {
  border-radius: 24px;
  background-color: var(--white-color);
  grid-row: span 5;/*項目4つ*/
  padding: 48px 0;
  justify-content: center;
} 
@media screen and (min-width: 1080px) {
  .place_card {
    padding-left: 36px;
    padding-right: 36px;
  }
}

.place_card_ttl {
  font-size: 20px;
  width: 300px;
  height: 40px;
  background-color: rgba(98, 121, 98, 0.3);
  margin-bottom: 24px;
  border-radius: 8px;
}

.place_wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.place_img {
  margin: 24px 0;
  border-radius: 16px;
  object-fit: cover;
}

.place_link {
  text-decoration: underline;
}

.tel_link {
  pointer-events: auto; /* タップを有効化 */
  cursor: pointer;       /* カーソルを指マークにする */
  text-decoration: underline;
}
@media screen and (min-width: 1080px) {
  .tel_link {
  pointer-events: none; /* クリックやタップを無効化 */
  cursor: default;       /* カーソルを普通の矢印にする */
  text-decoration: none; /* 下線を消す */
}
}

/* ---------- voice ---------- */
.top_voice {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.5), rgba(225, 225, 225, 0.5)),
  url(img/voice_bg_sp.webp) center / cover;
  border-radius: 100px 0 100px 0;
}
@media screen and (min-width: 1080px) {
  .top_voice {
    background: 
  linear-gradient(rgba(225, 225, 225, 0.5), rgba(225, 225, 225, 0.5)),
  url(img/voice_bg_pc.webp) center / cover;
  }
}

@media screen and (min-width: 768px) {
  .voice_slider__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto;
  }
}

/* カード全体を包むコンテナ */
.voice_slider__container {
  display: flex;
  gap: 40px;
  padding: 0 40px;/* 左右に余白を作って隣のカードを少し見せる */
  overflow-x: auto;/* 横スクロールを許可 */
  scroll-snap-type: x mandatory; /* スワイプ時にピタッと止まる設定 */
  scrollbar-width: none;/* フォームのスクロールバーを非表（Firefox） */
  place-content: center;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .voice_slider__container {
    place-content: normal;
    width: 600px;
    margin-inline: 0;/* 左右のはみ出し計算をリセット */
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 20px 0;
    gap: 0;
  }
}

/* スクロールバー非
表示（Chrome, Safari） */
.voice_slider__container::-webkit-scrollbar {
  display: none;
}

/* 白いカード部分 */
.voice_card {
  flex: 0 0 93%;/* カードの幅（85%にすることで右側に次のカードが少し見えます） */
  scroll-snap-align: center;  /* スワイプした時に画面の中央で止まる */
  background-color: rgba(252, 252, 252, 0.85);
  border-radius: 16px;
  padding: 16px;
  box-sizing: border-box;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .voice_card {
    flex: 0 0 100%;
  }
}

.voice_tag {
  display: inline-block;
  color: var(--white-color);
  padding: 4px 12px;
  border-radius: 8px;
  background-color: var(--accent-color);
  margin-bottom: 16px;
}

.voice_tag__brown {
  background-color: #B8641E;
}

.voice_tag__white {
  background-color: var(--white-color);
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.voice_info {
  font-size: 14px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--accent-color);
}

.voice_btn {
  border: none;
  outline: none;
  cursor: pointer;
  width: 60px;
  height: 60px;
  border-radius: 100vw;
  background-color: var(--accent-color);
  position: relative;transition: background-color 0.2s, transform 0.2s;
  flex-shrink: 0;
  color: var(--white-color);
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .voice_btn {
    display: none;/* 矢印ボタン非表示 */
  }
}

.voice_btn:hover {
  background-color: #728258; /* 濃く */
  transform: scale(1.05);
}

.voice_dots__container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

/* 通常のドット */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 100vh;
  border: 1px solid var(--text-color);
  transition: background-color 0.3s ease;
}

/* 選択されているドット */
.dot.active {
  background-color: var(--text-color)
}

/* ---------- qa ---------- */
.top_qa_container {
  margin-top: 64px;
}
@media screen and (min-width: 1080px) {
  .top_qa_container {
    max-width: 800px;
    width: 100%;
    margin: 64px auto 0;
  }
}

.qa_accordion {
  background-color: var(--base-color2);
  border-radius: 16px;
  margin-bottom: 40px;
  padding: 16px;
}

.qa_q, .qa_a {
  display: flex;
  align-items: first baseline;
  text-align: left;
}

.qa_q {
  list-style: none;/* デフォルトの三角形を消す */
  cursor: pointer;
  position: relative;
  padding-right: 48px;/* 右側の緑丸ボタンと重ならないための余白 */
}

.qa_a {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--text-color); 
}

.qa_q::before, .qa_a::before {
  color: var(--accent-color);
  margin-right: 8px;
  font-size: 20px;
  font-weight: bold;
}

.qa_q::before {
  content: "Q.";
}

.qa_a::before {
  content: "A. ";
}

/* Safari向けのデフォルト矢印消し */
.qa_q::-webkit-details-marker {
  display: none;
}

.qa_q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: var(--accent-color);
  color: var(--white-color);
  border-radius: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* プラスの位置の微調整 */
  padding-bottom: 2px;
  padding-left: 2px;
  box-sizing: border-box;
}

/* アコーディオンが開いたとき（[open]）の挙動 */
.qa_accordion[open] .qa_q::after {
  content: "−";
  background-color: var(--accent-color);
  padding-bottom: 2px;/* マイナスの位置の微調整 */
}

/* ---------- cta ---------- */
.l_cta {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.6), rgba(225, 225, 225, 0.6)),
  url(img/cta_sp.webp) center / cover;
  border-radius: 48px 48px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
}
@media screen and (min-width: 1080px) {
  .l_cta {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.6), rgba(225, 225, 225, 0.6)),
  url(img/cta_pc.webp) center / cover;
  }
}

.cta_main {
  font-size: 20px;
  margin: 40px 0;
}

/* ---------- footer ---------- */
.l_footer {
  background-color: var(--text-color);
  color: var(--base-color);
}

.l_footer_container {
  padding: 100px 0 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 1080px) {
  .l_footer_container {
    flex-direction: row;
    gap: 120px;
  }
}

.l_footer_logo {
  margin-bottom: 24px;
}
@media screen and (min-width: 1080px) {
  .l_footer_logo {
    margin-bottom: 0;
  }
}

.footer_place_container {
  text-align: left;
  font-size: 14px;
}

.privacypolicy {
  font-size: 10px;
  display: block;
  text-align: center;
  line-height: 0;
}

.l_footer_copyright {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- page_1(ひろば） ---------- */
.hiroba {
  background-color: var(--base-color2);
}
.page_kv {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 100px 100px;
}
@media screen and (min-width: 1080px) {
  .page_kv {
  height: 350px;
  }
}

.hiroba_1 {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.3), rgba(225, 225, 225, 0.3)),
  url(img/page1_kv_sp.webp) center / cover;
}
@media screen and (min-width: 1080px) {
  .hiroba_1 {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.3), rgba(225, 225, 225, 0.3)),
  url(img/page1_kv_pc.webp) center / cover;
  }
}

.m_info_list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.m_info_ttl {
  width: 280px;
  background-color: rgba(135, 152, 106, 0.3);
  border-radius: 20px;
  margin-bottom: 4px;
  margin: 0 auto;
}

.l_contents_container {
  border-radius: 72px 72px 0 0;
  background-color: var(--base-color);
}
@media screen and (min-width: 1080px) {
  .l_contents_container {
    border-radius: 140px 140px 0 0;
    
  }
  .l_contents_wrap {
    display: flex;
    flex-direction: column;
    gap: 80px;
  }
  .l_point_content {
    display: flex;
    gap: 100px;
  }
  .l_point_content:nth-child(even) {
    flex-direction: row-reverse;
  }
}

.l_content_wrap {
  display: flex;
  flex-direction: column;
  padding: 80px 0;
}
@media screen and (min-width: 1080px) {
  .l_content_wrap {
    padding: 16px 0 0;
  }
}

.m_content_img, .m_img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 40px;
}
@media screen and (min-width: 768px) {
  .m_content_img {
    width: 400px;
    height: 100%;
  }
  .m_img {
    width: 400px;
  }
}
@media screen and (min-width: 1080px) {
  .m_img {
    width: 350px;
  }
}

.m_content_ttl {
  font-size: 18px;
  font-weight: 500;
  position: relative;
  margin-bottom: 40px;
}
@media screen and (min-width: 1080px) {
  .m_content_ttl {
    font-size: 22px;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }
}

.m_content_ttl::before {
  border-bottom: 3px solid var(--accent-color);
  font-size: 20px;
  line-height: 1.5;
  position: absolute;
  top: -70%;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 1080px) {
  .m_content_ttl::before {
    font-size: 45px;
    position: static;
    transform: none;
    margin-top: -5px;
    font-weight: 500;
  }
}

.m_content_ttl__01::before {
  content: "01";
}
.m_content_ttl__02::before {
  content: "02";
}
.m_content_ttl__03::before {
  content: "03";
}
.m_content_ttl__04::before {
  content: "04";
}

@media screen and (min-width: 1080px) {
  .m_content_desc {
    text-align: left;
  }
}

.m_content_desc:not(:last-child) {
  margin-bottom: 24px;
}

.l_img_container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
@media screen and (min-width: 1080px) {
  .l_img_container {
    flex-direction: row;
    gap: 40px;
    place-content: center;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-top: 40px;
    padding: 0 16px;
  }
}

/* ---------- page_2(個別） ---------- */
.hiroba_2 {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.3), rgba(225, 225, 225, 0.3)),
  url(img/page2_kv_sp.webp) center / cover;
}
@media screen and (min-width: 1080px) {
  .hiroba_2 {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.3), rgba(225, 225, 225, 0.3)),
  url(img/page2_kv_pc.webp) center / cover;
  }
}

.hiroba_info__kobetsu {
  background-color: var(--base-color2);
  border-radius: 0 0 72px 72px;
}

.kobetsu_img {
  margin-top: 80px;
}
@media screen and (min-width: 1080px) {
  .kobetsu_img {
  display: none;
  }
}

.kobetsu_img_lg {
  display: none;
}
@media screen and (min-width: 1080px) {
  .kobetsu_img_lg {
  display: flex;
  }
}

.kobetsu_content_ttl {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 40px;
}
@media screen and (min-width: 1080px) {
  .kobetsu_content_ttl {
    font-size: 22px;
  }
}

.kobetsu_desc:not(:last-child) {
  margin-bottom: 48px;
}

/* ---------- page_3(長浦台） ---------- */
.hiroba_3 {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.3), rgba(225, 225, 225, 0.3)),
  url(img/page3_kv_sp.webp) center / cover;
}
@media screen and (min-width: 1080px) {
  .hiroba_3 {
  background: 
  linear-gradient(rgba(225, 225, 225, 0.3), rgba(225, 225, 225, 0.3)),
  url(img/page3_kv_pc.webp) center / cover;
  }
}

.info_ttl__brown {
  background-color: rgba(184, 100, 30, 0.3);
}

.content_ttl__brown::before {
  border-bottom: 3px solid #B8641E;
}

.content_ttl__pc {
  align-items: center;
}

.nagauradai_slide {
  overflow: hidden;
}

.slide_track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: slideLoop 100s linear infinite;
  align-items: flex-end;
}
@media screen and (min-width: 1080px) {
  .slide_track {
  margin-top: 120px;
  }
}

.slide {
  flex-shrink: 0;
}

.slide_img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border-radius: 40px;
}
@media screen and (min-width: 1080px) {
  .slide_img {
  height: 300px;
  }
}

.slide:nth-child(even) .slide_img {
  height: 200px;
}
@media screen and (min-width: 1080px) {
  .slide:nth-child(even) .slide_img {
  height: 250px;
  }
}

@keyframes slideLoop {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---------- privacy policy ---------- */
.privacy_policy {
  line-height: 2.0;
}

.privacy-policy_page__ttl {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: bold;
  margin-bottom: 16px;
}

.privacy-policy_desc, .privacy-policy_list {
  font-size: 12px;
}

.privacy-policy_section__ttl {
  margin-top: 56px;
  font-weight: bold;
}

/* ---------- 404---------- */
.error_404 {
    text-align: center;
}
.error_ttl {
    font-size: clamp(22px, 4vw, 28px);
    font-weight: bold;
    margin-bottom: 40px;
}
.error_txt {
    margin-bottom: 40px;
}
.error_btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--white-color);
    padding: 15px 40px;
    border-radius: 30px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
}
.error-btn:hover {
    opacity: 0.8;
}


/* js */
.js_body.is-active {
  overflow: hidden;
}

.js_navigation {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
@media screen and (min-width: 1080px) {
.js_navigation {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
}

.js_navigation.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.js_hamburger.is-active .m_hamburger-bar:first-child {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.js_hamburger.is-active .m_hamburger-bar:nth-child(2) {
  opacity: 0;
}

.js_hamburger.is-active .m_hamburger-bar:last-child {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.js_fade_item {
  opacity: 0;
  transform: translateY(30px);
}