@charset "utf-8";
/* ===================================================================

 file name :premium.css
 style info :プレミアムトップページ
 

=================================================================== */

/* =============================

	overwrite

=============================== */
#wrapper{
	padding-top: 0;
}
#header{
	background: none;
}



/* =================================== */

@media screen and (min-width: 768px) {
}

/* .loader01 */
.loader01{
	position: absolute;
	left:50%;
	top:calc(50% - 15px);
	z-index: 88888;
	display: block;
	float: left;
	width: 50px;
	height: 50px;
	margin: -25px 0 0 -25px;
	border-radius: 50%;
	border: 1px solid #aaa;
	transform-origin: center center;
	animation: spinner 1.2s linear infinite;
	pointer-events: none;
	transition:opacity ease .5s;
  z-index: 9000;
  pointer-events: none;
}
.loaded .loader01{
	opacity: 0;
}
.loader01:before,
.loader01:after{
	box-sizing:border-box;
  content: '';
	position: absolute;
  top: 5%;
  left: 5%;
  display: block;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #666;
  padding: 8px;
}
.loader01:after{
  border-top-color: transparent;
  border-bottom-color: #666;
}
@keyframes spinner {
  0% {transform: rotate(0);}
  100% {transform: rotate(360deg);}
}



/*
#mv
--------------------------------------*/
#mv{
	position: relative;
	overflow: hidden;
}

#mvSlider{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow: hidden;
}
.pre-anim-start .loaded #mvSlider {
	opacity: 1;
	transition: all ease .2s;
}
#mv .swiper-container{
	opacity: 0;
	transition: opacity ease .5s;
	height: 100%;
}
.pre-anim-start #mv.loaded .swiper-container.swiper-container-initialized{
	opacity: 1;
}
#mv .mv-txt{
	width: 55.2%;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	transform: translate(-50%, -50%);
	opacity: 0;
	filter: blur(5px);
	transition: all ease 2s 0.6s;
}
.pre-anim-start #mv.loaded .mv-txt{
	opacity: 1;
	filter: blur(0);
}

#mvSlider{
	position: relative;
}
#mvSlider .swiper-slide{
	overflow: hidden;
	position: relative;
}
#mvSlider .swiper-slide .inner{
	position: relative;
}
#mvSlider .swiper-slide .img{
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom:147.4%;
}
#mvSlider .swiper-slide .img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#mvSlider .swiper-pagination{
	width: auto;
	left: auto;
	right: 26px;
	bottom: 65px;
}
#mvSlider .swiper-pagination{
	left: auto;
	right: 26px;
}
#mvSlider .swiper-pagination-bullet{
	background: none;
	opacity: 1;
	border: solid 1px #c4a27d;
	margin: 0 7px;
}
#mvSlider .swiper-pagination-bullet-active{
	background: #c4a27d;
}


/* swiper animetion */
#mvSlider .swiper-slide .img{
	display: block;
}
#mvSlider .swiper-slide.move-zoom.run-anim .img{
  -ms-animation: zoomUp 10s linear 0s 1 normal both;
  -webkit-animation: zoomUp 10s linear 0s 1 normal both;
  animation: zoomUp 10s linear 0s 1 normal both;
}
#mvSlider .swiper-slide.move-zoomout.run-anim .img{
  -ms-animation: zoomOut 10s linear 0s 1 normal both;
  -webkit-animation: zoomOut 10s linear 0s 1 normal both;
  animation: zoomOut 10s linear 0s 1 normal both;
}
#mvSlider .swiper-slide.move-left .img,
#mvSlider .swiper-slide.move-right .img{
	width: 110%;
	max-width: 110%;
}
#mvSlider .swiper-slide.move-left.run-anim .img{
  -ms-animation: moveleft 10s linear 0s 1 normal both;
  -webkit-animation: moveleft 10s linear 0s 1 normal both;
  animation: moveleft 10s linear 0s 1 normal both;
}
#mvSlider .swiper-slide.move-right.run-anim .img{
  -ms-animation: moveright 10s linear 0s 1 normal both;
  -webkit-animation: moveright 10s linear 0s 1 normal both;
  animation: moveright 10s linear 0s 1 normal both;
}

@-webkit-keyframes zoomUp {
  0% {transform: scale(1);}
  100% {transform: scale(1.15);}
}
@-ms-keyframes zoomUp {
  0% {transform: scale(1);}
  100% {transform: scale(1.15);}
}
@keyframes zoomUp {
  0% {transform: scale(1);}
  100% {transform: scale(1.15);}
}
@-webkit-keyframes zoomOut {
  0% {transform: scale(1.15);}
  100% {transform: scale(1);}
}
@-ms-keyframes zoomOut {
  0% {transform: scale(1.15);}
  100% {transform: scale(1);}
}
@keyframes zoomOut {
  0% {transform: scale(1.15);}
  100% {transform: scale(1);}
}
@-webkit-keyframes moveright {
  0% {transform: translateX(-10%);}
  100% {transform: translateX(0);}
}
@-ms-keyframes moveright {
  0% {transform: translateX(-10%);}
  100% {transform: translateX(0);}
}
@keyframes moveright {
  0% {transform: translateX(-10%);}
  100% {transform: translateX(0);}
}
@-webkit-keyframes moveleft {
  0% {transform: translateX(0);}
  100% {transform: translateX(-10%);}
}
@-ms-keyframes moveleft {
  0% {transform: translateX(0);}
  100% {transform: translateX(-10%);}
}
@keyframes moveleft {
  0% {transform: translateX(0);}
  100% {transform: translateX(-10%);}
}

@media screen and (min-width: 768px) {
	#mv .mv-txt{
		width: 414px;
	}

	#mvSlider .swiper-slide .img{
		padding-bottom: 55.3%;
	}
	#mvSlider .swiper-pagination{
		right: 44px;
		bottom: 40px;
	}
	#mvSlider .swiper-pagination{
		left: auto;
		right: 26px;
	}
	#mvSlider .swiper-pagination-bullet{
		width: 10px;
		height: 10px;
		margin: 0 10px;

	}
}



/*
#designer
--------------------------------------*/
#designer{
	padding: 45px 0 0;
}
#designer .ttl-h01 img{
	display: block;
	width: 219px;
	height: 13px;
	margin: 0 auto 15px;
}
#designer .catch{
	margin: 60px 0 30px;
	font-size: 1.8rem;
	text-align: center;
}
#designer .txt{
	margin: 0 0 60px;
	font-size: 1.3rem;
	text-align: center;
	line-height: 2.3;
	letter-spacing: 0;
}

#designer .designer-list{
	margin: 0 0 42px;
}
#designer .designer-list ul li{
	width: 49%;
	background: #1e1e1e;
}
#designer .designer-list ul li a{
	display: block;
	padding: 0 0 15px;
	color: #c4a27d;
}
#designer .designer-list ul li dl{
	padding: 13px 10px 12px;
}
#designer .designer-list ul li dl dt{
	margin: 0 0 8px;
}
#designer .designer-list ul li dl dt::before{
	content: "";
	display: block;
	width: 15px;
	height: 1px;
	margin: 0 0 7px;
	background: #c4a27d;
}
#designer .designer-list ul li dl dt span{
	display: block;
}
#designer .designer-list ul li dl dt .name{
	font-size: 1.3rem;
}
#designer .designer-list ul li dl dt .ruby{
	font-size: 1rem;
	color: #fff;
}
#designer .designer-list ul li dl dd{
	font-size: 1rem;
}
#designer .designer-list ul li .btn-works{
	width: 125px;
	margin: 0 12px 0 auto;
	padding: 0 0 8px 11px;
	font-size: 1.3rem;
	border-bottom: solid 1px #c4a27d;
	letter-spacing: 0;
	position: relative;
}
#designer .designer-list ul li .btn-works::before{
	content: "";
	display: block;
	width: 8px;
	height: 16px;
	background: url("/kodate/designoffice/kanagawa/img/common/ico_arrow04.svg") no-repeat 50% 50% / 100% auto;
	position: absolute;
	right: 4px;
	bottom: 12px;
}
#designer .btn-primary{
	max-width: 225px;
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
	#designer{
		max-width: 1220px;
		margin: 0 auto;
		padding: 70px 10px 0;
	}
	#designer .ttl-h01 img{
		width: 270px;
		height: auto;
		margin: 0 auto 20px;
	}
	#designer .catch{
		margin: 110px 0 35px;
		font-size: 2.4rem;
	}
	#designer .txt{
		margin: 0 0 120px;
		font-size: 1.4rem;
		line-height: 2.4;
	}
	#designer .designer-list{
		overflow: hidden;
		margin: 0 0 80px;
	}
	#designer .designer-list ul li{
		width: 376px;
		margin: 0;
	}
	#designer .designer-list ul li a{
		padding: 0 0 30px;
	}
	#designer .designer-list ul li figure{
		overflow: hidden;
		background: #000;
	}
	#designer .designer-list ul li a figure img{
		transition: all ease 0.4s;
	}
	#designer .designer-list ul li a:hover figure img{
		transform: scale(1.1);
		opacity: 0.8;
	}
	#designer .designer-list ul li dl{
		padding: 34px 22px 48px;
	}
	#designer .designer-list ul li dl dt{
		margin: 0 0 10px;
	}
	#designer .designer-list ul li dl dt::before{
		width: 19px;
		height: 2px;
		margin: 0 0 16px;
	}
	#designer .designer-list ul li dl dt .name{
		font-size: 2.2rem;
	}
	#designer .designer-list ul li dl dt .ruby{
		font-size: 1.8rem;
	}
	#designer .designer-list ul li dl dd{
		font-size: 1.8rem;
	}
	
	#designer .designer-list ul li .btn-works{
		width: 200px;
		margin: 0 32px 0 auto;
		padding: 0 0 20px 20px;
		font-size: 1.8rem;
		line-height: 1;
	}
	#designer .designer-list ul li .btn-works::before{
		right: 10px;
		bottom: 20px;
		transition: all ease 0.4s;
	}
	#designer .designer-list ul li a:hover .btn-works::before{
		right: 0px;
	}
	
	#designer .btn-primary{
		padding: 0;
		max-width: 667px;
		margin-top: 64px;
	}
}


/*
#works
--------------------------------------*/
#works{
	padding: 100px 0 50px;
}
#worksSlider{
	margin: 0 0 42px;
}
#worksSlider .slide-inner figure{
	overflow: hidden;
	position: relative;
	padding: 88% 0 0;
}
#worksSlider .slide-inner figure figcaption{
	position: absolute;
	left: 1.5em;
	bottom: 0.5em;
	font-size: 1.4rem;
	color: #fff;
	text-shadow:
		0 0 3px #000,
		0 0 6px #000;
}
#worksSlider .slide-inner figure img{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: auto !important;
	height: 100% !important;
}
#works .btn-primary{
	max-width: 225px;
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
	#works{
		padding: 190px 0 100px;
	}
	#worksSlider .slide-inner figure{
		padding: 0;
	}
	#worksSlider .slide-inner figure figcaption{
		font-size: 1.8rem;
	}
	#worksSlider .slide-inner figure img{
		position: static;
		transform: none;
		width: 100% !important;
		height: auto !important;
	}
	#works .btn-primary{
		padding: 0;
		max-width: 667px;
		margin-top: 64px;
	}

}