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



/* clearfix */

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

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

.cr {margin:0 auto;}

/* 点滅 */
.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: 24px;
	right: 40px;
	width:50px;
	z-index:550;
}
#page-top a {
	background: #ff698a;
	width:50px;
	height:50px;
	border-radius:5px;
	display:block;
	margin-bottom:12px;
	transition:all 0.3s;
	line-height:50px;
	font-size:3rem;
	color:#fff;
	text-align: center;
}

#page-top a:hover {
	transform: scale(1.2);
}

/* FireFoxFadeブレ防止 */

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

/* NotoSans読込 */

@font-face {
  font-family: "NotoSans_subset";
  font-style: normal;
  src: url(../font/NotoSans_subset.woff) format("woff");
}

/* 全体・枠作り */

html,body {
	height:100%;
}

html {
	font-size:62.5%;
}

img { display:block; }


body {
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, sans-serif;
}

#PageWrapper {
	height: auto !important;
	position: relative;
	width:100%;
	min-width: 1000px;
	padding-bottom:100px;
	background:url(../img/base.jpg) center top no-repeat;
	background-size:cover;
	background-attachment: fixed;
}

header {
	width:100%;
	height:100px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9a5c4+0,fff392+20,aaef99+40,99d1ff+60,eda5ed+80,fcd9ec+100 */
	background: #f9a5c4; /* Old browsers */
	background: -moz-linear-gradient(left,  #f9a5c4 0%, #fff392 20%, #aaef99 40%, #99d1ff 60%, #eda5ed 80%, #fcd9ec 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #f9a5c4 0%,#fff392 20%,#aaef99 40%,#99d1ff 60%,#eda5ed 80%,#fcd9ec 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #f9a5c4 0%,#fff392 20%,#aaef99 40%,#99d1ff 60%,#eda5ed 80%,#fcd9ec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9a5c4', endColorstr='#fcd9ec',GradientType=1 ); /* IE6-9 */
	position: relative;
	z-index:100;
}

.menu_wrap {
	width:100%;
	height:100px;
	background-image: linear-gradient(
	-45deg,
	rgba(255,255,255,0.2) 25%,
	rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%,
	rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%,
	rgba(255,255,255,0) 75%, rgba(255,255,255,0)
	);
	/* 幅8px、高さ8pxで背景画像のサイズを指定 */
	background-size: 32px 32px;
}

.menu_wrap:after {
	content: "";
	background:url(../img/fril_under.png) left top repeat;
	height:56px;
	width:100%;
	display: block;
	position: absolute;
	left:0;
	bottom:-56px;
}

.button_mobile {
	display: none;
}

.head_logo {
	background:url(../img/header_logo.png) left top repeat;
	width:190px;
	height:100px;
	position: absolute;
	left:50%;
	margin-left:-500px;
	text-indent: -9999px;
	overflow: hidden;
}

.head_menu {
	width:750px;
	height:100px;
	position:absolute;
	left:50%;
	margin-left:-250px;
	top:0;
}

.head_menu ul li {
	float:left;
	height:100px;
	position: relative;
}

.menu01 {
	background:url(../img/menu_01.png) left top no-repeat;
	width:154px;
}

.menu02 {
	background:url(../img/menu_02.png) left top no-repeat;
	width:178px;
}

.menu03 {
	background:url(../img/menu_03.png) left top no-repeat;
	width:212px;
}

.menu04 {
	background:url(../img/menu_04.png) left top no-repeat;
	width:206px;
}

.head_menu ul li a {
	width:100%;
	height:100px;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

.head_menu ul li a span {
	display: none;
}

#Mainvisual {
	background:url(../img/main_lace.png) center top no-repeat;
	width:100%;
	height:1358px;
	position: relative;
	margin-top:72px;
	margin-bottom:12px;
}

.leftlace {
	background:url(../img/lace_left.png) left top repeat-y;
	width:70px;
	height:100vh;
	position: fixed;
	left:0;
	top:0;
}

.rightlace {
	background:url(../img/lace_right.png) left top repeat-y;
	width:70px;
	height:100vh;
	position: fixed;
	right:0;
	top:0;
}

.visual {
	background:url(../img/mainvisual.png) center top no-repeat;
	width:100%;
	height:1358px;
}

#News {
	width:982px;
	height:42px;
	padding:10px;
	margin:0 auto 72px;
	border-radius: 15px;
	background-color: #ffcf56;
	position: relative;
}

#News p {
	width:980px;
	height:40px;
	line-height: 40px;
	background-color: #FFF0CC;
	border:1px solid rgba(243,188,0,1.00);
	border-radius: 5px;
	font-size:1.6rem;
	color:rgba(87,10,11,1.00);
}

#News p:before {
	content:"ニュース";
	font-weight: bold;
	font-size:2.4rem;
	position: absolute;
	left:24px;
	top:-24px;
	color:rgba(255,110,138,1.00);
}

#News p span {
	display: inline-block;
	padding:0 12px;
	background:rgba(255,110,138,1.00);
	color:#fff;
	text-align: center;
	font-weight: bold;
	font-size:1.6rem;
}

#Story {
	background:#fffcf0;
	width:100%;
}

.story_wrap {
	width:100%;
	height:940px;
	background-image: linear-gradient(
	-45deg,
	rgba(255,255,255,0.2) 25%,
	rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%,
	rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%,
	rgba(255,255,255,0) 75%, rgba(255,255,255,0)
	);
	/* 幅8px、高さ8pxで背景画像のサイズを指定 */
	background-size: 32px 32px;
	position: relative;
	border-top:5px solid #ff8f81;
	border-bottom:5px solid #ff8f81;
}

.flo_left {
	background:url(../img/flo_left.png) left top no-repeat;
	width:918px;
	height:712px;
	position: absolute;
	left:0;
	top:0;
}

.flo_right {
	background:url(../img/flo_right.png) left top no-repeat;
	width:933px;
	height:787px;
	position: absolute;
	right:0;
	bottom:0;
}

.story_wrap:before {
	content: "";
	background:url(../img/fril_top.png) left top repeat;
	height:56px;
	width:100%;
	display: block;
	position: absolute;
	left:0;
	top:-61px;
}

.story_wrap:after {
	content: "";
	background:url(../img/fril_under.png) left top repeat;
	height:56px;
	width:100%;
	display: block;
	position: absolute;
	left:0;
	bottom:-61px;
}

p.mainstory {
	width:1000px;
	display: block;
	margin:0 auto;
	text-align: left;
	font-size:1.7rem;
	line-height: 32px;
	color:#7f4430;
	position: relative;
	z-index:10;
}

p.mainstory strong{
	font-weight: bold;
	display: inline-block;
	padding:0 4px;
	background:yellow;
}

.story_head {
	background:url(../img/titleheader.png) center top no-repeat;
	width:100%;
	height:142px;
	position: relative;
	margin:36px auto 36px;
}

.story_count {
	width:160px;
	height:40px;
	line-height: 40px;
	font-weight: bold;
	color:#fff;
	font-size:2.1rem;
	position: absolute;
	text-align: center;
	left:50%;
	margin-left:-474px;
	top:41px;
}

.story_title {
	color:#ec0968;
	text-align: left;
	font-weight: bold;
	font-size:2rem;
	position: absolute;
	top:38px;
	line-height: 24px;
	left:50%;
	margin-left:-300px;
}

.story_title span {
	font-size:1.4rem;
	font-weight: normal;
}

.story_thum {
	width:310px;
	position: absolute;
	left:50%;
	margin-left:190px;
	top:200px;
}

.chara_title {
	background:url(../img/character.png) left top no-repeat;
	width:478px;
	height:105px;
	margin:80px auto 24px;
}

.chara_head {
	background:url(../img/mahou.png) left top no-repeat;
	width:569px;
	height:86px;
	margin:0 auto 48px;
}

.chara_wrap {
	width:1000px;
	margin:0 auto 72px;
}

.chara01 {
	background:url(../img/chara01.jpg)left top no-repeat;
	width:480px;
	height:900px;
	float:left;
	margin-right:40px;
	border-radius: 15px;
	overflow: hidden;
}

.chara02 {
	background:url(../img/chara02.jpg) left top no-repeat;
	width:480px;
	height:900px;
	float:left;
	border-radius: 15px;
	overflow: hidden;
}

.staff {
	background:url(../img/staff.png) left top no-repeat;
	width:759px;
	height:60px;
	margin:0 auto 60px;
}

.banner {
	width:200px;
	height:40px;
	border:2px solid #fff;
	background-color:#fff;
	margin:0 auto 0;
}

p.attention_txt {
	text-align: center;
	font-size:1.4rem;
	color:dimgray;
	margin-top:15px;
}