@charset "UTF-8";

/*Copyright 2018 Hyuga Kouzai.*/
/* CSS Document */
/* ------------------------------------------------ */
/* プラズマ加工用(plasma.html)
/* ------------------------------------------------ */
#p_contents{
	display: -webkit-grid;
	display: -moz-grid;
	display: -ms-grid;
	display: -o-grid;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:3rem;
	width:80%;
	margin:1rem auto 3rem;
	-webkit-align-items: center; 
	align-items: center; 
	text-align:center;
	& div:first-child{
		& > img{
			width:100%;
		}
	}
	& div:last-child{
		text-align:left;
		line-height:1.2rem;
		font-size:1.6vw;
		& > p{
			margin:0.5rem auto;
			line-height:1rem;
			font-weight:bold;
			text-align:center;
			font-size:2vw;
			color:red;
			font-family:Verdana,sans-serif;
		}
	}
}
/* タイトルのスタイル */
h2:nth-of-type(n+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;
	color: #fff;
	text-align:center;
	line-height:1.2rem;
	margin:0.5rem 1rem;
	padding: 0.2rem;
	background-color:#fb8b02;
	background-image:none;
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;	height:100%;
    border-radius: 5px;
	letter-spacing:0.1rem;
	font-weight: bold;
	font-size: 1.8vw;
}

/* youtube plasma */
.p_ywrap{
	margin:1rem auto;
	width:90%;
	& .inner{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem;
		width:96%;
		margin:1rem auto;
		text-align: center;
	}
	& .video-wrapper{
		width: 100%;
		position: relative;
		margin: 1rem auto;
		padding-bottom: 56.25%;
		padding-top: 25px;
		height: 0;
		aspect-ratio: 16 / 9;
	}
	& .video-wrapper iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}
}
.example{
	& > p{
		width:80%;
		height:4vw;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		margin:1rem auto;
		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;
		-webkit-align-items: center;
		align-items:center;
		-webkit-justify-content: center;
		justify-content:center;
		font-size:1.6vw;
		font-weight:bold;
	}
	& > ul {
	display: -webkit-grid;
	display: -moz-grid;
	display: -ms-grid;
	display: -o-grid;
	display: grid;
	width:80%;
	margin:1rem auto;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	place-content: center;
	gap:3vw;
	& > li{
		width:100%;
		& > h3{
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			font-size:1.6vw;
			height:4vw;
			margin-top:5px;
			margin-bottom: 5px;
			-webkit-align-items: center; 	
			align-items: center; 	
			-webkit-justify-content: center; 	
			justify-content: center; 	
			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;
		}
		& > p{
			text-decoration: none;
			margin:0 auto;
			padding:1rem;
			border-radius: 5px;
			line-height: 2vw;
			font-size:1.4vw;
			font-weight: bold;
			/*background-color:#e3e3e3;*/
		}
		& > img{
			width:100%;
			border-radius:5px;

		}
	}
}
}
.p_wrap{
	& > p{
		width:80%;
		height:4vw;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		margin:1rem auto;
		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;
		-webkit-align-items: center;
		align-items:center;
		-webkit-justify-content: center;
		justify-content:center;
		font-size:1.6vw;
		font-weight:bold;
	}
    & > img{
        display:block;
        width:60%;
        margin:1rem auto;
    }
    & > img:nth-child(2){
        display:block;
        width:50%;
        margin:0.5rem auto 1rem;
		border-radius:5px;
    }
}

/* ------------------------------------------------ */
/* タブレット 縦向き*/
/* ------------------------------------------------ */
@media screen and (orientation: portrait) and (min-width: 760px) and (max-width:1300px) {
    .example ul {
        width:85%;
        gap:2rem;
    }
}

/* ------------------------------------------------ */
/* レスポンシブ（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(n+2) {
        font-size: 1rem;
    }
	#p_contents{
		display: block;
		width: 95%;
		& div:first-child img{
			width:90%;
		}
		& div:last-child{
			width:90%;
			margin:1rem auto;
			font-size:1rem;
            & p {
                line-height:2rem;
                font-size:1.2rem;
            }
        }
	}
	.example{
		& > p{
			width: 90%;
			height:1.6rem;
			margin:1rem auto;
			font-size:0.8rem;
		}
		& > ul {
			width:80%;
			margin:1rem auto;
			gap:1rem;
			& > li{
				width:100%;
				& > h3{
					height:2.5rem;
					font-size:1rem;}
				& > p{
					text-decoration: none;
					margin:0 auto;
					padding:0.5rem 1rem 1rem;
					border-radius: 5px;
					line-height: 1.2rem;
					font-size:0.8rem;
					font-weight: bold;
					/*background-color:#e3e3e3;*/
				}
				& > img{
					width:100%;
					margin:0.5rem auto;
				}
			}
		}
	}
	.p_wrap{
		& > p{
			width: 90%;
			height:1.6rem;
			margin:1rem auto;
			font-size:0.8rem;
		}
		& > img{
			display:block;
			width:80%;
			margin:1rem auto;
		}
		& > img:nth-child(2){
			display:block;
			width:80%;
			margin:0.5rem auto 1rem;
		}
	}

	/* youtube plasma */
	.p_ywrap{
		margin:1rem auto;
		width:90%;
		& .inner{
			display: block;
			width:90%;
			margin:0 auto 2rem;
			padding-bottom:0rem;
			text-align: center;
		}
		& .video-wrapper{
			margin: 1rem auto 0;
		}
	}
}

/* ------------------------------------------------ */
/* スマホ横向き時 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(n+2){
        letter-spacing: 0.2em;
        margin-bottom:0;
		line-height:1.6rem;
        font-size: 1.1rem;
    }
	.example{
		& > p{
			width: 90%;
			height:1.8rem;
			margin:1rem auto;
			font-size:1rem;
		}
		& > ul {
			width:80%;
			margin:1rem auto;
			gap:1rem;
			& > li{
				width:100%;
				& > h3{
					height:2.5rem;
					font-size:0.8rem;}
				& > p{
					margin:0 auto;
					padding:0.5rem 1rem 1rem;
					border-radius: 5px;
					line-height: 1.2rem;
					font-size:0.8rem;
					font-weight: bold;
					/*background-color:#e3e3e3;*/
				}
				& > img{
					width:100%;
					margin:0.5rem auto;
				}
			}
		}
	}
	.p_wrap{
		& > p{
			width: 90%;
			height:1.8rem;
			margin:1rem auto;
			font-size:0.8rem;
		}
		& > img{
			display:block;
			width:80%;
			margin:1rem auto;
		}
		& > img:nth-child(2){
			display:block;
			width:80%;
			margin:0.5rem auto 1rem;
		}
	}
}