.font_normal{font-family: "TsukuGoPr5-R-AvenirNextLTPro-Regular";}


.font_TsukuMinPr6M{font-family: "FOT-筑紫明朝 Pr6 M";}
.font_TsukuMinPr6R{font-family: "FOT-筑紫明朝 Pr6 R";}
.font_TsukuMinPr6D{font-family: "FOT-筑紫明朝 Pr6 D";}
.font_AvenirNextLTProIt{font-family: "AvenirNextLTPro-It";}
.font_AvenirNextLTProM{font-family: "AvenirNextLTPro-MediumIt";}
.font_AGaramondPro{font-family: "AGaramondPro-Regular";}


#fontplus-trial-banner{ display: none; visibility: hidden;}
#simulator{font-family: "TsukuGoPr5-R-AvenirNextLTPro-Regular";padding: 50px 75px; }


#simulator > .wrap {  padding: 0 0 100px 0;}


#simulator  header.header{}
#simulator  header.header h1{font-family: "AvenirNextLTPro-It"; font-size: 0rem; margin-bottom: 0.8rem; font-weight: normal;
	padding-top: 2.2rem;
	text-indent: -100vw;
	overflow: hidden;
	
	background: url(../img/title_simulator.svg) center center no-repeat;
	background-size: contain; 
	
	
}
#simulator  header.header p{font-size: 1.4rem; margin-bottom: 2rem; font-family: "FOT-筑紫明朝 Pr6 M" !important;}



#simulator .wrap > .contents {}
#simulator .wrap > .contents .main{ margin-bottom: 50px;}

#simulator .content.simulator{}
#simulator .content.simulator .simulator-step{ border-top: solid 2px #d7d7d7;border-bottom: solid 0px #d7d7d7; padding: 30px 0 0 0; text-align: left;
}
#simulator .content.simulator dl.stepItem{ display: flex;}
#simulator .content.simulator dl.stepItem dt{ font-family: "AvenirNextLTPro-It";   width: 120px;    font-size: 1.2rem;border: solid 0px #f30; position: absolute; top: 32px; left: 30px;}

	#simulator .content.simulator dl.stepItem.step_1 dt{
			text-indent: -100vw;
			overflow: hidden;
			   font-size: 1rem;
			   
	background: url(../img/step_1.svg) left center no-repeat;
	background-size: contain; 
	}
	
	#simulator .content.simulator dl.stepItem.step_2 dt{
			text-indent: -100vw;
			overflow: hidden;	   font-size: 1rem;
	background: url(../img/step_2.svg) left center no-repeat;
	background-size: contain; 
	}
	
	#simulator .content.simulator dl.stepItem.step_3 dt{
			text-indent: -100vw;
			overflow: hidden;	   font-size: 1rem;
	background: url(../img/step_3.svg) left center no-repeat;
	background-size: contain; 
	}
	
	
	

#simulator .content.simulator dl.stepItem dd{ flex: 1;position: relative;border: solid 0px #f30; }

#simulator .content.simulator dl.stepItem.step_1{border-bottom: solid 2px #d7d7d7; padding-bottom: 30px; margin-bottom: 100px;}
#simulator .content.simulator dl.stepItem.step_1 dd{ }
#simulator .content.simulator dl.stepItem.step_1 dd::before{ content: ''; display: inline-block; width: 40px; height: 30px; position: absolute; top: 0.5rem; left:  120px; background: url(../img/icon_file.svg) center center no-repeat; background-size: contain; 
}

#simulator .content.simulator dl.stepItem h3{ padding-left: 130px; font-weight: normal; font-size: 1.0rem; margin-bottom: 1rem;}
#simulator .content.simulator dl.stepItem .input_unit{}
#simulator .content.simulator dl.stepItem .unit_item{}
#simulator .content.simulator dl.stepItem .unit_item input{}


#simulator .content.simulator dl.stepItem.step_1 h3,
#simulator .content.simulator dl.stepItem.step_1 .input_unit{ padding-left: 200px;}

#simulator .content.simulator dl.stepItem.step_2 .exp{padding-left: 130px; margin-bottom: 2rem;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit{ overflow: hidden;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item{ position: relative;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(1) {padding-left: 130px; width: 50%; float: left; display: flex; align-items: flex-end; vertical-align: bottom;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(2) {width: 50%; float: right; margin-bottom: 50px;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(2)::after { content: ''; display: block; clear: both;}

#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(1) input{ width: 10rem; height: 40px; margin: 0 1rem; text-align: right; padding-right: 1em; font-size: 1.5rem; font-weight: bold;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(1)::after{ content: ''; display: block; width: 30px; height: 30px; position: absolute; top: 50%; right:0; transform: translate(150%,-50%);
		background: url(../img/arrow_r_mark.svg) center center no-repeat; background-size: 50%; 
}

#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(2) .setup__simulate-btn{ width: 235px; height: 40px; margin:0 auto 0; padding: 0; color: #000; background: #fff; border: solid 1px #000; font-size: 1.0rem;font-family: "FOT-筑紫明朝 Pr6 M";}




#simulator .content.simulator dl.stepItem.step_2 .reference-line-editor{  clear: both;}
#simulator .content.simulator dl.stepItem.step_2 .setup-form__btn{ float: right;}

.reference-line-editor__point{background: #ffff3a; color: #888888;font-family: "AvenirNextLTPro-It";}
.reference-line-editor__line{    border-top: 4px #ffff3a dotted;}



#simulator .content.simulator dl.stepItem.step_3 dd h3{ margin-bottom: 0;}
#simulator .content.simulator dl.stepItem.step_3 dd{ border-bottom: solid 2px #d7d7d7; padding-bottom: 30px; margin-bottom: 1.5rem;}

.save_image{ padding: 2rem 0 0; text-align: center; display: flex;justify-content: flex-end}
.save_image button{ margin: 0;}

#simulator .content.simulator .simulator__note{ margin-bottom: 1.5rem;}

.input_unit .setup-form__btn{ display: none;}





#simulator ul.item-list{border: solid 2px #d7d7d7; padding: 0; margin-bottom: 3em;}
#simulator ul.item-list .item-list-item{ 
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 60px 0 0px;
	margin: 0;
	
	min-height: 50px;
}
#simulator ul.item-list .item-list-item:not(:first-child){border-top: solid 2px #d7d7d7;}
#simulator ul.item-list .item-list-item::before{ position: absolute; top: 0; left: auto; right: 50px; width: 0; height: 100%; border: 0; border-left: solid 2px #d7d7d7; }



#simulator ul.item-list .item-list-item__delete-btn{ position: absolute; top: 50%; right: 0; transform: translate(0,-50%); width: 50px;  height: 50px;
	background: url(../img/btn_close.svg) center center no-repeat; background-size: 40%; 
}
#simulator ul.item-list .item-list-item__delete-btn i { display: none;}



#simulator ul.item-list .item-list-item__info{ width: 600px; display: flex;  justify-content: space-between;text-align: left; align-items: center;}
	#simulator ul.item-list .item-list-item__name{ order: 2; padding-left: 70px; flex: 1;font-size: 0.85rem;line-height: 1.5; transform: translate(0,0.2rem);}
	
	#simulator ul.item-list .item-list-item__btns{ order: 1; width: 150px; border-right: solid 2px #d7d7d7;}
	#simulator ul.item-list .item-list-item__detail-link{width: 150px; height: 50px; color: #666; background: transparent;    padding: 5px 5px; letter-spacing: 0.1em;}
	
	
	#simulator ul.item-list .item-list-item__image{ width: 50px; height: 50px; position: absolute; top: 0; left: 150px; margin: 0; padding: 0; background-size: contain; }
	
	
	#simulator ul.item-list .item-list-item-artist{ width: 250px;  display: flex; align-items: center; justify-content: space-between; }
	#simulator ul.item-list .item-list-item-artist__icon{ order: 2; width: 30px; height: 30px;    border-radius: 0;}
	#simulator ul.item-list .item-list-item-artist__name{ flex: 1; order: 1; text-align: right; padding-right: 1rem;font-size: 0.7rem; line-height: 1.5;}



        
        
        
	#simulator .add-tags{
	padding: 0;
	margin: 0 0 50px;
	border: 0;
}

#simulator .add-tags .add-tags__label{ position: relative; border: 0; background: transparent; font-size: 1.3rem;font-family: "FOT-筑紫明朝 Pr6 M" !important;}


#simulator .add-tags .add-tags__all-btn{border: solid 2px #d7d7d7; background: transparent; color: #000; padding: 0.5em; width: 100%; margin-bottom: 1em;font-family: "FOT-筑紫明朝 Pr6 M" !important;}

#simulator .add-tags ul{ 
		display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 2px;
	padding: 0;
	margin: 0 0 1em;

	 padding: 0; justify-content: space-between;border: solid 0px #c007;}
#simulator .add-tags ul li{ display: flex;  width: 100%; margin: 0; border-right: solid 0px #d7d7d7; border-bottom: solid 0px #d7d7d7; min-height: 40px; }
#simulator .add-tags ul li:nth-of-type(1) ,
#simulator .add-tags ul li:nth-of-type(2) ,
#simulator .add-tags ul li:nth-of-type(3) {}

#simulator .add-tags .add-tags__tag-list li.list-spacer{ display: none;}

#simulator .add-tags ul li .btn{ display: flex;padding:0.5rem 3rem; text-align: center; background: #fff; color: #000; position: relative;display: flex;
    flex: 1; align-items: center; line-height: 1.5;font-size: 0.8rem;}
#simulator .add-tags ul li .btn p{ margin: 0 auto; padding: 0;}

#simulator .add-tags .add-tags__artist-list{ border-bottom: 0;}
#simulator .add-tags .add-tags__artist-list li{}
#simulator .add-tags .add-tags__artist-list li .btn{}

#simulator .add-tags .add-tags__artist-list li .add-tags-artist-item__icon{ position: absolute; top: 50%; right: 2%; transform: translate(0,-50%);border-radius: 0; width: 30px; height: 30px;} 
#simulator .add-tags .add-tags__artist-list li .add-tags-artist-item__name{}



#simulator .add-tags .add-tags__tag-list{}
#simulator .add-tags .add-tags__tag-list li{}
#simulator .add-tags .add-tags__tag-list li .btn{}


#simulator  .btns { padding-top: 50px;display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
#simulator  .btns .btns_unit{width: auto;  }
#simulator  .btns .btns_unit button{width: auto;   background: transparent; color: #000; border-bottom: solid 2px #000; padding: 0.5em 1em; font-size: 1.3rem; white-space: nowrap;font-family: "FOT-筑紫明朝 Pr6 M" !important;}

#simulator  .btns .btns_unit button::after{ content: ''; display: inline-block; width: 40px; height: 40px; background: url(../img/arrow_r_mark.svg) center center no-repeat; background-size: 50%; margin-left: 1rem; transform: translate(0,0.5em) rotate(-90deg);}

	
	.add-selector-item__name{ text-align: left !important; font-size: 0.7rem; line-height: 1.4;}
	
	
	@media screen and (max-width:850px) {
		
		#simulator{ padding: 25vw 5vw;}
		
		
		
		#simulator > .wrap {  padding: 0 0 10vw 0;}


#simulator  header.header{}
#simulator  header.header h1{ font-size: 0rem; margin-bottom: 0.5rem; padding-top: 1.6rem;}
#simulator  header.header p{font-size: 1.0rem; margin-bottom: 1.5rem; }



#simulator .wrap > .contents {}
#simulator .wrap > .contents .main{ margin-bottom: 5vw;}

#simulator .content.simulator{}
#simulator .content.simulator .simulator-step{ padding: 5vw 0 0 0; }
#simulator .content.simulator dl.stepItem{ display: block;}
#simulator .content.simulator dl.stepItem dt{ width: 100%; margin-bottom: 5vw; font-size: 1.2rem; position: relative;top: auto; left: auto;}
#simulator .content.simulator dl.stepItem dd{ width: 100%;    position: relative;border: solid 0px #f30; }

#simulator .content.simulator dl.stepItem.step_1{border-bottom: solid 2px #d7d7d7; padding-bottom: 5vw; margin-bottom: 20vw;}
#simulator .content.simulator dl.stepItem.step_1 dd{ }
#simulator .content.simulator dl.stepItem.step_1 dd::before{ width: 10vw; height: 10vw;  top: 0rem; left:  0vw; }

#simulator .content.simulator dl.stepItem h3{ padding-left: 0px; font-size: 1.0rem; margin-bottom: 0.5rem;}
#simulator .content.simulator dl.stepItem .input_unit{}
#simulator .content.simulator dl.stepItem .unit_item{}
#simulator .content.simulator dl.stepItem .unit_item input{}


#simulator .content.simulator dl.stepItem.step_1 h3,
#simulator .content.simulator dl.stepItem.step_1 .input_unit{ padding-left: 15vw;}

#simulator .content.simulator dl.stepItem.step_2 .exp{padding-left: 0px; margin-bottom: 2rem;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit{ overflow: hidden;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item{ position: relative;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(1) {padding-left: 0px; width: 100%; margin-bottom: 3vw; padding-bottom: 12vw; float: none; display: block; align-items: flex-end; vertical-align: bottom; text-align: center;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(2) {width: 100%; float: none; margin-bottom: 3vw;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(2)::after { content: ''; display: block; clear: both;}

#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(1) input{ width: 6rem; height: 3rem; margin: 0 1rem; text-align: right; padding-right: 1em; font-size: 1.5rem; font-weight: bold;}
#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(1)::after{ content: ''; display: block; width: 10vw; height: 10vw; position: absolute; top: auto; bottom: 0; left: 50%; right:auto; transform: translate(-50%,0%) rotate(90deg);
}

#simulator .content.simulator dl.stepItem.step_2 .input_unit .unit_item:nth-of-type(2) .setup__simulate-btn{ width: 100%; height: 15vw; margin:0 auto 0; padding: 0; color: #000; background: #fff; border: solid 1px #000; font-size: 1.0rem;}




#simulator .content.simulator dl.stepItem.step_2 .reference-line-editor{  clear: both;}
#simulator .content.simulator dl.stepItem.step_2 .setup-form__btn{ float: right;}

.reference-line-editor__point{background: #ffff3a; color: #888888;font-family: "AvenirNextLTPro-It";}
.reference-line-editor__line{    border-top: 4px #ffff3a dotted;}



#simulator .content.simulator dl.stepItem.step_3 dd h3{ margin-bottom: 0;}
#simulator .content.simulator dl.stepItem.step_3 dd{ border-bottom: solid 2px #d7d7d7; padding-bottom: 30px; margin-bottom: 50px;}

.save_image{ padding: 2rem 0 0; text-align: center; display: block;}
.save_image button{ margin: auto;}

#simulator .content.simulator .simulator__note{ margin-bottom: 1rem;}

.input_unit .setup-form__btn{ display: none;}





#simulator ul.item-list{border: solid 2px #d7d7d7; padding: 0;}
#simulator ul.item-list .item-list-item{ 
	display: block;
	align-items: center;
	justify-content: space-between;
	padding: 0 10vw 0 0px;
	margin: 0;
	
	min-height: 50px;
}
#simulator ul.item-list .item-list-item:not(:first-child){border-top: solid 2px #d7d7d7;}
#simulator ul.item-list .item-list-item::before{ position: absolute; top: 0; left: auto; right: 10vw; width: 0; height: 100%; border: 0; border-left: solid 2px #d7d7d7; }



#simulator ul.item-list .item-list-item__delete-btn{ position: absolute; top: 50%; right: 0; transform: translate(0,-50%); width: 10vw;  height: 10vw;
	background: url(../img/btn_close.svg) center center no-repeat; background-size: 40%; 
}
#simulator ul.item-list .item-list-item__delete-btn i { display: none;}



#simulator ul.item-list .item-list-item__info{ width: 100%; display: flex;  justify-content: space-between;text-align: left; align-items: center; min-height: 20vw;}
	#simulator ul.item-list .item-list-item__name{ order: 2; padding:3vw 0 0 37vw; flex: 1;font-size: 0.65rem;line-height: 1.5; margin-bottom: 15vw; min-height: 8vw;}
	
	#simulator ul.item-list .item-list-item__btns{ order: 1; width: 20vw; height: 100%; border-right: solid 2px #d7d7d7; position: absolute; }
	#simulator ul.item-list .item-list-item__detail-link{width: 100%; height: 100%; padding: 0 2vw;}
	
	
	#simulator ul.item-list .item-list-item__image{ width: 15vw; height: 15vw; position: absolute; top: 0; left: 20vw; margin: 0; padding: 0; background-size: contain; }
	
	
	#simulator ul.item-list .item-list-item-artist{ position: absolute; bottom: 0; right: 0; width: 100%; padding: 0 10vw 1vw 20vw;}
	#simulator ul.item-list .item-list-item-artist__icon{ order: 2; width: 30px; height: 30px;    border-radius: 0;}
	#simulator ul.item-list .item-list-item-artist__name{ flex: 1; order: 1; text-align: right; padding-right: 1rem;font-size: 0.6rem; line-height: 1.5;}



        
        
        
	#simulator .add-tags{
	padding: 0;
	margin: 0 0 50px;
	border: 0;
}

#simulator .add-tags .add-tags__label{ position: relative; border: 0; background: transparent; font-size: 1.0rem;}


#simulator .add-tags .add-tags__all-btn{border: solid 2px #d7d7d7; background: transparent; color: #000; padding: 0.5em; width: 100%; margin-bottom: 1em;}

#simulator .add-tags ul{ 
		display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 1vw;
	margin: 0 0 1em;
}
#simulator .add-tags ul li{ min-height: 2em; }
#simulator .add-tags ul li:nth-of-type(1) ,
#simulator .add-tags ul li:nth-of-type(2) ,
#simulator .add-tags ul li:nth-of-type(3) {}

#simulator .add-tags .add-tags__tag-list li.list-spacer{ display: none;}

#simulator .add-tags ul li .btn{ display: flex;padding:0.5rem 0.5rem; text-align: center; background: #fff; color: #000; position: relative;display: flex;
    flex: 1; align-items: center; line-height: 1.5;font-size: 0.6rem;}
#simulator .add-tags ul li .btn p{ margin: 0 auto; padding: 0;}

#simulator .add-tags .add-tags__artist-list{ border-bottom: 0;}
#simulator .add-tags .add-tags__artist-list li{}
#simulator .add-tags .add-tags__artist-list li .btn{ min-height:7vw;}

#simulator .add-tags .add-tags__artist-list li .add-tags-artist-item__icon{width: 5vw; height: 5vw;} 
#simulator .add-tags .add-tags__artist-list li .add-tags-artist-item__name{font-size: 0.6rem; padding-right: 0.5rem;}



#simulator .add-tags .add-tags__tag-list{}
#simulator .add-tags .add-tags__tag-list li{}
#simulator .add-tags .add-tags__tag-list li .btn{}


#simulator  .btns { padding-top: 50px;display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
#simulator  .btns .btns_unit{width: 100%;  }
#simulator  .btns .btns_unit button{width: 100%;  text-align: left;  background: transparent; color: #000; border-bottom: solid 2px #000; padding: 1.5em 1em 0.5em 1em; font-size: 0.8rem; white-space: nowrap; line-height: 4;}

#simulator  .btns .btns_unit button::after{ content: ''; display: inline-block; width: 3rem; height: 3rem; background: url(../img/arrow_r_mark.svg) center center no-repeat; background-size: 50%; margin-left: 1rem; transform: translate(0,0em) rotate(-90deg); float: right;}

	
	
	.add-selector__list li{ width: 49%; margin-bottom: 1%;}
	.add-selector-item{ display: flex; width: 100%; height: 100%;}
		
		
		
	}