body {
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width:100%;
  max-width:750px;
  margin:0 auto;
}

img,
video,
svg {
  width:100%;
  height: auto;
  vertical-align: bottom;
}

input, button, textarea, select {
  -webkit-appearance: none;
  appearance: none;
}

.fv{
  position: relative;
}

/* 円のデザイン */
.circle {
  width: min(40vw, 50vh);
  height: min(40vw, 50vh);
  border: 1.4vw solid #fff; /* 枠線を調整 */
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 37.5%;
  left: 57%;
}

/* 上部テキスト */
.top-text {
  font-size: min(4.8vw, 20px);

  font-weight: bold;
  /* margin: 2px 0; */
  color: #ffffff;
}

/* 点線を含むグループ */
.text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 点線 */
.dotted-line {
  width: 100%; /* 相対幅 */
  height: 0; /* 高さは不要 */
  border-top: 0.2vw dotted #ffffff; /* 点線を作成 */
  margin: min(1vw, 6px) 0; /* 点線周囲の余白を減らす */
}

/* 数字（メインの大きなテキスト） */
.large-text {
  margin: 4px 0; /* 数字周囲の余白を減らす */
  font-size: min(7vw, 35px); /* 数字のサイズ */
  font-weight: bold;
  color: #ffffff;
}

/* 下部テキスト */
.bottom-text {
  font-size: min(8vw, 26px);
  font-weight: bold;
  color: #ffffff;
}


.text {
  font-size: min(5vw, 2rem); /* 画面幅に応じて動的に文字サイズを調整 */
  font-weight: bold;
  color: #FFEB3B; /* 黄色の文字色 */
  background-color: #03A9F4; /* 水色の背景色 */
  padding: min(2vw, 1rem) min(4vw, 2rem); /* 余白も画面幅に応じて調整 */
  border-radius: min(3vw, 1.5rem); /* 角丸のサイズを調整 */
  text-shadow: 0.2rem 0.2rem 0 #FFFFFF, -0.2rem -0.2rem 0 #FFFFFF; /* 白い縁取り */
  display: inline-block;
}




.fv_text{
  background: repeating-linear-gradient(45deg, #ff478b, #ff478b 5px, #ff709c 5px, #ff709c 10px);
  position: relative;
  padding-bottom: 4%;
}

.text1{
  position: absolute;
  top: -14%;
}

.text2{
  padding-top: 6%;

}

.dot{
  text-align: center;
  font-size: min(9vw, 36px);
  color: #fff;
}

.logo{
  width: 60%;
  margin: 0 auto;
}

.button-container {
  display: flex; /* ボタンを横並びに配置 */
  gap: 8px; /* ボタン同士の間隔 */
  justify-content: center; /* 中央揃え */
  padding: 2%;
  margin: 2.5% auto;
}

.btn {
  display: flex;
  flex-direction: column; /* 縦方向に配置 */
  align-items: center; /* 中央揃え */
  font-size: min(5vw, 24px); /* レスポンシブ対応のフォントサイズ */
  font-weight: bold;
  border-radius: 15px; /* ボタンの角を丸くする */
  padding: 15px 30px; /* ボタン内の余白 */
  border: none;
  cursor: pointer;
  text-decoration: none; /* リンクの下線を消す */
  width: fit-content; /* コンテンツに合わせた幅 */
  color: white; /* テキストの色 */
}

/* Hover Animation */
.btn_male a:hover img, .btn_female a:hover img {
  transform: scale(1.2) rotate(8deg);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Click Animation */
.btn_male a:active img, .btn_female a:active img {
  transform: scale(0.9) rotate(-5deg);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6);
}

/* Heartbeat Animation */
.btn_male a img, .btn_female a img {
  animation: heartbeat 1.2s infinite ease-in-out;
}

@keyframes heartbeat {
  0% { transform: scale(0.9); }
  25% { transform: scale(1); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1); }
  100% { transform: scale(0.9); }
}

.content {
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
  gap: 2px; /* 「こちら」とアイコンの間に余白 */
}

.label {
  flex-shrink: 0; /* フレックスによる縮小を防ぐ */
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* 円の幅をレスポンシブ対応 */
  height: 100%; /* 円の高さをレスポンシブ対応 */
  border: 2px solid white; /* 白い輪郭線 */
  border-radius: 50%; /* 円形 */
}

.triangle {
  width: 0;
  height: 0;
  border-left: min(3vw, 8px) solid transparent; /* 左側透明部分 */
  border-right: min(3vw, 8px) solid transparent; /* 右側透明部分 */
  border-top: min(3vw, 12px) solid white; /* 上側の三角形部分 */
}

.note {
  font-size: min(2.2vw, 16px); /* 小さい文字をレスポンシブ対応 */
  margin-top: 10px; /* 上の内容との間に余白 */
  text-align: center; /* 中央揃え */
}


.feature2{
  background: repeating-linear-gradient(45deg, #ff478b, #ff478b 5px, #ff709c 5px, #ff709c 10px);
  position: relative;
  padding-bottom: 2%;
  line-height: 66px; /* 行の高さを親要素の高さに合わせる */
  margin-bottom: 12%;
}

.photo-section {
  display: flex; /* 子要素をフレックスボックスで配置 */
  flex-wrap: wrap; /* 子要素が折り返されるように設定 */
  gap: min(2vw, 10px); /* 各写真間の余白をレスポンシブ対応 */
  justify-content: center; /* 横方向で中央揃え */
  padding: min(2vw, 20px); /* セクション全体の余白をレスポンシブ対応 */
}

.photo-item {
  flex: 0 0 calc(33.333% - min(2vw, 10px)); /* 3列分の幅をレスポンシブ対応で計算 */
  box-sizing: border-box; /* パディングやボーダーを幅に含める */
}

.photo-item img {
  width: 100%; /* 親要素の幅にフィットさせる */
  height: auto; /* アスペクト比を維持 */
  border-radius: min(1vw, 8px); /* 角をレスポンシブ対応で丸くする */
  object-fit: cover; /* 画像が親要素に収まるように設定 */
}

.feature2_text{
  text-align: center;
  padding: 8% 4%;
  line-height: 1.5;
  color: #03A9F4;
  font-weight: bold;
}


/* スライダーセクション全体 */
.slider-section {
  position: relative;
  max-width: 90%;
  margin: 0 auto;
  overflow: hidden;
  border: 0.2rem solid #e0e0e0;
  border-radius: 1rem;
  background-color: #f8f9fa;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  margin-bottom: 12%;
}

/* セクションタイトルのスタイル */
/* セクションタイトルのスタイル */
.slider-title {
  font-size: 2rem;
  color: #e91e63;
  text-align: center;
  margin: 8%;
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(233, 30, 99, 0.3);
  letter-spacing: 2px;
  background: linear-gradient(90deg, #ff8a80, #ff80ab);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.slider-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 80%;
  height: 4px;
  background: linear-gradient(90deg, #ff8a80, #ff80ab);
  border-radius: 2px;
}


/* スライダーのコンテナ */
.slider-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* 各カード */
.slider-card {
  min-width: 100%;
  text-align: center;
  padding: 2rem;
  padding-bottom: 0%;
}

/* カード内の画像 */
.slider-card img {
  width: min(50vw, 200px);
  height: min(50vw, 200px);
  border-radius: 50%;
  margin-bottom: 1rem;
  object-fit: cover;
}

/* カード内の情報 */
.slider-info {
  margin-top: 1rem;
}

.slider-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.slider-comment {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1rem;
}

.slider-contact {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.slider-contact:hover {
  background-color: #218838;
}


/* インジケータセクション */
.slider-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-bottom: 4%;
}


/* インジケータ */
.indicator {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

/* 表示中のインジケータ */
.indicator.active {
  background-color: #f17a95;
  transform: scale(1.2); /* 少し大きくして目立たせる */
}

/* スライダー内のコメントをセクシーな吹き出し風に */
.slider-comment {
  background: #fff;
  color: #333;
  font-size: 1rem;
  padding: 10px 15px;
  border-radius: 15px;
  line-height: 1.5;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  margin: 10px 0;
  position: relative;
}

/* 吹き出しの尻尾 */
.slider-comment::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 15px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0;
  border-color: #fff transparent transparent transparent;
}

/* 名前のスタイル */
.slider-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #f17a95;
  margin-bottom: 5px;
}

/* 全体調整 */
.slider-card {
  padding: 20px;
}

/* CTAボタン (aタグ対応) */
.slider-cta {
  display: block;
  background-color: #fc5cb8;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 10px 15px;
  border-radius: 25px;
  margin: 15px auto 0;
  text-decoration: none;
  max-width: 200px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

/* ホバー時の効果 */
.slider-cta:hover {
  background-color: #d65b7b;
  transform: scale(1.05);
}

/* アクティブ時の効果 */
.slider-cta:active {
  background-color: #bf4766;
  transform: scale(0.98);
}

.how_to{
  position: relative;
}

.how_to_video{
  position: absolute;
  top: 77%;
  left: 0%;
  margin: 0 auto;
  padding: 3%;
}

.how_to_video video{

  border: 4px solid #FFF;
}

.footer{
  position: relative;
}

.footer .button-container{
  position: absolute;
  top: 58%;
}

.small{
    font-size: min(10px, 1.8vw);
}
/*スライダー*/
.swiper-pagination{
		position: relative !important;
	}
.swiper-pagination-bullet{
	width: 10px !important;
    height: 10px !important;
    background-color: #ccc !important;
    border-radius: 50% !important;
    transition: background-color 0.3s ease !important;
	opacity: 1 !important;
}
.swiper-pagination-bullet-active{
	background-color: #f17a95 !important;
    transform: scale(1.2) !important;
}
/*追加*/
.feature2_img {
    padding: 3% 0 0;
}