﻿/* all page */
/* color */
.txt_white{color: #17191e;}
.txt_color1{color: #15152b} /* メインカラー */
.txt_color2{color: #fff;} /* サブカラー */
.txt_color3{color: #0e7dbc;} /* アクセントカラー1 */
.txt_color4{color: #f2f2f2} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #fff;} /* メインカラー */
.bg_color2{background-color: #b4d5f9;} /* サブカラー */
.bg_color3{background-color: #0e7dbc;} /* アクセントカラー1 */
.bg_color4{background-color: #f2f2f2} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #15152b}
.border_color2{border-color: #e1e1ef}
.border_color3{border-color: #0e7dbc;}
.border_color4{border-color: #f2f2f2}

.hvr_bg_color3:hover {background-color: #0e7dbc;}

.linkStyle{
    color: #0e7dbc;
    text-decoration: underline;
}

#loader{
	background: linear-gradient(90deg, rgba(14,125,188,1) 30%, rgba(19,53,103,1) 70%);
}
#loader img {
    width: 150px;
    height: auto;
    animation:katakata 0.7s steps(4,start) infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@keyframes katakata{
0%{transform:translateY(5px);}
50%{transform:translateY(0px);}
100%{transform:translateY(5px);}
}

/* top ----------------*/
body::before{
	background: linear-gradient(180deg, rgba(27,150,221,1) 30%, rgba(13,48,99,1) 70%);
}
/* header */
header {
	border-bottom: 1px solid #0e7dbc;
}
#header h1{
	max-width: 300px;
}

/* main img */
#main_contents #main_img {
    box-shadow: none;
}
#catch p{
	font-size: 40px;
}
#catch p span{
	background-color: #1b96dd;
	color: #fff;
}
#catch h2{
	font-size: 70px;
}
#catch h2 span{
	background: linear-gradient(90deg, rgba(27,150,221,1) 30%, rgba(13,48,99,1) 90%);
	color: #fff;
}

/* main */
#main_contents::after {
    background-color: #0e7dbc;
}
#main_contents #main_menu li.active::before {
    background-color: #0e7dbc;
}
#main_contents #main_menu li::before {
    border: 2px solid #0e7dbc;
}
#main_contents #main_menu li::after {
    border-bottom: 1px solid #0e7dbc;
}

/* intro */
#intro > div, #intro .more a, #contents h3 span, #contents h4, #contents p {
    color: #fff;
}

/* contents */

/* topcms */
#top_cms .top_cms_title h3 span {
    border-top: 3px solid #0e7dbc;
}
#top_cms .top_cms_title h4 span {
    border-bottom: 3px solid #0e7dbc;
}
#top_cms .more a {
    border: 2px solid #0e7dbc;
    color: #fff;
    background-color: rgba(14,125,188,0.5);
}
.cms_6-b .cate_box .box_txt1{
     background-color: #f1f1f1;
 }

/* footer */
#contents_link a::after {
    background-color: rgba(14,125,188,0.5);
}
#contents_link a h3 {
    color: #fff;
	text-shadow: 0 4px 6px rgba(14,125,188,0.7);
}
#contents_link a h4 {
    color: #fff;
	border: 1px solid #ffffff;
	transition: all 0.3s;
}
#contents_link a:hover h4 {
	background-color: rgba(14,125,188,0.3);
}


/* under page */
#page_title h2 span, #page_title h3 span {
    color: #fff;
}

/* cms1 */

/* cms2 */

/* cms3 */
#cms_6-b .cate_title{
    color: #fff;
}
#cms_6-b .cate_box .box_txt1{
     background-color: #f1f1f1;
 }

/* cms4 */

/* cms5 */

/* page7 */
#page07 .box {
    border-bottom: 1px solid #0e7dbc;
    background-color: #fff;
}

/* page8 */
#page08 .tel_wrap{
    background-color: #fff;
}

/* page9 */
#page09 .privacy_wrap{
    background-color: #fff;
    padding: 20px;
}

/* page10 */


/* IE */
@media all and (-ms-high-contrast: none){
    #catch p span{
        padding-top: 20px;
    }
    #main_contents #catch h2 span{
        padding-top: 30px!important;
    }
    #main_contents #main_menu li a{
        padding-top: 5px;
    }
    .cate_list a{
        padding-top: 12.5px;
    }
    .cate_list a .font_en{
        padding: 12px 5px;
    }
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#menu_bt > div span {
		background-color: #0e7dbc;
	}
	#main_nav > div > ul li a {
		color: #fff;
	}
	#main_nav #menu_bg::after{
		background-color: rgba(14,125,188,0.5);
	}
	#footer > div h3{
	    letter-spacing: 1px;
	    font-size: 40px;
	}
	
	#page10 .grid_4 a {
        padding: 50px 40px 30px 50px;
    }
    #page10 .grid_4 a span.font_24{
        letter-spacing: 0.6px;
        font-size: 21px;
    }
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	#loader img {
		width: 75px;
	}
	#header h1 {
		max-width: 170px;
	}
	#catch p{
		font-size: 20px;
	}
	#catch h2{
		font-size: 25px;
	}
	#top_cms .top_cms_title h3 span {
        letter-spacing: 1px;
        font-size: 25px;
    }
    
    #page_title h2 {
        font-size: 27px;
    }
    #page_title h2 span {
        letter-spacing: 1px;
    }
	
}

