@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/*ガス メイン end*/
.gas-content{
	width: 60%;
	max-width: 1200px;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 3fr;
	place-content: center;
	grid-template-areas: 
	"boxA boxB";
}
.gas-image{
	grid-area: boxA;
	width: 80%;
	margin: auto;
}
.gas-text{
	grid-area: boxB;
	width: 80%;
	margin: auto;
}
.situation-content{
	width: 40%;
	margin: 10px auto 10px auto;
	display: grid;
	grid-template-columns: 1fr 2fr 2fr;
	grid-template-rows: auto;
	grid-template-areas:
	"boxA boxB boxC"
	"boxD boxE boxF";
	background-color: #fffef3;
	place-items: center;
	padding: 50px;
}
.gas{
	grid-area: boxA;
	width: 80%;
}
.gas-baai{
	grid-area: boxB;
	place-items: center;
}
.gas-baai p{
	font-size: 1.4rem;
	font-weight: 600;
}
.gas-baai1{
	grid-area: boxB;
}
.gas-baai1 p{
	font-size: 0.8rem;
	font-weight: 600;
}
.gas-ondo{
	grid-area: boxC;
	place-items: center;
}
.gas-ondo p{
	font-size: 1.4rem;
	font-weight: 400;
}
.gas-ondo1{
	background-color: #f3aecc;
	border-radius: 15px;
}
.gas-ondo1 p{
	font-size: 1.4rem;
	font-weight: 600;
	color: white;
	padding: 20px;
}
.gas-ondo2{
	background-color: #83ceed;
	border-radius: 15px;
}
.gas-ondo2 p{
	font-size: 1.4rem;
	font-weight: 600;
	color: white;
	padding: 20px;
}
/*ガス メイン end*/

/*高圧ガス保安法 start*/
.law-content{
	width: 50%;
	max-width: 1200px;
	margin: 50px auto 150px auto;
}
.law-content h1{
	font-size: 1.4rem;
}
/*高圧ガス保安法 end*/
/*高圧ガスを使用する前に start*/
.before-container{
	width: 100%;
	background-color: #fffef3;
}
.before{
	width: 50%;
	margin: 20px auto 50px auto;
	text-align: center;
}
.before p{
	font-size: 1.4rem;
}
.before-content{
	width: 60%;
	max-width: 1200px;
	margin: 0px auto 100px auto;
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
	place-content: center;
}
.gas-card{
	width: calc(20% - 30px);
		min-width: 200px;
}
.gas-card h1{
	font-size: 1.6rem;
	color: white;
}
.gas-card h2{
	font-size: 1.0rem;
	color: white;
}
.gas-card p{
	font-size: 1.0rem;
	color: white;
	padding: 20px 20px 20px 20px;
}
.before-box1{
	width: calc( 100%); 

	background-color: #009ed3;
	place-items: center;
	padding: 5px 0px 5px 0px;
	margin-bottom: 20px;
	border-radius: 10px;;
	height: 350px;

}
.before-box2{
	width: calc( 100%); 
	background-color: #05a7c6;
	place-items: center;
	padding: 5px 0px 5px 0px;
	margin-bottom: 20px;
	border-radius: 10px;;
	height: 350px;
}
.before-box1 p, .before-box2 p{
	color: white;
	margin-bottom: 20px;
}
.gas-link{
	border: 1px solid rgba(192,192,192,1.00);
	border-radius: 10px;
	width: 70%;
	max-width: 140px;
	display: flex;
	flex-flow: row wrap;
	place-content: center;
	margin:0px auto 50px auto;
	background-color: white;
}
.gas-link p{
	color: rgba(54,54,54,1.00); 
	padding: 0px 10px 0px 10px;
	font-size: 0.9rem;
}
.gas-link img{
	width: 8px;
}
/*高圧ガスを使用する前に end*/
}
@media screen and (min-width: 481px) and (max-width: 1024px){

/*ガス メイン 1024－481  end*/
.gas-content{
	width: 90%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	place-content: center;
	grid-template-areas: 
	"boxA boxB";
}
.gas-image{
	grid-area: boxA;
	width: 80%;
	margin: auto;
}
.gas-text{
	grid-area: boxB;
	width: 90%;
	margin: auto;
}
.situation-content{
	width: calc( 100% - 40px);
	margin: 10px auto 10px auto;
	display: grid;
	grid-template-columns: 1fr 2fr 2fr;
	grid-template-rows: auto;
	grid-template-areas:
	"boxA boxB boxC"
	"boxD boxE boxF";
	background-color: #fffef3;
	place-items: center;
	padding: 50px 10px 50px 10px;
}
.gas{
	grid-area: boxA;
	width: 90%;
}
.gas-baai{
	grid-area: boxB;
	place-items: center;
}
.gas-baai p{
	font-size: 1.2rem;
	font-weight: 600;
}
.gas-baai1{
	grid-area: boxB;
}
.gas-baai1 p{
	font-size: 0.8rem;
	font-weight: 600;
}
.gas-ondo{
	grid-area: boxC;
	place-items: center;
}
.gas-ondo p{
	font-size: 1.0rem;
	font-weight: 400;
}
.gas-ondo1{
	background-color: #f3aecc;
	border-radius: 15px;
}
.gas-ondo1 p{
	font-size: 1.0rem;
	font-weight: 600;
	color: white;
	padding: 10px;
}
.gas-ondo2{
	background-color: #83ceed;
	border-radius: 15px;
}
.gas-ondo2 p{
	font-size: 1.0rem;
	font-weight: 600;
	color: white;
	padding: 10px;
}
/*ガス メイン 1024－481  end*/

/*高圧ガス保安法 1024－481  start*/
.law-content{
	width: 80%;
	margin: 50px auto 150px auto;
}
.law-content h1{
	font-size: 1.4rem;
}
/*高圧ガス保安法 1024－481  end*/
/*高圧ガスを使用する前に 1024－481  start*/
.before-container{
	width: 100%;
	background-color: #fffef3;
}
.before{
	width: 90%;
	margin: 20px auto 50px auto;
	text-align: center;
}
.before p{
	font-size: 1.4rem;
}
.before-content{
	width: 90%;
	margin: 0px auto 100px auto;
	display: flex;
	flex-flow: row wrap;
	gap: 3%;
	place-content: center;
	
}
.gas-card{
	width: calc(25% - 10px);
	max-width: 1300px;
	min-width: 200px;
}
.gas-card h1{
	font-size: 1.6rem;
	color: white;
}
.gas-card h2{
	font-size: 1.0rem;
	color: white;
}
.gas-card p{
	font-size: 1.0rem;
	color: white;
	padding: 20px 20px 20px 20px;
}
.before-box1{
	width: calc( 100%); 
	background-color: #009ed3;
	place-items: center;
	padding: 5px 0px 5px 0px;
	margin-bottom: 20px;
	border-radius: 10px;;
	height: 320px;

}
.before-box2{
	width: calc( 100%); 
	background-color: #05a7c6;
	place-items: center;
	padding: 5px 0px 5px 0px;
	margin-bottom: 20px;
	border-radius: 10px;;
	height: 320px;
}
.before-box1 p, .before-box2 p{
	color: white;
	margin-bottom: 20px;
}
.gas-link{
	border: 1px solid rgba(192,192,192,1.00);
	border-radius: 10px;
	width: 70%;
	display: flex;
	flex-flow: row wrap;
	place-content: center;
	margin:0px auto 50px auto;
	background-color: white;
}
.gas-link p{
	color: rgba(54,54,54,1.00); 
	padding: 0px 10px 0px 10px;
	font-size: 0.9rem;
}
.gas-link img{
	width: 8px;
}
/*高圧ガスを使用する前に 1024－481 end*/
}
@media screen and (max-width: 480px){
/*ガス メイン -480  end*/
.gas-content{
	width: 90%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr;
	place-content: center;
	grid-template-areas: 
	"boxA"
	"boxB";
}
.gas-image{
	grid-area: boxA;
	width: 60%;
	margin: auto;
}
.gas-text{
	grid-area: boxB;
	width: 100%;
	margin: auto;
}
.situation-content{
	width: calc( 100% - 100px);
	margin: 10px auto 50px auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"boxA"
	"boxB"
	"boxC"
	"boxD"
	"boxE"
	"boxF";
	background-color: #fffef3;
	place-items: center;
	padding: 20px;
}
.gas{
	grid-area: boxA;
	width: 50%;
}
.gas-baai{
	grid-area: boxB;
	place-items: center;
}
.gas-baai p{
	font-size: 1.1rem;
	font-weight: 600;
}
.gas-baai1{
	grid-area: boxB;
}
.gas-baai1 p{
	font-size: 0.8rem;
	font-weight: 600;
}
.gas-ondo{
	grid-area: boxC;
	place-items: center;
}
.gas-ondo p{
	font-size: 1.0rem;
	font-weight: 400;
}
.gas-ondo1{
	background-color: #f3aecc;
	border-radius: 15px;
}
.gas-ondo1 p{
	font-size: 1.0rem;
	font-weight: 600;
	color: white;
	padding: 20px;
}
.gas-ondo2{
	background-color: #83ceed;
	border-radius: 15px;
}
.gas-ondo2 p{
	font-size: 1.0rem;
	font-weight: 600;
	color: white;
	padding: 20px;
}
/*ガス メイン -480  end*/

/*高圧ガス保安法 -480  start*/
.law-content{
	width: 90%;
	margin: 50px auto 150px auto;
}
.law-content h1{
	font-size: 1.4rem;
}
/*高圧ガス保安法 -480  end*/
/*高圧ガスを使用する前に -480  start*/
.before-container{
	width: 100%;
	background-color: #fffef3;
}
.before{
	width: 90%;
	margin: 20px auto 50px auto;
	text-align: center;
}
.before p{
	font-size: 1.4rem;
}
.before-content{
	width: 95%;
	margin: 0px auto 100px auto;
	display: flex;
	flex-flow: row wrap;
	gap: 3%;
	place-content: center;
	
}
.gas-card{
	width: calc(80% - 10px);
	max-width: 1300px;
	min-width: 150px;
}
.gas-card h1{
	font-size: 1.6rem;
	color: white;
}
.gas-card h2{
	font-size: 1.0rem;
	color: white;
}
.gas-card p{
	font-size: 1.0rem;
	color: white;
	padding: 20px 20px 20px 20px;
}
.before-box1{
	width: calc( 100%); 
	background-color: #009ed3;
	place-items: center;
	padding: 5px 0px 5px 0px;
	margin-bottom: 20px;
	border-radius: 10px;;
	height: 230px;
}
.before-box2{
	width: calc( 100%); 
	background-color: #05a7c6;
	place-items: center;
	padding: 5px 0px 5px 0px;
	margin-bottom: 20px;
	border-radius: 10px;;
	height: 230px;
}
.before-box1 p, .before-box2 p{
	color: white;
	margin-bottom: 20px;
}
.before-box1 h1, .before-box2 h1{
	margin-top: -10px;
	margin-bottom: -20px;
}
.gas-link{
	border: 1px solid rgba(192,192,192,1.00);
	border-radius: 10px;
	width: 50%;
	display: flex;
	flex-flow: row wrap;
	place-content: center;
	margin:0px auto 50px auto;
	background-color: white;
	max-width: 150px;
}
.gas-link p{
	color: rgba(54,54,54,1.00); 
	padding: 0px 10px 0px 10px;
	font-size: 0.9rem;
}
.gas-link img{
	width: 8px;
}
/*高圧ガスを使用する前に -480 end*/

}