@charset "UTF-8";

/*
 * サイト全体に
 * 共通するレイアウト
 * を記載
 */


/* ==========================================================
[ Layout CSS - Contens ]

breadcrumb
contents_base
contents_inner

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

.hide_pc{display:none}
.hide_sp{display:block}
@media screen and (max-width:767px){
	.hide_pc{display:block}
	.hide_sp{display:none}
}

/* ---------------------------------------------
*   breadcrumb (override)
--------------------------------------------- */
#breadcrumb {
	padding-top: 15px;
	padding-bottom: 30px;
	background-color: #e5e5e5;
}


/*  <ul> tag
--------------------------------------------- */
#breadcrumb ul {
	width: 960px;
	letter-spacing: -.5em;
	margin: 0 auto;
}

/* -- <li> tag -- */
#breadcrumb ul li {
	display: inline-block;
	letter-spacing: normal;
	font-size: 12px;
}
#breadcrumb ul li + li {
	background: url(../img/common/arrow_breadcrumb.png) 0 0 no-repeat;
	padding-left: 15px;
	margin-left: 10px;
}

/* <a> tag */
#breadcrumb a:link, #breadcrumb a:visited {
	border-bottom: none;
	color: #333;
}

/* ---------------------------------------------
*   contents_base
--------------------------------------------- */
#contents_base {
	line-height: 1.5;
	font-size: 10px;
	color: #333;
	font-family: "Genshin-Gothic", "Hiragino Kaku Gothic ProN", "meiryo", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	background-color: #e5e5e5;
}

/* ---------------------------------------------
*   contents_inner
--------------------------------------------- */
#contents_inner {
	box-sizing: border-box;
	width: 960px;
	background-color: #e5e5e5;
	padding-bottom: 30px;
	margin: 0 auto;
}
@media screen and (max-width: 738px) {
	#contents_inner {
		width: auto;
		padding-bottom: 15px;
	}
}


/*  link
--------------------------------------------- */
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}


/*  list-item
--------------------------------------------- */
li {
	list-style-type: none;
}


/*  img
--------------------------------------------- */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}


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


/*  responsive
--------------------------------------------- */

/* -- general -- */
.pc_only {
	display: block;
}
.sp_only {
	display: none;
}
@media screen and (max-width: 738px) {
	.pc_only {
		display: none;
	}
	.sp_only {
		display: block;
	}
}

/* -- inline -- */
br.pc_only,
a.pc_only,
span.pc_only {
	display: inline;
}
br.sp_only,
a.sp_only,
span.sp_only {
	display: none;
}
@media screen and (max-width: 738px) {
	br.pc_only,
	a.pc_only,
	span.pc_only {
		display: none;
	}
	br.sp_only,
	a.sp_only,
	span.sp_only {
		display: inline;
	}
}


/*  other
--------------------------------------------- */

/* -- hover_opacity -- */
.hover_opacity {
	transition: opacity .3s;
}
.hover_opacity:hover {
	opacity: .7;
}