@charset "utf-8";
/* =====================================
   樫の会 HP
===================================== */

/* Variables */
/* =====================================
   Root
===================================== */

:root{

  --haga-main:#D8B45A;
  --haga-light:#F6E8B5;

  --fujimi-main:#8BC34A;
  --fujimi-light:#DFF0C8;

  --orange:#F5A623;

  --text-main:#4A3A2A;
  --text-sub:#666666;

  --bg-main:#FFFDF8;
  --bg-section:#FFF9ED;

  --border-color:#E6E1D7;

  --radius-sm:10px;
  --radius-md:20px;
  --radius-lg:40px;

  --shadow-soft:0 5px 15px rgba(0,0,0,.08);

}

/* Common */
--bg-main: #FFFDF8;

.container-kashi {
	
}
.section-title {
	
}
.btn-contact {
	
}
.btn-compare{

}

/* =====================================
   Reset & Base
===================================== */

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Zen Maru Gothic",sans-serif;
  background:var(--bg-main);
  color:var(--text-main);
}

/* =====================================
   Common
===================================== */

h1,h2,h3,h4,h5,h6{
    font-weight:700;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
  transition:.3s;
}

ul,
ol{
  margin:0;
  padding:0;
  list-style:none;
}

p{
  margin:0 0 1.2rem;
}

section{
  position:relative;
}

/* =====================================
   Layout
===================================== */

.container-kashi{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}


/* =====================================
   Header
===================================== */
/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  border-bottom:1px solid var(--border-color);
}

.site-header .navbar{
  min-height:80px;
  padding:0;
}

.site-logo{
  width:180px;
}

.site-logo img{
  width:100%;
  height:auto;
}

.site-header .nav-link{
  font-weight:700;
  color:var(--text-main);
}

.site-header .nav-link:hover{
  color:var(--orange);
}

.header-tel{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--orange);
  color:#fff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.2rem;
}

@media (max-width:991.98px){
  .site-header .navbar{
    min-height:64px;
  }

  .site-logo{
    width:160px;
  }

  .navbar-collapse{
    padding:16px 0;
  }

  .header-tel{
    width:auto;
    height:auto;
    border-radius:999px;
    padding:8px 16px;
    justify-content:flex-start;
  }
}

/* Hero */
/* =====================================
   Hero
===================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: 0 0 70px;
  background: var(--bg-main);
}

.hero-container {
  position: relative;
}

.hero-visual {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
}

/* 背景イラスト */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-bg picture,
.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-bg img {
  object-fit: cover;
  object-position: center top;
}

/* Hero内コンテンツ */
.hero-main {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

.hero-center {
  text-align: center;
}

.hero-side {
  text-align: center;
}

.hero-side img {
  display: block;
  max-width: 300px;
  margin: 0 auto;
}

/* メインコピー */
.hero-title {
  margin: 0 0 20px;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.35;
}

.hero-title span {
  display: block;
  color: var(--orange);
}

/* 施設ロゴ */
.top-hero-facility-area {
  margin: 22px 0 12px;
  text-align: center;
}

.top-hero-facility-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0;
}

.top-hero-facility-logos img {
  display: block;
  width: clamp(96px, 12vw, 150px);
  height: auto;
}

/* サービス名帯 */
.top-hero-service-label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 24px;
  border-radius: 999px;
  background: #4d3827;
  color: #fff;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.hero-lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.9;
  font-weight: 700;
}

/* 特徴カード */
.hero-icons {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

.hero-icon-card {
  height: 100%;
  padding: 22px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #fff;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.hero-icon-card__img {
  height: 48px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-icon-card__img img {
  max-height: 48px;
  margin: 0 auto;
}

.hero-icon-card p {
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
}


/* =====================================
   Hero：991px以下
===================================== */

@media (max-width: 991.98px) {
  .hero {
    padding: 0 0 44px;
  }

  .hero-visual {
    min-height: 320px;
    align-items: flex-start;
  }

  .hero-main {
    --bs-gutter-x: 0;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  /*
    991px以下では、背景画像内の左右うさぎに合わせて
    施設ロゴ・サービス名帯・リード文を下寄せに調整。
  */
  .top-hero-facility-area {
    margin-top: 58px;
    margin-bottom: 8px;
  }

  .top-hero-facility-logos {
    gap: 12px;
  }

  .top-hero-facility-logos img {
    width: 96px;
  }

  .top-hero-service-label {
    margin: 0 0 8px;
    padding: 5px 16px;
    font-size: 0.78rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
  }

  .hero-lead {
    margin-top: 44px;
    font-size: 0.86rem;
    line-height: 1.75;
  }

  /*
    左右うさぎカラムは、レイアウト上の位置ごと上げるため
    transformではなくmarginで調整。
  */
  .hero-side--left {
    text-align: left;
    margin-top: -286px;
    margin-left: -35px;
  }

  .hero-side--right {
    text-align: right;
    margin-top: -286px;
    margin-right: -35px;
  }

  .hero-side img {
    max-width: 210px;
  }

  .hero-icon-card {
    padding: 8px;
  }

  .hero-icon-card p {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
  }
}

/* =====================================
   Hero：767px以下
===================================== */

@media (max-width: 767.98px) {
  .hero-visual {
    min-height: 220px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .top-hero-facility-area {
    margin-top: 98px;
    margin-bottom: 6px;
  }

  .top-hero-facility-logos {
    gap: 8px;
  }

  .top-hero-facility-logos img {
    width: 76px;
  }

  .top-hero-service-label {
    display: block;
    width: 190px;
    margin: 0 auto 8px;
    padding: 5px 12px;
    font-size: 0.68rem;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
  }

  .top-hero-service-label span {
    display: block;
  }

  .hero-lead {
    font-size: 0.78rem;
    line-height: 1.65;
  }

  .hero-side--left {
    margin-top: -270px;
    margin-left: -35px;
  }

  .hero-side--right {
    margin-top: -270px;
    margin-right: -35px;
  }
}



/* =====================================
   Compare
===================================== */
/* Compare */
.compare{
  padding:80px 0;
  background:var(--bg-section);
}

.section-heading{
  margin-bottom:40px;
}

.section-title{
  font-weight:700;
}

.compare-card{
  background:#fff;
  border-radius:28px;
  padding:24px;
  box-shadow:var(--shadow-soft);
  position:relative;
}

.compare-card__photo{
  position:relative;
  z-index:2;
  margin-top:0;
  margin-bottom:20px;
  border-radius:var(--radius-md);
  overflow:hidden;
}


.compare-card__photo img{
  width:100%;
}


.compare-card__head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.compare-card__logo{
  height:56px;
  width:auto;
  flex:0 0 auto;
}

.compare-card__name-box{
  flex:1;
  min-height:44px;
  padding:6px 24px;
  border-radius:999px;
  display:flex;
  align-items:center;
}

.compare-card__head--haga .compare-card__name-box{
  border:2px solid var(--orange);
}

.compare-card__head--fujimi .compare-card__name-box{
  border:2px solid var(--fujimi-main);
}

.compare-card__name{
  font-size:1.6rem;
  font-weight:700;
  line-height:1.2;
  color:var(--text-main);
}

.compare-card__title{
  margin:0 0 8px;
  font-size:1.55rem;
  font-weight:700;
  line-height:1.45;
}

.compare-card__icons{
  margin-top:18px;
}

.compare-mini-card{
  height:100%;
  text-align:center;
  padding:10px 4px;
  border-radius:var(--radius-sm);
  background:#fffdf7;
  border:1px solid #ead8b0;
}

.compare-mini-card img{
  height:34px;
  width:auto;
  margin:0 auto 6px;
}

.compare-mini-card--rabbit img{
  height:56px;
}

.compare-mini-card p{
  margin:0;
  font-size:.75rem;
  font-weight:700;
  line-height:1.35;
}

.compare-card__btn{
  display:block;
  width:100%;
  margin-top:18px;
  padding:12px 20px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  text-align:center;
  font-weight:700;
  text-decoration:none;
}

.compare-card__btn:hover{
  color:#fff;
}


.compare-card__name-note {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: 0.08em;
}

@media (max-width: 767.98px) {
  .compare-card__name-note {
    display: block;
    margin-left: 0;
    margin-top: 0.25em;
    font-size: 0.68em;
  }
}

/* =====================================
   Top Sections
===================================== */

.top-info-section{
  padding:80px 0;
}

.features,
.price{
  background:var(--bg-main);
}

.services,
.access{
  background:var(--bg-section);
}

/* News */
.news-list{
  max-width:900px;
}

.news-item{
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  margin-bottom:14px;
}

.news-item a{
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 24px;
  color:var(--text-main);
}

.news-date{
  font-weight:700;
  color:var(--text-sub);
  white-space:nowrap;
}

.news-category{
  display:inline-block;
  padding:4px 14px;
  border-radius:999px;
  background:var(--fujimi-light);
  font-size:.875rem;
  font-weight:700;
  white-space:nowrap;
}

.news-title{
  font-weight:700;
}

.btn-news-more{
  display:inline-block;
  padding:12px 34px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-weight:700;
}

.service-card__cut {
  height: 96px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.service-card__cut img {
  max-width: 110px;
  max-height: 96px;
  width: auto;
  height: auto;
}

@media (max-width:767.98px){
  .news-item a{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
	  .service-card__cut {
    height: 82px;
    margin-bottom: 14px;
  }

  .service-card__cut img {
    max-width: 94px;
    max-height: 82px;
  }
}
/* CTA */

/* Footer */
/* =====================================
   Footer
===================================== */
.site-footer {
  position: relative;
  background: #fffdf8;
  border-top: 2px solid #74a85d;
  color: #4d3827;
}

.footer-content {
  padding-top: 72px;
  padding-bottom: 64px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.1fr;
  gap: 72px;
  align-items: start;
}

.footer-brand {
  position: relative;
}

.footer-logo {
  width: 180px;
  max-width: 100%;
  height: auto;
}

.footer-message {
  margin: 28px 0 0;
  font-size: 1.05rem;
  line-height: 1.9;
  font-weight: 700;
}

.footer-bunny {
  display: block;
  width: 100px;
  height: auto;
  margin-top: 18px;
  transform: scaleX(1);
}

.footer-title {
  display: inline-block;
  margin: 0 0 24px;
  padding-bottom: 10px;
  border-bottom: 3px solid #74a85d;
  color: #4d3827;
  font-size: 1.35rem;
  font-weight: 700;
}

.footer-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav-list li {
  border-bottom: 1px dotted #c9c0b7;
}

.footer-nav-list a {
  display: block;
  padding: 14px 0;
  color: #4d3827;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-nav-list a::before {
  content: "›";
  margin-right: 12px;
  color: #74a85d;
  font-size: 1.5em;
  vertical-align: -1px;
}

.footer-nav-list a:hover {
  padding-left: 6px;
  color: #5d963f;
}

.footer-tel,
.footer-hours {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

.footer-tel a {
  color: #4d3827;
  font-size: 2rem;
  font-weight: 700;
  text-decoration: none;
}

.footer-hours {
  font-size: 1rem;
  font-weight: 700;
}

.footer-icon {
  color: #f5a016;
  font-size: 1.8rem;
  line-height: 1;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 15px 24px;
  border-radius: 999px;
  background: #f5a016;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 5px 0 rgba(201, 118, 0, 0.15);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.footer-contact-btn:hover {
  transform: translateY(-2px);
  background: #e99109;
  color: #fff;
}

.footer-bottom {
  background: #f7f0e4;
}

.footer-copy {
  margin: 0;
  padding: 22px 0;
  text-align: center;
  color: #6e5b4a;
}

@media (max-width: 991.98px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }

  .footer-contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .footer-content {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .footer-inner {
    display: flex;
    flex-direction: column;
    gap: 42px;
  }

  /* ロゴ＋コピーだけ横並び */
  .footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: left;
    width: 100%;
  }

  .footer-logo {
    width: 120px;
    flex-shrink: 0;
  }

  .footer-message {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.7;
  }

  .footer-bunny {
    display: none;
  }

  /* 以降は縦並び */
  .footer-nav,
  .footer-contact {
    width: 100%;
  }

  .footer-title {
    margin-bottom: 18px;
    font-size: 1.2rem;
  }

  .footer-tel a {
    font-size: 1.7rem;
  }

  .footer-contact-btn {
    width: 100%;
    padding: 16px 18px;
    font-size: 0.95rem;
  }
}
/* Responsive */

/* ページ先頭へ戻るボタン */
.page-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;

  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;

  border: 1px solid #e8dcc8;
  border-radius: 50%;
  background: #fff8eb;
  color: #55724f;

  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;

  box-shadow: 0 6px 16px rgba(77, 56, 39, 0.16);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background-color 0.2s ease;
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-top:hover {
  background: #f5ecdc;
}

.page-top:focus-visible {
  outline: 3px solid rgba(85, 114, 79, 0.35);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .page-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }
}

.page-top {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 9999 !important;

  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;

  border: 1px solid #e8dcc8 !important;
  border-radius: 50% !important;
  background: #fff8eb !important;
  color: #55724f !important;

  font-size: 1.45rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;

  box-shadow: 0 6px 16px rgba(77, 56, 39, 0.16) !important;

  opacity: 1 !important;
  visibility: visible !important;
}

.footer-logo-list {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-logo-link:hover {
  opacity: 0.82;
  transform: translateY(-2px);
}

.footer-logo--kashinokai {
  width: 110px;
}

.footer-logo--facility {
  width: 60px;
}

@media (max-width: 767.98px) {
  .footer-logo-list {
    justify-content: center;
    gap: 8px;
  }

  .footer-logo--kashinokai {
    width: 108px;
  }

  .footer-logo--facility {
    width: 58px;
  }
}