@charset "utf-8";
/* CSS Document */

/**************************Common***************************/
*{box-sizing:border-box;}
html{
	font-size:16px;
}
body{
	background:#FDE427;
	font-family: 'Noto Sans JP', sans-serif;
	color:#513C2E;
	line-height: 1.375;
	animation: pageFadeIn 1s ease-out;
	-webkit-animation: pageFadeIn 1s ease-out;
}
img{
	max-width:100%;
	height:auto;
	vertical-align: bottom;
}
@keyframes pageFadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes pageFadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
.d-pc-none{display:none;}
a{
	text-decoration: none;
	color:inherit;
	transition:color 0.3s ;
}
.container{
	max-width:750px;
	margin-right: auto;
	margin-left: auto
}
.row {
	display: flex;
	flex-wrap: wrap;
}
.col {
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%
}
.col-half{
	width:50%;
}
.bg_fresh_lemmon{
	background:#FDE427;
}
.bg_lychee{
	background:#FFF8E5;
}
.bg_white{
	background:#FFFFFF;
}
.bg_orange{
	background:#FFC100;
}
.text_orange{
	color:#F36321;
}

/**************************TOP***************************/
#home h2{
	font-size:2rem;
	font-weight:bold;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	padding-bottom:60px;
}
#home section{
	padding-top:60px;
}
/*************HeaderMenu**************/
header{
	width:100%;
	padding:40px;
	justify-content: space-between;
	align-items: center;
	position:fixed;
	top:0;
	z-index: 99;
}
.header-logo{width:86px;}
.g-nav{
	font-family: 'Open Sans', sans-serif;
	font-size:1.25rem;
}
.g-nav li:first-of-type{
	margin-right:30px;
}
.menu-active{
	color:#F36321;
}
.g-nav a:hover{
	color: #F36321;
}
/*************MainVisual**************/
#home #main{
	padding-top:132px;
	text-align: center;
}
.main-portrait{
	margin-bottom:80px;
}
.main-catch-jp{
	font-size:2.25rem;
	line-height: 49px;
	font-weight:bold;
	margin-bottom:1rem;
}
.main-catch-en{
	font-size:1.25rem;
	font-weight:bold;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: .2em;
	margin-bottom:50px;
}
.main-scroll-down{
	padding-bottom:50px;
}
.main-scroll-down img{
	transform:translateY(0px);
	transition: all .3s ease-out;
	animation: scrollDown .6s ease-out infinite alternate;
}
.main-scroll-down img:hover{
	transform:translateY(10px);
}
@keyframes scrollDown{
	0% {transform: translateY(0px);}
	100% {transform: translateY(10px);}
}

/*************Profile**************/
.profile-wrapper .row{
	justify-content: center;
}
.profile-box{
	text-align: center;
	padding-left:10px;
	padding-right:10px;
}
.profile-box{
	margin-bottom:20px;
}
.profile-box-inner{
	padding:20px;
	font-weight:bold;
	height:100%;
}
.profile-text{
	padding:10px;
	letter-spacing:.16em;
}

/*************Service**************/
.service-wrapper .row{
	justify-content: center;
}
.service-box{
	text-align: center;
	padding-left:10px;
	padding-right:10px;
}
.service-box{
	margin-bottom:20px;
}
.service-box-inner{
	padding:20px;
	height:100%;
	font-weight:bold;
}
.service-text{
	padding:10px;
	letter-spacing:.16em;
}

/*************Skill**************/
#skill{
	padding-bottom:120px;
}
#skill .container{
	max-width:560px;
}
.col-one-six{
	width:16.666%;
}
.skill-box{
	padding-left:10px;
	padding-right:10px;
	text-align:center;
	font-weight:bold;
}
.skill-box dt{
	margin-bottom:10px;
}
.skill-wrapper{
	margin-bottom:20px;
}
.skill-text{
	padding:10px;
	letter-spacing:.16em;
	margin-bottom:60px;
}

/*************BacktoTop**************/
#backtop{
	padding-top:20px!important;
	padding-bottom:20px;
}
.btn-backtop{
	text-align:center;
}
.btn-backtop img{
	transform:translateY(0px);
	transition: all .3s ease-out;
}
.btn-backtop img:hover{
	transform:translateY(-5px);
}
/*************Footer**************/
footer{
	padding-top:60px;
	padding-bottom:60px;
	text-align: center;
}
footer .container{
	max-width:560px;
}
.contact-text{
	padding:10px;
	font-size:1.125rem;
	letter-spacing:.16em;
}
.footer-mail{
	font-size:2.5rem;
	margin-bottom:60px;
}
.footer-mail a:hover{
	color: #F36321;
}
footer small{
	font-size:0.9rem;
}
	
/**************************TOP SmartPhone***************************/
@media screen and (max-width:450px) {
	#home section{
		padding-left:30px;
		padding-right:30px;
	}
	.d-pc-none{
		display:block;
	}
	#home h2{
		padding-bottom:30px;
	}
/*************HeaderMenu**************/
	header{
		padding:20px;
	}
/*************MainVisual**************/
	#home #main{
		padding-top:100px;
	}
	.main-portrait{
		margin-bottom:40px;
	}
	.main-catch-jp{
		font-size:1.875rem;
		line-height: 41px;
	}
	.main-catch-en{
		font-size:1rem;
		margin-top: 25px;
		margin-bottom: 25px;
	}
	.main-scroll-down{
		padding-bottom:30px;
	}
/*************Profile**************/
	.profile-box-inner p{
		font-size:0.65rem;;
		margin-left:-15px;
		margin-right:-15px;
		letter-spacing: 0;
	}
	.profile-box-inner img{
		max-width:80%;
		height:auto;
	}
/*************Service**************/
	.service-box-inner p {
		font-size:0.65rem;;
		margin-left:-15px;
		margin-right:-15px;
		letter-spacing: 0;
	}
	.service-box-inner img{
		max-width:80%;
		height:auto;
	}
/*************Skill**************/
	.col-one-six{
		width:33.333%;
		margin-bottom:20px;
	}
	.skill-wrapper{
		max-width:80%;
		margin-left:auto;
		margin-right:auto;
	}
/*************Footer**************/
	footer{
		padding-top:45px;
	}
	.footer-mail{
		margin-bottom:30px;
	}
	.contact-text{
		font-size:0.8rem;
		letter-spacing:0;
		padding-top:0;
		padding-bottom:20px;
	}
	.footer-mail{
		font-size:1.5rem;
	}
}


/**************************ButtonAnimation***************************/
.button {
	background: #00A569;
	color: #FFFFFF;
	cursor: pointer;
	font-size: 1.5em;
	height: 75px;
	line-height: 75px;
	text-align: center;
	text-transform: uppercase;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: fit-content;
	border-radius:10px;
}
.button a{
	display:block;
	padding-left: 50px;
	padding-right: 50px;
}
.button:hover {
	background: #00A569;
	opacity: 0.8;
}
.button:active {
	box-shadow: inset 0px 2px 8px -1px #007e50;
}
.fancy-button {
	margin: auto;
	position: relative;
}
.frills, .frills:after, .frills:before {
	position: absolute;
	background: #00A569;
	border-radius: 4px;
	height: 8px;
}
.frills:after, .frills:before {
	content: "";
	display: block;
}
.frills:before {
	bottom: 45px;
}
.frills:after {
	top: 45px;
}
.left-frills {
	right: 250px;
	top: 28.5px;
}
.active .left-frills {
	-webkit-animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out;
	animation: move-left 0.38s ease-out, width-to-zero 0.38s ease-out;
}
.left-frills:before, .left-frills:after {
	left: 15px;
}
.active .left-frills:before {
	-webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;
	animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;
}
.active .left-frills:after {
	-webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;
	animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;
}
.right-frills {
	left: 250px;
	top: 28.5px;
}
.active .right-frills {
	-webkit-animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out;
	animation: move-right 0.38s ease-out, width-to-zero 0.38s ease-out;
}
.right-frills:before, .right-frills:after {
	right: 15px;
}
.active .right-frills:before {
	-webkit-animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;
	animation: width-to-zero 0.38s ease-out, move-up 0.38s ease-out;
}
.active .right-frills:after {
	-webkit-animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;
	animation: width-to-zero 0.38s ease-out, move-down 0.38s ease-out;
}
.left-frills:before, .right-frills:after {
	-webkit-transform: rotate(34deg);
	transform: rotate(34deg);
}
.left-frills:after, .right-frills:before {
	-webkit-transform: rotate(-34deg);
	transform: rotate(-34deg);
}
@-webkit-keyframes move-left {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	65% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
	}
	100% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
	}
}
@keyframes move-left {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	65% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
	}
	100% {
		-webkit-transform: translateX(-80px);
		transform: translateX(-80px);
	}
}
@-webkit-keyframes move-right {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	65% {
		-webkit-transform: translateX(80px);
		transform: translateX(80px);
	}
	100% {
		-webkit-transform: translateX(80px);
		transform: translateX(80px);
	}
}
@keyframes move-right {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	65% {
		-webkit-transform: translateX(80px);
		transform: translateX(80px);
	}
	100% {
		-webkit-transform: translateX(80px);
		transform: translateX(80px);
	}
}
@-webkit-keyframes width-to-zero {
	0% {
		width: 38px;
	}
	100% {
		width: 8px;
	}
}
@keyframes width-to-zero {
	0% {
		width: 38px;
	}
	100% {
		width: 8px;
	}
}
@-webkit-keyframes move-up {
	100% {
		bottom: 69.75px;
	}
}
@keyframes move-up {
	100% {
		bottom: 69.75px;
	}
}
@-webkit-keyframes move-down {
	100% {
		top: 69.75px;
	}
}
@keyframes move-down {
	100% {
		top: 69.75px;
	}
}
@-webkit-keyframes width-to-zero-sp {
	0% {
		width: 20px;
	}
	100% {
		width: 8px;
	}
}
@keyframes width-to-zero-sp {
	0% {
		width: 20px;
	}
	100% {
		width: 8px;
	}
}
@-webkit-keyframes move-left-sp {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	65% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	100% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
}
@keyframes move-left-sp {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	65% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	100% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
}
@-webkit-keyframes move-right-sp {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	65% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	100% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
}
@keyframes move-right-sp {
	0% {
		-webkit-transform: none;
		transform: none;
	}
	65% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	100% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
}
@media screen and (max-width:450px) {
	.active .left-frills {
		-webkit-animation: move-left-sp 0.38s ease-out, width-to-zero-sp 0.38s ease-out;
		animation: move-left-sp 0.38s ease-out, width-to-zero-sp 0.38s ease-out;
	}
	.active .left-frills:before {
		-webkit-animation: width-to-zero-sp 0.38s ease-out, move-up 0.38s ease-out;
		animation: width-to-zero-sp 0.38s ease-out, move-up 0.38s ease-out;
	}
	.active .left-frills:after {
		-webkit-animation: width-to-zero-sp 0.38s ease-out, move-down 0.38s ease-out;
		animation: width-to-zero-sp 0.38s ease-out, move-down 0.38s ease-out;
	}
	.active .right-frills {
		-webkit-animation: move-right-sp 0.38s ease-out, width-to-zero-sp 0.38s ease-out;
		animation: move-right-sp 0.38s ease-out, width-to-zero-sp 0.38s ease-out;
	}
	.active .right-frills:before {
		-webkit-animation: width-to-zero-sp 0.38s ease-out, move-up 0.38s ease-out;
		animation: width-to-zero-sp 0.38s ease-out, move-up 0.38s ease-out;
	}
	.active .right-frills:after {
		-webkit-animation: width-to-zero-sp 0.38s ease-out, move-down 0.38s ease-out;
		animation: width-to-zero-sp 0.38s ease-out, move-down 0.38s ease-out;
	}
}

/**************************Works***************************/
#works-area {
	padding-top: 132px;
}
.works-categories{
	margin-bottom:60px;
	padding-left:10px;
	padding-right:10px;
}
.works-categories li {
	line-height:30px;
	font-family: 'Open Sans', sans-serif;
	width:25%;
	text-align: center;
	border-left:2px solid #513C2E;
}
.works-categories li span{
	display: inline-block;
	position: relative;
	overflow: hidden;
	padding-left:.2em;
	padding-right:.2em;
}
.works-categories li span:after{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: -110%;
	width: 100%;
	height: 4px;
	background: #F36321;
	transition: all .3s ease;
}
.works-categories li .active span:after,.works-categories li span:hover:after{
	left:0;
}
.works-categories li:last-child {
	border-right:2px solid #513C2E;
}
.filter a.active {
	color: #F36321;
}
.filter a:hover{
	color: #F36321;
}
.works-categories-current {
	color: #F36321;
}
.works-category-detail {
	font-size: 1.125rem;
	color: #513C2E;
}
@keyframes up {
	0% {
		transform: translateY(5%);
	}
	100% {
		transform: none;
	}
}
.is-animated {
	animation: .6s up;
}
.work-card{
	width:50%;
	margin-bottom:60px;
}
.work-card{
	padding-right:10px;
	padding-left:10px;
}
.works-card-link {
	display: block;
	-webkit-tap-highlight-color: transparent;
}
.works-card-link h2,.works-card-link p{
	transition:color 0.3s ;
}
.works-card-link img{
	transition:transform 0.3s;
}
.works-card-link:hover h2,.works-card-link:hover p {
	color:#F36321;
}
.works-card-link:hover img {
	transform: scale(1.02);
	filter: drop-shadow(0px 0px 5px #e3cd23)
}
.works-card-link:active {
	transform: translateY(2px);
	box-shadow: 0px 0px 0px #e6e6e6;
}
.work-image {
	max-width: 100%;
	height:auto;
}
.work-title {
	font-size: 1.25rem;
	font-weight: bold;
	margin-top:10px;
	margin-bottom:5px;
}

/*************Works Footer**************/
.lower footer h2{
	font-size:2rem;
	font-weight:bold;
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	padding-bottom:60px;
}

/**************************Works SmartPhone***************************/
@media screen and (max-width:768px){
	.work-title{
		font-size:2.5vw;
	}
	.work-caption{
		font-size:2vw;
	}
}
@media screen and (max-width:450px) {
	#works-area {
		padding-left: 30px;
		padding-right: 30px;
		padding-top:100px;
		padding-bottom:45px;
	}
	.works-categories li{
		line-height:20px;
		border-left:1px solid #513C2E;
	}
	.works-categories li:last-child{
		border-right:1px solid #513C2E;
	}
	.works-categories{
		margin-bottom:45px;
	}
	.works-category-detail{
		font-size:0.75rem;
	}
	.work-card{
		width:100%;
		margin-bottom:45px;
	}
	.work-card,.works-categories{
		padding-left:0;
		padding-right:0;
	}
	.works-categories li span:after{
		height:3px;
	}
	.work-title{
		font-size:1rem;
	}
	.work-caption{
		font-size:0.725rem;
	}
/*************Works Footer**************/
	.lower footer h2{
		padding-bottom: 30px;
	}
}

/**************************Works Detail***************************/
.work-main-image{
	text-align: center;
}
.work-main-image img{
	max-width:100%;
	height:auto;
}
.work-comment{
	padding-top:120px;
	padding-bottom:120px;
}
.works-detail h1{
	display: table;
	margin-left:auto;
	margin-right:auto;
	font-size:2rem;
	font-weight:bold;
	text-align:center;
	border-bottom:8px solid #F36321;
	padding-bottom:25px;
	margin-bottom:40px;
}
.work-release-date{
	font-weight:bold;
	text-align:center;
}
.work-release-date,.work-project{
	margin-bottom:40px;
}
.work-project{
	display:table;
	margin-left:auto;
	margin-right:auto;
}
.work-team,.work-piriod,.work-charge{
	display:table;
	margin-bottom:10px;
}
.work-comment h2{
	text-align:center;
	margin-top:120px;
	margin-bottom:60px;
	font-size:2rem;
	font-weight:bold;
	color:#F36321;
}
.detail-no-h2{
	margin-top:120px;
}
.work-comment-text{
	letter-spacing:.16em;
	margin-bottom:20px;
}
.work-comment-list li:not(:last-child){
	margin-bottom:20px;
}
.works-detail h3{
	font-size:1.25rem;
	font-weight:bold;
	margin-bottom:20px;
}
.work-comment-image{
	margin-bottom:20px;
}
.work-comment-parts{
	margin-bottom:60px;
}
.work-comment-link a{
	margin-top:40px;
	padding-right:35px;
	font-weight:bold;
	display: inline-block;
	line-height:30px;
}
.work-comment-link a:hover{
	color:#F36321;
}
.work-comment-link svg{
	width:30px;
	height:30px;
	vertical-align: bottom;
	margin-left:5px;
}
.work-comment-link path{
	transition:0.3s ;
}
.work-comment-link a:hover path{
	fill:#F36321;
}

/**************************Works Detail SmartPhone***************************/
@media screen and (max-width:768px){
	.work-comment {
		padding-left:20px;
		padding-right:20px;
	}
}
@media screen and (max-width:450px) {
	.work-main-image{
		margin-top:95px;
	}
	.work-comment {
		padding-top: 60px;
		padding-bottom: 60px;
		padding-left:30px;
		padding-right:30px;
	}
	.works-detail h1{
		font-size:1.5rem;
	}
	.work-piriod{
		text-align:left;
	}
	.work-comment h2{
		margin-top:60px;
		margin-bottom:40px;
		font-size:1.5rem;
	}
	.work-comment h2.work-comment-h2-small{
		font-size:1.4rem;
	}
	.detail-no-h2{
	margin-top:60px;
}
	.work-comment-parts{
		margin-bottom: 40px;
	}
	.work-comment-link a{
		margin-top:30px;
		letter-spacing: .1em;
	}
	.work-comment-link svg{
		margin-left:20px;
	}
}