@charset "UTF-8";

/* ==========================================================================
   demo_clinic: カスタムCSS（Tailwind補完）
   ========================================================================== */

/* --- Base --- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* --- Vertical Text --- */
.vertical-rl { writing-mode: vertical-rl; text-orientation: upright; }
.vertical-text { writing-mode: horizontal-tb; letter-spacing: 0.1em; line-height: 2.0; width: 100%; }
@media (min-width: 768px) {
    .vertical-text { writing-mode: vertical-rl; letter-spacing: 0.2em; line-height: 2.5; }
}

/* --- Navigation Hover --- */
.hover-line { position: relative; padding-bottom: 4px; }
.hover-line::after { content: ''; position: absolute; width: 0; height: 1px; bottom: 0; left: 0; background-color: #00704A; transition: width 0.3s ease; }
.hover-line:hover::after { width: 100%; }

/* --- Mobile Menu --- */
.mobile-link { position: relative; overflow: hidden; }

/* --- Button Hover Slide --- */
.btn-hover-slide { position: relative; z-index: 1; overflow: hidden; }
.btn-hover-slide::after { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: #00704A; transition: all 0.4s ease; z-index: -1; }
.btn-hover-slide:hover::after { width: 100%; }
.btn-hover-slide:hover { color: #FFFCE6; }

/* --- Hero Animation --- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero-img-left img { animation: float 6s ease-in-out infinite; }

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #FFFCE6; }
::-webkit-scrollbar-thumb { background: #00704A; border-radius: 5px; border: 2px solid #FFFCE6; }
::-webkit-scrollbar-thumb:hover { background: #00452E; }

/* --- Floating Animation --- */
.animate-floating { animation: floating 4s ease-in-out infinite; }
@keyframes floating { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* --- Bounce Slow --- */
.animate-bounce-slow { animation: bounceSlow 3s infinite; }
@keyframes bounceSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --- Dotted Box --- */
.dotted-box { border: 2px dashed #00704A; border-radius: 1rem; position: relative; background-color: #fff; }

/* --- Amoeba Masks --- */
.mask-amoeba-1 { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
.mask-amoeba-1-rev { border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%; }
.mask-amoeba-2 { border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%; }
.mask-amoeba-3 { border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; }
.mask-amoeba-4 { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

/* --- Flow Steps --- */
.flow-step-number { font-family: 'Montserrat', sans-serif; color: #00704A; border: 1px solid #00704A; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; font-weight: bold; background-color: #fff; z-index: 10; }
.flow-step-container { position: relative; padding-left: 1.5rem; border-left: 1px dashed #00704A; margin-left: 1.5rem; padding-bottom: 3rem; }
.flow-step-container:last-child { border-left: none; padding-bottom: 0; }
.flow-step-number-wrapper { position: absolute; left: -1.5rem; top: 0; }

/* --- Doctor Portrait --- */
.doctor-portrait-frame { position: relative; display: inline-block; padding: 1rem; background: #fff; transform: rotate(-2deg); border: 1px solid rgba(0,0,0,0.05); }
.doctor-portrait-frame::before { content: ''; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 30%; height: 30px; background-color: rgba(252, 211, 77, 0.6); z-index: 10; }

/* --- Recruit --- */
.recruit-feature-card { position: relative; background: #fff; border-radius: 1rem; overflow: hidden; height: 100%; }
.recruit-feature-header { position: absolute; top: 0; left: 0; background-color: #00704A; color: #fff; font-family: 'Montserrat', sans-serif; font-weight: bold; padding: 0.25rem 1.5rem; font-size: 0.8rem; letter-spacing: 0.1em; z-index: 10; }
.recruit-feature-title { color: #00704A; font-weight: bold; text-align: center; margin: 1.5rem 0 1rem; position: relative; display: inline-block; width: 100%; }

/* ==========================================================================
   demo_clinic LP: Lightning要素の非表示・上書き
   ========================================================================== */

/* body背景色 */
.demo-clinic-page { background-color: #FFFCE6 !important; }

/* Lightningヘッダー・フッター非表示 */
.demo-clinic-page .site-header,
.demo-clinic-page .site-footer,
.demo-clinic-page .vk-mobile-nav { display: none !important; }

/* ページヘッダー（タイトル+パンくず）非表示 */
.demo-clinic-page .page-header,
.demo-clinic-page .breadcrumb,
.demo-clinic-page .vk_pageHeader { display: none !important; }

/* サイドバー非表示 */
.demo-clinic-page .sub-section { display: none !important; }

/* コンテンツ領域リセット（最小限の上書き） */
.demo-clinic-page .site-body { padding-top: 0 !important; padding-bottom: 0 !important; }
.demo-clinic-page .site-body-container { max-width: 100% !important; padding: 0 !important; }
.demo-clinic-page .main-section { padding: 0 !important; max-width: 100% !important; width: 100% !important; }
.demo-clinic-page .entry-body { padding: 0 !important; margin: 0 !important; }

/* Mobile Container */
@media (max-width: 767px) {
    .demo-clinic-page .dc-container { width: 85% !important; max-width: 85% !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* --- Lightning テーマとの干渉対策 --- */
/* Lightningのフォント設定を上書き */
.demo-clinic-page,
.demo-clinic-page * {
    font-family: 'Montserrat', 'Zen Maru Gothic', sans-serif;
}

/* Lightningのデフォルトテキストカラーを上書き */
.demo-clinic-page {
    color: #00704A;
    font-size: 14px;
    letter-spacing: 0.05em;
    font-weight: 500;
}
@media (min-width: 768px) {
    .demo-clinic-page { font-size: 16px; }
}

/* Lightningのa要素スタイルを上書き */
.demo-clinic-page a { color: inherit; text-decoration: none; }

/* Lightningの見出しスタイルを上書き */
.demo-clinic-page h1, .demo-clinic-page h2, .demo-clinic-page h3, .demo-clinic-page h4 {
    color: inherit;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
}

/* entry-bodyのデフォルトスタイルリセット */
.demo-clinic-page .entry-body h2,
.demo-clinic-page .entry-body h3 {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    font-size: inherit;
}

/* Lightningのimgスタイルリセット */
.demo-clinic-page img { max-width: 100%; height: auto; }

/* wp:htmlブロックの幅制限解除 */
.demo-clinic-page .entry-body > div { max-width: 100%; }