@charset "UTF-8";

.ft_din {
	font-family: "din-2014", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: .15em;
}

.f_copyright {
	font-family: "source-han-sans-jp-variable", sans-serif;
	font-variation-settings: "wght" 500;
}


/*---------------------------------------------------------
 color
---------------------------------------------------------*/
#skill_up .com_title2 {	color: #354273;}
#skill_up .com_title2 h2::first-letter {color: #3ea0cb;}
#support .com_title2 h2::first-letter {color: #fb9c97;}
#work_style .com_title2 h2::first-letter {color: #fff091;}

#work_style {
	--workstyle-bg: #c5884c;
}
#guidelines {
	--guidelines-bg: #f6e4c8;
}
.com_form {
	--btn-color: #eda854;
}
#entry {
	--entry-bg: #57544C;
}

/*---------------------------------------------------------
 title
---------------------------------------------------------*/
.com_h__en {
	font-size: min(12vw,8.82rem);
	letter-spacing: normal;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
#guidelines .com_h__en,
#entry .com_h__en {
	font-size: min(10vw,6.47rem);
	margin-bottom: .2em;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.com_h__en {
	font-size: 16vw;
}
.com_title1 .com_h__en {
	font-size: 14vw;
}
#entry .com_h__en {
	margin-bottom: .3em;
}
}


/* ========================================================
  
  common

======================================================== */
.com_bg__color {
	background-color: #fcfcf6;
}
/* obj_grd */
.obj_grd {
	position: absolute;
	content: "";
	background: radial-gradient(rgba(255,255,207,1) 0, rgba(255,236,149,0) 80%);
	width: 65vw;
	max-width: 964px;
	aspect-ratio: 1;
}
/* img_blur */
.img_blur {
	position: relative;
	max-width: max-content;
}
.img_blur img {
	border-radius: 10px;
}
.img_blur::before {
	position: absolute;
	content: "";
	inset: 0;
	width: 100%;
	height: 100%;

	background-image: var(--img);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

	filter: blur(15px);
	z-index: -1;
	translate: 25px 25px 0;
	transition-property: translate, opacity;
	transition-duration: 1s;

	will-change: filter;
}
.anime_on .img_blur::before {
	translate: 35px 35px 0;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
/* obj_grd */
.obj_grd {
	width: 130vw;
}
/* img_blur */
.img_blur img {
	border-radius: 6px;
}
.img_blur::before {
	filter: blur(10px);
	translate: 10px 10px;
}
.anime_on .img_blur::before {
	translate: 15px 15px;
}
}



/* ========================================================
  
  FV

======================================================== */
.m_img_area {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 20px;
}
.m_img_list > li {
	position: absolute;
	max-width: max-content;
	translate: -50% -50%;
	opacity: 0;
	transition: opacity 1s;
}
.m_img_list > li.img2 {	transition-delay: .2s;}
.m_img_list > li.img3 {	transition-delay: .4s;}
.m_img_list > li.img4 { transition-delay: .6s;}

.m_img_area.anime_on .m_img_list > li {
	opacity: 1;
}

.m_copy_wrap {
	position: relative;
}
/* background */
.m_img_area .obj_grd {
	left: 0;
	top: 0;
	translate: -30% -30%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.m_img_list > li.img1 {
	width: 57vw;
	left: 50%;
	top: 50%;
}
.m_img_list > li.img2 {
	width: 16vw;
	left: 92%;
	top: 23%;
}
.m_img_list > li.img3 {
	width: 30vw;
	left: 76%;
	top: 70%;
}
.m_img_list > li.img4 {
	width: 17vw;
	left: 8%;
	top: 55%;
}

.m_copy_wrap {
	display: flex;
	align-items: flex-end;
}
.m_copy {
	width: 66%;
	margin-bottom: max(-8%,-150px);
}
.m_point {
	width: 34%;
	margin-left: -8%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.m_img_list > li.img1 {
	width: 79vw;
	left: 50%;
	top: 45%;
}
.m_img_list > li.img2 {
	width: 25vw;
	left: 70%;
	top: 10%;
}
.m_img_list > li.img3 {
	width: 44vw;
	left: 78%;
	top: 74%;
}
.m_img_list > li.img4 {
	width: 29vw;
	left: 15%;
	top: 90%;
}

.m_copy {
	width: 100%;
	margin-left: -8%;
}
.m_point {
	margin: -6% 5% auto auto;
}
/* background */
.m_img_area .obj_grd {
	translate: -50% -20%;
}
}



/* ========================================================
  
  contents

======================================================== */

/*---------------------------------------------------------
 lead
---------------------------------------------------------*/
.lead_copy {
	margin-bottom: 5%;
}
.lead_img_list {
	display: flex;
	align-items: flex-start;
}
.lead_img_list .img1 {
	width: 71%;
}
.lead_img_list .img2 {
	width: 43%;
	margin-left: -14%;
}

#lead .obj_grd {
	right: 0;
	bottom: 0;
	translate: 30% 30%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.lead_inbox {
	display: flex;
	padding: 0 8.6% min(5.4vw,80px);
}
.lead_inbox .box_img {
	width: 51%;
	translate: -20% 0;
}
.lead_inbox .box_txt {
	width: 49%;
	margin-top: 5%;
}
.lead_img_list .img2 {
	margin-top: 30%;
}

#lead .com_bg__color {
	height: calc(100% + 300px);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.lead_inbox {
	padding-bottom: 12%;
}
.lead_inbox .box_img {
	width: 86%;
	margin: 0 auto 10%;
}
.lead_img_list .img1 {
	margin-top: 15%;
}
.lead_inbox .box_txt {
	padding: 0 8%;
}
}


/*---------------------------------------------------------
 support
---------------------------------------------------------*/
.support_flex ul li.bg_red {
	background-image: url("../images/tc/support_bg4@2x.jpg");
}
.support_flex ul li.bg_ppl {
	background-image: url("../images/tc/support_bg2@2x.jpg");
}
.support_flex ul li.bg_olive {
	background-image: url("../images/tc/support_bg3@2x.jpg");
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
#support .support_txt {
	margin-top: -8%;
}
}


/*---------------------------------------------------------
 work_style
---------------------------------------------------------*/
#work_style .work_style_bg::before {
	height: min(22vw,300px);
	background-image: linear-gradient(to right,  rgba(203,148,94,1) 0%,rgba(203,148,94,0) 100%);
}
#work_style .work_style_tit {color: #e2c3a5;}
#work_style .com_h__en {color: #d9b28b;}
#work_style .work_deco {color: rgba(235,213,192,0.5);}

.sche_list::before {background-color: #b46314;}
.sche_list > li {	background-color: #ce9a67;}
.sche_list > li dt {color: #fff091;}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
#work_style .work_inbox {
	width: 90%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#work_style .work_style_bg::before {
	height: 32vw;
}
#work_style .com_title2 {
	width: 95%;
}
#work_style .com_title2 .com_h__en {
	font-size: 14vw;
}
}


/* work_style: carrer
---------------------------------------------------------*/
.career_box {
	position: relative;
	color: var(--color-base);
	background-color: #fff;
	box-sizing: border-box;
	padding: 3.2% 6.7% 4% 20%;
	border-radius: 10px;
	margin-bottom: 15px;
}
.career_box:last-of-type {
	margin-bottom: 0;
}
/* year */
.career_box .year {
	position: absolute;
	width: 8em;
	height: 100%;
	text-align: center;
	color: #6e5447;
	font-size: min(1.4vw,88%);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	white-space: nowrap;
	background-color: #fff091;
	box-sizing: border-box;
	padding: 2.5em 1%;
	left: 5%;
	top: 0;
}
.career_box .year::before {
	position: absolute;
	content: "";
	background-color: inherit;
	width: 100%;
	height: 1.8em;
	left: 0;
	top: calc(100% - 1px);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	z-index: 1;
}
.career_box:last-of-type .year::before {
	display: none;
}
.career_box .year > span:nth-of-type(1) {
	display: block;
	padding-bottom: .4em;
	border-bottom: 1px dashed currentColor;
}
.career_box .year > span:nth-of-type(2) {
	font-size: 123%;
}
.career_box .year > span:nth-of-type(2) span {
	font-size: 234%;
	vertical-align: -0.1em;
	margin-right: .1em;
}
.career_box:nth-of-type(2) .year {	background-color: #ffdb91;}
.career_box:nth-of-type(3) .year {	background-color: #ffc191;}
.career_box:nth-of-type(4) .year {	background-color: #ff9a91;}

/* contents */
.career_box .index {
	font-size: 117%;
	font-weight: var(--fw-bold);
	line-height: 1.5;
	margin-bottom: 1.2em;
}
.career_box .com_list > li {
	margin-bottom: 1em;
}
.career_box .com_list > li::before {
	background-color: #c5884c;
}
.career_box .goal {
	font-size: min(1.6vw,100%);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	background-color: #f3f3f1;
	margin-top: 2em;
}
.career_box .goal dt,
.career_box .goal dd {
	box-sizing: border-box;
	padding: 1.1em 1.5em;
}
.career_box .goal dt {
	text-align: center;
	color: #fff;
	background-color: #fff;
	background-color: #c5884c;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.career_box .goal {
	display: flex;
}
.career_box .goal dt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 8.5em;
}

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.career_box {
	padding: 8% 6% 8% 28%;
	border-radius: 10px;
}
/* year */
.career_box .year {
	width: 7.2em;
	font-size: 50%;
	padding: 3em 2%;
}
/* contents */
.career_box .index {
	font-size: 105%;
}
.career_box .com_list > li {
	font-size: 85%;
	margin-bottom: .5em;
}
.career_box .goal {
	font-size: 95%;
	margin-top: 8%;
}
.career_box .goal dt {
	padding: .6em 1.5em;
}
}


/*---------------------------------------------------------
 voice
---------------------------------------------------------*/
#voice {
	background: linear-gradient(to top, #FFF, transparent 300px);
}
#voice .com_bg__color {
	background: linear-gradient(122deg, #ffff9b, #f7f7e7);
}
#voice .com_h__en {
	color: rgba(53,56,51,0.1);
}
.voice_inbox .stf_name {
	text-align: center;
	font-size: min(2.8vw,176%);
	font-weight: var(--fw-bold);
	letter-spacing: .15em;
	line-height: 1.5;
	padding-bottom: .8em;
	margin-top: 1.5em;
	border-bottom: 1px dashed var(--color-main);
}
.voice_inbox .stf_name span {
	display: block;
	color: #816a5f;
	font: var(--font-en);
	font-size: 56%;
	letter-spacing: normal;
	margin-top: 1em;
}
/* qa_list */
#voice .qa_list {
	counter-reset: qaCounter;
	font-size: 88%;
}
#voice .qa_list dt {
	counter-increment: qaCounter;
	color: var(--color-main);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	margin-bottom: .6em;
}
#voice .qa_list dt:not(:first-of-type) {
	margin-top: 2em;
}
#voice .qa_list dt::before {
	display: inline-block;
	width: 1.6em;
	content: counter(qaCounter, decimal-leading-zero);
	font-family: "din-2014", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 209%;
	vertical-align: -0.1em;
}
#voice .qa_list dd {
	line-height: 1.9;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.voice_inbox {
	display: grid;
	justify-content: space-between;
	grid-template-columns: 30% 63%;
	padding-right: 22%;
	padding-left: 8.5%;
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.voice_inbox {
	padding-left: 4%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.voice_inbox .box_img {
	display: grid;
	grid-template-columns: 45% 45%;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8%;
}
.voice_inbox .stf_name {
	font-size: 130%;
}
#voice .qa_list dt:not(:first-of-type) {
	margin-top: 1.5em;
}
}



/*---------------------------------------------------------
 
---------------------------------------------------------*/
#entry .kengaku {
	background-color: #cf9a66;
}



/*---------------------------------------------------------
 
---------------------------------------------------------*/

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}