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

@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);

/* clearfix */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* 画像センタリング */

.cr {margin:0 auto;}
.cr5 {margin:10px auto;}
.cr10 {margin:10px auto;}
.cr20 {margin:20px auto;}
.cr30 {margin:30px auto;}

.cr15o {margin:15px auto 0;}
.cr20o {margin:20px auto 0;}

.cr15u {margin:0 auto 15px;}
.cr20u {margin:0 auto 20px;}
.cr50up {margin:0 auto; padding-bottom:50px;}



/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/* ページトップ */

#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 1.4em;
	font-weight:bold;
	z-index:10000;
}
#page-top a {
	background: #eb6d9a;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 30px 0;
	text-align: center;
	display: block;
	border-radius: 10px;
}
#page-top a:hover {
	text-decoration: none;
	background: #ff3980;
}

/* FireFoxFadeブレ防止 */

img { display:block; box-shadow: #000 0 0 0; }


/* 全体・枠作り */

html,body {
  height:100%;
}

img { display:block; }


body {
	font-family: Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size:62.5%;
	text-align:center;
	background:url(../img/grand_bg.png) right top repeat;
}

#PageWrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	width:100%;
}

.mainarea {
	width:100%;
	height:860px;
	background:url(../img/mainvisual_bg.jpg) center center no-repeat;
	background-size:cover;
	position:relative;
	overflow:hidden;
}

#Mainvisual {
	max-width:1400px;
	min-width:1000px;
	height:860px;
	margin:0 auto;
	background:url(../img/mainvisual.jpg) center top no-repeat;
	background-size:cover;
	position:relative;
}

header {
	width:100%;
	height:80px;
	position:absolute;
	left:0;
	top:0;
}

header.subpage {
	background-color:rgba(255,255,255,0.9);
	position:fixed;
	z-index:9999;
}

.head_logo {
	background:url(../img/10mile.png) left top no-repeat;
	width:100px;
	height:61px;
	position:relative;
	left:10px;
	top:4px;
	z-index:9999;
}

.head_logo a {
	width:100px;
	height:61px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}

.head_logo_katahane {
	background:url(../img/sub/sub_katahane.png) left top no-repeat;
	width:67px;
	height:70px;
	position:relative;
	left:10px;
	top:5px;
	text-indent:-9999px;
	overflow:hidden;
}

.head_logo_katahane a {
	width:240px;
	height:70px;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
}

#Menu {
	max-width:1600px;
	min-width:1000px;
	height:80px;
	margin:0 auto;
	position:relative;
	z-index:1000;
}

#Menu ul {
	width:586px;
	position:absolute;
	right:255px;
	top:18px;
}

#Menu ul li {
	float:left;
	margin-right:36px;
}

.twitter {
	width:120px;
	height:25px;
	position:absolute;
	top:28px;
	right:5px;
}

.facebook {
	width:120px;
	height:25px;
	position:absolute;
	top:28px;
	right:125px;
}

.mainvisual_undergradation {
	width:200%;
	height:150px;
	position:absolute;
	left:-50%;
	bottom:0;
	z-index:5;
	box-shadow:0 -90px 50px rgba(7,27,39,0.6) inset;
}

.catch {
	background:url(../img/catch.png) left bottom no-repeat;
	background-size:100%;
	width:750px;
	max-width:50%;
	height:57px;
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	left:0;
	top:47%;
	z-index:10;
}

.sellday {
	width:48%;
	height:136px;
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	right:1%;
	bottom:22px;
	background-size:100%;
	z-index:10;
}

.sellday img {
	width:100%;
}

.diary {
	width:205px;
	height:196px;
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	right:1%;
	bottom:180px;
	z-index:10;
}

.event {
	width:205px;
	height:196px;
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	right:1%;
	bottom:390px;
	z-index:10;
}

.title {
	background:url(../img/main_logo.png) left bottom no-repeat;
	width:50%;
	height:180px;
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	left:0;
	bottom:32px;
	z-index:10;
}


.top_dl {
	background:url(../special/top_dl02.png) left top no-repeat;
	width:500px;
	height:43px;
	position:absolute;
	left:0;
	bottom:220px;
	z-index:10;
}

#Topics {
	width:100%;
	padding-top:50px;
}

#Topics ul {
	width:998px;
	margin:0 auto;
}

#Topics ul li {
	width:230px;
	height:350px;
	float:left;
	box-shadow:2px 2px 4px rgba(0,0,0,0.4);
	margin-bottom:36px;
}

.mr26 {
	margin-right:26px;
}

#Rireki {
	width:100%;
	height:420px;
	padding-bottom:280px;
	background-color:#ededed;
	box-shadow:0 3px 4px rgba(7,27,39,0.15) inset;
}

.rireki_head {
	background:url(../img/whatsnew_heAd.png) center center no-repeat;
	width:100%;
	height:136px;
	text-indent:-9999px;
	overflow:hidden;
}

.logline01 {
	width:100%;
	height:30px;
	background-color:#e2e2e2;
	font-size:1.6em;
}

.logline02 {
	width:100%;
	height:30px;
	font-size:1.6em;
}

.logtxt {
	width:780px;
	height:30px;
	margin:0 auto;
	line-height:30px;
	text-align:left;
	color:#6a6a6a;
}

.logtxt span{
	color:#d88484;
	font-weight:bold;
}

.logtxt a {
	color:#116ca4;
	text-decoration:none;
}

.logtxt a:hover {
	text-decoration:underline;
}

.rireki_twitter {
	width:76px;
	height:76px;
	margin:28px auto;
}

footer {
	width:100%;
	min-width:1000px;
	height:275px;
	position: absolute;
	bottom: 0;
	*left:-1px;
	background-color:#3c2929;
}

.staff {
	color:#c2c2c2;
	text-align:center;
	line-height:1.6;
	font-size:1.5em;
	margin-bottom:24px;
}

.footer_head {
	background:url(../img/footer_txt.png) center center no-repeat;
	width:100%;
	height:110px;
	text-indent:-9999px;
	overflow:hidden;
}

.staff span {
	font-size:70%;
}

.banner {
	width:200px;
	height:40px;
	background:#FFF;
	margin:0 auto;
}

* html footer {
	bottom:expression(document.getElementById("PageWrapper").offsetHeight % 2 == 0 ? 0 : -1);
}



.snip1445 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  width: 230px;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
}
.snip1445 *,
.snip1445 *:before,
.snip1445 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.55s ease;
  transition: all 0.55s ease;
}
.snip1445 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
}
.snip1445 figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
}
.snip1445 figcaption:before,
.snip1445 figcaption:after {
  height: 5px;
  width: 400px;
  position: absolute;
  content: '';
  background-color: #ffffff;
}
.snip1445 figcaption:before {
  top: 0;
  left: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.snip1445 figcaption:after {
  bottom: 0;
  right: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.snip1445 figcaption div:before,
.snip1445 figcaption div:after {
  width: 5px;
  height: 400px;
  position: absolute;
  content: '';
  background-color: #ffffff;
}
.snip1445 figcaption div:before {
  top: 0;
  left: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.snip1445 figcaption div:after {
  bottom: 0;
  right: 0;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.snip1445 h4 {
  margin: 0;
  text-transform: uppercase;
  text-indent:-9999px;
  overflow:hidden;
}
.snip1445 h4 {
  display: block;
  font-weight: 700;
  width:230px;
  height:350px;
  color: #000000;
}
.snip1445 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.snip1445:hover img,
.snip1445.hover img {
  zoom: 1;
  filter: alpha(opacity=80);
  -webkit-opacity: 0.8;
  opacity: 0.8;
}
.snip1445:hover figcaption:before,
.snip1445.hover figcaption:before,
.snip1445:hover figcaption:after,
.snip1445.hover figcaption:after,
.snip1445:hover figcaption div:before,
.snip1445.hover figcaption div:before,
.snip1445:hover figcaption div:after,
.snip1445.hover figcaption div:after {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.snip1445:hover figcaption:before,
.snip1445.hover figcaption:before,
.snip1445:hover figcaption:after,
.snip1445.hover figcaption:after {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
/* Demo purposes only */
body {
  background-color: #212121;
}



/* サブコンテンツ */


.contents_title {
	width:100%;
	padding-top:90px;
	height:145px;
}

#Introduction {
	background:url(../img/sub/title_introduction.png) center top no-repeat;
	width:100%;
	height:145px;
	text-indent:-9999px;
	overflow:hidden;
}

#World {
	background:url(../img/sub/title_world.png) center top no-repeat;
	width:100%;
	height:145px;
	text-indent:-9999px;
	overflow:hidden;
}

#Backstage {
	background:url(../img/sub/title_backstage.png) center top no-repeat;
	width:100%;
	height:145px;
	text-indent:-9999px;
	overflow:hidden;
}

#Cast {
	background:url(../img/sub/title_cast.png) center top no-repeat;
	width:100%;
	height:145px;
	text-indent:-9999px;
	overflow:hidden;
}

#Still {
	background:url(../img/sub/title_still.png) center top no-repeat;
	width:100%;
	height:145px;
	text-indent:-9999px;
	overflow:hidden;
}

#Special {
	background:url(../img/sub/title_special.png) center top no-repeat;
	width:100%;
	height:145px;
	text-indent:-9999px;
	overflow:hidden;
}

#Intro_change {
	width:100%;
	height:500px;
	background:url(../img/sub/intro_changebg.jpg) center center no-repeat;
	background-size:cover;
	position:relative;
}

.intro_changechara {
	width:100%;
	height:500px;
	background:url(../img/sub/intro_changechara.png) center center no-repeat;
}

.intro_changechara h3 {
	background:url(../img/sub/intro_change.png) center center no-repeat;
	width:500px;
	height:60px;
	position:absolute;
	left:50%;
	top:40px;
	text-indent:-9999px;
	overflow:hidden;
}

.intro_txt {
	width:500px;
	height:300px;
	background-color:rgba(255,255,255,0.7);
	position:absolute;
	left:50%;
	top:120px;
}

.intro_txt ul {
	padding:15px 0 15px 15px;
	margin-top:15px;
}

.intro_txt ul li {
	font-size:1.7em;
	text-align:left;
	height:40px;
	line-height:40px;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	background:url(../img/sub/listmark.png) left center no-repeat;
	padding-left:25px;
}

.color1 {
	color:rgba(9,108,168,1.00);
}
.color2 {
	color:rgba(236,223,196,1.00);
}
.color3 {
	color:rgba(215,130,131,1.00);
}
.color4 {
	color:rgba(199,210,157,1.00);
}
.color5 {
	color:rgba(9,108,168,1.00);
}

.intro_txt p.upcon {
	font-size:1.7em;
	text-align:left;
	height:40px;
	line-height:40px;
	display:block;
	padding:0 15px;
	color:rgba(215,130,131,1.00);
}

#Spec {
	width:1000px;
	margin:0 auto;
	padding-bottom:400px;
	padding-top:36px;
}

.circle1 {
	width:70px;
	height:70px;
	background-color:rgba(9,108,168,1.00);
	border-radius:5px;
	display:inline-block;
	line-height:70px;
	color:#FFF;
	font-weight:bold;
	font-size:2.5em;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	margin-right:15px;
}

.circle2 {
	width:70px;
	height:70px;
	background-color:rgba(236,223,196,1.00);
	border-radius:5px;
	display:inline-block;
	line-height:70px;
	color:#FFF;
	font-weight:bold;
	font-size:2.5em;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	margin-right:15px;
}

.circle3 {
	width:70px;
	height:70px;
	background-color:rgba(215,130,131,1.00);
	border-radius:5px;
	display:inline-block;
	line-height:70px;
	color:#FFF;
	font-weight:bold;
	font-size:2.5em;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
	margin-right:15px;
}

.circle4 {
	width:70px;
	height:70px;
	background-color:rgba(199,210,157,1.00);
	border-radius:5px;
	display:inline-block;
	line-height:70px;
	color:#FFF;
	font-weight:bold;
	font-size:2.5em;
	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

#Spec table{
	font-size:1.8em;
	margin-top:36px;
}

#Spec table tr th{
	height:60px;
	color:rgba(9,108,168,1.00);
}

#Spec table tr th{
	text-align:right;
	width:350px;
	padding-right:25px;
	
}

#Spec table tr td{
	width:650px;
	text-align:left;
	color:#4e4e4e;
}

.story_wrap {
	width:100%;
	min-width:1000px;
	height:800px;
}

.story_shiro {
	width:50%;
	height:800px;
	float:left;
}

.story_kuro {
	width:50%;
	height:800px;
	float:left;
}

.backstage_wrap {
	width:1000px;
	min-width:1000px;
	margin:0 auto;
	padding-bottom:400px;
}

.backstage_wrap ul li {
	float:left;
	width:500px;
	height:250px;
	position:relative;
	overflow:hidden;
}

.backstage_wrap ul li img {
	transition: all 0.45s ease;
}

.backstage_wrap ul li a {
	width:500px;
	height:250px;
	position:absolute;
	z-index:5;
	display:block;
	text-indent:-9999px;
	overflow:hidden;
	top:0;
	left:0;
	transition: all 0.45s ease;
}

.backstage_wrap ul li a.co01 {
	background-image: linear-gradient(90deg, transparent 50%, #116ca3 50%);
}

.backstage_wrap ul li a.co02 {
	background-image: linear-gradient(90deg, transparent 50%, #f1e2c7 50%);
}

.backstage_wrap ul li a.co03 {
	background-image: linear-gradient(90deg, #c8d39c 50%, transparent 50%);
}

.backstage_wrap ul li a.co04 {
	background-image: linear-gradient(90deg, #d88484 50%, transparent 50%);
}

.backstage_wrap ul li:hover img {
	transform: scale(1.1);
}

.backstage_wrap ul li:hover a {
	opacity:0;
}

.still_wrap {
	width:1000px;
	min-width:1000px;
	margin:0 auto;
	padding-bottom:400px;
}

.still_center {
	background:url(../img/sub/gallery_center.png) center top no-repeat;
	width:1000px;
	height:230px;
	padding-top:20px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	margin-bottom:40px;
}

.still_center img {
	width:870px;
	height:210px;
	margin:0 auto;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.still_left {
	width:480px;
	float:left;
	margin-right:40px;
	background:url(../img/sub/gallery_left.png) left top repeat;
	padding:2px 0;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.still_left ul li {
	width:430px;
	margin:30px auto 0;
}

.still_left ul li {
	width:430px;
	height:150px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	margin-bottom:30px;
}

.still_right ul li {
	width:430px;
	margin:30px auto 0;
}

.still_right ul li {
	width:430px;
	height:150px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	margin-bottom:30px;
}

.still_right {
	width:480px;
	float:left;
	background:url(../img/sub/gallery_right.png) left top repeat;
	padding:2px 0;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

/* CAST */


.cast_shirohane {
	background:url(../img/sub/gallery_left.png) left top repeat;
	width:100%;
	margin-top:60px;
	position:relative;
	padding:60px 0 400px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.shiro_left {
	width:490px;
	height:80px;
	background:#000000;
	position:absolute;
	top:-60px;
	left:50%;
	margin-left:-500px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	z-index:20;
}

.shiro_right {
	width:490px;
	height:60px;
	overflow:hidden;
	background:#B3B3B3;
	position:absolute;
	top:-60px;
	left:50%;
	margin-left:10px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	z-index:20;
	transition: all 0.2s ease;
}

a:hover .shiro_right {
	height:80px;
}

.kuro_left {
	width:490px;
	height:60px;
	overflow:hidden;
	background:#000000;
	position:absolute;
	top:-60px;
	left:50%;
	margin-left:-500px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	z-index:20;
	transition: all 0.2s ease;
}

a:hover .kuro_left {
	height:80px;
}

.kuro_right {
	width:490px;
	height:80px;
	overflow:hidden;
	background:#B3B3B3;
	position:absolute;
	top:-60px;
	left:50%;
	margin-left:10px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	z-index:20;
}

.cast_kurohane {
	background:url(../img/sub/gallery_right.png) left top repeat;
	width:100%;
	margin-top:60px;
	padding:60px 0 400px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	position:relative;
}

.chara_s01 {
	background:url(../img/sub/cast/chara_s01.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_s02 {
	background:url(../img/sub/cast/chara_s02.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_s03 {
	background:url(../img/sub/cast/chara_s03.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_s04 {
	background:url(../img/sub/cast/chara_s04.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_s05 {
	background:url(../img/sub/cast/chara_s05.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_s06 {
	background:url(../img/sub/cast/chara_s06.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}


.chara_k01 {
	background:url(../img/sub/cast/chara_k01.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_k02 {
	background:url(../img/sub/cast/chara_k02.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_k03 {
	background:url(../img/sub/cast/chara_k03.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_k04 {
	background:url(../img/sub/cast/chara_k04.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_k05 {
	background:url(../img/sub/cast/chara_k05.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}

.chara_k06 {
	background:url(../img/sub/cast/chara_k06.jpg) left top no-repeat;
	width:1000px;
	height:400px;
	position:relative;
	text-indent:-9999px;
	overflow:hidden;
	border-radius:15px;
	margin:0 auto 60px;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
}



/* STORYのアレ */

figure.snip1229 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  width:100%;
  height:100%;
  color: #ffffff;
  background:#000000;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1229 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}
figure.snip1229 .imgblock {
  width:100%;
  height:100%;
  background:url(../img/sub/storybg_shiro.jpg) right top no-repeat;
  background-size:cover;
  position: relative;
  opacity: 0.9;
}

figure.snip1229 figcaption {
  position: absolute;
  width:450px;
  top: 5%;
  left: 7%;
  right: 7%;
  bottom: 92%;
  border: 1px solid white;
  border-width: 0 1px 1px;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
  margin:0 auto;
}
figure.snip1229 .heading {
  overflow: hidden;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
figure.snip1229 h3 {
  display: table;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: auto;
  text-transform: uppercase;
  font-weight: 400;
  font-size:3em;
}
figure.snip1229 h3 span {
  font-weight: 800;
}
figure.snip1229 h3:before,
figure.snip1229 h3:after {
  position: absolute;
  display: block;
  width: 1000%;
  height: 1px;
  content: '';
  background: white;
  top: 50%;
}

figure.snip1229 h3:before {
  left: -1000%;
}
figure.snip1229 h3:after {
  right: -1000%;
}
figure.snip1229 p {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  width: 100%;
  padding: 0 20px;
  margin: 0;
  opacity: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  font-size:1.6em;
  text-align:left;
  line-height:1.4;
}
figure.snip1229 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1229:hover .imgblock {
  opacity: 0.15;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
figure.snip1229:hover figcaption,
figure.snip1229.hover figcaption {
  top: 9%;
  bottom: 9%;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip1229:hover p,
figure.snip1229.hover p {
  opacity: 1;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

figure.snip_kuro {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  width:100%;
  height:100%;
  color: #000000;
  background:#ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip_kuro * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}
figure.snip_kuro .imgblock {
  width:100%;
  height:100%;
  background:url(../img/sub/storybg_kuro.jpg) right top no-repeat;
  background-size:cover;
  position: relative;
  opacity: 0.9;
}

figure.snip_kuro figcaption {
  position: absolute;
  width:450px;
  top: 5%;
  left: 7%;
  right: 7%;
  bottom: 92%;
  border: 1px solid black;
  border-width: 0 1px 1px;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
  margin:0 auto;
}
figure.snip_kuro .heading {
  overflow: hidden;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
figure.snip_kuro h3 {
  display: table;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: auto;
  text-transform: uppercase;
  font-weight: 400;
  font-size:3em;
}
figure.snip_kuro h3 span {
  font-weight: 800;
}
figure.snip_kuro h3:before,
figure.snip_kuro h3:after {
  position: absolute;
  display: block;
  width: 1000%;
  height: 1px;
  content: '';
  background: black;
  top: 50%;
}

figure.snip_kuro h3:before {
  left: -1000%;
}
figure.snip_kuro h3:after {
  right: -1000%;
}
figure.snip_kuro p {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  width: 100%;
  padding: 0 20px;
  margin: 0;
  opacity: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  font-size:1.6em;
  text-align:left;
  line-height:1.4;
}
figure.snip_kuro a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip_kuro:hover .imgblock {
  opacity: 0.15;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
figure.snip_kuro:hover figcaption,
figure.snip_kuro.hover figcaption {
  top: 9%;
  bottom: 9%;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip_kuro:hover p,
figure.snip_kuro.hover p {
  opacity: 1;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}



/* スペシャル */


.yoyaku_campaign {
	background:url(../special/yoyaku_campaign.jpg) center top no-repeat;
	width:842px;
	height:1191px;
	margin:36px auto 60px;
	border-radius:20px;
}

.yoyaku_campaign2 {
	background:url(../special/normal.jpg) center top no-repeat;
	background-size:cover;
	width:842px;
	height:1175px;
	margin:36px auto 60px;
	border-radius:20px;
}

.curry {
	background:url(../special/curry.jpg) center top no-repeat;
	width:842px;
	height:1191px;
	margin:36px auto 60px;
	border-radius:20px;
}

.cafe1 {
	background:url(../special/cafe1.jpg) center top no-repeat;
	width:842px;
	height:1191px;
	margin:36px auto 32px;
}

.cafe2 {
	background:url(../special/cafe2.jpg) center top no-repeat;
	width:842px;
	height:1191px;
	margin:0 auto 60px;
}

.return {
	padding-bottom:400px;
}

.return a {
	width:270px;
	height:40px;
	border-radius:20px;
	line-height:40px;
	background:rgba(9,108,168,1.00);
	text-align:center;
	color:#FFF;
	margin:0 auto;
	display:block;
	font-size:1.8em;
	text-decoration:none;
	transition: all .3s;
}

.return a:hover {
	color:rgba(9,108,168,1.00);
	background:rgba(255,255,255,1.00);
}

.trial_table {
	width:940px;
	margin:32px auto 60px;
}

.trial_table table {
	width:940px;
}

.trial_table table th {
	height:24px;
	background-color:#666666;
	border:1px solid #ffffff;
	color:#ffffff;
	padding-top:3px;
	padding-bottom:3px;
	font-size:1.3em;
	text-align:center;
}

.trial_table table th a {
	color:#FFF;
	text-decoration:none;
}

.trial_table table th a:hover {
	color:#FFF;
	text-decoration:underline;
}

.trial_table table td {
	height:50px;
	border:1px solid #ffffff;
	color:#5e5e5e;
	font-size:1.3em;
	padding-top:3px;
	padding-bottom:3px;
	text-align:center;
}

.trial_table table td a {
	display:block;
	margin:0 auto;
	width:200px;
	height:30px;
	background:#666666;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px;	
	border-radius: 15px;
	border-style: none;
	font-weight:bold;
	color:#FFF;
	line-height:30px;
	text-decoration:none;
	font-size:120%;
	transition:all 0.3s;
}

.trial_table table td a:hover {
	background:#D5D5D5;
	color:#666666;
}

.summer_summary {
	width:800px;
	border:3px solid #d88484;
	margin:0 auto;
	color:#d88484;
	font-size:2em;
	padding:20px;
}

.summer_summary span {
	border-bottom:1px solid #d88484;
	display:block;
	width:600px;
	margin:0 auto;
	font-size:130%;
	margin-bottom:12px;
}

.glf_summary {
	width:800px;
	border:3px solid #f1739d;
	margin:0 auto 36px;
	color:#f1739d;
	font-size:1.6em;
	padding:20px;
}

.glf_summary span {
	border-bottom:1px solid #f1739d;
	display:block;
	width:600px;
	margin:0 auto;
	font-size:130%;
	margin-bottom:12px;
}

.glf_event {
	width:800px;
	border:3px solid #a775ea;
	margin:0 auto 36px;
	color:#a775ea;
	font-size:1.6em;
	padding:20px;
}


.glf_event span {
	border-bottom:1px solid #a775ea;
	display:block;
	width:600px;
	margin:0 auto;
	font-size:130%;
	margin-bottom:12px;
}


h4.item_category {
	display:block;
	width:400px;
	padding:10px 40px;
	background-color:#d88484;
	color:#FFF;
	font-weight:bold;
	line-height:40px;
	font-size:1.8em;
	margin:36px auto;
}

.summer_itembox {
	width:1000px;
	height:200px;
	margin:0 auto 20px;
	background:#EDEDED;
}

.summer_img {
	width:380px;
	height:180px;
	margin:10px 10px 0 10px;
	background:#FFF;
	float:left;
}

.summer_txt {
	width:580px;
	height:180px;
	margin:10px 0 0 0;
	float:left;
}

.su_txtwrap {
	width:600px;
	height:180px;
	display:table-cell;
	vertical-align:middle;
}

.summer_txt h3 {
	font-size:2em;
	text-align:left;
	color:#d98484;
}

.summer_txt p {
	font-size:2em;
	text-align:right;
	font-weight:bold;
	color:#116ca4;
}

.summer_itembox2 {
	width:1000px;
	height:100px;
	margin:0 auto 20px;
	background:#EDEDED;
}

.summer_txt2 {
	width:960px;
	height:80px;
	margin:10px 20px;
	float:left;
}

.su_txtwrap2 {
	width:980px;
	height:80px;
	display:table-cell;
	vertical-align:middle;
}

.summer_txt2 h3 {
	font-size:2em;
	text-align:left;
	color:#d98484;
}

.summer_txt2 p {
	font-size:2em;
	text-align:right;
	font-weight:bold;
	color:#116ca4;
}

a.summer_tsuhan {
	display:block;
	width:800px;
	border:5px solid #3cb035;
	color:#3cb035;
	font-size:2em;
	padding:10px;
	margin:32px auto;
	font-weight:bold;
	transition:all 0.3s;
	text-decoration:none;
}

a:hover.summer_tsuhan {
	border:5px solid #36e32c;
	color:#36e32c;
	box-shadow:0 0 10px #3cb035;
}

.support h3 {
	position: relative;
	padding: .75em 1em .75em 1.5em;
	border: 1px solid #ccc;
	width:800px;
	height:30px;
	margin:0 auto 60px;
	background:#F5F5F5;
	line-height:30px;
	font-weight:bold;
	font-size:1.8em;
}
.support h3::after {
	position: absolute;
	top: .5em;
	left: .5em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #3498db;
	border-radius: 4px;
}

.support p {
	display:block;
	margin:0 auto 48px;
	text-align:left;
	width:700px;
	font-size:1.7em;
	position:relative;
}

.sirial_sample {
	position:absolute;
	top:0;
	right:-100px;
}

.support p em {
	font-size:70%;
}

.support blockquote {
	display:block;
	width:600px;
	padding:20px;
	background:#F5F5F5;
	border:1px solid #CDCDCD;
	margin:0 auto 48px;
	text-align:left;
	font-size:1.3em;
}

#Newcd_visual {
	width:100%;
	height:756px;
	position:relative;
	margin:0 auto;
}

.newcd_left {
	width:50%;
	height:756px;
	float:left;
	position:relative;
	overflow:hidden;
	
}

.newcd_left:before {
	content: '';
	background:url(../special/newcd_katahane.jpg) center top no-repeat;
	background-size:cover;	
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	position: absolute;
	/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	z-index: -1;/*重なり順序を一番下にしておく*/
}

.newcd_katahane {
	width:480px;
	height:716px;
	margin:20px 20px 20px 0;
	float:right;
	background:url(../special/newcd_katahane.jpg) center top no-repeat;
	background-size:cover;
	box-shadow:0 0 8px rgba(92,79,10,0.3);
	position:relative;
}

.newcd_katahane p {
	font-family: 'Oswald', sans-serif;
	text-align:left;
	font-size:4rem;
	position:absolute;
	left:20px;
	bottom:20px;
	color:rgba(81,14,15,1.00);
	text-shadow:2px 2px 10px rgba(0,0,0,0.3);
}

.newcd_right {
	width:50%;
	height:756px;
	float:left;
	position:relative;
	overflow:hidden;
}

.newcd_right:before {
	content: '';
	background:url(../special/newcd_qualia.jpg) center top no-repeat;
	background-size:cover;	
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	position: absolute;
	/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	z-index: -1;/*重なり順序を一番下にしておく*/
}

.newcd_qualia {
	width:480px;
	height:716px;
	margin:20px 0 20px 20px;
	background:url(../special/newcd_qualia.jpg) center top no-repeat;
	background-size:cover;	
	box-shadow:0 0 8px rgba(217,217,217,0.6);
	position:relative;
}

.newcd_qualia p {
	font-family: 'Oswald', sans-serif;
	text-align:right;
	font-size:4rem;
	position:absolute;
	right:20px;
	bottom:20px;
	color:#fff;
	text-shadow:2px 2px 10px rgba(0,0,0,0.3);
}

.newcd_qualia img {
	width:100%;
}

.newcd_day {
	 width:300px;
	 padding:10px;
	 border:8px solid #fff;
	 position:absolute;
	 left:50%;
	 margin-left:-159px;
	 top:240px;
	 z-index:30;
	 color:#fff;
	 font-family: 'Oswald', sans-serif;
	 font-size:1.6rem;
	 text-shadow:0 0 7px rgba(0,0,0,0.4);
	 box-shadow:0 0 7px rgba(0,0,0,0.4);
	 background:rgba(0,0,0,0.3);
	 line-height:1.2;
}

.newcd_day em {
	font-size:150%;
	font-weight:bold;	
}

.newcd_day span {
	font-size:70%;	
}

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

.cdtxt_left {
	width:430px;
	float:left;
	margin-right:40px;
	margin-top:24px;
	border:5px solid #f4e4c4;
	padding:24px 20px;
	background-color:#fffbf2;	
	font-size:1rem;
	color:#848484;
	border-radius:25px 0 25px 0;
}

.cdtxt_left h3 {
	font-size:2.2rem;
	font-weight:bold;
	border-bottom:2px solid #e8888b;
	color:#e8888b;
	position:relative;
	z-index:20;
	display:block;
	width:430px;
	font-family: "Nico Moji";
}

.cdtxt_left h3 span {
	width:430px;
	z-index:2;
	font-family: 'Oswald', sans-serif;
	font-size:1.2rem;
	opacity:0.3;
}

.cdtxt_left p {
	text-align:left;
	display:block;
	margin:12px 0;
	line-height:28px;
}

.cdtxt_left p span {
	font-size:80%;
	padding-left:16px;
}

.cdtxt_left p em {
	font-weight:bold;
	color:#98a154;
}

.cdtxt_right {
	width:430px;
	float:left;
	margin-top:24px;
	border:5px solid #c4e3f3;
	padding:24px 20px;
	background-color:#eef9ff;	
	font-size:1rem;
	color:#848484;
	border-radius:25px 0 25px 0;
}

.cdtxt_right h3 {
	font-size:2.2rem;
	font-weight:bold;
	border-bottom:2px solid #0075b0;
	color:#0075b0;
	position:relative;
	z-index:20;
	display:block;
	font-family: "Nico Moji";
}

.cdtxt_right h3 span {
	width:430px;
	z-index:2;
	font-family: 'Oswald', sans-serif;
	font-size:1.2rem;
	opacity:0.3;
}

.cdtxt_right p {
	text-align:left;
	display:block;
	margin:12px 0;
	line-height:28px;
}

.cdtxt_right p span {
	font-size:80%;
	padding-left:16px;
}

.cdtxt_right p em {
	font-weight:bold;
	color:#b08ec0;
}


p.tracklist_head {
	width:200px;
	padding-left:24px;
	line-height:24px;
	border-radius:12px;
	background:#0076b5;
	color:#fff;
	font-size:0.9rem;
}

.newcd_link {
	font-size:1.1rem;
	margin-top:36px;
	color:#7A7A7A;
}

.newcd_link a {
	color:#0C5CB0;
	font-weight:bold;
	text-decoration:none;
}

.newcd_link a:hover {
	text-decoration:underline;
}

table.newcd_shoplist {
	width:900px;
	margin:0 auto;
	border-collapse: separate;
	border-spacing: 12px 24px;
}

table.newcd_shoplist tr th {
	width:450px;
	background-color:#3cb035;
	color:#fff;
	text-align: center;
	font-size:1.1rem;
	height:32px;

}

table.newcd_shoplist tr td {
	width:450px;
	text-align: center;
	font-size:1.1rem;
	height:32px;
}

table.newcd_shoplist tr td a {
	display: block;
	height:28px;
	width:300px;
	margin:0 auto;
	line-height: 28px;
	background-color:#3cb035;
	color:#fff;
	border-radius: 14px;
	text-decoration: none;
	transition: all 0.3s;
}

table.newcd_shoplist tr td a:hover {
	background-color:#36e32c;
}


.yoyaku_table {
	width:800px;
	margin:0 auto 48px;
}

.yoyaku_table table th {
	height:24px;
	width:300px;
	background-color:#B8CDA1;
	border:1px solid #ffffff;
	color:#0F4F0A;
	padding-top:3px;
	padding-bottom:3px;
	font-size:1.3em;
	text-align:center;
}

.yoyaku_table table td {
	height:24px;
	width:500px;
	background-color:#FFF7F0;
	border:1px solid #ffffff;
	color:#5e5e5e;
	font-size:1.3em;
	padding-top:3px;
	padding-bottom:3px;
	text-align:center;
	text-align:left;
	padding-left:20px;
}

.yoyaku_table table td a {
	color:#dd6188;
	text-decoration:none;
}

.yoyaku_table table td a:hover {
	text-decoration:underline;
}

.yoyaku_table table td.ken {
	color:#72192b;
	font-weight:bold;
}