@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');

/* ------------------------------------------------
VISAL PHOTO COLLEGE  OFFICIAL SITE / layout css
MOD : 2021.1.31 
------------------------------------------------ */

* {margin: 0;padding: 0;}

html {font-size: 62.5%;width: 100%;}

body{
font-size: 1.5rem;
font-family: 'Noto Sans JP', sans-serif;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#000;
color:#fff;
line-height:1.7;
width: 100%;
}


.clearfix:after {
content:".";
height:0;
clear:both;
display: block;
visibility:hidden;
}


img {vertical-align:top;}

a:hover img{
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}

a {color:#fff;}
a:visited {color:#fff;}
a:hover {color:#f00}

a.btn {display:block;width:40%;padding:10px 30px;margin:30px auto;background:#ccc;border-radius:10px;text-align:center;text-decoration:none;font-size:1.8rem;}
a.btn:hover {background:#600;color:#fff;}




/* header
------------------------------------------------------------- */

header {width:100%;height:120px;background-color: rgba(0,0,0,0.9);position:fixed;z-index:300;transition: .3s;border-bottom:2px solid #8a7636;}
header .inner {width:600px;margin:auto;position:relative;}
header .headlogo {width:100px;transition: .3s;position:absolute;top:10px;left:10px;}
	
header ul#gnavi {position:absolute;top:50px;left:160px;color:#8a7636;list-style:none;font-size:1.8rem;white-space: nowrap;transition: .3s;font-family: 'Libre Baskerville', serif;}
header ul#gnavi li {display:inline;letter-spacing:5px;}
header ul#gnavi li:after {content:"　/　"}
header ul#gnavi li:last-child:after {content:""}

header a {color:#8a7636;text-decoration:none;}
header a:visited {color:#8a7636;text-decoration:none;}

.is-animation { height: 80px;}
.is-animation .headlogo {width:60px;top:10px;left:40px;}
.is-animation ul#gnavi {margin:0;top:25px;left:140px;}



/* KV
------------------------------------------------------------- */

#mainvisual { height:800px;padding:120px 0 0 0;background:url(../img/top/mainvisual_201911.jpg) 50% 100% no-repeat;}
#mainvisual .inner { width:1200px;margin:0 auto;position:relative;height:800px;}

.mainvisual {width:100%;padding:120px 0 0 0;}


video {width:100%;height:50%;overflow: hidden;padding:120px 0 0 0;vertical-align:top;}

#streaming { height:600px;background:#000;}
#streaming .inner { width:1200px;margin:0 auto;position:relative;height:600px;}



/* About
------------------------------------------------------------- */

#about { background:#fff;padding:50px 0;color:#8a7636;}
#about .inner { width:1000px;margin:0 auto;}
#about .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:20px;font-size:3.8rem;font-family: 'Libre Baskerville', serif;}
#about .inner .pict {width:100%;}

#about .inner p {line-height:2;width:640px;margin:0 auto 40px auto;}
#about .inner p.en  {color:#888;}
#about .inner hr {border:none;border-bottom:1px dotted #444;width:740px;margin:0 auto 40px auto;}

#about .flex {margin:30px 0 0 0;}
#about .left {float:left;width:300px;margin:0 50px 0 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}
#about .center {float:left;width:300px;margin:0 50px 0 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}
#about .right {float:left;width:300px;margin:0 ;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}

#about .left .pict,
#about .center .pict,
#about .right .pict {margin:0 0 20px 0;}

#about .flex span{font-size:2rem;}


#about  ul.snsicon { display:table;margin:0 auto;text-align:center;}
#about  ul.snsicon li {float:left;display:inline;display:block;padding:10px;margin:0 20px 0 0;width:20px;}
#about  ul.snsicon li:last-child {margin:0;}
#about  ul.snsicon li img {width:20px;}


/* live
------------------------------------------------------------- */

#live { background:#fff;padding:50px 0;color:#000;}
#live .inner { width:800px;margin:0 auto;}
#live .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:50px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}
#live .inner h3 {text-align:center;margin:0 0 0 0;letter-spacing:1px;font-size:3.0rem;}
#live .inner h3.small {text-align:center;margin:0 0 0 0;letter-spacing:0;font-size:2.4rem;}

#live .inner h4 {text-align:center;margin:0 0 20px 0;letter-spacing:1px;font-size:2.0rem;}
#live .inner h5 {text-align:center;margin:0 0 40px 0;letter-spacing:1px;font-size:1.8rem;}
#live .inner h6 {margin:0 0 20px 0;letter-spacing:1px;font-size:1.8rem;}

#live .inner .sold {text-align:center;margin:0 0 40px 0;letter-spacing:1px;font-size:2.0rem;font-weight:bold;color:#f00;}

#live .inner a {color:#666;}
#live .inner a:visited {color:#666;}
#live .inner a:hover {color:#f00}

#live .inner hr {border-top:none;margin:50px 0;}

#live .inner video {width:720px;height:405px;display:block;margin:auto;}

#live .inner input {border:solid 1px #ccc;padding:15px 30px;margin:20px auto 20px auto;font-size:1.8rem;text-transform:uppercase;font-weight:bold;color:#333;cursor:pointer;background:#ffd69c;display:table;}
#live .inner input:hover {background:#ff9600;color:#fff;}

#live .inner a.btn {display:block;width:80%;padding:10px 0;margin:20px auto;background:#ccc;border-radius:10px;text-align:center;text-decoration:none;font-size:1.6rem;}
#live .inner a.btn:hover {background:#600;color:#fff;}


/* NEWS
------------------------------------------------------------- */

#news { background:#666;padding:50px 0;color:#fff;}
#news .inner { width:800px;margin:0 auto;}
#news .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:50px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}

#news .inner dl {border-bottom:1px dotted #ccc;margin:0 0 30px 0;}
#news .inner dl dt { float:left;width:250px;}
#news .inner dl dt img { width:100%;}

#news .inner dl dd { float:right;width:520px;margin:0 0 20px 0 ;}

#news .inner dl dd h3 {font-size:2rem;font-weight:bold;margin:0 0 30px 0;}
#news .inner dl dd h3 em { font-size:1.4rem;font-weight:normal;font-style:normal;}

#news .inner .btn1 {display:inline-block;padding:6px 20px;margin:10px 0;border:1px solid #ccc;font-size:1.3rem;cursor:pointer;text-decoration:none;}
#news .inner .btn1:hover {border:1px solid #ccc;background:#444;color:#fff;}




/* intromovie
------------------------------------------------------------- */

#intromovie { background:#8a7636;padding:40px 0;color:#000;}
#intromovie .inner { width:800px;margin:0 auto;}
#intromovie .inner h2 {text-align:center;color:#fff;margin:0 0 40px 1em;letter-spacing:50px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}

#intromovie .inner .btn {display:table;margin:0 auto 0 auto;}
#intromovie .inner .btn1 {display:inline-block;padding:6px 20px;border:1px solid #ccc;font-size:1.6rem;cursor:pointer;text-decoration:none;}
#intromovie .inner .btn1:hover {border:1px solid #ccc;background:#5d3b10;color:#fff;}



/* sound
------------------------------------------------------------- */

#sound { background:#780808;padding:80px 0;color:#000;}
#sound .inner { width:800px;margin:0 auto;}
#sound .inner h2 {text-align:center;color:#fff;margin:0 0 40px 1em;letter-spacing:50px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}


/* notes
------------------------------------------------------------- */

#notes { background:#fff;padding:200px 0 50px 0;color:#000;}
#notes .inner { width:800px;margin:0 auto;line-height:2;}
#notes .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3.0rem;font-family: 'Fjalla One', sans-serif;}
#notes .inner h3 {text-align:center;margin:0 0 0 0;letter-spacing:1px;font-size:3.0rem;}

#notes .inner ul {margin:0 0 0 1em;list-style:none;}
#notes .inner ul li {padding:10px 0;border-bottom:1px dotted #ccc;}
#notes .inner ul li:before {content:"●";}



/* footer
------------------------------------------------------------- */

footer{background:#000;color:#ccc;font-size:1.4rem;}
footer .inner{ width:800px;margin:0 auto;padding:50px 0 50px 0;text-align:center;}

footer .inner a {color:#fff;}
footer .inner a:hover {color:#6a63a7;}

footer .inner p {letter-spacing:3px;font-size:1.2rem;color:#8a7636;}

.sharebtn {display:table;margin:10px 0;}
.twitter {display:inline;float:left;width:76px;margin:0 10px 0 0;}
.twitter-share-button{margin:0 10px 0 0;}
.fb-like {display:inline;}
.fb_iframe_widget > span {vertical-align: baseline !important;}


footer .inner  ul.snsicon { display:table;margin:0 auto;text-align:center;}
footer .inner  ul.snsicon li{float:left;display:inline;display:block;padding:10px;margin:0 20px 0 0;width:30px;border-radius:30px;border:2px solid #fff;}
footer .inner  ul.snsicon li:last-child {margin:0;}
footer .inner  ul.snsicon li img {width:30px;}



/* sidebar [SP MENU]
------------------------------------------------------------- */

#sidebar {
display:none;
font-size: 1.5rem;
padding-top: 80px;
width: 70%;
height: 100%;
position: fixed;
color: #5e9e2e;
background: #000;
text-align: center;
}
ul#nav_sp {display:none;}

#nav_sp ul {
list-style: none;
margin-left: 0;
}
#nav_sp > ul > li {
position: relative;
}

#nav_sp a {
color: #fff !important;
text-decoration: none !important;
display: block;
padding: 15px 0;
border-bottom:1px solid #666;
transition: background-color .3s linear;
}
#nav_sp a:hover {
text-decoration:none !important;
background: #8a7636;
color:#fff !important;
}

/* sub-menu */
#nav_sp .sub-menu-nav {
position: fixed;
background: #033560;
color: #fff;
top: 0;
padding-top: 20px;
left: 260px;
width: 0;
height: 100%;
overflow: hidden;
transition: width .2s ease-out;
}
#nav_sp .sub-menu-nav a,
#nav_sp .sub-menu:hover .sub-menu-nav {
width: 230px;
}

/* nav-toggle */
#nav-toggle {
display: none;
position: fixed;
top: 20px;
right: 15px;
height: 32px;
cursor:pointer;
}
#nav-toggle > div {
position: relative;
width: 32px;
}
#nav-toggle span {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #8a7636;
position: absolute;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}

#overlay {
display: none;
position: fixed;
background: rgba(0,0,0,.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}