﻿/*メニュータブレット*/
/*@media screen and (max-width: 768px){*/
/*    #cms_3-c .box_title1{width:60%!important;}*/
/*    #cms_3-c .box_title2{width:40%!important;}*/
/*}*/
/*@media screen and (max-width: 667px){*/
/*    #cms_3-c .box_title1,*/
/*    #cms_3-c .box_title2{*/
/*        width: 100%!important;*/
/*    }*/
/*}*/

/*ブログページ*/
#cms_1-f .grid_2{width: 30%!important;}
#cms_1-f .grid_10{width: 70%!important;}
#news_list a{font-size: 13px;}
.news_sub_list li{
    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;}
@media screen and (max-width: 1320px){
    #cms_1-f .grid_2, #cms_1-f .grid_10{width: 100%!important;}
    #news_list{
        border: 1px solid #0E396B;
        padding: 20px 5px 20px 20px;
        margin-bottom: 30px;
        }
}
@media screen and (max-width: 667px){
    #cms_1-f .grid_2, #cms_1-f .grid_10{width: 100%!important;}
}

/*ロード時間短く*/
#fakeloader .fl{
        animation-duration: 1.2s;
}

/*バナー*/
.bnr{
    right: 60px;
    /*bottom: 30px;*/
    max-width: 200px;
    z-index: 3;
}
.bnr a{display: block;transition: 0.5s;}
.bnr a:hover{opacity:0.7;}
#h1txt{
        padding-right: 270px;
}
@media screen and (max-width: 667px){
    .bnr{
        right: 30px;
    }
    #h1txt{
        padding-right: 30px;
        padding-bottom: 120px;
    }
}

/* 自動リンク設定 */
#loader {
    transition: 0s;
}
.linkStyle{
	color:#0E396B;
}
.linkStyle:hover{
	color:#0E396B;
	opacity: 0.7;
	text-decoration: underline;
	transition: all 0.5s;
}
/* color */
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #0E396B} /* メインカラー */
.txt_color2{color: #B8BFCC} /* サブカラー */
.txt_color3{color: #0E396B} /* アクセントカラー1 */
.txt_color4{color: #FFFDF3} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #0E396B} /* メインカラー */
.bg_color2{background-color: #dcdfe6} /* サブカラー */
.bg_color3{background-color: #0e396b} /* アクセントカラー1 */
.bg_color4{background-color: #FFFDF3} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}


/* border-color ※!important */
.border_color1{border-color: #0E396B}
.border_color2{border-color: #B8BFCC}
.border_color3{border-color: #0E396B}
.border_color4{border-color: #FFFDF3}


/* hover -------------------*/
/* color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #0E396B} /* メインカラー */
.hvr_txt_color2:hover{color: #B8BFCC} /* サブカラー */
.hvr_txt_color3:hover{color: #B5B533} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #FFFDF3} /* アクセントカラー2 */

/* background-color */
.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #0E396B} /* メインカラー */
.hvr_bg_color2:hover{background-color: #B8BFCC} /* サブカラー */
.hvr_bg_color3:hover{background-color: #B5B533} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #FFFDF3} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #0E396B}
.hvr_border_color2:hover{border-color: #B8BFCC}
.hvr_border_color3:hover{border-color: #B5B533}
.hvr_border_color4:hover{border-color: #FFFDF3}

/* 他の箇所 -------------------*/
#fakeloader{
    background-color: #c3d1e9!important;
}
#top_pc_nav li a::after, 
#footer_nav li a::after{
    background: rgba(14, 57, 107,0.8);
}
#pc_nav li a::after{
    background: rgba(255, 255, 255,0.8);
}
#main_img:before{
    background-color: rgba(0,81,154,0.3);
}
#page_title:before{
    background-color: rgba(0,81,154,0.2);
}
.back1:before,
.back2:before{
    background-color: #c0cde3!important;
        z-index: -1;
}
#top_cms.back1:before{
    background-color: rgba(255,255,255,0)!important;
}

header.scr_header{
    background-color: rgba(14, 57, 107,0.3)!important;
}
#pc_nav li a,
#top_pc_nav li a{
    color: #fff;
    font-weight: 600;
}
#top_pc_nav li a{
    opacity: 0.8;
}
#contents1 .con_box,
#contents2 .con_box{
    background-color: #fff;
}
#contents3_wrap:after{
    background-color: rgba(0,81,154,0.2)!important;
}
#info_contact .con_img:before,
#info_contact .con_img:before{
    background-color: rgba(0,81,154,0.2);
}
#top_cms .more_btn{
    background-color: #dcdfe6;
}
#top_cms .cms_title h3{
    color: #0E396B;
}



#cms_1-a .pager li a:hover{
    background-color: rgba(14,57,107,0.8);
}
.cms_1-a .bg_white{
    background-color: #dcdfe6;
}
#overlay .left li:before{
    opacity: 1;
}
.overlay {
    background: linear-gradient(135deg, rgba(196, 209, 241,1) , rgba(14,57,107,1) )!important;
}

.overlay-menu,
/*.overlay-menu .d_inline_b a,*/
.overlay ul li a{
    color: #0E396B!important;
}
.overlay ul li a:hover{
    opacity: 0.8;
    color: #fff!important;
}
/* 文字 --------------------------------------------------------------------------------------------*/
/*大きく*/
p,a,span.jp,
.box_txt2,.cate_txt1{
    font-size: 16px;
}
.overlay-menu, .overlay ul li a{
    font-size: 18px;
}
h3{
    font-size: 1.2rem;
}
h2,
.page_title_box h2{
    font-size: 40px;
}

#overlay.overlay.open h2{
    font-size: 30px;
    font-family: 'Sawarabi Mincho', serif;
}
.page7 #page_title .page_title_box{
    width: 630px;
}
/* TOP(mainはタブレットの上)------------------------------------------------------------------------*/
/* 全体 */
#page_title .page_title_box{
    background-color: rgba(14, 57, 107,0.8);
}
.pc_hid{
    display: none;
}

/* イントロ・コンテンツ */
main .back1{
    padding-top: 7%;
}
#intro .num,
#contents1 .num,
#contents2 .num,
#contents3 .num{
    opacity: 1;
    width: 110px;
    height: 110px;
    background-color: #456789;
    color: #fffdf3;
    border-radius: 50%;
    font-size: 55px;
    text-align: center;
}
#contents1 .num,
#contents2 .num{
    top: 20px;
}
#intro .intro_title h3{
    text-align: center;
}
#contents1 .con_title,
#contents2 .con_title{
    padding-top: 30px;
}
#contents1 .con_txt,
#contents2 .con_txt{
    padding-bottom: 30px;
}
#contents2 .con_box{
    margin-top: 12%;
}
.dec1{
    max-width: 500px;
    width: 20%;
    top: -15%;
    right: 120px;
}
.dec2{
    max-width: 500px;
    width: 15%;
    bottom: -230px;
    left: 100px;
    z-index: 2;
}
/* TOP CMS */
#top_cms .line-l:before{
    background-color: rgba(195,209,233,0);
}
#top_cms .cms_title{
    border-bottom: 1px solid #456789;
    border-left: 6px solid #456789;
    padding-bottom: 10px;
    padding-left: 20px;
}
.dec3{
    max-width: 500px;
    width: 20%;
    top: 3%;
    right: 2%;
}
.dec4{
    max-width: 500px;
    width: 15%;
    top: -83%;
    left: 3%;
}

/* フッター */
#footer {
}

/* 下層ページ ----------------------------------------------------------------------------------------*/
/* マージンパディング */
#cms_1-a .cate_box{
    padding-bottom: 30px;
}
#cms_1-a .cate_box,
#cms_2-c .cate,
#cms_2-a .cate_list{
    margin-bottom: 50px;
}
#cms_2-a .cate_box{
    margin-top: 20px;
}
#cms_2-a .box_txt1{
    padding-bottom: 0;
}
#cms_2-a .cate_box {
    padding-bottom: 30px;
}
#cms_2-a .box_title1{
    padding-bottom: 0px;
}
#cms_2-a .box_title1,
#cms_3-c .cate_title,
#cms_3-c .box_title1{
    font-weight: 600;
}



/* サイトマップ */
#page10 .con_box > div {
    margin: 2.5% auto;
}
#page10 .con_box > div a{
    padding: 0;
    padding-top: 10px;
}
/* メニュー ----------------------------------------------------------------------------*/
header.scr_header #logo{
        max-width: 150px;
}
#logo{
    max-width: 220px;
}
#pc_nav li, 
#top_pc_nav li, 
#footer_nav li{
    max-width: 300px;
}
#overlay .left li {
    max-width: 300px;
}
.nav_menu_more:first-of-type a .icon:before{
    display: none;
}
.d_inline_b .hvr_opa07:hover{
    opacity: 0.4;
}
#overlay .right p.opacity07{
    opacity: 1;
}
#overlay .overlay-menu{
    padding: 0 0 0 7%;
}


/* main img ----------------------------------------------------------------------------------------*/
#top_pc_nav ul li:nth-child(4){
    width: 300px;
}
#main_img .catch2{
    display: none;
}
.catch {
    max-width: 500px;
    z-index: 2;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
}
#main_img p.bg_white{
    background-color: rgba(255,255,255,0);
}
#main_img p.square_box{
    height: 450px!important;
    max-width: 550px!important;
}

@media screen and (max-width: 1279px){
    #main_img .catch img{
        display: none;
    }
    #main_img .catch2{
        display: block;
        z-index: 2;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);/* X横 Y縦 始点が要素の中心になる */
        width: 38%;
    }
}
/* タブレット --------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
    
    /* イントロ・コンテンツ */
    main .back1 {
        padding-top: 10%;
    }
    #intro .num,
    #contents1 .num,
    #contents2 .num,
    #contents3 .num{
        width: 80px;
        height: 80px;
        font-size: 40px;
    }
    #contents1 .num,
    #contents2 .num{
        top: -30px;
    }
    .dec1{
        display: none;
    }
    .dec2 {
        width: 20%;
        bottom: -95px;
        left: 120px;
    }
    
    
    
    /* TOP CMS */
    
    
    /* main img */
    
    #main_img p.square_box {
        height: 460px!important;
    }
    #main_img .width_150-max_tb{
        max-width: 230px;
    }
    .catch {
    top: 50%;
    transform: translate(-50%, -50%);
    }
    #main_img .catch2{
        width: 40%;
    }
    /* メニュー */
    #logo {
        max-width: 125px;
    }
    /* フッター */
    #footer .con_box h2{
        font-size: 23px;
    }
    #h1txt p{
        font-size: 15px;
    }
    
    /*ページタイトル*/
    #page_title h2{
        font-size: 27px;
    }
        .pc_hid{
        display: block;
    }
    .page7 #page_title .page_title_box{
        width: 320px;
    }
    
    /*下層ページ*/
    #cms_2-a .cate_box{
        padding-bottom: 0px;
    }
}

/* スマホ ------------------------------------------------------------------------------------------*/
@media screen and (max-width: 667px){
    /* イントロ・コンテンツ */
    #intro{
        padding: 0 2%;
    }
    #intro_wrap{
        padding: 6% 2%;
    }
    main .back1 {
        padding-top: 15%;
    }
    #intro .intro_title h3{
        font-size: 20px;
    }
    #intro .num,
    #contents1 .num,
    #contents2 .num,
    #contents3 .num{
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
    #contents1 .con_box{
        padding-left: 3%;
    }
    .dec2 {
        display: none;
    }
    #contents3 .con_box{
        margin: 0 2%;
        padding: 5% 3%;
    }
    
    
    /* main img */
    #logo {
        max-width: 90px;
    }
    #main_img .catch2 {
        width: 70%;
    }
    
    
    
    /* TOP CMS */
    .top_cms_box:first-of-type {
        padding-top: 20px;
    }
    .dec4{
        display: none;
    }
    #top_cms{
        margin-bottom: 0px;
    }
    #top_cms .mg_t-50px{
        margin-top: 15px;
        margin-bottom: 40px;
    }
    .top_cms_box{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    
    /* ページタイトル */
    #page_title .page_title_box{
        width: 72%;
        padding: 5% 5% 8% 5%;
        background-color: rgba(14, 57, 107,0);
    }
    #page_title h2{
        font-size: 23px;
        text-shadow: 1px 1px 2px rgba(14, 57, 107,1);
    }

    
    /* マージンパディング */
    #cms_1-a .cate_box,
    #cms_2-a .cate_box,
    #cms_2-c .box_item{
        padding-bottom: 10px;
    }
    #cms_2-c .box_item,
    #cms_2-a .box_title1{
        padding-top: 0px;
    }
    #cms_2-c .box_item,
    #cms_2-a .box_item{
        padding-left: 0;
        padding-right: 0;
    }
    #cms_2-a .cate_box{
        margin-top: 0px;
    }
    #cms_2-a .cate_title{
        margin-bottom: 0px;
    }
    
    
    /* 下層ページ */
    #page9 h3{
        font-size: 14px;
    }
    #cms_2-c .cate_title,
    #cms_2-a .cate_title{
        font-size: 18px;
    }
    #cms_2-c .box_txt1,
    #cms_3-c .box_title1{
        font-size: 17px;
    }
    /*.con_box{*/
    /*    padding: 3px;*/
    /*}*/
    /* メニュー */
    header.scr_header #logo{
        max-width: 100px;
    }
    #overlay .overlay-menu {
        padding: 0 0 0 15%;
    }
    .overlay ul li a{
        color: #fff!important;
    }
    .overlay ul li a:hover{
        opacity: 0.7!important;
    }
    
    /* フッター */
    #footer .con_box h2 {
        font-size: 20px;
    }
    #h1txt p {
        font-size: 14px;
    }
}

