/* CSS Document */

#menubar{
	/*
	position: absolute;
	top:0;
	left:0;
	*/
}

a.btnPrev{
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	color:#333;
}
a.btnPrev::before{
	content:'＜';
	display: inline-block;
	border-radius: 80px;
	background-color:#FFD260;
	width: 20px;
	height: 20px;
	color:#fff;
	font-size: 12px;
	text-align: center;
}
a.btnNext{
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	color:#333;
}
a.btnNext::after{
	
	content:'＞';
	display: inline-block;
	border-radius: 80px;
	background-color:#FFD260;
	width: 20px;
	height: 20px;
	color:#fff;
	font-size: 12px;
	text-align: center;
	margin-bottom: 5px;
}



.scroll-menu-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;        /* Firefox */
}
.scroll-menu-wrapper::-webkit-scrollbar {
	display: none;                /* Chrome, Safari */
}

.scroll-menu {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	padding: 10px;
}

.scroll-menu span {
	flex: 0 0 auto;
	padding: 10px 16px;
	background: #fef9e8;

	text-align: center;
	min-width: 120px;
	font-size: 12px;
	font-weight: bold;
	color: #333;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.scroll-menu span:hover {
	background: #ccc;
}

.scroll-menu span.active {
	background-color:#FFD260;
	color:white;
}


#Cart-Check{
	margin-top: 60px;
}


.dekiagari{
	color: white;
	background-color: #b2dbf6;
}
.dekiagari:hover,
.dekiagari:active{
	background-color: #5FA0CB;
}







/* added Color
メタリックネイビー
ターコイズ
ミルキーミント
ピスタチオ
グレージュ
ミルキーピンク
グレイッシュラベンダー */

body:not(.home) .btn-22 {
  background-color:rgba(18,34,156,1.00);
  color: #333;
}
body:not(.home) .btn-23 {
  background-color:rgba(64,153,180,1.00);
  color: #333;
}
body:not(.home) .btn-24 {
  background-color:rgba(104,204,103,1.00);
  color: #333;
}
body:not(.home) .btn-25 {
  background-color:rgba(137,160,65,1.00);
  color: #333;
}
body:not(.home) .btn-26 {
  background-color:rgba(125,131,115,1.00);
  color: #333;
}
body:not(.home) .btn-27 {
  background-color:rgba(180,78,80,1.00);
  color: #333;
}
body:not(.home) .btn-28 {
  background-color:rgba(145,105,158,1.00);
  color: #333;
}

/* CSS Override */
#Sim-Title-01{
	padding: 10px 0 10px 10px;
	background-color:#FFD260;
	color:white;
}
#Sim-Control-Box{
	background-color:white;
	border: 1px solid #ccc;
}
.title{
	border-left: 4px solid #ffd260;
	padding: 10px 0 10px 10px;
	font-weight: bold;
	margin-top: 5px;
	margin-bottom: 25px;
}
.title-blue{
	margin-top:15px;
	border-left: 4px solid #b2dbf6;
}

body:not(.home) .simulation_inner_btn:hover, body:not(.home) .simulation_inner_btn:active, body:not(.home) .simulation_inner_btn:focus{
	background-color:#FFD260;
	color: white;
}
body:not(.home) .simulation_inner_btn{
	background-color:#eee;
}




















/* Total Step */

#All-Slider-Box{
	margin-top:20px;
}

/* Step 01 */

#sozai{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap:10px;
}
#sozai .col{
	width: calc( 50% - 5px );
	margin:0!important;
}

@media screen and (max-width: 1199px){
	#sozai .col{
		width: 100%;
		margin:0!important;
	}
}


/* Step 02 */

#slider_thumb1_box2{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap:10px;
}
#slider_thumb1_box2 .col{
	width: calc( 33% - 8px );
	margin:0!important;
}
#slider_thumb1_box2 .col a{
	background-color:white;
}
#slider_thumb1_box2 .col a:hover,
#slider_thumb1_box2 .col a:active{
	color:black;
}
#slider_thumb1_box2 .col a span,
#slider_thumb1_box2 .col a span img{
	border-radius: 50%;
}

@media screen and (max-width: 1199px){
	#slider_thumb1_box2 .col{
		width: calc( 50% - 10px );
		margin:0!important;
	}
}

#box2 .active{
	font-weight: bold;
	border:1px solid #ccc;
	border-radius: 8px;
}

/* Step 03 */

#slider_thumb2{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap:10px;
}
#slider_thumb2 .col{
	width: calc( 33% - 8px );
	margin:0!important;
}
#slider_thumb2 .col a{
	background-color:white;
}
#slider_thumb2 .col a:hover,
#slider_thumb2 .col a:active{
	color:black;
}
#slider_thumb2 .col a span,
#slider_thumb2 .col a span img{
	border-radius: 50%;
}

@media screen and (max-width: 1199px){
	#slider_thumb2 .col{
		width: calc( 50% - 10px );
		margin:0!important;
	}
}

#box3 .active{
	font-weight: bold;
	border:1px solid #ccc;
	border-radius: 8px;
}


/* Step 04 */

#moyoucolorlist1 .simulation_inner_btn:hover,
#moyoucolorlist1 .simulation_inner_btn:active,
#moyoucolorlist1 .simulation_inner_btn:focus{
	background-color: #b2dbf6;
}
#moyoucolorlist1 .simulation_inner_btn.active{
	/*background-color: #b2dbf6;*/
}

#slider_thumb3_2 .button{
	background-color: #f0f0f0;
	color: black;
	font-weight: normal;
}
#slider_thumb3_2 .button.active {
  border: 2px solid #FFD260;
  background-color: #f0f0f0;
}
#slider_thumb3 a.active {
  border: 2px solid #FFD260;
  background-color: #f0f0f0;
}






.simulation_item_click{
	height: 400px;
	overflow-y: scroll;
}
@media screen and (max-width: 767px){
	.simulation_item_click{
		height: 250px;
		overflow-y: scroll;
	}
}


#shishuBtns .btnNext{
	display: none;
}


body:not(.home) #Shishuu-Text-Target2 {
    font-size: 40px;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
}
body:not(.home) #sishuu-panel-inner2 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}