html, body {
	font-size: 12px;
    font-family: -apple-system, 'BlinkMacSystemFont', '.SFNSDisplay-Regular', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',sans-serif;
	background: #fff;
	color: #000;
	letter-spacing: 0.02rem;
	line-height: 1.4rem;
}






/* ============================================================

common

============================================================ */
table.privacy th,table.privacy td {
	vertical-align:text-top;
}

/*telリンクの制御：無効化*/

[href^="tel"] {
    text-decoration: none;
    color: #000;
    cursor: default;
    pointer-events: none;
}

h2 {
    font-size: 34px;
    margin-bottom: 34px;
}


h2.headline{
	font-size: 43px;
	line-height:65px;
    float:left;
    width:50%;
}

.headline-box {
    width:100%;
    padding-top:135px;
}

.aside {
    width:50%;
    float:right;
    line-height:33px;
}

.mw {
    width: 96%;
    max-width: 1260px;
    margin: 0 auto;
}

.article-pd{
	position: relative;
}


.ri{
	width:40%;/*100*/
}

.num7 .ri {
	width:100%;
}
.num8 .ri {
	width:100%;
}

.fr{
	float: right;
}

.fl{
	float: left;
}

.mb {
    margin-bottom: 60px !important;
}



.border-r{
	border-radius: 4px;        /* CSS3闕画｡� */  
	-webkit-border-radius: 4px;    /* Safari,Google Chrome逕ｨ */  
	-moz-border-radius: 4px;   /* Firefox逕ｨ */  
}

.pc{
	display: block;
}

.sm{
	display: none;
}




 /* --- clearfix --- */

.cf:before,.cf:after {content:"";display:table;}
.cf:after {clear:both;}
.cf {*zoom:1;}


 /* --- select text--- */
 
::selection {

}

::-moz-selection {

}

   
/*---- box ----*/
 

.box-3col {
    display: block;
    float: left;
    width: 31.333333%;
    margin-right: 3%;
    box-sizing: border-box;
}

.box-3col:nth-child(3n){
	margin-right: 0%;
}



.box-4col {
    position: relative;
    display: block;
    float: left;
    width: 23.5%;
    margin-right: 2%;
     margin-bottom: 2%;
    box-sizing: border-box;
}

.box-4col:nth-child(4n){
	margin-right: 0%;
}

 
.box-6col {
    position: relative;
    display: block;
    float: left;
    width: 16.66666%;
    box-sizing: border-box;
}

.box-6col:nth-child(6n){
	margin-right: 0%;
}



#container {
	opacity: 0;
    overflow: hidden;
	
}



/*---- coming soon ----*/

.coming-soon {
    text-align: center;
    margin: 180px 0px;
    font-size: 1rem;
}

/*---- underline ----*/

.underline-box {
    position: relative;
    display: inline-block;
}


.underline {
    height:2px;
    background: #000;
    width:0%;
    position: absolute;
	bottom: -5px;
    display: block;
}



.p-r{
	right:0;
}
.p-l{
	left: 0;
}




/*---- arrow ----*/


.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}

.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}

.sample1-2::before{
left: 3px;
width: 7px;
height: 1px;
background: #7a0;
}

.sample1-2::after{
left: 3px;
width: 6px;
height: 6px;
border-top: 1px solid #7a0;
border-right: 1px solid #7a0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}



/*----hamburger----*/

.hamburger-box {
    display: block;
    height: 50px;
    width: 50px;
    position: fixed;
    z-index: 9999999;
    right: 5%;
    top: 2%;
}

.hamburger,
.hamburger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}


.hamburger {
    position: absolute;
	width: 30px;
    height: 22px;
    left:0;
    top: 0;
    right:0;
    bottom: 0; 
    margin:auto;
}


.hamburger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #fff;
	border:1px solid #666;
}

.hamburger span:nth-of-type(1) {
	top: 0;
}
.hamburger span:nth-of-type(2) {
	top: 50%;
	margin-top: -1px;
}
.hamburger span:nth-of-type(3) {
	bottom: 0;
}



.hamburger.active {
    transform: rotate(-180deg);
}



.hamburger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.hamburger.active span:nth-of-type(2) {
	right: 50%;
	opacity: 0;
	-webkit-animation: active-menu-bar02 .8s forwards;
	animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}
@keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}
.hamburger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-8px) rotate(45deg);
	transform: translateY(-8px) rotate(45deg);
}




/* ============================================================

fix

============================================================ */



.num7 {
    width: 140px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -90px;
    margin-left: -127px;
    z-index: 9999999;
    transition: all .3s;
}

.num7.active {
    width: 140px;
    position: fixed;
    top: 60%;
    left: -70px;
    margin-top:  0;
    margin-left: 0;    
}

.num8 {
	width: 140px;
    position: fixed;
    top: 50%;
    right: 50%;
    margin-top: -220px;
    margin-right: -127px;
    z-index: 9999999;
    transition: all .3s;
}

.num8.active {
    width: 140px;
    position: fixed;
    top: 20%;
    right: -70px;
     margin-top:  0;
    margin-right: 0;       
}

/* ============================================================

header

============================================================ */

header{
	position: relative;
}

header.top{
	box-sizing: border-box;
}

header.other{
	box-sizing: border-box;
}

.logo {
    position: fixed;
    top: 3%;
    left: 5%;
    width: 20%;
    z-index: 9999;
    box-sizing: border-box;
    opacity: 1;
	color:white;
	font-weight:bold;
	font-size:2em;
		text-shadow: 1px 1px 0 #666;
text-shadow: 1px 1px 0 #666,
             -1px 1px 0 #666,
             1px -1px 0 #666,
             -1px -1px 0 #666;
text-shadow: 1px 1px 1px #666,
             -1px 1px 1px #666,
             1px -1px 1px #666,
             -1px -1px 1px #666;
}
.head-contact {
    position: fixed;
    top: 10%;
    right: 5%;
    width: 20%;
    z-index: 9997;
    box-sizing: border-box;
    opacity: 1;
	color:white;
	font-weight:bold;
	font-size:1.2em;
	text-align:right;
		text-shadow: 1px 1px 0 #666;
text-shadow: 1px 1px 0 #666,
             -1px 1px 0 #666,
             1px -1px 0 #666,
             -1px -1px 0 #666;
text-shadow: 1px 1px 1px #666,
             -1px 1px 1px #666,
             1px -1px 1px #666,
             -1px -1px 1px #666;
}

#main-visual{
	width:100%;
	height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/main.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}

#company-visual{
	width:100%;
	height: 100%;/*100%*/
	overflow:hidden;
	*zoom:1;
	background:url("../images/company.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}

#entertainment-visual{
	width:100%;
	height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/entertainment.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}

#service-visual{
	width:100%;
	height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/service.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}

#audition-visual{
	width:100%;
	height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/audition.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}


@media only screen and (max-width: 480px) {

#main-visual{
	width:100%;
	height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/main-sp.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}

#company-visual{
	width:100%;
	height: 100%;/*100%*/
	overflow:hidden;
	*zoom:1;
	background:url("../images/company-sp.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}

#entertainment-visual{
	width:100%;
	height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/entertainment-sp.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}

#service-visual{
	width:100%;
	height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/service-sp.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}

#audition-visual{
	width:100%;
	height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/audition-sp.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
	
}
    
}
.main-visual-text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    /*width: 35%;*/
    height: 70px;
    text-align: center;
    font-size: 12px;
    line-height: 25px;
}


.other-visual-text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    /*width: 35%;*/
    height: 25px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 25px;
}

.scroll {
    text-align: center;
    position: absolute;
    z-index: 999;
    bottom: 20%;
    width: 100%;
    margin: 0 auto;
}

.scroll a{
    color: #fff;
}





.scroll-line{
    display: inline-block;
    background: #fff;
    width: 1px;
    height: 50%;
    position: absolute;
    top: 45px;
    right: 50%;
}

#scroll a {
    cursor: pointer;
    padding: 10px;
}

.num78-logo{
    width:89px;
    height:113px;
    display: block;
    margin: 0 auto;
    margin-bottom:30px;
	background:url("../images/78header_logo.png") ;
    background-size: cover;
}

.num7-logo {
    width: 47px;
    position: absolute;
    margin-top:47px;
    fill: #fff;
}

.num8-logo {
	width: 47px;
    position: absolute;
    margin-left:42px;
    fill: #fff;
}















#modal-content {
	width: 100% ;
	height: 100%;
	margin: 0 ;
	background: #fff ;
	position: fixed ;
	display: none ;
	z-index: 999999 ;
}
  
#modal-overlay {
	z-index: 99999 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 100% ;
	background-color: rgba( 255,255,255, 1 ) ;
}




nav {
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    transition: all .4s;
}



.nav-photo {
    width: 50%;
    height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/nav-back.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
}

@media screen and (max-width: 480px) {
    
.nav-photo {
    width: 50%;
    height: 100%;
	overflow:hidden;
	*zoom:1;
	background:url("../images/nav-back-sp.jpg") ;
	background-position: center center;
	background-size:cover;
    color:#fff;
	position:relative；
}

}
    
.nav-logo {
    position: absolute;
    top: 50%;
    left: 25%;
    margin-left: -100px;
    margin-top: -60px;
    width: 200px;
    height: 80px;
    box-sizing: border-box;
    opacity: 1;
		color:#FFF;
	font-weight:bold;
	font-size:24px;
}

nav ul li {
    float: left;
    margin-right: 45px;
    position: relative;
    font-weight: bold;

}

nav ul li a{
    color: #000;
}


nav ul {
    width: 45%;
    height: 220px;
    position: absolute;    
	top:0;
	bottom: 0;
	right: 0;
	margin: auto;
}


nav ul li {
	font-size: 1rem;
    width: 100%;
    margin-right: 0;
    margin-bottom: 25px;
    line-height: 100%;
}


nav ul li a{
    display: block;
}



/* ============================================================


============================================================ */

.inner-contents {
    width: 87.5%;
    max-width: 1200px;
    margin: 0 auto;
}

.m-tb{
	margin: 10vh auto;
}



.inner-in {
    width: 100%;
    margin: 0 auto;
    display:table;
}

.inner-in-text {
    width: 70%;
    display:table-cell;
    line-height: 33px;
}

.inner-in-btn {
    width: 30%;
	display:table-cell;
	position:relative;
}


/*------
btn
------*/

#sampleBox {
  width: 100px;
  height: 100px;
  background-color: #1e90ff;
}

.circle-btn {
    font-size: 0.82rem;	
    font-weight: bold;
    display:block; 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 90px;
    height: 90px;
    text-align: center;
    padding-top: 31px;
    border: 2px solid #000;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    -ms-border-radius: 100px;
}

.circle-btn-white {
    font-size: 0.82rem;	
    font-weight: bold;
    display:block; 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 90px;
    height: 90px;
    text-align: center;
    padding-top: 31px;
    border: 2px solid #fff;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    -ms-border-radius: 100px;
}


.circle-btn-line {
    display: inline-block;
    z-index: 9999;
    background: #000;
    width: 36px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: -26px;
    margin-top: -1px;
}

.circle-btn-line-white {
    display: inline-block;
    z-index: 9999;
    background: #fff;
    width: 36px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: -26px;
    margin-top: -1px;
}


/* ============================================================

area-snap

============================================================ */

.model-thumb{
margin-bottom: 3%;
}


.model-thumb .snap-box-photo {
    width: 100%;
	float: left;
	overflow: hidden;
	margin-bottom: 5%;
}


.model-thumb .snap-box-photo img{
    -webkit-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
    width: 100% !important;
    height: auto !important;
}

.model-thumb:hover .snap-box-photo img{
 	transform: scale(1.04,1.04);
    -webkit-transform:scale(1.04,1.04);
    -moz-transform:scale(1.04,1.04);
    -ms-transform:scale(1.04,1.04);
    -o-transform:scale(1.04,1.04);
     
}

.model-jp-name {
    font-weight: bold;
    line-height:28px;    
}

.model-en-name{
    
}


/*------
	
Entertainment

------*/

.remodel-contents {
    border-bottom: 1px solid #111;
    padding-bottom: 40px;
}


.remodel-left {
	float: left;
    width: 48%;
}



.remodel-right {
    float: right;
    width: 48%;
    text-align: left;
    color: #fff;
    font-size:16px;
    line-height:32px;
}


.remodel-jp-name {
    margin: 2px 0 8px;
    font-size: 40px;
    letter-spacing: 0.2rem;
    line-height: 1em;
}


.remodel-headline {
    font-weight: bold;
    margin: 60px 0 6px 0;
}

.bsize {
    font-size:14px;
}


.audition {
    background:url("../images/audition-back.jpg") ;
	background-position: center center;
	background-size:cover;
    padding: 117px 0;
    color: #fff;
}

@media screen and (max-width: 480px) {

.audition {
    background:url("../images/audition-back-sp.jpg") ;
	background-position: center center;
	background-size:cover;
    padding: 117px 0;
    color: #fff;
}
    
}


.audition a {
    color: #fff;
}


/*------
	
company

------*/
.company-info {
    width: 60%;
    margin: 0 auto;
}



/* ---- table ---- */

table {
    border-collapse: collapse;
    width: 100%;
}

table th, table td {
    padding: 7px 0px;
    text-align: left;
    font-weight: normal;
}
table th {
    text-align: left;
    width: 30%;
}





.border-table {
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
  border-collapse: collapse;
  width: 100%;
  margin: 40px 0;
}
.border-table th,
.border-table td {
  border-bottom: 1px solid #222;
  padding: 20px 0;
}

.border-table td.time{
	font-weight: bold;
}
.sp {
	display:none;
}


/*ここで対応しているものも有る*/


@media screen and (max-width: 480px) {
  .border-table {
    border: none;
  }

  .border-table  tr {
    display: block;
    margin-bottom: 20px;
  }
  .border-table  td {

    display: block;
    padding: 10px 0;
    text-align: left;
    border-bottom: none;
  }
  
.border-table td.time{
	border-bottom: 1px solid #222;
}  
.pc {
	display:none;
}
#modal-content {
	display:none;
}
/*------
	
Entertainment

------*/

.remodel-contents {
    border-bottom: 1px solid #111;
    padding-bottom: 40px;
}


.remodel-left {
	float: none;
    width: 100%;
}



.remodel-right {
    float: none;
    width: 100%;
    text-align: left;
    color: #fff;
    margin: 94px 0 0 0;
    font-size: 12px;
    line-height: 24px;
}


.remodel-jp-name {
    margin: 0 0 12px;
    font-size: 20px;
    letter-spacing: 0.2rem;
}


.remodel-headline {
    font-weight: bold;
    margin-top: 24px;
}

.bsize {
    margin-top:8px;
}
    
}
/* ============================================================

service

============================================================ */


.service-icon {
    width: 100px;
    margin: 0 auto;
}

.icon-name {
    text-align: center;
    margin-bottom: 80px;
}

/* =================================

コンタクト・ページ

================================== */

.contact-form{
    width:60%;
    height:auto;
    margin: 0 auto;
    display:block;
    margin-top:36px;
    background-color: #f5f5f5;
}

.contact-form p {
    line-height:2.4em;
}

.content {
    width:100%;
    padding:0.6em 0.8em;
    font-weight: 600;
}

.content .em {
    color:#dc143c;
}

.content .em:before {
    content:" ";
}

.input {
    width:100%;
    padding: 0 1em;
    margin-top: -0.6em;
}

.contact-form .form-input {
    width:100%;
    background-color:#fff;
    padding-left:0.8em;
}

#form-submit {
    width:100%;
    padding:1.2em 0;
    text-align: center;
}

input.send{
    padding:1em;
    margin:0 auto;
    background-color: #fdd835;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}


/* ============================================================

footer

============================================================ */




#footer-area {
  
}


.information{
	border-bottom: 1px solid #ececec;
}

.information-border {
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}



.tel {
	display: block;
    float: left;
    width: 50%;
    height: 260px;
    padding-top: 115px;
    text-align: center;
    border-right: 1px solid #ececec;
    line-height:1.8em;
}

.mail {
	display: block;
    float: right;
    width: 50%;
    height: 260px;
    padding-top: 120px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
    transition: all .4s;
} 


.mail:hover {
	background: #000;
	color:#fff;
} 


footer {
    height: 260px;
    padding-top: 120px;
}

@media only screen and (max-width: 320px){
footer {
    height: auto;
    padding: 40px 12px 50px 12px !important;
    font-size:10px;
}
}

.foot-nav {
    float: left;
}


.address {
    float: right;
}
.print-btn {
	padding-top:10%;
	text-align:right;
}
.print-btn a{
	color:white;
}