@charset "utf-8";

.sp-nav-btn.js-display {
    transition: all .5s;
    opacity: 1;
    visibility: visible;
}

.sp-nav-btn {
    transition: all .5s;
    opacity: 0;
    visibility: hidden;
    top: 1.9rem;
    right: 2rem;
}



/* ==========================================
TOP
========================================== */

@keyframes zoomUp {
0% {
    transform: scale(1);
}
100% {
    transform: scale(1.15);
}
}
.swiper-slide-active .main-visual-img-pc,
.swiper-slide-duplicate-active .main-visual-img-pc,
.swiper-slide-prev .main-visual-img-pc {
animation: zoomUp 7s linear 0s normal both;
}

.swiper-slide-active .main-visual-img-sp,
.swiper-slide-duplicate-active .main-visual-img-sp,
.swiper-slide-prev .main-visual-img-sp {
animation: zoomUp 7s linear 0s normal both;
}
.swiper-slide img {
height: auto;
width: 100%;
}

.coverWr {
    overflow: hidden;
}

.topFvSliderWr {
    position: relative;
    width: 100%;
}

.topFvSliderWr:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #000000;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0.29) 50%, rgba(0, 0, 0, 0.29) 100%);
    z-index: 2;
    width: 100%;
    height: 100%;
}

.topFvTitSetFlexPc {
    display: flex;
    align-items: baseline;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--white);
    background: #433324;
    background: linear-gradient(0deg, rgba(67 51 36) 0%, rgba(94, 66, 39, 0) 100%);
    text-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 25%);
}

.mr15 {
    margin-right: 1.5rem;
}

.topFvTitMin {
    font-size: 4rem;
}

.topFvTit {
    font-size: 5.5rem;
}

.topFvTitSetBox.pc {
    display: flex;
}

.topFvTitSetBox {
    flex-direction: column;
    align-items: flex-end;
    gap: 3rem;
}

.topFvTitSetWr {
    display: block;
    z-index: 3;
    position: absolute;
    right: 10rem;
    bottom: 12rem;
    left: auto;
}

.topFvTitSetFlexPc01 {
    padding: 0 3rem;
}

.topFvTitSetFlexPc02 {
    padding: 0 2.6rem 0 2.9rem;
}

.fvLeftBoxPc {
    max-width: 38rem;
    width: 100%;
    color: var(--white);
    position: absolute;
    z-index: 3;
    left: 9.7rem;
    bottom: 7.6rem;
}

.fvLogo {
    max-width: 31.6rem;
    width: 100%;
    margin: 0 2.2rem 1.3rem auto;
    position: relative;
    z-index: -1;
}

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

.fvBtn {
    max-width: 20rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--white);
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 1.5em;
}

.fvBtn.fMap {
    gap: 3.33rem;
}

.fvBtn.fSns {
    gap: 1.75rem;
}

.fvBtn.fSns>figure {
    max-width: 2.7rem;
    width: 100%;
}

.fvBtn.fMap>figure {
    max-width: 2.22rem;
    width: 100%;
}

.fvBtn:hover {
    text-decoration: underline;
}

.fvNavBox {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 33.9rem;
    width: 100%;
    margin: 0 auto;
}

.fvNavLink {
    writing-mode: vertical-rl;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 1rem;
}

.fvNavLink>a {
    padding-top: 1.3rem;
    position: relative;
}

.fvNavLink>a:before {
    content: "";
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    display: block;
    border-radius: 50%;
    background-color: var(--white);
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0;
    transition: all .5s;
}

.fvNavLink>a:hover:before {
    opacity: 1;
    transition: all .5s;
}

/*---sp---*/

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

.topFvTitSetFlexSpBox {
    text-align: center;
}

.topFvTitSetFlexPc.topFvTitSetFlexSp {
    display: inline-flex;
}

.topFvTitSetFlexSpBoxMg01 {
    margin-top: 2.5rem;
}

.topFvTitSetFlexSpBoxMg02 {
    margin-top: 1rem;
}

/* ==========================================
MAIN
========================================== */

.topWr01 {
    width: 100%;
    position: relative;
    padding: 10rem 0 10rem;
}

.topConceptImgBox02 {
    max-width: 39rem;
    width: 20.31%;
    position: absolute;
    z-index: 2;
    right: 24rem;
    bottom: -12.4rem;
}

.topAboutWr {
    max-width: 122rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.topAboutWr.pc {
    display: flex;
}

.topAboutLeftBox {
    max-width: 50.8rem;
    width: 48%;
    margin: 0.8rem 0 0;
}

.topAboutRightBox {
    max-width: 54rem;
    width: 48%;
}

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

.topAboutSpListWr01 .topConceptBox {
    width: 92.22%;
    padding: 0 2.8rem;
}

.topAboutSpListWr02 .topConceptTextList {
    width: 85.33%;
    max-width: 100%;
    margin: 3rem auto 0;
}

.topAboutSpListWr02 .topBtnMg {
    margin: 3rem auto 0;
    width: 85.33%;
    max-width: 100%;
    text-align: center;
}

.topAboutSpListWr01 .topConceptTextList {
    width: 85.33%;
    max-width: 100%;
    margin: 3rem auto 0;
}

.topAboutSpListWr01 .topConceptBox {
    width: 92.22%;
    padding: 0 2.8rem;
}

.topConceptImgBoxSp01 {
    width: 95.68%;
    margin-left: auto;
    margin-top: 3rem;
}

.topConceptImgBoxSp01 img {
    width: 100%;
}

.topConceptImgBoxSp02 {
    width: 65.6%;
    margin-top: 2.9rem;
}

.topConceptImgBoxSp02 img {
    width: 100%;
}

.topConceptImgBoxSp01 {
    width: 95.68%;
    margin-left: auto;
    margin-top: 3rem;
}

.topConceptImgBoxSp01 img {
    width: 100%;
}

.topConceptTextListMg {
    margin-top: 6rem;
}

.topConceptTextListMg02 {
    margin-top: 5rem;
}

.topConceptListBox {
    display: flex;
    align-items: center;
}

.topConceptTit {
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--brown);
}

.topConceptTitMin {
    font-size: 3.3rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-left: 1.4rem;
}

.topConceptBox .topConceptListBox:first-child {
    align-items: baseline;
}

.topConceptListBoxDeco:after {
    content: "";
    flex: 1;
    height: 0.1rem;
    background-color: var(--black);
    margin-left: 5rem;
}

.topBg01 {
    background-image: url(../../../../uploads/top_bg01.jpg);
    background-size: auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    background-color: #FFF8EE;
}

.topWr02 {
    background-color: var(--black);
    color:var(--white);
}

.topCourseDeco01 {
    max-width: 45.8rem;
    width: 23.91%;
    position: absolute;
    z-index: 1;
    top: 7.4rem;
    right: 29rem;
}

.topBg02 {
    background: url(../../../../uploads/top_bg02.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
}

.topWr0201 {
    padding: 5rem 0 28.5rem;
    width: 100%;
}

.topTateTit {
    font-size: 5rem;
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1.15em;
    letter-spacing: 0.4em;
}

.topTateTit>p {
    display: inline;
}

.topTateTitMin {
    font-size: 3.3rem;
    letter-spacing: 0.51em;
}

.topTateBox {
    writing-mode: vertical-rl;
    margin: 0 auto 3rem;
}

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

.topTateBox .topTateTit:first-child {
    margin: 0 0 0 5rem;
}

.topTateBox .topTateTit:last-child {
    padding: 3.3rem 0 0;
}

.tateMg {
    margin: 0 0 1rem;
}

.topWr0202 {
    position: relative;
    z-index: 2;
    padding: 15.2rem 0 15.4rem;
    margin-top: -17.2rem;
}

.topWr0202:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2.7rem;
    background-image: repeating-linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), repeating-linear-gradient(45deg, #000 25%, #5E4227 25%, #5E4227 75%, #000 75%, #000);
    background-position: 0 0, 1.35rem 1.35rem;
    background-size: 2.7rem 2.7rem;
    z-index: 1;
}

.topCourseBoxWr {
    max-width: 160rem;
    margin-top: 12rem !important;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
}

.topCourseWr .topCourseBoxWr:nth-child(odd) {
    padding: 0 1.5rem 0 0;
    margin: 0 auto 0 0;
}

.topCourseWr .topCourseBoxWr:nth-child(even) {
    padding: 0 0 0 1.5rem;
    margin: 0 0 0 auto;
    flex-direction: row-reverse;
}

.topCourseWr .topCourseBoxWr:first-child {
    margin-top: 0 !important;
}

.topWr0202:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 17.8rem;
    top: 0;
    left: 0;
    right: 0;
    background: #000000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: -1;
}

.topCourseTextBox.topCourse {
    max-width: 55rem;
    width: 43.38%;
    margin: 3.5rem 0 0;
}

.topCourseTextBox.topDrink {
    max-width: 63.3rem;
    width: 43.38%;
    margin: 7.3rem 0 0;
}

.topCourseImgBox {
    max-width: 80rem;
    width: 50%;
    margin: 0;
}

.topCourseTextList {
    max-width: 47.3rem;
    width: 100%;
    margin-top: 6rem;
}

.topCourseListBox {
    display: flex;
    align-items: center;
}

.topCourseTextBox.topCourse .topCourseListBox {
    gap: 3rem;
}

.topCourseListBoxDeco:after {
    content: "";
    flex: 1;
    height: 0.1rem;
    background-color: var(--white);
    margin-left: 8.6rem;
}

.topCourseTextBox.topDrink .topCourseListBoxDeco:after {
    margin-left: 8.6rem;
}

.topCourseTit {
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.topDrinkTit {
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.topCourseTitMin {
    font-size: 3.3rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-left: 1.4rem;
}

.topBtnMg {
    margin: 6rem 0 0;
}

.topWr0202 .topBtnMg {
    margin: 6rem 0 0;
}

.topCourseBox .topCourseListBox:first-child {
    margin-top: 0;
}

.topCourseBox .topCourseListBox {
    margin-top: 1rem;
}

.topBg03 {
    background: url(../../../../uploads/top_bg03.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
}

.topWr03 {
    width: 100%;
    padding: 16.5rem 0;
    position: relative;
}

.topWr03:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgb(0 0 0 / 25%);
    z-index: 1;
}

.topInfoTit {
    font-size: 4.5rem;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.7em;
}

.topWr04 {
    width: 100%;
    padding: 15rem 0 0;
    overflow: hidden;
}

.topInfoWr01 {
    width: 100%;
    padding: 0 1.5rem;
}

.topInfoWr02 {
    width: 100%;
    padding: 0 1.5rem;
    margin-top: 17rem;
}

.topInfoBox01 {
    max-width: 150rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.topInfoBox02 {
    max-width: 132rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.topInfoImgBox01 {
    max-width: 85.4rem;
    width: 56.93%;
    position: relative;
}

.topInfoImgBox01 .topInfoImg01 {
    max-width: 71.2rem;
    width: 83.37%;
}

.topInfoImgTitSetBox01 {
    position: absolute;
    z-index: 2;
    top: 5rem;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3rem;
}

.topInfoImgTitSet {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--white);
    gap: 1rem;
    background: #5E4227;
    background: linear-gradient(0deg, rgba(94, 66, 39, 1) 0%, rgba(94, 66, 39, 0.53) 100%);
    text-shadow: 0 0.2rem 0.4rem rgb(0 0 0 / 25%);
}

.topInfoImgTitSet01 {
    padding: 0.8rem 1.6rem 0.7rem 3rem;
    margin-right: 6rem;
}

.topInfoImgTitSet02 {
    padding: 0.8rem 2rem 0.8rem 2rem;
}

.topInfoImgTitSet03 {
    padding: 0.8rem 2rem 0.8rem 2rem;
}

.topInfoImgTitMin {
    font-size: 3.3rem;
}

.topInfoImgTit {
    font-size: 4.5rem;
}

.topInfoImgBox02 {
    max-width: 66rem;
    width: 50%;
    position: relative;
}

.topInfoImg02 {
    max-width: 57.7rem;
    width: 87.42%;
    margin: 0 0 0 auto;
}

.topInfoImgTitSetBox02 {
    position: absolute;
    z-index: 2;
    top: 5rem;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.topInfoTextBox01 {
    max-width: 59rem;
    width: 39.33%;
    margin-top: 6.8rem;
}

.topInfoTextListBox01 {
    max-width: 45rem;
    width: 100%;
}

.topInfoTextBox01 .topInfoTextListBox01 {
    margin: 0 0 0 auto;
}

.topInfoTextListBox02 {
    max-width: 45rem;
    width: 100%;
}

.topInfoTextBox02 {
    max-width: 57rem;
    width: 43.18%;
    margin-top: 3.6rem;
}

.topInfoTextBox02 .topInfoTextListBox02 {
    margin: 0 auto 0 0;
}

.topInfoImgDeco01 {
    max-width: 30.9rem;
    width: 36.18%;
    position: absolute;
    z-index: 1;
    right: 11.9rem;
    bottom: -7.8rem;
}

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

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



}

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

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

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

    .fvLeftBoxPc {
        max-width: 36rem;
    }

    .fvNavBox {
        max-width: 28.9rem;
    }
    
    .fvNavLink {
        font-size: 1.4rem;
        letter-spacing: 0.5rem;
    }

    .fvLogo {
        max-width: 26.6rem;
        margin: 0 2.2rem -3.3rem auto;
    }

    .fvLinkSetBox {
        max-width: 38rem;
        margin: 4.9rem auto 0;
        gap: 3rem;
    }
    
    .topCourseBoxWr {
    width: 96%;
    }

}

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

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

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

    .topConceptImgBox02 {
        right: 10rem;
        bottom: -7.4rem;
    }

    .topFvTitMin {
        font-size: 2rem;
    }
    
    .topFvTit {
        font-size: 3.5rem;
    }

    .mr15 {
        margin-right: 1rem;
    }

    .topFvTitSetWr {
        right: 1.5rem;
        bottom: 7.9rem;
        left: 1.5rem;
    }

    .topFvTitSetBox {
        gap: 1.5rem;
    }

    .topFvTitSetFlexPc01 {
        padding: 0 2rem;
    }
    
    .topFvTitSetFlexPc02 {
        padding: 0 2rem 0 2rem;
    }

    .fvLeftBoxPc {
        max-width: 32rem;
        left: 3.7rem;
        bottom: 2.6rem;
    }

    .fvNavBox {
        max-width: 25.9rem;
    }

    .fvLogo {
        max-width: 14.6rem;
        margin: 0 auto -1.3rem auto;
    }

    .fvLinkSetBox {
        max-width: 38rem;
        margin: 2.9rem auto 0;
        gap: 3rem;
    }

    .topDrinkTit {
        font-size: 4rem;
    }
    
    .topCourseTitMin {
        font-size: 2.5rem;
    }

    .topAboutWr {
        max-width: 92rem;
    }

    .topCourseBoxWr {
        max-width: 98rem;
    }

    .topInfoBox01 {
        max-width: 92rem;
    }
    
    .topInfoBox02 {
        max-width: 92rem;
    }

    .topInfoImgTitMin {
        font-size: 2rem;
    }
    
    .topInfoImgTit {
        font-size: 2.5rem;
    }

    .topInfoImgTitSetBox01 {
        top: 2rem;
        gap: 2rem;
    }

}

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

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

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

    .sp-nav-btn {
        transition: all .5s;
        opacity: 1;
        visibility: visible;
    }

    .topFvTitSetBox.pc {
        display: none;
    }

    .topFvSliderWr:before {
        background: rgb(0 0 0 / 30%);
    }

    .topFvTitMin {
        font-size: 4rem;
    }
    
    .topFvTit {
        font-size: 5.5rem;
    }

    .mr15 {
        margin-right: 1rem;
    }

    .topAboutWr.pc {
        display: none;
    }

    .topCourseBoxWr {
        margin-top: 6rem !important;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

    .topCourseWr .topCourseBoxWr:nth-child(odd) {
        padding: 0 1.5rem;
        margin: 0 auto;
    }
    
    .topCourseWr .topCourseBoxWr:nth-child(even) {
        padding: 0 1.5rem;
        margin: 0 auto;
        flex-direction: column;
    }

    .topCourseImgBox {
        width: 100%;
        margin: 3rem auto 0;
    }
    
    .topCourseTextList {
        max-width: 100%;
        width: 100%;
        margin-top: 3rem;
    }

    .topCourseTextBox.topCourse {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    .topCourseTextBox.topDrink {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }

    .topCourseListBoxDeco:after {
        margin-left: 0;
    }

    .topWr0202 .topBtnMg {
        margin: 3rem 0 0;
        text-align: center;
    }

    .topCourseTextBox.topDrink .topCourseListBoxDeco:after {
        margin-left: 3.4rem;
    }

    .topWr0202 {
        padding: 0 0 8.4rem;
        margin-top: 0;
    }

    .topWr0201 {
        padding: 4.3rem 0 7.4rem;
    }

    .topWr02Box01 {
        max-width: 59.73%;
        margin: 0 auto;
        position: relative;
        z-index: 9;
    }

    .topBg02 {
        background: url(../../../../uploads/top_bg02_sp.jpg) no-repeat;
        background-size: 100%;
        background-position: top center;
    }

    .topTateTit {
        font-size: 6rem;
    }
    
    .topTateTitMin {
        font-size: 3.3rem;
    }

    .topTateBox .topTateTit:first-child {
        margin: 0 0 0 1.3rem;
    }

    .topTateBox .topTateTit:last-child {
        margin: 4.8rem 0 0;
    }

    .topDrinkTit {
        font-size: 3.3rem;
    }

    .topCourseTitMin {
        font-size: 2.2rem;
    }

    .topCourseBox {
        width: 82.67%;
    }

    .topWr0202:before {
        height: 1.6rem;
        background-position: 0 0, 0.8rem 0.8rem;
        background-size: 1.6rem 1.6rem;
    }

    .topWr03 {
        padding: 10rem 0;
    }
    
    .topWr03:before {
        display:none;
    }
    
    .topConceptBox .topConceptListBox:first-child {
        align-items: center;
    }

    .topConceptListBoxDeco:after {
        margin-left: 1.7rem;
    }

    .topInfoWr01 {
        padding: 0;
    }
    
    .topInfoWr02 {
        padding: 0;
        margin-top: 5rem;
    }

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

    .topInfoImgBox01 {
        max-width: 100%;
        width: 100%;
    }

    .topInfoImgTitSetBox01 {
        top: -1.8rem;
        gap: 1.4rem;
    }

    .topInfoImgBox01 .topInfoImg01 {
        width: 82.13%;
    }

    .topInfoImgDeco01 {
        max-width: 30.9rem;
        width: 65.62%;
        right: -1.7rem;
        bottom: -13.4rem;
    }

    .topInfoTextBox01 {
        max-width: 100%;
        width: 85.33%;
        margin-top: 3rem;
    }

    .topInfoTextBox02 {
        max-width: 100%;
        width: 85.33%;
        margin-top: 3rem;
    }

    .topInfoTextListBox01 {
        max-width: 100%;
    }
    
    .topInfoTextListBox02 {
        max-width: 100%;
    }

    .topInfoImgBox02 {
        max-width: 100%;
        width: 100%;
    }
    
    .topInfoImg02 {
        max-width: 57.7rem;
        width: 82.13%;
    }

    .topInfoImgTitSetBox02 {
        top: 1.9rem;
    }

    .topInfoImgTitSet01 {
        margin-right: 0;
    }

    .topWr04 {
        padding: 8rem 0 0;
    }

    .topWr01 {
        padding: 6rem 0 6rem;
    }

    .topInfoImgTitMin {
        font-size: 3.3rem;
    }
    
    .topInfoImgTit {
        font-size: 4.5rem;
    }

    .topInfoImgTitSetBox01 {
        top: 5rem;
        gap: 3rem;
    }

    .topTateTit {
        letter-spacing: 0.2em;
    }

}

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

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

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

    .fvSpLogo {
        max-width: 17.9rem;
    }

    .topFvTitMin {
        font-size: 2rem;
    }
    
    .topFvTit {
        font-size: 3.5rem;
    }

    .mr15 {
        margin-right: 1rem;
    }

    .topInfoImgTitMin {
        font-size: 2.5rem;
    }
    
    .topInfoImgTit {
        font-size: 3.2rem;
    }

    .topTateTit {
        font-size: 4.5rem;
    }
    
    .topTateTitMin {
        font-size: 2.5rem;
    }

}

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

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

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

    .topTateTit {
        font-size: 3.3rem;
    }
    
    .topTateTitMin {
        font-size: 2.2rem;
    }

    .topConceptTit {
        font-size: 3.3rem;
    }
    
    .topConceptTitMin {
        font-size: 2.2rem;
    }



}

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