@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
#gHeader {
	padding: 0;
	border: none;
}
#main .mainVisual {
	margin-bottom: 30px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
#main .mainVisual .rightBox {
	width: calc(50% + 18px);
	font-size: 0;
}
#main .mainVisual .rightBox .slider {
	font-size: 0;
}
#main .mainVisual .innerBox {
	padding: 40px 0 0 32px;
	flex: 1;
	box-sizing: border-box;
}
#main .mainVisual h1 {
	margin-left: 81px;
}
#main .mainVisual .slider li {
	height: 700px;
	background: url(../img/index/main_img.jpg) no-repeat center top;
	background-size: cover;
}
#main .mainVisual .slider .img02 {
	background-image: url(../img/index/main_img02.jpg);
}
#main .mainVisual .slider .img03 {
	background-image: url(../img/index/main_img03.jpg);
}
#main .mainVisual .slider .img04 {
	background-image: url(../img/index/main_img04.jpg);
}
#main .mainVisual .num {
    padding: 13px 23px;
    margin-left: 230px;
    background-color: #000;
    margin-top: -36px;
	position: relative;
	z-index: 10;
}
#gNavi ul {
	border-top: 1px solid #646464;
	border-bottom: 1px solid #646464;
}
#gNavi li {
	margin-right: 22px;
	display: inline-block;
}
#gNavi li a {
    padding: 8px 5px 5px;
    display: block;
    letter-spacing: 0.2em;
    font-weight: 500;
}
#main .about {
	margin-bottom: 30px;
	position: relative;
}
#main .about h2 {
    position: absolute;
    top: 69px;
    left: -72px;
    transform: rotateZ(90deg);
    color: #fff;
    font-size: 1.1rem;
    z-index: 10;
}
#main .about h2 span {
	margin-right: 10px;
	font-size: 4.8rem;
	font-family: 'Bodoni Moda', serif;
	font-weight: normal;
}
#main .about .imgBox {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}
#main .about .imgBox .photoBox {
	width: 45%;
	position: relative;
}
#main .about .imgBox .textBox {
	margin: -6px 32px 0 0;
	flex: 1;
	display: flex;
	justify-content: space-between;
}
#main .about .imgBox .textBox p {
	width: calc(50% - 15px);
	letter-spacing: 0.01em;
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
	text-align: justify;
}
#main .about .left {
	position: fixed;
	top: 50vh;
	left: 0;
	transform: translateY(-50%);
	z-index: 1100;
}
#main .about .linkList {
	margin-top: -5px;
	padding-left: 20px;
	background: url("../img/common/icon04.png") no-repeat left center/17px;
}
#main .about .linkList li {
	margin-top: 5px;
}
#main .about .linkList a {
	width: 30px;
	display: block;
	position: relative;
	border-radius: 50%;
	background-color: #646464;
}
#main .about .pageTop a {
	-webkit-writing-mode : tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
	margin-top: 26px;
	padding: 0 0 26px 7px;
	width: 43px;
	height: 113px;
	display: block;
	font-size: 1.2rem;
	letter-spacing: 0.33em;
	font-weight: 500;
	background: url("../img/common/icon05.png") no-repeat left bottom/43px;
}
#main .about .contactLink {
	padding-right: 13px;
	position: fixed;
	right: 0;
	top: 50vh;
	background: url("../img/common/icon04.png") no-repeat right center/17px;
	transform: translateY(-120px);
	z-index: 1100;
}
#main .about .contactLink a {
    -webkit-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    width: 40px;
    height: 78px;
    display: block;
    font-size: 1.2rem;
    letter-spacing: 0.33em;
    font-weight: 500;
}
#main .bgBox {
	padding: 1px 0 45px 0;
	background-color: #F3F3F3;
}
#main .pickup {
	margin-bottom: 28px;
}
#main .pickup .bigBox {
	width: 450px;
}
#main .pickup .bigBox .soliderBox {
	margin-right: -100px;
}
#main .pickup .bigBox p {
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
	text-align: justify;
}
#main .pickup .smList {
	margin-right: 32px;
	flex: 1;
	display: flex;
	justify-content: space-between;
}
#main .pickup .smList > li {
	width: calc(50% - 15px);
}
#main .pickup .smList > li p {
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
	text-align: justify;
}
#main .artist .bigBox {
	margin-top: -36px;
	width: 518px;
}
#main .artist .bigBox h2 {
	margin-top: -40px;
}
#main .artist .bigBox .soliderBox {
	margin-left: -100px;
}
#main .artist .bigBox p {
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
	text-align: justify;
}
#main .artist .bigBox p a {
	color: #646464;
}
#main .artist .smList {
	margin-left: 32px;
	flex: 1;
	display: flex;
	justify-content: space-between;
}
#main .artist .smList > li {
	width: calc(50% - 15px);
}
#main .artist .smList > li p {
	font-feature-settings: "palt";
	-moz-font-feature-settings: "palt";
	text-align: justify;
}
#main .staff {
	display: flex;
	background-color: #B4B4B4;
}
#main .staff .image {
	width: calc(50% + 18px);
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
}
#main .staff .staffList {
	margin: 36px 0 0 272px;
	padding: 0 0 35px 8px;
	position: relative;
	border-left: 1px solid #646464;
}
#main .staff .staffList::before {
	width: 5px;
	height: 5px;
	display: block;
	position: absolute;
	left: -1px;
	top: -3px;
	transform: translate(-50%,-50%);
	content: "";
	background-color: #646464;
	border-radius: 50%;
}
#main .staff .staffList li {
	min-width: 154px;
	color: #000;
	font-size: 1.3rem;
	line-height: 1.83;
}
#main .staff .staffList li span {
	font-size: 1rem;
}
#main .staff .staffList .se {
	margin-top: 10px;
}
#main .staff .staffList .en {
	position: absolute;
	left: -164px;
	transform: translateY(-25px);
	color: #fff;
	font-size: 1.4rem;
	letter-spacing: 0.02em;
	text-align: right;
}
#main .contact {
	padding: 44px 0;
	background-color: #F3F3F3;
}
#main .contact .mainBox {
	max-width: 900px;
}
#main .contact h2 {
	margin-bottom: 35px;
	font-size: 1.4rem;
	font-weight: 500;
	text-align: center;
	
}
#main .contact h2 span {
	display: block;
	color: #000;
	font-size: 4.8rem;
	font-family: 'Bodoni Moda', serif;
	letter-spacing: -0.07em;
	font-weight: normal;
	line-height: 1.13;
}
#main .contact .tabBox {
	padding: 8px 45px 30px;
	line-height: 1.5;
	border: 1px solid #C8C8C8;
	border-radius: 10px;
	background-color: #fff;
}
#main .contact .comTable tr {
	border-bottom: 1px solid #C8C8C8;
}
#main .contact .comTable th {
	padding: 16px 0;
	width: 30%;
	font-size: 1.4rem;
	text-align: right;
	font-weight: 400;
	letter-spacing: 0.01em;
	vertical-align: top;
	position: relative;
}
#main .contact .comTable th::after {
	content: "";
	display: block;
	clear: both;
}
#main .contact .comTable th .en {
	display: block;
	color: #C8828C;
	font-size: 1.2rem;
}
#main .contact .comTable th .must {
	padding: 4px;
	width: 45px;
	height: 30px;
	display: block;
	position: absolute;
	left: 0;
	top: 15px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	background-color: #C8828C;
	border-radius: 5px;
	box-sizing: border-box;
}
#main .contact .comTable td {
	padding: 19px 0 20px 40px;
	font-size: 1.4rem;
	font-weight: 400;
}
#main .contact .checkList {
	margin-top: -8px;
}
#main .contact .checkList li:not(:last-child) {
	margin-bottom: 2px;
}
#main .contact .checkList input[type="checkBox"] {
	display: none;
}
#main .contact .checkList input[type="checkBox"] + span {
	padding-left: 25px;
	background: url("../img/index/check_icon.png") no-repeat left 2px top 6px/13px;
	display: block
}
#main .contact .checkList input[type="checkBox"]:checked + span {
	background-image: url("../img/index/check_icon_on.png");
}
#main .contact .checkList .sm {
	font-size: 1.1rem;
}
#main .contact .nameList {
	display: flex;
	align-items: center;
	flex-wrap: wrap
}
#main .contact .nameList li {
	margin-right: 3px;
}
#main .contact .nameList li:last-child {
	margin-right: 0;
}
#main .contact .mailForm input[type="text"],
#main .contact .mailForm input[type="email"],
#main .contact .mailForm input[type="tel"] {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	padding: 0 10px;
	height: 35px;
	width: 180px;
	background-color: #FFF;
	border: 1px solid #C8C8C8;
	box-sizing: border-box;
	border-radius: 5px;
}
#main .contact .mailForm td .wid01 {
	width: 340px;
}
#main .contact .mailForm td .wid02 {
	width: 440px;
}
#main .contact .mailForm td .wid03 {
	width: 495px;
}
#main .contact .mailForm .adBtn {
	margin-left: 8px;
}
#main .contact .mailForm .adBtn a {
	height: 30px;
	width: 115px;
	color: #fff;
	font-size: 1.4rem;
	font-weight: 500;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	border-radius: 5px;
	position: relative;
	background-color: #C8828C;
}
#main .contact .mailForm .adBtn span {
	position: relative;
	z-index: 10;
}
#main .contact .mailForm .adBtn a::after {
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #FA7378;
	border-radius: 5px;
	transition: 0.3s;
	content: "";
}
#main .contact .mailForm textarea {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	padding: 5px 10px;
	height: 205px;
	width: 495px;
	font-size: 1.4rem;
	background-color: #FFF;
	border: 1px solid #C8C8C8;
	box-sizing: border-box;
	border-radius: 5px;
	resize: vertical;
}
#main .contact .mailForm input::-webkit-input-placeholder {
	color: #C8C8C8;
	opacity:1;
	}
#main .contact .mailForm input:-moz-placeholder {
	color: #C8C8C8;
	opacity:1;
	}
#main .contact .mailForm input::-moz-placeholder {
	color: #C8C8C8;
	opacity:1;
	}
#main .contact .mailForm input:-ms-input-placeholder {
	color: #C8C8C8;
	opacity:1;
	}
#main .mailForm .submit {
	margin-left: calc(30% + 40px);
	text-align: left;
}
@media all and (min-width: 897px) {
	#gNavi li a:hover {
		color: #FA7378;
	}
	#main .about .linkList a:hover {
		background-color: #FA7378;
	}
	#main .artist .bigBox p a:hover {
		color: #FA7378;
	}
	#main .contact .mailForm .adBtn a:hover::after {
		width: 100%;
	}
	#main .about .pageTop a:hover {
		background-image: url("../img/common/icon05_on.png");
	}
}
@media all and (max-width: 896px) {
	#main .mainVisual .rightBox .slider {
		margin-bottom: -1px;
	}
	#main .mainVisual {
		margin-bottom: 11px;
		display: block;
		padding-top: 30px;
	}
	#main .mainVisual .innerBox {
		margin-bottom: 12px;
		padding: 0 15px;
	}
	#main .mainVisual .innerBox h1 {
		margin: 0;
		text-align: center;
	}
	#main .mainVisual .innerBox h1 img {
		width: 100%;
		max-width: 345px;
	}
	#main .mainVisual .rightBox {
		width: 100%;
	}
	#main .mainVisual .rightBox h2 {
		text-align: center;
	}
	#main .mainVisual .rightBox h2 .ttl {
		margin-bottom: 12px;
		padding: 13px 8px;
		background-color: #000000;
		display: block;
	}
	#main .mainVisual .slider li {
		height: auto;
		padding-bottom: 113.2%;
	}
	#main .about h2 {
		top: 86px;
		left: -64px;
		line-height: 1;
	}
	#main .about .imgBox {
		margin: 0;
		display: block;
	}
	#main .about .imgBox .photoBox {
		margin-bottom: 24px;
		width: auto;
	}
	#main .about .imgBox .textBox {
		margin: 0 15px;
		width: auto;
		display: block;
	}
	#main .about .imgBox .textBox p {
		width: auto;
		display: inline;
		line-height: 2.1;
		letter-spacing: 0.11em;
	}
	#main .slider img {
		width: 100%;
	}
	#main .pickup .bigBox {
		margin-bottom: 25px;
		width: auto;
	}
	#main .pickup .bigBox .soliderBox {
		margin-right: 0;
	}
	#main .pickup .bigBox p {
		margin: 0 15px;
		line-height: 2.1;
		letter-spacing: 0.11em;
	}
	#main .pickup .smList {
		margin: 0 15px;
		display: block;
	}
	#main .pickup .smList > li {
		width: auto;
	}
	#main .pickup .smList > li:not(:last-child) {
		margin-bottom: 25px;
	}
	#main .pickup .smList > li p {
		line-height: 2.1;
		letter-spacing: 0.07em;
	}
	#main .artist .bigBox {
		margin: 0 0 25px;
		width: auto;
	}
	#main .artist .bigBox .soliderBox {
		margin-left: 0;
	}
	#main .artist .bigBox h2 {
		margin-bottom: 6px;
	}
	#main .artist .bigBox p {
		margin: 0 15px;
		line-height: 2.1;
		letter-spacing: 0.07em;
	}
	#main .artist .smList {
		margin: 0 15px;
		display: block;
	}
	#main .artist .smList > li {
		width: auto;
	}
	#main .artist .smList > li:not(:last-child) {
		margin-bottom: 25px;
	}
	#main .artist .smList > li p {
		line-height: 2.1;
		letter-spacing: 0.07em;
	}
	#main .artist .smList .soliderBox {
		margin: 0 37px;
	}
	#main .staff {
		display: block;
	}
	#main .staff .image {
		width: auto;
		min-height: 250px;
	}
	#main .staff .staffList {
		margin: 33px 0 0 53%;
		width: auto;
	}
	#main .contact {
		padding-bottom: 50px;
	}
	#main .contact .tabBox {
		margin: 0 15px;
		padding: 12px 14px 30px;
	}
	#main .contact .comTable th {
		padding: 20px 0 0;
		width: auto;
		display: block;
		text-align: center;
	}
	#main .contact .comTable td {
		padding: 10px 0 20px;
		display: block;
	}
	#main .contact .checkList {
		margin-top: 0;
	}
	#main .contact .checkList li:not(:last-child) {
		margin-bottom: 0;
	}
	#main .contact .checkList input[type="checkBox"] + span {
		padding-left: 22px;
		background: url("../img/index/check_icon.png") no-repeat left top 5px /13px;
	}
	#main .contact .checkList .sm {
		font-size: 1rem;
	}
	#main .contact .mailForm textarea {
		width: 100%;
	}
	#main .mailForm .submit {
		margin-left: 0;
		text-align: center;
	}
	#main .contact .nameList li {
		width: calc(50% - 2px);
	}
	#main .contact .nameList input {
		width: 100%;
	}
	#main .contact .nameList li {
		width: calc(50% - 2px);
	}
	#main .contact .nameList input {
		width: 100%;
	}
	#main .contact .nameList02 li:first-child {
		margin-right: 13px;
		flex: 1;
	}
	#main .contact .nameList02 .adBtn {
		margin-left: 0;
		width: 115px;
	}
	#main .contact .nameList02 {
		margin-right: 7px;
	}
	#main .contact .mailForm input[type="text"],
	#main .contact .mailForm input[type="email"],
	#main .contact .mailForm input[type="tel"],
	#main .contact .mailForm textarea {
		width: 100%;
	}
	#main .contact .mailForm td .wid05 {
		width: 57%;
	}
}
@media all and (max-width: 374px) {
	#main .about h2 {
		font-size: 1rem;
		left: -50px;
	}
	#main .about h2 span {
		font-size: 3rem;
	}
	#main .contact .comTable .checkList {
		font-size: 1.1rem;
	}
	#main .contact .comTable .checkList .sm {
		font-size: 1rem;
	}
}
#main .about {
	position: relative;
	z-index: 3;
}
#main .about .link {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
#main .about .link:not(.fixed) .contactLink,
#main .about .link:not(.fixed) .left {
	position: absolute;
}
#main .about .link .contactLink {
	right: 0;
}
.mainBox {
	position: relative;
	z-index: 2;
}
.animate {
	position: relative;
	overflow: hidden;
}
.animate:before {
	position: absolute;
    width: 200%;
    height: 110%;
    top: -10px;
    left: 0;
    z-index: 33;
    transform: skewX(0deg) translateX(-140%) scaleY(0.1);
    transform-origin: left bottom;
    background-color: #F1F1F1;
	content: "";
}
.animate.on::before {
    transition: all linear 0.8s;
    transform: skewX(0deg) translateX(4%) scaleY(1);
}
.animate.on01::before {
    transition: none;
    transform: skewX(30deg) translateX(4%) scaleY(1);
}
.animate.on02::before {
    transition: all linear 0.8s;
    transform: skewX(30deg) translateX(104%) scaleY(1);
}
.animate > * {
	opacity: 0;
}
.animate.on01 > * {
	opacity: 1;
}
.animateTxt .rightTxt,
.animateTxt .leftTxt {
	overflow: hidden;
	position: relative;
	display: block;
}
.animateTxt .rightTxt:after,
.animateTxt .leftTxt:after {
	position: absolute;
	left: -50%;
	width: 200%;
	height: 100%;
	transform: skewX(50deg);
	content: "";
	background-color: #B4B4B4;
	transition: .8s linear;
}
.animateTxt .rightTxt:after {
	transform: skewX(-50deg);
}
.animateTxt.on .rightTxt:after {
	transform: translateX(-100%) skewX(-50deg);
}
.animateTxt.on .leftTxt:after {
	transform: translateX(100%) skewX(50deg);
}
.animateRight {
	transform: translateX(20px);
	transition: .8s linear;
	opacity: 0;
}
.animateRight.on {
	transform: translateX(0);
	opacity: 1;
}
@media all and (min-width: 897px) {
	.pickup .smList .slider {
		margin: 0 auto 5px;
		width: 244px;
		font-size: 0;
	}
	.artist .smList .slider {
		margin: 0 auto;
		width: 210px;
	}
}

@media all and (max-width: 897px) {
	#main .about {
		z-index: 3;
	}
}

/* errorMsg */
.errorMsg {
	margin: 0 0 20px 15px;
}

.errorTxt {
	margin-top: 5px;
	color: #ff0000;
	display: block;
}