@charset "UTF-8";
/* index.css */

/* ----- header --------- */
/* ※ トップページのヘッダー切替は下部「トップページのヘッダー切替」を参照 */


/* ----- top_common ----- */
h2.ff_din {
	font-size: 50px;
	font-size: min(3.901vw,50px);
	line-height: 1;
	letter-spacing: .05em;
	margin-bottom: 1.5em;
}
h2.h2_jp {
	font-size: clamp(18px,1.875vw,36px);
}
h2.h2_jp.wrap {
		max-width: 1620px;
}

.news_flex .card {
	width: calc(100%/3 - 40px/2);
	width: calc(100%/3 - calc(min(2.5vw,40px)/1.5));
}
/* 更新形コンテンツのカラム数が少ないとき、左寄せにする */
.news_flex:after {
	content: "";
	width: calc(100%/3 - 40px/2);
	width: calc(100%/3 - calc(min(2.5vw,40px)/1.5));
	height: 0;
	display: block;
}


/* ============================================================
   MV（メインビジュアル）
   デザインデータ 1920 x 800 の実測値を % 化して絶対配置。
   PC（769px〜）  : 幅に対して全要素が等比スケール
   SP（〜768px）  : 縦積みのフロー配置に切替（下部メディアクエリ）
   ※ 吹き出しの文字だけは縮小率を緩やかにして
     狭いPC幅（1024px〜769px = 12px〜10.3px）でも可読性を保つ
============================================================ */
#mv_wrap {
	/* ---- 吹き出し ---- */
	--mv-bubble-bg:       #f4f5f5;
	--mv-bubble-bg-hover: #fcf8e8;
	--mv-bubble-text:     #3c3c3c;
	/* 吹き出しの基準文字サイズ
	   デザイン実測 20.75px @1920（= 1.0807vw）／ 12px を下回らない */
	--mv-bubble-fz: max(12px, 1.0807vw);

	/* ---- キャッチコピー ---- */
	/* デザイン実測 41.58px @1920（= 2.1656vw） */
	--mv-copy-fz: 2.1656vw;

	/* ---- 背景スライドショー（4枚 / 1枚あたり3秒 = 全12秒） ---- */
	--mv-bg-duration: 12s;
	--mv-bg-slot:   calc(var(--mv-bg-duration) / 4);
	--mv-bg-offset: -0.6s;

	position: relative;
	width: 100%;
	padding-top: 0;             /* common.css の 140px（固定ヘッダー分）を打ち消す */
	background-color: #fff;
	overflow: hidden;
}

/* ---- デザイン 1920 x 800 に相当する内側エリア ----
   ここを基準に全要素を % で絶対配置するため、
   ウィンドウ幅が変わっても構図が崩れません */
.mv_flex {
	position: relative;
	z-index: 3;
	width: 100%;
	aspect-ratio: 1920 / 800;
	display: block;
	padding: 0;
	/* 透明レイヤーがヘッダーやスライドのクリックを奪わないように */
	pointer-events: none;
}


/* ----- 背景：季節のイラスト（春→夏→秋→冬） -----
   bg_*.png は 1920x380（下辺揃え）
   ※JSなし・CSSアニメーションのみでフェード自動切替
     直前のスライドの「上に」次のスライドがフェードインするため
     切替中に背景が白く抜けません */
.mv_bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.mv_bg_slide {
	position: absolute;
	inset: 0;
	background-image: var(--mv-bg-img);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
	opacity: 0;
	animation: mv-bg-fade var(--mv-bg-duration) linear infinite;
}
/* PC用画像（1920x380 横長）／SP用画像（1125x1125 正方形）／地面色をセットで保持
   ※SPは専用画像を使い、画像より下は --mv-bg-ground で塗りつぶして地面を延長します
   負のdelayで再生位置を前倒しし、春→夏→秋→冬の順に表示させる */
.mv_bg_slide-01 {
	--mv-bg-img:    url(../../img/index/mv/bg_spring.png);
	--mv-bg-img-sp: url(../../img/index/mv/bg_spring_sp.jpg);
	--mv-bg-ground: #F6CECE;
	animation-delay: var(--mv-bg-offset);
}
.mv_bg_slide-02 {
	--mv-bg-img:    url(../../img/index/mv/bg_summer.png);
	--mv-bg-img-sp: url(../../img/index/mv/bg_summer_sp.jpg);
	--mv-bg-ground: #BDD678;
	animation-delay: calc(var(--mv-bg-offset) - var(--mv-bg-slot) * 3);
}
.mv_bg_slide-03 {
	--mv-bg-img:    url(../../img/index/mv/bg_autumn.png);
	--mv-bg-img-sp: url(../../img/index/mv/bg_autumn_sp.jpg);
	--mv-bg-ground: #F3E18D;
	animation-delay: calc(var(--mv-bg-offset) - var(--mv-bg-slot) * 2);
}
.mv_bg_slide-04 {
	--mv-bg-img:    url(../../img/index/mv/bg_winter.png);
	--mv-bg-img-sp: url(../../img/index/mv/bg_winter_sp.jpg);
	--mv-bg-ground: #C3D9E7;
	animation-delay: calc(var(--mv-bg-offset) - var(--mv-bg-slot));
}

/* 1枚あたり3秒（全12秒の25%）
   [1] 次の1枚が 1.0秒かけて上に ease-in-out でフェードイン
   [2] 完全に覆われた後、下になった1枚が 0.6秒かけてフェードアウト */
@keyframes mv-bg-fade {
	0%, 24.99%  { opacity: 1; z-index: 2; }
	25%         { opacity: 1; z-index: 1; animation-timing-function: ease-in-out; }
	30%, 91.65% { opacity: 0; z-index: 1; }
	91.66%      { opacity: 0; z-index: 3; animation-timing-function: ease-in-out; }
	100%        { opacity: 1; z-index: 3; }
}
/* OS側で「視差効果を減らす」設定の場合は自動切替を停止（1枚目を固定表示） */
@media (prefers-reduced-motion: reduce) {
	.mv_bg_slide    { animation: none; }
	.mv_bg_slide-01 { opacity: 1; }
}


/* ----- 左：ロゴ＋キャッチコピー ----- */
/* 実測: left 140.5px / ロゴ上端 92.7px / ブロック幅 560px */
.mv_lead {
	position: absolute;
	left: 7.3177%;
	top:  11.5875%;
	width: 29.1667%;
	z-index: 3;
	padding: 0;
	pointer-events: none;
}
/* ロゴ 実測 515 x 100.6px */
.mv_lead_logo {
	width: 91.96%;
	margin-bottom: 0;
}
.mv_lead_logo img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}
/* キャッチコピー 実測 41.58px / 行送り 66px / ロゴ下端から 48.2px */
.mv_lead_copy {
	margin-top: 8.607%;
	line-height: 1.587 !important;
}
.mv_lead_copy span {
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", heisei-kaku-gothic-std, sans-serif;
	font-size: var(--mv-copy-fz);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.587;
	color: #1e1e1e;
	display: inline;
	background-color: transparent;
	padding: 0;
}


/* ----- 右：ハッシュタグ吹き出しnav ----- */
/* 実測: 1行目の上端 y=145px / 5つの吹き出しの中心 x=1320px（= 68.75%）
   幅は em 指定。吹き出し・余白・カラムギャップもすべて em なので
   --mv-bubble-fz が何pxになっても「3個 + 2個」の折り返しは崩れません */
.first_bnr_flex {
	position: absolute;
	top:  19.2053%;
	left: 68.75%;
	transform: translateX(-50%);
	width: 54em;
	z-index: 4;
	font-size: var(--mv-bubble-fz);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	column-gap: 1.2em;              /* 実測 25px */
	row-gap: 2.17em;                /* 実測 45px */
	gap: 2.17em 1.2em;
	margin: 0;
	pointer-events: none;
}
/* 吹き出し本体（実測 高さ68px） */
.first_bnr_flex a {
	position: relative;
	width: auto;
	display: inline-block;
	margin: 0;
	padding: 1.14em 1.32em;
	font-size: 1em;
	line-height: 1;
	text-align: center;
	color: var(--mv-bubble-text);
	background-color: var(--mv-bubble-bg);
	border: none;
	border-radius: 999px;
	white-space: nowrap;
	pointer-events: auto;
	transition: background-color .3s, color .3s;
	/* 吹き出しのシャドウ（ぼかしなし）
	   ※しっぽを含めた輪郭に沿わせるため box-shadow ではなく drop-shadow を使用
	     デザイン実測: X 6px / Y 6px / ぼかし 0 / 黒 12% @1920 */
	filter: drop-shadow(0.29em 0.29em 0 rgba(0, 0, 0, .12));
}
/* 吹き出しのしっぽ 実測: 幅20px / 高さ23px */
.first_bnr_flex a:after {
	content: "";
	position: absolute;
	bottom: -1em;
	left: 50%;
	transform: none;
	width: 0;
	height: 0;
	margin-left: -0.48em;
	border-style: solid;
	border-width: 1.1em 0.48em 0 0.48em;
	border-color: var(--mv-bubble-bg) transparent transparent transparent;
	transition: border-top-color .3s;
}
.first_bnr_flex a span {
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", heisei-kaku-gothic-std, sans-serif;
	font-size: 1em;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	text-align: left;
	display: inline;
	white-space: nowrap;
}
.first_bnr_flex a span:before {
	content: "#";
	font-size: 1em;
	display: inline-block;
	margin-right: .28em;   /* letter-spacing .05em と合わせてデザイン実測の 0.33em */
}
/* hover（ふわっと弾む） */
.first_bnr_flex a:hover {
	background-color: var(--mv-bubble-bg-hover);
	animation: mv-tag-bounce .6s ease both;
}
.first_bnr_flex a:hover:after {
	border-top-color: var(--mv-bubble-bg-hover);
}
@keyframes mv-tag-bounce {
	0%   { transform: translateY(0); }
	30%  { transform: translateY(-10px) scale(1.03); }
	50%  { transform: translateY(0) scale(1); }
	70%  { transform: translateY(-4px); }
	100% { transform: translateY(0); }
}


/* ----- 右：イラスト ----- */
/* 実測: left 906.5px / top 388.3px / width 803px */
#mv {
	position: static;
	width: auto;
}
/* 背景・イラスト・バナーの入れ物。
   PCでは中身がすべて .mv_flex 基準の絶対配置なので、この要素自体は高さを持ちません。
   SPでのみ position:relative にして「キャンパス背景の範囲」として機能させます */
.mv_scene {
	position: static;
}
.mv_img {
	position: absolute;
	left: 47.2135%;
	top:  48.5364%;
	width: 41.8229%;
	height: auto;
	z-index: 2;
	margin: 0;
	padding: 0;
	display: block;
	pointer-events: none;
}


/* ----- 右下：バナースライドショー（LILAS等） ----- */
/* 実測: 幅444px / 右50px / 下37px、背面は白80%の半透明パネル */
.mv_slide {
	position: absolute;
	z-index: 5;
	width:  23.125%;
	right:  2.6042%;
	bottom: 4.6358%;
	padding: 0.8333vw 2.2656vw 0.9115vw;
	background-color: rgba(255,255,255,.8);
	/* 親（.mv_flex）の pointer-events:none を打ち消す */
	pointer-events: auto;
}
.mv_slide ul {
	aspect-ratio: auto !important;
}
.uk-slideshow-items > * {
	position: static;
}
.uk-slideshow-items {
	min-height: inherit !important;
	display: grid;
	grid-template-rows:    1fr;
	grid-template-columns: 1fr;
}
.uk-slideshow-items li {
	grid-row: 1/2;
	grid-column: 1/2;
}
/* 前後の矢印（実測 15 x 30px / パネル左右端から 22.75px） */
.uk-position-center-left  { left:  -1.0807vw; left:  -1.7vw; }
.uk-position-center-right { right: -1.0807vw; right: -1.7vw; }

.uk-slidenav {
	padding: 0.26vw 0.26vw;
	color: #666 !important;
	margin-left:  0 !important;
	margin-right: 0 !important;
}
.uk-slidenav svg {
	width:  0.781vw;
	height: 1.5625vw;
}
/* ドットナビ（実測 直径9.5px / 中心間隔30px / 画像下端から12.5px） */
.uk-slideshow-nav {
	margin-top: 0.651vw;
}
.uk-dotnav > * {
	padding-left: .5vw;
}
.uk-dotnav > * > * {
	width:  .65vw;
	height: .65vw;
	border: 1px solid #666;
}
.uk-dotnav > .uk-active > * {
	border-color: transparent;
	background-color: #666;
}


/* ============================================================
   トップページのヘッダー切替（PCのみ / 〜768px のSPは対象外）
   ・MV表示時（ページ最上部）: ヘッダーは透明・ロゴ非表示
     → ロゴは MV 内（.mv_lead_logo）の位置に表示される
   ・スクロール後（#header.header_scroll）: 通常の白ヘッダー＋ロゴ表示
   ※ .header_scroll の付与は js/header.js（scrollTop > 80）
   ※ .header_front の付与は header.php（is_front_page 時のみ）
============================================================ */
.header_wrap {
	background-color: rgba(255,255,255,.95);
}

@media screen and (min-width:769px) {
	/* MV表示時：透明ヘッダー＋ロゴ非表示 */
	#header.header_front .header_wrap {
		background-color: transparent;
		/* 透明な帯がMV上のリンク（吹き出し等）を覆わないように */
		pointer-events: none;
	}
	#header.header_front .header_logo,
	#header.header_front .openbtn1,
	#header.header_front nav {
		pointer-events: auto;
	}
	#header.header_front .header_logo {
		opacity: 0;
		visibility: hidden;
		transition: opacity .4s, visibility .4s;
	}
	/* スクロール後：通常ヘッダーに戻す（ロゴはヘッダー側へ） */
	#header.header_front.header_scroll .header_wrap {
		background-color: rgba(255,255,255,.95);
		pointer-events: auto;
	}
	#header.header_front.header_scroll .header_logo,
	#header.header_front .header_logo.active {   /* ハンバーガー展開中は表示 */
		opacity: 1;
		visibility: visible;
	}
}

@media screen and (min-width:1024px) {
	/* MV表示時はヘッダー高さもMVと等比に縮め、
	   狭いPC幅でグローバルナビが吹き出しに近づきすぎないようにする */
	#header.header_front .header_wrap {
		height: clamp(88px, 7.2917vw, 140px);
	}
	#header.header_front.header_scroll .header_wrap {
		height: 100px;
	}
}

/* ----- pick up ----- */
#sec_pick {
	background-color: #FBF8F1;
}
/* デザイン実測（1920px時）の左右余白
   ピックアップ列: 左115px / 右95px、ニュース列: 左104px / 右142px
   （旧: 共通の .bg_wrap で一律60px。2カラム間の間隔もデザインより狭かった） */
#sec_pick .bg_wrap {
	padding-left:  min(6vw,115px);
	padding-right: min(4.95vw,95px);
}
#sec_news .bg_wrap {
	padding-left:  min(5.42vw,104px);
	padding-right: min(7.4vw,142px);
}
#sec_pick .card {
	background-color: #fff;
}
#sec_pick .card_info,
#sec_pick .card_cont {
	padding-left:  20px;
	padding-left:  clamp(15px,1.333vw,20px);
	padding-right: 20px;
	padding-right: clamp(15px,1.333vw,20px);
}
/* 余白 */
#sec_pick .card_info {
	padding-top: 20px;
	padding-top: clamp(15px,1.333vw,20px);
	padding-bottom: 10px;
	padding-bottom: clamp(5px,1vw,10px);
}
#sec_pick .card_cont {
	padding-bottom: 20px;
	padding-bottom: clamp(15px,1.333vw,20px);
}
/* 項目 */
#sec_pick .card_info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
#sec_pick .card_date {
	font-size: 16px;
	font-size: clamp(10px,1.2vw,16px);
	font-family: 'Noto Sans JP', sans-serif;
	margin-bottom: 0;
}
#sec_pick .card_date a {
	font-size: 1em;
}
#sec_pick .card_date,
#sec_pick .card_date a {
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1;
	letter-spacing: .05em;
}
#sec_pick .card_tag {
	line-height: 1;
}
.card_tag {
	background-color: #d24d84;
}
#sec_pick .card_tag a {
	font-size: 18px;
	font-size: min(1.6vw,16px);
	font-size: clamp(10px,1.2vw,16px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .05em;
	display: block;
	color: #fff;
	padding: .35em.5em;
}
/* card文章 */
#sec_pick .card_cont {
	font-size: 16px;
	font-size: clamp(10px,1.2vw,16px);
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt";
	letter-spacing: .1em;
	line-height: 1.5;
	text-align: justify;
	color: #808080;
}


/* ----- news ----- */
#sec_news .tab_panel_container {
	width: 100%;
	margin-left:  auto;
	margin-right: auto;
	padding: clamp(24px,2.4vw,34px);
	background-color: #fff;
}












/* ----- Support & Program ----- */
#sec_main-act .card {
	width: calc(100%/3);
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	flex-direction: column;
}
#sec_main-act .card .img_wrap {
	position: relative;
	flex: 1;
}
#sec_main-act .card .img_wrap:before {
	content: "";
	width:  92%;
	height: 88%;
	display:  block;
	position: absolute;
	top:  6%;
	left: 4%;
	border: 2px solid #fff;
}

#sec_main-act .card .cont_wrap {
	position: relative;
	padding: 30px 40px 0;
	padding-top:   min(2vw,30px);
	padding-left:  min(1.5vw,30px);
	padding-right: min(1.5vw,30px);
	margin-left: -1px;
	flex: 1;
}
#sec_main-act .card .cont_wrap:before,
#sec_main-act .card .cont_wrap:after  {
	content: "";
	position: absolute;
	width: 1px;
	height: calc(100% - 10px);
	top: 10px;
	background-color: #000;
}
#sec_main-act .card .cont_wrap:before {
	left: 0;
}
#sec_main-act .card .cont_wrap:after  {
	right: 0;
}
#sec_main-act .card h4 {
	font-size: max(12px,1.042vw) !important;
	line-height: 1em;
	position: absolute;
	left:   4%;
	bottom: 6%;
	background-color: #fff;
	padding: .25em .5em;
}
#sec_main-act .card p  {
	font-size: 16px; /* to 12 */
	font-size: min(1.56vw,16px);
	color: #808080;
}

/* ----- message（DEI推進本部について） ----- */
#sec_message h2 {
	margin-bottom: 0;
}
#sec_message h3 {
	font-size: 28px;
	font-size: min(2.081vw,28px);
	font-weight: bold;
	letter-spacing: 0;
}
#sec_message .flex_box {
	flex-wrap: nowrap;
	margin-left: auto;
	margin-right: 0;
}
#sec_message .left_cont {
	width: 45%;
	max-width: 600px;
	align-self: center;
	margin-right: 30px;
}
#sec_message .left_cont p {
	font-size: min(1.6vw,24px);
}
#sec_message .right_cont {
	width: 55%;
	background-image: url(../../img/index/message_bg.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
#sec_message .right_cont img {
	height: 100%;
	vertical-align:  bottom;
	object-position: center;
	object-fit: contain;
}
#sec_message .ichi_btn {
	text-align: left;
	margin-bottom: min(6.502vw,80px);
}
/* 各ページへのボタンを追加 */
.ul_message-link li {
	width: 100%;
}
.ul_message-link li:not(:first-of-type):before {
	content: "";
	width:  100%;
	height: 1px;
	display: block;
	background-color: #000;
}
.ul_message-link li a {
	width: 100%;
	display: flex;
	padding-top:    1.5em;
	padding-bottom: 1.5em;
}
.ul_message-link img  {
	width: 3em;
	margin-right: .5em;
}
.ul_message-link span {
	font-size: min(1.5vw,24px);
	align-self: center;
}
/* ボタンに矢印を追加 */
.ul_message-link li span {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
}
.ul_message-link li span:after {
	content: "";
	width: 28px;
	height: 6px;
	border-right:  1px solid #000;
	border-bottom: 1px solid #000;
	transform: skew(45deg);
	margin-right: 30px;
}
/* お写真削除に関連してレイアウトを変更 ---------- */
.ul_message-link {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-start;
}
.ul_message-link li {
	width: calc(100%/3 - min(4vw,40px)/1.5);
	margin-right: min(4vw,40px);
	border-bottom: 1px solid #000;
}
.ul_message-link li:nth-of-type(3n) {
	margin-right: 0;
}
.ul_message-link li a {
	padding-top:    1.5em;
	padding-bottom: 1em;
}
.ul_message-link img  {
	width: 2.5em;
}
.ul_message-link span {
	font-size: clamp(12px,1.2vw,18px);
	line-height: 1.5;
}
.ul_message-link li:before,
.ul_message-link li:after,
.ul_message-link li span:after   {
	content: none !important;
}
/* 背景画像 */
.bg_message_text {
	width: 40%;
	display: block;
	margin: 3% 0 0 auto;
}

/* ----- Staff (Interview) & Column ----- */
.staff-column_wrap .card {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	background-color: #fff;
}
#sec_pick .card img,
.staff-column_wrap img {
	max-height: 300px;
	max-height: min(18vw,300px);
	object-fit: cover;
	object-position: center;
	display: inline-block;
	flex: 1;
}
.staff-column_wrap .card_cont {
	padding: 20px;
	padding: min(2vw,20px);
}
.staff-column_wrap .card_cont dt,
.staff-column_wrap .card_cont dd {
	font-size: 16px;
	font-size: min(1.6vw,16px);
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.7;
}
.staff-column_wrap .card_cont dt {
	font-weight: bold;
	padding-bottom: 10px;
	padding-bottom: min(1vw,10px);
}
.staff-column_wrap .card_cont dd {
	color: #808080;
}

/* Interview(20231020 add) */
#sec_staff .card {
	width: calc(100%/4 - 15px);
	padding: 1%
}
#sec_staff .card .img_wrap {
	width: 100%;
	display: inline-block;
	flex: 1;
	margin-bottom: auto;
}
#sec_staff .card .int_text {
	width: 100%;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	padding-top: 1em;
	padding-bottom: .5em;
	flex: 2;
}
#sec_staff h2.h2_jp {
	margin-bottom: min(3.6vw,36px);
}

/* ----- PickUp & News を横並びに ----- */
.archive_pc_flex {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
}
.archive_pc_flex #sec_pick {
	width: 35%;
}
.archive_pc_flex #sec_news {
	width: 65%;
}
#sec_pick .card img {
	height:     150px;	
	min-height: 150px;
}



/* --- pickup --- */
.news_flex .card {
	width: 100%;
}
.news_flex .card + .card {
	margin-top: 30px;
}
/* --- news --- */
#sec_news .bg_wrap {
	height: 100%;
}

@media screen and (max-width:1199px) {
	/* PICK UP */
	#sec_pick .card img {
		height:     min(15vw,150px);
		min-height: min(15vw,150px);
	}
	/* NEWS */
	#sec_news .tab_panel_container {
		height: 50vw;
		max-height: 650px;
		min-height: 450px;
		overflow-y: scroll;
	}
}




/* ----- LILAS & fika リンク用コンテンツ ----- */
/* 修正後デザイン：横長バナー／上部に見出し＋イラスト、下に本文を中央配置 */
/* デザインではこのセクションとサポート・プログラムの余白が白。
   指定がないと body の #f8f8f8 が透けてわずかにグレーになるため明示する */
#sec_fika_lilas,
#sec_main-act {
	background-color: #fff;
}
#sec_fika_lilas .bg_wrap {
	padding-bottom: 0 !important;
}
#sec_fika_lilas .flex_box {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	gap: clamp(24px,3vw,50px);
}
#sec_fika_lilas .cont_wrap {
	width: calc(50% - clamp(12px,1.5vw,25px));
	position: relative;
	/* 1920pxで40px（2.0833vw） */
	padding: clamp(15px,2.0833vw,40px);
	background-color: #eff2f6;
	border: 1.5px solid #2e2d83;
	box-shadow: 6px 6px 0px 0px #2e2d82;
	overflow: hidden;
	z-index: 0;
}

/* 見出し列：内容幅で中央寄せ（行は左揃えの塊） */
#sec_fika_lilas .cont_inner {
	width: fit-content;
	max-width: 100%;
	margin-left:  auto;
	margin-right: auto;
}
#sec_fika_lilas .cont_text {
	width: 100%;
}
/* イラスト（既存背景画像／テキストと重ねず絶対配置） */
#sec_fika_lilas .cont_illust {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 1;
}
#sec_fika_lilas .illust_lilas {
	/* 1920pxで 92×110px */
	width:  clamp(38px, 4.7917vw, 92px);
    height: clamp(40px, 5.7292vw, 110px);
    right:  clamp(10px, 1.5vw, 40px);
    top: 25%;
	transform: translateY(-50%);
	background-image: url(../../img/index/illust_lilas.png);
}
#sec_fika_lilas .illust_fika {
	/* 1920pxで 130×86px */
    width:  clamp(61px, 6.7708vw, 130px);
    height: clamp(44px, 4.4792vw, 86px);
    right:  clamp(15px, 1.5vw, 86px);
    top: 35%;
	transform: translateY(-50%);
	background-image: url(../../img/index/illust_fika.png);
}

/* --- Lilas --- */
.lilas_head_wrap {
	text-align: left;
}
.lilas_head {
	font-size: 70px;
	/* 1920pxで68px（3.5417vw） */
	font-size: clamp(40px,3.5417vw,68px);
	line-height: 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	margin-bottom: clamp(10px,1.2vw,16px);
	color: #2e2d83;
}
.lilas_head strong {
	font-size: 1em;
	font-weight: 700;
	font-family: "linotype-didot", serif !important;
	line-height: 1;
	letter-spacing: .05em;
	margin-right: 30px;
	margin-right: clamp(14px,1.8vw,30px);
	background: transparent;
}
.lilas_head small {
	font-size: .42em;
}
.lilas_head svg {
	min-width: 50px;
	width: clamp(54px,5.5vw,96px);
	height: 1.1em;
}
.lilas_head svg .st0 {
	fill: #2e2d83;
}
.lilas_caption {
	width: 100%;
	font-size: 22px;
	/* 1920pxで15px（0.7812vw） */
	font-size: clamp(10px,1.2vw,15px);
	font-family: "linotype-didot", serif !important;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .01em;
	text-align: center;
	color: #2e2d83;
	margin-left:  auto;
	margin-right: auto;
	margin-bottom: 0;
}
/* 本文（カード幅で中央寄せ・見出しの下） */
#sec_fika_lilas .cont {
	width: 100%;
	/* 1920pxで16px（0.8333vw） */
	font-size: clamp(9px,0.8333vw,16px);
	line-height: 1.9;
	letter-spacing: .04em;
	text-align: center;
	margin-top: clamp(10px,1.5vw,34px);
	color: #4d4d4d;
}
/* --- fika --- */
#sec_fika_lilas .cont_fika {
	background-color: #fbf8f1;
	border-color: #c85a5b;
	box-shadow: 6px 6px 0px 0px #c75a5b;
}
.fika_head {
	line-height: 0;
	text-align: left;
}
.fika_head img {
	/* 1920pxで253px（13.1771vw） */
	width: clamp(100px,13.1771vw,253px);
	height: auto;
	display: inline-block;
}


/* ---- 狭めのPC幅（〜1023px）のMV調整 ----
   ・ヘッダーがハンバーガー（実高60〜80px）になるため、MV本体を帯のぶん下げる
   ・吹き出しの文字は 1023px:12px → 769px:10.3px へなだらかに縮小し、
     相対的に大きくなるぶん内側の余白／ギャップ／字間を詰める
   ・吹き出しの中心を少し左へ寄せて右端がはみ出さないようにする
   ※ キャッチコピー・イラスト・バナーはデザイン比率のまま */
@media screen and (max-width:1023px) {
	#mv_wrap {
		padding-top: 10px;
		/* calc(0.6667vw + 5.17px) … 1024pxで12px、769pxで10.3px の直線補間
		   1.34vw … 769px未満は等比縮小（769pxで両者が一致） */
		--mv-bubble-fz: min(1.34vw, calc(0.6667vw + 5.17px));
	}
	/* 吹き出しの中心 = キャッチコピー右端(36.5%)とMV右端(97.4%)の中間 = 66.86% */
	.first_bnr_flex {
		left: 66.86%;
		width: 50em;
		column-gap: .85em;
		row-gap: 1.4em;
		gap: 1.4em .85em;
	}
	.first_bnr_flex a {
		padding: 1em;
		letter-spacing: .02em;
	}
	.first_bnr_flex a:after {
		bottom: -0.9em;
		margin-left: -0.45em;
		border-width: 1em 0.45em 0 0.45em;
	}
}









@media screen and (max-width:1000px) {
	/* ----- message ----- */
	#sec_message .flex_box {
		flex-wrap: wrap;
	}
	#sec_message .left_cont,
	#sec_message .right_cont {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
	}
	/* 左 */
	#sec_message h2,
	#sec_message h3 {
		text-align: center;
	}
	#sec_message .left_cont p {
		font-size: 16px;
		font-size: min(4.2vw,20px);
		display: flex;
		justify-content: center;
	}
	/* 右 */
	#sec_message .right_cont {
		background-position: top center;
	}
	#sec_message .right_cont img {
		height: auto;
	}
	#sec_message .ichi_btn.sp_blk {
		margin-top: ;
		text-align: center;
	}
	#sec_message .right_cont img.marL_B-SP {
		margin-bottom: 40px !important;
	}
	/* ボタン */
	#sec_message .ichi_btn.pc_blk {
		display: none !important;
	}
	#sec_message .ichi_btn.sp_blk {
		display: block !important;
	}

	/* お写真削除に関連してレイアウトを変更 ---------- */
	.ul_message-link li span br {
		display: none !important;
	}

}

@media screen and (max-width:768px) {
	/* ----- common ----- */
	h2.ff_din {
		font-size: 32px;
		text-align: center;
		margin-bottom: 1em;
	}
	h2.h2_jp {
		font-size: 24px;
	}

	.news_flex .card {
		width: 100%;
	}
	.news_flex .card:not(:first-of-type) {
		margin-top: 30px;
	}

	/* ============================================================
	   MV（SPデザイン / 〜768px）
	   PCの絶対配置レイアウトを解除し、
	   キャッチコピー → 吹き出しnav → イラスト → バナー の縦積みにする。
	   キャンパスの背景は .mv_scene（イラスト＋バナー）の範囲に敷き、
	   画像下部の地面色をバナーの下まで延長する。
	============================================================ */
	#mv_wrap {
		/* 吹き出し：2つ並びが1行に収まるサイズ */
		--mv-bubble-fz: clamp(12px, 2.2vw, 14px);
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
	}

	/* 内側エリア：アスペクト比固定をやめて中身なりの高さに */
	.mv_flex {
		position: relative;
		aspect-ratio: auto;
		height: auto;
		display: block;
		/* 上は固定ヘッダー（実高60〜80px）ぶんを確保 */
		padding: clamp(78px, 16vw + 18px, 98px) clamp(15px,4vw,50px) 0;
		pointer-events: auto;
	}

	/* ----- キャッチコピー ----- */
	/* ロゴはヘッダー側に常時表示されるため、SPでは重複を避けて非表示
	   （表示したい場合は下記 display:none を外してください） */
	.mv_lead {
		position: static;
		width: 100%;
		max-width: 100%;
		padding: 0;
		text-align: center;
	}
	.mv_lead_logo {
		display: none;
	}
	.mv_lead_copy {
		margin-top: 0;
		text-align: center;
		line-height: 1.35 !important;
	}
	.mv_lead_copy span {
		font-size: clamp(18px, 5.95vw, 26px);
		line-height: 1.35;
	}

	/* ----- 吹き出しnav ----- */
	#mv {
		position: static;
		width: 100%;
	}
	.first_bnr_flex {
		/* しっぽ（a:after）が .mv_scene の背景に隠れないよう重ね順を確保 */
		position: relative;
		z-index: 4;
		left: auto;
		top:  auto;
		transform: none;
		width: 100%;
		max-width: 560px;
		margin: clamp(20px,6.4vw,34px) auto 0;
		font-size: var(--mv-bubble-fz);
		justify-content: center;
		column-gap: .6em;
		row-gap: 1.6em;
		gap: 1.6em .6em;
	}
	.first_bnr_flex a {
		width: auto;
		padding: .95em .95em;
		border-radius: 999px;
		filter: drop-shadow(0.25em 0.25em 0 rgba(0, 0, 0, .12));
	}
	.first_bnr_flex a:after {
		bottom: -0.9em;
		margin-left: -0.45em;
		border-width: 1em 0.45em 0 0.45em;
	}
	/* SPはhoverの弾みを無効化（タップ時にチラつくため） */
	.first_bnr_flex a:hover {
		animation: none;
	}

	/* ----- キャンパス背景＋イラスト＋バナー ----- */
	/* .mv_flex の左右パディングを打ち消して背景を全幅に */
	.mv_scene {
		position: relative;
		/* 最下段の吹き出しのしっぽと風景の間を少し詰める（パディングは変更しない） */
		margin-top: calc(-1 * clamp(6px,2.13vw,16px));
		margin-left:  calc(-1 * clamp(20px,5.333vw,50px));
		margin-right: calc(-1 * clamp(20px,5.333vw,50px));
		/* 上パディング＝キャンパスの空〜街並みを人物の上に見せる余白 */
		padding: clamp(60px,21vw,130px) clamp(20px,5.333vw,50px) clamp(20px,7vw,36px);
	}

	/* 背景：SP専用画像（1125x1125）をこのブロックの上端に合わせて配置。
	   画像は空が白・下部が地面の単色なので、画像より下は
	   同色の background-color で継ぎ目なく地面を延長できる
	   （バナーが縦に長い等でブロックが画像より高くなった場合の保険にもなる） */
	.mv_bg_slide {
		background-image: var(--mv-bg-img-sp);
		background-color: var(--mv-bg-ground);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 100% auto;
	}

	/* ----- イラスト ----- */
	/* .mv_bg（position:absolute）より前面に出すため relative を維持 */
	.mv_img {
		position: relative;
		z-index: 2;
		left: auto;
		top:  auto;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		display: block;
	}

	/* ----- バナースライドショー ----- */
	/* SPは背景の地面の上に直接置く（白パネルなし） */
	.mv_slide {
		position: relative;
		z-index: 5;
		width: 100%;
		max-width: 420px;
		right:  auto;
		bottom: auto;
		margin: clamp(12px,4.5vw,24px) auto 0;
		padding: 0 clamp(26px,8vw,38px);
		background-color: transparent;
	}
	.uk-position-center-left  {
		margin: 15px;
		left: calc(-1 * clamp(20px,6.2vw,30px));
	}
	.uk-position-center-right {
		margin: 15px;
		right:calc(-1 * clamp(20px,6.2vw,30px));
	}
	.uk-slidenav {
		padding: 5px 2px;
	}
	.uk-slidenav svg {
		width:  14px;
		height: 24px;
	}
	.uk-slideshow-nav {
		margin-top: 10px;
	}
	.uk-dotnav > * {
		padding-left: 12px;
	}
	.uk-dotnav > * > * {
		width:  9px;
		height: 9px;
	}

	/* ----- pick up ----- */
	/* SPは他セクションと同じ左右余白に戻す */
	#sec_pick .bg_wrap,
	#sec_news .bg_wrap {
		padding-left:  clamp(20px,5.333vw,50px);
		padding-right: clamp(20px,5.333vw,50px);
	}
	#sec_pick .card_info,
	#sec_pick .card_cont {
		padding-left:  20px;
		padding-left:  min(4vw,20px);
		padding-right: 20px;
		padding-right: min(4vw,20px);
	}
	/* 余白 */
	#sec_pick .card_info {
		padding-top: 20px;
		padding-top: min(4vw,20px);
		padding-bottom: 10px;
		padding-bottom: min(2.667vw,10px);
	}
	#sec_pick .card_cont {
		padding-bottom: 20px;
		padding-bottom: min(4vw,20px);
	}
	/* 項目 */
	#sec_pick .card_date {
		font-size: 12px;
		font-size: min(3.2vw,16px);
	}
	#sec_pick .card_tag a {
		font-size: 14px;
		font-size: min(3.733vw,18px);
		padding: 5px 30px;
		padding-top:    min(1.333vw,5px);
		padding-bottom: min(1.333vw,5px);
		padding-left:  min(4vw,20px);
		padding-right: min(4vw,20px);
	}
	/* card文章 */
	#sec_pick .card_cont {
		font-size: 14px;
		font-size: min(3.733vw,18px);
		letter-spacing: 0;
		line-height: 1.5;
		color: #808080;
	}

	/* ----- news ----- */
	#sec_news .tab_panel_container {
		max-width: 600px;
		height: auto;
		max-height: inherit;
		min-height: inherit;
		overflow-y: visible;
		padding: 30px 20px;
		padding: clamp(30px,8vw,40px) clamp(20px,5.333vw,40px);
	}

	/* ----- Support&Program ----- */
	#sec_main-act .bg_wrap-PadNone {
		max-width: 600px;
		margin-left:  auto;
		margin-right: auto;
	}
	#sec_main-act .card {
		width: 100%;
	}
	#sec_main-act .card .cont_wrap {
		padding-top:   15px;
		padding-left:  20px;
		padding-right: 20px;
	}
	#sec_main-act .card .cont_wrap:before,
	#sec_main-act .card .cont_wrap:after {
		content: none;
	}
	#sec_main-act .card h4 {
		font-size: min(5vw,30px) !important;
	}
	#sec_main-act .card p {
		font-size: 14px;
		line-height: 1.5;
		text-align: justify;
		letter-spacing: .05em;
	}


	/* ----- message ----- */
	#sec_message .flex_box {
		flex-wrap: wrap;
	}
	#sec_message .left_cont,
	#sec_message .right_cont {
		width: 100%;
		margin-right: 0;
	}
	/* 左 */
	#sec_message h3 {
		font-size: 20px;
		text-align: center;
		letter-spacing: .1em;
		line-height: 1.5em;
	}
	#sec_message .left_cont p {
		font-size: 16px;
	}
	/* 右 */
	#sec_message .right_cont {
		background-position: top center;
	}
	#sec_message .right_cont img {
		height: auto;
	}
	#sec_message .ichi_btn.sp_blk {
		text-align: center;
		margin-bottom: 0;
	}
	/* 各ページへのボタンを追加 */
	.ul_message-link span {
		font-size: min(3.2vw,18px);
		align-self: center;
	}
	/* ボタンに矢印を追加 */
	.ul_message-link li span:after {
		width: 5.867vw;
		max-width: 30px;
		height: 6px;
		margin-right: min(5.333vw,30px);
	}

	/* お写真削除に関連してレイアウトを変更 ---------- */
	.ul_message-link li {
		width: 100%;
		margin-right: 0 !important;
	}
	.ul_message-link li span br {
		display: block !important;
	}
	.ul_message-link li span:after {
		content: "" !important;
	}
	.ul_message-link img {
		width: 3em;
	}
	.bg_message_text {
		width: 75%;
		margin-top: 10%;
	}


	/* ----- Staff (Interview) & Column ----- */
	.staff-column_wrap .card {
		display: inline-block;
	}
	#sec_pick .card img,
	.staff-column_wrap img {
		height: 150px;
		max-height: inherit;
		min-height: inherit;
	}
	.staff-column_wrap .card_cont {
		padding: min(4vw,20px);
	}
	.staff-column_wrap .card_cont dt {
		font-size: 16px;
		font-size: min(3.733vw,18px);
		padding-bottom: 10px;
		padding-bottom: min(2.667vw,10px);
	}
	.staff-column_wrap .card_cont dd {
		font-size: 14px;
		font-size: min(3.2vw,16px);
	}
	/* Interview(20231020 add) */
	#sec_staff .card {
		width: 100%;
		padding: 2%;
	}
	#sec_staff .card .int_text {
		font-size: min(3.733vw,20px);
		display: inline-block;
		padding-top: .75em;
		padding-bottom: 0;
	}
	/* 20240327 add */
	#sec_staff h2.h2_jp {
		margin-bottom: min(6vw,30px) !important;
	}

	/* ----- PickUp & News を横並びに ----- */
	.archive_pc_flex {
		flex-direction: column;
	}
	.archive_pc_flex #sec_pick,
	.archive_pc_flex #sec_news {
		width: 100%;
	}


	/* ----- LILAS & fika リンク用コンテンツ ----- */
	#sec_fika_lilas .flex_box {
		flex-direction: column;
		gap: 0;
	}
	#sec_fika_lilas .cont_wrap {
		width:   100%;
		padding: 30px;
	}
	#sec_fika_lilas .cont_wrap + .cont_wrap {
		margin-top: 30px;
	}
	#sec_fika_lilas .illust_lilas {
        width:  50px;
        height: 70px;
        top:   inherit;
        right:  14px;
		bottom: 5%;
        transform: translateY(0%);
	}
	#sec_fika_lilas .illust_fika {
		width:  84px;
		height: 56px;
		top:   27px;
		right:  2px;
		transform: translateY(0);
		background-image: url(../../img/index/illust_fika_sp.png);
	}

	/* LILAS */
	#sec_fika_lilas .lilas_head_wrap {
		margin-bottom: 0;
	}
	.lilas_head {
		font-size: 40px;
	}
	.lilas_head strong {
		margin-right: 12px;
	}
	.lilas_head svg {
		width: 56px;
		min-width: 56px;
	}
	.lilas_caption {
		font-size: 14px;
		white-space: normal;
	}
	#sec_fika_lilas .cont {
		font-size: 12px;
		font-size: clamp(10px,3.2vw,12px);
		margin-top: 18px;
	}
	/* fika */
	.fika_head img {
		width: 130px;
	}
}

/* ========================================================== */
/* ===== news改修（flex版・修正後デザイン）ここから ===== */
/* ※ 見出し・タブ・一覧ボタンを同一親(.news_head_flex)直下でflex */
/* ※ パネルは .news_head_flex の下に全幅で配置 */
/* ========================================================== */

/* 背景：オレンジ→ピンク */
#sec_news .bg_orange {
	background-color: #FDEFED !important;
}

#sec_news .bg_wrap {
	height: 100%;
}

/* 見出し・タブ・一覧ボタンを1行に並べるflexヘッダー */
#sec_news .news_head_flex {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	margin-bottom: clamp(20px,2.5vw,30px);
}
/* 見出し */
#sec_news .news_head_flex .h2_jp {
	flex: 0 0 auto;
	margin: 0;
}
/* タブ：見出しの右。中間幅では縮小を許容 */
#sec_news .news_head_flex .tabsel_wrap {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: min(2.2vw,40px);
}
#sec_news .news_head_flex .tab_menu {
	margin-bottom: 0;
	flex-wrap: wrap;
}
/* 一覧ボタン：行の右端へ */
#sec_news .news_head_flex .news-ichi {
	width: fit-content;
	flex: 0 0 auto;
	margin-left: min(2.2vw,40px);
	text-align: right;
}

/* パネル：全幅 */
#sec_news .tab_panel_container {
	width: 100%;
}

/* 一覧ボタン：白い角丸ピル型（修正後デザイン） */
/* デザイン実測（1920px時）：230 x 59px / 文字17px / 文字色ほぼ黒 */
#sec_news .news-ichi a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	font-size: clamp(11px,1.15vw,17px);
	font-weight: bold;
	line-height: 1;
	padding: 0.99em 3.05em;
	color: #111;
	background-color: #fff;
	border-radius: 60px;
	transition: color .3s, background-color .3s;
	border: none !important;
}
#sec_news .news-ichi a .arrow {
	border-color: #111;
}

@media screen and (max-width:768px) {
	/* SP：見出し→タブ→パネル→一覧ボタンの縦積み */
	#sec_news .news_head_flex {
		flex-wrap: wrap;
		flex-direction: column;
		align-items: stretch;
		margin-bottom: clamp(20px,5vw,30px);
	}
	#sec_news .news_head_flex .h2_jp {
		width: 100%;
		margin-bottom: clamp(20px,5vw,30px);
	}
	#sec_news .news_head_flex .tabsel_wrap {
		width: 100%;
		margin-left: 0;
	}
	/* SPでは一覧ボタンをヘッダー内では隠し、パネル下に出すならJS/別途対応 */
	#sec_news .news_head_flex .news-ichi {
		width: 100%;
		margin-left: 0;
		margin-top: clamp(20px,5vw,30px);
		text-align: center;
	}
	#sec_news .news-ichi a {
		width: 100%;
		font-size: 14px;
	}
}

/* ========================================================== */
/* ===== news改修（flex版・修正後デザイン）ここまで ===== */
/* ========================================================== */