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

/* main
--------------------------------------------------------------------------------------*/

#main{
	width: 100%;
	height: 580px;
	z-index: 1;
	background: url(../img/index/mainBg.jpg) no-repeat center bottom;
	background-size: cover;
	position: relative;
}
#main #mainTheme{
	width: 1000px;
	margin:0 auto;
    left: 50%;
    position: absolute;
    top: 50%;
}
#main #mainTheme img{
	width: 100%;
	padding: 20px;
	transform: translate(-50%,-50%);
}

/* index
--------------------------------------------------------------------------------------*/
#index{
	max-width: 1200px;
	margin: 0 auto;
	padding:5% 0;
	clear:both;
}

#index h2 {
	position: relative;
	padding-bottom: 0.75em;
	margin-bottom: 1.2em;
	font-size: 1.7em;
	letter-spacing:0.1em;
	text-align:center;
}

#index h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #666 0px, #666 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}
#index h3 {
  position: relative;
  font-size: 1.4em;
  text-align: center;
	padding: 0.1% 0;
	color: #333;
	font-weight: 400;
	margin-bottom: 1.5em;
}

#index h3:before {
  position: absolute;
  bottom: -6px;
  left: calc(50% - 35px);
  width: 70px;
  height: 4px;
  content: '';
  border-radius: 2px;
  background: #333;
}
#index h4{
	background-color: #69a899;
	color:#fff;
	font-weight:700;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size:1.15em;
	float:left;
	padding:5px 25px;
	margin:0 0 1em 0;
}
#index h4.h4blue{background-color: #6c94cb;}
#index span.h4{float: left; color: #f00; margin-left: 1em; padding-top: 0.6%; display: inline-block;text-align:left;}

/* whatsnew
--------------------------------------------------------------------------------------*/
#index #whatsnew {
	width: 100%;
	clear:both;
	margin: 0;
	padding: 20px 0;
	margin-bottom: 6%;
	display: block;
}

#index #whatsnew #news{
	width:100%;
	overflow: auto;
	height:150px;
	margin: 0;
	padding:0;
	text-align:left;
}

#index #whatsnew #news dl{
	width:98%;
	text-align: left;
	margin: 1% 0 0 0;
	position: relative;
}

#index #whatsnew #news dt{
	width: 8em;
	margin: 0 0 3px 0;
	padding: 0;
	float: left;
	clear:both;
	position:relative;
}
/*#index.english #whatsnew #news dt{width: 11em;}*/
#index #whatsnew #news dd {
	margin: 0 0 3px 8em;
	position:relative; 
	overflow:hidden;
	text-align: left;
}
/*#index.english #whatsnew #news dd{margin: 0 0 3px 11em;}*/




/* onDemand
--------------------------------------------------------------------------------------*/
#bnnArea{
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}

#bnnArea .host{
	clear: both;
	margin-bottom: 5%;
}

#bnnArea p {
	text-align: left;
	margin: 0 0 2% 0;
}

#bnnArea p.alC {
	text-align: center;;
	margin: 0 0 2% 0;
}
#bnnArea p img{
}
#bnnArea p img.fL{
	margin-right: 2%;
}



/* ここからタブ
--------------------------------------------------------------------------------------*/
/* 
--------------------------------------------------------------------------------------*/
@media screen and (max-width: 1260px) {
#main{
	height: 500px;
  position:relative;
}
#main #mainTheme{
	width: 100%;
	margin:0 0;
   /* left: 50%;
    position: absolute;
    top: 50%;*/
}
#main #mainTheme img{
	width: 60%;
	padding: 0 20%;
}

}

@media screen and (max-width: 960px) {
	#main{
	height:600px;
	position:relative;
}
#main #mainTheme{
	width: 100%;
	margin:0 0;
   /* left: 50%;
    position: absolute;
    top: 50%;*/
}
#main #mainTheme img{
	width: 60%;
	padding: 0 20%;
}


}

@media screen and (max-width: 720px) {
#main{
	height: 400px;
	position:relative;
}
#main #mainTheme{
	width: 100%;
	margin:0 0;
   /* left: 50%;
    position: absolute;
    top: 50%;*/
}
#main #mainTheme img{
	width: 60%;
	padding: 0 20%;
}

}


/* ここからスマホ
--------------------------------------------------------------------------------------*/
/* 
--------------------------------------------------------------------------------------*/

@media only screen and (max-width: 481px) {

/* main
--------------------------------------------------------------------------------------*/
#main{
	width:100%;
	margin: 0;
	padding: 0;
	position:relative;
}
#main #mainTheme{
	width:90%;
	margin: 5% 5%;
	padding: 0 0;
	left: 0;
	position: relative;
	top: 40%;
	/*
	width: 1000px;
	margin:0 auto;
    left: 50%;
    position: absolute;
    top: 50%;*/
}
#main #mainTheme img{
	width: 100%;
	padding: 0;
    transform:none;
}



/* index
--------------------------------------------------------------------------------------*/
#index{
	max-width:inherit;
	width: 90%;
	margin: 0;
	padding:10% 5%;
	clear:both;
}
#index h2 {
	font-size:1.3rem;
	text-align: center;
	font-weight:400;
	margin-bottom:1em;
	padding-bottom: 1em;
}


#index h4 {
	font-size:1rem;
}


/* sections
--------------------------------------------------------------------------------------*/
#index #whatsnew{
	width: 100%;
	clear:both;
	margin: 0 0 10% 0;
	padding: 0 0 5% 0;
}
	
#index #whatsnew #news{
	width:100%;
	overflow: auto;
	height:240px;
	margin: 0;
	padding:0;
	text-align:left;
}

#index #whatsnew #news dt{
	width: 100%;
	margin: 0 0 3px 0;
	padding: 0;
	float: none;
	clear:both;
	position:relative;
}

#index #whatsnew #news dd {
	margin: 0 0 1.5em 0;
	position:relative; 
	overflow:auto;
	text-align: left;
}
#index.english #whatsnew #news dt{width: 100%;}
#index.english #whatsnew #news dd{margin: 0 0 1.5em 0;}

	
#bnnArea{
	width: 90%;
	clear:both;
	margin: 0 5%;
	padding: 0;
}
#bnnArea h3{
	font-size: 1.3em;
}
#bnnArea .host{
	clear: both;
	margin-bottom: 8%;
}
#bnnArea p img{
	width: 60%;
	padding:2% 20%;
	margin-bottom: 5%;
}

#bnnArea p {
	margin: 0 0 5% 0;
}

	}