@charset "UTF-8";
/** -----------------------------------------------
	共通
------------------------------------------------**/
html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
	/*下記のCSSはご自身のデザインに合わせて書き換えてください。*/
	font-size: 14px;
	line-height: 1.8;
	margin: 0;
    padding: 0;
	color: #333333;
	background-color:#FAF7F3;
	font-family: "Brandon Grotesque", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
	font-weight: 500;
}

/* 右の余白（横スクロール）対策：ページ全体で横はみ出しを止める */
html, body {
	overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
	text-decoration: none;
	color: inherit;
	transition: 0.3s ease;
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}



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

/* ========================================
	Header
======================================== */
.header {
	background-color: #FAF7F3;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.2rem 0;
}

.header__logo-area {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.header__logo img {
	width: 200px;
}

.header__subtext {
	font-size: 24px;
	color: #333333;
	margin-top: 0.2rem;
	letter-spacing: 0.05em;
}

.header__nav ul {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header__nav a {
	font-weight: 500;
	font-size: 24px;
}

.header__nav a:hover {
	color: #F0936B;
}

.btn-entry {
	background-color: #F0936B;
	color: #fff;
	padding: 0.6rem 1.4rem;
	border-radius: 9999px;
	font-weight: 600;
}

.header__nav a.btn-entry:hover {
	background-color: #58BAFC;
	color: #fff;
}

/* ===== 追加：ヘッダーSP用パーツ（PCは非表示） ===== */
.header__actions,
.header__hamburger,
.btn-entry--sp　{
	display: none;
}

/* ========================================
	Hero Section
======================================== */
.hero {
	position: relative;
	width: 100%;
	min-height: 120vh;/* 高さはデザインに合わせて調整 */
	background-image: url("../images/fv_main.jpg");
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	z-index: 10;
	overflow: visible;

  /* 下端を丸くする */
	border-bottom-left-radius: 1000px 200px;
	border-bottom-right-radius: 1000px 200px;

  /* なめらかにトリミングしたい場合は下のclip-pathを使用してもOK */
  /* clip-path: ellipse(100% 90% at 50% 100%); */
}

.hero__inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 5%;
}

.hero__text-area {
	color: #333333;
	padding: 2rem 2.5rem;
	border-radius: 12px;
	max-width: 500px;
}

.hero__catch {
	position: absolute;
  	top: 60px; /* ロゴ下の高さに合わせて調整 */
	left: 0%;
	font-size: 36px;
	line-height: 1.6;
	font-weight: 600;
	max-width: 520px;
	color: #333333;
}

.hero__inner {
	position: relative;
}

/* ========================================
	About Section
======================================== */
.about {
	position: relative;
	background-color: #FAF7F3;
	padding: 10rem 0 8rem;
	text-align: center;
	position: relative;
	z-index: 11;
	margin-top: 0px;
}

.about__title {
	text-align: center;
	margin-bottom: 4.5rem;
}

.about__logo {
	width: 220px;
	margin: 3rem auto 1rem;
}

.section-title {
	font-size: 32px;
	color: #333333;
	font-weight: 700;
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

.about__subtitle {
	font-size: 24px;
	color: #333333;
	font-weight: 600;
	margin-bottom: 2rem;
}

.about__text {
	font-size: 14px;
	color: #333333;
	line-height: 2;
	max-width: 460px;
	margin: 0 auto 4rem; 
	text-align: left;
}

/* --- ボタン共通 --- */
.btn-more {
	display: inline-block;
	border: 1.5px solid #333333;
	padding: 0.9rem 2.4rem;
	border-radius: 999px;
	font-weight: 600;
	background-color: #fff;
	color: #333333;
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
	z-index: 2; /* 背景画像より前面に出す */
	margin-top: 1rem;
}

.about .btn-more:hover {
	background-color: #EBCFC2;
	color: #333333;
	
}

/* --- 丸画像配置（ランダム配置風） --- */
.about__images img {
	border-radius: 50%;
	object-fit: cover;
	position: absolute;
	filter: drop-shadow(8px 7px 10.7px rgba(88, 186, 252, 0.5)); 
	transition: transform 0.4s ease;
}

/* 個別の大きさと位置 */
.about__images .img1 {
	width: 440px;
	height: 440px;
	top: 20%;
	left: -3%;
	z-index: 2; /* 手前 */
}

.about__images .img2 {
	width: 260px;
	height: 260px;
	top: -90px;
	right: 10%;
	z-index: 0;
}

.about__images .img3 {
	width: 380px;
	height: 380px;
	bottom: 10%;
	right: 4%;
	z-index: 1;
}

/* =========================
	Business Section
========================= */
.business {
	background-color: #FDFCF9;
	text-align: center;
	padding: 8rem 0 8rem;
}

.business .section-title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.business-lead {
	font-size: 14px;
	color: #333;
	margin-bottom: 5rem;
}

.business-items {
	display: flex;
	justify-content: center;
	gap: 4rem;
	max-width: 960px;
	margin: 0 auto 4rem;
}

.business-item {
	flex: 1;
	max-width: 320px;
}

.business-item img {
	width: 100%;
	border-radius: 16px;
	margin-bottom: 1.8rem;
}

.business-item h3 {
	font-size: 24px;
	font-weight: 700;
	color: #333;
	margin-bottom: 0.8rem;
}

.business-item h3 span {
	color: #3EA8FF;
	font-weight: 700;
	font-size: 28px;
	margin-right: 6px;
}

.business-item p {
	font-size: 14px;
	line-height: 1.9;
	color: #333333;
	text-align: left;
	margin-left: 2px; 
}

/* 共通ボタン */
.btn-more {
	display: inline-block;
	border: 1.5px solid #333333;
	padding: 0.9rem 2.4rem;
	border-radius: 999px;
	font-weight: 600;
	color: #333333;
	text-decoration: none;
	transition: all 0.3s ease;
}

.business .btn-more:hover {
	background-color: #EBCFC2;
	color: #333333;
	border: 1.5px solid #777777;
}


/* =========================
	Environment Section
========================= */
.environment {
	background-color: #FDFCF9;
	text-align: center;
	padding: 5rem 0 8rem;
}

.environment .section-title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: #333333;
}

.environment .section-lead {
	font-size: 14px;
	color: #333333;
	line-height: 1.8;
	margin-bottom: 4.5rem;
}

.environment-items {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 3.2rem; /* カード間の余白 */
	margin-bottom: 4.8rem;
}

.environment-item {
	background-color: #F8EFEB;
	border-radius: 24px;
	width: 300px;
	height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
}

.environment-item img {
	width: auto;
  	height: 170px; /* 高さ基準で統一 */
	margin-bottom: 1.2rem;
	display: block;
	object-fit: contain;
  	aspect-ratio: 1 / 1; /* 正方形比率を維持 */
}

.environment-item p {
	font-size: 24px;
	font-weight: 700;
	color: #333;
	letter-spacing: 0.02em;
}

/* 共通ボタン */
.btn-more {
	display: inline-block;
	border: 1.5px solid #333;
	padding: 0.9rem 2.4rem;
	border-radius: 999px;
	font-weight: 600;
	color: #333;
	text-decoration: none;
	transition: all 0.3s ease;
}

.environment .btn-more:hover {
	background-color: #EBCFC2;
	color: #333333;
	border: 1.5px solid #777777;
}

/* =========================
	Numbers　Section
========================= */
.numbers {
	background-color: #FDFCF9;
	text-align: center;
	padding: 5rem 0 9.5rem;
}

.numbers .section-title {
	font-size: 32px;
	font-weight: 700;
	color: #333333;
	letter-spacing: .03em;
	margin-bottom: 1.2rem;
}

.numbers__lead {
	font-size: 14px;
	color: #333333;
	line-height: 1.9;
  margin-bottom: 2.2rem;  /* 見出し下の短いリード（カンプの雰囲気） */
}

.numbers__panel {
	background: #F8EFEB;              /* カンプの淡いベージュ */
	border-radius: 24px;
	padding: 3.2rem 3.6rem 2.6rem;     /* 角丸内側にしっかり余白 */
	max-width: 980px;
	margin: 0 auto;
}

.numbers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3カラム×2行 */
	gap: 3.2rem 3.6rem;                     /* 行・列の間隔 */
	list-style: none;
	padding: 0;
	margin: 0 0 2.2rem;                     /* 下にボタン分の余白 */
}

.num-item {
	text-align: center;                       /* カンプは左寄せ寄り */
	display: grid;
	grid-template-rows: auto auto auto;     /* icon / number / label */
	row-gap: .6rem;
	align-content: start;
	justify-items: center;
}

.num-item img {
  	height: 140px;                           /* アイコンは小さめ */
	width: auto;
	display: block;
	margin-bottom: .2rem;
}

/* 数字と単位の並び（ベースラインをずらして“肩に”置く） */
.num { margin: 0; }
.num .val {
  	font-size: 96px;                        /* 大きい青 */
	font-weight: 800;
	line-height: 1;
	color: #58BAFC;
	letter-spacing: .01em;
}

.num .unit {
	font-size: 32px;
	font-weight: 700;
	color: #58BAFC;
	margin-left: .28em;
	position: relative;                           /* 単位を少し上に（％や「日」「時間」） */
}

.label {
	font-size: 24px;
	color: #333333;
	line-height: 1.8;
}

/* パネル内ボタン（中央） */
.btn-more--inside {
	margin: .6rem auto 0;
	display: inline-block;
	
}

.numbers .btn-more--inside:hover {
	background-color: #EBCFC2;
	color: #333333;
	border: 1.5px solid #777777;
}

/* =========================
	People Section（PC）
========================= */
.people{
	position: relative;
	background:#FAF7F3;
	padding: 9rem 0 5rem;
	text-align: center;
	overflow: hidden;
}
/* 上部カーブ（FVと同系の丸み） */
.people::before{
	content:"";
	position:absolute;
	top:-140px; left:50%;
	width:140%; height:240px;
	transform:translateX(-50%);
	background:#FDFCF9;                     /* カンプの白い幕 */
	border-bottom-left-radius:1200px 260px;
	border-bottom-right-radius:1200px 260px;
	z-index:0;
}

.people .section-title{ margin-bottom: 1.2rem; }
.people__lead{
	font: size 14px; color:#333333; line-height:1.9;
	margin-bottom: 3.2rem;
}

/* カード 2×2 */
.people__list{
	position: relative;
  	z-index:1;                           /* カーブより手前に */
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.8rem 3rem;
	max-width: 980px;
	margin: 0 auto 3.6rem;
}

.person{
	background:#FDFCF9;
	border: 2px solid #EBCFC2; /* ← やさしいグレーベージュの枠線 */
	border-radius:18px;
	box-shadow:none;
	overflow:hidden;
	text-align:center;
}

.person__link {
	display: block;
	color: inherit;             /* テキスト色を継承 */
	text-decoration: none;      /* 下線を消す */
	transition: all 0.3s ease;
	border-radius: 18px;
}

.person__link:hover {
	border-color: #3EA8FF;
	transform: translateY(-3px);
	transition: all 0.3s ease;
}

/* サムネイルと赤コピー */
.person__thumb{
	position:relative;
  	aspect-ratio: 4 / 3;                 /* 画像比率を固定 */
	overflow:hidden;
}
.person__thumb img{
	width:100%; height:100%; object-fit:cover; display:block;
}
.person__quote{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);  /* ← 縦中央 */
	max-width: 58%;
	line-height: 1.9;
	color: #ED776B;
	text-shadow: 0 1px 0 rgba(255,255,255,.6);
	margin: 0;
	text-align: center;  /* ← これを追加 */
	width: 60%;
	font-size: 20px;
}

/* 上段（1・2枚目）は右寄せ＋右揃え */
.people__list .person:nth-child(-n + 2) .person__quote{
	right: 5px;
	left: auto;
	text-align: center;
}

/* 下段（3・4枚目）は左寄せ＋左揃え */
.people__list .person:nth-child(n + 3) .person__quote{
	left: 5px;
	right: auto;
	text-align: center;
}

/* メタ情報 */
.person__meta{ padding: 1.2rem 1.6rem 1.6rem; }
.person__name{
	font-size:20px; font-weight:700; margin:0 0 .2rem;
}
.person__role{
	font-size:16px; color:#333333; line-height:1.8; margin:0;
}

/* 「もっと見る」ボタンは既存 .btn-more を使用（中央揃え） */
.people .btn-more:hover {
	background-color: #EBCFC2;
	color: #333333;
	border: 1.5px solid #777777;
}

/* ========================
	Cross Talk（PC）
========================= */

.crosstalk { 
	padding: 5rem 0 9rem; 
	background:#FAF7F3;
	overflow-x: clip; /* だめなら hidden */
	margin: 0 auto 2.4rem;
  	position: relative;           /* ← 矢印の基準 */
	--card-w: min(800px, 92vw);   /* ct-cardの最大幅に合わせる */
	--gap: 70px;       
}

.section-title {
	font-size: 32px;
	font-weight: 700;
	color: #333333;
	letter-spacing: .03em;
	margin-bottom: 1.2rem;
	text-align:center;
}

.crosstalk__lead { font-size:14px; color:#333333; line-height:1.9; text-align:center; margin:0 0 2.4rem; }

.crosstalk-slider { margin: 0 auto 2.4rem; }
.ct-card{
	position: relative;
	display: block;
	margin: 0 auto;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .3s ease, border-color .3s ease;
}

/* 画像の収まり調整 */
.ct-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;        /* トリミングして均一に見せる */
	object-position: center;
	display: block;
}

.ct-card:hover{ transform: translateY(-3px); border-color:#EBCFC2; }

/* Slick 調整（PC） */
/* slickのセンター位置補正 */
.slick-slide {
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.crosstalk-slider .slick-slide{ 
	padding: 0 100px;        /* スライド間の余白 */
	box-sizing: border-box; 
} 

.crosstalk-slider .slick-list{ 
	overflow: visible;
  	padding: 0 100px;          /* 左右を覗かせる量 */ 
}   /* 両サイドを覗かせる */

.crosstalk-slider .slick-dots{ 
	bottom: -70px; 
}

.crosstalk-slider .slick-prev:before,
.crosstalk-slider .slick-next:before{
	color:#3EA8FF; font-size:30px;
}
/* 矢印を「画像と画像の間」に置く */
.crosstalk-slider .slick-prev,
.crosstalk-slider .slick-next{
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;

	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(253,252,249,.9);
	border: 1px solid #ddd;
}

.crosstalk-slider .slick-prev{
	left: calc(50% - (var(--card-w) / 2) - (var(--gap) / 2));
}

.crosstalk-slider .slick-next{
	left: calc(50% + (var(--card-w) / 2) + (var(--gap) / 2));
  	right: auto; /* right指定を解除 */
}

/* noscript/fallback 用：slick未読込時に横スクロール */
.crosstalk-slider:not(.slick-initialized){
	display:flex; gap:32px; overflow:auto; scroll-snap-type:x mandatory; padding: 0 16px;
}
.crosstalk-slider:not(.slick-initialized) .ct-card{ flex: 0 0 auto; scroll-snap-align:center; }

.btn-more {
	display: block;
	width: fit-content;
	margin: 3.4rem auto 0;
}

.crosstalk .btn-more:hover {
	background-color: #EBCFC2;
	color: #333333;
	border: 1.5px solid #777777;
}

/* ========================
	Job（PC）
========================= */

/* レイアウト */
.jobs { padding: 96px 0 90px; background: #FDFCF9; }
.jobs .container { width: min(960px, 92%); margin: 0 auto; text-align: center; }
.sec-ttl { font-size: 32px; letter-spacing: .06em; margin-bottom: 12px; }
.sec-lead { font-size: 14px; color: #333333; line-height: 1.9; margin-bottom: 36px; }

.jobs-grid {
	list-style: none; /* ← この1行を追加 */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 60px;   /* 行間 / 列間 */
	justify-items: center;
}

/* カード */
.job-card { width: 320px; }
.job-card a { display: block; border-radius: 18px; overflow: hidden; }
.job-fig {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #FDFCF9;
  /* 薄い影で浮かせる（カンプのパネル感） */
	box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* 画像トリミングと比率固定（カンプの見え方を安定させる） */
.job-fig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform .5s ease;
}

/* 下辺の丸ラベル（アイコン＋職種名） */
.job-badge {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
  	align-items: center;      /* 垂直中央揃え */
  	justify-content: center;  /* 水平中央揃え */
  	gap: 8px;                 /* アイコンとテキストの間隔 */
  	border-radius: 999px;     /* 丸みを長丸に */
	background: #FDFCF9;
	box-shadow: 0 10px 25px rgba(0,0,0,0.08);
	font-size: 20px;
	font-weight: 700;
	color: #333333;
	text-align: center;

	inline-size: var(--badge-width);
	block-size: var(--badge-height);
	padding-inline: 16px;
	display: inline-flex;
	gap: var(--gap);
	border-radius: var(--badge-radius);
	white-space: nowrap;                 /* 1行に収めたい場合 */
	line-height: 1;
}

/* カード内でバッジを中央寄せ */
.person-card .job-badge { 
  	margin-inline: auto;      /* 中央寄せ */
}

/* バッジの共通サイズを決める（全カードで同じ幅） */
:root{
  	--badge-width: 250px;     /* ここを調整すれば一括で幅変更 */
	--badge-height: 64px;
	--badge-radius: 9999px;
	--icon-size: 35px;        /* アイコンの見た目サイズ */
	--gap: 10px;
}

/* アイコンの枠を固定し、画像/inline-SVG をその枠にフィットさせる */
.job-badge__icon{
	inline-size: var(--icon-size);
	block-size: var(--icon-size);
	flex: 0 0 var(--icon-size);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 画像アイコンの場合（<img src="*.svg">） */
.job-badge__icon img{
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

.job-badge__icon img,
.job-badge__icon svg {
	width: 100%;
	height: 100%;
	display: inline-block;
	object-fit: contain;
	vertical-align: middle;
}

/* アクセシビリティ：フォーカスリング */
.job-card a:focus-visible { outline: 3px solid #58BAFC; outline-offset: 4px; border-radius: 20px; }

/* ホバー：画像をほんの少し拡大、影を強める */
.job-card a:hover .job-fig img { transform: scale(1.03); }
.job-card a:hover .job-fig { box-shadow: 0 16px 36px rgba(0,0,0,.12); }

/* “募集要項” ボタン中央寄せ */
.btn-more.jobs-more {
	display: inline-block;
	border: 1.5px solid #333333;
	padding: 0.9rem 2.4rem;
	border-radius: 999px;
	font-weight: 600;
	color: #333333;
	text-decoration: none;
	transition: all 0.3s ease;
}

.jobs .btn-more:hover {
	background-color: #EBCFC2;
	color: #333333;
	border: 1.5px solid #777777;
}

/* ========================
	Entry（PC）
========================= */

.entry {
	position: relative;
  	background: #FAF7F3;              /* カンプのやさしいベージュ */
	padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 10vw, 120px);
	text-align: center;
	overflow: hidden;
}

/* 上部カーブ（FVと同系の丸み） */
.entry::before{
	content:"";
	position:absolute;
	top:-140px; left:50%;
	width:140%; height:240px;
	transform:translateX(-50%);
	background:#FDFCF9;                     /* カンプの白い幕 */
	border-bottom-left-radius:1200px 260px;
	border-bottom-right-radius:1200px 260px;
	z-index:0;
}

/* レイアウト */
.entry__inner {
	width: min(1024px, 90%);
	margin: 0 auto;
}

.entry__illust {
	display: block;
  	margin: 80px auto 80px;   /* 上 80px, 下 40px はお好みで */
  	max-width: 480px;         /* ついでに最大幅も決めておくと綺麗 */
}

.entry__illust img {
	width: min(480px, 85%);
	height: auto;
	display: block;
	margin-inline: auto;
}

.entry__catch {
	font-size: clamp(20px, 3.4vw, 32px);
	font-weight: 700;
	letter-spacing: .04em;
	color: #333333;
	line-height: 1.6;
	margin: 0 0 clamp(16px, 3vw, 54px);
}

.entry__notes {
	font-size: 14px;
	line-height: 2;
	color: #333333;               /* カンプの薄い黒に合わせるなら */
	text-align: center;
  	margin-top: 24px;          /* イラスト → 見出し → 本文 の間 */
  	margin-bottom: 32px;       /* 本文 → ボタン の間 */
	max-width: 480px;   /* 文章幅を制限して中央寄せ */
	margin-left: auto;
	margin-right: auto;
}

.entry__notes br {
  line-height: 2.2;          /* br 改行を少しゆったり見せる */
}

/* CTAボタン（既存の .btn があるなら継承、なければ下記で） */
.btn.entry__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 250px;
	height: 58px;
	padding: 0 28px;
	border-radius: 999px;
  	background: #F0936B;               /* オレンジ寄りのやさしい色 */
	color: #fff;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: .02em;
	box-shadow: 0 8px 28px rgba(231, 153, 113, 0.28);
	transition: transform .25s ease, 
}
.btn.entry__cta:hover {
	background-color: #58BAFC;
	color: #ffffff;
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(231, 153, 113, 0.35);
}

/* ==============================
	Footer
   ============================== */
.footer {
  	background-color: #FDFCF9; /* カンプのうすいベージュ */
	padding: 48px 0 32px;
	font-size: 14px;
}

.footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
  	grid-template-columns: 260px 1fr 240px 280px; /* 左 / 住所 / 会社情報 / 採用メニュー */
	grid-template-rows: auto auto auto; /* ← 3段にする */
	column-gap: 28px;
	row-gap: 16px; /* 好みで。不要なら0でもOK */
	align-items: start;
}

/* 左カラム ---------------------------------- */
.footer__left {
	display: contents;
}

.footer__logo { 
	grid-column: 1; 
	grid-row: 1; 
}

.footer__logo img {
	display: block;
  	width: 220px;          /* ロゴ画像に合わせて微調整 */
	height: auto;
}

.footer__sns {
	display: flex;
	gap: 16px;
	margin: 4 0 2px;
	grid-column: 1; 
	grid-row: 2;
}

.footer__sns-item{
	display: inline-flex;
	width: 50px;
	height: 50px;
}

.footer__sns-item img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.footer__corp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 15px;
	border-radius: 999px;
	border: 1px solid #333333;
	font-size: 14px;
	text-decoration: none;
	grid-column: 1;
  	grid-row: 2;          /* ← 3 → 2 に変更（SNSと同じ行へ） */
	justify-self: start;
	align-self: end;       /* ← SNSより下に寄せて配置 */
	margin-top: 1px;      /* ← SNSとの距離（8〜20pxで調整） */
}

.footer .footer__corp-btn:hover {
	background-color: #58BAFC;
	color: #ffffff;
}

/* 中央カラム -------------------------------- */
.footer__center {
	line-height: 1.9;
	grid-column: 2;
  	grid-row: 2;   /* ← spanしない */
	align-self: start;
}

.footer__center p + p {
	margin-top: 10px;
}

/* 右カラム ---------------------------------- */
/* 右エリア全体：住所との間に縦線＆少し余白 */
.footer__right {
	display: contents; /* ul2つをfooter__innerのgrid子要素として扱う */
}

/* 右エリア内の共通リストスタイル */
.footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 左側のリスト（会社情報ブロック） */
/* 会社情報カラム（3列目） */
.footer__nav--site {
	grid-column: 3;
  	grid-row: 2;                /* ← spanしない */
	border-left: 1px solid #333333;
	padding-left: 32px;
	align-self: stretch;        /* ← 縦線を高さに追従させる */
}


/* 採用メニューカラム（4列目） */
.footer__nav--recruit {
	grid-column: 4;
  	grid-row: 2;                /* ← spanしない */
	border-left: 1px solid #333;
	padding-left: 32px;
	align-self: stretch;

	display: grid;
	grid-template-rows: repeat(3, auto);
  	grid-auto-flow: column;     /* ← 縦に埋めてから次の列へ */
	column-gap: 48px;
	row-gap: 1px;
}

/* 会社情報（縦並び）は margin-top でOK */
.footer__nav--site li + li {
	margin-top: 10px;
}

.footer__nav--recruit li {
  margin: 0; /* row-gapで管理 */
}

/* recruit（grid）は row-gap を使うので margin を消す */
.footer__nav--recruit li {
	margin: 0;
}

.footer__nav a {
	text-decoration: none;
}


.footer__center { grid-column: 2; }
.footer__nav--site { grid-column: 3; }
.footer__nav--recruit { grid-column: 4; }

.footer__center,
.footer__nav {
	margin-top: 0;
}


/* コピーライト ------------------------------ */
.footer__copyright {
	margin-top: 24px;
	padding-top: 8px;
	text-align: left;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	font-size: 12px;
}




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


/** -----------------------------------------------
	Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media (max-width: 640px) {

/* ==============================
	Header（SP）
   ============================== */
/* ヘッダー全体の上下の余白（必要なら） */
.header__inner{
    padding: 14px 0; /* すでにSPで別指定があるなら省略OK */
}

  /* ロゴ（svg画像）サイズ調整 */
.header__logo img{
    width: 132px;   /* ← カンプ寄せはここを微調整（130〜160pxくらいで） */
    height: auto;
}

  /* 「採用サイト」文字サイズ調整 */
.header__subtext{
    font-size: 16px;     /* ← カンプ寄せはここを微調整（14〜18pxくらいで） */
    line-height: 1.1;
    margin-top: 6px;     /* ← ロゴとの間（0〜6pxで調整） */
    letter-spacing: 0.05em;
}


/* ===== SP：ハンバーガー + ドロワー ===== */
  /* PCメニューを一旦ドロワーにするので、SPでは右側アクションを表示 */
.header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

  /* SPのENTRY（右上） */
.btn-entry--sp {
    height: 44px;
  	padding: 0 16px;      /* 高さ固定するので上下paddingは0に寄せる */
  	line-height: 44px;    /* 文字の縦位置が安定 */
	font-size: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
    border-radius: 9999px;
}

  /* ハンバーガー */
.header__hamburger{
    display: inline-flex;
	flex-direction: column;
	justify-content: center;
  	align-items: center; /* ← これ追加で線が中央揃えになる */
	gap: 6px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;

    position: relative;   /* ← これが重要 */
    z-index: 2100;        /* ドロワーより上に出したい時 */
}

/* 3本線は“中央”に絶対配置して、上下にずらす */
.header__hamburger-line{
	position: absolute;
	left: 50%;
	width: 28px;
	height: 2px;
	background: #333;
	border-radius: 999px;
	transform: translateX(-50%);
	transition: transform .25s ease, opacity .2s ease;
}

/* 上・中・下 */
.header__hamburger-line:nth-child(1){ top: 14px; }
.header__hamburger-line:nth-child(2){ top: 21px; }
.header__hamburger-line:nth-child(3){ top: 28px; }

/* OPEN時：×に変形（bodyに is-menu-open が付く前提） */
body.is-menu-open .header__hamburger-line:nth-child(1){
	transform: translateX(-50%) translateY(7px) rotate(45deg);
}
body.is-menu-open .header__hamburger-line:nth-child(2){
	opacity: 0;
}
body.is-menu-open .header__hamburger-line:nth-child(3){
	transform: translateX(-50%) translateY(-7px) rotate(-45deg);
}



  /* ✅ SPではnavを「右から出るドロワー」に変更 */
.header__nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(86vw, 320px);
    background: #FAF7F3;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 2000;
    padding: 96px 24px 24px;
    display: block;
}

.header__nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.header__nav a {
    font-size: 18px;
}

  /* SPでは「nav内のENTRY」を消して、右上ENTRYだけにする（重複防止） */
.header__nav .btn-entry {
    display: none;
}

/* ✅ メニューOPEN時（bodyにクラスが付く） */
body.is-menu-open {
	display: block;
	overflow: hidden; /* 背景スクロール止め */
}

body.is-menu-open .header__nav {
	transform: translateX(0);
}

/* ▼ 開いている間、右上の「ENTRY + ✕」を画面に固定 */
body.is-menu-open .header__actions{
    position: fixed;
    top: 12px;          /* 好みで微調整 */
    right: 16px;        /* 好みで微調整 */
    z-index: 3001;      /* nav(2000)より上にする */
}

  /* ▼ ドロワー自体は固定のまま + 中身だけスクロールできるように */
.header__nav{
    height: 400px;
	overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* いったん消す */
.header__hamburger:focus {
	outline: none;
}

/* キーボード操作のときだけ見えるように（おすすめ） */
.header__hamburger:focus-visible {
	outline: 2px solid #F0936B;
	outline-offset: 4px;
}

/* ===== SP ENTRY ボタン ===== */
.btn-entry--sp {
    background-color: #F0936B;
    color: #fff;
    box-shadow: 0 4px 12px rgba(240, 147, 107, 0.35);
    transition:
    background-color .2s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

  /* ❌ SPでは hover は基本使わない（保険的に無効化） */
.btn-entry--sp:hover {
    background-color: #F0936B;
    transform: none;
}

  /* ✅ タップ中の表現（最重要） */
.btn-entry--sp:active {
    background-color: #E27F57; /* 少し濃いオレンジ */
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(240, 147, 107, 0.4);
}

  /* キーボード操作・アクセシビリティ */
.btn-entry--sp:focus-visible {
    outline: 2px solid #58BAFC;
    outline-offset: 3px;
}

/* ==============================
Hero（SP）
============================== */
.hero {
	background: #FAF7F3;
}

.hero__media {
position: relative;
  	overflow: hidden; /* カンプみたいに下を丸く切るため */
	border-bottom-left-radius: 56px;
	border-bottom-right-radius: 56px;
}

.hero__img {
	width: 100%;
	height: auto;
	display: block;
}

.hero__catch {
	position: absolute;
	left: 18px;
	bottom: 18px;
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	color: #333;
	letter-spacing: 0.02em;
}

.hero__lower {
	padding: 22px 0 24px;
	text-align: center;
}


}