@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
/* line 9, app/assets/stylesheets/reset.scss */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* line 30, app/assets/stylesheets/reset.scss */
body {
  line-height: 1;
}

/* line 34, app/assets/stylesheets/reset.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* line 39, app/assets/stylesheets/reset.scss */
nav ul {
  list-style: none;
}

/* line 43, app/assets/stylesheets/reset.scss */
blockquote, q {
  quotes: none;
}

/* line 47, app/assets/stylesheets/reset.scss */
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* line 53, app/assets/stylesheets/reset.scss */
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
/* line 62, app/assets/stylesheets/reset.scss */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
/* line 69, app/assets/stylesheets/reset.scss */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

/* line 76, app/assets/stylesheets/reset.scss */
del {
  text-decoration: line-through;
}

/* line 80, app/assets/stylesheets/reset.scss */
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

/* line 85, app/assets/stylesheets/reset.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
/* line 91, app/assets/stylesheets/reset.scss */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

/* line 100, app/assets/stylesheets/reset.scss */
input, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/*=============================
fadeIn - fadeOut
=============================*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*=============================
blurIn - blurOut
=============================*/
@keyframes blurIn {
  0% {
    filter: blur(6px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes blurOut {
  0% {
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    opacity: 0;
    filter: blur(6px);
  }
}

/*=============================
scaleIn - scaleOut
=============================*/
@keyframes scaleIn {
  0% {
    transform: scale(0, 0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  0% {
    transform: scale(1, 1);
    opacity: 1;
  }
  20% {
    transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0, 0);
    opacity: 0;
  }
}

/*=============================
button
=============================*/
@keyframes shadowFadeIn {
  0% {
    box-shadow: none;
  }
  100% {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  }
}

@keyframes shadowFadeOut {
  0% {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  }
  100% {
    box-shadow: none;
  }
}

@keyframes shine {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    left: 125%;
  }
}

/* line 4, app/assets/stylesheets/button.scss */
.button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  border-radius: 4px;
  line-height: 42px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  outline: none;
}

/* line 19, app/assets/stylesheets/button.scss */
.button.fill {
  color: #ffffff;
}

/* line 23, app/assets/stylesheets/button.scss */
.button.navy {
  border: solid 1px #24264a;
  background-color: #24264a;
}

/* line 27, app/assets/stylesheets/button.scss */
.button.navy:active, .button.navy:hover {
  background-color: #ffffff;
  color: #24264a;
}

/* line 33, app/assets/stylesheets/button.scss */
.button.light-navy {
  border: solid 1px #296DA0;
  background-color: #296DA0;
}

/* line 37, app/assets/stylesheets/button.scss */
.button.light-navy:active, .button.light-navy:hover {
  background-color: #ffffff;
  color: #296DA0;
}

/* line 43, app/assets/stylesheets/button.scss */
.button.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 47, app/assets/stylesheets/button.scss */
.button.orange::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
}

/* line 57, app/assets/stylesheets/button.scss */
.button.orange:hover::before, .button.orange:active::before {
  -webkit-animation: shine 1s;
  animation: shine 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 62, app/assets/stylesheets/button.scss */
.button.orange-frame {
  border: solid 1px #e8a519;
  background-color: #ffffff;
  color: #e8a519;
}

/* line 67, app/assets/stylesheets/button.scss */
.button.orange-frame:active, .button.orange-frame:hover {
  background-color: #e8a519;
  color: #ffffff;
}

/* line 73, app/assets/stylesheets/button.scss */
.button.black {
  border: solid 1px #222222;
  background-color: #222222;
}

/* line 77, app/assets/stylesheets/button.scss */
.button.black:active, .button.black:hover {
  background-color: #ffffff;
  color: #222222;
}

/* line 83, app/assets/stylesheets/button.scss */
.button.red {
  border: solid 1px #e36c6c;
  background-color: #e36c6c;
}

/* line 87, app/assets/stylesheets/button.scss */
.button.red:active, .button.red:hover {
  background-color: #ffffff;
  color: #e36c6c;
}

/* line 93, app/assets/stylesheets/button.scss */
.button.green {
  border: solid 1px #00b900;
  background-color: #00b900;
}

/* line 97, app/assets/stylesheets/button.scss */
.button.green:active, .button.green:hover {
  background-color: #ffffff;
  color: #00b900;
}

/* line 103, app/assets/stylesheets/button.scss */
.button.disable {
  color: #ffffff;
  border: solid 1px #c7cdce;
  background-color: #c7cdce;
}

/* line 109, app/assets/stylesheets/button.scss */
.button.red-clay {
  border: solid 1px #D8864E;
  background-color: #D8864E;
}

/* line 113, app/assets/stylesheets/button.scss */
.button.red-clay::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
}

/* line 123, app/assets/stylesheets/button.scss */
.button.red-clay:hover::before, .button.red-clay:active::before {
  -webkit-animation: shine 1s;
  animation: shine 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 128, app/assets/stylesheets/button.scss */
.button.blue-gray {
  border: solid 1px #566774;
  background-color: #566774;
}

/* line 132, app/assets/stylesheets/button.scss */
.button.blue-gray::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
}

/* line 142, app/assets/stylesheets/button.scss */
.button.blue-gray:hover::before, .button.blue-gray:active::before {
  -webkit-animation: shine 1s;
  animation: shine 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 147, app/assets/stylesheets/button.scss */
.button.white {
  border: solid 1px #ffffff;
  background-color: #ffffff;
  color: #D8864E;
}

/* line 151, app/assets/stylesheets/button.scss */
.button.white:active, .button.white:hover {
  opacity: 0.8;
  color: #D8864E;
}

/* line 157, app/assets/stylesheets/button.scss */
.button.shadow-small {
  -webkit-animation: shadowFadeIn 0.5s;
  animation: shadowFadeIn 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 159, app/assets/stylesheets/button.scss */
.button.shadow-small:active, .button.shadow-small:hover {
  -webkit-animation: shadowFadeOut 0.5s;
  animation: shadowFadeOut 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 164, app/assets/stylesheets/button.scss */
.button.twitter {
  border: solid 1px #00ACEE;
  background-color: #00ACEE;
}

/* line 168, app/assets/stylesheets/button.scss */
.button.twitter::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-25deg);
}

/* line 178, app/assets/stylesheets/button.scss */
.button.twitter:hover::before, .button.twitter:active::before {
  -webkit-animation: shine 1s;
  animation: shine 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/form.scss */
form input, form select {
  box-sizing: border-box;
  height: 44px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

/* line 12, app/assets/stylesheets/form.scss */
form input::placeholder, form select::placeholder {
  color: #c7cdce;
}

/* line 17, app/assets/stylesheets/form.scss */
form .eye-off, form .eye-on {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 32px;
  right: 10px;
  opacity: 0.4;
  background-size: 18px auto;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 29, app/assets/stylesheets/form.scss */
form .eye-on {
  background-image: url(/assets/eye-6130ea4834577cd5643750668bb669029ebe78c02353699c052836a7b7e7466d.png);
}

/* line 32, app/assets/stylesheets/form.scss */
form .eye-off {
  background-image: url(/assets/eye-off-8fb245be9184c3097d585409586ceeac15cca46f451980675e89ed6fc5747f60.png);
}

/* line 36, app/assets/stylesheets/form.scss */
form .error-message {
  display: block;
  font-size: 12px;
  color: #e36c6c;
  text-align: right;
  margin-bottom: 4px;
}

/* line 44, app/assets/stylesheets/form.scss */
form .input-wrap-vertical {
  margin-bottom: 20px;
  position: relative;
}

/* line 48, app/assets/stylesheets/form.scss */
form .input-wrap-vertical.zipcode {
  margin-bottom: 6px;
}

/* line 52, app/assets/stylesheets/form.scss */
form .input-wrap-vertical p {
  margin-bottom: 8px;
  font-size: 14px;
}

/* line 56, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .required {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 12px;
}

/* line 63, app/assets/stylesheets/form.scss */
form .input-wrap-vertical input, form .input-wrap-vertical select {
  width: 100%;
  border-radius: 4px;
  border: solid 1px #4a4a4a;
  line-height: 14px;
  font-size: 14px;
  padding: 0 12px;
  background-color: #ffffff;
}

/* line 73, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .error-message {
  margin: 4px 0 0 0;
}

/* line 77, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .radio {
  display: -webkit-flex;
  display: flex;
}

/* line 81, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .radio input[type=radio] {
  display: none;
}

/* line 84, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .radio input[type=radio] + label {
  width: 50%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 4px;
  font-size: 16px;
  font-family: HiraKakuPro-W6;
}

/* line 94, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .radio input[type=radio] + label[for=man] {
  margin-right: 12px;
  color: #6dacad;
  border: 1px solid #6dacad;
}

/* line 100, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .radio input[type=radio] + label[for=woman] {
  color: #e36c6c;
  border: 1px solid #e36c6c;
}

/* line 105, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .radio input[type=radio]:checked + label[for=man] {
  color: #ffffff;
  background-color: #6dacad;
}

/* line 110, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .radio input[type=radio]:checked + label[for=woman] {
  color: #ffffff;
  background-color: #e36c6c;
}

/* line 117, app/assets/stylesheets/form.scss */
form .input-wrap-vertical textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 120px;
  border-radius: 4px;
  border: solid 1px #4a4a4a;
  font-size: 14px;
  padding: 12px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* line 131, app/assets/stylesheets/form.scss */
form .input-wrap-vertical .triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #24264a;
  position: absolute;
  bottom: 18px;
  right: 12px;
}

/* line 143, app/assets/stylesheets/form.scss */
form .input-wrap-parallel {
  margin-bottom: 20px;
}

/* line 146, app/assets/stylesheets/form.scss */
form .input-wrap-parallel .error-message {
  margin: 4px 0 0 0;
}

/* line 150, app/assets/stylesheets/form.scss */
form .input-wrap-parallel p {
  font-size: 14px;
  margin-bottom: 8px;
}

/* line 154, app/assets/stylesheets/form.scss */
form .input-wrap-parallel .parallel-box {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}

/* line 159, app/assets/stylesheets/form.scss */
form .input-wrap-parallel .parallel-box input {
  width: 100%;
  border-radius: 4px;
  border: solid 1px #4a4a4a;
  line-height: 14px;
  font-size: 14px;
  padding: 0 12px;
}

/* line 167, app/assets/stylesheets/form.scss */
form .input-wrap-parallel .parallel-box input:first-child {
  margin-right: 12px;
}

/* line 174, app/assets/stylesheets/form.scss */
form .input-wrap-horizontal {
  margin-bottom: 16px;
  position: relative;
  display: -webkit-flex;
  display: flex;
}

/* line 180, app/assets/stylesheets/form.scss */
form .input-wrap-horizontal p {
  font-size: 14px;
  flex: 1 1 20%;
  margin: auto;
}

/* line 185, app/assets/stylesheets/form.scss */
form .input-wrap-horizontal input, form .input-wrap-horizontal select {
  margin-left: 20px;
  flex: 4 4 80%;
  border-radius: 4px;
  border: solid 1px #4a4a4a;
  line-height: 14px;
  font-size: 14px;
  padding: 0 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #ffffff;
}

/* line 199, app/assets/stylesheets/form.scss */
form .input-wrap-horizontal .triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #24264a;
  position: absolute;
  top: 18px;
  right: 12px;
}

/* line 210, app/assets/stylesheets/form.scss */
form .input-wrap-horizontal.building-bottom {
  margin-bottom: 20px;
}

/* line 215, app/assets/stylesheets/form.scss */
form .input-wrap-horizontal-above-alert {
  position: relative;
  display: -webkit-flex;
  display: flex;
}

/* line 220, app/assets/stylesheets/form.scss */
form .input-wrap-horizontal-above-alert p {
  font-size: 14px;
  flex: 1 1 20%;
  margin: auto;
}

/* line 225, app/assets/stylesheets/form.scss */
form .input-wrap-horizontal-above-alert input, form .input-wrap-horizontal-above-alert select {
  margin-left: 20px;
  flex: 4 4 80%;
  border-radius: 4px;
  border: solid 1px #4a4a4a;
  line-height: 14px;
  font-size: 14px;
  padding: 0 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #ffffff;
}

/* line 239, app/assets/stylesheets/form.scss */
form .input-wrap-horizontal-above-alert .triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #24264a;
  position: absolute;
  top: 18px;
  right: 12px;
}

/* line 251, app/assets/stylesheets/form.scss */
form input[type=text]:read-only {
  background-color: #f2f2f2;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/*=============================
fadeIn - fadeOut
=============================*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*=============================
blurIn - blurOut
=============================*/
@keyframes blurIn {
  0% {
    filter: blur(6px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes blurOut {
  0% {
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    opacity: 0;
    filter: blur(6px);
  }
}

/*=============================
scaleIn - scaleOut
=============================*/
@keyframes scaleIn {
  0% {
    transform: scale(0, 0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  0% {
    transform: scale(1, 1);
    opacity: 1;
  }
  20% {
    transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0, 0);
    opacity: 0;
  }
}

/*=============================
button
=============================*/
@keyframes shadowFadeIn {
  0% {
    box-shadow: none;
  }
  100% {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  }
}

@keyframes shadowFadeOut {
  0% {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  }
  100% {
    box-shadow: none;
  }
}

@keyframes shine {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    left: 125%;
  }
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 15, app/assets/stylesheets/application.scss */
html,
body,
div,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
a,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  color: #222222;
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

/* line 89, app/assets/stylesheets/application.scss */
a {
  text-decoration: none;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/share/flash.scss */
.flash {
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 14px;
  color: #474d50;
  position: fixed;
  z-index: 1000;
  width: 90%;
  bottom: 6%;
  left: 5%;
  padding: 16px 12px;
  filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.7));
  opacity: 0;
}

/* line 17, app/assets/stylesheets/share/flash.scss */
.flash.flash-success {
  background-color: #dad8a0;
}

/* line 20, app/assets/stylesheets/share/flash.scss */
.flash.flash-alert {
  background-color: rgba(188, 42, 33, 0.8);
  color: #ffffff;
}

/* line 24, app/assets/stylesheets/share/flash.scss */
.flash.flash-info {
  background-color: #e1c256;
}

/* line 27, app/assets/stylesheets/share/flash.scss */
.flash.fade-in {
  animation: fadeIn 500ms;
  animation-fill-mode: both;
}

/* line 31, app/assets/stylesheets/share/flash.scss */
.flash.fade-out {
  animation: fadeOut 500ms;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    bottom: 4%;
  }
  100% {
    opacity: 1;
    bottom: 6%;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/share/footer.scss */
.share-footer {
  margin-top: auto;
  width: 100%;
}

/* line 8, app/assets/stylesheets/share/footer.scss */
.share-footer footer {
  width: 100%;
  overflow: hidden;
  padding-top: 40px;
}

/* line 13, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-top {
  display: block;
  width: 104%;
}

@media screen and (min-width: 744px) {
  /* line 13, app/assets/stylesheets/share/footer.scss */
  .share-footer footer .footer-top {
    display: none;
  }
}

/* line 21, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-top-pc {
  display: block;
  width: 100%;
  height: 50px;
  margin-bottom: -1px;
}

@media screen and (max-width: 743px) {
  /* line 21, app/assets/stylesheets/share/footer.scss */
  .share-footer footer .footer-top-pc {
    display: none;
  }
}

/* line 31, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block {
  margin-top: -60px;
  padding-top: 60px;
  padding-bottom: 16px;
  background-color: #F2ECE1;
}

@media screen and (min-width: 744px) {
  /* line 31, app/assets/stylesheets/share/footer.scss */
  .share-footer footer .footer-block {
    margin-top: 0px;
  }
}

/* line 39, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner {
  width: 90%;
  margin: 0 auto;
}

/* line 42, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner .footer-top-zone {
  max-width: 340px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* line 47, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner .footer-top-zone .footer-logo {
  display: block;
  width: 150px;
  height: 44px;
}

/* line 52, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner .footer-top-zone .sns-icons {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* line 56, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner .footer-top-zone .sns-icons a {
  margin-left: 8px;
}

/* line 58, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner .footer-top-zone .sns-icons a:first-child {
  margin-left: 0;
}

/* line 61, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner .footer-top-zone .sns-icons a img {
  width: 44px;
}

/* line 68, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner nav {
  display: -webkit-flex;
  display: flex;
  margin: 24px 0 0 0;
}

/* line 73, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner nav ul {
  font-size: 14px;
  line-height: 16px;
}

/* line 77, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner nav ul li {
  margin-bottom: 4px;
}

/* line 80, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner nav ul li a {
  box-sizing: border-box;
  display: block;
  padding-top: 10px;
  color: #222222;
}

/* line 86, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner nav ul li a:hover, .share-footer footer .footer-block .footer-inner nav ul li a:active {
  color: #D8864E;
  text-decoration: underline;
}

/* line 94, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner nav .vertical-line {
  margin: 10px 32px 0 42px;
  width: 1px;
  height: 48px;
  background-color: #222222;
}

/* line 102, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner .stop-drink {
  margin-top: 16px;
  display: -webkit-flex;
  display: flex;
}

/* line 107, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner .stop-drink p {
  color: #222222;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  margin: 10px 0 0 8px;
}

/* line 116, app/assets/stylesheets/share/footer.scss */
.share-footer footer .footer-block .footer-inner small {
  display: block;
  margin: 24px 0 0 0;
  font-size: 10px;
  color: #222222;
}

/* line 1, app/assets/stylesheets/share/header.scss */
.share-header {
  position: fixed;
  inset: 0;
  margin: 36px auto 0;
  height: 76px;
  width: 94%;
  z-index: 9999;
}

@media all and (max-width: 999px) {
  /* line 1, app/assets/stylesheets/share/header.scss */
  .share-header {
    width: 95%;
    margin: 15px auto 0;
  }
}

/* line 12, app/assets/stylesheets/share/header.scss */
.share-header.persona {
  top: 29px;
}

/* line 14, app/assets/stylesheets/share/header.scss */
.share-header.persona .business-header-button-list {
  display: none;
}

/* line 17, app/assets/stylesheets/share/header.scss */
.share-header.persona .apply {
  width: 200px;
}

/* line 21, app/assets/stylesheets/share/header.scss */
.share-header header {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 16px 40px;
  border-radius: 40px;
  box-sizing: border-box;
  z-index: 99999;
  /*=============================
    .menu-box
    =============================*/
}

@media all and (min-width: 1000px) {
  /* line 21, app/assets/stylesheets/share/header.scss */
  .share-header header {
    background-color: #ffffffCC;
    backdrop-filter: blur(10px);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  }
}

@media all and (max-width: 999px) {
  /* line 21, app/assets/stylesheets/share/header.scss */
  .share-header header {
    padding: 8px 16px 8px 25px;
  }
}

/* line 40, app/assets/stylesheets/share/header.scss */
.share-header header .logo {
  color: #222222;
  height: 44px;
  padding-top: 5px;
  box-sizing: border-box;
}

/* line 45, app/assets/stylesheets/share/header.scss */
.share-header header .logo svg {
  width: 120px;
  height: 34px;
  fill: currentColor;
}

/* line 51, app/assets/stylesheets/share/header.scss */
.share-header header ul {
  display: flex;
  list-style-type: none;
  gap: 20px;
}

@media all and (max-width: 999px) {
  /* line 51, app/assets/stylesheets/share/header.scss */
  .share-header header ul {
    display: none;
  }
}

/* line 58, app/assets/stylesheets/share/header.scss */
.share-header header ul li {
  min-width: 50px;
}

/* line 60, app/assets/stylesheets/share/header.scss */
.share-header header ul li a {
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  display: block;
}

/* line 67, app/assets/stylesheets/share/header.scss */
.share-header header ul li a.text {
  height: 44px;
  line-height: 44px;
}

/* line 70, app/assets/stylesheets/share/header.scss */
.share-header header ul li a.text.current_page {
  color: #D8864E;
}

/* line 73, app/assets/stylesheets/share/header.scss */
.share-header header ul li a.text:active, .share-header header ul li a.text:hover {
  color: #D8864E;
}

/* line 77, app/assets/stylesheets/share/header.scss */
.share-header header ul li a.text-button {
  height: 44px;
  line-height: 44px;
  color: #ffffff;
  background-color: #D8864E;
  border: solid 1px #D8864E;
  border-radius: 4px;
}

/* line 84, app/assets/stylesheets/share/header.scss */
.share-header header ul li a.text-button.current_page {
  color: #D8864E;
  background-color: #ffffff;
}

/* line 88, app/assets/stylesheets/share/header.scss */
.share-header header ul li a.text-button:active, .share-header header ul li a.text-button:hover {
  color: #D8864E;
  background-color: #ffffff;
}

/* line 93, app/assets/stylesheets/share/header.scss */
.share-header header ul li a.button {
  width: 155px;
  font-size: 12px;
  border-radius: 22px;
}

/* line 97, app/assets/stylesheets/share/header.scss */
.share-header header ul li a.button.persona {
  font-size: 11px;
}

/* line 104, app/assets/stylesheets/share/header.scss */
.share-header header .header-right {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}

/* line 108, app/assets/stylesheets/share/header.scss */
.share-header header .header-right .text-link {
  height: 44px;
  line-height: 44px;
  cursor: pointer;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 700;
  color: #474d50;
  text-decoration: none;
  text-align: center;
  display: block;
  text-decoration: underline;
}

@media all and (min-width: 1000px) {
  /* line 108, app/assets/stylesheets/share/header.scss */
  .share-header header .header-right .text-link {
    display: none;
  }
}

/* line 129, app/assets/stylesheets/share/header.scss */
.share-header header .menu-box {
  width: 44px;
  height: 44px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 10px 0 10px 20px;
}

@media all and (min-width: 1000px) {
  /* line 129, app/assets/stylesheets/share/header.scss */
  .share-header header .menu-box {
    display: none;
  }
}

/* line 138, app/assets/stylesheets/share/header.scss */
.share-header header .menu-box .menu-trigger {
  position: relative;
  width: 24px;
  height: 23px;
  display: inline-block;
  transition: all .3s;
  box-sizing: border-box;
}

/* line 147, app/assets/stylesheets/share/header.scss */
.share-header header .menu-box .menu-trigger.active span:nth-of-type(1) {
  -webkit-animation: active-bar01 0.75s;
  animation: active-bar01 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 150, app/assets/stylesheets/share/header.scss */
.share-header header .menu-box .menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}

/* line 153, app/assets/stylesheets/share/header.scss */
.share-header header .menu-box .menu-trigger.active span:nth-of-type(3) {
  -webkit-animation: active-bar03 0.75s;
  animation: active-bar03 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 158, app/assets/stylesheets/share/header.scss */
.share-header header .menu-box .menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #222222;
  border-radius: 4px;
  display: inline-block;
  transition: all .3s;
  box-sizing: border-box;
}

/* line 168, app/assets/stylesheets/share/header.scss */
.share-header header .menu-box .menu-trigger span:nth-of-type(1) {
  top: 0;
  -webkit-animation: bar01 0.75s;
  animation: bar01 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 172, app/assets/stylesheets/share/header.scss */
.share-header header .menu-box .menu-trigger span:nth-of-type(2) {
  top: 10px;
  transition: all .25s .25s;
  opacity: 1;
}

/* line 177, app/assets/stylesheets/share/header.scss */
.share-header header .menu-box .menu-trigger span:nth-of-type(3) {
  bottom: 0;
  -webkit-animation: bar03 0.75s;
  animation: bar03 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes bar01 {
  0% {
    transform: translateY(10px) rotate(45deg);
  }
  50% {
    transform: translateY(10px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes bar03 {
  0% {
    transform: translateY(-10px) rotate(-45deg);
  }
  50% {
    transform: translateY(-10px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes active-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(10px) rotate(0);
  }
  100% {
    transform: translateY(10px) rotate(45deg);
  }
}

@keyframes active-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(0);
  }
  100% {
    transform: translateY(-10px) rotate(-45deg);
  }
}

/* line 230, app/assets/stylesheets/share/header.scss */
.share-header #ua-alert {
  position: fixed;
  width: 92%;
  margin-left: 4%;
  font-size: 12px;
  font-weight: bold;
  color: #e36c6c;
  text-align: center;
  background-color: #ffffff;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  line-height: 1.3em;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

/* line 246, app/assets/stylesheets/share/header.scss */
.share-header #navigation {
  position: fixed;
  top: 0px;
  left: 100%;
  bottom: 0px;
  width: 100%;
  overflow: auto;
  background-color: #ECEAE3;
  background-image: url(/assets/navigation/can-07897a7d55a20ef17440052e5af9dfe9a8ae931586f55bafb9ace83bb11da97f.png);
  background-size: 120px 210px;
  background-repeat: no-repeat;
  background-position: top 50% right -20px;
  box-sizing: border-box;
  padding: 104px 20px 70px 20px;
}

@media all and (min-width: 1000px) {
  /* line 246, app/assets/stylesheets/share/header.scss */
  .share-header #navigation {
    display: none;
  }
}

/* line 263, app/assets/stylesheets/share/header.scss */
.share-header #navigation.active {
  width: 100%;
  -webkit-animation: slideIn 0.5s;
  animation: slideIn 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 267, app/assets/stylesheets/share/header.scss */
.share-header #navigation.inactive {
  width: 100%;
  -webkit-animation: slideOut 0.5s;
  animation: slideOut 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes slideIn {
  0% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}

@keyframes slideOut {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

/* line 287, app/assets/stylesheets/share/header.scss */
.share-header #navigation .campaign-banner {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 10px;
}

/* line 292, app/assets/stylesheets/share/header.scss */
.share-header #navigation ul {
  list-style: none;
}

/* line 294, app/assets/stylesheets/share/header.scss */
.share-header #navigation ul li {
  height: 53px;
}

/* line 296, app/assets/stylesheets/share/header.scss */
.share-header #navigation ul li:not(:nth-child(1)) {
  margin-top: 40px;
}

/* line 299, app/assets/stylesheets/share/header.scss */
.share-header #navigation ul li a {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  -webkit-animation: changeBlack 0.5s;
  animation: changeBlack 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 306, app/assets/stylesheets/share/header.scss */
.share-header #navigation ul li a .en {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
}

/* line 313, app/assets/stylesheets/share/header.scss */
.share-header #navigation ul li a:hover, .share-header #navigation ul li a:active {
  color: #D8864E;
  -webkit-animation: changeClay 0.5s;
  animation: changeClay 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes changeBlack {
  0% {
    color: #D8864E;
  }
  100% {
    color: #222222;
  }
}

@keyframes changeClay {
  0% {
    color: #222222;
  }
  100% {
    color: #D8864E;
  }
}

/* line 336, app/assets/stylesheets/share/header.scss */
.share-header #navigation .buttons {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
}

/* line 340, app/assets/stylesheets/share/header.scss */
.share-header #navigation .buttons p {
  width: 100%;
}

/* line 342, app/assets/stylesheets/share/header.scss */
.share-header #navigation .buttons p:nth-child(2) {
  margin-left: 20px;
}

/* line 349, app/assets/stylesheets/share/header.scss */
.persona-header {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 44px;
  width: 100%;
  z-index: 9999;
  background-color: #AE7E33;
  color: #ffffff;
  display: none;
}

/* line 359, app/assets/stylesheets/share/header.scss */
.persona-header.active {
  display: block;
}

/* line 362, app/assets/stylesheets/share/header.scss */
.persona-header .persona-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
}

/* line 368, app/assets/stylesheets/share/header.scss */
.persona-header .persona-inner .persona-image {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

/* line 373, app/assets/stylesheets/share/header.scss */
.persona-header .persona-inner .persona-image img {
  height: 30px;
  margin-right: 5px;
}

/* line 377, app/assets/stylesheets/share/header.scss */
.persona-header .persona-inner .persona-image img:last-child {
  margin-right: 0;
}

/* line 382, app/assets/stylesheets/share/header.scss */
.persona-header .persona-inner .persona-text {
  font-size: clamp(10px, 3.5vw, 14px);
  font-weight: bold;
  color: #ffffff;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/share/item-popup.scss */
.share-item-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  display: none;
}

/* line 14, app/assets/stylesheets/share/item-popup.scss */
.share-item-popup .popup-body {
  width: 90%;
  max-width: 335px;
  min-width: 290px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 24, app/assets/stylesheets/share/item-popup.scss */
.share-item-popup .popup-body .popup-inner {
  width: 90%;
  padding: 20px 14px;
}

/* line 27, app/assets/stylesheets/share/item-popup.scss */
.share-item-popup .popup-body .popup-inner .image-box {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* line 31, app/assets/stylesheets/share/item-popup.scss */
.share-item-popup .popup-body .popup-inner .image-box .item-image {
  box-sizing: border-box;
  background-color: #f2f2f2;
  padding: 2px;
  display: flex;
  align-items: center;
  position: relative;
}

/* line 38, app/assets/stylesheets/share/item-popup.scss */
.share-item-popup .popup-body .popup-inner .image-box .item-image img {
  width: 100%;
}

/* line 43, app/assets/stylesheets/share/item-popup.scss */
.share-item-popup .popup-body .popup-inner .item-title {
  margin: 16px 0;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  line-height: 1.4em;
  font-size: 18px;
  text-align: center;
}

/* line 50, app/assets/stylesheets/share/item-popup.scss */
.share-item-popup .popup-body .popup-inner .button {
  margin-top: 8px;
  height: 44px;
  line-height: 44px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/share/loading.scss */
.loading-window {
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  justify-content: center;
  align-items: center;
  display: none;
  opacity: 0;
}

/* line 16, app/assets/stylesheets/share/loading.scss */
.loading-window.fade-in {
  animation: fadeIn 500ms;
  animation-fill-mode: both;
}

/* line 21, app/assets/stylesheets/share/loading.scss */
.loading-window.fade-out {
  animation: fadeOut 500ms;
  animation-fill-mode: both;
}

/* line 27, app/assets/stylesheets/share/loading.scss */
.loading-window .loading-box img {
  display: block;
  margin: 0 auto;
  width: 32px;
  height: 32px;
}

/* line 34, app/assets/stylesheets/share/loading.scss */
.loading-window .loading-box p {
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
  font-family: HiraKakuPro-W6;
  line-height: 20px;
  color: #474d50;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  display: none;
}

/* line 14, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body {
  width: 90%;
  max-width: 335px;
  min-width: 290px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 24, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner {
  width: 90%;
  padding: 20px 14px;
}

/* line 27, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* line 31, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-image {
  box-sizing: border-box;
  background-color: #f2f2f2;
  padding: 2px;
  display: flex;
  align-items: center;
  position: relative;
}

/* line 38, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-image img {
  width: 100%;
}

/* line 41, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  width: 30%;
  height: 30%;
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 100;
  background-color: #DAD8A0;
  font-family: "Barlow", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  border-radius: 50%;
}

/* line 58, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark .small-text {
  font-size: 12px;
  line-height: 14px;
}

/* line 62, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark.hidden {
  display: none;
}

@media screen and (max-width: 320px) {
  /* line 67, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
  .share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark {
    font-size: 16px;
  }
  /* line 69, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
  .share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark .small-text {
    font-size: 11px;
    line-height: 11px;
  }
}

@media screen and (min-width: 744px) {
  /* line 76, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
  .share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark {
    font-size: 22px;
  }
  /* line 78, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
  .share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark .small-text {
    font-size: 14px;
    line-height: 16px;
  }
}

/* line 85, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-info {
  min-width: 100px;
  max-width: 100px;
  list-style: none;
  font-size: 12px;
  line-height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* line 94, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-info li {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  color: #474d50;
  margin-bottom: 4px;
}

/* line 98, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-info li:nth-child(2) {
  margin-bottom: 8px;
}

/* line 102, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .image-box .packaged_drink-info .strong {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 10px;
}

/* line 108, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .brewery-name {
  margin-top: 16px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  color: #474d50;
  line-height: 1.2em;
  font-size: 14px;
  text-align: center;
}

/* line 116, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .packaged_drink-title {
  margin: 4px 0 16px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  line-height: 1.3em;
  font-size: 16px;
  text-align: center;
}

/* line 124, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .button {
  margin-top: 8px;
  height: 44px;
  line-height: 44px;
}

/* line 128, app/assets/stylesheets/share/packaged_drink-popup-simple.scss */
.share-packaged_drink-popup-simple .popup-body .popup-inner .button.blue-gray {
  background-color: #566774;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  display: none;
}

/* line 14, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body {
  width: 90%;
  max-width: 335px;
  min-width: 290px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 24, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner {
  width: 90%;
  padding: 20px 14px;
}

/* line 27, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* line 31, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-image {
  box-sizing: border-box;
  background-color: #f2f2f2;
  padding: 2px;
  display: flex;
  align-items: center;
  position: relative;
}

/* line 38, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-image img {
  width: 100%;
}

/* line 41, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  width: 30%;
  height: 30%;
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 100;
  background-color: #DAD8A0;
  font-family: "Barlow", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  border-radius: 50%;
}

/* line 58, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark .small-text {
  font-size: 12px;
  line-height: 14px;
}

/* line 62, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark.hidden {
  display: none;
}

@media screen and (max-width: 320px) {
  /* line 67, app/assets/stylesheets/share/packaged_drink-popup.scss */
  .share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark {
    font-size: 16px;
  }
  /* line 69, app/assets/stylesheets/share/packaged_drink-popup.scss */
  .share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark .small-text {
    font-size: 11px;
    line-height: 11px;
  }
}

@media screen and (min-width: 744px) {
  /* line 76, app/assets/stylesheets/share/packaged_drink-popup.scss */
  .share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark {
    font-size: 22px;
  }
  /* line 78, app/assets/stylesheets/share/packaged_drink-popup.scss */
  .share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-image .non-alcohol-mark .small-text {
    font-size: 14px;
    line-height: 16px;
  }
}

/* line 85, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-info {
  min-width: 100px;
  max-width: 100px;
  list-style: none;
  font-size: 12px;
  line-height: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* line 94, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-info li {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  color: #474d50;
  margin-bottom: 4px;
}

/* line 98, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-info li:nth-child(2) {
  margin-bottom: 8px;
}

/* line 102, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .image-box .packaged_drink-info .strong {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 10px;
}

/* line 108, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .brewery-name {
  margin-top: 16px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  color: #474d50;
  line-height: 1.2em;
  font-size: 14px;
  text-align: center;
}

/* line 116, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .packaged_drink-title {
  margin: 4px 0 16px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  line-height: 1.3em;
  font-size: 16px;
  text-align: center;
}

/* line 124, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .button {
  margin-top: 8px;
  height: 44px;
  line-height: 44px;
}

/* line 128, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .button.red-clay {
  background-color: #D8864E;
}

/* line 131, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .button.amber {
  background-color: #D59800;
}

/* line 135, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .margin-top {
  margin-top: 30px;
}

/* line 138, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner .display-none {
  display: none;
}

/* line 141, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner #dislike-button,
.share-packaged_drink-popup .popup-body .popup-inner #not-dislike-button {
  background-color: #566774;
  color: #ffffff;
  border: none;
  cursor: default;
}

/* line 147, app/assets/stylesheets/share/packaged_drink-popup.scss */
.share-packaged_drink-popup .popup-body .popup-inner #dislike-button:hover,
.share-packaged_drink-popup .popup-body .popup-inner #not-dislike-button:hover {
  border: solid 1px #566774;
  color: #566774;
  background-color: #ffffff;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 5, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item {
  position: relative;
  list-style: none;
  margin-bottom: 16px;
}

/* line 9, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .disable-filter {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 40px;
  background: rgba(255, 255, 255, 0.8);
  text-align: center;
  z-index: 1;
}

/* line 18, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .disable-filter p {
  font-family: HiraKakuPro-W6;
  font-size: 14px;
  color: #BC2A21;
}

/* line 24, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button-label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 12px 16px 12px 0;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 32, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button-label .check-mark-container {
  width: 18%;
  position: relative;
}

/* line 35, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button-label .check-mark-container .check-mark {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
}

/* line 45, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button-label .promotion-text {
  width: 82%;
  font-size: 10px;
  line-height: 12px;
}

/* line 49, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button-label .promotion-text .date {
  margin-bottom: 4px;
}

/* line 52, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button-label .promotion-text .highlight {
  font-family: HiraKakuPro-W6;
  font-size: 13px;
  line-height: 16px;
}

/* line 57, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button-label .promotion-text .name {
  font-size: 12px;
  line-height: 18px;
}

/* line 61, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button-label .promotion-text .comment {
  margin-top: 4px;
  color: #474d50;
}

/* line 67, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button {
  display: none;
}

/* line 69, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button:checked + .radio-button-label {
  border: solid 1px #D8864E;
}

/* line 72, app/assets/stylesheets/share/promotion_codes.scss */
.share-promotion_codes .promotion-list .promotion-item .radio-button:checked + .radio-button-label > .check-mark-container > .check-mark {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/share/view-address.scss */
.share-address {
  display: flex;
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 4px;
  border: solid 1px #f2f2f2;
  margin-bottom: 16px;
  padding: 12px 0;
  box-sizing: border-box;
  position: relative;
  font-size: 12px;
  line-height: 18px;
}

/* line 15, app/assets/stylesheets/share/view-address.scss */
.share-address .mark {
  width: 40px;
  height: 18px;
  border-radius: 10px;
  background-color: #e8a519;
  text-align: center;
  color: #ffffff;
  font-family: HiraKakuPro-W6;
  font-size: 10px;
  box-sizing: border-box;
  padding-top: 5px;
  display: block;
  margin-right: 12px;
  line-height: 100%;
}

/* line 29, app/assets/stylesheets/share/view-address.scss */
.share-address .mark:nth-child(n + 2) {
  margin-top: 4px;
}

/* line 1, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer {
  margin-top: auto;
  width: 100%;
}

/* line 4, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer {
  width: 100%;
  overflow: hidden;
  padding-top: 46px;
}

/* line 8, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block {
  margin-top: -60px;
  padding-top: 60px;
  padding-bottom: 16px;
  background-color: #222222;
}

@media screen and (min-width: 744px) {
  /* line 8, app/assets/stylesheets/share/business/footer.scss */
  .share-business-footer footer .footer-block {
    margin-top: 0px;
  }
}

/* line 16, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner {
  width: 90%;
  margin: 0 auto;
}

/* line 19, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner .footer-top-zone {
  max-width: 340px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* line 24, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner .footer-top-zone .title-text {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #ffffff;
  font-size: 22px;
  line-height: 23px;
  letter-spacing: 1px;
}

/* line 32, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner nav {
  display: flex;
  margin-top: 32px;
}

/* line 36, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner nav ul li {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 32px;
}

/* line 40, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner nav ul li a {
  box-sizing: border-box;
  display: block;
  color: #C7CDCE;
}

/* line 44, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner nav ul li a:hover, .share-business-footer footer .footer-block .footer-inner nav ul li a:active {
  color: #ffffff;
  text-decoration: underline;
}

/* line 52, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner nav .vertical-line {
  margin: 10px 32px 0 42px;
  width: 1px;
  height: 48px;
  background-color: #C7CDCE;
}

/* line 58, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner nav .contact-mail-link {
  display: flex;
  align-items: center;
}

/* line 61, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner nav .contact-mail-link .mail-icon {
  margin-left: 4px;
  height: 15px;
}

/* line 67, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner .stop-drink {
  margin-top: 80px;
  display: flex;
  align-items: flex-start;
}

/* line 71, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner .stop-drink p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #C7CDCE;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  margin: 4px 0 0 8px;
}

/* line 80, app/assets/stylesheets/share/business/footer.scss */
.share-business-footer footer .footer-block .footer-inner small {
  display: block;
  margin-top: 20px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #C7CDCE;
}

/* line 1, app/assets/stylesheets/share/business/header.scss */
.share-business-header {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 80px;
  width: 100%;
  z-index: 9999;
  border-bottom: 1px solid #C7CDCE;
  background-color: #ffffff;
}

/* line 10, app/assets/stylesheets/share/business/header.scss */
.share-business-header header {
  position: relative;
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  box-sizing: border-box;
  z-index: 99999;
}

/* line 20, app/assets/stylesheets/share/business/header.scss */
.share-business-header header .title-text {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #222222;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: 1px;
}

/* line 27, app/assets/stylesheets/share/business/header.scss */
.share-business-header header .login-info-text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #222222;
  font-size: 12px;
  line-height: 18px;
  text-align: right;
}

/* line 33, app/assets/stylesheets/share/business/header.scss */
.share-business-header header .login-info-text.bold {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 8, app/assets/stylesheets/components/../vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  display: none;
}

/* line 12, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

/* line 21, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow: auto;
}

@media (max-width: 768px) {
  /* line 21, app/assets/stylesheets/components/email_opt_in_dialog.scss */
  .email-opt-in-modal .modal-content {
    width: 95%;
    max-width: none;
  }
}

/* line 40, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-header {
  padding: 1.5rem 1.5rem 0;
  border-bottom: 1px solid #eee;
}

/* line 44, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-header h3 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #222222;
}

/* line 52, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-body {
  padding: 1.5rem;
}

/* line 55, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-body p {
  margin: 0 0 1rem;
  line-height: 1.6;
  color: #474d50;
}

/* line 60, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-body p.note {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0;
}

/* line 68, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-footer {
  padding: 0 1.5rem 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}

@media (max-width: 480px) {
  /* line 68, app/assets/stylesheets/components/email_opt_in_dialog.scss */
  .email-opt-in-modal .modal-footer {
    flex-direction: column;
  }
}

/* line 78, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-footer .btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

/* line 86, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-footer .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* line 91, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-footer .btn.btn-primary {
  background: #D59800;
  color: white;
}

/* line 95, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-footer .btn.btn-primary:hover:not(:disabled) {
  background: #a27400;
}

/* line 100, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-footer .btn.btn-secondary {
  background: #f8f9fa;
  color: #474d50;
  border: 1px solid #dee2e6;
}

/* line 105, app/assets/stylesheets/components/email_opt_in_dialog.scss */
.email-opt-in-modal .modal-footer .btn.btn-secondary:hover:not(:disabled) {
  background: #e9ecef;
}

/* line 2, app/assets/stylesheets/addresses/index.scss */
.settings-address main {
  width: 90%;
  margin: 0 auto 64px auto;
  padding-top: 116px;
}

/* line 6, app/assets/stylesheets/addresses/index.scss */
.settings-address main .hidden {
  display: none;
}

/* line 9, app/assets/stylesheets/addresses/index.scss */
.settings-address main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 4px;
}

/* line 14, app/assets/stylesheets/addresses/index.scss */
.settings-address main .description {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  margin-top: 24px;
}

/* line 19, app/assets/stylesheets/addresses/index.scss */
.settings-address main .description.bottom-row {
  margin-top: 4px;
  margin-bottom: 24px;
}

/* line 23, app/assets/stylesheets/addresses/index.scss */
.settings-address main .description .text-highlight {
  font-weight: bold;
}

/* line 27, app/assets/stylesheets/addresses/index.scss */
.settings-address main .text-underline {
  text-decoration: underline;
}

/* line 30, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul {
  margin-top: 32px;
}

/* line 32, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li {
  list-style-type: none;
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 4px;
  border: solid 1px #f2f2f2;
  margin-bottom: 16px;
  padding: 12px 16px;
  box-sizing: border-box;
}

/* line 41, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.33;
  color: #474d50;
}

/* line 47, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li .checkboxes {
  flex: 4 4 80%;
  margin-left: 20px;
}

/* line 50, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li .checkboxes .checkbox-zone {
  position: relative;
  display: inline-block;
  margin: 0 32px 0 0;
  padding: 0;
}

/* line 55, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li .checkboxes .checkbox-zone label {
  color: #333;
}

/* line 57, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li .checkboxes .checkbox-zone label.setting {
  font-size: 14px;
}

/* line 61, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li .checkboxes .checkbox-zone input[type=checkbox] {
  position: absolute;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* line 68, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li .checkboxes .checkbox-zone input[type=checkbox]:hover {
  cursor: pointer;
}

/* line 72, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li .checkboxes .checkbox-zone input[type="checkbox"] + label {
  display: inline-block;
  padding: 6px 0 0 32px;
  height: 24px;
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
  background-size: 24px;
  background-repeat: no-repeat;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}

/* line 84, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li .checkboxes .checkbox-zone input[type="checkbox"]:checked + label {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 91, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li div.new-address .add-address-form {
  margin-top: 16px;
}

/* line 94, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li div.new-address button.add-address {
  background: none;
  color: #474d50;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  border: none;
  text-decoration: underline;
}

/* line 100, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul li div.new-address button.add-address:hover {
  text-decoration: none;
}

/* line 107, app/assets/stylesheets/addresses/index.scss */
.settings-address main ul .add-address-box {
  margin: 28px 0 20px 0;
}

/* line 111, app/assets/stylesheets/addresses/index.scss */
.settings-address main .edit-delete-box {
  margin: 12px 0 0 0;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
}

/* line 114, app/assets/stylesheets/addresses/index.scss */
.settings-address main .edit-delete-box .notes {
  font-size: 10px;
  text-align: left;
}

/* line 118, app/assets/stylesheets/addresses/index.scss */
.settings-address main .edit-delete-box .not-delete {
  margin: 24px 0 0 0;
}

/* line 121, app/assets/stylesheets/addresses/index.scss */
.settings-address main .edit-delete-box form {
  display: inline;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  padding: 0;
  margin: 0;
}

/* line 126, app/assets/stylesheets/addresses/index.scss */
.settings-address main .edit-delete-box form .update-button {
  margin-top: 12px;
}

/* line 129, app/assets/stylesheets/addresses/index.scss */
.settings-address main .edit-delete-box form .delete-button {
  height: auto;
  padding: 0;
  margin: 40px 0 0 0;
  font-size: 14px;
  color: #474d50;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: underline;
}

/* line 142, app/assets/stylesheets/addresses/index.scss */
.settings-address main .edit-delete-box form .delete-button:hover {
  cursor: pointer;
  text-decoration: none;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/alcohol/index.scss */
.alcohol-index, .company-index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/alcohol/index.scss */
.alcohol-index main, .company-index main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 12, app/assets/stylesheets/alcohol/index.scss */
.alcohol-index main h1, .company-index main h1 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  margin-bottom: 32px;
}

/* line 18, app/assets/stylesheets/alcohol/index.scss */
.alcohol-index main table, .company-index main table {
  width: 100%;
}

/* line 20, app/assets/stylesheets/alcohol/index.scss */
.alcohol-index main table tr, .company-index main table tr {
  width: 100%;
}

/* line 22, app/assets/stylesheets/alcohol/index.scss */
.alcohol-index main table tr td, .company-index main table tr td {
  vertical-align: middle;
  width: 50%;
  padding: 28px 8px;
  font-size: 12px;
  border: 1px solid #4a4a4a;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/auth/passwords/edit.scss */
.password-edit {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/auth/passwords/edit.scss */
.password-edit main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 10, app/assets/stylesheets/auth/passwords/edit.scss */
.password-edit main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 32px;
}

/* line 15, app/assets/stylesheets/auth/passwords/edit.scss */
.password-edit main p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  margin-bottom: 32px;
}

/* line 19, app/assets/stylesheets/auth/passwords/edit.scss */
.password-edit main .eye-off, .password-edit main .eye-on {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 56px;
  right: 10px;
  opacity: 0.4;
  background-size: 18px auto;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 31, app/assets/stylesheets/auth/passwords/edit.scss */
.password-edit main .eye-on {
  background-image: url(/assets/eye-6130ea4834577cd5643750668bb669029ebe78c02353699c052836a7b7e7466d.png);
}

/* line 34, app/assets/stylesheets/auth/passwords/edit.scss */
.password-edit main .eye-off {
  background-image: url(/assets/eye-off-8fb245be9184c3097d585409586ceeac15cca46f451980675e89ed6fc5747f60.png);
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/auth/passwords/new.scss */
.password-new {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/auth/passwords/new.scss */
.password-new main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 10, app/assets/stylesheets/auth/passwords/new.scss */
.password-new main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 32px;
}

/* line 15, app/assets/stylesheets/auth/passwords/new.scss */
.password-new main p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  margin-bottom: 32px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/awards/index.scss */
#award-index {
  width: 100%;
  background: #f2f2f2;
}

/* line 6, app/assets/stylesheets/awards/index.scss */
#award-index .share-footer {
  margin-top: -100px;
}

/* line 9, app/assets/stylesheets/awards/index.scss */
#award-index main {
  width: 100%;
  max-width: 580px;
  min-width: 350px;
  padding: 102px 0 0 0;
  margin: 0 auto;
  background: #ffffff;
  padding-bottom: 100px;
  box-sizing: border-box;
  background-color: #1d212d;
}

/* line 19, app/assets/stylesheets/awards/index.scss */
#award-index main section {
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 22, app/assets/stylesheets/awards/index.scss */
#award-index main section.first-section {
  width: 94%;
  border-bottom: solid 1px #979797;
  margin-bottom: 40px;
}

/* line 26, app/assets/stylesheets/awards/index.scss */
#award-index main section.first-section img {
  width: 100%;
}

/* line 29, app/assets/stylesheets/awards/index.scss */
#award-index main section.first-section p {
  color: #ffffff;
}

/* line 31, app/assets/stylesheets/awards/index.scss */
#award-index main section.first-section p.content {
  margin: 48px 0 20px 0;
  font-size: 14px;
  line-height: 1.86;
}

/* line 36, app/assets/stylesheets/awards/index.scss */
#award-index main section.first-section p.note {
  margin: 20px 0 36px 0;
  font-size: 10px;
  line-height: 1.4;
}

/* line 43, app/assets/stylesheets/awards/index.scss */
#award-index main section.last-section {
  width: 94%;
  margin: 48px auto 0 auto;
}

/* line 46, app/assets/stylesheets/awards/index.scss */
#award-index main section.last-section p {
  font-size: 14px;
  line-height: 1.86;
  color: #ffffff;
}

/* line 50, app/assets/stylesheets/awards/index.scss */
#award-index main section.last-section p a {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #ffffff;
  text-decoration: underline;
}

/* line 54, app/assets/stylesheets/awards/index.scss */
#award-index main section.last-section p a:hover {
  text-decoration: none;
}

/* line 60, app/assets/stylesheets/awards/index.scss */
#award-index main section .flex {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-left: 3%;
  column-gap: 20px;
}

/* line 66, app/assets/stylesheets/awards/index.scss */
#award-index main section .flex div {
  position: relative;
  padding-top: 16px;
}

/* line 70, app/assets/stylesheets/awards/index.scss */
#award-index main section .flex div img.review {
  width: 201px;
  height: 20px;
  margin: 0;
  object-fit: contain;
  position: relative;
  z-index: 1;
  margin-top: 16px;
}

/* line 79, app/assets/stylesheets/awards/index.scss */
#award-index main section .flex div img.crown {
  position: absolute;
  width: 160px;
  min-width: 160px;
  height: 117px;
  top: 0px;
  left: 50%;
  margin-left: -80px;
}

/* line 90, app/assets/stylesheets/awards/index.scss */
#award-index main section .flex .beer-image {
  width: 120px;
  height: 120px;
  margin: 0;
  object-fit: contain;
  border-radius: 10px;
  background-color: #FFFFFF;
}

/* line 98, app/assets/stylesheets/awards/index.scss */
#award-index main section .flex h2 {
  margin: 0;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.75;
  color: #ffffff;
  position: relative;
  z-index: 1;
}

/* line 108, app/assets/stylesheets/awards/index.scss */
#award-index main section p.content {
  width: 94%;
  margin: 28px auto 28px auto;
  font-size: 14px;
  line-height: 1.86;
  color: #ffffff;
}

/* line 114, app/assets/stylesheets/awards/index.scss */
#award-index main section p.content a {
  color: #e45453;
  text-decoration: underline;
}

/* line 117, app/assets/stylesheets/awards/index.scss */
#award-index main section p.content a:hover {
  text-decoration: none;
}

/* line 122, app/assets/stylesheets/awards/index.scss */
#award-index main section h3 {
  width: 94%;
  margin: 28px auto 22px auto;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  border-left: 6px solid #fff;
  padding-left: 8px;
  box-sizing: border-box;
}

/* line 132, app/assets/stylesheets/awards/index.scss */
#award-index main section ul {
  justify-content: flex-start;
  overflow-y: hidden;
  display: flex;
  -webkit-overflow-scrolling: touch;
  padding: 0 3%;
  height: 127px;
}

/* line 139, app/assets/stylesheets/awards/index.scss */
#award-index main section ul.long-height {
  height: 200px;
}

/* line 142, app/assets/stylesheets/awards/index.scss */
#award-index main section ul li {
  list-style-type: none;
}

/* line 144, app/assets/stylesheets/awards/index.scss */
#award-index main section ul li:last-child {
  margin-right: 0;
}

/* line 147, app/assets/stylesheets/awards/index.scss */
#award-index main section ul li p {
  height: 100%;
  font-size: 12px;
  line-height: 1.67;
  color: #222222;
  min-width: 253px;
  margin: 0 12px 0 0;
  padding-left: 5%;
  padding-right: 5%;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 #000000;
  background-color: #ffffff;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  box-sizing: border-box;
}

/* line 167, app/assets/stylesheets/awards/index.scss */
#award-index main section .border {
  width: 94%;
  margin: 48px auto 40px auto;
  border-bottom: solid 1px #979797;
}

/* line 1, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body {
  overflow-x: hidden;
  background-color: #f2f2f2;
}

/* line 5, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

/* line 13, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.top {
  position: relative;
  margin-top: 84px;
  background-image: url(/assets/beer_language/bg-9ffe15a987600a26273a7901ae319856fc369105e95ea7bd03a8b77775b5a913.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 30vh;
}

@media screen and (min-width: 415px) {
  /* line 13, app/assets/stylesheets/beer_language/index.scss */
  #beer-language-body main section.top {
    height: 40vh;
  }
}

@media screen and (min-width: 744px) {
  /* line 13, app/assets/stylesheets/beer_language/index.scss */
  #beer-language-body main section.top {
    height: 50vh;
  }
}

/* line 27, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.top .page-title {
  position: absolute;
  box-sizing: border-box;
  background-color: #ffffff;
  width: 262px;
  height: 74px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: -37px;
  left: 50%;
  margin-left: -131px;
}

/* line 40, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.top .page-title p {
  font-size: 14px;
  margin-bottom: 4px;
}

/* line 45, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.top .page-title-shadow {
  position: absolute;
  width: 262px;
  height: 74px;
  display: block;
  content: "";
  background-color: #C7CDCE;
  bottom: -51px;
  left: 50%;
  margin-left: -119px;
}

/* line 57, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.about {
  width: 80%;
  max-width: 382px;
  min-width: 296px;
  margin: 92px auto 0;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}

/* line 66, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up {
  margin-top: 80px;
}

/* line 69, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up .slider .slider-content {
  margin: 28px 10px 0;
}

/* line 71, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up .slider .slider-content .beer {
  margin-top: 24px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

/* line 76, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up .slider .slider-content .beer span {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* line 80, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up .slider .slider-content .explanation {
  margin: 20px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
}

/* line 86, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up .slider .slider-content img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
}

/* line 93, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up .slider .slick-next {
  right: 20px;
  width: 30px;
  height: 30px;
}

/* line 97, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up .slider .slick-next::before {
  color: #222222;
}

/* line 101, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up .slider .slick-prev {
  z-index: 2;
  left: 20px;
  width: 30px;
  height: 30px;
}

/* line 106, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.pick-up .slider .slick-prev::before {
  color: #222222;
}

/* line 112, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list {
  margin: 80px auto;
  width: 80%;
  max-width: 700px;
}

/* line 116, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list ul {
  list-style: none;
  margin-top: 28px;
}

@media screen and (min-width: 744px) {
  /* line 116, app/assets/stylesheets/beer_language/index.scss */
  #beer-language-body main section.language-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* line 125, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list ul li {
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px;
}

@media screen and (min-width: 744px) {
  /* line 125, app/assets/stylesheets/beer_language/index.scss */
  #beer-language-body main section.language-list ul li {
    width: 48%;
  }
}

/* line 134, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list ul li .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* line 138, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list ul li .title .beer {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

/* line 143, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list ul li .title img {
  width: 34px;
  height: 34px;
  transform: rotate(180deg);
}

/* line 147, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list ul li .title img.active {
  transform: rotate(0deg);
}

/* line 152, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list ul li .content {
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  will-change: transform;
  margin-top: 0px;
  opacity: 0;
  height: 0px;
}

/* line 160, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list ul li .content.active {
  margin-top: 20px;
  height: auto;
  opacity: 1;
}

/* line 165, app/assets/stylesheets/beer_language/index.scss */
#beer-language-body main section.language-list ul li .content.inactive {
  margin-top: 0px;
  height: 0px;
  opacity: 0;
}

/* line 1, app/assets/stylesheets/beers/show.scss */
#beers-show {
  width: 100%;
  background: #ECEAE3;
}

/* line 4, app/assets/stylesheets/beers/show.scss */
#beers-show main {
  padding: 84px 0;
}

/* line 6, app/assets/stylesheets/beers/show.scss */
#beers-show main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 6, app/assets/stylesheets/beers/show.scss */
  #beers-show main section {
    max-width: 415px;
  }
}

/* line 12, app/assets/stylesheets/beers/show.scss */
#beers-show main section.full {
  width: 100%;
}

/* line 16, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer {
  position: relative;
}

/* line 18, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer .beer-image {
  width: 100vw;
  height: 100vw;
  max-height: 415px;
  max-width: 415px;
  object-fit: cover;
}

@media screen and (min-width: 415px) {
  /* line 18, app/assets/stylesheets/beers/show.scss */
  #beers-show main section.beer .beer-image {
    border-radius: 20px;
    margin-top: 62px;
  }
}

/* line 32, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .name {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0px;
  gap: 8px;
}

/* line 40, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .name h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
}

/* line 45, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .name p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 4px;
  color: #ffffff;
  background-color: #222222;
}

/* line 53, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .beer-info {
  margin-top: 16px;
}

/* line 55, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .beer-info p {
  margin-top: 4px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
}

/* line 61, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .wholesale-memo {
  margin-top: 16px;
}

/* line 63, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .wholesale-memo p {
  padding: 12px 8px 16px 8px;
  background-color: #ffffff;
  border-radius: 8px;
  font-size: 16px;
  line-height: 23px;
}

/* line 71, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .text {
  margin-top: 40px;
}

/* line 73, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .text h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 30px;
}

/* line 79, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .text .beer-image {
  width: 100%;
  border-radius: 10px;
  margin-top: 20px;
}

/* line 84, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .text p {
  margin: 20px 0px;
  font-size: 16px;
  line-height: 26px;
}

/* line 88, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .text p a {
  word-break: break-all;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #D8864E;
  text-decoration: underline;
}

/* line 96, app/assets/stylesheets/beers/show.scss */
#beers-show main section.beer-content .button {
  margin-top: 20px;
}

/* line 102, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .brewery-image {
  width: 100%;
  border-radius: 10px;
  margin-top: 32px;
}

/* line 107, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .info {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* line 115, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .info .brewery-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0px;
  gap: 6px;
}

/* line 122, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .info .brewery-name h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 22px;
}

/* line 131, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .info .brewery-name p {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
}

/* line 136, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .info .brewery-logo {
  width: 82px;
  border-radius: 50%;
  border: 2px solid #222222;
}

/* line 142, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .text {
  margin-top: 20px;
}

/* line 144, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .text h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}

/* line 149, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .text p {
  margin: 20px 0px;
  font-size: 16px;
  line-height: 23px;
}

/* line 153, app/assets/stylesheets/beers/show.scss */
#beers-show main section.brewery-content .text p a {
  word-break: break-all;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #D8864E;
  text-decoration: underline;
}

/* line 163, app/assets/stylesheets/beers/show.scss */
#beers-show main .dynamic-link {
  display: block;
  position: fixed;
  left: 16px;
  bottom: 24px;
  width: calc(100% - 32px);
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  background: #D8864E;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #ffffff;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  z-index: 1;
}

@media screen and (min-width: 415px) {
  /* line 163, app/assets/stylesheets/beers/show.scss */
  #beers-show main .dynamic-link {
    max-width: 415px;
    left: calc(50% - 207.5px);
  }
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/billing_cards/edit.scss */
.settings-billing_cards-edit main {
  width: 90%;
  margin: 0 auto 64px auto;
  padding-top: 116px;
}

/* line 8, app/assets/stylesheets/billing_cards/edit.scss */
.settings-billing_cards-edit main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 4px;
}

/* line 13, app/assets/stylesheets/billing_cards/edit.scss */
.settings-billing_cards-edit main .card-info {
  margin-top: 32px;
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 4px;
  border: solid 1px #f2f2f2;
  margin-bottom: 16px;
  padding: 12px 16px;
  box-sizing: border-box;
}

/* line 22, app/assets/stylesheets/billing_cards/edit.scss */
.settings-billing_cards-edit main .card-info p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.33;
  color: #474d50;
}

/* line 29, app/assets/stylesheets/billing_cards/edit.scss */
.settings-billing_cards-edit main .button-box {
  display: flex;
  justify-content: center;
  margin: 12px 0 40px;
}

/* line 34, app/assets/stylesheets/billing_cards/edit.scss */
.settings-billing_cards-edit main .comment {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  color: #474d50;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

/* line 41, app/assets/stylesheets/billing_cards/edit.scss */
.settings-billing_cards-edit main .submit-text-button {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  margin: 0 auto;
  display: block;
  text-align: center;
  padding: 12px 0;
  text-decoration: underline;
  font-size: 14px;
  line-height: 18px;
  border: none;
  background-color: #fff;
  color: #474d50;
}

/* line 53, app/assets/stylesheets/billing_cards/edit.scss */
.settings-billing_cards-edit main .submit-text-button a:hover {
  color: #e8a519;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main {
  width: 90%;
  margin: 0 auto 64px auto;
  padding-top: 116px;
}

/* line 8, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 4px;
}

/* line 13, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-list {
  margin-top: 32px;
}

/* line 15, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-list .card-item {
  list-style-type: none;
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 4px;
  border: solid 1px #f2f2f2;
  margin-bottom: 16px;
  padding: 12px 16px;
  box-sizing: border-box;
}

/* line 24, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-list .card-item .card-info {
  display: flex;
  align-items: flex-start;
  padding-bottom: 16px;
}

/* line 28, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-list .card-item .card-info .mark {
  width: 40px;
  height: 18px;
  border-radius: 10px;
  background-color: #e8a519;
  text-align: center;
  color: #ffffff;
  font-family: HiraKakuPro-W6;
  font-size: 10px;
  box-sizing: border-box;
  padding-top: 5px;
  display: block;
  margin-right: 12px;
  line-height: 100%;
}

/* line 42, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-list .card-item .card-info .mark:nth-child(n + 2) {
  margin-top: 4px;
}

/* line 47, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-list .card-item .card-info .card-text p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.33;
  color: #474d50;
}

/* line 55, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-list .card-item .operation {
  display: flex;
  justify-content: flex-end;
}

/* line 61, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .add-billing_card {
  color: #474d50;
  text-decoration: underline;
}

/* line 64, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .add-billing_card:hover {
  text-decoration: none;
}

/* line 68, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-register-dialog-form {
  margin-bottom: 24px;
}

/* line 70, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-register-dialog-form .submit-text-button {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  margin: 0 auto;
  display: block;
  text-align: center;
  padding: 12px 0;
  text-decoration: underline;
  font-size: 14px;
  line-height: 18px;
  border: none;
  background-color: #fff;
  color: #474d50;
}

/* line 82, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-register-dialog-form .submit-text-button a:hover {
  color: #e8a519;
}

/* line 86, app/assets/stylesheets/billing_cards/index.scss */
.settings-billing_cards main .card-register-dialog-form .comment {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  color: #474d50;
  font-size: 11px;
  text-align: center;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main {
  width: 90%;
  margin: 0 auto 64px auto;
  padding-top: 116px;
}

/* line 9, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 4px;
}

/* line 15, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .description {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  margin-top: 24px;
}

/* line 20, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .description.bottom-row {
  margin-top: 4px;
  margin-bottom: 24px;
}

/* line 26, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .card-register-section {
  background-color: #f2f2f2;
  border-radius: 4px;
  border: solid 1px #f2f2f2;
  padding: 16px;
  box-sizing: border-box;
  margin-bottom: 24px;
}

/* line 34, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .card-register-section .card-form-section {
  padding: 8px 0;
}

/* line 37, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .card-register-section .card-form-section .label {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #474d50;
  margin-bottom: 8px;
  display: block;
}

/* line 45, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .card-register-section .card-form-section .card-element-wrapper {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 12px;
}

/* line 53, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .card-register-section .card-form-section .card-errors {
  color: #e53e3e;
  font-size: 14px;
  min-height: 1.2em;
  margin-bottom: 16px;
}

/* line 60, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .card-register-section .card-form-section .submit-button {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  display: block;
  width: 100%;
  background-color: #e8a519;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 12px 0;
  font-size: 14px;
  cursor: pointer;
}

/* line 71, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .card-register-section .card-form-section .submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* line 79, app/assets/stylesheets/billing_cards/new.scss */
.settings-billing_cards.new main .button.prev {
  margin-top: 16px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/brewery/brewery.scss */
.brewery-index main {
  width: 90%;
  margin: 0 auto;
  padding-top: 110px;
}

/* line 7, app/assets/stylesheets/brewery/brewery.scss */
.brewery-index main h2 {
  margin: 0 0 25px 0;
  font-family: HiraKakuPro-W6;
  font-size: 18px;
  line-height: 1.33;
  color: #474d50;
}

/* line 14, app/assets/stylesheets/brewery/brewery.scss */
.brewery-index main p {
  font-family: HiraginoSans-W3;
  font-size: 14px;
  line-height: 1.86;
  color: #333;
}

/* line 20, app/assets/stylesheets/brewery/brewery.scss */
.brewery-index main .button {
  margin: 24px 0 64px 0;
}

/* line 23, app/assets/stylesheets/brewery/brewery.scss */
.brewery-index main a {
  color: #24264a;
  font-weight: bold;
  text-decoration: underline;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/contact/index.scss */
.contact-index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/contact/index.scss */
.contact-index main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 12, app/assets/stylesheets/contact/index.scss */
.contact-index main h1 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  margin-bottom: 24px;
}

/* line 17, app/assets/stylesheets/contact/index.scss */
.contact-index main p.alert {
  margin: 12px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.4em;
  color: #BC2A21;
}

/* line 23, app/assets/stylesheets/contact/index.scss */
.contact-index main p.alert a {
  color: #566774;
  text-decoration: underline;
}

/* line 26, app/assets/stylesheets/contact/index.scss */
.contact-index main p.alert a:hover {
  text-decoration: none;
}

/* line 31, app/assets/stylesheets/contact/index.scss */
.contact-index main .agree-check-box {
  display: none;
}

/* line 34, app/assets/stylesheets/contact/index.scss */
.contact-index main .agree-check-box:checked + .agree-check-label .check {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 39, app/assets/stylesheets/contact/index.scss */
.contact-index main .agree-check-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* line 44, app/assets/stylesheets/contact/index.scss */
.contact-index main .agree-check-label .check {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
  background-size: cover;
  background-repeat: no-repeat;
}

/* line 53, app/assets/stylesheets/contact/index.scss */
.contact-index main .agree-check-label .terms-link-text {
  font-size: 14px;
}

/* line 57, app/assets/stylesheets/contact/index.scss */
.contact-index main .notice {
  background-color: #f2f2f2;
  margin-bottom: 24px;
  padding: 16px;
}

/* line 61, app/assets/stylesheets/contact/index.scss */
.contact-index main .notice p {
  font-size: 12px;
  line-height: 1.4em;
}

/* line 64, app/assets/stylesheets/contact/index.scss */
.contact-index main .notice p span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4em;
  color: #222222;
  margin-bottom: 4px;
}

/* line 71, app/assets/stylesheets/contact/index.scss */
.contact-index main .notice p span.alert {
  color: #BC2A21;
}

/* line 75, app/assets/stylesheets/contact/index.scss */
.contact-index main .notice p a {
  color: #566774;
  font-weight: bold;
  text-decoration: underline;
}

/* line 84, app/assets/stylesheets/contact/index.scss */
.contact-index textarea:disabled {
  background-color: #c7cdce !important;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/faq/index.scss */
.faq-index {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
}

/* line 5, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone {
  width: 90%;
  margin: 0 auto 64px;
  padding-top: 116px;
}

/* line 9, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone h1 {
  margin-bottom: 20px;
  color: #474d50;
}

/* line 13, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone h2 {
  font-size: 14px;
  padding: 4px 8px;
  color: #ffffff;
  background-color: #566774;
  margin-bottom: 24px;
}

/* line 20, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .index-link-wrapper {
  margin: 32px 0 40px 16px;
  font-size: 14px;
  line-height: 1.86;
  color: #566774;
}

/* line 25, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .index-link-wrapper li {
  list-style: none;
  text-decoration: underline;
}

/* line 30, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .anchor {
  padding-top: 100px;
  margin-top: -100px;
}

/* line 34, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq {
  margin-bottom: 32px;
}

/* line 36, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .question {
  display: flex;
  margin-bottom: 16px;
  position: relative;
}

/* line 40, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .question img {
  width: 30px;
  height: 30px;
  margin: 0 8px 0 0;
}

/* line 46, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .question div .question-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #474d50;
  line-height: 1.3;
  position: absolute;
  top: 50%;
  /*親要素を起点に上から50%*/
  transform: translateY(-50%);
  /*要素の大きさの半分ずつを戻す*/
}

/* line 57, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .answer {
  background-color: #ECEAE3;
  font-size: 12px;
  line-height: 1.5;
  color: #474d50;
  padding: 16px;
  border-radius: 8px;
}

/* line 64, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .answer a {
  text-decoration: underline;
  color: #566774;
}

/* line 68, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .answer .important {
  font-weight: bold;
  color: #D8864E;
}

/* line 72, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .answer .text-highlight {
  display: inline-block;
  font-weight: bold;
  margin-bottom: 8px;
}

/* line 76, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .answer .text-highlight .text-small {
  font-size: 10px;
  font-weight: normal;
}

/* line 81, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .answer .under-line {
  text-decoration: underline;
}

/* line 84, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .answer .answer-child {
  display: inline-block;
  margin: 8px 0 4px;
}

/* line 87, app/assets/stylesheets/faq/index.scss */
.faq-index .faq-zone .faq .answer .answer-child.padding {
  padding: 0 4px;
}

/* line 1, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index {
  width: 100%;
  background: #f2f2f2;
}

/* line 4, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  background: #ffffff;
  padding-bottom: 64px;
  box-sizing: border-box;
  margin-bottom: 64px;
}

/* line 12, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main .top-zone {
  width: 100%;
}

/* line 14, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main .top-zone img {
  width: 100%;
}

/* line 18, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main section {
  padding: 30px 0 0 0;
  width: 100%;
  background-image: url(/images/anniversary_background.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* line 24, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main section .content {
  width: 90%;
  margin: 0 auto;
}

/* line 27, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main section .content h2 {
  display: inline;
  font-family: HiraginoSans-W6;
  font-size: 20px;
  line-height: 1.3;
  color: #ffffff;
  background-color: #202c65;
}

/* line 35, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main section .content img {
  width: 100%;
  margin: 24px 0 0 0;
}

/* line 39, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main section .content p {
  width: 100%;
  font-family: HiraginoSans-W6;
  font-size: 14px;
  line-height: 1.43;
  color: #333;
  margin: 30px 0;
}

/* line 49, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main .voting {
  display: block;
  width: 90%;
  border: 1px solid #e8a519;
  color: #fff;
  background-color: #e8a519;
  margin: 0 auto 40px auto;
  text-align: center;
  box-sizing: border-box;
  height: 40px;
  border-radius: 4px;
  line-height: 40px;
  font-size: 14px;
  font-family: HiraKakuPro-W6;
}

/* line 63, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index main .voting:hover {
  border: 1px solid #e8a519;
  color: #e8a519;
  background-color: #fff;
}

/* line 70, app/assets/stylesheets/first_anniversaries/index.scss */
#first-anniversary-index #footer {
  margin-top: -110px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  background: #ffffff;
  padding-bottom: 100px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
}

/* line 13, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main .top-zone {
  position: relative;
}

/* line 16, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main .top-zone img.venue {
  position: absolute;
  width: 80%;
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/* line 25, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main .top-zone img.bg {
  width: 100%;
  min-height: auto;
  min-height: 371px;
  margin-bottom: 42px;
}

/* line 33, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section {
  width: 90%;
  margin: 0 auto 35px auto;
  border-bottom: solid 1px #e6e6e6;
  padding-bottom: 35px;
  position: relative;
}

/* line 39, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section h2 {
  font-family: HiraginoSans-W6;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: normal;
  color: #ffffff;
  background-color: #24264a;
  display: inline;
  padding: 0 4px;
}

/* line 52, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section .section-concept-decision {
  position: absolute;
  width: 147px;
}

/* line 55, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section .section-concept-decision.name {
  left: 42%;
  top: 30%;
}

/* line 59, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section .section-concept-decision.default {
  right: -10px;
  top: 20px;
}

/* line 64, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section .section-img {
  width: 100%;
  margin-top: 20px;
  min-height: 142px;
}

/* line 69, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul {
  margin-top: 20px;
}

/* line 71, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul.image-ul {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

/* line 78, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul.image-ul li {
  width: 45%;
  min-width: 45%;
  margin-bottom: 60px;
}

/* line 83, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul.image-ul li label .check {
  position: absolute;
  bottom: -34px;
  left: 45%;
}

/* line 88, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul.image-ul li label img {
  width: 100%;
}

/* line 94, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li {
  list-style-type: none;
  margin-bottom: 14px;
}

/* line 97, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li label {
  display: flex;
  position: relative;
  align-items: flex-start;
}

/* line 101, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li label input[type=radio] {
  display: none;
}

/* line 104, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li label input[type=radio] + .check {
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
}

/* line 107, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li label input[type=radio]:checked + .check {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 110, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li label input[type=text] {
  width: 100%;
  height: 28px;
  border-radius: 4px;
  background-color: #ffffff;
  box-sizing: border-box;
  position: relative;
  top: -6px;
  padding: 0 4px;
  background: none;
  -webkit-appearance: none;
  border: solid 1px #c9c9c9;
  font-size: 14px;
  font-family: HiraginoSans-W6;
}

/* line 125, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li label p {
  font-family: HiraginoSans-W6;
  font-size: 14px;
  color: #333;
  padding-top: 6px;
}

/* line 131, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li label .check {
  width: 26px;
  height: 26px;
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
  margin-right: 8px;
  background-size: cover;
}

/* line 138, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li label .check-on {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 141, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section ul li label .border {
  width: 100%;
  height: 1px;
  border-bottom: solid 1px #000000;
  position: absolute;
  top: 11px;
  left: -4px;
}

/* line 152, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section input[type=submit] {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: solid 2px #e8a519;
  background-color: #e8a519;
  font-family: HiraKakuPro-W6;
  font-size: 14px;
  color: #ffffff;
  margin-top: 20px;
}

/* line 162, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section input[type=submit]:hover {
  border: 1px solid #e8a519;
  color: #e8a519;
  background-color: #fff;
  cursor: pointer;
}

/* line 169, app/assets/stylesheets/first_anniversaries/voting.scss */
#anniversary-voting main section .note {
  color: #333;
  font-family: HiraKakuPro-W3;
  font-size: 12px;
  margin-top: 20px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

/* line 8, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main {
  width: 90%;
  max-width: 700px;
  margin: 116px auto 64px auto;
}

/* line 12, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main h1 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1.11px;
  margin-bottom: 24px;
}

/* line 19, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main h2 {
  font-family: HiraKakuPro-W3;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 6px;
}

/* line 25, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .heading-wide-margin {
  margin-bottom: 10px;
}

/* line 28, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .section {
  margin-bottom: 24px;
}

/* line 31, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .product-info {
  display: flex;
  justify-content: space-between;
}

/* line 34, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .product-info .image-wrapper {
  width: 30%;
  margin-right: 12px;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
}

/* line 40, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .product-info .image-wrapper img {
  width: 100%;
  height: auto;
}

/* line 45, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .product-info .text-area {
  width: 70%;
  font-family: HiraKakuPro-W3;
  font-size: 14px;
  line-height: 20px;
}

/* line 52, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .select-container {
  width: 100%;
  display: flex;
}

/* line 56, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .select-wrapper {
  position: relative;
  border: 1px solid #474D50;
  border-radius: 4px;
  padding: 1px;
}

/* line 61, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .select-wrapper.date {
  flex: 1 1 60%;
  margin-right: 16px;
  max-width: 320px;
}

/* line 66, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .select-wrapper.time-width {
  flex: 1 1 40%;
  max-width: 160px;
}

/* line 70, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .select-wrapper .select-box {
  font-family: HiraKakuPro-W3;
  width: 100%;
  height: 44px;
  padding: 11px;
  background-color: none;
  border: none;
  font-size: 14px;
  color: #474d50;
}

/* line 80, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .select-wrapper .triangle {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #474D50;
  position: absolute;
  top: 19px;
  right: 14px;
}

/* line 91, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .text-wrapper {
  background-color: #f2f2f2;
  font-size: 12px;
  line-height: 16px;
  border-radius: 4px;
  padding: 12px;
}

/* line 97, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .text-wrapper.address {
  letter-spacing: 0.5px;
}

/* line 101, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 40px 0 12px;
}

/* line 106, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 16px;
  max-width: 160px;
  border: solid 1px #707879;
}

/* line 112, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .button-box .next {
  flex: 1 1 70%;
  max-width: 320px;
  border: none;
}

/* line 116, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 119, app/assets/stylesheets/gift_codes/confirm.scss */
.gift_codes-confirm main .button-box .next.orange:active, .gift_codes-confirm main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

/* line 8, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main {
  width: 90%;
  max-width: 700px;
  margin: 116px auto 64px auto;
}

/* line 12, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1.11px;
  margin-bottom: 24px;
}

/* line 20, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .address-list .address-item {
  list-style: none;
  margin-bottom: 16px;
}

/* line 23, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .address-list .address-item .radio-button-label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 12px 16px 12px 0;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 31, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .address-list .address-item .radio-button-label .check-mark-container {
  width: 18%;
  position: relative;
}

/* line 34, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .address-list .address-item .radio-button-label .check-mark-container .check-mark {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
}

/* line 44, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .address-list .address-item .radio-button-label .address-text {
  width: 82%;
  font-size: 12px;
  line-height: 16px;
}

/* line 48, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .address-list .address-item .radio-button-label .address-text .text-highlight {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 53, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .address-list .address-item .radio-button {
  display: none;
}

/* line 55, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .address-list .address-item .radio-button:checked + .radio-button-label {
  border: solid 1px #e6c66b;
}

/* line 58, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .address-list .address-item .radio-button:checked + .radio-button-label > .check-mark-container > .check-mark {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 64, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .open-form-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
}

/* line 69, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .add-address-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
  margin-bottom: 12px;
}

/* line 75, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .new-address {
  padding: 28px 16px;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 80, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .add-address-box {
  margin: 28px 0 4px;
}

/* line 83, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 32px 0 40px;
}

/* line 88, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 16px;
  border: solid 1px #707879;
}

/* line 93, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .button-box .next {
  flex: 1 1 70%;
  border: none;
}

/* line 96, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 99, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .button-box .next.orange:active, .gift_codes-shipping_address main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 107, app/assets/stylesheets/gift_codes/shipping_address.scss */
.gift_codes-shipping_address main .hidden {
  display: none;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/gifts/billing_edit.scss */
.gift-billing_edit {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/gifts/billing_edit.scss */
.gift-billing_edit main {
  width: 90%;
  margin: 128px auto;
  max-width: 1024px;
}

/* line 11, app/assets/stylesheets/gifts/billing_edit.scss */
.gift-billing_edit main section {
  margin-bottom: 16px;
}

/* line 13, app/assets/stylesheets/gifts/billing_edit.scss */
.gift-billing_edit main section .billing_display_name {
  margin: 0;
}

/* line 16, app/assets/stylesheets/gifts/billing_edit.scss */
.gift-billing_edit main section .alert {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  text-align: center;
  margin-bottom: 32px;
  color: #BC2A21;
  font-size: 14px;
  line-height: 1.5em;
}

/* line 25, app/assets/stylesheets/gifts/billing_edit.scss */
.gift-billing_edit main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 32px;
  text-align: center;
}

/* line 31, app/assets/stylesheets/gifts/billing_edit.scss */
.gift-billing_edit main .comment {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  margin-bottom: 16px;
  text-align: center;
}

/* line 36, app/assets/stylesheets/gifts/billing_edit.scss */
.gift-billing_edit main p {
  text-align: left;
  margin-bottom: 8px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete main {
  width: 90%;
  max-width: 1024px;
  margin: 128px auto;
}

/* line 11, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 32px;
  text-align: center;
}

/* line 17, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete main .shipping-edit-url-info {
  text-align: center;
  margin-bottom: 32px;
  font-size: 14px;
}

/* line 22, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete main .shipping-edit-url-box {
  background-color: #f2f2f2;
  padding: 16px 12px 12px 12px;
}

/* line 26, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete main .shipping-edit-url {
  text-align: center;
  word-break: break-all;
}

/* line 30, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete main .shipping-edit-url-link {
  text-align: center;
  margin: 32px auto 48px;
  text-decoration: underline;
  font-size: 12px;
}

/* line 35, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete main .shipping-edit-url-link a:hover {
  color: #e8a519;
}

/* line 39, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete main .alert {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  text-align: center;
  color: #BC2A21;
  font-size: 16px;
  margin-bottom: 16px;
}

/* line 46, app/assets/stylesheets/gifts/billing_edit_complete.scss */
.gift-billing_edit_complete main .info {
  text-align: center;
  font-size: 14px;
  line-height: 1.2em;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/gifts/confirm_popup.scss */
.gift-confirm_popup.popup.hide {
  display: none;
}

/* line 6, app/assets/stylesheets/gifts/confirm_popup.scss */
.gift-confirm_popup.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 17, app/assets/stylesheets/gifts/confirm_popup.scss */
.gift-confirm_popup.popup .popup-body {
  width: 90%;
  height: 300px;
  max-width: 335px;
  min-width: 290px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

/* line 26, app/assets/stylesheets/gifts/confirm_popup.scss */
.gift-confirm_popup.popup .popup-inner {
  width: 90%;
  padding: 15px;
}

/* line 29, app/assets/stylesheets/gifts/confirm_popup.scss */
.gift-confirm_popup.popup .popup-inner h1 {
  margin-top: 20px;
  font-family: HiraKakuPro-W6;
  font-size: 18px;
  text-align: center;
}

/* line 35, app/assets/stylesheets/gifts/confirm_popup.scss */
.gift-confirm_popup.popup .popup-inner .info {
  margin: 32px 0;
}

/* line 38, app/assets/stylesheets/gifts/confirm_popup.scss */
.gift-confirm_popup.popup .popup-inner .submit {
  margin-bottom: 16px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/gifts/index.scss */
.gift main {
  width: 100%;
  padding-top: 116px;
}

/* line 7, app/assets/stylesheets/gifts/index.scss */
.gift main h1 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  text-align: center;
  margin-bottom: 32px;
}

/* line 13, app/assets/stylesheets/gifts/index.scss */
.gift main .lead-text {
  font-family: HiraKakuPro-W6;
  font-size: 16px;
  text-align: center;
  margin: 0 16px 32px 16px;
  line-height: 160%;
}

/* line 20, app/assets/stylesheets/gifts/index.scss */
.gift main ul {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 64px;
  list-style: none;
  display: -webkit-flex;
  display: flex;
  white-space: nowrap;
  overflow-y: hidden;
  justify-content: center;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
}

/* line 32, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift {
  box-sizing: border-box;
  border: solid 1px #4a4a4a;
  flex: 0 0 90%;
  max-width: 335px;
  padding-bottom: 16px;
  margin-left: 16px;
}

/* line 39, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift:first-child {
  margin-left: 0px;
}

/* line 42, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift img {
  width: 100%;
}

/* line 45, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner {
  width: 90%;
  margin: 16px auto 0 auto;
}

/* line 48, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner h2 {
  font-family: HiraKakuPro-W6;
  font-size: 14px;
  margin-bottom: 16px;
}

/* line 53, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner .gift-content {
  font-size: 12px;
  margin-bottom: 4px;
  white-space: normal;
  word-wrap: break-word;
}

/* line 59, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner .delivery-schedule {
  font-size: 12px;
  white-space: normal;
  word-wrap: break-word;
  margin-bottom: 4px;
}

/* line 64, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner .delivery-schedule span {
  font-weight: bold;
}

/* line 68, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner .delivery-date {
  font-family: HiraKakuPro-W6;
  color: #e8a519;
  margin-bottom: 12px;
}

/* line 73, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner .alert {
  font-size: 10px;
  font-weight: bold;
  white-space: normal;
  word-wrap: break-word;
  margin-bottom: 12px;
  line-height: 1.2em;
  color: #e36c6c;
}

/* line 82, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner table {
  width: 100%;
}

/* line 84, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner table td {
  vertical-align: middle;
  padding: 5px 0px;
  text-align: right;
}

/* line 89, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner table .item {
  width: 70%;
  font-size: 12px;
}

/* line 93, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner table .content {
  width: 30%;
  font-size: 16px;
}

/* line 97, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner table .sum {
  font-family: HiraKakuPro-W6;
}

/* line 101, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner hr {
  margin: 16px auto;
  border-top: 1px solid #e6e6e6;
}

/* line 105, app/assets/stylesheets/gifts/index.scss */
.gift main ul .gift .gift-inner .button {
  margin-top: 16px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit .hidden {
  display: none;
}

/* line 10, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit .top-img {
  width: 100%;
  max-width: 600px;
  margin: 84px auto 0;
  display: block;
}

/* line 16, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main {
  width: 90%;
  max-width: 1024px;
  margin: 12px auto 64px auto;
}

/* line 20, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .sender {
  margin-top: 120px;
}

/* line 23, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .sender .note {
  text-align: center;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 20px;
}

/* line 29, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .sender .note a {
  color: #24264a;
  text-decoration: underline;
  font-weight: bold;
}

/* line 36, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .lead-text {
  text-align: center;
  margin: 12px 0 16px 0;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

/* line 42, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .lead-text span {
  font-weight: bold;
}

/* line 46, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .alert {
  text-align: center;
  margin-bottom: 24px;
  color: #BC2A21;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
}

/* line 54, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .note-text {
  text-align: center;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 48px;
}

/* line 60, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .note-text a {
  text-decoration: underline;
}

/* line 62, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .note-text a:hover {
  text-decoration: none;
}

/* line 68, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .shipping_edit h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 32px;
  text-align: center;
}

/* line 74, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .shipping_edit .privacy-manifesto {
  font-size: 12px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  margin-bottom: 16px;
  font-weight: normal;
  text-align: center;
}

/* line 81, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .shipping_edit .info {
  font-size: 14px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  margin: 32px 0;
  text-align: center;
  background-color: #f2f2f2;
  padding: 16px 20px;
}

/* line 88, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .shipping_edit .info span {
  font-size: 12px;
  color: #BC2A21;
  font-weight: bold;
}

/* line 94, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .shipping_edit .arrival-date {
  border-radius: 4px;
  height: 32px;
  margin: 4px 0px;
  padding: 0px 8px;
}

/* line 100, app/assets/stylesheets/gifts/shipping_edit.scss */
.gift-shipping_edit main .shipping_edit .arrival-time-width {
  border-radius: 4px;
  height: 32px;
  margin: 4px 0px;
  padding: 0px 8px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete main {
  width: 90%;
  max-width: 1024px;
  margin: 128px auto;
}

/* line 11, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete main img {
  max-width: 250px;
}

/* line 14, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete main .logo {
  display: block;
  width: 50%;
  margin: 0 auto;
}

/* line 19, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 32px;
  text-align: center;
}

/* line 25, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete main p {
  text-align: center;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.3em;
}

/* line 31, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete main .contact-help {
  background-color: #f2f2f2;
  padding: 20px 16px;
}

/* line 35, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete main .contact-link {
  text-decoration: underline;
}

/* line 37, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete main .contact-link a:hover {
  color: #e8a519;
}

/* line 41, app/assets/stylesheets/gifts/shipping_edit_complete.scss */
.gift-shipping_edit_complete main .generic-order-code {
  font-weight: bold;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/important_notices/index.scss */
.important-notices-index main {
  width: 90%;
  margin: 0 auto 64px auto;
  padding-top: 110px;
}

/* line 7, app/assets/stylesheets/important_notices/index.scss */
.important-notices-index main h2 {
  margin: 30px 0 20px 0;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.33;
  color: #474d50;
}

/* line 14, app/assets/stylesheets/important_notices/index.scss */
.important-notices-index main p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.86;
  color: #474d50;
}

/* line 20, app/assets/stylesheets/important_notices/index.scss */
.important-notices-index main ul {
  margin: 0 0 0 0;
  padding: 0 0 0 20px;
}

/* line 23, app/assets/stylesheets/important_notices/index.scss */
.important-notices-index main ul li {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  margin-bottom: 4px;
  padding: 0;
  font-size: 14px;
  color: #474d50;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/law/index.scss */
.law-index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/law/index.scss */
.law-index main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 12, app/assets/stylesheets/law/index.scss */
.law-index main h1 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  margin-bottom: 32px;
}

/* line 18, app/assets/stylesheets/law/index.scss */
.law-index main table {
  width: 100%;
}

/* line 20, app/assets/stylesheets/law/index.scss */
.law-index main table tr {
  width: 100%;
}

/* line 22, app/assets/stylesheets/law/index.scss */
.law-index main table tr td {
  vertical-align: middle;
  width: 50%;
  padding: 28px 8px;
  font-size: 12px;
  border: 1px solid #4a4a4a;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/login/index.scss */
.login-index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/login/index.scss */
.login-index main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 10, app/assets/stylesheets/login/index.scss */
.login-index main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 32px;
}

/* line 15, app/assets/stylesheets/login/index.scss */
.login-index main .spacer {
  height: 48px;
}

/* line 18, app/assets/stylesheets/login/index.scss */
.login-index main .text-link {
  text-align: center;
  text-decoration: underline;
  font-size: 14px;
  line-height: 18px;
  padding-bottom: 16px;
}

/* line 25, app/assets/stylesheets/login/index.scss */
.login-index main .attention {
  font-size: 12px;
  color: #e36c6c;
  text-align: center;
  margin-top: 12px;
  font-weight: bold;
}

/* line 32, app/assets/stylesheets/login/index.scss */
.login-index main .or {
  width: 100%;
  margin: 32px 0;
}

/* line 35, app/assets/stylesheets/login/index.scss */
.login-index main .or hr {
  margin: 0;
  border-top: 1px dashed #4a4a4a;
}

/* line 39, app/assets/stylesheets/login/index.scss */
.login-index main .or p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  background-color: #ffffff;
  font-size: 12px;
  margin: -8px auto 0 auto;
  width: 72px;
  text-align: center;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  background: #ffffff;
  padding-bottom: 100px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
  padding: 92px 3% 102px 3%;
}

/* line 14, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section {
  margin-top: 40px;
}

/* line 17, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.logo-section img {
  margin-top: 24px;
}

/* line 19, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.logo-section img.logo-b {
  padding: 20px 54px;
}

/* line 22, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.logo-section img.logo-a {
  padding: 20px 85px;
}

/* line 28, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.introduction-section img {
  margin-top: 20px;
}

/* line 32, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.kv-section {
  position: relative;
}

/* line 34, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.kv-section .images {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* line 39, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.kv-section .images img {
  width: 45%;
  margin-top: 20px;
}

/* line 42, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.kv-section .images img:nth-child(n + 3) {
  margin-top: 30px;
}

/* line 47, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.kv-section .plus {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 2px 0 0 -15px;
}

/* line 52, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.kv-section .plus .parts {
  position: relative;
  display: inline-block;
}

/* line 55, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.kv-section .plus .parts::before {
  content: '';
  width: 22px;
  height: 22px;
  border: 0px;
  position: absolute;
}

/* line 64, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.kv-section .plus .parts1::before {
  content: '';
  border-top: solid 2px #e2e2e2;
  border-right: solid 2px #e2e2e2;
  top: 11px;
  left: -8px;
}

/* line 73, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section.kv-section .plus .parts2::before {
  border-bottom: solid 2px #e2e2e2;
  border-left: solid 2px #e2e2e2;
  top: -11px;
  left: 9px;
}

/* line 82, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section h1 {
  font-family: HiraKakuPro-W6;
  font-size: 18px;
  line-height: 1.33;
  color: #474d50;
}

/* line 88, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section h2 {
  padding: 10px 0 10px 12px;
  background-color: #f1f1f1;
  font-family: HiraKakuPro-W6;
  font-size: 16px;
  color: #474d50;
}

/* line 95, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section p {
  font-family: HiraginoSans-W3;
  font-size: 14px;
  line-height: 1.86;
  color: #333;
  margin-top: 32px;
}

/* line 102, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section img {
  max-width: 100%;
  border: solid 1px #e2e2e2;
  box-sizing: border-box;
}

/* line 107, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section a {
  width: 100%;
  height: 44px;
  font-family: HiraKakuPro-W6;
  font-size: 14px;
  padding: 16px 84px 14px;
  border-radius: 4px;
  background-color: #e8a519;
  border: 1px solid #e8a519;
  color: #ffffff;
  display: block;
  margin: 20px auto 0 auto;
  box-sizing: border-box;
  text-align: center;
}

/* line 121, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index main section a:hover {
  color: #e8a519;
  background-color: #fff;
}

/* line 128, app/assets/stylesheets/media_kits/index.scss */
.media-kit-index .share-footer {
  margin-top: -40px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/*=============================
fadeIn - fadeOut
=============================*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*=============================
blurIn - blurOut
=============================*/
@keyframes blurIn {
  0% {
    filter: blur(6px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes blurOut {
  0% {
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    opacity: 0;
    filter: blur(6px);
  }
}

/*=============================
scaleIn - scaleOut
=============================*/
@keyframes scaleIn {
  0% {
    transform: scale(0, 0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  0% {
    transform: scale(1, 1);
    opacity: 1;
  }
  20% {
    transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0, 0);
    opacity: 0;
  }
}

/*=============================
button
=============================*/
@keyframes shadowFadeIn {
  0% {
    box-shadow: none;
  }
  100% {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  }
}

@keyframes shadowFadeOut {
  0% {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  }
  100% {
    box-shadow: none;
  }
}

@keyframes shine {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    left: 125%;
  }
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container {
  width: 90%;
  margin: 0 auto 64px;
  padding-top: 116px;
}

/* line 8, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container h1 {
  margin-bottom: 20px;
}

/* line 11, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .description {
  font-family: HiraginoSans-W3;
  font-size: 14px;
  line-height: 1.86;
  color: #333;
}

/* line 17, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .index-link-wrapper {
  margin: 32px 0 40px 16px;
  font-family: HiraginoSans-W3;
  font-size: 14px;
  line-height: 1.86;
  color: #333;
}

/* line 23, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .index-link-wrapper li {
  list-style: none;
  text-decoration: underline;
}

/* line 28, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .method-wrapper {
  padding-top: 100px;
  margin-top: -100px;
  margin-bottom: 32px;
}

/* line 33, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container h2 {
  font-size: 14px;
  padding: 4px 8px;
  color: #ffffff;
  background-color: #24264a;
  margin-bottom: 16px;
}

/* line 40, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .setup-method {
  color: #474d50;
}

/* line 42, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .setup-method p {
  font-size: 14px;
  margin-bottom: 24px;
}

/* line 45, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .setup-method p a {
  font-family: HiraKakuPro-W6;
  text-decoration: underline;
  color: #24264a;
}

/* line 51, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .setup-method dt {
  font-size: 14px;
  margin-bottom: 12px;
}

/* line 54, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .setup-method dt a {
  font-family: HiraKakuPro-W6;
  text-decoration: underline;
  color: #24264a;
}

/* line 60, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .setup-method dd {
  font-family: HiraKakuPro-W3;
  background-color: #f2f2f2;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 8px;
  margin-bottom: 24px;
}

/* line 67, app/assets/stylesheets/mobile_carriers_email/index.scss */
.mobile-carriers-email .main-container .setup-method dd span {
  font-weight: bold;
  color: #e36c6c;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/mypage/dislike.scss */
#dislike-popup .packaged_drink-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2em;
  text-align: center;
  color: #474d50;
  margin-top: 16px;
}

/* line 12, app/assets/stylesheets/mypage/dislike.scss */
#dislike-popup #dislike-letter {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #474d50;
  margin-top: 16px;
  text-align: center;
}

/* line 19, app/assets/stylesheets/mypage/dislike.scss */
#dislike-popup #dislike-info {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3em;
  text-align: center;
  color: #474d50;
  margin: 16px 0 8px 0;
}

/* line 27, app/assets/stylesheets/mypage/dislike.scss */
#dislike-popup #dislike-note {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 10px;
  text-align: center;
  color: #BC2A21;
}

/* line 33, app/assets/stylesheets/mypage/dislike.scss */
#dislike-popup .dislike-form {
  margin-top: 16px;
}

/* line 36, app/assets/stylesheets/mypage/dislike.scss */
#dislike-popup .button {
  margin-top: 8px;
  height: 44px;
  line-height: 44px;
}

/* line 40, app/assets/stylesheets/mypage/dislike.scss */
#dislike-popup .button.red-clay {
  background-color: #D8864E;
}

/* line 43, app/assets/stylesheets/mypage/dislike.scss */
#dislike-popup .button.amber {
  background-color: #D59800;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/mypage/index.scss */
.mypage-index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/mypage/index.scss */
.mypage-index main {
  width: 90%;
  max-width: 700px;
  margin: 116px auto 64px auto;
}

/* line 11, app/assets/stylesheets/mypage/index.scss */
.mypage-index main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 20px;
}

/* line 16, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .banner {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 40px;
  align-items: center;
}

@media screen and (min-width: 744px) {
  /* line 16, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main .banner {
    display: flex;
  }
}

/* line 24, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .banner .link {
  display: block;
  width: 100%;
}

/* line 27, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .banner .link .image-pc {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

/* line 33, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .banner .link .image-sp {
  display: none;
}

@media screen and (max-width: 743px) {
  /* line 37, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main .banner .link .image-sp {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: auto;
  }
  /* line 43, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main .banner .link .image-pc {
    display: none;
  }
}

/* line 49, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .switcher {
  list-style: none;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 32px;
}

/* line 54, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .switcher li {
  flex: 1 1 50%;
}

/* line 56, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .switcher li a {
  box-sizing: border-box;
  display: block;
  height: 40px;
  border: 1px solid #e8a519;
  color: #e8a519;
  background-color: #ffffff;
  font-family: HiraKakuPro-W6;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
}

/* line 68, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .switcher li a.left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* line 73, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .switcher li a.right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* line 78, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .switcher li a.active {
  color: #ffffff;
  background-color: #e8a519;
}

/* line 83, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .switcher li a:hover, .mypage-index main .switcher li a:active {
  color: #ffffff;
  background-color: #e8a519;
}

/* line 90, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section {
  margin-top: 32px;
}

/* line 92, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section h2 {
  margin-bottom: 32px;
  font-size: 16px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #474d50;
}

/* line 98, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .no-content-box {
  margin-bottom: 24px;
}

/* line 101, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section p.sorry-stop {
  line-height: 1.2em;
}

/* line 104, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .applying-campaign {
  font-family: HiraKakuPro-W6;
  font-size: 12px;
  margin-bottom: 8px;
  color: #24264a;
}

/* line 110, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-schedule {
  font-size: 12px;
  margin-bottom: 8px;
}

/* line 114, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-schedule span.arrival-date {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #e8a519;
}

/* line 119, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-schedule span.note {
  display: inline-block;
  font-size: 10px;
  text-align: left;
  line-height: 16px;
  margin: 8px 0;
}

/* line 127, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-schedule.skip {
  text-decoration: line-through;
}

/* line 131, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .product-schedule-image {
  width: 100%;
  margin-bottom: 8px;
}

/* line 134, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .product-schedule-image .image {
  width: 100%;
  height: auto;
}

/* line 139, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .product-schedule-description {
  color: #474d50;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 16px;
}

/* line 145, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-address {
  box-sizing: border-box;
  font-size: 12px;
  margin-bottom: 12px;
  background-color: #f2f2f2;
  padding: 8px 12px;
}

/* line 151, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-address.skip {
  text-decoration: line-through;
}

/* line 154, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-address a {
  text-decoration: underline;
  color: #24264a;
}

/* line 159, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-title {
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 16px;
  font-weight: bold;
}

/* line 165, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .text-wrapper {
  margin-bottom: 16px;
}

/* line 167, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .text-wrapper .delivery-text {
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 16px;
}

/* line 173, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section {
  margin-bottom: 12px;
}

/* line 175, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section .delivery-section-title {
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  font-size: 12px;
  color: #474d50;
  background-color: #f2f2f2;
  margin-bottom: 8px;
}

/* line 184, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section .delivery-section-list {
  margin-top: 12px;
  list-style: none;
}

/* line 187, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section .delivery-section-list li {
  font-size: 14px;
  color: #474d50;
  margin-top: 4px;
}

/* line 194, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section-box {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  border-left: 2px solid #c7cdce;
  list-style: none;
  margin-top: 8px;
}

/* line 203, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section-box .delivery-item-list {
  flex: 0 1 auto;
  margin-left: 5px;
  background-color: #f2f2f2;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  padding: 1px;
  position: relative;
}

/* line 212, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section-box .delivery-item-list.limited-packaged_drink {
  background-color: #566774;
}

/* line 214, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section-box .delivery-item-list.limited-packaged_drink .limited-text {
  position: absolute;
  width: 48px;
  height: 12px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 8px;
  color: #fff;
  background-color: #566774;
  bottom: 0;
  left: 1px;
  text-align: center;
  box-sizing: border-box;
  padding-top: 2px;
  display: block;
}

/* line 230, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section-box .delivery-item-list img {
  width: 48px;
  height: 48px;
}

/* line 234, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section-box .delivery-item-list p {
  display: none;
}

@media screen and (max-width: 366px) {
  /* line 238, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main section .delivery-section-box .delivery-item-list:nth-child(n + 6) {
    margin-top: 5px;
  }
}

@media screen and (max-width: 427px) {
  /* line 243, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main section .delivery-section-box .delivery-item-list:nth-child(n + 7) {
    margin-top: 5px;
  }
}

@media screen and (max-width: 488px) {
  /* line 248, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main section .delivery-section-box .delivery-item-list:nth-child(n + 8) {
    margin-top: 5px;
  }
}

/* line 252, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section-box .delivery-item-list .non-alcohol-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  width: 40%;
  height: 40%;
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 100;
  background-color: #DAD8A0;
  font-family: "Barlow", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 8px;
  color: #222222;
  border-radius: 50%;
}

/* line 270, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section-box .delivery-item-list .non-alcohol-mark .small-text {
  display: inline-block;
  font-size: 6px;
  line-height: 6px;
}

/* line 275, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-section-box .delivery-item-list .non-alcohol-mark p {
  display: inline-block;
}

@media screen and (min-width: 744px) {
  /* line 280, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main section .delivery-section-box .delivery-item-list .non-alcohol-mark {
    width: 44%;
    height: 44%;
    font-size: 9px;
  }
  /* line 284, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main section .delivery-section-box .delivery-item-list .non-alcohol-mark .small-text {
    font-size: 7px;
    line-height: 7px;
  }
}

/* line 292, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info {
  position: relative;
  min-height: 100px;
  margin-bottom: 20px;
}

/* line 296, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .payment-status-box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  padding-top: 30px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  z-index: 1;
}

/* line 305, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .payment-status-box p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #e36c6c;
}

/* line 310, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .payment-status-box span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #e36c6c;
}

/* line 316, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .price {
  box-sizing: border-box;
  background-color: #f2f2f2;
  width: 100%;
  font-size: 14px;
  padding: 12px 12px 8px;
  margin-top: 12px;
  border-collapse: separate;
}

/* line 324, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .price tr {
  height: 20px;
  display: flex;
}

/* line 327, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .price tr.billing-schedule {
  padding-bottom: 4px;
}

/* line 332, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .price td.title {
  font-size: 12px;
  text-align: left;
  width: 50%;
}

/* line 337, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .price td.content {
  text-align: right;
  width: 50%;
}

/* line 341, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .price td.discount {
  color: #e36c6c;
}

/* line 344, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .price td.total {
  font-weight: bold;
}

/* line 347, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .price td.billing-schedule {
  width: 80%;
  font-weight: bold;
}

/* line 353, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .receipt-url {
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
  color: #24264a;
  text-decoration: underline;
}

/* line 359, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivery-info .receipt-url:hover {
  text-decoration: none;
}

/* line 364, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .template-select-box {
  margin-bottom: 12px;
}

/* line 367, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .button-box {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

/* line 371, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .button-box .plan-history-restart-form, .mypage-index main section .button-box .skip, .mypage-index main section .button-box .order-skip-form {
  flex: 1 1 50%;
  margin-right: 16px;
}

/* line 375, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .button-box .restart-form, .mypage-index main section .button-box .skip-form {
  width: 100%;
}

/* line 378, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .button-box .apply-gift, .mypage-index main section .button-box .cancel-gift-form {
  flex: 1 1 50%;
}

/* line 381, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .button-box .gift-settings {
  border: none;
}

/* line 383, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .button-box .gift-settings.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 386, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .button-box .gift-settings.orange:active, .mypage-index main section .button-box .gift-settings.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 394, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .expired_date {
  font-size: 12px;
  text-align: center;
}

/* line 397, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .expired_date span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 401, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .no-content {
  box-sizing: border-box;
  width: 100%;
  padding: 32px 12px;
  background-color: #f2f2f2;
  font-size: 12px;
  line-height: 1.4em;
}

/* line 409, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .message-container {
  background: #DAD8A0;
  padding: 24px 20px 32px;
  border-radius: 8px;
  margin: 24px 0 40px;
  font-weight: bold;
}

/* line 415, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .message-container .message-text {
  color: #474d50;
  font-size: 14px;
  text-align: center;
  line-height: 1.5em;
  margin-bottom: 16px;
}

/* line 421, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .message-container .message-text.sub {
  list-style: none;
  text-align: left;
  font-weight: normal;
  font-size: 12px;
  line-height: 1.6em;
  margin-bottom: 0;
}

/* line 431, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .delivered-date {
  font-size: 14px;
  margin-bottom: 12px;
}

/* line 435, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-date {
  font-size: 14px;
  margin-bottom: 8px;
}

/* line 439, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-box {
  padding: 16px 12px 12px 12px;
  background-color: #f2f2f2;
  margin-bottom: 24px;
}

/* line 443, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-box .plan-note {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #e36c6c;
  margin: -4px 0 12px 0;
}

/* line 449, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-box .plan-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}

/* line 454, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-box .plan-content {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* line 459, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-box .plan-content div {
  width: 100%;
}

/* line 461, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-box .plan-content div p {
  font-size: 12px;
  line-height: 18px;
}

/* line 464, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-box .plan-content div p.note {
  text-align: right;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 10px;
}

/* line 469, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-box .plan-content div p.price {
  text-align: right;
}

/* line 471, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .plan-box .plan-content div p.price span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
}

/* line 480, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .unsubscribe-text {
  text-align: right;
  color: #474d50;
  font-size: 12px;
  margin-top: 24px;
}

/* line 486, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .text-link {
  margin-top: 12px;
  display: block;
  text-align: right;
  font-size: 12px;
  border: none;
  color: #474d50;
  text-decoration: underline;
}

/* line 496, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .feedback-box h2 {
  margin: 24px 0 16px 0;
}

/* line 499, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .feedback-box textarea {
  resize: none;
  width: 100%;
  height: 86px;
  font-size: 14px;
  line-height: 1.43;
  color: #333;
  margin: 0 0 24px 0;
  border-radius: 4px;
  padding: 8px 10px;
  box-sizing: border-box;
}

/* line 511, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .feedback-box p {
  width: 100%;
  min-height: 86px;
  font-family: HiraKakuPro-W6;
  font-size: 14px;
  line-height: 1.43;
  color: #333333;
  box-sizing: border-box;
  padding: 8px 10px;
  background-color: #f2f2f2;
  border-radius: 4px;
  margin: 0 0 24px 0;
}

/* line 526, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .gift-container::after {
  clear: both;
}

@media screen and (min-width: 800px) {
  /* line 530, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main section .generic-order {
    margin-right: 20px;
  }
}

/* line 534, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order hr {
  margin: 20px 0;
}

/* line 537, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-date {
  font-size: 14px;
  margin-bottom: 8px;
}

/* line 541, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box {
  box-sizing: border-box;
  padding: 0px;
}

/* line 544, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .relative {
  position: relative;
  margin-bottom: 10px;
}

/* line 547, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .relative .generic-order-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 83px;
}

/* line 552, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .relative .generic-order-content .purchase-date {
  font-family: HiraKakuPro-W3;
  font-size: 10px;
  color: #474d50;
}

/* line 558, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .relative .generic-order-image {
  width: 75px;
  height: 50px;
  object-fit: cover;
}

/* line 564, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .delivery-packaged_drinks {
  margin-top: 12px;
}

/* line 566, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .delivery-packaged_drinks .title {
  font-family: HiraKakuPro-W3;
  font-size: 12px;
  margin-bottom: 10px;
  color: #474d50;
}

/* line 573, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-info {
  margin-top: 2px;
}

/* line 575, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-info .purchase-date {
  margin-bottom: 6px;
}

/* line 578, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-info .generic-order-title {
  font-family: HiraKakuPro-W6;
  font-size: 12px;
  color: #474d50;
  margin-bottom: 6px;
  font-weight: bold;
}

/* line 586, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-info .cancellation span {
  text-decoration: line-through;
}

/* line 590, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-info span.cancel-label {
  text-decoration: none;
  padding: 3px 8px 2px 8px;
  border-radius: 8px;
  background-color: #e36c6c;
  font-family: HiraKakuPro-W6;
  font-size: 10px;
  color: #ffffff;
}

/* line 599, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-info .generic-order-schedule {
  font-family: HiraKakuPro-W3;
  font-size: 12px;
  color: #474d50;
}

/* line 603, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-info .generic-order-schedule span.emphasized-yellow {
  font-family: HiraKakuPro-W6;
  font-size: 16px;
  color: #e8a519;
}

/* line 610, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-content-info {
  background-color: #f2f2f2;
  padding: 8px 12px;
}

/* line 613, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-content-info .cancel {
  font-family: HiraKakuPro-W6;
  font-size: 10px;
  color: #e36c6c;
}

/* line 619, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .receipt-url {
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
  color: #24264a;
  text-decoration: underline;
}

/* line 625, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .receipt-url:hover {
  text-decoration: none;
}

/* line 629, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-alert {
  border: solid 1px #e36c6c;
  padding: 8px;
  margin-top: 8px;
}

/* line 633, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-alert .alert {
  font-family: HiraKakuPro-W6;
  font-size: 10px;
  line-height: 1.4;
  color: #e36c6c;
  margin: 0;
}

/* line 640, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .generic-order-alert .url {
  font-family: HiraKakuPro-W3;
  font-size: 10px;
  line-height: 1.4;
  color: #474d50;
}

/* line 647, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .text {
  font-family: HiraKakuPro-W3;
  font-size: 12px;
  color: #474d50;
  margin-bottom: 4px;
}

/* line 652, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .text:last-child {
  margin-bottom: 0px;
}

/* line 655, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .text .link {
  font-weight: bold;
  color: #24264a;
  text-decoration: underline;
}

/* line 659, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .text .link:hover {
  text-decoration: none;
}

/* line 663, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .text.generic-order-status {
  font-size: 12px;
  margin-bottom: 0;
}

/* line 667, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .text.alert {
  color: #e36c6c;
  font-weight: bold;
}

/* line 671, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .text.generic-order-url {
  font-size: 12px;
}

/* line 675, app/assets/stylesheets/mypage/index.scss */
.mypage-index main section .generic-order .generic-order-box .text span.section {
  border-left: 4px solid #24264a;
  padding-left: 8px;
}

/* line 684, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .app {
  margin-bottom: 64px;
}

/* line 686, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .app .app-description {
  color: #474d50;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 16px;
}

/* line 692, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .app .icons-wrapper {
  position: relative;
  background-image: url(/assets/fes/beer_bravo/app_bg-0e36e52981c3545bce41729ad11ca9655561de9e9e90b0481facc1e4f2886c6b.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 698, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .app .icons-wrapper::before {
  content: "";
  display: block;
}

@media screen and (max-width: 743px) {
  /* line 698, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main .app .icons-wrapper::before {
    padding-top: 100%;
  }
}

@media screen and (min-width: 744px) {
  /* line 698, app/assets/stylesheets/mypage/index.scss */
  .mypage-index main .app .icons-wrapper::before {
    padding-top: 60%;
  }
}

/* line 708, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .app .icons-wrapper .icon {
  position: absolute;
  width: 240px;
  top: 50%;
  left: 50%;
  margin: -135px 0 0 -120px;
}

/* line 715, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .app .icons-wrapper .buttons {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: -26px;
}

/* line 725, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .app .icons-wrapper .buttons .ios {
  max-width: 141px;
}

/* line 728, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .app .icons-wrapper .buttons .android {
  max-width: 175px;
}

/* line 735, app/assets/stylesheets/mypage/index.scss */
.mypage-index main #invite-promotion-code-section .invite-promotion-code-description {
  font-size: 14px;
  margin-bottom: 12px;
}

/* line 739, app/assets/stylesheets/mypage/index.scss */
.mypage-index main #invite-promotion-code-section .invite-promotion-code-box {
  padding: 16px 12px 12px 12px;
  background-color: #f2f2f2;
}

/* line 743, app/assets/stylesheets/mypage/index.scss */
.mypage-index main #invite-promotion-code-section .invite-promotion-code-img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

/* line 748, app/assets/stylesheets/mypage/index.scss */
.mypage-index main #invite-promotion-code-section .invite-promotion-code {
  word-break: break-all;
}

/* line 751, app/assets/stylesheets/mypage/index.scss */
.mypage-index main #invite-promotion-code-section #invite-promotion-code-copy {
  padding: 0rem 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* line 757, app/assets/stylesheets/mypage/index.scss */
.mypage-index main hr {
  margin: 32px auto;
  border-top: 1px solid #e6e6e6;
}

/* line 761, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .gift-code-container {
  margin: 0 auto 40px;
}

/* line 763, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .gift-code-container .input-code-label {
  font-size: 14px;
  line-height: 1.2em;
  margin-bottom: 8px;
}

/* line 768, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .gift-code-container .input-code-form {
  width: 100%;
  max-width: 425px;
  margin: 0 auto;
  text-align: center;
}

/* line 774, app/assets/stylesheets/mypage/index.scss */
.mypage-index main .gift-code-container .input-code-text {
  width: 100%;
  max-width: 384px;
  height: 26px;
  border-radius: 4px;
  border: solid 1px #4a4a4a;
  line-height: 14px;
  font-size: 14px;
  padding: 8px;
}

@media screen and (max-width: 514px) {
  /* line 788, app/assets/stylesheets/mypage/index.scss */
  .mypage-index .pc {
    display: none !important;
  }
}

@media screen and (min-width: 515px) {
  /* line 793, app/assets/stylesheets/mypage/index.scss */
  .mypage-index .smp {
    display: none !important;
  }
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 6, app/assets/stylesheets/mypage/purchase_history.scss */
.mypage-index main #purchase-history-user #order-box hr {
  margin: 20px 0;
}

/* line 12, app/assets/stylesheets/mypage/purchase_history.scss */
.mypage-index main .dispatched-generic-orders .generic-order-schedule {
  font-family: HiraKakuPro-W3;
  font-size: 12px;
  color: #474d50;
}

/* line 16, app/assets/stylesheets/mypage/purchase_history.scss */
.mypage-index main .dispatched-generic-orders .generic-order-schedule span {
  font-family: HiraKakuPro-W6;
  font-size: 12px !important;
  color: #474d50 !important;
}

/* line 22, app/assets/stylesheets/mypage/purchase_history.scss */
.mypage-index main .dispatched-generic-orders h2 {
  margin-top: 32px;
}

/* line 25, app/assets/stylesheets/mypage/purchase_history.scss */
.mypage-index main .dispatched-generic-orders .delivery-packaged_drinks {
  display: none;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/mypage/resign.scss */
.resign {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/mypage/resign.scss */
.resign main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 11, app/assets/stylesheets/mypage/resign.scss */
.resign main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 24px;
}

/* line 16, app/assets/stylesheets/mypage/resign.scss */
.resign main .attention {
  font-family: HiraKakuPro-W6;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #BC2A21;
  margin-bottom: 20px;
  line-height: 14px;
}

/* line 28, app/assets/stylesheets/mypage/resign.scss */
.resign main .form-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* line 33, app/assets/stylesheets/mypage/resign.scss */
.resign main .form-buttons .button {
  min-width: 120px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 37, app/assets/stylesheets/mypage/resign.scss */
.resign main .form-buttons .button.outline {
  background: transparent;
  border: 1px solid #474d50;
  color: #222222;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 13, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 24px;
}

/* line 19, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .description {
  color: #474d50;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 32px;
}

/* line 26, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group {
  margin-bottom: 32px;
}

/* line 29, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .form-label {
  font-size: 14px;
  color: #474d50;
  margin-bottom: 16px;
}

/* line 35, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .radio-group {
  background-color: #ECEAE3;
  border-radius: 4px;
  padding: 12px 8px;
}

/* line 40, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .radio-group .radio-item {
  margin-bottom: 12px;
}

/* line 43, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .radio-group .radio-item:last-child {
  margin-bottom: 0;
}

/* line 47, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .radio-group .radio-item label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

/* line 52, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .radio-group .radio-item label input[type="radio"] {
  flex: 0 0 16px;
  margin: 2px 12px 0 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: #ffffff;
  border: 1px solid #474d50;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  min-width: 16px;
  padding: 0;
}

/* line 68, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .radio-group .radio-item label input[type="radio"]:checked {
  border: 1px solid #D8864E;
  background-color: #ffffff;
}

/* line 72, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .radio-group .radio-item label input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #D8864E;
}

/* line 86, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .radio-group .radio-item label span {
  font-size: 13px;
  line-height: 20px;
  color: #474d50;
  letter-spacing: 0.5px;
}

/* line 96, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  background-color: #ffffff;
  border: 1px solid #474d50;
  border-radius: 4px;
  font-size: 13px;
  line-height: 18px;
  color: #474d50;
  resize: none;
}

/* line 108, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .form-control::placeholder {
  color: #C7CDCE;
}

/* line 112, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-group .form-control:focus {
  outline: none;
  box-shadow: 0 0 0 1px #474d50;
}

/* line 119, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* line 124, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-buttons .button {
  min-width: 120px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 128, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-buttons .button.outline {
  background: transparent;
  border: 1px solid #474d50;
  color: #222222;
}

/* line 135, app/assets/stylesheets/mypage/resign_reason.scss */
.resign-reason main .reason-section .form-buttons input.button[type="submit"] {
  padding: 0;
  font-family: inherit;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main {
  width: 90%;
  max-width: 700px;
  margin: 116px auto 64px auto;
}

/* line 11, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main h1 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1.11px;
  margin-bottom: 24px;
}

/* line 18, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .description {
  font-family: HiraKakuPro-W3;
  font-size: 14px;
  line-height: 21px;
}

/* line 22, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .description.bottom-row {
  margin-top: 4px;
  margin-bottom: 24px;
}

/* line 26, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .description .text-highlight {
  font-weight: bold;
}

/* line 30, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-change-notice {
  background-color: #f2f2f2;
  margin-bottom: 24px;
  padding: 16px;
}

/* line 34, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-change-notice .notice-title {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4em;
  color: #222222;
  margin-bottom: 4px;
}

/* line 42, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-change-notice .notice-text {
  font-size: 12px;
  line-height: 1.4em;
}

/* line 45, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-change-notice .notice-text a {
  color: #566774;
  font-weight: bold;
  text-decoration: underline;
}

/* line 52, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .text-underline {
  text-decoration: underline;
}

/* line 56, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item {
  list-style: none;
  margin-bottom: 16px;
  position: relative;
}

/* line 60, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item .radio-button-label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 12px 16px 12px 0;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 68, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item .radio-button-label .check-mark-container {
  width: 18%;
  position: relative;
}

/* line 71, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item .radio-button-label .check-mark-container .check-mark {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
}

/* line 81, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item .radio-button-label .address-text {
  width: 82%;
  font-size: 12px;
  line-height: 16px;
}

/* line 87, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item .radio-button {
  display: none;
}

/* line 89, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item .radio-button:checked + .radio-button-label {
  border: solid 1px #e6c66b;
}

/* line 92, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item .radio-button:checked + .radio-button-label > .check-mark-container > .check-mark {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 96, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item .not-selectable-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: white;
  flex-direction: column;
  justify-content: center;
}

/* line 108, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .address-list .address-item .not-selectable-layer .not-selectable-text {
  color: #BC2A21;
  height: 1em;
  font-weight: bold;
  text-align: center;
  font-family: 'Noto Sans JP';
  font-size: 14px;
}

/* line 119, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .open-form-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
}

/* line 124, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .add-address-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
  margin-bottom: 12px;
}

/* line 130, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .new-address {
  padding: 28px 16px;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 135, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .add-address-box {
  margin: 28px 0 4px;
}

/* line 138, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 80px 0 14px;
}

/* line 143, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 20px;
  max-width: 160px;
  border: solid 1px #707879;
}

/* line 149, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .button-box .next {
  flex: 1 1 70%;
  max-width: 320px;
  border: none;
}

/* line 153, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 156, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .button-box .next.orange:active, .mypage-shipping_address main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 164, app/assets/stylesheets/mypage/shipping_address.scss */
.mypage-shipping_address main .hidden {
  display: none;
}

/* line 2, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 34, 34, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* line 14, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
.modal-overlay.inactive {
  display: none;
}

/* line 18, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
.modal-overlay.active {
  display: flex;
}

/* line 23, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
.modal-window {
  background: #ECEAE3;
  padding: 24px;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

/* line 37, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-description {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 20px;
  color: #474d50;
  letter-spacing: 0.5px;
  margin-top: 12px;
}

/* line 47, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-subtitle {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 18px;
  color: #474d50;
}

/* line 55, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group {
  margin-bottom: 16px;
  background-color: #ECEAE3;
  border-radius: 4px;
  padding: 12px 8px;
}

/* line 61, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item {
  margin-bottom: 12px;
}

/* line 64, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

/* line 69, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label input[type="radio"] {
  flex: 0 0 16px;
  margin: 2px 12px 0 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: #ffffff;
  border: 1px solid #474d50;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  min-width: 16px;
  padding: 0;
}

/* line 85, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label input[type="radio"]:checked {
  border: 1px solid #D8864E;
  background-color: #ffffff;
}

/* line 89, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #D8864E;
}

/* line 103, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  line-height: 20px;
  color: #474d50;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding-right: 12px;
}

/* line 113, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item:last-child {
  margin-bottom: 0;
}

/* line 119, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .detail-request {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  margin: 12px 0;
  font-size: 13px;
  line-height: 18px;
  color: #474d50;
}

/* line 127, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content textarea.form-control {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
  padding: 8px;
  background-color: #ffffff;
  border: 1px solid #474d50;
  border-radius: 4px;
  font-size: 13px;
  line-height: 18px;
  color: #474d50;
  resize: none;
}

/* line 140, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content textarea.form-control::placeholder {
  color: #C7CDCE;
}

/* line 144, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content textarea.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 1px #474d50;
}

/* line 150, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* line 155, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons .button {
  min-width: 120px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  padding: 12px;
  border-radius: 4px;
}

/* line 163, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons .button.outline {
  background: transparent;
  border: none;
  color: #474d50;
}

/* line 169, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons .button.black {
  background: #474d50;
  border: 1px solid #474d50;
  color: #ffffff;
}

/* line 174, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons .button.black:disabled {
  background-color: #C7CDCE;
  border-color: #C7CDCE;
  color: #ffffff;
  cursor: default;
}

/* line 2, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 34, 34, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* line 14, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
.modal-overlay.inactive {
  display: none;
}

/* line 18, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
.modal-overlay.active {
  display: flex;
}

/* line 23, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
.modal-window {
  background: #ECEAE3;
  padding: 24px;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

/* line 37, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-description {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 20px;
  color: #474d50;
  letter-spacing: 0.5px;
  margin-top: 12px;
}

/* line 47, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-subtitle {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 18px;
  color: #474d50;
}

/* line 55, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group {
  margin-bottom: 16px;
  background-color: #ECEAE3;
  border-radius: 4px;
  padding: 12px 8px;
}

/* line 61, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item {
  margin-bottom: 12px;
}

/* line 64, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

/* line 69, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label input[type="radio"] {
  flex: 0 0 16px;
  margin: 2px 12px 0 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-color: #ffffff;
  border: 1px solid #474d50;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  min-width: 16px;
  padding: 0;
}

/* line 85, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label input[type="radio"]:checked {
  border: 1px solid #D8864E;
  background-color: #ffffff;
}

/* line 89, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #D8864E;
}

/* line 103, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item label span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  line-height: 20px;
  color: #474d50;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding-right: 12px;
}

/* line 113, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .radio-group .radio-item:last-child {
  margin-bottom: 0;
}

/* line 119, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .detail-request {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  margin: 12px 0;
  font-size: 13px;
  line-height: 18px;
  color: #474d50;
}

/* line 127, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content textarea.form-control {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
  padding: 8px;
  background-color: #ffffff;
  border: 1px solid #474d50;
  border-radius: 4px;
  font-size: 13px;
  line-height: 18px;
  color: #474d50;
  resize: none;
}

/* line 140, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content textarea.form-control::placeholder {
  color: #C7CDCE;
}

/* line 144, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content textarea.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 1px #474d50;
}

/* line 150, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* line 155, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons .button {
  min-width: 120px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  padding: 12px;
  border-radius: 4px;
}

/* line 163, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons .button.outline {
  background: transparent;
  border: none;
  color: #474d50;
}

/* line 169, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons .button.black {
  background: #474d50;
  border: 1px solid #474d50;
  color: #ffffff;
}

/* line 174, app/assets/stylesheets/mypage/modals/stop_reason_modal.scss */
#stop-reason-modal-overlay .modal-content .modal-buttons .button.black:disabled {
  background-color: #C7CDCE;
  border-color: #C7CDCE;
  color: #ffffff;
  cursor: default;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 10, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main h1 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  margin-bottom: 24px;
}

/* line 15, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main .notice {
  background-color: #f2f2f2;
  margin-bottom: 24px;
  padding: 16px;
}

/* line 19, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main .notice p {
  font-size: 12px;
  line-height: 1.4em;
}

/* line 22, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main .notice p span {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4em;
  color: #222222;
  margin-bottom: 4px;
}

/* line 29, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main .notice p span.alert {
  color: #BC2A21;
}

/* line 33, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main .notice p a {
  color: #566774;
  font-weight: bold;
  text-decoration: underline;
}

/* line 40, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main .complete-text {
  margin-bottom: 24px;
}

/* line 43, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main .detail-text {
  height: 160px;
}

/* line 45, app/assets/stylesheets/order_accidents/edit.scss */
.order_accidents-edit main .detail-text::placeholder {
  color: #c7cdce;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* line 7, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main {
  width: 90%;
  max-width: 700px;
  margin: 100px auto 24px;
}

/* line 11, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .main-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 24px;
  text-align: center;
  line-height: 30px;
  letter-spacing: 1.11px;
}

/* line 19, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section {
  margin-bottom: 24px;
}

/* line 21, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 6px;
}

/* line 27, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .order-sku-info {
  font-family: HiraKakuPro-W3;
  font-size: 14px;
  line-height: 20px;
}

/* line 32, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .product-info {
  display: flex;
  margin-bottom: 8px;
  align-items: center;
  column-gap: 3%;
}

/* line 37, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .product-info .image-area {
  width: 30%;
  margin-right: 12px;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
}

/* line 43, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .product-info .image-area img {
  width: 100%;
  height: auto;
}

/* line 48, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .product-info .text-area {
  width: 44%;
  box-sizing: border-box;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  display: flex;
}

/* line 57, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .select-container {
  width: 100%;
  display: flex;
}

/* line 61, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .text-wrapper {
  background-color: #f2f2f2;
  font-size: 12px;
  line-height: 16px;
  border-radius: 4px;
  padding: 12px;
}

/* line 67, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .text-wrapper .text-space-between {
  display: flex;
  justify-content: space-between;
}

/* line 71, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .text-wrapper .divide-line {
  color: #c4c4c4;
  margin: 12px 0;
}

/* line 75, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .text-wrapper .total-price {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #e36c6c;
  text-align: right;
}

/* line 81, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .text-wrapper .total-price .price-font-large {
  font-size: 18px;
  line-height: 18px;
  margin-left: 4px;
}

/* line 87, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .text-wrapper.address {
  letter-spacing: 0.5px;
}

/* line 90, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .text-wrapper .attention-text {
  font-family: HiraKakuPro-W6;
  font-size: 10px;
  margin-top: 12px;
}

/* line 95, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .text-wrapper .emphasize-text {
  font-family: HiraKakuPro-W6;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* line 103, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .select-wrapper {
  position: relative;
  border: 1px solid #474D50;
  border-radius: 4px;
  padding: 1px;
}

/* line 108, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .select-wrapper.date {
  flex: 1 1 60%;
  margin-right: 16px;
  max-width: 320px;
}

/* line 113, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .select-wrapper.time-width {
  flex: 1 1 40%;
  max-width: 160px;
}

/* line 117, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .select-wrapper .select-box {
  font-family: HiraKakuPro-W3;
  width: 100%;
  height: 44px;
  padding: 11px;
  background-color: none;
  border: none;
  font-size: 14px;
  color: #474d50;
}

/* line 127, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .select-wrapper .triangle {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #474D50;
  position: absolute;
  top: 19px;
  right: 14px;
}

/* line 138, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .select-promotion-code {
  margin-top: 12px;
}

/* line 141, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .section .link-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
}

/* line 147, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .card-register-dialog-button {
  margin: 0 auto 32px;
}

/* line 149, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .card-register-dialog-button.add-card-text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  display: block;
  text-align: center;
  padding: 8px 12px;
  text-decoration: underline;
  font-size: 12px;
  line-height: 18px;
  border: none;
  background-color: #fff;
  color: #474d50;
}

/* line 160, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .card-register-dialog-button.add-card-text a:hover {
  color: #e8a519;
}

/* line 165, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .text-highlight {
  font-weight: bold;
}

/* line 168, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .deadline-info {
  text-align: center;
  font-size: 12px;
  margin-bottom: 16px;
}

/* line 173, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 24px 0 40px;
}

/* line 178, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 16px;
  border: solid 1px #707879;
}

/* line 183, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .button-box .next {
  flex: 1 1 70%;
  border: none;
}

/* line 186, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 189, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .button-box .next.orange:active, .orders-confirm .main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 197, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .cancel-info {
  font-size: 12px;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* line 202, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .cancel-info .cancel-link {
  text-decoration: underline;
}

/* line 206, app/assets/stylesheets/orders/confirm.scss */
.orders-confirm .main .law-link {
  font-size: 12px;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 80px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/orders/options.scss */
.orders-options {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}

/* line 8, app/assets/stylesheets/orders/options.scss */
.orders-options main {
  width: 90%;
  max-width: 700px;
  margin: 116px auto 64px auto;
}

/* line 12, app/assets/stylesheets/orders/options.scss */
.orders-options main h1 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1.11px;
  margin-bottom: 24px;
}

/* line 19, app/assets/stylesheets/orders/options.scss */
.orders-options main h2 {
  font-family: HiraKakuPro-W3;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 10px;
}

/* line 25, app/assets/stylesheets/orders/options.scss */
.orders-options main .alert-text {
  font-family: HiraKakuPro-W3;
  font-size: 14px;
  line-height: 21px;
  color: #BC2A21;
  margin-top: 16px;
}

/* line 32, app/assets/stylesheets/orders/options.scss */
.orders-options main .description {
  font-family: HiraKakuPro-W3;
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 24px;
}

/* line 37, app/assets/stylesheets/orders/options.scss */
.orders-options main .description .text-highlight {
  font-weight: bold;
}

/* line 42, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item {
  list-style: none;
  margin-bottom: 8px;
}

/* line 45, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item .radio-button-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 53, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item .radio-button-label .radio-button-heading {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 58, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item .radio-button-label .radio-button-heading .circle-button-container {
  width: 10%;
}

/* line 60, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item .radio-button-label .radio-button-heading .circle-button-container .circle-button {
  display: block;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 1px solid #474D50;
  border-radius: 12px;
  background-color: white;
}

/* line 70, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item .radio-button-label .radio-button-heading .heading-text {
  display: block;
  width: 90%;
  font-family: HiraKakuPro-W6;
  font-size: 12px;
  line-height: 16px;
  margin-left: 8px;
}

/* line 79, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item .radio-button-label .description-text {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 4px;
}

/* line 85, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item .radio-button {
  display: none;
}

/* line 87, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item .radio-button:checked + .radio-button-label {
  border: solid 1px #e6c66b;
}

/* line 90, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-list .option-item .radio-button:checked + .radio-button-label > .radio-button-heading > .circle-button-container > .circle-button {
  border: solid 7px #E1C256;
}

/* line 96, app/assets/stylesheets/orders/options.scss */
.orders-options main .option-group-container {
  margin-bottom: 32px;
}

/* line 99, app/assets/stylesheets/orders/options.scss */
.orders-options main .select-wrapper {
  position: relative;
}

/* line 101, app/assets/stylesheets/orders/options.scss */
.orders-options main .select-wrapper .select-box {
  width: 100%;
  height: 40px;
  padding: 12px;
  border: 1px solid #474D50;
  border-radius: 4px;
  outline: none;
}

/* line 108, app/assets/stylesheets/orders/options.scss */
.orders-options main .select-wrapper .select-box.disable {
  color: #C7CDCE;
  border: 1px solid #C7CDCE;
}

/* line 113, app/assets/stylesheets/orders/options.scss */
.orders-options main .select-wrapper .triangle {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #474D50;
  position: absolute;
  top: 18px;
  right: 14px;
}

/* line 122, app/assets/stylesheets/orders/options.scss */
.orders-options main .select-wrapper .triangle.disable {
  border-top: 6px solid #C7CDCE;
}

/* line 127, app/assets/stylesheets/orders/options.scss */
.orders-options main .image-box, .orders-options main .image-box-wrapping {
  display: flex;
  justify-content: space-between;
  margin: 12px 0;
}

/* line 131, app/assets/stylesheets/orders/options.scss */
.orders-options main .image-box.disable, .orders-options main .image-box-wrapping.disable {
  opacity: 0.5;
}

/* line 134, app/assets/stylesheets/orders/options.scss */
.orders-options main .image-box .image, .orders-options main .image-box-wrapping .image {
  width: 49%;
  height: 49%;
}

/* line 139, app/assets/stylesheets/orders/options.scss */
.orders-options main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 60px 0 14px;
}

/* line 144, app/assets/stylesheets/orders/options.scss */
.orders-options main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 16px;
  max-width: 160px;
  border: solid 1px #707879;
}

/* line 150, app/assets/stylesheets/orders/options.scss */
.orders-options main .button-box .next {
  flex: 1 1 70%;
  max-width: 320px;
  border: none;
}

/* line 154, app/assets/stylesheets/orders/options.scss */
.orders-options main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 157, app/assets/stylesheets/orders/options.scss */
.orders-options main .button-box .next.orange:active, .orders-options main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main {
  width: 90%;
  max-width: 700px;
  margin: 116px auto 64px auto;
}

/* line 11, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main h1 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1.11px;
  margin-bottom: 24px;
}

/* line 18, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .description {
  font-family: HiraKakuPro-W3;
  font-size: 14px;
  line-height: 21px;
}

/* line 22, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .description.bottom-row {
  margin-top: 4px;
  margin-bottom: 24px;
}

/* line 26, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .description .text-highlight {
  font-weight: bold;
}

/* line 30, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .text-underline {
  text-decoration: underline;
}

/* line 34, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .address-list .address-item {
  list-style: none;
  margin-bottom: 16px;
}

/* line 37, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .address-list .address-item .radio-button-label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 12px 16px 12px 0;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 45, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .address-list .address-item .radio-button-label .check-mark-container {
  width: 18%;
  position: relative;
}

/* line 48, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .address-list .address-item .radio-button-label .check-mark-container .check-mark {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
}

/* line 58, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .address-list .address-item .radio-button-label .address-text {
  width: 82%;
  font-size: 12px;
  line-height: 16px;
}

/* line 62, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .address-list .address-item .radio-button-label .address-text .text-highlight {
  font-family: HiraKakuPro-W6;
}

/* line 67, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .address-list .address-item .radio-button {
  display: none;
}

/* line 69, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .address-list .address-item .radio-button:checked + .radio-button-label {
  border: solid 1px #e6c66b;
}

/* line 72, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .address-list .address-item .radio-button:checked + .radio-button-label > .check-mark-container > .check-mark {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 78, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .open-form-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
}

/* line 83, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .add-address-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
  margin-bottom: 12px;
}

/* line 89, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .new-address {
  padding: 28px 16px;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 94, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .add-address-box {
  margin: 28px 0 4px;
}

/* line 97, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 16px 0 14px;
}

/* line 102, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 16px;
  border: solid 1px #707879;
}

/* line 107, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .button-box .next {
  flex: 1 1 70%;
  border: none;
}

/* line 110, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 113, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .button-box .next.orange:active, .orders-shipping_address main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 119, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .button-box .next.disable {
  color: #ffffff;
  border: solid 1px #c7cdce;
  background-color: #c7cdce;
}

/* line 126, app/assets/stylesheets/orders/shipping_address.scss */
.orders-shipping_address main .hidden {
  display: none;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/plans/complete.scss */
.plan-complete {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/plans/complete.scss */
.plan-complete .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/plans/complete.scss */
.plan-complete .share-header header .header-right,
.plan-complete .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/plans/complete.scss */
.plan-complete main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto 64px;
  padding-top: 116px;
}

/* line 23, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .thanks-img {
  display: block;
  width: 50%;
  max-width: 240px;
  margin: 0 auto;
}

/* line 29, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .thanks-msg {
  margin-bottom: 36px;
  text-align: center;
}

/* line 33, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .thanks-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 24px;
}

/* line 39, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .sizing {
  max-width: 425px;
  margin: 0 auto;
}

/* line 43, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .dividing-line {
  margin: 32px auto 0;
  border-top: 1px solid #e6e6e6;
}

/* line 47, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .apps-section {
  display: flex;
  max-width: 420px;
  flex-direction: column;
  margin: 36px auto 28px;
}

/* line 52, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .apps-section .apps-msg {
  font-size: 13px;
  line-height: 1.3em;
  padding: 0 24px 40px;
}

/* line 57, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .apps-section .app-icon-list {
  margin: 0 auto 16px;
}

/* line 59, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .apps-section .app-icon-list .app-icon {
  height: 40px;
  margin: 0 8px 16px;
}

/* line 62, app/assets/stylesheets/plans/complete.scss */
.plan-complete main .apps-section .app-icon-list .app-icon:hover {
  opacity: 0.6;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* line 8, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .share-header header .header-right,
.plans-confirm .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main {
  width: 90%;
  max-width: 700px;
  margin: 100px auto 24px;
}

/* line 22, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .main-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 24px;
  text-align: center;
  line-height: 30px;
  letter-spacing: 1.11px;
}

/* line 30, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section {
  margin-bottom: 24px;
}

/* line 32, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 6px;
}

/* line 38, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section.card-select {
  margin-bottom: 8px;
}

/* line 41, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .product-info {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  column-gap: 3%;
}

/* line 46, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .product-info .image-area {
  width: 40%;
  margin-right: 12px;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
}

/* line 52, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .product-info .image-area img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* line 58, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .product-info .text-area {
  width: 60%;
  box-sizing: border-box;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  display: flex;
}

/* line 67, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .text-wrapper {
  background-color: #f2f2f2;
  font-size: 12px;
  line-height: 16px;
  border-radius: 4px;
  padding: 12px;
}

/* line 73, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .text-wrapper .text-space-between {
  display: flex;
  justify-content: space-between;
}

/* line 77, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .text-wrapper .divide-line {
  color: #c4c4c4;
  margin: 12px 0;
}

/* line 81, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .text-wrapper .total-price {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #e36c6c;
  text-align: right;
}

/* line 87, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .text-wrapper .total-price .price-font-large {
  font-size: 18px;
  line-height: 18px;
  margin-left: 4px;
}

/* line 93, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .text-wrapper .payment-frequency {
  margin-top: 8px;
}

/* line 96, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .text-wrapper .second-price {
  text-align: right;
}

/* line 100, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .select-wrapper {
  position: relative;
  border: 1px solid #474D50;
  border-radius: 4px;
  padding: 1px;
}

/* line 105, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .select-wrapper .select-box {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  width: 100%;
  height: 44px;
  padding: 11px;
  background-color: none;
  border: none;
  font-size: 14px;
  color: #474d50;
}

/* line 115, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .select-wrapper .triangle {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #474D50;
  position: absolute;
  top: 19px;
  right: 14px;
}

/* line 126, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .delivery-info {
  padding-top: 4px;
  color: #474d50;
  font-size: 11px;
  line-height: 1.4;
}

/* line 132, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .select-promotion-code {
  margin-top: 12px;
}

/* line 135, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .section .link-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
}

/* line 141, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .card-register-dialog-button {
  margin: 4px auto 32px;
}

/* line 143, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .card-register-dialog-button.add-card-text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  display: block;
  text-align: center;
  padding: 8px 12px;
  text-decoration: underline;
  font-size: 12px;
  line-height: 18px;
  border: none;
  background-color: #fff;
  color: #474d50;
}

/* line 154, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .card-register-dialog-button.add-card-text a:hover {
  color: #e8a519;
}

/* line 159, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .deadline-info {
  text-align: center;
  font-size: 12px;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* line 165, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 24px 0 40px;
}

/* line 170, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 16px;
  border: solid 1px #707879;
}

/* line 175, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .button-box .next {
  flex: 1 1 70%;
  border: none;
}

/* line 178, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 181, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .button-box .next.orange:active, .plans-confirm .main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 189, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .message-container {
  background: #DAD8A0;
  padding: 24px 16px;
  border-radius: 8px;
  margin-bottom: 32px;
}

/* line 194, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .message-container .message-text {
  color: #474d50;
  font-size: 14px;
  text-align: center;
  line-height: 1.5em;
  margin-bottom: 8px;
}

/* line 200, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .message-container .message-text.sub {
  font-size: 12px;
  line-height: 1.5em;
  margin-bottom: 0;
}

/* line 207, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .cancel-info {
  font-size: 12px;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* line 212, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .cancel-info .link-text {
  text-decoration: underline;
}

/* line 216, app/assets/stylesheets/plans/confirm.scss */
.plans-confirm .main .law-link {
  font-size: 12px;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 80px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/plans/step1.scss */
.plans-step1 {
  background-color: #ECEAE3;
  height: 100%;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .share-header header .header-right,
.plans-step1 .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  padding: 100px 0;
}

/* line 24, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 16px;
  text-align: center;
}

/* line 30, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .message-text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #474d50;
  font-size: 14px;
  text-align: center;
  line-height: 1.5em;
  margin: 0 auto 40px;
}

/* line 37, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .message-text.align-left {
  text-align: left;
}

/* line 41, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .plan-info {
  padding-bottom: 16px;
}

/* line 43, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .plan-info .info-list {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #474d50;
  font-size: 14px;
  line-height: 1.5em;
  list-style: none;
}

/* line 49, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .plan-info .info-list.bold {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding-bottom: 8px;
}

/* line 56, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .image-wrapper {
  padding-bottom: 32px;
}

/* line 58, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .image-wrapper .image {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  background-color: #f2f2f2;
}

/* line 66, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .sub-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
}

/* line 73, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .selection-section {
  width: 100%;
}

/* line 76, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .selection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 16px;
  cursor: pointer;
  box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.7), 2px 2px 6px rgba(0, 0, 0, 0.1);
}

/* line 86, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .amount {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  font-size: 16px;
  margin: 0;
}

/* line 92, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .right-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* line 96, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .right-block .small-text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #474d50;
  font-size: 12px;
  line-height: 1.5em;
}

/* line 102, app/assets/stylesheets/plans/step1.scss */
.plans-step1 .main form .right-block .price {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #D8864E;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/plans/step2.scss */
.plans-step2 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/plans/step2.scss */
.plans-step2 .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/plans/step2.scss */
.plans-step2 .share-header header .header-right,
.plans-step2 .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main {
  width: 90%;
  max-width: 700px;
  margin: 116px auto 64px auto;
}

/* line 22, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1.11px;
  margin-bottom: 24px;
}

/* line 29, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .description {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
}

/* line 33, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .description.bottom-row {
  margin-top: 4px;
  margin-bottom: 24px;
}

/* line 37, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .description .text-highlight {
  font-weight: bold;
}

/* line 41, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .text-underline {
  text-decoration: underline;
}

/* line 45, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .address-list .address-item {
  list-style: none;
  margin-bottom: 16px;
}

/* line 48, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .address-list .address-item .radio-button-label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  padding: 12px 16px 12px 0;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 56, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .address-list .address-item .radio-button-label .check-mark-container {
  width: 18%;
  position: relative;
}

/* line 59, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .address-list .address-item .radio-button-label .check-mark-container .check-mark {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
}

/* line 69, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .address-list .address-item .radio-button-label .address-text {
  width: 82%;
  font-size: 12px;
  line-height: 16px;
}

/* line 73, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .address-list .address-item .radio-button-label .address-text .text-highlight {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 78, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .address-list .address-item .radio-button {
  display: none;
}

/* line 80, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .address-list .address-item .radio-button:checked + .radio-button-label {
  border: solid 1px #e6c66b;
}

/* line 83, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .address-list .address-item .radio-button:checked + .radio-button-label > .check-mark-container > .check-mark {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 89, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .open-form-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
}

/* line 94, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .add-address-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
  margin-bottom: 12px;
}

/* line 100, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .new-address {
  padding: 28px 16px;
  background-color: #f2f2f2;
  border-radius: 4px;
}

/* line 105, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .add-address-box {
  margin: 28px 0 4px;
}

/* line 108, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 32px 0 40px;
}

/* line 113, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 16px;
  border: solid 1px #707879;
}

/* line 118, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .button-box .next {
  flex: 1 1 70%;
  border: none;
}

/* line 121, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 124, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .button-box .next.orange:active, .plans-step2 main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 132, app/assets/stylesheets/plans/step2.scss */
.plans-step2 main .hidden {
  display: none;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/promotion_codes/add.scss */
.promotion_codes-add {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/promotion_codes/add.scss */
.promotion_codes-add main {
  width: 90%;
  max-width: 700px;
  margin: 116px auto 64px auto;
}

/* line 11, app/assets/stylesheets/promotion_codes/add.scss */
.promotion_codes-add main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  line-height: 30px;
  letter-spacing: 1.11px;
  margin-bottom: 24px;
}

/* line 19, app/assets/stylesheets/promotion_codes/add.scss */
.promotion_codes-add main .price-info {
  margin-bottom: 12px;
  font-size: 12px;
  color: #BC2A21;
  line-height: 1.3em;
}

/* line 25, app/assets/stylesheets/promotion_codes/add.scss */
.promotion_codes-add main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 12px 0 40px;
}

/* line 30, app/assets/stylesheets/promotion_codes/add.scss */
.promotion_codes-add main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 16px;
  border: solid 1px #707879;
}

/* line 35, app/assets/stylesheets/promotion_codes/add.scss */
.promotion_codes-add main .button-box .next {
  flex: 1 1 70%;
  border: none;
}

/* line 38, app/assets/stylesheets/promotion_codes/add.scss */
.promotion_codes-add main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 41, app/assets/stylesheets/promotion_codes/add.scss */
.promotion_codes-add main .button-box .next.orange:active, .promotion_codes-add main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/promotion_codes/index.scss */
.promotion_codes-index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/promotion_codes/index.scss */
.promotion_codes-index main {
  width: 90%;
  max-width: 700px;
  margin: 116px auto 64px auto;
}

/* line 11, app/assets/stylesheets/promotion_codes/index.scss */
.promotion_codes-index main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  line-height: 30px;
  letter-spacing: 1.11px;
  margin-bottom: 24px;
}

/* line 19, app/assets/stylesheets/promotion_codes/index.scss */
.promotion_codes-index main .link-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
  margin-bottom: 12px;
}

/* line 25, app/assets/stylesheets/promotion_codes/index.scss */
.promotion_codes-index main .button {
  margin-bottom: 12px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 5, app/assets/stylesheets/settings/family.scss */
.settings-family section .link-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
}

/* line 10, app/assets/stylesheets/settings/family.scss */
.settings-family section .address-clud {
  font-size: 12px;
  margin: 4px 0 32px 0;
  padding: 0;
}

/* line 14, app/assets/stylesheets/settings/family.scss */
.settings-family section .address-clud a {
  color: #e8a519;
  text-decoration: underline;
}

/* line 17, app/assets/stylesheets/settings/family.scss */
.settings-family section .address-clud a:hover {
  text-decoration: none;
  cursor: pointer;
}

/* line 23, app/assets/stylesheets/settings/family.scss */
.settings-family section .share-address {
  padding-left: 10px;
  padding-right: 10px;
}

/* line 28, app/assets/stylesheets/settings/family.scss */
.settings-family section h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  margin-bottom: 24px;
  font-size: 16px;
  color: #474d50;
}

/* line 34, app/assets/stylesheets/settings/family.scss */
.settings-family section .notes {
  font-size: 10px;
  margin: 20px auto 12px auto;
}

/* line 39, app/assets/stylesheets/settings/family.scss */
.settings-family section .adress-info .update-address-link {
  text-align: center;
  margin: 8px auto 8px auto;
  font-size: 12px;
}

/* line 43, app/assets/stylesheets/settings/family.scss */
.settings-family section .adress-info .update-address-link a {
  text-decoration: underline;
}

/* line 45, app/assets/stylesheets/settings/family.scss */
.settings-family section .adress-info .update-address-link a:hover {
  color: #e8a519;
}

/* line 49, app/assets/stylesheets/settings/family.scss */
.settings-family section .adress-info .update-address-link span {
  margin-top: 6px;
  display: block;
}

/* line 56, app/assets/stylesheets/settings/family.scss */
.settings-family section input[type=radio] {
  display: none;
}

/* line 59, app/assets/stylesheets/settings/family.scss */
.settings-family section input[type=radio]:checked + label .check {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 64, app/assets/stylesheets/settings/family.scss */
.settings-family section label {
  display: -webkit-flex;
  display: flex;
  margin-bottom: 12px;
  position: relative;
}

/* line 70, app/assets/stylesheets/settings/family.scss */
.settings-family section label:hover, .settings-family section label:active {
  opacity: 0.8;
}

/* line 74, app/assets/stylesheets/settings/family.scss */
.settings-family section label .check {
  height: 24px;
  width: 24px;
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
}

/* line 80, app/assets/stylesheets/settings/family.scss */
.settings-family section label .label-text {
  margin-left: 8px;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
  cursor: pointer;
}

/* line 90, app/assets/stylesheets/settings/family.scss */
.settings-family section .card-info {
  box-sizing: border-box;
  height: 64px;
  background-color: #f2f2f2;
  margin-bottom: 20px;
}

/* line 95, app/assets/stylesheets/settings/family.scss */
.settings-family section .card-info p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #474d50;
  line-height: 64px;
  padding-left: 16px;
}

/* line 105, app/assets/stylesheets/settings/family.scss */
.settings-family hr {
  margin: 32px auto;
  border-top: 1px solid #e6e6e6;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/settings/index.scss */
.settings-index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/settings/index.scss */
.settings-index main {
  width: 90%;
  margin: 116px auto 40px;
}

/* line 10, app/assets/stylesheets/settings/index.scss */
.settings-index main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 32px;
}

/* line 15, app/assets/stylesheets/settings/index.scss */
.settings-index main .switcher {
  list-style: none;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 32px;
}

/* line 21, app/assets/stylesheets/settings/index.scss */
.settings-index main .switcher li {
  flex: 1 1 50%;
}

/* line 24, app/assets/stylesheets/settings/index.scss */
.settings-index main .switcher li a {
  box-sizing: border-box;
  display: block;
  height: 40px;
  border: 1px solid #e8a519;
  color: #e8a519;
  background-color: #ffffff;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
}

/* line 36, app/assets/stylesheets/settings/index.scss */
.settings-index main .switcher li a.left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* line 41, app/assets/stylesheets/settings/index.scss */
.settings-index main .switcher li a.right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* line 46, app/assets/stylesheets/settings/index.scss */
.settings-index main .switcher li a.active {
  color: #ffffff;
  background-color: #e8a519;
}

/* line 51, app/assets/stylesheets/settings/index.scss */
.settings-index main .switcher li a:hover, .settings-index main .switcher li a:active {
  color: #ffffff;
  background-color: #e8a519;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 4, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  padding-top: 100px;
}

/* line 9, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 24px;
  text-align: center;
}

/* line 15, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .dividing-line {
  margin: 16px auto 36px;
  border-top: 1px solid #e6e6e6;
}

/* line 19, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .form-wrapper {
  max-width: 420px;
  margin: 0 auto 40px;
}

/* line 22, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .form-wrapper .input-wrap-parallel, .settings-profile .main .form-wrapper .input-wrap-vertical {
  margin-bottom: 24px;
}

/* line 25, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .form-wrapper .alert-comment {
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  color: #e36c6c;
  line-height: 16px;
}

/* line 33, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .radio-button-area {
  display: flex;
  align-items: center;
}

/* line 36, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .radio-button-area .radio-button {
  display: inline-block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid #474d50;
  border-radius: 12px;
  background-color: white;
  margin: 0 4px 0 16px;
}

/* line 45, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .radio-button-area .radio-button:checked {
  border: solid 4px #e6c66b;
  outline: none;
  width: 16px;
  height: 16px;
}

/* line 52, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .radio-button-area .radio-button-label {
  font-size: 14px;
}

/* line 56, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 20px auto;
}

/* line 61, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .button-box .next {
  max-width: 320px;
  border: none;
}

/* line 64, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .button-box .next.full {
  flex: 100%;
  max-width: 480px;
}

/* line 68, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 71, app/assets/stylesheets/settings/profile.scss */
.settings-profile .main .button-box .next.orange:active, .settings-profile .main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main {
  width: 100vw;
  margin: 116px 0 40px;
}

/* line 10, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner {
  max-width: 700px;
  padding: 0 10px;
  margin: 0 auto;
}

/* line 14, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .main-title {
  width: 100%;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 24px;
}

/* line 20, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section {
  width: 100%;
  height: fit-content;
  background-color: #f2f2f2;
  line-height: 1.2em;
  margin-bottom: 32px;
}

/* line 26, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section .space {
  padding: 12px;
}

/* line 29, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section.plan {
  display: flex;
  flex-wrap: wrap;
  flex: row;
  min-height: 183px;
}

/* line 35, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 0.6em;
}

/* line 40, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section .text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 500;
  font-size: 12px;
}

/* line 43, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section .text.alert-text {
  color: #BC2A21;
}

/* line 46, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section .text.bold {
  font-weight: bold;
}

/* line 49, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section .text.link-text {
  color: #566774;
  border-bottom: solid 1px #566774;
}

/* line 52, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section .text.link-text:hover {
  color: #222222;
}

/* line 57, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section .image {
  display: block;
  margin: auto;
  width: 100%;
}

@media screen and (min-width: 744px) {
  /* line 57, app/assets/stylesheets/settings/unsubscribe.scss */
  .settings-unsubscribe .main .main-inner .section .image {
    width: 350px;
  }
}

/* line 65, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .section .plan-info {
  max-height: 183px;
  height: fit-content;
  width: 350px;
  margin: 0 auto 0;
}

/* line 72, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .form {
  width: 100%;
}

/* line 74, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .form .input-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  width: 100%;
  height: fit-content;
}

/* line 81, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .form .input-wrap .label {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

/* line 86, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .form .input-wrap .input-password {
  border: solid 1px #4a4a4a;
  border-radius: 4px;
  display: block;
}

/* line 91, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .form .input-wrap .eye-off, .settings-unsubscribe .main .main-inner .form .input-wrap .eye-on {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 28px;
  right: 10px;
  opacity: 0.4;
  background-size: 18px auto;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 102, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .form .input-wrap .eye-off.eye-on, .settings-unsubscribe .main .main-inner .form .input-wrap .eye-on.eye-on {
  background-image: url(/assets/eye-6130ea4834577cd5643750668bb669029ebe78c02353699c052836a7b7e7466d.png);
}

/* line 105, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .form .input-wrap .eye-off.eye-off, .settings-unsubscribe .main .main-inner .form .input-wrap .eye-on.eye-off {
  background-image: url(/assets/eye-off-8fb245be9184c3097d585409586ceeac15cca46f451980675e89ed6fc5747f60.png);
}

/* line 110, app/assets/stylesheets/settings/unsubscribe.scss */
.settings-unsubscribe .main .main-inner .form .button {
  width: 100%;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 5, app/assets/stylesheets/settings/user.scss */
.settings-user section h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  margin-bottom: 32px;
  font-size: 16px;
  color: #474d50;
}

/* line 12, app/assets/stylesheets/settings/user.scss */
.settings-user section .user-info ul {
  list-style: none;
  margin-bottom: 20px;
}

/* line 16, app/assets/stylesheets/settings/user.scss */
.settings-user section .user-info ul li {
  display: -webkit-flex;
  display: flex;
  font-size: 14px;
  width: 100%;
}

/* line 22, app/assets/stylesheets/settings/user.scss */
.settings-user section .user-info ul li:first-child {
  margin-bottom: 20px;
}

/* line 26, app/assets/stylesheets/settings/user.scss */
.settings-user section .user-info ul li .item {
  display: block;
  flex-grow: 1;
}

/* line 30, app/assets/stylesheets/settings/user.scss */
.settings-user section .user-info ul li .content {
  display: block;
  flex-grow: 1;
  text-align: right;
}

/* line 37, app/assets/stylesheets/settings/user.scss */
.settings-user section .user-info .radio-button-area {
  display: flex;
  align-items: center;
}

/* line 40, app/assets/stylesheets/settings/user.scss */
.settings-user section .user-info .radio-button-area .radio-button {
  display: inline-block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid #474d50;
  border-radius: 12px;
  background-color: white;
  margin: 0 4px 0 16px;
}

/* line 49, app/assets/stylesheets/settings/user.scss */
.settings-user section .user-info .radio-button-area .radio-button:checked {
  border: solid 4px #e6c66b;
  outline: none;
  width: 16px;
  height: 16px;
}

/* line 56, app/assets/stylesheets/settings/user.scss */
.settings-user section .user-info .radio-button-area .radio-button-label {
  font-size: 14px;
}

/* line 61, app/assets/stylesheets/settings/user.scss */
.settings-user section .link-text {
  text-decoration: underline;
  font-size: 12px;
  margin-left: 16px;
}

/* line 67, app/assets/stylesheets/settings/user.scss */
.settings-user hr {
  margin: 32px auto;
  border-top: 1px solid #e6e6e6;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete {
  background-color: #ECEAE3;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 9, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 13, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete .share-header header .header-right,
.signup2-complete .share-header header ul {
  display: none;
}

/* line 19, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto 64px;
  padding-top: 116px;
}

/* line 24, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .thanks-img {
  display: block;
  width: 50%;
  max-width: 240px;
  margin: 0 auto;
}

/* line 30, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .thanks-msg {
  margin-bottom: 36px;
  text-align: center;
}

/* line 33, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .thanks-msg .thanks-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 24px;
}

/* line 40, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .thanks-msg p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #474d50;
  font-size: 16px;
}

/* line 46, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .sizing {
  max-width: 425px;
  margin: 0 auto;
}

/* line 50, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .dividing-line {
  margin: 32px auto 0;
  border-top: 1px solid #e6e6e6;
}

/* line 54, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .apps-section {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  margin: 0 auto 24px;
}

/* line 59, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .apps-section .apps-msg {
  font-size: 13px;
  color: #474d50;
  line-height: 1.3em;
  padding: 0 24px 40px;
}

/* line 65, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .apps-section .app-icon-list {
  margin: 0 auto 16px;
}

/* line 67, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .apps-section .app-icon-list .app-icon {
  height: 40px;
  margin: 0 8px 16px;
}

/* line 70, app/assets/stylesheets/signup2/complete.scss */
.signup2-complete main .apps-section .app-icon-list .app-icon:hover {
  opacity: 0.6;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #ECEAE3;
  height: 100%;
  min-height: 100vh;
}

/* line 11, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 15, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .share-header header .header-right,
.signup2-confirm .share-header header ul {
  display: none;
}

/* line 21, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main {
  width: 90%;
  max-width: 700px;
  margin: 100px auto 24px;
}

/* line 25, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .main-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  margin-bottom: 24px;
  text-align: center;
  line-height: 30px;
  letter-spacing: 1.11px;
}

/* line 34, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section {
  margin-bottom: 24px;
}

/* line 36, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #474d50;
  line-height: 18px;
  margin-bottom: 6px;
}

/* line 43, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section.card-select {
  margin-bottom: 8px;
}

/* line 46, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .product-info {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  column-gap: 3%;
}

/* line 51, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .product-info .image-area {
  width: 40%;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
}

/* line 56, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .product-info .image-area img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* line 62, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .product-info .text-area {
  width: 60%;
  box-sizing: border-box;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  font-size: 14px;
  line-height: 20px;
  display: flex;
}

/* line 72, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-alert {
  font-weight: bold;
  color: #e36c6c;
}

/* line 76, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-wrapper {
  background-color: #f2f2f2;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  border-radius: 4px;
  padding: 12px;
  letter-spacing: 0.5px;
}

/* line 84, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-wrapper p {
  color: #474d50;
}

/* line 87, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-wrapper .text-space-between {
  display: flex;
  justify-content: space-between;
}

/* line 91, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-wrapper .divide-line {
  color: #c4c4c4;
  margin: 12px 0;
}

/* line 95, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-wrapper .total-price {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #D8864E;
  text-align: right;
}

/* line 101, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-wrapper .total-price .price-font-large {
  font-size: 18px;
  line-height: 18px;
  margin-left: 4px;
}

/* line 107, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-wrapper .payment-frequency {
  margin-top: 8px;
}

/* line 110, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-wrapper .second-price {
  text-align: right;
}

/* line 113, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .text-wrapper.alert {
  color: #e36c6c;
}

/* line 117, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .delivery-info {
  padding-top: 4px;
  color: #474d50;
  font-size: 11px;
  line-height: 1.4;
}

/* line 123, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .select-promotion-code {
  margin-top: 12px;
}

/* line 126, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .section .link-button {
  color: #474d50;
  border: solid 1px #474d50;
  background-color: #ffffff;
}

/* line 132, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .deadline-info {
  text-align: center;
  font-size: 12px;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* line 138, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 24px 0 40px;
}

/* line 144, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .message-container {
  background: #DAD8A0;
  padding: 24px 16px;
  border-radius: 8px;
  margin-bottom: 32px;
}

/* line 149, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .message-container .message-text {
  color: #474d50;
  font-size: 14px;
  text-align: center;
  line-height: 1.5em;
  margin-bottom: 8px;
}

/* line 155, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .message-container .message-text.sub {
  font-size: 12px;
  line-height: 1.5em;
  margin-bottom: 0;
}

/* line 162, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .cancel-info {
  color: #474d50;
  font-size: 12px;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* line 168, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .cancel-info .link-text {
  text-decoration: underline;
}

/* line 172, app/assets/stylesheets/signup2/confirm.scss */
.signup2-confirm .main .law-link {
  font-size: 12px;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 80px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #ECEAE3;
}

/* line 9, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 13, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete .share-header header .header-right,
.signup2-signup_complete .share-header header ul {
  display: none;
}

/* line 19, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto 64px;
  padding-top: 116px;
}

/* line 24, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete main .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  margin-bottom: 24px;
  text-align: center;
}

/* line 30, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete main .section-title.with-comment {
  margin-bottom: 0;
}

/* line 34, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete main .thanks-msg {
  text-align: center;
  margin-bottom: 24px;
}

/* line 38, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete main .thanks-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #474d50;
  line-height: 24px;
}

/* line 44, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete main .dividing-line {
  margin: 16px auto 36px;
  border-top: 1px solid #e6e6e6;
}

/* line 48, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete main .button-box {
  max-width: 500px;
  margin: 0 auto 20px;
}

/* line 52, app/assets/stylesheets/signup2/signup_complete.scss */
.signup2-signup_complete main .announce {
  display: block;
  text-align: center;
  margin: 8px 0 20px;
  font-size: 12px;
  color: #474d50;
  line-height: 16px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 {
  background-color: #ECEAE3;
  height: 100%;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .share-header header .header-right,
.signup2-step1 .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  padding: 100px 0;
}

/* line 24, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  margin-bottom: 16px;
  text-align: center;
}

/* line 31, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .message-text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #474d50;
  font-size: 14px;
  text-align: center;
  line-height: 1.5em;
  margin: 0 auto 40px;
}

/* line 38, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .message-text.align-left {
  text-align: left;
}

/* line 42, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .plan-info {
  padding-bottom: 16px;
}

/* line 44, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .plan-info .info-list {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #474d50;
  font-size: 14px;
  line-height: 1.5em;
  list-style: none;
}

/* line 50, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .plan-info .info-list.bold {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding-bottom: 8px;
}

/* line 57, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .image-wrapper {
  padding-bottom: 32px;
}

/* line 59, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .image-wrapper .image {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  background-color: #f2f2f2;
}

/* line 67, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .sub-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
}

/* line 74, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .selection-section {
  width: 100%;
}

/* line 77, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .selection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 16px;
  cursor: pointer;
  box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.7), 2px 2px 6px rgba(0, 0, 0, 0.1);
}

/* line 87, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .amount {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  font-size: 16px;
  margin: 0;
}

/* line 93, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .right-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* line 97, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .right-block .small-text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #474d50;
  font-size: 12px;
  line-height: 1.5em;
}

/* line 103, app/assets/stylesheets/signup2/step1.scss */
.signup2-step1 .main form .right-block .price {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #D8864E;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 {
  background-color: #ECEAE3;
  height: 100%;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .share-header header .header-right,
.signup2-step2 .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  padding-top: 100px;
}

/* line 23, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  margin-bottom: 24px;
  text-align: center;
}

/* line 30, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .validation-error-message {
  font-size: 16px;
  font-weight: bold;
  color: #BC2A21;
  text-align: center;
  margin: 24px 0 16px;
}

/* line 37, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .login-link {
  display: block;
  max-width: 420px;
  margin: 0 auto;
}

/* line 42, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .dividing-line {
  margin: 16px auto 36px;
  border-top: 1px solid #e6e6e6;
}

/* line 46, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .signup-form-wrapper {
  max-width: 420px;
  margin: 0 auto 40px;
}

/* line 49, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .signup-form-wrapper .alert-comment {
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  color: #BC2A21;
  line-height: 16px;
}

/* line 56, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .signup-form-wrapper p {
  color: #474d50;
}

/* line 59, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .signup-form-wrapper input {
  border-color: #C7CDCE;
  margin-bottom: 4px;
}

/* line 64, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin: 20px auto;
}

/* line 69, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 20px;
  max-width: 160px;
  border: solid 1px #707879;
}

/* line 75, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .button-box .next {
  flex: 1 1 70%;
  max-width: 320px;
  border: none;
}

/* line 79, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .button-box .next.full {
  flex: 100%;
  max-width: 480px;
}

/* line 83, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 86, app/assets/stylesheets/signup2/step2.scss */
.signup2-step2 .main .button-box .next.orange:active, .signup2-step2 .main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 {
  background-color: #ECEAE3;
  height: 100%;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .share-header header .header-right,
.signup2-step3 .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto 24px;
  padding-top: 100px;
}

/* line 23, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .alert-comment {
  width: 100%;
  max-width: 425px;
  font-size: 14px;
  font-weight: bold;
  color: #BC2A21;
  line-height: 16px;
}

/* line 31, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .auto-reflected-address {
  border: none;
  font-size: 12px;
  border-radius: 4px;
  background-color: #f2f2f2;
  width: 100%;
  margin-top: 8px;
  padding: 0 12px;
  outline: none;
}

/* line 41, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .form-comment {
  margin-top: 16px;
  font-size: 12px;
  text-align: right;
}

/* line 45, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .form-comment .link-text {
  text-decoration: underline;
}

/* line 49, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  margin-bottom: 24px;
  text-align: center;
}

/* line 56, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .dividing-line {
  margin: 16px auto 36px;
  border-top: 1px solid #e6e6e6;
}

/* line 60, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .signup-form-wrapper {
  max-width: 420px;
  margin: 0 auto 40px;
}

/* line 63, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .signup-form-wrapper p {
  color: #474d50;
}

/* line 66, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .signup-form-wrapper input {
  border-color: #C7CDCE;
  margin-bottom: 4px;
}

/* line 71, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* line 76, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 20px;
  max-width: 160px;
  border: solid 1px #707879;
}

/* line 82, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .button-box .next {
  flex: 1 1 70%;
  max-width: 320px;
  border: none;
}

/* line 86, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 89, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .button-box .next.orange:active, .signup2-step3 .main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 97, app/assets/stylesheets/signup2/step3.scss */
.signup2-step3 .main .validation-error-message {
  font-size: 16px;
  font-weight: bold;
  color: #BC2A21;
  text-align: center;
  margin: 24px 0 16px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 {
  background-color: #ECEAE3;
  height: 100%;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .share-header header .header-right,
.signup2-step4 .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto 24px;
  padding-top: 100px;
}

/* line 23, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .alert-comment {
  width: 100%;
  max-width: 425px;
  font-size: 14px;
  font-weight: bold;
  color: #BC2A21;
  line-height: 16px;
}

/* line 31, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  margin-bottom: 24px;
  text-align: center;
}

/* line 38, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .dividing-line {
  margin: 16px auto 36px;
  border-top: 1px solid #e6e6e6;
}

/* line 42, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .signup-form-wrapper {
  max-width: 420px;
  margin: 0 auto 40px;
}

/* line 45, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .signup-form-wrapper p {
  color: #474d50;
}

/* line 48, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .signup-form-wrapper input {
  border-color: #C7CDCE;
  margin-bottom: 4px;
}

/* line 53, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* line 58, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 20px;
  max-width: 160px;
  border: solid 1px #707879;
}

/* line 64, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .button-box .next {
  flex: 1 1 70%;
  max-width: 320px;
  border: none;
}

/* line 68, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 71, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .button-box .next.orange:active, .signup2-step4 .main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 79, app/assets/stylesheets/signup2/step4.scss */
.signup2-step4 .main .validation-error-message {
  font-size: 16px;
  font-weight: bold;
  color: #BC2A21;
  text-align: center;
  margin: 24px 0 16px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 {
  background-color: #ECEAE3;
  height: 100%;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .share-header header .header-right,
.signup2-step5 .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto 24px;
  padding-top: 100px;
}

/* line 23, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .alert-comment {
  width: 100%;
  text-align: center;
  max-width: 425px;
  font-size: 14px;
  font-weight: bold;
  color: #BC2A21;
  line-height: 16px;
  margin-bottom: 24px;
}

/* line 33, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  margin-bottom: 24px;
  text-align: center;
}

/* line 40, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .dividing-line {
  margin: 16px auto;
  border-top: 1px solid #e6e6e6;
}

/* line 44, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .signup-form-wrapper {
  max-width: 420px;
  margin: 0 auto 40px;
}

/* line 47, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .signup-form-wrapper p {
  color: #474d50;
}

/* line 50, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .signup-form-wrapper input {
  border-color: #C7CDCE;
  margin-bottom: 4px;
}

/* line 56, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .input-form.year {
  width: 40%;
}

/* line 59, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .input-form.month, .signup2-step5 .main .input-form.day {
  width: 30%;
}

/* line 63, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .input-form-label {
  width: 10%;
  display: inline-block;
  font-size: 14px;
  color: #474d50;
  margin: 24px 12px 12px;
}

/* line 69, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .input-form-label.year {
  margin: 24px 12px 12px 0;
}

/* line 73, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .form-section-title {
  margin-bottom: 16px;
}

/* line 76, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .radio-button-area {
  display: flex;
  align-items: center;
}

/* line 79, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .radio-button-area .radio-button {
  display: inline-block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid #474d50;
  border-radius: 12px;
  background-color: white;
  margin: 0 4px 0 16px;
}

/* line 88, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .radio-button-area .radio-button:checked {
  border: solid 4px #D8864E;
  outline: none;
  width: 16px;
  height: 16px;
}

/* line 95, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .radio-button-area .radio-button-label {
  font-size: 14px;
  color: #474d50;
}

/* line 100, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* line 105, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 20px;
  max-width: 160px;
  border: solid 1px #707879;
}

/* line 111, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .button-box .next {
  flex: 1 1 70%;
  max-width: 320px;
  border: none;
}

/* line 115, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .button-box .next.orange {
  border: solid 1px #e8a519;
  background-color: #e8a519;
}

/* line 118, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .button-box .next.orange:active, .signup2-step5 .main .button-box .next.orange:hover {
  background-color: #ffffff;
  color: #e8a519;
}

/* line 126, app/assets/stylesheets/signup2/step5.scss */
.signup2-step5 .main .validation-error-message {
  font-size: 16px;
  font-weight: bold;
  color: #BC2A21;
  text-align: center;
  margin: 24px 0 16px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 {
  background-color: #ECEAE3;
  height: 100%;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .share-header header .header-right,
.signup2-step6 .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  padding: 100px 0 24px;
}

/* line 23, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .alert-comment {
  width: 100%;
  max-width: 425px;
  font-size: 14px;
  font-weight: bold;
  color: #BC2A21;
  line-height: 16px;
}

/* line 31, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .alert-comment-list {
  margin: 4px auto 0;
  list-style: none;
}

/* line 35, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  margin-bottom: 24px;
  text-align: center;
}

/* line 41, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .section-title.with-comment {
  margin-bottom: 0;
}

/* line 45, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .section-title-comment {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #566774;
  font-size: 14px;
  margin: 12px 0 0;
  text-align: center;
}

/* line 52, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .dividing-line {
  margin: 16px auto;
  border-top: 1px solid #e6e6e6;
}

/* line 56, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .signup-form-wrapper {
  max-width: 420px;
  margin: 0 auto 32px;
}

/* line 59, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .signup-form-wrapper p {
  color: #474d50;
}

/* line 62, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .signup-form-wrapper input {
  border-color: #C7CDCE;
  margin-bottom: 4px;
}

/* line 66, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .signup-form-wrapper .required {
  color: #474d50;
}

/* line 70, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .link-text {
  display: block;
  text-decoration: underline;
  font-size: 12px;
  color: #474d50;
  text-align: right;
}

/* line 76, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .link-text.form-top {
  margin-bottom: 16px;
}

/* line 80, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 24px;
  box-sizing: border-box;
  padding: 20px 16px 8px;
  background-color: #f2f2f2;
  border-radius: 8px;
}

/* line 88, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card .table-list {
  margin-bottom: 24px;
}

/* line 90, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card .table-list .heading-text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  margin-bottom: 8px;
}

/* line 95, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card .table-list .confirm-table {
  width: 100%;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  font-size: 14px;
  border-collapse: separate;
  border-spacing: 0px 8px;
  margin-bottom: 8px;
  padding-left: 4px;
}

/* line 103, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card .table-list .confirm-table .table-row {
  width: 100%;
}

/* line 105, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card .table-list .confirm-table .table-row .table-index {
  width: 38%;
  min-width: 90px;
  padding-right: 4px;
  color: #474d50;
}

/* line 110, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card .table-list .confirm-table .table-row .table-index.plan {
  min-width: 200px;
}

/* line 114, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card .table-list .confirm-table .table-row .table-content {
  width: 62%;
  line-height: 1.2em;
  text-align: left;
  color: #474d50;
}

/* line 119, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card .table-list .confirm-table .table-row .table-content.plan {
  text-align: right;
}

/* line 122, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .confirm-card .table-list .confirm-table .table-row .table-content.sum {
  color: #BC2A21;
  font-weight: bold;
}

/* line 131, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .agree-check-container {
  margin-bottom: 16px;
}

/* line 134, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .agree-check-box {
  display: none;
}

/* line 136, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .agree-check-box:checked + label .check {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 140, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .agree-check-label {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}

/* line 144, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .agree-check-label .terms-link-text {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #474d50;
  font-size: 14px;
  line-height: 24px;
  margin-left: 12px;
}

/* line 151, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .agree-check-label .check {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
}

/* line 158, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .agree-check-label .terms {
  text-decoration: underline;
  color: #BC2A21;
}

/* line 163, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .button-box {
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  padding-top: 16px;
}

/* line 168, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .button-box .prev {
  flex: 1 1 30%;
  margin-right: 20px;
  max-width: 160px;
  border: solid 1px #707879;
}

/* line 174, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .button-box .next {
  flex: 1 1 70%;
  max-width: 320px;
  border: none;
}

/* line 178, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .button-box .next.red-clay {
  border: solid 1px #D8864E;
  background-color: #D8864E;
}

/* line 181, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .button-box .next.red-clay:active, .signup2-step6 .main .button-box .next.red-clay:hover {
  background-color: #ffffff;
  color: #D8864E;
}

/* line 189, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .validation-error-message {
  font-size: 16px;
  font-weight: bold;
  color: #BC2A21;
  text-align: center;
  margin: 24px 0 16px;
}

/* line 196, app/assets/stylesheets/signup2/step6.scss */
.signup2-step6 .main .announce {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  color: #474d50;
  display: block;
  max-width: 560px;
  text-align: right;
  margin-top: 8px;
  font-size: 12px;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 {
  background-color: #ECEAE3;
  height: 100%;
  min-height: 100vh;
}

/* line 8, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .share-header header {
  background-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* line 12, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .share-header header .header-right,
.signup2-step7 .share-header header ul {
  display: none;
}

/* line 18, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main {
  width: 90%;
  max-width: 620px;
  margin: 0 auto 40px;
  padding-top: 100px;
  /* CREDIT CARD IMAGE STYLING */
  /* CHANGEABLE CARD ELEMENTS */
  /* FRONT OF CARD */
  /* BACK OF CARD */
  /* FLIP ANIMATION */
}

/* line 23, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .complete-announce-container {
  box-sizing: border-box;
  padding: 20px 12px;
  background-color: #DAD8A0;
  border-radius: 8px;
  margin: 0 auto 16px;
  max-width: 500px;
}

/* line 31, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .complete-announce {
  color: #474d50;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  margin-bottom: 16px;
}

/* line 38, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .complete-announce-text {
  color: #474d50;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  font-size: 13px;
  text-align: center;
  line-height: 1.5em;
}

/* line 44, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .complete-announce-text .accent {
  font-size: 12px;
}

/* line 48, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .alert-comment {
  display: block;
  margin: 0 auto 16px;
  max-width: 500px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #BC2A21;
  line-height: 1.3em;
}

/* line 58, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .section-title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #474d50;
  margin-top: 40px;
  text-align: center;
}

/* line 64, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .section-title.with-comment {
  margin-bottom: 0;
}

/* line 68, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .section-title-comment {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #566774;
  margin: 12px 0 0;
  text-align: center;
}

/* line 75, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .dividing-line {
  margin: 16px auto;
  border-top: 1px solid #e6e6e6;
}

/* line 79, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .stripe-element-container {
  margin: 0 auto 24px;
  max-width: 500px;
}

/* line 83, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .stripe-element-container .card-element-wrapper {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 12px;
}

/* line 90, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .stripe-element-container .card-errors {
  color: #e53e3e;
  font-size: 14px;
  min-height: 1.2em;
  margin-bottom: 16px;
}

/* line 97, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .form-container .field-container:first-of-type {
  grid-area: name;
}

/* line 100, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .form-container .field-container:nth-of-type(2) {
  grid-area: number;
}

/* line 103, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .form-container .field-container:nth-of-type(3) {
  grid-area: expiration;
}

/* line 106, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .form-container .field-container:nth-of-type(4) {
  grid-area: security;
}

/* line 109, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .field-container input {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-color: #C7CDCE;
  margin: 8px 0 12px;
}

/* line 115, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .field-container {
  position: relative;
}

/* line 118, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .form-container {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: 50% 47%;
  grid-template-rows: 75px 75px 65px;
  grid-template-areas: "name name" "number number" "expiration security";
  max-width: 360px;
  color: #707070;
  margin: 0 auto;
}

/* line 128, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main label {
  font-size: 14px;
  color: #474d50;
}

/* line 132, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main input {
  margin-top: 3px;
  padding: 8px;
  font-size: 14px;
  width: 100%;
  border-radius: 4px;
  border: solid 1px #4a4a4a;
}

/* line 140, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .ccicon {
  height: 38px;
  position: absolute;
  right: 6px;
  top: calc(50% - 15px);
  width: 60px;
}

/* line 148, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .card-container {
  margin: 0 auto;
  width: calc(100% - 32px);
  max-width: 360px;
  max-height: 224px;
  height: 49vw;
  margin-bottom: 40px;
}

/* line 156, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #ccsingle {
  position: absolute;
  right: 15px;
  top: 20px;
}

/* line 161, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #ccsingle svg {
  width: 100px;
  max-height: 60px;
}

/* line 165, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .creditcard svg#cardfront,
.signup2-step7 .main .creditcard svg#cardback {
  width: 100%;
  border-radius: 22px;
}

/* line 171, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .creditcard .lightcolor,
.signup2-step7 .main .creditcard .darkcolor {
  -webkit-transition: fill 0.5s;
  transition: fill 0.5s;
}

/* line 176, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .creditcard .grey {
  fill: #707879;
}

/* line 179, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .creditcard .greydark {
  fill: #707879;
}

/* line 183, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #svgname {
  text-transform: uppercase;
}

/* line 186, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st2 {
  fill: #ffffff;
}

/* line 189, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st3 {
  font-family: "Source Code Pro", monospace;
  font-weight: 600;
}

/* line 193, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st4 {
  font-size: 54.7817px;
}

/* line 196, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st5 {
  font-family: "Source Code Pro", monospace;
  font-weight: 400;
}

/* line 200, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st6 {
  font-size: 33.1112px;
}

/* line 203, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st7 {
  opacity: 0.6;
  fill: #ffffff;
}

/* line 207, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st8 {
  font-size: 24px;
}

/* line 210, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st9 {
  font-size: 36.5498px;
}

/* line 213, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st10 {
  font-family: "Source Code Pro", monospace;
  font-weight: 300;
}

/* line 217, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st11 {
  font-size: 16.1716px;
}

/* line 220, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardfront .st12 {
  fill: #4c4c4c;
}

/* line 224, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st0 {
  fill: none;
  stroke: #0f0f0f;
  stroke-miterlimit: 10;
}

/* line 229, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st2 {
  fill: #111111;
}

/* line 232, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st3 {
  fill: #f2f2f2;
}

/* line 235, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st4 {
  fill: #d8d2db;
}

/* line 238, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st5 {
  fill: #c4c4c4;
}

/* line 241, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st6 {
  font-family: "Source Code Pro", monospace;
  font-weight: 400;
}

/* line 245, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st7 {
  font-size: 27px;
}

/* line 248, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st8 {
  opacity: 0.6;
}

/* line 251, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st9 {
  fill: #ffffff;
}

/* line 254, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st10 {
  font-size: 24px;
}

/* line 257, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st11 {
  fill: #eaeaea;
}

/* line 260, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st12 {
  font-family: "Rock Salt", cursive;
}

/* line 263, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main #cardback .st13 {
  font-size: 37.769px;
}

/* line 267, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .container {
  perspective: 1000px;
}

/* line 270, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .creditcard {
  width: 100%;
  max-width: 400px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: -webkit-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  cursor: pointer;
}

/* line 281, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .creditcard .front,
.signup2-step7 .main .creditcard .back {
  position: absolute;
  width: 100%;
  max-width: 400px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  color: #47525d;
}

/* line 291, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .creditcard .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* line 295, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .creditcard.flipped {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* line 299, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .card-register {
  max-width: 400px;
  width: calc(100% - 40px);
  margin: 0 auto;
  display: block;
  height: 40px;
  background-color: #e8a519;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 2px 0;
  box-sizing: border-box;
  font-size: 14px;
  border: none;
  border-radius: 4px;
}

/* line 314, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .card-register:hover {
  cursor: pointer;
  background-color: #fff;
  color: #e8a519;
  border: 1px solid #e8a519;
  box-sizing: border-box;
}

/* line 322, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .button-box {
  max-width: 500px;
  margin: 0 auto;
}

/* line 326, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .validation-error-message {
  font-size: 16px;
  font-weight: bold;
  color: #BC2A21;
  text-align: center;
  margin: 24px 0 16px;
}

/* line 333, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .announce {
  display: block;
  text-align: center;
  margin: 8px 0 20px;
  font-size: 12px;
  color: #474d50;
  line-height: 1.2em;
}

/* line 340, app/assets/stylesheets/signup2/step7.scss */
.signup2-step7 .main .announce.expiration-month {
  text-align: left;
  padding-top: 4px;
  margin-bottom: 16px;
  color: #BC2A21;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/store/index.scss */
.store-index {
  width: 100%;
  background: #ECEAE3;
}

/* line 6, app/assets/stylesheets/store/index.scss */
.store-index .share-footer {
  margin-top: -370px;
}

@media screen and (min-width: 415px) {
  /* line 6, app/assets/stylesheets/store/index.scss */
  .store-index .share-footer {
    background: #ffffff;
  }
}

@media screen and (min-width: 744px) {
  /* line 6, app/assets/stylesheets/store/index.scss */
  .store-index .share-footer {
    background: none;
  }
}

/* line 15, app/assets/stylesheets/store/index.scss */
.store-index main {
  width: 100%;
  max-width: 744px;
  margin: 0 auto;
  background: #ffffff;
  padding-bottom: 440px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
}

/* line 24, app/assets/stylesheets/store/index.scss */
.store-index main .top-image {
  width: 100%;
  margin: 84px 0 12px 0;
  max-width: 744px;
  min-height: 190px;
  background-color: #f2f2f2;
}

/* line 31, app/assets/stylesheets/store/index.scss */
.store-index main .category {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 40px;
}

/* line 36, app/assets/stylesheets/store/index.scss */
.store-index main .category .heading {
  font-family: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #222222;
  margin-bottom: 16px;
}

/* line 43, app/assets/stylesheets/store/index.scss */
.store-index main .category .link-list {
  width: 90%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* line 48, app/assets/stylesheets/store/index.scss */
.store-index main .category .link-list .link-item {
  list-style: none;
  font-family: 500;
  font-size: 12px;
  line-height: 1.2;
  color: #222222;
  padding: 6px 16px;
  margin: 6px;
  border: solid 0.2px #474d50;
  border-radius: 16px;
}

/* line 61, app/assets/stylesheets/store/index.scss */
.store-index main .products-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

/* line 65, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category {
  width: 94%;
  max-width: 580px;
  padding-top: 84px;
  margin-top: -84px;
  margin-bottom: 32px;
}

/* line 71, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category:first-child {
  padding-top: 0;
  margin-top: 0;
}

/* line 75, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .heading {
  font-family: 700;
  font-size: 15px;
  line-height: 1.2;
  color: #222222;
  text-align: center;
  background-color: #f2f2f2;
  padding: 4px 0;
  margin-bottom: 16px;
  border-radius: 4px;
}

/* line 86, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* line 90, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card {
  position: relative;
  display: block;
  width: 48%;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border: solid 1px #f2f2f2;
  max-width: 260px;
}

/* line 98, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .discount-info {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: transparent;
  width: 0;
  height: 0;
  border-right: 28px solid transparent;
  border-top: 28px solid transparent;
  border-left: 28px solid #D8864E;
  border-bottom: 28px solid #D8864E;
}

/* line 109, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .discount-info .text {
  color: #ffffff;
  font-family: 700;
  width: 40px;
  transform: rotate(45deg);
  line-height: 12px;
  font-size: 10px;
  transform-origin: 10% -200%;
}

/* line 119, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card img {
  width: 100%;
  min-height: 60px;
  margin-bottom: 12px;
  background-color: #f2f2f2;
}

/* line 125, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .info {
  padding: 0 6px;
}

/* line 127, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .info h3 {
  font-family: 700;
  font-size: 14px;
  line-height: 1.2;
  color: #222222;
  margin-bottom: 8px;
  min-height: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* line 138, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .info .scheduled {
  font-family: 500;
  font-size: 10px;
  color: #474d50;
  text-align: right;
  margin-bottom: 4px;
}

/* line 145, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .info .scheduled-date {
  font-family: 900;
  font-size: 12px;
  color: #222222;
  text-align: right;
  margin-bottom: 8px;
}

/* line 152, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .info .price {
  font-family: 500;
  font-size: 10px;
  line-height: 1.3;
  color: #474d50;
  text-align: right;
  margin-bottom: 8px;
}

/* line 159, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .info .price span {
  color: #222222;
  font-family: 900;
  font-size: 16px;
}

/* line 165, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .info .wrapping-info {
  display: flex;
  justify-content: flex-end;
}

/* line 168, app/assets/stylesheets/store/index.scss */
.store-index main .products-container .products-by-category .products .product-card .info .wrapping-info p {
  background-color: #566774;
  font-family: 700;
  font-size: 10px;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
}

/* line 182, app/assets/stylesheets/store/index.scss */
.store-index main .link-box {
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/store/pasts.scss */
.store-pasts {
  width: 100%;
  background: #f2f2f2;
}

/* line 6, app/assets/stylesheets/store/pasts.scss */
.store-pasts .share-footer {
  margin-top: -40px;
}

/* line 9, app/assets/stylesheets/store/pasts.scss */
.store-pasts main {
  width: 100%;
  max-width: 580px;
  background: #ffffff;
  margin: 0 auto;
  padding-top: 116px;
  padding-bottom: 100px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
}

/* line 19, app/assets/stylesheets/store/pasts.scss */
.store-pasts main h1 {
  margin-bottom: 40px;
  text-align: center;
}

/* line 23, app/assets/stylesheets/store/pasts.scss */
.store-pasts main .products {
  width: 94%;
  margin: 0 auto 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* line 29, app/assets/stylesheets/store/pasts.scss */
.store-pasts main .products .product {
  display: block;
  width: 48%;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border: solid 1px #f2f2f2;
  max-width: 260px;
}

/* line 36, app/assets/stylesheets/store/pasts.scss */
.store-pasts main .products .product img {
  width: 100%;
  min-height: 60px;
  margin-bottom: 12px;
  background-color: #f2f2f2;
}

/* line 42, app/assets/stylesheets/store/pasts.scss */
.store-pasts main .products .product .info {
  padding: 0 6px;
}

/* line 44, app/assets/stylesheets/store/pasts.scss */
.store-pasts main .products .product .info h2 {
  font-family: HiraKakuPro-W3;
  font-size: 14px;
  line-height: 1.29;
  color: #474d50;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* line 57, app/assets/stylesheets/store/pasts.scss */
.store-pasts main .link-box {
  width: 90%;
  margin: 0 auto;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/store/show.scss */
.store-show {
  width: 100%;
  background: #f2f2f2;
}

/* line 6, app/assets/stylesheets/store/show.scss */
.store-show .share-footer {
  margin-top: -80px;
}

@media screen and (max-width: 743px) {
  /* line 8, app/assets/stylesheets/store/show.scss */
  .store-show .share-footer footer {
    background: #ffffff;
  }
}

/* line 14, app/assets/stylesheets/store/show.scss */
.store-show main {
  width: 100%;
  max-width: 744px;
  margin: 0 auto;
  background: #ffffff;
  padding-bottom: 100px;
  padding-top: 84px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
}

/* line 24, app/assets/stylesheets/store/show.scss */
.store-show main .product-images {
  width: 100%;
  margin-bottom: 24px;
}

/* line 27, app/assets/stylesheets/store/show.scss */
.store-show main .product-images .thumbnail {
  background-color: #f2f2f2;
}

/* line 31, app/assets/stylesheets/store/show.scss */
.store-show main .product-images .thumbnail .slick-list .slick-track {
  padding: 8px 10px;
  margin-left: -4px;
  transform: unset !important;
}

/* line 35, app/assets/stylesheets/store/show.scss */
.store-show main .product-images .thumbnail .slick-list .slick-track .slick-slide {
  margin: 0 6px;
  width: 15%;
  height: auto;
}

/* line 44, app/assets/stylesheets/store/show.scss */
.store-show main .product-images .large {
  width: 100%;
  height: auto;
}

/* line 49, app/assets/stylesheets/store/show.scss */
.store-show main .product-info {
  width: 90%;
  margin: 0 auto 64px auto;
}

/* line 52, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .notice {
  font-family: 700;
  font-size: 16px;
  color: #BC2A21;
  margin-bottom: 16px;
  text-align: center;
}

/* line 59, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .title-price {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

/* line 65, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .title-text {
  font-family: 500;
  font-size: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #474d50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3em;
  margin-bottom: 20px;
}

/* line 80, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .price-info {
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* line 85, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .price-info .tax {
  font-family: 700;
  font-size: 10px;
  color: #474d50;
  margin-right: 4px;
}

/* line 91, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .price-info .price {
  font-family: 700;
  font-size: 18px;
  line-height: 0.89;
  color: #474d50;
}

/* line 98, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .extra-info {
  display: flex;
  justify-content: flex-end;
}

/* line 101, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .extra-info p {
  background-color: #D8864E;
  font-family: 700;
  font-size: 10px;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 8px;
}

/* line 110, app/assets/stylesheets/store/show.scss */
.store-show main .product-info p.content {
  font-family: 500;
  font-size: 14px;
  line-height: 1.5em;
  color: #474d50;
  width: 100%;
  margin: 24px 0 32px 0;
}

/* line 118, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-items {
  width: 100%;
  margin-bottom: 12px;
}

/* line 121, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-items .delivery-items-legend {
  font-family: 700;
  font-size: 12px;
  line-height: 18px;
  color: #474d50;
  margin-bottom: 16px;
}

/* line 129, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section {
  margin-bottom: 8px;
}

/* line 131, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section .delivery-section-title {
  box-sizing: border-box;
  font-family: 700;
  width: 100%;
  padding: 8px;
  font-size: 12px;
  color: #474d50;
  background-color: #f2f2f2;
  margin-bottom: 12px;
}

/* line 141, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section .delivery-section-list {
  margin: 16px 0 32px;
  list-style: none;
}

/* line 144, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section .delivery-section-list li {
  font-size: 14px;
  color: #474d50;
  margin-top: 4px;
}

/* line 151, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box {
  width: 100%;
  margin: 0 auto 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  justify-content: flex-start;
  column-gap: calc(4% / 2);
  row-gap: 12px;
}

/* line 162, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box .delivery-item-list {
  width: -webkit-calc(96% / 3);
  width: calc(96% / 3);
  background-color: #f2f2f2;
  box-sizing: border-box;
  padding: 1px;
  position: relative;
}

/* line 169, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box .delivery-item-list.limited-packaged_drink {
  background-color: #566774;
}

/* line 171, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box .delivery-item-list.limited-packaged_drink .limited-text {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 15%;
  font-family: 700;
  font-size: 1.7vh;
  color: #ffffff;
  background-color: #566774;
  bottom: 0;
  left: 0;
  padding: 3px 0;
}

/* line 187, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box .delivery-item-list a {
  width: 100%;
  display: block;
}

/* line 190, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box .delivery-item-list a p {
  display: none;
}

/* line 194, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box .delivery-item-list img {
  width: 100%;
  display: block;
}

/* line 198, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box .delivery-item-list .packaged_drink-popup {
  cursor: pointer;
}

/* line 201, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box .delivery-item-list .non-alcohol-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  width: 30%;
  height: 30%;
  position: absolute;
  top: -8px;
  right: -6px;
  z-index: 100;
  background-color: #DAD8A0;
  font-family: "Barlow", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  border-radius: 50%;
}

/* line 218, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-section-box .delivery-item-list .non-alcohol-mark .small-text {
  font-size: 9px;
  line-height: 9px;
}

@media screen and (max-width: 320px) {
  /* line 224, app/assets/stylesheets/store/show.scss */
  .store-show main .product-info .delivery-section-box .delivery-item-list .non-alcohol-mark {
    top: -8px;
    right: -4px;
    font-size: 11px;
  }
  /* line 228, app/assets/stylesheets/store/show.scss */
  .store-show main .product-info .delivery-section-box .delivery-item-list .non-alcohol-mark .small-text {
    font-size: 8px;
    line-height: 8px;
  }
}

@media screen and (min-width: 415px) {
  /* line 235, app/assets/stylesheets/store/show.scss */
  .store-show main .product-info .delivery-section-box .delivery-item-list .non-alcohol-mark {
    right: -8px;
    font-size: 15px;
  }
  /* line 238, app/assets/stylesheets/store/show.scss */
  .store-show main .product-info .delivery-section-box .delivery-item-list .non-alcohol-mark .small-text {
    font-size: 10px;
    line-height: 10px;
  }
}

@media screen and (min-width: 744px) {
  /* line 245, app/assets/stylesheets/store/show.scss */
  .store-show main .product-info .delivery-section-box .delivery-item-list .non-alcohol-mark {
    right: -8px;
    font-size: 21px;
  }
  /* line 248, app/assets/stylesheets/store/show.scss */
  .store-show main .product-info .delivery-section-box .delivery-item-list .non-alcohol-mark .small-text {
    font-size: 14px;
    line-height: 16px;
  }
}

/* line 256, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-info {
  margin-top: 32px;
  width: 100%;
}

/* line 259, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-info .delivery {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
}

/* line 264, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-info .delivery .next-delivery-legend {
  width: 168px;
  height: 12px;
  font-family: 500;
  font-size: 12px;
  color: #474d50;
  padding-top: 2px;
}

/* line 272, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-info .delivery .delivery-date {
  height: 14px;
  font-family: 700;
  font-size: 14px;
  color: #E8A519;
}

/* line 278, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-info .delivery h2 {
  font-family: 500;
  font-size: 12px;
  color: #474d50;
}

/* line 283, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-info .delivery p {
  font-family: 700;
  font-size: 14px;
  color: #e8a519;
}

/* line 289, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .delivery-info .border {
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border: solid 1px #C7CDCE;
  margin-bottom: 32px;
}

/* line 298, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .option-check-box .option-title {
  font-family: 700;
  font-size: 12px;
  line-height: 18px;
  color: #474d50;
  margin-bottom: 12px;
}

/* line 305, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .option-check-box .check-box {
  display: none;
}

/* line 307, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .option-check-box .check-box:checked + .as-gift > .check-mark {
  background-image: url(/assets/check-on-d70f626993dc3a55c291e65b41ee83c957d76b721ae602d8ff490e79d8d870df.svg);
}

/* line 311, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .option-check-box .as-gift {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

/* line 315, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .option-check-box .as-gift .check-mark {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background-image: url(/assets/check-off-eb824ec3bc35f52280948eb463f5e209ac5fad1e81e61bd0a32097bc2d043232.svg);
}

/* line 322, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .option-check-box .as-gift .label-text {
  display: inline-block;
  font-family: 500;
  color: #474d50;
  font-size: 14px;
  line-height: 21px;
}

/* line 331, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .announce-text {
  margin-top: 12px;
  font-family: 500;
  color: #474d50;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* line 339, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .link-box {
  margin-bottom: 24px;
}

/* line 342, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .link-label {
  font-size: 14px;
  text-align: center;
  line-height: 1.3em;
  margin-bottom: 8px;
}

/* line 348, app/assets/stylesheets/store/show.scss */
.store-show main .product-info .hidden {
  display: none;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 2, app/assets/stylesheets/store/thanks.scss */
.store-thanks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 7, app/assets/stylesheets/store/thanks.scss */
.store-thanks main {
  width: 90%;
  margin: 140px auto 64px auto;
}

/* line 11, app/assets/stylesheets/store/thanks.scss */
.store-thanks main .cheers {
  display: block;
  width: 50%;
  margin: 0 auto;
}

/* line 17, app/assets/stylesheets/store/thanks.scss */
.store-thanks main h2 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  margin: 36px 0 16px 0;
  text-align: center;
}

/* line 23, app/assets/stylesheets/store/thanks.scss */
.store-thanks main .apps-section {
  text-align: center;
}

/* line 25, app/assets/stylesheets/store/thanks.scss */
.store-thanks main .apps-section img.logo {
  width: 98px;
  height: 98px;
  object-fit: contain;
}

/* line 30, app/assets/stylesheets/store/thanks.scss */
.store-thanks main .apps-section .flex {
  margin: 16px 0;
}

/* line 32, app/assets/stylesheets/store/thanks.scss */
.store-thanks main .apps-section .flex a:hover {
  opacity: 0.8;
}

/* line 35, app/assets/stylesheets/store/thanks.scss */
.store-thanks main .apps-section .flex img {
  height: 44px;
  object-fit: contain;
}

/* line 38, app/assets/stylesheets/store/thanks.scss */
.store-thanks main .apps-section .flex img.ios {
  margin-right: 33px;
}

/* line 43, app/assets/stylesheets/store/thanks.scss */
.store-thanks main .apps-section p {
  max-width: 600px;
  margin: 0 auto 64px auto;
  font-size: 10px;
}

/* line 49, app/assets/stylesheets/store/thanks.scss */
.store-thanks main p {
  text-align: center;
  margin-bottom: 64px;
  line-height: 1.4em;
}

/* line 53, app/assets/stylesheets/store/thanks.scss */
.store-thanks main p span {
  font-size: 12px;
  font-weight: bold;
  color: #e36c6c;
  line-height: 1em;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 2, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index {
  width: 100%;
  background: #1CB9DE;
}

/* line 6, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index h1, #tasting-rokko-index h2, #tasting-rokko-index p {
  font-family: 'Noto Sans JP', sans-serif;
  color: #ffffff;
  letter-spacing: 0.04em;
  line-height: 1.4em;
}

/* line 13, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index h1 {
  text-align: center;
  font-size: 28px;
}

/* line 18, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main {
  width: 100%;
  max-width: 580px;
  background: #1CB9DE;
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 25, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container {
  width: 90%;
  margin: 0 auto;
  padding: 132px 0;
  box-sizing: border-box;
}

/* line 31, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container section {
  margin-bottom: 80px;
}

/* line 35, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container .result-image, #tasting-rokko-index main .container .store-image {
  margin-top: 32px;
  padding: 4px;
  background-color: #FFFFFF;
  border-radius: 10px;
}

/* line 42, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container .store-image {
  margin-bottom: 32px;
}

/* line 46, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

/* line 51, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container img.logo {
  width: 95px;
  margin: 0 auto;
}

/* line 57, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container p {
  color: #ffffff;
  font-weight: 700;
  margin: 40px 0;
  font-size: 14px;
  text-align: center;
}

/* line 64, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container p.text {
  font-size: 12px;
}

/* line 68, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container p.intro {
  font-size: 16px;
}

/* line 73, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container .button {
  margin-bottom: 40px;
}

/* line 78, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container form .number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 28px;
}

/* line 85, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container form span {
  font-family: 'Barlow', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;
  margin-left: 12px;
  letter-spacing: 0.05em;
}

/* line 94, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container form input, #tasting-rokko-index main .container form select {
  box-sizing: border-box;
  width: 76px;
  height: 66px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 10px;
  border: none;
  line-height: 14px;
  font-size: 42px;
  padding: 0 12px;
  background-color: #ffffff;
  color: #333;
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
}

/* line 111, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container form input::placeholder, #tasting-rokko-index main .container form select::placeholder {
  color: #c7cdce;
}

/* line 117, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  cursor: pointer;
}

/* line 126, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container .button a, #tasting-rokko-index main .container .button input[type=submit] {
  display: flex;
  align-items: center;
  margin: 0 auto;
  height: 44px;
  padding: 0.5em 2em;
  width: 100%;
  box-sizing: border-box;
  color: #333333;
  font-size: 16px;
  font-weight: 700;
  background-color: #ffffff;
  box-shadow: 0 5px 0 #3291A7;
  transition: 0.3s;
  border-radius: 10px;
  text-align: center;
  justify-content: center;
}

/* line 143, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container .button a.arrow, #tasting-rokko-index main .container .button input.arrow[type=submit] {
  justify-content: space-between;
}

/* line 146, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container .button a.arrow::after, #tasting-rokko-index main .container .button input.arrow[type=submit]::after {
  content: '';
  width: 5px;
  height: 5px;
  border-top: 3px solid #333333;
  border-right: 3px solid #333333;
  transform: rotate(45deg);
}

/* line 154, app/assets/stylesheets/tasting/answer.scss */
#tasting-rokko-index main .container .button a:hover, #tasting-rokko-index main .container .button input[type=submit]:hover {
  transform: translateY(3px);
  text-decoration: none;
  box-shadow: 0 2px 0 #3291A7;
}

/* line 1, app/assets/stylesheets/terms/index.scss */
.terms-index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* line 5, app/assets/stylesheets/terms/index.scss */
.terms-index main {
  width: 90%;
  margin: 116px auto 64px auto;
}

/* line 8, app/assets/stylesheets/terms/index.scss */
.terms-index main h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 32px;
}

/* line 13, app/assets/stylesheets/terms/index.scss */
.terms-index main p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  font-size: 12px;
  margin: 20px 0;
  line-height: 1.2em;
}

/* line 18, app/assets/stylesheets/terms/index.scss */
.terms-index main p.right {
  text-align: right;
}

/* line 21, app/assets/stylesheets/terms/index.scss */
.terms-index main p b {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 4px;
}

/* line 2, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta {
  position: fixed;
  width: 100%;
  left: 0%;
  bottom: 0%;
  z-index: 100;
  background-color: #E8A519;
}

@media screen and (min-width: 744px) {
  /* line 2, app/assets/stylesheets/top/bottom_cta.scss */
  #top-index .bottom-cta {
    display: none;
  }
}

/* line 12, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta.hidden {
  -webkit-animation: fadeOut 1s;
  animation: fadeOut 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 19, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta.persona .text-box .text .first,
#top-index .bottom-cta.persona .text-box .price-box .first {
  font-size: 10px;
}

@media screen and (max-width: 414px) {
  /* line 19, app/assets/stylesheets/top/bottom_cta.scss */
  #top-index .bottom-cta.persona .text-box .text .first,
#top-index .bottom-cta.persona .text-box .price-box .first {
    font-size: 9px;
  }
}

@media screen and (max-width: 320px) {
  /* line 19, app/assets/stylesheets/top/bottom_cta.scss */
  #top-index .bottom-cta.persona .text-box .text .first,
#top-index .bottom-cta.persona .text-box .price-box .first {
    font-size: 8px;
  }
}

/* line 28, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta.persona .text-box .text .second,
#top-index .bottom-cta.persona .text-box .price-box .second {
  font-size: 14px;
}

@media screen and (max-width: 414px) {
  /* line 28, app/assets/stylesheets/top/bottom_cta.scss */
  #top-index .bottom-cta.persona .text-box .text .second,
#top-index .bottom-cta.persona .text-box .price-box .second {
    font-size: 12px;
  }
}

@media screen and (max-width: 320px) {
  /* line 28, app/assets/stylesheets/top/bottom_cta.scss */
  #top-index .bottom-cta.persona .text-box .text .second,
#top-index .bottom-cta.persona .text-box .price-box .second {
    font-size: 11px;
  }
}

/* line 41, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta:hover .tap-triangle {
  -webkit-animation: fadeIn 0.8s infinite;
  animation: fadeIn 0.8s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 45, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box {
  width: 96%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  font-weight: 500;
  box-sizing: border-box;
  overflow: hidden;
}

/* line 58, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box .text .first,
#top-index .bottom-cta .text-box .price-box .first {
  font-size: 10px;
  margin-bottom: 4px;
  color: #ffffff;
}

@media screen and (max-width: 320px) {
  /* line 58, app/assets/stylesheets/top/bottom_cta.scss */
  #top-index .bottom-cta .text-box .text .first,
#top-index .bottom-cta .text-box .price-box .first {
    font-size: 8px;
  }
}

/* line 66, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box .text .second,
#top-index .bottom-cta .text-box .price-box .second {
  color: #ffffff;
}

@media screen and (max-width: 320px) {
  /* line 66, app/assets/stylesheets/top/bottom_cta.scss */
  #top-index .bottom-cta .text-box .text .second,
#top-index .bottom-cta .text-box .price-box .second {
    font-size: 12px;
  }
}

/* line 73, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box .text {
  text-align: left;
}

/* line 76, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box .right-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 13px;
}

/* line 81, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box .right-side .price-box {
  text-align: right;
}

/* line 84, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box .right-side .tap-button {
  position: relative;
  display: grid;
  align-items: center;
  text-align: center;
  width: 60px;
  height: 33px;
  border-radius: 4px;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

/* line 95, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box .right-side .tap-button .tap-triangle {
  position: absolute;
}

/* line 97, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box .right-side .tap-button .tap-triangle.left {
  top: -9px;
  right: 0;
}

/* line 101, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .text-box .right-side .tap-button .tap-triangle.right {
  top: -5px;
  right: -9px;
}

/* line 109, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .wave-animation {
  position: fixed;
  left: 0;
  bottom: 56px;
  width: 100%;
}

/* line 114, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .wave-animation .container {
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  bottom: 0px;
}

@media screen and (max-width: 414px) {
  /* line 114, app/assets/stylesheets/top/bottom_cta.scss */
  #top-index .bottom-cta .wave-animation .container {
    height: 25px;
  }
}

/* line 123, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .wave-animation .container .wave {
  will-change: transform;
  -webkit-animation: moving-wave 1s linear infinite;
  animation: moving-wave 1s linear infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes moving-wave {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}

/* line 134, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .wave-animation .container .wave.first {
  animation-duration: 13s;
  fill-opacity: 1;
}

/* line 138, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .wave-animation .container .wave.second {
  animation-duration: 11s;
  animation-delay: -2s;
  fill-opacity: 0.5;
}

/* line 143, app/assets/stylesheets/top/bottom_cta.scss */
#top-index .bottom-cta .wave-animation .container .wave.third {
  animation-duration: 9s;
  animation-delay: -4s;
  fill-opacity: 0.35;
}

/* line 1, app/assets/stylesheets/top/index.scss */
#top-index {
  overflow-x: hidden;
}

/* line 3, app/assets/stylesheets/top/index.scss */
#top-index footer {
  background-color: #f2f2f2;
}

/* line 6, app/assets/stylesheets/top/index.scss */
#top-index main {
  background-color: #ECEAE3;
}

/* line 8, app/assets/stylesheets/top/index.scss */
#top-index main section {
  padding: 54px 5%;
}

/* line 11, app/assets/stylesheets/top/index.scss */
#top-index main section.full {
  padding: 0px;
}

/* line 15, app/assets/stylesheets/top/index.scss */
#top-index main section .section-decoration {
  margin-bottom: 40px;
}

/* line 17, app/assets/stylesheets/top/index.scss */
#top-index main section .section-decoration .decoration-line {
  margin: 0 auto;
  width: 1px;
  height: 68px;
  background-color: #C7CDCE;
}

/* line 23, app/assets/stylesheets/top/index.scss */
#top-index main section .section-decoration p {
  font-size: 14px;
  color: #474d50;
  text-align: center;
  letter-spacing: 0.04em;
}

/* line 28, app/assets/stylesheets/top/index.scss */
#top-index main section .section-decoration p.decoration-title {
  margin-top: 20px;
  font-weight: 500;
}

/* line 32, app/assets/stylesheets/top/index.scss */
#top-index main section .section-decoration p.decoration-subtitle {
  margin-top: 4px;
  font-style: italic;
  font-family: "Barlow", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

/* line 40, app/assets/stylesheets/top/index.scss */
#top-index main section .section-title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  line-height: 26px;
  color: #474d50;
}

/* line 48, app/assets/stylesheets/top/index.scss */
#top-index main section .wave {
  width: 100%;
  overflow: hidden;
  text-align: center;
  margin-bottom: -2px;
}

/* line 53, app/assets/stylesheets/top/index.scss */
#top-index main section .wave.blue-gray {
  color: #566774;
}

/* line 56, app/assets/stylesheets/top/index.scss */
#top-index main section .wave.green {
  color: #DAD8A0;
}

/* line 59, app/assets/stylesheets/top/index.scss */
#top-index main section .wave.tail {
  transform: rotate(180deg);
  margin: -2px 0px 0px;
}

/* line 63, app/assets/stylesheets/top/index.scss */
#top-index main section .wave svg {
  fill: currentColor;
  width: 100%;
  height: 100%;
  line-height: 1px;
}

/* line 72, app/assets/stylesheets/top/index.scss */
#top-index main .separator-eyecatch {
  position: relative;
  width: 100%;
}

/* line 75, app/assets/stylesheets/top/index.scss */
#top-index main .separator-eyecatch img {
  width: 100%;
}

@media screen and (min-width: 744px) {
  /* line 77, app/assets/stylesheets/top/index.scss */
  #top-index main .separator-eyecatch img.sp {
    display: none;
  }
}

/* line 82, app/assets/stylesheets/top/index.scss */
#top-index main .separator-eyecatch img.pc {
  display: none;
}

@media screen and (min-width: 744px) {
  /* line 82, app/assets/stylesheets/top/index.scss */
  #top-index main .separator-eyecatch img.pc {
    display: block;
  }
}

/* line 89, app/assets/stylesheets/top/index.scss */
#top-index main .separator-eyecatch .gradient {
  position: absolute;
  left: 0;
  width: 100%;
  height: 37px;
}

/* line 94, app/assets/stylesheets/top/index.scss */
#top-index main .separator-eyecatch .gradient.top {
  top: 0;
  background: linear-gradient(0deg, rgba(242, 242, 242, 0) 0%, #ECEAE3 95.31%);
}

/* line 98, app/assets/stylesheets/top/index.scss */
#top-index main .separator-eyecatch .gradient.tail {
  bottom: 0;
  background: linear-gradient(180deg, rgba(242, 242, 242, 0) 0%, #ECEAE3 95.31%);
}

/* line 1, app/assets/stylesheets/top/partials/_achievement_section.scss */
#top-index main section.achievement {
  position: relative;
}

/* line 4, app/assets/stylesheets/top/partials/_achievement_section.scss */
#top-index main section.achievement .section-title {
  margin-bottom: 32px;
}

/* line 8, app/assets/stylesheets/top/partials/_achievement_section.scss */
#top-index main section.achievement .achievement-container {
  margin-bottom: 32px;
  max-width: 620px;
  margin: 0 auto 32px;
}

/* line 12, app/assets/stylesheets/top/partials/_achievement_section.scss */
#top-index main section.achievement .achievement-container img {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 auto 20px;
}

/* line 18, app/assets/stylesheets/top/partials/_achievement_section.scss */
#top-index main section.achievement .achievement-container p {
  color: #474d50;
  font-size: 14px;
  text-align: center;
  margin-bottom: 32px;
  line-height: 24px;
}

/* line 1, app/assets/stylesheets/top/partials/_app_section.scss */
#top-index main section.app {
  margin-top: 40px;
  position: relative;
  width: 100%;
  padding: 23% 0;
  background-image: url(/assets/top/sp/app-bg-sp-de71c96f8ef079b2606dfbed316ecff7ea10a65b5e8c1de8b31b629cb5a57f3b.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (min-width: 744px) {
  /* line 1, app/assets/stylesheets/top/partials/_app_section.scss */
  #top-index main section.app {
    padding: 11% 0;
    background-image: url(/assets/top/pc/app-bg-pc-30db4f2040c0c9e9ea047d6b160396d42652e29dbc5bafacfedbf7d8bcfc8101.jpg);
  }
}

/* line 15, app/assets/stylesheets/top/partials/_app_section.scss */
#top-index main section.app .head {
  width: 100%;
  height: 37px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(236, 234, 227, 0) 0%, #ECEAE3 100%);
  transform: rotate(-180deg);
}

/* line 24, app/assets/stylesheets/top/partials/_app_section.scss */
#top-index main section.app .gradient-tail {
  width: 100%;
  height: 37px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(242, 242, 242, 0) 0%, #F2F2F2 95.31%);
}

/* line 33, app/assets/stylesheets/top/partials/_app_section.scss */
#top-index main section.app .app-icon {
  width: 127px;
  display: block;
  margin: 0 auto;
}

/* line 39, app/assets/stylesheets/top/partials/_app_section.scss */
#top-index main section.app .buttons {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* line 43, app/assets/stylesheets/top/partials/_app_section.scss */
#top-index main section.app .buttons a {
  height: 44px;
}

/* line 45, app/assets/stylesheets/top/partials/_app_section.scss */
#top-index main section.app .buttons a:first-child {
  margin-right: 32px;
}

/* line 48, app/assets/stylesheets/top/partials/_app_section.scss */
#top-index main section.app .buttons a img {
  height: 100%;
}

/* line 2, app/assets/stylesheets/top/partials/_brewery_section.scss */
#top-index main section.brewery .section-container {
  background-color: #566774;
  padding: 54px 5%;
}

/* line 6, app/assets/stylesheets/top/partials/_brewery_section.scss */
#top-index main section.brewery .section-container .section-decoration p {
  color: #ffffff;
}

/* line 10, app/assets/stylesheets/top/partials/_brewery_section.scss */
#top-index main section.brewery .section-container .text {
  max-width: 350px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  margin: 0 auto 50px;
}

/* line 20, app/assets/stylesheets/top/partials/_brewery_section.scss */
#top-index main section.brewery ul {
  max-width: 700px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 12px;
}

@media screen and (min-width: 744px) {
  /* line 20, app/assets/stylesheets/top/partials/_brewery_section.scss */
  #top-index main section.brewery ul {
    width: 80%;
    margin: 0 auto;
    gap: 24px 24px;
  }
}

/* line 31, app/assets/stylesheets/top/partials/_brewery_section.scss */
#top-index main section.brewery ul li {
  width: calc((100% - 72px) / 7);
}

@media screen and (min-width: 744px) {
  /* line 31, app/assets/stylesheets/top/partials/_brewery_section.scss */
  #top-index main section.brewery ul li {
    width: calc((100% - 144px) / 7);
  }
}

/* line 36, app/assets/stylesheets/top/partials/_brewery_section.scss */
#top-index main section.brewery ul li img {
  width: 100%;
}

/* line 1, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign {
  position: relative;
}

/* line 4, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .section-title {
  margin-bottom: 32px;
}

/* line 8, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .promotion {
  margin-bottom: 32px;
  max-width: 620px;
  margin: 0 auto 32px;
}

/* line 12, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .promotion img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* line 17, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .promotion .button:last-child {
  margin-top: 24px;
}

/* line 20, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .promotion .code {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

/* line 24, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .promotion .code input, #top-index main section.campaign .promotion .code button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 44px;
  text-align: center;
}

/* line 35, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .promotion .code input {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
  color: #474d50;
  background: #ffffff;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* line 43, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .promotion .code button {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  background: #566774;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 60px;
}

/* line 53, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .promotion p {
  color: #474d50;
  font-size: 14px;
  text-align: center;
  margin-bottom: 32px;
  line-height: 24px;
}

/* line 59, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .promotion p span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #D8864E;
}

/* line 66, app/assets/stylesheets/top/partials/_campaign_section.scss */
#top-index main section.campaign .gradient-tail {
  width: 100%;
  height: 37px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(242, 242, 242, 0) 0%, #DFDFDD 95.31%);
}

/* line 1, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience {
  margin-top: -50px;
}

/* line 3, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container {
  background-color: #566774;
  padding: 54px 5%;
}

/* line 7, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container .section-decoration p {
  color: #ffffff;
}

/* line 11, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container .text {
  max-width: 350px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  margin: 0 auto 50px;
}

/* line 20, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul {
  list-style: none;
}

@media screen and (max-width: 743px) {
  /* line 20, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 744px) {
  /* line 20, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul {
    display: flex;
    justify-content: center;
    gap: 0 24px;
    min-width: 670px;
    margin: 0 auto;
  }
}

/* line 33, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li {
  margin-bottom: 60px;
}

/* line 35, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li:last-child {
  margin-bottom: 0px;
}

/* line 39, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li.right .eyecatch {
  flex-direction: row-reverse;
}

@media screen and (min-width: 744px) {
  /* line 39, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul li.right .eyecatch {
    flex-direction: row;
  }
}

/* line 44, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li.right .eyecatch img {
  margin: 0 0 0 16px;
}

@media screen and (min-width: 744px) {
  /* line 44, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul li.right .eyecatch img {
    margin: 0px;
  }
}

/* line 51, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li.right .eyecatch .accessory span {
  position: absolute;
  top: 94px;
  left: -14px;
  transform-origin: left top;
  transform: rotate(-90deg);
}

@media screen and (max-width: 320px) {
  /* line 50, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul li.right .eyecatch .accessory {
    display: none;
  }
}

@media screen and (min-width: 744px) {
  /* line 50, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul li.right .eyecatch .accessory {
    display: none;
  }
}

/* line 66, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li.right .experience-text {
  text-align: right;
  width: 100%;
}

@media screen and (min-width: 744px) {
  /* line 66, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul li.right .experience-text {
    text-align: left;
    width: 100%;
    max-width: 280px;
  }
}

/* line 76, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li .eyecatch {
  display: flex;
}

/* line 78, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li .eyecatch img {
  width: 100%;
  max-width: 280px;
  margin-right: 16px;
}

@media screen and (min-width: 744px) {
  /* line 78, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul li .eyecatch img {
    margin-right: 0;
  }
}

/* line 86, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li .eyecatch .accessory {
  position: relative;
  font-family: "Barlow", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #ffffff;
}

/* line 92, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li .eyecatch .accessory span {
  position: absolute;
  top: 0;
  left: 14px;
  transform-origin: left top;
  width: 97px;
  display: block;
  transform: rotate(90deg);
}

@media screen and (max-width: 320px) {
  /* line 86, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul li .eyecatch .accessory {
    display: none;
  }
}

@media screen and (min-width: 744px) {
  /* line 86, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul li .eyecatch .accessory {
    display: none;
  }
}

/* line 109, app/assets/stylesheets/top/partials/_experience_section.scss */
#top-index main section.experience .section-container ul li .experience-text {
  width: 280px;
  font-weight: 16px;
  color: #ffffff;
  line-height: 20px;
  margin-top: 16px;
}

@media screen and (min-width: 744px) {
  /* line 109, app/assets/stylesheets/top/partials/_experience_section.scss */
  #top-index main section.experience .section-container ul li .experience-text {
    width: 100%;
    max-width: 280px;
  }
}

/* line 1, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first {
  position: relative;
  padding: 0px;
  background-image: none;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ECEAE3;
  height: 95vh;
  max-height: 736px;
  overflow: hidden;
}

@media screen and (min-width: 415px) {
  /* line 1, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first {
    background-image: url(/assets/top/pc/top-f684f110705b7fb3d4c5b86032be51eff9d57b3813dbf264cef075e9f6ea8d11.jpg);
  }
}

@media screen and (max-width: 414px) {
  /* line 1, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first {
    max-height: 670px;
  }
}

@media screen and (max-width: 320px) {
  /* line 1, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first {
    max-height: 568px;
  }
}

/* line 22, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .box {
  position: absolute;
  bottom: 18px;
  left: -96px;
  width: 430px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-animation: boxAnim 1.5s linear 1.9s;
  animation: boxAnim 1.5s linear 1.9s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (min-width: 744px) {
  /* line 22, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .box {
    display: none;
  }
}

@media screen and (min-width: 415px) {
  /* line 22, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .box {
    display: none;
  }
}

@keyframes boxAnim {
  0% {
    opacity: 0;
    transform: translateX(-30px) rotate(-6deg);
  }
  25% {
    opacity: 1;
    transform: translateX(0px) rotate(-6deg);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* line 57, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .glass {
  position: absolute;
  top: -106px;
  left: -96px;
  width: 186px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-animation: glassAnime 1.2s ease-out 2.6s;
  animation: glassAnime 1.2s ease-out 2.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (min-width: 744px) {
  /* line 57, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .glass {
    display: none;
  }
}

@media screen and (min-width: 415px) {
  /* line 57, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .glass {
    display: none;
  }
}

@keyframes glassAnime {
  0% {
    opacity: 0;
    transform: translate(-76px, 73px) rotate(135deg);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(186deg);
  }
}

/* line 83, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .bottle {
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
}

@media screen and (min-width: 744px) {
  /* line 83, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .bottle {
    display: none;
  }
}

@media screen and (min-width: 415px) {
  /* line 83, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .bottle {
    display: none;
  }
}

/* line 93, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .bottle.first {
  top: -80px;
  left: 145px;
  width: 123px;
  -webkit-animation: bottleAnime1 1.2s linear 1s;
  animation: bottleAnime1 1.2s linear 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 4.0s;
}

@keyframes bottleAnime1 {
  0% {
    opacity: 0;
    transform: translateY(-40px) rotate(-37deg);
  }
  40% {
    opacity: 1;
    transform: translate(-8px, 5px) rotate(-32deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(-27deg);
  }
}

/* line 113, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .bottle.second {
  top: 76px;
  left: 289px;
  width: 123px;
  -webkit-animation: bottleAnime2 1.2s linear 1s;
  animation: bottleAnime2 1.2s linear 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 3.6s;
}

@keyframes bottleAnime2 {
  0% {
    opacity: 0;
    transform: translateY(-40px) rotate(-3deg);
  }
  40% {
    opacity: 1;
    transform: translate(-8px, 5px) rotate(2deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(7deg);
  }
}

@media screen and (max-width: 320px) {
  /* line 113, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .bottle.second {
    top: -15px;
    left: 282px;
  }
}

/* line 137, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .bottle.third {
  bottom: 23px;
  left: 320px;
  width: 123px;
  -webkit-animation: bottleAnime3 1.2s linear 1s;
  animation: bottleAnime3 1.2s linear 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 2.8s;
}

@keyframes bottleAnime3 {
  0% {
    opacity: 0;
    transform: translateY(-50px) rotate(23deg);
  }
  50% {
    opacity: 1;
    transform: translate(-8px, 5px) rotate(28deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(33deg);
  }
}

@media screen and (max-width: 320px) {
  /* line 137, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .bottle.third {
    left: 298px;
  }
}

/* line 162, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .can {
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
}

@media screen and (min-width: 744px) {
  /* line 162, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .can {
    display: none;
  }
}

@media screen and (min-width: 415px) {
  /* line 162, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .can {
    display: none;
  }
}

/* line 172, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .can.first {
  top: 101px;
  left: 42px;
  width: 103px;
  -webkit-animation: canAnime1 1.2s linear 1s;
  animation: canAnime1 1.2s linear 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 3.7s;
}

@keyframes canAnime1 {
  0% {
    opacity: 0;
    transform: translateY(-40px) rotate(19deg);
  }
  40% {
    opacity: 1;
    transform: translate(-15px, 5px) rotate(24deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(29deg);
  }
}

@media screen and (max-width: 320px) {
  /* line 172, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .can.first {
    display: none;
  }
}

/* line 195, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .can.second {
  bottom: 196px;
  left: 243px;
  width: 107px;
  -webkit-animation: canAnime2 1.2s linear 1s;
  animation: canAnime2 1.2s linear 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 3.2s;
}

@keyframes canAnime2 {
  0% {
    opacity: 0;
    transform: translateY(-45px) rotate(-23deg);
  }
  40% {
    opacity: 1;
    transform: translate(15px, 5px) rotate(-18deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(-13deg);
  }
}

/* line 217, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .first-text {
  position: absolute;
  top: 29%;
  left: 17%;
  display: flex;
  flex-direction: column;
  z-index: 1;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

@media screen and (max-width: 743px) {
  /* line 217, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .first-text {
    -webkit-animation: spTextSlide 1s ease-out;
    animation: spTextSlide 1s ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
}

@media all and (max-width: 414px) {
  /* line 217, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .first-text {
    display: none;
  }
}

/* line 233, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .first-text .text {
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  background-color: #222222;
  text-align: left;
  -webkit-animation: fadeIn 1.1s linear 1.5s forwards;
  animation: fadeIn 1.1s linear 1.5s forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 240, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .first-text .text span {
  display: inline-block;
  padding: 8px;
  opacity: 0;
  -webkit-animation: fadeIn 0.8s linear 2s forwards;
  animation: fadeIn 0.8s linear 2s forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (max-width: 320px) {
  /* line 240, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .first-text .text span {
    font-size: 12px;
  }
}

/* line 249, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .first-text .text::before {
  -webkit-animation: showTextAnim 0.9s linear 1.7s forwards;
  animation: showTextAnim 0.9s linear 1.7s forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 2;
}

/* line 261, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .text-box {
  position: absolute;
  display: flex;
  gap: 4px;
  flex-direction: column;
  z-index: 1;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

@media screen and (max-width: 743px) {
  /* line 261, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .text-box {
    -webkit-animation: spTextSlide 1s ease-out;
    animation: spTextSlide 1s ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
}

@media screen and (min-width: 415px) {
  /* line 261, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .text-box {
    top: 51%;
    left: 17%;
  }
}

@media screen and (max-width: 414px) {
  /* line 261, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .text-box {
    bottom: 3%;
    right: -11%;
  }
}

/* line 281, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .text-box .text {
  position: relative;
  font-weight: 700;
  color: #222222;
  text-align: left;
  line-height: 20px;
}

@media screen and (max-width: 414px) {
  /* line 281, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .text-box .text {
    text-align: right;
  }
}

/* line 290, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .text-box .text span {
  display: inline-block;
  opacity: 0;
}

@media screen and (max-width: 320px) {
  /* line 290, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .text-box .text span {
    font-size: 12px;
  }
}

/* line 296, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .text-box .text span::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #222222;
  z-index: 2;
}

/* line 306, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .text-box .text.first span {
  -webkit-animation: fadeIn 0.6s linear 1.6s forwards;
  animation: fadeIn 0.6s linear 1.6s forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 308, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .text-box .text.first span::before {
  -webkit-animation: showTextAnim 2.6s ease-in;
  animation: showTextAnim 2.6s ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 314, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .text-box .text.second span {
  -webkit-animation: fadeIn 0.8s linear 1.8s forwards;
  animation: fadeIn 0.8s linear 1.8s forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 316, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .text-box .text.second span::before {
  -webkit-animation: showTextAnim 2.8s ease-in;
  animation: showTextAnim 2.8s ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 324, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline {
  position: absolute;
  left: 17%;
}

/* line 327, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline .text {
  font-family: "Barlow", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 80px;
  line-height: 90px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.06em;
  background: #222222;
  background-size: 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
}

/* line 344, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline.sp {
  top: 32%;
  left: 7%;
  transform: rotate(59deg);
}

/* line 348, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline.sp .text {
  display: inline-block;
  opacity: 0;
}

/* line 351, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline.sp .text::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ECEAE3;
  z-index: 2;
}

/* line 359, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline.sp .text.first {
  -webkit-animation: fadeIn 0.5s linear 1.5s forwards;
  animation: fadeIn 0.5s linear 1.5s forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 361, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline.sp .text.first::before {
  -webkit-animation: showTextAnim 2.4s ease-in;
  animation: showTextAnim 2.4s ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 365, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline.sp .text.second {
  -webkit-animation: fadeIn 0.7s linear 1.7s forwards;
  animation: fadeIn 0.7s linear 1.7s forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 367, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline.sp .text.second::before {
  -webkit-animation: showTextAnim 2.6s ease-in;
  animation: showTextAnim 2.6s ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (min-width: 415px) {
  /* line 344, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .tagline.sp {
    display: none;
  }
}

/* line 376, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline.pc {
  display: none;
  top: 33%;
}

@media screen and (max-width: 743px) {
  /* line 376, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .tagline.pc {
    -webkit-animation: spTextSlide 1s ease-out;
    animation: spTextSlide 1s ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
}

@media screen and (min-width: 415px) {
  /* line 376, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first .tagline.pc {
    display: block;
  }
}

/* line 385, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first .tagline.pc .text {
  font-size: 50px;
  line-height: 58px;
  color: #222222;
  -webkit-animation: tagLineSlideIn 1.4s ease-out;
  animation: tagLineSlideIn 1.4s ease-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes tagLineSlideIn {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

/* line 404, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta {
  display: none;
  position: absolute;
  width: 378px;
  background-color: #ECEAE3;
  border: 2px solid #222222;
  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
  border-radius: 33px;
  justify-content: space-between;
  padding: 12px 24px;
  box-sizing: border-box;
  overflow: hidden;
  top: 63%;
  left: 17%;
  -webkit-animation: floatAnim 1s linear 1.8s;
  animation: floatAnim 1s linear 1.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 418, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
  transform: skewX(-35deg);
  opacity: 0;
}

/* line 429, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta:hover::before, #top-index main section.first a.cta:active::before {
  -webkit-animation: shine 1s;
  animation: shine 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes floatAnim {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(-10px);
  }
}

/* line 443, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta div {
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
}

/* line 448, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta div.text p {
  text-align: left;
}

/* line 453, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta div.price-box p {
  text-align: right;
}

/* line 457, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta div p {
  color: #222222;
}

/* line 459, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta div p.first {
  font-size: 10px;
  margin-bottom: 4px;
}

@media screen and (max-width: 320px) {
  /* line 459, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first a.cta div p.first {
    font-size: 8px;
  }
}

/* line 466, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta div p.second {
  font-size: 14px;
  font-weight: 700;
}

/* line 469, app/assets/stylesheets/top/partials/_first_section.scss */
#top-index main section.first a.cta div p.second.persona {
  font-size: 13px;
}

@media screen and (max-width: 320px) {
  /* line 466, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first a.cta div p.second {
    font-size: 12px;
  }
}

@media screen and (min-width: 744px) {
  /* line 404, app/assets/stylesheets/top/partials/_first_section.scss */
  #top-index main section.first a.cta {
    display: flex;
    align-items: center;
  }
}

@keyframes spTextSlide {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-60px);
  }
}

@keyframes showTextAnim {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

/* line 1, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first {
  position: relative;
  padding: 0px;
  height: 95vh;
  max-height: 600px;
  overflow: hidden;
}

@media screen and (min-width: 415px) {
  /* line 1, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first {
    background-image: url(/assets/anniv/4th/bg-f4331b52e4267131b79234a35385c9b47ebcb7ea7daee2e8a5884891d39c8126.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: none;
  }
}

@media screen and (max-width: 320px) {
  /* line 1, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first {
    max-height: 568px;
  }
}

/* line 17, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

@media screen and (min-width: 415px) {
  /* line 17, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .bg {
    display: none;
  }
}

/* line 26, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .bg.fourth {
  background: linear-gradient(136deg, #FF7067 0%, #FFCE51 101.59%);
}

/* line 29, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .bg.spring {
  opacity: 0;
  background: linear-gradient(135deg, #A2E7D6 0%, #F8D4D1 60.25%);
}

/* line 33, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .bg.summer {
  opacity: 0;
  background: linear-gradient(135deg, #BEE2F3 0%, #99E0DC 54.17%, #B4DF6D 100%);
}

/* line 37, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .bg.autumn {
  opacity: 0;
  background: linear-gradient(136deg, #D8864E 0%, #DAD8A0 101.59%);
}

/* line 41, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .bg.winter {
  opacity: 0;
  background: linear-gradient(126deg, #E1C256 11.96%, #A8CFE2 100%);
}

/* line 45, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .bg.metal {
  opacity: 0.1;
  mix-blend-mode: overlay;
  background: url(/assets/anniv/4th/metal-1cd097819db222364ee57732c65eea1d53d1e6c6ff7dbaabaca27c37e673bfab.jpg);
}

/* line 51, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .bg.gradient.active {
  -webkit-animation: blurIn 0.5s linear;
  animation: blurIn 0.5s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 58, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.tagline {
  position: absolute;
  top: 83px;
  right: 5%;
  width: 20px;
}

@media screen and (max-width: 320px) {
  /* line 58, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.tagline {
    display: none;
  }
}

@media screen and (min-width: 415px) {
  /* line 58, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.tagline {
    display: none;
  }
}

/* line 71, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.opener {
  position: absolute;
  top: 171px;
  left: 5%;
  width: 58px;
  opacity: 0;
}

/* line 78, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.opener.opening-animated.active {
  -webkit-animation: openerAnim 0.5s linear;
  animation: openerAnim 0.5s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (max-width: 320px) {
  /* line 71, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.opener {
    display: none;
  }
}

@media screen and (min-width: 744px) {
  /* line 71, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.opener {
    display: none;
  }
}

@media screen and (min-width: 415px) {
  /* line 71, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.opener {
    display: none;
  }
}

@keyframes openerAnim {
  0% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
  40% {
    opacity: 1;
    transform: translate(-10px, -10px);
  }
  100% {
    opacity: 1;
    transform: translate(10px, 10px);
  }
}

/* line 107, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.bottle {
  position: absolute;
  top: 100px;
  right: -40px;
  width: 132px;
  opacity: 0;
  -webkit-animation: bottleAnim 0.5s linear 1.5s;
  animation: bottleAnim 0.5s linear 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (max-width: 320px) {
  /* line 107, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.bottle {
    display: none;
  }
}

@media screen and (min-width: 744px) {
  /* line 107, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.bottle {
    display: none;
  }
}

@media screen and (min-width: 415px) {
  /* line 107, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.bottle {
    display: none;
  }
}

/* line 123, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.bottle.opening-animated.active {
  -webkit-animation: bottleAnim 0.5s linear;
  animation: bottleAnim 0.5s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes bottleAnim {
  0% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
  40% {
    opacity: 1;
    transform: translate(10px, -10px);
  }
  100% {
    opacity: 1;
    transform: translate(-10px, 10px);
  }
}

/* line 144, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.box {
  position: absolute;
  top: 199px;
  width: 256px;
}

@media screen and (max-width: 414px) {
  /* line 144, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.box {
    width: 270px;
  }
}

@media screen and (max-width: 743px) {
  /* line 144, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.box {
    left: 50%;
    margin-left: -160px;
  }
}

@media screen and (min-width: 744px) {
  /* line 144, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.box {
    display: none !important;
  }
}

@media screen and (min-width: 415px) {
  /* line 144, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first img.box {
    display: none !important;
  }
}

/* line 161, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.box.spring {
  display: none;
}

/* line 164, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.box.summer {
  display: none;
}

/* line 167, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.box.autumn {
  display: none;
}

/* line 170, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.box.winter {
  display: none;
}

/* line 173, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.box.active {
  display: block;
  -webkit-animation: boxAnimIn 0.3s linear;
  animation: boxAnimIn 0.3s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 177, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first img.box.inactive {
  -webkit-animation: boxAnimOut 0.3s linear;
  animation: boxAnimOut 0.3s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes boxAnimIn {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0px);
  }
}

@keyframes boxAnimOut {
  0% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
}

/* line 205, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .text-box {
  position: absolute;
  top: 82px;
  left: 5%;
  display: flex;
  flex-direction: column;
  z-index: 1;
  overflow: hidden;
}

@media screen and (min-width: 415px) {
  /* line 205, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .text-box {
    top: 50%;
    margin-top: -50px;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  }
}

/* line 218, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .text-box .text {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}

/* line 224, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .text-box .copy {
  font-size: 25px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2em;
}

/* line 232, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo {
  position: absolute;
  width: 100%;
  height: 294px;
  top: 250px;
}

@media screen and (min-width: 415px) {
  /* line 232, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .fourth-logo {
    display: none;
  }
}

@media screen and (min-width: 744px) {
  /* line 232, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .fourth-logo {
    display: none;
    width: 414px;
    right: 5%;
  }
}

/* line 246, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo img.fourth {
  position: absolute;
  top: 53px;
  left: -10px;
  width: 126px;
}

/* line 251, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo img.fourth.over {
  top: 110px;
  z-index: 1;
}

@media screen and (max-width: 320px) {
  /* line 251, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .fourth-logo img.fourth.over {
    display: none;
  }
}

/* line 259, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo img.t {
  position: absolute;
  right: 71px;
  width: 75px;
}

/* line 263, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo img.t.over {
  top: -7px;
  right: 65px;
  width: 92px;
  z-index: 1;
}

@media screen and (max-width: 320px) {
  /* line 263, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .fourth-logo img.t.over {
    display: none;
  }
}

/* line 273, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo img.h {
  position: absolute;
  top: 95px;
  right: -15px;
  width: 113px;
}

/* line 279, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo img.anniversary {
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 27px;
  opacity: 0;
}

/* line 286, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo img.anniversary.opening-animated.active {
  -webkit-animation: anniversaryAnim 0.5s linear;
  animation: anniversaryAnim 0.5s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes anniversaryAnim {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  40% {
    opacity: 1;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 306, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo img.glass {
  position: absolute;
  bottom: 20px;
  left: 5%;
  width: 65px;
  z-index: 2;
  opacity: 0;
}

@media screen and (max-width: 320px) {
  /* line 306, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .fourth-logo img.glass {
    display: none;
  }
}

@media screen and (min-width: 744px) {
  /* line 306, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .fourth-logo img.glass {
    display: none;
  }
}

@media screen and (min-width: 415px) {
  /* line 306, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .fourth-logo img.glass {
    display: none;
  }
}

/* line 323, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .fourth-logo img.glass.opening-animated.active {
  -webkit-animation: glassAnim 0.5s linear;
  animation: glassAnim 0.5s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes glassAnim {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }
  40% {
    opacity: 1;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 345, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first a.cta {
  display: none;
  position: absolute;
  width: 400px;
  background-color: #D8864E;
  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  justify-content: space-between;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
  top: 66%;
  right: 5%;
  -webkit-animation: floatAnim 0.5s linear 1.8s;
  animation: floatAnim 0.5s linear 1.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (min-width: 744px) {
  /* line 345, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first a.cta {
    display: flex;
    left: 5%;
    -webkit-animation: floatAnim 0.5s linear;
    animation: floatAnim 0.5s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
}

/* line 363, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first a.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
  transform: skewX(-35deg);
  opacity: 0;
}

/* line 374, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first a.cta:hover::before, #top-index main section.fourth_anniv_first a.cta:active::before {
  -webkit-animation: shine 1s;
  animation: shine 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes floatAnim {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(-10px);
  }
}

/* line 388, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first a.cta div {
  font-weight: 500;
}

/* line 391, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first a.cta div.text p {
  text-align: left;
}

/* line 396, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first a.cta div.price-box p {
  text-align: right;
}

/* line 400, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first a.cta div p {
  color: #ffffff;
}

/* line 402, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first a.cta div p.first {
  font-size: 10px;
  margin-bottom: 4px;
}

@media screen and (max-width: 320px) {
  /* line 402, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first a.cta div p.first {
    font-size: 8px;
  }
}

@media screen and (max-width: 320px) {
  /* line 409, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first a.cta div p.second {
    font-size: 12px;
  }
}

/* line 417, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

/* line 425, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
}

@media screen and (max-width: 743px) {
  /* line 425, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .divider svg {
    height: 25px;
  }
}

@media screen and (min-width: 744px) {
  /* line 425, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
  #top-index main section.fourth_anniv_first .divider svg {
    height: 40px;
  }
}

/* line 436, app/assets/stylesheets/top/partials/_fourth_anniv_first_section.scss */
#top-index main section.fourth_anniv_first .divider .shape-fill {
  fill: #ECEAE3;
}

/* line 1, app/assets/stylesheets/top/partials/_intro_section.scss */
#top-index main section.intro {
  position: relative;
  background-color: #ECEAE3;
  background-image: url(/assets/top/bottles-4cb4b8dae3980d2737e46bb8f0f7e2dbfa7aabf2ef9e16716a08aa2d26186e33.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 200%;
  padding-bottom: 60%;
}

/* line 10, app/assets/stylesheets/top/partials/_intro_section.scss */
#top-index main section.intro .section-text {
  max-width: 350px;
  font-size: 14px;
  text-align: center;
  color: #474d50;
  line-height: 24px;
  margin: 40px auto 0;
}

/* line 19, app/assets/stylesheets/top/partials/_intro_section.scss */
#top-index main section.intro .gradient-tail {
  width: 100%;
  height: 37px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(242, 242, 242, 0) 0%, #ECEAE3 95.31%);
}

@media screen and (min-width: 744px) {
  /* line 1, app/assets/stylesheets/top/partials/_intro_section.scss */
  #top-index main section.intro {
    padding: 10% 0 15% 0;
    background-size: 55%;
    background-position: bottom right -15%;
  }
  /* line 33, app/assets/stylesheets/top/partials/_intro_section.scss */
  #top-index main section.intro .intro-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 0 10%;
  }
  /* line 39, app/assets/stylesheets/top/partials/_intro_section.scss */
  #top-index main section.intro .intro-container .section-title {
    text-align: left;
  }
  /* line 43, app/assets/stylesheets/top/partials/_intro_section.scss */
  #top-index main section.intro .intro-container .section-text {
    text-align: left;
  }
}

/* line 2, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.news-zone {
  background-color: #f2f2f2;
  padding-top: 80px !important;
}

/* line 5, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.news-zone p.news-title {
  font-family: HiraginoSans-W6;
  font-size: 14px;
  text-decoration: underline;
  margin: 0 0 16px 0;
}

/* line 11, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.news-zone .scroll {
  justify-content: flex-start;
  overflow-y: hidden;
  display: flex;
  -webkit-overflow-scrolling: touch;
}

/* line 16, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.news-zone .scroll .news {
  width: 168px;
  min-width: 168px;
  height: 164px;
  border: solid 1px #979797;
  background-color: #ffffff;
  margin: 0 6px 0 0;
}

/* line 23, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.news-zone .scroll .news img {
  width: 100%;
}

/* line 26, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.news-zone .scroll .news div {
  width: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
  text-align: justify;
}

/* line 31, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.news-zone .scroll .news div a {
  font-family: HiraKakuPro-W6;
  font-size: 12px;
  line-height: 1.5;
  text-decoration: underline;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}

/* line 39, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.news-zone .scroll .news div a.line-2 {
  padding-top: 8px;
}

/* line 42, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.news-zone .scroll .news div a:hover {
  text-decoration: none;
}

@media screen and (min-width: 744px) {
  /* line 50, app/assets/stylesheets/top/partials/_news_section.scss */
  #top-index main section.news-zone p.news-title {
    font-size: 14px;
  }
  /* line 54, app/assets/stylesheets/top/partials/_news_section.scss */
  #top-index main section.news-zone .scroll .news {
    width: 200px;
    min-width: 200px;
    height: 190px;
  }
  /* line 59, app/assets/stylesheets/top/partials/_news_section.scss */
  #top-index main section.news-zone .scroll .news div a {
    font-size: 14px;
  }
}

/* line 68, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone {
  background-color: #f2f2f2;
  padding: 36px 5% 27px;
  margin: 0;
}

/* line 72, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .media-title {
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  margin: 0 0 16px 0;
}

/* line 78, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .media-logo-container {
  background-color: #ffffff;
  padding: 32px 0;
  margin: 0 auto 48px;
}

/* line 83, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .logo-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* line 88, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .logo-list li {
  list-style: none;
}

/* line 91, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .logo-list img {
  box-sizing: border-box;
  width: 96px;
  height: 55px;
  padding: 5px;
  object-fit: contain;
}

/* line 99, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .media-news-container {
  background-color: #ffffff;
  padding: 16px 16px;
  margin: 0;
}

/* line 104, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .news-list {
  height: 450px;
  overflow-y: scroll;
}

/* line 107, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .news-list li {
  list-style: none;
  font-size: 12px;
}

/* line 111, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .news-list a {
  display: block;
  border-bottom: solid 1px #e6e6e6;
  padding: 16px 0;
}

/* line 115, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .news-list a.first {
  padding-top: 0;
}

/* line 118, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .news-list a.last {
  border: none;
}

/* line 122, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .news-list small {
  display: inline-block;
  font-weight: bold;
  color: #ababab;
  margin-bottom: 8px;
}

/* line 128, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.media-zone .news-list h4 {
  line-height: 1.5;
}

@media screen and (min-width: 744px) {
  /* line 134, app/assets/stylesheets/top/partials/_news_section.scss */
  #top-index main section.media-zone .logo-list {
    max-width: 90%;
    margin: 0 auto;
  }
  /* line 137, app/assets/stylesheets/top/partials/_news_section.scss */
  #top-index main section.media-zone .logo-list img {
    width: 150px;
    height: 70px;
    padding: 10px;
  }
  /* line 143, app/assets/stylesheets/top/partials/_news_section.scss */
  #top-index main section.media-zone .media-news-container {
    padding: 32px;
    margin: 0 auto;
  }
}

/* line 150, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone {
  background-color: #f2f2f2;
  padding: 36px 5% 64px;
}

/* line 153, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone .press-title {
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  margin: 0 0 16px 0;
}

/* line 159, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone .press-news-container {
  background-color: #ffffff;
  padding: 16px 16px;
}

/* line 163, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone .news-list {
  height: 450px;
  overflow-y: scroll;
}

/* line 166, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone .news-list li {
  list-style: none;
  font-size: 12px;
}

/* line 170, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone .news-list a {
  display: block;
  border-bottom: solid 1px #e6e6e6;
  padding: 16px 0;
}

/* line 174, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone .news-list a.first {
  padding-top: 0;
}

/* line 177, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone .news-list a.last {
  border: none;
}

/* line 181, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone .news-list small {
  display: inline-block;
  font-weight: bold;
  color: #ababab;
  margin-bottom: 8px;
}

/* line 187, app/assets/stylesheets/top/partials/_news_section.scss */
#top-index main section.press-release-zone .news-list h4 {
  line-height: 1.5;
}

@media screen and (min-width: 744px) {
  /* line 193, app/assets/stylesheets/top/partials/_news_section.scss */
  #top-index main section.press-release-zone .press-news-container {
    padding: 32px;
    margin: 0 auto;
  }
}

/* line 1, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan {
  position: relative;
  z-index: 2;
  background: #ffffff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  width: 90%;
  max-width: 410px;
  margin: -60px auto 0;
  box-sizing: border-box;
  padding: 0px 0px 40px;
  overflow: hidden;
}

@media screen and (min-width: 744px) {
  /* line 1, app/assets/stylesheets/top/partials/_plan_section.scss */
  #top-index main section.plan {
    padding-top: 40px;
  }
}

@media screen and (min-width: 744px) {
  /* line 17, app/assets/stylesheets/top/partials/_plan_section.scss */
  #top-index main section.plan .plan-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* line 25, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content {
  padding: 0 20px;
}

/* line 27, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

/* line 32, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price .title p {
  font-weight: 700;
  color: #474d50;
}

/* line 35, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price .title p:first-child {
  font-size: 16px;
}

/* line 38, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price .title p:last-child {
  margin-top: 9px;
  font-size: 12px;
  color: #D8864E;
}

/* line 47, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price .price p {
  font-weight: 500;
  color: #474d50;
  text-align: right;
}

/* line 51, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price .price p.label {
  font-size: 12px;
  line-height: 16px;
}

/* line 55, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price .price p.first {
  font-size: 18px;
  margin-top: 4px;
  color: #BC2A21;
}

/* line 60, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price .price p.second {
  margin-top: 4px;
  font-size: 18px;
}

/* line 64, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price .price p .strike {
  font-size: 12px;
  text-decoration: line-through;
  color: #BC2A21;
}

/* line 69, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .title-price .price p .limit {
  font-size: 12px;
}

/* line 77, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .detail {
  margin: 16px auto 0;
  border-radius: 4px;
  list-style: none;
  padding: 16px 16px;
  background: #ECEAE3;
  box-sizing: border-box;
}

/* line 84, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .detail li {
  display: flex;
  gap: 0 16px;
  align-items: center;
}

/* line 88, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .detail li:last-child {
  margin-top: 16px;
}

/* line 91, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .detail li p {
  min-width: 56px;
  color: #474d50;
  font-size: 14px;
}

/* line 95, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .detail li p:first-child {
  font-weight: 500;
}

@media screen and (max-width: 414px) {
  /* line 91, app/assets/stylesheets/top/partials/_plan_section.scss */
  #top-index main section.plan .content .detail li p {
    font-size: 13px;
  }
}

/* line 101, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .detail li p span {
  font-size: 12px;
}

/* line 105, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .detail li img {
  width: 109px;
}

/* line 111, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .expiration {
  text-align: center;
  font-size: 14px;
  color: #474d50;
  margin-top: 20px;
  line-height: 24px;
}

/* line 117, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .expiration .accent {
  font-size: 16px;
  color: #D8864E;
  font-weight: 700;
}

/* line 122, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .expiration .bold {
  font-weight: 700;
}

/* line 127, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .attention {
  margin-top: 20px;
  font-size: 11px;
  color: #474d50;
  line-height: 20px;
}

/* line 132, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .content .attention span {
  color: #BC2A21;
  font-weight: 700;
}

/* line 139, app/assets/stylesheets/top/partials/_plan_section.scss */
#top-index main section.plan .button {
  width: calc(100% - 40px);
  margin: 20px auto 0;
}

/* line 1, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section {
  background-color: #ECEAE3;
}

/* line 3, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .button {
  margin-top: 32px;
}

@media screen and (min-width: 744px) {
  /* line 3, app/assets/stylesheets/top/partials/_point_section.scss */
  #top-index main section.point-section .button {
    max-width: 940px;
    margin: 32px auto 0;
  }
}

/* line 11, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .point .image-box {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

/* line 16, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .point .image-box::before {
  display: block;
  content: "";
  position: absolute;
  width: calc(100% - 90px);
  height: calc(100% - 90px);
  border-radius: 125px;
  background: linear-gradient(136deg, #D8864E 0%, #DAD8A0 101.59%);
  top: 50%;
  left: 50%;
  margin: calc((100% - 90px) / -2 + 30px) 0 0 calc((100% - 90px) / -2 + 20px);
  -webkit-animation: rotateAnim 6s linear infinite;
  animation: rotateAnim 6s linear infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes rotateAnim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* line 37, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .point .image-box .point-image {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  margin-top: 42px;
}

@media screen and (min-width: 744px) {
  /* line 37, app/assets/stylesheets/top/partials/_point_section.scss */
  #top-index main section.point-section .point .image-box .point-image {
    margin: 0;
  }
}

/* line 50, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .point .point-box p {
  color: #474d50;
  text-align: center;
}

/* line 53, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .point .point-box p.point-decoration {
  background-color: #E1C256;
  font-weight: 700;
  font-size: 18px;
  width: 206px;
  height: 40px;
  line-height: 40px;
  color: #ffffff;
  border-radius: 20px;
  margin: 32px auto 16px;
}

@media screen and (min-width: 744px) {
  /* line 53, app/assets/stylesheets/top/partials/_point_section.scss */
  #top-index main section.point-section .point .point-box p.point-decoration {
    margin: 0 0 32px 0;
  }
}

/* line 67, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .point .point-box p.point-title {
  max-width: 410px;
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
  margin: 0 auto 32px;
}

@media screen and (min-width: 744px) {
  /* line 67, app/assets/stylesheets/top/partials/_point_section.scss */
  #top-index main section.point-section .point .point-box p.point-title {
    text-align: left;
    margin: 0 0 32px 0;
  }
}

/* line 77, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .point .point-box p.point-title span {
  color: #D8864E;
}

/* line 81, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .point .point-box p.point-text {
  font-size: 14px;
  line-height: 20px;
  max-width: 350px;
  margin: 0 auto;
}

@media screen and (min-width: 744px) {
  /* line 81, app/assets/stylesheets/top/partials/_point_section.scss */
  #top-index main section.point-section .point .point-box p.point-text {
    text-align: left;
    max-width: 520px;
    margin: 0;
  }
}

/* line 91, app/assets/stylesheets/top/partials/_point_section.scss */
#top-index main section.point-section .point .point-box p.point-text span {
  font-weight: 700;
  color: #D8864E;
}

@media screen and (min-width: 744px) {
  /* line 10, app/assets/stylesheets/top/partials/_point_section.scss */
  #top-index main section.point-section .point {
    display: flex;
    max-width: 940px;
    margin: 96px auto 96px;
    align-items: center;
  }
  /* line 104, app/assets/stylesheets/top/partials/_point_section.scss */
  #top-index main section.point-section .point.right {
    flex-direction: row-reverse;
  }
}

/* line 1, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa {
  max-width: 700px;
  margin: 40px auto 0;
  background-color: #ECEAE3;
}

/* line 5, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa .button {
  margin-top: 40px;
}

/* line 8, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul {
  list-style: none;
}

/* line 10, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li {
  padding-bottom: 20px;
  border-bottom: 1px solid #C7CDCE;
  margin-bottom: 20px;
}

/* line 14, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li:last-child {
  margin-bottom: 0px;
  border: none;
}

/* line 18, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .question {
  display: flex;
  cursor: pointer;
}

/* line 21, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .question .mark {
  width: 34px;
  height: 34px;
  background-color: #E8A519;
  color: #ffffff;
  font-family: "Barlow", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  line-height: 34px;
  border-radius: 17px;
  margin-right: 12px;
  text-align: center;
}

/* line 35, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .question .question-title {
  width: calc(100% - 68px);
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: #474d50;
  margin: 4px 16px 0 0;
}

/* line 43, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .question img {
  width: 34px;
  height: 34px;
  transform: rotate(180deg);
}

/* line 47, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .question img.active {
  transform: rotate(0deg);
}

/* line 52, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .answer-box {
  overflow: hidden;
  will-change: transform;
  max-height: 0px;
  margin-top: 0px;
  opacity: 0;
}

/* line 58, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .answer-box .answer {
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 20px;
  font-size: 14px;
  line-height: 20px;
  padding: 20px;
}

/* line 65, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .answer-box .answer span {
  color: #BC2A21;
  font-weight: 500;
}

/* line 69, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .answer-box .answer a {
  text-decoration: underline;
  font-weight: 500;
  color: #D8864E;
}

/* line 76, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .answer-box.active {
  -webkit-animation: answerShowAnim linear forwards 0.5s;
  animation: answerShowAnim linear forwards 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes answerShowAnim {
  0% {
    margin-top: 0px;
    max-height: 0px;
    opacity: 0;
  }
  100% {
    margin-top: 16px;
    max-height: 9999px;
    opacity: 1;
  }
}

/* line 91, app/assets/stylesheets/top/partials/_qa_section.scss */
#top-index main section.qa ul li .answer-box.inactive {
  -webkit-animation: answerHideAnim linear forwards 0.5s;
  animation: answerHideAnim linear forwards 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes answerHideAnim {
  0% {
    margin-top: 16px;
    height: auto;
  }
  100% {
    margin-top: 0px;
    height: 0px;
  }
}

/* line 1, app/assets/stylesheets/top/partials/_sns_section.scss */
#top-index main section.sns {
  max-width: 350px;
  margin: -100px auto 0;
}

/* line 4, app/assets/stylesheets/top/partials/_sns_section.scss */
#top-index main section.sns .button {
  display: flex;
  margin-top: 40px;
  gap: 0 12px;
  line-height: 44px;
}

/* line 8, app/assets/stylesheets/top/partials/_sns_section.scss */
#top-index main section.sns .button:last-child {
  margin-top: 20px;
}

/* line 11, app/assets/stylesheets/top/partials/_sns_section.scss */
#top-index main section.sns .button img {
  width: 44px;
  margin-left: calc((100% - 196px - 44px - 12px)/2);
}

/* line 17, app/assets/stylesheets/top/partials/_sns_section.scss */
#top-index main section.sns .text {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #474d50;
}

/* line 1, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage {
  margin-top: -50px;
}

/* line 3, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage .intro-text {
  font-size: 14px;
  text-align: center;
  color: #474d50;
  line-height: 20px;
}

@media screen and (min-width: 744px) {
  /* line 10, app/assets/stylesheets/top/partials/_usage_section.scss */
  #top-index main section.usage .usage-box {
    max-width: 798px;
    margin: 0 auto;
    display: flex;
    gap: 0 4%;
  }
}

/* line 17, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage .usage-box .usage-step-box {
  margin-top: 56px;
}

@media screen and (min-width: 744px) {
  /* line 17, app/assets/stylesheets/top/partials/_usage_section.scss */
  #top-index main section.usage .usage-box .usage-step-box {
    max-width: 350px;
  }
}

/* line 22, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage .usage-box .usage-step-box .usage-step {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

/* line 27, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage .usage-box .usage-step-box .usage-step:last-child {
  margin-bottom: 0px;
}

/* line 30, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage .usage-box .usage-step-box .usage-step img {
  width: 140px;
  margin-right: 16px;
}

/* line 34, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage .usage-box .usage-step-box .usage-step .usage-title {
  font-size: 16px;
  font-weight: 500;
  color: #474d50;
  margin-bottom: 8px;
}

/* line 40, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage .usage-box .usage-step-box .usage-step .usage-text {
  font-size: 14px;
  color: #474d50;
  line-height: 20px;
}

/* line 48, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage .usage-box .usage-cycle {
  margin-top: 56px;
  padding: 30px 23px;
  border-radius: 20px;
  background: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 57, app/assets/stylesheets/top/partials/_usage_section.scss */
#top-index main section.usage .usage-box .usage-cycle img {
  width: 100%;
  max-width: 298px;
}

/* line 109, app/assets/stylesheets/top/index.scss */
#top-index .active.fade-up {
  -webkit-animation: fadeUp 1s linear forwards;
  animation: fadeUp 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 125, app/assets/stylesheets/top/index.scss */
#top-index .active.fade-left-in {
  -webkit-animation: fadeLeftIn 1s linear forwards;
  animation: fadeLeftIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 141, app/assets/stylesheets/top/index.scss */
#top-index .active.fade-right-in {
  -webkit-animation: fadeRightIn 1s linear forwards;
  animation: fadeRightIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 159, app/assets/stylesheets/top/index.scss */
#top-index .animated {
  opacity: 0;
}

/* line 1, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body {
  overflow-x: hidden;
  background-color: #ECEAE3;
}

/* line 5, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body .sp {
  display: none;
}

@media screen and (max-width: 743px) {
  /* line 5, app/assets/stylesheets/jbo/article.scss */
  #jbo-article-body .sp {
    display: block;
  }
}

@media screen and (min-width: 415px) {
  /* line 5, app/assets/stylesheets/jbo/article.scss */
  #jbo-article-body .sp {
    display: none;
  }
}

/* line 15, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body .other {
  display: none;
}

@media screen and (min-width: 415px) {
  /* line 15, app/assets/stylesheets/jbo/article.scss */
  #jbo-article-body .other {
    display: block;
  }
}

/* line 22, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main {
  margin: 0 auto;
  padding-bottom: 60px;
}

/* line 25, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section {
  width: 90%;
  max-width: 620px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 30, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.top {
  margin-top: 125px;
  position: relative;
}

/* line 34, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.top .article-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
}

/* line 39, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.top .article-header .logo {
  width: 83px;
}

/* line 42, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.top .article-header .copy {
  width: 195px;
  height: 32px;
}

/* line 47, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.top img {
  width: 100%;
  margin-top: -8px;
}

/* line 53, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.about {
  margin-top: 32px;
  padding: 20px;
  background-color: #C7CDCE;
  border-radius: 8px;
}

/* line 59, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.about img {
  width: 166px;
  margin-bottom: 12px;
}

/* line 64, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.about p {
  font-size: 12px;
  line-height: 22px;
  color: #474d50;
}

/* line 71, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content {
  margin-top: 32px;
}

/* line 73, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content h1, #jbo-article-body main section.content h2 {
  margin-top: 40px;
  color: #222222;
  font-weight: 900;
  line-height: 30px;
  font-size: 20px;
}

/* line 80, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  margin-top: 36px;
}

/* line 86, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  margin-top: 36px;
  margin-bottom: -12px;
}

/* line 93, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content img {
  margin-top: 40px;
  width: 100%;
  border-radius: 20px;
}

/* line 97, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content img.no-radius {
  border-radius: 0px;
}

/* line 101, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content blockquote {
  position: relative;
  padding: 10px 15px 10px 50px;
  box-sizing: border-box;
  font-style: italic;
  background: #f2f2f2;
  font-size: 14px;
  margin: 32px 0 -24px 0;
  color: #474d50;
}

/* line 110, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content blockquote:before {
  display: block;
  position: absolute;
  content: "“";
  top: 0;
  left: 8px;
  font-family: sans-serif;
  color: #C7CDCE;
  font-size: 70px;
  line-height: 1;
}

/* line 121, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content blockquote cite {
  display: block;
  text-align: right;
  color: #474d50;
  font-size: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #C7CDCE;
}

/* line 129, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content blockquote cite a {
  color: #474d50;
}

/* line 134, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content figcaption {
  text-align: right;
  font-size: 12px;
  line-height: 16px;
  color: #474d50;
  margin-top: 4px;
}

/* line 140, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content figcaption a {
  color: #D8864E;
  text-decoration: underline;
}

/* line 145, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content p {
  margin-top: 32px;
  color: #222222;
  line-height: 26px;
  font-size: 14px;
}

/* line 151, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content p.interviewer {
  color: #566774;
}

/* line 155, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content p.thanks {
  text-align: right;
}

/* line 158, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content p a {
  color: #D8864E;
  text-decoration: underline;
}

/* line 161, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content p a:hover, #jbo-article-body main section.content p a:active {
  text-decoration: none;
}

/* line 165, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.content p span {
  font-weight: 700;
}

/* line 171, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.cta {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 24px 0;
  margin-top: 40px;
}

/* line 177, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.cta p {
  font-weight: 900;
  font-size: 14px;
  color: #222222;
  text-align: center;
}

/* line 184, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.cta img {
  display: block;
  width: 100%;
  max-width: 288px;
  margin: 24px auto 0;
}

/* line 191, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body main section.cta a {
  max-width: 295px;
  margin: 32px auto 0;
}

/* line 201, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body .active.fade-up {
  -webkit-animation: fadeUp 1s linear forwards;
  animation: fadeUp 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 217, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body .active.fade-left-in {
  -webkit-animation: fadeLeftIn 1s linear forwards;
  animation: fadeLeftIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 233, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body .active.fade-right-in {
  -webkit-animation: fadeRightIn 1s linear forwards;
  animation: fadeRightIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 251, app/assets/stylesheets/jbo/article.scss */
#jbo-article-body .animated {
  opacity: 0;
}

/* line 1, app/assets/stylesheets/jbo/index.scss */
#jbo-body {
  overflow-x: hidden;
  background-color: #ECEAE3;
}

/* line 5, app/assets/stylesheets/jbo/index.scss */
#jbo-body main {
  margin: 0 auto;
}

/* line 7, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section {
  width: 100%;
  max-width: 415px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 5%;
}

/* line 14, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.full {
  padding: 0px;
  max-width: none;
}

/* line 19, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top {
  position: relative;
  height: 650px;
  background: linear-gradient(125.74deg, #EFC5C1 11.96%, #ECE6C8 55.06%, #C6E0EB 100%);
  background-size: 200%;
  padding-top: 84px;
  -webkit-animation: jboGradientAnim 10s infinite;
  animation: jboGradientAnim 10s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (min-width: 744px) {
  /* line 19, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.top {
    padding-bottom: 100px;
  }
}

@keyframes jboGradientAnim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* line 41, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .top-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* line 47, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .bg-text {
  position: absolute;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  color: #ffffff;
  text-align: center;
  width: 90%;
  left: 5%;
}

@media screen and (min-width: 744px) {
  /* line 47, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.top .bg-text {
    text-align: left;
  }
}

/* line 57, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .bg-text.small {
  margin-top: 102px;
  font-size: 28px;
  letter-spacing: 0.12em;
}

/* line 62, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .bg-text.large {
  margin-top: 138px;
  font-size: 55px;
  line-height: 84px;
  letter-spacing: 0.06em;
}

/* line 71, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .main-slider .bottle {
  display: block;
  margin: 0 auto;
  width: 189px;
}

/* line 75, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .main-slider .bottle.active {
  -webkit-animation: rotateBottle 0.5s linear forwards;
  animation: rotateBottle 0.5s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes rotateBottle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

/* line 86, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .main-slider .bottle.deactive {
  -webkit-animation: rotateReverseBottle 0.2s linear forwards;
  animation: rotateReverseBottle 0.2s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes rotateReverseBottle {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* line 100, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .text-slider {
  margin: -20px auto 0;
  max-width: 400px;
}

/* line 103, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .text-slider .text {
  opacity: 0;
}

/* line 105, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .text-slider .text.active {
  -webkit-animation: blurIn 0.5s linear forwards;
  animation: blurIn 0.5s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 108, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .text-slider .text p {
  margin: 0 auto;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 26px;
  width: 220px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* line 121, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .text-slider .slick-next {
  right: 20px;
  width: 30px;
  height: 30px;
}

/* line 125, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .text-slider .slick-next::before {
  color: #222222;
}

/* line 129, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .text-slider .slick-prev {
  z-index: 2;
  left: 20px;
  width: 30px;
  height: 30px;
}

/* line 134, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .text-slider .slick-prev::before {
  color: #222222;
}

/* line 140, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .wave-box {
  position: absolute;
  width: 80%;
  left: 10%;
  top: 35%;
}

@media screen and (max-width: 743px) {
  /* line 147, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.top .wave-box.active .wave {
    -webkit-animation: wave 3s forwards;
    animation: wave 3s forwards;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  @keyframes wave {
    0% {
      transform: scale(0);
      box-shadow: 0 0 100px inset #ffffff;
      opacity: 1;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
}

/* line 164, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .wave-box .wave {
  position: absolute;
  width: 100%;
  padding-top: 100%;
  border: solid thin #ffffff;
  border-radius: 50%;
  opacity: 0;
  margin-top: -15%;
}

/* line 172, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .wave-box .wave.layer1 {
  animation-delay: 0.4s;
}

/* line 178, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .number {
  position: absolute;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 55px;
  color: #ffffff;
  letter-spacing: 0.06em;
  right: 5%;
  top: 410px;
}

/* line 186, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .number.active {
  -webkit-animation: blurIn 0.2s linear forwards;
  animation: blurIn 0.2s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 189, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .number.deactive {
  -webkit-animation: blurOut 0.2s linear forwards;
  animation: blurOut 0.2s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 194, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .next-pop {
  position: absolute;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  left: 5%;
  top: 390px;
  background: #BC2A21;
  border-radius: 40px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-align: center;
  padding-top: 20px;
}

/* line 210, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .next-pop.active {
  -webkit-animation: scaleIn 0.6s linear forwards;
  animation: scaleIn 0.6s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 213, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .next-pop.deactive {
  -webkit-animation: scaleOut 0.4s linear forwards;
  animation: scaleOut 0.4s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (min-width: 744px) {
  /* line 194, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.top .next-pop {
    right: 150px;
    top: 80px;
    left: auto;
  }
}

/* line 223, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .copy {
  position: absolute;
  top: 30px;
  right: 5%;
  width: 31px;
  z-index: 2;
}

/* line 231, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

/* line 239, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
}

@media screen and (max-width: 743px) {
  /* line 239, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.top .divider svg {
    height: 25px;
  }
}

@media screen and (min-width: 744px) {
  /* line 239, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.top .divider svg {
    height: 40px;
  }
}

/* line 250, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.top .divider .shape-fill {
  fill: #ECEAE3;
}

/* line 256, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.intro {
  margin-top: 60px;
}

/* line 258, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.intro .symbol {
  display: block;
  width: 120px;
  margin: 0 auto;
}

/* line 263, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.intro h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.04em;
  text-align: center;
  width: 303px;
  margin: 30px auto 0;
}

/* line 271, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.intro h2 span {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.06em;
}

/* line 277, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.intro p {
  width: 303px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.04em;
}

/* line 287, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide {
  margin-top: 80px;
}

/* line 289, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .eyecatch {
  position: relative;
}

/* line 291, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .eyecatch .guide-image {
  width: 100%;
}

@media screen and (max-width: 743px) {
  /* line 294, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.guide .eyecatch .guide-image.sp {
    display: block;
  }
  /* line 297, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.guide .eyecatch .guide-image.tablet {
    display: none;
  }
}

@media screen and (min-width: 415px) {
  /* line 302, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.guide .eyecatch .guide-image.sp {
    display: none;
  }
  /* line 305, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.guide .eyecatch .guide-image.tablet {
    width: 90%;
    max-width: 620px;
    border-radius: 10px;
    margin: 0 auto;
    display: block;
  }
}

/* line 314, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .eyecatch .guide-logo {
  position: absolute;
  width: 82px;
  bottom: 60%;
  left: 50%;
  margin-left: -41px;
}

/* line 321, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .eyecatch h2 {
  position: absolute;
  bottom: 22%;
  left: 50%;
  margin-left: -122px;
  width: 244px;
  color: #ffffff;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* line 335, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles {
  list-style: none;
  margin: -30px auto 60px;
}

/* line 338, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles .slick-next {
  right: 20px;
  width: 30px;
  height: 30px;
}

/* line 342, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles .slick-next::before {
  color: #222222;
}

/* line 346, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles .slick-prev {
  z-index: 2;
  left: 20px;
  width: 30px;
  height: 30px;
}

/* line 351, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles .slick-prev::before {
  color: #222222;
}

/* line 355, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles li {
  width: 292px;
  margin: 0 10px;
}

/* line 358, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles li a {
  border-radius: 10px;
  background: #ffffff;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
}

/* line 365, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles li a:hover {
  -webkit-animation: boxShadowScale 0.4s forwards;
  animation: boxShadowScale 0.4s forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes boxShadowScale {
  0% {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  }
  100% {
    box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
  }
}

/* line 375, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles li a:hover p {
  color: #D8864E;
}

/* line 380, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles li img {
  width: 100%;
}

/* line 383, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles li .content {
  padding: 16px;
}

/* line 385, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles li .content .brand {
  font-size: 12px;
}

/* line 388, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles li .content .title {
  margin-top: 8px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.04em;
}

/* line 395, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.guide .articles li .content .date {
  margin-top: 8px;
  font-size: 12px;
  text-align: right;
}

/* line 405, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.content {
  position: relative;
  margin-top: 80px;
}

/* line 408, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.content h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* line 415, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.content ul {
  overflow-x: scroll;
  overflow-y: hidden;
  list-style: none;
  margin: 30px auto 0;
  display: flex;
  padding-left: 5%;
  column-gap: 20px;
  padding-bottom: 10px;
}

/* line 416, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.content ul::-webkit-scrollbar {
  display: none;
}

/* line 427, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.content ul li {
  min-width: 250px;
}

/* line 429, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.content ul li img {
  width: 100%;
  max-width: 250px;
}

/* line 437, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice {
  position: relative;
  background: linear-gradient(125.74deg, #EFC5C1 11.96%, #C6E0EB 100%);
  margin: 80px 0;
  padding: 80px 0;
}

/* line 442, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice .divider {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

/* line 444, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice .divider.top {
  top: 0;
}

/* line 447, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice .divider.bottom {
  transform: rotate(180deg);
  bottom: 0;
}

/* line 455, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice .divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
}

@media screen and (max-width: 743px) {
  /* line 455, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.voice .divider svg {
    height: 25px;
  }
}

@media screen and (min-width: 415px) {
  /* line 455, app/assets/stylesheets/jbo/index.scss */
  #jbo-body main section.voice .divider svg {
    height: 40px;
  }
}

/* line 466, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice .divider .shape-fill {
  fill: #ECEAE3;
}

/* line 470, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.04em;
  text-align: center;
}

/* line 477, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice ul {
  margin-top: 40px;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  column-gap: 16px;
  row-gap: 16px;
  padding: 0 5%;
  flex-wrap: wrap;
  flex-direction: column;
  height: 400px;
  overflow-x: scroll;
}

/* line 490, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice ul::-webkit-scrollbar {
  display: none;
}

/* line 493, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice ul li {
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  min-width: 220px;
  max-width: 220px;
}

/* line 500, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice ul li .name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 21px;
}

/* line 506, app/assets/stylesheets/jbo/index.scss */
#jbo-body main section.voice ul li .comment {
  margin-top: 16px;
  font-size: 12px;
  line-height: 18px;
}

/* line 520, app/assets/stylesheets/jbo/index.scss */
#jbo-body .active.fade-up {
  -webkit-animation: fadeUp 1s linear forwards;
  animation: fadeUp 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 536, app/assets/stylesheets/jbo/index.scss */
#jbo-body .active.fade-left-in {
  -webkit-animation: fadeLeftIn 1s linear forwards;
  animation: fadeLeftIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 552, app/assets/stylesheets/jbo/index.scss */
#jbo-body .active.fade-right-in {
  -webkit-animation: fadeRightIn 1s linear forwards;
  animation: fadeRightIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 570, app/assets/stylesheets/jbo/index.scss */
#jbo-body .animated {
  opacity: 0;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index {
  width: 100%;
  background: #474d50;
  overflow-x: hidden;
}

/* line 7, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index h1, #anniv-index h2, #anniv-index p {
  color: #222222;
  letter-spacing: 0.04em;
}

/* line 12, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index .button {
  box-shadow: rgba(101, 101, 101, 0.5) 0 0 6px;
}

/* line 15, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index .share-footer {
  margin-top: -340px;
  z-index: 3;
}

/* line 19, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main {
  width: 100%;
  max-width: 580px;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #ECEAE3;
  padding-bottom: 400px;
  overflow: hidden;
}

/* line 28, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main img.section-header {
  display: block;
  width: 100%;
}

/* line 31, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main img.section-header.over {
  margin-top: -10%;
}

/* line 35, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section {
  box-sizing: border-box;
}

/* line 37, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .section-title {
  box-sizing: border-box;
  position: relative;
  padding: 24px 20px;
  width: 85%;
  z-index: 1;
}

/* line 43, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .section-title.left {
  left: 0;
  border-radius: 0px 20px 0px 0px;
}

/* line 47, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .section-title.right {
  margin-left: 15%;
  border-radius: 20px 0px 0px 0px;
}

/* line 51, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .section-title.cream-green {
  background-color: #DAD8A0;
}

/* line 54, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .section-title.red-clay {
  background-color: #D8864E;
}

/* line 57, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .section-title.blue-gray {
  background-color: #566774;
}

/* line 60, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .section-title .en {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 40px;
  line-height: 42px;
  margin-bottom: 8px;
  color: #ffffff;
}

/* line 67, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .section-title h1, #anniv-index main section .section-title h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: #ffffff;
}

/* line 74, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section span.accent {
  font-weight: 700;
  background-color: #DAD8A0;
}

/* line 78, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section p.content {
  position: relative;
  box-sizing: border-box;
  width: 90%;
  font-size: 14px;
  line-height: 28px;
  padding: 110px 20px 40px;
  background: #ffffff;
  margin-top: -80px;
}

/* line 87, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section p.content.left {
  border-radius: 0px 0px 20px 0px;
}

/* line 90, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section p.content.right {
  margin-left: 10%;
  border-radius: 0px 0px 0px 20px;
}

/* line 94, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section p.content .button {
  margin-top: 32px;
}

/* line 98, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .buttons {
  width: 90%;
  margin: 16px auto 0;
}

/* line 101, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section .buttons .button {
  height: 52px;
  line-height: 18px;
  padding-top: 8px;
  margin-bottom: 12px;
}

/* line 109, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.top .main {
  width: 100vw;
  height: 100vw;
  max-width: 580px;
  max-height: 580px;
  background-image: url(/assets/anniv/4th/anniv_top-ae5470c350af9d84d09cfb6720c7e96b7eb61b70f898023aceb4fd059f658034.jpg);
  background-size: cover;
}

/* line 117, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.top .text {
  margin: -70px 0 0 20px;
}

/* line 119, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.top .text h1 {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #ffffff;
  font-size: 38px;
  line-height: 46px;
  padding: 0 8px;
  display: inline;
  background: linear-gradient(transparent 0%, #566774 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* line 130, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.top .text p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #566774;
  font-size: 20px;
  line-height: 24px;
  margin-top: 12px;
}

/* line 140, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.intro {
  margin-top: 80px;
  width: 100%;
}

/* line 144, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.vote {
  margin-top: 80px;
}

/* line 147, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.prize {
  margin-top: 80px;
}

/* line 150, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.concept {
  margin-top: 80px;
}

/* line 153, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.schedule {
  margin-top: 80px;
}

/* line 155, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main section.schedule img {
  display: block;
  width: 100%;
  max-width: 330px;
  margin-top: 40px;
}

/* line 163, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main .cta {
  z-index: 100;
  box-sizing: border-box;
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 522px;
  min-width: 288px;
  height: 94px;
  padding: 0 12px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  background-color: #566774;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.4));
}

/* line 181, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main .cta .text-box {
  flex: 0 0 auto;
}

/* line 184, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main .cta .image-box {
  flex: 0 1 auto;
  align-self: center;
}

/* line 188, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main .cta .pr {
  font-weight: 900;
  font-size: 10px;
  padding: 3px 5px;
  background-color: #ffffff;
  color: #566774;
  border-radius: 10px;
  margin-top: 14px;
}

/* line 197, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main .cta .action-text {
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  margin-top: 10px;
}

/* line 203, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main .cta .price {
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  margin-top: 6px;
}

/* line 209, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index main .cta img {
  max-height: 72px;
  max-width: 84px;
  width: 100%;
}

/* line 222, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index .active.fade-up {
  -webkit-animation: fadeUp 1s linear forwards;
  animation: fadeUp 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 238, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index .active.fade-left-in {
  -webkit-animation: fadeLeftIn 1s linear forwards;
  animation: fadeLeftIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 254, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index .active.fade-right-in {
  -webkit-animation: fadeRightIn 1s linear forwards;
  animation: fadeRightIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 270, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index .active.fade-down-in {
  -webkit-animation: fadeDownIn 1s linear forwards;
  animation: fadeDownIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeDownIn {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 288, app/assets/stylesheets/campaign/anniversary/index.scss */
#anniv-index .animated {
  opacity: 0;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index {
  width: 100%;
  background: #474d50;
}

/* line 6, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index h1, #result-index h2, #result-index p, #result-index li {
  font-family: 'Noto Sans JP', sans-serif;
  color: #222222;
}

/* line 11, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .button {
  box-shadow: rgba(101, 101, 101, 0.5) 0 0 6px;
}

/* line 14, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .share-footer {
  margin-top: -250px;
}

/* line 16, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .share-footer p {
  color: #ffffff;
}

/* line 20, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .section-title {
  margin-bottom: 64px;
}

/* line 22, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .section-title .title-bg {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 800;
  font-size: 60px;
  color: #DAD8A0;
  text-align: center;
}

/* line 30, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .section-title h2 {
  font-size: 20px;
  font-weight: 900;
  line-height: 28px;
  text-align: center;
  margin-top: -40px;
}

/* line 38, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main {
  width: 100%;
  max-width: 580px;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #ECEAE3;
  padding-bottom: 204px;
  overflow: hidden;
}

/* line 47, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section {
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 51, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.top {
  width: 100%;
  padding-top: 84px;
  margin-bottom: 56px;
}

/* line 55, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.top img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/* line 61, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number {
  margin: 0 auto 80px;
}

/* line 63, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number .prize {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

/* line 69, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number .note {
  text-align: center;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 16px;
}

/* line 75, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number ul {
  list-style: none;
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  padding: 24px 24px 0;
  justify-content: space-around;
}

/* line 82, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number ul li {
  margin-bottom: 24px;
  padding: 0 6px 0;
}

/* line 85, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number ul li.winner {
  color: #BC2A21;
}

/* line 91, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number.first ul, #result-index main section.number.second ul {
  justify-content: center;
}

/* line 93, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number.first ul li, #result-index main section.number.second ul li {
  font-size: 34px;
  font-weight: 900;
}

/* line 100, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number.third li, #result-index main section.number.forth li {
  font-size: 18px;
  font-weight: 900;
}

/* line 105, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.number.fifth {
  font-size: 14px;
}

/* line 110, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.text .title-bg {
  font-size: 32px;
}

/* line 113, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.text h2 {
  font-size: 16px;
  margin-top: -20px;
}

/* line 117, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index main section.text p {
  margin-top: 32px;
  text-align: center;
  line-height: 23px;
  letter-spacing: 0.04em;
}

/* line 126, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .cta {
  z-index: 100;
  box-sizing: border-box;
  position: fixed;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 580px;
  min-width: 288px;
  height: 94px;
  padding: 24px 12px 0;
  background-color: #ffffff;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.4));
}

/* line 140, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .cta p {
  text-align: center;
  font-weight: 700;
  margin-bottom: 12px;
}

/* line 145, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .cta ul {
  display: flex;
  list-style: none;
  justify-content: space-around;
}

/* line 149, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .cta ul li {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* line 152, app/assets/stylesheets/campaign/anniversary/result.scss */
#result-index .cta ul li.winner {
  color: #BC2A21;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index {
  width: 100%;
  background: #474d50;
  overflow-x: hidden;
}

/* line 7, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index h1, #serial-index h2, #serial-index p {
  color: #222222;
  letter-spacing: 0.04em;
}

/* line 12, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index .share-footer {
  margin-top: -340px;
  z-index: 3;
}

/* line 16, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main {
  width: 100%;
  max-width: 580px;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #ECEAE3;
  padding-bottom: 500px;
  overflow: hidden;
  border: 4px solid;
  border-image-slice: 1;
  border-width: 4px;
  border-image-source: linear-gradient(68.81deg, #BB6A6D 12.11%, #8B66AF 53.61%, #ED5D51 95.11%);
}

/* line 29, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main img.section-header {
  display: block;
  width: 100%;
}

/* line 32, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main img.section-header.over {
  margin-top: -10%;
}

/* line 36, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section {
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 39, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section span.accent {
  font-weight: 700;
  background-color: #DAD8A0;
}

/* line 43, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top {
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: 650px;
  min-height: 556px;
  background-color: #ECEAE3;
  background-image: url(/images/anniv/3rd/top-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
}

/* line 54, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main {
  position: relative;
}

/* line 56, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main .square {
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  width: 273px;
  height: 355px;
  border-radius: 6px;
  left: 50%;
  margin-left: -136px;
  top: 20vh;
  background-image: linear-gradient(0deg, #ffffff, #ffffff), linear-gradient(0deg, #ffffff, #ffffff), linear-gradient(0deg, #ffffff, #ffffff), linear-gradient(0deg, #ffffff, #ffffff);
  background-repeat: no-repeat;
  background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
  background-position: left bottom, left top, right top, right bottom;
  -webkit-animation: squareAnim 1s linear forwards;
  animation: squareAnim 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes squareAnim {
  0% {
    background-size: 3px 0, 0 3px, 3px 0, 0 3px;
  }
  25% {
    background-size: 3px 100%, 0 3px, 3px 0, 0 3px;
  }
  50% {
    background-size: 3px 100%, 100% 3px, 3px 0, 0 3px;
  }
  75% {
    background-size: 3px 100%, 100% 3px, 3px 100%, 0 3px;
  }
  100% {
    background-size: 3px 100%, 100% 3px, 3px 100%, 100% 3px;
  }
}

/* line 105, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main .square img.main {
  position: relative;
  width: 197px;
  left: 35px;
  top: -60px;
}

/* line 111, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main .square img.vertical {
  position: absolute;
  height: 217px;
  top: 12px;
  right: 8px;
  -webkit-animation: blurIn 0.8s linear forwards 0.5s;
  animation: blurIn 0.8s linear forwards 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 119, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main .square .chill-box {
  position: absolute;
  left: -35px;
  bottom: -58px;
  transform: rotate(5deg);
}

/* line 124, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main .square .chill-box .chill {
  width: 343px;
  height: 110px;
  background: linear-gradient(68.81deg, #BB6A6D 12.11%, #8B66AF 53.61%, #ED5D51 95.11%);
  mask-image: url(/assets/anniv/3rd/chill-1eea5631242ffecef09a607142bcd9958eb0b0e416b4b1163d0c4181bc635e40.svg);
  -webkit-mask-image: url(/assets/anniv/3rd/chill-1eea5631242ffecef09a607142bcd9958eb0b0e416b4b1163d0c4181bc635e40.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background-size: 400%;
  -webkit-animation: blurIn 0.8s linear forwards 2s;
  animation: blurIn 0.8s linear forwards 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 134, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main .square .chill-box .chill.gradient {
  -webkit-animation: textGradientAnim 10s infinite;
  animation: textGradientAnim 10s infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes textGradientAnim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* line 149, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main .square .chill-box .chill-3 {
  position: absolute;
  width: 58px;
  top: 2px;
  right: 84px;
  -webkit-animation: blurIn 0.8s linear forwards 1s;
  animation: blurIn 0.8s linear forwards 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 157, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main .square .copy {
  position: relative;
  bottom: 64px;
  left: -30px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.1em;
  line-height: 26px;
  -webkit-animation: blurIn 0.8s linear forwards;
  animation: blurIn 0.8s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 166, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.top .main .square .copy span {
  padding-left: 4px;
  background-color: #ffffff;
}

/* line 175, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.attention {
  width: 90%;
}

/* line 177, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.attention .square {
  padding: 16px 20px;
  box-sizing: border-box;
  border: 1px solid #474d50;
  border-radius: 10px;
}

/* line 182, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.attention .square p {
  text-align: left;
}

/* line 184, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.attention .square p.title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  line-height: 20px;
  color: #BC2A21;
}

/* line 189, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.attention .square p.content {
  margin-top: 8px;
  font-size: 12px;
  line-height: 20px;
}

/* line 198, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.input {
  margin-top: 20px;
  width: 90%;
}

/* line 201, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.input p {
  font-size: 12px;
}

/* line 204, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.input input {
  margin-top: 8px;
  width: 100%;
  border-radius: 4px;
  border: none;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 0 12px;
}

/* line 213, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.input .button {
  margin-top: 20px;
}

/* line 218, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.prize {
  margin: 42px auto 0;
  width: 90%;
}

/* line 221, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.prize .title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 20px;
}

/* line 226, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.prize img {
  display: block;
  width: 100%;
  max-width: 342px;
  margin: 0 auto;
}

/* line 232, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.prize ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* line 237, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main section.prize ul li {
  margin-top: 12px;
  width: 49%;
}

/* line 244, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main .cta {
  z-index: 100;
  box-sizing: border-box;
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 522px;
  min-width: 288px;
  height: 94px;
  padding: 0 12px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  background-color: #566774;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.4));
}

/* line 262, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main .cta .text-box {
  flex: 0 0 auto;
}

/* line 265, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main .cta .image-box {
  flex: 0 1 auto;
  align-self: center;
}

/* line 269, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main .cta .pr {
  font-weight: 900;
  font-size: 10px;
  padding: 3px 5px;
  background-color: #ffffff;
  color: #566774;
  border-radius: 10px;
  margin-top: 14px;
}

/* line 278, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main .cta .action-text {
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  margin-top: 10px;
}

/* line 284, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main .cta .price {
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  margin-top: 6px;
}

/* line 290, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index main .cta img {
  max-height: 72px;
  max-width: 84px;
  width: 100%;
}

/* line 303, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index .active.fade-up {
  -webkit-animation: fadeUp 1s linear forwards;
  animation: fadeUp 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 319, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index .active.fade-left-in {
  -webkit-animation: fadeLeftIn 1s linear forwards;
  animation: fadeLeftIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 335, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index .active.fade-right-in {
  -webkit-animation: fadeRightIn 1s linear forwards;
  animation: fadeRightIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 351, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index .active.fade-down-in {
  -webkit-animation: fadeDownIn 1s linear forwards;
  animation: fadeDownIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeDownIn {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 369, app/assets/stylesheets/campaign/anniversary/serial.scss */
#serial-index .animated {
  opacity: 0;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index {
  width: 100%;
  background: #474d50;
}

/* line 6, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index h1, #vote-index h2, #vote-index p {
  color: #222222;
  letter-spacing: 0.04em;
}

/* line 10, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index .share-footer {
  margin-top: -320px;
  z-index: 3;
}

/* line 14, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main {
  width: 100%;
  max-width: 580px;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #ECEAE3;
  padding-bottom: 284px;
  overflow: hidden;
}

/* line 23, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section {
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 26, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.top {
  width: 100%;
  padding-top: 84px;
  margin-bottom: 56px;
}

/* line 30, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.top img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/* line 35, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.top .text {
  margin: -50px 0 0 20px;
}

/* line 37, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.top .text h1 {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #ffffff;
  font-size: 38px;
  line-height: 46px;
  padding: 0 8px;
  display: inline;
  background: linear-gradient(transparent 0%, #566774 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* line 48, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.top .text p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #566774;
  font-size: 20px;
  line-height: 24px;
  margin-top: 12px;
}

/* line 57, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section .unvotable {
  box-sizing: border-box;
  margin-top: 12px;
  width: 100%;
  font-size: 14px;
  line-height: 1.3em;
  background-color: #ffffff;
  padding: 20px;
}

/* line 65, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section .unvotable img {
  margin-top: 20px;
  width: 100%;
}

/* line 70, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section .selection {
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 32px;
}

/* line 76, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section .lottery-number {
  padding: 40px 20px 20px;
  background-color: #ffffff;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
}

/* line 82, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section .lottery-number span {
  font-size: 34px;
  font-weight: 900;
}

/* line 87, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote {
  margin: 0 auto 80px;
  width: 90%;
}

/* line 90, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .schedule {
  height: 80px;
  margin-bottom: 32px;
}

/* line 94, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote h3 {
  margin-bottom: 20px;
}

/* line 98, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .done img {
  display: block;
  width: 50%;
  margin: 0 auto;
}

/* line 103, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .done p {
  padding: 10px;
  text-align: center;
}

/* line 108, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* line 112, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .content .choice {
  flex: 0 0 46%;
  margin-bottom: 32px;
}

/* line 115, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .content .choice label {
  display: block;
  background-color: #ffffff;
  min-height: 60px;
  text-align: center;
}

/* line 121, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .content .choice img {
  width: 100%;
  border: 2px solid #ffffff;
}

/* line 125, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .content .choice p {
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* line 130, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .content .choice p span {
  font-size: 10px;
  color: #474d50;
  font-weight: bold;
}

/* line 136, app/assets/stylesheets/campaign/anniversary/vote.scss */
#vote-index main section.vote .content .choice input {
  display: block;
  height: 32px;
  margin: 0 auto;
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index {
  width: 100%;
  background: #474d50;
  overflow-x: hidden;
}

/* line 7, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index h1, #win-index h2, #win-index p {
  color: #222222;
  letter-spacing: 0.04em;
}

/* line 12, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index .share-footer {
  margin-top: -340px;
  z-index: 3;
}

/* line 16, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main {
  width: 100%;
  max-width: 580px;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #ECEAE3;
  padding-bottom: 500px;
  overflow: hidden;
  border: 4px solid;
  border-image-slice: 1;
  border-width: 4px;
  border-image-source: linear-gradient(68.81deg, #BB6A6D 12.11%, #8B66AF 53.61%, #ED5D51 95.11%);
}

/* line 29, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section {
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 32, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section span.accent {
  font-weight: 700;
  background-color: #DAD8A0;
}

/* line 36, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.top {
  position: relative;
  width: 100%;
  background-color: #ECEAE3;
  background-image: url(/images/anniv/3rd/top-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
}

/* line 44, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.top .main {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

/* line 49, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.top.lose {
  height: 80vh;
  max-height: 650px;
  min-height: 556px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 56, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.top.lose .title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-align: center;
}

/* line 61, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.top.lose .content {
  margin-top: 28px;
  border-radius: 10px;
  background: #ffffff;
  padding: 20px;
  font-size: 14px;
  line-height: 24px;
}

/* line 69, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.top.lose .button {
  margin-top: 28px;
}

/* line 73, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.top.win {
  padding-top: 120px;
  margin-bottom: 40px;
}

/* line 76, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.top.win h1 {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 32px;
  text-align: center;
  margin-bottom: 32px;
}

/* line 82, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.top.win img {
  width: 100%;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.02), 0px 2px 4px rgba(0, 0, 0, 0.08);
}

/* line 88, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.prize {
  width: 90%;
  margin-bottom: 32px;
}

/* line 91, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.prize .grade {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: #ffffff;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  line-height: 100px;
}

/* line 102, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.prize .name {
  margin-top: 20px;
  text-align: center;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
}

/* line 109, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail {
  width: 90%;
}

/* line 111, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .attention {
  padding: 16px 20px;
  background-color: #BC2A21;
  border-radius: 10px;
  margin-bottom: 16px;
}

/* line 116, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .attention p {
  text-align: left;
}

/* line 118, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .attention p.title {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  line-height: 20px;
  color: #ffffff;
}

/* line 123, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .attention p.content {
  margin-top: 8px;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
}

/* line 131, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .code {
  margin-top: 24px;
}

/* line 133, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .code input {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 60px;
  text-align: center;
  font-size: 21px;
  color: #474d50;
  background: #ffffff;
  border-radius: 8px;
  font-family: 'Monaco' !important;
  margin-bottom: 8px;
}

/* line 151, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .code p {
  font-size: 12px;
  text-align: center;
  font-family: 'Monaco';
  margin-bottom: 40px;
}

/* line 158, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .input {
  margin-top: 40px;
  text-align: center;
}

/* line 161, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .input h2 {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 12px;
}

/* line 166, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .input p {
  font-size: 12px;
  line-height: 16px;
}

/* line 170, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .input input {
  margin-top: 8px;
  width: 100%;
  border-radius: 4px;
  border: none;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 0 12px;
}

/* line 179, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .input .button {
  margin-top: 12px;
}

/* line 183, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .text {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 20px;
}

/* line 188, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .button {
  margin-bottom: 16px;
}

/* line 191, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main section.detail .note {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  text-align: center;
  font-size: 12px;
  line-height: 20px;
}

/* line 199, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main .cta {
  z-index: 100;
  box-sizing: border-box;
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 522px;
  min-width: 288px;
  height: 94px;
  padding: 0 12px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  background-color: #566774;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.4));
}

/* line 218, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main .cta .text-box {
  flex: 0 0 auto;
  height: 70px;
}

/* line 222, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main .cta .image-box {
  flex: 0 1 auto;
  align-self: center;
}

/* line 226, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main .cta .pr {
  font-weight: 900;
  font-size: 10px;
  padding: 3px 5px;
  background-color: #ffffff;
  color: #566774;
  border-radius: 10px;
  margin-top: 14px;
  width: 170px;
}

/* line 236, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main .cta .action-text {
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  margin-top: 10px;
}

/* line 242, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main .cta .price {
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  margin-top: 6px;
}

/* line 248, app/assets/stylesheets/campaign/anniversary/win.scss */
#win-index main .cta img {
  max-height: 72px;
  max-width: 84px;
  width: 100%;
}

/* line 2, app/assets/stylesheets/campaign/enjoybeerfes/animation.scss */
#enjoybeerfes-index .bottle {
  transform: scale(2, 2);
  opacity: 0;
  animation: 2s scaleEaseOutElastic forwards;
  animation-delay: 1s;
}

/* line 8, app/assets/stylesheets/campaign/enjoybeerfes/animation.scss */
#enjoybeerfes-index .bottle-shadow {
  opacity: 0;
  left: 20%;
  animation: 2s easeOutElasticFade forwards;
  animation-delay: 1s;
}

/* line 14, app/assets/stylesheets/campaign/enjoybeerfes/animation.scss */
#enjoybeerfes-index .intro-title {
  opacity: 0;
  top: 4%;
  animation: 1s scaleFadeIn forwards;
  animation-delay: 2s;
}

@keyframes scaleFadeIn {
  from {
    transform: scale(1.1);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleEaseOutElastic {
  0% {
    opacity: 0;
    transform: scale(2);
  }
  16% {
    transform: scale(0.88);
  }
  28% {
    transform: scale(1.13);
  }
  44% {
    transform: scale(0.95);
  }
  59% {
    opacity: 1;
    transform: scale(1.02);
  }
  73% {
    transform: scale(0.99);
  }
  88% {
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes easeOutElasticFade {
  0% {
    opacity: 0;
    left: 20%;
  }
  16% {
    left: 1%;
  }
  28% {
    left: 10%;
  }
  44% {
    left: 1.5%;
  }
  59% {
    left: 6%;
  }
  73% {
    left: 1.9%;
  }
  88% {
    left: 2%;
  }
  100% {
    opacity: 0.5;
    left: 2%;
  }
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index {
  width: 100%;
  background: #1e1e1e;
}

/* line 6, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index .button {
  box-shadow: rgba(101, 101, 101, 0.5) 0 0 6px;
}

/* line 9, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index .share-footer {
  margin-top: -40px;
  z-index: 3;
}

/* line 13, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main {
  width: 100%;
  max-width: 580px;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #F1F6F3;
  padding-bottom: 64px;
}

/* line 21, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section {
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 24, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section .section-title {
  margin-top: 12px;
}

/* line 26, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section .section-title .section-mark {
  width: 170px;
}

/* line 29, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section .section-title h2 {
  color: #582400;
  font-size: 18px;
  margin-top: 4px;
  line-height: 24px;
}

/* line 36, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section .buttons {
  width: 90%;
  margin: 16px auto 0;
}

/* line 39, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section .buttons .button {
  height: 52px;
  line-height: 18px;
  padding-top: 8px;
  margin-bottom: 12px;
}

/* line 46, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.top {
  width: 100%;
  padding-top: 16%;
  padding-bottom: 1%;
  background: url(/assets/enjoybeerfes/top-bg-f2bb98a944decdd9cd0273fac2600dc9a328d1376e9c8a1dfad266499c883b2a.jpg) no-repeat;
  background-size: cover;
}

/* line 52, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.top img {
  display: block;
  margin: 0 auto;
}

/* line 55, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.top img.bottle, #enjoybeerfes-index main section.top img.bottle-shadow {
  position: relative;
  width: 40%;
}

/* line 59, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.top img.bottle {
  z-index: 2;
  margin-bottom: 12%;
}

/* line 63, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.top img.bottle-shadow {
  z-index: 1;
  margin-top: -127%;
}

/* line 67, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.top img.intro-title {
  position: relative;
  z-index: 3;
  width: 90%;
  margin-top: -26%;
}

/* line 75, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.intro {
  margin: 0 auto;
  width: 90%;
  margin-bottom: 40px;
}

/* line 79, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.intro img {
  width: 100%;
  margin-top: 24px;
}

/* line 83, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.intro p {
  font-size: 14px;
  color: #582400;
  line-height: 20px;
  margin-top: 20px;
}

/* line 90, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.map {
  width: 100%;
  background: url(/assets/enjoybeerfes/map-bg-0696fe79466327cff28d1c0b811533f8b02d2438fb46c8bb590787651f225bb3.png) no-repeat;
  background-size: cover;
  padding: 32% 0 80% 0;
}

/* line 95, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.map .wrapper {
  width: 90%;
  margin: 0 auto;
}

/* line 99, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.map p {
  width: 60%;
  font-size: 14px;
  color: #582400;
  line-height: 20px;
  margin-top: 20px;
}

/* line 106, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.map img {
  margin-top: -31%;
  width: 100%;
}

/* line 111, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule {
  margin-top: -20%;
}

/* line 113, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .cover {
  width: 100%;
}

/* line 116, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content {
  width: 90%;
  margin: 0 auto;
  margin-top: 48px;
}

/* line 120, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content h3 {
  font-size: 16px;
  color: #582400;
}

/* line 121, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content h3.end {
  text-decoration: line-through;
}

/* line 124, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content h3 span {
  display: block;
  padding: 8px;
  font-size: 12px;
  background-color: #e36c6c;
  width: 50px;
  text-align: center;
  color: #ffffff;
  margin-bottom: 8px;
  border-radius: 14px;
}

/* line 134, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content h3 span.end {
  color: #474d50;
  background-color: #c7cdce;
}

/* line 142, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .deadline {
  font-size: 12px;
  color: #582400;
  margin-top: 4px;
}

/* line 146, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .deadline.end {
  text-decoration: line-through;
}

/* line 150, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-title {
  color: #582400;
  margin-top: 16px;
  text-align: center;
  width: 146px;
  font-size: 14px;
  font-weight: bold;
  padding: 8px;
  background-color: #ffffff;
}

/* line 160, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-content {
  list-style: none;
  background-color: #ffffff;
  padding: 24px 0;
}

/* line 164, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-content li {
  margin: 0 auto;
  width: 90%;
  margin-bottom: 48px;
}

/* line 168, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-content li:last-child {
  margin-bottom: 0px;
}

/* line 171, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-content li img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 126px;
}

/* line 177, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-content li h4 {
  font-size: 16px;
  margin-top: 16px;
  color: #582400;
}

/* line 182, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-content li p {
  font-size: 14px;
  color: #582400;
  line-height: 20px;
  margin-top: 8px;
}

/* line 187, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-content li p.brewery {
  font-size: 12px;
  color: #ffffff;
  background-color: #67B6A0;
  font-weight: bold;
  margin-top: 20px;
  padding: 4px 12px;
}

/* line 195, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-content li p.brewery-list {
  font-size: 12px;
  line-height: 22px;
}

/* line 200, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.schedule .schedule-content .beerfes-content li a {
  display: block;
  margin-top: 12px;
  text-decoration: underline;
  font-weight: bold;
  font-size: 12px;
  color: #296DA0;
}

/* line 212, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.campaign {
  margin: 0 auto;
  width: 90%;
  margin-bottom: 40px;
}

/* line 216, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.campaign img {
  width: 100%;
  margin-top: 24px;
}

/* line 220, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.campaign p {
  font-size: 14px;
  color: #582400;
  line-height: 20px;
  margin-top: 20px;
}

/* line 225, app/assets/stylesheets/campaign/enjoybeerfes/index.scss */
#enjoybeerfes-index main section.campaign p a {
  color: #296DA0;
}

/* line 1, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index {
  background-color: #f2f2f2;
  overflow-x: hidden;
}

/* line 4, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index .wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

/* line 11, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index .wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 25px;
}

/* line 17, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index .wave .shape-fill {
  fill: #f2f2f2;
}

@media screen and (min-width: 744px) {
  /* line 4, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index .wave {
    display: none;
  }
}

/* line 25, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main {
  padding-top: 124px;
}

@media screen and (min-width: 744px) {
  /* line 25, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main {
    padding-top: 0;
  }
}

/* line 30, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 35, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
}

/* line 39, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.full {
  max-width: none;
  width: 100%;
}

/* line 43, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.top {
  position: relative;
  height: 600px;
  background: url(/assets/fathers/top-bg-519f2e19e8f5d9b28727dbf4c53ba7be6ffe1674a057d0424442592f8715cba6.png) no-repeat;
  background-size: cover;
  background-position: -150px 0;
  padding: 0 5%;
}

@media screen and (min-width: 415px) {
  /* line 43, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.top {
    background-size: contain;
    background-position: -150px bottom;
  }
}

@media screen and (min-width: 744px) {
  /* line 43, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.top {
    height: 800px;
    padding-top: 164px;
    background: url(/assets/fathers/top-pc-bg-b252f045b3c200b26668bb0147927afb4699b813e9a85bbbab02ca4da35b5bea.jpg) no-repeat;
    background-size: cover;
    background-position: center;
  }
}

/* line 61, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.top .box {
  display: block;
  position: absolute;
  right: -5px;
  top: 130px;
  max-width: 334px;
}

@media screen and (max-width: 320px) {
  /* line 61, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.top .box {
    width: 90%;
    top: 180px;
  }
}

@media screen and (min-width: 415px) {
  /* line 61, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.top .box {
    left: 50%;
    margin-left: -167px;
  }
}

@media screen and (min-width: 744px) {
  /* line 61, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.top .box {
    display: none;
  }
}

/* line 79, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.top .limit {
  width: 113px;
  display: block;
  position: absolute;
  right: 5%;
  top: 0;
}

@media screen and (min-width: 744px) {
  /* line 79, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.top .limit {
    top: 164px;
  }
}

/* line 89, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.top .en-title {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 32px;
  line-height: 35px;
  letter-spacing: 0.04em;
}

/* line 95, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.top .title-box {
  position: absolute;
  bottom: 0;
  right: 5%;
}

@media screen and (min-width: 744px) {
  /* line 95, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.top .title-box {
    bottom: 50px;
  }
}

/* line 102, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.top .title-box .copy {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  text-align: right;
  letter-spacing: 0.06em;
}

/* line 109, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.top .title-box h1 {
  margin-top: 4px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
}

/* line 115, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.top .title-box .price {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-align: right;
  margin-top: 8px;
}

/* line 124, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.note {
  margin-top: 60px;
  background-color: #F2ECE1;
  padding: 24px 20px;
  border-radius: 10px;
}

/* line 129, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.note h2 {
  color: #474d50;
}

/* line 132, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.note p {
  margin-top: 12px;
  color: #474d50;
  font-size: 14px;
  line-height: 24px;
}

/* line 139, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.introduce {
  margin-top: 80px;
}

/* line 141, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.introduce img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 415px;
}

/* line 147, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.introduce h2 {
  margin-top: 28px;
  letter-spacing: 0.06em;
  line-height: 28px;
  text-align: center;
}

/* line 153, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.introduce p {
  margin-top: 24px;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
}

/* line 158, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.introduce p span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #D8864E;
}

/* line 164, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set {
  position: relative;
  margin-top: 80px;
}

@media screen and (min-width: 744px) {
  /* line 164, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.set {
    width: 90%;
    max-width: 900px;
  }
}

/* line 171, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set .eyecatch {
  padding-top: 60px;
  box-sizing: border-box;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (min-width: 744px) {
  /* line 171, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.set .eyecatch {
    border-radius: 20px;
  }
}

/* line 181, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set .eyecatch h2 {
  text-align: center;
  letter-spacing: 0.06em;
}

/* line 184, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set .eyecatch h2.white {
  color: #ffffff;
}

/* line 188, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set .eyecatch p {
  width: 90%;
  margin: 20px auto 0;
  text-align: center;
  font-size: 16px;
  line-height: 28px;
}

/* line 196, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set ul {
  list-style: none;
  margin-top: -40px;
}

@media screen and (min-width: 744px) {
  /* line 196, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.set ul {
    display: flex;
    flex-wrap: wrap;
    width: 624px;
    margin: -40px auto 0;
    column-gap: 20px;
    row-gap: 20px;
  }
}

/* line 207, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set ul li {
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 4px 8px #0000000a, 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04);
  padding-bottom: 24px;
  min-width: 302px;
  max-width: 302px;
  margin-left: 10px;
}

@media screen and (min-width: 744px) {
  /* line 207, app/assets/stylesheets/campaign/fathers/index.scss */
  #fathers-index main section.set ul li {
    margin-left: 0px;
  }
}

/* line 219, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set ul li .beer-img {
  display: block;
  margin: 0 auto;
  height: 154px;
}

/* line 224, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set ul li .appetizer-img {
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/* line 229, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set ul li .detail {
  padding: 0 20px;
}

/* line 231, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set ul li .detail .brand {
  margin-top: 20px;
  font-size: 14px;
  letter-spacing: 0.06em;
}

/* line 236, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set ul li .detail .name {
  margin-top: 4px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
}

/* line 242, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set ul li .detail .title {
  margin-top: 20px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.06em;
}

/* line 249, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set ul li .detail .content {
  margin-top: 20px;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.06em;
}

/* line 259, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set.beers .eyecatch {
  height: 534px;
  background-image: url(/assets/fathers/beer-bg-a4caa9395d5d2703b9b1e027673c98b207af8863aafc901a61012e7bc5af7621.jpg);
}

/* line 264, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set.beers ul li {
  padding-top: 35px;
}

/* line 270, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.set.appetizers .eyecatch {
  height: 439px;
  background-image: url(/assets/fathers/appetizer-bg-99aa619e7c66f29e73c8ed93d06437b938c16d0f3f176d1480d21b996002ab75.jpg);
}

/* line 276, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory {
  margin: 100px 0;
}

/* line 278, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory h2 {
  text-align: center;
  line-height: 26px;
  letter-spacing: 0.06em;
}

/* line 284, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory .slider .slider-content {
  position: relative;
  margin: 28px 10px 0;
}

/* line 287, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory .slider .slider-content img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.06)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
}

/* line 293, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory .slider .slider-content .message {
  margin: 24px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
}

/* line 299, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory .slider .slider-content .button {
  margin-top: 24px;
}

/* line 303, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory .slider .slick-next {
  right: 20px;
  width: 30px;
  height: 30px;
}

/* line 307, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory .slider .slick-next::before {
  color: #222222;
}

/* line 311, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory .slider .slick-prev {
  z-index: 2;
  left: 20px;
  width: 30px;
  height: 30px;
}

/* line 316, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index main section.select-accessory .slider .slick-prev::before {
  color: #222222;
}

/* line 329, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index .active.fade-up {
  -webkit-animation: fadeUp 1s linear forwards;
  animation: fadeUp 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 345, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index .active.fade-left-in {
  -webkit-animation: fadeLeftIn 1s linear forwards;
  animation: fadeLeftIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 361, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index .active.fade-right-in {
  -webkit-animation: fadeRightIn 1s linear forwards;
  animation: fadeRightIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 377, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index .active.fade-down-in {
  -webkit-animation: fadeDownIn 1s linear forwards;
  animation: fadeDownIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeDownIn {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 395, app/assets/stylesheets/campaign/fathers/index.scss */
#fathers-index .animated {
  opacity: 0;
}

/* line 1, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index {
  background-color: #566774;
  overflow-x: hidden;
}

/* line 5, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main {
  position: relative;
}

/* line 7, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 12, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section p {
  color: #ffffff;
}

/* line 15, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.full {
  max-width: none;
  width: 100%;
}

/* line 19, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.top {
  position: relative;
  box-sizing: border-box;
  background-image: url(/assets/fathers/style/bg-bb3523008030abc35041639a97de247379ce6733f4f8ff3db687cc3bddf58294.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #566774;
  padding-top: 120px;
}

@media screen and (min-width: 744px) {
  /* line 19, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.top {
    height: 800px;
  }
}

/* line 30, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.top img {
  display: block;
  width: 90%;
  margin: 0 auto;
  max-width: 500px;
}

@media screen and (min-width: 744px) {
  /* line 30, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.top img {
    position: absolute;
    left: 50%;
    margin-left: -450px;
  }
}

/* line 42, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.detail {
  position: relative;
}

@media screen and (min-width: 744px) {
  /* line 42, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.detail {
    position: absolute;
    height: 118px;
    width: 350px;
    left: 50%;
    margin-left: 50px;
    margin-top: -380px;
  }
}

/* line 53, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.detail .title-box p {
  letter-spacing: 0.06em;
  text-align: center;
}

@media screen and (min-width: 744px) {
  /* line 53, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.detail .title-box p {
    text-align: left;
  }
}

/* line 59, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.detail .title-box p.style {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 32px;
}

@media screen and (min-width: 744px) {
  /* line 59, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.detail .title-box p.style {
    font-size: 48px;
  }
}

/* line 66, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.detail .title-box p.copy {
  margin-top: 24px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
}

@media screen and (min-width: 744px) {
  /* line 66, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.detail .title-box p.copy {
    margin-top: 12px;
  }
}

/* line 74, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.detail .title-box p.language {
  margin-top: 8px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 32px;
}

/* line 82, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.origin {
  position: relative;
  margin-top: 60px;
  padding: 40px 20px 24px;
  border-radius: 10px;
  border: 1px solid #ffffff;
  max-width: 350px;
}

@media screen and (min-width: 744px) {
  /* line 82, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.origin {
    position: absolute;
    left: 50%;
    margin-left: 50px;
    margin-top: -200px;
    max-width: 330px;
  }
}

/* line 96, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.origin .title {
  position: absolute;
  height: 28px;
  line-height: 28px;
  padding: 0 16px;
  background-color: #ffffff;
  color: #566774;
  top: -14px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
}

/* line 107, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.origin .text {
  font-size: 14px;
  line-height: 26px;
}

/* line 112, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set {
  margin-top: 80px;
}

@media screen and (min-width: 744px) {
  /* line 112, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.set {
    margin-top: 140px;
    max-width: 750px;
  }
}

/* line 118, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .sp {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 26px;
}

/* line 125, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .sp span {
  font-size: 16px;
}

@media screen and (min-width: 744px) {
  /* line 118, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.set .sp {
    display: none;
  }
}

/* line 132, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .pc {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #ffffff;
  font-size: 42px;
  letter-spacing: 0.04em;
}

/* line 137, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .pc span {
  font-size: 20px;
}

@media screen and (max-width: 743px) {
  /* line 132, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.set .pc {
    display: none;
  }
}

@media screen and (min-width: 744px) {
  /* line 144, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.set .set-content {
    display: flex;
    align-items: center;
    margin-top: 40px;
    column-gap: 40px;
  }
}

/* line 151, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .set-content img {
  display: block;
  margin: 40px auto 0;
  width: 100%;
  max-width: 500px;
}

@media screen and (min-width: 744px) {
  /* line 151, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.set .set-content img {
    margin-top: 0;
    width: 402px;
  }
}

/* line 161, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .set-content .content {
  display: flex;
  column-gap: 16px;
  margin: 28px auto 36px;
  max-width: 308px;
}

@media screen and (min-width: 744px) {
  /* line 161, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.set .set-content .content {
    width: 308px;
  }
}

/* line 169, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .set-content .content p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #566774;
  background-color: #ffffff;
  min-width: 62px;
}

/* line 178, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .set-content .content ul {
  list-style: none;
}

/* line 180, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .set-content .content ul li {
  font-size: 14px;
  margin-bottom: 20px;
  color: #ffffff;
  line-height: 20px;
}

/* line 185, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .set-content .content ul li:last-child {
  margin-bottom: 0;
}

/* line 188, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.set .set-content .content ul li.strong {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 196, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.accessory {
  margin: 80px auto 120px;
}

@media screen and (min-width: 744px) {
  /* line 196, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.accessory {
    max-width: 750px;
  }
}

/* line 201, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.accessory h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-align: center;
}

@media screen and (min-width: 744px) {
  /* line 201, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.accessory h2 {
    display: none;
  }
}

/* line 211, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.accessory img {
  margin-top: 32px;
  width: 100%;
  border-radius: 10px;
}

/* line 216, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.accessory .message {
  margin-top: 24px;
  font-size: 16px;
  line-height: 26px;
  text-align: center;
}

@media screen and (min-width: 744px) {
  /* line 216, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.accessory .message {
    margin: 40px auto 0;
    max-width: 430px;
  }
}

/* line 226, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.accessory .button {
  margin: 28px auto 0;
}

@media screen and (min-width: 744px) {
  /* line 226, app/assets/stylesheets/campaign/fathers/style.scss */
  #fathers-style-index main section.accessory .button {
    margin: 40px auto;
    max-width: 430px;
  }
}

/* line 232, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.accessory .button.text {
  max-width: 200px;
  color: #ffffff;
  text-decoration: underline;
}

/* line 236, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index main section.accessory .button.text:hover {
  text-decoration: none;
}

/* line 249, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index .active.fade-up {
  -webkit-animation: fadeUp 1s linear forwards;
  animation: fadeUp 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 265, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index .active.fade-left-in {
  -webkit-animation: fadeLeftIn 1s linear forwards;
  animation: fadeLeftIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 281, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index .active.fade-right-in {
  -webkit-animation: fadeRightIn 1s linear forwards;
  animation: fadeRightIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 297, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index .active.fade-right-rotate-in {
  -webkit-animation: fadeRightRotateIn 1s linear forwards;
  animation: fadeRightRotateIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightRotateIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(15deg);
  }
}

/* line 315, app/assets/stylesheets/campaign/fathers/style.scss */
#fathers-style-index .animated {
  opacity: 0;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index {
  width: 100%;
  background: #f2f2f2;
}

/* line 6, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index .share-footer {
  margin-top: -40px;
}

/* line 9, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main {
  width: 100%;
  max-width: 580px;
  padding: 52px 0 0 0;
  margin: 0 auto;
  background: #ffffff;
  padding-bottom: 100px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
}

/* line 19, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main .top-zone {
  width: 100%;
}

/* line 21, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main .top-zone img {
  width: 100%;
}

/* line 25, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main h1 {
  padding: 0 5%;
  margin: 28px auto 22px auto;
}

/* line 28, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main h1 img {
  width: 80%;
}

/* line 32, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main img.right-over {
  width: 95%;
  padding-left: 5%;
  margin-bottom: 22px;
}

/* line 37, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section {
  width: 90%;
  margin: 0 auto;
}

/* line 40, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section h2 {
  font-family: HiraKakuPro-W6;
  font-size: 20px;
  line-height: 1.5;
  color: #ffffff;
  background-color: #cb4444;
  display: inline;
}

/* line 48, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section p.content {
  font-family: HiraKakuPro-W3;
  font-size: 14px;
  line-height: 1.29;
  margin-top: 28px;
  color: #333;
}

/* line 54, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section p.content a {
  color: #cb4444;
  text-decoration: underline;
}

/* line 57, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section p.content a:hover {
  text-decoration: none;
}

/* line 61, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section p.content span {
  font-family: HiraKakuPro-W6;
  font-size: 12px;
  color: #666;
}

/* line 67, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section .left-over {
  width: 105%;
  position: relative;
  margin: 28px auto 0 -5.5%;
}

/* line 72, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section.long-top {
  margin-top: 63px;
}

/* line 75, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section.plan-section {
  margin-top: 18px;
}

/* line 77, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section.plan-section .plan {
  margin-bottom: 48px;
}

/* line 79, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section.plan-section .plan .video {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0px;
  position: relative;
}

/* line 84, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section.plan-section .plan .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* line 92, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section.plan-section .plan img {
  width: 100%;
}

/* line 95, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section.plan-section .plan a {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  border: solid 2px #24264a;
  display: block;
  font-family: HiraKakuPro-W6;
  font-size: 14px;
  color: #ffffff;
  background-color: #24264a;
  box-sizing: border-box;
  text-align: center;
  padding-top: 12px;
}

/* line 108, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section.plan-section .plan a:hover {
  color: #24264a;
  background-color: #fff;
}

/* line 113, app/assets/stylesheets/campaign/hanahana/index.scss */
#hanahana-index main section.plan-section .plan p {
  margin: 18px 0;
  font-family: HiraKakuPro-W3;
  font-size: 14px;
  line-height: 1.29;
  color: #333;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index {
  width: 100%;
  background: #f2f2f2;
}

/* line 6, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index .share-footer {
  margin-top: -40px;
}

/* line 9, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main {
  width: 100%;
  max-width: 580px;
  padding: 0 0 0 0;
  margin: 0 auto;
  background: #ffffff;
  padding-bottom: 100px;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
}

/* line 19, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main img.top-image {
  object-fit: contain;
  width: 100%;
  margin-bottom: 32px;
}

/* line 26, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.campaign-section div {
  width: 94%;
  margin: 20px auto 64px auto;
  text-align: center;
}

/* line 31, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.campaign-section div p.content {
  text-align: left;
  height: 140px;
  font-family: HiraginoSans-W3;
  font-size: 14px;
  line-height: 1.86;
  color: #393939;
  overflow: hidden;
  margin: 0 auto;
}

/* line 40, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.campaign-section div p.content img {
  width: 100%;
  margin: 24px auto;
  display: block;
}

/* line 46, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.campaign-section div p#full-open-content {
  text-decoration: underline;
  font-family: HiraginoSans-W3;
  font-size: 14px;
  color: #393939;
  height: 44px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 -8px 3px -3px #e7e7e7;
  padding-top: 12px;
}

/* line 56, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.campaign-section div p#full-open-content:hover {
  text-decoration: none;
  cursor: pointer;
}

/* line 64, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section h2 {
  font-family: HiraginoSans-W6;
  font-size: 18px;
  color: #333;
  width: 94%;
  margin: 0 auto;
}

/* line 71, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section p {
  width: 94%;
  font-family: HiraginoSans-W3;
  font-size: 14px;
  line-height: 1.86;
  color: #393939;
  width: 94%;
}

/* line 78, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section p.selected-set {
  margin: 20px auto 24px auto;
}

/* line 81, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section p.section-p {
  margin: 20px auto 64px auto;
}

/* line 85, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul {
  display: flex;
  overflow: scroll;
  margin-bottom: 32px;
}

/* line 89, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul li {
  width: 140px;
  min-width: 140px;
  list-style-type: none;
  margin-right: 24px;
  position: relative;
}

/* line 95, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul li:first-child {
  padding-left: 3%;
}

/* line 98, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul li:last-child {
  padding-right: 3%;
}

/* line 101, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul li img {
  width: 100%;
  height: auto;
  margin: 0 0 12px 0;
  padding: 3px;
  background-color: #d8d8d8;
  box-sizing: border-box;
}

/* line 109, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul li p.beer-name {
  width: 100%;
  font-family: HiraginoSans-W3;
  font-size: 14px;
  line-height: 1.29;
  text-align: center;
  margin: 0 0 12px 0;
}

/* line 117, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul li .score-zone {
  display: flex;
  justify-content: space-between;
}

/* line 120, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul li .score-zone p {
  font-family: HiraginoSans-W3;
  font-size: 14px;
  line-height: 1.14;
  box-sizing: border-box;
  padding-top: 6px;
}

/* line 128, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul li .score-zone input[type=number] {
  width: 76px;
  height: 44px;
  padding: 13px 0 13px 0;
  box-sizing: border-box;
  border-radius: 4px;
  border: solid 1px #bbbbbb;
  font-family: HiraKakuPro-W6;
  font-size: 18px;
  color: #333;
  text-align: center;
  -moz-appearance: textfield;
}

/* line 140, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section ul li .score-zone input[type=number]::-webkit-outer-spin-button, #otomoni-cup-index main section ul li .score-zone input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* line 148, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section input[type=submit] {
  width: 350px;
  height: 44px;
  box-sizing: border-box;
  padding: 2px 0 0 0;
  text-align: center;
  border-radius: 4px;
  background-color: #e8a519;
  border: 1px solid #e8a519;
  font-family: HiraKakuPro-W6;
  font-size: 14px;
  color: #ffffff;
  display: block;
  margin: 0 auto;
}

/* line 162, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section input[type=submit]:hover {
  background-color: #fff;
  color: #e8a519;
  cursor: pointer;
}

/* line 168, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section .note {
  margin: 28px auto 0 auto;
  font-family: HiraginoSans-W3;
  font-size: 14px;
  text-align: center;
  color: #999999;
  width: 94%;
}

/* line 176, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section {
  margin-top: 62px;
}

/* line 178, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums {
  width: 350px;
  margin: 42px auto 0 auto;
  position: relative;
  display: flex;
  align-items: flex-end;
}

/* line 184, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-box {
  min-width: 33%;
}

/* line 186, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-box img {
  display: block;
  margin: 0 auto 16px auto;
}

/* line 189, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-box img.rank-imgae {
  width: 60px;
  height: 51px;
  object-fit: contain;
  display: block;
}

/* line 195, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-box img.beer-imgae {
  margin: 0 0 12px 0;
  width: 100%;
  background-color: #d8d8d8;
  box-sizing: border-box;
  padding: 3px;
}

/* line 203, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-box .podium {
  background-color: #e1e1e1;
}

/* line 208, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-1-box .podium-1 {
  height: 90px;
  left: 33%;
}

/* line 214, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-2-box img.beer-imgae {
  width: 92%;
}

/* line 217, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-2-box .podium-2 {
  height: 60px;
}

/* line 222, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-3-box img.beer-imgae {
  width: 92%;
  margin-left: 8%;
}

/* line 226, app/assets/stylesheets/campaign/otomoni_cup/index.scss */
#otomoni-cup-index main section.rank-section .podiums .podium-3-box .podium-3 {
  height: 40px;
  left: 66%;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index {
  width: 100%;
  background: #1e1e1e;
}

/* line 6, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index .button {
  box-shadow: rgba(101, 101, 101, 0.5) 0 0 6px;
}

/* line 9, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index .share-footer {
  margin-top: -40px;
  z-index: 3;
}

/* line 13, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main {
  width: 100%;
  max-width: 500px;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #FFFFFF;
  padding-bottom: 64px;
}

/* line 22, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main .over-bg {
  display: block;
  width: 100%;
  margin-top: -22%;
}

/* line 28, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section {
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 31, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section h2 {
  color: #474d50;
  font-size: 18px;
  margin-top: 4px;
  line-height: 24px;
}

/* line 37, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.top {
  width: 100%;
  padding-top: 34%;
  padding-bottom: 30%;
  background: url(/assets/outdoor/top-bg-e442e03f499737a49cedc621554878966fbfda23cc02b53ea9c3c9be3dbca97a.jpg) no-repeat;
  background-size: cover;
}

/* line 43, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.top img {
  display: block;
  margin: 0 auto;
  width: 94%;
}

/* line 48, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.top .button {
  margin: 10% auto 0;
  width: 90%;
  height: 44px;
  line-height: 44px;
}

/* line 55, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.intro {
  margin-top: -24%;
  width: 100%;
  margin-bottom: 40px;
}

/* line 59, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.intro img {
  width: 95%;
  margin: 32px 0 0 5%;
}

/* line 63, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.intro h2 {
  width: 90%;
  margin: 0 auto;
}

/* line 67, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.intro p {
  margin: 0 auto;
  width: 90%;
  font-size: 14px;
  color: #474d50;
  line-height: 22px;
  margin-top: 32px;
}

/* line 75, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.intro .button {
  margin: 32px auto 0;
  width: 90%;
}

/* line 80, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.shop {
  width: 100%;
}

/* line 82, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.shop h2 {
  width: 90%;
  margin: 0 auto;
}

/* line 86, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.shop p {
  margin: 0 auto;
  width: 90%;
  font-size: 14px;
  color: #474d50;
  line-height: 22px;
  margin-top: 32px;
}

/* line 94, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.shop img {
  display: block;
  width: 95%;
  margin: 32px 0 0 5%;
}

/* line 98, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.shop img.logo {
  display: block;
  width: 40%;
  margin: 32px auto 32px;
}

/* line 104, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.shop .button {
  margin: 32px auto 0;
  width: 90%;
}

/* line 109, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.lasagna {
  width: 100%;
}

/* line 111, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.lasagna img {
  display: block;
  width: 95%;
  margin: 32px 0 0 5%;
}

/* line 115, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.lasagna img.icon {
  display: block;
  width: 30%;
  margin: 48px auto;
}

/* line 121, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.lasagna h2 {
  width: 90%;
  margin: 0 auto;
}

/* line 125, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.lasagna p {
  margin: 0 auto;
  width: 90%;
  font-size: 14px;
  color: #474d50;
  line-height: 22px;
  margin-bottom: 32px;
}

/* line 132, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.lasagna p:last-child {
  margin-bottom: 0;
}

/* line 135, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.lasagna p.reference {
  margin-top: 8px;
  text-align: right;
  font-size: 10px;
}

/* line 139, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.lasagna p.reference a {
  color: #e8a519;
  font-weight: bold;
  text-decoration: underline;
}

/* line 146, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.lasagna blockquote {
  width: 90%;
  margin: 32px auto 0;
  padding: 16px 0;
  background-color: #f2f2f2;
}

/* line 153, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.item {
  margin: 48px auto 0;
  width: 90%;
  margin-bottom: 40px;
}

/* line 157, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.item img {
  width: 100%;
  margin: 32px 0;
}

/* line 161, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.item p {
  margin: 0 auto;
  font-size: 14px;
  color: #474d50;
  line-height: 22px;
  margin-bottom: 32px;
}

/* line 167, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.item p.note {
  font-size: 12px;
  line-height: 18px;
}

/* line 173, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.item .price-box p {
  font-size: 14px;
  color: #474d50;
  font-weight: bold;
}

/* line 178, app/assets/stylesheets/campaign/outdoor/index.scss */
#outdoor-index main section.item .price-box span {
  font-size: 12px;
  font-weight: normal;
}

/* line 1, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body {
  overflow-x: hidden;
  background: linear-gradient(135deg, #81A5FF 0%, #E8B3E2 100%);
}

@media screen and (max-width: 743px) {
  /* line 5, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body .pc {
    display: none !important;
  }
}

@media screen and (min-width: 744px) {
  /* line 11, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body .smp {
    display: none !important;
  }
}

/* line 17, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .wave {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 1;
}

/* line 24, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .wave.top {
  top: -25px;
  transform: rotate(180deg);
}

/* line 28, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .wave.bottom {
  bottom: -25px;
}

/* line 31, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .wave svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 25px;
}

/* line 37, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .wave .shape-fill {
  fill: #E2E5EC;
}

/* line 42, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main {
  margin: 0 auto;
}

/* line 44, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 5%;
}

/* line 50, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.full {
  padding: 0px;
  max-width: none;
}

/* line 55, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.top {
  box-sizing: border-box;
  position: relative;
  height: 616px;
  background-color: #D5E6EB;
}

@media screen and (min-width: 744px) {
  /* line 55, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.top {
    height: 780px;
  }
}

/* line 63, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.top .content {
  box-sizing: border-box;
  padding-top: 140px;
}

@media screen and (min-width: 744px) {
  /* line 63, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.top .content {
    position: relative;
    max-width: 1070px;
    margin: 0 auto;
    height: 100%;
  }
}

/* line 73, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.top .eyecatch {
  position: absolute;
  bottom: 0;
}

@media screen and (max-width: 743px) {
  /* line 73, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.top .eyecatch {
    width: 90%;
    max-width: 480px;
    left: -15%;
  }
}

@media screen and (min-width: 415px) {
  /* line 73, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.top .eyecatch {
    width: 80%;
    left: -12%;
  }
}

@media screen and (min-width: 744px) {
  /* line 73, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.top .eyecatch {
    position: absolute;
    width: 70%;
    max-width: 620px;
  }
}

/* line 91, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.top .copy {
  position: absolute;
  display: block;
  right: 5%;
}

@media screen and (max-width: 743px) {
  /* line 91, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.top .copy {
    width: 230px;
    top: 140px;
  }
}

@media screen and (min-width: 744px) {
  /* line 91, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.top .copy {
    width: 40%;
    max-width: 390px;
    top: 210px;
  }
}

/* line 105, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.top .produced {
  position: absolute;
  display: block;
  right: 5%;
}

@media screen and (max-width: 743px) {
  /* line 105, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.top .produced {
    width: 100px;
    bottom: 60px;
  }
}

@media screen and (min-width: 744px) {
  /* line 105, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.top .produced {
    width: 196px;
    bottom: 120px;
  }
}

/* line 118, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.top .limited {
  position: absolute;
  display: block;
  width: 23px;
  bottom: 140px;
  right: 8%;
}

/* line 125, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.top .name {
  position: absolute;
  display: block;
  width: 30%;
  max-width: 283px;
  right: 5%;
  bottom: 230px;
}

/* line 135, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-eyecatch-smp {
  position: relative;
  margin-top: -40px;
  padding-top: 88px;
  height: 600px;
  background: url(/assets/syldra/bg-8c38eb088aea528042d622eb214f471d1555b0e8350711bad1e1af22a44c4506.png) no-repeat;
  background-size: cover;
  background-position: 70% 0;
  mask-image: url(/assets/syldra/mask-25c752a9d6f34482c889e97cb504fdb2ec4831ba959d0e15f0bee1e0f08ff381.png);
  -webkit-mask-image: url(/assets/syldra/mask-25c752a9d6f34482c889e97cb504fdb2ec4831ba959d0e15f0bee1e0f08ff381.png);
  mask-size: 100% 600px;
  -webkit-mask-size: 100% 600px;
}

@media screen and (min-width: 415px) {
  /* line 135, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.beer-eyecatch-smp {
    margin-top: -50px;
  }
}

/* line 150, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-eyecatch-smp .text {
  display: block;
  max-width: 307px;
  width: 90%;
}

@media screen and (max-width: 743px) {
  /* line 150, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.beer-eyecatch-smp .text {
    margin-left: 5%;
  }
}

/* line 158, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-eyecatch-smp .bottle {
  position: absolute;
  display: block;
  width: 45%;
  max-width: 160px;
  top: 100px;
  right: 15%;
}

/* line 168, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-content {
  margin-top: -50px;
  padding-top: 90px;
  background-color: #F2ECE1;
}

/* line 172, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-content h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  margin-bottom: 28px;
}

/* line 179, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-content p {
  max-width: 400px;
  margin: 0 auto 52px;
  font-size: 14px;
  line-height: 23px;
  text-align: center;
}

/* line 186, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-content img {
  display: block;
  width: 100%;
  max-width: 384px;
  margin: 0 auto;
}

/* line 194, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-eyecatch-pc {
  position: relative;
  margin-top: -45px;
  padding-top: 88px;
  height: 740px;
  background: url(/assets/syldra/bg-pc-52eddfaa2e9325555837d8965cead528b58e7c683bdfe29ae658ce0f9fc85911.jpg) no-repeat;
  background-size: cover;
  background-position: 40% 100%;
  mask-image: url(/assets/syldra/mask-25c752a9d6f34482c889e97cb504fdb2ec4831ba959d0e15f0bee1e0f08ff381.png);
  -webkit-mask-image: url(/assets/syldra/mask-25c752a9d6f34482c889e97cb504fdb2ec4831ba959d0e15f0bee1e0f08ff381.png);
  mask-size: 100% 740px;
  -webkit-mask-size: 100% 740px;
  margin-bottom: -60px;
}

/* line 207, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-eyecatch-pc .content {
  position: absolute;
  left: 50%;
  margin-top: 60px;
  width: 336px;
}

/* line 212, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-eyecatch-pc .content .text {
  width: 307px;
  margin-bottom: 40px;
}

/* line 216, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-eyecatch-pc .content h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 28px;
  color: #ffffff;
}

/* line 223, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.beer-eyecatch-pc .content p {
  max-width: 400px;
  font-size: 14px;
  line-height: 23px;
  color: #ffffff;
}

/* line 232, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.movie {
  position: relative;
  background: #E2E5EC;
  padding-top: 80px;
  padding-bottom: 20px;
}

/* line 237, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.movie h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  max-width: 540px;
  margin: 0 auto 40px;
  padding: 0 5%;
}

/* line 245, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.movie h2.video-title {
  margin-top: 80px;
}

/* line 249, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.movie .video-box {
  margin-bottom: 80px;
}

/* line 252, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.movie .video {
  position: relative;
  box-sizing: border-box;
  width: 90%;
  max-width: 640px;
  margin: 0 auto;
}

@media screen and (max-width: 743px) {
  /* line 252, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.movie .video {
    height: 0;
    padding-top: 56.25%;
    max-height: 400px;
  }
}

@media screen and (min-width: 744px) {
  /* line 252, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.movie .video {
    height: 400px;
  }
}

/* line 266, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.movie .video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 640px;
  max-height: 400px;
}

/* line 276, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.movie .video-text {
  width: 90%;
  max-width: 640px;
  margin: 8px auto 0;
  font-size: 14px;
  line-height: 23px;
}

/* line 286, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item {
  padding-top: 80px;
  margin-bottom: 100px;
}

/* line 289, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .accessory {
  background-color: #ffffff;
  width: 310px;
  height: 44px;
  text-align: center;
  margin: 0 auto 12px;
}

/* line 295, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .accessory span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 22px;
  display: block;
  background: linear-gradient(135deg, #81A5FF 0%, #E8B3E2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* line 307, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  margin-bottom: 28px;
}

/* line 315, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block {
  padding: 20px 20px 32px;
  background-color: #ffffff;
  box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.06), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
  border-radius: 20px;
}

@media screen and (min-width: 744px) {
  /* line 315, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.item .item-block {
    display: flex;
    column-gap: 28px;
    align-items: center;
    max-width: 900px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 50px 40px;
  }
}

/* line 330, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block .left img {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

/* line 335, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block .left .price {
  text-align: right;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 16px;
}

@media screen and (max-width: 743px) {
  /* line 335, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.item .item-block .left .price {
    margin-bottom: 24px;
  }
}

@media screen and (min-width: 744px) {
  /* line 335, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.item .item-block .left .price {
    text-align: center;
  }
}

@media screen and (min-width: 744px) {
  /* line 347, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.item .item-block .right {
    flex: 0 0 50%;
  }
}

/* line 351, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block .right .text {
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 32px;
}

/* line 355, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block .right .text.comment {
  margin-top: 8px;
}

/* line 359, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block .right .content {
  display: flex;
  column-gap: 16px;
  margin-bottom: 36px;
}

/* line 363, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block .right .content p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #ffffff;
  background-color: #C7CDCE;
  width: 62px;
}

/* line 372, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block .right .content ul {
  list-style: none;
}

/* line 374, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block .right .content ul li {
  font-size: 14px;
  margin-bottom: 20px;
}

/* line 377, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.item .item-block .right .content ul li:last-child {
  margin-bottom: 0;
}

/* line 387, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.brewery {
  margin-bottom: 60px;
}

/* line 389, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.brewery h2 {
  color: #ffffff;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  margin-bottom: 40px;
}

/* line 396, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.brewery .content {
  max-width: 845px;
  margin: 0 auto;
}

@media screen and (max-width: 743px) {
  /* line 396, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.brewery .content {
    max-width: 320px;
  }
}

@media screen and (min-width: 744px) {
  /* line 396, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.brewery .content {
    display: flex;
    align-items: center;
    column-gap: 32px;
  }
}

/* line 407, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.brewery .content img {
  display: block;
  width: 200px;
  height: 70px;
}

@media screen and (max-width: 743px) {
  /* line 407, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.brewery .content img {
    margin: 0 auto;
    margin-bottom: 40px;
  }
}

/* line 416, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.brewery .content p {
  color: #ffffff;
  font-size: 14px;
  line-height: 23px;
}

/* line 420, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body main section.brewery .content p span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

@media screen and (max-width: 743px) {
  /* line 416, app/assets/stylesheets/campaign/syldra/index.scss */
  #syldra-body main section.brewery .content p {
    text-align: center;
  }
}

/* line 437, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .active.fade-up {
  -webkit-animation: fadeUp 1s linear forwards;
  animation: fadeUp 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* line 453, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .active.fade-left-in {
  -webkit-animation: fadeLeftIn 1s linear forwards;
  animation: fadeLeftIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeLeftIn {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 469, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .active.fade-right-in {
  -webkit-animation: fadeRightIn 1s linear forwards;
  animation: fadeRightIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* line 485, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .active.fade-right-rotate-in {
  -webkit-animation: fadeRightRotateIn 1s linear forwards;
  animation: fadeRightRotateIn 1s linear forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeRightRotateIn {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(15deg);
  }
}

/* line 503, app/assets/stylesheets/campaign/syldra/index.scss */
#syldra-body .animated {
  opacity: 0;
}

/* line 8, app/assets/stylesheets/vars.scss */
:root {
  --font-english: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-condensed: Barlow Condensed, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  --font-japanese: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
}

/* line 3, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index {
  width: 100%;
  background: #474d50;
}

/* line 6, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index h1, #jba-index h2, #jba-index p {
  color: #222222;
  letter-spacing: 0.04em;
}

/* line 10, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index .share-footer {
  margin-top: -320px;
  z-index: 3;
}

/* line 14, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main {
  width: 100%;
  max-width: 580px;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #ECEAE3;
  padding-bottom: 284px;
  overflow: hidden;
}

/* line 23, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section {
  margin: 0 auto;
  box-sizing: border-box;
}

/* line 26, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.top {
  width: 100%;
  padding-top: 84px;
  margin-bottom: 56px;
}

/* line 30, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.top img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/* line 36, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.detail {
  margin: 0 auto 48px;
  width: 90%;
}

/* line 39, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.detail h1 {
  font-size: 20px;
  border-left: 8px solid #474d50;
  padding-left: 12px;
  margin-bottom: 12px;
}

/* line 45, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.detail div {
  display: flex;
  margin-bottom: 4px;
}

/* line 48, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.detail div p {
  font-size: 14px;
  line-height: 20px;
}

/* line 52, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.detail div .detail-title {
  width: 64px;
  margin-right: 8px;
}

/* line 56, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.detail div .detail-text {
  flex: 1;
}

/* line 61, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.alert {
  position: relative;
  margin: 0 auto 32px;
  width: 90%;
  border: 1px solid #BC2A21;
  border-radius: 10px;
  padding: 36px 20px 20px;
}

/* line 68, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.alert img {
  position: absolute;
  width: 48px;
  height: 48px;
  top: -24px;
  left: 50%;
  margin-left: -24px;
}

/* line 76, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.alert p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #BC2A21;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* line 84, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content {
  margin: 0 auto 32px;
  width: 90%;
}

/* line 87, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course {
  margin-bottom: 40px;
}

/* line 89, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course img {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 16px;
}

/* line 94, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .course-name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 4px;
}

/* line 100, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .hotel-name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
  color: #D8864E;
}

/* line 107, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .hotel-condition {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

/* line 111, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .hotel-condition span {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  display: inline-block;
  background: #BC2A21;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
  margin-right: 12px;
  padding: 4px 12px;
}

/* line 122, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .exclude-date {
  display: flex;
  margin-bottom: 16px;
}

/* line 125, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .exclude-date p {
  font-size: 12px;
  line-height: 17px;
}

/* line 128, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .exclude-date p:first-child {
  width: 45px;
}

/* line 131, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .exclude-date p:last-child {
  flex: 1;
}

/* line 136, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .hotel-introduction {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
}

/* line 141, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .expired-at {
  font-size: 12px;
  text-align: right;
  margin-bottom: 20px;
}

/* line 145, app/assets/stylesheets/campaign/jba/index.scss */
#jba-index main section.content .course .expired-at span {
  color: #BC2A21;
}

/* line 1, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer {
  width: 100%;
  background: #F7ED27;
}

/* line 6, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}

/* line 12, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main header .logo {
  width: 58px;
}

/* line 15, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main header h1 {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
}

/* line 21, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 21, app/assets/stylesheets/fes/beer_bravo/beer.scss */
  #beer-bravo-beer main section {
    max-width: 415px;
  }
}

/* line 27, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.full {
  width: 100%;
}

/* line 31, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.top {
  position: relative;
}

/* line 33, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.top .frame {
  width: 100%;
  position: absolute;
}

/* line 37, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.top .beer-image {
  width: 100vw;
  height: 100vw;
  max-height: 415px;
  max-width: 415px;
  object-fit: cover;
}

/* line 44, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.top p {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
  text-align: center;
  color: #BC2A21;
  width: 90%;
  padding: 8px 0;
  margin: 0 auto;
}

/* line 56, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .info {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

/* line 64, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .info .brewery-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0px;
  gap: 8px;
}

/* line 71, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .info .brewery-name h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 22px;
}

/* line 80, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .info .brewery-name p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 4px;
  color: #ffffff;
  background-color: #222222;
}

/* line 88, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .info .brewery-logo {
  width: 82px;
  border-radius: 50%;
  border: 2px solid #222222;
}

/* line 94, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .beer-info {
  margin-top: 16px;
}

/* line 96, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .beer-info p {
  margin-top: 4px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
}

/* line 102, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .text {
  margin-top: 20px;
}

/* line 104, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .text h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}

/* line 109, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .text p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 23px;
}

/* line 115, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main section.content .button {
  margin-top: 20px;
}

/* line 120, app/assets/stylesheets/fes/beer_bravo/beer.scss */
#beer-bravo-beer main .dynamic-link {
  display: block;
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: calc(100% - 48px - 44px - 18px);
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  background: linear-gradient(135.2deg, #8A94B8 0%, #90C6D8 77.08%);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #ffffff;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  z-index: 1;
}

/* line 1, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers {
  width: 100%;
  background: #F7ED27;
}

/* line 6, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}

/* line 12, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main header .logo {
  width: 58px;
}

/* line 15, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main header h1 {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
}

/* line 21, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 21, app/assets/stylesheets/fes/beer_bravo/beers.scss */
  #beer-bravo-beers main section {
    max-width: 415px;
  }
}

/* line 27, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main section.full {
  width: 100%;
}

/* line 30, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main section h2 {
  margin-bottom: 28px;
}

/* line 35, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup {
  margin-top: 32px;
}

/* line 37, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup .list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
}

/* line 44, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup .list .item {
  width: calc(50% - 6px);
  margin-bottom: 10px;
  position: relative;
}

/* line 48, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 55, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup .list .item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 3px;
}

/* line 60, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup .list .item p {
  margin-top: 6px;
}

/* line 62, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup .list .item p.brewery {
  font-size: 12px;
  color: #474d50;
}

/* line 66, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup .list .item p.name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 69, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup .list .item p.info {
  font-size: 12px;
  color: #474d50;
}

/* line 73, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .pickup .list .item p.style {
  font-size: 12px;
  color: #474d50;
}

/* line 82, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers {
  margin-top: 28px;
}

/* line 84, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers #edit-address {
  appearance: none;
}

/* line 88, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers .list .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 12px;
  height: 100px;
  margin-top: 20px;
  position: relative;
}

/* line 97, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 104, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers .list .item img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
}

/* line 110, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers .list .item .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
}

/* line 117, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers .list .item .content .brewery {
  font-size: 12px;
  color: #474d50;
}

/* line 121, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers .list .item .content .name {
  font-size: 16px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 20px;
}

/* line 130, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers .list .item .content .style {
  font-size: 10px;
  color: #474d50;
}

/* line 133, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers .list .item .content .style span {
  color: #BC2A21;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* line 138, app/assets/stylesheets/fes/beer_bravo/beers.scss */
#beer-bravo-beers main .beers .list .item .content .text {
  font-size: 12px;
  color: #474d50;
  line-height: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* line 1, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries {
  width: 100%;
  background: #F7ED27;
}

/* line 6, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}

/* line 12, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main header .logo {
  width: 58px;
}

/* line 15, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main header h1 {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
}

/* line 21, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 21, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
  #beer-bravo-breweries main section {
    max-width: 415px;
  }
}

/* line 27, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main section.full {
  width: 100%;
}

/* line 30, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main section h2 {
  margin-bottom: 28px;
}

/* line 35, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main .breweries {
  margin: 32px auto 80px;
}

/* line 37, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main .breweries .list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 5%;
}

/* line 44, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main .breweries .list .item {
  position: relative;
  width: 30%;
  margin-bottom: 16px;
}

/* line 48, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main .breweries .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 55, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main .breweries .list .item img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 3px;
  border: 2px solid #ffffff;
}

/* line 61, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main .breweries .list .item p {
  font-size: 14px;
  margin-top: 6px;
  text-align: center;
}

/* line 65, app/assets/stylesheets/fes/beer_bravo/breweries.scss */
#beer-bravo-breweries main .breweries .list .item p.name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  line-height: 20px;
}

/* line 1, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery {
  width: 100%;
  background: #F7ED27;
}

/* line 6, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}

/* line 12, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main header .logo {
  width: 58px;
}

/* line 15, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main header h1 {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
}

/* line 21, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 21, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
  #beer-bravo-brewery main section {
    max-width: 415px;
  }
}

/* line 27, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.full {
  width: 100%;
}

/* line 31, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.top {
  position: relative;
}

/* line 33, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.top .frame {
  width: 100%;
  position: absolute;
}

/* line 37, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.top .brewery-image {
  width: 100vw;
  height: 100vw;
  max-height: 415px;
  max-width: 415px;
  object-fit: cover;
}

/* line 47, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.content .info {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* line 55, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.content .info .brewery-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0px;
  gap: 6px;
}

/* line 62, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.content .info .brewery-name h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 22px;
}

/* line 71, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.content .info .brewery-name p {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
}

/* line 76, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.content .info .brewery-logo {
  width: 82px;
  border-radius: 50%;
  border: 2px solid #222222;
}

/* line 82, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.content .text {
  margin-top: 20px;
}

/* line 84, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.content .text h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}

/* line 89, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.content .text p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 23px;
}

/* line 95, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.content .button {
  margin-top: 20px;
}

/* line 100, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers {
  margin-top: 40px;
}

/* line 103, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .list .item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 12px;
  height: 100px;
  margin-top: 20px;
}

/* line 112, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .list .item img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
}

/* line 118, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 125, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .list .item .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
}

/* line 132, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .list .item .content .brewery {
  font-size: 12px;
  color: #474d50;
}

/* line 136, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .list .item .content .name {
  font-size: 16px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 20px;
}

/* line 145, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .list .item .content .style {
  font-size: 10px;
  color: #474d50;
}

/* line 148, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .list .item .content .style span {
  color: #BC2A21;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* line 153, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .list .item .content .text {
  font-size: 12px;
  color: #474d50;
  line-height: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* line 165, app/assets/stylesheets/fes/beer_bravo/brewery.scss */
#beer-bravo-brewery main section.beers .button {
  margin-top: 20px;
}

/* line 2, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .share {
  margin-top: 82px !important;
}

/* line 4, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .share h3 {
  font-size: 18px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  text-align: center;
  line-height: 26px;
  margin-bottom: 24px;
}

/* line 11, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .share .illust {
  display: block;
  width: 100%;
  max-width: 358px;
  margin: 0 auto;
}

/* line 17, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .share .share-photo {
  padding: 5% 0;
  background-image: url(/assets/fes/beer_bravo/share-bg-a0b67bf749a1d4eb76d931335e5b393daafdcb6089ac5b73224f897060b60650.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 23, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .share .share-photo img {
  display: block;
  width: 90%;
  margin: 0 auto;
}

/* line 29, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .share .button {
  margin-top: 24px;
}

/* line 32, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .share p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  text-align: center;
  margin-top: 32px;
}

/* line 39, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .app {
  margin-top: 32px !important;
  position: relative;
  background-image: url(/assets/fes/beer_bravo/app_bg-0e36e52981c3545bce41729ad11ca9655561de9e9e90b0481facc1e4f2886c6b.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* line 46, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .app::before {
  content: "";
  padding-top: 100%;
  display: block;
}

/* line 51, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .app .icon {
  position: absolute;
  width: 240px;
  top: 50%;
  left: 50%;
  margin: -135px 0 0 -120px;
}

/* line 58, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .app .buttons {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: -26px;
}

/* line 68, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .app .buttons .ios {
  max-width: 141px;
}

/* line 71, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .app .buttons .android {
  max-width: 175px;
}

/* line 77, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .sponsor {
  margin-top: 82px !important;
  border-top: 1px solid #222222;
  border-bottom: 1px solid #222222;
  padding: 60px 0;
}

/* line 82, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .sponsor .logo {
  display: block;
  width: 232px;
  margin: 0 auto;
}

/* line 87, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .sponsor p {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  text-align: center;
  margin: 40px 0 32px 0;
  letter-spacing: 1px;
}

/* line 93, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .sponsor .otomoni {
  display: block;
  margin: 0 auto;
  width: 231px;
}

/* line 100, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .introduction {
  margin-top: 24px !important;
  margin-bottom: 60px !important;
}

/* line 103, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .introduction .banner {
  width: 100%;
  margin-bottom: 24px;
}

/* line 107, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .introduction .sacoche {
  width: 100%;
  border-radius: 10px;
}

/* line 111, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .introduction p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  text-align: center;
  line-height: 23px;
  margin-bottom: 12px;
}

/* line 116, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .introduction p.note {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  margin-bottom: 24px;
  line-height: 16px;
}

/* line 124, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .introduction .code {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

/* line 128, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .introduction .code input, div.beer-bravo .introduction .code button {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 44px;
  text-align: center;
}

/* line 140, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .introduction .code input {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
  color: #474d50;
  background: #ffffff;
  border-radius: 8px;
}

/* line 147, app/assets/stylesheets/fes/beer_bravo/commons.scss */
div.beer-bravo .introduction .code button {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  background: #566774;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 60px;
}

/* line 1, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index {
  width: 100%;
  background: #F7ED27;
}

/* line 6, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 6, app/assets/stylesheets/fes/beer_bravo/index.scss */
  #beer-bravo-index main section {
    max-width: 415px;
  }
}

/* line 12, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main section.full {
  width: 100%;
}

/* line 15, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main section h2 {
  margin-bottom: 28px;
}

/* line 19, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .top {
  padding-top: 80px;
}

/* line 21, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .top .logo {
  display: block;
  width: 184px;
  height: 219px;
  margin: 0 auto 24px;
}

/* line 27, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .top h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 900;
  font-size: 18px;
  text-align: center;
  margin-bottom: 16px;
}

/* line 32, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .top h1 span {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 1px;
}

/* line 38, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .top ul {
  list-style: none;
  margin-bottom: 12px;
}

/* line 41, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .top ul li {
  margin-top: 4px;
}

/* line 45, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .top p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}

/* line 52, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup {
  margin-top: 82px;
}

/* line 54, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup .list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
}

/* line 61, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup .list .item {
  position: relative;
  width: calc(50% - 6px);
  margin-bottom: 10px;
}

/* line 65, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 72, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup .list .item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 3px;
}

/* line 77, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup .list .item p {
  margin-top: 6px;
}

/* line 79, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup .list .item p.brewery {
  font-size: 12px;
  color: #474d50;
}

/* line 83, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup .list .item p.name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 86, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup .list .item p.info {
  font-size: 12px;
  color: #474d50;
}

/* line 90, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .pickup .list .item p.style {
  font-size: 12px;
  color: #474d50;
}

/* line 99, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .breweries {
  margin-top: 82px;
}

/* line 101, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .breweries .list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 5%;
}

/* line 108, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .breweries .list .item {
  position: relative;
  width: 30%;
  margin-bottom: 16px;
}

/* line 112, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .breweries .list .item img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 3px;
  border: 2px solid #ffffff;
}

/* line 118, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .breweries .list .item p {
  font-size: 14px;
  margin-top: 6px;
  text-align: center;
}

/* line 122, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .breweries .list .item p.name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  line-height: 20px;
}

/* line 127, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .breweries .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 139, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .photo {
  margin-top: 82px;
}

/* line 141, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .photo img.sample {
  border-radius: 10px;
  width: 100%;
}

/* line 145, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .photo p {
  margin-top: 24px;
  line-height: 23px;
}

/* line 151, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .about {
  margin-top: 82px;
}

/* line 153, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .about img.bravo {
  border-radius: 10px;
  width: 100%;
}

/* line 157, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .about p {
  margin-top: 24px;
  line-height: 23px;
}

/* line 160, app/assets/stylesheets/fes/beer_bravo/index.scss */
#beer-bravo-index main .about p a {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  text-decoration: underline;
}

/* line 1, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo {
  /*=============================
  .menu-box
  =============================*/
}

/* line 5, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo .menu-box {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background-color: #222222;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 13px 12px;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4));
  z-index: 100;
}

/* line 18, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo .menu-box .menu-trigger {
  position: relative;
  width: 20px;
  height: 18px;
  display: inline-block;
  transition: all .3s;
  box-sizing: border-box;
}

/* line 27, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo .menu-box .menu-trigger.active span:nth-of-type(1) {
  -webkit-animation: fes-active-bar01 0.75s;
  animation: fes-active-bar01 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 30, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo .menu-box .menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}

/* line 33, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo .menu-box .menu-trigger.active span:nth-of-type(3) {
  -webkit-animation: fes-active-bar03 0.75s;
  animation: fes-active-bar03 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 38, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo .menu-box .menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  border-radius: 4px;
  display: inline-block;
  transition: all .3s;
  box-sizing: border-box;
}

/* line 48, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo .menu-box .menu-trigger span:nth-of-type(1) {
  top: 0;
  -webkit-animation: fes-bar01 0.75s;
  animation: fes-bar01 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 52, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo .menu-box .menu-trigger span:nth-of-type(2) {
  top: 8px;
  transition: all .25s .25s;
  opacity: 1;
}

/* line 57, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo .menu-box .menu-trigger span:nth-of-type(3) {
  bottom: 0;
  -webkit-animation: fes-bar03 0.75s;
  animation: fes-bar03 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fes-bar01 {
  0% {
    transform: translateY(8px) rotate(45deg);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes fes-bar03 {
  0% {
    transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes fes-active-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(8px) rotate(45deg);
  }
}

@keyframes fes-active-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* line 108, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo #navigation {
  position: fixed;
  top: 0px;
  left: 100%;
  bottom: 0px;
  width: 100%;
  overflow: auto;
  background-color: #474d50;
  box-sizing: border-box;
  padding: 60px 24px 70px;
  z-index: 50;
}

/* line 119, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo #navigation.active {
  width: 100%;
  -webkit-animation: slideIn 0.5s;
  animation: slideIn 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 123, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo #navigation.inactive {
  width: 100%;
  -webkit-animation: slideOut 0.5s;
  animation: slideOut 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 127, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo #navigation ul {
  list-style: none;
}

/* line 129, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo #navigation ul li {
  height: 53px;
}

/* line 131, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo #navigation ul li:not(:nth-child(1)) {
  margin-top: 40px;
}

/* line 134, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo #navigation ul li a {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  -webkit-animation: changeWhite 0.5s;
  animation: changeWhite 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 141, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo #navigation ul li a .en {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
}

/* line 148, app/assets/stylesheets/fes/beer_bravo/menu.scss */
div.beer-bravo #navigation ul li a:hover, div.beer-bravo #navigation ul li a:active {
  color: #ffffff;
  -webkit-animation: changeYellow 0.5s;
  animation: changeYellow 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes changeWhite {
  0% {
    color: #F7ED27;
  }
  100% {
    color: #ffffff;
  }
}

@keyframes changeYellow {
  0% {
    color: #ffffff;
  }
  100% {
    color: #F7ED27;
  }
}

/* line 2, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main {
  width: 100%;
  margin: 0 auto;
  background: #3A7C37;
}

@media screen and (min-width: 415px) {
  /* line 2, app/assets/stylesheets/fes/nodai/beer.scss */
  #nodai-beer main {
    max-width: 415px;
    border-left: solid 2px #E1DEC5;
    border-right: solid 2px #E1DEC5;
  }
}

/* line 12, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}

/* line 18, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main header .logo {
  width: 58px;
}

/* line 21, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main header h1 {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
}

/* line 27, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 27, app/assets/stylesheets/fes/nodai/beer.scss */
  #nodai-beer main section {
    max-width: 415px;
  }
}

/* line 33, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.full {
  width: 100%;
}

/* line 37, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.top {
  position: relative;
}

/* line 39, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.top .frame {
  width: 100%;
  position: absolute;
}

/* line 43, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.top .beer-image {
  width: 100vw;
  height: 100vw;
  max-height: 415px;
  max-width: 415px;
  object-fit: cover;
}

/* line 50, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.top p {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
  text-align: center;
  color: #BC2A21;
  width: 90%;
  padding: 8px 0;
  margin: 0 auto;
}

/* line 62, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .info {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

/* line 70, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .info .brewery-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0px;
  gap: 8px;
}

/* line 77, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .info .brewery-name h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 22px;
  color: white;
}

/* line 87, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .info .brewery-name p {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 4px;
  color: #ffffff;
  background-color: #222222;
}

/* line 95, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .info .brewery-logo {
  width: 82px;
  border-radius: 50%;
  border: 2px solid #222222;
}

/* line 101, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .beer-info {
  margin-top: 16px;
}

/* line 103, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .beer-info p {
  margin-top: 4px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: white;
}

/* line 110, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .text {
  margin-top: 20px;
}

/* line 112, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .text h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: white;
}

/* line 118, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .text p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 23px;
  color: white;
  word-break: break-all;
}

/* line 126, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main section.content .button {
  margin-top: 20px;
}

/* line 131, app/assets/stylesheets/fes/nodai/beer.scss */
#nodai-beer main .dynamic-link {
  display: block;
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: calc(100% - 48px - 44px - 18px);
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  background: linear-gradient(135.2deg, #8A94B8 0%, #90C6D8 77.08%);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #ffffff;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 14px;
  z-index: 1;
}

/* line 2, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main {
  width: 100%;
  margin: 0 auto;
  background: #3A7C37;
}

@media screen and (min-width: 415px) {
  /* line 2, app/assets/stylesheets/fes/nodai/beers.scss */
  #nodai-beers main {
    max-width: 415px;
    border-left: solid 2px #E1DEC5;
    border-right: solid 2px #E1DEC5;
  }
}

/* line 12, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}

/* line 18, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main header .logo {
  width: 58px;
}

/* line 21, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main header h1 {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
  color: white;
}

/* line 28, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 28, app/assets/stylesheets/fes/nodai/beers.scss */
  #nodai-beers main section {
    max-width: 415px;
  }
}

/* line 34, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main section.full {
  width: 100%;
}

/* line 37, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main section h2 {
  margin-bottom: 28px;
}

/* line 42, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup {
  margin-top: 32px;
}

/* line 44, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup .list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
}

/* line 51, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup .list .item {
  width: calc(50% - 6px);
  margin-bottom: 10px;
  position: relative;
}

/* line 55, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 62, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup .list .item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 3px;
}

/* line 67, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup .list .item p {
  margin-top: 6px;
}

/* line 69, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup .list .item p.brewery {
  font-size: 12px;
  color: white;
}

/* line 73, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup .list .item p.name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: white;
}

/* line 77, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup .list .item p.info {
  font-size: 12px;
  color: white;
}

/* line 81, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .pickup .list .item p.style {
  font-size: 12px;
  color: white;
}

/* line 90, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers {
  margin-top: 28px;
}

/* line 92, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers #edit-address {
  appearance: none;
}

/* line 96, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers .list .item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 12px;
  height: 100px;
  margin-top: 20px;
  position: relative;
}

/* line 105, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 112, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers .list .item img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
}

/* line 118, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers .list .item .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
}

/* line 125, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers .list .item .content .brewery {
  font-size: 12px;
  color: white;
}

/* line 129, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers .list .item .content .name {
  font-size: 16px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 20px;
  color: white;
}

/* line 139, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers .list .item .content .style {
  font-size: 10px;
  color: white;
}

/* line 142, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers .list .item .content .style span {
  color: #BC2A21;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* line 147, app/assets/stylesheets/fes/nodai/beers.scss */
#nodai-beers main .beers .list .item .content .text {
  font-size: 12px;
  color: white;
  line-height: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

/* line 2, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main {
  width: 100%;
  margin: 0 auto;
  background: #3A7C37;
}

@media screen and (min-width: 415px) {
  /* line 2, app/assets/stylesheets/fes/nodai/breweries.scss */
  #nodai-breweries main {
    max-width: 415px;
    border-left: solid 2px #E1DEC5;
    border-right: solid 2px #E1DEC5;
  }
}

/* line 12, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}

/* line 18, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main header .logo {
  width: 58px;
}

/* line 21, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main header h1 {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
  color: white;
}

/* line 28, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 28, app/assets/stylesheets/fes/nodai/breweries.scss */
  #nodai-breweries main section {
    max-width: 415px;
  }
}

/* line 34, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main section.full {
  width: 100%;
}

/* line 37, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main section h2 {
  margin-bottom: 28px;
}

/* line 42, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main .breweries {
  margin: 32px auto 80px;
}

/* line 44, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main .breweries .list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 5%;
}

/* line 51, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main .breweries .list .item {
  position: relative;
  width: 30%;
  margin-bottom: 16px;
}

/* line 55, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main .breweries .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 62, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main .breweries .list .item img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 3px;
  border: 2px solid #ffffff;
}

/* line 68, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main .breweries .list .item p {
  font-size: 14px;
  margin-top: 6px;
  text-align: center;
  color: white;
}

/* line 73, app/assets/stylesheets/fes/nodai/breweries.scss */
#nodai-breweries main .breweries .list .item p.name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  line-height: 20px;
}

/* line 2, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main {
  width: 100%;
  margin: 0 auto;
  background: #3A7C37;
}

@media screen and (min-width: 415px) {
  /* line 2, app/assets/stylesheets/fes/nodai/brewery.scss */
  #nodai-brewery main {
    max-width: 415px;
    border-left: solid 2px #E1DEC5;
    border-right: solid 2px #E1DEC5;
  }
}

/* line 12, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
}

/* line 18, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main header .logo {
  width: 58px;
}

/* line 21, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main header h1 {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 2px;
}

/* line 27, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 27, app/assets/stylesheets/fes/nodai/brewery.scss */
  #nodai-brewery main section {
    max-width: 415px;
  }
}

/* line 33, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.full {
  width: 100%;
}

/* line 37, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.top {
  position: relative;
}

/* line 39, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.top .frame {
  width: 100%;
  position: absolute;
}

/* line 43, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.top .brewery-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* line 51, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.content .info {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* line 59, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.content .info .brewery-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0px;
  gap: 6px;
}

/* line 66, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.content .info .brewery-name h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 22px;
  color: white;
}

/* line 76, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.content .info .brewery-name p {
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
  color: white;
}

/* line 82, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.content .info .brewery-logo {
  width: 82px;
  border-radius: 50%;
  border: 2px solid #222222;
}

/* line 88, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.content .text {
  margin-top: 20px;
}

/* line 90, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.content .text h2 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  color: white;
}

/* line 96, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.content .text p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 23px;
  color: white;
  word-break: break-all;
}

/* line 104, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.content .button {
  margin-top: 20px;
}

/* line 109, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers {
  margin-top: 40px;
}

/* line 111, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers h2 {
  color: white;
}

/* line 115, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .list .item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 12px;
  height: 100px;
  margin-top: 20px;
}

/* line 124, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .list .item img {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
}

/* line 130, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 137, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .list .item .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
}

/* line 144, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .list .item .content .brewery {
  font-size: 12px;
  color: white;
}

/* line 148, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .list .item .content .name {
  font-size: 16px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  color: white;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 20px;
}

/* line 158, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .list .item .content .style {
  font-size: 10px;
  color: white;
}

/* line 161, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .list .item .content .style span {
  color: #BC2A21;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* line 166, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .list .item .content .text {
  font-size: 12px;
  color: white;
  line-height: 15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

/* line 179, app/assets/stylesheets/fes/nodai/brewery.scss */
#nodai-brewery main section.beers .button {
  margin-top: 20px;
}

/* line 1, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai {
  width: 100%;
  background: url(/assets/fes/nodai/bg-e43d5c628b8d474334bdba4f7c9fbd8fd23cf9fb968dedbc28a926ff7201f178.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  /*=============================
  .menu-box
  =============================*/
}

/* line 8, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .stars {
  display: block;
  margin: 60px auto;
}

/* line 12, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .pc-side {
  display: none;
  position: fixed;
  top: 0;
  width: 31px;
  height: 100vh;
  background: url(/assets/fes/nodai/side-27065e9146b1fb87eeca86b190024ecff8b7c70f67f5ac6eb40cfd4c13b4e325.svg) repeat-y center center;
  background-color: #3A7C37;
  padding: 0 4px;
  border-left: solid 2px #E1DEC5;
}

@media screen and (min-width: 415px) {
  /* line 12, app/assets/stylesheets/fes/nodai/commons.scss */
  div.nodai .pc-side {
    display: block;
  }
}

/* line 25, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .pc-side.left {
  display: block;
  left: 50%;
  transform: translateX(-251px);
}

/* line 30, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .pc-side.right {
  display: block;
  right: 50%;
  transform: translateX(251px) rotate(180deg);
}

/* line 36, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai footer {
  width: 90%;
  margin: 0 auto;
  padding: 40px 0 60px;
  text-align: center;
}

@media screen and (min-width: 415px) {
  /* line 36, app/assets/stylesheets/fes/nodai/commons.scss */
  div.nodai footer {
    max-width: 415px;
  }
}

/* line 44, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai footer .sns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

/* line 52, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai footer .sns a img {
  width: 32px;
  height: 32px;
}

/* line 56, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai footer .sns a span {
  margin-top: 8px;
  display: block;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 14px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 67, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai footer a.footer-link {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-align: center;
  text-decoration: underline;
  color: white;
}

/* line 74, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai footer p.organization {
  margin-top: 60px;
  font-size: 12px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: white;
}

/* line 84, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .menu-box {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background-color: #222222;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 13px 12px;
  filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4));
  z-index: 100;
}

/* line 97, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .menu-box .menu-trigger {
  position: relative;
  width: 20px;
  height: 18px;
  display: inline-block;
  transition: all .3s;
  box-sizing: border-box;
}

/* line 106, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .menu-box .menu-trigger.active span:nth-of-type(1) {
  -webkit-animation: fes-active-bar01 0.75s;
  animation: fes-active-bar01 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 109, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .menu-box .menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}

/* line 112, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .menu-box .menu-trigger.active span:nth-of-type(3) {
  -webkit-animation: fes-active-bar03 0.75s;
  animation: fes-active-bar03 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 117, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .menu-box .menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  border-radius: 4px;
  display: inline-block;
  transition: all .3s;
  box-sizing: border-box;
}

/* line 127, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .menu-box .menu-trigger span:nth-of-type(1) {
  top: 0;
  -webkit-animation: fes-bar01 0.75s;
  animation: fes-bar01 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 131, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .menu-box .menu-trigger span:nth-of-type(2) {
  top: 8px;
  transition: all .25s .25s;
  opacity: 1;
}

/* line 136, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai .menu-box .menu-trigger span:nth-of-type(3) {
  bottom: 0;
  -webkit-animation: fes-bar03 0.75s;
  animation: fes-bar03 0.75s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fes-bar01 {
  0% {
    transform: translateY(8px) rotate(45deg);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes fes-bar03 {
  0% {
    transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes fes-active-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(8px) rotate(45deg);
  }
}

@keyframes fes-active-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* line 187, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai #navigation {
  position: fixed;
  top: 0px;
  left: 100%;
  bottom: 0px;
  width: 100%;
  overflow: auto;
  background-color: #E1DEC5;
  box-sizing: border-box;
  padding: 60px 24px 70px;
  z-index: 50;
}

/* line 198, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai #navigation.active {
  width: 100%;
  -webkit-animation: slideIn 0.5s;
  animation: slideIn 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 202, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai #navigation.inactive {
  width: 100%;
  -webkit-animation: slideOut 0.5s;
  animation: slideOut 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 206, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai #navigation ul {
  list-style: none;
}

/* line 208, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai #navigation ul li {
  height: 53px;
}

/* line 210, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai #navigation ul li:not(:nth-child(1)) {
  margin-top: 40px;
}

/* line 213, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai #navigation ul li a {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  -webkit-animation: changeWhite 0.5s;
  animation: changeWhite 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* line 220, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai #navigation ul li a .en {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
}

/* line 227, app/assets/stylesheets/fes/nodai/commons.scss */
div.nodai #navigation ul li a:hover, div.nodai #navigation ul li a:active {
  color: #ffffff;
  -webkit-animation: changeYellow 0.5s;
  animation: changeYellow 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes changeWhite {
  0% {
    color: #3A7C37;
  }
  100% {
    color: #222222;
  }
}

@keyframes changeYellow {
  0% {
    color: #222222;
  }
  100% {
    color: #3A7C37;
  }
}

/* line 2, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index .divider {
  position: absolute;
  width: 100%;
  left: 0;
}

/* line 6, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index .divider.up {
  transform: rotate(180deg);
  bottom: 0;
}

/* line 10, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index .divider.down {
  top: 0;
}

/* line 14, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index .flash {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 390px;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  z-index: 1000;
  opacity: 0.95;
  animation: fadeIn 0.5s ease, fadeOut 0.5s ease 4.5s;
  background: white;
}

/* line 30, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main {
  width: 100%;
  margin: 0 auto;
  background: #3A7C37;
}

@media screen and (min-width: 415px) {
  /* line 30, app/assets/stylesheets/fes/nodai/index.scss */
  #nodai-index main {
    max-width: 415px;
    border-left: solid 2px #E1DEC5;
    border-right: solid 2px #E1DEC5;
  }
}

/* line 39, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main section {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 39, app/assets/stylesheets/fes/nodai/index.scss */
  #nodai-index main section {
    max-width: 415px;
  }
}

/* line 45, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main section.full {
  width: 100%;
}

/* line 48, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main section h2 {
  margin-bottom: 28px;
  font-size: 32px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #E1DEC5;
  text-align: center;
}

/* line 56, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .top {
  position: relative;
}

/* line 58, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .top .top-image {
  width: 100%;
}

/* line 61, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .top .divider {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* line 66, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .top h1 {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 900;
  font-size: 18px;
  text-align: center;
  margin-bottom: 16px;
}

/* line 71, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .top h1 span {
  font-size: 40px;
  font-family: Barlow, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 1px;
}

/* line 80, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .info img {
  display: block;
  margin: 20px auto 0;
}

/* line 87, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .pickup .list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
}

/* line 94, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .pickup .list .item {
  position: relative;
  width: calc(50% - 6px);
  margin-bottom: 10px;
}

/* line 98, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .pickup .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 105, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .pickup .list .item img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 3px;
}

/* line 110, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .pickup .list .item p {
  margin-top: 6px;
}

/* line 112, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .pickup .list .item p.brewery {
  font-size: 12px;
  color: #E1DEC5;
}

/* line 116, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .pickup .list .item p.name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  color: #E1DEC5;
}

/* line 120, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .pickup .list .item p.info {
  font-size: 12px;
  color: #E1DEC5;
}

/* line 124, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .pickup .list .item p.style {
  font-size: 12px;
  color: #E1DEC5;
}

/* line 134, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .breweries .list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 5%;
}

/* line 141, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .breweries .list .item {
  position: relative;
  width: 30%;
  margin-bottom: 16px;
}

/* line 145, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .breweries .list .item img {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 3px;
  border: 2px solid #ffffff;
}

/* line 151, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .breweries .list .item p {
  font-size: 14px;
  margin-top: 6px;
  text-align: center;
  color: #E1DEC5;
}

/* line 156, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .breweries .list .item p.name {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  line-height: 20px;
}

/* line 161, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .breweries .list .item a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

/* line 174, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .about img {
  display: block;
  margin: 0 auto;
}

/* line 178, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .about p {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  background: #E1DEC5;
  color: #3A7C37;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  line-height: 24px;
}

/* line 193, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .event {
  margin: 50px auto 0;
}

/* line 195, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .event p {
  color: white;
  text-align: center;
  margin-bottom: 8px;
}

/* line 199, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .event p.note {
  font-size: 12px;
}

/* line 202, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .event p.bold {
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
}

/* line 207, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .contact {
  position: relative;
  background: #E1DEC5;
  padding: 60px 0;
}

/* line 211, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .contact h3 {
  color: #222222;
  font-size: 24px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}

/* line 218, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .contact .divider {
  bottom: -1px;
}

/* line 221, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .contact form {
  width: 90%;
  margin: 0 auto;
}

@media screen and (min-width: 415px) {
  /* line 221, app/assets/stylesheets/fes/nodai/index.scss */
  #nodai-index main .contact form {
    max-width: 415px;
  }
}

/* line 227, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .contact form .button.fill.nodai-green {
  border: solid 1px #3A7C37;
  background-color: #3A7C37;
}

/* line 231, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .contact form .button.fill.nodai-green:active, #nodai-index main .contact form .button.fill.nodai-green:hover {
  background-color: white;
  color: #3A7C37;
}

/* line 236, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .contact form .required {
  color: #BC2A21;
}

/* line 239, app/assets/stylesheets/fes/nodai/index.scss */
#nodai-index main .contact form .alert {
  color: #BC2A21;
  font-size: 12px;
  font-family: Noto Sans JP, Helvetica Neue, Helvetica, Hiragino Sans, Hiragino Kaku Gothic ProN, Arial, Yu Gothic, Meiryo, sans-serif;
  font-weight: 700;
  margin-top: 12px;
}

/* line 2, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main {
  width: 100%;
  margin: 0 auto;
  background: #3A7C37;
}

@media screen and (min-width: 415px) {
  /* line 2, app/assets/stylesheets/fes/nodai/privacy.scss */
  #nodai-privacy main {
    max-width: 415px;
    border-left: solid 2px #E1DEC5;
    border-right: solid 2px #E1DEC5;
  }
}

/* line 12, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 0;
  margin-bottom: 24px;
}

/* line 19, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main header .logo {
  width: 58px;
}

/* line 23, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main section {
  width: 90%;
  margin: 0 auto 32px;
}

@media screen and (min-width: 415px) {
  /* line 23, app/assets/stylesheets/fes/nodai/privacy.scss */
  #nodai-privacy main section {
    max-width: 415px;
  }
}

/* line 29, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main section.full {
  width: 100%;
}

/* line 32, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main section h1 {
  color: white;
  font-size: 24px;
  margin-bottom: 12px;
}

/* line 37, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main section h2 {
  color: white;
  margin-bottom: 12px;
}

/* line 41, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main section p {
  color: white;
  line-height: 1.2em;
}

/* line 45, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main section ul {
  list-style: none;
  margin-top: 12px;
}

/* line 48, app/assets/stylesheets/fes/nodai/privacy.scss */
#nodai-privacy main section ul li {
  color: white;
  line-height: 1.2em;
}