﻿@charset "UTF-8";

/*------------------------------
 * 既存レイアウト調整
 *------------------------------*/
#shop_header {
  margin-bottom: 0;
}
.page-event .pane-contents {
  margin-top: 0;
}
.page-event .pane-contents .container {
  display: block;
  max-width: none;
  min-width: auto;
  width: 100%;
  margin: 0;
}
.page-event .pane-contents .container .pane-left-menu {
  display: none;
}
.page-event .pane-contents .container .pane-main {
  margin-bottom: 0;
  width: 100%;
}
.page-event .block-event-page--accessory {
  display: none;
}
.page-event .block-event-page--goods {
  margin: 0;
}
#header {
  margin: 0;
}
.block-event-page {
  display: flex;
  flex-direction: column;
}


/*------------------------------
 * BASE
 *------------------------------*/
:root {
  --ff-base-gothic: "Noto Sans JP", sans-serif;
  --ff-base-mincho: "Shippori Mincho", serif;
  --color-base: #333333;
  --color-strong: #CF0000;
}
#e0032anv3 {
  color: var(--color-base);
  font-family: var(--ff-base-gothic);
  -webkit-overflow-scrolling: touch;
}
#e0032anv3 img {
  max-width: 100%;
  vertical-align: bottom;
}


/*------------------------------
 * PC・SP表示切替
 *------------------------------*/
html[data-browse-mode="P"] .sp-only {
  display: none;
}
html[data-browse-mode="S"] .pc-only {
  display: none;
}


/*------------------------------
 * ファーストビュー
 *------------------------------*/
.firstview {
  background-color: #fff2e9;
  background-image: url('/img/usr/event/0032anv3/firstview_bg.jpg');
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-bottom: calc(110 / 1920 * 100vw);
}
.firstview-head {
  margin-bottom: 40px;
}
.firstview-mv img {
  width: 100%;
}
.firstview-lead {
  margin-bottom: 75px;
}
.firstview-lead-sub {
  color: #7A4500;
  font-family: var(--ff-base-mincho);
  font-size: 26px;
  font-weight: bold;
  letter-spacing: .03em;
  line-height: calc(38 / 26);
  text-align: center;
  margin-bottom: 20px;
}
.firstview-lead-main {
  color: #AB0000;
  background-image: linear-gradient(to right, #7a4500 0%, #c0842b 50.63%, #945e00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 50px;
  font-family: var(--ff-base-mincho);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  margin-bottom: 40px;
}
.firstview-lead-txt {
  font-size: 18px;
  font-weight: 500;
  line-height: calc(36 / 18);
  text-align: center;
}
.firstview-announce {
  background-color: #fff;
  border-radius: 6px;
  padding: 10px;
  margin-inline: auto;
  width: 1000px;
}
.firstview-announce-inner {
  border-radius: 6px;
  border: 1px solid #A58B4E;
  padding-bottom: 32px;
  padding-inline: 30px;
}
.firstview-announce-label {
  text-align: center;
  margin-top: -30px;
  margin-bottom: 10px;
}
.firstview-announce-hdg {
  display: grid;
  row-gap: 5px;
  text-align: center;
  margin-bottom: 16px;
}
.firstview-announce-hdg-main {
  color: #7A4500;
  font-size: 35px;
  font-weight: bold;
  line-height: calc(51 / 35);
}
.firstview-announce-hdg-main em {
  color: #AA0000;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}
.firstview-announce-hdg-note {
  font-size: 15px;
  line-height: calc(21 / 15);
}
.firstview-announce-period {
  font-size: 20px;
  font-weight: 500;
  line-height: calc(29 / 20);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .firstview {
    background-image: url('/img/usr/event/0032anv3/firstview_bg_sp.jpg');
    padding-bottom: calc(24 / 430 * 100vw);
  }
  .firstview-head {
    margin-bottom: calc(25 / 430 * 100vw);
  }
  .firstview-body {
    padding-inline: calc(20 / 430 * 100vw);
  }
  .firstview-lead {
    margin-bottom: calc(50 / 430 * 100vw);
  }
  .firstview-lead-sub {
    font-size: calc(19 / 430 * 100vw);
    line-height: calc(28 / 19);
    margin-bottom: calc(12 / 430 * 100vw);
  }
  .firstview-lead-main {
    font-size: calc(30 / 430 * 100vw);
    line-height: 1.2;
    margin-bottom: calc(20 / 430 * 100vw);
  }
  .firstview-lead-txt {
    font-size: calc(15 / 430 * 100vw);
    line-height: calc(30 / 15);
  }
  .firstview-announce {
    padding: calc(10 / 430 * 100vw);
    width: auto;
  }
  .firstview-announce-inner {
    padding-bottom: calc(18 / 430 * 100vw);
    padding-inline: calc(20 / 430 * 100vw);
  }
  .firstview-announce-label {
    margin-top: calc(-1 * (24 / 430 * 100vw));
    margin-bottom: calc(10 / 430 * 100vw);
  }
  .firstview-announce-label img {
    width: calc(200 / 430 * 100vw);
  }
  .firstview-announce-hdg {
    row-gap: calc(5 / 430 * 100vw);
    margin-bottom: calc(14 / 430 * 100vw);
  }
  .firstview-announce-hdg-main {
    font-size: calc(22 / 430 * 100vw);
    line-height: calc(29 / 22);
  }
  .firstview-announce-hdg-note {
    font-size: clamp(9px, calc(9 / 430 * 100vw), 15px);
    line-height: calc(13 / 9);
  }
  .firstview-announce-period {
    font-size: calc(15 / 430 * 100vw);
    line-height: calc(21 / 15);
  }
}


/*------------------------------
 * 受賞ストア
 *------------------------------*/
.sec-award-category {
  background-color: #FFF2E9;
  background-image: url('/img/usr/event/0032anv3/category_list_bg.jpg');
  background-size: 100%;
  background-position: left top;
  background-repeat: no-repeat;
  padding-block: calc(164 / 1920 * 100vw) calc(138 / 1920 * 100vw);
}
.sec-award-category-inner {
  margin-inline: auto;
  width: 1200px;
}
.sec-award-category-ttl {
  text-align: center;
  margin-bottom: 70px;
}
.sec-award-category-ttl img {
  width: 448px;
}
.award-category {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 39px;
}
.award-category img {
  border-radius: 6px;
  box-shadow: 0px 0px 6px rgba(80, 36, 3, 0.2);
}
@media screen and (max-width: 767px) {
  .sec-award-category {
    background-image: url('/img/usr/event/0032anv3/category_list_bg_sp.jpg');
    padding-block: calc(130 / 430 * 100vw) calc(60 / 430 * 100vw);
    padding-inline: calc(15 / 430 * 100vw);
  }
  .sec-award-category-inner {
    width: auto;
  }
  .sec-award-category-ttl {
    margin-bottom: calc(30 / 430 * 100vw);
  }
  .sec-award-category-ttl img {
    width: calc(312 / 430 * 100vw);
  }
  .award-category {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(15 / 430 * 100vw);
  }
}


/*------------------------------
 * 受賞ストア
 *------------------------------*/
.sec-winner-store {
  background-image:
    url('/img/usr/event/0032anv3/grand_prize_winner_bg.jpg'),
    repeating-linear-gradient(to bottom, #ffe4d1 0, #fff5ee 1000px, #ffe4d1 2000px);
  background-position: center top, center top calc(2130 / 1920 * 100vw);
  background-repeat: no-repeat, repeat-y;
  background-size: 100%, auto;
  padding-top: calc(166 / 1920 * 100vw);
}
.winner-store-grand-ttl {
  text-align: center;
}
.winner-store-grand-ttl img {
  width: 488px;
}
.winner-store-category-ttl {
  text-align: center;
}
.winner-store-category-ttl img {
  width: 662px;
}
.winner-store {
  background-image: url('/img/usr/event/0032anv3/winner_store_deco.png');
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 100px;
}
.winner-store.-grand-prize {
  background: none;
  padding: 0;
}
.winner-store:last-child {
  padding-bottom: 100px;
}
.winner-store-ttl {
  --label-width: 234px;
  --column-gap: 60px;
  display: flex;
  align-items: center;
  column-gap: var(--column-gap);
  width: fit-content;
  max-width: calc(1200px + (var(--label-width) + var(--column-gap)));
  margin-inline: auto;
  translate: calc(-1 * (var(--label-width) + var(--column-gap)) / 2);
}
.winner-store-ttl-label {
  width: var(--label-width);
}
.winner-store-ttl-txt {
  color: #AA0000;
  font-size: 54px;
  font-weight: bold;
  letter-spacing: -.03em;
  line-height: calc(70 / 54);
}
.winner-store-body {
  background-color: #fff;
  border-radius: 20px;
  padding: 60px;
  margin-top: -50px;
  margin-inline: auto;
  width: 1200px;
}
.winner-store-body-header-ttl {
  background-color: #A51717;
  color: #fff;
  font-size: 34px;
  font-weight: bold;
  line-height: calc(49 / 34);
  text-align: center;
  padding-block: 15px 16px;
  padding-inline: 20px;
  margin-bottom: 40px;
}
.winner-store-body-header-ttl span {
  color: inherit;
  font-size: 30px;
  font-style: normal;
  font-weight: inherit;
}
.winner-store-body-main {
  display: grid;
  grid-template-columns: 452px 588px;
  column-gap: 40px;
  margin-bottom: 40px;
}
.winner-store-body-main-ttl {
  color: #502403;
  font-size: 30px;
  font-weight: bold;
  line-height: calc(44 / 30);
  padding-left: 15px;
  padding-bottom: 3px;
  position: relative;
  margin-bottom: 16px;
}
.winner-store-body-main-ttl::before {
  content: '';
  background-color: #AB0000;
  height: 40px;
  width: 6px;
  position: absolute;
  top: 3px;
  left: 0;
}
.winner-store-body-main-txt {
  font-size: 18px;
  line-height: calc(32 / 18);
}
.winner-store-body-img {}
.winner-store-body-img img {
  border-radius: 10px;
}
.winner-store-body-summary {
  margin-bottom: 38px;
}
.winner-store-body-comment {
  background-color: #fff;
  border: 2px solid #502403;
  border-radius: 40px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding-block: 30px;
  padding-inline: 50px 40px;
  justify-self: end;
  /* 親の右端を基準に */
  width: 700px;
  /* あえてはみ出すレイアウト */
  position: relative;
}
.winner-store-body-comment::before {
  content: '';
  background-image: url('/img/usr/event/0032anv3/comment_shape.png');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 86px;
  width: 38px;
  position: absolute;
  top: 86px;
  right: 100%;
}
.winner-store-body-comment-ttl {
  color: #502403;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.4;
  padding-left: 15px;
  padding-bottom: 2px;
  position: relative;
  margin-bottom: 16px;
}
.winner-store-body-comment-ttl::before {
  content: '';
  background-color: #AB0000;
  height: 30px;
  width: 6px;
  position: absolute;
  top: 2px;
  left: 0;
}
.winner-store-body-comment-txt {
  font-size: 18px;
  line-height: calc(32 / 18);
}
.winner-store-body-footer-ttl {
  color: #AA0000;
  font-size: 30px;
  font-weight: bold;
  line-height: calc(44 / 30);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: .9em;
  text-align: center;
  margin-bottom: 30px;
}
.winner-store-body-footer-ttl::before,
.winner-store-body-footer-ttl::after {
  content: "";
  background-color: currentColor;
  height: 1px;
}
.winner-store-link {
  display: grid;
  grid-template-columns: minmax(0, 600px);
  row-gap: 16px;
  justify-content: center;
}
.winner-store-btn {
  background-color: #AA0000;
  background-image: url('/img/usr/event/0032anv3/icon_btn_arrow.png');
  background-position: right 29px center;
  background-repeat: no-repeat;
  background-size: 11px;
  border-radius: 9999px;
  color: #fff;
  font-size: 24px;
  line-height: calc(35 / 24);
  text-align: center;
  padding-block: 17px 18px;
  padding-inline: 50px;
  position: relative;
  transition: opacity .3s;
}
.winner-store-btn:hover {
  opacity: .7;
}
.winner-store-note {
  font-size: 15px;
  line-height: calc(21 / 15);
  text-align: center;
}
/* 銀賞 */
.winner-store.-silver {
  --color-silver: #2C3644;
}
.winner-store.-silver .winner-store-ttl-txt {
  color: var(--color-silver);
}
.winner-store.-silver .winner-store-body-header-ttl {
  background-color: var(--color-silver);
}
.winner-store.-silver .winner-store-body-main-ttl::before {
  background-color: var(--color-silver);
}
.winner-store.-silver .winner-store-body-comment-ttl::before {
  background-color: var(--color-silver);
}
.winner-store.-silver .winner-store-body-footer-ttl {
  color: var(--color-silver);
}
.winner-store.-silver .winner-store-btn {
  background-color: var(--color-silver);
}
@media screen and (max-width: 767px) {
  .sec-winner-store {
    background-image:
      url('/img/usr/event/0032anv3/grand_prize_winner_bg_sp.jpg'),
      linear-gradient(to bottom, #ffe4d1 0%, #fff5ee 48.96%, #ffe4d1 100%);
    background-position: center top, center top calc(2130 / 1920 * 100vw);
    background-repeat: no-repeat, no-repeat;
    background-size: 100%, auto;
    padding-top: calc(130 / 430 * 100vw);
  }
  .winner-store-grand-ttl {
    margin-bottom: calc(30 / 430 * 100vw);
  }
  .winner-store-grand-ttl img {
    width: calc(340 / 430 * 100vw);
  }
  .winner-store-category-ttl {
    margin-bottom: calc(30 / 430 * 100vw);
  }
  .winner-store-category-ttl img {
    width: calc(384 / 430 * 100vw);
  }
  .winner-store {
    background-image:
      url('/img/usr/event/0032anv3/winner_store_deco_sp.png'),
      linear-gradient(to bottom, #ffe4d1 0%, #fff5ee 48.96%, #ffe4d1 100%);
    background-position: center top calc(30 / 430 * 100vw), left top;
    background-repeat: no-repeat, no-repeat;
    background-size: 100%, auto;
    padding-top: calc(80 / 430 * 100vw);
    padding-inline: calc(15 / 430 * 100vw);
  }
  .winner-store.-grand-prize {
    background: none;
    padding-top: 0;
    padding-inline: calc(15 / 430 * 100vw);
  }
  .winner-store:last-child {
    padding-bottom: calc(80 / 430 * 100vw);
  }
  .winner-store-ttl {
    --label-width: calc(153 / 430 * 100vw);
    --column-gap: 0;
    display: grid;
    grid-template-columns: var(--label-width) minmax(0, 1fr);
    column-gap: var(--column-gap);
    width: auto;
    max-width: none;
    translate: none;
  }
  .winner-store-ttl-txt {
    font-size: calc(30 / 430 * 100vw);
    line-height: calc(40 / 30);
    text-align: center;
  }
  .winner-store-body {
    border-radius: 10px;
    padding-block: calc(40 / 430 * 100vw) calc(50 / 430 * 100vw);
    padding-inline: calc(20 / 430 * 100vw);
    margin-top: calc(-1 * (30 / 430 * 100vw));
    width: auto;
  }
  .winner-store-body-header-ttl {
    font-size: calc(22 / 430 * 100vw);
    line-height: calc(32 / 22);
    padding-block: calc(8 / 430 * 100vw) calc(10 / 430 * 100vw);
    padding-inline: calc(12 / 430 * 100vw);
    margin-bottom: calc(20 / 430 * 100vw);
  }
  .winner-store-body-header-ttl span {
    font-size: calc(16 / 430 * 100vw);
  }
  .winner-store-body-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "summary" "img" "comment";
    margin-bottom: calc(30 / 430 * 100vw);
  }
  .winner-store-body-main-col1,
  .winner-store-body-main-col2 {
    display: contents;
  }
  .winner-store-body-summary {
    grid-area: summary;
  }
  .winner-store-body-main-ttl {
    font-size: calc(18 / 430 * 100vw);
    line-height: calc(26 / 18);
    padding-left: calc(10 / 430 * 100vw);
    padding-bottom: 1px;
    margin-bottom: calc(12 / 430 * 100vw);
  }
  .winner-store-body-main-ttl::before {
    height: calc(26 / 430 * 100vw);
    width: calc(4 / 430 * 100vw);
    top: 1px;
  }
  .winner-store-body-main-txt {
    font-size: calc(14 / 430 * 100vw);
    line-height: calc(25 / 14);
  }
  .winner-store-body-img {
    grid-area: img;
    margin-bottom: calc(14 / 430 * 100vw);
  }
  .winner-store-body-summary {
    margin-bottom: calc(20 / 430 * 100vw);
  }
  .winner-store-body-comment {
    grid-area: comment;
    padding-block: calc(30 / 430 * 100vw);
    padding-inline: calc(20 / 430 * 100vw);
    width: auto;
  }
  .winner-store-body-comment::before {
    background-image: url('/img/usr/event/0032anv3/comment_shape_sp.png?v=3');
    height: 27px;
    width: 53px;
    top: -26px;
    left: 50%;
    translate: -50%;
  }
  .winner-store-body-comment-ttl {
    font-size: calc(18 / 430 * 100vw);
    line-height: calc(26 / 18);
    padding-left: calc(10 / 430 * 100vw);
    padding-bottom: 1px;
    margin-bottom: calc(12 / 430 * 100vw);
  }
  .winner-store-body-comment-ttl::before {
    height: calc(26 / 430 * 100vw);
    width: calc(4 / 430 * 100vw);
    top: 1px;
  }
  .winner-store-body-comment-txt {
    font-size: calc(14 / 430 * 100vw);
    line-height: calc(25 / 14);
  }
  .winner-store-body-footer-ttl {
    font-size: calc(22 / 430 * 100vw);
    line-height: calc(32 / 22);
    margin-bottom: calc(20 / 430 * 100vw);
  }
  .winner-store-link {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(8 / 430 * 100vw);
  }
  .winner-store-btn {
    background-image: url('/img/usr/event/0032anv3/icon_btn_arrow_sp.png');
    background-position: right calc(20 / 430 * 100vw) center;
    background-size: calc(8 / 430 * 100vw);
    font-size: calc(18 / 430 * 100vw);
    line-height: calc(26 / 18);
    padding-block: calc(15 / 430 * 100vw);
    padding-inline: calc(36 / 430 * 100vw);
  }
  .winner-store-note {
    font-size: calc(13 / 430 * 100vw);
    line-height: calc(19 / 13);
  }
}


/*------------------------------
 * EVENT
 *------------------------------*/
.event-goods {
  margin-bottom: 60px;
}
.event-goods .block-thumbnail-t {
  margin: 0;
  gap: 40px 20px;
}
.event-goods .block-thumbnail-t>li {
  width: 200px;
  margin: 0;
}
.event-goods .block-thumbnail-t>li:nth-child(n + 6) {
  display: none;
}
.event-goods .block-thumbnail-t--goods a {
  text-decoration: none !important;
}
.event-goods .block-thumbnail-t--goods-image figure {
  width: 200px;
  height: 200px;
}
@media screen and (max-width: 767px) {
  .event-goods {
    margin-inline: calc(-1 * min(20px, calc(20 / 430 * 100vw)));
    margin-bottom: 40px;
  }
  .event-goods .block-thumbnail-t--items {
    column-gap: min(15px, calc(15 / 430 * 100vw));
    flex-wrap: nowrap;
    justify-content: start;
    padding: 0 min(15px, calc(15 / 430 * 100vw));
    overflow-x: auto;
    overflow-y: hidden;
  }
  .event-goods .block-thumbnail-t--items li {
    flex-shrink: 0;
    width: min(170px, calc(170 / 430 * 100vw));
    margin: 10px auto;
    vertical-align: top;
  }
  .event-goods .block-thumbnail-t--items li:nth-child(n + 6) {
    display: none;
  }
  .event-goods .block-thumbnail-t--goods-image figure {
    width: 100%;
    height: 100%;
  }
}