@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Zen+Antique&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap");
.ginandtonic {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Zen Old Mincho", serif;
}
.ginandtonic img {
  display: block;
  width: 100%;
}
.ginandtonic ul, .ginandtonic li {
  list-style: none;
}

/* ------------------------------------
   Reset
------------------------------------ */
/*!
 * ress.css • v4.0.0
 * MIT License
 * github.com/filipelinhares/ress
 */
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  word-break: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

*, :after, :before {
  background-repeat: no-repeat;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

:after, :before {
  text-decoration: inherit;
  vertical-align: inherit;
}

* {
  padding: 0;
  margin: 0;
}

hr {
  overflow: visible;
  height: 0;
  color: inherit;
}

details, main {
  display: block;
}

summary {
  display: list-item;
}

small {
  font-size: 80%;
}

[hidden] {
  display: none;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

a {
  background-color: transparent;
}

a:active, a:hover {
  outline-width: 0;
}

code, kbd, pre, samp {
  font-family: monospace, monospace;
}

pre {
  font-size: 1em;
}

b, strong {
  font-weight: bolder;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  border-color: inherit;
  text-indent: 0;
}

input {
  border-radius: 0;
}

[disabled] {
  cursor: default;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

button, input, optgroup, select, textarea {
  font: inherit;
}

optgroup {
  font-weight: 700;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

[role=button], [type=button], [type=reset], [type=submit], button {
  cursor: pointer;
  color: inherit;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button;
}

button, input, select, textarea {
  background-color: transparent;
  border-style: none;
}

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline-width: 0;
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

legend {
  border: 0;
  color: inherit;
  display: table;
  white-space: normal;
  max-width: 100%;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  color: inherit;
  font: inherit;
}

img {
  border-style: none;
}

progress {
  vertical-align: baseline;
}

[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled=true] {
  cursor: default;
}

@media screen and (min-width: 768px) {
  .ginandtonic-wrapper {
    position: relative;
  }
}

@media screen and (max-width: 767px) {
  .ginandtonic-bg {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bg {
    position: -webkit-sticky;
    position: sticky;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../images/ginandtonic_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media screen and (max-width: 767px) {
  .ginandtonic {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic {
    width: 512px;
    margin-inline: auto;
    margin-top: -100vh;
  }
}
.ginandtonic .js-fadein-target {
  opacity: 0;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
}
.ginandtonic .js-fadein-target.js-active {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

.ginandtonic-kv {
  width: 100%;
}

.ginandtonic-content {
  position: relative;
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .ginandtonic-content {
    padding-top: 11.3333333333vw;
    padding-bottom: 9.8666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-content {
    padding-top: 58.0266666667px;
    padding-bottom: 50.5173333333px;
  }
}

.ginandtonic__logo {
  position: absolute;
}
@media screen and (max-width: 767px) {
  .ginandtonic__logo {
    width: 34.5333333333vw;
    right: 2.6666666667vw;
    top: -21.0666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic__logo {
    width: 176.8106666667px;
    right: 13.6533333333px;
    top: -107.8613333333px;
  }
}

@media screen and (max-width: 767px) {
  .ginandtonic-ttl .ginandtonic-ttl__img--01 {
    width: 76.2666666667vw;
    margin-left: 22.1333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-ttl .ginandtonic-ttl__img--01 {
    width: 390.4853333333px;
    margin-left: 113.3226666667px;
  }
}
.ginandtonic-ttl .ginandtonic-ttl__img--02 {
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .ginandtonic-ttl .ginandtonic-ttl__img--02 {
    width: 90.6666666667vw;
    margin-top: 1.2vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-ttl .ginandtonic-ttl__img--02 {
    width: 464.2133333333px;
    margin-top: 6.144px;
  }
}

.ginandtonic__txt {
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .ginandtonic__txt {
    width: 90.6666666667vw;
    margin-top: 5.4666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic__txt {
    width: 464.2133333333px;
    margin-top: 27.9893333333px;
  }
}

.ginandtonic-material {
  background-color: #F6F5EB;
}

.ginandtonic-material-container {
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .ginandtonic-material-container {
    width: 90.5333333333vw;
    padding-top: 4.4vw;
    padding-bottom: 10.9333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-material-container {
    width: 463.5306666667px;
    padding-top: 22.528px;
    padding-bottom: 55.9786666667px;
  }
}

.ginandtonic-material__txt {
  font-family: "Zen Antique", serif;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .ginandtonic-material__txt {
    font-size: 4.2666666667vw;
    margin-top: 6vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-material__txt {
    font-size: 21.8453333333px;
    margin-top: 30.72px;
  }
}

.ginandtonic-material-content {
  position: relative;
}
@media screen and (max-width: 767px) {
  .ginandtonic-material-content {
    margin-top: 6.5333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-material-content {
    margin-top: 33.4506666667px;
  }
}

.ginandtonic-material__img {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

.ginandtonic-material-items {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-inline: auto;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .ginandtonic-material-items {
    width: 84.5333333333vw;
    padding-top: 4vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-material-items {
    width: 432.8106666667px;
    padding-top: 20.48px;
  }
}

@media screen and (max-width: 767px) {
  .ginandtonic-material-list {
    width: 36.5333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-material-list {
    width: 187.0506666667px;
  }
}

.ginandtonic-material-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media screen and (max-width: 767px) {
  .ginandtonic-material-list {
    row-gap: 6.5333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-material-list {
    row-gap: 33.4506666667px;
  }
}

@media screen and (max-width: 767px) {
  .ginandtonic-material-list--right {
    margin-top: 14.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-material-list--right {
    margin-top: 75.776px;
  }
}

.ginandtonic-material-list__item {
  width: 100%;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
.ginandtonic-material-list__item--01 {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
}
.ginandtonic-material-list__item--02 {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.ginandtonic-material-list__item--03 {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}
.ginandtonic-material-list__item--04 {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}
.ginandtonic-material-list__item--05 {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}
.ginandtonic-material-list__item--06 {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}
.ginandtonic-material-list__item--07 {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}
.ginandtonic-material-list__item--08 {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}

@media screen and (max-width: 767px) {
  .ginandtonic-product-contents {
    padding-top: 5.2vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-product-contents {
    padding-top: 26.624px;
  }
}

.ginandtonic-product-contents-top {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .ginandtonic-product-contents-top {
    width: 91.0666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-product-contents-top {
    width: 466.2613333333px;
  }
}

.ginandtonic-product-contents-top__ttl--02 {
  font-weight: 900;
  font-family: "Noto Serif JP", serif;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  line-height: 1.28;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .ginandtonic-product-contents-top__ttl--02 {
    font-size: 6.9333333333vw;
    margin-top: -0.5333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-product-contents-top__ttl--02 {
    font-size: 35.4986666667px;
    margin-top: -2.7306666667px;
  }
}

.ginandtonic-product-contents-center {
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  .ginandtonic-product-contents-center {
    width: 48.4666666667vw;
    padding-bottom: 8.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-product-contents-center {
    width: 248.1493333333px;
    padding-bottom: 45.056px;
  }
}

.ginandtonic-product-contents-center__img--01 {
  position: relative;
  z-index: 2;
}

.ginandtonic-product-contents-center__img--02 {
  position: absolute;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .ginandtonic-product-contents-center__img--02 {
    width: 34.1333333333vw;
    right: -23.2vw;
    bottom: 1.2vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-product-contents-center__img--02 {
    width: 174.7626666667px;
    right: -118.784px;
    bottom: 6.144px;
  }
}

.ginandtonic-product-contents-bottom {
  border-top: 1px #fff solid;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .ginandtonic-product-contents-bottom {
    width: 89.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-product-contents-bottom {
    width: 457.3866666667px;
  }
}

.ginandtonic-product-contents-bottom-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.ginandtonic-product-contents-bottom__img {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

.ginandtonic-product-contents-bottom__txt {
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.12em;
}
@media screen and (max-width: 767px) {
  .ginandtonic-product-contents-bottom__txt {
    font-size: 4vw;
    margin-top: 2.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-product-contents-bottom__txt {
    font-size: 20.48px;
    margin-top: 14.336px;
  }
}

.ginandtonic-original {
  background-color: #00A26E;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .ginandtonic-original .ginandtonic-product-contents-top__ttl--01 {
    width: 60.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-original .ginandtonic-product-contents-top__ttl--01 {
    width: 311.296px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-original .ginandtonic-product-contents-center {
    margin-top: -39.6vw;
    padding-bottom: 8.8vw;
    width: 48.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-original .ginandtonic-product-contents-center {
    margin-top: -202.752px;
    padding-bottom: 45.056px;
    width: 249.856px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-original .ginandtonic-product-contents-bottom {
    padding: 2.5333333333vw 1.3333333333vw 3.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-original .ginandtonic-product-contents-bottom {
    padding: 12.9706666667px 6.8266666667px 17.0666666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-original .ginandtonic-product-contents-bottom-inner {
    -webkit-column-gap: 5.7333333333vw;
       -moz-column-gap: 5.7333333333vw;
            column-gap: 5.7333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-original .ginandtonic-product-contents-bottom-inner {
    -webkit-column-gap: 29.3546666667px;
       -moz-column-gap: 29.3546666667px;
            column-gap: 29.3546666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-original .ginandtonic-product-contents-bottom__img {
    width: 44.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-original .ginandtonic-product-contents-bottom__img {
    width: 229.376px;
  }
}

.ginandtonic-orange {
  background-color: #FC9239;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .ginandtonic-orange .ginandtonic-product-contents-top__ttl--01 {
    width: 52.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-orange .ginandtonic-product-contents-top__ttl--01 {
    width: 269.6533333333px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-orange .ginandtonic-product-contents-center {
    margin-top: -33.3333333333vw;
    padding-bottom: 10.1333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-orange .ginandtonic-product-contents-center {
    margin-top: -170.6666666667px;
    padding-bottom: 51.8826666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-orange .ginandtonic-product-contents-bottom {
    padding: 2.5333333333vw 1.3333333333vw 3.7333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-orange .ginandtonic-product-contents-bottom {
    padding: 12.9706666667px 6.8266666667px 19.1146666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-orange .ginandtonic-product-contents-bottom-inner {
    -webkit-column-gap: 5.7333333333vw;
       -moz-column-gap: 5.7333333333vw;
            column-gap: 5.7333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-orange .ginandtonic-product-contents-bottom-inner {
    -webkit-column-gap: 29.3546666667px;
       -moz-column-gap: 29.3546666667px;
            column-gap: 29.3546666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-orange .ginandtonic-product-contents-bottom__img {
    width: 44.5333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-orange .ginandtonic-product-contents-bottom__img {
    width: 228.0106666667px;
  }
}

.ginandtonic-lychee {
  background-color: #E96270;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .ginandtonic-lychee .ginandtonic-product-contents-top__ttl--01 {
    width: 47.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-lychee .ginandtonic-product-contents-top__ttl--01 {
    width: 242.3466666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-lychee .ginandtonic-product-contents-center {
    margin-top: -33.2vw;
    padding-bottom: 10vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-lychee .ginandtonic-product-contents-center {
    margin-top: -169.984px;
    padding-bottom: 51.2px;
  }
}
.ginandtonic-lychee .ginandtonic-product-contents-center__label {
  position: absolute;
}
@media screen and (max-width: 767px) {
  .ginandtonic-lychee .ginandtonic-product-contents-center__label {
    width: 20.8vw;
    top: -3.7333333333vw;
    left: -21.4666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-lychee .ginandtonic-product-contents-center__label {
    width: 106.496px;
    top: -19.1146666667px;
    left: -109.9093333333px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-lychee .ginandtonic-product-contents-bottom {
    padding: 2.5333333333vw 0vw 3.8666666667vw 1.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-lychee .ginandtonic-product-contents-bottom {
    padding: 12.9706666667px 0 19.7973333333px 6.8266666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-lychee .ginandtonic-product-contents-bottom-inner {
    -webkit-column-gap: 4.2666666667vw;
       -moz-column-gap: 4.2666666667vw;
            column-gap: 4.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-lychee .ginandtonic-product-contents-bottom-inner {
    -webkit-column-gap: 21.8453333333px;
       -moz-column-gap: 21.8453333333px;
            column-gap: 21.8453333333px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-lychee .ginandtonic-product-contents-bottom__img {
    width: 46.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-lychee .ginandtonic-product-contents-bottom__img {
    width: 236.8853333333px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-lychee .ginandtonic-product-contents-bottom__txt {
    margin-top: -2.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-lychee .ginandtonic-product-contents-bottom__txt {
    margin-top: -13.6533333333px;
  }
}

.ginandtonic-bar {
  background-color: #F6F5EB;
}

.ginandtonic-bar-container {
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-container {
    width: 92.1333333333vw;
    padding-top: 4.4vw;
    padding-bottom: 2.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-container {
    width: 471.7226666667px;
    padding-top: 22.528px;
    padding-bottom: 11.6053333333px;
  }
}

.ginandtonic-bar__txt {
  font-family: "Zen Antique", serif;
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar__txt {
    font-size: 4.2666666667vw;
    margin-top: 6vw;
    line-height: 1.5;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar__txt {
    font-size: 21.8453333333px;
    margin-top: 30.72px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 767px) {
  .ginandtonic-bar-list {
    margin-top: 6.5333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list {
    margin-top: 33.4506666667px;
  }
}

.ginandtonic-bar-list-item {
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item + .ginandtonic-bar-list-item {
    margin-top: 2.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item + .ginandtonic-bar-list-item {
    margin-top: 14.336px;
  }
}

.ginandtonic-bar-list-item__head {
  display: block;
}

.ginandtonic-bar-list-item__ttl {
  font-family: "Noto Serif JP", serif;
  font-weight: 900;
  line-height: 1.17;
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item__ttl {
    font-size: 6vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item__ttl {
    font-size: 30.72px;
  }
}

.ginandtonic-bar-list-item__txt {
  font-family: "Zen Old Mincho", serif;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item__txt {
    font-size: 3.7333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item__txt {
    font-size: 19.1146666667px;
  }
}

.ginandtonic-bar-list-item--01 {
  background-image: url(../images/ginandtonic_bar_frame01.svg);
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--01 {
    padding: 4.4vw 0 4.8vw 5.6vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--01 {
    padding: 22.528px 0 24.576px 28.672px;
  }
}
.ginandtonic-bar-list-item--01 .ginandtonic-bar-list-item__head {
  display: block;
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--01 .ginandtonic-bar-list-item__head {
    width: 17.0666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--01 .ginandtonic-bar-list-item__head {
    width: 87.3813333333px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--01 .ginandtonic-bar-list-item__ttl {
    margin-top: 4.5333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--01 .ginandtonic-bar-list-item__ttl {
    margin-top: 23.2106666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--01 .ginandtonic-bar-list-item__txt {
    margin-top: 2.5333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--01 .ginandtonic-bar-list-item__txt {
    margin-top: 12.9706666667px;
  }
}

.ginandtonic-bar-list-item--02 {
  background-image: url(../images/ginandtonic_bar_frame02.svg);
  text-align: right;
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--02 {
    padding: 4.5333333333vw 3.6vw 4vw 0;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--02 {
    padding: 23.2106666667px 18.432px 20.48px 0;
  }
}
.ginandtonic-bar-list-item--02 .ginandtonic-bar-list-item__head {
  display: block;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--02 .ginandtonic-bar-list-item__head {
    width: 20.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--02 .ginandtonic-bar-list-item__head {
    width: 106.496px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--02 .ginandtonic-bar-list-item__ttl {
    margin-top: 5.2vw;
    margin-right: 1.7333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--02 .ginandtonic-bar-list-item__ttl {
    margin-top: 26.624px;
    margin-right: 8.8746666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--02 .ginandtonic-bar-list-item__txt {
    margin-top: 2.5333333333vw;
    margin-right: 1.7333333333vw;
    margin-top: 3.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--02 .ginandtonic-bar-list-item__txt {
    margin-top: 12.9706666667px;
    margin-right: 8.8746666667px;
    margin-top: 17.0666666667px;
  }
}

.ginandtonic-bar-list-item--03 {
  background-image: url(../images/ginandtonic_bar_frame03.svg);
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--03 {
    padding: 4.6666666667vw 0 4.8vw 3.4666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--03 {
    padding: 23.8933333333px 0 24.576px 17.7493333333px;
  }
}
.ginandtonic-bar-list-item--03 .ginandtonic-bar-list-item__head {
  display: block;
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--03 .ginandtonic-bar-list-item__head {
    width: 20.9333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--03 .ginandtonic-bar-list-item__head {
    width: 107.1786666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--03 .ginandtonic-bar-list-item__ttl {
    margin-top: 4vw;
    margin-left: 1.4666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--03 .ginandtonic-bar-list-item__ttl {
    margin-top: 20.48px;
    margin-left: 7.5093333333px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-bar-list-item--03 .ginandtonic-bar-list-item__txt {
    margin-left: 1.4666666667vw;
    margin-top: 3.2vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-bar-list-item--03 .ginandtonic-bar-list-item__txt {
    margin-left: 7.5093333333px;
    margin-top: 16.384px;
  }
}

.ginandtonic-region {
  background-color: #fff;
}

.ginandtonic-region-container {
  margin-inline: auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  .ginandtonic-region-container {
    width: 85.2vw;
    padding-top: 8.5333333333vw;
    padding-bottom: 6.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-region-container {
    width: 436.224px;
    padding-top: 43.6906666667px;
    padding-bottom: 34.816px;
  }
}

.ginandtonic-region__logo {
  position: absolute;
}
@media screen and (max-width: 767px) {
  .ginandtonic-region__logo {
    width: 29.4666666667vw;
    top: 53.3333333333vw;
    left: 2vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-region__logo {
    width: 150.8693333333px;
    top: 273.0666666667px;
    left: 10.24px;
  }
}

@media screen and (max-width: 767px) {
  .ginandtonic-region-ttl {
    margin-top: 1.8666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-region-ttl {
    margin-top: 9.5573333333px;
  }
}
.ginandtonic-region-ttl .ginandtonic-region-ttl__txt {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  letter-spacing: -0.03em;
}
@media screen and (max-width: 767px) {
  .ginandtonic-region-ttl .ginandtonic-region-ttl__txt {
    font-size: 8.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-region-ttl .ginandtonic-region-ttl__txt {
    font-size: 44.3733333333px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-region-ttl .ginandtonic-region-ttl__img {
    margin-top: -1.0666666667vw;
    width: 83.6vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-region-ttl .ginandtonic-region-ttl__img {
    margin-top: -5.4613333333px;
    width: 428.032px;
  }
}

.ginandtonic-region__txt {
  font-weight: 900;
  font-family: "Zen Old Mincho", serif;
  text-align: center;
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .ginandtonic-region__txt {
    font-size: 3.2vw;
    margin-top: 0.9333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-region__txt {
    font-size: 16.384px;
    margin-top: 4.7786666667px;
  }
}

.ginandtonic-region__annotation {
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  text-align: center;
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .ginandtonic-region__annotation {
    font-size: 2.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-region__annotation {
    font-size: 13.6533333333px;
  }
}

.ginandtonic-movie {
  background-color: #F6F5EB;
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie {
    padding-top: 4.6666666667vw;
    padding-bottom: 2.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie {
    padding-top: 23.8933333333px;
    padding-bottom: 11.6053333333px;
  }
}

.ginandtonic-movie-item {
  position: relative;
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie-item {
    width: 86.6666666667vw !important;
    height: 154.1333333333vw !important;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie-item {
    width: 443.7333333333px !important;
    height: 789.1626666667px !important;
  }
}

.ginandtonic-movie__img {
  position: relative;
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie__img {
    width: 86.6666666667vw;
    height: 154.1333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie__img {
    width: 443.7333333333px;
    height: 789.1626666667px;
  }
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie__img iframe {
    width: 86.6666666667vw;
    height: 154.1333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie__img iframe {
    width: 443.7333333333px;
    height: 789.1626666667px;
  }
}

.ginandtonic-movie__txt {
  font-family: "Zen Old Mincho", serif;
  font-weight: bold;
  text-align: center;
  background-color: #AD8E58;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie__txt {
    font-size: 5.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie__txt {
    font-size: 27.3066666667px;
  }
}

.ginandtonic-movie .splide02 {
  position: relative;
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie .splide02 {
    margin-top: 2.4vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie .splide02 {
    margin-top: 12.288px;
  }
}
.ginandtonic-movie .splide02 .splide__track {
  position: relative;
  z-index: 2;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie .splide02 .splide__track {
    width: 64vw;
    height: 14.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie .splide02 .splide__track {
    width: 327.68px;
    height: 75.0933333333px;
  }
}
.ginandtonic-movie .splide__arrows {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie .splide__arrows {
    width: 94.8vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie .splide__arrows {
    width: 485.376px;
  }
}
.ginandtonic-movie .splide__arrow {
  display: block;
  background-color: #AD8E58;
  position: relative;
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie .splide__arrow {
    width: 14.6666666667vw;
    height: 14.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie .splide__arrow {
    width: 75.0933333333px;
    height: 75.0933333333px;
  }
}
.ginandtonic-movie .splide__arrow img {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
@media screen and (max-width: 767px) {
  .ginandtonic-movie .splide__arrow img {
    width: 2.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .ginandtonic-movie .splide__arrow img {
    width: 13.6533333333px;
  }
}