@charset "utf-8";
html {}
body {
background-color: #FFFFFF;
color: #707070;
min-width: 980px;
/* for IE6/7 */ 
*font-size:small;
/* for IE Quirks Mode */
*font:x-small;
font-family: 'Cardo', serif;
font-size: 14px;
-webkit-text-size-adjust: 100%;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}
select,input,button,textarea,button {font:99%;}
table {font-size:inherit;font:100%;}
pre,code,kbd,samp,tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
a:link {
color: #106246;
transition: .3s;
}
a:visited {
color: #106246;
text-decoration: none;
}
a:hover {
color: #106246;
text-decoration: underline;
}
a:active {
color: #106246;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.pc {
display: inherit!important;
}
.sp {
display: none!important;
}
#wrapper {
    overflow: hidden;
}
/*--NAVIGATION-------------*/
#gnav {
border-top: 4px solid #106246;
text-align: right;
padding-top: 30px;
font-size: 16px;
position: fixed;
width: 100%;
z-index: 10;
}
#gnav ul{
width: 96%;
margin-left: auto;
margin-right: auto;
}
#gnav ul li {
display: inline;
padding-left: 20px;
}
#gnav ul li.sns{
font-size: 18px;
}
#gnav ul li a {
  position: relative;
  display: inline-block;
  transition: .3s;
  text-decoration: none;
}
#gnav ul li a:hover {
  text-decoration: none;
}
#gnav ul li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #106246;
  transition: .3s;
}
#gnav ul li a:hover::after {
  width: 100%;
}

/*--HEADER-------------*/
header {
text-align: center;
}
header .inner {
background-color: #EDEBE6;
width: 980px;
padding-top: 15px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
}
header .heading {
font-size: 23px;
padding-top: 100px;
}
header h1 {
font-size: 60px;
font-weight: 400;
margin-bottom: 100px;
letter-spacing: .1em;
}
header h1 a {
text-decoration: none;
color: #707070!important;
}
header h1 a:hover {
text-decoration: none;
opacity: .6;
}

/*--CONTENTS-------------*/
#contents {
width: 580px;
margin-right: auto;
margin-left: auto;
}
#contents:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden
}


/*--WORKS_LIST-------------*/
#works_list{
text-align: center
}
#works_list li{
width: 150px;
height: 150px;
overflow:hidden;
display: inline-block;
margin: 15px;
opacity: 0;
}
#works_list li img{
width: 150px;
height: 150px;
 transition:1s all;
 object-fit: cover;
}
#works_list li img:hover{
  transform:scale(1.1,1.1);
  transition:1s all;
}
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*--WORKS_LIST_MOV-------------*/
#works_list_mov{
text-align: center
}
#works_list_mov li{
width: 586px;
height: 330px;
overflow:hidden;
display: inline-block;
margin: 15px;
opacity: 0;
}
#works_list_mov li img{
width: 586px;
height: 330px;
 transition:1s all;
 object-fit: cover;
}
#works_list_mov li img:hover{
  transform:scale(1.1,1.1);
  transition:1s all;
}



/*--FOOTER-------------*/
footer {
background-color: #106246;
clear: both;
padding-top: 100px;
padding-bottom: 50px;
text-align: center;
font-size: 12px;
color: #FFF;
margin-top: 100px;
}


/*--PROFILE-------------*/
.prof_ph {
float: left;
width: 180px;
}
.prof_ph img{
width: 100%;
height: auto
}
.prof_txt {
float: right;
width: 360px;
}
.prof_txt h2 {
    border-bottom: 1px solid #C2D7D0;
    padding-bottom: 0.5em;
    margin-bottom: 1em
}
.prof_txt h2.second {
    margin-top: 3em
}

/*--MAILFORM-------------*/
#mailformpro table{
width: 100%;
}
#mailformpro table th,#mailformpro table td{
	border-bottom: 1px solid #C2D7D0;
	padding: 20px;
}
#mailformpro table th{
white-space: nowrap;
vertical-align: top;
}
#mailformpro table .form_field{
width: calc(100% - 4px)!important;
padding: 2px!important;
}
.btn_send {
	text-align: center
}
#mailformpro .submit_btn {
	padding: 5px 40px;
	font-size: 16px;
	border: none;
	color: #FFF;
	background-color: #000;
	cursor: pointer;
	outline: none;
}

#mailformpro .submit_btn:hover {
	background-color: #878787;
}
.mfp_thanks{
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}








































@media screen and (max-width: 479px) {
html {}
body {
background-color: #FFFFFF;
color: #707070;
min-width: 320px;
/* for IE6/7 */ 
*font-size:small;
/* for IE Quirks Mode */
*font:x-small;
font-family: 'Cardo', serif;
font-size: 14px;
-webkit-text-size-adjust: 100%;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

select,input,button,textarea,button {font:99%;}
table {font-size:inherit;font:100%;}
pre,code,kbd,samp,tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
a:link {
color: #106246;
transition: .3s;
}
a:visited {
color: #106246;
text-decoration: none;
}
a:hover {
color: #106246;
text-decoration: underline;
}
a:active {
color: #106246;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.pc {
display: none!important;
}
.sp {
display: inherit!important;
}
#wrapper {
    overflow: hidden;
    border-top: 4px solid #106246;
}
/*--NAVIGATION-------------*/
#gnav {
border-top: 4px solid #106246;
text-align: center;
padding-top: 30px;
font-size: 16px;
position: fixed;
width: 100%;
z-index: 10;
display: none;
background-color: rgba(16,98,70,0.82);
height: 100vh
}
#gnav ul{
width: 96%;
margin-left: auto;
margin-right: auto;
padding-top: 30vh
}
#gnav ul li {
display: block;
padding-left: 0px;
margin-bottom: 2em;
}
#gnav ul li.sns{
font-size: 18px;
}
#gnav ul li a {
  position: relative;
  display: inline-block;
  transition: .3s;
  text-decoration: none;
  color: #FFF;
}
#gnav ul li a:hover {
  text-decoration: none;
}
#gnav ul li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #106246;
  transition: .3s;
}
#gnav ul li a:hover::after {
  width: 100%;
}

/*--HEADER-------------*/
header {
text-align: center;
}
header .inner {
background-color: #EDEBE6;
width: 90%;
padding-top: 15px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
}
header .heading {
font-size: 16px;
padding-top: 50px;
}
header h1 {
font-size: 24px;
font-weight: 400;
margin-bottom: 50px;
letter-spacing: .1em;
}
header h1 a {
text-decoration: none;
color: #707070!important;
}
header h1 a:hover {
text-decoration: none;
opacity: .6;
}

/*--CONTENTS-------------*/
#contents {
width: 90%;
margin-right: auto;
margin-left: auto;
}
#contents:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden
}


/*--WORKS_LIST-------------*/
#works_list{
text-align: center
}
#works_list li{
width: 150px;
height: 150px;
overflow:hidden;
display: inline-block;
margin: 15px;
opacity: 0;
}
#works_list li img{
width: 150px;
height: 150px;
 transition:1s all;
 object-fit: cover;
}
#works_list li img:hover{
  transform:scale(1.1,1.1);
  transition:1s all;
}
.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}



/*--WORKS_LIST_MOV-------------*/
#works_list_mov{
text-align: center;
width: 90%;
margin-left: auto;
margin-right: auto;
}
#works_list_mov li{
width: 90%;
height: 180px;
overflow:hidden;
display: inline-block;
margin: 15px;
opacity: 0;
}
#works_list_mov li img{
width: 90%;
height: auto;
 transition:1s all;
 object-fit: cover;
}
#works_list_mov li img:hover{
  transform:scale(1.1,1.1);
  transition:1s all;
}
video{
width: 100%;
height: auto
}


/*--FOOTER-------------*/
footer {
background-color: #106246;
clear: both;
padding-top: 100px;
padding-bottom: 50px;
text-align: center;
font-size: 12px;
color: #FFF;
margin-top: 100px;
}


/*--PROFILE-------------*/
.prof_ph {
float: none;
width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
text-align: center
}
.prof_ph img{
width: 100%;
height: auto
}
.prof_txt {
float: none;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.prof_txt h2 {
    border-bottom: 1px solid #C2D7D0;
    padding-bottom: 0.5em;
    margin-bottom: 1em
}
.prof_txt h2.second {
    margin-top: 3em
}

/*--MAILFORM-------------*/
#mailformpro table{
width: 100%;
}
#mailformpro table th,#mailformpro table td{
	border-bottom: 1px solid #C2D7D0;
	padding: 20px;
    display: block;
}
#mailformpro table th{
white-space: nowrap;
vertical-align: top;
}
#mailformpro table .form_field{
width: calc(100% - 4px)!important;
padding: 2px!important;
}
.btn_send {
	text-align: center
}
#mailformpro .submit_btn {
	padding: 5px 40px;
	font-size: 16px;
	border: none;
	color: #FFF;
	background-color: #000;
	cursor: pointer;
	outline: none;
}

#mailformpro .submit_btn:hover {
	background-color: #878787;
}
.mfp_thanks{
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}




input{ font-size:16px!important; } /*フォームのフォーカスOFF*/
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  font-size:16px;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
/*SP NAV*/
#panel-btn{
  display: inline-block;
  position: fixed;
  width: 40px;
  height: 40px;
  margin: 5px 0 10px;
  border-radius: 50%;
  right: 20px;
  top: 10px;
  z-index: 999;
animation-duration: 2s;
}
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: #106246;
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 2px;
  background: #106246;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -6px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
}