/*
  # Global
---------------------------------------------- */

:root {
  /* Color */
  --c-blue: #003E95;
  --c-pink: #E73656;

  /* Font Family */
  --f-noto: "Noto Sans JP", sans-serif;

  /* Font Weight */
  --f-light: 300;
  --f-regular: 400;
  --f-medium: 500;
  --f-semibold: 600;
  --f-bold: 700;
  --f-black: 900;
}

@media (max-width: 768px) {
  :root {
    /* base */
    --base-vw: 375;
  }
}

@media (min-width: 769px) {
  :root {
    /* base */
    --base-vw: 1440;
  }
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: calc(100/var(--base-vw)*1vw);
  height: auto;
}

body {
  color: #000;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  overflow-wrap: break-word;
}

ul,
ol {
  list-style-type: "";
}

a,
a:visited {
  text-decoration: none;
  cursor: pointer;
  display: block;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}


/*
  # common
---------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}

.uppercase {
  text-transform: uppercase;
}

.inner {
  padding-inline: min(20px, 20rem) min(16px, 16rem);
}

@media (min-width: 769px) {
  .inner {
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: min(80px, 80rem);
  }
}

/*
  # header
---------------------------------------------- */
.header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.header-body {
  padding: 32px 22px 0;
}

@media (min-width: 769px) {
  .header-body {
    padding: 76px 0 0;
  }
}

.header-logo {
  width: min(168px, 168rem);
}

@media (min-width: 769px) {
  .header-logo {
    width: min(355px, 355rem);
    margin: 0 auto;
  }
}


/*
  # main
---------------------------------------------- */
.main {
  position: relative;
}

.main-bg {
  position: absolute;
  height: 100%;
  inset: 0;
  z-index: -1;
}

.main-bg img,
.main-bg figure,
.main-bg picture {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media (min-width: 769px) {

  .main-bg img,
  .main-bg figure,
  .main-bg picture {
    -o-object-position: calc(50% + 10%) 0;
    object-position: calc(50% + 10%) 0;
  }
}

.main-body {
  padding-block: 122px 32px;
}

@media (min-width: 769px) {
  .main-body {
    padding-block: min(314px, 314rem) min(210px, 210rem);
  }
}

.contents {
  display: grid;
  justify-content: center;
  gap: 390px;
}

@media (min-width: 769px) {
  .contents {
    justify-content: flex-start;
    gap: min(60px, 60rem);
  }
}

.contents-text h1 span {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: min(42px, 42rem);
  font-weight: var(--f-black);
  letter-spacing: -.05em;
  line-height: 1;
  background: #fff;
}

.contents-text h1 span.--pink {
  padding: 4px 10px 6px 8px;
  color: var(--c-pink);
}

.contents-text h1 span.--blue {
  margin-top: 8px;
  padding: 4px 10px 6px 8px;
  color: var(--c-blue);
}

@media (min-width: 769px) {
  .contents-text h1 span {
    font-size: min(110px, 110rem);
  }

  .contents-text h1 span.--pink {
    padding: 6px 35px 16px 18px;
  }

  .contents-text h1 span.--blue {
    margin-top: 20px;
    padding: 6px 38px 16px 18px;
  }
}

.contents-date {
  width: min(335px, 335rem);
  margin-top: 16px;
}

@media (min-width: 769px) {
  .contents-date {
    width: min(522px, 522rem);
    margin-top: 42px;
  }
}

.contents-price {
  margin-top: 6px;
  display: flex;
  gap: 10px;
}

.contents-price img:nth-child(1) {
  width: min(218px, 218rem);
}

.contents-price img:nth-child(2) {
  width: min(104px, 104rem);
}

@media (min-width: 769px) {
  .contents-price {
    margin-top: 28px;
  }

  .contents-price img:nth-child(1) {
    width: min(550px, 550rem);
  }

  .contents-price img:nth-child(2) {
    width: min(286px, 286rem);
  }
}

.contents-button {
  display: grid;
  gap: 16px;
}

@media (min-width: 769px) {
  .contents-button {
    gap: min(70px, 70rem);
  }
}

.button {
  width: min(335px, 335rem);
  margin: 0 auto;
}

.button.--black {
  background: #000;
  border-radius: 28px;
}

.button.--pink {
  background: var(--c-pink);
  border-radius: 38px;
}

@media (min-width: 769px) {
  .button {
    width: min(716px, 716rem);
    margin-inline: 0 auto;
  }

  .button.--black {
    border-radius: 60px;
  }

  .button.--pink {
    border-radius: 82px;
  }
}

.button a {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}

.button.--black a {
  position: relative;
  padding: 17px 0 18px 20px;
  justify-content: flex-start;
  gap: 5px;
}

.button.--pink a {
  padding-block: 23px;
  justify-content: center;
  gap: 6px;
}

@media (min-width: 769px) {
  .button.--black a {
    padding: 37px 0 38px min(50px, 50rem);
    gap: 16px;
  }

  .button.--pink a {
    padding-block: 52px;
    gap: 8px;
  }
}

.button a .text {
  color: #fff;
  font-weight: var(--f-medium);
}

.button.--black a .text {
  font-size: min(12px, 12rem);
}

.button.--pink a .text {
  font-size: min(16px, 16rem);
}

@media (min-width: 769px) {
  .button.--black a .text {
    font-size: min(24px, 24rem);
  }

  .button.--pink a .text {
    font-size: min(32px, 32rem);
  }
}

.button a .arrow {
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
}

.button.--black a .arrow {
  width: min(14px, 14rem);
  height: min(14px, 14rem);
}

.button.--black a .arrow svg {
  width: min(7px, 7rem);
  fill: #000;
}

.button.--pink a .arrow {
  width: min(20px, 20rem);
  height: min(20px, 20rem);
}

.button.--pink a .arrow svg {
  width: min(10px, 10rem);
  fill: var(--c-pink);
}

@media (min-width: 769px) {
  .button.--black a .arrow {
    width: min(30px, 30rem);
    height: min(30px, 30rem);
  }

  .button.--black a .arrow svg {
    width: min(14px, 14rem);
  }

  .button.--pink a .arrow {
    width: min(44px, 44rem);
    height: min(44px, 44rem);
  }

  .button.--pink a .arrow svg {
    width: min(20px, 20rem);
  }
}

.button.--black a picture,
.button.--black a img {
  width: min(112px, 112rem);
  position: absolute;
  right: 2px;
  bottom: -2px;
}

@media (min-width: 769px) {

  .button.--black a picture,
  .button.--black a img {
    width: min(228px, 228rem);
    right: 16px;
    bottom: -9px;
  }
}

/*
  # footer
---------------------------------------------- */
.footer {
  background: var(--c-blue);
}

.footer-body {
  padding: 40px 38px;
}

@media (min-width: 769px) {
  .footer-body {
    padding: 90px 130px;
  }
}

.footer-logo {
  width: min(171px, 171rem);
  margin: 0 auto;
}

@media (min-width: 769px) {
  .footer-logo {
    width: min(348px, 348rem);
  }
}

.footer-copy {
  margin-top: 44px;
  color: #fff;
  font-size: 14px;
  font-weight: var(--f-regular);
  text-align: center;
}