
/**************************************************************************************/
/**************************************************************************************/
/* PC Site*/
/**************************************************************************************/
/**************************************************************************************/



.ul_page{
	width: 100% ;
	height: 100% ;
	object-fit: contain ;
	z-index: 37;
}



.frame_t{
	position: fixed ;
	top : 0% ;
	left : -100% ;
	width: 100% ;
	height : 40px ;
	z-index: 28 ;
}
.frame_t img{
	width: 100% ;
	height : 40px ;
}

.frame_r{
	position: fixed ;
	top : -100% ;
	right : 0% ;
	width: 40px ;
	height : 100% ;
	z-index: 28 ;
}
.frame_r img{
	width: 40px ;
	height : 100% ;
}

.frame_b{
	position: fixed ;
	bottom : 0% ;
	right : -100% ;
	width: 100% ;
	height : 100px ;
	z-index: 29 ;
}
.frame_b img{
	width: 100% ;
	height : 100px ;
}

.frame_l{
	position: fixed ;
	bottom : -100% ;
	left : 0% ;
	width: 40px ;
	height : 100% ;
	z-index: 28 ;
}
.frame_l img{
	width: 40px ;
	height : 100% ;
}








.fv_back_rainbow{
	position: absolute ;
	top : 25vh ;
	left : 50% ;
	transform: translate(-50%,0%);
	width: 100% ;
	opacity: 0 ;
}

.fv_back_hill{
	position: absolute;
	top : 25vh ;
	left : 0%;
	width: 100% ;
}



.fv_superbox{
	width: 100% ;
	min-height : 120vh ;
	padding : 100px 40px 40px ;
	overflow: hidden ;
}



.fv_sun{
	position: fixed;
	top : 40px ;
	left : 40px ;
	width: 200px ;
	z-index: -1 ;
	transform-origin: center center ;
	transform : rotate(0deg) ;
}
.fv_poyo{
	position: absolute;
	top : 10px ;
	right : -200px  ;
	width: 200px ;
	z-index: 7 ;
}

.fv_title{
	position: absolute;
	top : 50% ;
	left : 50% ;
	transform: translate(-50%,-50%);
	width: 90% ;
	height: 100px ;
	max-width: 450px ;
	z-index: 9 ;
}
.fv_title01{
	position: absolute;
	bottom : 0% ;
	left : 0% ;
	width: 20% ;
	opacity: 0 ;
}
.fv_title02{
	position: absolute;
	bottom : 0% ;
	left : 20% ;
	width: 20% ;
	opacity: 0 ;
}
.fv_title03{
	position: absolute;
	bottom : 0% ;
	left : 40% ;
	width: 20% ;
	opacity: 0 ;
}
.fv_title04{
	position: absolute;
	bottom : 0% ;
	left : 60% ;
	width: 20% ;
	opacity: 0 ;
}
.fv_title05{
	position: absolute;
	bottom : 0% ;
	left : 80% ;
	width: 20% ;
	opacity: 0 ;
}

.fv_txt_kagoshima{
	position: absolute;
	bottom : 100% ;
	left : -10% ;
	width: 200px ;
	opacity : 0 ;
}

.fv_txt_titleen{
	position: absolute;
	bottom : 100%;
	right : 0% ;
	width: 150px ;
	opacity: 0 ;
}

.fv_txt_2022{
	position: absolute;
	top : 100% ;
	right : 0% ;
	width: 80px ;
	opacity: 0 ;
}


.back_cloud_wrap01{
	position: fixed ;
	top : 0% ;
	left : 0% ;
	width: 100% ;
	height: 100% ;
	z-index:  0 ;

}
.back_cloud_wrap02{
	position: fixed ;
	top : 0% ;
	left : 1000% ;
	width: 100% ;
	height: 100% ;
	z-index:  0 ;
}

.back_cloud{
	width: calc( 100% + 4px );
}






.top_catch{
	position: absolute;
	bottom : 0px ;
	left : 50% ;
	transform: translate(-50%,0%);
	width : calc( 100% - 80px ) ;
	max-width: 960px ;
	padding : 40px ;
	background-color: rgba(255,255,255,0.8) ;
	text-align: center ;
	font-size: 16px ;
	color : #333333 ;
	border-radius: 10px ;
	z-index: 9 ;
	opacity: 0 ;
}

.select_youtube{
}
.select_youtube iframe{
	display : block;
	width: 100% ;
	max-width: 560px ;
	margin : 40px auto;
}


.select_superbox{
	width: 100% ;
	max-width: 1280px ;
	padding : 0px 40px ;
	margin : 0px auto 0px ;
	justify-content: center !important;
}

.select_itembox_wrap{
	width: 200px ;
	padding : 10px ;
}






.select_itembox_dashed{
	position: absolute;
	top : 50% ;
	left : 50% ;
	width: calc( 100% - 50px );
	transform: translate(-50%,-50%);
	aspect-ratio: 1 / 1 ;
	border : 2px dashed #FFFFFF ;
	border-radius: 50% ;
	z-index: 5 ;
}

.select_itembox{
	width: 100% ;
	max-width: 320px ;
	border-radius: 50% ;
	aspect-ratio : 1 / 1 ;
	background-color: #332FD0 ;
	border : 10px solid #FFFFFF ;
	box-shadow: 0px 4px 0px rgba(0,0,0,0.10);
	z-index: 4 ;
}
.select_itembox_wrap01 .select_itembox{
	background-color: #F97B22 ;
}
.select_itembox_wrap02 .select_itembox{
	background-color: #159895 ;
}
.select_itembox_wrap03 .select_itembox{
	background-color: #146C94 ;
}
.select_itembox_wrap04 .select_itembox{
	background-color: #401296 ;
}


.select_item_story{
	position: absolute;
	top : 50% ;
	left : 0% ;
	width: 100% ;
	transform: translate(0%,-50%);
	color : #FFFFFF ;
	text-align: center ;
	font-size: 20px ;
	line-height: 1.2;
}







.footer{
	width : 100% ;
	padding : 100px 40px 80px ;
	margin-top : 500px ;
}

.footer_ground{
	position: absolute;
	bottom : 99% ;
	left : 50% ;
	width: 634px ;
	transform: translate(-50%,0%);
}


.footer_title{
	width: calc( 100% - 80px );
	max-width: 600px ;
	margin : 0px auto ;
}

.footer_image_superbox{
	width: 100% ;	
	max-width: 800px ;
	margin : 0px auto 0px;
	border-bottom : 2px solid #DD0000 ;
}

.footer_imagebox{
	width : 20% ;
	max-width: 100px ;
}
.footer_imagebox img{
	width: 100% ;
}
.footer_poyo img{
	position: absolute;
	bottom : 0% ;
	left : 0% ;
}

.footer_catch{
	text-align: center ;
	font-size: 20px ;
	font-weight: 900 ;
}
.footer_catch span{
	color : #DD0000 ;
}

.footer_logo{
	width: calc( 100% - 80px ) ;
	max-width: 320px  ;
	margin : 40px auto 0px ;
}

.footer_copy{
	text-align: center ;
	font-size: 12px ;
	margin : 100px auto 0px ;
}







.judge_section{
	width: 100% ;
	padding : 200px 0px ;
	/** background-color: #38E54D ; **/
}

.judege_title{
	font-size: 32px ;
	text-align: center ;
	margin : 0px auto 20px ;
	width: calc( 100% - 80px );
	height : 80px ;
	line-height: 80px ;
}
.judege_title.follow{
	margin-top : 100px ;
}

.judge_superbox{
	width: calc( 100% - 80px );
	max-width: 960px ;
	height : 400px ;
	margin : 0px auto 0px ;
	background-color: #FFFFFF ;
	border-radius: 40px ;
	overflow: hidden ;
}


.judge_qbox{
	position: absolute;
	top : 100% ;
	left : 0% ;
	width: 100% ;
	height : 100% ;
	background-color: #FFFFFF ;
	padding : 40px ;
}
.judge_q_title{
	width : 100% ;
	text-align: center ;
	color : #FFB84C ;
	font-size: 24px ;
	z-index: 4 ;
}
.judge_q_num{
	width: 80px ;
	height: 80px ;
	border-radius: 50%;
	background-color: #FFB84C ;
	color : #FFFFFF ;
	font-size: 24px ;
	text-align: center ;
	line-height: 80px ;
	display: inline-block;
}

.judge_q01 .judge_q_title{	color : #FFB84C	;	}
.judge_q01 .judge_q_num{	background-color: #FFB84C ;	}

.judge_q02 .judge_q_title{	color : #F266AB	;	}
.judge_q02 .judge_q_num{	background-color: #F266AB ;	}

.judge_q03 .judge_q_title{	color : #A459D1	;	}
.judge_q03 .judge_q_num{	background-color: #A459D1 ;	}

.judge_q04 .judge_q_title{	color : #2CD3E1	;	}
.judge_q04 .judge_q_num{	background-color: #2CD3E1 ;	}

.judge_q05 .judge_q_title{	color : #FFB84C	;	}
.judge_q05 .judge_q_num{	background-color: #FFB84C ;	}

.judge_q06 .judge_q_title{	color : #FCE22A	;	}
.judge_q06 .judge_q_num{	background-color: #FCE22A ;	}

.judge_q07 .judge_q_title{	color : #F94A29	;	}
.judge_q07 .judge_q_num{	background-color: #F94A29 ;	}

.judge_q08 .judge_q_title{	color : #D61355	;	}
.judge_q08 .judge_q_num{	background-color: #D61355 ;	}

.judge_q09 .judge_q_title{	color : #BFDB38	;	}
.judge_q09 .judge_q_num{	background-color: #BFDB38 ;	}

.judge_q10 .judge_q_title{	color : #FFB84C	;	}
.judge_q10 .judge_q_num{	background-color: #FFB84C ;	}

.judge_q11 .judge_q_title{	color : #F266AB	;	}
.judge_q11 .judge_q_num{	background-color: #F266AB ;	}

.judge_q12 .judge_q_title{	color : #A459D1	;	}
.judge_q12 .judge_q_num{	background-color: #A459D1 ;	}

.judge_q13 .judge_q_title{	color : #2CD3E1	;	}
.judge_q13 .judge_q_num{	background-color: #2CD3E1 ;	}


.judge_ansbox{
	width: 100% ;
	margin : 40px auto ;
	z-index: 4 ;
}
.judge_q_result .judge_ansbox{
	justify-content: center !important;
}
.judge_yes{
	width: 48% ;
	height : 80px ;
	background-color: #1363DF ;
	color : #FFFFFF ;
	border-radius: 10px ;
	box-shadow: 0px 4px 0px rgba(0,0,0,0.25);
	padding : 10px ;
	z-index: 4 ;
}
.judge_no{
	width: 48% ;
	height : 80px ;
	background-color: #F806CC ;
	color : #FFFFFF ;
	border-radius: 10px ;
	box-shadow: 0px 4px 0px rgba(0,0,0,0.25);
	padding : 10px ;
	z-index: 4 ;
}

.judge_ans_wrap{
	width: 100% ;
	height : 60px ;
	border : 2px dashed #FFFFFF ;
	line-height: 56px ;
	border-radius: 8px;
	text-align: center ;
	font-size: 32px ;
	cursor: pointer ;
}
.judge_ans_wrap:hover{
	background-color: rgba(255,255,255,0.5);
}
.judge_btn_reset{
	position: absolute;
	top : 20px ;
	right : 20px ;
	width: 120px ;
	height: 80px ;
	line-height: 80px ;
	border-radius: 40px ;
	background-color: #FF55BB ;
	color : #FFFFFF ;
	cursor: pointer;
	z-index: 5 ;
	text-align: center ;

}

.judge_back{
	position: absolute;
	bottom : 0% ;
	left: 0% ;
	width: 100% ;
	z-index: 1 ;
	opacity: 0.4;
}



.genre_superbox{
	width: calc( 100% - 80px );
	max-width: 960px ;
	padding : 40px ;
	margin : 0px auto 0px ;
	background-color: #FFFFFF ;
	border-radius: 40px ;
	box-shadow: 0px 0px 8px #FFFFFF ;
}

.genre_title{
	padding : 20px 20px ;
	font-size: 24px ;
	background-color : #27a84b ;
	text-align: center ;
	color : #FFFFFF ;
	border-radius: 10px ;
	/** text-shadow: 0px 0px 8px rgba(0,0,0,0.25); **/
	line-height: 1.2;
	font-weight: 400 ;
}
.genre_title span{
	font-size: 18px ;
}

.genre_title_hr{
	margin : 10px auto ;
	width: 100% ;
	height : 1px ;
	border-bottom : 2px dotted #FFFFFF ;
	text-shadow: 0px 0px 8px rgba(0,0,0,0.25);
}

.genre_story{
	width: 100% ;
	margin-bottom : 40px ;
	justify-content: center !important;
}
.chara{
	/** width: 120px ; **/
	width : 160px ;
	cursor: pointer;
	margin-bottom : 20px;
	/** background-color: #FFFFFF ; **/
}
.chara img{
	width: 100% ;
	max-width: 120px ;
	margin : 0px auto -10px ;
	z-index: 15 ;
}
.chara_job{
	/**
	position: absolute;
	bottom : -40px ;
	left : 50% ;
	**/
	width: 90% ;
	height : 60px ;
	margin : 0px auto ;
	/**
	transform: translate(-50%,0%);
	**/
	
	background-color: #19A7CE ;
	font-size: 12px ;
	line-height: 16px;
	color : #FFFFFF ;
	text-align: center ;
	z-index: 14 ;
	border-radius: 10px ;
	font-weight: 400 ;
}
.chara_job_small{
	font-size: 10px ;
}
.chara_job_wrap{
	position: absolute;
	top : 50% ;
	width: 100% ;
	padding : 4px ;
	transform: translate(0%,-50%);
	z-index: 15 ;
}

.genre_title01 + .genre_story .chara_job{	background-color: #FFB84C;	}
.genre_title02 + .genre_story .chara_job{	background-color: #F266AB;	}
.genre_title03 + .genre_story .chara_job{	background-color: #A459D1;	}
.genre_title04 + .genre_story .chara_job{	background-color: #2CD3E1;	}
.genre_title05 + .genre_story .chara_job{	background-color: #30E3DF;	}
.genre_title06 + .genre_story .chara_job{	background-color: #FCE22A;	}
.genre_title07 + .genre_story .chara_job{	background-color: #F94A29;	}
.genre_title08 + .genre_story .chara_job{	background-color: #D61355;	}
.genre_title09 + .genre_story .chara_job{	background-color: #BFDB38;	}



.genre_title01{	background-color: #FFB84C;	}
.genre_title02{	background-color: #F266AB;	}
.genre_title03{	background-color: #A459D1;	}
.genre_title04{	background-color: #2CD3E1;	}
.genre_title05{	background-color: #30E3DF;	}
.genre_title06{	background-color: #FCE22A;	}
.genre_title07{	background-color: #F94A29;	}
.genre_title08{	background-color: #D61355;	}
.genre_title09{	background-color: #BFDB38;	}






/** list ============================ **/

.list_superbox{
	width: calc( 100% - 80px );
	max-width: 960px ;
	padding : 40px ;
	margin : 0px auto 0px ;
	background-color: #FFFFFF ;
	border-radius: 40px ;
	z-index: 4;
	box-shadow: 0px 0px 8px #FFFFFF ;
}

.list_item{
	width: 50% ;
	padding : 0px 60px ;
	margin : 0px 0px 20px ;
	font-size: 20px ;
	font-weight: 700 ;
	cursor: pointer;
}

.list_item_num{
	position: absolute;
	top : 0% ;
	left : 0% ;
	width: 40px ;
	height: 40px ;
	text-align: center ;
	border-radius: 50% ;
	background-color: #28b674 ;
	color : #FFFFFF ;
	z-index: 4 ;
}

.list_item_name{
	color : #28b674 ;
	z-index: 4 ;
}

.list_item.viewed .list_item_num{
	background-color: #FF55BB ;
}
.list_item.viewed .list_item_name{
	color: #FF55BB ;
}


.list_item_company{
	font-size: 12px ;
	z-index: 4 ;
}

.list_item_marker{
	position: absolute;
	top : -10% ;
	left : -20px ;
	width: 0% ;
	height : 120%  ;
	background-color: #FCFFB2 ;
}





/** detail ============================ **/

.detail_superbox{
	position: fixed ;
	top : 0% ;
	left : -100% ;
	width: 100% ;
	height: 100% ;
	/** background-color: rgba(255,255,255,0.8); **/
	z-index: 32 ;
	padding : 100px 40px ;
	overflow: scroll ;
	background-color: rgba(255,255,255,0.8) ;
	display: none ;
}

.ul_superbox{
	width: 100% ;
	max-width: 920px ;
	background-color: #eaea70 ;
	border-radius: 40px ;
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	padding : 40px ;
	margin : 0px auto ;
}
/**
.ul_superbox{
	position: absolute;
	top : 0% ;
	left : 0% ;
	width: 100% ;
	height: 100% ;
}
**/


.ul_closebtn{
	position: fixed ;
	top : 40px ;
	right : 20px ;
	width: 240px ;
	height : 80px ;
	line-height: 80px ;
	text-align: center ;
	color : #FFFFFF ;
	font-size: 24px ;
	font-weight: 900 ;
	cursor: pointer;
	background-color: #19A7CE;
	border-radius: 40px  ;
	display: none ;
	z-index: 38;
}


.ul_title{
	width: 100% ;
	padding : 10px 120px 10px 120px ;
	/** background-color: #27a84b ; **/
	background-color: #FFFFFF ;
	border-radius: 20px ;
	color : #281e1c ;
	font-size: 32px ;
	font-weight: 700 ;
}

.ul_title_num{
	position: absolute;
	top : 50% ;
	left : 0% ;
	transform: translate(0%,-50%);
	/** background-color: #27a84b ; **/
	width: 120px ;
	height: 120px ;
	border-radius: 50% ;
	line-height: 120px ;
	text-align: center ;
	font-size : 60px ;
	font-weight: 900 ;

}

.ul_title_poyo{
	position: absolute;
	top : 50% ;
	right : -10px ;
	transform : translate(0%,-50%);
	width : 120px ;
}


.ul_catch_superbox{
	width: 100% ;
	padding : 20px 20px 20px 140px ;
	margin : 40px auto 0px ;
	background-color: #FFFFFF ;
	border-radius: 20px ;
}

.ul_catch_superbox02{
	width: 100% ;
	margin : 40px auto ;
}

.ul_catch_superbox02 img{
	width: 100% ;
	margin : 0px auto ;
}


.ul_title_person{
	position: absolute ;
	top : -60px  ;
	left : -60px ;
	width: 240px ;
	z-index: 1;
}
.ul_title_person.gap{
	left : -80px ;
}

.ul_catch{
	font-size: 24px ;
	color : #27a84b ;
	padding : 0px 10px 10px ;
	z-index: 4 ;
}

.ul_catch_border{
	position: absolute;
	bottom : 0px ;
	left : -1% ;
	width: 100% ;
	height: 4px ;
	background-color: #27a84b ;
	border-radius: 2px ;
}

.ul_catch_story{
	float : left ;
	width : calc( 100% - 340px ) ;
	margin-top : 20px ;
	z-index: 4 ;
}

.ul_catch_image{
	float : right ;
	width: 320px ;
	height : 260px ;
	margin-top : 20px ;
}
.ul_catch_image img{
	width: 100% ;
	height: 100% ;
	object-fit: cover ;
}



.ul_about_title{
	width: 100% ;
	line-height: 1.2 ;
	/** 
	border : 4px solid #27a84b ;
	**/
	border-radius: 40px ;
	color : #281e1c ;
	font-size: 24px ;
	padding : 0px 100px 0px 52px ;
	margin : 40px auto 0px ;
	z-index:  4;
	text-shadow: 0px 4px 0px #FFFFFF ;
}
.ul_about_title span{
	font-size: 40px ;
	display: block ;
}
.ul_about_cap{
	font-size: 12px ;
	text-align: right;
	z-index: 4;
}



.ul_about_imagel{
	position: absolute ;
	top : 50% ;
	left : -32px ;
	width: 80px ;
	transform: translate(0% , -50% );
}
.ul_about_imager{
	position: absolute ;
	top : -30px ;
	right : 0px ;
	width: 80px ;
}


.ul_about_flex{
	width: 100% ;
	margin : 20px auto 0px ;
}

.ul_about_flex_back{
	z-index: 0 ;
	position: absolute;
	top : -100px ;
	left: 50% ;
	transform: translate(-50%,0%);
	width: 100% ;
}


.ul_about_item{
	width: 49% ;
	padding : 10px ;
	background-color: #FFFFFF ;
	margin-bottom : 20px ;
	z-index: 4 ;
	border-radius: 20px ;
	border : 4px solid #eaea70 ;
}
.ul_about_item.long{
	width: 100% ;
}

.ul_about_item_title{
	width: 100% ;
	font-size: 20px ;
	color : #ea5414 ;
	border-bottom : 2px solid #ea5414 ;
}

.ul_about_item_story{
	float : right ;
	width: calc( 100% - 210px );
	margin-top : 10px ;
}

.ul_about_item_image{
	float : left ;
	width: 200px ;
	margin-top : 10px ;
}
.ul_about_item_image img{
	width: 100% ;
}


.ul_checkbox_flex{
	width: 100% ;
	margin : 20px auto 0px ;
}

.ul_checkbox{
	width: 49% ;
	background-color: #FFFFFF ;
	color : #281e1c ;
	padding : 30px 20px 20px ;
	transform: rotate(-2deg);
}

.ul_checkbox_title{
	width: 100% ;
	height: 32px ;
	line-height: 32px ;
	padding : 0px ;
	text-align: center ;
	color : #0e76c0 ;
	text-shadow: 0px 2px 0px #FFFFFF ;
}

.ul_checkbox_title_img{
	position: absolute ;
	top : 50% ;
	left : -40px ;
	transform: translate(0%,-50%);
	width: 80px ;
}

.ul_checkbox_story_img{
	position: absolute;
	top : -34px ;
	left : -20px ;
	width: 60px ;
}

.ul_checkbox_story li{
	padding-left : 1em ;
	text-indent : -1em ;
	line-height: 40px ;
	list-style:  none ;
}
.ul_checkbox_story li:before{
	content:"★";
}

.ul_checkbox_dot{
	position: absolute;
	top : 0px ;
	left : 0px ;
	width: 100% ;
}


.ul_otherbox{
	width: 49% ;
	background-color: #fdfce0 ;
	color : #281e1c ;
	padding : 30px 20px 20px ;
	transform: rotate(4deg);
}

.ul_otherbox_title{
	width: 100% ;
	height: 32px ;
	line-height: 32px ;
	padding : 0px ;
	text-align: center ;
	color : #e88493 ;
	text-shadow: 0px 2px 0px #FFFFFF ;
}

.ul_otherbox_title_img{
	position: absolute ;
	top : 50% ;
	left : -40px ;
	transform: translate(0%,-50%);
	width: 80px ;
}

.ul_otherbox_story_img{
	position: absolute;
	bottom : -10px ;
	right : 10px ;
	width: 80px ;
}

.ul_otherbox_story{
	line-height: 40px ;
	background-image : url("../images/common/border_otherbox.png") ;
}
.ul_otherbox_story span{
	margin-right : 10px ;
	display: inline-block ;
}
.ul_otherbox_story span:before{
	content : "○" ;
}



.ul_company_supebox{
	margin : 80px auto 0px ;
	border : 2px solid #58b592;
	background-color: #FFFFFF ;
	padding : 40px ;
}

.ul_company_koko{
	width: 100% ;
	max-width: 460px ;
}


.ul_company_teached{
	position: absolute;
	top : -60px ;
	right : -60px ;
	background-color: #005B9A ;
	width: 400px ;
	height : 40px ;
	line-height: 40px ;
	color : #FFFFFF ;
	text-align: center ;
	font-size: 20px ;
	border-radius: 20px ;
}

.ul_company_teached_icon{
	position: absolute;
	top : 50% ;
	left : -20px ;
	transform: translate(0%,-50%);
	width: 60px ;
}
.ul_company_teached_baloon{
	position: absolute;
	top : 100% ;
	left : 50% ;
	width: 40px ;
}

.ul_company_photobox{
	float : right ;
	width: 320px ;
}

.ul_company_photo{
	width: 100% ;
}

.ul_company_storybox{
	float : left ;
	width: calc( 100% - 330px );
}
.ul_company_catch{
	color : #005B9A ;
}

.ul_company_name{
	width: 100% ;
	font-size: 32px ;
	border-bottom : 2px solid #cfe4f6 ;
	padding-bottom : 10px ;
	margin-top : 10px ;
	color : #005B9A ;
	line-height: 1.4;
}

.ul_company_add{
	margin-top : 10px ;
}

.ul_company_logo{
	width: auto ;
	max-width: 100% ;
	margin-top : 20px ;
}

.ul_company_link{
	color : #19A7CE ;
	margin-top : 10px ;
}
.ul_company_link span{
	border-bottom : 1px dashed #19A7CE ;
}





.ul_company_work_title{
	width: 100% ;
	margin : 100px 0px 0px 0px ;
	background-color: #66bf72 ;
	border-radius: 100px ;
	padding : 12px 20px ;
	color : #FFFFFF ;
	font-size: 20px ;
	padding-left : 100px ;
}
.ul_company_work_title.pink{
	background-color: #f27173 ;
}

.ul_company_work_img{
	position: absolute ;
	top : 50% ;
	left : 10px ;
	transform: translate(0%,-50%);
	width: 80px ;
}

.ul_company_work_baloon{
	display: none ;
}

.ul_company_work_flex{
	width: 100% ;
	margin : 20px auto 0px ;
}

.ul_company_work_item{
	width: 50% ;
}
.ul_company_work_item.long{
	width: 100% ;
}


.ul_company_work_item:nth-child(1){
	padding : 0px 20px 20px 0px ;
}
.ul_company_work_item:nth-child(2){
	padding : 0px 0px 20px 20px ;
	border-left : dashed 2px #019267 ;
}
.ul_company_work_item:nth-child(3){
	padding : 20px 20px 20px 0px ;
	border-top : dashed 2px #019267 ;
}
.ul_company_work_item:nth-child(4){
	padding : 20px 0px 20px 20px ;
	border-left : dashed 2px #019267 ;
	border-top : dashed 2px #019267 ;
}
.ul_company_work_item:nth-child(5){
	padding : 20px 20px 0px 0px ;
	border-top : dashed 2px #019267 ;
}


.ul_company_work_hr{
	border-top : dashed 2px #019267 ;
	width: 100% ;
	margin : 20px 0px ;
}


.ul_company_supacer{
	width: 100% ;
	height: 100px ;
}



.ul_company_work_item_title{
	width: 100% ;
	padding : 4px 10px ;
	border : 1px solid #66bf72 ;
	color : #281e1c ;
	border-radius: 50px ;
	margin-bottom : 10px ;
}

.ul_company_work_item_img{
	float : left ;
	width: 160px ;
}
.ul_company_work_item_img.double{
	width: 250px ;
	margin-right : 10px ;
}
.ul_company_work_item_img.wide{
	width :  100% ;
	margin-bottom : 10px ;
}
.ul_company_work_item_img.widelong{
	width :  400px ;
	margin-bottom : 10px ;
}

.ul_company_work_item_story{
	float : right ;
	width: calc( 100% - 170px );
}
.ul_company_work_item_story.double{
	width: calc( 100% - 520px );	
}
.ul_company_work_item_story.wide{
	width: 100% ;	
}
.ul_company_work_item_story.widelong{
	width: calc( 100% - 420px );	
}

.ul_company_work_item_story.noimage{
	width: 100% ;
}


.ul_company_extra{
	margin-top : 20px ;
}

.ul_company_extra_img{
	float : right ;
	margin-left : 10px ;
	width : auto ;
	height: 160px ;
}


.ul_company_work_addstory{
	margin-top : 20px ;
}



.words_itembox{
	width: 100% ;
	padding : 20px ;
	border : 2px dotted #146C94 ;
	margin-bottom : 20px ;
	border-radius: 32px ;
}

.words_title{
	font-size: 24px ;
	margin-bottom : 10px ;
	border-bottom : 2px dotted #036EB8 ;
}

.words_story{
	padding-left : 40px ;
	color : #036EB8 ;
}


.footer_back_hill{
	position: absolute;
	bottom : 0% ;
	left: 0% ;
	width: 100% ;
	z-index: 0 ;
}



.ul_company_spacer{
	width: 100% ;
	height: 80px ;
}


.quiz_superbox{
	padding : 400px 0px ;
}


.quiz_title{
	font-size: 32px ;
	text-align: center ;
}

.quiz_story{
	width: 100%;
	max-width: 960px ;
	margin : 20px auto 0px; 
	padding: 20px 40px ;
	text-align: center ;
	border-top : 2px solid #333333 ;
}


.quiz_stage{
	width: 100% ;
	max-width: 960px ;
	height: 800px ;
	margin : 100px auto 0px;
	background-color: #FFFFFF ;
	border-radius: 40px ;
	box-shadow: 0px 0px 8px #FFFFFF ;
	padding: 0px 20px ;
	overflow: hidden ;
}



.quiz_startbtn{
	position: absolute;
	top : 50% ;
	left : 50% ;
	transform: translate(-50%,-50%);
	width: 320px ;
	height: 80px ;
	line-height: 72px ;
	border-radius: 40px ;
	border : 4px solid #FFFFFF ;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.25);
	background-color: #F266AB ;
	text-align: center ;
	font-size: 24px ;
	color : #FFFFFF ;
	cursor: pointer ;
	z-index:  4 ;
}
.quiz_startbtn:hover{
	opacity: 0.75;
}



.quiz_lenbox{
	position: absolute;
	top : 26px ;
	left : 26px ;
	width: 100px ;
	height: 100px ;
	line-height: 22px ;
	font-size: 14px ;
	border-radius: 50% ;
	background-color: #2CD3E1 ;
	color: #FFFFFF ;
	text-align: center ;
	padding-top : 16px ;
	z-index:  3 ;
}

.quiz_lennum{
	font-size: 24px ;
}
.quiz_lenbox div{
	z-index: 4 ;
}
.quiz_len_star{
	position: absolute; 
	top : 50% ;
	left: 50% ;
	width: 160px ;
	transform: translate(-50%,-50%);
	opacity: 0 ;
	z-index: 3;
}

.quiz_qtitle{
	text-align: center ;
	height: 100px ;
	line-height: 100px ;
	font-size: 32px ;
	z-index:  4 ;
}

.quiz_item{
	padding : 0px 20px 0px ;
	display: none ;
	z-index:  4 ;
}

.quiz_qbox{
	background-color: #d2ffe1;
	padding : 10px 20px ;
	margin-bottom : 10px ;
	border-radius: 16px ;
	opacity: 0 ;
	z-index:  4 ;
}




.quiz_item .quiz_qbox:nth-child(1){
	background-color: #f2ffd2;
}
.quiz_item .quiz_qbox:nth-child(2){
	background-color: #d2ffe1;
}
.quiz_item .quiz_qbox:nth-child(3){
	background-color: #d2f9ff;
}
.quiz_item .quiz_qbox:nth-child(4){
	background-color: #e3d2ff;
}
.quiz_item .quiz_qbox:nth-child(5){
	background-color: #ffd2ee;
}


#quiz_job{
	position: relative ;
	display: block ;
	border : none ;
	border-radius: 20px ;
	width: 100% ;
	max-width: 460px ;
	height: 100px ;
	margin : 20px auto 0px ;
	-webkit-appearance : none ;
	text-align: center ;
	background-color: #BFDB38 ;
	border : 4px solid #FFFFFF ;
	box-shadow: 0px 4px 0px rgba(0,0,0,0.25);
	z-index:  4 ;
}


.quiz_ans{
	width: 320px ;
	height: 80px ;
	line-height: 72px ;
	border-radius: 40px ;
	border : 4px solid #FFFFFF ;
	background-color: #BFDB38 ;
	text-align: center ;
	font-size: 24px ;
	color : #FFFFFF ;
	cursor: pointer ;
	margin : 20px auto 0px ;
	box-shadow: 0px 4px 0px rgba(0,0,0,0.25);
	z-index:  4 ;
}
/**
.quiz_ans:hover{
	opacity: 0.75;
}
**/

.quiz_job_wrap{
	display: none ;
	z-index:  4 ;
}


.quiz_perfect_superbox,
.quiz_result_superbox{
	position: absolute;
	top : 50% ;
	left: 50% ;
	transform: translate(-50%,-50%);
	width: 100% ;
	display: none ;
	z-index:  4 ;
}
.quiz_perfect_illust{
	position: absolute;
	top : 50% ;
	left : 50% ;
	transform: translate(-50%,-50%);
	z-index: 4 ;
	width: 100% ;
	opacity: 0.5 ;
}

.quiz_result_chara{
	position: absolute;
	bottom : -54px ;
	left : -80px ;
	width: 160px;
	margin :0px auto ;
	z-index:  5 ;
}

.quiz_result{
	text-align: center ;
	font-size: 32px ;
	z-index:  5 ;
}

.quiz_retry{
	width: 320px ;
	height: 80px ;
	line-height: 72px ;
	border-radius: 40px ;
	border : 4px solid #FFFFFF ;
	background-color: #D61355 ;
	text-align: center ;
	font-size: 24px ;
	color : #FFFFFF ;
	cursor: pointer ;
	margin : 20px auto 0px ;
	box-shadow: 0px 4px 0px rgba(0,0,0,0.25);
	z-index:  5 ;
}
.quiz_retry:hover{
	opacity: 0.75;
}


.quiz_correct_box{
	position: absolute;
	bottom: 0px ;
	left : 50% ;
	transform: translate(-50%,0);
	width: 320px ;
	height: 320px ;
	z-index: 1 ;
}


.quiz_back_fail,
.quiz_back_correct{
	position: absolute;
	top : 0px ;
	left: 0% ;
	width: 100% ;
	z-index: 1 ;
	opacity: 0 ;
}
.quiz_text_fail,
.quiz_text_correct{
	position: absolute;
	top : 0px ;
	left: 0px ;
	width: 100% ;
	z-index: 2 ;
	opacity: 0 ;
}


.quiz_stageillust{
	position: absolute;
	bottom: 0px ;
	left: 0px ;
	width: 320px ;
	z-index: 1 ;
}



.quiz_charabox{
	position: absolute;
	bottom: 0px ;
	right : 0px ;
	width: 320px ;
	height: 460px ;
	z-index: 1 ;
}

.quiz_chara_wait{
	position: absolute ;
	top : 0px ;
	left :0px ;
	width: 100% ;
	z-index: 2 ;
}
.quiz_chara_correct,
.quiz_chara_fail{
	position: absolute ;
	top : 0px ;
	left :0px ;
	width: 100% ;
	z-index: 2 ;
	opacity: 0 ;
}


.quiz_table{
	position: absolute;
	top : 0% ;
	left: 0%;
	width: 100% ;
	z-index: 1 ;
}
















/**************************************************************************************/
/**************************************************************************************/
/* TB Site*/
/**************************************************************************************/
/**************************************************************************************/
@media screen and (max-width: 1000px) {






.frame_t{
}
.frame_t img{
}

.frame_r{
}
.frame_r img{
}

.frame_b{
}
.frame_b img{
}

.frame_l{
}
.frame_l img{
}














.fv_superbox{
	height : 980px ;
}


.fv_sky{
}

.fv_ground_wrap{
}
.fv_ground{
}

.fv_mt_wrap{
}
.fv_mt{
}


.fv_heart_wrap{
	top : 100px ;
}

.fv_heart{
}

.fv_sun{
}
.fv_poyo{
	width: 150px ;
}

.fv_title{
}
.fv_title01{
}
.fv_title02{
}
.fv_title03{
}
.fv_title04{
}
.fv_title05{
}

.fv_txt_kagoshima{
}

.fv_txt_titleen{
}

.fv_txt_2022{
}





.top_catch{
	font-size: 24px ;
}

.select_youtube{
}

.select_superbox{
}

.select_itembox_wrap{
	width: 240px ;
}






.select_itembox_dashed{
}

.select_itembox{
}
.select_itembox_wrap01 .select_itembox{
}
.select_itembox_wrap02 .select_itembox{
}
.select_itembox_wrap03 .select_itembox{
}
.select_itembox_wrap04 .select_itembox{
}


.select_item_story{
	font-size: 24px ;
}







.footer{
	padding : 100px 40px 80px ;
}

.footer_ground{
}


.footer_title{
}

.footer_image_superbox{
	width: 100% ;	
	max-width: 800px ;
	margin : 40px auto 0px;
	border-bottom : 2px solid #DD0000 ;
}

.footer_imagebox{
}
.footer_imagebox img{
}
.footer_poyo img{
}

.footer_catch{
}
.footer_catch span{
}

.footer_logo{
}

.footer_copy{
	margin : 15px auto 0px ;
}







.judge_section{
	width: 100% ;
	padding : 200px 0px ;
	/** background-color: #38E54D ; **/
}

.judege_title{
	font-size: 32px ;
}
.judege_title.follow{
}

.judge_superbox{
	height : 720px ;
}


.judge_qbox{
	padding : 100px 40px 0px;
}
.judge_q_title{
}
.judge_q_num{
}


.judge_ansbox{
	margin : 0px auto ;
}
.judge_q_result .judge_ansbox{
}
.judge_yes{
	width: 100% ;
	height : 80px ;
	margin-top : 40px ;
}
.judge_no{
	width: 100% ;
	height : 80px ;
	margin-top : 40px ;
}

.judge_ans_wrap{
}
.judge_ans_wrap:hover{
}
.judge_btn_reset{
	top : 10px ;
	right : 10px ;
	width: 160px ;
}

.judge_back{
}



.genre_superbox{
}

.genre_title{
	font-size: 30px ;
}

.genre_story{
	margin-bottom : 80px ;
}
.chara{
	width: 160px ;
}
.chara img{
}
.chara_job{
	width: 95%;
	font-size: 16px ;
	height: 100px ;
	line-height: 18px ;
}
.chara_job_small{
	font-size: 14px ;
}
.chara_job_wrap{
	word-break: break-word;
}


/** list ============================ **/

.list_superbox{
	padding : 40px ;
}

.list_item{
	width: 100% ;
	padding : 0px 0px 0px 80px ;
	margin : 0px 0px 40px ;
	font-size: 24px ;
}

.list_item_num{
	width: 60px ;
	height: 60px ;
	line-height: 60px ;
}

.list_item_name{
}

.list_item.viewed .list_item_num{
}
.list_item.viewed .list_item_name{
}


.list_item_company{
	font-size: 20px ;
	z-index: 4 ;
}

.list_item_marker{
}





/** detail ============================ **/

.detail_superbox{
}

.ul_superbox{
}

.ul_closebtn{
}


.ul_title{
	height : auto ;
	padding : 10px 80px 10px 100px ;
	border-radius: 40px ;
}

.ul_title_num{
	left : 0px ;
}

.ul_title_poyo{
	right : -40px ;
}


.ul_catch_superbox{
	padding-left : 20px ;
}


.ul_catch_superbox02{
	width: 100% ;
	margin : 40px auto ;
}

.ul_catch_superbox02 img{
	width: 100% ;
	margin : 0px auto ;
}





.ul_title_person{
}

.ul_catch{
	padding-left : 140px ;
}

.ul_catch_border{
	width: calc( 100% - 140px );
	margin-left : 140px ;
}

.ul_catch_story{
	float : none ;
	width : 100% ;
	padding-left : 140px ;
}

.ul_catch_image{
	float : none ;
	width : 100% ;
	max-width: 640px ;
	height : auto ;
	margin : 20px auto 0px ;
}
.ul_catch_image img{
	width: 100% ;
	height: auto ;
	object-fit: none ;
	margin : 0px auto ;
}



.ul_about_title{
	height : auto ;
	line-height: 1.2 ;
	font-size: 24px ;
	padding : 20px 52px 20px 52px ;
	margin : 80px auto 0px ;
}


.ul_about_imagel{
}
.ul_about_imager{
	top : -56px ;
	right : -30px ;
}


.ul_about_flex{
}


.ul_about_item{
	width: 100% ;
	padding : 20px ;
	margin-bottom : 20px ;
}
.ul_about_item.long{
}

.ul_about_item_title{
	font-size: 24px ;
	border-bottom : 4px solid #ea5414 ;
}

.ul_about_item_story{
	float : none ;
	width: 100% ;
	margin-top : 20px ;
}

.ul_about_item_image{
	float : none ;
	width: 100% ;
	max-width: 640px ;
	margin : 20px auto 0px ;
}
.ul_about_item_image img{
}


.ul_checkbox_flex{
	margin : 80px auto 0px ;
}

.ul_checkbox{
	width: 100% ;
	padding : 40px ;
}

.ul_checkbox_title{
	margin-bottom : 20px ;
}

.ul_checkbox_title_img{
}

.ul_checkbox_story_img{
}

.ul_checkbox_story li{
}
.ul_checkbox_story li:before{
}


.ul_otherbox{
	width: 100% ;
	padding : 40px ;
	margin-top : 40px ;
}

.ul_otherbox_title{
}

.ul_otherbox_title_img{
}

.ul_otherbox_story_img{
}

.ul_otherbox_story{
}
.ul_otherbox_story span{
}
.ul_otherbox_story span:before{
}



.ul_company_supebox{
	border : 4px solid #91b8d8;
}


.ul_company_teached{
	right : auto ;
	left : 50% ;
	transform: translate(-50%,0%);
}

.ul_company_teached_icon{
}
.ul_company_teached_baloon{
}

.ul_company_photobox{
	float : none ;
	width: 100% ;
	max-width: 640px ;
	margin : 0px auto 20px ;
}

.ul_company_photo{
}

.ul_company_storybox{
	float : none ;
	width: 100% ;
}
.ul_company_catch{
}

.ul_company_name{
	border-bottom : 4px solid #cfe4f6 ;
	padding-bottom : 20px ;
	margin-top : 20px ;
}

.ul_company_add{
}

.ul_company_logo{
}

.ul_company_link{
}
.ul_company_link span{
	border-bottom : 2px dashed #19A7CE ;
}





.ul_company_work_title{
	font-size: 24px ;
}

.ul_company_work_img{
}

.ul_company_work_baloon{
}

.ul_company_work_flex{
}

.ul_company_work_item{
	width: 100% ;
}
.ul_company_work_item.long{
}


.ul_company_work_item:nth-child(1){
	padding : 20px 0px 20px 0px ;
}
.ul_company_work_item:nth-child(2){
	padding : 20px 0px 20px 0px ;
	border-left : none ;
	border-top : dashed 2px #019267 ;
}
.ul_company_work_item:nth-child(3){
	padding : 20px 0px 20px 0px ;
	border-top : dashed 2px #019267 ;
}
.ul_company_work_item:nth-child(4){
	padding : 20px 0px 20px 0px ;
	border-left : none ;
	border-top : dashed 2px #019267 ;
}
.ul_company_work_item:nth-child(5){
	padding : 20px 0px 20px 0px ;
	border-top : dashed 2px #019267 ;
}


.ul_company_work_hr{
}


.ul_company_supacer{
}



.ul_company_work_item_title{
}

.ul_company_work_item_img{
	float : none ;
	width: 100% ;
	max-width: 640px ;
	margin : 0px auto ;
}
.ul_company_work_item_img.double{
	width: 100% ;
	max-width: 640px ;
	margin : 0px auto ;
}
.ul_company_work_item_img.wide{
	width: 100% ;
	max-width: 640px ;
	margin : 0px auto ;
}
.ul_company_work_item_img.widelong{
	width: 100% ;
	max-width: 640px ;
	margin : 0px auto ;
}

.ul_company_work_item_story{
	float : none ;
	width: 100% ;
	margin-top : 20px ;
}
.ul_company_work_item_story.double{
	width: 100% ;
	margin-top : 20px ;
}
.ul_company_work_item_story.wide{
	width: 100% ;
	margin-top : 20px ;
}
.ul_company_work_item_story.widelong{
	width: 100% ;
	margin-top : 20px ;
}

.ul_company_work_item_story.noimage{
	width: 100% ;
	margin-top : 0px ;
}


.ul_company_extra{
}

.ul_company_extra_img{
	float : none ;
	margin : 0px auto 20px ;
	width : auto ;
	max-width: 100% ;
	height: auto ;
}


.ul_company_work_addstory{
}









.words_itembox{
	border : 4px dotted #146C94 ;
}

.words_title{
	border-bottom : 4px dotted #146C94 ;
}

.words_story{
}




.quiz_stage{
	height: 960px ;
}








} /** @media ====================================================== **/