@charset "UTF-8";

/* * Green Trust Support カスタムスタイルシート
 * ここにCSSを記述すると、デフォルトのデザインを上書きできます。
 */

/* =========================================
   共通設定
   ========================================= */

/* フォントの微調整 */
body {
    letter-spacing: 0.03em;
    /* モバイルでのタップハイライト色を変更 */
    -webkit-tap-highlight-color: rgba(106, 151, 0, 0.2);
}

/* ヒーローセクションの背景設定 */
.hero-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* パララックス効果（好みで有効化してください） */
    /* background-attachment: fixed; */
}

.bg-gts-yellow {
    background-color:#caac03 ;
}

.bg-gts-red {
    background-color:#ee380b ;
}

.bg-gts-orange {
    background-color:#ff7214 ;
}

/* =========================================
   アニメーション
   ========================================= */

.w-full > .moon {
    margin-top:40px ;
    margin-bottom:20px ;
    border-width:10px ;
}

/* ふわっと浮くアニメーション（価格表示用） */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 4s ease-in-out infinite;
}

/* メニューが上から降りてくるアニメーション */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.animate-fade-in-down {
    animation: fadeInDown 0.3s ease-out;
}

/* =========================================
   コンポーネント調整
   ========================================= */

/* 特徴カードのホバー効果 */
.feature-card {
    background-color: #fff;
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #f3f4f6;
}
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* プライマリーボタン（Tailwindのクラスで足りない場合の補足） */
.btn-primary {
    background-color: #6A9700; /* config.phpのcolor_mainと同じにする */
    color: white;
    transition: all 0.2s;
}
.btn-primary:hover {
    background-color: #4e7000;
    transform: scale(1.02);
}
.btn-primary:active {
    transform: scale(0.98);
}

/* =========================================
   モバイル調整 (メディアクエリ)
   ========================================= */

/* 画面幅が小さいスマホ端末(iPhone SE等)向けの微調整 */
@media (max-width: 375px) {
    .text-6xl {
        font-size: 3rem; /* 価格の文字を少し小さく */
    }
}