/* --------------------
   ベーススタイル
-------------------- */
body {
  font-family:'Zen Maru Gothic', sans-serif;
  line-height: 1.6;
  margin: 0;
  color: #333;
  background-color: #FAF2F5;
}

html {
  scroll-behavior: smooth;
}


img {
    max-width: 100%;
    height: auto;
}

.container {
  width: 95%;
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 8px;
  padding-right: 8px;
}

section {
  padding: 50px 0;
}

.center-text {
  text-align: center;
  margin: 0 auto;
}

.center-img {
  display: flex;
  justify-content: center;
}

.section-title {
  text-align: center;
  font-size: 24px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center, right center;

}

.pink-bg {
  background-color: #F6DCE6;
  border-radius: 20px;
}

.brown-txt {
  color: #553829;
}

.bold-txt {
  font-weight: 700;
}

.courgette {
  font-family: 'Courgette', cursive, serif;
}


/* --------------------
   ボタン設定
-------------------- */

/* ボタン共通設定 */
.btn {
  position: relative;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  background: transparent;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.btn01{
  border: solid 2px #FA381E;
  outline: none;
  font-weight: 500;
  padding: 0.3em;
  margin: 20px;
  background:#fff;
  color:#FA381E;
  box-shadow: 2px 2px rgba(250, 56, 30, 1);
}

/*hoverをした後のボタンの形状*/
.btn01:hover{
   box-shadow: 0 0 rgba(250, 56, 30, 1);
   transform: translateY(5px);
}

.btn01 img {
  width: 30px;
  vertical-align: -0.5em;
  margin-right: 0.2em;
}

.btn01 i {
  margin: 0 0.2em;
}

/* --------------------
   白い背景・赤文字
-------------------- */
.white-cloud1 {
  margin: 0 auto;
  background-image: url(..//images/for-sp/white-cloud1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 87px;
  width: 375px;
  display: flex;
  justify-content: center;
}

.white-cloud1 > p {
  margin: auto;
  width: fit-content;
  display: block;
  margin: auto;
}

.red-bold {
  font-weight: 500;
  color: #FA381E;
}



/* --------------------
   ヘッダー
-------------------- */
.site-header {
  background: transparent; 
  color: #333;
  position: absolute; 
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000; 
  padding: 1rem 0;
}

.site-header .logo {
  font-size: 1.2rem;
  margin: 0;
}

/* ヘッダー */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ハンバーガーアイコン */
.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.8rem; 
  color: #553829;     
  position: fixed; 
  top: 8px;
  left: 8px;
  padding: 0;
}

/* ナビゲーション（デフォルトは非表示） */
.main-nav {
  position: fixed; 
  top: 0;
  right: -100%; /* 画面外に隠す */
  width: 280px;   /* メニューの幅 */
  height: 460px; /* 全高 */
  background: #fff;
  transition: right 0.3s ease;
  z-index: 1000;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
}

.main-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
  padding: 0.3em;
}

.main-nav ul li {
  background-color: #F6DCE6;
}

.main-nav > p {
  margin: 1rem 0;
  font-weight: 700;
  font-size: 12px;
}

.main-nav a {
  color: #333;
  text-decoration: none;
  display: inline-block;
  width: 100%;
}

/* メニューが開いた時 */
.main-nav.open {
  right: 0;
}


/* --------------------
   ヒーローエリア
-------------------- */
.hero {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 90%, #FAF2F5 100%), url("../images/for-sp/background-tulip-sp.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-align: center;
  padding-top: 4rem;
  margin: 0 auto;
  /* -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%); */
  /* mask-image: linear-gradient(to bottom, black 90%, transparent 100%); */
  padding-bottom: 1px;
}

.top-title {
  position: relative;
}

.top-title > div {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  margin-top: -36px;
}

.top-title .h3-style1 {
  font-size: 1.2rem;
  margin: 0;
  -webkit-text-stroke: 1px #553829;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  text-shadow:0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829,0 0 2px #553829;
  font-weight: 900;
}

.top-title .h3-style1 span {
  font-size: 1.4rem;
  color: #F6DCE6;
}

.top-title .h3-style2 {
  color: #fff;
  background-color: #E55C74;
  margin: 0;
  border-radius: 18px;
  padding: 0 0.3em;
  font-size: 2.4rem;
  line-height: 2.4rem;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.4);
  position: absolute;
}

.top-title .h3-style2 span {
  font-size: 1.4rem;
}

.speech {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -16px;
}

.speech i {
  margin: 0 0.2em;
}

.speech::before {
  content: "";
  transform: rotate(60deg);
  box-sizing: border-box;
  background-color: #333;
}

.speech::after {
  content: "";
  transform: rotate(-60deg);
  box-sizing: border-box;
  background-color: #333;
}

.speech1 {
  gap: 0.2em;
  margin: 3.5rem 0 -2.5rem 0;
  font-size: 22px;
  z-index: 10;
  position: relative;
}

.speech1 p {
  margin: 0;
  font-weight: 500;
  color: #553829;
  padding: 0.2em 1em;
  background-image: url(..//images/for-sp/bgd-cloud.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* .speech1::before {
  width: 36px;
  height: 2px;
  background-color: #553829;
}

.speech1::after {
  width: 36px;
  height: 2px;
  background-color: #553829;
} */

.speech2 {
  margin-bottom: 0;
}

.speech2 span {
  font-size: 12px;
}

.speech2::before {
  width: 30px;
  height: 1px;
}

.speech2::after {
  width: 30px;
  height: 1px;
}

.speech3::before {
  width: 30px;
  height: 1px;
}

.speech3::after {
  width: 30px;
  height: 1px;
}

.devide2-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -8px;
  flex-flow: column-reverse;
  margin-bottom: 16px;
}

.hero h2 {
  font-size: 0.9rem;
  text-align: left;
  
  display: inline-block;
  /* line-height: 2em; */
  color: #553829;
  margin-top: -68px;
  margin-bottom: 0;
  z-index: 100;
  font-weight: 500;
}

.hero h2 span {
  /* background-color: rgba(255, 255, 255, 0.7); */
  padding: 0 0.2em;
}

.top-tomoyo {
  width: 30%;
  margin-left: 70%;
}

.top-tomoyo img {
  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.devide2-1 > div {
  display: flex;
  justify-content: center;
  align-items: center;  
}

.devide2-1 > img {
  width: 28%;   
  height: auto;
  object-fit: contain;
}

.top-tomoyo {
  max-width: 160px;
}


/* --------------------
   お悩み
-------------------- */
#worries {
  padding-bottom: 0;
}

.worries-top {
  background-color: #fff;
  border-bottom: solid 1px #ccc;
  border-radius: 20px 20px 50px 50px;
  background-image: url(..//images/for-pc/gray-cloud.png),url(..//images/for-pc/mom020.png),url(..//images/for-pc/mom040.png);
  background-repeat: no-repeat;
  background-size: 100%, 30%, 30%;
  background-position: top, left 60%, right 60%;
  padding: 50px 0;
}

#worries .tomoyofd {
  margin-top: 36px;
}

#worries > .worries-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.worries-container:not(.center) {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.worries-item {
  height: 130px;
  width: 180px;
  text-align: center;
  background-image: url(..//images/for-sp/brown-cloud-01.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: table;        
}

.worries-item > p {
  display: table-cell;     
  vertical-align: middle; 
  text-align:center;
  color: #fff;
}

.worries-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.worries-bottom > p {
  margin-top: 50px;
}

.worries2 {
  border-radius: 50%;
  width: 100%;
  padding-top: 76px;
  background-size: 25%,contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.before-mom {
  background-image:
  url(..//images/for-sp/mom-sad_1.png),
  url(..//images/for-sp/gray-circle-blur.png);
}

.after-mom {
  background-image:
  url(..//images/for-sp/mom050_1.png),
  url(..//images/for-sp/pink-circle-blur.png);
  background-position: 55%, center;
}

.worries2 > div {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin: 0;
  gap: 24px;
}

.worries-item2 {
  width: 150px;
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: table;  
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  background-position: center;
}

.before-mom .worries-item2 {
  background-image: url(..//images/for-sp/cloud-shape_2.png);
}

.after-mom .worries-item2 {
  background-image: url(..//images/for-sp/pink-cloud-02.png);
}

.worries-bottom .center-img img {
  width: 100px;
}

/* --------------------
   どんなママのための講座？
-------------------- */
#services .section-title {
  background-image: url("..//images/for-sp/flower-pink010.png"),url("..//images/for-sp/flower-pink010.png");
}

.services-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1.5rem;
}

.services-container img {
  height: 100px;
  object-fit: contain;
}

.services-container > div {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  width: 180px;
  height: 180px;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}

.services-container > div > p {
  margin-left: 16px;
  margin-right: 16px;
  margin-top: 0;
}

.services-container > div:first-child {
  border-radius: 44% 59% 61% 46% / 68% 66% 33% 36% ;
  margin-top: 30px;
}

.services-container > div:nth-child(2) {
  border-radius: 43% 59% 59% 64% / 40% 55% 40% 72%;
}

.services-container > div:nth-child(3) {
  border-radius: 42% 59% 78% 32% / 49% 79% 37% 57% ;
  margin-left: 30px;
}

/* --------------------
   私が大切にしているもの
-------------------- */
#priority .section-title {
  background-image: url("..//images/for-sp/flower-pink030.png"),url("..//images/for-sp/flower-pink030.png");
}

.priority-boxes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.priority-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 324px;
  margin-top: 36px;
}

.priority-box > div {
  position: relative;
  width: 50%;
}

.priority-box > div > span {
  position: absolute;
  font-family: 'Courgette', cursive, serif;
  font-size: 24px;
  top: -24px;
  left: -18px;
  background-image: url("..//images/for-sp/no_pink-03.png");
  width: 46px;
  height: 46px;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 46px;
}

.priority-box > div > p {
  font-size: 18px;
  font-weight: 500;
}


.priority-box > img {
  max-width: 130px;
  max-height: 130px;
}

.priority-box:nth-child(2) {
  flex-direction: row-reverse;
}

.priority-box:nth-child(3) {
  margin-bottom: 50px;
}

.priority-clouds {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 50px;
}

.priority-clouds > div {
  background-image: url("..//images/for-sp/cloud-shape_3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 0 0.5rem 0.5rem;
}

.priority-clouds > div > span {
  position: absolute;
  font-family: 'Courgette', cursive, serif;
  font-size: 24px;
  background-image: url(..//images/for-sp/no_purple-02.png);
  width: 46px;
  height: 46px;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 46px;
  top: -16px;
}

.priority-clouds > div > h3 {
  font-size: 22px;
  text-align: center;
  margin: 0.5em 0;
}

.priority-clouds > div > p {
  margin: 0.5em 0;
  width: 80%;
  margin: 0 auto;
}

#priority > img {
  margin-top: 50px;
}

#priority {
  padding-bottom: 0;
}

#priority .tomoyofd {
  margin-top: 42px;
}

/* --------------------
   目指すのは"正しさ"ではなく"ちょうどよさ"
-------------------- */
#goal .section-title {
  background-image: url("..//images/for-sp/flower-pink080.png"),url("..//images/for-sp/flower-pink080.png");
}

#goal > .container > p {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 50px;
}

#goal .bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-image: url(..//images/for-sp/mom080_1.png), url(..//images/for-sp/mom090_1.png);
  background-repeat: no-repeat;
  background-position-x: left, right;
  background-position-y: center, center;
  background-size: 25%, 30%
}

#goal .bubbles > div {
  width: 120px;
  height: 120px;
  margin: 0 5%;
}

.bubbles > div {
  display: table;
  background-image: url(..//images/for-sp/bulloon4.png);
  background-repeat: no-repeat;
  background-size: contain;
  font-weight: 500;
}

#goal .bubbles > div:nth-child(3) {
  width: 152px;
  height: 152px;
  margin: -16px 30%;
}

.bubbles > div > p {
  display: table-cell;
  vertical-align: middle; 
  text-align:center;
}

/* --------------------
   嬉しいお声
-------------------- */
#voice .section-title {
  background-image: url("..//images/for-sp/flower-pink040.png"),url("..//images/for-sp/flower-pink040.png");
}

/* スライダー */
.slider1 {
  border: solid 5px #AAB4E6;
  border-radius: 30px;
  margin-top: 50px;
  padding: 0 16px;
}

.slider1 > h4 {
  background-color: #C3CBF3;
  text-align: center;
  font-size: 18px;
  width: 70%;
  margin: 1em auto 0.5em auto;
  line-height: 32px;
  border-radius: 5px;
}

.slider1 .slider-container {
  border: solid 5px #AAB4E6;
  border-radius: 30px;
  margin-top: 50px;
  padding: 0 16px;
}

.swiper {
  padding: 16px !important;
}

/* スライダー用に足したところ */
.swiper-slide {
  background-color: #F6DCE6;
  border-radius: 5px;
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
  margin-top: 1em;
  margin-bottom: 1em;
}

.swiper-slide .image-title {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1em;
  margin: 0 1em;
  font-size: 16px;
}

.swiper-slide .image-title span {
  font-size: 14px;
  font-weight: 500;
}

.swiper-slide .image-title img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.swiper-slide .image-title h5 {
  font-size: 16px;
}

.slider1-1 .swiper-slide .image-title h5 {
  width: 80%;
}

.swiper-slide .white-box {
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  margin: 0.8rem;
  padding: 0.2em 0.5em;
}

.swiper-slide .white-box2 {
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  padding: 0.2em 0.5em;
  margin-bottom: 1rem;
}

.swiper-slide .white-box span, 
.swiper-slide .white-box2 span {
  position: absolute;
  top: -0.8em;
  font-size: 16px;
  font-family: 'Courgette', 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  color: #553829;
}

.swiper-slide .white-box span:nth-child(2), 
.swiper-slide .white-box2 span:nth-child(2) {
  left: 4em;
}

.swiper-slide .white-box.after span {
  font-size: 24px;
}

.councelee-slider .white-box span,
.councelee-slider .white-box2 span {
  font-style: italic;
}

/* スライダー用に足したところここまで */

.triangle {
  height: 20px;
  width: 36px;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  margin:  auto auto;
  position: relative;
  z-index: 100;
}

.purple {
  background-color: #C3CBF3;
}

.slider1-1 .slider-box .image-title span {
  margin-top: 0.5rem;
  display: inline-block;
}

/* スライダーのナビボタン（色など調整） */
.swiper-button-prev,
.swiper-button-next {
  width: 40px !important;  
  height: 40px !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 左矢印ボタン */
.swiper-button-prev {
  background-image: url("..//images/icon/arrow-circle-left.svg"); 
  left: 4px !important;
}

/* 右矢印ボタン */
.swiper-button-next {
  background-image: url("..//images/icon/arrow-circle-right.svg"); 
  right: 4px !important;
}

/* Swiperデフォルトの矢印アイコンを消す */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* Swiperが描画時にstyle="height: XXXpx;"を付与してもSafariが再計算しないようにする */



/* --------------------
   講師の実績
-------------------- */
#achievement .section-title {
  background-image: url("..//images/for-sp/flower-pink050.png"),url("..//images/for-sp/flower-pink050.png");
}

.red-big, .red-mid {
  color: #FA381E;
  font-weight: 900;
}

.red-mid {
  font-size: 18px;
}

#achievement .container > p {
  text-align: center;
  font-weight: 500;
  color: #553829;
}

#achievement .container > p .red-big {
  font-size: 48px;
  margin-left: 0.5rem;
}

#achievement .container > p .red-mid {
  font-size: 18px;
  margin-right: 0.5rem;
}

#achievement .bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#achievement .bubbles > div:first-child {
  width: 214px;
  height: 214px;
  font-size: 20px;
}

#achievement .bubbles > div:not(:first-child) {
  width: 127px;
  height: 127px;
}

#achievement .bubbles > div:nth-child(2) {
  margin-top: -8px;
}

#achievement .bubbles > div:nth-child(3) {
  margin-left: 48px;
  margin-top: 16px;
}

#achievement .bubbles > div:nth-child(4) {
  margin-top: -56px;
}

#achievement .bubbles > div:first-child .red-big {
  font-size: 96px;
  display: inline-block;
  line-height: 84px;
}

#achievement .bubbles > div:first-child .red-mid {
  font-size: 48px;
}

/* --------------------
   講座内容とスケジュール
-------------------- */
#course-detail .section-title {
  background-image: url("..//images/for-sp/flower-pink060.png"),url("..//images/for-sp/flower-pink060.png");
}

.pink-table {
  border-top: solid 5px #AAB4E6;
  background-color: #fff;
  border-collapse: collapse;
  border-spacing: 0;
  width: 333px;
  margin: 36px auto 0 auto;
}

.pink-table thead tr,.pink-table thead th {
  background-color: #F6DCE6;
  font-size: 16px;
  height: 36px;
}

.pink-table tbody {
  font-size: 18px;
  font-weight: 700;
}

.pink-table tbody th, .pink-table tbody td {
  padding: 0.5em;
  text-align: center;
}

#course-detail .container {
  max-width: 1200px;
}

#course-detail .swiper-slide {
  position: relative;
  padding-top: 1px;
  padding-bottom: 1rem;
}

#course-detail .swiper-slide .purple-no {
  font-family: 'Courgette', 'Zen Maru Gothic', sans-serif;
  position: absolute;
  background-image: url(..//images/for-sp/no_purple-02.png);
  font-size: 32px;
  width: 66px;
  height: 66px;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  top: -54px;
  left: -12px;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#course-detail .swiper-slide .purple-no > span {
  font-size: 14px;
  font-weight: 700;
}

#course-detail .swiper-slide .round-title {
  margin: 1em auto;
  background-color: #fff;
  width: 240px;
  border-radius: 68% 77% 43% 71% / 63% 83% 65% 78% ;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#course-detail .swiper-slide .round-title > h5 {
  margin: 0;
  padding-top: 20px;
  font-size: 18px;
}

#course-detail .swiper-slide .round-title > img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin-top: 16px;
}

#course-detail .swiper-slide ul {
  font-size: 16px;
  text-align: left;
  width: fit-content;
  margin: 0 auto;
  padding: 0;
}

.marker-ring {
  list-style: none; 
}

.marker-ring li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.6;
}

.marker-ring li::before {
  content: "";
  position: absolute;
  left: 0;               
  top: 50%;
  transform: translateY(-50%); /* 縦方向中央に配置 */
  width: 10px;           /* リングの大きさ */
  height: 10px;
  background: #C3CBF3;    
  border-radius: 50%;    /* 丸にする */
  box-sizing: border-box;
}

.swiper--sp-only .swiper-wrapper {
  flex-direction: column;
}

.mom-goal {
  display: flex;
  border: solid 1px #E55C74;
  position: relative;
  margin: 1rem 0.4rem 0 0.4rem;
  border-radius: 8px;
  justify-content: center;
  padding-top: 0.8em;
  align-items: center;
}

.mom-goal img {
  width: 60px;
  object-fit: contain;
}

.mom-goal p {
  font-size: 16px;
  line-height: 1.4em;
  margin: 0.5em;
  color: #553829;
}

.mom-goal span {
  position: absolute;
  font-family: 'Courgette', cursive, serif;
  color: #553829;
  top: 0;
  left: 10%;
}
  

/* --------------------
   ご利用方法
-------------------- */
#howto-use .section-title {
  background-image: url("..//images/for-sp/flower-pink070.png"),url("..//images/for-sp/flower-pink070.png");
}

.white-cloud2 {
  background-image: url(..//images/for-sp/white-cloud02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.white-cloud2 span {
  position: absolute;
  font-family: 'Courgette', cursive, serif;
  font-size: 24px;
  background-image: url(..//images/for-sp/no_purple-02.png);
  width: 46px;
  height: 46px;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 46px;
  top: -8px;
  left: 0;
  color: #553829;
}

.white-cloud2 h3 {
  font-size: 18px;
  margin-top: 1.2em;
  margin-bottom: 0;
}

.white-cloud2 p {
  font-size: 16px;
  width: 88%;
}

#howto-use .triangle {
  margin: 0.5rem auto;
}

#howto-use .btn01 {
  margin-top: 0;
}


/* --------------------
   あなたらしく全力で
-------------------- */
#last-message .section-title {
  background-image: url("..//images/for-sp/flower-pink020.png"),url("..//images/for-sp/flower-pink020.png");
}

#last-message .speech3 {
  font-size: 14px;
}

#last-message .center-text {
  margin-top: 42px;
  margin-bottom: 42px;
}

#last-message .container > img {
  width: 150px;
  margin: 0 auto 1rem auto;
  display: block;
}

#last-message > .center-text {
  margin-bottom: 0;
  font-weight: 400;
}

.wide-image {
  width: 100%;
}

.footer-image {
  width: 270px;
  display: block;
  margin: 0 auto;
}

/* --------------------
   CTA
-------------------- */
.cta-btn{
  text-align: center;
  margin-top: 50px;
}


/* --------------------
   トップに戻るボタン
-------------------- */
/* ページトップリンク
-ページの指定の高さを超えたら下から出現- */
.go-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  visibility: hidden; 
  opacity: 0;  
  z-index: 1000;      
}

.go-to-top a {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:all 0.3s;
  width: fit-content;
  background-color: rgba(255,255,255,0.9);
  border-radius: 100%;
  padding: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: #553829;
  width: 64px;
  height: 64px;
}

.go-to-top a:hover {
  transform:scale(1.1);
}

.go-to-top img {
  width: 50px;
}

/*上に上がる動き*/
.go-to-top.UpMove{
	animation: UpAnimeGtt 0.5s forwards;
  
}

@keyframes UpAnimeGtt{
  from {
    opacity: 0;
    visibility: hidden;
	  transform: translateY(180px);
  }
  to {
    opacity: 1;
    visibility: visible;
	  transform: translateY(0);
  }
}

/*下に下がる動き*/

.go-to-top.DownMove{
	animation: DownAnimeGtt 0.5s forwards;
}
@keyframes DownAnimeGtt{
  from {
  	opacity: 1;
	  transform: translateY(0);
  }
  to {
  	opacity: 1;
	  transform: translateY(180px);
  }
}


/* --------------------
   フッター
-------------------- */
.site-footer {
    background: #F6DCE6;
    text-align: center;
    padding: 0;
}

.site-footer p {
  margin: 0;
  height: 16px;
  font-size: 10px;
}

/* --------------------
   SP向け調整（767px以下）
-------------------- */
@media (max-width: 767px) {

  .for-pc {
    display: none;
  }
}

/* --------------------
   PC向け調整（768px以上）
-------------------- */
@media (min-width: 768px) {

  p {
    font-size: 1.1rem;
  }

  .for-sp {
    display: none;
  }

  section {
    padding: 80px 0;
  }

  /* .features .container,
  .services .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
  } */

  .feature-item {
      margin-bottom: 0;
  }

  .margin-50pc {
    margin-top: 50px;
  }

  .section-title {
    width: fit-content;
    margin: 1em auto 2em auto;
    padding: 0 3rem;
    background-size: 24px;
    font-size: 32px;
  }

  .tomoyofd {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: 90%;
    max-width: 700px;
  }

  .container > p {
    text-align: center;
  }

  .footer-image {
    max-width: 500px;
  }

  /* --------------------
   PC用（768px以上）ヒーローエリア
-------------------- */
  .menu-redbook {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family:'Zen Maru Gothic', sans-serif;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 100%;
    padding: 8px;
    width: 64px;
    height: 64px;
  }

  .menu-redbook > p {
    font-size: 12px;
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 700;
    color: #553829;
  }

  .menu-redbook > img {
    width: 50px;
  }

  .redbook {
    width: 50px;
  }

  .hamburger {
    top: 1rem;
    right: 1rem;
    left: auto;
    z-index: 2000;
    padding: 0;
  }

  .hero {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 90%, #FAF2F5 100%), url("../images/for-pc/background-tulip pc.jpg");
    /* background-image: url("../images/for-pc/background-tulip pc.jpg"); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 0;
    position: relative;
  }

  .hero h1 img {
    max-width: 780px;
    width: 90%;
    margin-top: -64px;
    margin-bottom: -64px;
  }

  .hero h2 {
    font-size: 1.2rem;
    margin-top: -120px;
  }

  .hero h2 span {
    padding: 0;
  }
 
  .speech1 {
    font-size: 24px;
  }

  .speech1 p {
    font-size: 28px;
    padding: 0.5em 1em;
  }

  .top-title > div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top-title .h3-style1 {
    font-size: 2rem;
    margin: 0;
  }

  .top-title .h3-style1 span {
    font-size: 2.8rem;
  }

  .top-title .h3-style2 {
    border-radius: 28px;
    left: 52%;
    top: 88%;
    font-size: 56px;
    line-height: 56px;
    position: static;
  }

  .top-title .h3-style2 span {
    font-size: 32px;
  }

  .devide2-1 {
    display: flex;
    align-items: center;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -16px;

  }

  .devide2-1 > div {
    width: 74%;
    display: flex;
    justify-content: center;
    align-items: center;  
  }

  .devide2-1 > img {
    object-fit: contain;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20%;
    max-width: 250px;
  }

  /* --------------------
   PC用ボタン
-------------------- */

  .speech2 span {
    font-size: 14px;
  }

  .btn01 {
    font-size: 22px;
    font-weight: 700;
  }

  .btn01 img {
    width: 34px;
    vertical-align: -0.4em;
  }

  .cta-btn {
    margin-top: 90px;
  }


/* --------------------
   PC用トップに戻るボタン
-------------------- */

  .go-to-top img {
    width: 60px;
  }

/* --------------------
   PC用お悩み
-------------------- */
  #worries {
    margin-top: 120px;
  }

  .worries-item {
    height: 156px;
    width: 220px;
  }

  .worries-item > p {
    font-weight: 500;
  }

  .worries-top .worries-container {
    max-width: 1100px;
  }

  .worries-container.center {
    margin: -20px 0;
  }

  .worries-top {
    background-size: 100%, 20%, 20%;
    background-position: top, 15% 68%, 85% 68%;
  }

  .worries2 {
    margin: 120px auto;
    background-size: contain, contain;
    gap: 60px;
    padding-top: 94px;
    max-width: 1100px;
  }

  .worries-item2 {
    font-size: 1.1rem;
    width: 250px;
  }

  .white-cloud1 {
    margin: 50px auto;
  }

  .worries-bottom .center-img img {
    width: 200px;
  }

  #worries .tomoyofd {
    margin-top: 110px;
  }

  .after-mom {
    margin-top: 120px;
  }

  /* --------------------
   PC用どんなママのための講座？
  -------------------- */
  .services-container {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .services-container > div {
    width: 250px;
    height: 250px;
  }

  .services-container > div:first-child {
    margin-top: 0;
  }

  .services-container > div:nth-child(3) {
    margin-left: 0;
  }

  /* --------------------
   PC用私が大切にしているもの
  -------------------- */

  .priority-box:nth-child(2) {
    flex-direction: row;
  }

  .priority-boxes {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .priority-box {
    max-width: none;
    justify-content: center;
    margin-bottom: 50px;
    gap: 1rem;
  }

  .priority-box > div {
    background-image: url(..//images/for-sp/white-cloud02.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 1rem;
  }

  .priority-box:first-child {
    width: 54%;
  }

  .priority-box:nth-child(2) {
    width: 48%;
  }

  .priority-box:nth-child(3) {
    width: 48%;
  }

  .priority-box > div > span {
    top: -12px;
    left: -12px;
  }

  .priority-clouds {
    gap: 2.5rem;
    margin-top: 80px;
    margin-bottom: 80px;
  }

  .priority-clouds > div {
    width: 704px;
    padding: 1em 0 1.8rem 0;
    margin-right: auto;
    margin-left: auto;
  }

  .priority-clouds > div > p {
    text-align: center;
  }

  .priority-clouds > div > span {
    top: 0;
  }

 /* --------------------
   PC用目指すのは正しさではなくちょうど良さ
  -------------------- */

  #goal .bubbles {
    height: 500px;
    background-size: 18%, 20%;
    justify-content: center;
  }


  #goal .bubbles > div {
    width: 180px;
    height: 180px;
    margin: 0 10%;
  }

  #goal .bubbles > div:nth-child(3) {
    width: 220px;
    height: 220px;
    margin: -50px 30%;
  }

  /* --------------------
   PC用嬉しいお声をいただいています
  -------------------- */
  #voice .container {
    max-width: 1200px;
  }

  .slider-conteiner {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 1em 0;
  }

  .slider1 .slider-box {
    width:45%;
  }

  .slider1 .right-box {
    width: 80%;
  }

  .slider1 > h4 {
    line-height: 56px;
    margin-bottom: 1.5em;
    font-size: 24px;
  }

  .slider-box .image-title {
    min-height: 140px;
  }

  .swiper-slide .image-title {
    min-height: 140px;
  }

  .swiper {
    padding: 16px 24px !important;
  }

  .slider1-1 .white-box.before {
    height: 180px;
  }

  .slider1-1 .white-box.after {
    height: 436px;
  }

  .slider1-2 .white-box2 {
    height: 154px;
  }

  .slider1-2 .white-box {
    height: 324px;
  }

  /* --------------------
   PC用講師の実績
  -------------------- */
  #achievement .bubbles {
    justify-content: center;
    gap: 3em;
    margin-top: 50px;
  }

  #achievement .bubbles > div:first-child {
    width: 300px;
    height: 300px;
    font-size: 24px;
  }

  #achievement .bubbles > div:not(:first-child) {
    width: 200px;
    height: 200px;
  }

  #achievement .bubbles > div:nth-child(3) {
    margin-left: 0;
    margin-top: 64px;
  }

  .bubbles > div > p {
    font-size: 1.4rem;
    color: #553829;
  }

  .red-mid {
    font-size: 2rem;
  }

  #achievement .bubbles > div:first-child .red-big {
    font-size: 120px;
  }

  #achievement .container > p {
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: #553829;
  }

  #achievement .container > p .red-big {
    font-size: 56px;
    margin-left: 0.5rem;
  }

  #achievement .container > p .red-mid {
    font-size: 24px;
    margin-right: 0.5rem;
  }

  /* --------------------
   PC講座内容とスケジュール
  -------------------- */
  .pink-table {
    width: 76%;
    max-width: 600px;
    margin-top: 56px;
  }

  .pink-table tbody th, .pink-table tbody td {
    height: 2.8em;
    font-size: 20px;
  }

  .pink-table thead tr, .pink-table thead th {
    height: 2.4em;
    font-size: 24px;
  }

  .slider1 {
    margin-top: 120px;
  }

  #course-detail .swiper-slide {
    width: 45%;
    margin: 0;
  }

  .triangle2 {
    height: 36px;
    width: 20px;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    z-index: 100;
  }

  .swiper--sp-only .swiper-wrapper {
    flex-direction: row;
    gap: 36px 0;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  /* --------------------
   PCご利用方法
  -------------------- */

  .white-cloud2 {
    width: 540px;
    margin: 0 auto;
  }

  .white-cloud2 p {
    text-align: center;
  }

  /* --------------------
   PCあなたらしく全力で
  -------------------- */
  #last-message .wide-image {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

/* --------------------
  PC※大画面のみ
-------------------- */
/* -------------------- 
  講座内容とスケジュール PC※大画面
-------------------- */

@media (min-width: 1125px) {
  #course-detail .swiper .swiper-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    transform: none !important;
    transition: none !important;
    justify-content: space-around;
    align-items: center;
    max-width: 1100px;
    margin: 24px auto;
  }

  #course-detail .swiper .swiper-slide {
    width: 23% !important; /* 2枚並びの場合は調整 */
    height: auto !important;
    margin-right: 0 !important;
  }

  /* ナビボタン非表示 */
  #course-detail .swiper .swiper-button-next,
  #course-detail .swiper .swiper-button-prev {
    display: none !important;
  }

/* -------------------- 
  嬉しいお声 PC※大画面
-------------------- */

  .slider1-1 .white-box.before {
    height: 126px;
  }

  .slider1-1 .white-box.after {
    height: 296px;
  }

  .slider1-2 .white-box2 {
    height: 92px;
  }

  .slider1-2 .white-box {
    height: 240px;
  }
}

@media (max-width: 1124px) {
  .for-widepc {
    display: none;
  }
}