@charset "utf-8";
/* CSS Document */


/* ------------------------------------
 * BASE
 * ------------------------------------ */

body {
	overflow-x: hidden;
	position: relative;
	width: 100%;
    color: #909090;
	font: 14px/2.0 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    letter-spacing: .08em;
	text-align: center;
	background: #0e0710;
}
article {
	clear: both;
	text-align: left;
}

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

@media (max-width: 767px) {
    .pc { display: none;}
    .sp { display: block;}
}

/* ------------------------------------
 * LINK
 * ------------------------------------ */
 
a {
	cursor: pointer;
	outline: none;
	color: #fff;
    transition: opacity .3s ease;
}
a:link,
a:visited {
	text-decoration: none;
	color: #fff;
}
a:hover {
    opacity: 0.8;
}
a img {
	border: 0;
}

/* ------------------------------------
 * HEADER
 * ------------------------------------ */

header {
	width:100%;
	text-align:center;
}

header h1 img {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 0;
  width: 100%;
}

/* ------------------------------------
 * CONTENTS
 * ------------------------------------ */

#content {
	position:relative;
	padding:0 0 40px;
    z-index: 1;
}
#content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 32vw 32vw 0 0;
    border-color: #19151b transparent transparent transparent;
    z-index: -1;
}
#content::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 32vw 32vw;
    border-color: transparent transparent #19151b transparent;
    z-index: -2;
}

.mainArea {
    padding: 60px 0 0;
}
.mainArea .mainTit{
    text-align: center;
    font-size: 23px;
    color: #fff;
    line-height: 1.5;
}
.mainArea .mainTit span{
    display: block;
    width: 100%;
    font-size: 15px;
    background: #fff;
    color: #0e0710;
    padding: 5px;
    margin: 0 0 10px 0;
    font-weight: bold;
}
.mainArea .tit{
    text-align: center;
    font-size: 16px;
    color: #fff;
    margin: 0 auto;
    border: #fff 1px solid;
    font-weight: bold;
    padding: 5px;
}

.mainArea h2.title span{
    display: block;
    font-size: 17px;
}
.mainArea dl .attentionList{
    margin: 0 0 20px 1em;
}

.mainArea dl .attentionList:last-of-type{
    /*margin: 0;*/
}
.mainArea .attentionList li{
    font-size: 13px;
    text-indent: -1em;
    margin: 0 0 5px 1em;
    line-height: 1.5;
}
.mainArea .attentionList li:last-child{
    margin: 0 0 0 1em;
}
.mainArea dl .box{
    margin: 0 0 30px 0;
}
.mainArea dl .box:last-of-type{
    margin: 0;
    padding: 25px;
    border: 1px solid #fff;
}
.mainArea dl a{
    word-break: break-all;
    text-decoration: underline;
    font-size: 12px;
}
.mainArea dl .bold{
display: block;
    font-weight: bold;
}

.mainArea dl .ph {
display: block;
    width: 300px;
    margin: 0 auto 20px;
    line-height: 0;
}
.mainArea dl .ph a{
    display: block;
}
.mainArea dl .ph img{
    width: 100%;
}

.detail {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 4%;
    text-align: left;
}
.detail section {
    padding: 0 0 80px;
}
.detail h2.title {
    position: relative;
    margin-bottom: 1em;
    padding: 0.2em;
    letter-spacing: .2em;
    text-align: center;
    background-color: #fff;
    color: #000;
    font-size: 22px;
}
.detail h2.title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 0;
    border-color: #0e0710 transparent transparent transparent;
}
.detail h2.title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent #0e0710 transparent;
}
.detail .heading_1 {
    text-align: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
}
.detail strong {
    display: block;
    font-weight: bold;
    color: #fff;
}
.detail span {
  display: inline-block;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

.detail dl {
    margin: 2em 0;
}
.detail dl dt {
  margin-bottom: 0.5em;
  text-align: left;
  font-size: 1.8rem;
  color: #fff;
  border-bottom: solid 1px #868686;
}
.detail dl dt .mini {
  font-size: 12px;
  margin-left: 15px;
}
.detail dl dd {
    padding-bottom: 2em;
}
.detail dl dd .price {
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
}
.detail dl dd .price.main {
  margin: 15px 0;
  padding: 17px 0;
  border-top: 1px solid #868686;
  border-bottom: 1px solid #868686;
  width: 90%;
}

.detail dl dd .artList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}
.detail dl dd .artList li {
  width: 30%;
  padding: 10px;
  margin: 5px;
}
.detail dl dd .artList .thumb {
}
.detail dl dd .artList .thumb img {
  width: 100%;
}
.detail dl dd .name {
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  margin: 5px auto 0;
}


/*----INFO----*/
.dl_area {
    max-width: 600px;
    background-color: #272329;
    margin: 0 auto 5%;
    padding: 3%;
    border: solid 1px #444247;
    border-radius: 1em;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.dl_area .dl_link {
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
    margin: 20px 0 0;
}
.dl_area .dl_link li {
    width: 50%;
    text-align: center;
    margin: auto;
}
.dl_area .dl_link li a,
.dl_area .dl_link li span {
    display: block;
    width: 90%;
    margin: 0 auto;
}
.dl_area .dl_link li a img,
.dl_area .dl_link li span img {
    width: 100%;
}

/*----NOTICE----*/
#notice ul {
    margin-top: 3em;
    font-size: 90%;
}
#notice ul li {
    padding-bottom: 1em;
    margin-bottom: 1em;
    line-height: 1.5;
    border-bottom: dotted 1px #3c3c3c;
}


/*----MOVIE----*/
#movie .list_movie {
    max-width: 600px;
    margin: 5% auto 0;
}
#movie .list_movie li {
    margin-bottom: 100px;
}
#movie .list_movie li p {
    margin: 10px 0 0;
    font-size: 11px;
    background-color: #272329;
    text-align: center;
}
#movie .player {
	position: relative;
	padding-top: 56.25%;
	width:100%;
}
#movie .player iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}


@media (max-width: 960px) {
header .inner {
    width:100%;
    background-size: 100% auto;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
}
header h1 img {
    padding: 0;
}
#content {
    font-size:100%;
    line-height:2;
}
.detail {
    width: 100%;
    padding: 5%;
}

.mainArea {
    padding: 40px 0 0;
}
.mainArea .mainTit span {
    display: block;
    width: 100%;
    font-size: 13px;
    padding: 3px;
}
.mainArea .mainTit {
    text-align: center;
    font-size: 15px;
}
.mainArea h2.title {
    font-size: 18px;
}
.mainArea h2.title span {
    display: block;
    font-size: 14px;
}
.mainArea dl .ph {
    display: block;
    width: 80%;
    margin: 0 auto 15px;
    line-height: 0;
}
.mainArea dl .ph img{
    width: 100%;
}
.mainArea .attentionList li {
    font-size: 12px;
}
.detail dl dd {
    padding-bottom: 20px;
}
.detail dl dd .price {
    font-size: 13px;
}
.detail dl dd .txt {
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.detail dl dd .txt:last-child {
    margin-bottom: 0;
}
.detail dl dt .mini {
    margin-left: 0;
}
.detail span {
    font-size: 13px;
}
.detail dl dd .artList li {
    width: 100%;
    padding: 6px 0;
    margin: 0;
}
.detail dl dd .name {
    font-size: 13px;
}
}


@media (max-width: 767px) {
    .dl_area {
        margin: 0 auto 10%;
        font-size: 1.3rem;
        padding: 5% 3%;
    }
}


/* ------------------------------------
 * FOOTER
 * ------------------------------------ */

footer {
	clear: both;
	padding:20px 0;
	width:100%;
	border-top: solid 1px #444247;
}

footer small {
	display:block;
    font-size: 10px;
}




/*--- clearfix ------------------*/

.detail ul:after,
#movie ul:after,
.sns_area ul:after,
header .detail:after,
.detail .box:after,
.detail .shopLink ul:after,
.detail .jk_box:after {
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    font-size: 0.1em;
    content: ".";
    visibility: hidden;
}




p.btn {
text-align: center;
margin: -20px auto 0px;
padding: 0px 0 80px;
}
p.btn a.btn_main {
display: block;
margin: 0 auto;
text-align: center;
color: #fff;
border-radius: 6px;
background: #3688e1;
font-size: 1.8rem;
max-width: 600px;
padding: 2%;
}
p.btn a.btn_main:hover {

}

@media (max-width: 960px) {

p.btn {
padding: 40px 0 65px;
}

p.btn.bottom {
margin: -70px auto 0px;
}

}

@media (max-width: 767px) {

p.btn {
padding:0 0 0px;
margin: 20px 0 50px;

}


p.btn.bottom {
margin: -70px auto 40px;
}


}