﻿@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,#page_title h2.en_font{font-family: "utsukushi","serif"!important;}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#main_img,#intro,#intro .con_photo,#contents2,#page_title{position: relative;}
/*リピートなし*/
.bg_logo span,.bg_logo:before,.bg_logo:after,#main_img:before,#intro:before,#intro .con_photo:before,#contents2:before,
#page_title:before,#page_title:after{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

#main_img:before{
background-image: url(./Dup/img/catch.png);
background-size: 100%;
width: 31vw;
height: 21vw;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 2;
}
#main_img:after{
content: "";
display: block;
background-color: rgba(255,70,0,0.2);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

#intro:before{
background-image: url(./Dup/img/obj1.png);
background-size: 100%;
width: 8vw;
height: 8vw;
top: 115px;
left: -10px;
z-index: 1;
}
#intro .con_photo:before{
background-image: url(./Dup/img/obj2.png);
background-size: 100%;
width: 7vw;
height: 5vw;
bottom: -40px;
right: -65px;
z-index: 1;
}
#contents2:before{
background-image: url(./Dup/img/obj3.png);
background-size: 100%;
width: 10vw;
height: 10vw;
right: -10px;
z-index: 1;
}

#page_title:before{
background-image: url(./Dup/img/obj1.png);
background-size: 100%;
width: 7vw;
height: 7vw;
top: 20px;
left: -5px;
z-index: 2;
}
#page_title:after{
background-image: url(./Dup/img/obj2.png);
background-size: 100%;
width: 7vw;
height: 5vw;
bottom: 34px;
right: 5px;
z-index: 1;
}
/*--------------------------------
全体
--------------------------------*/
header,.sns_links.side_bar{background-color: #6e4b3c;}
header .active.bg_color2{background-color: transparent;}
header nav ul li a::after{border-color: #e1bc73;}
header a.txt_color1{color: #ffffff;}
header .active a.txt_color1{color: #e1bc73;}


header .close_menu,.open_menu.bg_color1{background-color: #f0aac8;border-color: #f0aac8;color: #ffffff;}
.open_menu.bg_color1:hover{background-color: transparent;color: #fff;}

header .more_menu_bt{border-color: rgba(255,255,255,0.7);}
header .more_menu_bt.txt_color_nomal{color: #ffffff;}

#main_wrap{overflow: hidden;}

#intro h2::after,#top_cms .top_cms_box .top_cms_title p::after{border-color: #f0aac8;}
/*--------------------------------
TOP
--------------------------------*/
header h1{
width: 100%;
max-width: 200px;
margin: 0 auto 30px;
}
#video{ height: 100vh; }
#video video{
width: auto!important;
height: 100%;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

#contents1{background-color: rgba(235,200,215,0.2);}
#contents2 > div{background-color: rgba(110,75,60,0.6);}
/*--------------------------------
下層
--------------------------------*/


@media  screen and (max-width: 1700px){
#main_img .bg_img img{
height: 100%;
width: auto;
}
}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){

header h1{
max-width: 300px;
margin: 0 auto!important;
padding-right: 20px;
}
#main_img{height: 47vh;}
#video{ height: 50vh; }
#main_img:before{
width: 50vw;
height: 34vw;
}

#intro:before{
width: 17vw;
height: 17vw;
top: 175px;
left: -5px;
}
#intro .con_photo:before{
width: 15vw;
height: 11vw;
bottom: -40px;
right: -45px;
}
#contents2:before{
width: 17vw;
height: 17vw;
}
#page_title:before{
width: 12vw;
height: 13vw;
top: 15px;
left: -5px;
}
#page_title:after{
width: 11vw;
height: 8vw;
bottom: 24px;
right: 5px;
}

}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){
header {padding: 15px 20px;}
header h1{max-width: 200px;}
#menu_bt{
top: 17px;
right: 10px;
}

#main_img{height: 250px;}
#video{ height: 250px; }
#main_img #main_img_border{border: 1px solid white;}
#main_img:before{
width: 65vw;
height: 45vw;
}

#intro:before {
width: 23vw;
height: 23vw;
top: 100px;
left: -5px;
}
#intro .con_photo:before{
width: 22vw;
height: 17vw;
bottom: -30px;
right: -25px;
}
#contents2:before{
width: 23vw;
height: 23vw;
}
#page_title:before{
width: 15vw;
height: 16vw;
top: 27px;
left: -5px;
}
#page_title:after {
width: 13vw;
height: 10vw;
bottom: 33px;
right: -1px;
}

}

/*IE*/
@media all and (-ms-high-contrast: none) {}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #f0aac8; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #f0aac8;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #6e4b3c;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #fff;}

/*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: #6E4B3C;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #faf6ed;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #e1be73;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #f0aac8;} /* アクセントカラー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: #6E4B3C;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #faf6ed;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #e1be73;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #f0aac8;} /* アクセントカラー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: #6E4B3C;}
.border_color2,.hvr_border_color2:hover{border-color: #faf6ed;}
.border_color3,.hvr_border_color3:hover{border-color: #e1be73;}
.border_color4,.hvr_border_color4:hover{border-color: #f0aac8;}