@charset "UTF-8";

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

/* サイト全体でスムーススクロールを有効 */
html {
	scroll-behavior: smooth;
}

/* ヘッダーの設定だよ */
#header {
	width: 100%;
	background-color: #4F3B17;
	position: fixed;
	display: flex;
	top: 0px;
	z-index: 2;
	justify-content: space-between;
}

#menu-button {
	display: none;
}

/* 会社ロゴのサイズ */
#header a[href="/practice-5"] img {
	width: 309px;
	height: auto;
}

.header.flex {
	display: flex;
	align-items: center;
	padding: 20px 30px;
	justify-content: space-between;
	width: 100%;
}

.div a img {
	width: auto;
	height: auto;
}

.header_menu li {
	list-style: none;
}

.header_menu li a {
	background-color: #4F3B17;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	display: block;
	text-align: center;
	cursor: pointer;
	transition: color 0.3s;

}

.header_menu li a small {
	font-size: 13px;
	font-weight: 300;
	display: block;
	margin-top: -3px;
	margin-bottom: 0;
	cursor: pointer;
}

.flex {
	display: flex;
}

.header_menu li {
	margin-left: 40px;
}

.header_menu li a:hover {
	color: #F8C59C;
}

.header-logo {
	margin-left: 48px;
	line-height: 0;
}

.gnav-pc-wrap {
	margin-right: 48px;
}


/* ヘッダーのスマホ設定だよ */
@media screen and (max-width:1160px) {

	/* ロゴのサイズ調整 */
	#header a[href="/practice-5"] img {
		width: 176px;
		height: auto;
	}

	/* PC用メニューは非表示 */
	.header_menu {
		display: none;
	}

	.header-logo {
		margin-left: 16px;
	}

	/* ロゴとハンバーガーの調節 */
	.header.flex {
		display: flex;
		padding: 15px 20px;
	}

	/* ハンバーガーの設定 */
	#menu-button {
		display: block;
		width: 80px;
		height: 70px;
		padding: 16px 18px;
	}

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

	.menu-button-inner span {
		display: block;
		width: 100%;
		height: 2px;
		background-color: #FFFFFF;
		position: absolute;
		transition: all 0.4s ease;
	}

	.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;
	}

	/* ハンバーガー押したときのメニュー画面の設定 */
	.gnav-sp {
		margin: 0;
		padding: 0;
		text-align: center;

	}

	.gnav-sp li a {
		font-size: 24px;
		padding: 18px 0;
		color: #4F3B17;
		text-decoration: none;
		display: block;
	}

	.gnav-sp li a small {
		display: block;
		font-size: 12px;
	}



	/* メニュー開いたときの閉じるボタンの設定 */
	#menu-button.is-active .menu-button-inner span:nth-child(1) {
		/* 1本目: 45度回転させて 'X' の上半分にする */
		transform: translateY(18px) rotate(45deg);
	}

	#menu-button.is-active .menu-button-inner span:nth-child(2) {
		/* 2本目: 真ん中の線を透明にして非表示にする */
		opacity: 0;
	}

	#menu-button.is-active .menu-button-inner span:nth-child(3) {
		/* 3本目: -45度回転させて 'X' の下半分にする */
		transform: translateY(-18px) rotate(-45deg);
	}

	.gnav-sp-wrap {
		background-color: #FCF8F4;
		position: fixed;
		/* 画面の左上をメニューの開始位置にする */
		top: 100px;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		/* メニューが画面の高さより長い場合にスクロールできるようにする */
		overflow-y: auto;
	}
}




/* ここからメインビジュアルだよ */
#mainvisual {
	overflow: hidden;
	max-width: 1920px;
	background-color: #FFFFFF;
}



.mainvisual-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	margin-top: 120px;
}

.mainvisual-left {
	flex-basis: 55%;
}

.mainvisual-left img {
	width: 100%;
	height: auto;
	display: block;
}

.mainvisual-right {
	flex: 1;
	min-width: 300px;
}

.mainvisual-right img {
	max-width: 80%;
	height: auto;
	display: block;
	margin-bottom: 20px;
	margin: auto;
}

.mv-button-group {
	margin: auto;
	gap: 15px;
	margin-top: 20px;
	display: flex;
}


/* CTAボタンの設定だよ */
.mv-button-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 70%;
}

.mv-entry-button,
.mv-tosite-button {
	margin: 10px 0;
	width: 100%;
}

.mv-entry-button {
	text-decoration: none;

	/* ボタンの形 */
	display: block;
	width: 100%;
	line-height: 1.5;
	text-align: center;
	padding: 16px 64px;

	/* ボタンのデザイン */
	/* background-color: #81DE6F; */
	background: linear-gradient(to bottom right, #81DE6F, #5bb849 90%);
	color: #4F3B17;
	border-radius: 45px;
	font-size: 24px;
	font-weight: 500;
	/* カーソルを乗せたときにゆっくり色を変える設定 */
	transition: 0.5s;
}

/* エントリーボタンホバー時の色を変える */
.mv-entry-button:hover {
	/* background-color: #5bb849; */
	background: linear-gradient(to bottom right, #81DE6F, #5bb849 20%);
	transform: scale(1.03);
	transition: 0.5s;
}


/* コーポレートサイトへのボタン設定だよ */
.mv-tosite-button {
	text-decoration: none;

	/* ボタンの形 */
	display: block;
	width: 100%;
	line-height: 1.5;
	text-align: center;
	padding: 16px 64px;

	/* ボタンのデザイン */
	background: linear-gradient(to bottom right, #f6c1ad, #efa080 90%);
	color: #4F3B17;
	border-radius: 45px;
	font-size: 24px;
	font-weight: 500;

	/* カーソルを乗せたときにゆっくり色を変える設定 */
	transition: 0.5s;
}

/* コーポレートサイトへのボタンホバー時の色を変える */
.mv-tosite-button:hover {
	background: linear-gradient(to bottom right, #f6c1ad, #efa080 20%);
	transform: scale(1.03);
	transition: 0.5s;
}


/* メインビジュアルのスマホ設定だよ */
@media screen and (max-width:1310px) {
	#mainvisual {
		background-position: center 10%, center 70%;
		/* padding-bottom: 80px; */
	}

	.mainvisual-content {
		margin-top: auto;
		margin: 0 auto;
		gap: 20px;

	}

	.mainvisual-content {
		flex-direction: column;
	}

	.mainvisual-content {
		margin-top: 120px;
	}

	.mainvisual-left img {
		width: 100%;
		height: auto;
		display: block;
		margin: auto;
	}

	.mainvisual-right img {
		max-width: 70%;
		height: auto;
		display: block;
		margin: auto;
		margin-bottom: 30px;
	}

	.mv-button-group {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	/* ボタンサイズの設定 */
	.mv-entry-button {
		display: block;
		width: 100%;
		line-height: 1.5;
		text-align: center;
		padding: 30px 10px;

	}

	.mv-tosite-button {
		display: block;
		width: 100%;
		line-height: 1.5;
		text-align: center;
		padding: 30px 10px;
	}
}






/* セクション全部の葉っぱ、h2、サブタイトル、本文のフォント設定だよ */
img[src="images/icon-leaf.png"] {
	width: 60px;
	display: block;
	margin: 0 auto;
	padding-top: 80px;
	margin-bottom: 0px;
	/* --- 適用コード --- */
	animation-name: simple-sway;
	animation-duration: 3s;
	/* 3秒かけて片道移動 */
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	/* 無限に繰り返す */
	animation-direction: alternate;
	/* 往復運動させる */

}

/* 追加 */
@keyframes simple-sway {
	0% {
		/* 始まり: 左に少し移動し、左に少し回転 */
		transform: translateX(-18px) translateY(-6px) rotate(-6deg);
	}

	100% {
		/* 終わり: 右に少し移動し、右に少し回転 */
		transform: translateX(18px) translateY(6px) rotate(6deg);
	}
}



section {
	max-width: 1148px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


h2 {
	font-size: 48px;
	text-align: center;
	margin-top: -20px;
	/* margin-bottom: 7px; */
}

.subtitle {
	font-size: 16px;
	color: #efa080;
	text-align: center;
	margin-top: -7px;
	margin-bottom: 24px;
}

p {
	font-size: 16px;
	text-align: left;
	max-width: 1148px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 24px;
}

.text-center {
	text-align: center;
}

/* 葉っぱ、セクションタイトル、サブタイトルののスマホ設定だよ */
@media screen and (max-width:425px) {
	h2 {
		font-size: 32px;
	}
}

/* コンセプトセクションの設定だよ */
#CONCEPT {
	scroll-margin-top: 30px;
	font-size: 24px;
	font-weight: 400;
	max-width: 1148px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-bottom: 100px;
}

.concept-first {
	font-size: 24px;
}

.concept-second {
	font-size: 30px;
}

/* もっと見るボタン */
.more-button-link {
	text-decoration: none;
	font-size: 16px;
	color: #4F3B17;
	border: 1px solid #4F3B17;
	border-radius: 45px;
	padding: 15px 45px;
	display: inline-block;
	line-height: 1;
	transition: background-color 0.3s;
	margin-right: 0px;
	transition: 0.5s;
}

/* ホバー時 */
.more-button-link:hover {
	background-color: #FFFFFF;
	transform: scale(1.03);
	transition: 0.5s;
}

/* 矢印の設定 */
.more-button-link .arrow {
	margin-left: 8px;
}

.button-container {
	text-align: right;
	width: 100%;
	margin-top: 0;
}

.wave-divider-up {
	/* SVGをセクションの絶対的な下端に固定 */
	position: absolute;
	top: top-100px;
	left: 0;

	/* SVGを親要素の幅いっぱいに広げる */
	width: 100%;

	/* SVGの高さ (viewBoxの縦幅100に合わせることが多い) */
	height: 100px;
	/* 適切な高さに設定してください */

	/* セクションのコンテンツの上に重ならないように z-index を調整 */
	z-index: 1;
}

/* コンセプトセクションのスマホ設定だよ */
@media screen and (max-width:1070px) {
	.business-card-all {
		flex-direction: column;
	}

	.business-card {
		width: auto;
	}

	.concept-first {
		font-size: 20px;
	}

	.concept-second {
		font-size: 24px;
	}


}


/* ここからワークセクションの設定だよ */
#WORK {
	position: relative;
	scroll-margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
	background-color: #FFFFFF;
	padding-bottom: 36px;
}

.work-inner {
	width: 100%;
	background-color: #FFFFFF;

}

.business-card-all {
	display: flex;
	height: auto;
}



/* 文字の白枠だよ */
.business-card {
	width: 50%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	align-items: center;
	background-color: #FFFFFF;
	padding: 0;
	border-radius: 0 15px 15px 0;
	box-shadow: 0 4px 12px rgba(229, 190, 160, 0.2);
}

.work-images {
	width: 100%;
	flex: 0 0 50%;
	padding: 0;
	margin-right: 0;
	border-radius: 15px 0 0 15px;
	overflow: hidden;
	height: 240px;
	box-shadow: 0 4px 12px rgba(229, 190, 160, 0.2);
}


.work-images img {
	width: 100%;
	height: 240px;
	display: block;
	object-fit: cover;
}

.businesscard-content {
	flex: 1;
	padding: 20px;
}

.businesscard-content h3 {
	color: #4F3B17;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 5px;
	text-align: left;
}



.businesscard-content h4 {
	color: #4F3B17;
	font-size: 24px;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 15px;
	line-height: 1.6;
	text-align: left;
}

.businesscard-content p {
	font-size: 16px;
	color: #4F3B17;
	line-height: 1.7;
	margin-top: 0;
	text-align: left;
}

.wave-divider-down {
	/* SVGをセクションの絶対的な下端に固定 */
	position: absolute;
	/* top: top-100px; */
	left: 0;

	/* SVGを親要素の幅いっぱいに広げる */
	width: 100%;

	/* SVGの高さ (viewBoxの縦幅100に合わせることが多い) */
	height: 100px;
	/* 適切な高さに設定してください */

	/* セクションのコンテンツの上に重ならないように z-index を調整 */
	z-index: 1;
	/* 波形を上下逆さに配置する */
	transform: scaleY(-1);
}

/* ワークセクションのスマホ設定 */
@media screen and (max-width:1070px) {
	.business-card-all {
		flex-direction: column;
	}

	.business-card {
		width: auto;
		border-radius: 0 0 15px 15px;
	}

	.businesscard-content h4 {
		font-size: 20px;
	}

	.work-images {
		border-radius: 15px 15px 0 0;
	}

	.work-images img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 100% 0%;

	}

	.text-center {
		text-align: left;
	}

}





/* 募集職種の設定だよ */
#JOBTYPE {
	scroll-margin-top: 30px;
	max-width: 1148px;
	margin-right: auto;
	margin-left: auto;
}

.JOBTYPE-inner {
	width: 100%;
}

.job-title {
	display: flex;
}

.job-card1,
.job-card2,
.job-card3 {
	width: 50%;
	height: 110px;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding: 0;
	box-shadow: 0 4px 12px rgba(229, 190, 160, 0.2);
	margin-bottom: 4px;
}

.job-card1 {
	border-radius: 0 15px 0 0;
}

.job-card3 {
	border-radius: 0 0 15px 0;
}

.job-images {
	width: 100%;
	height: 110px;
	padding: 0;
	margin-right: 0;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(229, 190, 160, 0.2);
}

/* 画像角丸の調整（左上、左下） */
.job-images-top {
	width: 100%;
	height: 110px;
	padding: 0;
	margin-right: 0;
	overflow: hidden;
	border-top-left-radius: 15px;
	box-shadow: 0 4px 12px rgba(229, 190, 160, 0.2);
}

.job-images-bottom {
	width: 100%;
	height: 110px;
	padding: 0;
	margin-right: 0;
	overflow: hidden;
	border-bottom-left-radius: 15px;
	box-shadow: 0 4px 12px rgba(229, 190, 160, 0.2);
}

.job-images img {
	display: block;
	height: 110px;
	object-fit: cover;
	margin-bottom: 0;
}

.job-images-top img {
	display: block;
	height: 110px;
	object-fit: cover;
	margin-bottom: 0;
}

.job-images-bottom img {
	display: block;
	height: 110px;
	object-fit: cover;
	margin-bottom: 0;
}


.job-content p {
	color: #4F3B17;
	font-size: 16px;
	text-align: left;
	margin-bottom: 0px;
}

.job-content {
	padding: 20px;
	width: 548px;
}

.joball {
	padding-bottom: 30px;
}

.JOBTYPE h3 {
	padding-top: 50px;
	font-size: 32px;
}

.JOBTYPE p {
	text-align: center;
}

/* 募集職種のスマホ設定 */
@media screen and (max-width:640px) {
	.job-title {
		flex-direction: column;
	}

	.flow-card1,
	.flow-card2 {
		flex-direction: column;
	}

	.job-card1,
	.job-card2,
	.job-card3 {
		width: auto;
	}

	.job-card1 {
		border-top-right-radius: 0px;
	}

	.job-card3 {
		border-bottom-left-radius: 15px;
	}

	.job-images-top img {
		border-top-right-radius: 15px;
		margin: auto;
	}

	.job-images-bottom {
		border-bottom-left-radius: 0px;
	}

	.job-images-top {
		border-top-right-radius: 15px;
	}

}


/* ここから選考フローだよ */
.flow-card1,
.flow-card2 {
	display: flex;
	justify-content: center;
	gap: 30px;
}

/* flow-icon-groupの最初の子要素=フローアイコンの設定 */
.flow-card1 img:first-child,
.flow-card2 img:first-child {
	width: 97px;
	height: 97px;
	margin-bottom: 10px;
}

.flow-p {
	text-align: center;
}

.flow-card1 p,
.flow-card2 p {
	max-width: 290px;
	text-align: left;
}

/* flow-icon-groupの矢印画像の設定 */
.flow-icon-group img:first-child+img {
	width: 200px;
	height: auto;
}

.flow-icon-group {
	display: flex;
	align-items: center;
	/* 垂直方向（上下）で中央揃え */
}

.flow1 {
	background-image: url("../../images/flowimg-bg1.png");
	background-repeat: no-repeat;
	background-position: center bottom 50px;
	background-size: 100px auto;
	padding: 15px;
	min-height: 10px;
}

.flow2 {
	background-image: url("../../images/flowimg-bg2.png");
	background-repeat: no-repeat;
	background-position: center bottom 50px;
	background-size: 100px auto;
	padding: 10px;
	min-height: 10px;
}

.flow3 {
	background-image: url("../../images/flowimg-bg3.png");
	background-repeat: no-repeat;
	background-position: center bottom 50px;
	background-size: 100px auto;
	padding: 10px;
	min-height: 10px;
}

.flow4 {
	background-image: url("../../images/flowimg-bg4.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100px auto;
	padding: 10px;
	min-height: 10px;
}

.flow5 {
	background-image: url("../../images/flowimg-bg5.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100px auto;
	padding: 10px;
	min-height: 10px;
}

.flow6 {
	background-image: url("../../images/flowimg-bg6.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100px auto;
	padding: 10px;
	min-height: 10px;
}

/* 選考フローのスマホ設定だよ */
@media screen and (max-width:1070px) {

	.flow-p {
		text-align: left;
	}

	.flow-card1,
	.flow-card2 {
		flex-direction: column;
		gap: 50px;
	}

	.flow-card1 {
		margin-bottom: 50px;
	}

	.flow-icon-group {
		display: block;
		align-items: center;
		/* 垂直方向（上下）で中央揃え */
	}

	.flow-icon-group img:first-child+img {
		display: none;
	}

	.flow-icon-group {
		margin-right: 200px;
	}

	.flow-card1 p,
	.flow-card2 p {
		margin-bottom: 10px;

	}
}




/* 働く環境の設定だよ */
#ENBIRONMENT {
	scroll-margin-top: 30px;
	max-width: 1148px;
	margin: 0 auto;
	padding: 0;
	background-color: #FFFFFF;
}

.ENBIRONMENT-inner {
	width: 100%;
	background-color: #FFF;
}

.card-wrapper {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 50px;
}



.ENBIRONMENT-card {
	background-color: #FFFFFF;
	padding: 0;
	margin-bottom: 30px;
	border-radius: 0 0 15px 15px;
	box-shadow: 0 4px 12px rgba(229, 190, 160, 0.2);
}

.ENBIRONMENT-images img {
	width: 100%;
	height: auto;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	display: block;
	box-shadow: 0 4px 12px rgba(229, 190, 160, 0.2);
}

.card-content h3 {
	padding-top: 10px;
}

.card-content p {
	letter-spacing: 0.06em;
	padding: 14px 24px;
	margin-bottom: 0px;
}

/* 働く環境のスマホ設定だよ */
@media screen and (max-width:911px) {
	.card-wrapper {
		flex-direction: column;
		gap: 4px;
	}

	.JOBTYPE,
	.flow-title {
		margin-top: 40px;
	}

	.card-content h3 {
		font-size: 20px;
	}


}



/* ここからメンバー紹介の設定だよ */
#MEMBERS {
	max-width: 100%;
	scroll-margin-top: 30px;
	text-align: center;
	margin: 0;
	/* padding: 80px 10px; */
}

.slider-container {
	position: relative;
	margin: 0 auto;
	max-width: 1440px;
}


.member-card {
	position: relative;
	height: 500px;
}

/* 画像の角丸設定 */
.member-image-wrapper {
	width: 700px;
	border-radius: 15px;
	overflow: hidden;
	margin: 0 auto;

}

.member-image-wrapper img {
	width: 700px;
	max-width: 100%;
	height: auto;
	display: block;
}

.member-info-panel {
	position: absolute;
	padding: 10px 30px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	border-radius: 0 0 15px 15px;
	/* 半透明の白い背景 */
	background-color: rgba(255, 255, 255, 0.7);
	text-align: left;
	/* テキストの配置を左 */
}

.member-profile {
	margin-bottom: 10px;
}


.member-profile .name {
	font-size: 16px;
	color: #4F3B17;
	margin-bottom: 0px;
}

.member-profile .title {
	font-size: 16px;
	color: #4F3B17;
	line-height: 1.5;
	padding-bottom: 10;
	margin-bottom: 0px;
}

.member-message h3 {
	font-size: 24px;
	color: #4F3B17;
	margin-bottom: 10px;
}

.member-message p {
	font-size: 16px;
	color: #4F3B17;
	line-height: 1.5;
	margin-bottom: 10px;

}

.slick-prev,
.slick-next {
	width: 40px;
	height: 40px;
}

.slick-prev::before,
.slick-next::before {
	font-size: 50px;
	color: #F8C59C;
}

/* スリックボタンの位置調整 */
.slick-next {
	right: 270px;
	z-index: 1;
}

.slick-prev {
	left: 265px;
	z-index: 1;
}

.sp-break {
	display: none;
}

/* メンバー紹介のスマホ設定だよ */
@media screen and (max-width:768px) {

	.member-image-wrapper {
		/* position: relative; */
		width: 100%;
		padding: 0 17px;
	}

	.member-image-wrapper img {
		max-width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 50%;
		border-radius: 15px 15px 0 0;
	}



	.member-message h3 {
		font-size: 16px;
		color: #4F3B17;
		margin-bottom: 10px;
	}

	.member-profile .name,
	.member-profile .title {
		font-size: 14px;
	}

	.member-message .member-message-p {
		font-size: 13px;

	}

	.member-info-panel {
		width: 193px;
		height: auto;
		position: relative;
		padding: 0 17px;
	}

	.more-button-link {
		padding: 8px 10px;
	}

	.member-card {
		max-width: 250px;
		height: auto;
	}

	/* スマホの左右ボタン位置調整 */
	.slick-next {
		right: 55px;
		z-index: 1;
	}

	.slick-prev {
		left: 56px;
		z-index: 1;
	}

	.sp-break {
		display: inline;
	}

	.slick-prev::before,
	.slick-next::before {
		font-size: 30px;
		color: #F8C59C;
	}




}

















/* 数字で見るの設定だよ */
#DATA {
	scroll-margin-top: 30px;
	text-align: center;
	background-color: #FFF;
}

.DATA-inner {
	width: 100%;
	background-color: #FFF;
}

.DATA P {
	text-align: center;
}

.name {
	font-size: 24px;
	margin-bottom: 20px;

}

.glaf {
	display: flex;
	justify-content: center;
	gap: 116px;
}

.glaf1,
.glaf2,
.glaf3 {
	text-align: center;
}

.glaf1 .name,
.glaf2 .name,
.glaf3 .name {
	text-align: center;
	font-size: 20px;
}

.glaf img {
	width: 265px;
	height: auto;
	margin-bottom: 13px;

}

/* 数字で見るのスマホ設定 */
@media screen and (max-width:1100px) {

	.glaf {
		flex-direction: column;
		gap: 30px;
	}

	#footer .inner {
		height: 200px;
	}

	.inner {
		align-items: center;
	}
}









/* 下部エントリーの設定だよ */
#CTA {
	margin-top: 100px;
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 80px;
}

.CTA p {
	color: #4F3B17;
	font-size: 24px;
	text-align: left;
}

/* メインビジュアルのCTAボタンを再利用（設定変えてる） */
.under-button-group {
	margin: auto;
	gap: 15px;
	margin-top: 20px;
	display: flex;
}

/* ここのPだけ下方向の外側の余白をゼロにする */
.no-margin-bottom {
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

.contact1 {
	width: 100%;
}

.contact1 P {
	font-size: 20px;
}

.contact-link {
	color: #5FB84D;
	text-decoration: underline;
}

.contact-link:hover {
	color: #449a33;

}



.contact2 p,
.contact3 p {
	font-size: 16px;
}

.contactall {
	max-width: 416px;
	margin: auto;

}

.contact1,
.contact2,
.contact3 {
	width: 100%;
	/* 親要素（.contactall）の幅いっぱいに広げる */
	/* マージンの中央寄せをすべて削除 */
	margin-left: 0;
	margin-right: 0;
}

/* 下部CTAボタンのスマホ設定 */
@media screen and (max-width:800px) {

	.under-button-group {
		flex-direction: column;
		display: block;

	}

	.contact3 {
		width: 100%;
		display: block;
		text-align: left;
		white-space: normal;
	}

	.contact1 p {
		font-size: 16px;
		font-weight: 800;
	}

	.contact2 p,
	.contact3 p {
		font-size: 14px;
	}

	.contactall {
		margin-top: 30px;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

}




/* フッターの設定だよ */
#footer .inner {
	background-color: #4F3B17;
	/* height: 100px; */
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;

}

#footer ul {
	list-style: none;
	display: flex;
	justify-content: center;
	padding: 0;
	margin-top: 24px;
	margin-bottom: 24px;
}

#footer li {
	margin: 0 67px;
}

#footer a {
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s;
}


#footer li a:hover {
	color: #F8C59C;

}

/* フッターのスマホ設定 */
@media screen and (max-width:830px) {
	#footer ul {
		flex-direction: column;
		gap: 16px;
	}


}




/** -----------------------------------------------
  PC :  画面の横幅が641px以上
------------------------------------------------**/
.gnav-sp-wrap {
	display: block;
}

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

.sp-only {
	display: none;
}

.inner {
	padding: 0 24px;
}




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


/** -----------------------------------------------
  Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media screen and (max-width:640px) {
	.example {
		font-size: 20px;
		color: #AD8651;
	}

	.gnav-sp-wrap {
		display: none;
		z-index: 3;
	}


	.sp-only {
		display: inline;
	}

}