@charset "UTF-8";
/* CSS Document */

@import url("reset.css");
@import url("left_nav.css");
@import url("second_page.css");
@import url("special_page.css");
@import url("blog.css");

p {font-size:16px; line-height:1.8; text-align: justify; color:#000; text-shadow:1px 1px 0 #FFF;}

a {text-decoration:none; color:#1111cc;}
a:hover {text-decoration:underline; color:#2020A6;}
a:hover img {-moz-opacity:0.8; opacity:0.8; filter: alpha(opacity=80); background:#ffffff;}
#header #logo a:hover img,
.flickView ul li a:hover img {-moz-opacity:1; opacity:1; filter: alpha(opacity=100); background:none;}

@media screen and (min-width:741px){
.sp_only {display:none;}
.pc_br {display:block;}

.left {float:left;}
.right {float:right;}
}
@media screen and (max-width:740px){
.pc_only {display:none;}
.sp_br {display:block;}
}


/*--------------------------------------------------------------------------------------------
　　全ページ 共通部分
--------------------------------------------------------------------------------------------*/
#content {width:920px; margin:0 auto; clear:both;}
@media screen and (max-width:768px){
#content {width:720px; margin:0 auto;}
}

/* 白背景のボックス 共通 */
.box,.box2 {
	background:#FFF;
	border:1px solid #FFF;
	behavior:url(PIE.htc);
	position:relative;
}

/* 左カラム ============================================================= */
#left_column {float:left; width:180px; padding-right:20px; padding-top:30px; height: 100%;}

/* メインカラム ============================================================= */
#main_column {float:left; width:720px; padding-top:30px;}
#main_column_wide {width:920px; margin-top:30px;}
@media screen and (max-width:768px){
#main_column_wide {width:720px; margin-top:30px;}
#main_column_wide img {width:100%;}
}

/* タブレット・スマートフォン用 サブページメニュー ========================== */
@media screen and (min-width:769px){
#sub_nav {display:none;}
}
@media screen and (max-width:768px){
#sub_nav {margin-top:20px;}
#sub_nav ul a {font-size:16px; line-height:1.6; color:#000;}
#sub_nav ul a li {width:315px; height:38px; background:#FFF; float:left; margin:10px 10px 0 0; padding:12px 20px 0 20px;}
#sub_nav ul a li span {display:block; background:url(../images/common/arrow1.gif) no-repeat right center; background-size:8px;}
#sub_nav ul a:nth-child(even) li {margin:10px 0 0 0;}
#sub_nav ul a.s_current,
#sub_nav ul a:hover {color:#FFF;}
#sub_nav ul a.s_current li,
#sub_nav ul a:hover li {background:#004DA1;}
#sub_nav ul a.s_current li span,
#sub_nav ul a:hover li span {background:url(../images/common/arrow2.gif) no-repeat right center; background-size:8px;}
}

/* フッター ============================================================= */

/* Googlリマーケティング タグの隙間回避 */
iframe[name="google_conversion_frame"] {
	position: absolute;
	top: 0;
}


/*--------------------------------------------------------------------------------------------
　　404ページ
--------------------------------------------------------------------------------------------*/
#header.error404_h {border-bottom:1px solid #004DA1; /*padding:4% 0 5% 0;*/ position:relative; height:auto;}

.error404 {margin:30px;}
.error404 .box {padding:16% 5%; width:90%;}
.error404 p {text-align:center;}
.error404 p.text_01 {color:#EEDDE6; font-size:20px; font-weight:bold;}
.error404 p.text_02 {color:#999; font-size:20px; font-weight:bold; margin-bottom:10%;}
.error404 .box_area {
	background:#F3F3F3;
	border-radius: 12px;
	-webkit-border-radius: 12px; /* Safari,Google Chrome用 */
	-moz-border-radius: 12px; /* Firefox用 */
	text-align:center;
	width:80%;
	margin:0 auto;
	padding:4%;
}
.error404 .box_area p {line-height:1.8; margin-bottom:20px; font-size:18px;}

@media screen and (max-width:740px){
	.error404 .box_area {padding:8% 4%;}
.error404 .box_area p {font-size:100%;}
}
@media screen and (max-width: 1280px) {
html  {font-size : 90.0%;}
}
@media screen and (max-width: 1180px) {
html {font-size : 100.0%;}
}
@media screen and (max-width: 1080px) {
html {font-size : 100.0%;}
}
@media screen and (max-width: 980px) {
html {font-size : 90.0%;}
}
@media screen and (max-width: 880px) {
html {font-size : 80.0%;}
}
@media screen and (max-width: 768px) {
html {font-size : 80.0%;}
}
@media screen and (max-width: 740px) {
html {font-size : 80.0%;}
}

/*---------------
　  clearfix
---------------*/
.clearfix:after {
	 visibility: hidden;
	 display: block;
	 font-size: 0;
	 content: " ";
	 clear: both;
	 height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */