@charset "UTF-8";

/* コンテナ */
/* 右側のイメージエリア */
.container-right{
	margin-left: calc(100vw - 1300px)/2;
}
@media (max-width:1300px){
	.container-right{
		margin-left: 0;
	}
}

.container-right-inner{
	margin-left: 15%;
}

/* ABOUTのエリア */
.container-about{
	width: 660px;
	margin: 0 auto;
}
@media (max-width:768px){
	.container-about{
		width: calc(100% - 100px);
		margin: 0 50px;
	}
}

/* CONTACTのエリア */
.container-contact{
	margin: 0 auto;
}

/* 見出し */
.top-page-h2{
	font-size: 4.0rem;
}
@media (max-width:768px){
	.top-page-h2{
		font-size: 2.4rem;
	}
	.work-title p{
		font-size: 1.4rem;
	}
}

/* トップイメージエリア */
.top-image-area .top-image{
	width: 85%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}

.top-image-area {
	position: relative;
}
.top-image-area-wrap{
	overflow: hidden;
	height: calc(100vh - 80px);
}
@media (max-width:768px){
	.top-image-area-wrap{
		height: calc(50vh - 0px);
	}
}
.top-image-area .top-image-lines{
	position: absolute;
	bottom: 10px;
	margin-left: 7%;
	width: 100%;
}
.top-image-area .top-image-cross{
	position: absolute;
	bottom: calc(-5px + 8.0rem);
	margin-left: 200px;
}
@media (max-width:768px){
	.top-image-area .top-image-cross{
		bottom: calc(0px + 4.0rem);
		margin-left: 130px;
	}
}
@media (max-width:400px){
	.top-image-area .top-image-cross{
		bottom: calc(8px + 3.0rem);
		margin-left: 80px;
	}
}
.top-image-area .top-image-lines .top-image-line{
	color: #FFFFFF;
	line-height: 1;
}

.top-image-area .top-image-lines .top-image-line:before {
	content:attr(data-inverted);
	overflow:hidden;
	position:absolute;
	left:0;
	width:8%;
	color:#F0E7D7;
}
.top-image-area .top-image-lines .top{
	top:0;
	margin-bottom: 20px;
}
.top-image-area .top-image-lines .bottom{
	bottom:0;
}

.top-image-area .top-image-cross p{
	color: #ffffff;
}

.top-image-area .top-image-line{
	font-size: 8.0rem;
}
@media (max-width:768px){
	.top-image-area .top-image-line{
		font-size: 4.0rem;
	}
}
@media (max-width:400px){
	.top-image-area .top-image-line{
		font-size: 3.0rem;
	}
}

.top-image-area .top-image-cross{
	font-size: 4.0rem;
}
@media (max-width:768px){
	.top-image-area .top-image-cross{
		font-size: 3.0rem;
	}
}
@media (max-width:400px){
	.top-image-area .top-image-cross{
		font-size: 2.0rem;
	}
}

/* scroll */
/* animation lineMove */
@media (max-width:768px){
	.top-image-scroll {
		display: none;
	}
}
.top-image-scroll {
	position: absolute;
	bottom: 100px;
	font-size: 1.2rem;
}
.top-image-scroll span {
	display: inline-block;
 	transform: rotate(-90deg);
}

.top-image-scroll:after {
	content: '';
	display: block;
	position: absolute;
	left: 36px;
	width: 1px;
	background-color: #000000;
	animation-name: lineMove;
	animation-duration: 4s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
@keyframes lineMove {
	0% {
		bottom: -40px;
		height: 0;
	}
	20% {
		bottom: -160px;
		height: 120px;
	}
	40% {
		bottom: -160px;
		height: 0;
	}
	100% {
		bottom: -160px;
		height: 0;
	}
}

/* リード文エリア */
.lead-sentence-area{
	margin: 200px 0; 
}
@media (max-width:768px){
	.lead-sentence-area{
		margin: 50px 20px 50px 0px; 
	}
}

/* work area */
.work-area-contents{
	padding: 80px 0 20px;
	background:linear-gradient(90deg,rgba(240,231,215,0.40) 0%,rgba(240,231,215,0.40) 85%,#FFFFFF 85%,#FFFFFF 100%);
}
@media (max-width:768px){
	.work-area-contents{
		padding: 80px 30px 20px;
		background: rgba(240,231,215,0.40);
	}
}

.work-area-list{
	display: flex;
	flex-wrap: wrap;
}
.work-area-list li{
	width: 20%;
	margin-right: 6.6%;
	margin-bottom: 60px;
}
@media (max-width:768px){
	.work-area-list li{
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		margin-bottom: 60px;
	}
}

.work-area-list li:nth-child(4),
.work-area-list li:nth-child(8){
	margin-right: 0;
}
@media (max-width:768px){
	.work-area-list li:nth-child(4),
	.work-area-list li:nth-child(8){
		margin-right: auto;
	}
}

.work-area-image{
	width: 100%;
	vertical-align: bottom;
}
.more{
	text-align: right;
	margin: 50px 0 150px;
}

.more img{
	margin-left: 20px;
	margin-bottom: 3px;
	width: 85px;
}

/* パララックスエリア */
.parallax-window {
    min-height: 300px;
    background: transparent;
}

/* サービスエリア */
.service-area{
	margin: 150px 0;
}
@media (max-width:768px){
	.relative{
		position: relative;
		height: 330px;
	}
}

.service-area .container-right-inner{
	display : -webkit-box;     /* old Android */
	display : -webkit-flex;    /* Safari etc. */
	display : -ms-flexbox;     /* IE10        */
	display : flex;
	height: 300px;
}
@media (max-width:768px){
	.service-area .container-right-inner{
		flex-wrap: wrap;
	}
}

.service-title{
	background:rgba(174,184,222,0.9);
	height: 100%;
	width: 360px;
	position: relative;
}
@media (max-width:768px){
	.service-title{
		height: 150px;
		width: 200px;
	}
}

.service-title h2{
	color: #ffffff;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}

.service-area .service-contents{
	background:rgba(199,204,224,0.30);
	font-size: 3.0rem;
	height: 300px;
	width: calc(100% - (100vw - 1300px)/2 - 360px);
	padding-left: 100px;
}
@media (max-width:1300px){
	.service-area .service-contents{
		width: calc(100% - 360px);
	}
}
@media (max-width:768px){
	.service-area .service-contents{
		font-size: 2.0rem;
		height: 200px;
		width: 100%;
		margin-left: 15%;
		position: absolute;
		top:130px;
		padding-left: 50px;
	}
}
.service-area .service-list{
	display : -webkit-box;     /* old Android */
	display : -webkit-flex;    /* Safari etc. */
	display : -ms-flexbox;     /* IE10        */
	display : flex;
	flex-flow: column;
	justify-content:space-between;
	padding: 40px 0;
	height: 220px;
}
@media (max-width:768px){
	.service-area .service-list{
		height: 120px;
	}
}

/* ABOUT */
.about-title{
	text-align: center;
}

.about-contents{
	margin: 50px 0;
}

/* CONTACT */
.parallax-area-top{
	height: 150px;
}
.parallax-area-bottom{
	height: 160px;
}
.contact-area{
	padding: 60px;
	width: 400px;
	background: rgba(255,255,255,0.6);
}
@media (max-width:768px){
	.contact-area{
		width: calc(100% - 160px);
		max-width: 400px;
		padding: 30px 30px;
	}
}
.contact-title{
	text-align: center;
}
.contact-contents{
	text-align: center;
}

.contact-area .contact-contents img{
	width: 50px;
	margin: 40px 0;
}

.contact-button{
	display: inline-block;
	background: rgba(255,255,255,1);
	padding: 10px 30px;
	border: solid 0.5px #222222;
}