@charset "utf-8";
* { margin: 0; padding: 0; font-size: 15px; line-height: 1.8em;}
ul {list-style:none}
img {vertical-align: middle;}

html {
	text-align: left;
                                background: url("../images/bg.png") right center no-repeat fixed;
                                background-size: contain
}
body {
	color: #000;
	margin: 0 auto;
	padding: 0;
	font-size: 15px;
	line-height: 1.6em;
	font-family: -apple-system, 'Montserrat', BlinkMacSystemFont, "Helvetica Neue", "Helvetica" , "Arial" ,"Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}		
* html body {
	font-size: 100%;
	padding-left: 1px;
}
*:first child+html body {
	font-size: 100%;
}
*:first child+html body {
	padding-left: 1px;
}

a { word-break: break-all; }
a:link,
a:visited {
	text-decoration: underline;
	font-weight: bold;
	font-size: inherit;
	transition: .3s;
	}
a:hover {
	text-decoration: underline;
	font-size: inherit;
                                cursor: pointer;
	}
a:active {
	text-decoration: none;
	font-size: inherit;
	text-decoration: none;
	color: #666;
	}
a.btn {
	font-weight: bold;
                                padding: 5px 12px;/*文字周りの余白*/
                                line-height: 1.2;
	text-decoration: none;
                                display: inline-block;
                                
                                text-align: center;
	border-radius: 6px;
                                border: 2px solid;
                                color: #fff;
                                border-color: #fff;
                                font-family:  'Montserrat', sans-serif;
}
a:link.btn, a:visited.btn {
	color:#fff;
}
a:hover.btn {
                                background: #fff;
}
img {
	border:0;
	max-width: 100%;
}
a:hover img { opacity: 0.8; }
p {
	margin: 1em 0;
	padding: 0;
}


h5 .anchor{
 padding-top:150px;
 margin-top:-200px;
}

h4 .anchor{
 padding-top:150px;
 margin-top:-200px;
}

h3 .anchor{
 padding-top:150px;
 margin-top:-200px;
}

h2 .anchor{
 padding-top:150px;
 margin-top:-200px;
}


hr {
	clear: both;
	visibility: hidden;
}
hr.white {
	clear: both;
	visibility: visible;
                                height: 8px;
                                margin: 0;
                                padding: 0;
                                border: 0px none;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom: 5px;
}
.title {
	font-family:  'Montserrat', sans-serif;
                                font-weight: 700;
                                letter-spacing: 2px;
}
.montserrat {
	font-family:  'Montserrat', sans-serif;
                                letter-spacing: 1px;
}
h1 {
	line-height: 1;
}
h2 {
	font-size: 24px;
	line-height: 1.333;
                                margin: 0 auto 2em;
}
h3 {
	font-size: 18px;
	line-height: 1.2;
                                font-weight: 400;
}
h4 {
	font-size: 18px;
	line-height: 1.2;
}
h5 {
	font-size: 18px;
	line-height: 1.2;
                                font-weight: normal
}
.little {
	font-size: 80%;
	line-height: 1.2;
}
.right {
	text-align: right;
}
.gray {
                                color: #666
}
									
.pink {color: #ff4ba8;						
}

.pinks {
	color: #ff4ba8;
	font-size: 75%;
}

.red {color: #850612;					
}


.bold {font-weight:bold
}

iframe {
	max-width: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}



.pc {
	display: none
}



  .loading {
    display: none;
    max-width: 100%;
    min-width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-size: cover;
  }
  .loading h1 {
    position: absolute;
    width: auto;
    top: 48%;
    left: 0;
    right: 0;
    bottom: auto;
    margin: auto;
                                text-align: center;
	font-family:  'Montserrat', sans-serif;
                                font-weight: 900;
                                font-size: 20px;
                                letter-spacing: 3px;
  }
  .loading .bg {
    width: 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.6;
    margin-left: 10%;
  }
  .loading .bg img {
    width: 100%;
  }





/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
                                font-size: 20px;
                                background-color: #000;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpBtn 0.5s forwards;
}
@keyframes UpBtn{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownBtn 0.5s forwards;
}
@keyframes DownBtn{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}




/* index ----------------------------------------*/
header#index_header {
	width: 100%;
                                position: relative;
                                margin: 0 auto 0;
                                padding: 50px 0 0;
                                text-align: center;
                                background: #000;
                                /*白背景のばあいは background: #fff; */
}

#index_header h1 {
                                position: absolute;
                                padding: 5%;
                                top: 48%;
}
#index_s_name {
                               display: none;
}


#index_newrelease, #index_newmovie, #whatsnew {
                                margin: 15px;
                                padding: 10px 20px;
                                line-height: 1em;
                                background: #fff;
                                border-radius: 5px;
}
#index_newrelease a h3, #index_newmovie h2 {
                                font-size: 21px;
                                font-weight: bold;
                                line-height: 1em;
                                margin: 0.5em auto 10px;
                                padding: 2px 0 5px;
                                border: 2px solid;
                                border-width: 2px 0;
                                text-align: center;
}
#index_newrelease {
                                text-align: center;
}
#index_newrelease h2 {
                                font-size: 21px;
                                margin: 1em auto;
}
#index_newrelease a {
                                text-decoration: none;
                                font-weight: normal;
                                font-size: 85%;
                                display: block;
}
#index_newrelease a:hover {
                                background: #eee
}
img#index_jacket {
                                margin: 0 auto 0.5em;
                                max-width: 200px;
}

#index_newmovie {
                                text-align: center;
}
#index_newmovie h2 span,#index_newmovie h2 span br {
                                line-height: 1em;
}
.movie {
                                margin: 0 auto 10px;
                                position: relative;
                                background: #000;
                               max-width: 400px;
}
.movie img {
                                opacity: 0.6;
}

.movie .fa {/*classがfaのアイコンに対して*/
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;/*余計な隙間を除く*/
  padding:0;/*余計な隙間を除く*/
  color: white;/*アイコン色*/
  font-size: 60px;/*サイズ*/
  }

.movie img {
  width: 100%;
  }


#whatsnew h2 {
                                margin: 1em 0 2em;
                                font-size: 21px;
                                text-align: center;
}
#whatsnew dl {
                                margin: 0 0 1em;
}

#whatsnew dl dt {
                                margin: 0 auto;
                                font-weight: bold;
                                color: #888;
                                font-size: 80%;
}
#whatsnew dl dt a {
                                font-size: 120%;
                                padding: 0 5px;
                                display: inline-block;
	text-decoration: none;
                                line-height: 1.2;
                                border-radius: 3px;
                                color: #fff;
}

#whatsnew dl dd {
                                margin: 0 0 1em;
                                padding: 0 0 0.5em;
                                line-height: 1.4em;
                                border-bottom: 1px solid
}

#whatsnew dl dd:last-child {
                                margin: 0;
                                border-bottom: none
}

footer {
                                margin: 20px 15px;
                                text-align: center;
                                line-height: 1;
                                font-size: 80%;
}
footer a:link {
                                color: #000
}
footer small {
                                font-size: 90%;
                                line-height: 1.4;
                                display: block;
                                margin: 1em auto 0;
}
footer a img {
                                border: none;
                                margin: 1em 0 0;
}

/* contents ----------------------------------------*/
main {
                                margin: 80px 5px;
                                padding: 0;
}
.contents {
                                margin: 0 0 3em;
                                padding: 15px;
                                background: #fff;
	border-radius: 5px;
}
article.main_contents {
                                margin: 0 15px 80px;
                                padding: 0;
                                overflow: hidden;
                                position: relative;
}
h1#maintitle {
                                font-size: 22px;
                                margin: 20px auto 30px;
                                padding: 0;
                                line-height: 0.8em;
                                position: relative;
	text-align: center;
                                margin-bottom: 2em;
                                letter-spacing: 2px;
	font-family:  'Montserrat', sans-serif;
                                font-weight: 500;
}
h1#maintitle:before {
                                content: '';
                                position: absolute;
                                bottom: -15px;
                                display: inline-block;
                                width: 60px;
                                height: 4px;
                                left: 50%;
                                -webkit-transform: translateX(-50%);
                                transform: translateX(-50%);
                                border-radius: 2px;
}

/* release ----------------------------------------*/

#release ol {
                                margin: 3em 0 0;
                                counter-reset: list-count;
                                list-style: none;
}
#release ol li {
                                list-style-type: decimal;
                                margin: 1em 0 1em 2em;
}

div.jacket {
                                margin: 0 auto 1em;
                                text-align: center;
}
div.jacket img{
                                max-height: 250px;
}
.release_contents div.jacket {
                                width: auto;
                                margin: 0 auto 1em;
                                padding: 5px;
}
.release_contents div.jacket img{
                                height: 200px;
}
.release_contents {
                                clear: both;
                                text-align: center;
                                margin: 0 auto 5em;
}
.release_contents h2, #movie h3 {
                                position: relative;
                                line-height: 1.4;
                                padding:0.25em 0.8em;
                                display: inline-block;
                                font-size: 20px;
                                margin: 1em auto 2em;
                                font-weight: normal;
}
.release_contents h2, .release_contents h3 {
                                margin: 0 auto 1em;
                                line-height: 1
}
#movie h3 {
                                margin: 1em auto;
}

.release_contents h2:before, .release_contents h2:after, #movie h3:before, #movie h3:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}

.release_contents h2:before, #movie h3:before {
  border-left: solid 1px;
  border-top: solid 1px;
  top:0;
  left: 0;
}

.release_contents h2:after, #movie h3:after {
  border-right: solid 1px;
  border-bottom: solid 1px;
  bottom:0;
  right: 0;
}
.release_contents h3 {
                                font-size: 18px;
                                line-height: 1.4;
}
.release_contents p {
                                font-size: 18px;
                                line-height: 1.4;
                                font-size: 80%
}

/* info ----------------------------------------*/
ul#page-link {
                                margin: 0 0 1em;
}
ul#page-link li {
                                display: inline-block;
                                text-align: center;
                                margin: 0 5px;
                                line-height: 1em
}
ul#page-link li a {
                                color: #fff;
	text-decoration: none;
                                line-height: 1em;
                                padding: 5px 10px 5px 10px;
                                margin: 2px 0;
	border-radius: 3px;
                                display: inline-block;
	font-family:  'Montserrat', sans-serif;
                                font-weight: 700;
}
ul.info_contents li {
                                margin: 0 0 1em 0;
                                padding: 0 0 1em;
                                border-bottom: 1px solid;
}
ul.info_contents {
                                margin: 0 0 3em;
}

#info h2, #movie h2, h1.release_title {
                                position: relative;
                                padding: 0.25em 1em;
                                border-top: solid 2px;
                                border-bottom: solid 2px;
                                margin: 2em 0 1em;
	font-size: 24px;
	line-height: 1.333;
                                margin: 1em auto 2em;
}
#info h2:before, #info h2:after, #movie h2:before, #movie h2:after, h1.release_title:before, h1.release_title:after  {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
}
#info h2:before, #movie h2:before, h1.release_title:before {
  left: 7px;
}
#info h2:after, #movie h2:after, h1.release_title:after {
  right: 7px;
}
#movie h2 {
                                margin: 2em auto 1em;
}


#info h3 {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
                                margin: 0 auto 10px;
  display: inline-block;
  top:0;
}

#info h3:before, #info h3:after { 
  position: absolute;
  top: 0;
  content:'';
  width: 8px;
  height: 100%;
  display: inline-block;
}
#info h3:before {
  border-left: solid 1px black;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  left: 0;
}
#info h3:after {
  content: '';
  border-top: solid 1px black;
  border-right: solid 1px black;
  border-bottom: solid 1px black;
  right: 0;
}

/* movie ----------------------------------------*/
.movie_contents {
                                margin: 0 0 2em;
                                text-align: center;

}

/* profile ----------------------------------------*/
#profile img {
                                display: block;
                                margin: 0 auto 1em;
                                width: 250px;
}
#profile h2 {
                                text-align: center;
}
ul.link li {
                                margin: 0 0 1em;
}



/*768px以上 ----------------------------------------*/

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


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



}


/*990px以上 ----------------------------------------*/

@media screen and (min-width:980px){

.loading h1 {
  display: none;
                                font-size: 30px;
                                letter-spacing: 5px;
}

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.6s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(130px);
  }

  to {
    opacity: 1;
	transform: translateY(10px);
  }
}


header#index_header {
                                margin: 0;
                                padding: 0;
}
#index_photo {
                                margin: 0 auto;
                                padding: 0;
                                max-width: 1180px;
}
#headerContents {
                                max-width: 1180px;
                                margin: 0 auto;
                                position: relative;
}
#index_header h1 {
                                padding: 0;
                                top: 10px;
                                left:0; right:0;
                                margin: auto;
                                max-width: 850px;
}
#index_s_name {
                                display: block;
                                position: absolute;
                                width: 280px;
                                top: 130px;
                                left: 180px;
}
#index_newrelease {
                                width: 940px;
                                background: rgba(0,0,0,0.7);
                                color: #fff;
                                height: 140px;
                                margin: -190px auto 40px;
                                position: relative;
                                z-index: 100;
                                text-align: left;
                                padding: 20px;
}
#index_newrelease a {
                                display: inline-block;
                                vertical-align: top;
}
#index_newrelease a:hover {
                                background: none;
                                opacity: 0.8;
}
#index_newrelease h2 {
                                display: inline-block;
                                vertical-align: top;
                                text-align: left;
                                border:none;
                                font-size: 25px;
                                font-weight: normal;
                                padding: 0;
                                margin: 45px 20px 0 0;
}
img#index_jacket {
                                display: inline-block;
                                vertical-align: top;
                                height: 140px;
                                padding: 0;
                                margin: 0 10px 0 0;
}

#index_newrelease div {
                                display: inline-block;
                                vertical-align: top;
                                padding: 0;
                                margin: 0;
                                width: 540px
}
#index_newrelease a h3 {
                                font-size: 26px;
                                font-weight: normal;
                                text-align: left;
                                border-width: 0 0 1px;
}
#index_newmovie h2 {
                                padding: 5px 0;
}

#index_newmovie {
                                margin: 0;
                                line-height: 1em;
                                width: 320px;
                                float: right;
}
#whatsnew {
                                margin: 0;
                                padding: 10px 20px 40px;
                                width: 560px;
}
footer {
                                margin: 50px auto;
}
footer small {
                                display: inline;
}



main {
                                margin: 80px auto;
                                padding: 0;
                                width: 980px;
}
main#index_main {
                                margin: 0 auto;
                                padding: 0;
                                width: 980px
}

/* contents ----------------------------------------*/
.contents {
                                margin: 0 10px 50px;
                                padding: 50px 50px;
                                width: 650px;
}
article.main_contents {
                                margin: 0 0 80px;
                                padding: 0;
}

h1#maintitle {
                                font-size: 32px;
                                letter-spacing: 10px;
                                margin: 20px auto 100px;       
}


div.buy {
                                border: 1px solid #333;
                                padding: 5px 10px 0;
                                background: #444
}

/* release ----------------------------------------*/
.release_contents h2, .release_contents h3 {
                                margin: 2em auto 1em;
                                line-height: 1
}
div.jacket {
                                width: 250px;
                                max-height: 250px;
                                margin: 0 0 0 2em;
                                float: right;
}
.release_contents div.jacket {
                                width: auto;
                                float: left;
                                padding: 0;
                                margin: 0 0 1em 0;
                                width: auto;
                                min-width: 280px;
}
.release_contents div.jacket img{
                                width: auto;
                                height: 250px;
}
.release_contents {
                                min-height: 250px;
}


/* info ----------------------------------------*/
ul.info_contents li {
                                margin: 0 0 1.5em;
                                padding: 0 0 1.5em;
}
/* profile ----------------------------------------*/
#profile h2 {
                                text-align: left;
}
#profile img {
                                display: block;
                                margin: 0 0 0 1em;
                                width: 250px;
                                float: right;
}

}