@charset "UTF-8";

/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {

/* page-hero
-------------------------------------*/
.page-hero {
  width: calc(100% - calc(min(4.65vw, 8rem)));
  position: relative;
  background-color: var(--color-bg-gray);
}
.page-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(4.65vw, 8rem);
  transform: translateX(100%);
  height: 100%;
  background: url(../images/common/bg-blue-texture.jpg) repeat;
  z-index: 1;
}

.page-hero__inner {
  position: relative;
  width: min(95%, 128rem);
  padding-top: clamp(4.6rem, 12.5vw - 5rem, 12.5rem);
  margin-inline: auto;
  z-index: 1;
  transform: translateX(clamp(0rem, 9.038vw - 12.654rem, 4.7rem)); /* 1400px ~ 1920px */
}

.page-hero__frame {
  position: relative;
  width: min(100%, 128rem);
  margin-inline: auto;
  color: #fff;
  z-index: 1;
}
.page-hero__frame::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/page-clifton/hero-bg.png) no-repeat top center / 100% auto;
  aspect-ratio: 1280 / 500;
  z-index: 0;
}
.page-hero__frame::after {
  content: "";
  position: absolute;
  bottom: -2.4rem;
  right: 1.7rem;
  width: clamp(12rem, 27.057vw - 8.78rem, 29.1rem);
  height: auto;
  aspect-ratio: 280 / 226;
  z-index: 0;
  background: url(../images/page-clifton/hero-deco.svg) no-repeat center center / 100% auto;
}
.page-hero__contentWrap {
  position: relative;
  width: min(87%, 112rem);
  margin-inline: auto;
  z-index: 1;
}

.page-hero__contentWrap::before {
        content: "";
        position: absolute;
        top: 27%;
        left: clamp(0rem, 7.911vw - 6.076rem, 2rem);
        width: clamp(8rem, 18.848vw - 4.187rem, 24rem);
        height: auto;
        background: url(../images/page-clifton/hero-book.png) no-repeat center / contain;
        aspect-ratio: 421 / 575;
}


.page-hero__caption {
  position: relative;
  padding-top: clamp(1rem, 2.532vw - 0.944rem, 2.6rem);
  padding-left: clamp(1rem, 2.532vw - 0.944rem, 2.6rem);
  font-size: clamp(1.2rem, 0.26vw + 1rem, 1.5rem);
}
.page-hero__caption::after {
  content: "";
  position: absolute;
  bottom: clamp(-1.2rem, -0.949vw + 0.129rem, -0.6rem);
  left: clamp(0.8rem, 2.532vw - 1.144rem, 2.4rem);
  width: 4rem;
  height: 1px;
  background-color: #fff;
}

.page-hero__textWrap {
  position: relative;
  margin-top: clamp(0rem, 4.747vw - 3.646rem, 3rem);
  padding-bottom: clamp(4.4rem, 5.696vw + 0.025rem, 8rem);
  text-align: center;
}
.page-hero__title-en {
  width: clamp(40rem, 113.924vw - 47.494rem, 112rem);
  margin-top: 0.4rem;
  position: relative;
}
.page-hero__title-caption {
  margin-top: -6rem;
  font-size: clamp(1.2rem, 0.475vw + 0.835rem, 1.5rem);
  font-weight: 400;
  line-height: calc(29 / 16);
  letter-spacing: 0.08em;
}
.page-hero__title-caption span {
  margin-left: 1.3rem;
  padding: 0.4rem 0.7rem 0.4rem 1.3rem;
  letter-spacing: 0.08em;
  color: var(--color-main);
  background-color: #fff;
}
.page-hero__title-caption img {
  margin-left: 1rem;
  transform: translate(0.4rem, clamp(-0.8rem, -0.434vw + 0.033rem, -0.3rem));
  height: clamp(2rem, 1.389vw + 0.933rem, 3.6rem);
}
.page-hero__pageSubTitle {
  margin-top: clamp(1.2rem, 3.165vw - 1.23rem, 3.2rem);
  font-size: clamp(1.8rem, 1.899vw + 0.342rem, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.page-hero__pageTitle {
  margin-top: clamp(1.4rem, -2.215vw + 3.101rem, 0rem);
  font-size: clamp(3.8rem, 1.899vw + 2.342rem, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.page-hero__pageSubTitle--bottom {
  margin-top: clamp(2.6rem, 6.329vw - 2.261rem, 6.6rem);
  font-size: clamp(2rem, 0.791vw + 1.392rem, 2.5rem);
}
.page-hero__pageTitle span {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #fff;
}
.page-hero__subTitle {
  display: inline-block;
  margin-top: 3rem;
  padding: 1.7rem 8.2rem 1.6rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.page-hero__subTitle span+span {
  margin-left: 1.5rem;
}



/* con1 worry
-------------------------------------*/
#worry.worry {
  position: relative;
  z-index: 2;
}
#worry .worry__inner {
  position: relative;
  width: min(95%, 1100px);
  z-index: 3;
  margin-top: 3.3rem;
  padding-top: 7.4rem;
  padding-bottom: 12rem;
  background-color: #fff;
  overflow-x: visible;
  margin-inline: auto;
}
#worry .worry__inner::after {
  content: "";
  position: absolute;
  bottom: -5.6rem;
  left: 50%;
  width: 22.3rem;
  height: 6rem;
  transform: translateX(-50%);
  background: url(../images/page-clifton/con1-worry-list-arrow.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#worry .worry__title-wrap {
  text-align: center;
  color: #fff;
}
#worry .worry__title {
  font-size: clamp(2.7rem, 3.788vw - 0.209rem, 3.2rem);
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  color: #1559A3;
}
#worry .worry__title.c-catch span::after {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translate(-50%, -100%);
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #1559A3;
  border-radius: 50%;
}

#worry .worry__list {
  position: relative;
  width: min(95%, 80rem);
  margin-top: 3rem;
  margin-inline: auto;
}
#worry .worry__list::before,
#worry .worry__list::after {
  content: "";
  position: absolute;
  background-size: contain;
  display: block;
  z-index: 1;
}
#worry .worry__list::before {
  bottom: clamp(-4.3rem, 9.019vw - 16.927rem, -10rem);
  left: clamp(-30rem, -44.304vw + 32.025rem, -30rem);
  width: clamp(18rem, 20.728vw + 2.081rem, 31.1rem);
  aspect-ratio: 311 / 207;
  background-image: url(../images/page-clifton/con1-worry-list-img01.jpg);
}
@media screen and (max-width: 1550px) {
  #worry .worry__list::before {
    bottom: clamp(-160px, calc(-160px + (70 * (100vw - 1550px) / (768 - 1550))), -90px);
    left: clamp(-350px, calc(-350px + (310 * (100vw - 1550px) / (768 - 1550))), -40px);
    z-index: -1;
  }
}
#worry .worry__list::after {
  right: clamp(-24rem, -34.81vw + 24.734rem, -2rem);
  top: clamp(0rem, 7.911vw - 6.076rem, 5rem);
  width: clamp(13rem, 20.253vw - 2.554rem, 25.8rem);
  aspect-ratio: 258 / 191;
  background-image: url(../images/page-clifton/con1-worry-list-img02.jpg);
}

#worry .worry__item {
  position: relative;
  padding: 1.7rem 1em 1.7rem 8.5rem;
  font-size:  1.6rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  background: #fff;
  border: 1px solid #1559A3;
  display: flex;
  align-items: center;
}
#worry .worry__item:not(:first-child) {
  margin-top: 1rem;
}
#worry .worry__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4.2rem;
  transform: translateY(-40%);
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/front-page/con1-worry-checkmark.svg) center / contain no-repeat;
}
#worry .worry__item span {
  font-weight: 700;
  color: var(--color-accent);
}


/* con2 change
-------------------------------------*/
.change {
  position: relative;
  z-index: 1;
    top: -12rem;
}
.change::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url(../images/page-clifton/con2-change-bg.webp) no-repeat,
    linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 70%, transparent 70%);
  background-size: 100% auto, 100% 100%;
  background-position: top, center;
  z-index: 0;
}
.change__inner {
  padding-top: 3rem;
  position: relative;
  z-index: 2;
}

.change__frame {
  position: relative;
  width: min(95%, 110rem);
  margin-inline: auto;
  margin-top: 20.9rem;
  padding: 9rem clamp(3rem, 27.778vw - 18.333rem, 15rem) 45.7rem;
  text-align: center;
  background: url(../images/page-clifton/con2-change-frame.png) no-repeat;
  background-size: 100% 100%;
  aspect-ratio: 1100 / 1160;
  z-index: 1;
}
.change__title-en {
  position: absolute;
  top: -5.1rem;
  left: -9.3rem;
  width: clamp(40rem, 32.12vw + 15.332rem, 60.3rem);
  z-index: -1;
}
@media screen and (max-width: 1400px) {
  .change__title-en {
    left: 0;
  }
}

.change__title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-sub);
}
.change__title span {
  padding-bottom: 0.6rem;
  font-size: 4rem;
  font-weight: 600;
  line-height: (114 / 40);
  letter-spacing: 0;
  border-bottom: 1px solid var(--color-sub);
}
.change__lead {
  margin-top: 4.7rem;
  text-align: center;
  font-size: clamp(1.4rem, 0.463vw + 1.044rem, 1.6rem);
  line-height: 2;
  letter-spacing: 0.1em;
}
.change__lead--2 {
  margin-top: 3rem;
}
.change__lead--3 {
  margin-top: 5rem;
}
.change__lead--bottom {
  margin-top: 4rem;
}
.change__lead span {
  font-weight: 700;
}
.change__lead-key {
  display: inline-block;
  margin-top: 4.2rem;
  margin-inline: auto;
  padding-bottom: 0.4rem;
  font-size: clamp(2.2rem, 0.926vw + 1.489rem, 2.6rem);
  font-weight: 400;
  line-height: calc(32 / 26);
  letter-spacing: 0.1em;
  border-bottom: 1px solid #707070;
}
.change__lead-image {
  margin-top: 5rem;
  width: 100%;
}

.change__floatBox {
  position: relative;
  width: min(95%, 90rem);
  margin-top: -38.2rem;
  margin-inline: auto;
  padding: 6rem 6rem 5.1rem;
  color: #fff;
  background-color: var(--color-sub);
  z-index: 3;
}
.change__floatBox::before {
  content: "";
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 10rem;
  background-color: var(--color-sub2);
  background-size: 100% 100%;
  background-position: center;
}
.change__before {
  position: relative;
  display: flex;
  gap: 4.8rem;
}
.change__before::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12rem;
  height: 5.8rem;
  background: url(../images/page-clifton/con2-change-box-arrow.svg) no-repeat;
}
.change__before .change__textArea {
  width: 67.56%;
}
.change__before .change__boxImage {
  flex: 1;
}
.change__boxArrow {
  text-align: center;
}
.change__boxTitle {
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0;
  padding: 1.1rem 1.8rem 0.8rem 1.3rem;
  border: 1px solid #fff;
}
.change__answerList {
  margin-top: 2.1rem;
}
.change__answerItem {
  display: inline-block;
  margin-right: 0.8em;
  font-size: 3rem;
  letter-spacing: 0;
  line-height: calc(50 / 30);
}
.change__boxDesc {
  margin-top: 1.1rem;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.1em;
}
.change__after {
  margin-top: -1.8rem;
}

.change__mediaArea {
  position: relative;
  margin-top: -27rem;
  margin-inline: auto;
  padding-top: 40rem;
  padding-bottom: 18rem;
  padding-inline: clamp(3rem, 6.944vw - 2.333rem, 6rem);
  overflow: hidden;
  z-index: 1;
}

/* 背景を疑似要素に完全分離 */
.change__mediaArea::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/page-clifton/con2-change-media-area-bg.webp) no-repeat;
  background-size: auto 100%;
  background-position: center top;
  z-index: -1;
}

.change__mediaBox {
  width: min(95%, 128rem);
  padding-top: 7rem;
  margin-inline: auto;
  background-color: var(--color-bg-gray);
  border-top: 3rem solid var(--color-main);
}

.change__mediaBoxTitle-en {
  text-align: center;
}
.change__mediaBoxTitle {
  margin-top: -5rem;
  font-size: clamp(2.6rem, 0.316vw + 2.357rem, 3.2rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-main);
}

.change__media {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6.6rem;
  width: min(95%, 100rem);
  margin-top: 2.8rem;
  margin-inline: auto;
}
.change__mediaTextWrap {
  width: 50%;
}
.change__mediaText {
  font-size: var(--pc-font14-18);
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--color-black);
}
.change__mediaText span {
  font-weight: 700;
}
.change__mediaBottomText {
  margin-top: 0.5rem;
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--color-black);
  text-align: center;
}

.change__media--1 {
  flex-direction: row-reverse;
  transform: translateX(-1.3rem);
}
.change__media--1 .change__mediaImage {
  width: 31.8%;
}
.change__media--1 .change__mediaText {
  margin-top: 0.3rem;
  line-height: 1.8;
}


.change__media--2 {
  flex-direction: row;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-inline: 3.3rem 4rem;
}
.change__media--2 .change__mediaTextWrap {
  width: 54.8%;
  transform: translateY(-1.9rem);
}
.change__media--2 .change__mediaImage {
  width: 45.2%;
}

.change__mediaKey {
  margin-bottom: 3rem;
  font-size: clamp(1.8rem, 0.633vw + 1.314rem, 2.2rem);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--color-main);
}
.change__mediaKey span {
  padding-bottom: 0.2em;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    #fff 50%
    );
}

.change__speechBubble {
  position: relative;
  width: min(95%, 100rem);
  margin-top: 5rem;
  margin-inline: auto;
  padding-top: 4.3rem;
  padding-inline: clamp(2rem, 12.658vw - 7.722rem, 10rem);
  padding-bottom: 4.8rem;
  font-size: var(--pc-font16-18);
  line-height: calc(32 / 18);
  letter-spacing: 0.1em;
  text-align: center;
  background-color: #fff;
}
.change__speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 22.3%;
  background: url(../images/page-clifton/con2-change-speech-bubble-arrow.svg) no-repeat;
  background-size: 100% auto;
  aspect-ratio: 223 / 60;
}

.change__media--3 {
  width: min(95%, 100rem);
  margin-top: 7rem;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2.6rem;
}
.change__media--3 .change__mediaTextWrap {
  width: 53%;
  margin-top: 1rem;;
  padding-right: 2rem;
}
.change__media--3 .change__mediaImage {
  width: 47%;
}
.change__media--3 .change__mediaText {
  line-height: 1.9;
}
.change__media--3 .change__mediaText:not(:first-child) {
  margin-top: 2.8rem;
}

.change__mediaBottomText--2 {
  width: fit-content;
  margin-top: 8rem;
  margin-inline: auto;
  padding-inline: 0.9rem;
  font-size: clamp(1.5rem, 0.791vw + 0.892rem, 2rem);
  font-weight: 700;
  line-height: calc(32 / 20);
  letter-spacing: 0.1em;
  color: var(--color-black);
  text-align: center;
  background-color: #fff;
}

.change__resultDeco {
  position: relative;
  width: fit-content;
  margin: 3.1rem auto 0;
  padding: 0.9rem 3.2rem 1.1rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: var(--color-main);
}
.change__resultDeco::after {
  content: "";
  position: absolute;
  bottom: -1.8rem;
  left: 50%;
  width: 1.8rem;
  height: 2rem;
  transform: translateX(-50%);
  background: url(../images/page-clifton/con2-change-result-deco-arrow.svg) no-repeat;
}
.change__resultText {
  margin-top: 3.5rem;
  font-size: var(--pc-font22-26);
  font-weight: 400;
  line-height: calc(46 / 26);
  letter-spacing: 0.1em;
  text-align: center;
}

.change__mediaBoxBottomImage {
  margin-top: 4.8rem;
}

.change__mediaBoxBottomText {
  width: fit-content;
  margin-inline: auto;
  padding-block: 3.5rem;
  padding-inline: 8.3rem 10.3rem;
  background-color: #fff;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: calc(40 / 22);
  letter-spacing: 0.1em;
  transform: translateY(-56%);
}
.change__mediaBoxBottomText span {
  padding-bottom: 0.4rem;
  font-size: 3rem;
  color: var(--color-sub);
  border-bottom: 1px solid var(--color-sub);
}


/* con6 voice
-------------------------------------*/
.voice {
  position: relative;
}
.voice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-bg-gray) url(../images/page-communication/con7-voice-bg.jpg) no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}
.voice__inner {
  margin-top: -33rem;
  padding-top: 46.2rem;
  padding-bottom: 37.5rem;
}
.voice__title-wrap {
  position: relative;
  text-align: center;
}
.voice__title-wrap::before {
  content: "";
  position: absolute;
  top: -8.9rem;
  left: 50%;
  width: 35.42rem;
  height: 4.2rem;
  transform: translateX(-50%);
  background: url(../images/page-communication/con7-voice-title-deco.svg) center/contain no-repeat;
}

.voice__voiceWrap {
  width: min(95%, 1100px);
  margin-top: 9.4rem;
  margin-inline: auto;
  padding-block: 7rem 8.6rem;
  padding-inline: clamp(2.4rem, 12.025vw - 6.835rem, 10rem);
  background: #fff;
}
.voice__panel {
  padding-top: 5rem;
  padding-inline: 5rem;
  padding-bottom: 4.3rem;
  background-color: #EFF0F2;
}
.voice__header {
  display: grid;
  grid-template-columns: 90px 1fr;
  column-gap: 4rem;
}
.voice__item:not(:first-child) {
  margin-top: 4rem;
}
.voice__avatar {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}
.voice__meta {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.voice__course-name {
  font-weight: 700;
  line-height: calc(19 / 16);
  color: #fff;
  background-color: var(--color-main);
}
.voice__detail {
  margin-top: 1rem;
  font-weight: 500;
  line-height: calc(19 / 16);
  color: var(--color-black);
}
.voice__voice-title {
  grid-column: 2;
  grid-row: 2;
  margin-top: 2rem;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: calc(40 /22);
  letter-spacing: 0.05em;
}
.voice__line {
  width: 100%;
  height: 1px;
  margin-top: 2.8rem;
  background-color: #D5D5D5;
}
.voice__text {
  margin-top: 2.2rem;
  font-weight: 400;
  line-height: calc(32 / 16);
  letter-spacing: 0.05em;
}


/* con5 point
-------------------------------------*/
#point.point {
  position: relative;
  overflow: visible;
}
#point.point::before {
  content: "";
  position: absolute;
  top: -29.7rem;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% + 29.7rem);
  background: url(../images/front-page/con2-point-bg.webp) no-repeat center;
  background-size: auto 100%;
  z-index: 0;
  pointer-events: none;
}
#point .point__inner {
  position: relative;
  margin-top: -6rem;
  padding-bottom: 36rem;
}

.point__titleWrap {
  text-align: center;
}
.point__title-en {
  width: 51.2rem;
  margin-inline: auto;
}
.point__title-en img {
  width: 100%;
}
.point__sectionTitle {
  margin-top: -5.6rem;
  color: #fff;
}
#point .point__titleLine {
  display: block;
  font-size: clamp(3rem, 0.316vw + 2.757rem, 3.2rem);
  font-weight: 600;
  line-height: calc(36 / 32);
}
.point__titleRow {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-top: 1.6rem;
}
.point__titleWord {
  display: inline-block;
  padding-bottom: 0.8rem;
  font-size: 3.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  border-bottom: 1px solid var(--color-sub2);
}
.point__titleNum {
  width: 5.8rem;
  margin-left: 1rem;
}
.point__titleNum img {
  width: 100%;
}

#point .point__list {
  width: min(95%, 1600px);
  margin-inline: auto;
  margin-top: 9.4rem;
}

/* point__item */
#point .point__item {
  width: 90.65%;
  display: grid;
  grid-template-columns: 52% 42%;
  column-gap: 3.1%;
  grid-template-rows: min-content 1fr;
  grid-template-areas:
  "img title"
  "img desc";
}
@media screen and (max-width: 1000px) {
  #point .point__item {
    width: 95%;
    grid-template-columns: 45% 52%;
    column-gap: 3%;
  }
}

#point .point__item:nth-child(odd) {
  margin-left: 0;
  margin-right: auto;
}

#point .point__item:nth-child(even) {
  margin-right: 0;
  margin-left: auto;
  padding-left: clamp(0rem, 46.5vw - 55.8rem, 9.3rem); /*1200 ~ 1400 */
  justify-content: end;
  transform: translateX(-5.4rem);
  grid-template-columns: 39.3% 55.4%;
  grid-template-areas:
  "title img"
  "desc img";
}
@media screen and (max-width: 1200px) {
  #point .point__item:nth-child(even) {
    width: 100%;
  }
}


#point .point__imageWrap {
  align-self: start;
  grid-area: img;
}
#point .point__titleWrap {
  align-self: start;
  grid-area: title;
}
#point .point__descWrap  {
  align-self: start;
  grid-area: desc;
}


#point .point__imageWrap img {
  display: block;
  width: 100%;
}
#point .point__pointNum img {
  display: block;
}

#point .point__pointNum {
  width: 8.13rem;
  margin-top: 5.3rem;
}
#point .point__pointNum img {
  width: 100%;
}
#point .point__pointTitle {
  margin-top: 2.5rem;
  font-size: clamp(2.2rem, calc(0.384rem + 2.365vw), 3.6rem);
  font-weight: 600;
  line-height: calc(43 / 36);
  letter-spacing: 0.07em;
  color: #fff;
}
#point .point__pointTitle span {
  display: inline-block;
  white-space: nowrap;
}
#point .point__pointTitle span:not(:first-child) {
  margin-top: 1rem;
}
#point .point__pointTitle span img {
  margin-right: 1rem;
}
#point .point__desc-text {
  margin-top: clamp(1rem, 4.747vw - 2.646rem, 4rem);
  padding-right: clamp(2rem, 7.911vw - 4.076rem, 7rem);
  font-size: clamp(1.4rem, 0.633vw + 0.914rem, 1.8rem);
  line-height: 2.3;
  letter-spacing: 0.1em;
  color: #fff;
}

/* point__item--1st */
#point .point__item--1st .point__pointTitle img {
  width: 29.8rem;
}

/* point__item--2nd */
#point .point__item--2nd {
  margin-top: clamp(4.2rem, 11.076vw - 4.306rem, 11.2rem);
  gap: 4.2%;
}
#point .point__item--2nd .point__titleWrap,
#point .point__item--2nd .point__descWrap {
  min-width: 32rem;
}
#point .point__item--2nd .point__pointNum {
  margin-top: 1.3rem;
  padding-left: 0.5rem;
}
#point .point__item--2nd .point__pointTitle {
  margin-top: 2.8rem;
}
#point .point__item--2nd .point__desc-text {
  margin-top: 1.9rem;
  padding-right: 0;
}

/* point__item--3rd */
#point .point__item--3rd {
  margin-top: 11.5rem;
  gap: 3.2%;
}
#point .point__item--3rd .point__pointNum {
  margin-top: 3.2rem;
  padding-left: 0.4rem;
}
#point .point__item--3rd .point__pointTitle {
  margin-top: 2.6rem;
}
#point .point__item--3rd .point__pointTitle img {
  width: 22.8rem;
}
#point .point__item--3rd .point__desc-text {
  margin-top: 2.4rem;
}

#point .point__btnWrap {
  width: min(80%, 1100px);
  margin-top: clamp(3rem, calc(-3rem + 7.8125vw), 12rem);
  margin-top: clamp(-3rem, 11.545vw - 11.867rem, 10.3rem);
  margin-inline: auto;
}
#point .point__btnWrap a img {
  transition: all 0.2s ease;
}
#point .point__btnWrap a img:hover {
  filter: brightness(1.1);
  opacity: 1;
}



/* con5 work flow
-------------------------------------*/
.flow {
  background-color: var(--color-bg-gray);
}
.flow__inner {
  margin-top: -0.7rem;
  padding-bottom: 18.5rem;
}
.flow__title-en {
  width: 19.6rem;
  max-width: 43.5rem;
  margin-inline: auto;
}

.flow__list {
  width: min(95%, 100rem);
  margin-top: 7.4rem;
  margin-inline: auto;
  padding-inline: 2rem;
}
.flow__item {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
}
.flow__item:not(:first-child) {
  margin-top: 5.8rem;
}
.flow__imageWrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18rem;
  height: 18rem;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 5px 0 0 #E5E5E5;
  flex-shrink: 0;
}
.flow__imageWrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0.2rem;
  height: 6rem;
  transform: translate(-50%, 105%);
  background: url(../images/page-clifton/con5-flow-line-dash.svg) no-repeat;
}
.flow__item:last-child .flow__imageWrap::after {
  content: none;
}

.flow__imageWrap img {
  display: block;
}

.flow__titleWrap {
  margin-top: 0.4rem;
  padding-left: 0.4rem;
}

.flow__title {
  margin-top: 2rem;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: calc(36 / 24);
  letter-spacing: 0;
}
.flow__desc-text {
  margin-top: 1.7rem;
  font-size: 1.6rem;
  line-height: calc(28 / 16);
  letter-spacing: 0.1em;
}

.flow__item--2nd .flow__titleWrap {
  margin-top: 2rem;
}
.flow__item--3rd .flow__titleWrap {
  margin-top: 2.4rem;
}
.flow__item--4th .flow__titleWrap {
  margin-top: 2.9rem;
}





/* con6 service
-------------------------------------*/
.service{
  position: relative;
  background: url(../images/page-clifton/con6-service-bg.jpg) no-repeat var(--color-bg-gray);
  background-size: 100% auto;
  z-index: 1;
  aspect-ratio: 1920 / 800;
}
.service__inner {
  position: relative;
  padding-top: clamp(3.6rem, 18.354vw - 10.496rem, 15.2rem);
  padding-top: 14.2rem;
  padding-bottom: 8rem;
  z-index: 2;
}
.service__titleWrap {
  position: relative;
  color: #fff;
}
.service__titleWrap span {
  display: block;
  text-align: center;
  line-height: 1;
}
.service__title-en {
  margin-bottom: 3rem;
}
.service__title-en > img {
  height: 1.426rem;
}
.service__title {
  font-size: 3.2rem;
  font-weight: 600;
  line-height: calc(114 / 24);
  padding-bottom: 4.9rem;
}
.service__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 1px;
  background-color: #fff;
}
.service__lead {
  margin-top: 3rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  text-align: center;
  letter-spacing: 0.1em;
  color: #fff;
}

.service__courseWrap {
  width: min(95%, 128rem);
  margin-top: clamp(2rem, 6.329vw - 2.861rem, 5.6rem);
  margin-inline: auto;
  padding-block: 6rem;
  padding-bottom: 8rem;
  padding-inline: clamp(2rem, 4.747vw - 1.646rem, 5rem);
  background-color: #fff;
}
.service__programWrap {
  width: min(95%, 100rem);
  margin-inline: auto;
}

.service__days,
.service__price {
  font-size: clamp(2rem, 1.62vw + 0.756rem, 2.7rem);
  font-weight: 600;
}
.service__price {
  color: #FC2F28;
}
.service__notesList {
  margin-top: 2rem;
}
.service__notesItem {
  line-height: calc(30 / 16);
}
.service__notes {
  margin-top: 0.8rem;
  font-size: 1.4rem;
}

.service__programItem {
  margin-top: 2rem;
  border: 1px solid #1559A3;
}
.service__programDef {
  display: flex;
  align-items: center;
}
.service__programTitle {
  width: 36.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--pc-font16-20);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #1559A3;
  align-self: stretch;
}
.service__programDesc {
  width: 63.2%;
  position: relative;
  padding: 3rem clamp(2rem, 4.747vw - 1.646rem, 5rem);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: calc(36 / 16);
  letter-spacing: 0.1em;
  font-weight: 500;
}

.service__programDescText {
  font-size: var(--pc-font14-16);
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.service__programDescName {
  margin-top: 0.8em;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
.service__programDescPrice {
  font-size: 2.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.service__programDescNote {
  font-size: clamp(1rem, 0.633vw + 0.514rem, 1.4rem);
  line-height: calc(30 / 14);
  letter-spacing: 0.1em;
}

.service__programDef-note {
  width: min(95%, 128rem);
  margin-top: 1.4rem;
}
.service__programDef-noteText {
  font-size: 1.4rem;
  line-height: calc(26 / 14);
  letter-spacing: 0.1em;
}

.service__programOffer {
  width: min(100%, 100rem);
  margin-top: 3.5rem;
  padding: 1.8rem 1em;
  font-size: 1.4rem;
  line-height: calc(26 / 14);
  letter-spacing: 0.1em;
  text-align: center;
  border: 4px solid var(--color-main);
}
.service__programOffer span {
  font-weight: 700;
}

.service__attention {
  position: relative;
  width: min(100%, 100rem);
  margin-top: 7.6rem;
  padding: 3.2rem 6rem 3.5rem;
  border: 1px solid var(--color-sub);
}
.service__attentionTitle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 18.6rem;
  height: 3.3rem;
  text-align: center;
  background-color: #fff;
}
.service__attentionText {
  font-size: 1.6rem;
  line-height: calc(30 / 16);
  letter-spacing: 0.1em;
}
.service__note {
  width: min(100%, 100rem);
  margin-top: 4rem;
}
.service__noteTitle {
  padding-block: 1.8rem 2rem;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  background-color: var(--color-main);
}
.service__noteBody {
  padding: 2.2rem 5rem 2.1rem;
  border-bottom: 1px solid var(--color-main);
  border-left: 1px solid var(--color-main);
  border-right: 1px solid var(--color-main);
}
.service__noteLead {
  font-size: 1.6rem;
  line-height: calc(30 / 16);
  letter-spacing: 0.1em;
  text-align: center;
}
.service__noteList {
  margin-top: 2.7rem;
}
.service__noteItem {
  position: relative;
  font-size: 1.6rem;
  font-weight: 700;
  padding-left: 1em;
  line-height: calc(34 / 16);
  letter-spacing: 0.1em;
}
.service__noteItem::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-main);
}


/* con7 FAQ
-------------------------------------*/
.faq {
  background-color: #F5F5F5;
}
.faq__inner {
  padding: 8rem 0 0;
}
.faq__content {
  position: relative;
  width: min(95%, 1100px);
  margin-inline: auto;
  z-index: 10;
}
.faq__titleWrap {
  position: relative;
  color: var(--color-dark-navy);
}
.faq__titleWrap span {
  display: block;
  text-align: center;
  line-height: 1;
}
.faq__title-en {
  margin-bottom: 2rem;
}
.faq__title-en > img {
  height: 1.426rem;
}
.faq__title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 4.2rem;
}
.faq__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 1px;
  background-color: var(--color-dark-navy);
}

.faq__faq-wrap {
  width: min(95%, 86rem);
  margin-inline: auto;
  padding-top: 4rem;
}
.faq__faq-group {
  border-bottom: 1px solid #D3D3D3;
}
.faq__question {
  display: flex;
  align-items: flex-start;
  padding-block: 4rem;
  cursor: pointer;
  transition: margin-bottom 0.3s ease, padding-bottom 0.3s ease;
}
.faq__question.is-open {
  padding-bottom: 0;
  margin-bottom: 2.2rem;
}
.faq__icon {
  flex-shrink: 0;
}
.faq__icon > img {
  width: 2.28rem;
  height: auto;
  transform: translateY(5px);
}
.faq__text {
  padding-left: 2rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: calc(30 / 18);
  letter-spacing: 0.1em;
}
.faq__line {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
}
.faq__line::before,
.faq__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.4rem;
  height: 1px;
  background-color: var(--color-dark-navy);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq__line::before {
  transform: translate(-50%, -50%);
}
.faq__line::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq__question.is-open .faq__line::after {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
  opacity: 0;
}

.faq__answer {
  max-height: 0;
  margin-inline: auto;
  padding-inline: 4.6rem 1em;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: calc(30 / 16);
  letter-spacing: 0.1em;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
  overflow: hidden;
}
.faq__question.is-open + .faq__answer {
  max-height: 500px;
  opacity: 1;
  padding-top: 0;
  padding-bottom: 3.2rem;
}

.faq__bottomImage {
  width: min(95%, 128rem);
  margin-top: 9rem;
  margin-inline: auto;
  background: url(../images/page-clifton/con7-faq-bottom-image.jpg) center / cover no-repeat;
  aspect-ratio: 1920 / 527;
}
.faq__bottomImage img {
  position: relative;
  z-index: 1;
}



.faq {
  background-color: #F5F5F5;
}
.faq__inner {
  padding-top: 0;
}
.faq__content {
  position: relative;
  padding: 8rem 0 6.5rem;
  width: min(95%, 1100px);
  margin-inline: auto;
  z-index: 10;
}
.faq__titleWrap {
  position: relative;
  color: var(--color-dark-navy);
}
.faq__titleWrap span {
  display: block;
  text-align: center;
  line-height: 1;
}
.faq__title-en {
  margin-bottom: 2rem;
}
.faq__title-en > img {
  height: 1.426rem;
}
.faq__title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 4.4rem;
}
.faq__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 1px;
  background-color: var(--color-dark-navy);
}

.faq__faq-wrap {
  width: min(95%, 85rem);
  margin-inline: auto;
  padding-top: 4rem;
}
.faq__faq-group {
  border-bottom: 1px solid #D3D3D3;
}
.faq__question {
  display: flex;
  align-items: flex-start;
  padding-block: 3.4rem;
  cursor: pointer;
  transition: margin-bottom 0.3s ease, padding-bottom 0.3s ease;
}
.faq__question.is-open {
  padding-bottom: 0;
  margin-bottom: 1.9rem;
}
.faq__icon {
  flex-shrink: 0;
}
.faq__icon > img {
  width: 2.28rem;
  height: auto;
  transform: translateY(5px);
}
.faq__text {
  padding-left: 2rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: calc(30 / 18);
  letter-spacing: 0.1em;
}
.faq__line {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  transform: translate(-5px, 1px);
}
.faq__line::before,
.faq__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.4rem;
  height: 1px;
  background-color: var(--color-dark-navy);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq__line::before {
  transform: translate(-50%, -50%);
}
.faq__line::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq__question.is-open .faq__line::after {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
  opacity: 0;
}
.faq__answer {
  max-height: 0;
  margin-inline: auto;
  padding-inline: 4.6rem 1em;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: calc(30 / 16);
  letter-spacing: 0.1em;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
  overflow: hidden;
}

.faq__question.is-open + .faq__answer {
  max-height: 500px;
  opacity: 1;
  padding-top: 0;
  padding-bottom: 2.5rem;
}


/* con8 contact
-------------------------------------*/
.contact {
  margin-top: -8rem;
  background-color: var(--color-bg-gray);
}
.contact__inner {
  padding-bottom: 16rem;
  position: relative;
  margin-inline: auto;
  text-align: center;
}
.contact__head {
  position: relative;
  padding-block: 16.4rem 14.5rem;
  text-align: center;
  color: #fff;
  background: url(../images/page-clifton/con8-bottom-image-bg.jpg) center / cover no-repeat;
}
.contact__lead {
  font-size: clamp(2.3rem, 0.791vw + 1.692rem, 2.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.contact__title {
  margin-top: 3.4rem;
}
.contact__title span {
  padding-bottom: 0.6rem;
  font-size: clamp(3.4rem, 0.949vw + 2.671rem, 4rem);
  font-weight: 400;
  line-height: calc(72 / 40);
  letter-spacing: 0;
  border-bottom: 1px solid #fff;
}

.contact__title span span {
  color: var(--color-sub2);
  border-bottom: none;
}
.contact__form {
  position: relative;
  z-index: 2;
  margin-top: -5.4rem;
}
.contact .form__inner {
  position: relative;
}
.contact .form__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(0rem, 7.278vw - 5.59rem, 4.6rem);
  transform: translateY(-100%);
  width: clamp(12.7rem, 11.076vw + 4.194rem, 19.7rem);
  background: url(../images/page-clifton/con8-bottom-coach.png) center / contain no-repeat;
  aspect-ratio: 197 / 227;
}

}



/* ========================================
  @media screen and (max-width: 767px)
======================================== */
  @media screen and (max-width: 767px) {

html {
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* thanks */
#clifton-strengths .borderwrap:nth-of-type(1){
  margin-top: 28vw;
}

/* page-hero
-------------------------------------*/
.page-hero {
  background-color: var(--color-bg-gray);
  margin:0vw 0vw 33vw 0vw;
}

.page-hero__inner {
  position: relative;
  text-align: center;
  padding-top: 22vw;
}
.page-hero__inner::before{
  content:"";
  position:absolute;
  inset: 0;
  top: 22vw;
  height: 100%;
  background:url(../images/page-clifton/hero-bg-sp.jpg) no-repeat top center / cover;
  z-index:0;
}

.page-hero__frame {
  position: relative;
  width: 100%;
  margin-inline: auto;
}
.page-hero__frame::after {
  content: "";
  position: absolute;
  bottom: -31vw;
  left: 50%;
  transform: translateX(-50%);
  width: 47vw;
  height: auto;
  background: url(../images/page-clifton/hero-deco.svg) no-repeat;
  background-size: 100% auto;
  aspect-ratio: 279 / 227;
  z-index: 10;
}
.page-hero__caption {
  position: absolute;
  top: 4.3vw;
  left: 5.3vw;
  font-size: 2.9vw;
  letter-spacing: 0.11em;
  color: #fff;
}
.page-hero__caption-line {
  position: absolute;
  top: 12vw;
  left: 5.3vw;
  width: 9.7vw;
  height: 1px;
  background-color: #fff;
}
.page-hero__textWrap {
  position: relative;
  top: 15.9vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding-bottom: 27.2vw;
  color: #fff;
  z-index: 1;
}
.page-hero__title-en {
  position: relative;
  width: 87.92vw;
}
.page-hero__title-en img {
  width: 100%;
}
.page-hero__title-caption {
  margin-top: -10vw;
  font-size: 4.2vw;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
.page-hero__pageTitle {
  position: relative;
  margin-left: 33vw;
  margin-top: 1.5vw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
}
.page-hero__pageTitle::before {
  content: "";
  position: absolute;
  top: 61%;
  left: -27vw;
  transform: translateY(-50%);
  width: 23vw;
  background: url(../images/page-clifton/hero-book.png) no-repeat center / contain;
  aspect-ratio: 382 / 489;
}
.page-hero__pageTitle span {
  display: inline-block;
  margin-top: 2.5vw;
  padding-bottom: 0.8vw;
  font-size: 9.1vw;
  letter-spacing: 0.05em;
  border-bottom: 0.24vw solid #fff;
}
.page-hero__pageSubTitle {
  margin-top: 6.3vw;
  font-size: 5.4vw;
  line-height: 1;
}
.page-hero__pageSubTitle--bottom {
  margin-top: 5.3vw;
  font-size: 4.4vw;
}


/* con1 worry
-------------------------------------*/
.worry.worry {
  position: relative;
  z-index: 2;
  background-color: #E0E0E0;
}
#worry .worry__inner {
  position: relative;
  z-index: 3;
  margin-top: 6.6vw;
  padding-top: 10vw;
  padding-inline: 5.34vw;
  padding-bottom: 12.1vw;
  background-color: #fff;
}
#worry .worry__inner::after {
  content: "";
  position: absolute;
  bottom: -14.8vw;
  left: 50%;
  width: 100%;
  height: 15.7vw;
  transform: translateX(-50%);
  background: url(../images/page-clifton/con1-worry-list-arrow-sp.svg) no-repeat;
  background-size: contain;
  background-position: center;
  z-index: -1;
}
#worry .worry__title-wrap {
  text-align: center;
  color: #fff;
}
#worry .worry__title {
  font-size: 5.8vw;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: center;
  color: #1559A3;
}
#worry .worry__title.c-catch span {
  transform: translate(0);
}
#worry .worry__title.c-catch span::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 50%;
  transform: translate(-50%, -100%);
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color:#1559A3;
  border-radius: 50%;
}

#worry .worry__list {
  position: relative;
  width: 100%;
  margin-top: 41.2vw;
  margin-inline: auto;
}
#worry .worry__list::before,
#worry .worry__list::after {
  content: "";
  position: absolute;
  background-size: contain;
  display: block;
  transform: translateY(-100%);
  z-index: 1;
}
#worry .worry__list::before {
  top: -10vw;
  left: 5%;
  width: 47%;
  background-image: url(../images/page-clifton/con1-worry-list-img01.jpg);
  aspect-ratio: 311/207;
}
#worry .worry__list::after {
  right: 7.4vw;
  top: -5vw;
  width: 40%;
  background-image: url(../images/page-clifton/con1-worry-list-img02.jpg);
  aspect-ratio: 258/191;
  z-index: -1;
}
#worry .worry__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 3.3vw 1.1em 2.6vw 13.0vw;
  font-size: 3.8vw;
  line-height: 1.7;
  letter-spacing: 0.05em;
  background: #fff;
  min-height: 19.3vw;
  border: 1px solid var(--color-main);
}
#worry .worry__item:not(:first-child) {
  margin-top: 3.6vw;
}
#worry .worry__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3.6vw;
  transform: translateY(-40%);
  width: 5.8vw;
  height: 5.8vw;
  background: url(../images/front-page/con1-worry-checkmark.svg) center/contain no-repeat;
}
#worry .worry__item span {
  font-weight: 700;
  color: var(--color-accent);
}
#worry .worry__item:last-child {
  position: relative;
}
#worry .worry__bottom {
  margin-top: 20.0vw;
  text-align: center;
}
#worry .worry__bottom-text {
  font-size: 7.7vw;
  font-weight: 600;
  line-height: 1.2;
}
#worry .worry__bottom-text img {
  margin-top: 8.9vw;
  margin-bottom: 8.2vw;
}
#worry .worry__bottom-text-sp-bottom {
  font-size: 6.3vw;
  font-weight: 600;
  line-height: 1.2;
}
#worry .worry__bottom-text-sp-bottom span {
  font-size: 12.1vw;
  font-weight: 600;
  line-height: 1.2;
}


/* con2 change
-------------------------------------*/
.change {
  position: relative;
  z-index: 1;
}
.change::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../images/page-clifton/con2-change-bg-sp.png) no-repeat, linear-gradient(to bottom, #f5f5f5 0%, #f5f5f5 70%, transparent 70%);
  background-size: 100% auto, 100% 100%;
  background-position: top, center;
  z-index: 0;
}
.change__inner {
  padding-top: 7.2vw;
  position: relative;
  z-index: 2;
}
.change__frame {
  position: relative;
  width: 100%;
  margin-inline: auto;
  margin-top: 18vw;
  padding: 20.7vw 0 32.6vw;
  text-align: center;
  background: url(../images/page-clifton/con2-change-frame-sp.png) no-repeat;
  background-size: 94.4% 100%;
  background-position: center;
  aspect-ratio: 1100/1160;
  z-index: 1;
}
.change__title-en {
  position: absolute;
  top: clamp(-5rem, -6.711vw + 0.148rem, -2rem);
  width: 100%;
  text-align: center;
  z-index: -1;
}
.change__title-en img {
  width: 74.64vw;
}
.change__title {
  font-size: 5.8vw;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-sub);
}
.change__title span {
  padding-bottom: 1.4vw;
  font-size: 9.7vw;
  font-weight: 600;
  line-height: 2.9;
  letter-spacing: 0;
  border-bottom: 0.2vw solid var(--color-sub);
}
.change__lead {
  margin-top: 4vw;
  padding-inline: 10.4vw;
  text-align: center;
  font-size: 3.8vw;
  line-height: 2.0;
  letter-spacing: 0.12em;
  text-align: left;
}
.change__lead--2 {
  margin-top: 8.45vw;
}
.change__lead--3 {
  margin-top: 9.42vw;
}
.change__lead--bottom {
  margin-top: 8vw;
}
.change__lead span {
  font-weight: 700;
}
.change__lead-key {
  display: inline-block;
  margin-top: 5.6vw;
  margin-inline: auto;
  padding-inline: 4.6vw;
  font-size: 5.9vw;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: left;
  font-feature-settings: "palt";
}
.change__lead-key span {
  display: inline-block;
  margin-left: -1.5vw;
  border-bottom: 0.2vw solid #707070;
}
.change__lead-keyWrap span + br +span {
}
.change__lead-image {
  margin-top: 8.7vw;
  width: 100%;
}
.change__floatBox {
  position: relative;
  width: 82%;
  max-width: 100vw;
  margin-top: -22vw;
  margin-inline: auto;
  padding: 7.6vw 4.5vw 5.5vw;
  color: #fff;
  background-color: var(--color-sub);
  z-index: 3;
}
.change__before {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 4.5vw;
}
.change__before::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 14.0vw;
  background: url(../images/page-clifton/con2-change-box-arrow.svg) no-repeat;
}
.change__before .change__textArea {
  width: 100%;
}
.change__boxArrow {
  margin-top: 6vw;
  text-align: center;
}
.change__boxTitle {
  display: inline-block;
  width: 100%;
  padding: 1.8vw 0;
  font-size: 3.4vw;
  line-height: 1.0;
  letter-spacing: 0;
  text-align: center;
  border: 1px solid #fff;
}
.change__answerList {
  margin-top: 3.7vw;
}
.change__answerItem {
  display: inline-block;
  margin-right: 3vw;
  font-size: 5.1vw;
  letter-spacing: 0;
  line-height: 1.8;
}
.change__boxDesc {
  margin-top: 2vw;
  font-size: 3.4vw;
  line-height: 2;
  letter-spacing: 0.1em;
}
.change__after {
  margin-top: 6.8vw;
}

.change__mediaArea {
  position: relative;
  margin-top: -29.2vw;
  margin-inline: auto;
  padding-top: 44.2vw;
  padding-bottom: 4.7vw;
  padding-inline: 3.3vw;
  z-index: 0;
  overflow: hidden;
}
.change__mediaArea::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/page-clifton/con2-change-media-area-bg-sp.png) no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  z-index: -1;
}

.change__mediaBox {
  width: 100%;
  padding-top: 7vw;
  margin-inline: auto;
  background-color: var(--color-bg-gray);
  border-top: 4.7vw solid var(--color-main);
}
.change__mediaBoxTitle-en {
  text-align: center;
}
.change__mediaBoxTitle {
  margin-top: -5.4vw;
  font-size: 5.8vw;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-main);
}
.change__media {
  width: 100%;
  margin-inline: auto;
}
.change__mediaTextWrap {
  width: 100%;
  margin-top: 6vw;
  padding-inline: 4vw;
}
.change__mediaText {
  padding-inline: 1.7vw;
  font-size: 3.8vw;
  line-height: 2.1;
  letter-spacing: 0.12em;
  color: var(--color-black);
}
.change__mediaText span {
  font-weight: 700;
}
.change__mediaImage {
  margin-top: 6.4vw;
  margin-inline: 9.3vw;
  text-align: center;
}
.change__mediaImage--2nd {
  margin-top: 5.2vw;
  margin-inline: 5.6vw;
}
.change__mediaImage--3rd {
  margin-top: 1.9vw;
  margin-inline: 5.5vw;
}
.change__mediaBottomText {
  margin-top: 6.4vw;
  padding-inline: 6vw;
  font-size: 4vw;
  line-height: 2;
  letter-spacing: 0.05em;
  color: var(--color-black);
  text-align: left;
}
.change__media--2 {
  margin-top: 2.7vw;
}
.change__media--2 .change__mediaTextWrap {
  margin-top: 4vw;
  padding-inline: 4vw;
}
.change__mediaKey {
  margin-bottom: 4vw;
  font-size: 4.9vw;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: var(--color-main);
}
.change__mediaKey span {
  padding: 0 0.3em 0.2em;
  background: linear-gradient(to bottom, transparent 50%, #fff 50%);
}
.change__mediaKey span:not(:first-child) {
  margin-left: -4vw;
}
.change__mediaKey span:last-child {
  margin-left: 0;
}
.change__speechBubble {
  position: relative;
  width: 88%;
  max-width: 100vw;
  margin-top: 12.1vw;
  margin-inline: auto;
  padding: 5.1vw 6.8vw 6.5vw;
  font-size: 4.3vw;
  line-height: 1.8;
  letter-spacing: 0;
  text-align: left;
  background-color: #fff;
}
.change__speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0.5vw;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 22vw;
  background: url(../images/page-clifton/con2-change-speech-bubble-arrow.svg) no-repeat;
  background-size: 100% auto;
  aspect-ratio: 223/60;
}

.change__media--3 {
  width: 100%;
  margin-top: 13.8vw;
}
.change__media--3 .change__mediaTextWrap {
  width: 100%;
}
.change__media--3 .change__mediaText:not(:first-child) {
  margin-top: 7vw;
}

.change__mediaBottomText--2 {
  width: 82vw;
  max-width: 100vw;
  margin-top: 9vw;
  margin-inline: auto;
  padding-block: 4vw;
  padding-inline: 4.8vw 3vw;
  font-size: 3.9vw;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--color-black);
  background-color: #fff;
}
.change__resultDeco {
  position: relative;
  width: fit-content;
  margin: 7.5vw auto 0;
  padding: 2.2vw 6.3vw 1.8vw;
  font-size: 3.7vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: var(--color-main);
}
.change__resultDeco::after {
  content: "";
  position: absolute;
  bottom: -3.6vw;
  left: 50%;
  width: 4.3vw;
  height: 4.8vw;
  transform: translateX(-50%);
  background: url(../images/page-clifton/con2-change-result-deco-arrow.svg) no-repeat;
}
.change__resultText {
  margin-top: 5vw;
  padding-inline: 5.5vw;
  font-size: 5vw;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.07em;
  text-align: left;
}
.change__mediaBoxBottomImage {
  margin-top: 6.8vw;
}
.change__mediaBoxBottomText {
  width: 82vw;
  max-width: 100vw;
  margin-top: 25vw;
  margin-inline: auto;
  padding-block: 7vw;
  padding-inline: 2vw;
  background-color: #fff;
  text-align: center;
  font-size: 4.2vw;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.14em;
  text-align: center;
  transform: translateY(-50%);
}
.change__mediaBoxBottomText span {
  display: inline-block;
  margin-block: 3vw 3.5vw;
  padding-bottom: 1.0vw;
  font-size: 6.2vw;
  line-height: 1;
  color: var(--color-sub);
  border-bottom: 0.2vw solid var(--color-sub);
}


/* con3 voice
-------------------------------------*/
.voice {
  position: relative;
  margin-top: -23.7vw;
}
.voice::before {
  content: "";
  position: absolute;
  top: -4vw;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url(../images/page-communication/con7-voice-bg-sp.jpg) no-repeat;
  background-size: 100% auto;
}
.voice__inner {
  position: relative;
  z-index: 1;
  padding-top: 53.8vw;
  padding-bottom: 29.5vw;
}
.voice__title-wrap {
  position: relative;
  text-align: center;
}
.voice__title-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 70.57vw;
  aspect-ratio: 292.15/34.62;
  transform: translate(-50%, calc(-100% - 7.6vw));
  background: url(../images/front-page/con4-voice-title-deco.svg) center/contain no-repeat;
}
.voice__title-wrap img {
  width: 35.27vw;
}
.voice__voiceWrap {
  width: 95vw;
  max-width: 100vw;
  margin-top: 9.7vw;
  margin-inline: auto;
  padding: 4.83vw 2.41vw;
  background: #fff;
}
.voice__panel {
  padding: 7.2vw 4.8vw;
  background-color: #EFF0F2;
}
.voice__header {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 4.8vw;
}
.voice__item:not(:first-child) {
  margin-top: 4.8vw;
}
.voice__avatar {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 16.9vw;
  height: 16.9vw;
}
.voice__meta {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
}
.voice__course-name {
  display: inline-block;
  width: fit-content;
  padding: 1.2vw;
  font-size: 4.3vw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  color: #fff;
  background-color: var(--color-main);
}
.voice__detail {
  display: inline-block;
  font-size: 3.9vw;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-black);
}
.voice__voice-title {
  grid-column: 1/-1;
  grid-row: 2;
  margin-top: 5.9vw;
  font-size: 4.9vw;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
.voice__line {
  width: 100%;
  height: 0.2vw;
  margin-top: 2.9vw;
  background-color: #D5D5D5;
}
.voice__text {
  margin-top: 2.9vw;
  padding-left: 1.4vw;
  font-size: 3.6vw;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0;
}


/* con4 point
-------------------------------------*/
#point.point {
  margin-top: -22.2vw;
  position: relative;
  background: url(../images/page-clifton/con4-point-bg-sp.png) no-repeat;
  background-size: 100% 100%;
}
#point .point__inner {
  position: relative;
  z-index: 1;
  padding-top: 20.1vw;
  padding-bottom: 21.2vw;
  padding-inline: 6.1vw;
}
.point__titleWrap {
  text-align: center;
}
.point__title-en {
  width: 62vw;
  margin-inline: auto;
}
.point__sectionTitle {
  margin-top: -11.4vw;
  color: #fff;
}
#point .point__titleLine {
  display: block;
  margin-top: 2.8vw;
  font-size: 5.8vw;
  font-weight: 600;
  line-height: 1.4;
}
.point__titleRow {
  display: block;
  margin-top: -5.5vw;
  justify-content: center;
  align-items: center;
}
.point__titleWord {
  display: inline-block;
  padding-bottom: 1.4vw;
  font-size: 7.4vw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--color-sub2);
}
.point__titleNum {
  display: inline-block;
  width: 11.6vw;
  height: auto;
  transform: translateY(2.3vw);
}
.point__pointTitle {
  margin-top: 5.2vw;
  font-size: 6.2vw;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.07em;
  color: #fff;
}

#point .point__list {
  margin-top: 14.2vw;
  margin-inline: auto;
}
#point .point__item {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 3.91%;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "title"
    "img"
    "desc";
}
#point .point__imageWrap {
  grid-area: img;
  margin-top: 5vw;
}
#point .point__titleWrap {
  grid-area: title;
}
#point .point__descWrap {
  grid-area: desc;
}
#point .point__item:nth-child {
  margin-right: 0;
  margin-left: auto;
  grid-template-columns: 40.36% 56.05%;
  grid-template-areas:
    ". img"
    "title img"
    "desc img"
    ". img";
}
#point .point__item:not(:first-child) {
  margin-top: 10.9vw;
}
#point .point__imageWrap img {
  display: block;
  width: 100%;
}
#point .point__pointNum img {
  display: block;
  width: 14.1vw;
}
#point .point__title {
  margin-top: 6vw;
  font-size: 6.2vw;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-align: left;
  color: #fff;
}
#point .point__item picture {
  display: inline-block;
  width: fit-content;
}
#point .point__title span {
  display: inline-block;
}
#point .point__title span:not(:first-child) {
  margin-top: 2.8vw;
}
#point .point__title span img {
  height: 8.7vw;
  width: auto;
  margin-right: 2.4vw;
}
#point .point__desc-text {
  margin-top: 5.2vw;
  font-size: 3.9vw;
  line-height: 1.9;
  letter-spacing: 0.09em;
  color: #fff;
}
#point .point__btnWrap {
  width: 100%;
  margin-top: 15.1vw;
  margin-inline: auto;
}
#point .point__btnWrap a img {
  transition: all 0.2s ease;
}
#point .point__btnWrap a img:hover {
  filter: brightness(1.1);
  opacity: 1;
}


.point__item--2nd {
  margin-top: 10.2vw;
}
.point__item--2nd .point__pointTitle {
  margin-top: 3.6vw;
}
.point__item--3rd .point__pointTitle {
  margin-top: 3.7vw;
}
#point .point__item--3rd .point__desc-text {
  margin-top: 3.3vw;
}




/* con5 flow
-------------------------------------*/
.flow {
  background-color: var(--color-bg-gray);
}
.flow__inner {
  padding-top: 8.7vw;
  padding-inline: 5.31vw;
  padding-bottom: 19.4vw;
}
.flow__title-en {
  width: 100%;
  max-width: 35.3vw;
  margin-inline: auto;
}
.flow__list {
  width: 100%;
  margin-top: 13vw;
  margin-inline: auto;
}
.flow__item {
  display: flex;
  align-items: flex-start;
  column-gap: 4.6vw;
}
.flow__item:not(:first-child) {
  margin-top: 4.7vw;
}
.flow__imageWrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 19.7%;
  height: auto;
  aspect-ratio: 1/1;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 1.2vw 0 0 #e5e5e5;
}
.flow__title-num {
  width: 10.4vw;
  line-height: 1;
}
.flow__imageWrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 31.5vw;
  transform: translate(-50%, 105%);
  background-image: repeating-linear-gradient(
    to bottom,
    #023281 0 3px,
    transparent 3px 10px
  );
  background-size: 100% auto;
}
.flow__item:last-child .flow__imageWrap::after {
  content: none;
}
.flow__imageWrap img {
  display: block;
  width: 100%;
  height: auto;
}

.flow__imageWrap--step01 img { width: 7.5vw; }
.flow__imageWrap--step02 img { width: 7.2vw; }
.flow__imageWrap--step03 img { width: 6.3vw; transform: translateY(0.3vw); }
.flow__imageWrap--step04 img { width: 10.1vw; transform: translateY(0.7vw); }

.flow__titleWrap {
  flex: 1;
}
.flow__title {
  margin-top: 3.2vw;
  font-size: 4.3vw;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0;
}
.flow__desc-text {
  margin-top: 2.3vw;
  font-size: 3.5vw;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.07em;
}


/* con6 service
-------------------------------------*/
.service{
  position: relative;
  background: url(../images/page-clifton/con6-service-bg-sp.jpg) no-repeat var(--color-bg-gray);
  background-size: 100% auto;
  z-index: 1;
  aspect-ratio: 1920 / 800;
}
.service__inner{
  position: relative;
  padding-top: clamp(4rem, 15.848vw - 8.187rem, 14rem);
  padding-inline: var(--sp-guide-1);
  z-index: 2;
}
.service__titleWrap{
  position: relative;
  margin-top: 10vw;
  color: #fff;
}
.service__titleWrap span{
  display: block;
  text-align: center;
  line-height: 1;
}
.service__title-en{
  margin-bottom: 5.6vw;
}
.service__title-en > img{
  height: 2.8vw;
}
.service__title{
  font-size: 2.4rem;
  font-weight: 600;
  line-height: calc(114 / 24);
  padding-bottom: 8vw;
}
.service__title::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 0.2vw;
  background-color: #fff;
}
.service__lead{
  margin-top: 3.2vw;
  padding-inline: 2.3vw;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: left;
}
.service__courseWrap{
  width: 100%;
  margin-top: 8.3vw;
  margin-inline: auto;
  padding: 4.2vw 5.1vw 9.7vw;
  background-color: #fff;
}
.service__days,
.service__price{
  font-size: 2.3rem;
  font-weight: 600;
}
.service__price{
  font-size: 2.5rem;
  color: #FC2F28;
}
.service__notesList{
  margin-top: 4.8vw;
  text-align: left;
}
.service__notesItem{
  line-height: calc(30 / 16);
}
.service__notes{
  margin-top: 1.9vw;
  font-size: 1.4rem;
}
.service__programWrap{
  margin-top: 0vw;
}
.service__programItem{
  margin-top: 4.8vw;
  border: 0.2vw solid #1559A3;
}
.service__programItem:first-child {
  margin-top: 0;
}
.service__programDef{
  display: block;
}
.service__programTitle{
  width: 100%;
  padding-block: 4.1vw 3.6vw;
  font-size: 4.3vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  background-color: #1559A3;
}
.service__programDesc{
  width: 100%;
  position: relative;
  padding: 6.5vw 4.4vw 5.3vw;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: calc(30 / 16);
  letter-spacing: 0.1em;
}
.service__programDescText{
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.service__programDescName{
  margin-top: 1.1em;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
.service__programDescPrice{
  font-size: 2.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.service__programDescNote{
  font-size: 1.4rem;
  line-height: calc(30 / 14);
  letter-spacing: 0.1em;
}
.service__programDef-note{
  width: 100%;
  margin-top: 4.8vw;
  margin-inline: auto;
}
.service__programDef-noteText{
  font-size: 1.4rem;
  line-height: calc(26 / 14);
  letter-spacing: 0.1em;
}
.service__programOffer{
  width: 100%;
  margin-top: 3.9vw;
  padding: 4.8vw 1em;
  font-size: 1.4rem;
  line-height: calc(26 / 14);
  letter-spacing: 0.1em;
  text-align: left;
  border: 1vw solid var(--color-main);
  background-color: #fff;
}
.service__programOffer span{
  font-weight: 700;
}
.service__attention{
  position: relative;
  width: 100%;
  margin-top: 14.1vw;
  padding: 7.2vw 3.9vw 5.4vw;
  border: 0.2vw solid var(--color-sub);
  background-color: #fff;
}
.service__attentionTitle{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 44.9vw;
  height: 8vw;
  text-align: center;
  background-color: #fff;
}
.service__attentionText{
  font-size: 3.6vw;
  line-height: 1.75;
  letter-spacing: 0.05em;
}
.service__note{
  width: 100%;
  margin-top: 9.7vw;
}
.service__noteTitle{
  padding-block: 5.4vw 4.8vw;
  font-size: 4.4vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  background-color: var(--color-main);
}
.service__noteBody{
  padding: 4.2vw 4.3vw 6vw;
  border-bottom: 0.2vw solid var(--color-main);
  border-left: 0.2vw solid var(--color-main);
  border-right: 0.2vw solid var(--color-main);
  background-color: #fff;
}
.service__noteLead{
  font-size: 3.5vw;
  line-height: calc(30 / 16);
  letter-spacing: 0.1em;
  text-align: left;
}
.service__noteList{
  margin-top: 2.1vw;
}
.service__noteItem{
  position: relative;
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 1.5vw;
  padding-left: 4.7vw;
  line-height: 1.85;
  letter-spacing: 0.11em;
}
.service__noteItem::before{
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 1.9vw;
  height: 1.9vw;
  border-radius: 50%;
  background-color: var(--color-main);
}


/* con7 FAQ
-------------------------------------*/
.faq {
  background-color: #F5F5F5;
}
.faq__inner {
  padding-top: 2.6vw;
  padding-inline: var(--sp-guide-1);
}
.faq__content {
  position: relative;
  margin-inline: var(--sp-guide-1);
  padding: 12.8vw 0 12.6vw;
  margin-inline: auto;
  max-width: 100vw;
  z-index: 10;
}
.faq__titleWrap {
  position: relative;
  color: var(--color-dark-navy);
}
.faq__titleWrap span {
  display: block;
  text-align: center;
  line-height: 1;
}
.faq__title-en {
  margin-bottom: 4.8vw;
}
.faq__title-en > img {
  height: 3.5vw;
}
.faq__title {
  font-size: 5.8vw;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 7.7vw;
}
.faq__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12.1vw;
  height: 0.2vw;
  background-color: var(--color-dark-navy);
}
.faq__faq-wrap {
  margin-inline: auto;
  padding-inline: 6vw;
  padding-top: 9.7vw;
}
.faq__faq-group {
  border-bottom: 0.2vw solid #D3D3D3;
}
.faq__faq-group:first-child {
  border-top: 0.2vw solid #D3D3D3;
}
.faq__question {
  display: flex;
  align-items: flex-start;
  padding: 5.3vw 2.7vw 5.3vw 1.2vw;
  cursor: pointer;
  transition: margin-bottom 0.3s ease, padding-bottom 0.3s ease;
}
.faq__question.is-open {
  padding-bottom: 0;
  margin-bottom: 3.4vw;
}
.faq__icon {
  flex-shrink: 0;
  margin-top: 1.5vw;
}
.faq__icon > img {
  width: 5.4vw;
  height: auto;
}
.faq__text {
  padding-left: 6.3vw;
  padding-right: 5.6vw;
  font-size: 3.9vw;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.08em;
}
.faq__line {
  position: relative;
  width: 5.8vw;
  height: 5.8vw;
  margin-top: 0.7vw;
  margin-left: auto;
  align-self: flex-start;
  flex-shrink: 0;
}
.faq__line::before,
.faq__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.8vw;
  height: 0.2vw;
  background-color: var(--color-dark-navy);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq__line::before {
  transform: translate(-50%, -50%);
}
.faq__line::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq__question.is-open .faq__line::after {
  transform: translate(-50%, -50%) rotate(90deg) scale(0);
  opacity: 0;
}
.faq__answer {
  max-height: 0;
  margin-inline: auto;
  padding-inline: 13vw 11.6vw;
  font-size: 3.4vw;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
  overflow: hidden;
}
.faq__question.is-open + .faq__answer {
  max-height: 500px;
  opacity: 1;
  padding-top: 0;
  padding-bottom: 3.4vw;
}

.faq__bottomImage {
  position: relative;
  margin-top: 14.2vw;
  margin-inline: 2.4vw;
  z-index: 1;
}


/* con8 contact_sp
-------------------------------------*/
.contact {
  margin-top: -19.3vw;
  background-color: var(--color-bg-gray);
}
.contact__inner {
  padding-bottom: 29.3vw;
  position: relative;
  margin-inline: auto;
  text-align: center;
}
.contact__head {
  position: relative;
  padding-block: 29.6vw 63.5vw;
  text-align: center;
  color: #fff;
  background: url(../images/page-clifton/con8-bottom-image-bg.jpg) center / cover no-repeat;
}
.contact__lead {
  font-size: 4.8vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.contact__title {
  margin-top: 4.4vw;
}
.contact__title span {
  padding-bottom: 1.4vw;
  font-size: 7.2vw;
  font-weight: 400;
  line-height: 1.75;
  border-bottom: 0.2vw solid #fff;
}
.contact__title span span {
  color: var(--color-sub2);
  border-bottom: none;
}
.contact__form {
  position: relative;
  z-index: 2;
  margin-top: -13vw;
}
.contact .form__inner {
  position: relative;
}
.contact .form__inner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-54.8%, -100%);
  width: 41vw;
  background: url(../images/page-clifton/con8-bottom-coach.png) center / contain no-repeat;
  aspect-ratio: 197/227;
}

}


/* =====================================
  @media screen and (max-width: 414px)
===================================== */
@media screen and (max-width: 413px) {

  .page-hero {
    margin-bottom: clamp(8.4rem, 75.269vw - 15.686rem, 15.4rem);
  }
  .page-hero::after {
    bottom: clamp(3.8rem, 32.258vw - 6.523rem, 6.8rem);
    width: clamp(11.8rem, 89.247vw - 16.759rem, 20.1rem);
  }
  .page-hero__caption {
    font-size: clamp(1rem, 2.151vw + 0.312rem, 1.2rem);
  }
  .page-hero__pageTitle {
    font-size: clamp(2.8rem, 12.903vw - 1.329rem, 4rem);
  }
  .page-hero__descTitle {
    font-size: var(--sp-xs-font12-14);
  }
  .page-hero__descCatch {
    font-size: var(--sp-xs-font12-14);
  }
  .page-hero__descText {
    font-size: var(--sp-xs-font12-16);
  }

  #worry .worry__title {
    font-size: var(--sp-xs-font20-24);
  }

  .change__title {
    font-size: var(--sp-xs-font20-24);
  }


  .point__titleLine {
    font-size: var(--sp-xs-font20-24);
  }
  #point .point__title {
    font-size: var(--sp-xs-font20-26);
  }
  .point__title span img {
    height: clamp(3.2rem, 4.301vw + 1.824rem, 3.6rem);
  }
  .service__lead {
    font-size: clamp(1.3rem, 3.226vw + 0.268rem, 1.6rem);
  }
  .service__notesItem {
    font-size: var(--sp-xs-font14-16);
  }
  .service__notes {
    font-size: var(--sp-xs-font12-14);
  }
  .service__programDesc {
    padding: 2rem clamp(1.2rem, 5.376vw - 0.52rem, 1.7rem) 2.2rem;
  }
  .service__programDescItem {
    font-size: var(--sp-xs-font14-16);
  }
  .service__programDescText {
    font-size: var(--sp-xs-font12-16);
  }
  .service__programDescName {
    font-size: clamp(1.3rem, 3.226vw + 0.268rem, 1.6rem);
  }
  .service__programDescNote {
    font-size: clamp(1rem, 4.301vw - 0.376rem, 1.4rem);
  }
  .service__noteItem {
    font-size: var(--sp-xs-font14-16);
  }
  .faq__faq-wrap {
    padding-inline: clamp(0.8rem, 18.28vw - 5.049rem, 2.5rem);
  }
  .faq__text {
    font-size: var(--sp-xs-font14-16);
    padding-inline: clamp(1.2rem, 15.054vw - 3.617rem, 2.6rem);
  }


}