﻿/*---------------------------------------------
 テンプレート ・CMS・下層ページ 
--------------------------------------------*/
.sc_nav{background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 45%);}
#main_nav{background-color: #fff;}
#main_nav .nav li a{color: #424db8;}
.sc_nav .nav_bt{border-radius: 0;}
#main_nav .nav li a{text-shadow:none;}
#page08_link a{transform: translateX(10px); border-radius: 0;}
#page08_link a figure{transform: rotate(180deg);}
#page08_link a:hover{background-color: #88beed;transform: translateX(0px);}

/* ▼▼ 角丸を角にする ▼▼ */
#contents1 img, #contents2 img,#main_img > div,#wrap #header_nav ul{
    border-radius: 0px;
    box-shadow: none;
}
/* ▲▲ 角丸を角にする ▲▲ */

/* ▼▼ アイコン画像と文字 ▼▼ */
#contents1 .con_title{
    font-size: 55px;
    font-weight: 600;
    color: #184696;
}
#contents1 .con_box{width: 30%;margin-bottom: 50px;}
#contents1 .con1_text{
    font-weight: bold;
    /*background-color: #d2eeff;*/
    border-radius: 40px;
    padding: 10px;
}
#contents1 .con_img{
    max-width: 200px;
    margin: 0 auto 20px;
}
#contents1 .hilight{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0em;
    padding: 5px 7px;
    font-weight: 600;
    background-color: #d2eeff;
    color: #131313;
    border-radius: 5px;
}
/* タブレット */
@media screen and (max-width: 768px){
    #contents1 .con_box{width: 33%;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #contents1 .con_title{font-size: 30px; width: 240px; line-height: 1.5; margin: 0 auto 30px;}
    #contents1 .con_box{width: 100%;}
}
/* ▲▲ アイコン画像と文字 ▲▲ */

/* ▼▼ 斜めの装飾 ▼▼ */
#intro_title,#contents1 .con1_text{position: relative;z-index:2;}
#intro_title:after,#contents1 .con1_text:after,#contents2 .con_title.title1:after,#contents2 .con_title.title2:after,#contents2 .con_title.title3:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background-color: #d2eeff;
    z-index: -1;
    transform:skewX(-15deg);
}
#intro_title:after{
    left: -20%;
    height: 100%;
    /*background-color: #19499c;*/
    /*color: #fff;*/
}
#contents1 .con1_text:after{
    height: 100%;
}

#contents2 .con_title.title1:after,#contents2 .con_title.title2:after,#contents2 .con_title.title3:after{
    background-color: #f1f9ff;
    width: 120%;
}
#contents2 .con_title.title1:after,#contents2 .con_title.title3:after{
    top: auto;
    bottom: -35%;
    left: 7%;
}
#contents2 .con_title.title2:after{
    left: auto;
    right: 11%;
    top: 30%;
}
/* タブレット */
@media screen and (max-width: 768px){
    #contents2 .con_title.title2:after{top: 75%;}
}
/* ▲▲ 斜めの装飾 ▲▲ */

#intro_title{}
#intro_title p{
    color: #19499c;
    font-size: 55px;
}

#contents2 .con_txt{
    background-color: #fff;
    position:relative;
    z-index: 1;
}
#contents2 .con_txt p{
    position:relative;
    z-index: 1;
    background-color: #fff;
    border: 2px solid #d5edff;
}
#contents2 .con_txt .con_dec{
    position: absolute;
    bottom: -50px;
    right: -50px;
    height: 100%;
    width: 100%;
    z-index: 0;
    background-color: #f1f9ff;
}
#contents2 .con_txt .con_dec.dec2{
    right: auto;
    left: -50px;
}

#contents2 .con_box{
    position: relative;
}

#contents2 .con_box .number{
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
    color: #19499c;
}

#contents2 .con_title{
    position: absolute;
    z-index: 0;
    font-size: 55px;
    font-weight: 600;
    color: #184696;
    bottom: 98%;
    right: 50px;
}

#contents2 .con_title.title2{
    line-height: 1.4;
    right: auto;
    left: 45px;
    bottom: auto;
    top: -150px;
}

#contents2 .con_box{margin-bottom: 250px;}
#contents2 .con_box.box2{margin-bottom: 200px;}
#contents2 .con_box.box3{margin-bottom: 200px;}
#contents2 .con_box .number.no2{left:auto;right:0;}

#top_cms .more a{
    border-radius: 0px;
    transform:skewX(-15deg);
}
#top_cms .more a:hover{
    transform:skewX(-15deg)translateY(0px)translateX(5px);
    box-shadow: none;
}
.top_cms_box.cms2{background-color: #f1f9ff;}
.top_cms_box.cms4{background-color: #fff;}
.top_cms_box.cms5{background-color: #f1f9ff;}
.top_cms_box.cms6{background-color: #fff;}


.cms_1-g .date{max-width: 140px;color: #7c7c7c;}
#cms_2-b .cate_box{border:none;background-color:#e6eaed;}


/* タブレット */
@media screen and (max-width: 768px){
    #intro_title p{
        line-height: 1.3;
        padding: 20px 0;
    }
    
    #contents2 .contents2_title{margin-bottom: 150px;}
    
    #contents2 .con_box{margin-bottom: 280px;}
    #contents2 .con_title{bottom: 101%;}
    #contents2 .con_title.title2{top: auto;bottom: 103%;}
    
    
    
}


/* スマホ */
@media screen and (max-width: 667px){
    #loader > div figure,#loader .load_right p,#loader .load_left p{top: 45%;}
    #page08_link a{transform: translateX(0px);}
    
    #intro_title p{font-size: 30px;}
    
    #contents1 .con_title{font-size: 30px;}

    #contents2{margin-bottom: 0;}
    #contents2 .con_title{font-size: 28px; right: 30px;bottom: 102%;}
    #contents2 .con_title.title2{left:20px;letter-spacing: 0em;}
    #contents2 .con_box.box3{margin-bottom: 150px;}
}

/*事業内容*/
.link_type2 .cate_box{margin-bottom: 20px;}
.link_type2 .cate_box a {
    color: #fff;
}
.link_type2 .cate_box a:before, .link_type2 .cate_box a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(25,73,156,0.5);
    z-index: 1;
}
.link_type2 .cate_box a:after {
    top: 100%;
    background-color: #19499c;
    transition: 0.5s;
	z-index: 3;
}
.link_type2 .cate_box a:hover:after {
    top: 0;
}
.link_type2 .cate_box .txt_wrap {
    z-index: 2;
}
.link_type2 .more {
	letter-spacing: 3px;
    box-sizing: border-box;
	opacity: 0;
	transition: opacity .8s;
	z-index: 4;
}
.link_type2 .cate_box a:hover .more {
    opacity: 1;
}




/* --------------------------------------------
 メインイメージ 
---------------------------------------------*/
.catch{
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(0%, -50%);/* X横 Y縦 始点が要素の中心になる */
    width: 40%;
}
.catch1 {
    width: 100%;
}

/* 動画位置調整 */
#video{height: 70vh!important; height: auto;}
#video video{
    /*width: 100%!important;*/
	width: auto!important;
	height: 100%;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
    vertical-align: bottom;
}
@media screen and (min-width: 1630px){
    #video video{width: 100%!important; height: auto!important;}
}
/* タブレット */
@media screen and (max-width: 768px){
    /* 動画位置調整 */
	#video {
		height: auto!important;
		width: 100%;
	}
	#video video {
		width: 100%!important;
		height: auto;
		position: relative;
		top: 0%;
		left: 0%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(0%,0%);
	}
}

/*--------------------------------------------
 全体 
----------------------------------------------*/
body,#intro,#contents1,#contents2{overflow: hidden;max-width:100%;}
.linkStyle{
	color: #19499c;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color: #819db1;
	opacity: 0.7;
	text-decoration: none;
}


.txt_color1,.hvr_txt_color1:hover{color: #19499c;} 
.txt_color2,.hvr_txt_color2:hover{color: #f1f9ff;} 
.txt_color3,.hvr_txt_color3:hover{color: #88beed} 
/*.txt_color4,.hvr_txt_color4:hover{color: #eae4df;} */
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}*/ 

.bg_color1,.hvr_bg_color1:hover{background-color: #19499c}
.bg_color2,.hvr_bg_color2:hover{background-color: #f1f9ff;}
.bg_color3,.hvr_bg_color3:hover{background-color: #88beed} 
/*.bg_color4,.hvr_bg_color4:hover{background-color: #eae4df;} */
/*.bg_color5,.hvr_bg_color5:hover{background-color: #f2ede7;}*/ 

.border_color1,.hvr_border_color1:hover{border-color:#19499c}
.border_color2,.hvr_border_color2:hover{border-color: #c6dbff;}
.border_color3,.hvr_border_color3:hover{border-color: #88beed;}
/*.border_color4,.hvr_border_color4:hover{border-color: #eae4df;}*/
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/