@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";}
.font2{
font-family: fertigo-script,sans-serif;
font-weight: 400;
font-style: normal;
}
/*--------------------------------
全体
--------------------------------*/
body{
background-color: #7d7b82;
background-image: url(./Dup/img/bg2.jpg);
background-attachment: fixed;
background-size: cover;
overflow: hidden;
}
#wrap{position: relative;}

h1 img{max-width: 350px;}
.sc_nav .logo img{max-width: 300px;}

.trans_nav li{width: 20%;text-align: center;box-sizing: border-box;}
.sc_nav .trans_nav li{width: 160px;}
footer #footer #footer_links li{width: 25%;}
footer #footer #footer_links li::after{display: none;}

.trans_nav li div{position: relative;display: block;}
.trans_nav li a{width: 100%;display: block;}
.trans_nav li span{
width: 100%;
display: block;
position: absolute;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

.trans_nav li .jp{letter-spacing: 0;}

.fadein{animation: fadein ease 0.5s forwards;}
.fadeout{animation: fadeout ease 0.5s forwards;}

@keyframes fadein{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeout{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}


footer.bg_color2{background-color: rgba(0,0,0,0.7);color: #fff;}
footer #footer #footer_links li a{color: #fff;}
/*--------------------------------
TOP
--------------------------------*/
#intro .intro_txt h2{transform: translateY(0);}
#top_contents1,#top_contents3{background-color: rgba(0,0,0,0.7);color: #fff;}

#line_animation1{
position: absolute;
z-index: 1;
top: 30px;
left: -110px;
transform: rotate(-10deg);
}
#line_animation2{
position: absolute;
z-index: 1;
top: -80px;
left: 50%;
ms-transform: translate(-50%,0);
webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
#line_animation3{
position: absolute;
z-index: 1;
bottom: 30px;
right: -110px;
transform: rotate(-10deg);
}
#line_animation1 path,#line_animation2 path,#line_animation3 path{
 fill: none;
 stroke: #ffffff;
 stroke-width: 26;
 stroke-linejoin: bevel;
 stroke-miterlimit: 10;
}

#top_contents2 h3::after{border-color: #7d7b82;}
/*--------------------------------
下層
--------------------------------*/
#page08 .tel_txt,#page09 .top_txt{background-color: rgba(0,0,0,0.4);}
#page07 .hvr_bg_color2:hover{background-color: rgba(0,0,0,0.4);}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
#line_animation1{
top: -100px;
left: -110px;
}
#line_animation2{
top:-100px;
left: 50%;
}
#line_animation3{
bottom: -100px;
right: -110px;
}
}


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

.sc_nav .trans_nav{font-size: 14px;}
.sc_nav .trans_nav li{width: 100px;}

}

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

/* 背景画像 */
body{
background-image:none;
}
body::before {
content: "";
display: block;
min-width: 100vw;
min-height: 100vh;
background-image: url(./Dup/img/bg3.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
#menu_bt > div span.bg_color3{background-color: #fff;}
#menu_bt.active > div span.bg_color3{background-color: #7d7b82;}
#menu_wrap span{display: block;}

#intro .intro_img{margin-bottom: 0px;}
#line_animation1{
width: 500px;
top: -80px;
left: -30px;
}
#line_animation2{
width: 500px;
top: -30px;
left: 38%;
ms-transform: translate(-50%,0) rotate(-10deg);
webkit-transform: translate(-50%,0) rotate(-10deg);
transform: translate(-50%,0) rotate(-10deg);
}
#line_animation3{
width: 500px;
bottom: auto;
right: auto;
top: -45px;
left: -10px;
}

#top_contents1 .contents1_txt,#top_contents3 .contents3_txt{margin: 0 auto;}

}

/*スマホ用（667px以下）
--------------------------------------------------------------------------*/
@media  screen and (max-width: 667px){

#line_animation1{
width: 300px;
top: -40px;
left: -15px;
}
#line_animation2{
width: 300px;
top: -20px;
left: 40%;
}
#line_animation3{
width: 300px;
top: -30px;
left: -5px;
}
#top_contents2{padding-top: 0;}
#page_title{
min-height: 150px;
padding: 30px;
}

}

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

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

/*--------------------------カラー--------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #fff;}
.txt_black{color: #333;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #d4d3d5;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #ebe1cd;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #2c2b2d;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #b7b6ba;} /* アクセントカラー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: #7d7b82;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #ebe1cd;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #2c2b2d;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #b7b6ba;} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}


/* border-color ※!important */
.border_color1,.hvr_border_color1:hover{border-color: #7d7b82;}
.border_color2,.hvr_border_color2:hover{border-color: #ebe1cd;}
.border_color3,.hvr_border_color3:hover{border-color: #2c2b2d;}
.border_color4,.hvr_border_color4:hover{border-color: #b7b6ba;}