@charset "UTF-8";
/* style CSS */
/* _setting CSS */
/* _reset CSS */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.no_sp { display: none!important; }
.no_pc { display: block!important; }

@media only screen and (min-width: 736px){
	.no_sp { display: block!important; }
	.no_pc { display: none!important; }
}

.cf::after{
	content: ""; 
	clear: both;
	display: block;
}



html{
	height:100%;
}
body{
	width:100%;
	height:100%;
	background-image:url("../img/bg.jpg");
	background-repeat: repeat;
	position:relative;
	font-family: "DotGothic16", sans-serif;
 	font-weight: 400;
	font-style: normal;
	overflow-wrap: anywhere;
}

@media screen and (max-width: 736px) {
	body{
		background-size: 50px;
	}
}

a{
	color:#39d0ffee
}

.pc_nav{
	background-color:rgb(255 17 254 / 83%) ;
	height: 100%;
	width:22%;
	max-width: 220px;
	box-sizing: border-box;
	padding:24px;
	position: fixed;
	z-index: 100;
	border-right:8px ridge;
	/*border-image: url("img/menu_line.png") 30 fill / 30px / 30px space;*/
}
.pc_nav img{
	width:100%;
}

.pc_nav_main{
	width:74%;
	margin:20px auto;
}
.pc_nav_m{
	width:100%;
}
.pc_nav_main img{
	margin-bottom:4px;
}


.pc_nav_footer{
	position: fixed;
	z-index: 101;
	bottom:0px;
	left:0px;
	width:22%;
	padding:24px 32px 24px 24px;
	max-width: 220px;
	color:#07ff00;
	box-sizing: border-box;
	text-align: center;
	font-size: 10px;

}
.p_n_sns_icons{
	width:74%;
	margin:20px auto;
	display: flex;
	justify-content:space-between;
}
.p_n_sns_icon{
	width:30%;
}

.p_n_sns_icon img{
	width:100%;
}
.sp_footer{
	width:100%;
	margin:40px auto 0;
	padding: 40px 0;
	background-color: rgb(255 17 254 / 83%);
	text-align: center;
	font-size: 9px;
	border-top: 4px ridge white;

}
.sp_footer .p_n_sns_icons{
	width:50%;
}
main{
	position: relative;
	overflow: hidden;
	width:78%;
	margin-left:22%;

}
.footer_star{
	width:60%;
	margin: 20px auto;
}
.footer_star img{
	width:100%;
}

@media only screen and (min-width: 1000px){
	main{
		width : calc(100% - 220px) ;
		width : -webkit-calc(100% - 220px) ;
		margin-left:220px;

	}
}
@media only screen and (max-width: 736px){
	main{
		width :100%;
		margin-left:0;

	}
}

.pc_side_bg_l{
	width:140px;
	position: fixed;
	top:0px;
	z-index: 90;
	height:100%;
	animation: slideinLeft 3s 1;
}
.pc_side_bg_l img{
	width:100%
}

@keyframes slideinLeft {
  0% {
    transform: translateX(-50px);opacity: 0;
  }
  100% {
    transform: translateX(0);opacity: 1;
  }
}



.pc_side_bg_r{
	width:140px;
	position: fixed;
	top:0px;
	right:0;
	z-index: 90;
	height:100%;
	animation: slideinRight 3s 1;
}
.pc_side_bg_r img{
	width:100%
}
@media only screen and (max-width: 736px){
	.pc_side_bg_l,.pc_side_bg_r{
		width:14%;
		top:0px;
	}
	.pc_side_bg_l{
		animation: slideinLeft2 10s infinite;
	}
	.pc_side_bg_r{
		animation: slideinRight2 10s infinite;
	}
}
@keyframes slideinRight2 {
  0% {
    transform: translateX(50px);opacity: 0;
  }
  40% {
    transform: translateX(0);opacity: 0.7;
  }
  60% {
    transform: translateX(0);opacity: 0.7;
  }
  100% {
    transform: translateX(50px);opacity: 0;
  }
}
@keyframes slideinLeft2 {
  0% {
    transform: translateX(-50px);opacity: 0;
  }
  40% {
    transform: translateX(0);opacity: 0.7;
  }
  60% {
    transform: translateX(0);opacity: 0.7;
  }
  100% {
    transform: translateX(-50px);opacity: 0;
  }
}


@keyframes slideinRight {
  0% {
    transform: translateX(50px);opacity: 0;
  }
  100% {
    transform: translateX(0);opacity: 1;
  }
}

/*@media only screen and (min-width: 1000px){
	pc_side_bg_l{
		left:220px;

	}
}*/
header{
	color:red;
	background-color: #07ff00;
	padding: 6px 0 9px;
  font-size: 0.9em;
  animation: colorchange 0.7s steps(2, end) infinite;
  position: absolute;
  top:0;
  width:100%;
  z-index: 1200;
  margin-bottom:50px;
}

@keyframes colorchange {
  0%{
  	 color:#ff0000;
	background-color: #07ff00;
  
    
  }
  100%{
   	color:#ff7f7f;
	background-color: #ff11fe;
  }
}
header p{
	letter-spacing: 0.12em;
	animation: loop 16s linear infinite;
	width: 100%;
}
@media only screen and (max-width: 736px){
	header p{
		width:1000px;
		text-align: left;
		animation: loop2 10s linear infinite;
		font-size: 1rem;
	}
}
@keyframes loop {
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(-100%);
  }
}
@keyframes loop2 {
  0%{
    transform: translateX(40%);
  }
  100%{
    transform: translateX(-100%);
  }
}

.main_area{
	width:80%;
	max-width: 800px;
	margin: 60px auto;
}
@media only screen and (max-width: 736px){
	.main_area{
		width:90%;
		margin:40px auto 00px;
	}
	
}
.fv_img_area {
    width: 90%;
    margin: 0 auto;
    height:auto;	
    background-image: repeating-linear-gradient(
        to bottom right,
        hsl(0deg, 80%, 50%),
        hsl(60deg, 80%, 50%),
        hsl(120deg, 80%, 50%),
        hsl(180deg, 80%, 50%),
        hsl(240deg, 80%, 50%),
        hsl(300deg, 80%, 50%),
        hsl(360deg, 80%, 50%) 50%
    );
    background-size: 1000% 1000%;
    animation: colorRotation 100s linear 0s infinite;
}

.fv_img_area_s {
    width: 90%;
    margin: 0 auto;
    height:auto;	
}

@keyframes colorRotation {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 500% 500%;
	}
}

.fv_img_area img{
	width:100%;
	mix-blend-mode:difference;
	margin-bottom:-5px;
	/*animation:fadein1 2s ease-out;
	animation-delay: 1s;*/

}

.fv_img_area_s img{
	width:100%;
	margin-bottom:-5px;
	/*animation:fadein1 2s ease-out;
	animation-delay: 1s;*/

}

.logo_area{
	position: relative;
	width:100%;
	margin: 20px auto 0;
}
@media only screen and (max-width: 736px){
	.logo_area{
		padding-bottom:30px;
	}
}
.main_logo{
	width:72%;
	margin:0 auto;
	position: absolute;
	top:-70px;
	left:14%;
	z-index: 110;
	animation:fadein1 2s ease-out;
}
@media only screen and (max-width: 736px){
	.main_logo{
		width:90%;
		top:-46px;
		left:5%
	}
}

.logo_bg{
	width:100%;
}

@keyframes fadein1 {
0%   { transform:translate(-2px,0);opacity:0; }
10%   {transform:translate(3px,0);opacity:0.1;}
20%   {transform:translate(-3px,0);opacity:0.2;}
30%   {transform:translate(2px,0);opacity:0.3;}
40%   {transform:translate(-2px,0);opacity:0.4;}
50%   {transform:translate(4px,0);opacity:0.5;}
60%   {transform:translate(-3px,0);opacity:0.6;}
70%   {transform:translate(1px,0);opacity:0.7;}
80%   {transform:translate(-4px,0);opacity:0.8;}
90%   {transform:translate(2px,0);opacity:0.9;}
100%  { transform:translate(0,0);opacity:1}
}


.pc_counter_area{
	width:74%;
	height: 70px;
	margin: 20px auto;
	color:red;
	display: flex !important;
  align-items: center;
}

.p_c_shacho{
	width:14%;
	text-align: center;
}
.p_c_shacho img{
	width:60px;
}
.p_c_fukidashi{
	width:80%;
}

.fukidashi{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color:#00456f;
	border-radius: 50px;
	text-align: center;
	width:100%;
	box-sizing: border-box;
	padding: 7px;

}
.fukidashi:after {
	right: 99%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #00456f;
	border-width: 10px 18px 10px 10px;
	margin-top: -10px;
}
.fukidashi_p1{
	font-size: 0.9rem;
}
.fukidashi_p3{
	font-size: 0.9rem;
	padding-left: 6px;
}
.counter{
	display: flex;
	flex-wrap: wrap;
  font-family: "Keania One", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #07ff00;
  border: 4px ridge white;
  padding: 3px;
  background-color: black;
}
.counter_num{
	float: left;
}

.sp_counter_area{
	width:100%;
	box-sizing: border-box;
	padding:8px 3%;
	background-color: rgba(255, 17, 254, 0.2);
	border-top: 4px ridge;
	border-bottom: 4px ridge;
	margin-top:40px;
	
}
.s_c_main{
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.s_c_shacho{
	width:25%;

}
.s_c_shacho img{
	width:100%;
	max-width:70px;
}
.s_c_txt_area{
	width:75%;
	color:red;
}
.s_c_p2{
	display: flex;
	align-items: center;
	justify-content: left;
}
.s_c_p2-1{
	margin:6px 8px 0px 0px;
}



.sp_menu_area{
	width: 90%;
  margin: -20px auto 0;
}
.sp_menu{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;

}
.sp_menu div{
	width:30%;
	margin: 0.7% 1.5%;
}
.sp_menu div img{
	width:100%;
}






.basic_section{
	width:84%;
	margin:40px auto 100px;
}
@media only screen and (max-width: 736px){
	.basic_section{
		width:84%;
		font-size: 0.8rem;
	}
}
h2{
	width:100%;
	display: flex;
  justify-content: space-between;
  height:40px;
  background-color: red;

}
h2 img{
	height: 40px;
}
@media only screen and (max-width: 736px){
	h2{
		height: 34px;
	}
	h2 img{
		height: 34px;
	}
}

.news_area{
	widht:100%;
}
@media only screen and (max-width: 736px){
	.news_area{
		font-size: 1rem;
		line-height: 1rem;
	}
}
.news_item{
	color: red;
	padding-bottom:10px;
	border-bottom:1px solid #07ff00;
	margin:14px auto;
}
.new_icon{
	width:50px;
}

.prof_mv{
	width:100%;
	color:#07ff00;
	text-align: center;
	padding-bottom:30px;
	border-bottom:1px solid #ffea00;
	margin-bottom: 30px;
}
.prof_mv_img{
	width:70%;
	margin:30px auto;
}
.prof_block{
	margin-bottom: 40px;
	width:100%;
	display: flex;
	align-items: center;
	padding-bottom:30px;
	border-bottom:1px solid #edff00;
	color:red;
}


.prof_img{
	/*width:30%;*/
	max-width: 200px;
}
.prof_img img{
	width:100%;
}
.prof_txt_area{
	margin-left: 20px;
}
.prof_txt_area p{
	margin-bottom:10px;
}

.prof_q{
	width:100%;
	color:white;
	background-color: blueviolet;
}
.prof_a{
	margin-bottom:10px;
}

@media only screen and (max-width: 736px){
	.prof_block{
		display:block;
	}
	.prof_img{
		width:40%;
		margin:20px auto;
	}
	.prof_txt_area{
		width:100%;
		margin:20px auto;
		margin-left: 0px;
	}
	
}
.prof_name{
	font-size: 1.5rem;
	color: yellow;
}
.prof_sns a{
	color:#07ff00 !important;
}
.prof_sns img{
	width:20px;
}


.live_block{
	margin:40px auto;
	display: flex;
  justify-content: space-around;
	border-bottom:1px solid #07ff00;
	padding-bottom:30px;
}



.live_img{
	width:40%;
	box-sizing: border-box;
  margin: 0 5%;
}
.live_img img{
	width:100%;
}
.live_txt_area{
	width:60%;
	color:red;

}

@media only screen and (max-width: 736px){
	.live_block{
		display: block;
	}
	.live_img{
		width:80%;
		margin:10px auto 20px;
	}
	.live_txt_area{
		width:100%;
		margin:10px auto;
	}
	
}

.live_date,.live_title{
	color:#07ff00;
}
.more{
	width:100%;
	color:#edff00;
	text-align: right;
	box-sizing: border-box;
	margin:20px auto;
}
.more a{
	color:#edff00;
}



.shop_section,.contact_section{
	color:#edff00;
	text-align: center;
}
.shop_section p{
	margin:10px auto;
}
.contact_section p{
	margin:10px auto;
}
.shop_section h2{
	margin:0px auto 30px;
}
.contact_section h2{
	margin:0px auto 30px;
}
.shop_section img{
	width:100%;
}

.contact_section span{
	color:#07ff00;
}

.mail{
	font-size: 1.5rem;
}

.fv{
	margin-top:70px;
}






.other_page .main_logo{
	display: block;
	position: static;
}
@media only screen and (max-width: 736px){
	.other_page .main_logo {
  	margin-bottom: -50px;
	}
}