@charset "UTF-8";


/* !Header Styles
---------------------------------------------------------- */
header {
	height:auto;
}

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 12px;
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 2.5px;
   margin: 0 auto;
   z-index: 100;
   position: fixed;
   left: 0;
   top: 0;
}
.opaque { background-color: #FFF; opacity: 0.9; }

/* hide toggle button */
#nav-wrap > a.mobile-btn { display: none; }

ul#nav {
   min-height: 48px;
   width: auto;
   /* center align the menu */
   text-align: center;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 48px;
   display: inline-block;
}

/* Links */
ul#nav li a {

/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
   display: inline-block;
   padding: 8px 13px;
   line-height: 32px;
   text-decoration: none;
   text-align: left;
   color: #000;
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}

ul#nav li a:hover {
   color: #FF0000;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #FF0000; }

/* !汎用コンテンツ
---------------------------------------------------------- */
.cmn_cont {
	overflow: hidden;
}

.option li {
   display: inline-block;
   margin: 3px 2px;
   padding: 4px 10px 2px 10px;
   color: #FFF;
   background-color: #000;
   font-size: 12px;
}

.option2 li {
   display: inline-block;
   margin: 3px 2px;
   padding: 4px 10px 2px 10px;
   color: #FFF;
   background-color: #FFBF00;
   font-size: 12px;
}

/* !Footer
---------------------------------------------------------- */
footer {
   padding-top: 28px;
   padding-bottom: 28px;
   position: relative;
}

/* Go To Top Button */
#go-top {
   position: absolute;
   top: -24px;
   left: 50%;
   margin-left: -30px;
}
#go-top a {
   text-decoration: none;
   border: 0 none;
   display: block;
   color: #fff;
   text-decoration: none;
   padding-top: 10px;
   width: 42px;
   height: 42px;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   background-color: #FF6666;
}
#go-top a:hover {
   color: #FFF; 
   background-color: #F8B551;
}

/* !Fonts -------------------------------------------------------------- */
.fwB { font-weight: bold;}
.fcP { color: #EB6877;}
.fcR { color: #FF0000;}
.fzSS  { font-size:  72%;}/* base 14px -> 10px */
.fzS   { font-size:  86%;}/* base 14px -> 12px */
.fzM   { font-size: 100%;}
.fzL   { font-size: 115%;}/* base 14px -> 16px */
.fzLL  { font-size: 129%;}/* base 14px -> 18px */
.fzLLL { font-size: 143%;}/* base 14px -> 20px */

/* !Margin ------------------------------------------------------------------ */
.mt10 { margin-top:10px !important;}
.mt20 { margin-top:20px !important;}
.mt30 { margin-top:30px !important;}
.mt40 { margin-top:40px !important;}
.mt50 { margin-top:50px !important;}
.mt60 { margin-top:60px !important;}
.mt70 { margin-top:70px !important;}
.mt80 { margin-top:80px !important;}
.mt100 { margin-top:100px !important;}
.mt160 { margin-top:160px !important;}
.mb10 { margin-bottom:10px !important;}
.mb20 { margin-bottom:20px !important;}
.mb30 { margin-bottom:30px !important;}
.mb40 { margin-bottom:40px !important;}
.mb50 { margin-bottom:50px !important;}
.mb60 { margin-bottom:60px !important;}
.mb70 { margin-bottom:70px !important;}
.mb80 { margin-bottom:80px !important;}

/* !Inline Align ------------------------------------------------------------ */
.taC { text-align: center !important;}
.ImgC { display: block; margin-left: auto; margin-right: auto;}
/* !Padding  ---------------------------------------------------------------- */
.pt80 { padding-top:80px !important;}
.pt15per { padding-top:15% !important;}
/* !Width ------------------------------------------------------------------- */
.w15per { width: 15% !important;}
.w25per { width: 25% !important;}
.w50per { width: 50% !important;}
.wAuto { width: auto !important;}
/* !Floats ------------------------------------------------------------------ */
.flL    { display: inline; float: left;}
.flR    { display: inline; float: right;}