@charset "UTF-8";



.link_none{
	pointer-events: none;
}


.header_logo{
	width:250px;
	position: fixed;
	top:0px;
	left:0;
	z-index: 100;
}


@media (max-width: 767px) {
	
.header_logo{
	width:100%;
	position: fixed;
	top:0px;
	left:0;
	z-index: 100;
}	
	
}




.bt_next{
	position: absolute;
	width:50px;
	right:3%;
	z-index: 100;
	cursor: pointer;
}


.bt_prev{
	position: absolute;
	width:50px;
	left:3%;
	z-index: 100;
	cursor: pointer;
}


@media (max-width: 767px) {
	
	.bt_next{

	width:40px;
	right:2%;
		bottom:8%;
}


.bt_prev{

	width:40px;
	left:2%;
	bottom:8%;
}
	
	
}






.mainScreen{
	width:100%;
	height: 100vh;
	
	display: flex;
		align-items: center; 


	/*flex-wrap: nowrap;*/
	
	/* flex-direction: column;*/
}




  
  .left_image {
	position: relative;
	flex: 1;
	width: 100%;
	height: 100vh;
	
	 
	  
	  	display: flex;
		align-items: center; 

  }

.left_image_item{
	position: relative;
	max-width:1200px;
	width:80%;
/*	background-color: #6D1F20;*/
	 margin: auto; /* 追記 */
	opacity: 0;
}




.layer_base{
	position: relative;
		line-height: 0;
/*	opacity: 0.5;*/
}

.layer_img,
.layer_img2,
.layer_img3,
.layer_img4{
	position: absolute;
	width:100%;
	top:0;
	left:0;
	line-height: 0;
	
}






/*gp*/




.layer_unit{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	 opacity: 0;
}

.layer_spitton{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	 opacity: 0;
}

.layer_accent{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	opacity: 0;
}

.layer_step{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	opacity: 0;
}


/*gp end*/



.left_setting_area{
	position: absolute;
	left: 0;
	bottom:30px;
	padding:10px 0px 10px 20px;
	background-color: hsla(0,0%,100%,0.7);	
	font-size:clamp(0.6rem, 0.527rem + 0.36vw, 0.8rem);


	
	   display: flex;
    justify-content: flex-start;
    align-items: center;
	
	z-index:100;
     transition: all 0.5s ease-in;
}


.disptext{
	position: relative;
	 display: flex;
     align-items: center;
margin-right:20px;
		
}

.disptext img{
	height:20px;
	width:auto;
	margin-right: 5px;
}


.disptext_unit,
.disptext_seat,
.disptext_spitton,{
    padding-left: 5px; /* 画像とテキストの間の余白を調整 */
	flex: none; 
}


@media (max-width: 767px) {
	
	
	
	.left_image_item{
	width:100%;

}

	

	
	
	.left_setting_area{
	position: relative;
	width:100%;
	left: 0;
	bottom: 0px;
	padding: 4px 5px;
		
		  flex-wrap: wrap;
}
	
	.disptext{


margin:3px 5px;	
/* margin-right:10px;  */     
}
	
	.disptext img{
	height:15px;
	width:auto;
	margin-right:5px;
}

	
}


/*______________________right_menu*/
  
  .right_menu {
    max-width: 500px; 
	 width: 30%; 
	  	height: 100%;
    background-color: #fff; 
	  overflow-y: scroll;
	  overflow-x: hidden!important;
	 padding: 40px 20px;
  }


.header_title{
	font-family: var(--english-font-family);
	font-weight: var( --font-weight-normal);
	font-size: 2.3rem;
	margin-bottom: 4rem;
}

.menu_title{
	font-family: var(--english-font-family);
	font-weight: var( --font-weight-normal);
	font-size:clamp(1.2rem, 1.091rem + 0.55vw, 1.5rem);
/*font-weight: var(--font-weight-bold);*/
}

.menu_title._border{
	padding-top: 2rem;
	border-top: 1px solid hsla(0,0%,80%,1.00);
}


.menu_title2{
	margin-left: 1rem;
	font-size:clamp(0.8rem, 0.764rem + 0.18vw, 0.9rem);
	color: #505050;
}




@media (max-width: 767px) {
	
	
	.menu_title._border{
	padding-top: 1rem;
	
}
	
	
	  
  .right_menu {
    width: 100%; 
	   max-width: 100%; 
	  	height: 100%;
  
	  overflow-y: scroll;
	  
	 padding: 20px 15px 150px;
  }
	
.menu_title{
	
	/*font-size: 1.5rem;*/
	margin-bottom: 1rem;
}	
	
}






/*______________________color*/


.menu_wrapper{
	display: flex;
	 justify-content: space-between;
}


.menu_inner{
	width:49%;
}

.menu_bt,
.menu_bt2,
.menu_bt3,
.menu_bt4{
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
/*	background-color: hsla(235,100%,87%,0.30);*/
	margin:10px 0;
     transition: all 0.1s ease-in;
}


.menu_bt:hover > .color_text,
.menu_bt2:hover > .color_text,
.menu_bt3:hover > .color_text,
.menu_bt4:hover > .color_text{
		background-color: hsla(0,0%,95%,1.00);
	color:hsla(0,0%,5%,1.00);
  
}


.color_img{
	width:17%;
	min-width: 30px;
	padding-left:1.5%;
	padding-right:1.5%;
	 transition: all 0.3s ease-in;
    
    
}

._current > .color_img{
	width:17%;
	/*padding-left:0%;
	padding-right:0%;*/
    padding-left:1.5%;
	padding-right:1.5%;
	transform: scale(1.2);
	 transition: all 0.3s ease-in;
}



.color_text{
	width:80%;
	font-size:clamp(0.75rem, 0.695rem + 0.27vw, 0.9rem);
	/*border: 1px solid hsla(0,0%,54%,0);*/
	padding:4px;
	color:hsla(0,0%,50%,1.00);
	 transition: all 0.3s ease-in;
}



._current > .color_text{
	/*border: 1px solid hsla(0,0%,30%,1.00);*/
	background-color: hsla(0,0%,95%,1.00);
	color:hsla(0,0%,5%,1.00);
	
	 transition: all 0.3s ease-in;
      border-radius:4px;
}





@media (max-width: 767px) {
	
	
	.color_text{
	width:80%;

	padding:4px;
	
}
	
	.color_img{
	width:17%;
	padding-left:1%;
	padding-right:1%;
	 transition: all 0.3s ease-in;
}
	
}











/*______________________unit_color*/

.unit_color{
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: space-between;
}

.unit_color_mt2{
	margin-top: 2rem;
}

.unit_color__title{
	width:45%;
}

.unit_color__bt{
	width:20%;
}




@media (max-width: 767px) {
	
	
	.unit_color_wrapper{
	
display: flex;
  flex-direction: row; /* 水平方向に要素を配置 */
		 justify-content: space-between;
	  align-items: flex-start;
		position: relative;
		

	}
	
	.unit_color_mt2{
	margin-top: 0rem;
}
	
.unit_color{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 45%;
	
}

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

.unit_color__bt{
	
	width:45%;
}	
	
	

	
	
}



/*______________________interior*/


.interior{
	 display: flex;
	 flex-wrap: nowrap;
	 justify-content: space-between;
}


.interior__title{
	width:100%;
}

.interior_color__bt{
	margin:0 2px;
}


@media (max-width: 767px) {
	
	
	.interior{
	 flex-wrap: wrap;
	 justify-content: center;
}

	
	.interior_color__bt{
	margin:5px 0px;
		width:60%;
}
}

/*______________________setting_area*/

.setting_area{
	position: relative;
	width: 100%;
	padding: 1rem 0;
	border-top: 1px solid hsla(0,0%,50%,1.00);
	border-bottom: 1px solid hsla(0,0%,50%,1.00);
	
}

.setting_area_flex{
	 display: flex;
}

.setting_area__title{
	width:30%;
}

.setting_area__text{
	width:70%;
}


/*______________________download_area*/

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


.download_bt{
	width:80%;
}



.simplebar-content-wrapper {
        scrollbar-width: auto;
        -ms-overflow-style: auto;
      }



@media (max-width: 767px) {
	.download_bt{
	width:60%;
}
	
}



@media (max-width: 767px) {
	
	


	
	
	.mainScreen{
	margin-top:15%;
	
 flex-direction: column;
		
}
	
	
	.left_image{	
		width: 100%; 
		height: auto;
	
	}
	

	

	
}