@charset "UTF-8";
@import url('https://use.typekit.net/vun7gtg.css');
@import url('https://use.typekit.net/iak3fox.css');

/* @font-face{
  font-family: DINAlternate-Bold;
  src: url('../fonts/DINAlternate-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal
} */

html {
  font-size: 10px;
}

body {
  overflow-x: hidden !important;
}

img {
  image-rendering: auto;
}

.l-header {
  display: none;
}
.l-container {
  width: 100%;
}

.l-container #feature {
  width: 100%;
  margin: 0 auto;
  display: block;
  font-feature-settings: "palt" 1;
  font-family: 'Yu Gothic', '游ゴシック', 'YuGothic', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', Meiryo, メイリオ, Helvetica, Arial, sans-serif;
  color: #302D2C;
}

.l-container #feature .spbr {
  display: none;
}
.l-container #feature .only-sp {
  display: none;
}

.l-container #feature .default-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
}

.l-container #feature *,
.l-container #feature *::after,
.l-container #feature *::before {
  box-sizing: border-box;
}

.l-container #feature a {
  transition: opacity 0.2s;
  text-decoration: none;
  position: relative;
  display: block;
}

.l-container #feature a:hover {
  opacity: 0.5;
  cursor: pointer;
}

/* ------- hero ------- */
.l-container #feature .hero {
  width: 100%;
  height: 142.9rem;
  position: relative;
  overflow: hidden;
}
.l-container #feature .hero::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/main-visual.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-animation: zoom 10s 1;
  animation: zoom 10s 1;
  animation-fill-mode: forwards;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
@keyframes zoom {
  0% {
     transform: scale(1.4);
  }
  100% {
     transform: scale(1);
  }
}

.l-container #feature .hero__inner {
  position: relative;
  z-index: 10;
  width: 100vw;
	height:100vh;
  margin: 0 auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.l-container #feature .hero__navi {
  display: flex;
  margin: 4rem auto 0 6rem;
	z-index: 2;
}
.l-container #feature .hero__navi .navi-btn01 {
  width: 11.7rem;
  margin-right: 1.5rem;
}
.l-container #feature .hero__navi .navi-btn02 {
  width: 18.4rem;
}
.l-container #feature h2 {
	position: absolute;
	width:100vw;
	height:100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
  margin: 0;
  /*width: 76.6rem;*/
}
.l-container #feature .hero__logo {
  width: 76.6rem;
  /*margin: 33rem 0 0 0;*/
	z-index: 5;
}
.l-container #feature .hero__title {
  width: 33.6rem;
  margin: 7rem auto 0;
}

/*------- container -------*/
.l-container #feature .main {
  margin-bottom: 10rem;
}
.l-container #feature .container-1200 {
  /* display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; */
  width: 120rem;
  margin: 0 auto;
  text-align: center;
}
.l-container #feature .container-1200.container-01 {
  margin: 13.4rem auto 0;
}

.l-container #feature .container__heading--ja {
  font: normal 400 2.5rem/4.5rem "dnp-shuei-nmincho-std", sans-serif;
  letter-spacing: calc(150/ 1000 * 1em);
  color: #3B3938;
  margin-bottom: 2.6rem;
}
.l-container #feature .container__heading--en {
  font: normal 400 4.1rem/3.7rem "ivymode", sans-serif;
  letter-spacing: calc(100/ 1000 * 1em);
  color: #8E8E8F;
}
.l-container #feature .container__heading--en01 {
  margin-bottom: 10rem;
}
.l-container #feature .container__heading--en02 {
  margin-bottom: 9rem;
}
.l-container #feature .container__heading--en03 {
  margin-bottom: 10.2rem;
}

.l-container #feature .container__heading--en04 {
  margin-bottom: 7.49rem;
}

.l-container #feature .detail-txt {
  font-size: 1.8rem;
  line-height: 4rem;
  letter-spacing: calc(150/ 1000 * 1em);
}
.l-container #feature .detail-txt--02 {
  margin-bottom: 12rem;
}

.l-container #feature .main__navi {
  display: flex;
  margin: 10.4rem 0 9.7rem 25rem;
}
.l-container #feature .main__navi li {
  background: url(../img/page-btn-bg.png) top left/contain no-repeat;
  width: 29.9rem;
  height: 18.7rem;
}
.l-container #feature .main__navi li:nth-child(1) {
  margin: 10.9rem 6rem 0 0;
}
.l-container #feature .main__navi li:nth-child(1) img {
  width: 19.7rem;
  margin: 4.5rem 0 0 5.3rem;
}
.l-container #feature .main__navi li:nth-child(2) img {
  width: 22rem;
  margin: 4.8rem 0 0 4.3rem;
}

.l-container #feature .wear-image {
  width: 100%;
  height: 163.5rem;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.l-container #feature .wear-image::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/wear-image.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.l-container #feature .skin-image {
  width: 100%;
  height: 183.5rem;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.l-container #feature .skin-image::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/skincare-image.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.l-container #feature .decoration_01 {
  width: 26.1rem;
  margin: -2.3rem 0 0 63.4rem;
}
.l-container #feature .decoration_02 {
  width: 32rem;
  margin: 9rem 0 7.4rem 46rem;
}
.l-container #feature .wear-deco01 {
  width: 55rem;
  margin: -7.5rem 0 12rem 6rem;
  position: relative;
  z-index: 10;
}
.l-container #feature .skin-deco01 {
  width: 55rem;
  margin: -14rem 0 10rem 58.7rem;
  position: relative;
  z-index: 10;
}
.l-container #feature .wear-detail {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  margin-bottom: 26.8rem;
}
.l-container #feature .wear-detail .text-right {
  text-align: right;
}
.l-container #feature .wear-detail .detail-txt01 {
  margin: 7.5rem 0 0 14.7rem;
}
.l-container #feature .wear-detail .detail-txt02 {
  margin: 16.2rem 0 0 13.4rem;
}
.l-container #feature .wear-detail .detail-txt03 {
  margin: 19.6rem 0 0 16.8rem;
}
.l-container #feature .wear-detail .detail-txt04 {
  margin: 25.1rem 0 0 22rem;
}
.l-container #feature .wear-detail .detail-txt05 {
  margin: 17rem 0 0 6.6rem;
}
.l-container #feature .wear-detail .detail-txt06 {
  margin: 22.8rem 0 0 20.1rem;
}
.l-container #feature .wear-deco02 {
  width: 51.5rem;
  margin: 0 0 0 9rem;
}
.l-container #feature .wear-deco03 {
  width: 51.5rem;
  margin: 5.6rem 0 0 20.7rem;
}
.l-container #feature .wear-deco04 {
  width: 51.5rem;
  margin: 12rem 0 0 4rem;
}
.l-container #feature .wear-deco05 {
  width: 51.5rem;
  margin: -0.9rem 35rem 0 17rem;
}
.l-container #feature .wear-deco06 {
  width: 51.5rem;
  margin: 11rem 0 0 8rem;
}
.l-container #feature .wear-deco07 {
  width: 51.5rem;
  margin: 5.7rem 0 0 14.4rem;
}
.l-container #feature .wear-deco08 {
  width: 51.5rem;
  margin: 7.4rem 0 0 12.8rem;
}
.l-container #feature .skin-detail {
  display: flex;
  margin-bottom: 17.1rem;
}
.l-container #feature .skin-deco02 {
  width: 22.2rem;
  margin: 21rem 0 0 37rem;
}
.l-container #feature .skin-deco03 {
  width: 24rem;
  margin: 9.6rem 0 0 0;
}

/*------- lineup-blk -------*/
.l-container #feature .lineup-blk {
  display: flex;
}
.l-container #feature .lineup-blk ul {
  margin: 2.8rem 0 0 0;
  font-size: 1.8rem;
  line-height: 4rem;
  letter-spacing: calc(150/ 1000 * 1em);
  color: #302D2C;
}
.l-container #feature .lineup-blk ul .commingsoon {
  color: #8E8E8F;
  letter-spacing: calc(140/ 1000 * 1em);
  margin-bottom: 2.8rem;
}

.l-container #feature .lineup-blk ul .item-name {
  font-size: 2.3rem;
  line-height: 2.3rem;
  font-weight: 700;
  letter-spacing: calc(70/ 1000 * 1em);
  color: #777676;
  margin-bottom: 0.2rem;
}
.l-container #feature .lineup-blk .lineup-icon {
  width: 15.4rem;
  margin: 1.7rem auto 1.7rem;
}
.l-container #feature .lineup-blk .item-btn {
  width: 26.5rem;
  margin: 1.2rem auto 0;
}
.l-container #feature .lineup-blk .en {
  font: normal 400 2.1rem/3.4rem "ivymode", sans-serif;
  letter-spacing: calc(100/ 1000 * 1em);
  color: #8E8E8F;
  margin-right: 1.4rem;
}
.l-container #feature .lineup-blk .ja {
  font-size: 1.4rem;
  line-height: 3rem;
  letter-spacing: calc(100/ 1000 * 1em);
  color: #4C4948;
}
.l-container #feature .lineup-blk .din {
  font: normal 500 2.3rem/2.3rem din-2014, sans-serif;
  padding: 0 0.2rem;
}

.l-container #feature .lineup-blk01--wear .lineup-img {
  width: 26.6rem;
  margin: 0 11.5rem 9rem 23.9rem;
}
.l-container #feature .lineup-blk02--wear .lineup-img {
  width: 23.8rem;
  margin: 0 12.3rem 12.1rem 25.3rem;
}
.l-container #feature .lineup-blk02--wear ul {
  margin: 4.5rem 0 0 0;
}
.l-container #feature .lineup-blk03--wear .lineup-img {
  width: 21rem;
  margin: 0 14.3rem 12.4rem 26.9rem;
}
.l-container #feature .lineup-blk03--wear ul {
  margin: 4.2rem 0 0 0;
}
.l-container #feature .lineup-blk04--wear .lineup-img {
  width: 23.4rem;
  margin: 0 12.4rem 14.4rem 25.5rem;
}
.l-container #feature .lineup-blk04--wear ul {
  margin: 4.1rem 0 0 0;
}
.l-container #feature .lineup-blk05--wear .lineup-img {
  width: 27.4rem;
  margin: 0 12.1rem 13.2rem 24rem;
}
.l-container #feature .lineup-blk05--wear ul {
  margin: 6.6rem 0 0 0;
}
.l-container #feature .lineup-blk06--wear .lineup-img {
  width: 23.8rem;
  margin: 0 12.5rem 20.5rem 23.3rem;
}
.l-container #feature .lineup-blk06--wear ul {
  margin: 0.2rem 0 0 0;
}
.l-container #feature .line {
  width: 91.5rem;
  height: 0.1rem;
  background-color: #707070;
  margin: 0 auto 14.4rem;
}

.l-container #feature .lineup-blk01--skin .lineup-img {
  width: 11.9rem;
  margin: 0 11.6rem 8.6rem 38rem;
}
.l-container #feature .lineup-blk01--skin ul {
  margin: 8.8rem 0 0 0;
}
.l-container #feature .lineup-blk02--skin .lineup-img {
  width: 15.7rem;
  margin: 0 9.3rem 8.9rem 36.6rem;
}
.l-container #feature .lineup-blk02--skin ul {
  margin: 8.5rem 0 0 0;
}
.l-container #feature .point-list {
  margin-bottom: 13.2rem;
}
.l-container #feature .point-list .subttl {
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 4rem;
  letter-spacing: calc(70/ 1000 * 1em);
  color: #707070;
  margin-bottom: 1.2rem;
}
.l-container #feature .point-list .detail-txt {
  font-weight: 500;
  line-height: 3rem;
  margin-bottom: 4rem;
}
.l-container #feature .point-list .lineup-icon {
  width: 15.4rem;
  margin: 0 auto 3.3rem;
}

.l-container #feature .vew-all-btn {
  width: 55.4rem;
  margin: 0 auto 11rem;
}
.l-container #feature .btm-blk {
  width: 96rem;
  margin: 0 auto 0;
  border: 1px solid #707070;
  padding: 6.4rem 0 6.2rem;
}
.l-container #feature .btm-blk h3 {
  font-size: 2.7rem;
  line-height: 4rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.l-container #feature .btm-blk .detail-txt {
  line-height: 3.6rem;
}
.l-container #feature .near-shop-btn {
  width: 21.3rem;
  margin: 1.6rem 0 0 86.6rem;
}

/*------- animation -------*/
.scale-animation {
  transform: scale(1.1);
  opacity: 0;
	transition: ease-in, opacity 4000ms, transform 4000ms;
}
.scale-animation_run {
  opacity: 1;
  transform: scale(1);
}
.l-container #feature .fade {
  opacity: 0;
  transition: all 0.7s ease-in;
}
.l-container #feature .fade.show {
  opacity: 1;
}
.l-container #feature .fadeUp {
  opacity: 0;
	transition: ease-in, opacity 2000ms, transform 2000ms;
  transform: translateY(20%);
}
.l-container #feature .fadeUp.show {
  opacity: 1;
  transform: translateY(0);
}
.l-container #feature .fadeDown {
  opacity: 0;
	transition: ease-in, opacity 2000ms, transform 2000ms;
  transform: translateY(-20%);
}
.l-container #feature .fadeDown.show {
  opacity: 1;
  transform: translateY(0);
}
.l-container #feature .fadeLeft {
  opacity: 0;
	transition: ease-in, opacity 2000ms, transform 2000ms;
  transform: translateX(-20%);
}
.l-container #feature .fadeLeft.show {
  opacity: 1;
  transform: translateX(0);
}
.l-container #feature .fadeRight {
  opacity: 0;
	transition: ease-in, opacity 2000ms, transform 2000ms;
  transform: translate(5%, 0);
}
.l-container #feature .fadeRight.show {
  opacity: 1;
  transform: translate(0, 0);
}
.l-container #feature .delay1 {
  transition-delay: 0.3s;
}
.l-container #feature .delay2 {
  transition-delay: 0.6s;
}
.l-container #feature .delay3 {
  transition-delay: 0.9s;
}
.l-container #feature .delay4 {
  transition-delay: 1.2s;
}

@media screen and (max-width: 1200px) {
  html {
    font-size: calc(10 * (100vw / 1200));
  }
}

/* タブレットのみ */
@media screen and (min-width:767px) and (max-width: 1280px) {
  html {
    overflow-x: hidden !important;
    }
  body {
    overflow-x: hidden !important;
  }
}


/*------- size-blk -------*/
.size-blk{
	width:760px;
	margin: 0 auto 23.1rem;
}
.size-blk table{
	border-collapse: collapse;
	border:none;
	margin: 0 auto;
}
.size-blk table thead th{
	background:#D3D3D2;
	border-right:1px solid #FFF;
}
.size-blk table thead th:last-child{
	border-right:none;
}
.size-blk table thead th.jp{
	font-size:3.8rem;
	font-weight: 400;
	line-height: 1;
}
.size-blk table thead th.en{
	font-size:3.6rem;
	font-weight: 400;
	line-height: 1;
}
.size-blk table thead th:nth-child(1){
	width:24.2rem;
	padding:1.87rem 0 2.32rem;
}
.size-blk table thead th:nth-child(2){
	width:29.3rem;
}
.size-blk table thead th:nth-child(3){
	width:22.4rem;
}
.size-blk table tbody tr:first-of-type th,
.size-blk table tbody tr:first-of-type td:nth-of-type(1){
	border-right:1px solid #F2F1F2;
}
.size-blk table tbody tr:last-of-type{
	background: #EAE9E4;
}
.size-blk table tbody tr:last-of-type th,
.size-blk table tbody tr:last-of-type td:nth-of-type(1){
	border-right:1px solid #FFF;
}
.size-blk table tbody th{
	font-size:3.8rem;
	font-weight: 400;
	line-height: 1.2;
	padding:1.99rem 0 2.06rem;
}
.size-blk table tbody td{
	font-size:3.3rem;
	line-height: 1.2;
}
.size-blk table tbody tr:first-of-type th small{
	display: block;
	font-size:2.2rem;
}
.size-blk table tbody tr:last-of-type th small{
	display: block;
	font-size:3.3rem;
}
.size-blk p{
	font-size:2.9rem;
	text-align: left;
	position: relative;
	padding-left:1.2em;
	margin-top:2.2rem;
	margin-left:1.2em;
}
.size-blk p::before{
	content: '※';
	display: inline-block;
	position: absolute;
	top:0;
	left:0;
	width:1.2em;
}