/* reset */
html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, label, table, tr, td, th {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
    line-height:100%;
	}

body{line-height: 1;}

ol, ul{list-style: none;}

table {
	border-collapse: collapse;
	border-spacing: 0;
	}

header,footer,nav,article,section,aside{display: block;}

/*
 * Copyright (C) 2014 Adobe Systems Incorporated
 *      https://github.com/adobe-fonts/source-han-sans/tree/master
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@font-face {
   font-family: 'notosans_b_web';
   src: url('../notosans_b_web.woff') format("woff");
}

@font-face {
   font-family: 'notosans_m_web';
   src: url('../notosans_m_web.woff') format("woff");
}

/*
 * "ipaexm" licensed under the IPA Font License Agreement v1.0
 * http://ipafont.ipa.go.jp/
 * http://ipafont.ipa.go.jp/ipa_font_license_v1.html
 */

@font-face {
	font-family: 'ipaexm';
	src: url('../ipaexm.woff') format('woff');
}

body{
    font-family:'notosans_m_web','Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    background:#000000;
}

a{
	color:#c7161d;
	font-style:normal;
	text-decoration:none;
	outline:none;
}

a:link {
	color:#c7161d;
	font-style:normal;
	text-decoration:none;
}

a:visited {
	color:#c7161d;
	text-decoration:none;
}

a:hover {
	color:#c7161d;
	font-style:normal;
	text-decoration:underline;
}

a:active {
	text-decoration:underline;
}
.back-main {
    background:url(images/back_main.jpg) no-repeat top center #000000;
    background-attachment:fixed;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* common */
.forsp {
    display:none;
}


/* menu */
.menu-width {
    width:100%;
	background:#2b2b2b;
    position:fixed;
    z-index:999999;
}

.menu-box {
	width:1000px;
    margin:0 auto;
}

.menu {
	display:flex;
    justify-content:center;
    margin-top:0px;
	display:-webkit-flex; /* Safari */
    -webkit-justify-content:center; /* Safari */
}

.bold {
    width:1000px;
    margin:0 auto;
}

.for-pc {
    padding:10px 0px 10px 0px;
}

/* scrollInTurn */

/* page-top */
#pageTop {
    position:fixed;
    right:10px;
    bottom:10px;
    text-align:center;
    background-color:rgba(0,0,0,0.75);
    border-radius:25px;
}

#pageTop:hover{
    background-color:#404040;
    transition:background-color 0.1s linear;
    -webkit-transition:background-color 0.1s linear;
}

#pageTop a{
    padding:15px 12px 10px 12px;
    text-decoration:none;
    display:block;
    cursor:pointer;
}

.yajirushi {
	width:12px;
    height:12px;
    border-left:4px solid #ffffff;
    border-top:4px solid #ffffff;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}

/* main */
body {
	background:url(images/sakuhin_back.jpg) no-repeat center bottom #5c6063;
    background-attachment:fixed;
}
.wrapper {
    width:960px;
	margin:0 auto;
}
.main {
    width:100%;
}
h1 {
    width:100%;
    padding-top:52px;
}
.sakuhin {
    width:100%;
    text-align:center;
    color:#ffffff;
    margin:0 auto;
    margin-bottom:40px;
    text-shadow:0px 0px 5px #000000;
}
.sakuhin-img {
	margin:0 auto;
    margin-bottom:40px;
    box-shadow:0px 0px 5px #000000;
    background: #000000;
}
.sakuhin-title {
	width:980px;
    margin:0 auto;
    font-size:22px;
    font-weight:bold;
    margin-bottom:10px;
}
.sakuhin-cap {
	width:980px;
    margin:0 auto;
    font-size:12px;
}
.about {
    width:680px;
    font-size:15px;
    text-align:left;
    color:#ffffff;
    float:right;
}
.story {
	width:640px;
    padding:20px;
    background:#ffffff;
    margin-bottom:20px;
    box-shadow:0px 0px 5px #000000;
}
.story p {
    line-height:22px;
    color:#000000;
}
.credit-box {
    width:680px;
    margin-bottom:10px;
}
.credit-bt {
	width:680px;
    margin-bottom:20px;
    box-shadow:0px 0px 5px #000000;
}
.credit-bt li {
    float:left;
}
.credit-bt li a{
	display: block;
    font-size:15px;
	color: #ffffff;
    font-weight:bold;
	text-decoration: none;
    text-align:center;
    text-shadow:0px 0px 5px #000000;
    background-color:rgba(0,0,0,0.5);
    transition-property:background;
    transition-duration:0.25s;
    transition-timing-function:linear;
	transition-delay:0;
    -moz-transition-property:background;
    -moz-transition-duration:0.25s;
    -moz-transition-timing-function:linear;
	-moz-transition-delay:0;
    -webkit-transition-property:background;
    -webkit-transition-duration:0.25s;
    -webkit-transition-timing-function:linear;
	-webkit-transition-delay:0;
    -o-transition-property:background;
    -o-transition-duration:0.25s;
    -o-transition-timing-function:linear;
	-o-transition-delay:0;
	-ms-transition-property:background;
    -ms-transition-duration:0.25s;
    -ms-transition-timing-function:linear;
	-ms-transition-delay:0;
}
.credit-bt li a:hover{
	color:#ffffff;
	font-style:normal;
	text-decoration:none;
    background-color:rgba(0,0,0,0);
}
.credit-bt1 {
    width:226px;
    background:url(images/credit-bt1.jpg) no-repeat center center;
	background-size:cover;
}
.credit-bt3 {
    width:227px;
    background:url(images/credit-bt3.jpg) no-repeat center center;
	background-size:cover;
}
.credit-bt4 {
    width:227px;
    background:#4b68b8;
}
.credit-hp {
    width:680px;
    background:url(images/credit-hp.jpg) no-repeat center center;
	background-size:cover;
}
.credit-bt1 a, .credit-bt2 a, .credit-bt3 a, .credit-bt4 a {
	padding:40px 0px;
}
.credit-hp a {
    padding:92px 0px;
}
.credit-text-box {
	width:680px;
    margin-bottom:40px;
}
.credit-text-box p {
    text-align:center;
    color:#000000;
    line-height:175%;
}
.credit-text-box h6 {
	color:#000000;
	font-size:14px;
    font-weight:bold;
    margin-bottom:10px;
    text-align:center;
}
.credit-cast {
	width:290px;
    text-align:left;
    line-height:20px;
    padding:20px;
    margin-right:20px;
    float:left;
    background:#ffffff;
    box-shadow:0px 0px 5px #000000;
    margin-bottom:20px;
}
.credit-staff {
	width:290px;
    color:#000000;
    text-align:center;
    padding:20px;
    float:left;
    background:#ffffff;
    box-shadow:0px 0px 5px #000000;
    margin-bottom:20px;
}
.credit-staff-box {
    margin-left:22px;
}
.credit-staff-box-left {
    float:left;
    text-align:right;
    line-height:20px;
}
.credit-staff-box-right {
    float:left;
    text-align:left;
    line-height:20px;
}
.credit-staff-ex {
	text-align:center;
    line-height:20px;
}
.credit-thanks {
    width:640px;
    text-align:left;
    font-size:12px;
    line-height:18px;
    padding:20px;
    float:left;
    background:#ffffff;
    box-shadow:0px 0px 5px #000000;
}

/*  sidemenu */
.side-menu {
    width:240px;
    margin-right:40px;
    float:left;
    line-height:100%;
}

.side-menu li {
    margin-bottom:20px;
    background:#ffffff;
    box-shadow:0px 0px 5px #000000;
}
.tohpmain a {
	display:block;
    width:240px;
    height:336px;
    background:url(../images/b5_chirashi.jpg) no-repeat center center;
    background-size:cover;
    border:1px solid #666666;
}
.todaigaku a {
	display:block;
    width:240px;
    height:74px;
    background:url(../images/todaigaku.jpg) no-repeat center center;
}
.copyright {
    width:960px;
    margin:0 auto;
    color:#ffffff;
    font-size:9pt;
    text-align:center;
    margin-top:10px;
    margin-bottom:10px;
}

/************************
メディアクエリ設定 0〜960
************************/
@media screen and (min-width: 0px) and (max-width: 960px) {
/* common */
.wrapper {
    width:100%;
    margin:0 auto;
    z-index:100;
}

.forsp {
    display:block;
}

.menu-width {
    display:none;
}

.menu-box {
	display:none;
}

.menu {
	display:none;
}

.bold {
	display:none;
}

.for-pc {
    padding:0px;
}

.dropdown {
    z-index:999999;
    display:block;
    
}


/* top */
.pattern {
	display:none;
}

video {
	display:none;
}

.video-back {
	background:url(images/video.jpg) top center #2b2b2b;
    background-size:cover;
}

.jsff-logo {
	width:290px;
    height:425px;
    background:url(images/jsff_logo_sp.png) no-repeat;
    background-position: center bottom;
    margin:0 auto;
}

.jsff-logo img {
	width:75px;
    height:75px;
    position:relative;
    top:388px;
    left:220px;
    z-index:0;
    animation: free 5s ease 0s infinite normal;
    -webkit-animation: free 5s ease 0s infinite normal;
}

@keyframes free {
0% {transform:scale(0.85,0.85);}
5% {transform:scale(1,1);}
98% {transform:scale(1,1);}
100% {transform:scale(0.85,0.85);}
}

@-webkit-keyframes free {
0% {-webkit-transform:scale(0.85,0.85);}
5% {-webkit-transform:scale(1,1);}
98% {-webkit-transform:scale(1,1);}
100% {-webkit-transform:scale(0.85,0.85);}
}


/* parallax */
.imageHolder div {
	width:100%;
    height:100%;
	position: relative;
    background:url(images/dot.gif);
}


/* scrollInTurn */

/* page-top */
#pageTop {
    position:fixed;
    right:10px;
    bottom:10px;
    text-align:center;
    background-color:rgba(0,0,0,0.75);
    border-radius:25px;
}

#pageTop:hover{
    background-color:#404040;
    transition:background-color 0.1s linear;
    -webkit-transition:background-color 0.1s linear;
}

#pageTop a{
    padding:15px 12px 10px 12px;
    text-decoration:none;
    display:block;
    cursor:pointer;
}

.yajirushi {
	width:12px;
    height:12px;
    border-left:4px solid #ffffff;
    border-top:4px solid #ffffff;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}


/* main */
.wrapper {
    width:320px;
	margin:0 auto;
}
.main {
    width:100%;
}
h1 {
    background:none;
    padding-top:50px;
}
.sakuhin-img {
    margin-bottom:20px;
    box-shadow:none;
    background: #000000;
}
.sakuhin-img img {
	max-width: 100%;
    height:auto;
}
.sakuhin {
	max-width: 100%;
    text-align:center;
    color:#ffffff;
    margin:0 auto;
    margin-bottom:20px;
    text-shadow:none;
}
.sakuhin-title {
	width:320px;
    margin:0 auto;
    font-size:16px;
    font-weight:bold;
    margin-bottom:10px;
}
.sakuhin-cap {
	width:320px;
    margin:0 auto;
    font-size:12px;
}
.about {
    width:300px;
    font-size:14px;
    text-align:left;
    color:#ffffff;
    float:none;
    margin:0px 10px 10px 10px;
}
.story {
	width:260px;
    padding:20px;
    background:#ffffff;
    margin-bottom:10px;
    box-shadow:none;
}
.story p {
    line-height:22px;
    color:#000000;
}
.credit-box {
    width:300px;
    margin:0px;
}
.credit-bt {
	width:300px;
    margin:0px 0px 10px 0px;
    box-shadow:none;
}
.credit-bt li {
    text-align:center;
    float:none;
    margin-bottom:-1px;
}
.credit-bt li a{
	display: block;
    font-size:14px;
	color: #ffffff;
    font-weight:bold;
	text-decoration: none;
    text-shadow:0px 0px 5px #000000;
    background-color:rgba(0,0,0,0.5);
    border:1px solid #666666;
    transition-property:background;
    transition-duration:0.25s;
    transition-timing-function:linear;
	transition-delay:0;
    -moz-transition-property:background;
    -moz-transition-duration:0.25s;
    -moz-transition-timing-function:linear;
	-moz-transition-delay:0;
    -webkit-transition-property:background;
    -webkit-transition-duration:0.25s;
    -webkit-transition-timing-function:linear;
	-webkit-transition-delay:0;
    -o-transition-property:background;
    -o-transition-duration:0.25s;
    -o-transition-timing-function:linear;
	-o-transition-delay:0;
	-ms-transition-property:background;
    -ms-transition-duration:0.25s;
    -ms-transition-timing-function:linear;
	-ms-transition-delay:0;
}
.credit-bt li a:hover{
	color:#ffffff;
	font-style:normal;
	text-decoration:none;
    background-color:rgba(0,0,0,0);
}
.credit-bt1 {
    width:300px;
    background:url(images/credit-bt1.jpg) no-repeat center center;
	background-size:cover;
}
.credit-bt3 {
    width:300px;
    background:url(images/credit-bt3.jpg) no-repeat center center;
	background-size:cover;
}
.credit-bt4 {
    width:300px;
    background:#4b68b8;
}
.credit-hp {
    width:300px;
    background:url(images/credit-hp.jpg) no-repeat center center;
	background-size:cover;
}
.credit-bt1 a, .credit-bt3 a, .credit-bt4 a {
	padding:40px 0px;
}
.credit-hp a {
    padding:80px 0px;
}
.credit-text-box {
	width:300px;
    margin:0px;
}
.credit-text-box p {
    text-align:center;
    color:#000000;
    line-height:175%;
}
.credit-text-box h6 {
	color:#000000;
	font-size:14px;
    font-weight:bold;
    margin-bottom:10px;
    text-align:center;
}
.credit-cast {
	width:260px;
    text-align:left;
    line-height:20px;
    padding:20px;
    margin:0px 0px 10px 0px;
    float:none;
    background:#ffffff;
    box-shadow:none;
}
.credit-staff {
	width:260px;
    text-align:left;
    line-height:20px;
    padding:20px;
    margin:0px 0px 10px 0px;
    float:none;
    background:#ffffff;
    box-shadow:none;
}
.credit-staff-box {
	width:240px;
	margin:0 auto;
}
.credit-staff-box-left {
    float:left;
    text-align:right;
    line-height:20px;
}
.credit-staff-box-right {
    float:left;
    text-align:left;
    line-height:20px;
}
.credit-staff-ex {
	text-align:center;
    line-height:20px;
}
.credit-thanks {
    width:260px;
    text-align:left;
    font-size:12px;
    line-height:18px;
    padding:20px;
    margin:0px;
    float:none;
    background:#ffffff;
    box-shadow:none;
}

/*  sidemenu */
.side-menu {
    display:none;
}
.copyright {
    width:300px;
    margin:0 auto;
    color:#ffffff;
    font-size:8pt;
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    line-height:150%;
}
}}