@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=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');


/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--base-color: #fff;
	/*テンプレートの土台となる色（主に背景カラー）*/
	--base-inverse-color: #323232;
	/*上のbase-colorの対となる色（主にテキストカラー）*/

	--primary-color: #9937fe;
	/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #fff;
	/*上のprimary-colorの対となる色*/

	--space-large: 8vw;
	/*主に余白の一括管理用。画面幅100%＝100vwです。*/
	
	/*統一するために追記*/
	--section-padding-y: clamp(50px, 5vw, 80px);
	--section-padding-x: clamp(20px, 5vw, 80px);
}


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

	100% {
		opacity: 1;
	}
}


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

	100% {
		opacity: 0;
		visibility: hidden;
	}
}


/* 全体の設定
---------------------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: clamp(14px, 0.9vw + 12px, 16px);
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	
	font-family:
	"Noto Sans JP",
	"Hiragino Kaku Gothic ProN",
	"Yu Gothic",
	Meiryo,
	sans-serif;


	font-weight: 500;
	background: var(--base-color);
	color: var(--base-inverse-color);
    font-size: 1rem;
    line-height: 1.8;

	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

p {
    font-size: 1rem;
}

/*リセット他*/
figure {
	margin: 0;
}

dd {
	margin: 0;
}

nav ul {
	list-style: none;
}

nav,
ul,
li,
ol {
	margin: 0;
	padding: 0;
}

section li {
	margin-left: 1rem;
}

/*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*/
input {
	font-size: 1rem;
}

/*section*/
section {
	/* 	padding: var(--space-large);*/
	padding: var(--section-padding-y) var(--section-padding-x);
}


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

/*マウスオン時*/
a:hover {

	opacity: 0.9;
	/*色を90%だけ出す*/
}

a,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}

/*汎用クラス
---------------------------------------------------------------------------*/
.primary-color {
	color: var(--primary-color);
}







/*loading（ローディング）
---------------------------------------------------------------------------*/
@keyframes progress {
	0% {
		transform: scaleX(0);
	}

	100% {
		transform: scaleX(1);
	}
}

/*ロゴ画像*/
#loading img {
	width: 300px;
	/*画像の幅*/
	margin-bottom: 20px;
	/*ローディングバーとの間のスペース調整*/
}

/*ローディングブロック*/
#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-color);
	/*背景色*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	animation: fadeOut 1s ease 2s forwards;
}

/*プログレスバーの土台*/
.progress-container {
	width: 200px;
	/*幅。お好みで。*/
	height: 4px;
	/*高さ。お好みで。*/
	border-radius: 2px;
	/*角をほんの少し丸くする*/
	background: #fff;
	/*バーのベースカラー*/
	overflow: hidden;
}

/*プログレスバー*/
.progress-bar {
	width: 100%;
	height: 100%;
	background: #000;
	/*進行中のバーの色*/
	animation: progress 2s linear;
	/*#loadingのanimation時間に合わせて2秒に設定*/
	transform-origin: left;
}


/*container
---------------------------------------------------------------------------*/
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
@media screen and (max-width: 768px) {
  .container {
    padding-inline: 12px;
  }
}

#wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	flex: 1;
	overflow-x: hidden;
}

/*Section Title（共通）
---------------------------------------------------------------------------*/
.section-title {
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 700;
	text-align: center;
	margin-bottom: 30px;
	line-height: 1.4;
	letter-spacing: 0.08em;
}

/* 上の小さい文字 */
.section-title .section-sub {
	display: block;
	font-size: 0.9rem;
	font-weight: 400;
	opacity: 0.6;
	margin-top: 6px;
	letter-spacing: 0.05em;
}

/* セクション説明文 */
.section-subtitle {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 40px;

	color: #666;
}

.text-white { color: #fff; }



/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	width: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	/*ヘッダーの高さ*/
}

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

	header {
		height: 90px;
		/*ヘッダーの高さ*/
	}

}

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

/*ロゴ画像*/
#logo img {
	display: block;
	width: 200px;
	/*ロゴの幅*/
}

#logo {
	margin: 0;
	padding: 0;
	padding-left: 3vw;
	/*ロゴの左側に空ける余白*/
}

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

	/*ロゴ画像*/
	#logo img {
		width: 300px;
		/*ロゴの幅*/
	}

}

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


/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
/*900px未満では非表示*/
header nav ul {
	display: none;
}

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

	/*メニューブロック全体の設定*/
	header>nav>ul {
		margin-right: 100px;
		/*ハンバーガーアイコンに重ならないように余白*/
		display: flex;
		/*横並びにする*/
	}

	/*メニュー１個あたりの設定*/
	header nav li a {
		display: block;
		text-decoration: none;
		font-size: 0.9rem;
		/*文字サイズ90%*/
		padding: 0.5rem 1rem;
		/*メニュー内の余白。上下、左右へ。*/
	}

	/*ドロップダウンメニュー冒頭の矢印アイコン*/
	header nav i {
		padding-right: 0.5rem;
		/*右に空ける余白*/
	}

}

/*追加設定ここまで*/


/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
	animation: fadeIn 0.5s 0.1s both;
	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}


/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
	position: absolute;
	z-index: 100;
	margin-left: 1rem;
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
	padding: 0.3em 1em;
	/*上下、左右へのメニュー内の余白*/
	margin-top: 4px;
	/*上に空けるスペース。ドロップダウン同士の隙間。*/
	background: var(--base-color);
	/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);
	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	border: 1px solid var(--base-inverse-color);
	/*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	border-radius: 3px;
	/*角を少し丸くする指定*/
}


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

#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menubar a {
	display: block;
	text-decoration: none;
}

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

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

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

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {
	display: none;
}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";
	/*Font Awesomeを使う指示*/
	content: "\f078";
	/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;
	/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;
	/*アイコンとテキストとの間に空けるスペース*/
}

/*メニューブロック内のロゴ画像の幅*/
#menubar .logo {
	width: 200px;
}


/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {
		right: -100vw;
	}

	100% {
		right: 0px;
	}
}

/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;
	overflow: auto;
	z-index: 100;
	right: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 90px 10vw 50px;
	/*ブロック内の余白。上、左右、下への順番。*/
	background: var(--primary-color);
	/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);
	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	animation: animation1 0.2s both;
	/*animation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
.small-screen #menubar li {
	margin: 1rem 0;
	/*メニューの外側に空けるスペース。上下、左右への順番。*/
}

.small-screen #menubar a {
	border-radius: 5px;
	/*角を丸くする指定*/
	padding: 1rem 2rem;
	/*メニュー内の余白。上下、左右へ。*/
	background: var(--base-inverse-color);
	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);
	/*背景色。冒頭のbase-colorを読み込みます。*/
}

/*子メニュー*/
.small-screen #menubar ul ul a {
	background: var(--base-color);
	/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);
	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	border: 1px solid var(--base-inverse-color);
	/*枠線の幅、線種、varは色の指定で冒頭のbase-inverse-colorを読み込みます。*/
	margin-left: 2rem;
	/*左に空けるスペース*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	animation: fadeIn 0s 0.2s both;
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 0px;
	/*右からの配置場所指定*/
	top: 0px;
	/*上からの配置場所指定*/
	padding: 20px 15px;
	/*上下、左右への余白*/
	width: 60px;
	/*幅（３本バーが出ている場合の幅になります）*/
	height: 60px;
	/*高さ*/
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transform-origin: right top;
	background: var(--base-inverse-color);
	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	border-radius: 0px 0px 0px 10px;
	/*角を丸くする指定。左上、右上、右下、左下への順番。*/
}

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

	#menubar_hdr {
		transform: scale(1.5);
		/*1.5倍のサイズに。お好みで。*/
	}

}

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


/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid var(--base-color);
	/*線の幅、線種、varは色のことで冒頭のbase-colorを読み込みます。*/
}

/*×印が出ている状態の3本バーの背景色*/
#menubar_hdr.ham {
	background: #ff0000;
}

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

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

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

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


/* hello
---------------------------------------------------------------------------*/
/*ブロック全体*/
#mainimg {
	background: var(--base-color) url("../images/mainimg_sh.jpg") no-repeat center center / cover;
	width: 100%;
	padding-top: 150%;
	/*アスペクト比2:3（3÷2=1.5）*/
	position: relative;
	overflow: hidden;
}

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

	#mainimg {
		background: var(--base-color) url("../images/mainimg.jpg") no-repeat center center / cover;
		padding-top: 56.25%;
		/*アスペクト比16:9（9÷16=0.5624）*/
	}

}

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

#mainimg>div {
	position: absolute;
	top: 60px;
	/*header分を確保*/
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;

}

/*画面420px以上と、以下の追加指定*/
@media screen and (min-width:420px) {

	#mainimg>div {
		left: var(--space-large);
		align-items: flex-start;
		justify-content: center;
	}

}

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

	#mainimg>div {
		top: 80px;
		/* ← 数字を大きくすると下がる */
	}
}

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


/*テキストのブロック*/
#mainimg p {
	margin: 0;
}

#mainimg .text {
	font-size: clamp(24px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.6;
	text-align: center;
	/*テキストをセンタリング*/
}

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

	#mainimg .text {
		text-align: left;
		/*テキストを左寄せ*/
		font-size: clamp(32px, 3.2vw, 52px);
	}

}

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

#mainimg .catch {
	font-size: 0.7em;
	font-weight: 700;
	margin-bottom: 0.2em;
}

#mainimg .main-copy {
	font-size: 1em;
	font-weight: 800;
}


.check {
	text-align: left;
	display: block;
	/* ←ここ重要 */
	padding-left: 1.6em;
	position: relative;

	font-size: clamp(18px, 1.6vw, 28px);
	font-weight: 600;
	margin-top: 0.4em;
	line-height: 1.2;
}

/* ✔を固定位置に */
.check::before {
	content: "✔";
	position: absolute;
	left: 0;
}


/* ===============================
   メイン画像ボタン
=============================== */

/* ボタン全体 */
#mainimg .btn {
	margin-top: 3vw;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	/* モバイルで折り返し対応 */
}

/* 共通ボタン */
#mainimg .btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-size: clamp(1rem, 1.1vw, 1.2rem);
	/* font-size: 1rem;*/
	font-weight: 600;
	letter-spacing: 0.05em;

	padding: 0.8rem 2rem;
	border-radius: 10px;

	text-decoration: none;
	transition: 0.3s ease;

	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
	/*影 */
}

/* ホバー共通 */
#mainimg .btn a:hover {
	transform: scale(1.05);
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
	/*影 */
}

/* 無料相談 */
#mainimg .btn-primary {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/* LINE応募 */
#mainimg .btn-line {
	background: #06C755;
	color: #fff;
}

#mainimg .btn-line:hover {
	background: #05b44c;
}

/* アイコン */
#mainimg .btn i {
	margin-right: 0.6rem;
	font-size: 1.2em;
}







/* =========================
   GO TOP
========================= */
.go-top {
  background: #eee;
  text-align: center;
  padding: 25px 20px;
}

.go-top-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.go-top-arrow {
  width: 14px;
  height: 14px;
  border-left: 3px solid #333;
  border-top: 3px solid #333;
  transform: rotate(45deg);
  transition: 0.2s;
}

.go-top a:hover .go-top-arrow {
  transform: rotate(45deg) translateY(-4px);
}

.go-top p {
  margin: 0;
  font-size: 14px;
}


/* =========================================
   Footer
========================================= */


.footer {
  background: var(--primary-color);
  color: #fff;
  padding: 60px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

/* ロゴ */
.footer-logo img {
  width: clamp(170px, 34vw, 210px);
}

/* SNS */
.footer-icons {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.footer-icons i {
  font-size: 24px;
}

/* メニュー */
.footer-menu {
  list-style: none;
  padding: 0;
}

.footer-menu li {
  margin-bottom: 10px;
}

.footer-menu a {
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
}

.footer-menu a:hover {
  opacity: 1;
}

/* コピーライト */
.footer small {
  display: block;
  margin-top: 20px;
}

/* モバイル */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
  }

  .footer-right {
    order: 1;
  }

  .footer-left {
    order: 2;
  }
}




/*しくみ
---------------------------------------------------------------------------*/
.sikumi {
	background: #ffffff;/*#f8f8f8 好きな色に */
}


.sikumi-title {
/*	font-size: clamp(24px, 2.4vw, 36px);
	font-weight: 700;*/
	margin-bottom: 20px;
}

/* 横並び */
.sikumi-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

/* 左画像 */
.sikumi-image {
	flex: 1;
}

.sikumi-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* 右テキスト */
.sikumi-text {
	flex: 1;
}

.sikumi-text p {
	margin-bottom: 20px;
}

/* =======================
   モバイル対応
======================= */
@media screen and (max-width: 768px) {

	.sikumi-inner {
		flex-direction: column;
		/* ← 縦並びにする */
		gap: 30px;
	}

	.sikumi-text {
		font-size: 16px;
	}

}


/*   About NEO STREAM セクション
---------------------------------------------------------------------------*/
.about-neo {
	background: #000;
	color: #fff;
	/*padding: clamp(80px, 8vw, 140px) 8vw;*/

}

/* タイトル */
.about-title {

	font-size: clamp(1.8rem, 4.5vw, 4.5rem);
	font-weight: 800;
	letter-spacing: 0.05em;
	margin: 0 0 60px 0;
	line-height: 1.1;
}

/* About の部分 */
.about-small {
	font-weight: 200;
	margin-right: 0.5em;
	opacity: 0.9;
}

/* 本文 */
.about-text {
	max-width: 1000px;
}

.about-text p {
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	line-height: 2;
	margin-bottom: 2rem;
	color: rgba(255, 255, 255, 0.9);
}



/* =========================
   FAQ
========================= */
.faq {
  background: linear-gradient(135deg, #7b2cff, #b066ff);
  padding: 80px 0;
}

.faq-item {
  background: #fff;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

/* 質問 */
.faq-item summary {
  cursor: pointer;
  padding: 20px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* デフォルトの三角消す */
.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Q */
.faq-q {
  font-weight: bold;
  font-size: 18px;
}

/* A部分 */
.faq-a {
  padding: 20px;
  border-top: 1px solid #eee;
  line-height: 1.8;
}

/* Aラベル */
.faq-a-label {
  font-weight: bold;
  margin-right: 10px;
}


.faq-item summary {
  position: relative;
  padding-right: 40px;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 20px;
}

.faq-item[open] summary::after {
  content: "−";
}








/* =========================
   Closing
========================= */
.closing {
  background: #111;
  color: #fff;
}

/* 横並び */
.closing-wrap {
  display: flex;
  align-items: center;
  gap: 60px;
}

/* テキスト */
.closing-text {
  flex: 1;
}

.closing-title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.4;
}

.closing-text p {
  font-size: 1.2rem;
  line-height: 1.9;
  margin-bottom: 18px;
}

/* 画像 */
.closing-image {
  flex: 1;
}

.closing-image img {
  width: 100%;
  border-radius: 20px;
  display: block;
}

/* =========================
   Mobile
========================= */
@media (max-width: 900px) {

  .closing-wrap {
    flex-direction: column;
  }

  .closing-image {
    order: -1;
  }

}


/* =========================================
   NEWS
========================================= */

#news {
  background: #f5f5f7;
}

/* ニュース一覧 */
.news-list {
  max-width: 1050px;
  margin: 0 auto;
}

/* 日付 */
.news-list dt {
  float: left;
  width: 260px;
  font-weight: 600;
  color: #444;
  line-height: 1.4;
}

.news-list dt span {
  display: inline-block;
  margin-left: 14px;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0.05em;
  border: 1px solid #bbb;

  width: 120px;          /* ← 固定幅 */
  text-align: center;    /* ← 文字中央 */
  white-space: nowrap;
}

/* 本文 */
.news-list dd {
  margin-left: 240px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
}



/* 赤ラベル */
.news-list .icon-bg1 {
  border-color: transparent;
  background: #cd0000;
  color: #fff;
}

/* 青ラベル */
.news-list .icon-bg2 {
  border-color: transparent;
  background: var(--primary-color);
  color: var(--primary-inverse-color);
}

/* float解除 */
.news-list::after {
  content: "";
  display: block;
  clear: both;
}

/* モバイル */
@media screen and (max-width:700px) {

  .news-list dt {
    float: none;
    width: auto;
    margin-top: 15px;
  }

  .news-list dd {
    margin-left: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

}







/*サムネイルスライドショー
---------------------------------------------------------------------------*/
/*画像たちを囲むブロック*/
.slide-thumbnail1 .img {
	display: flex;
}

/*画像*/
.slide-thumbnail1 .img img {
	padding: 5px;
	/*画像の余白*/
}

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

.slide-thumbnail1 .rtl {
	animation-name: slide-rtl;
}

.slide-thumbnail1 .ltr {
	animation-name: slide-ltr;
}

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

	100% {
		transform: translateX(-50%);
	}
}

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

	100% {
		transform: translateX(0);
	}
}


/*テキストスライド
---------------------------------------------------------------------------*/
.text-slide-wrapper {
	overflow-x: hidden;
	/*margin-top: calc(-1 * (1.6 * var(--space-large)));     ←本来の位置より上にずらす*/
}

.text-slide {
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	display: flex;
	white-space: nowrap;
	font-size: 15vw;
	/*文字サイズ*/
	opacity: 0.15;
	/*透明度。色が5%出た状態。*/

	animation: slide-rtl 15s linear infinite;
	/*スピード上げた*/
}

.text-slide span {
	padding: 0 10px;
}


/*btn1（ボタン）
---------------------------------------------------------------------------*/
.btn1 a {
	text-shadow: none;
	display: block;
	text-decoration: none;
	background: var(--primary-color);
	/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);
	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
	font-size: 1.4rem;
	/*文字サイズ。140%に。*/
	padding: 0.5rem 2rem;
	/*ボタン内の余白。上下、左右へ。*/
	border-radius: 100px;
	/*角を丸くする*/
	text-align: center;
	/*テキストをセンタリング*/
}

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a {
	background: var(--primary-inverse-color);
	/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);
	/*文字色。冒頭のprimary-colorを読み込みます。*/
}

/*マウスオン時*/
.btn1 a:hover {
	opacity: 1;
	transform: scale(1.05);
	/*105%に拡大*/
	background: var(--primary-inverse-color);
	/*背景色。冒頭のprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);
	/*文字色。冒頭のprimary-colorを読み込みます。*/
}

/*bg-primary-colorの上で使う場合*/
.bg-primary-color .btn1 a:hover {
	background: #fff;
	/*背景色*/
	color: #333;
	/*文字色*/
}

/*矢印アイコン*/
.btn1 a::after {
	font-family: "Font Awesome 6 Free";
	/*Font Awesomeを使う指示*/
	content: "\f0a9";
	/*使いたいアイコン名（Font Awesome）をここで指定*/
	font-weight: bold;
	/*この手の設定がないとアイコンが出ない場合があります*/
	margin-left: 0.5em;
	/*アイコンとテキストとの間に空けるスペース*/
}


/*bg-primary-color
---------------------------------------------------------------------------*/
.bg-primary-color {
	background: var(--primary-color);
	/*背景色。冒頭のprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);
	/*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}


/*bg1
---------------------------------------------------------------------------*/
.bg1 {
	background-color: var(--base-inverse-color);
	/*背景色。冒頭のbase-inverse-colorを読み込みます。*/
	color: var(--base-color);
	/*文字色。冒頭のbase-colorを読み込みます。*/
}


/*bg2
---------------------------------------------------------------------------*/
.bg2 {
	background: #f3f3e9;
	/*背景色*/
}




/*パターン背景
---------------------------------------------------------------------------*/
/*bg-pattern1*/
.bg-pattern1 {
	background-image: url("../images/bg_pattern1.png");
	/*背景パターンの読み込み*/
	background-repeat: repeat;
	background-position: center top;
	background-size: 10px;
	/*サイズ*/
}

/*bg-pattern2*/
.bg-pattern2 {
	background-image: url("../images/bg_pattern2.png");
	/*背景パターンの読み込み*/
	background-repeat: repeat;
	background-position: center top;
	background-size: 10px;
	/*サイズ*/
}



/*
.arrow {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,95 L50,100 L0,95 Z' fill='%23000000'/%3E%3C/svg%3E");
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}
@media screen and (min-width:700px) {
	.arrow {
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,90 L50,100 L0,90 Z' fill='%23000000'/%3E%3C/svg%3E");
		padding-bottom: 150px;
	}
}
.arrow+section {
	padding-top: calc(var(--space-large) + 150px);
	margin-top: -150px;
}
*/

/*list-grid-simple（制作実績ブロック）
---------------------------------------------------------------------------*/
.list-grid-simple .list * {
	margin: 0;
	padding: 0;
}

/*listブロック全体を囲むブロック*/
.list-grid-simple {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	gap: 3rem;
	/*ブロックの間に空けるマージン的な指定*/
}

/*ボックス１個あたり*/
.list-grid-simple .list {
	display: grid;
	position: relative;
}

/*h4見出し*/
.list-grid-simple .list h4 {
	margin-top: 0.5rem;
	/*上に0.5文字分のスペースを空ける*/
	font-weight: normal;
	/*太さを標準に*/
}


/* ===== 画像カード：3角丸 + 右下ラベル（確実に上書き）===== */

.list-grid-simple .list figure {
	position: relative;
	overflow: hidden;
	/* 左上 右上 右下 左下（右下だけ直角） */
	border-radius: 30px 30px 0 30px !important;
}

.list-grid-simple .list figure img {
	width: 100%;
	display: block;
	border-radius: 0 !important;
	/* 親figureに任せる */
}

/* 右下ラベル */
.list-grid-simple .list figure h4 {
	position: absolute !important;
	right: 16px !important;
	/* ← 外側余白 */
	bottom: 16px !important;
	/* ← 外側余白 */

	display: inline-flex !important;
	/* ← 横幅を内容に合わせる */
	width: fit-content !important;
	/* ← 伸びないように */
	max-width: calc(100% - 32px) !important;

	padding: 10px 30px !important;
	/* ← 左右の内側余白 */
	margin: 0 !important;

	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(6px);

	border-radius: 30px !important;
	/* ラベルの角丸 */
	text-align: left !important;
	/* .c の強制センターをここで潰す */
	line-height: 1.2;
	font-weight: 700;
}


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

	/*listブロック全体を囲むブロック*/
	.list-grid-simple {
		grid-template-columns: repeat(4, 1fr);
		/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

}

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


/*list-grid1（３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {
	margin: 0;
	padding: 0;
}

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

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3vw;
		/*ブロックの間に空けるマージン的な指定*/
	}

}

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


/*ボックス１個あたり*/
.list-grid1 .list {
	display: grid;
	margin-bottom: 3rem;
	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 5px;
	/*角を少しだけ丸く*/
	background: #fff;
	/*背景色*/
	color: #333;
	/*文字色*/
	box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.1);
	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
	padding: 2rem;
	/*ボックス内の余白。２文字分。*/
}

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

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0;
		/*下に空けるスペースをなくす*/
	}

}

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


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
	background: #111;
	/*背景色*/
	color: #fff;
	/*文字色*/
}

/*ナンバー（01〜03の飾り番号）*/
.list-grid1 .list .num {
	position: absolute;
	left: -20px;
	/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -30px;
	/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	font-size: 60px;
	/*文字サイズ*/
	line-height: 1;
	font-family: "MonteCarlo", cursive;
	/*フォント指定*/
	opacity: 0.2;
	/*透明度。色を20%出す。*/
}

/*引用符（“）の装飾*/
.list-grid1 .list h4.kazari::before {
	content: "“";
	/*わかりづらいですが、中央にあるのが引用符でこの文字を出力しています。*/
	position: absolute;
	left: -1rem;
	/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -40px;
	/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	opacity: 0.2;
	/*透明度。色を20%出す。*/
	font-size: 60px;
	/*文字サイズ*/
	line-height: 1;
}

/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
	font-size: 1.4rem;
	/*文字サイズを140%に*/
	line-height: 1.6;
	/*行間*/
	margin-bottom: 1rem;
	/*下に１文字分のスペースを空ける*/
	position: relative;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.9rem;
	/*文字サイズを90%に*/
	line-height: 1.6;
	/*行間*/
	font-weight: normal;
}

/*bg-black内のp要素への追加設定*/
.list-grid1 .list.bg-black p {
	color: #999;
	/*文字色*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure.icon {
	margin: 0 auto;
	width: 100px;
	/*画像サイズ*/
	margin-top: -40px;
	/*本来の場所より上にずらす*/
}

/*bg1内のfigureへの追加設定*/
.bg1 .list-grid1 .list figure.icon {
	filter: grayscale(100%) brightness(90%);
	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
	margin-bottom: 1rem;
	/*下に１文字分のスペースを空ける*/
}

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

	/*ボックス内のfigure画像*/
	.list-grid1 .list figure.icon {
		width: 150px;
		/*画像サイズ*/
		margin-top: -50px;
		/*本来の場所より上にずらす*/
	}

}

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





/* =========================================
   CONTACT SECTION
========================================= */

.contact-section {
    background: #f5f5f7;

}

/* 見出し */
.contact-heading {
  text-align: center;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  
  max-width: 640px;
  margin: 0 auto 40px;
}

/* グリッド */
.contact-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 30px;
}

/* PC */
@media (min-width:900px) {/*768pxだと 850pxくらいで手狭なため*/
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================
   カード
========================= */
.contact-card {
  background: #fff;
  border-radius: 30px;
  padding: 50px 40px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  
    border: none;
}

/* タイトル */
.contact-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: #333;
}

/* QR＋文章 */
.contact-body {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

/* QR */
.contact-qr img {
  width: 140px;
  min-width: 140px;
  height: auto;
}

/* 説明 */
.contact-text {
  color: #555;
}

/* ボタン */
.contact-btn {
  align-self: flex-start;
  display: inline-block;
  padding: 16px 40px;
  border-radius: 50px;
  background: linear-gradient(90deg, #7b44ff, #a964ff);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
  margin-top: 30px;
}

/* ボタン hover */
.contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(123,68,255,0.3);
}

/* =========================
   モバイル
========================= */
@media (max-width:600px) {

  .contact-heading {
    font-size: 1.2rem;
  }

  .contact-body {
    gap: 20px;
  }

  .contact-qr img {
    width: 110px;
    min-width: 110px;
  }

  .contact-card {
    padding: 30px 24px;
    min-height: auto;
  }

  .contact-title {
    margin-bottom: 15px;
  }

  .contact-btn {
    margin-top: 15px;
  }
}








/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*ブロック全体*/
.bg-slideup {
	margin-left: calc(-1 * var(--space-large));
	margin-right: calc(-1 * var(--space-large));
}

section>.bg-slideup:first-child {
	margin-top: calc(-1 * var(--space-large));
}

/*画像ボックス*/
.bg-slideup .image {
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	padding: 10vw 20px;
	/*上下、左右へのボックス内の余白。画面幅100% = 100vwです。*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	/*英語テキストと日本語テキストの間のスペース。３文字分。*/
	color: #fff;
	/*文字色*/
}

/* 英語テキスト */
.en-text {
	writing-mode: horizontal-tb;
	font-size: 0.8rem;
	/*文字サイズ80%*/
}

/* 日本語テキスト */
.jp-text {
	writing-mode: vertical-rl;
	text-orientation: upright;
}


/* =========================
   NEO STREAMの強み  /  こんな方におすすめ
========================= */

.strength {
	background: #f7f7f7;
	overflow: hidden;
	/*padding: 100px 5%;*/
}

.strength-title {
	font-size: clamp(24px, 2.4vw, 36px);
	font-weight: 700;
	margin-bottom: 20px;
}

/* =========================
   PC（通常レイアウト）
========================= */

.strength-wrap {
	display: flex;
	align-items: center;
	gap: 60px;

/* containerで統一
	max-width: 1600px;
	width: 100%;
	margin: 0 auto; */
}

/* テキスト */

.strength-text {
	flex: 1;
	max-width: 680px;

	background: #fff;
	padding: 40px;

	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

	position: relative;
	z-index: 2;

	line-height: 1.4;
	/* ←これを追加 */
}

.strength-text .highlight {
	display: inline;
	background: linear-gradient(transparent 60%, #f4e65c 60%);
}


/* 画像 */
.strength-image {
	flex: 0 0 640px;
}

.strength-image img {
	width: 100%;
	border-radius: 12px;
	display: block;
}


/* =========================
   1460px以下
   画像を後ろへ回す
========================= */

@media (min-width:901px) and (max-width:1460px) {

	.strength-wrap {
		display: block;
		position: relative;
		min-height: 520px;
	}

	/* テキスト */

	.strength-text {
		width: calc(100% - 420px);
	}

	/* 画像 */

	.strength-image {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);

		width: 580px;
		z-index: 1;
	}

	.strength-image img {
		width: 100%;
	}

}


/* =========================
   モバイル
========================= */
@media (max-width:900px) {

	.strength {
		padding: 70px 5%;
	}

	.strength-wrap {
		display: flex;
		flex-direction: column;
		gap: 16px;
		/* ←追加：画像とテキストの間 */
	}

	.strength-image {
		order: -1;
		width: 100%;

		flex: none;
		/* ←これ追加 */

		aspect-ratio: 5/3;
		overflow: hidden;
	}

	.strength-image img {
		width: 100%;
		height: 100%;

		object-fit: cover;
		object-position: center top;
	}

	.strength-text {
		margin-top: 1px;
		width: 100%;
		max-width: none;
		padding: 28px;
	}

}


/*   所属ライバー：横スクロール版
---------------------------------------------------------------------------*/
/* 背景ブロック（元のまま使ってOK） */
#products {
	background: #f3f3f3;
	border-radius: 0 120px 0 120px;
	/*padding: 5vw 6vw;*/
}



/* ナビ（矢印＋ドット） */
.products-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin: 20px 0;
}

/* ← → */
.nav-arrow {
	background: none;
	border: none;
	font-size: 26px;
	color: #d35b5b;
	/* 赤っぽい色 */
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.nav-arrow:hover {
	opacity: 0.6;
}

/* ドット */
.nav-dots {
	display: flex;
	gap: 14px;
}

.dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #bbb;
	border: none;
	cursor: pointer;
	padding: 0;
}

.dot.active {
	background: #d35b5b;
}


/* 横スクロール本体 */
.products-scroll {
	display: grid;
	grid-auto-flow: column;

	gap: 24px;
	overflow-x: auto;

	scroll-snap-type: x mandatory;
	scroll-padding: 6px;

	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.products-scroll::-webkit-scrollbar {
	display: none;
}


@media (min-width: 769px) {

	.products-scroll {
		grid-auto-columns: 21%;
		/* 23% × 4 = 92%
       残りがチラ見せ */
	}
}

@media (max-width: 768px) {

	.products-scroll {
		grid-auto-columns: 46%;
		/* 45% × 2 = 90%
       gap含めて少し余るので次のカードが見える */
	}

}

/* 各アイテム */
.p-item {
	scroll-snap-align: start;
}

/* カード */
.p-card {
	margin: 0;
	position: relative;
	border-radius: 28px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	aspect-ratio: 4 / 4;
	/* 高さを揃える */
}

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

/* 画像の中のラベル */
.p-label {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.92);
	color: #333;
	padding: 1px 14px;
	/* ← ここが余白 */
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* もっと見るボタンは下に */
.products-more {
	margin-top: 22px;
}

/* モバイル調整 */
@media (max-width: 768px) {
	#products {
		border-radius: 0 60px 0 60px;
		padding: 8vw 5vw;
	}

	.products-nav {
		margin: 12px 0 10px;
	}


	.p-label {
		bottom: 8px;
		font-size: 0.9rem;
		padding: 1px 10px;
		/* ← ここが余白 */
	}
}


/* ===============================
   3 Video Carousel
=============================== */

.video-carousel {
	max-width: 1600px;
	margin: 40px auto;
	padding: 0 6vw;
	/*  */
}

.video-carousel-container {
	position: relative;
	display: flex;
	align-items: center;

	padding: 0;
	/* ← ここ削除 */
}

.video-carousel-wrapper {
	overflow: hidden;
	flex: 1;
}

.video-carousel-track {
	display: flex;
	transition: transform 0.6s ease;
}

.vc-slide {
	position: relative;
	/* ← 重要 */
	flex: 0 0 33.333%;
	padding: 0 6px;
}

.vc-slide video {
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}

/* TikTokロゴ */
.vc-logo {
	position: absolute;
	top: 0;
	right: 0;

	width: 50%;
	/* 動画幅の半分 */
	max-width: 240px;
	/* PCで巨大化防止 */

	pointer-events: none;
	/* クリック無効 */
}

.vc-logo-bottom {
	top: auto;
	/* ← 上指定をリセット */
	bottom: 0;
	right: 0;
}

@media (max-width: 768px) {

	.vc-slide {
		flex: 0 0 100%;
		padding: 0 4px;
	}

	.vc-slide video {
		aspect-ratio: 9 / 16;
	}

}

/* ===== 矢印（外側） ===== */

.vc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 36px;
	background: none;
	border: none;
	cursor: pointer;
	color: #999;
	z-index: 10;
}

/* 外側に出す */
.vc-prev {
	left: -40px;
}

.vc-next {
	right: -40px;
}

.vc-arrow:hover {
	color: var(--primary-color);
}

/* ===== ドット ===== */

.vc-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.vc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	cursor: pointer;
}

.vc-dot.active {
	background: var(--primary-color);
}


/* ===============================
   Event セクション専用
=============================== */
/* PCで3列に変更 */
@media screen and (min-width:1024px) {

	#event .list-grid-simple {
		grid-template-columns: repeat(3, 1fr);
	}

}

/* カード画像を 3:2 に */
#event .list-grid-simple .list figure {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 30px;
}

#event .list-grid-simple .list figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* モバイルは1列 */
@media screen and (max-width:768px) {

	#event .list-grid-simple {
		grid-template-columns: 1fr;
	}

}




/* =========================
   Company
========================= */

/*画面幅700px以上の追加指定  c2（２カラムレイアウト用）*/
@media screen and (min-width:700px) {

	.c2 {
		display: flex;
		gap: 2rem;
	}

	/*左側のタイトルブロックの幅*/
	.c2 .title {
		width: 16%;
	}

	/*右側のテキストブロック*/
	.c2 .text {
		flex: 1;
	}

}

#company {
  background: #f7f7f7;

}

/* 白BOX */
.company-box {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* テーブル */
.company-table {
  width: 100%;
  border-collapse: collapse;
}

.company-table th,
.company-table td {
  padding: 14px 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.company-table th {
  width: 180px;
  /*font-weight: 700;*/
  color: #555;
}

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

  #company .title {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
  }

  #company .title h2 {
    align-items: center;
  }

  #company .title span {
    text-align: center;
  }

}




/*list-normal1（「お客様の声」「応募の流れ」ブロックで使用）
---------------------------------------------------------------------------*/
.list-normal1 * {
	margin: 0;
	padding: 0;
}

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

	/*テキストブロック*/
	.list-normal1 .text {
		flex: 1;
	}

	/*画像とテキストの左右を入れ替えたい場合（600px以上のみ使用可能）*/
	.reverse {
		flex-direction: row-reverse;
		background-position: left bottom !important;
	}

}

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


/*ブロック１個あたり*/
.list-normal1 .list {
	background: var(--base-color) url("../images/bg-dot.png") no-repeat right bottom / 200px;
	color: var(--base-inverse-color);
	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	padding: 2rem;
	margin-bottom: 2rem;
	border-radius: 40px;
	/* 角丸に */
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
	position: relative;
}

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

	/*ブロック１個あたり*/
	.list-normal1 .list {
		display: flex;
		gap: 2rem;
		/*画像とテキストの間のスペース。２文字分。画像がない場合はこれは適用されません。*/
	}

}

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


/*画像ブロック*/
.list-normal1 figure {
	width: 30%;
	/*幅*/
	margin-bottom: 1rem;
	/*下に空けるスペース*/
}

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

	/*画像の下マージンのリセット*/
	.list-normal1 figure {
		margin-bottom: 0;
	}

}

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


/*h4見出し*/
.list-normal1 h4 {
	font-size: 1.2rem;
	/*文字サイズ200%*/
	line-height: 1.5;
	/*行間*/
	margin-bottom: 1rem;
	/*下に空けるスペース*/
}

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

	.list-normal1 h4 {
		font-size: 2rem;
		/*文字サイズ200%*/
		line-height: 1.8;
		/*行間*/
	}

}

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


/*h4内にアイコンを配置した場合（制作の流れの見出し左のアイコン）*/
.list-normal1.flow h4 i {
	margin-right: 1rem;
	/*アイコンとテキストとの間の余白*/
}

/*名前*/
.list-normal1 .name {
	text-align: right;
	/*右寄せ*/
	margin-top: 1rem;
	/*上に空けるスペース*/
}

/*制作の流れで使用しているブロック間の「▼」の矢印*/
.list-normal1.flow .list::after {
	content: "▼";
	/*このテキストを出力します*/
	position: absolute;
	left: 50%;
	/*左からの配置場所。厳密ではありませんが、文字が小さいので問題ないかと。*/
	bottom: -2rem;
	/*下からの配置場所。マイナスがつくので本来の場所とは逆向きに移動。*/
	transform: scaleX(1.5);
	/*横幅を150%に*/
	opacity: 0.5;
	/*透明度。色が50%出た状態。*/
}

/*最後のボックスだけ下矢印を出さない*/
.list-normal1.flow .list:last-child::after {
	content: none;
}

/* ==========================
   LINE固定バナー
========================== */
.line-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	width: 220px;

	opacity: 0;
	transform: translateY(20px);
	transition: 0.4s ease;
	pointer-events: none;
}

body.scrolled .line-float {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.line-float.hide {
	opacity: 0;
	pointer-events: none;
}

@media (max-width:768px) {
	.line-float {
		width: 150px;
		right: 12px;
		bottom: calc(20px + env(safe-area-inset-bottom));
	}
}

.line-float img {
	width: 100%;
	display: block;
	border-radius: 12px;
}











/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;
	/*太字に*/
	padding: 0.5rem 1rem;
	/*ボックス内の余白*/
	background: var(--base-inverse-color);
	/*背景色*/
	color: var(--base-color);
	/*文字色*/
	margin-bottom: 1rem;
	/*下に空けるスペース*/
	border-radius: 5px;
	/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	/*幅*/
	border-top: 1px solid #ccc;
	/*テーブルの一番上の線。幅、線種、色*/
	margin-bottom: 2rem;
	/*テーブルの下に空けるスペース。２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #ccc;
	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 td,
.ta1 th {
	word-break: break-all;
	background: var(--base-color);
	/*背景色。冒頭のbase-colorを読み込みます。*/
	color: var(--base-inverse-color);
	/*文字色。冒頭のbase-inverse-colorを読み込みます。*/
	text-align: left;
	/*左よせにする*/
	padding: 0.5rem;
	/*余白*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 25%;
	/*幅*/
	text-align: center;
	/*テキストをセンタリング*/
}





/* =========================
   他社比較テーブル
========================= */

.ta1.plan,
.ta1.plan td,
.ta1.plan th {
	text-align: center;
	border: 2px solid var(--base-inverse-color);
	padding: 0.6rem;
}

/* PC表示 */
@media screen and (min-width:801px) {

	.ta1.plan,
	.ta1.plan td,
	.ta1.plan th {
		font-size: 1.2rem;
		padding: 1rem;
	}

}

/* テーブル全体 */
.ta1.plan {
	table-layout: fixed;
	width: 100%;
}

/* ヘッダー */
.ta1.plan th {
	position: relative;
	overflow: hidden;
}

/* NEO STREAM列 */
.ta1.plan th:nth-child(2),
.ta1.plan td:nth-child(2) {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/* 他社列 */
.ta1.plan th:nth-child(3),
.ta1.plan td:nth-child(3) {
	background: #efe3fc;
}

/* ロゴ */
#plan .ta1 th img {
	width: clamp(100px, 14vw, 160px);/*clamp(80px, 12vw, 140px);*/
	height: auto;
}

#plan .ta1 th span {
	font-size: 1.3em;
}

/* =========================
   モバイル
========================= */

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

	.scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 表の最低幅 */
	.scroll .ta1.plan {
		min-width: 320px;
		table-layout: fixed;
	}

	/* セル */
	.ta1.plan th,
	.ta1.plan td {
		white-space: nowrap;
		min-width: 100px;
		font-size: 0.95rem;
	}

	/* ロゴサイズ */
	#plan .ta1 th img {
		width: 80px;
	}
}










/*調整用スタイル
---------------------------------------------------------------------------*/
.padding0 {
	padding: 0 !important;
}

.padding-lr0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/*マニュアルページ用
---------------------------------------------------------------------------*/
#manual #container {
	all: unset;
}

.manual {
	background: #fff;
	color: #333;
	padding: 5vw;
}

.manual .look {
	background: #eee;
}

.manual h2 {
	margin-top: 2rem;
	font-size: 2rem;
	text-align: center;
}

.manual h3 {
	line-height: 3;
	margin-top: 2rem;
}

.manual h3 span {
	background: linear-gradient(transparent 60%, yellow);
}

.manual h3+p {
	margin-top: -0.5rem;
}

.manual.margin-left {
	padding-left: 300px;
}

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

	.manual.margin-left {
		padding-left: 4vw;
	}

}

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


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

.color-check,
.color-check a {
	color: #ff0000 !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;
}

.mb0 {
	margin-bottom: 0px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb-space-large {
	margin-bottom: var(--space-large) !important;
}

.look {
	line-height: 1.5 !important;
	display: inline-block;
	padding: 5px 10px;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	margin: 5px 0;
	word-break: break-all;
}

.small {
	font-size: 0.75em;
}

.large {
	font-size: 2em;
	letter-spacing: 0.1em;
}

.pc {
	display: none;
}

.dn {
	display: none !important;
}

.block {
	display: block !important;
}

.inline-block {
	display: inline-block !important;
}

.relative {
	position: relative;
}

.marker {
	background: linear-gradient(transparent 50%, yellow);
}

pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

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

	.ws {
		width: 48%;
		display: inline;
	}

	.sh {
		display: none;
	}

	.pc {
		display: block;
	}

}

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


/*最後にモバイルでの文字サイズを上書きして保証
---------------------------------------------------------------------------
@media screen and (max-width:768px){

  body {
    font-size: 1rem;
  }

  p,
  li,
  .text {
    font-size: 1rem;
  }

  small,
  .small {
    font-size: 0.85rem;
  }
}
*/