/*----------------------------------------------------
** WEB COMBO / exsample.css *ページに合わせてファイル名を変更する
** Ver.1.0.0
** copyright 2020 GRANTEST Inc.
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/

/*共通のスタイルをここに記載*/

@media only screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
	
	/*レティーナディスプレイ用のスタイルをここに記載*/
	
}
@media screen and (max-width:767px){
	
	/*スマートフォン用のスタイルをここに記載*/
	div.childinner{
		width:100%;
		padding:1em;
		box-sizing:border-box;
	}
	div.message{
		text-align:left;
		color:#444;
		padding:50px 0;
	}
	div.message h3{
		font-size:18px;
		margin-bottom:1em;
		font-weight:700;
	}
	div.message p{
		font-size:14px;
		line-height:2em;
	}
	div.philosophy{
		position:relative;
		z-index:1;
		width:100%;
	}
	div.philosophy::after{
		content:"";
		background-color:rgba(232,89,152,0.5);
		top:0;
		left:0;
		right:0;
		bottom:0;
		position:absolute;
	}
	div.philosophy img{
		width:100%;
		height:320px;
		object-fit: cover;
	}
	div.philosophy h3{
		position:absolute;
		top:35%;
		width:100%;
		z-index:2;
		color:#fff;
		font-size:18px;
		color:#fff;
		text-align:center;
	}
	div.philosophy div.btnarea02{
		position:absolute;
		z-index:2;
		top:55%;
		left:50%;
		transform:translate(-50%,-50%);
	}
	div.philosophy div.btnarea02 a{
		font-size:16px;
	}
	div.company_information{
		margin:50px 0;
	}
	div.company_information h3{
		font-size:18px;
		color:#444;
		text-align:center;
	}
	div.company_information div.history{
		width:100%;
	}
	div.company_information div.history h3{
		text-align:left;
		font-size:18px;
	}
	div.company_information div.history dl{
		display:flex;
		width:100%;
		color:#444;
		font-size:14px;
		justify-content:center;
	}
	div.company_information div.history dl dt{
		width:calc((100% - 65%) - 10px);
		height:50px;
		margin:0 5px;
		display:flex;
		align-items: center;
	}
	div.company_information div.history dl dd{
		width:calc(100% - 35%);
		display:flex;
		align-items: center;
	}
	div.company_list{
		width:100%;
		margin:50px 0 0 0;
	}
	div.company_list h3{
		text-align:left;
		font-size:18px;
	}
	div.company_list dl{
		width:100%;
		font-size:14px;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		color:#444;
	}
	div.company_list dl dt{
		width:calc((100% - 65%) - 10px);
		margin:0 5px;
		height:50px;
		display:flex;
		align-items: center;
	}
	div.company_list dl dd{
		width:calc(100% - 35%);
		display:flex;
		align-items: center;
	}
	div.map{
		width:100%;
		height:500px;
	}
	
}
@media screen and (max-width:320px){
	
	/*小さいサイズのスマートフォン用のスタイルをここに記載*/
	
}
@media screen and (min-width:768px) and (max-width:1099px){
	
	/*タブレット用のスタイルをここに記載*/
	div.childinner{
		width:100%;
		padding:0 6vw;
		box-sizing:border-box;
	}
	div.message{
		text-align:left;
		color:#444;
		padding:70px 0;
	}
	div.message h3{
		font-size:24px;
		margin-bottom:1em;
	}
	div.message p{
		font-size:16px;
		line-height:2em;
	}
	div.philosophy{
		position:relative;
		z-index:1;
		width:100%;
		height:350px;
	}
	div.philosophy::after{
		content:"";
		background-color:rgba(232,89,152,0.5);
		top:0;
		left:0;
		right:0;
		bottom:0;
		position:absolute;
	}
	div.philosophy img{
		width:100%;
		height:350px;
		object-fit: cover;
	}
	div.philosophy h3{
		position:absolute;
		top:35%;
		width:100%;
		z-index:2;
		color:#fff;
		font-size:24px;
		color:#fff;
		text-align:center;
	}
	div.philosophy div.btnarea02{
		position:absolute;
		z-index:2;
		top:55%;
		left:50%;
		transform:translate(-50%,-50%);
	}
	div.company_information{
		margin:50px 0;
	}
	div.company_information h3{
		font-size:24px;
		color:#444;
		text-align:center;
	}
	div.company_information div.history{
		width:100%;
	}
	div.company_information div.history h3{
		text-align:left;
	}
	div.company_information div.history dl{
		display:flex;
		width:100%;
		color:#444;
		justify-content:center;
	}
	div.company_information div.history dl dt{
		width:calc((100% - 70%) - 10px);
		height:50px;
		margin:0 5px;
		display:flex;
		align-items: center;
	}
	div.company_information div.history dl dd{
		width:calc(100% - 30%);
		display:flex;
		align-items: center;
	}
	div.company_list{
		width:100%;
		margin:50px 0 0 0;
	}
	div.company_list h3{
		text-align:left;
	}
	div.company_list dl{
		width:100%;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		color:#444;
	}
	div.company_list dl dt{
		width:calc((100% - 70%) - 10px);
		margin:0 5px;
		height:50px;
		display:flex;
		align-items: center;
	}
	div.company_list dl dd{
		width:calc(100% - 30%);
		display:flex;
		align-items: center;
	}
	div.map{
		width:100%;
		height:500px;
	}
	
}
@media (orientation: landscape) and (max-width:568px){
	
	/*小さいサイズのスマートフォン用横向きのスタイルをここに記載*/
	
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
	
	/*大きいサイズのスマートフォン用横向きのスタイルをここに記載*/
	
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
	
	/*タブレット用横向きのスタイルをここに記載*/
	
}
@media screen and (min-width:1100px){
	
	/*PC用のスタイルをここに記載*/
	div.childinner{
		width:1100px;
		margin:0 auto;
	}
	div.message{
		text-align:center;
		color:#444;
		padding:100px 0;
	}
	div.message h3{
		font-size:24px;
		margin-bottom:2em;
	}
	div.message p{
		font-size:16px;
		line-height:2em;
	}
	div.philosophy{
		position:relative;
		z-index:1;
		width:100%;
		height:500px;
	}
	div.philosophy::after{
		content:"";
		background-color:rgba(232,89,152,0.5);
		top:0;
		left:0;
		right:0;
		bottom:0;
		position:absolute;
	}
	div.philosophy img{
		width:100%;
		height:500px;
		object-fit: cover;
	}
	div.philosophy h3{
		position:absolute;
		top:35%;
		width:100%;
		z-index:2;
		color:#fff;
		font-size:24px;
		color:#fff;
		text-align:center;
	}
	div.philosophy div.btnarea02{
		position:absolute;
		z-index:2;
		top:55%;
		left:50%;
		transform:translate(-50%,-50%);
	}
	div.company_information{
		padding:100px 0;
	}
	div.company_information h3{
		font-size:24px;
		color:#444;
		text-align:center;
	}
	div.company_information div.history{
		width:800px;
		margin:0 auto;
	}
	div.company_information div.history h3{
		text-align:left;
	}
	div.company_information div.history dl{
		display:flex;
		width:100%;
		color:#444;
		justify-content:center;
	}
	div.company_information div.history dl dt{
		width:calc((100% - 70%) - 10px);
		height:50px;
		margin:0 5px;
		display:flex;
		align-items: center;
	}
	div.company_information div.history dl dd{
		width:calc(100% - 30%);
		display:flex;
		align-items: center;
	}
	div.company_list{
		width:800px;
		margin:50px auto 0 auto;
	}
	div.company_list h3{
		text-align:left;
	}
	div.company_list dl{
		width:100%;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		color:#444;
	}
	div.company_list dl dt{
		width:calc((100% - 70%) - 10px);
		margin:0 5px;
		align-items: center;
		display:flex;
		height:50px;
	}
	div.company_list dl dd{
		width:calc(100% - 30%);
		display:flex;
		align-items: center;
	}
	div.map{
		width:100%;
		height:500px;
	}
}