@charset "UTF-8";

/*Copyright 2018 Hyuga Kouzai.*/
/* CSS Document */
/* ------------------------------------------------ */
/* 設備一覧用(machine.html)
/* ------------------------------------------------ */
/*サブページタイトル設定マーク付き products.html process.html machine.html */
 .sub_toptitle {
	background-color: #fff;
	color: #4e4e4e;
	text-align:left;
	line-height:1rem;
	font-weight: bold;
	font-size: 2vw;
	margin:1rem;
	padding: 0.5rem 2rem;
	border-bottom:3px solid #999999;
	&:before{
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		content: '\f14a';/*　'\f4d8';双葉*/
		padding-right:0.5rem;
		font-size:2vw;
	}
 }
#business_contents{
	width:80%;
	display: -webkit-grid;
	display: -moz-grid;
	display: -ms-grid;
	display: -o-grid;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
	gap:2rem;
	margin:1rem auto;
	text-align:center;
	& > .grid-item{
		grid-template-rows: subgrid;
		grid-row: span 4;
		height:100%;
		background-color:#fff;
		border:solid 2px #ccc;
		border-radius:5px;
		& > h3{
			-webkit-align-items: center;
			align-items: center;
			-webkit-justify-content: center;
			justify-content: center;
			border-radius:5px;
			margin:1rem 8% 0;
			padding:0.5rem;
			background-color: #e6e6e6;
			background-image: radial-gradient(#ccc 30%, transparent 33%), radial-gradient(#ccc 30%, transparent 33%);
			background-size: 8px 8px;
			background-position: 0 0, 4px 4px;
			text-align:center;
			font-size:1.6vw;
				& > .title_space{
					margin-right:0.5rem;
				}
			}
		& img{
			width:70%;
			display:block;
			margin:0.5rem auto;
		}
		& a{
			display:block;
			width:10rem;
			margin:0 auto;
			padding:0.2rem;
			border:1px solid red;
			border-radius: 5px;
			color:red;
			text-align:center;
			line-height: 0.6rem;
			font-size:1.2vw;
			font-weight:bold;
		}
		& p{
			text-align:left;
			margin:1rem 2rem;
			font-weight:bold;
			line-height:1.5rem;
		}
		& p.line_margin{
			padding:0.5rem;
			border-top: 2px dotted #cccccc;
			border-bottom: 2px dotted #cccccc;
			text-align:center;
			font-size:1.6vw;
			letter-spacing:1rem;
			font-weight:bold;
		}
		& p:nth-of-type(2){
			background-color:#fff;
			border:none;
			border-radius:none;
			margin:1rem 2rem;
			color:#4e4e4e;
			text-align:left;
			line-height: 1.2rem;
			font-size:1.4vw;
		}
	}
	& .sample{
		max-width: 70%;
		height: auto;
		margin-bottom:1rem;
	}
}
/* ------------------------------------------------ */
/* レスポンシブ（780px以下）
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:780px) {
	.sub_toptitle {
		font-size: 1.2rem;
		padding: 1rem;
		&:before{
			font-size:1.4rem;
		}
	}
    #business_contents{
        width:80%;
        display: block;
        margin:1rem auto;
		& > .grid-item{
        display: block;
		margin:1rem auto;
			& > h3{
				margin:1rem 8% 0;
				padding:0.5rem;
				font-size:1rem;
					& > .title_space{
						margin-right:0.5rem;
					}
				}
			& a{
				width:10rem;
				padding: 0.5rem;
				line-height: 0.8rem;
				font-size:0.6rem;
			}
			& p.line_margin{
				font-size:0.8rem;
			}
			& p:nth-of-type(2){
				margin:1rem 2rem;
				line-height: 1.2rem;
				font-size:0.8rem;
			}
		}
		& .sample{
			max-width: 70%;
			height: auto;
			margin-bottom:1rem;
		}
	}
}

/* ------------------------------------------------ */
/* 380px以下に対応
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:380px)  and (max-height: 890px){
    #business_contents{
        width:80%;
        display: block;
        margin:1rem auto;
        & > .grid-item{
            margin:1rem auto;
			& h3{
				text-align:center;
				font-size:1rem;
				color:#444;
			}
			& img{
				width:80%;
			}
        }
    }
}
/* ------------------------------------------------ */
/* スマホ横向き時 450px以下 */
/* ------------------------------------------------ */
@media screen and (orientation: landscape) and (max-height: 450px) {
	.sub_toptitle {
		font-size: 1.2rem;
		padding: 1rem;
		&:before{
			font-size:1.2rem;
		}
	}
}