@charset "utf-8";


/*-------------------------------------------------------
 スクロールボタン
--------------------------------------------------------*/
	#scroll-btn {
		position:absolute;
		bottom:20px;
		left:0;
		right:0;
		width:42px;
		margin:auto;
		z-index:999;
	}
	

/*-------------------------------------------------------
 メインコピー
--------------------------------------------------------*/
	#main-copy {
		display:table;
		position: relative;
		width:100%;
		background-color:rgba(0, 0, 0, 0.7);
		z-index:10;
	}
	#main-copy2 {
		background-color:rgba(0, 0, 0, 0);
		z-index:-1;
	}
	.main-copy-txt {
		width:100%;
		display:table-cell;
		vertical-align:middle;
	}
	@media screen and (max-width: 768px){
	#main-copy {
		padding-top: 78px;
		background-image:url(../img/bg_sp01.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size:cover;
	}
	.firefox #main-copy,
	.ie #main-copy {
		padding-top: 40%;
		display:block;
	}
	.firefox .main-copy-txt,
	.ie .main-copy-txt {
		display:block;
	}
	#main-copy2 {
		display:none !important;
	}
	}
	@media screen and (orientation: landscape){
	.ipad .main-copy,
	.androidtablet .main-copy {
		position: static;
		padding-top: 78px;
		background-image:url(../img/bg_sp01.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size:cover;
	}	
	.ipad #main-copy2,
	.androidtablet #main-copy2 {
		display:none !important;
	}
	}

/*-------------------------------------------------------
 メインビジュアル
--------------------------------------------------------*/
	#main-visual {
		position: fixed;
	}
	#main-visual.relative {
		position: relative;
	}
	@media screen and (max-width: 768px){
	#main-visual{
		position:static !important;
		top:0 !important;
		height:auto !important;
	}
	}
	@media screen and (orientation: landscape){
	.ipad #main-visual,
	.androidtablet #main-visual{
		position:static !important;
		top:0 !important;
		height:auto !important;
	}
	}

/*-------------------------------------------------------
 メインアコーディオン
--------------------------------------------------------*/
	.accordion ul {
		width: 100%;
		display: table;
		table-layout: fixed;
		margin: 0;
		padding: 0;
		z-index: 0;
	}
	.accordion ul li {
		display: table-cell;
		vertical-align: bottom;
		position: relative;
		width: 16.666%;
		background-repeat: no-repeat;
		background-position: center center;
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
	.accordion ul li div {
		display: block;
		overflow: hidden;
		width: 100%;
	}
	.accordion ul li div a {
		display: block;
		min-height: 100%;
		width: 100%;
		position: relative;
		z-index: 3;
		vertical-align: bottom;
		padding: 15px 20px;
		box-sizing: border-box;
		color: #fff;
		text-decoration: none;
		/*cursor:default;*/
		
		
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
	.accordion ul li div a * {
		opacity: 0;
		margin: 0;
		width: 100%;
		position: relative;
		z-index: 5;
		white-space:nowrap;
		
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px);
		
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
	.accordion ul li div a .accordion-txt {
		position:absolute;
		top:45%;
	}
	.accordion ul li div a .accordion-txt-ttl .font-serif{
		line-height:1.2;
		 font-family: 'Noto Serif';
	}
	.accordion ul li {
		background-size: cover;
		background-position:center center;
	}
	.accordion ul li:nth-child(1) {
		background-image: url(../img/bg_slide01.jpg);
	}
	.accordion ul li:nth-child(2) {
		background-image: url(../img/bg_slide02.jpg);
	}
	.accordion ul li:nth-child(3) {
		background-image: url(../img/bg_slide03.jpg);
		background-position-x:70%;
	}
	.accordion ul li:nth-child(4) {
		background-image: url(../img/bg_slide04.jpg);
		background-position-x:70%;
	}
	.accordion ul li:nth-child(5) {
		background-image: url(../img/bg_slide05.jpg);
		background-position-x:20%;
	}
	.accordion ul li:nth-child(6) {
		background-image: url(../img/bg_slide06.jpg);
		background-position-x:42%;
	}
	.accordion ul:hover li {
		width: 8%;
	}
	.accordion ul:hover li:hover {
		width: 60%;
	}
	.accordion ul li:hover:nth-child(3),
	.accordion ul li:hover:nth-child(4) {
		background-position-x:30%;
	}
	.accordion ul:hover li:hover a {
		background: rgba(0, 0, 0, 0.7);
	}
	.accordion ul:hover li:hover a * {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	@media screen and (max-width: 768px){
	.accordion {
		height: auto !important;
	}
	.accordion ul li,
	.accordion ul li:hover,
	.accordion ul:hover li,
	.accordion ul:hover li:hover{
		position: relative;
		display: table;
		table-layout: fixed;
		width: 100%;
		opacity: 1;
	}
	.accordion ul li a {
		background: rgba(0, 0, 0, 0.7);
	}
	.accordion ul li div a * {
		opacity:1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		white-space: normal;
		padding-right:20px;
	}
	.accordion ul li div {
		height:220px !important;
	}
	.accordion ul li:nth-child(3),
	.accordion ul li:nth-child(4),
	.accordion ul li:nth-child(5){
		background-position-x:30%;
	}
	.accordion ul li div a .accordion-txt {
		top:40px;
	}
	}
	
	@media screen and (max-width: 640px){
	.accordion ul li div {
		height:240px !important;
	}
	}
	@media screen and (max-width: 480px){
	.accordion ul li div {
		height:260px !important;
	}
	}
	
	@media screen and (orientation: landscape){
	.ipad .accordion,
	.androidtablet .accordion {
		height: auto !important;
	}
	.ipad .accordion ul li,
	.ipad .accordion ul li:hover,
	.ipad .accordion ul:hover li,
	.ipad .accordion ul:hover li:hover{
		position: relative;
		display: table;
		table-layout: fixed;
		width: 100%;
		opacity: 1;
	}
	.ipad .accordion ul li a {
		background: rgba(0, 0, 0, 0.7);
	}
	.ipad .accordion ul li div a * {
		opacity:1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		white-space: normal;
		padding-right:20px;
	}
	.ipad .accordion ul li div {
		height:220px !important;
	}
	.ipad .accordion ul li:nth-child(3),
	.ipad .accordion ul li:nth-child(4),
	.ipad .accordion ul li:nth-child(5){
		background-position-x:30%;
	}
	.ipad .accordion ul li div a .accordion-txt {
		top:40px;
	}
	}

/*-------------------------------------------------------
 コンテンツ
--------------------------------------------------------*/
	#container {
		background-color:#FFF;
	}
	@media screen and (orientation: landscape){
	.ipad #container,
	.androidtablet #container {
		min-height:auto !important;
		padding-top:0px !important;
	}	
	}

/*-------------------------------------------------------
 imforceとは
--------------------------------------------------------*/
	#about {
		background:url(../img/ng_about.jpg) no-repeat top center;
		background-size:cover;
	}
	.about-img {
		padding:0px 10px;
	}
	.about-btn .col {
		padding:5px !important;
	}
	
	@media screen and (max-width: 768px){
	.about-txt img {
		width:35%;
	}
	.about-btn {
		padding:0px 20px;
	}
	}
	
	
/*-------------------------------------------------------
 imforceとはリンク
--------------------------------------------------------*/	
	
	.about-imforce{
		position:relative;
	}
	.about-imforce-btn{
		position:absolute;
		top:0;
		display:none;
	}
	.about-imforce-btn li{
			display: block;
		width: 29%;
		margin: 0px 1.6%;
		letter-spacing: 0px;
		padding: 0px;
		float:left;
	}
	@media screen and (max-width: 767px){
	.about-imforce-btn{
		display:block;
	}
	}
	
/*-------------------------------------------------------
 news&topics
--------------------------------------------------------*/	
		
#newstopics .topicsbox{
background-color:#fefefe;
border:1px solid #b9b9b9;
padding:20px 30px;
text-align:left;
height:100%;
}
#newstopics h2.info {
color:#6989c3;
font-size:18px;
font-size:1.8rem;
font-weight:bold;
margin-bottom:10px;
}
#newstopics h2.info::after {
display:block;
content:"";
width:50px;
height:1px;
background:#6989c3;
margin-top:10px;
}
#newstopics .topicsbox dl{
border-bottom:1px solid #666;
padding:10px 0;
}
#newstopics .topicsbox dl dt{
color:#666;
}
#newstopics .topicsbox dl dt span{
display:inline-block;
color:#FFF;
font-size:12px;
font-size:1.2rem;
line-height:18px;
line-height:1.8rem;
font-weight:normal;
margin:0 0 0 10px;
padding:0 10px;
border-radius:9px;
}
#newstopics .topicsbox dl dt span.news,
#newstopics .topicsbox dl dt span.topics,
#newstopics .topicsbox dl dt span.reception{
background:#6785c1;
}
#newstopics .topicsbox dl dt span.free{
background:#cb194a;
}
#newstopics .topicsbox dl dt span.closed{
background:#6785c1;
opacity:.5;
}
#newstopics .topicsbox dl dd{
padding:5px 0 0 0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:break-word;
}
#newstopics .topicsbox dl dd a{
color:#000;
}
#newstopics .topicsbox .more{
text-align:right;
margin:0;
padding:10px 10px 0 0;
}
#newstopics .topicsbox .more a{
display:inline-block;
color:#325ea5;
font-weight:bold;
}
#newstopics .topicsbox .more a::before{
display:inline-block;
content:"▼";
transform:rotate(-90deg);
margin:0 5px 0 0;
}