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

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

/* ====================================
   1. フォント設定 (Typography)
   ==================================== */

/* ベースフォント（全体）を Zen Kaku Gothic New に設定 */
body {
    font-family: 'Zen Kaku Gothic New', sans-serif !important;
    font-weight: 400;
}

/* 見出し（H1~H6, ウィジェットタイトル等）を Zen Old Mincho に設定 */
h1, h2, h3, h4, h5, h6,
.c-widget__title,
.p-mainVisual__slideTitle,
.p-mainVisual__title,
.p-sectionTitle__title {
    font-family: 'Zen Old Mincho', serif !important;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* 英語アクセント用クラス（エレガントな英語フォント） */
.font-eng {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 400;
}


/* ====================================
   2. メインビジュアル調整 (Main Visual)
   ==================================== */

/* --- 共通設定（テキストシャドウなど） --- */
/* bodyをつけて優先度を上げる */
body .p-mainVisual__slideTitle,
body .p-mainVisual__title {
    /* 背景色(#F9F7F5)と同じ色でふんわり発光させ、写真上での可読性をUP */
    text-shadow: 0 0 15px rgba(249, 247, 245, 0.9) !important;
}

/* --- 【スマホ】画面幅 959px以下での表示設定 --- */
@media screen and (max-width: 959px) {
    /* メインタイトル */
    body .p-mainVisual__slideTitle,
    body .p-mainVisual__title {
        /* スマホで見やすいサイズ（大きすぎると改行されすぎるため32px〜40px推奨） */
        font-size: 28px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
        width: 90%; /* 画面端ギリギリにならないように */
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- 【PC】画面幅 960px以上での表示設定 --- */
@media screen and (min-width: 960px) {
    /* メインタイトル */
    body .p-mainVisual__slideTitle,
    body .p-mainVisual__title {
        font-size: 56px !important;      /* PCでは優雅に大きく */
        line-height: 1.4 !important;
    }
}

/* ====================================
   3. デザイン装飾用ユーティリティ (Utility)
   使用方法: ブロックの「追加CSSクラス」に入力
   ==================================== */

/* 画像の角をデザイン的に丸める（Conceptセクション等） */
/* 左上と右下を大きく丸める */
.u-radius-diagonal {
    border-radius: 80px 20px 80px 20px !important;
}
/* 逆方向：右上と左下を大きく丸める */
.u-radius-diagonal-r {
    border-radius: 20px 80px 20px 80px !important;
}

/* シンプルに角を丸める（画像ブロック等） */
.u-radius-md {
    border-radius: 12px !important;
}