/*
 * simplelife.css
 * 外壁塗装LP カスタムスタイル
 * SWELL child theme 用
 */

/* =============================
   Google Fonts
============================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@700;900&family=Caveat:wght@700&display=swap');

/* =============================
   Base
============================= */
.simplelife-page,
.simplelife-page body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    overflow-x: hidden;
    background-color: #fff;
}

/* SWELLのデフォルトスタイルを上書き（このページ内のみ） */
.simplelife-page #wrapper,
.simplelife-page #contents {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* =============================
   フォント
============================= */

/* 筆文字・セリフ体 */
.simplelife-page .font-fude {
    font-family: 'Noto Serif JP', serif;
    font-weight: 900;
}

/* 英字装飾 */
.simplelife-page .font-en {
    font-family: 'Caveat', cursive;
    color: rgba(37, 99, 235, 0.1);
    font-size: 5rem;
    line-height: 1;
}

/* =============================
   Hero
============================= */
.simplelife-page .hero-gradient {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%),
        url('https://simple-life-reform.com/wp-content/uploads/2026/04/2022_08_16_13.08.51.jpg');
    background-size: cover;
    background-position: center top;
}

/* =============================
   縦書き
============================= */
.simplelife-page .vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

/* =============================
   セクションタイトル
============================= */
.simplelife-page .section-title {
    position: relative;
    display: inline-block;
    margin-bottom: 2rem;
}

.simplelife-page .section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 40px;
    height: 3px;
    background: #2563eb;
}

.simplelife-page .section-title-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* =============================
   カードホバー
============================= */
.simplelife-page .hover-lift {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.simplelife-page .hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* =============================
   強みの背景数字
============================= */
.simplelife-page .bg-number {
    position: absolute;
    top: -20px;
    left: -20px;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(37, 99, 235, 0.05);
    line-height: 1;
    z-index: 0;
}

/* =============================
   FAQ アコーディオン
============================= */
.simplelife-page .faq-details[open] .faq-icon {
    transform: rotate(180deg);
}

/* =============================
   スクロールアニメーション
============================= */
.simplelife-page .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.simplelife-page .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================
   管理バー対応（ログイン時のズレ補正）
============================= */
.admin-bar .simplelife-page header.fixed-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .simplelife-page header.fixed-header {
        top: 46px;
    }
}