﻿@font-face {
font-family: "utsukushi";
  src: url("./Dup/img/utsukushi.otf") format("otf"),url("./Dup/img/utsukushi.woff") format("woff"),url("./Dup/img/utsukushi.woff2") format("woff2");
}
.font1{font-family: "utsukushi","serif";}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#main_img,#intro .intro_txt_wrap,#top_contentsm,#top_cms,#top_contact,
#page_title,.footer_img{position: relative;}
/*リピートなし*/
#main_img:before,#main_img:after,#top_contact:before,#page_title:after,.footer_img:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

/*
#main_img:after{
background-image: url(./Dup/img/catch.png);
background-size: 100%;
width: 33vw;
height: 16vw;
top: 4%;
left: 2%;
}
*/
#main_img:before,#page_title:after{
background-image: url(./Dup/img/wave1.png);
background-size: 100%;
width: 100vw;
min-width: 1000px;
height: 5vw;
bottom: -1vw;
left: 0;
z-index: 2;
}
#top_contact:before,.footer_img:before{
background-image: url(./Dup/img/wave1.png);
background-size: 100%;
width: 100vw;
min-width: 1000px;
height: 5vw;
top: -1vw;
left: 0;
z-index: 2;
transform: scale(1, -1);
}
.top .footer_img:before{display: none;}

#page_title:before{
content: "";
display: block;
background-image: url(./Dup/img/page.jpg);
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
/*--------------------------------
全体
--------------------------------*/
#logo.width_100{width: 100%;max-width: 150px;}
#pc_nav {
    height: 50px;
    line-height: 50px;
}
#footer{padding-left: 150px;}
.banner{
position: fixed;
bottom: 10px;
left: 10px;
width: 150px;
z-index: 4;
}
.banner:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
background-image: url(./Dup/img/banner-2.png);
width: 150px;
height: 150px;
top: 0;
left: 0;
z-index: -1;
-webkit-animation: rotate 30s linear infinite;
animation: rotate 30s linear infinite;
}
@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
/*--------------------------------
TOP
--------------------------------*/
#main_img .scroll_bar{bottom: 50px;}
#head_logo{
top: 0;
left: 0;
}

#line_animation1{
height: 100px;
position: absolute;
top: 35px;
right: 15px;
z-index: 1;
}
#line_animation2{
height: 100px;
position: absolute;
top: -70px;
left: -65px;
z-index: 1;
}
#line_animation3{
height: 100px;
position: absolute;
top:-162px;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
z-index: 1;
}
#line_animation1 path,
#line_animation2 path,
#line_animation3 path{
fill: none;
stroke: #ffffff;
stroke-width:15;
stroke-linejoin: bevel;
stroke-miterlimit: 10;
}

#top_contents::before{background-color: #050546;}

#top_contact,.footer_img{overflow: hidden;}
/*--------------------------------
下層
--------------------------------*/
#page_title{padding: 100px 0 130px;overflow: hidden;background-color: rgba(0,0,0,0.1);}
#page_title h2{color: #fff;}
#page_title p{color: #fff;}

/* 5-b Q削除 */
#cms_5-b .cate_box .open_bt .box_title1::before, .cms_5-b .cate_box .open_bt .box_title1::before{display: none;}
#cms_5-b .cate_box .open_bt .box_title1, .cms_5-b .cate_box .open_bt .box_title1{margin-left: 70px;}




@media  screen and (max-width: 1280px){

#main_img:before, #page_title:after{bottom: 0;}
#top_contact:before, .footer_img:before{top: 0;}


}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){

#main_img:before, #page_title:after{background-image: url(./Dup/img/wave2.png);min-width: auto;height: 7vw;bottom: -1px;}
#top_contact:before, .footer_img:before{background-image: url(./Dup/img/wave2.png);min-width: auto;height: 7vw;}


#footer{padding-left: 20px;padding-bottom: 120px;}
#logo2 img.width_150{max-width: 200px;width: 100%;}

#main_img:after{
width: 49vw;
height: 24vw;
}
#line_animation1{
width: 300px;
height: 60px;
top: 60px;
right: 0;
}
#line_animation2{
width: 300px;
height: 60px;
top: -70px;
left: -40px;
}
#line_animation3{
width: 300px;
height: 60px;
top:-137px;
}

}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){

#main_img:before, #page_title:after{background-image: url(./Dup/img/wave3.png);height: 10vw;}
#top_contact:before, .footer_img:before{background-image: url(./Dup/img/wave3.png);height: 10vw;}

#logo.width_100{max-width: 120px;}
#footer{padding-bottom: 50px;}
.banner{width: 100px;}
.banner:before{
width: 100px;
height: 100px;
}

#main_img:after{display: none;}

#line_animation1{
width: 230px;
height: 46px;
top: 25px;
right: 20px;
}
#line_animation2{
width: 250px;
height: 50px;
top: -70px;
left: -20px;
}
#line_animation3{
width: 250px;
height: 50px;
top: -82px;
}

}

/*IE*/
@media all and (-ms-high-contrast: none) {

.cate_list li a{padding-bottom: 5px;}

}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #CDA032; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #CDA032;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #050546;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #CDA032;}

/*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: #050546;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #E7EAF6;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #cda032;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #E7DEC8;} /* アクセントカラー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: #050546;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #E7EAF6;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #cda032;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #E7DEC8;} /* アクセントカラー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: #050546;}
.border_color2,.hvr_border_color2:hover{border-color: #E7EAF6;}
.border_color3,.hvr_border_color3:hover{border-color: #cda032;}
.border_color4,.hvr_border_color4:hover{border-color: #E7DEC8;}