/*
============================================================
  わかば助産院 – WordPress カスタムCSS
  貼り付け先: WordPress管理画面 → 外観 → カスタマイズ → 追加CSS
              または SWELLテーマ → カスタムCSS欄
============================================================
*/

/* ===== Google Fonts 読み込み =====
   functions.php または wp_enqueue_scripts に追加してください:

   wp_enqueue_style(
     'wakaba-fonts',
     'https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500&display=swap',
     [], null
   );
===== */

/* ===== CSS Variables ===== */
:root {
    --color-primary:        #D4A5A5;
    --color-primary-light:  #E8C4C4;
    --color-primary-dark:   #BE8888;
    --color-secondary:      #C4B5D4;
    --color-secondary-light:#D8CDE6;
    --color-accent:         #B89EC8;
    --color-bg:             #FAF7F8;
    --color-bg-alt:         #F5EFF5;
    --color-text:           #4A3D3D;
    --color-text-light:     #7A6A6A;
    --color-white:          #FFFFFF;
    --color-border:         rgba(212,165,165,0.25);

    --font-main:  'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Meiryo', sans-serif;
    --font-serif: 'Noto Serif JP', 'Yu Mincho', serif;

    --radius-sm:  8px;
    --radius-md:  16px;
    --radius-lg:  28px;
    --radius-xl:  40px;

    --shadow-sm:    0 2px 12px rgba(180,140,150,0.12);
    --shadow-md:    0 6px 24px rgba(180,140,150,0.18);
    --shadow-lg:    0 12px 40px rgba(180,140,150,0.25);
    --shadow-hover: 0 16px 48px rgba(180,140,150,0.30);

    --transition: all 0.3s ease;
    --header-h:   72px;
}

/* ===== Base / Body ===== */
body {
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

/* ===== セクション共通 ===== */
.wk-section { padding: 96px 0; }

.wk-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.wk-section-title {
    text-align: center;
    margin-bottom: 56px;
}

.wk-section-title .en {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.wk-section-title h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 0.08em;
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}

.wk-section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 48px; height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 2px;
}

/* ===== フェードインアニメーション ===== */
.wk-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s ease, transform 0.85s ease;
}
.wk-fade.wk-visible { opacity: 1; transform: translateY(0); }
.wk-fade.d1 { transition-delay: 0.1s; }
.wk-fade.d2 { transition-delay: 0.2s; }
.wk-fade.d3 { transition-delay: 0.3s; }
.wk-fade.d4 { transition-delay: 0.4s; }
.wk-fade.d5 { transition-delay: 0.5s; }

/* ===== ボタン ===== */
.wk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 44px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-family: var(--font-main);
    text-decoration: none;
}

.wk-btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: #fff;
    box-shadow: 0 5px 18px rgba(196,165,165,0.45);
}
.wk-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(196,165,165,0.55);
    filter: brightness(1.05);
    color: #fff;
}

.wk-btn-outline {
    background: transparent;
    color: var(--color-primary-dark);
    border: 2px solid var(--color-primary);
}
.wk-btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(196,165,165,0.35);
}

/* ===== 追従ヘッダー（SWELLカスタマイズ用） ===== */
#site-header,
.l-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(250,247,248,0.94) !important;
    border-bottom: 1px solid var(--color-border) !important;
    transition: box-shadow 0.3s ease;
}

/* ロゴ */
.wk-logo-mark {
    width: 42px; height: 42px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}

/* ===== HEROセクション ===== */
#wk-top {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.wk-hero-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 80% at 15% 40%, rgba(212,165,165,0.28) 0%, transparent 65%),
        radial-gradient(ellipse 70% 70% at 85% 25%, rgba(196,181,212,0.32) 0%, transparent 65%),
        radial-gradient(ellipse 60% 60% at 50% 85%, rgba(232,196,196,0.18) 0%, transparent 55%),
        linear-gradient(160deg, #FAF7F8 0%, #F7F0F7 45%, #F0EEF8 100%);
}

.wk-hero-circle {
    position: absolute; border-radius: 50%; pointer-events: none;
    animation: wkFloat 7s ease-in-out infinite;
}
.wk-hero-circle-1 {
    top: 8%; right: 3%; width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(212,165,165,0.14) 0%, transparent 70%);
}
.wk-hero-circle-2 {
    bottom: 15%; left: 5%; width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(196,181,212,0.18) 0%, transparent 70%);
    animation-duration: 9s; animation-direction: reverse;
}

@keyframes wkFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-18px); }
}

.wk-hero-content {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px; align-items: center;
    padding: 60px 0 80px;
    width: 100%;
}

.wk-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg,rgba(212,165,165,0.22),rgba(196,181,212,0.22));
    border: 1px solid rgba(212,165,165,0.45);
    color: var(--color-primary-dark);
    font-size: 0.75rem; letter-spacing: 0.18em;
    padding: 7px 18px; border-radius: 50px;
    margin-bottom: 28px;
}

.wk-hero-catch {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem,3.2vw,2.2rem);
    font-weight: 400; line-height: 1.75;
    color: var(--color-text);
    margin-bottom: 22px; letter-spacing: 0.04em;
}
.wk-hero-catch em { font-style: normal; color: var(--color-primary-dark); font-weight: 500; }

.wk-hero-sub {
    font-size: 0.9rem; color: var(--color-text-light);
    line-height: 2; margin-bottom: 44px;
}

.wk-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero 画像フレーム */
.wk-hero-img-frame {
    border-radius: 42% 58% 62% 38% / 52% 44% 56% 48%;
    overflow: hidden; aspect-ratio: 4/5;
    max-width: 480px; margin: 0 auto; position: relative;
}
.wk-hero-img-frame img { width:100%; height:100%; object-fit:cover; }

.wk-hero-img-ring {
    position: absolute; inset: -16px;
    border: 2px dashed rgba(212,165,165,0.4);
    border-radius: inherit;
    animation: wkSpin 20s linear infinite;
}
@keyframes wkSpin { to { transform: rotate(360deg); } }

.wk-hero-scroll {
    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 0.65rem; letter-spacing: 0.25em; color: var(--color-text-light);
    animation: wkScrollBounce 2.2s ease-in-out infinite;
}
.wk-hero-scroll::after {
    content:''; width:1px; height:44px;
    background: linear-gradient(to bottom, var(--color-primary), transparent);
    display: block;
}
@keyframes wkScrollBounce {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(10px); }
}

/* ===== お知らせ ===== */
#wk-news {
    background:
        radial-gradient(ellipse 70% 60% at 90% 10%, rgba(212,165,165,0.1) 0%, transparent 60%),
        linear-gradient(180deg, #FBF8F9 0%, #F8F3FB 100%);
}

.wk-news-list { max-width: 820px; margin: 0 auto; }

.wk-news-item {
    display: flex; gap: 20px; padding: 24px 20px;
    border-bottom: 1px solid var(--color-border);
    align-items: flex-start;
    transition: background 0.2s; border-radius: var(--radius-sm);
}
.wk-news-item:hover { background: rgba(212,165,165,0.04); }
.wk-news-item:last-child { border-bottom: none; }

.wk-news-meta { display:flex; flex-direction:column; gap:6px; align-items:center; min-width:70px; padding-top:3px; }

.wk-news-date { font-size:0.78rem; color:var(--color-primary-dark); font-weight:500; white-space:nowrap; }
.wk-news-tag {
    background: linear-gradient(135deg,rgba(212,165,165,0.25),rgba(196,181,212,0.25));
    color: var(--color-primary-dark);
    font-size: 0.65rem; padding: 3px 10px; border-radius: 50px;
    white-space: nowrap; border: 1px solid rgba(212,165,165,0.3);
}

.wk-news-title { font-weight:500; font-size:0.92rem; margin-bottom:5px; color:var(--color-text); }
.wk-news-desc  { font-size:0.83rem; color:var(--color-text-light); line-height:1.75; }

/* ===== 院長挨拶 ===== */
#wk-greeting {
    background:
        radial-gradient(ellipse 60% 50% at 5% 80%, rgba(196,181,212,0.12) 0%, transparent 60%),
        var(--color-bg);
}

.wk-greeting-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 70px; align-items: start;
}

.wk-greeting-img-frame {
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) 0;
    overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-lg);
}
.wk-greeting-img-frame img { width:100%; height:100%; object-fit:cover; }

.wk-greeting-img-card {
    position: absolute; bottom:-22px; right:-22px;
    background: linear-gradient(135deg,var(--color-primary),var(--color-secondary));
    color: #fff; padding: 18px 26px; border-radius: var(--radius-md);
    text-align: center; box-shadow: var(--shadow-md);
    font-size: 0.85rem; font-weight: 500; line-height: 1.6;
}

.wk-greeting-h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem,2.5vw,1.6rem);
    font-weight: 400; color: var(--color-text);
    margin-bottom: 28px; letter-spacing: 0.05em; line-height: 1.6;
}

.wk-greeting-text p { font-size:0.88rem; color:var(--color-text-light); line-height:2.1; margin-bottom:18px; }

.wk-greeting-sign {
    margin-top:36px; padding-top:24px;
    border-top: 1px solid var(--color-border);
    text-align: right; font-family: var(--font-serif); font-size:0.95rem;
}

/* ===== 施設紹介 ===== */
#wk-facility {
    background: linear-gradient(145deg,rgba(212,165,165,0.07) 0%,rgba(196,181,212,0.1) 100%);
}

.wk-facility-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }

.wk-facility-card {
    background: rgba(255,255,255,0.85); border-radius: var(--radius-xl);
    overflow: hidden; border: 1px solid rgba(212,165,165,0.18);
    box-shadow: var(--shadow-sm); transition: var(--transition);
}
.wk-facility-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); }

.wk-facility-img { aspect-ratio:16/10; overflow:hidden; }
.wk-facility-img img { width:100%;height:100%;object-fit:cover; transition:transform 0.6s ease; }
.wk-facility-card:hover .wk-facility-img img { transform:scale(1.06); }

.wk-facility-body { padding:24px 28px; }
.wk-facility-body h3 { font-family:var(--font-serif); font-size:1.1rem; font-weight:400; margin-bottom:8px; }
.wk-facility-body p  { font-size:0.85rem; color:var(--color-text-light); line-height:1.85; }

/* ===== サービス紹介 ===== */
#wk-service {
    background:
        radial-gradient(ellipse 80% 60% at 95% 40%,rgba(212,165,165,0.1) 0%,transparent 60%),
        var(--color-bg);
}

.wk-services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }

.wk-service-card {
    background: rgba(255,255,255,0.92); border-radius:var(--radius-xl);
    overflow:hidden; border:1px solid rgba(212,165,165,0.15);
    box-shadow:var(--shadow-sm); transition:var(--transition);
    display:flex; flex-direction:column;
}
.wk-service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); }
.wk-service-card.wk-wide { grid-column:span 2; }

.wk-service-img { position:relative; overflow:hidden; }
.wk-service-img img { width:100%;height:100%;object-fit:cover; transition:transform 0.6s ease; display:block; }
.wk-service-card:hover .wk-service-img img { transform:scale(1.06); }
.wk-service-img-overlay { position:absolute;inset:0; background:linear-gradient(180deg,transparent 45%,rgba(160,110,110,0.25) 100%); }

.wk-service-card.wk-wide .wk-service-img { aspect-ratio:2.2/1; }
.wk-service-card:not(.wk-wide) .wk-service-img { aspect-ratio:16/10; }

.wk-service-body { padding:22px 24px; flex:1; display:flex; flex-direction:column; }
.wk-service-body h3 { font-family:var(--font-serif); font-size:1rem; font-weight:400; margin-bottom:10px; }
.wk-service-body p  { font-size:0.82rem; color:var(--color-text-light); line-height:1.85; flex:1; }

/* ===== アクセス ===== */
#wk-access {
    background: linear-gradient(145deg,rgba(196,181,212,0.1) 0%,rgba(212,165,165,0.08) 100%);
}

.wk-access-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }

.wk-access-map { border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3; border:1px solid var(--color-border); }
.wk-access-map iframe { width:100%;height:100%;border:none;display:block; }

.wk-access-info h3 { font-family:var(--font-serif); font-size:1.5rem; font-weight:400; margin-bottom:32px; }
.wk-access-items { display:flex;flex-direction:column;gap:20px; }
.wk-access-item  { display:flex;gap:14px;align-items:flex-start; }
.wk-access-item-label { font-size:0.75rem;font-weight:500;color:var(--color-primary-dark);letter-spacing:0.1em;margin-bottom:4px; }
.wk-access-item-val   { font-size:0.88rem;color:var(--color-text-light);line-height:1.75; }

/* ===== お問い合わせ ===== */
#wk-contact {
    background:
        radial-gradient(ellipse 80% 80% at 30% 40%,rgba(212,165,165,0.18) 0%,transparent 65%),
        radial-gradient(ellipse 70% 70% at 75% 60%,rgba(196,181,212,0.18) 0%,transparent 65%),
        linear-gradient(160deg,#FAF7F8 0%,#F6F0F8 100%);
}

.wk-contact-box { max-width:680px;margin:0 auto;text-align:center; }
.wk-contact-box p { font-size:0.92rem;color:var(--color-text-light);line-height:2;margin-bottom:44px; }
.wk-contact-note { margin-top:20px;font-size:0.75rem;opacity:0.7; }

/* ===== フッター ===== */
#wk-footer {
    background: linear-gradient(160deg,#EEE8F0 0%,#F0E8EC 100%);
    padding: 72px 0 32px;
}

.wk-footer-grid {
    display: grid; grid-template-columns:1.6fr 1fr; gap:64px;
    padding-bottom:56px; border-bottom:1px solid var(--color-border); margin-bottom:32px;
}

.wk-footer-tagline { font-size:0.84rem;color:var(--color-text-light);line-height:1.9;margin-bottom:20px; }
.wk-footer-addr    { font-size:0.78rem;color:var(--color-text-light);line-height:1.8; }

.wk-footer-nav h4 { font-size:0.8rem;font-weight:500;letter-spacing:0.15em;color:var(--color-primary-dark);margin-bottom:20px; }
.wk-footer-nav a  { font-size:0.84rem;color:var(--color-text-light);transition:color 0.3s;display:flex;align-items:center;gap:8px; }
.wk-footer-nav a::before { content:'›';color:var(--color-primary);font-size:1.1rem;line-height:1; }
.wk-footer-nav a:hover { color:var(--color-primary); }

.wk-footer-bottom { display:flex;justify-content:space-between;align-items:center;gap:16px; }
.wk-footer-copy   { font-size:0.74rem;color:var(--color-text-light); }
.wk-footer-policy { font-size:0.78rem;color:var(--color-primary-dark);transition:color 0.3s; }
.wk-footer-policy:hover { text-decoration:underline; }

/* ===== トップへ戻るボタン ===== */
#wk-back-to-top {
    position:fixed; bottom:32px; right:32px;
    width:50px; height:50px; border-radius:50%;
    background: linear-gradient(135deg,var(--color-primary),var(--color-secondary));
    color:#fff; font-size:1.1rem; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 5px 20px rgba(196,165,165,0.55);
    transition:var(--transition); opacity:0; pointer-events:none; z-index:998;
}
#wk-back-to-top.show { opacity:1; pointer-events:auto; }
#wk-back-to-top:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(196,165,165,0.65); }

/* ===== レスポンシブ ===== */
@media (max-width: 960px) {
    .wk-hero-content       { grid-template-columns:1fr; text-align:center; gap:44px; padding:44px 0 70px; }
    .wk-hero-btns          { justify-content:center; }
    .wk-hero-img-frame     { max-width:300px; aspect-ratio:1/1; border-radius:50%; }
    .wk-hero-img-ring      { display:none; }
    .wk-greeting-grid      { grid-template-columns:1fr; gap:44px; }
    .wk-services-grid      { grid-template-columns:1fr 1fr; }
    .wk-service-card.wk-wide { grid-column:span 2; }
    .wk-access-grid        { grid-template-columns:1fr; }
    .wk-footer-grid        { grid-template-columns:1fr; gap:40px; }
}

@media (max-width: 768px) {
    .wk-section            { padding:70px 0; }
    .wk-facility-grid      { grid-template-columns:1fr; }
    .wk-services-grid      { grid-template-columns:1fr; }
    .wk-service-card.wk-wide { grid-column:span 1; }
    .wk-service-card.wk-wide .wk-service-img { aspect-ratio:16/10; }
    .wk-footer-bottom      { flex-direction:column; text-align:center; }
    #wk-back-to-top        { bottom:20px; right:20px; width:44px; height:44px; }
}