/* color ---------------------------------------------------------------------------------------------*/
.txt_color1{color: #385fd1} /* メインカラー */
.txt_color3{color: #122e82} /* アクセントカラー1 */

/* background-color */
.bg_color1{background-color: #385fd1} /* メインカラー */
.bg_color3{background-color: #122e82} /* アクセントカラー1 */

/* border-color ※!important */
.border_color1{border-color: #385fd1}
.border_color3{border-color: #122e82}

/* hover -----------*/
/* color */
.hvr_txt_color1:hover{color: #385fd1} /* メインカラー */
.hvr_txt_color3:hover{color: #122e82} /* アクセントカラー1 */

/* background-color */
.hvr_bg_color1:hover{background-color: #385fd1} /* メインカラー */
.hvr_bg_color3:hover{background-color: #122e82} /* アクセントカラー1 */

/* border-color ※!important */
.hvr_border_color1:hover{border-color: #385fd1}
.hvr_border_color3:hover{border-color: #122e82}

ul.pager li a:hover { background: #385fd1 !important;}

.footer_bg,.footer_bg02,.bg_color2{background:#f0f0f0 !important;}
/* color ---------------------------------------------------------------------------------------------*/

/* font ---------------------------------------------------------------------------------------------*/
body,#page_title .title_wrap span{font-family:'Zen Kaku Gothic Antique', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.font_bar{font-family: 'Outfit', 'Barlow', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

html, body {
    font-size: 15px;}
    
.opacity07,.opacity08{opacity:0.9;}
.title_wrap p {font-weight: 500;}
/* font ---------------------------------------------------------------------------------------------*/

.catch {
    font-size: 73px;
    font-weight: 600;
    right: 15%;
    line-height: 1.3;
    top: 50%;
    letter-spacing: 2px;
    z-index:2;
    transform: translate(0%,-80%);
}

.catch02 {
    font-size: 45px;
    font-weight: 400;
    right: 15%;
    line-height: 1.3;
    top: 61%;
    z-index: 11;
    transform: translate(0%,-80%);
    color: #385fd1;
}


.catch02 {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.catch02:before {
  border-top: 2px solid;
  content: "";
  width: 3em; /* 線の長さ */
}

.catch02:before {
  margin-right: 0.5em; /* 文字の左隣 */
  margin-top: 8px;
}


.custom_wrap::before {
    background: rgba(56, 95, 209,0.1);
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
}






/*add_contents------------------------------------------------------------------*/

#contents .con_title span, #contents2 .con_title span{
    position: relative ;
    padding-bottom: 10px ;
}
#contents .con_title span::before, #contents2 .con_title span::before{
    position: absolute ;
    content: "" ;
    width: 0 ;
    height: 3px ;
    left: 0 ;
    right: 0 ;
    margin: auto ;
    bottom: 0 ;
    border-radius: 10px ;
    background-color: #fff ;
    transition: 1s ;
}

#contents .con_box1::before{
    display: none ;
}

#contents2 .con_wrap{left: -10px }
#contents2.trans .con_wrap{
	opacity: 1;
	left: 0;
}

#contents2 .con_img{
	top: 100px;
	bottom: 100px ;
	right: 0;
}


/*add_contents------------------------------------------------------------------*/


#contents span.con_bg::before {
    content: '';
    background: url(dup/img/return.png);
    width: 148px;
    height: 548px ;
    position: absolute ;
    background-size: contain ;
    background-repeat: no-repeat ;
    left: 19% ;
    top: 50% ;
    transform: translate(0px, -50%) ;
    z-index: 2 ;
}

#contents2 span.con_bg::before {
    content: '' ;
    background: url(dup/img/train.png) ;
    width: 148px ;
    height: 688px ;
    position: absolute ;
    background-size: contain ;
    background-repeat: no-repeat ;
    right: 19% ;
    top: 50% ;
    transform: translate(0px, -50%) ;
    z-index: 2 ;
}

#contents .con_wrap{padding-left:130px;
                    padding-right:70px;}
                    
#contents2 .con_wrap{padding-right:130px ;
                    padding-left:70px ;}
                    
                    
h1#logo {margin-bottom: 70px;}
div#logo2 {width: 250px;}


/*下層------------------------------------------------------------------------------*/
#cms_2-a h3.cate_title {
    padding: 0;
    font-weight: bold;
    letter-spacing: 3px;
    border-bottom: solid 2px #385fd1;
    border-top: 0px;
}


.custom_wrap .tb_hide {
    width: auto !important;}

@media screen and (max-width: 1700px){
.catch {
    font-size: 73px;
    font-weight: 600;
    right: 8%;
    line-height: 1.3;
    top: 50%;
    letter-spacing: 2px;
    z-index: 2;
    transform: translate(0%,-80%);
}
.catch02 {
    font-size: 45px;
    font-weight: 400;
    right: 9%;
    line-height: 1.3;
    top: 61%;
    z-index: 11;
    transform: translate(0%,-80%);
    color: #385fd1;
}
    
}

@media screen and (max-width: 1550px){
.catch {
    font-size: 62px;
    font-weight: 600;
    right: 8%;
    line-height: 1.3;
    top: 50%;
    letter-spacing: 2px;
    z-index: 2;
    transform: translate(0%,-92%);
}

.catch02 {
    font-size: 35px;
    font-weight: 400;
    right: 9%;
    line-height: 1.3;
    top: 58%;
    z-index: 11;
    transform: translate(0%,-80%);
    color: #385fd1;
}
}


@media screen and (max-width: 1380px){
.catch {
    font-size: 55px;
    font-weight: 600;
    right: 8%;
    line-height: 1.3;
    top: 50%;
    letter-spacing: 2px;
    z-index: 2;
    transform: translate(0%,-102%);
}


.catch02 {
    font-size: 32px;
    font-weight: 400;
    right: 9%;
    line-height: 1.3;
    top: 56%;
    z-index: 11;
    transform: translate(0%,-80%);
    color: #385fd1;
}    
    
}


@media screen and (max-width: 1300px){
    
.catch {
    font-size: 49px;
    font-weight: 600;
    right: 8%;
    line-height: 1.3;
    top: 50%;
    letter-spacing: 2px;
    z-index: 2;
    transform: translate(0%,-102%);
}


.catch02 {
    font-size: 27px;
    font-weight: 400;
    right: 9%;
    line-height: 1.3;
    top: 55%;
    z-index: 11;
    transform: translate(0%,-80%);
    color: #385fd1;
}    
    
}

.contact_b {
    margin-top: 180px;
    margin-bottom: 180px;
}


/*タブレット*/
@media screen and (max-width: 768px){
    
    
    .custom_wrap{overflow:hidden;}
    span.con_bg {overflow: hidden;}
    
    
    
    .custom_wrap img {
            width: auto;
            height: 100%;}
            
     .catch {
            font-size: 61px;
            font-weight: 600;
            width: 643px !important;
            right: auto;
            left: 50%;
            line-height: 1.3;
            top: 5%;
            letter-spacing: 2px;
            z-index: 2;
            transform: translate(-49%,-0%);}



        .catch02 {
            font-size: 31px;
            font-weight: 400;
            right: 0;
            line-height: 1.3;
            top: 21%;
            z-index: 11;
            transform: translate(-19%,0%);
            color: #385fd1;
        }

h1#logo { margin-bottom: 50px;}
h1#logo img {max-width: 250px;}
#contents .con_wrap {
    padding-left: 80px;
    padding-right: 50px;}


#contents span.con_bg::before {
    content: '';
    background: url(dup/img/return.png);
    width: 94px;
    height: 351px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    left: -2%;
    top: auto;
    bottom: 7%;
    transform: translate(0px, -0%);
    z-index: 2;
}

#contents2 span.con_bg::before {
    content: '';
    background: url(dup/img/train.png);
    width: 94px;
    height: 434px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    right: -2%;
    bottom: 1%;
    top: auto;
    transform: translate(0px, 0%);
    z-index: 2;
}

#contents .con_bg {
    top: 2px;
    right: 0;
}

#contents2 .con_wrap{right: 0;opacity: 1}
#contents2 .con_img{
	height: 60vw;
	top: auto;
	bottom: auto
}


#contents .con_wrap,#contents2 .con_wrap {
    padding-left: 50px;
    padding-right: 50px;
}


.banner {padding: 0 10%;}
.contact_b {margin-top: 200px;}


#cms_1-a .pager li {
    margin-right: 0px !important;
    margin-left: 0px !important;}
    

footer .pd_t-100px {padding-top: 50px;}

.info_title {opacity: 0.6;}

}





/*スマホ*/
@media screen and (max-width: 667px){
    div#logo2 {
    width: 200px;
    margin-bottom: 50px;}
    
    
.catch {
    font-size: 27px;
    font-weight: 600;
    width: 300px !important;
    right: auto;
    left: 50%;
    line-height: 1.3;
    top: 9%;
    letter-spacing: 2px;
    z-index: 2;
    transform: translate(-48%,-0%);}

.catch02 {
    font-size: 19px;
    font-weight: 400;
    right: 0;
    line-height: 1.3;
    top: 21%;
    z-index: 11;
    transform: translate(-19%,0%);
    color: #385fd1;
}


.catch02:before { margin-top: 3px;}

.catch02:before {border-top: 1px solid;
                width: 2em;}

#contents .con_wrap, #contents2 .con_wrap {
    padding-left: 20px;
    padding-right: 20px;}

#contents span.con_bg::before {
    content: '';
    background: url(dup/img/return.png);
    width: 50px;
    height: 187px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    left: -2%;
    top: auto;
    bottom: 3%;
    transform: translate(0px, -0%);
    z-index: 2;
}

#contents2 span.con_bg::before {
    content: '';
    background: url(dup/img/train.png);
    width: 50px;
    height: 232px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    right: -2%;
    bottom: -3px;
    top: auto;
    transform: translate(0px, 0%);
    z-index: 2;
}

#contents2 .con_wrap { left: 0;}


.banner {
    padding: 0 5px;
    margin-bottom: 80px;
}

.footer_bg02 .pd_t-100px_tb {
    padding-top: 0;
}


}




/*IE*/
@media all and (-ms-high-contrast: none){

#contents2 .d_flex {
    display: block !important;
}

/*#contents2 .d_flex.flex_center-right.posi_rel{display: flex !important;}*/

#contents2 span.con_bg::before{
    top: 0%;
    transform:translate(0px, 19%);
}

#contents span.con_bg::before {
    top: 0%;
    transform: translate(0px, 38%);
}

#contents2 .con_wrap{
    transform: translate(0%, -50%);
    top: 50%;
}

#contents2 .d_flex.flex_center-right{overflow: hidden !important;}

.cate_list a {padding-top: 0px;}
#page07 .info_title::before {top: 14px !important;}
#page09 a {
    padding-top: 3px;
    padding-bottom: 3px;}

}