@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h3, h4, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;
}
:focus{outline:0;}

ol, ul{list-style:none;}
blockquote:before, blockquote:after,q:before, q:after{content:"";}
blockquote, q{quotes:"" "";}
a img{border:0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
/* -------------------------------------------------------------- */

body{
color:#333;
font-size:14px;
font-family:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:2;
-webkit-text-size-adjust:100%;
}

@media only screen and (max-width: 850px)
 {
body{
line-height:1.8;
}	
}	

/* リンク設定
------------------------------------------------------------*/
a{
	
color: #ff667d; /*  #2474b5;---------*/
text-decoration:none;}

a:hover{
color:#ffb3bf;}/*  #c6e5ec;---------*/

a:active, a:focus {
outline:0;}

a img.mouselink{
	background: none!important;}
 
a:hover img.mouselink{
　opacity: 0.4;
　filter: alpha(opacity=40);
　-ms-filter: "alpha( opacity=40 )";
　background: none!important;}
	
	
.telno a[href^="tel:"] {
  pointer-events: none;
  text-decoration: none;
  color: #333;
}


/* 全体
------------------------------------------------------------*/
#wrapper{
margin:0 auto;
padding:0 1%;
width:98%;
position:relative;
}

.inner{
margin:0 auto;
width:100%;
}



/* パソコンのみ表示 */
@media only screen and (max-width: 850px)
 {
.inner{
	display:none;
  }
}	


.mini{
font-size:10px;
}
.mini12{
font-size:12px;
}



/* パソコンのみ表示 */
@media only screen and (max-width: 850px)
 {
.post-lead{
	display:none;
  }
}

/* pcのみ表示 */
/* パソコンで見たときは"pc2"のclassがついた画像が表示される */
.pc2 { display: block; }
.tb { display: none; }
/* スマートフォンとタブレットで見たときは"tb"のclassがついた画像が表示される */
@media only screen and (max-width: 850px) {
.pc2 { display: none; }
.tb { display: block; }
}



/* pcとタブレット表示"pc" */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマホのみ表示 "sp"*/
@media only screen and (max-width: 500px) {
.pc { display: none !important; }
.sp { display: block !important; }
}


/*************
/* ヘッダー
*************/

#header{
height:110px;
}

#header h1{
padding:10px 0 10px;
font-size:12px;
font-weight:normal;
}


/* ロゴ
------------------------------------------------------------*/
.logo{
float:left;
}

.logo a{
color:#333;
}

.logo p{float:left;}

.logo span{display:block;}


.kyoka{
font-size:9px;
}



/* 電話番号
------------------------------------------------------------*/
.info{
float:right;
padding-right:20px;
text-align:right;
}

.info .open{font-size:12px;}


/* ロゴ+電話番号
------------------------------------------------------------*/
.logo,.info .tel{
margin-top:3px;
font-size:20px;
font-weight:bold;
}

.logo span,.info span{
font-size:.6em;
font-weight:normal;
}



/*#####画面の横幅800px以下#####*/
@media only screen and (max-width: 850px) {

.info{display:none;	}
}	
		

/**************************
/* メイン画像（トップページ+サブページ）
**************************/
#mainBanner{
clear:both;
margin:20px auto 10px;
padding:0;
position:relative;
text-align:center;
}
#mainBanner .inner{position:relative;}

#mainBanner img{
max-width:100%;
height:auto;
}


/*#####画面の横幅800px以下#####*/
@media only screen and (max-width: 850px) {
	
#mainBanner{
margin:10px auto 10px;
}

}



/*************
メイン コンテンツ
*************/
section.content article{
padding:30px 0 20px 0;
margin-bottom:10px;
overflow:hidden;
}

section.toppage article,section.content .archive{border:0;}


section.content .archive{
padding:0;
border-bottom:1px dotted #ccc;
}

section.content p{margin-bottom:5px;}


/* 見出しなど ----------------------------------------------*/


h2.heading{
font-size:16px;
letter-spacing: 0.2em;
font-weight:normal;
padding:10px 10px;
margin-bottom:5px;
border-top:2px solid #2474b5;
border-bottom:2px solid #2474b5;
}

/*文字頭に２本線*/

h3{
	font-size: 15px;
	padding: 0.7em 0.7em;/*上下 左右の余白*/
	letter-spacing: 0.5em;
	background: transparent;/*背景透明に*/
	border-left: 6px double #2474b5;/*左線*/
}

/*文字頭に●*/

h4 {
  font-size: 15px;position: relative;/*相対位置*/
  padding-left: 1.7em;/*アイコン分のスペース*/
  line-height: 1.3;/*行高*/
  letter-spacing: 0.3em;
}

h4:before {
  content:'●';/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 2em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: -0.4em;/*アイコンの位置*/
  color: #2474b5;
}


/*タイトル付き（ラベルボックス）*/
.waku{
	width: 350px;
	height: auto;
	padding:2em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に) */
	border: 1px solid #333;/* ボックスの線 (太さ　種類　色)*/
}
.waku .waku-title {
	background-color:#fff; /* タイトル背景色 */
	color: #333; /* タイトル文字色 */
	padding: 2px 10px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;	/* 配置(ここを動かす) */
	top: -5px; /*上から（-5px）移動*/
	left: 20px; /*左から(20px)移動*/
}

/*#####画面の横幅400px以上#####*/
@media (max-width: 400px)
{
.waku{
	width:fit-content;
}
}


/*小さい四角背景*/
.aobox {
    margin: 1em 0 1.5em 0;
	width: 100px;
	height: 40px;
	line-height:40px;
	font-size: 15px;
	text-align: center;
    background-color:#2474b5;/*背景色*/
    color:#FFF;/*文字色*/
	border-radius: 5px;/*角の丸み*/
}
.aobox p {
    margin: 0; 
    padding: 0;
}

/*----------------------------------------------*/

hr {
　height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #999;
}


.large{
font-size:17px;
}

.tellarge{
font-size:25px;
font-weight:bold;
padding-left:20px;
}
.telsmall{
font-size:15px;
padding-left:30px;
}


section.content img{
max-width:90%;
height:auto;
}

.alignleft{
float:left;
clear:left;
margin:3px 10px 10px 0;
}

.alignright{
float:right;
clear:right;
margin:3px 0 10px 10px;
}



/* 矢印風ボタン

----------------------------------------------*/
.btn01_yajirushi {
	--btn01_yajirushi-color:#2474b5;/*矢印と文字の色はここで設定*/
	--btn01_yajirushi-fontsize:12px;/*矢印と文字の色はここで設定*/
	text-align: right;/*ボタン中央寄せ（右寄せにしたいときはrightに変更）*/
}


.btn01_yajirushi a {
	position: relative; /*位置（ここを基準に）*/
	padding: 0 3em 0.7em .5em; /*内側余白調整（上右下左）*/
	color: var(--btn01_yajirushi-color);  /*リンク文字色*/
	text-decoration: none; /*リンク下線を消す*/
	outline: none; /*枠線を消す*/
}

.btn01_yajirushi a::before,
.btn01_yajirushi a::after{
	content: ''; /*矢印部分作成*/
	position: absolute; /*位置（下線と矢印を配置する）*/
	background: var(--btn01_yajirushi-color); /*矢印の色*/
	height: 2px; /*線の太さ*/
	transition: all .3s; /*なめらかな動き*/
}

.btn01_yajirushi a::before {
	bottom: -10px; /*下線の下からの距離*/
	right: 0%; /*左からの距離*/
	width: 90%; /*ボタンの幅*/
}

.btn01_yajirushi a::after {
	bottom: -5px; /*矢印の下からの距離*/
	left: 10%; /*右からの距離*/
	width: 15px; /*矢印部分の幅*/
	transform: rotate(-35deg); /*角度調整*/
}

/*マウスオーバー時の動き*/
.btn01_yajirushi a:hover::before{
	right: 10%;
}

.btn01_yajirushi a:hover::after {
	left:0%;
}


/*ボタン２
------------------------------------------------------------*/
.btn02 {
  margin: 1em 1em;
  display: inline-block;
  width: 100%;
  max-width: 300px; /* ボタン幅 */
  position: relative;
  background: #2474b5; /* 背景色 */
  border: 2px solid #2474b5;
  padding: 1em 2em;
  color: #fff; /* 文字色 */
  text-decoration: none;
  text-align: center;
  transition-duration: 0.3s;
  border-radius: 5px;/*角の丸み*/
}


.btn02:before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid #fff; /* 矢印の色 */
  border-right: 2px solid #fff; /* 矢印の色 */
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -6px;
}

/* マウスオーバーした際のデザイン */
.btn02:hover {
  background: #fff; /* 背景色 */
  color: #2474b5; /* 文字色 */
}

.btn02:hover:before {
  border-top: 2px solid #2474b5; /* 矢印の色 */
  border-right: 2px solid #2474b5; /* 矢印の色 */
}
   e {
  border-top: 2px solid #2474b5; /* 矢印の色 */
  border-right: 2px solid #2474b5; /* 矢印の色 */
}


/* 補足つきボタン３ */
.btn03 {
    text-align: left;

}
 

.btn03 p {
    margin-bottom: 5px;
    font-weight: 300;
    color: #2474b5;
    letter-spacing: 0.04rem;
    display: inline-block;
    position: relative;
	
	
}
.btn03 p:before, .btn03 p:after {
    display: inline-block;
    position: absolute;
    top: 45%;
    width: 20px;
    height: 2px;
    border-radius: 5px;
    background-color: #ff667d;
    content: "";
}

.btn03 p:before {
    left: -30px;
    -webkit-transform: rotate( 50deg );
    transform: rotate( 50deg );
}
.btn03 p:after {
    right: -30px;
    -webkit-transform: rotate( -50deg );
    transform: rotate( -50deg );
}
    

	

.btn03 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 10px;
    max-width: 250px;
    padding: 10px 25px;
    color: #FFF;
    font-weight: 300;
    background: #2474b5;
    border-radius: 5px; /* 角丸 */
	   border: 2px solid #2474b5;
}

.btn03 a:hover {
  background: #fff; /* 背景色 */
  color: #2474b5; /* 文字色 */

}


/* サイトマップ　リスト
*****************************************************/


ul.sitemap {
	padding:2em;
	color: #333;
	list-style: none;
}
ul.sitemap li {
	margin-bottom:10px;
	padding-left:20px;
	position:relative;
	padding: 0 0 0 2em;
	font-size: 14px;
}

ul.sitemap li::before {
  content:'●'; /*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 2em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: -0.7em;/*アイコンの位置*/
  color: #2474b5;
}

ul.sitemap li ul li{
	font-size:13px;
	padding-left:20px;
	position:relative;
	padding: 0 0 0 2em;
   }
   
ul.sitemap li ul li::before {
   transform: rotate(-45deg);
    width: .3em;
    height: .3em;
    border-bottom: 3px solid #2474b5;
    border-right: 3px solid #2474b5;
    content: '';
	position: absolute;/*絶対位置*/
	left: 0;/*アイコンの位置*/
	top: 0.3em;/*アイコンの位置*/
}

a.sitemap:link{ color:#333;}
a.sitemap:visited{ color:#333;}
a.sitemap:hover{ color:#ccc;}
a.sitemap:active{ color:#ccc;}





/*テーブル
------------------------------------------------------------*/
/*#####背景交互#####*/ 

.table02 {
  border-collapse: collapse;
  width: 100%;
  max-width: 959px;
}
.table02 tr {
  background-color: #e6f1f6;
}
.table02 tr:nth-child(odd) {
  background-color: #fff;
}
.table02 th, .table02 td {
  padding: 1em;
  vertical-align: middle;
}
.table02 th {
  text-align: center;
  width: 20%;
  min-width: 10em;
}

/*#####画面の横幅600px以上#####*/
@media (max-width: 600px)
{
.table02 th {
  width: 10%;
  min-width: 7em;
}
} 
  

/*#####ラインあり#####*/ 

.table01 {
  border-collapse: collapse;
  width: 100%;
  max-width: 959px;
}

.table01 tr {    
  border-bottom: #c6e5ec 1px solid; 
}

.table01 th, .table01 td {
  padding: 1em;
}  

.table01 th {
  text-align: center;
  width: 20%;
  min-width: 10em;
}



@media (max-width: 600px)
{
.table01 th {
  width: 10%;
  min-width: 8em;
}
} 


/*#####ラインあり２#####*/ 

.table03 {
  border-collapse: collapse;
  width: 95%;
  max-width: 959px;
  margin-left: auto;
  margin-right: auto;
  font-size:13px;
  vertical-align: middle;
}

.table03 tr {    
  border-bottom: #c6e5ec 1px solid; 
}

.table03 th, .table01 td {
  padding: 0.8em;
  text-align: left;
  
}

.table03 th {
  width: 40%;
  min-width: 10em;
}

.border {
    border-left: 1px solid #c6e5ec ;
    padding-left: 10px;
    display: block;
	color:#2474b5
} 
.aomoji {
	 padding-left: 5px;
	 color: #333;
} 

.aomoji13 {
	 font-size:13px;
	 color:#2474b5;
} 
.kuro13 {
	 font-size:13px;
} 


@media (max-width: 600px)
{
.table03 th {
  width: 60%;
  min-width: 15em;
}
} 


/*************
/* フッター
*************/
#footer{
clear:both;
}

#footer a{
color:#2474b5;
}

#footer a:hover{
color:#c6e5ec;
}

#footer .inner{
padding:40px 0;
overflow:hidden;
}


#footer .grid{
margin:0;
}

ul.footnav{
float:right;
width:620px;
padding:10px 0;




}
ul.footnav ul{display:none;}

ul.footnav li{
float:left;
margin:15px 0 5px 0;
padding:0 7px 0 8px;
border-right:1px solid #ebebeb;
}

#copyright{
clear:both;
padding:20px 0 10px 0;
text-align:center;
font-style:normal;
font-size:9px;
color:#333;
}

#copyright a {
  text-decoration: none;
  color: #333;

}


#footer .grid,#footer ul.footnav{float:none;width:100%;text-align:center;}
ul.footnav li{float:none;display:inline-block;}
	

/* パソコン非表示 */
@media only screen and (min-width: 851px)
 {
	 
.info2{
	display:none;
  }
}

/*#####画面の横幅800px以下#####*/
@media only screen and (max-width: 850px) {

.footnav{
font-size:11px;
}


.info2{
text-align:center;
}

.logo2{
 color:#126cb5;
 font-size:22px;
 font-weight:bold;
 float:center;
}
.tel2{
font-size:15px;
font-weight:bold;
}
.open2{
font-size:11px;
}

.info2 span{
font-size:.6em;
font-weight:normal;
}
}



/* タイポグラフィ
*****************************************************/
.post p{padding-bottom:5px;}

.post span{font-size:18px;}

.post img{max-width:100%;height:auto;}


img.aligncenter{
display:block;
margin:5px auto;
}

img.alignright, img.alignleft{
padding:6px;
margin:0 0 2px 5px;
display:inline;
}

img.alignleft{margin:0 7px 2px 0;}

.alignright{float:right;}
.alignleft{float:left;}



img.alignright2, img.alignleft2{
padding:4px;
margin:0 0 2px 7px;
display:inline;
}

img.alignleft2{margin:0 7px 2px 0;}

.alignright2{float:right;}
.alignleft2{float:left;}




/* PC用
------------------------------------------------------------*/
@media only screen and (min-width:851px){
	nav div.panel{
	display:block !important;
	float:left;
	}


 a#menu{display:none;}
	
  #mainNav{
	clear:both;
	z-index:200;
	position:relative;
	}
	

	#mainNav li{
	float:left;
	position:relative;
	}

	#mainNav li a{
	color:#333;
	display: block;
	text-align: center;
	_float:left;
	font-size:16px;
	letter-spacing: 0.12em;
	width:160px;
	height:30px;
	padding:15px 0;
	border-top:2px solid #c6e5ec;
	border-bottom:2px solid #c6e5ec;
	}

	#mainNav li a span,#mainNav li a strong{display:block;}

	#mainNav li a span{
	color:#bababa;
	font-size:10px;
	}
	
	#mainNav ul ul{width:160px;background:#fff;}
	#mainNav li ul{display:none;}

	#mainNav li:hover ul{
	display:block;
	position:absolute;
	top:64px;
	z-index:500;
	}
	
	#mainNav li li{
	margin:0;
	float:none;
	width:160px;
	border:0;
	}
  #mainNav li li:last-child{border:0;}
	
	#mainNav li li a{
	width:auto;
	height:auto;
	padding:10px;
	font-size:95%;
	text-align:left;
	border:0;
	}

	#mainNav li li span{padding:0 10px;}
	
	#mainNav li.current-menu-item a{
	border-color:#2474b5;
	}

	#mainNav li.current-menu-item a,#mainNav li a:hover,#mainNav li.current-menu-item li a:hover{
	color:#999;
	}

	#header,#wrapper,.inner{
	width:960px;
	padding:0;
	margin:0 auto;
	}
	
	#wrapper{clear:both;padding:20px 0;}
	
	#main{
	float:right;
	width:680px;
	padding:15px 0 0 0;
	}
	
	#sidebar{
	float:left;
	width:250px;
	padding:15px 0;
	overflow:hidden;
	}
	
	#sidebar article{
	margin-bottom:20px;
	overflow:hidden;
	}
	
	.logo{width:500px;}
	
	/* グリッド全体 */
	.gridWrapper{
	display:table;
	border-collapse:separate;
	border-spacing:0px;
	}
	
	/* グリッド */
	.grid{
	width:320px;
	display:table-cell;
	}

}


@media only screen and (max-width:850px){
	*{
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
         -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
            box-sizing:border-box;
	}
	
	#mainNav{
	clear:both;
	width:100%;
	margin:0 auto;
	padding:0;
	/* 
  border:1px solid #e4e4e4;
  */  
	border-left:0;
	border-right:0;
	}

	#mainNav a.menu{
	color:#333;
	width:100%;
	display:block;
	height:40px;
	line-height:40px;
	font-weight: bold;
	text-align:left;
	}

	#mainNav a#menu span{
	padding-left:10px;
	}
	#mainNav a.menu span:before{content:"≡ ";}
	#mainNav a.menuOpen span:before{content:"× ";}

	#mainNav a#menu:hover{cursor:pointer;}

	nav .panel{
	display:none;
	width:100%;
	position:relative;
	right:0;
	top:0;
	z-index:1;
	}
	
	#mainNav ul{margin:0;padding:0;}

  #mainNav li{
	float:none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
	}

	#mainNav li a,#mainNav li.current-menu-item li a{
	color:#333;
	display: block;
	padding:15px 10px;
	text-align:left;
	border-bottom:1px dashed #ccc;
	}
	
 	#mainNav li a span{padding-left:10px;}
	
	
	#mainNav ul > li:last-child a{border:0;}
	#mainNav li li:last-child a{border-bottom:1px dashed #ccc;}
 
	#mainNav li.current-menu-item a,#mainNav li a:hover,#mainNav li.current-menu-item a,#mainNav li a:active, #mainNav li li.current-menu-item a, #mainNav li.current-menu-item li a:hover, #mainNav li.current-menu-item li a:active{
	color:#333;
	}

	#mainNav li li{
	float:left;
	border:0;
	}

	#mainNav li li a, #mainNav li.current-menu-item li a, #mainNav li li.current-menu-item a{
	padding-left:40px;
	background:url(images/sub1.png) no-repeat 20px 18px;
	}

	#mainNav li li.current-menu-item a,#mainNav li li a:hover, #mainNav li.current-menu-item li a:hover{background:url(images/sub1.png) no-repeat 20px -62px;}

	#mainNav li li:last-child a{background:url(images/subLast.png) no-repeat 20px 20px;}
	#mainNav li li:last-child.current-menu-item a,#mainNav li li:last-child a:hover,#mainNav li.current-menu-item li:last-child a:hover{background:url(images/subLast.png) no-repeat 20px -65px;}

	nav div.panel{float:none;}
	
	#header{padding-left:10px;}
	
	#main{padding-top:15px;}
	section.toppage{margin:0;}
	#sidebar{padding-bottom:15px;}
	#sidebar article{padding:7px 8px;}
	
	.grid{
	float:left;
	width:32%;
	margin:10px 0 0 1%;
	}


	
}


@media only screen and (max-width:640px){
	#header{height:auto;padding-bottom:10px;}
	
	#header h1,.logo,.info{text-align:left;}
	
	.logo,.info{clear:both;float:none;}
	
	.logo p{float:none;display:block;}
	.logo img{float:none;padding:0;}
	
	.box img{
	float:left;
	margin-right:5px;
	}
	
	.box h3{padding-top:0;}

  .alignleft,.alignright,img.alignleft,img.alignright{float:none;display:block;margin:0 auto 10px;}

}


@media only screen and (max-width:480px){
	.grid{width:100%;margin:10px 0;}
	.box img{max-width:100px;}
	#mainBanner h2,#mainBanner p{
		font-size:80%;
		}
	
	img.alignright2{
		display:none;}	
	img.alignleft2{
		display:none;}		
}


/* スマホナビゲーション
------------------------------------------------------------*/
/* パソコンでは非表示 */
@media only screen and (min-width: 851px)
 {
nav.globalMenuSp{
	display:none;
  }
.navToggle{
	display:none;
  }
}

@media screen and (max-width:850px){
	nav.globalMenuSp {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: #fff;
    color: #333;
    letter-spacing: 0.2em;
	text-align: center;
	text-decoration: none;
    transform: translateY(-100%);
    transition: all 0.7s;
    width: 100%;
}
 
nav.globalMenuSp ul {
    background: #fff;
	margin: 0 auto;
    padding: 0;
    width: 100%;
}

 
nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #999;
}
 
/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
 
nav.globalMenuSp ul li a {
    display: block;
    color: #333;
    padding: 1em 0;
}
 
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}

/* ハンバーガーボタン
------------------------------------------------------------*/
.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 18px;
    top: 12px;
    width: 63px;
    height: 64px;
    cursor: pointer;
    z-index: 1000;
    background: #343c54;
    text-align: center;
}
 
.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 45px;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 9px;
}
 
.navToggle span:nth-child(1) {
    top: 10px;
}
 
.navToggle span:nth-child(2) {
    top: 20px;
}
 
.navToggle span:nth-child(3) {
    top: 30px;
}
 
.navToggle span:nth-child(4) {
    border: none;
    color: #fff;
    font-size: 85%;
    font-weight: none;
    top: 39px;
}


/* ハンバーガーボタン閉じた時
------------------------------------------------------------*/

/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 22px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 22px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

}


/* スライド
------------------------------------------------------------*/
@media screen and (min-width:501px){
.slide {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

@media screen and (max-width:850px){

.slide {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
}

 
@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
 
.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
}
 
.slide img:nth-child(2){
  animation-delay: 8s;
}
 
.slide img:last-child{
  animation-delay: 16s;
}

}

@media only screen and (max-width: 500px) {

.slide2 {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}

@media only screen and (max-width: 400px) {

.slide2 {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
}
}
 
@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
 
.slide2 img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
}
 
.slide2 img:nth-child(2){
  animation-delay: 8s;
}
 
.slide2 img:last-child{
  animation-delay: 16s;
}

}