@charset "UTF-8";
/* CSS Document */

/* 共通部分　---------------------------------------*/
html{ font-size: 100%; }
body{
	font-family: "Yu Gothic medium","遊ゴシック medium", YuGothic,"遊ゴシック体",''"ヒラギノ角ゴ Pro W3" sans-serif ;
	line-height: 1.7;
	color: #432;
}
a{ text-decoration: none; }
img{ max-width: 100%; }
.wrapper{
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 4%;
}
span{
	color:rgba(51,175,204,1.00);
	font-weight: bold;
	padding-left: 5%;	
	text-align: justify;
}

/* ヘッダー　---------------------------------------*/
#home{
	position:fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.logo{
	width: 200px;
	margin-top: 6%;
}
.main-nav{
	display: flex;
	font-size: 1.25rem;
	margin-top: 6%;
	list-style: none;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";	
}
.main-nav li{ 
	margin-left: 36px;
}
.main-nav a{ color: #ffffff; 
             display:block;
             width:100%;
             padding:0 10px;}
.main-nav a:hover{
	color: #183A9A; 
	
}

.page-header{
	display: flex;
	justify-content: space-between;
	background-color: rgba(51,175,204,0.50);
	
}


/* top　---------------------------------------*/
#top{
	width: 100%;
	margin: 0 auto;
	max-width: auto;
	text-align: center;
}

/* about　---------------------------------------*/
#about {
	text-align: center;
}
.about h2{
	color: rgba(51,175,204,1.00);
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.about p{
	margin-top: 10px;
	color: rgba(76,76,76,1.00);
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";

}

/* Product　---------------------------------------*/
#product{
	margin-top: 30px;
}

#product h2{
	color: #800000;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	text-align: center;
	font-size: 2rem;
}

.grid{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
	margin-top: 2%;
	margin-bottom: 30px;
	grid-gap: 26px;
}

.grid h3{
    color: #33AFCC;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    text-align: center;
}

.grid p{
	color: rgba(76,76,76,1.00);
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	text-align: center;

}


/* 2.3段目　------------------*/
.grid-3{
	display: flex;
	margin-top: 2%;
	margin-bottom: 30px;
	text-align: center;
}
.grid-3 h3{
	color: rgba(51,175,204,1.00);
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	text-align: center;
}

.grid-3 p{
	color: rgba(76,76,76,1.00);
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	text-align: left;
}

.item4 p{
	text-align: left;
	margin-top: 3%;
}


/* company　---------------------------------------*/
#company{
	margin-top: 50px;
	margin-bottom: 50px;
}

#company .wrapper{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#company h2{
	color: #800000;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	text-align: center;
	font-size: 2rem;
	margin-bottom: 30px;
}

.sel{color: rgba(76,76,76,1.00);
	width: 50%;
	font-size: 0.85rem;
	border-collapse: collapse;
    border: none;
	padding-left: 10px;	
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.sel th{
	width: 80px;
	line-height: 1.7rem;
	border: dashed 1px rgba(183,183,183,1.00);
}

.sel td{
	padding: 3px;
	line-height: 1.7rem;
	border: dashed 1px rgba(183,183,183,1.00);
}

/* map　---------------------------------------*/
.map{
	width: 48%;
}
iframe{
	width: 100%;
}

/* sns　---------------------------------------*/
.sns {
	margin-top: 30px;
	display: flex;
	justify-content: center;
}
.sns a{
	margin: 0 20px;
}

/* contact　---------------------------------------*/
input[type="submit"]{
	text-align: center;
	font-size: 1.25rem;	
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	padding: 15px;
	width: 300px;
	border-radius: 10px;
	color: #fff;
	background-color: rgba(51,175,204,1.00);
	cursor: pointer;
	border: none;
	display: block;
}
input[type="submit"]:hover{
	background-color: rgba(24,58,154,0.80);
}

.contact input{
	margin: 0 auto;
	max-width: 1000px;
	margin-bottom: 60px;
}

/* footer　---------------------------------------*/
footer{
	background-color: rgba(51,175,204,0.70);
	color: #fff;
	max-width: 1000px;
	margin: 0 auto;
	padding-bottom: 5px;
}
.footer{
	display: flex;
	justify-content: space-between;
	align-items:flex-end;
}

.footer img{
	margin-top: 10px;	
}


/* @レスポンシブ　---------------------------------------*/
@media (max-width: 600px) {
/*-- このコメント行の下に、スマートフォン用のCSSを記述 --*/
	/* ヘッダー　-------*/
	.page-header{
		font-size: 1.2rem;
		display: flex;
		flex-direction: column;
	}
	.page-header h1{
		width: 50%;
		height: 50%;
		margin: 0 auto;
	    max-width: 600px;
	}
	.main-nav{
		margin-top: -10px;
		font-size: 1.5rem;
	}
	.main-nav li{
		margin-left: 30px;
		margin: 0 auto;
	    max-width: 600px;
	}
	/* トップ　-------*/
	.top p{
		font-size: 1rem;
		text-align: center;
	    padding-left: 8%;
	}
	/* 会社について　-------*/
	.about h2{
		font-size: 1.2rem;
	}
	.about p{
		text-align: center;
		
	}
	/* 商品紹介　-------*/
	
	.item{
		text-align: center;
	}
	
	.item p{
		font-size: 1.1rem;
		text-align: center;
	    
	}
	.item4 p{
		font-size: 1.1rem;
		text-align: left;
	    
	}　　
    .item4{
		max-width: 100%;
		margin: 0 auto;
	}
	
	.grid-3{
		display: flex;
		flex-direction: column;
	}
	.item-big img{
		min-width: 240px;
	}
		
	/* 会社概要　-------*/
	#company .wrapper{
		display: flex;
		flex-direction: column;
	}
	.sel{
		width: 100%;
	}
	.sel td{
		line-height: 1.2rem;
	}
	.map{
		width: 100%;
		margin-top: 10px;
	}
}