﻿/* all page */
/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #160a0a;transition: opacity .3s;text-decoration: underline;}
.linkStyle:hover{opacity: 0.7}


/* header */

/* top ---------------------------------------------------------------------------------------------*/

/* main img */
#main .main_box, #main .sns_link {z-index: 2;}
#main .cms_img1 {position: relative;}
#main .cms_img1::before {
    content: "";
    position: relative;
    background-color: #000;
    width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0.3;
}
#main .main_box {
    max-width: 700px;
}
#main .main_box.animStart h2{
    color: #fff;
}

#main .main_box .more a::before, #main .main_box .more a::after{
    display: none;
}
#main .main_box .more a{
    position: relative;
    display: inline-block;
    color: #7edd04;
    transition: 0.5s;
    letter-spacing: 4px;
   padding: 20px 0;
}
#main .main_box .more a:hover{
    transform: none;
    background: #7edd04;
    color: #050801;
    box-shadow: 0 0 5px #7edd04,
                0 0 25px #7edd04,
                0 0 50px #7edd04,
                0 0 200px #7edd04;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
#main .main_box .more a span{
    position: absolute;
    display: block;
}
#main .main_box .more a span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#7edd04);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
#main .main_box .more a span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#7edd04);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
#main .main_box .more a span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#7edd04);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}
#main .main_box .more a span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#7edd04);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

/* main */
/*雷アニメーション*/
#catch{
    position: relative;
}
#catch .catch__bg{
    position: absolute;
    top: 0;
    right: 10%;
    z-index: 0;
    content: "";
    background: url(./Dup/img/kaminari01.png);
    background-size: 600px;
    background-position: top;
    background-repeat: no-repeat;
    width: 500px;
    height: 100%;
    filter: brightness(3);
    transform: rotate(10deg);
}
#catch .catch__bg2{
    position: absolute;
    bottom: 0;
    left: 10%;
    z-index: 0;
    content: "";
    background: url(./Dup/img/kaminari01.png);
    background-size: 400px;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 400px;
    height: 100%;
    filter: brightness(3);
    transform: rotate(-10deg);
}
.animate {
  opacity: 0;
  transition: all 0.5s;
}
.animate.show {
  animation: blur 1s ease-out forwards;
  
}
@keyframes blur {
  10%    {opacity:0;filter: brightness(3);}
  50%   {opacity: 1;}
  98%  {opacity:0;filter: brightness(2);}
}
.animate.show:nth-of-type(1) {
  animation-delay: 0.5s;
}
.animate.show:nth-of-type(2) {
  animation-delay: 1.5s;
}

/* intro */

/* contents */

/* topcms */
#top_cms .top_cms_box {
    position: relative;
}
#top_cms .top_cms_box:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    background: #000;
    background-size: 100% 100%;
}
#top_cms .top_cms_box:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    z-index: -5;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
    background: linear-gradient(270deg,transparent,#7edd04);
    background-size: 200% 200%;
    animation: animateGlow 5s ease infinite;
}
@keyframes animateGlow {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
#top_cms .cms_title, #top_cms h3, #top_cms h4, #top_cms p, #top_cms span, #top_cms .cms_6-b .cate_box .box_txt2{
    color: #fff;
    border-color: #333;
}
#top_cms .cms_6-b .cate_box .box_txt1{
    background-color: #444;
}
#top_cms .cms_5-c{
    padding: 0 50px;
}
#top_cms .more a {
    border: 1px solid #7edd04;
    color: #7edd04;
}
#top_cms .more a:after {
    background-color: #7edd04;
}

/* footer */
.shop_info.more a {
    background-color: #000;
    color: #7edd04;
    padding: 5px;
}
.shop_info.more a:hover {
    transform: none;
    background: #7edd04;
    color: #050801;
    box-shadow: 0 0 5px #7edd04,
                0 0 10px #7edd04,
                0 0 20px #7edd04,
                0 0 50px #7edd04;
}
.shop_info.more a:after{
    background-color: #7edd04;
}
.more a:before{
    display: none;
}


/* under page ---------------------------------------------------------------------------------------------*/
.cate_list li a {
    background-color: #000;
    color: #7edd04;
    padding: 5px;
}
.cate_list li a:hover {
    transform: none;
    background: #7edd04;
    color: #050801;
    box-shadow: 0 0 5px #7edd04,
                0 0 25px #7edd04,
                0 0 50px #7edd04,
                0 0 200px #7edd04;
}

/* cms1 */

/* cms2 */
#cms_2-a .box_title1{
    font-weight: bold;
}

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */


/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #main .main_box {
        width: 70%;
    }
    
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    #catch .catch__bg {
        background-size: 450px;
        background-position: top left;
        width: 450px;
        height: 510px;
    }
    #catch .catch__bg2 {
        background-size: 390px;
        width: 390px;
        height: 600px;
    }
    .shop_info h2{
        font-size: calc(1rem + 11px);
    }
    .cate_list li a {text-align: center;}
    
}

/* IE */
@media all and (-ms-high-contrast: none){
    #top_cms .top_cms_box:after {
        /*box-shadow: rgba(126,221,4, 0.25) 0px 54px 55px, rgba(126,221,4, 0.12) 0px -12px 30px, rgba(126,221,4, 0.12) 0px 4px 6px, rgba(126,221,4, 0.17) 0px 12px 13px, rgba(126,221,4, 0.09) 0px -3px 5px;*/
        box-shadow: rgba(126,221,4, 0.2) 0px 12px 28px 0px, rgba(126,221,4, 0.1) 0px 2px 4px 0px, rgba(126,221,4, 0.05) 0px 0px 0px 1px inset;
    }
    .cate_list li a, #cms_2-a .cate .cate_title{
        padding-top: 15px!important;
    }
    .page8 .tel a{
        padding-top: 20px;
    }
    .page9 .box p a{
        padding-bottom: 0;
    }
}




