@charset "UTF-8";
/*------------------------------
PC用レイアウト（768px以上スクリーン）
------------------------------*/

/*----------
共通設定(PC)
-----------*/

/* 初期スタイル調整 */
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* body全体の初期スタイル調整 */
body {
	font-size: 62.5%;
	line-height: 1.5;
	color: #333;
	background-color: #fff;
	-webkit-text-size-adjust: 100%;
	/* CSS例：英字＋和文の組み合わせ */
	font-family: "Libre Baskerville", "Noto Serif JP", serif;


}

/*リンク文字の設定*/
a {
	text-decoration: underline;
}

a:link,
a:visited {
	/* color: #39f; */
}

a:hover,
a:active {
	color: #f60;
}

p {
	margin: 0 !important;
	padding: 0 !important;
	font-feature-settings: "palt";
}

section {
	clear: both;
	/* 配置設定をクリアにしておくため（初期で設定している左右配置をクリアにする） */
	overflow: auto;
	/* 要素の内容が要素自体の領域を超えた場合「aute」 */
}

/* -------------------------------------
見出しタグ設定（PC)
--------------------------------------*/
h2 {

	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
}

h3 {
	margin: 0 0 0.5em;
	padding: 0.3em 0.6em;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}


/*カラムが狭くなってもテーブルタグがはみ出ないようにする*/
table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	word-break: break-all;
	word-wrap: break-word;
}

/* <section> 間の隙間（margin）をなくすため */
h2,
p {
	margin-top: 0;
	margin-bottom: 0;
}


/* 自動カーニング */
.selector {
	font-feature-settings: "palt";
}


/*--------------------------------------------------------
全体レイアウト/背景設定（PC）
--------------------------------------------------------*/

/*全体エリア(全体背景の設定はここ)*/
.main {
	background-color: #fff;
}


/*記事(ボディ)エリアの行間*/
.atcl_inr p {
	line-height: 1.6em;
	margin-bottom: 1em;
}

/*記事(ボディ)エリアのフォントサイズ*/
.article {
	font-size: 1.7em;
}

/*カラム全体の幅を変更する*/
.header_inr,
.atcl_inr,
.top_image_in {
	width: 950px;
	margin: 0 auto
}

/*PC画面とスマホ画面の切り替え*/

.gamen_pc {
	display: block;
}

.gamen_rps {
	display: none;
}

/*--------------------------------------------------------
上部固定ヘッダー設定
--------------------------------------------------------*/

/*上部固定ヘッダー全体*/
.header {
	/* position: sticky; */
	/* ポジションがピタッとくっつく設定 */
	/* position: -webkit-sticky; */
	top: 0;
	/* z-index: 5000; */
	background-color: #000;
	border-bottom: 1px;
	overflow: auto;
}

/* ヘッダー内部をカラム幅にする */
.header_inr {
	max-width: 950px;
	margin: 0 auto;
	overflow: hidden;
}

/*ヘッダーロゴ*/
.header_logo {
	float: left;
	width: 22%;
	margin: 1em 0em 1em;
}

/*ヘッダー 電話ボタン*/
.header_tel {
	width: 25%;
	float: right;
	margin: 0.5em 0.5em 0em;
}

/*ヘッダー 問い合わせボタン*/
.header_mail {
	width: 18%;
	float: right;
	margin: 0.8em 0.3em 0em;
}

/*ヘッダー内の画像はエリア幅に合わせる*/
.header_logo img,
.header_tel img,
.header_mail img {
	width: 100%;
}

/*------------------------
ファーストビュー設定
-------------------------*/

.top_image {
	position: relative;
	background-color: #000;
	/* background: url(../images/top_image_back.jpg) center top no-repeat #fff; */
	height: auto;
	padding-top: 2em;
	text-align: center;
	padding-bottom: 10em;
}

.top_text_main {
	font-size: 4.5em;
	font-weight: bold;
}

.top_text01 {
	font-size: 4em;
	font-weight: bold;
}

.top_text02 {
	font-size: 2.5em;
}
.IGNA_movie{
	padding-top: 2em;
	padding-bottom: 2em;
}


.TOP_cntnr {
	padding-top: 1em;
	line-height: 4em;
}

.IGNA_official img {
	margin: 0 auto;
	width: 80%;

}

.IGNA_official {
	position: absolute;
	top: 92%;
	/* または任意の数値に調整 */
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

.top_image p {
	color: #fff;
}


/* --------------------------
セクション設定
----------------------------*/

.IGNA_title {
	background-color: #000;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

.IGNA_title h2 {
	color: #fff;

}

.IGNA_title02 {
	padding-top: 2em;
}

.sec_IGNA_development {
	text-align: center;
}

/*----- 
開発エリア 
-----*/
.IGNA_development01 {
	position: relative;
	background: url(../images/haikei_IGNA_development01.png) center top no-repeat #fff;
	background-size: cover;
	overflow: hidden;
	padding-bottom: 4em;
}

/* グラデーションのぼかし用オーバーレイ */
.IGNA_development01::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	/* ぼかしの高さ */
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
	z-index: 1;
	pointer-events: none;
}

.IGNA_development02 {
	position: relative;
	background: url(../images/haikei_IGNA_development02.png) center bottom no-repeat #fff;
	background-size: cover;
	overflow: hidden;
	padding-top: 3em;
}

/* グラデーションのぼかし用オーバーレイ */
.IGNA_development02::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	/* ぼかしの高さ */
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
	z-index: 1;
	pointer-events: none;
}


.development_area01,
.development_area02 {
	font-size: 1.2em;
}

.development_area01 {
	padding-top: 2em;
}

.development_area02 {
	padding-top: 1.3em;
}

.development_area01 p,
.development_area02 p {
	line-height: 2em;
	font-weight: bold;
	text-shadow:
		-1px -1px 0 white,
		1px -1px 0 white,
		-1px 1px 0 white,
		1px 1px 0 white;
}

.slide_text_cntnr {
	font-size: 1.4em;
	font-weight: bold;
}

.slide_text {
	border-bottom: 2px solid #b8953a;
	display: inline-block;
}


.IGNA_development_img {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3em;
}

.IGNA_development_img img {
	max-width: 220px;
	height: auto;
}


/*----- 
理由エリア 
-----*/
.IGNA_reason {
	margin: 0 auto;
	background-color: #f8f8f8;
}

.custom_video {
	width: 550px;
	height: 300px;
	object-fit: cover;
	display: block;
	margin: 0 auto;
	padding-top: 1em;
}

.custom_video {
	filter: brightness(0.6) contrast(0.65);
}

.reason_area {
	display: flex;
	gap: 20px;
	padding-top: 2em;
	margin-bottom: 1em;
}

.reason_cntnr {
	background-color: #fff;
	text-align: center;
	width: 33%;
	padding: 1em;

}

.reason_img img {
	width: 70%;
}

.reason_mds {
	text-align: left;
}

.reason_mds img {
	width: 40%;
}

.reason_text {
	text-align: left;
}

/*----- 
ヒットパターンエリア 
-----*/
.IGNA_hit_pattern {
	background: url(../images/haikei_IGNA_black.png) center #333;
	background-size: cover;
}


.hit_pattern_cntnr {
	display: flex;
	margin: 0 auto;
	gap: 2em;
	align-items: flex-start;
	padding: 2em 1em;
}

.hit_pattern_img {
	flex: 0 0 40%;
}

.hit_pattern_img img {
	width: 100%;
	height: auto;
	display: block;
}

.hit_pattern_text {
	flex: 1;
	color: #fff;
}

.border_HP {
	width: 100%;
	height: 2px;
	background-color: #b8953a;
	margin: 0.5em 0;
	/* 上下の余白 */
}

/*----- 
ラインナップエリア 
-----*/
.lineup_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2em;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 2em;
}

.lineup_cntnr {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
}

.lineup_text {
	flex: 3;
	text-align: left;
}

.lineup_text p {
	white-space: nowrap;
}

.lineup_img img {
	height: auto;
	width: 80%;
	flex: 2;
}

/* ボタンCSS */

.lineup_btn{
	text-align: right;

}
.btn_igna {
  display: inline-block;
  padding: 0.6em 4.5em 0.6em 1.5em; 
  border: 1px solid #333;
  color: #333;
  background-color: transparent;
  text-decoration: none;
  font-size: 0.8em;
  position: relative;
  transition: all 0.3s ease;
}

/* 矢印を「＞」として追加している場合 */
.btn_igna::after {
  content: "＞";
  position: absolute;
  right: 1.5em; /* ← もっと右に移動させて間隔を広げる */
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  color: #333;
}

.btn_igna:visited,
.btn_igna:active,
.btn_igna:focus {
  color: #333;
  text-decoration: none;
}

.btn_igna:hover {
  background-color: #000;
  color: #fff;
  border-color: #fff;
  text-decoration: none;
}

.btn_igna:hover::after {
  color: #fff;
}



/*----- 
使い方エリア 
-----*/
.IGNA_usage {
	background-color: #f6f6f6;
	padding-bottom: 2em;
}

.IGNA_usage_inr {
	display: flex;
	gap: 20px;
	padding-top: 1em;
}

.usage_text {
	text-align: left;
}

.usage_text h2 {
	font-size: 1.3em;
	text-align: left;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.usage_img img {
	width: 80%;
}

.IGNA_usage {
	background-color: #f6f6f6;
	padding-bottom: 2em;
	position: relative;
	overflow: hidden;
}

/* 三角形共通スタイル */
.section_triangle_W,
.section_triangle_Gr {
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	/* 底辺の半分 */
	border-right: 100px solid transparent;
	/* 底辺の半分 */

	transform: rotate(180deg);
	margin: auto;
	/* 中央揃え */
}

.section_triangle_W {
	border-bottom: 30px solid #fff;
}

.section_triangle_Gr {
	border-bottom: 30px solid #f6f6f6;
}


/*----- 
カラーエリア 
-----*/
.IGNAcolor_cntnr {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 2em;
	padding-top: 2em;
}

.IGNAcolor_img {
	flex: 2;
	/* 画像枠の比率 */
	max-width: 240px;
}

.IGNAcolor_img img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.IGNAcolor_textcntnr {
	flex: 3;
	/* テキスト枠の比率 */
	padding-top: 0.5em;
}

.IGNAcolor_chartimg {
	flex: 2;
	/* レーダーチャートの比率 */
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 200px;
}

.IGNAcolor_chartimg img {
	width: 100%;
	height: auto;
	object-fit: contain;
}


/*----- 
CVエリア 
-----*/
.cv_area {
	background: url(../images/haikei_IGNA_black.png) center #333;
	background-size: cover;
	margin: 0 auto;
	text-align: center;
padding-bottom: 2em;
}

.cv_text{
	padding-top: 2em;
	padding-bottom: 1.5em;
}
.cv_text p{
color: #fff;
font-size: 1.3em;
}


/*--- ボタンエリア ---*/
.btn_igna_last {
  display: inline-block;
  padding: 0.5em 5.5em 0.5em 2em; 
border: 5px double #000; 
 color: #333;
  background-color: #fff;
  text-decoration: none;
  font-size: 1em;
  position: relative;
  transition: all 0.3s ease;
}

/* 「＞」の余白をしっかり取る */
.btn_igna_last::after {
  content: "＞";
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1em;
  color: #333;
}

.btn_igna_last:visited,
.btn_igna_last:active,
.btn_igna_last:focus {
  color: #333;
  text-decoration: none;
}

.btn_igna_last:hover {
  background-color: #000;
  color: #fff;
border: 2px solid #fff; 
  text-decoration: none;
}

.btn_igna_last:hover::after {
  color: #fff;
}
.btn_text{
	font-size: 1.3em;
}



/*---------
フッター部分
-------*/

.footer {
	background: #000;
	padding: 2em 0 0.5em;
	text-align: center;
	font-size: 1.4em;
	color: #fff;
}

.footer a {
	color: #fff;
}

/*スマホ用下部固定メニュー*/
.fix_menu_smartphone {
	display: none;
}