/* 富士山麓のページ　css */

/* body background-image:url(b-s.gif);グレーの壁紙指定*/
/* header{ navのバック色に薄緑系の色を指定　*/
/*.link_group background-color:#FEEEED;ピンク #d3ebc1;緑 */

body{
/*	background-image:url(p0/b-s3.gif); */
	background-image:url(p0/b-py.gif);
	  /*グレーの壁紙指定*/
	color:#333333;
	  /*基本文字色は文字色黒を指定*/
	font-family: "メイリオ","Hiragino Kaku Gothic Pro","sans-serif";
　	  /*基本フォントはゴシックを指定定*/
	font-size: 100%;
	margin: 0;
	padding: 0;
}

header{
/*	background-color:#FEEEED;*/
/*	background-color:#d3ebc1;*/
	background-color:#d6d081;

	background-image:url(p0/b-sy.jpg);
	/*.link_group background-color:#FEEEED;ピンク #d3ebc1;薄緑 */
}

nav ul{
	font-weight: bold;
	text-align:right;
	padding-top:31px;
	padding-bottom:5px;
	margin:0;
}
	/*<!--nav グローバルナビゲーションと呼ぶ-->　*/
	/*<nav>	の表示整え*/
	/*①太字フォント　②右揃えにする*/
	/*③表示位置上の色部分を伸ばす*/
	/*④表示位置下の色部分を伸ばす*/
	/*④風景との間との調整だが少し間が開いた*/
	/*④padding-bottomを5->7PXで空白が消えた！*/
	/*⑤風景とロゴの間をゼロにする*/

nav li{
	display:inline;
	padding-left:5px;
	padding-right:5px;	
	border-right:1px solid #003366;
	/*nav中のアイテム毎の仕切り縦線 紺色 左右10px余白*/
}
	/*<navの実際の案内文の整え>/
	/*①1行に表示！このままではロゴの下に1行のみ表示となる*/
	/*②③単位ごとに左右10PX幅を持たせる*/
	/*④字間に｜ボーダーを表示させる |にも10PX付加される*/
	/*④border-left:1px solid #ffffff;を入れたら2重線になった*/

header img{
	float:left;
}
	/*①ロゴの横上にnavが表示されるようになるが風景も並ぶ。この回避のために　*/


.header-in{
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}
	/* ①～③header-in classで定義し、960ピクセルに入れる
	　　[帯]を切らさないためのclass設定 
	 　ただし、小さくすると字が途切れてしまう
	　　それ自体はnot responsible design　*/

article{
	position: relative;
	clear:both;
/*	width:960px;  */
	width:1060px; 
	margin-left:auto;
	margin-right:auto;
	background:rgba(255,255,255,0.4);
	/*白の帯を960widthに薄白の帯を指定（読みやすくなる為） */

	/*padding:0 20px;*/
	/*文字右空白を少し入れた。写真のpaddingを変える必要が出た*/
	/*sectionに　padding:0 20px;を指定した*/
}
	/* ①.catch.のabsoluteの前に相対位置を規定する*/
	/* ⓪cf:border-radiusを入れて画像が丸くなる適用例下記*/
	/* img{	border-radius:100px 20px 100px 20px;}*/
	/* ②風景画像が下側に回る、行間が消えてくっつく
	　　clearは回り込みをclear both でやめる*/
	/* ③表示は変わらない*/
	/* ④風景写真が中央に来る　margin-left:auto; */
	/* ⑤風景写真が中央に来る　margin-right:auto;*/
	/* ⓪background:url(../image/list.gif);
	　repeat:;
	　横と縦に繰り返し表示される repeat全面 repeat-x横方向　
	　repeat-y縦方向　no-repeat1個のみ*/

section{
padding:0 20px;*/
	}
/*sectionに20px左余白を入れるようにした*/



.catch{
	position:absolute;
	margin:0px 0;
	top:10px;
	left:20px;
	color: #FFFFFF;
	text-shadow:0 3px 3px #000000;
	background-color:rgba(255,255,70,0.4);
/*	background-color:#000000;*/
	/*ページ毎のタイトル文字指定　文字色白　影字黒*/
}


.catch2{
	position:absolute;
	top:10px;

	left:20px;
	color: #000000;
	text-shadow:0 2px 2px #69B076;
	/*ページ毎のタイトル文字指定２　文字色黒　影字緑*/
	/*catch or catch2はhtmlで指定する*/
}
	/* h1にbackground-colorを入れる作例もあった*/
	/* background-color:rgba(0,0,0,0.5); */
	/* 0.5が半透明を示す */ 

.catch3{
	position:absolute;
	margin:170px auto auto 80px;
	top:10px;
	left:20px;
	color: #FF0000;
	text-shadow:0 3px 3px #000000;
	background-color:rgba(255,255,70,0.5);
/*	background-color:#000000;*/
	/*ページ毎のタイトル文字指定　文字色白　影字黒*/
}


p{
	font-size: 90%;
	line-height:0;
}

/*htmlでうまくいかないので適当に入れてみた*/
.niko1{
margin:0 auto;
	float:none;
}

h1{
	font-size: 180%;
}
/*
h1#sub{
	font-size: 180%;
	border-left: 30px solid #008000;
	border-bottom: 1px dashed #036;
}	padding: 0 0 0 7px;
*/


h2{
	font-size: 26px;
/*	border-bottom: 1px dashed #036;*/
	border-left: 20px solid #008000;
	padding: 0 0 0 7px;
}

	/*h2文字として表現を指定*/
	/*「お知らせ」の破線アンダーの左に縦太線　見栄え　*/ 
	/* border bottom */ 
	/* paddingならできて、padding-leftだとできなかった */ 

h3{
/*	width:300px;*/
	font-size: 22px;
/*	border-bottom: 1px dashed #036;*/
	border-left: 12px solid #487C38;
	padding: 0 0 0 7px;
}

h4{
	font-size: 18px;
	border-left: 10px solid #487C38;
	padding: 0 0 0 7px;
}


footer{
text-align: center;
border-top: 5px solid #036;
}


.maingazo{
	background-color:#0099ff;}


ul{
	list-style: none;
	padding-left:0;
	line-height:1.8;
	font-size:90%;
}

ul time{
	border-radius:2px 10px 2px 10px;
	background-color:#999999;
	color:#ffffff;

	font-size:90%;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 5px;
}
	/*html部分<time datetime="2015-08-20">08/20</time>年内*/
	/* ①border-radius は　左上　左下　右下　右上*/
	/* ①border-radius は　画像にも適用可能*/
	/* ①border-radius は　数値をずらして平行四辺形可能*/
	/* ①②③time部分 に角丸化＆背景色化＆文字色を白化*/
	/* ④～⑦角丸内の処理　が2段目、文字を少し小さくして余白追加*/


.subu-h1{
	background-image:linear-gradient(to left,#ffffff,#dcdcdc);
	padding-left:10px;
	border-left:15px solid #003366;
}
	/*①②pointhtml専用のsubの定義　グラデーションバック*/
	/*　規定文がスペル間違いしやすい*/
	/*③border-commandで左線が付いてデザインの統一感が出る*/

y.point-list{
	list-style-image:url(../image/list.gif);
	font-weight:bold;
	margin-left:30px;
}
	/* ①一階層上がる　→(../image/list);
	　 ①点（list.gif）を頭につけてリスト表示する
	　 ②太文字化
	　 ③liはマージンゼロを宣言したので、30pxを再宣言する
	*/

.point-img{
	float:right;
	margin-left:20px;
}
	/* class="point-img"に規定を受けて位置を決める*/

.sentou{
	clear:both;
	text-align:right;
}
	/*point-imgで左詰めすると、このページの先頭へも回り込んでしまう
	　その回避として、回り込みの中止と文字の左詰めを設定して整える。
	　そのため、「このページの先頭へ」をhtml上でclass設定し、規定を追加*/

ol li{
	display:inline;
	margin-right:5px;
	font-size:80%;
}

ol{
	padding-left:0;
}
	/*パンくずリストの対応*/
	/*<article> <ol> <li>トップ&nbsp;&nbsp;&gt;</li>
	  <li>物件選びのポイント</li> </ol>に対応 */

.page{
	padding-left:10px;
	padding-right:10px;
}/*文章全体に左右10pxの余白設定写真には余白をつけないために全体<article>には余白設定せず*/

nav a{
	text-decoration:none;
/*	color:#ffffff; */
	color:#003366;

}
	/*#003366 紺色*/
	/*リンク先を白→黒っぽい色にする＆リンク表示をやめる*/


nav a:hover{
 color:#fdd1b0;
 background-color:#008000;
}
	/*マウスを置くとリンク先を緑にする*/

.link_group{
	display:block;
	color:#fdd1b0;
	text-decoration: none;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:5px;
/*	background-color:#dcdcdc;*/
	font-size:120%;
/*	border-bottom:2px dotted #666666;  */
	padding-left:5px;
	
}

.link_group li{
	display:block;
	color:#333333;
	text-decoration:none;
	padding-top:10px;
	padding-bottom:0px;
	padding-left:5px;
	background-color:#d3ebc1; 
/*	background-color:#FEEEED; */
	background-color:#d3ebc1; 
/*.link_group background-color:#FEEEED;ピンク #d3ebc1;緑 */

	font-size:120%;
/*	border-bottom:0px dotted #666666;  */
	padding-left:5px;

}

.link_group a:hover{
	background-color:#008000;
	color:#fff;
}

.link-group{
	display:block;
	color:#fdd1b0;
	text-decoration: none;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:5px;
/*	background-color:#dcdcdc;*/
	font-size:120%;
	padding-left:5px;
}
.link-group a:hover{


	background-color:#008000;
	color:#fff;
}

.link_group2{	
	width:740px;	
}	


.link_group2 a{
/*	text-decoration:none; */
	color:#003366;
}
	/*#003366 紺色*/
	/*リンク先を白→黒っぽい色にする＆リンク表示をやめる*/

.link_group2 a:hover{
 color:#fdd1b0;
 background-color:#008000;
/*	color:#008000; */
	font-weight:bold;
}
	/*マウスを置くとリンク先を緑にする*/


.photolink01{
overflow: visible;
width: 100%;
height: 100%;
}

.photolink01 img{
display: block;
transition-duration: 0.5s;
}

.photolink01 img:hover {
transform: scale(3.0,3.0);
transition-duration: 0.5s;
}




/*　以下　テーブル規定 */
table{
	border:1px solid #333;
	font-size:90%;
	margin:0 0 0 40px;
/*	margin:0 auto 20px;*/

	border-collapse:collapse;
}
/* テーブルの線を1本にする、今風！　boder-collapse:collapse; */
th{
	background-color:#d3ebc1;
/* 薄い緑でテーブルヘッダ */
/*	background-color:#FEEEED;  薄ピンク*/

	border:1px solid #333333;
	padding:10px;
/*	width:20%;   */
}
/* 20% で全体への率を固定できる　width:20%;*/
td{
	border:1px solid #333333;
	padding:10px;

}
/* tdにも線を加える　*/
caption{
caption-side:bottom;
}
/* caption　の場所を下に表示する*/
/*テーブル規定 以上*/





/*959px以下の場合*/
@media(max-width:959px){
header img{
	float:none;
}
nav ul{
	text-align:left;
	padding:0;
}
article{
	width:auto;
}
article img{
	max-width:100%;
	height:auto;
}
.header-in{
	width:auto;
}
}
/*レスポンシブル対応規定、メディアクエリは最終に定義する
　①フロートをしない。
　②③左に戻す（左詰め）にして、左に間がないようする*/
/*④⑤⑥アーティクルの中の画像もちょうせいされるようになる*/
/*⑦ヘッダーインでも960pxを規定していたので自動化する*/

/*600px以下の場合*/
@media(max-width:600px){
nav li{
font-size: 75%;
padding-left: 2px;
padding-right: 2px;
}
.catch{
	top:5px;
	left:5px;

}
.point-img{
	float:none;
	width:90%;
	/*写真を大きくする*/
}
	/*回り込ませず、下に表示させる*/
}
	/*字も小さくして、空白も小さくする荒技 
	クラスcatch の空白も小さくする*/