@charset "utf-8";
/* CSS Document */
/*====================================================================================
■01.RESET HTML
■02.CLEAR FLOAT
■03.MARGIN DEFAULT
■04.LAYOUT
■05.USE MEDIA
■06.OTHER
■07.PAGE UP
■08.HEADER
■09.GOLABLE NAVIGATION
■10.FOOTER
====================================================================================*/
/*====================================================================================
■01.RESET HTML
====================================================================================*/
h4 { font-size:14px; }
ul, li { list-style:none; }
img { margin:0px; padding:0px; border:0px;transition:All 0.3s ease; -webkit-transition:All 0.3s ease; -moz-transition:All 0.3s ease; -o-transition:All 0.3s ease; }
.ov_hover:hover img { opacity:0.7; filter:alpha(opacity=70); -ms-filter: "alpha( opacity=70)"; }
a { color: #333; text-decoration:underline; transition: all linear 0.3s;}
a:hover { text-decoration: none; }
html {overflow-y:auto;}
body { font-size:14px; font-family: "yugothic","游ゴシック体", "Yu Gothic", YuGothic, "Meiryo","メイリオ","MS PGothic","MS Pゴシック",sans-serif; color: #232323; min-width: 1000px; overflow: hidden; }
/*====================================================================================
■02.CLEAR FLOAT
====================================================================================*/
.clearfix:after { clear: both; display: block; content: " "; height: 0px; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hide these rules from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*====================================================================================
■03.MARGIN DEFAULT
====================================================================================*/
/*--------------------------------------------------
margin
-------------------------------------------------- */
.m00 { margin: 0px !important; }
.m05 { margin: 5px !important; }
.m10 { margin: 10px !important; }
.m15 { margin: 15px !important; }
.m20 { margin: 20px !important; }
.m25 { margin: 25px !important; }
.m30 { margin: 30px !important; }
.m35 { margin: 35px !important; }
.m40 { margin: 40px !important; }
.m45 { margin: 45px !important; }
.mt00 { margin-top: 0px !important; }
.mt05 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt33 { margin-top: 33px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 30px !important; }
.mt45 { margin-top: 35px !important; }
.mr00 { margin-right: 0px !important; }
.mr05 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
.mr45 { margin-right: 45px !important; }
.mb00 { margin-bottom: 0px !important; }
.mb05 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb45 { margin-bottom: 45px !important; }
.mb80 { margin-bottom: 80px !important; }
.ml00 { margin-left: 0px !important; }
.ml05 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
.ml45 { margin-left: 45px !important; }
/*
--------------------------------------------------
padding
-------------------------------------------------- */
.p00 { padding-top: 0px !important; }
.p05 { padding-top: 5px !important; }
.p10 { padding-top: 10px !important; }
.p15 { padding-top: 15px !important; }
.p20 { padding-top: 20px !important; }
.p25 { padding-top: 25px !important; }
.p30 { padding-top: 30px !important; }
.p35 { padding-top: 35px !important; }
.p40 { padding-top: 40px !important; }
.p45 { padding-top: 45px !important; }
.pt00 { padding-top: 0px !important; }
.pt05 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pt35 { padding-top: 35px !important; }
.pt40 { padding-top: 40px !important; }
.pt45 { padding-top: 45px !important; }
.pr00 { padding-right: 0px !important; }
.pr05 { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }
.pr35 { padding-right: 35px !important; }
.pr40 { padding-right: 40px !important; }
.pr45 { padding-right: 45px !important; }
.pb00 { padding-bottom: 0px !important; }
.pb05 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb35 { padding-bottom: 35px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb45 { padding-bottom: 45px !important; }
.pl00 { padding-left: 0px !important; }
.pl05 { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }
.pl35 { padding-left: 35px !important; }
.pl40 { padding-left: 40px !important; }
.pl45 { padding-left: 45px !important; }
/*====================================================================================
■04.LAYOUT
====================================================================================*/
.container { position: relative; width: 1000px; margin: 0 auto; }
/*====================================================================================
■05.USE MEDIA
====================================================================================*/
.pull-left { float:left; }
.pull-right { float:right; }
.media, .media-body { overflow:hidden; }
.media > .pull-left { margin-right:20px; }
.media > .pull-right { margin-left:20px; }
.media-text:after { clear: both; display: block; content: ""; height: 0px; visibility: hidden; }
/*====================================================================================
■06.OTHER
====================================================================================*/
.text-normal { font-weight:normal }
.text-bold { font-weight:bold }
.text-left { text-align:left }
.text-right { text-align:right }
.text-center { text-align:center }
.text-underline {text-decoration: underline;}
.text-none-underline {text-decoration: none !important;}
.font14 {font-size: 14px;}
.font11 {font-size: 11px;}
/*====================================================================================
■07.PAGE UP
====================================================================================*/
#footer .page_up {position: fixed; right: -550px; bottom: 120px; z-index: 999;}
/*====================================================================================
■08.HEADER
====================================================================================*/
header {background: url(../common_img/h_bg.png) no-repeat center top;/* height: 81px; */background-size: cover;padding-bottom: 20px;}
header h1 {font-size: 10px;color: #c8d7e6;font-weight: normal;margin-bottom: 12px;width: 600px;}
header .pull-right {width: 302px;margin-right: 30px;padding-top: 7px;}
header .pull-right ul:first-child li a {font-size: 17px;font-weight: bold; color: #fff; text-decoration: none; font-size: 15px; float: left;}
header .pull-right ul:first-child li:last-child a {margin-right: 0; color: #fff; font-weight: bold;}
@media all and (max-width: 760px) {
header .pull-right {width: 320px;}
}
header .pull-right ul:first-child li i {font-size: 15px;margin-right: 5px;}
header .pull-right ul:first-child li {float: left;margin-right: 20px;color: #fff;font-size: 17px;font-weight: bold;/* padding-left: 15px; */}
header .pull-right ul:first-child li:last-child {margin-right: 0;color: #fff;font-size: 17px;font-weight: bold;/* padding-left: 20px; */}
header .pull-right ul:last-child {float: right;margin-top: 7px;margin-right: 20px;}
header .pull-right ul:last-child li {float: left; margin-right: 10px;}
header .pull-right ul:last-child li:last-child {margin-right: 0;}
header .pull-right ul:last-child li i {color: #000;font-size: 20px;width: 36px;height: 36px;background: #fff;text-align: center;line-height: 36px;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;transition: all linear 0.3s;}
header .pull-right ul:last-child li i:hover {color: #1e69b9;}
/*====================================================================================
■09.GOLABLE NAVIGATION
====================================================================================*/
.right_menu .main_menu {padding: 10px;border-top: 4px solid #1e69b9;background: #e1e1e1; margin-bottom: 10px;}
.right_menu .main_menu li a {transition: all linear 0.30s;line-height: 46px;position:relative;display: block;width: 195px;font-size: 16px;padding-left: 15px;text-decoration: none;height: 46px;background-color: #fafafa;-webkit-box-shadow: 0 0 4px rgba(0,0,0,.12);-moz-box-shadow: 0 0 4px rgba(0,0,0,.12);box-shadow: 0 0 4px rgba(0,0,0,.12);background-image: -webkit-linear-gradient(bottom, rgba(250,250,250,.41), rgba(255,255,255,.41));background-image: -moz-linear-gradient(bottom, rgba(250,250,250,.41), rgba(255,255,255,.41));background-image: -o-linear-gradient(bottom, rgba(250,250,250,.41), rgba(255,255,255,.41));background-image: -ms-linear-gradient(bottom, rgba(250,250,250,.41), rgba(255,255,255,.41));background-image: linear-gradient(to top, rgba(250,250,250,.41), rgba(255,255,255,.41));}
.right_menu .main_menu li i {transition: all linear 0.30s;text-align: right;position: absolute;right: 12px;top: 16px;font-size: 14px;color: #1e69b9;}
.right_menu .main_menu li {margin-bottom: 5px;}
.right_menu .main_menu li:last-child {margin-bottom: 0; }
.right_menu .main_menu li:hover a {transition: all linear 0.35s; color: #fff;
background: -webkit-linear-gradient(left, #1e69b9 , #0d3559); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #1e69b9, #0d3559); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #1e69b9, #0d3559); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #1e69b9 , #0d3559); /* Standard syntax */
background-position: 210px;
}
.right_menu .main_menu li:hover a i {transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); color: #fff;}
/* Actice menu */
.right_menu .main_menu li.active a {transition: all linear 0.35s; color: #fff;
background: -webkit-linear-gradient(left, #1e69b9 , #0d3559); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #1e69b9, #0d3559); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #1e69b9, #0d3559); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #1e69b9 , #0d3559); /* Standard syntax */
background-position: 210px;
}
.right_menu .main_menu li.active a i {transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); color: #fff;}
/* Actice menu */
.right_menu .part_menu li a {transition: all linear 0.30s;line-height: 46px;position:relative;display: block;width: 230px;text-decoration: none;height: 46px;font-size: 17px;color: #fff;text-align: center;}
.right_menu .part_menu li i {transition: all linear 0.30s;text-align: right;position: absolute;left: 14px;top: 10px;font-size: 23px;}
.right_menu .part_menu li {margin-bottom: 10px;}
.right_menu .part_menu li.fb a {background: #3b5998;}
.right_menu .part_menu li:hover a {padding-left: 30px; width: 200px; transition: all linear 0.25s;}
.right_menu .part_menu li.ins a {background: #3f729b;}
.right_menu .part_menu li.yt a {background: #cd201f;}
.right_menu .part_menu li:hover a i {transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg);}
/*====================================================================================
■10.FOOTER
====================================================================================*/
footer {margin-top: 45px;}
footer .f_top {background: url(../common_img/f_bg.png) no-repeat center top; height: 128px; padding: 20px 0;}
footer .f_top .container > .pull-left {width: 300px;}
footer .f_top .container > .pull-left .f_logo {margin-bottom: 20px;}
footer .f_top .container > .pull-left p {color: #fff; font-size: 12px; margin-bottom: 5px;}
footer .f_top .container > .pull-left p a {font-size: 12px; color: #fff; text-decoration: underline; transition: all linear 0.3s;}
footer .f_top .container > .pull-left p a:hover {color: #202020; text-decoration: none; margin-left: 15px;}
footer .f_top .container > .pull-right {float: right;width: 445px;}
footer .f_top .container .f_tab {float: right;}
footer .f_top .container > .pull-right ul li i {font-size:15px; margin-right:5px;}
footer .f_top .container > .pull-right ul {padding-top: 15px;margin-bottom: 7px;}
footer .f_top .container > .pull-right li:first-child {float: left;color: #fff;font-size: 17px;font-weight: bold;/* padding-left: 15px; */}
footer .f_top .container > .pull-right li:last-child {float: right;color: #fff;font-size: 17px;font-weight: bold;/* padding-left: 20px; */}
footer .f_top .container > .pull-right li:first-child a{float: left; color: #fff;font-size: 15px; font-weight: bold; text-decoration: none;}
footer .f_top .container > .pull-right li:last-child a {float: right; color: #fff;font-size: 15px; font-weight: bold; text-decoration: none;}
footer .f_top .container > .pull-right .f_btn a {text-decoration: none;display: block;border: 1px solid #fff;text-align: center;height: 28px;color: #fff;line-height: 28px;transition: all linear 0.3s;margin-bottom: 7px; width: 284px;}
footer .f_top .container > .pull-right .f_btn a:hover {background: #fff; color: #1d4875;}
footer .f_top .container > .pull-right .left {float: left;width: 286px;}
footer .f_top .container > .pull-right .f_mail {float: right;}
footer .f_top .container > .pull-right .f_mail a {color: #fff; text-decoration: none; transition: all linear 0.3s;}
footer .f_top .container > .pull-right .f_mail a:hover {color: #000; margin-right: 15px;}
footer .f_menu {background: #202020; padding: 10px 0;}
footer .f_menu li:first-child {margin-left: 120px;}
footer .f_menu li {float: left;}
footer .f_menu li:last-child a {border-right: none;}
footer .f_menu a {color: #fff; border-right: 1px solid #fff; padding: 0 5px; font-size: 12px; text-decoration: none;}
footer .f_menu a:hover {text-decoration: underline;}
/*==========================================
■11.breadcrumb
====================================================================================*/
.breadcrumb {margin: 10px 0 15px 0; font-family: "Meiryo","メイリオ","MS PGothic","MS Pゴシック",sans-serif;}
.breadcrumb ul li {float: left; margin-right:5px;}
.breadcrumb ul li i {margin-right:5px;}
.breadcrumb ul li.icon_home a {color: #104587;}
.breadcrumb ul li.icon_home a:hover {color: red;}
/*==========================================
■12.Content cm
====================================================================================*/
.content_page .right_menu {float: right; width:230px; }
.content_page .left_content {float: left; width:730px; font-family: "Meiryo","メイリオ","MS PGothic","MS Pゴシック",sans-serif; }
#main2 {
position: fixed;
z-index: 2;
width: 100%;
height: 1707px;
top: 0;
}
.hideBox {
opacity: 0;
visibility: hidden;
-webkit-transition: all 1.0s;
transition: all 1.0s;
}
.hideBox.visible {
opacity: 1.0;
visibility: visible;
}
/*--------------------------------------------------------------------------------
#loading
--------------------------------------------------------------------------------*/
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 10;
opacity: 1.0;
visibility: visible;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#loading.completion {
opacity: 0;
visibility: hidden;
}
#loading .loader {
color: #1e69b9;
font-size: 40px;
text-indent: -9999em;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
position: absolute;
top: 50%;
top: -webkit-calc(50% - 20px);
top: calc(50% - 20px);
left: 50%;
left: -webkit-calc(50% - 20px);
left: calc(50% - 20px);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load6 1.7s infinite ease;
animation: load6 1.7s infinite ease;
}
@-webkit-keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}