@charset "UTF-8";

body {
  font-family:  "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-color: #fff;
  margin-bottom: 30px;
}

a {
  text-decoration: none;
}

.wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  overflow: visible;
  background-color: #303030;
  padding-bottom: 50px;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}


img {
  width: 100%;
  display: block;
}

/* ボタンが拡大縮小するアニメーション */

.yureru-s {
  animation: scale-up-down 2s infinite;
}

@keyframes scale-up-down {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05); /* 5%拡大 */
  }
}

section#offer-1:hover, section#offer-2:hover {
  opacity: 0.7;
  transition: 0.3s;
}

/* ボタンを横並びに配置するためのコンテナ */
.sticky-footer-container {
  position: fixed;
  bottom: 0;
  left: 50%; /* 画面の中央を起点に */
  transform: translateX(-50%); /* 中央寄せ */
  display: flex;
  justify-content: center;
  width: 100%; /* 画面幅いっぱい */
  max-width: 1000px; /* 必要に応じて最大幅を設定 */
  z-index: 1;
  margin-bottom:1%;
}

/* 各ボタンのスタイル */
.sticky-footer_1,
.sticky-footer_2 {
  background-color: rgba(0, 0, 0, 0);
  width: auto;
  margin: 0 5px; /* ボタン間の間隔 */
}

/* メディアクエリを追加して応答性を確保 */
@media (max-width: 300px) {
  .sticky-footer-container {
    flex-direction: column; /* 幅が狭い場合は縦並びに */
    align-items: center;
  }

  .sticky-footer_1,
  .sticky-footer_2 {
    margin: 5px 0; /* 縦並びの際の間隔 */
  }
}

/* フッターデザインここから */
footer {
  display: none;
  font-size: 0.7rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center; /* 中央揃え */
  padding: 0px 0; /* 上下のパディング */
}

div.policy {
  font-size: 1rem;
  text-align: center;  
}

div.policy a {
  text-decoration: none;
}

/* フッターデザインここまで */


/* 特定商取引法ページのスタイル */
table {
  font-size: 13px;
  text-align: left;
  background-color: #999999;
  border-collapse: collapse;
  width: 100%; /* または適切な幅を指定 */
}

table th, table td {
  background-color: #FFFFFF;
  padding: 9px;
  border: 1px solid #EEEEEE;
}

table th {
  background-color: #EEEEEE;
}

.tokusho__inner {
  max-width: 800px; /* 必要に応じて最大幅を設定 */
  margin: 50px auto 0; /* 左右のマージンを自動で設定し、中央揃えに */
  background-color: #fff; /* 背景色を設定 */
  padding: 20px; /* 内側の余白を設定 */
  text-align: center;
}

#tokusho .tokusho__inner h1 {
  margin: 30px 0;
}

.back_btn {
  background-color: #000; /* ボタンの背景色 */
  color: #fff; /* テキストの色 */
  width: 200px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ */
  border: none; /* ボタンの枠線を削除 */
  text-align: center; /* テキストの中央揃え */
  line-height: 40px; /* テキストを垂直中央揃え */
  cursor: pointer; /* ホバー時にポインタを表示 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


/*特商法ページのスタイルここまで*/

/* 応答性があるようにメディアクエリを追加すると良いでしょう */
@media (max-width: 787px) {
  .sticky-footer {
    max-width: 80%;
  }

}

h2.thanks {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  margin: 100px 0 30px;
}

p.thanks_message {
  text-align: center;
  font-size: 0.7rem;
  margin-bottom: 100px;
}

.hidden {
  display: none;
}

input, textarea, select {
  font-size: 16px; /* iOSでの自動ズームインを防ぐための最小フォントサイズ */
}

.img-01__inner {
  position: relative;
}

.taiken_link {
  position: absolute;
  top: 56%;
  left: 47%;
  transform: translate(-50%, -50%);
  width: 65%;
  z-index: 0;
}

.line_link {
  position: absolute;
  bottom: 4%;
  left: 44%;
  transform: translate(-50%, -50%);
  width: 70%;
  z-index: 0;
}


.img-03__inner {
  position: relative;
}

.video__1 {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  z-index: 0;
}

.preference {
  text-align: center;
}

.linebutton__inner {
  display: block;
  margin: 20px auto;
  width: 70%;
}

.img-06__inner {
  position: relative;
}

/* オファーボタンのアニメーションここから */
@keyframes shine {
  0% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0);
  }
}

.offer-button {
  position: absolute;
  bottom: -2%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  z-index: 0;
  animation: shine 2s infinite;
}

/* 各セクションのフェードインアニメーションここから */

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px); /* WebKitプレフィックスを追加 */
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0); /* WebKitプレフィックスを追加 */
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity: 0;
  -webkit-animation-name: fadeInUp; /* WebKitプレフィックスを追加 */
  animation-name: fadeInUp;
  -webkit-animation-fill-mode: forwards; /* WebKitプレフィックスを追加 */
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s; /* WebKitプレフィックスを追加 */
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-out; /* WebKitプレフィックスを追加 */
  animation-timing-function: ease-out;
}

section#thanks_message {
  background-color: #FFFFFF;
}



h3.attention {
  font-size: 1.2rem;
  color: rgb(42, 42, 42);
  font-weight: 700;
  text-align: center;
}

/* グローバルメニューのスタイル */
.global-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 100px;
  padding: 0 20px;
  border-bottom: 1px solid #000; /* 下線を追加 */
}

.global-menu .logo img {
  height: 80px; /* 高さのみ指定し、画像のアスペクト比を保つ */
  max-height: 80px;
  width: auto;
}

.global-menu .menu-items {
  display: flex;
  list-style: none;
  gap: 20px;
}

.global-menu .menu-items li a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  line-height: 100px;
}

.hamburger-menu {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger-menu span {
  width: 25px;
  height: 3px;
  background-color: #000;
  margin: 4px 0;
}

.mobile-menu {
  display: none;
  background-color: #fff;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
}

.mobile-menu ul li {
  border-bottom: 1px solid #ddd;
}

.mobile-menu ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #000;
}

@media (max-width: 768px) {
  .global-menu .menu-items {
    display: none;
  }

  .global-menu .logo {
    margin: 0 auto;
  }

  .hamburger-menu {
    display: flex;
  }

  .mobile-menu.active {
    display: block;
  }
}
/*グロオーバルメニューのスタイルここまで*/


/*トップページスタイル*/
/* MVセクションのテキストとボタンのスタイル */
#mv_video {
  position: relative;
  text-align: center;
}

.mv-content {
  position: absolute;
  bottom: 20%; /* 下から30%の位置に配置 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #ff3a3a;
}

.mv-text {
  font-size: 1.5em;
  margin-bottom: 20px;
}

.mv-button {
  display: inline-block;
  width: 200px;
  height: 50px;
  line-height: 50px;
  background-color: #000;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.mv-button:hover {
  opacity: 0.7;
}
/* MVセクションのテキストとボタンのスタイルここまで */

/* トップ動画のスタイル */
.video-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.background-video {
  width: 100%;
  height: auto;
  filter: contrast(1.2) brightness(0.9); /* ドットフィルター風の調整 */
  object-fit: cover;
}

/* トップ動画のスタイルここまで */

/* ギャランティセクション */
/* セクションのスタイル */
.feature-section {
  background-color: #f8f0fa; /* 背景色を淡いピンクに設定 */
  text-align: center;
  padding: 40px 20px;
}

.feature-title {
  font-size: 2em;
  margin-bottom: 40px;
  font-weight: bold;
  color: #333;
}

/* 各アイテムのコンテナ */
.feature-items {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.feature-item {
  max-width: 200px;
  text-align: center;
}

/* アイコン */
.feature-icon {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.feature-icon img {
  width: 30px;
  height: 30px;
}

/* 見出し */
.feature-heading {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* 説明テキスト */
.feature-description {
  font-size: 0.9em;
  color: #666;
  line-height: 1.5;
}

/* 787px以下の画面幅でコンテンツを縦に並べる */
@media (max-width: 787px) {
  .feature-items {
      flex-direction: column; /* コンテンツを縦に並べる */
      align-items: center; /* 中央揃え */
  }

  .feature-item {
      max-width: 100%; /* アイテムの幅を100%に設定 */
  }
}
/* ギャランティセクションここまで */

/* プロダクトセクションここから */
.product-section {
  padding: 40px 20px;
  background-color: #ffffff; /* 淡いピンクの背景色 */
}

/* コンテンツのレイアウト */
.product-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* テキスト部分 */
.product-text {
  flex: 1;
}

.product-title {
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.product-price {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.product-description {
  font-size: 1em;
  margin-bottom: 20px;
  color: #333;
}

.product-features {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 20px;
}

.product-features li {
  margin-bottom: 10px;
  color: #666;
}

.product-note {
  font-size: 0.9em;
  color: #666;
  line-height: 1.5;
}

/* 画像部分 */
.product-image {
  flex: 1;
  text-align: center;
}

.product-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
}

.price-strikethrough {
  color: red; /* 赤色 */
  text-decoration: line-through; /* 打ち消し線 */
}


/* 787px以下の画面幅でのレイアウト変更 */
@media (max-width: 787px) {
  .product-content {
      flex-direction: column; /* コンテンツを縦並びに */
      align-items: center; /* 中央揃え */
  }

  .product-image {
      margin-bottom: 20px; /* 画像とテキストの間に余白を追加 */
  }
}

div.offer_btn {
  text-align: center;
  margin-bottom: 10%;
}

/* プロダクトセクションここまで */

/* フッターのスタイル */
footer {
  background-color: #000;
  padding: 20px 0;
  color: #fff;
  text-align: center;
  /* height: 10vh; フッターの高さを画面の10%に設定 */
  /* width: 100%; */
  display: flex;
  flex-direction: column;
  /* align-items: center; /* テキストをフッター内で中央揃え */
  /* justify-content: center; テキストを水平中央揃え */ 
}

div.policy a {
  text-decoration: none;
  color: #fff;
  font-size: 1.2em;
  padding: 5px;
  display: inline-block;
}

p.copyright {
  font-size: 1em;
}

/* フッターのスタイルここまで */