/*
Theme Name: LP Base Styles
Description: ベーススタイル（HTMLタグ設定、レイアウトシステム、ユーティリティクラス）
Note: variables.css と normalize.css が先に読み込まれている前提
*/

/* ===================================================================
 * HTML基本設定
 * =================================================================== */

h1.lp-header__logo {
    display: none !important;
}

html {
    font-size: var(--font-size-base);
    font-family: var(--font-family-line-seed);
    color: var(--color-black);
    background-color: var(--color-white);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

header,
main,
footer {
    max-width: var(--content-max-width);
    margin: 0 auto;
}

p {
    margin: 0 0 1rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    overflow-wrap: break-word;
    word-break: normal;
}

/* ===================================================================
 * タイポグラフィ基本設定
 * =================================================================== */

/* 見出しシステム（階層的スケール） */
h1,
.h1 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0 0 1.5rem;
    clear: both;
    font-weight: var(--font-weight-bold);
}

h2,
.h2 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin: 2rem 0 1rem;
    clear: both;
    font-weight: var(--font-weight-bold);
}

h3,
.h3 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
    margin: 1.5rem 0 0.75rem;
    font-weight: var(--font-weight-bold);
}

h4,
.h4 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    margin: 1.25rem 0 0.5rem;
    font-weight: var(--font-weight-bold);
}

h5,
.h5 {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    margin: 1rem 0 0.5rem;
    font-weight: var(--font-weight-bold);
}

h6,
.h6 {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    margin: 1rem 0 0.5rem;
    font-weight: var(--font-weight-bold);
}

/* サイドバー専用見出し */
#side h2,
#side .h2,
#side h3,
#side .h3 {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    margin: 0.5rem 0 0;
}

p {
    margin: 0;
}

a {
    color: var(--color-text-link);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ===================================================================
 * レイアウトシステム - コンテナ
 * =================================================================== */

.l-container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--space-4xl) var(--container-padding);
}

.l-container--full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.padding-space-lg-y {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

/* ===================================================================
 * レイアウトシステム - Flexbox
 * =================================================================== */

.l-flex {
    display: flex;
}

.l-flex--inline {
    display: inline-flex;
}

/* 方向 */
.l-flex--row {
    flex-direction: row;
}

.l-flex--row-reverse {
    flex-direction: row-reverse;
}

.l-flex--column {
    flex-direction: column;
}

.l-flex--column-reverse {
    flex-direction: column-reverse;
}

/* 折り返し */
.l-flex--wrap {
    flex-wrap: wrap;
}

.l-flex--nowrap {
    flex-wrap: nowrap;
}

/* 水平方向の配置 */
.l-flex--justify-start {
    justify-content: flex-start;
}

.l-flex--justify-end {
    justify-content: flex-end;
}

.l-flex--justify-center {
    justify-content: center;
}

.l-flex--justify-between {
    justify-content: space-between;
}

.l-flex--justify-around {
    justify-content: space-around;
}

.l-flex--justify-evenly {
    justify-content: space-evenly;
}

/* 垂直方向の配置 */
.l-flex--align-start {
    align-items: flex-start;
}

.l-flex--align-end {
    align-items: flex-end;
}

.l-flex--align-center {
    align-items: center;
}

.l-flex--align-baseline {
    align-items: baseline;
}

.l-flex--align-stretch {
    align-items: stretch;
}

/* 中央配置（水平・垂直） */
.l-flex--center {
    justify-content: center;
    align-items: center;
}

/* ギャップ */
.l-flex--gap-xs {
    gap: var(--space-xs);
}

.l-flex--gap-sm {
    gap: var(--space-sm);
}

.l-flex--gap-md {
    gap: var(--space-md);
}

.l-flex--gap-lg {
    gap: var(--space-lg);
}

.l-flex--gap-xl {
    gap: var(--space-xl);
}

/* ===================================================================
 * レイアウトシステム - Grid
 * =================================================================== */

.l-grid {
    display: grid;
    gap: var(--space-md);
}

/* カラム数指定 */
.l-grid--cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.l-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.l-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.l-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.l-grid--cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.l-grid--cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* ギャップ */
.l-grid--gap-sm {
    gap: var(--space-sm);
}

.l-grid--gap-md {
    gap: var(--space-md);
}

.l-grid--gap-lg {
    gap: var(--space-lg);
}

.l-grid--gap-xl {
    gap: var(--space-xl);
}

/* ===================================================================
 * ユーティリティクラス - テキスト配置
 * =================================================================== */

.u-text-left {
    text-align: left;
}

.u-text-center {
    text-align: center;
}

.u-text-right {
    text-align: right;
}

.u-text-justify {
    text-align: justify;
}

/* ===================================================================
 * ユーティリティクラス - フォントサイズ
 * =================================================================== */

.u-font-size-xs {
    font-size: var(--font-size-xs);
}

.u-font-size-sm {
    font-size: var(--font-size-sm);
}

.u-font-size-base {
    font-size: var(--font-size-base);
}

.u-font-size-md {
    font-size: var(--font-size-md);
}

.u-font-size-lg {
    font-size: var(--font-size-lg);
}

.u-font-size-xl {
    font-size: var(--font-size-xl);
}

.u-font-size-2xl {
    font-size: var(--font-size-2xl);
}

.u-font-size-3xl {
    font-size: var(--font-size-3xl);
}

/* ===================================================================
 * ユーティリティクラス - フォントウェイト
 * =================================================================== */

.u-font-weight-light {
    font-weight: var(--font-weight-light);
}

.u-font-weight-normal {
    font-weight: var(--font-weight-normal);
}

.u-font-weight-medium {
    font-weight: var(--font-weight-medium);
}

.u-font-weight-semibold {
    font-weight: var(--font-weight-semibold);
}

.u-font-weight-bold {
    font-weight: var(--font-weight-bold);
}

/* ===================================================================
 * ユーティリティクラス - フォントファミリー
 * =================================================================== */

.u-font-en {
    font-family: var(--font-family-lora);
}

/* ===================================================================
 * ユーティリティクラス - テキスト装飾
 * =================================================================== */

.u-text-highlight {
    background: linear-gradient(transparent 60%, #FFFC9D 60%);
}

/* ===================================================================
 * ユーティリティクラス - マージン
 * =================================================================== */

/* マージン全方向 */
.u-m-0 {
    margin: 0;
}

.u-m-xs {
    margin: var(--space-xs);
}

.u-m-sm {
    margin: var(--space-sm);
}

.u-m-md {
    margin: var(--space-md);
}

.u-m-lg {
    margin: var(--space-lg);
}

.u-m-xl {
    margin: var(--space-xl);
}

.u-m-2xl {
    margin: var(--space-2xl);
}

.u-m-3xl {
    margin: var(--space-3xl);
}

/* マージン上 */
.u-mt-0 {
    margin-top: 0;
}

.u-mt-xs {
    margin-top: var(--space-xs);
}

.u-mt-sm {
    margin-top: var(--space-sm);
}

.u-mt-md {
    margin-top: var(--space-md);
}

.u-mt-lg {
    margin-top: var(--space-lg);
}

.u-mt-xl {
    margin-top: var(--space-xl);
}

.u-mt-2xl {
    margin-top: var(--space-2xl);
}

.u-mt-3xl {
    margin-top: var(--space-3xl);
}

/* マージン右 */
.u-mr-0 {
    margin-right: 0;
}

.u-mr-xs {
    margin-right: var(--space-xs);
}

.u-mr-sm {
    margin-right: var(--space-sm);
}

.u-mr-md {
    margin-right: var(--space-md);
}

.u-mr-lg {
    margin-right: var(--space-lg);
}

.u-mr-xl {
    margin-right: var(--space-xl);
}

/* マージン下 */
.u-mb-0 {
    margin-bottom: 0;
}

.u-mb-xs {
    margin-bottom: var(--space-xs);
}

.u-mb-sm {
    margin-bottom: var(--space-sm);
}

.u-mb-md {
    margin-bottom: var(--space-md);
}

.u-mb-lg {
    margin-bottom: var(--space-lg);
}

.u-mb-xl {
    margin-bottom: var(--space-xl);
}

.u-mb-2xl {
    margin-bottom: var(--space-2xl);
}

.u-mb-3xl {
    margin-bottom: var(--space-3xl);
}

/* マージン左 */
.u-ml-0 {
    margin-left: 0;
}

.u-ml-xs {
    margin-left: var(--space-xs);
}

.u-ml-sm {
    margin-left: var(--space-sm);
}

.u-ml-md {
    margin-left: var(--space-md);
}

.u-ml-lg {
    margin-left: var(--space-lg);
}

.u-ml-xl {
    margin-left: var(--space-xl);
}

/* マージン自動（センタリング） */
.u-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* ===================================================================
 * ユーティリティクラス - パディング
 * =================================================================== */

/* パディング全方向 */
.u-p-0 {
    padding: 0;
}

.u-p-xs {
    padding: var(--space-xs);
}

.u-p-sm {
    padding: var(--space-sm);
}

.u-p-md {
    padding: var(--space-md);
}

.u-p-lg {
    padding: var(--space-lg);
}

.u-p-xl {
    padding: var(--space-xl);
}

.u-p-2xl {
    padding: var(--space-2xl);
}

.u-p-3xl {
    padding: var(--space-3xl);
}

/* パディング上 */
.u-pt-0 {
    padding-top: 0;
}

.u-pt-xs {
    padding-top: var(--space-xs);
}

.u-pt-sm {
    padding-top: var(--space-sm);
}

.u-pt-md {
    padding-top: var(--space-md);
}

.u-pt-lg {
    padding-top: var(--space-lg);
}

.u-pt-xl {
    padding-top: var(--space-xl);
}

.u-pt-2xl {
    padding-top: var(--space-2xl);
}

.u-pt-3xl {
    padding-top: var(--space-3xl);
}

/* パディング右 */
.u-pr-0 {
    padding-right: 0;
}

.u-pr-xs {
    padding-right: var(--space-xs);
}

.u-pr-sm {
    padding-right: var(--space-sm);
}

.u-pr-md {
    padding-right: var(--space-md);
}

.u-pr-lg {
    padding-right: var(--space-lg);
}

.u-pr-xl {
    padding-right: var(--space-xl);
}

/* パディング下 */
.u-pb-0 {
    padding-bottom: 0;
}

.u-pb-xs {
    padding-bottom: var(--space-xs);
}

.u-pb-sm {
    padding-bottom: var(--space-sm);
}

.u-pb-md {
    padding-bottom: var(--space-md);
}

.u-pb-lg {
    padding-bottom: var(--space-lg);
}

.u-pb-xl {
    padding-bottom: var(--space-xl);
}

.u-pb-2xl {
    padding-bottom: var(--space-2xl);
}

.u-pb-3xl {
    padding-bottom: var(--space-3xl);
}

/* パディング左 */
.u-pl-0 {
    padding-left: 0;
}

.u-pl-xs {
    padding-left: var(--space-xs);
}

.u-pl-sm {
    padding-left: var(--space-sm);
}

.u-pl-md {
    padding-left: var(--space-md);
}

.u-pl-lg {
    padding-left: var(--space-lg);
}

.u-pl-xl {
    padding-left: var(--space-xl);
}

/* ===================================================================
 * ユーティリティクラス - 表示・非表示
 * =================================================================== */

.u-hidden {
    display: none !important;
}

.u-visible {
    display: block !important;
}

.u-invisible {
    visibility: hidden;
}

/* ===================================================================
 * ユーティリティクラス - その他
 * =================================================================== */

.u-overflow-hidden {
    overflow: hidden;
}

.u-position-relative {
    position: relative;
}

.u-position-absolute {
    position: absolute;
}

.u-w-full {
    width: 100%;
}

.u-h-full {
    height: 100%;
}

.u-object-cover {
    object-fit: cover;
}

.u-object-contain {
    object-fit: contain;
}

.u-rounded {
    border-radius: var(--border-radius-base);
}

.u-rounded-full {
    border-radius: var(--border-radius-full);
}

.u-shadow {
    box-shadow: var(--shadow-base);
}

.u-shadow-lg {
    box-shadow: var(--shadow-lg);
}

/* ===================================================================
 10. レスポンシブ調整（大画面対応）
 ===================================================================*/

/* 大画面でのベースサイズ調整 */
@media (min-width: 1441px) {
    :root {
        --font-base: 1.125rem;
        /* 15.75px */
        --font-md: 1.313rem;
        /* 18.38px */
    }
}

/* 高解像度ディスプレイ対応 */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ===================================================================
 11. パフォーマンス最適化
 ===================================================================*/

/* Above-the-fold最適化 */
.critical-fonts {
    font-family: var(--font-family-base);
    font-display: swap;
}

/* Critical CSSでの読み込み優先度 */
.font-critical {
    font-family: var(--font-family-base);
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
}