@charset "utf-8";
@import url(common.css?p=20240627);


/********************************************************************************************************************************************************************
（共通設定）
********************************************************************************************************************************************************************/
*{
}

body{}
#wrapper{}


.sp_only{ display: none; }
.pc_only{ display: block; }


/* ページリンク　アンカーポイント（「.h3_style」に設定） */
.anc{ position: absolute; top: -40px; }

.more{ margin-bottom: 0; text-align: right; }
.more a{ font-size: 12px; }

/* お問合わせボタン */
.btn_contact{ text-align: right; }
.btn_contact a{ display: inline-block; padding: 8px 20px 8px 30px; background: var(--grn1); border-radius: 20px; font-size: 18px; color: #fff; text-decoration: none; }
.btn_contact a i{ margin-right: 10px; }



/********************************************************************************************************************************************************************
（ヘッダー設定）
********************************************************************************************************************************************************************/
header{ width: 100%; background: var(--blk1); position: fixed; z-index: 1; } /* SPナビがz-index:2 */
#header_inner{ width: 1000px; margin: 0 auto; }
	#logo{ width: 180px; margin-bottom: 0; }

	#header_r{ width: 78%; display: flex; flex-direction: column; justify-content: space-between; padding: 5px 0 0; }
		h1{ display: flex; justify-content: flex-end; flex-direction: row; margin-bottom: 0; font-size: 12px; font-weight: normal; text-align: right; color: #fff; }

		#header_tel{ display: flex; justify-content: flex-end; align-items: center; }
		#header_tel a{ display: block; font-size: 24px; font-weight: bold; color: var(--red1); animation: glow 7s infinite; text-decoration: none; }
		#header_tel a i{ margin-right: 10px; }
		#header_tel #btn_spMenu.tcon{ display: none !important; }

		/* iPhone、iPadで色の変化が無く、黒い文字となるため下記に修正（変数の使用をヤメ）
		@keyframes glow {
			0% { color: var(--logo1); }
			14.28% { color: var(--logo2); } 
			28.57% { color: var(--logo3); }
			42.85% { color: var(--logo4); }
			57.14% { color: var(--logo5); }
			71.42% { color: var(--logo6); }
			85.71% { color: var(--logo7); }
			100% { color: var(--logo1); }
		}
		*/
		@keyframes glow {
			0% { color: #6a0000; }
			14.28% { color: #884400; } 
			28.57% { color: #bb9600; }
			42.85% { color: #808000; }
			57.14% { color: #556b2f; }
			71.42% { color: #006666; }
			85.71% { color: #004b97; }
			100% { color: #6a0000; }
		}


	/* ナビ */
	nav#navi_top{ vertical-align: bottom; }
	nav#navi_top ul.navi_parent{ display: flex; justify-content: space-between; width: 100%; margin-bottom: 0; padding-left: 0; }

	nav#navi_top ul.navi_parent > li{ width: 20%; position: relative; }
	nav#navi_top ul.navi_parent > li > a{ display: block; padding: 5px 0; text-align: center; text-decoration: none; font-size: 15px; color: #fff;
		/*-webkit-transition: 0.4s;
		transition: 0.4s;*/
	}
	nav#navi_top ul.navi_parent > li > a.active, nav#navi_top ul.navi_parent > li:hover > a{ background: var(--red1); border-right: 1px solid var(--blk1); font-weight: bold; color: #fff; }
	nav#navi_top ul.navi_parent > li:nth-child(5) > a.active, nav#navi_top ul.navi_parent > li:nth-child(5):hover > a{ border-right: none !important; }
	nav#navi_top ul.navi_parent > li > a i{ margin-right: 6px; }

	/* 子ナビ */
	nav#navi_top ul.navi_child{ display: none; width: calc(100% - 1px); padding: 0; background: var(--red1); color: #fff; position: absolute; }
	nav#navi_top ul.navi_child li > a{ display: block; padding: 5px 0 5px 1.2rem; text-align: left; color: #fff; font-size: 14px; text-decoration: none; }
	nav#navi_top ul.navi_child li > a:hover, nav#navi_top ul.navi_child li a.active{ background: var(--red2); }
	nav#navi_top ul.navi_child li > a:before{ content: '〉'; color: #fff; }

	/* 親ナビにホバーした時の子ナビの表示 */
	nav#navi_top ul.navi_parent > li:hover > ul.navi_child { display: block; }



/********************************************************************************************************************************************************************
（フッター設定）
********************************************************************************************************************************************************************/
footer *{ color: #fff; }

footer{ padding: 20px 0; background: var(--blk1); }
	.ul_footer{ padding-left: 0; }
	.ul_footer li{}
	.ul_footer li a{ color: #fff; font-size: 14px; text-decoration: none; }
	.ul_footer li a:hover{ text-decoration: underline; }

	#footer_text{ margin-bottom: 10px; padding: 10px 20px; background: #3c3c3c; }
	#footer_text *{ font-size: 14px; }
	#footer_text p, #footer_text address{ margin: 0; text-align: center; }

	p#copy{ margin-bottom: 0; text-align: center; font-size: 12px; }



/********************************************************************************************************************************************************************
（サイドバー設定）
********************************************************************************************************************************************************************/
.pan{ margin-bottom: 20px; /*border-bottom: 2px solid var(--blu4);*/ } /*（20240602）border-bottom不要のためコメント */
.pan a, .pan span{ font-size: 14px; }
.pan a:hover{ text-decoration: underline; }

#ul_side_menu{ padding-left: 0; }
#ul_side_menu li{ margin-bottom: 10px; }
#ul_side_menu li a{ display: block; }


/********************************************************************************************************************************************************************
（タイトル設定）
********************************************************************************************************************************************************************/
h2.h2_style{ margin-bottom: 30px; padding: 0 0 8px 0; border-bottom: 3px solid #ddd; font-size: 32px; font-weight: bold; color: var(--blu1); position: relative; }
h2.h2_style:before { width: 16%;  height: inherit; border-bottom: 3px solid var(--red1); content: ""; position: absolute; left: 0; bottom: -3px; }

h2.h2_kaso{ position: relative; }
h2.h2_kaso span{ font-size: 50px; font-weight: bold; color: #fff; position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-shadow: 0px 3px 0px #777,
					5px 10px 10px rgba(0,0,0,0.15),
					5px 10px 2px rgba(0,0,0,0.10),
					5px 10px 30px rgba(0,0,0,0.10);
	}


h3.h3_style{ margin-bottom: 15px; padding: 0 0 3px 12px; border-left: 5px solid var(--blu1); border-bottom: 1px solid var(--gry3); font-size: 24px; font-weight: bold; color: var(--blk1); }
/*h3.h3_style:before{ margin-right: 5px; content: '■'; color: var(--blu1); }*/

h3.h3_style_kaso{ margin-bottom: 15px; padding: 8px 16px 8px; background: var(--blu1); border-left: 12px solid var(--blu2); font-size: 24px; color: #fff; position: relative; }

h4{ margin-bottom: 15px; padding: 0 8px 3px; border-bottom: 3px solid var(--blu2); font-size: 22px; position: relative; }

h5{ padding-left: 12px; border-left: 5px solid var(--red1); font-size: 20px; position: relative; }
h5.h5_link{ padding-left: 0; border-left: none; }
h5.h5_link a{ display: block; padding: 4px 10px 4px; background: var(--yel1); border-left: 10px solid var(--yel2); font-size: 20px; color: #fff; text-decoration: none;
	transition: background 0.3s ease, border-left 0.3s ease;
}
h5.h5_link a:hover{ background: var(--yel2); border-left: 0px solid var(--yel3); }


/********************************************************************************************************************************************************************
（コンテンツ部設定）
********************************************************************************************************************************************************************/
main{ padding-bottom: 50px; }
	.main_inner{ max-width: 1000px; margin: 0 auto; overflow: hidden; }

	section{ padding: 50px 0; } /*（20240625）margin-bottom: 50px 削除 */

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


/********************************************************************************************************************************************************************
（メイン設定）
********************************************************************************************************************************************************************/
/* 共通設定事項 */
/* 共通画像設定 */
.col-sm-4 img{ width: 100%; height: auto; }


/********************************************************************************************************************************************************************
（トップページ）
********************************************************************************************************************************************************************/
#slick, .head_img{ width: 1000px; height: auto; margin: 0 auto; }
#slick div img{ width: 100%; height: auto; }

.head_img img{ width: 100%; height: auto; }


/* TOP 特徴  */
.ul_tsuyomi{ padding: 0; }
.ul_tsuyomi li{}
.ul_tsuyomi li h3{ margin: 0; padding: 15px 0 6px; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 22px; text-align: center; color: #fff; }
.ul_tsuyomi li h3 i{ margin-right: 12px; }
.ul_tsuyomi li#tsuyomi1 h3{ background: var(--red1); }
.ul_tsuyomi li#tsuyomi2 h3{ background: var(--blu1); }
.ul_tsuyomi li#tsuyomi3 h3{ background: var(--yel1); }

.ul_tsuyomi li .tsuyomi_btm{ padding: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.ul_tsuyomi li#tsuyomi1 .tsuyomi_btm{ border: 4px solid var(--red1); }
.ul_tsuyomi li#tsuyomi2 .tsuyomi_btm{ border: 4px solid var(--blu1); }
.ul_tsuyomi li#tsuyomi3 .tsuyomi_btm{ border: 4px solid var(--yel1); }

.ul_tsuyomi li .tsuyomi_btm img{ width: 100%; height: auto; margin-bottom: 10px; }
.ul_tsuyomi li .tsuyomi_btm .tsuyomi_text{ height: 150px; }



/********************************************************************************************************************************************************************
（営業のご案内）
********************************************************************************************************************************************************************/
#tbl_price th{ width: 35%; }
#tbl_price .price{ background: var(--gry4); text-align: right; white-space: nowrap; }

h4 .price{ margin-left: 10px; font-weight: bold; color: var(--blu1); }


/********************************************************************************************************************************************************************
（スタジオ）
********************************************************************************************************************************************************************/
.tbl_office{}
.tbl_office th{ white-space: nowrap; }


/********************************************************************************************************************************************************************
（お問合わせ）
********************************************************************************************************************************************************************/
#fm_contact .note_text{ font-size: 12px; color: var(--blu1); }

[name='inquiry']{ height: 400px; }

.btn_send{ margin-top: 20px; text-align: center; }
.btn_send [type='button']{ padding: 8px 30px; background: var(--blu1); border: none; border-radius: 4px; font-size: 20px; color: #fff; }


/********************************************************************************************************************************************************************
（制作実績）
********************************************************************************************************************************************************************/
.ul_results{ padding: 0; }
.ul_results li{ margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dotted #999; }
.ul_results li:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.ul_results li a{ display: flex; justify-content: space-between; color: #212529; }
.ul_results li a:hover{ background: var(--gry4); }
.ul_results li p{ margin-bottom: 0; }
.ul_results li .img{ width: 15%; }
.ul_results li .results_list_r{ width: 82%; }
.ul_results li .results_list_r .h4_results{ margin-bottom: 5px; border-bottom: 1px dotted #ccc; font-size: 18px; font-weight: bold; color: var(--blu1); }


/********************************************************************************************************************************************************************
（制作実績詳細）
********************************************************************************************************************************************************************/
#results_capture{ margin-bottom: 1rem; padding: 5%; background: var(--gry4); }


/********************************************************************************************************************************************************************
（プライバシーポリシー）
********************************************************************************************************************************************************************/
/*
.privacy_box *{ font-size: 14px; }
.privacy_box dl{}
.privacy_box dl dt{ margin-bottom: 5px; font-weight: bold; }
.privacy_box dl dd{ margin-bottom: 25px; }
*/