@import url('https://fonts.googleapis.com/css2?family=Rampart+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Francois+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');
body {
    font-family: 'Sawarabi Gothic', sans-serif;
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* -------------------------------------------------------------------- */
.fadein{
     opacity: 0;
     transform: translateY(20px);
     transition: 1s;
     transition-property: opacity,transform
}
.fadein.trans{
     opacity: 1;
     transform: none
}
.scroll-rotate {
    position: absolute;z-index: 0;transition: all 0.5s;
}
.png1 {
    left: -182px;
    height: 170px;
    width: 170px;
    top: -44px;
}
.png1 img, .png2 img, .png3 img {
    animation: 36s linear infinite rotation1;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
.png2 {
    right: -90px;
    height: 147px;
    width: 147px;
    bottom: -56px;
}
.png3 {
    right: -197px;
    height: 92px;
    width: 92px;
    bottom: -110px;
}



.catch.active::before {
    animation: anime1 1s cubic-bezier(.22,1.11,.58,.98);
}
.catch::before {
    position: absolute;
    content: "";
    background-color: #404040;
    height: 100%;
    top: 0;
    left: 0;
    right: 100%;
}
@keyframes anime1 {
0%{left: 0;right: 100%}
50%{left: 0;right: 0}
100% {left: 100%;right: 0}
}
/* -------------------------------------------------------------------- */
#footer_contact h3, #footer_contact p {position: relative}
#cms_3-e .box_title1 {
    position: relative;
    padding-left: 23px;
}
#cms_3-e .box_title1:before {
    content: "";
    display: block;
    background: #eec81f;
    width: 4px;
    position: absolute;
    height: 19px;
    top: 50%;
    left: 8px;
    margin-top: -9px;
}
.top_cms_sec {
    position: relative;
}
.top_cms_sec:not(:last-of-type):before {
    content: "";
    display: block;
    position: absolute;
    bottom: -46px;
    right: 139px;
    width: 83px;
    height: 108px;
    background-image: url(Dup/img/denki.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
#top_message p:last-of-type {
    font-size: 15px;
}
#footer_contact {position: relative}
#footer_contact:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(111 60 0 / 25%);
    top: 0;
    left: 0;
    mix-blend-mode: color-burn;
}
.Russo, .en {
    /*font-family: 'Rampart One', cursive;*/
    font-family: 'Francois One', sans-serif;
}
.catch {
    position: absolute;
    z-index: 1;
    font-size: 72px;
    line-height: 1.5;
    left: 100px;
    top: 41%;
    z-index: 1;
}
.catch span:first-of-type {
      font-weight: bold;
    letter-spacing: 0.5rem;  
}
.catch2 {
    display: block;
    font-size: 25px;
}
#top_message h2 {
    top: -57px;
    left: -42px;
   font-weight: bold;
    letter-spacing: 0.3rem;
        font-size: 40px;
}
#top_message p:first-of-type {
    font-size: 50px;
    top: inherit;
    position: absolute;
    bottom: -74px;
    right: -96px;
}


#vegas {
    overflow: hidden;
    margin-bottom: 97px;
}
.video{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    border: none;
    padding: 0;
    margin: 0;
    }
header span.before {
    top: 0;
}
header span.after {
top: inherit;
    bottom: 0;
}
#pc_nav li span.en {
font-size: 21px;
}
#pc_nav li span.jp {
font-size: 14px;
}
#header_contact span {
    top: 25px;

    font-size: 21px;
    text-align: center;
}
#header_contact span:nth-of-type(2) {
    font-size: 13px;
    top: 48px;
    right: 50px;
}
#header_contact span {
    position: absolute;
    top: 17px;
    right: 54px;
    cursor: pointer;
    pointer-events: none;
    font-size: 19px;
}
#logo {
    width: 136px;
}
#top_contents1 h3::before, #top_contents2 h3::before {
    z-index: -1;
}
/*CMS ------------------------------------------------------- */
.cate_list li a {
    font-size: 20px;
}
.cms_3-e .box_txt1 {
    background: #fff;
}
#cms_2-a h3, #cms_3-e .cate_title, #cms_4-a h3 {
    border-bottom: solid 3px #eec81f;
    position: relative;
    border-top: 0;
    background-color: inherit;
    display: block;
}
#cms_2-a h3:after, #cms_3-e .cate_title:after, #cms_4-a h3:after {
position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #404040;
    bottom: -3px;
    width: 20%;
    left: 0;
}
@media(max-width: 1335px) {
    .video {
       /* width: auto!important;
        height: 100vh;*/
    }
}
@media(min-width: 769px) {
   #vegas {
    height: 100vh;
} 

}
@media(max-width: 768px) {
#top_contents2 h3::before {
    top: -27%;
}
    .catch {
    font-size: 49px;
    left: 32px;
    top: 38%;
}
    #top_message p:first-of-type {
    right: 0;
}
    .png1 {
    left: -84px;
    height: 140px;
    width: 140px;
    top: -73px;
}
.png2 {
    right: -66px;
    height: 139px;
    width: 134px;
    bottom: 3px;
}
.png3 {
    right: 40px;
    height: 84px;
    width: 84px;
    bottom: -42px;
}
#top_message h2 {
    font-size: 33px;
    top: -60px;
    left: 79px;
}
    #header {
        border-bottom: 0;
    }
    header span.before, header span.after {
}
    #video {
     height: 409px;/*#vegasの高さに合わせる*/
    }
.video {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#header {
    padding: 8px 0px;
    top: 0;
}
#logo {
    margin: 8px auto 0px 30px;
}
}
@media screen and (min-width:667px) and ( max-width:768px) {
 header span.before, header span.after {
    width: 128px;
}   
}
@media(max-width: 667px) {
    .top_contents1_box, .top_contents2_box {
    padding: 20px;
}
    #top_message {
    padding: 30px 10px;
}
    .png1 {
    left: inherit;
    height: 103px;
    width: 103px;
    top: -19px;
    opacity: 0.8;
    right: -33px;
}
.png2 {
    right: inherit;
    height: 103px;
    width: 103px;
    bottom: -46px;
    opacity: 0.6;
    left: -33px;
    z-index: -1;
}
.png3 {
    right: inherit;
    height: 68px;
    width: 68px;
    bottom: -72px;
    opacity: 0.8;
    left: 42px;
}
    #top_contents1 h3::before, #top_contents2 h3::before {
    opacity: 0;
}
.top_cms_sec:not(:last-of-type):before {
    bottom: -39px;
    right: 15px;
    width: 83px;
    height: 92px;
}
    #vegas {
  margin-bottom: 42px;   
    }
    #video {
     height: 266px;/*#vegasの高さに合わせる*/
    }

.video {
    height: auto;
    width: 127%!important;
}
.catch {
    font-size: 26px;
}
.catch2 {
    font-size: 15px;
}
#top_message h2 {
    font-size: 23px;
    position: inherit;
    top: 0;
    left: 0;
    font-weight: bold;
    letter-spacing: 0;
}
#top_message p:first-of-type {
    font-size: 20px;
    top: inherit;
    position: inherit;
    right: inherit;
    left: 0;bottom: inherit;
}
#logo {
    width: 96px;
    margin: 5px auto 0px 16px;
}
#footer_contact p:first-of-type .c-btn {
    padding: 30px 44px 30px 72px;
}
#footer_contact p:last-of-type .c-btn {
    padding: 30px 13px 30px 19px;
}
}




@media all and (-ms-high-contrast: none) {
#page9 a {
    padding-top: 10px;
}
.cate_list li a {
    padding-top: 12px;
}
#cms_3-e .box_title1::before {
    margin-top: -14px;
}
}