@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Bad+Script&family=Courgette&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Rampart+One&display=swap");

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&family=Shippori+Mincho+B1&display=swap");

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&family=Shippori+Mincho+B1:wght@700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@100..900&family=Shippori+Mincho+B1:wght@700&family=Zen+Kaku+Gothic+New&display=swap");

@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=IBM+Plex+Sans+JP:wght@700&family=M+PLUS+1:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho+B1&family=Zen+Kaku+Gothic+New:wght@700&family=Zen+Kurenaido&display=swap");

@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=IBM+Plex+Sans+JP&family=M+PLUS+1:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho+B1&family=Zen+Kaku+Gothic+New&family=Zen+Kurenaido&display=swap");

@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&family=IBM+Plex+Sans+JP:wght@700&family=M+PLUS+1:wght@100..900&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho+B1&family=Zen+Kaku+Gothic+New&family=Zen+Kurenaido&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
button,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

li,
dd {
	list-style-type: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
}

q,
blockquote {
	quotes: none;
}

q:before,
q:after {
	content: "";
	content: none;
}

blockquote:before,
blockquote:after {
	content: "";
	content: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

img {
	border: none;
	vertical-align: bottom;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	background: #fff;
	color: #333;
	font-family: "Shippori Mincho B1", serif;
	font-size: 16px;
	line-height: 1.5;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	height: auto;
	max-width: 100%;
}

.l-footer {
	background-color: #8EDAE5;
	line-height: 60px;
	text-align: center;
}

body.fixed {
	overflow: hidden;
}

.l-header {
	height: 85px;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 100; /* ナビ開いてる時のバツボタン */ /* ナビメニュー内 */ /* ハンバーガーメニュー押してactiveクラスを付いたら表示する */
}

.l-header.headerColorScroll {
	background-color: #8EDAE5;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.l-header.headerColorScroll .l-header__logo {
	color: #e3f7fa;
}

.l-header.headerColorScroll .l-header__item {
	color: #e3f7fa;
}

.l-header.headerColorScroll .l-hamburger span {
	background: #e3f7fa;
}

.l-header__inner {
	align-items: center;
	display: flex;
	height: inherit;
}

.l-header__logo {
	color: #8EDAE5;
	font-size: 42px;
	text-shadow: 1px 1px 0 #fff, 2px 2px 0 #333;
}

.l-header__nav {
	margin-left: auto;
}

.l-header__list {
	display: flex;
}

.l-header__item {
	color: #8EDAE5;
	font-size: 22px;
	margin: 0 20px;
	text-shadow: 1px 1px 0 #fff, 2px 2px 0 #333;
}

.l-header__link {
	-webkit-tap-highlight-color: transparent;
	display: inline-block;
	position: relative;
	transition: 0.3s;
}

.l-header__link::after {
	background-color: #e3f7fa;
	bottom: 0;
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	transition: 0.3s;
	width: 0;
}

.l-header__link:hover::after {
	width: 100%;
}

.l-header .l-hamburger {
	cursor: pointer;
	display: block;
	height: 40px;
	position: fixed;
	right: 13px;
	text-align: center;
	top: 12px;
	width: 40px;
	z-index: 3;
}

.l-header .l-hamburger span {
	background: #8EDAE5;
	box-shadow: 1px 1px 0 #fff, 2px 2px 0 #333;
	display: block;
	height: 2px;
	left: 6px;
	position: absolute;
	transition: 0.3s ease-in-out;
	width: 30px;
}

.l-header .l-hamburger span:nth-child(1) {
	top: 10px;
}

.l-header .l-hamburger span:nth-child(2) {
	top: 20px;
}

.l-header .l-hamburger span:nth-child(3) {
	top: 30px;
}

.l-header .l-hamburger.active span:nth-child(1) {
	background: #e3f7fa;
	box-shadow: 1px 1px 0 #fff, -1px 2px 0 #333;
	left: 6px;
	top: 16px;
	transform: rotate(-45deg);
}

.l-header .l-hamburger.active span:nth-child(2),
.l-header .l-hamburger.active span:nth-child(3) {
	background: #e3f7fa;
	top: 16px;
	transform: rotate(45deg);
}

.l-header .l-globalMenuSp {
	-webkit-overflow-scrolling: touch;
	background: #8EDAE5;
	color: #e3f7fa;
	font-size: 24px;
	height: 100%;
	left: 0;
	opacity: 0;
	overflow-y: scroll;
	padding-top: 50px;
	position: fixed;
	text-align: center;
	text-shadow: 1px 1px 0 #fff, 2px 2px 0 #333;
	top: 0;
	transition: opacity 0.6s ease, visibility 0.6s ease;
	visibility: hidden;
	width: 100%;
	z-index: 2;
}

.l-header .l-globalMenuSp ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

.l-header .l-globalMenuSp__link {
	list-style-type: none;
	padding: 0;
	transition: 0.4s all;
	width: 100%;
}

.l-header .l-globalMenuSp__link a {
	-webkit-tap-highlight-color: transparent;
}

.l-header .l-globalMenuSp__link:last-child {
	padding-bottom: 0;
}

.l-header .l-globalMenuSp__link a {
	display: block;
	padding: 1em 0;
	text-decoration: none;
}

.l-header nav.l-globalMenuSp.active {
	opacity: 100;
	visibility: visible;
}

/* ローディング画面背景 */

.loader-bg {
	align-items: center;
	background-color: #8EDAE5;
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 9999;
}

/* ローディングアニメーション */

.loader {
	animation: load3 1.4s infinite linear;
	background: #ffffff;
	background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
	border-radius: 50%;
	font-size: 10px;
	height: 6em;
	margin: 50px auto;
	position: relative;
	text-indent: -9999em;
	transform: translateZ(0);
	width: 6em;
}

.loader:before {
	background: #ffffff;
	border-radius: 100% 0 0 0;
	content: "";
	height: 50%;
	left: 0;
	position: absolute;
	top: 0;
	width: 50%;
}

.loader:after {
	background: #8EDAE5;
	border-radius: 50%;
	bottom: 0;
	content: "";
	height: 75%;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 75%;
}

.l-inner {
	margin: 0 auto;
	max-width: 1000px;
	width: 100%;
}

.l-wrapper {
	overflow: hidden;
	overflow-wrap: break-word;
}

.l-main--thanks {
	min-height: 100vh;
}

.c-button-toTop {
	bottom: 170px;
	margin: 0;
	opacity: 0;
	position: fixed;
	right: 30px;
	text-indent: -9999px;
	transition: all 0.3s ease 0s;
	visibility: hidden;
	z-index: 50;
}

.c-button-toTop.is-show {
	opacity: 0.7;
	visibility: visible;
}

.c-button-toTop__link {
	-webkit-tap-highlight-color: transparent;
	background: #8EDAE5;
	border: solid 1px #fff;
	border-radius: 50%;
	display: block;
	height: 60px;
	position: relative;
	width: 60px;
}

.c-button-toTop__link::before {
	border-right: 2px solid #e3f7fa;
	border-top: 2px solid #e3f7fa;
	bottom: 0;
	content: "";
	display: block;
	height: 14px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 7px;
	transform: rotate(-45deg);
	width: 14px;
}

.c-breadcrumb {
	color: #8d8d8d;
	padding-bottom: 100px;
	padding-top: 40px;
}

.p-top-contact__heading,
.p-top-works__heading,
.p-top-price__heading,
.p-top-service__heading,
.p-top-about__heading {
	color: #8EDAE5;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
}

.p-top-contact,
.p-top-works,
.p-top-service,
.p-top-about {
	padding-bottom: 240px;
	padding-top: 120px;
	position: relative;
	z-index: 0;
}

/*========= mv ===============*/

.p-top-mv {
	position: relative;
}

.p-top-mv__mv {
	height: 800px;
	line-height: 0;
}

.p-top-mv__mv video {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-top-mv__message {
	left: 50%;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
}

.p-top-mv__text {
	color: #8EDAE5;
	font-size: 80px;
	font-weight: bold;
	letter-spacing: -0.02em;
}

/*========= about ===============*/

.p-top-about {
	background-color: #e3f7fa;
}

.p-top-about__flex {
	align-items: center;
	display: flex;
	margin-top: 60px;
}

.p-top-about__img {
	flex: 0 0 40%;
	line-height: 0;
	margin: 0 auto;
	max-width: 500px;
}

.p-top-about__img img {
	border-radius: 30px;
}

.p-top-about__message {
	margin-left: 60px;
}

.p-top-about__title-profile {
	font-size: 20px;
	font-style: italic;
	text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.p-top-about__text {
	background: #fff;
	border-radius: 12px;
	margin-top: 16px;
	padding: 20px;
}

.p-top-about__skills {
	margin: 0 auto;
	max-width: 100%;
	width: 650px;
}

.p-top-about__title-skills {
	font-size: 20px;
	font-style: italic;
	margin-top: 50px;
	text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.p-top-about__img-skills {
	display: flex;
	flex: 0 0 50%;
	flex-wrap: wrap;
	gap: 10px 0;
	line-height: 0;
	margin-top: 16px;
	text-align: center;
}

.p-top-about__img-skills img {
	width: 60px;
}

.p-top-about__text-skills {
	background: #fff;
	border-radius: 12px;
	margin-top: 16px;
	padding: 16px;
}

/*========= service ===============*/

.p-top-service::before {
	background: #fff;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0; /*四角形を傾ける*/
	transform: skewY(5deg);
	transform-origin: top right;
	width: 100%;
	z-index: -1;
}

.p-top-service__heading {
	padding-bottom: 20px;
}

.p-top-service__flex {
	margin: 30px auto 0;
	max-width: 800px;
	width: 100%;
}

.p-top-service__flexItem {
	align-items: center;
	display: flex;
}

.p-top-service__flexItem:nth-of-type(2) {
	margin-top: 20px;
}

.p-top-service__flexItem:nth-of-type(2) .p-top-service__message {
	margin-top: 16px;
}

.p-top-service__img {
	flex: 0 0 40%;
	line-height: 0;
	text-align: center;
}

.p-top-service__img img {
	width: 200px;
}

.p-top-service__title {
	font-size: 20px;
	font-style: italic;
	text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.p-top-service__text {
	margin-top: 16px;
}

/*========= price追加 ===============*/

.p-top-price {
	padding-bottom: 240px;
	padding-top: 120px;
}

.p-top-price__heading {
	padding-bottom: 20px;
}

.p-top-price__text {
	font-size: 14px;
	margin: 5px auto;
	max-width: 750px;
}

.p-top-price__table {
	border: solid 1px #dcdcdc;
	border-collapse: initial;
	border-spacing: 2px;
	margin: 30px auto 0;
	max-width: 750px;
	table-layout: fixed;
	width: 100%;
}

.p-top-price__table th,
.p-top-price__table td {
	border: solid 1px #dcdcdc;
	padding: 15px;
}

.p-top-price__table th {
	background: #8EDAE5;
	width: 40%;
}

.p-top-price__table td a {
	color: #0000ee;
}

/*========= works ===============*/

.p-top-works {
	background-color: #e3f7fa;
}

.p-top-works::before {
	background-color: #e3f7fa;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0; /*四角形を傾ける*/
	transform: skewY(-5deg);
	transform-origin: top left;
	width: 100%;
	z-index: -1;
}

.p-top-works .swiper-container {
	margin-bottom: 30px;
	margin-inline: auto;
	position: relative;
}

.p-top-works .swiper {
	height: 55vw;
	margin-top: 10px;
	max-height: 400px;
	max-width: 800px;
	padding-bottom: 20px;
}

.p-top-works .swiper-slide img {
	-o-object-fit: cover;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.p-top-works .swiper-button-next {
	color: #8EDAE5;
	right: 0;
}

.p-top-works .swiper-button-next::after {
	font-size: 30px;
}

.p-top-works .swiper-button-prev {
	color: #8EDAE5;
	left: 0;
}

.p-top-works .swiper-button-prev::after {
	font-size: 30px;
}

.p-top-works .swiper-pagination {
	bottom: 0;
}

.p-top-works .swiper-pagination-bullet-active {
	background-color: #8EDAE5;
}

.p-top-works__button {
	margin-top: 40px;
	text-align: center;
}

.p-top-works__link {
	background: #8EDAE5;
	border-radius: 28px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	letter-spacing: 0.08em;
	line-height: 2;
	max-width: 100%;
	padding: 8px 0;
	text-align: center;
	transition: all 0.3s ease 0s;
	width: 280px;
}

.p-top-works__link:hover {
	opacity: 0.6;
}

.p-top-contact::before {
	background: #fff;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0; /*四角形を傾ける*/
	transform: skewY(5deg);
	transform-origin: top right;
	width: 100%;
	z-index: -1;
}

.p-top-contact .wpcf7-form {
	margin: 0 auto;
	max-width: 700px;
	padding-top: 40px;
	width: 100%;
}

.p-top-contact__form-item {
	margin-top: 20px;
}

.p-top-contact__form-label {
	margin-bottom: 10px;
}

.p-top-contact__span {
	background: #ff4646;
	border-radius: 2px;
	color: #fff;
	font-size: 14px;
	margin-left: 12px;
	padding: 1px 3px;
	text-align: center;
}

.p-top-contact__form-input [type=text] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	background: #e3f7fa;
	border: 1px solid #707070;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	padding: 16px 20px;
	width: 100%;
}

.p-top-contact__form-input [type=email] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	background: #e3f7fa;
	border: 1px solid #707070;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	padding: 16px 20px;
	width: 100%;
}

.p-top-contact__form-input textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	background: #e3f7fa;
	border: 1px solid #707070;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	height: 160px;
	padding: 16px 20px;
	resize: none;
	width: 100%;
}

.p-top-contact__form-button {
	margin: 73px auto 0;
	max-width: 100%;
	width: 280px;
}

.p-top-contact__form-button [type=submit] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #8EDAE5;
	border: none;
	border-radius: 28px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: inherit;
	font-size: 100%;
	letter-spacing: 0.08em;
	line-height: 2;
	padding: 8px 0;
	transition: all 0.3s ease 0s;
	width: 100%;
}

.p-top-contact__form-button [type=submit]:hover {
	opacity: 0.6;
}

.p-top-contact__form-button .wpcf7-spinner {
	animation: spin 2s linear infinite;
	background-color: #fff;
	border: 4px solid #8EDAE5;
	border-radius: 50%;
	border-top: 4px solid #ffffff;
	height: 24px;
	width: 24px;
}

.p-top-contact__form-button .wpcf7-spinner::before {
	display: none;
}

.p-top-contact .wpcf7-form.sent .wpcf7-response-output {
	display: none;
}

.p-contact-thanks__inner {
	padding-bottom: 100px;
	padding-top: 100px;
}

.p-contact-thanks__info {
	padding-top: 30px;
}

.p-contact-thanks__text {
	padding-bottom: 110px;
}

.p-contact-thanks__text span {
	color: #ff4646;
}

/*========= reCAPTCHA ===============*/

.recapcha {
	font-size: 13px;
	text-align: right;
}

.recapcha a {
	color: #0000ee;
	text-decoration: underline;
}

.grecaptcha-badge {
	visibility: hidden;
}

/*========= 1文字ずつ出現させるためのCSS ===============*/

.jsTxt {
	display: block;
	opacity: 0;
}

.jsTxt span {
	opacity: 0;
	transition: 0.6s ease-in-out;
}

/*========= スクロールダウン ===============*/

.scroll {
	bottom: 100px;
	left: 7%;
	position: absolute;
}

.scroll-text {
	color: #8EDAE5;
}

.scroll-line {
	background-color: #8EDAE5;
	height: 60px;
	left: 50%;
	overflow: hidden;
	position: absolute;
	top: 30px;
	width: 1px;
}

.scroll-line::after {
	animation: scrolldown 2s ease-in-out infinite;
	background-color: #000;
	content: "";
	height: 60px;
	position: absolute;
	width: 1px;
}

.p-works-archive {
	padding-bottom: 100px;
	padding-top: 50px;
}

.p-works-archive__inner {
	margin-top: 80px;
}

.p-works-archive__heading {
	color: #8EDAE5;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
}

.p-works-archive__list {
	display: flex;
	flex-wrap: wrap;
}

.p-works-archive__item {
	flex: 0 0 50%;
	margin-bottom: 40px;
	padding: 0 15px;
}

.p-works-archive__img img {
	-o-object-fit: cover;
	max-height: 330px;
	object-fit: cover;
	transition: all 0.6s ease 0s;
	width: 100%;
}

.p-works-archive__img img:hover {
	opacity: 0.6;
	transform: scale(1.05, 1.05);
}

.p-works-archive__title {
	font-size: 18px;
	text-align: center;
}

.p-works-pager {
	margin-top: 90px;
	text-align: center;
}

.p-works-pager .page-numbers {
	border: solid 2px #8EDAE5;
	border-radius: 3px;
	display: inline-block;
	height: 52px;
	line-height: 48px;
	margin: 0 2px;
	padding: 0;
	text-align: center;
	transition: all 0.3s ease 0s;
	width: 50px;
}

.p-works-pager .page-numbers:hover,
.p-works-pager .page-numbers.current {
	background: #8EDAE5;
	color: #fff;
}

.p-works-genre {
	display: flex;
	flex-wrap: wrap;
	margin: 30px 0 40px 0;
}

.p-works-genreLink {
	margin-right: 14px;
}

.p-works-genreLink a {
	background: #fff;
	display: block;
	font-size: 16px;
	font-weight: 700;
	padding: 6px 14px;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}

.p-works-genreLink a.is-active,
.p-works-genreLink a:hover {
	background: #8EDAE5;
	border-radius: 3px;
	color: #fff;
}

.p-singleWorks-container {
	padding-bottom: 100px;
	padding-top: 100px;
}

.p-singleWorks-container__inner {
	margin-top: 60px;
}

.p-singleWorks-container__title {
	font-size: 24px;
	text-align: center;
}

.p-singleWorks-container__thumbnail img {
	-o-object-fit: cover;
	height: 50vw;
	max-height: 500px;
	object-fit: cover;
	width: 100%;
}

.p-singleWorks-container__content {
	background: #e3f7fa;
	border-radius: 15px;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
	margin: 0 auto;
	margin-top: 40px;
	max-width: 700px;
	padding: 60px 55px;
	width: 100%;
}

.p-singleWorks-container__content h3 {
	border-bottom: 1px solid #CECDCD;
	border-left: 4px solid #8EDAE5;
	font-size: 18px;
	margin-bottom: 10px;
	padding-left: 8px;
}

.p-singleWorks-container__content p:not(:last-child) {
	margin-bottom: 30px;
}

.p-singleWorks-container__content p a {
	color: #0000EE;
}

.p-singleWorks-container__content ul {
	margin-left: 3px;
}

.p-singleWorks-container__content ul li {
	list-style: disc;
	margin-left: 15px;
}

.p-singleWorks-container .p-singleWorks-pager {
	display: flex;
	justify-content: center;
	margin-top: 90px;
}

.p-singleWorks-container .p-singleWorks-pager a {
	display: block;
}

.p-singleWorks-container .is-single {
	background: #8EDAE5;
	border: solid 2px #8EDAE5;
	border-radius: 3px;
	color: #fff;
	height: 52px;
	line-height: 48px;
	text-align: center;
	width: 120px;
}

.p-singleWorks-container .is-article {
	border: solid 2px #8EDAE5;
	border-radius: 3px;
	height: 52px;
	line-height: 48px;
	margin: 0 20px;
	text-align: center;
	width: 120px;
}

.p-singleWorks-container .p-singleWorks-table {
	border-collapse: collapse;
	margin: 30px auto 0;
	max-width: 650px;
	table-layout: fixed;
	width: 100%;
}

.p-singleWorks-container .p-singleWorks-table th,
.p-singleWorks-container .p-singleWorks-table td {
	border: solid 1px;
	border-color: #707070;
	padding: 10px;
	text-align: center;
}

.p-singleWorks-container .p-singleWorks-table th {
	background: #999;
	color: #fff;
	width: 38%;
}

.p-singleWorks-container .p-singleWorks-table td a {
	color: #0000EE;
}

.contact-confirm {
	background: #e3f7fa;
	border: none;
	padding: 16px 20px;
}

.textarea {
	height: 160px;
}

.wpcf7-previous {
	background: #e3f7fa;
	border-radius: 3px;
	border-width: 1px;
	width: 80px;
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

.animated.hinge {
	animation-duration: 2s;
}

.bounce {
	animation-name: bounce;
}

.flash {
	animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

.pulse {
	animation-name: pulse;
}

.shake {
	animation-name: shake;
}

.swing {
	animation-name: swing;
	transform-origin: top center;
}

.tada {
	animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

.wobble {
	animation-name: wobble;
}

.bounceIn {
	animation-name: bounceIn;
}

.bounceInDown {
	animation-name: bounceInDown;
}

.bounceInLeft {
	animation-name: bounceInLeft;
}

.bounceInRight {
	animation-name: bounceInRight;
}

.bounceInUp {
	animation-name: bounceInUp;
}

.bounceOut {
	animation-name: bounceOut;
}

.bounceOutDown {
	animation-name: bounceOutDown;
}

.bounceOutLeft {
	animation-name: bounceOutLeft;
}

.bounceOutRight {
	animation-name: bounceOutRight;
}

.bounceOutUp {
	animation-name: bounceOutUp;
}

.fadeIn {
	animation-name: fadeIn;
}

.fadeInDown {
	animation-name: fadeInDown;
}

.fadeInDownBig {
	animation-name: fadeInDownBig;
}

.fadeInLeft {
	animation-name: fadeInLeft;
}

.fadeInLeftBig {
	animation-name: fadeInLeftBig;
}

.fadeInRight {
	animation-name: fadeInRight;
}

.fadeInRightBig {
	animation-name: fadeInRightBig;
}

.fadeInUp {
	animation-name: fadeInUp;
}

.fadeInUpBig {
	animation-name: fadeInUpBig;
}

.fadeOut {
	animation-name: fadeOut;
}

.fadeOutDown {
	animation-name: fadeOutDown;
}

.fadeOutDownBig {
	animation-name: fadeOutDownBig;
}

.fadeOutLeft {
	animation-name: fadeOutLeft;
}

.fadeOutLeftBig {
	animation-name: fadeOutLeftBig;
}

.fadeOutRight {
	animation-name: fadeOutRight;
}

.fadeOutRightBig {
	animation-name: fadeOutRightBig;
}

.fadeOutUp {
	animation-name: fadeOutUp;
}

.fadeOutUpBig {
	animation-name: fadeOutUpBig;
}

.animated.flip {
	animation-name: flip;
	backface-visibility: visible;
}

.flipInX {
	animation-name: flipInX;
	backface-visibility: visible !important;
}

.flipInY {
	animation-name: flipInY;
	backface-visibility: visible !important;
}

.flipOutX {
	animation-name: flipOutX;
	backface-visibility: visible !important;
}

.flipOutY {
	animation-name: flipOutY;
	backface-visibility: visible !important;
}

.lightSpeedIn {
	animation-name: lightSpeedIn;
	animation-timing-function: ease-out;
}

.lightSpeedOut {
	animation-name: lightSpeedOut;
	animation-timing-function: ease-in;
}

.rotateIn {
	animation-name: rotateIn;
}

.rotateInDownLeft {
	animation-name: rotateInDownLeft;
}

.rotateInDownRight {
	animation-name: rotateInDownRight;
}

.rotateInUpLeft {
	animation-name: rotateInUpLeft;
}

.rotateInUpRight {
	animation-name: rotateInUpRight;
}

.rotateOut {
	animation-name: rotateOut;
}

.rotateOutDownLeft {
	animation-name: rotateOutDownLeft;
}

.rotateOutDownRight {
	animation-name: rotateOutDownRight;
}

.rotateOutUpLeft {
	animation-name: rotateOutUpLeft;
}

.rotateOutUpRight {
	animation-name: rotateOutUpRight;
}

.slideInDown {
	animation-name: slideInDown;
}

.slideInLeft {
	animation-name: slideInLeft;
}

.slideInRight {
	animation-name: slideInRight;
}

.slideOutLeft {
	animation-name: slideOutLeft;
}

.slideOutRight {
	animation-name: slideOutRight;
}

.slideOutUp {
	animation-name: slideOutUp;
}

.hinge {
	animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

.rollIn {
	animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

.rollOut {
	animation-name: rollOut;
}

@media (min-width: 768px) and (max-width: 1024px) {

.l-header__nav {
	display: none;
}

.l-header .l-hamburger {
	padding-right: 25px;
	right: 5%;
	top: 30px;
}

.l-inner {
	padding: 0 25px;
	width: 90%;
}

.p-top-mv__text {
	font-size: 60px;
}

.p-top-about__flex {
	display: block;
}

.p-top-about__message {
	margin-left: initial;
	margin-top: 30px;
}

}

@media (min-width: 1025px) {

body.fixed {
	overflow: auto;
}

.l-header .l-hamburger {
	display: none;
}

.l-header .l-globalMenuSp {
	display: none;
}

}

@media (max-width: 767px) {

.l-footer {
	line-height: 50px;
}

.l-header {
	height: 80px;
}

.l-header__logo {
	font-size: 38px;
}

.l-header__nav {
	display: none;
}

.l-header .l-hamburger {
	right: 5%;
	top: 20px;
}

.l-inner {
	width: 90%;
}

.c-button-toTop {
	right: 20px;
}

.c-button-toTop__link {
	height: 50px;
	width: 50px;
}

.c-button-toTop__link::before {
	height: 10px;
	top: 5px;
	width: 10px;
}

.p-top-contact__heading,
.p-top-works__heading,
.p-top-price__heading,
.p-top-service__heading,
.p-top-about__heading {
	font-size: 34px;
}

.p-top-contact,
.p-top-works,
.p-top-service,
.p-top-about {
	padding-bottom: 160px;
	padding-top: 90px;
}

.p-top-mv__mv {
	height: 700px;
}

.p-top-mv__text {
	font-size: 48px;
}

.p-top-about__flex {
	display: block;
	margin-top: 40px;
}

.p-top-about__message {
	margin-left: initial;
	margin-top: 20px;
}

.p-top-about__title-profile {
	font-size: 18px;
}

.p-top-about__img-skills img {
	max-width: 60px;
	width: 15vw;
}

.p-top-service__flex {
	margin-top: 0;
}

.p-top-service__flexItem:nth-of-type(2) {
	margin-top: 50px;
}

.p-top-service__flexItem {
	display: block;
}

.p-top-service__img img {
	width: 180px;
}

.p-top-service__title {
	font-size: 18px;
	text-align: center;
}

.p-top-price {
	padding-bottom: 160px;
	padding-top: 90px;
}

.p-top-works .swiper {
	margin-top: 30px;
}

.p-top-contact .wpcf7-form {
	padding-top: 24px;
}

.p-top-contact__form-button {
	margin: 67px auto 0;
}

.recapcha {
	margin: 0 auto;
	text-align: initial;
	width: 90%;
}

.p-works-archive {
	padding-top: 30px;
}

.p-works-archive__heading {
	font-size: 34px;
}

.p-works-archive__list {
	display: block;
}

.p-works-archive__item {
	margin-bottom: 0px;
	padding: 0px;
}

.p-works-archive__item:not(:first-child) {
	margin-top: 30px;
}

.p-works-archive__img img {
	pointer-events: none;
}

.p-works-pager .page-numbers {
	margin-bottom: 3px;
	margin-top: 3px;
}

.p-works-genreLink {
	margin-right: 10px;
}

.p-singleWorks-container {
	padding-top: 80px;
}

.p-singleWorks-container__inner {
	margin-top: 50px;
}

.p-singleWorks-container__title {
	font-size: 20px;
}

.p-singleWorks-container__content {
	padding: 40px 16px;
}

.p-singleWorks-container .is-single {
	width: 90px;
}

.p-singleWorks-container .is-article {
	margin: 0 10px;
	width: 90px;
}

}

@keyframes load3 {

0% {
	transform: rotate(0deg);
}

100% {
	transform: rotate(360deg);
}

}

@keyframes spin {

0% {
	transform: rotate(0deg);
}

100% {
	transform: rotate(360deg);
}

}

@keyframes scrolldown {

0% {
	transform: translateY(-100%);
}

100% {
	transform: translateY(100%);
}

}

@keyframes bounce {

0%,20%,50%,80%,100% {
	transform: translateY(0);
}

40% {
	transform: translateY(-30px);
}

60% {
	transform: translateY(-15px);
}

}

@keyframes flash {

0%,50%,100% {
	opacity: 1;
}

25%,75% {
	opacity: 0;
}

}

@keyframes pulse {

0% {
	transform: scale(1);
}

50% {
	transform: scale(1.1);
}

100% {
	transform: scale(1);
}

}

@keyframes shake {

0%,100% {
	transform: translateX(0);
}

10%,30%,50%,70%,90% {
	transform: translateX(-10px);
}

20%,40%,60%,80% {
	transform: translateX(10px);
}

}

@keyframes swing {

20% {
	transform: rotate(15deg);
}

40% {
	transform: rotate(-10deg);
}

60% {
	transform: rotate(5deg);
}

80% {
	transform: rotate(-5deg);
}

100% {
	transform: rotate(0deg);
}

}

@keyframes tada {

0% {
	transform: scale(1);
}

10%,20% {
	transform: scale(0.9) rotate(-3deg);
}

30%,50%,70%,90% {
	transform: scale(1.1) rotate(3deg);
}

40%,60%,80% {
	transform: scale(1.1) rotate(-3deg);
}

100% {
	transform: scale(1) rotate(0);
}

}

@keyframes wobble {

0% {
	transform: translateX(0%);
}

15% {
	transform: translateX(-25%) rotate(-5deg);
}

30% {
	transform: translateX(20%) rotate(3deg);
}

45% {
	transform: translateX(-15%) rotate(-3deg);
}

60% {
	transform: translateX(10%) rotate(2deg);
}

75% {
	transform: translateX(-5%) rotate(-1deg);
}

100% {
	transform: translateX(0%);
}

}

@keyframes bounceIn {

0% {
	opacity: 0;
	transform: scale(0.3);
}

50% {
	opacity: 1;
	transform: scale(1.05);
}

70% {
	transform: scale(0.9);
}

100% {
	transform: scale(1);
}

}

@keyframes bounceInDown {

0% {
	opacity: 0;
	transform: translateY(-2000px);
}

60% {
	opacity: 1;
	transform: translateY(30px);
}

80% {
	transform: translateY(-10px);
}

100% {
	transform: translateY(0);
}

}

@keyframes bounceInLeft {

0% {
	opacity: 0;
	transform: translateX(-2000px);
}

60% {
	opacity: 1;
	transform: translateX(30px);
}

80% {
	transform: translateX(-10px);
}

100% {
	transform: translateX(0);
}

}

@keyframes bounceInRight {

0% {
	opacity: 0;
	transform: translateX(2000px);
}

60% {
	opacity: 1;
	transform: translateX(-30px);
}

80% {
	transform: translateX(10px);
}

100% {
	transform: translateX(0);
}

}

@keyframes bounceInUp {

0% {
	opacity: 0;
	transform: translateY(2000px);
}

60% {
	opacity: 1;
	transform: translateY(-30px);
}

80% {
	transform: translateY(10px);
}

100% {
	transform: translateY(0);
}

}

@keyframes bounceOut {

0% {
	transform: scale(1);
}

25% {
	transform: scale(0.95);
}

50% {
	opacity: 1;
	transform: scale(1.1);
}

100% {
	opacity: 0;
	transform: scale(0.3);
}

}

@keyframes bounceOutDown {

0% {
	transform: translateY(0);
}

20% {
	opacity: 1;
	transform: translateY(-20px);
}

100% {
	opacity: 0;
	transform: translateY(2000px);
}

}

@keyframes bounceOutLeft {

0% {
	transform: translateX(0);
}

20% {
	opacity: 1;
	transform: translateX(20px);
}

100% {
	opacity: 0;
	transform: translateX(-2000px);
}

}

@keyframes bounceOutRight {

0% {
	transform: translateX(0);
}

20% {
	opacity: 1;
	transform: translateX(-20px);
}

100% {
	opacity: 0;
	transform: translateX(2000px);
}

}

@keyframes bounceOutUp {

0% {
	transform: translateY(0);
}

20% {
	opacity: 1;
	transform: translateY(20px);
}

100% {
	opacity: 0;
	transform: translateY(-2000px);
}

}

@keyframes fadeIn {

0% {
	opacity: 0;
}

100% {
	opacity: 1;
}

}

@keyframes fadeInDown {

0% {
	opacity: 0;
	transform: translateY(-20px);
}

100% {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes fadeInDownBig {

0% {
	opacity: 0;
	transform: translateY(-2000px);
}

100% {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes fadeInLeft {

0% {
	opacity: 0;
	transform: translateX(-20px);
}

100% {
	opacity: 1;
	transform: translateX(0);
}

}

@keyframes fadeInLeftBig {

0% {
	opacity: 0;
	transform: translateX(-2000px);
}

100% {
	opacity: 1;
	transform: translateX(0);
}

}

@keyframes fadeInRight {

0% {
	opacity: 0;
	transform: translateX(20px);
}

100% {
	opacity: 1;
	transform: translateX(0);
}

}

@keyframes fadeInRightBig {

0% {
	opacity: 0;
	transform: translateX(2000px);
}

100% {
	opacity: 1;
	transform: translateX(0);
}

}

@keyframes fadeInUp {

0% {
	opacity: 0;
	transform: translateY(20px);
}

100% {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes fadeInUpBig {

0% {
	opacity: 0;
	transform: translateY(2000px);
}

100% {
	opacity: 1;
	transform: translateY(0);
}

}

@keyframes fadeOut {

0% {
	opacity: 1;
}

100% {
	opacity: 0;
}

}

@keyframes fadeOutDown {

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

100% {
	opacity: 0;
	transform: translateY(20px);
}

}

@keyframes fadeOutDownBig {

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

100% {
	opacity: 0;
	transform: translateY(2000px);
}

}

@keyframes fadeOutLeft {

0% {
	opacity: 1;
	transform: translateX(0);
}

100% {
	opacity: 0;
	transform: translateX(-20px);
}

}

@keyframes fadeOutLeftBig {

0% {
	opacity: 1;
	transform: translateX(0);
}

100% {
	opacity: 0;
	transform: translateX(-2000px);
}

}

@keyframes fadeOutRight {

0% {
	opacity: 1;
	transform: translateX(0);
}

100% {
	opacity: 0;
	transform: translateX(20px);
}

}

@keyframes fadeOutRightBig {

0% {
	opacity: 1;
	transform: translateX(0);
}

100% {
	opacity: 0;
	transform: translateX(2000px);
}

}

@keyframes fadeOutUp {

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

100% {
	opacity: 0;
	transform: translateY(-20px);
}

}

@keyframes fadeOutUpBig {

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

100% {
	opacity: 0;
	transform: translateY(-2000px);
}

}

@keyframes flip {

0% {
	animation-timing-function: ease-out;
	transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
}

40% {
	animation-timing-function: ease-out;
	transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
}

50% {
	animation-timing-function: ease-in;
	transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
}

80% {
	animation-timing-function: ease-in;
	transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
}

100% {
	animation-timing-function: ease-in;
	transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
}

}

@keyframes flipInX {

0% {
	opacity: 0;
	transform: perspective(400px) rotateX(90deg);
}

40% {
	transform: perspective(400px) rotateX(-10deg);
}

70% {
	transform: perspective(400px) rotateX(10deg);
}

100% {
	opacity: 1;
	transform: perspective(400px) rotateX(0deg);
}

}

@keyframes flipInY {

0% {
	opacity: 0;
	transform: perspective(400px) rotateY(90deg);
}

40% {
	transform: perspective(400px) rotateY(-10deg);
}

70% {
	transform: perspective(400px) rotateY(10deg);
}

100% {
	opacity: 1;
	transform: perspective(400px) rotateY(0deg);
}

}

@keyframes flipOutX {

0% {
	opacity: 1;
	transform: perspective(400px) rotateX(0deg);
}

100% {
	opacity: 0;
	transform: perspective(400px) rotateX(90deg);
}

}

@keyframes flipOutY {

0% {
	opacity: 1;
	transform: perspective(400px) rotateY(0deg);
}

100% {
	opacity: 0;
	transform: perspective(400px) rotateY(90deg);
}

}

@keyframes lightSpeedIn {

0% {
	opacity: 0;
	transform: translateX(100%) skewX(-30deg);
}

60% {
	opacity: 1;
	transform: translateX(-20%) skewX(30deg);
}

80% {
	opacity: 1;
	transform: translateX(0%) skewX(-15deg);
}

100% {
	opacity: 1;
	transform: translateX(0%) skewX(0deg);
}

}

@keyframes lightSpeedOut {

0% {
	opacity: 1;
	transform: translateX(0%) skewX(0deg);
}

100% {
	opacity: 0;
	transform: translateX(100%) skewX(-30deg);
}

}

@keyframes rotateIn {

0% {
	opacity: 0;
	transform: rotate(-200deg);
	transform-origin: center center;
}

100% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: center center;
}

}

@keyframes rotateInDownLeft {

0% {
	opacity: 0;
	transform: rotate(-90deg);
	transform-origin: left bottom;
}

100% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: left bottom;
}

}

@keyframes rotateInDownRight {

0% {
	opacity: 0;
	transform: rotate(90deg);
	transform-origin: right bottom;
}

100% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: right bottom;
}

}

@keyframes rotateInUpLeft {

0% {
	opacity: 0;
	transform: rotate(90deg);
	transform-origin: left bottom;
}

100% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: left bottom;
}

}

@keyframes rotateInUpRight {

0% {
	opacity: 0;
	transform: rotate(-90deg);
	transform-origin: right bottom;
}

100% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: right bottom;
}

}

@keyframes rotateOut {

0% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: center center;
}

100% {
	opacity: 0;
	transform: rotate(200deg);
	transform-origin: center center;
}

}

@keyframes rotateOutDownLeft {

0% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: left bottom;
}

100% {
	opacity: 0;
	transform: rotate(90deg);
	transform-origin: left bottom;
}

}

@keyframes rotateOutDownRight {

0% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: right bottom;
}

100% {
	opacity: 0;
	transform: rotate(-90deg);
	transform-origin: right bottom;
}

}

@keyframes rotateOutUpLeft {

0% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: left bottom;
}

100% {
	opacity: 0;
	transform: rotate(-90deg);
	transform-origin: left bottom;
}

}

@keyframes rotateOutUpRight {

0% {
	opacity: 1;
	transform: rotate(0);
	transform-origin: right bottom;
}

100% {
	opacity: 0;
	transform: rotate(90deg);
	transform-origin: right bottom;
}

}

@keyframes slideInDown {

0% {
	opacity: 0;
	transform: translateY(-2000px);
}

100% {
	transform: translateY(0);
}

}

@keyframes slideInLeft {

0% {
	opacity: 0;
	transform: translateX(-2000px);
}

100% {
	transform: translateX(0);
}

}

@keyframes slideInRight {

0% {
	opacity: 0;
	transform: translateX(2000px);
}

100% {
	transform: translateX(0);
}

}

@keyframes slideOutLeft {

0% {
	transform: translateX(0);
}

100% {
	opacity: 0;
	transform: translateX(-2000px);
}

}

@keyframes slideOutRight {

0% {
	transform: translateX(0);
}

100% {
	opacity: 0;
	transform: translateX(2000px);
}

}

@keyframes slideOutUp {

0% {
	transform: translateY(0);
}

100% {
	opacity: 0;
	transform: translateY(-2000px);
}

}

@keyframes hinge {

0% {
	animation-timing-function: ease-in-out;
	transform: rotate(0);
	transform-origin: top left;
}

20%,60% {
	animation-timing-function: ease-in-out;
	transform: rotate(80deg);
	transform-origin: top left;
}

40% {
	animation-timing-function: ease-in-out;
	transform: rotate(60deg);
	transform-origin: top left;
}

80% {
	animation-timing-function: ease-in-out;
	opacity: 1;
	transform: rotate(60deg) translateY(0);
	transform-origin: top left;
}

100% {
	opacity: 0;
	transform: translateY(700px);
}

}

@keyframes rollIn {

0% {
	opacity: 0;
	transform: translateX(-100%) rotate(-120deg);
}

100% {
	opacity: 1;
	transform: translateX(0px) rotate(0deg);
}

}

@keyframes rollOut {

0% {
	opacity: 1;
	transform: translateX(0px) rotate(0deg);
}

100% {
	opacity: 0;
	transform: translateX(100%) rotate(120deg);
}

}