@charset "utf-8";
/* @responcive
-------------------------------- */
.forPC {
    display: block;
}
.forSP {
display: none;
}
#BtnMenu {
display: none;
}


@media screen and (min-width: 736px){
	#GrobalNavi > ul{
	    display: block!important;
	}
}

@media screen and (max-width: 1000px){

	.main h1 span {
	    margin: 0;
	}

	.body-wrap {
	width:auto;
	    max-width: 1000px;
	}

	.contents {
	margin: 0 1rem 50px;
	}

	#SubNavi nav {
	width:auto;
	    max-width: 1000px;
	}

	#Breadcrumbs {
	width:auto;
	    max-width: 1000px;
	}
	#Breadcrumbs ul{
	padding-left: 1rem;
	}
	#Header {
	margin-bottom:1rem;
	}
	#Header h1, #Logo{
	width:150px;
	}

	#GrobalNavi li a {
	    margin: 0 3px;
	}

	#FooterLink li {
	padding:15px 5px;
	}

	#submenu ul{
	width: 100%;
	}
	#submenu ul li{
	width:46%;
	margin:0 2%;
	}

	#submenu ul li:nth-child(3n){
	margin:0 2%;
	}

	/* 汎用スタイル
	-------------------- */
	/* 横並び */
	ul.two-block > li{
		width:100%;
		display:block;
		padding-right: 0;
	}

	ul.three-block > li{
		width:100%;
		display:block;
		padding-right: 0;
	}

	/* Top */
	#TopPage #Works .img-box {
	    width: 100%;
	    height: auto;
	letter-spacing: -0.3em;
	box-sizing: border-box;
	padding: 10px;
	}


	#TopPage #Works .img-box .banner {
	display:table;
	margin: 0 auto;
	}

	#TopPage #Works .img-box .banner span {
	    letter-spacing: 0;
	}



	#TopPage #Works .img-box .banner img{
	  position: static;
	  -webkit-transform: none;
	  -ms-transform: none;
	  transform: none;
	  width: 100%;
	  height: auto;
	}

	#TopPage #Works .img-box .img1 .banner,
	#TopPage #Works .img-box .img2 .banner,
	#TopPage #Works .img-box .img3 .banner,
	#TopPage #Works .img-box .img4 .banner,
	#TopPage #Works .img-box .img5 .banner {
	    width: auto;
	height:auto;
	}

	#TopPage #Works .img-box .img1,
	#TopPage #Works .img-box .img2,
	#TopPage #Works .img-box .img3,
	#TopPage #Works .img-box .img4,
	#TopPage #Works .img-box .img5 {
	    position: static;
	    margin-bottom:2rem;
	display: inline-block;
	width: 50%;
	vertical-align:top;
	box-sizing: border-box;
	padding: 10px;
	}

	#TopPage .home_bg_img2 {
	    height: auto;
	}

	#TopPage #Msg .img-box {
	    position: static;
	    width: auto;
	    height: auto;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	}

	#TopPage #Msg .img-box .msg-box.box1,
	#TopPage #Msg .img-box .msg-box.box2,
	#TopPage #Msg .img-box img.img1,
	#TopPage #Msg .img-box img.img2 {
	position:static;
	margin-bottom: 2rem;
	}

	#TopPage #Msg .img-box .msg-box.box1,
	#TopPage #Msg .img-box .msg-box.box2 {
	width:100%;
	text-align:left;
	}

	#TopPage #Shopping {
	margin:2rem;
	}

	#TopPage #Shopping ul li{
		float:none;
		text-align:center;
		margin-bottom:1em;
	}
}

@media screen and (max-width: 736px){
	.home_main_img,
	.main_img {
	    margin-top: 0;
	}
	.forPC {
	    display: none;
	}
	.forSP {
	    display: block;
	}
	img {
	    max-width: 100%;
	}
	    
	/* common
	-------------------- */
	body > div#Wrapper {
	  font-size: 12px;
	  color: #333;
	}
	.body-wrap {
	    width: auto;
	    margin-left: 10px;
	    margin-right: 10px;
	}

	.main dl {
	    margin-left: 0;
	}

	.main dl dd {
	    height: auto !important;
	}
	/* Header
	-------------------- */
	#Header {
	position: static;
	    box-shadow: none;
	    padding: 0;
	    z-index: 100;
	}
	#Header h1, #Logo {
	    display: block;
	    width: 50%;
	    margin: 0 auto;
	    padding: 10px 0;
	    text-align: center;
	}
	#Header h1 img {
	vertical-align: top;
	}
	
	header#Header div.contact { margin: 0 auto; width: 50%; height: auto; text-align: center; position: absolute; top: 100px; left: 0; right: 0; }
	header#Header div.contact div.form { margin: 0 0 10px 0; text-align: center; display: block; }
	header#Header div.contact div.form a { width: 100%; box-sizing: border-box; }
	header#Header div.contact div.tel { text-align: center; display: block; }
	div.home_main_img { /*margin-top: 96px;*/ }
	
	#BtnMenu {
	    display: block;
	    width: 24px;
	    position: absolute;
	    top: 15px;
	    right: 10px;
	}

	#SubNavi {
	    display:none;
	}
	#SubNavi ul {
	    display: none;
	}

	#GrobalNavi {
	    float: none;
	    margin: 0 -10px 1px;
	    padding: 0;
	}
	#GrobalNavi ul {
	    display: none;
	}
	#GrobalNavi li {
	    float: none;
	    height: auto;
	    background: #666666;
	}
	#GrobalNavi li a {
	    width: auto;
	    margin: 0;
	    padding: 10px 10px 10px 40px;
	    border-bottom: 1px solid #FFF;
	    background: url(../img/sp/icn_arrow.png) 20px 14px no-repeat;
	    background-size: 7px 14px;
	    text-align: left;
	    color: #fff;
	    font-size: 12px;
	}
	#GrobalNavi ul.dropdown-list {
	    position: static;
	    display: block;
	    width: auto;
	    padding: 0;
	}
	#GrobalNavi ul.dropdown-list li {
	    margin-bottom: 0;
	    background: #666666;
	border-bottom:none;
	}
	#GrobalNavi ul.dropdown-list a {
	    margin: 0;
	    padding: 10px 10px 10px 60px;
	    background: url(../img/sp/icn_arrow.png) 40px 14px no-repeat;
	    background-size: 7px 14px;
	    text-align: left;
	    font-size: 12px;
	}
	#GrobalNavi li a:hover {
	    border-bottom: 1px solid #808080;
	}
	#GrobalNavi li.dropdown-item a:hover {
	    border-bottom: 1px solid #808080;
	    color: #fff;
	}

	/* TopLink
	-------------------- */
	#TopLink {
	display: none;
	}
	#TopLink img:hover {
	    opacity: 1;
	}

	/* Footer
	-------------------- */

	/* MAP見出し */
	#FooterLogo {
	text-align: center;
	    display: block;
	}
	#FooterLink {
	float: none;
	    display: none;
	}
	#FooterLink li {
	float: none;
	padding: 15px 20px;
	white-space: nowrap;
	}
	#FooterLink li a {
	    padding: 0 10px 8px;
	    color: #333;
	font-size: 13px;
	text-decoration: none;
	}
	#FooterLink li a:hover {
	    border-bottom: 2px solid #d3e7b7;
	}
	#Copyright {
	margin-top:0;
	    clear: both;
	    padding: 10px 0 20px;
	color: #999;
	font-size: 10px;
	    text-align: center;
	}
	#Copyright a {
	    color: #999;
	    text-decoration: none;
	}

	#submenu ul li{
	width:96%;
	margin:0 2%;
	}

	/* TopPage
	-------------------- */

	/* Main */
	.contents #TopPage h2 {
	    margin-bottom: 20px;
	    text-align: center;
	}
	.contents #TopPage h2 span.main-title1 {
	    font-size: 25px;
	    font-family: 'Oswald', sans-serif;
	    letter-spacing: 2px;
	}
	.contents #TopPage h2 span.main-title1:before {
	    display: block;
	    width: 100px;
	    content: '';
	    margin: 0 auto;
	    padding-top: 20px;
	    border-top: 1px solid #999999;
	}
	.contents #TopPage h2 span.main-title2 {
	    font-size: 25px;
	    font-family: 'Oswald', sans-serif;
	    letter-spacing: 2px;
	}
	.contents #TopPage h2 span.sub-title {
	    font-size: 12px;
	    color: #999999;
	}

	#TopPage #Blog_twitter > li:nth-child(1){
		width:100%;
	}
	#TopPage #Blog_twitter > li:nth-child(2){
		width:100%;
	}

	#TopPage #News ul.news_inner {
		width:100%;
	}

	#TopPage #News ul.news_inner > li {
		display:block;
	}

	#TopPage #News ul.news_inner > li:first-child {
		width:auto;
	}

	#TopPage #News ul.news_inner > li.kiji-block {
		width:auto;
		border-left: none;
		padding : 0;
		margin: 0 5rem;
	}

	#TopPage #Pickup ul.pickup_inner {
		width:100%;
	}

	#TopPage #Pickup ul.pickup_inner > li {
		display:block;
	}

	#TopPage #Pickup ul.pickup_inner > li:first-child {
		width:auto;
	}

	#TopPage #Pickup ul.pickup_inner > li.kiji-block {
		width:auto;
		border-left: none;
		padding : 0;
		margin: 0 5rem;
	}

	#TopPage #Works .img-box .img1,
	#TopPage #Works .img-box .img2,
	#TopPage #Works .img-box .img3,
	#TopPage #Works .img-box .img4,
	#TopPage #Works .img-box .img5 {
	display: block;
	width: 100%;
	}
	
	/* Top + Overflow + SP Menu */
	
	div#primary { margin-bottom: 30px; width: 100%; display: block;}
	div#primary div.left { width: 100%; }
	div#primary div#main ul img { width: 100% }
	div#primary section#news { margin: 0 15px; border-radius: 10px; }
	div#primary section#news div.inner { padding: 60px 20px 30px; }
	div#primary section#news div.title { width: 100%; }
	div#primary section#news div.title h2 { font-size: 1.8rem; }
	div#primary section#news div.title span { font-size: 3rem; letter-spacing: 0.1em; }
	div#primary section#news div.category { padding: 8px 10px 0; border-radius: 15px; }
	div#primary section#news div.category ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
	div#primary section#news div.category li { padding: 0 0 8px; width: 49%; border-left: none; }
	div#primary section#news div.category a { display: block; }
	div#primary section#news div.category a.active { border-bottom: solid 1px #ccc; }
	div#primary section#news div.posts li { padding: 10px 0; }
	div#primary section#news dl { display: block; }
	div#primary section#news dt { margin: 0 0 5px; }
	div#primary section#news dd {}
	div#primary section#news dd.category { margin: 0 0 5px; }
	div#primary section#news div.more { margin-top: 15px; text-align: center; position: static; }
	div#primary div.right { margin: 30px auto; width: 100%; }
	div#primary div.right ul { margin: 0 10px; display: flex; flex-wrap: wrap; }
	div#primary div.right li { margin-bottom: 10px; padding: 0 5px; width: 50%; text-align: center; box-sizing: border-box; }
	div#primary div.right li:first-of-type { width: 100%; }
	div#primary div.right li img { width: 100%; max-width: 180px; }
	
	div#consultation { width: 100%; }
	div#consultation img { width: 100%; }
	
	section#blog { padding: 60px 0 40px; }
	section#blog div.inner { width: 90%; }
	section#blog div.title { width: 100%; }
	section#blog div.title h2 { font-size: 1.8rem; }
	section#blog div.title span { font-size: 3rem; letter-spacing: 0.1em; }
	section#blog li { margin: 0 auto 30px; }
	section#blog li:nth-child(n+4) { display: none; }
	section#blog div.more { margin-top: 15px; text-align: center; position: static; }
	
	section#recruit { padding: 80px 0 30px; }
	section#recruit div.inner { width: 90%; }
	section#recruit div.title { width: auto; max-width: 370px; }
	section#recruit div.title h2 { font-size: 1.8rem; }
	section#recruit div.title span { font-size: 3rem; letter-spacing: 0.1em; }
	section#recruit ul.bannerL { display: block; }
	section#recruit ul.bannerL li { margin: 0 auto 20px; width: 320px; }
	section#recruit ul.bannerS { display: block; width: auto; }
	section#recruit ul.bannerS li { margin: 0 auto 20px; width: 300px; }
	
	div#overlay { width: 100%; height: 0; background: rgba(255,255,255,0.9); position: absolute; top: 0; left: 0; z-index: 100; }
	a#sp { width: 48px; height: 48px; background: #023; border-radius: 3px; color: #fff; font-size: 12px; text-align: center; text-decoration: none; line-height: 1; display: block; position: fixed; top: 40px; right: 10px; z-index: 1000; transform: translateY(-50%); }
	a#sp span { margin: 0 auto; width: 32px; height: 2px; background: #fff; display: block; position: absolute; left: 0; right: 0; transition: all 0.3s; }
	a#sp span:nth-of-type(1) { top: 8px; }
	a#sp span:nth-of-type(2) { top: 16px; }
	a#sp span:nth-of-type(3) { top: 24px; }
	a#sp p { width: 100%; position: absolute; bottom: 4px; }
	a#sp.active { background: none; color: #023; }
	a#sp.active span { background: #023; }
	a#sp.active span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg); }
	a#sp.active span:nth-of-type(2) { opacity: 0; }
	a#sp.active span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg); }
	
	/* Breadcrumbs
	-------------------- */
	#Breadcrumbs {
	    width: auto;
		margin: 0 10px 30px;
		color: #FFF;
	}
	#Breadcrumbs a {
	color: #FFF;
	}

	/* トップタイトル
	-------------------- */
	#PageTitle {
	    margin-top: 0;
	    height: 80px;
	    background: url(../img/sp/bg_sub_title.png) no-repeat;
	    background-size: cover;
	    text-align: center;
	}
	#PageTitle h1 {
	    padding-top: 20px;
	    font-size: 20px;
	    font-weight: normal;
	}


	/* レイアウト
	-------------------- */
	.contents {}
	#Main {}
	#Side {
	    margin-top: 100px;
	}
	#Side #Banner {
	    margin: 30px 0 60px;
	    text-align: center;
	}
	#Side #Banner .banner {
	    display: inline-block;
	}
	/* 右サイド */
	#MainLeft {
	    float: none;
	    width: auto;
	}
	#SideLeft {
	    float: none;
	    width: auto;
	}
	/* 左サイド */
	#MainRight {
	    float: none;
	    width: auto;
	}
	#SideRight {
	    float: none;
	    width: auto;
	}

	#SideLeft #Banner,
	#SideRight #Banner {
	    text-align: center;
	}
	#SideLeft #Banner .banner,
	#SideRight #Banner .banner {
	    margin: 20px 0;
	}



	/* 汎用スタイル
	-------------------- */
	/* 見出し */
	.main h2 {
	margin-bottom: 20px;
	    padding-bottom: 10px;
	font-size: 20px;
	    line-height: 1.3;
	}
	.main h3 {
	margin: 30px 0 20px;
	    padding-bottom: 10px;
	    font-size: 18px;
	}
	.main h3 a {
	text-decoration: none;
	    color: #333;
	}
	.main h3 a:hover {
	text-decoration: underline;
	    color: #888;
	}
	.main h4 {
	margin: 20px 0 10px;
	    font-size: 15px;
	    font-weight: bold;
	}

	/* 文章 */
	.main p {
	    margin-bottom: 20px;
	}
	#Recipe img {
	    border: 1px solid #ccc;
	    box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.1);
	}



	/* ボタンデザイン
	-------------------- */
	.btn {
	    display: inline-block;
	    margin: 10px 0;
	    color: #fff !important;
	    text-align: center;
	    text-decoration: none;
	    box-sizing: border-box;
	}
	.btn:hover {
	    color: #fff;
	    opacity: 0.7;
	    text-decoration: none;
	}
	.btn-small {
	    width: 40%;
	    padding: 10px 10px 10px 20px;
	    background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;
	    font-size: 14px;
	    letter-spacing: 2px;
	}
	.btn-midium {
	    width: 60%;
	    padding: 20px 10px 20px 20px;
	    background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;
	    font-size: 20px;
	    letter-spacing: 2px;
	}
	.btn-big {
	    width: 100%;
	    padding: 30px 10px 30px 20px;
	    background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;
	    font-size: 24px;
	    letter-spacing: 2px;
	}


	/* テーブルデザイン
	-------------------- */
	.main table {
	    box-sizing: border-box;
	    margin-bottom: 30px;
	}
	.main tr {
	    border-top: 1px solid #CCCCCC;
	    border-bottom: 1px solid #CCCCCC;
	}
	.main th {
	    padding: 20px;
	    border: 0;
	    background: url(../img/common/bg_table_th.png) right center no-repeat;
	    vertical-align: middle;
	}
	.main td {
	    padding: 20px;
	    border: 0;
	}
	.main th,
	.main td {
	    display: list-item;
	    width: auto;
	    border: none;
	    background: none;
	list-style: none;
	}
	.main th {
	    border-bottom: 1px dashed #ccc;
	    padding: 10px 10px 5px;
	}
	.main th:last-child {
	border-bottom:none;
	}
	.main td {
	    padding: 10px;
	}
	.table-style th {
	    border-bottom: none;
	}
	.horizon th, .horizon td {
	    border-left: 1px solid #ccc;
	    border-right: 1px solid #ccc;
	}
	.table-style th,
	.horizon th {
	    background: #f6f6f6;
	}
	.horizon {
	    border-top: 1px solid #CCCCCC;
	    border-bottom: 1px solid #CCCCCC;
	}
	.horizon thead {
	    float: left;
	    display: block;
	}
	.horizon tbody {
	    display: -webkit-box;
	    overflow-x: auto;
	}

	.horizon tr {
	    display: block;
	    border: none;
	}
	.horizon th,
	.horizon td {
	    display: block;
	    width: auto;
	    padding: 10px;
	    border: none;
	}
	.horizon th:first-child,
	.horizon td:first-child {
	    border-left: none;
	}
	.horizon th:last-child,
	.horizon td:last-child {
	    border-right: none;
	}

	/* ContactForm
	-------------------- */
	.form-s {
	    width: 35%;
	}
	.form-m {
	    width: 60%;
	}
	.form-l {
	    width: 90%;
	}
	.contact-form table {
	    box-sizing: border-box;
	}
	.contact-form th,
	.contact-form td {
	    display: list-item;
	    width: auto;
	    border: none;
	    background: none;
	list-style: none;
	}
	.contact-form th {
	    padding: 5px 10px;
	    background-color: #f8f8f8;
	}
	.contact-form td {
	    padding: 10px;
	}
	.contact-form td textarea {
	    width: 100%;
	}
	.submit input {
	    margin-bottom: 5px;
	}

	/* Indexページ用 */
	/* indexMenu*/
	#indexMenu ul li{
	width:100%;
	margin-right:0;
	}

	#indexMenu ul li a {
	color:#00334c;
	text-decoration: none;
	font-size: 0.9em;
	}

	#indexMenu ul li a:hover {
	border-bottom: 1px solid #00334c;
	}

	#indexMenu.three-block ul li{
		width:48%;
		margin-right:2%;
	}
	#indexMenu.three-block ul li:nth-child(3n){
		margin-right:2%;
	}
	#indexMenu.three-block ul li:nth-child(2n){
		margin-right:0;
	}

	/* 会社案内 - 共通
	-------------------- */
	#Company .f-left {
	float:none;
	}
	#Company .f-right {
	float:none;
	}

	#Company .text {
	width:100%!important;
	}
	#Company .photo {
	width:100%!important;
	}

	#Company .photo p{
	text-align:center;
	}

	#Company .f-left.text {
	padding-right: 0;
	margin-bottom:1rem;
	}

	#Company .f-right.text {
	padding-left: 0;
	padding-left: 2rem;
	margin-bottom:1rem;
	}


	/* 会社案内 - 会社概要
	-------------------- */
	#Company.CompanyProfile ul li span {
	display:block;
	margin-left:1rem;
	margin-bottom:0.5em;
	}

	#Company.CompanyProfile ul li span:first-child {
		margin-left:0;
		width: auto !important;
	}
	#Company.CompanyProfile ul.list li span:nth-child(2){
		width: auto !important;
	}
	#Company.CompanyProfile ul li span:last-child {
		text-align:center;
		display:block;
	}

	/* 製品紹介 - 共通
	-------------------- */
	#Product .f-left {
	float:none;
	}
	#Product .f-right {
	float:none;
	}

	#Product .text {
	width:100% !important;
	}
	#Product div.photo {
	width:100% !important;
	text-align: center;
	}

	#Product div.photo p{
	text-align:center;
	}

	#Product .f-left.text {
	padding-right: 0;
	margin-bottom:1rem;
	}

	#Product .f-right.text {
	padding-left: 0;
	padding-left: 2rem;
	margin-bottom:1rem;
	}

	/* 製品紹介 - ガラス体積計
	-------------------- */
	.ProductGlassVolumeter ul.photo li{
	width: 50%;
	}

	/* 製品紹介 - 理化学用ガラス器具
	-------------------- */
	.ProductGlassLaboratory ul.photo li{
	width: 50%;
	}


	/* 製品紹介 - 理化学用ガラス器具
	-------------------- */
	#Product.ProductChemical ul.product-list li.text {
	width:100%;
	padding-right: 0;
	}


	#Product.ProductChemical ul.product-list li.photo {
	width:100%;
	}

	/* 製品紹介 - 工業用ガラス器具
	-------------------- */

	.ProductGlassIndustryIndex .maxw300 {
		max-width:none!important;
	}

	/* 製品紹介 - 電子硝子機材部
	-------------------- */
	.ProductElectronicGlass .f-left {
	float:none;
	}
	.ProductElectronicGlass .f-right {
	float:none;
	}

	.ProductElectronicGlass .text {
	width:100%;
	}
	.ProductElectronicGlass .photo {
	width:100%;
	}

	.ProductElectronicGlass .photo p{
	text-align:center;
	}

	.ProductElectronicGlass .f-left.text {
	padding-right: 0;
	margin-bottom:1rem;
	}

	.ProductElectronicGlass .f-right.text {
	padding-left: 0;
	padding-left: 2rem;
	margin-bottom:1rem;
	}
	/* 製品紹介 - 薬品部門
	-------------------- */
	.ProductChemicalIndex table.table-center tr{
		border: 1px solid #CCCCCC;
	}
	.ProductChemicalIndex table.table-center th:first-child,
	.ProductChemicalIndex table.table-center td:first-child{
		background: #EEE;
	}
	.ProductChemicalIndex table.table-center th{
		width: 100% !important;
		box-sizing: border-box;
	}
	.ProductChemicalIndex table.table-center td{
		border-bottom: 1px dashed #ccc;
	}
	.ProductChemicalIndex table.table-center td:last-child {
	    border-bottom: none;
	}

	/* 技術者紹介 - 共通
	-------------------- */
	#Engineer .f-left {
	float:none;
	}
	#Engineer .f-right {
	float:none;
	padding:0;
	}

	#Engineer .text {
	width:100%;
	}
	#Engineer .photo {
	width:100%;
	}

	#Engineer .photo p{
	text-align:center;
	}

	#Engineer .f-left.text {
	padding-right: 0;
	margin-bottom:1rem;
	}

	#Engineer .f-right.text {
	padding-left: 0;
	padding-left: 2rem;
	margin-bottom:1rem;
	}

	/* 事業所・部署 - 共通
	-------------------- */
	#Office .f-left {
	float:none;
	}
	#Office .f-right {
	float:none;
	}

	#Office .text {
	width:100% !important;
	}
	#Office .photo {
	width:100% !important;
	}

	#Office .photo p{
	text-align:center;
	}

	#Office .f-left.text {
	padding-right: 0;
	margin-bottom:1rem;
	}

	#Office .f-right.text {
	padding-left: 0;
	padding-left: 2rem;
	margin-bottom:1rem;
	}
}