@charset "UTF-8";

/* -------------------------------------------------
    File name : style.css
---------------------------------------------------- */

/* =============================
	cover
=============================== */
#t3career .cover .hero h1 img {
	width: 100%;
	height: auto;
}

/* cta */
#t3career .cover .top-cta {
	display: flex;
	flex-wrap: wrap;
}
#t3career .cover .top-cta a {
	padding: 0 .5em;
}
#t3career .cover .top-cta a img {
	width: auto;
	height: 73px;
}

@media (max-width: 767px) {
	#t3career .cover .top-cta {
		display: none;
	}
}

/* =============================
	note1
=============================== */
#t3career .note1 {
	padding: 50px 0;
	text-align: center;
}

@media (min-width: 768px) {
	#t3career .note1 figure {
		width: 500px;
		margin: auto;
	}
	#t3career .note1 figure img {
		width: 500px;
		height: auto;
	}
	#t3career .note1 p {
		padding: 20px 0;
		line-height: 1.8em;
	}
	#t3career .note1 p span {
		display: block;
	}
}
@media (max-width: 767px) {
	#t3career .note1 figure {
		width: 90%;
		margin: auto;
	}
	#t3career .note1 figure img {
		width: 100%;
		height: auto;
	}
	#t3career .note1 p {
		padding: 20px 0;
		line-height: 1.8em;
	}
	#t3career .note1 p em {
		display: block;
	}
}


/* =============================
	note2
=============================== */
@media (min-width: 768px) {
	#t3career .note2 .great_sp {
		display: none;
	}
	#t3career .note2 figure {
		width: 600px;
		margin: auto;
	}
	#t3career .note2 figure img {
		width: 600px;
		height: auto;
	}
	#t3career .note2 .board {
		width: 675px;
		margin: auto;
		padding: 30px;
		background-color: rgb(223,79,102);
		border-radius: 50px;
		position: relative;
		bottom: 160px;
	}
	#t3career .note2 h2 {
		color: #fff;
		line-height: 1.6em;
		font-size: 1.3em;
		font-weight: 300;
		text-align: center;
		margin-bottom: 20px;
	}
	#t3career .note2 h2 span {
		display: block;
	}
	#t3career .note2 ul {
		background-color: rgb(255,255,255);
		border-radius: 20px;
		padding: 10px;
	}
	#t3career .note2 li {
		list-style-type: decimal;
		list-style-position: inside;
		text-align: center;
		font-weight: 900;
		font-size: 1.3em;
		line-height: 1.6em;
	}
}
@media (max-width: 767px) {
	#t3career .note2 {
		margin-bottom: -100px;
	}
	#t3career .note2 .great_pc {
		display: none;
	}
	#t3career .note2 figure {
		width: 100%;
		margin: auto;
	}
	#t3career .note2 figure img {
		width: 100%;
		height: auto;
	}
	#t3career .note2 .board {
		width: 100%;
		margin: auto;
		padding: 30px 20px;
		background-color: rgb(223,79,102);
		position: relative;
		bottom: 120px;
	}
	#t3career .note2 h2 {
		color: #fff;
		line-height: 1.6em;
		font-size: 1.2em;
		font-weight: 300;
		text-align: center;
		margin-bottom: 20px;
	}
	#t3career .note2 h2 span {
		display: block;
	}
	#t3career .note2 ul {
		background-color: rgb(255,255,255);
		border-radius: 20px;
		padding: 15px;
	}
	#t3career .note2 li {
		list-style-type: decimal;
		list-style-position: inside;
		text-align: center;
		font-weight: 900;
		font-size: 1em;
		line-height: 1.6em;
	}
}

#t3career .note2 li:last-child {
	list-style: none;
}
#t3career .note2 li strong {
	color: #df4f66;
}

/* =============================
	real
=============================== */
@media (min-width: 768px) {
	#t3career .real {
		padding: 100px 0;
		text-align: center;
		background-color: rgb(255,239,239);
	}
	#t3career .real p {
		padding: 1em;
	}
	#t3career .real h2 {
		padding: 15px;
		color: #fff;
		font-size: 1.3em;
		line-height: 1.6em;
		text-align: center;
		background-color: rgb(223,79,102);
		border-radius: 20px;
		margin-bottom: 1em;
	}
	#t3career .real figure img {
		width: 100%;
		height: auto;
		padding: 0 50px;
	}
	
	.real_movie {
		display: flex;
		justify-content: space-between;
		margin-top: 50px;
	}
	.real_movie > div {
		width: 48.5%;
	}
}
@media (max-width: 767px) {
	#t3career .real {
		padding: 30px 0;
		text-align: center;
		background-color: rgb(255,239,239);
	}
	#t3career .real p {
		padding: 1em;
	}
	#t3career .real h2 {
		padding: 15px;
		color: #fff;
		font-size: 1.3em;
		line-height: 1.6em;
		text-align: center;
		background-color: rgb(223,79,102);
		border-radius: 20px;
		margin-bottom: 1em;
	}
	#t3career .real h2 em {
		display: block;
	}
	#t3career .real figure img {
		width: 100%;
		height: auto;
		padding: 0 10px;
	}
}


/* =============================
	concept
=============================== */
#t3career .concept {
	text-align: center;
}
#t3career .concept h2 {
	padding: 15px;
	color: #fff;
	font-size: 1.2em;
	font-weight: 400;
	font-family: 'Noto Serif JP', serif;
	background-color: rgb(255,159,160);
}

@media (min-width: 768px) {
	#t3career .concept span {
		display: block;
	}
	#t3career .concept p {
		padding: 1.5em;
	}
}
@media (max-width: 767px) {
	#t3career .concept h2 em {
		display: block;
	}
	#t3career .concept span {
		display: inline;
	}
	#t3career .concept p {
		padding: 1.5em;
		text-align: left;
	}
}

#t3career .concept p strong {
	color: #df4f66;
}

@media (min-width: 768px) {
	#t3career .concept .flow_sp {
		display: none;
	}
}
@media (max-width: 767px) {
	#t3career .concept .flow_pc {
		display: none;
	}
}

#t3career .concept figure img {
	width: 90%;
	height: auto;
	margin-bottom: 60px;
}
#t3career .concept h3 {
	margin-top: 1.5em;
	color: #fe0000;
	font-weight: 900;
	font-size: 20px;
}
#t3career .concept h3:before {
	content: "\f167";
	font-family: "Fontawesome";
	font-size: 30px;
	vertical-align: middle;
	padding-right: 10px;
}
#t3career .concept .video .box {
	padding: 20px;
	background-color: rgb(254,0,0);
	border-radius: 20px;
}
#t3career .concept .video h4 {
	margin-bottom: 10px;
}
#t3career .concept .channel figure img {
	width: 100% !important;
	height: auto;
	margin: 20px auto !important;
}


/* =============================
	flow
=============================== */
#t3career .flow {
	text-align: center;
}
#t3career .flow h3 {
	margin: 65px auto;
	padding: 25px;
	color: #fff;
	font-size: 1.2em;
	font-weight: 400;
	font-family: 'Noto Serif JP', serif;
	background-color: rgb(255,159,160);
}

/* =============================
	catch
=============================== */
@media (min-width: 768px) {
	#t3career .catch {
		margin: 70px auto;
	}
}
@media (max-width: 767px) {
	#t3career .catch {
		margin: 30px auto 0;
	}
}

#t3career .catch figure img {
	width: 100%;
	height: auto;
}




/*--------------------------------------------------
	cta
---------------------------------------------------- */
@media (min-width: 768px) {
	#t3career .cta {
		margin: 115px auto; 
	}
	#t3career .cta .entry {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#t3career .cta .entry a {
		width: calc(100% / 2 - 30px);
	}
}
@media (max-width: 767px) {
	#t3career .cta {
		display: none; 
	}
}

#t3career .cta-fix {
	display: block;
	padding: 30px 0;
	position: relative;
	z-index: 9999;
	width: 100%;
	background-color: rgb(255,255,255);
}
#t3career .cta-fix .entry-fix {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#t3career .cta-fix .entry-fix a {
	width: calc(100% / 2 - 8px);
}

@media (min-width: 768px) {
	#t3career .cta-fix2 {
		display: none;
	}
}