@charset "utf-8";

/*-------------------------
スマホ
--------------------------*/
/*nav{
	margin-bottom:5%;
}
*/
#nav-sp{
	position: fixed;
	top:12px;
	right:10px;
    z-index: 9999;/* JSやCSS3が入っていると外側にくるためにここにz-index */
}
#nav-pc{display: none;}

#nav-drawer { position: relative;}

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

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 45px;
	height: 40px;
	padding: 10px;
	background-color: rgb(255,255,255,0.7);
	box-sizing: border-box;
	vertical-align: middle;
	cursor: pointer;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 25px;/*長さ*/
	border-radius: 3px;
	background: #333333;
	display: block;
	content: '';
}

#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: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #f2f2f2;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}
#nav-content li a span{
    font-size: 14px;
    font-family: 'PT Serif', serif;
    letter-spacing: 0.1rem;
    padding-left: 2%;
}

/*チェックが入ったらもろもろ表示*/
#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);
}

/*ナビゲーションメニュー SP
--------------------------*/
#nav-content nav{
	padding: 0;
	background-color: #f2f2f2;	
}

#nav-content nav ul li a{
	display: block;
	padding: 10px 0;
	color: #000;
	text-align: center;
	border-bottom:1px solid #ccc;
	text-align: left;
	padding-left:10%;
}

#nav-content nav ul li:last-child a{
	color: #000;
	background-color:#f2f2f2;
}

#nav-content nav ul li a:hover{
	color: #000;
	background-color: #f2f2f2;	
}


/*--------------------------*
 追加：ナビのバナーの下のスキマ
--------------------------*/
#nav-drawer .textImgBox51{
    margin: 15% 0 10% 0;
}



/*-------------------------
	追加：プルダウン
-------------------------*/

 /* -------------------- Page Styles (not required) */
/* -------------------- Select Box Styles: bavotasan.com Method (with special adaptations by ericrasch.com) */
/* -------------------- Source: http://bavotasan.com/2011/style-select-box-using-only-css/ */
.styled-select {
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
   height: 29px;
   overflow: hidden;
   width: 240px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}

.styled-select.slate {
   background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
   height: 34px;
   width: 240px;
}

.styled-select.slate select {
   border: 1px solid #ccc;
   font-size: 16px;
   height: 34px;
   width: 268px;
}

/* -------------------- Rounded Corners */
.rounded {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
}

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

/* -------------------- Colors: Background */
.slate   { background-color: #ddd; }
.green   { background-color: #779126; }
.blue    { background-color: #3b8ec2; }
.yellow  { background-color: #eec111; }
.black   { background-color: #777; }

/* -------------------- Colors: Text */
.slate select   { color: #000; }
.green select   { color: #fff; }
.blue select    { color: #fff; }
.yellow select  { color: #000; }
.black select   { color: #fff; }


/* -------------------- Select Box Styles: danielneumann.com Method */
/* -------------------- Source: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/ */
#mainselection select {
   border: 0;
   color: #EEE;
   background: transparent;
   font-size: 20px;
   font-weight: bold;
   padding: 2px 10px;
   width: 378px;
   *width: 350px;
   *background: #58B14C;
   -webkit-appearance: none;
}

#mainselection {
   overflow:hidden;
   width:350px;
   -moz-border-radius: 9px 9px 9px 9px;
   -webkit-border-radius: 9px 9px 9px 9px;
   border-radius: 9px 9px 9px 9px;
   box-shadow: 1px 1px 11px #330033;
   background: #58B14C url("http://i62.tinypic.com/15xvbd5.png") no-repeat scroll 319px center;
}


/* -------------------- Select Box Styles: stackoverflow.com Method */
/* -------------------- Source: http://stackoverflow.com/a/5809186 */
select#soflow, select#soflow-color {
   -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

select#soflow-color {
   color: #fff;
   background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#779126, #779126 40%, #779126);
   background-color: #779126;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   padding-left: 15px;
}





/*------------------------
タブレット・PC用
--------------------------

@media only screen and (min-width: 768px) {


ナビゲーションメニュー PC

#nav-sp{display: none;}

#nav-pc{display: block;}

#nav-pc nav{
	padding: 5px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #f5f5f5;
}

#nav-pc nav ul{
	max-width: 980px;
	margin: 0 auto;
	overflow: hidden;
}

#nav-pc nav ul li a{
	width: 20%;
	float: left;
	padding: 5px 0;
	text-align: center;
	border-bottom:none;
	border-left: 1px solid #ccc;
	box-sizing: border-box;
}

#nav-pc nav ul li:last-child a{
	border-right:1px solid #ccc;	
}

#nav-pc nav ul li a:hover{
	color: #fff;
	background-color: #066;	
}


}
--------------------------*/