@charset "UTF-8";
/* font
----------------------------------------------- */
:root { --gothic: 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; --mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif; 
--black: #555;
--purple01: #ac7fb0; /*パープル*/
--purple02: #755075; /*濃いパープル*/ 
}

/* default sp
	----------------------------------------------- */
/* ============================================= sp
================================================*/
.top-concept { padding: 12vw 0 16vw;  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(60vw, #ffffff), color-stop(100%, #eee0ed)); background: -moz-linear-gradient(top, #ffffff 60vw, #eee0ed); background: -webkit-linear-gradient(top, #ffffff 60vw, #eee0ed); background: linear-gradient(to bottom, #ffffff 60vw, #eee0ed); }
.top-concept-gallery-items { width: 100%; }
.top-concept-gallery-item { color: #eee6ee; font-size: 19.74vw; font-family: paganini; font-weight: 300; letter-spacing: 1vw; opacity: 0.6; }
.top-concept-content { width: 100%; margin-top: -4vw; z-index: 1; position: relative; }
.top-concept-item-image { width: 100%; padding-bottom: 18vw; margin-bottom: 10vw; position: relative; }
.top-concept-item-image .image01 { width: 100%; }
.top-concept-item-image .image02 { width: 42vw; z-index: 1; position: absolute; bottom: 0; left: 0; }
.top-concept-text { width: 90vw; margin: 0 auto; }
.top-concept-subtitle { margin-bottom: 6vw; color: var(--purple02); font-size: 5.53vw; font-family: var(--mincho); text-align: center; line-height: 1.6; }
.top-concept-comment { margin-bottom: 8vw; }
.top-concept-comment p { font-size: 3.68vw; text-align: center; line-height: 1.8; }

.top-about { padding: 16vw 0 8vw;background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40vw, #926e91), color-stop(100%, #d6b8d5)); background: -moz-linear-gradient(top, #926e91 40vw, #d6b8d5); background: -webkit-linear-gradient(top, #926e91 40vw, #d6b8d5); background: linear-gradient(to bottom, #926e91 40vw, #d6b8d5); position: relative; }
.top-about:before { content: ''; height: 12vw; border-left: 1px dotted #fff; position: absolute; top: 0; left: 50%; }
.top-about-title { color: #fff; }
.top-about-items { width: 90vw; margin: 0 auto; }
.top-about-items li { width: 100%; margin-bottom: 8vw; }
.top-about-item-image { width: 100%; margin-bottom: 5vw; }
.top-about-item-text { color: #fff; text-align: center; }
.top-about-item-title { padding-bottom: 4vw; margin-bottom: 5vw; position: relative; }
.top-about-item-title:after { content: ''; width: 6vw; height: 1px; background: #fff; position: absolute; bottom: 0; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.top-about-item-title .en { margin-bottom: 2vw; font-size: 7.89vw; font-family: paganini; font-weight: 300; letter-spacing: 0.4vw; display: block; }
.top-about-item-title .jp { font-size: 3.95vw; font-family: var(--mincho); display: block; }
.top-about-item-comment { margin-bottom: 5vw; }
.top-about-item-comment p { font-size: 3.68vw; line-height: 1.8; }
.top-about-item-more { width: 40vw; padding: 2.5vw 0; margin: 0 auto; color: #fff; font-size: 3.95vw; font-family: proxima-nova; font-weight: 400; letter-spacing: 0.2vw; background: url(../images/arrow01.png) no-repeat center right 4vw; background-size: 2vw; border: 1px solid #fff; -moz-border-radius: 10vw; -webkit-border-radius: 10vw; border-radius: 10vw; }
.tplist{width: 80%;margin:0 auto;}
.tplist li{margin-bottom:5vw;}
.tplist img{width:100%;}
.tplist a{position:relative;}
.tplist p{position: absolute;z-index: 1;text-align: center;margin: auto;width: 100%;top: 50%;left: 0;right: 0;transform: translate(0, -50%);color:#fff;font-family:var(--mincho);font-size:6vw;font-weight: bold;}
.tplist span{display:block;font-family: proxima-nova;font-weight: 400;font-size:70%;}
.tplist p:after{content: '\f107';font-family: 'icon';margin-left: 10px;}

.top-itemslist {padding: 16vw 0 0 0;}
.top-itemslist-head { margin-bottom: 6vw; }
.top-itemslist-head-comment { font-size: 3.68vw; text-align: center; line-height: 1.8; }
.top-itemslist-items { width: 90vw; margin: 0 auto 8vw; }
.top-itemslist-items li { width: 100%; margin-bottom: 4vw; }
.top-itemslist-items img { width: 100%; }

.top-message {position: relative;}
.top-message-gallery-items { width: 100%; z-index: 1; position: absolute; top: 104vw; left: 0; }
.top-message-gallery-item { margin: 0 5vw; color: #eee6ee; font-size: 26.32vw; font-family: paganini; font-weight: 300; letter-spacing: 1vw; opacity: 0.6; }
.top-message-item-image01 { width: 100%; margin-bottom: 6vw; }
.top-message-item-image01 img { width: 100%; }
.top-message-item-image02 { width: 74vw; margin: 0 0 18vw auto; }
.top-message-text { width: 90vw; margin: 0 auto; }
.top-message-title { margin-bottom: 5vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: baseline; align-items: baseline; }
.top-message-title .en { font-size: 13.16vw; font-family: paganini; font-weight: 300; letter-spacing: 0.2vw; }
.top-message-title .en:after { content: ''; width: 6vw; height: 1px; margin: 0 2.5vw; background: var(--black); display: inline-block; }
.top-message-title .jp { font-size: 3.95vw; }
.top-message-comment { margin-bottom: 8vw; }
.top-message-comment p { font-size: 3.68vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.top-message-more { margin: 0; }

.top-4beauty {width: 100%;height: 180vw;padding-top: 60vw;background: url(../images/top-4beauty-bg.jpg) no-repeat top center;background-size: cover;}
.top-4beauty-items .item01 {width: 50vw;margin: 0 0 0 auto;}
.top-4beauty-items .item02 {width: 50vw;margin: -34vw auto 0 2vw;}
.top-4beauty-items .item03 {width: 50vw;margin: -17vw 0 0 auto;}
.top-4beauty-items .item04 {width: 50vw;margin: -33vw auto 0 3vw;}
.top-4beauty-items img { width: 100%; }

.top-news { padding: 16vw 0; }
.top-news-content { width: 90vw; margin: 0 auto; }
.top-news-title { margin-bottom: 2vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: baseline; align-items: baseline; }
.top-news-title .en { margin-right: 2.5vw; font-size: 13.16vw; font-family: paganini; font-weight: 300; }
.top-news-title .jp { font-size: 3.95vw; }
.top-news-items { width: 100%; margin: 0 auto 8vw; }
.top-news-items li { width: 100%; border-bottom: 1px solid #c2c2c1; position: relative; }
.top-news-items a { padding: 6vw 14vw 6vw 0; }
.top-news-items a:after { content: '\f105'; width: 16vw; height: 16vw; color: var(--purple01); font-size: 6.58vw; font-family: 'icon'; background: #f3f3f3; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; pointer-events: none; position: absolute; top: 6vw; 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-news-item-time { padding: 2vw 4vw 1.5vw; margin-bottom: 2vw; color: #fff; font-size: 3.68vw; letter-spacing: 0.2vw; background: var(--purple01); -moz-border-radius: 10vw; -webkit-border-radius: 10vw; border-radius: 10vw; display: table; }
.top-news-item-title { color: var(--purple02); font-size: 5.26vw; font-weight: bold; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.top-news-item-comment { margin-top: 2.5vw; }
.top-news-item-comment p { font-size: 3.42vw; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* ============================================= pc
================================================*/
@media screen and (min-width: 769px) { .top-concept {padding: 60px 0 120px 0;background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(100%, #eee0ed));background: -moz-linear-gradient(top, #ffffff 20%, #eee0ed);background: -webkit-linear-gradient(top, #ffffff 20%, #eee0ed);background: linear-gradient(to bottom, #ffffff 20%, #eee0ed);}
.top-concept-gallery-items { height: 125px; overflow: hidden; }
.top-concept-gallery-item { font-size: 150px; letter-spacing: 8px; }
.top-concept-content {width: 95%;max-width: 1200px;margin: -115px auto 0;display: -webkit-box;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;}
.top-concept-item-image {width: 42%;padding: 0;margin: 0 0 0 -210px;}
.top-concept-item-image .image02 { width: 315px; margin: -60px -110px 0 auto; position: relative; bottom: auto; left: auto; }
.top-concept-text {width: 70%;padding-top: 170px;margin: 0;}
.top-concept-title .en { margin-bottom: 20px; font-size: 80px; }
.top-concept-subtitle { margin-bottom: 30px; font-size: 25px; }
.top-concept-comment { margin-bottom: 50px; }
.top-concept-comment p { font-size: 16px; line-height: 2.2; }
	
.top-about {padding: 120px 0;background: linear-gradient(to bottom, #926e91 70%, #d6b8d5);}
.top-about:before { height: 70px; }
.top-about-items {width: 95%;max-width: 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;}
.top-about-items li {width: 48%;margin: 0;}
.top-about-item-image { margin-bottom: 30px; }
.top-about-item-title { padding-bottom: 20px; margin-bottom: 25px; }
.top-about-item-title:after { width: 25px; }
.top-about-item-title .en { margin-bottom: 5px; font-size: 30px; letter-spacing: 2px; }
.top-about-item-title .jp { font-size: 15px; }
.top-about-item-comment { margin-bottom: 30px; }
.top-about-item-comment p { font-size: 15px; }
.top-about-item-more { width: 160px; padding: 8px 0 9px; font-size: 15px; letter-spacing: 2px; background-position: center right 12px; background-size: 8px; }
.tplist{isplay: -moz-box;display: -webkit-flex;display: box;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;width: 80%;max-width: 1200px;}
.tplist li{width:48%;}
.tplist p{font-size:30px;}

									  
.top-itemslist {padding: 120px 0 50px 0;}
.top-itemslist-head { margin-bottom: 50px; }
.top-itemslist-head-comment { font-size: 16px; }
.top-itemslist-items {width: 95%;max-width: 1200px;margin-bottom: 30px;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.top-itemslist-items:after { content: ''; width: 385px; }
.top-itemslist-items li {width: 32%;max-width: 385px;margin-bottom: 20px;}
	
.top-message {padding-bottom: 120px;}
.top-message-gallery-items { top: -15px; }
.top-message-gallery-item { margin: 0 30px; font-size: 150px; letter-spacing: 8px; }
.top-message-content {width: 95%;max-width: 1200px;margin: 0 auto;z-index: 1;position: relative;padding-top: 100px;}
.top-message-item-image01 { width: 820px; margin-bottom: 40px; }
.top-message-item-image02 { width: 550px; margin: 0; position: absolute; top: 275px; right: -235px; }
.top-message-item-image03 { width: 365px; position: absolute; top: 10px; right: -310px; }
.top-message-text {width: 620px;margin: 0;position: relative;}
.top-message-title { margin-bottom: 30px; }
.top-message-title .en { font-size: 80px; letter-spacing: 2px; }
.top-message-title .en:after { width: 30px; margin: 0 12px; }
.top-message-title .jp { font-size: 15px; }
.top-message-comment { margin-bottom: 50px; }
.top-message-comment p { font-size: 16px; line-height: 2.2; }
	
.top-4beauty {height: 820px;padding-top: 0;background: url(../images/top-4beauty-bg-pc.jpg) no-repeat top center;background-size: cover;}
.top-4beauty-items {width: 95%;max-width: 1200px;height: 100%;margin: 0 auto;position: relative;}
.top-4beauty-items .item01 {width: 30%;max-width: 266px;margin: 0;position: absolute;top: 460px;left: 5%;}
.top-4beauty-items .item02 {width: 30%;max-width: 266px;margin: 0;position: absolute;top: 140px;left: 0;}
.top-4beauty-items .item03 {width: 30%;max-width: 266px;margin: 0;position: absolute;top: 135px;right: 0;}
.top-4beauty-items .item04 {width: 30%;max-width: 266px;margin: 0;position: absolute;top: 470px;right: 5%;}
	
.top-news { padding: 80px 0 120px; }
.top-news-content {width: 95%;max-width: 1200px;position: relative;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.top-news-title {width: 30%;padding-top: 40px;margin: 0;display: block;}
.top-news-title .en { margin: 0 0 10px; font-size: 60px; display: block; }
.top-news-title .jp { font-size: 15px; display: block; }
.top-news-items {width: 67%;margin: 0;}
.top-news-items a { padding: 40px 100px 40px 10px; }
.top-news-items a:after { width: 65px; height: 65px; font-size: 28px; top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.top-news-item-time {padding: 8px 15px 6px;margin-bottom: 10px;font-size: 15px;letter-spacing: 1px;}
.top-news-item-title { font-size: 20px; }
.top-news-item-comment { margin-top: 20px; }
.top-news-item-comment p { font-size: 15px; }
.top-news-more { width: 230px; position: absolute; top: 170px; left: 0; }
}

@media screen and (min-width: 1200px) { 
.top-concept-item-image{width:555px;}
.top-concept-text{width:760px;}
.top-about-items li{max-width: 575px;}
.top-4beauty{height:750px}
.top-4beauty-items .item01{left: calc(50% - 470px);top: 320px;}
.top-4beauty-items .item02{left: calc(50% - 650px);top: 90px;}
.top-4beauty-items .item03{right: calc(50% - 660px);top: 90px;}
.top-4beauty-items .item04{right: calc(50% - 470px);top: 320px;}
}
  /* retina用 ----------------------------------------------- */ 
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
.top-about-item-more { background: url(../images/arrow01@2x.png) no-repeat center right 12px; background-size: 8px; }
.top-4beauty { background: url(../images/top-4beauty-bg-pc@2x.jpg) no-repeat top center; background-size: cover; } 
}