@charset "utf-8";

/* ==================================================
   共通設定
================================================== */
.page-service .inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==================================================
   ##01: 黄色の帯タイトル (#F4B942)
================================================== */
.page-head {
    margin-top: 100px;
    padding: 50px 0;
    background-color: #FA8028;
    /* 黄色の帯 */
    text-align: center;
}

.page-head .ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.page-head .ttl .en {
    font-size: 2.8rem;
    letter-spacing: 0.08em;
}

.page-head .ttl .jp {
    font-size: 2.2rem;
    letter-spacing: 0.05em;
}

/* 縦に並べる（改行）ための設定 */
.page-head .ttl {
    display: flex !important;
    flex-direction: column !important;
    /* ここで縦並び（改行）に強制変更 */
    align-items: flex-start !important;
    /* 左寄せ */
    justify-content: center !important;
    gap: 8px !important;
    /* 上下の文字の隙間 */
    margin: 0 !important;
}

/* ABOUT：サイズ28px、色：#FFFFFF、不透明度：40% */
.page-head .ttl .en {
    font-size: 28px !important;
    color: #ffffff !important;
    opacity: 0.4 !important;
    /* 不透明度40% */
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
}

/* 私たちについて：サイズ42px、色：#FFFFFF */
.page-head .ttl .jp {
    font-size: 42px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
}

/* スマホ用サイズ調整 (767px以下) */
@media (max-width: 767px) {
    .page-head {
        margin-top: 70px !important;
        padding: 30px 0 !important;
    }

    .page-head .ttl .en {
        font-size: 18px !important;
    }

    .page-head .ttl .jp {
        font-size: 28px !important;
    }
}


/* ==================================================
   イントロダクション（ABOUTと画像・装飾を完全統一）
================================================== */
.sec-service-intro {
    padding: 80px 0;
}

.sec-service-intro .inner {
    max-width: 1000px !important;
    margin: 0 auto;
    padding: 0 20px;
}

.sec-service-intro .message-top-grid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 60px !important;
    text-align: left !important;
}

.sec-service-intro .message-left {
    flex: 1 !important;
    text-align: left !important;
    position: relative !important;
    /* SVG配置の基準 */
}

/* ★ 画像サイズと横長比率（4:3）の固定 */
.sec-service-intro .message-right {
    width: 100% !important;
    max-width: 380px !important;
    flex-shrink: 0 !important;
}

.sec-service-intro .message-right .img-box {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    /* ★ 1:1ではなく横長4:3で統一 */
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.sec-service-intro .message-right .img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* ★ 縦長写真でも綺麗に枠内トリミング */
    display: block !important;
}

/* テキストのスタイル */
.sec-service-intro .message-left .catch {
    font-size: 3.2rem !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
    color: #030303 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.sec-service-intro .message-left .txt-box p {
    font-size: 1.6rem !important;
    line-height: 2.2 !important;
    color: #030303 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

/* ==================================================
   SVG装飾（PC版）
================================================== */
.sec-service-intro .deco-svg {
    position: absolute !important;
    width: 61px !important;
    height: 61px !important;
    z-index: 1 !important;
}

.sec-service-intro .deco-svg svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.sec-service-intro .deco-top-right {
    top: -30px !important;
    right: 0 !important;
}

.sec-service-intro .deco-bottom-left {
    bottom: -40px !important;
    left: -60px !important;
}

/* ==================================================
   スマホ対応（767px以下：ABOUTと完全に同じ位置・サイズに調整）
================================================== */
@media (max-width: 767px) {
    .sec-service-intro {
        padding: 40px 0;
    }

    .sec-service-intro .message-top-grid {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .sec-service-intro .message-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sec-service-intro .message-left .catch {
        font-size: 2.2rem !important;
    }

    /* 右上SVG：サイズと位置をABOUTに統一 */
    .sec-service-intro .deco-top-right {
        top: -40px !important;
        right: 10px !important;
        width: 50px !important;
        height: 50px !important;
    }

    /* 左下SVG：画面外へ見切れないよう left: 0 に調整 */
    .sec-service-intro .deco-bottom-left {
        bottom: -20px !important;
        left: 0 !important;
        /* ★画面左端で見切れるのを防止 */
        width: 50px !important;
        height: 50px !important;
    }
}

/* ==================================================
   各テーマごとの背景色・メインカラー設定
================================================== */
.theme-ukiuki .label {
    background-color: #F4B942;
    color: #fff;
}

.theme-ukiuki .sub-title {
    color: #F4B942;
}

.theme-ukiuki .card-tag {
    background-color: #F4B942;
}

.theme-ukiuki .loc-img .dot {
    background-color: #F4B942;
}

.theme-ukiuki .loc-btn .icon {
    background-color: #F4B942;
}

.theme-ukiuki .loc-btn .txt {
    color: #F4B942;
}

.theme-house .label {
    background-color: #FA8028;
    color: #fff;
}

.theme-house .sub-title {
    color: #FA8028;
}

.theme-house .card-tag {
    background-color: #FA8028;
}

.theme-house .loc-img .dot {
    background-color: #FA8028;
}

.theme-house .loc-btn .icon {
    background-color: #FA8028;
}

.theme-house .loc-btn .txt {
    color: #FA8028;
}

.theme-eyecare .label {
    background-color: #1A365D;
    color: #fff;
}

.theme-eyecare .sub-title {
    color: #1A365D;
}

.theme-eyecare .card-tag {
    background-color: #1A365D;
}

.theme-eyecare .loc-img .dot {
    background-color: #1A365D;
}

.theme-eyecare .loc-btn .icon {
    background-color: #1A365D;
}

.theme-eyecare .loc-btn .txt {
    color: #1A365D;
}

/* ==================================================
   各セクション共通レイアウト
================================================== */
.sec-service-block {
    padding: 100px 0;
}

/* ==================================================
   ブロックヘッダー（テキスト＆画像エリア）
================================================== */
.sec-service-block .block-head {
    text-align: center !important;
    margin-bottom: 60px !important;
}

.block-head .label {
    display: inline-block;
    padding: 13px 12px;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 50px;
    letter-spacing: 0.05em;
    border-radius: 0 !important;
    /* ★追加: 角丸を消す */
}

.block-head-content {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    /* 中央に寄せる */
    gap: 70px !important;
    /* テキストと画像の間の隙間 */
    text-align: left !important;
    max-width: 900px !important;
    /* 広がりすぎないように幅を制限 */
    margin: 0 auto !important;
    /* ブロック全体を画面の中央に配置 */
}

.block-head-content .txt-box {
    flex: 1;
}

.block-head-content .catch {
    font-size: 2.8rem;
    line-height: 1.5;
    margin-bottom: 24px;
    font-weight: 700;
    color: #030303;
}

.block-head-content .desc {
    font-size: 1.6rem;
    line-height: 2.5;
    font-weight: 700;
    margin-top: 30px;
    letter-spacing: 0.2rem;
    color: #030303;
}

.block-head-content .img-box {
    width: 320px !important;
    /* ★変更: 画像幅を小さく固定 */
    flex-shrink: 0;
    border-radius: 0 !important;
    /* ★追加: 画像の角丸を消す */
    overflow: hidden;
}

.block-head-content .img-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* 白背景の詳細ボックス */
.sec-service-block .block-outer {
    background-color: #FFFFFF !important;
    border-radius: 40px !important;
    padding: 80px 60px !important;
    /* ほんのり影をつけて背景から浮かせる（不要なら消してOKです） */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03) !important;
}


.sub-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
}

.sub-head .sub-title {
    font-size: 2.6rem;
    font-weight: 700;
}

.sub-head .sub-label {
    font-size: 1.4rem;
    color: #888;
    letter-spacing: 0.1em;
}

.sub-box .sub-desc {
    font-size: 1.6rem;
    line-height: 2.3;
    font-weight: 500;
    color: #030303;
    margin-bottom: 30px;
}

/* カードレイアウト */
.card-flex {
    display: flex;
    justify-content: center;
    gap: 50px !important;
    /* ★ カード同士の隙間 */
    max-width: 860px !important;
    /* ★ 広がりすぎないよう全体の横幅を制限 */
    margin: 0 auto !important;
    /* ★ 中央に配置 */
}

.card-flex .card {
    flex: 1;
    text-align: left;
}

.card-img-wrap {
    position: relative;
    margin-bottom: 30px;
}

.card-img {
    width: 100%;
    border-radius: 0 !important;
    overflow: visible !important;
    /* ★ hiddenからvisibleに変更（切り取りを解除！） */
    background-color: transparent !important;
    /* ★ 背景色を透明にして馴染ませる */
}

.card-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.card-tag {
    position: absolute;
    bottom: 15px;
    /* 写真の下端をまたぐように配置 */
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 6px 55px;
    border-radius: 30px;
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-flex .card-txt {
    font-family: 'Noto Sans JP', sans-serif !important;
    /* フォントを指定 */
    font-size: 1.5rem;
    line-height: 1.7;
    color: #030303;
    font-weight: 500;
}

/* ==================================================
   内枠（詳細ボックス）の背景色と角丸の設定
================================================== */
.sec-service-block .sub-box {
    border-radius: 40px !important;
    padding: 80px 50px !important;
    text-align: center !important;
    margin-bottom: 80px !important;
    box-shadow: none !important;
}

/* 1. うきうきわくわくの内枠背景色 */
.theme-ukiuki .sub-box {
    background-color: #FDF7EA !important;
}

/* 2. うきわくハウスの内枠背景色 */
.theme-house .sub-box {
    background-color: #FCF0E8 !important;
}

/* 3. アイケアラボの内枠背景色 */
.theme-eyecare .sub-box {
    background-color: #E7EEF8 !important;
}

/* ==================================================
   MAPエリア（右側を丸くする特殊レイアウト）
================================================== */
.location-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.loc-img {
    width: 48%;
    flex-shrink: 0;
    /* ★CSSでの丸みや切り抜きは不要なので解除 */
    border-radius: 0 !important;
}

.loc-img img {
    width: 100%;
    height: auto;
    display: block;
    /* ★画像そのままを表示する */
    border-radius: 0 !important;
    object-fit: contain;
}

.loc-info {
    flex: 1;
}

.loc-info .loc-name {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #030303;
}

.loc-info .loc-address {
    font-size: 1.6rem;
    line-height: 1.8;
    font-weight: 700;
    color: #030303;
}

.loc-btn {
    flex-shrink: 0;
}

.loc-btn a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* 円形ボタン本体 */
.loc-btn .icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: opacity 0.3s ease;
}

/* ★追加：画像の矢印のサイズと動きの準備 */
.loc-btn .icon img {
    width: 20px;
    /* 矢印のサイズ（大きすぎたら数値を調整してください） */
    height: auto;
    transition: transform 0.3s ease;
    /* アニメーションを滑らかにする */
}

/* ★追加：ボタンホバー時に矢印が右に動く */
.loc-btn a:hover .icon img {
    transform: translateX(6px);
    /* 右に6pxスッと動く */
}

/* ボタンホバー時に円全体を少しだけ透かす */
.loc-btn a:hover .icon {
    opacity: 0.8;
}

/* 以前のCSSの三角形が残らないように非表示に */
.loc-btn .icon::after {
    display: none !important;
}

.loc-btn .txt {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* ★追加：ホバー時に矢印だけが右にスッと動く */
.loc-btn a:hover .icon::after {
    transform: rotate(45deg) translate(4px, -4px);
}

/* ==================================================
   スマホ対応 (767px以下)
================================================== */
@media (max-width: 767px) {
    .sec-service-block {
        padding: 30px 0;
    }

    .block-head .label {
        font-size: 1.4rem;
        padding: 6px 24px;
        margin-bottom: 30px;
    }

    .block-head-content {
        flex-direction: column;
        gap: 30px;
    }

    .block-head-content .img-box {
        width: 100% !important;
    }

    .block-head-content .catch {
        font-size: 2.2rem;
    }

    .sec-service-block .sub-box {
        padding: 40px 20px !important;
        border-radius: 24px !important;
    }

    .sub-head .sub-title {
        font-size: 2.2rem;
    }

    .card-flex {
        flex-direction: column;
        gap: 50px;
    }

    .location-box {
        flex-direction: column;
        gap: 20px;
        align-items: center;
        text-align: center;
    }

    .loc-img {
        width: 100%;
        margin-left: 0;
        border-radius: 0 !important;
        /* スマホでも丸みを解除 */
    }

    .loc-info .loc-name {
        font-size: 2.2rem;
    }

    .loc-btn {
        width: 100%;
        align-items: center;
    }
}

/* ==================================================
   バナーエリア（フッター上）
================================================== */
.sec-about-bnr {
    padding: 0 0 100px;
    background-color: #fcf8f5;
    /* スタッフ紹介の背景色と繋げる */
}

.sec-about-bnr .bnr-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1000px !important;
    /* 全体の最大幅 */
    margin: 0 auto;
    padding: 0 20px;
    list-style: none !important;
    /* ★追加: 箇条書きの「・」を消す */
}

.sec-about-bnr .bnr-item {
    width: 100% !important;
    max-width: none !important;
}

.sec-about-bnr .bnr-item a {
    display: block;
}

.sec-about-bnr .bnr-item img {
    width: 100% !important;
    height: auto !important;
    border-radius: 16px !important;
    /* 画像の角丸 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    transition: opacity 0.3s ease;
    display: block !important;
}

.sec-about-bnr .bnr-item a:hover img {
    opacity: 0.7;
}

/* スマホ対応 (767px以下) */
@media (max-width: 767px) {
    .sec-about-bnr {
        padding: 0 0 60px;
    }

    .sec-about-bnr .bnr-list {
        grid-template-columns: 1fr !important;
        /* 縦1列に変更 */
        gap: 20px !important;
        max-width: 420px !important;
    }

    /* ==================================================
   スマホ対応 (767px以下)
================================================== */
    @media (max-width: 767px) {
        .sec-service-block {
            padding: 30px 0;
        }

        /* 白背景ボックスの余白調整 */
        .sec-service-block .block-outer {
            padding: 30px 30px !important;
        }

        .block-head .label {
            font-size: 1.4rem;
            padding: 6px 24px;
            margin-bottom: 30px;
        }

        .block-head-content {
            flex-direction: column;
            gap: 30px !important;
            /* ← 前回の隙間30pxの修正もここに入っています */
        }

        .block-head-content .catch {
            font-size: 2.2rem;
        }

        /* ▼ 今回追加：スマホの時だけ行間を狭める ▼ */
        .block-head-content .desc {
            line-height: 2;
        }

        /* ▲ ここまで ▲ */

        .sec-service-block .sub-box {
            padding: 30px 20px !important;
            border-radius: 24px !important;
            margin-bottom: 50px !important;
        }

        /* ･･･（以下そのまま）･･･ */
        .sub-head {
            margin-bottom: 10px !important;
        }

        /* スマホの時だけ .sub-desc 内の <br> 改行を無効化 */
        .sub-desc br {
            display: none !important;
        }

        .loc-btn .icon {
            width: 55px !important;
            height: 55px !important;
        }

        .sub-box .sub-desc {
            line-height: 2 !important;
        }
    }
}

/* ←★ここでスマホ用の設定（@media）をしっかり閉じる！ */


/* ==================================================
   子ども未来教室 (theme-kids) のカラー設定（全デバイス共通）
================================================== */
/* ラベル（左上の帯） */
.theme-kids .label {
    background-color: #25cf8b !important;
    color: #fff !important;
}

/* サブタイトル */
.theme-kids .sub-title {
    color: #25cf8b !important;
}

/* 写真下のタグ */
.theme-kids .card-tag {
    background-color: #25cf8b !important;
    color: #fff !important;
}

/* マップのドット */
.theme-kids .loc-img .dot {
    background-color: #25cf8b !important;
}

/* マップボタンのアイコン背景 */
.theme-kids .loc-btn .icon {
    background-color: #25cf8b !important;
}

/* マップボタンの文字 */
.theme-kids .loc-btn .txt {
    color: #25cf8b !important;
}

/* 詳細ボックスの内枠の背景色（メインカラーに合わせた極薄いミントグリーン） */
.theme-kids .sub-box {
    background-color: #eafaf3 !important;
}

/* ==================================================
   カード画像のサイズと比率を全セクションで統一
================================================== */
.card-img img {
    width: 100% !important;
    height: 100% !important;
    /* ★ autoから変更 */
    aspect-ratio: 4 / 3 !important;
    /* ★ 横長(4:3)のサイズに固定 */
    object-fit: cover !important;
    /* ★ どんな画像でも歪まず綺麗に枠内に収める */
    display: block !important;
}


/* ==================================================
   SORA SOFT (theme-sorasoft) のカラー設定
================================================== */
.theme-sorasoft .label {
    background-color: #D36C44 !important;
    color: #fff !important;
}

.theme-sorasoft .sub-title {
    color: #D36C44 !important;
}

.theme-sorasoft .card-tag {
    background-color: #D36C44 !important;
    color: #fff !important;
}

.theme-sorasoft .loc-img .dot {
    background-color: #D36C44 !important;
}

.theme-sorasoft .loc-btn .icon {
    background-color: #D36C44 !important;
}

.theme-sorasoft .loc-btn .txt {
    color: #D36C44 !important;
}

/* 詳細ボックスの内枠の背景色（少し温かみのある白） */
.theme-sorasoft .sub-box {
    background-color: #FCF6F2 !important;
}

/* ==================================================
   アイプラス＋ (theme-eyeplus) のカラー設定
================================================== */
/* ラベル（左上の帯） */
.theme-eyeplus .label {
    background-color: #558BAE !important;
    color: #fff !important;
}

/* サブタイトル */
.theme-eyeplus .sub-title {
    color: #558BAE !important;
}

/* 写真下のタグ */
.theme-eyeplus .card-tag {
    background-color: #558BAE !important;
    color: #fff !important;
}

/* マップのドット */
.theme-eyeplus .loc-img .dot {
    background-color: #558BAE !important;
}

/* マップボタンのアイコン背景 */
.theme-eyeplus .loc-btn .icon {
    background-color: #558BAE !important;
}

/* マップボタンの文字 */
.theme-eyeplus .loc-btn .txt {
    color: #558BAE !important;
}

/* 詳細ボックスの内枠の背景色（ごく薄いブルー） */
.theme-eyeplus .sub-box {
    background-color: #EBF2F6 !important;
}

/* ==================================================
   アイプラス＋ ロゴ配置設定
================================================== */
/* 基準となる白枠に position: relative を設定 */
.theme-eyeplus .block-outer {
    position: relative !important;
}

/* ロゴの絶対配置（PC版） */
.theme-eyeplus .logo-deco {
    position: absolute !important;
    top: 40px !important;
    /* 白枠の上からの位置（適宜調整） */
    left: 40px !important;
    /* 白枠の左からの位置（適宜調整） */
    width: 140px !important;
    /* ロゴのサイズ（適宜調整） */
    z-index: 10 !important;
}

.theme-eyeplus .logo-deco img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* スマホ用（画面が狭いため、中央上部に配置） */
@media (max-width: 767px) {
    .theme-eyeplus .logo-deco {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 120px !important;
        margin: 0 auto 30px !important;
        /* 中央寄せ＆下の要素との余白 */
    }
}

/* ==================================================
   SORA SOFT オープン予定テキストの調整
================================================== */
/* ラベルの下の余白（50px）を一旦リセットしてテキストに近づける */
.theme-sorasoft .block-head .label {
    margin-bottom: 12px !important;
}

/* 追加したテキストのスタイルと、下の要素との余白 */
.theme-sorasoft .open-notice {
    font-size: 1.6rem;
    font-weight: 700;
    color: #D36C44;
    margin-bottom: 50px;
    letter-spacing: 0.1em;
}

/* スマホ用のサイズ調整 */
@media (max-width: 767px) {
    .theme-sorasoft .open-notice {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }
}