/**
 * TOPページ固有のスタイル（p-）
 * BEM設計方針：すべての値は変数を使用
 */

/* ========================================
   Heroセクション
   ======================================== */
.p-front__hero {
    /* Heroセクション */
    padding: var(--spacing-6) 0 var(--spacing-8) 0;
    background-color: var(--color-background-light);
    margin-top: 0;
}

.p-front-hero__inner {
    /* Hero内部コンテナ */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-6);
    position: relative;
}

.p-front-hero__content {
    /* Heroコンテンツ */
    flex: 1;
    z-index: 2;
}

.p-front-hero__main-title {
    /* Heroメインタイトル */
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xxxl);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-3);
    line-height: var(--line-height-tight);
}

.p-front-hero__subtitle {
    /* Heroサブタイトル */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-large);
    color: var(--color-text);
    margin-bottom: var(--spacing-6);
    line-height: var(--line-height-base);
}

.p-front-hero__representative {
    /* Hero代表者紹介 */
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
}

.p-front-hero__representative-image {
    /* Hero代表者画像 */
    flex-shrink: 0;
}

.p-front-hero__representative-img {
    /* Hero代表者画像要素 */
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.p-front-hero__representative-placeholder {
    /* Hero代表者画像プレースホルダー */
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: var(--color-background-dark);
}

.p-front-hero__representative-content {
    /* Hero代表者コンテンツ */
    flex: 1;
}

.p-front-hero__representative-title {
    /* Hero代表者タイトル */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-3);
    line-height: var(--line-height-tight);
}

.p-front-hero__representative-text {
    /* Hero代表者テキスト */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-base);
}

.p-front-hero__visual {
    /* Heroビジュアルエリア */
    position: relative;
    flex: 0 0 40%;
    z-index: 1;
}

.p-front-hero__accent-circle {
    /* Heroアクセント円 */
    position: absolute;
    top: -50px;
    right: -50px;
    width: 480px;
    height: 480px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: 0;
}

.p-front-hero__img {
    /* Hero画像要素 */
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 2px solid var(--color-accent);
}

/* ========================================
   Visionセクション
   ======================================== */
.p-front__vision {
    /* Visionセクション */
    padding: var(--spacing-8) 0;
    background-color: var(--color-background);
}

.p-front-vision__inner {
    /* Vision内部コンテナ */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.p-front-vision__content {
    /* Visionコンテンツ */
    flex: 1;
}

.p-front-vision__title {
    /* Visionタイトル */
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xxxl);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-tight);
}

.p-front-vision__message {
    /* Visionメッセージ */
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xl);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-tight);
}

.p-front-vision__description {
    /* Vision説明文 */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-base);
}

.p-front-vision__image-area {
    /* Vision画像エリア */
    flex: 0 0 40%;
    position: relative;
    z-index: 1;
}

.p-front-vision__image {
    /* Vision画像 */
    position: relative;
    z-index: 2;
}

.p-front-vision__img {
    /* Vision画像要素 */
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 2px solid var(--color-accent);
}

.p-front-vision__image-placeholder {
    /* Vision画像プレースホルダー */
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--color-background-dark);
    border-radius: 8px;
}

.p-front-vision__accent-circle {
    /* Visionアクセント円 */
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: 1;
}

/* ========================================
   Missionセクション
   ======================================== */
.p-front__mission {
    /* Missionセクション */
    padding: var(--spacing-8) 0;
    background-color: var(--color-background-light);
}

.p-front-mission__inner {
    /* Mission内部コンテナ */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
    position: relative;
}

.p-front-mission__image-area {
    /* Mission画像エリア */
    flex: 0 0 40%;
    position: relative;
    z-index: 1;
}

.p-front-mission__image {
    /* Mission画像 */
    position: relative;
    z-index: 2;
}

.p-front-mission__img {
    /* Mission画像要素 */
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 2px solid var(--color-accent);
}

.p-front-mission__image-placeholder {
    /* Mission画像プレースホルダー */
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--color-background-dark);
    border-radius: 8px;
}

.p-front-mission__content {
    /* Missionコンテンツ */
    flex: 1;
    position: relative;
    z-index: 3;
}

.p-front-mission__accent-circle {
    /* Missionアクセント円 */
    position: absolute;
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: 1;
}

.p-front-mission__title {
    /* Missionタイトル */
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xxxl);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-tight);
}

.p-front-mission__message {
    /* Missionメッセージ */
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xl);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-tight);
}

.p-front-mission__description {
    /* Mission説明文 */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-base);
}

/* ========================================
   Valuesセクション
   ======================================== */
.p-front__values {
    /* Valuesセクション */
    padding: var(--spacing-8) 0;
    background-color: var(--color-background);
}

.p-front-values__inner {
    /* Values内部コンテナ */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-6);
    position: relative;
}

.p-front-values__content {
    /* Valuesコンテンツ */
    flex: 1;
}

.p-front-values__title {
    /* Valuesタイトル */
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xxxl);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-3);
    line-height: var(--line-height-tight);
}

.p-front-values__subtitle {
    /* Valuesサブタイトル */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-large);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-5);
}

.p-front-values__list {
    /* Valuesリスト */
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-front-values__item {
    /* Valuesアイテム */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-3);
    padding-left: var(--spacing-3);
    position: relative;
}

.p-front-values__item::before {
    /* Valuesアイテムのマーカー */
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-size: var(--font-size-large);
}

.p-front-values__item-title {
    /* Valuesアイテムタイトル */
    font-weight: var(--font-weight-bold);
}

.p-front-values__item-separator {
    /* Valuesアイテム区切り */
    margin: 0 var(--spacing-1);
}

.p-front-values__item-description {
    /* Valuesアイテム説明 */
    font-weight: var(--font-weight-normal);
}

.p-front-values__image-area {
    /* Values画像エリア */
    flex: 0 0 40%;
    position: relative;
    z-index: 1;
}

.p-front-values__accent-circle {
    /* Valuesアクセント円 */
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background-color: var(--color-accent);
    border-radius: 50%;
    z-index: 0;
}

.p-front-values__image {
    /* Values画像 */
    position: relative;
    z-index: 1;
}

.p-front-values__img {
    /* Values画像要素 */
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    border: 2px solid var(--color-accent);
}

.p-front-values__image-placeholder {
    /* Values画像プレースホルダー */
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--color-background-dark);
    border-radius: 8px;
}

/* ========================================
   中間メッセージセクション
   ======================================== */
.p-front__message {
    /* メッセージセクション */
    padding: var(--spacing-6) 0;
    background-color: var(--color-background-dark);
}

.p-front-message__inner {
    /* メッセージ内部コンテナ */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    text-align: center;
}

.p-front-message__text {
    /* メッセージテキスト */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-large);
    color: var(--color-text);
    line-height: var(--line-height-base);
    margin: 0;
}

/* ========================================
   会社概要セクション
   ======================================== */
.p-front__company {
    /* 会社概要セクション */
    padding: var(--spacing-8) 0;
    background-color: var(--color-background);
}

.p-front-company__inner {
    /* 会社概要内部コンテナ */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.p-front-company__title {
    /* 会社概要タイトル */
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xxxl);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-6);
    line-height: var(--line-height-tight);
    text-align: center;
}

.p-front-company__businesses {
    /* 事業内容グリッド */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.p-front-company__business-item {
    /* 事業内容アイテム */
    background-color: var(--color-background-dark);
    padding: var(--spacing-5);
    border-radius: 4px;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-front-company__business-text {
    /* 事業内容テキスト */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    text-align: center;
    margin: 0;
}

.p-front-company__details {
    /* 会社詳細リスト */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-3) var(--spacing-5);
    margin: 0;
}

.p-front-company__detail-label {
    /* 会社詳細ラベル */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.p-front-company__detail-value {
    /* 会社詳細値 */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-weight: var(--font-weight-normal);
    margin: 0;
}

/* ========================================
   Blogセクション
   ======================================== */
.p-front__blog {
    /* Blogセクション */
    padding: var(--spacing-8) 0;
    background-color: var(--color-background-light);
}

.p-front-blog__inner {
    /* Blog内部コンテナ */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.p-front-blog__header {
    /* Blogヘッダー */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-5);
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.p-front-blog__title {
    /* Blogタイトル */
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xxxl);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin: 0;
    line-height: var(--line-height-tight);
}

.p-front-blog__nav {
    /* Blogナビゲーション */
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.p-front-blog__nav-prev,
.p-front-blog__nav-next {
    /* Blogナビゲーションボタン */
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-text-lighter);
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-size-xl);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.p-front-blog__nav-prev:hover,
.p-front-blog__nav-next:hover {
    /* Blogナビゲーションボタンホバー */
    border-color: var(--color-main);
    background-color: var(--color-main);
    color: var(--color-text-inverse);
}

.p-front-blog__more {
    /* Blogもっとみるボタン */
    margin-left: var(--spacing-2);
}

.p-front-blog__list {
    /* Blogリスト */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-front-blog__item {
    /* Blogアイテム */
    margin: 0;
}

.p-front-blog__article {
    /* Blog記事 */
    height: 100%;
}

.p-front-blog__link {
    /* Blogリンク */
    display: block;
    text-decoration: none;
    background-color: var(--color-background);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.p-front-blog__link:hover {
    /* Blogリンクホバー */
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.p-front-blog__image {
    /* Blog画像 */
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-background-dark);
}

.p-front-blog__img {
    /* Blog画像要素 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-front-blog__image-placeholder {
    /* Blog画像プレースホルダー */
    width: 100%;
    height: 100%;
    background-color: var(--color-background-dark);
}

.p-front-blog__item-title {
    /* Blogアイテムタイトル */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    margin: 0;
    padding: var(--spacing-3);
    line-height: var(--line-height-tight);
}

.p-front-blog__empty {
    /* Blog空メッセージ */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    text-align: center;
    padding: var(--spacing-6) 0;
    margin: 0;
}

/* ========================================
   Newsセクション
   ======================================== */
.p-front__news {
    /* Newsセクション */
    padding: var(--spacing-8) 0;
    background-color: var(--color-background);
}

.p-front-news__inner {
    /* News内部コンテナ */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.p-front-news__header {
    /* Newsヘッダー */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-5);
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.p-front-news__title {
    /* Newsタイトル */
    font-family: var(--font-family-serif);
    font-size: var(--font-size-xxxl);
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin: 0;
    line-height: var(--line-height-tight);
}

.p-front-news__nav {
    /* Newsナビゲーション */
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.p-front-news__nav-prev,
.p-front-news__nav-next {
    /* Newsナビゲーションボタン */
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-text-lighter);
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-size-xl);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.p-front-news__nav-prev:hover,
.p-front-news__nav-next:hover {
    /* Newsナビゲーションボタンホバー */
    border-color: var(--color-main);
    background-color: var(--color-main);
    color: var(--color-text-inverse);
}

.p-front-news__more {
    /* Newsもっとみるボタン */
    margin-left: var(--spacing-2);
}

.p-front-news__list {
    /* Newsリスト */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.p-front-news__item {
    /* Newsアイテム */
    margin: 0;
}

.p-front-news__article {
    /* News記事 */
    height: 100%;
}

.p-front-news__link {
    /* Newsリンク */
    display: block;
    text-decoration: none;
    background-color: var(--color-background-light);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.p-front-news__link:hover {
    /* Newsリンクホバー */
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.p-front-news__image {
    /* News画像 */
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-background-dark);
}

.p-front-news__img {
    /* News画像要素 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-front-news__item-placeholder {
    /* News画像プレースホルダー */
    width: 100%;
    height: 100%;
    background-color: var(--color-background-dark);
}

.p-front-news__item-title {
    /* Newsアイテムタイトル */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    margin: 0;
    padding: var(--spacing-3);
    line-height: var(--line-height-tight);
}

.p-front-news__empty {
    /* News空メッセージ */
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    text-align: center;
    padding: var(--spacing-6) 0;
    margin: 0;
}

/* ========================================
   モバイル対応
   ======================================== */
@media (max-width: 768px) {
    .p-front-hero__inner,
    .p-front-vision__inner,
    .p-front-mission__inner,
    .p-front-values__inner {
        /* モバイル時は縦並び */
        flex-direction: column;
    }

    .p-front-hero__visual,
    .p-front-vision__image-area,
    .p-front-mission__image-area,
    .p-front-values__image-area {
        /* モバイル時の画像エリア */
        flex: 1 1 100%;
        width: 100%;
    }

    .p-front-mission__content {
        /* モバイル時：Missionコンテンツを上に表示 */
        order: -1;
    }

    .p-front-mission__image-area {
        /* モバイル時：Mission画像エリアを下に表示 */
        order: 1;
    }

    .p-front-hero__accent-circle {
        /* モバイル時のHeroアクセント円を小さく */
        width: 200px;
        height: 200px;
        top: -50px;
    }

    .p-front-vision__accent-circle {
        /* モバイル時：Visionアクセント円のサイズは変更せず、contentより背後に配置 */
        z-index: 0;
    }

    .p-front-vision__content {
        /* モバイル時：Visionコンテンツをaccent-circleより前面に */
        z-index: 2;
        position: relative;
    }

    .p-front-mission__accent-circle {
        /* モバイル時：Missionアクセント円のサイズは変更せず、contentより背後に配置 */
        z-index: 0;
    }

    .p-front-mission__content {
        /* モバイル時：Missionコンテンツをaccent-circleより前面に */
        z-index: 2;
        position: relative;
    }

    .p-front-values__accent-circle {
        /* モバイル時：Valuesアクセント円のサイズは変更せず、contentより背後に配置 */
        z-index: 0;
    }

    .p-front-values__content {
        /* モバイル時：Valuesコンテンツをaccent-circleより前面に */
        z-index: 2;
        position: relative;
    }

    .p-front-hero__main-title,
    .p-front-vision__title,
    .p-front-mission__title,
    .p-front-values__title,
    .p-front-company__title,
    .p-front-blog__title,
    .p-front-news__title {
        /* モバイル時のタイトルサイズ */
        font-size: var(--font-size-xxl);
    }

    .p-front-company__businesses {
        /* モバイル時の事業内容グリッド */
        grid-template-columns: 1fr;
    }

    .p-front-company__details {
        /* モバイル時の会社詳細グリッド */
        grid-template-columns: 1fr;
    }

    .p-front-blog__list,
    .p-front-news__list {
        /* モバイル時のリスト */
        grid-template-columns: 1fr;
    }

    .p-front-blog__header,
    .p-front-news__header {
        /* モバイル時のヘッダー */
        flex-direction: column;
        align-items: flex-start;
    }
}