@charset "UTF-8";

/* =========================================
    Reset & Base Styles
========================================= */
html {
    scroll-behavior: smooth;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    background-color: #fff;
    line-height: 1.6;
    letter-spacing: 0.5px;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    text-decoration: none;
    color: inherit;
}
ul {
    list-style: none;
}

/* =========================================
    Variables (Colors)
========================================= */
:root {
    --primary-pink: #eb5e9a;
    --bg-pink: #ea6da4;       /* 全体のピンク背景 */
    --bg-pink-light: #f38ebc; /* 光のグラデーション用 */
    --light-pink: #fdf0f5;
    --text-dark: #333;
    --text-gray: #666;
    --border-color: #ddd;
}

/* =========================================
    Header
========================================= */
header {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
}
.header-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
}
.logo a {
    display: inline-block;
    transition: opacity 0.3s;
}
.logo a:hover {
    opacity: 0.7;
}
/* 【修正】ロゴのサイズを二回り大きく（30px → 55px付近） */
.logo img {
    height: 55px;
    width: auto;
}

/* =========================================
    Hero Section
========================================= */
.hero {
    background-color: var(--bg-pink);
    padding: 0 20px 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-image-wrapper {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.hero-image-wrapper img {
    width: 100%;
    height: auto;
}

/* =========================================
    Latest / New Section
========================================= */
.latest-section {
    background-color: var(--bg-pink);
    padding: 20px 20px 60px;
}
.section-container {
    max-width: 960px;
    margin: 0 auto;
}

.latest-header-wrapper {
    text-align: left;
    margin-bottom: 5px;
}
.latest-header-wrapper img {
    display: inline-block;
    width: 200px;
    height: auto;
}

.latest-card {
    background: #fff;
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #792148;
}
.card-content {
    display: flex;
    gap: 25px;
}

/* 左：画像コラージュエリア */
.card-images {
    flex: 1.2;
}
.card-images a {
    display: block;
    transition: opacity 0.3s ease;
}
.card-images a:hover {
    opacity: 0.8;
}
.card-images img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* 右：動画＆情報エリア */
.card-info {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* クリックで再生される動画エリアのスタイル */
.sample-movie-video {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    cursor: pointer;
    /* 【修正】フィルターではなく透明度のアニメーションに変更 */
    transition: opacity 0.3s ease;
}

/* 【修正】画像コラージュと同じ透明度（opacity: 0.8）の透かし効果に変更 */
.sample-movie-video:not([controls]):hover {
    opacity: 0.8;
}

/* 情報テーブル */
.info-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 15px;
    margin-top: 5px;
}
.info-row {
    display: flex;
    align-items: center;
    font-size: 12px;
}
.info-label {
    background: var(--primary-pink);
    color: #fff;
    padding: 2px 0;
    width: 80px;
    text-align: center;
    display: inline-block;
    border-radius: 20px;
    font-size: 13px;
    white-space: nowrap;
    margin-right: 10px;
}
.info-value {
    color: #555;
    font-weight: bold;
}

/* 最新作：説明文のグラデーション */
.card-description {
    background: linear-gradient(to right, #f2bad1, #fbd9c2);
    padding: 15px 20px;
    font-size: 12px;
    color: #444;
    margin-top: 20px;
    line-height: 1.8;
    border-radius: 6px;
}

/* =========================================
    Works Section
========================================= */
.works-section {
    padding: 50px 20px 80px;
    background-color: #fff;
    background-image: radial-gradient(#f8cadd 1.5px, transparent 1.5px);
    background-size: 20px 20px;
}

.works-title-wrapper {
    text-align: left;
    margin-bottom: 30px;
}
.works-title-wrapper img {
    display: inline-block;
    width: 270px;
    height: auto;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.work-item {
    background: transparent;
    display: flex;
    flex-direction: column;
}

/* 作品画像エリア */
.work-img-wrapper {
    border-bottom: 2px solid var(--primary-pink);
}
.work-img-wrapper a {
    display: block;
    transition: opacity 0.3s ease;
}
.work-img-wrapper a:hover {
    opacity: 0.8;
}
.work-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* 作品一覧：テキストエリアのグラデーション */
.work-details {
    background: linear-gradient(to right, #eed2e3, #fbe0c9);
    padding: 15px;
    flex-grow: 1;
}
.work-title {
    font-size: 12px;
    color: var(--text-dark);
    font-weight: bold;
    line-height: 1.4;
}

/* =========================================
    Footer
========================================= */
footer {
    font-size: 12px;
    color: var(--text-gray);
    background-color: #fff;
    border-top: 1px solid var(--border-color);
}
.footer-bottom {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}
.footer-logo a {
    display: inline-block;
    transition: opacity 0.3s;
}
.footer-logo a:hover {
    opacity: 0.7;
}
/* 【修正】フッターロゴも二回り大きく（30px → 55px付近） */
.footer-logo img {
    height: 55px;
    width: auto;
    margin: 0 auto 15px;
}
.p-footer__info__text {
    font-size: 12px;
    margin-bottom: 15px;
}
.copyright {
    font-size: 10px;
    color: #999;
}

/* =========================================
    Page Top Button
========================================= */
.page-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #f990bd;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    transition: opacity 0.3s, transform 0.3s;
}
.page-top-btn::before {
    content: '';
    width: 16px;
    height: 16px;
    border-top: 4px solid #fff;
    border-left: 4px solid #fff;
    transform: rotate(45deg);
    margin-top: 6px;
}
.page-top-btn:hover {
    opacity: 0.8;
    transform: translateY(-3px);
}

/* =========================================
    Responsive
========================================= */
@media (max-width: 768px) {
    .card-content {
        flex-direction: column;
    }
    .works-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* ↑ ここにあった .info-table は削除（基本設定の2列が自動で適用されます） */
}

@media (max-width: 480px) {
    .works-grid {
        grid-template-columns: 1fr;
    }
    .hero {
        padding: 0 15px 30px;
    }
    .hp_desktopOnly {
        display: none;
    }
    .page-top-btn {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }

    /* ↓ ここから追加：スマホで2列にした時に綺麗に収めるための微調整 ↓ */
    .info-table {
        grid-template-columns: 1fr 1fr;
        gap: 8px 5px; /* 上下左右の隙間を少し詰める */
    }
    .info-label {
        width: 65px; /* 画面に合わせてラベルの幅を少し細くする */
        font-size: 11px; /* 文字を少し小さくする */
        margin-right: 5px;
        padding: 3px 0;
    }
    .info-value {
        font-size: 11px; /* テキストも少し小さくして改行を防ぐ */
    }
    /* ↑ ここまで追加 ↑ */
}