.front-wrap{position:relative; }
.top-container-n{position:relative;}
.



.top-section{margin-top:100vh; background:#ffffff; width:100%; height:100%;}







.arrow-wrap{
    position:absolute;
    bottom:20px;
    right:10%;
    z-index:8;
}
.top-main-nav ul li a ul li a .arrow-wrap .arrow{
    margin-top 20px; /*なくてもOK*/
    position: relative;
    right:0;
    bottom:0;
    width: 120px;
    height: 48px;
    color: #f1f1f1;
    z-index:10;
}

.top-main-nav ul li a .arrow-wrap  .arrow:before,
.top-main-nav ul li a .arrow-wrap  .arrow:after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    height: 1px;
    background: #f1f1f1;
}
.top-main-nav ul li a .arrow-wrap  .arrow:before{
    width: 60px;
    transform: translate(30px, 0px);
}
.top-main-nav ul li a .arrow-wrap  .arrow:after{
    width: 15px;
    transform-origin: right center;
    transform: translate(30px, 0px) rotate(25deg);
}



.este_ttl_h2{color:#ee85a6; font-size:3.6rem; margin-bottom:20px;}

.top_banaarea{width:100%; height:550px; /*background:#e2a3a8;*/ background: linear-gradient(to bottom, #e2a3a8 0%, #e2a3a8 50%, #ffffff 50%, #ffffff 100%); margin:0 auto;}
.top_banaarea ul{display:flex; justify-content:center; padding-top:20px;}
.top_banaarea ul li{max-width:400px; margin:0 10px;}
.top_banaarea ul li h3{color:#ee85a6; text-align:center; font-size:2.4rem;}
.top_banaarea ul li p{font-size:1.5rem; line-height:1.8em;}

.top_messagearea{text-align:center; margin-bottom:60px;}
.top_messagearea h2{color:#ee85a6; font-size:4.8rem; margin-bottom:20px;}
.top_messagearea p{margin-bottom:30px; }

.top_menuarea{background:#ffffff; padding:30px 20px 20px;}
.top_menuarea h2{color:#ee85a6; font-size:3.8rem; text-align:center;}


.accordion {
    width:100%;
    margin:10px auto;
}
.accordion > li {
    text-align:left;
    padding:10px;
    color:#fff;
    background:/*9d4d57*/#e2a3a8;
    border-bottom:1px #f1f1f1 solid;
}
.accordion > li:last-child {
    border-bottom:none;
}
.accordion > li.open {
    color:#fff;
    background:#666;
}
ul li ul {
    background:#eee;
    margin:10px -10px -10px;
    color:#000;
}
ul li ul li {
    padding:10px 20px;
}


.top_stuffarea{background:#f9f9f4; padding:30px 20px 20px;}
.top_stuffarea h2{color:#ee85a6; font-size:3.8rem;}









.top-ticker-wrap{ 
    /*padding:10px 20px; */
    position:absolute; 
    bottom:90px; 
    left:50%; 
        -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/*top ticker*/
.ticker {
    margin: 0 auto;
    padding: 10px;
    width: 600px;
    text-align: left;
    /*border: #ccc 1px solid;*/
    position: relative;
    overflow: hidden;
    font-size:1.6rem;
}
/*.ticker{width: calc(100% - 20px);}*/

.ticker ul {width: 100%; position: relative;}
.ticker ul li {width: 100%;  height:100px; display: none;}
.ticker ul li span.ttl{text-decoration:underline;}
.ticker ul li span.cate{background:#5bc0de; padding:2px 20px; margin-right:10px;}
.ticker ul li span.ymd{font-size:1.4rem;}
.ticker ul li a{color:#f1f1f1;}
.ticker ul li span.cate a{color:#f1f1f1; font-size:1.4rem;}

.scroll {
    width: 1px;
    height: 90px;
    background: #fff;
    position: absolute;
    left: 50%;
    bottom: 65px;
    -webkit-animation: scroll 1.1s ease infinite;
    animation: scroll 1.1s ease infinite;
}

@media print, screen and (min-width:768px) {
    @-webkit-keyframes scroll {0% { bottom: 65px; height: 90px; } 49% { bottom: 65px; height: 0; } 50% { bottom: 155px height: 0; } 100% { bottom: 65px; height: 90px; }}
@keyframes scroll {0% { bottom: 65px; height: 90px; } 49% { bottom: 65px; height: 0; } 50% { bottom: 155px; height: 0; } 100% { bottom: 65px; height: 90px; }}}

@media screen and (max-width:767px) {
    .scroll {height: calc(180 / 1125 * 100vw); bottom: calc(100 / 1125 * 100vw);}
    @-webkit-keyframes scroll {0% { bottom: 6vw; height: 10vw; } 49% { bottom: 6vw; height: 0; } 50% { bottom: 20vw; height: 0; } 100% { bottom: 6vw; height: 10vw; }}
    @keyframes scroll {0% { bottom: 6vw; height: 10vw; } 49% { bottom: 6vw; height: 0; } 50% { bottom: 20vw; height: 0; } 100% { bottom: 6vw; height: 10vw; }}
}

@media screen and (max-width:767px) and (orientation:landscape) {
    .scroll {left: 95%; bottom: 5%;}
}





/*固定する背景*/
.parallax-section {
    box-sizing: border-box;
    color: #FFF;
    font-size: 1.6rem;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    height: 100%;
    
    
}
.parallax-bg {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}



.parallax-section-inner{
    max-width: 100%;
    width:980px;
    color:#f2f2f2;
    padding:300px 8%;
}

.parallax-section-inner02{max-width: 100%;
    width:100%;
    color:#f2f2f2;
    padding:150px 8%;
}




.parallax-section-inner h2 , .parallax-section-inner02 h2{margin-bottom:30px;}
.parallax-section-inner h2 span{
    display: inline-block;
    color:#f2f2f2;
    font-size: 18px;
    line-height: 40.3px;
    letter-spacing:18px;
    margin: 0;
    padding:0;
}

.parallax-section-inner02 h2 span{display: inline-block;
    color:#000000;
    font-size: 28px;
    line-height: 40.3px;
    letter-spacing: 28px;
    margin: 0;
    padding:0;
}

.news_section_wrap{max-width:1200px; margin:0 auto; text-align:center; padding:40px 0;}
.news_section{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.news_section .post-box{width:100%; margin-bottom:20px;}

/*各背景の画像*/
.img-bg-01 {background-image: url('https://abc-57.com/esthetic/wp-content/themes/ABCesthetic/img/topbg_about.jpg');}
.img-bg-02 {background-image: url('https://abc-57.com/esthetic/wp-content/themes/ABCesthetic/img/topbg_news.jpg');}


.service-section-top{text-align:center; margin:30px 0 80px 0;}
.service-section-top span{display:block;}
.service-section-top span.en{display:block; letter-spacing:1.3em;}
.service-section-top h1{margin-bottom:0px; font-weight:900; font-weight:900; font-size:2.2rem;  color:#44af35;}
.service-section-top .service-top-text{max-width:800px; margin-left: auto; margin-right: auto; font-size:1.6rem; color:#000}
    
    .service-section{margin-top:30px; text-align:center}
        @media screen and (min-width: 768px)  {
            .service-section{text-align:left;}
            .service-section-top h1{font-size:2.8rem; line-height:1.6em;}
        }
        
        .service-section-subttl{font-size:14px; margin-bottom:10px;}
        @media screen and (min-width: 768px)  {.service-section-subttl{margin-bottom:30px;}}
        .service-section h1{color:#44af35; font-weight:600; margin-bottom:30px; font-size:24px;}
        .container-fluid-area{background:#f8f8f8; padding:10px 0 10px 0}
            .service-section .table th{min-width:100px;}
            .service-main-img{margin-bottom:100px;}
            
        
            
            .service-section-txt{width:100%; margin-bottom:20px; font-size:1.6rem; margin-bottom:30px; padding:0 10px;}
            .s-slick-wrap{width:30%; }
            .service-section-txt h1{font-size:2.8rem; margin-bottom:10px;}
            .service-section-txt-subttl{color:#44af35; font-weight:bold;}
            .service-section-txt p{font-size:1.6rem;}
            .service-section-img{width:100%;}
            
            .top-service-section-txt{width:100%; margin-bottom:20px; font-size:1.6rem; margin-bottom:30px; border-bottom:1px solid #ffffff; padding-bottom:20px;}
            
            
            @media screen and (min-width: 768px)  {
                .este-section{ padding:30px 0px 0px 60px; border-left:5px solid #44af35; border-top:none; flex-direction: row; }
                .este-section-re{ padding:30px 0px 0px 60px; border-right:5px solid #44af35; border-top:none; flex-direction: row; }
                .service-section-txt{width:48%; padding-top:10px;}
                .service-section-img{width:50%;}
            }
            
            @media screen and (min-width: 768px) {
                .service-section{flex-direction: row;}
                .service-section-btn-area{flex-direction: column; justify-content: start;}
                .service-section-txt-wrap{width:49%;}
                .service-section-bana-wrap{width:46%;}
                .parallax-bg {background-attachment: fixed;}
                .news_section .post-box{width:23%;}
                .parallax-section-inner h2 span , .parallax-section-inner02 h2 span{font-size: 32px; line-height: 40px; letter-spacing: 12px;}
            }
            
            
            .swiper-container {
                width: 100%;
                height: 550px;
            }
            .swiper-slide{
                background-repeat: no-repeat;
                width: 1200px;
                background-size: cover;
                background-position: center center;
            }
            
            .bg_img01{background-image: url('https://abc-57.com/esthetic/wp-content/themes/ABCesthetic/img/main-este04.jpg'); background-size: cover;}
            .bg_img02{background-image: url('https://abc-57.com/esthetic/wp-content/themes/ABCesthetic/img/main-este02.jpg'); background-size: cover;}
            .bg_img03{background-image: url('https://abc-57.com/esthetic/wp-content/themes/ABCesthetic/img/main-este03.jpg'); background-size: cover;}
            
            .s-three-text,
            .s-three-sub,
            .s-three-button {
                position: absolute;
                width: 100%;
                left: 0;
                text-align: center;
                color: white;
            }
            
            .s-three-text {
                top: 20%;
                font-size: 4.6rem;
                text-shadow:1px 1px 3px #734972;
            }
            
            .s-three-sub {
                top: 55%;
                font-size: 2vw;
            }
            
            .s-three-button {
                top: 75%;
                left: calc( 50% - 75px );
                display: block;
                width: 150px;
                padding: 5px 10px;
                box-sizing: border-box;
                background: #ee85a6;
                color: white;
                text-align: center;
                text-decoration: none;
                transition: all .25s ease;
            }
            .s-three-button:hover {background: white; color: #1b1b1b;}
            
            .swiper-slide-active .s-three-text {
                animation: slideFromRight 1.75s ease 0s 1 normal;
            }
            .swiper-slide-active .s-three-sub {
                animation: slideFromRightSub 2.0s ease 0s 1 normal;
            }
            .swiper-slide-active .s-three-button {
                animation: slideFromRightBtn 2.5s ease 0s 1 normal;
            }
            
           
            @keyframes slideFromRight {
                0%, 25% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
           
            @keyframes slideFromRightSub {
                0%, 25% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
            
            
            
           
            @keyframes slideFromRightBtn {
                0%, 65% {
                    transform: translateY(50px);
                    opacity: 0;
                }
                100% {
                    transform: translateY(0px);
                    opacity: 1;
                }
            }

            .rich_font {font-weight: 500; font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;}
            .este-btn {
                display: block;
                width: 150px;
                padding: 5px 10px;
                box-sizing: border-box;
                background: #ee85a6;
                color: white;
                text-align: center;
                text-decoration: none;
            }
            .este-btn:hover {
                background: white;
                color: #1b1b1b;
            }