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

/********************************************************************************************************************************************************************
	共通設定
********************************************************************************************************************************************************************/
body a{ color: #333; }
#wrapper{}

/* ページリンク　アンカーポイント */
.anc{ position: absolute; top: -130px; }

hr.hr_style{ margin-bottom: 30px; border-top: 1px dotted #ccc; border-right: none; border-bottom: none; border-left: none; }



/********************************************************************************************************************************************************************
	表示BOX定義
********************************************************************************************************************************************************************/
/* 汎用オレンジBOX */
.orangeBox{ padding: 5px 10px; background: #fbf3da; border: 1px solid #ffae00; }

/* 汎用ホワイトBOX */
.whiteBox{ padding: 5px 10px; background: #fff; border: 1px solid #ccc; }

/* 汎用グレーBOX */
.grayBox{ padding: 5px 10px; background: #f4f2f0; border: 1px solid #ccc; }



/********************************************************************************************************************************************************************
	ヘッダー
********************************************************************************************************************************************************************/
header{ width: 100%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: fixed; z-index: 2; }
	#header_inner{ max-width: 1000px; margin: 0 auto; padding: 5px 0; }
		#header_inner_PC{ display: flex; justify-content: space-between; align-items: center; }
		#logo{ width: 120px; }
		#logo img{ display: block; }

		#header_r{}
			.btn_tel{ display: inline-block; margin-bottom: 8px; color: var(--main_ora); font-size: 22px; font-weight: bold; line-height: 1; }
			.btn_tel:hover{ text-decoration: none; color: var(--main_ora); }
			.btn_tel i{ margin-right: 8px; color: var(--main_ora); vertical-align: 0; }

			.btn_contact{ display: inline-block; padding: 0 24px; background: var(--main_ora); border-radius: 5px; color: #fff; font-size: 16px; }
			.btn_contact i{ margin-right: 8px; color: #fff; vertical-align: 0; }
			.btn_contact:hover{ text-decoration: none; color: #fff; }

		#btn_spMenu.tcon{ display: none; }


/* ナビ */
nav#navi_top{ background: var(--main_blu); }
nav#navi_top > ul{ display: flex; max-width: 1000px; margin: 0 auto; }
nav#navi_top > ul li.li_navi_parent{ width: 25%; position: relative; }
nav#navi_top > ul li.li_navi_parent .active_arrow{ width: 8px; position: absolute; top: -4px; left: 0; right: 0; margin: auto; transform: rotate(-90deg); }

nav#navi_top > ul li.li_navi_parent > a{ display: block; padding: 10px 0; background: var(--main_blu); text-align: center; text-decoration: none; font-weight: bold; color: #fff;
	-webkit-transition: 0.4s ;
	transition: 0.4s ;
}
nav#navi_top > ul li.li_navi_parent > a:hover, nav#navi_top > ul li.li_navi_parent > a.active{ background: var(--main_blu80); }

nav#navi_top > ul li.li_navi_parent > a i{ margin-right: 8px; color: #fff; font-size: 14px; vertical-align: 1px; }

	p#close_menu{ display: none; }


	ul.ul_navi_child{ display: none; position: absolute; left: 0; z-index: 999; }
	ul.ul_navi_child li{ border-bottom: 1px dotted #fff; }
	ul.ul_navi_child li:last-child{ border-bottom: none; }
	ul.ul_navi_child li a{ display: block; padding: 8px 20px; background: #000; font-weight: bold; font-size: 14px; color: #fff; text-decoration: none;
		-moz-opacity: 0.8;
		opacity: 0.8;
	}

	ul.ul_navi_child li a:hover{ color: #f27239; }



/********************************************************************************************************************************************************************
	フッター
********************************************************************************************************************************************************************/
footer{ padding: 10px 20px; background: #333; }
	#footer_inner *{ color: #fff; }
	#footer_inner{ max-width: 1000px; margin: 0 auto; }

	#footer_inner ul{}
	#footer_inner ul li{}
	#footer_inner ul li a{ padding-left: 10px; border-left: 3px solid var(--main_ora);  }

	#footer_inner p#copy{ text-align: center; }



/********************************************************************************************************************************************************************
	下層　ヘッダー画像・タイトル
********************************************************************************************************************************************************************/
h1.page_header{ margin-bottom: 10px; position: relative; overflow: hidden; }
h1.page_header img{ display: block; width:100%; height: auto; object-fit: cover; }

/* 黒フィルター */
h1.page_header::before{ content:""; background: rgba(0,0,0,0.25); position: absolute; inset: 0; z-index:1; }

/* タイトル */
h1 .page_title{ display:flex; flex-direction: column; align-items: center; gap: 10px; width: 70%; color: #fff; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; }
h1 .page_title .ja{ color: #fff; font-size: 28px; font-weight: bold; letter-spacing: 0.08em; line-height: 1; text-shadow: 0 2px 6px rgba(0,0,0,0.6); }
h1 .page_title .en{ width: 100%; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.8); color: #fff; font-size: 12px; letter-spacing: 0.2em; line-height: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }


/********************************************************************************************************************************************************************
	タイトル
********************************************************************************************************************************************************************/
h2.h2_style{ margin-bottom: 25px; padding: 0 0 4px 8px; font-size: 28px; font-weight: bold; position: relative; }
h2.h2_style::before,h2.h2_style::after { content: ''; height: 5px; position: absolute; bottom: 0; }
h2.h2_style::before { width: 20%; background: var(--main_ora); left: 0; }
h2.h2_style::after { width: calc(80% - 4px); left: calc(20% + 4px);
	background: linear-gradient(
		to right,
		var(--main_blu),
		var(--main_blu40)
	);
}

h3.h3_style{}
h3.h3_style_product{ margin-bottom: 10px; font-weight: bold; }
h4.h4_style{  }



/********************************************************************************************************************************************************************
	メイン
********************************************************************************************************************************************************************/
main{ padding: 155px 0 20px; background: #f3f3f3; }
#main_inner{ display: flex; justify-content: space-between; max-width: 1000px; margin: 0 auto; }



/********************************************************************************************************************************************************************
	左カラム
********************************************************************************************************************************************************************/
#left_box{ width: 24%; border-top: 6px solid var(--main_blu); }

#left_box .box{ margin-bottom: 10px; background: #fff; }

	/*　メニュー　*/
	#ul_left_menu{ padding: 15px; }
	#ul_left_menu li.li_left_parent{ margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid #ddd; }
	#ul_left_menu li.li_left_parent:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
	#ul_left_menu li.li_left_parent > a{ display: block; margin-bottom: 10px; color: #333; font-weight: bold; text-decoration: none; line-height: 1em; }

	#ul_left_menu li.li_left_parent > a i{ margin-right: 6px; vertical-align: 0; }

	#ul_left_menu li.li_left_parent .ul_left_child{ margin-left: 20px; }
	#ul_left_menu li.li_left_parent .ul_left_child li{ margin-bottom: 4px; }
	#ul_left_menu li.li_left_parent .ul_left_child li a{ font-size: 14px; text-decoration: none; }
	#ul_left_menu li.li_left_parent .ul_left_child li a:hover{}


	/*　バナー　*/
	#ul_ban{}
	#ul_ban li{ margin-bottom: 10px; }
	#ul_ban li:last-child{ margin-bottom: 0; }
	#ul_ban li a{ display: block; }


/********************************************************************************************************************************************************************
	右カラム
********************************************************************************************************************************************************************/
#right_box{ width: 74%; background: #fff; }
	#right_main{ padding: 10px 2% 50px; }

/* 共通設定事項 */
section.contents{ margin-bottom: 50px; }
section.contents:last-child{ margin-bottom: 0; }
section.contents .tbl_edit caption{ font-size: 18px; }



/********************************************************************************************************************************************************************
　	トップページ
********************************************************************************************************************************************************************/
#slick_box{ margin-bottom: 10px; background: #fff; }
	#slick{ max-width: 1000px; margin: 0 auto; }

/* キャッチコピー */
#catch_copy{ margin-bottom: 30px; padding: 60px 0; background: linear-gradient(135deg,var(--main_blu05) 0%,var(--main_blu10) 45%,var(--main_blu20) 100%); overflow: hidden; font-weight: bold; text-align: center; position: relative; }
#catch_copy::before{ content: ""; width: 300px; height: 300px; opacity: 0.3; z-index: 0; position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%);
	background: url("/img/logo_white.png") no-repeat center;
	background-size: contain;
}
#catch_copy p{ position: relative; z-index: 1; }
	#catch_copy1{ margin-bottom: 30px; font-size: 48px; color: var(--main_blu); letter-spacing: 0.08em; line-height: 1.35; }
	#catch_copy2{ font-size: 30px; color: var(--main_blu80); letter-spacing: 0.1em; }

/* 営業品目 */
#top_business{ display: flex; justify-content: space-between; }
#top_business ul{ width: 45%; padding-top: 10px; padding-bottom: 10px; background: #f6f6f6; }
#top_business ul li{}
#top_business p{ width: 40%; }

/* 会社方針 */
/*
#top_policy{ background-image: url(/img/img_back.png); background-size: cover; }
#top_policy table{ width: 250px; margin: 0 auto 50px; }
#top_policy table th{ font-size: 40px; text-align: left; font-weight: bold; color: #fff; }
#top_policy table td{ font-size: 18px; text-align: right; color: #eee; vertical-align: middle; }
*/
.dl_policy{ margin-bottom: 50px; padding: 30px 50px; background: linear-gradient(180deg, #fffdf9 0%, #f8f4ec 100%); border: 1px solid rgba(180, 160, 120, 0.15); border-radius: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); font-family: "Sawarabi Mincho", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; }
.dl_policy dt{ margin-bottom: 5px; font-size: 20px; font-weight: bold; }
.dl_policy dd{ margin-bottom: 30px; }
.dl_policy dd:last-child{ margin-bottom: 0; }
/*.dl_policy dd ul li::before{ content: '・'; }*/

#PresidentBox{ text-align: right; }
	#President_l{ display: inline-block; width: 20%; margin-right: 20px; }
	#President_r{ display: inline-block; width: 40%; }



/********************************************************************************************************************************************************************
　	取扱製品
********************************************************************************************************************************************************************/
.logo_maker_full, .logo_maker, .ul_logo_maker{ margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--main_blu10); }
/*.maker_logo img{ height: 30px !important; }*/
.logo_maker_full img{ display: block; width: 70%; }
.logo_maker img{ display: block; width: 25%; }
.logo_maker2 img{ display: block; width: 100%; }
.ul_logo_maker{ display: flex; }
.ul_logo_maker li{}
.ul_logo_maker li:first-child{ width: 25%; margin-right: 50px; }
.ul_logo_maker li:last-child{ width: 35%; }

.ul_product{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.ul_product li{ width: 48%; margin-bottom: 30px; }
.ul_product li:nth-child(2n){ margin-right: 0; }
.ul_product li .product_img{}

.ul_product li .product_link{ text-align: right; }
.ul_product li .product_link a{ padding: 3px 6px 3px 14px; background: var(--main_ora); border-radius: 3px; color: #fff; text-decoration: none; font-size: 12px; }



/********************************************************************************************************************************************************************
	会社概要
********************************************************************************************************************************************************************/
.tbl_overview{ width: 100%; margin-bottom: 50px; }
.tbl_overview th, .tbl_overview td{ padding: 25px 4%; }
.tbl_overview th{ width: 30%; border-bottom: 1px solid var(--main_blu80); vertical-align: middle; font-weight: bold; }
.tbl_overview td{ border-bottom: 1px solid var(--main_blu20); }

#ul_vendor{ display: flex; justify-content: space-between; flex-wrap: wrap; }
#ul_vendor li{ width: 47%; }

.ul_style_company{}
.ul_style_company li{ margin-bottom: 8px; line-height: 1.5; }
.ul_style_company li:last-child{ margin-bottom: 0; }

.tbl_history{ width: 100%; }
.tbl_history caption{ margin-bottom: 5px; font-size: 16px; font-weight: bold; }
.tbl_history th, .tbl_history td{ padding: 8px 2%; border: 1px solid #fff; }
.tbl_history th{ width: 30%; background: var(--main_blu10); text-align: right; vertical-align: middle; font-weight: normal; }
.tbl_history td{ background: #fafafa; }



/********************************************************************************************************************************************************************
	プライバシーポリシー
********************************************************************************************************************************************************************/
.privacy_box *{}
.privacy_box dl{}
.privacy_box dl dt{ margin-bottom: 5px; font-weight: bold; }
.privacy_box dl dt::before{ content: '■'; margin-right: 5px; }
.privacy_box dl dd{ margin-bottom: 25px; }
.privacy_box dl dd ul{ margin: 5px 0 0 20px; }



/********************************************************************************************************************************************************************
	ページ名
********************************************************************************************************************************************************************/
/*　箇所　*/