@charset "utf-8";

body,p,td,li {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight: 800;
	font-size:1rem;
	line-height:1.8em;
	color: #4f4b47;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-weight:800;
	line-height:1.5em;
}

.font-g {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

.font-m {
	font-family: "BIZ UDPMincho", "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",source-han-serif-japanese,"游明朝","Yu Mincho","游明朝体",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
}

.bold {
	font-weight:800;
}

/* --------------------------------------------------
   サイト全体のコンテンツ幅と左右余白の統一
-------------------------------------------------- */
/* ヘッダー、フッター、各セクションの端を揃えます */
.container,
.page-header-content,
.target-container,
.service-container,
.facility-container {
    /* すべてのコンテンツの最大幅を1100pxに統一 */
    max-width: 1164px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* モバイル時の左右余白（標準の約2倍：24px） */
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* PCサイズ（992px以上）のときの余白 */
@media screen and (min-width: 992px) {
    .container,
    .page-header-content,
    .target-container,
    .service-container,
    .facility-container {
        /* PC時の左右余白（標準の約4倍：48px〜50px） */
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
}
/* --------------------------------------------------
   ナビゲーションメニューの両端の余白を消して揃える
-------------------------------------------------- */
@media screen and (min-width: 992px) {
    /* 一番左のメニュー（ホーム）の左パディングを0にする */
    .navbar-nav .nav-item:first-child .nav-link {
        padding-left: 0 !important;
    }
    
    /* 一番右のメニュー（アクセスなど）の右パディングを0にする */
    .navbar-nav .nav-item:last-child .nav-link {
        padding-right: 0 !important;
    }
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

.fs-4, .fs-5 {
    line-height:1.1em;
}

/* マージン、パディング
==================================================== */
.mt-40 { margin-top:40px; }
.mb-40 { margin-bottom:40px; }
.pt-40 { padding-top:40px; }
.pb-40 { padding-bottom:40px; }
.mt-80 { margin-top:80px; }
.mb-80 { margin-bottom:80px; }
.pt-80 { padding-top:80px; }
.pb-80 { padding-bottom:80px; }
.ps-80 { padding-left:80px; }
.pe-80 { padding-right:80px; }
.mt-110 { margin-top:110px; }
.mb-110 { margin-bottom:110px; }
.pt-110 { padding-top:110px; }
.pb-110 { padding-bottom:110px; }
.ps-110 { padding-left: 110px; }

.my-80 { margin-top:80px; margin-bottom:80px; }
.my-110 { margin-top:110px; margin-bottom:110px; }
.py-80 { padding-top:80px; padding-bottom:80px; }
.px-80 { padding-left:80px; padding-right:80px; }
.py-110 { padding-top:110px; padding-bottom:110px; }

@media (max-width: 767.98px) {
	.mt-40, .mt-80, .mt-110 { margin-top:30px; }
	.mb-40, .mb-80, .mb-110 { margin-bottom:30px; }
	.pt-40, .pt-80, .pt-110 { padding-top:30px; }
	.pb-40, .pb-80, .pb-110 { padding-bottom:30px; }
	.ps-80, .ps-110 { padding-left:30px; }
	.pe-80, .pe-110 { padding-right:30px; }
	.my-80, .my-110 { margin-top:30px; margin-bottom:30px; }
	.py-80, .py-110 { padding-top:30px; padding-bottom:30px; }
	.mx-80 { margin-left:30px; margin-right:30px; }
}

.lh-1 { line-height: 1em; }
.lh-1_5 { line-height: 1.5em; }
.lh-1_8 { line-height: 1.8em; }
.lh-2 { line-height: 2em; }
.lh-3 { line-height: 3em; }



/* ====================================================
   Header Custom Styles
   ==================================================== */

:root {
    --theme-nav-bg: #f29b80;       /* ナビバーの背景色 */
    --theme-menu-color: #f26a5a;   /* メニューボタンの色 */
    --theme-orange: #ED6C00;       /* その他アイコン色 */
}

.text-theme-orange {
    color: var(--theme-orange) !important;
}

/* ナビゲーションリンク */
.navbar-nav .nav-link {
    transition: opacity 0.3s;
}
.navbar-nav .nav-link:hover {
    opacity: 0.8;
}

/* モバイルメニュー展開時のスタイル */
@media (max-width: 991.98px) {
    /* メニューが開いた時の中身のスタイル */
    .navbar-collapse {
        background-color: var(--theme-nav-bg);
        padding-bottom: 20px;
    }
    .navbar-nav .nav-item {
        border-bottom: 1px solid rgba(255,255,255,0.4);
    }
    .navbar-nav .nav-item:last-child {
        border-bottom: none;
    }
}

/* ====================================================
   ハンバーガーメニュー カスタマイズ
   デザイン: menu文字 + 角ばった2本線
   ==================================================== */
.custom-toggler {
    width: 55px;
    height: 50px;
    padding: 0; /* Bootstrapのパディングを除去 */
    border: none;
    background: transparent;
    cursor: pointer;
}

/* ボタンの中身をまとめるボックス */
.menu-box {
    width: 100%;
    height: 100%; /* 親要素(59px)いっぱいに広げる */
    display: flex;
    flex-direction: column;
    /* 上・中・下端に要素を配置して隙間を均等に広げる */
    justify-content: space-between; 
    align-items: center; /* 横方向中央揃え */
}

/* "menu" テキスト */
.menu-text {
    color: var(--theme-menu-color);
    font-family: sans-serif;
    font-weight: 800;
    font-size: 19px; /* 画像の比率に合わせて調整 */
    line-height: 1;
    display: block;
    width: 100%;
    text-align: center; /* 左右中央揃え */
    margin: 0; /* 余計なマージンを削除 */
    letter-spacing: 1px;
}

/* 2本の線 */
.menu-line {
    display: block;
    width: 100%;
    height: 5px; /* 線の太さ */
    background-color: var(--theme-menu-color);
    border-radius: 0; /* 角ばらせる */
    margin: 0; /* 余計なマージンを削除 */
}



/* ====================================================
   Footer Custom Styles
   ==================================================== */

/* --- 上部 ベージュエリア --- */
.footer-top {
    background-color: #f9f4f2;
}

.footer-insta-link img {
    transition: transform 0.3s;
}
.footer-insta-link:hover img {
    transform: scale(1.1);
}

/* --- 下部 背景画像エリア --- */
.footer-bottom {
    position: relative;
    width: 100%;
    /* PC用背景画像設定 */
    background-image: url('/img/common/bg-footer.webp');
    background-repeat: no-repeat;
    /* 下端中央を起点に、幅いっぱいに広げる */
    background-position: center bottom;
    background-size: cover; 
    
    /* 波が被る分の余白＋コンテンツの余白 */
    padding-top: 80px; 
}

/* --- モバイル用背景画像切り替え --- */
@media (max-width: 767.98px) {
    .footer-bottom {
        background-image: url('/img/common/bg-footer-m.webp');
    }
}

/* --- 波型SVGセパレーター --- */
.footer-wave {
    position: absolute;
    top: -1px; /* 隙間防止のための微調整 */
    left: 0;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    z-index: 1; /* 背景より手前 */
}

.footer-wave svg {
    display: block;
    width: 100%;
    height: 60px; /* 波の高さ */
}

/* --- フッター内ボタン調整 --- */
.footer-btn {
    height: 60px; /* PCでの基本高さ */
    width: auto;
}

/* ホバー時の透過アニメーション */
.opacity-hover {
    transition: opacity 0.3s;
}
.opacity-hover:hover {
    opacity: 0.8;
}

/* レスポンシブ調整 */
@media (max-width: 767.98px) {
    /* スマホでは波を少し低く */
    .footer-wave svg {
        height: 40px;
    }
    
    /* スマホではボタンを幅いっぱいにしすぎないよう調整 */
    .footer-btn {
        height: auto;
        width: 100%;
        max-width: 320px;
    }
    
    /* 会社名のフォントサイズ調整 */
    .footer-info h3 {
        font-size: 1.5rem !important;
    }
}


/* ====================================================
   Footer Menu Section Styles
   ==================================================== */

/* 波型SVG (上部) */
.footer-menu-wave {
    position: absolute;
    top: -59px; /* 波の高さ分だけ上にずらす */
    left: 0;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    z-index: 1;
}

.footer-menu-wave svg {
    display: block;
    width: 100%;
    height: 60px;
}

/* フッターメニューカード */
.footer-menu-card {
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 10px; /* 角丸 */
    overflow: hidden;
}

.footer-menu-card:hover {
    transform: translateY(-5px); /* ホバーで少し浮く */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.footer-menu-card .card-img-top {
    height: 140px; /* 画像の高さを統一 */
    object-fit: cover; /* 比率を維持してトリミング */
}

.footer-menu-card .card-body {
    padding: 1.2rem 0.8rem;
    min-height: 110px; /* テキスト量にかかわらず高さを揃える */
}

/* スマホ用調整 */
@media (max-width: 767.98px) {
    .footer-menu-wave svg {
        height: 40px;
    }
    .footer-menu-wave {
        top: -39px;
    }
    .footer-menu-card .card-img-top {
        height: 100px;
    }
    .footer-menu-card .card-body {
        padding: 0.8rem 0.5rem;
    }
    /* タイトルの文字サイズ調整 */
    .footer-menu-card h5 {
        font-size: 1rem;
    }
    .footer-menu-card p {
        font-size: 0.75rem;
    }
}


/* ====================================================
   Footer Contact & Access Styles
   ==================================================== */

/* お問い合わせボタン（緑） */
.btn-contact-green {
    background-color: #6dbf57; /* 画像から抽出した緑色 */
    border: none;
    height: 60px;
    width: 100%;
    max-width: 380px; /* PCでの最大幅 */
    font-size: 1.1rem;
    transition: opacity 0.3s, transform 0.3s;
}

.btn-contact-green:hover {
    background-color: #6dbf57; /* 色は変えず */
    opacity: 0.9;
    transform: translateY(-2px);
    color: #fff;
}

/* スマホ調整 */
@media (max-width: 767.98px) {
    /* 電話番号を少し小さくして改行を防ぐ */
    .footer-contact-section .font-g[style*="2.5rem"] {
        font-size: 1.8rem !important;
    }
    
    /* ボタンを全幅に */
    .btn-contact-green {
        max-width: 100%;
    }
}



/* --------------------------------------------------
   トップヒーローセクション
-------------------------------------------------- */
.top-hero-section {
    position: relative;
    width: 100%;
    height: 60vh;
    max-height: 500px;
    overflow: hidden;
    background-color: #f0f8ff; 
}

/* 1. 背景：青空 */
.hero-bg-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/index/bg-sky.webp');
    background-position: center top;
    background-size: cover;
    z-index: 1;
}

/* 2. 背景：雲 */
.hero-bg-cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    
    background-image: url('/img/index/bg-cloud.webp');
    background-repeat: repeat-x;
    background-size: auto 80%;
    background-position: 0 center;

    /* 雲：一番ゆっくり (80秒) + 上下揺れ */
    animation: 
        cloudFlow 80s linear infinite,         
        bobbing 4s ease-in-out infinite alternate; 
}

/* 3. アイコンパターン */
.hero-icon-pattern {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    
    background-image: url('/img/index/top-slide-icon.webp');
    background-repeat: repeat-x;
    background-position: center top;
    background-size: auto 100%; 
    
    animation: iconFlow 50s linear infinite;
}

/* 4. メインスライド（ラッパーで揺らし、中身で回す） */
.hero-slide-bobbing-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    display: flex;
    align-items: center;
    
    /* メインスライド：上下揺れを追加（雲と同じように） */
    animation: bobbing 5s ease-in-out infinite alternate; 
}

/* トラック：横スライド専用 */
.hero-slide-track {
    display: flex;
    width: max-content; 
    /* メイン：一番速く見える設定 (60秒 / 距離が長いため) */
    animation: slideLeftTrack 80s linear infinite; 
}

.slide-item {
    flex-shrink: 0;
}

.slide-item img {
    height: 55vh; 
    max-height: 450px;
    width: auto;
    display: block;
}

/* 5. 下部の波 */
.hero-wave-bottom {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    z-index: 6;
    line-height: 0;
}
.hero-wave-bottom svg {
    width: 100%;
    height: auto;
    display: block;
}

/* --------------------------------------------------
   アニメーション定義
-------------------------------------------------- */

/* 雲の横移動 (1500px) */
@keyframes cloudFlow {
    from { background-position-x: 0; }
    to   { background-position-x: -1500px; } 
}

/* アイコンの横移動 (2365px) - 中間の速度 */
@keyframes iconFlow {
    from { background-position-x: 0; }
    to   { background-position-x: -2365px; } 
}

/* スライドの横移動 (要素幅の50%) */
@keyframes slideLeftTrack {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* 共通：縦揺れ（ふわふわ） */
@keyframes bobbing {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-15px);
    }
}


/* Aboutセクション */
.section-about {
    position: relative;
    background-color: #ffffff;
    padding: 0px 20px 80px 20px;
    overflow: visible;
    z-index: 10;
}

/* 見出し部分のコンテナ */
.about-header-wrap {
    position: relative;
    max-width: 900px;
    margin: 0px auto 3rem;
    text-align: center;
}

/* 見出しテキスト */
.about-title {
    font-size: clamp(1.2rem, 4vw, 2.5rem);
    margin-bottom: 3rem;
    color: #333;
    line-height: 1.6;
    font-weight: 800;
    position: relative;
    z-index: 2;
}

/* 左上の花 (icon-flower2.webp) */
.about-deco-flower {
    position: absolute;
    top: -100px;
    left: 0px;
    width: 120px;
    height: auto;
    z-index: 11;
}

/* 右下の葉 (icon-leaf2.webp) */
.about-deco-leaf {
    position: absolute;
    bottom: -90px;
    right: 0px;
    width: 100px;
    height: auto;
    z-index: 11;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .section-about {
        overflow: visible;
        overflow-x: clip;
    }

    .about-header-wrap {
        margin-bottom: 2rem;
    }

    .about-deco-flower {
        width: 80px;
        top: -70px;
        left: -10px;
    }

    .about-deco-leaf {
        width: 70px;
        bottom: -70px;
        right: -5px;
    }
}


/* --------------------------------------------------
   Aboutセクション：本文エリア
-------------------------------------------------- */
.about-body {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直方向中央揃え */
    gap: 1rem; /* テキストと画像の間の余白 */
    padding: 0 20px;
}

/* 左側：テキストエリア */
.about-text-col {
    flex: 1; /* 1の比率で伸縮 */
    text-align: left; /* テキストは左揃え */
    position: relative;
    padding-bottom: 60px; /* 雲アイコン用のスペース確保 */
}

.about-text {
    font-size: 1.2rem;
    line-height: 2.2; /* 読みやすく広めに */
    margin-bottom: 2rem;
    color: #333;
    font-feature-settings: "palt"; /* 文字詰め */
}

/* テキスト下の雲アイコン (icon-cloud2.webp) */
.about-deco-cloud-bottom {
    display: block;
    width: 100px; /* サイズ調整 */
    height: auto;
    margin-top: 10px;
    /* 必要であれば位置を微調整 */
    transform: translateX(-10px); 
}

/* 右側：画像エリア */
.about-img-col {
    flex: 1; /* 1の比率で伸縮 */
    text-align: center;
    position: relative;
}

/* メイン画像 (word.webp) */
.about-main-image {
    width: 100%;
    max-width: 450px; /* 大きくなりすぎないように制限 */
    height: auto;
    display: block;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    /* スマホでの改行無効化（自然な折り返しにする） */
    .about-text br {
        display: none;
    }
}


/* --------------------------------------------------
   モバイル対応（768px以下）
-------------------------------------------------- */
@media screen and (max-width: 768px) {
    .about-body {
        flex-direction: column; /* 縦並びにする */
        gap: 1rem;
    }

    .about-text-col {
        text-align: left;
        padding-bottom: 40px;
    }
    

    .about-img-col {
        width: 100%;
    }

    .about-main-image {
        max-width: 100%; /* スマホでは幅いっぱい近くに */
        width: 90%; /* 少し余白を持たせる */
        margin: 0 auto;
    }
}


/* --------------------------------------------------
   Policyセクション（大切にしていること）
-------------------------------------------------- */
.section-policy {
    position: relative;
    background-color: #f8f4f1; /* ベージュ背景 */
    padding: 0 20px 100px;
    z-index: 11;
}

/* 上部の波（ベージュ） */
.policy-wave-top {
    position: absolute;
    bottom: 0px; /* 波の高さ分、上にずらす */
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 1;
}

.policy-wave-top svg {
    width: 100%;
}

/* 見出しコンテナ（シーサーとテキスト） */
.policy-header-container {
    max-width: 1000px;
    margin: 0 auto 4rem; /* 下に余白 */
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直中央揃え */
    gap: 2rem; /* 要素間の間隔 */
    padding-top: 50px; /* 波からの距離 */
}

/* 見出しテキスト */
.policy-title {
    /* PC: 2rem, スマホ: 1.3rem～ の間で自動調整 */
    font-size: clamp(1.3rem, 4vw, 2rem);
    text-align: center;
    color: #333;
    line-height: 1.6;
    font-weight: 800;
}

/* シーサーアイコン */
.policy-shisa-icon {
    width: 120px; /* PCでのサイズ */
    height: auto;
    object-fit: contain;
}

/* --------------------------------------------------
   モバイル対応（768px以下）
-------------------------------------------------- */
@media screen and (max-width: 768px) {
    .policy-header-container {
        /* スマホでは縦並びにするか、横並びのまま小さくするか */
        /* ここでは見出しが見やすいよう、Flexのまま少しサイズ調整 */
        gap: 1rem;
        padding-top: 30px;
        flex-direction: row; /* 横並び維持 */
        justify-content: space-between; /* 画面幅いっぱいに使う場合 */
    }

    /* 画面幅がかなり狭い場合のために折り返し設定 */
    @media screen and (max-width: 500px) {
        .policy-header-container {
            flex-wrap: wrap; 
            justify-content: center;
        }
        .policy-title {
            order: 2; /* テキストを下に */
            width: 100%;
            margin-top: 10px;
        }
        .policy-shisa-icon {
            order: 1; /* アイコンを上に並べる */
            width: 80px; /* 少し小さく */
        }
    }
}

/* --------------------------------------------------
   Policyセクション：カードエリア
-------------------------------------------------- */

/* グリッドコンテナ */
.policy-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* カード間の余白 */
    max-width: 1000px;
    margin: 0 auto 60px; /* 下にボタン用の余白 */
}

/* カード本体 */
.policy-card {
    background-color: #fff;
    border-radius: 15px; /* 角丸 */
    width: calc(50% - 15px); /* 2列配置 (gapの半分を引く) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 薄い影 */
    overflow: hidden; /* 画像の角丸はみ出し防止 */
    display: flex;
    flex-direction: column;
}

/* カード画像エリア */
.policy-card-img {
    width: 100%;
    height: 250px; /* 画像の高さを統一 */
}

.policy-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 比率を保ちトリミング */
    display: block;
}

/* カードテキストエリア */
.policy-card-body {
    padding: 30px 25px;
    text-align: center;
    flex: 1; /* 高さを揃えるため */
}

/* カード見出し */
.policy-card-title {
    margin-bottom: 20px;
    line-height: 1.5;
}

.policy-sub-title {
    font-size: 1rem;
    color: #333;
    font-weight: 800;
}

.policy-main-title {
    font-size: 1.4rem;
    color: #EB8568; /* 画像に近いサーモンピンク色 */
    font-weight: 800;
    display: block;
    margin-top: 5px;
}

/* カード説明文 */
.policy-card-text {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.8;
    text-align: left; /* 本文は左揃え */
}

/* --------------------------------------------------
   ボタンエリア
-------------------------------------------------- */
.policy-btn-area {
    text-align: center;
    margin-bottom: 20px;
}

.btn-pink {
    width: 280px; /* ボタンサイズ調整 */
    height: auto;
    transition: opacity 0.3s;
}

.btn-pink:hover {
    opacity: 0.8;
}

/* --------------------------------------------------
   モバイル対応（768px以下）
-------------------------------------------------- */
@media screen and (max-width: 768px) {
    .policy-grid {
        gap: 20px;
    }

    .policy-card {
        width: 100%; /* スマホでは1列 */
    }

    .policy-card-img {
        height: 200px; /* スマホでは少し画像を低く */
    }

    .policy-card-body {
        padding: 20px;
    }

    .policy-main-title {
        font-size: 1.25rem;
    }
}



/* --------------------------------------------------
   Facilityセクション（施設紹介）
-------------------------------------------------- */
.section-facility {
    position: relative;
    width: 100%;
    /* 波の分上下にパディングを多めにとる */
    padding: 150px 20px 180px;
    overflow: hidden;
    /* 背景色は画像で埋まりますが念のため */
    background-color: #AEE2FF; 
    z-index: 10;
}

/* 1. 背景：青空 */
.facility-bg-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/index/bg-sky.webp');
    background-position: center top;
    background-size: cover;
    z-index: 1;
}

/* 2. 背景：雲（トップと同じ動き） */
.facility-bg-cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: url('/img/index/bg-cloud.webp');
    background-repeat: repeat-x;
    background-size: auto 80%;
    background-position: 0 center;
    /* トップと同じキーフレームを使用 */
    animation: 
        cloudFlow 80s linear infinite,         
        bobbing 4s ease-in-out infinite alternate; 
}

/* 3. 上部の波（ベージュ） */
.facility-wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}
.facility-wave-top svg {
    width: 100%;
    height: 80px;
    display: block;
    /* 上から垂れ下がる波にするため反転 */
    transform: scaleY(-1); 
}

/* 4. 下部の波（白） */
.facility-wave-bottom {
    position: absolute;
    bottom: -1px; /* 隙間防止 */
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}
.facility-wave-bottom svg {
    width: 100%;
    height: 80px;
    display: block;
}

/* 5. 装飾アイコン */
.facility-deco-top {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: auto;
    z-index: 5;
}

.facility-deco-bottom {
    position: absolute;
    bottom: 40px;
    right: 20px;
    width: 120px;
    height: auto;
    z-index: 5;
}

/* コンテンツコンテナ */
.facility-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    z-index: 4;
}

/* タイトル */
.facility-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    color: #333;
    line-height: 1.6;
    font-weight: 800;
}

/* カードグリッド */
.facility-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* カード本体 */
.facility-card {
    background-color: #fff;
    border-radius: 15px;
    width: calc(33.333% - 20px); /* 3列配置 */
    min-width: 280px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 画像リンクエリア */
.facility-img-link {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.facility-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.facility-img-link:hover img {
    transform: scale(1.05); /* ホバー時に画像を少し拡大 */
}

/* テキストエリア */
.facility-card-body {
    padding: 25px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* カードタイトル */
.facility-card-title {
    margin-bottom: 15px;
    line-height: 1.4;
}
/* カードタイトル内のサブタイトル */
.facility-card-title .sub {
    font-size: 0.9rem;
    color: #333;
    font-weight: 800;
    display: block;
    margin-bottom: 0; 
}

/* メインタイトル */
.facility-card-title .main {
    font-size: 1.3rem;
    font-weight: 800;
    display: block;
    margin-top:10px;
    line-height: 1.2; 
}

/* タイトル色分け */
.text-orange { color: #F39800!important; }
.text-red { color: #e84142!important; }
.text-green { color: #78BE20!important; }

/* 説明文 */
.facility-card-text {
    font-size: 0.9rem;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 20px;
    color: #333;
    flex: 1; /* ボタンを下揃えにするため */
}

/* ボタンエリア */
.facility-btn-area img {
    width: 100%;
    max-width: 200px;
    height: auto;
    transition: opacity 0.3s;
}
.facility-btn-area a:hover img {
    opacity: 0.8;
}

/* --------------------------------------------------
   モバイル対応
-------------------------------------------------- */
@media screen and (max-width: 900px) {
    .facility-card {
        width: calc(50% - 15px); /* タブレットで2列 */
    }
}

@media screen and (max-width: 768px) {
    .section-facility {
        padding: 100px 20px 120px;
    }

    .facility-card {
        width: 100%; /* スマホで1列 */
        max-width: 400px;
        margin: 0 auto;
    }
    
    .facility-deco-top {
        width: 70px;
        top: 10px;
        left: 0px;
    }
    
    .facility-deco-bottom {
        width: 80px;
        bottom: 20px;
        right: 0px;
    }
}

/* --------------------------------------------------
   Facilityセクション：グラデーションオーバーレイ
-------------------------------------------------- */
.facility-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* セクション全体にかけつつ、下を濃くする */
    z-index: 2; /* 雲と同じ階層（HTMLで後に書くことで上に乗ります） */
    pointer-events: none; /* クリックなどを邪魔しないように */
    
    /* 下(0%)が白の50%(0.5)
       上(100%)が透明(0)
       になるグラデーション 
    */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
}


/* --------------------------------------------------
   下層ページ共通：青空ヘッダーセクション
-------------------------------------------------- */
.page-sky-section {
    position: relative;
    width: 100%;
    background-color: #AEE2FF; 
    height: 300px;
    margin-bottom: 400px;
}

/* 1. 背景：青空 */
.page-bg-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px; 
    background-image: url('/img/index/bg-sky.webp');
    background-position: center top;
    background-size: cover;
    z-index: 1;
}

/* 2. 背景：雲 */
.page-bg-cloud {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    
    z-index: 2;
    background-image: url('/img/index/bg-cloud.webp');
    background-repeat: repeat-x;
    background-size: auto 80%;
    background-position: 0 center;
    animation: 
        cloudFlow 80s linear infinite,          
        bobbing 4s ease-in-out infinite alternate; 
}

/* 3. グラデーションオーバーレイ */
.page-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

/* 4. コンテンツレイアウト */
.page-header-content {
    /* 修正2: 固定の height: 300px; を削除。中身に合わせて伸びるようにします */
    /* height: 300px;  <-- 削除 */
    
    position: relative;
    margin: 0 auto;
    
    /* 上の余白（ヘッダー被り防止など） */
    padding-top: 50px; 
    
    /* 修正3: 波(z-index:5)より手前に表示するため、6以上に設定 */
    z-index: 10; 
}

.page-header-row {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 40px;
    /* 必要であれば、ここで align-items: flex-start; にすると上揃えになります */
}

/* テキストエリア */
.page-header-text {
    flex: 1;
    color: #333;
}

.page-sub-title {
    font-weight: 800;
    margin-top: 0; /* padding-topで調整しているのでマージンは調整 */
    margin-bottom: 10px;
    color: #333;
}

.page-main-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f08700;
    margin-bottom: 30px;
    line-height: 1.2;
}

.page-desc {
    font-size: 1.2rem;
    line-height: 2;
    text-align: justify;
}

/* 画像エリア */
.page-header-img {
    flex: 1;
    max-width: 500px;
    position: relative;
    /* 必要であれば位置微調整 */
}

.page-header-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* 5. 下部の波（白） */
.page-wave-bottom {
    position: absolute;
    bottom: 0; /* -1pxだと隙間が出る場合があるので0または微調整 */
    left: 0;
    width: 100%;
    line-height: 0;
    
    /* 修正4: コンテンツ(z-index:10)より後ろ、背景より手前に配置 */
    z-index: 5; 
}
.page-wave-bottom svg {
    width: 100%;
    height: 60px;
    display: block;
}

/* 波の下にはみ出る雲を隠すための白い目隠し */
.page-wave-bottom::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%; /* 波の要素のすぐ下からスタート */
    left: 0;
    width: 100%;
    height: 200px; /* 雲のはみ出し分を十分に覆い隠せる高さ */
    background-color: #ffffff; /* 波と同じ白で塗りつぶす */
}

/* --------------------------------------------------
   モバイル対応
-------------------------------------------------- */
@media screen and (max-width: 900px) {
    .page-sky-section {
        /* スマホでは高さ固定だと崩れやすいので、中身に合わせる設定推奨 */
        padding-bottom: 80px; /* 波の下に少し余白を持たせる */
    }
    

    .page-header-row {
        flex-direction: column;
        text-align: left;
    }

    .page-header-img {
        max-width: 100%;
        padding: 0 10vw;
    }
    
    .page-main-title {
        font-size: 2rem;
    }
}


/* --------------------------------------------------
   Targetセクション（入居対象者）
-------------------------------------------------- */
.section-target {
    position: relative;
    background-color: #ffffff;
    /* 前のセクションのJSマージンの直下に来るため、上余白は適度に */
    overflow: hidden; /* 横スクロール防止 */
}

.target-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 3; /* イラストより手前 */
}

/* 左側：画像カラム */
.target-img-col {
    flex: 0 0 45%; /* 幅45%固定 */
    max-width: 400px;
}

.target-img-col img {
    width: 100%;
    height: auto;
    display: block;
    /* もし画像自体が丸く切り抜かれていない場合はここでborder-radiusを指定 */
    /* border-radius: 50%; */
}

/* 右側：テキストカラム */
.target-text-col {
    flex: 1;
}

.target-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #333;
    margin-bottom: 2rem;
}

.target-list {
    list-style: none; /* デフォルトの点を消す */
    padding: 0;
    margin: 0;
}

.target-list li {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 1rem;
    padding-left: 1.5em;
    position: relative;
    line-height: 1.6;
    font-weight: 800;
}

/* リストの黒丸（・）を疑似要素で作成 */
.target-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #333;
    font-weight: 800;
}

/* イラスト（吹き出し付き） */
.target-illust {
	position: relative;
    bottom: 0; /* 下端に配置 */
    left: 25%; /* 右側に配置 */
    width: 70%;
    height: auto;
    z-index: 1; /* 波より奥、背景より手前 */
}

/* 下部の波（ベージュ） */
.target-wave-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 2; /* イラスト(z-index:1)より手前にして見切れさせる */
}

.target-wave-bottom svg {
    width: 100%;
    height: 80px; /* 波の高さ */
    display: block;
}

/* --------------------------------------------------
   モバイル対応
-------------------------------------------------- */
@media screen and (max-width: 900px) {
    .target-container {
        flex-direction: column;
        gap: 30px;
        text-align: left;
    }

    .target-img-col {
        width: 80%;
        max-width: 300px;
    }

    .target-title {
        font-size: 1.5rem;
        text-align: center;
    }

    .target-illust {
        width: 300px; /* スマホでのサイズ調整 */
        left: 0;
	    width: 100%;
    }
}
/* モバイル対応：波の高さを30pxにする */
@media screen and (max-width: 768px) {
    .wave svg {
        height: 30px!important;
    }
}

/* --------------------------------------------------
   Serviceセクション（サービス内容）
-------------------------------------------------- */
.section-service {
    position: relative;
    background-color: #f8f4f1; /* ベージュ背景 */
    /* 上下の余白調整 */
    padding: 20px 20px 100px; 
    z-index: 1; 
}

/* 見出しの左揃え微調整 */
.service-head-title {
    font-size: 2rem;
    color: #333;
    text-align: left;
    padding-left: 10px;
}

/* 画像の高さを固定してトリミングするためのラッパー */
.service-img-box {
    width: 100%;
    overflow: hidden;
}

.service-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bootstrapのroundedでは角丸が小さい場合用 */
.custom-radius {
    border-radius: 15px !important;
    overflow: hidden;
}

/* オレンジ色の文字 */
.text-orange {
    color: #f08600;
}

/* モバイル対応：見出しを中央寄せに */
@media screen and (max-width: 900px) {
    .service-head-title {
        text-align: center;
        padding-left: 0;
        font-size: 1.6rem;
    }
}


/* --------------------------------------------------
   Flowセクション（ご利用の流れ）
-------------------------------------------------- */
.section-flow {
    position: relative;
    background-color: #ffffff;
    /* 波が被る分を考慮して上下のパディングを確保 */
    padding-top: 100px;
    padding-bottom: 150px; 
    z-index: 2; 
}

/* 上部の波（ベージュ） */
.flow-wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 1;
}

.flow-wave-top svg {
    width: 100%;
    height: 60px;
    display: block;
    /* そのまま配置（上から垂れる形） */
}

/* 下部の波（白） */
.flow-wave-bottom {
    position: absolute;
    bottom: -1px; /* 隙間防止 */
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3; /* 次のセクションの上に乗せる */
}

.flow-wave-bottom svg {
    width: 100%;
    height: 60px;
    display: block;
    /* 必要に応じて反転させる場合は以下を使用 */
    /* transform: scaleX(-1); */
}

/* ステップカード */
.step-card {
    background-color: #f8f4f1; /* 薄いベージュ */
    position: relative;
    overflow: visible; /* 三角をはみ出させる */
    border-radius: 10px;
}

.step-icon {
    width: 100px;
    height: 100px;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #f08600;
}

/* 丸みのある正三角形（矢印） */
.step-arrow-round {
    position: absolute;
    bottom: -23px; /* 位置調整 */
    left: 50%;
    transform: translateX(-50%) rotate(45deg) skew(15deg, 15deg);
    width: 46px;
    height: 46px;
    background-color: #f8f4f1; /* カードと同じ色 */
    
    /* 右下だけ角丸にすることで、回転したときに下の先端が丸くなります */
    border-bottom-right-radius: 8px; 
    
    z-index: 2;
}

.last-step .step-arrow-round {
    display: none;
}

/* --------------------------------------------------
   PDFセクション
-------------------------------------------------- */
.section-pdf {
    background-color: #f8f4f1; /* ベージュ背景 */
    padding-bottom: 120px;
    /* 上のパディングは波の分があるため少なめでもOKですが、バランスを見て調整 */
    padding-top: 70px; 
}

.pdf-card {
    border-radius: 10px;
}

.pdf-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: #333;
}

/* PDFボタン */
.pdf-btn {
    border: 1px solid #dd3045;
    color: #dd3045;
    background-color: #fff;
    border-radius: 5px;
    padding: 5px 15px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s;
    /* アイコンとテキストのバランス */
    display: inline-flex;
    align-items: center;
}

.pdf-btn:hover {
    background-color: #dd3045;
    color: #fff;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .section-flow {
        padding-bottom: 100px;
    }
    
    .step-icon {
        width: 80px;
        height: 80px;
    }

    .step-title {
        font-size: 1.3rem;
        text-align: center;
    }
}


/* --------------------------------------------------
   会社概要ページ
-------------------------------------------------- */
/* 見出しの装飾（左にオレンジのライン） */
.company-section-title {
    border-left: 5px solid #f29b80; 
    padding-left: 15px;
    color: #333;
}

/* 挨拶文 */
.greeting-text {
    font-size: 1rem;
    line-height: 2;
    color: #333;
}
@media screen and (min-width: 1199.98px) {
	.greeting-text {
	    font-size: 1.3rem;
	}
}

/* 会社概要テーブル */
.company-table th {
    background-color: #f8f4f1; /* サイト共通のベージュ色 */
    width: 25%;
    text-align: center;
    font-weight: bold;
    color: #333;
    padding: 1.2rem;
}

.company-table td {
    color: #333;
    padding: 1.2rem 2rem;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .company-table th {
        width: 35%;
        padding: 1rem 0.5rem;
        font-size: 0.9rem;
    }
    .company-table td {
        padding: 1rem;
        font-size: 0.9rem;
    }
}


/* --------------------------------------------------
   大切にしていること（Philosophy）ページ
-------------------------------------------------- */
.page-philosophy .text-orange {
    color: #f08600; /* 指定のオレンジ色 */
}

.phil-title {
    font-size: 1.8rem;
    line-height: 1.4;
}

.phil-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
}

/* 画像の基本サイズ設定 */
.phil-img {
    max-width: 95%;
    width: 100%; /* PCでの基本サイズ */
    height: auto; /* 元の画像の縦横比を維持 */
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .phil-title {
        font-size: 1.5rem;
    }
    
    .phil-img {
        width: 90%;
        max-width: 350px;
        margin-top: 15px; /* テキストとの間に少し隙間を */
    }
}


/* --------------------------------------------------
   提携病院ページ
-------------------------------------------------- */
/* 背景色 */
.bg-light-beige {
    background-color: #f8f4f2;
    position: relative;
}

/* 病院カード */
.teikei-card {
    border-radius: 15px;
    overflow: hidden;
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* aタグになった場合もブロック要素として扱う */
    display: block; 
}

/* ホバー時に少し浮き上がるエフェクト（リンクありの場合） */
.teikei-card:not(.no-hover):hover {
    transform: translateY(-5px);
    /* !important は削除してもBootstrapのshadow-smより優先されるはずですが、念のため残すか確認 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    /* リンクなのでカーソルを指マークに */
    cursor: pointer;
}

/* ホバーエフェクトなしのカード（斎藤内科医院） */
.teikei-card.no-hover:hover {
    transform: none; /* 動きを打ち消す */
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; /* 元のshadow-smの影に戻す */
    cursor: default; /* カーソルを通常に戻す */
}

/* 画像エリア（高さを揃える） */
.teikei-img-box {
    height: 220px;
    width: 100%;
    overflow: hidden;
}

.teikei-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 病院名見出し */
.teikei-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #333;
    /* 会社概要と同じオレンジの左ラインで統一感を出す */
    border-left: 5px solid #f29b80; 
    padding-left: 12px;
    margin-bottom: 20px;
}

/* 住所・電話番号リスト */
.teikei-info {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6;
}

/* アイコンの色と位置調整 */
.teikei-info i {
    color: #f29b80; /* オレンジ色 */
    width: 20px;
    text-align: center;
    margin-right: 5px;
}


/* --------------------------------------------------
   カラオケBARページ
-------------------------------------------------- */
/* 見出しの装飾（左にオレンジのライン） */
.bar-section-title {
    border-left: 5px solid #f29b80; 
    padding-left: 15px;
    color: #333;
}

/* 店舗情報テーブル */
.bar-table th {
    background-color: #f8f4f1; /* サイト共通のベージュ色 */
    width: 30%;
    text-align: center;
    font-weight: bold;
    color: #333;
    padding: 1.2rem;
}

.bar-table td {
    color: #333;
    padding: 1.2rem 1.5rem;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .bar-table th {
        width: 35%;
        padding: 1rem 0.5rem;
        font-size: 0.9rem;
    }
    .bar-table td {
        padding: 1rem;
        font-size: 0.9rem;
    }
}


/* --------------------------------------------------
   スクロールフェードインアニメーション
-------------------------------------------------- */
.js-fade-in {
    opacity: 0;
    transition: opacity 1.0s ease-out;
}

/* 表示状態 */
.is-show {
    opacity: 1;
}