@charset "UTF-8";
/* Base */
html, body {
  background-color: #f4f1ea; }

body {
  font-family: "中ゴシックBBB", Gothic Medium BBB, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 15px;
  color: #222;
  line-height: 2;
  letter-spacing: 0.05em;
  font-feature-settings: normal; }
  @media only screen and (max-width: 821px) {
    body {
      font-size: 14px;
      line-height: 1.8; } }

::selection {
  background-color: lightyellow; }

p {
  margin-bottom: 1.5em; }

h2 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 28px; }
  @media only screen and (max-width: 821px) {
    h2 {
      font-size: 22px;
      margin-bottom: 20px; } }
  #consultation h2, #katsushika h2 {
    font-size: 28px;
    margin-bottom: 24px; }
    @media only screen and (max-width: 821px) {
      #consultation h2, #katsushika h2 {
        font-size: 20px;
        margin-bottom: 20px; } }
  #kanetto h2 {
    font-size: 20px;
    margin-bottom: 16px; }
    @media only screen and (max-width: 821px) {
      #kanetto h2 {
        font-size: 16px;
        margin-bottom: 20px; } }
  #access h2, #home #contact h2 {
    margin-bottom: 0; }

#title {
  padding: 60px 0 0; }
  @media only screen and (max-width: 821px) {
    #title {
      padding: 40px 0 8px; } }
  #title h2.hdg {
    font-size: 28px;
    margin-bottom: 24px; }
    @media only screen and (max-width: 821px) {
      #title h2.hdg {
        font-size: 20px; } }
    #title h2.hdg span {
      display: block;
      font-size: 16px;
      margin-top: 6px; }
      @media only screen and (max-width: 821px) {
        #title h2.hdg span {
          font-size: 15px;
          margin-top: 4px; } }

h3 {
  font-size: 1em;
  text-align: center; }
  @media only screen and (max-width: 821px) {
    h3 {
      font-size: 1em; } }
  #movie h3 {
    margin-top: 12px; }
  #privacy-policy h3 {
    text-align: left; }

header, footer {
  background: #fff; }

header {
  height: 160px;
  position: relative; }
  @media only screen and (max-width: 821px) {
    header {
      height: 100px; } }

#slider {
  padding: 90px 0 90px;
  background: rgba(0, 128, 0, 0.7); }
  @media only screen and (max-width: 821px) {
    #slider {
      padding: 60px 0; } }

main {
  width: 100%;
  max-width: 100%; }

#content {
  margin-bottom: 60px; }
  @media only screen and (max-width: 821px) {
    #content {
      margin-bottom: 20px; } }

.container {
  width: 80%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 0 0; }
  @media only screen and (max-width: 821px) {
    .container {
      width: 100%;
      padding: 0 24px 0; } }

section {
  margin-bottom: 0px; }
  @media only screen and (max-width: 821px) {
    section {
      margin-bottom: 0px; } }

dl {
  display: grid;
  grid-template-columns: 3fr 9fr;
  grid-gap: 12px; }
  @media only screen and (max-width: 821px) {
    dl {
      grid-template-columns: 1fr; } }
  dl dt {
    font-weight: bold; }
  dl dt, dl dd {
    border-bottom: 0.9px solid #222;
    padding-bottom: 12px;
    margin-bottom: 0; }

#contact-form .row {
  margin-bottom: 8px;
  text-align: left; }
#contact-form label {
  font-weight: bold;
  display: flex;
  align-items: center;
  grid-gap: 8px; }
  #contact-form label span.required {
    font-size: 10px;
    font-weight: 400;
    padding: 2px;
    border: .9px solid black;
    line-height: 1;
    border-radius: 4px;
    display: inline-block; }
#contact-form input[type='text'], #contact-form input[type='email'], #contact-form textarea {
  padding: 0.6em;
  border: 1px solid #aaa;
  width: 100%;
  border-radius: 4px; }
#contact-form input[type='submit'] {
  padding: 10px 32px;
  border-radius: 2em;
  color: #fff;
  background: #222;
  border: 1px solid #222; }
@media only screen and (max-width: 821px) {
  #contact-form p {
    margin-bottom: 0; } }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 36px;
  border-radius: 2em;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-decoration: none;
  border: 1px solid green;
  background: green;
  color: #fff;
  margin-top: 1em; }
  @media only screen and (max-width: 821px) {
    .button {
      padding: 8px 24px; } }
  .grid-cta .button {
    margin: 0; }

.button:hover {
  background: transparent;
  color: green;
  opacity: 1; }

.button i {
  font-size: 0.8em; }

.border {
  border: 2px solid green;
  padding: 32px;
  border-radius: 24px; }
  .border .border {
    border: none;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 16px; }

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

.sub-title {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4px; }
  @media only screen and (max-width: 821px) {
    .sub-title {
      font-size: 20px; } }

.en {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: #222;
  text-align: center;
  margin-bottom: 24px; }

.visible-pc-flex {
  display: flex; }
  @media only screen and (max-width: 821px) {
    .visible-pc-flex {
      display: none !important; } }

/* ============================================
   ヘッダー
============================================ */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 40px 6px;
  max-width: 100%; }
  @media only screen and (max-width: 821px) {
    .header-top {
      padding: 15px 20px 6px; } }

.logo h1 {
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap; }
  @media only screen and (max-width: 821px) {
    .logo h1 {
      font-size: 21px; } }

.logo h1 .subtitle {
  font-size: 15px;
  margin-left: 10px;
  font-weight: 400; }
  @media only screen and (max-width: 821px) {
    .logo h1 .subtitle {
      font-size: 13px;
      margin-left: 0;
      display: block; } }

@media only screen and (max-width: 821px) {
  .logo h1 .houjin {
    font-size: 12px; } }

.logo a {
  display: block; }

/* SNSナビゲーション */
.sns-nav {
  display: flex;
  align-items: center;
  gap: 16px; }

.sns-nav .sns-label {
  font-size: 0.85rem; }

.sns-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  border: 1px solid green;
  border-radius: 2em;
  width: 36px;
  height: 36px;
  display: grid;
  justify-content: center;
  align-items: center; }

.sns-nav a i {
  font-size: 16px;
  color: green; }

.sns-nav .mail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #222;
  font-size: 1rem; }

#gnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  padding: 6px 40px 8px;
  font-size: 0.8rem;
  font-weight: 600; }

#gnav a {
  padding: 2px 8px 2px 6px;
  border-right: 1px solid #222;
  line-height: 1; }

#gnav a:last-child {
  border: none;
  padding-right: 0;
  margin-right: 0; }

#gnav a:first-child {
  padding-left: 0; }

/* ============================================
   メインコンテンツ
============================================ */
#main {
  min-height: 60vh; }

/* キャッチコピーエリア */
.slider-catch {
  text-align: center;
  font-size: 1.2rem;
  line-height: 2.2;
  padding: 16px 0 32px;
  font-weight: 600;
  color: #fff; }
  @media only screen and (max-width: 821px) {
    .slider-catch {
      padding: 0; } }

/* ============================================
   お知らせセクション
============================================ */
#news {
  border-bottom: 1px solid #222;
  padding: 40px 0; }

#news > .container {
  display: flex;
  gap: 40px;
  align-items: flex-start; }

/* 見出し＋もっとみるエリア */
.news-head {
  min-width: 130px; }

.news-head h2 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 4px; }

.news-head .news-en {
  font-size: 0.8rem;
  color: #222;
  display: block;
  margin-bottom: 20px; }

.news-head .more-link {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px; }

/* ニュースリスト */
.news-list {
  flex: 1; }

.news-list li {
  padding: 14px 0;
  border-bottom: 1px solid #222;
  font-size: 0.88rem;
  line-height: 1.6; }

.news-list li:first-child {
  border-top: 1px solid #222; }

.news-list time {
  margin-right: 10px;
  color: var(--color-text-light); }

/* ============================================
   Instagramセクション
============================================ */
#instagram {
  border-bottom: 1px solid #222;
  padding: 40px 0; }

#instagram h2 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 24px; }

/* Instagramフィードプレースホルダー */
.instagram-feed {
  background: #f0f0f0;
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.85rem; }

/* ============================================
   「東堀切くすのき園」って？セクション
============================================ */
#about {
  border-bottom: 12px solid rgba(0, 128, 0, 0.7);
  padding: 40px 0 80px; }
  @media only screen and (max-width: 821px) {
    #about {
      padding: 60px 0 40px; } }

/* くすのき園についてサブセクション */
.about-intro {
  text-align: center;
  margin-bottom: 40px; }

.about-intro p {
  text-align: left;
  max-width: 700px;
  margin: 0 auto 12px; }

.about-detail-link {
  text-align: center;
  margin-top: 20px;
  font-size: 0.85rem;
  color: #222; }

.about-cta {
  text-align: center;
  margin-top: 16px; }

/* ご利用案内・施設情報 サブブロック */
.service-block,
.facilities-block {
  text-align: center;
  margin-top: 60px; }

.service-block .service-text,
.facilities-block .facilities-text {
  text-align: left;
  max-width: 700px;
  margin: 0 auto 28px; }

/* ============================================
   「東堀切くすのき園」の生活セクション
============================================ */
#life {
  border-bottom: 12px solid rgba(0, 128, 0, 0.7);
  padding: 90px 0; }
  @media only screen and (max-width: 821px) {
    #life {
      padding: 60px 0 40px; } }

/* 1日の過ごし方 */
.life-day {
  text-align: center;
  margin-bottom: 40px; }

.life-day h3 {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 4px; }

.life-day .en {
  margin-bottom: 28px; }

/* タイムライン（左線付き） */
.timeline {
  max-width: 320px;
  margin: 40px auto; }

.timeline li {
  font-size: 0.9rem;
  margin-bottom: 10px;
  display: flex;
  gap: 24px; }

.timeline li .time {
  min-width: 60px;
  font-weight: bold; }

/* 活動・食事・健康・送迎カラム */
.life-cols {
  margin-top: 40px; }

.life-cols .grid h3 {
  font-size: 0.95rem;
  margin: 12px 0 4px; }

/* 画像プレースホルダー */
.img-placeholder {
  background: #e0e0e0;
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 0.8rem; }

/* 見学・求人枠 */
.life-border-block {
  margin-top: 40px; }
  @media only screen and (max-width: 821px) {
    .life-border-block {
      padding: 0; } }

.life-border-block .border {
  padding: 32px 40px; }
  @media only screen and (max-width: 821px) {
    .life-border-block .border {
      padding: 28px 24px 32px; }
      .life-border-block .border .row {
        grid-gap: 36px; } }

.life-border-block .row-2 .grid h3 {
  font-size: 1rem;
  margin-bottom: 12px; }

.life-border-block .grid-cta {
  margin-top: 20px;
  display: grid;
  justify-content: center; }

/* ============================================
   くすのき園ギャラリーセクション
============================================ */
#gallery {
  border-bottom: 12px solid rgba(0, 128, 0, 0.7);
  padding: 60px 0; }

#gallery .en {
  text-align: center;
  margin-bottom: 28px; }

/* ギャラリー説明エリア */
.gallery-desc {
  background: #f0f0f0;
  padding: 40px;
  text-align: center;
  margin-bottom: 24px;
  font-size: 0.9rem;
  line-height: 2; }

/* ============================================
   東堀切くすのき園相談支援センターセクション
============================================ */
#consultation {
  padding: 90px 0 40px; }
  @media only screen and (max-width: 821px) {
    #consultation {
      padding: 60px 0 40px; } }

#consultation .border {
  padding: 48px 40px;
  margin-bottom: 0; }

#consultation .border p {
  margin-bottom: 12px; }

.consultation-more {
  text-align: center;
  font-size: 0.85rem;
  margin: 16px 0;
  color: green; }

/* アコーディオン共通 */
.accordion-trigger {
  font-size: 0.85rem;
  font-weight: bold;
  color: green;
  cursor: pointer;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid green;
  padding: 12px 0;
  width: 100%;
  border-radius: 12px;
  display: block;
  margin-bottom: 20px; }

.consultation-accordion {
  text-align: center;
  margin-bottom: 8px; }

.accordion-content {
  display: none;
  padding-top: 12px;
  margin-top: 8px; }

.accordion-content h4 {
  font-size: 0.95rem;
  font-weight: bold;
  margin: 20px 0 8px; }

.dot-list li::before {
  content: '・'; }

/* ============================================
   かつしか相談支援事業所支援センターセクション
============================================ */
#katsushika {
  padding: 0 0 60px; }

#katsushika .border {
  padding: 48px 40px; }

/* もっとみる・アコーディオン行 */
.katsushika-toggle-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0 4px; }

.katsushika-more {
  font-size: 0.85rem; }

.katsushika-accordion {
  text-align: center; }

.katsushika-detail {
  display: none; }

/* ============================================
   相談支援専門員研修会「かねっと」セクション
============================================ */
#kanetto {
  padding: 20px 0 0; }

#kanetto .border {
  padding: 48px 40px; }

/* 連絡先テーブル */
.contact-table {
  width: 100%;
  font-size: 0.88rem;
  margin-top: 20px; }

.contact-table tr {
  vertical-align: top; }

.contact-table th {
  font-weight: normal;
  width: 120px;
  padding: 4px 0;
  color: var(--color-text-light); }

.contact-table td {
  padding: 4px 0; }

/* かねっと写真カラム */
.kanetto-photos {
  margin-top: 24px; }

/* ============================================
   アクセスセクション
============================================ */
#access {
  border-bottom: 12px solid rgba(0, 128, 0, 0.7);
  padding: 40px 0 80px;
  text-align: center; }
  @media only screen and (max-width: 821px) {
    #access {
      padding: 20px 0 40px; } }

#access .en {
  margin-bottom: 28px; }

/* 地図プレースホルダー */
.map-area {
  background: #e8e8e8;
  width: 100%;
  height: 260px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.85rem; }

.access-info {
  font-size: 0.9rem;
  line-height: 2; }

.access-info a {
  text-decoration: underline; }

/* ============================================
   お問い合わせセクション
============================================ */
#home #contact, #facilities #contact {
  padding: 60px 0;
  text-align: center;
  border-bottom: 1px solid var(--color-border); }
#home #contact .en, #facilities #contact .en {
  margin-bottom: 28px; }

/* ============================================
   フッター
============================================ */
#footer {
  padding: 40px 40px 20px;
  margin-top: 20px; }
  @media only screen and (max-width: 821px) {
    #footer {
      padding: 32px 20px 16px;
      margin-top: 20px; } }

.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 20px;
  gap: 20px; }

/* フッターロゴ・住所 */
.footer-logo h2 {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 6px; }

.footer-logo address {
  font-style: normal;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--color-text-light); }

/* トップに戻る */
.page-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9rem;
  gap: 4px;
  cursor: pointer; }
  @media only screen and (max-width: 821px) {
    .page-top {
      display: none; } }

.page-top i {
  font-size: 1.2rem; }

/* コピーライト・サブナビ */
.footer-bottom {
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px; }

.footer-bottom small {
  font-size: 10px; }

#unav {
  display: flex;
  gap: 20px; }

#unav a {
  font-size: 10px; }

#unav a:hover {
  opacity: 0.7; }

/* Movie */
.mov {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000; }
  .mov video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

/* Nav */
#nav-menu .drawer-nav {
  position: fixed;
  z-index: 100002;
  top: 0;
  overflow: hidden;
  height: 100%;
  color: #222;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px 20px; }
  #nav-menu .drawer-nav a {
    text-align: left;
    display: block;
    font-weight: bold;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #555; }
  #nav-menu .drawer-nav .sns-nav {
    margin-top: 20px; }
    #nav-menu .drawer-nav .sns-nav a {
      display: grid; }
  #nav-menu .drawer-nav #copyright {
    font-size: 10px;
    padding: 8px 20px; }
#nav-menu .drawer-hamburger {
  z-index: 1000002;
  width: 2rem;
  padding: 0;
  padding: 23px 1.4rem 34px !important;
  margin-top: -1px !important;
  background-color: rgba(255, 255, 255, 0.3); }
#nav-menu .drawer-hamburger-icon, #nav-menu .drawer-hamburger-icon::after, #nav-menu .drawer-hamburger-icon::before {
  width: 100%;
  height: 3px; }

/* ============================================
   レスポンシブ
============================================ */
@media (max-width: 768px) {
  .header-top {
    flex-wrap: wrap;
    gap: 10px; }

  #news > .container {
    flex-direction: column;
    gap: 20px; }

  .row-2 > .grid,
  .row-3 > .grid,
  .row-4 > .grid,
  .row-6 > .grid {
    flex: 1 1 100%; }

  .footer-inner {
    flex-direction: column-reverse; }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column-reverse; }

  #katsushika .border,
  #kanetto .border,
  #consultation .border {
    padding: 28px 20px; } }

/*# sourceMappingURL=style.css.map */