/*クラスは.（クラス名）から始める*/
body {
    
    /*背景画像の設定*/
    background-image: 
        linear-gradient(to bottom, white 600px, transparent 750px),
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
        url('./../img/japanese-paper.jpg');
    background-repeat: repeat;
}
.logo img {
    width: 80%;
    /*px（ピクセル）でも画面に対する比率（％）でもオッケー*/
    height: auto;
    /*指定した要素をブロックレベル要素として扱う。
    （親要素の幅いっぱいに広がり、他の要素と横に並ばない。改行される。
    width、height、margin、paddingといったプロパティを自由に指定できる）*/
    display: block;
    margin: 0 auto;
}

.welcome-font {
    font-family: "Kokoro", "Yu Mincho", serif;
    text-align: center;
}

.twitter-tweet {
    margin: 0 auto;
    display: block;
}
/* --- 見出し（h2）のデザイン共通化 --- */
.slider-section h2, 
.about h2, 
.output h2 {

    text-align: center;
    border-bottom: none;
    display: block; /* インラインからブロックに変えて幅を持たせる */
    /* 左側に太い赤線（御札の背） */
    border-left: 10px solid #d32f2f;
    /* 背景をうっすら赤くする */
    background: linear-gradient(to right, #fff0f0, transparent);
    padding: 10px 15px; /* 文字の周りに余白 */
    margin-bottom: 30px;
    text-align: left; /* 左寄せにする */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);/* 影をつけて少し浮かせる */
}
/* ここまでセクション共通設定 */

.flexbox1 {
    display: flex;
    flex-direction: row;
    justify-content: center; 
    background-color: #222;
    width: 100%;
    padding: 15px 0;
    margin: 20px 0;
    list-style: none; 
    padding-left: 0; /* 左の余計な隙間をリセット */
}

.flexbox1 li {
    font-family: 'Shippori Mincho', serif;
    margin: 0 50px; /* ★「左右に30pxずつ」の隙間を作る */
}

.flexbox1 a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 15px;
    transition: all 0.5s ease-out;
    border-radius: 5px;
    display: block; /* クリック範囲を安定させる */
}

.flexbox1 a:hover {
    background-color: #ab5151;
    color: white;
}

.flexbox1 a.current {
    background-color: #d32f2f; /* 赤い背景 */
    color: white;              /* 白文字 */
    pointer-events: none;      /* クリックできないようにする（今いるページなので） */
}
p {
    font-size: 80%;
}
/* テキスト読み込みエリアの共通設定 */
.text-loader {
    /* ★必須：テキストファイルの改行やスペースをそのまま表示する */
    white-space: pre-wrap;
  }

/*ここから各画像の動作設定*/
/*クラスの名前は適当だから自由に変えてね*/
.card {
    position: relative; /* 子要素(badge)の基準点 */
    width: 100%; /* 親要素（スライド）の幅に合わせる */
    max-width: 300px; /* ただし300px以上にはならないようにする */
    background: white;
    border-radius: 15px; /*  数値を変えると角の丸みが変わる */
    overflow: hidden;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.3s ease; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card img {
    width: 100%;
    display: block;
}

.card-text {
    padding: 20px;
}

/* 右上の「New!」バッジ */
.badge {
    position: absolute; 
    top: 10px;
    right: 10px;
    /* グラデーション背景 */
    background: linear-gradient(45deg, #ff6b6b, #ff8e53);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
/* マウスが乗った時 (:hover) */
/* カードにマウスを乗せた時の動き */
.card:hover {
    transform: translateY(-7px);
    box-shadow: 0 10px 25px rgba(211, 47, 47, 0.4); 
    filter: brightness(1.1);
}


/*ここまで各画像の動作設定*/

/* =========================================
   スマホ対応の強力な修正パッチ
   （style.cssの一番下に追記してください）
   ========================================= */

@media screen and (max-width: 600px) {

    /* 1. コンテンツの幅を広げる */
    /* PCでは60%だったのを、スマホでは95%まで広げて見やすくします */
    .slider-section, 
    .nenkan-yotei, 
    .katsudo-fukei, 
    .kouryuu, 
    .about, 
    .output {
        max-width: 95% !important; /* 強制的に広げる */
        padding: 10px;
        margin: 0 auto;
    }

    /* 2. 画像の幅をスマホ画面に合わせる */
    /* HTMLに書いた width="40%" などを無視して大きく表示 */
    img {
        max-width: 100%;
        height: auto;
    }
    .katsudo-fukei img, 
    .nenkan-yotei img {
        width: 100% !important; /* 強制的に幅いっぱい */
        margin-bottom: 10px;
    }

    /* 3. メニューバーの調整 */
    .flexbox1 {
        flex-wrap: wrap;       /* 入り切らない時は折り返す */
        height: auto;          /* 高さを自動にして文字被りを防ぐ */
        padding: 10px 0;
        gap: 5px;              /* ボタン同士の隙間 */
    }
    
    .flexbox1 li {
        width: 45%;            /* 2列に並べる（お好みで100%にすれば縦1列） */
        margin: 5px auto;
        text-align: center;
    }

    .flexbox1 a {
        font-size: 14px;       /* 文字を少し小さく */
        padding: 8px;          /* ボタンの大きさ調整 */
        display: block;
    }

    /* 4. カード（画像や記事）の調整 */
    .card, .gallery-item {
        width: 100% !important;     /* 画面幅いっぱいに */
        max-width: none !important; /* 制限解除 */
        margin-bottom: 20px;
    }

    /* 5. ギャラリー（Output）を1列にする */
    .gallery-container, 
    .nenkan-yotei-container {
        flex-direction: column; /* 縦並びにする */
        gap: 20px;
    }

    /* 6. スライドショーの矢印を消す（邪魔なので） */
    .swiper-button-next,
    .swiper-button-prev {
        display: none; 
    }
    
    /* 7. タイトル文字サイズ調整 */
    h1.welcome-font {
        font-size: 24px;
        margin-top: 20px;
    }
    
    /* 8. フィルタボタン（Outputページ）の調整 */
    .filter-buttons {
        gap: 5px;
    }
    .filter-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}
/* =========================================
   ページ全体のフェードインアニメーション
   ========================================= */ 
@keyframes fadeInAnime {
    0% {
        opacity: 0;             /* 最初は透明 */
        transform: translateY(20px); /* 少し下にいる */
    }
    100% {
        opacity: 1;             /* 最後はくっきり */
        transform: translateY(0);    /* 元の位置に戻る */
    }
}

.first-visit {
    animation: fadeInAnime 1.5s ease-out; /* 少しゆっくりにして優雅に */
}


/* =========================================
   スマホ用：スライドショー高さ完全固定パッチ
   ========================================= */

@media screen and (max-width: 600px) {
    
    /* 1. スライド1枚の「高さ」を数値で固定してしまう */
    /* これで中身がどうあれ、箱の大きさは絶対変わりません */
    .swiper-slide {
        height: 450px !important; /* ※高すぎたら数値を減らしてください */
        display: flex;            /* 中身の配置を整える */
        justify-content: center;  /* 横方向・中央 */
    }

    /* 2. カードをその高さ一杯まで広げる */
    .swiper-slide .card {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column; /* 上から順に並べる */
        justify-content: flex-start; /* 上詰めにする */
    }

    /* 3. 画像の高さ制限（前回と同じ） */
    .swiper-slide .card-image img {
        height: 200px !important; /* 画像エリアの高さ */
        width: 100%;
        object-fit: cover;
    }

    /* 4. テキストエリアの調整 */
    .swiper-slide .card-text {
        flex: 1;           /* 残りのスペースを使う */
        overflow: hidden;  /* 万が一文字が多すぎても枠からはみ出させない */
    }

    /* 5. スライドショー全体の余白調整 */
    .slider-section {
        height: 500px; /* ページネーション（点々）を含めた場所確保 */
        overflow: hidden;
    }
}