/* ==========================================================================
   1. ベーススタイル設定
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    line-height: 1.8;
    color: #333;
    background-color: #141414;
	letter-spacing: .05em;
}

a {
    color: #fff;
    text-decoration: none;
}

ul {
    list-style: none;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

.section-title {
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
	color: #fff;
	font-family: "Jost", sans-serif;
	display: flex;
    align-items: center;
}
.section-title span{
	font-size: 14px;
	padding-right: 15px;
}

/* 共通ボタン */
.btn-viewmore, .btn-contact {
    display: inline-block;
    padding: 12px 40px;
    background-color: #111;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background-color 0.3s ease;
    margin-top: 1.5rem;
}

.btn-viewmore:hover, .btn-contact:hover {
    background-color: #444;
}

/* ==========================================================================
   背景の縦線5本設定（全体を1200px幅ベースで均等分割）
   ========================================================================== */
.bg-lines {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 常に画面の真中央にベースを固定 */
    width: 100%;
    max-width: 1100px;           /* 一番端の2本が1200pxの枠線になります */
    height: 100vh;
    display: flex;
    justify-content: space-between; /* 5本の線を均等に両端・中間に配置 */
    pointer-events: none;        /* 線が邪魔してクリックできなくなるのを防ぐ */
    z-index: -1;                 /* コンテンツの最背面へ配置 */
    padding: 0;                  /* コンテナの余白をリセット */
}

/* 5本の縦線自体のスタイル */
.bg-lines span {
    display: block;
    width: 1px;                  /* 線の太さ */
    height: 100%;
    background-color:  rgba(255, 255, 255, 0.07);   /* ご指定の線カラー */
}

/* ==========================================================================
   2. ヘッダー（Flexboxによる隙間・配置調整）
   ========================================================================== */
.site-header {
    width: 100%;
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 25px 4%;
    display: flex;
    justify-content: space-between; /* ロゴとメニューグループを両端に離す */
    align-items: center;
}

.logo {
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff; 
}

/* ナビゲーション＋Contact＋ハンバーガーをまとめる右側ブロック */
.header-nav-group {
    display: flex;
    align-items: center;
    gap: 40px; /* ★ここを調整すると、メニュー、Contact、ハンバーガー間の隙間がすべて連動して変わります★ */
	font-family: "Jost", sans-serif;
}

.g-nav ul {
    display: flex;
    gap: 40px; /* 通常メニューの文字同士の隙間 */
}

.g-nav a {
    color: #fff;
    font-weight: 400;
    font-size: 0.95rem;
    transition: opacity 0.3s;
}

.g-nav a:hover {
    opacity: 0.7;
}

/* カプセル型のコンタクトボタン */
.btn-header-contact {
    display: inline-block;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 6px 35px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-header-contact:hover {
    background-color: #fff;
    color: #111;
}

/* --- ハンバーガーボタン（二本線・高さ1px・白線仕様） --- */
.menu-trigger {
    display: block;
    position: relative;
    width: 40px;
    height: 12px; /* 2本線の上下幅 */
    background: none;
    border: none;
    cursor: pointer;
    z-index: 200;
}

.menu-trigger span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px; /* 1pxの高さ */
    background-color: #fff;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.menu-trigger span:nth-child(1) { top: 0; }
.menu-trigger span:nth-child(2) { bottom: 0; }
.menu-trigger span:nth-child(3) { display: none; } /* 不要な3本目を非表示 */

/* クラス付与時（メニュー展開時）の×印変形アニメーション */
.menu-trigger.is-active span {
    background-color: #fff;
}
.menu-trigger.is-active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}
.menu-trigger.is-active span:nth-child(2) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

/* ==========================================================================
   3. ドロワー裏メニュー設定（Flexboxベース）
   ========================================================================== */
.drawer-nav {
    position: fixed;
    top: 0;
    right: 0;                    /* ★横に隠さず、最初から画面全体を覆う位置に固定 */
    width: 400px;
    max-width: 100%;
    height: 100vh;
    background-color: rgba(17, 17, 17, 0.98);
    color: #fff;
    padding: 120px 50px 50px;
    z-index: 150;
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    overflow-y: auto;
    /* --- ★ここから修正：ふわっと出す（フェードイン）の設定 --- */
    opacity: 0;                  /* 最初は透明 */
    visibility: hidden;          /* 最初はクリックもできないように完全に隠す */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* 0.5秒かけてじわっと変化 */
}

.drawer-nav.is-open { opacity: 1; visibility: visible;}
.drawer-main-menu { margin-bottom: 40px; }
.drawer-main-menu li { padding: 20px 0; font-family: "Jost", sans-serif; border-bottom: 1px solid #eee;}
.drawer-main-menu a { font-size: 1.4rem; font-weight: 300; letter-spacing: 0.05em; display: flex; align-items: center;}
.drawer-main-menu li.cta-btn{
	border: 1px solid;
	border-radius: 50px;
	width: 65%;
	padding: 0;
	margin-top: 40px;
}
.drawer-main-menu li.cta-btn a {
	justify-content: center;
    font-size: 16px;
    padding: 10px;
}
.drawer-main-menu a span{font-size: 12px; padding-right: 10px;}
.drawer-sub-menu {padding-top: 30px; }
.drawer-sub-menu h3 { font-size: 0.85rem; color: #666; text-transform: uppercase; margin-bottom: 15px; border-bottom: 1px solid #666; padding-left: 15px; padding-bottom: 5px;}
.drawer-sub-menu ul li { margin-bottom: 10px;}
.drawer-sub-menu ul a { font-size: 0.95rem; color: #ccc; }
.drawer-main-menu li:nth-child(5){
	border-bottom: none;
}

/* ==========================================================================
   4. メインビジュアル（動画のみ・文字一切なし）
   ========================================================================== */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* 画面いっぱいに表示 */
    overflow: hidden;
}

.video-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-bg-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 動画の上に被せるオーバーレイマスク */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 動画のみを見せるため、マスクを少し薄く（0.2）にしました。お好みで0にしてもOK */
    z-index: 2;
}

/* ==========================================================================
   4. Artist セクション（★スクショ2枚目の重なりを完全再現★）
   ========================================================================== */
.artist-section {
    padding: 120px 0;
}

.artist-flex-container {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* カード同士の間隔 */
}

/* カード自体を基準点（relative）にする */
.artist-card {
    flex: 1;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* 画像を表示するボックス */
.artist-img-box {
    width: 100%;
    height: 410px; /* 必要に応じて縦幅を設定してください */
	position: relative;
    z-index: 10;
	left: -30px;
}

.artist-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 画像下半分に絶対配置（absolute）で重ねる
   半透明カラーのインフォメーション座布団
*/
.artist-overlay-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* 下から45%の高さをカバー（スクショと同じハーフサイズ） */
    
    /* 内部の文字とボタンをFlexboxで左右に綺麗に配置 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* View moreを一番下に配置するため */
    align-items: flex-end;
    
    padding: 0 40px 40px 40px; /* 下と左右に適切な余白を確保 */
    z-index: 5;
	color: #fff;
}

/* VIKKii側の透けるディープブルー */
.vikkii-bg {
    background: linear-gradient(to top, rgba(14, 27, 61, 0.85) 0%, rgba(14, 27, 61, 0.6) 100%);
}

/* りるを。側の透けるディープグリーン */
.riruwo-bg {
    background: linear-gradient(to top, rgba(15, 46, 54, 0.85) 0%, rgba(15, 46, 54, 0.6) 100%);
}

/* アーティスト名のデザイン（座布団の上に配置） */
.artist-name {
    position: absolute;
    top: -18px;         /* 半透明背景の「上辺」を基準にする */
    right: 10px;    /* 右側の余白（View moreの右端と揃える） */
    transform: translateY(-50%); /* ★文字の縦の中心を背景の線にぴったり合わせる（スクショ通りに少しはみ出す美しい調整） */
    font-size: 3.2rem; /* スクショに合わせた大きめの文字サイズ */
    font-weight: 400;  /* Jostの洗練された細さを活かす */
    letter-spacing: 0.05em;
    line-height: 1;
    color: #fff;
	font-family: "Jost", sans-serif;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6); /* 背後の立ち絵と被っても文字が見えやすいように薄く影を付与 */
}
.riruwo-bg .artist-name{
	font-size: 2.8rem;
	right: -10px; 
	letter-spacing: 0;
}

/* 下線付き「View more ＋」リンク */
.btn-viewmore-s {
    font-family: "Jost", sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #fff;
    padding-bottom: 4px;
    line-height: 1;
    transition: opacity 0.3s;
}

.artist-card:hover .btn-viewmore-s {
    opacity: 0.7;
}

/* ==========================================================================
   5. ポップアップ（モーダルウィンドウ）のCSS（スクショ3枚目再現）
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    
    /* --- ★ここを修正：すりガラス効果の設定 --- */
    background-color: rgba(14, 14, 14, 0.5); /* 黒の透明度を下げる（0.9 → 0.5）ことで背後を透かす */
    backdrop-filter: blur(20px);             /* ぼかしの強度（カンプの深いボケ感に合わせて18pxに強化） */
    -webkit-backdrop-filter: blur(18px);     /* Safari（iPhoneなど）対応用の記述 */
    
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    overflow-y: auto;
    padding: 40px 0;
}

.modal-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-wrapper {
    position: relative;
    width: 80%; /* 5本線グリッドの幅に合わせて少し広めに */
    max-width: 1200px;
    background-color: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    padding: 70px 60px;
    color: #fff;
    box-sizing: border-box;
}

/* ★修正：閉じるボタンのスタイルを完全にリセット＆Jost化 */
.modal-close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    color: #fff;
    cursor: pointer;
    font-size: 1.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: 8px;
    transition: opacity 0.3s;
}

.modal-close-btn:hover {
    opacity: 0.6;
}

.modal-close-btn span {
    font-size: 0.65rem;
    font-family: "Jost", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 300;
}

/* レイアウト：左右分割 */
.modal-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.modal-left {
    flex: 0 0 40%; /* 立ち絵スペース */
    display: flex;
    justify-content: center;
}

.modal-profile-img {
    width: 100%;
    max-height: 65vh; /* 立ち絵が画面の上下を突き破らないように制限 */
    object-fit: contain;
}

.modal-right {
    flex: 0 0 55%; /* テキスト詳細スペース */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.modal-artist-name {
    font-family: "Jost", sans-serif;
    font-size: 3.2rem;
    font-weight: 400;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

.modal-catchphrase {
    font-size: 1rem;
    font-weight: 700;
    color: #cccccc;
    margin-bottom: 10px;
    letter-spacing: 0.03em;
}

.modal-bio {
    font-size: 0.9rem;
    line-height: 1.85;
    color: #b5b5b5;
    margin-bottom: 40px;
    text-align: justify;
}

.modal-sns-section {
    width: 100%;
    
    padding-top: 25px;
}

.modal-sns-section h4 {
    font-family: "Jost", sans-serif;
    font-size: 14px;
	font-weight: 300;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
	padding: 0 10px 5px;
	margin-bottom: 20px;
	border-bottom: 1px solid #666666;
}

.modal-sns-links {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
	padding: 0 10px;
}

.sns-item {
    height: 24px;
    padding-bottom: 2px;
    transition: opacity 0.3s;
}
.sns-item img{
	width: 100%;
	height: 24px;
}

.sns-item:hover {
    opacity: 0.6;
}


/* ==========================================================================
   5. About Us セクション（右端ライン調整・完全版）
   ========================================================================== */
.about-section {
    padding: 120px 0;
}

/* タイトルとView moreを横並びにして下マージンをあける */
.about-title {         /* タイトルとボタンの間の隙間 */
    margin-bottom: 60px;   /* 下の文章との間の余白 */
}

/* 下線付きのView more + ボタン */
.btn-viewmore-about {
    font-family: "Jost", sans-serif;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #fff;
    padding-bottom: 4px;
    line-height: 1;
    transition: opacity 0.3s;
    margin-bottom: 8px; 
	font-weight: 300;
}

.btn-viewmore-about:hover {
    opacity: 0.7;
}

/* 左右のブロックのバランスを整えるコンテナ */
.about-flex-container {
    display: flex;
    justify-content: space-between;
    gap: 60px;          /* 隙間を60pxにして右側の外側へのはみ出しを防ぐ */
    align-items: flex-start;
}

/* 左側ブロック（キャッチコピー） */
.about-left {
    flex: 1;
	padding-left: 100px;
}

/* 太く存在感のあるキャッチコピー */
.about-catch {
    font-size: 35px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: #fff;
	margin-bottom: 60px;
}

/* 右側ブロック（詳細文章） */
.about-right {
    width: 50%;
}

/* 導入文 */
.about-text-lead {
    padding-bottom: 30px;
	color: #fff;
}

/* ==========================================================================
   6. Service セクション（カンプ完全再現版）
   ========================================================================== */
.services-section {
    padding: 140px 0;
    color: #fff;
}

/* --- 1. タイトル＆View moreエリア --- */
.services-title-wrap {
    display: flex;
    align-items: flex-end; /* 下揃えにしてラインを美しく */
    justify-content: space-between; /* 両端に配置 */
    margin-bottom: 40px;   /* 画像との間の余白 */
}

.services-title-wrap .section-title {
    margin-bottom: 0;      /* 通常のマージンをリセット */
}

/* View more + ボタン（About Usとデザインを統一） */
.btn-viewmore-services {
    font-family: "Jost", sans-serif;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #fff;
    padding-bottom: 4px;
    line-height: 1;
    transition: opacity 0.3s;
    margin-bottom: 8px;    /* 英語タイトルのベースラインに合わせる微調整 */
}

.btn-viewmore-services:hover {
    opacity: 0.7;
}

/* --- 2. 横長メイン画像エリア --- */
.services-section img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 30px;   /* 下の文章エリアとの間の余白 */
    object-fit: cover;
}

/* --- 3. 下部：文章コンテンツエリア（2カラム仕様） --- */
.services-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;             /* 左右のブロックの間の広い余白 */
}

/* 左側：ダミーの見出し文章（1200pxグリッドの45%幅に設定） */
.services-wrap h3 {
    flex: 1;
    font-size: 45px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: #fff;
	font-family: "Jost", sans-serif;
}

/* 右側：2つの段落を包むブロック（1200pxグリッドの55%幅に設定） */
.services-wrap div {
    flex: 1.2;             /* 左側より少し幅を広くして文章を読みやすく */
    display: flex;
    flex-direction: column;
    gap: 30px;             /* 段落（pタグ）と段落の間の隙間 */
}

/* 右側の詳細文章（pタグ） */
.services-wrap div p {
    line-height: 1.8;
}

/* ==========================================================================
   7. Project セクション（3枚表示＋4枚目チラ見え版）
   ========================================================================== */
.project-section {
    padding: 140px 0;
    color: #fff;
    overflow: hidden; /* 右側にはみ出た4枚目を画面外でバッサリ隠す */
}

.project-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.project-title-wrap .section-title {
    margin-bottom: 0;
}

.slider-arrows {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
}

.slick-prev-custom,
.slick-next-custom {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    font-family: monospace;
    cursor: pointer;
    padding: 0 10px;
    transition: opacity 0.3s;
}

.slick-prev-custom:hover,
.slick-next-custom:hover {
    opacity: 0.5;
}
.project-img-box img{
	width: 100%;
}


/* --- 4枚目チラ見え用の幅計算レイアウト --- */
.project-slider-wrapper {
    width: 100%;
    /* 左側だけ1200pxグリッドの左端に合わせる（画面中央から逆算） */
    padding-left: calc((100% - 1200px) / 2 + 4%);
    padding-right: 0;
}

/* 画面幅が1200pxより狭くなったら通常の左右余白に */
@media (max-width: 1200px) {
    .project-slider-wrapper {
        padding-left: 4%;
    }
}

/* スライダー全体の左位置微調整 */
.project-slider {
    margin-left: -15px; 
}

/* ★超重要：カード間の隙間を設定 */
.project-slider .slick-slide {
    margin: 0 15px; 
}

/* ★超重要：カード1枚の横幅を固定する */
/* 5本線のグリッド（1200px内での3分割幅）に合わせるため 270px に固定します */
.project-card {
    width: 270px; 
    background-color: #fff;
    display: flex !important;
    flex-direction: column;
	padding: 3px;
}

/* テキストエリア */
.project-meta {
    padding: 10px 20px 15px;
}

.project-date {
    font-family: "Jost", sans-serif;
    font-size: 14px;
    color: #141414;
    margin-bottom: 5px;
    display: block;
}

.project-card-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #141414;
    margin-bottom: 20px;
}

.project-category {
    display: inline-block;
    font-family: "Jost", sans-serif;
    font-size: 12px;
    background-color: #141414;
    padding: 6px 18px;
    border-radius: 20px;
	color: #fff;
}

/* ==========================================================================
   8. Activity Report セクション
   ========================================================================== */
.activity-section {
    padding: 140px 0;
    color: #fff;
}

/* タイトルとView moreの配置（共通デザイン） */
.activity-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.activity-title-wrap .section-title {
    margin-bottom: 0;
}

/* View more + ボタン（右端ラインにジャストフィット） */
.btn-viewmore-activity {
    font-family: "Jost", sans-serif;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #fff;
    padding-bottom: 4px;
    line-height: 1;
    transition: opacity 0.3s;
    margin-bottom: 8px; /* 英語タイトルのベースラインに揃える微調整 */
}

.btn-viewmore-activity:hover {
    opacity: 0.7;
}

/* --- リスト全体のボーダー設定 --- */
.activity-list {
    border-top: 1px solid rgba(255, 255, 255, 0.4); /* リストの一番上の細い線 */
    width: 100%;
}

/* 各行（アイテム）のレイアウト */
.activity-item {
    display: flex;
    align-items: center; /* 縦方向を中央揃え */
    padding: 40px 30px;    /* 上下のゆったりとした余白 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* 各行を区切る細い線 */
    transition: background-color 0.3s ease;
}

/* お好みで：行をホバーしたときに少し背景を明るくしてクリックしやすくする演出 */
.activity-item:hover {
    background-color: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

/* --- 左側：画像ボックス（1つ目のグリッド幅に綺麗に収める） --- */
.activity-img-box {
    width: 200px;       /* 横幅を固定してカンプの比率を再現 */
    height: 120px;      /* 縦横比をスタイリッシュな横長に */
    overflow: hidden;
    flex-shrink: 0;     /* 画面が縮んでも画像が潰れないように固定 */
}

.activity-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 画像の比率を保ったまま綺麗にフィット */
    transition: transform 0.5s ease;
}

/* ホバー時に画像がじわっと拡大するオシャレ演出 */
.activity-item:hover .activity-img-box img {
    transform: scale(1.05);
}

/* --- 中央：日付ボックス（年月に上に小さく、日を大きく） --- */
.activity-date-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 5%;    /* 画像との間の絶妙なディスタンス */
    flex-shrink: 0;
    width: 120px;       /* 日付エリアの幅をキープ */
}

/* 小さな「年.月」 */
.activity-year-month {
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    color: #888888;     /* 落ち着いたグレー */
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 4px;
}

/* 大きな「日（01）」 */
.activity-day {
    font-family: "Jost", sans-serif;
    font-size: 2.5rem;  /* カンプに合わせたインパクトのあるサイズ */
    font-weight: 300;   /* スタイリッシュで細いウエイト */
    color: #fff;
    line-height: 1;
}

/* --- 右側：テキストボックス（残りの幅をすべて使う） --- */
.activity-text-box {
    flex: 1;
    padding-left: 5%;   /* 日付エリアとの間の余白 */
}

.activity-text-box p {
    font-size: 1rem;
    line-height: 1.7;
    color: #fff;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   9. Get in Touch（左端1200px固定・右端全幅ぴったり版）
   ========================================================================== */
.contact-section {
    padding: 140px 0 0 0; /* 下のフッターと隙間なくくっつける設定 */
    color: #fff;
    width: 100%;
    overflow: hidden; /* 右側へはみ出す要素の微調整用お守り */
	background-image: linear-gradient(to bottom, rgba(20, 20, 20, 0.5), rgba(20, 20, 20, 1));
}

/* ★ここが最大の魔法：左端は1200pxの線に合わせ、右端は画面いっぱいに広げる */
.contact-wrapper {
    display: flex;
    width: auto; /* width: 100%からautoに変更して、右端まで伸ばす */
    
    /* 左側のマージンだけを「1200px幅の左端」にピッタリ一致させる計算式 */
    margin-left: calc((100% - 1200px) / 2 + 4%);
    margin-right: 0; /* 右側は画面の端（0）にくっつける */
    
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	border-left: 1px solid rgba(255, 255, 255, 0.4);
    background-color: #000000;
}

/* 画面幅が1200px未満になったら、通常セクションと同じ左余白（4%）にシフト */
@media (max-width: 1200px) {
    .contact-wrapper {
        margin-left: 4%;
    }
}

/* --- 左側：テキストエリア --- */
.contact-left {
    flex: 3; /* グリッド比率 75% */
    padding: 120px 60px; /* カンプのゆったりした上下余白 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5rem; 
}

/* セクションタイトル */
.contact-title {
    font-family: "Jost", sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    margin-bottom: 20px;
    line-height: 1.1;
}

.contact-title span {
    font-size: 1.8rem;
    margin-right: 15px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -5px;
}

/* 説明文 */
.contact-lead {
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.05em;
    line-height: 1.8;
}

/* --- 右側：メールエリア（右端ぴったり） --- */
.contact-right {
    flex: 1; /* グリッド比率 25% */
    background-color: #262626; /* カンプのグレー背景 */
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px; 
    text-decoration: none;
    color: #fff;
    transition: background-color 0.3s ease;
}

/* ホバーでグレー背景を少し明るく */
.contact-right:hover {
    background-color: #333333;
}

/* cta_icon.pngのサイズ調整 */
.contact-icon-wrap {
    width: 80px;  
    height: auto;
    margin-bottom: 25px;
}

.icon-airplane {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

/* ホバー時に飛行機が少し右上に動く */
.contact-right:hover .icon-airplane {
    transform: translate(6px, -6px);
}

/* メールアドレス */
.contact-email {
    font-family: "Jost", sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.05em;
    border-bottom: 1px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}

.contact-right:hover .contact-email {
    color: #fff;
    border-bottom: 1px solid #fff;
}
/* ==========================================================================
   10. Footer（フッター）セクション
   ========================================================================== */
.footer {
    background-color: #141414;
    color: #fff;
    padding-top: 100px;
    padding-bottom: 60px;
}

/* --- 1. ロゴエリア --- */
.footer-logo-wrap {
    margin-bottom: 70px;
}

.footer-logo img {
    height: 60px; /* カンプのロゴのサイズ感に合わせて適宜調整してください */
    width: auto;
    display: block;
}

/* --- 2. ナビゲーションエリア（Flexboxで3:1に分ける） --- */
.footer-nav-container {
    display: flex;
    width: 100%;
    margin-bottom: 80px;
}

/* 左右のメニューブロック共通設定 */
.footer-nav-block {
    display: flex;
    flex-direction: column;
}

/* グリッド比率：左のMenuブロックを全体の75%（3スパン分）に */
.block-menu {
    flex: 3;
    padding-right: 40px;
}

/* グリッド比率：右のSNSブロックを全体の25%（1スパン分）に */
.block-sns {
    flex: 1;
}

/* 区切り線付きの細字タイトル（Menu / SNS Account） */
.footer-block-title {
    font-family: "Jost", sans-serif;
    font-size: 0.9rem;
    color: #888888; /* 落ち着いたアッシュグレー */
    letter-spacing: 0.05em;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* カンプの細い境界線 */
    margin-bottom: 20px;
    display: block;
	padding-left: 20px;
}

/* リンクアイテムが並ぶul */
.footer-link-list {
    list-style: none;
    padding: 0 0 0 20px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px 45px; /* 横の隙間をゆったり45px、縦の隙間を15pxに設定 */
}

/* リンクテキスト自体 */
.footer-link-list a {
    font-family: "Jost", sans-serif;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: opacity 0.3s ease;
}

.footer-link-list a:hover {
    opacity: 0.6; /* ホバー時に優しくフェードアウト */
}

/* --- 3. コピーライトエリア --- */
.footer-copyright {
    width: 100%;
}

.footer-copyright small {
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    color: #555555; /* 主張しすぎないダークグレー */
    letter-spacing: 0.02em;
}

/* ==========================================================================
   7. レスポンシブ対応
   ========================================================================== */

@media (max-width: 1240px) {
    .bg-lines {
        width: calc(100% - 40px); /* 画面端に20pxずつのバッファを持たせる */
    }
}
@media (max-width: 960px) {
    .g-nav { display: none; }
}

@media (max-width: 900px) {
    .contact-wrapper {
        flex-direction: column; /* 縦並びに */
        margin-left: 4%;
    }
    
    .contact-left {
        padding: 60px 20px;
    }
    
    .contact-title {
        font-size: 2.5rem;
    }
    
    .contact-right {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.4);
        padding: 60px 20px;
    }
	.bg-lines {
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 0; /* paddingでの分配をやめて、絶対配置で完全制御します */
        position: fixed;
    }

    /* 5本のうち、不要な2本（2番目と4番目）を非表示 */
    .bg-lines span:nth-child(2),
    .bg-lines span:nth-child(4) {
        display: none;
    }

    /* 【1本目】左端から15pxの位置に固定 */
    .bg-lines span:nth-child(1) {
        position: absolute;
        left: 15px;
    }

    /* 【3本目】画面の完全な真ん中に固定 */
    .bg-lines span:nth-child(3) {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* 【5本目】右端から15pxの位置に固定 */
    .bg-lines span:nth-child(5) {
        position: absolute;
        right: 15px;
        left: auto; /* 元の並び順の挙動をリセット */
    }
	/* モーダルの白枠（または黒枠）のラッパーに対する設定 */
	.modal-wrapper {
		max-height: 90vh;           /* 画面の高さの90%を最大の高さにする（上下に少し余白を残す） */
		display: flex;
		flex-direction: column;     /* 中の要素を縦並びにする */
	}

	/* 中のコンテナ（スクロールさせたいエリア）に対する設定 */
	.modal-container {
		flex: 1;
		overflow-y: auto;           /* 縦方向にはみ出たコンテンツをスクロールさせる */
		-webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロールさせるための魔法 */

		/* 必要に応じて、スクロール時に文字が枠線にピタッとくっつかないように余白を調整 */
		padding-right: 10px;        
	}
}

@media (max-width: 768px) {
	.pc_only{
		display: none;
	}
	.hero-section{height: 85vh;}
    .header-container { padding: 15px 4%; }
	.container{margin: 0 15px;}
    .btn-header-contact { display: none; }
    .header-nav-group { gap: 0; }
    .drawer-nav { width: 100%; padding: 100px 30px 40px; }
	.contact-title span{font-size: 16px}
	.contact-title{font-size: 45px;}

    /* モバイル時は縦並び */
    .artist-flex-container,
    .about-flex-container, 
    .project-flex-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .artist-img-box { height: 290px; }
    .artist-overlay-info { padding: 0 20px 20px 20px; }
    .artist-name { font-size: 2.5rem; top: -15px;}
	.riruwo-bg .artist-name {
		font-size: 2.1rem;
		right: -15px;
		top: -13px;
	}
	.artist-section{
		padding-bottom: 20px;
	}
	.artist-overlay-info{
		height: 55%;
	}
    .project-card { width: 100%; }
	/* About Us スマホ対応 */
    .btn-viewmore-about {
        margin-bottom: 0;
        font-size: 16px;
        right: 15px;
        position: relative;
        margin-top: 50px;
		left: 72%;
    }

    .about-flex-container {
        flex-direction: column;
        gap: 0px;
    }
	.about-section{
		padding-bottom: 0px;
	}
    .about-catch {
        font-size: 1.45rem;
        line-height: 1.4;
		margin-bottom: 30px;
    }
	.about-right{
		width: 100%;
	}
	.about-right .about-text-lead:last-child{
		padding-bottom: 0;
	}
	.services-title-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 2rem;
    }
    
    .btn-viewmore-services {
        margin-bottom: 0;
        font-size: 16px;
        right: 15px;
        position: absolute;
        margin-top: 50px;
    }

    .services-section img {
        margin-bottom: 20px;
		height: 170px;
    }

    /* スマホ時は2カラムから縦並びに切り替え */
    .services-wrap {
        flex-direction: column;
        gap: 30px;
    }

    .services-wrap h3 {
        font-size: 30px;
    }
	.project-card {
        width: 240px; 
    }
	.project-category{
		font-size: 12px;
		padding: 3px 18px;
	}
	.project-title-wrap{
		margin-bottom: 30px;
	}
	.project-section{
		padding-bottom: 80px;
	}
	.activity-title-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 40px;
    }
    
    .btn-viewmore-activity {
        margin-bottom: 0;
    }

    /* スマホ時は横並びだとキツいので縦組みにシフト */
    .activity-item {
        gap: 10px 20px;
        padding: 50px 0 20px;
		flex-wrap: wrap;
    }

    /* 画像をスマホ時は横幅いっぱいに広げる */
    .activity-img-box {
        width: 100%;
        height: auto;
    }

    /* 日付とテキストの左余白をリセット */
    .activity-date-box {
        padding-left: 0;
        flex-direction: row; /* スマホでは横並び「2026.05 01」にしても見やすい */
        align-items: flex-end;
        gap: 10px;
		text-align: center;
        width: 15%;
		display: block;
    }
    
    .activity-day {
        font-size: 1.8rem;
    }

    .activity-text-box {
        padding-left: 0;
		width: 80%;
    }
    .footer {
        padding-top: 70px;
        padding-bottom: 40px;
    }

    .footer-logo-wrap {
        margin-bottom: 50px;
    }

    /* スマホでは横並びだと狭いので縦に積む */
    .footer-nav-container {
        flex-direction: column;
        gap: 50px;
        margin-bottom: 60px;
    }
    
    .footer-link-list {
        gap: 20px 30px; /* スマホ用に間隔を少しタイトに調整 */
    }

    .modal-wrapper {
        padding: 50px 30px 40px;
		margin-top: 50px;
		width: 90%;
    }
    .modal-container {
        flex-direction: column; /* 縦並びに変更 */
        gap: 30px;
    }
    .modal-left {
        width: 100%;
    }
    .modal-profile-img {
        max-height: 40vh;
    }
    .modal-right {
        width: 100%;
    }
    .modal-artist-name {
        font-size: 2.4rem;
    }
	.sns-item img{
		height: 15px;
	}
	.activity-text-box p{
		font-size: 18px;
		padding-top: 5px;
	}
	.modal-bio{
		margin-bottom: 20px;
	}
	.block-menu{
		padding-right: 0;
	}
}

@media (min-width: 767px) {
	.sp_only{
		display: none;
	}
}

.slick-track{
	margin-left: 0!important;
	margin-right: 0!important;
}