@charset "utf-8";
/* CSS Document */

/*-------------------
root
-------------------*/
*,
::before,
::after {
  --clamp-root-font-size: 16;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi));
  --clamp: clamp(calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
      var(--clamp-preffered-value),
      calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size))));

  font-size: var(--clamp);
}

:root {
  --color-white: #FFFFFF;
  --color-paperwhite: #FBFEFF;
  --color-black: #2c2c2c;

  --color-darkblue: #1E5985;
  --color-lightblue: #8DCADA;
  --color-bgblue: #B8E1EC;
  --color-yellow: #FFC84A;
  --color-lightyellow: #FFE88C;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-heavy: 900;

  --contents-gap-sm: 8px;
  --contents-gap-md: 16px;
  --contents-gap-lg: 24px;
}

@media screen and (min-width: 769px) {
  :root {
    --contents-gap-sm: 16px;
    --contents-gap-md: 24px;
    --contents-gap-lg: 40px;
  }
}

/*-------------------
base
-------------------*/
body {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;
  --clamp-min: 14;
  --clamp-max: 16;
  letter-spacing: 0.02em;
  display: grid;
  grid-template-areas:
    "contents"
    "footer";
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  height: 100svh;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  line-height: 0;
}

.img_p {
  position: relative;
  display: inline-block;
}

.img_p img {
  display: block;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.img_p::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: all;
}

h1 {
  margin-block-start: 0;
  margin-block-end: 0;
}

.sp_view {
  display: block;
}

.pc_view {
  display: none;
}

@media screen and (min-width: 769px) {
  .sp_view {
    display: none;
  }

  .pc_view {
    display: block;
  }
}

/*-------------------
contents
-------------------*/
main,
footer {
  font-family: "ryo-gothic-plusn", sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 100%;
}

.list_notice {
  margin-inline: auto;
  padding-left: 1.2em;
  --clamp-min: 14;
  --clamp-max: 16;
}

.list_notice li::before {
  content: "※";
  position: absolute;
  margin-left: -1.2em;
  color: inherit;
}

.list_notice li {
  position: relative;
  margin-bottom: 0.2em;
  line-height: 1.5;
  color: var(--color-darkblue);
  font-weight: var(--font-weight-medium);
}

.bg_yellow {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  background-color: #ffd469;
  z-index: 0;
}

.bg_yellow::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-image: url("https://cf.creativeplus.co.jp/hetaliaws-round1-cp.jp/img_a6xd4ens_00/bg_noise.png");
  background-repeat: repeat;
  background-size: 100px;
  mix-blend-mode: overlay;
  opacity: 0.2;
}

.bg_checkered {
  content: "";
  width: 100%;
  height: 100%;
  position: relative;
}

.bg_checkered::before,
.bg_checkered::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  background-image: url("https://cf.creativeplus.co.jp/hetaliaws-round1-cp.jp/img_a6xd4ens_00/bg_checkered.png");
  background-repeat: repeat-x;
  background-size: 24px;
}

.bg_checkered::before {
  background-position: center top;
}

.bg_checkered::after {
  background-position: center bottom;
}

.bg_noise {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bg_noise::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-image: url("https://cf.creativeplus.co.jp/hetaliaws-round1-cp.jp/img_a6xd4ens_00/bg_noise.png");
  background-repeat: repeat;
  background-size: 100px;
  mix-blend-mode: overlay;
  opacity: 0.2;
}

.contents_wrap {
  width: 100%;
  height: 100%;
  padding-block: 40px;
  position: relative;
  display: grid;
  place-items: center;
  z-index: 2;
}

.area_logo {
  width: calc(100% - var(--contents-gap-lg));
  max-width: 560px;
  display: block;
}

.info_wrap {
  width: 100%;
  display: grid;
  margin-inline: auto;
  grid-row-gap: 32px;
  place-items: center;
}

.info_box {
  width: calc(100% - var(--contents-gap-lg));
  max-width: 880px;
  padding-block: 24px;
  border-radius: var(--radius-md);
  border: solid 4px #FFE88C;
  background-color: var(--color-white);
  text-align: center;
}

.shop_logo {
  width: 150px;
}

.main_text {
  color: var(--color-darkblue);
  font-weight: var(--font-weight-heavy);
  --clamp-min: 20;
  --clamp-max: 32;
}

.sub_text {
  color: var(--color-darkblue);
  font-weight: var(--font-weight-medium);
  --clamp-min: 16;
  --clamp-max: 18;
}

@media screen and (min-width: 769px) {
  .info_box {
    border: solid 8px #FFE88C;
  }
}

.footer {
  z-index: 2;
  text-align: center;
}

.footer small {
  --clamp-min: 14;
  --clamp-max: 16;
  text-align: center;
  color: var(--color-black);
  font-weight: var(--font-weight-medium);
}