@charset "UTF-8"; /*
assets/css/lp.css
牛角 学生グループ限定食べ放題 LP本体（hpページ）— .max_content（中身）のスタイル
デザイン基準幅: 880px / 表示上限: 660px
--dpx = デザイン1px相当（880pxデザインを画面幅に比例縮小、660px以上では0.75px固定）
※assets/js/script.js が .max_content の data-design-width 属性を基に実幅から --dpx を再設定する
*/
:root {
    --dpx: min(0.1136364vw, 0.75px);
    --coral: #ea535e;
    --yellow: #fff354;
    --blue-txt: #0d74be;
    --blue-bar: #00a8e3;
}

.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, .campaign > img, .qaBody img {
    width: 100%;
    height: auto;
}

/*====================
メインビジュアル
====================*/
.top_img {
    background: #111111;
}

/*====================
キャンペーン概要セクション（campaign画像＋CTA＋背景デコ）
デコは.campaign直下の背景オブジェクト（z-index:0）。.ctaを削除してもデコは残る
====================*/
.campaign {
    position: relative;
    background: #fff;
    overflow: hidden;
}

/* 左下の斜線デコ（セクション下端基準） */
.campaign_lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.campaign_lines::before, .campaign_lines::after {
    content: "";
    position: absolute;
    width: calc(90 * var(--dpx));
    height: calc(5 * var(--dpx));
    transform: rotate(-45deg);
}
.campaign_lines::before{
    background: #a5eff8;
}
.campaign_lines::after {
    background: #00d4e8;
}


.campaign_lines::before {
    left: calc(-10 * var(--dpx));
    bottom: calc(35 * var(--dpx));
}

.campaign_lines::after {
    left: calc(5 * var(--dpx));
    bottom: calc(20 * var(--dpx));
}

/* 右のドットデコ（回転格子＋ひし形クリップ、右端で見切れ・セクション下端基準） */
.campaign_dots {
    position: absolute;
    right: calc(0 * var(--dpx));
    bottom: calc(-15 * var(--dpx));
    width: calc(157 * var(--dpx));
    height: calc(158 * var(--dpx));
    background-image: radial-gradient(circle, #2fc0ef calc(5.5 * var(--dpx)), rgba(47,192,239,0) calc(6.5 * var(--dpx)));
    background-size: calc(25 * var(--dpx)) calc(29 * var(--dpx));
    background-position: 0 0;
    transform: rotate(18deg);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    z-index: 0;
    pointer-events: none;
}

/*====================
クーポンCTA
（campaign下端→ボタン上端45 / ボタン783x80 / 帯まで66）
====================*/
.cta {
    position: relative;
    padding: calc(45 * var(--dpx)) 0 calc(66 * var(--dpx));
}

.cta_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(783 * var(--dpx));
    height: calc(80 * var(--dpx));
    margin: 0 auto;
    border-radius: calc(40 * var(--dpx));
    background: var(--coral);
    box-shadow: calc(11 * var(--dpx)) calc(11 * var(--dpx)) 0 var(--yellow);
    color: #fff462;
    font-size: calc(46 * var(--dpx));
    font-weight: 800;
    letter-spacing: 0.17em;
    text-indent: 0.17em;
    position: relative;
    z-index: 1;
}

.cta_btn:hover {
    opacity: 0.8;
}

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

.stores_band {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(72 * 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_deco {
    position: absolute;
    left: calc(-27 * var(--dpx));
    top: calc(38 * var(--dpx));
    width: calc(156 * var(--dpx));
    height: calc(140 * var(--dpx));
    background-image: radial-gradient(circle, #9fe0e2 calc(4.5 * var(--dpx)), rgba(159,224,226,0) calc(5.5 * var(--dpx)));
    background-size: calc(20 * var(--dpx)) calc(20 * var(--dpx));
    pointer-events: none;
    transform: rotate(54deg);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    z-index: 0;
}

.stores_box {
    width: calc(733 * var(--dpx));
    margin: calc(82 * var(--dpx)) auto 0;
    background: #d0f0fa;
    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(52 * 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(28 * var(--dpx)) calc(6 * var(--dpx)) calc(30 * var(--dpx)) calc(51 * var(--dpx));
}

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

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

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

.stores_box dl:nth-of-type(6) {
    margin-top: calc(42 * var(--dpx));
    margin-bottom: calc(23 * var(--dpx));
}

.stores_row dt {
    flex: 0 0 calc(116 * var(--dpx));
    height: calc(38 * var(--dpx));
    line-height: calc(38 * var(--dpx));
    background: #fff;
    border-radius: calc(10 * var(--dpx));
    color: var(--blue-bar);
    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(42.5 * var(--dpx));
    letter-spacing: 0.02em;
    text-align: left;
}

/*====================
ラインナップ導線
（drink直下からボタン / ボタン770x81 / 間隔13 / 注記24下）
====================*/
.lineup {
    background: #fff;
}

.lineup_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(770 * 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(40 * var(--dpx));
}

.lineup_btn:hover {
    opacity: 0.8;
}

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

/*====================
利用条件
（注記下36→ピンク層 / ボックス792x363 / 下63でQ&Aへ）
====================*/
.cond {
    position: relative;
    padding: calc(61 * var(--dpx)) 0 calc(63 * var(--dpx));
    overflow: hidden;
}

.cond::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #64bde2 0%, #63b4db 100%);

  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 58%,
    rgba(0,0,0,.4) 79%,
    #000 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 58%,
    rgba(0,0,0,.4) 79%,
    #000 100%
  );
}

.cond > * {
  position: relative;
}

.cond_wrap {
    position: relative;
    width: calc(792 * var(--dpx));
    margin: 0 auto;
    z-index: 1;
}

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

.cond_wrap::before {
    background: #f0c0e0;
    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(10 * var(--dpx)) calc(25 * var(--dpx)) calc(51 * var(--dpx)) calc(32 * 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(35 * 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;
}

/* 右下の白ドットデコ（回転格子＋ひし形クリップ、右端・下端で見切れてqa.png内のドットへ連続） */
.cond_dots {
    position: absolute;
    right: calc(-53 * var(--dpx));
    bottom: calc(-33 * var(--dpx));
    width: calc(170 * var(--dpx));
    height: calc(170 * var(--dpx));
    background-image: radial-gradient(circle, #ffffff9e 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%);
    pointer-events: none;
    z-index: 0;
}

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

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

.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;
}

.no_acd .qaArrow{
    display: none;
}
.no_acd .qaBody{
    height: auto;
}


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


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

.bottom_notes {
    width: calc(655 * 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));
}