body{
	/*フォントと背景*/
	font-family:sans-serif;
	font-size:18px;
	background:#fcfaf2;
}
/*アイコンとタイトルの配置*/
#title{
	position:absolute;
	top:140px;
	left:50%;
	margin-left:-360px;
}
#icon{
	/*中央揃え*/
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-top:28px;
	/*アイコンっぽく装飾*/
	border:1px solid #dddddd;
	border-radius:24px;
}
h3{
	/*タイトルの書式*/
	text-align:center;
	font-size:42px;
	margin-top:0;
	margin-bottom:-20px;
	color:#4c4c4c;
}
#title p{text-align:center;}/*for iPhone/iPad*/
#screenshot img{
	/*中央揃え*/
	position:absolute;
	top:32px;
 left:68%;
 margin-left:-197px;
	width:384px;
	height:512px;
	border:1px solid #dddddd;
}
/*画面切り替え用*/
#img1{opacity:1;}
#img2{opacity:0;}

#tablist{
	/*リスト配置*/
	position:absolute;
	top:570px;
	left:50%;
	margin-left:-500px;
}
#nav{list-style:none;}
#nav li{float:left;}
#nav li a{
	/*タブメニューのスタイル*/
	display:block;
	width:180px;
	margin-right:1px;
	text-align:center;
	text-decoration:none;
	background:#66ccff;
	font-size:24px;
	color:#4c4c4c;
}
#nav li a:hover{background:#ffcc66;}
#nav li:first-child a{background:#ffcc66;}/*左端をデフォルト表示*/
#tab1:target #nav li a[href$="tab1"],
#tab2:target #nav li a[href$="tab2"],
#tab3:target #nav li a[href$="tab3"],
#tab4:target #nav li a[href$="tab4"],
#tab5:target #nav li a[href$="tab5"]{background:#ffcc66;}/*タブメニューが押された場合*/
:not([id="tab1"]):target #nav li a[href$="tab1"]{background:#66ccff;}/*押されなかったメニューの対応*/

hr{
	border:2px solid #ffcc66;
	margin-left:40px;
}

.contents{
	/*タブリストの配置*/
	height:240px;
	width:860px;
	margin-top:52px;
	margin-left:40px;
}

/*タブリストの表示設定*/
.contents div{
	display:block;
	margin-top:-18px;
	margin-left:24px;
	display:none;
	z-index:1;
}
.contents div:first-child{
	/*左端をデフォルト表示*/
	display:block;
	z-index:2;
}
#tab1:target .contents .tab1,
#tab2:target .contents .tab2,
#tab3:target .contents .tab3,
#tab4:target .contents .tab4,
#tab5:target .contents .tab5{
	/*押されたメニューにそって表示*/
	display:block;
	z-index:2;
}
#tab1:target .contents div:not([class="tab1"]),
#tab2:target .contents div:not([class="tab2"]),
#tab3:target .contents div:not([class="tab3"]),
#tab4:target .contents div:not([class="tab4"]),
#tab5:target .contents div:not([class="tab5"]){
	/*それ以外を非表示*/
	display:none;
	z-index:1;
}
.word{
	/*文章の書式*/
	margin-top:-30px;
	text-align:left;
}
h5{
	/*内容での見出しの書式*/
	font-size:18px;
	margin-bottom:-2px;
}
/*リンクメニューのアンカーフォント*/
.link a{
	font-size:24px;
	color:#000000;
}
.link a:hover{color:#4c4c4c;}