﻿/* 共通css */
/* 文字 */
h1,h2,h3,h4,h5,h6,p {
	margin : 0;
	padding : 1%;
	line-height : 1.4em;
}
/* img */
img {
	max-width : 100%;
}
/* サイト体裁 */
html {
	overflow-x: hidden; /* iOSはこれを指定しないと言うことを聞かない */
}
body {
	background : #ccc;
	padding : 0;
	margin : 0;
	font-family : sans-serif;
	font-size : 100%;
	line-height : 1.4em;
	position: relative;
	left: 0;
	margin-left : 10%;/* メニュー表示のために左を空けておく */
}
a {
	text-decoration: none;
}
/* wrapper */
#wrapper {
	position : relative;
}

/* header*/
header img {
	width: 100%;
}

/* footer */
footer {
	width: 100%;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 1px;
}
/* global menu */
nav {
	 position : absolute;
	 color : white;
}
ul#menu {
	left : 0;
	float : left;
	position:fixed;
	margin : 0;
	background : black;
	height : 100vh;
	width : 10%;
	padding-left : 0;
}
li.menu_item {
	margin : auto;;
	padding : 10px 0;
	width : 90%;
	list-style-type: none;
	text-align : center;
}
li:hover {
	background : #333;
}
ul a {
	color: white;
}
.menu_center {
	top : 30vh;
	bottom : 0;
	left : 0;
	right : 0;
	position : absolute;
	margin : auto;
}
#slide_button {
	display : none;
	position : fixed;
	float : left;
	height : 100vh;
	width: 20%;
	background : #888;
	color : white;
	font-size : 4vw;
	left : 0;
}
#slide_menu_text {
	top : 40vh;
	position : absolute;
	margin : 0 auto;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	right : 7.7vw;
}
/* SPでスライドメニューを出す */
@media screen and (max-width:780px){
	#slide_button {
		display : block;
	}
	ul#menu {
		top : 0;
		left : -30%;
		width: 25%;
	}
	body {
		margin-left : 20%;
	}
}
#topbutton {
	/* ▼表示位置を画面の右下に固定 */
	 position: fixed; /* ←表示場所を固定 */
	 bottom: 18px;   /* ←下端からの距離 */
	 right: 18px;    /* ←右端からの距離 */
	 width: 7em;     /* ←横幅 */

	 /* ▼最初は非表示にしておく */
	 display: none;

	/* ▼配色・配置・文字の装飾など */
	background-color: #2525aa; /* ←背景色 */
	opacity: 0.75;             /* ←透明度 */
	border-radius: 24px;       /* ←角丸の半径 */
	text-align: center;    /* ←文字の位置 */
	font-size: 120%;       /* ←文字サイズ */
	font-weight: bold;     /* ←文字の太さ */
	margin: 0px;    /* ←外側の余白 */
	padding: 10px;  /* ←内側の余白 */
	z-index : 100;
}
@media screen and (max-width:780px){
	#topbutton {
		bottom : auto;
	 	top: 18px;   /* ←広告が じゃまなので えーい */
	}
}
#topbutton a {
	/* ▼リンクの装飾 */
	color: white;          /* ←文字色 */
	text-decoration: none; /* ←下線なし */
}
#topbutton a:hover {
	/* ▼マウスが載ったときの装飾 */
	color: yellow;              /* ←文字色 */
	text-decoration: underline; /* ←下線あり */
}
