@charset "utf-8";



/*/////////////////////////////////////////////////////////////////////
    for PC  パソコン画面用（768px以上）
/////////////////////////////////////////////////////////////////////*/

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

	body {
		min-width: 960px;
	}

	#wrapper {}

	.pc_none {
		display: none;
	}

	/*==================================================
    FV　h1  for PC
==================================================*/

	#fv_box .inner {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width: auto;
		height: 520px;
		margin: 0 auto;
		background-image: url(../img/top_h1_bg.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	#fv_box .inner h1 {
		margin: -300px auto 0;
		font-size: 40px;
		width: 400px;
		line-height: 1.5;
		text-align: center;
		/*font-family:,"FOT-マティス Pro M";*/
		color: #4c4c4c;
		border-bottom: solid 1px #000;
	}

	#fv_box .inner p {
		margin: 0 auto;
		font-size: 12px;
		line-height: 1.5;
		color: #000;
		text-align: center;
	}



	/*==================================================
    Main シンクスのお仕事  for PC
==================================================*/
	#works {
		margin: 0 auto 60px;
		width: auto;
		height: 500px;
		background-image: url(../img/top_works_bg.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	#works .works_in {
		margin: 0 auto;
		padding: 60px 0 0;
		width: 840px;
		height: 500px;
	}

	#works .works_in h2{
		width: 290px;
		height: 50px;
		margin: 0 auto 30px;
	}
	
	#works .works_in p{
		font-size: 18px;
		line-height: 2.0;
	}


	#works .works_in .btn {
		width: 840px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: auto 0;
		padding: 30px 0 0;
	}



	#works .works_in .btn li {
		width: 410px;
		margin-bottom: 10px;
	}


	/*
	#works .works_in h2 {
		width: 760px;
		margin: 0 auto 30px;
		padding: 10px;
		background-color: #b9b9b9;
		text-align: center;
		font-size: 32px;
		line-height: 1.3;
	}

	#works .works_in ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 760px;
		margin: 0 auto 20px;
	}

	#works .works_in ul li {
		width: 240px;
		margin-bottom: 20px;
	}

	#works .works_in ul li img {
		width: 100%;
	}
*/




/*==================================================
    Main 採用情報  for PC
==================================================*/

#recruit{
	margin:30px auto;
	height: 500px;
}


#recruit .recruit_in{
	margin: 60px auto;
}

	#recruit .recruit_in ul{
		width: 780px;
		height: 220px;
		margin: 0 auto 60px;
	}
	
	#recruit .recruit_in ul li:nth-child(1n){
		margin: 30px auto 0;
	}



}




/*/////////////////////////////////////////////////////////////////////
    for sp  スマホ画面用（767px以下）
/////////////////////////////////////////////////////////////////////*/


@media only screen and (max-width:767px) {
	body {
		width: 100%;
		font-size: 13px;
	}




	/*==================================================
    h1　h1  for SP
==================================================*/

	#fv_box .inner {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 200px;
		margin: 0 auto;
		background-image: url(../img/top_h1_bg.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		padding: 5%;
	}

	#fv_box .inner h1 {
		font-size: 25px;
		width: 90%;
		line-height: 1.5;
		text-align: center;
		color: #fff;
		border-bottom: solid 1px #fff;
	}

	#fv_box .inner p {
		font-size: 15px;
		line-height: 1.5;
		color: #fff;
		text-align: center;
	}



	/*--------------------------------------------------
    Main  for sp
--------------------------------------------------*/

	/* タイトルの帯(募集要項、応募フォームなど)
    --------------------- */
	main h2.title_obe {
		margin: 0 auto 5%;
		padding: 10px;
		font-size: 26px;
		line-height: 1.3;
		text-align: center;
		background-color: #b9b9b9;
	}


	/* タイトルの帯の下の矢印
    -------------------

    main h2.title_obe{
        position: relative;
    }

    main h2.title_obe::after{
        display: flex;
        content: "";
        width: 20px;
        height: 20px;
        background-color: #b9b9b9;
        position: absolute;
        left: 47%;
        bottom: -15%;
        transform: rotate(45deg);
        z-index: -1;
    }
    -- */


	/*--------------------------------------------------
    Main 募集要項を見る  for sp
--------------------------------------------------*/

	#btn_youkou {
		padding: 4% 0;
	}

	#btn_youkou a img {
		width: 85%;
		margin: auto;
	}

	/*==================================================
    Main シンクスのお仕事  for SP
==================================================*/
	#works {
		margin: 0 auto 5%;
		width: auto;
		background-image: url(../img/top_works_bg.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	#works .works_in {
		margin: 0 auto;
		width: 80%;
		padding: 5% 0 0;
	}


	#works .works_in h2{
		width: 80%;
		margin: 0 auto 3%;
	}
	
	#works .works_in p{
		font-size: 14px;
		line-height: 1.5;
	}


	#works .works_in .btn {
		width:100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
		padding: 5% 0 0;

	}



	#works .works_in .btn li {
		width: 90%;
		margin: 0 auto 3%;
	}


	/*
	#works .works_in h2 {
		width: 760px;
		margin: 0 auto 30px;
		padding: 10px;
		background-color: #b9b9b9;
		text-align: center;
		font-size: 32px;
		line-height: 1.3;
	}

	#works .works_in ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 760px;
		margin: 0 auto 20px;
	}

	#works .works_in ul li {
		width: 240px;
		margin-bottom: 20px;
	}

	#works .works_in ul li img {
		width: 100%;
	}
*/



/*==================================================
    Main 採用情報  for PC
==================================================*/
	
	#recruit .recruit_in{
		width: 100%;
		margin: 0 auto 5%;
	}
	

}


/* セクション全体のスタイル */
.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    gap: 5px; /* 各四角形の間隔 */
    max-width: 960px; /* セクションの横幅 */
    margin: 20px auto; /* 中央揃え */
    padding: 20px 0;
    box-sizing: border-box;
}

/* 各サービスボックスのスタイル */
.service-box {
    background-color: #f5f5f5; /* 通常時の背景色 */
    border: 1px solid #ddd; /* 枠線 */
    border-radius: 2px; /* 角丸 */
    text-align: center; /* 文字の中央揃え */
    font-size: 20px; /* 文字サイズ */
    font-weight: bold; /* 文字を太字 */
    color: #000; /* 通常時の文字色 */
    padding: 10px; /* 内側の余白 */
    display: flex; /* フレックスボックスで中央揃え */
    justify-content: center; /* 水平中央 */
    align-items: center; /* 垂直中央 */
    height: 60px; /* 四角形の高さ */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影 */
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s; /* アニメーション効果 */
}

/* ホバー時のエフェクト */
.service-box:hover {
    transform: translateY(-5px); /* 少し浮き上がる */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 影を強調 */
    background-color: #007BFF; /* ホバー時の背景色（青） */
    color: #fff; /* ホバー時の文字色（白） */
}

/* レスポンシブ対応 */
/* 画面幅が768px以下の場合 */
@media (max-width: 768px) {
    .services {
        grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
        gap: 10px; /* 間隔を少し広げる */
    }
}

/* 画面幅が480px以下の場合 */
@media (max-width: 480px) {
    .services {
        grid-template-columns: 1fr; /* 1列に変更 */
    }

    .service-box {
        font-size: 18px; /* 文字サイズを少し小さく */
        height: 50px; /* 高さを少し小さく */
    }
}