@charset "UTF-8";

@media only screen and (max-width : 768px) {
	/*-----------------------
スマホ・タブレット用レイアウト（768px以下スクリーン）
----------------------*/

	/*------------------
共通設定(スマホ)
-------------------*/

	/* はみ出した領域は非表示にする*/
	html {
		overflow-y: scroll;
		overflow-x: hidden;
	}

	html,
	body {
		width: 100%;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}

	/*画像サイズの調整*/
	img {
		height: auto;
		max-width: 100%;
	}

	/*H2タグ*/
	h2 {
		margin: 0.5em 0 0.5em;
		font-size: clamp(1.1rem, 5vw, 2.2rem);
		font-weight: bold;
		text-align: center;
	}

	/*H3タグ*/
	h3 {
		margin: 0 0 0.5em;
		padding: 0.3em 0.6em;
		font-size: clamp(1rem, 5vw, 2.2rem);
		font-weight: bold;
	}


	/*--------------------------------------------------------
全体レイアウト/背景設定(スマホ・タブレット)
--------------------------------------------------------*/

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

	/*記事(ボディ)エリア*/
	.article {
		background-color: #fff;
		/*スマホの場合はカラムの線を消す*/
		border-left: none;
		border-right: none;
	}

	/*記事(ボディ)エリアの行間*/
	.article p {
		line-height: 1.8em;
	}

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

	/*カラム全体の幅はスマホの場合固定*/
	.header_inr,
	.article,
	.atcl_inr,
	.top_image_in {
		width: 100%;
		margin: 0 auto
	}

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

	.gamen_pc {
		display: none;
	}

	.gamen_rps {
		display: block;
	}

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

	/*上部固定ヘッダー全体*/
	.header {
		/* position: sticky; */
		/* position: -webkit-sticky; */
		/* top: 0; */
		background-color: #000;
		border-bottom: 1px;
		overflow: auto;
	}

	/*ヘッダーロゴ*/
	.header_logo {
		float: left;
		width: 35%;
		margin-top: 2px;
		margin-left: 10px;
	}

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

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

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

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



	.top_image {
		height: auto;
		padding-top: 1em;
		padding-bottom: 4em;
	}

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

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

	.top_text02 {
		font-size: 1.5em;
	}

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

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

	}

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

	.top_image p {
		color: #fff;
	}

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

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

	.IGNA_title h2 {
		color: #fff;

	}

	.IGNA_title02 {
		padding-top: 1.5em;
	}

	.sec_IGNA_development {
		text-align: center;
	}

	/*----- 
開発エリア 
-----*/
	.IGNA_development01 {
		padding-bottom: 4em;
	}


	.IGNA_development02 {
		padding-top: 2em;
	}

	.development_area01,
	.development_area02 {
		font-size: clamp(0.9rem, 2.5vw, 1.4rem);
	}

	.development_area01 {
		padding-top: 2.5em;
	}

	.development_area02 {
		padding-top: 1em;
	}

	.slide_text_cntnr {
		font-size: clamp(0.9rem, 2.5vw, 1.4rem);
		font-weight: bold;
	}

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


	.IGNA_development_img {
		gap: 0.5em;
	}

	.IGNA_development_img img {
		max-width: 45%;
		height: auto;
	}

	/*----- 
理由エリア 
-----*/


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

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

	.reason_area {
		flex-direction: column;
		gap: 10px;
		padding-top: 2em;
		margin-bottom: 1em;
	}

	.reason_cntnr {
		width: 90%;
		padding: 1em;
		margin-left: 1.5em;
		margin-right: 1.5em;

	}

	.reason_img img {
		width: 90%;
	}

	.reason_mds {
		text-align: left;
	}

	.reason_mds img {
		width: 20%;
	}

	.reason_text {
		text-align: left;
		padding-left: 0em;
		padding-right: 0em;
	}

	/*----- 
ヒットパターンエリア 
-----*/



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



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

	.hit_pattern_text {
		padding-left: 1em;
		padding-right: 1em;
	}

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

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

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

	.lineup_btn {
		margin-right: 0.5em;
	}

	/*----- 
使い方エリア 
-----*/


	.IGNA_usage_inr {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.usage_text {
		text-align: left;
		padding-left: 1em;
		padding-right: 1em;
	}



	.usage_img img {
		width: 60%;
	}

	/*----- 
カラーエリア 
-----*/
	.IGNAcolor_cntnr {
		flex-direction: column;
		gap: 15px;
		margin-bottom: 2em;
		padding-top: 2em;
		justify-content: center;
		padding-bottom: 2em;
	}


	.IGNAcolor_img {
		max-width: 100%;
		display: flex;
		justify-content: center;
	}

	.IGNAcolor_img img {
		width: 70%;
		/* 必要に応じてサイズ調整 */
	}

	.IGNAcolor_chartimg {
		max-width: 100%;
		display: flex;
		justify-content: center;
	}

	.IGNAcolor_chartimg img {
		width: 50%;
		/* レーダーチャートも中央揃え＋サイズ調整 */
	}

	.IGNAcolor_mds {
		font-weight: bold;
		text-align: center;
		width: 100%;
		font-weight: bold;
		font-size: 1.2em;
	}

	.IGNAcolor_textcntnr {
		padding-left: 1em;
		padding-right: 1em;
	}


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

	/* 「＞」の余白をしっかり取る */
	.btn_igna_last::after {
		display: none;
	}

	.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: 1em;
	}


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

	.footer {
		padding: 2em 0em 2em;
		font-size: 1em;
	}



}