@charset "utf-8";

/*  base
-------------------------------------------------------*/

A:link,
A:visited,
A:active
 { 
  color: #512;
  text-decoration: none 
}

A:hover
 { 
  color: #ff3399;
  text-decoration: none 
}

html,body {
  height:100%;
}

html,body,dl,dt,dd,ul,li,img
{
  padding:0px;
  margin:0px;
}
li
{
  list-style-type: none;
}

body
{
  background: #000 url("img/back.jpg") no-repeat fixed center top;
  background-size:cover;
  min-width: 100%;
  min-height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: auto;
}


#wrapper
{
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}


#wrapper:after,
div:after,
#card_list:after
 {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}


/*  navi
-------------------------------------------------------*/
#navi
{
  padding: 0px;
  position: fixed;
  left: 30px;
  margin: auto 0;
  top: 40%;
  z-index: 1;
}

#navi li span
{
  transition: opacity 0.5s cubic-bezier(.42, .01, .2, 1) 0s;
  margin-top: -4px;
  padding-left: 16px;
  position: fixed;
  display: block;
  font-size: 12px;
  color: #fff;
}

#navi li label:hover
{
  opacity: 1;
}


#navi li
{
  margin-bottom: 16px;
  margin-right: 16px;
  background-color: #555;
  border-radius: 50%;
}

#navi li label {
  transition: opacity 1s cubic-bezier(.42, .01, .2, 1) 0s;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
}

#slide_top:checked ~ #navi li:nth-of-type(1),
#slide_info1:checked ~ #navi li:nth-of-type(2),
#slide_info2:checked ~ #navi li:nth-of-type(3),
#slide_info3:checked ~ #navi li:nth-of-type(4),
#slide_info4:checked ~ #navi li:nth-of-type(5),
#slide_hanpu:checked ~ #navi li:nth-of-type(6)
{
  background-color: #fff;
}

#slide_top:checked ~ #slide {
  left:0%;
}

#slide_info1:checked ~ #slide {
  left: -100%;
}

#slide_info2:checked ~ #slide {
  left: -200%;
}

#slide_info3:checked ~ #slide {
  left: -300%;
}

#slide_info4:checked ~ #slide {
  left: -400%;
}

#slide_hanpu:checked ~ #slide {
  left: -500%;
}

input {display: none;}

/*  main
-------------------------------------------------------*/

#slide
{
  transition: left 1s cubic-bezier(.42, .01, .2, 1) 0s;
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  position: fixed;
  left:0%;
  z-index: 0;
}

#slide li
{
  display: block;
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: auto;
}

#top
{
  background-color: rgba(255,255,255,0.5);
  left:0%;
  color: #000;
}

#info1
{
  background-color: rgba(0,0,0,0.3);
  left:100%;
  color: #fff;
}

#info2
{
  background-color: rgba(255,255,255,0.5);
  left:200%;
  color: #000;
}

#info3
{
  background-color: rgba(0,0,0,0.3);
  left:300%;
  color: #fff;
}

#info4
{
  background-color: rgba(255,255,255,0.5);
  left:400%;
  color: #000;
}

#hanpu
{
  left:500%;
  color: #000;
}


/*  h3
-------------------------------------------------------*/

#slide label
{
  padding: 0px;

}


#slide h3
{
  display: inline;
  transition: right 0.8s cubic-bezier(.42, .01, .2, 1) 0s,
              letter-spacing 0.8s cubic-bezier(.42, .01, .2, 1) 0s;
  position: absolute;
  right: 10%;
  padding: 0px;
  text-align: right;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0px;
  color: #443;
}

#slide #info1 h3,
#slide #info3 h3
{
  color: #ddc;
}

#slide h3:hover
 {
  right: 9%;
  letter-spacing: 0.5px;
}

/*  back_button
-------------------------------------------------------*/

#back
{
  height: 100%;
  width: 165px;
  position: fixed;
}

#back div
{
  margin-top: 198px;
  width: 100%;
  height: 50%;
  min-height:280px; 
  max-height:480px; 
  display: block;
}

#back label:nth-child(-n+6)
{
  transition: color 0.8s cubic-bezier(.42, .01, .2, 1) 0s,
              z-index 0.8s cubic-bezier(.42, .01, .2, 1) 0s,
              opacity 0.8s cubic-bezier(.42, .01, .2, 1) 0s;
  position: absolute;
  padding: 0px;
  margin: 19px 0px 0px 0px;
  width: 100%;
  text-align: right;
  font-size: 18px;
  font-weight: bold;
  color: #443;
  letter-spacing: 0px;
  z-index: 0;
  opacity: 0;
}

#back label:nth-child(7)
{
  transition: color 0.8s cubic-bezier(.42, .01, .2, 1) 0s,
              z-index 0.8s cubic-bezier(.42, .01, .2, 1) 0s,
              opacity 0.8s cubic-bezier(.42, .01, .2, 1) 0s;
  position: absolute;
  padding: 0px;
  margin: 54px 0px 0px 0px;
  width: 100%;
  text-align: right;
  font-size: 18px;
  font-weight: bold;
  color: #ddc;
  letter-spacing: 0px;
  z-index: 0;
  opacity: 0;
}

#back label:nth-child(even)
{
  color: #ddc;
}

#back label:hover
 {
  color: #aaa;
}


#slide_top:checked ~ #back label:nth-child(2),
#slide_info1:checked ~ #back label:nth-child(3),
#slide_info2:checked ~ #back label:nth-child(4),
#slide_info3:checked ~ #back label:nth-child(5),
#slide_info4:checked ~ #back label:nth-child(6)
{
  z-index: 0;
  opacity: 0;

}

#slide_info1:checked ~ #back label:nth-child(2),
#slide_info2:checked ~ #back label:nth-child(3),
#slide_info3:checked ~ #back label:nth-child(4),
#slide_info4:checked ~ #back label:nth-child(5),
#slide_hanpu:checked ~ #back label:nth-child(6),
#slide_hanpu:checked ~ #back label:nth-child(7)
{
  z-index: 2;
  opacity: 1;

}

/*  text to layout
-------------------------------------------------------*/

#slide h1
{
  margin-top: 0px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 10px;
  font-family: "ＭＳ Ｐ明朝",serif;
}

#slide h2
{
  position: absolute;
  margin-top: 70px;
  margin-left: 170px;
  margin-bottom: 80px;
  padding: 0px;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 10px;
  font-family: "ＭＳ Ｐ明朝",serif;
}

#slide p
{
  margin-top: 0px;
  margin-bottom: 15px;
  margin-left: 170px;
  margin-right: 170px;
  padding: 0px;
  font-size: 14px;
}



#slide li div
{
  margin-top: 198px;
  width: 100%;
  height: 50%;
  min-height:280px; 
  max-height:480px; 
  display: block;
}

/*  top
-------------------------------------------------------*/

#top p
{
  display: block;
  text-align: center;
}

#slide #top div
{
  margin-top: 0px;
  width: 100%;
  height: 70%;
  min-height:478px; 
  max-height:640px; 
  display: block;
}


#top img
{
  display: block;
  margin: 50px auto 100px;
  text-align: center;
}

#top label[for="slide_info1"] h3
{
  margin-top:0px;
}

#top label[for="slide_hanpu"] h3
{
  margin-top:35px;
}


/*  info1
-------------------------------------------------------*/

#info1 img
{
  position: absolute;
  right: 190px;
  top: 300px;
  display: block;
  opacity: 0.8;
  z-index: -1;
}

/*  info2
-------------------------------------------------------*/

#info2 img
{
  display: block;
  position: absolute;
  right: 250px;
  top: 300px;
  opacity: 0.8;
  z-index: -1;
}


/*  info3
-------------------------------------------------------*/

#slide #info3 img[src="img/info3_1.png"]
{
  top: 200px;
  right: 160px;
  position: absolute;
  z-index: -1;
  opacity: 0.9;
}


#slide #info3 img[src="img/info3_2.png"]
{
  top: 330px;
  right:600px;
  bottom: 20px;
  position: absolute;
  z-index: -1;
  opacity: 0.4;
}

/*  info4
-------------------------------------------------------*/

#slide #info4 img
{
  float: right;
  padding-right: 170px;
  margin-left: 10px;
}

#slide #info4 div p:nth-child(5)
{
  transition: color 0.8s cubic-bezier(.42, .01, .2, 1) 0s,
              letter-spacing 2s cubic-bezier(.42, .01, .2, 1) 0s;
  margin-top: 100px;
  font-size: 18px;
  font-weight: bold;
  color: #443;
  letter-spacing: 0px;
  margin-left: 30%;
}

#slide #info4 p:nth-child(5):hover
 {
  display: block; 
  color: #665;
  letter-spacing: 0.5px;
}


/*  hanpu
-------------------------------------------------------*/


#slide #hanpu h4
{
  margin: 0px;
  padding: 0px;
  font-weight: bold;
  font-size: 16px;
}

#slide #hanpu h5
{
  margin: 0px 0px 0px 10px;
  padding: 0px;
  font-weight: bold;
  font-size: 14px;
  color: #512;
}

#slide #hanpu h2
{
  margin-bottom: 40px;
}

#slide #hanpu img
{
  margin-top: 5px;
}

#slide #hanpu img[src="img/tumblr_logo_white_blue_16.png"]
{
  margin: 0 2px;
  padding-bottom: 3px;
  vertical-align: bottom;
}

#slide #hanpu div div
{
  background-color: rgba(255,255,255,0.5);

  margin-top: 0px;
  height: auto;
  min-height: 0px; 
  max-height: auto; 
  display: block;
  margin-left: 170px;
  margin-bottom: 20px;
  padding: 5px 15px;
  width:450px;
}

#slide #hanpu p
{
  margin: 5px 0px;
}

/*  card_list
-------------------------------------------------------*/

#card_list
{
  background-color: rgba(255,255,255,0.5);
  margin: 0px;
  padding: 0px;
  color: #000;
}

#card_list #text
{
  padding: 50px 0px;
  margin: 0 auto;
  width: 700px;
}

#card_list #text p
{
  font-size: 14px;
  margin: 0px 0px 20px 0px;
  padding: 0px;
}

#card_list dl
{
  margin: 0px auto;
  width: 930px;
  clear: both;
}

#card_list dl dt
{
  padding-top: 10px; 
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0px;
}

#card_list dl dd
{
  float: left;
  margin: 0px;
  padding: 0px 5px;
}

#card_list dl dd:nth-child(5),
#card_list dl dd:nth-child(8)
{
  clear: both;
  float: left;
  margin: 0px;
  padding: 0px 5px;
}

#card_list dl dd img
{
  margin: 0px;
  padding: 0px;
}