@charset "UTF-8";
/* CSS Document */

body {
	margin:0 auto;
	width: 100%;
	font-size:14px;
    font-weight: 300;
	font-family:sharik-sans, ryo-gothic-plusn, sans-serif;
	line-height:1.8;
}
.header-nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header-nav{}
/* common
------------------------------------------------------------*/
.pc {display: inherit;}
.sp {display: none;}

h1 {width: 100%; margin: 0 auto; text-align: center; font-weight: 100;}
h1 > span{display: block; font-size: .8rem;}
h1 img{width: 90%; margin: 0 auto;}
h2{font-size: 180%; margin-bottom: 2rem; font-weight: 300; letter-spacing: 2px; text-align: center;}
a {color: #333; text-decoration: none;}
a:hover {color:#5d73c9; transition: 1.0s;}

.al-center{text-align: center;}
.al-left{text-align: left;}
.al-right{text-align: right;}

.imgL{float: light; margin:0 10% 5% 0;}
.imgR{float: right; margin:0 0 5% 10%;}

.inner{
    width: 94%; max-width: 1024px;
    margin: 0 auto; padding: 4% 0;
    overflow: hidden; clear: both;
}
.btn{
    width: 8rem; margin: 0 auto; 
	margin-bottom:2rem; padding: 1% 2%; 
	display: block; text-align: center; 
	background-color: none; color: #333; 
    border-radius: 4rem; 
}
.btn:hover{
	background-color: #000; color: #fff;
}

.flex-contents{
  width: 100%; margin: 0 auto; overflow: hidden;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
    /*横並び*/
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
    /*center揃え*/
  -ms-flex-pack: distribute;
  justify-content: space-around;
	flex-wrap: wrap;
}
.flex-contents.top{
	padding: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.logo-area{
    width: 100%; margin: 0 auto 20px; padding: 20px 0 0; height: 60px;
    overflow: hidden; text-align: center;
}
.logo {max-width:200px;}

.slideBOX {
  position: relative;
  width: 90%; margin: 0 auto;
  height: 80vh;
  vertical-align: center;
  overflow: hidden;
}
.slideBOX .slideIMG {
    z-index:10;
    opacity: 0;
    width: 100%;
    opacity: 0;
	height: 100%;
    -webkit-animation: anime 24s 0s infinite;
    animation :slideshow 24s linear infinite;
}
.slideBOX .slideIMG img{
	height: 100%;
	position: absolute;
    top: 50%;
	left: 50%;
    transform: translate(-50%,-50%);
}
@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  20%{
    opacity: 1;
  }
30%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }

}
.slideBOX div:nth-child(2){
  animation-delay: 6s;
}
.slideBOX div:nth-child(3){
  animation-delay: 12s;
}
/*.slideBOX div:nth-child(4){
  animation-delay: 18s;
}
.slideBOX div:nth-child(5){
  animation-delay: 24s;
}*/
.slideBOX div:last-child{
animation-delay: 18s;
 /* animation-delay: 30s;*/
}


.information-area{
	width: 100%; margin-top: 60px;
	background-color: #efece9; text-align: left;
	padding: 1rem 0;
}
.information {
	width: 90%; margin: 0 auto;
	font-size: .8rem;
    align-items: center;
}
.information-date{
	width: fit-content; padding: .15rem .5rem;
	display: block; border:1px solid #333;
	line-height: 1;
}
#about h1,#brand h1{position: relative;}
.text{position: absolute;
    width: 100%;
    left: 0; top: calc(50% - 1rem); 
    text-align: center; color: #fff; 
    font-weight: 100; font-size: 2rem;
    line-height: 2rem; letter-spacing: 2px;
}
.about-area {
  background-image: url(../images/top/about-img-min.jpg);
  background-size: cover;
  padding-top: 40.5%;
  position: relative;
}
.about-area .inner {
  padding: 0;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  color: #fff; text-align: center;
}
.about-area p{ letter-spacing: 1px; margin-bottom:2rem; line-height:2;}
.about-area .btn{color: #fff;}
.message p{text-align: center; line-height: 3;}
#corporate{width: 100%; margin: 0 auto; background-color: #efece9;}
#corporate dl{width: 60%; max-width: 800px; margin: 0 auto;}
#corporate dt{
    width: 20%;
    line-height: 1.8em;
    padding: 2% 0 0;
}
#corporate dd{
    margin: -1.8em 0 0;
    border-bottom: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 0 0 2% 25%;
    line-height: 1.8em;
}

.top li {width: calc(90% / 2); margin-bottom: 2rem;}
.flex-contents.brand-top{justify-content: flex-start;}
.brand-top li {width: calc(90% / 3); margin:0 10px 2rem;}
.flex-contents.top:nth-child(even){flex-direction:row-reverse;}
.top .brand-text {padding: 0}
.brand-top .brand-text {padding: 0 10%;}
.top img,
.brand-top img {width: 100%;}
.top a:hover img,
.brand-top a:hover img {opacity: .8;}
.top h3,
.brand-top h3 {font-weight: normal; margin-bottom: 2rem; letter-spacing: 2px;}
.top h3 span,
.brand-top h3 span{display: block; margin-top: .5rem; font-size: .6rem;}
.top p,
.brand-top p {margin-bottom: 2rem;}
.top .btn,
.brand-top .btn{ width: 0; margin: 0; padding: 1% 0; }
.top .btn:hover,
.brand-top .btn:hover{
    width: 8rem;
	margin-bottom:2rem; padding: 1% 2%; 
	display: block; text-align: center; 
    border-radius: 4rem; 
}
.brand-contents {background-color: #efece9; margin-top: -25%;}
.brand-contents img{float: right; margin:0 0 5% 10%;}
.brand-contents .inner{padding-top:31%;}
.brand-contents h2{font-size: 2rem;}
.brand-contents h2 > span{ display: block; font-size: .6rem;}
.brand-contents p{margin-bottom: 1rem;}
.brand-contents .flex-contents.brand-designer{justify-content:space-between;}
.brand-contents .brand-designer-txt{width: calc(100% - 360px);}
.brand-contents .brand-designer-img {max-width: 300px; margin-left: 20px;}
.lineup .flex-contents{
    -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    -webkit-box-pack: start;
     -ms-flex-pack: start;
   justify-content: flex-start;
}
.lineup .flex-contents.lineup-item-spec{
	justify-content: space-between;
}
.lineup .flex-contents.lineup-item-spec .lineup-item-spec-box{
	border-top: 1px solid #000; border-bottom: 1px solid #000;
	width: 48%; margin-bottom: 5%; padding: 1.5rem 0;
}
.lineup-item-spec-name {font-weight: bold; margin-bottom: 1rem;}
.lineup-item-spec-txt { margin-bottom: 1rem;}
.lineup .flex-contents.lineup-item-spec-list dt{width: 33%; margin-right: 2%;}
.lineup .flex-contents.lineup-item-spec-list dd{width: 65%;}
.lineup .flex-contents li{width:calc(88%/3);  margin: 0 2% 4%;}
.lineup .flex-contents li img{width: 100%;}
.lineup .flex-contents.brand-other{
    width: 100%; margin: 0 auto; padding-top: 6%;
	flex-wrap: wrap;
    max-width: 1024px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;
	align-items: center; justify-content: center;
}
.lineup .flex-contents.brand-other li{
    width: calc(80% / 5); margin: 0 2% 4%; 
    text-align: center;
}
.lineup .flex-contents.brand-other li img{max-width: 70%;}

.contact-area{ text-align: center;}
.lineup .btn,.contact-area .btn{
    width: 40%; border: 1px solid #333; margin: 2rem auto;
}
.lineup .btn.close{border: none; background-color: #ccc; color: #333; }

footer{
    width: 100%; margin: 0 auto; overflow: hidden;
    background-color: #293a58; color: #fff;
}
footer .flex-contents{
  -webkit-box-align: stretch;
     -ms-flex-align: stretch;
        align-items: stretch;
}
.ft-nav {border-left: 1px solid #fff; padding-left: 1rem;}
.ft-nav a{color: #fff;}
.ft-nav dt{font-size: 1.2rem; margin-bottom: 1rem; line-height: 1;}
.ft-nav dd{margin-bottom: .5rem;}
.ft-nav dd:last-child{margin-bottom: 0;}

.ft-logo img[src*="s-stars-logo-w"] {width: 200px; margin-bottom: 1rem;}
.copyright{text-align: center; font-size: .6rem; margin-bottom: 2rem;}

@media only screen and (min-width: 1990px) {
    .slideBOX {height: 800px;}
}
@media only screen and (min-width: 1024px) {
    .slideBOX {height: 550px;}
}
@media only screen and (max-width: 768px) {
.slideBOX {  height: 350px;}
}

@media only screen and (max-width: 480px) {
    .inner{padding: 6% 0;}
    .flex-contents{display: block;}
	.flex-contents.brand-top,
	.flex-contents.brand-other{display: flex;}
    .logo {max-width:150px;}
    
    .slideBOX {height: 200px;}
	.information-area{margin-top: 20px;}
	.information {font-size: .7rem;}
	.information:before { margin-right: 0;}
    #about .text{font-size: 1.2rem; line-height: 1.2rem;}
    .about-area {
      background-image: url(../images/top/about-img-min.jpg);
      padding-top: 89%;
    }
    .message p{line-height: 1.8;}
    #corporate dl{width: 90%;} 
    
	.top li{width: 100%;}
    .brand-top li{width: calc(100% / 2 - 20px);}
    .brand-contents img{width: 100%; float: none; margin:0 auto 5%; text-align: center;}

	.brand-contents .flex-contents.brand-designer{display: flex !important;}
	.brand-contents .brand-designer-txt{width: calc(100% / 2);}
	.brand-contents .brand-designer-img {width: calc(100% / 2 - 20px); margin-left: 20px;}
	
    .lineup .flex-contents{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .lineup .flex-contents li{width:calc(92%/2);}
    .lineup .flex-contents.brand-other li{width: calc(88% / 3);}
    .lineup .flex-contents.brand-other li img{width: 70%;}
	.lineup .flex-contents.lineup-item-spec{display: block;}
	.lineup .flex-contents.lineup-item-spec .lineup-item-spec-box{width: 100%;}
    .btn,
    .brand-top .btn{width: 80%; margin: 0 auto;}
    .lineup .btn,
    .contact-area .btn{width: 80%;}
    .ft-nav {text-align: center; margin-bottom: 2rem; border: none;}
    .ft-logo{text-align: center; margin-bottom: 2rem;}
        
    .copyright{margin: 1rem auto;}
    
    .sp {display: inherit;}
    .pc {display: none;}
}