/*
Theme Name: astra-child
Template: astra
Description: Astra子テーマ（心理・子育て特化・医師ログイン/コメント搭載）
Version: 1.1.0
Author: YourName
*/

body {
    background: #f5f6fa;
    color: #222;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: .01em;
}
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
.site-header, .site-footer {
    background: rgba(250, 250, 252, 0.97);
    box-shadow: 0 0.5px 1.5px rgba(0,0,0,0.04);
    padding: 1.2em 0 0.7em;
    transition: background .4s;
}
.site-logo a {
    font-weight: 600;
    font-size: 1.35em;
    color: #24292e;
    letter-spacing: .08em;
    text-decoration: none;
}
.hamburger-menu {
    float: right;
    position: relative;
    z-index: 2000;
}
.menu__btn {
    display: inline-block;
    cursor: pointer;
    font-size: 2.1rem;
    user-select: none;
    border: none;
    background: none;
    color: #646464;
    transition: color .12s;
}
.menu__btn:hover { color: #0a84ff; }
.menu__box {
    display: none;
    position: absolute;
    right: 0;
    top: 2.8em;
    background: #fff;
    list-style: none;
    border-radius: 13px;
    box-shadow: 0 10px 30px rgba(50,60,110,0.09);
    min-width: 180px;
    padding: 0.8em 0.7em 0.7em 0.7em;
    border: none;
}
.hamburger-menu.menu--open .menu__box { display: block; }
.menu__box li { margin: 0.8em 0; }
.menu__box a, .menu__box span {
    color: #222;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .04em;
    transition: color .14s;
    outline: none;
    box-shadow: none;
}
.menu__box a:hover { color: #0071e3; }

/* Hero & 全体カードUI */
.lp-hero, .login-form-card {
    margin: 2.3em auto 1.8em auto;
    padding: 2.3em 1.6em 1.2em 1.6em;
    background: linear-gradient(135deg,#fafdff 60%,#eef3fe 100%);
    border-radius: 18px;
    box-shadow: 0 2px 18px 1px rgba(0,0,0,0.10), 0 0.5px 0.5px 0 #fff;
    max-width: 430px;
    text-align: center;
}
h1, h2, h3 { font-weight:700; letter-spacing:.03em; }
.lp-hero h1 {
    font-size: 2.3em;
    margin: 0.35em 0 0.25em;
    letter-spacing: .08em;
    color: #1e2329;
    text-shadow: 0px 2px 16px #f6f8fb;
}
.lp-hero p { color: #6e7781; font-size: 1.12em; }

.latest-posts-list, .comments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.post-card, .comment-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px 0 rgba(50,60,110,0.09);
    padding: 1.18em 1.0em 1.12em 1.0em;
    min-width: 270px;
    flex: 1 1 270px;
    transition: box-shadow .2s;
}
.post-card:hover, .comment-card:hover {
    box-shadow: 0 8px 24px 0 rgba(38,132,255,0.12);
}
.post-thumb, .single-thumb {
    width: 96%;
    max-height: 164px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0.7em auto 0.6em auto;
    display:block;
    box-shadow: 0 3px 12px rgba(50,80,140,0.09);
}
.post-meta {
    color: #0071e3;
    font-size: 1.05em;
    margin-bottom: 0.5em;
    font-weight: 600;
    letter-spacing:.07em;
}
.post-card-content h3 {
    font-size: 1.17em;
    margin:0.4em 0 0.33em;
}
.post-card-content p {
    color: #545b72;
    font-size: 0.99em;
    margin: 0;
}
.lp-latest h2, .lp-postform h2 {
    margin-left: .15em;
    color: #214285;
    font-size: 1.28em;
    font-weight:700;
}

/* フロント投稿フォームやカード一般 */
.lp-postform, .comment-form-section, .comment-login-req {
    margin: 2em auto 1.2em auto;
    max-width: 460px;
    background: #fafdff;
    border-radius: 15px;
    box-shadow: 0 2px 10px 1px rgba(60,50,140,0.08);
    padding: 2.0em 1.2em 1.32em 1.2em;
}
.lp-postform form, .comment-form-section form {
    display: flex;
    flex-direction: column;
    gap: 1.08em;
    margin: 0.3em 0 0 0;
}
.lp-postform input, .lp-postform select, .lp-postform textarea,
.comment-form-section input, .comment-form-section textarea {
    padding: 0.72em 1.05em;
    font-size: 1em;
    border: 1.5px solid #e4eaf0;
    border-radius: 9px;
    background: #f7faff;
    box-shadow: 0 1px 3px rgba(230,240,255,0.04);
    margin-bottom: 0.2em;
    outline: none;
    transition: border-color 0.18s, background 0.18s;
}
.lp-postform input:focus, .lp-postform textarea:focus,
.comment-form-section input:focus, .comment-form-section textarea:focus {
    border-color: #0a84ff;
    background: #fff;
}
.submit-btn, .like-btn, .load-more-btn, button, input[type="submit"] {
    background: linear-gradient(90deg,#298cff 65%,#1e6fff 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.73em 1.35em;
    cursor: pointer;
    box-shadow: 0 2px 3px rgba(30,90,190,0.05);
    font-size: 1.06em;
    font-weight: 600;
    margin-top: 0.2em;
    letter-spacing: .06em;
    transition: background .17s,transform .13s;
}
.submit-btn:hover, .like-btn:hover, .load-more-btn:hover, button:hover {
    background: linear-gradient(90deg,#155ead 65%,#0071e3 100%);
    transform: translateY(-2px) scale(1.03);
}
.like-btn { background: #f5f6fa; color: #0071e3; border: 1.5px solid #e4eaf0; }
.like-btn:hover { background:#e9f4ff; color:#005bc1; }
.like-count { margin-left: 0.5em; }
.single-summary { background: #f8fbfa; padding:1.08em; margin:1.12em 0 1.16em 0; border-radius:9px; color:#1a2441; font-weight:500; }
.comment-header { display:flex; align-items:center; gap:0.8em; margin-bottom:0.27em;}
.comment-user {
    color:#214285;
    font-weight:600;
    font-size:1.05em;
    letter-spacing:.06em;
}
.comment-date {
    color:#939caa;
    font-size:0.97em;
}
.comment-body { color:#33404d; font-size:1.04em; margin-bottom:0.5em; }
.load-more-comments { text-align:center; margin: 1.05em auto 0.3em auto; }
/* ログインFormも刷新 */
.login-form-card {
    margin-top:4em;
    background:linear-gradient(125deg,#fafdff,#edf2fb 80%);
    border:1.5px solid #e4eaf0;
    box-shadow: 0 4px 14px 0 #dbe7fa55;
}
.login-form-card h2 { color:#0071e3; letter-spacing:.08em; font-size:1.37em; }
.login-failed {color:#ff4444;background:#fff0f1;border-radius:7px;padding:0.7em 0;margin-bottom:0.7em;}
.login-success {color:#0f8a3b;background:#ecfff3;border-radius:7px;padding:0.7em 0;margin-bottom:0.7em;}

/* 月次パスワード更新リマインド */
.doctor-expire-banner {position:fixed;bottom:18px;left:0;right:0;z-index:3000}
.doctor-expire-banner .container{max-width:900px;margin:0 auto;background:#1d2736;color:#fff;padding:.7em 1em;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.doctor-expire-banner a{color:#8ecbff;font-weight:600;text-decoration:none;margin-left:.6em}

/* カード全体クリック */
.post-card--link { display:block; text-decoration:none; color:inherit; }
.post-card--link:hover { box-shadow: 0 8px 24px 0 rgba(38,132,255,0.12); }

/* タイプトグル */
.type-toggle { display:flex; gap:10px; justify-content:center; margin-top: 12px; flex-wrap: wrap; }
.type-chip { border:1.5px solid #e4eaf0; border-radius:999px; padding:.45em 1em; color:#334; text-decoration:none; background:#fff; transition: all .15s; }
.type-chip.active { background:#0071e3; color:#fff; border-color:#0071e3; }
.type-chip:not(.active):hover { background:#eef6ff; }

/* ヘッダーメニューをヘッダー内に収める */
.site-header .container { display:flex; align-items:center; justify-content:space-between; }
.hamburger-menu { position: relative; float: none; }
.menu__box { max-width: 70vw; }

/* セレクトの見切れ対策 */
select { max-width:100%; white-space:normal; line-height:1.35; height:auto; padding-right: 2.2em; }
.disorder-wrap select { width:100%; }

/* メニューボタンの輪郭(ボーダー/アウトライン/シャドウ)を消す */
.menu__btn { border: none; outline: none; box-shadow: none; background: none; }
.menu__btn:focus { outline: none; box-shadow: none; }

/* モバイルでの左右余白の最適化（全幅寄せ） */
@media (max-width: 640px) {
    .container { padding: 0 3.5vw !important; }
    .site-header, .site-footer { padding: 0.8em 2.5vw 0.7em 2.5vw; }
    .latest-posts-list { margin-left: -2.5vw; margin-right: -2.5vw; }
    .post-card, .post-card--link { border-radius: 0; box-shadow:none; border-top:1px solid #eef2f8; padding: 14px 3.5vw; }
    .post-card--link:first-child { border-top: none; }
}

@media (max-width: 800px) {
    .container, .lp-hero, .lp-postform, .lp-latest, .login-form-card {
        padding: 14px !important; min-width: unset;
    }
    .latest-posts-list, .comments-list { flex-direction: column; gap: 14px;}
    .post-card, .comment-card { min-width: 99px; }
}
@media (max-width: 500px) {
    .site-header, .site-footer {padding:0.8em 2vw 0.7em 2vw;}
    .lp-hero, .login-form-card, .lp-latest, .lp-postform, .comment-form-section, .comment-login-req {
        padding: 8px 4vw 7px 4vw !important;
        border-radius:10px;
        min-width:auto;
    }
    h1 { font-size:1.33em; }
}