/*==================================================
home
==================================================*/
/*common
------------------------------------------------------------*/
.home .txt-wrap h2 {
	position: relative;
	margin: 0 0 35px;
	font-size: 56px;
	color: #fff;
	letter-spacing: 0.02em;
	line-height: 100%;
	font-family: 'Calibre-Medium';
}
.home .txt-wrap span {
	position: absolute;
	top: 10px;
	left: -60px;
	font-size: 13px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.home .txt-wrap h3 {
	margin: 0 0 15px;
	font-size: 18px;
	letter-spacing: 0.02em;
	font-weight: 700;
	line-height: 160%;
}
.home .txt-wrap p {
	width: 360px;
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 160%;
}
	@media (min-width: 1px) and (max-width: 1250px) {
		.home .txt-wrap h2 {
			margin: 0 0 10%;
			font-size: 4.45vw;
		}
		.home .txt-wrap span {
			left: -45px;
			font-size: 1.04vw;
		}
		.home .txt-wrap h3 {
			font-size: 1.45vw;
		}
	}
	@media (min-width: 1px) and (max-width: 1000px) {
		.home .txt-wrap h2 {
			margin: 0 0 5%;
			font-size: 45px;
		}
		.home .txt-wrap span {
			font-size: 11px;
		}
		.home .txt-wrap h3 {
			font-size: 15px;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		.home .txt-wrap h2 {
			margin: 0 0 5.6%;
			font-size: 11.56vw;
		}
		.home .txt-wrap span {
			left: -12%;
			font-size: 2.5vw;
		}
		.home .txt-wrap h3 {
			margin: 0 0 5%;
			font-size: 4.375vw;
		}
	}
	@media (min-width: 1px) and (max-width: 480px) {
		.home .txt-wrap p {
			font-size: 3.4vw;
		}
	}

/* kv
------------------------------------------------------------*/
#kv {
	position: relative;
	height: 770px;
	color: #fff;
	text-align: center;
	background: url(/the-citizen/caliber0100/images/img_kv.jpg) no-repeat 50% 50%;
	background-size: auto 100%;
	opacity:0;
}
#kv.init {
	opacity:1;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
#kv .txt-read,
#kv h1,
#kv .ttl-sub {
	position: absolute;
	left: 0;
	width: 100%;
	padding: 0;
	text-align: center;
}
#kv .txt-read {
	top: 80px;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 100%;
	margin-top:40px;
		opacity:0;
}
#kv.init .txt-read{
	margin-top:0px;
	opacity:1;
	-webkit-transition: opacity 1s ease 0.5s,margin-top 1s ease 0.5s;
	-moz-transition: opacity 1s ease 0.5s,margin-top 1s ease 0.5s;
	-o-transition: opacity 1s ease 0.5s,margin-top 1s ease 0.5s;
	-ms-transition: opacity 1s ease 0.5s,margin-top 1s ease 0.5s;
	transition: opacity 1s ease 0.5s,margin-top 1s ease 0.5s;
}
#kv h1 {
	top: 540px;
	font-size: 124px;
	color: #f2ebe0;
	letter-spacing: 0.03em;
	line-height: 100%;
	font-family: 'Calibre-Medium';
	margin-top:40px;
		opacity:0;
}
#kv.init h1{
	margin-top:0px;
	opacity:1;
	-webkit-transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
	-moz-transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
	-o-transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
	-ms-transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
	transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
}
#kv h1 br,
#kv .ttl-sub br {
	display: none;
}
#kv .ttl-sub {
	top: 670px;
	font-size: 20px;
	letter-spacing: 0.1em;
	margin-top:40px;
	font-weight: 700;
	opacity:0;
}
#kv.init .ttl-sub {
	margin-top:0px;
	opacity:1;
	-webkit-transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
	-moz-transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
	-o-transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
	-ms-transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
	transition: opacity 1s ease 0.8s,margin-top 1s ease 0.8s;
}
	@media screen and (min-width: 2001px) {/* fow PC */
		#kv {
			height: auto;
			padding: 38.5% 0 0;
			background-size: cover;
		}
		#kv .txt-read {
			top: 10.38%;
			font-size: 1.5vw;
		}
		#kv h1 {
			top: 70.6%;
			font-size: 6.2vw;
		}
		#kv .ttl-sub {
			top: 88%;
			font-size: 1vw;
		}
		#kv .ttl-sub span {
			font-size: 1.4vw;
		}
	}
	@media (min-width: 751px) and (max-width: 1200px) {
		#kv {
			height: auto;
			padding: 73.6% 0 0;
			background-size: cover;
		}
		#kv .txt-read {
			top: 10.38%;
			font-size: 2.5vw;
		}
		#kv h1 {
			top: 70.6%;
			font-size: 10.3vw;
		}
		#kv .ttl-sub {
			top: 88%;
			font-size: 1.6vw;
		}
		#kv .ttl-sub span {
			font-size: 2.5vw;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		#kv {
			width: 100%;
			height: auto;
			padding: 162.5% 0 0;
			background: url(/the-citizen/caliber0100/images/img_kv_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		#kv .txt-read {
			top: 17.6%;
			font-size: 5vw;
		}
		#kv h1 {
			top: 64%;
			left: 6.25%;
			font-size: 20.62vw;
			line-height: 80%;
			text-align: left;
		}
		#kv h1 br,
		#kv .ttl-sub br {
			display: block;
		}
		#kv .ttl-sub {
			top: 85.2%;
			left: 6.25%;
			font-size: 3.75vw;
			text-align: left;
		}
		#kv .ttl-sub span {
			font-size: 4.68vw;
		}
	}

/* btn-scroll */
#kv .btn-scroll {
	position: absolute;
	right: 40px;
	top: 50%;
	-webkit-transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	transform: translate(0,-50%);
	z-index: 100;
}
#kv .btn-scroll a {
	display: block;
	color: #fff;
	opacity:0;
}
#kv.init .btn-scroll a {
	opacity:1;
	-webkit-transition: opacity 1s ease 1.1s;
	-moz-transition: opacity 1s ease 1.1s;
	-o-transition: opacity 1s ease 1.1s;
	-ms-transition: opacity 1s ease 1.1s;
	transition: opacity 1s ease 1.1s;
}
#kv .btn-scroll p {
	line-height: 40px;
	font-size: 11px;
	letter-spacing: 0.03em;
	padding: 0 0 50px;
	font-family: 'Calibre-Regular';
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  box-sizing: border-box;
}
#kv .btn-scroll .circle {
	position: relative;
}
#kv .btn-scroll .circle span {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 30px;
	width: 30px;
}
#kv .btn-scroll .circle span::before {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 30px;
	width: 30px;
	border: 1px solid #FFF;
	border-radius: 50%;
	box-sizing: border-box;
	opacity: 0;
	-webkit-animation: loader-6-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite;
	animation: loader-6-1 1.5s cubic-bezier(0.075, 0.820, 0.165, 1.000) infinite;
}
	@-webkit-keyframes loader-6-1 {
		0%   { -webkit-transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
		100% { -webkit-transform: translate3d(0, 0, 0) scale(1.5); opacity: 0; }
	}
	@keyframes loader-6-1 {
		0%   { transform: translate3d(0, 0, 0) scale(0); opacity: 1; }
		100% { transform: translate3d(0, 0, 0) scale(1.5); opacity: 0; }
	}
#kv .btn-scroll .circle span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	border-top: 5px solid #fff;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin-left: -4px;
	-webkit-animation: loader-3-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	animation: loader-3-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
	box-sizing: border-box;
}
	@-webkit-keyframes loader-3-2 {
		0%   { -webkit-transform: translate3d(0, -32px, 0) scale(0, 2); opacity: 0; }
		50%  { -webkit-transform: translate3d(0, 0, 0) scale(1.25, 1.25); opacity: 1; }
		100% { -webkit-transform: translate3d(0, 8px, 0) scale(0, 0); opacity: 0; }
	}
	@keyframes loader-3-2 {
		0%   { transform: translate3d(0, -32px, 0) scale(0, 2); opacity: 0; }
		50%  { transform: translate3d(0, 0, 0) scale(1.25, 1.25); opacity: 1; }
		100% { transform: translate3d(0, 8px, 0) scale(0, 0); opacity: 0; }
	}

	@media (min-width: 1px) and (max-width: 1200px) {
		#kv .btn-scroll {
			right: 10px;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		#kv .btn-scroll {
			top: auto;
			bottom: 9.6%;
			right: 0;
			margin-right:4.68%;
			-webkit-transform: translate(0,0);
			-ms-transform: translate(0,0);
			transform: translate(0,0);
		}
	}

/* features-technologymovie
------------------------------------------------------------*/
#features-technologymovie{
	opacity:0;
}
#features-technologymovie.init {
	opacity:1;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
#features-technologymovie:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#features-technologymovie .txt-wrap p,
#features-technologymovie .txt-wrap h3,
#features-technologymovie .txt-wrap h2{
	opacity:0;
	position:relative;
	left:40px;
}
#features-technologymovie.init .txt-wrap h2{
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
	-moz-transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
	-o-transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
	-ms-transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
	transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
}
#features-technologymovie.init .txt-wrap h3{
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-moz-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-o-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-ms-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
}
#features-technologymovie.init .txt-wrap p{
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
	-moz-transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
	-o-transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
	-ms-transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
	transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
}
#features {
	width: 55.2%;
	float: left;
	height: 783px;
}
#features h3 {
	margin: 0 0 30px;
	letter-spacing: 0.1em;
	line-height: 200%;
}
#features p.txt-note {
	font-size: 11px;
}
#technologymovie {
	width: 44.8%;
	float: left;
	height: 783px;
}
	@media (min-width: 1px) and (max-width: 1250px) {
		#features,
		#technologymovie {
			height: auto;
			padding: 70% 0 0;
		}
	}
	@media (min-width: 1px) and (max-width: 1000px) {
		#features,
		#technologymovie {
			width:100%;
			float: none;
			padding: 0;
		}
		#features h3 {
			margin: 0 0 7%;
			letter-spacing: 0.02em;
			line-height: 171%;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		#features p.txt-note {
			font-size: 2.8vw;
		}
	}

/* features
------------------------------------------------------------*/
#features {
	position: relative;
	background: #d6ccc2 url(/the-citizen/caliber0100/images/img_feature.png) no-repeat 0 50%;
	background-size: auto 100%;
}
#features .txt-wrap {
	position: absolute;
	top: 50%;
	left: 32%;
	width: 68%;
	margin-top: 30px;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#features .txt-wrap p {
	width: 71.6%;
}
#features .img {
	display: none;
}
	@media (min-width: 1px) and (max-width: 1250px) {
		#features .txt-wrap {
			padding: 10% 0;
			margin-top: 0;
		}
		#features .txt-wrap p {
			width: 80%;
		}
	}
	@media (min-width: 1px) and (max-width: 1000px) {
		#features {
			padding: 10% 0;
		}
		#features .txt-wrap {
			position: relative;
			top: auto;
			left: auto;
			width: 75%;
			padding: 0 0 0 20%;
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		}
		#features .txt-wrap p {
			width: 100%;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		#features {
			padding: 0 0 15.9%;
			background: #d6ccc2;
		}
		#features .img {
			display: block;
			padding: 0 0 10.9%;
		}
		#features .img img {
			width: 100%;
		}
		#features .txt-wrap {
			width: 100%;
			padding: 0 8.6%;
			box-sizing: border-box;
		}
	}

/* technologymovie
------------------------------------------------------------*/
#technologymovie {
	overflow: hidden;
	position: relative;
}
#technologymovie:after {
	position: absolute;
	content: "";
	display: block;
	width: 101%;
	height: 101%;
	top: 0;
	background: url(/the-citizen/caliber0100/images/bg_technology_movie.jpg) no-repeat 50% 50%;
	background-size: cover;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 1s;
	z-index:1;
}
#technologymovie:hover:after {
	-moz-transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
}
#technologymovie a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 10;
	opacity:0;
}
#features-technologymovie.init #technologymovie a{
	opacity:1;
	-webkit-transition: opacity 1s ease 1.4s;
	-moz-transition: opacity 1s ease 1.4s;
	-o-transition: opacity 1s ease 1.4s;
	-ms-transition: opacity 1s ease 1.4s;
	transition: opacity 1s ease 1.4s;
}
#technologymovie:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	z-index:2;
	background: url(/the-citizen/caliber0100/images/layer_net.png) repeat 50% 50%;
}
#technologymovie .inner {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #fff;
	text-align: center;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 20;
}
#technologymovie .icn-play {
	display: block;
	width: 85px;
	height: 85px;
	margin: 0 auto 10px;
	content: "";
	background: url(/the-citizen/caliber0100/images/icn_play.svg) no-repeat 50% 50%;
	background-size: contain;
	transition: all .3s;
}
#technologymovie a:hover .icn-play {
	background: url(/the-citizen/caliber0100/images/icn_play_hover.svg) no-repeat 50% 50%;
	background-size: contain;
}
#technologymovie {
	font-size: 13px;
	letter-spacing: 0.02em;
}
#technologymovie span {
	font-size: 18px;
	font-family: 'Calibre-Medium';
}
	@media (min-width: 1px) and (max-width: 1000px) {
		#technologymovie {
			padding: 50% 0 0;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		#technologymovie {
			padding: 78.12% 0 0;
		}
		#technologymovie .inner {
			width: 100%;
		}
		#technologymovie .icn-play {
			width: 18.75%;
			height: auto;
			padding: 18.75% 0 0;
		}
		#technologymovie p {
			font-size: 3.43vw;
		}
		#technologymovie p span {
			font-size: 4.375vw;
		}
	}

/* technology
------------------------------------------------------------*/
#technology {
	overflow: hidden;
	position: relative;
	background: #2e2e2e;
	opacity:1;
}
#technologyinner {
	position: relative;
	background: url(/the-citizen/caliber0100/images/bg_technology_dotted.png) repeat 0 0;
	opacity:0;
}


#technology.init #technologyinner{
	opacity:1;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}
#technologyinner:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: url(/the-citizen/caliber0100/images/bg_technology_box.png) repeat 0 0;
}
#technologyinner:after {
	display: block;
	position: absolute;
	top: 0;
	left: -160px;
	width: 706px;
	height: 475px;
	content: "";
	background: url(/the-citizen/caliber0100/images/bg_technology01.png) repeat 0 0;
}
#technology .bg-img:before,
#technology .bg-img:after {
	display: block;
	position: absolute;
	content: "";

}
#technology .bg-img:before {
	bottom: 35px;
	left: 50%;
	width: 427px;
	height: 350px;
	background: url(/the-citizen/caliber0100/images/bg_technology02.png) repeat 0 0;
	 -webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
#technology .bg-img:after {
	top: 0;
	right: -20px;
	width: 479px;
	height: 415px;
	background: url(/the-citizen/caliber0100/images/bg_technology03.png) repeat 0 0;
}
#technology .inner {
	position: relative;
	display: table;
	max-width: 1040px;
	width: 100%;
	margin: 0 auto;
	z-index: 10;
	box-sizing: border-box;
}
#technology .txt-wrap {
	display: table-cell;
	width: 488px;
	color: #fff;
	padding: 0 0 30px;
	vertical-align: middle;
}
#technology .txt-wrap h2 {
	color: #88877c;
	opacity:0;
	position:relative;
	left:40px;
	margin: 0 0 40px;
}
#technology.init .txt-wrap h2{
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
	-moz-transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
	-o-transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
	-ms-transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
	transition: opacity 1s ease 0.5s,left 1s ease 0.5s;
}
#technology .txt-wrap h3 {
	opacity:0;
	position:relative;
	left:40px;
}
#technology.init .txt-wrap h3{
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-moz-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-o-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	-ms-transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
	transition: opacity 1s ease 0.8s,left 1s ease 0.8s;
}
#technology .txt-wrap p {
	opacity:0;
	position:relative;
	left:40px;
	font-size: 14px;
	letter-spacing: 0.01em;
	line-height: 257%;
	font-weight: 700;
}
#technology.init .txt-wrap p{
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
	-moz-transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
	-o-transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
	-ms-transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
	transition: opacity 1s ease 1.1s,left 1s ease 1.1s;
}
#technology .nav-wrap {
	display: table-cell;
	width: 552px;
	padding: 115px 0 80px;
}
#technology .nav-wrap li {
	position: relative;
	margin: 0 0 45px;
	opacity:0;
	left:40px;
}
#technology.init .nav-wrap li:nth-of-type(1){
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
	-moz-transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
	-o-transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
	-ms-transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
	transition: opacity 1s ease 1.4s,left 1s ease 1.4s;
}
#technology.init .nav-wrap li:nth-of-type(2){
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 1.7s,left 1s ease 1.7s;
	-moz-transition: opacity 1s ease 1.7s,left 1s ease 1.7s;
	-o-transition: opacity 1s ease 1.7s,left 1s ease 1.7s;
	-ms-transition: opacity 1s ease 1.7s,left 1s ease 1.7s;
	transition: opacity 1s ease 1.7s,left 1s ease 1.7s;
}
#technology.init .nav-wrap li:nth-of-type(3){
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 2.0s,left 1s ease 2.0s;
	-moz-transition: opacity 1s ease 2.0s,left 1s ease 2.0s;
	-o-transition: opacity 1s ease 2.0s,left 1s ease 2.0s;
	-ms-transition: opacity 1s ease 2.0s,left 1s ease 2.0s;
	transition: opacity 1s ease 2.0s,left 1s ease 2.0s;
}
#technology .nav-wrap li:first-child {
	margin-left: 65px;
}
#technology .nav-wrap li:last-child {
	margin-left: 100px;
}
#technology .nav-wrap li .img-wrap {
	position: relative;
	width: 450px;
}
#technology .nav-wrap li figure {
	position: relative;
    overflow: hidden;
	margin: 0 0 15px;
}
#technology .nav-wrap li figure:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: #000;
	opacity: 0;
	z-index: 10;
	transition: all .3s;
}
#technology .nav-wrap li:hover figure:before {
	opacity: 0.5;
}
#technology .nav-wrap li figure img {
	width: 100%;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 1s;
}
#technology .nav-wrap li:hover figure img {
	-moz-transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
}
#technology .nav-wrap li figure img.viewSp {
	display: none;
}
#technology .nav-wrap li .icn-more {
	position: absolute;
	top: 50%;
	right: 0;
	color: #fff;
	font-size: 11px;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
	text-align: center;
	-webkit-transform: translate(50%, -50%);
	transform: translate(50%, -50%);
	z-index: 20;
}
#technology .nav-wrap li .icn-more .icn {
	display: block;
	position: relative;
	width: 50px;
	height: 50px;
	margin: 0 0 6px;
	transition: .5s ;
	transform: rotateZ( 0deg ) ;
}
#technology .nav-wrap li:hover .icn-more .icn {
	transform: rotateZ( 180deg ) ;
}
#technology .nav-wrap li .icn-more .icn:before {
	display: block;
	width: 50px;
	height: 50px;
	content: "";
	background: #000;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	opacity: 0.3;
}
#technology .nav-wrap li .icn-more .icn:after {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	content: "";
	background: url(/the-citizen/caliber0100/images/icn_more.svg) no-repeat 0 0;
	background-size: contain;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#technology .nav-wrap li .number {
	position: absolute;
	top: 0;
	color: #88877c;
	font-size: 60px;
	line-height: 100%;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
 -webkit-transform: translate(0, -50%);
   transform: translate(-0, -50%);
   z-index: 30;
}
#technology .nav-wrap li:nth-child(1) .number {
	left: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#technology .nav-wrap li:nth-child(2) .number {
	left: 10px;
}
#technology .nav-wrap li:last-child .number {
	right: 10px;
}

#technology .nav-wrap li .en {
	margin: 0 0 8px;
	color: #88877c;
	font-size: 13px;
	line-height: 100%;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;

}
#technology .nav-wrap li .jp {
	color: #fff;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: 0.02em;
	font-weight: 700;
}
#technology .link-more {
	display: none;
}
	@media (min-width: 1px) and (max-width: 1350px) {
		#technology .txt-wrap {
			width: 40%;
			padding: 0 2% 0 50px;
		}
		#technology .nav-wrap {
			width: 46%;
			padding-right: 7%;
		}
		#technology .nav-wrap li:first-child {
			margin-left: 7%;
			margin-right: -7%;
		}
		#technology .nav-wrap li:last-child {
			margin-left: 9%;
			margin-right: -9%;
		}
		#technology .nav-wrap li .img-wrap {
			width: 100%;
		}
		#technology .nav-wrap li .number {
			font-size: 4.4vw;
		}
	}
	@media (min-width: 1px) and (max-width: 1000px) {
		#technology .inner {
			display: block;
			padding: 12% 7.8% 10%;
		}
		#technology .txt-wrap {
			display: block;
			width: 100%;
			padding: 0 0 13%;
			box-sizing: border-box;
		}
		.home .txt-wrap p {
			width: 100%;
		}
		#technology .nav-wrap {
			display: block;
			max-width: 450px;
			width: 100%;
			margin: 0 auto;
			padding: 0;
		}
		#technology .nav-wrap li:first-child {
			margin-left: 0;
			margin-right: 0;
		}
		#technology .nav-wrap li:last-child {
			margin-left: 0;
			margin-right: 0;
		}
		#technology .nav-wrap li .number {
			font-size: 44px;
		}
	}
	@media (min-width: 1px) and (max-width: 768px) {
		#technology {
			border-bottom: 1px solid #d6ccc2;
		}
		#technology:before {
			display: none;
		}
		#technology:after {
			height: auto;
			padding: 67.28% 0 0;
			top: -4%;
			left: -5%;
			background-size: contain;
		}
		#technology .bg-img:before {
			left: 0;
			bottom: 0;
			width: 71.1%;
			height: auto;
			padding: 59.5% 0 0;
			background-size: contain;
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		#technology .bg-img:after {
			right: -7%;
			top: 50%;
			width: 74.84%;
			height: auto;
			padding: 65% 0 0;
			background-size: contain;
		}
		#technology .inner {
			padding-bottom: 3.1%;
		}
		#technology .txt-wrap {
			padding: 0 0 15%;
		}
		#technology .txt-wrap h2 {
			margin: 0 0 5.6%;
		}
		#technology .txt-wrap p {
			font-size: 2.5vw;
			letter-spacing: 0.02em;
			line-height: 218%;
		}
		#technology .txt-wrap p .viewSp {
			display: none;
		}
		#technology .nav-wrap li {
			margin: 0 0 15%;
			padding-top: 5%;
		}
		#technology .nav-wrap li a {
			display: block;
			position: relative;
		}
		#technology .nav-wrap li figure img.viewSp {
			display: block;
		}
		#technology .nav-wrap li figure img.viewPc {
			display: none;
		}
		#technology .nav-wrap {
			max-width: initial;
		}
		#technology .nav-wrap li .number {
			font-size: 12.5vw;
		}
		#main #technology .nav-wrap li .number {
			left: 0;
			right: auto;
			-webkit-transform: translate(-20%, -50%);
			transform: translate(-20%, -50%);
		}
		#technology .nav-wrap li .en {
			font-size: 2.6vw;
		}
		#technology .nav-wrap li .jp {
			margin: 0 0 4%;
			font-size: 2.8vw;
		}
		#technology .nav-wrap li .icn-more {
			display: none;
		}
		#technology .link-more {
			display: inline-block;
			padding: 0 0 0.5%;
			color: #88877c;
			font-size: 2.8vw;
			font-family: 'Calibre-Medium';
			letter-spacing: 0.03em;
			border-bottom: 2px solid #88877c;
		}
	}
	@media (min-width: 1px) and (max-width: 480px) {
		#technology .txt-wrap p {
			font-size: 3.43vw;
		}
		#technology .nav-wrap li .en {
			font-size: 2.81vw;
		}
		#technology .nav-wrap li .jp {
			font-size: 3.75vw;
		}
		#technology .link-more {
			font-size: 3.75vw;
		}
	}


/* lineup
------------------------------------------------------------*/
#lineup {
	position: relative;
	background: #d6ccc2;
}
#lineup .inner {
	display: table;
	width: 100%;
}

/* ttl-wrap */
#lineup .ttl-wrap {
	position: relative;
	display: table-cell;
	width: 250px;
	vertical-align: top;
}
#lineup .ttl-wrap h2 {
	padding: 315px 0 0 70px;
	font-size: 32px;
	color: #fff;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
}

/* product-wrap */
#lineup .product-wrap {
	display: table-cell;
}
#lineup .product-wrap ul:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#lineup .product-wrap li {
	overflow: hidden;
	width : -webkit-calc(100% / 3) ;
	width : calc(100% / 3) ;
	height: 800px;
	float: left;
	border-left: 1px solid #e1e1de;
	box-sizing: border-box;
}
#lineup .product-wrap li a,
#lineup .product-wrap li .non-link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
#lineup .product-wrap li a figure img,
#lineup .product-wrap li .non-link figure img {
	position:relative;
	left:40px;
	width: 203px;
	opacity:0;
}
#lineup.init .product-wrap li a figure img,
#lineup.init .product-wrap li .non-link figure img {
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 0s,left 1s ease 0s;
	-moz-transition: opacity 1s ease 0s,left 1s ease 0s;
	-o-transition: opacity 1s ease 0s,left 1s ease 0s;
	-ms-transition: opacity 1s ease 0s,left 1s ease 0s;
	transition: opacity 1s ease 0s,left 1s ease 0s;
}
#lineup .product-wrap li .product-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	margin-top: -10px;
	margin-bottom: 42px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#lineup .product-wrap li figure {
	margin: 0 -30px 0 0;
	text-align: center;
}
#lineup .product-wrap li .txt {
	width: 65%;
	margin: 40px auto 0;
}
#lineup .product-wrap li h3 {
	margin: 0 0 30px;
	text-align: center;
	color: #414141;
}
#lineup .product-wrap li h3 .en {
	display: block;
	margin: 0 0 5px;
	font-size: 16px;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
}
#lineup .product-wrap li h3 .jp {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.02em;
	line-height: 145%;
}
#lineup .product-wrap li p {
	font-size: 11px;
	letter-spacing: 0.02em;
}
#lineup .product-wrap li .txt .txt-link {
	display: block;
	width: 100%;
	margin-top: 35px;
	font-size: 18px;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.05em;
	text-align: center;
}
#lineup .product-wrap li .txt .txt-link span {
	position: relative;
	margin-right: 18px;
}
#lineup .product-wrap li .txt .txt-link span:after {
	display: block;
	position: absolute;
	top: 50%;
	right: -18px;
	width: 12px;
	height: 9px;
	content: "";
	background: url(/the-citizen/caliber0100/images/icn_link.svg) no-repeat 0 0;
	background-size: contain;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#lineup .product-wrap li .txt .txt-link span:before {
	position: absolute;
	bottom: -4px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background: #414141;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#lineup .product-wrap li:hover .txt .txt-link span:before {
	width: 100%;
}

/* for hover */
#lineup .product-wrap li .hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #fff;
	z-index: 30;
	transition: all .3s;
	opacity: 0;
}
#lineup .product-wrap li a:hover .hover {
	opacity: 1;
}
#lineup .product-wrap li .hover:before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background: #000;
	opacity: 0.4;
}
#lineup .product-wrap li.product01 .hover {
	background: url(/the-citizen/caliber0100/images/img_lineup01_hover.jpg) no-repeat 50% 0;
	background-size: auto 100%;
}
#lineup .product-wrap li.product02 .hover {
	background: url(/the-citizen/caliber0100/images/img_lineup02_hover.jpg) no-repeat 50% 0;
	background-size: auto 100%;
}
#lineup .product-wrap li.product03 .hover {
	background: url(/the-citizen/caliber0100/images/img_lineup03_hover.jpg) no-repeat 50% 0;
	background-size: auto 100%;
}
#lineup .product-wrap li p {
	position: relative;
	z-index: 40;
}
#lineup .product-wrap li .txt {
	opacity:0;
	position:relative;
	left:40px;
}
#lineup.init .product-wrap li .txt {
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1s ease 0.3s,left 1s ease 0.3s;
	-moz-transition: opacity 1s ease 0.3s,left 1s ease 0.3s;
	-o-transition: opacity 1s ease 0.3s,left 1s ease 0.3s;
	-ms-transition: opacity 1s ease 0.3s,left 1s ease 0.3s;
	transition: opacity 1s ease 0.3s,left 1s ease 0.3s;
}
#lineup .product-wrap li .txt-link {
	display: block;
	position: absolute;
	bottom: 45px;
	left: 0;
	width: 100%;
	font-size: 18px;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.05em;
	text-align: center;
	color: #414141;
	z-index: 1000;
	transition: all .3s;
}
#lineup .product-wrap li .txt-link span {
	position: relative;
	padding: 0 18px 0 0;
}
#lineup .product-wrap li .txt-link span:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	width: 12px;
	height: 9px;
	content: "";
	background: url(/the-citizen/caliber0100/images/icn_link.svg) no-repeat 0 0;
	background-size: contain;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	transition: all .3s;
}
#lineup .product-wrap li .hover .txt-name {
	position: absolute;
	top: 120px;
	left: 0;
	width: 100%;
	font-size: 28px;
	font-family: 'Calibre-Regular';
	letter-spacing: 0.05em;
	text-align: center;
}
	@media (min-width: 751px) and (max-width: 9999px) {
		#lineup .product-wrap li:hover .txt-link {
			color: #fff;
		}
		#lineup .product-wrap li:hover .txt-link span:after {
			background: url(/the-citizen/caliber0100/images/icn_link_wt.svg) no-repeat 0 0;
			background-size: contain;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		#lineup .product-wrap li .product-inner {
			margin-bottom: 10%;
		}
		#lineup .product-wrap li .txt-link {
			position: relative;
			bottom: auto;
			left: auto;
			font-size: 16px;
		}
	}

/* link-release */
#lineup .link-release {
	position: absolute;
	left: 70px;
	bottom: 100px;
	color: #414141;
	letter-spacing: 0.03em;
}
#lineup .link-release .en {
	position: relative;
	font-size: 13px;
	font-family: 'Calibre-Medium';
}
#lineup .link-release .en:after {
	display: block;
	position: absolute;
	top: 50%;
	right: -18px;
	width: 12px;
	height: 9px;
	content: "";
	background: url(/the-citizen/caliber0100/images/icn_link.svg) no-repeat 0 0;
	background-size: contain;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#lineup .link-release .jp {
	display: block;
	font-size: 12px;
	font-weight: 700;
}
#lineup .link-release .jp span {
	position: relative;
}
#lineup .link-release .jp span::after {
	position: absolute;
	bottom: -8px;
	left: 50%;
	content: '';
	width: 0;
	height: 2px;
	background: #404040;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#lineup .link-release:hover .jp span::after {
	width: 100%;
}

	@media (min-width: 1px) and (max-width: 1250px) {
		#lineup .ttl-wrap {
			width: 200px;
		}
		#lineup .ttl-wrap h2 {
			width: 100%;
			position: absolute;
			top: 30%;
			padding: 0;
			text-align: center;
		}
		#lineup .product-wrap li {
			height: auto;
		}
		#lineup .product-wrap li a {
			padding: 30% 0 15%;
			box-sizing: border-box;
		}
		#lineup .product-wrap li .product-inner {
			position: relative;
			top: auto;
			left: auto;
			 -webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		#lineup .product-wrap li figure {
			max-width: 203px;
			width: 68%;
			margin: 0 auto;
		}
		#lineup .product-wrap li figure img {
			width: 100% !important;
			margin-right: -15%;
		}
		#lineup .product-wrap li .txt {
			width: 75%;
		}
		#lineup .product-wrap li .hover .txt-name {
			font-size: 2.56vw;
		}
		#lineup .link-release {
			left: 47px;
		}
	}
	@media (min-width: 1px) and (max-width: 1000px) {
		#lineup {
			display: block;
			padding: 10% 0;
		}
		#lineup .ttl-wrap {
			display: block;
			width: 100%;
		}
		#lineup .ttl-wrap h2 {
			position: relative;
			top: auto;
			padding: 0 0 7%;
		}
		#lineup .product-wrap {
			display: block;
			margin: 0 0 10%;
			border-top: 1px solid #fff;
			border-bottom: 1px solid #fff;
		}
		#lineup .product-wrap li .product-inner {
			margin-top: 20px;
		}
		#lineup .product-wrap li a {
			padding: 15% 0;
		}
		#lineup .link-release {
			position: relative;
			bottom: auto;
			left: auto;
			text-align: center;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		#lineup {
			padding: 18.5% 0;
		}
		#lineup .inner {
			display:block;
		}
		#lineup .product-wrap {
			width:100% !important;
			border-top: none;
			border-bottom: 1px none;
		}
		#lineup .product-wrap li {
			border-left: none;
		}
		#lineup .product-wrap li a {
			padding: 0;
			-webkit-tap-highlight-color: transparent;
		}
		#lineup .ttl-wrap h2 {
			padding: 0 0 8%;
			font-size: 7.8vw;
		}
		#lineup .product-wrap li h3 {
			margin: 0 0 14px;
		}
		#lineup .product-wrap li h3 .en {
			font-size: 14px;
		}
		#lineup .product-wrap li h3 .jp {
			font-size: 10px;
		}
		#lineup .link-release .en {
			font-size: 3.43vw;
		}
		#lineup .link-release .en:after {
			display: none;
		}
		#lineup .link-release .jp {
			font-size: 3.43vw;
		}
		#lineup .link-release .jp span::after {
			width: 100%;
		}
		#lineup .link-release .jp span:before {
			display: block;
			position: absolute;
			top: 50%;
			right: -18px;
			width: 12px;
			height: 9px;
			content: "";
			background: url(/the-citizen/caliber0100/images/icn_link.svg) no-repeat 0 0;
			background-size: contain;
			-webkit-transform: translate(0, -50%);
			transform: translate(0, -50%);
		}
		#lineup .product-wrap li a:hover .hover {
			opacity: 0;
		}
		#lineup .product-wrap li .txt .txt-link {
			margin-top: 10%;
		}
		#lineup .product-wrap li .txt .txt-link span:before {
			width: 100%;
		}
	}
	@media (min-width: 1px) and (max-width: 480px) {
		#lineup .product-wrap li .txt .txt-link {
			font-size: 3.5vw;
		}
	}

/*==================================================
technology01縲�03
==================================================*/
/* tech-header
------------------------------------------------------------*/
.tech-header {
	position: relative;
	height: 500px;
	background-color:#262626;
}
#tech-header-innner{
	opacity:0;
	height: 500px;
	width:100%;
	position: relative;
}
#frame-main.init #tech-header-innner{

	opacity:1;
	-webkit-transition: opacity 0.4s ease 0s;
	-moz-transition: opacity 0.4s ease 0s;
	-o-transition: opacity 0.4s ease 0s;
	-ms-transition: opacity 0.4s ease 0s;
	transition: opacity 0.4s ease 0s;

}
.technology01 #tech-header-innner {
	background: #2e2e2e url(/the-citizen/caliber0100/images/technology/bg_technology01_main.jpg) no-repeat 50% 50%;
	background-size: auto 100%;
}
.technology02 #tech-header-innner {
	background: #2e2e2e url(/the-citizen/caliber0100/images/technology/bg_technology02_main.jpg) no-repeat 50% 50%;
	background-size: auto 100%;
}
.technology03 #tech-header-innner {
	background: #2e2e2e url(/the-citizen/caliber0100/images/technology/bg_technology03_main.jpg) no-repeat 50% 50%;
	background-size: auto 100%;
}
.tech-header .inner {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 900px;
	width: 90%;
	margin: 0 auto;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
 	@media screen and (min-width: 1480px) {
		.tech-header .inner {
			max-width: initial;
			width: 60.8%;
		}
	}

.tech-header .technology-ttl {
	position: relative;
	margin: 0 0 30px;
	font-size: 40px;
	color: #88877c;
	letter-spacing: 0.03em;
	line-height: 105%;
	font-family: 'Calibre-Medium';
	opacity:0;
	left:40px;
}
#frame-main.init .tech-header .technology-ttl{
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
	-moz-transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
	-o-transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
	-ms-transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
	transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
}
.tech-header .technology-ttl span {
	position: absolute;
	top: 10px;
	left: -45px;
	font-size: 10px;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-moz-transform: rotate(-180deg);
	-webkit-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
.tech-header h1 {
	color: #88877c;
	position: relative;
	left:40px;
	opacity:0;
}
#frame-main.init .tech-header h1 {
	opacity:1;
	left:0px;
	-webkit-transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
	-moz-transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
	-o-transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
	-ms-transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
	transition: opacity 1.0s ease 0.5s,left 1.0s ease 0.5s;
}
.tech-header h1 .number {
	display: block;
	font-size: 64px;
	line-height: 100%;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
}
.tech-header h1 .jp {
	display: block;
	color: #fff;
	font-size: 34px;
	letter-spacing: 0.05em;
	font-weight: 700;
	line-height: 141%;
}
.tech-header h1 .en {
	font-size: 14px;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
}
	@media screen and (min-width: 2001px) {
		#main .tech-header {
			background-size: cover;
		}
	}
 	@media (min-width: 1px) and (max-width: 1000px) {
 		.tech-header .inner {
 			padding-left: 20px;
 		}
 	}
 	@media (min-width: 1px) and (max-width: 750px) {
		.tech-header {
			height: auto;
			padding: 62.3% 0 0;
		}
		#tech-header-innner{
			opacity:0;
			height: auto;
			width:100%;
			position: absolute;
			top: 43%;
			left: 0%;
		}
		.technology01 .tech-header {
			background: #2e2e2e url(/the-citizen/caliber0100/images/technology/bg_technology01_main_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.technology02 .tech-header {
			background: #2e2e2e url(/the-citizen/caliber0100/images/technology/bg_technology02_main_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.technology03 .tech-header {
			background: #2e2e2e url(/the-citizen/caliber0100/images/technology/bg_technology03_main_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.tech-header .inner {
			top: 0%;
			left: 8.28%;
			width: 83.43%;
			padding-left: 0;
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
			z-index: 10;
		}
		.tech-header .technology-ttl {
			margin: 0 0 7%;
			font-size: 7vw;
			line-height: 100%;
			letter-spacing: 0.05em;
		}
		.tech-header .technology-ttl span {
			top: 10%;
			left: -8%;
			font-size: 1.88vw;
		}
		.tech-header h1 .number {
			font-size: 11.25vw;
		}
		.tech-header h1 .jp {
			font-size: 6.5vw;
		}
		.tech-header h1 .en {
			font-size: 2.5vw;
		}
 	}

/* tech-contents
------------------------------------------------------------*/
.tech-contents {
	position: relative;
}
.tech-contents .inner {
	max-width: 900px;
	width: 90%;
	margin: 0 auto;
}
.tech-contents section .inner {
	padding: 85px 0;
}
.tech-contents section:nth-child(odd) {
	background: #d6ccc2;
}
.tech-contents section:nth-child(even) {
	background: #dfd7ce;
}
.tech-contents h2 {
	margin: 0 0 15px;
	font-size: 18px;
	letter-spacing: 0.02em;
	font-weight: 700;
	line-height: 160%;
}
.tech-contents h2 span {
	display: block;
	color: #88877c;
	font-size: 13px;
}
.tech-contents p {
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 184%;
}
.tech-contents .txt-wrap {
	display: table-cell;
	width: 50%;
	padding: 0 25px;
	vertical-align: middle;
	box-sizing: border-box;
}
.tech-contents figure {
	display: table-cell;
	width: 50%;
	text-align: center;
	padding: 0 25px;
	vertical-align: middle;
	box-sizing: border-box;
}
.tech-contents figure img {
	width: 100%;
}
.tech-contents figure.viewSp {
	display: none;
}
 	@media screen and (min-width: 1480px) {
		.tech-contents .inner {
			max-width: initial;
			width: 60.8%;
		}
		.tech-contents .txt-wrap {
			width : -webkit-calc(100% - 450px) ;
			width : calc(100% - 450px) ;
		}
 	}
 	@media (min-width: 1px) and (max-width: 1150px) {
 		.tech-contents section .inner {
 			padding: 9% 0;
 		}
		 .tech-contents .txt-wrap {
			padding: 0 3%;
		}
		.tech-contents figure {
			padding: 0 3%;
		}
 		.tech-contents figure img {
 			width: 100%;
 		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		.tech-contents section .inner {
			width: 82.8%;
			padding: 18% 0;
		}
		.tech-contents .txt-wrap {
			display: block;
			width: 100%;
			padding: 0;
			margin: 0 0 15%;
		}
		.tech-contents h2 {
			margin: 0 0 3%;
			font-size: 4.37vw;
			line-height: 160%;
		}
		.tech-contents h2 span {
			font-size: 2.8vw;
		}
		.tech-contents figure {
			display: block;
			width: 100%;
			padding: 0;
		}
		.tech-contents figure.viewSp {
			display: block;
		}
		.tech-contents figure.viewPc {
			display: none;
		}
	}
	@media (min-width: 1px) and (max-width: 480px) {
		.tech-contents p {
			font-size: 3.4vw;
		}
	}

/* btn-back */
.tech-contents .btn-back {
	position: absolute;
	top: 0;
	right: 60px;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	z-index: 10;
	opacity:0;
}





#frame-main.init .tech-contents .btn-back{
	opacity:1;
	-webkit-transition: opacity 0.4s ease 1.0s;
	-moz-transition: opacity 0.4s ease 1.0s;
	-o-transition: opacity 0.4s ease 1.0s;
	-ms-transition: opacity 0.4s ease 1.0s;
	transition: opacity 0.4s ease 1.0s;

}


.tech-contents .btn-back a {
	position: relative;
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 0 0 auto;
	content: "";
	background: #fff;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	transition: all .3s;
	-webkit-transform: rotateZ( 0deg ) ;
	transform: rotateZ( 0deg ) ;
}
.tech-contents .btn-back a:hover {
	background: #000;
	-webkit-transform: rotateZ( 360deg ) ;
	transform: rotateZ( 360deg ) ;
}
.tech-contents .btn-back a .icn {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	content: "";
	background: url(/the-citizen/caliber0100/images/icn_back.svg) no-repeat 0 50%;
	background-size: contain;
 	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	 transition: all .3s;
}
.tech-contents .btn-back a:hover .icn {
	background: url(/the-citizen/caliber0100/images/icn_back_wt.svg) no-repeat 0 50%;
	background-size: contain;
}
 	@media (min-width: 1px) and (max-width: 1150px) {
 		.tech-contents .btn-back {
 			right: 6%;
 		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		 .tech-contents .btn-back {
 			display: none;
 		}
	}

/* txt-read */
.tech-contents .txt-read {
	background: #2e2e2e;

}


.tech-contents .txt-read .inner {
	padding: 100px 0;
	opacity:0;
}
#frame-main.init .tech-contents .txt-read .inner {
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0.8s;
	-moz-transition: opacity 1.0s ease 0.8s;
	-o-transition: opacity 1.0s ease 0.8s;
	-ms-transition: opacity 1.0s ease 0.8s;
	transition: opacity 1.0s ease 0.8s;
}

.tech-contents .txt-read .inner:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.tech-contents .txt-read p {
	color: #dfd7ce;
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 184%;
}
.tech-contents .txt-read p + p {
	margin-top: 30px;
}
.tech-contents .txt-read .column01 {
	width: 47.8%;
	float: left;
}
.tech-contents .txt-read .column02 {
	width: 47.8%;
	float: left;
	margin: 0 0 0 4.4%;
}
 	@media (min-width: 1px) and (max-width: 1150px) {
 		.tech-contents .txt-read .inner {
 			padding: 11% 0;
 		}
 	}
 	@media (min-width: 1px) and (max-width: 750px) {
 		.tech-contents .txt-read {
 			margin-top: -1px;
 		}
		 .tech-contents .txt-read .inner {
		 	width: 82.8%;
 			padding: 25% 0 11.5%;
 		}
		 .tech-contents .txt-read .column01 {
			width: 100%;
			float: none;
		}
		.tech-contents .txt-read .column02 {
			width: 100%;
			float: none;
			margin: 0;
		}
		.tech-contents .txt-read p {
			margin: 0 0 7.5%;
		}
		.tech-contents .txt-read p + p {
			margin-top: 0;
		}
	}
	@media (min-width: 1px) and (max-width: 480px) {
		.tech-contents .txt-read p {
			font-size: 3.4vw;
		}
	}

/* btn-movie */
.tech-contents .movie {
	display: table-cell;
	width: 50%;
	text-align: center;
	padding: 0 25px;
	vertical-align: middle;
	box-sizing: border-box;
	cursor: pointer;
}
.tech-contents .movie .btn-movie img {
	width: 100%;
}
.tech-contents .movie .viewSp {
	display: none;
}
	@media (min-width: 1px) and (max-width: 750px) {
		.technology02 .tech-contents .cont03 {
			position: relative;
		}
		.technology02 .tech-contents .cont03 .txt-wrap {
			padding: 65% 0 0;
		}
		.tech-contents .movie {
			position: absolute;
			top: 0;
			left: 8.6%;
			width: 82.8%;
			padding: 18% 0 0;
		}
		.tech-contents .movie .btn-movie {
			width: 100%;
		}
		.tech-contents .movie .viewPc {
			display: none;
		}
		.tech-contents .movie .viewSp {
			display: block;
		}				
	}

/* slider */
.tech-contents .slider-wrap {
	display: table-cell;
	width: 50%;
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
	cursor: pointer;
}
.tech-contents #slider li {
	width: 100%!important;
	box-sizing: border-box;
}
.tech-contents #slider .slide02 {
	padding: 24px 24px 0;
}
.tech-contents #slider figure {
	display: block;
	width: auto;
	padding: 0;
}
.tech-contents #slider figure.viewSp {
	display: none;
}
.tech-contents .pager {
	position: relative;
	width: 94px;
	margin: 0 auto;
}
.tech-contents .pager .swiper-pagination {
	width: 100%;
}
.tech-contents .pager .swiper-pagination-bullet {
	opacity: 1;
	background: none;
	border: 1px solid #88877c;
	box-sizing: border-box;
	margin: 0 3px;
}
.tech-contents .pager .swiper-pagination-bullet-active {
	background: #88877c;
}
.tech-contents .pager .swiper-button-prev {
	background: url(/the-citizen/caliber0100/images/technology/btn_arrow_prev.png) no-repeat 0 50%;
	background-size: contain;
	top: 0;
	left:0;
	width: 9px;
	height: 21px;
	margin: 0;
	z-index: 11;
}
.tech-contents .pager .swiper-button-next {
	background: url(/the-citizen/caliber0100/images/technology/btn_arrow_next.png) no-repeat 0 50%;
	background-size: contain;
	top: 0;
	right: 0;
	width: 9px;
	height: 21px;
	margin: 0;
	z-index: 11;
}
	@media (min-width: 1px) and (max-width: 750px) {
		.tech-contents .slider-wrap {
			display: block;
			width: 100%;
			margin-bottom: 7.5%;
		}
		.tech-contents #slider figure.viewPc {
			display: none;
		}
		.tech-contents #slider figure.viewSp {
			display: block;
		}
		.tech-contents .pager {
			margin-top: -9%;
			padding-bottom: 9%;
		}
		.tech-contents .pager .swiper-pagination-bullet {
			width: 12px;
			height: 12px;
		}
		.tech-contents .pager .swiper-button-prev,
		.tech-contents .pager .swiper-button-next {
			display: none;
		}
	}
	@media (min-width: 1px) and (max-width: 480px) {
		.tech-contents .pager .swiper-pagination-bullet {
			width: 8px;
			height: 8px;
		}
	}


/* tech-footer
------------------------------------------------------------*/
.tech-footer .nav-ttl {
	padding: 45px 0;
	text-align: center;
	color: #88877c;
	font-size: 32px;
	line-height: 175%;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
	background: url(/the-citizen/caliber0100/images/technology/bg_nav_ttl.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.tech-footer ol:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.tech-footer li {
    overflow: hidden;
	position: relative;
	width : 33.3333% ;
	float: left;
}
.tech-footer li:after {
    position: absolute;
    content: "";
    display: block;
    width: 101%;
    height: 101%;
    top: 0;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 1s;
}
.tech-footer li:hover:after {
	-moz-transform: scale(1.1,1.1);
	-webkit-transform: scale(1.1,1.1);
	-o-transform: scale(1.1,1.1);
	-ms-transform: scale(1.1,1.1);
}
.tech-footer li.current:hover:after {
	-moz-transform: scale(1.0,1.0);
	-webkit-transform: scale(1.0,1.0);
	-o-transform: scale(1.0,1.0);
	-ms-transform: scale(1.0,1.0);
}
.tech-footer li.nav01:after {
	background: url(/the-citizen/caliber0100/images/technology/bg_nav01.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.tech-footer li.nav02:after {
	background: url(/the-citizen/caliber0100/images/technology/bg_nav02.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.tech-footer li.nav03:after {
	background: url(/the-citizen/caliber0100/images/technology/bg_nav03.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.tech-footer li > div,
.tech-footer li span,
.tech-footer li a {
	position: relative;
	display: block;
	height: 240px;
	color: #fff;
}
.tech-footer li > div:after,
.tech-footer li span:after,
.tech-footer li a:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	background-color: rgba(0,0,0,0.65);
	opacity: 0;
	transition: all .3s;
	z-index: 10;
}
.tech-footer li > div:after,
.tech-footer li span:after,
.tech-footer li.current a:after,
.tech-footer li:hover a:after {
	opacity: 1;
}
.tech-footer li .txt-wrap {
	position: absolute;
	display: table;
	width: 92%;
	left: 30px;
	bottom: 35px;
	z-index: 20;
}
.tech-footer li.current .txt-wrap {
	z-index: 10;
}
.tech-footer li .txt-wrap .number {
	display: table-cell;
	font-size: 60px;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
	vertical-align: middle;
}
.tech-footer li .txt-wrap .txt {
	display: table-cell;
	font-size: 14px;
	line-height: 157%;
	font-weight: 700;
	letter-spacing: 0.02em;
	font-feature-settings: "palt";
	vertical-align: middle;
	padding: 3% 0 0 2.5%;
	width: 100%;
}
 	@media (min-width: 1px) and (max-width: 1150px) {
 		.tech-footer li .txt-wrap {
 			left: 8%;
 			bottom: 8%;
 		}
 	}
  	@media (min-width: 1px) and (max-width: 900px) {
 		.tech-footer li .txt-wrap .number {
 			font-size: 6.6vw;
 		}
 		.tech-footer li .txt-wrap .txt {
 			font-size: 1.5vw;
 		}
	}
  	@media (min-width: 1px) and (max-width: 750px) {
		.tech-footer .nav-ttl {
			padding: 12% 0 11%;
			font-size: 6.56vw;
			background: url(/the-citizen/caliber0100/images/technology/bg_nav_ttl_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.tech-footer li {
			width : 100%;
			float: none;
		}
		.tech-footer li > div,
		.tech-footer li span,
		.tech-footer li a {
			height: auto;
			padding: 53.75% 0 0;
		}
		.tech-footer li.nav01:after {
			background: url(/the-citizen/caliber0100/images/technology/bg_nav01_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.tech-footer li.nav02:after {
			background: url(/the-citizen/caliber0100/images/technology/bg_nav02_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.tech-footer li.nav03:after {
			background: url(/the-citizen/caliber0100/images/technology/bg_nav03_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.tech-footer li .txt-wrap {
			bottom: 13%;
			left: 6.25%;
		}
		.tech-footer li .txt-wrap .number {
			font-size: 14.43vw;
		}
		.tech-footer li .txt-wrap .txt {
			font-size: 3.75vw;
		}
	}

/* technology01 */

.technology01 .cont01 figure {
	padding: 0 0 0 16px;
}
#wrapper.technology .cont01{
	opacity:0;
}
#wrapper.technology .cont01.init{
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0.8s;
	-moz-transition: opacity 1.0s ease 0.8s;
	-o-transition: opacity 1.0s ease 0.8s;
	-ms-transition: opacity 1.0s ease 0.8s;
	transition: opacity 1.0s ease 0.8s;
}
#wrapper.technology .cont02{
	opacity:0;
}
#wrapper.technology .cont02.init{
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0s;
	-moz-transition: opacity 1.0s ease 0s;
	-o-transition: opacity 1.0s ease 0s;
	-ms-transition: opacity 1.0s ease 0s;
	transition: opacity 1.0s ease 0s;
}
#wrapper.technology .cont03{
	opacity:0;
}
#wrapper.technology .cont03.init{
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0s;
	-moz-transition: opacity 1.0s ease 0s;
	-o-transition: opacity 1.0s ease 0s;
	-ms-transition: opacity 1.0s ease 0s;
	transition: opacity 1.0s ease 0s;
}
#wrapper.technology .cont04{
	opacity:0;
}
#wrapper.technology .cont04.init{
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0s;
	-moz-transition: opacity 1.0s ease 0s;
	-o-transition: opacity 1.0s ease 0s;
	-ms-transition: opacity 1.0s ease 0s;
	transition: opacity 1.0s ease 0s;
}
#wrapper.technology .cont05{
	opacity:0;
}
#wrapper.technology .cont05.init{
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0s;
	-moz-transition: opacity 1.0s ease 0s;
	-o-transition: opacity 1.0s ease 0s;
	-ms-transition: opacity 1.0s ease 0s;
	transition: opacity 1.0s ease 0s;
}
#wrapper.technology .cont06{
	opacity:0;
}
#wrapper.technology .cont06.init{
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0s;
	-moz-transition: opacity 1.0s ease 0s;
	-o-transition: opacity 1.0s ease 0s;
	-ms-transition: opacity 1.0s ease 0s;
	transition: opacity 1.0s ease 0s;
}
#wrapper.technology .tech-footer{
	opacity:0;
}
#wrapper.technology .tech-footer.init{
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0s;
	-moz-transition: opacity 1.0s ease 0s;
	-o-transition: opacity 1.0s ease 0s;
	-ms-transition: opacity 1.0s ease 0s;
	transition: opacity 1.0s ease 0s;
}
	@media (min-width: 1px) and (max-width: 750px) {
		.technology01 .cont01 figure {
			padding: 0;
		}
	}

/* technology02 */
	@media screen and (min-width: 750px) {/* fow PC */
		.technology02 .tech-contents .cont01 .inner {
			padding: 15px 0;
		}
		.technology02 .tech-contents .cont02 .inner {
			padding: 75px 0;
		}
		.technology02 .tech-contents .cont03 .inner {
			padding: 100px 0;
		}
		.technology02 .tech-contents .cont04 .inner {
			padding: 100px 0;
		}
		.technology02 .tech-contents .cont05 .inner {
			padding: 70px 0;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		.technology02 .tech-contents figure {
			margin-bottom: 7.5%;
		}
		.technology02 #main .tech-contents .inner {
			padding-bottom: 6.3%;
		}
	}

/* technology03 */
	@media screen and (min-width: 750px) {/* fow pc */
		.technology03 .tech-contents .cont01 .inner {
			padding: 80px 0;
		}
		.technology03 .tech-contents .cont02 .inner {
			padding: 80px 0;
		}
		.technology03 .tech-contents .cont03 .inner {
			padding: 0;
		}
	}
	@media (min-width: 751px) and (max-width: 900px) {
		.technology03 .tech-contents .cont03 figure {
			padding: 0;
		}
		.technology03 .tech-contents .cont03 figure img {
			width: 110%;
			margin-right: -20%;
		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		.technology03 .tech-contents  section .inner {
			width: 100%;
			padding: 0;
		}
		.technology03 .tech-contents .txt-wrap {
			width: 82.8%;
			padding: 12.5% 0 18.75%;
			margin: 0 auto;
		}
	}

/*==================================================
product-page
==================================================*/
.product-page .tech-header {
	height: 380px;
}
.product-page #tech-header-innner {
	background: #2e2e2e url(/the-citizen/caliber0100/images/product/bg_product_main.jpg) no-repeat 50% 50%;
	background-size: auto 100%;
	height: 380px;
}
.product-page .tech-header h1 {
	font-family: 'Calibre-Medium';
	font-size: 64px;
	letter-spacing: 0.03em;
}
.product-list {
	position: relative;
	padding: 0 0 15px;
}
.product-list section {
	padding: 70px 0;
}
.product-list section:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.product-list section:nth-child(odd) {
	background: #dfd7ce;
}
.product-list section:nth-child(even) {
	background: #d6ccc2;
}
.product-list .inner {
	max-width: 900px;
	width: 90%;
	margin: 0 auto;
}
.product-list section img {
	width: 100%;
}
.product-list .slider {
	width: 48%;
	float: left;
	margin: 0 0 30px;
	border: 1px solid #e7e5e3;
	box-sizing: border-box;
}
.product-list .detail {
	width: 47%;
	float: right;
	margin: 40px 0 30px;
}
.product-list .detail h2 {
	color: #fff;
	font-size: 48px;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
}
.product-list .detail .txt-specialinfo {
	color: #88877c;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0 0 35px;
}
.product-list .detail .img-tmb {
	margin: 0 0 30px;
}
.product-list .detail .img-tmb:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.product-list .detail .img-tmb .slick-track {
	margin: 0;
}
.product-list .detail .img-tmb li {
	position: relative;
	width: 96px !important;
	float: left;
	margin: 0 6px 0 0;
}
.product-list .detail .img-tmb li:last-child {
	margin: 0;
}
.product-list .detail .img-tmb li a:hover::after,
.product-list .detail .img-tmb li.active a::after {
	display:block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	border: 2px solid #fff;
	box-sizing: border-box;
}
.product-list .detail .img-tmb li a{
	display:block;
	width:100%;
	height:100%;
	position:relative;
	z-index:50;
}
.product-list .detail .txt {
	font-size: 13px;
	line-height: 184%;
	letter-spacing: 0.02em;
}
.product-list .detail .btn-localsite {
	margin: 30px 0 0;
}
.product-list .detail .btn-localsite a {
	position: relative;
	display: block;
	max-width: 360px;
	width: 90%;
	height: 42px;
	line-height: 42px;
	text-align: center;
	font-size: 14px;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
	border: 1px solid #333;
	transition: all .3s;
}
.product-list .detail .btn-localsite a:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 20px;
	width: 12px;
	height: 9px;
	content: "";
	background: url(/the-citizen/caliber0100/images/icn_link.svg) no-repeat 0 0;
	background-size: contain;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	transition: all .3s;
}
.product-list .detail .btn-localsite a:hover {
	color: #fff;
	background: #414141;
}
.product-list .detail .btn-localsite a:hover:after {
	background: url(/the-citizen/caliber0100/images/icn_link_wt.svg) no-repeat 0 0;
	background-size: contain;
}
/* list-spec */
.product-list .list-spec {
	width: 100%;
	margin: 45px 0 0;
}
.product-list section:nth-child(odd) .list-spec tr {
	border-bottom: 2px solid #dfd7ce;
	background: #e7e1da;
}
.product-list section:nth-child(even) .list-spec tr {
	border-bottom: 2px solid #d6ccc2;
	background: #e0d9d1;
}
.product-list .list-spec th {
	width: 200px;
	padding: 0 35px;
	font-size: 16px;
	font-family: 'Calibre-Medium';
	letter-spacing: 0.03em;
	color: #88877c;
	box-sizing: border-box;
	text-align: left;
	vertical-align: middle;
}
.product-list .list-spec td {
	padding: 17px 17px 17px 0;
	font-size: 11px;
	letter-spacing: 0.02em;
	box-sizing: border-box;
	vertical-align: middle;
}

#product-list01{
	opacity:0;
}
#frame-main.init #product-list01 {
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0.8s;
	-moz-transition: opacity 1.0s ease 0.8s;
	-o-transition: opacity 1.0s ease 0.8s;
	-ms-transition: opacity 1.0s ease 0.8s;
	transition: opacity 1.0s ease 0.8s;
}
#product-list02{
	opacity:0;
}
#product-list02.init{
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0s;
	-moz-transition: opacity 1.0s ease 0s;
	-o-transition: opacity 1.0s ease 0s;
	-ms-transition: opacity 1.0s ease 0s;
	transition: opacity 1.0s ease 0s;
}
#product-list03{
	opacity:0;
}
#product-list03.init{
	opacity:1;
	-webkit-transition: opacity 1.0s ease 0s;
	-moz-transition: opacity 1.0s ease 0s;
	-o-transition: opacity 1.0s ease 0s;
	-ms-transition: opacity 1.0s ease 0s;
	transition: opacity 1.0s ease 0s;
}
	@media screen and (min-width: 1630px) {
		.product-list .inner {
			max-width: initial;
			width: 60.8%;
		}
		.tech-contents .txt-wrap {
			width : -webkit-calc(100% - 450px) ;
			width : calc(100% - 450px) ;
		}
	}
	@media(min-width:1px) and (max-width: 1250px) {
		.product-list .img-main img {
			width: 100%;
		}
		.product-list .detail {
			margin: 0 0 30px;
		}
		.product-list .detail .img-tmb li {
			width: 23.6% !important;
			margin: 0 2% 0 0;
		}
		.product-list .detail .img-tmb li img {
			width: 100%;
		}
	}
	@media(min-width:1px) and (max-width: 750px) {
		.product-page .tech-header {
			height: auto;
			padding: 46.8% 0 0;
			background: #2e2e2e url(/the-citizen/caliber0100/images/product/bg_product_main_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.product-page #tech-header-innner {
			opacity:0;
			height: auto;
			width:100%;
			position: absolute;
			top: 43%;
			left: 0%;
		}
		.product-page .tech-header h1 {
			font-size: 11.25vw;
		}
		.product-list {
			padding: 0;
		}
		.product-list section {
			padding: 12% 0 15%;
		}
		.product-list .inner {
			position: relative;
			width: 82.8%;
			padding: 23% 0 0;
		}
		.product-list .slider {
			width: 100%;
			float: none;
			margin: 0 0 5%;
		}
		.product-list .detail .img-tmb li a:hover::after {
			content: none;
		}
		.product-list .detail .img-tmb li.active a:hover::after {
			content: "";
		}
		.product-list .ttl {
			position: absolute;
			top: 0;
		}
		.product-list .detail {
			width: 100%;
			float: none;
			margin: 0 0 5.6%
		}
		.product-list .detail h2 {
			font-size: 8.125vw;
		}
		.product-list .detail .txt-specialinfo {
			font-size: 3.125vw;
			padding: 0;
		}
		.product-list .detail .img-tmb {
			margin:	0 0 5.6%;
		}
		.product-list .detail .btn-localsite {
			margin: 5.6% 0 0;
		}
		.product-list .detail .btn-localsite a {
			max-width: 100%;
			width: 100%;
			font-size: 3.125vw;
			line-height: 100%;
			height: auto;
			padding: 4.5% 0;
		}
		.product-list .detail .btn-localsite a:after {
			width: 4.1%;
			height: auto;
			padding: 2.9% 0 0;
			right: 5.5%;
		}
		.product-list .list-spec {
			margin: 0;
		}
		.product-list .list-spec th {
			display: block;
			width: 100%;
			padding: 5% 7% 1% 7%;
			font-size: 4vw;
		}
		.product-list .list-spec td {
			display: block;
			width: 100%;
			padding: 0 7% 5% 7%;
			font-size: 3.125vw;
		}
	}
	@media(min-width:1px) and (max-width: 480px) {
		.product-list .detail .txt {
			font-size: 3.4vw;
		}
	}

/* btn-back */
.product-list .btn-back {
	position: absolute;
	top: 0;
	right: 60px;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	z-index: 10;
	opacity:0;
}
#frame-main.init .product-list .btn-back{
	opacity:1;
	-webkit-transition: opacity 0.4s ease 1.0s;
	-moz-transition: opacity 0.4s ease 1.0s;
	-o-transition: opacity 0.4s ease 1.0s;
	-ms-transition: opacity 0.4s ease 1.0s;
	transition: opacity 0.4s ease 1.0s;

}
.product-list .btn-back a {
	position: relative;
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 0 0 auto;
	content: "";
	background: #fff;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	transition: all .3s;
	-webkit-transform: rotateZ( 0deg ) ;
	transform: rotateZ( 0deg ) ;
}
.product-list .btn-back a:hover {
	background: #000;
	-webkit-transform: rotateZ( 360deg ) ;
	transform: rotateZ( 360deg ) ;
}
.product-list .btn-back a .icn {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	content: "";
	background: url(/the-citizen/caliber0100/images/icn_back.svg) no-repeat 0 50%;
	background-size: contain;
 	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	 transition: all .3s;
}
.product-list .btn-back a:hover .icn {
	background: url(/the-citizen/caliber0100/images/icn_back_wt.svg) no-repeat 0 50%;
	background-size: contain;
}
 	@media (min-width: 1px) and (max-width: 1150px) {
 		.product-list .btn-back {
 			right: 6%;
 		}
	}
	@media (min-width: 1px) and (max-width: 750px) {
		 .product-list .btn-back {
 			display: none;
 		}
	}