@charset "utf-8";
/* CSS Document */


/* ==========================================
   1. 協力店インタビュー用スタイル
========================================== */
/* 外部セクションの余白調整 */
#interview-slider-section {
    padding: 40px 0;
    font-family: "Noto Sans JP", sans-serif;
}

/* contentInnerの中に配置するベージュのボックス */
.interview-container-box {
    background-color: #f9f6f0;
    padding: 50px 30px;
    border-radius: 10px;
    position: relative;
    overflow: hidden; /* コンテナボックスの幅でスライドを切り取る */
}
    
/* 吹き出しのような三角（イメージ図の再現） */
.interview-container-box::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #f9f6f0;
}

.interview-title {
    text-align: center;
    margin-bottom: 40px;
}

.interview-title h2 {
    color: #a35345;
    font-size: clamp(20px, 4vw, 24px);
    font-weight: bold;
    margin-bottom: 15px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

.interview-title p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
}

/* Swiperコンテナの幅と溢れ出しの設定 */
.swiper-interview {
    width: 100%;
    /* コンテナの外にあるスライド（右側の1枚目など）を見せるために重要 */
    overflow: visible !important; 
    padding: 10px 0 50px !important;
}

/* カードのデザイン */
.interview-card {
    background: #fff;
    border: 1px solid #ddd;
    display: flex;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.card-image {
    width: 40%;
    background: #eee;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-body {
    width: 60%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.shop-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.read-more {
    margin-top: auto;
    text-align: right;
    font-size: 13px;
    padding-top: 10px;
    font-weight: bold;
}

/* ボタン */
.btn-interview-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    max-width: 100%;
    height: 50px;
    margin: 30px auto 0;
    background-color: #a35345;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s;
}

.btn-interview-all:hover {
    opacity: 0.8;
}

/* Swiperドット */
.swiper-pagination-bullet-active {
    background: #333 !important;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .interview-container-box {
        padding: 40px 15px;
    }
    .interview-card {
        flex-direction: column;
    }
    .card-image, .card-body {
        width: 100%;
    }
    .card-image {
        aspect-ratio: 3 / 2;
    }
    /* スマホではカード幅を少し小さくして隣を見せる */
    .swiper-slide {
        width: 85% !important;
    }
}
    
/* PC時のスライド幅 */
@media screen and (min-width: 768px) {
    .swiper-slide {
        width: 550px !important; /* 1100px以上のコンテンツ幅があれば左右が見えます */
    }
}


/* ==========================================
   2. 食品ロス削減量表示用スタイル
========================================== */
.reduction-result-box { margin: 20px auto 40px; color: #1a1a1a; font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif; }
.record-period { text-align: center; font-size: 18px; font-weight: 700; color: #640125; margin-top: -10px; margin-bottom: 40px; }

/* ★PC・SP共通で縦並び */
.reduction-flex { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; }

/* トン・グラム表示（上側） */
.reduction-mass { text-align: center; line-height: 1.1; }
.mass-ton .num { font-size: 90px; font-weight: 700; letter-spacing: -0.01em; }
.mass-ton .unit { font-size: 45px; font-weight: 500; margin-left: 5px; }
.mass-gram { font-size: 36px; font-weight: 700; margin-top: 10px; }

/* おにぎり・個数表示エリア（下側） */
.reduction-onigiri {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; 
    flex-wrap: nowrap;
}

/* おにぎり画像 */
.onigiri-icon {
    display: block; /* ジャンプアニメーションを効かせるためにブロック要素化 */
    width: auto;
    height: 120px;
    object-fit: contain;
    /* 回転の軸はデフォルト（中央）にする事でジャンプが綺麗に見えます */
}

/* イコールテキスト */
.equal-txt { font-size: 60px; font-weight: 700; color: #1a1a1a; line-height: 1; margin-top: -10px; }

/* 個数テキスト部分 */
.onigiri-count { display: flex; align-items: baseline; white-space: nowrap; }
.onigiri-count .approx { font-size: 36px; font-weight: 700; margin-right: 5px; }

/* 数字部分（アニメーション対象） */
.onigiri-count .num {
    font-size: 90px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #1a1a1a; 
    display: inline-block; 
}
.onigiri-count .unit { font-size: 36px; font-weight: 700; margin-left: 5px; }

/* 注記 */
.reduction-note { text-align: right; font-size: 13px; color: #555; margin-top: 20px; font-family: 'Noto Sans JP', sans-serif; }

/* ==========================================
   スマホ（SP）レイアウト
========================================== */
@media screen and (max-width: 900px) {
    /* ★SPでも縦並びを維持し、隙間だけ少し詰める */
    .reduction-flex { flex-direction: column; gap: 30px; }
    .reduction-onigiri { gap: 10px; } 
}

@media screen and (max-width: 600px) {
    .record-period { font-size: 4vw; margin-bottom: 30px; }
    .mass-ton .num { font-size: 14vw; } .mass-ton .unit { font-size: 7vw; } .mass-gram { font-size: 5vw; }

    .onigiri-icon { height: 13vw; }
    .equal-txt { font-size: 8vw; margin-top: 0; } 

    .onigiri-count .approx { font-size: 3.5vw; } .onigiri-count .num { font-size: 9.5vw; } .onigiri-count .unit { font-size: 3.5vw; }
    .reduction-note { font-size: 3vw; margin-top: 15px; }
}

/* ==========================================
   ★アニメーション定義
========================================== */

/* 1. 数字の強調アニメーション（大きくなりながらオレンジ色に変化し、元のサイズに戻る） */
@keyframes pulseOrange {
    0% { transform: scale(1); color: #1a1a1a; }
    50% { transform: scale(1.15); color: #ff9900; } /* 1.15倍に拡大 */
    100% { transform: scale(1); color: #ff9900; } /* 元のサイズに戻る（色はオレンジのまま） */
}
.pulse-orange {
    animation: pulseOrange 0.6s ease-in-out forwards;
}

/* 2. おにぎりのジャンプ＆回転アニメーション（0.5秒） */
@keyframes jumpRotate {
    0% {
        transform: translateY(0) rotate(0deg);
        animation-timing-function: ease-out; /* 上がるときは勢いよく */
    }
    50% {
        /* 上に50px跳ねながら半回転 */
        transform: translateY(-50px) rotate(180deg);
        animation-timing-function: ease-in; /* 落ちるときは加速 */
    }
    100% {
        /* 元の位置に戻りながら一回転完了 */
        transform: translateY(0) rotate(360deg);
    }
}
.jump-rotate {
    animation: jumpRotate 0.5s forwards; /* ご指示通り 0.5秒 で実行 */
}