@charset "UTF-8";

.top{background: url(../../images/stylist/entry/top_bg@2x.jpg) top 22vw right -24vw no-repeat;position: relative;margin: 0 auto;background-size: 140%;}
.top_in{width: 88vw;margin: 0 auto;}
.en {width: 100%;top: 6vw;}
.en-item {margin: 0 3vw;letter-spacing: 0.02em;opacity: 0.2;font-size: 14vw;font-family: trajan-pro-3;font-optical-sizing: auto;font-weight: 400;color: #ff9cac;line-height: 1;}
.en-item p{margin-bottom: 0;}

.top .ttl{font-family: var(--mincho);font-size: 6vw;line-height: 1.6;margin-bottom: 21vw;position: relative;}
.top .ttl:after{content: "";bottom: -6vw;left:0;position: absolute;width: 100px;height: 1px;/* background: #8b8b8b; */}
.top .read{color: var(--pink);font-size: 4vw;}

.intro .flex:nth-of-type(1) .bg{background: url(../../images/stylist/entry/intro01.jpg) top center no-repeat;background-size:cover;width: 100%;height: 60vw;}
.intro .flex:nth-of-type(2) .bg{background: url(../../images/stylist/entry/intro02.jpg) top center no-repeat;background-size:cover;width: 100%;height: 60vw;}
.intro .flex .text{width: 88vw;margin: 6vw auto 0;}
.intro .flex .read{color: var(--pink);font-size: 4vw;font-weight: bold;margin-bottom: 2vw;}

.intro .flex .list{padding: 5% 5% 3%;background: var(--pink02);margin-bottom: 4vw;border-top: 2px solid var(--pink);}
.intro .flex .list p{color: var(--pink);text-align: center;line-height: 1.4;}
.intro .flex .list li{padding: 3%;background: #fff;margin-bottom: 2vw;text-align: center;font-size: 3.7vw;line-height: 1.5;letter-spacing: 0.02em;}
.intro .flex .list li span{font-optical-sizing: auto;font-weight: 400;color: #fb829b;display: block;font-size: 3.4vw;line-height: 1.4;}
.intro .flex .list02 ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.intro .flex .list02 li{width: 48%;}

.step ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.step li{width: 48%;margin-bottom: 4vw;}
.step li img{width: 100%;margin-bottom: 3vw;}
.step li p{text-align: center;line-height: 1.3;font-weight: bold;}

.rank{background:url(../../images/stylist/entry/rank.jpg) top center no-repeat;padding: 10vw 5vw 2vw;background-size: cover;}
.rank .midashi02 .en:before{background: #fff;}
.rank .midashi02 .en:after{background: #999;}
.rank .midashi02 .en{margin-bottom: 9vw;}
.rank ul{margin-bottom: 8vw;}
.rank li{padding: 4% 5% 5%;background: #fff;margin-bottom: 2vw;border-radius: 10px;}
.rank li span{display: block;text-align: center;color: var(--pink);font-weight: bold;font-size: 4.4vw;border-bottom: 1px dashed #b3b0b0;padding-bottom: 2vw;margin-bottom: 3vw;}
.rank .rank_items dl{border-bottom: 1px solid #c5c5c5;padding-bottom: 4vw;margin-bottom: 8vw;position: relative;}
.rank .rank_items dl:last-child{border-bottom: none;margin-bottom: 0;}
.rank .rank_items dt{width: 24vw;margin: 0 auto 5vw;}
.rank .rank_items dt img{width: 100%;}
.rank .rank_items dd .batch{font-family: trajan-pro-3;font-optical-sizing: auto;font-weight: 400;position: absolute;-ms-writing-mode: tb-rl;writing-mode: tb-rl;opacity: 0.6;letter-spacing: 0.3em;line-height: 1.2;right: 0;top: 0;font-size: 3.4vw;}
.rank .rank_items dd .batch small{font-size: 80%;}
.rank .rank_items dd .sub{text-align: center;font-weight: bold;color: var(--pink);margin-bottom: 1vw;}
.rank .rank_items dd .name{text-align: center;font-family: var(--mincho);font-size: 5vw;line-height: 1.5;font-weight: 600;}
.rank .rank_items dd .name small{font-size: 70%;}

.notes dl {background: #f9f8f6;padding: 5vw;line-height: 1.3;}
.notes dt{border-left: 4px solid #dbd5c8;padding-left: 2vw;font-weight: bold;margin-bottom: 3vw;}
.notes dd{margin-bottom: 3vw;padding-left: 1em;text-indent: -1em;text-align:justify;text-justify:auto;font-size: 3.4vw;font-feature-settings: "palt";letter-spacing: .04em;line-height: 1.7;}
.notes dd.no-ast{padding-left: 0;text-indent: 0;}
.notes dd.no-ast:before{content:"";}
.notes dd:last-child { margin-bottom: 0;}

/* =============================================
pc-size
================================================*/
@media screen and (min-width: 736px) {

.top{background: url(../../images/stylist/entry/top_bg@2x.jpg) top 110px center no-repeat;position: relative;margin: 0 auto;background-size: 2000px;padding: 0 0 220px;}
.top_in{width: clamp(730px, 90%, 1200px);}
.en {width: 100%;top: 40px;}
.en-item {margin: 0 20px;font-size: 120px;}
.en-item p{margin-bottom: 0;}

.top .ttl{font-size: 30px;margin-bottom: 70px;}
.top .ttl:after{content: "";bottom: -6vw;left:0;position: absolute;width: 100px;height: 1px;/* background: #8b8b8b; */}
.top .read{font-size: 20px;margin-bottom: 20px;}

.intro .flex{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
.intro .flex:nth-of-type(1) .bg{background: url(../../images/stylist/entry/intro01.jpg) bottom center no-repeat, #f7f7f7;background-size: cover;height: 700px;order: 2;width: 50%;}
.intro .flex:nth-of-type(2) .bg{background: url(../../images/stylist/entry/intro02.jpg) top center no-repeat;background-size:cover;width: 50%;height: 500px;}
.intro .flex .text{width: 50%;margin: 0;padding: 2vw 4vw;}
.intro .flex .read{font-size: 18px;margin-bottom: 20px;}

.intro .flex .list{padding: 30px 0px 0px;margin-bottom: 20px;background: none;}
.intro .flex .list p{line-height: 1.4;margin-bottom: 20px;}
.intro .flex .list ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.intro .flex .list li{padding: 8px;margin-bottom: 10px;font-size: 15px;width: 32.5%;background: var(--pink02);}
.intro .flex .list li span{font-size: 13px;}
.intro .flex .list02 ul{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;gap: 0 7px;}
.intro .flex .list02 li{width: calc((100% - 14px) / 3);}

.step ul{-webkit-flex-wrap: nowrap;flex-wrap: nowrap;}
.step li{width: 23%;margin-bottom: 0;}
.step li img{width: 100%;margin-bottom: 20px;}

.rank{background:url(../../images/stylist/entry/rank.jpg) top center no-repeat;padding: 60px 0 60px;background-size: cover;}
.rank-in{width: clamp(730px, 90%, 1200px);margin: 0 auto;}
.rank .midashi02 .en:before{background: #fff;}
.rank .midashi02 .en:after{background: #999;}
.rank .midashi02 .en{margin-bottom: 70px;}
.rank ul{margin-bottom: 70px;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;}
.rank li{padding: 20px 20px 20px;margin-bottom: 0;border-radius: 10px;width: 49%;}
.rank li span{font-size: 20px;padding-bottom: 20px;margin-bottom: 20px;}
.rank .rank_items dl{padding-bottom: 30px;margin-bottom: 30px;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
.rank .rank_items dl:last-child{border-bottom: none;margin-bottom: 0;}
.rank .rank_items dt{width: 140px;margin: 0 2vw 0 0;}
.rank .rank_items dd{width: 100%;}
.rank .rank_items dd .batch{-ms-writing-mode: inherit;writing-mode: inherit;line-height: 1.2;right: 0;top: 10px;font-size: 16px;}
.rank .rank_items dd .batch small{font-size: 100%;}
.rank .rank_items dd .sub{text-align: left;margin-bottom: 10px;}
.rank .rank_items dd .name{text-align: left;font-size: 20px;margin-bottom: 0;}
.rank .rank_items dd .name small{font-size: 70%;}

.notes dl {padding: 40px;}
.notes dt{margin-bottom: 20px;font-size: 16px;padding-left: 10px;}
.notes dt small{ font-size: 80%;}
.notes dd{margin-bottom: 10px;font-size: 14px;}


}

@media screen and (min-width: 736px)and (max-width: 1000px) {
.intro .flex{display: block;}
.intro .flex:nth-of-type(1) .bg{width: 100%;height: 600px;}
.intro .flex:nth-of-type(2) .bg{width: 100%;height: 600px;}
.intro .flex .text{width: 100%;padding: 4vw 6vw;}

}

/* =============================================
retina用
================================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
.top{background-image: url(../../images/stylist/entry/top_bg@2x.jpg) ;}
.intro .flex:nth-of-type(1) .bg{background-image: url(../../images/stylist/entry/intro01@2x.jpg) ;}
.intro .flex:nth-of-type(2) .bg{background-image: url(../../images/stylist/entry/intro02@2x.jpg) ;}
.rank{background-image:url(../../images/stylist/entry/rank@2x.jpg) ;}

}