@charset "UTF-8";
/*
Theme Name: Hanerabase Theme
Description: ハネラベース公式オリジナルテーマ
Version: 1.0.0
Author: ANDO
*/

/* =========================================
   共通設定（リセットとベース）
========================================= */
body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', sans-serif;
    color: #595959; /* 💡ロゴのグレーを基調としたテキストカラー */
    background-color: #FAFAFA;
}

h1, h2, h3, p, ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

section {
    padding: 80px 20px;
    max-width: 1000px;
    margin: 0 auto;
}

section h2 {
    display: table;       /* 💡文字の横幅ぴったりにグラデーションを合わせる魔法 */
    margin: 0 auto 50px;  /* 中央揃えを維持 */
    text-align: center;
    font-size: 32px;
    letter-spacing: 0.1em;
    font-weight: bold;
    
    /* 🎨 ご指定のカラーでのテキストグラデーション */
    background: linear-gradient(135deg, rgb(168, 224, 99) 0%, rgb(23, 154, 206) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 💡 本物のロゴデータを使用したアンダーライン */
section h2::after {
    content: '';
    display: block;
    width: 65px;
    height: 48px; /* ロゴの縦横比に最適化 */
    margin: -5px auto 0; /* 文字との距離を微調整 */
    
    background: linear-gradient(135deg, rgb(168, 224, 99) 0%, rgb(23, 154, 206) 100%);
    
    /* 💡 AIデータから生成した100%完全一致のマスクURI */
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 172.39 129.72'%3E%3Cpath d='M86.81,11.98c-.25,2.94-1.1,5.24-2.1,6.98-.98,1.73-2.12,2.92-2.95,3.63-2.16,1.88-4.79,2.87-7.5,2.87-.41,0-.8-.02-1.2-.07-5.87-.63-9.44-5.43-8.84-11.97.51-5.84,3.38-9.11,5.04-10.54,2.48-2.16,5.58-3.17,8.71-2.82,5.87.63,9.44,5.41,8.86,11.91Z'/%3E%3Cpath d='M172.39,70.42c0,30.4-23.05,55.54-52.66,59.15,0-.15,0-.29-.03-.44-.18.03-.35.03-.53.06.03.15.03.29.03.44.18-.03.35-.03.53-.06v.15h-6.91c-3.22,0-6.03-2.33-6.41-5.5-2.75-23.17-22.66-41.23-46.77-41.23S15.64,101.04,12.88,124.22c-.38,3.17-3.19,5.5-6.41,5.5h0c-3.95,0-6.91-3.47-6.42-7.36,3.67-29.39,29-52.23,59.59-52.23,28.5,0,52.43,19.78,58.52,46.23.03.15.06.26.09.41,23.16-2.91,41.17-22.58,41.17-46.35s-18.23-43.68-41.61-46.38c-3.09-.36-5.48-2.84-5.48-5.93v-.38c0-3.99,3.5-6.92,7.42-6.44,29.62,3.64,52.63,28.78,52.63,59.14Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 172.39 129.72'%3E%3Cpath d='M86.81,11.98c-.25,2.94-1.1,5.24-2.1,6.98-.98,1.73-2.12,2.92-2.95,3.63-2.16,1.88-4.79,2.87-7.5,2.87-.41,0-.8-.02-1.2-.07-5.87-.63-9.44-5.43-8.84-11.97.51-5.84,3.38-9.11,5.04-10.54,2.48-2.16,5.58-3.17,8.71-2.82,5.87.63,9.44,5.41,8.86,11.91Z'/%3E%3Cpath d='M172.39,70.42c0,30.4-23.05,55.54-52.66,59.15,0-.15,0-.29-.03-.44-.18.03-.35.03-.53.06.03.15.03.29.03.44.18-.03.35-.03.53-.06v.15h-6.91c-3.22,0-6.03-2.33-6.41-5.5-2.75-23.17-22.66-41.23-46.77-41.23S15.64,101.04,12.88,124.22c-.38,3.17-3.19,5.5-6.41,5.5h0c-3.95,0-6.91-3.47-6.42-7.36,3.67-29.39,29-52.23,59.59-52.23,28.5,0,52.43,19.78,58.52,46.23.03.15.06.26.09.41,23.16-2.91,41.17-22.58,41.17-46.35s-18.23-43.68-41.61-46.38c-3.09-.36-5.48-2.84-5.48-5.93v-.38c0-3.99,3.5-6.92,7.42-6.44,29.62,3.64,52.63,28.78,52.63,59.14Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* PC時はスマホ用改行を隠す */
.sp-br {
    display: none;
}

/* =========================================
   背景パララックス装飾
========================================= */
#parallax-bg {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw; 
    height: 100vh;
    z-index: -1; /* 💡 全てのコンテンツの裏側に潜り込ませる絶対指定 */
    overflow: hidden;
    pointer-events: none; /* 💡 前のテキストがクリックできなくなるのを防ぐ */
}

.parallax-curve {
    position: absolute;
    /* 💡 公式ロゴの波線をそのまま背景用に移植（ブランドグラデーション適用済） */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 175 130'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23A8E063'/%3E%3Cstop offset='100%25' stop-color='%23179ACE'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M172.39,70.42c0,30.4-23.05,55.54-52.66,59.15,0-.15,0-.29-.03-.44-.18.03-.35.03-.53.06.03.15.03.29.03.44.18-.03.35-.03.53-.06v.15h-6.91c-3.22,0-6.03-2.33-6.41-5.5-2.75-23.17-22.66-41.23-46.77-41.23S15.64,101.04,12.88,124.22c-.38,3.17-3.19,5.5-6.41,5.5h0c-3.95,0-6.91-3.47-6.42-7.36,3.67-29.39,29-52.23,59.59-52.23,28.5,0,52.43,19.78,58.52,46.23.03.15.06.26.09.41,23.16-2.91,41.17-22.58,41.17-46.35s-18.23-43.68-41.61-46.38c-3.09-.36-5.48-2.84-5.48-5.93v-.38c0-3.99,3.5-6.92,7.42-6.44,29.62,3.64,52.63,28.78,52.63,59.14Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.04; /* 💡 4%の絶妙な透明度。空間に溶け込む上質な気配を作ります */
    will-change: transform; /* スクロール時のガタつきを防ぐGPU支援 */
}

/* 右上に配置する波線 */
.curve-top {
    width: 60vw;
    min-width: 600px;
    height: 600px;
    top: -5%;
    right: -10%;
}

/* 左下に配置する巨大な波線 */
.curve-bottom {
    width: 80vw;
    min-width: 800px;
    height: 800px;
    bottom: -15%;
    left: -10%;
}

/* =========================================
   UI/UXアップデート（全体カラー＆スクロール）
========================================= */

h1, h2, h3, a {
    color: #595959;
}

/* ヘッダーの固定とすりガラス効果 */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px); /* 後ろの背景が透けてボケるオシャレな効果 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
    z-index: 1000;
}

.site-logo img {
    height: 35px;
    width: auto;
    display: block;
}

/* ヘッダーが上にかぶさるため、メインコンテンツの最上部を下げる */
main {
    padding-top: 48px;
}

/* =========================================
   ハンバーガーボタンのデザイン＆アニメーション
========================================= */
.hamburger {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1100; /* メニューより上に配置して常に押せるようにする */
    outline: none;
}

/* 通常時の3本線（ロゴのカーブ感に合わせて少し角を丸く） */
.hamburger span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #595959;
    position: absolute;
    left: 7px;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.hamburger span:nth-child(1) { top: 12px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 30px; }

/* 💡 ON mouse (ホバー) 時のアニメーション：上下の線が少し広がって動きを出す */
.hamburger:hover span:nth-child(1) { transform: translateY(-3px); }
.hamburger:hover span:nth-child(3) { transform: translateY(3px); }

/* 💡 クリック時（開いている時）のアニメーション：綺麗な×印になる */
.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    background-color: #ffffff; /* メニュー背景（グラデーション）に合わせて白に変える */
}
.hamburger.active span:nth-child(2) {
    opacity: 0; /* 真ん中の線はフワッと消す */
}
.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
    background-color: #ffffff;
}

/* =========================================
   フルスクリーンメニュー（背景グラデーション）
========================================= */
.global-nav {
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態は画面の右外側に隠しておく */
    width: 100%;
    height: 100vh;
    /* 💡 ライトグリーンとライトブルーの美しいグラデーション背景 */
    background: linear-gradient(135deg, rgba(168, 224, 99, 0.8) 0%, rgba(23, 154, 206, 0.8) 100%);
    /* 💡 ロゴのカーブ感を意識した演出：開く時に少し丸みを帯びながらスライドする */
    border-bottom-left-radius: 100% 50%;
    transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1), border-radius 0.6s ease;
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* メニューが開いたアクティブ状態 */
.global-nav.active {
    right: 0;
    border-bottom-left-radius: 0; /* 画面いっぱいにピタッと収まる */
}

/* メニュー内のリンク文字 */
.nav-list {
    text-align: center;
}

.nav-list li {
    margin: 30px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* メニュー展開時、文字が下からフワッと順番に時間差で現れるアニメーション */
.global-nav.active .nav-list li {
    opacity: 1;
    transform: translateY(0);
}
.global-nav.active .nav-list li:nth-child(1) { transition-delay: 0.2s; }
.global-nav.active .nav-list li:nth-child(2) { transition-delay: 0.3s; }
.global-nav.active .nav-list li:nth-child(3) { transition-delay: 0.4s; }
.global-nav.active .nav-list li:nth-child(4) { transition-delay: 0.5s; }

.nav-list a {
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 5px;
}

/* リンクホバー時の白い下線アニメーション */
.nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

.nav-list a:hover::after {
    width: 100%;
}

/* =========================================
   ローディング画面 (Lottie完全統合)
========================================= */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #FAFAFA;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

#loading-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loading-logo-wrapper {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* Lottieが入る器のサイズ（AEのコンポジション比率に追従） */
#lottie-box {
    width: 100%;
    max-width: 700px; /* PCでも大きくなりすぎないように制御 */
    height: auto;
    aspect-ratio: 16 / 9; /* AEの1920x1080に合わせて縦横比を固定 */
}

/* 💡 シニアエンジニアのハック：AEで「.grad」と名付けたパーツだけ強制グラデーション */
.grad path,
.grad ellipse,
.grad circle,
.grad rect {
    fill: url(#loaderGrad) !important;
    stroke: url(#loaderGrad) !important;
}

/* =========================================
   メインビジュアル (MV)
========================================= */
#mv {
    height: 100vh; /* 画面いっぱいの高さにする */
    max-width: 100%;
    padding: 0;
    margin: 0 0 80px 0;
    background-color: #E8F5E9; /* 仮の爽やかな薄緑背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* MV内のキャッチコピーアニメーション用 */
#mv h2 {
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #333;
    margin: 0;
    opacity: 0;
    transform: translateY(30px); /* 最初は少し下に下げておく */
    transition: opacity 1.5s ease, transform 1.5s ease; /* 1.5秒かけてじわっと出す */
}

/* 💡UX：画面の読み込み（loadedクラス付与）が終わったら文字を表示 */
body.loaded #mv h2 {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   タレント紹介（ARTISTS）- INTENTION風
========================================= */
.talent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 横に自動で並べる魔法のコード */
    gap: 30px; /* 写真と写真の隙間 */
}

/* 💡 1. カード全体のブレ（1pxのズレ）を封じるハードウェアアクセラレーション */
/* 💡 1. 写真の高さを完全固定し、手前・奥のレイヤーを設定 */
#artists .talent-card img {
    width: 100% !important;
    height: 380px !important; /* WPの画像サイズ属性を強制上書きして絶対固定 */
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 1; /* 💡 H3（名前）よりも奥のレイヤーに配置する */
}

#artists .talent-card:hover img {
    transform: scale(1.03);
}

/* （※ .no-image-box のコードはそのまま残してください） */

/* 💡 2. H3を最前面に出し、背景を白くして画像の侵食をシャットアウト */
#artists .talent-card h3 {
    box-sizing: border-box; 
    width: 100%; 
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 25px 20px;
    text-align: center;
    font-weight: bold;
    color: #464646;
    letter-spacing: 0.1em;
    margin: 0;
    transition: color 0.3s ease;
    position: relative; 
    z-index: 2; /* 💡 画像より手前に出す */
    background: #FFF; /* 💡 白背景で塗りつぶし、拡大してはみ出した画像の端を完全に隠す */
}

/* =========================================
   ニュース（NEWS）- グラデーションライン＋左ボーダー完全体
========================================= */
#news ul {
    background: #FFF;
    border: none;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    overflow: hidden; /* 角丸を綺麗に保つ */
}

#news ul li {
    padding: 25px 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    
    /* 💡 通常時：1pxの極薄グラデーション下線 */
    background-image: linear-gradient(90deg, rgba(168, 224, 99, 0.2) 0%, rgba(23, 154, 206, 0.2) 100%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    transition: background-color 0.3s ease, background-size 0.3s ease;
}

/* 最後の行だけ下線を消去 */
#news ul li:last-child {
    background-image: none;
}

/* 💡 左側にスタンバイさせておくグラデーションの縦線（最初は見えない） */
#news ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0; 
    background: linear-gradient(135deg, rgb(168, 224, 99) 0%, rgb(23, 154, 206) 100%);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 💡 右端に配置する矢印アイコン */
#news ul li::after {
    content: '→';
    font-family: inherit;
    font-size: 18px;
    color: #CCCCCC;
    position: absolute;
    right: 30px;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* --- ホバー（マウスオーバー）時の動き（全ての魔法が同時に発動） --- */
#news ul li:hover {
    background-color: #FAFAFA; /* 全体がわずかにグレーに沈む */
    
    /* 下線が100%鮮やかに発色し、2pxの太さになる */
    background-image: linear-gradient(90deg, rgb(168, 224, 99) 0%, rgb(23, 154, 206) 100%);
    background-size: 100% 2px;
}

#news ul li:hover::before {
    width: 4px; /* 左側から4pxのグラデーションボーダーが出現！ */
}

#news ul li:hover::after {
    color: #179ACE; /* 矢印がブランドカラーのライトブルーに */
    transform: translateX(5px); /* 右へスライド */
}

/* --- 各要素のスタイル --- */
#news ul li .date {
    font-size: 14px;
    color: #888;
    flex-shrink: 0;
}

/* カテゴリタブ（カプセル型バッジ） */
.cat-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 4px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 30px;
    color: #666;
    background-color: #FFF;
    white-space: nowrap;
    flex-shrink: 0;
}

/* タイトルとリンクエリアの拡張 */
#news ul li .news-title {
    font-size: 16px;
    line-height: 1.5;
    display: block;
    width: 100%;
    padding-right: 30px;
    z-index: 2;
    position: relative;
    transition: color 0.3s ease;
}

/* リンクエリアを行全体に広げる魔法 */
#news ul li .news-title::after {
    content: '';
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: -180px;
    right: -60px;
    z-index: 1;
}

#news ul li:hover .news-title {
    color: #179ACE; /* タイトルの文字もブランドカラーに */
}

.all-news-btn-wrapper {
    text-align: center;
    margin-top: 40px;
}
.btn-all-news {
    display: inline-block;
    padding: 14px 50px;
    background: transparent;
    color: #464646;
    border: 1px solid #DDE2E5;
    border-radius: 30px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-decoration: none;
    transition: all 0.3s ease;
}
/* ホバー時にブランドグラデーションの枠線と文字色にフワッと切り替わる演出 */
.btn-all-news:hover {
    color: #179ACE;
    border-color: #179ACE;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(23, 154, 206, 0.1);
}

/* =========================================
   ALL NEWS
========================================= */

.archive-filter-wrapper {
    margin-bottom: 50px;
    text-align: center;
}
.archive-year-list {
    display: flex;
    justify-content: center;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.archive-year-list li a {
    display: block;
    padding: 8px 24px;
    color: #888;
    background: #F5F7F8;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}
/* ホバー時、および現在選択されている年のスタイル */
.archive-year-list li a:hover,
.archive-year-list li.is-active a {
    background: linear-gradient(135deg, rgb(168, 224, 99) 0%, rgb(23, 154, 206) 100%);
    color: #FFF;
    box-shadow: 0 4px 12px rgba(23, 154, 206, 0.2);
}

/* =========================================
   COMPANY
========================================= */
#about tr th {
	padding: 15px; border-bottom: 1px solid #eee; text-align: left; 
}

#about tr td {
	padding: 15px; border-bottom: 1px solid #eee;
}



/* =========================================
   お問い合わせフォーム（Contact Form 7）リッチ化
========================================= */
.form-wrapper {
    background-color: #FFF;
    padding: 40px;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
}

/* ラベル（項目名）のスタイリング */
.wpcf7-form p {
    margin-bottom: 25px;
    font-weight: bold;
    color: #595959;
    letter-spacing: 0.05em;
}

/* 入力エリアの基本デザイン */
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid #E0E0E0; /* 薄いグレーの枠線 */
    border-radius: 4px; /* ほんの少しだけ角を丸くして柔らかさを */
    background-color: #FAFAFA; /* 入力欄の中だけわずかにグレーにして視認性を上げる */
    font-family: inherit;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease; /* アニメーションの準備 */
    box-sizing: border-box;
    margin-top: 8px;
}

/* 💡UXの要：入力中（フォーカス時）のハイライト */
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap textarea:focus {
    border-color: #333; /* クリックしたら枠線が黒くなる */
    background-color: #FFF; /* 背景が白く光る */
    outline: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* フワッと影が出る */
}

/* 送信ボタンのスタイリング */
.wpcf7-submit {
    display: block;
    width: 240px;
    margin: 40px auto 0 auto; /* 中央配置 */
    padding: 16px 0;
    background-color: #333;
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.1em;
    border: none;
    border-radius: 30px; /* カプセル型にする丸み */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ボタンホバー時に少し透明にして浮くアニメーション */
.wpcf7-submit:hover {
    background-color: #555;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

/* =========================================
   スクロールアニメーション
========================================= */
/* アニメーション前の初期状態（透明で、少し下に下がっている状態） */
.scroll-fade {
    opacity: 0;
    transform: translateY(50px);
    /* cubic-bezier（イージング）を使って、すーっと滑らかに減速して止まる高級感ある動きにしています */
    transition: opacity 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000), 
                transform 1.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

/* 画面内に入った時（JSによってクラスが付与された瞬間）の最終状態 */
.scroll-fade.is-inview {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   フロントページ（front-page.php）用スタイル
========================================= */
/* コンセプトテキスト */
.concept-text {
    width: 100%;
    text-align: center;
    line-height: 2.5em;
}

/* 代替画像（No Image） */
.no-image-box {
    width: 100%;
    height: 300px;
    background: #eee;
}

/* Companyテーブル */
#about {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 80px;
}

/* コンタクトエリア */
#contact-area {
    background: #fff;
    padding: 80px 20px;
    border-top: 1px solid #eee;
}
.contact-inner {
    max-width: 800px;
    margin: 0 auto;
}

/* =========================================
   タレント詳細ページ（single-talent.php）用スタイル
========================================= */
.talent-main {
    max-width: 1100px; /* 2カラムが綺麗に収まる広めの幅 */
    margin: 140px auto 100px; /* 固定ヘッダーの被りを防ぐ十分な上余白 */
    padding: 0 30px;
    min-height: 70vh;
}

/* 2カラムのレイアウト定義 */
.talent-detail-wrapper {
    display: flex;
    gap: 60px; /* 左右カラムの間の上品な余白 */
    align-items: flex-start;
}

/* --- 左カラム（35%幅に固定） --- */
.talent-profile-left {
    width: 35%;
    flex-shrink: 0;
    position: sticky;
    top: 120px; /* 💡 スクロールした時に写真が画面にピタッとついてくる心地よいUX */
}

.talent-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05); /* ニュース等と統一した柔らかい影 */
}

.talent-photo .no-image-large {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #eee;
    border-radius: 12px;
}

/* プロフィールスペック箱 */
.talent-spec-box {
    margin-top: 30px;
    background: #FFF;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.talent-spec-box h3 {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #888;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.spec-table th {
    text-align: left;
    width: 35%;
    color: #999;
    padding: 8px 0;
    font-weight: normal;
}

.spec-table td {
    color: #595959;
    padding: 8px 0;
}


/* --- 右カラム（メインコンテンツ） --- */
.talent-content-right {
    flex-grow: 1;
}

.talent-header {
    margin-bottom: 40px;
    border-bottom: 2px solid #f2f2f2;
    padding-bottom: 20px;
}

.talent-name {
    font-size: 36px;
    font-weight: bold;
    color: #464646;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.talent-sub-title {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: #179ACE; /* ブランドカラーのライトブルー */
}

/* 💡 本文（出演履歴など）の Gutenberg ブロックエディタ完全先回りスタイリング */
.talent-bio-entry {
    line-height: 1.8;
    font-size: 15px;
    color: #595959;
}

/* 本文内の中見出し（STAGE, TV, MOVIEなど） */
.talent-bio-entry h3 {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 40px 0 20px 0;
    color: #464646;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 見出しの左側にブランドグラデーションの目印を置く洗練された演出 */
.talent-bio-entry h3::before {
    content: '';
    width: 4px;
    height: 18px;
    background: linear-gradient(135deg, rgb(168, 224, 99) 0%, rgb(23, 154, 206) 100%);
    border-radius: 2px;
}

/* =========================================
   本文内のテーブル（出演履歴の表など）- 縦積みモダンレイアウト
========================================= */
/* WPデフォルトの野暮ったい枠線を強制リセット */
.talent-bio-entry .wp-block-table,
.talent-bio-entry table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    border: none !important;
}

/* 💡 行（tr）をブロック化して、縦積みの箱にする */
.talent-bio-entry table tbody tr {
    display: block;
    border-bottom: 1px solid #EAEAEA;
    padding: 25px 15px; /* 行ごとにゆったりとした余白を取る */
    transition: background-color 0.3s ease;
}

.talent-bio-entry table tbody tr:last-child {
    border-bottom: none;
}

/* マウスを乗せた時に行がフワッとハイライトする演出 */
.talent-bio-entry table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

/* 💡 セル（th, td）もブロック化して、横並びを完全に解除 */
.talent-bio-entry table th,
.talent-bio-entry table td {
    display: block;
    width: 100% !important;
    padding: 0; /* tr側で余白を取るのでセル自体は0にする */
    text-align: left;
    border: none !important;
}

/* 💡 年号エリア（上の行） */
.talent-bio-entry table td:first-child,
.talent-bio-entry table th {
    color: #179ACE;
    font-weight: bold;
    font-size: 18px; /* 縦積みなので年号を少し大きくして見出し感を持たせる */
    letter-spacing: 0.05em;
    margin-bottom: 10px; /* 年号と経歴内容の間の隙間 */
}

/* 💡 経歴内容エリア（下の行） */
.talent-bio-entry table td:not(:first-child) {
    color: #595959;
    font-size: 15px;
    line-height: 1.8;
}

/* タレント詳細ナビゲーション全体の配置 */
.talent-navigation-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 100px;
    border-top: 1px solid #EAEAEA;
    padding-top: 50px;
    gap: 20px;
}

.nav-box {
    flex: 1;
}
.prev-artist { text-align: left; }
.back-to-list { text-align: center; }
.next-artist { text-align: right; }

/* 中央の戻るボタン（少し太めで安定感を出す） */
.btn-back-center {
    display: inline-block;
    padding: 14px 40px;
    background: #333;
    color: #fff;
    border-radius: 30px;
    letter-spacing: 0.1em;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-back-center:hover {
    background: #179ACE;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(23, 154, 206, 0.2);
}

/* 左右の前後の矢印ボタン（シャープで洗練されたデザイン） */
.btn-nav-arrow {
    display: inline-block;
    padding: 12px 30px;
    background: #FFF;
    color: #666;
    border: 1px solid #E0E0E0;
    border-radius: 30px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-nav-arrow:hover {
    border-color: #179ACE;
    color: #179ACE;
}

/* スマホ対応：はみ出さないように縦並び、またはコンパクトに */
@media (max-width: 768px) {
    .talent-navigation-container {
        flex-direction: column-reverse; /* 戻るを一番下にする心地よいUI */
        gap: 15px;
        padding-top: 40px;
    }
    .nav-box {
        width: 100%;
        text-align: center;
    }
    .btn-nav-arrow {
        width: 80%; /* スマホでは押しやすいように広げる */
    }
    .btn-back-center {
        width: 80%;
    }
}

/* =========================================
   スマホ（レスポンシブ）時のテーブル微調整
========================================= */
@media (max-width: 768px) {
    /* PCの段階ですでに縦積みになっているため、スマホでは余白と文字サイズを絞るだけ */
    .talent-bio-entry table tbody tr {
        padding: 18px 10px;
    }
    
    .talent-bio-entry table td:first-child,
    .talent-bio-entry table th {
        font-size: 16px;
        margin-bottom: 6px;
    }
    
    .talent-bio-entry table td:not(:first-child) {
        font-size: 14px;
    }
}

/* 💡 リスト（箇条書き）で経歴が書かれた場合の美しいグラデーションドット */
.talent-bio-entry ul {
    padding-left: 0;
    margin-bottom: 30px;
}

.talent-bio-entry ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 14px;
}

.talent-bio-entry ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, rgb(168, 224, 99) 0%, rgb(23, 154, 206) 100%);
    border-radius: 50%;
}


/* --- 戻るボタンエリア --- */
.back-btn-wrapper {
    text-align: center;
    margin-top: 80px;
    border-top: 1px solid #eee;
    padding-top: 40px;
}

.btn-back {
    display: inline-block;
    padding: 14px 45px;
    background: #333;
    color: #fff;
    border-radius: 30px;
    letter-spacing: 0.15em;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.btn-back:hover {
    background: #555;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}


/* =========================================
   💡 厳格なデバッガー実装：完全スマホ対応（レスポンシブ）
========================================= */
@media (max-width: 768px) {
    .talent-main {
        margin-top: 110px; /* スマホ用固定ヘッダーの高さに調整 */
        padding: 0 20px;
    }
    
    /* 2カラムを解除して縦並びにする */
    .talent-detail-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    
    /* 左カラムを100%幅にし、追従（sticky）を解除 */
    .talent-profile-left {
        width: 100%;
        position: static;
    }
    
    .talent-photo {
        max-width: 320px; /* スマホで縦長になりすぎないよう制限 */
        margin: 0 auto;
    }
    
    .talent-name {
        font-size: 28px;
        text-align: center;
    }
    
    .talent-sub-title {
        text-align: center;
    }
    
    .talent-bio-entry table tr {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
    }
    
    .talent-bio-entry table tr th,
    .talent-bio-entry table tr td {
        padding: 4px 0;
        width: 100%;
        border: none;
    }
    
    .talent-bio-entry table tr th {
        color: #179ACE;
        font-size: 12px;
    }
}

/* =========================================
   タレント紹介（ARTISTS）- プレミアムカード完全体
========================================= */
#artists .talent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* カード幅を少し広げてリッチに */
    gap: 40px; /* カード同士の隙間を広げて呼吸させる */
    padding: 0;
}

#artists .talent-card {
    background: #FFF;
    border: none;
    border-radius: 12px;
    overflow: hidden; /* 角丸を綺麗に保つ */
    position: relative; /* 💡 疑似要素の基準点 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 💡 新実装：ニュースと完全同期。左側にスタンバイさせておく縦のグラデーションライン（最初は太さ0） */
#artists .talent-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0; /* 最初は見えない */
    background: linear-gradient(135deg, rgb(168, 224, 99) 0%, rgb(23, 154, 206) 100%);
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10; /* 写真や文字よりも一番手前に表示させる */
    pointer-events: none; /* 万が一のクリック邪魔を防止 */
}

/* ON mouse (ホバー) 時のカード全体の浮き上がり */
#artists .talent-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}

/* 💡 ホバーした瞬間、左側から4pxのグラデーションボーダーが出現！ */
#artists .talent-card:hover::before {
    width: 4px;
}

/* タレント写真 */
#artists .talent-card img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

#artists .talent-card:hover img {
    transform: scale(1.03);
}

/* 代替画像（No Image） */
#artists .no-image-box {
    width: 100%;
    height: 380px;
    background: #eee;
}

/* 💡 インライン要素のズレを完璧に封じ込めるフレックスボックス設定 */
#artists .talent-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* タレント名（白背景部分） */
#artists .talent-card h3 {
    font-size: 16px;
    padding: 25px 20px;
    text-align: center;
    font-weight: bold;
    color: #464646;
    letter-spacing: 0.1em;
    margin: 0;
    transition: color 0.3s ease;
    position: relative; /* 上下のグラデーション線を配置する基準点 */

    /* 💡 新追加：文字の隠し余白を無視して、箱の「絶対的なド真ん中」に強制固定する */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 上下のグラデーションボーダー（通常時は20%の薄さで上品に） */
#artists .talent-card h3::before,
#artists .talent-card h3::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(168, 224, 99, 0.2) 0%, rgba(23, 154, 206, 0.2) 100%);
    transition: background 0.3s ease, height 0.3s ease;
}

/* 上線（写真との境界） */
#artists .talent-card h3::before {
    top: 0;
}

/* 下線（カードの最下部） */
#artists .talent-card h3::after {
    bottom: 0;
}

/* --- ホバー（マウスオーバー）時の動き --- */
#artists .talent-card:hover h3 {
    color: #179ACE; /* 文字がライトブルーに */
}

#artists .talent-card:hover h3::before,
#artists .talent-card:hover h3::after {
    /* ホバーした瞬間に上下のラインが100%鮮やかに発色し、2pxに太くなる */
    background: linear-gradient(90deg, rgb(168, 224, 99) 0%, rgb(23, 154, 206) 100%);
    height: 2px;
}

/* =========================================
   フッター（footer.php）用スタイル
========================================= */
.site-footer {
    background: #595959;
    color: #fff;
    text-align: center;
    padding: 25px 0;
    font-size: 14px;
    letter-spacing: 0.05em;
    margin-top: 50px;
}

/* =========================================
   📱 スマホ特化のレイアウト調整（文字サイズ＆ニュース縦積み）
========================================= */
@media (max-width: 768px) {
	
	/* 💡 MVキャッチコピーのスマホ最適化 */
    #mv h2 {
        font-size: 28px; /* スマホ画面に合わせて文字サイズを少し小さく */
        line-height: 1.6; /* 2行になった時の行間を綺麗に調整 */
    }
    
    /* 💡 スマホの時だけ改行タグ（br.sp-br）を有効にする */
    .sp-br {
        display: block;
    }
    
    /* 💡 1. コンセプト文章の最適化 */
    .concept-text {
        font-size: 14px; /* スマホで読みやすいサイズに縮小 */
        line-height: 2.2; /* 行間を広げて窮屈さをなくす */
        text-align: left; /* スマホでは左揃えの方が圧倒的に読みやすい */
    }
    
    /* PC用の強制改行をスマホでは無効化し、画面幅に合わせて自然に折り返させる魔法 */
    .concept-text br {
        display: none;
    }
    
    /* 太字（見出し部分）の調整 */
    .concept-text b {
        display: block;
        font-size: 16px;
        margin-top: 40px; /* 段落の区切りとして上余白を取る */
        margin-bottom: 15px;
        text-align: center; /* 見出しだけは中央揃え */
        color: #179ACE; /* スマホだと目立ちにくいのでブランドカラーで装飾 */
    }
    .concept-text b:first-child {
        margin-top: 0;
    }

    /* 💡 2. ニュース一覧を「日付・カテゴリ」の下に「タイトル」の縦積みに変更 */
    #news ul li {
        display: block; /* 横並び（flex）を強制解除 */
        padding: 20px 40px 20px 20px; /* 右側は矢印アイコン用に余白をあけておく */
    }
    
    /* 日付とカテゴリは横並びにする */
    #news ul li .date {
        display: inline-block;
        font-size: 13px;
        margin-right: 12px;
        margin-bottom: 12px; /* タイトルとの隙間 */
    }
    
    #news ul li .cat-label {
        display: inline-block;
        vertical-align: top;
        margin-bottom: 12px;
    }
    
    /* タイトルは100%の幅を使って広々と配置 */
    #news ul li .news-title {
        display: block;
        width: 100%;
        padding-right: 0;
        font-size: 15px;
        line-height: 1.6;
    }

    /* 矢印アイコンの位置を、縦積みになっても常にブロックの「中央右端」に固定 */
    #news ul li::after {
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
    }
    #news ul li:hover::after {
        transform: translate(5px, -50%);
    }
}