@charset "utf-8";

/* top */


/* header
----------------------------------------- */
#header {
	position: relative;
	overflow: hidden;
}
.main-visual {
	position: relative;
	margin-top: -18px;
}
.main-visual-inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 0 35px;
}
#video-area {
	position: relative;
}
.main-visual-inner video {
	width: 100%;
	height: auto;
}
.main-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 10;
}

.main-visual-copy {
	position: absolute;
	bottom: -6%;
	right: -3%;
	width: 75%;
	z-index: 100;
}

.main-copy-area {
	margin-top: 100px;
	padding: 0 45px 0 50px;
	color: #fff;
}
.main-copy-area h2 {
	margin-bottom: 26px;
	font-size: 5.3vw;
	line-height: 1.8;
	letter-spacing: 0.16em;
}
.main-copy-area p {
	font-size: 2.8vw;
	line-height: 2.2;
	letter-spacing: 0.18em;
}

.main-visual-img,
.main-visual-copy {
	opacity: 0;
	transition: all 1.0s;
}
.main-copy1 {
	opacity: 0;
	transition: all 1.0s;
}
.main-copy2 {
	opacity: 0;
	transition: all 1.0s;
}
.main-visual-img.fade-in,
.main-visual-copy.fade-in {
	opacity: 1;
}
.main-copy1.fade-in,
.main-copy2.fade-in {
	opacity: 1;
}
.main-turtle-anim {
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 0;
}
.main-turtle-anim img {
	width: 100%;
	height: auto;
}

/* contents
----------------------------------------- */
/* common */
.sec-ttl h2 {
	font-family: 'Crimson Text', serif;
	font-weight: 400;
	margin-bottom: 19px;
	font-size: 29px;
}
.sec-ttl h2 span {
	padding: 0 25px 14px;
	border-bottom: 1px solid #000000;
}
.sec-ttl p {
	font-size: 11px;
}

/* Blog */
.blog-sec {
	position: relative;
	padding-bottom: 55px;
	background: url(../../images/blog-bg_sp.jpg) 0 0 no-repeat;
	background-size: cover;
}
.blog-sec h2 {
	font-family: 'Crimson Text', serif;
	font-weight: 400;
	display: block;
	position: absolute;
	top: 45px;
	left: 32px;
	font-size: 30px;
	transform: rotate(90deg);
	color: #fff;
	letter-spacing: 0.1em;
}
.blog-sec-list {
	margin-left: 118px;
	padding-right: 30px;
}
.blog-sec-list li {
	padding-bottom: 30px;
	border-left: 1px solid #fff;
}
.blog-sec-list li:first-child {
	padding-top: 60px;
}
.blog-sec-list li:last-child {
	padding-bottom: 25px;
}
.blog-date {
	font-family: 'Crimson Text', serif;
	font-weight: 400;
	display: block;
	margin-bottom: 5px;
	font-size: 18px;
	color: #fff;
}
.blog-category a {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 15px;
	color: #8d8d8d;
}
.blog-category a:hover {
	color: #8d8d8d;
}
.blog-ttl {
	display: block;
	font-size: 15px;
	line-height: 1.7;
	color: #333;
}
.blog-link {
	display: none;
}

/* collection */
.collection-sec {
	margin-bottom: 50px;
}
.collection-left,
.collection-right {
	display: block;
	position: relative;
	margin-top: 40px;
	opacity: 0;
	transition: all 1.0s;
}
.collection-left.fade-in,
.collection-right.fade-in {
	margin-top: 0;
	opacity: 1;
}

.collection-sec-inner {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 66%;
	height: 66%;
	padding-top: 15%;
	background-color: #fff;
	text-align: center;
}
.collection-left .collection-sec-inner::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 20%;
	left: 50%;
	width: 49px;
	height: 44px;
	margin-left: -22px;
	background: url(../../images/arrow-right.svg) 0 0 no-repeat;
	background-size: 49px 44px;
}
.collection-right .collection-sec-inner::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 20%;
	left: 50%;
	width: 49px;
	height: 44px;
	margin-left: -22px;
	background: url(../../images/arrow-right.svg) 0 0 no-repeat;
	background-size: 49px 44px;
}
.collection-sec-inner h2 {
	font-family: 'Crimson Text', serif;
	font-weight: 400;
	font-size: 7.0vw;
}
.collection-sec-inner p {
	font-size: 2.6vw;
}
.newline-update {
	position: absolute;
	bottom: 4%;
	right: 4%;
	padding: 0 4px;
	background-color: #fff;
	font-size: 10px;
}
.collection-bg {
	position: relative;
	z-index: -100;
}

/* ourservice */
.ourservice-sec {
	margin-bottom: 40px;
}
.ourservice-sec .sec-ttl {
	margin-bottom: 45px;
	padding: 0 30px;
	text-align: left;
}
.ourservice-sec .sec-ttl h2 span {
	padding: 0 25px 14px 0;
	border-bottom: 1px solid #000000;
}
.ourservice-sec-list li {
	position: relative;
	margin-bottom: 40px;
}
.ourservice-sec-list .ourservice-sec01,
.ourservice-sec-list .ourservice-sec03 {
	background: url(../../images/service-bg_sp.jpg) 0 40px no-repeat;
	background-size: 82% auto;
}
.ourservice-sec-list .ourservice-sec02,
.ourservice-sec-list .ourservice-sec04 {
	background: url(../../images/service-bg_sp.jpg) right 40px no-repeat;
	background-size: 82% auto;
}
.ourservice-sec-list li:last-child {
	margin-bottom: 0;
}
.ourservice-sec-list .img-side {
	width: 82%;
	padding-left: 18%;
}
.ourservice-sec-list .ourservice-sec02 .img-side,
.ourservice-sec-list .ourservice-sec04 .img-side {
	width: 82%;
	padding: 0 18% 0 0;
}
.ourservice-sec-list .text-side {
	margin-top: 28px;
	padding: 0 8% 0 12.12%;
}
.ourservice-sec-num {
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	display: block;
	margin-bottom: 20px;
	font-size: 26px;
	color: #8a6310;
	line-height: 1.0;
	letter-spacing: 0.14em;
}
.ourservice-sec-list .text-side h3 {
	margin-bottom: 15px;
	font-size: 21px;
	letter-spacing: 0.16em;
}
.ourservice-sec-lead {
	margin-bottom: 15px;
	font-size: 12px;
}
.ourservice-link {
	text-align: right;
}
.ourservice-link a {
	font-family: 'Crimson Text', serif;
	font-weight: 400;
	display: inline-block;
	padding-left: 55px;
	background: url(../images/icon-arrow.svg) 0 11px no-repeat;
	background-size: 34px 5px;
	font-size: 16px;
}

.ourservice-sec01 .img-side,
.ourservice-sec-list .ourservice-sec02 .img-side,
.ourservice-sec-list .ourservice-sec04 .img-side,
.ourservice-sec03 .img-side {
	padding-top: 30px;
	opacity: 0;
	transition: all 1.0s;
}
.ourservice-sec01 .img-side.fade-in,
.ourservice-sec02 .img-side.fade-in,
.ourservice-sec03 .img-side.fade-in,
.ourservice-sec04 .img-side.fade-in {
	padding-top: 0;
	opacity: 1;
}
.ourservice-sec01 .text-side,
.ourservice-sec02 .text-side,
.ourservice-sec03 .text-side,
.ourservice-sec04 .text-side {
	padding-top: 30px;
	opacity: 0;
	transition: all 1.0s;
}
.ourservice-sec01 .text-side.fade-in,
.ourservice-sec02 .text-side.fade-in,
.ourservice-sec03 .text-side.fade-in,
.ourservice-sec04 .text-side.fade-in {
	padding-top: 0;
	opacity: 1;
}

/* others */
.others-sec {
	margin-bottom: 80px;
}
.others-sec .sec-ttl {
	margin-bottom: 45px;
	text-align: center;
}
.others-sec-list a {
	display: flex;
	justify-content: center;
	align-items: center;
}
.others-sec-list .others-sec02 a {
	flex-direction: row-reverse;
}
.others-sec-img {
	width: 50%;
}
.others-sec-logo {
	width: 50%;
	text-align: center;
}
.others-sec01 .others-sec-logo img {
	width: 30%;
}
.others-sec02 .others-sec-logo img {
	width: 70%;
}
.others-sec03 .others-sec-logo img {
	width: 60%;
}
.others-sec01 .others-sec-img,
.others-sec02 .others-sec-img,
.others-sec03 .others-sec-img {
	opacity: 0;
	transition: all 1.0s;
}
.others-sec01 .others-sec-logo,
.others-sec02 .others-sec-logo,
.others-sec03 .others-sec-logo {
	opacity: 0;
	transition: all 1.0s;
}
.others-sec01 .others-sec-img.fade-in,
.others-sec02 .others-sec-img.fade-in,
.others-sec03 .others-sec-img.fade-in {
	opacity: 1;
}
.others-sec01 .others-sec-logo.fade-in,
.others-sec02 .others-sec-logo.fade-in,
.others-sec03 .others-sec-logo.fade-in {
	opacity: 1;
}

/* banner-area */
.banner-area {
	padding: 0 30px;
}
.banner-area a {
	display: block;
}
.banner-area a:first-child {
	margin-bottom: 30px;
}





/* ���֥�å��򤱣�760px��1000px */
@media only screen and (min-width: 760px) {

/* header
----------------------------------------- */
#header {
	box-sizing: border-box;
	position: relative;
	padding-bottom: 220px;
	background-color: #533C33;
	overflow: hidden;
}
.main-visual {
	position: relative;
}
.main-visual-inner {
	position: relative;
	width: 56%;
	min-width: 620px;
	max-width: 1000px;
	height: auto;
	margin: -28px auto 0;
	padding: 0;
	z-index: 10;
}
.main-visual-inner video {
	width: 100%;
	height: auto;
}
.main-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.main-visual-copy {
	position: absolute;
	bottom: -8%;
	right: -2%;
	width: 48%;
	z-index: 100;
}
.main-copy-area {
	position: absolute;
	bottom: -78px;
	left: 7%;
	margin-top: 0;
	padding: 0;
	color: #fff;
	z-index: 100;
}
.main-copy-area h2 {
	margin-bottom: 100px;
	font-size: 30px;
	line-height: 1.9;
	letter-spacing: 0.18em;
}
.main-copy-area p {
	margin-bottom: 100px;
	font-size: 16px;
	line-height: 2.7;
	letter-spacing: 0.18em;
}
.main-copy-area-inner {
	position: relative;
}
.main-visual-img,
.main-visual-copy {
	opacity: 0;
	transition: all 1.0s;
}
.main-copy1 {
	padding-left: 30px;
	opacity: 0;
	transition: all 1.0s;
}
.main-copy2 {
	padding-left: 35px;
	opacity: 0;
	transition: all 1.0s;
}
.main-visual-img.fade-in,
.main-visual-copy.fade-in {
	opacity: 1;
}
.main-copy1.fade-in {
	padding-left: 0;
	opacity: 1;
}
.main-copy2.fade-in {
	padding-left: 0;
	opacity: 1;
}
.main-turtle-anim {
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 0;
}
.main-turtle-anim img {
	width: 100%;
	height: auto;
}


/* contents
----------------------------------------- */
/* common */
.sec-ttl h2 {
	font-family: 'Crimson Text', serif;
	font-weight: 400;
	margin-bottom: 24px;
	font-size: 44px;
}
.sec-ttl h2 span {
	padding: 0 25px 16px;
	border-bottom: 1px solid #000000;
}
.sec-ttl p {
	font-size: 16px;
}

/* ourservice */
.ourservice-sec {
	margin-bottom: 150px;
}
.ourservice-sec .sec-ttl {
	margin: 0 0 60px 12.8%;
	padding: 0;
	text-align: left;
}
.ourservice-sec .sec-ttl h2 span {
	padding: 0 25px 16px 0;
	border-bottom: 1px solid #000000;
}
.ourservice-sec-list li {
	position: relative;
	margin-bottom: 90px;
}
.ourservice-sec-list .ourservice-sec01,
.ourservice-sec-list .ourservice-sec03 {
	background: url(../../images/service-bg.jpg) 0 130px no-repeat;
	background-size: 75.7% auto;
}
.ourservice-sec-list .ourservice-sec02,
.ourservice-sec-list .ourservice-sec04 {
	background: url(../../images/service-bg.jpg) right 130px no-repeat;
	background-size: 75.7% auto;
}
.ourservice-sec-list li:last-child {
	margin-bottom: 0;
}
.ourservice-sec-list .img-side {
	float: right;
	width: 50%;
	padding: 0 0 90px 0;
}
.ourservice-sec-list .ourservice-sec02 .img-side,
.ourservice-sec-list .ourservice-sec04 .img-side {
	float: left;
	width: 50%;
	padding: 0 0 90px 0;
}
.ourservice-sec-list .text-side {
	box-sizing: border-box;
	float: left;
	width: 50%;
	margin: 38px 0 0;
	padding: 0 10% 0 12.8%;
}
.ourservice-sec-list .ourservice-sec02 .text-side,
.ourservice-sec-list .ourservice-sec04 .text-side {
	float: right;
	width: 50%;
	padding: 0 10% 0 12.8%;
}
.ourservice-sec-num {
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	display: block;
	margin-bottom: 30px;
	font-size: 36px;
	color: #8a6310;
	line-height: 1.0;
	letter-spacing: 0.14em;
}
.ourservice-sec-list .text-side h3 {
	margin-bottom: 35px;
	font-size: 28px;
	letter-spacing: 0.16em;
}
.ourservice-sec-lead {
	margin-bottom: 50px;
	font-size: 15px;
	line-height: 2.4;
}
.ourservice-link {
	text-align: left;
}
.ourservice-link a {
	font-family: 'Crimson Text', serif;
	font-weight: 400;
	display: inline-block;
	padding-left: 55px;
	background: url(../images/icon-arrow.svg) 0 11px no-repeat;
	background-size: 34px 5px;
	font-size: 16px;
	transition: all .3s;
}
.ourservice-link a:hover {
	background: url(../images/icon-arrow.svg) 6px 11px no-repeat;
	background-size: 34px 5px;
}
.ourservice-sec-list .img-side a {
	display: block;
}
.ourservice-sec-list .img-side a img {
	transition: all .4s;
}
.ourservice-sec-list .img-side a:hover img {
	display: block;
	transform: scale(1.04);
}
.ourservice-sec-list .img-side a {
	overflow: hidden;
}

.ourservice-sec01 .img-side,
.ourservice-sec-list .ourservice-sec02 .img-side,
.ourservice-sec-list .ourservice-sec04 .img-side,
.ourservice-sec03 .img-side {
	padding-top: 40px;
	opacity: 0;
	transition: all 1.0s;
}
.ourservice-sec01 .img-side.fade-in,
.ourservice-sec02 .img-side.fade-in,
.ourservice-sec03 .img-side.fade-in,
.ourservice-sec04 .img-side.fade-in {
	padding-top: 0;
	opacity: 1;
}
.ourservice-sec01 .text-side,
.ourservice-sec-list .ourservice-sec02 .text-side,
.ourservice-sec-list .ourservice-sec04 .text-side,
.ourservice-sec03 .text-side {
	padding-top: 40px;
	opacity: 0;
	transition: all 1.0s;
}
.ourservice-sec01 .text-side.fade-in,
.ourservice-sec02 .text-side.fade-in,
.ourservice-sec03 .text-side.fade-in,
.ourservice-sec04 .text-side.fade-in {
	padding-top: 0;
	opacity: 1;
}


/* others */
.others-sec {
	margin-bottom: 140px;
}
.others-sec .sec-ttl {
	margin-bottom: 110px;
	text-align: center;
}
.others-sec-list {
	padding: 0 5%;
}
.others-sec-list li {
	float: left;
	width: 30.6%;
	margin-right: 4%;
}
.others-sec-list li:last-child {
	margin-right: 0;
}
.others-sec-list a {
	display: block;
}
.others-sec-list a .others-sec-img img {
	transition: all .4s;
}
.others-sec-list a:hover .others-sec-img img {
	display: block;
	transform: scale(1.05);
}
.others-sec-list .others-sec02 a {
	flex-direction: row-reverse;
}
.others-sec-img {
	width: 100%;
	overflow: hidden;
}
.others-sec-img img {
	display: block;
}
.others-sec-logo {
	width: 100%;
	text-align: center;
}
.others-sec01 .others-sec-logo {
	margin-top: 82px;
}
.others-sec02 .others-sec-logo {
	margin-top: 88px;
}
.others-sec03 .others-sec-logo {
	margin-top: 132px;
}
.others-sec01 .others-sec-logo img {
	width: 86px;
}
.others-sec02 .others-sec-logo img {
	width: 208px;
}
.others-sec03 .others-sec-logo img {
	width: 184px;
}
.others-sec01 .others-sec-img,
.others-sec02 .others-sec-img,
.others-sec03 .others-sec-img {
	opacity: 0;
	transition: all 1.0s;
}
.others-sec01 .others-sec-logo,
.others-sec02 .others-sec-logo,
.others-sec03 .others-sec-logo {
	opacity: 0;
	transition: all 1.0s;
}
.others-sec01 .others-sec-img.fade-in,
.others-sec02 .others-sec-img.fade-in,
.others-sec03 .others-sec-img.fade-in {
	opacity: 1;
}
.others-sec01 .others-sec-logo.fade-in,
.others-sec02 .others-sec-logo.fade-in,
.others-sec03 .others-sec-logo.fade-in {
	opacity: 1;
}

/* ec-banner */
.ec-banner {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 20px;
}
.ec-banner a {
	position: relative;
	display: inline-block;
	transition: all .3s;
}
.ec-banner a:hover {
	opacity: 0.7;
}

/* banner-area */
.banner-area {
	display: flex;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
.banner-area a {
	position: relative;
	display: inline-block;
	transition: all .3s;
}
.banner-area a:hover {
	opacity: 0.7;
}
.banner-area a:first-child {
	margin: 0 40px 0 0;
}

} /* ���֥�å��򤱤����ޤ� */
/* PC�򤱥쥤�����Ȥ�ָ����1201px�� */
@media only screen and (min-width: 1201px) {

} /* PC�򤱤����ޤ� */