/* CSS Document */

@charset "UTF-8";
/*リセットCSS*/
/* http://meyerweb.com/eric/tools/css/reset/
02
   v2.0 | 20110126
03
   License: none (public domain)
04
*/
05
 
06
html, body, div, span, applet, object, iframe,
07
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
08
a, abbr, acronym, address, big, cite, code,
09
del, dfn, em, img, ins, kbd, q, s, samp,
10
small, strike, strong, sub, sup, tt, var,
11
b, u, i, center,
12
dl, dt, dd, ol, ul, li,
13
fieldset, form, label, legend,
14
table, caption, tbody, tfoot, thead, tr, th, td,
15
article, aside, canvas, details, embed,
16
figure, figcaption, footer, header, hgroup,
17
menu, nav, output, ruby, section, summary,
18
time, mark, audio, video {
19
    margin: 0;
20
    padding: 0;
21
    border: 0;
22
    font-size: 100%;
23
    font: inherit;
24
    vertical-align: baseline;
25
}
26
/* HTML5 display-role reset for older browsers */
27
article, aside, details, figcaption, figure,
28
footer, header, hgroup, menu, nav, section {
29
    display: block;
30
}
31
body {
32
    line-height: 1;
33
}
34
ol, ul {
35
    list-style: none;
36
}
37
blockquote, q {
38
    quotes: none;
39
}
40
blockquote:before, blockquote:after,
41
q:before, q:after {
42
    content: '';
43
    content: none;
44
}
45
table {
46
    border-collapse: collapse;
47
    border-spacing: 0;
48
}
/*リセットCSS*/

body{
	width:100%;
	font-family:"Yu Mincho", "YuMincho", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", serif;;
	color:#630;
	line-height:25px;
	font-size:0.85em;
	margin:0;
}

#wrap {
	width:1024px;
	height:auto;
	padding-top:0;
	margin:0 auto;
	padding:0;
}

#main{
	text-align:center;	
	/*position:relative;*/
}
#a1{
	position:relative;
	z-index:1;
}
#a2{
	 position:absolute;
	 top:0;
	 opacity:0;
	 z-index:6;
}
#a2:hover {
	opacity:1.0;
}
#a3{
	 position:absolute;
	 top:0;
	 left:656px;
	 opacity:0;
	 z-index:7;
}
#a3:hover {
	opacity:1.0;
}
#a4{
	 position:absolute;
	 top:0;
	 left:946px;
	 opacity:0;
	 z-index:8;
}
#a4:hover {
	opacity:1.0;
}


img {
	width:100%;
	max-width: 1024px;
	height: auto;
	margin:0;
	padding:0;
	vertical-align:bottom;
}

figure{
	margin:0;
	padding:0;
}

footer{
	float:left;
}

#none{
	display: none;
}

/*hbmenu**/
.header {
  position: fixed;
  left: 12%;
  top: 0;
  width: 1024px;/*touch*/
  height: 55px;/*touch*/
  z-index:200;
}
.global-nav {
  position: fixed;
  right: -320px; /* これで隠れる */
  top: 0;
  width: 300px; /* スマホに収まるくらい */
  height: 100vh;
  padding-top: 55px;
  background-color: #fff;
  transition: all .6s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
  position: fixed;
  right: 12%; /*ハンバーガーメニューが写真上に乗るように右スペースを調整*//*touch*/
  top: 5px; /*ハンバーガーメニューのtopを調整*//*touch*/
  width: 8%; /* クリックしやすいようにちゃんと幅を指定する *//*touch*/
  /*height:12%;*/ /* クリックしやすいようにちゃんと高さを指定する */
  min-width:40px;/*touch*/
  min-height:40px;/*touch*/
  max-width:70px;/*touch*/
  max-height:70px;/*touch*/
  cursor: pointer;
  z-index: 300;
}

.hamburger:before {
	content:"";
	display: block;
	padding-top: 100%; /* 3:5の縦横比の場合3/5=0.6×100で60% */
}
	
.global-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-nav__item {
  text-align: center;
  padding: 0 20px;
}
.global-nav__item a {
  display: block;
  padding: 15px 0;
  border-bottom: 6px solid #eee;
  text-decoration: none;
  color: #111;
}
.global-nav__item a:hover {
  background-color: #eee;
}
.hamburger__line {
  position: absolute;
  /*left: 15px;*/
  width: 70%;/*touch*/
  height: 2%;/*touch*/
  background-color: #111;
  transition: all .6s;
}
.hamburger__line--1 {
  top: 25%;/*touch*/
}
.hamburger__line--2 {
  top: 50%;/*touch*/
}
.hamburger__line--3 {
  top: 75%;/*touch*/
}
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all .6s;
  cursor: pointer;
}

/* 表示された時用のCSS */
.nav-open .global-nav {
  right: 0;
}
.nav-open .black-bg {
  opacity: .8;
  visibility: visible;
}
.nav-open .hamburger__line--1 {
  transform: rotate(45deg);
  top: 20px;
}
.nav-open .hamburger__line--2 {
  width: 0;
  left: 50%;
}
.nav-open .hamburger__line--3 {
  transform: rotate(-45deg);
  top: 20px;
}
#rspsv1{
	display:none;
}
#rspsv2{
	display:none;
}

/*ここからフッターを保つためのブレイクポイント*/
@media screen and (max-width:1024px) {
#wrap {
	width:100%;
}
}
/*ここまでフッターを保つためのブレイクポイント*/

/*ここからレスポンシブ（スマホ）*/
@media screen and (max-width:702px) {
#rspsv1{
	display:block;
}
#rspsv2{
	display:none;
}
#a1{
	display:none;
}
}

/*@media screen and (max-width:500px) {
#rspsv2{
	display:block;
}
#rspsv1{
	display:none;
}
#a1{
	display:none;
}
}
*/
/*ここまでレスポンシブ（スマホ）*/