@charset "utf-8";


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color: #CCCCCC;
	background-image:url(../img/bg.png);
	margin: 0;
	padding: 0;
	overflow-x:hidden;
	width:640px;
	}
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1 {
    height: 0;
    padding-top: 4.69%;
    background: url('../img/head.png') 0 0 no-repeat;
    background-size: contain;
}
h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 1.5em;
	padding-left: 1.5em;
}
a img {
	border: none;
}
a:link {
	color:#414958;
	text-decoration: underline;
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}
hr {
height: 1px;
background-color: #FFFFFF;
border: none;
color: #FFFFFF;
}


/* ---------------container-------------- */
.maincontainer {
/*	max-width: 1220px; */
	max-width: 640px;
	margin: 30px auto 0px auto;
	text-align:center; 
}
/* -----------end container-------------- */

/* ---------------header-------------- */
.header {
	background: #000;
	width: 100%;
	background-image: url(../img/headback.png);
	background-size:100% 100%;
}
.headerbox {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	padding-top: 9.48%; /* 画像の縦÷横×100 */
	background : #006 url("../img/head.png") no-repeat;
	background-size: 100% 100%; /* coverとかcontainにすると応用が効かない */
}	
	

.titlewrap {
	width: 100%;
	background-color:#000;
	background-image:url(../img/headback.png);
	background-size:100% 100%;
	margin: 0;
}
.titlewrap .titbox {
/*	width:100%; */
	max-width: 640px;
	margin: 0 auto;
	padding: 0px;
}
/* -----------end header-------------- */


/* ------------- トップへ戻る用------------- */

#back-top {
	display:none;
    position: fixed;
    bottom: 50px;
    right: 50px;
	}
#back-top span {
    width: 80px;
    height: 80px;
    display: none;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	}
#back-top img {
	display:none;
    height: 80px;
	width: 80px;
	}
				
/* ------------- end トップへ戻る用------------- */

/* ------------- 前へ戻る用------------- */
#page-back {
	display:none;
    position: fixed;
    bottom: 50px;
    right: 150px;
	}
#page-back span {
	display:none;
    width: 220px;
    height: 80px;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	}
#page-back img {
	display:none;
    height: 80px;
	}
				
/* ------------- end 前へ戻る用------------- */

/* ----------------サブタイトル------------------*/
.h2_wrap{
	padding:0;
	margin:0 auto;
	width:100%;
	font-size: 8px;
}

.h2_wrap .h2_frame {
	position:relative;
	box-sizing: border-box;
	margin: 0 auto;
	width:100%;
	height:80px;
	background-color: #FFF969;
	-webkit-border-top-right-radius: 80px;
	-moz-border-radius-topright: 80px;
}
.h2_frame:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
	position: relative;
}
.h2_frame .h2_icon{
	position:absolute;
	top:10px;
	left:10px;
	width:60px;
	height:60px;
	background-image:url(../img/icon_h2.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.h2_frame .h2_box{
	position:absolute;
	top:0px;
	left:80px;
	right:20px;
	height:100px;
	vertical-align:middle;
}
.h2_frame .h2_boxc{
	display:table;
	position:absolute;
	top:-1px;
	left:0px;
	right:0px;
	height:80px;
	vertical-align:middle;
	text-align: left;
}
.h2_frame .h2_underline{
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	height:5px;
	background-color: #000;
}
.h2_frame h2{
	margin: 0;
	padding: 0;
 	height:auto;
	font-size:1.3em;
	font-weight:900;
	color:#000;
    display:table-cell;
    vertical-align:middle;
}
/* ----------------end サブタイトル------------------/

/* ------各コンテンツ用コンテナ------- */
#p960 {
	max-width: 640px;
}
.j_banner {
	float: left;
	width: 24.6%;
	float: right;
}
.j_banner img {
	width: 100%;
}
.flexslider {
  width: 75.4%;
}

.button-group { /*flex-menu用 */
	max-width:700px;
	margin-bottom:20px;
	margin-top:30px;
	background-color:#E8E7CC;
}
#isotopecontent {
	padding: 0;
	margin: 0 auto; 
/*	max-width: 1000px; */
	max-width: 640px;
	/*	background-color:#F3F2EB; */
	/* background-color:#CCFF00; */
/*	background-color:#E7E7E7; */
}
#isotopecontent:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
}

.isotope {
	border: 1px none #999;
	margin: 0 auto;
	padding: 0;
	max-width: 640px;
}
.isotope:after {
	content: '';
	display: block;
	clear: both;
}
/* clear fix */
.isotopewrap:after {
	content: '';
	display: block;
	clear: both;
}

.main100container {
/*	max-width: 1220px; */
	max-width: 640px;
	margin: 0 auto;
	clear:both;/*	text-align:center; */
}
.main100container .bodytxt{
	font-size: small;
	line-height:1.5em;
}
.content100 {
	margin: 0 auto;
	margin-bottom: 3em;
	width:90%;
/*	max-width:1200px; */
	max-width:960px;
	color:#222;
	padding: 0px;
	text-align:left;
	border-style:dotted;
	border:medium;
	border-color:#093;
	border-radius: 12px;
}
.main100container .column00{
	position:relative;
	margin: 0 auto;
	width: 90%;
	padding: 1.5em;
	text-align:center;
}
.main100container .column00 .submenu{
	font-size:small;
	width: 100%;
	text-align:center;
	margin:0 auto;
	font-size:xx-small;
}
.main100container .column00 .submenu a{
	word-break: keep-all;
	white-space:pre;
}
.main100container .column01{
	position:relative;
	background-color:#FFF;
	margin: 0 auto;
	margin-bottom: 3em;
	width: 100%;
	padding: 1.5em;
	page-break-after:always;
}
.main100container .column01npb{
	position:relative;
	background-color:#FFF;
	margin: 0 auto;
	margin-bottom: 3em;
	width: 100%;
	padding: 1.5em;
	page-break-after:auto;
}
.main100container .column02{
	position:relative;
	background-color:#FFF;
	margin: 0 auto;
	margin-bottom: 3em;
	width: 100%;
	padding: 0;
	page-break-after:always;
}

.main100container .imgfl100{
	width: 100%;
}
.main100container .imgfl90{
	width: 90%;
}
.main100container .imgfr90{
	width: 90%;
}
.main100container .margin0auto{
	margin:0 auto;
}
.main100container .taL{
	text-align:left;
}
.main100container .taR{
	text-align:right;
}
.main100container .t_c100_c{ /* キャプション左寄せ48% */
	text-align:center;
	margin:0;
	width:100%;
	padding-bottom:5px;
}

.main100container .img_colL{
	float: left;
	width: 50%;
}
.main100container .img_colR{
	float: right;
	width: 50%;
}

.main100container .imgL20{ /* img左寄せ30% */
	float:left;
	width:20%;
}
.main100container .imgR20{ /* img右寄せ30% */
	float:right;
	width:20%;
}
.main100container .imgL20L{ /* img左寄せ30% */
	float:left;
	width:20%;
}
.main100container .imgR20L{ /* img右寄せ30% */
	float:right;
	width:20%;
}
.main100container .imgL30{ /* img左寄せ30% */
	float:left;
	width:30%;
}
.main100container .imgR30{ /* img右寄せ30% */
	float:right;
	width:30%;
}
.main100container .imgL30L{ /* img左寄せ30% */
	float:left;
	width:30%;
}
.main100container .imgR30L{ /* img右寄せ30% */
	float:right;
	width:30%;
}
.main100container .imgL48{ /* img左寄せ48% */
	float:left;
	width:48%;
}
.main100container .imgR48{ /* img右寄せ48% */
	float:right;
	width:48%;
}
.main100container .imgL48L{ /* img左寄せ48% */
	float:left;
	width:48%;
}
.main100container .imgR48L{ /* img右寄せ48% */
	float:right;
	width:48%;
}
.main100container .t_c48_l{ /* キャプション左寄せ48% */
	text-align:left;
	float:left;
	margin:0;
	width:48%;
	padding-bottom:5px;
}
.main100container .t_c48_r{ /* キャプション右寄せ48% */
	text-align:left;
	float:right;
	margin:0;
	width:48%;
	padding-bottom:5px;
}
.main100container .imgL60{ /* img左寄せ60% */
	float:left;
	margin:0;
	width:60%;
}
.main100container .imgR60{ /* img右寄せ60% */
	float:right;
	margin:0 0 1em 1em;
	width:60%;
}
.main100container .imgC60{ /* img中央寄せ60% */
	margin:0 auto;
	width:60%;
}
.main100container .imgC80{ /* img中央寄せ80% */
	margin:0 auto;
	width:80%;
}
.main100container .t_c60_l{ /* キャプション左寄せ60% */
	text-align:center;
	float:left;
	margin:0 0 1em 1em;
	width:60%;
	padding-bottom:5px;
}
.main100container .t_c60_r{ /* キャプション右寄せ60% */
	text-align:center;
	float:right;
	margin:0 0 1em 1em;
	width:60%;
	padding-bottom:5px;
}

.main100container:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
	position: relative;
}

.content100 {
margin: 0 auto;
width:90%;
/* max-width:1200px; */
max-width:960px;
color:#222;
padding: 0px;
text-align:left;
border-style:dotted;
border:medium;
border-color:#093;
border-radius: 12px;
page-break-after:always;
}
.content100:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
	position: relative;
}
.content100npb {
margin: 0 auto;
width:90%;
/* max-width:1200px; */
max-width:960px;
color:#222;
padding: 0px;
text-align:left;
border-style:dotted;
border:medium;
border-color:#093;
border-radius: 12px;
page-break-after:auto;
}
.content100npb:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
	position: relative;
}
.cap_txt{
	font-size:0.7em;
}
.cap_txt_r{
	font-size:0.7em;
	text-align:right;
}

/* QA欄共通 **********************************************/

.f_wrap {
	width:100%;
	font-size:8px;
}
.f_wrap H2{
	max-width:60%;
	margin-left:0;
	margin-right:auto;
	margin-bottom:0px;
	padding: 0;
 	height:auto;
	font-size:2em;
	font-weight:900;
	color:#000;
    display:table-cell;
    vertical-align:middle;
	text-align: left;
	word-wrap:break-word;
}


/* 質問欄 ************************************************/

.f_question_wrap{
	padding:20px 0 10px 0;
	margin:0 0 0px 0;
	width:100%;
	height:165px;
	background-color:#FFFF99;
}
.f_question {
	position:relative;
	box-sizing: border-box;
	margin: 0 auto;
	padding-top:20px;
	padding-bottom:20px;
	width:90%;
	max-width:1200px;
	background-color: #FFFF99;
	height:110px;
}
.f_question:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
	position: relative;
}
.f_question .f_head{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
}
.f_question .f_waku{
	position:absolute;
	top:10px;
	left:0px;
	border-radius:10px;
	background-color:#FFFFFF;
	height: 110px;
	width:100%
}
.f_question .f_qimg{
	position:absolute;
	top:30px;
	left:20px;
	width:105px;
	height:70px;
	text-align:right;
}
.f_question .f_box{
	position:absolute;
	top:30px;
	left:150px;
	right:0px;
	height:75px;
	vertical-align:middle;
}
.f_question .f_boxc{
	display:table;
	position:absolute;
	top:-1px;
	left:0px;
	right:0px;
	height:75px;
	vertical-align:middle;
}


/* 答え欄 ********************************************/

.f_answer_wrap{
	padding:0;
	margin:0 0 30px 0;
	width:100%;
	background-color:#414141;
}

.f_answer {
	position:relative;
	box-sizing: border-box;
	margin: 0 auto;
	width:80%;
	max-width:1100px;
	background-color: #414141;
	color:#FFF;
	height:200px;
}
.f_answer:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
	position: relative;
}
.f_answer .f_head{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	background-color:#FFF;
}
.f_answer .f_waku{
	position:absolute;
	top:50px;
	left:0px;
	border:3px solid #FFFF00;
	border-radius:10px;
	background-color:#FFFFFF;
	height: 100px;
	width:100%
}
.f_answer .f_kotae{
	position:absolute;
	top:50px;
	left:0px;
	width:113px;
	height:100px;
}
.f_answer .f_box{
	position:absolute;
	top:50px;
	left:110px;
	right:0px;
	height:100px;
	vertical-align:middle;
}
.f_answer .f_boxc{
	display:table;
	position:absolute;
	top:-1px;
	left:0px;
	right:0px;
	height:100px;
	vertical-align:middle;
}
/* end 答え欄 ****************************************/
/* end QA欄 ******************************************/


.f_contents {
	width:100%;
	background-color:#FFF;
	padding:2em;
	margin-top: 0px;
	margin-bottom:30px;
}



/* ------end 各コンテンツ用コンテナ------- */



/* ----------- fotter ------------ */
.footer {
	margin-top:30px;
	width:100%;
	text-align:center;
	padding: 0px;
	margin: 30px 0 0 0;
	background-image:url(../img/footer_bg.png);
	background-size: 100% 100%;
}
.footerbox {
	position: relative;
/* 	max-width: 1220px; */
	max-width: 640px;
	margin: 0 auto;
	text-align:left;
}
.footerbox .footerimg {
	width: 100%;
}
.footerbox .footername {
	position:absolute;
	right: 10px;
	bottom: 2px;
	font-size: 0.5em;
	color: #FFF;
}
.footerbox .footercopy {
	position:absolute;
	left: 10px;
	bottom: 10px;
	font-size: 0.5em;
	color: #FFF;
	text-align:right;
}
/* -------end  fotter ------------ */

/* ----------- clearfix ------------ */
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
/* -------end  clearfix ------------ */

.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;  
}



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

.element-item {
	float: left;
	width: 280px;
 	height: 320px; 
	margin: 12px; 
	text-align:left;
}
.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:large;
	color:#000;
}

.element-item .titleboxbig { /* 画像なしコンテンツタイトル */
	position: absolute;
	left: 40px;
	top: 60px;
	right: 20px;
	text-align:left;
	font-weight:bolder;
	font-size : 1.8em;
	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:large;
	color:#000;
}

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


/********* .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: #13C21F;
	background: hsl( 124, 82%, 41%);
}
.element-item#vehicle .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #13C21F;
	background: hsl( 124, 82%, 41%);
}
.element-item#vehicle .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #13C21F;
	background: hsl( 124, 82%, 41%);
}

/* リニアメトロ */
.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: #00B173;
	background: hsl( 158, 100%, 34%);
}
.element-item#eco .btmline { /* 底の線 */
	position: absolute;
	top: 315px;
	bottom: 5px;
	left : 0px;
	width: 280px;
	height: 5px;
	background-color: #00B173;
	background: hsl( 158, 100%, 34%);
}
.element-item#eco .leadboxbig { /* 文字のみタイトルの背景 */
	position: absolute; 
	left: 0px;
	top: 20px;
	right: 0px;
	bottom: 0px;
	text-align:left;
	background-color: #00B173;
	background: hsl( 158, 100%, 34%);
}

/* まち */
.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;
}

/* ----- 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 -------- */


/* ------------ 関連オススメ -----------------*/
.f_related {
	position:relative;
	width: 90%;
	margin: 0 auto 100px auto;
	
/*	clear:both;*/
}
.f_related:after { /* clear fix */
	content: '';
	display: block;
	clear: both;
}
.f_related .logo {
	position:absolute;
	top: 10px;
	left: 30%;
	right: 30%;
	width: 413px;
	height: 60px;
	margin: 0 auto;
	background-image: url(../img/tit_related.png);
	background-repeat:no-repeat;
}
.f_related .basebox {
	position:relative;
	top: 45px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width:100%;
	text-align:left;
	border:15px solid #0057A6;
	border-top-width: 35px;
	border-radius:10px;
	background-color:#FFFFFF;
	color:#003366;
	padding:20px 20px 20px 20px;
	font-weight:bolder;
	font-size:1em;
	line-height:1.6em
}
.f_related .basebox a {
	color:#003366;
}
.f_related .txtbox {
	top: 60px;
	width:100%;
	text-align:left;
	border-radius:10px;
	background-color:#FFFFFF;
	margin-top: 20px;
	margin: auto;
}
.f_related ul {
	margin: 1em 1em 1em 1em;
	padding: 0;
}
.f_related li {
    list-style:none;
    padding-left: 1em;  
    line-height: 1.2em;
	margin-bottom: 0.6em
}
.f_related li#history { /* 歴史 */
    background:url('../img/bit_history.png') left center no-repeat;}
.f_related li#comfort { /* 便利・快適 */
    background:url('../img/bit_comfort.png') left center no-repeat; }
.f_related li#relieve { /* 安全・安心 */
    background:url('../img/bit_relieve.png') left center no-repeat; }
.f_related li#vehicle { /* 車両 */
    background:url('../img/bit_vehicle.png') left center no-repeat; }
.f_related li#linearmetro { /* リニアメトロ */
    background:url('../img/bit_linearmetro.png') left center no-repeat; }
.f_related li#howtomake { /* つくりかた */
    background:url('../img/bit_howtomake.png') left center no-repeat; }
.f_related li#kindness { /* バリアフリー */
    background:url('../img/bit_kindness.png') left center no-repeat; }
.f_related li#eco { /* エコ */
    background:url('../img/bit_eco.png') left center no-repeat; }
.f_related li#withtown { /* まち */
    background:url('../img/bit_withtown.png') left center no-repeat; }
.f_related li#movie-s { /* 車窓 */
    background:url('../img/bit_view.png') left center no-repeat; }
/* ------------ end 関連オススメ -----------------*/


/* ------------------ margin ---------------------- */

.m10 {
	margin: 10px;
}
.m20 {
	margin: 20px;
}
.mt10 {
	margin-top: 10px;
}
.mt20 {
	margin-top: 20px;
}
.ml1em {
	margin-left: 1em;
}
.ml10 {
	margin-left: 10px;
}
.ml20 {
	margin-left: 20px;
}
.mr10 {
	margin-right: 10px;
}
.mr20 {
	margin-right: 20px;
}
.mb0 {
	margin-bottom: 0px;
}
.mb10 {
	margin-bottom: 10px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb30 {
	margin-bottom: 30px;
}
.mb40 {
	margin-bottom: 40px;
}
.mb50 {
	margin-bottom: 50px;
}
.mb60 {
	margin-bottom: 60px;
}
.mb70 {
	margin-bottom: 70px;
}
.margin0auto {
	margin: 0 auto;
}

/* ------------------ margin ---------------------- */

/* ------------------ padding ---------------------- */

.p10 {
	padding: 10px;
}
.p15 {
	padding: 15px;
}
.p20 {
	padding: 20px;
}
.p25 {
	padding: 25px;
}
.p30 {
	padding: 30px;
}
.pt10 {
	padding-top: 10px;
}
.pt20 {
	padding-top: 20px;
}
.pb10 {
	padding-bottom: 10px;
}
.pb20 {
	padding-bottom: 20px;
}

/* ---------------- background-color --------------- */
.bc_white {
	background-color: #FFFFFF;
}
.bc_blue {
	background-color: #00F;
}
.bc_red {
	background-color: #F00;
}