@charset "utf-8";
/* CSS Document */
/*溶接の表 メイン start*/
.weld-table{
	width: 70%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:  
		"A B C D E"
		"F G H H H"
		"K L M N O"
		"P Q R S T";
	gap: 1%;
	place-content: center;
	text-align: center;
}
.weld-table img{
	max-width: 150px;
}
.grid-A, .grid-B, .grid-C, .grid-D, .grid-E, .grid-F, .grid-G, .grid-H, .grid-K, .grid-L, .grid-M, .grid-N, .grid-O, .grid-P, .grid-Q, .grid-R, .grid-S, .grid-T{
	background-color: aliceblue;
	place-content: center;
}
.grid-A p, .grid-B p, .grid-C p, .grid-D p, .grid-E p, .grid-F p, .grid-G p, .grid-H p, .grid-K p, .grid-L p, .grid-M p, .grid-N p, .grid-O p, .grid-P p, .grid-Q p, .grid-R p, .grid-S p, .grid-T p{
	font-weight: 500;
	font-size: 0.9rem;
}
.grid-A{
	grid-area: A;
	background-color: white;
}
.grid-B{
	grid-area: B;
}
.grid-C{
	grid-area: C;
}
.grid-D{
	grid-area: D;
}
.grid-E{
	grid-area: E;
}
.grid-B p, .grid-C p, .grid-D p, .grid-E p{
	color: white;
	line-height: 2.0;
	background-color: #0e61ab;
	margin-top: 0px;
}
.grid-F{
	grid-area: F;
}
.grid-G{
	grid-area: G;
}
.grid-H{
	grid-area: H;
}
.grid-K{
	grid-area: K;
}
.grid-L{
	grid-area: L;
}
.grid-M{
	grid-area: M;
}
.grid-N{
	grid-area: N;
}
.grid-O{
	grid-area: O;
}
.grid-P{
	grid-area: P;
}
.grid-Q{
	grid-area: Q;
}
.grid-R{
	grid-area: R;
}
.grid-S{
	grid-area: S;
}
.grid-T{
	grid-area: T;
}
.grid-F , .grid-K, .grid-P{
	box-shadow: 5px 5px 5px gray;
	background-color: #f1f3f4;
}

/*溶接の表 メイン end*/


/*溶接（ガス、アーク、半自動、TIG） start*/
.explain-section{
	width: 100%;
	margin-top: 100px;
}
.explain-section p{
	font-size: 1.0rem;
	text-align: center;
}
.explain-content{
	width: 70%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
	"box01 box02 box02"
	"box01 box03 box04";
	gap: 2%;
	place-content: center;
}
.explain-title{
	grid-area: box01;
	text-align: center;
	margin-top: 20px;
}
.explain-title p{
	font-weight: 600;
	font-size: 1.2rem;	
}
.explain-title img{
	max-width: 300px;	
}
.explain-text{
	grid-area : box02;
	margin-top: 50px;
}
.explain-text p{
	text-align: left;
}
.explain-card{
	grid-area: box03;
	background-color: white;
	width: 80%;
	margin-bottom: 50px;
}
.explain-card p{
	font-size: 0.8rem;
	font-weight: 600;
	text-align: left;
	margin: 20px 20px 20px 20px;
	}
.explain-link{ 
	grid-area: box04;
	border-radius: 10px;
	width: 70%;
	height: 50px;
	place-content: center;
}
.explain-link p{
	color: white;
	font-weight: 600;
	font-size: 0.9rem;
	margin: auto;
	
}
/*溶接（ガス、アーク、半自動、TIG） end*/

/* 工具の三河屋*/
.mikawaya{
	width: 100%;
	background-image: url("../img/index/mikawaya-back.svg");
	background-size: cover;
	place-items: center;
	padding-bottom: 50px;
	padding-top: 50px;
	margin-bottom: 150px;
	margin-top: 100px;
}
.mikawaya h1{
	font-weight: 500;
	font-size: 1.6rem;
}
.mikawaya-section{
	display: flex;
	flex-flow: row wrap;
	width: 80%;
	margin: auto;
	gap: 5%;
	place-content: center;
	margin: 50px auto 50px auto;
}
.mikawaya-card{
	width: 15%;
	max-width: 200px;
}
.youtube{
	margin: 50px auto 20px auto;
	width: 10%;
}
/* 工具の三河屋*/
/* MAP */
.map{
	width: 100%;
	text-align: center;
}
.map-img{
	width: 100%;
}
.map-section{
	width: 40%;
	margin: 50px auto 100px auto;
	display: grid;
	grid-template-columns: 1fr 1fr 4fr;
	grid-template-rows: auto;
	place-items: center;
	min-width: 900px;
}
.map-section h1{
	font-size: 1.2rem;
	font-weight: 500;
}
.map-section p{
	font-weight: 500;
}
.map-icon{
	width: 100%;
	max-width: 100px;
}
.map-content{
}
/* MAP */

@media screen and (min-width: 481px) and (max-width: 1024px){
/*溶接の表 1024-481 start*/
.weld-table{
	width: 80%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:  
		"A B C D E"
		"F G H H H"
		"K L M N O"
		"P Q R S T";
	gap: 1%;
	place-content: center;
	text-align: center;
}
.weld-table img{
	max-width: 150px;
}
.grid-A, .grid-B, .grid-C, .grid-D, .grid-E, .grid-F, .grid-G, .grid-H, .grid-K, .grid-L, .grid-M, .grid-N, .grid-O, .grid-P, .grid-Q, .grid-R, .grid-S, .grid-T{
	background-color: aliceblue;
	place-content: center;
}
.grid-A p, .grid-B p, .grid-C p, .grid-D p, .grid-E p, .grid-F p, .grid-G p, .grid-H p, .grid-K p, .grid-L p, .grid-M p, .grid-N p, .grid-O p, .grid-P p, .grid-Q p, .grid-R p, .grid-S p, .grid-T p{
	font-weight: 500;
	font-size: 0.9rem;
}
.grid-A{
	grid-area: A;
	background-color: white;
}
.grid-B{
	grid-area: B;
}
.grid-C{
	grid-area: C;
}
.grid-D{
	grid-area: D;
}
.grid-E{
	grid-area: E;
}
.grid-B p, .grid-C p, .grid-D p, .grid-E p{
	color: white;
	line-height: 2.0;
	background-color: #0e61ab;
	margin-top: 0px;
}
.grid-F{
	grid-area: F;
}
.grid-G{
	grid-area: G;
}
.grid-H{
	grid-area: H;
}
.grid-K{
	grid-area: K;
}
.grid-L{
	grid-area: L;
}
.grid-M{
	grid-area: M;
}
.grid-N{
	grid-area: N;
}
.grid-O{
	grid-area: O;
}
.grid-P{
	grid-area: P;
}
.grid-Q{
	grid-area: Q;
}
.grid-R{
	grid-area: R;
}
.grid-S{
	grid-area: S;
}
.grid-T{
	grid-area: T;
}
.grid-F , .grid-K, .grid-P{
	box-shadow: 5px 5px 5px gray;
	background-color: #f1f3f4;
}

/*溶接の表 1024-481 end*/
/*ガス溶接 1024-481 start*/
.explain-section{
	width: 100%;
	margin-top: 100px;
}
.explain-section p{
	font-size: 1.0rem;
	text-align: center;
}
.explain-content{
	width: 85%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
	"box01 box02 box02"
	"box01 box03 box04";
	gap: 2%;
	place-content: center;
}
.explain-title{
	grid-area: box01;
	text-align: center;
	margin-top: 20px;
}
.explain-title p{
	font-weight: 600;
	font-size: 1.2rem;	
}
.explain-title img{
	max-width: 300px;	
}
.explain-text{
	grid-area : box02;
	margin-top: 50px;
}
.explain-text p{
	text-align: left;
}
.explain-card{
	grid-area: box03;
	background-color: white;
	width: 90%;
	margin-bottom: 50px;
}
.explain-card p{
	font-size: 0.8rem;
	font-weight: 600;
	text-align: left;
	margin: 20px 20px 20px 20px;
	}
.explain-link{ 
	grid-area: box04;
	border-radius: 10px;
	width: 90%;
	justify-content: center;
	align-items: right;
	height: 50px;
}
.explain-link p{
	color: white;
	font-weight: 600;
	font-size: 0.9rem;
	
}
/*ガス溶接 1024-481 end*/
/* 工具の三河屋1024-481*/
.mikawaya{
	width: 100%;
	background-image: url("../img/index/mikawaya-back.svg");
	background-size: cover;
	place-items: center;
	padding-bottom: 50px;
	margin-bottom: 150px;
	margin-top: 100px;
}
.mikawaya h1{
	font-weight: 500;
	font-size: 1.6rem;
}
.mikawaya p{
	width: 90%;
}
.mikawaya-section{
	display: flex;
	flex-flow: row wrap;
	width: 80%;
	margin: auto;
	gap: 5%;
	place-content: center;
	margin: 50px auto 50px auto;
}
.mikawaya-card{
	width: 20%;
	max-width: 200px;
}
.youtube{
	margin: 50px auto 20px auto;
	width: 15%;
}
/* 工具の三河屋1024-481*/

/* MAP1024-481 */
.map{
	width: 100%;
	text-align: center;
}
.map-img{
	width: 100%;
}
.map-section{
	width: 75%;
	margin: 50px auto 0px auto;
	display: grid;
	grid-template-columns: 1fr 1fr 4fr;
	grid-template-rows: auto;
	place-items: center;
	min-width: 320px;
}
.map-section h1{
	font-size: 1.0rem;
	font-weight: 500;
}
.map-section p{
	font-size: 0.8;
	font-weight: 500;
}
.map-icon{
	width: 100%;
	max-width: 100px;
}
.map-content{

}
/* MAP1024-481 */

}
@media screen and (max-width: 480px){
/*溶接の表 -480 start*/
.weld-table{
	width: 98%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:  
		"A B C D E"
		"F G H H H"
		"K L M N O"
		"P Q R S T";
	gap: 1%;
	place-content: center;
	text-align: center;
}
.weld-table img{
	max-width: 150px;
}
.grid-A, .grid-B, .grid-C, .grid-D, .grid-E, .grid-F, .grid-G, .grid-H, .grid-K, .grid-L, .grid-M, .grid-N, .grid-O, .grid-P, .grid-Q, .grid-R, .grid-S, .grid-T{
	background-color: aliceblue;
	place-content: center;
}
.grid-A p, .grid-B p, .grid-C p, .grid-D p, .grid-E p, .grid-F p, .grid-G p, .grid-H p, .grid-K p, .grid-L p, .grid-M p, .grid-N p, .grid-O p, .grid-P p, .grid-Q p, .grid-R p, .grid-S p, .grid-T p{
	font-weight: 500;
	font-size: 0.8rem;
}
.grid-A{
	grid-area: A;
	background-color: white;
}
.grid-B{
	grid-area: B;
}
.grid-C{
	grid-area: C;
}
.grid-D{
	grid-area: D;
}
.grid-E{
	grid-area: E;
}
.grid-B p, .grid-C p, .grid-D p, .grid-E p{
	color: white;
	line-height: 2.0;
	background-color: #0e61ab;
	margin-top: 0px;
	font-size: 0.8rem;
}
.grid-F{
	grid-area: F;
}
.grid-G{
	grid-area: G;
}
.grid-H{
	grid-area: H;
}
.grid-K{
	grid-area: K;
}
.grid-L{
	grid-area: L;
}
.grid-M{
	grid-area: M;
}
.grid-N{
	grid-area: N;
}
.grid-O{
	grid-area: O;
}
.grid-P{
	grid-area: P;
}
.grid-Q{
	grid-area: Q;
}
.grid-R{
	grid-area: R;
}
.grid-S{
	grid-area: S;
}
.grid-T{
	grid-area: T;
}
.grid-F , .grid-K, .grid-P{
	box-shadow: 5px 5px 5px gray;
	background-color: #f1f3f4;
}

/*溶接の表 -480 end*/

/*ガス溶接 -480 start*/
.explain-section{
	width: 100%;
	margin-top: 100px;
}
.explain-section p{
	font-size: 1.0rem;
	text-align: center;
}
.explain-content{
	width: 90%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
	"box01"
	"box02"
	"box03"
	"box04";
	/*gap: 2%;*/
	place-content: center;
}
.explain-title{
	grid-area: box01;
	text-align: center;
	margin-top: 60px;
}
.explain-title p{
	font-weight: 600;
	font-size: 1.2rem;
}
.explain-title img{
	width: 70%;
	max-width: 300px;	
}
.explain-text{
	grid-area : box02;
	margin-top: 0px;
}
.explain-text p{
	text-align: left;
}
.explain-card{
	grid-area: box03;
	background-color: white;
	width: 90%;
	margin: 0px auto 30px auto;
}
.explain-card p{
	font-size: 0.8rem;
	font-weight: 600;
	text-align: left;
	margin: 20px 20px 20px 20px;
	}
.explain-link{ 
	grid-area: box04;
	border-radius: 10px;
	width: 90%;
	margin: 0px auto 80px auto;
	justify-content: center;
	align-items: right;
	height: 50px;
}
.explain-link p{
	color: white;
	font-weight: 600;
	font-size: 0.9rem;
	
}
/*ガス溶接 -480 end*/

/* 工具の三河屋480*/
.mikawaya{
	width: 100%;
	background-image: url("../img/index/mikawaya-back.svg");
	background-size: cover;
	place-items: center;
	padding-bottom: 50px;
	margin-bottom: 150px;
	margin-top: 100px;
}
.mikawaya h1{
	font-weight: 500;
	font-size: 1.6rem;
}
.mikawaya p{
	width: 90%;
}
.mikawaya-section{
	display: flex;
	flex-flow: column wrap;
	width: 80%;
	margin: auto;
	gap: 10%;
	place-content: center;
	margin: 50px auto 50px auto;
}
.mikawaya-card{
	width: 40%;
	max-width: 200px;
}
.youtube{
	margin: 50px auto 20px auto;
	width: 30%;
}
/* 工具の三河屋480*/

/* MAP480 */
.map{
	width: 100%;
	text-align: center;
}
.map-img{
	width: 100%;
}
.map-section{
	width: 75%;
	margin: 50px auto 0px auto;
	display: grid;
	grid-template-columns: 100% ;
	grid-template-rows: auto;
	place-items: center;
	min-width: 300px;
}
.map-section h1{
	font-size: 1.0rem;
	font-weight: 600;
}
.map-section p{
	font-size: 1rem;
	font-weight: 500;
}
.map-icon{
	margin-top: 30px;
	width: 50%;
	/*max-width: 100px;*/
}
.map-content{

}
/* MAP480 */


}