@charset "UTF-8";

/*このCSSファイルにおける、メディアクエリの分け方
※各画面サイズ共通クラス
※大画面PC1081以上 PC　無限大　写真4列
※ノート PC*******901~1080　tablet横、PC　写真3列
※タブレット******768~900　タブレット縦　スマホ横　及びiPad miniなど 写真2列
※大型スマホ******481~767　写真２列
※スマホ縦　iphone6,7,8及び　pluse*********~375-480　写真1列
*/

/*2nd各ページ共通クラス*/


.sheetTitle {
	font-size:1.5em;
	}
	

/*Messageページ*/
#message_bg {
	display:none;
	position:absolute;
	top:0;

	width:100%;
	height:100%; 
	
	background-color: rgba(0,0,0,0.4);
	z-index: 60;
	}

#message_sheet,#works_sheet,#workflow_sheet,#aboutus_sheet,#contact_sheet {
	position:relative;
	top:136px;
	width: 90%;height: 95%;
	margin:0px auto;
	padding:0;
	color:rgba(255,250,250,0.90);
	background: #110900;
	
	opacity:0.7;
	z-index:70;
	overflow: scroll;
	}



#message_sheet p {
	width:89%;
	margin:50px auto;
	//padding:5%;
	text-align:left;
	
	font-size:0.85em;
 	line-height: 1.8em;
	text-shadow: 3px 3px 9px rgba(0,0,0,1.0);
	
	//border:dashed 1px blue;
	}
#message_grid {
	display:grid;
	gap: 0px;
	grid-template-columns: 33% 34% 33%;
	grid-template-rows: 100px 40px;
	width:80%;
	max-width:640px;
	margin:30px auto;
	
	//border:solid 1px white;
	}

.designer_photo {
	margin:0px auto;
	width:100px;
	height:100px;
}
#hara {
	grid column: 1/2;
}


img#hara:hover {
	filter:saturate(100%);
}
img#murakami:hover {
	filter:saturate(80%);
}
img.designer_photo {
	filter:saturate(0%);
}


#murakami {
	grid column: 3/4;
}
#message_grid em {
	margin-top:20px;
}


/*Worksページ*/
#works_bg {
	display:none;
	position:absolute;
	top:0;

	width:100%;
	height:100%; 

	background-color: rgba(0,0,0,0.4);
	z-index: 60;
	}

/*Workflowページ*/
#workflow_bg {
	display:none;
	position:absolute;
	top:0;

	width:100%;
	height:100%; 

	background-color: rgba(0,0,0,0.4);
	z-index: 60;
	}


#workflow_bg p {
	width:70%;
	margin:20px auto;
	padding:5%;
	text-align:left;
	
	//font-size:0.85em;
 	line-height: 1.8em;
	text-shadow: 3px 3px 9px rgba(0,0,0,1.0);
	
	//border:dashed 1px blue;
	}

#workflow_sheet #wf_grid {
	width:80%;
	margin:30px auto;
	display: grid;
	grid: 40px 90px 60px 110px 120px 90px 40px 70px 70px 40px 30px / 10% 60% 30%;
	grid-row-gap: 5px;
	grid-column-gap: 5%;

	padding: 15px;
	text-align: left;
	
	
	font-size:0.85em;
 	line-height: 1.8em;
	text-shadow: 3px 3px 9px rgba(0,0,0,1.0);
}
@media screen and (min-width: 481px) and (max-width: 767px)  {
#workflow_sheet #wf_grid {
width: 90%;
grid: 40px 120px 80px 130px 150px 110px 60px 100px 100px 60px 30px / 15% 55% 30%;
grid-row-gap: 1px;
grid-column-gap: 30px;
//border:solid 1px white;
}
}

@media screen and (max-width: 480px)  {
#workflow_sheet #wf_grid {
width: 85%;
grid: 40px 180px 90px 200px 230px 150px 60px 120px 130px 60px 30px / 20% 55% 20%;
grid-row-gap: 1px;
grid-column-gap: 10px;
//border:solid 1px white;
}
}

/*Aboutusページ*/
#aboutus_bg {
	display:none;
	position:absolute;
	top:0;

	width:100%;
	height:100%; 
	
	background-color: rgba(0,0,0,0.4);
	z-index: 60;
	}



#aboutus_sheet #au_grid1 {
	width:80%;
	margin:30px auto 50px;
	display: grid;
	grid: 30px 50px 20px 30px 30px 70px 50px / 10% 90%;
	grid-row-gap: 5px;
	grid-column-gap: 5%;
	
	padding: 15px;
	text-align: left;
	font-size:0.85em;
 	line-height: 1.8em;
	text-shadow: 3px 3px 9px rgba(0,0,0,1.0);
}

@media screen and (min-width: 481px) and (max-width: 900px)  {
#aboutus_sheet #au_grid1 {
margin:30px auto;
grid: 30px 50px 20px 30px 30px 70px 110px / 20% 80%;
grid-row-gap: 5px;
grid-column-gap: 7px;
}
}
@media screen and (max-width: 480px)  {
#aboutus_sheet #au_grid1 {
margin:30px auto 30px;
grid: 30px 50px 20px 30px 40px 80px 150px / 20% 80%;
grid-column-gap: 5px;
}
}
#aboutus_sheet dl {
	width:70%;
	margin:20px auto 0;
	text-align:left;
	//border:dashed 1px blue;
	}
#aboutus_sheet dt {
	margin-top: 25px;
	font-size:1em;
	}
#aboutus_sheet dd {
	margin: 10px auto auto 10px;
	font-size:0.9em;
 	line-height: 1.8em;
	text-shadow: 3px 3px 9px rgba(0,0,0,1.0);
	}

#aboutus_sheet #au_grid2 {
	width:90%;
	margin:30px auto 0;
	display: grid;
	grid: 180px / 33% 62%;
	grid-row-gap: 5px;
	grid-column-gap: 5%;

	padding: 15px;
	text-align: left;
	
	font-size:0.85em;
 	line-height: 1.8em;
	text-shadow: 3px 3px 9px rgba(0,0,0,1.0);
}
@media screen and (max-width: 480px)  {
	#aboutus_sheet #au_grid2 {
	margin:30px auto 50px;
	grid: 180px / 33% 62%;
		grid-column-gap: 5%;
	}
}

#aboutus_sheet #au_grid3 {
	width:90%;
	margin:30px auto 0;
	display: grid;
	grid: 130px / 33% 62%;
	grid-row-gap: 5px;
	grid-column-gap: 5%;

	padding: 15px;
	text-align: left;
	
	font-size:0.85em;
 	line-height: 1.8em;
	text-shadow: 3px 3px 9px rgba(0,0,0,1.0);
}
#aboutus_sheet #au_grid4 {
	width:90%;
	margin:30px auto;
	display: grid;
	grid: 50px / 33% 62%;
	grid-row-gap: 5px;
	grid-column-gap: 5%;

	padding: 15px;
	text-align: left;
	
	font-size:0.85em;
 	line-height: 1.8em;
	text-shadow: 3px 3px 9px rgba(0,0,0,1.0);
}

#fax a:link,#fax a:visited,#fax a:hover {
	text-decoration:none;
	color:gray;
	}

/*Contactページ*/
#contact_bg {
	display:none;
	position:absolute;
	top:0;
	/*margin:3px auto;*/
	width:100%;
	height:100%; 

	background-color: rgba(0,0,0,0.4);
	z-index: 60;
	}


/*各2ndページの「○○○_bg」のメディアクエリ設定まとめ*/
@media screen and (min-width: 901px) and (max-width: 1024px)  {
#message_bg, #works_bg, #workflow_bg, #aboutus_bg, #contact_bg {
	top:-2px;
	}
}
@media screen and (min-width: 768px) and (max-width: 900px)  {
#message_bg, #works_bg, #workflow_bg, #aboutus_bg, #contact_bg {
	top:-9px;
	}
}
@media screen and (max-width: 767px)  {
#message_bg, #works_bg, #workflow_bg, #aboutus_bg, #contact_bg {
	top:-48px;
	}
}

/*クラス「○○○_sheet」用メディアクエリ設定まとめ*/
@media screen and (min-width: 481px) and (max-width: 767px)  {
#message_sheet, #works_sheet, #workflow_sheet, #aboutus_sheet, #contact_sheet{
	width: 90%;
	margin:0 2% 0 4.2%;
}
}
@media screen and (max-width: 480px)  {
#message_sheet, #works_sheet, #workflow_sheet, #aboutus_sheet, #contact_sheet{
width: 100%;
}
}
/*クラス「wrap_2nd」用メディアクエリ設定まとめ*/
@media screen and (min-width: 1280px) {
.wrap_2nd {
	margin:15%;
}
}
@media screen and (min-width: 1081px)  {
.wrap_2nd {
	margin:10%;
}
}
@media screen and (min-width: 901px)  and (max-width: 1080px) {
.wrap_2nd {
	margin:8%;
}
.designer_photo {
	margin:0px auto;
	width:100px;
	height:100px;
}
}
@media screen and (min-width: 768px)  and (max-width: 900px) {
.wrap_2nd {
	margin-top: 10%;
	margin-right: 10%;
	margin-left: 10%;
	margin-bottom: 10%;
	//border: solid 1px white;
}
}
@media screen and (max-width: 767px)  {
.wrap_2nd {
	margin:10% 0;
}
.designer_photo {
	margin:0px auto;
	width:88px;
	height:88px;
}
#message_grid em{
font-size:0.8em;
}
}
@media screen and (max-width: 480px)  {
.wrap_2nd {
	//margin:3%;
}
}