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

html, body {
	overflow-x : hidden;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}


img {
	max-width: 100%;
}

#about, #service, #works, #recruit, #members, #date, #news{
	padding: 80px 20px 80px 20px;
}

.full-width {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}




.section-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.fade {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	}

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

}





/** -----------------------------------
    テキスト
-------------------------------------**/

h2.large , h3.large{
	font-weight: bold;
	font-size: 40px;
	line-height: 1.8;
	letter-spacing: 0.05em;
}

h2.small , h3.small{
	font-weight: bold;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: 0.05em;
}

p.large {
	font-size: 20px;
	line-height: 1.8;
	letter-spacing: 0.05em;
	font-weight: bold;
}

p.medium {
	font-size: 18px;
	line-height: 1.8;
	letter-spacing: 0.05em;
	font-weight: medium;
	text-align: center
}

p.small {
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: 0.05em;
	font-weight: Regular;
}

/** -----------------------------------
    ボタン
-------------------------------------**/
.btn-wrap {
	margin: 80px 0;
	text-align: center;   /* 位置は親で */
}

.btn-more {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 32px 16px;
border: 2px solid #3b2f26;
border-radius: 999px;
text-decoration: none;
color: #3b2f26;
font-weight: 700;
font-size: 20px;
line-height: 1.8;
letter-spacing: 0.05em;
}

.btn-more img {
display: block;       /* 矢印を下に落とす */
margin: 0;   /* 中央寄せ */
width: 24px;
transition: transform 0.3s ease;
}

.btn-more:hover {
	opacity: 0.5;
	transition: opacity 0.3s ease;

}

.btn-more:hover img {
	transform: translateX(10px) scaleX(1.1);
}

/* ===== CTA/ヘッダー/メニュー共通ボタン===== */
.btn-contact,
.btn-entry{
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 80px 0 32px; /* 右アイコン分 */
  border-radius: 999px;   /* ←丸はここで確定 */
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;

  background-repeat: no-repeat;
  background-position: right 32px center;
  background-size: 33px 33px;
}

.btn-contact{
  width: 350px;
  background-color:#f7f3eb;
  border:1px solid #e4a27c;
  color:#e4a27c;
  background-image:url("../images/contacticon.png");
}

.btn-entry{
  width: 230px;
  background-color:#e4a27c;
  border:1px solid #e4a27c;
  color:#f7f3eb;
  background-image:url("../images/entryicon.png");
}



/** -----------------------------------
レイアウト
-------------------------------------**/
.section-title {
	text-align: center;
	margin-bottom: 40px;
}


.col-2 {
	display: flex;
	justify-content: center;
	gap: 24px;
	align-items: center;
	flex-wrap: nowrap;
}

.col-2 .item {
	min-width: 0;
	flex: 0 1 auto;
}

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


.col-3-full {
	width: 100vw;
}	

.col-3 {
	display: flex;
	gap: 24px;
}

.col-3 .item {
	flex: 1;
}

.col-4-full {
	width: 100vw;
	margin-left: calc(50% - 50vw );
}



/* 通常時（slickがまだ効いてない時）は横並び */
.col-4 {
	display: flex;
	gap: 24px;
}

/* slickが効いたらflexを切る（slickのレイアウトに任せる） */
.col-4.slick-initialized {
	display: block;
}

/* 画像の余白（gapの代わり） */
.col-4 .item {
	padding: 0 12px;
}
.col-4 {
	margin: 0 -12px;
}

.col-4 img {
	width: 100%;
	display: block;
}





/* ===============================ヘッダー全体================================ */

#header {
	position: fixed;          
  /* 画面上部に固定 */
	top: 0;
	left: 0;
	width: 100%;
	background:#f3eed5;      
	z-index: 1000;
	border-bottom: 1px solid #ddd;
}

/* 中身を横並びにする */
.header-inner {
	display: flex;
  	justify-content: space-between; /* 左：ロゴ / 右：その他 */
	align-items: center;
	padding: 16px 32px;
}

/* ===============================ロゴ=============================== */
#logo{
	margin: 0;
}

#logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #3b2f26;
}

#logo img {
  height: 32px;             /* ロゴの高さ */
	display: block;
}

 /* 採用サイト文字 */
#logo-text {
	margin-left: 8px;
	font-size: 24px;
	font-weight: medium;
	letter-spacing: 0.05em;
}



/* ===============================右側（ボタン＋ハンバーガー）================================ */


/* 右側 */
#header-light{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:nowrap;
}

/* ボタン2つ */
.header-buttons{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:nowrap;
}


/* ヘッダーボタン hover */
.header-buttons a{
	transition: opacity 0.3s ease;
}

.header-buttons a:hover{
	opacity: 0.7;
}
/* お問い合わせ（左） */
.btn-contact{
	width: 350px;                 /* 左は大きめのまま */
	background-color:#f7f3eb;
	border:1px solid #e4a27c;
	color:#e4a27c;
	background-image:url("../images/contacticon.png");
}

/* エントリー（右） */
.btn-entry{
	width: 230px;                 /* 右は小さくしてOK（好きな幅で） */
	background-color:#e4a27c;
	border:1px solid #e4a27c;
	color:#f7f3eb;
	background-image:url("../images/entryicon.png");
}



/* ハンバーガー */
#hamburger{
	flex: 0 0 auto;
	width: 24px;
	position: relative;
	cursor: pointer;
}

#header-inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 32px;
	gap: 16px;           /* 左右が詰まるの防ぐ */
}

#logo{ flex: 0 0 auto; }
#header-light{ flex: 0 0 auto; }



/* ===============================ハンバーガーメニュー================================ */

/* ☰全体 */
#hamburger {
  position: relative;       /* メニュー位置の基準 */
	width: 24px;
	cursor: pointer;
}

/* 3本線 */
#hamburger span {
	display: block;
  	height: 2px;              /* 線の太さ */
	background: #3b2f26;
  	margin: 5px 0;            /* 線の間 */
}

/* 背景オーバーレイ */
#menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(247,243,235,0.85);
	backdrop-filter: blur(6px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	z-index: 998;
}

/* メニュー本体 */
#hamburger-menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 280px;
	height: 100vh;
	background: #fff;
	padding: 80px 24px;
	transform: translateX(100%);
	transition: transform 0.4s ease;
	z-index: 999;
}

/* 開いた状態 */
#hamburger-menu.is-open {
	transform: translateX(0);
}

#menu-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}
/* ===== ハンバーガー内CTAはPCでは非表示（スマホだけ表示） ===== */
#hamburger-menu .menu-cta{
  display: none;
}

/* ===== ハンバーガー内リンクの装飾は「通常リンク」だけに当てる ===== */
#hamburger-menu a{
  display: block;
  font-size: 18px;
  padding: 16px 0;
  color: #3b2f26;
  text-decoration: none;
  border-bottom: 1px solid #f7f3eb;
}

/* でも「ボタン化したリンク(menu-btn)」には当てない */
#hamburger-menu a.menu-btn{
  padding: 0;
  border-bottom: none;
}

#hamburger-menu a:hover{
	opacity: 0.7;
}



/* 閉じるボタン */
#menu-close {
	position: absolute;
	top: 20px;
	right: 20px;

	font-size: 32px;
	line-height: 1;
	background: none;
	border: none;
	cursor: pointer;

	color: #3b2f26;
}

#menu-close:hover {
	opacity: 0.6;
}
/* ハンバーガー横並び*/
#hamburger {
	flex: 0 0 auto;
	width: 24px;
	position: relative;
}

/* ハンバーガーメニュー内のCTAを下に離す */
#hamburger-menu .menu-cta{
  margin-top: 32px;      /* ←ここで距離調整 */
  padding-top: 24px;     /* 見た目を整える用 */
  border-top: 1px solid #f7f3eb;
}





/* ===============================FV===============
================= */


#fv {
max-width: 1200px;
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding-top: 80px;          /* ヘッダー分 */
padding-bottom: 80px;
box-sizing: border-box;
}

.fv-inner{
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: baseline;
gap: 24px;
position: relative;
}

/* 写真の箱（基準点） */
#fv-photo-wrap{
	position: relative;
	margin: 0 auto;
}


/* 写真そのもの */
#fv-photo{
	width:100%;
	height: auto;
	display: block;
	margin: 0 auto;
	z-index: 1;
}
/* 写真の“白フェード”（簡易版） */
#fv-photo-wrap::after{
content: "";
position: absolute;
inset: -20px;
background: radial-gradient(circle, rgba(250,246,232,0) 45%, rgba(250,246,232,1) 75%);
pointer-events: none;
}

/* 左のコピー（写真に重ねる） */
#fv-lead{
position: absolute;
left: 0;   /* ← ここをPSDに合わせて調整 */
bottom: clamp(80px, 6vw, 160px);
margin: 0;
font-size: clamp(36px,5vw, 64px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.05em;
color: #3b2f26;
z-index: 3;
}

/* 右上の鳩（写真に重ねる） */
#fv-bird{
position: absolute;
right: clamp( 16px, 4vw, 64px );
top: clamp( 40px, 6vw, 120px);
width: clamp( 90px, 12vw, 180px );
z-index: 4;

}


/* ===============================私たちについて===============
================= */
#about {
	background-color: #f3eed5;	
}

#about .col-2{
	justify-content: space-between;
	flex-wrap: nowrap;
}


#about .col-4-full{
	margin-bottom: 40px;
}





#about p.medium {
	text-align: left;
} 

/* slickが効いてる間は flex を無効化（重要） */
.responsive.slick-initialized{
display: block;
}

/* 画像間の余白（flexのgapの代わり） */
.responsive .item{
  padding: 0 12px; /* 好きに */
}

.responsive img{
	width: 100%;
	display: block;
}


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

#service {
	background-color:none;
	
}

.card {
	width: 370px;
	height: 470px;
	background-color: #d4dfbb;
	padding: 32px 24px;
	border-radius: 30px;

	display: flex;
	flex-direction: column;

	align-items: center;

}	

.card .small {
	text-align: center;
	margin-bottom: 12px;
}

.card p {
	text-align: left;
}



.col-3 {
	margin-top: 80px;
}



/* ===============================働く環境===============
================= */

#works {
	background-color: #f3eed5;
	
}

.cloud {
	position: relative;
	width: 208px;
}

.cloud img{
	width: 100%;
	display: block;

}

#works .cloud p.large{
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}

#works .col-2{
	margin-top: 40px;
}



/* ===============================募集職種===============
================= */
#recruit{
	background-color: none;
	
}


.job-icon{
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}
.job-list {

	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;

	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* recruit の2カラムだけ中央揃えにする */
#recruit .col-2{
  align-items: center;   /* 左右カラムを縦中央で揃える */
}

/* 右カラム（2つ目の.item）内で job-list を中央に */
#recruit .col-2 > .item:nth-child(2){
	display: flex;
  	justify-content: center;  /* 横中央 */
}

#recruit .col-2{
	margin-top: 40px;
}
/* ===============================
   募集職種 ボタンホバー
=============================== */

.job-link{
	width: 260px;
	justify-content: center;
	white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 16px 20px;
  border-radius: 12px;

  text-decoration: none;
  color: inherit;

  transition: opacity 0.3s ease;
  cursor: pointer;

  	font-size: 20px;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: 0.05em;
	color: #3b2f26;
	text-align: center;

	height: 69px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;

	background-color: #d4dfbb;
	border: none;
	border-radius: 34.5px;
	padding: 14px 22px;
}

.job-link:hover{
  opacity: 0.6;
}

/* ===============================メンバー紹介================= */
#members { background-color: #f3eed5; }

.member-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px 80px;
	margin-top: 80px;
}

/* 1枚の箱 */
.member-card{
	cursor: pointer;
	position: relative;
	max-width: 420px;
	margin: 0 auto;
	padding-top: 0;   /* ←吹き出し置く分の“天井”を増やす */
	text-decoration: none;
	color: inherit;
}

/* 写真（カード本体） */
.member-photo{
	width: 100%;
	display: block;
	border-radius: 22px;
	margin-top: 0;
	position: relative;
	z-index: 1;
}

/* 吹き出し：上にいて、写真に少しかぶる */
.member-bubble{
	position: absolute;
	left: 75%;
	top: -48px;
	transform: translateX(-50%);
	width: clamp(240px, 22vw, 300px);         /* 好みで調整 */
	max-width: 90%;
	width: 240px;
	height: auto;
	z-index: 2;
	pointer-events: none;
}
.member-card{
	position: relative;
	max-width: 420px;
	margin: 0 auto;
	padding-top: 70px;
}

.member-name{
	width: 100%;
	margin: -78px auto 0;
	padding: 20px 20px;
	background-color: #f7f3eb;
	border-radius: 0 0 20px 20px;
	text-align: center;
	position: relative;
	z-index: 3;
	box-sizing: border-box;
}
.bubble-text{
	position: absolute;
	top: 50%;
	left: 44%;
	transform: translate(-50%, -50%);
	width: 80%;
	line-height: 1.4;
	text-align: center;
	color: #3b2f26;
	font-weight: 700;
	pointer-events: none;

}
.member-role {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.38;
	letter-spacing: 0.05em;
	color: #3b2f26;

}

.member-person{
	font-size: 18px;
	font-weight: bold;
	line-height: 1.38;
	letter-spacing: 0.05em;
	color: #3b2f26;
}

/* ==============================================date
================= */
#date {
	background-color: none;
	
}
#date .col-2 .item  {
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

#date .col-2 {
	align-items: center;
	
}
#date .col-2 .item{
	border-radius: 24px;
}



/* データで見る：ホバー用 */
.date-item{
	display: flex;
	overflow: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 画像 */
.date-item img{
	width: 100%;
	height: auto;
}

/* PC hover */
.date-item:hover{
	opacity: 0.7;
	transform: scale(1.02);
}

/* ==============================================news
================= */
#news {
	background-color: #f3eed5;
	
}

#news .small{
	text-align: center;
}

/* 3カラム */
.news-grid{
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

/* カード */
.news-card{
	text-align: left;
}

.news-card img{
	width: 100%;
	display: block;
	margin-bottom: 16px;
}
/* 画像エリア */
.news-thumb{
	display: block;
	transition: opacity 0.3s ease, transform 0.3s ease;
}


/* PC hover */
.news-thumb:hover{
	opacity: 0.7;
	transform: scale(1.02);
}


/* タイトル */
.news-card .medium{
	margin-bottom: 8px;
}

/* 本文 */
.news-card .small{
	line-height: 1.6;
}

/* お知らせ一覧リンク */
.news-more-wrap{
	text-align: right;
}

.news-more{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: #3b2f26;
	transition: opacity 0.3s ease;
}

.news-more img{
	width: 16px;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

.news-grid{
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

/* hover */
.news-more:hover{
	opacity: 0.7;
}

.news-more:hover img{
	transform: translateX(6px) scaleX(1.15);
	opacity: 0.6;
}

/* ==============================================cta
================= */
#cta {
	width: 100%;
	margin-left: 0;
	padding: 0;
	background-image: url("../images/CTA-img.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	
}

#cta .section-inner {
	padding: 80px 120px ;
	text-align: center;
}

#cta .cta-buttons{
	display: flex;
	justify-content: center;

	gap: 24px;
	margin-top: 40px;
	flex-wrap: nowrap;
}

 #cta .btn-contact:hover{
    opacity: 0.7;
	transform: scale(1.02);
  }
  #cta .btn-entry:hover{
    opacity: 0.7;
	transform: scale(1.02);
  }

  #cta h2{
	color: #3b2f26;
	text-shadow: 
	-1px -1px 0 #f7f3eb,
	1px -1px 0 #f7f3eb,
	-1px 1px 0 #f7f3eb,
	1px 1px 0 #f7f3eb;
  }



/* ==============================================footer
================= */
#footer{
	background: #3b2f26;
	color: #f7f3eb;
	padding: 28px 20px;
}

.footer-inner{
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.footer-nav{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap; /* 画面狭いと折り返す */
	margin-bottom: 12px;
}

.footer-nav a{
	color: #f7f3eb;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.6;
	transition: opacity .3s ease;
}

.footer-nav a:hover{
	opacity: 0.7;
}

.footer-copy{
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.05em;
	opacity: 0.9;
}

/* ===============================
   共通ホバーエフェクト
=============================== */

.hover-float {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}

.hover-float:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

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

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

@media screen and (min-width:641px){
  #fv-lead{
    transform: translateY(50px); /* ← 数字を増減して調整 */
  }

  /* Aboutは2カラムをきっちり半々に近づける */
  #about .col-2{
    display: flex;
    align-items: center;
    justify-content: center;  /* space-between をやめる */
    gap: 20px;                /* 好みで 16〜32 */
  }

  /* 2つのitemを伸びる箱にする（文章が横に広がる） */
  #about .col-2 .item{
    flex: 1;
    min-width: 0; /* これがないと文章が潰れることある */
  }

  /* 画像側は少しだけ小さめの比率にしたい場合 */
  #about .col-2 .item:first-child{
    flex: 0 0 42%;   /* 40〜50で調整OK */
  }

  #about .col-2 .item:last-child{
    flex: 1 1 58%;
  }

  /* PCは画像を制限しない（ハート大きく） */
  #about .col-2 .item img{
    max-width: 100%;
  }

  /* 文章をもっと横に使いたいなら */
  #about p.medium{
    max-width: none;
  }

}





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


/** -----------------------------------------------
Smartphone : 画面の横幅が640pxまで
------------------------------------------------**/

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

  /* =========================
    ヘッダー：高さはそのまま・ロゴだけ2段
  ========================= */
  #header-inner{
    padding: 10px 12px;
    gap: 8px;
    align-items: center;
  }

  #logo a{
    display: flex;
    flex-direction: column;   /* ロゴの下に採用サイト */
    align-items: flex-start;
    gap: 2px;
  }

  #logo img{
    height: 22px;
  }

  #logo-text{
    margin-left: 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  #header-light{
    gap: 8px;
  }

  /* ヘッダーのボタン枠は維持 */
  #header .header-buttons{
    display:flex;
    align-items:center;
    gap: 6px;
    flex-wrap: nowrap;
  }

  /* スマホ：お問い合わせはヘッダーから消す（エントリーだけ残す） */
  #header .header-buttons .btn-contact{
    display: none;
  }

  #header .header-buttons .btn-entry{
    display: inline-flex;
    width: auto;         /* PC固定幅を無効化 */
    height: 36px;
    padding: 0 32px 0 12px;
    font-size: 12px;
    background-position: right 10px center;
    background-size: 18px 18px;
    white-space: nowrap;
    border-radius: 999px; /* 念のため */
  }

  /* ハンバーガー */
  #hamburger{ width: 20px; }
  #hamburger span{ margin: 4px 0; }


  /* =========================
    ハンバーガー内CTA（スマホだけ）
  ========================= */
  #hamburger-menu .menu-cta{
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f7f3eb;
  }

  /* ここで「メニューリンクの装飾」を切る */
  #hamburger-menu .menu-cta a{
    border-bottom: none;
    padding: 0;
  }

  /* ハンバーガー内のボタン見た目を固定 */
  #hamburger-menu .menu-cta .menu-btn{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 280px;      /* ←幅広すぎ防止（320→280に） */
    height: 44px;

    margin: 0 auto;
    padding: 0 40px 0 16px; /* 右アイコン分 */

    border-radius: 999px;
    text-decoration: none;

    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
  }

  /* 色はヘッダーと同じ */
  #hamburger-menu .menu-cta .btn-contact{
    background-color:#f7f3eb;
    border:1px solid #e4a27c;
    color:#e4a27c;
    background-image:url("../images/contacticon.png");
  }
  #hamburger-menu .menu-cta .btn-entry{
    background-color:#e4a27c;
    border:1px solid #e4a27c;
    color:#f7f3eb;
    background-image:url("../images/entryicon.png");
  }

   /* メニュー本体（右から出る白い面） */
  #hamburger-menu{
    width: min(92vw, 360px);   /* ← ここが肝：左側まで広げる */
    right: 0;                  /* 右にぴったり寄せる */
    left: auto;
  }

  /* 中のCTAボタンはパネル内に収める */
  #hamburger-menu .menu-cta .menu-btn{
    max-width: 100%;
  }


  /* =========================
    FV（重ねたまま縮小）
  ========================= */
  #fv{
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 24px;
  }

  .fv-inner{
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: block;
  }

  #fv-photo-wrap{
    position: relative;
    width: min(520px, 92vw);
    margin: 0 auto;
  }

  #fv-lead{
    position: absolute;
    left: 16px;
    bottom: -20px;
    top: auto;
    z-index: 3;
    margin: 0;
    font-size: clamp(32px, 8vw, 40px);
    line-height: 1.4;
  }

  #fv-bird{
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 3;
    width: clamp(44px, 12vw, 72px);
    height: auto;
  }


  /* =========================
    共通余白・文字
  ========================= */
  #about, #service, #works, #recruit, #members, #date, #news{
    padding: 40px 16px;
  }

  h2.large{ font-size: 28px; line-height: 1.5; }
  h2.small{ font-size: 20px; }
  p.large{ font-size: 16px; }
  p.medium{ font-size: 15px; line-height: 1.7; }
  p.small{ font-size: 14px; }

  .section-title{ margin-bottom: 20px; }


  /* =========================
    カラム：基本は縦積み
  ========================= */
  .col-2, .col-3, .col-4{
    flex-direction: column;
    gap: 24px;
  }

  #about p.medium{ text-align: center; }
  #about .col-2 .item img{
	width: 100%;
	max-width: 160px;
	height: auto;
	display: block;
	margin: 0 auto;
  }

  .card{
    width: 100%;
    height: auto;
    padding: 24px 20px;
  }

  .cloud-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .cloud{ width: 180px; }
  #works .cloud p.large{ font-size: 16px; }

  .job-item{
    width: 100%;
    height: auto;
    padding: 12px 20px;
    font-size: 16px;
  }

  .member-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }



/* Works：スマホだけ並び順を逆にする */
#works .col-2{
  flex-direction: column-reverse;
}


  /* =========================
    NEWS：スマホでslickする前提（grid解除）
  ========================= */
  .news-grid{
    display: block;
    margin-top: 32px;
    margin-left: -12px;
    margin-right: -12px;
  }

  .news-grid .news-card{
    padding: 0 12px;
  }

/* =========================
   CTA（スマホ）：背景が消えない版（beforeで敷く）
========================= */
#cta{
	background-image: url(../images/SP-CTA-img.png);
	background-size: cover;
	background-position: center top;
	position: relative;
	padding: 56px 16px;
	overflow: hidden; /* 背景がはみ出してもOK */
}


/* 中身を前面に */
#cta .section-inner{
  position: relative;
  z-index: 1;

  padding: 0;
  text-align: center;
}



/* ボタン縦並び */
#cta .cta-buttons{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
}

/* CTA内ボタンだけコンパクト（header-buttonsの影響を上書き） */
#cta .cta-buttons a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: min(280px, 100%);
  height: 44px;
  padding: 0 40px 0 16px;
  box-sizing: border-box;

  border-radius: 999px;
  background-position: right 14px center;
  background-size: 18px 18px;
}

  /* メンバー紹介 */
    .member-bubble{
    transform: translateX(-60%);  /* ← -50% → -60% */
  }
  .member-card{
    margin-bottom: 64px;
  }

#about br{display: none;}

.sp-break{
	display: block;
}
.footer-nav{
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}


  
}

/* newsが時々消える対策：ScrollRevealの影響を無効化 */
#news .news-card,
#news .news-card *{
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

#about{
	padding-top: 40px;
}

@media screen and (min-width:641px){

  /* 2カラムは横並びに戻す */
  .col-2, .col-3, .col-4{
    flex-direction: row;
    gap: 40px;
    align-items: center;
  }

  /* Worksの雲は縦並び（PC想定） */
  .cloud-list{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 640px){
  .member-card .member-role{
    white-space: nowrap;
    font-size: 14px;  
  }
  #fv{
	padding-bottom: 80px;
  }

  /* ヘッダー中身を左右に固定 */
  #header .header-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    margin: 0;
    padding: 10px 12px;
  }

  /* ロゴは左寄せ */
  #logo{
    margin: 0;
  }

  /* 右側は右寄せ */
  #header-light{
    margin-left: auto;
  }
.full-width,
  .col-4-full{
    width: 100%;
    margin-left: 0;
  }
  .btn-wrap{
	margin: 40px 0 0 0;
  }
  
  .member-grid {
	margin-top: 70px;
  }
  #about .col-4-full{
	margin-top: 40px;
  }
  #news .btn-more{
  font-size: 16px;      /* 20px → 小さめに */
  padding: 8px 20px 10px;
  gap: 8px;             /* 文字と矢印の間も少し狭く */
}

#news .btn-more img{
  width: 18px;          /* 矢印も少し小さく */
}

#works .section-inner,
#recruit .section-inner{
	padding: 0 16px;
}

#members .btn-wrap{
	margin: -20px 0 0 0;
}
.col-3{
	margin-top: 40px;
}
.job-list{
	gap: 10px;
}


}