@charset "utf-8";

html,
body{
	width:100%;
	height:100%;
	font-size:12px;
}

body {
	color:#333333;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
	position:relative;
}

#wrapper {
	position: relative;
	width: 100%;
}
.grecaptcha-badge { visibility: hidden; }

/*---------------------loader---------------------*/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 9999;
}
#loader {
	display: flex;
	text-align: center;
    align-content: center;
    justify-content: center;
}
#loader svg{width:3.75em;animation:1.5s spin ease infinite}.animoRing{fill:none;stroke:rgba(0,0,0,.1);stroke-width:2}.animoBall{fill:#76c5ab;stroke:none}@keyframes spin{to{transform:rotate(360deg)}}

/*---------------------navi---------------------*/

/* Toggle(Button) */
#navToggle {
	display: none;
	position: fixed;
	right:30px;
	top:30px;
	width:30px;
	height:25px;
	cursor:pointer;
	z-index:8000}
#navToggle div {position:relative}
#navToggle span {
	display:block;
	position:absolute;/*to div*/
	width:100%;
	border-bottom:solid 1px #333;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;}
	
#navToggle span:nth-child(1) {top:0}
#navToggle span:nth-child(2) {top:11px;width:80%;}
#navToggle span:nth-child(3) {top:22px;width:60%;}

/* Toggle(Button) */
#navToggle {
	display: block;
	}
/* Click Toggle(Button) */
#navToggle.openNav span:nth-child(1) {
	top: 11px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg);
	border-bottom:solid 1px #fff;
}
#navToggle.openNav span:nth-child(2){
	display:none;
}
#navToggle.openNav span:nth-child(3) {
	top: 11px;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
	border-bottom:solid 1px #fff;
	width:100%;
}

.sp-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.95);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(5px);
  z-index:7000;
  display:none;
}
.openNav {
  display:block;
}
nav {
}
nav #gnav {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
	font-size:40px;
}
nav #gnav li {
	margin: 60px 0;
	padding-left: 70px;
	position:relative;
}
nav #gnav li a {
	color:#fff;
}
nav #gnav li a.current::before {
	position:absolute;
	top:50%;
	left:0;
	content:" ";
	width:40px;
	height:1px;
	border-top:1px solid #fff;
	margin-top: -4px;
}

/*---------------------contents---------------------*/
#contents {
	width: 100%;
	height:100%;
}

#contents > div {
   overflow: hidden;
   width: 100%;
	min-height: 100%;
   padding: 0 50px;
	box-sizing:border-box;
}
#contents > div#top {
	min-height:100%;
	background: #fff;
}
#contents > div:nth-child(even) {
	background: #dddddd;
}
#contents > div:nth-child(odd) {
	background: #f2f2f2;
}

#contents h2 {
	position:relative;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
	text-align:center;
	font-size:50px;
	margin-bottom:70px;
	padding-bottom:20px;
	line-height:1em;
}
#contents h2::after {
	position:absolute;
	bottom:0;
	left:50%;
	content:" ";
	width:40px;
	height:1px;
	border-top:1px solid #333;
	margin-left:-20px;
}


/*---------------------top---------------------*/
#contents #top {
	position: relative;
	padding:70px;
}
#contents #top .inner {
	display:block;
	width:100%;
	height:calc(100vh - 140px);
	min-height:630px;
	overflow:hidden;
	position:relative;
}
#contents #top .inner video {
	position:absolute;
	top:50%;
	left:50%;
	min-height:100%;
	min-width:100%;
	transform:translate(-50%,-50%);
}
#contents #top .text {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
	line-height:2em;
	z-index:2;
	text-align: center;
   padding-top: 210px;	
}
#contents #top .text h1 {
	display:none;
}
#contents #top .url {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
	position:absolute;
	top:50%;
	left: -20px;
	transform: rotate(-90deg);
	z-index:2;
	
}
.scrolldown{
    position:absolute;
    bottom:0;
    left:50%;
    z-index:3
}
.scrolldown:after{
    display:block;
    content:"";
    width:1px;
    height:120px;
    background:url(../images/scroll_down.gif) no-repeat 0 0;
    background-size:1px 100px;
    z-index:2;
    margin:0;
    border:none
}
/*---------------------intro---------------------*/
#contents #intro .inner {
	padding: 170px 0 120px 0;
	max-width: 1154px;
   margin: 0 auto;
   position: relative;
   border-left: 1px solid rgba(122, 122, 122, 0.1);
   border-right: 1px solid rgba(122, 122, 122, 0.1);
}
#contents #intro .inner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 33.3%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}
#contents #intro .inner:after {
    content: '';
    position: absolute;
    top: 0;
    left: 66.6%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}
#contents #intro .inner .text_area {
	position:relative;
	width:50%;
	padding:50px;
	box-sizing:border-box;
	background:#fff;
	margin-left:50%;
	z-index:2;
}
#contents #intro .inner .text_area h2 {
	font-size:45px;
	font-weight: 400;
	line-height:1.5em;
	text-align:left;
	margin-bottom: 30px;
    padding-bottom: 0;
}
#contents #intro .inner .text_area h2::after {
	display:none;
}
#contents #intro .inner .text_area h2 .sub {
    display: block;
	font-size:24px;
	font-weight:bold;
	line-height: 1.5em;
}
#contents #intro .inner .text_area .green {
	color:#76c5ab;
	font-weight: bold;
}
#contents #intro .inner .text_area p {
	line-height:2.5em;
	margin-top:20px;
}
#contents #intro .inner .photo_area {
	position:absolute;
	top:50%;
	left:0;
	width:66.6%;
	transform:translate(0,-50%);
	margin: -25px 0 0 0;
}
#contents #intro .inner .photo_area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*---------------------profile---------------------*/
#contents #profile .inner {
	padding: 120px 0 170px 0;
	max-width: 1154px;
   margin: 0 auto;
   position: relative;
   border-left: 1px solid rgba(122, 122, 122, 0.1);
   border-right: 1px solid rgba(122, 122, 122, 0.1);
}
#contents #profile .inner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 33.3%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}
#contents #profile .inner:after {
    content: '';
    position: absolute;
    top: 0;
    left: 66.6%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}
#contents #profile .inner h2 + div {
	position:relative;
	z-index: 1;
}
#contents #profile .inner .text_area {
	position:relative;
	width:50%;
	padding:50px;
	box-sizing:border-box;
	background:#fff;
	z-index:2;
}
#contents #profile .inner .text_area .sp {
	display:none;
}
#contents #profile .inner .photo_area {
	position:absolute;
	top:50px;
	right:0;
	width:66.8%;
	height:645px;
	margin-left:33.3%;
}
#contents #profile .inner .photo_area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#contents #profile .inner .text_area table {
	width:100%;
}

#contents #profile .inner .text_area table tr th,
#contents #profile .inner .text_area table tr td {
	padding-bottom:15px;
	line-height:2.5em;
	vertical-align:top;
}

#contents #profile .inner .text_area table tr th {
	font-weight:bold;
	width:6em;
}
#contents #profile .inner .text_area p {
	line-height:2.5em;
	margin-top:20px;
}
#contents #profile .inner .text_area .sns {
	margin-top:30px;
}
#contents #profile .inner .text_area .sns ul {
	display:flex;
}
#contents #profile .inner .text_area .sns li {
	margin-right:15px;
}
#contents #profile .inner .text_area .sns li a {
	display:flex;
	justify-content: center;
	align-items: center;
	width:40px;
	height:40px;
	border-radius: 1000px;
	transition: all 1s;
}
#contents #profile .inner .text_area .sns li a:hover {
	opacity:0.7;
}
#contents #profile .inner .text_area .sns li img {
	width:20px;
	height:auto;
}
#contents #profile .inner .text_area .sns li.sns_x a {
	background:#000;
}
#contents #profile .inner .text_area .sns li.sns_insta a {
	background:#FF0069;
}



/*---------------------works---------------------*/
#contents #works .inner {
	padding: 120px 0;
	max-width: 1154px;
   margin: 0 auto;
   position: relative;
   border-left: 1px solid rgba(122, 122, 122, 0.1);
   border-right: 1px solid rgba(122, 122, 122, 0.1);
}
#contents #works .inner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 33.3%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}
#contents #works .inner:after {
    content: '';
    position: absolute;
    top: 0;
    left: 66.6%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}
#contents #works .inner ul {
	position:relative;
	display: flex;
   flex-wrap: wrap;
   flex-direction: row;
	margin-bottom:60px;
}
#contents #works .inner ul li {
	width:33.3%;
	padding:0 40px;
	box-sizing:border-box;
}

#contents #works .inner ul li img {
	width:100%;
	height:auto;
}

#contents #works .inner ul li .text_area {
	padding: 0px 10px;
   box-sizing: border-box;
   margin-top: -10px;
}

#contents #works .inner ul li .text_area p {
	line-height:2em;
}

#contents #works .inner ul li .text_area .category {
	background:#333;
	color:#fff;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
	padding:5px 8px 3px;
	display:inline-block;
	line-height:1em;
	font-size: 14px;
}

#contents #works .inner ul li .text_area .title {
	font-size:16px;
	font-weight:bold;
	margin:10px 0;
	line-height: 1.5em;
}

#contents #works .inner p.note {
	position:relative;
	font-size:14px;
	text-align:center;
	line-height:2em;
}

/*---------------------blog---------------------*/
#contents #blog .inner {
	padding: 120px 0;
	max-width: 1154px;
   margin: 0 auto;
   position: relative;
   border-left: 1px solid rgba(122, 122, 122, 0.1);
   border-right: 1px solid rgba(122, 122, 122, 0.1);
}
#contents #blog .inner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 33.3%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}
#contents #blog .inner:after {
    content: '';
    position: absolute;
    top: 0;
    left: 66.6%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}
#contents #blog .inner ul {
	position:relative;
	display: flex;
   flex-wrap: wrap;
   flex-direction: row;
}
#contents #blog .inner ul li {
	width:33.3%;
	padding:0 40px;
	box-sizing:border-box;
	margin-bottom:50px;
}
#contents #blog .inner ul li img {
	width:100%;
	height:auto;
}
#contents #blog .inner ul li .text_area {
	padding: 0px 10px;
   box-sizing: border-box;
   margin-top: -10px;
}

#contents #blog .inner ul li .text_area .date {
	background:#333;
	color:#fff;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
	padding: 5px 8px 3px;
	display:inline-block;
	line-height:1em;
	font-size: 14px;
}

#contents #blog .inner ul li .text_area .title {
	font-size:14px;
	margin-top:5px;
}

#contents #blog .inner .more_btn {
	position:relative;
	text-align:right;
}

#contents #blog .inner .more_btn a {
	position:relative;
	display:inline-block;
	line-height:1em;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
	font-size:14px;
	background:#333;
	color:#fff;
	width:50px;
	height:50px;
	text-align:center;
    padding-top: 28px;
    box-sizing: border-box;
	text-indent:-9999px;
}
#contents #blog .inner .more_btn a::before {
	content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -9px;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/*---------------------contact---------------------*/
#contents #contact .inner {
	padding: 120px 0;
	max-width: 1154px;
   margin: 0 auto;
   position: relative;
   border-left: 1px solid rgba(122, 122, 122, 0.1);
   border-right: 1px solid rgba(122, 122, 122, 0.1);
}
#contents #contact .inner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 33.3%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}
#contents #contact .inner:after {
    content: '';
    position: absolute;
    top: 0;
    left: 66.6%;
    width: 1px;
    height: 100%;
    background-color: rgba(122, 122, 122, 0.1);
}

#contents #contact .wpcf7 {
	position:relative;
	width:50%;
	border:none;
	margin:0 auto;
	display:block;
	z-index: 1;
}
#contents #contact .wpcf7 form label {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 400;
}
#contents #contact h2 + p {
	position:relative;
	text-align:center;
	margin-bottom:50px;
}

#contents #contact .recaptcha_policy {
	position:relative;
		width: 50%;
    border: none;
    margin: 15px auto 0;
    display: block;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 300;
}
/*---------------------footer---------------------*/
footer{
	width: 100%;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    padding: 30px 0;
    background: #333;
    color: #fff;
}


/*----------------------------tablet----------------------------*/
@media screen and (max-width: 768px) {
	/*---------------------top---------------------*/
	#contents #top .inner {
		min-height: 400px;
	}
	/*---------------------intro---------------------*/
	#contents #intro .inner {
		padding: 120px 0;
	}
	#contents #intro .inner .text_area {
		width:100%;
		margin-left: 0;
	}
	#contents #intro .inner .photo_area {
		position:static;
		width:100%;
		transform: translate(0, 0);
		margin: 0;
	}	
	/*---------------------profile---------------------*/
	#contents #profile .inner .text_area {
		width:100%;
	}
	#contents #profile .inner .photo_area {
		position:static;
		width:100%;
		height:auto;
		margin-left:0;
	}

	/*---------------------works---------------------*/
	#contents #works .inner ul li {
		padding: 0 20px;
	}	
	
	/*---------------------blog---------------------*/
	#contents #blog .inner ul li {
		padding: 0 20px;
	}	
	
	/*---------------------contact---------------------*/
	#contents #contact .wpcf7 {
		width:100%;
	}
	#contents #contact .recaptcha_policy {
		width:100%;
	}
	
}

@media screen and (max-width: 450px) {
	/*---------------------navi---------------------*/
	#navToggle {
		right:20px;
		top:20px;
	}
	nav #gnav {
	   font-size: 30px;
	}
	nav #gnav li {
		margin: 50px 0;
	}
	/*---------------------contents---------------------*/
	#contents > div {
		padding: 0 30px;
	}
	#contents h2 {
		margin-bottom:50px;
	}

	/*---------------------top---------------------*/
	#contents #top {
		padding:30px;
	}
	#contents #top .inner {
		height:calc(100vh - 60px);
		min-height: 400px;
	}
	#contents #top .inner video {
		height: 100%;
	}	
	
	#contents #top .url {
		left: -40px;
		font-size: 11px;
	}
	.scrolldown{
		bottom:6px;
	}
	.scrolldown:after{
		height:50px;
	}
	/*---------------------intro---------------------*/
	#contents #intro .inner {
		padding: 80px 0;
	   border-left: none;
	   border-right: none;
	}
	#contents #intro .inner:before {
		display:none;
	}
	#contents #intro .inner:after {
		display:none;
	}
	#contents #intro .inner .text_area {
		width:100%;
		padding: 30px;
		margin-left:0;
	}
	#contents #intro .inner .text_area h2 {
		font-size:26px;
		margin-bottom: 20px;
	}
	#contents #intro .inner .text_area h2 .sub {
		font-size:16px;
	}
	#contents #intro .inner .text_area p {
		margin-top:15px;
	}
	#contents #intro .inner .photo_area {
		position:static;
		width:100%;
		transform: translate(0, 0);
		height: 75vw;
	}
	/*---------------------profile---------------------*/
	#contents #profile .inner {
		padding: 80px 0;
	   border-left: none;
	   border-right: none;
	}
	#contents #profile .inner:before {
		display:none;
	}
	#contents #profile .inner:after {
		display:none;
		}
	#contents #profile .inner .text_area {
		padding: 30px;
	}
	#contents #profile .inner .text_area .sp {
		display:block;
	}
	#contents #profile .inner .text_area table tr th, 
	#contents #profile .inner .text_area table tr td {
		padding-bottom: 5px;
	}	
	
	/*---------------------works---------------------*/
	#contents #works .inner {
		padding: 80px 0;
	   border-left: none;
	   border-right: none;
	}
	#contents #works .inner:before {
		display:none;
	}
	#contents #works .inner:after {
		display:none;
	}
	#contents #works .inner ul {
		display: block;
	}
	#contents #works .inner ul li {
		width:100%;
		padding:0;
		margin-bottom:40px;
	}

	/*---------------------blog---------------------*/
	#contents #blog .inner {
		padding: 80px 0;
	   border-left: none;
	   border-right: none;
	}
	#contents #blog .inner:before {
		display:none;
	}
	#contents #blog .inner:after {
		display:none;
	}
	#contents #blog .inner ul {
		display: block;
	}
	#contents #blog .inner ul li {
		width:100%;
		padding:0;
		margin-bottom:40px;
	}

	/*---------------------contact---------------------*/
	#contents #contact .inner {
		padding: 80px 0;
	   border-left: none;
	   border-right: none;
	}
	#contents #contact .inner:before {
		display:none;
	}
	#contents #contact .inner:after {
		display:none;
	}

}


/*---------------------clearfix---------------------*/

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}


/* = Selected Text
----------------------------------------------- */
::selection {
	background:#ececec; /* Safari */
}

::-moz-selection {
	background:#ececec; /* Firefox */
}