BRAID AI Art Gallery

2025.06.03

/* =======================================
// Google Fonts – M PLUS Rounded 1c の読み込み
// ======================================= */
@import url(‘https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap’);

/* =======================================
// メインビジュアルオーバーレイカラーの不透明度設定
// ======================================= / .p-mainVisual__overlay { background-color: rgba(0, 0, 0, 0.4) !important; / 例: 黒の40%不透明度 */
}

/* =======================================
// ロゴ設定（見えやすさ、サイズ調整）
// ======================================= / / PCでのロゴのスタイル / .c-header__logo img { max-width: 200px !important; / PCでのロゴ画像の最大幅を設定 / height: auto !important; / 高さは自動調整 / margin-left: auto !important; / 中央揃え / margin-right: auto !important; / 中央揃え / display: block !important; / 中央揃え */
}

/* スマホでのロゴのスタイル (JavaScriptでsrcを切り替えるため、サイズ設定のみ) / @media screen and (max-width: 767px) { .c-header__logo img { max-width: 150px !important; / スマホでのロゴ画像の最大幅を設定 / height: auto !important; / 高さは自動調整 */
}
}

/* =======================================
// メインビジュアルのテキスト表示調整 & 視認性向上
// ======================================= */

/* PC表示時（768px以上）のテキスト調整 / / SWELLの提案に基づき、より詳細度を上げるセレクタを試行 / @media screen and (min-width: 768px) { / メインテキスト（タイトル） / / クラスを二重指定で詳細度を上げる / .p-mainVisual__slideTitle.p-mainVisual__slideTitle { font-family: ‘M PLUS Rounded 1c’, sans-serif !important; font-weight: 800 !important; / font-size: 40px !important; / / 必要であればコメントアウトを外して調整し、!importantを追加 / / line-height: 1.3 !important; / / 必要であればコメントアウトを外して調整し、!importantを追加 */
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
}

/* サブテキスト */
/* クラスを二重指定で詳細度を上げる */
.p-mainVisual__slideText.p-mainVisual__slideText {
    font-family: 'M PLUS Rounded 1c', sans-serif !important; 
    font-weight: 400 !important; 
    /* font-size: 18px !important; */ /* 必要であればコメントアウトを外して調整し、!importantを追加 */
    /* line-height: 1.6 !important; */ /* 必要であればコメントアウトを外して調整し、!importantを追加 */
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7) !important;
}

}

/* スマホ表示時（767px以下）のテキスト調整 – SWELLの提案に基づき詳細度を上げる / @media screen and (max-width: 767px) { / メインテキスト（タイトル） / / クラスを二重指定で詳細度を上げる / .p-mainVisual__slideTitle.p-mainVisual__slideTitle { font-family: ‘M PLUS Rounded 1c’, sans-serif !important; font-weight: 800 !important; font-size: 26px !important; / スマホでのフォントサイズ。この値を調整してください / line-height: 1.4 !important; / スマホでの行間。必要であれば調整 */
text-shadow: 2px 2px 6px rgba(0, 0, 0, 1) !important;
color: #ffffff !important;
}

/* サブテキスト */
/* クラスを二重指定で詳細度を上げる */
.p-mainVisual__slideText.p-mainVisual__slideText {
    font-family: 'M PLUS Rounded 1c', sans-serif !important; 
    font-weight: 400 !important; 
    font-size: 14px !important; /* スマホでのフォントサイズ。この値を調整してください */
    line-height: 1.6 !important; /* スマホでの行間。必要であれば調整 */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 1) !important;
    color: #f0f0f0 !important;
}

}

関連記事