@charset "UTF-8";

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

img {
	max-width: 100%;
}

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

html {
	scroll-behavior: smooth;
}

.pc-only {
	display: block;
}

.sp-only {
	display: none;
}

/** -----------------------------------------------
	Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media screen and (max-width: 640px) {
	.section-inner {
	}
	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}
	.gnav-sp-wrap {
		display: none;
	}
}

/** -----------------------------------
    テキスト
-------------------------------------**/
h2.section-title {
	font-weight: bold;
	font-size: 26px;
	font-family: 'Zen Maru Gothic', sans-serif;
}

h3.section-subtitle {
	font-weight: bold;
	font-size: 18px;
}

h4.about-texttitle {
	font-weight: 500;
	font-size: 20px;
}

p.section-text {
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	margin-bottom: 50px;
}

p.section-text-motto {
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	margin-bottom: 50px;
}

p.section-text-about {
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	margin-bottom: 50px;
}

p.large {
	font-size: 18px;
}

p.medium {
	font-size: 14px;
}

a {
	text-decoration: none;
}

p.medium-contact {
	text-align: center;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	p.section-text {
		text-align: left;
		width: 100%;
		margin: auto;
		margin-bottom: 50px;
	}

	p.section-text-motto {
		text-align: left;
		width: 100%;
		margin: auto;
		margin-bottom: 50px;
	}

	p.section-text-about {
		text-align: left;
		width: 100%;
		margin: auto;
		margin-bottom: 5px;
	}

	p.large {
		font-size: 15px;
	}
}

/** -----------------------------------
    ボタン
-------------------------------------**/
.button-header {
	display: block;
	width: 150px;
	height: 50px;
	background-color: #e58e6e;
	color: #faf4ec;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.06em;
	border-radius: 30px;
	text-align: center;
	line-height: 50px;
	transition: background-color 0.6s ease;
}

.button-header:hover {
	background-color: #d67354; /* 少し濃いオレンジでホバー感 */
}

.button-more {
	position: relative; /* 子要素の .arrow を絶対位置で配置するために必要 */
	display: block;
	width: 292px;
	height: 60px;
	background-color: #e58e6e;
	color: #faf4ec;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.06em;
	border-radius: 30px;
	margin: 0 auto 160px;
	text-align: center;
	line-height: 60px;
	margin-bottom: 115px;
	overflow: hidden; /* はみ出し防止 */
}

.button-more a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.button-more .arrow {
	position: absolute;
	right: 50px; /* ←ここで矢印の右寄り具合を調整 */
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	transition: transform 0.3s ease;
}

.button-more a:hover .arrow {
	transform: translateY(-50%) translateX(5px);
}

.button-job {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 55px;
	padding: 0 45px;
	background-color: #e8d5c4;
	color: #5c493a;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.06em;
	border-radius: 30px;
	margin: auto;
	margin-bottom: 25px;
	text-decoration: none;
	transition: background-color 0.6s ease;
	box-sizing: border-box;
}

.button-job:hover {
	background-color: #d6c2b1;
}

.job-text {
	flex-grow: 1;
	text-align: left;
}

.job-icon {
	width: 30px;
	height: 30px;
	border: 1px solid #5c493a;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 14px;
	color: #5c493a;
	background-color: #faf4ec;
	margin-left: auto;
}

.button-senkou {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 333px;
	height: 80px;
	padding: 0 30px;
	background-color: #e8d5c4;
	color: #5c493a;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.06em;
	border-radius: 40px;
	margin: auto;
	/* margin-bottom: 25px; */
	text-decoration: none;
	transition: background-color 0.6s ease;
	box-sizing: border-box;
}

.button-senkou:hover {
	background-color: #d6c2b1;
}

.senkou-text {
	flex-grow: 1;
	text-align: left;
}

.senkou-icon {
	width: 30px;
	height: 30px;
	border: 1px solid #5c493a;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 14px;
	color: #5c493a;
	background-color: #faf4ec;
	margin-left: auto;
}

.button-entry {
	position: relative; /* ← アイコンを絶対配置するために必要 */
	display: flex;
	justify-content: center; /* ← 文字を中央に */
	align-items: center;
	width: 333px;
	height: 80px;
	padding: 0;
	background-color: #e58e6e;
	color: #faf4ec;
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0.06em;
	border-radius: 40px;
	line-height: 60px;
	margin: auto;
	/* margin-bottom: 25px; */
	text-decoration: none;
	transition: background-color 0.6s ease;
	box-sizing: border-box;
}

.button-entry:hover {
	background-color: #d67354; /* 少し濃いオレンジでホバー感 */
}

.entry-text {
	text-align: center;
	z-index: 1;
}

.entry-icon {
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 1px solid #faf4ec;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 14px;
	color: #faf4ec;
	background-color: #e58e6e;
}

.button-contact {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 176px;
	height: 45px;
	background-color: #e8d5c4;
	color: #5c493a;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0.06em;
	border-radius: 40px;
	line-height: 60px;
	margin: auto;
	transition: background-color 0.6s ease;
}

.button-contact:hover {
	background-color: #d6c2b1;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.button-more {
		width: 230px;
	}

	.button-job {
		width: 100%;
		max-width: 300px;
	}

	.button-senkou {
		width: 100%;
		font-size: 15px;
		padding: 22px;
		max-width: 250px;
		margin: 0 auto 25px; /* 真ん中に寄せて下余白を残す */
		padding: 0 10px; /* 必要に応じて調整可能 */
	}

	.button-entry {
		width: 100%;
		font-size: 25px;
		max-width: 250px;
		margin: 0 auto 25px; /* 真ん中に寄せて下余白を残す */
		padding: 0 10px; /* 必要に応じて調整可能 */
	}
}

/** -----------------------------------
    見出し
-------------------------------------**/
.title-en {
	text-align: center;
}

/** -----------------------------------
    レイアウト
-------------------------------------**/
.col-2-about-outline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 64px;
	gap: 38px; /* 任意、もしくは使わない場合は width で調整 */
	}

.col-2-about-outline-second {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 64px;
	gap: 67px; /* 任意、もしくは使わない場合は width で調整 */
	}

.col-2-about-outline .item-aboutimg {
width: 55%;
}

.col-2-about-outline .item-about {
width: 40%;
}

.col-2-about {
display: flex;
align-items: center;
gap: 12px; /* アイコンと見出しの隙間 */
}

.col-2-member {
	display: flex;
	justify-content: space-between;
}

.col-2-member .item {
	width: calc((100% - 30px) / 2); /* 2カラム用 */
}

.col-2-job {
	display: flex;
	flex-wrap: wrap;
	gap: 5%;
	padding: 0 10%;
}

.col-2-job .item {
	width: 47.5%;
}

.col-2-entry {
	display: flex;
	justify-content: space-evenly;
}

.col-2 .item {
	width: calc((100% - 38px)/2);
}

.col-3 {
	display: flex;
	justify-content: space-between;
}

.col-3 .item {
	width: calc((100% - 150px)/3);
}

.working-col-3 {
	display: flex;
	justify-content: center;
	gap: 40px; /* 画像とテキストの間隔 */
	align-items: center; /* 垂直中央揃え */
}

.working .card-img-flex {
width: 120px; /* 適当な画像幅 */
flex-shrink: 0;
}

.working .card-text-working {
flex: 1;
}

.col-3-contact {
	display: flex;
	justify-content: space-between;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.col-2-about-outline {
		flex-direction: column-reverse;
		margin-bottom: 30px;
		gap: 0;
	}

	.col-2-about-outline-second {
		flex-direction: column;
		margin-bottom: 30px;
		gap: 0;
	}

	.col-2-about-outline .item-about {
		width: 100%;
		}

	.col-2-about-outline .item-aboutimg {
		width: 100%;
		}
		
	.col-2-about {
		flex-direction: row; /* ←ここは"横並び"を維持したいのでrowのまま */
		align-items: center;
		gap: 10px;
	}

	.item-img img {
		width: 50px; /* スマホ用に少し縮小（調整OK） */
	}

	.about-texttitle {
		font-size: 16px;
	}

	.about-text {
		font-size: 14px;
	}

	.working .card-img-flex {
		width: 110px;
		}

	.col-2-member {
		flex-direction: column;
		align-items: center;
	}

	.col-2-member .item {
	width: 100%;
	margin-bottom: 0;
	}

	.col-2-member .item:last-child {
	margin-bottom: 0;
	}

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

	.col-2-job {
		display: block;
		padding: 0;
	}

	.col-2-job .item {
		width: 100%;
	}

	.col-2-entry {
		display: block;
	}

	.col-3-contact {
		display: block;
	}

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

/** -----------------------------------
    ヘッダー
-------------------------------------**/
.header {
	background-color: #e8d5c4;
	width: 100%;
	height: 80px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40px;
	position: fixed;
	top: 0;
	z-index: 3;
}

.header-logo {
	display: flex;
	align-items: center;
	width: 200px;
	height: 30px;
}

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

ul.gnav-pc li {
	display: inline;
	margin-right: 35px;
}

ul.gnav-pc li a {
	font-size: 14px;
	color: #5c493a;
}

.gnav-pc a {
	color: #5c493a;
	text-decoration: none;
	transition: color 0.6s ease;
}

.gnav-pc a:hover {
	color: #e58e6e; /* TSUTSUMUらしいアクセントカラー */
	text-decoration: underline;
	text-underline-offset: 8px; /* ← この値を大きくすると文字から遠ざかる */
	text-decoration-thickness: 2px; /* 線の太さ */
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.header {
		height: 75px;
		padding: 10px;
	}

	.header-logo {
		width: 150px;
	}

	.header h1 {
		padding-left: 20px;
	}
	
	.header h1 a {
		display: flex;
	}

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

	#menu-button {
		display: block;
		width: 60px;
		height: 60px;
		background-color: #faf4ec;
		border-radius: 13px;
		position: relative; /* 子要素を中央に配置するために必要 */
	}
	
	.menu-button-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 18px; /* 3本線を含めた全体の高さ */
	}
	
	/* ハンバーガーの3本線 */
	.menu-button-inner span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: #5c493a;
	position: absolute;
	left: 0;
	transition: all 0.3s ease;
	}
	
	/* 線の位置：上下真ん中 */
	.menu-button-inner span:nth-child(1) {
	top: 0;
	}
	
	.menu-button-inner span:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);
	}
	
	.menu-button-inner span:nth-child(3) {
	bottom: 0;
	}

	/* スマホ用メニューのスタイル */
	.gnav-sp-wrap {
		display: none;
		width: 100vw;
		height: 100vh;
		background-color: #e8d5c4;
		position: fixed;
		z-index: 100;
		padding-top: 70px;
	}

	ul.gnav-sp {
		margin-bottom: 60px;
	}

	ul.gnav-sp li {
		text-align: center;
		margin-bottom: 30px;
	}

	ul.gnav-sp li a {
		font-size: 17px;
		letter-spacing: 0.1em;
		color: #5c493a;
		font-weight: 500;
	}

	.button-header {
		margin: auto;
	}
	
	/* 開いてる状態のアニメーション */
	#menu-button.open .menu-button-inner span:nth-child(1) {
		transform: rotate(45deg);
		top: 50%;
	}

	#menu-button.open .menu-button-inner span:nth-child(2) {
	opacity: 0;
	}

	#menu-button.open .menu-button-inner span:nth-child(3) {
	transform: rotate(-45deg);
	bottom: auto;
	top: 50%;
	}

	div.menu-img-bird {
		width: 50px;
		position: absolute;
		right: 30px;
		top: 455px;
	}
	
	div.menu-img-milk {
		right: auto;
		width: 30px;
		position: absolute;
		left: 60px;
		top: 500px;
	}
}

/** -----------------------------------
    メインビジュアル
-------------------------------------**/
.mainvisual {
	width: 100%;
	height: calc(100vh - 70px);
	background-size: cover;
	background-position: center;
	background-repeat: repeat;
	position: relative;
	margin-top: 70px;
}

.mainvisual-img div {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: calc(100vh - 70px);
	margin: 0;
}
.mainvisual-img div.fv-baby-pc {
	background-image: url("../images/fv-baby-pc.png");
}
.mainvisual-img div.fv-smile-pc {
	background-image: url("../images/fv-smile-pc.png");
}
.mainvisual-img div.fv-hands-pc {
	background-image: url("../images/fv-hands-pc.png");
}
.mainvisual-img div.fv-pc-pc {
	background-image: url("../images/fv-pc-pc.png");
}

.maincopy {
	color: #5c493a;
	font-size: 55px;
	font-weight: bold;
	line-height: 1.5;
	letter-spacing: 0.01em;
	margin-bottom: 40px;
	position: absolute;
	right: 10vw;
	top: 81px;
	writing-mode: vertical-rl;
	font-family: 'Zen Maru Gothic', sans-serif;
	background-image: url(../images/fv-squareright.png);
	padding: 20px;
	display: flex;
	flex-direction: column;
	z-index: 2;
}

.maincopy span:nth-child(2) {
	padding-top: 40px;
}

.maincopy span:nth-child(3) {
	padding-top: 80px;
}

.subcopy {
	color: #faf4ec;
	background-color: rgb(168 185 156 / 90%);
	border-radius: 8px; /* 角をちょっと丸くするとよりやさしい印象に */
	padding: 28px 50px;
	font-size: 20px;
	font-weight: 500;
	position: absolute;
	left: 10vw;
	bottom: 45px;
	z-index: 2;
}

/** -------- スマホ -------- **/
.subcopy .pc-only {
	display: inline;
}
.subcopy .sp-only {
	display: none;
}
	
@media screen and (max-width: 640px) {
	.subcopy .pc-only {
	display: none;
	}
	.subcopy .sp-only {
	display: inline;
	}

	.mainvisual {
		height: 700px;
	}
	
	.maincopy {
		font-size: 25px; /* スマホサイズに合わせて調整 */
		top: 40px; /* 必要に応じて位置を調整 */
		right: 10px; /* 余白調整 */
		/* background-image: url("../images/fv-squareright_sp.png"); スマホ用背景画像に切り替え */
		background-size: contain; /* 画像全体が表示されるように */
		background-repeat: no-repeat;
		background-position: center;
		padding: 15px;
		line-height: 1.5;
	}

	.maincopy span:nth-child(2) {
		padding-top: 20px; /* スマホ向けに余白を狭める */
	}

	.maincopy span:nth-child(3) {
		padding-top: 40px;
	}

	.subcopy {
		font-size: 14px;
		padding: 10px 16px; /* 余白を小さめに調整 */
		left: 20px;
		/* bottom: 30px; */
		width: auto; /* 必要な幅に自動で調整 */
		max-width: calc(100% - 40px); /* 画面からはみ出ないように */
		background-color: rgb(168 185 156 / 90%);
		border-radius: 8px; /* 角をちょっと丸くするとよりやさしい印象に */
		top: 67%;
		height: 110px;
	}

	.mainvisual-img div.fv-baby-pc {
		background-image: url("../images/fv-baby-sp.png");
		height: 640px;
		}
		
		.mainvisual-img div.fv-smile-pc {
		background-image: url("../images/fv-smile-sp.png");
		height: 640px;
		}
		
		.mainvisual-img div.fv-hands-pc {
		background-image: url("../images/fv-hands-sp.png");
		height: 640px;
		}
		
		.mainvisual-img div.fv-pc-pc {
		background-image: url("../images/fv-pc-sp.png");
		height: 640px;
		}
}

/** -----------------------------------
    mission 私たちについて
-------------------------------------**/
.mission {
	text-align: center;
	padding: 64px;
	position: relative;
}

div.mission-img-milk {
	right: auto;
	width: 35px;
	position: absolute;
	left: 250px;
	top: 100px;
}

div.mission-img-babyfood {
	width: 55px;
	position: absolute;
	right: 300px;
	top: 400px;
}

#mission {
	padding-top: 100px;  /* ヘッダー高さ + 少し余裕 */
	margin-top: -100px;  /* アンカー位置調整 */
}

div.mission-img-woman {
	right: auto;
	width: 303px;
	position: absolute;
	right: 70px;
	top: 80px;
}

div.mission-img-office {
	right: auto;
	width: 204px;
	position: absolute;
	left: 70px;
	top: 245px;
}

div.mission-img-baby {
	left: auto;
	width: 137px;
	position: absolute;
	right: 200px;
	top: 500px;
}

h2.section-title {
	text-align: center;
	margin-bottom: 20px;
}

h3.section-subtitle {
	text-align: center;
	margin-bottom: 50px;
}

div.button {
	text-align: center;
}

img.icon {
	height: 25px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.mission {
		padding: 0 30px;
	}

	div.mission-img-woman {
		width: 22%;
		position: absolute;
		right: 6%;
		top: -7%;
	}
	
	div.mission-img-office {
		width: 15%;
		position: absolute;
		left: 10%;
		top: -6%;
	}
	
	div.mission-img-baby {
		width: 15%;
		position: absolute;
		right: 10%;
		top: 70%;
	}

	img.icon {
		height: 50%;
	}
}

/** -----------------------------------
    about 事業について
-------------------------------------**/
.about {
	position: relative;
}

div.about-img-bird {
	width: 45px;
	position: absolute;
	right: 110px;
	top: 300px;
}

div.about-img-babyfood {
	right: auto;
	width: 55px;
	position: absolute;
	left: 100px;
	top: 700px;
}

h2.section-title {
	text-align: center;
}

div.col-2-about {
	align-items: center;
}

h3.section-subtitle {
	text-align: center;
}

h4.about-texttitle {
	text-align: center;
	padding:10px 0;
	margin: 20px;
}

p.about-text {
	text-align: left;
	width: 333px;
}

div.item-img {
	width: 60px;
}

.item-aboutimg img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover; /* 余白をつくらないようにする */
}

div.item-about {
	padding: 40px 5% 40px 0;
}

div.item-about-second {
	padding: 40px 0 40px 5%;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.about {
		padding: 0 30px;
	}

	div.item-about {
		width: 100%;
		padding: 20px 0 20px;
		margin: 0;
	}

	div.item-about-second {
		padding: 20px 0 20px;
	}

	div.item-aboutimg {
		width: 100%;
	}

	div.item-img {
		width: 15%;
	}
}

/** -----------------------------------
    working 働く環境
-------------------------------------**/
.working {
	position: relative;
}

div.working-img-milk {
	width: 35px;
	position: absolute;
	right: 200px;
}

div.working-img-bird {
	right: auto;
	width: 45px;
	position: absolute;
	left: -50px;
	top: 250px;
}

img.icon-working {
	height: 50px;
}

.card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

p.working-flex {
	font-size: 14px;
	margin-bottom: 20px;
}

p.working-babyroom {
	font-size: 14px;
	margin-bottom: 20px;
}

p.working-remote {
	font-size: 14px;
	margin-bottom: 20px;
}

div.card-img-flex {
	width: 130px;
	margin: auto;
}

.card-text-working {
	position: relative;
	background-color: #e8d5c4;
	border-radius: 22px;
	padding: 20px;
	width: 256px;
	height: 134px;
	margin: auto;
	transition: background-color 0.3s ease;
}

.text-and-arrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* arrow-circle は絶対配置をやめて調整 */
.arrow-circle {
	position: static; /* ← これ大事！absolute を外す */
	width: 32px;
	height: 32px;
	border-radius: 50%;
	text-align: center;
	line-height: 32px; /* ← line-height も高さと揃える */
	font-size: 16px;
	color: #faf4ec;
	background-color: #a8b99c;
	transition: transform 0.3s ease;
	margin-left: 10px;
}

.card-text-working:hover .arrow-circle {
	transform: translateX(5px);
}

div.timeschedule {
	margin-top: 50px;
	margin-bottom: 115px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.working {
		padding: 0 30px;
	}

	img.icon-working {
		height: 50%;
	}

	.working-col-3 {
		display: block;
	}

	.working-col-3 .card{
		display: flex;
	}

	.card-img-flex img {
		width: 80px;
		margin: 0 auto 15px;
		display: block;
	}

	.card-img-babyroom img {
		width: 75px;
		margin: 0 auto 15px;
		display: block;
	}

	.card-img-remote img {
		width: 100px;
		margin: 0 auto 15px;
		display: block;
	}
	
	.card-text-working {
		width: 100%;
		max-width: 256px; /* PCと同じ幅に揃える */
		margin: 0 auto 20px;
		padding: 20px;
		box-sizing: border-box; /* パディング込みで幅計算 */
		height: auto;
	}
	
	.working-col-3 .card {
		display: flex;
		align-items: center;
		gap: 10px; /* 画像とテキストの間にスペース */
		flex-wrap: wrap; /* 小さい画面で崩れたら縦並びに */
	}
	
	.working-col-3 .item {
		margin-bottom: 30px;
	}
}

/** -----------------------------------
    member メンバー紹介
-------------------------------------**/
.member {
	max-width: 828px;
	margin: 0 auto;
	position: relative;
}

div.member-img-babyfood {
	
	width: 55px;
	position: absolute;
	left: -100px;
	top: 200px;
}

div.member-img-bird {
	width: 45px;
	position: absolute;
	right: -120px;
	top: 700px;
}

div.member-img-milk {
	right: auto;
	width: 35px;
	position: absolute;
	left: -100px;
	top: 1500px;
}

p.medium {
	font-size: 14px;
	margin-bottom: 83px;
}

.hover-img {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-img:hover {
	transform: scale(1.02) translateY(-2px); /* ← 少しだけ拡大＆浮かせる */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* ← 影もやさしく */
}

div.img-video {
	width: 600px;
	margin: 0 auto;
	margin-bottom: 168px;
}

.img-video img {
	transition: transform 0.4s ease;
	will-change: transform;
}

.img-video:hover img {
	transform: scale(1.03) translateY(-5px);
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.member {
		padding: 0 30px;
	}

	p.medium {
		margin-bottom: 45px;
	}

	div.img-video {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 115px;
	}
}

/** -----------------------------------
    job 募集職種
-------------------------------------**/
.job {
	margin-bottom: 115px;
	position: relative;
}

div.job-img-babyfood {
	width: 55px;
	position: absolute;
	right: 200px;
	top: 250px;
}

div.job-img-bird {
	right: auto;
	width: 45px;
	position: absolute;
	left: 200px;
	top: 600px;
}

img.icon-job {
	height: 65px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.job {
		padding: 0 30px;
	}

	img.icon-job {
		height: 50%;
	}
}

/** -----------------------------------
    エントリー
-------------------------------------**/
.entry {
	background-color: #a8b99c;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	padding: 50px 0 70px;
}

.entry-catch {
	font-family: 'Zen Maru Gothic', sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	color: #5c493a;
	margin-bottom: 40px;
}

.col-2-entry {
	background-color: #faf4ec;
	padding: 60px;
	border-radius: 80px;
	position: relative;
}

div.entry-img-babydrink {
	width: 80px;
	position: absolute;
	right: -20px;
	top: -55px;
}

div.entry-img-penguin {
	right: auto;
	width: 40px;
	position: absolute;
	left: -20px;
	top: 200px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.entry-catch {
		text-align: left;
	  	padding-left: 40px; /* 必要なら余白も調整 */
	}

	.col-2-entry {
		max-width: 330px;
		margin: 0 auto;
		padding: 40px 0; /* 上下paddingは必要に応じて調整してね */
		border-radius: 40px; /* PCと同じように残してOK */
	}

	div.entry-img-babydrink {
		width: 22%;
		position: absolute;
		right: -3%;
		top: -20%;
	}
	
	div.entry-img-penguin {
		width: 10%;
		position: absolute;
		left: -3%;
		top: 100%;
	}
}

/** -----------------------------------
    contact お問い合わせ
-------------------------------------**/
.contact {
	padding-top: 50px;
	padding-bottom: 60px;
}

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

p.medium-contact {
	font-size: 14px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.card-text-contact {
		margin: 10px;
	}
}

/** -----------------------------------
    フッター
-------------------------------------**/
.footer {
	background-color: #e8d5c4;
	text-align: center;
	padding: 40px 0 30px;
	position: relative;
}

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

.footer-link {
	color: #5c493a;
	margin-bottom: 40px;
}

.footer-link li a {
	color: #5c493a; /* 通常時の色 */
	text-decoration: none; /* 下線を消す場合 */
	transition: color 0.3s ease; /* なめらかな変化 */
}

.footer-link li a:hover {
	color: #e58e6e; /* ホバー時の色 */
}

.footer-link li {
	display: inline;
	margin: 40px;
	color: #5c493a;
}

.link-pagetop {
	width: 90px;
	position: absolute;
	right: 50px;
	top: -50px
}

/* style.css の一番下に追加 */
.fade-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.show {
	opacity: 1;
	transform: translateY(0);
}

/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	.footer {
		padding: 40px 0 20px 0;
	}
	.footer-link {
		margin-bottom: 70px;
	}
	.footer-link li {
		display: block;
		margin: 0 0 20px 0;
	}

	.link-pagetop {
		right: 10px;
	}
}

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

.example {
	font-size: 50px;
	color: #99293D;
}




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


/** -----------------------------------------------
	Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media screen and (min-width: 640px) {
	.gnav-sp-wrap {
		display: none !important;
	}
}

@media screen and (max-width:640px) {
	.example {
		font-size: 20px;
		color: #AD8651;
	}
}