@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* --------------------------------------------------
   ヘッダーのサイトタイトル
   ロゴ画像のとなりに「でじるみ名古屋星ケ丘」を並べています
   （文字はfunctions.phpで足しています）。
   -------------------------------------------------- */
.c-headLogo__link {
    white-space: nowrap;      /* 折り返さない */
    display: inline-flex;
    align-items: center;
    gap: .55em;
}
.c-headLogo__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    color: var(--dejirumi-pink-deep);
}
@media (max-width: 959px) {
    .c-headLogo__name { font-size: 15px; }
}
/* 画面が狭いとロゴと重なるので、そこでは文字を隠す（ロゴだけ残す） */
@media (max-width: 599px) {
    .c-headLogo__name { display: none; }
}
@media (min-width: 600px) {
    .-txt .c-headLogo__link { font-size: 22px; }
}
@media (max-width: 599px) {
    .-txt .c-headLogo__link { font-size: 4.2vw; }   /* SWELLの初期値は 5vw */
}
@media (min-width: 960px) {
    .-series .c-headLogo { max-width: 460px; }
}


/* --------------------------------------------------
   配色：Blossom Breeze（2026-07-31 に変更）

   いただいた5色
     #FFFFFF ／ #FFB5C0（ピンク）／ #7ECEF4（水色）
     #FFEEF2（淡いピンク）／ #FFE5A6（淡い黄色）

   注意：5色ともパステルで、**そのままでは文字に使えません**。
   白い背景に対するコントラスト比は
     #FFB5C0 = 1.66:1 ／ #7ECEF4 = 1.75:1 ／ #FFE5A6 = 1.23:1
   で、WCAG の基準（小さい文字は 4.5:1）に遠く届きません。
   白い文字をのせる面（ヘッダー・フッター・ボタン）も同じく読めません。

   そこで **色相はそのままに濃さだけ足した色** を計算で作り、
     淡い5色 … 背景・区切り・飾り
     濃い版   … 文字・リンク・白抜きの面
   と役割を分けています。濃い版はすべて白地で 4.5:1 以上を確認済みです。

   もとの淡い色を文字に使いたくなった場合は、
   利用を検討される方やご家族が読むページであることを思い出してください。
   -------------------------------------------------- */
:root:root {
    /* いただいた5色（飾り・背景に使う） */
    --dejirumi-pink:        #FFB5C0;
    --dejirumi-blue:        #7ECEF4;
    --dejirumi-pale-pink:   #FFEEF2;
    --dejirumi-yellow:      #FFE5A6;

    /* 同じ色相で作った濃い版（文字・白抜きの面に使う） */
    --dejirumi-pink-deep:   #D24157;   /* 白地 4.53:1 */
    --dejirumi-blue-deep:   #277EA8;   /* 白地 4.53:1 */
    --dejirumi-yellow-deep: #957118;   /* 白地 4.51:1 */
    --dejirumi-pink-mid:    #DE7382;   /* 3.05:1・大きい文字や線用 */

    /* SWELLのパレット（エディターの色見本と、本文で使う淡い背景） */
    --color_pale01: #FFEEF2;
    --color_pale02: #EAF6FD;
    --color_pale03: #FFF7E4;
    --color_pale04: #FFF1F4;
    --color_deep01: #D24157;
    --color_deep02: #277EA8;
    --color_deep03: #957118;
    --color_deep04: #DE7382;
    --color_thin01: #FFB5C0;
    --color_thin02: #7ECEF4;
    --color_thin03: #FFE5A6;
    --color_thin04: #FFEEF2;
}

/* キャプション付きブロックの見出し帯（色を指定していないもの＝主色を使う） */
.cap_box:not([data-colset]) > .cap_box_ttl,
.cap_box[data-colset=""] > .cap_box_ttl {
    background-color: var(--dejirumi-pink-deep);
}

/* 主色を背景に使う部品（ステップ番号のバッジなど） */
.u-bg-main {
    background-color: var(--dejirumi-pink-deep) !important;
}

/* 記事ページのカテゴリーのラベル（11〜12pxの白文字が乗るため） */
.c-categoryList__link {
    background-color: var(--dejirumi-pink-deep);
}

/* グローバルナビの「今いるページ」の目印
   SWELLは白を16%重ねて明るくしているため、白文字とのコントラストが
   下がっていました。逆に少し暗くして、白文字が読める状態にしています。 */
.c-gnav > li.current-menu-item > a,
.c-gnav > li.current_page_item > a,
.c-gnav > li > a:hover,
.c-gnav > li > a:focus-visible {
    background-color: rgba(0, 0, 0, .18);
}

/* ステップ番号の「STEP」ラベルが 10px で小さすぎたため少し大きく */
.swell-block-step__number .__label {
    font-size: 11px;
    letter-spacing: .04em;
}

/* 全幅の呼びかけブロック（背景にメインカラー・文字は白）
   本文側でインライン指定されているため !important で上書きしています。
   ブロックエディター上の色指定は「メインカラー」のままなので、
   編集画面の見え方と実際の表示にわずかな差が出ます（意図的です）。 */
[style*="background-color:var(--color_main)"],
[style*="background-color: var(--color_main)"] {
    background-color: var(--dejirumi-pink-deep) !important;
}

/* 見出しの下線・区切りなど「線」に使う部分は、淡いピンクのままでよい
   （線は文字ではないためコントラスト基準の対象外） */
.is-style-section_ttl::after,
.p-postList__item .c-postThumb__figure::after {
    border-color: var(--dejirumi-pink);
}

/* --------------------------------------------------
   LINEのボタン
   サイト内のLINEボタンは、SWELLの「緑のボタン」（.green_）を使っています。
   ここをLINEの公式カラー #06C755 にそろえ、LINEのマークを添えています。
   マークはSWELLが持っているアイコン（icomoonの \e907）です。

   ⚠ 読みやすさについて
   LINEグリーンに白文字はコントラスト 2.26:1 で、WCAGの基準（4.5:1）を
   満たしません。ただしLINEの公式ボタンがこの配色で、緑とマークで
   「LINEのボタン」と一目で分かることを優先しています。
   読みやすさを優先したい場合は、下の --line-green を #04883C に変えると
   白文字で 4.5:1 になります（ただし公式の緑ではなくなります）。
   -------------------------------------------------- */
:root:root { --line-green: #06C755; }

.swell-block-button.green_ > .swell-block-button__link,
.swell-block-button.green_.is-style-btn_normal > .swell-block-button__link {
    background-color: var(--line-green);
    border-color: var(--line-green);
}
.swell-block-button.green_ > .swell-block-button__link:hover {
    background-color: #05B54D;
    border-color: #05B54D;
}
/* ボタンの文字の前にLINEのマークを置く */
.swell-block-button.green_ > .swell-block-button__link > span::before {
    content: "\e907";
    font-family: icomoon;
    font-weight: 400;
    font-size: 1.25em;
    line-height: 1;
    margin-right: .5em;
    vertical-align: -.12em;
    display: inline-block;
}

/* --------------------------------------------------
   背景が濃いピンクの節（「まずは、見に来てください」）のボタン
   濃い背景の上なので、ボタンは白地・文字は背景と同じ色にします。
   LINEのボタンだけは、マークをLINEグリーンのままにして見分けられるように。
   -------------------------------------------------- */
.swell-block-fullWide[style*="var(--color_main)"] .swell-block-button__link {
    background-color: #fff !important;
    background-image: none !important;
    border-color: #fff !important;
    color: var(--dejirumi-pink-deep) !important;
}
.swell-block-fullWide[style*="var(--color_main)"] .swell-block-button__link:hover {
    background-color: #FFEEF2 !important;
    border-color: #FFEEF2 !important;
}
.swell-block-fullWide[style*="var(--color_main)"] .green_ .swell-block-button__link > span::before {
    color: var(--line-green);
}

/* --------------------------------------------------
   ホームの案内カード（所在地・電話番号・サービス提供時間）
   見出しの長さで高さがそろわず、文字位置もバラバラだったため、
   3枚の高さをそろえて中身を上下中央に置いています。
   -------------------------------------------------- */
@media (min-width: 960px) {
    .p-infoCards .swell-block-columns__inner { align-items: stretch; }
    .p-infoCards .swell-block-column { display: flex; }
    .p-infoCards .cap_box {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
    .p-infoCards .cap_box_content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
.p-infoCards .cap_box_ttl { white-space: nowrap; }
.p-infoCards .cap_box_content > p { margin: 0; }
.p-infoCards .cap_box_content > p + p { margin-top: .4em; opacity: .85; }


/* --------------------------------------------------
   3列に並べたカードの見出しの折り返し
   「グラフィックデザイ／ン」「1日4時間利／用」のように
   語の途中で改行されて読みにくかったため、文節で折り返します。
   word-break:auto-phrase は Chrome / Edge が対応。
   対応していないブラウザでは、これまでどおりの折り返しになります。
   -------------------------------------------------- */
.swell-block-column h3.wp-block-heading,
.swell-block-column .cap_box_ttl,
.swell-block-column .cap_box_ttl > span {
    word-break: auto-phrase;
    line-break: strict;
}

/* 折り返しの指定だけでは「グラフィックデザイン」（10文字）が
   1行に収まらなかったため、3列のときは見出しを少し小さくします。
   これで10文字までは1行、それ以上は「・」などの区切りで折り返します。 */
@media (min-width: 960px) {
    .swell-block-columns[style*="33.33%"] h3.wp-block-heading {
        font-size: 17px;
        line-height: 1.5;
    }
}

/* 「利用者の声」の3枚も、高さをそろえる */
@media (min-width: 960px) {
    .swell-block-columns .swell-block-columns__inner { align-items: stretch; }

    /* 枠だけ伸びて中身（クリーム色の面）が短いままだと、カードの下に
       背景色の帯が残って底がガタガタに見える。中身も一緒に伸ばす。 */
    .swell-block-column > .cap_box {
        height: 100%;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .swell-block-column > .cap_box > .cap_box_content {
        flex: 1 1 auto;
    }
}


/* --------------------------------------------------
   ギャラリー（ポートフォリオ・作品一覧）のタイル
   背景が白い作品や余白の多い作品は、枠がないと宙に浮いて見え、
   タイルが並んでいることが伝わらない。うすい枠と角丸で1枚ずつ区切る。
   -------------------------------------------------- */
.p-postList__thumb.c-postThumb {
    border: 1px solid #F0DCE2;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.p-postList__link:hover .p-postList__thumb.c-postThumb {
    box-shadow: 0 6px 18px rgba(210, 65, 87, .16);
    transform: translateY(-2px);
}


/* --------------------------------------------------
   お問い合わせフォーム（Contact Form 7）の幅
   スマホ（画面幅375px）で入力欄が 368px の固定幅になり、
   親の枠（338px）から30pxはみ出して横スクロールが出ていました。
   Contact Form 7 は幅を指定しないため、こちらで親に合わせます。
   -------------------------------------------------- */
.wpcf7 label {
    display: block;
    max-width: 100%;
}
.wpcf7-form-control-wrap {
    display: block;
    max-width: 100%;
}
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* 送信ボタンは画面いっぱいにしない（押しやすい大きさは保つ） */
.wpcf7 input[type="submit"] {
    max-width: 100%;
    min-height: 48px;      /* 指で押しやすい高さ */
    padding: 12px 32px;
}