@charset "UTF-8";

/*Copyright 2018 Hyuga Kouzai.*/
/* CSS Document */
/* ------------------------------------------------ */
/* 鋼材販売用(products.html)
/* ------------------------------------------------ */
h2:nth-child(2) {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-align-items: center; 	
	align-items: center; 	
	-webkit-justify-content: center; 	
	justify-content: center;
    width: 90%;
	margin:1rem auto;
	color: #003366;
	text-align:left;
	line-height:1.1rem;
	font-size: 1.5vw;
	letter-spacing:4px;
	padding: 0.5rem;
	border-top:4px double #006699;
	border-bottom:4px double #006699;
	background-color: #fff;
	background-image: none;
	background-repeat: no-repeat;
	background-position:center top;
	height:100%;
}

/*サブページタイトル設定マーク付き 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;
	& div{
		grid-template-rows: subgrid;
		grid-row: span 4;
		height:100%;
		background-color:#fff;
		border:solid 2px #ccc;
		border-radius:5px;
		}
	& h3{
		background-color: /*#e6e6e6;*/#ffffcc;
		background-image: radial-gradient(#fdf4c7 30%, transparent 33%), radial-gradient(#fdf4c7 30%, transparent 33%);
		background-size: 8px 8px;
		background-position: 0 0, 4px 4px;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		color:#444;
		border-radius:5px;
		margin:1rem 1rem 0;
		padding:0.5rem;
		text-align:center;
		font-size:1.8vw;
		}
	& img{
		width:70%;
		display:block;
		margin:1rem auto;
	}
}

/*鋼材販売用 [在庫一覧へ]button*/
.stock_button{
	text-align: center;
	& > a {
		display:block;
		width:12rem;
		margin:0 auto 10px;
		padding: 0.5rem 1rem;
		background-color:#00afcc;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		  border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-bottomleft: 5px;
		-moz-border-radius-bottomright: 5px;
		color:#fff;
		font-size:1.8vw;
		font-weight:bold;
		line-height:1.5rem;
		text-decoration: none;
	}
	& > a:hover{
		background-color:#03d2f7;
		color:#000;
	}
}

/* ------------------------------------------------ */
/* タブレット 縦向き*/
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (min-width: 760px) and (max-width:1300px) {
    h2:nth-child(2) {
        font-size: 1.5vw;
    }
}

/* ------------------------------------------------ */
/* レスポンシブ（780px以下）
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:780px) {
    h2 {
        letter-spacing: 0.2em;
        margin-bottom:0;
        font-size: 1.1rem;
	}
    h2:nth-of-type(2) {
        text-align:left;
        letter-spacing: 0.1em;
        font-size: 0.8rem;
	}
	.sub_toptitle {
		font-size: 1.2rem;
		padding: 1rem;
		&:before{
			font-size:1.4rem;
		}
	}
    .stock_button{
        text-align: center;
        & > a {
            font-size:1rem;
        }
    }

    #business_contents{
        width:80%;
        display: block;
        margin:1rem auto;
        & div{
            margin:1rem auto;
        }
        & h3{
            text-align:center;
            font-size:1.1rem;
            color:#444;
        }
        & img{
            width:80%;
            margin:1rem auto;
            border:none;
        }
    }
    /*鋼材販売用 [在庫一覧へ]button*/
	.stock_button{
		margin: 2rem auto 1rem;
	}
}

/* ------------------------------------------------ */
/* 380px以下に対応
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (max-width:380px)  and (max-height: 890px){
    h2:nth-of-type(2) {
        text-align:left;
        font-size: 0.8rem;
    }
    #business_contents{
        width:80%;
        display: block;
        margin:1rem auto;
        & div{
            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) {
    h2 {
        letter-spacing: 0.2em;
        margin-bottom:0;
        font-size: 1.1rem;
    }
	h2:nth-of-type(2){
		text-align:left;
		font-size: 0.8rem;
	}
	.sub_toptitle {
		font-size: 1.2rem;
		padding: 1rem;
		&:before{
			font-size:1.4rem;
		}
	}
    .stock_button{
        text-align: center;
        & > a {
            font-size:0.8rem;
        }
    }
    #business_contents{
        & h3{
            font-size:0.8rem;
            }
    }
}