@charset "UTF-8";


/* Text elements */
body { font-size:16px; text-align: center; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust : 100%; }
html {    font-size: 62.5%; }
h1,h2,h3,h4,h5,h6 { font-size:100%;}
a { color: #666; text-decoration: none; }
a:hover { text-decoration:underline;}
a:hover { opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }

/*メインカラー設定*/
.c_junca { color:#C81239;}
.maincolor_bg { background-color:#C81239;}

/*---------------------------------------------------------
レイアウト
---------------------------------------------------------*/
* { margin:0; padding:0;}
body {background-color: #210C30;}
#wrapper { position:relative; top:0; left:0;background: 
	url(/images/head_bg.png) repeat-x top center,
	url(/images/foot_bg.png) repeat-x bottom center;
 padding-top:235px; padding-bottom:347px;}



body { background-image: url(images/hologram_bg.png)}

.width { text-align:center; position:relative; width:1080px; margin-left:auto; margin-right:auto; color:#FFF;}
div.mainlogo { position:relative; z-index:5;}
div.video_s { margin-top:-50px; position:relative; z-index:-10}
.text { margin-top:60px; width:700px; margin-left:auto; margin-right:auto; text-align:center;}
.logosetblock { margin-top:350px;}





#videopl {position: absolute; top: 385px; left: 50%; transform: translateX(-50%); width:500px; overflow:hidden;}
#videopl { animation:company_map_ani 3s linear forwards;}
#video { width:100%;}



@keyframes company_map_aniaaa {
	0% {transform: scale(1) translate(0,0);z-index:10;}
	80% {transform: scale(1) translate(0,0);z-index:10;}
	100% { transform: scale(0.4) translate(-0px,370px);z-index:3;}
}


.logoset { margin-top:50px;}
.set001 { border-bottom:#63605F solid 1px; }
div.sp_juncachain img { display:none;}

div#youtubeplay { width:500px; height:300px; background-color:#0FC; position:absolute; top:0; left:0;}


@media screen and (min-width: 320px) and (max-width: 768px) {
	.sp100 { padding-bottom:30vh}
	.width { width:96%; margin-left:auto; margin-right:auto}
	.logosetblock { margin-top:0;}

	.text { width:96%; margin-left:auto; margin-right:auto;}
	img { width:100%; height:auto;}
	.spw50 { width:50%; height:auto;}
	.text br { display:none}
	
.set001 img { width:33%;}	
.set002 img { width:50%;}	
div.sp_juncachain img { display: inline; width:60%;}
img.juncachain { display:none; }
.set003 img{ width:25%;}
img.juncasalon { width:40%; margin-top:-30px;}


#videopl {position: absolute; top: 305px; left: 50%; transform: translateX(-50%); width:80%; overflow:hidden;}
#videopl { animation:company_map_ani 3s linear forwards;}
#video { width:100%;}

@keyframes company_map_aniaaa {
	0% {transform: scale(1) translate(0,0);z-index:10;}
	80% {transform: scale(1) translate(0,0);z-index:10;}
	100% { transform: scale(0.4) translate(-0px,360px);z-index:3;}
}


}

body.playnow #wrapper {
  filter: brightness(0.2) !important;
}

#playmovie { display:none;}

 /* ボタンを押した後の挙動 */
body.playnow #playmovie  {display: block; position: fixed; top:0; left:0;  width: 100vw;  height: 100vh;}
body.playnow #rect1 { z-index:301;}
#rect1 {   display:block; width:90%; margin-top:100px; margin-left:auto; margin-right:auto; height:auto; background-color:#ccc;   background-color:#FFF; opacity: 0;}
#rect1 iframe { width:100%;}
.playnow #rect1 { animation: arrowmove 0.5s ease-out forwards;}
#rect1 iframe { animation: ani_youtube 1s ease-out forwards;opacity: 0;}
 @keyframes arrowmove{ 
 0%{transform:scaleX(0.001) scaleY(0.01); opacity: 0.6;}  

20%{transform:scaleX(1) scaleY(0.01); opacity: 0.6;}
 
 100%{transform: scaleX(1) scaleY(1); opacity: 1;}
  }
  @keyframes ani_youtube{ 
  55%{opacity: 0;}   
  100%{opacity: 1;}
   }
 .playnow {cursor:pointer;}



/*CLOSEボタン*/
div.btn-radius-solid { display:none;}
body.playnow div.btn-radius-solid { display: block; position: fixed; top:5px; right:5px;  z-index:999; color:#FFF;
  width: 30px; font-weight:bold; cursor:pointer;
  height: 30px; font-size:20px; 
}


.jhmember { display: flex; align-items: center;/*縦*/ margin-bottom:80px;}
.top_profbox { margin-left:50px; text-align:left;}

.toggle {
	display: none;
}
.Label {	display:block; text-align:left; font-weight: bold; cursor :pointer;padding: 15px; }
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	left: 0px;
	transform: rotate(135deg);
}
.Label,.hidden_show {	-webkit-backface-visibility: hidden;	backface-visibility: hidden;	transform: translateZ(0);	transition: all 0.3s;}
.hidden_show {		/*本文*/
	height: 0;
	margin-bottom:10px;
	padding:0 20px;
	overflow: hidden;
}
.toggle:checked + .Label + .hidden_show {	/*開閉時*/
	height: auto;
	padding:20px ;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}
img.saiz190 { width:190px; height:190px;}



body.body_second #wrapper { padding-top:100px; padding-bottom:100px;}
span.navig a { color: #996;}

@media screen and (min-width: 320px) and (max-width: 768px) {

.jhmember { display: block;}
.jhmember img { width:60%; height:60%; margin-bottom:20px;}
.sp100 { padding-bottom:30px !important;}
}