.container {
  background-image: url(/static/images/renew/bg.jpg);
    background-size: contain;
}
/* HEADER STYLING */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* LOGO STYLING */
.logo {
  display: flex;
  align-items: center;
}

.logo-image {
  max-height: 40px; /* Adjust the height to match the size from the example */
  width: auto; /* Maintain aspect ratio */
}

/* HEADER ACTIONS */
.header-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* LOGIN BUTTON */
.login-button {
  background-color: #0099ff;
  color: #ffffff;
  text-decoration: none;
  border: none;
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: #007acc;
}


/* HAMBURGER MENU */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  cursor: pointer;
}

.hamburger-menu div {
  width: 100%;
  height: 2px;
  background-color: #333333;
  transition: background-color 0.3s ease;
}

.hamburger-menu:hover div {
  background-color: #007acc;
}

/* サイドメニューのスタイル */
.side-menu {
  position: fixed;
  top: 0;
  right: -250px; /* 初期状態では画面外 */
  width: 250px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 15px;
}

.side-menu .menu-link {
  text-decoration: none;
  color: #333333;
  font-size: 18px;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.side-menu .menu-link:hover {
  background-color: #f0f0f0;
}

/* オーバーレイのスタイル */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ハンバーガーメニューのアクティブ状態 */
.side-menu.active {
  right: 0;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}





/* INTRO SECTION */
.intro-section {
  position: relative;
  text-align: center;
  height: 387px; /* 高さを調整 */
  background: url("/static/images/mv-01.jpg") no-repeat center center/cover; /* 背景画像 */
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  /* margin-bottom: 20px; */
}

/* 画像上のテキスト */
.intro-content {
  position: relative;
  color: unset;
  text-align: center;
  line-height: 1.2;
  margin-top: 6%;
}

.intro-heading {
  font-size: 1.5em; /* ヘッディングのフォントサイズ */
  font-weight: bold; /* 太字に設定 */
  margin: 0; /* 上下の余白を削除 */
}

/* ハイライトセクション */
.intro-highlight {
  text-align: center;
  padding: 20px 0; /* 上下の余白を追加 */
  /* background-color: #f9f9f9; */
}

.highlight-text {
  font-size: 1.2em; /* テキストサイズ */
  margin-bottom: 10px; /* 下に余白を設定 */
  color: #333333; /* テキストの色 */
}

.cta-button {
  display: inline-block;
  padding: 10px 35px; /* ボタン内の余白 */
  background-color: #EA89A4; /* ボタンの背景色 */
  border: 1px solid #fff;
  color: #ffffff; /* ボタン内の文字色 */
  text-decoration: none; /* 下線を削除 */
  border-radius: 30px; /* ボタンの角を丸くする */
  font-size: 1em; /* ボタンのフォントサイズ */
  transition: background-color 0.3s ease; /* ホバー時のスムーズな色変化 */
  margin: 0 auto 2%;
  text-align: center;
  box-shadow: 0px 2px 3px #999;
}

.cta-btn-btm {
  display: block;
  font-size: 10%;
}

.cta-btn-btm-last {
  margin-top: -3%;
}

.cta-button:hover {
  background-color: #db5c93; /* ホバー時の背景色 */
}



/* FEATURES SECTION */
.features-section {
  padding: 20px;
  /* background-color: #f9f9f9; */
}

.section-heading {
    font-size: 23px;
    font-weight: bold; /* 太字にする */
    /* background: linear-gradient(to bottom, transparent 70%, #0099ff 70%); マーカーの位置を下に */
    display: inline; /* インライン表示 */
    color: black; /* 文字色を黒に */
    line-height: 1.5; /* 行間を調整 */
    position: relative;
    z-index: 1;
}
.section-heading::before {
  content: "";
  position: absolute;
  display: block;
  background: linear-gradient(90deg, #FF5417 0%, #CF67FF 100%); /* マーカーの位置を下に */
  width: 100%;
  height: 10px;
  margin-top: 20px;
  left: -1%;
  border-radius: 50px;
  z-index: -1;
}

.feature-title {
    display: inline-block; /* ボタンのようにする */
    background-color: #FF9FA1; /* ボタンの背景色（ログインボタンと一致させる） */
    color: #fff; /* 文字色を白に */
    padding: 8px 12px; /* 内側の余白 */
    border-radius: 20px; /* 角を丸くする */
    font-weight: bold;
    text-align: center;
    cursor: default; /* マウスポインタを矢印に */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
    text-decoration: none; /* 下線を消す */
    transition: background-color 0.3s ease;
    font-size: 14px;
    border: none;
    margin-top: 15px;
}
.feature-title-2 {
  background-color: #FFD367;
}
.feature-title-3 {
  background-color: #9DCDEE;
}
.feature-title-4 {
  background-color: #EDBFF7;
}

.feature-block p {
  font-weight: bold;
  padding: 10px ;
  font-size: 15px;
}

.feature-block small {
  font-size: 12px;
}

.features-section ul {
  list-style: none;
  padding: 0;
}

.features-section .button {
  text-align: center;
  margin-top: 10px;
}

.features-section li {
  margin-bottom: 15px;
  line-height: 1.6;
}

.feature-block-btm {
  margin-top: 30px;
  margin-bottom: 30px;
}
.feature-block-btm-1,
.feature-block-btm-2 {
  display: flex;
  column-gap: 15px;
  margin-bottom: 10px;
}
.feature-block-btm-1 img,
.feature-block-btm-2 img {
  width: 30%;
}
.step-section {
  padding: 20px;
  text-align: center;
}
.step-section ul {
  margin:10px 20px 20px;
  list-style: none;
  text-align: left;
}
.step-plof {
  display: flex;
  margin-bottom: 30px;
}
.step-plof img {
  width: 40%;
}
.step-plof p {
  font-size: 16px;
    font-weight: 700;
    line-height: 1.9;
    letter-spacing: -0.8px;
    margin-left: 18px;
}
.step-plof span {
  font-size: 28px;
  color: #EA89A4;
}

.step-plof-onl {
  display: flex;
  column-gap: 15px;
}
.step-plof-del img {
  position: relative;
  width: 100%;
}
.step-plof-del p {
  position: absolute;
  padding: 3px 15px;
  margin-top: -25px;
  font-size: 14px;
  border-radius: 50px;
}
.step-plof-onl .step-plof-del:nth-child(1) p {
  background: #D8ABE5;
}
.step-plof-onl .step-plof-del:nth-child(2) p {
  background: #71AAD8;
  margin-left: 10px;
}
.step-plof-onl .step-plof-del:nth-child(3) p {
  background: #F4819F;
}
.step-plof-del span {
  position: absolute;
  margin-top: 42%;
  left: 50px;
}
.step-plof-onl .step-plof-del:nth-child(1) span {
  left: 16%;
}
.step-plof-onl .step-plof-del:nth-child(2) span {
  left: 41%;
}
.step-plof-onl .step-plof-del:nth-child(3) span {
left: 73%;
}
@media (min-width: 768px) {
  .step-plof-del span {
    margin-top: 167px;
  }
.step-plof-onl .step-plof-del:nth-child(1) span {
  left: 39%;
}
.step-plof-onl .step-plof-del:nth-child(2) span {
  left: 47.1%;
}
.step-plof-onl .step-plof-del:nth-child(3) span {
left: 57.2%;
}
}

.step-plof-icon {
  margin-top: 60px;
  margin-bottom: 20px;
  display: flex;
} 
.step-plof-icon-f {
  margin: 12% 3% 0;
  width: 5%;
}
.step-plof-icon-i p {
  font-size: 14px;
}
.step-plof-icon-i .pink {
  color: #EA89A4;
  width: 100%;
  letter-spacing: -3px;
}
.step-plof-icon-i .yellow {
  color: #FFDA6B;
}
.step-plof-icon-i .blue {
  color: #96E5FD;
}
.movie video {
  width: 100%;
  height: auto;
  display: block;
  margin: 30px auto;
}


.cnt-app-bnr {
  margin-top: 56px;
  text-align: center;
}
.cnt-app-bnr img {
  width: 70%;
}
.cnt-app-bnr h2 {
  font-size: 30px;
}
.cnt-app-bnr h2 span {
  color: #FF8690;
}
.cnt-app-bnr-box {
  display: flex;
  overflow: hidden;
}
.cnt-app-bnr-box-l {
  margin-top: 15%;
  position: absolute;
  z-index: 2;
}
.cnt-app-bnr-box-text {
  font-size: 14.2px;
    width: 90%;
    font-weight: 700;
}
.cnt-app-bnr-box-text span {
  color: #FF8690;
}
.cnt-app-bnr-box-text-img {
  width: 41%;
}
.cnt-app-bnr-box-r {
  width: 70%;
  position: relative;
  left: 42%;
}
.cnt-app-bnr-box-text {
  text-align: left;
  font-size: 15.2px;
  width: 95%;
  margin-left: 18px;
  margin-bottom: 19px;
}
.cnt-app-bnr-box-text-img img {
  width: 100%;
}
.cnt-app-bnr-box-text-img a {
  display: block;
    width: 120%;
    margin-left: 116%;
}
@media (min-width: 768px) {
  .cnt-app-bnr-box-l {
    margin-top: 5%;
  }
  .cnt-app-bnr-box-text {
    font-size: 19.2px;
  }
}

/* CONNECTIONS SECTION */
/* .connections-section {
  text-align: center;
  padding: 20px;
}

.connections-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.connection-item {
  max-width: 30%;
  text-align: center;
}

.connection-item img {
  max-width: 100%;
  border-radius: 10px;
} */


.connections-section {
    text-align: left; /* Align text to the left */
    padding: 20px;
    margin: 0 auto; /* Center the section on the page */
    max-width: 800px; /* Limit the width of the section */
}




.connections-grid {
    display: grid;
    grid-template-columns: 1fr; /* Stack items vertically */
    gap: 20px; /* Add space between items */
}

.connection-item {
    display: flex;
    flex-direction: column;
    align-items: left; /* Align images and text to the left */
}

.connection-item img {
    max-width: 90%; /* Make images responsive */
    /* border-radius: 10px; */
    margin-bottom: 10px; /* Space between image and text */
    margin: auto;
}

.connection-item p {
    font-size: 16px;
    font-weight: bold;
    color: #333; /* Darker text for readability */
    /* margin: 0; */
    margin-top: 20px;
}





/* ハイライトセクション */
.end-highlight {
  text-align: center;
  padding: 20px 0; /* 上下の余白を追加 */
  /* background-color: #f9f9f9; */
}

.highlight-text {
  font-size: 1.2em; /* テキストサイズ */
  margin-bottom: 10px; /* 下に余白を設定 */
  color: #333333; /* テキストの色 */
}


.end-highlight .buttons {
    display: flex;
    flex-direction: column;
    align-items: center; /* ボタンを中央に揃える */
    gap: 10px;
}


/* LOGIN BUTTON */
.contact-button {
  display: inline-block;
  background-color: #5fbfff;
  color: #000000;
  text-decoration: none;
  border: none;
  border-radius: 20px;
  padding: 8px 12px;
  /* font-size: 14px; */
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: bold;
  box-shadow: 0px 2px 3px #999;
}

.contact-button:hover {
  background-color: #4db8ff;
}


/* Footer Styling */
.footer {
    padding: 20px;
    background-color: #f0f0f0; /* Light gray background */
    text-align: center;
    font-size: 14px; /* Slightly smaller font size */
    color: #333; /* Dark gray text color */
}

/* Footer Links Section */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 50px; /* Space between the two columns */
    margin-bottom: 20px;
}

.footer-link-column {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between links */
}

.footer-link-column a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: color 0.3s ease;
}

.footer-link-column a:hover {
    color: #007BFF; /* Change link color on hover */
}

/* Footer Info Section */
.footer-info {
    margin-bottom: 15px;
    font-size: 12px; /* Smaller font for legal info */
    line-height: 1.6; /* Adjust line spacing */
    color: #666; /* Lighter gray for legal info */
}

/* Footer Copyright Section */
.footer-copyright {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.app-bnr {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  display: block;
  width: 100%;
  height: 70px;
  background: linear-gradient(100deg,#00a0e8, #e4007f);
  padding-top: 2.5vw;
  text-decoration: none;
  border: solid 1px #fff;
  box-shadow: 0px -1px 2px #999;
  }
  

  .app-bnr-text {
      text-align: center;
      font-size: 8vw;
      color: #fff;
      margin-right: 8%;
  }

  .app-bnr-text::after {
    content: "※現在androidアプリのみ";
    position: absolute;
    font-size: 3vw;
    bottom: 1vw;
    left: auto;
    right: 10vw;
    font-weight: 400;
  }

  .is-hidden {
    visibility: hidden;
    opacity: 0;
  }

  @media (min-width: 768px) {
    .app-bnr {
      width: 400px;
      padding-top: 11px;
    }
    .app-bnr-text {
      font-size: 30px;
  }
  .app-bnr-text::after {
    font-size: 12px;
    right: 12px;
    bottom: 0;
  }
}