/*
Theme Name: studio-tachimachi-child
Template: arkhe
Description: STUDIO Tachimachi専用子テーマ
Version: 1.0.0
*/

/* ここに独自のCSSを記述 */

/* 変数定義（WordPress全体で使い回せます） */
:root {
    --st-apple-black: #333333;
    --st-apple-gray: #86868b;
    --st-apple-blue: #0066cc;
    --st-font-jp: "SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/* トップページ：ヒーローセクション全体 */
.st-hero {
    position: relative;
    width: 100%;
    height: 100vh; /* 画面いっぱいに表示 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
}

/* 背景画像の制御（PC/SP切り替え） */
.st-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; /* スクロール時の余白 */
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* 初期状態はPC画像 */
    background-image: url('https://photo.st-web.jp/wp-content/uploads/2026/02/da2428a5327e4e55feffa3655f717e06.jpg');
    transition: transform 0.1s ease-out;
}

/* モバイル用背景画像（スマホ） */
@media (max-width: 768px) {
    .st-hero-bg {
        background-image: url('https://photo.st-web.jp/wp-content/uploads/2026/02/4f6cf43910283fcf3236f373fd4210f1.jpg');
    }
}

/* 背景を少し暗くして文字を浮かせる */
.st-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
}

/* コンテンツ */
.st-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #ffffff;
    padding: 0 20px;
    max-width: 900px;
}

.st-hero-eyebrow {
    display: block;
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.st-hero-title {
    font-family: var(--st-font-jp);
    font-size: clamp(40px, 8vw, 84px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.st-hero-desc {
    font-size: clamp(17px, 3vw, 21px);
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.95;
    color: #f5f5f7;
}

/* ボタン */
.st-hero-actions {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.st-btn {
    text-decoration: none;
    font-size: 19px;
    font-weight: 600;
    transition: all 0.3s;
}

.st-btn-primary {
    background-color: #ffffff;
    color: #000000;
    padding: 16px 36px;
    border-radius: 40px;
}

.st-btn-primary:hover {
    background-color: #f5f5f7;
    transform: scale(1.03);
}

.st-btn-link {
    color: #ffffff;
}

.st-btn-link:hover {
    text-decoration: underline;
}

/* スクロールアニメーション演出 */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.2, 0, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* レスポンシブ調整（SP） */
@media (max-width: 768px) {
    .st-hero-title {
        font-size: 38px;
        margin-bottom: 16px;
    }
    .st-hero-desc {
        font-size: 16px;
        margin-bottom: 32px;
    }
    .st-hero-actions {
        flex-direction: column;
        gap: 20px;
    }
}


/* トップページ：ハブセクション全体設計 */
.st-hub {
    padding: 100px 0;
    background-color: #ffffff;
}

.st-hub-header {
    text-align: center;
    margin-bottom: 80px;
    padding: 0 24px;
}

.st-section-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--st-apple-gray);
    margin-bottom: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.st-section-title {
    font-family: var(--st-font-jp);
    font-size: clamp(26px, 5vw, 42px);
    font-weight: 700;
    color: var(--st-apple-black);
    line-height: 1.3;
}

/* タイルグリッドレイアウト */
.st-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 個別カードの共通スタイル */
.st-card {
    position: relative;
    height: 580px;
    background-color: #f5f5f7;
    border-radius: 30px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    padding: 56px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-card:hover {
    transform: scale(0.985); /* わずかに沈む動き */
}

.st-card-text {
    position: relative;
    z-index: 5;
}

.st-card h3 {
    font-size: 30px;
    font-weight: 700;
    color: var(--st-apple-black);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.st-card p {
    font-size: 16px;
    color: var(--st-apple-gray);
    margin-bottom: 20px;
    font-weight: 400;
}

.st-card-link {
    font-size: 17px;
    font-weight: 500;
    color: var(--st-apple-blue);
}

/* 画像の配置とズームアニメーション */
.st-card-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65%;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-card:hover .st-card-img {
    transform: scale(1.06);
}

/* ダークタイルのバリエーション */
.st-card-dark {
    background-color: #1d1d1f;
}
.st-card-dark h3 { color: #ffffff; }
.st-card-dark p { color: #86868b; }
.st-card-dark .st-card-img { opacity: 0.8; } /* 黒背景になじませる */

/* レスポンシブ調整（タブレット/スマホ） */
@media (max-width: 900px) {
    .st-grid { grid-template-columns: 1fr; }
    .st-card { height: 500px; padding: 40px; }
    .st-card h3 { font-size: 26px; }
}

@media (max-width: 480px) {
    .st-card { height: 420px; padding: 32px; }
    .st-card-img { height: 55%; }
}

/* トップページ：プロフィールセクションの磨き上げ */
.st-about {
    padding: 140px 24px;
    background-color: #ffffff;
}

.st-about-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 100px;
}

.st-about-visual {
    flex: 1.2;
}

.st-profile-img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    /* Apple風の微妙な影 */
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}

.st-about-text {
    flex: 1;
}

.st-about-name {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--st-apple-black);
}

.st-eng-name {
    display: block;
    font-size: 14px;
    color: var(--st-apple-gray);
    letter-spacing: 0.2em;
    margin-top: 4px;
}

.st-about-bio {
    font-size: 18px;
    color: #4b4b4b; /* 少しだけ濃くして可読性アップ */
    line-height: 1.9;
    margin-bottom: 32px;
}

/* 特別なイベントタイル（より強調するデザイン） */
.st-special-hub {
    padding: 0 0 120px;
    background: #ffffff;
}

.st-card-featured {
    background-color: #000 !important;
    color: #fff !important;
}

.st-card-badge-special {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(90deg, #ff3b30, #ff9500); /* Appleのプロモーション風グラデーション */
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

.st-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}

.st-card-link-white {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    display: block;
    margin-top: 20px;
    position: relative;
    z-index: 5;
}

/* レスポンシブ調整 */
@media (max-width: 850px) {
    .st-about-inner {
        flex-direction: column;
        gap: 50px;
        text-align: center;
    }
    .st-about-visual {
        width: 100%;
        max-width: 500px;
    }
}

/* --- コントラスト改善のための追加設定 --- */

/* テキストを確実に白くし、可読性を上げるための影を追加 */
.st-text-white {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.st-text-white-sub {
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

/* Apple風のスクリム（背景を暗くして文字を浮かせる手法） */
.st-card-scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 上部は薄く、下部の文字周りを濃くするグラデーション */
    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
}

/* リンクボタンの視認性向上 */
.st-card-link-white {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 15px;
    position: relative;
    z-index: 5;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    transition: 0.3s;
}

.st-card-link-white:hover {
    border-bottom: 1px solid rgba(255,255,255,1);
}

/* 教室タイルの画像不透明度調整（文字を読みやすくするため） */
.st-card-sm .st-card-img {
    opacity: 0.9;
}

/* バッジの強調 */
.st-card-badge-special {
    position: relative;
    z-index: 5;
    display: inline-block;
    padding: 4px 12px;
    background: #ff3b30; /* 視認性の高いApple Red */
    border-radius: 4px; /* Appleのバッジに多い少し角丸の矩形 */
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

/* スライダーセクションの設計 */
.st-journal {
    padding: 120px 0;
    background-color: #ffffff;
    overflow: hidden; /* はみ出しを隠す */
}

.st-journal-header {
    max-width: 1200px;
    margin: 0 auto 40px;
    padding: 0 24px;
}

/* スライダーコンテナ */
.st-slider-container {
    padding-left: calc((100vw - 1200px) / 2 + 24px); /* 1200px幅に合わせて左余白を調整 */
    overflow-x: auto;
    cursor: grab;
    -ms-overflow-style: none; /* IE, Edge用 */
    scrollbar-width: none; /* Firefox用 */
}

.st-slider-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari用（スクロールバーを隠す） */
}

.st-slider-track {
    display: flex;
    gap: 24px;
    padding-right: 48px;
}

/* 個別ポストカード */
.st-post-card {
    min-width: 400px;
    max-width: 400px;
    text-decoration: none;
    color: var(--st-apple-black);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-post-card:hover {
    transform: translateY(-8px);
}

.st-post-img {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 18px;
    background-color: #f5f5f7;
    margin-bottom: 20px;
}

.st-post-meta {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-apple-gray);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.st-post-card h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--st-apple-black);
}

/* コラム用カードの微調整（デザインを少し変える場合） */
.st-column-card .st-post-img {
    border-radius: 24px; /* コラムはより柔らかい印象に */
}

/* レスポンシブ調整 */
@media (max-width: 1200px) {
    .st-slider-container {
        padding-left: 24px;
    }
}

@media (max-width: 768px) {
    .st-post-card {
        min-width: 300px;
        max-width: 300px;
    }
    .st-post-img {
        height: 200px;
    }
    .st-post-card h3 {
        font-size: 17px;
    }
}

/* --- スライダー全体の基本設定（前回からの継承＋調整） --- */
.st-journal { padding: 120px 0; background: #fff; overflow: hidden; }
.st-slider-container { 
    padding-left: calc((100vw - 1200px) / 2 + 24px); 
    overflow-x: auto; 
    scrollbar-width: none; 
}
.st-slider-container::-webkit-scrollbar { display: none; }
.st-slider-track { display: flex; gap: 24px; padding-right: 48px; }

/* --- NEWバッジのデザイン --- */
.st-post-img { 
    position: relative; /* バッジ配置の基準点 */
    width: 100%; height: 250px; background-size: cover; 
    background-position: center; border-radius: 18px; 
    margin-bottom: 20px; 
}

.st-post-new {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ff3b30; /* Apple Red */
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    z-index: 10;
}

/* --- カード内テキスト --- */
.st-post-card { min-width: 400px; text-decoration: none; }
.st-post-meta { font-size: 13px; color: #86868b; margin-bottom: 8px; }
.st-post-card h3 { font-size: 20px; font-weight: 700; color: #333; line-height: 1.4; }

@media (max-width: 1200px) { .st-slider-container { padding-left: 24px; } }
@media (max-width: 768px) { .st-post-card { min-width: 300px; } }

/* 一覧ボタンのコンテナ */
.st-more-actions {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 24px;
    display: flex;
    justify-content: flex-start; /* 左寄せ。Apple風にするならcenterでも可 */
}

/* Apple風テキストリンクボタン */
.st-btn-more {
    font-size: 19px;
    font-weight: 500;
    color: var(--st-apple-blue);
    text-decoration: none;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.st-btn-more span {
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-btn-more:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.st-btn-more:hover span {
    transform: translateX(4px); /* ホバー時に矢印が少し右に動く */
}

/* モバイル調整 */
@media (max-width: 768px) {
    .st-more-actions {
        margin-top: 30px;
    }
    .st-btn-more {
        font-size: 17px;
    }
}

/* --- CTAセクションのデザイン --- */
.st-cta {
    padding: 160px 24px;
    background-color: #f5f5f7; /* Apple標準の薄グレー */
    text-align: center;
}

.st-cta-inner {
    max-width: 900px;
    margin: 0 auto;
}

.st-cta-title {
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 700;
    color: var(--st-apple-black);
    margin: 20px 0 30px;
    line-height: 1.2;
}

.st-cta-text {
    font-size: 19px;
    color: var(--st-apple-gray);
    margin-bottom: 60px;
    line-height: 1.7;
}

/* お問い合わせカード */
.st-cta-box {
    display: flex;
    gap: 24px;
    justify-content: center;
}

.st-cta-card {
    background: #ffffff;
    padding: 48px 32px;
    border-radius: 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-cta-card:hover {
    transform: translateY(-5px);
}

.st-cta-icon {
    font-size: 40px;
    margin-bottom: 24px;
}

.st-cta-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

.st-cta-card p {
    font-size: 14px;
    color: var(--st-apple-gray);
    margin-bottom: 24px;
}

.st-btn-cta {
    display: inline-block;
    background-color: var(--st-apple-blue);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 24px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}

.st-btn-cta:hover {
    background-color: #0077ed;
    transform: scale(1.05);
}

.st-cta-tel {
    font-size: 24px;
    font-weight: 700;
    color: var(--st-apple-black);
    text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .st-cta { padding: 100px 24px; }
    .st-cta-box { flex-direction: column; }
    .pc-only { display: none; }
}