@charset "UTF-8";

img {
	max-width: 100%;
}

/** -----------------------------------------------
  共通
------------------------------------------------**/

#info,
#interview,
#work,
#recruit,
#about,
#contact{
	padding: 120px 0 100px 0;
}

.section-inner {
	max-width: 960px;
	margin: 0 auto;
}

.pc-only {
	display: block;
}

.sp-only {
	display: none;
}

h2 {
	background-image: url(../images/kuchinasimaru.png);
	background-repeat: no-repeat;
	background-position: center;
	padding: 50px 0 50px 0;
	font-size: 38px;
}
.col-2 {
	display: flex;
	justify-content: space-between;

}

.col-2 .item {
	width: calc((100% - 24px)/2);
	margin-top: 90px;
}
.col-3 {
	display: flex;
	justify-content: space-between;
}
.col-3 .item {
	width: col((100% - 48/3))
}

p.midum {
	padding: 0;
	font-size: 22px;
	text-align: center;
	margin: 50px 0px;
}

a {
	text-decoration: none;
}


/* * -------- ２スマホ -------- * */

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

	.col-2 {
		display: block;
	}

	.col-2 .item {
		width: 100%;
		margin-top: 14px;
	}

	.col-3 {
		display: block;
	}

	.col-3 .item {
		width: 100%;
	}
}


/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.section-inner {
		padding: 0 24px;
		max-width: 550px;
	}

	.pc-only {
		display: none;
	}

	.sp-only {
		display: block;
	}

	p.midum {
		padding: 24px 0;
		font-size: 14px;
		margin: 0px;
	}

	#info,
	#interview,
	#work,
	#recruit,
	#about {
		padding: 30px 0 28px 0;
	}





	body {
		/*下記のCSSはご自身のデザインに合わせて書き換えてください。*/
		font-size: 16px;
		line-height: 1.6;
		color: #404040;
		background-color: #fff;
		font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Osaka", "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-weight: 500;
	}

	h2 {
		background-size: 15%; 
		font-size: 20px;
		padding: 20px;
		
	}

	a {
		text-decoration: none;
	}
}

/** -----------------------------------------------
  ヘッダー
------------------------------------------------**/
#mainvisual {
	position: relative;
}

#header {
	background-image: url(../images/header.png);
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 180px;
	padding: 0 40px;
	position: fixed;
	top: 0;
	z-index: 1;
	align-items: center;
	padding: 0 40px 80px;


}

ul.gnav-pc li {
	display: inline;
	margin-right: 40px;
	/* margin: 0 auto; */
}

ul.gnav-pc li a {
	font-size: 19px;
	letter-spacing: 0.13em;
	color: #333333;
	font-weight: bold;
}

.gnav-pc-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}

ul.gnav-pc li a:hover {
	color: #f16c4f;
}

.button-small {
	width: 200px;
	height: 65px;
	background-color: #02bdc0;
	color: #fff;
	letter-spacing: 0.06em;
	font-size: 30px;
	font-weight: bold;
	border-radius: 35px;
	text-align: center;
	line-height: 65px;
	cursor: pointer;

}

.button-small:hover {
	background-color: #7dd5d6;
	/* ホバー時の色を変更 */
}

.gnav-sp {
	display: none; /* 初期状態で非表示 */
  }

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	#header {
		max-width: 100%;
		height: 64px;
		padding: 0;
		position: fixed;
        top: 0;
        z-index: 1000; /* 他の要素の上に */
    }


	.gnav-pc-wrap {
		display: none;
	}

	#menu-button {
		display: block;
		width: 60px;
		height: 60px;
		padding: 22px 18px;
	}

	.menu-button-inner {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
	}

	.menu-button-inner span {
		display: block;
		width: 100%;
		height: 3px;
		background-color: #f16c4f;
		position: absolute;
		transition: all 0.3s ease; /* アニメーションを追加 */
	}
	.menu-active #menu-button .menu-button-inner span:nth-child(1) {
		transform: rotate(45deg);
		top: 50%;
		margin-top: -1.5px;
	}
	
	.menu-active #menu-button .menu-button-inner span:nth-child(2) {
		opacity: 0;
	}
	
	.menu-active #menu-button .menu-button-inner span:nth-child(3) {
		transform: rotate(-45deg);
		top: 50%;
		margin-top: -1.5px;
	}

	.menu-button-inner span:nth-child(1) {
		top: 0;
	}

	.menu-button-inner span:nth-child(2) {
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.menu-button-inner span:nth-child(3) {
		bottom: 0;
	}

	.header-logo_pc {
		max-width: 100px;
		margin-left: 15px;
	}
	.gnav-sp {
		display: none; /* SP時に表示 */
		flex-direction: column;
		position: fixed;
		top: 64px; /* ヘッダーの下に配置 */
		right: 0;
		background-color: #fff;
		color: #f16c4f;
	
		padding: 20px;
		z-index: 10;
		box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
		/* transform: translateX(100%); */
		transition: transform 0.3s ease;
	}
	
	.gnav-sp ul li a {
		color: orange; /* オレンジ色に変更 */
		text-decoration: none; /* 必要なら下線を消す */
	}

	.gnav-sp ul li a:hover {
		color: #f16c4f; /* 違う色にしたい場合 */
	}

	.menu-active .gnav-sp {
		display: flex; /* メニューが表示されるときにflexを適用 */
		transform: translateX(0); /* メニューが表示される状態 */
	}
	body {
		overflow-x: hidden; /* 横スクロールバーを防止 */
	}
}

/** -----------------------------------------------
  メインヴィジュアル
------------------------------------------------**/


#mainvisual {
	width: 100vw;
	height: 100vh;
	background-image: url(../images/24021440_m.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;

}


.copy-wrap {

	position: absolute;
	left: 84px;
	bottom: 124px;
	text-align: center;
	background-image: url(../images/MVorangemaru.png);
	background-repeat: no-repeat;
	background-position: center;
	padding-top: 190px;
	padding-bottom: 150px;


}



.maincopy {
	color: #404040;
	font-size: 50px;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: 0.01em;
}

.subcopy {
	color: #404040;
	font-size: 30px;
	font-weight: bold;
	line-height: 3;
}

.button-large{
	position: absolute;
	bottom: 100px;
	left: 180px;
	width: 350px;
	height: 80px;
	background-color: #02bdc0;
	color: #fff;
	letter-spacing: 0.06em;
	font-size: 36px;
	font-weight: bold;
	border-radius: 50px;
	text-align: center;
	line-height: 80px;
	cursor: pointer;
	margin: 0 auto;

}

.button-large:hover {
	background-color: #7dd5d6;
	/* ホバー時の色を変更 */
}
/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	#mainvisual {
		width: 100vw;
		height: 100vh;
		background-image: url("../images/sp-mv-img.png");
		position: relative;
	}


	.button-large {
		position: absolute;
		top: 68px;
		left: 5px;
		width: 120px;
		height: 30px;
		background-color: #02bdc0;
		color: #fff;
		letter-spacing: 0.06em;
		font-size: 14px;
		font-weight: bold;
		border-radius: 35px;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
		margin: 0 auto;
	}


	.maincopy {
		font-size: 22px;
		line-height: 1.6;
		letter-spacing: 0;
	}

	.copy-wrap {
		margin: 0 auto;
		bottom: -68px;
		background-image: url("../images/sp-mv-maru.png");

	}

	.subcopy {
		font-size: 12px;
		margin-bottom: 0px;
	}
	
	
	

}


/** -----------------------------------------------
  働く環境
------------------------------------------------**/

#info {
	background-color: #fff8f2;

	position: relative;
}

.header-text {
	color: black;
}

.img-info {
	width: fit-content;
	position: absolute;
	right: 0px;
	top: 10px;
}

h2.large {
	text-align: center;

}



#info p.midum {
	text-align: center;
}

h3.large {
	text-align: center;
	padding: 10px 0 36px 0;
	color: #f16c4f;
	font-size: 30px;
}





.info-icon {
	max-width: 50%
}

.item {
	text-align: center;
	margin-top: 30px;

}

.button-medium1 {
	width: 336px;
	height: 73px;
	background-color: transparent;
	border: 3px solid #ef856e;
	/* 枠線を設定 */
	color: #ef856e;
	/* テキストの色 */
	padding: 20px 0; 
	/*内側の余白を設定 */
	letter-spacing: 0.06em;
	font-size: 18px;
	font-weight: bold;
	border-radius: 35px;
	/* 角を丸くする（必要に応じて） */
	text-align: center;
	margin: 0 auto;
	cursor: pointer;
	/* ホバー時にカーソルをポインタに変更 */
	display: block;
	max-width: 336px;
	margin-top: 100px;
}


.button-medium1:hover {
	background-color: #f9c7bc;
	/* ホバー時の色を変更 */
}




@media screen and (max-width:640px) {
	#info .col-3{
		display: flex;
	}
	.img-info {
		display: none;
	}
	#plan p.medium span {
		display: block;
	}
	
	h3.large {
		display: block;
		font-size: 12px;
	}

	.button-medium1{

		width: 200px;
		height: 50px;
		/* background-color: transparent; */
		border: 2px solid #ef856e;
		/* 枠線を設定 */
		/* color: #ef856e; */
		/* テキストの色 */
		/* padding: 5px 0; */
		/*内側の余白を設定 */
		letter-spacing: 0.06em;
		font-size: 12px;
		font-weight: bold;
		/* border-radius: 35px; */
		/* 角を丸くする（必要に応じて） */
		/* text-align: center; */
		/* margin: 0 auto; */
		/* cursor: pointer; */
		/* ホバー時にカーソルをポインタに変更 */
		display: block;
		max-width: 336px;
		margin-top: 30px;
		line-height: 7px;

	}

	

}

/** -----------------------------------------------
  メンバー紹介
------------------------------------------------**/

#interview {
	background-color: #fff;
	position: relative;

}


.img-member {
	width: fit-content;
	position: absolute;
	top: -100px;
}

.img-member-2 {
	width: fit-content;
	position: absolute;
	right: 0;
	top: 40px;

}

.img-member-3 {
	width: fit-content;
	position: absolute;
	left: 0;
	bottom: 56px;

}



#interview h2.large {
	text-align: center;
}



.img-member {
	width: fit-content;
	position: absolute;
	top: -150px;
}

p.midum span {
	/* spanで括られた要素を１行に */
	display: block;
}

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

	p.img-member {
		display: none;
	}

	p.img-member-2 {
		display: none;
	}

	p.img-member-3 {
		display: none;
	}

	
	p.midum span {
		/* spanで括られた要素を１行に */
		display: inline;
	}
	
}

/** -----------------------------------------------
  事業について
------------------------------------------------**/

#work {
	background-image: url(../images/work.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

}

#work h2.large {
	text-align: center;
}

#work p.midum {
	text-align: center;
}

p.work-min {
	font-size: 26px;
	font-weight: bold;
	text-align: left;
}

p.work-min2 {
	font-size: 18px;
	text-align: left;
  	line-height: 1.6; /* テキストの行間を調整 */
}

.item1 img {
  width: 100%; /* 画像を親要素にフィット */
  height: auto; /* アスペクト比を維持 */
  max-width: 300px; /* 画像の最大幅を制限 */
  margin: 0 auto; /* 中央揃え */
  display: block; /* ブロック要素化で余白を調整 */
}

.item1 {
  /* max-width: 50%; 横幅を調整 */
  /* margin: 0 auto; 中央揃え */
  	text-align: center; /* 画像を中央揃え */
	width: 300px;
	margin-bottom: 30px;
}

.item2 {
	text-align: left;
	margin-top: 30px;
	width: calc(100% - 330px);
	margin-bottom: 30px;
}

@media screen and (max-width: 640px) {
	.item1 {
    	max-width: 100%; /* モバイルでは幅を全体に広げる */
		width: auto;
	}

	.item2 {
		text-align: center;
		margin-top: 14px;
		width: auto;
	}

	p.work-min {
		font-size: 14px;
		font-weight: bold;
	}
	p.work-min2 {
		font-size: 12px;
	}
}
/** -----------------------------------------------
  募集職種
------------------------------------------------**/

.job-list {
	list-style: none;
	display: flex;
	flex-direction: column; /* 縦方向に積む */
	align-items: center; /* 中央揃え */
	gap: 20px; /* 各項目の間隔 */
	padding: 0;
	margin: 0 auto; /* リスト全体を中央揃え */
	max-width: 600px; /* 最大幅を制限してレイアウトを整える */
}

.job-item {
	position: relative;
	padding: 10px 20px; /* 項目の内側の余白を調整 */
	width: 100%; /* 幅を100%に固定 */
	text-align: center; /* 中央揃え */
	transition: background-color 0.3s ease; /* 背景色が変化してもスムーズ */
	box-sizing: border-box; /* パディングを含めた幅計算 */
	background-color: #fff; /* 背景色 */
	border: 1px solid #ddd; /* ボーダーで項目を区切る */
	border-radius: 5px; /* 角を丸くする */
}
.job-item:hover {
	background-color: #feffd2; /* ホバー時の視覚的変化 */
}

.job-description {
	display: none; /* 初期状態で非表示 */
	padding: 10px;
	margin-top: 10px;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-size: 14px;
	color: #333;
	text-align: left; /* メッセージ部分を左揃え */
}

.job-item.active .job-description {
	display: block; /* アクティブな項目のメッセージを表示 */
}
#recruit{
	position: relative;
}
.img-recruit {
	width: fit-content;
	position: absolute;
	right: 0;
	top: -178px;
}

.button-medium1:hover {
	background-color: #f9c7bc;
	/* ホバー時の色を変更 */
}


@media screen and (max-width: 640px) {
	.img-recruit {
		display: none;
	}
	
	
	
	.job-description {
		font-size: 12px; /* スマホ向けにフォントサイズを調整 */
	}
	.job-list {
		gap: 14px; /* アイテム間のスペース */
		font-size: 14px; /* テキストサイズを調整 */
		flex-direction: column; /* 縦に並べる */
		align-items: center; /* 中央揃え */
		justify-content: center; /* 中央揃え */
		padding: 0; /* 余白が不要な場合 */
	}

	.job-description {
		display: none; /* 初期状態では非表示 */
		padding: 10px;
		margin-top: 10px;
		background-color: #f9f9f9;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-size: 14px;
		color: #333;
		text-align: left; /* メッセージ部分を左揃え */
	}

	.job-item.active .job-description {
		display: block; /* 開閉時に表示 */
	}
}



/** -----------------------------------------------
  目指す世界
------------------------------------------------**/

#about {
	background-color: #faf5f1;
	position: relative;

}

#about h2.large {
	text-align: center;
}

#about p.min {
	text-align: center;
}

#about p.world-min2 {
	font-size: 18px;
	line-height: 44px;
}

p.world-lage {
	text-align: center;
	font-size: 28px;
	color: #ef856e;
	font-weight: bolder;
	margin: 50px 0 50px;
}



.img-world {
	width: fit-content;
	position: absolute;
	top: -100px;
}

.autoplay {
	max-width: 1440px;
	overflow: hidden;
}

#about p.world-min2 span {
	/* spanで括られた要素を１行に */
	display: block;
	text-align: center;
}

@media screen and (max-width:640px) {
	.img-world {
		display: none;
	}
	#about p.world-min2 span {
		display: inline;
	}
	#about p.world-min2{
		font-size: 14px;
		line-height: 26px;
	}
	p.world-lage {
		font-size: 14px;
		color: #ef856e;
		font-weight: bolder;
		margin: 10px 0 32px;
		text-align: left;
	}
	
}

/** -----------------------------------------------
  あなたの力
------------------------------------------------**/
#contact {

	background-image: url(../images/pc-hand.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* padding: 90px; */
}

p.large {
	text-align: center;
	font-size: 26px;
	padding: 150px 0 50px 0;
	color: #fff;
}

h3.large1 {
	text-align: center;
	padding: 0;
	font-size: 50px;
	font-weight: bold;
	color: #fff;
}

.button-large2 {
	display: block;
	width: 400px;
	height: 130px;
	background-color: #f16c4f;
	color: #fff;
	letter-spacing: 0.06em;
	font-size: 40px;
	font-weight: bold;
	border-radius: 80px;
	text-align: center;
	line-height: 130px;
	cursor: pointer;
	margin: 40px;
}

.button-large2:hover {
	background-color: #ef856e;
	/* ホバー時の色を変更 */
}

.button-large3 {
	display: block;
	width: 400px;
	height: 130px;
	background-color: #02bdc0;
	color: #fff;
	letter-spacing: 0.06em;
	font-size: 40px;
	font-weight: bold;
	border-radius: 80px;
	text-align: center;
	line-height: 130px;
	cursor: pointer;
	margin: 40px
}

.button-large3:hover {
	background-color: #7dd5d6;
	/* ホバー時の色を変更 */
}



@media screen and (max-width:640px) {
	#contact {
		width: 100%;
		height: 100%;
		background-image: url(../images/sp-contact.png);
	}
	
	p.large {
		text-align: center;
		font-size: 12px;
		padding: 38px 0 38px 0;
		
	}

	h3.large1 {
		text-align: center;
		padding: 0;
		font-size: 18px;
		font-weight: bold;
		color: #fff;
	}
	.button-large2 {
		width: 162px;
		height: 52px;
		font-size: 16px;
		font-weight: bold;
		border-radius: 26px;
		line-height: 52px;
		margin: 0 auto;
		margin-top: 18px;
	}
	.button-large3 {
		width: 162px;
		height: 52px;
		font-size: 16px;
		font-weight: bold;
		border-radius: 26px;
		line-height: 52px;
		margin: 0 auto ; 
		margin-top: 18px;
		margin-bottom: 18px;
	}
}
/** -----------------------------------------------
  フッダー
------------------------------------------------**/

#footer {
	background-color: #fde198;
	text-align: center;
	padding: 80px 0 80px;
}


#footer a {
	color: #000
}

.footer-link,
.copyright {
	font-size: 18px;
}

.copyright {
	color: #000
}

.footer-link {
	margin-bottom: 20px;
}

.footer-link li {
	display: inline;
	margin-right: 20px;
}

@media screen and (max-width:640px) {
	#footer {
		padding: 20px 0 20px;

	}
	#footer a {
		font-size: 14px;
		display: block; /* 縦積みにする */
  		margin-bottom: 10px; /* 各リンクの間にスペースを追加 */
	}

	.copyright {
	font-size: 14px;
	}
	.footer-link {
		margin-bottom: 0px;
	}
}

/** -----------------------------------------------
  PC :  画面の横幅が641px以上
------------------------------------------------**/

/* .example {
	font-size: 50px;
	color: #99293D;
} */
.pc-only {
	font-size: 50px;
	color: #99293D;
}



/*ここからメディアクエリで各デバイスサイズに書き分けます。
今回の課題で考慮するのはPCとスマホのみでOKですが、タブレットサイズでのスタイルを書いてもOK！
また、CSSは上から下に継承されるので、変化させたいところだけ書けばOKです*/


/** -----------------------------------------------
  Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media screen and (max-width:640px) {
	/* #header {
		height: 64px;
	} */

	.section-inner {
		padding: 0 25px;
		max-width: 550px;
	}

	.sp-only {
		font-size: 20px;
		color: #AD8651;
	}

	
}