@charset "utf-8";

/*
==================================================

    +1: Formatting Reset
    +2: Redefine
	+3: Float, Clear, Align Set, Valign Set
	+4: body
	+5: #wrap
	+6: #container
	+7: #header
	+8: #mainBody
	+9: #footer
	+10: etc

==================================================
*/


/*----------------------------------------------------------------------
+1: Formatting Reset
=======================================================================*/
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
	/** hr, */
div,
p,
pre,
address,
blockquote,
	/**
ul,
ol,
	dl,
	dt,
	dd,
	*/
form,
fieldset {
	display: block;
	margin: 0;
	padding: 0;
}

p {
	/** text-align: justify; */
}
strong,
em {
	font-weight: bold;
}
/**
ol,
ul {
	list-style-type: none;
}
*/
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1em;
	font-weight: normal;
}

address,
em {
	font-style: normal;
}
img {
	border: none;
	vertical-align: bottom;
}

input,
select,
textarea,
button {
	font-size: inherit;
	line-height: inherit;
}
button {
	cursor: pointer;
}
/*----------------------------------------------------------------------*/


/*----------------------------------------------------------------------
+2: Redefine
=======================================================================*/

a {
	text-decoration:none;
	color:#000;
}
a:link {
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a:active {
	text-decoration:none;
}

/* clearfix
-------------------------------------------------*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;} /*IE7用*/

/* Hides from IE-mac \*/
* html .clearfix { height:1%;}
.clearfix { display:block;}
/* End hide from IE-mac */

/* alpha
-------------------------------------------------*/
a.alpha:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	background: #fff;
}
/*----------------------------------------------------------------------*/


/*----------------------------------------------------------------------
+3: Float, Clear, Align Set, Valign Set
=======================================================================*/

.clear {
	font-size: 1px;
	height: 1px;
	clear: both;
}
.left{
	float:left;
	display:inline;
}

.right{
	float:right;
	display:inline;
}
.alignCenter {
	text-align: center;
}
.alignLeft {
	text-align: left;
}
.alignRight {
	text-align: right;
}
.valignTop {
	vertical-align: top;
}
.valignMiddle {
	vertical-align: middle;
}
.valignBottom {
	vertical-align: bottom;
}
/*----------------------------------------------------------------------*/


/*----------------------------------------------------------------------
+4: body
=======================================================================*/

/* Font-size Setting
80%  = 10px	    |	130% = 16px	|	180% = 22px
90%  = 11px(*)	|	140% = 17px	|	190% = 23px
100% = 12px     |	150% = 18px	|	200% = 24px
105% = 13px	    |	160% = 19px	|	210% = 25px
115% = 14px	    |	165% = 20px	|	215% = 26px
125% = 15px	    |	175% = 21px	|

/* font
---------------------------------------------------*/

body {
	color:#333;
	font-family:'ヒラギノ角ゴ ProN W3', 'Hiragino Maru Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-size:14px;
	line-height:1.8;
	-webkit-text-size-adjust: none;
	padding-top: 50px;
}

.fo10 { font-size:10px; }
.fo11 { font-size:11px; }
.fo13 { font-size:13px; }
.fo14 { font-size:14px; }
.fo16 { font-size:16px; }
.fo18 { font-size:18px; }
.fo20 { font-size:20px; }
.fo24 { font-size:24px; }

.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mt60 { margin-bottom: 60px; }

.ml0 { margin-left: 0 }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }

.mr0 { margin-right: 0 }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }

/*----------------------------------------------------------------------
+5: #wrap
=======================================================================*/

/*----------------------------------------------------------------------
+6: #container
=======================================================================*/

.container-fluid {
	margin-right: auto;
	margin-left: auto;
	max-width: 900px;
}

/*----------------------------------------------------------------------
+7: #header
=======================================================================*/

header .navbar .container a.logo {
	font-size: 24px;
	text-decoration: none;
}

header .navbar .container a.logo:hover {
}

.raleway {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	color: white;
}

.navbar .container .btn.btn-navbar {
	float: left !important;
}

.navbar {
	background-color: rgba(45, 163, 182, 1);
	background-size: 100%;
	border: none;
	width: 100%;
	left: auto;
	right: auto;
}

.navbar-default .navbar-text {
	color: #fff;
}
.navbar-default .navbar-nav > li > a {
	color:#fff;
}

.nav-title {
	color: #fff;
	padding-top: 3px;
	font-size: 18px;
	text-align: center;
}
.nav-title a{
	color: #fff;
}

.sb-android .navbar {
	position: absolute;
}


body {
	padding-top: 52px;
}

.sb-toggle-left {
	width: 58px;
	float: left;
	padding: 14px;
}
.sb-toggle-right {
	color: #fff;
	font-size: 1.2em;
	float: right;
	padding: 14px;
}

.sb-toggle-left, .sb-toggle-right, .sb-open-left, .sb-open-right, .sb-close {
	cursor: pointer;
}
.sb-slidebar-title{
	font-size: 18px;
}
.navicon-line {
	width: 24px;
	height: 4px;
	border-radius: 1px;
	margin-bottom: 3px;
	background-color: #fff;
}
ul.navbar-nav {
	display: none;
}
footer {
	margin-top: 30px;
}
.sb-slidebar {
	padding: 14px;
	background-color: #242424;
}
ul.sb-nav {
	list-style-type: none;
}
ul.sb-nav li {
	width: 100%;
	padding: 12px;
	border-top: 1px solid #303030;
	border-bottom: 1px solid #1C1C1C;
}
ul.sb-nav li:first-child {
	border-top: none;
}
ul.sb-nav li:last-child {
	border-bottom: none;
}
aside#about-me {
	padding: 14px;
}
img.img-me {
	margin: 14px auto;
	border: 4px solid #fff;
}
.sb-slidebar, .sb-slidebar h3 {
	color: #ddd;
}
.sb-slidebar ul.sb-nav li a {
	color: #DEDEDE;
}
.sb-slidebar ul.sb-nav li a:hover {
	color: #C7C7C7;
	text-decoration: none;
}
.sb-slidebar ul.sb-nav li span:hover {
	color: #C7C7C7;
}

@media (min-width: 768px) {
	ul.navbar-nav {
		display: block;
	}
	@media (min-width: 992px) {
	}
	@media (min-width: 1200px) {
	}
	html.sb-active-left .sb-left {
		visibility: visible;
	}
	html.sb-active-right .sb-right {
		visibility: visible;
	}
}

.navbar-brand {
	text-align: left;
	padding: 15px 15px 15px 0;
}
navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
	margin-left: 0;
}
.navbar-brand a:hover {
	text-decoration: none;
}

.navbar a {
	color: #fff;
}
.navbar a:hover {
}

.navbar-toggle {
	border: none;
	border-radius: 0;
	padding: 0;
}

.navbar-login-fix {
	margin-top: 0;
	margin-bottom: 0;
	margin-right: -15px;
}
.navicon-line-fix {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: -15px;
	padding: 15px;
}

.navbar-right a:hover {
	text-decoration: none;
}

ul.navbar-login {
	list-style-type: none;
	margin: 0;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
	line-height: 20px;
}

/* 画面サイズが1pxから328pxまではここを読み込む */
@media screen and (min-width:1px) and (max-width:328px) {
	.navbar-brand {
		float: left;
		height: 50px;
		line-height: 20px;
		position: absolute;
		top: 50%;
		transform: translate(0%, -50%);
		-webkit-transform: translate(0%, -50%);
		-moz-transform: translate(0%, -50%);
	}

	.navbar-right {
		padding: 14px;
	}

	.form-group .btn {
		margin-bottom: 20px;
	}
	.btn {
	}
}

@media screen and (min-width:326px) and (max-width:768px) {
	.form-group .btn {
		margin-bottom: 20px;
	}
}

/* 画面サイズが768pxからはここを読み込む */
@media screen and (min-width:768px) {
	.navbar-brand {
		left: 50%;
	}
	.navbar-brand a {
	}
}

/* 1024 */

.navbar-left-fix {
	float: left !important;
	margin-left: 10px;
}
.sb-toggle-left {
	float: left;
	padding: 14px;
	width: 58px;
}


/* Menu */
.sb-menu { /* Apply to <ul> or <ol>. */
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.sb-menu li {
	width: 100%;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1); /* Will lighten any background colour you set. */
	border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Will darken any background colour you set. */
}

.sb-menu > li:first-child {
	border-top: none; /* Removes top border from first list item.. */
}

.sb-menu > li:last-child {
	border-bottom: none; /* Removed bottom border from last list item. */
}

.sb-menu li a {
	width: 100%; /* Makes links full width. */
	display: inline-block;
	padding: 1em; /* Creates an even padding the same size as your font. */
	color: #f2f2f2;
}

.sb-menu li a:hover {
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.05); /* Will lighten any background colour you set. */
}

/* Borders */
.sb-left .sb-menu li a {
	border-left: 3px solid transparent;
}

.sb-left .sb-menu li a:hover {
	border-left: 3px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */
}

.sb-right .sb-menu li a {
	border-right: 3px solid transparent;
}

.sb-right .sb-menu li a:hover {
	border-right: 3px solid; /* Removes transparent colour, so border colour will be the same as link hover colour. */
}

/* Left */

.sb-menu li .sb-open-right, .sb-menu li small {
	display: inline-block;
	padding: 14px;
}

.sb-menu li img {
	margin: 14px;
}

i.white {
	color: #fff;
}

/*----------------------------------------------------------------------
+8: #mainBody
=======================================================================*/

/* 見出し
-------------------------------------------------*/
h2.h2 {
	margin-top: 30px;
	margin-bottom: 30px;
}

/*----------------------------------------------------------------------
+9: #footer
=======================================================================*/

footer {
	clear:both;
	float:left;
	width:100%;
	background-color: #45474D;
	margin-top: 100px;
}

.finner {
	color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	padding-top: 15px;
}

footer .footer_col {
	float: left;
}

#sitemap .footer_col {
	margin-bottom: 20px;
}

footer h2 {
	font-size: 16px;
	color: #CCC;
	margin-bottom: 20px;
	padding-bottom: 5px;
	border-bottom: solid 1px #666;
}

footer .finner dl.f_nav {
	color:#FFF;
}

footer .finner dl.f_nav dt {
	font-weight:bold;
	padding-bottom:5px;
}
footer .finner dl.f_nav dd {
	padding-bottom:3px;
}
footer .finner dl.f_nav dd a {
	color:#FFF;
	border-bottom:1px dotted #FFF;
	text-decoration:none;
}
footer .finner dl.f_nav dd a:hover {
	border:none;
	text-decoration:none;
}

footer .finner ul.f_nav {
	color:#FFF;
}
footer .finner ul.f_nav li {
	padding-bottom: 5px;
}
footer .finner ul.f_nav li a {
	color:#CCC;
	text-decoration:none;
}
footer .finner dl.f_nav li a:hover {
	border:none;
	text-decoration:none;
}

/* Sitemap
 -------------------------------------------------- */

footer #sitemap ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

footer #sitemap {
	padding: 30px 0 20px 0;
}

footer #sitemap .finner {
	padding: 0;
}

/* Copyright
 -------------------------------------------------- */

#copyright {
	background-color: #4D5057;
	width: 100%;
	padding: 20px 0;
}

#copyright p {
	margin: 0 auto;
	color:#FFF;
	font-weight:bold;
	text-align:center;
}

/* gototop
 -------------------------------------------------- */

#gotoTop {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
}

#gotoTop a {
	display:block;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	background-color: rgba(255, 255, 255, .5);
	outline: none;
	text-align: center;
	padding-top: 12px;
}

/* Form
=================================================================== */

.required-label {
	background-color:#990000;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	color:#FFFFFF;
	padding:2px 3px;
	white-space:nowrap !important;
	font-size: 12px;
	display: block;
	float: right;
}

.error-message {
	color: red;
}

/* SNS
=================================================================== */

#f_facebook iframe #u_0_4 {
	background-color: red;
	color: white;
}

.social_links {
	text-align: right;
}

.social_links a i {
	font-size: 1.4em;
}

/* メッセージボックス
 -------------------------------------------------- */
.message_box {
	background-color: #ffffff;
	padding: 10px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border:1px solid #D3D3D3;
	margin-top: 10px;
	margin-bottom: 30px;
}

/* ヘッダーナビ
 -------------------------------------------------- */
#header .nav li {
	line-height: 30px;
}

/** プロフィールアイコン画像 */
#header .navbar .nav li a.profile-image {
	padding: 0;
}

.navbar-search .input-append {
	margin-top: 5px;
	margin-bottom: 0;
}
.navbar-search {
	margin-top: 0;
}
.navbar-search .btn {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 2px;
}

.navbar .nav .join a {
	color: #FFAA00;
}

.navbar .nav .cart a i {
	font-size: 26px;
	position: relative;
	top: 4px;
}

/* ヘッダーナビ > ログイン
 -------------------------------------------------- */

/* ヘッダーナビ > お知らせ
 -------------------------------------------------- */

div#header a.notification {
	color: #999;
}

div#header a.notification:hover {
	color: #999;
	background-color: #ffaa00;
}

div#header a.notification span {
	background-color: white;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 5px;
	padding-bottom: 5px;

	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

div#header ul#notification-menu {
	width: 320px;
}
div#header ul#notification-menu li {
}


/* file upload
 -------------------------------------------------- */
.btn-file {
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}

.btn-file > input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	font-size: 23px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	transform: translate(-300px, 0) scale(4);
	direction: ltr;
}

.fileupload {
	margin-bottom: 9px;
}

.fileupload .uneditable-input {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle;
	cursor: text;
}

.fileupload .thumbnail {
	display: inline-block;
	margin-bottom: 5px;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
}

.fileupload .thumbnail > img {
	display: inline-block;
	max-height: 100%;
	vertical-align: middle;
}

.fileupload .btn {
	vertical-align: middle;
}

.fileupload-exists .fileupload-new,
.fileupload-new .fileupload-exists {
	display: none;
}

.fileupload-inline .fileupload-controls {
	display: inline;
}

.fileupload-new .input-append .btn-file {
	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}

.thumbnail-borderless .thumbnail {
	padding: 0;
	border: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.fileupload-new.thumbnail-borderless .thumbnail {
	border: 1px solid #ddd;
}

.control-group.warning .fileupload .uneditable-input {
	color: #a47e3c;
	border-color: #a47e3c;
}

.control-group.warning .fileupload .fileupload-preview {
	color: #a47e3c;
}

.control-group.warning .fileupload .thumbnail {
	border-color: #a47e3c;
}

.control-group.error .fileupload .uneditable-input {
	color: red;
	border-color: #b94a48;
}

.control-group.error .fileupload .fileupload-preview {
	color: red;
}

.control-group.error .fileupload .thumbnail {
	border-color: #b94a48;
}

.control-group.success .fileupload .uneditable-input {
	color: #468847;
	border-color: #468847;
}

.control-group.success .fileupload .fileupload-preview {
	color: #468847;
}

.control-group.success .fileupload .thumbnail {
	border-color: #468847;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
	width: auto;
}

select,
input[type="file"] {
	height: 30px;
	/* In IE7, the height of the select element cannot be changed by height, only font-size */

	*margin-top: 4px;
	/* For IE7, add top margin to align select with labels */

	line-height: 30px;
}

select {
	background-color: #ffffff;
	border: 1px solid #cccccc;
}

select[multiple],
select[size] {
	height: auto;
}

select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

/*----------------------------------------------------------------------
+10: etc
=======================================================================*/

/* error
 -------------------------------------------------- */
.error {
	color: red;
}

.alert {
	margin-top: 80px;
}

/* sort
 -------------------------------------------------- */
ul.sort_top li a {
	font-size: 13px;
	color: #ffffff;
	text-decoration: none;
	display: block;
	height: 25px;
	line-height: 25px;
	padding-left: 10px;
	padding-right: 10px;
}

ul.my_label li a {
	width: 205px;
	text-align: center;
}

ul.sort_top li.sort_label_off a {
	background-color: #ffffff;
	color: #000000;
}
ul.sort_top li.sort_label_off a:hover {
	background-color: #ccc;
	color: #fff;
}
ul.sort_top li.sort_label_on a {
	background-color: #6c6c6c;
}

ul.sort_top li.sort_label_on a:hover {
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

/* progress bar
 -------------------------------------------------- */
.progress {
	float: none;
	margin-left: 0;
	position:relative;
	width:240px;
	border: 1px solid #ddd;
	padding: 1px;
	border-radius: 3px;
	margin-top: 4px;
	margin-bottom: 4px;
}
.bar{
	background-color: #B4F5B4;
	width:0%;
	height:24px;
	border-radius: 3px;
}
.percent {
	position:absolute;
	display:inline-block;
	top:2px;
	left:46%;
}