body {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #7d5b59;
  background-color: #ffe1df;
  font-size:16px;
}

.section-wrapper {
  position: relative;       /* 絶対配置の基準 */
  background-image:url(images/背景.jpg);  /* 背景をロゴまで伸ばす */
    background-size: cover;      /* 画面いっぱいに拡大 */
  background-position: center; /* 中央寄せ */
  background-repeat: no-repeat;
  width: 100%;                 /* 画面幅いっぱい */
  padding-top: 120px;
  padding-bottom: 50px;
}

.logo {
  position: absolute; /* section-wrapper 内で左上固定 */
  top: -100px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左揃え */
  text-align: left;
  gap: 5px;
}

.yasashii {
  color: #e4a19d;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0;
}

.one-to-one {
  color: #e4a19d;
  font-weight: bold;
  font-size: 24px;
  display: inline-block; /* 下線調整用 */
  position: relative;
  text-align: center;    /* ::after を中央に揃える基準 */
  margin: 0 auto;
}

.one-to-one::after {
  content: "";
  display: block;
  width: 100%;           /* 文字幅いっぱい */
  max-width: 228px;      /* 好きな長さに制限可能 */
  border-bottom: 1px solid #e4a19d;
  margin-top: 5px;
  margin-bottom:100px;
}

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

/* 全体の文字サイズを統一 */
.underline {
  font-size: 40px;
  margin: 0;
  text-decoration: none; /* 親には下線を付けない */
  text-align:center;
  margin:0;
  line-height: 70px;
}

/* span の部分だけ黄色い太線 */
.underline span {
  text-decoration: underline;
  text-decoration-color: #f9fc51;
  text-decoration-thickness: 10px;
  font-size:48px;
 line-height: 1.2;
}

/* タイトル部分 */
.square {
  font-size: 48px;
}

 .circle p.small-text {
    font-size: 25px;   /* スマホ用に小さめ */ /* 行間を少し調整 */
  }

.button {
  font-size: 30px;                       /* 文字サイズ */
  background-color: #3e5871;             /* 背景色 */
  color: white;                          /* 文字色 */
  border-radius: 50px;                   /* 楕円を自然に */
  padding: 12px 36px;                    /* 縦横の余白を微調整 */
  display: inline-block;                 
  text-align: center;
  cursor: pointer;
  border: none;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  margin:20px;
  transition: all 0.3s ease; 
}

.button:hover {
  background-color: #2d4356;   /* 少し濃い色に変化 */
  transform: translateY(-3px); /* ふわっと浮く感じ */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 影をつける */
  transition: all 0.3s ease;   /* なめらかに変化 */
}



.square {
  display: inline-block;       /* 文字サイズに合わせる */
  background-color: #df938e;  /* 背景色 */
  color: white;                /* 文字色 */
  padding: 0px 10px;          /* 内側の余白 */
  font-size: 48px;             /* 文字サイズ */
  position: relative;          /* 矢印用に位置指定 */
  margin:20px;
}

.square::after {
  content: "";
  position: absolute;
  bottom: -20px;       /* 吹き出しの下に矢印 */
  left: 50%;           /* 横中央に配置 */
  transform: translateX(-50%);
  border-width: 10px;  /* 矢印のサイズ */
  border-style: solid;
  border-color: #df938e transparent transparent transparent; /* 上向き三角形 */
}

p{
  text-align: center;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}



.container {
  width: 100%;
  max-width: 1000px;   /* コンテンツ幅を制限 */
  margin: 0 auto;      /* 横中央に揃える */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 600px;
}


.circle {
  font-weight: 700;
  background-color: white;
  border-radius: 50%;
  height: 600px;
  width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 16px;
   position: relative; /* z-index を効かせるため */
  z-index: 1;       
  margin:0;  
}

.teacher {
  position: absolute;
  bottom: -50px;
  left: 70%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 600px;
  height: 500px;
  background-image: url("images/teacher.png");
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  z-index: 2; /* 黄色より後ろに行く */
  pointer-events: none;
}
@media screen and (max-width: 1400px) {
  .teacher {
    left: 70%;              /* ノートPCで少し右に寄せる */
  }
}


@media screen and (max-width: 820px) {
  .teacher {
    position: absolute;
    bottom: 50px;
    left: 140px;      /* 画面左からの固定位置 */
    width: 180px;
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 2;
  }
}

@media screen and (min-width: 769px) and (max-width: 839px) {
  .teacher {
    left: 80%;                 /* 中央寄せ */
    transform: translateX(-50%);
    bottom: -30px;               /* 少し上げる */
    width: 500px;               /* Mini基準 */
    height: 400px;
  }
}

/* スマホ（768px以下） */
@media screen and (max-width: 768px) {

  .teacher {
    position: absolute;
    bottom: 0px;       /* 下に余白をとる */
    left: 76%;           /* 中央に配置 */
    transform: translateX(-50%);
    width: 250px;        /* 横幅 */
    height: 300px;       /* ← 高さを必ず指定 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
  }
}







.airplane {
  position: absolute;
  top: -35%;      /* 先生の頭上に */
  left: 60%;       
  transform: translateX(-50%) rotate(50deg);
  width: 150px;
  height: 300px;
  background-image: url("images/airplane.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;      /* 先生より前に */
}

@media (max-width: 1366px) { /* ノートPC程度の幅 */
  .airplane {
    top: -130px;  /* 少し下げる */
    width: 120px; /* サイズも縮小 */
    height: 240px;
  }
}

@media screen and (max-width: 820px) {
  .airplane {
    position: absolute;
    top: -20px; /* 先生の頭上に合わせて微調整 */
    left: 100%;  /* 先生の真上 */
    transform: translateX(-50%) rotate(40deg);
    width: 80px;    /* 固定幅にすると安定 */
    height: auto;   /* アスペクト比保持 */
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
  }
}

@media (max-width: 767px) {
  .airplane {
    position: absolute;
    top: -60px;           /* 30px → 80px に変更で少し下げる */
    left:55%;    
    transform: translateX(-50%) rotate(40deg); 
    width: 80px;         
    height: 200px;;
    background-size: contain;
  }
}

@media screen and (min-width: 768px) and (max-width: 819px) {
  .airplane {
    top: -120px;                 /* Mini基準で頭上に */
    left: 70%;                  /* teacher に対して中央寄せ */
    transform: translateX(-50%) rotate(40deg);
    width: 100px;
    height: 200px;
  }
}

@media screen and (min-width: 820px) and (max-width: 939px) {
  .airplane {
    top: -90px;                 /* Mini基準で頭上に */
    left: 50%;                  /* teacher に対して中央寄せ */
    transform: translateX(-50%) rotate(40deg);
    width: 100px;
    height: 200px;
  }
}

.earth {
  position: absolute;
  width: 150px;
  height: 300px;
  background-image: url("images/earth.png");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;

  /* 円の左下を基準に配置 */
  left: calc(50% - 300px - 20px);  /* 50% = container中央 → 半径300px → 左に20pxはみ出し */
  bottom: calc(50% - 300px - 20px);/* 同じく下方向も20pxはみ出し */
}

/* PC用 */
@media screen and (min-width: 1367px) {
  .earth {
    left: calc(50% - 300px - 20px);
    bottom: calc(50% - 300px - 20px);
    width: 150px;
    height: 300px;
  }
}

/* タブレット〜小型PC用 */
@media screen and (min-width: 940px) and (max-width: 1366px) {
  .earth {
    left: 20%;
    bottom: 20%;
    width: 130px;
    height: 260px;
    transform: translate(-50%, 50%);
  }
}

@media screen and (min-width: 820px) and (max-width: 939px) {
  .earth {
    left: 20%;
    bottom: 20%;
    width: 130px;
    height: 260px;
    transform: translate(-50%, 50%);
  }
}

/* iPad mini 縦向き */
@media screen and (min-width: 768px) and (max-width: 819px) {
  .earth {
    left: 20%;
    bottom: 18%;
    width: 120px;
    height: 240px;
    transform: translate(-50%, 50%);
  }
}

/* スマホ用 */
@media screen and (max-width: 767px) {
  .earth {
    left: 5px;
    bottom: 5px;
    width: 100px;
    height: 200px;
  }
}



.container2 {
  background-color: white;
  background-size: 80%;
  max-width: 900px;  /* 横幅制限して中央に */
  margin: 0 auto;    /* 中央寄せ */
  padding: 80px;
  border-radius: 10% 10%;
  position: relative;
  overflow: visible;
}

/* ▼ 下にとがった（三角形）を追加 */
.container2::after {
  content: "";
  position: absolute;
  bottom: -100px;           /* 下にどれだけ出すか調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;                /* ← ここ重要 */
  height: 0;               /* ← ここ重要 */
  border-left: 315px solid transparent;  /* 底辺幅の半分 */
  border-right: 315px solid transparent; /* 底辺幅の半分 */
  border-top: 100px solid white;          /* 三角形の高さと色 */
}




.yellow {
  position: relative;
  padding: 200px;
  background-color: #f7eec7;
  z-index: 3; /* 中身より下だけど teacher よりは上にしたい */
  margin-top: -30px;  
}



.question-wrapper {
  position: relative;
  width: 560px;
  margin: 80px auto;
}

.question {
  background-color: #3e5871;
  color: white;
  font-size: 30px;
  padding: 20px 40px;
  text-align: center;
  position: relative;
  z-index: 2; /* 前面 */
}

.question-background {
  border: 5px solid #3e5871;
  position: absolute;
  top: 10px;   /* 下にずらす */
  left: 10px;  /* 右にずらす */
  width: 100%;
  height: 100%;
  z-index: 1;  /* 背面 */
  box-sizing: border-box;
}

.decoration {
  position: absolute;
  top: -40px; /* 少し上に持ち上げる */
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 250px; /* 200 → 250 に広げる */
  overflow: visible; /* SVG内のはみ出しを隠さない */
}

.decoration text {
  fill: #df938e;
  font-size: 30px;
  font-weight: bold;
}

.number {
  color: #fff;  /* 文字色は白 */
  font-size: 40px;
  font-weight: bold;
  position: absolute;
  top: -50px;
  left: -50px;
  z-index: 3;

  /* 周囲にピンクの影を付けて輪郭風に */
  text-shadow:
    2px 2px #df938e,
   -2px 2px #df938e,
    2px -2px #df938e,
   -2px -2px #df938e;
}


/* 全体を縦方向に中央に配置 */
.WomenContainer {
  display: flex;
  flex-direction: column;   /* 縦並び */
  justify-content: center;  /* 縦方向中央 */
  align-items: center;      /* 横方向中央 */
  gap: 10px;                /* 上下の間隔 */
  margin-top: 50px;
}


/* 女性1と吹き出し1 */
.Woman1 {
  display: flex;
  align-items: flex-start;
  gap: 80px;  /* 女性と吹き出しの間隔 */
}

/* 女性1 */
.woman1 {
  background-image: url(images/woman.png);
  width: 95px;
  height: 125px;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 吹き出し1 */
.opinion {
  color: white;
  font-size: 18px;
  font-weight: bold;
  background-color: #df938e;
  padding: 10px 20px;
  border-radius: 50px;
  width: 350px;
  text-align: center;
  line-height: 50px;
  position: relative;
}

/* 吹き出し1矢印 */
.opinion::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px;
  border-color: #df938e transparent transparent transparent;
  transform: rotate(60deg);
}

/* 女性2と吹き出し2 */
.Woman2 {
  display: flex;
  flex-direction: row-reverse; /* 女性右、吹き出し左 */
  align-items: flex-start;
  gap: 80px;                   /* 女性と吹き出しの間隔 */
}

/* 女性2 */
.woman2 {
  background-image: url(images/woman2.png);
  width: 95px;
  height: 125px;
  background-repeat: no-repeat;
  background-size: contain;
}

/* 吹き出し2 */
.opinion2 {
  color: white;
  font-size: 18px;
  font-weight: bold;
  background-color: #df938e;
  padding: 10px 10px;
  border-radius: 50px;
  width: 360px;
  text-align: center;
  line-height: 50px;
  position: relative;
}

/* 吹き出し2矢印 */
.opinion2::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px;
  border-color: #df938e transparent transparent transparent;
  transform: rotate(-60deg);
}


.question-wrapper2 {
  position: relative;
  width: 560px;
  margin: 80px auto 50px;
}


.No1 {
  display: grid;
  grid-template-columns: max-content auto; /* 左列=Big+Small、右列=Pink */
  align-items: start;                       /* 上揃え */
  justify-content: center;                  /* 全体を中央 */
  column-gap: 20px;                         /* 横の隙間 */
  margin:0px;
}



.big-wrapper {
  display: flex;
  flex-direction: column; /* Bigの下にSmall */
  align-items: flex-start; /* ここで左揃え */
  gap: 5px;               /* 縦間隔 */
}



.big {
  font-size: 40px;
  font-weight: bold;
  margin: 0;
  text-align: left;
}

.pink {
  font-size: 40px;
  color: #df938e;
  font-weight: bold;
  margin: 0;
}

.small {
  font-size: 16px;
  margin: 0;
}

.No2 {
  display: grid;
  grid-template-columns: max-content auto; /* 左列=Big+Small、右列=Pink */
  align-items: start;                       /* 上揃え */
  justify-content: center;                  /* 全体を中央 */
  column-gap: 20px;                         /* 横の隙間 */
  margin:20px;
}

.big-wrapper2 {
  display: flex;
  flex-direction: column; /* Bigの下にSmall */
  align-items: flex-start; /* ここで左揃え */
  gap: 5px;               /* 縦間隔 */
}


.big2 {
  font-size: 30px;
  font-weight: bold;
  margin: 0;
  text-align: left;
}



.pink2 {
  font-size: 30px;
  color: #df938e;
  font-weight: bold;
  margin: 0;
}

.small2 {
  font-size: 16px;
  margin: 0;
}

.No3 {
  display: grid; /* そのままでもOK */
  grid-template-columns: max-content auto; /* 左列=big+small、右列=ピンクなし */
  align-items: start;
  justify-content: start; /* ← ここを center から start に変更 */
  column-gap: 20px;
  margin: 20px;
  text-align: left; /* 念のため */
}



.big-wrapper3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左揃え */
  gap: 5px;
  max-width: 600px;
  word-break: break-word;
}


.big3 {
  font-size: 30px;
  font-weight: bold;
  margin: 0;
  text-align: left;  
  line-height: 1.2;

   display: flex;             /* 左右に分ける */
  justify-content: space-between; /* 左右端に振り分け */
  align-items: flex-start;   /* 左上揃え */
}

.big3 span.pc-text {
  display: block;   /* 左揃えで改行が安定 */
  width: 600px;     /* 元の幅を維持 */
}

.big3 span.pink3 {
  font-size: 30px;
  color: #df938e;
  font-weight: bold;
  margin: 0;
  flex-shrink: 0;   /* 左テキストで折り返されても縮まない */

   align-self: flex-start; /* 左テキストの上に揃える */
  margin-left: -20px;     /* 左に少しずらす */
}

.small3 {
  font-size: 16px;
  margin: 0;
}

.container3 {
  position: relative;
  margin: 200px auto 0;
  padding: 80px;
  border-radius: 20% 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  background: transparent;
}

.white-bg {
  position: absolute;
  top: 270px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 300px;          /* 高さ調整 */
  background-color: white;
  border-radius: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央 */
  align-items: center;     /* 横中央 */
  z-index: -1;
  box-sizing: border-box;
}

.desc1, .desc, .important {
  margin: 0;
  text-align: center;
  line-height: 1.5;
}



/* タイトルを上に突き出す */
.Tytle {
  color: white;
  font-size: 40px;
  font-weight: bold;
  background-color: #df938e;
  padding: 20px 40px;
  position: absolute;
  top: -60px;   /* コンテナの外に出す */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
}

/* セクション全体 */
.Point1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 50px 0;
}

.point-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.color-text {
  position: absolute;   /* white-bg 内での絶対位置 */
  top: -20px;            /* 上からの余白 */
  left: 20px;           /* 左からの余白 */
  font-size: 30px;
  color: #df938e;
  font-weight: bold;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;
}






.online {
  font-size: 30px;
  color: white;
  font-weight: bold;
  background-color: #3e5871;
  padding: 20px 40px;
  text-align: center;
}

.Number {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-shadow:
    2px 2px #df938e,
   -2px 2px #df938e,
    2px -2px #df938e,
   -2px -2px #df938e;
}

.selection {
  color: #3e5871;
  font-size: 36px;
  font-weight: bold;
  margin: 0;
}

.desc1 {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  margin-top: 100px;
}


.desc {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}

.important {
  font-size: 48px;
  color: #df938e;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;   /* 上下必要なら指定 */
}


.pc-woman {
  position: absolute;
  bottom: -200px;   /* 白背景の下から10px上に */
  left: 30%;      /* 白背景の左端に合わせる場合 */
  transform: translateX(-80%); /* 左寄りに調整 */
  width: 400px;   /* お好みのサイズに */
  height: 300px;
  background-image: url('images/pc.png'); /* 画像パスを指定 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;     /* 白背景より手前に表示 */
}


/* ---------------- point2 ---------------- */

.container4 {
  position: relative;
  margin: 200px auto 0;
  padding: 80px;
  border-radius: 20% 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  background: transparent;
}
.white-bg2 {
  position: absolute;
  top: 270px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 300px;          /* 高さ調整 */
  background-color: white;
  border-radius: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央 */
  align-items: center;     /* 横中央 */
  z-index: -1;
  box-sizing: border-box;
}

.desc2, .desc3, .important2 {
  margin: 0;
  text-align: center;
  line-height: 1.5;
}



/* セクション全体 */
.Point2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 50px 0;
}

.point-row2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.color-text2 {
  position: absolute;   /* white-bg 内での絶対位置 */
  top: -20px;            /* 上からの余白 */
  left: 20px;           /* 左からの余白 */
  font-size: 30px;
  color: #df938e;
  font-weight: bold;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;
}

.online2 {
  font-size: 30px;
  color: white;
  font-weight: bold;
  background-color: #3e5871;
  padding: 20px 40px;
  text-align: center;
}

.Number2 {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-shadow:
    2px 2px #df938e,
   -2px 2px #df938e,
    2px -2px #df938e,
   -2px -2px #df938e;
}

.selection2 {
  color: #3e5871;
  font-size: 36px;
  font-weight: bold;
  margin: 0;
}

.desc2 {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  margin-top: 100px;
}


.desc3 {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}

.important2 {
  font-size: 48px;
  color: #df938e;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;   /* 上下必要なら指定 */
}


.pc-woman2 {
  position: absolute;
  bottom: -200px;   /* 白背景の下から10px上に */
  right: 0%;      /* 白背景の左端に合わせる場合 */
  transform: translateX(5%); 
  width: 400px;   /* お好みのサイズに */
  height: 300px;
  background-image: url('images/pc2.png'); /* 画像パスを指定 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;     /* 白背景より手前に表示 */
}



/* ---------------- point3 ---------------- */

.container5 {
  position: relative;
  margin: 200px auto 0;
  padding: 80px;
  border-radius: 20% 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  background: transparent;
}

.white-bg3 {
  position: absolute;
  top: 270px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 400px;          /* 高さ調整 */
  background-color: white;
  border-radius: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央 */
  align-items: center;     /* 横中央 */
  z-index: -1;
   box-sizing: border-box;
}

.desc4, .desc5, .important3 {
  margin: 0;
  text-align: center;
  line-height: 1.5;
}

/* セクション全体 */
.Point3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 50px 0;
}

.point-row3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.color-text3 {
  position: absolute;   /* white-bg 内での絶対位置 */
  top: -20px;            /* 上からの余白 */
  left: 20px;           /* 左からの余白 */
  font-size: 30px;
  color: #df938e;
  font-weight: bold;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;
}





.online3 {
  font-size: 30px;
  color: white;
  font-weight: bold;
  background-color: #3e5871;
  padding: 20px 40px;
  text-align: center;
}

.Number3 {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-shadow:
    2px 2px #df938e,
   -2px 2px #df938e,
    2px -2px #df938e,
   -2px -2px #df938e;
}

.selection3 {
  color: #3e5871;
  font-size: 36px;
  font-weight: bold;
  margin: 0;
}

.desc4 {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  margin-top: 100px;
}


.desc5 {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}

.important3 {
  font-size: 48px;
  color: #df938e;
  font-weight: bold;
  text-align: center;
  margin-bottom: 50px;   /* 上下必要なら指定 */
}


.pc-woman3 {
  position: absolute;
  bottom: -250px;   /* 白背景の下から10px上に */
  left: 25%;      /* 白背景の左端に合わせる場合 */
  transform: translateX(-80%); /* 左寄りに調整 */
  width: 400px;   /* お好みのサイズに */
  height: 300px;
  background-image: url('images/conversation.png'); /* 画像パスを指定 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;     /* 白背景より手前に表示 */
}

.section-wrapper3 {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.Voice {
  text-align: center;
  position: relative;
  margin: 300px auto 500px; /* 固定pxよりautoで中央寄せ */
  width: 100%;       /* 親の幅に収める */
  box-sizing: border-box;

   background: linear-gradient(90deg, #d5f9f9 0%, #f3dbd3 50%, #fbbdb9 100%);
   padding: 50px  50px 0;
}

.satisfaction{
  font-size:30px;
  font-weight:bold;
  color:#df938e;
  text-align: center;
  margin-top:50px;
  margin-bottom: 0;
}

.percent{
  color:#3e5871;
  font-size:48px;
}

.ribbon {
  background-image: url('images/りぼん.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 490px;
  height: 109px;
  margin: 0 auto;
}



.WomanA{
font-size:24px;
font-weight:bold;
color:white;
background-color:#3e5871;
padding: 20px 10px;
text-align:center;
margin:100px auto 0;
width:200px;
}


.womanA {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;   /* はみ出す場合は折り返し */
}

.shikaku {
  font-size: 24px;
  font-weight: bold;
  color: #3e5871;
  background-color: white;
  border-radius: 40px 40px;
  text-align: center;
  width: 400px;
  padding: 30px 0px;
  position: relative; /* ← woman3 の基準になる */
  line-height: 1.2;
}

.woman3 {
  background-image: url('images/woman3.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;
  height: 70px;
  position: absolute;
  bottom: 0;  /* 下にぴったり */
  right: 0;   /* 右にぴったり */
}


.sankaku{
  color:#3e5871;
  font-size:40px;
}

.woman-image {
  width: 230px;
  height: 450px;
  background-image: url('images/womanA.png');
  background-repeat: no-repeat;
  background-size: contain; /* 画像を枠内に収めたい場合 */
  margin: 0;
  position: relative; /* 子要素の基準 */
}

/* 左上のキラキラ */
.kirakira1 {
  width: 77px;
  height: 80px;
  background-image: url('images/kirakira.png');
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 30px;   /* 親要素の上にくっつける */
  left: 0;  /* 親要素の左にくっつける */
}

/* 右下のキラキラ */
.kirakira2 {
  width: 77px;
  height: 80px;
  background-image: url('images/kirakira.png');
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 30px; /* 親要素の下にくっつける */
  right: -30px;  /* 親要素の右にくっつける */
}

.fukidashi {
  color: #81605e;
  font-size: 20px;
  font-weight: bold;
  background-color: white;
  padding: 30px;
  text-align: left;
  position: absolute;
  top: 50%;         /* 親の高さの中央 */
  left: 100%;       /* 親の右端から配置開始 */
  transform: translateY(-50%); /* 中央に揃える */
  width: 260px;     /* 吹き出しの幅 */
  border-radius: 20px; /* 吹き出しっぽく角丸 */
  line-height: 1.2;
}
  
  .fukidashi::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;  /* 左にしっぽを出す */
  transform: translateY(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent white transparent transparent;
}


/* 強調テキスト */
.futoji {
  color: #df938e;
  font-size: 25px;
  font-weight: bold;
}

.before-after{
  display: flex;
  flex-direction: row;
  gap:150px;
  justify-content: center;
  align-items: center;
  margin-top: -20px;
}

.before-container {
  top: calc(100% + 10px); /* shikaku の下に10px空けて配置 */
  left: 0;
}

.before{
  font-size:30px;
  color:#627c97;
  font-weight:bold;
  background-color: white;
  padding:0px 20px;
}

.before-details{
  font-size:24px;
  background-color:#627c97;
  font-weight:bold;
  color: white;
  padding:0px 20px;
}

.after-container {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  position: relative;  /* 相対位置を基準に動かせる */
  left: -70px;         /* 左に50px移動 */
}

.after{
  font-size:30px;
  color:#df938e;
  font-weight:bold;
  background-color: white;
  padding:0px 20px;
}

.after-details{
  font-size:24px;
  background-color:#df938e;
  font-weight:bold;
  color: white;
  padding:0px 20px;
}




.WomanB{
font-size:24px;
font-weight:bold;
color:white;
background-color:#3e5871;
padding: 20px 10px;
text-align:center;
margin:200px auto 0;
width:200px;
}


.womanB {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;   /* はみ出す場合は折り返し */
}

.shikaku2 {
  font-size: 24px;
  font-weight: bold;
  color: #3e5871;
  background-color: white;
  border-radius: 40px 40px;
  text-align: center;
  width: 400px;
  padding: 30px 0px;
  position: relative; /* ← woman3 の基準になる */
  line-height:1.2;
}

.woman4 {
  background-image: url('images/woman2.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;
  height: 70px;
  position: absolute;
  bottom: 0;  /* 下にぴったり */
  right: 0;   /* 右にぴったり */
}


.sankaku2{
  color:#3e5871;
  font-size:40px;
}

.woman-image2 {
  width: 250px;
  height: 450px;
  background-image: url('images/womanB.png');
  background-repeat: no-repeat;
  background-size: contain; /* 画像を枠内に収めたい場合 */
  margin-bottom: -60px;
  position: relative; /* 子要素の基準 */
}



/* 左上のキラキラ */
.kirakira3 {
  width: 77px;
  height: 80px;
  background-image: url('images/kirakira.png');
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 30px;   /* 親要素の上にくっつける */
  left: -20px;  /* 親要素の左にくっつける */
}



/* 右下のキラキラ */
.kirakira4 {
  width: 77px;
  height: 80px;
  background-image: url('images/kirakira.png');
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 100px; /* 親要素の下にくっつける */
  right: -30px;  /* 親要素の右にくっつける */
}

.fukidashi2 {
  color: #81605e;
  font-size: 20px;
  font-weight: bold;
  background-color: white;
  padding: 30px;
  text-align: left;
  position: absolute;
  top: 30%;         /* 親の高さの中央 */
  left: 100%;       /* 親の右端から配置開始 */
  transform: translateY(-50%); /* 中央に揃える */
  width: 260px;     /* 吹き出しの幅 */
  border-radius: 20px; /* 吹き出しっぽく角丸 */
  line-height: 1.2;
}
  
  .fukidashi2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;  /* 左にしっぽを出す */
  transform: translateY(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent white transparent transparent;
}


/* 強調テキスト */
.futoji2 {
  color: #df938e;
  font-size: 23px;
  font-weight: bold;
}

.before-after2{
  display: flex;
  flex-direction: row;
  gap:150px;
  justify-content: center;
  align-items: center;
  margin-top: -20px;
}

.before-container2 {
  top: calc(100% + 10px); /* shikaku の下に10px空けて配置 */
  left: 0;
}

.before2{
  font-size:30px;
  color:#627c97;
  font-weight:bold;
  background-color: white;
  padding:0px 20px;
}

.before-details2{
  font-size:24px;
  background-color:#627c97;
  font-weight:bold;
  color: white;
  padding:0px 20px;
}

.after-container2 {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  position: relative;  /* 相対位置を基準に動かせる */
  left: -70px;         /* 左に50px移動 */
}

.after2{
  font-size:30px;
  color:#df938e;
  font-weight:bold;
  background-color: white;
  padding:0px 20px;
}

.after-details2{
  font-size:24px;
  background-color:#df938e;
  font-weight:bold;
  color: white;
  padding:0px 20px;
}




.WomanC{
font-size:24px;
font-weight:bold;
color:white;
background-color:#3e5871;
padding: 20px 10px;
text-align:center;
margin:200px auto 0;
width:200px;
}


.womanC {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;   /* はみ出す場合は折り返し */
}

.shikaku3 {
  font-size: 24px;
  font-weight: bold;
  color: #3e5871;
  background-color: white;
  border-radius: 40px 40px;
  text-align: center;
  width: 400px;
  padding: 30px 0px;
  position: relative; /* ← woman3 の基準になる */
  line-height:1.2;
}

.woman5 {
  background-image: url('images/woman.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;
  height: 70px;
  position: absolute;
  bottom: 0;  /* 下にぴったり */
  right: 0;   /* 右にぴったり */
}


.sankaku3{
  color:#3e5871;
  font-size:40px;
}

.woman-image3 {
  width: 300px;
  height: 550px;
  background-image: url('images/womanC.png');
  background-repeat: no-repeat;
  background-size: auto; /* 元画像サイズのまま */
  background-position: center top; /* 位置を中央や上に調整すると自然 */
  margin: 10px;
  position: relative;
}


/* 左上のキラキラ */
.kirakira5 {
  width: 77px;
  height: 80px;
  background-image: url('images/kirakira.png');
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 30px;   /* 親要素の上にくっつける */
  left: -20px;  /* 親要素の左にくっつける */
}

/* 右下のキラキラ */
.kirakira6 {
  width: 77px;
  height: 80px;
  background-image: url('images/kirakira.png');
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 150px; /* 親要素の下にくっつける */
  right: -30px;  /* 親要素の右にくっつける */
}

.fukidashi3 {
  color: #81605e;
  font-size: 20px;
  font-weight: bold;
  background-color: white;
  padding: 30px;
  text-align: left;
  position: absolute;
  top: 30%;         /* 親の高さの中央 */
  left: 80%;       /* 親の右端から配置開始 */
  transform: translateY(-50%); /* 中央に揃える */
  width: 260px;     /* 吹き出しの幅 */
  border-radius: 20px; /* 吹き出しっぽく角丸 */
  line-height:1.2;
}
  
  .fukidashi3::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;  /* 左にしっぽを出す */
  transform: translateY(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent white transparent transparent;
}


/* 強調テキスト */
.futoji3 {
  color: #df938e;
  font-size: 24px;
  font-weight: bold;
}

.before-after3{
  display: flex;
  flex-direction: row;
  gap:150px;
  justify-content: center;
  align-items: center;
  margin-top: -150px;
}

.before-container3 {
  top: calc(100% + 10px); /* shikaku の下に10px空けて配置 */
  left: 0;
}

.before3{
  font-size:30px;
  color:#627c97;
  font-weight:bold;
  background-color: white;
  padding:0px 20px;
}

.before-details3{
  font-size:24px;
  background-color:#627c97;
  font-weight:bold;
  color: white;
  padding:0px 20px;
}

.after-container3 {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  position: relative;  /* 相対位置を基準に動かせる */
  left: -70px;         /* 左に50px移動 */
}

.after3{
  font-size:30px;
  color:#df938e;
  font-weight:bold;
  background-color: white;
  padding:0px 20px;
}

.after-details3{
  font-size:24px;
  background-color:#df938e;
  font-weight:bold;
  color: white;
  padding:0px 20px;
}



.ribbon2 {
  background-image: url('images/りぼん2.png');
  background-repeat: no-repeat;
  width: 490px;
  height: 109px;
  margin: -300px auto 0;
  position: relative;
  z-index: 2; /* ←リボンを前面に */
}

.price-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 20px;   /* ←より自然な角丸 */
  padding: 30px;
  width: 40%;
  margin: -40px auto 50px;  /* ←上に引き上げてリボンに重ねる */
  font-size: 24px;
  font-weight: bold;
  gap: 0;
  position: relative;
  z-index: 1; /* ←リボンより後ろ */
}


.p{
  font-size:36px;
}

.otoku{
  color:#3e5871;
  font-size:30px;
}

.taiken{
  color:white;
  font-size:30px;
  background-color: #3e5871;
  padding:10px 20px;
}

.futoi{
  color:#df938e;
  font-size:60px;
}

.en{
  font-size:30px;
  color:#df938e;
}

.price-container p {
  margin: 0;
  padding: 0;
}

.price-container2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 20px;   /* ←より自然な角丸 */
  padding: 30px;
  width: 40%;
  margin: 50px auto 0;  /* ←上に引き上げてリボンに重ねる */
  font-size: 30px;
  font-weight: bold;
  color:#df938e;
  position:relative;
  z-index: 1;
}

.price-container2 p {
  margin: 0;
  padding: 0;
  font-size:40px;
}

.zero{
  font-size:120px;
}

.plus{
  margin: 0;
  font-size:35px;
}

.sarani{
  position:absolute;
  color:white;
  background-color: #db8a6d;
  padding:20px 20px;
  z-index: 2;
  font-size:30px;
  top:-30px;
  left: 0;
}

.kirakirawoman {
  position: relative;  /* 帯の基準にする */
  margin: 200px auto;
  width: 1000px;
  height: 660px;
  background-image: url('images/kirakirawoman.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 帯の共通スタイル */
.hazimete, .hazimete2 {
  position: absolute;  /* 画像上に配置 */
  color: white;
  font-weight: bold;
  font-size: 48px;
  background: linear-gradient(to right, #fbc5bc, #fea4a4);
  text-align: center;
  width: 400px;
  height: 90px;
  line-height: 90px;
  padding: 0;
}

/* 一つ目の帯：左寄せ */
.hazimete {
  top: 200px;    /* 上からの位置 */
  left: 20px;    /* 左寄せ */
}

/* 二つ目の帯：一つ目より少し下、右にずらす */
.hazimete2 {
  top:350px;    /* 一つ目の帯の下に配置 */
  left: 80px;   /* 少し右にずらす */
}

.parent {
  display: flex;
  flex-direction: column; /* 上下に並べる */
  align-items: center;    /* 横中央揃え */
  gap: 10px;              /* 文字とボタンの間隔 */
}

.okigaru {
  color: #3e5871;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
}

.button2 {
  font-size: 30px;
  background-color: #3e5871;
  color: white;
  border-radius: 50px;
  padding: 12px 36px;
  cursor: pointer;
  border: none;
  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;

  display: inline-block; /* 横幅を文字に合わせる */
  margin: 0 auto;
  transition: all 0.3s ease; 
}

.button2:hover {
  background-color: #2d4356;   /* 少し濃い色に変化 */
  transform: translateY(-3px); /* ふわっと浮く感じ */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 影をつける */
  transition: all 0.3s ease;   /* なめらかに変化 */
}

.logo2 {
  display: flex;
  flex-direction: column;  /* 縦に並べる */
  align-items: center;     /* 横中央揃え */
  text-align: center;
  gap: 5px;                /* 文字同士の間隔 */
  margin:100px auto 100px;
}

.yasashii2 {
  color: #e4a19d;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0;
}


.one-to-one2 {
  color: #e4a19d;
  font-weight: bold;
  font-size: 30px;
  display: inline-block; /* 下線調整用 */
  position: relative;
  text-align: center;    /* ::after を中央に揃える基準 */
  margin-top: 0;
}

.one-to-one2::after {
  content: "";
  display: block;
  width: 100%;           /* 文字幅いっぱい */
  max-width: 228px;      /* 好きな長さに制限可能 */
  border-bottom: 1px solid #e4a19d;
  margin-top: 5px;
  margin-bottom:100px;
}

.pc-text {
  display: inline;
}

.mobile-text {
  display: none;
}

/* PC表示 */
.pc-only {
  display: block;
}
.mobile-only {
  display: none;
}

.mobile-br {
  display: none; /* PCでは非表示 */
}

.big3 span.mobile-text{
display:none
}


/* ▼ スマホ対応 */

/* --------------------
   スマホ対応（max-width: 768px）
-------------------- */
@media screen and (max-width: 767px) {

  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;   /* 横スクロール防止 */
  }

    .mobile-br {
    display: block; /* スマホでは改行 */
  }

  /* ロゴ全体 */
  .logo {
    top: 0px;       /* 上に寄せすぎない */
    left: 10px;       /* 左に少し寄せる */
    gap: 3px;
    transform: scale(0.7); /* ロゴを70%に縮小 */
    transform-origin: top left; /* 左上を基準に縮小 */
    margin:0;
  }

  /* yasashii */
  .yasashii {
    font-size: 12px;
  }

  /* one-to-one */
  .one-to-one {
    font-size: 18px;
  }
  .one-to-one::after {
    max-width: 100px;
    margin-bottom: 40px;
  }

  /* 円のサイズと文字 */
  .circle {
    width: 370px;
    height: 370px;
    font-size: 12px; /* フォントも縮小 */
    margin:0;
  }

  .section-wrapper {
    padding: 0px;    /* 上余白 */
    padding-bottom: 0px; /* 下余白を大きめにして先生が入るスペース確保 */
    gap:0;
  }

  .container {
    min-height: 400px;  /* スマホ向けに短く */
    padding: 20px 0;    /* 上下の余白を調整 */
    position: relative;
}

  .square {
    font-size: 32px;       /* スマホ向けに少し縮小 */
    padding: 0px 8px;
    margin: 15px;
  }

  .square::after {
    border-width: 8px;     /* 矢印も少し小さく */
    bottom: -16px;
  }


  /* タイトル下線 */
  .one-to-one {
    font-size: 18px;
  }
  .one-to-one::after {
    max-width: 120px;
    margin-bottom: 50px;
  }

  /* アンダーライン文字 */
   .underline {
    font-size: 25px;       /* 親要素の文字サイズを縮小 */
    line-height: 50px;     /* 行間も縮小 */
  }

  .underline span {
    font-size: 32px;       /* spanの文字サイズも縮小 */
    text-decoration-thickness: 6px; /* 太線も少し細く */
  }

  /* 四角文字 */
  .square {
    font-size: 28px;
    padding: 0 6px;
  }

  .button {
    font-size: 18px;         /* 文字サイズを小さく */
    padding: 8px 0px;       /* 内側の余白を縮小 */
    margin: 5px;            /* 外側の余白を縮小 */
    border-radius: 40px;     /* 楕円を少し小さく */
    width:220px;
    height:50px;
    text-align: center;
  }

   .circle p.small-text {
    font-size: 16px;   /* スマホ用に小さめ */ /* 行間を少し調整 */
  }


.container2 {
  width: 90%;             /* どんな画面でも9割に収まる */
  max-width: 480px;       /* 広すぎるスマホではここで止まる */
  min-width: 280px;       /* SEなどでつぶれすぎないように */
  margin: 0 auto;
  padding: 20px;
  border-radius: 20px;
  background-color: white;
  position: relative;
  overflow: visible;
}

.container2::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-top: 40px solid white;
}

  .yellow {
    padding: 50px 20px;  /* 上下の余白を縮める */
  }

  .question-wrapper,
  .question-wrapper2 {
    width: 95%;         /* 固定幅をやめて横幅にフィット */
    margin: 40px auto 0 !important;
  }

  .question {
    font-size: 20px;    /* 文字小さく */
    margin-top: 0;
  }
  
  .question-background{
    padding: 15px 10px;
  }

  .decoration {
    width: 250px;
    height: 150px;
  }

  .number {
    font-size: 28px;
    top: -30px;
    left: -30px;
  }

  .question{
    font-size:18px;
  }

  
  .WomenContainer {
    gap: 30px;
    margin-top: 20px;
  }

.Woman1, .Woman2 {
  display: flex;
  flex-direction: row;      /* 横並び */
  gap: 20px;                /* 画像と吹き出しの間隔 */
  align-items: flex-start;   /* 上揃えで微調整可能 */
  width:90%;
}

.Woman1{
  margin-top:50px;
}

.Woman2 {
  flex-direction: row-reverse; /* 女性右、吹き出し左 */
}

/* 吹き出し */
.opinion, .opinion2 {
  width: 70%;             
  font-size: 16px;
  line-height: 1.4;
  padding: 8px 12px;
  position: relative;      /* 上下調整用 */
  top: -10px;              /* 上に移動（値は調整可能） */
}


  .No1, .No2, .No3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 上揃えにする */
  width: 100%;
  max-width: 600px;        /* 幅を統一 */
  margin: 10px auto;   }


.big-wrapper, .big-wrapper2, .big-wrapper3 {
display: flex;
  flex-direction: column;
  flex: 1;                 /* 幅を均等に */
  gap: 5px;
  position: relative;
}

.big{
    font-size:23px;
        display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    flex-wrap: nowrap;
  }

  .big2{
    font-size:20px;
        display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    flex-wrap: nowrap;
  }

  .big3 span.mobile-text{
 display:block;
   font-size:20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    flex-wrap: nowrap;
  }



.pink, .pink2{
  position: absolute;
  top: 0;                 /* 上揃え */
  right: 0;               /* 右端に固定 */
  width: 50px;            /* 数字に合わせる */
  text-align: right;
  font-size: 20px;
}

  .big3 span.pink3 {
  position: absolute;
  top: 0;                 /* 上揃え */
  right: 0;               /* 右端に固定 */
  width: 50px;            /* 数字に合わせる */
  text-align: right;
  font-size: 20px;
}

  .small, .small2,.small3 {
    font-size: 14px;
    text-align:left;
  }



.mobile-text{
  display: block;
}

.pc-text{
  display: none;
}

/*ポイント*/

 /* コンテナ全体 */
  .container3, .container4, .container5 {
    padding: 0px 0px;
    margin: 0px auto 0;
    border-radius: 15px;
  }

.Tytle {
    font-size: 18px;
    padding: 0;       /* 内側の余白はゼロ */
    margin-top: 100px; /* 上に余白を足す */
    margin-bottom: 100px; /* 下に余白を足す */
}

  /* 白背景の調整 */
  .white-bg, .white-bg2{
    position: relative; /* 絶対位置解除 */
    top: -50px;
    left: auto;
    transform: none;
    width: 350px;         /* 横幅に合わせる */
    height: auto;      /* 高さ自動 */
    padding: 40px 20px;
    border-radius: 20px;
    z-index: 0;
  }

  .white-bg3 
  {
    position: relative; /* 絶対位置解除 */
    top: -50px;
    left: auto;
    transform: none;
    width: 350px;         /* 横幅に合わせる */
    height: auto;      /* 高さ自動 */
    padding: 50px 20px;
    border-radius: 20px;
    z-index: 0;
  }
  

  /* 色文字の調整 */
  .color-text, .color-text2, .color-text3 {

    position: absolute;        /* 白背景内での絶対位置 */
    top: -30px;                 /* 上から少し余白 */
    left: 10px;                /* 左から少し余白 */
    display: flex;
    flex-direction: column;
    align-items: center;   /* 左揃え */
    justify-content: flex-start;
    font-size: 18px;           /* スマホ用に文字サイズ調整 */
    color: #df938e;
    font-weight: bold;
    line-height: 1.2;
  }


  

.online, .online2, .online3 {
    font-size: 22px;
    padding: 15px 10px;     /* 左右の余白 */
    max-width: 400px;       /* 幅の制限 */
    text-align: center;
    position: relative;
    top: -20px;                  /* 上は0に */
    transform: translateY(20px); /* 下に少しずらして白背景と重ねる */
    z-index: 2;
    flex: none;
    margin: 0 auto;          /* 中央揃え */
    box-sizing: border-box;  /* パディング込みで幅計算 */
}
  .online .mobile-text,
  .online2 .mobile-text,
  .online3 .mobile-text {
    display: block;    /* 改行をブロックに統一 */
    margin: 0 !important;         /* デフォルトマージンを消す */
    line-height: 1.2;  
  }



  /* ナンバー */
  .Number, .Number2, .Number3 {
    font-size: 28px;
    margin:0;
  }

  /* タイトル */
  .Tytle {
    font-size: 26px;
    padding: 12px 20px;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 20px;
  }

  /* 説明文 */
  .desc1, .desc, .desc2, .desc3, .desc4, .desc5{
    font-size: 16px;
    margin-bottom:0;
    text-align: center;
    line-height: 1.4;
  }

  .desc1, .desc2, .desc4{
  margin-top: 8px;
  }

   .important, .important2, .important3{
        font-size: 30px;
    text-align: center;
    margin-bottom: 0;
   }

  /* 画像 */
.pc-woman {
    bottom: 20px;
    left: 20%;
    transform: translateX(-50%);
    width: 250px;
    height: 200px; /* 高さも指定 */
  }

  .pc-woman2 {
    bottom: 10px;
    right:0%;
    transform: translateX(0%);
    width: 150px;
    height: 150px;
  }

  .pc-woman3 {
    bottom: 30px;
    left: 15%;
    transform: translateX(-50%);
    width: 180px;
    height: 150px;
  }



  /* point-row はPC版と同じ */
  .point-row, .point-row2, .point-row3 {
   font-size: 22px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: flex-start;      /* 左揃え */
    margin:0;
    gap:0;
  }

  /* 選択テキスト */
  .selection, .selection2, .selection3 {
    font-size: 20px;
    margin-bottom:0;
    line-height: 1;    /* 行間を詰める */
  }

  .Number {
  font-size: 28px;
  color: #fff;
  font-weight: bold;
  text-shadow:
    2px 2px #df938e,
   -2px 2px #df938e,
    2px -2px #df938e,
   -2px -2px #df938e;
  margin-top: 5px; /* PointとNumberの間隔 */
}

.Point1,.Point2,.Point3{
  margin:20px;
}

.Voice{
  margin:50px auto;
}

.ribbon {
  position: relative; /* または absolute で親要素に対して */
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  height: 150px;
  margin-bottom: 0;
}








/* 全体マージン */
.WomanA {
  margin: 0px auto 5px;
  font-size:20px;
}

/* 四角 */
.shikaku, .shikaku2, .shikaku3 {
  width: 350px;
  display: block;       /* 重要 */
  margin: 50px -20px 10px;    /* 上下 50px、左右中央 */
  font-size: 18px;
}

/* 女性アイコン */
.woman3, .woman4, .woman5 {
  width: 50px;
  height: 50px;
}

.satisfaction{
  margin-top:0px;
}

/* womanA 全体の縦並び */
.womanA {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 重複してたgapを統合 */
}

.womanA > * {
  width: 90%;
  max-width: 350px;
  text-align: center;
  margin: 0 auto; /* 念のため中央寄せ */
}

.woman-image {
  margin-left: 0; /* スマホはネガティブマージン無効化 */
}




/* 四角の下にBeforeだけ移動 */
.before-container.mobile-only {
  order: 1; /* 四角の次に表示 */
  margin: 20px auto; /* 四角との間隔 */
}

.shikaku{
  order:2;
  margin:0px auto;
}

.before,.before-details,
.before2,.before-details2,
.before3,.before-details3{
  font-size:20px
}

/* sankakuはBeforeの下に */
.sankaku {
  order: 3;
  margin: 10px auto;
}

.woman-image {
  order: 5;
  margin-top: 10px;
  align-self: flex-start; /* 親がflexでも左寄せにする */
  width:300px;
  height:300px;
  position: relative; 
  margin-bottom:0;
   margin-left: -20px; /* 左に20px寄せる */
   background-image: url('images/womanA1png.png');
}

  .fukidashi {
    position: relative;  /* 絶対配置解除 */
    top: auto;
    left: 130px;
    transform: none;
    margin-top: 5px;     /* 画像との距離 */
    width: 55%;          /* 幅をスマホ向けに縮小 */
    padding-right: 0;
  }

.fukidashi,.futoji{
  font-size:16px;
}

/* Afterは最後に残す */

  .after-container.mobile-only {
    left: 0;          /* 左右の手動補正はリセット */
    margin: 0;        /* 上下だけ余白をつける場合はここで調整 */
    order:4;
  }

/* Before-Afterコンテイナーは横並び解除（スマホ用） */
  .before-after {
    display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: flex-start;
    align-items: center;  /* 子要素を横中央に */
    margin-top: 100px;
  }

    /* 左上のキラキラ */
  .kirakira1 {
    top: 5px;   /* 上に寄せる */
    left: 10px;  /* 左に寄せる */
    width: 60px; /* 小さめに調整可 */
    height: 60px;
  }

  /* 右下のキラキラ */
  .kirakira2 {
    bottom: 10px;  /* 下に寄せる */
    right: 90px;   /* 右に寄せる */
    width: 60px;   /* 小さめに調整可 */
    height: 60px;
  }



  .WomanB {
  margin: 80px auto 0px;
  font-size:20px;
}

/* womanA 全体の縦並び */
.womanB {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 重複してたgapを統合 */
}

/* 四角の下にBeforeだけ移動 */
.before-container2.mobile-only {
  order: 1; /* 四角の次に表示 */
  margin: 20px auto 20px; /* 四角との間隔 */
}

/* sankakuはBeforeの下に */
.sankaku2 {
  order: 3;
  margin: 0px auto;
}

.shikaku2{
  order:2;
  margin:50px auto;
}

.woman-image2 {
  order: 5;
  margin-top: 30px;
  align-self: flex-start; /* 親がflexでも左寄せにする */
  width:300px;
  height:300px;
  position: relative; 
  margin-bottom:0;
   margin-left: -20px; /* 左に20px寄せる */
   background-image: url('images/womanB1.png');
}



  .fukidashi2 {
    position: relative;  /* 絶対配置解除 */
    top: auto;
    left: 130px;
    transform: none;
    margin-top: 10px;     /* 画像との距離 */
    width: 55%;        /* 幅をスマホ向けに縮小 */
    padding:20px 20px;
  }

.fukidashi2,.futoji2{
  font-size:16px;
}

.womanB > * {
  width: 90%;
  max-width: 350px;
  text-align: center;
  margin: 0 auto; /* 念のため中央寄せ */
}

.woman-image2 {
  margin-left: 0; /* スマホはネガティブマージン無効化 */
}
/* Afterは最後に残す */

  .after-container2.mobile-only {
    left: 0;          /* 左右の手動補正はリセット */
    margin: 0;        /* 上下だけ余白をつける場合はここで調整 */
    order:4;
  }


/* Before-Afterコンテイナーは横並び解除（スマホ用） */
  .before-after2 {
    display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: flex-start;
    align-items: center;  /* 子要素を横中央に */
    margin-top: 100px;
  }

  .after-details2{
    font-size:20px;
  }

    /* 左上のキラキラ */
  .kirakira3 {
    top: 10px;   /* 上に寄せる */
    left: 5px;  /* 左に寄せる */
    width: 60px; /* 小さめに調整可 */
    height: 60px;
  }

  /* 右下のキラキラ */
  .kirakira4 {
    bottom: 20px;  /* 下に寄せる */
    right: 40px;   /* 右に寄せる */
    width: 60px;   /* 小さめに調整可 */
    height: 60px;
  }


  .WomanC {
  margin: 80px auto 0px;
  font-size:20px;
}

/* womanA 全体の縦並び */
.womanC {
display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* 重複してたgapを統合 */
}

/* 四角の下にBeforeだけ移動 */
.before-container3.mobile-only {
  order: 1; /* 四角の次に表示 */
  margin: 20px auto 20px; /* 四角との間隔 */
}


/* sankakuはBeforeの下に */
.sankaku3 {
  order: 3;
  margin: 0px auto;
}

.shikaku3{
  order:2;
  margin:50px auto;
}






  .woman-image3.pc-only {
    display: none !important;
  }

.w-wrapper.mobile-only {
  position: relative; /* 吹き出しの基準 */
  width: 300px;
  margin: 30px auto 0;
}

.woman-image-mobile {
  width: 100%;   /* 親幅いっぱいに */
  height: 300px;
  object-fit: cover;
  display: block;
  transform: translateX(-40px);
}

  .fukidashi3,.futoji3{
  font-size:16px;
}

.womanC > * {
  width: 90%;
  max-width: 350px;
  text-align: center;
  margin: 0 auto; /* 念のため中央寄せ */
}

.fukidashi3 {
    position: absolute;
    top: 20%;       /* 画像内の高さで調整 */
    left: 40%;      /* 右上に寄せる */
    transform: translateY(-50%);
    z-index: 2;
    width:50%;
    padding:20px;
  }

.woman-image3 {
  margin-left: 0; /* スマホはネガティブマージン無効化 */
}

.fukidashi3::after {
  content: "";
  position: absolute;
  top: 105px;               /* 位置は固定 */
  left: -5px;              /* 左下に沿わせる */
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid white;  /* 下向き三角のまま */
  transform: rotate(50deg);     /* 左下向きに斜め調整 */
  transform-origin: top center;
}
.fukidashi3,.futoji3{
  font-size:16px;
}

/* Afterは最後に残す */

  .after-container3,.mobile-only {
  left: 0;          /* 左右の手動補正はリセット */
    margin: 0;        /* 上下だけ余白をつける場合はここで調整 */
    order:4;
  }

/* Before-Afterコンテイナーは横並び解除（スマホ用） */
  .before-after3 {
       display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: flex-start;
    align-items: center;  /* 子要素を横中央に */
    margin-top: 0px;
  }

    /* 左上のキラキラ */
  .kirakira5 {
    top: 10px;   /* 上に寄せる */
    left: 5px;  /* 左に寄せる */
    width: 60px; /* 小さめに調整可 */
    height: 60px;
  }

  /* 右下のキラキラ */
  .kirakira6 {
    bottom: 20px;  /* 下に寄せる */
    right: 80px;   /* 右に寄せる */
    width: 60px;   /* 小さめに調整可 */
    height: 60px;
  }

  .after-details3{
    font-size:20px;
  }

  

.ribbon2 {
  background-image: url('images/りぼん2.png');
  background-repeat: no-repeat;
  background-size: contain;   /* 縮小しても欠けないように */
  background-position: center;
  width: 90%;                /* 親幅に合わせる */
  max-width: 500px;          /* PCの時はこれ以上大きくならない */
  height: auto;              /* アスペクト比を維持する */
  aspect-ratio: 300 / 109;   /* 元画像の比率を指定 */
  margin: 50px auto -50px;
  position: relative;
  z-index: 2; /* リボンを前面に */
}
.price-container,
  .price-container2 {
      width: 90%;
    max-width: 320px; /* iPhone SE でも余白確保 */
    min-width: 280px; /* 小さすぎる場合の下限 */
    padding: 15px;
    font-size: 20px;
    margin: 0 auto 30px;
  }

span.p {
  font-size: 30px; /* お好みのサイズに調整 */
}
  .p       { font-size: 20px; }
  .taiken  { font-size: 24px; padding: 0 10px; }
  .otoku   { font-size: 24px; }

  .futoi   { font-size: 40px; }
  .en      { font-size: 16px; }
  .zero    { font-size: 100px; }
  .plus    { font-size: 25px; }

  .sarani  { font-size: 25px; top: -20px; padding: 10px 15px; }

  .price-container p.yazirushi {
    margin: 0px 0; /* 矢印だけ上下余白 */
    font-size:16px;
  }

  .price-container2 p {
  font-size: 20px; /* 「入会金」と「円」の文字サイズ */
  margin: 0;       /* 余白リセット */
}

  .kirakirawoman {
    width: 100%;          /* 横幅いっぱい */
    height: 300px;         /* 高さ自動 */
    background-size: cover;
    margin: 100px auto;    /* 上下マージン調整 */
    position: relative; 
  }

.hazimete, .hazimete2 {
    width: 45%;                /* 幅を画面比率で縮小 */
    height: 50px;              /* 高さを少し小さく */
    font-size: 20px;           /* 文字サイズを小さく */
    line-height: 50px;         /* 高さに合わせて中央揃え */
    top: auto;                 /* 元のPC位置は無効化 */
    left: 15%;                 /* 画面内で調整 */
    padding:0px;
  }

  .hazimete {
    top: 70px;                /* 元画像上で上寄せ */
    left:10px;
  }

  .hazimete2 {
    top: 170px;                /* 1つ目より少し下 */
    left:30px;
  }
  .parent {
    gap: 8px;              /* 文字とボタンの間隔縮小 */
  }

  .okigaru {
    font-size: 20px;
  }

  .button2 {
    font-size: 20px;
    padding: 8px 24px;
  }

  .logo2 {
    margin: 50px auto;
    gap: 3px;
  }

  .yasashii2 {
    font-size: 14px;
  }

  .one-to-one2 {
    font-size: 20px;
  }

  .one-to-one2::after {
    max-width: 150px;     /* 下線の長さ調整 */
    margin-bottom: 50px;  /* 下の余白縮小 */
  }

    .pc-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }

   .woman-image3.pc-only {
    display: none !important;
  }

  .big3 span.pc-text{
display:none
  }


}

@media (min-width: 768px) and (max-width: 819px) {

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 横スクロールを強制的に隠す */
}

.teacher{
  width:400px;
  height: 400px;
  bottom:-30px;
}

.airplane{
  width:150px;
  height:150px;
}

.earth{
width:150px;
  height:150px;
}

  .yellow{
  padding:120px 50px;
}

.question .mobile-text{
  display: block;
}

.question .pc-text{
  display: none;
}

.question .mobile-text .mobile-br {
  display: block;
}
  .container2 {
    width: 95%;          /* 画面幅いっぱいに近くする */
    max-width: none;     /* スマホでは max-width 制限なし */
    padding: 20px;       /* 余白を小さめに */
    border-radius: 5%;   /* 丸みも調整（必要なら） */
  }
.Tytle{
  font-size:35px;
}

.color-text,.color-text2,.color-text3 {
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央寄せ */
}

  .online .mobile-text,
  .online2 .mobile-text,
  .online3 .mobile-text {
    display: block;    /* 改行をブロックに統一 */
    margin: 0 ;      /* デフォルトマージンを消す */
    line-height: 1.2;  
  }

  .online .pc-text{
    display:none
  }

  .container4,.container5{
    margin:100px auto 0;
  }

.pc-woman{
  bottom: -250px;
    left: 30%;
    width: 300px;
    height: 300px; /* 高さも指定 */

}

.pc-woman2{
  bottom: -220px;
    right: 0%;
    width: 250px;
    height: 250px; /* 高さも指定 */

}

.pc-woman3{
  bottom: -280px;
    left: 30%;
    width: 250px;
    height: 250px; /* 高さも指定 */
}

/* 受講生の皆さんの声 */
/* ===== womanA 全体 ===== */

.Voice{
  padding:50px 0 150px;
}
.womanA {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 横中央 */
  justify-content: center; /* 縦中央（画面全体で中央にしたい場合） */
  gap: 10px;               /* 子要素間の間隔 */
  width: 100%;
  min-height: auto;       /* 画面全体に広げる */
  margin: 0 auto;
}

/* 子要素共通設定 */
.womanA > * {
  width: 90%;
  max-width: 400px;
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
}

/* ===== 四角 (shikaku) ===== */
.shikaku, .shikaku2, .shikaku3 {
  display: block;
  width: 350px;
  margin: 0px auto 0px;
}

/* ===== sankaku ===== */
.sankaku {
  display: inline-block;
  margin: 0px auto;
  font-size:30px;
}

/* ===== Before / After (スマホ用) ===== */
.before-container.mobile-only{
  display: inline-block;
  margin: 30px auto 20px;
  width:300px;
}

.after-container.mobile-only {
  display: block !important; /* displayが上書きされても出す */
  margin: 10px auto !important; /* 左右中央 */
  width: 300px;
  text-align: center;
  align-self: center; /* flex内でも中央 */
  left: auto;        /* 左ずれ解除 */
  position: relative; /* 必要であれば */
}


.before-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative; 
}

/* Before/Afterの表示順 */
.before-container.mobile-only { order: 1; }
.shikaku { order: 2; }
.sankaku { order: 3; }
.after-container.mobile-only { order: 4; }

/* ===== 女性アイコン ===== */
.woman3, .woman4, .woman5 {
  width: 60px;
  height: 60px;
}

/* ===== 女性画像 ===== */
.woman-image {
  width: 400px;
  height: 400px;
  background-image: url('images/womanA1png.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  order: 5;
  margin-top: 0px;
  margin-bottom: 0;
  align-self: flex-start; /* flex内で横中央 */
  margin-left: 50px;  
  position: relative;
}

/* ===== 吹き出し ===== */
.fukidashi{
  font-size: 20px;
  position: relative;
  top: auto;
  left: 300px;
  transform: none;
  margin-top: 5px;
  width: 55%;
  padding-right: 0;
}

.fukidashi .mobile-br{
  display: block;
}

.futoji{
  font-size:20px;
}

/* ===== キラキラ装飾 ===== */
.kirakira1 {
  position: absolute;
  top: 5px;
  left: 90px;
  width: 60px;
  height: 60px;
}

.kirakira2 {
  position: absolute;
  bottom: 10px;
  right: 80px;
  width: 60px;
  height: 60px;
}

/* ===== 非表示設定 ===== */
.sankaku .pc-text { display: none; }
.sankaku .mobile-text { display: inline-block; margin: 0; padding:0; line-height:1;}
.before-container.pc-only,
.after-container.pc-only { display: none; }


/* ===== womanB 全体 ===== */
.womanB {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 横中央 */
  justify-content: center; /* 縦中央（画面全体で中央にしたい場合） */
  gap: 10px;               /* 子要素間の間隔 */
  width: 100%;
  min-height: auto;       /* 画面全体に広げる */
  margin: 0 auto;
}

/* 子要素共通設定 */
.womanB > * {
  width: 90%;
  max-width: 400px;
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
}


/* ===== sankaku ===== */
.sankaku2 {
  display: inline-block;
  margin: 0px auto;
  font-size:30px;
}

/* ===== Before / After (スマホ用) ===== */
.before-container2.mobile-only{
  display: inline-block;
  margin: 30px auto 20px;
  width:300px;
}

.after-container2.mobile-only {
  display: block !important; /* displayが上書きされても出す */
  margin: 10px auto !important; /* 左右中央 */
  width: 300px;
  text-align: center;
  align-self: center; /* flex内でも中央 */
  left: auto;        /* 左ずれ解除 */
  position: relative; /* 必要であれば */
}


.before-after2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Before/Afterの表示順 */
.before-container2.mobile-only { order: 1; }
.shikaku2 { order: 2; }
.sankaku2 { order: 3; }
.after-container2.mobile-only { order: 4; }


/* ===== 女性画像 ===== */
.woman-image2 {
  width: 400px;
  height: 400px;
  background-image: url('images/womanB1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  order: 5;
  margin-top: 0px;
  margin-bottom: 0;
  align-self: flex-start; /* flex内で横中央 */
  margin-left: 50px;  
  position: relative;
}

/* ===== 吹き出し ===== */
.fukidashi2{
  font-size: 20px;
  position: relative;
  top: auto;
  left: 300px;
  transform: none;
  margin-top: 5px;
  width: 55%;
  padding: 20px;

}

.fukidashi2 .mobile-br{
  display: block;
}

.futoji2{
  font-size:20px;
}

/* ===== キラキラ装飾 ===== */
.kirakira3 {
  position: absolute;
  top: 5px;
  left: 90px;
  width: 60px;
  height: 60px;
}

.kirakira4 {
  position: absolute;
  bottom: 10px;
  right: 80px;
  width: 60px;
  height: 60px;
}

/* ===== 非表示設定 ===== */
.sankaku2 .pc-text { display: none; }
.sankaku2 .mobile-text { display: inline-block; margin: 0; padding:0; line-height:1;}
.before-container2.pc-only,
.after-container2.pc-only { display: none; }

  
/* ===== womanB 全体 ===== */
.womanC {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 横中央 */
  justify-content: center; /* 縦中央（画面全体で中央にしたい場合） */
  gap: 10px;               /* 子要素間の間隔 */
  width: 100%;
  min-height: auto;       /* 画面全体に広げる */
  margin: 0 auto;
}

/* 子要素共通設定 */
.womanC > * {
  width: 90%;
  max-width: 400px;
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
}


/* ===== sankaku ===== */
.sankaku3 {
  display: inline-block;
  margin: 0px auto;
  font-size:30px;
}

/* ===== Before / After (スマホ用) ===== */
.before-container3.mobile-only{
  display: inline-block;
  margin: 30px auto 20px;
  width:300px;
}

.after-container3.mobile-only {
  display: block !important; /* displayが上書きされても出す */
  margin: 10px auto !important; /* 左右中央 */
  width: 300px;
  text-align: center;
  align-self: center; /* flex内でも中央 */
  left: auto;        /* 左ずれ解除 */
  position: relative; /* 必要であれば */
}


.before-after3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Before/Afterの表示順 */
.before-container3.mobile-only { order: 1; }
.shikaku3 { order: 2; }
.sankaku3 { order: 3; }
.after-container3.mobile-only { order: 4; }


/* ===== 女性画像 ===== */

.w-wrapper.mobile-only {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.woman-image-mobile {
  position: static;  /* default */
  width: 80%;
  height: auto;
  display: block;
}

img {
  display: block;     /* inline-blockの余白を消す */
  margin: 0;
  padding: 0;
}

.fukidashi3 {
  position: absolute;
  top: 30%;      /* 顔にかぶらない位置に調整 */
  left: 65%;     /* 画像の右寄り */
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;     /* ← margin-left いらない */
  padding-right: 5px;
}




.fukidashi3 .mobile-br{
  display: block;
}

.futoji3{
  font-size:20px;
}

/* ===== キラキラ装飾 ===== */
.kirakira5 {
  position: absolute;
  top: 5px;
  left:180px;
  width: 60px;
  height: 60px;
}

.kirakira6 {
  position: absolute;
  bottom: 10px;
  right: 330px;
  width: 60px;
  height: 60px;
}

/* ===== 非表示設定 ===== */
.sankaku3 .pc-text { display: none; }
.sankaku3 .mobile-text { display: inline-block; margin: 0; padding:0; line-height:1;}
.before-container3.pc-only,
.after-container3.pc-only { display: none; }
.woman-image3.pc-only{display: none !important;}

.price-container,.price-container2{
  width:80%;
}

.kirakirawoman{
  width: 100%;
}
}
@media (min-width: 820px) and (max-width: 939px) {

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 横スクロールを強制的に隠す */
}
  .yellow{
  padding:120px 50px;
}

  .online .mobile-text,
  .online2 .mobile-text,
  .online3 .mobile-text {
    display: block;    /* 改行をブロックに統一 */
    margin: 0 ;      /* デフォルトマージンを消す */
    line-height: 1.2;  
  }

  .online .pc-text{
    display:none !important;
  }
  .pc-woman{
    width:300px;
    bottom:-250px;
  }

  .pc-woman2{
    width:300px;
    bottom:-250px;
  }

.pc-woman3 {
  width: 300px;
  bottom: -300px;  
}

.container4,.container5{
  margin:100px auto 0;
}
/* 受講生の皆さんの声 */
/* ===== womanA 全体 ===== */

.Voice{
  padding:50px 0 150px;
}
.womanA {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 横中央 */
  justify-content: center; /* 縦中央（画面全体で中央にしたい場合） */
  gap: 10px;               /* 子要素間の間隔 */
  width: 100%;
  min-height: auto;       /* 画面全体に広げる */
  margin: 0 auto;
}

/* 子要素共通設定 */
.womanA > * {
  width: 90%;
  max-width: 400px;
  text-align: center;
  margin: 0 auto;
  font-size: 25px;
}

/* ===== 四角 (shikaku) ===== */
.shikaku, .shikaku2, .shikaku3 {
  display: block;
  width: 350px;
  margin: 0px auto 0px;
  font-size:23px !important;
}

/* ===== sankaku ===== */
.sankaku {
  display: inline-block;
  margin: 0px auto;
  font-size:30px;
}

/* ===== Before / After (スマホ用) ===== */
.before-container.mobile-only{
  display: inline-block;
  margin: 30px auto 20px;
  width:300px;
}

.after-container.mobile-only {
  display: block !important; /* displayが上書きされても出す */
  margin: 10px auto !important; /* 左右中央 */
  width: 300px;
  text-align: center;
  align-self: center; /* flex内でも中央 */
  left: auto;        /* 左ずれ解除 */
  position: relative; /* 必要であれば */
  font-size: 40px!important;
}


.before-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  position: relative; 
}

/* Before/Afterの表示順 */
.before-container.mobile-only { order: 1; }
.shikaku { order: 2; }
.sankaku { order: 3; }
.after-container.mobile-only { order: 4; }

/* ===== 女性アイコン ===== */
.woman3, .woman4, .woman5 {
  width: 60px;
  height: 60px;
}

/* ===== 女性画像 ===== */
.woman-image {
  width: 500px;
  height: 500px;
  background-image: url('images/womanA1png.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  order: 5;
  margin-top: 0px;
  margin-bottom: 0;
  align-self: flex-start; /* flex内で横中央 */
  margin-left: 100px;  
  position: relative;
}

/* ===== 吹き出し ===== */
.fukidashi{
  font-size: 23px;
  position: relative;
  top: auto;
  left: 300px;
  transform: none;
  margin-top: 5px;
  width: 55%;
  padding-right: 0;
}

.fukidashi .mobile-br{
  display: block;
}

.futoji{
  font-size:23px;
}

/* ===== キラキラ装飾 ===== */
.kirakira1 {
  position: absolute;
  top: 5px;
  left: 90px;
  width: 60px;
  height: 60px;
}

.kirakira2 {
  position: absolute;
  bottom: 10px;
  right: 80px;
  width: 60px;
  height: 60px;
}

/* ===== 非表示設定 ===== */
.sankaku .pc-text { display: none; }
.sankaku .mobile-text { display: inline-block; margin: 0; padding:0; line-height:1;}
.before-container.pc-only,
.after-container.pc-only { display: none; }


/* ===== womanB 全体 ===== */
.womanB {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 横中央 */
  justify-content: center; /* 縦中央（画面全体で中央にしたい場合） */
  gap: 10px;               /* 子要素間の間隔 */
  width: 100%;
  min-height: auto;       /* 画面全体に広げる */
  margin: 0 auto;
}

/* 子要素共通設定 */
.womanB > * {
  width: 90%;
  max-width: 400px;
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
}


/* ===== sankaku ===== */
.sankaku2 {
  display: inline-block;
  margin: 0px auto;
  font-size:30px;
}

/* ===== Before / After (スマホ用) ===== */
.before-container2.mobile-only{
  display: inline-block;
  margin: 30px auto 20px;
  width:300px;
}

.after-container2.mobile-only {
  display: block !important; /* displayが上書きされても出す */
  margin: 10px auto !important; /* 左右中央 */
  width: 300px;
  text-align: center;
  align-self: center; /* flex内でも中央 */
  left: auto;        /* 左ずれ解除 */
  position: relative; /* 必要であれば */
}


.before-after2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Before/Afterの表示順 */
.before-container2.mobile-only { order: 1; }
.shikaku2 { order: 2; }
.sankaku2 { order: 3; }
.after-container2.mobile-only { order: 4; }


/* ===== 女性画像 ===== */
.woman-image2 {
  width: 500px;
  height: 500px;
  background-image: url('images/womanB1.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  order: 5;
  margin-top: 0px;
  margin-bottom: 0;
  align-self: flex-start; /* flex内で横中央 */
  margin-left: 100px;  
  position: relative;
}

/* ===== 吹き出し ===== */
.fukidashi2{
  font-size: 23px;
  position: relative;
  top: auto;
  left: 300px;
  transform: none;
  margin-top: 5px;
  width: 55%;
  padding: 20px;

}

.fukidashi2 .mobile-br{
  display: block;
}

.futoji2{
  font-size:23px;
}

/* ===== キラキラ装飾 ===== */
.kirakira3 {
  position: absolute;
  top: 5px;
  left: 70px;
  width: 60px;
  height: 60px;
}

.kirakira4 {
  position: absolute;
  bottom: 10px;
  right: 60px;
  width: 60px;
  height: 60px;
}

/* ===== 非表示設定 ===== */
.sankaku2 .pc-text { display: none; }
.sankaku2 .mobile-text { display: inline-block; margin: 0; padding:0; line-height:1;}
.before-container2.pc-only,
.after-container2.pc-only { display: none; }

  
/* ===== womanB 全体 ===== */
.womanC {
  display: flex;
  flex-direction: column;
  align-items: center;     /* 横中央 */
  justify-content: center; /* 縦中央（画面全体で中央にしたい場合） */
  gap: 10px;               /* 子要素間の間隔 */
  width: 100%;
  min-height: auto;       /* 画面全体に広げる */
  margin: 0 auto;
}

/* 子要素共通設定 */
.womanC > * {
  width: 90%;
  max-width: 400px;
  text-align: center;
  margin: 0 auto;
  font-size: 20px;
}


/* ===== sankaku ===== */
.sankaku3 {
  display: inline-block;
  margin: 0px auto;
  font-size:30px;
}

/* ===== Before / After (スマホ用) ===== */
.before-container3.mobile-only{
  display: inline-block;
  margin: 30px auto 20px;
  width:300px;
}

.after-container3.mobile-only {
  display: block !important; /* displayが上書きされても出す */
  margin: 10px auto !important; /* 左右中央 */
  width: 300px;
  text-align: center;
  align-self: center; /* flex内でも中央 */
  left: auto;        /* 左ずれ解除 */
  position: relative; /* 必要であれば */
}


.before-after3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Before/Afterの表示順 */
.before-container3.mobile-only { order: 1; }
.shikaku3 { order: 2; }
.sankaku3 { order: 3; }
.after-container3.mobile-only { order: 4; }


/* ===== 女性画像 ===== */

.w-wrapper.mobile-only {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.woman-image-mobile {
  position: static;  /* default */
  width: 80%;
  height: auto;
  display: block;
}

img {
  display: block;     /* inline-blockの余白を消す */
  margin: 0;
  padding: 0;
}

.fukidashi3 {
  position: absolute;
  top: 30%;      /* 顔にかぶらない位置に調整 */
  left: 65%;     /* 画像の右寄り */
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;     /* ← margin-left いらない */
  padding-right: 5px;
  font-size:23px;
}




.fukidashi3 .mobile-br{
  display: block;
}

.futoji3{
  font-size:23px;
}

/* ===== キラキラ装飾 ===== */
.kirakira5 {
  position: absolute;
  top: 5px;
  left:180px;
  width: 60px;
  height: 60px;
}

.kirakira6 {
  position: absolute;
  bottom: 10px;
  right: 330px;
  width: 60px;
  height: 60px;
}

/* ===== 非表示設定 ===== */
.sankaku3 .pc-text { display: none; }
.sankaku3 .mobile-text { display: inline-block; margin: 0; padding:0; line-height:1;}
.before-container3.pc-only,
.after-container3.pc-only { display: none; }
.woman-image3.pc-only{display: none !important;}  

.price-container,.price-container2{
  width: 70%;
}

}

/* タブレット用：iPad Pro */
@media (min-width: 940px) and (max-width: 1024px) {

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 横スクロールを強制的に隠す */
}

.yellow{
  padding:120px 50px;
}


.container4,.container5{
  margin: 50px auto 50px;
}

  .container2 {
    max-width: 900px;   /* 必要に応じて調整可能 */
    margin: 0 auto;     /* 中央寄せ維持 */
    padding: 60px;      /* 画面幅に応じて余白を縮小 */
    border-radius: 8% 8%; /* 画面サイズに合わせて丸みを微調整 */
    background-size: 70%;  /* 背景画像も少し縮小 */
  }
  

  .online {
  padding: 20px 20px;
}

.pc-woman{
    bottom: -280px;
    left: 20%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
}

.pc-woman2{
    bottom: -280px;
    right: -15%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
}

.pc-woman3 {
    bottom: -300px;
    left: 20%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
}

.fukidashi,.fukidashi2{
  width: 70%;
}

.fukidashi2,.fukidashi3{
  margin-right: 50px;
}

.fukidashi3{
width: 60%;
}

.woman-image,.woman-image2,.woman-image3.pc-only{
  right:50px;
}

.fukidashi::after,
.fukidashi2::after,
.fukidashi3::after {
  content: "";
  position: absolute;
  top: px;        /* 吹き出し下端からの距離をマイナスで下に */
  left: -20px;         
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 15px solid white; /* 頂点が左に向く */
}





.kirakirawoman {
  width:100%;
}

.price-container,.price-container2{
  width:70%;
}


}


@media screen and (max-width: 1366px) {
  .container2::after {
    border-left: 160px solid transparent;
    border-right: 160px solid transparent;
  }
}

/* タブレット（1024px以下）でもさらに縮小 */
@media screen and (max-width: 1024px) {
  .container2::after {
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
  }

  }