@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');
body,#pc_nav a, #pc_main_nav a, .font_en{font-family: 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;font-weight: 300;}
.font_bold{font-weight: 500;}
/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#main_img,#intro,.cms_title,#top_contents1 h2,#top_contents1 li,#top_contents2 .con_box,#top_cms h2{position: relative;}
/*リピートなし*/
.catch,#main_img:before,#intro:before,#top_contents1 h2:before,.con1_txt_wrap:before,.cms_title:before,#top_contents1 .con3_img:before,#top_contents1 li:before,
#top_contents2 .con_box:before,#top_cms h2:before,#page_title:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

/*
#main_img:before{
background-color: rgba(150,105,55,0.4);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
*/
.catch{
background-image: url(./Dup/img/catch.png);
background-size: 100%;
background-color: transparent;
width: 35vw;
height: 35vw;
top: 50%;
left: 48.2%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
filter: blur(7px);
opacity: 0;
animation: blur 3s ease 1s forwards;
}
@keyframes blur {
	0% {filter: blur(7px);opacity: 0;}
	50% {opacity: 1;}
	100% {filter: blur(0);opacity: 1;}
}

#intro:before{
background-image: url(./Dup/img/obj3.png);
width: 250px;
height: 215px;
bottom: -50px;
right: 100px;
}

.con1_txt_wrap:before{
background-image: url(./Dup/img/obj1.png);
width: 250px;
height: 205px;
top: -120px;
left: -100px;
}
.cms_title:before{
background-image: url(./Dup/img/obj2.png);
width: 70px;
height: 70px;
top: -30px;
left: -15px;
}
#top_contents1 .con3_img:before,#page_title:before{
background-image: url(./Dup/img/obj4.png);
width: 200px;
height: 200px;
bottom: -15px;
right: -120px;
z-index: 1;
}
#page_title:before{
width: 9vw;
min-width: 150px;
height: 9vw;
min-height: 150px;
bottom: 2vw;
right: 0;
}

#top_contents1 li{padding-left: 30px;}
#top_contents1 li:before{
background-image: url(./Dup/img/check.png);
width: 25px;
height: 25px;
top: 4px;
left: 0;
}

#top_contents2 > div:first-of-type .con_box:before{
background-image: url(./Dup/img/obj5.png);
width: 170px;
height: 170px;
bottom: -30px;
left: -120px;
z-index: 1;
}
#top_contents2 > div:last-of-type .con_box:before{
background-image: url(./Dup/img/obj6.png);
width: 113px;
height: 150px;
bottom: -30px;
right: -55px;
z-index: 1;
}
#top_contents1 h2:before,#top_cms h2:before{
background-image: url(./Dup/img/obj7.png);
width: 70px;
height: 70px;
top: -45px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
/*--------------------------------
全体
--------------------------------*/
#loader img{
width: 100%;
max-width:250px;
}
.top_page:before, .under_page:before{background-color: #000a4b;}

.main_nav_bnr li:last-of-type a{background: #000a4b;color: #fff;}
#square_links p{width: 100%;}
#square_links span{letter-spacing: 5px;}

.footer_bg.bg_color1{background-color: #143e6b;}
.fix_banner{
width: 200px;
position: fixed;
bottom: 5px;
right: 100px;
z-index: 4;
}
/* スマホ時真ん中へ */
@media  screen and (max-width: 667px){
.fix_banner{
width: 120px;
right: auto;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
}
/*--------------------------------
TOP
--------------------------------*/
#main_img{
margin-top: 0;
width: 100%;
height: 100vh;
}
#main_img .slick-list{height: 100vh;}
#main_img #logo{
width: 300px;
position: absolute;
top: 20px;
left: 30px;
}

.cms_title h3{
position: relative;
z-index: 1;
}
/*--------------------------------
下層
--------------------------------*/
.title_wrap{
padding-left: 3%;
padding-right: 3%;
}

/* お客様のお声 */
.v_type3 .cate_box{border: 1px solid #cddcf0;}
.v_type3 .box_title1{color: #000a4b;}


@media  screen and (max-width: 1414px){
#header{top: -170px;}
}
@media  screen and (max-width: 1366px){
.con1_txt_wrap:before{
top: -160px;
left: -40px;
}

#top_contents1 .con3_img:before{
width: 150px;
height: 150px;
bottom: -30px;
right: -70px;
}
#top_contents2 > div:first-of-type .con_box:before{
width: 150px;
height: 150px;
}
#top_contents2 > div:last-of-type .con_box:before{
width: 100px;
height: 133px;
bottom: -30px;
right: -55px;
}

}

@media  screen and (max-width: 1280px){

.con1_txt_wrap:before{
width: 230px;
height: 190px;
top: -135px;
left: 10px;
}

}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){

.top_page main{margin-top: 0;}
#main_img{height: 70vh;}
#main_img #logo{width: 250px;}
.con1_txt_wrap:before{
width: 200px;
height: 165px;
top: -45px;
left: 25px;
}
#intro:before{
width: 200px;
height: 170px;
bottom: -120px;
right: 30px;
}
#top_contents1 .con3_img:before{
width: 150px;
height: 150px;
bottom: -45px;
right: -5px;
}
#top_contents2 > div:first-of-type .con_box:before{
width: 120px;
height: 120px;
bottom: -45px;
left: -7px;
}
#top_contents2 > div:last-of-type .con_box:before{
width: 80px;
height: 107px;
bottom: -30px;
right: 3px;
}
#page_title .title_wrap{width: 60%!important;}
#page_title .sub_title{font-size: 30px;}
#page_title:before{bottom: -5vw;}

}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){
#loader img{max-width: 200px;}
#header.active{    padding: 0;}
#sp_navlogo{top: -5px;}
#footer_nav li{
font-size: -webkit-calc(1rem - 4px);
font-size: calc(1rem - 4px);
}
#footer_nav li a{padding-left: 20px;}
#main_img #logo{
width: 170px;
top: 10px;
left: 20px;
}
.catch{
width: 50vw;
height: 50vw;
}
.con1_txt_wrap:before{
width: 150px;
height: 125px;
top: -125px;
left: 10px;
}
#intro:before{
width: 150px;
height: 125px;
bottom: -80px;
right: 10px;
}
.cms_title:before{
width: 50px;
height: 50px;
top: -15px;
left: -10px;
}
#top_contents1 .con3_img:before{
width: 100px;
height: 100px;
bottom: -30px;
right: 0;
}
#top_contents1 .con_title{
font-size: -webkit-calc(1rem + 5px);
font-size: calc(1rem + 5px);
}
#top_contents2 > div:first-of-type .con_box:before{
width: 90px;
height: 90px;
bottom: -25px;
left: -2px;
}
#top_contents2 > div:last-of-type .con_box:before{
width: 60px;
height: 80px;
bottom: -50px;
right: 6px;
}
.con_title span:before{
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}

#top_cms h2:before{
width: 50px;
height: 50px;
top: -30px;
}
#page_title:before{
width: 25vw;
min-width: 100px;
height: 25vw;
min-height: 100px;
bottom: -5vw;
}
#page_title .title_wrap{width: 70%!important;}
#page_title .sub_title{font-size: 20px;}
}

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




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #333; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #333;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #333;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #333;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------------
カラー
--------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #333333;}
.txt_black,.hvr_txt_black:hover{color: black;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #000A4B;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #CDDCF0;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #EBE1D2;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #F6F1E9;} /* アクセントカラー2 */

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #000A4B;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #CDDCF0;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #EBE1D2;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #F6F1E9;} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color */
.border_white,.hvr_border_white:hover{border-color: white;}
.border_black,.hvr_border_black:hover{border-color: black;}
.border_color1,.hvr_border_color1:hover{border-color: #000A4B;}
.border_color2,.hvr_border_color2:hover{border-color: #CDDCF0;}
.border_color3,.hvr_border_color3:hover{border-color: #EBE1D2;}
.border_color4,.hvr_border_color4:hover{border-color: #F6F1E9;}