@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}



/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 14px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/

body {
	font-family: "M PLUS 1", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-weight: 300;
	font-optical-sizing: auto;
	letter-spacing: 0.1rem;
	text-indent: 0.1rem;
	-webkit-text-size-adjust: none;
	margin: 0;padding: 0;
	line-height: 2.5;		/*行間*/
	background: #fff;		/*背景色*/
	color: #104;			/*文字色*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li {margin: 0;padding: 0;}
nav ul {list-style: none;}
h1,h2,h3,h4 {font-weight: 400;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
strong {font-weight: 500;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #fff;	/*文字色*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	text-decoration: none;
}


/*header（ロゴとメニューが入ったブロック）
---------------------------------------------------------------------------*/
header {
	width: 250px;		/*幅*/
	padding: 0 2vw;		/*ヘッダー内の余白。上下、左右への順番。*/
	margin-top: 1vw;	/*ヘッダーの上に空けるスペース*/
	text-align: center;	/*テキストをセンタリング*/
}

/*ロゴ*/
header #logo img {
	display: block;
	padding:17px 0 11px 0;
	max-width: 160px;  /* 適宜調整 */
	height: auto;
	margin: 0 auto;
}
header #logo {
	padding: 0;
	margin: 0;
}

/*ロゴ下の小文字*/
header #logo span {
	display: block;
	font-size: 9px;	/*文字サイズを70%に*/
	letter-spacing: 4px;
	    color: #bad;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	header {
		position: fixed;	/*スクロールしても動かないようにする設定*/
		left: 0px;
		top: 0px;
	}
	header #logo img {
    	max-width: 120px; /* スマホで大きすぎるのを防ぐ */
 	}

	}/*追加指定ここまで*/

	/*画面の高さが500px以下の追加指定*/
	@media screen and (max-height:500px) {

	header {
		position: absolute;	/*メニューが切れて見えなくならないように、fixedを中止する*/
	}
	}/*追加指定ここまで*/

/*画面幅500px以下の指定*/
@media screen and (max-width: 500px) {
	header {
		display: flex;
		justify-content: space-between; /* ロゴ左・メニュー右 */
		align-items: center;
		width: 100%;
		padding: 0px 20px 5px;
		text-align: left;
	}

	#logo {
		display: flex;
		flex-direction: column;
		align-items: flex-start; /* ロゴとspanを左揃え */
	}

	#logo span {
		font-size: 10px;
		color: #bad;
		letter-spacing: 2px;
		margin-top: -5px;
	}

	#menubar_hdr {
		position: static; /* ← スマホ上でロゴと並ぶように */
		margin-left: auto;
	}
  	header #logo img {
    	max-width: 100px; /* スマホで大きすぎるのを防ぐ */
	}
}
/*mainブロック（右側のsectionを囲むブロック）
---------------------------------------------------------------------------*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	main {
		margin-left: 250px;	/*headerのwidthに合わせる*/
	}

	}/*追加指定ここまで*/


/*main内のh2*/
main h2 {
    font-size: 2.5rem;
    line-height: 140%;
    padding: 5px 0;
    margin: 0 0 -8px;
	letter-spacing:3px;
}

/*main内のh3*/
main h3 {
    font-size: 1.5rem;
    line-height: 100%;
    padding: 0;
    margin: 25px 0 5px 0;
}
.h3-disc {
    font-size: 14px;
}

.h2sub{
	font-size:15px;
    padding: 0;
    margin: 0px;
	letter-spacing:8px;
}






/*-- 公式LINE --*/
.officialline-top img{
	height:auto;
	width:100%;

}
.Apply-btn-top{
	display:inline-block;
	background:#3c6;
	border:0px;
	border-radius:17px;
	width:300px;
	padding:17px 40px;
	margin:0 0 35px 0;
	font-size:0;
	box-shadow: 4px 4px 1px rgba(255, 255, 255, 0.4);
	transition: 0.5s;
}
.officialline img{
	height:auto;
	width:100%;

}
.line-btn{
	display:inline-block;
	background:#558fd5;
	border:0px;
	border-radius:17px;
	width:300px;
	padding:23px 32px;
	margin:35px 0 10px 0;
	font-size:0;
	box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.1);
	transition: 0.5s;
}
.line-btn:hover{
	background:#4477dd;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
}






/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}


/*メニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#menubar ul {
	margin: 3rem 0;	/*メニューブロックの外側に空けるスペース*/
}

/*メニュー一個あたり*/
#menubar nav a {
    text-decoration: none;
    display: block;
    background: rgba(255, 255, 255, 0.6);
    border: 1px dotted #65b;
    color: #65b;
    font-weight: 400;
    padding: 0.5rem;
    margin: 0.5rem 0;
    border-radius: 5px;
    letter-spacing: 3px;
}

/*マウスオン次*/
#menubar nav a:hover {
    background: rgba(245, 240, 255, 1);
    border: 1px solid #65b;
    letter-spacing: 5px;
}

/*900px以下画面でのメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 80px;
	background: rgba(0,0,0,0.8);		/*背景色*/
	animation: animation1 0.2s both;	/*animation1を実行する。0.2sは0.2秒の事。*/
}
.small-screen #menubar ul {
	margin: 3rem;	/*メニューブロックの外側に空けるスペース*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 30px;			/*右からの配置場所指定*/
	top: 30px;				/*上からの配置場所指定*/
	padding: 16px 14px;		/*上下、左右への余白*/
	width: 46px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）部分。flexはデフォルトで横並びになるので、それを縦並びに変更。*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	background: #112255;	/*背景色*/
	border-radius:8px;
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*メニュー内にあるソーシャルメディアのアイコン
---------------------------------------------------------------------------*/
ul.icons {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	justify-content: center;
}
ul.icons li {
	margin-right: 10px;	/*アイコン同士の余白*/
}
ul.icons i {
	font-size: 20px;	/*Font Awesomeのアイコンサイズ*/
}


/*section
---------------------------------------------------------------------------*/
/*フェード設定*/
.section::before {
	opacity: 0; /* 初期状態では非表示 */
	transition: opacity 1s; /* 1秒かけてフェードイン/フェードアウト */
}
.section.active::before {
	opacity: 1; /* フェードイン状態 */
}
.section.inactive::before {
	opacity: 0; /* フェードアウト状態 */
}

/*section要素*/
section {
	padding: 2vw 5vw;	/*ボックス内の余白。上下、左右への順番。*/
}

/*★中央配置*/
.section {
  display: flex;
  justify-content: center;
}

.section-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
/*★ここまで*/

/*４つのsectionブロックの共通設定*/
#section2,#section3,#section4,#section5, #section6, #section7,#section8 {
	/*min-height: calc(100dvh - 50px);*/
	padding: 5vw;			/*ボックス内の余白*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	#section1,#section2,#section3,#section4,#section5, #section6, #section7,#section8 {
		border-radius: 3vw 0 0 3vw;	/*角丸の指定。左上、右上、右下、左下への順番。*/
	}

	}/*追加指定ここまで*/


/*------------------------------------セクション1---------------------------------------*/
#section1::before,#section2::before,#section3::before,#section4::before,#section5::before, #section6::before, #section7::before,#section8::before {
	content: '';
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*section1の設定*/
#section1 {
	color: #555;	/*文字色*/
	min-height: calc(100dvh - 50px);
	margin-bottom: 50px;
	padding:0;
}
#section1-subttl{
	display:inline-block;
	position:absolute;
	right:25px;
	bottom:15px;
	font-size:18px;
	text-align:right;
	color:#65d;
	letter-spacing:6px;
}
#section1-subttl p{
	line-height:100%;
	padding:0 0 30px 0;
	margin:0;
}
#top-video{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -2;
}
/*
#top-video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .5;
}
*/
#top-video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -3;
  opacity: .3;
}

#top-video-back{
  width: 100%;
  height: 100vh;
	background-image:url(../images/pic_back01.png);
	background-attachment:fixed;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
  opacity: .3;
}

/*見出し*/
.hero-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  z-index: 2; /* 背景より手前に */
  text-align: center;
}

/*★ mission設定*/
.mission {
  text-align: center;
  z-index: 2;
  color: #333;
  font-size: 1.6rem;
  font-weight: 500;
  max-width: 100%;
}

/* デフォルト（スマホを非表示、PCを表示） */
.mission-pc {
  display: block;
}
.mission-sp {
  display: none;
}

/*★下から上にゆったりフェード*/
.fade-text {
	font-size: 2rem;
	font-weight: 800;
	font-style: italic;
	margin: 15px 0;
	background: linear-gradient(90deg,
	#a0c4ff,
	#bdb2ff,
	#ffc6ff,
	#ffd6a5,
	#a0c4ff
	);
	background-size: 300% 100%;
	background-position: 0% 50%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 1px 1px 2px rgba(255, 160, 200, 0.2);
	opacity: 0;
	transform: translateY(40px) rotate(4deg) scale(0.95);
	animation:
	floatUp 1s ease-out forwards,
	moveGradient 12s ease-in-out infinite alternate;
}

.fade-text:nth-child(2) {
	animation-delay: 0.4s, 0s;
	transform: translateY(40px) rotate(-4deg) scale(0.95);
}

.fade-text:nth-child(3) {
	animation-delay: 0.8s, 0s;
	transform: translateY(40px) rotate(2deg) scale(0.95);
}

@keyframes floatUp {
	to {
		transform: translateY(0) rotate(0deg) scale(1);
		opacity: 1;
	}
}

@keyframes moveGradient {
	0%   { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}


/*★応募フォーム*/
.apply-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: center;
}

.apply-buttons .btn {
  font-weight: bold;
  font-size: 1.4rem;
  padding: 20px 100px;
  border-radius: 9999px;
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/*.apply-buttons .btn.experience {
  background: linear-gradient(135deg, #9db8e0, #a0f1cb); /* パステルグリーン 
}*/

.apply-buttons .btn.entry {
  background: linear-gradient(135deg, #a0c4ff, #cdb4db); /* パステルブルー〜パープル */
}

.apply-buttons .btn:hover {
  transform: scale(1.06);
  filter: brightness(1.1);
}

/* 画面幅900px以下で切り替える */
@media (max-width: 900px) {
  .mission-pc {
    display: none;
  }

  .mission-sp {
    display: block;
  }

  /* スマホ用のテキスト調整 */
  .fade-text.long {
    font-size: 1.3rem;
    line-height: 1.8;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    text-align: center;
  }

  .hero-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 1rem;
    text-align: center;
    z-index: 2;
  }

  .mission {
    font-size: 1.2rem;
    margin-top: 0;
  }

  .fade-text {
    transform: none !important; /* アニメ前のズレを消す */
    opacity: 1;
    animation: none;
  }
  
  .apply-buttons {
	transform: none;
  }
}

@media (max-width: 900px) {
  .apply-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
}


/*★ 各項目をフェードイン表示*/
.fade-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.visible {
  opacity: 1;
  transform: translateY(0);
}
/*★ここまで*/

/*section2の設定*/
#section2 {
	background-color: rgba(20,120,180,0.7);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #333;	/*文字色*/
	text-align: center;
}
#section2::before {
    background-image:
        url("../images/background-pattern-for-pc.png"),
        linear-gradient(
            to top,
            rgba(232, 216, 246, 0.9),
            rgba(203, 239, 245, 0.9),
            rgba(243, 248, 252, 0.9)
        );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    content: '';
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*★ ファンシーフレーム*/
.fancy-frame {
  max-width: 700px;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid transparent;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 1;
  background-clip: padding-box;
  border-image: linear-gradient(135deg, #8be, #f9c) 1;

  margin: 0 auto;         /* 中央寄せ */
  position: relative;
  left: -8.5%;              /* 少し左に */
}

    
.fancy-frame::before {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	border: 2px dashed rgba(136, 136, 255, 0.4);
	border-radius: 24px;
	z-index: -1;
	transform: rotate(-1deg);
}

    
.fancy-frame h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	text-align: center;
	letter-spacing: 0.1em;

    font-weight: bold;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #e78fd3, #8364d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fancy-frame p {
	font-size: 1rem;
	line-height: 1.8;
	color: #333;
	margin-bottom: 1rem;
	text-align: center;
}

.fancy-frame p:last-child {
	margin-bottom: 0;
}

.requirement {
	padding: 10%;
}

@media (max-width: 900px) {
	.fancy-frame {
		left: 0; 
	}
}

/*★サービス*/
.service-title {
	font-size: 2.8rem;
	margin-bottom: 0.3rem;
	letter-spacing: 0.15em;
	font-weight: bold;
	font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #e78fd3, #8364d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 幅に合わせて2列に調整 */
  gap: 20px;
  width: 100%;
  max-width: 800px; 
  margin: 0 auto;   /* 中央寄せ */
}

.service-card {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}


/* アイコンをできるだけ大きく表示して余白を減らす */
.service-icon {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-align: center;
  color: #e91e63;
}

.service-card p {
  font-size: 0.95rem;
  color: #333;
  text-align: center;
}

.service-area {
	position: relative;
    left: -5%;         /* ← 中央から少し左に移動 */
    margin: 0 auto;    /* 中央寄せベース */
	left: -10%;              /* 少し左に */
}

/* スマホ画面の場合、縦一列にする */
@media (max-width: 900px) {
  .service-area {
	position: static;
    left: auto;
    margin: 0 auto;
  }
  .service-grid {
	grid-template-columns: 1fr;
    gap: 15px;
  }
}
/*★ここまで*/

/*section3の設定*/
#section3 {
	background-color: rgba(21,106,77,0.7);	/*背景色。３つ目までの数字はrgbでの色指定。最後の小数点は透明度。*/
	color: #333;	/*文字色*/
	text-align: center;
}
#section3::before {
    background-image:
        url("../images/background-pattern-for-pc.png"),
        linear-gradient(
            to top,
            rgba(232, 216, 246, 0.9),
            rgba(203, 239, 245, 0.9),
            rgba(243, 248, 252, 0.9)
        );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    content: '';
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}





/*section4の設定*/
#section4 {
	color: #555;	/*文字色*/
}
#section4::before {
    background-image:
        url("../images/background-pattern-for-pc.png"),
        linear-gradient(
            to top,
            rgba(232, 216, 246, 0.9),
            rgba(203, 239, 245, 0.9),
            rgba(243, 248, 252, 0.9)
        );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    content: '';
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*★section5の設定*/
#section5::before {
    background-image:
        url("../images/background-pattern-for-pc.png"),
        linear-gradient(
            to top,
            rgba(232, 216, 246, 0.9),
            rgba(203, 239, 245, 0.9),
            rgba(243, 248, 252, 0.9)
        );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    content: '';
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*★section6の設定*/
#section6::before {
    background-image:
        url("../images/background-pattern-for-pc.png"),
        linear-gradient(
            to top,
            rgba(232, 216, 246, 0.9),
            rgba(203, 239, 245, 0.9),
            rgba(243, 248, 252, 0.9)
        );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    content: '';
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*★section7の設定*/
#section7 {
	color: #555;	/*文字色*/
	text-align: center;
}
#section7::before {
    background-image:
        url("../images/background-pattern-for-pc.png"),
        linear-gradient(
            to top,
            rgba(232, 216, 246, 0.9),
            rgba(203, 239, 245, 0.9),
            rgba(243, 248, 252, 0.9)
        );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    content: '';
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*★section8の設定*/
#section8 {
	color: #555;	/*文字色*/
	text-align: center;
	min-height: 60vh;
}

#section8::before {
    background-image:
        url("../images/background-pattern-for-pc.png"),
        linear-gradient(
            to top,
            rgba(232, 216, 246, 0.9),
            rgba(203, 239, 245, 0.9),
            rgba(243, 248, 252, 0.9)
        );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center, center;
    content: '';
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*★エントリー*/
.entry-area{
	position: relative;
    left: -5%;         /* ← 中央から少し左に移動 */
    margin: 0 auto;    /* 中央寄せベース */
	left: -11%;              /* 少し左に */
}

.entry-title {
	font-size: 2.8rem;
	margin-bottom: 0.3rem;
	letter-spacing: 0.15em;
	font-weight: bold;
	font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #e78fd3, #8364d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.entry-button {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: center;
}

.entry-button .btn {
  font-weight: bold;
  font-size: 1.4rem;
  padding: 20px 100px;
  border-radius: 9999px;
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.entry-button .btn.entry {
  background: linear-gradient(135deg, #9db8e0, #a0f1cb); /* パステルグリーン */
}

.entry-button .btn:hover {
  transform: scale(1.06);
  filter: brightness(1.1);
}


@media (max-width: 900px) {
	#section8 {
		min-height: 80vh;
	}
	.entry-area {
		position: static;
		left: auto;
		margin: 0 auto;
	}
	.entry-button {
		flex-direction: column;
		gap: 1rem;
		transform: none;
		align-items: center;
	}	
}


/*背景色を入れない場合（画像だけを表示したい場合）*/
.no-bgcolor {
	background-color: transparent !important;
}


/*背景共通設定*/


/*------Production eveとは-------*/
.section2-p{
	padding:10px 0;
	font-size: 16px; /* 大きめに */
	line-height: 1.8; /* ゆとりのある行間 */
	color: #333333; /* 濃いめのグレーで視認性UP */
	font-weight: 400; /* 少し太くすると尚良い */
	letter-spacing: 0.03em; /* 文字の間隔も少し調整 */
}


/*------応募から活動までの流れ-------*/
#flow-outer {
    padding: 40px 0 0 0;
	transform: translateX(-10%);
}

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

/* 募集要件 */
.requirement-section {
	padding: 60px 20px;
	text-align: center;
}

.requirement-area {
	position: relative;
    left: -5%;         /* ← 中央から少し左に移動 */
    margin: 0 auto;    /* 中央寄せベース */
	left: -10%;              /* 少し左に */
}

.requirement-area h2 {
	font-size: 2.8rem;
	margin-bottom: 0.3rem;
	letter-spacing: 0.15em;
	font-weight: bold;

	font-weight: bold;
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #e78fd3, #8364d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.requirement-subtitle {
	font-size:15px;
    padding: 0;
    margin: 0px;
	letter-spacing:8px;
}

.requirement-grid {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 40px;
	max-width: 1100px;
	margin: 0 auto;
}

    
.requirement-box {
	position: relative;
	background: linear-gradient(to bottom, #f7f0ff, #f0faff);
	padding: 30px 25px;
	width: 500px;
	border-radius: 12px;
	text-align: left;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	z-index: 0;
	animation: float 4s ease-in-out infinite;
}

    
/* 個別にタイミングをずらす（自然な動きに） */

.requirement-box:nth-child(2) {
	animation-delay: 2s;
}
    
@keyframes float {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

    
.requirement-box h3 {
	font-size: 2rem;
	margin-bottom: 1rem;
	text-align: center;
	color: #d170b8;
}

    
.requirement-box ul {
	list-style: disc;
	padding-left: 1.2em;
}

    
.requirement-box li {
	margin-bottom: 1em;
	line-height: 1.6;
	font-size: 1.2rem;
}

    
.requirement-box small {
	display: block;
	margin-top: 0.5em;
	font-size: 1rem;
	color: #333;
}

    
/* スマホ対応 */
@media (max-width: 900px) {
	.requirement-grid {
		flex-direction: column; /* ← これを追加！ */
		align-items: center;    /* 中央揃え */
	}
	.requirement-box {
		width: 100%;
		max-width: 90%; /* 画面からはみ出さないように調整 */
		animation-delay: 0s !important;
	}
	.requirement-area {
		position: static;
		left: auto;
		margin: 0 auto;
	}
}

/* 選考フロー */
.fllow {
	font-size: 2.8rem;
	margin-bottom: 0.3rem;
	letter-spacing: 0.15em;
	font-weight: bold;
	font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #e78fd3, #8364d1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
    
.sub-title {
	font-size: 1rem;
	color: #aaa;
	margin-bottom: 2.5rem;
}

.period {
	color: #ffaad4;
	font-weight: bold;
	font-size: 1.4rem;
	margin-bottom: 2.5rem;    
}

.steps {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

.step {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid #999;
	border-radius: 16px;
	padding: 1.2rem;
	width: 100%;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
	transition: transform 0.3s ease;
}

.step:hover {
	transform: translateY(-5px);
}

.label {
	background: linear-gradient(135deg, #b3e5fc, #f8bbd0);
	color: #000;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	margin: 0 auto 0.6rem;
}

.step h3 {
	margin: 0.3rem 0;
	font-size: 1.4rem;
	color: #8f96d1;
  	font-weight: bold;
}

.step p {
	font-size: 1rem;
	color: #8f96d1;
	margin: 0.2rem 0;
	font-weight: bold;
}

.step small {
	font-size: 0.75rem;
	color: #615959;
	font-weight: bold
}

.catch {
	font-size: 1rem;
	color: #2a2a4f;
	margin-top: 0.3rem;
	font-weight: bold
}

.result {
	margin-top: 3rem;
}


.result h2 {
	font-size: 3rem;
	background: linear-gradient(to right, #7ee8fa, #eec0f6);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 0.5rem;
}

.result p {
	font-size: 1rem;
	color: #eee;
}


.result small {
	display: block;
	margin-top: 1rem;
	font-size: 0.75rem;
	color: #aaa;
}

.step-area {
	position: relative;
    left: -5%;         /* ← 中央から少し左に移動 */
    margin: 0 auto;    /* 中央寄せベース */
	left: -10%;              /* 少し左に */
}
/* スマホ画面の場合、縦一列にする */
@media (max-width: 900px) {
	.steps {
		flex-direction: column;
		align-items: center;
	}

	.step {
		width: 90%;
		max-width: 320px;
	}
	/*PC画面側で細かい位置調整をしていたところをリセットする*/
	.step-area{
		position: static;
		left: auto;
		margin: 0 auto;
	}
}

/*★------応募方法・注意事項-------*/
#section4 { border-radius: 3vw; }


.precaution-area {
	padding: 60px 20px;
	border: 3px solid #f7aeeb;
	border-radius: 20px;
	max-width: 900px;
	margin: 60px auto;
	text-align: center;
	background-color: #7e7eb9;
    position: relative;
	position: relative;
    left: -5%;         /* ← 中央から少し左に移動 */
    margin: 0 auto;    /* 中央寄せベース */
	left: -10%;              /* 少し左に */
}

.precaution-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 30px;
}

.precaution-label {
	font-size: 1.5rem;
	color: #ffffff;
	display: inline-block;
	padding: 6px 16px;
	position: relative;
	z-index: 1;
}

.precaution-heading {
	font-family: sans-serif;
	font-size: 2.3rem;
	margin: 0;
	color: #fff;
	display: inline-block;
	position: relative;
	text-align: center;
	font-weight: bold;
}

.precaution-heading::before {
	content: "⚠️";
	font-size: 2rem;
	position: absolute;
	left: -2em;
	top: 0.4rem;
}

.precaution-list {
	text-align: left;
	margin: 0 auto;
	max-width: 750px;
	padding: 0 1rem;
	list-style-position: outside
}

.precaution-list li {
	margin-bottom: 1em;
	line-height: 1.8;
	font-size: 1.5rem;
	list-style-type: "・";
	list-style-position: inside;
	font-weight: bold;
	color: #fff;
	text-indent: -1.1em;         /* マーカー分だけ左にずらす */
    padding-left: 1.1em;         /* テキストを右にずらす */
}

@media (max-width: 900px) {
	.precaution-area {
		position: static;
		left: auto;
		margin: 0 auto;
	}
	
	.precaution-heading {
		font-size: 1.5rem;
		padding-left: 2em;
	}

	.precaution-heading::before {
		left: 0;
		top: -1.2em;
		font-size: 1.2rem;
	}

	.precaution-list {
		padding: 0;
	}    
}

/*★------Q＆A-------*/
.faq h1 {
	text-align: center;
	font-size: 48px;
	color: #ee66aa; /* 少し落ち着いたピンク */
	margin-bottom: 40px;    
}

.faq-area {
	position: relative;
    left: -5%;         /* ← 中央から少し左に移動 */
    margin: 0 auto;    /* 中央寄せベース */
	left: -11%;              /* 少し左に */
}

.faq-item {
	background-color: #e0d5ff; /* 明るいラベンダー */
	color: #333;
	margin: 10px auto;
	padding: 20px;
	border-radius: 12px;
	width: 90%;
	max-width: 800px;
	cursor: pointer;
	position: relative;
	transition: background-color 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.faq-item:hover {
	background-color: #d2c4ff; /* ホバー時に少し濃いめに */
}

.faq-question {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	padding-right: 40px;
}

.faq-label {
	background: #ff99bb; /* 柔らかいピンク */
	color: white;
	font-weight: bold;
	padding: 6px 12px;
	border-radius: 6px;
	flex-shrink: 0;
}

.faq-answer-wrapper {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease;
}

.faq-answer {
	background: #ffffff;
	color: #444;
	padding: 20px;
	border-radius: 10px;
	margin-top: 10px;
}

.toggle {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 28px;
	transition: transform 0.4s ease;
	display: inline-block;
	color: #bb66cc; /* 柔らかい紫 */
}

.faq-item.active .toggle {
	transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 900px) {
	.faq-area {
		position: static;
		left: auto;
		margin: 0 auto;
	}
}

/*------コンタクト-------*/
#contact{
	height:600px;
	height: auto;
	background-image:url(back004.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:left top;
	overflow:hidden;
	background-attachment: fixed;
}
#contact-inner{
	position: relative;
	overflow: hidden;
	zoom:1;
	max-width:1400px;
	margin:0 auto;
	text-align:left;
}
#contact-left{
	float:left;
	background-color:rgba(0,0,0,0.7);
	width: 100%;
	max-width:500px;
	min-width:300px;
	line-height:600px;
	text-align:center;
}
#contact-right{
	float:left;
	width:61%;
	max-width:800px;
}
.contact-right-inner{
	border:0px solid #aaa;
	padding:105px 0 0 60px;
}
#subtitle-contact:first-letter {
	color:#eaf;
	font-size:35px;
}
/*テキストフォーム*/
.contact-subtitle{
	font-size:14px;
	color:#fff;
	line-height:25px;
	letter-spacing:2px;
	text-shadow: 0 0 9px #000, 0 0 5px #000, 0 0 3px #000;
	font-weight: bold;
}
.contact-formtext{
	width:90%;
	font-size:17px;
	line-height: 1.5;
	color:#fff;
	background-color:rgba(0,0,0,0.5);
	padding: 8px 7px;
	margin:0 0 55px 0;
	border:1px solid #777;
	border-radius:10px;
}
.contact-formtxta{
	display:block;
	width:90%;
	height:100px;
	border:1px solid #777;
	font-size:14px;
	color:#fff;
	background-color:rgba(0,0,0,0.5);
	padding:6px 3px;
	margin:0 0 18px 0;
	border-radius:10px;
}
.contact-formbtn{
	display:block;
	width:165px;
	margin:0 0 0 auto;
	font-size:16px;
	color:#fff;
	text-align:center;
	line-height:42px;
	background-color:rgba(0,0,0,0.7);
	border:1px solid #777;
	border-radius:10px;
}
#contact-form input,
.contact-formtxta{
	transition:background-color 0.5s;
}
#contact-form input:hover,
#contact-form input:focus,
.contact-formtxta:hover,
.contact-formtxta:focus{
	background-color:rgba(255,255,255,0.7);
	color:#000;
}


/*チェックボックス*/
#contact-checkboxs{
	width:100%;
	padding:2px 0 25px;
	font-size:16px;
	color:#222;
	line-height:25px;
	letter-spacing:2px;
	text-shadow:0 0 9px #bbb;
}
#contact-checkboxs .contact-item{
	display:inline-block;
	width:70%;
}
.contact-checkbox input{
    margin-right: 5px;
}
.contact-checkbox input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + span {
    width: auto;
    display: inline-block;
    position: relative;
    padding-top: 2px;
    padding-left: 30px;
    margin-bottom: 20px;
    color: #222;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
input[type="checkbox"] + span:before {
    position: absolute;
    left: 0;
    top: 5px;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
    border-radius: 5px;
    opacity: .6;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
input[type="checkbox"]:checked + span:before {
    width: 10px;
    top: 2px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-right: 3px solid #f55;
    border-bottom: 3px solid #f55;
}





/*画面幅900px以上の追加指定*/
@media screen and (max-width:699px) {

    /*------トップ-------*/
	#section1-subttl p {
	    line-height: 100%;
	    padding: 0 0 30px 0;
	    margin: 0;
	    font-size: 13px;
	}

    /*------スマホコンタクト-------*/
    #contact {
	height: auto;
        background-image: url(back004.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left top;
        overflow: hidden;
        background-attachment: initial;
    }
    #contact-inner {
        position: relative;
        overflow: hidden;
        zoom: 1;
        margin: 0 auto;
        text-align: left;
    }
    #contact-left {
        float: initial;
		width: 100%;
        max-width: initial;
        min-width: initial;
        text-align: center;
		line-height: 2;
    }
    #contact-right {
        float: initial;
        width: 100%;
        max-width: 800px;
    }
    .contact-right-inner {
        padding: 60px 15px 80px 10px;
    }
    #subtitle-contact:first-letter {
        color: #eaf;
        font-size: 35px;
    }
    /*テキストフォーム*/
    .contact-subtitle {
        font-size: 14px;
        line-height: 25px;
        letter-spacing: 2px;
		box-sizing: border-box;
    }
    .contact-formtext {
        width: 100%;
        height: auto;
        font-size: 15px;
		line-height: 1.5;
        padding: 10px ;
        margin: 0 0 50px 0;
		box-sizing: border-box;
    }
    .contact-formtxta {
        display: block;
        width: 100%;
        height: 100px;
        font-size: 14px;
        color: #fff;
        padding: 6px 3px;
        margin: 0 0 18px 0;
		box-sizing: border-box;
    }
	.contact-formbtn-wrapper{
		width: 100% !important;
	}
    .contact-formbtn {
        display: block;
        width: 165px;
        margin: 0 0 0 auto;
        font-size: 16px;
        text-align: center;
        line-height: 2.5;
	margin: 0 auto;
    }


/*スマホ公式LINE
---------------------------------------------------------------------------*/
	/*-- 公式LINE --*/
	.officialline-top img{
		height:auto;
		width:100%;
	}
	.Apply-btn-top{
		width:70%;
		display:inline-block;
		background:#3c6;
		border:0px;
		border-radius:17px;
		padding:17px 40px;
		margin:0 0 35px 0;
		font-size:0;
		box-shadow: 4px 4px 1px rgba(255, 255, 255, 0.4);
		transition: 0.5s;
	}
	.officialline img{
		height:auto;
		width:100%;
	}
	.line-btn{
		display:inline-block;
		background:#558fd5;
		border:0px;
		border-radius:17px;
		width: 98%;
		padding:23px 32px;
		margin:35px 0 10px 0;
		font-size:0;
		box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.1);
		transition: 0.5s;
	}
	.line-btn:hover{
		background:#4477dd;
		box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
	}



}/*画面幅900px以上の追加指定ここまで*/




/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 0.8rem;
	text-align: center;		/*内容をセンタリング*/
	padding-bottom: 1rem;
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}


/*お知らせブロック
---------------------------------------------------------------------------*/
.new dt {
    display: block;
    padding: 5px 0 2px;
    line-height: 120%;
}
/*記事の下に空ける余白*/
.new dd {
	display: block;
    padding: 3px 0 4rem 33px;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		/*行間（アイコンの高さ）*/
	border-radius: 3px;		/*角を丸くする指定*/
	padding: 0 0.5rem;		/*上下、左右へのブロック内の余白*/
	width: 8rem;			/*幅。６文字分。*/
	transform: scale(0.8);	/*80%のサイズに縮小*/
	background: rgba(255,255,255,0.8);		/*背景色*/
	color: #333;			/*文字色*/
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	/*ブロック全体*/
	.new {
		display: block;	/*gridを使う指定*/
		grid-template-columns: auto 1fr;	/*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
	}

	}/*追加指定ここまで*/


/*list-grid（gallery.htmlでサムネイルを表示している部分の設定です）
---------------------------------------------------------------------------*/
/*listブロックを囲む外側のボックス*/
.list-grid-trimming {
	display: grid;
	grid-template-columns: repeat(4, 1fr);	/*ここの「4」の数字が横に並べる数です。3列がいいなら(3, 1fr)です。*/
	gap: 1rem;	/*マージン的な数値。サムネイル間を１文字分あけます。*/
}

/*ボックスを正方形にトリミングする為の指定なので変更しない。*/
.list-grid-trimming .list {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-top: 100%;
}
.list-grid-trimming .list a {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.list-grid-trimming .list img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-grid-trimming .list img:hover {
	transform: scale(1.1);	/*1.1倍に拡大*/
	filter: contrast(1.3);	/*コントラストを1.3倍*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 0.2s 0.2s both;	/*一瞬ボタンが出ちゃうのを隠す為の応急措置*/
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #000;border: 1px solid #fff;border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.color-check, .color-check a {color: #ffcf0d;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.ws {width: 48%;display: inline;}
		.sh {display: none;}
		.pc {display: block;}

	}/*画面幅900px以上の追加指定ここまで*/