﻿/* color */
body,.txt_color_nomal{color: #302828;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #D94352} /* メインカラー */
.txt_color2{color: #49BDF0} /* サブカラー */
.txt_color3{color: #D94352} /* アクセントカラー1 */
.txt_color4{color: #CECACA} /* アクセントカラー2 */
.txt_color5{color: #fff9f0} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #F7CC38} /* メインカラー */
.bg_color2{background-color: #49BDF0} /* サブカラー */
.bg_color3{background-color: #D94352} /* アクセントカラー1 */
.bg_color4{background-color: #CECACA} /* アクセントカラー2 */
.bg_color5{background-color: #fff9f0} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #49BDF0}
.border_color2{border-color: #49BDF0}
.border_color3{border-color: #D94352}
.border_color4{border-color: #CECACA}
.border_color5{border-color: #fff9f0}


/* hover ---------------------------------------------------------------------------------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #302828;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #F7CC38} /* メインカラー */
.hvr_txt_color2:hover{color: #49BDF0} /* サブカラー */
.hvr_txt_color3:hover{color: #D94352} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #CECACA} /* アクセントカラー2 */
.hvr_txt_color5:hover{color: #fff9f0} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #F7CC38} /* メインカラー */
.hvr_bg_color2:hover{background-color: #49BDF0} /* サブカラー */
.hvr_bg_color3:hover{background-color: #D94352} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #CECACA} /* アクセントカラー2 */
.hvr_bg_color5:hover{background-color: #fff9f0} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}


/* border-color ※!important */
.hvr_border_color1:hover{border-color: #F7CC38}
.hvr_border_color2:hover{border-color: #49BDF0}
.hvr_border_color3:hover{border-color: #D94352}
.hvr_border_color4:hover{border-color: #CECACA}
.hvr_border_color5:hover{border-color: #F3F2EE}


.linkStyle{color: #C2D0CE;}

#sp_kc{
	width: 50%;
	z-index: 4; 
	position: absolute;
	top:50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.header-in{
    width: 90%;
}

.logo1{
    max-width: 260px;
}

.pc_nav .font_16 {
    font-size: 20px;
}

.con1_inner .txt_color1{
    color: #F7CC38;
}

#con3 .txt_color1 {
    color: #49BDF0;
}

#sp_nav.bg_color1 {
    background-color: #49BDF0;
}

.pagetitle_img{
    opacity: 1;
    mix-blend-mode: screen;
}

.cate_list li a:hover{
    color: #fff;
    background-color: #F7CC38;
}

#fakeloader .fl{
    max-width: 400px;
}

.footer.bg_color2{
    background-color: #a2e2ff;
}

.logo2 .width_200-max {
    max-width: 300px;
}

footer .width_1280-max{
    text-align: center;
}

footer span{
    text-align: left;
    display: inline-block;
}

.f_contact_box .mg_b-10px{
    margin-top: 20px;
}

.footer .txt_white {
    color: #000;
}

#main_img{
height: 88vh;
overflow: hidden;
}

@media screen and (max-width: 1280px){
.pc_nav {
    display: none;
}
}

/*タブレット用（768px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 768px){
.header-in .menu_btn {
    right: 27px;
}
    
.header-in{
    width: 70%;
    height: 115px;
}

#sp_kc{
        width: 70%;
}

.pagetitle {
    padding-top: 170px;
}

#main_img {
    height: 62vh;
    position: relative;
}
#con1{
padding-top: 0;
}
}

/*スマホ用（667px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 667px){
.logo1{
    max-width: 200px;
}

#main_img.topimg1{
    height: 45vh;
}

#sp_kc,#main_img .posi_center {
    top: 50%; 
}

#sp_kc {
    width: 80%;
}

.header-in .menu_btn {
    right: 20px;
}

.header-in{
    height: 75px;
}

.f_contact_box .font_50 {
    font-size: 40px;
}

.f_contact_box .font_18 {
    font-size: 16px;
}
}