/*
 Theme Name:   valueplanning Child
 Theme URI:    https://valueplanning.jp/
 Description:  株式会社valueplanning子テーマです。
 Author:       株式会社valueplanning
 Author URI:   https://valueplanning.jp/
 Template:     valueplanning
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI: 
 Tags:
 Text Domain:  valueplanning
*/
.grecaptcha-badge { visibility: hidden; }

		
	 .pc{
        display:block;
    }
    
	.sp {
    display: none;
}
	
/*パートナーエリア＆ボタン*/
			.proboximg2{

			}
			
			.btn-wrap{
				width: 100%;
    margin-left: 20%;
				margin-top:2%;
			}
			
			.btn-wrap2{
				position:absolute;
				top:67%;
				width: 100%;
    margin-left: 4%;
				margin-top:2%;
			}
				.btn-wrap3{
				position:relative;
				width: 100%;
					max-width:600px;
margin:0 auto;
				margin-top:5%;
			}
			
			.btn,
a.btn,
button.btn {
	width:50%;
  font-size: 3vw;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;
  background: #fff;
}

a.btn-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 2px solid #000;
  border-radius: 0rem;
}

a.btn-border-shadow:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}
			
			.btn2,
a.btn2,
button.btn2 {
	width:90%;
  font-size: 2vw;
  font-weight: bold;
  line-height: 1;
  position: relative;
  display: inline-block;
  padding: 1rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #000;
  border-radius: 0rem;
background-color:#a8fffc!important;
}

a.btn-border-shadow2 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

}

a.btn-border-shadow2:before {
  position: absolute;
  top: -3px;
  left: -3px;

  width: 100%;
  height: 100%;
color:#fff;
  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 2px solid #000;
  border-radius: 0;
}

a.btn-border-shadow2:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow2:hover:before {
  top: 0;
  left: 0;
}
			
				.btn3,
a.btn3,
button.btn3 {
	width:90%;
  font-size: 1vw;
  font-weight: 700;
  line-height: 1;
  position: relative;
  display: inline-block;
  padding: 1rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0rem;
background-color:#8ef702!important;
  border-radius: 0.5rem;
}

			a.btn-border-shadow--radius {
  border-radius: 100vh;
}
a.btn-border-shadow3 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;
}

a.btn-border-shadow3:before {
  position: absolute;
  top: -3px;
  left: -0px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 2px solid #000;
  border-radius: 0.5rem;
}
a.btn-border-shadow--radius {
  border-radius: 100vh;
}
a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: #fff;
}

a.btn-border-shadow:before {
  position: absolute;
	top: -6px;}

			
			.btn3,
a.btn3,
button.btn3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border-shadow--radius {
  border-radius: 100vh;
}
a.btn-border-shadow3 {
  padding: calc(1.5rem - 12px) 3rem 1rem;

  background: #fff;
}

a.btn-border-shadow3:before {
    position: absolute;
    top: -2%;
    left: 3%;
    width: 100%;
    height: 100%;
    content: "";
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 2px solid #000;
    border-radius: 0.5rem;
}

a.btn-border-shadow--radius:before {
  border-radius: 100vh;
}

a.btn-border-shadow3:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow3:hover:before {
  top: 0;
  left: 0;
}
	@media screen and (max-width: 768px) {
 .pc{
        display:none!important;
    }
    
	.sp {
   
    display: block!important;
   
}
}

	

body{
	background-color:#f3d11f;
}


#masthead{
	background-color:#fbfb1d;!important;
	z-index:9999;
}

.container #masthead{
	background-color:transparent;
}

.logo{
	max-width:300px;
}

/*トップページ*/
.img_box{
 width:300px!important; 
 overflow:hidden!important;
		position:relative!important;
}
							
.img_boximg{
 transition:1s all;
	position:relative!important;
object-fit:cover;
	width:100%!important;
}
	
.img_boximg:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}
	
	.black{
background-color:#000!important;
	}
	.proimgl7{
		position:absolute!important;
bottom:10%!important;
width:150px!important;
		left:10%!important;
	}
		.proimgl7:hover {
  transform:scale(1.2,1.2);
	 transition:1s all;
text-decoration:none!important;
}
	
	 .pc{
        display:block;
    }
    
	.sp {
    display: none;
}
	

	@media screen and (max-width: 768px) {
 .pc{
        display:none!important;
    }
    
	.sp {
   
    display: block!important;
   
}
}
	
	.pad0{
		margin-top:0!important;
		margin-bottom:0!important;
	}
	#main{

	}
	
body{
	background-color:#fbfb1d;
}

	.yellow{
		background-color:#fbfb1d;
	}

#masthead{
	background-color:#fbfb1d;!important;
	z-index:9999;
}
	
	@media only screen and (min-width: 1025px){
.site-branding {
    display: table-cell;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
    vertical-align: middle;
    width: auto;
}
	}
	
		.mianimg{
		width:80%;
		margin:0 auto;
			height:80vh;
	}
	
.mianimg svg {
    width: 70%!important;
    margin: 0 auto;
    position: absolute;
    top: 30vh;
    right: 0;
    left: 0;
}
		.subarea{
				width:100%;	
  background-color: #fbfb1d;
			padding-bottom:15%;
			position:relative;
	}
	
	.prxboximg{
	width:100%;
		height:100%;
	}
	
	.aboutarea{
		width:100%;
		padding:50px;
		background-image:url("https://valueplanning.jp/wp-content/uploads/2021/06/toppageback.png");
		background-size:cover;
	}
	
	

	
	svg{
		width:100%;
		margin:0 auto;
		margin-top:0;
	}

	.st0{
  fill:#000;
  stroke:#000;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 1;
  -webkit-animation: blue 3s ease-in 0s;
  animation: blue 3s ease-in 0s;
}

  @-webkit-keyframes blue {
      0% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      40% {
        stroke-dashoffset: 2000;
        fill:transparent;
      }
      50% {
        fill:transparent;
      }
      100% {
        stroke-dashoffset: 0;
        fill:#000;
      }
    }
	
	.mainvisual{
		height:80vh;
		width:100%;	
			 animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
		position:relative;
		margin-bottom:5%;
	}
	
	@keyframes fadeIn { /*animation-nameで設定した値を書く*/

  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/

  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}
	
	.contactformbtn{
		display:block;
		position:fixed;
		top:20vh;
		width:6%;
		max-width:80px;
		padding:13px;
		height:200px;
		right:0;
		background-color:#000;
		z-index:9999;
	}
	
	
	.contactformbtn a{
		display:block;
		height:100%;
	}
	
	.contactformbtn a img{
height:100%;
	}
	
		.work{
background-color:;
		
	}	
	.work h2{
		margin-top:0;
		padding-top:20px;
	}
	.flex{
	display:flex;
		max-height:500px;
		max-width:1580px;
		margin:0 auto;
	}
/*	
	.flex span{
		margin:50px;
		flex:1;
		min-height:400px;
		box-shadow:#000;
		border-radius:5px;
		 box-shadow: 7px 7px;
	}
	*/
	.sample3 img{
	object-fit:cover;	
			display:block;
		height:400px;
width:100%;
	}
	
.sample3 {
	display:block;
		object-fit:cover;	
height:400px;
	position:relative;
}
.sample3 .caption {
	font-size:		2em;
	color:			#000;
	font-weight:bold;
	padding-top:80px;
	padding:50px;
}
.sample3 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 2s ease;
	transition:		all 2s ease;
}
.sample3:hover .mask {
	opacity:		0.8;	/* マスクを表示する */
	padding-left:		-40px;	/* 右にずらす */
}
	
	.sample3 h3{
	position:absolute;
		top:10px;	
		left:10px;
		display:block;
	}

	
	/* video */
.video{
  width: 90vw;
  height: 75vh;
	max-width:1580px;
  position: absolute;
  top: 5vh;
  left: 0;
	right:0;
	overflow: hidden;
  z-index: -1;
	margin:0 auto;
		border-radius:5px;
	background-color:#fff;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}

.video video{
	width:95%;
	max-width:1920px;
  min-height: 100%;
  height: auto;
  position: absolute;
	margin:0 auto;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
	border-radius:25px;
	animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
}


	
	.newsarea {
  position: relative;
  border: solid 2px #000;
  background: #fff;
  line-height: 1.4;
  padding: 0.4em 0.5em;
  margin: 2em 0 0.5em;
}

	.newsarea:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
 /* content: '\f0a7\ POINT';*/
content: '　　　　　　　　　　　　 ';
  background: #000;
  color: #fff;
  left: -2px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: ２;
  letter-spacing: 0.03em;
			transform: scaleY(1.3) perspective(.6em) rotateX(3deg);
	transform-origin: bottom left;
}
	
	.newsarea h2{
		margin-top:0;
	}
	
	.newsarea2 {
  position: relative;
  border: solid 2px #000;
  background: #fff;
  line-height: 1.4;
  padding: 0em 0.5em;
  margin: 2em 0 0.5em;
}

	.newsarea2:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
 /* content: '\f0a7\ POINT';*/
content: '　　　　　　　　　　　　 ';
  background: #000;
  color: #fff;
  left: -2px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 5px 7px 3px;
  font-size: 0.7em;
  line-height: ２;
  letter-spacing: 0.03em;
			transform: scaleY(1.3) perspective(.6em) rotateX(3deg);
	transform-origin: bottom left;
}
	
	

	
		.blue{
background-color:#8ef702!important;
	}
	
	.pink{
background-color:#a8fffc!important;
	}
	
	.orange{
background-color:#fdc71d!important;
	}
	
	.red{
background-color:#db4e40!important;
	}
	
	.green{
background-color:#0b9370!important;
	}
		.subblue{
background-color:#57b7e2!important;
	}
	
	.gray{
background-color:#515151!important;
	}
	
	
	.aboutflex{
		display:-ms-flex;
		display:flex;
		width:100%;
		padding:20px;
	}
	
	.aboutflex section{
		margin:50px;
		flex:1;
	}
	
	.abflexleft{
		display:block;
		width:75%
		max-width:700px;
	}

.abflexbox{
		display:block;
	position:relative;
	overflow:hidden;
		margin:0 auto;
		margin:0!important;
	}
.abflexbox img{
		display:block;
		margin:0 auto!important;
	}
	.abflexright{
	
	}
	
	.abflexright img{
		 position:absolute;
		bottom:20%;
		right:0;
		width:700px;
		max-width:35vw;
	}
	.abflexleft p{
	display:block;
		width:100%;
		margin:0 auto;
		padding:10%;
		background-color:#fbfb1d;
	}
	
	.projectflex{
		display:-ms-flex;
		display:flex;
		width:100%;
		padding-bottom:50px;
	}
	
	.projectflex section{
		margin:50px;
		flex:1;
		min-height:600px;
		box-shadow:#000;
		border-radius:5px;
	}
	
	.dark{
background-blend-mode:darken;
	}
						


	.contactarea{
		min-height:40vh;
		width:100%;
	}
	
	.contactareaflex{
		width:90%;
		margin:0 auto;
		max-width:1580px;
		display:-ms-flex;
		display:flex;
	}
	
	.contactareaflex section{
		flex:1;
	}
	
	.newsh2{
	width:100px;	
	}
		.newsh202{
	width:70px;	
			position:absolute;
			top:-30px;
			left:10px;
			z-index:1;
			max-width:5vw;
	}
		.newsh202img{
			display:block;
	width:60px;	
			position:absolute;
			top:-30px;
			left:90px;
			z-index:1;
						max-width:6vw;
	}
	.newsareablock{
		width:100%;
		position:relative;
		min-height:150px;
	}
	
	.newsh203{
	height:50px;
		position:absolute;
		top:80px;
		left:20px;
	}
	.newsh203-2{
		position:absolute;
		top:30px;
				left:20px;
	height:40px;
	}
	
		.newsh203-3{
		position:absolute;
		top:20px;
				left:20px;
	height:50px;
	}
	
	.newsh204{
	height:40px;
	}
	
		.slider_fade {
    position: relative;
		margin-top:0!important;
}

	.slider_fade ul{
	object-fit:cover;
				margin-top:0!important;
	}
.slider_fade > li {
    position: absolute;
			margin-top:0!important;
	object-fit:cover;
    list-style: none;
    visibility: hidden;
    animation: anime_slider_fade 15s 0s infinite;
}
	
	.slider_fade img{
		display:block;
		width:100vw;
height: calc(100vw * 0.75);
		min-width:120%;
		margin:0 auto;
		object-fit:cover;
	}
.slider_fade > li:nth-of-type(2) {
    animation-delay: 5s;
}
.slider_fade > li:nth-of-type(3) {
    animation-delay: 12s;
}

@keyframes anime_slider_fade {
    0% {
        visibility: visible;
        opacity: 0;
		transform: translateX(-100px);
    }
    15% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;

    }
    48.3% {
        opacity: 0;

    }
    100% {
        opacity: 0;
		transform: translateX(0px);
    }
}
	
		.videomask{
				display:block;
				position:absolute;
				width:100%;
				top:0;
				z-index:500;
}

	.member1{
		position:absolute;
top:50%;
		right:0;
		width:35%;
	}
	
	.member1-2{
		position:absolute;
		top:10%;
		right:5%;
		width:25%;
	}
		.member1-3{
		position:absolute;
		top:5%;
		right:0%;
		width:13%;
	}
		.member1-4{
		position:absolute;
		top:20%;
		right:35%;
		width:8%;
			transform: scale(-1, 1);
	}
	
		.member2{
		position:absolute;
top:33%;
		right:0;
			left:0;
			margin:0 auto;
		width:42%;
	}
	
	.member3{
		position:absolute;
top:55%;
		left:0;
		width:32%;
	}


	
/*プロジェクトエリア*/
		.projectflex2{
		display:-ms-flex;
		display:flex;
		width:90%;
			margin:0 auto;
	}
	
	.projectflex2 section{
		width: 33%;
		margin:3%;
    padding-top: 50%; // 追加した
    position: relative; // 追加した
    overflow: hidden; 
	}
	
		.projectflex3{
		display:-ms-flex;
		display:flex;
		width:90%;
			margin:0 auto;
	}
	
	.projectflex3 section{
		width: 33%;
		margin:3%;
    padding-top: 47%; // 追加した
    position: relative; // 追加した
    overflow: hidden; 
		margin-top:8%;
	}
	

			.probox{
				position:relative;
				width:35%;
			}
	

			.proimgr{
position:absolute;
				top:5%;
width:80%;
right:-5%;
	}
					
				.proimgl{
position:absolute;
					top:32%;
				width:100%;
left:-5%;
	}
		
			.proimgl2{
position:absolute;
					top:32%;
				width:100%;
left:0%;
	}
		.proimgl3{
position:absolute;
					top:92%;
				width:45%;
right:0%;
	}
	
	.proimgl4{
width:150px;
		margin-left:50px;
	}
	
	.proimgl5{
width:150px!important;
		margin-top:0px;
		margin-left:150px;
	}
	
	
		.proimgl:hover {
	transform: scale(0.5,1);
	 transition:1s all;
text-decoration:none!important;
}
	
		.proimgl3:hover {
	transform: scale(1.2);
	 transition:1s all;
text-decoration:none!important;
}
	.proimgl4:hover {
	transform: scale(1.2);
	 transition:1s all;
text-decoration:none!important;
}
	
	.proimgl5:hover {
	transform: scale(1.2);
	 transition:1s all;
text-decoration:none!important;
}
	
	
	.proimgl6:hover {
	transform: scale(1.2);
	 transition:1s all;
text-decoration:none!important;
}
			.probo{
position:absolute;
				bottom:3%;
				right:5%;
				width:45%;
				z-index:5;
			}
/*アバウトエリア２*/
			.aboutarea2{
				width:100%;
		padding-top:55%;
				 position: relative; 
	}
			.aboutflex2{
				display:-ms-flex;
				display:flex;
				position:absolute;
				top:15%;
				left:10%;
				width:80%;
			}
			
			.aboutflex2 p{
				font-size:1.1vw;
				font-weight:bold;
			}
			.abflexleft2{
				width:40%;
background-color: #fbfb1d;

			}		

/*パートナーエリア＆ボタン*/
			.proboximg2{

			}
			
			.btn-wrap{
				width: 100%;
    margin-left: 20%;
				margin-top:2%;
			}
			
			.btn-wrap2{
				position:absolute;
				top:67%;
				width: 100%;
    margin-left: 4%;
				margin-top:2%;
			}
				.btn-wrap3{
				position:relative;
				width: 100%;
					max-width:600px;
margin:0 auto;
				margin-top:5%;
			}
			
			.btn,
a.btn,
button.btn {
	width:50%;
  font-size: 3vw;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;
  background: #fff;
}

a.btn-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 2px solid #000;
  border-radius: 0rem;
}

a.btn-border-shadow:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}
			
			.btn2,
a.btn2,
button.btn2 {
	width:90%;
  font-size: 2vw;
  font-weight: bold;
  line-height: 1;
  position: relative;
  display: inline-block;
  padding: 1rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #000;
  border-radius: 0rem;
background-color:#a8fffc!important;
}

a.btn-border-shadow2 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

}

a.btn-border-shadow2:before {
  position: absolute;
  top: -3px;
  left: -3px;

  width: 100%;
  height: 100%;
color:#fff;
  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 2px solid #000;
  border-radius: 0;
}

a.btn-border-shadow2:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow2:hover:before {
  top: 0;
  left: 0;
}
			
				.btn3,
a.btn3,
button.btn3 {
	width:90%;
  font-size: 1vw;
  font-weight: 700;
  line-height: 1;
  position: relative;
  display: inline-block;
  padding: 1rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0rem;
background-color:#8ef702!important;
  border-radius: 0.5rem;
}

			a.btn-border-shadow--radius {
  border-radius: 100vh;
}
a.btn-border-shadow3 {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;
}

a.btn-border-shadow3:before {
  position: absolute;
  top: -3px;
  left: -0px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 2px solid #000;
  border-radius: 0.5rem;
}
a.btn-border-shadow--radius {
  border-radius: 100vh;
}
a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: #fff;
}

a.btn-border-shadow:before {
  position: absolute;
	top: -6px;}

			
			.btn3,
a.btn3,
button.btn3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border-shadow--radius {
  border-radius: 100vh;
}
a.btn-border-shadow3 {
  padding: calc(1.5rem - 12px) 3rem 1rem;

  background: #fff;
}

a.btn-border-shadow3:before {
    position: absolute;
    top: -2%;
    left: 3%;
    width: 100%;
    height: 100%;
    content: "";
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 2px solid #000;
    border-radius: 0.5rem;
}

a.btn-border-shadow--radius:before {
  border-radius: 100vh;
}

a.btn-border-shadow3:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow3:hover:before {
  top: 0;
  left: 0;
}
			
			.partnerp{
				width:100%;
				margin-left:1%;
				padding:2%;
				position:absolute;
				top:150px;
				z-index:5;
			}
			
						.partnerp p{
							 font-size: 1vw;
			}
						
/*コンタクトフォームエリア*/
								.contactareaflex{
									padding-top:5%;
								}
								.contactr{

								}
								.contactr p{
								display:block;
									width:80%;
									margin:0 auto;
								color:#000;
								}

/*フッタ―エリア*/
																.contactleft{
																	max-width:35%;
																}
																.contactright{
																max-width:65%;	
																}
							.ftmenu{
								color:#fff;
								font-weight:bold;
display:flex;
																}
															
																.ftmenu li{
flex:1;
																	width:15%;
display:block;
																	padding:2px;
																	margin:2px;
																	text-align:center;
																}						


	@media screen and (min-width: 768px) {
	
	
  /* kv */
  .kv{
    min-width: 960px;
  }

  .kv .main-copy{
    font-size: 60px;
  }

  .kv .sub-copy{
    font-size: 30px;
  }

  /* video */
  .video{
    min-width: 960px;
  }
}
	
	
	@media screen and (max-width: 768px) {
		
		.fttop{
		padding-top:3%;	
		}
		
	.ftmenu {
    margin-bottom: 0px;
    padding-bottom: 3px;
}

		.spmainimg svg{
			width:90%;
			top:30vh;
			right:0;
			left:0;
			position:absolute;
		}

		
		.projectflex2{
			flex-direction:column;
		}
		
		.projectflex2 section{
width:90%!important;
			padding-top:155%!important;
						margin-bottom:15%;
		}
		
		.projectflex3{
			flex-direction:column;
		}
		.projectflex3 section{
width:90%!important;
			padding-top:90%!important;
			margin-top:3%;
			margin-bottom:15%;
		}
		
		.btn-wrap2 {
    position: absolute;
    top: 93%!important;
    width: 100%;
    margin-left: 3%!important;
    margin-top: 2%;
}
	.contactformbtn{
		display:block;
		position:fixed;
		top:10vh;
		width:12%;
		max-width:90px;
		padding:10px;
		height:100px;
		right:0;
		background-color:#000;
		z-index:9999;
	}
	
	
	.contactformbtn a{
		display:block;
		height:100%;
	}
	
	.contactformbtn a img{
height:100%;
	}
	
			
			.mainvisual{
				height:70vh;
			}
			
			.slider_fade img {
    display: block;
    width: auto;
    height: 100vh;
    min-width: 150%;
    margin: 0 auto;
    object-fit: cover;
}
			
			
			.video{
    width: 90vw;
    height: 70vh;
    max-width: 1580px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1;
    margin: 0 auto;
    border-radius: 25px;
    background-color: #fff;
}

			
			.video video{
	width:95%;
  height: 30vh!important;
				max-height:30vh;
				min-height:300px;
  position: absolute;
	margin:0 auto;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
	border-radius:25px;
	animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
}
			
	.flex {
	flex-direction:column;
		max-height:700px;
	}	
		
		
			.aboutflex {
	flex-direction:column;
			}
					.aboutareaflex {
	flex-direction:column;
				}
			.abflexleft{
				width:100%;
				margin-left:5%;
			}
			
			.abflexright{
			display:none;	
			}
		
		.img_box{
			width:100%;
			margin:0 auto;
		}
		
		.img_boximg{
		width:100%;	
		}
			
		.abflexright img{
			max-width:100%;
		}
		
				.newsareaflex {
	flex-direction:column;
				}
			.projectflex{
									flex-direction:column;
			}
		
			.contactareaflex{
					flex-direction:column;
			}
				
		
		.newsh2 {
    width: 25%;
			margin-left:5px;
}
		
			.newsh202 {
    width:8%;
				max-width:8%;
    position: absolute;
    top: -10px;
    left: 5px;
    z-index: 1;
}
	.newsh203 {
    height: 14%;
    top: 33%;
}
		
			.newsh203-2 {
    position: absolute;
    top: 5%;
    left: 16px;
    height: 25%;
}
		
		.newsh203-3 {
    position: absolute;
    top: 0%;
    left: 16px;
    height: 25%;
}

		.newsh204 {
    height: 25px;
}
			.newsh202img {
    display: block;
    width: 100px;
    position: absolute;
    top: 1%;
    left: 10%;
    z-index: 1;
    max-width: 10vw;
}
		.partnerp {
    width: 100%;
    margin-left: 1%;
    padding: 2%;
    position: absolute;
    top: 60%;
    z-index: 5;
}
	}
	
	@media only screen and (max-width: 480px){
		
		#masthead{
			position:fixed;
			top:4%
			background-color:#fbfb1d;
		}
		
		
		.proimgl4 {
    width: 100px;
    margin-left: 2%;
}
		
			.proimgl5 {
    width: 100px;
    margin-left: 5%;
}
	
		.sp{
			display:block!important;
		}
		
		.newsh2 {
    width: 20%;
    margin-left: 5px;
}
		
		.newsh204 {
    height: 20px;
}
		
		.news p{
			font-size:3vw;
			line-height:1em;
		}
	.aboutarea {
    width: 100%;
    padding: 5px;
}
	
	/*memberエリアアバウトエリア２*/
			.aboutarea2{
				width:100%;
		padding-top:55%;
				 position: relative; 
	}
		.aboutflex2 {
    display: -ms-flex;
    display: flex;
    width: 100%;
    position: absolute;
    top: -60%;
    right: 0;
    left: 10%;
			    background-color: #fbfb1d;
}
		.abflexleft2 {
    width: 100%;
    background-color: #fbfb1d;
			padding:5px;
}
			
			.aboutflex2 p{
				font-size:3vw;
				text-align:center;
			}	
		.member1 {
    position: absolute;
    top: 50%;
    right: -5%;
    width: 40%;
}
		
		.member1-2 {
    position: absolute;
    top: 5%;
    right: 2%;
    width: 35%;
}
		.member1-3 {
    position: absolute;
    top: -10%;
    right: -5%;
    width: 15%;
}
		.member1-4 {
    position: absolute;
    top: 0%;
    right: 45%;
    width: 10%;
}

		.member2 {
    position: absolute;
    top: 20%;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 60%;
}
		
		.member3 {
    position: absolute;
    top: 50%;
    left: -6%;
    width: 42%;
}

						
		
/*プロジェクトエリア*/
		
		.proimgl{
		left:0;	
		}
	.projectflex3 {
    flex-direction: column;
    margin-bottom: 10%;
}
		
		/*パートナーエリア*/
		
		.partnerp p {
    font-size: 3.5vw;
}
		
				/*コンタクトエリア*/
		.contactr p {
    display: block;
			text-align:center;
			font-size:3.3vw;
    width: 80%;
    margin: 0 auto;
    color: #000;
}
		
		/*ボタン*/
		.btn, a.btn, button.btn {
    width: 100%;
    font-size: 3.2vw;
    font-weight: bold;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    padding: 1rem 1rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0em;
    color: #212529;
    border-radius: 0rem;
}
.btn-wrap {
    width: 100%;
    margin-left: 0%;
    margin-top: 10%;
}
		
		a.btn-border-shadow {
    padding: 10px 5px;
    background: #fff;
}
	a.btn-border-shadow2:before {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 100%;
    height: 100%;
    color: #fff;
    content: "";
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 2px solid #000;
    border-radius: 0;
}
		
	}
	
	.fade {
  transition: all 1000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 100px);
}

.fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
} 
	
	.fade2 {
  transition: all 3000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 50px);
}
	.fadein2 {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
} 
	
	/*トップページここまで*/