@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700|Lato:100,300,400,700,900);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html {
  position: relative;
}

body {
  position: relative;
}

header  {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  background-color: rgba(255,255,255,0);
}

.is-fixed  {
  position:  fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  background-color: rgba(255,255,255,1);
  -webkit-transition: all .4s ease 0s,background .6s ease .2s;
  transition: all .4s ease 0s,background .6s ease .2s;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  height: 50px; 
}

header nav{
	width:820px;
	margin: 0 auto;
	position: relative;
}

header nav ul{
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;	
}

header nav ul li a {
  display: block;
  padding-top: 10px;
	font-weight: 700;
	font-family: 'Titillium Web', sans-serif;
	letter-spacing: 0.1em;
	font-size: 120%;	
}


header nav ul li a:hover {
	opacity:0.6;
}

/*ドロップダウンメニュー*/

.nav > li:hover > a {/*layer-1*/
  background: #fff;
  
}
.nav li ul {
  width: 120px;
  display: none;
  margin-left: -20px;
  position: absolute;
  background: #fff;
  padding-bottom:10px;
  padding-top:5px;
}


.nav > li li:hover > a {/*layer-2*/

}
.nav li ul li a {
  font-size:100%;
  letter-spacing:0;
  padding-left:12px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 500;
  line-height:1.3em;
}

.sp {
        display: none;
 }


@media screen and (max-width: 896px) {
	
body{
   width:100%;
   font-size:80%;	
}

main{
	overflow:hidden;
}
	
header nav{
	width:90%;
	margin-left:5%;
}

.is-fixed  {
  height: 45px; 
}

header nav ul li{
	font-size:90%;
	letter-spacing:0.1em;
}

header nav ul li a{
	letter-spacing:0;
}

.nav li ul li a {
  font-size:120%;
  padding-top:8px;
  padding-left:10px;
  line-height:1.3em;
}

.nav li ul{
  margin-left:-40px;
  width: 100px;
  padding-bottom:8px;
}

}


@media screen and (max-width: 559px) {
	
body{
   width:100%;
   font-size:70%;
}

.pc {
        display: none;
}
.sp {
        display: block;
}

.is-fixed{
	height:60px;
	background-color:#fff;
}

header nav{
	oveflow:hidden;	
}

header nav ul li{
	width:25%;
	text-align:center;
	line-height:1.4em;
	font-size:95%;
}

.nav li ul li a {
  font-size:115%;
  padding-top:7px;
  padding-left:0;
}

.nav li ul{
  margin-left:-1%;
  width: 100px;
}

.nav li ul li{
	width:100%;
}
}