@charset "utf-8";

/************************************************************************************************************************
　999px以下
************************************************************************************************************************/
@media (max-width: 999px) {
	#header_inner{ padding-right: 1%; }
	#header_inner, #slick, .head_img, .main_inner{ width: 100%; }

	.pan a, .pan span{ font-size: 13px; }

	h2.h2_kaso span{ font-size: 45px; }

	.main_inner{ padding: 0 3%; }

	/* TOP 強み */
	.ul_tsuyomi li .tsuyomi_btm .tsuyomi_text{ height: 200px; }
}



/************************************************************************************************************************
　900px以下
************************************************************************************************************************/
@media (max-width: 900px) {
	.pan a, .pan span{ font-size: 12px; }

	nav#navi_top ul.navi_parent > li > a{ padding: 5px 0; font-size: 14px; }
	nav#navi_top ul.navi_child li a{ display: block; padding: 4px 0 4px 1rem; font-size: 12px; }
}



/************************************************************************************************************************
　800px以下
************************************************************************************************************************/
@media (max-width: 800px) {
	.pan a, .pan span{ font-size: 10px; }

	h2.h2_kaso span{ font-size: 40px; }

	/* お問合わせボタン */
	.btn_contact a{ padding: 6px 15px 6px 20px; border-radius: 18px; font-size: 16px; }
	.btn_contact a i{ margin-right: 8px; }

	nav#navi_top ul.navi_parent > li > a{ padding: 5px 0; font-size: 12px; }
	nav#navi_top ul.navi_child li a{ display: block; padding: 4px 0 4px 0.5rem; font-size: 11px; }

	h2.h2_style{ font-size: 28px }
	h3.h3_style{ font-size: 22px; }

	/* TOP 強み */
	.ul_tsuyomi li .tsuyomi_btm .tsuyomi_text{ height: 240px; }
}



/************************************************************************************************************************
　768px以下（iPad mini）
************************************************************************************************************************/
@media (max-width: 768px) {
	.ul_tsuyomi li{ margin-bottom: 20px; }
	.ul_tsuyomi li:last-child;{ margin-bottom: 0; }
	.ul_tsuyomi li .tsuyomi_btm .tsuyomi_text{ height: 80px; }

	/* TOP 強み */
	.ul_tsuyomi li .tsuyomi_btm .tsuyomi_text{ height: 260px; }

	/* お問合わせ */
	[name='inquiry']{ height: 300px; }
}


/************************************************************************************************************************
　700px以下
************************************************************************************************************************/
@media (max-width: 700px) {
	h1{ font-size: 10px; }

	nav#navi_top ul.navi_parent > li > a{ padding: 5px 0; font-size: 11px; }
	nav#navi_top ul.navi_child li a{ display: block; padding: 3px 0 3px 0.8rem; font-size: 10px; }

	h2.h2_style{ font-size: 26px }
	h2.h2_kaso span{ font-size: 35px; }
	h3.h3_style{ font-size: 20px; }
	h3.h3_style_kaso{ font-size: 20px; }
	h4{ font-size: 18px; }
	h5, .h5_link a{ font-size: 18px; }

	/* TOP 強み */
	.ul_tsuyomi li .tsuyomi_btm .tsuyomi_text{ height: 280px; }
}



/************************************************************************************************************************
　600px以下 ※ハンバーガーメニュー表示、ナビ隠し
************************************************************************************************************************/
@media (max-width: 600px) {
	.sp_only{ display: block; }
	.pc_only{ display: none; }

	#header_r{ justify-content: flex-start; }
		#header_tel a{ margin-right: 20px; }
		#header_tel a i{ margin-right: 5px; }
		#header_tel #btn_spMenu.tcon{ display: block !important; }


	nav#navi_top{ width: 400px; height: 100%; padding: 10px 10px 20px; background: #000; position: fixed; top: 0; left: -400px; z-index: 2; /* headerがz-index:1 */
		-moz-opacity: 0.9;
		opacity: 0.9;
	}
	nav#navi_top ul.navi_parent{ display: block; overflow: auto; }
	nav#navi_top ul.navi_parent > li{ width: 100%; border-bottom: 1px dotted #ccc; float: none; }
	nav#navi_top ul.navi_parent > li > a{ padding: 10px 5px 10px 15px; background: none; color: #fff; font-size: 16px; text-align: left; }
	nav#navi_top ul.navi_parent > li > a.active, nav#navi_top ul.navi_parent > li a:hover{ background: transparent; border-right: none; color: var(--yel1); }
	nav#navi_top ul.navi_parent > li > a i{ margin-right: 10px; }

	/* 営業のご案内、パディング修正 */
	nav#navi_top ul.navi_parent > li:nth-child(2) > a{ padding-bottom: 5px; }

	/* 子ナビ */

	nav#navi_top ul.navi_child{ display: block; margin-bottom: 15px; background: transparent; position: static; }
	nav#navi_top ul.navi_child li > a{ padding: 5px 0 5px 2rem; font-size: 14px; }
	nav#navi_top ul.navi_child li > a:hover, nav#navi_top ul.navi_child li > a.active{ background: transparent; color: var(--yel1); }
	nav#navi_top ul.navi_child li > a:hover:before, nav#navi_top ul.navi_child li > a.active:before{ color: var(--yel1); }
	nav#navi_top ul li a{ background: transparent !important; } /* 「営業のご案内」ページ以外から、「営業のご案内」の小ページタップ時、親の<a>に赤背景が付くのを修正 */


	/* TOP 強み */
	.ul_tsuyomi li .tsuyomi_btm .tsuyomi_text{ height: 300px; }

	/* 制作実績 */
	.ul_results li{ margin-bottom: 10px; padding-bottom: 10px; }
	.ul_results li .img{ width: 25%; }
	.ul_results li .results_list_r{ width: 72%; }
	.ul_results li .results_list_r .h4_results{ margin-bottom: 3px; font-size: 16px; }
	.ul_results li .results_list_r div{ font-size: 14px; }
}



/************************************************************************************************************************
　576px以下（SP）※1カラム
************************************************************************************************************************/
@media (max-width: 576px) {
	.sp_img{ margin: 20px 0; text-align: center; }
	.sp_img img{ width: 70%; }

	.anc{ position: absolute; top: -100px; }

	#sidebar{ margin-top: 50px; } 

	.pan{ margin-bottom: 30px; }
	.pan a, .pan span{ font-size: 14px; }

	nav#navi_top{ width: 350px; left: -350px; }

	h2.h2_style{ font-size: 24px }
	h2.h2_kaso span{ font-size: 30px; }
	h3.h3_style{ padding: 0 0 0 10px; }
	h3.h3_style_kaso{ padding: 6px 12px 6px; border-left: 9px solid var(--blu2); font-size: 18px; }
	h4{ font-size: 18px; }
	h5{ padding-left: 10px; font-size: 18px; }
	h5.h5_link a{ padding: 4px 8px 4px; font-size: 16px; border-left: 8px solid var(--red3); }

	main{ padding-bottom: 0px; }
		section{ padding: 30px 0; } /*（20240625）argin-bottom: 20px; 削除 */


	/* お問合わせ */
	#tbl_contact, #tbl_contact th, #tbl_contact td{ border: none; }
	.btn_contact a{ padding: 4px 10px 4px 15px; border-radius: 15px; font-size: 14px; }
	.btn_contact a i{ margin-right: 5px; }

	.row.main_inner .col-sm-9{ padding: 0; }
	.row.main_inner .col-sm-3{ padding: 0; }


	/* TOP 強み */
	.ul_tsuyomi{ padding: 0 5%; }
	.ul_tsuyomi li .tsuyomi_btm .tsuyomi_text{ height: 140px; }


	/* 営業のご案内 */
	#tbl_price th{ width: 100%; }


	/* お問合わせ */
	[name='inquiry']{ height: 250px; }

	footer{ padding: 10px 0; }
		#footer_inner{}
			.ul_footer li a{ font-size: 12px; }

			#footer_text{ margin-bottom: 5px; padding: 5px 10px; }
			#footer_text *{ font-size: 12px; }

			p#copy{ font-size: 10px !important; }
}



/************************************************************************************************************************
　500px以下
************************************************************************************************************************/
@media (max-width: 500px) {
	nav#navi_top{ width: 280px; left: -280px; }

	h2.h2_style{ font-size: 22px }
	h2.h2_kaso span{ font-size: 25px; }
	h3.h3_style{}
	h3.h3_style_kaso{}
	h4{}

	#header_tel a{ margin-right: 0px; font-size: 16px; }

}



/************************************************************************************************************************
　374px以下
************************************************************************************************************************/
@media (max-width: 374px) {
	nav#navi_top{ width: 250px; left: -250px; }

	h2.h2_kaso span{ font-size: 25px; }

	#header_tel a{ margin-right: 0px; font-size: 14px; }

	/* TOP 強み */
	.ul_tsuyomi li .tsuyomi_btm .tsuyomi_text{ height: 160px; }

	/* 営業のご案内　格安セットプラン */
	h4 .price{ display: block; margin-left: 20px; }
}