@charset "UTF-8";

/* --------------------------------------------------------------------- */
/* base */
/* --------------------------------------------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy);

*,html{
	margin: 0px;
	padding: 0px;
	}

html{
	font-size: 62.5%;
	}

body{
	margin: 0px;
	padding: 0px;
	line-height: 100%;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	-webkit-text-size-adjust: none;
	background-image: url("/images/bg.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;

}
	}

h1,h2,h3,h4,h5,h6 {
	font-size: 1em;
	line-height: 100%;
	margin: 0px;
	padding: 0px;
	font-weight:normal;
	}

article, aside, dialog, figure, footer, header, hgroup, menu, nav, address, section { display: block; }

::-moz-selection{
	background: #000;
	color: #fff;
	}

::selection{
	background: #000;
	color: #fff;
	}

a,
input,
button {
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    cursor: pointer;
}

img {
	border: none;
	margin: 0px;
	padding: 0px;
	height: auto;
	width: 100%;
	}

hr{
	display: none;
	}

div.clear{
	clear: both;
	height: 1px;
	}

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

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}

* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

:focus{
	outline: 0;
}



/* --------------------------------------------------------------------- */
/* base */
/* --------------------------------------------------------------------- */

#card{
	width: 768px;
	margin: 0px auto;
}

#cardInner{
	padding: 0px 20px;
}


#cardLogo{
	width: 128px;
	background: #fff;
	text-align: center;
	border-radius: 0px 0px 4px 4px;
	font-size: 0px;
	line-height: 0;
	margin: 0px auto;
}

#cardLogo img{
	width: 97px;
	padding: 20px 0px;
}

#cardContentsArea{
	background: #fff;
	border-radius: 4px;
	margin: 20px 0px 0px 0px;
}

#cardContentsInnerArea{
}

#cardContentsMenu{
	padding: 12px;
}

#cardContentsMenu ul{
	display: flex;
}

#cardContentsMenu ul li{
	width: 50%;
	list-style: none;
}

#cardContentsMenu ul li a{
	display: block;
	padding: 12px 0px;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	border-radius: 6px;
	border:3px solid #11374c;
	color: #11374c;
	position: relative;
}

#cardContentsMenu ul li a:after{
	content: "";
	width: 12px ;
	height: 10px;
	background: #000;
	position: absolute;
	top:6px;
	right: 6px;
	background: url("/images/blank.png");
	background-size: 12px 10px;
	background-repeat: no-repeat;
}

#cardContentsMenu ul li.about a{
	margin: 0px 6px 0px 0px;
}

#cardContentsMenu ul li.shop a{
	margin: 0px 0px 0px 6px;
}

#cardContentsTitleArea{
	text-align: center;
	padding: 0px 12px 0px 12px;
}

#cardContentsTitleArea h1{
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 1;
	font-weight: bold;
	margin: 0px 0px 8px 0px;
	color: #111;
}

#cardContentsTitleArea p{
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1;
	font-weight: normal;
	color: #383838;
}

#cardContentsTitleArea p span{
	font-weight: bold;
	color:#ff0000;
}

#cardContentsMovie{
	padding: 12px 12px 12px 12px;
}

#cardContentsMovieInner{
	position: relative;
	height: 441px;
}

#cardContentsMovie video{
	height: 441px;
	width: 100%;
	position: absolute;
	top: 0px;
}

#openingImage{
	display: block;
	font-size: 0px;
	line-height: 0;
	position: absolute;
	top: 0px;
	z-index: 999;
	height: 441px;
	width: 100%;
}

#finishImage{
	display: none;
	font-size: 0px;
	line-height: 0;
	position: absolute;
	top: 0px;
	height: 441px;
	width: 100%;
	z-index: 999;
}

#cardContentsSns{
	background: #11374c;
	padding: 12px;
	border-radius: 0px 0px 3px 3px;
	text-align: center;
	display: none;
}

#cardContentsSnsRead{
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1;
	font-weight: bold;
	color: #fff;
	padding: 0px 0px 12px 0px;
}

#cardContentsSnsMenu ul{
	list-style: none;
	display: flex;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

#cardContentsSnsMenu ul li.facebook{
	width: 33%;
	border-radius: 4px 0px 0px 4px;
	background: #3c5a99;
}

#cardContentsSnsMenu ul li.twitter{
	width: 34%;
	background: #1da1f2;
}

#cardContentsSnsMenu ul li.line{
	width: 33%;
	border-radius: 0px 4px 4px 0px;
	background: #00b900;
}

#cardContentsSnsMenu ul li a{
	text-decoration: none;
	padding: 10px 0px;
	display: block;
}

.snsImage img{
	width: 28px;
}

.snsRead{
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1;
	font-weight: bold;
	color: #fff;
	margin: 6px 0px 0px 0px;
}

#cp{
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1;
	font-weight: bold;
	color: #fff;
	text-align: center;
	padding: 20px 0px;
}


/* --------------------------------------------------------------------- */
/* sp */
/* --------------------------------------------------------------------- */

@media screen and (max-width: 767px){

#card{
	width: 375px;
	margin: 0px auto;
}

#cardContentsMovieInner{
	position: relative;
	height: 195px;
}

#cardContentsMovie video{
	width: 100%;
	height: 200px;
	position: absolute;
	top: 0px;
}

#openingImage{
	display: block;
	font-size: 0px;
	line-height: 0;
	position: absolute;
	top: 0px;
	z-index: 999;
	height: 195px;
}

#finishImage{
	display: none;
	font-size: 0px;
	line-height: 0;
	position: absolute;
	top: 0px;
	height: 195px;
	z-index: 999;
}







































}