/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.1
*/
/* ==========================================================
   やさしいスマホドクター
   PC固定オーバーレイ＋モバイルコンテンツ試作
   ========================================================== */
/* ==========================================================
 * ページ内リンク スムーススクロール
 * ========================================================== */

/*
 * ページ内アンカーリンクの移動を
 * すべて滑らかなスクロールへ統一する。
 *
 * 対象例:
 * ・PC右側メニュー
 * ・サービス一覧を見る
 * ・料金を見る
 * ・無料で相談する
 * ・お問い合わせボタン
 * ・フッターメニュー
 */
html {
    scroll-behavior: smooth;
}


/*
 * OS側でアニメーション軽減が指定されている場合は、
 * 即時スクロールへ戻す。
 */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================
 * スクロール表示アニメーション
 * ==========================================================
 *
 * JavaScriptのIntersectionObserverによって
 * is-visibleが付与された際に表示する。
 */

.ys-scroll-fade {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22,
            1,
            0.36,
            1);
}

.ys-scroll-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/*
 * アニメーション完了後は
 * 描画最適化用のwill-changeを解除する。
 */
.ys-scroll-fade.is-visible {
    will-change: auto;
}


/*
 * OS側でアニメーション軽減が指定されている場合。
 */
@media (prefers-reduced-motion: reduce) {

    .ys-scroll-fade,
    .ys-scroll-fade.is-visible {
        opacity: 1;

        transform: none;

        transition: none;
    }
}

/* ----------------------------------------------------------
   PC固定レイアウト 表示倍率
   ---------------------------------------------------------- */
:root {
    /*
     * PCレイアウト共通倍率。
     * 左側装飾と右側パネルに使用する。
     * pc-layout-scale.jsから更新する。
     */
    --ys-pc-layout-scale: 1;

    /*
     * 中央スマートフォン専用倍率。
     *
     * スマートフォン枠・中央HTML・上下マスクを
     * 同一倍率で表示する。
     */
    --ys-pc-phone-scale: 1;

    /*
     * PC基準デザインサイズ。
     *
     * 現在のpc-layout-scale.jsで使用している
     * 1668 × 900を基準座標として使用する。
     */
    --ys-pc-design-width: 1668px;
    --ys-pc-design-height: 900px;

    /*
     * 中央スマートフォンの基準値。
     *
     * 現在は既存スマホ枠を仮使用しているため、
     * 従来値を使用する。
     *
     * 新しいスマホ枠完成後は、
     * この基準値だけ再調整する。
     */
    --ys-pc-phone-width: 469px;
    --ys-pc-phone-height: 900px;

    /*
     * 中央WordPressコンテンツの実幅。
     *
     * スマートフォン枠内の本文、Lightning標準ヘッダー、
     * 上下マスクで共通使用する。
     */
    --ys-pc-content-width: 369px;

    /*
     * PC中央コンテンツ境界のぼかし幅。
     */
    --ys-pc-content-blur-width: 450px;

    /*
     * スマートフォン枠の画像位置補正。
     */
    --ys-pc-phone-frame-offset-x: 2px;

    /*
     * スマートフォン枠外へ伸ばす上下マスクの高さ。
     */
    --ys-pc-phone-mask-height: 1600px;

    /*
     * PC中央コンテンツ最下部のフレーム余白。
     */
    --ys-pc-content-bottom-space: 70px;

    /*
     * Lightning標準ヘッダーを
     * スマートフォン枠内へ配置する内部オフセット。
     *
     * 実際の枠上端位置はpc-layout-scale.jsが
     * --ys-pc-phone-top-offsetへ設定する。
     */
    --ys-pc-header-inner-offset: 50px;

    /*
     * PC左側固定部品の基準座標。
     *
     * 微調整は原則としてこの変数群だけを変更する。
     */
    --ys-pc-logo-top: 35px;
    --ys-pc-logo-left: 50px;
    --ys-pc-logo-width: 440px;

    --ys-pc-message-top: 180px;
    --ys-pc-message-left: 105px;

    --ys-pc-promo-left: 55px;
    --ys-pc-promo-bottom: 55px;
    --ys-pc-promo-width: 430px;

    /*
     * 右側パネル位置。
     * pc-layout-scale.jsから必要に応じて更新する。
     */
    --ys-pc-panel-offset: 390px;

    /*
     * サイト共通色。
     *
     * 今回は404ページおよびPC共通レイアウトで使用する。
     * 既存セクション色は表示変更を避けるため段階的に移行する。
     */
    --ys-color-primary: #079447;
    --ys-color-primary-dark: #07863f;
    --ys-color-text: #111111;
    --ys-color-white: #ffffff;
}

/* ----------------------------------------------------------
   このページ内の基本設定
   ---------------------------------------------------------- */

.yasashii-page,
.yasashii-page *,
.yasashii-page *::before,
.yasashii-page *::after {
    box-sizing: border-box;
}

.yasashii-page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    margin: 0;
    padding: 0;
}

/* ----------------------------------------------------------
   背面のモバイル用コンテンツ
   ---------------------------------------------------------- */

.yasashii-mobile-content {
    position: relative;
    z-index: 10;

    width: 460px;
    min-height: 100vh;

    margin: 0 auto;
    padding: 0;

    background: #ffffff;
}

/* ==========================================================
 * PC中央コンテンツ 背景境界ぼかし
 * ==========================================================
 *
 * PC表示時、中央スマートフォンコンテンツの白背景と
 * PC背景画像との境界を柔らかく馴染ませる。
 *
 * スマートフォン枠画像自体にはfilterを掛けず、
 * 枠の鮮明さを維持する。
 */

@media screen and (min-width: 768px) {

    .yasashii-page::before {
        content: "";

        position: fixed;

        top: 0;
        bottom: 0;
        left: 50%;
        z-index: 1;

        width: var(--ys-pc-content-blur-width);

        background:
            linear-gradient(90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.55) 7%,
                rgba(255, 255, 255, 0.92) 15%,
                #ffffff 22%,
                #ffffff 78%,
                rgba(255, 255, 255, 0.92) 85%,
                rgba(255, 255, 255, 0.55) 93%,
                rgba(255, 255, 255, 0) 100%);

        transform: translateX(-50%);

        pointer-events: none;
    }
}

/*
 * PC表示時は固定背景画像の縮小率に合わせて、
 * 中央のスマートフォンコンテンツも縮小する。
 *
 * zoomを使用することで、
 * transformと異なりスクロール領域も縮小後の寸法に追従する。
 */
@media screen and (min-width: 768px) {

    /*
     * 中央フレームの透明な画面領域へ
     * TOPページコンテンツを収める。
     *
     * フッター下の余白は疑似要素で管理するため、
     * 本要素には下paddingを設定しない。
     */
    .yasashii-mobile-content {
        width: var(--ys-pc-content-width);

        margin-right: auto;
        margin-left: auto;

        padding: 0;

        zoom: var(--ys-pc-phone-scale);
    }

    /*
     * ページ最下部にスマートフォン枠下端分の余白を設ける。
     *
     * フッターの街並み背景と連続して見えるよう、
     * サイト共通の緑色で表示する。
     */
    .yasashii-mobile-content::after {
        content: "";

        display: block;

        width: 100%;
        height: var(--ys-pc-content-bottom-space);

        background-color: var(--ys-color-primary);
    }
}

/*
 * 中央透過位置とスクロールを確認するための
 * 仮セクション。
 *
 * 本番コンテンツ作成時に削除する。
 */
.yasashii-test-section {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    padding: 40px 30px;

    text-align: center;
}

.yasashii-test-section__inner {
    width: 100%;
}

.yasashii-test-section h1,
.yasashii-test-section h2 {
    margin: 0 0 24px;

    font-size: 28px;
    line-height: 1.4;
}

.yasashii-test-section p {
    margin: 0;

    font-size: 16px;
    line-height: 1.9;
}

.yasashii-test-section--01 {
    background: #ffffff;
}

.yasashii-test-section--02 {
    background: #eaf8ef;
}

.yasashii-test-section--03 {
    background: #fff5ce;
}

.yasashii-test-section--04 {
    background: #e9f1ff;
}

/* ==========================================================
 * PC表示用レイアウト
 * ==========================================================
 *
 * PC画面の装飾レイヤー。
 *
 * 背景・ロゴ・訴求ビジュアル・スマートフォン枠を
 * 独立した部品として配置する。
 *
 * 各部品の基準座標はpc-layout-scale.jsで
 * 共通管理する。
 */

.yasashii-pc-layout {
    position: fixed;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100vh;

    margin: 0;
    padding: 0;

    overflow: hidden;

    pointer-events: none;
}


/* ==========================================================
 * PC背景
 * ========================================================== */

.yasashii-pc-layout__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("http://asa-test3-2.asc-developers.blog/wp-content/uploads/2026/08/background-scaled.png");

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* ==========================================================
 * PC部品 共通基準キャンバス
 * ==========================================================
 *
 * 1668 × 900を基準座標とする。
 *
 * logo / promoなど、
 * PC装飾部品はこのキャンバス上へ配置する。
 *
 * ブラウザサイズが変わっても、
 * 部品同士の位置関係を維持したまま
 * 全体を同じ倍率で拡大縮小する。
 */
.yasashii-pc-layout__canvas {
    position: absolute;

    top: 50%;
    left: 50%;

    width: var(--ys-pc-design-width);
    height: var(--ys-pc-design-height);

    margin: 0;
    padding: 0;

    transform:
        translate(-50%, -50%) scale(var(--ys-pc-layout-scale));

    transform-origin: center center;

    pointer-events: none;
}

/* ==========================================================
 * PC左上ロゴ
 * ========================================================== */

.yasashii-pc-layout__logo-link {
    position: absolute;

    top: var(--ys-pc-logo-top);
    left: var(--ys-pc-logo-left);

    display: block;

    width: var(--ys-pc-logo-width);

    margin: 0;
    padding: 0;

    text-decoration: none;

    pointer-events: auto;
    cursor: pointer;
}

.yasashii-pc-layout__logo {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    pointer-events: auto;
}

/* ==========================================================
 * PC左側 キャッチコピー
 * ========================================================== */

.yasashii-pc-layout__message {
    position: absolute;

    top: var(--ys-pc-message-top);
    left: var(--ys-pc-message-left);

    width: auto;

    margin: 0;
    padding: 0;

    color: #111111;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    text-align: left;

    pointer-events: none;
}


/*
 * メインコピー。
 */
.yasashii-pc-layout__message-title {
    margin: 0 !important;
    padding: 0 !important;

    color: #111111;

    font-size: 38px;
    font-weight: 800;
    line-height: 1.45;

    letter-spacing: 0.01em;
}


/*
 * 強調文字。
 */
.yasashii-pc-layout__message-green {
    color: #079447;
}


/*
 * 補足説明。
 */
.yasashii-pc-layout__message-text {
    margin: 22px 0 0 !important;
    padding: 0 !important;

    color: #222222;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.65;

    letter-spacing: 0.01em;
}

/* ==========================================================
 * PC左側訴求ビジュアル
 * ========================================================== */

.yasashii-pc-layout__promo {
    position: absolute;

    /*
     * 1668 × 900の基準キャンバス上で配置する。
     *
     * 今後はこの3値のみ微調整する。
     */
    left: var(--ys-pc-promo-left);
    bottom: var(--ys-pc-promo-bottom);

    display: block;

    width: var(--ys-pc-promo-width);
    height: auto;

    margin: 0;
    padding: 0;

    /*
     * promo画像の輪郭に沿って
     * 柔らかい影を表示する。
     */
    filter:
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16));

    pointer-events: none;
}

/* ==========================================================
 * PC中央スマートフォン枠
 * ==========================================================
 *
 * 中央のHTMLコンテンツより前面へ表示する。
 *
 * 現在は既存画像を仮使用する。
 * 新しいスマートフォン枠完成後は画像のみ差し替える。
 */

/* ==========================================================
 * PC中央スマートフォン表示領域
 * ==========================================================
 *
 * スマートフォン枠・上端マスク・下端マスクを
 * 同じ469×900の基準座標上で管理する。
 *
 * ブラウザ高さに応じた縮小は、
 * このstageへ1回だけ適用する。
 */

.yasashii-pc-phone-stage {
    position: fixed;

    top: 50%;
    left: 50%;

    z-index: 900;

    width: var(--ys-pc-phone-width);
    height: var(--ys-pc-phone-height);

    margin: 0;
    padding: 0;

    /*
     * 上下マスクはstage外側へ伸ばすため、
     * hiddenにはしない。
     */
    overflow: visible;

    transform:
        translate(-50%, -50%) scale(var(--ys-pc-phone-scale));

    transform-origin: center center;

    pointer-events: none;
}


/* ==========================================================
 * PC中央スマートフォン枠
 * ========================================================== */

.yasashii-pc-phone-frame {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    margin-left: var(--ys-pc-phone-frame-offset-x);
    padding: 0;

    object-fit: contain;

    /*
     * scaleはstage側で行うため、
     * ここでは変形しない。
     */
    transform: none;

    pointer-events: none;
}


/* ==========================================================
 * PCスマートフォン 上端マスク
 * ==========================================================
 *
 * stage上端より上に見えてしまう
 * 中央HTMLコンテンツを白色で覆う。
 */

.yasashii-pc-phone-top-mask {
    position: absolute;

    right: auto;
    bottom: calc(100% - 2px);
    left: 50%;

    z-index: 1;

    width: var(--ys-pc-content-width);
    height: var(--ys-pc-phone-mask-height);

    margin: 0;
    padding: 0;

    background-color: #ffffff;

    /*
     * スマホ画面の中央へ合わせる。
     */
    transform: translateX(-50%);

    pointer-events: none;
}


/* ==========================================================
 * PCスマートフォン 下端マスク
 * ==========================================================
 *
 * stage下端より下に見えてしまう
 * 中央HTMLコンテンツを白色で覆う。
 */

.yasashii-pc-phone-bottom-mask {
    position: absolute;

    top: calc(100% - 2px);
    left: 50%;

    z-index: 1;

    width: var(--ys-pc-content-width);
    height: var(--ys-pc-phone-mask-height);

    margin: 0;
    padding: 0;

    background-color: #ffffff;

    /*
     * スマホ画面の中央へ合わせる。
     */
    transform: translateX(-50%);

    pointer-events: none;
}

/* ----------------------------------------------------------
   Lightning標準レイアウトの余白解除
   ---------------------------------------------------------- */

/*
 * 現在のショートコードを配置した固定ページに、
 * Lightning側のコンテンツ幅や余白が適用された場合の
 * 調整用。
 *
 * bodyクラス内のpage-id-XXXは、
 * 後ほど実際の固定ページIDに合わせて限定する。
 */
body .siteContent,
body .siteContent>.container,
body main.mainSection,
body main.mainSection>.entry-body {
    max-width: none;
}

body .siteContent,
body .siteContent>.container,
body main.mainSection,
body main.mainSection>.entry-body,
body .entry-content {
    margin: 0;
    padding: 0;
}

/* ----------------------------------------------------------
   WordPress管理バー表示時
   ---------------------------------------------------------- */

body.admin-bar .yasashii-pc-layout {
    top: 32px;
    height: calc(100vh - 32px);
}

/* ==========================================================
 * スマートフォン表示
 * ========================================================== */

@media screen and (max-width: 767px) {

    /*
     * Lightning標準ヘッダーを画面幅いっぱいに表示する。
     */
    body.home #site-header,
    body.home .site-header,
    body.yasashii-site-error #site-header,
    body.yasashii-site-error .site-header {
        width: 100%;
        max-width: none;

        margin-right: 0;
        margin-left: 0;
    }

    /*
     * スマートフォンではPC用固定フレームを表示しない。
     */
    .yasashii-pc-layout,
    .yasashii-pc-phone-stage {
        display: none;
    }

    /*
     * Lightning側に残るコンテンツ領域の
     * 最大幅・左右余白・左右paddingを解除する。
     */
    body.home .siteContent,
    body.home .siteContent>.container,
    body.home #site-body,
    body.home .site-body,
    body.home .site-body-container,
    body.home .container,
    body.home main.mainSection,
    body.home .main-section,
    body.home main.mainSection>.entry-body,
    body.home .entry-body,
    body.home .entry-content,
    body.yasashii-site-error .siteContent,
    body.yasashii-site-error .siteContent>.container,
    body.yasashii-site-error #site-body,
    body.yasashii-site-error .site-body,
    body.yasashii-site-error .site-body-container,
    body.yasashii-site-error .container,
    body.yasashii-site-error main.mainSection,
    body.yasashii-site-error .main-section,
    body.yasashii-site-error main.mainSection>.entry-body,
    body.yasashii-site-error .entry-body,
    body.yasashii-site-error .entry-content {
        width: 100%;
        max-width: none;

        margin-right: 0 !important;
        margin-left: 0 !important;

        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /*
     * 独自TOPページ領域を画面幅いっぱいに表示する。
     */
    body.home .yasashii-page,
    body.home .yasashii-mobile-content,
    body.yasashii-site-error .yasashii-page,
    body.yasashii-site-error .yasashii-mobile-content {
        width: 100%;
        max-width: none;

        margin-right: 0;
        margin-left: 0;

        padding-right: 0;
        padding-left: 0;
    }
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * PC表示用 右側固定案内パネル
 * ==========================================================
 *
 * 役割:
 * ・PC表示時、中央のスマートフォン枠右側へ表示する。
 * ・電話番号、受付時間、ページ内メニューを表示する。
 * ・お問い合わせフォームとLINE相談への導線を表示する。
 *
 * 注意:
 * ・スマートフォンおよび表示領域が狭いPCでは非表示にする。
 * ・PC固定オーバーレイより前面へ表示し、
 *   リンクをクリックできる状態にする。
 */


/* ==========================================================
 * パネル全体
 * ========================================================== */

.ys-pc-side-panel {
    position: fixed;
    top: 51%;
    left: calc(50% + var(--ys-pc-panel-offset));
    z-index: 1100;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 420px;
    max-width: calc(50vw - 330px);

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    /*
     * 左端中央を基準に縮小する。
     *
     * translateYとscaleを同じtransformへ記載し、
     * 既存の縦中央配置を維持する。
     */
    transform:
        translateY(-50%) scale(var(--ys-pc-layout-scale));

    transform-origin: left center;
}

/* ==========================================================
 * PC右サイド
 * テキスト選択を無効化
 * ==========================================================
 *
 * 左サイドと操作感を統一するため、
 * 電話番号・メニュー・CTAボタン等の文字選択を無効化する。
 *
 * リンクやボタンのクリック操作には影響しない。
 */

.ys-pc-side-panel {
    user-select: none;
}

/* ==========================================================
 * 電話案内
 * ========================================================== */

.ys-pc-side-contact {
    width: 100%;
    margin-bottom: 26px;

    text-align: center;
}

.ys-pc-side-contact__lead {
    margin: 0 0 5px;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.ys-pc-side-contact__phone {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;

    color: #000000;
    line-height: 1;
}

.ys-pc-side-contact__phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    margin-top: 10px;
    margin-right: 10px;

    font-size: 52px !important;
    line-height: 1 !important;

    font-variation-settings:
        'FILL' 1,
        'wght' 600,
        'GRAD' 0,
        'opsz' 48;
}

.ys-pc-side-contact__phone-number {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1px;
}

.ys-pc-side-contact__hours {
    margin: 8px 0 0;

    color: #009944;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}


/* ==========================================================
 * ページ内ナビゲーション
 * ========================================================== */

.ys-pc-side-navigation {
    width: 100%;

    margin: 0 0 28px;
    padding: 0;
}

.ys-pc-side-menu {
    display: flex;
    flex-direction: column;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
}

.ys-pc-side-menu__item {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    list-style: none;
}

.ys-pc-side-menu__item::before,
.ys-pc-side-menu__item::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
 * メニューリンク
 * ========================================================== */

.ys-pc-side-menu__item>a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 64px;

    margin: 0;
    padding: 6px 8px 7px;

    border-bottom: 1px solid rgba(60, 60, 60, 0.16);

    color: #555555;

    text-align: center;
    text-decoration: none;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.ys-pc-side-menu__item:first-child>a {
    border-top: 1px solid rgba(60, 60, 60, 0.16);
}

.ys-pc-side-menu__item>a:hover,
.ys-pc-side-menu__item>a:focus-visible {
    background-color: rgba(255, 255, 255, 0.55);
    color: #079447;

    text-decoration: none;

    transform: translateY(1px);
}

/* ==========================================================
 * 現在表示中のメニュー
 * ========================================================== */

/*
 * JavaScriptが現在の表示セクションに対応するリンクへ
 * is-activeクラスを付与する。
 */
.ys-pc-side-menu__item>a.is-active {
    position: relative;

    background-color: rgba(255, 255, 255, 0.72);
    color: #079447;

    text-decoration: none;
}


/*
 * 現在地を左側の緑色ラインで強調する。
 */
.ys-pc-side-menu__item>a.is-active::before {
    content: "";

    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;

    width: 4px;

    border-radius: 4px;

    background-color: #079447;
}

/*
 * ページ内リンクで移動した際、
 * セクションタイトルの上へ余白を確保する。
 */
#promise,
#service,
#price,
#voice,
#contact,
#company {
    scroll-margin-top: 24px;
}

/*
 * PC表示時のページ内リンク停止位置調整。
 *
 * promise / service / price / voice は
 * セクション自身にcontact/companyのような
 * 60pxの上余白を持たないため、
 * PCスマートフォン枠の上部へタイトルが隠れないよう
 * アンカー位置を追加で下げる。
 *
 * contact / company はセクション自身に
 * padding-top:60px があるため従来値を維持する。
 */
@media screen and (min-width: 768px) {

    #promise,
    #service,
    #price,
    #voice {
        scroll-margin-top: 84px;
    }

    #contact,
    #company {
        scroll-margin-top: 24px;
    }
}

/*
 * 現在地の英字を少し強く表示する。
 */
.ys-pc-side-menu__item>a.is-active .ys-pc-side-menu__english {
    font-weight: 700;
}


/*
 * 現在地の日本語を濃く表示する。
 */
.ys-pc-side-menu__item>a.is-active .ys-pc-side-menu__japanese {
    color: #079447;
    font-weight: 800;
}


/* ==========================================================
 * メニュー英字
 * ========================================================== */

.ys-pc-side-menu__english {
    display: block;

    width: 100%;

    margin: 0 0 2px;
    padding: 0;

    color: #079447;

    font-family:
        "Times New Roman",
        "Yu Mincho",
        serif;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.1;

    letter-spacing: 0.02em;

    text-align: center;
}


/* ==========================================================
 * メニュー日本語
 * ========================================================== */

.ys-pc-side-menu__japanese {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    color: inherit;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;

    text-align: center;
}


/* ==========================================================
 * アクションボタン領域
 * ========================================================== */

.ys-pc-side-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 100%;

    margin: 60px 0 0;
    padding: 0;
}


/* ==========================================================
 * アクションボタン共通
 * ========================================================== */

.ys-pc-side-action {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 64px;

    margin: 0;
    padding: 9px 18px;

    border: 0;
    border-radius: 12px;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;

    text-align: center;
    text-decoration: none;

    box-shadow:
        0 5px 14px rgba(0, 90, 43, 0.14),
        0 2px 4px rgba(0, 0, 0, 0.08);

    transform: translateY(0);

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}


/* ==========================================================
 * お問い合わせフォームボタン
 * ========================================================== */

.ys-pc-side-action--contact {
    background-color: #dcebd4;
    color: #079447;
}

.ys-pc-side-action--contact:hover,
.ys-pc-side-action--contact:focus-visible {
    background-color: #cfe4c5;
    color: #07863f;

    text-decoration: none;

    box-shadow:
        0 3px 9px rgba(0, 90, 43, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.07);

    transform: translateY(2px);
}


/* ==========================================================
 * LINE相談ボタン
 * ========================================================== */

.ys-pc-side-action--line {
    gap: 10px;

    background-color: #06b653;
    color: #ffffff;
}

.ys-pc-side-action--line:hover,
.ys-pc-side-action--line:focus-visible {
    background-color: #05a94c;
    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 3px 9px rgba(0, 90, 43, 0.14),
        0 1px 3px rgba(0, 0, 0, 0.08);

    transform: translateY(2px);
}


/* ==========================================================
 * LINEアイコン
 *
 * 白色LINEロゴ画像を表示する。
 * ========================================================== */

.ys-pc-side-action__line-icon {
    display: block;
    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    margin: 6px 6px 0 0;
    padding: 0;

    object-fit: contain;
}

.ys-pc-side-action__line-text {
    display: block;

    color: inherit;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;

    white-space: nowrap;
}


/* ==========================================================
 * 下部注記
 * ========================================================== */

.ys-pc-side-note {
    width: 100%;

    margin: 8px 0 0 !important;
    padding: 0 !important;

    color: #333333;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;

    text-align: left;
}


/* ==========================================================
 * 管理バー表示時
 * ========================================================== */

body.admin-bar .ys-pc-side-panel {
    margin-top: calc(16px * var(--ys-pc-layout-scale));
}


/* ==========================================================
 * 表示領域が狭いPC
 * ========================================================== */

/*
 * 中央のスマートフォン枠と右側パネルを
 * 横並びにできない画面幅では非表示にする。
 */
@media screen and (max-width: 1099px) {

    .ys-pc-side-panel {
        display: none !important;
    }
}


/* ==========================================================
 * スマートフォン・タブレット
 * ========================================================== */

@media screen and (max-width: 767px) {

    .ys-pc-side-panel {
        display: none !important;
    }
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * モバイル表示用 下部固定CTA
 * ==========================================================
 *
 * 役割:
 * ・スマートフォン表示時に画面下部へ固定表示する。
 * ・LINE相談と電話相談の2つの導線を横並びで表示する。
 *
 * 注意:
 * ・基本状態では非表示にする。
 * ・スマートフォン表示時の固定配置は、
 *   後続のメディアクエリ内で設定する。
 */


/* ==========================================================
 * CTA全体
 * ========================================================== */

.ys-mobile-bottom-actions {
    display: none;
}


/* ==========================================================
 * CTA共通
 * ========================================================== */

.ys-mobile-bottom-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 0;
    min-height: 68px;

    margin: 0;
    padding: 8px 10px;

    border: 0;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    text-align: center;
    text-decoration: none;
}


/*
 * hoverやフォーカス時も下線を表示しない。
 */
.ys-mobile-bottom-action,
.ys-mobile-bottom-action:link,
.ys-mobile-bottom-action:visited,
.ys-mobile-bottom-action:hover,
.ys-mobile-bottom-action:active,
.ys-mobile-bottom-action:focus,
.ys-mobile-bottom-action:focus-visible {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}


/*
 * LINE側は、通常時・操作時とも緑文字を維持する。
 */
.ys-mobile-bottom-action--line,
.ys-mobile-bottom-action--line:link,
.ys-mobile-bottom-action--line:visited,
.ys-mobile-bottom-action--line:hover,
.ys-mobile-bottom-action--line:active,
.ys-mobile-bottom-action--line:focus,
.ys-mobile-bottom-action--line:focus-visible {
    color: #06b653;
}


/*
 * 電話側は、通常時・操作時とも白文字を維持する。
 */
.ys-mobile-bottom-action--phone,
.ys-mobile-bottom-action--phone:link,
.ys-mobile-bottom-action--phone:visited,
.ys-mobile-bottom-action--phone:hover,
.ys-mobile-bottom-action--phone:active,
.ys-mobile-bottom-action--phone:focus,
.ys-mobile-bottom-action--phone:focus-visible {
    color: #ffffff;
}

/* ==========================================================
 * 文字領域
 * ========================================================== */

.ys-mobile-bottom-action__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/*
 * メイン文言。
 */
.ys-mobile-bottom-action__main {
    display: block;

    margin: 0;
    padding: 0;

    color: inherit;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;

    white-space: nowrap;
}


/*
 * 英字補足。
 */
.ys-mobile-bottom-action__sub {
    display: block;

    margin: 2px 0 0;
    padding: 0;

    color: inherit;

    font-family:
        "Times New Roman",
        serif;

    font-size: 9px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
}


/* ==========================================================
 * LINE側
 * ========================================================== */

.ys-mobile-bottom-action--line {
    background-color: #ffffff;
    color: #06b653;
}

/*
 * LINEロゴ画像。
 *
 * 従来のCSS製仮アイコンを廃止し、
 * 正式なLINEロゴ画像を表示する。
 */
.ys-mobile-bottom-action__line-mark {
    display: block;
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    margin: 0;
    padding: 0;

    object-fit: contain;
}


/* ==========================================================
 * 電話側
 * ========================================================== */

.ys-mobile-bottom-action--phone {
    background-color: #079447;
    color: #ffffff;
}


/*
 * 電話アイコン。
 */
.ys-mobile-bottom-action__phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    color: inherit;

    font-size: 28px;
    line-height: 1;

    font-variation-settings:
        'FILL' 1,
        'wght' 600,
        'GRAD' 0,
        'opsz' 48;
}

/* ==========================================================
 * スマートフォン表示
 * ========================================================== */

@media screen and (max-width: 767px) {

    /*
     * モバイル下部CTAを画面最下部へ固定表示する。
     *
     * LINE側を40%、電話側を60%として、
     * 見本画像に近い横幅比率にする。
     */
    .ys-mobile-bottom-actions {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;

        display: grid;
        grid-template-columns: 40% 60%;

        width: 100%;

        margin: 0;
        padding: 0;

        background-color: #ffffff;

        box-shadow:
            0 -4px 14px rgba(0, 0, 0, 0.10);
    }


    /*
     * 各CTAを固定メニューの高さに揃える。
     */
    .ys-mobile-bottom-action {
        min-height: 58px;
    }


    /*
     * LINE側と電話側の境界線。
     */
    .ys-mobile-bottom-action--line {
        border-right: 1px solid rgba(7, 148, 71, 0.20);
    }


    /*
     * タップ時に少し暗くし、
     * 押したことが分かるようにする。
     */
    .ys-mobile-bottom-action--line:active {
        background-color: #f1fbf5;
    }

    .ys-mobile-bottom-action--phone:active {
        background-color: #067f3d;
    }
}

/* ----------------------------------------------------------
   WordPress管理バー
   スマートフォン・タブレット時
   ---------------------------------------------------------- */

@media screen and (max-width: 782px) {

    body.admin-bar .yasashii-pc-layout {
        top: 46px;
        height: calc(100vh - 46px);
    }
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * トップページ コンテンツセクション
 * ==========================================================
 *
 * 役割:
 * ・固定ページに配置した画像をスマートフォン幅いっぱいに表示する。
 * ・WordPressブロックが持つ既定余白を解除する。
 * ・ロゴ、TOP画像、案内画像の各セクションを整える。
 */

/* ==========================================================
 * 共通
 * ========================================================== */

/*
 * 固定ページ本文内のブロックに設定される
 * 最大幅、左右余白、上下余白を解除する。
 */
.yasashii-mobile-content .wp-block-group,
.yasashii-mobile-content .wp-block-image {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/*
 * figure内部の画像下に発生する
 * インライン画像特有の隙間をなくす。
 */
.yasashii-mobile-content .wp-block-image img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}


/* ==========================================================
 * ① ショップロゴ
 * ========================================================== */

/*
 * ロゴ画像の高さに合わせてセクションの高さを決める。
 * 固定高さや上下余白は設定しない。
 */
.ys-logo-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

.ys-logo-image {
    width: 100%;
    margin: 0;
}

.ys-logo-image img {
    display: block;
    width: 100%;
    height: auto;
}


/* ==========================================================
 * ② TOP画像
 * ========================================================== */

/*
 * ロゴセクションとの間に隙間を作らず、
 * スマートフォン表示領域の横幅いっぱいに表示する。
 */
.ys-hero-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

.ys-hero-image {
    width: 100%;
    margin: 0;
}

.ys-hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * 安心の3つのお約束
 * ==========================================================
 *
 * 役割:
 * ・会社案内、料金案内、お問い合わせと同じタイトル構成を使う。
 * ・タイトル下へ説明文を表示する。
 * ・説明文の後にPOINT画像を縦方向へ配置する。
 */


/* ==========================================================
 * セクション全体
 * ========================================================== */

.yasashii-mobile-content .ys-guide-section {
    width: 100%;
    max-width: none;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 0;

    background-color: #ffffff;
}


/* ==========================================================
 * セクションタイトル
 * ========================================================== */

.yasashii-mobile-content .ys-promise-title {
    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 38px 20px 20px;

    border: 0;

    background-color: #ffffff;

    text-align: center;
}


/* ==========================================================
 * 英字タイトル
 * ========================================================== */

.yasashii-mobile-content .ys-promise-title__english {
    display: block;

    width: 100%;

    margin: 0 0 8px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #079447;

    font-family:
        "Times New Roman",
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: 0.02em;

    text-align: center;
}


/* ==========================================================
 * 日本語タイトル
 * ========================================================== */

.yasashii-mobile-content .ys-promise-title__japanese {
    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #000000;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: 0.02em;

    text-align: center;
}


/*
 * Lightning標準の見出し装飾を無効化する。
 */
.yasashii-mobile-content .ys-promise-title__english::before,
.yasashii-mobile-content .ys-promise-title__english::after,
.yasashii-mobile-content .ys-promise-title__japanese::before,
.yasashii-mobile-content .ys-promise-title__japanese::after {
    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
}


/* ==========================================================
 * 紹介文
 * ========================================================== */

.yasashii-mobile-content .ys-promise-introduction {
    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 20px 28px 36px;

    background-color: #ffffff;

    text-align: center;
}

.yasashii-mobile-content .ys-promise-introduction p {
    margin: 0 !important;
    padding: 0 !important;

    color: #111111;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;

    letter-spacing: 0.01em;

    text-align: center;
}

/* ==========================================================
 * ③ 案内画像
 * ========================================================== */

.ys-guide-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

.ys-guide-image {
    width: 100%;
    margin: 0;
}

.ys-guide-image img {
    display: block;
    width: 100%;
    height: auto;
}


/* ==========================================================
 * 案内画像間の緑線
 * ========================================================== */

/*
 * WordPress標準の区切り線に設定される
 * 幅、中央寄せ、透明度などを上書きする。
 */
.ys-guide-divider {
    width: calc(100% - 40px);
    max-width: none;
    height: 3px;
    margin: 20px auto;
    padding: 0;
    border: 0;
    background-color: #65a844;
    opacity: 1;
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * Lightning標準ヘッダー・本文上部余白の解除
 * ==========================================================
 *
 * 役割:
 * ・TOPページでは独自のPC固定画像とスマホコンテンツを使用する。
 * ・Lightning標準ヘッダーを非表示にする。
 * ・標準本文領域の上部余白を解除する。
 *
 * 注意:
 * ・他の固定ページや投稿には影響させない。
 */

/*
 * PC表示時のLightning標準ヘッダー。
 *
 * 中央スマートフォンの実画面幅369pxへ合わせる。
 *
 * スマートフォン枠より背面へ配置することで、
 * 初期表示時もフレームの上へヘッダーが被らないようにする。
 *
 * ヘッダー自体は通常フローに残すため、
 * ページスクロール時はこれまでどおり上へ流れる。
 */
@media screen and (min-width: 768px) {

    body.home #site-header,
    body.home .site-header,
    body.yasashii-site-error #site-header,
    body.yasashii-site-error .site-header {
        position: relative;

        z-index: 5 !important;

        width: var(--ys-pc-content-width);
        max-width: var(--ys-pc-content-width);

        margin-top:
            calc(var(--ys-pc-phone-top-offset, 15px) + var(--ys-pc-header-inner-offset));

        margin-right: auto;
        margin-left: auto;
    }
}

/*
 * TOPページでは独自フッターを使用するため、
 * Lightning標準フッターおよび
 * フッターウィジェット領域を表示しない。
 */
body.home #site-footer,
body.home .site-footer,
body.home .site-footer-before,
body.home .footer-widget-area,
body.home .site-footer-content,
body.yasashii-site-error #site-footer,
body.yasashii-site-error .site-footer,
body.yasashii-site-error .site-footer-before,
body.yasashii-site-error .footer-widget-area,
body.yasashii-site-error .site-footer-content {
    display: none !important;
}

/*
 * Lightning標準の本文領域に設定されている
 * 上下余白と内側余白を解除する。
 */
body.home #site-body,
body.home .site-body,
body.yasashii-site-error #site-body,
body.yasashii-site-error .site-body {
    margin-top: 0;
    padding-top: 0;
}

/*
 * 本文を囲むコンテナ側にも余白がある場合に備えて、
 * TOPページだけ余白を解除する。
 */
body.home .site-body-container,
body.home .container,
body.home .main-section,
body.home .entry-body,
body.home .entry-content,
body.yasashii-site-error .site-body-container,
body.yasashii-site-error .container,
body.yasashii-site-error .main-section,
body.yasashii-site-error .entry-body,
body.yasashii-site-error .entry-content {
    margin-top: 0;
    padding-top: 0;
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * お悩み案内セクション
 * ==========================================================
 *
 * 役割:
 * ・前セクションとの間に小さな余白を設ける。
 * ・波線画像、3枚のお悩み画像、コメント画像を縦に配置する。
 * ・最下部にHTML/CSSで無料相談ボタンを表示する。
 *
 * 注意:
 * ・画像自体に余白や装飾が含まれているため、
 *   必要以上の外側余白は付けない。
 */

/* ==========================================================
 * セクション全体
 * ========================================================== */

.ys-worries-section {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0 0 24px;

    background-color: #ffffff;
}

/*
 * WordPressのグループブロックに設定される
 * 最大幅や内部余白を解除する。
 */
.yasashii-mobile-content .ys-worries-section,
.yasashii-mobile-content .ys-worries-check-list {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}


/* ==========================================================
 * 上部の波線画像
 * ========================================================== */

.yasashii-mobile-content .ys-worries-wave {
    width: 100%;
    max-width: none;
    margin: 60px 0 0;
    padding: 0;
}

.ys-worries-wave img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}


/* ==========================================================
 * お悩み画像3枚
 * ========================================================== */

.ys-worries-check-list {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.ys-worries-check-image {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.ys-worries-check-image img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}


/* ==========================================================
 * 下部コメント画像
 * ========================================================== */

.ys-worries-message {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.ys-worries-message {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: hidden;
}

/*
 * コメント画像の下端を白へフェードさせる。
 *
 * セクションの境界ではなく、
 * 画像そのものが自然に消えるように見せる。
 */
.ys-worries-message::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 70px;

    background: linear-gradient(rgba(255, 255, 255, 0),
            #ffffff);

    pointer-events: none;
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * サービス紹介セクション
 * ==========================================================
 *
 * 役割:
 * ・サービス紹介画像2枚を縦方向に配置する。
 * ・1枚目の画像下部へHTMLのサービス一覧ボタンを重ねる。
 *
 * 注意:
 * ・ボタン位置は画像を基準に絶対配置する。
 * ・WordPressのブロック間隔や負のmarginには依存しない。
 */

/* ==========================================================
 * セクション全体
 * ========================================================== */

.ys-service-section {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background-color: #ffffff;
}

/*
 * 前セクションとの間に60pxの余白を設ける。
 */
.yasashii-mobile-content .ys-service-section {
    width: 100%;
    max-width: none;

    margin: 120px 0 0;
    margin-block-start: 60px !important;

    padding: 0;
}

/* ==========================================================
 * サービス一覧タイトル
 * ========================================================== */

.yasashii-mobile-content .ys-service-list-title {
    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 38px 20px 30px;

    border: 0;

    background-color: #f1f3ef;

    text-align: center;
}


/* 英字 */

.yasashii-mobile-content .ys-service-list-title__english {
    display: block;

    width: 100%;

    margin: 0 0 8px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #079447;

    font-family:
        "Times New Roman",
        "Yu Mincho",
        serif;

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
}


/* 日本語 */

.yasashii-mobile-content .ys-service-list-title__japanese {
    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #000;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;

    text-align: center;
}


/* Lightning装飾解除 */

.yasashii-mobile-content .ys-service-list-title__english::before,
.yasashii-mobile-content .ys-service-list-title__english::after,
.yasashii-mobile-content .ys-service-list-title__japanese::before,
.yasashii-mobile-content .ys-service-list-title__japanese::after {
    content: none !important;
    display: none !important;
}

/*
 * サービス画像とボタンを囲む内部ラッパーには
 * 追加の余白を付けない。
 */
.yasashii-mobile-content .ys-service-main {
    width: 100%;
    max-width: none;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 0;
}


/* ==========================================================
 * サービス紹介画像1枚目
 * ========================================================== */

/*
 * ボタンの配置基準とするため、
 * 画像とボタンを囲む要素をrelativeにする。
 */
.ys-service-main {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}

.ys-service-main-image {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}

.ys-service-main-image img {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    margin: 0;
}


/* ==========================================================
 * サービス一覧ボタン
 * ========================================================== */

/*
 * 1枚目の画像下部へボタンを重ねる。
 *
 * leftとrightを同じ値にすることで、
 * 画像幅が変わっても左右の余白を均等に保つ。
 */
.yasashii-mobile-content .ys-service-button-area {
    position: absolute;
    right: 42px;
    bottom: 28px;
    left: 42px;
    z-index: 2;

    width: auto;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 0;
}

.ys-service-button {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;

    /*
     * 右側アイコンの幅を確保しつつ、
     * ボタン文字をボタン全体の中央へ表示する。
     */
    padding: 10px 54px;

    border: 3px solid #16a156;
    border-radius: 9px;

    background-color: #ffffff;
    color: #078f47;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;

    text-align: center;
    text-decoration: none;

    box-shadow:
        0 6px 16px rgba(0, 92, 45, 0.14),
        0 2px 5px rgba(0, 0, 0, 0.10);

    transform: translateY(0);

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

/*
 * マウスを載せた際は軽く沈ませ、
 * 背景を薄い緑色へ変化させる。
 */
.ys-service-button:hover,
.ys-service-button:focus-visible {
    background-color: #f2fbf6;
    color: #07863f;
    text-decoration: none;

    box-shadow:
        0 3px 9px rgba(0, 92, 45, 0.13),
        0 1px 3px rgba(0, 0, 0, 0.09);

    transform: translateY(2px);
}

/*
 * クリック中、タップ中はさらに沈ませる。
 */
.ys-service-button:active {
    box-shadow:
        0 1px 4px rgba(0, 92, 45, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.08);

    transform: translateY(4px);
}

.ys-service-button__text {
    display: block;

    width: 100%;

    text-align: center;
}


/* ==========================================================
 * サービス一覧ボタン 右側アイコン
 * ========================================================== */

.ys-service-button__icon {
    position: absolute;
    top: 50%;
    right: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background-color: #16a156;

    transform: translateY(-50%);
}

/*
 * 白い右向き矢印をCSSで描画する。
 * フォント文字を使用しないため、環境による位置ずれを防ぐ。
 */
.ys-service-button__icon::before {
    content: "";

    display: block;

    width: 8px;
    height: 8px;

    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;

    transform:
        translateX(-2px) rotate(45deg);
}


/**
 * ==========================================================
 * やさしいスマホドクター
 * こんな方にオススメです
 * ==========================================================
 *
 * 役割:
 * ・従来画像で表示していたおすすめ対象一覧を、
 *   HTMLとCSSで表示する。
 * ・強調したい語句のみ緑色で表示する。
 * ・各項目を緑色の罫線で区切る。
 */


/* ==========================================================
 * セクション全体
 * ========================================================== */

.yasashii-mobile-content .ys-service-recommend {
    width: 100%;
    max-width: none;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 42px 30px 32px;

    background-color: #ffffff;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;
}


/* ==========================================================
 * セクションタイトル
 * ========================================================== */

.yasashii-mobile-content .ys-service-recommend__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;

    margin: 0 0 34px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;
    color: #000000;

    font-size: 24px;
    font-weight: 800;
    line-height: 1.35;

    letter-spacing: 0;

    text-align: center;

    white-space: nowrap;
}


/*
 * Lightning標準の見出し装飾を解除する。
 */
.yasashii-mobile-content .ys-service-recommend__title::before,
.yasashii-mobile-content .ys-service-recommend__title::after {
    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
}


/*
 * タイトル中央の文字列。
 *
 * 左右の斜線は本要素の疑似要素で描画する。
 */
.yasashii-mobile-content .ys-service-recommend__title-text {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #000000;

    white-space: nowrap;
}


/*
 * 「オススメ」だけ緑色にする。
 */
.yasashii-mobile-content .ys-service-recommend__title strong {
    color: #079447;

    font-weight: 800;
}

/*
 * タイトル左右の斜線。
 *
 * 文字記号は使用せず、
 * 疑似要素を回転させて描画する。
 */
.yasashii-mobile-content .ys-service-recommend__title-text::before,
.yasashii-mobile-content .ys-service-recommend__title-text::after {
    content: "";

    display: block;
    flex: 0 0 auto;

    width: 36px;
    height: 5px;

    border-radius: 3px;

    background-color: #079447;
}


/*
 * 左側の斜線。
 */
.yasashii-mobile-content .ys-service-recommend__title-text::before {
    margin-right: 20px;

    transform: rotate(70deg);
}


/*
 * 右側の斜線。
 */
.yasashii-mobile-content .ys-service-recommend__title-text::after {
    margin-left: 20px;

    transform: rotate(-70deg);
}

/* ==========================================================
 * おすすめ項目一覧
 * ========================================================== */

.yasashii-mobile-content .ys-service-recommend__list {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border-top: 1px solid #4eb879;

    list-style: none;
}


/* ==========================================================
 * おすすめ項目
 * ========================================================== */

.yasashii-mobile-content .ys-service-recommend__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;

    width: 100%;
    min-height: 78px;

    margin: 0 !important;
    padding: 12px 8px 12px 12px !important;

    border: 0 !important;
    border-bottom: 1px solid #4eb879 !important;

    background: none !important;

    list-style: none;

    text-align: left;
}


/*
 * LightningやWordPressによる
 * リストマーカーを無効化する。
 */
.yasashii-mobile-content .ys-service-recommend__item::before,
.yasashii-mobile-content .ys-service-recommend__item::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
 * チェックマーク
 * ========================================================== */

.yasashii-mobile-content .ys-service-recommend__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 26px;

    margin: 0;
    padding: 0;

    color: #079447;

    font-family:
        Arial,
        sans-serif;

    font-size: 29px;
    font-weight: 800;
    line-height: 1;

    transform: translateY(-1px);
}


/* ==========================================================
 * 項目文字
 * ========================================================== */

.yasashii-mobile-content .ys-service-recommend__text {
    display: block;

    min-width: 0;

    margin: 0;
    padding: 0;

    color: #000000;

    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;

    letter-spacing: 0;

    text-align: left;

    white-space: nowrap;
}


/*
 * 緑色で強調する語句。
 */
.yasashii-mobile-content .ys-service-recommend__text strong {
    color: #079447;

    font-weight: 800;
}


/* ==========================================================
 * スマートフォン幅の微調整
 * ========================================================== */

@media screen and (max-width: 480px) {

    .yasashii-mobile-content .ys-service-recommend {
        padding-top: 38px;
        padding-right: 20px;
        padding-bottom: 28px;
        padding-left: 20px;
    }

    .yasashii-mobile-content .ys-service-recommend__title {
        gap: 8px;

        margin-bottom: 30px !important;

        font-size: 25px;
    }

    .yasashii-mobile-content .ys-service-recommend__item {
        min-height: 72px;

        padding-right: 18px !important;
        padding-left: 46px !important;
    }

    .yasashii-mobile-content .ys-service-recommend__check {
        width: 26px;

        font-size: 29px;
    }

    .yasashii-mobile-content .ys-service-recommend__text {
        font-size: 22px;
    }
}


/* ==========================================================
 * 小画面の微調整
 * ========================================================== */

@media screen and (max-width: 400px) {}


/* ==========================================================
 * 極小画面の微調整
 * ========================================================== */

@media screen and (max-width: 360px) {}

/* ==========================================================
 * 料金案内ボタン
 * ========================================================== */

/*
 * 2枚目の画像下部へ料金案内ボタンを通常配置する。
 *
 * サービス一覧ボタンと同じデザインを使用するが、
 * 画像への重ね配置は行わない。
 */
.yasashii-mobile-content .ys-service-price-button-area {
    position: relative;

    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    /*
     * 見本画像に合わせて、
     * ボタンの上下および左右に余白を設ける。
     */
    padding: 28px 42px 32px;

    background-color: #ffffff;
}

/* ==========================================================
 * 無料相談ボタン
 * ========================================================== */

/*
 * コメント画像の下部へボタンを重ねて表示する。
 *
 * WordPressのブロック間隔によるmargin-block-startを解除し、
 * transformで確実に上方向へ移動させる。
 */
.yasashii-mobile-content .ys-worries-button-area {
    position: relative;
    z-index: 2;

    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    /*
     * ボタンを120px上へ移動して画像へ重ねる一方、
     * 次セクションとの間に60pxの余白を残す。
     *
     * -120pxですべて相殺すると、
     * 次セクションの上余白へボタンが重なって見えるため、
     * 60px分だけレイアウト上の高さを残す。
     */
    margin-block-end: -60px;

    padding: 0 34px 8px;

    transform: translateY(-120px);
}

.ys-worries-button {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 60px;

    /*
     * 左右を同じ62pxにすることで、
     * 右側にアイコンがあっても文字をボタン全体の中央に置く。
     */
    padding: 14px 62px;

    border: 0;
    border-radius: 9px;

    background-color: #079447;
    color: #ffffff;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;

    text-align: center;
    text-decoration: none;

    /*
	 * 輪郭の硬い段差影は使用せず、
	 * 柔らかくぼかした影で浮遊感を出す。
	 */
    box-shadow:
        0 8px 20px rgba(0, 90, 43, 0.24),
        0 3px 7px rgba(0, 0, 0, 0.16);

    transform: translateY(0);

    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

/*
 * マウスを載せると少し沈み、
 * 影がボタン本体へ近づく。
 */
.ys-worries-button:hover,
.ys-worries-button:focus-visible {
    background-color: #07863f;
    color: #ffffff;
    text-decoration: none;

    box-shadow:
        0 4px 10px rgba(0, 90, 43, 0.20),
        0 2px 4px rgba(0, 0, 0, 0.13);

    transform: translateY(3px);
}

/*
 * クリック中はさらに沈ませる。
 */
.ys-worries-button:active {
    box-shadow:
        0 2px 5px rgba(0, 90, 43, 0.18),
        0 1px 2px rgba(0, 0, 0, 0.12);

    transform: translateY(5px);
}

.ys-worries-button__text {
    display: block;
    width: 100%;
    text-align: center;
}

.ys-worries-button__icon {
    position: absolute;
    top: 50%;
    right: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background-color: #ffffff;
    color: #079447;

    /*
     * HTMLに書かれている「›」は表示せず、
     * CSSで正確に中央配置した矢印を描画する。
     */
    font-size: 0;
    line-height: 1;

    transform: translateY(-50%);
}

/*
 * 右向きの山形矢印をCSSで描画する。
 * フォント文字を使わないため、上下位置がずれない。
 */
.ys-worries-button__icon::before {
    content: "";

    display: block;

    width: 9px;
    height: 9px;

    border-top: 3px solid #079447;
    border-right: 3px solid #079447;

    transform:
        translateX(-2px) rotate(45deg);
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * サービス一覧セクション
 * ==========================================================
 *
 * 役割:
 * ・5枚のサービス画像を縦方向に配置する。
 * ・画像周囲とボタン周囲の背景色を統一する。
 * ・最下部へ無料相談ボタンを通常配置する。
 *
 * 注意:
 * ・タイトルは1枚目の画像内に含まれている。
 * ・無料相談ボタンは画像へ重ねない。
 * ・既存の無料相談ボタンデザインを再利用する。
 */

/* ==========================================================
 * セクション全体
 * ========================================================== */

/*
 * 画像内の背景色に近い薄いグレーを
 * セクション全体へ設定する。
 *
 * 画像外側とHTMLボタン周囲の色を揃えることで、
 * 画像とHTML部品をひと続きのセクションに見せる。
 */
.yasashii-mobile-content .ys-service-list-section {
    width: 100%;
    max-width: none;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 0 28px 28px;

    background-color: #f1f3ef;
}


/* ==========================================================
 * サービス画像一覧
 * ========================================================== */

/*
 * WordPressのグループブロックに設定される
 * 既定のブロック間隔を解除する。
 */
.yasashii-mobile-content .ys-service-list-images {
    width: 100%;
    max-width: none;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 0;
}

/*
 * 各サービス画像をセクション内の横幅いっぱいに表示する。
 *
 * 画像同士の間には小さな余白を設け、
 * 5つのサービスをそれぞれ独立して見せる。
 */
.yasashii-mobile-content .ys-service-list-image {
    width: 100%;
    max-width: none;

    margin: 0 0 10px;
    margin-block-start: 0 !important;

    padding: 0;
}

.yasashii-mobile-content .ys-service-list-image:last-child {
    margin-bottom: 0;
}

.ys-service-list-image img {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    margin: 0;
}


/* ==========================================================
 * 無料相談ボタン配置領域
 * ========================================================== */

/*
 * 5枚目のサービス画像の下へ
 * 無料相談ボタンを通常レイアウトで配置する。
 *
 * 画像へ重ねないため、
 * position:absoluteやtransformは使用しない。
 */
.yasashii-mobile-content .ys-service-list-button-area {
    position: relative;

    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 24px 14px 0;

    background-color: #f1f3ef;
}


/* ==========================================================
 * サービス一覧内の無料相談ボタン調整
 * ========================================================== */

/*
 * ボタン本体の色、影、hover、activeは
 * 既存のys-worries-buttonを再利用する。
 *
 * このセクションでは見本に合わせて、
 * 高さと文字サイズのみ少し小さくする。
 */
.ys-service-list-button-area .ys-worries-button {
    min-height: 52px;

    padding: 11px 54px;

    font-size: 18px;
}

/*
 * 小型ボタンに合わせて、
 * 右側の丸アイコンも少し小さくする。
 */
.ys-service-list-button-area .ys-worries-button__icon {
    right: 13px;

    width: 28px;
    height: 28px;
}

.ys-service-list-button-area .ys-worries-button__icon::before {
    width: 8px;
    height: 8px;

    border-top-width: 3px;
    border-right-width: 3px;
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * 料金案内セクション
 * ==========================================================
 *
 * 役割:
 * ・料金案内タイトル画像を表示する。
 * ・4枚の料金カード画像を縦方向に配置する。
 * ・各料金カードへCSSで柔らかい影を付ける。
 *
 * 注意:
 * ・カード画像自体には影を含めない。
 * ・前セクションとの間には60pxの余白を設ける。
 */

/* ==========================================================
 * セクション全体
 * ========================================================== */

/*
 * 前セクションとの間に60pxの余白を設ける。
 *
 * WordPress標準のmargin-block-startを上書きし、
 * セクション単位で余白を管理する。
 */
.yasashii-mobile-content .ys-price-section {
    width: 100%;
    max-width: none;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 0 28px 40px;

    background-color: #ffffff;
}


/* ==========================================================
 * 料金案内タイトル
 * ========================================================== */

/*
 * WordPressおよびLightningの見出し装飾を受けないよう、
 * 料金タイトル領域内で余白、罫線、疑似要素を明示的に解除する。
 */
.yasashii-mobile-content .ys-price-title {
    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 38px 20px 34px;

    border: 0;

    background-color: #ffffff;

    text-align: center;
}


/*
 * 上部の英字見出し。
 *
 * p要素へ適用されるテーマ標準の余白や装飾を解除する。
 */
.yasashii-mobile-content .ys-price-title__english {
    display: block;

    width: 100%;

    margin: 0 0 8px !important;
    padding: 0 !important;

    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    background: none !important;

    color: #079447;

    font-family:
        "Times New Roman",
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: 0.02em;

    text-align: center;
}


/*
 * 日本語の料金タイトル。
 *
 * h2へ適用されるLightning標準の罫線、
 * 背景、余白、内側余白をすべて解除する。
 */
.yasashii-mobile-content .ys-price-title__japanese {
    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    background: none !important;

    color: #000000;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: 0.02em;

    text-align: center;
}


/*
 * Lightningが見出しへ疑似要素で装飾を追加する場合に備え、
 * 料金タイトル内では無効化する。
 */
.yasashii-mobile-content .ys-price-title__english::before,
.yasashii-mobile-content .ys-price-title__english::after,
.yasashii-mobile-content .ys-price-title__japanese::before,
.yasashii-mobile-content .ys-price-title__japanese::after {
    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
}


/* ==========================================================
 * 料金カード一覧
 * ========================================================== */

/*
 * WordPressのグループブロックに設定される
 * 既定のブロック間隔を解除する。
 */
.yasashii-mobile-content .ys-price-list {
    width: 100%;
    max-width: none;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 0;
}


/* ==========================================================
 * 料金カード画像
 * ========================================================== */

/*
 * 各料金カード画像を縦方向に配置する。
 *
 * 画像自体の角丸形状を維持したまま、
 * CSS側で柔らかい影を付ける。
 */
.yasashii-mobile-content .ys-price-card-image {
    width: 100%;
    max-width: none;

    margin: 0 0 30px;
    margin-block-start: 0 !important;

    padding: 0;

    border-radius: 14px;

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.20),
        0 5px 12px rgba(0, 0, 0, 0.14);

    overflow: hidden;
}

/*
 * 最後の料金カードには下側余白を付けない。
 */
.yasashii-mobile-content .ys-price-card-image:last-child {
    margin-bottom: 0;
}

.ys-price-card-image img {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    margin: 0;
}


/* ==========================================================
 * 料金カード影の調整
 * ========================================================== */

/*
 * 料金カードはクリック要素ではないため、
 * hoverやactiveによる移動は付けない。
 *
 * 常時、背景から少し浮いて見える程度の
 * Material Design寄りの影だけを使用する。
 */

/**
 * ==========================================================
 * やさしいスマホドクター
 * お客様の声セクション
 * ==========================================================
 *
 * 役割:
 * ・お客様の声セクションのタイトルと説明文を表示する。
 * ・VK Blocksのスライダーを利用して口コミカードを横移動させる。
 * ・現在位置を下部のページネーションで表示する。
 *
 * 注意:
 * ・スライダーの動作はVK Blocksへ委譲する。
 * ・CSSでは見た目のみを調整し、Swiperの内部構造は変更しない。
 * ・LightningおよびVK Blocksの標準装飾を、
 *   本セクション内だけで必要な範囲に限定して上書きする。
 */


/* ==========================================================
 * セクション全体
 * ========================================================== */

/*
 * 前の料金案内セクションとの間に60pxの余白を設ける。
 *
 * セクション背景は見本に合わせて薄いグレーとし、
 * タイトル、説明文、スライダーを一体に見せる。
 */
.yasashii-mobile-content .ys-voice-section {
    width: 100%;
    max-width: none;

    margin: 60px 0 0;
    margin-block-start: 60px !important;

    padding: 0 0 40px;

    background-color: #f1f3ef;
}


/* ==========================================================
 * セクションタイトル
 * ========================================================== */

/*
 * 料金案内タイトルと同じ構成・大きさを使用する。
 *
 * WordPressおよびLightningの標準余白や
 * 見出し装飾が入り込まないように明示的に解除する。
 */
.yasashii-mobile-content .ys-voice-title {
    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 38px 20px 18px;

    border: 0;

    background-color: #f1f3ef;

    text-align: center;
}


/*
 * 英字見出し「VOICE」。
 */
.yasashii-mobile-content .ys-voice-title__english {
    display: block;

    width: 100%;

    margin: 0 0 8px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #079447;

    font-family:
        "Times New Roman",
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: 0.02em;

    text-align: center;
}


/*
 * 日本語見出し「お客様の声」。
 */
.yasashii-mobile-content .ys-voice-title__japanese {
    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #000000;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: 0.02em;

    text-align: center;
}


/*
 * Lightningがp要素・h2要素へ疑似要素で
 * 罫線などを追加する場合に備えて無効化する。
 */
.yasashii-mobile-content .ys-voice-title__english::before,
.yasashii-mobile-content .ys-voice-title__english::after,
.yasashii-mobile-content .ys-voice-title__japanese::before,
.yasashii-mobile-content .ys-voice-title__japanese::after {
    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
}


/* ==========================================================
 * セクション説明文
 * ========================================================== */

.yasashii-mobile-content .ys-voice-introduction {
    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 0 32px 28px;

    background-color: #f1f3ef;

    text-align: center;
}

.yasashii-mobile-content .ys-voice-introduction p {
    margin: 0 !important;
    padding: 0 !important;

    color: #111111;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;

    letter-spacing: 0.01em;

    text-align: center;
}


/* ==========================================================
 * VK Blocksスライダー全体
 * ========================================================== */

/*
 * VK Blocks側のブロック幅や余白を解除し、
 * 本セクションの左右余白内へ配置する。
 */
.yasashii-mobile-content .ys-voice-section .wp-block-vk-blocks-slider {
    position: relative;

    width: 100%;
    max-width: none;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 0 28px 34px;

    background-color: #f1f3ef;

    overflow: hidden;
}


/*
 * Swiper内部のスライド一覧。
 *
 * VK Blocksが設定する横並びの挙動は維持し、
 * 独自のdisplay指定は行わない。
 */
.yasashii-mobile-content .ys-voice-section .swiper-wrapper {
    align-items: stretch;
}


/* ==========================================================
 * スライダーアイテム
 * ========================================================== */

/*
 * VK Blocks側の背景画像用レイヤーは、
 * 今回は使用しないため非表示にする。
 */
.yasashii-mobile-content .ys-voice-section .vk_slider_item-background-area {
    display: none;
}


/*
 * VK Blocks側のスライド余白を解除する。
 *
 * カードの余白はys-voice-card側で管理する。
 */
.yasashii-mobile-content .ys-voice-section .wp-block-vk-blocks-slider-item {
    height: auto;

    margin: 0;

    /*
     * 隣接するスライドカードとの間に
     * 左右12px分の間隔を設ける。
     */
    padding: 0 6px !important;

    background: transparent;
}


/*
 * スライド内のコンテンツ領域をカード幅いっぱいにする。
 */
.yasashii-mobile-content .ys-voice-section .vk_slider_item_container {
    display: flex;
    align-items: stretch;

    width: 100%;
    max-width: none;
    height: 100%;

    margin: 0;
    padding: 0;
}


/* ==========================================================
 * お客様の声カード
 * ========================================================== */

/*
 * 各口コミを表示する白いカード。
 *
 * スライド間で高さが大きく変わらないように
 * 最低高さを設定する。
 */
.yasashii-mobile-content .ys-voice-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 360px;

    margin: 0;
    margin-block-start: 0 !important;

    /*
     * タイトルと本文がカード端へ近づきすぎないよう、
     * 上下左右の内側余白を少し広げる。
     */
    padding: 38px 34px 30px;

    background-color: #ffffff;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.06);
}


/* ==========================================================
 * お客様の声カード 見出し
 * ========================================================== */

.yasashii-mobile-content .ys-voice-card__title {
    width: 100%;

    margin: 0 0 28px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #079447;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.45;

    letter-spacing: 0.01em;

    text-align: center;
}


/*
 * Lightningの見出し装飾を無効化する。
 */
.yasashii-mobile-content .ys-voice-card__title::before,
.yasashii-mobile-content .ys-voice-card__title::after {
    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
}


/* ==========================================================
 * お客様の声カード 本文
 * ========================================================== */

.yasashii-mobile-content .ys-voice-card__body {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    color: #555555;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.85;

    letter-spacing: 0.01em;

    text-align: left;
}


/* ==========================================================
 * お客様の年代・性別
 * ========================================================== */

/*
 * カード最下部へ配置するため、
 * margin-top:autoで残り領域を上側へ吸収する。
 */
.yasashii-mobile-content .ys-voice-card__customer {
    width: 100%;

    margin: auto 0 0 !important;
    padding: 30px 0 0 !important;

    color: #111111;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;

    text-align: center;
}

.yasashii-mobile-content .ys-voice-card__customer strong {
    font-size: 20px;
    font-weight: 700;
}


/* ==========================================================
 * 左右移動ボタン
 * ========================================================== */

/*
 * 今回のデザインでは左右矢印を使用しない。
 *
 * スワイプ操作とページネーションによって
 * スライドを切り替える。
 */
.yasashii-mobile-content .ys-voice-section .swiper-button-next,
.yasashii-mobile-content .ys-voice-section .swiper-button-prev {
    display: none !important;
}


/* ==========================================================
 * ページネーション
 * ========================================================== */

/*
 * VK Blocksが生成するページネーションを
 * カード下部へ配置する。
 */
.yasashii-mobile-content .ys-voice-section .swiper-pagination {
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 100%;

    margin: 0;
    padding: 0;

    text-align: center;
}


/*
 * 非選択状態の丸。
 */
.yasashii-mobile-content .ys-voice-section .swiper-pagination-bullet {
    display: block;

    width: 9px;
    height: 9px;

    margin: 0 !important;

    border: 0;
    border-radius: 50%;

    background-color: #c8cec9;

    opacity: 1;
}


/*
 * 現在表示中の丸。
 */
.yasashii-mobile-content .ys-voice-section .swiper-pagination-bullet-active {
    background-color: #079447;
}

/* ==========================================================
 * スマートフォン幅の微調整
 * ========================================================== */

@media screen and (max-width: 480px) {

    .yasashii-mobile-content .ys-service-recommend {
        padding-top: 38px;
        padding-right: 16px;
        padding-bottom: 28px;
        padding-left: 16px;
    }

    /*
     * タイトルを1行で表示する。
     */
    .yasashii-mobile-content .ys-service-recommend__title {
        gap: 7px;

        margin-bottom: 30px !important;

        font-size: 22px;
        line-height: 1.3;

        white-space: nowrap;
    }

    /*
     * 各行の高さと左右余白を調整する。
     *
     * 1行目の長い文章が右端で切れないよう、
     * 左右paddingを小さくする。
     */
    .yasashii-mobile-content .ys-service-recommend__item {
        gap: 7px;

        min-height: 78px;

        padding-top: 10px !important;
        padding-right: 6px !important;
        padding-bottom: 10px !important;
        padding-left: 24px !important;
    }

    /*
     * チェックマークを少し小さくする。
     */
    .yasashii-mobile-content .ys-service-recommend__check {
        width: 24px;

        font-size: 28px;
    }

    /*
     * 項目文字を少し小さくする。
     *
     * 430px前後の画面でも、
     * 最長の1行目が1行で収まる大きさ。
     */
    .yasashii-mobile-content .ys-service-recommend__text {
        font-size: 20px;
        line-height: 1.4;

        white-space: nowrap;
    }
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * お問い合わせセクション
 * ==========================================================
 * Contact Form 7＋ASC多段階フォーム用
 */


/* ==========================================================
 * 01. セクション・タイトル
 * ========================================================== */

.yasashii-mobile-content .ys-contact-section {
    width: 100%;
    max-width: none;
    margin: 0;
    margin-block-start: 0 !important;
    padding: 60px 0 0;
    background-color: #ffffff;
}

.yasashii-mobile-content .ys-contact-title {
    width: 100%;
    margin: 0;
    margin-block-start: 0 !important;
    padding: 38px 20px 20px;
    border: 0;
    background-color: #ffffff;
    text-align: center;
}

.yasashii-mobile-content .ys-contact-title__english,
.yasashii-mobile-content .ys-contact-title__japanese {
    display: block;
    width: 100%;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    text-align: center;
}

.yasashii-mobile-content .ys-contact-title__english {
    margin: 0 0 8px !important;
    color: #079447;
    font-family: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
}

.yasashii-mobile-content .ys-contact-title__japanese {
    margin: 0 !important;
    color: #000000;
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
}

.yasashii-mobile-content .ys-contact-title__english::before,
.yasashii-mobile-content .ys-contact-title__english::after,
.yasashii-mobile-content .ys-contact-title__japanese::before,
.yasashii-mobile-content .ys-contact-title__japanese::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
}

.yasashii-mobile-content .ys-contact-introduction {
    width: 100%;
    margin: 0;
    margin-block-start: 0 !important;
    padding: 0 12px 36px;
    background-color: #ffffff;
    text-align: center;
}

.yasashii-mobile-content .ys-contact-introduction p {
    margin: 0 !important;
    padding: 0 !important;
    color: #111111;
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: 0.01em;
    text-align: center;
}

.yasashii-mobile-content .ys-contact-introduction .ys-contact-introduction__notice {
    margin-top: 2px !important;
    font-size: 13px;
}


/* ==========================================================
 * 02. フォーム共通
 * ========================================================== */

.yasashii-mobile-content .ys-contact-form {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    margin-block-start: 0 !important;
    padding: 0 30px;
    border: 0;
    background-color: #ffffff;
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.yasashii-mobile-content .asc-cf7-step-input,
.yasashii-mobile-content .asc-cf7-step-confirm,
.yasashii-mobile-content .asc-cf7-step-complete {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-form [hidden] {
    display: none !important;
}

.yasashii-mobile-content .ys-contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.yasashii-mobile-content .ys-contact-form input[type="text"],
.yasashii-mobile-content .ys-contact-form input[type="email"],
.yasashii-mobile-content .ys-contact-form input[type="tel"],
.yasashii-mobile-content .ys-contact-form input[type="url"],
.yasashii-mobile-content .ys-contact-form textarea,
.yasashii-mobile-content .ys-contact-form select {
    box-sizing: border-box;
    max-width: 100%;
}

.yasashii-mobile-content .ys-contact-field {
    width: 100%;
    min-width: 0;
    margin: 0 0 42px;
    padding: 0;
    border: 0;
}

.yasashii-mobile-content .ys-contact-field:last-child {
    margin-bottom: 0;
}

.yasashii-mobile-content .ys-contact-field__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-field__header>p {
    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
 * 03. ラベル・必須・補足
 * ========================================================== */

.yasashii-mobile-content .ys-contact-label,
.yasashii-mobile-content .ys-contact-service-title,
.yasashii-mobile-content .ys-contact-device-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin: 0;
    padding: 0;

    border: 0;

    color: #111111;

    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;

    text-align: left;
}

.yasashii-mobile-content .ys-contact-label br,
.yasashii-mobile-content .ys-contact-service-title br,
.yasashii-mobile-content .ys-contact-device-title br,
.yasashii-mobile-content .ys-contact-format br,
.yasashii-mobile-content .ys-contact-subfield__label br {
    display: none !important;
}

.yasashii-mobile-content legend.ys-contact-label,
.yasashii-mobile-content legend.ys-contact-service-title,
.yasashii-mobile-content legend.ys-contact-device-title {
    width: auto;
    max-width: 100%;

    margin: 0 0 12px;
    padding: 0;

    float: none;
}

.yasashii-mobile-content .ys-contact-required {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    min-width: 30px;
    min-height: 20px;
    margin: 0;
    padding: 2px 5px;
    border-radius: 3px;
    background-color: #ef1f2f;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.yasashii-mobile-content .ys-contact-format {
    flex: 0 0 auto;
    margin: 0 2px 2px 0;
    padding: 0;
    color: #8b8b8b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
}


/* ==========================================================
 * 04. テキスト・住所・セレクト
 * ========================================================== */

.yasashii-mobile-content .ys-contact-input {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 54px;
    margin: 0;
    padding: 11px 14px;
    border: 2px solid #8c8c8c;
    border-radius: 11px;
    outline: 0;
    background-color: #ffffff;
    color: #111111;
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: none;
    appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.yasashii-mobile-content .ys-contact-input::placeholder {
    color: #aaaaaa;
    opacity: 1;
}

.yasashii-mobile-content .ys-contact-input:focus {
    border-color: #079447;
    box-shadow: 0 0 0 1px #079447, 0 0 0 4px rgba(7, 148, 71, 0.08);
}

.yasashii-mobile-content .ys-contact-input:-webkit-autofill {
    -webkit-text-fill-color: #111111;
    box-shadow: 0 0 0 1000px #ffffff inset;
}

.yasashii-mobile-content .ys-contact-subfield {
    position: relative;
    width: 100%;
    margin: 30px 0 0;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-subfield__label {
    display: block;
    width: 100%;
    margin: 0 2px 8px 0;
    padding: 0;
    color: #8b8b8b;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
}

.yasashii-mobile-content .ys-contact-address {
    display: block;
}

.yasashii-mobile-content .ys-contact-address__guide {
    font-size: 13px;
}

.yasashii-mobile-content .ys-contact-address__row {
    width: 100%;
    margin: 0 0 28px;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-address__row:last-of-type {
    margin-bottom: 0;
}

.yasashii-mobile-content .ys-contact-input--postal-code {
    width: 50%;
    min-width: 160px;
}

.yasashii-mobile-content .ys-contact-select {
    display: block;
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 10px 42px 10px 14px;
    border: 2px solid #8c8c8c;
    border-radius: 11px;
    outline: 0;
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, transparent 50%, #777777 50%),
        linear-gradient(135deg, #777777 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 22px,
        calc(100% - 14px) 22px;
    background-repeat: no-repeat;
    background-size: 7px 7px, 7px 7px;
    color: #777777;
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.yasashii-mobile-content .ys-contact-select:focus {
    border-color: #079447;
    box-shadow: 0 0 0 1px #079447, 0 0 0 4px rgba(7, 148, 71, 0.08);
}

.yasashii-mobile-content .ys-contact-select--prefecture {
    width: 50%;
    min-width: 160px;
}

.yasashii-mobile-content .ys-contact-help {
    width: 100%;
    margin: 10px 0 0 !important;
    padding: 0 8px !important;
    color: #555555;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}


/* ==========================================================
 * 05. 生年月日
 * ========================================================== */

.yasashii-mobile-content .ys-contact-birthday-field {
    margin-bottom: 48px;
}

.yasashii-mobile-content .ys-contact-birthday {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 5px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-birthday__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 3px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-birthday__item>p {
    display: contents;
    margin: 0 !important;
    padding: 0 !important;
}

.yasashii-mobile-content .ys-contact-birthday__item .ys-contact-visually-hidden {
    position: absolute !important;
}

.yasashii-mobile-content .ys-contact-birthday br {
    display: none !important;
}

.yasashii-mobile-content .ys-contact-birthday .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-birthday .wpcf7-form-control-wrap .ys-contact-select {
    width: 100%;
    min-width: 0;
    padding-right: 30px;
    padding-left: 10px;
    background-position:
        calc(100% - 17px) 22px,
        calc(100% - 12px) 22px;
    background-size: 6px 6px, 6px 6px;
}

.yasashii-mobile-content .ys-contact-birthday__unit {
    display: block;
    align-self: end;
    width: auto;
    margin: 0 0 2px;
    padding: 0;
    color: #777777;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}


/* ==========================================================
 * 06. お問い合わせサービス・通信端末
 * ==========================================================
 *
 * 役割:
 * ・お問い合わせサービスと通信端末を同じラジオUIで表示する。
 * ・CF7が生成するラジオボタンを縦1列で表示する。
 * ・各選択肢を1行のタップ領域として扱い、
 *   スマートフォンでも選択しやすくする。
 *
 * 対象:
 * ・ys-contact-service-field / ys-contact-service-list
 * ・ys-contact-device-field  / ys-contact-device-list
 */


/* ==========================================================
 * フィールド全体
 * ========================================================== */

.yasashii-mobile-content .ys-contact-service-field,
.yasashii-mobile-content .ys-contact-device-field {
    width: calc(100% + 60px);
    min-width: 0;

    margin: 0 -30px;
    padding: 22px 0 0;

    border: 0;
}


/*
 * お問い合わせサービスの後に、
 * 通信端末との視覚的な間隔を設ける。
 */
.yasashii-mobile-content .ys-contact-service-field {
    margin-bottom: 18px;
}


/* ==========================================================
 * 項目タイトル
 * ========================================================== */

.yasashii-mobile-content legend.ys-contact-service-title,
.yasashii-mobile-content legend.ys-contact-device-title {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;

    width: auto;
    max-width: calc(100% - 60px);

    margin: 0 30px 10px;
    padding: 0;

    float: none;

    color: #111111;

    font-size: 21px;
    font-weight: 800;
    line-height: 1.4;

    text-align: left;
}

/* ==========================================================
 * CF7ラジオ一覧 共通
 * ========================================================== */

/*
 * CF7が生成するラッパーをすべてブロック化し、
 * 5件のサービス・3件の通信端末を縦1列に揃える。
 */
.yasashii-mobile-content .ys-contact-service-list .wpcf7-form-control-wrap,
.yasashii-mobile-content .ys-contact-service-list .wpcf7-radio,
.yasashii-mobile-content .ys-contact-service-list .wpcf7-list-item,
.yasashii-mobile-content .ys-contact-device-list .wpcf7-form-control-wrap,
.yasashii-mobile-content .ys-contact-device-list .wpcf7-radio,
.yasashii-mobile-content .ys-contact-device-list .wpcf7-list-item {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;
}


/*
 * ラジオ一覧の上端に区切り線を表示する。
 */
.yasashii-mobile-content .ys-contact-service-list .wpcf7-radio,
.yasashii-mobile-content .ys-contact-device-list .wpcf7-radio {
    border-top: 1px solid #a6a6a6;
}


/* ==========================================================
 * 選択肢1行
 * ========================================================== */

.yasashii-mobile-content .ys-contact-service-list .wpcf7-list-item>label,
.yasashii-mobile-content .ys-contact-device-list .wpcf7-list-item>label {
    display: flex;
    align-items: center;
    gap: 20px;

    width: 100%;
    min-height: 64px;

    margin: 0;
    padding: 8px 30px;

    border-bottom: 1px solid #a6a6a6;

    background-color: #ffffff;

    cursor: pointer;

    transition: background-color 0.16s ease;
}


.yasashii-mobile-content .ys-contact-service-list .wpcf7-list-item>label:hover,
.yasashii-mobile-content .ys-contact-device-list .wpcf7-list-item>label:hover {
    background-color: #f6fbf8;
}


/* ==========================================================
 * ラジオボタン本体
 * ========================================================== */

.yasashii-mobile-content .ys-contact-service-list input[type="radio"],
.yasashii-mobile-content .ys-contact-device-list input[type="radio"] {
    flex: 0 0 auto;

    width: 29px;
    height: 29px;

    margin: 0;
    padding: 0;

    border: 2px solid #777777;
    border-radius: 50%;

    background-color: #ffffff;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}


/*
 * 選択状態。
 *
 * 外周を緑、中央を白抜きにして、
 * 既存サイトの緑色へ統一する。
 */
.yasashii-mobile-content .ys-contact-service-list input[type="radio"]:checked,
.yasashii-mobile-content .ys-contact-device-list input[type="radio"]:checked {
    border-color: #079447;

    background-color: #079447;

    box-shadow:
        inset 0 0 0 6px #ffffff;
}


/*
 * キーボード操作時のフォーカス表示。
 */
.yasashii-mobile-content .ys-contact-service-list input[type="radio"]:focus-visible,
.yasashii-mobile-content .ys-contact-device-list input[type="radio"]:focus-visible {
    outline: 3px solid rgba(7, 148, 71, 0.22);
    outline-offset: 2px;
}


/* ==========================================================
 * 選択肢文字
 * ========================================================== */

.yasashii-mobile-content .ys-contact-service-list .wpcf7-list-item-label,
.yasashii-mobile-content .ys-contact-device-list .wpcf7-list-item-label {
    display: block;

    min-width: 0;

    color: #111111;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;

    text-align: left;
}


/* ==========================================================
 * 通信端末 補足文
 * ========================================================== */

.yasashii-mobile-content .ys-contact-device-item__note {
    display: block;

    margin: 12px 30px 0 !important;
    padding: 0 !important;

    color: #555555;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;

    text-align: left;
}


/* ==========================================================
 * 07. 個人情報保護方針・チェックボックス
 * ========================================================== */

.yasashii-mobile-content .ys-contact-privacy {
    width: calc(100% + 60px);

    margin: 0 -30px;
    padding: 32px 30px 0;

    border-top: 0;

    text-align: center;
}

.yasashii-mobile-content .ys-contact-privacy__link {
    display: inline-block;
    margin: 0;
    padding: 0 0 2px;
    border-bottom: 1px solid #6d6d6d;
    color: #666666;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
}

.yasashii-mobile-content .ys-contact-privacy__link:hover,
.yasashii-mobile-content .ys-contact-privacy__link:focus-visible {
    color: #079447;
    border-bottom-color: #079447;
    text-decoration: none;
}

.yasashii-mobile-content .ys-contact-privacy__description {
    margin: 20px 0 20px !important;
    padding: 0 !important;
    color: #555555;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.yasashii-mobile-content .ys-contact-acceptance,
.yasashii-mobile-content .ys-contact-newsletter {
    width: 100%;
    margin: 0;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-acceptance {
    text-align: center;
}

.yasashii-mobile-content .ys-contact-newsletter {
    margin-top: 18px;
    text-align: left;
}

.yasashii-mobile-content .ys-contact-acceptance .wpcf7-form-control-wrap,
.yasashii-mobile-content .ys-contact-newsletter .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.yasashii-mobile-content .ys-contact-acceptance .wpcf7-list-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-newsletter .wpcf7-list-item {
    display: block;
    margin: 0;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-acceptance .wpcf7-list-item>label,
.yasashii-mobile-content .ys-contact-newsletter .wpcf7-list-item>label {
    display: inline-flex;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.yasashii-mobile-content .ys-contact-acceptance .wpcf7-list-item>label {
    align-items: center;
    width: 100%;
    gap: 6px;
}

.yasashii-mobile-content .ys-contact-newsletter .wpcf7-list-item>label {
    align-items: center;
    gap: 10px;
}

.yasashii-mobile-content .ys-contact-acceptance input[type="checkbox"],
.yasashii-mobile-content .ys-contact-newsletter input[type="checkbox"] {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 2px solid #777777;
    border-radius: 3px;
    background-color: #ffffff;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    cursor: pointer;
}

.yasashii-mobile-content .ys-contact-acceptance input[type="checkbox"] {
    margin-top: 1px;
}

.yasashii-mobile-content .ys-contact-acceptance input[type="checkbox"]:checked {
    border-color: #079447;
    background-color: #079447;
    box-shadow: 0 0 0 3px rgba(7, 148, 71, 0.10);
}

.yasashii-mobile-content .ys-contact-newsletter input[type="checkbox"]:checked {
    border-color: #8a8a8a;
    background-color: #8a8a8a;
}

.yasashii-mobile-content .ys-contact-acceptance input[type="checkbox"]:checked::after,
.yasashii-mobile-content .ys-contact-newsletter input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
}

.yasashii-mobile-content .ys-contact-acceptance input[type="checkbox"]:focus-visible,
.yasashii-mobile-content .ys-contact-newsletter input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(7, 148, 71, 0.18);
    outline-offset: 2px;
}

.yasashii-mobile-content .ys-contact-acceptance .wpcf7-list-item-label {
    min-width: 0;
    color: #333333;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
}

.yasashii-mobile-content .ys-contact-newsletter .wpcf7-list-item-label {
    color: #666666;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

/*
 * CF7が案内配信欄の周囲へ生成するpタグの余白を解除する。
 */
.yasashii-mobile-content .ys-contact-newsletter>p,
.yasashii-mobile-content p:has(> .ys-contact-newsletter) {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================
 * 08. ハニーポット
 * ========================================================== */

/*
 * ハニーポット本体を非表示にする。
 */
.yasashii-mobile-content .ys-contact-honeypot,
.yasashii-mobile-content .wpcf7-form-control-wrap[data-name*="honeypot"],
.yasashii-mobile-content .wpcf7-form-control-wrap[data-name="asc_company_website"] {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/*
 * CF7がハニーポットの外側へ生成した
 * 空のp要素も完全に除去する。
 */
.yasashii-mobile-content .ys-contact-form p:has(.ys-contact-honeypot),
.yasashii-mobile-content .ys-contact-form p:has(.wpcf7-form-control-wrap[data-name="asc_company_website"]) {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
 * 09. ボタン
 * ========================================================== */

.yasashii-mobile-content .ys-contact-button-area {
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
}

.yasashii-mobile-content .ys-contact-confirm-button,
.yasashii-mobile-content .ys-contact-submit-button,
.yasashii-mobile-content .asc-cf7-send-button,
.yasashii-mobile-content .asc-cf7-restart-button,
.yasashii-mobile-content .wpcf7-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    outline: none;
    background-color: #079447;
    color: #ffffff;
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 7px 18px rgba(0, 90, 43, 0.20), 0 2px 5px rgba(0, 0, 0, 0.12);
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    transform: translateY(0);
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.yasashii-mobile-content input[type="submit"].ys-contact-confirm-button:hover,
.yasashii-mobile-content input[type="submit"].ys-contact-confirm-button:focus-visible,
.yasashii-mobile-content .ys-contact-submit-button:hover,
.yasashii-mobile-content .ys-contact-submit-button:focus-visible,
.yasashii-mobile-content .asc-cf7-send-button:hover,
.yasashii-mobile-content .asc-cf7-send-button:focus-visible,
.yasashii-mobile-content .asc-cf7-restart-button:hover,
.yasashii-mobile-content .asc-cf7-restart-button:focus-visible,
.yasashii-mobile-content .wpcf7-submit:hover,
.yasashii-mobile-content .wpcf7-submit:focus-visible {
    outline: none;
    background-color: #07863f;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 90, 43, 0.18), 0 2px 4px rgba(0, 0, 0, 0.10);
    transform: translateY(2px);
}

.yasashii-mobile-content .ys-contact-confirm-button:active,
.yasashii-mobile-content .ys-contact-submit-button:active,
.yasashii-mobile-content .asc-cf7-send-button:active,
.yasashii-mobile-content .asc-cf7-restart-button:active,
.yasashii-mobile-content .wpcf7-submit:active {
    outline: none;
    background-color: #07863f;
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 90, 43, 0.16);
    transform: translateY(4px);
}

.yasashii-mobile-content .ys-contact-confirm-button:focus:not(:focus-visible),
.yasashii-mobile-content .ys-contact-submit-button:focus:not(:focus-visible),
.yasashii-mobile-content .asc-cf7-send-button:focus:not(:focus-visible),
.yasashii-mobile-content .asc-cf7-restart-button:focus:not(:focus-visible),
.yasashii-mobile-content .wpcf7-submit:focus:not(:focus-visible) {
    outline: none;
}

.yasashii-mobile-content .ys-contact-button-area>p,
.yasashii-mobile-content p:has(> .ys-contact-button-area) {
    margin: 0 !important;
    padding: 0 !important;
}

.yasashii-mobile-content .ys-contact-button-area>p {
    position: relative;

    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================
 * Contact Form 7 送信中スピナー
 * ========================================================== */

/*
 * ボタン領域をスピナーの配置基準にする。
 */
.yasashii-mobile-content .ys-contact-button-area {
    position: relative;
}


/*
 * CF7標準スピナーを通常レイアウトから外す。
 *
 * ボタン下の余白を発生させず、
 * 送信中のみボタン右側へ重ねて表示する。
 */
.yasashii-mobile-content .ys-contact-button-area .wpcf7-spinner {
    position: absolute;
    top: 50%;
    right: 16px;
    z-index: 2;

    width: 24px;
    height: 24px;

    margin: 0;

    transform: translateY(-50%);
}

/* ==========================================================
 * 10. エラー・確認・完了
 * ========================================================== */

.yasashii-mobile-content .ys-contact-error,
.yasashii-mobile-content .wpcf7-not-valid-tip {
    width: 100%;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    color: #d7192d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

.yasashii-mobile-content .ys-contact-input.is-error,
.yasashii-mobile-content .ys-contact-select.is-error,
.yasashii-mobile-content .wpcf7-not-valid {
    border-color: #d7192d;
    box-shadow: 0 0 0 1px #d7192d, 0 0 0 4px rgba(215, 25, 45, 0.08);
}

.yasashii-mobile-content .ys-contact-form .wpcf7-response-output {
    margin: 20px 0 0 !important;
    padding: 10px 12px !important;
    font-size: 12px;
    line-height: 1.5;
}

.yasashii-mobile-content .ys-contact-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* ==========================================================
 * 送信完了画面 再問い合わせ
 * ========================================================== */

.yasashii-mobile-content .asc-cf7-complete-actions {
    width: 100%;

    margin: 32px 0 0;
    padding: 0 20px;
}

/* ==========================================================
 * Contact Form 画面切替フェード
 * ========================================================== */

/*
 * 入力・確認・完了画面を切り替える際、
 * レイアウト変更とスクロール移動を白画面で隠す。
 */
.asc-cf7-page-transition {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 900;

    width: 100%;

    margin: 0;
    padding: 0;

    background-color: #ffffff;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.20s ease,
        visibility 0s linear 0.20s;
}

/*
 * フェードアウト中。
 */
.asc-cf7-page-transition.is-active {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transition:
        opacity 0.20s ease,
        visibility 0s linear 0s;
}


/*
 * OS側でアニメーション軽減が指定されている場合は、
 * フェードを行わず即時切替する。
 */
@media (prefers-reduced-motion: reduce) {

    .asc-cf7-page-transition {
        transition: none;
    }
}

/* ==========================================================
 * 確認画面
 * ========================================================== */

/*
 * 確認画面全体。
 *
 * 入力画面より少しコンパクトに見せるため、
 * 左右に余白を設けてカード型で表示する。
 */
.yasashii-mobile-content .asc-cf7-step-confirm {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0 22px 40px;

    background-color: #ffffff;
}


/*
 * 確認画面タイトル。
 */
.yasashii-mobile-content .asc-cf7-confirm-title {
    width: 100%;

    margin: 0 0 24px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;
    color: #111111;

    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;

    text-align: center;
}


/*
 * Lightning標準の見出し装飾を解除する。
 */
.yasashii-mobile-content .asc-cf7-confirm-title::before,
.yasashii-mobile-content .asc-cf7-confirm-title::after {
    content: none !important;
    display: none !important;
}


/*
 * 確認内容を1枚のカードとして表示する。
 */
.yasashii-mobile-content .asc-cf7-confirm-list {
    width: 100%;

    margin: 0;
    padding: 0;

    border: 1px solid #d8ddd9;
    border-radius: 12px;

    background-color: #ffffff;

    overflow: hidden;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.06);
}


/*
 * 各確認項目。
 */
.yasashii-mobile-content .asc-cf7-confirm-row {
    width: 100%;

    margin: 0;
    padding: 16px 18px;

    border-bottom: 1px solid #e3e6e4;

    background-color: #ffffff;
}


/*
 * 最後の行には下線を表示しない。
 */
.yasashii-mobile-content .asc-cf7-confirm-row:last-child {
    border-bottom: 0;
}


/*
 * 項目名。
 */
.yasashii-mobile-content .asc-cf7-confirm-row dt {
    width: 100%;

    margin: 0 0 5px;
    padding: 0;

    color: #079447;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;

    text-align: left;
}


/*
 * 入力値。
 */
.yasashii-mobile-content .asc-cf7-confirm-row dd {
    width: 100%;

    margin: 0;
    padding: 0;

    color: #222222;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;

    text-align: left;

    overflow-wrap: anywhere;
}


/*
 * 戻る・送信ボタン領域。
 *
 * PHP側の実クラス
 * asc-cf7-confirm-actions
 * に合わせる。
 */
.yasashii-mobile-content .asc-cf7-confirm-actions {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 12px;

    width: 100%;

    margin: 24px 0 0;
    padding: 0;
}

/*
 * 確認画面内の送信ボタン。
 */
.yasashii-mobile-content .asc-cf7-confirm-actions .asc-cf7-send-button {
    min-height: 54px;

    padding-right: 12px;
    padding-left: 12px;

    font-size: 15px;
}

.yasashii-mobile-content .ys-contact-back-button,
.yasashii-mobile-content .asc-cf7-back-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 54px;

    margin: 0;
    padding: 10px 12px;

    border: 2px solid #079447;
    border-radius: 10px;

    outline: none;

    background-color: #ffffff;
    color: #079447;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;

    text-align: center;

    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    cursor: pointer;
}

.yasashii-mobile-content .ys-contact-back-button:hover,
.yasashii-mobile-content .ys-contact-back-button:focus-visible,
.yasashii-mobile-content .asc-cf7-back-button:hover,
.yasashii-mobile-content .asc-cf7-back-button:focus-visible {
    outline: none;
    background-color: #f2fbf6;
    color: #07863f;
}

.yasashii-mobile-content .ys-contact-complete-view,
.yasashii-mobile-content .asc-cf7-step-complete {
    padding: 60px 24px;
    text-align: center;
}

.yasashii-mobile-content .ys-contact-complete-view__title {
    margin: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #079447;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}

.yasashii-mobile-content .ys-contact-complete-view__title::before,
.yasashii-mobile-content .ys-contact-complete-view__title::after {
    content: none !important;
    display: none !important;
}

.yasashii-mobile-content .ys-contact-complete-view__message {
    margin: 0 !important;
    padding: 0 !important;
    color: #333333;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.8;
    text-align: center;
}


/* ==========================================================
 * 11. レスポンシブ
 * ========================================================== */

@media screen and (max-width: 480px) {
    .yasashii-mobile-content .ys-contact-form {
        padding-right: 22px;
        padding-left: 22px;
    }

    .yasashii-mobile-content .ys-contact-introduction {
        padding-right: 22px;
        padding-left: 22px;
    }

    .yasashii-mobile-content .ys-contact-label {
        font-size: 20px;
    }

    .yasashii-mobile-content .ys-contact-input,
    .yasashii-mobile-content .ys-contact-select {
        min-height: 52px;
        font-size: 16px;
    }

    .yasashii-mobile-content .ys-contact-input--postal-code,
    .yasashii-mobile-content .ys-contact-select--prefecture {
        width: 52%;
        min-width: 145px;
    }

    .yasashii-mobile-content .ys-contact-birthday {
        column-gap: 4px;
    }

    .yasashii-mobile-content .ys-contact-birthday__item {
        column-gap: 2px;
    }

    .yasashii-mobile-content .ys-contact-birthday__unit {
        margin: 0 0 2px;
        font-size: 13px;
    }

    .yasashii-mobile-content .ys-contact-birthday .wpcf7-form-control-wrap .ys-contact-select {
        padding-right: 27px;
        padding-left: 8px;
        background-position:
            calc(100% - 15px) 21px,
            calc(100% - 10px) 21px;
        background-size: 6px 6px, 6px 6px;
        font-size: 15px;
    }

    /*
     * お問い合わせサービス・通信端末を、
     * 22pxのフォーム左右余白に合わせて全幅表示する。
     */
    .yasashii-mobile-content .ys-contact-service-field,
    .yasashii-mobile-content .ys-contact-device-field {
        width: calc(100% + 44px);

        margin-right: -22px;
        margin-left: -22px;
    }

    .yasashii-mobile-content legend.ys-contact-service-title,
    .yasashii-mobile-content legend.ys-contact-device-title {
        max-width: calc(100% - 44px);

        margin-right: 22px;
        margin-left: 22px;

        font-size: 20px;
    }

    .yasashii-mobile-content .ys-contact-service-list .wpcf7-list-item>label,
    .yasashii-mobile-content .ys-contact-device-list .wpcf7-list-item>label {
        gap: 16px;

        min-height: 62px;

        padding-right: 22px;
        padding-left: 22px;
    }

    .yasashii-mobile-content .ys-contact-privacy {
        width: calc(100% + 44px);
        margin-right: -22px;
        margin-left: -22px;
        padding-right: 22px;
        padding-left: 22px;
    }

    .yasashii-mobile-content .ys-contact-confirm-button,
    .yasashii-mobile-content .ys-contact-submit-button,
    .yasashii-mobile-content .asc-cf7-send-button,
    .yasashii-mobile-content .asc-cf7-restart-button,
    .yasashii-mobile-content .wpcf7-submit {
        font-size: 17px;
    }
}

@media screen and (max-width: 360px) {
    .yasashii-mobile-content .ys-contact-form {
        padding-right: 16px;
        padding-left: 16px;
    }

    .yasashii-mobile-content .ys-contact-birthday {
        column-gap: 3px;
    }

    .yasashii-mobile-content .ys-contact-birthday__item .ys-contact-select {
        padding-right: 30px;
        padding-left: 8px;
        background-position:
            calc(100% - 16px) 21px,
            calc(100% - 11px) 21px;
        background-size: 6px 6px, 6px 6px;
        font-size: 14px;
    }

    .yasashii-mobile-content .ys-contact-birthday__unit {
        font-size: 12px;
    }

    .yasashii-mobile-content .ys-contact-service-field,
    .yasashii-mobile-content .ys-contact-device-field,
    .yasashii-mobile-content .ys-contact-privacy {
        width: calc(100% + 32px);

        margin-right: -16px;
        margin-left: -16px;
    }

    .yasashii-mobile-content legend.ys-contact-service-title,
    .yasashii-mobile-content legend.ys-contact-device-title {
        max-width: calc(100% - 32px);

        margin-right: 16px;
        margin-left: 16px;
    }

    .yasashii-mobile-content .ys-contact-service-list .wpcf7-list-item>label,
    .yasashii-mobile-content .ys-contact-device-list .wpcf7-list-item>label {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * 会社案内セクション
 * ==========================================================
 *
 * 役割:
 * ・会社案内セクションのタイトルを表示する。
 * ・スタッフ2名の写真、プロフィール、紹介文を表示する。
 * ・店舗外観写真と店舗ロゴを表示する。
 * ・電話番号、受付時間、お問い合わせ導線を表示する。
 *
 * 注意:
 * ・スタッフ写真と店舗写真は現在ダミー画像を使用する。
 * ・正式画像が用意できた際はHTMLのsrcのみ差し替える。
 * ・電話番号、営業時間、吹き出し、ボタンはHTMLとCSSで描画する。
 */


/* ==========================================================
 * セクション全体
 * ========================================================== */

/*
 * お問い合わせセクションの後へ続く、
 * TOPページ最下部の会社案内領域。
 *
 * 背景色は白とし、
 * 前セクションとの区切りを上側の余白で確保する。
 */
.yasashii-mobile-content .ys-company-section {
    width: 100%;
    max-width: none;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 60px 0 54px;

    background-color: #ffffff;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;
}


/* ==========================================================
 * セクションタイトル
 * ========================================================== */

/*
 * PRICE・VOICE・CONTACTと同じ構成で表示する。
 */
.yasashii-mobile-content .ys-company-title {
    width: 100%;

    margin: 0;
    margin-block-start: 0 !important;

    padding: 38px 20px 30px;

    border: 0;

    background-color: #ffffff;

    text-align: center;
}


/*
 * 英字見出し「COMPANY」。
 */
.yasashii-mobile-content .ys-company-title__english {
    display: block;

    width: 100%;

    margin: 0 0 8px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #079447;

    font-family:
        "Times New Roman",
        "Yu Mincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    letter-spacing: 0.02em;

    text-align: center;
}


/*
 * 日本語見出し「会社案内」。
 */
.yasashii-mobile-content .ys-company-title__japanese {
    display: block;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #000000;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: 0.02em;

    text-align: center;
}


/*
 * Lightning標準の見出し装飾を無効化する。
 */
.yasashii-mobile-content .ys-company-title__english::before,
.yasashii-mobile-content .ys-company-title__english::after,
.yasashii-mobile-content .ys-company-title__japanese::before,
.yasashii-mobile-content .ys-company-title__japanese::after {
    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
}

/* ==========================================================
 * Googleマップ
 * ========================================================== */

/*
 * 会社案内タイトル直下へGoogleマップを表示する。
 *
 * 左右に適度な余白を設け、
 * 元デザインと同じ縦長寄りの地図領域にする。
 */
.yasashii-mobile-content .ys-company-map {
    width: 100%;

    margin: 0;
    padding: 0 24px;

    background-color: #ffffff;
}

.yasashii-mobile-content .ys-company-map__frame {
    display: block;

    width: 100%;
    height: 430px;

    margin: 0;
    padding: 0;

    border: 0;

    background-color: #eeeeee;
}


/* ==========================================================
 * Googleマップ下の区切り線
 * ========================================================== */

.yasashii-mobile-content .ys-company-map-divider {
    width: calc(100% - 48px);
    height: 2px;

    margin: 16px auto 58px;
    padding: 0;

    background-color: #079447;
}

/* ==========================================================
 * スタッフ紹介
 * ========================================================== */

.yasashii-mobile-content .ys-company-staff {
    width: 100%;

    margin: 0;
    padding: 0 26px 42px;

    background-color: #ffffff;
}


/*
 * 「スタッフ紹介」見出し。
 */
.yasashii-mobile-content .ys-company-subtitle {
    width: 100%;

    margin: 0 0 24px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #111111;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;

    text-align: center;
}

.yasashii-mobile-content .ys-company-subtitle::before,
.yasashii-mobile-content .ys-company-subtitle::after {
    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
}


/* ==========================================================
 * スタッフ一覧
 * ========================================================== */

/*
 * 2名を横並びで表示する。
 *
 * スマートフォン幅でも2列を維持し、
 * 元デザインと同じ構成にする。
 */
.yasashii-mobile-content .ys-company-staff-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;

    width: 100%;

    margin: 0;
    padding: 0;
}


/* ==========================================================
 * スタッフカード
 * ========================================================== */

.yasashii-mobile-content .ys-company-staff-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    margin: 0;
    padding: 0;

    background-color: #ffffff;
}


/* ==========================================================
 * スタッフ写真
 * ========================================================== */

.yasashii-mobile-content .ys-company-staff-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;

    margin: 0 0 14px;
    padding: 0;

    background-color: #ececec;

    overflow: hidden;
}

.yasashii-mobile-content .ys-company-staff-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;
    object-position: center;
}


/* ==========================================================
 * スタッフプロフィール
 * ========================================================== */

.yasashii-mobile-content .ys-company-staff-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;

    width: 100%;

    margin: 0;
    padding: 0;
}


/*
 * 氏名・役職。
 */
.yasashii-mobile-content .ys-company-staff-card__name {
    width: 100%;

    margin: 0 0 9px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    color: #111111;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;

    text-align: left;
}

.yasashii-mobile-content .ys-company-staff-card__name::before,
.yasashii-mobile-content .ys-company-staff-card__name::after {
    content: none !important;
    display: none !important;
}


/*
 * 趣味、地域活動、修理歴などの補足情報。
 */
.yasashii-mobile-content .ys-company-staff-card__profile {
    width: 100%;

    margin: 0 0 10px;
    padding: 0;
}

.yasashii-mobile-content .ys-company-staff-card__profile-row {
    display: flex;
    align-items: flex-start;

    width: 100%;

    margin: 0 0 3px;
    padding: 0;
}

.yasashii-mobile-content .ys-company-staff-card__profile-row:last-child {
    margin-bottom: 0;
}

.yasashii-mobile-content .ys-company-staff-card__profile-row dt {
    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    color: #555555;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}

.yasashii-mobile-content .ys-company-staff-card__profile-row dt::after {
    content: "：";
}

.yasashii-mobile-content .ys-company-staff-card__profile-row dd {
    min-width: 0;

    margin: 0;
    padding: 0;

    color: #555555;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}


/*
 * スタッフ紹介文。
 */
.yasashii-mobile-content .ys-company-staff-card__message {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    color: #333333;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.75;

    text-align: left;
}


/* ==========================================================
 * 店舗外観画像
 * ========================================================== */

.yasashii-mobile-content .ys-company-store-image {
    width: 100%;

    margin: 0;
    padding: 0;

    background-color: #eeeeee;

    overflow: hidden;
}

.yasashii-mobile-content .ys-company-store-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
}


/* ==========================================================
 * 店舗情報全体
 * ========================================================== */

.yasashii-mobile-content .ys-company-information {
    width: 100%;

    margin: 0;
    padding: 32px 28px 0;

    background-color: #ffffff;

    text-align: center;
}


/* ==========================================================
 * 店舗ロゴ
 * ========================================================== */

.yasashii-mobile-content .ys-company-logo {
    width: 100%;

    margin: 0 0 24px;
    padding: 0;

    text-align: center;
}

.yasashii-mobile-content .ys-company-logo__caption {
    margin: 0 0 8px !important;
    padding: 0 !important;

    color: #555555;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;

    text-align: center;
}

/*
 * ロゴ画像自体に余白と文字情報が含まれているため、
 * 店舗情報領域の横幅いっぱいに表示する。
 */
.yasashii-mobile-content .ys-company-logo img {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    margin: 0;
}


/* ==========================================================
 * 電話番号領域
 * ========================================================== */

.yasashii-mobile-content .ys-company-phone {
    width: 100%;

    margin: 0;
    padding: 22px 18px 18px;

    border: 2px solid #8fd2ac;
    border-radius: 4px;

    background-color: #ffffff;

    text-align: center;
}


/*
 * 電話番号リンク。
 */
.yasashii-mobile-content .ys-company-phone__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0;
    padding: 0;

    color: #111111;

    text-decoration: none;
}

.yasashii-mobile-content .ys-company-phone__link:hover,
.yasashii-mobile-content .ys-company-phone__link:focus-visible {
    color: #079447;
    text-decoration: none;
}


/* ==========================================================
 * 電話アイコン
 * ========================================================== */
/*
 * 電話アイコン。
 *
 * PC右サイド・モバイル追従フッターと同じ
 * Material Symbols Rounded の phone_in_talk を使用する。
 */
.yasashii-mobile-content .ys-company-phone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    margin: 0;
    margin-top: 3px;
    padding: 0;

    color: #111111;

    font-size: 30px;
    line-height: 1;

    font-variation-settings:
        'FILL' 1,
        'wght' 600,
        'GRAD' 0,
        'opsz' 48;
}


/*
 * 電話番号。
 */
.yasashii-mobile-content .ys-company-phone__number {
    display: block;

    color: inherit;

    font-family:
        Arial,
        "Noto Sans JP",
        sans-serif;

    font-size: 29px;
    font-weight: 800;
    line-height: 1.1;

    letter-spacing: 0.01em;
}


/*
 * 受付時間・定休日。
 */
.yasashii-mobile-content .ys-company-phone__hours,
.yasashii-mobile-content .ys-company-phone__closed {
    margin: 0 !important;
    padding: 0 !important;

    color: #079447;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;

    text-align: center;
}

.yasashii-mobile-content .ys-company-phone__hours {
    margin-top: 8px !important;
}

.yasashii-mobile-content .ys-company-phone__closed {
    margin-top: 1px !important;
}


/* ==========================================================
 * お問い合わせ案内
 * ========================================================== */

.yasashii-mobile-content .ys-company-contact-guide {
    width: 100%;

    margin: 28px 0 0;
    padding: 0;

    text-align: center;
}


/* ==========================================================
 * 吹き出し
 * ========================================================== */

.yasashii-mobile-content .ys-company-contact-guide__bubble {
    position: relative;

    display: inline-block;

    margin: 0 0 14px !important;
    padding: 7px 16px !important;

    border: 1px solid #a9d9bc;
    border-radius: 20px;

    background-color: #ffffff;
    color: #079447;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;

    text-align: center;
}


/*
 * 吹き出し下部の三角形。
 */
.yasashii-mobile-content .ys-company-contact-guide__bubble::before {
    content: "";

    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;

    width: 0;
    height: 0;

    margin: 0 auto;

    border-top: 7px solid #a9d9bc;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
}

.yasashii-mobile-content .ys-company-contact-guide__bubble::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;

    width: 0;
    height: 0;

    margin: 0 auto;

    border-top: 6px solid #ffffff;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}

/* ==========================================================
 * 会社案内内のお問い合わせボタン
 * ========================================================== */

/*
 * ボタン本体のデザインは、
 * 既存のys-worries-buttonを再利用する。
 *
 * 本セクションでは横幅と高さだけ調整する。
 */
.yasashii-mobile-content .ys-company-contact-guide .ys-company-contact-button {
    width: 100%;
    min-height: 54px;

    margin: 0;
    padding-top: 11px;
    padding-bottom: 11px;

    font-size: 18px;
}


/* ==========================================================
 * スマートフォン幅の微調整
 * ========================================================== */

@media screen and (max-width: 480px) {

    .yasashii-mobile-content .ys-company-staff {
        padding-right: 20px;
        padding-left: 20px;
    }

    .yasashii-mobile-content .ys-company-staff-list {
        gap: 14px;
    }

    .yasashii-mobile-content .ys-company-staff-card__name {
        font-size: 12px;
    }

    .yasashii-mobile-content .ys-company-staff-card__message {
        font-size: 10px;
    }

    .yasashii-mobile-content .ys-company-information {
        padding-right: 22px;
        padding-left: 22px;
    }

    .yasashii-mobile-content .ys-company-phone {
        padding-right: 12px;
        padding-left: 12px;
    }

    .yasashii-mobile-content .ys-company-phone__number {
        font-size: 27px;
    }

    .yasashii-mobile-content .ys-company-map {
        padding-right: 20px;
        padding-left: 20px;
    }

    .yasashii-mobile-content .ys-company-map__frame {
        height: 400px;
    }

    .yasashii-mobile-content .ys-company-map-divider {
        width: calc(100% - 40px);
    }

    .yasashii-mobile-content .ys-company-contact-guide .ys-company-contact-button {
        width: 100%;

        font-size: 17px;
    }
}


/* ==========================================================
 * 極小画面の微調整
 * ========================================================== */

@media screen and (max-width: 360px) {

    .yasashii-mobile-content .ys-company-staff {
        padding-right: 16px;
        padding-left: 16px;
    }

    .yasashii-mobile-content .ys-company-staff-list {
        gap: 10px;
    }

    .yasashii-mobile-content .ys-company-staff-card__name {
        font-size: 11px;
    }

    .yasashii-mobile-content .ys-company-staff-card__message {
        font-size: 9px;
        line-height: 1.65;
    }

    .yasashii-mobile-content .ys-company-information {
        padding-right: 16px;
        padding-left: 16px;
    }

    .yasashii-mobile-content .ys-company-phone__number {
        font-size: 24px;
    }

    .yasashii-mobile-content .ys-company-map {
        padding-right: 16px;
        padding-left: 16px;
    }

    .yasashii-mobile-content .ys-company-map__frame {
        height: 360px;
    }

    .yasashii-mobile-content .ys-company-map-divider {
        width: calc(100% - 32px);
    }

    .yasashii-mobile-content .ys-company-contact-guide .ys-company-contact-button {
        font-size: 16px;
    }
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * TOPページ専用フッター
 * ==========================================================
 *
 * 役割:
 * ・管理画面で登録したフッターメニューを2列で表示する。
 * ・フッター下部へ街並み画像を横幅いっぱいに表示する。
 *
 * メニュー配置:
 * ・左列4件
 * ・右列2件
 *
 * 注意:
 * ・表示順はWordPress管理画面のメニュー順に従う。
 * ・左列へ先に4件表示した後、右列へ続ける。
 */


/* ==========================================================
 * フッター全体
 * ========================================================== */

.yasashii-mobile-content .ys-footer {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background-color: #079447;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;
}


/* ==========================================================
 * フッターナビゲーション
 * ========================================================== */

/*
 * 見本に合わせて、
 * メニュー上部と左右へ余白を設ける。
 */
.yasashii-mobile-content .ys-footer-navigation {
    width: 100%;

    margin: 0;
    padding: 34px 28px;

    background-color: #ffffff;
}


/* ==========================================================
 * フッターメニュー
 * ========================================================== */

/*
 * 先に左列へ4件を縦に並べ、
 * 5件目以降を右列へ表示する。
 *
 * WordPress管理画面では次の順番にする。
 *
 * 1. 安心の3つのお約束
 * 2. お問い合わせ
 * 3. サービス一覧
 * 4. 料金のご案内
 * 5. ご利用の流れ
 * 6. 会社案内
 */
.yasashii-mobile-content .ys-footer-menu {
    display: grid;

    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);

    column-gap: 18px;
    row-gap: 16px;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;
}


/*
 * LightningやWordPressがli要素へ設定する
 * 余白、罫線、背景を解除する。
 */
.yasashii-mobile-content .ys-footer-menu>li {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;

    list-style: none;
}


/*
 * テーマ側のリストマーカーや疑似要素を無効化する。
 */
.yasashii-mobile-content .ys-footer-menu>li::before,
.yasashii-mobile-content .ys-footer-menu>li::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
 * メニューリンク
 * ========================================================== */

.yasashii-mobile-content .ys-footer-menu>li>a {
    position: relative;

    display: block;

    width: 100%;

    margin: 0;
    padding: 2px 0 2px 12px;

    color: #079447;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;

    letter-spacing: 0;

    text-align: left;
    text-decoration: none;

    overflow-wrap: anywhere;

    transition:
        color 0.18s ease,
        opacity 0.18s ease;
}


/*
 * 各メニュー項目の先頭へ、
 * 見本にある短い緑色の横線を表示する。
 */
.yasashii-mobile-content .ys-footer-menu>li>a::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 7px;
    height: 1px;

    background-color: #079447;

    transform: translateY(-50%);
}


/*
 * マウス操作時は位置を動かさず、
 * 色のみ少し濃くする。
 */
.yasashii-mobile-content .ys-footer-menu>li>a:hover,
.yasashii-mobile-content .ys-footer-menu>li>a:focus-visible {
    color: #056f35;
    text-decoration: none;
}

/* ==========================================================
 * コピーライト
 * ========================================================== */

/*
 * 街並み画像の直前へコピーライトを表示する。
 *
 * コピーライトと街並みを一体に見せるため、
 * 下側余白は小さくする。
 */
.yasashii-mobile-content .ys-footer-copyright {
    width: 100%;

    margin: 0;
    padding: 12px 20px 8px;

    background-color: #ffffff;

    color: #666666;

    text-align: center;
}

.yasashii-mobile-content .ys-footer-copyright small {
    display: block;

    margin: 0;
    padding: 0;

    color: inherit;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;

    letter-spacing: 0.02em;

    text-align: center;
}


/* ==========================================================
 * 街並み画像
 * ========================================================== */

.yasashii-mobile-content .ys-footer-cityscape {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background-color: #079447;

    overflow: hidden;
}


/*
 * figureやインライン画像由来の余白を発生させず、
 * フッター幅いっぱいに表示する。
 */
.yasashii-mobile-content .ys-footer-cityscape img {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    margin: 0;
    padding: 0;
}


/* ==========================================================
 * スマートフォン幅の微調整
 * ========================================================== */

@media screen and (max-width: 480px) {

    .yasashii-mobile-content .ys-footer-navigation {
        padding-top: 42px;
        padding-right: 24px;
        padding-bottom: 30px;
        padding-left: 24px;
    }

    .yasashii-mobile-content .ys-footer-menu {
        column-gap: 18px;
        row-gap: 20px;
    }

    .yasashii-mobile-content .ys-footer-menu>li>a {
        padding-left: 11px;

        font-size: 14px;
    }
}


/* ==========================================================
 * 極小画面の微調整
 * ========================================================== */

@media screen and (max-width: 360px) {

    .yasashii-mobile-content .ys-footer-navigation {
        padding-right: 18px;
        padding-left: 18px;
    }

    .yasashii-mobile-content .ys-footer-menu {
        column-gap: 12px;
    }

    .yasashii-mobile-content .ys-footer-menu>li>a {
        font-size: 13px;
    }
}

/**
 * ==========================================================
 * TOPページ外側の背景色
 * ==========================================================
 *
 * PC表示時に中央コンテンツおよび固定画像の外側へ
 * 余白が生じた場合は白背景で表示する。
 */
body.home,
body.home #page,
body.home .siteContent,
body.home .site-body,
body.home .site-body-container,
body.home .yasashii-page,
body.yasashii-site-error,
body.yasashii-site-error #page,
body.yasashii-site-error .siteContent,
body.yasashii-site-error .site-body,
body.yasashii-site-error .site-body-container,
body.yasashii-site-error .yasashii-page {
    background-color: #ffffff;
}

/* ==========================================================
 * ボタン横幅（スマートフォン）
 * ========================================================== */

@media screen and (max-width: 767px) {

    /*
     * 画像へ重ねる「サービス一覧」ボタン。
     */
    .yasashii-mobile-content .ys-service-button-area {
        right: 12px;
        left: 12px;
    }

    /*
     * 「料金を見る」ボタンの左右余白。
     */
    .yasashii-mobile-content .ys-service-price-button-area {
        padding-right: 12px;
        padding-left: 12px;
    }

    /*
     * お悩みセクションの「無料で相談する」ボタン。
     *
     * 外側の左右余白を12pxまで縮め、
     * スマートフォン画面を広く使用する。
     */
    .yasashii-mobile-content .ys-worries-button-area {
        padding-right: 12px;
        padding-left: 12px;
    }

    /*
     * ボタン内部の左右余白も縮小する。
     *
     * 右側の丸アイコン分だけ余白を確保し、
     * 「無料で相談する」が1行で収まる幅を確保する。
     */
    .yasashii-mobile-content .ys-worries-button {
        min-height: 58px;

        /*
		 * 左右を同じ幅にすることで、
		 * 右側に丸アイコンがあっても文字を
		 * ボタン全体の中央へ配置する。
		 */
        padding-right: 52px;
        padding-left: 52px;

        font-size: 18px;
        white-space: nowrap;
    }

    /*
     * 右側アイコンを画面幅に合わせて少し小さくする。
     */
    .yasashii-mobile-content .ys-worries-button__icon {
        right: 12px;

        width: 30px;
        height: 30px;
    }

    /*
     * サービス一覧下の無料相談ボタン。
     */
    .yasashii-mobile-content .ys-service-list-button-area {
        padding-right: 0;
        padding-left: 0;
    }

    /*
     * 会社案内下のお問い合わせボタン。
     *
     * 会社案内側ですでに左右余白があるため、
     * 追加の左右paddingは付けない。
     */
    .yasashii-mobile-content .ys-company-contact-guide {
        padding-right: 0;
        padding-left: 0;
    }
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * 安心の3つのお約束 POINT一覧
 * ==========================================================
 *
 * 役割:
 * ・従来画像で表示していたPOINT1～POINT3を、
 *   HTML、CSS、Material Symbols Roundedで表示する。
 * ・文字やアイコンを画面幅に応じて調整可能にする。
 */


/* ==========================================================
 * POINT一覧
 * ========================================================== */

.yasashii-mobile-content .ys-promise-points {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background-color: #ffffff;
}


/* ==========================================================
 * POINT単位
 * ========================================================== */

.yasashii-mobile-content .ys-promise-point {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-height: 400px;

    margin: 0;
    padding: 62px 22px 58px;

    border-bottom: 1px solid #079447;

    background-color: #ffffff;

    text-align: center;
}

.yasashii-mobile-content .ys-promise-point:first-child {
    border-top: 0;
}


/* ==========================================================
 * POINT番号
 * ========================================================== */

.yasashii-mobile-content .ys-promise-point__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 136px;
    min-height: 34px;

    margin: 0 0 52px !important;
    padding: 4px 22px !important;

    border: 3px solid #079447;
    border-radius: 7px;

    background-color: #ffffff;
    color: #079447;

    font-family:
        Arial,
        "Noto Sans JP",
        sans-serif;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.01em;

    text-align: center;
}


/* ==========================================================
 * Material Symbols アイコン領域
 * ========================================================== */

.yasashii-mobile-content .ys-promise-point__icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;

    width: 100%;
    min-height: 104px;

    margin: 0 0 38px;
    padding: 0;

    color: #079447;
}


/*
 * Material Symbols Roundedの共通設定。
 *
 * FILL:
 * ・1で塗りつぶし表示。
 *
 * wght:
 * ・元画像に近い、やや太めの600。
 *
 * GRAD:
 * ・線の視覚的な太さを少し補強する。
 *
 * opsz:
 * ・大きなアイコン表示向けの48。
 */
.yasashii-mobile-content .ys-promise-point__icons .material-symbols-rounded {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 100px;

    margin: 0;
    padding: 0;

    color: inherit;

    font-size: 102px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;

    letter-spacing: normal;
    text-transform: none;

    white-space: nowrap;
    word-wrap: normal;

    direction: ltr;

    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";

    -webkit-font-smoothing: antialiased;

    font-variation-settings:
        "FILL" 0,
        "wght" 500,
        "GRAD" 0,
        "opsz" 48;
}


/* ==========================================================
 * POINT1 2アイコン
 * ========================================================== */

/*
 * 家と店舗を横並びにするため、
 * 単独アイコンより少し小さくする。
 */
.yasashii-mobile-content .ys-promise-point__icons--double {
    gap: 30px;
}

.yasashii-mobile-content .ys-promise-point__icons--double .material-symbols-rounded {
    min-width: 92px;

    font-size: 92px;
}


/* ==========================================================
 * POINT3 握手アイコン
 * ========================================================== */

.yasashii-mobile-content .ys-promise-point__icons--point3 .material-symbols-rounded {
    min-width: 150px;

    font-size: 124px;
}

/* ==========================================================
 * 3つのお約束
 * POINT画像
 * ========================================================== */

.yasashii-mobile-content .ys-promise-point__icon-image {
    display: block;

    width: auto;
    max-width: 150px;
    height: auto;
    max-height: 150px;

    margin: 0;
    padding: 0;

    object-fit: contain;
}


/* POINT1
 * 来店・訪問の2アイコンを1枚の画像として表示
 */
.yasashii-mobile-content .ys-promise-point__icons--point1 .ys-promise-point__icon-image {
    max-width: 250px;
}


/* POINT2 */
.yasashii-mobile-content .ys-promise-point__icons--point2 .ys-promise-point__icon-image {
    max-width: 150px;
}


/* POINT3 */
.yasashii-mobile-content .ys-promise-point__icons--point3 .ys-promise-point__icon-image {
    max-width: 150px;
}

/* ==========================================================
 * POINTタイトル
 * ========================================================== */

.yasashii-mobile-content .ys-promise-point__title {
    width: 100%;

    margin: 0 0 14px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;
    color: #079447;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 29px;
    font-weight: 800;
    line-height: 1.35;

    letter-spacing: 0;

    text-align: center;
}


/*
 * Lightning標準の見出し装飾を解除する。
 */
.yasashii-mobile-content .ys-promise-point__title::before,
.yasashii-mobile-content .ys-promise-point__title::after {
    content: none !important;
    display: none !important;

    border: 0 !important;
    background: none !important;
}


/* ==========================================================
 * POINT説明文
 * ========================================================== */

.yasashii-mobile-content .ys-promise-point__description {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    color: #111111;

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;

    letter-spacing: 0;

    text-align: center;
}


/* ==========================================================
 * スマートフォン幅の微調整
 * ========================================================== */

@media screen and (max-width: 480px) {

    .yasashii-mobile-content .ys-promise-point {
        min-height: 400px;

        padding-top: 62px;
        padding-right: 16px;
        padding-bottom: 58px;
        padding-left: 16px;
    }

    .yasashii-mobile-content .ys-promise-point__number {
        min-width: 136px;

        margin-bottom: 50px !important;

        font-size: 17px;
    }

    .yasashii-mobile-content .ys-promise-point__icons {
        margin-bottom: 36px;

        font-size: 82px;
    }

    .yasashii-mobile-content .ys-promise-point__icons--double {
        gap: 22px;

        font-size: 72px;
    }

    .yasashii-mobile-content .ys-promise-point__title {
        font-size: 27px;
    }

    .yasashii-mobile-content .ys-promise-point__description {
        font-size: 16px;
    }
}


/* ==========================================================
 * 極小画面の微調整
 * ========================================================== */

@media screen and (max-width: 360px) {

    .yasashii-mobile-content .ys-promise-point__icons {
        font-size: 74px;
    }

    .yasashii-mobile-content .ys-promise-point__icons--double {
        gap: 16px;

        font-size: 64px;
    }

    .yasashii-mobile-content .ys-promise-point__title {
        font-size: 24px;
    }

    .yasashii-mobile-content .ys-promise-point__description {
        font-size: 14px;
    }
}

/**
 * ==========================================================
 * やさしいスマホドクター
 * 404ページ
 * ==========================================================
 *
 * TOPページと同じPC特殊レイアウトを使用し、
 * 中央スマートフォン領域だけ404専用表示へ差し替える。
 *
 * HTTPステータスの404制御はPHP側で行う。
 */

/* ==========================================================
 * 404コンテンツ全体
 * ========================================================== */

.yasashii-mobile-content .ys-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 640px;

    margin: 0;
    padding: 80px 28px 72px;

    background-color: var(--ys-color-white);
    color: var(--ys-color-text);

    text-align: center;
}

/* ==========================================================
 * 404コード
 * ========================================================== */

.yasashii-mobile-content .ys-error-page__code {
    margin: 0 0 18px !important;
    padding: 0 !important;

    color: var(--ys-color-primary);

    font-family:
        Arial,
        "Noto Sans JP",
        sans-serif;

    font-size: 64px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.03em;
}

/* ==========================================================
 * 404タイトル
 * ========================================================== */

.yasashii-mobile-content .ys-error-page__title {
    width: 100%;

    margin: 0 0 24px !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;
    color: var(--ys-color-text);

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.45;

    text-align: center;
}

.yasashii-mobile-content .ys-error-page__title::before,
.yasashii-mobile-content .ys-error-page__title::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================
 * 404説明
 * ========================================================== */

.yasashii-mobile-content .ys-error-page__message {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    color: #555555;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;

    text-align: center;
}

/* ==========================================================
 * TOPへ戻る
 * ========================================================== */

.yasashii-mobile-content .ys-error-page__home {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 56px;

    margin: 42px 0 0;
    padding: 12px 20px;

    border: 0;
    border-radius: 10px;

    background-color: var(--ys-color-primary);
    color: var(--ys-color-white);

    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;

    text-align: center;
    text-decoration: none;

    box-shadow:
        0 7px 18px rgba(0, 90, 43, 0.20),
        0 2px 5px rgba(0, 0, 0, 0.12);

    transform: translateY(0);

    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.yasashii-mobile-content .ys-error-page__home:hover,
.yasashii-mobile-content .ys-error-page__home:focus-visible {
    background-color: var(--ys-color-primary-dark);
    color: var(--ys-color-white);

    text-decoration: none;

    box-shadow:
        0 4px 10px rgba(0, 90, 43, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.10);

    transform: translateY(2px);
}

.yasashii-mobile-content .ys-error-page__home:active {
    box-shadow:
        0 2px 5px rgba(0, 90, 43, 0.16);

    transform: translateY(4px);
}

/* ==========================================================
 * 404 モバイル
 * ========================================================== */

@media screen and (max-width: 767px) {

    body.yasashii-site-error .yasashii-mobile-content .ys-error-page {
        min-height: calc(100vh - 180px);

        padding-right: 22px;
        padding-left: 22px;
    }
}

@media screen and (max-width: 360px) {

    body.yasashii-site-error .yasashii-mobile-content .ys-error-page {
        padding-right: 16px;
        padding-left: 16px;
    }

    .yasashii-mobile-content .ys-error-page__code {
        font-size: 56px;
    }

    .yasashii-mobile-content .ys-error-page__title {
        font-size: 22px;
    }

    .yasashii-mobile-content .ys-error-page__home {
        font-size: 17px;
    }
}