/*----------------------------------------------------
** 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-left:1em;
		padding-right:1em;
		box-sizing:border-box;
	}
	div.webservice{
		padding-top:50px;
		padding-bottom:50px;
	}
	div.contents01{
		margin-bottom:30px;
	}
	div.contents01:nth-child(even){
		padding-top:66.5%;
		position:relative;
		z-index:1;
	}
	div.contents01:nth-child(even) div.pictarea{
		position:absolute;
		top:0;
		left:0;
		right:0;
	}	
	div.contents01 div.textarea h3{
		color:#e8599a;
		font-size:18px;
		font-weight:700;
	}
	div.contents01 div.textarea p{
		line-height:2em;
		color:#444;
		font-size:14px;
	}
	div.pictarea img{
		width:100%;
		object-fit:cover;
	}
  div.webservice_link{
    margin-bottom: 50px;
    padding: 0 1em;
  }
  div.webservice_link p{
    text-align: center;
    margin-bottom: 1em;
    line-height: 2em;
    color: #444;
  }
  div.thought{
    padding-bottom: 50px;
  }
  div.thought > h3{
    font-size: 18px;
    color: #444;
    text-align: center;
    margin-bottom: 2rem;
  }
  div.thought > p{
    color: #444;
    line-height: 2rem;
    text-align: center;
  }
}
@media screen and (max-width:320px){
	
	/*小さいサイズのスマートフォン用のスタイルをここに記載*/
	
}
@media screen and (min-width:768px) and (max-width:1099px){
	
	/*タブレット用のスタイルをここに記載*/
	div.childinner{
		width:100%;
		padding-left:6vw;
		padding-right:6vw;
		box-sizing:border-box;
	}
	div.webservice{
		padding-top:70px;
		padding-bottom:70px;
	}
	div.contents01{
		display:flex;
		margin-bottom:30px;
	}
	div.contents01 div.pictarea,
	div.contents01 div.textarea{
		width:50%;
	}
	div.contents01:nth-child(odd) div.textarea{
		padding-left:30px;
		box-sizing:border-box;
	}
	div.contents01:nth-child(even) div.textarea{
		padding-right:30px;
		box-sizing:border-box;
	}
	div.contents01 div.textarea h3{
		color:#e8599a;
		font-size:22px;
		font-weight:700;
	}
	div.contents01 div.textarea p{
		line-height:2em;
		color:#444;
	}
	div.pictarea{
	}
	div.pictarea img{
		width:100%;
		object-fit:cover;
	}
  div.webservice_link{
    margin-bottom: 70px;
    padding: 0 6vw;
  }
  div.webservice_link p{
    text-align: center;
    margin-bottom: 3em;
    line-height: 2em;
    color: #444;
  }
  div.thought{
    padding-bottom: 70px;
  }
  div.thought > h3{
    margin-bottom: 2rem;
    font-size: 24px;
    color: #444;
    text-align: center;
  }
  div.thought > p{
    color: #444;
    line-height: 2rem;
    text-align: center;
  }
	
}
@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.webservice{
		padding:100px 0;
	}
	div.contents01{
		display:flex;
		margin-bottom:50px;
	}
	div.contents01 div.pictarea,
	div.contents01 div.textarea{
		width:50%;
	}
	div.contents01:nth-child(even) div.textarea{
		padding-left:50px;
		box-sizing:border-box;
	}
	div.contents01:nth-child(odd) div.textarea{
		padding-right:50px;
		box-sizing:border-box;
	}
	div.contents01 div.textarea h3{
		color:#e8599a;
		font-size:24px;
		font-weight:700;
	}
	div.contents01 div.textarea p{
		line-height:2em;
		color:#444;
	}
	div.pictarea{
	}
	div.pictarea img{
		width:100%;
		object-fit:cover;
	}
  div.webservice_link{
    margin-bottom: 100px;
  }
  div.webservice_link p{
    text-align: center;
    margin-bottom: 3em;
    line-height: 2em;
    color: #444;
  }
  div.thought{
    padding-bottom: 100px;
  }
  div.thought > h3{
    margin-bottom: 2rem;
    font-size: 24px;
    color: #444;
    text-align: center;
  }
  div.thought > p{
    color: #444;
    line-height: 2rem;
    text-align: center;
  }
}