@charset "utf-8";



/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');


/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--bg-color: #fbfaf1;			/*主にテンプレートの背景色*/
	--bg-inverse-color: #171c26;	/*上のbg-colorの「対」として使う色*/
	
	--primary-color: #2178bd;	/*メインまたはアクセントカラー*/
	--primary-inverse-color: #ffffff;	/*上のprimary-colorの「対」として使う色*/
	
	--content-space: 8.33vw;  /*余白の一括管理用。画面幅100% = 100vwです。（grid-boxと幅を合わせる為に100÷12=8.33にしました）*/

	--headerH: 70px;  /*headerの高さ他、関連パーツ用*/
	--headerM: 1rem;  /*headerのマージン他、関連パーツ用*/

	/* 画面幅800px以下（スマホ） */
@media screen and (max-width:800px) {
  :root {
    --headerM: 1.0rem; /* ←好きな値に調整 */
  }
}

	/*以下は、「会場のご案内」のマスク用*/
	--mask1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M934.9,934.9c-107.3,107.3-294.2,49.6-434.9,49.6s-327.5,57.7-434.9-49.6C-42.2,827.5,15.5,640.7,15.5,500S-42.2,172.5,65.1,65.1C172.5-42.2,359.3,15.5,500,15.5s327.5-57.7,434.9,49.6c107.3,107.3,49.6,294.2,49.6,434.9s57.7,327.5-49.6,434.9Z'/%3E%3C/svg%3E");
	
	--mask2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M885.9,885.9c-52.7,57.7-122.9,82.5-189.6,96.8-67.7,13.7-132,17-196.2,17.3-64.3-.3-128.5-3.6-196.3-17.3-66.7-14.3-137-39.1-189.6-96.8-57.7-52.7-82.5-122.9-96.8-189.6C3.6,628.5.3,564.3,0,500c.3-64.3,3.6-128.5,17.3-196.3,14.3-66.7,39.1-137,96.8-189.6,52.7-57.7,122.9-82.5,189.6-96.8C371.5,3.6,435.7.3,500,0c64.3.3,128.5,3.6,196.3,17.3,66.7,14.3,137,39.1,189.6,96.8,57.7,52.7,82.5,122.9,96.8,189.6,13.7,67.7,17,132,17.3,196.2-.3,64.3-3.6,128.5-17.3,196.3-14.3,66.7-39.1,137-96.8,189.6h0Z'/%3E%3C/svg%3E");
	
	--mask3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M1000,494.5c0,68.1-11.8,136.6-36,195.8-25.2,61.4-73.5,110.1-119.3,156.3-45.7,46.2-96.8,88.2-157.5,113.7-58.5,24.5-123.5,39.7-190.9,39.7s-128.5-24.5-187-49c-60.7-25.4-121.4-52.2-167.2-98.4-45.7-46.2-76.4-105.9-101.5-167.2C16.3,626.1,0,562.6,0,494.5s18.7-130.7,42.9-189.9c25.2-61.4,54.9-120.5,100.6-166.8,45.7-46.2,102.4-80.9,163.1-106.3C365.2,7,429,0,496.3,0s131.9,5.1,190.5,29.6c60.7,25.4,119.6,59,165.3,105.2,45.7,46.2,75.2,107.3,100.4,168.7s47.5,122.9,47.5,191Z'/%3E%3C/svg%3E");
	
	--mask4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M909.8,500c244.8,361.6-48.3,654.7-409.8,409.8-361.6,244.8-654.7-48.3-409.8-409.8C-154.7,138.4,138.4-154.7,500,90.2c361.6-244.8,654.7,48.3,409.8,409.8Z'/%3E%3C/svg%3E");
	
	--mask5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill='black' d='M691.6,500.5c0,33.2-25,60-40.6,86.9-16,27.7-27.3,62.6-55,78.6-26.8,15.5-62.3,8.3-95.6,8.3s-68.7,7.3-95.6-8.3c-27.7-16-38.9-50.9-55-78.6-15.5-26.8-40.6-53.7-40.6-86.9s25-60,40.6-86.9c16-27.7,27.3-62.6,55-78.6,26.8-15.5,62.3-8.3,95.6-8.3s68.7-7.3,95.6,8.3c27.7,16,38.9,50.9,55,78.6,15.5,26.8,40.6,53.7,40.6,86.9Z'/%3E%3Cpath fill='black' d='M1000,500c0,92.7-39.8,175.2-81.7,250-43.2,77.2-93.7,153.6-168.3,198.3-72.3,43.3-160.5,51.6-250,51.6s-177.7-8.3-250-51.6c-74.6-44.7-125.2-121.1-168.3-198.3C39.8,675.2,0,592.7,0,500s39.8-175.2,81.7-250c43.2-77.2,93.7-153.6,168.3-198.3C322.3,8.3,410.5,0,500,0s177.7,8.3,250,51.6c74.6,44.7,125.2,121.1,168.3,198.3,41.8,74.8,81.7,157.3,81.7,250Z'/%3E%3C/svg%3E");
	
	--mask6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpolygon fill='black' points='1000 500 957.3 566.4 979.9 642.3 920.3 693.9 920.7 773.1 849.1 805.6 827.4 881.7 749.8 892.6 707.8 959.5 630.2 947.8 571.2 1000 500 966.6 428.9 1000 369.8 947.8 292.2 959.5 250.2 892.6 172.6 881.7 150.9 805.6 79.3 773.1 79.7 693.9 20.1 642.3 42.7 566.4 0 500 42.7 433.6 20.1 357.7 79.7 306.1 79.3 226.9 150.9 194.4 172.6 118.3 250.2 107.4 292.2 40.5 369.8 52.2 428.8 0 500 33.4 571.1 0 630.2 52.2 707.8 40.5 749.8 107.4 827.4 118.3 849.1 194.4 920.7 226.9 920.3 306.1 979.9 357.7 957.3 433.6 1000 500'/%3E%3C/svg%3E");
}


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

	:root {
		--content-space: 20px;	/*余白の一括管理用。小さな端末で余白を狭くする。*/
	}

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


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}


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


/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}


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

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

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

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


body {
	margin: 0;padding:0;
	font-family: "Zen Maru Gothic", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-weight: 300;
	-webkit-text-size-adjust: none;
	background: var(--bg-color);	/*背景色*/
	color: var(--bg-inverse-color);		/*文字色*/
	line-height: 2.5;		/*行間*/
	overflow-x: hidden;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

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

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

/*videoタグ*/
video {max-width: 100%;}

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

/*他*/
input {font-size: 1rem;}
section > ol,section > ul {margin-left: 2rem;}



/*sectionの設定
---------------------------------------------------------------------------*/
section {
	padding: 0 var(--content-space);
	margin: 3vw 0;	/*5vwを変更する際は、他にも影響するので注意*/
}


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

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






/*conatiner（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.2s both;  /*0.4秒待機後、0.2秒かけてフェードイン*/
	display: grid;
	grid-template-rows: auto 1fr;	/*mainの内容が少ない場合にfooterが浮かないように。*/
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
}

/*トップ以外のcontainer*/
body:not(.home) #container {
	grid-template-rows: 1fr;	/*mainの内容が少ない場合にfooterが浮かないように。*/
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {
	position: fixed;	/*画面の一定箇所で固定表示*/
	z-index: 999;
	width: calc(100% -6rem);	/*幅。下の行のmarginが左右にあるので、6remを引いた幅にしています。*/
	margin: var(--headerM);	/*header周りに空けるマージン。css冒頭のheaderMを読み込みます。*/
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 0rem;	/*headerの直接の子要素同士に空けるスペース。２文字分。*/
	line-height: 1.5;	/*行間を少し狭く*/
	height: var(--headerH);	/*ヘッダーの高さ。css冒頭のheaderHを読み込みます。*/
	
	transition: transform 0.9s ease, opacity 0.9s ease;	/*スクロールでheaderがフェードする際にかける時間。*/
	padding: 0 calc(var(--headerH) + 0rem) 0 2rem;	/*header内の余白*/
	
}

/* 隠す際のスタイル */
.site-header.is-hide {
	opacity: 0;
	transform: translateY(-100%); /*真上に隠す*/
	pointer-events: none; /*消えている間はクリックを無効化*/
}

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

	header {
		position: absolute;	/*スクロールとともに動かす為、絶対配置*/
		background: transparent;	/*背景を透明にして背後の画像を見やすく*/
		box-shadow: none;	/*ボックスの影も消す*/
		margin: 0;
	}

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


/*ロゴ画像*/
#logo {margin: 0;flex-shrink: 0;}
#logo img {
	display: block;
	height: 40px;	/*ロゴの高さ。headerの高さを固定しているので、ロゴも高さで指定して下さい。*/
	z-index: 9999;
}
	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {

	#logo img {
		padding-top: 16px;	/*上下、左右の余白*/
		width: 240px; 
		height: auto; 
	}

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




/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
	animation: animation1 0.2s both;
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 100px var(--content-space) 50px;		/*ブロック内の余白*/
	background: #fffcf8;	/*ロゴ背後の色。
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込み。*/
	line-height: 1.5;
	font-size: 1.1rem;
}

.small-screen #menubar {display: none;}


/*メニュー１個あたり*/
.small-screen #menubar a {
	display: block;text-decoration: none;
	background: #fffcf8;	/*背景色。css冒頭のprimary-inverse-colorを読み込み。*/
	color: #333333;	/*文字色*/
	margin-bottom: 0.2rem;	/*下に１文字分のスペースを空ける。メニュー同士の間隔です。*/
	padding: 0.8rem 2rem;		/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
	border-bottom: 1px solid #000000;
}

/*英語の装飾文字*/
.small-screen #menubar span {
	display: block;
	font-size: 0.7rem;	/*文字サイズ70%*/
	color: #3e7dc9;	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
	display: none; /* デフォルトは非表示 */
	animation: opa1 0s 0.2s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: var(--headerM);	/*右からの配置場所。css冒頭のheaderMを読み込みます。*/
	top: var(--headerM);	/*上からの配置場所。css冒頭のheaderMを読み込みます。*/
	width: var(--headerH);	/*幅。css冒頭のheaderHを読み込みます。*/
	height: var(--headerH);	/*高さ。css冒頭のheaderHを読み込みます。*/
	background:  #4b4b4b;	/*ボタン色。css冒頭のprimary-colorを読み込みます。*/
	transform-origin: right top;
	transform: scale(1);	/*大きさを調整したい場合はここの「1」を変更します。1.2や0.7など。*/
	border-radius: 50px;	/*角を丸くする指定。headerのborder-radiusと揃えます。*/
}

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

	#menubar_hdr {
		right: 2rem;	/*右からの配置場所の上書き*/
	}

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


/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
	background: #858585;
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
	display: block;
	position: absolute;
	left: 18px;
	width: 35px;
	height: 1.6px;		/*線の高さ*/
	background: #ffffff;	/*線の色*/
	transition: 0.3s;
}

#menubar_hdr span:nth-of-type(1) {
	top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
	top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
	top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
	opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
	transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
	display: flex;
}
@media screen and (max-width: 600px) {
  #menubar_hdr {
    transform: scale(0.6);
  }
}


/*見出しのテキストのフェードイン設定
---------------------------------------------------------------------------*/
/* =======================================
   セクションタイトル共通
======================================= */
.section-heading {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 40px;
}

/* 日本語タイトル */
.section-heading .fade-in-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* 初期状態でテキストを非表示にする */
.fade-in-text {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-text.show {
  opacity: 1;
  transform: translateY(0);
}
/*見出しのテキストサイズ*/
.section-heading .fade-in-text {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: inherit;
}

/* スマホサイズ */
@media screen and (max-width: 768px) {

  .section-heading .fade-in-text {
    font-size: 28px;
    letter-spacing: 0.05em;
    line-height: 1.4;
  }

}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.2s linear both;
}

/*「会場のご案内」
---------------------------------------------------------------------------*/
/*gridボックス全体を囲むブロック*/
.grid-mask {
	display:grid;
	grid-template-columns: repeat(4, 1fr);	/*4列にする指定*/
	gap: 5rem;	/*ボックスの間に空けるスペース。５文字分。*/
	line-height: 1.5;	/*行間を少し狭く*/
}

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

	.grid-mask {
		grid-template-columns: repeat(2, 1fr);	/*2列にする*/
		gap: 3rem;	/*ボックスの間に空けるスペース*/
	}

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


/*h4見出し*/
.grid-mask h4 {
	margin-bottom: 0;
	text-align: center;
	color: var(--primary-color);	/*文字色。css冒頭のprimary-colorを読み込みます。*/
}

/*p（段落）*/
.grid-mask p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
}

/*画像*/
.grid-mask figure {
	aspect-ratio: 1 / 1;   /* アスペクト比1:1の正方形 */
}
.grid-mask figure img {
	transition: 0.3s;
	width:100%;
	height:100%;
	object-fit: cover;
	display:block;
}

/*画像にリンクがある場合のみ少しだけ拡大*/
.grid-mask figure a img:hover {
	transform: scale(1.1);
}

.grid-mask .list {
	position: relative;
}
.grid-mask .kazari {
	display: block;
	width: clamp(80px, 8vw, 250px);
	position: absolute;
	pointer-events: none;
}
.grid-mask .kazari.left-top {
	left: -5vw;
	top: -6vw;
}
.grid-mask .kazari.right-top {
	right: -5vw;
	top: -6vw;
}

	/* マスク対応ブラウザだけ「切り抜き」に切り替え */
	@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {

	.grid-mask figure {
		overflow: hidden;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 100% 100%;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-size: 100% 100%;
		/* 明示的に透過（アルファ）でマスクする指定を追加 */
		-webkit-mask-source-type: alpha;
		mask-mode: alpha;
	}

	.grid-mask .list.mask1 figure {
		-webkit-mask-image: var(--mask1);
		mask-image: var(--mask1);
	}

	.grid-mask .list.mask2 figure {
		-webkit-mask-image: var(--mask2);
		mask-image: var(--mask2);
	}

	.grid-mask .list.mask3 figure {
		-webkit-mask-image: var(--mask3);
		mask-image: var(--mask3);
	}

	.grid-mask .list.mask4 figure {
		-webkit-mask-image: var(--mask4);
		mask-image: var(--mask4);
	}

	.grid-mask .list.mask5 figure {
		-webkit-mask-image: var(--mask5);
		mask-image: var(--mask5);
	}

	.grid-mask .list.mask6 figure {
		-webkit-mask-image: var(--mask6);
		mask-image: var(--mask6);
	}

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

/* ==========================================================================
   「仕事内容」セクション用レスポンシブCSS
   ========================================================================== */

/* 共通リセット */
.list-grid .list * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --------------------------------
   リストグリッド全体
-------------------------------- */
.list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 6vw; /* ブロック間の隙間 */
  padding: 0 16px; /* 左右余白 */
  margin: 0 auto;
  align-items: start;
}

/* ボックス1つ */
.list-grid .list {
  display: grid;
  text-align: center;
  position: relative;
}

/* 画像 */
.list-grid.square .list figure {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.list-grid.square .list figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

/* 見出し */
.list-grid h4 {
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* 本文 */
.list-grid p {
  font-weight: normal;
  font-size: 0.85rem;
  opacity: 0.7;
  line-height: 1.6;
}
}
/* ==================================
   画像グリッド（追加推奨）
================================== */
.grid-images {
  display: flex;
  justify-content: center;
  gap: 55px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.grid-images figure {
  width: 360px;
  margin: 0;
}

.grid-images img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 8px;
}

/* テキストグリッド */
.grid-text {
  display: flex;
  justify-content: center;
  gap: 25px;
  text-align: center;
  flex-wrap: wrap;
}

.grid-text .text {
  width: 200px;
}

/* ==================================
   スマホ対応（最大幅600px）
================================== */
@media screen and (max-width: 600px) {
	
  /* リストグリッドを1列に */
  .list-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 16px;
  }
	
  /* 画像グリッド */
  .grid-images,
  .grid-text {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .grid-images figure,
  .grid-text .text {
    width: 90%;
    max-width: 260px;
  }
}


/*btn0（トップページのボタン）
---------------------------------------------------------------------------*/
.btn0 a {
	display: block;
	text-decoration: none;
	width: fit-content;
	margin: 4rem auto 0;  /* 上に余白2rem、左右は自動、下は0 */
	background: #fffefd;	/*背景色*/
	color: var(--bg-inverse-color);	/*文字色*/
	padding: 0.5rem 3rem;	/*ボタン内の余白。上下に0.5文字分、左右に3文字分。*/
	border-radius: 100px;	/*角を丸くする指定。大きければ適当でOK。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボタンの影*/
}

/*マウスオン時*/
.btn0 a:hover {
	background: #000;	/*背景色*/
	color: #fff;		/*文字色*/
	box-shadow: none;	/*ボタンの影を消す*/
}


/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	display: block;
	text-decoration: none;
	width: fit-content;
	margin: 4rem auto 0;  /* 上に余白2rem、左右は自動、下は0 */
	background: #fffefd;	/*背景色*/
	color: var(--bg-inverse-color);	/*文字色*/
	padding: 0.5rem 3rem;	/*ボタン内の余白。上下に0.5文字分、左右に3文字分。*/
	border-radius: 100px;	/*角を丸くする指定。大きければ適当でOK。*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.1);	/*ボタンの影*/
}

/*マウスオン時*/
.btn1 a:hover {
	background: #000;	/*背景色*/
	color: #fff;		/*文字色*/
	box-shadow: none;	/*ボタンの影を消す*/
}

.space {
  height: 100px;
}
/*募集要項
---------------------------------------------------------------------------*/
.ta3-parts {
  width: 100%;
  border-collapse: collapse;
  margin-top: 90px;
	margin-bottom: 10px;
	border-top: 1px solid #ddd;
}

.ta3-parts th {
  width: 30%;
  background: #fefefe6e;
  text-align: center;
  padding: 12px;
  vertical-align: top;
}

.ta3-parts td {
  padding: 16px;
  border-bottom: 1px solid #ddd;

}

.ta3-parts tr {
  border-bottom: 1px solid #ddd;
}
.ta3-parts strong {
  font-weight: bold;
}
@media screen and (max-width: 600px) {

  .ta3-parts tr {
    display: block;
  }

  .ta3-parts th,
  .ta3-parts td {
    display: block;
    width: 100%;
  }

  .ta3-parts th {
    margin-bottom: 5px;
  }
}

/* ===== 選考フロー全体 ===== */
#process {
  padding: 60px 0px;
	
}

.process-list {
  max-width: 800px;
  margin: 50px auto 0;
	
}

/* 各ステップ */
.process-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px 14px 14px;
  border-bottom: 1px solid #c9bfbf33;
	box-shadow: 0px 2.5px 3px rgba(0,0,0,0.1);	/*ボタンの影*/
	background-color: #ffffffc9;
}

/* 左：工程名 */
.process-title {
  width: 50%;
  font-size: 1.1rem;
  font-weight: 400;
  color: #d8528a;
}

/* 右：説明 */
.process-desc {
  width: 90%;
  font-size: 0.9rem;
	color: #3e404f;
  line-height: 1.8;
	font-weight: 400;
  text-align: left;
}

/* 下向き矢印 */
.process-arrow {
  text-align: center;
  font-size: 1.2rem;
  color: #3e404f;
  margin: 10px 0;
}

/* ===== スマホ ===== */
@media screen and (max-width: 768px) {

  .process-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .process-title,
  .process-desc {
    width: 100%;
  }

  .process-arrow {
    font-size: 1rem;
  }
}

/*bg3背景
---------------------------------------------------------------------------*/
.bg3 {
	color: #333;	/*文字色*/
	padding-top: 3vw;		/*ボックス内の上に空ける余白。画面幅100%=100vw*/
	padding-bottom: 3vw;	/*ボックス内の下に空ける余白。画面幅100%=100vw*/
}

/* ===== スマホ ===== */
@media screen and (max-width: 768px) {

  .process-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .process-title,
  .process-desc {
    width: 100%;
  }

  .process-arrow {
    font-size: 1rem;
  }
.bg3 {
padding-left: 16px;
padding-right: 16px;
  }
	
}



/* ===== エントリーフォーム===== */

.entry-section {
  padding: 40px 20px;
  text-align: center;
}

.entry-inner {
  max-width: 1200px;
  margin: 0 auto;
	
}

.entry-text {
  margin-bottom: 40px;
  font-size: 1.1rem;
  color: #3e404f;
}

/* フォーム枠 */
.form-wrapper {
  width: 100%;
  background: #ffffffa3;
  border-radius: 10px;
  box-shadow: 0 5px 4px rgba(0,0,0,0.08);
  overflow: hidden;
}
.form-wrapper iframe {
  width: 100%;
  height: 1000px; /* ←ここを大きくする */
  border: none;
}

/* ===========================
   Q&A アコーディオン
=========================== */
.faq-question {
	color: #191e1c;	/*文字色*/
  cursor: pointer;
  position: relative;
  padding: 25px 35px 15px 0;
  font-weight: 500;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.faq-item.is-open .faq-question::after {
  content: "−";
}

.faq-answer {
  display: none;
  padding: 0 0 20px 0;
  color: #495f86;
  line-height: 1.8;
	font-weight: 550;
}

/*faq背景
---------------------------------------------------------------------------*/
.faq {
	background: #f3f8ca; /*背景色*/
	padding: 10vw;
	color: #0f0f0f;	/*文字色*/
	padding-top: 3vw;		/*ボックス内の上に空ける余白。画面幅100%=100vw*/
	padding-bottom: 8vw;	/*ボックス内の下に空ける余白。画面幅100%=100vw*/
}
/*上部分のみ角丸にしたい場合*/
.faq.kado-maru {
	border-radius: 10vw 10vw 10vw 10vw;	/*左上、右上、右下、左下の順*/
}

/*フッター
---------------------------------------------------------------------------*/
/* フッター初期化 */
footer * {
	margin: 0;
	padding: 0;
}

footer ul {
	list-style: none;
}

/* フッター全体 */
footer {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	padding: 2rem;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/* PC時レイアウト */
@media screen and (min-width:700px) {
	footer {
		flex-direction: row;
		align-items: flex-start;
	}
}

/* 左ブロック */
footer .footer1 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

/* ロゴ */
.footer-logo {
	display: block;
	margin: 0 auto;        /* ←中央配置 */
	width: 100%;
	max-width: 420px;      /* ←ここでサイズ調整（今より一回り大きく） */
	height: auto;
}

/* 右ブロック */
footer .footer2 {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	line-height: 1.9;
	font-size: 0.9rem;
}
footer .footer1,
footer .footer2 {
	padding: 0 1.5rem;
}

/* PC時は少し広め */
@media screen and (min-width:700px) {
	footer .footer1,
	footer .footer2 {
		padding: 0 2rem;
	}
}


/* メニュー */
footer ul {
	display: flex;
	gap: 1rem;
	padding: 0;
}

/* コピーライト */
footer small {
	margin-top: auto;
}

/* Google Map */
.iframe-box1 {
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	overflow: hidden;
}

.iframe-box1 iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

/* 左ブロックを中央レイアウトに */
footer .footer1 {
	display: flex;
	flex-direction: column;
	align-items: center;   /* ←これが核心（全体を中央に） */
	text-align: center;    /* ←文字も中央揃え */
	gap: 0.5rem;           /* ←余白少し詰める */
}

/* ロゴとの距離調整 */
.footer-logo {
	margin-bottom: 0.2rem;
}

/* タグライン */
.footer-tagline {
	margin: 0;
	line-height: 1.6;
}

/* 住所 */
footer .footer1 p {
	margin: 0;
	line-height: 1.9;
}

@media screen and (max-width: 768px) {
  footer {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/*bg1背景
---------------------------------------------------------------------------*/
.bg1 {
	background: var(--primary-color);	/*背景色。css冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
	padding-top: 3vw;		/*ボックス内の上に空ける余白。画面幅100%=100vw*/
	padding-bottom: 3vw;	/*ボックス内の下に空ける余白。画面幅100%=100vw*/
}

/*上部分のみ角丸にしたい場合*/
.bg1.kado-maru {
	border-radius: 10vw 10vw 0 0;	/*左上、右上、右下、左下の順*/
}


/*bg1,bg2共通設定。微妙な余白をなくす。
---------------------------------------------------------------------------*/
.bg1 + .bg1,
.bg2 + .bg2,
.bg1 + .bg2,
.bg2 + .bg1 {
	margin-top: 0;
}


/*仕事内容 横長タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal .list {
	padding: 2rem 4rem;	/*上下、左右へのボックス内の余白*/
}
/* スマホ */
@media screen and (max-width:700px) {
	.list-normal .list {
		padding: 2rem 0;
	}
}
/*ボックス内のfigure画像*/
.list-normal .list figure {
	margin-bottom: 1rem;	/*画像の下に空けるスペース*/
}
/*ボックス内のh4タグ*/
.list-normal .list h4 {
	margin: 0;				/*デフォルトマージンを一旦リセット*/
	margin-bottom: 0.5em;	/*下に少し余白を作る*/
	font-size: 1.15rem;		/*文字サイズ。bodyで指定しているfont-sizeの1.3倍。*/
}

/*ボックス内のpタグ*/
.list-normal .list p {
	margin: 0;			/*デフォルトマージンを一旦リセット*/
	font-size: 0.9rem;	/*文字サイズ。bodyで指定しているfont-sizeの0.9倍。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	.list-normal .list div {
		flex: 1;
	}

	/*ボックス１個あたり*/
	.list-normal .list {
		display: flex;	/*flexボックスを使う指定*/
		align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	}

.list figure img {
	margin-bottom: 0;	/*下に空けるスペースをリセットする*/
  width: 300px;   /* 好きなサイズに調整OK */
  height: auto;
  border-radius: 10px;
	margin-right: 2rem;	/*画像の右側に空けるスペース*/
}
	}/*追加指定ここまで*/



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

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

/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むブロック*/
.deco-slideimg2-parts {
	overflow-x: hidden;

}

/*スライドショーが２段続く場合に、上下間に1文字分のスペースを空ける。*/
.deco-slideimg2-parts {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
/* PC表示（例：768px以上）で2段目を非表示 */
@media screen and (min-width: 768px) {
  .deco-slideimg2-parts:nth-of-type(2) {
    display: none;
  }
}
/*画像たちを囲むブロック*/
.deco-slideimg2-parts .img-parts {
	display: flex;
	overflow: hidden;
}

/*画像1個あたり*/
.deco-slideimg2-parts .img-parts > div {
	padding: 0 0.3rem;	/*左右で合計1remぶんの見た目余白*/
}

/*右から左へ、左から右へ、のアニメーション*/
.deco-slideimg2-parts .rtl-parts, .deco-slideimg2-parts .ltr-parts {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.deco-slideimg2-parts .rtl-parts {animation-name: slide-rtl-parts;}
.deco-slideimg2-parts .ltr-parts {animation-name: slide-ltr-parts;}

@keyframes slide-rtl-parts {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr-parts {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}



/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #c02340 !important;}
.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;}
.padding0 {padding: 0 !important;}
.mb0 {margin-bottom: 0px !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: rgba(0,0,0,0.7); color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.look .color-check {color: yellow !important;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.block {display: block !important;}


/* トップ画面
---------------------------------------------------------------------------*/
#mainimg {
	color: #292828;
	letter-spacing: 0.1em;
	background: var(--base-color) url("../images/mainimg_sh.jpg") no-repeat center center / cover;
	width: 100%;
	position: relative;
	overflow: hidden;

	/* スマホ */
	height: 100vh;
	padding-top: 0;
}

/* 内側 */
#mainimg > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 120px 20px 60px;
	line-height: 1.2;
	box-sizing: border-box;
}

/* テキスト共通 */
#mainimg p {
	margin: 0;
}

/* テキストエリア */
#mainimg .text {
	font-size: 16px;
	font-weight: 550;
	text-align: center;
	position: relative;
	z-index: 10;
}

/* recruit message */
.recruit-message {
	max-width: 900px;
	padding: 0 30px;
	position: relative;
	z-index: 10;
	text-shadow:
	0 2px 10px rgba(255,255,255,0.35);
}

/* 各行 */
.recruit-message p {
	margin-bottom: 12px;
	line-height: 1.9;
	letter-spacing: 0.08em;

	opacity: 0;
	transform: translateY(20px);

	animation: fadeUp 1s ease forwards;
}

/* 1行目 */
.recruit-message p:first-child {
	font-size: 32px;
	font-weight: 700;
	color: #0d4e96;
	line-height: 1.8;
	margin-bottom: 28px;
}

/* 最後の強調 */
.recruit-message p:nth-last-child(-n+2) {
	font-weight: 650;
	color: #0d4e96;
}

/* 順番アニメーション */
.recruit-message p:nth-child(1)  { animation-delay: 0.2s; }
.recruit-message p:nth-child(2)  { animation-delay: 0.4s; }
.recruit-message p:nth-child(3)  { animation-delay: 0.6s; }
.recruit-message p:nth-child(5)  { animation-delay: 0.8s; }
.recruit-message p:nth-child(6)  { animation-delay: 1s; }
.recruit-message p:nth-child(7)  { animation-delay: 1.2s; }
.recruit-message p:nth-child(9)  { animation-delay: 1.4s; }
.recruit-message p:nth-child(10) { animation-delay: 1.6s; }

/* フェードアップ */
@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* PC背景 */
@media screen and (min-width:420px) {
	#mainimg {
		background: var(--base-color) url("../images/mainimg.jpg") no-repeat center center / cover;
	}
}

/* PC文字サイズ */
@media screen and (min-width:768px) {

	#mainimg .text {
		font-size: 1.8vw;
	}

	#mainimg > div {
		padding: 120px 40px;
	}
}


/* recruit animation
---------------------------------------------------------------------------*/

.recruit-page .recruit-group {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(1.5px);

	transition:
	opacity 0.9s ease,
	transform 0.9s ease,
	filter 0.9s ease;
}

.recruit-page .recruit-group.recruit-show {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}


/* トップページの図形
---------------------------------------------------------------------------*/

/* 右エリア */
.right-area {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	pointer-events: none;
}

/* 共通 */
.circle {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, #2181f1, #0371f6);
	opacity: 0.9;
	filter: blur(0px);

	animation:
	float ease-in-out infinite alternate;
}

/* 大円 */
.circle.big {
	width: 580px;
	height: 580px;
	top: 10%;
	right: -30%;
	animation-duration: 9s;
}

/* 中円 */
.circle.mid {
	width: 250px;
	height: 250px;
	bottom: 0%;
	right: 45%;
	animation-duration: 7s;
}

/* 左円 */
.circle.left-mid {
	position: absolute;

	width: 300px;
	height: 300px;

	top: 20%;
	left: 16%;

	border-radius: 50%;
	background: radial-gradient(circle, #2c8af9, #417eee);

	opacity: 0.9;

	animation:
	float ease-in-out infinite alternate;

	animation-duration: 17s;

	z-index: 1;
	pointer-events: none;
}

/* 浮遊アニメ */
@keyframes float {
	0% {
		transform: translate(0, 0) scale(1);
	}

	100% {
		transform: translate(60px, -40px) scale(1.03);
	}
}

/* 左円はPCのみ */
@media screen and (max-width:1199px) {

	.circle.left-mid {
		display: none;
	}
}

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

	.circle.left-mid {
		display: block;
	}
}


/* スマホ対応
---------------------------------------------------------------------------*/
@media screen and (max-width:768px) {

	#mainimg {
		height: 100vh;
	}

	#mainimg > div {
		padding: 120px 20px 60px;
	}

	#mainimg .text {
		line-height: 2.3;
		font-size: 16px;
	}

	.recruit-message {
		padding: 0 10px;
	}

	.recruit-message p {
		line-height: 1.8;
		margin-bottom: 10px;
	}

	.recruit-message p:first-child {
		font-size: 16px;
		line-height: 1.8;
		margin-bottom: 20px;
	}

	.right-area {
		width: 100%;
		height: 100%;
	}

	.circle.big {
		width: 400px;
		height: 400px;
		top: 10%;
		right: -35%;
	}

	.circle.mid {
		width: 150px;
		height: 150px;
		top: 52%;
		right: 40%;
	}

	.circle.left-mid {
		display: none;
	}
}


/* スマホサイズで調整 */
@media screen and (max-width: 767px) {

  #business {
    padding: 20px 15px;  /* 上下20px、左右15pxの余白 */
    text-align: center;  /* 中央揃え */
  }

  #business h2.c {
    font-size: 5vw;  /* スマホ向け文字サイズ */
    line-height: 1.4;
    margin-bottom: 20px;
  }

  #business h2.c .small {
    display: block;
    font-size: 3vw;
  }

  .list-normal.inner {
    padding: 10px;        /* 内側の余白はリセット */
    margin-bottom: 30px; /* ブロック間の余白 */
  }

  .list {
    display: flex;
    flex-direction: column; /* 縦並び */
    align-items: center;    /* 中央揃え */
  }

  .list figure {
    width: 80%;       /* 画像幅を80%に */
    margin: 0 auto 15px auto;
  }

  .list div {
    width: 100%;      /* テキストブロックは全幅 */
  }

  .text-bottom {
    text-align: center; /* 中央揃え */
    padding: 0 1px;   /* 左右の余白を少し広げる */
    margin-top: 30px;
  }

  #business p, #business h4, #business h3 {
    font-size: 3vw;    /* スマホ向け文字サイズ */
    line-height: 1.9;
  }

}

img {
  user-select: none;
  -webkit-user-drag: none;
}
.img-wrap {
  position: relative;
  display: inline-block
}

.img-wrap img {
  display: block;
  pointer-events: none; /* 画像自体の操作を無効化 */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: default;
  background: rgba(255,255,255,0); /* 完全透明 */
}
.img-wrap img {
  pointer-events: none;
}

/* プライバシーポリシー
---------------------------------------------------------------------------*/
.privacy-section {
padding-top: 80px;	/*上下、左右の余白*/
  font-family: "Noto Sans JP", sans-serif;
  
  line-height: 2;
	font-weight: 500;
}
.privacy-section .section-title {
	text-align: left;
	font-size: 1.6rem;
  font-weight: 700;
}
/* ここまで
---------------------------------------------------------------------------*/

/* 働く環境
---------------------------------------------------------------------------*/
.work-env {
  padding: 75px 0px;
  background: #f3ebd0;
	position: relative;
	overflow: hidden; /* はみ出し制御 */;
	z-index: -1;
}
.work-env {
  width: 100vw;
}
.work-env .section-heading .fade-in-text {
  color: #222222c9;      /* 文字色 */
  font-weight: 300;    /* 太さ */
	font-size: 1.6rem;
}


.env-list {
  max-width: 1000px;
  margin: 0 auto;
}

.env-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 20px;
}

.env-item.left {
  flex-direction: row;
}

.env-item.right {
  flex-direction: row-reverse;
}

.env-img img {
  width: 280px;
  border-radius: 12px;
  object-fit: cover;
}

/* 吹き出し */
.balloon {
  position: relative;
  background: #fff;
  padding: 20px 25px;
  border-radius: 15px;
  line-height: 1.8;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  max-width: 500px;
font-size: 0.9rem;
}

/* 左向きしっぽ */
.env-item.left .balloon::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -15px;
  border: 10px solid transparent;
  border-right-color: #fff;
}

/* 右向きしっぽ */
.env-item.right .balloon::before {
  content: "";
  position: absolute;
  top: 20px;
  right: -15px;
  border: 10px solid transparent;
  border-left-color: #fff;
}
.balloon-icon {
  position: absolute;
  right: 300px;
  bottom: 580px;
  width: 90px; /* サイズ調整ここ */
  height: auto;
  opacity: 0.7; /* ちょい薄めで馴染ませる */
}


/* ===== スマホ ===== */
@media (max-width: 768px) {

  /* ★ここが超重要（ズレ防止） */
  .work-env {
    width: 100%;
    margin-left: 0;
    border-radius: 0;
    padding: 25px 15px;
  }

  .env-list {
    max-width: 90%;
  }

  .env-item {
    flex-direction: column !important;
    text-align: center;
    gap: 20px;
  }

  .env-img img {
    width: 100%;
    max-width: 260px;
  }
.work-env .section-heading .fade-in-text {
  color: #4e4e4e;      /* 文字色 */
  font-weight: 300;    /* 太さ */
	font-size: 1.6rem;
}
  .balloon {
    max-width: 100%;
    padding: 16px;
    font-size: 11.5px;
  }
  /* しっぽ消す */
  .balloon::before {
    display: none;
  }

  /* アイコンは小さく中央寄り */
  .balloon-icon {
    position: static;
    display: block;
    margin: 10px auto 0;
    width: 40px;
  }

}
@media (max-width: 768px) {
  .work-env {
    width: auto;              /* or 100% */
    margin-left: 0;
  }
}

/* ===== 余白設定 ===== */
.section-space1 { height: 20px; }
.section-space2 { height: 60px; }
.section-space3 { height: 80px; }
@media (max-width: 768px) {
  .space,
	.section-space3 {
    height: 0;
  }
}