body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    margin:0; padding:0;
    background: #5675f2;
    text-align: center;
    background-image: url(../img/bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
     height: 100vh; /* ビューポートの高さいっぱい */
}

h1 a{
    font-size: 36px;
    color: #f1b902;
    margin-top:50px;
    text-shadow: 0 0 15px #1f1a01;
    text-decoration: none;
}

/* 日替わり格言のカード */
.daily-quote {
    background: rgba(0,0,0,0.7); /* 半透明のカード */
    color: #fff;                        /* 白文字に変更 */
    padding: 20px;
    margin: 20px auto 40px auto;
    border-radius: 20px;
    max-width: 650px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}
/*トップの格言*/
.daily-quote .quote-text {
    font-size: 1.4rem;
    font-weight: 600;
    
}

.daily-quote .quote-author {
    font-size: 16px;
    color: #ffd700;  /* ゴールドにして見やすく */
    margin-top: 10px;
    text-align: center;
}
.daily-quote  .quote-bio{
    font-size: 0.8rem;
}


/* カテゴリーボタン */
.button-group{
    margin-bottom:50px;
}

.button-group button {
    background-color: #6c63ff;
    color: white;
    padding: 15px 25px;
    margin: 10px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: 0.3s;
}
.button-group button:hover {
    background-color: #574b90;
    transform: translateY(-3px);
}

.button-group p{
    color: rgb(113, 6, 196);
}
/* 占いカード */
.quote-card {
    background: rgba(0,0,0,0.7);
    color:#fff;
    padding: 30px;
    margin: 50px auto;
    border-radius: 25px;
    max-width: 650px;
    width: 90%; /* スマホ対応 */
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6), 0 0 50px rgba(255, 215, 0, 0.3) inset;
    animation: fadeIn 1s ease-in-out;
}

.quote-card h2 {
    font-size: 22px;
    color:#ffd700;
    margin-bottom:20px;
}

.quote-text {
    font-size: 1.4rem!important;
    line-height: 1.4;
    margin-bottom: 15px;
}

.quote-author {
    font-size: 16px;
    color: #ffd700;
    text-align: center;
    margin-top: 0;
}
.quote-bio{
    font-size: 0.8rem;
}

/* 運勢の星 */
.quote-card .luck {
    font-size:22px;
    margin-top:15px;
    color:#fcf002;
    text-shadow:0 0 8px rgba(52, 39, 1, 0.4);
    padding-bottom:10px;
}

/* もう一度占うボタン */
.reload-button {
    margin-top:25px;
    background-color: #ff6f61;
    padding: 12px 25px;
    font-size:16px;
}
.reload-button:hover {
    background-color:#e55349;
    transform: translateY(-2px);
}

/* 星アニメーション */
.luck {
    font-size: 22px;
    margin-top: 15px;
    padding-bottom: 10px;
}

/* 光る星 */
.star-glow {
    display: inline-block;
    animation: glow 1.5s infinite alternate;
}

/* アニメーション定義 */
@keyframes glow {
    from {
        text-shadow: 0 0 4px #ffdf00, 0 0 8px #ffdf00;
        transform: scale(1);
    }
    to {
        text-shadow: 0 0 12px #ffdf00, 0 0 16px #ffea88;
        transform: scale(1.2);
    }
}


/* 光る運勢の星 */
.star-glow {
    color: gold;
    text-shadow: 0 0 5px #fff, 0 0 10px #ffd700, 0 0 20px #ffea00;
    animation: glow 1.5s infinite alternate;
}
@keyframes glow {
    from {text-shadow: 0 0 2px #fff, 0 0 5px #ffd700, 0 0 10px #ffea00;}
    to   {text-shadow: 0 0 10px #fff, 0 0 20px #ffd700, 0 0 30px #ffea00;}
}

/* フェードイン */
@keyframes fadeIn {
    from {opacity:0; transform: translateY(-20px);}
    to {opacity:1; transform: translateY(0);}
}

/* フッター */
footer {
    margin-top:50px;
    font-size:14px;
    color:#ccc;
}
/* Copyright */
/* Google Fonts 利用例 */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

.copy {
  text-align: center;
  line-height: 1.4;
  font-size: 0.8rem;
  color: #333;
  margin-bottom: 40px;
}

.copy .main {
  font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  
  font-weight: 500;
}

.copy .sub {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  
}

.copy .copyright {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.9rem;
  opacity: 0.7;
}


/* レスポンシブ調整 */
@media (max-width: 480px) {
    h1 { font-size: 28px; margin-top:30px; }
    .quote-card { padding: 20px; }
    .quote-card h2 { font-size: 20px; }
    .quote-card p { font-size: 16px; }
    .quote-card .luck { font-size: 20px; }
    .button-group button, .reload-button { padding: 10px 18px; font-size: 14px; margin:5px; }
}