@charset "UTF-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/*///////////////////////////////////////////////////   ここまでがCSSリセット   ///////////////////////////////////////////////////*/
@font-face {
	font-family:BebasNeue Bold;
	src:url(css/BebasNeue%20Bold.ttf) format("truetype");
}
* {margin:0; padding:0; outline:0;}
.clearfix:after{
    content:"";
    clear:both;
    display:block;
}
.flo_l{float:left;}
.flo_r{float:right;}
b{font-weight:bold;}
.flexbox{
	display:flex;
	justify-content: space-between;
}
.flexbox2{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


html , body {height:100%; min-height:100%; font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;word-break:break-all;}
body.top{background:url(img/bg_02.jpg) 0 48px;}

.top10{margin-top:10px;}
.top20{margin-top:20px;}

.btm10{margin-bottom:10px;}

.clear{clear:both;}

body#index {font-size:12px;}

#container{
	background:url(img/bg_01.jpg) repeat-y center 48px;
	width:100%;
	min-width:1020px;
	min-height:100%;
	position:relative;
}
#container_2{
	margin:0 auto;
	width:100%;
	min-width:1020px;
	min-height:100%;
	position:relative;
}


/*///////////////////////////////////////////////////   ヘッダ   ///////////////////////////////////////////////////*/


#header_bk{
	margin:0 auto;
	border-top:solid #fff 5px;
	background:url(img/headerbg_02.jpg) repeat-x;
	width:100%;
	height:43px;
}
#header{
	margin:0 auto 0;
	background:url(img/headerbg_01.jpg) no-repeat center 0;
	width:100%;
	min-width:1000px;
	height:43px;
}

#header_mail_bk{
	margin:0 auto;
	background:url(img/header_mail_02.jpg) repeat-x;
	width:100%;
	height:120px;
}
#header_mail{
	margin:0 auto;
	background:url(img/header_mail_01.jpg) no-repeat center 0;
	width:100%;
	min-width:1000px;
	height:120px;
}

.bxslider{width:100%; height:auto;}
.bxslider img{width:100%; height:auto;}
.he_box{
	width:1000px;
	margin:0 auto;
	line-height:43px;
}
.he_box p{
	color:#fff;
	font-family:'Lato', sans-serif;
	font-weight:300;
	font-size:15px;
}

.hde_box{width:745px;float:right; display:flex;justify-content:space-between;}
.top_mail a{
	display:inline-block;
	text-align:center;
	background-color:#fff;
	width:108px;
	height:36px;
	border-radius:0 0 5px 5px;
	margin-left:10px;
	text-decoration:none;
	color:#0071b1;
	font-size:13px;
}
.mitsu{margin-left:auto;}
.top_mail a:hover{box-shadow:0 5px 5px rgb(0 0 0/ 0.3);}

.langbox{margin-left:10px;}
.langbox li{position: relative; height:36px;}
.langtop{
	display:inline-block;
	text-align:center;
	background-color:#fff;
	width:60px;
	height:36px;
	border-radius:0 0 5px 5px;
	text-decoration:none;
}
.langnav{
	position: absolute;
	top: 37px;
	left: -40px;
	z-index:1000;
}
.langnav li{
  overflow: hidden;
  height: 0;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
  box-shadow:0 5px 5px rgb(0 0 0/ 0.3);
}
.langnav li a{
	width:100px;
	height:28px;
	background-color: #fff;
	display: flex;
	align-items: center;
	color: #0080cc;
	text-decoration: none;
	position: relative;
	padding-left:10px;
	margin-top:1px;
	box-sizing:border-box;
}
.langnav a:hover{
  background: #c7e7fa;
}
.langbox li:hover .langnav li{
  overflow: visible;
  height: 28px;
}
.langnav a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 2px solid #0080cc;
    border-left: 2px solid #0080cc;
    transform: rotate(135deg);
    position: absolute;
    right: 10px;
    top: calc(50% - 5px);
}



/*///////////////////////////////////////////////////   フッタ   ///////////////////////////////////////////////////*/


#footer_bk{
	position:absolute;
	width:100%;
	background-color:#000;
	color:#fff;
	bottom: 0;
	font-size:12px;
	-webkit-transform:translate3d(0, 0, 0);
	top:inherit;
}
#footer{width:1000px;margin:25px auto;}
.ft_image{margin:-66px auto 0;width:1000px;}
.shamei{
	float:left;
	margin-left:20px;
	line-height:1.4;
}
.ft{float:right;text-align:right;}
.ft a{text-decoration:none;color:#fff;}
.ft a:hover{text-decoration:none;color:#999;}



/*///////////////////////////////////////////////////   ここまでがフッタ   ///////////////////////////////////////////////////*/



#wap{
	margin:0 auto;
	padding-bottom:200px;
	width:1000px;
}



#header_pro{
	border-top:solid #fff 5px;
	background:rgba(30,122,220,0.75);
	margin:0 auto;
	width:100%;
	min-width:1000px;
	height:115px;
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#801e7adc,EndColorStr=#801e7adc);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#801e7adc,EndColorStr=#801e7adc)";
}

#header_pro .clearfix:after{content:normal;}

#header_pro:not(:target){filter:none;-ms-filter:none;}

#navi_pro{
	width:745px;
	height:30px;
	border:1px #fff solid;
	border-bottom:none;
	float:right;
	line-height:1;
	margin-top:30px;
	display:flex;
	justify-content: space-between;
	box-sizing:border-box;
}

#navi_pro li{width:100%;}

#navi_pro li:not(:last-child){border-right:1px #fff solid;}

#navi_pro a {
	display:block;
	text-align:center;
	padding:15px 0 2px;
	color:#fff;
	text-decoration:none;
}

#navi_pro a.stay,#navi_pro a:hover {color:#7ecef4;}

.hdr_rogo{float:left;margin-top:28px;}

.boxpro{padding-top:60px;text-align:center;}

@media screen and (-webkit-min-device-pixel-ratio:0){
	

.lato{font-family:'Lato', sans-serif; font-weight:400;}
	
	

#bg{z-index:-1;position:fixed;}
.marubtn{
	width:300px;
	text-align:center;
}





/*////////////////////////////////////////// プロダクト＿中ページ //////////////////////////////////////////*/

#prd_menubox,#prd_menubox2{
	width:100%;
	background: linear-gradient(to bottom, #6f6c6b 0%,#6f6c6b 52%,#585453 52%,#6f6c6b 100%);
	border-radius:12px 12px 0 0;
	display: grid;
	grid-template-rows: 35px;
}
	
#prd_menubox{grid-template-columns: repeat(5, 1fr);}
	
#prd_menubox a,#prd_menubox2 a{
	display:block;
	text-decoration:none;
	color:#fff;
	font-size:14px;
	display:flex;
	align-items: center;
	justify-content: center;
	border-left:solid 2px #c0c0c0;
	border-top:solid 2px #c0c0c0;
	border-bottom:solid 2px #c0c0c0;
}

#prd_menubox a:first-child,#prd_menubox2 a:first-child{/*border-left:solid 2px #c0c0c0;*/ border-radius:12px 0 0 0;}
	
#prd_menubox a:last-child,#prd_menubox2 a:last-child{border-right:solid 2px #c0c0c0; border-radius:0 12px 0 0;}
.pm_dm:hover,.pm_dm_sty,#prd_menubox:hover .pm_dm_sty:hover{background: linear-gradient(to bottom, #af1219 0%,#af1219 52%,#8b0e14 52%,#af1219 100%);}
.pm_rm:hover,.pm_rm_sty,#prd_menubox:hover .pm_rm_sty:hover{background: linear-gradient(to bottom, #c67800 0%,#c67800 52%,#9d5e00 52%,#c67800 100%);}
.pm_ot:hover,.pm_ot_sty,#prd_menubox:hover .pm_ot_sty:hover{background: linear-gradient(to bottom, #7e971d 0%,#7e971d 52%,#647517 52%,#7e971d 100%);}
.pm_mt:hover,.pm_mt_sty,#prd_menubox:hover .pm_mt_sty:hover{background: linear-gradient(to bottom, #438667 0%,#438667 52%,#356850 52%,#438667 100%);}
.pm_sd:hover,.pm_sd_sty,#prd_menubox:hover .pm_sd_sty:hover{background: linear-gradient(to bottom, #315694 0%,#315694 52%,#274373 52%,#315694 100%);}
.pm_ts:hover,.pm_ts_sty,#prd_menubox:hover .pm_ts_sty:hover{background: linear-gradient(to bottom, #6b4c89 0%,#6b4c89 52%,#553b6a 52%,#6b4c89 100%);}

#prd_menubox:hover .pm_mt_sty{background: linear-gradient(to bottom, rgba(67,134,103,0.3) 0%,rgba(67,134,103,0.3) 52%,rgba(53,104,80,0.3) 52%,rgba(67,134,103,0.3) 100%);}


	
.mt2_sub ul{
	display:flex;
	width:936px;
	flex-wrap: wrap;
	margin-left:-33px;
}
.mt2_sub ul li{
	float:none;
	margin:0 0 0 33px;
	display:block;
	white-space: nowrap;
	line-height:30px;
}

.mt2_sub{
	width:1000px;
	border-left:2px solid #c0c0c0;
	border-right:2px solid #c0c0c0;
	padding:16px 30px 14px;
	text-align:left;
	background-color:#e2e2e2;
	box-sizing:border-box;
}
	
.mt2_sub a{text-decoration:none; color:#000; display:block;font-size:14px;}

.mt2_sub a:first-letter{color:#7d7d7d;font-size:20px; vertical-align:-2px;}
	
.mt2_sub a:hover:first-letter{color:#4d9e7b;}


	


.mt_box{
	min-height:350px;
	text-align:left;
	width:996px;
	border:2px solid #c0c0c0;
	border-radius:0 0 10px 10px;
}

.mt_box{background:url(img/prd_mt_bg.jpg) no-repeat #fff;}

.txt_bace{
	text-align:left;
	height:198px;
	margin-left:220px;
	position:relative;
}
.txt_box{
	width:757px;
	position:absolute;
	margin-bottom:10px;
	bottom:0;
}
	
h1.prd_ttl{
	font-size:20px;
	font-weight:bold;
	line-height:1.2;
}
p.prd_text{
	font-size:13px;
	margin-top:7px;
	line-height:1.4;
}



.mt_bace{position:relative; margin:0 0 80px 90px;}

.mt_btn_a{position:absolute; top:74px; left:268px; background:url(img/prd_mt_btn_w.png) no-repeat;}
.mt_btn_b{position:absolute; top:48px; left:474px; background:url(img/prd_mt_btn_w.png) no-repeat;}
.mt_btn_c{position:absolute; top:103px; left:474px; background:url(img/prd_mt_btn_w.png) no-repeat;}
.mt_btn_d{position:absolute; top:191px; left:474px; background:url(img/prd_mt_btn_w.png) no-repeat;}
.mt_btn_e{position:absolute; top:74px; left:682px; background:url(img/prd_mt_btn_w.png) no-repeat;}

.mt_btn_a img:hover, .mt_btn_b img:hover, .mt_btn_c img:hover, .mt_btn_d img:hover, .mt_btn_e img:hover{opacity:0.8;}








/*///////////////////////////////////////////////////   制作事例   ///////////////////////////////////////////////////*/

.mt_bnrbox{
	margin:0 0 50px 90px;
	width:859px;
	box-sizing:border-box;
	border-radius:10px;
	padding:20px 0 10px 27px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 5px, #eeefef 15px, #eeefef 95%, #bebfbf 100%);
	background: -webkit-linear-gradient(top,  #ffffff 5px,#eeefef 15px,#eeefef 95%,#bebfbf 100%);
	background: linear-gradient(to bottom,  #ffffff 5px,#eeefef 15px,#eeefef 95%,#bebfbf 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bebfbf',GradientType=0 );
}

.mt_bnbx_ol{border:solid 5px #509d7c;}

.bnbx_ttl{
	font-size:17px;
	font-weight:bold;
	padding-bottom:3px;
	margin-bottom:25px;
}
.mt_bnbx_line{border-bottom:solid 2px #509d7c;}

.bnbx_in li{
	float:left;
	margin:0 33px 30px 0;
	width:238px;
	height:146px;
	box-shadow:#999 5px 5px 10px;
}
.bnbx_in li a:hover{opacity:0.8;}		/*マウスオーバー*/





/*///////////////////////////////////////////////////   マイクロ文字刻印   ///////////////////////////////////////////////////*/

.bnr_mcr{
	margin:0 0 35px 90px;
	width:869px;
	text-align:center;
}

.bnr_mcr a:hover{opacity:0.9;}		/*マウスオーバー*/





/*///////////////////////////////////////////////////   インスタグラム   ///////////////////////////////////////////////////*/

.insta_dm, .insta_mt{
	margin:0 0 35px 90px;
	width:859px;
	box-sizing:border-box;
	text-align:center;
	padding-bottom:20px;
}

.insta_mt .rvl{
	text-align:center;
	font-size:20px;
	font-weight:bold;
	color:#509d7c;
	border-bottom:solid 1px #509d7c;
	line-height:26px;
	padding-top:5px;
	margin-bottom:30px;
	background-color:#d1e8de;
}

.insta_ol_mt{border:solid 1px #509d7c;}

.in_btn{
	display:block;
	background-color:#2952a3;
	color:#fff;
	font-size:14px;
	line-height:26px;
	border-radius:4px;
	width:100px;
	margin:10px auto 0;
	padding-top:2px;
	text-decoration:none;
}

.in_btn:hover{background-color:#305fbe;}
















/*///////////////////////////////////////////////////   Back to top button   ///////////////////////////////////////////////////*/

#back-top {
position:fixed;
bottom:140px;
right:30px;
z-index:100;
}
#back-top a {
width:40px;
display:block;
text-align:center;
font:11px/100% Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
color:#bbb;
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
#back-top a:hover {color:#000;}
#back-top span {
width:40px;
height:40px;
display:block;
margin-bottom:4px;
border-radius:5px;
background:url(img/top_arrow.png) no-repeat center center;
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
-moz-opacity:0.5;
opacity:0.5;
filter:alpha(opacity=30);
}
#back-top a:hover span {
-moz-opacity:0.8;
opacity:0.8;
filter:alpha(opacity=70);
}











/*フレックスボックス＿要素とコンテナ
---------------------------------------------------------------------------*/
.container {
	margin:0 0 0 82px;
    display: flex;
	width:875px;
}




/*テーブル（ta0-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta0-parts {
	border-collapse: separate;
	border-spacing: 0.5rem;	/*要素間の隙間。*/
	table-layout: fixed;
	width: 100%;
	margin-bottom: 1rem;	/*テーブルの下に空けるスペース。1文字分。*/
}


/*thの共通設定*/
.ta0-parts th {
	text-align:center;
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	background-color: #5bad7a;		/*背景色。*/
	font-weight:bold;
	color: #ffffff;
	border-radius: 6px;		/*角を丸くする指定*/
}

	
	
/*テーブル（ta1-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta1-parts {
	border-collapse: separate;
	border-spacing: 0.5rem;	/*要素間の隙間。*/
	table-layout: fixed;
	width: 100%;
	margin-bottom: 3rem;	/*テーブルの下に空けるスペース。3文字分。*/
}


/*thの共通設定*/
.ta1-parts th {
	text-align:center;
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	background-color: #b7d5be;		/*背景色。*/
}

/*tdの共通設定*/
.ta1-parts td {
	text-align:center;
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	background-color: #dbeadf;		/*背景色。*/
	line-height: 25px
}

	
	
/*テーブル（ta2-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta2-parts {
	border-collapse: separate;
	border-spacing: 0.5rem;	/*要素間の隙間。*/
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;	/*テーブルの下に空けるスペース。2文字分。*/
}

/*thの共通設定*/
.ta2-parts th {
	text-align:center;
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	background-color: #c6c6c6;		/*背景色。*/
}

/*tdの共通設定*/
.ta2-parts td {
	text-align:center;
	padding: 0.5rem;		/*ボックス内の余白。１文字分。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	background-color: #e2e2e2;		/*背景色。*/
	line-height: 25px
	}

	
	
/*テーブル（ta3-parts）
---------------------------------------------------------------------------*/
/*テーブルブロック設定*/
.ta3-parts {
	border-collapse: separate;
	border-spacing: 0.5rem;	/*要素間の隙間。*/
	table-layout: fixed;
	width: 100%;
	margin-bottom: 3rem;	/*テーブルの下に空けるスペース。3文字分。*/
}

/*thのみの設定*/
.ta3-parts th {
	text-align:center;
	background-color: #b7d5be;		/*背景色。*/
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
				
}

/*tdの設定*/
.ta3-parts td {
	vertical-align: middle;
	text-align:center;
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	background-color: #dbeadf;		/*背景色。*/
	padding: 1rem;		/*ボックス内の余白。１文字分。*/
}

.ta3-parts tr:nth-child(1) th:nth-child(1) {
	background: #b7d5be;
	width: 4rem;		/*幅。4文字分。*/
}

.ta3-parts tr:nth-child(2) th:nth-child(1) {
	background: #b7d5be;
}

.ta3-parts tr:nth-child(1) th:nth-child(2) {
	background: #b7d5be;
	width: 6rem;		/*幅。6文字分。*/
}
.ta3-parts th:nth-child(2) {
	background: #b7d5be;
	width: 6rem;		/*幅。6文字分。*/
}

.ta3-parts tr:nth-child(1) th:nth-child(5) {
	background: #b7d5be;
	width: 6rem;		/*幅。6文字分。*/
			}
			
.ta3-parts tr:nth-child(1) th:nth-child(3) {
	background: #b7d5be;
	width: 11rem;		/*幅。11文字分。*/
}



/*フォント指定
---------------------------------------------------------------------------*/

.small-text span {
  font-size: 11px;
}

.medium-text span {
  font-size: 15px;
}

.large-text span {
  font-size: 18px;
}





/*///////////////////////////////////////////////////   刻印の文字サイズ比較   ///////////////////////////////////////////////////*/

.mt_size_box{
	text-align:center;
	margin:0 0 100px 240px;
	width:560px;
	box-sizing:border-box;
	border-radius:10px;
	padding:15px 30px 20px 30px;
	background: #dbeadf;
	margin-bottom: 10rem;	/*テーブルの下に空けるスペース。10文字分。*/
}

.mt_size_box_ol{border:solid 5px #509d7c;}