﻿/* color-------------------------------------------------------------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #002043;}
.txt_color1,.hvr_txt_color1:hover{color: #0062d0} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #f0fcff} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #f5af46} /* アクセントカラー1 */
/* background-color */
.bg_black,.hvr_bg_black:hover{background-color: #002043} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #0062d0} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #f0fcff;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #f5af46} /* アクセントカラー1 */
.bg_color5,.hvr_bg_color5:hover{background-color: #647191;}
/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #0062d0 !important}
.border_color2,.hvr_border_color2:hover{border-color: #f0fcff !important}
.border_color3,.hvr_border_color3:hover{border-color: #f5af46 !important}

/*.con3_wrap h3, .con3_wrap p {color: #fff;}
/*#cms_3-a .bg_color4,#header.active,span.footer_bg,#bottom_tel a{background:#fffaf4;}
/*.con_before{background:#fff;}   */
/* color-------------------------------------------------------------------------------------*/

/* font-------------------------------------------------------------------------------------*/
.font_mon,.font_mon_l{font-family:'Battambang','Montserrat', 'Noto Sans JP', 'Comfortaa', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}
p.info_title {opacity: 0.6;}
.opacity07{opacity:0.8;}
/* font-------------------------------------------------------------------------------------*/


/* bnr & 下部固定メニュー ---------------------------------------------------------------------------------------------*/

div#bottom_tel {display: none !important;}
#page_top {
    width: 114px;
    height: 92px;
    right: 0;
    bottom: 0;
    z-index: 128;
    cursor: pointer;}


.bnr_box{max-width: 800px;min-width: 700px;padding: 50px 0 30px;}
.bnr_box a{transition: all .3s;}
.bnr_box a:hover{transform: scale(1.05);}
#page8 .bnr_box {padding: 0 0 50px!important;}

.remodal.contact{max-width: 900px!important;}
.remodal-overlay {background: rgba(103,103,103,0.70)!important;}
.remodal.contact .bnr_box {padding: 16px 0 49px;}

#bottom_menu {
    bottom: 0px;
	right:114px;
	z-index: 99;
}
#bottom_menu .font_23{
	font-size: 19px;
}
.b_contact a{
	height:30px;
}
.b_contact a::before, .b_tel a::before{
	display: block;
	position: absolute;
	content: "";
	width: 50px;
	height: 38px;
	top: 23%;
	left: 10%;
	
	margin: auto;
	background-size: contain;
	z-index: 20;
}
.b_contact a::before {
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.m_button a{
    padding: 27px !important;
    border-radius: 0 !important;}
    
img.contact_btn {
    height: 92px;}
    
#page_top {
    width: 92px;
    height: 92px;
    right: 0;
    bottom: 0;
    z-index: 128;
    cursor: pointer;
    background: #0062d0;}
    
#bottom_menu {
    bottom: 0px;
    right: 92px;
    z-index: 99;
}
/* bnr & 下部固定メニュー ---------------------------------------------------------------------------------------------*/


/* top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*//* icon -------------------------------------------------------------------------------- */
#con_nav ul{display:none;}
#con02_icon .width_20per{
    margin-top: -50px;
    z-index: 3;
    width:32% !important;}
    
#con02_icon .nav_border {
    width: 1px;
    height: 100px;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;}

.icon_b{display:none;}

@media screen and (max-width: 1535px){
#con02_icon .width_20per {width: 40% !important;}
.icon_b{display:none;}}

/*スマホ*/
@media screen and (max-width: 667px){
#con_nav {padding-bottom: 270px;}
    
#con02_icon .width_20per {
    width: 100% !important;
    margin-top: -35px;}
div#con02_icon {padding: 0;}    }
/* icon -------------------------------------------------------------------------------- */


/*main_img---------------------------------------------------------------------------*/
section#main_img::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(138,168,175,0.5);
    z-index: 2;}
/*main_img---------------------------------------------------------------------------*/
/* icon -------------------------------------------------------------------------------- */
#con_nav ul{display:none;}
#con02_icon .width_20per{
    margin-top: -50px;
    z-index: 3;
    width:32% !important;}
    
#con02_icon .nav_border {
    width: 1px;
    height: 100px;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;}

.icon_b{display:none;}

@media screen and (max-width: 1535px){
#con02_icon .width_20per {
    font-size: 15px;
    letter-spacing: 1px;}}
@media screen and (max-width: 1535px){
    #con02_icon .width_20per {font-size: 14px !important;}}

/*スマホ*/
@media screen and (max-width: 667px){
#con_nav {padding-bottom: 270px;}
    
#con02_icon .width_20per {
    width: 100% !important;
    margin-top: -35px;}
div#con02_icon {padding: 0;}    }
/* icon -------------------------------------------------------------------------------- */

#top_contents1 .info_title {
    color: #0062d0;
    top: 48px !important;
    opacity: 0.3;}

.con1_txt_wrap {padding: 150px 5% 0;}

span.con2_bg {
    opacity: 0.3;
    background: #002043;}
    
#top_contents3 .con3_no {
    font-size: 69px;
    right: 5px;
    left: auto;
    top: -31px;
    bottom: auto;
    color: #0062d0;
    font-weight: 300;}

figure.con3_img {margin-bottom: 40px;}

.con3_banner {margin: 70px auto 70px;}

.catch {
    z-index: 3;
    width: 50%;
}
/* top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#page_title .title_img {
    height: 400px;
    background-position: center bottom 25%;}
p.sub_title {color: #c5d8ed;}

/*linkStyle*/
a.linkStyle {
   color: #0062d0;
    transition: 0.5s;}
    
a.linkStyle:hover {color:#002043;}

/* guide ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.top_cate_cms2 {background: #afc7e5;}

.flow_type3 .cate{counter-reset: box;}
.flow_type3 .cate_box{counter-increment: box;}
.flow_type3 .box_item{padding-top: 60px;}
.flow_type3 .box_title1{z-index: 0}
.flow_type3 .box_title1::before, .flow_type3 .box_title1::after{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
.flow_type3 .box_title1::before {
	content: "0"counter(box);
	font-size: 86px;
	color: #f0f4f5;
	left: 0;
	top: -70px;
	z-index: -1;
}
.flow_type3 .box_title1::after{
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #222
}
/*-------- スマートフォン --------*/
@media screen and (max-width: 667px){
.flow_type3 .box_title1::before{
	left: auto;
	right: 0;
	top: -50px
}
.flow_type3 .box_item {
    padding-top: 36px;
}
}
/* works ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.g_type4 .slide_img figure{
	position: relative;
	overflow: hidden;
}
.g_type4 .slide_img figure img{
	position: relative;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.g_type4 .swiper-slide{
    opacity: 1!important;
}
.g_type4 .slide_img .thumbnail .swiper-wrapper {
    margin-left: 0!important;
    transform: none!important;
}
.g_type4 .swiper-button-prev{
	background-image: url("../dup/img/swiper_prev.png")!important;
}
.g_type4 .swiper-button-next{
	background-image: url("../dup/img/swiper_next.png")!important;
}

/* IE */
@media all and (-ms-high-contrast: none){
.g_type4 .slide_img .thumbnail .swiper-wrapper .swiper-slide {
    overflow: hidden;
    position: relative;
    height: 80px;
}
.g_type4 .slide_img .thumbnail .swiper-wrapper .swiper-slide img{
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
}
/* sub ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*タブレット*/
@media screen and (max-width: 768px){

    .catch {width: 80%;}
    #page_title .title_img {height: 350px;}
    #footer_info .info_title {
    top: 0;
    left: 50%;
    transform: translateX(-50%);}
    .info_txt_wrap {padding: 0px;}
    .footer_tel {padding-top: 70px;}
    .logo_wrap {width: 170px;}
    #header.active .logo_wrap {width: 150px;}
    .tel_box a {font-size: 22px !important;}
    .passing {
        z-index: 3;
        right: 33px;
        top: auto;
        bottom: 66%;}
    .passing02 {
        z-index: 3;
        right: 40px;
        top: auto;
        bottom: 8%;}
    #con02_icon .width_20per {
    margin-top: -50px;
    z-index: 3;
    width: 50% !important;}
    div#con02_icon {padding: 0;}
    .con2_txt_wrap {width: 98% !important;}
    .icon_b_tb{display:none;}
    .con3_banner {
            margin: 45px auto 0px;
            padding: 0px 70px;}
    .bnr_box {
            min-width: 90%;
            padding: 74px 0 30px;}
    ul#sns_link {margin-bottom: 50px !important;}
    #cms_1-a .pager li {margin: 0px;}
    
}


/*スマホ*/
@media screen and (max-width: 667px){
    .logo_wrap {width: 150px;}    
    #header.active .logo_wrap {width: 130px;}
    .passing .passing-txt {font-size: 18px;}
    .passing {
                z-index: 3;
                right: 21px;
                top: auto;
                bottom: 21%;}
    .passing02 {
                z-index: 3;
                right: 26px;
                top: auto;
                bottom: auto;
                top: 80% !important;}
    .passing.move .passing-txt {background-color: rgba(255,255,255,0.9);}
    .m_button a {
                 padding: 0px !important;
                 border-radius: 0 !important;}
    .m_button a {
                    padding: 10px 10px !important;
                    border-radius: 0 !important;
                    font-size: 14px;
                    letter-spacing: 1px;}
    #page_top {width: 50px;
               height: 48px;}
    #bottom_menu {right: 48px;}
    .remodal.contact .bnr_box {
                width: 100%!important;
                padding: 21px 0 22px;}
    #footer_info .info_title {
                top: 0;
                left: 50%;
                transform: translateX(0%);}
    .footer_tel {padding-top: 0px;}
    #top_contents3 .con3_no {
                font-size: 52px;
                right: auto;
                left: -45%;
                top: -23px;
                bottom: auto;
                color: #0062d0;
                font-weight: 500;
                opacity: 0.6;}
    .con3_banner {
                margin: 30px 0 0px;
                padding: 0px 20px;}
    #page_title .title_img {
                height: 200px;
                background-position: center bottom 25%;}
    .tel_box a {font-size: 19px !important;}
    div#logo2 {width: 180px;}
    .con1_txt_wrap h3 {font-size: 20px;}
    p.con_sub_title {font-size: 12px;}
    #con02_icon .width_20per {
                margin-top: 0px;
                z-index: 3;
                width: 100% !important;}
    .con2_txt_wrap p.con_sub_title {margin-bottom: -40px;}
    #con02_icon .width_20per .d_block.txt_white.pd_t-50px {padding: 35px 0 0;}
    #con02_icon h2.nav_title {font-size: 13px;}
    img.contact_btn {height: 48px;}
}
    

/*IE*/
@media all and (-ms-high-contrast: none){
    .cate_list li a{padding-top: 9px !important;
                    padding-bottom: 10px !important;}
    .cate_list li a::before { top: 1px !important;}


}