@charset "UTF-8";
/** -----------------------------------------------
共通
------------------------------------------------**/
body {
	/*下記のCSSはご自身のデザインに合わせて書き換えてください。*/
	font-size: 16px;
	line-height: 1.6;
	color: #2B2B2B;
	background-color:#FFF7F6;
	font-family: "Zen Maru Gothic", "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", "Montserrat", sans-serif;
	font-weight: 700;
}

#about, #news, #business, #work_style, #member, #recruit, #cta, #flow {
  /* 共通で上に100px 下に60pxに余白をつける */
	padding: 100px 0 60px 0;
}

.inner {
/* コンテンツの最大幅を960pxに */
max-width: 960px;
/* 中央寄せに */
margin: 0 auto;
}
.container {
	max-width: 1440px;
	width: 100%;
	margin: 0 auto;
}

/* 本文(section-description)からコンテンツまでの距離50px */
.section-description {
	margin-bottom: 50px;
}

/** -----------------------------------
    ボタン
-------------------------------------**/
.button-border {
	font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
	display: inline-flex;

	width: 320px;
	height: 72px;
	padding: 0 20px;
	border: 3px solid transparent;
	background:
    linear-gradient(#FFF, #FFF) padding-box, /* ←ボタン内側の背景色 */
    linear-gradient(90deg, #EE6C61, #FEC89A) border-box; /* ←枠線のグラデ */
	border-radius: 999px;
	align-items: center;
	justify-content: center;		/* 「ボタン内の文字を中央」  */

	color: #2B2B2B;
	font-size: 18px;
	letter-spacing: 0.06em;
	font-weight: bold;

	white-space: nowrap;           /* ← 折り返し防止 */
	text-decoration: none; 		   /* ← aタグの下線対策 */

	position: relative;
	transition: all 0.3s ease; /* 詳細ボタン用 */
    cursor: pointer;
}

/* ボタン内の矢印 */
.button-border::after {
	content: "";
    position: absolute;
    right: 30px; 
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #EE6C61;   /* 上の線 */
    border-right: 2px solid #EE6C61; /* 右の線 */
    /* 45度回転させて「>」の形にする */
    transform: translateY(-50%) rotate(45deg);
}

.inner .button {
	text-align: center;
	margin-top: 50px;
}

/* ENTRYボタンのアニメーション */
html {
	scroll-behavior: smooth;
}

/* 追従のヘッダー分の高さを考慮 */
section {
	scroll-margin-top: 70px;
}

.button-header {
    /* ★ transitionを「外枠」にかける */
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    display: inline-block; /* 枠として動くために必要 */
}

/* ホバー時：オレンジの枠ごと拡大 */
.button-header:hover {
    transform: scale(1.05);
}

/* ★ 追記：ホバー時、中の文字色を白にする */
.button-header:hover .button-header__link {
    color: #FFF;
}

/* クリック時：オレンジの枠ごと縮小 */
.button-header:active {
    transform: scale(0.95);
}

/* 中のリンクの余計な動きをリセット */
.button-header__link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit; 
}

/* 詳細ボタンのアニメーション(ホバー時：少しだけ上に浮き、透明度を上げる ) */
.button-border:hover {
    transform: translateY(-2px); 
    opacity: 0.8; 
    box-shadow: 0 4px 12px rgba(238, 108, 97, 0.2); 
}

.button-border:active {
    transform: translateY(0);
    box-shadow: none;
}

/** -----------------------------------
    見出し上アイコン
-------------------------------------**/
.icon {
	width: 47px;
}

/** -----------------------------------
    雲などあしらい
-------------------------------------**/
.section {
	position: relative;
	overflow: hidden;     /* はみ出す装飾を隠すならON */
	isolation: isolate;   /* z-index事故防止（超大事） */
}

.section__bg{
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.section__inner{
	position: relative;
	z-index: 1;           /* コンテンツを必ず前に */
}
/** -----------------------------------
    テキスト
-------------------------------------**/
.section__heading {
	margin-bottom: 25px;
}

h2.section-title__ja {
	font-family: Zen Maru Gothic;
	color: #2b2b2b;
	font-weight: bold;
	font-size: 24px;
	line-height: 1.6;
	letter-spacing: 0.1em;
}
.section-title__en {
	font-family: "Montserrat", sans-serif;
	color: #F28A7E;
	font-weight: bold;
	font-size: 50px;
	line-height: 1.6;
	letter-spacing: 0.05em;
}

h3.card-title {
	font-family: Zen Maru Gothic;
	font-weight: bold;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

p.large { 							/* section aboutの本文*/
	font-weight: 500;
	line-height: 2.5;
	letter-spacing: 0.06em;	
}

p.section-description {  			/* タイトル下の本文(p.medium)*/
	font-size: 18px;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.06em;
}

p.card-excerpt { 					/* カード内要約(本文)*/
	font-size: 16px;
	font-weight: medium;
	line-height: 1.5;
	letter-spacing: 0.03em;
}
/** -----------------------------------
    レイアウト
-------------------------------------**/
/* ３カラム(BUSINESS WORK STYLE横並び*/

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

.card-item {
	width: calc((100% - 48px)/3);
}
.card-text h3.card-title {
	color: #F28A7E;
	margin: 18px 0;
}

.card-img {
	text-align: center;
}
.card-text p.card-excerpt {
	font-weight: 500;
}


/** -----------------------------------
    ヘッダー
-------------------------------------**/
.header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 20px;
    left: 0;
	z-index: 1000;
}
.header_left {
    height: 100%;
    background-color: #FFF;
    border-radius: 0 999px 999px 0;
    padding: 25px 31px;
	display: flex;
    align-items: center;
}

.header_nav_logo a {
    display: flex;
    align-items: center;
	text-decoration: none;
	color: #2b2b2b;
}
.header_nav_logo img {
	height: 27px;
	display: block;
	align-items: center;
}

.header-logo-sub {
	font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
	color: #2B2B2B;
	font-size: 20px;
	margin-left: 27px;
	white-space: nowrap;
	writing-mode: horizontal-tb;	/* 念のため横書き固定 */
}
.header_right {
    height: 100%;
    background-color: #FFF;
    border-radius: 999px 0 0 999px;
    padding: 17px 26px;
	display: flex;          /* ナビとボタンを横並びに */
    align-items: center;	/* 縦位置中央 */
	gap: 45px; 				/* ナビとボタンの間 */
}
.header_nav_area nav ul {
	font-size: 14px;
    display: flex;
    gap: 45px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header_nav_area a {
    text-decoration: none;   /* 青い下線を消す */
    color: #2B2B2B;
	white-space: nowrap;      
    display: inline-block;    /* 念のため */
}
.button-header {
	height: 46px;
	font-size: 18px;
	font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
	display: flex;
	align-items: center;
    background-color: #FFA06E;
    border-radius: 999px;
    padding: 0 45px;		/* 左右だけ余白をつける */
	margin-left: 0;
}
.button-header__link{
	text-decoration: none;
    color: #2B2B2B;
}

/* ホバーでタイトル色を変える */
.header_nav_area a:hover {
	color: #F28A7E;
}

/* 詳細ボタンすべてホバーでタイトル色を変える */
.button-border:hover {
	color: #F28A7E;
}


/** -----------------------------------
    page (mvとaboutの背景)
-------------------------------------**/
.page { 
	position: relative; 
	/* isolation: isolate;  */
}

.page__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;		/* MVコンテンツ(20)や波(1)よりもさらに上 */
	pointer-events: none;
	overflow: hidden; 	/* 水玉が画面からはみ出しても横スクロールを出さない */
}

/* 水玉の位置とサイズを再定義 */
.page__bg-item--mvabout {
    position: absolute;
    width: 381px;
    right: -20px; 
    top: 400px;   /* MVとABOUTの境界線あたり */
    z-index: 5;
    display: block !important;
}

/** -----------------------------------
    メインビジュアル
-------------------------------------**/
#mainvisual	{
	background-color: transparent;		
	height: 790px;
}
/* FV背景レイヤー */
.mv {
	position: relative;
	overflow: visible;
	z-index: 10;
	/* isolation: isolate; */
}

.mv__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.mv__bg { z-index: 0; }


.mv__bg-item {
	position: absolute;
	display: block;
	height: auto;
}

/* 大きい水玉（img_bubble.png：元1024）→ 表示は小さくする */
.mv__bg-item--01,
.mv__bg-item--04 {
	width: 381px;
}

.mv__bg-item--02,
.mv__bg-item--03 {
	width: 130px;
}

/* 位置指定 */
.mv__bg-item--01{
	left: -20px;
	top: 315px;
}

.mv__bg-item--02{
	left: 520px;
	top: -50px;
}

.mv__bg-item--03{
	left: 600px;
	top: 455px;
}

.mv__bg-item--04 {
	right: 10px;
	top: 465px;
}

/* 右カラムを右寄せにして、余白はpaddingで作る */
.mv__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 20;	/* 波よりも高い数字に設定 */
	height: 790px;
}

#mainvisual .mv__inner--wide.inner {
	max-width: none;
	width: min(1440px, 100%);
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.mv__left {
	position: relative;	/* ← 絶対配置の基準 */
	height: 100%;		/* ← FV高に合わせる（mv__innerが790ならそれに追従） */
}

.mv__headline {
	writing-mode: horizontal-tb;   /* 縦書き指定を打ち消す */
	text-orientation: mixed;       /* uprightの打ち消し */
	transform: none;               /* rotate系の打ち消し */
	white-space: nowrap;           /* 1文字折り返し防止 */
	position: absolute;
	margin: 0; /* ← まず既定marginを消す */
	top: 235px;
	left: 75px;
	overflow: visible;
}

.mv__headline {
	font-size: 35px;
}
.mv__left .mv__headline span {
	color: #F28A7E;
}

.mv__subcard {
	position: absolute;
	top: 384px;
	left: -70px;
	width: 382px;
	overflow: hidden;
}

.mv__subcard img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 右のヒーロー：absoluteなら right/top で動かす */
.mv__right {
	position: absolute;
	right: 100px;  /* ←ここが“右からの距離” */
	top: 150px;    /* ←ここを増やすと下がる */
}

.mv__hero {
	width: clamp(520px, 48vw, 784px);
}

/* 画像は器にフィットさせる */
.mv__hero img {
	width: 100%;
	height: auto;
	object-fit: initial;	
	display: block;
}

/** -----------------------------------
    ABOUT
-------------------------------------**/
#about	{
	background-color: #FFE8E5;
	overflow: visible;
	position: relative;
	z-index: 1;		/* MVより低い値にする */
	padding-top: 0px;
	margin-top: -20px;
	isolation: isolate;
	position: relative;
}

#about > .inner {
	position: relative;
	z-index: 10;
	margin-top: -30px;
}

#about 	.section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: visible;	/* ★波がセクションからはみ出してMV側に見えるようにする */
	pointer-events: none;
}
.about__bg-wave-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	transform: translateY(-60%); 	/* 画像の高さ分だけ「上」にずらす */
	z-index: 1;
}

#about .section__heading {
	text-align: left;
	position: relative;
	z-index: 10;
	margin-top: 0;
}
.about__bg-item {
	position: absolute;
	display: block;
	height: auto;
}

.about__bg-item--01 {
	width: 197px;
	height: auto;
	position: absolute;
	top: -70px;
	left: 20px;
	z-index: 5;
	display: block;
}

#about .section__heading {
	text-align: left;
}

#about .section__content {
	display: flex;
	/* 左右に散らすように水平方向の揃え方を指定 */
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}

/* 要素と要素の間の余白が40px、左右の要素の余白が等しくなるように指定 */
#about .section__content .about__image {
	width: calc((100% - 40px)/2);
}

#about .section__content .about__image img {
    width: 100%;
    height: auto;
}

#about .section__content .about__text {
	width: calc((100% - 40px)/2);
	flex: 1;
}

.about__catch {
	font-size: 35px;
	font-weight: 700;
	margin-bottom: 30px;
}

#about .section-description {  
	line-height: 2.5;
	font-weight: 500;
	margin-bottom: 50px;
}

.about__catch .about__catch-accent {
	color: #F28A7E;
}

#about .button-border {
    width: fit-content;
    min-width: 350px; 
    padding: 0 45px; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 80px; 
    transition: all 0.3s ease;
	margin-bottom: 50px;
}

/* 印アイコンが文字にめり込まないように距離を置く */
#about .button-border::after {
    margin-left: 20px; 
    flex-shrink: 0; /* ★矢印が絶対に潰れないように固定 */

}

.slider {
	width: 100%;
	overflow: hidden;
	margin-top: 50px;
}

.slider__content {
	display: flex;
	gap: 70px;
	width: max-content;				/* 中身の合計幅に自動で広がる */
	animation: infinity-loop 25s linear infinite;	/* アニメーション：名前 時間 速度 一定 無限 */
}

.slider__content img {
	width: 460px;
	height: 250px;
	object-fit: cover;
	flex-shrink: 0; /* 画像が潰れないように */
}

/* 左へ流れるアニメーションの設定 */
@keyframes infinity-loop {
0% {
    transform: translateX(0);
}
100% {
/* 半分（1セット分）まで進んだ瞬間に 0% に戻ることで無限ループに見える */
    transform: translateX(-50%);
}
}
/** -----------------------------------
    NEWS
-------------------------------------**/
#news	{
	background-color: #FFF7F6;
	position: relative;
	z-index: 0;
}

#news .section__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;			/* 背景色より上 */
}

.news_about__bg-item--01 {
	position: absolute;
	width: 240px;
	top: 10px;
	left: 20px;
	z-index: 2;
}

/* リストの初期値を消す + 幅と中央寄せ */
.top-news__list {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	border-top: 1px solid #2B2B2B;
}

/* 各行：下の区切り線（= inner いっぱい） */
.top-news__item {
	border-bottom: 1px solid #2B2B2B;
}

/* 日付＋タイトルを横並び */
.top-news__link {
	display: grid;   
	grid-template-columns: 160px 1fr; 
	column-gap: 50px;          
	align-items: center;
	cursor: pointer;
	gap: 43px;             

	max-width: 960px;
	margin: 0 auto;

	text-decoration: none;
	color: #2B2B2B;
	padding: 33px 0 33px 50px;
}

/* 日付を固定幅にして揃える */
.top-news__date {
	flex: 0 0 120px;
	font-weight: 700;
	font-variant-numeric: tabular-nums; 
}

/* タイトル本文 */
.top-news__title{
	flex: 1;
	font-weight: 700;
	line-height: 1.9;
}

/* ホバーでタイトル色を変える */
.top-news__link:hover .top-news__title{
	color: #F28A7E;
}


/** -----------------------------------
    BUSINESS
-------------------------------------**/
#business {
	background-color: #FFF7F6;
	text-align: center;
	position: relative;
	z-index: 1;
	/* --- 波を入れるスペースを設けるため↓ --- */
	padding-top: 100px;
	padding-bottom: 60px;
}

#business .section__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;			/* 背景色より上 */
}

.business__bg-item--01 {
	width: 354px;
	height: auto;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
}

.business__bg-item--02 {
	width: 239px;
	height: auto;
	position: absolute;
	bottom: -40px;
	left: -10px;
	z-index: 2;
}

.business__bg-wave-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	transform: translateY(50%);  	/* 波を下に突き出させる */
	z-index: 3;
}

/* BUSINESSの見出しと本文のみ中央寄せに設定する */
#business .section__heading {
	text-align: center;
}

#business .section-description {
	text-align: center;
}
#business .card-item {
	height: 100%;
	background-color: #FFE8E5;
}

#business .card-img {
	display: block;
	width: 277px;				/* FigmaのW */
	aspect-ratio: 277 / 229;	/* FigmaのW/H */
	border-radius: 999px;		/* 楕円にする */
	overflow: hidden;			/* はみ出しを切る */
	margin: 27px auto 0;		/* ←中央寄せ + 上余白 */
}
#business .card-img img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;            /* 余白なしで埋める */
}

#business .card-text  {
	padding: 18px 13px 27px 13px;
	text-align: center;
}
#business .card-text h3.card-title {
	margin-top: 18px;
}
#business .card-text p.card-excerpt  {
	text-align: left;
}

#business .button .button-border {
	margin-top: 50px;
}
.button-border__link{
	text-decoration: none;
    color: #2B2B2B;
}
/** -----------------------------------
    WORK_STYLE
-------------------------------------**/
#work_style	{
	background-color: #FFE8E5;
	position: relative;
	z-index: 0;
	padding-top: 100px;
	padding-bottom: 60px;
}

#work_style .card-wrap.is-3col {
	gap: 57px;
	align-items: stretch;		/* ←高さを揃える */
}
#work_style .card-item {
	flex: 1;					/* ←3カラムを均等幅に */
	display: flex;
	flex-direction: column;		/* 上から積む */
	align-items: center;		/* 中央に寄せる（アイコンや見出し） */
	text-align: center;
}

#work_style .card-img {
	display: block;
	width: 282px;				/* FigmaのW */
	aspect-ratio: 282 / 272;	/* FigmaのW/H */
	overflow: hidden;			/* はみ出しを切る */
	margin: 0 auto;				/* ←中央寄せ */
}

#work_style .card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#work_style .card-excerpt {
	text-align: left;
}

/** -----------------------------------
    MEMBER
-------------------------------------**/
#member	{
	background-color: #FFF7F6;	
	position: relative;
	z-index: 1;
	padding-top: 100px;
	padding-bottom: 240px;
}

#member .section__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.member__bg-item.member__bg-item--01 {
	position: absolute;
	width: 324px;
	height: auto;
	top: -60px;
	left: -5px;
	z-index: 5;
	pointer-events: none;
}

#member .inner {
	position: relative;
	z-index: 1;
}

/* MEMBERの見出しと本文のみ中央寄せに設定する */
#member .section__heading {
	text-align: center;
	position: relative;
	top: -50px;
	z-index: 2;
}

#member .section-description {
	text-align: left;
	position: relative;
	top: -50px;
	z-index: 2;
	
}

/* MEMBERカード4枚をグリッド(2列)にする */
.member-grid  {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	align-items: start;
	position: relative;
	top: -50px;
	z-index: 2;
}

.member-card {
	display: block;	
	transition: transform 0.3s ease, box-shadow 0.3s ease; 
    border-radius: 20px; 
    overflow: hidden;    
}

.member-card:hover {
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(238, 108, 97, 0.2); 
}

.member-card img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.3s ease;
}

.member-card:hover img {
    opacity: 0.9; 
}

#member .button {
    position: relative;
    z-index: 20;
	margin-top: 50px;
}

/** -----------------------------------
    RECRUIT
-------------------------------------**/
#recruit {
	background-color: #EDF4FF;	
	position: relative;
	z-index: 10;
	padding-top: 100px;		/* 波の分、少し多めに */
	padding-bottom: 60px;
}

#recruit .section__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.recruit__bg-wave-top {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transform: translateY(-90%);	/* 波を上のセクション(MEMBER)へ突き出させる */
	z-index: 2;
}

.recruit__bg-wave-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transform: translateY(100%);	/* 波を下のセクション(FLOW)へ突き出させる */
	z-index: 2;
}

.recruit__bg-item-right {
	position: absolute;
	top: -290px;
	right: -10px;
	width: 309px;
	z-index: 15;
}

.recruit__bg-item-bottom {
	position: absolute;
	bottom: -180px;
	left: 15px;
	width: 356px;
	height: auto;
	z-index: 5;		/* 波よりも手前に出す */
}

#recruit .inner {
	position: relative;
	top: -140px;
	z-index: 10;
	margin-bottom: -140px;
}

.card-wrap.is-vertical {
	/* 縦並び */
	display: flex;
	flex-direction: column;
	gap:30px;
}

#recruit .card-item {
	width: 100%;		/* ←重要：3カラムの幅指定を打ち消す */
	display: flex;		 /* ←画像とテキストを横並び */
	background-color: #FFF;
	border-radius: 30px 50px 50px 30px;
	overflow: hidden;	/* 角丸を効かせる */
}
/* 左画像 */
#recruit .card-img {
	flex: 0 0 268px;
	margin: 0;				/* 既存のmarginをリセット */
}

#recruit .card-img img {
	width: 268px;
	height: 301px;
	border-radius: 30px 0 0 30px;
	object-fit: cover;
	display: block;
}
/* 右テキスト */
#recruit .card-text {
	display: flex;
	flex-direction: column;
	padding: 37px 25px;
	text-align: left;
}

#recruit .card-text .card-title  {
	font-size: 26px;
	font-weight: 500;
	margin: 0;
}
#recruit .card-text .card-excerpt {
	font-size: 18px;
	font-weight: 500;
	margin: 24px 0;
}

#recruit .card-text .link {
	color: #2B2B2B;
	font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
	text-decoration: underline;
	text-underline-offset: 6px;
	transition: all 0.3s ease;
}

/* ホバー設定 */
#recruit .card-text .link:hover {
    color: #F28A7E; 
    text-decoration-color: #F28A7E; 
    opacity: 0.8; 
}

/** -----------------------------------
    FLOW
-------------------------------------**/
#flow	{
	background-color: #FFE8E5;	
	position: relative;
	z-index: 1;		/* RECRUITの波や水玉に踏まれるように低くする */
	padding-top: 120px;
	padding-bottom: 60px;
}

/* FLOWの見出しと本文のみ中央寄せに設定する */
#flow .section__heading {
	text-align: center;
}

.container {
	width: fit-content;
	display: flex;
	justify-content: center;
	gap: 50px;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

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

.flow-item .flow-img {
	position: relative;     /* 矢印の基準 */
}

/* 最後以外のカードの右側に “＞” を出す */
.flow-item:not(:last-child) .flow-img::after{
	content: "";          
	position: absolute;
	top: 50%;
	left: calc(100% + 25px);	/* ← gap/2 の位置に置く */
	width: 12px;
	height: 12px;
	border-top: 3px solid #2B2B2B;
	border-right: 3px solid #2B2B2B;;
	transform: translate(-50%, -50%) rotate(45deg);
	display: block;
}

.flow-img img {
	display: block;
	border-radius: 45px;
}

.flow-text {
	margin-top: 20px;
	font-weight: 700;
}

/** -----------------------------------
    CTA
-------------------------------------**/
#cta {
	background-color: #FFE8E5;
	padding: 100px 0 60px 0;
	display: flex;
	justify-content: center;

	width: 100%;
}
.cta-window {
	width: 100%;
	max-width: 1440px;
	height: 698px;
	position: relative;
	overflow: hidden;
	border-radius: 50% 50% 0 0 / 40% 40% 0 0;
	display: block;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* 画像を強制的に中央固定して切り抜く */
.cta-bg-img {
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%); 
    width: 100%;
    height: 100%;
    object-fit: cover; /* 比率を維持して窓を埋める */
	object-position: center top; /* 画像の上部を基準に表示 */
    z-index: 0;
}


.cta-copy {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
	gap: 25px;
	align-items: center;		/* 帯が横いっぱいに広がらないように */
	z-index: 2;
}

.cta-copy__line {
	display: inline-block;
	color: #F28A7E;
	background-color: #FFF;
	padding: 21px;
	font-weight: 700;
	line-height: 1.2;
}

.cta-copy__line.copy_01 {
	font-size: 35px;
}

.cta-copy__line.copy_02 {
	font-size: 40px;
}

.button-cta {
	position: absolute; 
    top: 460px;        
	font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;	
	transition: transform 0.2s ease-in-out;
    cursor: pointer;
    display: inline-flex; 
}

.button-cta:hover {
	transform: translateX(-50%) scale(1.05);
}

.button-cta:hover .button-cta__link {
	color: #FFF;
}

.button-cta:active {
	transform: translateX(-50%) scale(0.95);
}

.button-cta__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 331px;
	height: 81px;
    background-color: #FFA06E;
    border-radius: 999px;

	text-decoration: none;
    color: #2B2B2B;
	font-size: 24px;
	font-weight: 700;
}

/** -----------------------------------
    FOOTER
-------------------------------------**/
.footer {
	background-color: #FFE8E5;	
	padding: 100px 0;
	width: 100%;
}

.footer .inner {
    max-width: 1080px; 
    margin: 0 auto;
    padding: 0 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        "logo . button"
        "nav  nav nav"
        "copy copy copy"; 
	gap: 0;
}

/* --- 1段目: ロゴとENTRYボタン --- */
.footer-top-left {
	grid-area: logo;
}

.footer-top-right { 
    grid-area: button; 
    display: flex; 
    justify-content: flex-end; 
}

.footer_nav-area {
	grid-area: nav;
	display: flex;
    justify-content: flex-start;
    margin-top: 60px;
    margin-bottom: 80px;
    gap: 100px;
    align-items: flex-start;
}

.copyright { 
	grid-area: copy;
	font-size: 14px;
    color: #2B2B2B;
    margin-top: 40px;
    text-align: center;   
    width: 100%;
}

.footer_nav_logo a {
	display: flex;
    align-items: center;
    gap: 35px;
    text-decoration: none;
    white-space: nowrap; 
}

.footer-logo-sub {
	font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
    font-size: 18px;
    color: #2B2B2B;
    font-weight: 700;
}


.footer-nav-area__main {
    display: flex;
    gap: 60px;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer ul li a {
    white-space: nowrap; 
}

.footer-nav-area__main a {
    font-weight: 700;
    line-height: 2.2;
    color: #2B2B2B;
    text-decoration: none;
}

.footer-nav-area__sub a {
    font-weight: 700;
    line-height: 2;
    color: #2B2B2B;
    text-decoration: none;
}

.copyright {
	grid-area: copy;
	font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
    font-size: 14px;
    color: #2B2B2B;
	margin-top: 40px;
	text-align: center;
	width: 100%;
	display: block;
}


.footer a {
	font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
	text-decoration: none;
	color: #2B2B2B;
	transition: opacity 0.3s;
}

.footer a:hover {
	color: #F38375;
    opacity: 1; 
}
	
/* フッターボタン枠全体のアニメーション設定 */
.button-footer {
	height: 46px;
	font-size: 18px;
	/* display: flex; */
	align-items: center;
    background-color: #FFA06E;
    border-radius: 999px;
    padding: 9px 51px;
	transition: transform 0.2s ease-in-out !important;
    cursor: pointer;
    display: inline-flex;		
}

.button-footer__link{
	text-decoration: none;
    color: #2B2B2B;
}

/* ホバー時：枠ごと拡大 */
.button-footer:hover {
    transform: scale(1.05) !important;
}

/* ホバー時：中の文字色 */
.button-footer:hover .button-footer__link {
    color: #FFF;
}

/* クリック時：枠ごと縮小 */
.button-footer:active {
    transform: scale(0.95) !important;
}


/* 横スライドしないように */
body {
    overflow-x: hidden;
}


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


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

/* ===============================================
		Responsive:
   =============================================== */
@media screen and (min-width: 641px) {
	#business .card-wrap.is-3col {
		display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important;
        align-items: stretch !important;
    }

    #business .card-item {
        width: calc(33.333% - 20px) !important; /* 3枚横並び */
    }
    
	/* MEMBERセクション：コンテナ（PCでの最大幅を固定） */
    .member-slider-container {
		max-width: 1000px !important; /* PCの大画面に合わせる */
        margin: 40px auto 0 !important;
        padding: 0 !important; /* スマホ用の余白をリセット */
        position: relative;
    }

	/* PCのGrid用：PCではスライダーを止めて横に並べる */
    .member-swiper .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px !important; /* カード間の隙間 */
		transform: none !important;
		width: 100% !important;
    }


	/* PCのGrid用：各カードのサイズを4等分（隙間を考慮）に固定 */
    .member-swiper .swiper-slide {
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
    }

	/* PCではスライダーの操作パーツを完全に非表示 */
	.swiper-button-prev,
    .swiper-button-next,
    .swiper-pagination {
        display: none !important; 
    }

	.member-card img {
		width: 100%;
		height: auto;
		display: block;
	}

	.hamburger {
		display: none;
	}
	.sp-only { display: none; }


} 

/* ===============================================
MEMBERセクション：PC（2カラム固定）とSP（スライダー）の切り分け
   =============================================== */

/* 1. スマホ専用設定 (640px以下) */
@media screen and (max-width: 640px) {


    /* スライダーを機能させるための横並び設定 */


    /* 矢印をカンプの通りピンクに変更 */
    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 20px !important;
        font-weight: bold;
    }
    .swiper-button-prev,
    .swiper-button-next {
        color: #EE6C61 !important; 
        top: 50% !important;
        transform: translateY(-50%);
    }
    .swiper-pagination-bullet-active {
        background: #EE6C61 !important;
    }
}

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

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

	.inner {
        width: 335px; /* W320より少し大きめにしている */
		margin: 0 auto;
        padding: 0; /* paddingではなくwidthで幅を制御 */
        box-sizing: border-box;
		
    }

	.section-title__ja {
		font-size: 18px !important;
		font-weight: 700 !important;
		margin-top: 5px !important;
		line-height: 1.2 !important;
		color: #2B2B2B !important;
	}

	.section-title__en {
		font-size: 32px !important;
		font-weight: 700 !important;
		color: #F28A7E!important;      
		line-height: 1 !important;
	}

	.section-description {
    font-size: 16px !important;
    line-height: 1.6 !important;
    text-align: left !important;
    margin-bottom: 20px !important;
	}

	.sp-only { display: block; }

/** -----------------------------------------------
	Smartphone :  header
------------------------------------------------**/

	.header {
		/* 追従にする設定 */
		position: fixed;    
        top: 10px;             
        left: 5px;           
        right: 5px; 
		width: auto;          
        margin: 0;       
        
        height: 50px;
        padding: 0 15px;
        background-color: #fff;
        border-radius: 999px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        font-size: 14px;
        color: #2B2B2B;
        z-index: 1000;      /* 他の要素より必ず上にくるように数値を大きく */
		box-sizing: border-box;
    }		

	.header_left {
		padding-left: 15px;
        background-color: transparent;
		border-radius: 0;		
	}

	.header_nav_logo a {
	display: flex;
    flex-direction: column; 
    align-items: flex-start;
    gap: 3px;         
	line-height: 1;
	text-decoration: none;
	}

	.header_nav_logo img {
        width: 90px;           
        height: auto;
    }

	.header-logo-sub {
        font-size: 12px;
        margin: 0;
        color: #2B2B2B;
		line-height: 1;
	}

	.header_right {
        display: flex;
		padding-right: 15px;
		flex-direction: row-reverse;	/*ENTRYボタンとハンバーガーを入れ替える */
        align-items: center;
        gap: 12px;
    }

	/* ハンバーガー入れる */
	.hamburger {
        display: block;
        width: 23px;
        height: 16px;
        background: none;
        border: none;
        position: relative;
        z-index: 2100; 
        cursor: pointer;
		padding: 0
    }
	
	/* 三本線の棒 */
    .hamburger span {
		display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #FFA06E;
        transition: all 0.3s;
    }
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 8px; }
    .hamburger span:nth-child(3) { bottom: 0; }


	
	/* 開く前のメニューを隠す設定 */
    .header_nav_area {
        display: none; 
    }

	/* 2. スマホ時はナビゲーションを隠す */
	.header_nav_area.is-active {
        display: flex; 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 232, 229, 0.95);
		flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2000;
    }

	/* ハンバーガーボタンがバツ印になる*/
    .hamburger.is-active span:nth-child(1) { 
		top: 8px;
		transform: rotate(45deg); 
	}

    .hamburger.is-active span:nth-child(2) {
		opacity: 0; 
	}

    .hamburger.is-active span:nth-child(3) { 
		top: 8px;
		transform: rotate(-45deg); 
	}

	/* メニュー内のリンクを大きく見やすく */
    .header_nav_area ul {
        display: flex;
        flex-direction: column;
        gap: 30px;
        list-style: none;
        padding: 0;
    }

	.header_nav_area ul li a {
        font-size: 20px;
        font-weight: 700;
        color: #2B2B2B;
        text-decoration: none;
    }

	.nav-list__link {
        font-size: 14px; 
    }

	.button-header {
        width: 118px;
        height: 33px;
        background-color: #FFA06E;
        border-radius: 999px; 
        display: flex;
        align-items: center;
        justify-content: center;
		padding: 0;
		font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
		font-size: 16px;
		font-weight: 700;
    }

	.button-header__link {
        font-size: 12px;
        font-weight: 700;
        color: #2B2B2B;
        text-decoration: none;
    }

/** -----------------------------------------------
	SP:  メインビジュアル
------------------------------------------------**/
	/* MVとABOUTにまたがるPAGE：女性画像下の水玉 */
	.page__bg-item--mvabout {
		position: absolute;
        width: 250px;
        top: 270px;
        right: -50px;
		z-index: 1;
    }

	.mv {
		padding-top: 70px; 
        padding-bottom: 0;
		position: relative;
		width: 100%;
		min-height: 0;
		height: auto;
        overflow: hidden;   
	}

	.mv__bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-height: 0;
		z-index: 1; 
		pointer-events: none; 
	}

	/* 手の画像下の水玉 */
	.mv__bg-item--01 {
		position: absolute;
        width: 100px;
		top: auto;
        bottom: 90px;
        left: -10px;
    }

	.mv__bg-item--02 {
		display: block;
		position: absolute;
        width: 100px;
		height: 100px;
        top: 300px;
        right: 20px;
		z-index: 10; 
	}

	.mv__inner {
		/* PC版の790pxを解除して、画面の高さに合わせる */
		height: 100% !important; 
        min-height: 0 !important;
		width: 100%;
        display: flex;
        flex-direction: column; 
        align-items: flex-start;
		padding: 0 20px;
		position: relative;
		z-index: 10;
    }

	.mv__inner--wide {
        width: 100%;
        max-width: none;
        padding: 0;
    }

	.mv__left {
		position: absolute;
		top: 10%;
		left: 0px;
        width: 100%;
        order: 1; /* テキストを上に */
		text-align: left;
		padding: 0 20px;
		z-index: 10;
    }

	.mv__headline {
		position: relative;
		top: 0;
		left: 0px;
        font-size: 26px; 
        line-height: 1.4;
		text-align: left;
		white-space: nowrap;
    }

		/* 手の画像 */
	.mv__subcard {
		position: absolute;
		top: auto;
		bottom: 120px;
        left: -20px; 
        width: 140px; 
        z-index: 10; 
	}	

	.mv__subcard img {
        width: 100%;
        height: auto;
    }

	.mv__right {
        width: 100%;
		position: absolute;
		top: 25%;
		left: 0;
        order: 2; 
        display: block;
		margin-top: 0px;
		min-height: auto;
    }

	.mv__hero {
        width: 300px; 
		margin-left: auto;
		position: relative;
		z-index: 2;
    }

	.mv__hero img {
        width: 100%;
        height: auto;
		max-height: 45vh;
		object-fit: contain;
		display: block;
		opacity: 1;
	}


	/* 追従ボタン（下部固定） */
    .fixed-footer-nav {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        max-width: 335px;
        z-index: 2000;
        display: flex;
		align-items: center;
		gap: 10px;
        justify-content: center;
    }

    .fixed-entry-btn {
		flex: 1;
		font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
        background-color: #FFA06E;
        color: #2B2B2B;
        width: 100%;
        height: 50px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
		font-size: 20px;
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
	/*  トップへ戻るボタン（右側追従） */
    .pagetop {
        position: fixed;
        right: 15px;
        bottom: 85px; /* ENTRYボタンより上に配置 */
        width: 50px;
        height: 50px;
        background-color: #F1DBCC;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        text-decoration: none;
		box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

	.pagetop__arrow {
        display: block;
        width: 10px;
        height: 10px;
        border-top: 2px solid #2B2B2B;
        border-right: 2px solid #2B2B2B;
        transform: translateY(2px) rotate(-45deg);
    }

	.button-border {
		height: 60px;
	}

/** -----------------------------------------------
	SP：ABOUT:
------------------------------------------------**/
	#about {
		padding: 40px 0 0;
		position: relative;
		/* overflow: hidden; */
		width: 100%;
	}

	#about.section.about {
		margin-top: 0 !important; /* PC版のマイナスマージンを強制解除 */
		/* padding-top: 100px !important;  */
		position: relative;
		z-index: auto !important;
	}

	.about__bg-wave-top {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 10 !important;
		pointer-events: none;
	}

	.about__bg-item--01 {
		position: absolute;
		top: -20px;
		left: -10px;
		width: 100px;
		z-index: 11 !important;
	}

	/* important消したら崩れるので注意 */
	#about .inner {
		margin: 0 auto;
		width: 100% !important;
		max-width: 335px !important;
		margin-right: auto !important;
		margin-left: auto !important;
		padding: 0 !important;
	}

	#about .section__heading {
		margin-top: 0;    
		margin-bottom: 30px;
		text-align: left;
		padding-left: 20px;
	}


	#about .section__content {
		display: flex !important;
		flex-direction: column !important; /* 縦並びを強制 */
		align-items: center !important;
		width: 100% !important;
		gap: 0 !important;
	}

	.about__image {
		width: 180px;
		height: 180px;
		overflow: hidden ;
		margin: 0 auto 30px;
		flex-shrink: 0;
	}

	.about__image img {
		width: 100%;
		height: 100%;
		object-fit: cover; /* 画像の比率を保って切り抜き */
		display: block;
	}	

	.about__text {
		width: 100% !important;
		max-width: none !important;
		text-align: left !important;
	}

	.about__catch {
		font-size: 24px !important;
		width: 100% !important;
		font-weight: 700;
		margin-bottom: 20px !important;
		line-height: 1.4 !important;
		display: block !important;
		text-align: center !important;
		}

	.about__catch-accent {
		color: #FFA06E; 
	}

	.section-description {
		width: 100% !important; 
		font-size: 17px !important;
		line-height: 1.8 !important;
		text-align: left !important;
		margin-bottom: 40px !important;
		font-weight: 500;
	}

	#about .button-border {
		display: flex !important;
		width: 100% !important;
		max-width: 300px !important;
		min-width: auto !important;
		align-items: center !important;
		margin: 0 auto 50px !important;
		padding: 0 20px;
		height: 60px !important;
	}

	.slider {
		width: 100%;
		margin-top: 50px;
		overflow: hidden;
	}

	.slider__content {
		display: flex;
		gap: 10px;
	}

	.slider__content img {
		width: 228px; /* スマホで見やすいサイズ */
		height: auto;
		flex-shrink: 0;
	}

/** -----------------------------------------------
	SP：NEWS
------------------------------------------------**/

	#news {
		padding-top: 70px;
	}
	.news_about__bg-item--01 {
		position: absolute;
		top: 60px;
		left: -10px;
		width: 120px;
		z-index: 1;
		display: block;
	}

	.section__heading {
		position: relative;
		z-index: 2;
	}
	.top-news__list {
		display: flex;
		flex-direction: column;
		padding: 0;
		margin: 0;
		list-style: none;
		border-top: none;
	}

	.top-news__item {
    border-bottom: 1px solid #2B2B2B; 
    padding: 0;
	}

	.top-news__item:first-child {
    border-top: 1px solid #2B2B2B;
	}
	
	.top-news__link {
		display: block;
		height: auto;
		min-height: 0;
		width: 100%;
		padding: 24px 0;
		text-decoration: none;
		flex-direction: column;
		align-items: flex-start;
		max-width: none;
		margin: 0;
		gap: 8px;
		
	}

	.top-news__date {
		display: block;
		font-size: 14px;
		color: #2B2B2B;
		font-weight: 700;
		line-height: 1;
		margin-bottom: 8px;
	}

	.top-news__title {
		display: block;
		width: 100%;
		text-align: left;
		font-size: 14px;
		color: #2B2B2B;
		line-height: 1.5;
		font-weight: 700;
		padding: 0;	
	}

/** -----------------------------------------------
	SP:BUSINESS
------------------------------------------------**/
	#business {
		padding: 60px 0 100px;
		position: relative;
		overflow: hidden;
		background-color: #FFF7F6; 
	}

	#business .section__bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 0;
	}

	.business__bg-item--01 {
		width: 138px;
		height: auto;
		top: 10px;
		right: -10px;
	}
	.business__bg-item--02 {
		width: 100px;
		height: auto;
		bottom: 20px;
		right: -10px;
	}

	#business .business__bg-wave-bottom {
    display: block;
    position: absolute;
    width: 100%;   
    height: auto;  
    max-width: none;
    object-fit: cover;
    bottom: 0; 
    left: 0;
    z-index: 0;
    pointer-events: none;
	}

	#business .inner {
		width: 100% !important;
		max-width: 335px !important;
		margin: 0 auto !important;
		padding: 0 !important;
	}

	#business .section-title__ja {
		font-size: 18px !important;
		font-weight: 700 !important;
		margin-top: 5px !important;
	}

	#business .section-description {
		text-align: left !important;
		margin-bottom: 40px !important;
		font-size: 16px !important;
		line-height: 1.6 !important;
		width: 100% !important;
	}

	#business .card-wrap.is-3col {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 30px !important; 
		width: 100% !important;
	}

	#business .card-text {
		padding: 0;
	}

	.card-title {
		font-size: 20px !important;
		color: #F28A7E !important; /* カンプのオレンジ/ピンク */
		margin-bottom: 15px !important;
		font-weight: 700;
	}

	#business .card-excerpt {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.7;
		padding: 0 15px;
		text-align: left;
	}

	.card-item {
		width: 320px !important;
		background: #F28A7E; 
		border-radius: 0 !important; /* 必要に応じて調整 */
		padding: 30px 0 30px !important;
		text-align: center;
		box-sizing: border-box !important;
	}

	.card-img {
		width: 277px !important;
		height: 229px !important;
		margin: 0 auto 20px !important;
		border-radius: 50% !important;
		overflow: hidden !important;
		display: block;
	}

	.card-img img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}

	#business .button {
		position: relative !important;
		z-index: 10 !important; 
		margin-top: 50px !important;
	}


/** -----------------------------------------------
	SP:WORK_STYLE
------------------------------------------------**/
	#work_style {
		background-color: #FFE8E5 !important;
		padding: 80px 0 80px !important;
		position: relative;
		overflow: hidden;
	}

	#work_style .inner {
		width: 100% !important;
		max-width: 335px !important;
		margin: 0 auto !important;
	}

	#work_style .section-description {
		font-size: 16px !important;
		line-height: 1.5 !important;
		text-align: left !important;
		margin-bottom: 40px !important;
	}

	#work_style .card-wrap.is-3col {
		display: flex !important;
		flex-direction: column !important;
		gap: 50px !important; /* カード間の余白を広めに */
		width: 100% !important;
		}

	#work_style .card-item {
		width: 100% !important;
		background: transparent !important; /* 背景を透明（または白）に */
		padding: 0 !important;
		text-align: center !important;
	}

	#work_style .card-img {
		width: 282px !important; 
		height: 272px !important;
		border-radius: 50% !important;
		margin: 0 auto 20px !important;
		overflow: hidden !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	#work_style .card-img img {
		width: 100% !important;
		height: auto !important;
		border-radius: 0;
		object-fit: contain !important;
	}

	#work_style .card-title {
		font-size: 20px !important;
		color: #F28A7E !important; 
		margin-bottom: 15px !important;
		font-weight: 700 !important;
	}

	#work_style .card-excerpt {
		font-size: 16px !important;
		font-weight: 500 !important;
		line-height: 1.5 !important;
		text-align: left;
		width: 100%;
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}

	#work_style .button {
    margin-top: 50px !important;
	}	

/** -----------------------------------------------
	SP:MEMBER
------------------------------------------------**/

	#member {
		position: relative;
		padding-bottom: 80px;
		z-index: 8;
	}

	#member .member__bg-item--01 {
		width: 150px; 
		height: auto;
		top: -50px;
		left: -20px;
	}

	#member .section-description {
		margin-bottom: 0;
	}

	.member-slider-container {
		position: relative;
		padding: 20px auto 20px;
		margin: 20px auto 20px;
		max-width: 90%; 
	}

	/* SPのMEMBERスライダー用： */
	.member-swiper .swiper-wrapper {
        display: flex; 
        flex-direction: row;
	}

    .member-swiper .swiper-slide {
        width: 100%; 
        flex-shrink: 0;
    }

	/* 矢印の位置調整など */
	.swiper-button-prev,
    .swiper-button-next {
        color: #F28A7E; 
        z-index: 10;           
    }

	#member .button {
		position: relative;
		z-index: 16;
	}

	/** -----------------------------------------------
	SP:RECRUIT
------------------------------------------------**/

	#recruit{
		position: relative;
		padding-top: 50px;    
		padding-bottom: 40px; 
		overflow: visible; 
		z-index: 5;   
	}

	.recruit__bg-item-right {
		position: absolute;
		top: -130px;  
		right: 0;
		width: 100px; 
		height: auto ;
		z-index: 20;
	}

	.recruit__bg-item-bottom {
		position: absolute;
		bottom: -100px;
		left: 0;
		width: 130px; 
		height: auto;
		z-index: 20;
	}

	.recruit__bg-wave-top,
	.recruit__bg-wave-bottom {
		width: 100% !important;
		height: auto !important;
	}

	.recruit__bg-wave-top {
		position: absolute;
		z-index: 1;
	}

	#recruit .inner {
		position: relative;
        top: 0 !important; /* PC版の突き上げをリセット */
        margin-bottom: 0;
		z-index: 10;
    }
	
    #recruit .card-item {
		display: flex;
        flex-direction: column; 
		overflow: hidden;
		background-color: #FFF;
		padding: 0 !important; 
        margin: 0 auto 30px !important;
		border-radius: 20px !important;  /* important残す */
    }

    #recruit .card-img {
		width: 100% !important;
        height: 210px!important;
        margin: 0;
        padding: 0;
        flex: none;
		border-radius: 20px 20px 0 0 !important;	/* important残す */
    }

    #recruit .card-img img {
        width: 100%;
        height: auto;         
        border-radius: 0 !important; 
		object-fit: cover;
		display: block;
    }

    #recruit .card-text {
        padding: 24px 20px;        
		display: block;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		text-align: left;
    }

    #recruit .card-text .card-title {
		color: #F28A7E !important; 
        font-size: 22px !important;
		font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
		font-weight: 700;
        margin-bottom: 12px !important;
		margin-left: 0;
		margin-right: auto;
        padding-left: 0 !important;
		text-align: left;
		width: 100%;
		display: block;
    }

    #recruit .card-text .card-excerpt {
        font-size: 16px !important;       
        margin: 0 0 15px 0 !important;
		line-height: 1.6 !important;
		margin: 0 0 15px 0 !important;
		font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "游ゴシック", sans-serif;
		font-weight: 500;
		text-align: left;
		width: 100%;
		max-width: none;
		display: block;
		padding: 0 !important;
    }

	#recruit .more {
        margin: 0 !important;
        text-align: center !important;
        width: 100% !important;
		position: relative;
		z-index: 3;
		
    }


	#recruit .card-text .link {
        display: inline-block !important;
		font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "游ゴシック", "YuGothic", sans-serif !important;
        font-weight: 700 !important;
        color: #2B2B2B !important;
        text-decoration: underline !important;
        text-underline-offset: 4px;
    }

	/** -----------------------------------------------
	SP:FLOW
------------------------------------------------**/
	#flow {
	position: relative;
    padding-top: 60px !important; 
    padding-bottom: 60px !important;
	z-index: 0;
	}

	#flow .container {
		display: flex !important;
		flex-direction: column !important; 
		align-items: center;
		gap: 20px !important; 
		width: 100% !important;
		max-width: 335px !important;
		margin: 40px auto 0;
		padding: 0 !important;
	}

	#flow .flow-item {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important; 
		gap: 10px;
		justify-content: space-between !important;
		width: 100% !important;
	}

	#flow .flow-img {
		width: 133px !important; 
		height: 133px !important;
		flex-shrink: 0;
	}

	#flow .flow-img img {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain;
		border-radius: 40px !important; 
	}

	#flow .flow-text {
		width: 100%;
		margin: 0 !important;
		font-size: 18px !important;
		font-weight: 700;
		color: #2B2B2B;
        line-height: 1.4 !important;
		text-align: center !important; 
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
	}

	/* PC版の矢印（::after）を完全に消去 */
	#flow .flow-item .flow-img::after,
	#flow .flow-item::after {
		display: none !important;
		content: none !important;
	}

	/* 1番目・3番目のテキスト（右側にある時）：左揃え */
    #flow .flow-item:nth-child(odd) {
		align-self: flex-start !important; /* 左側に配置 */
        width: 133px !important;
    }

	/* 2番目・4番目のテキスト（左側にある時）：右揃え（または左揃え） */
    #flow .flow-item:nth-child(even) {
        align-self: flex-end !important; /* 右側に配置 */
		width: 133px !important;
    }

		/** -----------------------------------------------
	SP:CTA
------------------------------------------------**/
	#cta {
		padding: 60px 0 0 0 !important; 
		background-color: #FFE8E5;
		width: 100% !important;
	}

	.cta-window {
		/* width: calc(100% - 30px) !important; */
		max-width: none !important;
		height: 380px !important;
		margin: 0 auto;
		/* きれいな半円 */
		border-radius: 50% 50% 0 0 / 40% 40% 0 0 !important;
		position: relative;
		overflow: hidden; /* 中の画像をアーチ型に切り抜く */
	}

	.cta-bg-img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
	}

	.cta-copy {
    top: 60px !important;
    gap: 12px !important;
	}

	.cta-copy__line {
		padding: 10px 15px !important;
		white-space: nowrap;
	}

	.cta-copy__line.copy_01 {
		font-size: 20px !important;
	}

	.cta-copy__line.copy_02 {
		font-size: 20px !important;
	}

	.button-cta {
		top: auto !important;
		bottom: 50px !important; /* 下からの位置で固定すると安定する */
	}

	.button-cta__link {
		width: 240px !important;
		height: 60px !important;
		font-size: 20px !important;
	}


		/** -----------------------------------------------
	SP:FOOTER
------------------------------------------------**/

	.footer {
        background-color: #FFE8E5;
        padding: 60px 20px; 
    }

	.footer .inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		grid-template-areas: none;
		grid-template-columns: 1fr;
	}

	.footer-top-left {
		margin-bottom: 30px;
	}

    .footer_nav_logo {
        margin-bottom: 0;
    }

	.footer_nav_logo a {
        display: flex;
        flex-direction: column; 
        align-items: center;
        text-decoration: none;
		gap: 10px;
    }

    .footer_nav_logo img {
        width: 200px;
        height: auto;
    }

	/* 採用サイトの文字 */
    .footer-logo-sub {
		display: block;
        font-size: 18px;
		font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "游ゴシック", "YuGothic", sans-serif;
        font-weight: 700;
        color: #2B2B2B;
        margin: 0;
    }

	.footer-top-right {
		margin-bottom: 20px;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.button-footer {
		width: 170px;
		height: 50px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.button-footer__link {
        width: 100%;
        height: 100%;
		line-height: 1;
        font-size: 18px;
        background-color: #FFA06E;
        border-radius: 999px;
        display: flex;
        align-items: center;
		justify-content: center;
        text-decoration: none;
        color: #2B2B2B;
        font-weight: 700;
    }

	.footer_nav-area {
        width: 100%;
        max-width: 335px; 
		margin-top: 20px;
        margin-bottom: 0;
		gap: 30px;
		display: flex;
        flex-direction: column; 
		align-items: center;
    }

	/* メインメニュー：4つと3つの2カラム横並び */
    .footer-nav-area__main {
        display: flex;
        justify-content: space-between;
		align-items: flex-start;
        width: 100%;
		max-width: 280px;
        margin: 0 auto;
		font-weight: 700;
    }

	.footer-nav-area__main_01, 
    .footer-nav-area__main_02 {
		text-align: left;
        list-style: none;
		font-weight: 700;
    }

    .footer-nav-area__main li {
        margin-bottom: 5px;
    }

    .footer-nav-area__main a {
		font-family: Zen Maru Gothic;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
        color: #2B2B2B;
		text-decoration: none;
        white-space: nowrap; /* 勝手に改行させないやつ */
    }

	/* 会社概要などのサブメニュー：縦並び */
    .footer-nav-area__sub {
        display: flex;
        flex-direction: column;
        align-items: center;
		justify-content: center;
        gap: 5px;
        padding: 0;
        list-style: none;
        margin: 0 0 20px 0;
		font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "游ゴシック", "YuGothic", sans-serif;
        font-weight: 700;
		font-size: 16px;
		width: 100%;
		text-align: center;
    }

    .footer-nav-area__sub a {
		display: block;
		width: 100%;
        font-size: 14px;
        font-weight: 700;
        color: #2B2B2B;
		text-align: center;
        text-decoration: none;
    }

	.footer-nav-area__sub li {
        width: 100%;
    }

    /* コピーライト */
    .copyright {
        font-size: 12px;
		margin-top: 30px;
        color: #2B2B2B;
		font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "游ゴシック", "YuGothic", sans-serif;
        font-weight: 500;
		text-align: center;
    }

	/* 検証ツールでスライドできないのを解決 */
	/* スライダーエリアでの「縦」の動きをブラウザに開放する */
	.member-swiper {
    touch-action: pan-y;
	}

	/* ページ全体でマウスドラッグによるスクロールを邪魔させない */
	html, body {
    overflow-y: auto;
    touch-action: manipulation;
	}

}

/** -----------------------------------------------
フェードインアニメーション : Java Script
------------------------------------------------**/
/* アニメーションさせたい要素に共通のクラスをつける(HTML) */
.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 1.0s ease, transform 1.0s ease;
}

/* 画面内に入ったとき */
.reveal.is-active {
	opacity: 1;
	transform: translateY(0);
}


/** -----------------------------------------------
PC : 
------------------------------------------------**/
#header {
	background-color: #FFFFFF;
	padding: 30px 40px;
	margin:30px 20px 0;
	width: calc(100% - 40px);
	border-radius: 100px;
}