@charset "utf-8";

/* ===================================================================
format
=================================================================== */

/*	body
----------------------------------------------------*/
body {
text-align: center;
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif , "FontAwesome";
background: #fff;
}

/*	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;}

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

/*	table
----------------------------------------------------*/
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}

th,
td {
padding: .5em;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

/* ===================================================================
Layout
=================================================================== */
#h_wrap		{position: fixed; width: 100%; background:#fff; -moz-box-shadow:0px 0px 4px 0px rgba(50,50,50,0.5); -webkit-box-shadow:0px 0px 4px 0px rgba(50,50,50,0.5); box-shadow:0px 0px 4px 0px rgba(50,50,50,0.5); z-index:1000;}
#main		{}
#contents		{width: 100%;}
#sidebar		{width: 40%;}
#footer			{width:100%; margin:0 auto; padding-top: 10px; background:#006cbe;}

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

/*	header
----------------------------------------------------*/  
#header{
-js-display: flex;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
padding: 15px;
}

#header #logo h1{
font-size:10px;
color: #333;
}

#header #logo .site_logo{
margin-top: 3px;
width:150px;
}

.sp_btn {
display:block;
padding: 5px;
border-radius: 4px;
background: #347dd8;
background: -moz-linear-gradient(to bottom,#3989ed 0%,#2c6ab8 100%);
background: -webkit-linear-gradient(to bottom,#3989ed 0%,#2c6ab8 100%);
background: -o-linear-gradient(to bottom,#3989ed 0%,#2c6ab8 100%);
background: linear-gradient(to bottom,#3989ed 0%,#2c6ab8 100%);
}

.sp_btn .navi_btn {
display: inline-block;
position: relative;
}

.navi_icon {
display: block;
width: 33px;
height: 3px;
background: #fff;
transition: .2s;
}

.navi_icon:before,
.navi_icon:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 33px;
height: 3px;
background: #fff;
transition: .3s;
}

.navi_icon:before{
margin-top: -11px;
}

.navi_icon:after{
margin-top: 8px;
}

.navi_btn .close{
background: transparent;
}

.navi_btn .close:before, .navi_btn .close:after{
margin-top: 0;
}

.navi_btn .close:before{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

.navi_btn .close:after{
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

/*	nav
----------------------------------------------------*/
.nav {
display: none;
}

.nav ul.menu{
background: #353535;
}

.nav ul.menu li{
display: block;
border-bottom: 1px solid #fff;
}

.nav ul.menu li a{
display: block;
padding: 10px;
font-size: 14px;
color:#fff;
}

.nav ul.contact{
-js-display: flex;
display: -ms-flexbox;
display: flex;    
}

.nav ul.contact li{
width: 50%;
}

.nav ul.contact li a{
color:#fff;
display: block;
padding: 13px 0;
text-align: center;
font-size: 15px;
}

.nav ul.contact li.fl{
background-color: #4a8eb5;
}

.nav ul.contact li.fl a:before{
font-family:"FontAwesome";
content: "\f0e0";
margin-right: 7px;
}

.nav ul.contact li.fr{
background-color: #78b54b;
}

.nav ul.contact li.fr a:before{
font-family:"FontAwesome";
content: "\f133";
margin-right: 7px;
}

.nav p.tel{
width: 100%;
background-color: #4e78b7;
}

.nav p.tel a{
display: block;
padding: 13px 0px;
text-align: center;
font-size: 17px;
color:#fff;
}

.nav p.tel a:before{
content:" ";
display:inline-block;
width: 20px;
height: 13px;
margin-right: 7px;
background: url(../images/common/freedail.png);
background-size: contain;
}

/*	main
----------------------------------------------------*/
#main {
padding: 88px 10px 0;
}

/*	contents
----------------------------------------------------*/
#contents h2{
width: 100%;
margin-bottom: 20px;
padding: 8px 0;
text-align: center;
font-size: 26px;
line-height: 1.2;
border-top: 5px solid #006cbe;
border-bottom: 5px solid #006cbe;
background: #edf5fb;
background: -moz-linear-gradient(to bottom,#f1f7fc 0%,#ddebf6 100%);
background: -webkit-linear-gradient(to bottom,#f1f7fc 0%,#ddebf6 100%);
background: -o-linear-gradient(to bottom,#f1f7fc 0%,#ddebf6 100%);
background: linear-gradient(to bottom,#f1f7fc 0%,#ddebf6 100%);
}

#contents h3{
margin-bottom: 10px;
padding: 8px 0;
text-align: center;
font-size: 23px;
line-height: 1.2;
font-weight: normal;
border:3px solid #006cbe;
background: #e6e6e6;
background: -moz-linear-gradient(to bottom,#eee 0%, #ccc 100%);
background: -webkit-linear-gradient(to bottom,#eee 0%, #ccc 100%);
background: -o-linear-gradient(to bottom,#eee 0%, #ccc 100%);
background: linear-gradient(to bottom,#eee 0%, #ccc 100%);
}

#contents .h4_bg{
margin-bottom: 10px;
padding: 7px;
border: 1px solid #b2b2b2;
background: #ededed;
background: -moz-linear-gradient(to bottom,#f7f7f7 0%,#cfcfcf 100%);
background: -webkit-linear-gradient(to bottom,#f7f7f7 0%,#cfcfcf 100%);
background: -o-linear-gradient(to bottom,#f7f7f7 0%,#cfcfcf 100%);
background: linear-gradient(to bottom,#f7f7f7 0%,#cfcfcf 100%);    
}

#contents h4{
padding-left: 7px;
font-size: 18px;
line-height: 1.2;
font-weight: normal;
border-left: 7px solid #198de5;
}

#contents h5{
margin-bottom: 7px;
padding-left: 5px;
font-size: 16px;
border-bottom: 2px solid #3ca6f7;
}

#contents h6{
position: relative;
margin-bottom: 10px;
padding: 3px 3px 3px 22px;
font-size: 15px;
line-height: 1.5;
background: #ededed;
}

#contents h6:before{
position: absolute;
top: 3px;
left: 5px;
font-family:"FontAwesome";
content: "\f10c";
color: #006dc0;
}

#contents p{
margin-bottom: 7px;
font-size: 14px;
color: #333;
}

#contents p span{
color: #f00;
}

#contents ul.link_list{
margin-bottom: 20px;
}

#contents ul.link_list li{
margin-bottom: 15px;
background: #006cbe;
}

#contents ul.link_list li:last-child{
margin-bottom: 0;
}

#contents ul.link_list li a{
display: block;
padding-left: 10px;
font-size: 14px;
color: #fff;
line-height: 2;
}

#contents ul.link_list li a:before{
font-family:"FontAwesome";
content: "\f04b";
padding-right: 13px;
}

section{
margin: -80px 0 20px;
padding-top: 80px;
}

/*	bottom_contact_area
----------------------------------------------------*/
#bottom_contact_area{
margin-bottom: 15px;
padding: 10px;
border: 3px solid #006cbe;
border-radius: 3px;
background: #fcfaf6;
}

#bottom_contact_area dd{
padding: 0;
background-image: none;
}

#bottom_contact_area dt{
margin-bottom: 8px;
padding: 0;
text-align: center;
font-size: 15px;
line-height: 2;
font-weight: bold;
background: #d7f7fb;
background: -moz-linear-gradient(to bottom,#dcf9fe 0%,#caf4fb 100% );
background: -webkit-linear-gradient(to bottom,#dcf9fe 0%,#caf4fb 100% );
background: -o-linear-gradient(to bottom,#dcf9fe 0%,#caf4fb 100% );
background: linear-gradient(to bottom,#dcf9fe 0%,#caf4fb 100% );
}

#bottom_contact_area dt:before{
content: none;
}

#bottom_contact_area p{
margin-bottom: 7px;
text-align: center;
font-size: 14px;
}

#bottom_contact_area li{
margin-bottom: 8px;
text-align: center;
border-radius: 5px;
}

#bottom_contact_area li a{
display: block;
padding: 8px 0;
font-size: 14px;
color: #fff;
font-weight: bold;
}

#bottom_contact_area li:nth-child(1){
background: #4289b2;
background: -moz-linear-gradient(to bottom,#5192b8 0%,#327fab 100% );
background: -webkit-linear-gradient(to bottom,#5192b8 0%,#327fab 100% );
background: -o-linear-gradient(to bottom,#5192b8 0%,#327fab 100% );
background: linear-gradient(to bottom,#5192b8 0%,#327fab 100% );
}

#bottom_contact_area li:nth-child(1) a:before{
font-family: "FontAwesome";
content: "\f0e0";
margin-right: 7px;
}

#bottom_contact_area li:nth-child(2){
background: #83bc5a;
background: -moz-linear-gradient(to bottom,#8cc167 0%,#78b64c 100% );
background: -webkit-linear-gradient(to bottom,#8cc167 0%,#78b64c 100% );
background: -o-linear-gradient(to bottom,#8cc167 0%,#78b64c 100% );
background: linear-gradient(to bottom,#8cc167 0%,#78b64c 100% );
}

#bottom_contact_area li:nth-child(2) a:before{
font-family: "FontAwesome";
content: "\f133";
margin-right: 7px;
}

#bottom_contact_area li:nth-child(3){
margin-bottom: 0;
line-height: 1.2;
background: #4470b2;
background: -moz-linear-gradient(to bottom,#5179b8 0%,#3262ab 100% );
background: -webkit-linear-gradient(to bottom,#5179b8 0%,#3262ab 100% );
background: -o-linear-gradient(to bottom,#5179b8 0%,#3262ab 100% );
background: linear-gradient(to bottom,#5179b8 0%,#3262ab 100% );
}

#bottom_contact_area li:nth-child(3) a:before{
content:" ";
display:inline-block;
width: 20px;
height: 13px;
margin-right: 7px;
padding-bottom: 22px;
vertical-align: top;
background: url(../images/common/freedail.png) no-repeat;
background-size: contain;
background-position: 0 9px;
}

/*	bottom_ba_area
----------------------------------------------------*/
#bottom_ba_area ul{
-js-display: flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}

#bottom_ba_area ul li{
width: 48%;
margin-bottom: 4%;
}

#bottom_ba_area ul li:nth-child(odd){
margin-right: 4%;
}

/*	footer
----------------------------------------------------*/
#footer p{
padding-bottom: 10px;
text-align: center;
font-size: 12px;
color: #fff;
}

#footer p a{
color: #fff;
}

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

/* ===================================================================
breadcrumb
=================================================================== */
.breadcrumb ol {
-js-display: flex;/* IE8-9 */
display: -ms-flexbox;/* IE10 */
display: flex;
padding: 2em 0 0;
}

.breadcrumb li:before {
content: ">";
padding: 0 0.3em 0 0.8em;
}

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

/* ===================================================================
Pagetop
=================================================================== */
.pagetop {
position: fixed;
right: 10px;
bottom: 30px;
font-size: 77%;
}

.pagetop a {
display: block;
width: 80px;
padding: 1em 0;
text-align: center;
text-decoration: none;
color: white;
border-radius: 0.5em;
background: #666;
}

.pagetop a:hover {
text-decoration: none;
background: #999;
}

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

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