@charset "UTF-8";
/* CSS Document */


/*
.p_ja {font-family:'Zen Kaku Gothic New', sans-serif;}
font-weight:400,500;
.p_eng {font-family:'IBM Plex Sans', sans-serif;}
font-weight:300,400;font-style:italic;
*/

/* フレーム
.sec, .sec_B {margin:0 auto;}
@media screen and (min-width:1440px){
	.sec, .sec_B {width:1280px;margin:0 auto;}}
@media screen and (max-width:1440px){
	.sec, .sec_B {width:88.88vw;margin:0 auto;}}
@media screen and (max-width: 768px){
	.sec {width:80.46vw;margin:0 auto;}
	.sec_B {width:100%;margin:0 auto;}
}
*/


/* works */
.sec_works {margin-top:70px;margin-bottom:150px;}
@media screen and (max-width: 768px){
	.sec_works {margin-top:10.41vw;margin-bottom:19.53vw;}
}

/*
@media screen and (max-width: 768px){
	.wrk_tp:nth-child(n+5) {display:none;}}
*/


.top_img {width:100%;margin:6.25% auto;}
@media screen and (max-width: 768px){
	.top_img {width:100%;margin:10.41vw auto;}
}



/* カラム */
.column {width:100%;display:flex;
	justify-content:space-between;align-items:flex-start;}
@media screen and (max-width: 768px){
	.column {width:100%;display:block;}
}
/* 左カラム */
.category {width:22.65%;}
.category_B {width:290px;}
.ctgr_title, .ctgr_title_B {width:100%;}
.ctgr_sticky {
	position:-webkit-sticky;position:sticky;
	top:160px;}
@media screen and (max-width:1068px){
	.category_B {width:30.5%;}
}
@media screen and (max-width: 768px){
	.category {width:50%;}
	.category_B {width:80.46vw;margin:0 auto;}
	.ctgr_title_B {width:40%;margin-left:9.77vw;}
	.ctgr_sticky {position:static;top:auto;}
}
/* 右カラム */
.clm_right {width:62.9%;}
.clm_m_top {margin-top:65px;}
@media screen and (max-width: 768px){
	.clm_right {width:100%;}
	.clm_m_top {margin-top:0;}
}


/* C：WEB画像SP用、D：WEB画像PC用 */
.clm_img_A,
.clm_img_B,
.clm_img_C,
.clm_img_D {width:100%;margin:0 auto;}

.clm_img_A div {margin-bottom:1.2%;}
.clm_img_B {display:flex;
	justify-content:space-between;
	align-items:flex-start;margin-bottom:1.2%;}
.clm_img_B div {width:49.4%;}
.clm_img_C {display:flex;
	justify-content:space-between;
	align-items:flex-start;margin-top:9.6%;}
.clm_img_C div {width:44.5%;}
.clm_img_D div {margin-bottom:4.8%;}
@media screen and (max-width: 768px){
	.clm_img_A {margin-bottom:13.02vw;}
	.clm_img_A div {margin-bottom:1.95vw;}
	.clm_img_B {
		width:80.46vw;
		margin-bottom:13.02vw;
		display:block;}
	.clm_img_B div {width:100%;margin-bottom:1.95vw;}
	.clm_img_C, .clm_img_D {width:80.46vw;}
	.clm_img_C {margin:13.02vw auto;}
	.clm_img_D {margin-bottom:8vw;}
	.clm_img_D div {margin-bottom:5.20vw;}
}

/* WEB用画像ドロップシャドウ */
.clm_img_web {border-radius:15px;
	box-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.2);}
@media screen and (max-width: 768px){
	.clm_img_web {border-radius:1.95vw;
	box-shadow:0 1.04vw 1.95vw 0 rgba(0, 0, 0, 0.2);}
}



.youtube {
	width:100%;
	box-sizing:border-box;
	margin:0 auto;}
.youtube > .inner {
	width:100%;
	padding-top:56.25%;
	position:relative;
	height:0;
	overflow:hidden;}
.youtube > .inner > iframe {
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:100% !important;
	height:100% !important;}
@media screen and (max-width: 768px){
	.youtube {width:100%;}
}




.ctgr_txt_B {color:#666;font-weight:400;
	font-size:16px;line-height:0.9;
	overflow:hidden;position:relative;}
.ctgr_txt_B::after {position:absolute;
    width:100%;bottom:0;content:'';}
.ctgr_txt_B::after {border-bottom:solid 0.5px #666;}
@media screen and (max-width: 768px){
	.ctgr_txt_B {font-size:3.125vw;}
}

.ctgr_txt_C {color:#000;font-weight:400;
	font-size:16px;line-height:0.9;}
@media screen and (max-width: 768px){
	.ctgr_txt_C {font-size:3.125vw;}
}





.info_wrk {margin:50px auto 160px;}
@media screen and (max-width:1068px){
	.info_wrk {margin:4.68vw auto 14.98vw;}
}
@media screen and (max-width: 768px){
	.info_wrk {margin:10.41vw auto 13.02vw;}
}


.info_title {font-weight:500;font-size:20px;
	margin-bottom:15px;line-height:1.5;}
.info_company {font-weight:400;font-size:18px;line-height:1;}
@media screen and (max-width:1068px){
	.info_title {font-size:1.87vw;margin-bottom:1.40vw;}
	.info_company {font-size:1.68vw;}
}
@media screen and (max-width: 768px){
	.info_title {font-size:3.64vw;margin-bottom:3.90vw;
		line-height:1;}
	.info_company {font-size:3.38vw;}
}


.process {margin-top:50px;}
.process ul {width:100%;display:flex;
	justify-content:space-between;align-items:flex-start;
	font-weight:400;font-size:14px;line-height:1.7;}
.process ul:first-child {margin-bottom:20px;}
.process ul li:first-child {width:12%;text-align:left;}
.process ul li:last-child {
	width:83%;text-align:justify;
	letter-spacing:-0.04em;}
@media screen and (max-width:1068px){
	.process {margin-top:4.68vw;}
	.process ul {font-size:1.31vw;}
	.process ul:first-child {margin-bottom:1.87vw;}
}
@media screen and (max-width: 768px){
	.process {margin-top:10.41vw;}
	.process ul {font-size:2.86vw;}
	.process ul:first-child {margin-bottom:3.90vw;}
	.process ul li:first-child {width:8%;}
	.process ul li:last-child {width:88%;}
}


.info_dscrptn {width:100%;text-align:justify;
	font-weight:400;font-size:16px;line-height:2;
	margin-top:40px;letter-spacing:-0.04em;}
@media screen and (max-width:1068px){
	.info_dscrptn {font-size:1.49vw;margin-top:6.55vw;}
}
@media screen and (max-width: 768px){
	.info_dscrptn {font-size:3.25vw;line-height:1.8;
		margin-top:6.51vw;}
}

.info_dscrptn span {letter-spacing:-0.01em;
	word-break:break-all;}
.info_dscrptn span a {text-decoration:underline;}
.info_dscrptn span a:hover {opacity:0.3;transition:0.2s;
	text-decoration:none;}
@media screen and (max-width: 768px){
	.info_dscrptn span a:hover {opacity:1;
	text-decoration:underline;}
}


.rltd_wrk {display:block;font-weight:400;
	font-size:16px;margin:50px 0;}
.rltd_wrk span {font-weight:400;}
.rltd_wrk li:not(:last-child) {margin-bottom:10px;}
@media screen and (max-width: 768px){
	.rltd_wrk {font-size:3.125vw;margin:6.51vw 0;}
	.rltd_wrk li:not(:last-child) {margin-bottom:3.25vw;}
}





.rltd_wrk p a {display:inline-block;
	position:relative;overflow:hidden;}
.rltd_wrk p a:after {position:absolute;
	bottom:0;left:0;width:100%;height:1px;
	background-color:#000;
	transform:translate(-100%, 0);
	transition:transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
	content:"";}
.rltd_wrk p a:hover:after {
	transform:translate(0, 0);}
@media screen and (max-width: 768px){
	.rltd_wrk p a:hover:after {display:none;}}







.wrks_ctgr {font-weight:400;color:#888;}
@media screen and (min-width:1440px){
	.wrks_ctgr {font-size:16px;margin-top:15px;}}
@media screen and (max-width:1440px){
	.wrks_ctgr {font-size:1.11vw;margin-top:1.041vw;}}
@media screen and (max-width:1068px){
	.wrks_ctgr {font-size:1.49vw;margin-top:1.40vw;}}
@media screen and (max-width: 768px){
	.wrks_ctgr {font-size:3.125vw;margin-top:1.30vw;
		margin-bottom:6.51vw;}
}

.wrks_ctgr span {color:#000;}


/* works画像ホバーアニメーション */
.flx_bx_item a div {position:relative;}
.flx_bx_item a div .mask {
	width:100%;height:100%;position:absolute;
	top:0;left:-100%;/* 枠の左に置いて表示させない */
	background-color:rgba(0,0,0,0.6);
	transition:0.3s ease;
	display:flex;justify-content:center;
	align-items:center;}
.flx_bx_item a:hover div .mask {
	left:0;/* 左から出てくるように見せる */}
.flx_bx_item a div .caption {color:#fff;opacity:0;
	transition:0.5s linear 0.2s;}
.flx_bx_item a:hover div .caption {opacity:1;}
@media screen and (max-width: 768px){
	.flx_bx_item a div .mask {display:none;}
}

.cap_ctgr {font-weight:500;line-height:1.5;
	text-align:justify;}
.cap_company {font-weight:400;line-height:1.8;}
@media screen and (min-width:1440px){
	.cap_ctgr {font-size:18px;}
	.cap_company {font-size:16px;}}
@media screen and (max-width:1440px){
	.cap_ctgr {font-size:1.21vw;}
	.cap_company {font-size:1.11vw;}}
@media screen and (max-width:1068px){
	.cap_ctgr {font-size:1.62vw;}
	.cap_company {font-size:1.49vw;}}

/* worksテキスト下線アニメーション */
.flx_bx_item a .wrks_ctgr {display:inline-block;
	position:relative;overflow:hidden;}
.flx_bx_item a .wrks_ctgr:after {
	position:absolute;bottom:0;left:0;
	width:100%;height:1px;background-color:#888;
	transform:translate(-100%, 0);
	transition:transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
	content:"";}
.flx_bx_item a:hover .wrks_ctgr:after {transform:translate(0, 0);}
@media screen and (max-width: 768px){
	.flx_bx_item a .wrks_ctgr:after {display:none;}}


/* works */