/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
.icon1{position: relative;}
/*リピートなし*/
.catch,.icon1:before,.icon2{
content: "";
display: block;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
}

.catch{
    background-image: url(./Dup/img/copy.png);
    width: 25vw;
    height: 23vw;
    top:50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.icon1:before{
    background-image: url(./Dup/img/icon1.png);
    width: 70px;
    height: 70px;
    top: -85px;
}
#intro .icon1:before{
    left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
}
#contents .icon1:before{left: 0;}

.icon2{
    background-image: url(./Dup/img/icon2.png);
    width: 105px;
    height: 70px;
    z-index: 1;
}
.img5 .icon2{
    bottom: -30px;
    right: -45px;
}
.img6 .icon2{
    bottom: 100px;
    left: -50px;
}
.img8 .icon2{
    bottom: -40px;
    left: -50px;
}
.img9 .icon2{
    bottom: 120px;
    left: 14%;
}
.img11 .icon2{
    bottom: -20px;
    right: 5%;
}
/*--------------------------------
t-style
--------------------------------*/
.mg_t-70px{margin-top: 70px;}

.mg_b-70px{margin-bottom: 70px;}
.mg_b-300px{margin-bottom: 300px;}
/*--------------------------------
全体
--------------------------------*/
body,.overlay .overlay-nav .en{
    font-family: "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
body,.blur{background:#1a1a1a;}

#header{padding-left: 20px;}
#logo img.width_300-max{max-width: 200px;}

/* more */
.more{border: none;}
.more > span{
	background: transparent;
	border-radius: 0;
	transition: all 0.5s ease-out;
	background: linear-gradient(-270deg,rgba(110,130,95,0.8),rgba(200,155,155,0.8));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
	border: none;
	box-sizing: border-box;
}
.more > span:hover{
	color: #fff;
	background-position: 99% 50%;
}
/* pop up */
.pop{
    cursor: pointer;
    z-index: 1;
}
.overlay .overlay-nav > ul > li:nth-of-type(7){z-index: 2;}

.pop .pop_wrap{
    background-color: rgba(0, 0, 0, 0.8);
	transition: transform 0.2s;
    width: 100%;
    padding: 10px;
	z-index: 1;
}
#pc_nav .pop .pop_wrap{
    top: 30px;
    left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
}
#overlay .pop .pop_wrap{
    max-width: 300px;
    top: 0;
}
.overlay .overlay-nav > ul > li:nth-of-type(7) .pop_wrap{left: 135px;}
.overlay .overlay-nav > ul > li:nth-of-type(8) .pop_wrap{left: 165px;}

#pc_nav .pop_wrap li a:after{bottom: 3px;}

.overlay div.overlay-nav{height: auto;}
.overlay .overlay-nav .top .en{font-size: 18px;}

.fix_banner{
width: 400px;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 5;
}
/* スマホ時真ん中へ */
@media  screen and (max-width: 667px){
.fix_banner{
width: 280px;
right: auto;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
}

.fadein_up{
opacity : 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
transition:transform 1.5s ease,opacity 2s ease; 
}
.fadein_up.scrollin{
opacity : 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
/*--------------------------------
TOP
--------------------------------*/
.fv_anim{
opacity : 0;
transition: opacity 2s ease; 
}
.fv_anim.scrollin{
opacity : 1;
}

#intro #intro_wrap{
    padding-top: clamp(200px,16vw,300px);
    padding-bottom: clamp(200px,16vw,300px);
}
#intro .img5{
    width: clamp(300px,29vw,540px);
    position: absolute;
    top: 250px;
    left: 0;
}
#intro .img6{
    width: clamp(250px,24vw,450px);
    position: absolute;
    top: 100px;
    right: 0;
}
#intro .img7{
    width: clamp(250px, 24vw, 455px);
    position: absolute;
    bottom: -2vw;
    right: 9vw;
}

#contents .con_box,
#contents .con_box:last-of-type{
    margin-top: clamp(250px,16vw,300px);
    margin-bottom: clamp(250px,16vw,300px);
}
#contents .con_box.box1{margin-top: 10vw;}
#contents .img9{padding: 0 10vw;}
#contents .img10{
    width: clamp(100px, 14vw, 255px);
    position: absolute;
    top: -50%;
    left: 5%;
}
#contents .img11{padding-right: 5%;}
#contents .img12{
    width: clamp(250px, 25vw, 480px);
    position: absolute;
    top: -57%;
    right: 0;
}

/*マウスホバーで、イメージ画像にゆっくりズームアップ*/
.zoomup img {
	vertical-align: top;
	-ms-transition: all 3s ease-out;
	-webkit-transition: all 3s ease-out;
	transition: all 3s ease-out;
}
.zoomup .rectangle_img img{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.zoomup:hover  .rectangle_img img{
	-ms-transform: translate(-50%,-50%) scale(1.2);
	-webkit-transform: translate(-50%,-50%) scale(1.2);
	transform: translate(-50%,-50%) scale(1.2);
}

/* info_contact */
#info_contact .con_box{	
	width: 50%;
	box-sizing: border-box;
}
#info_contact .con_box a{
	width: 100%;
	height: 100%;
}
#info_contact .con_img{
	width: 100%;
}
#info_contact .con_img:before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
#info_contact .con_box .con_title{z-index: 1;}

#contents_modal.intro .more_bt{display: none;}
@media  screen and (max-width: 667px){
.modal-box .inner{padding-bottom: 5%;}
#contents_modal.intro .modal_txt_wrap > div{max-height: 44vh;}
#contents_modal.contents .modal_txt_wrap > div{max-height: 34vh;}
#contents_modal.contents .modal_txt_wrap.over:before{bottom: 95px;}
}
/*--------------------------------
下層
--------------------------------*/
#page_title{padding-left: 30px;}
#page_title .page_title_box,#page_title .en:before{left: 0;}
#page_title .page_title_box,#page_title .en{display: block;}

#page_title .en{
font-size: 50px;
top: 30px;
left: 30px;
padding-left: 25px;
}
#page_title .en:before{
background-color: #cccccc;
width: 3px;
height: 170px;
top: -100px;
}
#page_title .jp{
top: 90px;
left: -2px;
}

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

#page_title .en{
font-size: 24px;
top: 10px;
left: 10px;
padding-left: 20px;
}
#page_title .en:before{
height: 100px;
top: -65px;
}
#page_title .jp{top: 55px;left: -10px;}

}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){
    #header{padding: 20px;}
    .overlay:before{background-color: rgba(26,26,26,0.85)!important;}
    #logo2 .width_300-max{max-width: 200px;}
    .catch{
        width: 38vw;
        height: 35vw;
    }
    #video{height: 70vh;}
    #intro #intro_wrap{
        padding-top: 250px;
        padding-bottom: 150px;
    }
    #intro .img5{width: 26vw;}
    #intro .img6{width: 28vw;}
    #intro .img7{
        width: 26vw;
        bottom: 40vw;
        right: -11vw;
    }
    #contents .con_box{
        margin-top: 100px;
        margin-bottom: 200px;
    }
    #contents .con_box:last-of-type{margin-bottom: 100px;}
    
    #contents .icon1:before{
        left: 50%;
        -ms-transform: translate(-50%,0);
        -webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
    }
    .img8 .icon2{bottom: 40px;}
    .img9 .icon2{
        left: auto;
        right: 25px;
    }
    #contents .img11{padding-right: 0;}
    .img11 .icon2{
        right: auto;
        left: -50px;
    }
    .icon2{
        width: 80px;
        height: 53px;
    }
}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){
    #header{padding: 15px;}
    #logo img.width_300-max{max-width: 150px;}
     .catch{
        width: 47vw;
        height: 44vw;
    }
    .mg_t-50px_sp{margin-top: 50px;}
    .mg_b-50px_sp{margin-bottom: 50px;}
    .icon2{
        width: 50px;
        height: 33px;
    }
    .img6 .icon2{left: -25px;}
    .img5 .icon2{
        bottom: 10px;
        right: -25px;
    }
    #intro .img7{
        width: 30vw;
        bottom: 15vw;
        right: 0;
    }
    .img8 .icon2{left: -25px;}
    .img9 .icon2{
        bottom: 45px;
        right: 13px;
    }
    .img11 .icon2{
        bottom: 25px;
        left: -25px;
    }
    #info_contact .con_box{width: 100%;}
    #intro #intro_wrap{padding-top: 150px;}
    
    #contents .con_box{
        margin-top: 100px;
        margin-bottom: 170px;
    }
    #contents .con_box:last-of-type{margin-top: 100px;}
    #contents .con_box .con_txt{padding: 0 7%;}
}

/*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: #1A1A1A;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #dcb1b1;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #1A1A1A;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #6E825F;} /* アクセントカラー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: #1A1A1A;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #C89B9B;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #1A1A1A;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #6E825F;} /* アクセントカラー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: #1A1A1A;}
.border_color2,.hvr_border_color2:hover{border-color: #C89B9B;}
.border_color3,.hvr_border_color3:hover{border-color: #1A1A1A;}
.border_color4,.hvr_border_color4:hover{border-color: #6E825F;}