@charset "UTF-8";

body{

	line-height:36px;
}


a:hover{
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-webkit-transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-ms-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;

}


/* 
────────────────
基本的な幅
────────────────
*/
section,footer{
	width: 100%;
	margin: 0 auto 25px auto;
}


/* 
────────────────
基本画像
────────────────
*/

img.left{ float: left; margin: 0 10px 10px 0}
img.right{ float: right; margin: 0 0 10px 10px}

.eyecatch{width: auto;}
.center{ text-align: center;}
.left{ text-align:left;}
.right{ text-align:right;}

/* 
────────────────
基本テーブル
────────────────
*/

table {
    border-collapse:  collapse; /* セルの線を重ねる */
}
  
 th,td {
    border: solid 1px;  /* 枠線指定 */
    padding: 10px;      /* 余白指定 */
}

/* 
────────────────
共通ヘッダ
────────────────
*/

header{
	width: 1000px;
	margin: 0 auto;
}

/* 
────────────────
共通ロゴID
────────────────
*/

#logo{
	float: left;
	margin-top: 20px;
}

/* 
────────────────
共通記事
────────────────
*/

article{
width: 1000px; margin:  0 auto;
}


article .information{ width: auto;margin-bottom: 25px;}

/* 
────────────────
グローバルナビ
────────────────
*/


navi{
	float: right;
	margin:25px 0 25px 0;
	position: relative;
}

navi ul{ width: 100%; max-width: 600px; }
navi ul li{ display: inline-block;  margin: 0 20px 0 0; font-size: 14px; }

[data-current-nav="home"] navi ul li:nth-child(1) a,
[data-current-nav="questionnaire"] navi ul li:nth-child(2) a,
[data-current-nav="questionnaire_form"] navi ul li:nth-child(3) a,
[data-current-nav="guide"] navi ul li:nth-child(4) a,
[data-current-nav="contact"] navi ul li:nth-child(5) a,
navi ul li a:hover {
  color: #198dce;
  text-decoration: underline
}

navi ul li a{ text-decoration: none ;color: #333}

/* 
────────────────
FB　イイネ 
────────────────
*/
navi .fb-like{  position: absolute; top:50px ; right: 0}

/* 
────────────────
共通 P 
────────────────
*/
article p{
text-indent: 1em;
}


/* 
────────────────
下層ページ
ファーストビューがある場合の背景
────────────────
*/
#fv_recruit,#fv_overview,#fv_privacypolicy,#fv_about,#fv_contact,#fv_questionnaire,#fv_questionnaire_form,#fv_guide{
	background-color: #F2F6F6;
width:auto;
margin: 0 auto;
}


/* 
────────────────
共通 セクション id h2
────────────────
*/
#guide h2,
#questionnaire_form h2,
#questionnaire h2,
#recruit h2,
#top_overview h2,
#overview h2,
#contact h2,
#privacypolicy h2,
#privacypolicy_sec h2,
#greeting h2,
#information h2,
#overview_sec h2,
#map h2{
text-align: center;
font-size: 30px;
color: #146EA0;
margin-right: 0;
margin-left: 0;
margin-bottom: 45px;
margin-top: 15px;
}

.overview_ h2{text-align: center;
font-size: 30px;
color: #146EA0;
margin-right: 0;
margin-left: 0;
margin-bottom: 45px;
margin-top: 15px;}



/* 
────────────────
共通 セクション id h3
────────────────
*/
#guide h3,
#questionnaire_form h3,
#questionnaire h3,
#recruit h3,
#overview h3,
#contact h3,
#privacypolicy h3,
#privacypolicy_sec h3,
#greeting article h3,
#information article h3,
#overview article h3,
#overview_sec article h3,
#map article h3{
	text-align: left;
	font-size: 22px;
	color: #333333;
	margin-bottom: 30px;
	background-color: #f2f6f6;
	padding-left: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-left: 5px solid #1A8DCE;
}



/* 
────────────────
トップメイン画像
────────────────
*/

#key{
	position: relative;
	background-image: url(../images/key.jpg);
	background-repeat: no-repeat;
	height: 350px;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	}
#key #catch{  position: absolute; top:20px; right: 20px;}
#key #catch img{ width: 100%}
#key #catch a{
	display: block;
	border-radius: 60px;
	background: #369dd9;
	text-align: center;
	padding: 18px auto;
	color: #fff;
	text-decoration: none;
	width: 83%;
	margin-left: auto;
	margin-right: auto;
	line-height: 40px;
}

#key #catch a:hover{ text-decoration: underline; }


/* 
────────────────
トップ　ティッカー
────────────────
*/

div.title {
    margin: 15px 0px 3px 5px
}

#ul_news {
    display: none;
}
div.tick {
	width: 1000px;
	height: 30px;
	line-height: 30px;
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}

div.tick a {
    position: absolute;
    margin-left: 10px;
    font-size: 1.0em;
    color: #369dd9;
}

/* 
────────────────
トップ　インフォメーション
────────────────
*/

#information{
 width: auto;

}

#information article{	background-image: url(../images/information.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

#information article .mask{
	background-image: url(../images/info_mask.png);
	width: 82%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	height: auto;
	padding-top: 60px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 46px;
}




/* 
────────────────
事業案内
────────────────
*/

#top_overview{ width: auto;}
#top_overview article{background-color: #F2F6F6;padding: 70px 0 0 0;}

#top_overview article .btn{
	line-height: 28px;
	display: block;
	float: left;
	width: 400px;
	margin-top: 0;
	margin-right: 0;
	margin-left: 35px;
	margin-bottom: auto;
	background: #fff;
	padding: 25px;
	box-shadow: 0px 1px 1px 2px #cecece;
shadowColor:"#cecece",
shadowOffset:{width:0,height:1},
shadowOpacity:1,
shadowRadius:1,
borderWidth:0,
borderColor:"#cccccc",
borderRadius:0
}

#top_overview .btn img{ float: left; width: 58px}
#top_overview .btn .name{float: left; width: 340px; color: #198dce; font-size: 19px}
#top_overview .btn .site a{float: left; color: #97754e; font-size: 24px; display: block; text-decoration: none;}



#overview_sec .Note img{
	width: 25%;
	float: left;
}

#overview_sec .Note .Notebox {
	width: 73%;
	float: left;
	margin-left: 2%;
}


#overview_sec .Note .Notebox b {
 display: block;
 margin-bottom: 50px;
}









/* 
────────────────
モニター
────────────────
*/

#monitor{ width: auto;}
#monitor article{
	background-color: #F2F6F6;
	padding-top: 70px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 70px
}
#monitor article h2{ font-size: 26px; color: #198dce;font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; text-align: center; border-bottom: dashed 1px #198dce; padding: 0 0 20px 0; margin: 0 0 40px 0}

#monitor article .mark{ position: relative;		padding-left: 45px;
	padding-right: 45px;
	padding-bottom: 46px;}
#monitor article .mark img{ position: absolute; right: 10%; top:5%;
border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    width:  360px;       /* ※縦横を同値に */
    height: 360px;       /* ※縦横を同値に */}

#monitor article a.entry{
	width: 100%;
	max-width: 800px;
	margin-top: 45px;
	margin-right: auto;
	margin-left: auto;
	border-radius: 8px;
	display: block;
	text-align: center;
	border: solid 3px #359dd9;
	font-size: 30px;
	padding: 26px 0 26px 0;
	text-decoration: none;
	color: #359dd9;
	font-weight: 600
}



/* 
────────────────
おしらせ
────────────────
*/

#news{ width: auto;}
#news article{
	padding-top: 9px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 0;
}

#news article #Lbox{
	width: 40%;
	float: left;
	padding: 5%;
	background-image: url(../images/news_line.jpg);
	background-repeat: no-repeat;
	background-position: right  center;
	
}

#news article #Rbox{
	width: 40%;
	float: right;
	padding: 5%;
}

#news article #Lbox h3,#news article #Rbox h3{
	font-size: 24px;
	color: #359dd9;
	font-weight: 300;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 28px
}


#news article #Lbox ul,#news article #Rbox ul{ width: auto; }

#news article #Lbox ul,#news article #Rbox ul li{ width: auto; font-size: 18px;  }



/* 
────────────────
フッターリンク
────────────────
*/

#sitemap{ width: auto;}
#sitemap article{
	background-color: #F2F6F6;
	padding-top: 70px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 70px
}
#sitemap article .box{
	display: inline-block;
	width: 48%;
	vertical-align: top
}

#sitemap article .box ul{
	margin-left: 15%;
}

#sitemap article .box ul h2 a{ font-size: 22px; color: #333; text-decoration: none}

#sitemap article .box ul li{
	font-size: 18px;
	margin-left: 10%;
}

#sitemap article .box ul li a{ color: #333333; text-decoration: none;}



/* 
────────────────
フッター
────────────────
*/

footer{	width: 1000px;
	margin: 0 auto 50px auto;
	padding: 76px 0 0 0} 
	
footer #footer_logo{ float: left;}

footer address{ float: right;}



/* 
────────────────
下層ページ
当NPOについて
■■以下、トップへ移動■資格
────────────────
*/
/*
#fv_about h1{
width: 1000px;
height: 265px;
margin: 0 auto;
background-image: url(../images/fv_about.jpg);
background-position: right center;
background-repeat: no-repeat;
line-height: 265px;
color: #198dce;
font-size: 33px;
font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
font-weight: 300;
padding: 0 0 0 125px
}
*/

/*
#about{
	margin-top: 0px;
}*/



#information table{ width: 90%; margin: 0 auto 35px auto;}

#information th{
	background: #1a8dce;
	width: 30%;
	vertical-align: middle;
	color: #fff;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	font-size: 20px;
}

#information td{
	background: #fff;
	padding-top: 0;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 0;
	font-size: 14px;
}


#sec_about{margin-top: 10px; }

#sec_about table{
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 180px;
	border-top: solid 1px #cccccc;
	border-bottom: solid 1px #cccccc;
}


#sec_about th{
	vertical-align: middle;
	background: #fafafb;
	width: 20%;
	font-weight: normal;
	border-bottom: solid 1px #cccccc;
}

#sec_about td{
	padding: 20px;
	vertical-align: middle;
	width: 80%;
	border-bottom: solid 1px #cccccc;
}



/* #about table{ width: 90%; margin: 0 auto 35px auto;}

#about th{ background: #1a8dce; width: 200px; vertical-align: middle; color: #fff; font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif"; font-size: 25px;}

#about td{ background: #fff; padding: 0 0 0 40px}


#sec_about{margin-top: 10px; }

#sec_about table{
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 180px;
	border-top: solid 1px #cccccc;
	border-bottom: solid 1px #cccccc;
}


#sec_about th{
	vertical-align: middle;
	background: #fafafb;
	width: 20%;
	font-weight: normal;
	border-bottom: solid 1px #cccccc;
}

#sec_about td{
	padding: 20px;
	vertical-align: middle;
	width: 80%;
	border-bottom: solid 1px #cccccc;
} */

/* 
────────────────
下層ページ
交通案内
地図
────────────────
*/

#map{
	margin-bottom: 30px;
}






/* 
────────────────
下層ページ
コンタクト
────────────────
*/


#fv_contact h1{
width: 1000px;
height: 265px;
margin: 0 auto;
background-image: url(../images/fv_contact.jpg);
background-position: right center;
background-repeat: no-repeat;
line-height: 265px;
color: #198dce;
font-size: 33px;
font-weight: 300;
padding: 0 0 0 125px
}


#contact{ margin-top: 200px;}




.form{
	font-family: 'Open Sans Condensed', arial, sans;
	width: auto;
	padding: 30px;
	background: #FFFFFF;
	margin: 50px auto;
/*	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
	-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
*/
}
.form input[type="text"],
.form input[type="tel"],
.form input[type="comment"],
.form input[type="date"],
.form input[type="datetime"],
.form input[type="email"],
.form input[type="number"],
.form input[type="search"],
.form input[type="time"],
.form input[type="url"],
.form input[type="password"],
.form textarea,
.form select 
{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	outline: none;
	display: block;
	width: 100%;
	padding: 7px;
	border: none;
	border-bottom: 1px solid #ddd;
	background: transparent;
	margin-bottom: 10px;
	font: 16px Arial, Helvetica, sans-serif;
	height: 45px;
}
.form textarea{
	resize:none;
	overflow: hidden;
}
.form input[type="button"], 
.form input[type="submit"]{
	-moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
	-webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
	box-shadow: inset 0px 1px 0px 0px #45D6D6;
	background-color: #2CBBBB;
	border: 1px solid #27A0A0;
	display: inline-block;
	cursor: pointer;
	color: #FFFFFF;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 14px;
	padding: 8px 18px;
	text-decoration: none;
	text-transform: uppercase;
}
.form input[type="button"]:hover, 
.form input[type="submit"]:hover {
	background:linear-gradient(to bottom, #34CACA 5%, #30C9C9 100%);
	background-color:#34CACA;
}


/* 
────────────────
下層ページ
求人情報
────────────────
*/

#fv_overview h1{
width: 1000px;
height: 265px;
margin: 0 auto;
background-image: url(../images/fv_overview.jpg);
background-position: right center;
background-repeat: no-repeat;
line-height: 265px;
color: #198dce;
font-size: 33px;
font-weight: 300;
padding: 0 0 0 125px
}


#overview{
	margin-top: 100px;
}
#overview .Note{
	width: 85%;
	margin: 0 auto;
}

#overview{ width: auto;}
#overview article{
	background-color: #F2F6F6;
	padding-top: 25px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 25px;
}



#overview article .btn{
	display: block;
	float: none;
	width: 80%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
	background: #fff;
	padding: 25px;
	box-shadow: 0px 1px 1px 2px #cecece;
shadowColor:"#cecece",
shadowOffset:{width:0,height:1;
},
shadowOpacity:1,
shadowRadius:1,
borderWidth:0,
borderColor:"#cccccc",
borderRadius:0
}



#overview .btn img{
	float: left;
	width: 200px
}
#overview .btn .name{
	float: left;
	width: 60%;
	color: #198dce;
	font-size: 19px;
	margin-left: 50px;
}
#overview .btn .guide{
	float: left;
	width: 65%;
	color: #333333;
	font-size: 14px;
	margin-left: 50px;
	line-height: 23px;
}
#overview .btn .site a{
	float: left;
	color: #97754e;
	font-size: 24px;
	display: block;
	text-decoration: none;
	margin-left: 50px;
}




.overview_{
	margin-top: 100px;
}
.overview_ .Note{
	width: 85%;
	margin: 0 auto;
}

.overview_{ width: auto;}
.overview_ article{
	background-color: #F2F6F6;
	padding-top: 25px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 25px;
}



.overview_ article .btn{
	display: block;
	float: none;
	width: 80%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
	background: #fff;
	padding: 25px;
	box-shadow: 0px 1px 1px 2px #cecece;
shadowColor:"#cecece",
shadowOffset:{width:0,height:1;
},
shadowOpacity:1,
shadowRadius:1,
borderWidth:0,
borderColor:"#cccccc",
borderRadius:0
}



.overview_ .btn img{
	float: left;
	width: 200px
}
.overview_ .btn .name{
	float: left;
	width: 60%;
	color: #198dce;
	font-size: 19px;
	margin-left: 50px;
}
.overview_ .btn .guide{
	float: left;
	width: 65%;
	color: #333333;
	font-size: 14px;
	margin-left: 50px;
	line-height: 23px;
}
.overview_ .btn .site a{
	float: left;
	color: #97754e;
	font-size: 24px;
	display: block;
	text-decoration: none;
	margin-left: 50px;
}


































/* 
────────────────
下層ページ
求人情報 セカンド
────────────────
*/

#overview_sec{
	margin-top: 100px;
}
#overview_sec .Note{
	width: 85%;
	margin: 0 auto;
}

#overview_sec{ width: auto;}
#overview_sec article{
	background-color: #fff;
	padding-top: 25px;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 25px;
}



#overview_sec article .btn{
	display: block;
	float: none;
	width: 80%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
	background: #fff;
	padding: 25px;
	box-shadow: 0px 1px 1px 2px #cecece;
shadowColor:"#cecece",
shadowOffset:{width:0,height:1;
},
shadowOpacity:1,
shadowRadius:1,
borderWidth:0,
borderColor:"#cccccc",
borderRadius:0
}



#overview_sec .btn img{
	float: left;
	width: 200px
}
#overview_sec .btn .name{
	float: left;
	width: 60%;
	color: #198dce;
	font-size: 19px;
	margin-left: 50px;
}
#overview_sec .btn .guide{
	float: left;
	width: 65%;
	color: #333333;
	font-size: 14px;
	margin-left: 50px;
	line-height: 23px;
}
#overview_sec .btn .site a{
	float: left;
	color: #97754e;
	font-size: 24px;
	display: block;
	text-decoration: none;
	margin-left: 50px;
}





/* 
────────────────
下層ページ
プライバシーポリシー
────────────────
*/

#fv_privacypolicy h1{
width: 1000px;
height: 265px;
margin: 0 auto;
background-image: url(../images/fv_privacypolicy.jpg);
background-position: right center;
background-repeat: no-repeat;
line-height: 265px;
color: #198dce;
font-size: 33px;
font-weight: 300;
padding: 0 0 0 125px
}


#privacypolicy{ margin-top: 200px;}


#profile{ border: solid 1px #dcdcdc; width: 100%; max-width: 960px; margin: 0 auto 25px auto; background: #fbfbfb; padding: 20px }


#privacypolicy_sec{
margin-top: 0px;
}


#profile_sec{ border: solid 1px #dcdcdc; width: 100%; max-width: 960px; margin: 0 auto 25px auto; background: #fbfbfb; padding: 20px }

/* 




/* 
────────────────
下層ページ
求人
────────────────
*/

#fv_recruit h1{
width: 1000px;
margin: 0 auto;
background-position: right center;
background-repeat: no-repeat;
color: #198dce;
font-size: 33px;
font-weight: 300;
padding-top: 100px;
padding-right: 0;
padding-bottom: 100px;
line-height: 1.5em;
}


#recruit{
	margin-top: 0px;
}

#recruit table{
	width: 100%;
	margin: 0 auto 25px auto;
}

#recruit th{
	background-color: #E7E7E7;
	width: 30%;
	vertical-align: middle;
	color: #333;
	font-size: 16px;
	font-weight: normal;
	border-top: 1px solid #EBEBEB;
	border-right: 1px solid #D7D7D7;
	border-bottom: 1px solid #D7D7D7;
}

#recruit td{
	background: #fff;
	padding: 0 0 0 40px;
	width: 70%;
	border-top: 1px solid #D7D7D7;
	border-bottom: 1px solid #D7D7D7;
}



.flow_box{
	display: table;
	width: 100%;
	margin-bottom: 20px;
}
.flow_box .icon{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 10%;
}
.flow_box .word{
	display: table-cell;
	vertical-align: top;
	text-align: left;
	width: 90%;
	margin-left: 10%;
	border-bottom: solid 1px #ccc;
	padding: 5px 0 5xp 0;
}

.flow_box .word p{  padding: 1%;}




/* 
────────────────
下層ページ
アンケートのお願い
────────────────
*/

#fv_questionnaire h1{
width: 1000px;
height: 265px;
margin: 0 auto;
background-image: url(../images/fv_questionnaire.jpg);
background-position: right center;
background-repeat: no-repeat;
line-height: 265px;
color: #198dce;
font-size: 33px;
font-weight: 300;
padding: 0 0 0 125px
}


#questionnaire{ margin-top: 200px;}

#questionnaire .Note{
	border: solid 1px #777777;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 40px;
	width: 500px;
	text-align: center;
	padding: 10px;
}

#questionnaire h4{  font-size: 20px; font-weight: 300; border-bottom:  solid 3px #666666; margin: 0 0 25px 0}




#questionnaire .Lbox{float: left; width: 70%}
#questionnaire .Rbox{float: left; width: 30%}
#questionnaire .Rbox img{ width: 100%}

#questionnaire a.link{
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #00BCD4;
  background: #ECECEC;
  transition: .4s;
}

#questionnaire a.link:hover {
  background: #00bcd4;
  color: white;
}

/* 
────────────────
下層ページ
アンケートのお願い
────────────────
*/

#fv_questionnaire_form h1{
width: 1000px;
height: 265px;
margin: 0 auto;
background-image: url(../images/fv_questionnaire.jpg);
background-position: right center;
background-repeat: no-repeat;
line-height: 265px;    
color: #198dce;
font-size: 33px;
font-weight: 300;
padding: 0 0 0 125px
}


#questionnaire_form{ margin-top: 200px;}



/* 
────────────────
下層ページ
クーポン
────────────────
*/

#fv_guide h1{
width: 1000px;
height: 265px;
margin: 0 auto;
background-image: url(../images/fv_guide.jpg);
background-position: right center;
background-repeat: no-repeat;
line-height: 265px;
color: #198dce;
font-size: 33px;
font-weight: 300;
padding: 0 0 0 125px
}


#guide{ margin-top: 200px;}













/* ドロワー */
.drawer-menu {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	padding: 120px 0;
	background: #222;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: perspective(500px) rotateY(-90deg);
	transform: perspective(500px) rotateY(-90deg);
	opacity: 0;
}

.drawer-menu li {
	text-align: center;
	font-family:  "Sawarabi Mincho";
}

.drawer-menu li a {
	display: block;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	color: #fff;
	-webkit-transition: all .8s;
	transition: all .8s;
}

.drawer-menu li a:hover {
	color: #fff;

}
/* ドロワーのチェックボックス */
.check {
	display: none;
}

/* ドロワーのボタン */
.menu-btn {
	position: fixed;
	display: block;
	top: 20px;
	right: 40px;
	width: 40px;
	height: 40px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 6;


}

.bar {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 40px;
	height: 1px;
	background: #333;
	-webkit-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}

.bar.middle {
	top: 15px;
	opacity: 1;
}

.bar.bottom {
	top: 30px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}

.menu-btn__text {
	position: absolute;
	bottom: -15px;
	left: 0;
	right: 0;
	margin: auto;
	color: #555;
	-webkit-transition: all .5s;
	transition: all .5s;
	display: block;
	visibility: visible;
	opacity: 1;
}

.menu-btn:hover .bar {
	background: #333;
}

.menu-btn:hover .menu-btn__text {
	color: #333;
}

.close-menu {
	position: fixed;
	top: 0;
	right: 300px;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0);
	cursor: url(../images/cross.svg),auto;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	visibility: hidden;
	opacity: 0;
}

/* ドロワーのチェック */
.check:checked ~ .drawer-menu {
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	opacity: 1;
	z-index: 5;
}

.check:checked ~ .contents {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: translateX(-300px);
	-ms-transform: translateX(-300px);
	transform: translateX(-300px);
}

.check:checked ~ .menu-btn .menu-btn__text {
	visibility: hidden;
	opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
	width: 56px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
	opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
	width: 56px;
	top: 40px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	background: rgba(0,0,0,.5);
	visibility: visible;
	opacity: 1;
	z-index: 3;
}




a.dl{ display: block;  width: 100%; max-width: 500px; margin: 25px auto 25px auto; font-size: 18px; border: #764344 }

a.dl {text-decoration: none; text-align: center; color: #333333; font-weight: 600;}