@charset "UTF-8";
.top-recommend {padding: 14vw 0;background: #efa4a5;}
.top-recommend-title {width: 180vw;color: #fff;font-size: 16vw;font-family: "futura-pt";font-optical-sizing: auto;font-weight: 300;text-align: center;opacity: 0.1;position: relative;left: 50%;-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.top-recommend-items { width: 100%; padding-bottom: 15vw; margin: -2.5vw auto 0; }
.top-recommend-items .prev { width: 8vw; z-index: 2; position: absolute; bottom: 0; left: calc(50% - 30vw); }
.top-recommend-items .prev img { width: 100%; }
.top-recommend-items .next { width: 8vw; z-index: 2; position: absolute; bottom: 0; right: calc(50% - 30vw); }
.top-recommend-items .next img { width: 100%; }
.top-recommend-items .slick-dots { bottom: 1vw; }
.top-recommend-item-content { background:#fff; margin-bottom: 5vw;}
.top-recommend-item {width: 88vw;margin: 0 auto;}
.top-recommend-item-image img { width: 100%; }
.top-recommend-item-text { padding: 5vw 5vw 6vw; }
.top-recommend-item-badge { margin-bottom: 4vw; color: var(--pink02); font-size: 3.2vw; font-family: "futura-pt"; font-optical-sizing: auto; font-weight: 400; letter-spacing: 0.4vw; display: block; }
.top-recommend-item-title { margin-bottom: 2.5vw !important; }
.top-recommend-item-title .sub { padding: 1.5vw 3vw; margin-bottom: 2.5vw; color: var(--pink02); font-size: 3.2vw; background: #f8f6fa; -moz-border-radius: 5vw; -webkit-border-radius: 5vw; border-radius: 5vw; display: table; }
.top-recommend-item-title .title { font-size: 5vw; line-height: 1.4; display: block; }
.top-recommend-item-comment { padding-bottom: 4vw; margin-bottom: 4vw; border-bottom: 1px solid #c4bdc2; }
.top-recommend-item-comment p {font-size: 3.4vw;text-align: justify;text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.8;letter-spacing: 0.04em;margin-bottom: 20px;}
.top-recommend-item-price { padding-right: 10vw; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }
.top-recommend-item-price .badge {padding: 1.5vw 2vw;margin-right: 2vw;font-size: 3.2vw;border: 1px solid var(--pink02);color: var(--pink02);}
.top-recommend-item-course {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-align-items: center;align-items: center;}
.top-recommend-item-course .badge { padding: 2vw 2vw 1.5vw; margin-right: 2.5vw; font-size: 3.2vw; border: 1px solid #afacaf; }
.top-recommend-item-course .price { color: var(--pink01); font-size: 8vw; font-family: "futura-pt"; font-weight: 300; }
.top-recommend-item-course .price span { margin-left: 1vw; font-size: 50%; display: inline-block; }


.cv { margin: 4vw auto; position: relative;}
.cv a {background: var(--pink01);color: #fff;text-align: center;font-weight: bold;padding: 4.4vw;border-radius: 50px;font-size: 4vw;}
.cv span:after{content: "\f105";font-family: icon;font-size: 88%;display: inline-block;position: absolute;top: 50%;right: 15px;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}

.flow {margin: 0 auto 4vw;display: -webkit-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;align-items:center;justify-content:flex-start;}
.flow>li{position:relative;border-radius: 30px;padding: 3px 8px;margin: 0 5vw 2vw 0;font-size: 3.2vw;border: 1px solid #e6bcbc;color: var(--pink01);}
.flow>li:after{content:"▶︎";margin: 1px 11px;font-size: 3vw;font-family:icon;position:absolute;top: 3px;right: -27px;color: #d7d7d7;}
.flow>li:last-child:after{content:"";}



/* ========================================
 pc
==========================================*/
@media screen and (min-width: 736px) { 
.top-recommend { padding: 80px 0; }
.top-recommend-title { width: 1500px; font-size: 125px; }
.top-recommend-items { padding-bottom: 0; margin: -40px auto 50px; }
.top-recommend-items .slick-dots { bottom: -50px; }
.top-recommend-items .slick-dots li { width: 10px; height: 10px; margin: 0 12px; }
.top-recommend-items .prev { width: 35px; height: 22px; background: url(../images/arrow01-left-white.png) no-repeat center; background-size: 100%; cursor: pointer; top: 50%; bottom: auto; left: calc(50% - 625px); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.top-recommend-items .next { width: 35px; height: 22px; background: url(../images/arrow01-right-white.png) no-repeat center; background-size: 100%; cursor: pointer; top: 50%; bottom: auto; right: calc(50% - 625px); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.top-recommend-item { width: 1100px; }
.top-recommend-item-content { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; margin-bottom: 20px; }
.top-recommend-item-image img { width: 550px; }
.top-recommend-item-text { width: 550px; padding: 0 40px; }
.top-recommend-item-badge { margin-bottom: 12px; font-size: 12px; letter-spacing: 2px; }
.top-recommend-item-title { margin-bottom: 15px !important; }
.top-recommend-item-title .sub { padding: 8px 20px; margin-bottom: 10px; font-size: 15px; }
.top-recommend-item-title .title { font-size: 28px; }
.top-recommend-item-comment { padding-bottom: 15px; margin-bottom: 20px; }
.top-recommend-item-comment p { font-size: 15px; }
.top-recommend-item-course .badge { padding: 6px 20px; margin-right: 15px; font-size: 15px; }
.top-recommend-item-course .price { font-size: 38px; }
.top-recommend-item-course .price span { margin-left: 5px; }

.cv { margin: 30px auto;}
.cv a {padding: 18px;font-size: 18px;transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.cv a:hover {background: var(--pink01); border:2px solid #fff;color:#fff;letter-spacing: 0.15em;}

.flow {margin: 0;}
.flow>li{padding: 5px 16px;margin: 0 20px 10px 0;font-size: 14px;}
.flow>li:after{margin: 1px 11px;font-size: 12px;top: 6px;right: -28px;}

}


/* ========================================
 retina
==========================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
}