﻿@charset "utf-8";
/* 1536 , 1530 × 735 ,1366 *//* ←記画面幅でも崩れていないか確認 */

/* カテゴリリンクの飛び先位置の数値を適宜調整してください */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */

/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* color */
.txt_color_nomal, .hvr_txt_color_nomal:hover{color: var(--black);}
:root{
    --color1: #dd1500; 
    --color2: #ededed; 
    --color3: #1e1e1e; 
    --color4: #ffec66; 
    --black: #543e27; 
    --normal: #543e27;
    --linkStyle:#c40e00;
}

.txt_red, .hvr_txt_red:hover{color: #C12326;}
.txt_gray, .hvr_txt_gray:hover{color: #ccc}
.txt_color1, .hvr_txt_color1:hover{color: var(--color1)} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: var(--color2)} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: var(--color3)} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: var(--color4)} /* アクセントカラー2 */

/* background-color */
.bg_black, .hvr_bg_black:hover{background-color: var(--black)} /* 黒背景 */
.bg_gray, .hvr_bg_gray:hover{background-color: #ccc}
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1)} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2)} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3)} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4)} /* アクセントカラー2 */
.bg_color_clear, .hvr_bg_color_clear:hover{background-color: transparent!important}

/* border-color ※!important */
.border_black, .hvr_border_black:hover{border-color: var(--black)}
.border_gray, .hvr_border_gray:hover{border-color: #ccc}
.border_color1, .hvr_border_color1:hover{border-color: var(--color1)}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2)}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3)}
.border_color4, .hvr_border_color4:hover{border-color: var(--color4)}


.linkStyle{
	color:var(--color1);
}
.linkStyle:hover{
	color:var(--color1);
	opacity: 0.7;
	transition: all 0.5s;
}

.point_no{
    pointer-events: none;
}

body{
    background-color: #fff;
}
/*header*/
#header {
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 10;
}
#logo {
    width: 177px;
}
#header_contact a.btn_back{
    background-color: rgba(221, 21, 0, 1);
}
#header_contact .Russo{
    color: #fff;
}
#header_contact a:hover.btn_back{
    /*background-color: rgba(221, 21, 0, 0.8);*/
    background-color: var(--color3);
}

/*電話番号非表示*/
#footer_contact p.more.link.txt_center:not(.mg_b-20px_sp) {
    display: none !important;
}

/*footer*/
#logo2 {
    width: 250px;
}
#footer_contact .d_flex{
    position: relative;
    z-index: 1;
}
/* fix_bnr ---------------------------------------------------------------------------------------------*/
#fix_bnr {
    bottom:0;
    right:0;
    z-index: 10;
    width: 37%;
    max-width: 350px;
    margin: auto;
    transition: opacity 0.8s, transform 0.8s;
    opacity: 0;
    transform: translateY(20px); 
    pointer-events: none; 
}

.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important; 
}

#fix_bnr:hover{
    transform: translateY(0) scale(1.1) !important;
}



/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    /*header*/
#logo {
    width: 120px;
}
/*footer*/
#logo2 {
    width: 220px;
}

/*fix_bnr*/
#fix_bnr {
width:80%;
}

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#vegas{
    background-image: url('/Files/img/main_bg.png');
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  height: 100vh;
  min-height: 700px;
  min-width: 1200px;
  z-index: 10;
}

#vegas .main1{
    bottom: -22vw;
    left: 63%;
    transform: translate(-50%, 0);
    width: 30%;
    z-index: 2;
}
#vegas .main2{
    width: 200px;
    top: 48%;
    left: 40%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
#vegas .main3{
    right: 5vw;
    bottom: -25px;
    width: 220px;
    z-index: 2;
}

header span.before{
    width: 410px;
    height: 750px;
    left: -250px;
    bottom: auto;
    top: 0;
    -webkit-transform: skewX(-33.35deg);
    transform: skewX(-33.35deg);
        mix-blend-mode: color-dodge;
}
header span.after{
    top: auto;
    right: -250px;
    bottom: 0;
    width: 300px;
    height: 700px;
    -webkit-transform: skewX(-33.35deg);
    transform: skewX(-33.35deg);
        mix-blend-mode: color-dodge;
}
/*光*/
.svg-container {
      width: 100%;
      bottom: 3px;
    }
    

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#vegas{
    min-width: auto;
    min-height: auto;
    height: 70vh;
}
#vegas .main1{
            top: auto;
        left: 66%;
        bottom: -17vw;
        width: 39%;
}
#vegas .main2 {
    width: 130px;
    left: 36%;
}
#vegas .main3{
    right: 5vw;
    width: 150px;
    bottom: -20px;
}
header span.before{
    width: 300px;
    height: 710px;
}
header span.after{
    height: 590px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#vegas{
    height: 160vw;
}
#vegas .main1{
    width: 235px;
    bottom: -120px;
    left: 72%;
}
#vegas .main2{
    width: 110px;
        top: 46%;
        left: 30%;
}
#vegas .main3{
    width: 120px;
    bottom: -15px;
    right: 5px;
}
.svg-container{
    left: -50px;
}
      .svg-container svg {
        width: 190%; 
      }
      header span.before{
          height: 570px;
      }
      header span.after{
          height: 410px;
      }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#top_message{
    z-index: 1;
}
#top_message h2{
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 1.4;
}
#top_contents1 h3,#top_contents2 h3{
    font-size: 30px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 10px;
    
}
#top_contents1 h3 .editTxt1,#top_contents2 h3 .editTxt1{
position: relative;
    z-index: 2;
}

#top_contents1 .c-btn__back:hover,#top_contents2 .c-btn__back:hover{
    background-color: #4f4f4f;
}

#top_cms{
    background-color: #fff;
    padding-top: 100px;
}
#top_cms .font_21{
    font-size: 26px;
}
#top_cms .top_cms_sec{
    border: none;
    margin-bottom: 50px;
}
#top_cms .width_1280-1000{
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 1;
    padding-top: 20px;
    padding-bottom: 30px;
}


/* 電気の通り道（共通） */
    .electric-line {
      position: fixed; /* スクロールしても画面に追従 */
      top: 0;
      width: 4px;
      height: 100vh;
      background: rgba(255, 87, 34, 0.15);
      z-index: 1; 
      overflow: hidden;
    }

    /* 実際に流れる光（共通） */
    .electric-line::before {
      content: "";
      position: absolute;
      top: -100%; /* 初期位置は画面のずっと上 */
      left: 0;
      width: 100%;
       background: linear-gradient(to bottom, transparent, transparent, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.5), #ffc107);
      box-shadow: 0 0 5px rgba(255, 193, 7, 0.3), 0 0 8px rgba(255, 193, 7, 0.1);
      z-index: 0;
    }
    .line-left {
      left: 50%;
      transform: translate(-50%,0);
    }

    .line-left::before {
      height: 50%; /* 光の長さ */
      animation: electricityFlow 1.5s linear infinite;
    }

    /* --- アニメーションの動き --- */
    @keyframes electricityFlow {
      0% {
        top: -100%; /* 上の見えない位置から */
      }
      100% {
        top: 100%; /* 下の見えない位置まで移動 */
      }
    }
    
/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .top_cms_sec{
        padding-bottom: 50px;
    }
    #top_contents1 h3,#top_contents2 h3{
    color: var(--color1);
    text-align: center;
    }
    #top_contents1 .title::before, #top_contents2 .title::before {
        font-size: 67px;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#top_message h2{
    font-size: 24px;
}
  #top_contents1 h3,#top_contents2 h3{
    font-size: 24px;
    }
    #top_cms .font_21{
    font-size: 22px;
}
    #top_contents1 .title::before, #top_contents2 .title::before {
        top: -40%;
        font-size: 48px;
    }
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*カテゴリリンクの飛び先位置を調整する*/
/* --- PC --- */
:root {
--header-height: 130px;
}
/* --- スマートフォン --- */
@media screen and (max-width: 667px){
:root {
--header-height: 100px;
}
}

    




/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
       #page_title span.before {
        height: 330px;
    }
       #page_title span.after {
        height: 180px;
    }
    
    /*お問い合わせ*/
.contact_btn span {
        padding: 20px 10px 20px 40px !important;
    }
}


