@media screen and (max-width: 599px){
@charset "utf-8";

/* for smartphone */
html {
    position: relative;
   f overflow-x: hidden;
}
/*////////////////////////////*/

body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	
	background-color: #fff;
	margin: 0;
	padding: 0;
	color: #000;
	
	min-width:360px;
	width:100%;
	
	-webkit-text-size-adjust: 100%;

/* for smartphone */
    position: relative;
    left: 0;
    overflow-x: hidden;
/*////////////////////////////*/
}

/* for smartphone */
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
/*////////////////////////////*/

.sp{ display:none; }

/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
/*	padding-right: 15px;
	padding-left: 15px;*/ /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}

h1{ margin:20px 0 10px 0; }

a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}


/* ドロワーメニュー */
.ul_open_h{
	    background: gray;
	    color: #000;
	    margin: 0;
	    padding: 0;
	    list-style: none;
	    top: 0;

	    height: 100%; 
		height:calc(100% - 50px);
	    -webkit-transition: .35s ease-in-out;
	    -moz-transition: .35s ease-in-out;
	    transition: .35s ease-in-out;
	    overflow-y: scroll; 
	    position: fixed;
		
		z-index:30; 
		padding-top:50px;

		background-color:#dedede;
		
		
}
.ul_open_h li{
	    padding: 7px;
	    width: 220px;
		border-bottom:1px #333 solid;
		
		font-size:0.85em;
}
.ul_open_h li.bottom{	margin-bottom:2000px; }

.ul_open_h li a:link {
	color: #000;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
.ul_open_h li a:visited {
	color: #000;
	text-decoration: underline;
}

.open-sub{ margin:0 0 0 10px; list-style-position:inside; list-style-type:disc; }
.open-sub li{ font-size:1.0em;
	border-bottom:none; 
	padding:5px; 
}

.dmenu{ padding:0 0 0 10px; }

.open-1{
	    right : -100%;
}
.open-1.active{
    right : 0px;
}

.move-1.on.btn{
    position: fixed;
    right: 25px;
    top: 10px;
}

.btn{     width: 50px;
    height: 50px;
    position: absolute;
    right :15px;
    top: 10px;
    background: #fff;

	z-index:60; 
}

.btn:before,
.btn:after,
.btn span{
    display: block;
    width: 80%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.btn span{
    height: 3px;
    background-color: #000;
    top: calc(50% - 1.5px);
}

.btn:before{
    content: "";
    top: calc(25% - 3px);
    border-top: 3px solid #000;
}
.btn:after{
    content: "";
    bottom: calc(25% - 3px);
    border-bottom: 3px solid #000;
}
.btn.on span{
    display: none;
}

.btn.on:before{
    top: calc(50% - 1.5px);
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
.btn.on:after{
    bottom: calc(50% - 1.5px);
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

.btnlink{
    width: 90%;
    display: block;
    margin: auto;
    border: 1px solid #0060ff;
    border-radius: 5px;
    background: #4285F4;
    height: 35px;
    line-height: 35px;
    text-align: center;
    margin-bottom: 35px;
    color: #fff;
}
.linkbox a{
    text-decoration: none;
}

/* ~~ この固定幅コンテナが他の div を囲みます。~~ */
.container {
	width: 100%;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
}

.main-wrap{
	background:url(images/s_bottom_bk.png) center bottom no-repeat;
	width:100%;
	min-height:800px;
	
	padding:0 0 300px 0; 
}

.main {
	width: 360px;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。 */
	
	min-height:500px; 
	height:auto;
	
/*	border:1px #ccc solid;  */
}

/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります。ヘッダーには、ユーザー独自のリンクされたロゴに置き換えられるイメージプレースホルダーが含まれます。~~ */
.header-wrap{ 
	width:100%; 
	text-align:center;
	
	height:250px;
	
	position:relative;

	 }
.header {
	width:360px; 
	margin:0 auto;
	position:relative;
	
	 height:90px;
	 
}

.t-title{ position:absolute; top:16px; left:19px; z-index:20; }
.t-emblem{ position:absolute; top:83px; left:209px; z-index:10; }
.t-menu{ position:absolute; top:60px; right:25px; z-index:10; }
.t-copy, .t-map{ display:none;}

.bg-slider {
	display:none;
}

.slider-wrap{ text-align:center; }

.s-bg-slider {
 	width: 100%;
   	height: 160px;
   	background-position:center center;
/*   	background-size: cover; */
   	display: block;
   	align-items: center;
   	justify-content: center;
	
	position:absolute;
	bottom:0;
	z-index:0;
}

.sub-header-wrap{ 
	width:100%; 
	text-align:center;
	
	height:90px;
	
	position:relative;
	 }
.sub-header {
	width:360px; 
	margin:0 auto;
	position:relative;
	
	 height:90px;
}

.ts-title{ position:absolute; top:16px; left:19px; z-index:20; }
.ts-emblem{ position:absolute; top:0; left:0; z-index:10; }
.ts-menu{ position:absolute; top:60px; right:25px; z-index:10; }


/* ~~ レイアウトに使用するカラムです。~~ 

1) 余白は、div の上部または下部にのみ配置されます。これらの div 内のエレメントには、それ自体に余白があるので、ボックスモデル計算を行う必要がありません。ただし、div 自体に両側の余白やボーダーを指定した場合、その値が加算されたものが合計幅になることに注意してください。div 内のエレメントの余白を削除し、さらにその div 内に、全体のデザインに必要な幅や余白を指定していない 2 つ目の div を追加することもできます。

2) カラムはすべてフロートしているため、マージンは指定されていません。マージンを追加する必要がある場合は、フロート方向には指定しないでください (例えば、右フロートに設定した div の右マージン)。多くの場合、代わりに余白を使用できます。このルールに従わない場合は、div のルールに「display:inline」宣言を追加し、一部のバージョンの Internet Explorer でマージンが 2 倍になるバグを回避する必要があります。

3) クラスはドキュメント内で複数回使用できるので (またエレメントには複数のクラスを適用できます)、カラムには ID ではなくクラス名が割り当てられます。例えば、必要に応じて 2 つのサイドバー div をスタックできます。クラスを各ドキュメントで一度しか使用しないのであれば、ユーザーの好みに応じて、クラス名を ID に変更することができます。

4) ナビゲーションを右ではなく左に配置したい場合、これらのカラムを反対方向にフロートさせると (すべて右方向にする代わりに、すべて左方向に設定)、反転してレンダリングされます。HTML ソース内で div を移動する必要はありません。

*/

.small{ font-size:90%; }
.small08{ font-size:0.8em; }
.large{ font-size:1.1em; }
.large120{ font-size:120%; }
.large150{ font-size:150%; }
.large160{ font-size:160%; }
.large170{ font-size:170%; }
.strong{ font-weight:bold; }
.normal{ font-weight:normal; }

.red{ color:#F00; }
.green{ color:#093; }
.blue{ color:#00F; }
.yellow{ color:#ffff33; }

.sidebar1 {
	display:none;
}
.sidebar1 img{ padding:0; margin:0 ; }
.sidebar1 img.sub{ padding:0; margin:5px 0 ; }

.content {

	padding: 10px 0;
	width: 360px;
	float: left;
	
/*	border:1px #F00 solid;  */

}

/* banner area */
.bannerarea{ width:100%; margin:20px 0 0 0 ; }
.bannerarea img{ float:left; margin: 0 0 22px 22px; }

.s-bannerarea{ width:100%; margin:10px 0 0 0 ; text-align:center; }
.s-bannerarea img{ margin: 5px 0; }

/* toppage */
.toparea{ width:360px; margin:20px 0 ; text-align:center; /*border:1px #ccc solid;*/ }
.toparea p{ font-size:0.8em;}


/* toppage list */
.listarea{ width:350px; border-bottom:2px #00c2ff solid; margin:10px 0 0 5px; }
.toptitle{ background:url(images/list_bdr.gif) top center no-repeat; 
	padding:5px; text-align:left; 
}
.toptitle:before{
	font-family: FontAwesome;
	content: "\f04d";
	
	color:#0066ff;
	
	margin:-5px 0 0 5px;
	font-size: 1.0em;
}

.tolist{ background:url(images/arrow_r.png) top right no-repeat;
	padding:0 60px 0 0; text-align:right; margin-top:10px; width:80%;
	 }
.tolist a:link {
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
.tolist a:visited {
	text-decoration: underline;
}

/* detail */
.n-title{ font-size:1.2em; font-weight:bold; text-align:center; padding:10px 0;  }

.kiji{ width:350px; margin:0 auto; padding:10px 0; text-align:left; margin-left:5px; }

/* list */
.next{ width:100%; padding:10px 0; font-size:0.9em; text-align:center; }
span.tonext:after{
	font-family: FontAwesome;
	content: "\f04e";
	
	color:#2b4793;
	
	margin:-5px 0 0 5px;
	font-size: 1.0em;
}
span.toprev:before{
	font-family: FontAwesome;
	content: "\f04a";
	
	color:#2b4793;
	
	margin:-5px 5px 0 0;
	font-size: 1.0em;
}

/* about */
dl.about{ width:90%; margin:20px 0 20px 5px;  }

dl.about dt {
clear: both;
text-align:left;
padding:5px 0 5px 0;
font-size:1.1em;
font-weight:bold;

}

dl.about dd {
margin: 5px 0px 20px 20px;
text-align:left;

font-size:0.9em;
line-height:1.5em;
}

/* gallery */
.onegai{ width:320px; margin:10px 0 0 5px; padding:10px; border:3px #00CCFF double;
 text-align:center; }
.onegai div{ width:100%; text-align:left; font-size:0.9em; }
.onegai ul{ width:300px; margin:10px 0 10px 10px; }

 table.kakunin{ width:200px; margin:0 auto; }

/* marinview */
.time{ width:45%; float:left; text-align:center; font-size:0.9em; position:relative; }

table.mv{ border-top:1px #0000cc solid; border-left:1px #0000cc solid; width:230px; margin:0 auto; }
table.mv th, table.mv td{ font-weight:normal; border-bottom:1px #0000cc solid; border-right:1px #0000cc solid;
	text-align:center; }

/* policy */
ol.policy{ margin:10px 0 0 0;  list-style-position:outside; width:95%;  }
ol.policy li{ margin:0 0 10px 35px; font-size:0.9em; text-align:left; }

.p-txt{ width:95%; text-align:right; }


.pdfarea{ width:95%; padding:15px 10px; font-size:0.9em; text-align:left; border:1px #ccc solid;
	margin:10px 0; }

.toback:after{
	font-family: FontAwesome;
	content: "\f151";
	
	color:#06C;
	
	margin:-5px 0 0 5px;
	font-size: 1.4em;
}

/* mail */
table.mail{  margin:auto; padding:auto; border-top:1px #666666 solid;
	border-left:1px #666666 solid; margin:20px 0 10px 10px; }
table.mail th{  padding:10px; vertical-align:middle; background-color:#ffefbf;
	font-weight:normal; border-bottom:1px #666666 solid;	border-right:1px #666666 solid;
	text-align:center; font-size:0.9em;}
table.mail th.left{ text-align:left; padding-left:5px; }
table.mail td{ text-align:left; padding:5px 10px 5px 10px; font-size:0.9em;
	border-bottom:1px #666666 solid;	border-right:1px #666666 solid; line-height:120%;  }
table.mail td.center{ text-align:center; padding:5px 0; }
table.width{ width:340px; }

table.mail td.conf{ border:none; width:70%; padding:5px; line-height:120%; text-align:left; 
	vertical-align:text-top;  }
.mailerror_conf{ text-align:center; width:100%; margin:0 0 20px 0;  }

table.mail2{  margin:auto; padding:auto; border:none; margin:0 0 10px 20px; }
table.mail2 td{ text-align:center; padding:15px 0;   }

/* memory */
.memory{ width:350px; margin:0 0 0 5px; }
.parts{ width:100%; text-align:center;  }
p.mtitle{ font-size:90%; font-weight:bold; margin:5px 0 0 0; line-height:110%; }

/* sanpo */
.sanpoarea{ width:752px; border:1px #333 solid; position:relative; 
	height:465px; margin:20px 0 0 10px;
	background:url(sanpo/images/map.jpg) top left no-repeat;}
.sanpoarea img.no1{ position:absolute; top:297px; left:81px; }
.sanpoarea img.no2{ position:absolute; top:307px; left:109px; }
.sanpoarea img.no3{ position:absolute; top:280px; left:157px; }
.sanpoarea img.no4{ position:absolute; top:297px; left:215px; }
.sanpoarea img.no5{ position:absolute; top:289px; left:271px; }
.sanpoarea img.no6{ position:absolute; top:280px; left:320px; }
.sanpoarea img.no7{ position:absolute; top:273px; left:362px; }
.sanpoarea img.no8{ position:absolute; top:289px; left:418px; }
.sanpoarea img.no9{ position:absolute; top:288px; left:478px; }
.sanpoarea img.no10{ position:absolute; top:287px; left:510px; }
.sanpoarea img.no11{ position:absolute; top:268px; left:537px; }
.sanpoarea img.no12{ position:absolute; top:297px; left:570px; }
.sanpoarea img.no13{ position:absolute; top:280px; left:630px; }
.sanpoarea img.no14{ position:absolute; top:280px; left:674px; }

/*  subpage  */
#HiroNigata-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; height:253px; 
	position:relative;	background:url("./sanpo/images/headHiroNigata.jpg") left top no-repeat; }
#NigataKawajiri-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; height:253px; 
	position:relative;	background:url("./sanpo/images/headNigataKawajiri.jpg") left top no-repeat; }
#KawajiriAto-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; height:253px; 
	position:relative;	background:url("./sanpo/images/headKawajiriAto.jpg") left top no-repeat; }
#AtoYasuura-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; height:253px; 
	position:relative;	background:url("./sanpo/images/headAtoYasuura.jpg") left top no-repeat; }
#YasuuraKazahaya-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; height:253px; 
	position:relative;	background:url("./sanpo/images/headYasuuraKazahaya.jpg") left top no-repeat; }
#KazahayaAkitsu-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; height:253px; 
	position:relative;	background:url("./sanpo/images/headKazahayaAkitsu.jpg") left top no-repeat; }
#AkitsuYoshina-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; height:253px; 
	position:relative;	background:url("./sanpo/images/headAkitsuYoshina.jpg") left top no-repeat; }
#YoshinaTakehara-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; height:253px; 
	position:relative;	background:url("./sanpo/images/headYoshinaTakehara.jpg") left top no-repeat; }
#TakeharaOonori-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; 
	height:253px; position:relative;	background:url("./sanpo/images/headTakeharaOonori.jpg") left top no-repeat; }
#OonoriNagahama-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; 
	height:253px; position:relative;	background:url("./sanpo/images/headOonoriNagahama.jpg") left top no-repeat; }
#NagahamaTadanoumi-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; 
	height:253px; position:relative;	background:url("./sanpo/images/headNagahamaTadanoumi.jpg") left top no-repeat; }
#TadanoumiSaizaki-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; 
	height:253px; position:relative;	background:url("./sanpo/images/headTadanoumiSaizaki.jpg") left top no-repeat; }
#SaizakiSunami-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; 
	height:253px; position:relative;	background:url("./sanpo/images/headSaizakiSunami.jpg") left top no-repeat; }
#SunamiMihara-header {	display: none;	padding: 0%; margin:0;	width: 100%; margin: 0px; 
	height:253px; position:relative;	background:url("./sanpo/images/headSunamiMihara.jpg") left top no-repeat; }

img.map{ position:absolute; top:0; left:190px; }
img.close{ position:absolute; top:20px; left:610px; }
img.toKure{ position:absolute; top:227px; left:0; }
img.toMihara{ position:absolute; top:227px; left:591px; }

.data{ width:350px; margin:20px 0 10px 7px; border-bottom:3px #cccccc dotted;
	display:block; overflow:auto; height:auto;  clear:both; padding-bottom:20px; }
.data img{ padding:5px;  }
.data div.txt{  font-size:85%; line-height:130%; width:95%; margin:5px 0 0 0; }
.data div.txt2{  font-size:85%; line-height:130%; width:95%; margin:5px 0 0 5px; }
html>body .data div.txt2{ margin:5px 0 0 5px; }
.data div.route{   width:340px; margin:5px 0 0 5px; font-size:80%; line-height:100%; text-align:left;
	background:url("./sanpo/images/access.gif") left top no-repeat; padding:22px 0 0 0; color:#666666;}

span.sub{ font-size:85%; color:#666666; font-weight:normal; }
.data div.img-area{ width:100%; text-align:center;   }
.data div.img-area img{ margin:auto; padding:auto; display:block;  }

/* commom */
.txt{ width:95%; text-align:left; margin:10px 0 10px 20px; font-size:0.9em; }

.txt02{ width:90%; text-align:left; margin:10px 0 10px 15px; font-size:0.9em; }

.imgarea{ width:100%; margin:10px 0; text-align:center; font-size:0.8em;  }
.imgarea img{ padding:0 0 5px 0; }
.imgarea div{ text-align:left; }

.imgarea2{ width:45%; margin:10px 0; text-align:center; font-size:0.8em;  }
.imgarea2 img{ padding:0 0 5px 0; }
.imgarea2 div{ text-align:left; }
	
.tolink{ padding:0; text-align:right; margin-top:10px; width:98%;
	 }

.link:after{
	font-family: FontAwesome;
	content: "\f08e";
	
	color:#F00;
	
	margin:-5px 0 0 5px;
	font-size: 1.2em;
}

.link2:after{
	font-family: FontAwesome;
	content: "\f101";
	
	color:#F00;
	
	margin:-5px 0 0 5px;
	font-size: 1.3em;
}

.pdf:after{
	font-family: FontAwesome;
	content: "\f1c1";
	
	color:#F00;
	
	margin:-5px 0 0 5px;
	font-size: 1.2em;
}

.navi{ display:none; }

dl.sub{ width:90%; margin:0 0 20px 0;  }

dl.sub dt {
clear: both;
width: 120px;
float:left;
text-align:left;
padding:5px 0 5px 20px;
font-size:1.0em;

}
dl.sub dt:before{
	font-family: FontAwesome;
	content: "\f04d ";
	
	color:#0066ff;
	
	margin:-5px 0 0 5px;
	font-size: 1.0em;
}

dl.sub dd {
margin:0;
margin: 5px 0px;
text-align:left;
width: 450px;
float:left;

font-size:1.0em;
}

dl.sub02{ width:90%; margin:0 0 20px 10px;  }

dl.sub02 dt {
clear: both;
width: 30%;
float:left;
text-align:left;
padding:5px 0 5px 0;
font-size:0.9em;

}
dl.sub02 dt:before{
	font-family: FontAwesome;
	content: "\f04d ";
	
	color:#0066ff;
	
	margin:-5px 0 0 5px;
	font-size: 1.0em;
}

dl.sub02 dd {
margin:0;
margin: 5px 0px;
text-align:left;
width: 65%;
float:left;

font-size:0.9em;
}

ul.sub{ width:90%; margin:0 0 20px 20px;
	list-style-type:disc; list-style-position:inside; }

ul.sub li {
clear: both;
text-align:left;
padding:5px 0 5px 10px;
font-size:1.0em;

}
	
h1.sub{ background:url(./images/list_bdr.gif) left bottom no-repeat;
	padding:0 0 10px 10px; width:770px; min-height:50x;
	margin:10px 0 0 0; text-align:left;
	
	font-size:1.2em;
	line-height:0.3;
}
h1.sub img{ vertical-align:middle; }


h2.sub {
  padding: .25em 0 .25em .75em;
  border-left: 6px solid #0066ff;
  margin:20px 0 20px 10px;
  
  text-align:left;
  font-size:1.0em;
  font-weight:normal;
  
}

h3.sub{
	margin:20px 0 20px 10px;
	text-align:left;
	
	font-size:1.0em;
	font-weight:normal;
}
h3.sub:before{
	font-family: FontAwesome;
	content: "\f04d ";
	
	color:#639;
	
	margin:-5px 0 0 5px;
	font-size: 1.0em;

}

h3.sub02{
	margin:20px 0 20px 10px;
	text-align:left;
	
	font-size:1.2em;
	font-weight:normal;
}
h3.sub02:before{
	font-family: FontAwesome;
	content: "\f04d ";
	
	color:#639;
	
	margin:-5px 0 0 5px;
	font-size: 1.0em;

}

.firstarea{ background:url(images/grass_border.png) left bottom no-repeat;
	padding:0 0 35px 0; width:720px; min-height:200px;
	margin:10px 0 0 20px; text-align:center;

}

.subarea{ padding:0 0 35px 0; width:720px; min-height:200px;
	margin:10px 0 0 20px; text-align:center;

}

.title{ font-size:1.2em; font-weight:bold; text-align:left; }

.f-imgarea{ width:555px; text-align:center; background:url(images/fimgarea_bk.png) center top no-repeat;
	height:420px; float:left;  }
.first-title{ float:right; margin-right:20px; }
.first-kiji{ width:700px; margin:0 auto; padding:10px 0; text-align:left; }

.listimg{ float:left; margin:10px 0 0 40px; }
.listarea1{ width:720px; margin:10px 0 0 20px; float:left; }
.listarea2{ width:450px; margin:10px 0 0 10px; float:left;  }
.list-kiji{ width:100%; margin:0 auto; padding:10px 0; text-align:left; }

.todetail{ color:#F66; background:url(images/arrow-r.png) top right no-repeat;
	padding:0 50px 0 0; text-align:right; margin-top:10px;
	 }
.todetail a:link {
	color: #F66;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
.todetail a:visited {
	color: #F66;
	text-decoration: underline;
}

.imgarea50{ width:100%; margin:10px 0; font-size:0.8em;  text-align:center;   }
.imbottom{ margin:115px 0 0 0; }
.imright{ text-align:right; }
.imgarea50 img{ padding:0 0 5px 0; margin:0 auto; }


.sub-menu{ width:90%; margin:auto; padding:auto; margin:10px 0 30px 0; text-align:left; 
	display:block; height:auto; visibility:visible; height:auto; clear:both;   }
.sub-menu ul{   margin:0; list-style-position:inside;}
.sub-menu li{ float:left; padding:0 0 10px 5px; margin:0 40px 0 0; list-style-type:none; }
.sub-menu li:before{
	font-family: FontAwesome;
	content: "\f0fe";
	
	color:#0066ff;
	
	margin:-5px 5px 0 0;
	font-size: 1.0em;
}

/* ~~ フッター ~~ */
.footer-wrap{ width:100%; height:auto; min-height:50px; color:#fff;
	 background-color:#0066ff;  display:block; padding-top:20px;}
.footer {
	width:360px; 
	margin:0 auto;
	
	text-align:center;
	min-height:90px;
	position:relative;
	
}
.f-title{ margin:auto 0; margin:0 0 20px 15px;
	text-align:center; width:330px; 
	}


.fmenu { width:100%; text-align:center;
}
.fmenu img{ margin:5px 0; }

.fcopy-wrap{ width:100%; background-color:#0066ff; display:block;  }
.fcopy {
	width:360px;
	margin: 0 auto;
	padding:10px 0; 
	text-align:center;
	font-size:0.7em;	
	
	min-height:20px;
	height:auto;

	color:#fff;
}


/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
}