@charset "utf-8";

/*
	main image
-------------------------------------------------------------------- */

/* 文字を中央に配置するオーバーレイ */
#main_image {
    position: relative;
    width: 100%;
    background: url('../images/top_Main_01.jpg') no-repeat center center/cover;
	@media screen and (min-width: 1024px) { /* PC */	
    height: 100vh; /* 画面全体の高さを占める */
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	height: 100vh; /* 画面全体の高さを占める */
	}
	@media screen and (max-width: 640px) { /* SP */
	height: 80vh;
	}	
}

.main_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    padding: 0 10px;
}

/* タイトルのスタイル */
.main_text h2 {
	letter-spacing: 0.1em;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
	@media screen and (min-width: 1024px) { /* PC */    
    font-size: 4rem;
    margin-bottom: 10px;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	font-size: 3rem;
    margin-bottom: 10px;
	}
	@media screen and (max-width: 640px) { /* SP */
	font-size: 2rem;
    margin-bottom: 10px;
	}	
}

/* サブテキストのスタイル */
.main_text p {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
	@media screen and (min-width: 1024px) { /* PC */	
    font-size: 1.5rem;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	font-size: 1.2rem;
	}
	@media screen and (max-width: 640px) { /* SP */
	font-size: 1.4rem;	
	line-height: 1.8rem;
	}	
}




/*
	box
-------------------------------------------------------------------- */

#philosophy .txt_box,
#lineup .txt_box,
#plofile .txt_box {
	@media screen and (min-width: 1024px) { /* PC */
	width: 45%;
	float: right;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	width: 100%;
	float: none;
	}
	@media screen and (max-width: 640px) { /* SP */
	width: 100%;
	float: none;
	}	
}

#philosophy .img_box,
#lineup .img_box,
#plofile .img_box {
	@media screen and (min-width: 1024px) { /* PC */	
	width: 50%;
	float: left;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	width: 100%;
	float: none;
	}
	@media screen and (max-width: 640px) { /* SP */
	width: 100%;
	float: none;
	}
}





/*
	business items
-------------------------------------------------------------------- */

#business .inr {
	background: #F2F2F2;
}

#business ul,#products ul {
	@media screen and (min-width: 1024px) { /* PC */	
	padding: 0 40px;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	padding: 0;
	}
	@media screen and (max-width: 640px) { /* SP */
	padding: 0;
	}
}

#business li,#products li {
	text-align: center;
	@media screen and (min-width: 1024px) { /* PC */	
	width: 26.333%;
	margin: 0 3.5%;
	float: left;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	width: 31.333%;
	margin: 0 1%;
	float: left;
	}
	@media screen and (max-width: 640px) { /* SP */
	width: 100%;
	margin: 0 0 40px;
	float: none;
	}
}

#business .nmb,#products .nmb {
	text-align: center;
	font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
	font-weight: bold;	
	font-size: 40px;
	margin: 20px 0 0;
	padding-bottom: 20px;
	border-bottom: 1px solid #000;
}





/*
	plofile 
-------------------------------------------------------------------- */

#plofile {
	background: #F2F2F2;
}

#plofile  dl {
	font-size: 13px;
	margin-bottom: 20px;	
	border-bottom: 1px solid #ECECEC;
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	margin-top: 20px;
	}
	@media screen and (max-width: 640px) { /* SP */
	margin-top: 20px;	
	}
}

#plofile dt {
	font-weight: bold;
	@media screen and (min-width: 1024px) { /* PC */
	letter-spacing: .2em;
	width: 20%;
	float: left;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	letter-spacing: .2em;
	width: 20%;
	float: left;
	}
	@media screen and (max-width: 640px) { /* SP */
	letter-spacing: .3em;
	width: 100%;
	float: none;
	}
}

#plofile dt span {
	color: #63B0CE;
	font-weight: bold;
}

#plofile  dd {
	@media screen and (min-width: 1024px) { /* PC */
	width: 80%;
	float: right;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	width: 80%;
	float: right;
	}
	@media screen and (max-width: 640px) { /* SP */
	width: 100%;
	float: none;
	}
}

#plofile dt,#plofile dd {
	@media screen and (min-width: 1024px) { /* PC */
	padding: 15px 0;
	border-top: 1px solid #ECECEC;
	}
	@media screen and (min-width: 640px) and (max-width: 1024px) { /* TBLET */
	padding: 15px 0;
	border-top: 1px solid #ECECEC;
	}
	@media screen and (max-width: 640px) { /* SP */
	padding: 5px;
	border-top: 1px solid #ECECEC;
	}
}

#plofile ul {
	list-style-position: inside;
	list-style-type: circle;
}