@charset "utf-8";

/* =======================================
	reset
======================================= */
html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-weight: normal;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block
}

ul {
	list-style: none !important
}

blockquote,
q {
	quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: none
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent
}

del {
	text-decoration: line-through
}

abbr[title],
dfn[title] {
	border-bottom: 1px dotted;
	cursor: help
}

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

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0
}

input,
select {
	vertical-align: middle
}

button {
	background: none;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	word-break: break-all;
}


/* =======================================
	common
======================================= */
html {
	height: -webkit-fill-available;
}

body {
	position: relative;
	width: 100%;
	min-height: 100%;
	min-height: -webkit-fill-available;
	margin: 0 auto;
	text-align: center;
	color: black;
	background: white url("../images/bgSP.jpg") repeat-y;
	background-size: 100% auto;
	line-height: 1;
	font-family: 'Noto Sans JP', sans-serif;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

table {
	width: 100%;
}

tr,
td {
	vertical-align: top;
}

a {
	outline: none;
	text-decoration: underline;
}

a:link {
	color: white;
	text-decoration: none;
}

a:visited {
	color: white;
	text-decoration: none;
}

a:hover {
	color: white;
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

main {
	width: 100%;
	margin: 0 auto;
}

.bg {
	width: 100%;
	margin: 0 auto;
	padding: 0.3em 0 0;
}

.bg::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background: url("../images/all_bg.png") left top no-repeat;
	background-size: cover;
}

section {
	width: 100%;
	margin: 0 auto;
}

.inner {
	width: 100%;
	margin: 0 auto;
}

.picpic {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

h1 {
	font-size: 0;
}

h2 {
	margin: 0 auto;
}

h3 {
	margin: 1em auto 1.8em;
	text-align: center;
	font-size: clamp(3vw, 5vw, 1.8em);
	font-weight: bold;
	letter-spacing: 2px;
}

h4 {
	font-size: clamp(1vw, 3.6vw, 1.2em);
	font-weight: bold;
	margin-bottom: 0.4em;
}

h4:not(:first-of-type) {
	margin-top: 1.2em;
}

h4 span {
	font-size: 2.5vw;
	font-weight: normal;
}


/* =======================================
	header
======================================= */
header {
	width: 100%;
	position: relative;
	background: url("../images/00_yuyu_header.png") no-repeat center top;
	background-size: 100% auto;
	padding-top: calc(1192 / 820 * 100%);
}

.aboutbox {
	width: 100%;
	position: relative;
	background: url("../images/00_yuyu_yuyu_01.png") no-repeat center top;
	background-size: 100% auto;
	padding-top: calc(939 / 760 * 100%);
}

.yuyu-official {
	width: 89%;
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;
	margin: auto;
}

.yuyu-official a {
	display: block;
	width: 100%;
	height: 100%;
}

.yuyu-official a img {
	width: 100%;
	height: auto;
}

.introduction {
	width: 24%;
	position: absolute;
	bottom: 26%;
	right: 8%;
}

.introduction a {
	display: block;
	width: 100%;
	height: 100%;
}

.spmovie {
	width: 17%;
	position: absolute;
	top: 37%;
	right: 39.5%;
}

.spmovie a {
	display: block;
	width: 100%;
	height: 100%;
}

.banner {
	width: 18%;
	position: absolute;
	left: 3%;
	bottom: 26%;
	z-index: 50;
	text-align: center;
}

.banner a {
	display: block;
}

.banner a:first-child {
	padding: 0 0 14%;
}


/* =======================================
	navigation
======================================= */
nav {
	width: 100%;
	margin: 0 auto;
	background: #046c01;
	background-size: cover;
	z-index: 99;
	border-top: 2px solid white;
	border-bottom: 2px solid white;
}

nav.fixed {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
}

nav ul {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
}

nav ul li img {
	padding: 20% 0;
}

nav ul li:not(:last-child) {
	margin-right: 8%;
}

nav ul li a img {
	vertical-align: top;
}



/* =======================================
	download
======================================= */
.download {
	width: 100%;
	margin: 0 auto;
	padding: 1.2em 0 0.2em;
	background: #e2e2e2;
	background-size: 100% auto;
}

.download ul {
	width: 82%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 0.5em;
}

.download ul li:not(:last-child) {
	margin-right: 3%;
}

.dl_drptoha {
	width: 86.5%;
	margin: 0 auto 1.5em;
}


/* =======================================
	#chara
======================================= */
#chara {
	position: relative;
	margin-bottom: 15%;
}

.chara_bg {
	height: 0;
	padding-top: calc(361 / 820 * 100%);
	position: relative;
}

.chara_bg:before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/01_yuyu_yusuke_bg.png) no-repeat;
	background-size: 100% auto;
}

#chara h2 {
	width: 90%;
	margin: 1em auto 1.5em;
}

.characters {
	width: 100%;
	margin: 0 auto;
}

.newChara {
	width: 48%;
	position: absolute;
	top: 5%;
	left: 4%;
}

.myswiper00a.swiper,
.myswiper00a .swiper-wrapper {
	overflow: visible !important;
}

.myswiper00a {
	width: 100%;
	position: absolute;
	right: 0;
	left: 0;
	bottom: -6%;
}

.myswiper00a .swiper-wrapper .swiper-slide img {
	width: 100%;
}





.myswiper00b .swiper-wrapper {
	display: flex;
	width: 66%;
	margin: 4% auto 0;
	justify-content: center;
}

.myswiper00b .swiper-wrapper .swiper-slide {
	width: 15% !important;
}

.myswiper00b .swiper-wrapper .swiper-slide:not(:last-of-type) {
	margin-right: 2%;
}

.thumbnailpic .swiper-slide:nth-of-type(1) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_01_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(1) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_01_on.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide:nth-of-type(2) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_02_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(2) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_02_on.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide:nth-of-type(3) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_03_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(3) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_03_on.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide:nth-of-type(4) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_04_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(4) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_04_on.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide:nth-of-type(5) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_05_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(5) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_05_on.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide:nth-of-type(6) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_06_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(6) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_06_on.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide:nth-of-type(7) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_07_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(7) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_07_on.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide:nth-of-type(8) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_08_off.png") no-repeat;
	background-size: 100% auto;
}

.thumbnailpic .swiper-slide-thumb-active:nth-of-type(8) span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	background: url("../images/01_chara_icon_08_on.png") no-repeat;
	background-size: 100% auto;
}

.voice01 {
	width: 34%;
	position: absolute;
	top: 5%;
	right: 9%;
}

.voice02 {
	width: 34%;
	position: absolute;
	top: 18%;
	right: 9%;
	z-index: 5000;
}

.tapdeokigae {
	width: 35%;
	margin: 2% auto 2em;
}

.tapdeokigae img {
	display: block;
	width: 100%;
	height: auto;
}

.howTo {
	width: 85%;
	margin: 5% auto 10%;
}

.skill {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.skilltext {
	width: 84%;
	margin: 0 auto 1.5em;
}

.skill_video {
	width: 80%;
	height: auto;
	margin: 0 auto 2em;
	border-radius: 20px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 3px #000;
}

.skill video {
	width: 88%;
	height: auto;
	margin: 0 auto 2em;
	border-radius: 20px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 3px #000;
}

.gachi_skill {
	position: absolute;
	bottom: 11px;
	right: 14px;
	width: 50%;
}

.other_box {
	margin: 0 0 0 1em;
	position: relative;

	img {
		width: 100%;
		position: relative;
		z-index: 1;
	}
}

.other_box .haki {
	position: absolute;
	top: 0;
	left: 2%;
	z-index: 10;
	width: 50%;
}

.other_box .gachi {
	position: absolute;
	bottom: 10%;
	right: 10%;
	z-index: 10;
	width: 50%;
}

.adjust_box {
	margin-bottom: 10%;

}

.adjest_box02 {
	position: relative;
	margin-bottom: 20%;
}




/* =======================================
	#event
======================================= */
#event {
	position: relative;
	margin-bottom: 15%;
}

#event h2 {
	width: 90%;
	margin: 0 auto 2em;
}

.event_01,
.event_02,
.event_03,
.event_04,
.event_05,
.event_06 {
	width: 100%;
	height: 0;
	position: relative;
	margin-bottom: 1.6em;
}

.event_01:before,
.event_02:before,
.event_03:before,
.event_04:before,
.event_05:before,
.event_06:before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #0277d2;
	background-size: 100% auto;
	mix-blend-mode: multiply;
	transform: translate3d(0, 0, 0);
}

.event_01 {
	padding-top: calc(770 / 820 * 100%);
}

.event_02 {
	padding-top: calc(770 / 820 * 100%);
}

.event_03 {
	padding-top: calc(770 / 820 * 100%);
}

.event_04 {
	padding-top: calc(770 / 820 * 100%);
}

.event_05 {
	padding-top: calc(388 / 820 * 100%);
	margin-bottom: 3.6em;
}

.event_06 {
	padding-top: calc(448 / 820 * 100%);
	margin-bottom: 3.6em;
}

.myswiper01,
.myswiper02,
.myswiper03,
.myswiper04 {
	padding-bottom: 15%;
}

.swiper01,
.swiper02,
.swiper03,
.swiper04 {
	width: 49%;
	position: absolute;
	top: 55%;
	left: 43.5%;
}

/*.swiper-button-next01,
.swiper-button-next02,
.swiper-button-next03,
.swiper-button-next04 {
	width:16px;
	height:16px;
	background-size:16px 16px;
	margin-top:0;
	position:absolute;
	top:44%;
	right:-11%;
	z-index:10;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--swiper-navigation-color, var(--swiper-theme-color));
	background-image:url("../images/03_ts_web_event_01_right.png");
}*/

.swiper-button-next01,
.swiper-button-next02,
.swiper-button-next03,
.swiper-button-next04 {
	width: 8%;
	height: auto;
	padding-top: calc(43 / 27 * 8%);
	background-size: cover !important;
	;
	margin-top: 0;
	position: absolute;
	top: 44%;
	right: -11%;
	z-index: 10;
	cursor: pointer;
	color: var(--swiper-navigation-color, var(--swiper-theme-color));
	background: url("../images/03_ts_web_event_01_right.png") left top no-repeat;
}

.swiper-button-prev01,
.swiper-button-prev02,
.swiper-button-prev03,
.swiper-button-prev04 {
	width: 8%;
	height: auto;
	padding-top: calc(43 / 27 * 8%);
	background-size: cover !important;
	;
	margin-top: 0;
	position: absolute;
	top: 44%;
	left: -11%;
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--swiper-navigation-color, var(--swiper-theme-color));
	background: url("../images/03_ts_web_event_01_left.png") left top no-repeat;
}

.swiper-pagination-bullet-active {
	background: whitesmoke;
}

.swiper-pagination-bullet {
	background: white;
}


/* =======================================
	#cp
======================================= */
#cp {
	position: relative;
}

#cp h2 {
	width: 90%;
	margin: 0 auto 1em;
}

ul.cplist {
	width: 76%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto 0.8em;
}

ul.cplist li {
	width: 48%;
	margin-bottom: 5%;
}

ul.cplist li:nth-child(odd) {
	margin-right: 4%;
}

.cp_01,
.cp_02,
.cp_03,
.cp_04 {
	width: 100%;
	height: 0;
	margin: 0 auto;
	position: relative;
	margin-bottom: 1.6em;
}

.cp_01 {
	padding-top: calc(1808 / 820 * 100%);
}

.cp_02 {
	padding-top: calc(524 / 820 * 100%);
}

.cp_03 {
	padding-top: calc(919 / 820 * 100%);
}



.cp_01:before,
.cp_02:before,
.cp_03:before,
.cp_04:before {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #0277d2;
	background-size: 100% auto;
	mix-blend-mode: multiply;
	transform: translate3d(0, 0, 0);
}

.cp_02_btn {
	width: 54%;
	position: absolute;
	bottom: 4%;
	left: 9%;
}

.cpBtns {
	width: 54%;
	position: absolute;
	bottom: -25.5%;
	left: 0;
	right: 0;
	margin: auto;
}

.cpBtns ul {
	width: 100%;
	margin: 0 auto;
}

.cpBtns li:nth-child(2) {
	width: 67.25%;
	margin: 20px auto 0;
}


/* =======================================
	#movie
======================================= */
#movie {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

#movie h2 {
	width: 90%;
	margin: 0 auto;
}

#movie .inner {
	width: 100%;
	margin: 0 auto;
	position: relative;
	background: linear-gradient(to bottom,
			rgba(0, 0, 0, 0) 30%,
			#046c01 30%);
	padding-top: calc(490 / 820 * 100%);
}

.myswiper05 {
	padding-bottom: 11%;
}

.swiper05 {
	width: 72%;
	position: absolute;
	top: 10%;
	left: 0;
	right: 0;
	margin: auto;
}

.swiper-button-next05 {
	width: 8%;
	height: auto;
	padding-top: calc(43 / 27 * 8%);
	background-size: cover !important;
	;
	margin-top: 0;
	position: absolute;
	top: 30%;
	right: -11%;
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--swiper-navigation-color, var(--swiper-theme-color));
	background: url("../images/03_ts_web_event_01_right.png") left top no-repeat;
}

.swiper-button-prev05 {
	width: 8%;
	height: auto;
	padding-top: calc(43 / 27 * 8%);
	background-size: cover !important;
	;
	margin-top: 0;
	position: absolute;
	top: 30%;
	left: -11%;
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--swiper-navigation-color, var(--swiper-theme-color));
	background: url("../images/03_ts_web_event_01_left.png") left top no-repeat;
}

.copyright {
	width: 100%;
	margin: 0 auto;
}


/* =======================================
	footer
======================================= */
footer {
	width: 100%;
	margin: 0 auto;
	padding: 2% 0 4%;
	color: white;
	background: black;
}

footer ul.gamemenu {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0 auto 2%;
	padding: 1.5em 0;
}

footer ul.gamemenu li {
	display: flex;
	align-items: center;
	padding: 0 5%;
	border-right: 2px solid gainsboro;
}

footer ul.gamemenu li:nth-child(3),
footer ul.gamemenu li:last-child {
	border: none;
}

footer ul.gamemenu li.flexwrapper {
	width: 100%;
	height: 2vh;
	border: none;
}

footer ul.gamemenu li img {
	vertical-align: middle;
	max-height: 4.5vw;
	padding: 0;
}

.footerMenu li a {
	font-size: 75%;
	line-height: 1.2;
}

.footerInfo li span {
	text-align: left;
}

.footerDesc {
	line-height: 1.5;
}


/* =======================================
	remodal
======================================= */
.remodal {
	width: 90%;
	margin: 0 auto 50px;
	padding: 50px 0 0;
	text-align: left;
	color: white;
	background: transparent;
}

.remodal-overlay {
	background: rgba(0, 0, 0, 0.6);
}

.remodal_inner {
	padding: 3%;
	color: #fffcf1;
	background: #046c01;
}

.movies .remodal_inner {
	padding: 0;
	background: transparent;
}

.remodal p {
	font-weight: normal;
	font-size: clamp(1vw, 3vw, 15px);
	line-height: 1.3;
}

.remodal p a {
	color: #d7fb5a;
}

.remodal-close {
	top: 10px;
	left: auto;
	right: 0;
}

.remodal-close:before {
	height: 0;
	background: url("../images/close.png") center top no-repeat;
	background-size: 100% auto;
	padding-top: 100%;
	content: '';
}

.ytb {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.ytb iframe,
.ytb object,
.ytb embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* =======================================
	buttons
======================================= */
.banner_fixed a {
	display: block;
}

.banner_fixed {
	width: 17%;
	position: fixed;
	left: 5%;
	z-index: 50;
	bottom: -300px;
	transition: all 0.5s;
}

.banner_fixed a:first-child {
	margin-bottom: 13%;
	padding: 0;
}

.banner_fixed.active {
	bottom: 30px;
	visibility: visible;
	opacity: 1;
}

.banner_spmovie {
	display: none;
}


.page_top {
	position: fixed;
	right: 6%;
	bottom: 30px;
	z-index: 50;
}

.page_top a {
	display: block;
	padding: 0.4em;
	color: #2e2e2e;
	background: white;
	font-size: 1.6rem;
	border-radius: 50%;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.page_top {
	bottom: -200px;
	transition: all 0.5s;
}

.page_top.active {
	bottom: 30px;
	visibility: visible;
}


@media screen and (min-width: 640px) {
	body {
		background: none;
	}

	body::before {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100vh;
		background: url("../images/00_yuyu_header_pc_bg.jpg") left top no-repeat;
		background-size: cover;
	}

	.wrapper {
		position: relative;
		display: flex;

	}



	.main_contents {
		width: 640px;
		min-width: 640px;
	}





	.bg::before {
		width: 640px;
		left: 50%;
		/* 画面の中央基準に配置 */
		transform: translateX(-50%);
		/* 要素自体を中央に寄せる */
	}

	.spmovie {
		display: none;
	}

	.banner {
		display: none;
	}

	.banner_fixed {
		width: 7%;
		left: -800px;
		bottom: 30px;
	}

	.banner_fixed.active {
		left: calc((100% - 640px) * 0.5 - 9%);
	}

	.banner_spmovie {
		width: 9%;
		right: -800px;
		bottom: 30px;
		position: fixed;
		transition: right 0.4s ease;
		z-index: 100;
		display: block;
	}

	.banner_spmovie.active {
		right: calc((100% - 640px) * 0.5 - 11%);
	}

	.page_top {
		right: 20px
	}

	.page_top.active {
		right: 20px;

	}


	nav.fixed {
		width: 640px;

		ul {
			width: 576px;
			margin: 0 auto;
		}
	}



	.cpBtns {
		bottom: -21.5%;
	}



}