/* =====================================================================
   ヴィータ境 LP — eforce.jp/vita_sakai/ の再現
   このファイルはヴィータ境ページ（page-vita-sakai.php）でのみ読み込む。
   配色・構成・文言は本家に準拠（DESIGN.md「ヴィータ境専用ローズパレット」参照）
   ===================================================================== */

#vita-lp {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: .02em;
    color: #333;
    background: #fff;
}
#vita-lp .wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 4%;
}
#vita-lp h2,
#vita-lp h3,
#vita-lp h4 {
    font-family: "Hannari", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 600;
    font-feature-settings: "palt";
    letter-spacing: 3px;
    color: #5897dd;
    position: relative;
}
#vita-lp section { padding: 4em 0; }
#vita-lp section:after { display: block; content: ''; clear: both; }
#vita-lp p { margin: 0 0 1em; }
#vita-lp ul { list-style: none; margin: 0; padding: 0; }

/* ---------- MV（メインビジュアル） ---------- */
#vita-lp #mv {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 0;
}
#vita-lp #mv:before {
    display: block;
    content: "";
    background: #f2d2b0;
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#vita-lp #mv .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    width: 100%;
    max-width: none;
    padding: 0;
}
#vita-lp #mv h2 {
    font-size: 200%;
    color: #fff;
    margin: 0;
    text-align: center;
    letter-spacing: 3px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
    position: relative;
}
#vita-lp #mv h2 small { display: block; font-size: 45%; }

/* ---------- 空き情報 ---------- */
#vita-lp #vita_vacant { text-align: center; padding: 0; }
#vita-lp #vita_vacant span {
    display: inline-block;
    background: #fff;
    border: 1px solid #8e3a3a;
    color: #8e3a3a;
    line-height: 1.7em;
    letter-spacing: 1px;
    margin-top: 18px;
    padding: 5px 15px;
    border-radius: 30px;
}

/* ---------- PHILOSOPHY（ピンク基調） ---------- */
#vita-lp #philosophy {
    background: #fec5c4;
    position: relative;
    overflow: hidden;
}
#vita-lp #philosophy_catch {
    position: absolute;
    top: 40px;
    left: 20px;
    font-size: 9em;
    font-weight: 600;
    font-feature-settings: "palt";
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, sans-serif;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1em;
}
#vita-lp #philosophy .philosophy-content {
    width: 50%;
    float: right;
    color: #fff;
    position: relative;
}
#vita-lp #philosophy .philosophy-content h3,
#vita-lp #philosophy .philosophy-content p { color: #fff; }
#vita-lp #philosophy:after { display: block; content: ''; clear: both; }

#vita-lp .flex_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#vita-lp .flex_reverse { flex-direction: row-reverse; }

#vita-lp .philosophy_list {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
}
#vita-lp .philosophy_list li {
    flex: 0 0 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #e29689;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.25);
    text-align: center;
}
#vita-lp .philosophy_list li div { display: block; }
#vita-lp .philosophy_list li strong,
#vita-lp .philosophy_list li span { display: block; line-height: 1.4em; }
#vita-lp .philosophy_list li strong { margin-bottom: 10px; }
#vita-lp .philosophy_list li span { font-size: 80%; color: #333; }

/* お悩みエリア */
#vita-lp .nayami_area {
    margin-top: 4em;
    text-align: center;
    position: relative;
}
#vita-lp .nayami_area:after {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: url(../images/lp/img_nayami.webp) no-repeat;
    background-size: 50%;
    background-position: 80% top;
    position: absolute;
    top: -14%;
}
#vita-lp .nayami_area dl { position: relative; z-index: 1; margin: 0; }
#vita-lp .nayami_area dl dt {
    font-size: 160%;
    text-align: left;
    line-height: 1.25em;
    margin-bottom: 1em;
    transform: rotate(-5deg);
}
#vita-lp .nayami_area dl dd { margin: 0; }
#vita-lp .nayami_area dl dd ul li {
    display: inline-block;
    width: 48%;
    background: #8e3a3a;
    text-align: center;
    margin: 1% 1% 1% 0;
    padding: 10px;
    border-radius: 5px;
}
#vita-lp .nayami_area dl dd ul li:nth-child(2) { margin-right: 0; }
#vita-lp .nayami_area dl dd ul li:last-child { width: 98%; margin: 1%; }

/* ---------- CASE（入居者の声・Q&A） ---------- */
#vita-lp #case h3 {
    color: #e29689;
    font-size: 160%;
    position: relative;
    margin: 0 0 1.5em;
    line-height: 1.5;
}
#vita-lp #case h3 div {
    position: absolute;
    top: 15%;
    left: -35%;
    width: max-content;
    animation: fuwafuwa 2s infinite;
}
#vita-lp #case h3 small {
    display: block;
    width: max-content;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    font-size: 55%;
    letter-spacing: 1px;
    transform: rotate(5deg);
    margin: 0;
    padding: 10px 15px;
    border-radius: 15px;
}
#vita-lp #case h3 small:before {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #fff;
    z-index: 0;
}
@keyframes fuwafuwa {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}
#vita-lp .case-content { margin-bottom: 3em; }
#vita-lp .case-content:last-child { margin-bottom: 0; }
#vita-lp .case-content > div { width: 50%; }
#vita-lp #case .case-content:nth-child(even) h3 div { left: auto; right: -35%; }
#vita-lp #case .case-content:nth-child(even) h3 small { transform: rotate(-5deg); }
#vita-lp .img_case { margin-top: 2em; }
#vita-lp .img_case img {
    display: block;
    max-width: 460px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    transform: scale(-1, 1);
}
#vita-lp .txt_case { text-align: left; padding: 0 0 0 4%; }
#vita-lp .txt_case dl { margin: 0; }
#vita-lp .txt_case dl dt { margin-bottom: 0.75em; font-weight: 600; }
#vita-lp .txt_case dl dd { margin: 0 0 1.25em; padding: 0; }
#vita-lp .txt_case dl dd:last-child { margin-bottom: 0; }
#vita-lp .txt_case dl dt span:before,
#vita-lp .txt_case dl dd:before {
    display: block;
    background: #e29689;
    color: #fff;
    content: 'Q';
    float: left;
    width: 1.7em;
    height: 1.7em;
    font-weight: normal;
    line-height: 1.7em;
    text-align: center;
}
#vita-lp .txt_case dl dt span:before { background: #333; }
#vita-lp .txt_case dl dd:before { content: 'A'; }
#vita-lp .txt_case dl dt span div,
#vita-lp .txt_case dl dd div {
    float: right;
    width: calc(100% - 2.5em);
    font-weight: normal;
    line-height: 1.7em;
}
#vita-lp .txt_case dl dt:after,
#vita-lp .txt_case dl dd:after { display: block; content: ''; clear: both; }

/* ---------- INTRO（施設概要） ---------- */
#vita-lp #intro { background: #fff; position: relative; }
#vita-lp #intro h3 {
    color: #e29689;
    font-size: 200%;
    margin: 1em 0 1.5em;
}
#vita-lp #intro h3 small { display: block; font-size: 65%; margin-top: 5px; }
#vita-lp #intro h3 span {
    display: block;
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, sans-serif;
    font-size: 6em;
    font-weight: 600;
    font-feature-settings: "palt";
    color: rgba(221, 88, 88, 0.15);
    writing-mode: vertical-rl;
    position: absolute;
    top: -0.25em;
    right: 0;
    z-index: 1;
}
#vita-lp #intro .service_box { margin: 3em 0; }
#vita-lp #intro .service_box:after { display: block; content: ''; clear: both; }
#vita-lp #intro .img_intro { width: 30%; float: left; }
#vita-lp #intro .img_intro img { display: block; width: 100%; height: auto; }
#vita-lp #intro .intro-content {
    width: 65%;
    float: right;
    position: relative;
    z-index: 2;
}
#vita-lp #intro .intro-content h4 {
    color: #e29689;
    font-size: 180%;
    margin: 0 0 20px;
    border-bottom: solid 1px #ededed;
    padding-bottom: 10px;
}
#vita-lp #intro .intro-content h4:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 1px #e29689;
    bottom: -1px;
    width: 90px;
}
#vita-lp #intro table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
    margin: 0;
}
#vita-lp #intro table th,
#vita-lp #intro table td {
    border: 1px solid #ddd;
    padding: 14px 30px;
    text-align: left;
    vertical-align: top;
}
#vita-lp #intro table th {
    background: rgba(221, 88, 88, 0.085);
    white-space: nowrap;
    font-weight: 600;
}
#vita-lp #intro table td ul { list-style-type: circle; margin: 0; padding-left: 1.2em; }
#vita-lp #intro table td ul li { margin-bottom: 15px; }
#vita-lp #intro table td ul li:last-child { margin-bottom: 0; }
#vita-lp #intro table td ul li strong { display: block; margin-bottom: 5px; }
#vita-lp .txt_link { padding-left: 1em; position: relative; }
#vita-lp .txt_link a { color: #2581c4; text-decoration: underline; }
#vita-lp .txt_link:before { content: '→'; display: inline-block; color: #2581c4; margin-right: 5px; }

/* アクセスマップ（Googleマップ埋め込み） */
#vita-lp .map_embed { margin-top: 3em; }
#vita-lp .map_embed h4 {
    color: #e29689;
    font-size: 150%;
    margin: 0 0 20px;
    border-bottom: solid 1px #ededed;
    padding-bottom: 10px;
    position: relative;
}
#vita-lp .map_embed h4:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 1px #e29689;
    bottom: -1px;
    width: 90px;
}
#vita-lp .map_embed iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 0;
}
@media (max-width: 767px) {
    #vita-lp .map_embed iframe { height: 300px; }
}

/* 館内ギャラリー */
#vita-lp .lp-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 2em;
}
#vita-lp .lp-gallery figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
#vita-lp .lp-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =====================================================================
   このページ限定：ヘッダー／フッター（バナー）をローズ系に
   ピンクのLPとの境目で青が浮かないようにする
   ===================================================================== */
.theme-rose .site-brand__mark { background: linear-gradient(135deg, #8e3a3a 0%, #e29689 100%); }
.theme-rose .site-brand { color: #8e3a3a; }
.theme-rose .site-nav .nav-list a { color: #8e3a3a; }
.theme-rose .site-nav .nav-list a::after { background: #e29689; }
.theme-rose .site-nav .nav-list a:hover { color: #9c5347; }
.theme-rose .nav-drawer .nav-list a { color: #8e3a3a; }
.theme-rose .nav-toggle span { background: #8e3a3a; }
.theme-rose .site-header.is-scrolled { box-shadow: 0 4px 16px rgba(142, 58, 58, .08); }
.theme-rose .chip { color: #8e3a3a; }
.theme-rose .chip:hover { border-color: #9c5347; color: #9c5347; background: #fdf1f0; }
.theme-rose .chip--primary { background: #8e3a3a; border-color: #8e3a3a; color: #fff; }
.theme-rose .chip--primary:hover { background: #9c5347; border-color: #9c5347; color: #fff; }

.theme-rose .site-footer { background: #8e3a3a; }
.theme-rose .site-footer__cta {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(254, 197, 196, .25) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(242, 210, 176, .22) 0%, transparent 55%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.theme-rose .section-title--light { color: #fff; }
.theme-rose .section-title--light::after { background: #fec5c4; }
.theme-rose .eyebrow--light { color: #fec5c4; }
.theme-rose .btn--primary { background: #9c5347; border-color: #9c5347; }
.theme-rose .btn--primary:hover { background: #e29689; border-color: #e29689; color: #fff; }
.theme-rose .site-footer__heading { color: #fec5c4; }
.theme-rose .site-footer__cols ul a:hover { color: #fec5c4; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 767px) {
    #vita-lp #mv h2 { height: 240px; }
    #vita-lp #philosophy_catch { font-size: 4.5em; }
    #vita-lp #philosophy .philosophy-content { width: 100%; float: none; margin: 10em 0 0; }
    #vita-lp .philosophy_list { justify-content: center; }
    #vita-lp .philosophy_list li { width: 145px; max-width: 145px; height: 145px; }
    #vita-lp .case-content > div { width: 100%; margin-top: 4em; }
    #vita-lp .txt_case { padding: 0; }
    #vita-lp .img_case img { max-width: 75%; }
    #vita-lp #case h3 { margin-top: 1.5em; }
    #vita-lp #case h3 div,
    #vita-lp .case-content:nth-child(even) h3 div { position: static; display: inline-block; margin-top: 10px; animation: none; }
    #vita-lp #case h3 small:before { display: none; }
    #vita-lp #intro .img_intro,
    #vita-lp #intro .intro-content { width: 100%; float: none; }
    #vita-lp #intro .img_intro { margin-bottom: 2em; }
    #vita-lp #intro h3 span { font-size: 4em; }
    #vita-lp #intro table th,
    #vita-lp #intro table td { font-size: 80%; padding: 10px; }
    #vita-lp .lp-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
    #vita-lp #philosophy_catch { font-size: 3em; }
    #vita-lp #philosophy .philosophy-content { margin-top: 7em; }
    #vita-lp .philosophy_list li { width: 120px; max-width: 120px; height: 120px; }
    #vita-lp .philosophy_list li strong { margin-bottom: 5px; }
    #vita-lp .nayami_area:after { background-position: right top; }
    #vita-lp .nayami_area dl dd ul li br { display: none; }
    #vita-lp .img_case img { max-width: 320px; }
}