@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: 3vw;
	right: 3vw;
	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%;
	padding-top:7vh;
	padding-bottom:100px;
	background:url(../img/base.jpg) center top no-repeat;
	background-size:cover;
	background-attachment: fixed;
}

/* メニュー */

header {
	display: block;
	width:100%;
	position: fixed;
	z-index:500;
	left:0;
	top:0;
	
}

#Menugroup {
	
}

#Menu:after {
	content:"";
	width:100%;
	height:100%;
	display: block;
	background-image: linear-gradient(
	-45deg,
	rgba(255,255,255,0.1) 25%,
	rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%,
	rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%,
	rgba(255,255,255,0) 75%, rgba(255,255,255,0)
	);
	/* 幅8px、高さ8pxで背景画像のサイズを指定 */
	background-size: 32px 32px;
	position: absolute;
	top:0;
	left:0;
	z-index:599;
	transition: all 0.3s;
}

#Menu {
	width:100%;
	
	/* 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: absolute;
	top:0;
	left:0;
	border-bottom:1px solid #ffc7cd;
	transition: all 0.3s;
	z-index:600;
}

.menu_wrap {
	margin:0 auto;
	position: relative;
	transition: all 0.3s;
	z-index:1000;
}

.head_logo {
	width:50%;
	height:7vh;
	position: relative;
	z-index:700;
	background:url(../img/header_logo.png) left center no-repeat;
	background-size:contain;
	text-indent: -9999px;
	overflow: hidden;
}

.head_logo img {
	width:100%;
	transition: all 0.3s;
}

.button_mobile {
	width:100%;
	height:7vh;
	position:absolute;
	right:0;
	top:0;
	color:#fff;
	font-size:4.2rem;
	line-height: 7vh;
	z-index:600;
	text-align: right;
	/* 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 */
}

.button_mobile a.open {
	width:7vh;
	height: 7vh;
	display:inline-block;
	color:#fff;
	text-align: center;
	border-left:1px solid #fff;
}

#Menugroup:target .button_mobile a.open {
	display: none;
}

#Menugroup:not(:target) .button_mobile a.close {
	display: none;
}

#Menugroup:target .button_mobile a.close {
	width:7vh;
	height: 7vh;
	display:inline-block;
	color:#fff;
	text-align: center;
	border-left:1px solid #fff;
	z-index:250;
	position:absolute;
	right:0;
	top:0;
}


#Menugroup:not(:target) .menuclick_bg {
	display: none;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color:#fff;
	opacity: 0;
	transition: all 0.3s;
	z-index:200;
}

#Menugroup:target .menuclick_bg {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color:#fff;
	opacity: 0.5;
	transition: all 0.3s;
	z-index:200;
}

.menuclick_bg a {
	width:100vw;
	height:100vh;
	display: block;
}

.head_logo p {
	display: none;
}

#Menugroup:not(:target) .head_menu{
	transition: all 0.3s;
	margin-top:-300px;
}

#Menugroup:target .head_menu{
	transition: all 0.3s;
	margin-top:0;
}

.head_menu ul li br {
	display: none;
}

.head_menu ul li a {
	color:#fff;
	display: block;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}

.head_menu ul li a:hover {
	background:#fff!important;
}

.head_menu ul li a p {
	font-family: 'Passion One', cursive;
	font-size:2.8rem;
	line-height: 50px;
	display: block;
	transition: all 0.3s;
	border-top:1px dotted #fff;
}

.head_menu ul li a:hover p {
	color:#ff698a!important;
}

.head_menu ul li a span {
	font-size:1.4rem;
	font-family:"NotoSans_subset", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN";
}

/* 全体・枠作り */

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

.leftlace {
	display:none;
}

.rightlace {
	display:none;
}

.visual {
	background:url(../img/mainvisual.png) center top no-repeat;
	background-size:cover;
	width:100%;
	padding-top:130%;
}

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

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

#News p:before {
	display: none;
}

#News p span {
	display: 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%;
	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;
	background-size:100%;
	width:100%;
	padding-top:100%;
	position: absolute;
	left:0;
	top:0;
}

.flo_right {
	background:url(../img/flo_right.png) left top no-repeat;
	background-size:100%;
	width:100%;
	padding-top:100%;
	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:96%;
	display: block;
	margin:0 auto 24px;
	text-align: left;
	font-size:1.7rem;
	line-height: 32px;
	color:#7f4430;
	position: relative;
	z-index:10;
}

br.mn {
	display: none;
}

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

.story_head {
	width:90%;
	padding:10px;
	margin:24px auto 24px;
	border-radius: 15px;
	background-color: #ffcf56;
	position: relative;
}

.story_count {
	display: block;
	width:30%;
	padding:0 12px;
	border-radius: 5px;
	line-height: 36px;
	font-weight: bold;
	color:#fff;
	background:rgba(255,79,81,1.00);
	font-size:2.1rem;
	text-align: center;
	margin-bottom:10px;
}

.story_title {
	background:rgba(255,246,246,1.00);
	border-radius: 5px;
	padding:5px 12px;
	color:#ec0968;
	text-align: left;
	font-weight: bold;
	font-size:2rem;
	line-height: 24px;
}

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

.story_thum {
	width:80%;
	position: relative;
	margin:0 auto;
}

.story_thum ul li {
	width:100%;
	margin-bottom:12px;
}

.story_thum ul li img {
	width:100%;
}

.chara_title {
	background:url(../img/character.png) left top no-repeat;
	background-size:100%;
	width:90%;
	padding-top:20%;
	margin:80px auto 24px;
}

.chara_head {
	background:url(../img/mahou.png) left top no-repeat;
	background-size:100%;
	width:80%;
	padding-top:15%;
	margin:0 auto 48px;
}

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

.chara01 {
	background:url(../img/chara01.jpg)left top no-repeat;
	background-size:100%;
	width:96%;
	padding-top:180%;
	border-radius: 20px;
	margin:0 auto 24px;
	overflow: hidden;
}

.chara02 {
	background:url(../img/chara02.jpg) left top no-repeat;
	background-size:100%;
	width:96%;
	padding-top:180%;
	border-radius: 20px;
	margin:0 auto;
	overflow: hidden;
}

.staff {
	background:url(../img/staff.png) left top no-repeat;
	background-size:100%;
	width:98%;
	padding-top:12%;
	margin:0 auto 40px;
}

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

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