@charset "utf-8";

/* =========================================
   ゆめいろぱれっと：クリーンアップ・最終安定版
   - PC：1024pxストッパー / 支援カード見切れ許容
   - スマホ：1列・中央揃えレスポンシブ
   - デザイン：右下はみ出し画像 / 虹色ロゴ / 固定ボタン
========================================= */

:root {
  --font-hero: 'YAFdJuA0uX4_0', 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
  --col-brown: #683E38;
  --col-shadow: #FFCFC3;
  --col-green: #ABCF52;
  --col-dekita: #F64823;
  
  --c1: #FF6D94; --c2: #FF8200; --c3: #FFB803; --c4: #ABCF52;
  --c5: #71A4EC; --c6: #945DFF; --c7: #FF6BFE; --c8: #FF0000;

  --fs-47: clamp(26px, 5.5vw, 55px); 
  --fs-60: clamp(34px, 7vw, 75px); 
  --fs-bottom: clamp(26px, 6.5vw, 75px); 
}

/* -----------------------------------------
   1. 共通・ベース設定（改行対策含む）
----------------------------------------- */
html {
  scroll-padding-top: 120px !important; 
  scroll-behavior: smooth;
}

body {
  word-break: normal !important;      /* 強制的な単語分割を禁止 */
  overflow-wrap: break-word !important; /* 長すぎる単語は折り返す */
  text-align: left !important;        /* 自然な左揃え */
}

/* 改行禁止ユーティリティ */
.no-break {
  white-space: nowrap !important;
  display: inline-block !important;
}

/* -----------------------------------------
   2. メインビジュアルエリア（Hero）
----------------------------------------- */
#header.ultimate-hero {
  background-color: #FFFFF8 !important;
  padding: 80px 0 60px 0 !important;
  font-family: var(--font-hero) !important;
  position: relative !important;
}

.hero-canvas {
  width: 100% !important;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-text-top { margin-top: 10px !important; margin-bottom: 5px !important; text-align: center; }
.hero-sub-title { color: var(--col-brown) !important; font-size: calc(var(--fs-47) * 0.7) !important; font-weight: 700 !important; margin: 0 !important; }
.hero-main-logo { font-size: var(--fs-60) !important; font-weight: 700 !important; line-height: 1.0 !important; margin: 0 !important; }
.hero-main-logo span { display: inline-block; text-shadow: 2px 2px 0 var(--col-shadow) !important; }

.hero-vertical-group { position: absolute; top: 0px; right: 5%; display: flex; flex-direction: row; gap: 10px !important; align-items: flex-start; z-index: 50; }
.v-box { writing-mode: vertical-rl; background-color: var(--col-green) !important; color: #fff !important; font-size: var(--fs-47) !important; font-weight: 700 !important; padding: 20px 12px !important; white-space: nowrap; }
.v-box-dark { margin-top: 180px !important; } 

.hero-main-logo .c1 { color: var(--c1) !important; } .hero-main-logo .c2 { color: var(--c2) !important; }
.hero-main-logo .c3 { color: var(--c3) !important; } .hero-main-logo .c4 { color: var(--c4) !important; }
.hero-main-logo .c5 { color: var(--c5) !important; } .hero-main-logo .c6 { color: var(--c6) !important; }
.hero-main-logo .c7 { color: var(--c7) !important; } .hero-main-logo .c8 { color: var(--c8) !important; }

.hero-photo-frame { width: 60% !important; max-width: 700px; aspect-ratio: 1 / 1 !important; border-radius: 40% !important; overflow: hidden; }
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-text-bottom { margin-top: 20px !important; text-align: center; color: var(--col-brown) !important; position: relative; z-index: 5; }
.bottom-line { font-size: calc(var(--fs-bottom) * 0.7) !important; font-weight: 700 !important; line-height: 1.5 !important; position: relative; z-index: 10; }
.bottom-line span { color: var(--col-dekita) !important; font-weight: 900 !important; }

.hero-palette-illust {
  position: absolute; top: 40px !important; bottom: 20px !important;
  right: 5% !important; width: clamp(100px, 25vw, 200px);
  transform: none !important; z-index: -1; opacity: 0.9; margin-right: -20%;
}

/* -----------------------------------------
   3. 特徴リスト
----------------------------------------- */
.feature-list {
  list-style: none; padding: 0; margin: 0 0 80px 40% !important; 
}

.feature-list li {
  font-size: 20px; font-weight: 500; color: var(--col-brown); margin-bottom: 30px;
  display: flex; align-items: center;
}

.feature-list li span {
  width: 46px; height: 46px; position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; margin-right: 3px !important;
}

.feature-list li span::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1; opacity: 0.35;
  border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
}

.feature-list li:nth-child(1) span::before { background-color: var(--c1); }
.feature-list li:nth-child(2) span::before { background-color: var(--c2); }
.feature-list li:nth-child(3) span::before { background-color: var(--c3); }
.feature-list li:nth-child(4) span::before { background-color: var(--c4); }
.feature-list li:nth-child(5) span::before { background-color: var(--c5); }

/* -----------------------------------------
   4. 支援内容（カード・画像・グリッド）
----------------------------------------- */
.support-grid {
  display: flex; flex-wrap: wrap; gap: 25px; max-width: 1000px; margin: 0 auto;
}

.support-card {
  position: relative !important; background-color: #FFF9E1;
  padding: 30px 20px !important; border-radius: 15px;
  text-align: center !important; overflow: visible !important;
}

.support-card .card-title {
  margin-bottom: 15px; font-weight: bold; padding: 0 50px !important;
}

.support-card .card-text {
  text-align: left; padding: 0 10px !important;
}

.support-card-img {
  position: absolute !important; right: -10px !important; bottom: -10px !important;
  width: 80px !important; z-index: 10 !important; top: auto !important; transform: none !important; margin: 0 !important;
}

.support-card-img img {
  width: 100%; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  background-color: #fff; padding: 3px;
}

/* -----------------------------------------
   5. プログラム・タイトル（虹アイコン）
----------------------------------------- */
.title-container {
  position: relative; display: inline-block;
}

.title-niji {
  position: absolute; top: 10%; transform: translateY(-50%);
  right: -15px; width: 45px; z-index: 1;
}

/* -----------------------------------------
   6. セクション余白・アンカー調整
----------------------------------------- */
#facility.inner, #contact.apply-section {
  padding-top: 0 !important; margin-top: 0 !important;
}

#facility .page-wrap, #contact.apply-section {
  display: block !important; min-height: auto !important;
}

#facility .sec-header, #contact h3 {
  margin-top: 0 !important; padding-top: 40px !important;
}

.facility-card { position: relative; }
.facility-hand-img {
  position: absolute; top: -50px; right: -30px;
  width: 120px; z-index: 5; transform: rotate(15deg); pointer-events: none;
}

/* -----------------------------------------
   7. 共通パーツ（表・スタンプ・ボタン・スケジュール）
----------------------------------------- */
.usage-table { width: 100%; border-collapse: collapse; background-color: #fff; border: 1px solid #704d3d; }
.usage-table th, .usage-table td { border: 1px solid #704d3d; padding: 15px 5px; text-align: center; font-weight: bold; }

/* --- スケジュール表の微調整（index.htmlから移行） --- */
.schedule-card { position: relative; overflow: hidden; }

.schedule-body {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.timeline {
  margin-left: 0 !important; /* 左の隙間を削除 */
  position: relative;
}

.timeline::before {
  left: 3.8rem !important; /* 時間の幅に合わせて調整 */
}

.timeline-item { position: relative; }

.timeline-item::after {
  left: 3.8rem !important; /* 線と同じ位置に */
}

.time-pill, .time-pill-none {
  min-width: 3.0rem !important; /* 幅を縮小 */
  text-align: right !important;
  margin-right: 10px !important; /* 線との距離 */
  display: inline-block;
}

.schedule-stamp { position: absolute; bottom: 20px; right: 30px; width: 100px; pointer-events: none; opacity: 0.9; }

/* -----------------------------------------
   A. PC版：1024pxストッパー（769px以上）
----------------------------------------- */
@media screen and (min-width: 769px) {
  body, #container, #header, #footer, section.inner { min-width: 1024px !important; }

  .sticky-header { height: 80px !important; width: 100% !important; }
  .sh-inner { flex-direction: column !important; padding: 0 20px !important; justify-content: flex-start !important; gap: 0 !important; }
  .sh-row-top, .sh-row-bottom { display: flex !important; width: 100%; height: 40px !important; align-items: flex-end; }
  .sh-row-top { justify-content: space-between; }
  .sh-brand img { height: 40px !important; }
  .sh-tel-info .tel-number { font-size: 19px !important; color: #5BAE67 !important; text-decoration: none; }
  .sh-row-bottom { justify-content: center !important; position: relative !important; align-items: flex-start !important; }
  .sh-header-btn { position: absolute !important; right: 0; background-color: #f39800 !important; color: #fff !important; padding: 5px 18px !important; border-radius: 50px !important; font-size: 13px !important; }

  .support-grid { min-width: 1000px !important; justify-content: center; }
  .support-card { flex: 0 0 calc(50% - 15px) !important; min-width: 480px !important; }

  .usage-car-img { position: absolute; width: 160px !important; top: -100px; right: 12%; z-index: 10; }
  .concept-intro { width: 80% !important; margin: 0 auto 60px !important; line-height: 2.0; text-align: center; }

  .openbtn, #page-top.fixed-inquiry { display: none !important; }
}

/* -----------------------------------------
   B. スマホ版：レスポンシブ（768px以下）
----------------------------------------- */
@media screen and (max-width: 768px) {
    /**/
    .hero-palette-illust {
      position: absolute; top: 40px !important; bottom: 20px !important;
      right: 5% !important; width: clamp(100px, 25vw, 200px); transform: none !important; z-index: -1; opacity: 0.9; margin-right:-20%;
    }
    .hero-text-bottom { margin-top: 100px !important; text-align: center; color: var(--col-brown) !important; position: relative; z-index: 5; }

    /*縦書き*/
    .hero-vertical-group {
        position: absolute; top: 10px !important; right: 4%; 
        display: flex; flex-direction: row; gap: 5px !important; z-index: 50; 
    }
    .v-box { font-size: 1.2rem !important; padding: 4px 2px !important; padding-top: 20px !important; }
    

    /**/
    .sticky-header { height: 60px !important; }
    .sh-inner { flex-direction: row !important; height: 60px !important; }
    .sh-row-bottom, .sh-pc-contact, .sh-header-btn { display: none !important; }
    
    /**/
    .feature-list { margin: 0 0 60px 10% !important; }
    .concept-intro { width: 90% !important; margin: 0 auto 60px !important; }


    #page-top.fixed-inquiry {
        position: fixed !important; right: 15px !important; bottom: 85px !important; z-index: 9999 !important;
        display: block !important; width: auto !important; height: auto !important;
    }
    #page-top.fixed-inquiry a {
        background-color: #f39800 !important; color: #fff !important; padding: 12px 20px !important;
        border-radius: 50px !important; font-weight: 700; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        display: block !important; white-space: nowrap; text-decoration: none;
    }

    /**/
    .support-grid { flex-direction: column !important; }
    .support-card { flex: 1 1 100% !important; padding: 25px 15px !important; }
    .support-card .card-title, .support-card .card-text { padding: 0 40px !important; }
    .support-card-img { width: 65px !important; right: -5px !important; bottom: -5px !important; }

    /**/
    .usage-car-img { position: absolute !important; right: 5% !important; width: 100px !important; top: -55px !important; }
    .facility-hand-img { width: 80px; top: -40px; right: -10px; }
    .title-niji { width: 35px; right: -40px; }
    .concept-btn { margin-top: 110px !important; }
}