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

/*共通のスタイルをここに記載*/
span.opa{
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}
@media only screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
	
	/*レティーナディスプレイ用のスタイルをここに記載*/
	
}
@media screen and (max-width:767px){
	
	/*スマートフォン用のスタイルをここに記載*/
	figure.pagetitle.staff h3{
		color:#444;
	}
	div.stafftop_title{
		width:100%;
		background-color:rgba(0,0,0,0.5);
		padding:30px 0;
	}
	dl.title{
		color:#fff;
		width:100%;
		padding:0 1em;
		box-sizing:border-box;
	}
	dl.title dt{
		font-size:18px;
		margin-bottom:5px;
	}
	dl.title dt h3{
		font-weight:700;
	}
	dl.title dt dd{
	}
	section.staff_contents{
		width:100%;
		padding:50px 1em 0 1em;
		box-sizing:border-box;
	}
	div.name{
		background-color:#000;
		color:#fff;
		padding:10px 20px;
		display:table;
	}
	div.name h2{
		font-size:18px;
	}
	div.name p{
		font-size:18px;
	}
	div.staff_contents01,
	div.staff_contents02{
		position:relative;
		z-index:1;
		margin-bottom:50px;
	}
	div.staff_contents01:nth-child(1){
		margin-top:-50px;
	}
	div.staff_contents01 dl{
		padding-top:1em;
	}
	div.staff_contents01 dl dt,
	div.staff_contents02 dl dt{
		font-size:18px;
		color:#e8599a;
	}
	div.staff_contents01 dl dd,
	div.staff_contents02 dl dd{
		color:#444;
		line-height:2em;
		font-size:14px;
	}
	div.staff_contents01 figure img,
	div.staff_contents02 figure img{
		width:100%;
		object-fit:cover;
		height:55vw;
	}
	div.staff_contents02{
		position:relative;
		z-index:1;
		padding-top:55vw;
	}
	div.staff_contents02 dl{
		padding-top:1em;
	}
	div.staff_contents02 figure{
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
	div.title02{
		width:100%;
		margin-bottom:5vw;
	}
	div.title02 figure{
		width:75vw;
		margin:0 auto;
	}
	div.title02 figure img{
		height:75vw;
		border-radius:50%;
		object-fit:cover;
	}
	div.title02 p{
		font-size:18px;
		color:#444;
		line-height:2em;
		box-sizing:border-box;
	}
	div.stafftext_contents{
		margin-bottom:50px;
	}
	div.stafftext_contents dl dt{
		color:#e8599a;
		font-size:18px;
		margin-bottom:1em;
	}
	div.stafftext_contents dl dd{
		line-height:2em;
		color:#444;
		font-size:14px;
	}
	section.entry_area{
		width:100%;
		position:relative;
		z-index:1;
		height:300px;
	}
	section.entry_area figure{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	section.entry_area figure img{
		width:100%;
		object-fit:cover;
		height:300px;
	}
	section.entry_area h2{
		position:absolute;
		top:35%;
		width:100%;
		text-align:center;
		font-size:18px;
		color:#fff;
		z-index:2;
	}
	section.entry_area div.btnarea{
		position:absolute;
		top:55%;
		left:50%;
		transform:translate(-50%,-50%);
		font-size:16px;
	}
}
@media screen and (max-width:320px){
	
	/*小さいサイズのスマートフォン用のスタイルをここに記載*/
	
}
@media screen and (min-width:768px) and (max-width:1099px){
	
	/*タブレット用のスタイルをここに記載*/
	figure.pagetitle.staff h3{
		color:#444;
	}
	div.stafftop_title{
		width:100%;
		background-color:rgba(0,0,0,0.5);
		padding:30px 0;
	}
	dl.title{
		color:#fff;
		width:100%;
		padding:0 6vw;
		box-sizing:border-box;
	}
	dl.title dt{
		font-size:24px;
		margin-bottom:5px;
	}
	dl.title dt h3{
		font-weight:700;
	}
	dl.title dt dd{
	}
	section.staff_contents{
		width:100%;
		padding:70px 6vw 0 6vw;
		box-sizing:border-box;
	}
	div.name{
		background-color:#000;
		color:#fff;
		padding:10px 20px;
		display:table;
	}
	div.name h2{
		font-size:24px;
	}
	div.name p{
		font-size:24px;
	}
	div.staff_contents01,
	div.staff_contents02{
		display:flex;
		 justify-content:center;
		 position:relative;
		 z-index:1;
		 margin-bottom:70px;
	}
	div.staff_contents01:nth-child(1){
		margin-top:-50px;
	}
	div.staff_contents01 figure,
	div.staff_contents01 dl,
	div.staff_contents02 figure,
	div.staff_contents02 dl{
		width:50%;
	}
	div.staff_contents01 dl{
		padding-left:5vw;
		box-sizing:border-box;
	}
	div.staff_contents02 dl{
		padding-right:5vw;
		box-sizing:border-box;
	}
	div.staff_contents01 dl dt,
	div.staff_contents02 dl dt{
		font-size:24px;
		color:#e8599a;
		margin-bottom:1em;
	}
	div.staff_contents01 dl dd,
	div.staff_contents02 dl dd{
		color:#444;
		line-height:2em;
	}
	div.staff_contents01 figure img,
	div.staff_contents02 figure img{
		width:100%;
		object-fit:cover;
		height:35vw;
	}
	div.title02{
		display:flex;
		width:100%;
		margin-bottom:5vw;
	}
	div.title02 figure{
		width:150px;
	}
	div.title02 figure img{
		height:150px;
		border-radius:50%;
		object-fit:cover;
	}
	div.title02 p{
		width:calc(100% - 150px);
		font-size:24px;
		color:#444;
		line-height:2em;
		padding-left:30px;
		box-sizing:border-box;
	}
	div.stafftext_contents{
		margin-bottom:70px;
	}
	div.stafftext_contents dl dt{
		color:#e8599a;
		font-size:24px;
		margin-bottom:1em;
	}
	div.stafftext_contents dl dd{
		line-height:2em;
		color:#444;
	}
	section.entry_area{
		width:100%;
		position:relative;
		z-index:1;
		height:350px;
	}
	section.entry_area figure{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	section.entry_area figure img{
		width:100%;
		object-fit:cover;
		height:350px;
	}
	section.entry_area h2{
		position:absolute;
		top:35%;
		width:100%;
		text-align:center;
		font-size:24px;
		color:#fff;
		z-index:2;
	}
	section.entry_area div.btnarea{
		position:absolute;
		top:55%;
		left:50%;
		transform:translate(-50%,-50%);
	}
}
@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用のスタイルをここに記載*/
	figure.pagetitle.staff h3{
		color:#444;
	}
	div.stafftop_title{
		width:100%;
		background-color:rgba(0,0,0,0.5);
		padding:30px 0;
	}
	dl.title{
		color:#fff;
		width:1100px;
		margin:0 auto;
	}
	dl.title dt{
		font-size:24px;
		margin-bottom:5px;
	}
	dl.title dt h3{
		font-weight:700;
	}
	dl.title dt dd{
	}
	section.staff_contents{
		width:1100px;
		margin:0 auto;
		padding-top:100px;
	}
	div.name{
		background-color:#000;
		color:#fff;
		padding:10px 20px;
		display:table;
	}
	div.name h2{
		font-size:24px;
	}
	div.name p{
		font-size:24px;
	}
	div.staff_contents01,
	div.staff_contents02{
		display:flex;
		 justify-content:center;
		 position:relative;
		 z-index:1;
		 margin-bottom:100px;
	}
	div.staff_contents01:nth-child(1){
		margin-top:-50px;
	}
	div.staff_contents01 figure,
	div.staff_contents01 dl,
	div.staff_contents02 figure,
	div.staff_contents02 dl{
		width:50%;
	}
	div.staff_contents01 dl{
		padding-left:50px;
		box-sizing:border-box;
	}
	div.staff_contents02 dl{
		padding-right:50px;
		box-sizing:border-box;
	}
	div.staff_contents01 dl dt,
	div.staff_contents02 dl dt{
		font-size:24px;
		color:#e8599a;
		margin-bottom:1em;
	}
	div.staff_contents01 dl dd,
	div.staff_contents02 dl dd{
		color:#444;
		line-height:2em;
	}
	div.staff_contents01 figure img,
	div.staff_contents02 figure img{
		width:100%;
		object-fit:cover;
		height:20vw;
	}
	div.title02{
		display:flex;
		width:100%;
		margin-bottom:50px;
	}
	div.title02 figure{
		width:150px;
	}
	div.title02 figure img{
		height:150px;
		border-radius:50%;
		object-fit:cover;
	}
	div.title02 p{
		width:calc(100% - 150px);
		font-size:24px;
		color:#444;
		line-height:2em;
		padding-left:30px;
		box-sizing:border-box;
	}
	div.stafftext_contents{
		margin-bottom:100px;
	}
	div.stafftext_contents dl dt{
		color:#e8599a;
		font-size:24px;
		margin-bottom:1em;
	}
	div.stafftext_contents dl dd{
		line-height:2em;
		color:#444;
	}
	section.entry_area{
		width:100%;
		position:relative;
		z-index:1;
		height:500px;
	}
	section.entry_area figure{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	section.entry_area figure img{
		width:100%;
		object-fit:cover;
		height:400px;
	}
	section.entry_area h2{
		position:absolute;
		top:35%;
		width:100%;
		text-align:center;
		font-size:24px;
		color:#fff;
		z-index:2;
	}
	section.entry_area div.btnarea{
		position:absolute;
		top:55%;
		left:50%;
		transform:translate(-50%,-50%);
	}
}