@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100..900&display=swap');

	html{
		/* background-color: #f6f1e9; */
		/* font-weight 400,500,700 */
		font-family: "IBM Plex Sans JP", sans-serif;
		font-weight: 400;
		font-style: normal;
			
	}

	body{
		margin: 0;
		background-color: rgb(230, 226, 231);
        height: 100vh;
		animation: fadein 2.5s forwards;
	}
@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
	}

	h1{
		/* (最小19.2px、最大26px) */
		font-size: clamp(1.2rem, 0.9rem + 0.85vw, 1.625rem); 
	}

	h2{
		/* (最小18px、最大24px) */
		font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);
	}

	h3{
		/* (最小16px、最大22px) */
		font-size: clamp(1rem, 0.8rem + 0.6vw, 1.375rem);
	}

	h4{
		/* (最小14px、最大18px) */
		font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1.125rem);
	}
    
	p{  
		/* (最小14px、最大16px) */
		font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1rem); 
	}
	/* br{
		display: none;
	} */

/* ==================================================== */

/* 3840px (150%表示) */
/* 2560px x 1440px (100%表示) */

@media screen and (min-width: 2560px) and (max-width: 3839px){
	body {
	  font-size: 18px !important; /* 1rem = 18px */
	}
  
	h1 {
	  font-size: 2.5rem !important; /* 45px */
	}
  
	h2 {
	  font-size: 1.8rem !important; /* 32.4px */
	}
  
	h3 {
	  font-size: 1.4rem !important; /* 25.2px */
	}
  
	p {
	  font-size: 1.125rem !important; /* 20.25px */
	}

	.text_03{
		font-size: 24px !important;
	}
    
    }  

@media screen and (max-width: 1537px){
	br{
		display: none;
	}
}

@media screen and (max-width: 1377px){
	h3{
		font-size: 18px !important;
	}
}

@media screen and (max-width: 1281px){
	h2{
		padding-bottom: 0 !important;
	}
	br{
		display: none;
	}
}

@media screen and (max-width: 1023px){
	h1{
		font-size: 24px !important;
	}
	
	h2{
		font-size: 20px;
		/* padding-bottom: 20px !important; */
	}
	
	h3{
		font-size: 18px !important;
	}
	
	h4{
		font-size: 18px;
	}
	
	p{
		font-size: 16px;
	}
	br{
		display: none;
	}
			   
	}

@media screen and (orientation: landscape) and (max-width: 933px){
	h1{
		font-size: 20px !important;
	}
	
	h3{
		font-size: 16px !important;
	}
	p{
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
}

@media screen and (max-width: 480px){
	h1{
		font-size: 20px !important;
	}
	
	h3{
		font-size: 16px !important;
	}
	p{
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
	}
	
/* ==================================================== */	

	.ibm{
		/* font-weight 100～900 */
		font-family: "Urbanist", sans-serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal; 
		color: rgb(68, 31, 94); 
	}

	a { 
		text-decoration:none;
		display: inline-block;
		position: relative;
	}

	.Plex{
		font-family: "Urbanist", sans-serif;
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal; 
		color: rgb(68, 31, 94); 

	}

/* ==================================================== */	

	.container{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	.flex{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: start;
	}

/* ==================================================== */	

	header{
		width: 100%;
		padding: 20px 40px 20px 40px; 
		position: fixed;
		top: 0;
		background-color: rgba(229, 229, 234, 0.3);
		backdrop-filter: blur(3px);
		z-index: 10;
		border-bottom: 1.3px  solid rgb(146, 146, 154); 
		transition: transform 0.4s 0.4s;
	}

	header.hidden {
		transform: translateY(-80px);
	}

	.logo{
		font-family: "IBM Plex Sans JP", sans-serif;
		font-size: 20px;
		font-weight: 600;
	}
	.logo span{
		color: rgb(68 31 94); 
	}

	.menu{
		padding: 5px 100px 0 0;
	}

	.menu li{
		margin-left: 40px;
		list-style: none;
	}

	.menu li a{
		transition: .5s;
		color: rgb(68 31 94);
	}

	.active a{
	    color: rgb(233 83 30) !important;
	}

	.menu li a::after {
		background-color: rgb(68, 31, 94); /* 下線の色 */
		bottom: -4px; /* 要素の下端からの距離 */
		content: ""; /* 要素に内容を追加 */
		height: 1px; /* 下線の高さ */
		left: 0; /* 要素の左端からの距離 */
		position: absolute; /* 絶対位置指定 */
		transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
		transform-origin: center top; /* 変形の原点を中央上に指定 */
		transition: transform .3s; /* 変形をアニメーション化 */
		width: 100%; /* 要素の幅 */
	}
	/* リンクにホバーした際の下線の表示 */
	.menu li a:hover::after {
	    transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
	}

@media screen and (max-width: 1023px){
	.logo{
		font-size: 18px;
	}
}

/* ==================================================== */	

@media screen and (orientation: landscape) and (max-width: 933px){
    .logo{
		display: none;
	}
	.scrollify{
		height: auto !important;
	}
}

@media screen and (max-width: 480px){
    .logo{
		display: none;
	}

	.scrollify{
		height: auto !important;
	}
}

/* ==================================================== */	

.scrollify{
	height: 100vh;
}

/* ==================================================== */	
	
	#sec1{
		background-image: url(../img/background/home.webp);
		background-position: center;
		background-size: cover;
		height: 100vh;
		display: flex;
		align-items: center;
		animation: fadein 2s ease forwards;
	}

	.sec1_inner{
		width: 100%;
		text-align: center;
	}

	.sec1_inner h1{
		letter-spacing: 0;
		font-weight: 600;
		font-size: 36px;
		text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
		margin-bottom: 20px;
	}

	.top{
		color: rgb(68 31 94);
		font-size: 22px;
		font-weight: 500;
		text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;

	}

@media screen and (max-width: 1281px){
	.logo{
		font-size: 18px;
	}
	.sec1_inner{
		width: 80%;
		margin: 0 auto;      
	}
    .sec1_inner h1{
		font-size: 24px;
	}
	}

@media screen and (max-width: 1023px){
	.sec1_inner{
		width: 85%;
		margin: 0 auto; 
	}

	}
@media (orientation: portrait) and (max-width: 768px){
	.sec1_inner{
		width: 90%;
	}
}

@media screen and (max-width: 480px){
	.top{
		font-size: 16px !important;
	}
				
	}

/* ==================================================== */	
	.flex_concept{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: start;
		margin-top: 30px;
	}

	#concept{
		width:70%;
		height: 100vh;
		margin: 0 auto;
		padding-top: 90px;
	}

	.concept_img{
		background-image: url(../img/index/back_1.webp);
		background-position: center;
		background-size: cover;
		max-width: 100%;
		height: 40vh;
		border-radius: 10px;
	}

	.eximg{
		background-image: url(../img/index/back_2.webp);
		background-position: center;
		background-size: cover;
		height: 25vh;
		width: 100%;
		margin-top: 100px;
		border-radius: 10px;
	}

	.title{
		font-size: 20px;
		font-weight: 500;
		margin-bottom: 50px;
	}

	.column_2{
		width: 48%;
	}

	.text_p{
		padding-top: 20px;
		line-height: 1.7;
	}

	.concept_h3{
		font-weight: 500;
		color: rgb(63, 39, 79);
		letter-spacing: -0.03em;
	}

/* ==================================================== */

@media screen and (min-width: 2560px) and (max-width: 3839px){
	.text_p{
		padding-top: 50px !important;
	}
}

@media screen and (max-width: 1921px){
	.text_p{
		padding-top: 20px;
		line-height: 1.5;
	}
}

@media screen and (max-width: 1537px){
	#concept{
		width: 80%;
	}

	.flex_concept{
		margin-top: 20px;
	}
    
	.concept_img{
		height: 65vh;
	}

	.eximg{
		display: none;
	}
    .text_p{
		line-height: 1.65;
	}

    }

@media screen and (max-width: 1367px){
	#concept{
		width: 80%;
	}
	.flex_concept{
		margin-top: 20px;
	}
    .concept_img{
		height: 65vh;
	}

	.eximg{
		display: none;
	}
    .text_p{
		line-height: 1.5;
		padding-top: 10px;
	}

	}

/* ipad pro==================================================== */
@media (max-width: 1367px) and (hover: none) {
	.flex_concept{
		margin-top: 20px;
	}

    .concept_img{
		height: 45vh;
	}
    
	.eximg{
		display: block;
		margin-top: 40px;
	}

	.text_p{
		line-height: 1.7;
	}
	}

/* end==================================================== */

@media screen and (max-width: 1281px){
	#concept{
		width: 80%;
		height: 100vh;
	}
	.flex_concept{
		margin-top: 20px;
	}

	.column_2{
		width: 48%;
		padding-bottom: 30px;
	}

	.concept_img{
		height: 75vh;
	}

	.eximg{
		display: none;
	}

	.text_p{
		padding-top: 10px;
		line-height: 1.6;
	}

	}

@media screen and (max-width: 769px){
	.flex_concept{
		margin-top: 0;
	}

	}

/* ==================================================== */

@media (orientation: portrait) and (max-width: 1024px){
	.flex_concept{
		margin-top: 20px;
	}

	.column_2{
		width: 100%;
		height: 30vh;
		padding-bottom: 30px;
	}

	.concept_img{
		height: 35vh;
	}

	.text_p{
		padding-top: 10px;
		line-height: 1.7;
	}

	.concept_h3{
		font-weight: 500;
		padding-bottom: 10px;	
	}

	.eximg{
		display: block;
		height: 15vh;
		margin-top: 65px;
	}
	
}

/* nest hub==================================================== */
@media (max-width: 1025px) and (max-height: 601px) and (max-aspect-ratio: 1.71/1) {
	.logo{
		display: none;
	}
	.sec1_inner{
		width: 85%;
	}
	.text_p{
		font-size: 14px;
	}
    #concept{
		width: 90%;
		padding-top: 30px;
	}

	#exterior{
		width: 90% !important;
		padding-top: 30px !important;
	}

	#interior{
		width: 90% !important;
		padding-top: 30px !important;
	}

	#work{
		width: 90% !important;
		padding-top: 30px !important;
	}

	footer{
		height: 60vh !important;
	}
}

/* ==================================================== */
@media screen and (max-width: 1023px){
	.column_2{
		width: 100%;
		padding-bottom: 30px;
		height: auto;
	}

	.concept_img{
		height: 35vh;
	}

    .text_p{
		line-height: 1.7;
	}

	.eximg{
		display: none;
	}

	}

@media screen and (orientation: landscape) and (max-width: 933px){
	#concept{
		padding-top: 20px;
		height: 80% !important;
	}
	
    .concept_img{
		display: none;
	}
    h2{
		padding-bottom: 0 !important;
	}
}

@media screen and (max-width: 480px){
	#concept{
		padding-top: 20px;
		height: 85% !important;
	}
	.concept_img{
		display: none;
	}
    h2{
		padding-bottom: 0 !important;
	}
    }
/* ==================================================== */	
	.flex_exterior{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: start;
		position: relative;
		margin-top: 30px;
	}

	#exterior{
		width: 70%;
		height: 100vh;
		margin: 0 auto;
		padding-top: 90px;
	}

	.exterior_img{
		background-image: url(../img/index/back_ex.webp);
		background-position: center;
		background-size: cover;
		max-width: 100%;
		height: 40vh;
		border-radius: 10px;
		margin-bottom: 100px;
	}

	.exterior_inner{
		margin-bottom: 40px;
	}

	.column_40{
		width: 40%;
	}

	.column_55{
		width: 55%;
	}

	.exin_h3{
		font-weight: 500;
		color: rgb(63, 39, 79);
		margin: 0;
		letter-spacing: -0.03em;
	}

/* 1920×1080==================================================== */	
	@media screen and (max-width: 1921px){
		
		.eximg{
			margin-top: 120px;
		}
		.column_40{
			width: 38%;
		}
	
		.column_55{
			width: 60%;
		}

	}

@media screen and (max-width: 1537px){
	#exterior{
		width: 80%;
	}
    .flex_exterior{
		margin-top: 20px;
	}
	.exterior_img{
		height: 55vh;
	}

	.exin_h3{
		margin-bottom: 0;
	}

    }
@media screen and (max-width: 1367px){
	#exterior{
		width: 80%;
	}
    
	.flex_exterior{
		margin-top: 20px;
	}

	.exterior_img{
		height: 50vh;
	}
	.exin_h3{
		margin-bottom: 0;
	}

}

@media screen and (max-width: 1281px){
	#exterior{
		height: 100vh;
		width: 80%;
	}
	.column_40{
		width: 40%;
	}

	.column_55{
		width: 55%;
	}

	.exterior_img{
		height: 67vh;
	}
	
	.exin_h3{
		margin: 0 0 0 0;
	}
	.flex_exterior{
		margin-top: 20px;
	}
	}	

/* ==================================================== */	

@media (orientation: portrait) and (max-width: 1024px){
	.column_40{
		width: 100%;
	}

	.column_55{
		width: 100%;
	}

	.exterior_img{
		height: 40vh;
	}
	
	.exin_h3{
		margin: 30px 0 0 0;
	}
	.flex_exterior{
		margin-top: 20px;
	}
}
/* ==================================================== */	

@media screen and (max-width: 1023px){
	.column_40{
		width: 100%;
	}

	.column_55{
		width: 100%;
	}

	.exterior_img{
		height: 35vh;
	}
    
	.exin_h3{
		margin: 20px 0 0 0;
	}
    
	.flex_exterior{
		margin-top: 20px;
	}

    }	

@media screen and (orientation: landscape) and (max-width: 933px){
	#exterior{
		padding-top: 20px;
		height: 70%;
	}

	.exterior_img{
		height: 80vh;
	}
}
@media screen and (max-width: 480px){
	#exterior{
		padding-top: 0;
		height: 70%;
	}
	
	.exterior_img{
		height: 25vh;
	}
	
	}
/* ==================================================== */	

	#interior{
		width: 70%;
		height: 100vh;
		margin: 0 auto;
		padding-top: 90px;
	}

	.interior_img{
		background-image: url(../img/index/back_in.webp);
		background-position: center;
		background-size: cover;
		max-width: 100%;
		height: 40vh;
		border-radius: 10px;
		margin-bottom: 100px;
	}

@media screen and (max-width: 1537px){
	#interior{
		width: 80%;
	}
	.interior_img{
		height: 55vh;
	}
	}

@media screen and (max-width: 1377px){
	#interior{
		width: 80%;
	}
	.interior_img{
		height: 55vh;
	}
	}

/* ipad pro==================================================== */
@media (max-width: 1367px) and (hover: none) {
	.interior_img{
		height: 50vh;
	}
	}

/* end==================================================== */

@media screen and (max-width: 1281px){
	#interior{
		width: 80%;
		height: 100vh;
	}
	.interior_img{
		height: 75vh;
	}
    }

/* ==================================================== */	

@media (orientation: portrait) and (max-width: 1024px){
	.interior_img{
		height: 35vh;
	}
    }

/* ==================================================== */	

@media screen and (max-width: 1023px){
	.interior_img{
		height: 35vh;
	}
    }
@media screen and (orientation: landscape) and (max-width: 933px){
	#interior{
		padding-top: 20px;
		height: 100%;
	}

	.interior_img{
		height: 80vh;
	}
}
@media screen and (max-width: 480px){
	#interior{
		padding-top: 30px;
		height: 100%;
	}
	
	.interior_img{
		height: 25vh;
	}
	
	}
/* ==================================================== */	

	#work{
		width: 70%;
		height: 100vh;
		margin: 0 auto;
		padding-top: 90px;
	}
    
	.flex_work{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: start;
		position: relative;
		margin-top: 30px;
	}

	.work_img{
		background-image: url(../img/index/wo.webp);
		background-position: center;
		background-size: cover;
		max-width: 100%;
		height: 35vh;
		border-radius: 10px;
		margin-bottom: 100px;
	}

	.wopri_h3{
		font-weight: 500;
		color: rgb(63, 39, 79);
		margin: 0;
		letter-spacing: -0.03em;
	}
@media screen and (max-width: 1921px){
	.work_img{
		height: 32vh;
	}

	.flex_work{
		margin-top: 20px;
	}
}

@media screen and (max-width: 1537px){
	#work{
		width: 80%;
	}

	.flex_work{
		margin-top: 20px;
	}
}
@media screen and (max-width: 1377px){
	#work{
		width: 80%;
	}
	.wopri_h3{
		margin: 0;
	}

	.flex_work{
		margin-top: 20px;
	}
}

@media screen and (max-width: 1281px){
	#work{
		width: 80%;
	}
	.work_img{
		height: 30vh;
	}
	.wopri_h3{
		margin: 0;
	}

	.flex_work{
		margin-top: 20px;
	}
}

/* ==================================================== */	

@media (orientation: portrait) and (max-width: 1024px){
    .wopri_h3{
		margin-bottom: 20px;
	}

}

/* ==================================================== */	

@media screen and (max-width: 1023px){
	#work{
		width: 80%;
	}
	.wopri_h3{
		margin: 0;
	}
}

@media screen and (orientation: landscape) and (max-width: 933px){
	#work{
		padding: 30px 0 30px 0;
		height: 70%;
	}

	.work_img{
		height: 40vh;
	}
	.price_img{
		height: 40vh !important;
	}
}
@media screen and (max-width: 480px){
	#work{
		padding: 30px 0 30px 0;
		height: 70%;
	}
    .work_img{
		display: none;
	}
	.price_img{
		display: none;
	}
	.column_L{
		width: 100% !important;
	}

	.column_R{
		width: 100% !important;
	}
}
/* ==================================================== */	
	#price{
		margin-top: 60px;
	}
	.price_img{
		background-image: url(../img/index/pr.webp);
		background-position: center;
		background-size: cover;
		width: 100%;
		height: 35vh;
		border-radius: 10px;
		margin-bottom: 100px;
	}
		
	.column_L{
		width: 40%;
	}

	.column_R{
		width: 40%;
	}

	a { text-decoration:none; }

@media screen and (max-width: 1921px){
    .price_img{
		height: 32vh;
	}
    .column_L{
		width: 43%;
	}

	.column_R{
		width: 43%;
	}

    }

@media screen and (max-width: 1537px){
	#price{
		margin-top: 20px;
	}
	
}

@media screen and (max-width: 1281px){
	#price{
		margin-top: 20px;
	}
	.price_img{
		height: 33vh;
	}
	
}

/* ==================================================== */	

@media (orientation: portrait) and (max-width: 1024px){
    #price{
		margin-top: 100px;
	}

}

/* ==================================================== */	

@media screen and (max-width: 1023px){
	#price{
		margin-top: 40px;
	}
	
}

/* ==================================================== */	

	footer{
		text-align: center;
		height: 30vh;
		border-top: 2px  solid rgb(146, 146, 154);
		background-color: rgb(224, 218, 226);
		position: relative;
	}

	.logo_n{
		font-size: 22px;
		font-weight: 600;
		text-align: center;
		margin: 20px 0 30px 0;
	}

	.flex_f{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: center;
	}

@media screen and (max-width: 1921px){
	footer{
		height: 38vh;
	}
}

@media screen and (max-width: 1537px){
	footer{
		height: 60vh;
	}
}

/* ipad pro==================================================== */
@media (max-width: 1367px) and (hover: none) {
	footer{
		height : 48vh;
	}
	}

/* end==================================================== */

@media screen and (max-width: 1281px){
	footer{
		height: 45vh;
	}
	.logo_n{
		font-size: 18px;
	}
	.menu li{
		display: none;
	}
}

/* ==================================================== */	

@media (orientation: portrait) and (max-width: 1024px){
    footer{
		height: 30vh;
	}

}

/* ==================================================== */	

@media screen and (max-width: 1023px){
	footer{
		height: 37vh;
	}
	
}

/* ==================================================== */	

	.footer-right{
		width: 26%;
		position: absolute;
		top: 20px;
		right: 100px;
		border: 1px solid rgb(146, 146, 154);
		padding: 10px;
	}
	footer h3{
		font-family: "Urbanist", sans-serif;
		color: rgb(63, 39, 79);
	}

	footer h4{
		font-family: "IBM Plex Sans JP", sans-serif;
		padding-top: 10px;
		color: rgb(63, 39, 79);
	}

	.profile{
		padding-top: 10px;
		text-align: left;

	}

@media screen and (min-width: 2560px) and (max-width: 3839px){
	.footer-right{
		width: 25% !important;
		top: 30px !important;
		right: 50px !important;	
	}
}

@media screen and (max-width: 1921px){
	.footer-right{
		width: 29%;
		top: 30px;
		right: 50px;
	}
}

@media screen and (max-width: 1537px){
	.footer-right{
		width: 100vh;
		top: 200px;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
}

@media screen and (max-width: 1281px){
	.footer-right{
		width: 80%;
		top: 80px;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
}

@media screen and (orientation: landscape) and (max-width: 933px){
	footer{
		height: 80vh;
	}
}

@media screen and (orientation: landscape) and (max-width: 883px){
	footer{
		height: 95vh;
	}
}

@media screen and (orientation: landscape) and (max-width: 855px){
	footer{
		height: 92vh;
	}
}

@media screen and (orientation: landscape) and (max-width: 569px){
	footer{
		height: 115vh;
	}
}

@media screen and (max-width: 480px){
	footer{
		height: 40vh;
	}

	.footer-right{
		width: 90%;
		top: 55px;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	.logo_n{
		font-size: 15px;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 391px){
	footer{
		height: 46vh;
	}
}

@media screen and (max-width: 376px){
	footer{
		height: 55vh;
	}
}
@media (max-width: 376px) and (min-height: 812px){
	footer{
		height: 45vh;
	}
}

@media screen and (max-width: 361px){
	footer{
		height: 48vh;
	}
}

@media screen and (max-width: 321px){
	footer{
		height: 70vh !important;
	}
}
/* ==================================================== */	

	#fimg{
		background: url(../img/rsc.png);
		background-position: center center;
		width: 100%;
		height: auto;
		position: absolute;
		padding-bottom: 80px;
		bottom: 40px;
		opacity: 0.7;
	}

	.copyright{
		font-size: 15px;
		color: rgb(63, 39, 79);
		position: absolute;
		bottom: 10px;
		right: 0;
		left: 0;
	}

@media screen and (max-width: 1023px){
	#fimg{
		bottom: 40px;
	}

}
/* ==================================================== */	

	.button a {
		position: absolute;
		display: flex;
		justify-content: space-around;
		align-items: center;
		bottom: 0;
		max-width: 240px;
		padding: 10px 25px;
		color: #434343;
		transition: 0.3s ease-in-out;
		font-weight: 600;
		background: rgb(230, 226, 231);
		filter: drop-shadow(0px 2px 4px #ccc);
		border-radius: 3px;
		border-radius: 50px;
	}
	.button a:after {
		content: '';
		width: 5px;
		height: 5px;
		border-top: 3px solid #434343;
		border-right: 3px solid #434343;
		transform: rotate(45deg) translateY(-50%);
		position: absolute;
		top: 50%;
		right: 10px;
		border-radius: 1px;
		transition: 0.3s ease-in-out;
	}
	.button a:hover {
		transform: translateY(-2px);
		box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
	}

@media screen and (max-width: 1377px){
	.button a{
		max-width: 120px;
		padding: 7px 25px;
		font-size: 12px;
	}

	}

@media screen and (max-width: 1281px){
	.button{
		padding-top: 40px;
	}

	.button a{
		max-width: 120px;
		padding: 7px 25px;
		font-size: 12px;
	}

    }
/* ==================================================== */	

@media (orientation: portrait) and (max-width: 1024px){
	.button{
		padding-top: 60px;
	}

    }

/* ==================================================== */	

@media screen and (max-width: 1023px){
	.button{
		padding-top: 60px;
	}
    
	.button a{
		max-width: 120px;
		padding: 7px 25px;
		font-size: 12px;
	}

	}	
@media screen and (orientation: landscape) and (max-width: 933px){
	.button a{
		max-width: 120px;
		padding: 5px 23px;
		font-size: 12px;
	}
}
@media screen and (max-width: 480px){
	.button a{
		max-width: 120px;
		padding: 5px 23px;
		font-size: 12px;
	}

	}	
/* ==================================================== */	

.wrap {
  overflow: hidden;
  position: relative;
  opacity: 0;
  margin: 0;
}
.wrap.active {
  opacity: 1;
}
.wrap.active::before {
  animation: displayImg .8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #E5E5EA;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes displayImg {
  100% {
    transform: translateX(100%);
  }
}

/* concept bottom img==================================================== */	

.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap::before,
.img-wrap::after {
	animation: 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #E5E5EA;
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.img-wrap::before {
  animation-name: img-wrap-before;
  inset: 0 0 50%;
}

.img-wrap::after {
  animation-name: img-wrap-after;
  inset: 50% 0 0;
}

@keyframes img-wrap-before {
  100% {
    transform: translateX(100%);
  }
}

@keyframes img-wrap-after {
  100% {
    transform: translateX(-100%);
  }
}