@charset "UTF-8";

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

html{
overflow-x : hidden;
overflow-y : auto;
}

.sp {display: none; }





@media screen and (min-width: 500px), screen and (orientation: landscape) and (min-width: 768px) {



}




@media screen and (max-width: 829px), screen and (orientation: landscape) and (max-width: 830px) {

.pc {display: none !important;}
.sp {display: block !important;}

body {font-size:1.4rem;}

img.res {width:100%;}


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

header {padding:10px 0;text-align:center;height:50px;}
header .inner {width:100%;}
header .headlogo {position:static;width:80px;transition: .3s;left:0;}

.is-animation { height: 40px;}
.is-animation .headlogo {width:60px;}

#gnavi {display:none;}


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

#sidebar {
display:block;
position: fixed;
right: -300px;
top: 0;
height: 100%;
width: 300px;
color: #fff;
transition: .35s ease-in-out;
overflow-y:auto;
}

#nav_sp {margin:0 0 100px 0;}

/* サブメニューは開けない */
#nav_sp .sub-menu-head:after,
#nav_sp .sub-menu-nav {display: none;}
#nav-toggle {display: block;}

/* nav open */
.open {/*overflow: hidden;*/}
.open #overlay {display: block;}
.open #sidebar  {transform: translate3d(-300px,0,0);}

/* #nav-toggle close */
.open #nav-toggle span:nth-child(1) {top: 11px;transform: rotate(45deg);}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {top: 11px;transform: rotate(-45deg);}

/* z-index */
#overlay {z-index: 10;}
#sidebar {z-index: 300;}
#nav-toggle {z-index: 400;}



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

#mainvisual {background:url(../img/mainvisual.jpg) 50% 0 / cover;height:inherit;}
#mainvisual .inner { width:100%;margin:0 auto;position:relative;height:250px;}

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

video {display:none;}


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

#about { padding:50px 0;}
#about .inner { width:90%;margin:0 auto;}
#about .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3rem;}
#about .inner p {line-height:2;width:100%;margin:0 auto 60px auto;}

#about .flex {display: flex;flex-flow: row wrap;}

#about .left {order: 3;float:none;width:100%;margin:0 0 10px 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}
#about .center {order: 1;float:none;width:100%;margin:0 0 10px 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}
#about .right {order: 2;float:none;width:100%;margin:0 0 10px 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}

#about .left .pict,
#about .center .pict,
#about .right .pict {width:100%;margin:0;}

#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:90%;margin:0 auto;}
#live .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:20px;font-size:3rem;font-family: 'Fjalla One', sans-serif;}
#live .inner h3 {text-align:center;margin:0 0 0 0;letter-spacing:0;font-size:2rem;}
#live .inner h3.small {text-align:center;margin:0 0 0 0;letter-spacing:0;font-size:1.6rem;}

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

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

#live .inner video {width:100%;height:initial;display:block;margin:auto;}





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

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

#news .inner dl {border-bottom:1px dotted #ccc;}
#news .inner dl dt {float:none;width:100%;}
#news .inner dl dt img { width:60%;display:block;margin:0 auto 20px auto ;}
#news .inner dl dd {float:none;width:100%;margin:0 0 20px 0 ;}
#news .inner dl dd h3 {font-size:1.7rem;font-weight:bold;margin:0 0 30px 0;}
#news .inner dl dd h3 em { font-size:1.2rem;font-weight:normal;font-style:normal;}





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

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

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


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

#notes { background:#fff;padding:130px 0 50px 0;color:#000;}
#notes .inner { width:90%;margin:0 auto;line-height:2;}
#notes .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:1px;font-size:2.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:"●";}


/* SHOP
------------------------------------------------------------- */

#shop { background:#fff;padding:130px 0 50px 0;color:#000;}
#shop .inner { width:90%;margin:0 auto;line-height:2;}
#shop .inner h2 {text-align:center;margin:0 0 40px 0.4em;letter-spacing:10px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}

#shop dl.left {float:none;width:100%;margin:0 0 20px 0;}
#shop dl.left dt {margin:0 0 10px 0;text-align:center;}

#shop dl.right {float:none;width:100%;}
#shop dl.right dt {margin:0 0 10px 0;text-align:center;}




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

footer{}
footer .inner{ width:90%;margin:0 auto;padding:30px 0 30px 0;}

footer .inner p {padding:0;text-align:center;color:#8a7636;}


.sharebtn {display:table;margin:10px auto;}



/* END
------------------------------------------------------------- */
}