/*
Theme Name: JP FXKetty
Description: FX教育サイト「ケッティー」専用WordPressテーマ。TailwindCSSを使用したモダンなデザインでFXトレーディング教育に特化したレスポンシブテーマです。
Author: JP FXKetty Team
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jp-fxketty
Tags: education, trading, fx, responsive, tailwindcss
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
*/

/* 
 * このテーマはTailwindCSSを使用しています。
 * メインのスタイルは dist/output.css に生成されます。
 * カスタムスタイルが必要な場合は、このファイルに追加してください。
 */

/* テーマの基本設定 */
body {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo UI', sans-serif;
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.7;
}

/* 見出し用フォント */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero-title {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* 本文の読みやすさ向上 */
p, li, span {
    line-height: 1.8;
    letter-spacing: 0.01em;
}

/* WordPressの管理バー調整 */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* カスタムスタイル */
.btn-ketty {
    @apply inline-block bg-ketty-base hover:bg-yellow-500 text-ketty-accent font-bold py-3 px-8 rounded transition-colors duration-300;
}

/* アクセシビリティ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}