@charset "utf-8";

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
SP はじめ ~899px
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

@media only screen and (max-width: 899px) {

	#main {
		width: 80.0vw;
		margin: 0 auto;
	}

	.main_works_img--sp {
		display: block;
		width: 80.0vw;
		margin-bottom: 4.0vh;
		text-align: center;
	}

	.h3{
		display: block;
		text-align: left;
		font-size: 1.8rem;
		font-family: 'Lato', sans-serif;
		font-weight: 600;
		margin-bottom: 2.0vh;
	}

	.works_box_a {
		margin: 0 0 4.0vh 0;
	}

	.works_wrap {
		margin: 0 2vw 0;
	}

	.job-description {
		margin: 0 0 4.0vh;
	}

	.text--works-detail dt::after {
		content: ":";
	}

	.text--works-detail dd {
		display: inline-block;
		margin-bottom: 0 1.0vh 0 1vw;
		font-size: 1.4rem;
	}

	#works_title {
		margin-bottom:4.0vh;
		font-weight: bold;
		font-size:1.6rem;
		line-height: 1.6;
		}

	.link-icon {
		margin-left: 0.5rem; /* 画像とテキストの間にルート要素のフォントサイズの0.5倍のスペースを作成 */
		vertical-align: middle; /* 画像とテキストを垂直に中央揃え */
	}

	.job-description {
		line-height: 1.2;
		width: 100%;

	}

	.job-details-frame {
		width: 100%;
		vertical-align:top;
	}	

	.job-details,
	.job_details_contents {
		font-size: 1.4rem;
		padding-bottom: 2.0vh;
	}

	.job-details {
		width:24%;
		flex: 1; /* 左側の項目はフレックスアイテムとして伸縮可能 */
		border-right: 1px #e0e0e0  solid;
		text-align: left;
	}

	.job_details_contents {
		display: block;
		flex: 1; /* 右側の内容もフレックスアイテムとして伸縮可能 */
		margin: 0 0 0 4vw;
		text-align: left;
		line-height: 1.6;
	}

	.job_details_contents--dt {
		font-size: 1.4rem;
		font-weight: 600;
	}

	.job_details_contents--dt::before {
		content: " - ";
	}

	.job_details_contents--dd {
		display: inline-block;
		margin: 0 0 1.0vh 2.2vw;
		font-size: 1.4rem;
	}

	.job-details {
		font-weight: bold;
	}

	.works_box_b--inner {
		margin-bottom: 4.0vh;
	}
		
	.works_box_b--inner:last-child {
		margin-bottom: 0;
	}

	.h4--works-detail {
		display: block;
		margin-bottom:2.0vh;
		text-align:center;
		font-size: 2.4rem;
		font-weight: bold;
	}

	.text--works-detail {
		margin: 0 0 4.0vh 0;
		font-size: 1.4rem;
		line-height: 1.7;
	}

	.text--works-detail dt {
		margin-bottom: 1.0vh;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.text--works-detail dd {
		margin: 0 0 1.0vh 2vw;
	}

}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
SP おわり ~899px
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
PC はじめ 900px~
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

@media only screen and (min-width: 900px) {

	#main_works {
		margin-bottom: 6.0vh;
		text-align: center;
	}


	#main_works img {
		width: 100%;
		object-fit: cover;
		object-position:0 0;
	}

	#works_title {
		font-weight: bold;
		font-size:2.0rem;
		margin-bottom:4.0vh;
		line-height: 1.6;
	}

	.link-icon {
		margin-left: 0.5rem; /* 画像とテキストの間にルート要素のフォントサイズの0.5倍のスペースを作成 */
		vertical-align: middle; /* 画像とテキストを垂直に中央揃え */
	}

	.works_description {
		margin-bottom: 6.0vh;
	}

	.works_wrap {
		display: flex;
		margin: 0 2vw 0;
	}

	.job-description {
		margin: 0 0 10vh ;
	}

	.works_box_b {
		flex: 2; /*-- 幅を2部分割合で分配 --*/
		padding: 0 0 0 2vw;
		border-left: solid 1px #e0e0e0;
		margin: 0 0 0 2vw;
	}

	.works_box_b--inner {
		margin-bottom: 4.0vh;
	}
		
	.works_box_b--inner:last-child {
		margin-bottom: 0;
	}


	.h4--works-detail {
		margin-bottom:2.0vh;
		font-size: 1.8rem;
		font-weight: bold;
	}

	.text--works-detail {
		font-size: 1.4rem;
		line-height: 1.6;
	}

	.text--works-detail dt {
		margin-bottom: 1.0vh;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.text--works-detail dt::after {
		content: ":";
	}

	.text--works-detail dd {
		display: inline-block;
		margin-left: 1vw;
		font-size: 1.4rem;
		margin-bottom: 1.0vh;
	}

	.job-description {
		width: 100%;
		line-height: 1.2;
	}

	.job-details-frame {
		width: 100%;
		vertical-align:top;
	}	

	.job-details,
	.job_details_contents {
	font-size: 1.4rem;
	padding-bottom: 2.0vh;
	}

	.job-details {
		width:30%;
		flex: 1; /* 左側の項目はフレックスアイテムとして伸縮可能 */
		margin-right: 1rem; /* 右側の内容との間に少しのマージンを追加 */
		text-align: left; /* 左寄せ */
	}

	.job_details_contents {
		width:70%;
		flex: 1; /* 右側の内容もフレックスアイテムとして伸縮可能 */
		text-align: left; /* 右寄せ */
		line-height: 1.6;		
	}

	.job_details_contents--dt {
		font-size: 1.4rem;
		font-weight: 600;
	}

	.job_details_contents--dt::before {
		content: " - ";
	}

	.job_details_contents--dd{
		display: inline-block;
		margin: 0 0 1.0vh 1vw;
		font-size: 1.4rem;
	}

	.right-align {
		text-align: right; /* 特定の要素を右寄せにするためのクラス */
	}


	.job-details {
		font-weight: bold; /* 太字に設定 */
	}

	.h3 {
		display: block;
		text-align: left;
		font-size: 1.8rem;
		font-family: 'Lato', sans-serif;
		font-weight: 600;
		margin-bottom: 2.0vh;
	}
}
/* works-detailページ共通終わり */

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
PC おわり 900px~
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/