* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

:root {
  --max-width: 1020px;
  --border-color: #dbdbdb;
  --border-color: #dbdbdb;

  --size-xs: 0.7rem;
  --size-sm: 1.4rem;
  --size: 2rem;
  --size-md: 2.8rem;
  --size-xl: 5.6rem;

  /* 配色 */
  --white: #ffffff;
  --black: #3d3f19;
  --primary-color: #d9e135;
  --primary-color-text: var(--black);
  --secondary-color: #0e318c;
  --secondary-color-text: var(--white);
}
@media (min-width: 1440px) {
  :root {
    --max-width: 1200px;
  }
}
@media (min-width: 2000px) {
  :root {
    --max-width: 1800px;
  }
}

html {
  height: -webkit-fill-available;
  font-size: 16px;

  scroll-behavior: smooth;
}

body {
  background-color: var(--primary-color);
  color: var(--primary-color-text);
  line-height: 1.6;
  font-family: Arial, sans-serif;
}

a {
  color: var(--primary-color-text);
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
  color: var(--primary-color-text);
  font-size: 1rem;
}
video {
  max-width: 100%;
}

small {
  font-size: 80%;
}

i {
  font-size: 32px;
}

/* レイアウト */

.l-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.l-main {
  margin-bottom: auto;
}

.l-hidden {
  display: none;
}

.l-visible-md {
  display: none;
}

@media (min-width: 768px) {
  .l-visible-md {
    display: block;
  }
  .l-hidden-md {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .l-flex-lg {
    display: flex;
  }
  .l-flex-lg > * {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
.l-flex-auto {
  flex: 1 0 auto;
}

.l-mb-n {
  margin-bottom: 0 !important;
}
.l-mb-xs {
  margin-bottom: var(--size-xs);
}
.l-mb {
  margin-bottom: var(--size);
}

.l-mb-md {
  margin-bottom: var(--size-md);
}

.l-container {
  padding-right: 1rem;
  padding-left: 1rem;
}

.l-container-max {
  max-width: var(--max-width);
  margin-right: auto;
  margin-left: auto;
}

.l-container.description {
  /* padding-right: 0;
  padding-left: 0;
  margin-right: -7%;
  margin-left: -2%; */
  overflow: hidden;
}

@media (min-width: 1000px) {
  .l-container.description {
    overflow: none;
  }
}

.section {
  margin-bottom: var(--size-xl);
}
.section:nth-of-type(1),
.section:nth-of-type(4) {
  margin-bottom: 0;
}

.background-white {
  padding: 3rem;
  background-color: var(--white);
  color: var(--black);
}
.background-white a {
  color: var(--secondary-color);
  text-decoration: underline;
}

/* タイポグラフィ */

.heading-2 {
  font-size: 2rem;
}
.heading-3 {
  margin-bottom: var(--size-xs);
}

.text-color-red {
  color: #e51613;
}

.text-color-white {
  color: white;
}

.text-size-sm {
  font-size: 0.8rem;
}

.text-size-md {
  font-size: var(--size-sm);
}

.text-size-xl {
  font-size: var(--size-md);
}

.text-weight-bold {
  font-weight: bold;
}

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

/* ヘッダー */
.navbar-container {
  position: fixed;
  z-index: 1000;
  width: 100%;
  /* padding: 0.7rem 1rem; */
  background-color: var(--primary-color);
}

.navbar {
  display: flex;
  align-items: center;
  position: relative;
}

.navbar-left {
  margin-left: auto;
}

.navbar-item {
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: 0 1rem;
}

.navbar-item .button {
  margin: 0 0 0 auto;
}

/* ハンバーガー */
.hamburger {
  position: relative;
  z-index: 1100;
  cursor: pointer;
}
.hamburger i,
.hamburger-menu i {
  width: 30px;
}

.hamburger-menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  transform: translateX(100%);
  width: 100vw;
  height: 100vh;
  transition: transform 0.3s ease;
}
.hamburger-menu.is-open {
  transform: translateX(0);
}

.hamburger-menu-body {
  min-width: 270px;
  max-width: 300px;
  height: 100vh;
  min-height: -webkit-fill-available;
  margin-left: auto;
  padding: var(--size-sm) 1rem;
  box-shadow: -6px 0 3px -3px rgba(72, 72, 72, 0.25);
  background-color: var(--primary-color);
}

.hamburger-menu-header {
  margin-bottom: var(--size-md);
}
.hamburger-menu-header .fa-xmark {
  display: block;
  margin-left: auto;
}

.hamburger-menu-content ul {
  list-style-type: none;
  margin-bottom: var(--size-md);
  font-weight: bold;
}
.hamburger-menu-content li:not(:last-child) {
  border-bottom: 1px solid var(--black);
}
.hamburger-menu-content li a {
  display: block;
  padding: var(--size-sm) 0;
  transition: opacity 0.3s ease;
}
.hamburger-menu-content li a:hover {
  opacity: 0.6;
}

/* メインコンテンツ */
.main {
  margin-top: 104px;
}
/* @media (min-width: 1000px) {
  .main {
    margin-top: 130px;
  }
} */
/* @media (min-width: 1200px) {
  .main {
    margin-top: 190px;
  }
}
@media (min-width: 1700px) {
  .main {
    margin-top: 300px;
  }
} */

/* ヒーローセクション */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-film {
  position: absolute;
  top: 18%;
  right: 25%;
  width: 30%;
}
.hero-hukidashi {
  position: absolute;
  top: 63%;
  right: 4%;
  z-index: 1;
  width: 19%;
}

/* 売れるドウッの説明 */
/* .description {
  position: relative;
  right: 10px;
} */

/* 他サービスとの比較 */
.comparison-top {
  width: 50%;
  margin: 0 auto;
}

/* いいねマーク */
.like-mark {
  position: absolute;
}

/* ボタン */
.button {
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding: var(--size-xs) 1rem;
  border: none;
  background-color: var(--secondary-color);
  color: var(--secondary-color-text);
  text-align: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.button:hover {
  opacity: 0.8;
}

.page-between {
  text-align: center;
}
.page-between .button {
  margin: 50px auto;
  padding: 1em 4em;
  display: inline-block;
  font-size: clamp(16px, 4vw, var(--size));
}

/* 料金プラン */
.price {
  list-style-type: none;
  margin-bottom: var(--size);
  padding: 1rem;
  border: 2px solid black;
  border-radius: 10px;
  font-weight: bold;
}

.price li {
  display: flex;
  align-items: center;
}

.price li:not(:last-child) {
  margin-bottom: var(--size-sm);
}

.price li p:first-child {
  width: 50%;
}

/* フェードイン */
.observe {
  opacity: 0;
  overflow: hidden;
  transition: all 1s ease;
}
.observe.is-inview {
  opacity: 1;
}

/* フッター */

.footer {
  padding: var(--size-md) 0;
  background-color: var(--secondary-color);
  color: var(--secondary-color-text);
}

.footer small {
  display: block;
  text-align: center;
}

input[type="submit"] {
  border-radius: 0;

  -webkit-appearance: none;
}
.form-field {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
}
.form-label-required {
  position: relative;
}
.form-label-required::after {
  display: inline-block;
  margin-left: 5px;
  content: "*";
}

.form-input {
  width: 100%;
  min-height: 40px;
  padding: 1rem;
  border: 1px solid var(--border-color);
  background-color: var(--white);
  font-family: Arial, sans-serif;
}
.form-input-textarea {
  resize: none;
}

.form-submit {
  margin: 0 0 0 auto;
}

.form-error {
  min-height: 1rem;
  color: #cc3300;
  line-height: 1;
}

/* 画像は1000pxまで可変　1440pxと2000pxで一段大きくなる */
/* 文字は1000pxで可変終了させる */
.description-inner {
  position: relative;
  padding-right: 0;
  padding-left: 0;
  margin-right: -10vw;
  margin-left: -10vw;
}
.description-inner div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.description-inner p {
  font-size: clamp(12px, 2.5vw, var(--size-xl));
  text-align: center;
  font-weight: bold;
}
.description-inner p:nth-of-type(2) {
  margin: 1em 0 1.5em;
}
.description-inner p strong {
  font-size: clamp(20px, 3.8vw, var(--size-xl));
}

@media (max-width: 425px) {
  .description-inner p strong::after {
    content: "\A";
    white-space: pre;
  }
  .description-inner p:nth-of-type(2) {
    margin: 0.2em 0 0.7em;
  }
}

@media (min-width: 1000px) {
  .description-inner {
    margin-right: 0;
    margin-left: 0;
  }
  .description-inner p {
    font-size: 20px;
  }
  .description-inner p strong {
    font-size: 36px;
  }
}
@media (min-width: 1440px) {
  .description-inner p {
    font-size: 28px;
  }
  .description-inner p strong {
    font-size: 44px;
  }
}
@media (min-width: 2000px) {
  .description-inner p {
    font-size: 36px;
  }
  .description-inner p strong {
    font-size: 52px;
  }
}