@charset "UTF-8";
/*-------------------
共通設定(PC)
-------------------*/
html,
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 62.5%;
  font-style: normal;
  line-height: 1.5;
  color: #252525;
  scroll-behavior: smooth;
  overflow-x: clip;
}
body .sp-item {
  display: none !important;
}
body .pc-item {
  display: block !important;
}
a {
  text-decoration: underline;
}
/* ボタン */
.btn-poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
  position: relative;
  overflow: hidden;
}
@keyframes poyopoyo {
  0%,
  40%,
  60%,
  80% {
    transform: scale(1);
  }
  50%,
  70% {
    transform: scale(0.95);
  }
}
.btn-shine img {
  display: block;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
  animation: glow-loop 2s infinite linear;
}
@keyframes glow-loop {
  0% {
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
}
.btn:hover {
  opacity: 0.7;
}
/* 画像関連の共通設定 */
img {
  width: 100%;
}
/*ページ全体*/
.container {
  width: 100%;
  max-width: 1960px;
  margin: 0 auto;
  padding: 0;
}
/* hidden項目 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* ヘッダー分の余白をmainに追加 */
@media screen and (max-width: 768px) {
  main {
    margin-top: min(80px, calc(80 * 100vw / 750));
  }
}
/*-----------------------
ヘッダーエリア
------------------------*/
.header-container {
  position: fixed;
  top: 0;
  width: 750px;
  height: 80px;
  background-color: #fff;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.header-container.is-scrolled {
  background-color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.3s ease;
}
.header-logo {
  width: 60%;
}
.header-logo img {
  width: 100%;
  height: auto;
}
/* ハンバーガーメニュー */
.hamburger-menu {
  display: flex;
  align-items: center;
  position: relative;
}
.hamburger {
  width: 50px;
  height: 60px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .hamburger {
    width: calc(50 * 100vw / 750);
    height: calc(50 * 100vw / 750);
  }
}
.hamburger__line {
  position: absolute;
  width: 32px;
  height: 3px;
  background-color: #232323;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .hamburger__line {
    width: calc(32 * 100vw / 750);
    height: calc(3 * 100vw / 750);
  }
}
.hamburger__line:nth-of-type(1) {
  top: 15px;
}
@media screen and (max-width: 768px) {
  .hamburger__line:nth-of-type(1) {
    top: calc(15 * 100vw / 750);
  }
}
.hamburger__line:nth-of-type(2) {
  top: 25px;
}
@media screen and (max-width: 768px) {
  .hamburger__line:nth-of-type(2) {
    top: calc(25 * 100vw / 750);
  }
}
.hamburger__text {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.2rem;
  color: #232323;
  font-weight: bold;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .hamburger__text {
    top: calc(35 * 100vw / 750);
  }
}
.sp-nav-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 350px;
  background-color: #fff;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
@media screen and (max-width: 768px) {
  .sp-nav-menu {
    width: calc(350 * 100vw / 750);
  }
}
.sp-nav-menu.active {
  display: block;
  opacity: 1;
  visibility: visible;
}
.sp-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-nav-item {
  padding: 0 15px;
  font-size: 1.4rem;
}
.sp-nav-item a {
  display: block;
  padding: 12px 0;
  color: #232323;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}
/* スマホ表示 - 768px以下 */
@media screen and (max-width: 768px) {
  .header-container {
    width: 100vw;
    height: calc(80 * 100vw / 750);
  }
  .header-area {
    padding: 0 10px;
  }
  .header-menu {
    right: 10px;
  }
}
/*-----------------------
下部固定ボタンエリア
------------------------*/
.fixed-button {
  position: fixed;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  display: none; /* 初期非表示 */
  text-align: center;
  z-index: 1000;
  transition: opacity 0.3s ease-in-out;
}
.fixed-button a {
  display: block;
  width: fit-content;
}
.fixed-button img {
  display: block;
  width: 30vw;
  height: auto;
}
@media screen and (max-width: 768px) {
  .fixed-button img {
    width: 80vw;
  }
}
.fixed-button.visible {
  display: flex; /* 表示状態 */
  opacity: 1;
}
/*-----------------------
CTAエリア
------------------------*/
.cta-area {
  text-align: center;
  margin: 0 auto min(60px, calc(60 * 100vw / 1960));
}
.cta-area-btn {
  width: 40%;
}
@media screen and (max-width: 768px) {
  .cta-area {
    margin: 0 auto calc(40 * 100vw / 750);
  }
  .cta-area-btn {
    width: 80%;
  }
}

/*-----------------------
ファーストビューエリア(PC)
------------------------*/
.fv-area-main {
  width: 100%;
  height: min(876px, calc(876 * 100vw / 1960));
  position: relative;
  background-color: #52bcb1;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .fv-area-main {
    height: min(1090px, calc(1090 * 100vw / 750));
    align-items: center;
    flex-direction: column;
  }
}
.fv-area-left,
.fv-area-right {
  flex-basis: 50%;
  height: 100%;
}
.fv-area-left {
  position: relative;
}
@media screen and (max-width: 768px) {
  .fv-area-left {
    flex-basis: auto;
    width: 100%;
    height: calc(684 * 100vw / 750);
  }
  .fv-area-right {
    flex-basis: auto;
    width: 100%;
    height: auto;
  }
}
.fv-bg-layers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fv-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fv-bg-layer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#fv-bg-1 {
  z-index: 1;
  opacity: 0;
  animation: fadeIn-fv-bg 1s ease-in-out forwards;
}
#fv-bg-2 {
  z-index: 2;
  opacity: 0;
  animation: fadeIn-fv-bg 1s ease-in-out 0.8s forwards;
}
#fv-bg-3 {
  z-index: 3;
}
#fv-bg-4 {
  z-index: 10;
  opacity: 0;
  animation: fadeIn-fv-bg 1s ease-in-out 1.6s forwards, float-fv-bg-4 4s ease-in-out infinite 3s;
}
@media screen and (max-width: 768px) {
  #fv-bg-4 {
    animation: fadeIn-fv-bg 1s ease-in-out 1.6s forwards, float-fv-bg-4-sp 4s ease-in-out infinite 3s;
  }
}
@keyframes fadeIn-fv-bg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes float-fv-bg-4 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
@keyframes float-fv-bg-4-sp {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-15 * 100vw / 750));
  }
}
.fv-main-icon1-wrap {
  animation: float-fv-main-icon1-x 6s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 3%;
  left: 25%;
  right: 0;
  z-index: 5;
  width: calc(110 * 100vw / 1960);
  max-width: 120px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .fv-main-icon1-wrap {
    width: calc(100 * 100vw / 750);
  }
}
@keyframes float-fv-main-icon1-x {
  0% {
    transform: translateX(-2%);
  }
  100% {
    transform: translateX(2%);
  }
}
@keyframes float-fv-main-icon1-y {
  0% {
    transform: translateY(-0.5%);
  }
  100% {
    transform: translateY(0.5%);
  }
}
.fv-main-icon2-wrap {
  animation: float-fv-main-icon2-x 3s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 5%;
  left: 3%;
  right: 0;
  z-index: 5;
  width: calc(120 * 100vw / 1960);
  max-width: 120px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .fv-main-icon2-wrap {
    width: calc(106 * 100vw / 750);
  }
}
.fv-main-icon2-img {
  animation: float-fv-main-icon2-y 3s ease-in-out infinite alternate-reverse;
}
@keyframes float-fv-main-icon2-x {
  0% {
    transform: translateX(-2%);
  }
  100% {
    transform: translateX(2%);
  }
}
@keyframes float-fv-main-icon2-y {
  0% {
    transform: translateY(-4%);
  }
  100% {
    transform: translateY(4%);
  }
}
.fv-main-icon3-wrap {
  animation: float-fv-main-icon3-x 4s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 6%;
  left: 7%;
  right: 0;
  z-index: 5;
  width: calc(180 * 100vw / 1960);
  max-width: 180px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .fv-main-icon3-wrap {
    width: calc(110 * 100vw / 750);
    top: 8%;
    left: 10%;
  }
}
.fv-main-icon3-img {
  animation: float-fv-main-icon3-y 4s ease-in-out infinite alternate;
}
@keyframes float-fv-main-icon3-x {
  0% {
    transform: translateX(-4%);
  }
  100% {
    transform: translateX(4%);
  }
}
@keyframes float-fv-main-icon3-y {
  0% {
    transform: translateY(-6%);
  }
  100% {
    transform: translateY(6%);
  }
}
.fv-main-icon4-wrap {
  animation: float-fv-main-icon4-x 3s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 6%;
  left: 82%;
  right: 0;
  z-index: 5;
  width: calc(280 * 100vw / 1960);
  max-width: 280px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .fv-main-icon4-wrap {
    width: calc(175 * 100vw / 750);
    top: 10%;
    left: 82%;
  }
}
.fv-main-icon4-img {
  animation: float-fv-main-icon4-y 3s ease-in-out infinite alternate;
}
@keyframes float-fv-main-icon4-x {
  0% {
    transform: translateX(-1%);
  }
  100% {
    transform: translateX(3%);
  }
}
@keyframes float-fv-main-icon4-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}
.fv-main-icon5-wrap {
  animation: float-fv-main-icon5-x 2s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 1%;
  left: 86%;
  right: 0;
  z-index: 5;
  width: calc(160 * 100vw / 1960);
  max-width: 160px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .fv-main-icon5-wrap {
    width: calc(95 * 100vw / 750);
  }
}
.fv-main-icon5-img {
  animation: float-fv-main-icon5-y 2s ease-in-out infinite alternate-reverse;
}
@keyframes float-fv-main-icon5-x {
  0% {
    transform: translateX(-1%);
  }
  100% {
    transform: translateX(1%);
  }
}
@keyframes float-fv-main-icon5-y {
  0% {
    transform: translateY(-0.5%);
  }
  100% {
    transform: translateY(0.5%);
  }
}
.fv-main-icon6-wrap {
  animation: float-fv-main-icon5-x 2s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 4%;
  left: 70%;
  right: 0;
  z-index: 5;
  width: calc(220 * 100vw / 1960);
  max-width: 220px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .fv-main-icon6-wrap {
    width: calc(160 * 100vw / 750);
  }
}
.fv-main-ttl {
  margin: min(288px, calc(288 * 100vw / 1960)) auto min(32px, calc(32 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .fv-main-ttl {
    margin: calc(30 * 100vw / 750) auto calc(40 * 100vw / 750);
  }
}
.fv-cta-btn-line {
  width: 60%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .fv-cta-btn-line {
    width: 80%;
  }
}
.header-menu {
  position: fixed;
  width: min(980px, calc(980 * 100vw / 1960));
  top: 0;
  left: 50%;
  padding: min(20px, calc(20 * 100vw / 1960));
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  border-bottom-left-radius: min(40px, calc(40 * 100vw / 1960));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 10000;
}
.header-menu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: space-around;
}
.header-menu li a {
  font-size: min(18px, calc(18 * 100vw / 1960));
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}
.header-menu li a:hover {
  opacity: 0.7;
}
.header-menu-logo {
  width: min(50px, calc(50 * 100vw / 1960));
}

/*-----------------------
職種アイコンスクロールエリア
------------------------*/
.job-icons-scroll {
  background-color: #52bcb1;
  padding: min(32px, calc(32 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960));
  overflow: hidden;
  position: relative;
}
@media (max-width: 768px) {
  .job-icons-scroll {
    padding: calc(20 * 100vw / 750) calc(20 * 100vw / 750) 0;
    margin-top: -1px;
  }
}
.job-icons-container {
  width: 100%;
  height: min(96px, calc(96 * 100vw / 1960));
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: min(20px, calc(20 * 100vw / 1960));
  overflow: hidden;
  position: relative;
  padding: min(51px, calc(51 * 100vw / 1960)) 0;
}
@media (max-width: 768px) {
  .job-icons-container {
    height: calc(80 * 100vw / 750);
    padding: calc(20 * 100vw / 750) 0;
    border-radius: calc(20 * 100vw / 750);
  }
}
/* トラック：JSで transform を連続更新（アニメ指定なし） */
.job-icons-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: 0; /* セット間の余白はゼロ固定（ズレ防止） */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}
/* 1セット分（ここでアイコン間の間隔を定義） */
.job-icons-set {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: min(100px, calc(100 * 100vw / 1960));
}
/* アイコン見た目 */
.job-icons-set img {
  display: block;
  width: auto;
  height: min(60px, calc(60 * 100vw / 1960));
  object-fit: contain;
  flex-shrink: 0;
  margin: 0;
}
@media (max-width: 768px) {
  .job-icons-set img {
    height: calc(40 * 100vw / 750);
  }
}
/* 1周目と2週目のスペース用 */
.job-icons-spacer {
  flex: 0 0 auto;
}
/*-----------------------
Youtubeエリア
------------------------*/
.youtube-area {
  background-image: url("../images/bg_youtube.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: min(567px, calc(567 * 100vw / 1960));
  border-radius: 0 0 min(100px, calc(100 * 100vw / 1960)) min(100px, calc(100 * 100vw / 1960));
  padding: min(32px, calc(32 * 100vw / 1960)) 0;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .youtube-area {
    background-image: url("../images/bg_youtube_sp.png");
    width: 100%;
    height: calc(632 * 100vw / 750);
    border-radius: 0 0 calc(100 * 100vw / 750) calc(100 * 100vw / 750);
    padding: calc(20 * 100vw / 750) 0;
  }
}

/* メイン枠：位置・サイズは据え置き */
.youtube-swiper {
  position: relative;
  width: clamp(300px, 44vw, 850px);
  margin-left: auto;
  margin-right: clamp(24px, calc(340 * 100vw / 1960), 340px);
  aspect-ratio: 16 / 9;
}
@media screen and (max-width: 768px) {
  .youtube-swiper {
    width: 90%;
    margin: calc(170 * 100vw / 750) auto;
    aspect-ratio: 16 / 9;
  }
}
/* ナビゲーション（矢印） */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 49%;
  width: clamp(36px, 4vw, 56px);
  height: clamp(36px, 4vw, 56px);
  padding: 1rem;
  border-radius: 50%;
  background-color: rgba(117, 201, 193, 0.6);
  color: #fff;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: #fff;
  color: #52bcb1;
}
.swiper-button-prev {
  left: clamp(2%, 3vw, 5%);
}
.swiper-button-next {
  right: clamp(2%, 3vw, 5%);
}
/* アイコン字形（色は currentColor で親に追従させる） */
#ytMain .swiper-button-prev::after,
#ytMain .swiper-button-next::after {
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 800;
  color: currentColor;
  line-height: 1;
  text-align: center;
  content: "";
}
/* サムネスライダー（使っている場合だけ残す） */
.youtube-thumbs {
  width: clamp(320px, 48vw, 900px);
  margin: 16px auto 0;
  padding: 0 8px;
}
.youtube-thumbs .swiper-slide {
  width: clamp(110px, 16vw, 200px);
  aspect-ratio: 16/9;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.2s;
}
.youtube-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.youtube-thumbs .swiper-slide-thumb-active,
.youtube-thumbs .swiper-slide:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
@media (max-width: 768px) {
  .youtube-thumbs {
    width: 92%;
    padding: 0;
  }
  .youtube-thumbs .swiper-slide {
    width: 42vw;
  }
}

/* 既存の .yt-overlay に置き換え or 追記 */
.youtube-swiper .yt-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 50;
  opacity: 0; /* ← 非表示はopacityで */
  pointer-events: none; /* ← クリック無効 */
  transition: opacity 0.2s; /* ← フェード任意 */
}
.youtube-swiper .yt-overlay.is-open {
  opacity: 1;
  pointer-events: auto; /* ← 表示時だけクリック有効 */
}

/* オーバーレイは前面だが、矢印＆ドットをもっと前へ */
#ytMain .swiper-button-prev,
#ytMain .swiper-button-next,
#ytMain .swiper-pagination {
  z-index: 60;
}

.youtube-swiper .yt-overlay {
  z-index: 50; /* そのままでもOK。矢印系より低ければ良い */
}
/*-----------------------
悩みエリア
------------------------*/
.worries-area {
  width: 100%;
  margin: min(64px, calc(64 * 100vw / 1960)) 0;
  display: flex;
  flex-direction: row;
  background-color: #52bcb1;
  border-radius: min(110px, calc(110 * 100vw / 1960)) min(100px, calc(100 * 100vw / 1960)) min(100px, calc(100 * 100vw / 1960)) min(110px, calc(110 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .worries-area {
    flex-direction: column;
    margin: min(40px, calc(40 * 100vw / 750)) 0;
    background-color: #fff;
  }
}
.worries-area-left {
  flex-basis: 50%;
  position: relative;
  width: 100%;
  background-color: #f4f9ff;
  border-radius: min(100px, calc(100 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .worries-area-left {
    flex-basis: auto;
    height: calc(1312 * 100vw / 750);
    padding-right: calc(20 * 100vw / 750);
  }
}
.worries-area-right {
  flex-basis: 50%;
  position: relative;
  border-radius: min(100px, calc(100 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .worries-area-right {
    flex-basis: auto;
    width: 100%;
  }
}
.worries-area h2 {
  margin: 0;
}
.worries-area-ttl {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .worries-area-ttl {
    top: 7%;
  }
}
.worries-list {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  list-style: none;
}
@media screen and (max-width: 768px) {
  .worries-list {
    top: calc(198 * 100vw / 750);
    width: calc(710 * 100vw / 750);
    padding: 0;
  }
}
.worries-item {
  display: flex;
  align-items: center;
  margin: 0 0 min(32px, calc(32 * 100vw / 1960)) 0;
  padding: min(16px, calc(16 * 100vw / 1960));
  border-radius: min(24px, calc(24 * 100vw / 1960));
  box-shadow: 0 min(2px, calc(2 * 100vw / 1960)) min(40px, calc(40 * 100vw / 1960)) rgba(0, 0, 0, 0.1);
  background: #fff;
}
@media screen and (max-width: 768px) {
  .worries-item {
    margin: 0 0 calc(20 * 100vw / 750) calc(20 * 100vw / 750);
    padding: calc(10 * 100vw / 750);
    border-radius: calc(15 * 100vw / 750);
    box-shadow: 0 2px calc(15 * 100vw / 750) rgba(0, 0, 0, 0.1);
  }
}
.worries-text {
  font-size: min(32px, calc(32 * 100vw / 1960));
  line-height: 1.6;
  font-weight: 500;
  opacity: 0;
  transform: translateY(calc(64px, calc(64 * 100vw / 1960)));
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
@media screen and (max-width: 768px) {
  .worries-text {
    font-size: calc(28 * 100vw / 750);
  }
}

.worries-text.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.worries-text span {
  color: #52bcb1;
}
.worries-icon {
  width: min(96px, calc(96 * 100vw / 1960));
  height: min(96px, calc(96 * 100vw / 1960));
  margin-right: min(16px, calc(16 * 100vw / 1960));
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  .worries-icon {
    width: calc(80 * 100vw / 750);
    height: calc(80 * 100vw / 750);
    margin-right: calc(10 * 100vw / 750);
  }
}
.worries-risk {
  position: absolute;
  top: 85%;
  left: 6%;
  width: 65%;
  border-radius: min(24px, calc(24 * 100vw / 1960));
  padding: min(32px, calc(32 * 100vw / 1960)) min(30px, calc(30 * 100vw / 1960));
  background-color: #52bcb1;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .worries-risk {
    top: 82%;
    width: 70%;
    border-radius: calc(15 * 100vw / 750);
    padding: calc(20 * 100vw / 750) calc(30 * 100vw / 750);
    box-shadow: 0 2px calc(15 * 100vw / 750) rgba(0, 0, 0, 0.1);
  }
}
.worries-risk-text {
  font-size: min(35px, calc(35 * 100vw / 1960));
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .worries-risk-text {
    font-size: calc(28 * 100vw / 750);
  }
}
.worries-msg-card {
  position: relative;
  border-radius: 0 min(100px, calc(100 * 100vw / 1960)) min(100px, calc(100 * 100vw / 1960)) 0;
  overflow: hidden;
  margin: 0 auto;
  background-color: #52bcb1;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .worries-msg-card {
    width: 100%;
    height: calc(888 * 100vw / 750);
    border-radius: 0 0 calc(160 * 100vw / 750) 0;
    margin: calc(-50 * 100vw / 750) auto;
  }
}
/* 背景画像を重ねるための追加スタイル */
.worries-smart-logo-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.worries-smart-logo-wrap {
  position: absolute;
  top: 20%;
  left: 80%;
  width: 15%;
  height: 15%;
}
@media screen and (max-width: 768px) {
  .worries-smart-logo-wrap {
    top: 23%;
  }
}
.worries-bg-layer2 {
  position: absolute;
  bottom: 0;
  right: 4%;
  width: 33%;
}
@media screen and (max-width: 768px) {
  .worries-bg-layer2 {
    right: 0%;
  }
}
.worries-smart-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#worries-bg-1 {
  z-index: 1;
}
#worries-smart-logo {
  animation: float-worries-bg-2-x 7.2s ease-in-out infinite alternate-reverse;
}
#worries-bg-2-wrap {
  z-index: 3;
  animation: float-worries-bg-2-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes float-worries-bg-2-x {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes float-worries-bg-2-y {
  0% {
    transform: translateY(-3.5%);
  }
  100% {
    transform: translateY(3.5%);
  }
}
@media screen and (max-width: 768px) {
  #worries-smart-logo {
    animation: float-worries-bg-2-x-sp 7.2s ease-in-out infinite alternate-reverse;
  }
  #worries-bg-2-wrap {
    z-index: 3;
    animation: float-worries-bg-2-y-sp 1.8s ease-in-out infinite alternate-reverse;
  }
}
@keyframes float-worries-bg-2-x-sp {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
@keyframes float-worries-bg-2-y-sp {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}
.worries-msg-card-ttl {
  position: absolute;
  color: #fff;
  text-align: center;
  font-size: min(67px, calc(67 * 100vw / 1960));
  font-weight: 600;
  top: 9%;
  left: 0;
  right: 0;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .worries-msg-card-ttl {
    font-size: calc(42 * 100vw / 750);
  }
}
.worries-msg-card-ttl img {
  margin-bottom: min(12px, calc(12 * 100vw / 1960));
}

.worries-msg-card-ttl-logo {
  width: 80%;
}
.worries-msg-card-content {
  position: absolute;
  color: #fff;
  text-align: center;
  font-size: min(38px, calc(38 * 100vw / 1960));
  line-height: 1.6;
  font-weight: 600;
  top: 36%;
  left: 0;
  right: 0;
}
@media screen and (max-width: 768px) {
  .worries-msg-card-content {
    font-size: calc(28 * 100vw / 750);
  }
}
@media screen and (max-width: 768px) {
  .worries-arrow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(80 * 100vw / 750);
    height: calc(80 * 100vw / 750);
  }
}
/*-----------------------
チェンジエリア
------------------------*/
.change-area {
  margin: min(160px, calc(160 * 100vw / 1960)) 0 min(80px, calc(80 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .change-area {
    margin: calc(60 * 100vw / 750) 0 calc(40 * 100vw / 750) 0;
  }
}
@media screen and (max-width: 768px) {
  .ttl-change {
    margin-bottom: calc(40 * 100vw / 750);
  }
}
.ttl-change-sub {
  position: relative;
  text-align: center;
  margin: min(64px, calc(64 * 100vw / 1960)) 0;
}
.ttl-change-sub h3 {
  display: inline-block;
  font-size: min(44px, calc(44 * 100vw / 1960));
  font-weight: bold;
  padding: 0 min(64px, calc(64 * 100vw / 1960));
  background-color: #fff;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .ttl-change-sub h3 {
    font-size: calc(28 * 100vw / 750);
    padding: 0 calc(40 * 100vw / 750);
  }
}
.ttl-change-sub::before,
.ttl-change-sub::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #52bcb1;
  position: absolute;
  left: min(160px, calc(160 * 100vw / 1960));
  right: min(160px, calc(160 * 100vw / 1960));
  top: 50%;
  z-index: 0;
}
.img-step_zeirishi,
.img-step_sumakaku {
  margin-bottom: min(96px, calc(96 * 100vw / 1960));
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
@media screen and (max-width: 768px) {
  .img-step_zeirishi,
  .img-step_sumakaku {
    margin-top: 0;
    padding-bottom: calc(20 * 100vw / 750);
  }
}
.img-step_zeirishi picture,
.img-step_sumakaku picture {
  width: 100%;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .img-step_zeirishi picture,
  .img-step_sumakaku picture {
    min-width: calc(1248 * 100vw / 750);
  }
}
.img-step_zeirishi img,
.img-step_sumakaku img {
  width: 100%;
  height: auto;
}
.img-points_zeirishi {
  margin-bottom: min(96px, calc(96 * 100vw / 1960));
}
.img-step_sumakaku {
  margin-bottom: min(96px, calc(96 * 100vw / 1960));
  position: relative;
}
.img-step_sumakaku-point {
  position: absolute;
  top: 0;
  left: 85%;
  width: 12%;
  height: auto;
}
.img-points_sumakaku {
  margin-bottom: min(96px, calc(96 * 100vw / 1960));
}
.change-arrow {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .change-arrow {
    margin: calc(40 * 100vw / 750) 0;
  }
}
.change-arrow img {
  width: 15%;
}
/*-----------------------
勘違いエリア
------------------------*/
.miss-area {
  margin: 0 0 min(160px, calc(160 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .miss-area {
    margin: calc(40 * 100vw / 750) 0;
  }
}
.ttl-miss {
  margin-bottom: min(40px, calc(40 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .ttl-miss {
    margin-bottom: 0;
  }
}
.miss-card-content {
  margin: 0 0 min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .miss-card-content {
    margin: calc(-10 * 100vw / 750) 0 calc(30 * 100vw / 750);
    padding: 0 calc(40 * 100vw / 750);
  }
}
.miss-card {
  margin: 0 min(64px, calc(64 * 100vw / 1960));
}
.ttl-concept {
  margin-bottom: min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .ttl-concept {
    margin: calc(40 * 100vw / 750) 0;
  }
}

/*-----------------------
おすすめエリア
------------------------*/
.osusume-area {
  margin-top: min(40px, calc(40 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .osusume-area {
    margin-top: calc(20 * 100vw / 750);
  }
}
.osusume-voice {
  width: 90%;
  margin: clamp(-180px, -9.18vw, -100px) auto 0;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .osusume-voice {
    margin: 0 auto;
  }
}
.osusume-area-ttl {
  margin-bottom: 0;
  position: relative;
}
.osusume-list-area {
  background-color: #52bcb1;
  border-radius: min(128px, calc(128 * 100vw / 1960));
  padding-bottom: min(80px, calc(80 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .osusume-list-area {
    padding-bottom: 0;
    margin-top: calc(-40 * 100vw / 750);
    z-index: 10;
    position: relative;
  }
}
.osusume-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: min(10px, calc(10 * 100vw / 1960)) min(48px, calc(48 * 100vw / 1960));
  padding: min(80px, calc(80 * 100vw / 1960)) min(48px, calc(48 * 100vw / 1960)) min(48px, calc(48 * 100vw / 1960));
  list-style: none;
  margin: 0;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .osusume-list {
    grid-template-columns: 1fr;
    gap: calc(20 * 100vw / 750) calc(30 * 100vw / 750);
    padding: calc(60 * 100vw / 750) calc(40 * 100vw / 750) calc(40 * 100vw / 750) calc(20 * 100vw / 750);
    border-radius: calc(30 * 100vw / 750);
  }
}
.osusume-item {
  display: flex;
  align-items: center;
  margin: 0 0 min(32px, calc(32 * 100vw / 1960)) 0;
  padding: min(16px, calc(16 * 100vw / 1960)) min(30px, calc(30 * 100vw / 1960));
  border-radius: min(24px, calc(24 * 100vw / 1960));
  box-shadow: 0 min(3px, calc(3 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960)) rgba(0, 0, 0, 0.1);
  background: #fff;
}
@media screen and (max-width: 768px) {
  .osusume-item {
    margin: 0 0 calc(10 * 100vw / 750) calc(20 * 100vw / 750);
    padding: calc(10 * 100vw / 750) calc(20 * 100vw / 750);
    border-radius: calc(15 * 100vw / 750);
    box-shadow: 0 2px calc(15 * 100vw / 750) rgba(0, 0, 0, 0.1);
  }
}
.osusume-text {
  font-size: min(32px, calc(32 * 100vw / 1960));
  line-height: 1.6;
  font-weight: 500;
  opacity: 0;
  transform: none;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}
@media screen and (max-width: 768px) {
  .osusume-text {
    font-size: calc(28 * 100vw / 750);
  }
}
.osusume-text.fade-in {
  opacity: 1;
  transform: translateY(0);
}
.osusume-text span {
  color: #52bcb1;
}
.osusume-icon {
  width: min(96px, calc(96 * 100vw / 1960));
  height: min(96px, calc(96 * 100vw / 1960));
  margin-right: min(30px, calc(30 * 100vw / 1960));
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  .osusume-icon {
    width: calc(80 * 100vw / 750);
    height: calc(80 * 100vw / 750);
    margin-right: calc(30 * 100vw / 750);
  }
}

/*-----------------------
メッセージエリア
------------------------*/
.msg-card-area {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .msg-card-area {
    width: calc(730 * 100vw / 750);
    margin: calc(100 * 100vw / 750) 0 calc(20 * 100vw / 750) auto;
  }
}
.msg-card {
  position: relative;
}
@media screen and (max-width: 768px) {
  .msg-card {
    width: calc(730 * 100vw / 750);
    height: calc(1550 * 100vw / 750);
    border-radius: calc(100 * 100vw / 750) 0 0 calc(100 * 100vw / 750);
    margin: calc(40 * 100vw / 750) auto 0;
  }
}
.msg-card-ttl {
  font-size: min(44px, calc(44 * 100vw / 1960));
  font-weight: bold;
  margin: 0;
  color: #fff;
  position: absolute;
  text-align: center;
  top: 36%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
}
@media screen and (max-width: 768px) {
  .msg-card-ttl {
    font-size: calc(36 * 100vw / 750);
    text-align: center;
    top: 26%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .msg-card h2 {
    font-size: calc(36 * 100vw / 750);
  }
}
.msg-card-content {
  position: absolute;
  z-index: 1;
  color: #fff;
  padding: 0 10%;
  text-align: justify;
  font-size: min(28px, calc(28 * 100vw / 1960));
  line-height: 1.6;
  font-weight: 400;
  top: 57%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .msg-card-content {
    font-size: calc(28 * 100vw / 750);
    top: 36%;
    width: 100%;
  }
}
.msg-card-content p {
  margin-bottom: min(16px, calc(16 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .msg-card-content p {
    margin-bottom: calc(16 * 100vw / 750);
  }
}
.msg-card-content p span {
  color: #f8fc9f;
  font-weight: 500;
}
/*-----------------------
ポイントエリア
------------------------*/
.point-area-ttl-container {
  position: relative;
  margin-bottom: 0px;
}
.point-area-ttl2 {
  position: absolute;
  width: 40%;
  top: 30%;
  left: 32%;
  z-index: 2;
  animation: float-points-bg-2 4s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  .point-area-ttl2 {
    animation: float-points-bg-2-sp 4s ease-in-out infinite;
    width: 75%;
    top: 18%;
    left: 12%;
  }
}
@keyframes float-points-bg-2 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
@keyframes float-points-bg-2-sp {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-15 * 100vw / 750));
  }
}
.point-area-ttl3 {
  position: absolute;
  width: 24%;
  top: 30%;
  left: 62%;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .point-area-ttl3 {
    left: 64%;
    width: 30%;
  }
}
.point-area-ttl4 {
  position: absolute;
  width: 22%;
  top: 50%;
  left: 15%;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .point-area-ttl4 {
    width: 28%;
    top: 50%;
    left: 13%;
    z-index: 10;
  }
}
#points-bg-3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.point-area-ttl-icon {
  position: absolute;
  bottom: min(-32px, calc(-32 * 100vw / 1960));
  left: 10%;
  width: 28%;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .point-area-ttl-icon {
    bottom: calc(-20 * 100vw / 750);
  }
}

.point-area-icon1-wrap {
  animation: point-area-icon1-x 3s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 3%;
  left: 1%;
  right: 0;
  z-index: 1;
  width: min(256px, calc(256 * 100vw / 1960));
  height: auto;
}
@media screen and (max-width: 768px) {
  .point-area-icon1-wrap {
    width: calc(60 * 100vw / 750);
    top: 15%;
    left: 1%;
    width: 35%;
  }
}
.point-area-icon1-img {
  animation: point-area-icon1-y 3s ease-in-out infinite alternate;
}
@keyframes point-area-icon1-x {
  0% {
    transform: translateX(-1%);
  }
  100% {
    transform: translateX(3%);
  }
}
@keyframes point-area-icon1-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}
.point-area-icon2-wrap {
  animation: point-area-icon2-x 3s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 3%;
  left: 83%;
  right: 0;
  z-index: 1;
  width: min(144px, calc(144 * 100vw / 1960));
  height: auto;
}
@media screen and (max-width: 768px) {
  .point-area-icon2-wrap {
    width: 15%;
    top: 10%;
    left: 83%;
  }
}
.point-area-icon2-img {
  animation: point-area-icon2-y 3s ease-in-out infinite alternate;
}
@keyframes point-area-icon2-x {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(3%);
  }
}
@keyframes point-area-icon2-y {
  0% {
    transform: translateY(-4%);
  }
  100% {
    transform: translateY(4%);
  }
}
.point-area-icon3-wrap {
  animation: point-area-icon3-x 3s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 3%;
  left: 28%;
  right: 0;
  z-index: -1;
  width: min(160px, calc(160 * 100vw / 1960));
  height: auto;
}
@media screen and (max-width: 768px) {
  .point-area-icon3-wrap {
    width: 35%;
    top: 2%;
    left: 28%;
  }
}
.point-area-icon3-img {
  animation: point-area-icon3-y 5s ease-in-out infinite alternate;
}
@keyframes point-area-icon3-x {
  0% {
    transform: translateX(-4%);
  }
  100% {
    transform: translateX(6%);
  }
}
@keyframes point-area-icon3-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(1%);
  }
}
.point-area-icon4-wrap {
  animation: point-area-icon4-x 3s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 53%;
  left: 50%;
  right: 0;
  z-index: 1;
  width: min(80px, calc(80 * 100vw / 1960));
  height: auto;
}
@media screen and (max-width: 768px) {
  .point-area-icon4-wrap {
    width: calc(175 * 100vw / 750);
    top: 55%;
    left: 43%;
    width: 15%;
  }
}
.point-area-icon4-img {
  animation: point-area-icon4-y 5s ease-in-out infinite alternate;
}
@keyframes point-area-icon4-x {
  0% {
    transform: translateX(-4%);
  }
  100% {
    transform: translateX(6%);
  }
}
@keyframes point-area-icon4-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(1%);
  }
}
.point-area-icon5-wrap {
  animation: point-area-icon5-x 3s ease-in-out infinite alternate-reverse;
  position: absolute;
  top: 45%;
  left: 77%;
  right: 0;
  z-index: 1;
  width: min(320px, calc(320 * 100vw / 1960));
  height: auto;
}
@media screen and (max-width: 768px) {
  .point-area-icon5-wrap {
    width: calc(175 * 100vw / 750);
    top: 55%;
    left: 55%;
    width: 40%;
  }
}
.point-area-icon5-img {
  animation: point-area-icon5-y 6s ease-in-out infinite alternate;
}
@keyframes point-area-icon5-x {
  0% {
    transform: translateX(-4%);
  }
  100% {
    transform: translateX(2%);
  }
}
@keyframes point-area-icon5-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(4%);
  }
}
.point-card-1 {
  overflow: hidden;
  position: relative;
  margin: min(-40px, calc(-40 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960));
  z-index: 4;
}
@media screen and (max-width: 768px) {
  .point-card-1 {
    width: calc(710 * 100vw / 750);
    height: calc(847 * 100vw / 750);
    border-radius: calc(100 * 100vw / 750);
    margin: calc(-140 * 100vw / 750) auto calc(40 * 100vw / 750);
  }
}
.point-card-2 {
  overflow: hidden;
  position: relative;
  margin: min(64px, calc(64 * 100vw / 1960)) 0 min(64px, calc(64 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .point-card-2 {
    width: calc(730 * 100vw / 750);
    height: calc(831 * 100vw / 750);
    border-radius: calc(160 * 100vw / 750) 0 0 calc(160 * 100vw / 750);
    margin: calc(40 * 100vw / 750) 0 calc(40 * 100vw / 750) auto;
  }
}
.point-card-3 {
  overflow: hidden;
  position: relative;
  margin: min(64px, calc(64 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960)) 0 0;
}
@media screen and (max-width: 768px) {
  .point-card-3 {
    width: calc(730 * 100vw / 750);
    height: calc(856 * 100vw / 750);
    border-radius: 0 calc(160 * 100vw / 750) calc(160 * 100vw / 750) 0;
    margin: calc(40 * 100vw / 750) auto calc(40 * 100vw / 750) 0;
  }
}
.point-card-4 {
  overflow: hidden;
  position: relative;
  margin: min(64px, calc(64 * 100vw / 1960)) 0 min(64px, calc(64 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .point-card-4 {
    width: calc(730 * 100vw / 750);
    height: calc(1000 * 100vw / 750);
    border-radius: calc(160 * 100vw / 750) 0 0 calc(160 * 100vw / 750);
    margin: calc(40 * 100vw / 750) 0 calc(40 * 100vw / 750) auto;
  }
}
.point-card-5 {
  overflow: hidden;
  position: relative;
  margin: min(64px, calc(64 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960)) 0 0;
}
@media screen and (max-width: 768px) {
  .point-card-5 {
    width: calc(730 * 100vw / 750);
    height: calc(785 * 100vw / 750);
    border-radius: 0 calc(160 * 100vw / 750) calc(160 * 100vw / 750) 0;
    margin: calc(40 * 100vw / 750) auto calc(40 * 100vw / 750) 0;
  }
}
.point-card-6 {
  overflow: hidden;
  position: relative;
  margin: min(64px, calc(64 * 100vw / 1960)) 0 min(64px, calc(64 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .point-card-6 {
    width: calc(730 * 100vw / 750);
    height: calc(890 * 100vw / 750);
    border-radius: calc(160 * 100vw / 750) 0 0 calc(160 * 100vw / 750);
    margin: calc(40 * 100vw / 750) 0 calc(40 * 100vw / 750) auto;
  }
}
.point-card-content-1,
.point-card-content-2,
.point-card-content-3,
.point-card-content-4,
.point-card-content-5,
.point-card-content-6 {
  position: absolute;
  z-index: 1;
  color: #fff;
  padding: 0 4%;
  text-align: justify;
  font-size: min(28px, calc(28 * 100vw / 1960));
  line-height: 1.6;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .point-card-content-1,
  .point-card-content-2,
  .point-card-content-3,
  .point-card-content-4,
  .point-card-content-5,
  .point-card-content-6 {
    font-size: calc(28 * 100vw / 750);
  }
}
.point-card-content-1 {
  top: 43%;
  left: 43%;
  width: 52%;
}
@media screen and (max-width: 768px) {
  .point-card-content-1 {
    top: 43%;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
  }
}
.point-card-content-2 {
  top: 43%;
  left: 5%;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .point-card-content-2 {
    top: 46%;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
  }
}
.point-card-content-3 {
  top: 50%;
  left: 44.5%;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .point-card-content-3 {
    top: 48%;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
  }
}
.point-card-content-4 {
  top: 46%;
  left: 5%;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .point-card-content-4 {
    top: 50%;
    left: 4%;
    width: 92%;
  }
}
.point-card-content-5 {
  top: 47%;
  left: 44.5%;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .point-card-content-5 {
    top: 48%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
  }
}
.point-card-content-6 {
  top: 43%;
  left: 5%;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .point-card-content-6 {
    top: 48%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
  }
}
.point-card-content-1 p,
.point-card-content-2 p,
.point-card-content-3 p,
.point-card-content-4 p,
.point-card-content-5 p,
.point-card-content-6 p {
  margin-bottom: min(20px, calc(20 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .point-card-content-1 p,
  .point-card-content-2 p,
  .point-card-content-3 p,
  .point-card-content-4 p,
  .point-card-content-5 p,
  .point-card-content-6 p {
    margin-bottom: calc(20 * 100vw / 750);
  }
}
.point-card-content-1 p:last-child,
.point-card-content-2 p:last-child,
.point-card-content-3 p:last-child,
.point-card-content-4 p:last-child,
.point-card-content-5 p:last-child,
.point-card-content-6 p:last-child {
  margin-bottom: 0;
}
.point-card-content-1 span,
.point-card-content-2 span,
.point-card-content-3 span,
.point-card-content-4 span,
.point-card-content-5 span,
.point-card-content-6 span {
  color: #f8fc9f;
  font-weight: 500;
}
.point-card-2,
.point-card-3,
.point-card-4,
.point-card-5,
.point-card-6 {
  margin-bottom: min(64px, calc(64 * 100vw / 1960));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  perspective: 1000;
  -webkit-perspective: 1000;
  visibility: hidden;
}
@media screen and (max-width: 768px) {
  .points-area-content,
  .point-card-2,
  .point-card-3,
  .point-card-4,
  .point-card-5,
  .point-card-6 {
    margin-bottom: calc(40 * 100vw / 750);
  }
}
.point-card-2,
.point-card-3,
.point-card-4,
.point-card-5,
.point-card-6 {
  visibility: hidden;
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* 左からスライドインする要素の初期位置 */
.point-card-3,
.point-card-5 {
  transform: translate3d(-80px, 0, 0);
  -webkit-transform: translate3d(-80px, 0, 0);
}
@media screen and (max-width: 768px) {
  .point-card-3,
  .point-card-5 {
    transform: translate3d(calc(-80 * 100vw / 750), 0, 0);
    -webkit-transform: translate3d(calc(-80 * 100vw / 750), 0, 0);
  }
}
/* 右からスライドインする要素の初期位置 */
.point-card-2,
.point-card-4,
.point-card-6 {
  transform: translate3d(80px, 0, 0);
  -webkit-transform: translate3d(80px, 0, 0);
}
@media screen and (max-width: 768px) {
  .point-card-2,
  .point-card-4,
  .point-card-6 {
    transform: translate3d(calc(80 * 100vw / 750), 0, 0);
    -webkit-transform: translate3d(calc(80 * 100vw / 750), 0, 0);
  }
}
/* スライドイン後のスタイル */
.point-card-2.is-show,
.point-card-3.is-show,
.point-card-4.is-show,
.point-card-5.is-show,
.point-card-6.is-show {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* 右からのスライドイン */
.fade-in-right {
  visibility: visible;
  animation: slideInRight 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
/* 左からのスライドイン */
.fade-in-left {
  visibility: visible;
  animation: slideInLeft 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes slideInRight {
  0% {
    transform: translate3d(80px, 0, 0);
    -webkit-transform: translate3d(80px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  0% {
    transform: translate3d(-80px, 0, 0);
    -webkit-transform: translate3d(-80px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }
}
.ttl_points1-background {
  z-index: 2;
}
/* ▼ モバイルのポイント背景画像のヘアライン対策 */
.point-card-background {
  display: block; /* inline-imgの隙間防止 */
  width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0); /* 合成レイヤーを固定 */
  will-change: transform;
}

/* 念のためカード側も常にレイヤー化＆はみ出し抑止（2/4/6は右スライド組） */
.point-card-2,
.point-card-4,
.point-card-6 {
  overflow: hidden;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* モバイル時だけ、右端を1pxだけオーバースキャンして白スジを潰す */
@media (max-width: 768px) {
  .point-card-2 .point-card-background,
  .point-card-4 .point-card-background,
  .point-card-6 .point-card-background {
    width: calc(100% + 1px);
    margin-right: -1px; /* ビューポート右へ1px押し出し */
  }
}
/*-----------------------
料金エリア
------------------------*/
.price-area {
  margin: min(96px, calc(96 * 100vw / 1960)) 0 min(128px, calc(128 * 100vw / 1960)) 0;
}
@media screen and (max-width: 768px) {
  .price-area {
    margin: calc(60 * 100vw / 750) 0 calc(80 * 100vw / 750) 0;
  }
  .price-accordion-area {
    margin-left: calc(20 * 100vw / 750);
    margin-right: calc(20 * 100vw / 750);
  }
}
.price-content {
  background-color: #eef5f6;
  padding: min(64px, calc(64 * 100vw / 1960)) 0;
  margin: min(64px, calc(64 * 100vw / 1960)) 0 min(96px, calc(96 * 100vw / 1960));
  text-align: center;
  border-radius: min(20px, calc(20 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-content {
    padding: calc(40 * 100vw / 750) 0;
    margin: calc(40 * 100vw / 750) 0 calc(60 * 100vw / 750);
  }
}
.price-hikaku {
  overflow: hidden; /* スクロールコンテナの親要素に追加 */
  background-color: #eef5f6;
  border-radius: min(160px, calc(160 * 100vw / 1960));
  padding-bottom: min(96px, calc(96 * 100vw / 1960));
  margin-bottom: min(128px, calc(128 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-hikaku {
    margin-bottom: calc(20 * 100vw / 1960);
  }
}
.ttl-hikaku-background {
  border-radius: min(160px, calc(160 * 100vw / 1960));
  margin-bottom: min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .ttl-hikaku-background {
    margin-bottom: calc(20 * 100vw / 750);
  }
}
.price-scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding-bottom: min(32px, calc(32 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-scroll {
    padding: 0 calc(20 * 100vw / 750) calc(20 * 100vw / 750);
  }
}
.price-scroll picture {
  width: 80%;
  display: block;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .price-scroll picture {
    min-width: calc(1248 * 100vw / 750);
  }
}
.price-scroll img {
  width: 100%;
  height: auto;
}
.price-ttl-sub {
  background-color: #52bcb1;
  width: 94%;
  padding: min(12px, calc(12 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  text-align: center;
  border-radius: min(19px, calc(19 * 100vw / 1960));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
  margin-bottom: min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-ttl-sub {
    padding: calc(8 * 100vw / 750) calc(20 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
    margin-bottom: calc(40 * 100vw / 750);
  }
}
.price-ttl-sub h3 {
  color: #fff;
  font-size: min(41px, calc(41 * 100vw / 1960));
  font-weight: bold;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .price-ttl-sub h3 {
    font-size: calc(32 * 100vw / 750);
  }
}
.price-basic-ttl-sub {
  font-size: min(41px, calc(41 * 100vw / 1960));
  font-weight: bold;
  color: #52bcb1;
  margin: min(32px, calc(32 * 100vw / 1960)) 0 min(16px, calc(16 * 100vw / 1960)) 0;
}
@media screen and (max-width: 768px) {
  .price-basic-ttl-sub {
    font-size: calc(32 * 100vw / 750);
    margin: calc(20 * 100vw / 750) 0 calc(10 * 100vw / 750) 0;
  }
}
.price-basic-ttl-sub-text {
  font-size: min(25px, calc(25 * 100vw / 1960));
  color: #6b6b6b;
}
@media screen and (max-width: 768px) {
  .price-basic-ttl-sub-text {
    font-size: calc(20 * 100vw / 750);
  }
}
.price-basic-ttl-sub-zeikomi {
  font-size: min(25px, calc(25 * 100vw / 1960));
  text-align: right;
  width: 84%;
  color: #6b6b6b;
}
@media screen and (max-width: 768px) {
  .price-basic-ttl-sub-zeikomi {
    font-size: calc(20 * 100vw / 750);
    width: 96%;
  }
}
.price-basic-card {
  display: flex;
  margin: min(64px, calc(64 * 100vw / 1960)) auto;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .price-basic-card {
    margin: calc(40 * 100vw / 750) 0;
  }
}
.price-basic-list {
  display: flex;
  flex-direction: column;
  gap: min(16px, calc(16 * 100vw / 1960));
  color: #252525;
  font-size: min(28px, calc(28 * 100vw / 1960));
  font-weight: 600;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .price-basic-list {
    gap: calc(10 * 100vw / 750);
    font-size: calc(28 * 100vw / 750);
  }
}
.price-basic-list p {
  margin: 0;
  background-color: #fff;
  border-radius: min(19px, calc(19 * 100vw / 1960));
  line-height: 1.6;
  padding: min(32px, calc(32 * 100vw / 1960)) min(460px, calc(460 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960)) min(60px, calc(60 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-basic-list p {
    padding: calc(20 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
  }
}
.price-basic-free {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(48px, calc(48 * 100vw / 1960));
  font-weight: bold;
  color: #52bcb1;
  margin-left: min(32px, calc(32 * 100vw / 1960));
  background-color: #fff;
  border-radius: min(19px, calc(19 * 100vw / 1960));
  padding: 0 min(96px, calc(96 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-basic-free {
    font-size: calc(50 * 100vw / 750);
    margin-left: calc(20 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
    padding: 0 calc(10 * 100vw / 750);
  }
}
.price-basic-free .number {
  font-size: min(96px, calc(96 * 100vw / 1960));
  font-family: "Barlow", sans-serif;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .price-basic-free .number {
    font-size: calc(90 * 100vw / 750);
  }
}
.price-basic-free .unit {
  font-size: min(48px, calc(48 * 100vw / 1960));
  transform: translateY(min(16px, calc(16 * 100vw / 1960)));
}
@media screen and (max-width: 768px) {
  .price-basic-free .unit {
    font-size: calc(50 * 100vw / 750);
    transform: translateY(calc(12 * 100vw / 750));
  }
}
/*-------------------------------
料金プランオプションのアコーディオン関連
-------------------------------*/
.price-option-ttl {
  background-color: #52bcb1;
  padding: min(12px, calc(12 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  text-align: center;
  border-radius: min(19px, calc(19 * 100vw / 1960));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: min(32px, calc(32 * 100vw / 1960)) auto;
}
@media screen and (max-width: 768px) {
  .price-option-ttl {
    padding: calc(8 * 100vw / 750) calc(20 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
    margin: calc(20 * 100vw / 750) auto;
  }
}
.price-option-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em; /* タイトルとヒントの間隔 */
  position: relative;
  cursor: pointer;
}
.price-option-ttl-check {
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
}
.price-option-ttl:after {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: min(32px, calc(32 * 100vw / 1960));
  color: #fff;
  transition: all 0.3s ease-in;
  font-size: min(38px, calc(38 * 100vw / 1960));
  transform: rotate(0deg);
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .price-option-ttl:after {
    right: calc(20 * 100vw / 750);
    font-size: calc(24 * 100vw / 750);
  }
}
.accordion-check:checked + .price-option-ttl::after {
  transform: rotate(90deg);
}
.accordion-title {
  font-size: min(40px, calc(40 * 100vw / 1960));
  color: #fff;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .accordion-title {
    font-size: calc(36 * 100vw / 750);
  }
}
.accordion-content {
  overflow: hidden;
  transition: max-height 0.4s ease;
  position: relative;
}
/* 初期状態のグラデーション */
.accordion-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .accordion-content::after {
    height: 120px;
  }
}
.accordion-area.bg-white .accordion-content::after {
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.accordion-area.bg-blue .accordion-content::after {
  background: linear-gradient(to top, rgba(238, 245, 246, 1), rgba(238, 245, 246, 0));
}
/* 開いたとき：グラデーションを非表示 */
.accordion-content.open::after {
  opacity: 0;
}
.accordion-hint {
  font-size: min(24px, calc(24 * 100vw / 1960));
  color: rgba(255, 255, 255, 0.8);
  margin-top: min(12px, calc(12 * 100vw / 1960));
  margin-left: min(12px, calc(12 * 100vw / 1960));
  font-weight: normal;
  display: none;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .accordion-hint {
    font-size: calc(20 * 100vw / 750);
    margin-left: calc(12 * 100vw / 750);
  }
}
.accordion-check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* 未チェック時：「タップで開く」を表示 */
.accordion-check:not(:checked) + .price-option-ttl .hint-open {
  display: inline;
}
/* チェック時：「タップで閉じる」を表示 */
.accordion-check:checked + .price-option-ttl .hint-close {
  display: inline;
}
/* PC・スマホでテキスト切り替え */
.sp-text {
  display: none;
}
.pc-text {
  display: inline;
}
@media screen and (max-width: 768px) {
  .sp-text {
    display: inline;
  }
  .pc-text {
    display: none;
  }
}
.price-option-card {
  width: 70%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .price-option-card {
    width: 96%;
  }
}
.price-option-table {
  width: 100%;
  border-spacing: min(16px, calc(16 * 100vw / 1960)) min(16px, calc(16 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-option-table {
    border-spacing: calc(10 * 100vw / 750) calc(10 * 100vw / 750);
  }
}
.price-option-table td {
  background-color: #fff;
  padding: min(32px, calc(32 * 100vw / 1960));
  border-radius: min(19px, calc(19 * 100vw / 1960));
  line-height: 1.6;
  color: #252525;
  font-size: min(28px, calc(28 * 100vw / 1960));
  font-weight: 600;
  text-align: left;
  padding: min(24px, calc(24 * 100vw / 1960)) min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-option-table td {
    padding: calc(20 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
    font-size: calc(26 * 100vw / 750);
  }
}
.price-option-table td span {
  font-size: min(25px, calc(25 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-option-table td span {
    font-size: calc(16 * 100vw / 750);
  }
}
.price-option-table td:last-child {
  width: 30%;
  text-align: right;
  margin-left: min(32px, calc(32 * 100vw / 1960));
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .price-option-table td:last-child {
    margin-left: calc(20 * 100vw / 750);
  }
}
.price-option-table td .number {
  font-size: min(41px, calc(41 * 100vw / 1960));
  font-family: "Barlow", sans-serif;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .price-option-table td .number {
    font-size: calc(36 * 100vw / 750);
  }
}
.price-option-table td .unit {
  font-size: min(38px, calc(38 * 100vw / 1960));
  transform: translateY(min(19px, calc(19 * 100vw / 1960)));
}
@media screen and (max-width: 768px) {
  .price-option-table td .unit {
    font-size: calc(24 * 100vw / 750);
  }
}

.sumakaku-basic-ttl-sub-text {
  font-size: min(25px, calc(25 * 100vw / 1960));
  color: #6b6b6b;
  margin: 0 min(320px, calc(320 * 100vw / 1960));
  text-align: center;
}
@media screen and (max-width: 768px) {
  .sumakaku-basic-ttl-sub-text {
    font-size: calc(20 * 100vw / 750);
    /* margin: calc(40 * 100vw / 750) calc(40 * 100vw / 750) calc(20 * 100vw / 750); */
    margin: 0 calc(40 * 100vw / 750) calc(10 * 100vw / 750);
  }
}
.sumakaku-basic-ttl-sub-zeikomi {
  font-size: min(25px, calc(25 * 100vw / 1960));
  text-align: right;
  width: 89%;
  color: #6b6b6b;
}
@media screen and (max-width: 768px) {
  .sumakaku-basic-ttl-sub-zeikomi {
    font-size: calc(20 * 100vw / 750);
    margin: 0;
    width: 96%;
  }
}
.sumakaku-plan-card-zei {
  font-size: min(25px, calc(25 * 100vw / 1960));
  text-align: right;
  width: 98%;
  color: #6b6b6b;
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-card-zei {
    font-size: calc(20 * 100vw / 750);
    margin: 0;
    width: 96%;
  }
}
.sumakaku-ttl-sub {
  background-color: #52bcb1;
  padding: min(12px, calc(12 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  text-align: center;
  border-radius: min(19px, calc(19 * 100vw / 1960));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-ttl-sub {
    padding: calc(8 * 100vw / 750) calc(20 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
    margin-bottom: calc(40 * 100vw / 750);
  }
}
.sumakaku-ttl-sub h3 {
  color: #fff;
  font-size: min(41px, calc(41 * 100vw / 1960));
  font-weight: bold;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .sumakaku-ttl-sub h3 {
    font-size: calc(32 * 100vw / 750);
  }
}
.sumakaku-accordion-check {
  display: none;
}
.sumakaku-option-ttl {
  background-color: #52bcb1;
  padding: min(12px, calc(12 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  text-align: center;
  border-radius: min(19px, calc(19 * 100vw / 1960));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: min(64px, calc(64 * 100vw / 1960)) min(320px, calc(320 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-option-ttl {
    padding: calc(8 * 100vw / 750) calc(20 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
    margin: calc(40 * 100vw / 750) calc(40 * 100vw / 750) calc(20 * 100vw / 750);
  }
}
.sumakaku-option-ttl-check {
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
}
.sumakaku-option-ttl:after {
  content: "\f067";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: min(32px, calc(32 * 100vw / 1960));
  color: #fff;
  transition: all 0.3s ease-in;
  font-size: min(38px, calc(38 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-option-ttl:after {
    right: calc(20 * 100vw / 750);
    font-size: calc(24 * 100vw / 750);
  }
}
.sumakaku-accordion-check:checked ~ .sumakaku-option-ttl:after {
  content: "\f068";
}
.sumakaku-accordion-content {
  display: none;
  margin-top: min(64px, calc(64 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-accordion-content {
    margin-top: calc(40 * 100vw / 750);
  }
}
.sumakaku-accordion-check:checked ~ .sumakaku-accordion-content {
  display: block;
}

/*-------------------------------
スマカクの料金プラン
-------------------------------*/
.sumakaku-plan-card {
  margin: clamp(-380px, -18.37vw, -180px) auto 0;
  padding: 0 min(40px, calc(40 * 100vw / 1960));
  z-index: 100;
  position: relative;
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-card {
    margin: calc(20 * 100vw / 750) auto 0;
    padding: 0;
  }
}
.sumakaku-plan-table {
  table-layout: fixed;
  border-spacing: min(16px, calc(16 * 100vw / 1960)) min(16px, calc(16 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table {
    border-spacing: calc(10 * 100vw / 750) calc(10 * 100vw / 750);
  }
}
.sumakaku-plan-table th {
  background-color: transparent;
  text-align: center;
  font-weight: normal;
  padding: min(16px, calc(20 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  font-size: min(28px, calc(28 * 100vw / 1960));
  line-height: 1.4;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table th {
    padding: min(16px, calc(20 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
    font-size: calc(24 * 100vw / 750);
  }
}
.sumakaku-plan-table .plan-header {
  border-radius: min(12px, calc(12 * 100vw / 1960));
  color: #fff;
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table .plan-header {
    border-radius: calc(10 * 100vw / 750);
  }
}
.plan-header.mini {
  background-color: #52bcb1;
}
.plan-header.standard {
  background-color: #4989c1;
}
.plan-header.premium {
  background-color: #dd706b;
}
.sumakaku-plan-table .plan-price.mini {
  background-color: #cbebe8;
  color: #252525;
  border-radius: min(12px, calc(12 * 100vw / 1960));
}
.sumakaku-plan-table .plan-price.standard {
  background-color: #d1e2ef;
  color: #252525;
  border-radius: min(12px, calc(12 * 100vw / 1960));
}
.sumakaku-plan-table .plan-price.premium {
  background-color: #f5deda;
  color: #252525;
  border-radius: min(12px, calc(12 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table .plan-price.mini,
  .sumakaku-plan-table .plan-price.standard,
  .sumakaku-plan-table .plan-price.premium {
    border-radius: calc(10 * 100vw / 750);
  }
}
.sumakaku-plan-table .plan-price {
  font-weight: bold;
  font-size: min(32px, calc(32 * 100vw / 1960));
  line-height: 1.5;
}
.sumakaku-plan-table .plan-price .number {
  font-family: "Barlow", sans-serif;
  font-size: min(48px, calc(48 * 100vw / 1960));
  padding: 0 4px;
}
.sumakaku-plan-table .plan-price .unit {
  display: block;
  font-size: min(16px, calc(22 * 100vw / 1960));
  margin-top: 4px;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table .plan-price {
    font-size: calc(22 * 100vw / 750);
  }
  .sumakaku-plan-table .plan-price .number {
    font-size: calc(30 * 100vw / 750);
  }
  .sumakaku-plan-table .plan-price .unit {
    font-size: calc(18 * 100vw / 750);
  }
}
.sumakaku-plan-table td:nth-child(1) {
  width: 16%;
}
.sumakaku-plan-table td:nth-child(2),
.sumakaku-plan-table td:nth-child(3),
.sumakaku-plan-table td:nth-child(4) {
  width: 28%;
}
.sumakaku-plan-table td {
  background-color: #eef5f6;
  border-radius: min(20px, calc(20 * 100vw / 1960));
  line-height: 1.6;
  font-size: min(24px, calc(24 * 100vw / 1960));
  font-weight: bold;
  text-align: center;
  padding: min(20px, calc(20 * 100vw / 1960)) 0;
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table td {
    padding: calc(6 * 100vw / 750) calc(10 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
    font-size: calc(22 * 100vw / 750);
  }
}
.sumakaku-plan-table td span {
  font-size: min(20px, calc(20 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table td span {
    font-size: calc(22 * 100vw / 750);
  }
}
.sumakaku-plan-table td .header {
  font-size: min(24px, calc(24 * 100vw / 1960));
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table td .header {
    font-size: calc(22 * 100vw / 750);
    font-weight: 600;
  }
}
.sumakaku-plan-table td .number {
  font-size: min(41px, calc(41 * 100vw / 1960));
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  padding: 0 4px;
  transform: translateY(min(32px, calc(32 * 100vw / 1960)));
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table td .number {
    font-size: calc(36 * 100vw / 750);
  }
}
.sumakaku-plan-table td .unit {
  font-size: min(25px, calc(25 * 100vw / 1960));
  /* transform: translateY(12px); */
}
@media screen and (max-width: 768px) {
  .sumakaku-plan-table td .unit {
    font-size: calc(24 * 100vw / 750);
  }
}
/*-------------------------------
スマカクの料金グラフ
-------------------------------*/
.price-graph {
  margin: min(60px, calc(60 * 100vw / 1960)) min(120px, calc(120 * 100vw / 1960)) min(80px, calc(80 * 100vw / 1960));
  padding: min(60px, calc(60 * 100vw / 1960));
  border: 1px solid #6b6b6b;
  border-radius: min(20px, calc(20 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-graph {
    margin: calc(40 * 100vw / 750);
    overflow: hidden; /* スクロールコンテナの親要素に追加 */
    padding: calc(20 * 100vw / 750);
  }
}
.ttl-price-graph {
  width: 55%;
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .ttl-price-graph {
    width: 80%;
    margin-top: calc(20 * 100vw / 750);
  }
}
.price-graph-text {
  font-size: min(22px, calc(22 * 100vw / 1960));
  color: #6b6b6b;
  text-align: center;
  margin-bottom: min(20px, calc(20 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .price-graph-text {
    font-size: calc(18 * 100vw / 750);
    margin-bottom: calc(20 * 100vw / 750);
  }
}
@media screen and (max-width: 768px) {
  .price-graph-img {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .price-graph-img img {
    width: calc(1000 * 100vw / 750);
  }
}
/*-------------------------------
料金プランのオプションに関するアコーディオン内のテーブル関連
-------------------------------*/
.sumakaku-option-card {
  margin: 0 auto;
  padding: 0 min(40px, calc(40 * 100vw / 1960));
  width: 85%;
}
@media screen and (max-width: 768px) {
  .sumakaku-option-card {
    width: 98%;
  }
}
.sumakaku-option-table {
  width: 100%;
  border-spacing: min(16px, calc(16 * 100vw / 1960)) min(16px, calc(16 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table {
    border-spacing: calc(10 * 100vw / 750) calc(10 * 100vw / 750);
  }
}
.sumakaku-option-table td {
  background-color: #eef5f6;
  border-radius: min(19px, calc(19 * 100vw / 1960));
  line-height: 1.6;
  color: #252525;
  font-size: min(28px, calc(28 * 100vw / 1960));
  font-weight: bold;
  text-align: left;
  padding: min(10px, calc(10 * 100vw / 1960)) min(40px, calc(40 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td {
    padding: calc(6 * 100vw / 750) calc(20 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
    font-size: calc(24 * 100vw / 750);
  }
}
.sumakaku-option-table td:nth-child(1) {
  width: 30%;
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td:nth-child(1) {
    width: 25%;
  }
}
.sumakaku-option-table td:nth-child(2) {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td:nth-child(2) {
    width: 40%;
  }
}
.sumakaku-option-table td:nth-child(3) {
  width: 20%;
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td:nth-child(3) {
    width: 35%;
  }
}
.sumakaku-option-table td span {
  font-size: min(24px, calc(24 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td span {
    font-size: calc(16 * 100vw / 750);
  }
}
.prsumakakuice-option-table td span {
  font-size: min(28px, calc(28 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td span {
    font-size: calc(22 * 100vw / 750);
  }
}
.sumakaku-option-table td:last-child {
  text-align: right;
  margin-left: min(32px, calc(32 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td:last-child {
    margin-left: calc(20 * 100vw / 750);
  }
}
.sumakaku-option-table td .number {
  font-size: min(34px, calc(34 * 100vw / 1960));
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  padding: 0 4px;
  transform: translateY(min(32px, calc(32 * 100vw / 1960)));
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td .number {
    font-size: calc(36 * 100vw / 750);
  }
}
.sumakaku-option-table td .unit {
  font-size: min(25px, calc(25 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td .unit {
    font-size: calc(24 * 100vw / 750);
  }
}
.sumakaku-option-table td .note {
  font-size: min(25px, calc(25 * 100vw / 1960));
  color: #6b6b6b;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .sumakaku-option-table td unit {
    font-size: calc(24 * 100vw / 750);
  }
}
/*-----------------------
フローエリア(PC)
------------------------*/
.flow-area {
  width: 100%;
  margin-bottom: min(128px, calc(128 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .flow-area {
    padding: 0;
    margin: calc(40 * 100vw / 750) 0 calc(20 * 100vw / 750) 0;
  }
}
.flow-area-title {
  margin-bottom: min(48px, calc(48 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .flow-area-title {
    margin-bottom: calc(30 * 100vw / 750);
  }
}
.flow-content {
  background-color: #eef5f6;
  padding: min(64px, calc(64 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  margin: min(64px, calc(64 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960)) min(96px, calc(96 * 100vw / 1960));
  text-align: center;
  border-radius: min(25px, calc(25 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .flow-content {
    background-color: #eef5f6;
    margin: 0px calc(10 * 100vw / 750) calc(40 * 100vw / 750);
    padding: calc(40 * 100vw / 750) calc(10 * 100vw / 750);
  }
}
.flow-section {
  margin: min(32px, calc(32 * 100vw / 1960)) auto;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  gap: min(3px, calc(3 * 100vw / 1960));
  justify-content: center;
}
.flow-item {
  position: relative;
  width: min(320px, calc(320 * 100vw / 1960));
}
.flow-title {
  position: absolute;
  top: 30%;
  left: 46%;
  transform: translateX(-50%);
  width: 100%;
  font-size: min(35px, calc(35 * 100vw / 1960));
  font-weight: bold;
  color: #52bcb1;
  margin-bottom: min(16px, calc(16 * 100vw / 1960));
}
.flow-desc {
  position: absolute;
  top: 45%;
  left: 47%;
  transform: translateX(-50%);
  width: 78%;
  font-size: min(28px, calc(28 * 100vw / 1960));
  text-align: justify;
  align-items: top;
}
.flow-desc-notes {
  position: absolute;
  top: 75%;
  left: 47%;
  transform: translateX(-50%);
  width: 78%;
  font-size: min(20px, calc(20 * 100vw / 1960));
  color: #6b6b6b;
  line-height: 120%;
  text-align: justify;
}
.flow-arrow {
  width: 20px;
  height: 20px;
  align-self: center;
}

@media screen and (max-width: 768px) {
  .flow-list {
    flex-direction: column;
    align-items: center;
    gap: calc(60 * 100vw / 750);
  }
  .flow-arrow img {
    transform: rotate(90deg);
  }
  .flow-item {
    width: 80%;
  }
}
.flow-content2 {
  position: relative;
  padding: min(32px, calc(32 * 100vw / 1960)) 0px;
  margin: 0 0 min(96px, calc(96 * 100vw / 1960));
  text-align: center;
  border-radius: min(32px, calc(32 * 100vw / 1960));
}
.flow-content2-text {
  position: absolute;
  width: 50%;
  left: 0%;
  padding-left: min(70px, calc(70 * 100vw / 1960));
  font-size: min(30px, calc(30 * 100vw / 1960));
  text-align: justify;
  color: #fff;
  line-height: 160%;
  top: 42%;
}
.flow-content2-text p {
  margin-bottom: calc(20 * 100vw / 1960);
}
.flow-content2-text p span {
  color: #f8fc9f;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .flow-content2-text {
    width: 90%;
    left: 5%;
    font-size: calc(32 * 100vw / 750);
    text-align: justify;
    color: #fff;
    line-height: 160%;
    padding-left: 0;
    top: 36%;
  }
  .flow-content2-text p {
    margin-bottom: calc(20 * 100vw / 750);
  }
}
.flow-ttl-sub {
  background-color: #52bcb1;
  padding: min(12px, calc(12 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  margin-bottom: min(64px, calc(64 * 100vw / 1960));
  text-align: center;
  border-radius: min(20px, calc(20 * 100vw / 1960));
  align-items: center;
  justify-content: center;
}
.flow-ttl-sub h3 {
  color: #fff;
  font-size: min(41px, calc(41 * 100vw / 1960));
  font-weight: bold;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .flow-ttl-sub {
    padding: calc(8 * 100vw / 750) calc(20 * 100vw / 750);
    border-radius: calc(12 * 100vw / 750);
    margin-bottom: calc(40 * 100vw / 750);
  }
  .flow-ttl-sub h3 {
    font-size: calc(32 * 100vw / 750);
  }
}
@media screen and (max-width: 768px) {
  .flow-content2 {
    margin: 0px 0 calc(40 * 100vw / 750) 0;
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .flow-img-wrap {
    overflow: hidden;
    width: 100%;
  }
  .flow-scroll {
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(20 * 100vw / 750);
  }
  .flow-scroll picture {
    width: 80%;
    display: block;
    margin: 0 auto;
    min-width: calc(1600 * 100vw / 750);
  }
  .flow-scroll img {
    width: 100%;
    height: auto;
  }
}
/*----------------------
よくある質問エリア(PC)
------------------------*/
.faq-area {
  width: 100%;
  padding: 0;
}
.faq-area-title {
  margin-bottom: min(30px, calc(30 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .faq-area-title {
    margin-bottom: calc(30 * 100vw / 750);
  }
}
.faq-content {
  background-color: #eef5f6;
  padding: min(64px, calc(64 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  margin: min(64px, calc(64 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960)) min(40px, calc(40 * 100vw / 1960));
  text-align: center;
  border-radius: min(20px, calc(20 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .faq-content {
    padding: calc(40 * 100vw / 750) calc(10 * 100vw / 750);
    margin: calc(40 * 100vw / 750) calc(10 * 100vw / 750) calc(20 * 100vw / 750);
    border-radius: calc(20 * 100vw / 750);
  }
}
.faq-ttl-sub {
  background-color: #52bcb1;
  padding: min(12px, calc(12 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  margin-bottom: min(64px, calc(64 * 100vw / 1960));
  text-align: center;
  border-radius: min(19px, calc(19 * 100vw / 1960));
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .faq-ttl-sub {
    padding: calc(10 * 100vw / 750);
    margin-bottom: calc(20 * 100vw / 750);
  }
}
.faq-ttl-sub h3 {
  color: #fff;
  font-size: min(41px, calc(41 * 100vw / 1960));
  font-weight: bold;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .faq-ttl-sub h3 {
    font-size: calc(32 * 100vw / 750);
  }
}
.faq-items {
  padding: 0px min(32px, calc(32 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .faq-items {
    padding: 0px calc(5 * 100vw / 750) calc(20 * 100vw / 750);
  }
}
/* FAQアコーディオン */
.faq-box {
  border-bottom: 1px solid #ddd;
  padding: min(32px, calc(32 * 100vw / 1960)) 0;
}
@media screen and (max-width: 768px) {
  .faq-box {
    padding: calc(30 * 100vw / 750) 0;
  }
}
.faq-box:first-of-type {
  border-top: 1px solid #ddd;
}
.faq-box input[type="checkbox"] {
  display: none;
}
.faq-box .faq-accordion-label {
  display: flex;
  align-items: flex-start;
  padding: min(16px, calc(16 * 100vw / 1960)) min(96px, calc(96 * 100vw / 1960)) min(16px, calc(16 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  font-size: min(32px, calc(32 * 100vw / 1960));
  position: relative;
  text-align: justify;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .faq-box .faq-accordion-label {
    font-size: calc(30 * 100vw / 750);
    padding: 0px calc(60 * 100vw / 750) 0 calc(10 * 100vw / 750);
  }
}
.faq-box .faq-accordion-label:before {
  content: "Q";
  color: #52bcb1;
  font-weight: bold;
  display: inline-block;
  width: 2em;
  flex-shrink: 0;
}
.faq-box .faq-accordion-label:after {
  content: "\f067";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: min(32px, calc(32 * 100vw / 1960));
  top: min(16px, calc(16 * 100vw / 1960));
  transform: none;
  height: auto;
  display: block;
  box-sizing: border-box;
  transition: all 0.5s ease-out;
}
@media screen and (max-width: 768px) {
  .faq-box .faq-accordion-label:after {
    right: calc(10 * 100vw / 750);
  }
}
.faq-box .faq-accordion-content {
  display: flex;
  align-items: flex-start;
  height: 0;
  opacity: 0;
  transition: all 0.5s ease-out;
  visibility: hidden;
  font-size: min(32px, calc(32 * 100vw / 1960));
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 min(96px, calc(96 * 100vw / 1960)) 0 min(32px, calc(32 * 100vw / 1960));
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .faq-box .faq-accordion-content {
    padding: 0 calc(40 * 100vw / 750);
    font-size: calc(30 * 100vw / 750);
  }
}
.faq-box .faq-accordion-content:before {
  content: "A";
  color: #ffa303;
  font-weight: bold;
  display: inline-block;
  width: 2em;
  flex-shrink: 0;
}
.faq-box input[type="checkbox"]:checked + .faq-accordion-label:after {
  content: "\f068";
  transition: all 0.3s ease-in;
}
.faq-box input[type="checkbox"]:checked ~ .faq-accordion-content {
  height: auto;
  opacity: 1;
  visibility: visible;
  padding: min(16px, calc(16 * 100vw / 1960)) min(96px, calc(96 * 100vw / 1960)) min(16px, calc(16 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  transition: all 0.3s ease-in;
}
@media screen and (max-width: 768px) {
  .faq-box input[type="checkbox"]:checked ~ .faq-accordion-content {
    padding: calc(10 * 100vw / 750) calc(10 * 100vw / 750) 0 calc(10 * 100vw / 750);
  }
}
/*-----------------------
ラインナップエリア
------------------------*/
.lineup-area {
  background-color: #52bcb1;
  padding: min(64px, calc(64 * 100vw / 1960)) 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .lineup-area {
    padding: calc(40 * 100vw / 750) calc(20 * 100vw / 750);
  }
}
.lineup-content-wrap {
  display: flex;
  flex-direction: row;
  gap: min(64px, calc(64 * 100vw / 1960));
  align-items: stretch;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .lineup-content-wrap {
    gap: calc(20 * 100vw / 750);
  }
}
.lineup-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(552px, calc(552 * 100vw / 1960));
  border-radius: min(25px, calc(25 * 100vw / 1960));
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .lineup-content {
    width: calc(552 * 100vw / 750);
    border-radius: calc(25 * 100vw / 750);
  }
}
.lineup-content-ec,
.lineup-content-solo,
.lineup-content-freelance {
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: min(25px, calc(25 * 100vw / 1960)) min(25px, calc(25 * 100vw / 1960)) 0 0;
  width: min(552px, calc(552 * 100vw / 1960));
  aspect-ratio: 1280 / 900; /* 比率だけを指定 */
}
@media screen and (max-width: 768px) {
  .lineup-content-ec,
  .lineup-content-solo,
  .lineup-content-freelance {
    border-radius: calc(25 * 100vw / 750) calc(25 * 100vw / 750) 0 0;
    width: calc(345 * 100vw / 750);
  }
}
.lineup-content-ec {
  background-image: url(../images/img_for_ec.jpg);
}
.lineup-content-solo {
  background-image: url(../images/img_for_solo.jpg);
}
.lineup-content-freelance {
  background-image: url(../images/img_for_freelance.jpg);
}
.lineup-content-text {
  flex: 1;
  padding: min(32px, calc(32 * 100vw / 1960));
  background-color: #fff;
  border-radius: 0 0 min(32px, calc(32 * 100vw / 1960)) min(32px, calc(32 * 100vw / 1960));
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .lineup-content-text {
    padding: calc(20 * 100vw / 750);
    border-radius: 0 0 calc(20 * 100vw / 750) calc(20 * 100vw / 750);
  }
}
.lineup-content-text p {
  font-size: min(28px, calc(28 * 100vw / 1960));
  line-height: 1.6;
  margin-bottom: min(12px, calc(12 * 100vw / 1960));
  text-align: justify;
}
@media screen and (max-width: 768px) {
  .lineup-content-text p {
    font-size: calc(24 * 100vw / 750);
    margin-bottom: calc(15 * 100vw / 750);
  }
}
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #52bcb1;
  color: #fff;
  font-size: min(40px, calc(40 * 100vw / 1960));
  font-weight: 600;
  padding: min(20px, calc(20 * 100vw / 1960)) min(30px, calc(30 * 100vw / 1960)) min(20px, calc(20 * 100vw / 1960)) min(60px, calc(60 * 100vw / 1960));
  border-radius: 9999px;
  text-decoration: none;
  margin: 0 auto;
  text-align: center;
}
.btn-link .arrow {
  margin-left: min(40px, calc(40 * 100vw / 1960));
  font-size: min(16px, calc(16 * 100vw / 1960));
}
@media screen and (max-width: 768px) {
  .lineup-model-img {
    position: absolute;
    top: 5%;
    left: 78%;
    width: 38%;
  }
}
@media screen and (max-width: 768px) {
  .lineup-ttl-img {
    width: 97%;
  }
}
.lineup-btn-hp {
  width: 35%;
  height: auto;
  margin: min(64px, calc(64 * 100vw / 1960)) auto 0;
}
@media screen and (max-width: 768px) {
  .lineup-btn-hp {
    width: 50%;
    margin: calc(40 * 100vw / 750) auto 0;
  }
}
/*-----------------------
フッター部分
------------------------*/
.footer-area {
  margin: min(32px, calc(32 * 100vw / 1960)) auto 0;
  text-align: center;
  padding: min(48px, calc(48 * 100vw / 1960)) 0 0 0;
  font-size: min(25px, calc(25 * 100vw / 1960));
}
.footer-area a {
  color: #1f1f1f;
  text-decoration: underline;
}
.footer-area .menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-area .menu li {
  margin: 0 0 min(16px, calc(16 * 100vw / 1960));
  padding: 0;
}
.footer-area .menu li.company {
  font-size: min(25px, calc(25 * 100vw / 1960));
}
.footer-area .menu li.address {
  font-size: min(22px, calc(22 * 100vw / 1960));
}
.footer-area .menu li.privacy {
  font-size: min(22px, calc(22 * 100vw / 1960));
}
.footer-area .copyright {
  font-size: min(22px, calc(22 * 100vw / 1960));
  margin-top: min(64px, calc(64 * 100vw / 1960));
  padding: min(32px, calc(32 * 100vw / 1960)) 0;
  background-color: #eef5f6;
}
.footer-logo {
  margin: min(64px, calc(64 * 100vw / 1960)) auto;
}
.footer-logo img {
  width: 40%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .footer-area .menu li.company {
    font-size: calc(18 * 100vw / 750);
  }
  .footer-area .menu li.address {
    font-size: calc(12 * 100vw / 750);
  }
  .footer-area .menu li.privacy {
    font-size: calc(12 * 100vw / 750);
  }
  .footer-area .copyright {
    font-size: calc(12 * 100vw / 750);
  }
  .footer-logo {
    margin: 0px auto calc(20 * 100vw / 750);
  }
  .footer-logo img {
    width: 70%;
    height: auto;
  }
}
/*-----------------------
スマホ用
------------------------*/
@media screen and (max-width: 768px) {
  body {
    min-width: inherit;
    height: 100%;
  }
  body .sp-item {
    display: block !important;
  }
  body .pc-item {
    display: none !important;
  }
  section {
    scroll-margin-top: 80px;
  }
  .container {
    width: 100%;
  }
  /*-----------------------
  ポイントエリア(SP)
  ------------------------*/
  .point-card {
    width: 90%;
    height: calc(400 * 100vw / 750);
    margin: calc(20 * 100vw / 750) auto;
  }

  .point-card-content {
    bottom: 5%;
    padding: 4%;
    font-size: calc(14 * 100vw / 750);
  }
  /* スマートフォン用のアニメーション */
  .fade-in-right {
    animation: slideInRightSP 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }
  .fade-in-left {
    animation: slideInLeftSP 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }
  @keyframes slideInRightSP {
    0% {
      transform: translate3d(50px, 0, 0);
      -webkit-transform: translate3d(50px, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
    }
  }
  @keyframes slideInLeftSP {
    0% {
      transform: translate3d(-50px, 0, 0);
      -webkit-transform: translate3d(-50px, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
    }
  }
}