/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 09 2026 | 07:53:43 */
/* --- カラーパレット・フォント --- */
:root {
    --p-bg: #f0ede6; /* サイト全体背景 */
    --p-block-bg: #fffef7; /* ブロック背景 */
    --p-text: #505050; /* 全体の文字色 */
    
    --p-text-menu: #fbfaf7; /* メニューの文字色 */
    --p-grad-color-a: #f0ede6; /* メニューの色A（内側） */
    --p-grad-color-b: #362e2b; /* メニューの色B（外側） */
    --p-grad-color-c: #E4E1DA; /* 外側と内側の中間色 */
    
    --p-white: #fffef7; /* パールホワイト */
    --p-wood: #6B4E3D; /* ウォルナット */
    --p-green: #1E4631; /* フォレストフェルト */
    --p-red: #A52A2A; /* フェルトレッド */
	
	--p-orange: #C67C4E; /* ウォルナットから派生させた温かみのあるオレンジ */
}

:root {
    --p-hero-time: 5s; /* フェード時間 */
    --p-font-heading: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", serif;
    --p-font-body: "Helvetica Neue", Arial, "Hiragino Sans", sans-serif;
    --p-grad-start-percent: -10%; /* グラデーションの幅 */
}

/* --- サイト全体・基本フォント --- */
html,
body {
    background: var(--p-bg);
    color: var(--p-text);
    font-family: var(--p-font-body);
}

/* 💡 【一括統合】明朝体にするものはすべてここに集約 */
h1, h2, h3, h4, h5, h6,
.site-title,
.site-title a,
.custom-logo-link + .site-title a,
.main-navigation a,
.menu-item a,
.wp-block-navigation-item__content,
.wp-block-button__link,
.price-title-wrapper .price-title,
.notice-title { /* 👈 「※ 注意事項：」もここに合流して明朝化 */
    font-family: var(--p-font-heading) !important;
}

/* --- 全見出し共通スタイル（フォント種別は上で統一したため、装飾のみ） --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-shadow: 2px 2px 3px rgba(0,0,0,.25);
    line-height: 1.4;
    color: var(--p-text);
}

/* pタグの下余白を小さく調整（デフォルトより狭くする） */
p {
    margin-bottom: 0.8em !important; /* 数字を小さくするほど隙間が縮みます */
}

/* --- H5とH6だけ上下の隙間を小さく（本文と同じ感覚に）設定 --- */
h5,
h6 {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

/* --- ヘッダー：下から上に向かって A → B へフェード --- */
.ct-header,
.ct-header [data-row],
.ct-header.is-sticky,
.ct-header[data-sticky],
.ct-header [data-row="main"] {
    background-image: linear-gradient(
        to top,
        var(--p-grad-color-a) 0%,
        var(--p-grad-color-a) var(--p-grad-start-percent),
        var(--p-grad-color-b) 100%
    ) !important;
}

/* --- フッター：上から下に向かって A → B へフェード --- */
.ct-footer,
.ct-footer [data-row] {
    background-image: linear-gradient(
        to bottom,
        var(--p-grad-color-a) 0%,
        var(--p-grad-color-a) var(--p-grad-start-percent),
        var(--p-grad-color-b) 100%
    ) !important;
}

/* --- モバイルドロワー（背景色） --- */
#ct-drawer-container,
#ct-drawer-container [class*="inner"],
.ct-drawer-canvas,
.ct-drawer-canvas [data-drawer],
.ct-panel,
.off-canvas,
.ct-panel-content,
[data-drawer] {
    background: var(--p-grad-color-b) !important;
    background-color: var(--p-grad-color-b) !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* --- ドロワー内のリンク文字（フォント色と影） --- */
.ct-drawer-canvas a,
.ct-drawer-canvas .menu-item a,
.ct-drawer-canvas .wp-block-navigation-item__content,
.ct-panel a,
.off-canvas a {
    color: var(--p-text-menu) !important;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25) !important;
}

/* --- ドロワーを閉じるボタン（✕） --- */
.ct-drawer-canvas .ct-close-button,
.ct-drawer-canvas [data-header-button="close"],
.ct-panel .ct-close-button {
    color: var(--p-mobile-menu-text) !important;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25) !important;
}

/* --- グローバルメニュー：サイトタイトル --- */
.site-title,
.site-title a,
.custom-logo-link + .site-title a {
    color: var(--p-text-menu) !important;
    text-shadow: 2px 2px 3px rgba(0,0,0,.25);
    font-size: 2rem !important;
    font-weight: 700;
}

/* --- グローバルメニュー：ナビゲーションメニュー --- */
.main-navigation a,
.menu-item a,
.wp-block-navigation-item__content {
    color: var(--p-text-menu) !important;
    text-shadow: 2px 2px 3px rgba(0,0,0,.25);
    font-size: 1.2rem !important;
    font-weight: 700;
}

/* --- カバーブロック --- */
.wp-block-cover,
.wp-block-cover__background,
.wp-block-cover__inner-container {
    border: none !important;
}

.wp-block-cover__background {
    display: none !important;
}

/* --- カバーブロック内 --- */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover h4,
.wp-block-cover h5,
.wp-block-cover h6 {
    color: var(--p-wood) !important;
}

.wp-block-cover p {
    color: var(--p-text) !important;
    font-family: var(--p-font-body);
}

/* --- オリジナル区切り線 --- */
hr.wp-block-separator,
.wp-block-separator {
    border: none !important;
    height: 6px !important;
    width: 70% !important;
    max-width: 100% !important;
    margin: 3.5rem auto !important; 
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        var(--p-text) 5%,
        var(--p-text) 95%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
    opacity: 0.85 !important;
}

/* --- ボタン --- */
.wp-block-button__link {
    background-color: var(--p-green) !important;
    background-image: none !important;
    color: var(--p-white) !important;
    font-size: 1.1rem;
    font-weight: 700;
    border: none !important;
    border-radius: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,.25);
    transition: .3s;
}

/* --- 見出しサイズ --- */
h1 { font-size: 2.8rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.7rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

/* --- ブロック共通 --- */
.wp-block-group,
.wp-block-columns,
.wp-block-column {
    background: transparent;
}

/* --- リンク --- */
a {
    color: var(--p-green);
}

a:hover {
    color: var(--p-red);
}

/* 画像の角を少し丸くして直角の印象を柔らかくする */
.wp-block-media-text.img-frame-target img {
    border-radius: 8px !important;
    
    /* 影や装飾のリセット */
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
}

/* 不要な擬似要素のリセット */
.wp-block-media-text.img-frame-target .wp-block-media-text__media::before,
.wp-block-media-text.img-frame-target .wp-block-media-text__media::after {
    content: none !important;
}/* 画像の角を少し丸くして直角の印象を柔らかくする */
.wp-block-media-text.img-frame-target img {
    border-radius: 8px !important;
    
    /* 影や装飾のリセット */
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
}

/* 不要な擬似要素のリセット */
.wp-block-media-text.img-frame-target .wp-block-media-text__media::before,
.wp-block-media-text.img-frame-target .wp-block-media-text__media::after {
    content: none !important;
}

/* ==========================================
   共通デザイン：左直角・右半円スタイル（丸背景）
   ========================================== */
:is(h1, h2, h3, h4, h5, h6, div).circle-bg {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    background-color: var(--p-grad-color-c) !important;
    border-radius: 0 9999px 9999px 0 !important;
    padding: 6px 30px 6px 20px !important;
    margin: 0 0 15px 0 !important;
}

/* ==========================================
   ホーム
   ========================================== */

/* --- メインビジュアルフェード --- */
.hero-main {
    position: relative;
    overflow: hidden;
}

.hero-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--p-bg);
    opacity: 0;
    animation: heroFade var(--p-hero-time) ease-out forwards;
    pointer-events: none;
    z-index: 1;
}

@keyframes heroFade {
    from { opacity: 0; }
    to { opacity: 0.9; }
}

/* --- メインビジュアル文字フェードイン --- */
.hero-main .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(25px);
    animation: heroText var(--p-hero-time) ease-out forwards;
}

@keyframes heroText {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- メインビジュアル画像の背景とのフェード --- */
.mask-fade {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
                        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
                linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* ==========================================
   サービス
   ========================================== */
/* 選ばれる理由 */
.service-notice-group p {
    padding-left: 2.5em !important;
    margin-top: 8px !important;
    margin-bottom: 24px !important;
}

/* ==========================================
   料金
   ========================================== */
/* タイトルブロック */

/* テキスト部分（見出し内の文字サイズや色） */
.circle-bg > .price-title {
    font-size: 30px !important;
    font-weight: bold !important;
    color: #333333 !important;
    white-space: nowrap !important;
    padding-right: 10px !important;
    text-shadow: 2px 2px 3px rgba(0,0,0,.25) !important;
}

/* 自動で伸びる直線（丸背景の中に入る緑の線） */
.circle-bg > .price-line {
    flex-grow: 1 !important;
    height: 5px !important;
    background-color: #1e4620 !important;
}

/* 料金ページ：ピアノ種別の見出し */
.price-heading {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 4px !important;
    box-sizing: border-box !important;
    transform: translateX(-1.2em); /* ← 追加：左に飛び出させる量 */
}

@media (max-width: 600px) {
    .price-heading {
        transform: translateX(-0.6em); /* スマホでは飛び出し量を控えめに */
    }
}

/* 一覧ブロック */
.price-row-container {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important; 
    margin-left: auto !important;  
    margin-right: auto !important; 
    box-sizing: border-box !important;
}

.price-row-container .price-item {
    display: flex !important;
    align-items: baseline !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}

.price-row-container .item-name {
    font-size: 18px !important;
    white-space: nowrap !important;
    padding-right: 8px !important;
}

.price-row-container .item-dots {
    flex-grow: 1 !important;
    border-bottom: 4px dotted #cccccc !important;
    margin-bottom: 2px !important;
}

.price-row-container .item-price {
    font-size: 18px !important;
    font-weight: bold !important;
    color: var(--p-green) !important;
    text-align: right !important;
    white-space: nowrap !important;
    padding-left: 8px !important;
    min-width: 110px !important;
}

/* 補足文字用 */
.price-note {
    font-size: 1em;
    color: var(--p-orange);
    margin: 2px 0 8px 1.5em;
    line-height: 1.3;
    font-weight: bold;
}

/* 注意事項ブロック */
.notice-container {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 1200px !important;       
    margin: 20px auto 0 !important;
    font-size: 20px !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

/* 「※ 注意事項：」部分 */
.notice-title {
    font-weight: bold !important;
    white-space: nowrap !important;
    padding-right: 40px !important; /* 💡 24pxから「40px」にさらに広げて、しっかりとした余白を確保 */
    color: var(--p-red) !important;
}

.notice-list {
    flex-grow: 1 !important;
}

.notice-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 8px !important;
}

/* 箇条書きの数字（1. 2.）の部分 */
.notice-num {
    font-size: 1rem !important;  /*  文字サイズを一回り小さく */
    font-weight: normal !important; /* 💡 太字加工（bold）を完全にやめ、通常表示に戻しました */
    min-width: 24px !important;     /* 余白を広げたのに合わせて、数字の領域幅も微調整 */
}

/* 注意事項の本文テキスト部分：フォントサイズを小さく調整 */
.notice-text {
    font-size: 1rem !important;  /*  数字部分に合わせてサイズを統一 */
    flex-grow: 1 !important;
}
/* 注意事項スマホ用 */
@media (max-width: 600px) {
    .notice-container {
        display: block !important;
    }
    .notice-title {
        white-space: normal !important;
        padding-right: 0 !important;
        margin-bottom: 8px !important;
    }
}

/* ==========================================
   プロフィールブロック
   ========================================== */
.profile-bracket-frame {
    position: relative;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.65), transparent),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.024' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.42 0 0 0 0.15 0 0.31 0 0 0.08 0 0 0.24 0 0.05 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperNoise)'/%3E%3C/svg%3E") !important;
    background-color: var(--p-white) !important;
    background-blend-mode: multiply !important;
    box-shadow: 6px 10px 20px rgba(0, 0, 0, 0.18) !important;
    border-radius: 6px;
    padding: 35px !important; 
    box-sizing: border-box;
}

.profile-bracket-frame::before,
.profile-bracket-frame::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    pointer-events: none;
    background-repeat: no-repeat, no-repeat;
}

.profile-bracket-frame::before {
    top: 15px;
    left: 15px;
    background-image: 
        linear-gradient(to right, var(--p-wood) 0%, transparent 100%),
        linear-gradient(to bottom, var(--p-wood) 0%, transparent 100%);
    background-size: 150px 6px, 6px 150px;
    background-position: top left, top left;
}

.profile-bracket-frame::after {
    bottom: 15px;
    right: 15px;
    background-image: 
        linear-gradient(to left, var(--p-wood) 0%, transparent 100%),
        linear-gradient(to top, var(--p-wood) 0%, transparent 100%);
    background-size: 150px 6px, 6px 150px;
    background-position: bottom right, bottom right;
}

@media screen and (max-width: 600px) {
    .profile-bracket-frame::before,
    .profile-bracket-frame::after {
        width: 70px;
        height: 70px;
    }
    .profile-bracket-frame::before {
        background-size: 70px 4px, 4px 70px;
    }
    .profile-bracket-frame::after {
        background-size: 70px 4px, 4px 70px;
    }
}

/* ==========================================
   よくある質問（FAQ）ブロック（デグレ完全解消版）
   ========================================== */
/* FAQ全体の枠組み（上から下まで1本貫通する左の縦線を復活） */
.faq-original-style {
    position: relative !important;
    background: transparent !important;
    border-left: 10px solid var(--p-green) !important; /* 👈 縦の緑線を完全復活 */
    padding: 0 !important;
    margin-bottom: 30px !important;
    box-sizing: border-box !important;
}

/* FAQの「Q」部分（左直角・右半円の丸背景を適用。親の縦線に吸着させる） */
.faq-original-style :is(h1, h2, h3, h4, h5, h6):nth-of-type(1),
.circle-bg.faq-q:nth-of-type(1) {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* 左直角・右半円スタイル（丸背景） */
    background-color: var(--p-grad-color-c) !important;
    border-radius: 0 9999px 9999px 0 !important;
    
    /* 💡 親の縦線と重なるため、Q自身の左ボーダーは不要（noneにして親の線と一体化） */
    border-left: none !important; 
    
    font-size: 1.8rem !important;
    gap: 15px !important; 
    margin: 0 0 15px 0 !important;
    padding: 6px 30px 6px 20px !important; /* 内側の余白 */
}

/* Qの右側に伸びる太い緑の直線 */
.faq-original-style :is(h1, h2, h3, h4, h5, h6):nth-of-type(1)::after,
.circle-bg.faq-q::after {
    content: "" !important;
    flex-grow: 1 !important;
    height: 4px !important;
    background-color: var(--p-green) !important;
    flex-shrink: 0 !important;
}

/* 問い合わせ内容（p） */
.faq-original-style h6:nth-of-type(1) + p {
    margin: 0 !important;
    background: transparent !important;
    /* 親の縦線の太さ（10px）に合わせた綺麗なインデントを確保 */
    padding: 4px 20px 12px 30px !important; 
}

/* AのH6（ここには親の縦線のみが左側を通ります） */
.faq-original-style h6:nth-of-type(2) {
    color: var(--p-red) !important;
    font-size: 1.8rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 !important;
    /* Qのテキスト開始位置（左側パディング）にきっちり揃える */
    padding: 6px 20px 4px 30px !important; 
}

/* Aの右側に伸びる赤の「真ん丸ドット」 */
.faq-original-style h6:nth-of-type(2)::after {
    content: "" !important;
    flex-grow: 1 !important;
    height: 0 !important;
    border-bottom: 4px dotted var(--p-red) !important;
    margin-bottom: 4px !important;
}

/* 回答本文（p） */
.faq-original-style h6:nth-of-type(2) + p {
    margin: 0 !important;
    background: transparent !important;
    /* Aの文字位置に揃える */
    padding: 2px 20px 10px 30px !important;
}

/* スマホ表示での調整 */
@media screen and (max-width: 600px) {
    .faq-original-style {
        border-left-width: 6px !important; /* スマホ時は縦の緑線を少し細く */
    }
    .faq-original-style :is(h1, h2, h3, h4, h5, h6):nth-of-type(1),
    .circle-bg.faq-q:nth-of-type(1) {
        border-left: none !important; /* スマホ時も二重線を防ぐため不要 */
        padding: 5px 20px 5px 15px !important;
    }
    .faq-original-style h6:nth-of-type(1) + p {
        padding: 4px 15px 6px 21px !important;
    }
    .faq-original-style h6:nth-of-type(2) {
        padding: 5px 15px 3px 21px !important;
    }
    .faq-original-style h6:nth-of-type(2) + p {
        padding: 2px 15px 8px 21px !important;
    }
}

/* ==========================================
   お問い合わせ画面用
   ========================================== */
/* 上部リード文の装飾 */
.contact-lead-box {
    max-width: 650px;
    margin: 0 auto 40px auto;
    padding: 20px 0;
    text-align: center;
    box-sizing: border-box;
    
    /* 上下の線を細く上品に引く */
    border-top: 1px solid #362e2b;
    border-bottom: 1px solid #362e2b;
}

/* 案内文章 */
.lead-text-main {
    margin: 0 !important;
    font-weight: bold !important;
}

/* スマホ表示のとき */
@media (max-width: 600px) {
    .contact-lead-box {
        width: 90%;
        padding: 15px 10px;
    }
    .lead-text-main {
        font-size: 1.0rem !important;
    }
    /* スマホ時も固定サイズを解除し、総括設定の文字サイズをベースにします */
}

/* 2カラムレイアウト */
.contact-container {
    display: flex;
    gap: 30px;
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 共通のボックスデザイン */
.contact-box {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid #362e2b;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-sizing: border-box;
}

/* ボックス内の見出し */
.contact-box h3 {
    font-size: 1.2rem !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    font-weight: bold;
}

/* LINE用の調整 */
.line-qr-wrapper img {
    width: 150px;
    height: 150px;
    margin-bottom: 15px;
}

/* 電話・メール用の調整 */
.info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}
.info-label {
    font-size: 0.85rem;
    background-color: #362e2b;
    color: #fff; /* 💡 ラベル背景が濃いため、白文字を維持 */
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}
.info-value {
    font-size: 1.3rem;
    font-weight: bold;
}
.info-value a {
    text-decoration: none;
}

/* 区切り線 */
.contact-divider {
    border: 0;
    border-top: 1px dashed #362e2b;
    margin: 20px 0;
    opacity: 0.5;
}

/* 補足テキスト */
.contact-note {
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}
.contact-note-sub {
    font-size: 0.8rem;
    margin: 5px 0 0 0;
}

/* スマートフォン表示用のレスポンス対応 */
@media (max-width: 600px) {
    .contact-container {
        flex-direction: column;
        gap: 20px;
    }
}