@charset "UTF-8";

/* headder部分 */

.header {
	position: fixed;
	top: 0px;
	background-color: #E0F2CD;
	width: 100%;
	height: 88px;
	z-index: 100;
}

.header-list {
	display: flex;
	align-items: center; /* 追加：全体の上下中央揃え */
    height: 100%;        /* 追加：親の高さ88pxいっぱいに広げる */
	font-family: "zen kaku Gothic New";
	font-size: clamp(16px, 1.5vw, 20px); /* 画面幅に応じて16px〜20pxで伸縮 */
	font-weight: 400;
}

header nav ul li a{
	color: #34362A;
	font-weight: 500;
	text-decoration: none;

	transition: all 0.3s ease;
}

header nav ul li a:hover{
	color: #265C0080;
}

.header-title{
	display: flex;
	align-items: center; /* 追加：ロゴ画像とテキストの上下中央揃え */
	font-family: "zen kaku Gothic New";
	font-size: 20px;
	font-weight: 500;
	margin-left: clamp(16px, 3vw, 32px);
	gap: clamp(16px, 3vw, 42px);
	margin-right: auto;
}

.header-title img{
	display: block;
	width: 100%;
	max-width: 204px ; 
	height: auto; /* 24px固定よりもautoにすると比率崩れを防げます */
}

.hamburger-btn {
	display: none;
}

/* navの中身（メニューとボタン）を横並びにする（★これが一番重要です！） */
.nav-menu {
    display: flex;
    align-items: center; /* 上下中央揃え */ 
}

.header-menu {
	display: flex;
	gap: clamp(12px, 2vw, 24px); /* 固定の24pxから伸縮する指定へ */
	list-style: none;
	margin: 28px auto;
}

.header-button-entry {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	margin: 14px 32px 14px 32px;
	width: 164px;
	height: 60px;
	box-sizing: border-box;

	background-color: #265C00;
	border-radius: 100px;

	color: #FDFFFF;
	font-family: "zen kaku Gothic New";
	font-size: 20px;
	font-weight: 400;
	text-decoration: none;

	transition: all 0.3s ease;

}

a.header-button-entry:hover{
	background-color: #FDFFFF;
	color: #265C00;
	font-weight: 500;
}

/* fv部分 */

.fv {
	background-color: #FDFFFF;
	height: 812px;
	margin-top: 88px;
	font-family: "Zen Kaku Gothic New";
}

.image-list .slick-slide {
	margin-right: 32px; 
}

.image-list {
	margin-top: 32px;
	width: 100%;
	max-width: 100%;
	
}

.image-list img {
    width: 808px;
	height: 616px;
    object-fit: cover; /* 枠に合わせてトリミングし、縦横比を崩さない設定 */
    display: block;   
	border-radius: 60px; 
	box-sizing: border-box; /* paddingを含めたサイズ計算にする */
}

.fv-title {
	font-size: clamp(32px, 5vw, 64px); /* 画面幅に応じて32px〜64pxで伸縮 */
    margin: 48px auto 48px 5vw;        /* 余白もvwに変更するとスムーズ */
}

.sp-only {
	display: none;
}


/* 追従ボタン */

.circle-button{
	position: fixed;
    right: 32px;            /* 右端からの距離（デザインに合わせて調整） */
    bottom: 32px;           /* 下端からの距離（または top: 50%; transform: translateY(-50%); で上下中央） */
    z-index: 100;           /* 他のコンテンツより手前に表示させる */

	display: flex;
	flex-direction: column;
    align-items: center;       /* 上下中央揃え */
    justify-content: center;
	text-decoration: none;

	margin: 0 auto;
	width: 160px;
	box-sizing: border-box;

	background-color: #265C00; 
    border-radius: 50%;        /* 2. 四角い枠を丸めて「楕円」にする */
	width: 160px;
	height: 160px;
	aspect-ratio: 1 / 1; /* 横1104:縦800の比率を維持 */
    box-sizing: border-box;	

	transition: all 0.3s ease;
}

.circle-button span{
	color: #FDFFFF;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
	width: 112px;
    margin-bottom: 8px;

}

.circle-button img{
	width: 24px;
	height: 24px;
	display: block;
}

.circle-button:hover{
	background-color: #93AD80;
}

/* about部分 */

.about {
	position: relative;
	background-color: #B3DE8166;
	padding-top: 104px;
	padding-bottom: 104px;
	width: 100%;
	overflow: hidden; /* はみ出た円で横スクロールが出ないように設定 */
}

.about-text {
	position: relative;
	z-index: 1;                 /* 重なり順：1 */
	margin: 0 auto;
	width: 90%;
    max-width: 1104px;          /* PCなど画面が広いときは最大1104pxで止める */
	box-sizing: border-box;

	background-color: #FDFFFF; 
    border-radius: 50%;        /* 2. 四角い枠を丸めて「楕円」にする */
	width: 1104px;
	height: 720px;
    display: flex;
	align-items: center;
	justify-content: center;
	padding: 86px 40px;        /* 3. 上下の丸みに文字が重ならないよう余白をつける */
}

/* 文字コンテンツ（最前面レイヤー） */
.about-inner {
    position: relative;
    z-index: 3;                 /* 重なり順：3（写真より手前に表示） */
	width: 100%;
}

.about-title {
	text-align: center;
	font-family: "zen kaku Gothic New";
	font-size: 42px;
	margin-bottom: 42px;
}

.about-description {
	line-height: 2.5;
	display: block;
	text-align: center;
	font-family: "zen kaku Gothic New";
	font-size: 20px;
	margin-bottom: 56px;
}

.about-description span {
    display: block;
}

.about-button {
	/* 1. 見ためと位置の調整 */
    display: flex;             /* 文字とアイコン（▷）を横並びにする */
    align-items: center;       /* 上下中央揃え */
    justify-content: end; 
    margin: 48px auto 0 auto;  /* 上に余白を空けて、中央に配置 */
	width: 100%;
    max-width: 320px;              
    padding: 12px 32px;              
    box-sizing: border-box;

	/* 2. 背景・枠線・角丸の設定 */
    background-color: #FDFFFF; 
    border: 2px solid #265C00; 
    border-radius: 60px;       /* カプセル型の丸み（高させの半分の数値） */

	/* 3. 文字の設定 */
    color: #34362A;            
    font-family: "zen kaku Gothic New", sans-serif;
    font-size: 16px;
    font-weight: 400;         
    text-decoration: none;     /* aタグの下線を消す */

	transition: all 0.3s ease;
}

.about-button:hover{
	text-shadow: 0 0 0.5px #34362A;
	border-color: #265C0080;
}

.about-button img:last-of-type {
	width: 16px;
	height: 16px;
	margin-right: 24px;

	transition: transform 0.3s ease;	
}

.about-button:hover img:last-of-type{
	transform: translateX(4px);
}

.about-button span {
	display: inline-block; /* 幅を指定できるようにする */
	width: 140px;          /* テキストボックスの幅を固定 */
	font-size: 16px;
	line-height: 1.0;
	text-align: center;
	margin-right: 32px; /* spanと三角形の間の最小限の隙間 */
}

/* 2. 写真の丸（中央基準で絶対配置） */
.bg-circle {
    position: absolute;
    z-index: 2;                 /* 重なり順：2（白楕円より手前、文字より奥） */
    pointer-events: none;
}

.bg-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;    /* 縦横比を崩さず収める */
	display: block;
}

.bg-circle-1 {
	width: 216px;
	height: 216px;
	top: 100px;
	left: calc(50% - 600px);   /* 中央から左へ500pxの位置 */
}

.bg-circle-2 {
	width: 216px;
	height: 216px;
	top: 100px;
	left: calc(50% + 400px);   /* 中央から右へ400pxの位置 */
}

.bg-circle-3 {
	width: 216px;
	height: 216px;
	top: 500px;
	left: calc(50% - 520px);   /* 中央から左へ520pxの位置 */
}

.bg-circle-4 {
	width: 216px;
	height: 216px;
	top: 500px;
	left: calc(50% + 300px);   /* 中央から右へ300pxの位置 */
}

.bg-white-circle {
	position: absolute;      /* 画面に対して固定（スクロール追従） */
	z-index: 0;                 /* 重なり順：0（一番奥） */
	pointer-events: none; /* マウスイベントを無効化（下のリンクやボタンを押しやすくする） */
}

.bg-white-circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;    /* 縦横比を崩さず収める */
	display: block;
}

/* 画面の中央(left: 50%)を基準にして配置することで、画面幅が変わっても楕円にくっつきます */
.bg-white-circle-1 {
	width: 120px;
	height: 120px;
	top: 0px;
	left: calc(50% - 600px);   /* 中央から左へ500pxの位置 */
}

.bg-white-circle-2 {
	width: 100px;
	height: 100px;
	top: 0px;
	left: calc(50% + 500px);   /* 中央から右へ400pxの位置 */
}

.bg-white-circle-3 {
	width: 100px;
	height: 100px;
	top: 400px;
	left: calc(50% - 720px);   /* 中央から左へ500pxの位置 */
}

.bg-white-circle-4 {
	width: 100px;
	height: 100px;
	top: 400px;
	left: calc(50% + 560px);   /* 中央から右へ400pxの位置 */
}

.bg-white-circle-5 {
	width: 120px;
	height: 120px;
	top: 700px;
	left: calc(50% - 600px);   /* 中央から左へ500pxの位置 */
}

.bg-white-circle-6 {
	width: 120px;
	height: 120px;
	top: 700px;
	left: calc(50% + 480px);   /* 中央から右へ400pxの位置 */
}

/* business部分 */

.business {
	position: relative; /* 右下白い丸の固定のためのコード */
	background-color: #F2B7A166;
	padding-top: 100px;
	padding-bottom: 100px;
	width: 100%;
	overflow: hidden;   /* ★画面外にはみ出た丸で横スクロールが発生するのを防止 */
}


.business-text {
	margin: 0 auto;
	width: 100%;
	max-width: 1104px;
	box-sizing: border-box;
}

.business-column{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	width: 970px;         /* 全体の横幅（デザインに合わせて調整） */
    max-width: 100%;       /* はみ出し防止 */
    margin: 0 auto 40px auto;
}

.business-column-image{
	width: 420px;
	flex-shrink: 0;
}

.business-column-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 20px;
	box-shadow: 2px 2px 10px 0px #34362A4D;
}

.business-title-block {
	position: relative; /* タイトル横の白い丸の固定のためのコード　*/
	display: flex;
	align-items: center; 
	gap: 64px;
	margin-bottom: 48px;

}

.business-title,
.business-description {
    position: relative;
    z-index: 2; /* ★白丸（z-index:1）より手前に表示 */
}

.business-title {
	font-family: "zen kaku Gothic New";
	font-size: 38px;
}

.business-description {
	display: block;
	font-family: "zen kaku Gothic New";
	font-size: 16px;
	line-height: 2.0;
}

.business-description span{
	display: block;
}

.business-subtitle {
	display: flex;
	align-items: center;            /* テキストと線の上下中央揃え */
	column-gap: 16px;               /* 線とテキストの間の隙間 */
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 28px;
	font-weight: 500;
	margin-bottom: 24px;
}

.business-subtitle::before {
	content: "";						/* 擬似要素を表示させるために必須のプロパティです。 中身は空（""）にして、単なる図形（線）として扱います。 */
	display: block;
	width: 2px;                      /* 線の太さ */
	height: 32px;                     /* 線の高さ（文字サイズに連動。px指定も可） */
	background-color: #F2B7A1;       /* 線の色 */
	flex-shrink: 0;                  /* 改行時に線が潰れるのを防ぐ */
}

.business-subdescription {
	display: block;
	font-family: "zen kaku Gothic New";
	font-size: 16px;
	font-weight: 400;
	line-height: 2.0;

	position: relative;
    z-index: 1;
}

.business-button {
	/* 1. 見ためと位置の調整 */
    display: flex;             /* 文字とアイコン（▷）を横並びにする */
    align-items: center;       /* 上下中央揃え */
	justify-content: end;
    margin: 48px auto 0 auto;  /* 上に60pxの余白を空けて、中央に配置 */
    width: 320px;              /* ボタンの横幅（デザインに合わせて調整） */
    padding: 12px 32px;        
    box-sizing: border-box;

	/* 2. 背景・枠線・角丸の設定 */
    background-color: #FDFFFF; /* 白の下地 */
    border: 2px solid #265C00;  /* 緑の枠線（※緑色のカラーコードを指定） */
    border-radius: 60px;       /* カプセル型の丸み（高させの半分の数値） */

	/* 3. 文字の設定 */
    color: #34362A; 
    font-family: "zen kaku Gothic New", sans-serif;
    font-size: 16px;
    font-weight: 400; 
    text-decoration: none;     /* aタグの下線を消す */

	position: relative;
    z-index: 1;

	transition: all 0.3s ease;
}

.business-button:hover{
	text-shadow: 0 0 0.5px #34362A;
	border-color: #265C0080;
}


.business-button img:last-of-type {
	width: 16px;
	height: 16px;
	margin-right: 24px;

	transition: transform 0.3s ease;
}

.business-button:hover img:last-of-type{
	transform: translateX(4px);
}

.business-button span {
	display: inline-block; /* 幅を指定できるようにする */
	width: 80px;          /* テキストボックスの幅を固定 */
	font-size: 16px;
	line-height: 1.0;
	text-align: left;
	margin-right: 56px; /* spanと三角形の間の最小限の隙間 */
}

.bg-white-circle {
    position: absolute;
    z-index: -2; 
    pointer-events: none;
}

.bg-white-circle-business-1{
	width: 160px;
	height: 160px;
	top: -50px;
	left: -80px;
}

.bg-white-circle-business-2{
	width: 240px;
	height: 240px;
	bottom: 50px; /* 下からの距離で指定する方がズレにくい */
    right: 5%;    /* pxではなく%指定にすることで画面端からの距離を一定に保つ */
}



/* enviroment部分 */

.enviroment {
	position: relative; /* 右下ピンクの丸の固定のためのコード */
	background-color: #FDFFFF;
	padding-top: 100px;
	padding-bottom: 100px;
	width: 100%;
	overflow: hidden;   /* ★画面外にはみ出た丸で横スクロールが発生するのを防止 */
	
}

.enviroment-text {
	margin: 0 auto;
	width: 100%;
	max-width: 1104px;
	box-sizing: border-box;
}

.enviroment-column{
	display: flex;
    gap: 50px;
	width: 1104px;

}
.enviroment-title-block {
	position: relative; /* タイトル横のピンクの丸の固定のためのコード　*/
	display: flex;
	align-items: center; 
	gap: 64px;
	margin-bottom: 48px;

}

.enviroment-title,
.enviroment-description,
.enviroment-column {
    position: relative;
    z-index: 2; /* ★ピンク丸（z-index:1）より手前に表示 */
}

.enviroment-title {
	font-family: "zen kaku Gothic New";
	font-size: 38px;
}

.enviroment-description {
	display: block;
	font-family: "zen kaku Gothic New";
	font-size: 16px;
	line-height: 2.0;
}

.enviroment-description span{
	display: block;
}

.enviroment-column-item{
	gap: 50px;
	width: 335px;

	position: relative;
    z-index: 1;
}

.enviroment-column-image{
	width: 100%;
}

/* 内部のimgタグのサイズを親枠に合わせる（追加） */
.enviroment-column-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミングし、縦横比を崩さない設定 */
    display: block;    /* 画像下の微小な隙間を消す設定 */
	border-top: 1px solid #265C004D;
	border-right: 1px solid #265C004D;
	border-left: 1px solid #265C004D;
	border-radius: 20px 20px 0 0; 
	box-shadow: 2px 2px 10px 0px #34362A4D;

	box-sizing: border-box; /* paddingを含めたサイズ計算にする */
}

.enviroment-column-text {
    background-color: #FDFFFF; 
	border-bottom: 1px solid #265C004D;
	border-right: 1px solid #265C004D;
	border-left: 1px solid #265C004D;
    border-radius: 0 0 20px 20px;  /* 上の角は直角(0)、下の左右の角だけ丸める(24px) */
    padding: 24px 32px; /* 上下 24px、左右 32px の内側余白を設定 */
	box-shadow: 2px 2px 10px 0px #34362A33;
    
    box-sizing: border-box; /* paddingを含めたサイズ計算にする */
}

.enviroment-subtitle {
	font-family: "zen kaku Gothic New";
	font-size: 22px;
	font-weight: 500;
	margin-bottom: 16px;
}

.enviroment-subdescription {
	font-family: "zen kaku Gothic New";
	font-size: 16px;
	font-weight: 400;
	width: 100%;
	line-height: 2.0;
}

.enviroment-button {
	/* 1. 見ためと位置の調整 */
    display: flex;             /* 文字とアイコン（▷）を横並びにする */
    align-items: center;       /* 上下中央揃え */
    justify-content: end;   
	margin: 48px auto 0 auto; 
    width: 320px;              
    padding: 12px 32px;             
    box-sizing: border-box;

	/* 2. 背景・枠線・角丸の設定 */
    background-color: #FDFFFF; 
    border: 2px solid #265C00;  
    border-radius: 60px;      

	/* 3. 文字の設定 */
    color: #34362A;            
    font-family: "zen kaku Gothic New", sans-serif;
    font-size: 16px;
    font-weight: 400;         
    text-decoration: none;     /* aタグの下線を消す */

	position: relative;
    z-index: 1;

	transition: all 0.3s ease;
}	

.enviroment-button:hover{
	text-shadow: 0 0 0.5px #34362A;
	border-color: #265C0080;
}


.enviroment-button img:last-of-type {
	width: 16px;
	height: 16px;
	margin-right: 24px;

	transition: transform 0.3s ease;
}

.enviroment-button:hover img:last-of-type{
	transform: translateX(4px);
}

.enviroment-button span {
	display: inline-block; /* 幅を指定できるようにする */
	width: 80px;          /* テキストボックスの幅を固定 */
	font-size: 16px;
	line-height: 1.0;
	text-align: left;
	margin-right: 56px; /* spanと三角形の間の最小限の隙間 */
}


.bg-pink-circle {
    position: absolute;
    z-index: -1; /* ★タイトルの後ろに配置 */
    pointer-events: none;
}

.bg-pink-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bg-pink-circle-enviroment-1{
	width: 160px;
	height: 160px;
	top: -50px;
	left: -80px;
}

.bg-pink-circle-enviroment-2{
	width: 240px;
	height: 240px;
	bottom: 50px; /* 下からの距離で指定する方がズレにくい */
    right: 5%;    /* pxではなく%指定にすることで画面端からの距離を一定に保つ */
}


/* member部分 */

.member {
	position: relative;
	background-color: #B3DE8166;
	padding-top: 100px;
	padding-bottom: 100px;
	width: 100%;
}

.member-text {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1104px;
	box-sizing: border-box;
}

.member-title-block {
	display: flex;
	align-items: center; 
	gap: 64px;
	margin-bottom: 64px;
}

.member-title,
.member-description,
.member-card {
    position: relative;
    z-index: 2; /* ★ピンク丸（z-index:1）より手前に表示 */
}

.member-title {
	font-family: "zen kaku Gothic New";
	font-size: 38px;
}

.member-description {
	display: block;
	font-family: "zen kaku Gothic New";
	font-size: 16px;
	line-height: 2.0;
}

.member-description span{
	display: block;
}

.member-card{
	display: flex;
	flex-wrap: wrap;
	row-gap: 64px;    /* 縦の間隔（上下ギャップ） */
    column-gap: 32px; /* 横の間隔（左右ギャップ） */
	padding: 0 ; /* 左の余白を消す */
 	margin: 0 auto ;
	max-width: 1104px;
}

.member-card-item{
	/* 1. 見ためと位置の調整 */
    position: relative;
	display: flex;             /* 文字とアイコン（▷）を横並びにする */
	width: 536px;  
    height: 224px;              
    box-sizing: border-box;
	
	/* 2. 背景・枠線・角丸の設定 */
    background-color: #FDFFFF; 
    border: 2px solid #265C00;  
    border-radius: 20px;      

	/* 3. 文字の設定 */
    color: #34362A;            
    font-family: "zen kaku Gothic New", sans-serif;
    font-size: 16px;
    font-weight: 400;         
    text-decoration: none;     /* aタグの下線を消す */
}

.member-card-item img{
	position: absolute;
	left: 24px;
	bottom: 0px;
	display: flex;
	justify-content: flex-start;
	width: 172px;
	height: 252px;
	box-sizing: border-box;
}

.arrow-btn {
	position: absolute; /* ★絶対配置 */
	right: 64px;       /* 右端からの距離（好みで調整） */
	bottom: 40px;      /* 下端からの距離（好みで調整） */

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 56px;
	height: 32px;
	border-radius: 20px;

	background-color: #fdffff;
	border: 1px solid #265C00;
	color: #265C00;

	transition: all 0.3s ease;
}

.arrow-btn:hover{
	background-color: #265C00;
	border: 1px solid #265C00;
	color: #FDFFFF;
}

.member-card-text{
	display: flex; 
	flex-direction: column; /* 内部要素（名前と役職）を縦並びにする */
	/* 画像の幅(172px) + 左余白(80px) を考慮して、
       カード左端からの開始位置を「固定（252px）」にします */
    margin-left: 252px; 
    /* 右の矢印ボタンに被らないよう余白を確保 */
    padding-right: 48px;
	gap: 8px;
	margin-top: 42px;
}

.member-name{
	color: #34362A;            
    font-family: "zen kaku Gothic New", sans-serif;
    font-size: 20px;
    font-weight: 500;
}

.member-position{
	color: #34362A;            
    font-family: "zen kaku Gothic New", sans-serif;
    font-size: 16px;
    font-weight: 400;
	width: auto;
}

.member-position span{
	display: inline;
}

.bg-white-circle{
    position: absolute;
    z-index: 1; /* ★タイトルの後ろに配置 */
    pointer-events: none;
}

.bg-white-circle-member-1{
	width: 160px;
	height: 160px;
	top: -50px;
	left: -80px;
}

.bg-white-circle-member-2{
	width: 240px;
	height: 240px;
	bottom: 50px; /* 下からの距離で指定する方がズレにくい */
    right: 5%;    /* pxではなく%指定にすることで画面端からの距離を一定に保つ */
}


/* recruit部分 */

.recruit {
	position: relative; /* 右下ピンクの丸の固定のためのコード */
	background-color: #FDFFFF;
	padding-top: 100px;
	padding-bottom: 100px;
	width: 100%;
	overflow: hidden;   /* ★画面外にはみ出た丸で横スクロールが発生するのを防止 */
}

.recruit-text {
	margin: 0 auto;
	width: 100%;
	max-width: 1104px;
	box-sizing: border-box;
}

.recruit-title-block {
	position: relative; /* タイトル横のピンクの丸の固定のためのコード　*/
	display: flex;
	align-items: center; 
	gap: 64px;
	margin-bottom: 68px;
}

.recruit-title,
.recruit-description,
.recruit-list {
    position: relative;
    z-index: 2; /* ★ピンク丸（z-index:1）より手前に表示 */
}

.recruit-title {
	font-family: "zen kaku Gothic New";
	font-size: 38px;
}

.recruit-description {
	display: block;
	font-family: "zen kaku Gothic New";
	font-size: 16px;
	line-height: 2.0;
}

.recruit-description span{
	display: block;
}

.recruit-list {
	display: flex;
	flex-wrap: wrap;
	row-gap: 24px;    /* 縦の間隔（上下ギャップ） */
    column-gap: 68px; /* 横の間隔（左右ギャップ） */
  	list-style: none ;
    padding: 0 ; /* 左の余白を消す */
 	margin: 0 auto ;
	max-width: 1104px;
}

.recruit-list-button{
	display: inline-flex;
	align-items: center;
	text-decoration: none;

	transition: all 0.3s ease;
}

.recruit-list-button:hover{
	text-shadow: 0 0 0.5px #34362A;
	border-color: #265C0080;
}

.recruit-list-button img:first-child {
	width: 48px;
	height: 48px;
    margin-right: 42px; /* ★アイコンと文字の間の隙間 */
}

.recruit-list-button img:last-of-type {
	width: 20px;
	height: 20px;

	transition: transform 0.3s ease;
}

.recruit-list-button:hover img:last-of-type{
	transform: translateX(4px);
}

.recruit-list-button span{
	display: inline-block; /* 幅を指定できるようにする */
	width: 180px;          /* テキストボックスの幅を固定 */
	font-size: 20px;
	text-align: left;
	margin-right: 80px; /* spanと三角形の間の最小限の隙間 */
}

.recruit-list li{
	/* gapが68pxの場合、1列に2つ並べるために (100% - 68px) / 2 と計算 */
	width: calc((100% - 68px) / 2);
	box-sizing: border-box;
}

.recruit-list a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 96px;
	padding: 16px 60px;
	box-sizing: border-box;

	/* 背景・枠線・見た目 */
	background-color: #FDFFFF;
	border: 2px solid #265C00;
	border-radius: 20px;

	/* 文字設定 */
	color: #34362A;
	font-family: "zen kaku Gothic New";
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
}

.bg-pink-circle {
    position: absolute;
    z-index: 1; /* ★タイトルの後ろに配置 */
    pointer-events: none;
}

.bg-pink-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bg-pink-circle-recruit-1{
	width: 160px;
	height: 160px;
	top: -50px;
	left: -80px;
}

.bg-pink-circle-recruit-2{
	width: 240px;
	height: 240px;
	bottom: 50px; /* 下からの距離で指定する方がズレにくい */
    right: 5%;    /* pxではなく%指定にすることで画面端からの距離を一定に保つ */
}

/* entry部分 */

.entry {
	background-image: url(../../images/bagkground-image-hands.png); 
	background-size: cover;      /* エリア全体を覆うように拡大縮小 */
	background-position: center; /* 背景を中央寄りに配置 */
	padding-top: 136px;
	padding-bottom: 136px;
	width: 100%;
}

.entry-title-block{
	text-align: center;
}

.entry-title {
	color: #FDFFFF;
	font-family: "zen kaku Gothic New";
	font-size: 56px;
	margin-bottom: 32px;
}

.entry-description {
	color: #FDFFFF;
	font-family: "zen kaku Gothic New";
	font-size: 24px;
}

.entry-button {
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	margin: 80px auto 0 auto;
	width: 318px;
	height: 88px;
	box-sizing: border-box;
	text-decoration: none;

	color: #265C00;
	background-color: #FDFFFF;
	border: 2px solid #265C00;
	border-radius: 20px;

	transition: all 0.3s ease;
}

.entry-button span{
	font-family: "zen kaku Gothic New";
	font-size: 28px;
	font-weight: 400;
}

.entry-button:hover{
	background-color: #265C00;
	border: 2px solid #265C00;
	color: #FDFFFF;
	font-weight: 600;
}

.entry-list{
	color: #FDFFFF;
	display: flex;
	font-family: "zen kaku Gothic New";
	font-size: 16px;
	gap: 16px;
	justify-content: center;
	list-style: none;
	text-align: center;
	margin-top: 160px;
}

.entry-list-text {
	color: #FDFFFF;
	list-style: none;
	text-decoration: none;

	transition: all 0.3s ease;
}

.entry-list-text:hover{
	color: #265C00;
}

.copyright{
	color: #FDFFFF;
	font-family: "zen kaku Gothic New";
	font-size: 16px;
	text-align: center;
}

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



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



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



/** -----------------------------------------------
  tablet :  画面の横幅が640～1200pxまで(デザインの違和感修正のため1200pxに設定しています)
------------------------------------------------**/
@media (max-width: 1200px) {

/* PC用の改行を打ち消す */
.pc-only {
    display: none;
}

.tab-only {
	display: inline;
}

.business-title,
.enviroment-title,
.member-title,
.recruit-title{
	width: 256px;
}

.business,
.enviroment,
.member,
.recruit{
	padding-top: 50px;
	padding-bottom: 50px;
}
	 /* セクションごとの左右余白と縦の配置調整 */
.business-text,
.enviroment-text,
.member-text,
.recruit-text,
.entry-text {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

.business-title-block,
.enviroment-title-block,
.member-title-block,
.recruit-title-block{
	margin-bottom: 48px;
}

  	/* 画面外へのはみ出しによる横スクロールを防止 */
body {
	overflow-x: hidden;
}

  /* ----------------------------------------
     1. Header（ヘッダー部分）
  ---------------------------------------- */
.header {
	position: fixed;
	top: 0px;
	background-color: #E0F2CD;
	width: 100%;
	height: 88px;
	aspect-ratio: 1 / 1;
	z-index: 100;
}

 /* スマホ表示時のロゴサイズ調整 */
.header-title img {
    width: 204px ; 
	height: auto; /* 24px固定よりもautoにすると比率崩れを防げます */
}
  
  /* テキストの文字サイズや余白もズレる場合は必要に応じて調整してください */
.header-title {
    display: flex;
    align-items: center;
    gap: 8px; /* ロゴと「中途採用サイト」の文字の間隔 */
}

.header-title p{
	display: none;
}
 
  /* --- PC用のメニュー文字（事業について等）だけを隠す --- */
.header-list nav {
    display: none;
}

  /* --- ヘッダー全体の配置調整（ロゴ＝左、右グループ＝右） --- */
.header-list {
    display: flex;
    justify-content: space-between; /* 左右両端に振り分ける */
    align-items: center;
	height: 88px;
}

  /* --- 右側グループ（エントリーボタン＋ハンバーガー）の調整 --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 24px; /* エントリーボタンとハンバーガーの間の隙間 */
	padding: 0 20px 0 0;
}

  /* --- エントリーボタンをタブレット用に少し小さく調整 --- */
.header-button-entry {
    display: flex; /* 非表示を解除 */
	width: 164px;
	height: 60px;
    font-size: 20px;
	margin: 0;
}

  /* --- ハンバーガーボタンを表示・装飾 --- */
.hamburger-btn {
    display: flex; /* スマホの時だけ表示 */
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 0 ;
    cursor: pointer;
}

  /* 三本線のデザイン */
.hamburger-btn span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 2px;
}


  /* ----------------------------------------
     2. FV（メインビジュアル）
  ---------------------------------------- */
 
.fv{
	position: relative;
	height: 670px;
	margin: 88px 0 0 0 ;
}
 
 .fv-list{
	margin: 0px;
	height: 622px;
}

.image-list img {
	height: 488px;
}

.fv-title {
	position: absolute;
	line-height: 1.4;
    text-align: left;
	margin: 48px auto 48px 5vw;        /* 余白もvwに変更するとスムーズ */
}

.circle-button.tab-only {
    display: flex;
}

/* ----------------------------------------
  about
---------------------------------------- */
.about-text {
    height: auto;              /* 高さの固定を解除 */
    min-height: 500px;
    border-radius: 15%;       /* 画面が狭い時は完全な楕円から角丸に変更して文字収まりを良くする */
    padding: 60px 20px;
    margin: 0 20px;            /* 左右に余白を確保 */
    width: calc(100% - 40px);
	padding: 86px 40px;        /* 3. 上下の丸みに文字が重ならないよう余白をつける */
}

/* 内部のテキストフォントサイズ調整 */
.about-title {
    font-size: 42px;
}
    
.about-description {
     font-size: 20px;
     line-height: 2.5;
}

.bg-circle-2{
	width: 200px;
	height: 200px;
	top: 100px;
	left: 82%;   /* 中央から右へ400pxの位置 */
}

.bg-circle-3{
	width: 200px;
	height: 200px;
	top: 500px;
	left: 0%;   /* 中央から左へ520pxの位置 */
}


/* ----------------------------------------
  business
---------------------------------------- */

.business-subdescription span{
	display: inline;
}


/* ----------------------------------------
  environment
---------------------------------------- */

.enviroment-text {
	width: 100%;
}

.enviroment-column{
	display: flex;
	flex-direction: column;
    gap: 42px;
	width: 335px;
	margin: 0 auto;
}

/* ----------------------------------------
  member
---------------------------------------- */
 

.member-card{
	position: relative;
	flex-direction: column;
	align-items: center;
}


.member-position{
	width: 100%;
	justify-self:end;
}

.member-position span{
	display: inline;
	line-height: 1.3;
}

.member-card-text img{
	position: absolute;
	left: 20px;
	width: 160px;
	height: 234px;
}

.arrow-btn {
	position: absolute; /* ★絶対配置 */
	right: 40px;       /* 右端からの距離（好みで調整） */
	bottom: 24px;      /* 下端からの距離（好みで調整） */
}

/* ----------------------------------------
      recruit
  ---------------------------------------- */

.recruit-list{
	flex-direction: column;
	gap: 24px;
	width: 70%;
  }

.recruit-list-button{
	box-sizing: border-box;
  }

.recruit-list li{
	width: 100%;
  }

 .recruit-list a{
	justify-content: center;
	padding: 16px 20px;
	box-sizing: border-box;

}

.recruit-list-button img:first-child {
    margin-right: 104px; /* ★アイコンと文字の間の隙間 */
}

.recruit-list-button span{
	font-size: 20px;
	margin-right: 80px;

}





/** -----------------------------------------------
  Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media screen and (max-width: 640px) {
  /* PC用の改行を打ち消す */
.pc-only {
    display: none;
}

.sp-only {
    display: inline; /* もしくは block */
}

.sp-none{
	display: none;
}

.about,
.business,
.enviroment,
.member,
.recruit{
   padding-top: 42px;
   padding-bottom: 42px;
}


 /* セクションごとの左右余白と縦の配置調整 */
.business-text,
.enviroment-text,
.member-text,
.recruit-text,
.entry-text {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

  /* フォントサイズのレスポンシブ化（見出しの調整） */
.about-title,
.business-title,
.enviroment-title,
.member-title,
.recruit-title,
.entry-title {
    font-size: 24px;
    line-height: 1.4;
}  
	
.business-title-block,
.enviroment-title-block,
.member-title-block,
.recruit-title-block{
    position: relative;
    display: flex; /* ★必ず指定する */
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 48px;
}

.about-description,
.business-description,
.enviroment-description,
.member-description,
.recruit-description,
.entry-description {
    font-size: 16px;
    line-height: 2.0;
}

  /* 画面外へのはみ出しによる横スクロールを防止 */
body {
    overflow-x: hidden;
}

/* ----------------------------------------
     1. Header（ヘッダー部分）
  ---------------------------------------- */
.header {
	position: fixed;
	top: 0px;
	background-color: #E0F2CD;
	width: 100%;
	height: 50px;
	aspect-ratio: 1 / 1;
	z-index: 100;

}

 /* スマホ表示時のロゴサイズ調整 */
.header-title img {
    width: 102px;
    height: 12px;
}
  
  /* テキストの文字サイズや余白もズレる場合は必要に応じて調整してください */
.header-title {
    display: flex;
    align-items: center;
    gap: 8px; /* ロゴと「中途採用サイト」の文字の間隔 */
}

.header-title p{
	display: none;
}
 
  /* --- PC用のメニュー文字（事業について等）だけを隠す --- */
.header-list nav {
    display: none;
}

  /* --- ヘッダー全体の配置調整（ロゴ＝左、右グループ＝右） --- */
.header-list {
    display: flex;
    justify-content: space-between; /* 左右両端に振り分ける */
    align-items: center;
	height: 50px;
}

  /* --- 右側グループ（エントリーボタン＋ハンバーガー）の調整 --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 12px; /* エントリーボタンとハンバーガーの間の隙間 */
	padding: 0 20px 0 0;
}

  /* --- エントリーボタンをスマホ用に少し小さく調整 --- */
.header-button-entry {
    display: flex; /* 非表示を解除 */
	width: 100px;
	height: 40px;
    font-size: 12px;
	margin: 0;
}

  /* --- ハンバーガーボタンを表示・装飾 --- */
.hamburger-btn {
    display: flex; /* スマホの時だけ表示 */
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: transparent;
    border: none;
    padding: 0 ;
    cursor: pointer;

}

  /* 三本線のデザイン */
.hamburger-btn span {
    display: block;
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 2px;
}

/* sp版のみ下部固定エントリーボタン */
.sp-bottom-button{
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	
	width: 100%;
	z-index: 100; 
}

.sp-bosyu-button,
.sp-entry-button {
    /* 3. 幅を画面半分（50%ずつ）に均等分割 */
    flex: 1;

    /* 4. テキストの中央配置と見栄えの調整 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px; /* タップしやすい高さ（デザインに合わせて調整可能） */
    font-size: 18px; /* 画面幅が狭くても収まるサイズ感に調整 */
    font-weight: 500;
    text-decoration: none;
    box-sizing: border-box;
}

.sp-bosyu-button{
	color: #265C00;
	background-color: #FDFFFF;
}

.sp-entry-button{
	color: #FDFFFF;
	background-color: #265C00;
}


/* ----------------------------------------
     2. FV（メインビジュアル）
  ---------------------------------------- */
 
.fv{
	position: relative;
	height: 670px;
	margin: 50px 0 0 0 ;
}
 
.fv-list{
	margin: 0px;
	height: 622px;
}

.fv-title {
	position: absolute;
	left: 20px;
    font-size: clamp(30px, 2vw, 36px); 
	line-height: 1.4;
    text-align: left;
}

.circle-button{
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 120px;
	height: 120px;
}

.circle-button span{
	font-size: 16px;
	line-height: 1.5;
}

.circle-button img{
	width: 20px;
	height: 20px;
}

/* ----------------------------------------
      about
  ---------------------------------------- */

.about-text{
	width: calc(100% - 44px);
	max-width: none;

	aspect-ratio: auto;
	border-radius: 30px;

	padding: 40px 0;
}

.about-description{
	margin: 0 20px;
	font-size: 16px;
	line-height: 2.5;
}

.about-description span{
	display: inline;
}

 /* ----------------------------------------
      business
  ---------------------------------------- */

 /* 親要素を縦並びに */
.business-column {
    flex-direction: column;
	row-gap: 24px;
	margin-bottom: 42px;
}

  /* 画像を必ず上（1番目）にする */
.business-column-image {
    order: 1;
	width: 335px;
}

  /* 文章を必ず下（2番目）にする */
.business-column-text {
    order: 2;
	width: 335px;
}

.business-description span{
	display: inline;
}

.business-subtitle{
	margin-bottom: 16px;
}

.business-subdescription span{
	display: inline;
}

  /* ----------------------------------------
      environment
  ---------------------------------------- */

.enviroment-text {
    width: 100%;
}

.enviroment-column{
	display: flex;
	flex-direction: column;
    gap: 24px;
	width: 335px;
	margin: 0 auto;
}

.enviroment-description span{
	display: inline;
}
 
  /* ----------------------------------------
      member
  ---------------------------------------- */

.member-description span{
	display: inline;
}

.member-card{
	position: relative;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.member-card-item{
	width: 90%;
	height: 200px;
	aspect-ratio: 1 / 1;
}

.member-card-text{
	margin-left: 160px; 
	margin-top: 32px;
	padding-right: 0;
}

.member-position{
	width: 100%;
}

.member-position span{
	display: block;
}

.member-card-text img{
	position: absolute;
	left: 10px;
	width: 120px;
	height: 176px;
}

.arrow-btn {
	position: absolute; /* ★絶対配置 */
	right: 40px;       /* 右端からの距離（好みで調整） */
	bottom: 24px;      /* 下端からの距離（好みで調整） */
}

/* ----------------------------------------
      recruit
  ---------------------------------------- */


.recruit-description span{
	display: inline;
}

.recruit-list{
	flex-direction: column;
	gap: 24px;
	width: 90%;
}

.recruit-list-button{
	box-sizing: border-box;
}

.recruit-list li{
	width: 100%;
}

.recruit-list a{
	justify-content: center;
	padding: 16px 20px;
	box-sizing: border-box;
}

.recruit-list-button img:first-child {
    margin-right: 24px; /* ★アイコンと文字の間の隙間 */
}

.recruit-list-button span{
	font-size: 16px;
	margin-right: 10px;
}

/* ----------------------------------------
      entry
  ---------------------------------------- */

.entry{
	padding: 80px auto;
}

.entry-title-block{
	justify-content:flex-start
}

.entry-title,
.entry-description,
.copyright{
	text-align: left;
}

.entry-title{
	font-size: 32px;
	margin-bottom: 16px;
}

.entry-button{
	margin-top: 24px;
}

.entry-button span{
	font-size: 24px;
}

.entry-list{
	flex-direction: column;
	text-align: left;
	gap: 8px;
	margin-top: 56px;
}

.copyright{
	margin-top: 24px;
}

}


}