@charset "utf-8";

/* --- 1. 基本設定 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans JP', sans-serif; color: #373E42; background-color: #FDFDFD; line-height: 1.6; overflow-x: hidden; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; margin-top:80px;}
.text-center { text-align: center; }
.white-text { color: #fff; }
.event-info {margin-bottom:0;}
.c-btn--sm a {background-color: #E96D80!important;}    
.event-info span { font-weight:bold; padding-right: 12px;}
.category-tag {  font-size: 18px; font-weight: 600;}
.info {padding-bottom: 12px;}
.event-card ul {padding-bottom: 12px;}
.cta-content h3 span { font-size: 18px;}
/* --- 2. 画像の正方形設定 (共通) --- */
.image-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.image-container img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* どんな画像も正方形にする */
    object-fit: cover;   /* 隙間なく埋めてトリミング */
    display: block;
}

/* --- 3. タイポグラフィ --- */
.large-heading { font-size: 32px; font-weight: bold; line-height: 1.4; margin-bottom: 20px; }
.heading { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
.sub-heading { font-size: 18px; font-weight: bold; margin-bottom: 8px; }
.p-title { font-size: 32px; font-weight: bold; margin-bottom: 40px; }
.slide-sub-heading { font-size: 24px; font-weight: bold; line-height: 1.4; margin-bottom: 12px;}

/* --- 4. ボタン --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* ←これを追加：左右中央揃え */
    background-color: #E96D80;
    color: #fff;
    transition: .3s;
    border: 2px solid #E96D80;
    padding: 10px 30px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    margin-top: 15px;
    
    /* ボタンの幅を一定にしたい場合は以下を追加 */
    /* min-width: 200px; */
}

.btn::after {
    content: '\f08e';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 10px;
}

.btn:hover {
    background: #fff;
    color: #E96D80;
}
.p-header-floating-btn__sp-icon-btn {display:none;}

/* --- 5. 各セクション --- */
.filter-tabs { display: flex; justify-content: center; gap: 10px; margin: 40px 0; flex-wrap: wrap; }
.category-btn {
    background: #fff; border: 1px solid #E96D80; color: #E96D80; padding: 10px 20px; border-radius: 4px;
    font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s;
}
.category-btn:hover { background: #E96D80; color: #fff; }

/* イベントカード（上部） */
.event-card {
    background: #fff; display: flex; flex-direction: row-reverse; margin-bottom: 24px;
    border-left: 8px solid #E96D80; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.card-content { flex: 1; padding: 30px; }
.event-card .image-container { width: 35%; min-width: 250px; } /* PCでの画像幅指定 */

/* キャンペーンの流れ */
.campaign-flow { /*padding: 80px 0;*/; background-color: #fff; }
.flow-container { display: flex; justify-content: space-around; align-items: center; gap: 10px; }
.flow-step { background: #FFF0F2; padding: 30px; border-radius: 15px; text-align: center; flex: 1; width: 100%;}
.circle { width: 50px; height: 50px; background: #fff; border-radius: 50%; margin: 0 auto 15px; }
.flow-arrow { color: #E96D80; font-size: 20px; }

/* --- 6. スライダー (左右チラ見せ設定) --- */
.bottom-cta { background-color: #E96D80; padding: 56px 0; width: 100%; overflow: hidden; }
.cta-slider-outer {
    width: 100%;
    /*margin-top: 40px;*/
    position: relative;
    overflow: hidden;
    /* iOS Safariで横スワイプをJSに開放する */
    touch-action: pan-y; 
    /* 文字選択がスワイプの邪魔をしないようにする */
    -webkit-user-select: none;
    user-select: none;
    /* 指の反応を良くする */
    -webkit-tap-highlight-color: transparent;
}
.cta-slider-outer:active { cursor: grabbing;}
.cta-slider-inner {
    display: flex;
    will-change: transform;
    gap: 20px;
    /* スワイプ中もスムーズに動くように */
    cursor: grab;
}
.cta-card-inner, .cta-card-inner * { -webkit-user-drag: none;}
.cta-slide {
    flex: 0 0 85%; 
    max-width: 800px; 
    opacity: 0.6;
    transition: opacity 0.4s;
    /* ★重要：noneからauto、または削除してください */
    pointer-events: auto !important; 
}
.cta-slide img {
    /* 画像だけは「ドラッグ（保存メニュー）」が出ないようにする */
    -webkit-user-drag: none;
    pointer-events: none;
}
.cta-content a { pointer-events: auto;}
.cta-slide:has(+ .cta-slide) { /* CSSのテクニックで現在位置付近を調整可能ですが、JSで制御するのが確実です */ }

.cta-slide.active-focus { opacity: 1; }

.cta-card-inner {
    display: flex; background-color: #fff; border-radius: 20px; width: 100%; max-width: 800px;
    height: 100%; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); margin: 0 auto;
}
.cta-thumb { width: 45%; background-color: #EDEDED; }
.cta-content { width: 55%; padding: 30px; display: flex; flex-direction: column; justify-content: center; text-align: left; }

/* ドット */
.fake-pagination { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.fake-pagination span { width: 8px; height: 8px; background: rgba(255,255,255,0.4); border-radius: 50%; transition: 0.3s; }
.fake-pagination span.active { background: #fff; transform: scale(1.3); }

/* --- 7. レスポンシブ --- */
@media (max-width: 480px) {
    .sp-hide { display: none; }
    .event-card { flex-direction: column-reverse; }
    .event-card .image-container { width: 100%; height: 100%; }
    .heading { font-size: 20px;}
    .flow-container { flex-direction: column; }
    .flow-arrow { transform: rotate(90deg); margin: 10px 0; }
    .slide-sub-heading { font-size: 20px; margin-bottom: 12px;}
    .flow-container {  gap: 0px; }
    .category-btn {font-size: 14px;}
    .bottom-cta {padding: 40px 0;}
    .campaign-flow {padding: 0;}
    .p-title {font-size: 24px;}
}
    @media (max-width: 768px) {
    /* スマホ・タブレットのスライダー設定 */
    .cta-slide { flex: 0 0 85%; opacity: 1; }
    .cta-card-inner { flex-direction: column; height: auto; }
    .cta-thumb { width: 100%; height: 100%; }
    .cta-content { width: 100%; padding: 20px; }
    .large-heading { font-size: 24px; }
}

@media (min-width: 481px) {
    .pc-hide { display: none; }
}