﻿#contents .con_title, .intro_title1, .cms_title h3, #page_title .jp {
    font-weight: bold;
}

footer #footer_info {
    background-color: #8f8f8f;
}

#main_img:before {
    background-color: rgba(215, 215, 215, 0.85);
    z-index: 1;
    mix-blend-mode: soft-light;
}

#main_img:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 7.5%, 3%, 3%;
    pointer-events: none;
    background-image: url(./Dup/img/test.png), url(./Dup/img/side.jpg), url(./Dup/img/side.jpg);
    background-position: bottom right, right center, left center;
    background-repeat: no-repeat, repeat-y, repeat-y;
    filter: grayscale(0.7);
}

#video {
   height: 95vh;
    /* padding: 19%; */
    box-sizing: border-box;
    border: 25px solid black;
        background-color: black;
}

/*.blur{
cursor: url(./Dup/img/drone2.png),auto;
}*/


/*カーソル要素*/
#cursor{
  position: fixed;
  /*丸の大きさと色の指定*/
  background: #fff;
  border-radius:10px;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;/*真ん中にくるようにマイナスマージンで調整*/
  z-index: 2;/*一番手前に来るように*/
  pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
  transition: transform 0.1s;/*アニメーションの秒数指定*/
}
/*ちょっと遅れてついてくるストーカー要素*/
#stalker{
  position: fixed;
    /* background: #00f; */
    width: 120px;
    height: 120px;
    /* border-radius: 30px; */
    margin: -30px 0 0 -30px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.1s;
    background-image: url(./Dup/img/drone2.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#cursor,
#stalker{
  opacity: 0 !important;
}

#cursor.active,
#stalker.active{
  transform: scale(1.4);
  opacity: 1 !important;
}

.slash2:before, .slash2:after {
 display: none;
}

.con_box .slash {
    position: relative;
    display: block;
    max-width: 120px;
    margin: auto;
}

.top_title {
    height: 400px;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
    box-sizing: border-box;
}

.con_box.box2, .con_box.box3{
    position: relative;
}

.con_box.box2:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    right: -13%;
    background-image: url(./Dup/img/yama2.png);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    opacity: 1;
}

.con_box.box3:after{
        content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: -13%;
    background-image: url(./Dup/img/yama1.png);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    opacity: 1;
}

#top_cms{
    background-image: url(./Dup/img/yama3.png), url(./Dup/img/yama4.png);
    background-position: bottom left, bottom right;
    background-repeat: no-repeat;
    background-size: 30%;
}

.con_box.box1{
        background-image: url(./Dup/img/kumo1.png);
    background-repeat: no-repeat;
    background-size: 11%;
}

.intro_right h3.intro_title1{
    position: relative;
}

.intro_right h3.intro_title1:before{
        content: "";
    display: block;
    width: 100%;
    height: 70%;
    position: absolute;
    top: 50%;
    left: -18%;
    background-image: url(./Dup/img/kumo2.png);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

#intro_wrap{
        background-image: url(./Dup/img/ao.png);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 25%;
}

#contents .con_title {
        color: #78bad9;
    margin-bottom: 0;
}


.sen{
    display: block;
    width: 200%;
    height: 100px;
    position: relative;
    background-image: url(./Dup/img/sen.png);
    background-position: center;
    background-repeat: repeat-x;
    background-size: 800px;
    transform: translate(-50%, -70%) rotate(-10deg);
    left: 50%;
    top: 50%;
}

#video:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/eye.png);
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

#pc_nav li a {
    filter: drop-shadow(0px 0px 10px black) drop-shadow(0px 0px 10px black);
}

.men #pc_nav li a {
    filter: drop-shadow(0px 0px 10px rgba(0,0,0, 0.5)) drop-shadow(0px 0px 5px rgba(0,0,0, 0.1));
}

header.scr_header #pc_nav li a {
    filter: none;
}

#page8 .mail{
        background-color: #e7e7e7;
    color: black;
}

.overlay ul.sns_links {
    filter: invert(1);
}

.box_link{
    max-width: 300px;
    padding-left: 20px;
}

#page8 #form_box .box input, #page8 #form_box .box textarea {
    font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    /* font-weight: 400; */
}

.linkStyle{
color: #29a9e0;
font-weight: bold;
}


#cms_4-b .cate_box {
    margin: 0 0%;
    padding: 0.5%;
}

@media all and (-ms-high-contrast: none){
  

}




/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#video {
    height: 80vh;
    border: 10px solid black;
}

#video video {
    width: auto !important;
    height: 100%;
}

#cursor, #stalker{
    display: none;
}

.con_box.box2:before, .con_box.box3:after {
    width: 70%;
}

#intro_wrap {
    background-position: 100% 75%;
    background-size: 40%;
}



}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#video {
    height: 50vh !important;
}

#main_img:after {
    background-size: 12.5%, 3%, 3%;
}

.sen {
    width: 300%;
    height: 70px;
    background-size: 800px;
    transform: translate(-50%, -70%) rotate(-10deg) scale(0.5);
}

.con_box.box2:before, .con_box.box3:after {
    top: 60%;
}

.banner{
    margin-top: 50px;
    max-width: 100% !important;
}

}