@charset "UTF-8";

.top-about { padding: 14vw 0 28vw; z-index: 2; position: relative; }
.top-about-content { width: 90vw; margin: 0 auto; z-index: 1; position: relative; }
.top-about-content:before { content: ''; width: 54vw; height: 125vw; background: var(--pink02); z-index: -1; position: absolute; top: 45vw; right: -5vw; }
.top-about-image01 { width: 70vw; margin-bottom: 8vw; z-index: 1; position: relative; }
.top-about-image01 img { width: 100%; }
.top-about-comment { margin-bottom: 4vw; }
.top-about-comment p { font-size: 3.6vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.top-about-items { width: 95vw; }
.top-about-items li { width: 100%; padding: 4vw; font-size: 3.6vw; font-weight: bold; line-height: 1.4; border-bottom: 1px dashed #c2c2c2; position: relative; }
.top-about-items li:last-child { border: none; }
.top-about-items li:before { content: '\e900'; color: var(--pink); font-size: 75%; font-family: 'icon'; position: absolute; top: 5vw; left: 0; }

.top-about-image02 { width: 60vw; z-index: 1; position: absolute; right: -5vw; bottom: -45vw; }
.top-about-image02 img { width: 100%; }
.top-about-typo { color: var(--pink); font-size: 15.6vw; font-family: trajan-pro-3; font-optical-sizing: auto; font-weight: 400;  letter-spacing: 0.04em; -ms-writing-mode: tb-rl; writing-mode: tb-rl; opacity: 0.2; z-index: 2; position: absolute; top: 22vw; right: 0; }

.top-menu { padding: 32vw 0 14vw; background: var(--pink02); z-index: 1; position: relative; }
.top-menu:before { content: ''; width: 140vw; height: 112vw; background: url(../images/top-menu-bg.png) no-repeat center bottom; background-size: 100%; z-index: -1; position: absolute; top: 0; left: 0; mix-blend-mode: color-burn; }
.top-menu-head { margin: 0 auto 6vw; position: relative; }
.top-menu-head-comment p { font-size: 3.6vw; text-align: center; line-height: 1.8; }
.top-menu-items { width: 90vw; margin: 0 auto; }
.top-menu-items li { width: 100%; margin-bottom: 10vw; }
.top-menu-item-image { width: 100%; margin: 0 auto 4vw; position: relative; }
.top-menu-item-image .image { width: 100%; }
.top-menu-item-image .badge { padding: 1vw 1.5vw; color: #fff; font-size: 3.4vw; background: var(--pink); position: absolute; top: 0; left: 0; }

.top-menu-item-title { margin-bottom: 2.5vw; color: var(--pink); font-size: 5.2vw; font-family: var(--mincho); font-weight: 600; line-height: 1.4; }
.top-menu-item-comment { margin-bottom: 4vw; }
.top-menu-item-comment p { font-size: 3.6vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }

.top-features { padding-bottom: 14vw; }
.top-features-head { height: 50vw; margin-bottom: 8vw; background: url(../images/top-features-bg.jpg) no-repeat center; background-size: cover; position: relative; }
.top-features-title { width: 100%; color: #fff; position: absolute; top: 50%; left: 0; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.top-features-items { width: 100%; }
.top-features-items .prev { width: 12vw; height: 12vw; color: #fff; font-size: 5.2vw; background: #585758; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; z-index: 2; cursor: pointer; position: absolute; top: 52vw; left: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.top-features-items .next { width: 12vw; height: 12vw; color: #fff; font-size: 5.2vw; background: #585758; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; z-index: 2; cursor: pointer; position: absolute; top: 52vw; right: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.top-features-item { width: 90vw; margin: 0 5vw; background: var(--pink); }
.top-features-item-image { width: 100%; }
.top-features-item-text { padding: 15vw 5vw 6vw; color: #fff; position: relative; }
.top-features-item-badge { font-size: 11vw; font-family: trajan-pro-3; font-optical-sizing: auto; font-weight: 400;  letter-spacing: 0.04em; opacity: 0.14; position: absolute; top: 2vw; right: 2vw; }
.top-features-item-title { margin-bottom: 2vw; font-size: 4.7vw; font-weight: bold; line-height: 1.6; }
.top-features-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; }

.top-stylist { padding-bottom: 4vw; }
.top-stylist-items { width: 100%; }
.top-stylist-items li { width: 100%; margin-bottom: 10vw; }
.top-stylist-item-image { width: 100%; margin-bottom: 8vw; }
.top-stylist-item-image .image01 { width: 100vw; height: 60vw; background: url(../images/top-stylist-item-image01-pc.jpg) no-repeat center; background-size: cover; display: block; }
.top-stylist-item-image .image02 { width: 100vw; height: 60vw; background: url(../images/top-stylist-item-image02-pc.jpg) no-repeat center; background-size: cover; display: block; }

.top-stylist-item-text { width: 90vw; margin: 0 auto; }
.top-stylist-item-comment { margin-bottom: 5vw; }
.top-stylist-item-comment p { font-size: 3.6vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.top-stylist-item-more { margin-left: 0; }

.top-voice { padding: 14vw 0; background: var(--pink02); }
.top-voice-items { width: 100%; padding-bottom: 8vw; margin: 0 auto 8vw}
.top-voice-item { width: 90vw; padding: 5vw 5vw 6vw; margin: 0 5vw; background: #fff; }
.top-voice-item-head { margin-bottom: 4vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; }
.top-voice-item-icon { width: 22vw; margin-right: 2.5vw; }
.top-voice-item-title { padding: 1.5vw 0 2.5vw; font-weight: bold; border-bottom: 1px dashed #b6b6b6; flex: 1; }
.top-voice-item-title .title { margin-bottom: 2vw; color: var(--pink); font-size: 4.2vw; line-height: 1.4; display: block; }
.top-voice-item-title .user { color: #adadad; font-size: 3.4vw; }
.top-voice-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;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;}

.top-pickup { padding: 14vw 0 6vw; }
.top-pickup-items { width: 90vw; margin: 0 auto; }
.top-pickup-items li { width: 100%; margin-bottom: 8vw; }
.top-pickup-item-image { width: 100%; margin-bottom: 4vw; }
.top-pickup-item-title .en {margin-bottom: 1vw;color: var(--pink);font-size: 6vw;font-family: trajan-pro-3;font-optical-sizing: auto;font-weight: 400;display: block;}
.top-pickup-item-title .jp { font-size: 3.4vw; display: block; }

.top-news { padding-bottom: 14vw; }
.top-news-content {width: 90vw;/* height: 50vw; */margin: 0 auto;/* background: #ccc; */}
.top-news-content iframe{width: 100%;min-height: 100vw;}

/* ============================================= 
pc
================================================*/
@media screen and (min-width: 736px) { 
  
.top-about { padding: 120px 0; }
.top-about:before { content: ''; width: calc(50vw - 380px); height: 650px; background: var(--pink02); z-index: -1; position: absolute; bottom: 0; left: 0; }
.top-about-content {width: clamp(730px, 90%, 1200px);display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;}
.top-about-content:before { display: none; }
.top-about-image01 {width: 480px;margin: 0 4vw 0 0;/* max-width: 480px; */width: min(70%,480px);}
.top-about-text { width: 660px; padding-top: 90px; }
.top-about-comment { margin-bottom: 30px; }
.top-about-comment p { font-size: 15px; line-height: 2.2; }
.top-about-items { width: 100%; }
.top-about-items li { padding: 16px; font-size: 15px; }
.top-about-items li:before { top: 20px; }
.top-about-typo {color: #444;font-size: clamp(80px, 90%, 115px);-ms-writing-mode: lr-tb;writing-mode: lr-tb;opacity: 0.06;top: -50px;right: -110px;}
.top-about-image02 {width: 350px;right: -200px;bottom: -185px;width: min(70%,360px);}

.top-menu { padding: 120px 0 60px; }
.top-menu:before { width: 742px; height: 544px; background: url(../images/top-menu-bg01-pc.png) no-repeat center bottom; background-size: 100%; right: 0; left: auto; }
.top-menu:after { content: ''; width: 694px; height: 544px; background: url(../images/top-menu-bg02-pc.png) no-repeat center bottom; background-size: 100%; z-index: -1; position: absolute; bottom: 0; left: 0; mix-blend-mode: color-burn; }
.top-menu-head { margin-bottom: 50px; }
.top-menu-head-comment p { font-size: 16px; }
.top-menu-items {width: clamp(730px, 90%, 1200px);display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;gap: 0 30px;}
.top-menu-items:before { content: ''; width: 380px; order: 1; }
.top-menu-items:after { content: ''; width: 380px; }
.top-menu-items li {padding-bottom: 50px;margin-bottom: 60px;width: calc((100% - 60px) / 3);position: relative;}
.top-menu-items li:nth-child(3n+2) { -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.top-menu-items li:nth-child(3n) { -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.top-menu-item-image { margin-bottom: 20px; }
.top-menu-item-image .badge { padding: 5px 8px; font-size: 14px; }
.top-menu-item-title { margin-bottom: 5px; font-size: 22px; }
.top-menu-item-comment { margin: 0; }
.top-menu-item-comment p { font-size: 15px; }
.top-menu-item-more { position: absolute; right: 0; bottom: 0; }

.top-features { padding-bottom: 120px; }
.top-features-head { height: 300px; margin-bottom: 100px; background: url(../images/top-features-bg-pc.jpg) no-repeat center; background-size: cover; }
.top-features-title { width: 480px; padding: 35px 0 10px; margin: 0; color: var(--black); background: #fff; top: auto; bottom: 0; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.top-features-items .prev {width: 50px;height: 50px;font-size: 20px;top: 140px;left: calc(50% - 545px);right: auto;}
.top-features-items .next {width: 50px;height: 50px;font-size: 20px;top: 140px;left: calc(50% - -495px);right: auto;}
.top-features-items {margin: -28px auto;}
.top-features-items .slick-track { padding: 28px 0; }
.top-features-item { width: 960px; margin: 0 40px; z-index: 1; position: relative; }
.top-features-item:before { content: ''; width: 100%; height: 100%; background: #ffc5d1; z-index: -1; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%) rotate(3deg); -ms-transform: translate(-50%, -50%) rotate(3deg); -webkit-transform: translate(-50%, -50%) rotate(3deg); transform: translate(-50%, -50%) rotate(3deg); }
.top-features-item-content { background: var(--pink); display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; }
.top-features-item-image { width: 480px; }
.top-features-item-text { padding: 90px 30px 0; flex: 1; }
.top-features-item-badge { font-size: 60px; letter-spacing: 1px; top: 10px; right: 10px; }
.top-features-item-title { margin-bottom: 15px; font-size: 20px; }
.top-features-item-comment p { font-size: 14px; }

.top-stylist { padding: 0; }
.top-stylist-items li {margin-bottom: 0;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;}
.top-stylist-items li:nth-child(odd) .top-stylist-item-image { order: 0; }
.top-stylist-items li:nth-child(odd) .top-stylist-item-text {margin-right: auto;order: 1;padding: 0 2vw 0 6vw;}
.top-stylist-items li:nth-child(even) .top-stylist-item-image { order: 1; }
.top-stylist-items li:nth-child(even) .top-stylist-item-text {margin-left: auto;order: 0;padding: 0 6vw 0 2vw;}
.top-stylist-item-image { width: 50%; margin: 0; }
.top-stylist-item-image .image01 { width: 50vw; height: 550px; background: url(../images/top-stylist-item-image01-pc.jpg) no-repeat center; background-size: cover; }
.top-stylist-item-image .image02 { width: 50vw; height: 550px; background: url(../images/top-stylist-item-image02-pc.jpg) no-repeat center; background-size: cover; }
.top-stylist-item-text {width: 600px;margin: 0;}
.top-stylist-item-comment { margin-bottom: 40px; }
.top-stylist-item-comment p { font-size: 16px; }

.top-voice { padding: 120px 0; }
.top-voice-items {width: clamp(730px, 100%, 1440px);padding-bottom: 40px;margin: 0 auto 50px;}
.top-voice-items .slick-dots li { width: 8px; height: 8px; margin: 0 6px; }
.top-voice-item { width: 450px; padding: 30px; margin: 0 20px; }
.top-voice-item-head { margin-bottom: 20px; }
.top-voice-item-icon { width: 100px; margin-right: 20px; }
.top-voice-item-title { padding: 5px 0 20px; }
.top-voice-item-title .title { margin-bottom: 6px; font-size: 20px; }
.top-voice-item-title .user { font-size: 15px; }
.top-voice-item-comment p { font-size: 15px; }

.top-pickup {/* padding: 120px 0; */width: 50%;padding: 0;order: 1;}
.top-pickup-items {width: 290px;}
.top-pickup-items li {margin: 0 0 30px;}
.top-pickup-item-image { margin-bottom: 20px; }
.top-pickup-item-title{margin: -30px 0 0;}
.top-pickup-item-title .en {margin-bottom: 10px;font-size: 26px;}
.top-pickup-item-title .jp { font-size: 15px; }

.top-news {/* padding-bottom: 120px; */width: 50%;}
.top-news-inner {position: relative;}
.top-news-title {margin: 0;text-align: left;/* position: absolute; */top: 10px;left: 0;margin-bottom: 50px;}
.top-news-content { width: 100%; height: 420px; margin: 0; }
.top-news-content iframe{width: 100%;min-height: 500px;}

.flex{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: flex-start;align-items: flex-start;width: clamp(730px, 90%, 900px);margin: 0 auto;padding: 100px 0 100px;}
}

@media screen and (min-width: 736px) and (max-width: 1100px) {
.top-hero-items{width: 980px; margin: 0 -260px 0 auto;}
.top-about-image02{right: -80px;bottom: -240px;width: 300px;}

.top-stylist-items li{display: block;}
.top-stylist-item-image{width: 100%;}
.top-stylist-item-text{width: 100%;}
.top-stylist-item-image .image01{width: 100vw;}
.top-stylist-item-image .image02{width: 100vw;}
.top-stylist-items li:nth-child(odd) .top-stylist-item-text{padding: 6vw 6vw;}
.top-stylist-items li:nth-child(even) .top-stylist-item-text{padding: 6vw 6vw;}

.top-features-items .prev {top: 360px;left: calc(50% - 60px);right: auto;}
.top-features-items .next {top: 360px;left: calc(50% - -10px);right: auto;}
}

/* =============================================
retina用
================================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
.top-menu:before { background-image: url(../images/top-menu-bg01-pc@2x.png) ; }
.top-menu:after { background-image: url(../images/top-menu-bg02-pc@2x.png); }
.top-features-head { background-image: url(../images/top-features-bg-pc@2x.jpg) ; }
.top-stylist-item-image .image01 { background-image: url(../images/top-stylist-item-image01-pc@2x.jpg) ; }
.top-stylist-item-image .image02 { background-image: url(../images/top-stylist-item-image02-pc@2x.jpg) ; } 
}