@charset "utf-8";


.button-frame {
	width: 100%;
	margin: 30px auto 0px auto;
	text-align:center; 
	background-color:#CDCDCD;
}
.button-group { /*flex-menu用 */
	max-width: 1220px;
	margin: 30px auto 20px auto;
}
#isotopecontent {
	padding: 0;
	margin: 0 auto; 
	max-width: 1220px;
	/*	background-color:#F3F2EB; */
	/* background-color:#CCFF00; */
/*	background-color:#E7E7E7; */
}
#isotopecontent:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
}

.isotope {
	border: 1px solid #BBB;
/*	border: 1px none #999;*/
	margin: 0 auto;
	padding: 0;
	max-width: 1220px;
}
.isotope:after {
	content: '';
	display: block;
	clear: both;
}
/* clear fix */
.isotopewrap:after {
	content: '';
	display: block;
	clear: both;
}
.btpointer{
	cursor: pointer;
}
.bt_a{
    -webkit-transition: 0.2s ease-in-out;  
       -moz-transition: 0.2s ease-in-out;  
         -o-transition: 0.2s ease-in-out;  
            transition: 0.2s ease-in-out;  
}
/*.bt_a:hover {
	opacity: 0.5;
	filter: alpha(opacity=60);
} */




/* ---- isotope .element-item ---- */

@media screen and (min-width:640px) {

.element-item {
	/*	position: relative; */
	float: left;
	width: 280px;
 	height: 320px; 
	margin: 12px; 
/*	padding: 230px 15px 15px 15px; */
/*	background: #888;
	color: #262524; */
	text-align:left;
/*	font-size:small;	*/
}
.element-item > * {
	margin: 0;
	padding: 0;
}
.element-item .name { /* 未使用 */
	position: absolute;
	left: 0px;
	bottom: 50px;
	width:280px;
	height:50px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	font-weight: normal;
	background-color:#FFFFFF;
}
.element-item .symbol { /* 未使用 */
	position: absolute;
	left: 3px;
	top: -10px;
	font-size: 42px;
	font-weight: bold;
	color: white;
}
.element-item .qmark { /* Qマーク */
	position: absolute;
	left: 15px;
	top: 240px;
}
.element-item .category { /* カテゴリー名 */
	position: absolute;
	top: 0px;
	left: 0px;
	width:280px;
}
.element-item .contentsbox { /* メイン画像 */
	position: absolute;
	left: 0px;
/*	top: 15px; */
	top:  33px;
}
.element-item .titlebox { /* コンテンツタイトル */
	position: absolute;
	left: 60px;
	top: 240px;
	right: 10px;
	text-align:left;
	font-weight:bolder;
/*	font-size:medium; */
	font-size:1.1em;
	color:#000;
	line-height:1.3em;
}

.element-item .titleboxbig { /* 画像なしコンテンツタイトル */
	position: absolute;
	left: 40px;
	top: 60px;
	right: 20px;
	text-align:left;
	font-weight:bolder;
	font-size : 2em;
	color:#FFF;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.element-item .titleboxmv { /* コンテンツタイトル ムービー用 */
	position: absolute;
	left: 15px;
	top: 240px;
	right: 10px;
	text-align:left;
	font-weight:bolder;
	font-size:1.1em;
	color:#000;
	line-height:1.3em;
}

/* .element-item .leadbox {
	margin-left: 15px;
	margin-right: 15px;
	margin-top: 235px;
	text-align:left;
	font-size:small;	
} */
.element-item .leadbox { /* タイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 230px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	font-size:small;
	background-color:#FFFFFF;	
}


/********* .element BOX Color *********/

/* 歴史 */
.element-item#history .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #0062BF;
	background: hsl( 209, 100%, 37%);
}
.element-item#history .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #0062BF;
	background: hsl( 209, 100%, 37%);
}
.element-item#history .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #0062BF;
	background: hsl( 209, 100%, 37%);
}


/* 便利・快適 */
.element-item#comfort .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #C05217;
	background: hsl( 20, 78%, 42%);
}
.element-item#comfort .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #C05217;
	background: hsl( 20, 78%, 42%);
}
.element-item#comfort .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #C05217;
	background: hsl( 20, 78%, 42%);
}

/* 安全・安心 */
.element-item#relieve .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #E7BD1D;
	background: hsl( 47, 80%, 50%);
}
.element-item#relieve .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #E7BD1D;
	background: hsl( 47, 80%, 50%);
}
.element-item#relieve .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #E7BD1D;
	background: hsl( 47, 80%, 50%);
}

/* 車両 */
.element-item#vehicle .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #006666;
	background: hsl( 180, 100%, 20%);
}
.element-item#vehicle .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #006666;
	background: hsl( 180, 100%, 20%);
}
.element-item#vehicle .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute;
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #006666;
	background: hsl( 180, 100%, 20%);
}

/* リニアメトロ */
.element-item#linearmetro .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #188CFD;
	background: hsl( 209, 98%, 54%);
}
.element-item#linearmetro .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #188CFD;
	background: hsl( 209, 98%, 54%);
}
.element-item#linearmetro .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #188CFD;
	background: hsl( 209, 98%, 54%);
}

/* つくりかた */
.element-item#howtomake .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #FF4C09;
	background: hsl( 16, 100%, 51%);
}
.element-item#howtomake .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #FF4C09;
	background: hsl( 16, 100%, 51%);
}
.element-item#howtomake .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #FF4C09;
	background: hsl( 16, 100%, 51%);
}

/* バリアフリー */
.element-item#kindness .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #FE1389;
	background: hsl( 329, 99%, 53%);
}
.element-item#kindness .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #FE1389;
	background: hsl( 329, 99%, 53%);
}
.element-item#kindness .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #FE1389;
	background: hsl( 329, 99%, 53%);
}

/* エコ */
.element-item#eco .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #13C21F;
	background: hsl( 124, 82%, 41%);
}
.element-item#eco .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #13C21F;
	background: hsl( 124, 82%, 41%);
}
.element-item#eco .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #13C21F;
	background: hsl( 124, 82%, 41%);
}

/* まち */
.element-item#withtown .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #C828E0;
	background: hsl( 292, 74%, 51%);
}
.element-item#withtown .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #C828E0;
	background: hsl( 292, 74%, 51%);
}
.element-item#withtown .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #C828E0;
	background: hsl( 292, 74%, 51%);
}

/* 車窓 */
.element-item#movie-s .midline { /* 画像下の線 */
	position: absolute;
	top: 230px;
	left : 0px;
	width: 280px;
	height: 2px;
	background-color: #64965B;
	background: hsl( 110, 24%, 47%);
}
.element-item#movie-s .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #64965B;
	background: hsl( 110, 24%, 47%);
}
.element-item#movie-s .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #64965B;
	background: hsl( 110, 24%, 47%);
}



/********* end BOX Color *********/


.element-item a {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-indent:-999px;
}
.element-item a:hover{
    background-color:#FFF;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

}
@media screen and (max-width:639px) {
.i_center{text-align:center;}
.element-item {
	position: relative;
	float: left;
	width: 100%;
	height: 130px;
	/*	padding: 10px; */
	margin-top:5px;
	background: #888;
	color: #262524;
	display: inline-block;
}
.element-item > * {
	margin: 0;
	padding: 0;
}
.element-item .name {
	position: absolute;
	left: 10px;
	bottom: 5px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	font-weight: normal;
}
.element-item .symbol {
	position: absolute;
	left: 3px;
	top: -10px;
	font-size: 42px;
	font-weight: bold;
	color: white;
}
.element-item .qmark {
	position: absolute;
	right: 5px;
	bottom: 5px;
}
.element-item .weight {
	position: absolute;
	left: 150px;
	bottom: 5px;
	font-size: 12px;
}
.element-item .category {
	position: absolute;
	left: 0px;
	top: 0px;
	width:70px;
}
.element-item .contentsbox {
	position: absolute;
	left: 5px;
	top: 5px;
	height: 120px;
	width: 180px;
}
.element-item .contentsbox img {
	position: relative;
	height: 120px;
	width: 180px;
}
.element-item .titlebox {
	position: absolute;
	left: 200px;
	top: 5px;
	right: 5px;
	text-align: left;
}
.element-item .leadbox {
	position: absolute;
	left: 200px;
	top: 30px;
	right: 5px;
	text-align: left;
}
.element-item .leadbox2 {
	position: absolute;
	left: 200px;
	top: 45px;
	right: 5px;
	text-align: left;
}
.element-item img{
	max-width: 100%;
	height: auto;
	width:auto;
}

/********* .element BOX Color *********/

.element-item#history { /* 歴史 */
	background: #DBC2E4;
	background: hsl( 284, 39%, 83%);
}
.element-item#comfort { /* 便利・快適 */
	background: #CDF3DB;
	background: hsl( 143, 63%, 88%);
}
.element-item#relieve { /* 安全・安心 */
	background: #F7BB7B;
	background: hsl(  30, 88%, 72%);
}
.element-item#vehicle { /* 車両 */
	background-color: #006666;
	background: hsl( 180, 100%, 20%);
}
.element-item#linearmetro { /* リニアメトロ */
	background: #FDF197;
	background: hsl(  52, 96%, 79%);
}
.element-item#howtomake { /* つくりかた */
	background: #D3E0E8;
	background: hsl( 202, 32%, 87%);
}
.element-item#kindness { /* バリアフリー */
	background: #FCDFBF;
	background: hsl( 32, 92%, 87%);
}
.element-item#eco { /* エコ */
	background-color: #13C21F;
	background: hsl( 124, 82%, 41%);
}
.element-item#withtown { /* まち */
	background: #F3AAAD;
	background: hsl( 357, 75%, 80%);
}
.element-item#movie-s { /* 車窓 */
	background: #FF7F7F;
	background: hsl(   0, 100%, 75%);
}
/********* end BOX Color *********/

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
}
/* ----- end isotope .element-item ----- */


/* ----- 路線図用Box chart-item -------- */

.chart-item {
	/*	position: relative; */
	float: left;
	width: 340px;
 	height: 390px; 
	margin: 0 5px 30px 5px;
/*	padding: 230px 15px 15px 15px; */
/*	display: inline-block; /* test add */
}
.chart-item > * {
	margin: 0;
	padding: 0;
}
.chart-item .mark { /* アイコン・マーク */
	position: absolute;
	top: 0px;
	left: 0px;
	width:116px;
}
.chart-item .contentsbox { /* メイン画像 */
	position: absolute;
	left: 0px;
	top:  65px;
}
.chart-item .titlebox { /* コンテンツタイトル */
	position: absolute;
	left: 80px;
	top: 10px;
	right: 0px;
	text-align:left;
	font-weight:bolder;
	font-size:large;
	color:#000;
}
.chart-item .titleboxtko { /* コンテンツタイトル */
	position: absolute;
	left: 130px;
	top: 5px;
	right: 0px;
	text-align:left;
	font-weight:bolder;
	font-size:large;
	color:#000;
}
.chart-item a {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-indent:-999px;
}
.chart-item a:hover{
    background-color:#FFF;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}


/* ----- end 路線図用Box chart-item -------- */