@charset "utf-8";

/*------------------
  Basic HTML
------------------*/ 
:root {
	--bg: #ffffff;
	--card: #0b1220;
	--accent: #60a5fa;
	--muted: #666666;
}
body {
  opacity: 1;
}
/*------------------
  Type Check bunner
------------------*/ 
.check_bunner {
	border: solid 1px #999999;
	width: fit-content;
	margin:auto;
	padding: 1rem 4rem;
	border-radius: 4rem;
	cursor: pointer;
}
.check_bunner:hover {
	background-color: #f0f0f0
}
/*------------------
  Type Check Index
------------------*/ 
body.no-scroll {
  overflow: hidden;
}
.all_wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding-bottom:60px;
}
.typecheck_title {
	position:relative;
}
.typecheck_back {
	border: solid 1px #ccc;
}
.typecheck_title_inner {
	background-color: rgba(255, 255, 255, 0.7);
	width: 400px;
	padding: 20px;
	text-align: center;
	border-radius: 4px;
	font-size: 1.4rem;
	position: absolute;
	top:calc(50% - 125px);
	left:calc(50% - 200px);
}

.typecheck_title_inner_text {
	font-size: 16px;
	letter-spacing: 0;
}

p.type_c {
	width: 200px;
	margin: 1rem auto;
}
button.p.type_c {
	width: 200px;
}
	.rogo {
		width: 80%;
		margin: 0 auto 1rem;;
	}
	button.type_c {
		display:block;
		width: 100%;
		margin:auto;
	}
	p.type_c_m {
		display:none;
	}
@media (max-width: 1000px) { /* 画面幅が780px以下のとき */
	.typecheck_title {
		padding-left: 1rem;
		padding-right: 1rem;
	}
	.typecheck_title_inner {
		position: relative;
		left:0;
		background-color: transparent;
		width: 100%;
		max-width: 400px;
		padding: 0px;
		height: fit-content;
		margin: 0rem auto 2rem auto;
	}
	p.type_c {
		display:none;
	}
	p.type_c_m {
		display:block;
		margin-top: 2rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

.typecheck_m_title {
	background-color: rgba(255, 255, 255, 0.7);
	width: 400px;
	padding: 20px;
	text-align: center;
	border-radius: 4px;
	font-size: 1.4rem;
}
button.type_c {
	background-color:#EE7A00 !important;
	color: #fff;
	letter-spacing: 0.25rem;;
}
.bt_check_close {
	color: #fff;
	font-size: 2.4rem;
	display: block;
	cursor: pointer;
	position: absolute;
	top:40px;
	right:40px;
	z-index: 99999999;
}
.play_screen {
	display: none;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	background-color: rgb(0,0,0,0.8);
	position: fixed;
	top:0;
	left:0;
	z-index: 999999999;
}	
.play_screen_inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.testcard {
	width: 1240px;
	height: 720px;
	padding: 20px;
	border-radius: 6px;
	margin: auto;
	background-color: #fff;
}

/*------------------
  Type Check Testpage
------------------*/ 
section {
  display: none;
}
section.active { display: block; }
.ch_header {
}
.progress {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  margin: 20px 0;
  overflow: hidden;
}
.bar {
  height: 100%;
  width: 0;
  background: #0078ff;
  transition: width .4s;
}

.result {
  text-align: center;
  padding: 40px 20px;
}
.result h2 { font-size: 22px; margin-bottom: 10px; }
.result p { margin-bottom: 20px; }
.result a {
  display: inline-block;
  background: #0078ff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
}
.result a:hover { background: #005fcc; }

.card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
	width: 760px;
	max-width: 100%;
	border-radius: 12px;
	padding: 22px;
	box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6)
}
h1 {
	margin: 0 0 8px 0;
	font-size: 20px
}
p.lead {
	margin: 0 0 18px 0;
	color: var(--muted)
}
.question {
	margin-bottom: 18px
}
.q-title {
	font-weight: 600;
	margin-bottom: 8px
}
.options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px
}
.opt {
	background: rgba(255, 255, 255, 0.02);
	padding: 10px;
	border-radius: 8px;
	cursor: pointer;
	border: 1px solid transparent
}
.opt:hover {
	border-color: rgba(96, 165, 250, 0.12)
}
.opt.selected {
	background: linear-gradient(90deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.06));
	border-color: rgba(96, 165, 250, 0.22)
}
.controls {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 12px
}
button {
	background: var(--accent);
	border: 0;
	color: #072033;
	padding: 10px 14px;
	border-radius: 8px;
	font-weight: 700;
	cursor: pointer
}
button.ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--muted);
	font-weight: 600
}
.progress {
	height: 8px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 12px
}
.progress > i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--accent), #7dd3fc);
	width: 0%
}
.result {
	padding: 12px;
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
	border: 1px solid rgba(255, 255, 255, 0.03)
}
.result h2 {
	margin: 0 0 8px 0
}
footer {
	margin-top: 12px;
	color: var(--muted);
	font-size: 13px
}
@media (max-width:520px) {
	.options {
		grid-template-columns: 1fr
	}
}

#q1 {
	z-index: 5;
}
#q2 {
	z-index: 4;
}
#q3 {
	z-index: 3;
}
#q4 {
	z-index: 2;
}
#q5 {
	z-index: 1;
}
.ch_h1 {
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ch_h1 img {
	width: 240px;
	height: auto;
}
.ch_bar_box {
	width: 100%;
	height: 50px;
	background-color: #FFE3C3;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.ch_bar {
	width: 50%;
	background: white;
	border-radius: 80px;
}
.customProgress_01 {
	width: 20%;
	background: #EE7A00;
	height: 10px;
	border-radius: 80px;
}
.customProgress_02 {
	width: 40%;
	background: #EE7A00;
	height: 8px;
	border-radius: 80px;
}
.customProgress_03 {
	width: 60%;
	background: #EE7A00;
	height: 8px;
	border-radius: 80px;
}
.customProgress_04 {
	width: 80%;
	background: #EE7A00;
	height: 8px;
	border-radius: 80px;
}
.customProgress_05 {
	width: 100%;
	background: #EE7A00;
	height: 8px;
	border-radius: 80px;
}
.ch_bar_text {
	padding-right: 20px;
	padding-left: 18%;
}
.ch_bar_text p {
	font-weight: bold;
	color: #F39800;
	font-size: 20px
}
.ch_Qtext_box {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	padding-left: 18%;
}
.ch_Qtext_box p {
	text-align: left;
	font-weight: bold;
	font-size: 24px;
}
.ch_main_area {
	display: flex;
	width: 100%;
	height: calc(640px - 200px);
}
.ch_backbtn_box {
	position: absolute;
	top: calc(50% - 60px);
	left: 50px;
}
.ch_backbtn, .ch_backbtn02 {
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url("../img/type_check/ic_check_back.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 60px;
	height: 60px;
	line-height: 100px;
	overflow: hidden;
	transition: 0.2s;
	opacity: 0.5;
}
/**/ .ch_backbtn:hover, .ch_backbtn02:hover {
	opacity: 1;
}
.ch_backbtn img, .ch_backbtn02 img {
	width: 70px;
	height: 70px;
}
.ch_main_area02 {
	width: 60%;
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 18%;
}
.ch_main_area02 img {
	width: auto;
	height: 100% /*calc(100vh - 300px)*/ ;
	display: block;
}
.ch_main_area03 {
	width: 40%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 50px;
}
.ch_choosebox {
	display: block;
	max-height: 650px;
	width: 500px;
}
ul.ch_choose {
	padding: 0px;
	margin: 0;
}
li.ch_choose a {
	border: solid 3px #F39800;
	border-radius: 100px;
	font-weight: bold;
	font-size: 18px;
	padding: 20px 40px;
	margin: 10px 40px 0px 0px;
	text-align: left;
	display: inline-block;
	float: left;
	width: 90%;
	transition: .2s;
}
li.ch_choose a:hover {
	background: #FFE3C3;
	color: #EE7A00;
}
@media screen and (max-width: 768px) {
	.ch_main_area {
		display: block;
	}
	.ch_bar {
		width: 70%;
	}
	.ch_bar_text {
		padding-right: 0;
		width: auto;
		padding-left: 1.5rem;
	}
	.ch_main_area01 {
		width: 100%;
		display: block;
	}
	.ch_main_area02 {
		width: 100%;
		padding-left: 0;
	}
	.ch_main_area02 img {
		width: 100%;
		height: auto;
	}
	.ch_main_area03 {
		width: 100%;
	}
	.ch_choosebox {
		height: 650px;
		width: 100%;
		padding-left: 0;
		padding-bottom: 0;
		
	}
	.ch_Qtext_box {
		align-items: center;
		padding-left: 0px;
		padding-top: 1rem;
	}
	.ch_Qtext_box p {
		padding-left: 0;
	}
	.ch_backbtn_box {
		left: 15px;
		top: calc(50% - 40px);
	}
	.ch_backbtn, .ch_backbtn02 {
		width: 80px;
		height: 80px;
		line-height: 80px;
	}
	li.ch_choose a {
		width: 97%;
		margin: 10px auto 0px auto;
	}
}

.chre_all_wrap {
	max-width: 1100px;
	min-height: 650px;
	margin: 30px auto;
	position: relative;
	overflow: hidden;
	padding-bottom: 50px;
	overflow: hidden;
}
@media screen and (max-width: 1100px) {
	.chre_all_wrap {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}
.chre_h1 {
	width: 100%;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.chre_header_result {
	margin-top:20px;
}
.chre_header_result p {
	height: 80px;
	border: solid 2px #EE7A00;
	color: #EE7A00;
	border-radius: 4px;
	text-align: center;
	line-height: 80px;
	font-size: 2.5rem;
	font-weight: bold;
	letter-spacing: 1rem;
	margin-bottom: 2rem;
}
.chre_h1 img {
	width: 250px;
	height: auto;
	}
.chre_namebox {
	width: 100%;
	height: 60px;
	position: relative;
	margin-bottom: 2rem;
}
.chre_name01 {
	background: #EE7A00;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
	padding: 0px 30px;
	width: 350px;
	height: 60px;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 3;
}
.chre_name02 {
	background: #FFC588;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
	padding: 5px 60px;
	width: 350px;
	height: 60px;
	position: absolute;
	left: 30px;
	z-index: 2;
}
.chre_name03 {
	background: #FFE3C3;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
	padding: 5px 60px;
	width: 350px;
	height: 60px;
	position: absolute;
	left: 60px;
	z-index: 1;
}
@media screen and (max-width: 1100px) {
	.chre_name01 {
			width: 100%;
	}
	.chre_name02, .chre_name03 {
		display: none;
	}
}
p.chre_small {
	font-size: 10px;
	color: white;
}
p.chre_big {
	font-size: 20px;
	color: white;
	font-weight: bold;
}
.chre_mainarea {
	display: flex;
	width: 100%;
}
.chre_mainarea01 {
	width: 60%;
	position: absolute;
	bottom: 30px;
	left: 0;
}
.chre_text {
	width: 60%;
	padding-left: 30px;
}
.chre_text p {
	font-size: 1.6rem;
}
.chre_tag {
	width: 60%;
	margin-top: 10px;
	padding-left: 30px;
}
.chre_tag p {
	font-weight: bold;
	color: #EE7A00;
	margin-top: 5px;
	margin-right: 5px;
	padding: 10px 20px;
	display: inline-block;
	background: #FFE3C3;
	border-radius: 50px;
	font-size: 1.6rem;
}
.chre_tag p:before {
	content: "#";
	font-weight: bold;
	padding-right: 2px;
}
.chre_othertitle {
	position: relative;
}
p.chre_othertitle {
	font-weight: bold;
	padding-bottom: 1rem;
	padding-left: 30px;
	font-size: 20px;
}
.chre_otherarea {
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	padding-left: 30px;
	font-size:1.4rem;
}
.chre_otherarea > div:hover {
    cursor:pointer;
	transform: scale(1.03);
	transition: 0.2s ease-out;
}
.chre_otherbox {
	width: calc(100% / 4);
	position: relative;
	border-radius: 15px;
	padding: 15px 15px;
	/*box-shadow: 0px 2px 3px #999;*/
}
.chre_otherbox a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	border-radius: 15px;
}
.box_genko {
	/*background: #C3BBDB;*/
	border: solid 3px #C3BBDB;
}
.box_hensyu {
	/*background: #B0E5B6;*/
	border: solid 3px #B0E5B6;
}
.box_visual {
	/*background: #F5BDD0;*/
	border: solid 3px #F5BDD0;
}
.box_3D {
	/*background: #A6CCEC;*/
	border: solid 3px #A6CCEC;
}
.box_manual {
	/*background: #F7E084;*/
	border: solid 3px #F7E084;
}
.chre_otherbox p {
	font-weight: bold;
	text-align: left;
	height: 2em;
	font-size: 1.4rem;
}
.chre_otherbox img {
	max-width: 100%;
	height: 120px;
	margin: auto;
	display: block;
}
.chre_mainarea02 {
	width: 40%;
	position: absolute;
	right: 0px;
	bottom: 30px;
	padding-left: 50px;
	text-align: center;
	display: flex;
	align-items: center;
	}
.chre_mainarea02 img {
		height: 500px;
		max-width: 100%;
}
.check_bunner {
	text-align: center;
	margin-bottom:50px;
}
@media screen and (max-width: 768px) {
	.chre_all_wrap {
		margin: 0px auto ;
		height: auto;
		border: none;
	}
	.chre_namebox {
		margin-bottom: 1rem;
	}
	.chre_text {
		width: 100%;
		margin-bottom: 1rem;
		padding: 0;
	}
	.chre_tag {
		width: 100%;
		margin-bottom: 4rem;
		padding: 0;
	}
	.chre_tag p {
		font-size: 16px;
	}
	.chre_mainarea01 {
		width: 100%;
		position: static;
	}
	.chre_mainarea02 {
		width: 100%;
		position: static;
		text-align: center;
		margin-bottom: 2rem;
		padding-left: 0px;
	}
	.chre_mainarea02 img {
		width: 50%;
		height: auto;
		margin: auto;
		display: block;
	}
	p.chre_othertitle {
		padding-bottom: 1rem;
		padding-left: 0;
	}
	.chre_otherarea {
		width: 100%;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: flex-start;
		padding: 0px;
	}
	.chre_otherbox {
		width: calc(50% - 10px) ;
		padding: 15px;
	}
	.chre_otherbox p {
		height: auto;
		padding-bottom: 10px;
	}
	.chre_otherbox img {
		width: auto;
		max-height: 90%;
	}
	.testcard {
		width: 95%;
		height: 80vh;
		height: 80svh;
		padding: 10px 0px 10px 10px;
		overflow: hidden;
	}
	.bt_check_close {
		top: 0;
		right: 10px;
		font-size: 4rem;
	}
}
.re_job {
	font-size: 1.2rem;
	background-color: #f0f0f0;
	padding:0.25rem 1rem;
	border-radius: 6px;
}
.re_job:before {
	content:"→";
	margin-right: 0.25rem;
}

.all_wrap_about{
	margin-top: 25px;
}