@charset "UTF-8";

/*common*/
html
{
height: 100%;
}
body
{
	color: #333;
	font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	font-size: 16px;
	line-height: 1.7em;
	line-break: strict;
	word-break: break-all;
	text-align: justify;
	text-justify: distribute;
	position: relative;
	min-height: 100vh;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-image:
	url("../images/common/bg01.jpg"),
	url("../images/common/bg02.jpg"),
	url("../images/common/bg00.jpg");
	background-size:309px 308px,309px 213px,800px 500px;
	background-repeat: no-repeat,no-repeat,repeat;
	background-position: left top,right bottom,left bottom,left top;
	background-attachment: fixed, fixed, fixed;
}
a:link {
	text-decoration: none;
	color: #4e2525;
	-webkit-transition: all 500ms 0s ease;
  	transition: all 500ms 0s ease;
}

a:visited {
	text-decoration: none;
	color: #4e2525;
}
a:hover
{
	text-decoration: none;
	color: #8a2a2a;
}
p:not(:last-child)
{
	margin-bottom: 1em;
}


/*PC--------------------------------------------------------------------------------------*/

/*header-bar*/

.header-bar-bg
{
	width: 100%;
	height: 65px;
	background: url("../images/common/header_bg.png") repeat-x;
	position: fixed;
	z-index: 100;
}
.header-bar-bg2
{
	width: 100%;
	height: 190px;
	background: url("../images/common/header_bg.png") repeat-x;
	position: fixed;
	z-index: 100;
}
.header-bar-bg .header-bar,
.header-bar-bg2 .header-bar
{
	width: 1020px;
	height: 50px;
	margin: 0 auto;
	position: relative;
}
.header-bar-bg .header-bar .yuzulogo,
.header-bar-bg2 .header-bar .yuzulogo
{
	position: absolute;
	left: 10px;
	top: 9px;
}
.header-bar-bg .header-bar .yuzu11,
.header-bar-bg2 .header-bar .yuzu11
{
	position: absolute;
	left: 80px;
	top: 18px;
}
.header-bar-bg .header-bar .sns,
.header-bar-bg2 .header-bar .sns
{
	position: absolute;
	right: 0;
	top: 9px;
}
.header-bar-bg .header-bar .sns ul,
.header-bar-bg2 .header-bar .sns ul
{
	list-style: none;
	overflow: hidden;
	width: 126px;
}
.header-bar-bg .header-bar .sns ul li,
.header-bar-bg2 .header-bar .sns ul li
{
	float: left;
	margin-right: 10px;
	width: 32px;
}
.header-bar-bg .header-bar .sns ul li img,
.header-bar-bg2 .header-bar .sns ul li img
{
	width: 100%;
}

/*contents*/

#wrap-top
{
	width: 1020px;
	margin: 80px auto 0 auto;
	padding: 10px 10px 30px 10px;
	box-sizing: border-box;
	flex: 1 0 auto;
	min-height: 0%;
}
#wrap
{
	width: 1020px;
	margin: 220px auto 0 auto;
	padding: 10px 10px 30px 10px;
	box-sizing: border-box;
	flex: 1 0 auto;
	min-height: 0%;
}
.flexslider
{
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
	margin-bottom: 30px!important;
}
.top-navi
{
	width: 1000px;
	height: 210px;
	background: url("../images/top/navi.png") no-repeat;
	position: relative;
	margin-bottom: 30px;
}
.top-navi h1.top-logo
{
	position: absolute;
	left: 295px;
	top: -140px;
	z-index: 50;
}
.fuwafuwa
{
-webkit-animation:fuwafuwa 2s infinite linear alternate;
animation:fuwafuwa 2s infinite linear alternate;
}
@-webkit-keyframes fuwafuwa
{
0% {-webkit-transform:translate(0, -10px);}
100% {-webkit-transform:translate(0, 10px);}
}
@keyframes fuwafuwa
{
0% {transform:translate(0, -10px);}
100% {transform:translate(0, 10px);}
}
.top-navi .navi01 a
{
	position: absolute;
	left: 8px;
	top:118px;
	width: 150px;
	height: 70px;
}
.top-navi .navi02 a
{
	position: absolute;
	left: 175px;
	top:118px;
	width: 150px;
	height: 70px;
}
.top-navi .navi03 a
{
	position: absolute;
	left: 341px;
	top:118px;
	width: 150px;
	height: 70px;
}
.top-navi .navi04 a
{
	position: absolute;
	left: 508px;
	top:118px;
	width: 150px;
	height: 70px;
}
.top-navi .navi05 a
{
	position: absolute;
	left: 675px;
	top:118px;
	width: 150px;
	height: 70px;
}
.top-navi .navi06 a
{
	position: absolute;
	left: 841px;
	top:118px;
	width: 150px;
	height: 70px;
}
.top-navi .navi01 img,
.top-navi .navi02 img,
.top-navi .navi03 img,
.top-navi .navi04 img,
.top-navi .navi05 img,
.top-navi .navi06 img,
.navi .navi01 img,
.navi .navi02 img,
.navi .navi03 img,
.navi .navi04 img,
.navi .navi05 img,
.navi .navi06 img
{
	width: 100%;
}
.top-navi .navi01 a:hover,
.top-navi .navi02 a:hover,
.top-navi .navi03 a:hover,
.top-navi .navi04 a:hover,
.top-navi .navi05 a:hover,
.top-navi .navi06 a:hover,
.navi .navi01 a:hover,
.navi .navi02 a:hover,
.navi .navi03 a:hover,
.navi .navi04 a:hover,
.navi .navi05 a:hover,
.navi .navi06 a:hover
{
	transform:scale(1.2,1.2) rotate(5deg);
}
.navi
{
	width: 1000px;
	height: 140px;
	background: url("../images/common/navi.png") no-repeat;
	position: relative;
	margin: 0 auto;
}
.navi h1.logo
{
	position: absolute;
	left: 400px;
	top: -45px;
	z-index: 50;
}
.navi .navi01 a
{
	position: absolute;
	left: 13px;
	top: 73px;
	width: 129px;
	height: 60px;
}
.navi .navi02 a
{
	position: absolute;
	left: 188px;
	top: 73px;
	width: 129px;
	height: 60px;
}
.navi .navi03 a
{
	position: absolute;
	left: 354px;
	top: 73px;
	width: 129px;
	height: 60px;
}
.navi .navi04 a
{
	position: absolute;
	left: 521px;
	top: 73px;
	width: 129px;
	height: 60px;
}
.navi .navi05 a
{
	position: absolute;
	left: 688px;
	top: 73px;
	width: 129px;
	height: 60px;
}
.navi .navi06 a
{
	position: absolute;
	left: 854px;
	top: 73px;
	width: 129px;
	height: 60px;
}
.contents-frame
{
	background-image:
	url(../images/common/frame_top_left.png),
	url(../images/common/frame_top_right.png),
	url(../images/common/frame_bottom_left.png),
	url(../images/common/frame_bottom_right.png),
	url(../images/common/frame_top_center.png),
	url(../images/common/frame_bottom_center.png),
	url(../images/common/frame_left.png),
	url(../images/common/frame_right.png),
	url(../images/common/frame_bg.png);
	background-size:100px 100px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px;
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y,repeat;
	background-position: left top,right top,left bottom,right bottom,left top,left bottom,left top,right top,left center;
	padding: 50px;
	box-sizing: border-box;
	/*overflow: hidden;*/
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}
h3
{
	margin-bottom: 30px;
}
h4
{
	margin-bottom: 1em;
	font-size: 1.4em;
	padding: 0.3em 0;
	border-bottom: 1px solid #5e4029;
	color: #a675b0;
}
ul.campBanner
{
	margin: 0 0 30px 0;
	padding: 0;
	list-style: none;
}
ul.campBanner li:not(:last-child)
{
	width: 100%;
	margin-bottom: 10px;
}
ul.campBanner li img
{
	width: 100%;
}
dl.staff
{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
dl.staff dt
{
	flex-basis: 50%;
	text-align: right;
	box-sizing: border-box;
	padding-top: 2px;
	padding-right: 0.5em;
	color: #999;
	margin-bottom: 0.5em;
}
dl.staff dd
{
	flex-basis: 50%;
	box-sizing: border-box;
	padding-left: 0.5em;
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 0.5em;
}


/* liScroll styles */

#newsticker
{
	width: 900px;
	height: 60px;
	position: relative;
}

.tickercontainer { /* the outer div with the black border */
background: none; 
width: 740px; 
margin: 0; 
padding: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
ul.newsticker { /* that's your list */
position: relative;
left: 740px;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
background: none;
margin-right: 40px;
}
ul.newsticker a {
padding: 0;
margin: 0;
} 
#newsticker .archive a
{
	position: absolute;
	display: block;
	overflow: hidden;
	top: -3px;
	right: 0;
	text-align: center;
	padding: 0.1em 0.7em;
	box-sizing: border-box;
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em; 
	-o-border-radius: 10em; 
	border-radius: 10em;
	background: #5e4029;
	color: #fff;
}
#newsticker .archive a:hover
{
	text-decoration: none;
	background: #fc0;
	color: #000;
}

/*character*/

.tabs
{
	width: 100%;
	position: relative;
	margin-top: -70px;
}
.tab_item01
{
	top: 0px;
	left: 0px;
	height: 0;
    padding-top: 15.55555%;
	position: relative;
	width: 16.6666%;
	background: url("../images/character/tab01.png") no-repeat;
	text-indent: -9999px;
	background-size: cover;
	display: block;
	overflow: hidden;
	float: left;
	-webkit-transition: all 500ms 0s ease;
  	transition: all 500ms 0s ease;
	z-index: 10;
	margin-bottom: 30px;
}
.tab_item02
{
	top: 0px;
	left: 0px;
	height: 0;
    padding-top: 15.55555%;
	position: relative;
	width: 16.6666%;
	background: url("../images/character/tab02.png") no-repeat;
	text-indent: -9999px;
	background-size: cover;
	display: block;
	overflow: hidden;
	float: left;
	-webkit-transition: all 500ms 0s ease;
  	transition: all 500ms 0s ease;
	z-index: 10;
	margin-bottom: 30px;
}
.tab_item03
{
	top: 0px;
	left: 0px;
	height: 0;
    padding-top: 15.55555%;
	position: relative;
	width: 16.6666%;
	background: url("../images/character/tab03.png") no-repeat;
	text-indent: -9999px;
	background-size: cover;
	display: block;
	overflow: hidden;
	float: left;
	-webkit-transition: all 500ms 0s ease;
  	transition: all 500ms 0s ease;
	z-index: 10;
	margin-bottom: 30px;
}
.tab_item04
{
	top: 0px;
	left: 0px;
	height: 0;
    padding-top: 15.55555%;
	position: relative;
	width: 16.6666%;
	background: url("../images/character/tab04.png") no-repeat;
	text-indent: -9999px;
	background-size: cover;
	display: block;
	overflow: hidden;
	float: left;
	-webkit-transition: all 500ms 0s ease;
  	transition: all 500ms 0s ease;
	z-index: 10;
	margin-bottom: 30px;
}
.tab_item05
{
	top: 0px;
	left: 0px;
	height: 0;
    padding-top: 15.55555%;
	position: relative;
	width: 16.6666%;
	background: url("../images/character/tab05.png") no-repeat;
	text-indent: -9999px;
	background-size: cover;
	display: block;
	overflow: hidden;
	float: left;
	-webkit-transition: all 500ms 0s ease;
  	transition: all 500ms 0s ease;
	z-index: 10;
	margin-bottom: 30px;
}
.tab_item06
{
	top: 0px;
	left: 0px;
	height: 0;
    padding-top: 15.55555%;
	position: relative;
	width: 16.6666%;
	background: url("../images/character/tab06.png") no-repeat;
	text-indent: -9999px;
	background-size: cover;
	display: block;
	overflow: hidden;
	float: left;
	-webkit-transition: all 500ms 0s ease;
  	transition: all 500ms 0s ease;
	z-index: 10;
	margin-bottom: 30px;
}
.tab_item01:hover,
.tab_item02:hover,
.tab_item03:hover,
.tab_item04:hover,
.tab_item05:hover,
.tab_item06:hover
{
	top: 30px;
	cursor: pointer;
}
input[name="tab_item"] 
{
	display: none;
}
.tab_content 
{
	display: none;
	padding: 0;
	clear: both;
	overflow: hidden;
	z-index: 10;
}
@keyframes tabAnim{
	0%{opacity:0;}
	100%{opacity:1;}
}
#c01:checked ~ #c01_content,
#c02:checked ~ #c02_content,
#c03:checked ~ #c03_content,
#c04:checked ~ #c04_content,
#c05:checked ~ #c05_content,
#c06:checked ~ #c06_content
{
	display: block;
	animation:tabAnim ease 0.5s forwards;
}
.tabs input:checked + .tab_item01,
.tabs input:checked + .tab_item02,
.tabs input:checked + .tab_item03,
.tabs input:checked + .tab_item04,
.tabs input:checked + .tab_item05,
.tabs input:checked + .tab_item06
{
	
}

#chara01
{
	width: 900px;
	height: 700px;
	background: url(../images/character/chara01/base.jpg) no-repeat;
	position: relative;
	margin-top: 10px;
}
.chara01-text
{
	width: 900px;
	height: 350px;
	background: url(../images/character/chara01/rough.jpg) no-repeat;
	padding-top: 30px;
	box-sizing: border-box;
}
#chara02
{
	width: 900px;
	height: 700px;
	background: url(../images/character/chara02/base.jpg) no-repeat;
	position: relative;
	margin-top: 10px;
}
.chara02-text
{
	width: 900px;
	height: 350px;
	background: url(../images/character/chara02/rough.jpg) no-repeat;
	padding-top: 30px;
	box-sizing: border-box;
}
#chara03
{
	width: 900px;
	height: 700px;
	background: url(../images/character/chara03/base.jpg) no-repeat;
	position: relative;
	margin-top: 10px;
}
.chara03-text
{
	width: 900px;
	height: 350px;
	background: url(../images/character/chara03/rough.jpg) no-repeat;
	padding-top: 30px;
	box-sizing: border-box;
}
#chara04
{
	width: 900px;
	height: 700px;
	background: url(../images/character/chara04/base.jpg) no-repeat;
	position: relative;
	margin-top: 10px;
}
.chara04-text
{
	width: 900px;
	height: 350px;
	background: url(../images/character/chara04/rough.jpg) no-repeat;
	padding-top: 30px;
	box-sizing: border-box;
}
#chara05
{
	width: 900px;
	height: 700px;
	background: url(../images/character/chara05/base.jpg) no-repeat;
	position: relative;
	margin-top: 10px;
}
.chara05-text
{
	width: 900px;
	height: 350px;
	background: url(../images/character/chara05/rough.jpg) no-repeat;
	padding-top: 30px;
	box-sizing: border-box;
}
#chara06
{
	width: 900px;
	height: 1130px;
	background: url(../images/character/chara06/base.jpg) no-repeat;
	position: relative;
	margin-top: 10px;
}
#chara06 .text01
{
	position: absolute;
	top: 50px;
	right: 50px;
	width: 300px;
}
#chara06 .text02
{
	position: absolute;
	top: 830px;
	right: 95px;
	width: 300px;
}
#chara06 .text03
{
	position: absolute;
	top: 660px;
	left: 220px;
	width: 220px;
}

.thumbnail01
{
	position: absolute;
	top: 495px;
	left: 20px;
	z-index: 60;
}
.thumbnail02
{
	position: absolute;
	top: 495px;
	left: 185px;
	z-index: 60;
}
.thumbnail03
{
	position: absolute;
	top: 495px;
	left: 350px;
	z-index: 60;
}
.thumbnail04
{
	position: absolute;
	top: 495px;
	left: 515px;
	z-index: 60;
}
.thumbnail05
{
	position: absolute;
	top: 590px;
	left: 20px;
	z-index: 60;
}
.thumbnail06
{
	position: absolute;
	top: 590px;
	left: 185px;
	z-index: 60;
}
.thumbnail07
{
	position: absolute;
	top: 590px;
	left: 350px;
	z-index: 60;
}
.thumbnail08
{
	position: absolute;
	top: 590px;
	left: 515px;
	z-index: 60;
}
.thumbnail01 img,
.thumbnail02 img,
.thumbnail03 img,
.thumbnail04 img,
.thumbnail05 img,
.thumbnail06 img,
.thumbnail07 img,
.thumbnail08 img
{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px; 
	-o-border-radius: 5px; 
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5); 
	-moz-box-shadow: 0 1px 4px rgba(0,0,0,.5); 
	-o-box-shadow: 0 1px 4px rgba(0,0,0,.5); 
	box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.chara-cos-posi
{
	position: absolute;
	bottom: 0px;
	right: 0px;
	z-index: 50;
}
.chara_gallery_navi
{
	position: absolute;
	bottom: 20px;
	right: 55px;
	margin: 0;
	padding: 0;
	z-index: 50;
	overflow: hidden;
}
.chara_gallery_navi li{
	float:left;
	background:none;
	padding:0;
	margin:0 0 0 5px;
	list-style: none;
}
.chara_gallery_photo{
	width:900px;
	height:700px;
}
.chara_gallery_photo img{
	position:absolute;
}

/*footer*/

footer
{
	background: url("../images/common/footer.jpg");
	text-align: center;
	color: #fff;
	font-size: 12px;
	-moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
	-webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
	text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
	padding: 1em;
}

/*pagetop*/

#page-top
{
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 100;
}
#page-top a
{
	-webkit-transition: all 500ms 0s ease;
  	transition: all 500ms 0s ease;
}
#page-top a:hover
{
	opacity: 0.7;
}


/*特典*/

.bottan
{
text-align: center;
}

.solo
{
text-align: left;
margin: 0px 10px 0px 12px;
}

.solo2
{
text-align: left;
}

.solo2 a
{
margin: 0px 350px 0px 18px;
}

.solo3
{
text-align: left;
}

.solo3 a
{
margin: 0px 350px 0px 18px;
}

.solo4
{
width: 1000px;
text-align: left;
}

.solo4 a
{
margin: 0px 380px 0px 18px;
}

.solo5
{
text-align: left;
}

.solo5 a
{
margin: 0px 350px 0px 18px;
}


.solo6
{
text-align: left;
}

.solo6 a
{
margin: 0px 320px 0px 18px;
}

.solo7
{
text-align: left;
margin: 0px 0px 0px 100px;
}


.solo8
{
text-align: left;
}

.solo8 a
{
margin: 0px 360px 0px 18px;
}

.solocamp
{
font-size: 14px;
text-align: left;
padding: 0px 0px 0px 90px;
margin: 0px;
}
.solocamp ul
{
font-size: 14px;
text-align: left;
padding: 0px 0px 0px 30px;
margin: 0px;
}

.bottan img
{
	border-radius: 5px;
	box-shadow: 0px 0px 3px #acacac;
	border: 3px #ffffff solid;
	overflow: hidden;
	margin: 0px 5px 0px 5px;
}

.bottan textarea
{
	border-radius: 5px;
	box-shadow: 0px 0px 3px #acacac;
	border: 2px #ffffff solid;
	overflow: hidden;
	margin: 0px 2px 0px 2px;
}

.sq textarea
{
	border-radius: 5px;
	box-shadow: 0px 0px 3px #acacac;
	border: 3px #ffffff solid;
	overflow: hidden;
	margin: 0px 8px 0px 8px;
}

.bottan2 img
{
text-align: left;
	border-radius: 5px;
	box-shadow: 0px 0px 3px #acacac;
	border: 3px #ffffff solid;
	overflow: hidden;
	margin: 0px 5px 0px 5px;
}






/*小冊子*/

.shop_list_book table
{
color: #424242;
}

.shop_list_book table
{
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	width: 800px;
	margin: 0px auto 0px auto;
	padding-right: 10px;
	border-collapse: collapse;
}

.shop_list_book td
{
	padding: 4px;
	background: #fff;
	border: 1px solid #ccc;
	vertical-align: middle;
	border: 3px solid #ccc;
}
.shop_list_book th
{
	text-align: center;
	vertical-align: middle;
	padding: 4px;
	background: #ffffff;
	border: 3px solid #ccc;
}

th.end
{
	text-align: center;
	vertical-align: middle;
	padding: 4px;
	background: #ffe350;
	border: 3px solid #ccc;
}


td.end
{
	vertical-align: middle;
	padding: 4px;
	background: #ffe350;
	border: 3px solid #ccc;
}

/*スペック*/
.shop_list_spec
{
	text-align: center; 
	width: 800px;
	margin: 0px auto 0px auto;
	padding-right: 10px;
}

.shop_list_spec table
{
	font-size: 12px;
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	width: 800px;
	margin: 0px auto 0px auto;
	padding-right: 10px;
	border-collapse: collapse;
}

.shop_list_spec td
{
	color: #515151;
	text-align: left;
	padding: 4px;
	background-color: #fff;
	border: 1px solid #ccc;
	vertical-align: middle;
}
.shop_list_spec th
{
	color: #515151;
	width: 130px;
	text-align: left;
	vertical-align: middle;
	padding: 4px;
	background-color: #fafafa;
	border: 1px solid #ccc;
}



/* シンプル 枠 1*/
.kakomi-box1 {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 background-color: #fff; /* 背景色 */
 border: 1px solid #ccc; /* 枠線 */
}