@charset "UTF-8"; /*
assets/css/coupon.css
牛角 学生グループ限定食べ放題 クーポンページ共通 — .max_content（中身）のスタイル
（hp/coupon など各クーポンページから読み込む。QRコード画像は各ページ側に配置）
デザイン基準幅: 865px / 表示上限: 660px
--dpx = デザイン1px相当（865pxデザインを画面幅に比例縮小、660px以上では0.763px固定）
※assets/js/script.js が .max_content の data-design-width 属性を基に実幅から --dpx を再設定する
※Q&A画像（../../assets/images/）は880px基準のためブラウザの幅100%スケールに任せる（デザインも同比率で配置）
*/
:root {
    --dpx: min(0.1156069vw, 0.7630px);
    --coral: #ff535e;
    --yellow: #fff354;
    --blue-txt: #0164b6;
    --blue-bar: #00a9e3;
}

.max_content {
    position: relative;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    background: #fff;
    font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "HG丸ｺﾞｼｯｸM-PRO", "メイリオ", Meiryo, sans-serif;
}

.max_content > img, .code > img:first-child, .qaBody img {
    width: 100%;
    height: auto;
}

/*====================
キャンペーン画像下の注釈
（campaign.png直下 上10 / 左端76 / フォント20 行28 / drinkまで計73）
====================*/
.campaign_notes {
    background: #fff;
    padding: calc(10 * var(--dpx)) 0 calc(7 * var(--dpx));
}

.campaign_notes li {
    width: calc(713 * var(--dpx));
    margin: 0 auto;
    color: #009ad1;
    font-size: calc(20 * var(--dpx));
    font-weight: 700;
    line-height: calc(28 * var(--dpx));
    text-align: left;
    padding-left: calc(22 * var(--dpx));
    text-indent: calc(-22 * var(--dpx));
}

/*====================
クーポンコード
（code_ttl直下: QR 244角 +12 / 有効期限 +54 / 保存帯 +38）
====================*/
.code {
    background: #fff;
    text-align: center;
}

.code_qr {
    width: calc(336 * var(--dpx));
    height: auto;
    margin: calc(44 * var(--dpx)) auto 0;
}

.code_expiry {
    margin-top: calc(54 * var(--dpx));
    color: #020202;
    font-size: calc(24 * var(--dpx));
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.2;
}

/* 有効期限が複数行続く場合は間隔を詰める */
.code_expiry + .code_expiry {
    margin-top: calc(10 * var(--dpx));
}

.code_save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(747 * var(--dpx));
    height: calc(70 * var(--dpx));
    margin: calc(40 * var(--dpx)) auto 0;
    border-radius: calc(14 * var(--dpx));
    background: var(--coral);
    color: #fff454;
    font-size: calc(40 * var(--dpx));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-indent: 0.08em;
}

/*====================
利用条件
（保存帯下93→ボックス789x469 / 下82で店舗帯へ）
====================*/
.cond {
    position: relative;
    padding: calc(93 * var(--dpx)) 0 calc(82 * var(--dpx));
    background: #fff;
    overflow: hidden;
}

/* 左のティールドットデコ（回転格子＋ひし形クリップ、左端で見切れ） */
.cond_deco {
    position: absolute;
    left: calc(-165 * var(--dpx));
    top: calc(50 * var(--dpx));
    width: calc(210 * var(--dpx));
    height: calc(210 * var(--dpx));
    background-image: radial-gradient(circle, #a6e1df calc(5 * var(--dpx)), rgba(166,225,223,0) calc(6 * var(--dpx)));
    background-size: calc(21 * var(--dpx)) calc(20 * var(--dpx));
    transform: rotate(10deg);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    z-index: 0;
    pointer-events: none;
}

.cond_wrap {
    position: relative;
    width: calc(789 * var(--dpx));
    margin: 0 auto;
}

.cond_wrap::before, .cond_wrap::after {
    content: "";
    position: absolute;
    inset: 0;
}

.cond_wrap::before {
    background: #ffc6dc;
    transform: translate(calc(6 * var(--dpx)), calc(-13 * var(--dpx))) rotate(2deg);
}

.cond_wrap::after {
    background: #4fb9f1bf;
    transform: translate(calc(6 * var(--dpx)), calc(-13 * var(--dpx))) rotate(-2deg);
}

.cond_box {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: calc(21 * var(--dpx)) calc(25 * var(--dpx)) calc(60 * var(--dpx)) calc(50 * var(--dpx));
}

.cond_title {
    color: #fff;
    font-size: calc(42 * var(--dpx));
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    margin-bottom: calc(8 * var(--dpx));
}

.cond_list li {
    position: relative;
    color: #fff;
    font-size: calc(20 * var(--dpx));
    font-weight: 700;
    line-height: calc(30.5 * var(--dpx));
    padding-left: calc(30 * var(--dpx));
    text-align: left;
}

.cond_list li::before {
    content: "●";
    position: absolute;
    left: 0;
    top: calc(5 * var(--dpx));
    font-size: calc(20 * var(--dpx));
    line-height: 1;
}

.cond_list li.is-yellow {
    color: var(--yellow);
}

/*====================
販売対象外店舗
（帯h73 / 帯→ボックス70 / ボックスw733 / 下余白74）
====================*/
.stores {
    position: relative;
    background: #fff;
    padding-bottom: calc(74 * var(--dpx));
    overflow: hidden;
}

.stores_band {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(73 * var(--dpx));
    background: var(--coral);
    color: #fff;
    font-size: calc(40 * var(--dpx));
    font-weight: 700;
    letter-spacing: 0.1em;
    z-index: 1;
    position: relative;
}

.stores_box {
    width: calc(733 * var(--dpx));
    margin: calc(70 * var(--dpx)) auto 0;
    background: #cfeffa;
    border-radius: calc(20 * var(--dpx));
    overflow: hidden;
    z-index: 1;
    position: relative;
}

.stores_area {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(54 * var(--dpx));
    background: var(--blue-bar);
    color: #fff;
    font-size: calc(32 * var(--dpx));
    font-weight: 700;
    letter-spacing: 0.1em;
}

.stores_row {
    display: flex;
    align-items: flex-start;
    margin: calc(47 * var(--dpx)) calc(6 * var(--dpx)) calc(30 * var(--dpx)) calc(53 * var(--dpx));
}

/* バーと行の間隔はデザイン実測に合わせグループ毎に指定 */
.stores_box dl:nth-of-type(1) {
    margin-top: calc(47 * var(--dpx));
}

.stores_box dl:nth-of-type(2) {
    margin-top: calc(34 * var(--dpx));
    margin-bottom: calc(27 * var(--dpx));
}

.stores_box dl:nth-of-type(3) {
    margin-top: calc(18 * var(--dpx));
    margin-bottom: calc(25 * var(--dpx));
}

.stores_box dl:nth-of-type(4) {
    margin-top: calc(27 * var(--dpx));
}

.stores_box dl:nth-of-type(5) {
    margin-top: calc(40 * var(--dpx));
    margin-bottom: calc(22 * var(--dpx));
}

.stores_row dt {
    flex: 0 0 calc(115 * var(--dpx));
    height: calc(36 * var(--dpx));
    line-height: calc(36 * var(--dpx));
    background: #fff;
    border-radius: calc(10 * var(--dpx));
    color: #00a0e0;
    font-size: calc(26 * var(--dpx));
    font-weight: 700;
    text-align: center;
}

.stores_row dd {
    padding-left: calc(20 * var(--dpx));
    color: var(--blue-txt);
    font-size: calc(31 * var(--dpx));
    font-weight: 700;
    line-height: calc(43 * var(--dpx));
    letter-spacing: 0.02em;
    text-align: left;
}

/*====================
ラインナップ導線
（ボックス下74→ボタン755x81 / 間隔12 / 注記22下 / Q&Aまで66）
====================*/
.lineup {
    background: #fff;
    padding-bottom: calc(111 * var(--dpx));
    position: relative;
    overflow: hidden;
}

/* Q&Aへ続くグラデーション（下端でqa.png上端色 #64bde2 に接続） */
.lineup::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #64bde2 0%, #63b4db 100%);
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        transparent 72%,
        rgba(0, 0, 0, .4) 86%,
        #000 100%
    );
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        transparent 72%,
        rgba(0, 0, 0, .4) 86%,
        #000 100%
    );
}

.lineup > * {
    position: relative;
    z-index: 1;
}

/* 右下の白ドットデコ（回転格子＋ひし形クリップ、qa.png内のドットへ連続） */
.lineup_dots {
    position: absolute;
    right: calc(-53 * var(--dpx));
    bottom: calc(-64 * var(--dpx));
    width: calc(170 * var(--dpx));
    height: calc(170 * var(--dpx));
    background-image: radial-gradient(circle, #fff calc(7 * var(--dpx)), rgba(255,255,255,0) calc(8 * var(--dpx)));
    background-size: calc(32 * var(--dpx)) calc(34 * var(--dpx));
    transform: rotate(16deg);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    z-index: 0;
    pointer-events: none;
}

.lineup_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(755 * var(--dpx));
    height: calc(81 * var(--dpx));
    margin: 0 auto;
    border-radius: calc(41 * var(--dpx));
    background: var(--coral);
    box-shadow: calc(11 * var(--dpx)) calc(11 * var(--dpx)) 0 var(--yellow);
    color: #fff;
    font-size: calc(29 * var(--dpx));
    font-weight: 700;
}

.lineup_btn + .lineup_btn {
    margin-top: calc(30 * var(--dpx));
}

.lineup_btn:hover {
    opacity: 0.8;
}

.lineup_note {
    margin-top: calc(22 * var(--dpx));
    color: #111;
    font-size: calc(20 * var(--dpx));
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

/*====================
Q&A（全体アコーディオン）
====================*/
.qa {
    line-height: 0;
}

.qaTrigger {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.qaTrigger img {
    width: 100%;
    height: auto;
}

/* qa.png直下の展開バー（白い▼） */
.qaArrow {
    position: relative;
    display: block;
    height: calc(70 * var(--dpx));
    background: #0097d1;
    background-image: linear-gradient(90deg, #009ad4, #0086c4);
}

.qaArrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(46 * var(--dpx));
    height: calc(28 * var(--dpx));
    transform: translate(-50%, -50%);
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform 0.4s ease;
}

.qa.is-open .qaArrow::before {
    transform: translate(-50%, -50%) rotate(180deg);
}

.qaBody {
    height: 0;
    overflow: hidden;
    transition: height 0.45s ease;
}

/* JS無効時は展開表示 */
html:not(.js) .qaBody {
    height: auto;
}

/*====================
下部注記
（上159 / 幅650 / 行約31px / 下60）
====================*/
.bottom_txt {
    background: #fff;
    padding: calc(70 * var(--dpx)) 0 calc(60 * var(--dpx));
}

.bottom_notes {
    width: calc(650 * var(--dpx));
    margin: 0 auto;
}

.bottom_notes li {
    color: var(--blue-txt);
    font-size: calc(22 * var(--dpx));
    font-weight: 700;
    line-height: calc(30.5 * var(--dpx));
    text-align: left;
    padding-left: calc(22 * var(--dpx));
    text-indent: calc(-22 * var(--dpx));
}

/*====================
追従ヘッダー用スペーサー
（.headerはposition:fixedのため、クーポンはコンテンツ先頭を押し下げる。
  高さ＝header.png表示高（幅65vw・最大470px、比率150/1157）＋上下マージン25px）
====================*/
.header_spacer {
    height: calc(min(65vw, 470px) * 0.12965 + 25px);
    background: #000;
}