@charset "utf-8";
/* CSS Document */
.pc-pagination {
  display: block;
}
.sp-pagination {
  display: none;
}
/*背景色*/
.bg_white {
  background-color: #ffffff;
  color: #888;
}
.bg_brown {
  background-color: #a75a1e;
  color: #fff;
}
.bg_green {
  background-color: #2cb5a9;
  color: #fff;
  position: relative;
  z-index: 1;
  padding: 0px 0 100px;
}
.bg_orange {
  background-color: #eda02f;
  color: #fff;
}
.bg_deepBlue {
  background-color: #006e94;
  color: #fff;
}
.bg_skyBlue {
  background-color: #00b8ee;
}
.bg_lightskyblue {
  background-color: #ccf1fc;
}
.bg_lightgreen {
  background-color: #9ece44;
  color: #fff;
}
.bg_icegreen {
  background-color: #eef5dc;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 100px;
}

.bg_palegreen {
  background-color: #e5f0cb;
}
.bg_lightpurple {
  background-color: #d6d5fa;
}
.bg_iceblue {
  background-color: #d5f0ee !important;
  position: relative;
  z-index: 1;
  /* 上下の余白調整：波の引き上げ分を考慮してpadding-topを確保 */
  padding: 40px 0 100px;
}
.bg_pink, .single-schedule main {
  background-color: #ffd7e6 !important
}
main.contactForm {
  background-color: #eeeeef;
}
.spacer.blueTop {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  margin-top: -100px; /* 100px引き上げて上の濃い緑と重ねる */
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  background-position: center bottom;
  /* SVGのfillを新しい色 #d5f0ee に変更 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%23d5f0ee"></path></svg>') !important;
}

/* 薄い青緑(#d5f0ee)から薄い緑(#eef5dc)への切り替え波 */
.spacer.icegreenTop {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  /* 自身の高さ分だけ上に引き上げ、上の背景(#d5f0ee)と重ねる */
  margin-top: -100px;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  background-position: center bottom;
  /* fillを下側の色 #eef5dc に設定 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%23eef5dc"></path></svg>') !important;
}
/* 薄い青緑(#d5f0ee)から薄い緑(#eef5dc)への切り替え波 */
.spacer.icegreenTop {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  /* 自身の高さ分だけ上に引き上げ、上の背景(#d5f0ee)と重ねる */
  margin-top: -100px;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  background-position: center bottom;
  /* fillを下側の色 #eef5dc に設定 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%23eef5dc"></path></svg>') !important;
}
/* 薄い青緑(#e5f0cb)から薄い緑(#ffd7e6)への切り替え波 */
.spacer.bg_pinkTop {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  margin-top: -100px;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  background-position: center bottom;
  /* 上側：淡い緑(#e5f0cb)、下側：ピンク(#ffd7e6) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 55 Z" fill="%23e5f0cb"></path><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%23ffd7e6"></path></svg>') !important;
}
.bg_brightgreen {
  background-color: #a9ce52 !important;
  color: #fff; /* 背景が濃くなるので文字を白に */
  position: relative;
  z-index: 1;
  padding: 40px 0;
}
/* 薄い緑(#eef5dc)から鮮やかな黄緑(#a9ce52)への切り替え波 */
.spacer.brightgreenTop {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  /* 自身の高さ分だけ上に引き上げ、上の背景(#eef5dc)と重ねる */
  margin-top: -100px;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  background-position: center bottom;
  /* fillを下側の色 #a9ce52 に設定 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%23a9ce52"></path></svg>') !important;
}
/* 白から緑への境界（色は青にする） */
.layer1 {
  /* 高さを固定（または親の何%にするか）指定する */
  height: 200px;
  width: 100%;
  /* 背景の設定 */
  background-repeat: no-repeat;
  background-position: center bottom; /* 中央下を基準に固定 */
  /* ポイント：coverをやめて、元のサイズ（1980px）を維持する */
  background-size: 1980px 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: hidden; /* はみ出し分をカット */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 200"><path d="M1980,200V13.46S1690.54-7.48,1299.3,2.88c-391.25,10.36-479.54,33.51-780.3,43.95C218.25,57.27,0,46.29,0,46.29v153.71" fill="%232cb5a9"></path></svg>');
}
/* セクション2から3への境界（色は #eef5dc ） */
.layer2 {
  aspect-ratio: 1980/200;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  /* 指定されたSVG形状を使用 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 200"><path d="M1980,200V13.46S1690.54-7.48,1299.3,2.88c-391.25,10.36-479.54,33.51-780.3,43.95C218.25,57.27,0,46.29,0,46.29v153.71" fill="%239ece44"></path></svg>');
}
/* セクション2から3への境界（色は #9ece44 ） */
/* 共通設定（コードをスッキリさせるため） */
.layer3, .greenTop {
  height: 100px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 1980px 100px;
  position: absolute;
  left: 0;
  overflow: hidden;
}
/* 上側の波（薄い緑） */
.layer3 {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  margin-top: -100px;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  background-position: center bottom;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%23eef5dc"></path></svg>') !important;
}
/* 下側の波（濃い緑） */
#reason .spacer.greenTop {
  display: block;
  position: relative; /* 浮かさない */
  width: 100%;
  height: 100px;
  margin-top: -100px; /* 波の高さ分、上に引き上げて背景を繋げる */
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  /* 中央を基準に配置することで、左右が均等にカットされます */
  background-position: center bottom;
  /* Aboutセクションの末尾の波。色は濃い緑 #2cb5a9 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%232cb5a9"></path></svg>') !important;
}
/* 新しい背景色（深い緑） */
.bg_deepgreen {
  background-color: #2cb5a9 !important;
  color: #fff;
  position: relative;
  z-index: 1;
  padding: 40px 0 0;
}

#home #new-green-section.bg_deepgreen {
    padding-bottom: 80px;
}

/* 黄緑(#a9ce52)から深い緑(#2cb5a9)への切り替え波 */
.spacer.deepgreenTop {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  /* 自身の高さ分だけ上に引き上げ、上の黄緑背景と重ねる */
  margin-top: -100px;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  background-position: center bottom;
  /* fillを下側の色 #2cb5a9 に設定 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%232cb5a9"></path></svg>') !important;
}
/* 白(#ffffff)から薄い緑(#eef5dc)への切り替え波 */
.spacer.lightGreenWave {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  /* 上の白い背景と重ねるために調整 */
  margin-top: -100px;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  background-position: center bottom;
  /* fillを切り替え先の背景色 #eef5dc に設定 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%23eef5dc"></path></svg>') !important;
}
/* 背景色（薄い緑）*/
.bg_icegreen_alt {
  background-color: #eef5dc !important;
  position: relative;
  z-index: 1;
  padding: 40px 0 100px;
}
#home #next-content-section.bg_icegreen_alt{
    padding-bottom: 0;
}

/* 背景色（ピンク） */
.bg_pink_alt {
  background-color: #ffd7e6 !important;
  position: relative;
  z-index: 1;
  padding: 40px 0 100px;
}
/* 深い緑(#2cb5a9)から薄い緑(#eef5dc)への切り替え波 */
.spacer.icegreenTop_alt {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  /* 自身の高さ分だけ上に引き上げ、上の深い緑背景と重ねる */
  margin-top: -100px;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  /* 中央を基準に配置することで、左右が均等にカットされます */
  background-position: center bottom;
  /* fillを下側の色 #eef5dc に設定 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 100 L 0 100 Z" fill="%23eef5dc"></path></svg>') !important;
}
.spacer.lightGreenToWhite {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  /* 上の要素（lightGreenToWhiteセクション）の背景色と繋げるため */
  margin-top: 0;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 100.5% 100px;
  /* 中央を基準に配置することで、左右が均等にカットされます */
  background-position: center top;
  /* SVGパス: 上側を #eef5dc で塗りつぶし、下側を透明（白背景が見える状態）に */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1980 100" preserveAspectRatio="none"><path d="M -1643.4 55 Q -1395.9 55 -1148.4 27.5 Q -653.4 -27.5 -158.4 27.5 Q 89.1 55 336.6 55 Q 584.1 55 831.6 27.5 Q 1326.6 -27.5 1821.6 27.5 Q 2069.1 55 2316.6 55 L 1980 0 L 0 0 Z" fill="%23eef5dc"></path></svg>') !important;
}
/* 隙間防止 */
#next-content-section {
  margin-top: -1px;
}
/* 隙間対策：セクションの繋ぎ目をわずかに重ねる */
#new-green-section {
  margin-top: -1px;
}
/*ページ毎の背景色*/
.page-plan main, .page-rule main, .page-privacy main, .page-terms main, .page-operating main, .page-operating main, .page-topicslist main, .page-maintenance main, .single main,.error404 main {
  background-color: #a9ce52;
}
.page-about main, .page-flow main {
  background-color: #2eb6aa;
}
.page-pecs main {
  background-color: #d6d5fa;
}
.page-what main, .page-faq main {
  background-color: #eef5dc;
}
.page-corporate main, .parent-corporate main {
  background-color: #00b8ee;
}
.page-distribution main .wallpaper {
  background-color: #bfe9e5;
}
.single-latest main {
  background-color: #bfe9e5;
}
.single-recommended main {
  background-color: #e5f0cb;
}
.page-individual main {
  background-color: #eda02f;
}
/*ページ毎のh1*/
#under main h1 {
  display: table;
  margin: 0;
  text-align: left;
  font-size: 3rem;
  letter-spacing: 0.3em;
  margin-bottom: 60px;
  padding-left: 60px;
}
#under main h1 div {
  display: block;
  text-align: center;
  font-size: 1.4rem;
  margin-top: 1em;
  letter-spacing: normal;
  font-weight: normal;
}
.page-rule main h1, .page-operating main h1, .page-terms main h1, .page-privacy main h1 {
  margin-bottom: 100px;
}
.page-pecs main h1 {
  color: #726797;
}
.page-plan main h1, .page-about main h1, .page-flow main h1, .page-rule main h1, .page-privacy main h1, .page-terms main h1, .page-operating main h1, .page-individual main h1, #under.page-topicslist main h1, .page-maintenance main h1, #under.single main h1, .page-corporate main h1, .parent-corporate main h1,.error404 main h1 {
  color: #fff;
}
.page-what main h1, .page-faq main h1, .single-recommended main h1 {
  color: #66872d !important;
}
.page-distribution main h1 {
  color: #10796d !important;
}
.single-latest main h1 {
  color: #10796d !important;
}
.single-schedule main h1 {
  color: #c8537a !important;
}
.single-post .new30 {
  margin-left: 0.5em;
  color: #aacf52;
}
.single-latest .new30 {
  margin-left: 0.5em;
  color: #2cb5a9 !important;
}
.single-recommended .new30 {
  margin-left: 0.5em;
  color: #a9ce52 !important;
}
.single-schedule .new30 {
  margin-left: 0.5em;
  color: #ff7bac !important;
}
/*h2*/
#under main h2 {
  margin-bottom: 1em;
  font-size: 3.2rem;
  text-align: center;
  letter-spacing: 2.5px;
  line-height: 2.5;
  padding-bottom: 6px;
  padding: 5px;
  color: #888;
  font-weight: 400;
}
#under main h2 span {
  padding-bottom: 10px;
}
#under.single h2 {
  color: #aacf52;
}
#under .whatBest h2 {
  text-align: left;
}
.whatRule h2 span, .howget h2 span, .howtoUnit h2 span, .settingStep h2 span, .plan h2 span, .single h2 span {
  border-bottom: dotted 4px #aacf52;
}
.aboutps h2 span {
  border-bottom: dotted 4px #2eb6aa;
}
.aboutauto h2 span {
  border-bottom: dotted 4px #ff95bd;
}
.aboutteachaer h2 span {
  border-bottom: dotted 4px #89d3ff;
}
.aboutselect h2 span {
  border-bottom: dotted 4px #f1b359;
}
.pecsBox h2 span {
  border-bottom: dotted 4px #938ff3;
}
.pecsBox h2 span strong {
  color: #7873f0;
}
.page-individual .bg_brown h2 span {
  border-bottom: dotted 4px #fae2c0;
  color: #fff;
}
.page-individual .bg_white h2 span {
  border-bottom: dotted 4px #eda02f;
}
.page-corporate .bg_white h2 span {
  border-bottom: dotted 4px #00b8ee;
}
.pecsBox h2 strong {
  color: #7873f0;
  font-weight: 500;
}
.single-latest h2 span {
  border-bottom: dotted 4px #2cb5a9;
  text-align: center;
  color: #10796d;
}
.single-recommended h2 span {
  border-bottom: dotted 4px #a9ce52;
  text-align: center;
  color: #66872d;
}
.single-schedule h2 span {
  border-bottom: dotted 4px #ff7bac;
  text-align: center;
  color: #c8537a;
}
.page-corporate h2 span {
  border-bottom: dotted 4px #00b8ee;
  text-align: center;
}
#under.page-privacy main p, #under.page-privacy main h2, #under.page-privacy main h3, #under.page-terms main p, #under.page-terms main h2, #under.page-terms main h3, #under.page-operating main p, #under.page-operating main h2, #under.page-operating main h3 {
  color: #fff !important;
  text-align: left !important;
}
#under.page-terms main h2 {
  font-size: 2.4rem;
  margin: 2em 0 0 !important;
}
#under.page-terms main h3 {
  font-size: 2.4rem;
  margin-top: 80px;
  margin-bottom: 0.5em;
}
.page-distribution main h2 {
  border-radius: 99px;
  width: fit-content !important;
  padding: 20px 70px !important;
  font-size: 2.4rem !important;
  margin: 15px auto 30px !important;
}
.page-distribution main .newstream h2 {
  background-color: #10796d;
  color: #fff !important;
}
.page-distribution main .recostream h2 {
  background-color: #66872d;
  color: #fff !important;
}
.page-distribution main .noticetream h2 {
  background-color: #c8537a;
  color: #fff !important;
}
.page-distribution main .sample h2 {
  background-color: #fff;
  color: #10796d !important;
}
/*h3*/
#under main h3 {
  font-size: 2.8rem;
}
#under main h3 span {
  font-size: 1.8rem;
}
/*p*/
.text_white {
  color: #fff;
}
.text_gray {
  color: #888;
}
.btnWrapCol {
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.btnWrapRow {
  display: flex;
  gap: 50px;
  flex-direction: row;
  justify-content: center;
  margin: 60px auto 0;
}
.btnWrap .roundBtn, .btnWrap .roundBtnMin, .btnWrap .roundBtnMoreMin {
  width: 100%;
}
.roundLabel {
  /* 色変数 */
  --main-color: #2cb5a9;
  --text-color: #fff;
  --arrow-bg: #fff;
  --arrow-color: #2cb5a9;
  color: var(--text-color);
  position: relative; /* ←追加 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 9999px;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-decoration: none;
  background-color: var(--main-color);
  color: var(--text-color);
  transition: .25s;
  min-height: 90px;
}
.roundLabel.min {
  padding: 30px 60px;
}
/* ===============================
   ボタン
=============================== */
.roundBtn, .roundBtnMin, .roundBtnMoreMin {
  /* 色変数 */
  --main-color: #2cb5a9;
  --text-color: #fff;
  --arrow-bg: #fff;
  --arrow-color: #2cb5a9;
  color: var(--text-color);
  position: relative; /* ←追加 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 9999px;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-decoration: none;
  width: fit-content;
  background-color: var(--main-color);
  color: var(--text-color);
  transition: .25s;
}
/* 背景用の白レイヤー */
.roundBtn::before, .roundBtnMin::before, .roundBtnMoreMin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: .25s;
  z-index: 0;
}
/* hoverで淡くする */
.roundBtn:hover::before, .roundBtnMin:hover::before, .roundBtnMoreMin:hover::before {
  opacity: 0.3;
}
.roundBtn:hover, .roundBtnMin:hover, .roundBtnMoreMin:hover {
  color: var(--text-color);
  text-decoration: none;
}
/* 中身を前面に */
.roundBtn > *, .roundBtnMin > *, .roundBtnMoreMin > * {
  position: relative;
  z-index: 1;
}
/* ●にもレイヤーを用意 */
.roundBtn .arrow-circle, .roundBtnMin .arrow-circle, .roundBtnMoreMin .arrow-circle {
  position: relative;
  overflow: hidden;
}
/* ●の上に白レイヤー */
.roundBtn .arrow-circle::before, .roundBtnMin .arrow-circle::before, .roundBtnMoreMin .arrow-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: .25s;
  border-radius: 50%;
}
/* hoverで●も薄く */
.roundBtn:hover .arrow-circle::before, .roundBtnMin:hover .arrow-circle::before, .roundBtnMoreMin:hover .arrow-circle::before {
  opacity: 0.2;
}
/* padding違いだけ分ける */
.roundBtn {
  padding: 20px 20px 20px 70px;
  min-width: 290px;
  min-height: 110px;
}
.roundBtnMin {
  padding: 17px 17px 17px 50px;
  min-height: 90px;
}
.roundBtnMoreMin {
  padding: 15px 15px 15px 30px;
  min-height: 90px;
}
/* 矢印共通 */
.roundBtn .arrow-circle, .roundBtnMin .arrow-circle, .roundBtnMoreMin .arrow-circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  background-color: var(--arrow-bg);
  flex-shrink: 0;
}
.roundBtn .arrow-circle {
  width: 68px;
  height: 68px;
  margin-left: 35px;
}
.roundBtnMin .arrow-circle {
  width: 58px;
  height: 58px;
}
.roundBtnMoreMin .arrow-circle {
  width: 56px;
  height: 56px;
}
.roundBtn .arrow-line, .roundBtnMin .arrow-line, .roundBtnMoreMin .arrow-line {
  position: relative;
  display: inline-block;
  width: 1.3em;
  height: 2px;
  background-color: var(--arrow-color);
}
.roundBtn .arrow-line::before, .roundBtnMin .arrow-line::before, .roundBtnMoreMin .arrow-line::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 2px;
  background-color: var(--arrow-color);
  transform: rotate(45deg);
  transform-origin: right center;
}
/*一覧へ戻るボタン*/
.backall {
  margin: 90px auto;
  min-width: 350px;
}
/* グリーン */
.btnGreen {
  --main-color: #2cb5a9;
  --arrow-bg: #fff;
  --arrow-color: #2cb5a9;
}
/* 薄グリーン */
.btnLightGreen {
  --main-color: #eef5dc;
  --text-color: #66872d;
  --arrow-bg: #66872d;
  --arrow-color: #fff;
}
/* 和風グリーン */
.btnJpGreen {
  --main-color: #708538;
  --arrow-bg: #fff;
  --arrow-color: #708538;
}
/* グリーンonグリーン */
.btnGreenon {
  --main-color: #a9ce52;
  --arrow-bg: #87aa32;
  --arrow-color: #fff;
}
/* ブルー */
.btnBlue {
  --main-color: #6bc8ff;
  --arrow-bg: #fff;
  --arrow-color: #6bc8ff;
}
/* スカイブルー */
.btnskyBlue {
  --main-color: #00b8ee;
  --arrow-bg: #fff;
  --arrow-color: #00b8ee;
}
/* スカイブルー+白線 */
.btnskyBlueLine {
  --main-color: #00b8ee;
  --arrow-bg: #fff;
  border: solid 3px #fff;
}
/* パープル（薄） */
.btnpurple {
  --main-color: #d6c9ff;
  --text-color: #726797;
  --arrow-bg: #726797;
  --arrow-color: #fff;
}
/* パープル（薄） */
.btnlightpurple {
  --main-color: #d6c9ff;
  --text-color: #726797;
  --arrow-bg: #fff;
  --arrow-color: #726797;
}
/* パープル（濃） */
.btndeeppurple {
  --main-color: #726797;
  --arrow-bg: #fff;
  --arrow-color: #726797;
}
/* オレンジ */
.btnOrange {
  --main-color: #eda02f;
  --arrow-bg: #fff;
  --arrow-color: #eda02f;
}
/* ホワイトスカイブルー */
.btnWhiteskyBlue {
  --main-color: #fff;
  --text-color: #00b8ee;
  --arrow-bg: #00b8ee;
  --arrow-color: #fff;
}
/* ホワイトターコイズ */
.btnWhiteTurquoise {
  --main-color: #fff;
  --text-color: #2cb5a9;
  --arrow-bg: #2cb5a9;
  --arrow-color: #fff;
}
/* ホワイトグリーン */
.btnWhiteGreen {
  --main-color: #fff;
  --text-color: #66872d;
  --arrow-bg: #66872d;
  --arrow-color: #fff;
}
/* ホワイトディープグリーン */
.btnWhiteGreen {
  --main-color: #fff;
  --text-color: #10796d;
  --arrow-bg: #10796d;
  --arrow-color: #fff;
}
/* ホワイトオリーブ和風グリーン */
.btnWhitejpGreen {
  --main-color: #fff;
  --text-color: #66872d;
  --arrow-bg: #66872d;
  --arrow-color: #fff;
}
/* ホワイトオリーブ */
.btnWhiteolive {
  --main-color: #fff;
  --text-color: #87aa32;
  --arrow-bg: #87aa32;
  --arrow-color: #fff;
}
/* ホワイトピンク */
.btnWhitePink {
  --main-color: #fff;
  --text-color: #c8537a;
  --arrow-bg: #c8537a;
  --arrow-color: #fff;
}
/* ホワイトパープル */
.btnWhitePurple {
  --main-color: #fff;
  --text-color: #726797;
  --arrow-bg: #726797;
  --arrow-color: #fff;
}
/* ホワイトオレンジ */
.btnWhiteOrange {
  --main-color: #fff;
  --text-color: #eda02f;
  --arrow-bg: #eda02f;
  --arrow-color: #fff;
}
/* ディープグリーン */
.btnDeepGreen {
  --main-color: #2cb5a9;
  --arrow-bg: #10796d;
  --arrow-color: #fff;
}
/* 黄緑 */
.btnyellowGreen {
  --main-color: #a9ce52;
  --arrow-bg: #66872d;
  --arrow-color: #fff;
}
/* ピンク */
.btnpink {
  --main-color: #ff7bac;
  --arrow-bg: #c8537a;
  --arrow-color: #fff;
}
/* ライトブルー */
.btnlightBlue {
  --main-color: #6bc8ff;
  --arrow-bg: #fff;
  --arrow-color: #6bc8ff;
}
/* 茶色 */
.btnBrown {
  --main-color: #a75a1e;
  --arrow-bg: #fff;
  --arrow-color: #a75a1e;
}
/* オレンジ（bg指定） */
.bg_orange {
  --main-color: #eda02f;
  --arrow-bg: #fff;
  --arrow-color: #eda02f;
}
.pageBottom {
  margin-top: 70px;
}
/*ラベル使用*/
.roundLabel.bg_limeGreen {
  background-color: #cce094;
  color: #66872d;
}
.roundLabel.bg_lavender {
  background-color: #d6d5fa;
  color: #726797;
}
.roundLabel.bg_limeGreen {
  background-color: #cce094;
  color: #66872d;
}
.roundLabel.pinkLabel {
  background-color: #ea6da4;
  color: #fff;
}
.roundLabel.blueLabel {
  background-color: #6bc8ff;
  color: #fff;
}
.roundLabel.orangeLabel {
  background-color: #eda02f;
  color: #fff;
}
/*ぱんくず*/
.breadcrumbs {
  --bc-color: #66872d; /* デフォルト（上書き可） */
  font-size: 1.6rem;
  padding: 10px 0;
  margin-bottom: 20px;
  text-align: right;
  color: var(--bc-color);
}
.breadcrumbs a {
  text-decoration: none;
  color: inherit; /* ←親の色を使う */
}
.breadcrumbs span {
  margin: 0 5px;
  color: inherit; /* ←統一 */
}
.page-distribution .breadcrumbs {
  color: #10796d !important;
}
.single-recommended .breadcrumbs {
  color: #66872d !important;
}
.page-schedule .breadcrumbs {
  color: #c8537a !important;
}
.page-about .breadcrumbs, .page-plan .breadcrumbs, .page-corporate .breadcrumbs, .parent-corporate .breadcrumbs, .page-flow .breadcrumbs, .page-individual .breadcrumbs, .page-rule .breadcrumbs, .page-terms .breadcrumbs, .page-privacy .breadcrumbs, .page-operating .breadcrumbs, .page-topicslist .breadcrumbs, .page-maintenance .breadcrumbs, .single-post .breadcrumbs ,.error404 .breadcrumbs{
  color: #fff !important;
}
.page-pecs .breadcrumbs {
  color: #726797;
}
.contactForm .breadcrumbs {
  color: #888 !important;
}
.single-latest .breadcrumbs {
  color: #10796d !important;
}
.single-schedule .breadcrumbs {
  color: #c8537a !important;
}
/*フォントカラー*/
.orange {
  color: #eda02f;
}
.container {
  position: relative;
}
/* 親要素 */
main .container {
  position: relative; /* ボタンがこの中にとどまるための基準 */
}

/* 親コンテナに基準を作る */
main > .container {
  position: relative !important;
}

.floatingAccountBtn {
  position: fixed;
  bottom: 8vh;
  right: 5vw;
  z-index: 999;
  width: 210px;
  height: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  /* アニメーションは opacity と transform のみに限定するとガタつきません */
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.floatingAccountBtn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 止まった時の追加設定（JSで制御しきれない部分のみ） */
.floatingAccountBtn.is-bottom {
  top: auto !important;
  transform: none !important;
}
/*角丸*/
.outer-box {
  padding: 120px 200px;
  border-radius: 200px;
  margin: 100px 0;
}
.outer-box-min {
  padding: 140px;
  border-radius: 200px;
  margin: 100px 0;
}
.outer-box-smin {
  padding: 140px 90px;
  border-radius: 200px;
  margin: 100px 0;
}
.inner-box {
  padding: 65px 90px;
  border-radius: 100px;
}
.post-outer-box {
  padding: 70px 190px;
  border-radius: 100px;
  margin: 100px 0;
}
.round100 {
  border-radius: 100px;
}
.maintextBox {
  width: fit-content; /* 中身の要素の最大幅に合わせる */
  margin-left: auto; /* 左右中央揃えのまじない */
  margin-right: auto; /* 左右中央揃えのまじない */
  text-align: left; /* テキスト自体は左開始を維持 */
}
.individualBox {
  display: flex;
  align-items: stretch; /* これがデフォルトなので記述しなくても揃います */
  gap: 35px;
  margin-top: 90px;
}
.individualBox .box-small {
  flex: 1;
}
.individualBox .box-large {
  flex: 2;
}
.individualBox {
  display: flex;
  gap: 20px; /* ボックス間の余白 */
}
.inner-box {
  display: flex;
  flex-direction: column;
}
/* h3は上揃え */
.inner-box h3 {
  margin-bottom: 30px;
}
/* h3以外のコンテンツだけ縦中央 */
.contentWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  align-items: center;
}
/* ボタンは高さを変えずに横中央 */
.contentWrapper a.roundBtn {
  align-self: center;
  flex-grow: 0;
}
/*ライン*/
.purpleLine {
  border: solid 50px #d6d5fa;
}
/*ページング*/
.custom-pagination {
  text-align: center; /* 中央揃え */
  margin: 50px 0; /* 上下余白 */
}
.custom-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 10px; /* 数字間の隙間 */
}
.custom-pagination li {}
.custom-pagination a, .custom-pagination span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 75px;
  height: 75px;
  border-radius: 99px;
  font-size: 2.6rem;
  text-decoration: none;
}
/* 現在ページ */
.custom-pagination .current {
  background-color: #ffffff; /* 背景白 */
  color: #87aa32; /* テキスト色 */
}
/* リンクページ */
.custom-pagination a {
  background-color: #bad875; /* 背景色 */
  color: #87aa32; /* テキスト色 */
  transition: 0.3s;
}
.custom-pagination a:hover {
  background-color: #87aa32;
  color: #ffffff;
}
.topics_img {
  max-width: 600px;
  margin: 100px auto;
}
/*動画埋め込み用*/
.youtube {
  width: 100%;
  max-width: 769px;
  margin: 70px auto;
  aspect-ratio: 16 / 9; /* これだけでレスポンシブになります */
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.mt40 {
  margin-top: 40px;
}
.mt50 {
  margin-top: 50px;
}
.mt70 {
  margin-top: 70px;
}
.pb0 {
  padding-bottom: 0;
}
.mb0 {
  margin-bottom: 0;
}
.mb70 {
  margin-bottom: 70px;
}
.mb80 {
  margin-bottom: 80px;
}
.mb90 {
  margin-bottom: 90px;
}
.font2 {
  font-size: 2rem;
}
@media (max-width: 1023px) {

    #about .aboutBox h2,
    .reasonTxt h3,
    .planTxt h3{
        font-size: 2.8rem;
    }
    #under main h1{
        padding-left: 0em;
    }
    #under main h2{
        font-size: 2.8rem;
    }
    #under main h3{
        font-size: 2.6rem;
    }
    .howtoUnitMethod .card dd{
        font-size: 1.8rem;
    }
  .entryStep dt h2 {
    flex-direction: column;
    width: 100%;
  }
.page-distribution main h2 {
    padding: 20px 2em !important;
    }
    .entryStepBox, .application {
    gap: 30px;
  }
  .entryStepImgBox, .applicationImgBox {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .purpleLine {
    border: solid 20px #d6d5fa;
  }
  .roundBtn, .roundBtnMin, .roundBtnMoreMin, .whatRule .pace, .page-distribution main .latestlist dl, .page-distribution main .recommended dl, .page-distribution main .notice dl, .page-topicslist main .topicslist dl,.roundLabel {
    border-radius: 70px;
padding-left: 40px;
    }
    .accountBtn{
        padding-left: 30px !important;
        min-width:inherit !important;
    }
    .individualStepBox > div:first-of-type p{
        margin-left: 0;
    }
  .pageBottom .roundBtn {
    padding-left: 73px;
  }
  .breadcrumbs {
    padding-top: 3em;
  }
  .centerbottom.color-dots {
    bottom: -10px;
  }
  #under main h1 {
    letter-spacing: 0.1em;
  }
  #under main h2 {
    letter-spacing: 0;
  }
    #under .qaBox h2{
        margin: 50px 0 25px;
    }
    #under.single h2{
        font-size: 2.2rem;
    }
  .outer-box {
    padding: 3em 2em;
    border-radius: 50px;
  }
  .outer-box-min {
    margin: 60px 0;
  }
  .teachaerBox, .outer-box-min, .post-outer-box {
    padding: 2em;
    border-radius: 90px;
  }
  .outer-box-smin {
    padding: 2em 1em;
    border-radius: 80px;
  }
  .tohoStep .inner-box, .inner-box {
    padding: 65px 1em;
    border-radius: 100px;
  }
  .plan1 {
    padding: 65px 1em;
  }
  .plan1Img {
    width: 100%;
    min-width: inherit;
  }
  .howtoUnitMethod .cardsWrapper {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    position: relative;
  }
  .settingStep .headerWrapper .stepBadge {
    padding: 1em 2em;
    font-size: 2rem;
  }
  .single-latest .prfile, .single-recommended .prfile {
    flex-direction: column;
    text-align: center;
    margin: 3em auto;
  }
  .backall {
    min-width: inherit;
  }
  .btnWrapRow, .btnWrapRow.bt {
    flex-direction: column;
  }
  .entryStep dt h2 div, .entryStep dd {
    padding-left: 0;
    gap: 30px;
  }
    .entryStep h2::before{
        margin-right: 0;
    }
  .targetIndex li {
    padding-left: 70px;
    text-align: left;
  }
  .pageBottom {
    margin-bottom: 30px;
  }
  .roundBtn .arrow-circle {
    margin-left: 0 !important;
  }
  .page-corporate .infoArea {
    padding: 2em;
  }
  .pc-pagination {
    display: none;
  }
  .sp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }
  .sp-pagination a {
    padding: 8px 14px;
    background: #87aa32;
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
  }
  .sp-pagination .current {
    font-size: 14px;
  }
    .floatingAccountBtn {
    width: 130px;
    height: 130px;
    right: 0vw;
    bottom: 5vh;
  }
    .page-distribution main .latestlist dl, .page-distribution main .recommended dl, .page-distribution main .notice dl, .page-topicslist main .topicslist dl{
        font-size: 1.8rem;
    }
    .pecsBox ul li .roundBtn span,
    .pecsBox ul li .roundBtn div strong,
    .pecsBox ul li .roundBtn span:last-of-type{
        font-size: 2rem;
        letter-spacing: normal;
    }
    .pecsBox p{
        font-size: 1.8rem;
    }
    .pecsBox ul li .roundBtn div strong{
        font-weight: 600;
    }
}