@charset "UTF-8";
.basel2018 .photomodal {
	z-index: 99992;
}
.basel2018 #header {
	z-index: 888;
}
#modalWindow #header {
	opacity: 1;
	background: none;
	z-index: 9999;
}
#modalWindow #header.white {
	background-color:#ffffff;
}
#mymodalheader #header.white .page_btnBack,
#modalWindow #header.white .page_btnBack{
	color:#000000;
}


#modalWindow #header .header {
	width: 100%;
	border-bottom: none;
}
#modalWindow #gnav {
	padding: 2px 0 0;
}
#modalWindow .menu-trigger {
	display: none;
}
#mymodalheader #modalSide{
	opacity:0;
}
#mymodalheader .header {
	padding-bottom: 55px;
}
#mymodalheader .header h1 {
	width: 137px;
	height: 17px;
	padding-top: 7px;
}

	@media (min-width: 769px) and (max-width: 9999px) {
		#modalWindow #header {
			position: absolute;
		}
		#modalWindow .header {
			padding-top: 35px;
		}
		#modalWindow .header h1 {
			width: 137px;
			height: 17px;
			padding-left: 30px;
		}
		#modalWindow .header .subnav {
			display: none;
		}
	}
	@media screen and (max-width: 768px) {
		#mymodalheader .page_btnBack,
		#modalWindow .page_btnBack {
			display: block;
			position: absolute;
   			 top: 42%;
			left: 4.6875%;
			color: #fff;
			font-family: 'Calibre-Regular';
			font-size: 2.5vw;
			letter-spacing: 0.2em;
			-webkit-transform: translate(0, -50%);
			transform: translate(0, -50%);
		}
		#mymodalheader .page_btnBack span,
		#modalWindow .page_btnBack span {
			position: relative;
		}
		#mymodalheader .page_btnBack span:before,
		#modalWindow .page_btnBack span:before {
			position: absolute;
			top: 1.7em;
			left: 0;
			content: "";
			display: inline-block;
			width: 100%;
			height: 1px;
			background: #fff;
			transition: 0.3s;
		}
		#mymodalheader #header.white .page_btnBack span:before ,
		#modalWindow #header.white .page_btnBack span:before {
			background: #000;
		}
		#mymodalheader .header h1 {
			max-width: initial;
			width: 34%;
			height: auto;
			float: none;
			padding: 0;
			margin: 0 auto;
		}
	}

/*==================================================
menu
==================================================*/
#menu .menu_close {
	color: #000 !important;
}
#menu common-snsnav {
	border-color: #b9b9b9;
	background: #fff;
}
#menu .menuCont {
	max-width: 640px;
	margin: 0 auto;
	padding: 150px 0 8.6%;
}
	@media screen and (max-width: 768px) {
		#menu .menuCont {
			width: 84.375%;
		}
	}
	@media screen and (max-width: 480px) {
		#menu .menuCont {
			padding: 30% 0 8.6%;
		}
	}

/*==================================================
frame base
==================================================*/
#modalWindow,
#modalWindow a {
	color: #303030;
}
#movie-profile,
#modalWindow-inner {
	min-width: 1165px;
}
#modalWindow-inner:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
#modalMain {
	width: 100% !important;
	float: left;
	margin-right: -152px;
	padding-right: 152px;
	box-sizing: border-box;
	z-index:6105;
}
#modalSide {
	position: fixed;
	top: 0;
	right: 0;
	width:152px;
	padding: 47px 46px 0;
	float: right;
	box-sizing: border-box;
	z-index: 8100 !important;
}
	@media screen and (max-width: 1180px) {
		#modalMain {
			margin-right: 0;
			padding-right: 0;
		}
		#modalSide {
			display: none;
		}
	}
	@media screen and (max-width: 768px) {
		#modalWindow-inner {
			min-width: 0;
		}
		#modalMain {
			float: none;
			margin-right: 0;
			padding-right: 0;
		}
		#modalSide {
			display: none;
		}
	}
/*==================================================
modalHead
==================================================*/
#modalWindow {
	background:#fff;
}
.modalHead {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 35px 0 25px 35px;
	box-sizing: border-box;
	z-index: 8000;
	transition: all .4s;
}
.modalHead.white {
	background-color: rgba(255,255,255,0.6);
	background: #fff;
}
.modalHead.white a span,
.modalHead.white a{
	color:#000;
}
.modalHead h1 img {
	width: 135px;
	height: 17px;
}
.modalHead .logo_citizen {
	display: none;
}
.modalHead .menu_close {
	display: none;
}
	@media screen and (max-width: 768px) {
		.modalHead {
			position: fixed;
			min-width: 0;
			padding: 25px 0;
			border-bottom: 1px solid #fff;
		}
		.modalHead.black {
			background-color: rgba(0,0,0,0.8);
		}
		.modalHead.opnenav {
			border-bottom: 1px solid #eee;
		}
		.modalHead h1 {
			max-width: initial;
			width: 34%;
			height: auto;
			float: none;
			padding: 0;
			margin: 0 auto;
		}
		.modalHead h1 a {
			display: block;
		}
		.modalHead h1 img {
			width: auto;
			height: auto;
		}
		.modalHead .logo_citizen,
		.modalHead .menu_close {
			display: block;
		}
		.modalHead .logo_citizen {
			position: absolute;
			width: 15.6%;
			top: 20px;
			right: 3%;
			padding: 0;
		}
		.modalHead .logo_citizen img {
			width: 100%;
			height: auto;
		}
		.modalHead .menu_close {
			position: absolute;
			top: 50%;
			left: 3%;
			color: #fff !important;
			font-family: 'Calibre-Regular';
			font-size: 2.5vw;
			letter-spacing: 0.2em;
			-webkit-transform: translate(0, -50%);
			transform: translate(0, -50%);
		}
		.modalHead .menu_close span {
			position: relative;
		}
		.modalHead .menu_close span:before {
			position: absolute;
			top: 1.7em;
			left: 0;
			content: "";
			display: inline-block;
			width: 0;
			height: 1px;
			background: #fff;
			transition: 0.3s;
		}
		.modalHead .menu_close:hover span:before{
			width: 100%;
		}
	}
	@media screen and (max-width: 480px) {
		.modalHead {
			padding: 20px 0;
		}
		.modalHead .logo_citizen img {
			width: 100%;
			height: auto;
		}
		.modalHead .menu_close {
			font-size: 2.5vw;
		}
	}

/*==================================================
modalCont (main)
==================================================*/
/* cont-base & contttl */
.modalCont {
	background: #f6f6f6;
}
.modalCont img {
	width: 100%;
}
.modalCont .ttlWrap {
	position: relative;
	width: 100%;
	height: 544px;
	background: #000;
}
		.modalTech01 .ttlWrap {
			background: url(../jpg/technology01_bg01.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.modalTech02 .ttlWrap {
			background: url(../jpg/technology01_bg02.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.modalTech03 .ttlWrap {
			background: url(../jpg/technology01_bg03.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.modalTech04 .ttlWrap {
			background: url(../jpg/technology01_bg04.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
.modalCont .ttl {
	display: block;
	width: 950px;
}
	@media (min-width: 769px) and (max-width: 9999px) {
		.modalCont .ttl {
			position: absolute;
			top: 45%;
			left: 7.9%;
			-webkit-transform: translate(0, -50%);
			transform: translate(0, -50%);
		}
		.modalMovie .ttl,
		.modalProfile .ttl {
			left: 50%;
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
		}
	}

/* btn-scroll */
.modalCont .ttlWrap .btnScroll {
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 70px;
	text-decoration: none;
	z-index: 900;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
.modalCont .ttlWrap .btnScroll .txt {
	text-align: center;
	color: #fff;
	font-family: 'Calibre-Regular';
	font-size: 10px;
	letter-spacing: 0.3em;
}
.modalCont .ttlWrap .btnScroll .bar {
	overflow: hidden;
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 15px;
	height: 40px;
	content: "";
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
.modalCont .ttlWrap .btnScroll span span {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: block;
	width: 1px;
	height: 100px;
	border-left: 1px solid #fff;
	margin-left: -0.5px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
	box-sizing: border-box;
}
.modalCont .ttlWrap .btnScroll:before {
	display: block;
	position: absolute;
	bottom: -46px;
	left: 50%;
	width: 1px;
	height: 46px;
	content: "";
	background: #858585;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	z-index: 10;
}
	@media screen and (max-width: 768px) {
		.modalCont .ttlWrap .btnScroll {
			height: 55px;
		}
		.modalCont .ttlWrap .btnScroll .txt {
			font-size: 2.5vw;
		}
		.modalCont .ttlWrap .btnScroll .bar {
			height: 30px;
		}
		.modalCont .ttlWrap .btnScroll:before {
			bottom: -35px;
			height: 35px;
		}
	}

.modalCont h2 {
	display: inline-block;
	padding: 0 20px 0 0;
	margin: 0 0 20px;
    font-size: 34px;
	letter-spacing: 0.3em;
	font-family: 'Calibre-Regular';
    line-height: 110%;
	color: #fff;
}
.modalCont .ttl h3 {
	display: inline-block;
}
.modalCont .ttl p {
	display: block;
}
.modalCont .ttl h3,
.modalCont .ttl p {
	color: #fff;
	font-family: 'Calibre-Regular';
	 font-size: 14px;
	 letter-spacing: 0.15em;
	 line-height: 166.6%;
	 vertical-align: middle;
}
.modalMovie .ttl h3 {
	font-size: 17px;
}
.modalCont .ttl h3 span {
	font-size: 14px;
	font-family: 'Calibre-Regular';
}
.modalCont.modalTech .ttl p {
	font-size: 18px;
	letter-spacing: 0.15em;
	font-family: 'Calibre-Light';
}

.modalCont .btn_scroll {
	position: absolute;
	bottom: -46px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
	@media screen and (max-width: 768px) {
		.modalCont .ttlWrap {
			height: auto;
			padding: 74.28% 0 0;
		}
				.modalTech .ttlWrap {
					padding: 125% 0 0;
				}
				.modalTech01 .ttlWrap {
					background: url(../jpg/technology01_bg01_sp.jpg) no-repeat 0 0;
					background-size: contain;
				}
				.modalTech02 .ttlWrap {
					background: url(../jpg/technology01_bg02_sp.jpg) no-repeat 0 0;
					background-size: contain;
				}
				.modalTech03 .ttlWrap {
					background: url(../jpg/technology01_bg03_sp.jpg) no-repeat 0 0;
					background-size: contain;
				}
				.modalTech04 .ttlWrap {
					background: url(../jpg/technology01_bg04_sp.jpg) no-repeat 0 0;
					background-size: contain;
				}

		.modalCont .ttl {
			position: absolute;
			top: 35.158%;
			left: 7.8125%;
			width: 84.375%;
			padding: 0;
		}
			.modalTech .ttl {
				top: 21.25%;
			}
		.modalCont .ttl {
			display: block;
			margin: 0 0 4.63%;
		}
		.modalCont h2 {
			display: block;
			padding: 0;
			margin: 0 0 2%;
			 font-size: 6.25vw;
		}
		.modalCont .ttl h3,
		.modalCont .ttl span {
			display: inline-block;
			 font-size: 3.75vw;
		}
		.modalCont.modalProfile .ttl h3 {
			 font-size: 2.5vw;
		}
		.modalCont.modalTech .ttl p {
			font-size: 3.75vw;
			line-height: 130%;
		}
		.modalCont .btn_scroll {
			width: 10.3%;
			bottom: -6.7%;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
		}
	}
	@media screen and (max-width: 415px) {
		.modalTech .ttl {
			top: 24%;
		}
	}
/* cont-inner */
.modalCont .modal-inner {
	position: relative;
	width: 950px;
	margin: 0 auto;
	padding: 0 0 145px;
	z-index: 7100;
}
	.modalProfile .modal-inner {
		padding-top: 110px;
	}
.modalCont .iframe {
	position: relative;
	width: 100%;
	height: auto;
	padding: 57% 0 0;
	margin: -250px 0 60px;
}
	.modalCont #profile01 figure {
		margin-top: -355px;
	}
.modalCont .iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.modalCont .txtWrap {
	padding: 0 0 80px;
}
.modalCont .txtWrap p,
.modalCont p.txtBase {
	font-size: 12px;
	letter-spacing: 0.08em;
	line-height: 230%;
}
.modalCont .txtWrap p+p {
	padding-top: 30px;
}
.modalCont p.txtBase {
	line-height: 170%;
}
	@media screen and (max-width: 768px) {
		.modalCont .modal-inner {
			max-width: 540px;
			width: 84.375%;/* 540px */
			padding: 11.7% 0 9.5%;
		}
		.modalCont .iframe {
			margin: -50% 0 1.3%;
		}
			.modalCont #profile01 figure {
				margin-top: -50%;
			}
		.modalCont .txtWrap {
			padding: 0 0 15.9%;
		}
	}
	@media screen and (max-width: 480px) {
		.modalCont .txtWrap p,
		.modalCont p.txtBase {
			font-size: 2.8vw;
		}
		.modalCont .txtWrap p+p {
			padding-top: 5.5%;
		}
	}
/* .tmbList
---------------------------------------------*/
.modalCont .tmbList:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.modalCont .tmbList li {
	float: left;
	margin: 0 7px 7px 0;
}
.modalCont .tmbList li:nth-child(3n) {
	margin-right: 0;
}
.modalCont .tmbList li .movieImg,
.modalCont .tmbList li .profImg {
	width: 312px;
	margin: 0 0 20px;
}
	.modalTech02 .tmbList li .movieImg {
		width: 540px;
	}

.modalCont .tmbList li a {
	display: block;
}
.modalCont .tmbList li .movieImg,
.modalCont .tmbList li .profImg {
	position: relative;
	transition: all .3s;
}
.modalCont .tmbList li .current .movieImg,
.modalCont .tmbList li a:hover .movieImg,
.modalCont .tmbList li .current .profImg,
.modalCont .tmbList li a:hover .profImg {
	opacity: 0.4;
}
.modalCont .tmbList li .movieImg:before {
	display:block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	-webkit-transform: translate(-50%, -50%);
	 transform: translate(-50%, -50%);
	 content: "";
	background: url(../svg/icn_movieplay-2.svg) no-repeat 0 0;
	background-size: contain;
}
.modalCont .tmbList li figcaption {
	font-size: 12px;
	 letter-spacing: 0.15em;
}
.modalCont .tmbList li figcaption em {
	display: block;
	padding: 0 0 5px;
	 font-family: 'Calibre-Regular';
	 font-size: 16px;
	 letter-spacing: 0.3em;
}
	@media screen and (max-width: 768px) {
		.modalCont .tmbList li {
			width: 100%;
			float: none;
			margin: 0 0 12.6% 0;
		}
		.modalCont .tmbList li:nth-child(3n) {
			margin-right: 0;
		}
		.modalCont .tmbList li:nth-child(2n) {
			margin-right: 0;
		}
		.modalCont .tmbList li .profImg,
		.modalCont .tmbList li .movieImg {
			width: 100%;
			margin: 0 0 5.48%;
		}
		.modalCont .tmbList li img {
			width: 100%;
		}
		.modalCont .tmbList li .movieImg:before {
			width: 19%;
			height: auto;
			padding: 19% 0 0;
		}
		.modalCont .tmbList li figcaption {
			font-size: 2.8vw;
		}
		.modalCont .tmbList li figcaption em {
			padding: 0 0 3px;
			 font-size: 3.75vw;
		}
	}

/* btn_back
---------------------------------------------*/
.modalCont .btnBack {
	position: relative;
	display: block;
	padding: 60px 0;
	text-align: center;
	font-family: 'Calibre-Regular';
	font-size: 14px;
	letter-spacing: 0.3em;
	background: #fff;
	z-index: 10;
}
.modalCont .btnBack span {
	position: relative;
	padding: 0 40px 0 0;
}
.modalCont .btnBack span:after {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	content: "";
	-webkit-transform: translate(-0, -50%);
	transform: translate(0, -50%);
	background-size: contain;
	width: 23px;
	height: 9px;
	background: url(../svg/icn_arrowlink_bk.svg) no-repeat 0 0;
	transition: all .3s;
}
.modalCont .btnBack:hover span:after {
	right: -10px;
}
.modalTech .btnBack {
	background: #f6f6f6;
}
	@media screen and (max-width: 768px) {
		.modalCont .btnBack {
			font-size: 3.0vw;
		}
	}
	@media screen and (max-width: 480px) {
		.modalCont .btnBack {
			padding: 14.8% 0;
		}
	}
	@media screen and (max-width: 415px) {
		.modalCont .btnBack span {
			padding: 0 7% 0 0;
		}
		.modalCont .btnBack span:after {
			background-size: 70% auto;
			background-position: 100% 50%;
		}
	}
/*==================================================
modalSide
==================================================*/
#modalSide .btn_close {
	margin: 0 0 161px;
	 text-align: center;
}
#modalSide .btn_close a {
	 font-family: 'Calibre-Regular';
	 font-size: 12px;
	 letter-spacing: 0.2em;
}
#modalSide .btn_close a,
#modalSide .btn_close a span {
	position: relative;
	z-index:7300;
}
#modalSide .btn_close a span {
	display: inline-block;
	padding: 0 0 2px;
}
#modalSide .btn_close a span:before {
	position: absolute;
	bottom: -3px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #3a3a3a;
}
#modalSide .btn_close a span:hover:before {
	width: 0%;
}
#modalSide .btn_close a::after {
	position: absolute;
	bottom: -5px;
	left: 0;
	content: '';
	width: 0;
	height: 1px;
	background: #3a3a3a;
	transition: .3s;
}
#modalSide .btn_close a:hover::after {
	width: 100%;
}
#modalSide .side-tmbList {
	width: 60px;
	padding: 0 0 130px;
}
#modalSide .side-tmbList li {
	margin: 0 0 5px;
}
#modalSide .side-tmbList li img {
	width: 100%;
}
#modalSide .side-tmbList li a {
	transition: all .3s;
}
#modalSide .side-tmbList li a:hover,
#modalSide .side-tmbList li span img {
	opacity: 0.4;
}
#modalSide .pager {
	text-align: center;
}
#modalSide .pager li {
	display: inline-block;
	padding: 0 8px;
}
#modalSide .pager li img {
	width: 11px;
	height: 22px;
}
/*==================================================
movie & profile
==================================================*/
/* movie
------------------------------------------------*/
.modalMovie h4 {
	padding: 0 0 20px;
	 font-size: 22px;
	 letter-spacing: 0.3em;
	 font-weight: bold;
}
.modalMovie h4 img {
	width: 308px;
	height: 62px;
}
	@media screen and (max-width: 768px) {
		.modalMovie h4 {
			width: 72.2%;
			height: auto;
		}
		.modalMovie h4 img {
			width: 100%;
			height: auto;
		}
	}
	@media screen and (max-width: 480px) {
		.modalMovie  h4 {
			padding: 0 0 6.7%;
		}
	}
/* modalProfile
------------------------------------------------*/
.modalProfile .cont {
	padding: 0 0 20px;
}
.modalProfile figure {
	padding: 0 0 32px;
}
.modalProfile h4 {
	padding: 0 0 25px;
}
.modalProfile #profile01 h4 img {
	width: 284px;
	height: 38px;
}
.modalProfile #profile02 h4 img {
	width: 160px;
	height: 38px;
}
	@media screen and (max-width: 768px) {
		.modalProfile figure {
			padding: 0 0 5%;
		}
		.modalProfile h4 {
			padding: 0 0 5%;
		}
		.modalProfile #profile01 h4 img,
		.modalProfile #profile02 h4 img {
			width: 100%;
			height: 100%;
		}
		.modalProfile #profile01 h4 {
			width: 67%;
		}
		.modalProfile #profile02 h4 {
			width: 38.8%;
		}
		.modalProfile .txtWrap {
			padding: 0 0 13%;
		}
	}
	@media screen and (max-width: 480px) {
		.modalProfile .ttl h3 {
			font-size: 2.6vw;
		}
	}
/*==================================================
technology
==================================================*/
/*techniqueNav
-----------------------------*/
.techniqueNav {
	background: #fff;
}
.techniqueNav:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.techniqueNav h3 {
	padding: 90px 0 65px;
	text-align: center;
	font-size: 20px;
	font-family: 'Calibre-Regular';
	 letter-spacing: 0.3em;
}
.techniqueNav li {
	position: relative;
	width: 25%;
	float: left;
}
.techniqueNav li a,
.techniqueNav li .current {
	display: block;
	height: 300px;
	transition: all .3s;
	background-size: auto 100% !important;
}
.techniqueNav li:first-child a,
.techniqueNav li:first-child .current {
	background: url(../jpg/technique_nav_bg01.jpg) no-repeat 50% 50%;
}
.techniqueNav li:nth-child(2) a,
.techniqueNav li:nth-child(2) .current {
	background: url(../jpg/technique_nav_bg02.jpg) no-repeat 50% 50%;
}
.techniqueNav li:nth-child(3) a,
.techniqueNav li:nth-child(3) .current {
	background: url(../jpg/technique_nav_bg03.jpg) no-repeat 50% 50%;
}
.techniqueNav li:nth-child(4) a,
.techniqueNav li:nth-child(4) .current {
	background: url(../jpg/technique_nav_bg04.jpg) no-repeat 50% 50%;
}
.techniqueNav li a:hover,
.techniqueNav li .current {
	opacity: 0.3;
}
.techniqueNav li span img,
.techniqueNav li figcaption img {
	width: 100%;
}
.techniqueNav li figcaption {
	position: absolute;
	top: 20%;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, -0);
}
.techniqueNav li:first-child figcaption {
	width: 131px;
}
.techniqueNav li:nth-child(2) figcaption {
	width: 171px;
}
.techniqueNav li:nth-child(3) figcaption {
	width: 153px;
}
.techniqueNav li:nth-child(4) figcaption {
	width: 178px;
}

	@media (min-width: 2170px) and (max-width: 9999px) {
		.techniqueNav li:first-child a,
		.techniqueNav li:nth-child(2) a,
		.techniqueNav li:nth-child(3) a,
		.techniqueNav li:nth-child(4) a {
			background-size: cover!important;
		}
	}
	@media screen and (max-width: 768px) {
		.techniqueNav h3 {
			padding: 15% 0;
			font-size: 4.6vw;
		}
		.techniqueNav li {
			width: 50%;
		}
		.techniqueNav li a,
		.techniqueNav li .current {
			height: auto;
			padding: 106.25% 0 0;
		}
		.techniqueNav li a:hover {
			opacity: 1 !important;
		}
		.techniqueNav li figcaption {
			top: 13.8%;
		}
		.techniqueNav li:first-child figcaption {
			width: 40.9%;
		}
		.techniqueNav li:nth-child(2) figcaption {
			width: 53.4%;
		}
		.techniqueNav li:nth-child(3) figcaption {
			width: 47.8%;
		}
		.techniqueNav li:nth-child(4) figcaption {
			width: 55.6%;
		}
	}

/*technology --- common
-----------------------------*/
.modalTech #cont01 {
	padding: 140px 0 0;
}
	@media screen and (max-width: 768px) {
		.modalTech #cont01 {
			padding: 50px 0 0;
		}
	}
	@media screen and (max-width: 768px) {
		.modalTech #cont01 {
			padding: 16.4% 0 0;
		}
	}
/*technology01
-----------------------------*/
.modalTech01 #cont01 h3 {
	padding: 0 0 40px;
	font-size: 22px;
	font-weight: 700;
	 letter-spacing: 0.25em;
	 line-height: 180%;
}
.modalTech01 #cont01 h3 img {
	width: 339px;
	height: 49px;
}
.modalTech01 .photoLeft {
	padding: 0 0 85px;
}
.modalTech01 .photoLeft:after,
.modalTech01 .photoRight:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.modalTech01 .photoLeft figure {
	width: 390px;
	float: left;
}
.modalTech01 .photoLeft .txtWrap {
	width: 490px;
	float: right;
}
.modalTech01 .photoRight figure {
	width: 443px;
	float: right;
	padding: 0 40px 0 0;
}
.modalTech01 .photoRight .txtWrap {
	width: 434px;
	float: left;
}
	@media screen and (max-width: 768px) {
		.modalTech01 #cont01 h3 {
			width: 75.9%;
			padding: 0 0 7.4%;
		}
		.modalTech01 #cont01 h3 img {
			width: 100%;
			height: 100%;
		}
		.modalTech01 .photoLeft figure {
			width: 72.2%;
			float: none;
			padding: 0 0 7.4%;
		}
		.modalTech01 .photoLeft {
			padding: 0 0 6.48%;
			margin: 0 0 11.1%;
			border-bottom: 1px solid #ccc;
		}
		.modalTech01 .photoLeft .txtWrap {
			width: 100%;
			float: none;
			padding: 0;
		}
		.modalTech01 .photoLeft .txtWrap br,
		.modalTech01 .photoRight .txtWrap br  {
			display: none;
		}
		.modalTech01 .photoRight {
			padding: 0 0 16.6%;
		}
		.modalTech01 .photoRight figure {
			width: 81.85%;
			float: none;
			padding: 0 0 7.4% 9.26%;
		}
		.modalTech01 .photoRight .txtWrap {
			width: 100%;
			float: none;
			padding: 0;
		}
		.modalTech01 .txtWrap p+p {
			padding: 0;
		}

	}
	@media screen and (max-width: 480px) {
		.modalTech01 #cont01 h3 {
			font-size: 3.3vw;
		}
	}

/*technology02
-----------------------------*/
.modalTech02 #cont02 h3,
.modalTech02 #cont03 h3 {
	padding: 0 0 50px;
	margin: 0 0 50px;
	font-family: 'Calibre-Medium';
	font-size: 18px;
	text-align: center;
	letter-spacing: 0.3em;
	border-bottom: 1px solid #ccc;
}
	@media screen and (max-width: 768px) {
		.modalTech02 #cont02 h3,
		.modalTech02 #cont03 h3 {
			padding: 0 0 7.6%;
			margin: 0 0 8.26%;
			text-align: left;
			font-size: 3.75vw;
		}
	}

/* cont01 */
.modalTech02 #cont01:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.modalTech02 #cont01 h3 {
	width: 453px;
	float: left;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.modalTech02 #cont01 h3 img {
	width: 250px;
	height: 86px;
}
.modalTech02 #cont01 .txtWrap {
	float: left;
	width: 497px;
}
	@media screen and (max-width: 768px) {
		.modalTech02 #cont01 {
			padding: 50px 0;
		}
		.modalTech02 #cont01 h3,
		.modalTech02 #cont01 p {
			width: 100%;
			float: none;
		}
		.modalTech02 #cont01 h3 {
			width: 58%;
			padding: 0 0 6.5%;
			font-size: 22px;
		}
		.modalTech02 #cont01 h3 img {
			width: 100%;
			height: 100%;
		}
		.modalTech02 .txtWrap {
			padding: 0;
		}
		.modalTech02 #cont01 .txtWrap {
			width: 100%;
		}
	}
	@media screen and (max-width: 640px) {
		.modalTech02 #cont01 h3 {
			font-size: 3.5vw;
		}
	}
	@media screen and (max-width: 480px) {
		.modalTech02 #cont01 {
		}
	}
	@media screen and (max-width: 415px) {
		.modalTech02 #cont01 h3 {
			font-size: 14px;
		}
	}
/* cont02 */
.modalTech02 #cont02 {
	padding: 0 0 120px;
}
.modalTech02 #cont02 .photoLeft,
.modalTech02 #cont02 .photoRight {
	padding: 0 0 65px;
}
.modalTech02 #cont02 .photoLeft:after,
.modalTech02 #cont02 .photoRight:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.modalTech02 #cont02 .photoLeft figure {
	width: 477px;
	float: left;
	padding: 0 50px 0 0;
}
.modalTech02 #cont02 .photoLeft .txtWrap {
	width: 340px;
	float: left;
	padding: 30px 0 0;
}
.modalTech02 #cont02 .photoRight figure {
	width: 477px;
	float: right;
}
.modalTech02 #cont02 .photoRight .txtWrap {
	width: 340px;
	float: left;
	padding: 30px 0 0;
}
.modalTech02 #cont02 .txtWrap .name {
	font-size: 16px;
	 font-family: 'Calibre-Medium';
	 letter-spacing: 0.3em;
	 line-height: 143%;
}
.modalTech02 #cont02 .txtWrap p+p {
	padding: 0;
	font-size: 11px;
}
.modalTech02 #cont02 .txtWrap dl {
	padding: 30px 0 0;
	font-size: 12px;
	letter-spacing: 0.08em;
}
.modalTech02 #cont02 .txtWrap dt {
	width: 110px;
	float: left;
	padding: 5px 0;
}
.modalTech02 #cont02 .txtWrap dd {
	padding: 5px 0 5px 100px;
}
.modalTech02 #cont02 .tmbList {
	width: 440px;
	margin: 0 auto;
}
.modalTech02 #cont02 .tmbList li {
	padding: 0;
}
.modalTech02 #cont02 .tmbList li+li {
	padding: 0 0 0 26px;
}
	@media screen and (max-width: 768px) {
		.modalTech02 #cont02 {
			padding: 0 0 10%;
		}
		.modalTech02 #cont02 .photoLeft,
		.modalTech02 #cont02 .photoRight {
			width: 100%;
			margin: 0 auto;
			padding: 0 0 10%;
		}
		.modalTech02 #cont02 .photoLeft figure,
		.modalTech02 #cont02 .photoRight figure {
			width: 100%;
			float: none;
			padding: 0 0 4%;
		}
		.modalTech02 #cont02 .photoLeft .txtWrap,
		.modalTech02 #cont02 .photoRight .txtWrap {
			width: 100%;
			float: none;
			padding: 0;
		}
		.modalTech02 #cont02 .txtWrap dl {
			padding: 3.7% 0 0;
			font-size: 2.6vw;
		}
		.modalTech02 #cont02 .txtWrap dt {
			width: 9em;
			padding: 3px 0;
		}
		.modalTech02 #cont02 .txtWrap dd {
			padding: 3px 0 3px 7.5em;
		}
		.modalTech02 #cont02 .tmbList li+li {
			padding: 0;
		}
		.modalTech02 #cont02 .tmbList {
			width: 100%;
		}
		.modalTech02 #cont02 .txtWrap .name {
			font-size: 3vw;
		}
		.modalTech02 #cont02 .txtWrap p+p {
			font-size: 2vw;
		}
	}

/* cont03 */
.modalTech02 #cont03 figure {
	padding: 0 0 10px;
}
.modalTech02 #cont03 .tmbList {
	width: 540px;
	margin: 0 auto;
}
	@media screen and (max-width: 768px) {
		.modalTech02 .txtWrap {
			padding: 0 0 5%;
		}
		.modalTech02 #cont03 figure {
			padding: 0 0 1%;
		}
		.modalTech02 #cont03 .tmbList {
			width: 100%;
			margin: 0 auto;
		}
		.modalTech02 #cont03 .tmbList .txtBase {
			margin: 0 0 6%;
		}
	}
/*technology03
-----------------------------*/
.modalTech03 #cont01 .readtxt:after,
.modalTech03 #cont01 .movieWrap:after,
.modalTech03 #cont01 .img:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.modalTech03 #cont01 .readtxt h3 {
	float: left;
	padding: 0 80px 0 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.1em;
}
.modalTech03 #cont01 .readtxt h3 img {
	width: 235px;
	height: 51px;
}
.modalTech03 #cont01 .readtxt .txtWrap {
	float: left;
	width: 585px;
	padding: 0;
}
.modalTech03 #cont01 .movieWrap {
	margin: 90px 0 90px;
}
.modalTech03 #cont01 .movie {
	float: left;
	width: 465px;
	height: 268px;
}
.modalTech03 #cont01 .movie iframe {
	width: 100%;
	height: 100%;
}
.modalTech03 #cont01 .movieWrap .txtWrap {
	width: 430px;
	float: left;
	padding: 45px 0 0 55px;
}
.modalTech03 #cont01 .img {
	width: 954px;
}
.modalTech03 #cont01 .img li {
	width: 33.333%;
	float: left;
}
	@media screen and (max-width: 768px) {
		.modalTech03 #cont01 .readtxt h3 {
			float: none;
			width: 61.6%;
			padding: 0 0 7.4%;
		}
		.modalTech03 #cont01 .readtxt h3 img{
			width: 100%;
			height: 100%;
		}
		.modalTech03 #cont01 .readtxt .txtWrap {
			float: none;
			width: 100%;
		}
		.modalTech03 #cont01 .movieWrap {
			margin: 7.4% 0;
		}
		.modalTech03 #cont01 .movie {
			position: relative;
			width: 100%;
			float: none;
			height: auto;
			padding: 57.78% 0 0;
			margin: 0 0 12%;
		}
		.modalTech03 #cont01 .movie img,
		.modalTech03 #cont01 .movie iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.modalTech03 #cont01 .movieWrap .txtWrap {
			width: 100%;
			float: none;
			padding: 0;
		}
		.modalTech03 #cont01 .img {
			width: 100%;
		}
		.modalTech03 #cont01 .img li {
			width: 100%;
			float:none;
		}
		.modalTech03 #cont01 .img li img {
			width: 100%;
		}
	}
	@media screen and (max-width: 480px) {
		.modalTech03 #cont01 .readtxt h3 {
			font-size: 4vw;
		}
	}
	@media screen and (max-width: 360px) {
		.modalTech03 #cont01 .img li {
			width: 100%;
			float: none;
		}
	}
/*technology04
-----------------------------*/
.modalTech04 #cont01 {
	position: relative;
	padding-bottom: 70px;
}
.modalTech04 #cont01:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.modalTech04 #cont01 .txtWrap {
	width:510px;
	padding: 0;
}
.modalTech04 #cont01 .txtWrap h3 {
	padding: 0 0 50px;
}
.modalTech04 #cont01 .txtWrap h3 img {
	width: 350px;
	height: 82px;
}
.modalTech04 #cont01 .img {
	position: absolute;
	top: 140px;
	right: 0;
	width: 386px;
}
.modalTech04 #cont02 h3 {
	padding: 0 0 50px;
	font-family: 'Calibre-Medium';
	font-size: 18px;
	letter-spacing: 0.2em;
	text-align: center;
}
.modalTech04 #cont02 ul:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.modalTech04 #cont02 li {
	position: relative;
	width: 312px;
	float: left;
	padding: 55px 0;
	text-align: center;
	font-weight: bold;
	font-family: 'Calibre-Medium';
	font-size: 16px;
	line-height: 130%;
	border: 6px solid #fff;
	letter-spacing: 0.2em;
	box-sizing: border-box;
	height: 182px;
}
.modalTech04 #cont02 li+li {
	margin: 0 0 0 7px;
}
.modalTech04 #cont02 li p {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
	@media screen and (max-width: 768px) {
		.modalTech04 #cont01 {
			padding-bottom: 70px;
		}
		.modalTech04 #cont01 .txtWrap {
			width: 100%;
			float: none;
		}
		.modalTech04 #cont01 .txtWrap h3 {
			max-width: 350px;
			width: 64.8%;
			padding: 0 0 7%;
		}
		.modalTech04 #cont01 .txtWrap h3 img {
			width: 100%;
			height: auto;
		}
		.modalTech04 #cont01 .img {
			position: relative;
			top: auto;
			right: auto;
			max-width: 540px;
			width: 100%;
			margin: 0 auto;
			padding: 0 0 5%;
		}
		.modalTech04 #cont02 h3 {
			padding: 0 0 7.4%;
			font-size: 3.4vw;
		}
		.modalTech04 #cont02 li {
			width: 100%;
			float: none;
			padding: 40px 0;
			margin: 0 0 12px 0;
			font-size: 3.2vw;
			height: auto;
		}
		.modalTech04 #cont02 li+li {
			margin: 0 0 12px 0;
		}
		.modalTech04 #cont02 li p {
			position: static;
			-webkit-transform: none;
			-ms-transform: none;
			transform: none;
		}
	}
	@media screen and (max-width: 480px) {
		.modalTech04 #cont01 {
			padding-bottom: 16.6%;
		}
		.modalTech04 #cont02 li {
			padding: 10% 0;
			margin: 0 0 3.8% 0;
			border: 6px solid #fff;
		}
		.modalTech04 #cont02 li+li {
			margin: 0 0 3.8% 0;
		}
	}

/*-----------------------------------------
BASEL WORLD 2018
----------------------------------------- */
.modalCont.modalBasel {
	color: #fff;
	background: #000;
}
.modalCont.modalBasel .modal-inner {
	padding: 0 0 90px;
}
.modalCont.modalBasel .txt-sup {
	font-size: 60%;
	vertical-align: top;
	position: relative;
	top: -0.4em;
	padding: 0 0.25em 0 0;
}
	@media screen and (max-width: 768px) {
		.modalCont.modalBasel .modal-inner {
			max-width: 768px;
			width: 100%;
			padding: 0 0 18.75%;
		}
		.modalCont.modalBasel #cont01,
		.modalCont.modalBasel #cont03 {
			margin: auto;
			max-width: 640px;
			width: 84.375%;
		}
	}

/* limited
----------------------------------------- */
.modalCont.modalBasel .ttlWrap {
	background: url(../jpg/bg_limited-2.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.modalCont.modalBasel .ttlWrap p {
	padding: 0 0 13px;
	font-family: 'Calibre-Regular';
}
.modalCont.modalBasel .ttlWrap p:first-child {
    letter-spacing: 0.4em;
    font-size: 18px;
}
.modalCont.modalBasel .ttlWrap h2 {
	padding: 0 0 15px;
    font-family: 'Calibre-Light';
    letter-spacing: 0.2em;
    line-height: 110%;
}
.modalCont.modalBasel .ttlWrap h2 span {
	font-size: 22px;
	letter-spacing: 0.15em;
}
.modalCont.modalBasel .txt-release {
	padding: 60px 0 0;
	text-align: center;
}
.modalCont.modalBasel .txt-release a {
	font-family: 'Calibre-Regular';
	color: #fff !important;
	letter-spacing: 0.2em;
}
.modalCont.modalBasel .txt-release a span {
	position: relative;
	margin: 0 20px 0 0;
}
.modalCont.modalBasel .txt-release a span:before {
	display: block;
	position: absolute;
	top: 50%;
	right: -17px;
	width: 13px;
	height: 10px;
	content: "";
	background: url(../png/icn_link-2.png) no-repeat  0 0;
	background-size: contain;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
.modalCont.modalBasel .txt-release a span::after {
	position: absolute;
	bottom: -4px;
	left: 50%;
	content: '';
	width: 0;
	height: 1px;
	background: #fff;
	transition: .3s;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.modalCont.modalBasel .txt-release a span:hover::after {
	width: 100%;
}

	@media screen and (max-width: 768px) {
		.modalCont.modalBasel .ttlWrap {
			background: url(../jpg/bg_limited_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.modalCont.modalBasel .ttlWrap .ttl {
			/*top: 29.6875%;*/
			top: 33%;
		}
		.modalCont.modalBasel .ttlWrap h2 {
			font-size: 6.5vw !important;
		}
		.modalCont.modalBasel .ttlWrap h2 span {
			font-size: 3.4vw !important;
		}
		.modalCont.modalBasel .ttlWrap p {
			 padding: 0 0 4%;
			font-size: 2.8vw !important;
		}
		.modalCont.modalBasel .ttlWrap p.jp {
			font-size: 2.4vw !important;
			padding: 0;
		}
		.modalCont.modalBasel .txt-release a span:before {
			width: 11px;
			height: 8px;
			background: url(../png/icn_link_sp.png) no-repeat  0 0;
			background-size: contain;
		}
	}


.modalCont.modalBasel #cont01,
.modalCont.modalBasel #cont02 {
	overflow: hidden;
	line-height: 200%;
	letter-spacing: 0.12em;
}
.modalCont.modalBasel #cont01 h3 {
	float: left;
	width: 312px;
}
.modalCont.modalBasel #cont01 p {
	padding: 0 0 0 390px;
}
	@media screen and (max-width: 768px) {
		.modalCont.modalBasel #cont01 h3 {
			float: none;
			width: 56.48148%;
			padding: 18.75% 0 7.03125%;
		}
		.modalCont.modalBasel #cont01 p {
			padding: 0;
		}
	}
.modalCont.modalBasel #cont02 figure {
	margin: 75px auto 60px;
}
.modalCont.modalBasel #cont02 p {
	float: left;
	width: 470px;
}
.modalCont.modalBasel #cont02 p + p {
	float: right;
	width: 420px;
	font-size: 10px;
	line-height: 170%;
}
	@media screen and (max-width: 768px) {
		.modalCont.modalBasel #cont02 figure img {
			width: 100%;
			height: auto;
		}
		.modalCont.modalBasel #cont02 p,
		.modalCont.modalBasel #cont02 p + p {
			float: none;
			margin: auto;
			max-width: 540px;
			width: 84.375%;
		}
		.modalCont.modalBasel #cont02 p + p {
			margin-top: 7.7125%;
			font-size: 84%;
		}
	}
.modalCont.modalBasel #cont03 {
	text-align: center;
}
.modalCont.modalBasel #cont03 h3 {
	margin: 80px auto 55px;
	font-size: 24px;
    font-family: 'Calibre-Light';
    letter-spacing: 0.38em;
}
.modalCont.modalBasel #cont03 figcaption {
	margin-top: 25px;
	font-size: 16px;
	font-family: 'Calibre-Regular';
    letter-spacing: 0.2em;
    line-height: 120%;
}
.modalCont.modalBasel #cont03 figcaption span {
	font-size: 13px;
    font-family: 'Calibre-Light';
    line-height: 100%;
}
.modalCont.modalBasel #cont03 h4 {
	margin-top: 15px;
	font-size: 14px;
	font-family: 'Calibre-Regular';
    letter-spacing: 0.2em;
}
.modalCont.modalBasel #cont03 h4 br{
	display: none;
}
	@media screen and (max-width: 768px) {
		.modalCont.modalBasel #cont03 h3 {
			margin: 10% auto 8.59375%;
			font-size: 5vw;
		}
		.modalCont.modalBasel #cont03 h4 br{
			display: block;
		}
		.modalCont.modalBasel #cont03 figcaption {
			margin-top: 10%;
			font-size: 4vw;
		}
		.modalCont.modalBasel #cont03 figcaption span {
			font-size: 3vw;
		}
		.modalCont.modalBasel #cont03 h4 {
			margin-top: 10%;
			font-size: 3.5vw;
		}
		.modalCont.modalBasel #cont03 figure  img {
			max-width: 170px;
			width: 70%;
			margin: 0 auto;
		}
		.modalCont.modalBasel .txt-release {
			padding: 18% 0 0;
		}
	}

/* Titanium
----------------------------------------- */

.modalCont.baselTitanium .ttlWrap {
	background: url(../jpg/bg_titanium-2.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.modalCont.baselTitanium {
	background: #2b2b2b;
}
	@media screen and (max-width: 768px) {
		.modalCont.baselTitanium .ttlWrap {
			background: url(../jpg/bg_titanium_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
	}
.modalCont.baselTitanium #cont01 {
	overflow: hidden;
}
.modalCont.baselTitanium #cont01 .ttl {
	float: left;
	width: 428px;
	padding: 0;
}
.modalCont.baselTitanium #cont01 h2 {
	display: block;
	margin-bottom: 34px;
}
.modalCont.baselTitanium #cont01 .txtWrap {
	padding: 0 0 0 460px;
}
.modalCont.baselTitanium #cont01 p {
	padding: 0 0 2em;
}
.modalCont.baselTitanium #cont01 .mov {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin: 0 0 2em;
}
.modalCont.baselTitanium #cont01 .mov iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
	@media screen and (max-width: 768px) {
		.modalCont.baselTitanium #cont01 .ttl {
			position: relative;
			top: 0;
			left: 0;
			float: none;
			width: auto;
			padding: 0;
		}
		.modalCont.baselTitanium #cont01 h2 {
			display: block;
			margin-bottom: 6.48148%;
			width: 45.37037%;
		}
		.modalCont.baselTitanium #cont01 video  {
			width: 100%;
		}
		.modalCont.baselTitanium #cont01 .txtWrap {
			padding: 0;
		}
		.modalCont.baselTitanium #cont01 p {
			padding: 0 0 9.259%;
		}
	}
.modalBasel .swiper-container.noslider {
	overflow: hidden;
	margin: auto;
	text-align:center;
}
.modalBasel .swiper-container.noslider .swiper-wrapper{
	text-align:center;
	width:852px;
	margin-left:auto;
	margin-right:auto;
}
.modalBasel #limited_slider.swiper-container.noslider .swiper-wrapper .swiper-slide:nth-child(2),
.modalBasel #limited_slider.swiper-container.noslider .swiper-wrapper .swiper-slide:nth-child(3){
	display:none;
}
.modalBasel .swiper-container.noslider .swiper-slide {
	display:inline;
	margin: 0 57px;
	list-style: none;
	width:auto;
	text-align:center;
	float:none;

}
.modalBasel #limited_slider.swiper-container.noslider .swiper-wrapper .swiper-slide:nth-child(1){
	margin-left:auto;
	margin-right:auto;
}

.modalBasel .swiper-container.noslider .swiper-slide .swiper-slide-item {
	display: inline;
	width:auto;
}
.modalCont.baselTitanium #cont03 ul {
	overflow: hidden;
	margin: auto;
}
.modalCont.baselTitanium #cont03 li {
	display: inline-block;
	margin: 0 57px;
	list-style: none;
}
.modalCont.baselTitanium #cont03 h4 br{
	display: block;
}
	@media screen and (max-width: 768px) {
		.modalBasel .swiper-container .swiper-slide .swiper-slide-item {
			display: inline-block;
			width:85%;
			margin-left:auto;margin-right:auto;
		}
		.modalBasel .swiper-container.noslider .swiper-slide .swiper-slide-item {
			display: inline-block;
			width:auto;
		}
		.modalCont.modalBasel #cont03 {
			margin: auto;
			max-width: 768px;
			width: 100%;
			overflow: hidden;
		}
		.modalCont.baselTitanium #cont03 ul {
			overflow: hidden;
			width: 150%;
			position: relative;
			margin-left: -25%
		}
		.modalCont.baselTitanium #cont03 li {
			float: left;
			width: 31%;
			margin: 0 1%;
		}
		.modalCont.baselTitanium #cont03 li img {
		}
	}

/*baselNav
-----------------------------*/
.baselNav {
	color: #000;
}
.baselNav li {
	width: 33.333%;
}
.baselNav li:first-child a {
	background: url(../jpg/basel_nav_bg01.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.baselNav li:nth-child(2) a {
	background: url(../jpg/basel_nav_bg02.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.baselNav li:nth-child(3) a {
	background: url(../jpg/basel_nav_bg02.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.baselNav li span img {
	width: 100%;
}
.baselNav li figcaption {
	top: 195px;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
	-webkit-transform: translate(0,0);
	transform: translate(0,0);

	font-size: 24px;
	font-family: 'Calibre-Light';
	text-align: center;
	letter-spacing: 0.2em;
}
.baselNav li figcaption br {
	display: none;
}

	@media screen and (max-width: 768px) {
		.baselNav h3 {
			font-size: 3.2vw;
		}
		.baselNav li {
			width: 50%;
		}
		.baselNav li a {
			height: auto;
			padding: 106.25% 0 0;
		}
		.baselNav li:first-child a {
			background: url(../jpg/basel_nav_bg01_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.baselNav li:nth-child(2) a {
			background: url(../jpg/basel_nav_bg02_sp.jpg) no-repeat 50% 50%;
			background-size: cover;
		}
		.baselNav li a:hover {
			opacity: 1 !important;
		}
		.baselNav li figcaption {
			top: 65.5625%;
			left: 0;
			right: 0;
			margin: auto;
			color: #fff;
			-webkit-transform: translate(0,0);
			transform: translate(0,0);

			font-size: 3vw;
			font-family: 'Calibre-Light';
			text-align: center;
			letter-spacing: 0.2em;
			height: auto;
		}
		.baselNav li figcaption br {
			display: block;
		}
	}
	@media screen and (max-width: 640px) {
		.baselNav h3 {
			padding: 15% 0;
		}
		.baselNav li {
			width: 50%;
		}
	}
	@media screen and (max-width: 480px) {
		.baselNav h3 {
			font-size: 3.2vw;
		}
	}

#modalSide.baselSide .btn_close {
	margin: 0 0 65px;
}
#modalSide.baselSide .side-tmbList {
	padding: 0 0 365px;
}
#titanium_slider_pagination{
	position:relative;
	margin-top:25px;
}
#titanium_slider_pagination .swiper-pagination-bullet{
	background-color:#ffffff;
	border:solid 1px #ffffff;
	opacity:1;
	margin-left:7px;
	margin-right:7px;
}
#titanium_slider_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background-color:#333333;
	border:solid 1px #ffffff;
	opacity:1;
}
/*------------------------------------------
BASEL WORLD 2018 MODAL GALLERY
------------------------------------------*/
.photo {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: -250px;
}
.photoSlider {
	margin: auto;
	text-align: center;
}
.photoSlider li img {
	width: 890px;
}
.slick-arrow {
	display: block;
	width: 32px;
	height: 58px;
}
.photoSlider .slick-prev {
	left: 50%;
	margin-left: -500px;
	background: url(../png/basel_arrow_l.png) no-repeat 0 0;
	z-index: 99;
}
.photoSlider .slick-next {
	left: 50%;
	margin-left: 465px;
	background: url(../png/basel_arrow_r.png) no-repeat 0 0;
	z-index: 50;
}
.slick-prev::before,
.slick-next::before {
    content: '';
}
.photo .btn_close {
	position: absolute;
	top: -50px;
	right: 50%;
	margin-right: -445px;
}
.photo .btn_close a {
	border-bottom: 1px solid #000;
	font-size: 12px;
	font-family: 'Calibre-Regular';
}
	@media screen and (max-width: 768px) {
		.photo {
			margin-top: -23.4375%;
		}
		.slick-arrow {
			width: 18px;
			height: 35px;
		}
		.photoSlider .slick-prev {
			left: 2%;
			margin-left: 0;
			background: url(../png/basel_arrow_l.png) no-repeat 0 0;
			background-size: 70%;
		}
		.photoSlider .slick-next {
			left: 95%;
			margin-left: 0;
			background: url(../png/basel_arrow_r.png) no-repeat 0 0;
			background-size: 70%;
		}
		.photoSlider li img {
			width: 83.59375% !important;
		}
		.photo .btn_close {
			position: absolute;
			top: 0;
			right: 8.203125%;
			margin-top: -60px;
			margin-right: 0;
		}
		.photo .btn_close a {
			border-bottom: 1px solid #000;
			font-size: 14px;
			font-family: 'Calibre-Regular';
		}
	}

/*==================================================
 modalWindow ----- local site
==================================================*/
/* PC
------------------------------------------------------*/
@media (min-width: 769px)  and (max-width: 9999px) {
	#modalRegion {
		height: 100%;
	}
	#modalRegion #mymodalheader {
		display: none !important;
	}
	#modalRegion .modalElement {
		height:100%;
		background:url(../png/region_bg.png) no-repeat 50% 50%;
		z-index: 10;
	}
	#region {
		position:absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* cont-head */
	#region .head .ttl {
		margin: 0 0 110px;
		text-align: center;
		font-family: 'Calibre-Regular';
		font-size: 22px;
		line-height: 1;
		letter-spacing: 0.3em;
	}
	#region .head .txt {
		display: none;
	}

	/* cont-body */
	#region .body {
		position: relative;
		width: 770px;
		margin: 0 auto;
	}
	#region .regionList {
		margin: 0 0 160px;
	}
	#region .regionList:after {
		content: "";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
	#region .regionList p,
	#region .regionList .detailNone span {
		margin: 0 0 20px;
		font-family: 'Calibre-Regular';
		font-size: 15px;
		letter-spacing: 0.3em;
	}
	#region .regionList li {
		width: 215px;
		float: left;
		margin: 0 0 17px;
		font-family: 'Calibre-Regular';
		font-size: 11px;
		letter-spacing: 0.2em;
	}
	#region .regionList li a {
		position: relative;
	}
	#region .regionList li a::after {
		position: absolute;
		bottom: -4px;
		left: 50%;
		content: '';
		width: 0;
		height: 1px;
		background: #000;
		transition: .3s;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	#region .regionList li a:hover::after {
		width: 100%;
	}
	#region .regionList .region03 {
		position: absolute;
		top: 50px;
		left: 215px;
	}
	#region .regionList .region04 {
		position: absolute;
		top: 140px;
		left: 215px;
	}
	#region .regionList .region06 {
		width: 125px;
	}
	#region .txtNote {
		font-size: 10px;
		letter-spacing: 0.15em;
		text-align: center;
	}
	#modalRegion .menu_close_pc {
		position: absolute;
		top: 40px;
		right: 45px;
		font-family: 'Calibre-Regular';
		font-size: 12px;
		letter-spacing: 0.2em;
	}
	#modalRegion .menu_close_pc span {
		position: relative;
	}
	#modalRegion .menu_close_pc span:before {
		position: absolute;
		top: 1.7em;
		left: 0;
		content: "";
		display: inline-block;
		width: 100%;
		height: 1px;
		background: #000;
		transition: 0.3s;
	}
}
@media (min-width: 769px)  and (max-width: 900px) {
	#region .body {
		width: 680px;
	}
	#region .regionList li {
		width: 185px;
		float: left;
		margin: 0 0 17px;
		font-family: 'Calibre-Regular';
		font-size: 11px;
		letter-spacing: 0.2em;
	}
	#region .regionList .region01 {
		width: 175px;
	}
	#region .regionList .region03 {
		left: 175px;
	}
	#region .regionList .region04 {
		position: absolute;
		left: 175px;
	}
}

/* SP
------------------------------------------------------*/
@media screen and (max-width: 768px) {
	#modalRegion #mymodalheader {
		display: block !important;
	}
	#modalRegion .modalElement {
		display: block;
	}
	#region {
		display: block;
		margin-top: 5.3em;
	}

	/* head */
	#region .head {
		position: relative;
		padding: 60% 0 0;
		background: url(../jpg/regions_head_bg.jpg) no-repeat 0 0;
		background-size: cover;
	}
	#region .head_inner {
		position: absolute;
		top: 55%;
		left: 50%;
		width: 100%;
		text-align: center;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	#region .head .ttl {
		margin: 0 0 10.1%;
		font-size: 5.6vw;
		font-family: 'Calibre-Regular';
		letter-spacing: 0.3em;
		line-height: 125%;
	}
	#region .head .txt {
		font-size: 2.5vw;
		line-height: 150%;
		letter-spacing: 0.15em;
	}

	/* regionList */
	#region .regionList .region p,
	#region .regionList .region.detailNone span {
		position: relative;
		cursor:pointer;
		padding: 5.6% 7.8125%;
		font-family: 'Calibre-Regular';
		font-size: 4.37vw;
		letter-spacing: 0.3em;
		border-bottom: 1px solid #f1f2f3;
		box-sizing: border-box;
	}
	#region .regionList .region.detailNone span {
		display: block;
	}
	#region .regionList .region p:after {
		display: block;
		position: absolute;
		right: 5.47%;
		top: 50%;
		content: "";
		width: 3%;
		height: auto;
		padding: 3% 0 0;
		background-image:url(../png/icn_menu_arrow.png);
		background-size: contain;
		margin-top: -1.5%;
	}
	#region .regionList .region p.active:after {
		background-image: url(../png/icn_menu_arrow_open.png);
		background-size: contain;
	}
	#region .regionList .region.detailNone span:after {
		display: block;
		position: absolute;
		right: 5%;
		top: 50%;
		content: "";
		width: 3.4%;
		height: auto;
		padding: 3.4% 0 0;
		background-image: url(../png/icn_menu_arrow_single.png);
		background-size: contain;
		margin-top: -1.7%;
	}
	.countryList{
		display: none;
	}
	#region .regionList .region p.active+.countryList {
		display: block;
	}
	#region .countryList a {
		position: relative;
		padding: 5.6% 10.93%;
		font-family: 'Calibre-Regular';
		font-size: 3.43vw;
		letter-spacing: 0.15em;
		line-height: 100%;
		box-sizing: border-box;
	}
	#region .countryList a {
		display:block;
		background: #f1f2f3;
	}
	#region .countryList li+li {
		border-top: 1px solid #ddd;
	}
	#region .txtNote,
	#modalRegion .menu_close_pc {
		display: none;
	}
}