@charset "UTF-8"; /* CSS Document */



/* CSS Reset
********************************************************************************/
* {
	outline:0;
	outline:none;
	margin:0;
	padding:0;
	zoom:1;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

body {
	outline:0;
	outline:none;
	margin:0;
	padding:0;	
	-webkit-text-size-adjust:100%;	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings:"palt";
}

ol, ul { list-style:none; }

a { 
	cursor:pointer !important;
	user-select:none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:hover {
	opacity:0.5;
}

hr { width:0px !important; height:0px !important; margin:0px !important; padding:0px !important; font-size:0px !important; line-height:0px !important; border:0px !important; overflow:hidden !important; }
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block; }

/* スクロールバーの背景 */
body::-webkit-scrollbar-track-piece {
	background-color:#ffffff;
}



/* Basic
********************************************************************************/
.clrdisp { width:0px !important; height:0px !important; margin:0px !important; padding:0px !important; font-size:0px !important; line-height:0px !important; border:0px !important; overflow:hidden !important; }
.hidden { opacity:0; }
.spView { display:none !important; }
.pcView { display:block !important; }

.cboth { clear:both; }

.clr {
	margin:0px -1px -1px 0px;
	border:0px;
	padding:0px;
	width:1px;
	height:1px;
	font-size:0px;
	line-height:0px;
	overflow:hidden;
	clear:both;
}

.cfix:before, .cfix::after {
	content:"";
	display:table;
}
.cfix::after { clear:both; }
.cfix { zoom:1; } /* for IE6/7 */

img { 
	display:block; font-size:0px; line-height:0px;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-image-rendering:auto;
	image-rendering:auto;

	/* ドラッグ・コピー禁止 */	
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
}

.inactive a,
.inactive a:hover {
	opacity:0.2 !important;
	cursor:default !important;
}

/* transition停止 */
.notransition {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}



/* Text
********************************************************************************/
.tx-left { text-align:left !important; }
.tx-center { text-align:center !important; }
.tx-right { text-align:right !important; }
.tx-vcenter { display:table-cell; vertical-align:middle; }

/*******************/
a { color:#333333; text-decoration:none; }
a img{ outline:0; outline:none; border:0px; }

/*******************/
.tx-wt { color:#ffffff; }
.tx-gry { color:#666666; }
.tx-red { color:#cc0000; }
.tx-org { color:#ff6633; }
.tx-ble { color:#006699; }
.tx-key01 { color:#66cc33; }

/*******************/
.tx-br { display:block; }
.tx-spc{ display:inline !important; }

p {
	text-justify:inter-word;
}

.caps {
	padding-top:10px;
	display:block;
}



/* body
********************************************************************************/
html , body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	/*overflow:hidden;*/
}

body {
	position:relative;
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	color:#333333;
}
body.aboutPage {
	background-color:#ffffff;
}

@media (max-width:600px) {
	.ios body.aboutPage.bottom,
	.ios body.worksPage {
		background-color:#3d60af;
	}
}



/* wrapper
********************************************************************************/
.wrapper {
	width:100%;
	/*height:-webkit-fill-available;*/
	/*height:2000px;*/
	position:static;
	overflow-x:hidden;
}

.shdBg {
	width:100%;
	height:100vh;
	background-image:url("common/imgs/bg_panel.png");
	background-repeat:repeat-x;
	position:fixed;
	top:0px;
	left:0px;
	z-index:50;
	
	/*opacity:0;*/
}



/* bgimg
********************************************************************************/
.bgimg {
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	/*background-color:#3366ff;*/
}

/*
.vegas-container {
	width:100vw !important;
	height:100vh !important;
}
*/

.vegas-container {
	width:100% !important;
	height:100% !important;
}



/* globalHeader
********************************************************************************/
.globalHeader {
	width:100%;
	height:50px;
	margin:0px auto;
	padding:15px 0px;
	background-color:#ffffff;
	position:fixed;
	top:0px;
	left:0px;
	z-index:9800;
	box-sizing:border-box;
}

.globalHeader .logoArea {
	height:20px;
	margin:0px 15px;
}

.globalHeader .logoArea a {
	width:104px;
	height:20px;
	display:block;
	position:relative;
	z-index:100;
}

.globalHeader .logoArea a img {
	width:100%;
	display:block;
}

/* gnaviArea
**************************************/
.gnaviAreaBg {
	width:100%;
	height:67px;
	background-color:#3d60af;
	position:absolute;
	top:0px;
	left:0px;
	opacity:0;

	-webkit-transition:.50s ease-in-out;
	transition:.50s ease-in-out;
}
.worksPage .gnaviAreaBg {
	opacity:1;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.gnaviAreaBg {
		opacity:1 !important;
	}
}

.gnaviArea.pcView {
	width:100%;
	position:absolute;
	top:0px;
	right:0px;
}

.gnaviArea.pcView .gnaviWrap {
	padding:18px 100px 18px 150px;
}

.gnaviArea.pcView .gnaviBody ul {
	text-align:right;
}

.gnaviArea.pcView .gnaviBody ul li {
	padding:0px 20px;
	border-right:1px solid #666666;
	display:inline-block;
	font-size:14px !important;
	font-size:1.4rem !important;
	line-height:13px !important;
	font-weight:bold;
}
.gnaviArea.pcView .gnaviBody ul li:first-child {
	padding-left:0px;
}
.gnaviArea.pcView .gnaviBody ul li:last-child {
	padding-right:0px;
	border:0px;
}

.gnaviArea.pcView .gnaviBody ul li a {
	display:block;
	position:relative;
}
.gnaviArea.pcView .gnaviBody ul li a.active::after {
	width:100%;
	height:5px;
	display:block;
	content:" ";
	background-color:#3d60af;
	position:absolute;
	bottom:-20px;
	left:0px;
}

/* langBtnArea
**************************************/
.langBtnArea {
	width:52px;
	border:2px solid #3a5ca6;
	position:absolute;
	top:12px;
	right:15px;
	z-index:200;
}

.langBtnArea ul {
	padding:0px;
}
.langBtnArea ul::after {
	content:"."; 
	display:block; 
	height:0;
	font-size:0;	
	clear:both; 
	visibility:hidden;
}

.langBtnArea ul li {
	width:50%;
	float:left;
}

.langBtnArea ul li a {
	padding:5px;
	display:block;
	text-align:center;
	color:#3a5ca6;
}

.langBtnArea ul li.active a {
	color:#ffffff;
	background-color:#3a5ca6;
}

.langBtnArea ul li.active a:hover {
	opacity:1 !important;
}



/* header
********************************************************************************/
header {
	width:100%;
	position:fixed;
	top:0px;
	left:0px;
	z-index:300;
}

/* headerBody
**************************************/
.headerBody {
	width:100%;
	/*height:86px;*/
	color:#ffffff;
	position:absolute;
	top:50px;
	left:0px;
}

.headerBody::after {
	content:"."; 
	display:block; 
	height:0;
	font-size:0;	
	clear:both; 
	visibility:hidden;
}

.headerBg {
	width:100%;
	height:150px;
	background-image:url("common/imgs/bg_hdrshd.png");
	background-repeat:repeat-x;
	position:absolute;
	top:50px;
	left:0px;
	opacity:0;
	
	transition: all 1.5s ease-out;
    -webkit-transition: all 1.5s ease-out;
}
.headerBg.show {
	opacity:1;
}

/* logoArea
**************************************/
.headerBody .logoArea {
	width:100%;
	margin:24px 0px;
	padding:0px 14px;
	position:relative;
	z-index:100;
	letter-spacing:0.04em;
	box-sizing:border-box;
}

.headerBody .logoArea span {
	display:inline-block;
}

.headerBody .logoArea a {
	display:inline-block;
	color:#ffffff;
}

.headerBody .logoArea a h1,
.headerBody .logoArea a h2 {
	display:inline-block;
	line-height:1.6rem !important;
}

.headerBody .logoArea a .pageTtl {
	margin-left:10px;
	padding-left:10px;
	border-left:1px solid #ffffff;
}



/* container
********************************************************************************/
.container {
	width:100%;
	overflow:hidden;
}



/* panel
********************************************************************************/
.panel {
	/*min-height:100vh;*/
	position:relative;
	box-sizing:border-box;
	/*border-bottom:1px solid #cccccc;*/
	z-index:100;
	/*overflow:hidden;*/
}
.panel.about,
.panel.gallery,
.panel.works,
.panel.news {
	background-color:rgba(0,55,111,0.6);
}

.panel .cntArea {
	height:100%;
	padding-top:70px;
	box-sizing:border-box;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.ios .panel .cntArea {
		padding-bottom:44px;
	}
}

/* home
**************************************/
.panel.home .linkBg {
	width:100%;
	height:100%;
	background-color:#3d60af;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	opacity:1;
}
.panel.home .linkBg.hide {
	transition: all 1.5s ease-out;
    -webkit-transition: all 1.5s ease-out;
	opacity:0;
}

.panel.home .cntArea {
	width:100%;
	/*height:100%;*/
	margin-top:25px;
	padding-top:0px;
	position:relative;
	/*display:table;*/
	z-index:100;
}

.panel.home .linkArea {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:100;
}

.panel.home .linkArea a {
	width:100%;
	height:100%;
	display:none;
}
.panel.home .linkArea a.active {
	display:block;
}

.panel.home .ttlArea {
	width:70%;
	height:22%;
	max-width:725px;
	color:#ffffff;	
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	line-height:0px;
	color:#ffffff;	
	/*background-color:#33ff99;*/
	z-index:120;
	opacity:0;

	transition:opacity 3.5s ease-out;
    -webkit-transition:opacity 3.5s ease-out;
}
.en .panel.home .ttlArea {
	width:75%;
	max-width:950px;
}
.panel.home .ttlArea.active {
	opacity:1;
}

.panel.home .ttlArea .ttlWrap {
	width:100%;
	height:100%;
}

.panel.home  .ttlArea .ttlWrap:hover .ttlBody {
	opacity:0.5;
	cursor:pointer;
	transition:opacity 0.5s ease-out;
    -webkit-transition:opacity 0.5s ease-out;
}

.panel.home .ttlArea .ttlWrap .linkArea {
	width:100%;
	height:100%;
}

.panel.home .ttlArea .ttlWrap .linkArea a {
	display:none;
}
.panel.home .ttlArea .ttlWrap .linkArea a.active {
	display:block;
}

.panel.home .ttlBody {
	width:100%;
	color:#ffffff;
	z-index:10;	
	position:absolute;
	top:0px;
	left:0px;	

	transition:all 0.5s ease-out;
    -webkit-transition:all 0.5s ease-out;
}
.panel.home .ttlBody:hover {
	opacity:0.5;
	cursor:pointer;
}

.panel.home .ttlBody.hide {
	display:none;
}

.panel.home .ttlBody .mainTtl {
	display:block;
	line-height:0px;
	font-size:0px;
	position:relative;
	overflow:hidden;
}

.panel.home .txtBox {
	width:100%;
	display:block;
	white-space:nowrap;
}

.panel.home .txtBox img {
	width:100%;
	display:block;
	line-height:0px;
	font-size:0px;
	position:relative;
}

.panel.home .ttlBody .lead {
	width:auto;
	margin-top:30px;
	letter-spacing:0.1em;
	position:relative;
	display:inline-block;
	overflow:hidden;
}

.panel.home .ttlBody .lead .txtBox {
	padding-bottom:10px;
}

.panel.home .ttlBody .txtMask {
	width:0px;
	overflow:hidden;
	position:relative;	
}
.panel.home .ttlBody.first.active .txtMask {
	width:100% !important;
	animation:none !important;
}
.panel.home .ttlBody.ttl01 .txtMask {
	/*background-color:#3d60af;*/
}
.panel.home .ttlBody.ttl02 .txtMask {
	/*background-color:#33ff66;*/
}

.panel.home .ttlBody.active .txtMask.moveL {
	animation: mvL 0.5s ease-out 1.5s forwards;
}
.panel.home .ttlBody.active .txtMask.moveR {
	animation: mvR 0.5s ease-out 1s forwards;
}
@keyframes mvL {
	from { width:0px; }
	to { width:100%; }
}
@keyframes mvR {
	from { width:0px; }
	to { width:100%; }
}

.panel.home .ttlBody.inactive .txtMask.moveL {
	animation: remvL 0.5s ease-out 0s forwards;
}
.panel.home .ttlBody.inactive .txtMask.moveR {
	animation: remvR 0.5s ease-out 0s forwards;
}
@keyframes remvL {
	from { width:100%; }
	to { width:0px; }
}
@keyframes remvR {
	from { width:100%; }
	to { width:0px; }
}

/* 小画面設定 : 幅 1100px 以下 */
@media (max-width:700px) {
	.panel.home .ttlBody .lead {
		margin-top:3.5vw;
		font-size:3.5vw !important;
		line-height:3.5vw !important;
	}
}

/* about
**************************************/
.panel.about .cntArea {
	/*height:100%;*/
	max-width:340px;
	margin:0px auto;
	color:#ffffff;
	display:table;
}
.en .panel.about .cntArea {
	max-width:600px;
}

.panel.about .cntArea .cntBody {
	vertical-align:middle;
	display:table-cell;
}

.panel.about .cntArea p {
	padding-bottom:30px;
	letter-spacing:0.1em;
	transform:translateY(40px);
    opacity: 0;	
	display:block;
}
.panel.about .cntArea p.active {
    opacity: 1;
	transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
	transform:translateY(0px);
}

.panel.about .cntArea p:last-child {
	padding-bottom:0px !important;
}

/* 小画面設定 : 高さ 850px 以下 幅 600px 以上 */
@media (max-height: 850px) and (min-width:600px) {
	.panel.about .cntArea p {
		padding-bottom:10px;
		font-size:12px !important;
		line-height:24px !important;
	}
	
	.en .panel.about .cntArea {
		max-width:500px;
	}	
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.panel.about .cntArea p {
		padding-bottom:10px;
		font-size:10px !important;
		line-height:20px !important;
	}
	
	.en .panel.about .cntArea {
		max-width:260px;
	}
	
	.en .panel.about .cntArea p {
		font-size:8px !important;
		line-height:16px !important;
	}
	
}

/* gallery
**************************************/
.panel.gallery .cntArea {
	width:79%;
	max-width:885px;
	margin:0px auto;
	padding:150px 0px 100px 0px;
	position:relative;
}

.panel.gallery .cntArea .listWrap {
	position:relative;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
	-webkit-transform:translateY(-50%) translateX(-50%);
}

.panel.gallery .cntArea .bannerList {
	margin:0px 7.5%;
	padding:50px 0px;
}
.panel.gallery .cntArea .bannerList::after {
	content:" ";
	display:block;
	height:0;
	font-size:0;
	clear:both;
	visibility:hidden;
}

.panel.gallery .cntArea .bannerList li {
	width:50%;
	height:50%;
	float:left;
	display:block;
}

.panel.gallery .cntArea .bannerList li a {
	display:block;
	color:#ffffff;
	position:relative;
	-webkit-box-shadow:10px 10px 15px rgba(0,0,0,0.2);
	box-shadow:10px 10px 15px  rgba(0,0,0,0.2);
}
.panel.gallery .cntArea .bannerList li:first-child a {
	margin-right:20px;
}
.panel.gallery .cntArea .bannerList li:last-child a {
	margin-left:20px;
}

.panel.gallery .cntArea .bannerList li a:hover,
.panel.gallery .cntArea .bannerList li a.active {
    opacity:1 !important;
}

.panel.gallery .cntArea .bannerList li .imgBox {
	width:100%;
	height:100%;
	overflow:hidden;
}

.panel.gallery .cntArea .bannerList li .imgBox img {
	width:100%;
	display:block;
	transition-duration:0.5s;
}
.panel.gallery .cntArea .bannerList li a:hover .imgBox img {
	transform:scale(1.3);
}

.panel.gallery .cntArea .bannerList li a .txtBox {
	width:100%;
	padding:0px 50px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
	-webkit-transform:translateY(-50%) translateX(-50%);
	z-index:20;
	box-sizing:border-box;
}
.panel.gallery .cntArea .bannerList li a .imgBox::after {
	content:" ";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background-color:rgba(61, 96, 175, 1);
	border:20px solid rgba(255, 255, 255, 0.2);
	mix-blend-mode: multiply;
	z-index:10;
	box-sizing:border-box;
	transition-duration:0.5s;
}
.panel.gallery .cntArea .bannerList li a:hover .imgBox::after {
	border:0px solid rgba(255, 255, 255, 0.2);
}

.panel.gallery .cntArea .bannerList li .txtBox h3,
.panel.gallery .cntArea .bannerList li .txtBox p {
	display:block;
	text-align:center;
}

.panel.gallery .cntArea .bannerList li .txtBox h3 {
	width:100%;
	height:30px;
	margin-top:10px;
	margin-bottom:30px;
	padding-bottom:40px;
	border-bottom:1px solid #ffffff;
}

.panel.gallery .cntArea .bannerList li .txtBox h3 img {
	height:100%;
	display:inline-block;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.panel.gallery .cntArea .bannerList {
		padding:0px;
	}
	
	.panel.gallery .cntArea .bannerList li {
		width:100%;
		float:none;
	}
	
	.panel.gallery .cntArea .bannerList li:first-child a {
		margin-right:0px;
		margin-bottom:20px;
	}
	.panel.gallery .cntArea .bannerList li:last-child a {
		margin-left:0px;
	}
	
	.panel.gallery .cntArea .bannerList li a .txtBox {
		padding:0px 35px;
	}
	
	.panel.gallery .cntArea .bannerList li .txtBox h3 {
		height:20px;
		margin-top:7px;
		margin-bottom:12px;
		padding-bottom:20px;
	}
	
	.panel.gallery .cntArea .bannerList li a .imgBox::after {
		border:15px solid rgba(255, 255, 255, 0.2);
	}
}

/* works
**************************************/
.panel.works .cntArea {
	width:79%;
	min-height:100vh;
	max-width:885px;
	margin:0px auto;
	padding:160px 0px 100px 0px;
	position:relative;
}

.panel.works .cntArea .worksList::after {
	content:"."; 
	display:block; 
	height:0;
	font-size:0;	
	clear:both; 
	visibility:hidden;
}

.panel.works .cntArea .worksList li {
	width:33.333%;
	min-height:330px;
	float:left;
	display:block;
	/*background-color:#33cc66;*/
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.panel.works .cntArea .worksList li {
		width:50%;
	}
}

.panel.works .cntArea .worksList li a,
.panel.works .cntArea .worksList li .dimImg {
	margin:25px 0px;
	padding:0px 15%;
	display:block;
	color:#ffffff;
}

.panel.works .cntArea .worksList li a.active,
.panel.works .cntArea .worksList li .dimImg.active {
    opacity:1 !important;
}


.panel.works .cntArea .worksList li .imgBox {	
	border-radius:120px;
	overflow:hidden;
	-webkit-box-shadow:2px 2px 2px 2px rgba(0,0,0,0.3);
	box-shadow:2px 2px 2px 2px rgba(0,0,0,0.3);
	
	/* safari対策 */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	position:relative;
	z-index:1;
}

.panel.works .cntArea .worksList li .dimImg .imgBox {
	border:2px solid rgba(255,255,255,0.3);
	/*background-color:rgba(255,255,255,0.2);*/
	-webkit-box-shadow:none;
	box-shadow:none;
	background-image:url("common/imgs/bg_dimimg.png");
	background-repeat:no-repeat;
	background-size:contain;	
	box-sizing:border-box;
}

.panel.works .cntArea .worksList li .imgBox img {
	width:100%;
	display:block;
	transition-duration:0.5s;
}

.panel.works .cntArea .worksList li a:hover .imgBox img {
	transform:scale(1.3);
	transition-duration: 0.5s;
}

.panel.works .cntArea .worksList li h3 {
	padding-top:20px;
	display:block;
	text-align:center;
	-webkit-text-shadow:#333333 2px 2px 10px;
	text-shadow:#333333 2px 2px 10px;
}

.headlineArea {
	width:100%;
	margin-bottom:50px;
	padding:0px;
	box-sizing:border-box;
	border:0px;
	border-bottom:2px solid rgba(255, 255, 255, 0.5);
	position:relative;
}

.headlineArea .pageTitle {
	padding:20px 10px;
	color:#ffffff;
}

.searchMenu {
	min-width:250px;
	box-sizing:border-box;
	border:0px;
	display:block;
	position:absolute;
	right:0px;
	top:0px;
}
.searchMenu::before {
	width:1px;
	height:30px;
	margin-top:-15px;
	content:" ";
	display:block;
	position:absolute;
	left:0px;
	top:50%;
	z-index:0;
	border-left:1px solid rgba(255, 255, 255, 0.5);
}
.searchMenu::after {
	width:40px;
	height:30px;
	margin-top:-15px;
	content:" ";
	display:block;
	position:absolute;
	right:0px;
	top:50%;
	z-index:0;
	border-left:1px solid rgba(255, 255, 255, 0.5);
	border-right:1px solid rgba(255, 255, 255, 0.5);
	background-image:url("common/imgs/ico_arw_down.png");
	background-repeat:no-repeat;
	background-size:14px 9px;
	background-position:center center;
}

.searchMenu select {
	width:100%;
	padding:20px 60px 20px 20px;
	display:inline-block;
	border:0px;
	font-size:14px;
	font-size:1.4rem;
	line-height:14px;
	line-height:1.4rem;
	font-weight:bold;
	color:#ffffff;
	text-align:left;
	-webkit-appearance:none;
	appearance:none;
	background-color:transparent;
	cursor:pointer;
	position:relative;
	z-index:10;
}
.searchMenu select option {
	color:#333333;
}

/*
.searchMenu {
	width:100%;
	margin-bottom:50px;
	padding-bottom:20px;
	border-bottom:2px solid rgba(255, 255, 255, 0.5);
	text-align:center;
}

.searchMenu li {
	display:inline-block;
	padding:0px 20px;
	cursor:pointer;
	border-right:1px solid #ffffff;
	font-size:14px;
	font-size:1.4rem;
	line-height:14px;
	line-height:1.4rem;
	font-weight:bold;
	color:#ffffff;
}
.searchMenu li:last-child {
	border:0px;
}

.searchMenu li.is-active span {
	display:block;
	position:relative;
}
.searchMenu li.is-active span::after {
	content:" ";
	display:block;
	width:100%;
	height:5px;
	position:absolute;
	bottom:-24px;
	left:0px;
	border-bottom:5px solid #ffffff;
}
*/

/* ---- .element-item ---- */
.element-item {
	opacity:0;
}

.is-hide {
	display: none !important;
}

/* ---- animation ---- */
visible {
	opacity:0;
	transform:translateY(50px);
}

.effect {
	animation-name:fadeUpAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
	opacity: 0;
}
	
@keyframes fadeUpAnime{
	from {
		opacity:0;
		transform:translateY(50px);
	} to {
		opacity:1;
		transform:translateY(0);
	}
}

/* news
**************************************/
.panel.news .cntArea {
	width:79%;
	/*height:100%;*/
	max-width:885px;
	margin:0px auto;
	padding-bottom:94px;
	display:table;	
}

.panel.news .cntArea .listWrap {
	vertical-align:middle;
	display:table-cell;
}

.panel.news .textList {
	margin:100px 7.5%;
	border-top:2px solid  rgba(255,255,255,0.5);
}

.panel.news .textList li {
	padding:15px 0px;
	border-bottom:2px solid  rgba(255,255,255,0.5);
	opacity: 0;
	transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
}
.panel.news .textList li.active {
    opacity: 1;
}

.panel.news .textList a {
	display:inline-block;
	position:relative;
	color:#ffffff;
}

.panel.news .textList a .date,
.panel.news .textList a h3 {
	display:block;
}

.panel.news .textList a .date {
	width:100px;
	position:absolute;
	top:0px;
	left:0px;
}
.panel.news .textList a h3 {
	padding-left:120px;
}


/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.panel.news .textList a .date,
	.panel.news .textList a h3 {
		font-size:12px !important;
		line-height:24px !important;
	}
	
	.panel.news .textList a .date {
		width:100%;
		position:relative;
	}
	.panel.news .textList a h3 {
		padding-left:0px;
	}
}

/* naviArw
**************************************/
.naviArw {
	width:80px;
	height:80px;
	margin-top:-15px;
	position:fixed;
	top:50%;
	right:100px;
	z-index:200;
	display:none;
}
.naviArw.active {
	display:block;
}

/*
.naviArw.pcView.active {
	display:block !important;
}
.naviArw.spView.active {
	display:none !important;
}
*/

.naviArw a {
	width:100px;
	height:100px;
	display:block;
	/*border:2px solid rgba(255,255,255,0.5);*/
	background-image:url("common/imgs/img_morebtn.png");
	background-repeat:no-repeat;
	background-size:80px 80px;
	background-color:rgba(255,255,255,1);
	background-position:center center;
	-webkit-border-radius:50px;
	border-radius:50px;
	box-sizing:border-box;
}

/* pagination
**************************************/
.pagination {
	width:36px;
	margin-top:25px;
	position:fixed;
	left:37px;
	top:50%;
	transform:translateY(-50%);
	z-index:200;	
	/*background-color: #33cc66;*/
}

.pagination a {
	height:36px;
	color:#ffffff;
	position:relative;
	display:block;
	cursor:pointer;
}
.pagination a.active::after {
	opacity:1;
}
.pagination a .hover-text {
	position:absolute;
	left:35px;
	top:11px;
	opacity:0;
	-webkit-transition:opacity 0.5s ease;
	transition:opacity 0.5s ease;
}
.pagination a.active .hover-text,
.pagination a:hover .hover-text {
	opacity:1;
}

.pagination a::after {
	width:6px;
	height:6px;
	display:block;
	border-radius:50%;
	content:'';
	background-color:#ffffff;
	opacity:0.5;
	position:absolute;
	top:15px;
	left:15px;
	bottom:0px;
}




/* contents（secondpage）
********************************************************************************/
.contents {
	width:100%;
	/*margin:190px auto 0px auto;*/
	margin:130px auto 0px auto;
	padding:0px;
	overflow:hidden;
	/*background-color:#33ff66;*/
	box-sizing:border-box;
	
	position:relative;
	z-index:1;
	
}
.aboutPage .contents {
	margin:75px auto 0px auto;
	padding-bottom:75px;
}
.aboutPage.bottom .contents {
	background-color:#ffffff;
}
.worksPage .contents {
	padding-bottom:80px;
	background-color:#ffffff;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.contents,
	.aboutPage .contents {
		margin:150px auto 0px auto;
		padding-bottom:50px;
	}
}

.contentsBg {
	width:100%;
	height:300px;
	background-color:#3d60af;
	position:fixed;
	top:0px;
	left:0px;
	-webkit-transition:0.5s ease-in-out;
	transition:0.5s ease-in-out;
}

.contentsBg.hidden {
	height:115px;
	opacity:1;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.contentsBg {
		height:86px;
	}
	.worksPage .contentsBg,
	.contentsBg.show {
		height:210px;
	}
}

/* pageTitle
**************************************/
.contents .pageTitle {
	padding:35px 15% 49px 15%;
	position:relative;
	text-align:center;
	color:#ffffff;
	background-color:#3d60af;
}

.contents .pageTitle h2 {
	padding-bottom:10px;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.contents .pageTitle {
		margin-bottom:20px;
		padding:20px 50px;
	}
	
	.contents .pageTitle h2 {
		padding-bottom:5px;
	}
}

/* nextBackBtn
**************************************/
.nextBtn,
.backBtn {
	position:absolute;
	top:50%;
}
.nextBtn {
	right:24px;
}
.backBtn {
	left:24px;
}

.nextBtn a,
.backBtn a {
	width:40px;
	height:40px;
	margin-top:-22px;
	display:block;
	background-repeat:no-repeat;
	background-size:20px 34px;
	background-position:center center;
}
.nextBtn a {
	background-image:url("common/imgs/ico_arw_right.png");
}
.backBtn a {
	background-image:url("common/imgs/ico_arw_left.png");
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.nextBtn {
		right:12px;
	}
	.backBtn {
		left:12px;
	}
	
	.nextBtn a,
	.backBtn a {
		width:25px;
		height:25px;
		margin-top:-19px;
		background-size:14px 25px;
	}
}

/* contBoxArea
**************************************/
.contents .contBoxArea {
	padding:80px 15%;
	/*padding-bottom:110px;*/
	position:relative;
	z-index:10;
}
.aboutPage .contents .contBoxArea {
	padding:110px 15%;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.contents .contBoxArea,
	.aboutPage .contents .contBoxArea {
		padding:0px 20px;
		padding-bottom:50px !important;		
		text-align:center;		
	}	
	.worksPage .contents .contBoxArea {
		padding:25px 20px;
	}
}

.contents .contBoxArea .copyArea {
	width:280px;	
	position:absolute;
	top:150px;
	/*left:140px;*/
	left:108px;
	opacity:1;
	color:#9eafd6;
	letter-spacing:0.1em;
	z-index:10;
}
.aboutPage .contents .contBoxArea.first .copyArea {
	opacity:1 !important;
}
.aboutPage.en .contents .contBoxArea .copyArea {
	left:50px;
	width:350px;
}
.aboutPage.en .contents .contBoxArea .copyArea h3 {
	font-size:14px !important;
	font-size:1.4rem !important;
	line-height:28px !important;
	line-height:2.8rem !important;
}
.contents .contBoxArea.show .copyArea {
	color:#ffffff;
}
.contents .contBoxArea.show .copyArea.tx-key {
	color:#333333;
}

.worksPage .contents .contBoxArea .copyArea {
	width:100%;
	max-width:900px;
	margin:0px auto;
	padding:80px 100px 0px 100px;
	position:relative;
	top:auto;
	left:auto;
	color:#333333 !important;
	box-sizing:border-box;
}

.worksPage .contents .contBoxArea .copyArea h3 {
	padding-bottom:20px;
	text-align:center;
	display:block;
}

.worksPage .contents .contBoxArea .copyArea p {
	padding-bottom:10px;
	letter-spacing:normal;
}
.worksPage .contents .contBoxArea .copyArea p:last-child {
	padding:0px;
}

.worksPage .contents .contBoxArea .copyArea .specBox {
	padding-top:20px;
	letter-spacing:0px;
}

.worksPage .contents .contBoxArea .copyArea .specBox dl {
	display:flex;
	flex-wrap:wrap;
	width:100%;
}

.worksPage .contents .contBoxArea .copyArea .specBox dt {
	width:40%;
	padding:20px;
	border-bottom:1px solid #dddddd;
	border-right:5px solid #ffffff;
	font-weight:bold;
	box-sizing:border-box;
}

.worksPage .contents .contBoxArea .copyArea .specBox dd {
	width:60%;
	padding:20px;
	border-bottom:1px solid #dddddd;
	box-sizing:border-box;
}

.worksPage .contents .contBoxArea .copyArea .specBox dl dt:first-child {
	border-top:1px solid #dddddd;
}

.worksPage .contents .contBoxArea .copyArea .specBox dl dt:first-child + dd {
	border-top:1px solid #dddddd;
}

.worksPage .contents .contBoxArea .copyArea .queBanner {
	width:100%;
	margin-top:80px;
}

.worksPage .contents .contBoxArea .copyArea .queBanner a {
	width:100%;
	padding:40px;
	padding-right:80px;
	border:2px solid #445fa9;
	box-sizing:border-box;
	background-color:rgba(68,65,169,0.05);
	background-image:url("common/imgs/ico_arw_btn_right_bl.png");
	background-repeat:no-repeat;
	background-size:9px 14px;
	background-position:right 40px center;
	display:block;
	text-decoration:none;
}

.worksPage .contents .contBoxArea .copyArea .queBanner .txtBox {
	padding-left:70px;
	margin-bottom:10px;
	background-image:url("common/imgs/ico_comment.png");
	background-repeat:no-repeat;
	background-size:50px 50px;
	background-position:left center;
}

.worksPage .contents .contBoxArea .copyArea .queBanner .txtBox h3 {
	padding-bottom:15px;
	text-align:left;
	letter-spacing:0;
	color:#445fa9;
}

.worksPage .contents .contBoxArea .copyArea .queBanner .txtBox p {
	color:#333333;
}

.worksPage .contents .contBoxArea .copyArea .columnBox {
	width:100%;
	margin-top:80px;
	padding:35px;
	border:2px solid #dddddd;
	box-sizing:border-box;
}

.worksPage .contents .contBoxArea .copyArea .columnBox .inner {
	position:relative;
}

.worksPage .contents .contBoxArea .copyArea .columnBox .imgBox {
	width:27%;
	border-radius:0px;
	box-shadow:none;
	position:absolute;
	top:0px;
	left:0px;
}

.worksPage .contents .contBoxArea .copyArea .columnBox .txtBox {
	margin-left:27%;
	padding-left:30px;
}

.worksPage .contents .contBoxArea .copyArea .columnBox .txtBox h4 {
	padding-bottom:10px;
	display:block;
}

.contents .contBoxArea.active .copyArea.tx-key {
	color:#333333;
}

.contents .contBoxArea .copyArea .copyImgBox {
	width:80%;
	max-width:380px;
	margin:30px 0px 10px 0px;
	display:block;
    position:relative;
    z-index:1;
	box-sizing:border-box;

	background-image:url("jp/about/imgs/img_ttl_main_01_key_pc.png");
	background-repeat:no-repeat;
	background-size:contain;	
	box-sizing:border-box;
}
.en .contents .contBoxArea .copyArea .copyImgBox {
	width:81%;
	margin:25px 0px 10px 0px;
	background-image:url("en/about/imgs/img_ttl_main_01_key_pc.png");
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.contents .contBoxArea .copyArea {
		width:305px;
		margin-top:30px;
		padding-left:10px;
		text-align:left;		
		position:relative;
		top:auto !important;
		left:auto !important;
		opacity:1 !important;
		color:#ffffff !important;
		display:inline-block;
		box-sizing:border-box;
	}
	.en .contents .contBoxArea .copyArea {
		padding-left:0px;
	}
	.aboutPage.en .contents .contBoxArea .copyArea {
		width:100%;
	}
	.contents .contBoxArea .copyArea .copyImgBox {
		background-image:url("jp/about/imgs/img_ttl_main_01_key_sp.png");
	}
	.en .contents .contBoxArea .copyArea .copyImgBox {
		background-image:url("en/about/imgs/img_ttl_main_01_key_sp.png");
	}
	.contents .contBoxArea .copyArea h3 {
		/*font-weight:700 !important;*/
		color:#333333 !important;
	}
}

/* タブレット設定 */
.ipad .aboutPage .contents .contBoxArea,
.android .aboutPage .contents .contBoxArea {
	padding-bottom:50px;
}

.ipad .aboutPage .contents .contBoxArea .copyArea,
.android .aboutPage .contents .contBoxArea .copyArea {
	width:305px;
	margin-top:30px;
	padding-left:10px;
	text-align:left;		
	position:relative;
	top:auto !important;
	left:auto !important;
	opacity:1 !important;
	color:#ffffff !important;
	display:inline-block;
	box-sizing:border-box;
}
.ipad .aboutPage.en .contents .contBoxArea .copyArea,
.android .aboutPage.en .contents .contBoxArea .copyArea {
	width:100%;
	padding-left:0px;
}

.ipad .aboutPage .contents .contBoxArea .copyArea .copyImgBox,
.android .aboutPage .contents .contBoxArea .copyArea .copyImgBox {
	background-image:url("jp/about/imgs/img_ttl_main_01_key_sp.png");
}
.ipad .aboutPage.en .contents .contBoxArea .copyArea .copyImgBox,
.android .aboutPage.en .contents .contBoxArea .copyArea .copyImgBox {
	background-image:url("en/about/imgs/img_ttl_main_01_key_sp.png");
}

.ipad .aboutPage .contents .contBoxArea .copyArea h3,
.android .aboutPage .contents .contBoxArea .copyArea h3 {
	/*font-weight:700 !important;*/
	color:#333333 !important;
}

.contents .contBoxArea.hide .copyArea .copyImgBox img {
	width:100%;
	display:block;
	opacity:0;
}
.contents .contBoxArea.show .copyArea .copyImgBox img {
	opacity:1;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.contents .contBoxArea .copyArea .copyImgBox img {
		/*opacity:0 !important;*/
		opacity:1 !important;
	}
}

/* タブレット設定 */
.ipad .aboutPage .contents .contBoxArea .copyArea .copyImgBox img,
.android .aboutPage .contents .contBoxArea .copyArea .copyImgBox img {		
	opacity:0 !important;
}

.contents .contBoxArea .ImgArea {
	max-width:900px;
	margin:0px auto;
}

.contents .contBoxArea .ImgBody {
	width:57.4%;
	margin:0px auto;
	z-index:1;

	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
}
.contents .contBoxArea.show .ImgBody,
.contents .contBoxArea.full .ImgBody {
	width:100%;
}

.contents .contBoxArea .imgBox {
	overflow:hidden;
	-webkit-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow:0px 0px 18px 0px rgba(0, 0, 0, 0.3);
	box-shadow:0px 0px 18px 0px rgba(0, 0, 0, 0.3);
	line-height:0px;
	font-size:0px;
	position:relative;
	z-index:1;
	
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.contents .contBoxArea .ImgArea.model .imgBox {
	height:500px;
}

model-viewer {
	width:100%;
	height:500px;
	--poster-color: transparent;
	position:relative;
}

.ar-button {
	width:110px;
	height:30px;
	background-color:#ffffff;
	box-shadow:0px 0px 18px 0px rgb(0, 0, 0, 0.2);
	border-radius:15px;
	background-image:url("common/imgs/ico_arbtn.png");
	background-repeat:no-repeat;
	background-size:78px 20px;
	background-position:center center;
	position:absolute;
	left:20px;
	bottom:20px;
	display:block;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.contents .contBoxArea .ImgArea {
		max-width:none;
		margin:0px;
	}
	.contents .contBoxArea .ImgBody {
		width:100% !important;
	}
	.contents .contBoxArea .imgBox {
		width:100% !important;
	}
	.contents .contBoxArea .ImgArea.model .imgBox {
		height:350px;
	}
	model-viewer {
		height:350px;
	}
}

/* タブレット設定 */
.ipad .contents .contBoxArea .ImgArea,
.android .contents .contBoxArea .ImgArea {
	max-width:none;
	margin:0px;
}
.ipad .contents .contBoxArea .ImgBody,
.android .contents .contBoxArea .ImgBody {
	width:100% !important;
}
.ipad .contents .contBoxArea .imgBox,
.android .contents .contBoxArea .imgBox {
	width:100% !important;
}

.contents .contBoxArea img {
	width:100%;
	display:block;
	position:relative;
	z-index:-1;
}

/* contBoxArea（message）
**************************************/
.contents .contBoxArea.message {
	margin-top:20px;
	padding-top:55px;
	padding-bottom:25px;
	position:relative;	
	text-align:center;
	background-color:#ffffff;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.contents .contBoxArea.message {
		margin-top:0px;
		padding-top:0px;
		padding-bottom:30px;
	}
}

.contents .contBoxArea.message .textArea {
	/*width:50%;*/
	margin:0px auto;
	display:inline-block;
}

/* 小画面設定 : 幅 600px 以下 */
@media (max-width:600px) {
	.contents .contBoxArea.message .textArea {
		width:305px;
	}
	.en .contents .contBoxArea.message .textArea {
		width:100%;
	}
}

.contents .contBoxArea.message .textArea p {
	display:block;
	margin-left:20px;
	margin-bottom:30px;
	text-align:left;
	letter-spacing:0.1em;

	transition: all 3s ease-out;
    -webkit-transition: all 3s ease-out;
}
.en .contents .contBoxArea.message .textArea p {
	margin-left:0px;
}
.contents .contBoxArea.message .textArea p.hide {
	/* Hidden state */
	color:#9eafd6;
}
.contents .contBoxArea.message .textArea p.show {
	/* Visible state */
	color:#333333;
}

/* cntBtnArea
**************************************/
.cntBtnArea {
	padding:0px 15% 60px 15%;
}

.cntBtnArea .cntBtn {
	width:350px;
	margin:0px auto;
}

.cntBtnArea .cntBtn a {
	padding:30px;
	display:block;
	text-align:center;
	color:#ffffff;
	/*border:2px solid #3a5ca6;*/
	background-color:#3d60af;
}

.cntBtnArea .cntBtn a span {
	background-image:url("common/imgs/ico_arw_btn_right.gif");
	background-repeat:no-repeat;
	background-size:9px 14px;
	background-position:center right;
	display:block;
	letter-spacing:0.1em;
}

/* modalArea
**************************************/
.modalArea {
	display:none;
	position:fixed;
	z-index:20000;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

.modalArea .ar-button {
	display:none;
}

.modalBg {
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.9);
	position:relative;
}

.modalWrapper {
	width:100%;
	height:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.modalContents {
	width:100%;
	height:100%;
}

.modalContents model-viewer {
	width:100%;
	height:100vh;
}

.ImgBox {
	position:relative;	
}

.openModal {
	width:40px;
	height:40px;
	display:block;
	outline:none;
	cursor:zoom-in;
	border-radius:0px 10px 0px 10px;
	background-image:url("common/imgs/ico_zoom.png");
	background-repeat:no-repeat;
	background-size:20px 20px;
	background-position:center center;
	background-color:#3d60af;
	color:#ffffff;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	line-height:40px;
	position:absolute;
	top:0px;
	right:0px;
	z-index:200;
}

.closeModal {
	width:45px;
	height:45px;
	position:absolute;
	top:20px;
	right:20px;
	cursor:pointer;
	z-index:100;
}

.closeModal img {
	padding:5px;
	display:block;
}


/* footer
********************************************************************************/
footer {
	width:100%;
	color:#ffffff;
	opacity:1;
}
.topPage footer {
	position:absolute;
	left:0px;
	bottom:0px;
}

footer.openNavi {
	z-index:100;
}

/* footerBody
**************************************/
.footerBody {
	width:100%;
	padding:25px 15px;
	background-color:#3d60af;
	box-sizing:border-box;
	position:relative;
}

.footerBody .logoArea {
	width:95px;
	height:17px;
	padding-bottom:15px;
}

.footerBody .logoArea a {
	display:block;
}

.footerBody .logoArea img {
	width:100%;
	height:100%;
	display:block;
}

.copyright {
	display:block;
}

/* pagetopBtn
**************************************/
.pagetopBtn {
	width:50px;
	height:70px;
	box-sizing:border-box;
	position:fixed;
	right:0px;
	bottom:40px;
	z-index:100;
}

.pagetopBtn a {
	width:50px;
	height:70px;
	background-image:url("common/imgs/ico_page_top.png");
	background-repeat:no-repeat;
	background-size:18px 12px;
	background-position:bottom 44px center;
	background-color:rgba(61,96,175,0.9);
	display:block;
	color:#ffffff;
	position:relative;
}

.pagetopBtn a span.xsml.oneline {
	width:30px;
	display:block;
	text-align:center;
	line-height:1.2rem !important;
	position:absolute;
	left:10px;
	bottom:12px;
}

/* queBtn
**************************************/
.queBtn {
	width:auto;
	box-sizing:border-box;
	position:fixed;
	right:0px;
	bottom:70px;
	z-index:100;
	transform:rotate(90deg);
	transform-origin:top right;
}

.queBtn a {
	width:auto;
	padding:11px 20px 14px 20px;
	background-color:rgba(31,48,85,1);
	display:block;
	color:#ffffff;
	position:relative;
}
.queBtn.wt a {
	background-color:rgba(255,255,255,1);
	color:#3D61AB;
}

.queBtn a span {
	width:auto;
	height:25px;
	padding-left:30px;
	font-size:14px;
	line-height:25px;
	background-image:url("common/imgs/ico_comment_wt.png");
	background-repeat:no-repeat;
	background-size:25px 25px;
	background-position:left 0px center;
	display:inline-block;
	text-align:left;
}
.queBtn.wt a span {
	background-image:url("common/imgs/ico_comment.png");
}


/* IEハック
********************************************************************************/
/*IE ALL*/
.ie {

}


/* firefoxハック
********************************************************************************/
.firefox {

}


/* chromeハック
********************************************************************************/
.chrome {

}


/* safariハック
********************************************************************************/
.safari {

}

/* HIOKI追加 211105
********************************************************************************/
.contBoxArea .copyArea a{
	color: rgb(61, 96, 175);
    text-decoration: underline;
}