@charset "UTF-8";
/* CSS Document */
.html{
	font-size:62.5%;
}

.body {
	font-family: serif;
	max-width:100vw;
	height: auto;
	font-size:1.6rem;
	overflow: hidden;
	box-sizing: border-box;
	
}
.header {
	position:fixed;
	display:flex;
	width:100%;
	height:125px;
	top:0;
	right:0;
	left:0;
	background-color:rgba(42,47,65,1);
	z-index:7;
}
.headerlogo1 {
	position:relative;
	display:flex;
	width:18%;
	height:auto;
	margin-top:auto;
	margin-bottom:auto;
	box-sizing: border-box;
	z-index:8;
}
.headerlogo1 img{
	position:relative;
	width:100%;
	height:auto;
	margin-left:10%;
	z-index:8;
}

.navi{
	position:fixed;
	right:0;
	width:50%;
	height:125px;
	z-index:3;
}
.header-list {
	display:flex;
	position:relative;
	padding:0;
	margin:0;
	right:0;
    top:0;
	width:100%;
	height:125px;
	align-items:center;
    z-index:11;
}
.header-list li {
	width:20%;
	list-style:none;
	text-align:center;
}
.header-list li a{
	color:white;
	text-decoration: none;	
	font-size:1.2rem;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-weight:bold;
}
.header-list li a:hover{
	border-radius:0.9px;
	border-bottom:3px solid rgba(255,255,255,0.2);
}
.humnavi{
    position:fixed;
    width:100%;
    height:100vh;
    top:0;
    left:100%;
    transition:0.95s;
    background-color:rgba(42,47,65,1);
    z-index:10;
}
.hum-list{
    display:block;
    height:60%;
    margin-top:125px;
    padding-left:0;
    list-style:none;
}
.hum-list li{
    height:5%;
    margin:12% 0;
    text-align:center;
}
.hum-list li a{
    color:white;
    fustify-content:middle;
    text-decoration:none;
    font-size:1.8rem;
    font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.drawer_hidden{
    display:none;
}
.drawer_open{
    display:flex;
    height:125px;
    width:60px;
    right:8%;
    fustify-content:middle;
    align-items:center;
    position:absolute;
    z-index:100;
    corsor:pointer;
}
.drawer_open span,
.drawer_open span::before,
.drawer_open span::after{
    content:'';
    display:block;
    height:3px;
    width:25px;
    border-radius:3px;
    background:white;
    transition:0.5s;
    position:absolute;
}
.drawer_open span::before{
    bottom:8px;
}
.drawer_open span::after{
    top:8px;
    
}
#drawer_input:checked~.drawer_open span{
    background:rgba(0,0,0,0);
}
#drawer_input:checked~.drawer_open span::before{
    bottom:0;
    transform:rotate(45deg);
    background:white;
}
#drawer_input:checked~.drawer_open span::after{
    top:0;
    transform:rotate(-45deg);
    background:white;
}
#drawer_input:checked~.humnavi{
    left:0;
}



@media screen and (max-width: 974px) {
	.header-list{
    position:absolute;
    width:100vw;
    z-index:99;
    display:block;
    transition:0.5s;
    background:black;
    left:100%;
}
    .header-list li{
        width:100%;
        height:100%;
        font-size:5rem;
    }
    
}

@media screen and ( min-width : 975px ){
	.drawer_open{
		display: none;
	}
    
    
}
@media screen and ( max-width : 975px ){
	.headerlogo1 {
		position:relative;
		width:30%;
		height:auto;
	}
	
	.headerlogo1 img{
		width:100%;
		height:auto;
	}
}
@media screen and ( max-width : 600px ){
	.headerlogo1 {
		position:relative;
		width:40%;
		height:auto;
	}
	
	.headerlogo1 img{
		width:100%;
		height:auto;
	}
	
}
@media screen and ( max-width:415px){
	.header {
	position:fixed;
	display:flex;
	max-width:100vw;
	height:125px;
	top:0;
	right:0;
	left:0;
	background:rgba(42,47,65,1);
	z-index:90;
}
	.headerlogo1{
		position:relative;
		width:45%;
		height:auto;
		margin-left:5%;
	}
	.headerlogo1 img{
		position:relative;
		width:100%;
		height:auto;
	}
}
.warraper {
	max-width:100vw;
	background:white;
	overflow: hidden;
	bacckground:rgba(0,0,0,0.09);
}
.main {
	display: block;
	max-width:1500px;
	margin:0;
	padding:0;
	background:white;
	
}
.keyvisual{
	position:relative;
	width:100vw;
	height:auto;
	margin-top:117px;
}
.keyvisual img {
	position:relative;
	height:auto;
	width:100vw;
	z-index:1;
}
@media only screen and ( min-width : 971px) {
	.sp{
		display:none;
	}
	.pc {
	 	display:block;
	}
	.keyvisual{
		position:relative;
		width:100%;
		height:auto;
	}
	.keyvisual img {
		position:relative;
		width:100%;
		height:auto;
	}

}
	
@media only screen and ( min-width : 500px ) and ( max-width : 970px){
	.sp{
		display:none;
	}
	.pc{
		display:block;
	}
	.keyvisual{
		position:relative;
		width:100%;
		height:auto;
	}
	.keyvisual img {
		position:relative;
		width:100%;
		height:auto;
	}
}
@media screen and ( max-width : 499px ){
	.sp{
		display:block;
		position:absolute;
		rihgt:0;
		left:0;
	}
	.pc{
		display:none;
	}
	.keyvisual{
		position:relative;
		width:100%;
		height:auto;
	}
	.keyvisual img {
		position:relative;
		width:100%;
		height:auto;
	}
}
.op1{
	position:relative;
	width:100%;
	height:100vh;
	padding-top:50px;
	background-color:white;
	background-size:cover;
	background-image:url("../drex-images/move/op.png");
	background-repeat: no-repeat;
	background-position:center;
	overflow: hidden;
	animation:anime1 2s ease;
}

	
	
	
	
@keyframes anime1{
	0%{
		opacity:0;
		top:100px;
	}
	100%{
		opacity:1;
		top:0;
	}
}
.op{
	position:absolute;
	top:30%;
	width:100vw;
	height:auto;
}
.op h3{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	position:relative;
	width:90%;
	height:auto;
	text-align:right;
	font-size:3vw;
	color:rgba(0,0,0,0.6);
}
.op h4{
	position:relative;
	width:90%;
	height:auto;
	font-size:1.4vw;
	line-height:2.5;
	text-align:right;
	color:rgba(0,0,0,0.60);
}
@media only screen and ( max-width :970px){
	.op h3{
		position:relative;
		width:90%;
		height:auto;
		text-align:right;
		font-size:2.0rem;
		line-height:2.5;
		color:rgba(0,0,0,0.6);
	}
	.op h4{
		position:relative;
		width:90%;
		height:auto;
		text-align:right;
		font-size:1.2rem;
	}
}
@media screen and (max-width : 700px){
	.op h3{
		position:relative;
		width:90%;
		height:auto;
		margin-left:5%;
		text-align:right;
		font-size:1.4rem;
		line-height:2.0;
		color:rgba(0,0,0,0.60);
	}
	.op h4{
		position:relative;
		width:95%;
		heigth:auto;
		margin-right:5%;
		text-align:right;
		font-size:2.0vw;
	}
}
@media screen and (max-width :450px){
	.css-br::after{
		content:"\A";
		white-space:pre;
	}
	.op h3{
		position:relative;
		width:70%;
		height:auto;
		margin-left:20%;
		text-align:right;
		font-size:1.6rem;
		line-height:2.0;
		color:rgba(0,0,0,0.60);
	}
	.op h4{
		position:relative;
		width:80%;
		heigth:auto;
		margin-left:10%;
		text-align:center;
		font-size:0.8rem;
	}
	
}
	
	
/*ここからニュース*/	
.news{
	position:relative;
	width:100vw;
	height:auto;
	padding-bottom:50px;
	background-image:url("../drex-images/cargo/drex_cargo6.png");
	background-size: cover;
}
.newsh{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	position:relative;
	display:flex;
	width:100vw;
	height:auto;
	justify-content:center;
	align-items:center;
	padding-top:50px;
	color:rgba(255,255,255,0.5);
}
.newsh h2 {
	width:20vw;
	height:auto;
	font-size:4vw;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	position:relative;	
	padding-top:10px;
	padding-bottom:10px;
	vertical-align:middle;
	text-align:center;
	color:rgba(255,255,255,0.5);
}
.newsh h3{
	width:20vw;
	height:auto;
	psoition:relative;
	padding-top:10px;
	padding-bottom:10px;
	font-size:2.6vw;
	text-align:center;
	vertical-align:middle;
}
.newsh h2::after{
		position:absolute;
		content:"";
		top:0;
		right:0;
		width:2px;
		height:100%;
		background:linear-gradient(to top,transparent,rgba(255,255,255,0.4)15%,rgba(255,255,255,0.4)85%,transparent);
	}
@media screen and (max-width: 550px){
	.newsh{
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		position:relative;
		display:block;
		width:100vw;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		justify-content:center;
		align-items:center;
		padding-top:50px;
		color:rgba(255,255,255,0.5);
}
	.newsh h2 {
		width:100vw;
		height:auto;
		font-size:3rem;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		position:relative;	
		padding-top:10px;
		padding-bottom:10px;
		margin-right:auto;
		margin-left:auto;
		vertical-align:middle;
		text-align:center;
		color:rgba(255,255,255,0.5);
}
	.newsh h2::after{
		position:absolute;
		content:"";
		top:0;
		right:0;
		width:2px;
		height:100%;
		background:linear-gradient(to top,transparent,rgba(255,255,255,0.0)15%,rgba(255,255,255,0)85%,transparent);
	}
	.newsh h3::after{
		position:absolute;
		content:"";
		top:0;
		right:0;
		left:0%;
		width:100%;
		height:1px;
		background:linear-gradient(to left,transparent,rgba(255,255,255,0.4)15%,rgba(255,255,255,0.4)85%,transparent);
	}
	.newsh h3{
		width:100vw;
		height:auto;
		psoition:relative;
		padding-top:10px;
		padding-bottom:10px;
		margin-right:auto;
		margin-left:auto;
		font-size:1.2rem;
		text-align:center;
		vertical-align:middle;
	}
}
.scroll-list{
	position:relative;
	width:80vw;
	height:auto;
	padding:50px 0;
	margin:0 auto;
	list-style:none;
	text-align:center;
	font-size:1.2rem;
	border-radius:4px;
}
.category{
	color:rgba(255,255,255,0.5);
	font-weight:bold;
	font-size:2.4vw;
	margin-left:30px;
	border-radius:3px;
	background-color:rgba(255,255,255,0.1);
}
.scroll-item{
	width:80vw;
	margin-top:30px;
	line-height:1.9;
}
.scroll-item a::before{
	position:absolute;
	content:"";
	right:0;
	left:0;
	width:80vw;
	height:2px;
	margin-right:0;
	margin-left:0;
	background:linear-gradient(to left,transparent,rgba(255,255,255,0.4 )15%,rgba(255,255,255,0.4)85%,transparent);
}
.scroll-item a{
	width:100%;
	line-height:3.4;
	font-family:serif;
	margin-left:-30%;
	text-decoration:none;
	font-size:1.4vw;
	color:rgba(255,255,255,0.7);	
	
}
.scroll-item:hover{
	width:100%;
	height:auto;
	border-radius:2px;
	background:linear-gradient(to left,transparent,rgba(255,255,255,0.1 )15%,rgba(255,255,255,0.1)85%,transparent);
}
.title2{
	text-align:center;
	margin-left:13%;
	font-size:2vw;
}
@media screen and (max-width:700px){
	.title2{
		text-align :center;
		margin-left:13%;
		font-size:0.8rem;
	}	
}

/*ここから匠*/
@media screen and ( min-width : 751px) {
	.how{
		position:relative;
		display:flex;
		width:100%;
		height:auto;
		font-size:16px;
		background-color:white;		
	}
	.howimg{
		position:relative;
		width:50vw;
		height:auto;
	}
	.howimg img{
		width:100%;
		height:auto;
		border-radius:3px;
	}
	.takumi{
		position:relative;
		width:50vw;
		height:auto;
	}
	.how h2{
		position:relative;
		font-size:8vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-top:10%;
		padding-bottom:3%;
		text-shadow:3px -2px 0.2px rgba(0,0,0,0.3);
		color:rgba(0,0,0,0.93);
	}
	.how h4{
		position:relative;
		font-size:1.8vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-top:-10%;
		margin-bottom:10%;
		color:rgba(0,0,0,0.60);
	}
	.how p{
		position:relative;
		font-size:1.6vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-bottom:50px;
		color:rgba(0,0,0,0.70);
	}
	.topicsh{
		position:relative;
		width:60%;
		text-align:center;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		display:flex;
	}
	.how h5{
		position:relative;
		width:50%;
		height:auto;
		font-size:1.6vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		border-right:2px solid rgba(0,0,0,0.4);
		padding-top:3%;
		padding-bottom:3%;
		align-items:center;
		text-align:center;
		color:rgba(0,0,0,0.40);
	}
	.how h6{
		position:relative;
		width:30%;
		height:auto;
		font-size:1.6vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		padding-left:15%;
		color:rgba(0,0,0,0.55);
	}
}
@media screen and ( max-width : 750px){
	.how{
		position:relative;
		width:100%;
		height:auto;
		background-color:white;		
		}
	.howimg{
		position:relative;
		width:100vw;
		height:auto;
		}
	.howimg img{
		position:relative;
		width:60vw;
		height:auto;
		margin-left:20vw;
		margin-right:20vw;
		border-radius:3px;
		}
	.takumi{
		position:relative;
		width:100vw;
		height:auto;
		vertical-align:middle;
		background-color:rgba(255,255,255,0.4);
		}
	.how h2{
		position:relative;
		font-size:10vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-top:10%;
		padding-bottom:3%;
		
		color:rgba(0,0,0,0.93);
	}
	.how h4{
		position:relative;
		font-size:4vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-top:-10%;
		margin-bottom:10%;
		color:rgba(0,0,0,0.60);
	}
	.how p{
		position:relative;
		font-size:3vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-bottom:50px;
		color:rgba(0,0,0,0.70);
	}
	.topics{
		line-height:3;
	}
	.topicsh{
		position:relative;
		width:60%;
		text-align:center;
		height:auto;
		margin-left:auto;
		margin-right:auto;
		font-size:1.0rem;
		display:flex;
	}
	.how h5{
		position:relative;
		width:50%;
		height:auto;
		font-size:5vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		border-right:2px solid rgba(0,0,0,0.4);
		padding:20px 0;
		vertical-align:middle;
		align-items:center;
		color:rgba(0,0,0,0.40);
	}
	.how h6{
		position:relative;
		width:50%;
		height:auto;
		font-size:5vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		color:rgba(0,0,0,0.55);
	}
}

@media screen and ( max-width : 500px) {
	.how h2{
		position:relative;
		font-size:15vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-top:10%;
		padding-bottom:3%;
		
		color:rgba(0,0,0,0.93);
	}
	.how h4{
		position:relative;
		font-size:4vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-top:-10%;
		margin-bottom:10%;
		color:rgba(0,0,0,0.60);
	}
	.how h4{
		position:relative;
		font-size:4.4vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-top:-10%;
		margin-bottom:10%;
		color:rgba(0,0,0,0.60);
	}
	.how p{
		position:relative;
		font-size:4.6vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		text-align:center;
		margin-bottom:50px;
		color:rgba(0,0,0,0.70);
	}
	.topicsh{
		position:relative;
		display:block;
		width:60%;
		height:auto;
		font-size:1.0rem;
		padding-bottom:5%;
	}
	.topicsh h5{
		position:relative;
		width:50%;
		height:auto;
		font-size:7vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		border-right:2px solid rgba(0,0,0,0);
		text-align:center;
		margin-right:auto;
		margin-left:auto;
		color:rgba(0,0,0,0.40);
	}
	.topicsh h6::before{
		position:absolute;
		content:"";
		top:0;
		left:0;
		right:0;
		width:100%;
		height:1px;
		margin-right:auto;
		margin-left:auto;
		background:linear-gradient(to left,transparent,rgba(0,0,0,0.4 )15%,rgba(0,0,0,0.4)85%,transparent);
	}
	.topicsh h6{
		position:relative;
		width:100%;
		height:auto;
		padding-top:30%;
		margin-right:auto;
		margin-left:auto;
		font-size:7vw;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		color:rgba(0,0,0,0.55);
		text-align:center;
	}
}

@media screen and (min-width : 776px){
	.ban{
		width:100vw;
		height:auto;
		display:flex;
		overflow: hidden;
		padding-top:5%;
		padding-bottom:5%;
	}
	.banner{
		position:relative;	
		width:30vw;
		height:auto;
	}
	.banners{
		position:relative;
		width:30vw;
		height:auto;
		font-family: serif;
		display:inline-block;
		animation:anime2 2s ease;
		margin-right:1vw;
		margin-left:1vw;
	}
    @keyframes anime2 {
		0% {
			opacity:0;
			top:60px;
		}
		100%{
			opacity:1;
			top:0;
		}
	}	
	.text {
		max-width:30vw;
		height:250px;
		margin-top:-12%;
		padding-bottom:10%;
		background:linear-gradient(to right,rgba(230,230,230,0.6),rgba(230,230,230,0.4));
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
	}
	.text h3{
		text-align: right;
		padding-top:5%;
		color:rgba(0,0,0,0.4);
		font-size:2.0rem;
		margin:10%;
	}
	.text p{
		width:80%;
		margin-left:10%;
		text-align:center;

	}
	.banner img {
		max-width:30vw;
		height:auto;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
	}
	.b-more {
		position:absolute;
		bottom:0;
		padding-top:3%;
		padding-bottom:3%;
		width:100%;
		height:auto;
		background-color:rgba(0,0,0,0.3);
		text-align:center;	
		vertical-align:middle;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius:5px;
	}
	.b-more a{
		text-align:center;
		text-decoration:none;	
	}
	.b-more em{
		position:relative;
		vertical-align:middle;
		text-align:center;
	}
	.b-more em::hover{
		animation:anime5 2s ease;
	}
	@keyframes anime5{
		0%{
			opacity:0;
			top:60px;
		}
		100%{
			opacity:1;
			top:0;
		}
	}
	.b-more a:hover:after{
		content:"Read more";
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		font-size:1.4rem;
		color:grey;
		margin-left:20px;
		vertical-align: middle;
		border-bottom:1px solid grey;
		animation:anime8 2s ease;
	}
	@keyframes anime8{
		0%{
			opacity:0;
			top:60px;
		}
		100%{
			opacity:1;
			top:0;
		}	
	}
}
	.ban{
		width:100vw;
		height:auto;
		justify-content: center;
		align-items:center;
	}
	.banner{
		position:relative;	
		width:100vw;
		height:auto;
		margin:1% auto;
	}
	.banners{
		position:relative;
		font-family: serif;
		display:inline-block;
		animation:anime2 2s ease;
	}
	@keyframes anime2{
		0%{
			opacity:0;
			top:60px;
		}
		100%{
			opacity:1;
			top:0;
		}
	}
	.text {
		max-width:100vw;
		height:250px;
		margin-top:-12%;
		padding-bottom:10%;
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		background:linear-gradient(to right,rgba(230,230,230,0.6),rgba(230,230,230,0.4));
	}
	.text h3{
		text-align: right;
		padding-top:5%;
		color:rgba(0,0,0,0.4);
		font-size:2.0rem;
		margin:10%;
	}
	.text p{
		width:80%;
		margin-left:10%;
		text-align:center;

	}
	.banner img {
		width:100%;
		height:auto;
		border-top-left-radius:4px;
		border-top-right-radius:4px;
	}
	.b-more {
		position:absolute;
		bottom:0;
		padding-top:3%;
		padding-bottom:3%;
		width:100%;
		height:auto;
		background-color:rgba(0,0,0,0.3);
		text-align:center;	
		vertical-align:middle;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius:5px;
	}
	.b-more a{
		text-align:center;
		text-decoration:none;	
	}
	.b-more em{
		position:relative;
		vertical-align:middle;
		text-align:center;
	}
	.b-more em::hover{
		animation:anime5 2s ease;
	}
	@keyframes anime5{
		0%{
			opacity:0;
			top:60px;
		}
		100%{
			opacity:1;
			top:0;
		}
	}
	.b-more a:hover:after{
		content:"Read more";
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		font-size:1.4rem;
		color:grey;
		margin-left:20px;
		vertical-align: middle;
		border-bottom:1px solid grey;
		animation:anime8 2s ease;
	}
	@keyframes anime8{
		0%{
			opacity:0;
			top:60px;
		}
		100%{
			opacity:1;
			top:0;
		}	
	}

.staff{
	position:relative;
	max-width:100vw;
	height:auto;
	background-color:white;
}
.staffh{
	width:100vw;
	height:auto;
	display:inline-block;
}
.staffhs{
	positon:relative;
	display:flex;
	width:100vw;
	height:auto;
	align-items:center;
	justify-content:center;
	margin-top:8%;
	z-index:3;
}
.staff h3{
	position:relative;
	width:20%;
	text-align:center;
	font-size:4vw;
	padding-top:10px;
	padding-bottom:10px;
	color:rgba(0,0,0,0.5);
	z-index:3;
}
.staff h3::after{
		position:absolute;
		content:"";
		top:0;
		bottom:0;
		right:0;
		width:2px;
		height:100%;
		background:linear-gradient(to top,transparent,rgba(0,0,0,0.5)15%,rgba(0,0,0,0.5)85%,transparent);
	}
.staff h4{
	position:relative;
	width:20%;
	text-align:center;
	font-size:3vw;
	color:rgba(0,0,0,0.5);
	z-index:3;
}

.staffimg{
	position:relative;
    display:block;
	width:100%;
	height:auto;
    padding:0;
    border-bottom:solid rgba(42,47,65,0.85);
	margin:-26% 0 0 0;
	z-index:1;
}
.staffimg img{
	width:100%;
	height:auto;
    vertical-align:bottom;
	z-index:1;
}
.staffp{
	position:relative;
	width:80vw;
	text-align:center;
	height:40%;
	margin-right:20vw;
	margin-top:10%;
	z-index:2;
}
.staffp h5{
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size:3vw;
	color:rgba(0,0,0,0.6);
}
.staffp p{
	position:relative;
	width:50%;
	margin-right:auto;
	margin-left:auto;
	line-height:2.6;
	letter-spacing: 5px;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size:1.4vw;
	padding-bottom:50px;
	color:rgba(0,0,0,0.8);
}
.staffp css-br::after{
		content:"\A";
		white-space:pre;
	}


@media screen and (max-width: 550px){
	.staffhs{
		positon:relative;
		display:block;
		width:100vw;
		height:auto;
		align-items:center;
		justify-content:center;
		margin-top:8%;
		z-index:3;
	}
	.staff h3{
		position:relative;
		width:100%;
		text-align:center;
		font-size:3rem;
		padding-top:10px;
		padding-bottom:10px;
		margin-left:auto;
		margin-right:auto;
		color:rgba(0,0,0,0.5);
		z-index:3;
	}
.staff h3::after{
		position:absolute;
		content:"";
		top:0;
		bottom:0;
		right:0;
		width:2px;
		height:100%;
		background:linear-gradient(to top,transparent,rgba(0,0,0,0)15%,rgba(0,0,0,0)85%,transparent);
	}
	.staffp{
		position:relative;
		width:80vw;
		height:70%;
		margin-top:100px;
		margin-left:auto;
		margin-right:auto;
		text-align:left;

		writing-mode:vertical-rl;
		z-index:3;
	}
	.staff h4{
		position:relative;
		width:100%;
		text-align:center;
		font-size:1.2rem;
		margin-right:auto;
		margin-left:auto;
		
		color:rgba(0,0,0,0.5);
		z-index:3;
	}
	.staffp h5{
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		font-size:1.4rem;
		color:rgba(0,0,0,0.6);
		writing-mode:vertical-rl;
	}	
	.staffp p{
		font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
		font-size:1rem;
		color:rgba(0,0,0,0.6);
		writing-mode:vertical-rl;
		line-height:2;
	}
	.staffp css-br::after{
		content:"\A";
		white-space:pre;
	}
	
}




.more {
	position:absolute;
	bottom:5%;
	width:100%;
	height:auto;
	text-align:center;
	z-index:2;
}
@media screen and (max-width:400px){
	.more {
	position:absolute;
	bottom:1%;
	width:100%;
	height:auto;
	text-align:center;
	z-index:2;
}
}
.more a{
	text-align:center;
	text-decoration:none;	
}
.more em{
	position:relative;
	vertical-align:middle;
	text-align:center;
}
.more em::hover{
	animation:anime6 2s ease;
}
@keyframes anime6{
	0%{
		opacity:0;
		top:60px;
	}
	100%{
		opacity:1;
		top:0;
	}
}
.more a:hover:after{
	content:"Read more";
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size:1.4rem;
	color:white;
	margin-left:20px;
	vertical-align: middle;
	border-bottom:1px solid white;
	animation:anime7 2s ease;
}
@keyframes anime7{
	0%{
		opacity:0;
		top:60px;
	}
	100%{
		opacity:1;
		top:0;
	}	
}

.more h5{
	padding:0;
	margin:0;
	font-size:1.4vw;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	color:rgba(255,255,255,1);
}


/**/
.footer {
	position:absolute;
	width:100vw;
	height:auto;
	color:white;
	text-align: center;
	bottom-bottom:0;
	padding:0;
	margin-left:-8px;
	overflow-y: hidden;
	background:rgba(42,47,65,1);
	background-size:cover;
	background-repeat: no-repeat;
	background-position:center;
}
.footer nav{
	width:80%;
	margin:0 auto;
	height:125px;
}
.footerlist{
	display:flex;
	width:100%;
	height:125px;
	padding:0;
	margin:0;

	align-items:center;
}
.footerlist li{
	width:20%;
	margin-right:-1px;
	list-style:none;
}
.footerlist li a {
	font-size:1.2rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color:white;
	text-decoration: none;
}
.f1 {
	border-right:1px solid white;
}
.f2{
	border-right:1px solid white;
}
.f3{
	border-right:1px solid white;
}
.f4{
	border-right:1px solid white;
}
.f5{
	border-right:1px solid white;
}

.footers{
	display:flex;
	width:60%;
	height:auto;
	margin-top:2%;
	margin-left:20%;
	margin-bottom:5%;
	
}
.ad{
	width:50%;
	height:auto;
	margin-right:-2px;
	margin-left:0;
	padding:-11px;
	border-right:2px solid rgba(255,255,255,0.6);
}
.ad h7{
	position:relative;
	font-size:1.2rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	padding:10px;
	margin:0;
	border:1px solid white;
	border-radius:2px;
}
.ad p{
	position:relative;
	font-size:1.0vw;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.call{
	width:50%;
	height:auto;
	padding:-11px;
}
.call h7{
	position:relative;
	font-size:1.2rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	padding:10px;
	margin:10px 0;
	border:1px solid white;
	border-radius:2px;
}
.call p{
	position:relative;
	font-size:1.0vw;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
}
.footer p{
	position:relative;
}
@media only screen and ( max-width : 600px ){
	.footerlist{
		display:none;
	}
	.footers{
		display:block;
		width:60vw;
		height:auto;
		margin-top:2%;
		margin-left:20vw;
		margin-right:20vw;
		margin-bottom:10%;
	}	
	.ad{
		width:50vw;
		height:auto;
		margin-right:auto;
		margin-left:auto;
		border-right:2px solid rgba(255,255,255,0);
	}
		.call{
		width:50vw;
		height:auto;
		margin-top:10%;
		margin-right:auto;
		margin-left:auto;
	}
}
@media only screen and (max-width : 400px) {
	.footer nav{
		display:none;
	}
	.footers{
	display:block;
	width:60vw;
	height:auto;
	margin-top:10%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10%;
	}	
	.footer p{
	font-size:3.6vw;
}
.footer a{
	list-style:none;
	text-decoration:none;
	color:white;
}
}
.footer p{
	font-size:1rem;
}
.footer a{
	list-style:none;
	text-decoration:none;
	color:rgba(42,47,65,1);
}