@charset "utf-8";


.space{
    letter-spacing: .1em;
}

.a {
    margin-bottom:3em;
}

/*見出し*/
.main {
    padding: 0.6em;/*文字周りの余白*/
    color: #494949;/*文字色*/
    background: #D3EDFB;/*背景色*/
    border-left: solid 10px #7DCEFA;/*左線（実線 太さ 色）*/
    border-radius: 0.2em;/*角丸*/
}
.sub1 {
    padding: 0.5em;/*文字周りの余白*/
    color: #494949;/*文字色*/
    background: #F0F8FF; /*背景色*/
    border-left: solid 7px #7DCEFA;/*左線（実線 太さ 色）*/
    border-radius: 0.2em;/*角丸*/
}
.sub2 {
    padding: 0.5em;/*文字周りの余白*/
    color: #494949;/*文字色*/
    background: ghostwhite;  /*背景色*/
    border-left: solid 5px #7DCEFA;/*左線（実線 太さ 色）*/
    border-radius: 0.2em;/*角丸*/
}



/* Menu */

header{
	position: relative;
	width: 100%;
	background-color: white;  /* タブの色変更 */
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-erea{
    margin:auto;
    text-align:center;
    font-size:20px;
    font-weight:bold;
}

ul > li{
	display: inline-block;
}
ul > li > a{
	padding: 15px 30px;
	display: block;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: .2em;
}
ul > li > span{
	margin-left: 1.2em;
}
ul > li:hover > a{
	background-color:#fff;
	color: #444;
}

/* Submenu */

ul li ul{
	position: absolute;
	top: 105px;
	left: 60;
	z-index: 100;
}
ul li ul li{
	display: block;
}
ul li ul li a{
	background-color: #fff;
	color: #444;
}
ul li ul li a:hover{
	background-color: #ddd;
}

/*	Sample01
------------------------------------------*/

.sample01 ul li ul{
	display: none;
}
.sample01 ul li:hover ul{
	display: block;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

@media screen and (max-width:900px) {    
    header{
        height: 60px;
    }
    
    .logo-erea{
        position: absolute;
        top: 15;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    
#nav-drawer {
  position: relative;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
    padding-top:15px;
    padding-left:10px;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 320px;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: white;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.header-logo-menu{
	display: flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-direction: row;
	-moz-flex-direction: row;
	-o-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
}
    
    ul li{
        width: 100%;
    }
}



/* スライドショー */

.slideshow {
	position: relative;
	overflow: hidden;
}

/* :::::: slideContents :::::: */
.slideContents {
	position: relative;
	/*background: white;*/
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
}
.slideContents section {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.slideContents section img {
	max-width: 100%;
	/*padding: 0 50px;*/
	box-sizing: border-box;
	vertical-align: middle;
}

/* :::::: mechanism :::::: */
.slideContents #slide1 {
	position: relative;
}
.slideContents section {
	animation: autoplay 30s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes autoplay {
	0%, 16%, 100% { transform: none; }
	20% { transform: translateX(-100%); }
	20.001%, 96% { transform: translateX(100%); }
}
.slideContents #slide1 { animation-delay: 0s; }
.slideContents #slide2 { animation-delay: -24s; }
.slideContents #slide3 { animation-delay: -18s; }
.slideContents #slide4 { animation-delay: -12s; }
.slideContents #slide5 { animation-delay: -6s; }