@charset "UTF-8";
/* general 
-------------------------------------------- */
:root {
  --color-pink: #ed4186;
  --color-red: #ff0000;
  --color-blue: #009fe8;
  --color-blue2: #000333;
  --color-yellow: #ffec3f;
  --color-yellow2: #fff000;
  --color-yellow3: #fff8ca;
  --color-mint: #00b3c4;
  --color-green: #407a80;
  --color-iyo: #007260;
  --color-black: #1c1c1c;
  --color-gray: #f5f5f5;
  --gradation: linear-gradient(180deg,rgba(11, 19, 43, 1) 0%, rgba(29, 32, 135, 1) 52%, rgba(93, 193, 207, 1) 95%);
  --fs-small: 14px;
  --fs-medium: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
  --fs-large: 1.5rem;
  --ff-gothic: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --ff-yu-go: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --ff-yu-go-l: "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --ff-rubik: "Rubik", sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  font-family: var(--ff-gothic);
  line-height: 1.75;
  color: var(--color-black);
}
h1,h2,h3,h4,h5,h6,p,a,li,figcaption,dt,dd,th,td,input,textarea,label {
  color: var(--color-black);
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  font-family: var(--ff-gothic);
  font-feature-settings: "palt";
}
ol,ul {
  list-style: none;
}
img {
  max-width: 100%;
}
a {
  transition: all 0.3s ease-in-out;
  &:hover {
    text-decoration: none;
    opacity: 0.7;
  }
}
:is(p, ul):last-child {
  margin-bottom: 0;
}


@media screen and (min-width: 640px) {
  a[href^="tel"] {
    pointer-events: none;
  }
}
@media screen and (max-width: 640px) {

}
/* parts
-------------------------------------------- */
.fs-small {
  font-size: var(--fs-small);
}
.fs-medium {
  font-size: var(--fs-medium);
}
.fs-large {
  font-size: var(--fs-large);
}
.fs-20 {
  font-size: clamp(1.125rem, 0.911rem + 0.95vw, 1.625rem);
}
.font-gothic {
  font-family: var(--ff-gothic);
}
.color-pink {
  color: var(--color-pink);
}
.color-white {
  color: #fff;
}
.color-red {
  color: var(--color-red);
}
.color-iyo {color: var(--color-iyo);}
.color-yellow {color: var(--color-yellow);}
.color-mint {color: var(--color-mint)}
.link-txt {
  text-decoration: underline;
}
.link-arrow {
  color: var(--color-mint);
  font-weight: 700;
}
.link-arrow::after {
  content: "";
  background: url(../img/beer-2607_arrow.svg) no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
  transform: rotate(-90deg)
}
:where(ul, ol).fineindent {
  padding-left: 15px;
  & > li {
    text-indent: -1em;
  }
}
p.fineindent {
  margin-left: 1em;
  text-indent: -1em;
}

.list-disc  {padding: 0}
.list-disc > li {
  padding-left: 1em;
  text-indent: -1em;
}
.list-disc > li::before {
  content: '●';
  color: #b2b2b2;
  font-size: 14px;
  margin-right: 2px;
}
.bg-yellow {
  background-color: var(--color-yellow);
}
.bg-wht {
  background-color: #fff;
}
.bg-pink {
  background-color: var(--color-pink);
}
.bg-blue {
  background-color: var(--color-blue);
}
.bg-gradation {
  background: var(--gradation);
}
.bg-gray {
  background: var(--color-gray);
}
#wrap {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
@media screen and (min-width: 640px) {
  body {
    background: url(../img/beer-2607_bg_pc.png) no-repeat, var(--gradation);
    background-attachment: fixed;
    background-position: 50% 0;
    background-size: auto, auto;
    position: relative;
  }
}
@media screen and (max-width: 640px) {
  body {
    background: linear-gradient(180deg,rgba(11, 19, 43, 1) 0%, rgba(29, 32, 135, 1) 17%, rgba(93, 193, 207, 1) 26%, rgba(93, 193, 207, 1) 30%, rgba(29, 32, 135, 1) 70%);
  }
}


/* header
-------------------------------------------- */
header {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-inline: 10px;
}
.header__iyogin {
  text-align: center;
  background: #fff;
}
.header__logo {
  padding: 10px 10px 10px 30px;
}
.header__nav {
  padding-right: 22px;
}
.header__nav .header__nav-inner {
  display: flex;
}
.header__nav .header__nav-inner > li {
  padding: 0 10px;
}
.header__container {
  background: #fff;
  position: relative;
  max-width: 1200px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 2em;
}
.header.uk-sticky-fixed.uk-active .header__container {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.header__nav-item::after {
    content: "";
    background: url(../img/beer-2607_arrow.svg) no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    display: inline-block;
    margin-left: 3px;
    width: 16px;
    height: 16px;
    vertical-align: center;
}
@media screen and (max-width: 960px) {
  .header__container {
    display: block;
    background: #fff;
    border-radius: 2em;
  }
  .header__logo {
    padding: 10px;
    margin: auto;
    text-align: center;
  }
  .header__nav {
    display: block;
    overflow: scroll;
    display: none;
  }
  .header__nav .header__nav-inner {
    display: block;
    width: max-content;
    display: block;
    padding-bottom: 10px;
  }
  .header__nav .header__nav-inner > li {
    display: inline-block;
    width: auto;
  }
}
/* main
-------------------------------------------- */
main {
  display: block;
}
section {
  margin: 0;
  padding-block: 60px;
}
[class*="sec__inner"] {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.sec__inner-small {
  max-width: 980px;
}
.sec__inner-x-small {
  max-width: 725px;
}
.sec__inner-xx-small {
  max-width: 640px;
}
@media screen and (max-width: 960px) {
  section {
    padding-block: 40px;
  }
  [class*="sec__inner"] {
    padding-left: 10px;
    padding-right: 10px;
  }
  .sec__inner,
  .sec__inner-small,
  .sec__inner-x-small {
    max-width: 100%;
  }
}
#kv__area {
  margin: 0 auto;
  padding-bottom: 0
}
#kv__area .kv__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.sec__title {
  position: relative;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.643rem + 0.48vw, 2rem);
  margin-bottom: min(7vw,40px);
}
.sec__title::before {
  content: '';
  background: url(../img/beer-2607_jug.svg) no-repeat;
  display: inline-block;
  width: 70px;
  height: 70px;
  vertical-align: bottom;
}
@media screen and (max-width:640px) {
  .sec__title::before {
    display: block;
    margin-inline: auto;
    margin-bottom: 10px;
  }
}
.lead {
  font-size: 1.125rem;
  font-family: var(--ff-yu-go-l);
  font-weight: 700;
  margin-bottom: 10px;
}
.support-list {
  gap: min(2vw, 20px);
}
.support-list > div:first-child {
  min-width: 3em;
}
@media screen and (max-width:640px) {
}
/*ご利用方法*/
.uses-box {
  background: #ccf0f3;
  border: 4px solid #fff;
  border-radius: 40px;
  padding: 20px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uses-box .color-red {
  text-decoration: underline
}
/*対処店舗*/
.shop-anc {
  gap: 10px 15px;
  max-width: 660px;
  margin-inline: auto;
}
.shop-anc li a {
  color: #fff;
  text-shadow: 0 0 5px #12184e,0 0 10px rgba(18, 24, 78, 0.5);
  position: relative;
}
.shop-anc li a::after {
  content: '';
  background: url(../img/beer-2607_arrow.svg) no-repeat;
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 5px;
}
@media screen and (max-width: 640px) {
  .shop-anc li a {padding-left: 1.75em}
  .shop-anc li a::after {
    position: absolute;
    left: 0;
    top: 0.125em;
  }
}
.list-shop > div {
  background: #fff;
  border-radius: 40px;
  max-width: 840px;
  margin:40px  auto;
  overflow: hidden;
}
.area {
  background: var(--color-green);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  display: inline-flex;
  place-content: center;
  align-items: center;
  width: 100px;
  height: 130px;
}
.list-shop .shop-name {
  background: var(--color-yellow);
  padding: 0 min(5vw,40px) 30px min(5vw,40px);
}
.list-shop .shop-name .uk-grid {
  gap: 10px 30px;
  align-items: flex-end;
  &:not(:has(p)) {
    align-items: center;
  }
}
.shop-name .name a {
  font-size: clamp(1.45rem, 1.35rem + 0.4vw, 2rem);
  display: block;
  position: relative;
}
.shop-name .name a::after {
  content: '';
  background: url(../img/beer-2607_blank.svg) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 5px;
  vertical-align: center;
}
@media screen and (max-width: 640px) {
  .list-shop .shop-name .uk-grid {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
  .area {
    width: 100px;
    height: 80px;
  }
}
.shop-name .name > p {
  margin-top: 10px;
  font-size: 1rem;
}
.shop-name .color-mint {
  font-size: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);
  font-weight: 700;
  grid-column: span 3 / span 3;
  grid-row-start: 2;
  text-align: left;
  margin-top: min(5vw,30px);
  line-height: 1.5;
}
.shop-detail {
  margin-block: 0 20px;
}
@media screen and (max-width: 640px) {
  .shop-detail {margin-bottom: 26px}
}
.shop-detail > div {
  display: flex;
  gap: 10px 30px;
  
  align-items: center;
  padding: 10px min(4vw, 20px);
}
.shop-detail > div:nth-child(odd) {
  background: #f5f5f5;
}
.shop-detail dt {
  color: var(--color-green);
  font-weight: 700;
  text-align: center;
  width: 10.5em;
}
.shop-detail dd {
  width: auto;
}
.shop-detail dd table td {
  white-space: nowrap;
  text-align: right
}
.shop-detail dd table th {
  padding-right: 0.5em;
}
@media screen and (max-width: 640px) {
  .shop-detail > div {flex-wrap: wrap;}
  .shop-detail > div dt {
    width: 100%;
    text-align: left;
  }
}

/*対象カード*/
.sec__cards {
  background: #fff;
  position: relative;
  margin-top: min(10vw, 80px);
  z-index: 0;
  padding-bottom: 0;
}
.sec__cards .sec__inner > * {
}
.sec__cards::before {
  content: '';
  display: block;
  width: 100%;
  height: 20%;
  background: url(../img/beer-2607_bg-awa.svg) no-repeat;
  background-size: cover;
  background-position: 50% 0;
  position: absolute;
  left: 0;
  top: -12%;
}
@media screen and (max-width: 640px) {
  .sec__cards::before {
    top: -7%
  }
}
.sec__cards::after {
  content: '';
  background: url(../img/beer-2607_bg-beer-bottom.png) no-repeat;
  background-size: cover;
  background-position: 50% 100%;
  display: block;
  width: 100%;
  height: 80%;
  position: absolute;
  left: 0;
  bottom: -20vw;
  z-index: -1;
}
@media screen and (max-width: 640px) {
  .sec__cards {
    margin-bottom: 35vw;
  }
  .sec__cards::after {
    background-image: url(../img/beer-2607_bg-beer-bottom_sp.png);
    background-size: 150%;
    bottom: -70vw;
  }
}
.sec__cards .sec__title {
  color: var(--color-black);
}
.sec__cards .sec__title::after {
  content: '';
  background: url(../img/beer-2607_kaeru3.png) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 215px;
  height: 200px;
  position: absolute;
  right: calc(50% - 400px);
  top: -70px;
}
@media screen and (max-width: 640px) {
  .sec__cards .sec__title::after {
    width: 172px;
    height: 160px;
    right: 0;
    top: -140px;
  }
}
.title-sub {
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 0;
}
.sec__cards .bg-gray {
  padding: 30px;
  border-radius: 10px;
  text-align: center;
}
.sec__cards .bankcard .bg-gray {
  height: 100%;
  display: flex;
  flex-direction: column;
  & .uk-text-center {
    flex-grow: 1;
    align-content: flex-end;
  }
}
.sec__cards .bg-gray p {
  margin-block: 0;
}
.sec__cards .bg-gray img {
  max-height: 89px;
}
@media screen and (max-width: 960px) and (min-width: 640px) {
  .sec__cards .bg-gray .uk-child-width-1-3 {
    justify-content: center;
    width: calc(140px * 3 + 30px);
    margin-inline: auto;
    column-gap: 15px;
  }
  .sec__cards .bg-gray .uk-child-width-1-3 > * {
    padding-left: 0;
    width: calc((100% - 30px) / 3);
  }
}
@media screen and (max-width: 640px) {
  .sec__cards .bg-gray img {
    max-height: 17vw;
  }
  .sec__cards .bankcard .bg-gray .uk-text-center{
    width: calc(100% / 3 - 15px);
    margin-inline: auto;
  }
}
.att-box {
  background: var(--color-mint);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
}
/*概要*/
.summary-cont {
  background: rgba(0,0,0,0.7);
  border: 4px solid #fff;
  border-radius: 40px;
  color: #fff;
  position: relative;
  z-index: 0;
  padding: min(5vw,30px);
}
.summary-cont dl dt {
  background: var(--color-green);
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 10px;
  border-radius: 10px;
}
.summary-cont dl dd + dt {
  margin-top: 30px;
}
.summary-cont dl dd * {
  color: #fff;
}
.summary-cont dl dd {
  margin-top: 20px;
  color: #fff;
}
.link-blank::after {
  content: '';
  mask-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22b%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213.44%22%20height%3D%2211.52%22%20viewBox%3D%220%200%2013.44%2011.52%22%3E%3Cg%20id%3D%22c%22%3E%3Cpath%20d%3D%22M3.102%2C0V4.189H0v7.331H9.305v-3.142h4.135V0H3.102Zm5.222%2C10.526H.981V6.284H3.102v2.095h5.222v2.148Zm4.082-3.196H4.135V3.142H12.406V7.331Zm0-5.236H4.135V1.047H12.406v1.047Z%22%20fill%3D%22%232d2d2d%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  mask-repeat: no-repeat;
  mask-position: 50% 50%;
  mask-size: contain;
  background-color: currentColor;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: center;
  margin-left: 2px;
}

@media screen and (max-width: 640px) {
  #s-05 .shop-detail div:nth-of-type(2) dd span:nth-of-type(n+2):not(.color-mint).uk-text-bold {
    display: inline-block;
    margin-top: 10px;
  }
  #s-04 table.uk-text-left th {min-width: 6.5em;}
  #s-04 table.uk-text-left :is(th,td) {display: inline-block}
  #s-04 table.uk-text-left tr:nth-child(3) :is(th, td) {display: inline;}
}
@media screen and (max-width: 400px) {
  #s-08 table.uk-text-left th {display: block}
  #s-08 table.uk-text-left td {display: inline-block;}
  #s-08 table.uk-text-left tr:nth-child(2) th {
    margin-top: 10px;
  }
}

.sec__cp {
  padding-block: 50px;
}
.sec__cp h2 {
  font-size: clamp(1.5rem, 1.364rem + 0.68vw, 1.875rem);
  margin-bottom: min(6vw,30px);
}


#contact h3 {
  font-size: clamp(1.125rem, 0.943rem + 0.91vw, 1.625rem);
  font-family: var(--ff-yu-go-l);
  font-weight: 700;
}
#contact h3 + * {
  margin: 20px auto;
  font-size: 1.25rem;
  color: var(--color-iyo);
  font-weight: 700;
}
#totop {
  transition: ease 0.3s all;
  position: fixed;
  bottom: 20px;
  bottom: 5px;
  right: 20px;
  z-index: 100;
}
#totop a {
  content: '';
  background: url(../img/beer-2607_arrow.svg) no-repeat;
  background-size: contain;
  transform: scale(1,-1);
  display: inline-block;
  width: 40px;
  height: 40px;
}
@media screen and (max-width: 640px) {
  #totop {
    right: 50%;
    transform: translateX(50%);
  }
}
.footer {
  padding: 60px 0 30px;
  background: #fff;
}
@media screen and (max-width: 640px) {
  #totop { bottom: 0}
  .footer {
    padding-bottom: 60px;
  }
}
.footer .contact {
  position: relative;
}

.footer .contact .color-iyo {
  font-size: clamp(0.875rem, 0.714rem + 0.71vw, 1rem)
}
.footer__copyright-top {line-height: 1.45}
.footer__copyright {font-size: 0.85rem;}


a.btn {
  display: block;
  background: var(--color-green);
  border-radius: 2em;
  color: #fff;
  font-weight: 700;
  position: relative;
  padding: 10px 2em;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
  width: clamp(318px,46cqw, 420px);
}
a.btn::after {
  content: '';
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20stroke-linecap%3A%20round%3B%20stroke-miterlimit%3A%2010%3B%20stroke-width%3A%201.5px%3B%7D%20.cls-2%20%7B%20fill%3A%20%2300b3c4%3B%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Ccircle%20class%3D%22cls-2%22%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%2F%3E%20%3Cg%3E%20%3Cpolyline%20class%3D%22cls-1%22%20points%3D%2215%207.5%2022.5%2015%2015%2022.5%22%2F%3E%20%3Cline%20class%3D%22cls-1%22%20x1%3D%227.5%22%20y1%3D%2215%22%20x2%3D%2222.5%22%20y2%3D%2215%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
a.btn._wht {
  background-color: #fff;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}
a.btn._wht::after {
  background-color: var(--color-black);
}