@charset "utf-8";

/* ファーストビュー */
.topFv {
    position: relative;
}

.topFvInstaLinkBox {
    position: absolute;
    left: 0;
    bottom: 3rem;
    z-index: 10;
}

.topFvSliderBox {
    display: flex;
    gap: 3.5rem;
    border: 4rem solid var(--white);
    background: var(--white);
}

.topFvArea {
    width: 100%;
    padding: 0 0 0 11rem;
}

.topFvBox {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 1808/775;
    border-radius: 2rem 0 0 2rem;
    overflow: hidden;
    background: var(--primary);
}

.topFvTextBox {
    width: 51%;
    max-width: 98.8rem;
    padding: 23.5rem 1.5rem 14rem 6.5rem;
}

.topFvTextBox01 {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: max-content;
}

.topFvText01 {
    max-width: max-content;
    font-size: 3rem;
    line-height: 1.45;
    color: var(--white);
    text-shadow: 0 .3rem .6rem rgba(0, 0, 0, 0.16);
}

.topFvText01 span {
    position: relative;
    margin: 0 1.5rem;
}

.topFvText01 span::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 5.7rem;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background: var(--tertiary);
    top: -100%;
    right: -100%;
    bottom: -100%;
    left: -100%;
    margin: auto;
}

.topFvText02Flex {
    display: flex;
}

.topFvText02 {
    max-width: max-content;
    margin: 1rem 0 0;
    font-size: 3rem;
    line-height: 1.45;
    color: var(--white);
    text-shadow: 0 .3rem .6rem rgba(0, 0, 0, 0.16);
}

.topFvText02 span {
    font-size: 5.5rem;
}

.topFvTextBox02 {
    margin: 7.5rem 0 0;
}

.topFvText03 {
    font-size: 3rem;
    line-height: 1.45;
    color: var(--white);
    text-shadow: 0 .3rem .6rem rgba(0, 0, 0, 0.16);
}

.topFvText04 {
    margin: 3.4rem 0 0;
    max-width: max-content;
    padding: 0 1.2rem 1rem;
    font-size: 7.5rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    background: var(--white);
    font-weight: 600;
    color: var(--primary);
    border-radius: 1rem;
    box-shadow: .8rem .8rem 0 var(--tertiary)
}

.topFvSliderBox {
    position: absolute;
    z-index: 10;
    right: -4rem;
    top: -100%;
    bottom: -100%;
    height: 200%;
    width: 65%;
    max-width: 116rem;
    margin: auto;
    transform: translate(10%, 0) rotate(-20deg);
}

.loopWr {
    gap: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.loopImgAr {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    width: 100%;
    justify-items: center;
}

.loopImgBx {
    border-radius: 2rem;
    max-width: 36.3rem;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.loopImgBx img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

/* ファーストビュー */

/* 教室案内 */

.topGuide {
    padding: 12rem 0 7rem;
}

.topGuideArea {
    max-width: 161.8rem;
}

.topGuideBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.topGuideBoxLeft {
    width: 50%;
}

.topGuideBoxLeftIn {
    width: 100%;
    max-width: 67rem;
    margin: 0 0 0 auto;
}

.topGuideTextBg01 {
    margin: 0 1rem 0 0;
    padding: 0 1.2rem .4rem;
    border-radius: 1.5rem;
    color: var(--white);
    background: var(--tertiary);
}

.topGuideTextBg02 {
    margin: 0 1rem 0 1rem;
    padding: 0 1.2rem .4rem;
    border-radius: 1.5rem;
    color: var(--white);
    background: var(--primary);
}

.topGuideText02 {
    margin: 2rem 0 0;
}

.topGuideText02 span:first-of-type {
    margin: 0 1rem 0 0;
}

.topGuideText02 span:last-of-type {
    margin: 0 0 0 -1.3rem;
}

.topGuideText02 br {
    display: none;
}

.topGuideTxtBox {
    max-width: 59rem;
    margin: 7rem 0 0;
}

.topGuideText03 {
    font-size: 1.8rem;
}

.titDotGreen::before,
.titDotWhite::before {
    top: calc(100% + 0.5rem);
}

.topGuideTxtBox p:nth-of-type(n + 2) {
    margin: 2rem 0 0;
}

.topGuideText04 {
    font-size: 2.3rem;
    line-height: 1.74;
    font-weight: 800;
    color: var(--primary);
}

.topGuideBtn {
    margin: 4rem 0 0 auto !important;
}

.topGuideBoxRight {
    position: relative;
    width: 47%;
    max-width: 73.8rem;
    aspect-ratio: 369/337;
}

.topGuideImg01 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 2rem;
    width: 60%;
    max-width: 43.5rem;
    overflow: hidden;
    box-shadow: 3.3rem 3.3rem 0 var(--primary);
}

.topGuideImg02 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    border-radius: 2rem;
    width: 50%;
    max-width: 32.7rem;
    overflow: hidden;
}

/* 教室案内 */

/* 理由 */

.topReason {
    position: relative;
    padding: 12rem 0;
    background: var(--secondary);
}

.topReason::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 30%;
    max-width: 55rem;
    aspect-ratio: 55/238;
    background: url(../../../../uploads/cmn_deco01_orange.svg)no-repeat top right /contain;
}

.topReason::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 30%;
    max-width: 55rem;
    aspect-ratio: 55/238;
    background: url(../../../../uploads/cmn_deco02_green.svg)no-repeat bottom left /contain;
}

.topReasonArea {
    position: relative;
    z-index: 5;
    max-width: 116.5rem
}

.topReasonFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.topReasonFlexRev {
    flex-direction: row-reverse;
}

.topReasonFlex:nth-of-type(n+2) {
    margin: 6rem 0 0;
}

.topReasonFlexFukidashiBox {
    display: flex;
    justify-content: center;
    flex: 1;
}

.topReasonFlexFukidashi {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 45rem;
    min-height: 24.5rem;
    padding: 6.6rem 1.5rem 6.9rem;
    border-radius: 1.85rem;
    text-align: center;
}

.topReasonFlexFukidashi01 {
    margin: 0 3.56rem 0 0;
    border: .3rem solid var(--primary);
    background: url(../../../../uploads/cmn_deco03.svg) no-repeat bottom left /36.6%;
}

.topReasonFlexFukidashi01::before {
    content: "";
    position: absolute;
    top: 45%;
    right: 0;
    border-style: solid;
    border-width: 0 0 2.8rem 4rem;
    border-color: transparent transparent transparent var(--primary);
    translate: 100% -50%;
}

.topReasonFlexFukidashi01::after {
    content: "";
    position: absolute;
    top: 45%;
    right: 0;
    border-style: solid;
    border-width: 0 0 2.13rem 3.05rem;
    border-color: transparent transparent transparent var(--secondary);
    translate: 100% calc(-50% - 0.03rem);
}

.topReasonFlexFukidashi02 {
    margin: 0 0 0 3.56rem;
    border: .3rem solid var(--tertiary);
    background: url(../../../../uploads/cmn_deco04.svg) no-repeat bottom right /23%;
}

.topReasonFlexFukidashi02::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border-style: solid;
    border-width: 0 4rem 2.8rem 0;
    border-color: transparent var(--tertiary) transparent transparent;
    translate: -100% -50%;
}

.topReasonFlexFukidashi02::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border-style: solid;
    border-width: 0 3.05rem 2.13rem 0;
    border-color: transparent var(--secondary) transparent transparent;
    translate: -100% calc(-50% - 0.03rem);
}

.topReasonFlexFukidashiText01 {
    font-size: 4rem;
    line-height: 1.45;
    letter-spacing: 0.05em;
}

.topReasonFlexFukidashiText02 {
    font-size: 3.5rem;
    line-height: 1.45;
    letter-spacing: 0.05em;
}

.topReasonFlexTextBox {
    width: 51%;
    max-width: 59rem;
}


.topReasonText01 span {
    color: var(--primary);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.75em;
}

.topReasonText01:nth-of-type(n+2) {
    margin: 4rem 0 0;
}

/* 理由 */

/* お悩み */

.topWorry {
    padding: 13.5rem 0 11rem;
    background: url(../../../../uploads/bg_grid_green.svg) no-repeat center /cover;
}

.topWorryArea {
    max-width: 121rem;
}

.topWorryTitBox {
    display: flex;
    gap: 7rem;
    align-items: center;
    justify-content: center;
}

.topWorryTitIllust01 {
    width: 5.59rem;
}

.topWorryTitIllust02 {
    width: 11.7rem;
}

.topWorryTitIllust03 {
    display: none;
}

.topWorryBox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem 6.5rem;
}

.topWorryItem {
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 7/4;
    padding: 1rem;
    box-shadow: 1rem 1rem 0 var(--primary);
    border-radius: 2rem;
    background: var(--secondary) url(../../../../uploads/worry_deco01.svg) no-repeat top 2rem right 2rem /4.4rem 3.3rem;
}

.topWorryItemText {
    font-size: 2.5rem;
    line-height: 1.45;
    text-align: center;
}

.topWorryItemText span {
    font-weight: 800;
    color: var(--primary);
}

.topWorryItemText .none {
    display: none;
}

.topWorryArrow {
    margin: 6.5rem 0 0;
    width: 100%;
}

.topWorryArrowText {
    width: 100%;
    max-width: max-content;
    margin: 4rem auto 0;
    text-align: center;
}

.topWorryArrowText br {
    display: none;
}

/* お悩み */

/* 強み */

.topStrBanner {
    position: relative;
    width: 100%;
    height: 29.5rem;
    background: url(../../../../uploads/top_str_bg.jpg) no-repeat center /cover;
}

.topStrBanner::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--primary);
    opacity: .35;
}

.topStrBannerTextBox {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.8rem;
    height: 100%;
    width: 100%;
    max-width: max-content;
    margin: auto;
}

.topStrBannerTextBox::before,
.topStrBannerTextBox::after {
    content: "";
    display: block;
    width: 6rem;
    aspect-ratio: 60/57;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: translateY(1rem);
}

.topStrBannerTextBox::before {
    background: url(../../../../uploads/str_deco_left.svg) no-repeat center /contain;
}

.topStrBannerTextBox::after {
    order: 2;
    background: url(../../../../uploads/str_deco_right.svg) no-repeat center /contain;
}

.topStrBannerTextBoxIn {
    color: var(--white);
}

.topStrBannerTextBoxIn .topStrBannerText01,
.topStrBannerTextBoxIn .topStrBannerText02 {
    text-shadow: 0 .3rem .4rem rgba(0, 0, 0, 0.35);
}

.topStrBannerText01 {
    font-size: 3.5rem;
    line-height: 1.45;
}

.topStrBannerText02 {
    font-size: 3.5rem;
    line-height: 1.45;
    letter-spacing: 0.15em;
    text-align: center;
}

.topStrBannerTextSpan01 {
    font-size: 7.2rem;
    line-height: 1.45;
    letter-spacing: 0.05em;
}

.topStrBannerTextSpan02 {
    font-size: 5rem;
    line-height: 1.45;
    letter-spacing: 0.05em;
}

.topStr {
    padding: 7rem 0 11rem;
    background: var(--primary);
}

.topStrArea {
    max-width: 121rem;
}

.topStrFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.topStrFlex:nth-of-type(n + 2) {
    margin: 8rem 0 0;
}

.topStrFlex:nth-of-type(2n) {
    flex-direction: row-reverse;
}

.topStrImgBox {
    width: 48%;
    max-width: 50rem;
    margin: 0 2rem 0 0;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 2rem 2rem 0 var(--tertiary);
}

.topStrTextBox {
    width: 51%;
    max-width: 60rem;
}

.topStrTextBox p {
    color: var(--white);
}

.topStrText01 {
    font-size: 2.5rem;
    line-height: 1.45;
    text-wrap: nowrap;
}

.topStrText01 span {
    font-size: 4rem;
    line-height: 1.45;
}

.topStrText02 {
    margin: 1.5rem 0 0;
    font-size: 3rem;
    line-height: 1.45;
    text-wrap: nowrap;
}

.topStrText02 span {
    font-size: 3.5rem;
    padding: 0 1.2rem .5rem;
    color: #00A792;
    border: .3rem solid #00A792;
    border-radius: 1rem;
    line-height: 1.45;
    background: var(--secondary);
}

.topStrText02 .none {
    display: none;
}

.topStrText03 {
    margin: 4rem 0 0;
}

.topStrText03 span {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.45;
    text-decoration: underline;
    text-decoration-color: var(--tertiary);
    text-underline-offset: .5rem;
    text-decoration-thickness: .3rem
}

/* 強み */

/* 違い */
.topDifferenceBg {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 6/1;
    background: var(--primary) url(../../../../uploads/top_difference_bg.png) no-repeat center bottom /cover;
    margin: -1px 0 0;
}

.topDifferenceWrap {
    padding: 0 0 11.8rem 0;
    background: var(--quaternary);
}


.topDifferenceArea {
    max-width: 121rem;
}

.topDifferenceBox {
    position: relative;
    z-index: 5;
    margin: -12rem 0 0;
}

.topDifferenceTit {
    width: 100%;
    max-width: max-content;
    margin: 0 auto;
}

.topDifferenceGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin: 8.5rem 0 0;
    justify-items: center;
}

.topDifferenceGridItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 27.3rem;
    aspect-ratio: 1/1;
    padding: 4rem 0 0;
    border-radius: 100%;
    background: var(--secondary);
    box-shadow: .5rem 1rem 0 var(--tertiary);
}

.topDifferenceGridItemNum {
    font-size: 4rem;
    line-height: 1.45;
}

.topDifferenceGridItemTextBox {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7.6rem;
    margin: 2rem 0 0;
}

.topDifferenceGridItemText {

    line-height: 1.6;
    font-size: 2.5rem;
    text-align: center;
}

.topDifferenceGridItemText span {
    font-weight: 700;
}

/* 違い */

/* 選ばれる理由 */

.topDifferenceReason {
    margin: 9.7rem 0 0;
}

.topDifferenceReasonTit {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 708/127;
    max-width: max-content;
    margin: 0 auto;
    padding: 0 6.6rem;
    color: var(--white);
    text-align: center;
    background: url(../../../../uploads/top_difficult_title_bg.svg)no-repeat center /contain;
}

.topDifferenceReasonTit br {
    display: none;
}

.topDifferenceReasonBox {
    position: relative;
    width: 100%;
    margin: -5rem 0 0;
    padding: 10.2rem 3rem 3rem;
    border-radius: 2rem;
    background: var(--white) url(../../../../uploads/bg_grid_green.svg)no-repeat center /cover;
}

.topDifferenceReasonIn {
    width: 100%;
    margin: 0 auto;
}

.topDifferenceReasonFlex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.topDifferenceReasonFlex:nth-of-type(n + 2) {
    margin: 2rem 0 0;
}

.topDifferenceReasonIcon {
    width: 2.85rem;
}

.topDifferenceReasonText {
    flex: 1;
    max-width: max-content;
    font-size: 2.5rem;
    line-height: 1.45;
}

.topDifferenceReasonText01 {
    width: 100%;
    max-width: max-content;
    margin: 4rem 0 0 auto;
    font-size: 2rem;
    color: var(--primary);
}

.topDifferenceReasonText01 br {
    display: none;
}

.topDifferenceReasonIllust {
    position: absolute;
    left: 9.4rem;
    bottom: 0;
    width: 14.8rem;
    z-index: 1;
}

/* 選ばれる理由 */


/* 朝勉 */
.topMorning {
    position: relative;
    padding: 11.2rem 0 17rem;
}

.topMorning>div {
    position: relative;
    z-index: 5;
}

.topMorning::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 30%;
    max-width: 55rem;
    aspect-ratio: 55/238;
    background: url(../../../../uploads/cmn_deco01_green.svg)no-repeat top right /contain;
}

.topMorning::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 30%;
    max-width: 55rem;
    aspect-ratio: 55/238;
    background: url(../../../../uploads/cmn_deco02_orange.svg)no-repeat bottom left /contain;
}

.topMorningTitleBox {
    max-width: 121rem;
}

.topMorningTitle01 {
    position: relative;
    width: 100%;
    max-width: fit-content;
}

.topMorningTitle01::before {
    content: "";
    position: absolute;
    top: 70%;
    left: -2rem;
    right: -1.5rem;
    z-index: -1;
    background: url(../../../../uploads/top_morning_title_deco.svg) no-repeat center /contain;
    aspect-ratio: 247/36;
}

.topMorningTitle02 {
    width: 100%;
    max-width: max-content;
    margin: 2rem 0 0;
    color: var(--primary);
}

.topMorningFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 156.5rem;
    margin: 7rem 0 0;
    gap: 4.5rem;
}

.topMorningFlexImgBox {
    position: relative;
    width: 52%;
    max-width: 80rem;
}

.topMorningFlexImgBox img {
    border-radius: 0 2rem 2rem 0;
}

.topMorningFlexImgBox::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 2rem;
    right: -2rem;
    bottom: -2rem;
    left: 0;
    background: var(--primary);
    border-radius: 0 2rem 2rem 0;
}

.topMorningFlexTextBox {
    position: relative;
    flex: 1;
    max-width: 60.5rem;
    padding: 0 5rem 0 0;
}

.topMorningIllust01 {
    position: absolute;
    bottom: 98%;
    right: -6rem;
    width: 20.2rem;
    z-index: 1;
}

.topMorningFlexText02 {
    margin: 4rem 0 0;
}

.topMorningFlexText02 span {
    font-size: 2rem;
    color: var(--primary);
    font-weight: 800;
}

.topMorningBtn {
    margin: 3.8rem 0 0 auto;
}

/* 朝勉 */

/* コース */
.topCourseArea {
    width: 100%;
    max-width: 121rem;
    margin: 13rem auto 0;
    padding: 0 1.5rem;
}

.topCourseTitle {
    width: 100%;
    max-width: max-content;
    margin: 0 auto;
    color: var(--primary);
}

.topCourseBox {
    display: flex;
    flex-direction: column;
    margin: 8rem 0 0;
    gap: 7rem;
}

.topCourseItem {
    position: relative;
    display: flex;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 .3rem .6rem rgba(0, 0, 0, 0.16);
}

.topCourseItem:first-of-type {
    background: var(--secondary) url(../../../../uploads/link_arrow_green.svg) no-repeat right bottom /15rem 9.5rem;
}

.topCourseItem:last-of-type {
    background: var(--quaternary) url(../../../../uploads/link_arrow_orange.svg) no-repeat right bottom /15rem 9.5rem;
}

.topCourseImg {
    overflow: hidden;
    width: 50%;
}

.topCourseImg img {
    transition: all .3s;
}

.topCourseItem:hover .topCourseImg img {
    transform: scale(1.1);
}

.topCourseTextBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 2rem 5rem 3rem 6rem;
}

.topCourseText01 {
    font-weight: 800;
}

.topCourseText02 {
    width: 100%;
    margin: 3rem 0 0;
    font-size: 2rem;
    line-height: 1.45;
}

.topCourseItem:first-of-type .topCourseText01,
.topCourseItem:first-of-type .topCourseText02 {
    color: var(--primary);
}

.topCourseItem:last-of-type .topCourseText01,
.topCourseItem:last-of-type .topCourseText02 {
    color: var(--tertiary);
}

.topCourseTextFlexBox {
    margin: 4rem 0 0;
}

.topCourseTextFlex {
    display: flex;
}

.topCourseText03 {
    font-size: 1.8rem;
    line-height: 1.95;
}

.topCourseText04 {
    position: absolute;
    bottom: 0;
    left: 2rem;
    font-size: 5rem;
    line-height: 1;
    opacity: .25;
}

.topCourseItem:first-of-type .topCourseText04 {
    color: var(--primary);
}

.topCourseItem:last-of-type .topCourseText04 {
    color: var(--tertiary);
}

/* コース */

/* 卒業生の声 */
.topVoices {
    margin: 10rem 0 0;
}

.topVoicesArea {
    max-width: 110rem;
}

.topVoicesBox {
    margin: 5rem 0 0;
}

/* 卒業生の声 */

/* 合格実績 */
.topPass {
    position: relative;
    padding: 11rem 0;
    background: url(../../../../uploads/top_passed_bg.jpg)no-repeat center/cover;
}

.topPass::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--white);
    opacity: .68;
}

.topPassArea {
    position: relative;
    z-index: 5;
    max-width: 121rem;
}

.topPassTit {
    position: relative;
    width: 100%;
    max-width: max-content;
    margin: 0 auto;
    padding: 0 1.2rem .5rem;
    color: var(--white);
    line-height: 1.2;
    background: var(--primary);
    border-radius: 1.5rem;
}

.topPassTit br {
    display: none;
}

.topPassTit::before,
.topPassTit::after {
    content: "";
    position: absolute;
    top: -100%;
    bottom: -100%;
    margin: auto;
    width: 12rem;
    aspect-ratio: 12/13;
}

.topPassTit::before {
    right: calc(100% + .3rem);
    background: url(../../../../uploads/top_passed_illust01_left.png)no-repeat center /contain;
}

.topPassTit::after {
    left: calc(100% + .3rem);
    background: url(../../../../uploads/top_passed_illust01_right.png)no-repeat center /contain;
}

.topPassTxt01 {
    margin: 4rem 0 0;
    text-align: center;
    font-size: 1.8rem;
    color: var(--primary);
}

.topPassBox {
    position: relative;
    margin: 9rem 0 0;
    padding: 0 1.5rem 8rem;
    background: var(--quaternary) url(../../../../uploads/bg_grid_white.svg)no-repeat center /cover;
    border: .3rem solid var(--fifth);
}

.topPassIllust {
    position: absolute;
    right: 0;
    bottom: 100%;
    width: 20.7rem;
    z-index: -1;
}

.topPassBoxTit {
    width: 47rem;
    aspect-ratio: 235/64;
    margin: -2.2rem auto 0;
}

.topPassItem {
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
}

.topPassItemTitFlex {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 5rem;
    border-bottom: .3rem solid var(--black);
    gap: 1rem;
}

.topPassItemTitLeft {
    font-size: 2.5rem;
    line-height: 1.45;
}

.topPassItemTitRight {
    font-size: 6.1rem;
    color: var(--fifth);
    line-height: 1.45;
}

.topPassItemTitRight span {
    font-size: 3.5rem;
    line-height: 1.45;
}

.topPassItemTxtGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 10rem;
    width: 100%;
    max-width: 70rem;
    margin: 4rem auto 0;
}

.topPassItemTxtFlex {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.topPassItemTxt {
    font-size: 2rem;
    line-height: 1.45;
}

.topPassItemTxt:first-of-type {
    flex: 1;
}

/* 合格実績 */

.topBgFrame {
    padding: 11.3rem 0 13rem;
    background: var(--secondary);
}


/* 卒業生の声 */
.topVoices {
    position: relative;
    margin: 5rem 0 0;
}

.topVoicesTit {
    width: 100%;
    max-width: max-content;
    margin: 0 auto;
    color: var(--primary);
}

.topVoicesTit::after {
    content: "";
    position: absolute;
    right: calc(100% + 5rem);
    top: -100%;
    bottom: -100%;
    margin: auto;
    width: 9.5rem;
    aspect-ratio: 95/53;
    background: url(../../../../uploads/top_voices_fukidashi_icon.svg)no-repeat center /contain;
}

.topVoicesTxt {
    margin: 5rem 0 0;
    text-align: center;
    font-size: 1.8rem;
}

.topVoicesBox {
    margin: 5rem 0 0;
}

/* 卒業生の声 */

/* 無料体験授業 */
.topFree {
    position: relative;
    z-index: 1;
    margin: 10rem 0 0;
}

.topFreeArea {
    max-width: 135rem;
}

.topFreeBox {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 5rem 7rem 5.5rem;
    border-radius: 2rem;
    background: var(--primary);
    box-shadow: 0rem .3rem .6rem rgba(0, 0, 0, 0.16);
}

.topFreeBox::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 2rem;
    left: 2rem;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    background: var(--tertiary);
    box-shadow: 0rem .3rem .6rem rgba(0, 0, 0, 0.16);
}

.topFreeTextBox {
    width: 50%;
    max-width: 59rem;
}

.topFreeTit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 59/13;
    font-size: 2.5rem;
    line-height: 1.45;
    background: url(../../../../uploads/top_free_title_bg.svg)no-repeat center/contain;
}

.topFreeTit span {
    font-size: 4rem;
    line-height: 1.45;
    color: var(--primary);
}

.topFreeTxt {
    margin: 4rem 0 0;
    color: var(--white);
}

.topFreeBtn {
    margin: 4rem auto 0;
}

.topFreeBtn a {
    color: var(--white);
}

.topFreeImgBox {
    position: relative;
    width: 48%;
    max-width: 52rem;
}

.topFreeImgBox img {
    border-radius: 2rem;
}

.topFreeImgBox::before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -2rem;
    right: -2rem;
    width: 14.5rem;
    aspect-ratio: 175/145;
    background: url(../../../../uploads/top_free_illust01.png)no-repeat center/contain;
}

/* 無料体験授業 */

/* Instagram */
.topInstagram {
    margin: 10rem 0 0;
}

.topInstagramArea {
    max-width: 132rem;
}

.sbi_photo_wrap {
    border-radius: 2rem; 
}

.topInstagramBtnBox {
    display: flex;
    align-items: center;
    gap: 3.3rem;
    margin: 4rem 0 0;
}

.topInstagramBtn {
    width: 100%;
    max-width: 26rem;
    height: 5.4rem;
}

.topInstagramBtn a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100vmax;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--white);
    transition: all .3s;
    text-shadow: 0 .3rem .6rem rgba(0, 0, 0, 0.16);
    box-shadow: 0 .3rem .6rem rgba(0, 0, 0, 0.16);
    background: url(../../../../uploads/instagram_btn.jpg)no-repeat center /cover;
}

.topInstagramBtnBox::before {
    content: "";
    display: block;
    flex: 1;
    height: .3rem;
    background: url(../../../../uploads/undeline_dashed_green.svg)no-repeat center /cover;
}

.topInstagramBtn a:hover {
    filter: brightness(1.1);
}

/* Instagram */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=1550px) {

    .topFvTextBox {
        padding: 15rem 1.5rem 10rem;
    }

    .topFvSliderBox {
        right: -14rem;
    }

    .topMorningIllust01 {
        right: 1rem;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=1024px) {

    .topFvTextBox {
        padding: 8rem 1.5rem 2rem;
    }

    .topFvSliderBox {
        right: -10rem;
    }

    .topFvSliderBox {
        border: 2rem solid var(--white);
    }

    .topFvText01 {
        font-size: 2.2rem;
    }

    .topFvText01 span {
        margin: 0 .8rem;
    }

    .topFvText01 span::before {
        width: 4rem;
    }

    .topFvText02 {
        font-size: 2.2rem;
    }

    .topFvText02 span {
        font-size: 3.5rem;
    }

    .topFvTextBox02 {
        margin: 3.5rem 0 0;
    }

    .topFvText03 {
        font-size: 2.2rem;
    }

    .topFvText04 {
        font-size: 4.5rem;
    }

    .topStrText02 {
        text-wrap: wrap;
    }

    .topStrText02 .none {
        display: block;
    }

    /* 違い */
    .topDifferenceBox {
        margin: -6rem 0 0;
    }

    .topDifferenceGrid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 70rem;
        margin: 8.5rem auto 0;
    }

    .topDifferenceReasonIllust {
        left: 5rem;
    }

    /* 違い */

    .topWorryItemText {
        font-size: 2rem;
    }

    /* 卒業生の声 */
    .topVoicesTit::after {
        right: calc(100% + 2.5rem);
    }

    .topMorningFlexTextBox {
        padding: 0 2rem;
    }
}


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=768px) {

    /* ファーストビュー */
    .topFvInstaLinkBox {
        display: none;
    }

    .topFvArea {
        padding: 0 1.5rem;
    }

    .topFvBox {
        flex-direction: column;
        aspect-ratio: auto;
        padding: 0 0 35rem 0;
        border-radius: 2rem;
    }

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

    .topFvTextBox {
        width: 100%;
        max-width: 55rem;
        margin: 0 auto;
        padding: 3.5rem 1.5rem 0;
    }

    .topFvText01 {
        font-size: 1.7rem;
        text-align: center;
    }

    .topFvText01 span {
        font-size: 2.1rem;
    }

    .topFvText01 span::before {
        width: 3.3rem;
    }

    .topFvText01 {
        text-align: center;
    }

    .topFvText02Flex {
        width: 80%;
        max-width: 26rem;
        flex-direction: column;
    }

    .topFvText02Flex .topFvText02:last-of-type {
        margin: 0 0 0 auto;
    }

    .topFvText02 {
        text-align: center;
        font-size: 1.7rem;
    }

    .topFvText02 br {
        display: block;
    }

    .topFvText03 {
        text-align: center;
        font-size: 1.8rem;
    }

    .topFvText04 {
        position: relative;
        z-index: 15;
        margin: 2.5rem auto 0;
    }

    .topFvSliderBox {
        top: auto;
        right: -100%;
        left: -100%;
        bottom: -16%;
        gap: 1.5rem;
        width: 140%;
        height: 47rem;
        margin: 0 auto;
        overflow: hidden;
        transform: translateX(10%) rotate(-15deg);
    }

    /* ファーストビュー */

    /* 教室案内 */

    .topGuide {
        padding: 6rem 0 5rem;
    }

    .topGuideBox {
        flex-direction: column;
    }

    .topGuideBoxLeft,
    .topGuideBoxLeftIn {
        display: contents;
    }

    .topGuideTextBg01 {
        margin: 0 .5rem 0 0;
    }

    .topGuideTextBg02 {
        margin: 0 .5rem;
    }

    .topGuideTxtBox {
        order: 1;
        margin: 3rem 0 0;
    }

    .topGuideText02 {
        text-align: center;
    }

    .topGuideText02 span:last-of-type {
        display: block;
        max-width: max-content;
        margin: 1.5rem auto 0;
    }

    .topGuideText02 span:last-of-type::before {
        display: block;
    }

    .topGuideText02 br {
        display: block;
    }

    .topGuideTxtBox p:nth-of-type(n + 2) {
        margin: 1rem 0 0;
    }

    .topGuideText03 {
        font-size: 1.6rem;
    }

    .topGuideText04 {
        font-size: 1.8rem;
    }

    .topGuideBtn {
        margin: 4rem auto !important;
    }

    .topGuideBoxRight {
        width: 100%;
        aspect-ratio: 34/25;
        margin: 4rem 0 0;
    }

    .topGuideImg01 {
        box-shadow: 1.2rem 1.2rem 0 var(--primary);
    }

    /* 教室案内 */

    /* 理由 */

    .topReason {
        padding: 7rem 0 11rem;
    }

    .topReasonFlex {
        gap: 4.2rem;
    }

    .topReasonFlex,
    .topReasonFlexRev {
        flex-direction: column;
    }

    .topReasonFlex:nth-of-type(n+2) {
        margin: 4rem 0 0;
    }

    .topReasonFlexFukidashiBox {
        width: 100%;
    }

    .topReasonFlexTextBox {
        width: 100%;
    }

    .topReasonFlexFukidashi {
        width: 100%;
        max-width: 25.8rem;
        min-width: auto;
        min-height: 14rem;
        margin: 0;
        padding: 3.4rem 1.5rem 3.7rem;
    }

    .topReasonFlexFukidashi01::before {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 2rem 2.7rem 0 0;
        border-color: var(--primary) transparent transparent;
        translate: -50% 100%;
    }

    .topReasonFlexFukidashi01::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 1.4rem 1.9rem 0 0;
        border-color: var(--secondary) transparent transparent;
        translate: calc(-50% - .1rem) 100%;
    }

    .topReasonFlexFukidashi02::before {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 2rem 2.7rem 0 0;
        border-color: var(--tertiary) transparent transparent;
        translate: -50% 100%;
    }

    .topReasonFlexFukidashi02::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 1.4rem 1.9rem 0 0;
        border-color: var(--secondary) transparent transparent;
        translate: calc(-50% - .1rem) 100%;
    }

    .topReasonFlexFukidashiText01 {
        font-size: 2.7rem;
    }

    .topReasonFlexFukidashiText02 {
        font-size: 2rem;
    }

    .topReasonText01 span {
        font-size: 1.6rem;
    }

    .topReasonText01:nth-of-type(n+2) {
        margin: 2rem 0 0;
    }

    /* 理由 */

    /* お悩み */

    .topWorry {
        padding: 6rem 0 5rem;
    }

    .topWorryTitIllust01,
    .topWorryTitIllust02 {
        display: none;
    }

    .topWorryTitIllust03 {
        display: block;
        width: 100%;
        max-width: 12.5rem;
        margin: 2rem auto 0;
        transform: translateX(-20%);
    }

    .topWorryBox {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
        margin: 1rem 0 0;
    }

    .topWorryItem {
        box-shadow: .5rem .5rem 0 var(--primary);
        background: var(--secondary) url(../../../../uploads/worry_deco01.svg) no-repeat top .8rem right 1.1rem /2.4rem 1.8rem;
    }

    .topWorryItemText {
        font-size: 1.6rem;
    }

    .topWorryItemText br {
        display: block;
    }

    .topWorryItemText .none {
        display: block;
    }

    .topWorryArrow {
        margin: 3rem 0 0;
    }

    .topWorryArrowText br {
        display: block;
    }

    /* お悩み */

    /* 強み */

    .topStrBanner {
        height: 16rem;
    }

    .topStrBannerTextBox {
        gap: 1.5rem;
    }

    .topStrBannerTextBox::before,
    .topStrBannerTextBox::after {
        width: 4rem;
    }

    .topStrBannerText01 {
        font-size: 2.2rem;
    }

    .topStrBannerText02 {
        font-size: 2.2rem;
    }

    .topStrBannerTextSpan01 {
        font-size: 4.5rem;
    }

    .topStrBannerTextSpan02 {
        font-size: 3rem;
    }

    .topStr {
        padding: 4rem 0 8.4rem;
    }

    .topStrFlex,
    .topStrFlex:nth-of-type(2n) {
        flex-direction: column-reverse;
    }

    .topStrFlex:nth-of-type(n + 2) {
        margin: 5.5rem 0 0;
    }

    .topStrImgBox {
        width: 100%;
    }

    .topStrTextBox {
        width: 100%;
    }

    .topStrImgBox {
        width: 100%;
        max-width: 50rem;
        margin: 0 1.5rem 0 0;
        box-shadow: 1.5rem 1.5rem 0 var(--tertiary);
    }

    .topStrTextBox {
        width: 100%;
        max-width: 50rem;
    }

    .topStrText01 {
        font-size: 1.9rem;
    }

    .topStrText01 span {
        font-size: 3rem;
    }

    .topStrText02 {
        margin: .5rem 0 0;
        font-size: 2.2rem;
        line-height: 2;
    }

    .topStrText02 span {
        font-size: 2.5rem;
    }

    .topStrText02 .none {
        display: block;
    }

    .topStrText03 {
        margin: 2rem 0 0;
    }

    .topStrText03 span {
        font-size: 1.6rem;
    }

    /* 強み */

    /* 違い */
    .topDifferenceBg {
        aspect-ratio: 50/13;
        background: var(--primary) url(../../../../uploads/top_difference_bg_sp.png) no-repeat center bottom /cover;
    }

    .topDifferenceWrap {
        padding: 0 0 7rem 0;
    }

    .topDifferenceBox {
        margin: -1rem 0 0;
    }

    .topDifferenceGrid {
        max-width: 50rem;
        margin: 4rem auto 0;
    }

    .topDifferenceGridItem {
        padding: 3rem 0 0;
        max-width: 20rem;
    }

    .topDifferenceGridItemNum {
        font-size: 3rem;
    }

    .topDifferenceGridItemTextBox {
        min-height: 6rem;
        margin: 1.4rem 0 0;
    }

    .topDifferenceGridItemText {
        font-size: 1.8rem;
    }

    /* 違い */

    /* 選ばれる理由 */

    .topDifferenceReason {
        margin: 6rem 0 0;
    }

    .topDifferenceReasonTit {
        background: url(../../../../uploads/top_difficult_title_bg_sp.svg)no-repeat center /contain;
        aspect-ratio: 7/2;
        padding: 0 7rem;
    }

    .topDifferenceReasonTit br {
        display: block;
    }

    .topDifferenceReasonBox {
        padding: 7rem 1.5rem 5rem;
    }

    .topDifferenceReasonIn {
        max-width: max-content;
    }

    .topDifferenceReasonFlex {
        justify-content: flex-start;
        width: 100%;
    }

    .topDifferenceReasonIcon {
        width: 2.3rem;
    }

    .topDifferenceReasonText {
        font-size: 1.8rem;
    }

    .topDifferenceReasonText01 {
        margin: 3rem 0 0 auto;
        line-height: 1.6;
    }

    .topDifferenceReasonText01 br {
        display: block;
    }

    .topDifferenceReasonIllust {
        left: 3.5rem;
        width: 9.5rem;
    }

    /* 選ばれる理由 */

    /* 朝勉 */
    .topMorning {
        padding: 7.5rem 0 10.7rem;
    }

    .topMorningFlex {
        flex-direction: column;
        margin: 5.5rem 0 0;
        gap: 0;
    }

    .topMorningFlexImgBox {
        width: 100%;
        margin: 3rem 3rem 0 0;
    }

    .topMorningFlexImgBox::before {
        top: 1.5rem;
        right: -1.5rem;
        bottom: -1.5rem;
    }

    .topMorningFlexTextBox {
        display: contents;
    }

    .topMorningFlexText01 {
        order: -1;
        width: 100%;
        padding: 0 1.5rem;
    }

    .topMorningFlexText02 {
        margin: 4.5rem 0 0;
        padding: 0 1.5rem;
    }

    .topMorningFlexText02 span {
        font-size: 1.6rem;
    }

    .topMorningIllust01 {
        display: none;
    }

    .topMorningBtn {
        margin: 4rem auto 0;
    }

    /* 朝勉 */


    /* コース */
    .topCourseBox {
        margin: 4.5rem 0 0;
        gap: 4rem;
    }

    .topCourseItem {
        flex-direction: column;
        max-width: 50rem;
        margin: 0 auto;
    }

    .topCourseItem:first-of-type {
        background: var(--secondary) url(../../../../uploads/link_arrow_green.svg) no-repeat right bottom /11rem 7rem;
    }

    .topCourseItem:last-of-type {
        background: var(--quaternary) url(../../../../uploads/link_arrow_orange.svg) no-repeat right bottom /11rem 7rem;
    }

    .topCourseImg {
        width: 100%;
    }

    .topCourseTextBox {
        width: 100%;
        padding: 2rem 1.5rem 6rem;
    }

    .topCourseText02 {
        font-size: 1.8rem;
    }

    .topCourseText03 {
        font-size: 1.6rem;
    }

    .topCourseText04 {
        display: none;
    }

    /* コース */

    /* 合格実績 */
    .topPass {
        padding: 7rem 0 6rem;
    }

    .topPassTit br {
        display: block;
    }

    .topPassTit::before,
    .topPassTit::after {
        width: 8rem;
    }

    .topPassTxt01 {
        margin: 3rem 0 0;
        font-size: 1.6rem;
        text-align: left;
    }

    .topPassTxt01 br {
        display: none;
    }

    .topPassBox {
        padding: 0 1rem 4rem;
    }

    .topPassIllust {
        display: none;
    }

    .topPassBoxTit {
        width: 33.5rem;
    }

    .topPassItemTitFlex {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .topPassItemTitLeft {
        font-size: 2rem;
    }

    .topPassItemTitRight {
        font-size: 4.8rem;
        line-height: 1;
    }

    .topPassItemTitRight span {
        font-size: 2.5rem;
    }

    .topPassItemTxtGrid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        margin: 3rem auto 0;
    }

    .topPassItemTxtFlex {
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    /* 合格実績 */

    .topBgFrame {
        padding: 5rem 0 6rem;
    }

    /* 卒業生の声 */
    .topVoicesTit::after {
        display: none;
    }

    .topVoicesTxt {
        font-size: 1.6rem;
        text-align: left;
    }

    .topVoicesBox {
        margin: 3rem 0 0;
    }

    /* 卒業生の声 */

    /* 無料体験授業 */
    .topFree {
        margin: 7rem 0 0;
    }

    .topFreeBox {
        flex-direction: column;
        padding: 2rem 2rem 4rem;
        border-radius: 1rem;
    }

    .topFreeBox::before {
        top: 1rem;
        left: 1rem;
        border-radius: 1rem;
    }

    .topFreeTextBox {
        width: 100%;
        max-width: 52rem;
    }

    .topFreeTit {
        font-size: 1.6rem;
        aspect-ratio: 306/87;
    }

    .topFreeTit span {
        font-size: 2.7rem;
        letter-spacing: 0.03em;
        background: url(../../../../uploads/top_free_title_bg_sp.svg)no-repeat center/contain;
    }

    .topFreeTxt {
        margin: 2rem 0 0;
    }

    .topFreeImgBox {
        width: 100%;
    }

    .topFreeBtn {
        margin: 1rem auto 0;
    }

    .topFreeImgBox img {
        border-radius: 1rem;
    }

    .topFreeImgBox::before {
        right: -2rem;
        bottom: 1.5rem;
    }

    /* 無料体験授業 */

    /* Instagram */
    .topInstagram {
        margin: 5rem 0 0;
    }

    .topInstagramBtnBox {
        flex-direction: column-reverse;
        gap: 3rem;
    }

    .topInstagramBtnBox::before {
        width: 100%;
        flex: auto;
    }

    /* Instagram */
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=576px) {
    .topDifferenceGrid {
        gap: 2.5rem 1.5rem;
    }

    .topDifferenceGridItemTextBox {
        margin: 0.5rem 0 0;
    }

    .topDifferenceGridItem {
        padding: 2.5rem 0 0;
    }

    .topDifferenceGridItemText {
        font-size: 1.7rem;
    }

    .topDifferenceReasonTit {
        padding: 0 6rem;
    }

    .topFreeImgBox::before {
        width: 10rem;
    }

    .topFreeImgBox::before {
        bottom: -1rem;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */