@charset "utf-8";

/* ===================================================================
format
=================================================================== */
#container,
#container *,
#container *:before,
#container *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/*	body
----------------------------------------------------*/
body {
text-align:center;
font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif , "FontAwesome";
}

/*	a:link,a:visited,a:hover,a:active
----------------------------------------------------*/
a			{color:#0068b7;text-decoration:none;}
a:link		{color:#0068b7;text-decoration:none;}
a:visited	{color:#0068b7;}
a:hover		{text-decoration:underline;}
a:active	{color:#0068b7;}

#h_wrap a:hover,
#contact a:hover {text-decoration:none;}

.breadcrumb a,
.breadcrumb a:link,
.breadcrumb a:visited,
.breadcrumb a:hover,
.breadcrumb a:active,
.breadcrumb_sp a,
.breadcrumb_sp a:link,
.breadcrumb_sp a:visited,
.breadcrumb_sp a:hover,
.breadcrumb_sp a:active {color:#ee2e44;}

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

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

/* ===================================================================
Layout
=================================================================== */
#contents		{width: 680px;}
#sidebar		{max-width: 280px; width: 100%;}

/* ===================================================================
Layout-contents
=================================================================== */

/*	header
----------------------------------------------------*/

/*	nav
----------------------------------------------------*/

/*	main
----------------------------------------------------*/
#container {
-js-display: flex;/* IE8-9 */
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-pack: justify;/* IE10 */
justify-content: space-between;
width: 980px;
padding-bottom: 5em;
font-size: .8em;
}

/*	contents
----------------------------------------------------*/
#contents {
}

/*	sidebar
----------------------------------------------------*/
#sidebar {
}

/*	footer
----------------------------------------------------*/
#f_wrap {
font-size: 1.2rem;
}

#f_wrap p {
font-size: .9em;
}

/* ===================================================================
FontAwesome
=================================================================== */
.fa {}

/* ===================================================================
breadcrumb
=================================================================== */
.breadcrumb,
.breadcrumb_sp {
max-width: 980px;
width: 100%;
margin: 0 auto;
padding: 1em 0;
}

.breadcrumb ol,
.breadcrumb_sp ol {
-js-display: flex;/* IE8-9 */
display: -ms-flexbox;/* IE10 */
display: flex;
padding: 0;
font-size: 1.2rem;
}

.breadcrumb li,
.breadcrumb_sp li {
padding: 0;
}

.breadcrumb li:before,
.breadcrumb_sp li:before {
content: ">";
padding: 0 1em;
}

.breadcrumb li:first-child:before,
.breadcrumb_sp li:first-child:before {
content: none;
}

.breadcrumb_sp {
display: none;
}

/* ===================================================================
Pagetop
=================================================================== */
.pagetop a:hover {
text-decoration: none;
}

/* ===================================================================
Rollover 背景が白の時用
=================================================================== */
#container a img {
opacity: 1;
transition: .3s ease-in-out; 
}

#container a:hover img {
opacity: .7;
filter: alpha(opacity=30);
}