/* CSS変数でフォントウェイトを定義 */
:root {
  --font-thin: thin;
  --font-regular: regular;
  --font-bold: bold;
  --font-extra-bold: extra-bold;
  --color-main: #00A04E;
  --color-main-light: #06C755;
  --color-black: #111;
  --color-white: #fff;
  --color-gray: #d1d1d1;
  --color-bg: #f3f3f3;
}

/* font指定 */
@font-face {
  font-family: 'LINESeedJP';
  src: url('../font/LINESeedJP_OTF_Th.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'LINESeedJP';
  src: url('../font/LINESeedJP_OTF_Rg.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'LINESeedJP';
  src: url('../font/LINESeedJP_OTF_Bd.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'LINESeedJP';
  src: url('../font/LINESeedJP_OTF_Eb.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

/* LINESeedJPフォントが読み込まれた時の変数値を上書き */
@supports (font-family: 'LINESeedJP') {
  :root {
    --font-thin: 100;
    --font-regular: 400;
    --font-bold: 700;
    --font-extra-bold: 900;
  }
}

/* リセット */
* {
  box-sizing: border-box;
}

html {
  font-size: 10px; /* 1rem = 10px に設定 */
}

body {
  font-family: 'LINESeedJP', sans-serif;
  color: var(--color-black);
  margin: 0;
}

h1 {
  font-size: 2.4rem;
  font-weight: var(--font-bold);
  margin: 0;
}

h2 {
  font-size: 1.8rem;
  font-weight: var(--font-bold);
  margin: 0;
}

h3 {
  margin: 0;
}

p {
  font-size: 1.6rem;
  font-weight: var(--font-regular);
  margin: 0;
}

p + p {
  margin-top: 26px;
}

a {
  text-decoration: none;
}

em {
  font-weight: var(--font-bold);
  color: var(--color-main);
  font-size: 22px;
  font-style: normal;
}

dt, dd {
  font-size: 1.6rem;
  font-weight: var(--font-regular);
}

dd {
  margin-left: 0;
}

dd + dt {
  margin-top: 20px;
}

/* PC時の画像 */
.content-qr {
  position: fixed;
  top: 10%;
  right: calc(50% - 560px);
  width: 250px;
}

.content-qr img {
  height: 654px;
}

/* MV */
.mv {
  background: url('../assets/img/mv-bg.png') no-repeat center center/cover;
  height: 580px;

  > .button {
    margin-top: 36px;
  }
}

.mv__title {
  padding-top: 90px;
  text-align: center;
}

/* ボタン */
.button {
  max-width: 313px;
  width: 100%;
  margin: 0 auto;
}

.button__link {
  width: 100%;
  display: block;
  text-align: center;
  font-weight: var(--font-bold);
  color: var(--color-white);
  background: var(--color-main-light);
  padding: 10px;
  border-radius: 60px;
  font-size: 2rem;
  border: 2px solid var(--color-white);
}

/* コンテナ */
.wrapper {
  position: relative;
  font-family: 'LINESeedJP', sans-serif;
  background: var(--color-main) url('../assets/img/bg.png') repeat center center/cover fixed;
}

.container {
  max-width: 425px;
  margin: 0 auto;
  background: var(--color-bg);
  box-shadow: 0 19px 22px rgba(0, 0, 0, 0.58);
  z-index: 1;
}

.main-content {
  padding: 44px 20px 84px;
  overflow: hidden;
}

.content p {
  text-align: center;
}

.content__block {
  display: block;
}

.mov-content {
  margin-top: 64px;
  text-align: center;
  width: 100%;

  > video {
    width: 100%;
  }
}

.content-primary__hdg,
.content-primary__hdg--big,
.content-secondary__hdg {
  font-weight: var(--font-bold);
  text-align: center;
  line-height: 1.6;
  letter-spacing: 1px;
}

.content-primary, .content-secondary {
  position: relative;
}

.content-primary > p {
  margin-top: 16px;
  text-align: center;
  font-weight: var(--font-bold);
  font-size: 1.8rem;
  letter-spacing: 1.4px;
  line-height: 1.6;
}

.content-primary__hdg {
  font-size: 3.6rem;
}

.content-primary__hdg--big {
  font-size: 3rem;
}

.content-primary::after {
  position: absolute;
  width: 235px;
  height: 235px;
  content: '';
  bottom: -260px;
  right: -58px;
  background: url('../assets/img/img-decoration-01.png') no-repeat center center;
}

.content-secondary {
  padding-top: 80px;
  z-index: 0;
}

.content-secondary__hdg {
  font-size: 2.8rem;
}

.content-secondary::before {
  position: absolute;
  width: 235px;
  height: 235px;
  content: '';
  top: 320px;
  left: -55px;
  background: url('../assets/img/img-decoration-02.png') no-repeat center center;
}

.content-flow {
  margin-top: 48px;
  padding: 24px;
  background: var(--color-white);
  border-radius: 24px;
}

.content-flow__hdg {
  font-size: 2.1rem;
  font-weight: var(--font-bold);
  text-align: center;
}

.content-flow__img {
  text-align: center;
  margin-top: 8px;
}

.content-flow__img > img {
  width: 100%;
}

.content-gourmet {
  margin-top: 56px;
  text-align: center;
}

.content-gourmet__hdg {
  position: relative;
  font-size: 2.6rem;
  font-weight: var(--font-bold);
  max-width: 360px;
  width: 100%;
  padding: 0 32px;
  margin: 0 auto;
}

.content-gourmet__hdg::before,
.content-gourmet__hdg::after {
  position: absolute;
  top: 10px;
  background: var(--color-black);
  content: '';
  height: calc(100% - 20px);
  width: 2px;
}

.content-gourmet__hdg::before {
  left: 16px;
  transform: rotate(-20deg);
}

.content-gourmet__hdg::after {
  right: 16px;
  transform: rotate(20deg);
}

.content-logo {
  margin-top: 56px;
  text-align: center;
}

.profile {
  position: relative;
  padding: 40px 16px 56px;
  border: solid 3px var(--color-main);
  background: var(--color-white);
  border-radius: 24px;
}

.profile::before {
  position: absolute;
  width: 155px;
  height: 235px;
  content: '';
  bottom: 260px;
  right: -23px;
  background: url('../assets/img/img-decoration-03.png') no-repeat center center;
  z-index: -1;
}

.profile::after {
  position: absolute;
  width: 165px;
  height: 235px;
  content: '';
  bottom: -14px;
  left: -24px;
  background: url('../assets/img/img-decoration-04.png') no-repeat center center;
  z-index: -1;
}

.profile__hdg,
.description__hdg {
  font-size: 2.8rem;
  font-weight: var(--font-regular);
  text-align: center;
  line-height: 1.6;
}

.profile__hdg--bold {
  font-weight: var(--font-bold);
}

.profile__img {
  text-align: center;
  margin-top: 8px;
}

.profile-detail {
  margin-top: 32px;
}

.profile-detail .profile__hdg + p {
  margin-top: 16px;
}

.profile-detail p {
  font-weight: var(--font-bold);
}

.description {
  position: relative;
  margin-top: 72px;
}

.description::before {
  position: absolute;
  width: 165px;
  height: 255px;
  content: '';
  top: -124px;
  right: -24px;
  background: url('../assets/img/img-decoration-05.png') no-repeat center center;
  z-index: -1;
}

.description__hdg {
  font-weight: var(--font-bold);
}

.description > p {
  margin-top: 18px;
  font-weight: var(--font-bold);
  text-align: center;
}

.gourmet {
  position: relative;
  padding: 24px 14px;
  border: solid 3px var(--color-main);
  background: var(--color-white);
  border-radius: 24px;
  margin-top: 8px;
}

.gourmet__img {
  text-align: center;
}

.gourmet__lead-text {
  font-size: 2.1rem;
  font-weight: var(--font-bold);
  text-align: center;
  margin-top: 18px;
}

.gourmet__lead-text > b {
  display: block;
  color: var(--color-main);
}

.gourmet__lead-text + p {
  font-weight: var(--font-bold);
  font-size: 1.5rem;
  text-align: center;
  margin-top: 18px;
}

.content-logo__toyolog {
  text-align: center;
}

.content-logo__toyolog + .button {
  margin-top: 16px;
}

.establishment {
  display: block;
  font-size: 1.4rem;
  margin-top: 20px;
}

/* アニメーション */
.heartbeat-animation {
  animation: heartbeat 3s ease-in-out infinite;
}

/* フッター */
footer {
  text-align: center;
  padding: 14px 20px 8px;
  background: var(--color-main);
}

footer p {
  font-weight: 400;
  color: #7f8c8d;
}

.footer-toyolog {
  margin-top: 20px;
}

.footer-list {
  margin-top: 18px;
}

.footer-list ul {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.footer-list li {
  position: relative;
  list-style-type: none;
}

.footer-list li > a,
.footer-company a,
.footer-copyright {
  color: var(--color-white);
  font-size: 1.2rem;
}

.footer-list li:nth-of-type(n+2)::before {
  position: absolute;
  content: '';
  top: 2px;
  left: -8px;
  width: 1px;
  height: calc(100% - 4px);
  background: var(--color-white);
}

.footer-list li > a {
  display: flex;
  align-items: center;
  gap: 2px;
}

.footer-company a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.footer-company {
  display: block;
  margin-top: 6px;
}

.footer-copyright {
  display: block;
  margin-top: 8px;
}

.terms {
  padding: 20px;
}

/* キーフレーム */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}