@charset "UTF-8";

body {
    font-size: 1.0rem;
    color: #4c4a43;
    line-height: 1.6;
}
html { scroll-behavior: smooth;}
img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: bottom;
}
.sns-insta{
	width:22px;
	height:auto;
}
.sns-x{
	width:32px;
	height:auto;
}
.concept-sns {
    display: flex;
    justify-content: flex-end;
}
.col_white{
	color: #FFF;
	padding-right: 1rem;
}
.col_blue{
	color:#8BCDED;
	padding-right: 1rem;
}
.col_kon{
	color: #022287;
	padding-right: 1rem;
}
.col_brown{
	color: #D48E09;
	padding-right: 1rem;
}
.col_pink{
	color: #ED98D2;
	padding-right: 1rem;
}
.col_black{
	color: #000;
	padding-right: 1rem;
}
.col_red{
	color: #B00A71;
	padding-right: 1rem;
}
.col_purple{
	color:#6F039F;
	padding-right: 1rem;
}
.col_navy{
	color:#331474;
	padding-right: 1rem;
}
.col_green{
	color: #259614;
	padding-right: 1rem;
}
.col_gray{
	color: #464646;
	padding-right: 1rem;
}
.col_gray2{
	color: #979797;
	padding-right: 1rem;
}
.col_last{
	padding-right: 0;	
}

.is-num {
    font-family: futura-pt, sans-serif;
    font-weight: 500;
    font-style: normal;
}
.is-num img{
  width: 140px;
}
.suuji-one img{
	
}
.suuji-two img{
	
}
.suuji-three img{
	
}
.suuji-four img{
	
}
.suuji-five img{
	
}
.suuji-six img{
	
}

.o-header_bg{
	background-color: #F5F3EC;
}
.pc{
	display: inherit;
}
.pc2{
	display: inherit;
}
.sp{
	display: none;
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}
/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}

/* 
<ul>
  <li class="scroll_up"></li>
  <li class="scroll_up timing02"></li>
  <li class="scroll_up timing03"></li>
</ul>
*/

/* スライド */
.img-frame{
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   margin: 0 auto;
}
.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('/assets/lp/mv_pc.jpg');
   animation: slide-animation-01 18s infinite;
}
.img-02{
   background-image: url('https://i.pinimg.com/originals/19/12/a0/1912a03349dd1bb459b18829482ca019.jpg');
	background-image: url('/assets/lp/mv_pc.jpg');
   animation: slide-animation-02 18s infinite;
}
.img-03{
   background-image: url('https://www.pakutaso.com/shared/img/thumb/HIRO95_yuubaenokage.jpg');
	background-image: url('/assets/lp/mv_pc.jpg');
   animation: slide-animation-03 18s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; }
  30% {opacity: 1;}
  40% {opacity: 0; }
  90% {opacity: 0}
100% {opacity: 1; }
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; }
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; }
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0; }
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; }
}
.o-footer,
.o-madeby{
    background-color: #4c4a43	;
}

/* slide */
.mv {
    position: relative;
	padding-top: 50px;
}
.mv .mv-logo {
    width: 12%;
    position: absolute;
    bottom: -10%;
    right: 12%;
    color: #000;
}

/* カルーセル */
.slide-container-h {
    max-width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: 180px auto;
}
.slide-wrapper-h {
    display: flex;
    animation: slide-flow-h 20s infinite linear 1s both;
}
.slide-h {
    width: 300px!important;
    max-width: unset!important;
    object-fit: cover;
    border: 1px solid #ddd;
}
@keyframes slide-flow-h {
     0% {transform: translateX(0);}
 100% {transform: translateX(-100%);}
}

/* concept */
section {
    display: block;
}
.base {
	width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.sec-concept {
    position: relative;
    margin-top: 280px;
    text-align: right;
    background-color: #F5F3EC;
}
.sec-concept .base {
	width: 100%;
    position: relative;
    padding: 0 0 220px 0;
}
.sec-concept .sec-concept1-tit{
	margin-bottom: 4rem;
}
.sec-concept .sec-concept2{
	margin-top: 80px;
}
.sec-concept .img-concept {
    position: absolute;
    top: -110px;
    left: 0;
    z-index: 99;
    width: 497px;
}
.sec-concept h2 img {
    transform: translateY(-50%);
    display: inline-block;
    width: 270px;
    z-index: 999;
}
.sec-concept h2 span {
    margin-top: -40px;
    margin-bottom: 20px;
    position: relative;
    display: block;
    font-weight: 500;
    font-size: 2.4rem;
    letter-spacing: 6px;
    line-height: 1.4;
    z-index: 999;
}
.sec-concept .txt {
    position: relative;
    line-height: 2;
    z-index: 999;
    letter-spacing: 2px;
    width: 100%;
	text-align: left;
    padding-left: 46%;
}
.sec-concept .concept-bg {
    width: 490px;
    position: absolute;
    bottom: -66px;
    right: -128px;
}

/* デザイン */
.sec-design {
    margin-top: 160px;
    padding-bottom: 40px;
    background-color: #f5f3eb;
}
.sec-design .bg-wrapper {
    padding-bottom: 60px;
    text-align: center;
	/*
    background: url(/assets/lp/bg_design.png) no-repeat center/cover;
	*/
}
.sec-design .base h2 {
    transform: translateY(-45%);
}
.sec-design .base{
	text-align: center;
}
.sec-design .base h2 img {
    width: 240px;
    display: block;
    margin: 0 auto;
}
.sec-design .base .ttl {
    font-size: 2.8rem;
    letter-spacing: 3px;
	margin-bottom: 4rem;
}
.sec-design .base .fan {
    display: inline-block;
    border: 1px solid #f25566;
    color: #f25566;
    font-weight: bold;
    padding: 6px 20px;
    margin: 14px 0;
}
.sec-design .base .txt {
    color: #6a6968;
    letter-spacing: 3px;
	text-align: left;
}

.sec-design .products-wrapper #slider .slide-item {
    background-color: #fff;
}
.sec-design .slider .slick-slide {
    padding: 0 10px;
}
.sec-design .products-wrapper .opacity {
    position: absolute;
    width: 20vw;
    height: 100%;
    background-color: #fff;
    opacity: 0.5;
    z-index: 5000;
    filter: blur(20px);
}
.sec-design .products-wrapper .opacity__left {
    top: 0;
    left: 0;
}
.sec-design .products-wrapper .opacity__right {
    top: 0;
    right: 0;
}
.sec-design .slick-slide img {
 	width: 100%;
}
.sec-design .slick-prev {
    left: -2.2%;
    z-index: 6000;
    background: url("/assets/lp/slide_pre.png") no-repeat center/contain;
}
.sec-design .slick-next {
    right: -2.2%;
    z-index: 6000;
    background: url("/assets/lp/slide_next.png") no-repeat center/contain;
}
.sec-design .slick-prev, .slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    height: 30px;
    width: 16px;
    transition: 0.3s;
}
.sec-design .slider img {
  width: 100%;
  height: auto;
  display: block;
}
.slick-dots {
    text-align: center;
    margin: 20px 0 0 0;
}	
.slick-dots button {
    color: transparent;
    outline: none;
    width: 12px;
    height: 12px;
    display: block;
    background: none;
    border: 1px solid #534741;
    padding: 0;
}
.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

/* item */
.sec-item {
    margin-top: 160px;
    padding-bottom: 40px;
	background: #F5F3EC;
}
.sec-design .base,
.sec-item .base {
    padding-bottom: 60px;
    text-align: center;
	/*
    background: url(/assets/lp/bg_design.png) no-repeat center/cover;
	*/	
}
.sec-item .base h2 {
    transform: translateY(-45%);
}
.sec-item .base h2 img {
    width: 240px;
    display: block;
    margin: 0 auto;
}
.sec-item .base .ttl {
    font-size: 2.8rem;
    letter-spacing: 3px;
	margin-bottom: 4rem;
}
.sec-item .base .txt {
    color: #6a6968;
    letter-spacing: 3px;
	text-align: left;
}
/* interview */
.sec-interview {
    margin-top: 200px;
    background: #F5F3EC;
    padding-bottom: 120px;
}
.sec-interview .sec-ttl {
    transform: translateY(-45%);
    text-align: center;
}
.sec-interview .sec-ttl img {
    display: block;
    margin: 0 auto;
    width: 240px;
}

/* bottom */
.sec-bottom{
    background: #F5F3EC;
    padding-bottom: 80px;
}

.message-1 {
    border-top: 1px solid #4c4a43;
	border-left: 1px solid #4c4a43;
    padding: 4rem;
	padding-bottom: 0;
    line-height: 2;
	margin-bottom: 3rem;
	background: #F5F3EC;
	margin-left: 3rem;
	margin-right: 3rem;
}

.message-2 {
    border-right: 1px solid #4c4a43;
	border-bottom: 1px solid #4c4a43;
    padding: 4rem;
    line-height: 2;
	background: #F5F3EC;
	margin-left: 3rem;
	margin-right: 3rem;
}
.message-1 .ttl,
.message-2 .ttl{
	width: 100%;
	text-align: center;
	margin-top: 3rem;
}
.message-1{
	background: url("/assets/lp/bg_message.png") no-repeat right center /contain;
}
.message-1 .txt{
	width: 80%;
}
.message-2{
	background: url("/assets/lp/bg_message2.png") no-repeat right center /contain;
}
.message-2 .txt{
	width: 80%;
}
@media screen and (max-width: 767px){

}

@media all and (min-width:992px){  /*メニューが切り替わるサイズ 992px 以上 */
	.sp {
		display: none !important;
	}
	.o-footer-links_link {
	    font-size: 1rem;
	}

}

@media all and (min-width:1200px){

}

@media screen and (max-width:1900px) { 

}

@media screen and (max-width:1720px) { 

}

@media screen and (max-width:1440px) { 

}

@media screen and (max-width:1200px) { 

}

@media screen and (max-width:1080px) { 

}

@media screen and (max-width:991px) {  /*メニューが切り替わるサイズ スマホサイズになった時 */
	.wrapper p{
		font-size: 1.2rem;
	}
	.mv {
		padding-top: 0;
	}
	.base {
		padding: 0;
	}
	.o-header {
    	height: 6.4vh;
		background: #F5F3EC;
	}
	.sec-concept .img-concept {
		width: 220px;
		left: 50%;
		transform: translateX(-50%);
	}
	.sec-concept .base {
		padding: 0 4rem 340px 4rem;
	}
	.sec-concept h2 img {
		z-index: 999;
		top: 136px;
		position: absolute;
		left: 20%;
		transform: translateX(-50%);
		width: 186px;
	}
	.sec-concept h2 span {
		text-align: center;
		font-size: 2.2rem;
		letter-spacing: 2px;
		top: 220px;
		margin-bottom: 3rem;
	}
	.sec-concept .txt {
		top: 210px;
		position: relative;
		line-height: 2;
		padding-left: 0;
	}
	.sec-concept .concept-bg {
		width: 280px;
		right: -12px;
		bottom: -80px;
		overflow: hidden;
	}
	/* Design */
	.sec-design .base{
		padding-left: 4rem;
		padding-right: 4rem;
	}
	.sec-design .slick-next{
		right:-4%;
	}
	.sec-design .slick-prev{
		left:-4%;
	}
	.sec-design .base h2 img {
    	width: 186px;
	}
	.sec-item .base h2 span,
	.sec-interview .base h2 span,
	.sec-design .base h2 span {
		font-size: 1rem;
		letter-spacing: 3px;
	}
	.sec-design .base .ttl {
		font-size: 2.2rem;
		margin-bottom: 2rem;
		line-height: 1.8;
	}
	.sec-design .base .fan {
		font-size: 2rem;
	}
	.sec-design .base .txt {
		line-height: 2;
		text-align: left;
	}
	.mv .mv-logo {
		width: 24%;
		position: absolute;
		bottom: -14%;
		right: 12%;
		color: #000;
	}
	.is-num img {
		width: 90px;
	}

	.message-1,
	.message-2{
		margin-right: 4rem;
		margin-left: 4rem;
	}
	.sec-interview{
		padding-bottom: 80px;
	}

	.sec-item .base .ttl {
		font-size: 2.2rem;
		margin-bottom: 2rem;
		line-height: 1.8;
	}
	.sec-item .base{
		padding-left: 4rem;
		padding-right: 4rem;
	}
	.sec-item .base .txt {
		line-height: 2;
		text-align: left;
	}
	.pc{
		display: none;
	}
	.sp{
		display: inherit;
	}
	.message-1 .txt{
		width: 100%;
	}
	.message-2 .txt{
		width: 100%;
	}
}

@media screen and (max-width:768px) {

}

@media screen and (max-width:580px) {
	.pc2{
		display: none;
	}
	.sec-design .slick-next{
		right:-8%;
	}
	.sec-design .slick-prev{
		left:-8%;
	}
}

@media screen and (max-width:480px) { 

}